sellmate-design-system-react 9.0.0-beta.24 → 9.0.0-beta.26

package/dist/index.cjs

@@ -4243,7 +4243,7 @@ function moveWithDepth(items, fromIndex, target, getDepth, setDepth, maxDepth) {
   const nextDepth = target.intent === "inside" ? targetDepth + 1 : targetDepth;
   const depthDelta = clampDepth(nextDepth, maxDepth) - sourceDepth;
   const nextMovedItems = setDepth && depthDelta !== 0 ? movedItems.map(
-    (item, index) => setDepth(item, clampDepth(getDepth(item, fromIndex + index) + depthDelta, maxDepth))
+    (item2, index) => setDepth(item2, clampDepth(getDepth(item2, fromIndex + index) + depthDelta, maxDepth))
   ) : movedItems;
   return [
     ...remainingItems.slice(0, insertionIndex),
@@ -4290,7 +4290,7 @@ function SDraggableListInner({
     setDropTarget({ index, intent: "before" });
   }, []);
   const readDepth = react.useCallback(
-    (item, index) => clampDepth(getDepth?.(item, index) ?? 1, maxDepth),
+    (item2, index) => clampDepth(getDepth?.(item2, index) ?? 1, maxDepth),
     [getDepth, maxDepth]
   );
   react.useEffect(() => {
@@ -4331,8 +4331,8 @@ function SDraggableListInner({
           nextDropTarget = ratio < 0.5 ? { index, intent: "before" } : { index, intent: "after" };
           break;
         }
-        const item = items[index];
-        const canHaveChildren = (getCanHaveChildren?.(item, index) ?? true) && readDepth(item, index) < maxDepth;
+        const item2 = items[index];
+        const canHaveChildren = (getCanHaveChildren?.(item2, index) ?? true) && readDepth(item2, index) < maxDepth;
         if (ratio < 0.25) {
           nextDropTarget = { index, intent: "before" };
         } else if (ratio > 0.75 || !canHaveChildren) {
@@ -4412,10 +4412,10 @@ function SDraggableListInner({
       className: `${className ?? ""} ${dragContext ? "min-h-[40px]" : ""} ${showEmptyDrop ? "relative before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']" : ""}`,
       "data-draggable-group": dragContext ? dragGroup : void 0,
       "data-draggable-list-id": dragContext ? listId : void 0,
-      children: items.map((item, index) => {
-        const itemKey = getKey(item, index);
-        const disabled = (getDisabled?.(item, index) ?? false) || isDescendant(items, index, draggedSubtreeStart, usesDepth ? readDepth : void 0);
-        const depth = readDepth(item, index);
+      children: items.map((item2, index) => {
+        const itemKey = getKey(item2, index);
+        const disabled = (getDisabled?.(item2, index) ?? false) || isDescendant(items, index, draggedSubtreeStart, usesDepth ? readDepth : void 0);
+        const depth = readDepth(item2, index);
         const showBefore = isDropTarget && currentDropIndex === index && (dragContext || currentDropIntent === "before");
         const showInside = isDropTarget && currentDropIndex === index && !dragContext && usesDepth && currentDropIntent === "inside";
         const showAfter = isDropTarget && (dragContext ? currentDropIndex === items.length && index === items.length - 1 : currentDropIndex === index && currentDropIntent === "after");
@@ -4439,7 +4439,7 @@ function SDraggableListInner({
             onClick: selectItem,
             onKeyDown: handleItemKeyDown,
             className: `relative ${showBefore ? `before:absolute before:left-0 before:right-0 ${beforeIndicatorPosition} before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']` : ""} ${showAfter ? `after:absolute after:left-0 after:right-0 ${afterIndicatorPosition} after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']` : ""} ${showInside ? "outline outline-2 outline-offset-[-2px] outline-(--sys-color-border-accent)" : ""}`,
-            children: renderItem(item, index, {
+            children: renderItem(item2, index, {
               onDragHandleMouseDown: (event) => {
                 if (disabled) return;
                 if (dragContext && dragGroup && listId) {
@@ -5361,7 +5361,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
 }, ref) {
   const [internalValue, setInternalValue] = react.useState(defaultValue ?? []);
   const [internalExpandedIds, setInternalExpandedIds] = react.useState(
-    defaultExpandedIds ?? items.filter((item) => item.children?.length).map((item) => item.id)
+    defaultExpandedIds ?? items.filter((item2) => item2.children?.length).map((item2) => item2.id)
   );
   const currentValue = value ?? internalValue;
   const currentExpandedIds = expandedIds ?? internalExpandedIds;
@@ -6736,6 +6736,174 @@ function SSwitch({
     }
   );
 }
+
+// src/components/SSystemActionButton/systemActionButton.config.ts
+var SYSTEM_ACTION_BUTTON_COLORS = ["light", "dark", "darker"];
+var SYSTEM_ACTION_BUTTON_TYPES = [
+  "account",
+  "switch",
+  "select",
+  "subSelect",
+  "status"
+];
+var item = (p) => `var(--cmp-gnb-system-item-${p})`;
+var action = (p) => `var(--cmp-gnb-system-actionButton-${p})`;
+var sys = (p) => `var(--sys-color-${p})`;
+var SYSTEM_ACTION_BUTTON_COLOR_CONFIG = {
+  light: {
+    bg: item("light-bg-default"),
+    bgHover: item("light-bg-hover"),
+    // light 의 아이콘 프레임 배경은 기본·hover 공통 한 값이다 (흰 면 위 흰 프레임)
+    iconBg: item("light-icon-bg"),
+    iconBgHover: item("light-icon-bg"),
+    iconGlyph: item("light-icon-default"),
+    iconGlyphHover: item("light-icon-default"),
+    text: item("light-text"),
+    actionText: {
+      switch: action("switch-text-light"),
+      selectData: action("selectData-text-light")
+    },
+    // 트레일링 아이콘 전용 색 토큰이 없다. light 는 item.icon.default 가
+    // "actionButton/alertButton/setting 공통 글리프색"이라고 토큰에 명시돼 있다.
+    actionIcon: item("light-icon-default")
+  },
+  dark: {
+    bg: item("dark-bg-default"),
+    bgHover: item("dark-bg-hover"),
+    iconBg: item("dark-icon-bg-default"),
+    iconBgHover: item("dark-icon-bg-hover"),
+    // 어두운 면에는 글리프색 토큰이 없다. 기본은 프레임이 배경과 블렌딩되므로 라벨색(흰색),
+    // hover 는 프레임이 흰색이 되므로 그 위에 표면색을 그대로 얹는다.
+    iconGlyph: item("dark-text"),
+    iconGlyphHover: item("dark-bg-hover"),
+    text: item("dark-text"),
+    actionText: {
+      switch: action("switch-text-dark"),
+      selectData: action("selectData-text-dark")
+    },
+    // TODO: 어두운 면의 트레일링 아이콘 색 토큰이 없다. 시안(#AAAAAA)에 맞는 시맨틱 토큰으로 둔다.
+    actionIcon: sys("fg-quaternary")
+  },
+  darker: {
+    bg: item("darker-bg-default"),
+    bgHover: item("darker-bg-hover"),
+    iconBg: item("darker-icon-bg-default"),
+    iconBgHover: item("darker-icon-bg-hover"),
+    iconGlyph: item("darker-text"),
+    iconGlyphHover: item("darker-bg-hover"),
+    text: item("darker-text"),
+    actionText: {
+      switch: action("switch-text-dark"),
+      selectData: action("selectData-text-dark")
+    },
+    actionIcon: sys("fg-quaternary")
+  }
+};
+var SYSTEM_ACTION_BUTTON_TYPE_CONFIG = {
+  account: { fixedIcon: "user" },
+  switch: {
+    actionText: { token: "switch", typo: "typo-field-sm-default" },
+    actionIcon: { name: "synchronize", size: action("switch-icon") }
+  },
+  select: {
+    actionIcon: { name: "chevronRight", size: action("select-icon") }
+  },
+  subSelect: {
+    actionText: { token: "selectData", typo: "typo-control-xs-medium" },
+    actionIcon: { name: "chevronRight", size: action("selectData-icon") }
+  },
+  status: {
+    // status 는 선행 아이콘 없이 태그가 라벨 자리를 차지한다
+    actionIcon: { name: "chevronRight", size: action("select-icon") }
+  }
+};
+var SYSTEM_ACTION_BUTTON_LAYOUT = {
+  /** 행 높이 */
+  height: item("height"),
+  /** 행 라운드 */
+  radius: item("radius"),
+  /** 아이콘 프레임 한 변 */
+  iconFrame: item("icon-frame"),
+  /** 아이콘 글리프 크기 */
+  iconGlyph: item("icon-glyph"),
+  /** 아이콘 프레임 라운드 */
+  iconRadius: item("icon-radius"),
+  /** 아이콘 프레임 ↔ 라벨 간격 */
+  iconLabelGap: item("iconLabelGap"),
+  /** 좌측 여백 */
+  paddingLeft: action("paddingLeft"),
+  /** 우측 여백 */
+  paddingRight: action("paddingRight"),
+  /** 액션 텍스트 ↔ 액션 아이콘 간격 */
+  actionGap: action("selectData-gap")
+};
+function TokenIcon({ name, size }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name, size: "100%", style: { width: size, height: size } });
+}
+var SSystemActionButton = /* @__PURE__ */ react.forwardRef(
+  function SSystemActionButton2({ color = "light", type, label, option, disabled = false, className, style, ...rest }, ref) {
+    const c = SYSTEM_ACTION_BUTTON_COLOR_CONFIG[color];
+    const spec = SYSTEM_ACTION_BUTTON_TYPE_CONFIG[type];
+    const hoverable = !disabled;
+    const status = type === "status" ? option : void 0;
+    const resolvedIcon = spec.fixedIcon ?? option?.icon;
+    const actionText = spec.actionText ? option?.text : void 0;
+    const cssVars = {
+      "--sab-bg": c.bg,
+      "--sab-bg-hover": hoverable ? c.bgHover : c.bg,
+      "--sab-icon-bg": c.iconBg,
+      "--sab-icon-bg-hover": hoverable ? c.iconBgHover : c.iconBg,
+      "--sab-icon-glyph": c.iconGlyph,
+      "--sab-icon-glyph-hover": hoverable ? c.iconGlyphHover : c.iconGlyph,
+      "--sab-text": c.text,
+      "--sab-action-text": spec.actionText ? c.actionText[spec.actionText.token] : void 0,
+      "--sab-action-icon": c.actionIcon,
+      "minHeight": SYSTEM_ACTION_BUTTON_LAYOUT.height,
+      "borderRadius": SYSTEM_ACTION_BUTTON_LAYOUT.radius,
+      "paddingLeft": SYSTEM_ACTION_BUTTON_LAYOUT.paddingLeft,
+      "paddingRight": SYSTEM_ACTION_BUTTON_LAYOUT.paddingRight,
+      "gap": SYSTEM_ACTION_BUTTON_LAYOUT.iconLabelGap,
+      ...style
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled,
+        className: cn(
+          "group box-border flex w-full items-center border-none bg-(--sab-bg) text-left transition-colors",
+          "hover:bg-(--sab-bg-hover)",
+          disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+          className
+        ),
+        style: cssVars,
+        ...rest,
+        children: [
+          resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "inline-flex shrink-0 items-center justify-center bg-(--sab-icon-bg) text-(--sab-icon-glyph) transition-colors group-hover:bg-(--sab-icon-bg-hover) group-hover:text-(--sab-icon-glyph-hover)",
+              style: { width: SYSTEM_ACTION_BUTTON_LAYOUT.iconFrame, height: SYSTEM_ACTION_BUTTON_LAYOUT.iconFrame, borderRadius: SYSTEM_ACTION_BUTTON_LAYOUT.iconRadius },
+              children: /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { name: resolvedIcon, size: SYSTEM_ACTION_BUTTON_LAYOUT.iconGlyph })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-semibold flex min-w-0 flex-1 items-center text-(--sab-text)", children: status ? /* @__PURE__ */ jsxRuntime.jsx(STag, { color: status.color ?? "blue", icon: "dot", label: status.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }) }),
+          (actionText != null || spec.actionIcon) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex shrink-0 items-center", style: { gap: SYSTEM_ACTION_BUTTON_LAYOUT.actionGap }, children: [
+            actionText != null && spec.actionText && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(spec.actionText.typo, "whitespace-nowrap text-(--sab-action-text)"),
+                children: actionText
+              }
+            ),
+            spec.actionIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0 items-center text-(--sab-action-icon)", children: /* @__PURE__ */ jsxRuntime.jsx(TokenIcon, { name: spec.actionIcon.name, size: spec.actionIcon.size }) })
+          ] })
+        ]
+      }
+    );
+  }
+);
 var SIZE_CLASSES = {
   xs: "h-[24px] px-[8px] text-[12px] font-normal leading-[20px]",
   sm: "h-[28px] px-[12px] text-[14px] font-medium leading-[24px]"
@@ -8522,17 +8690,17 @@ var GNB_TOP_ICON_GAP = 8;
 var GNB_TOP_ICON_SIZE = 24;
 var GNB_FULL_LOGO_WIDTH_NO_LAUNCHER = GNB_FULL_LOGO_WIDTH + GNB_TOP_ICON_SIZE + GNB_TOP_ICON_GAP;
 function findGnbRailValue(items, value) {
-  if (items.some((item) => item.value === value)) return value;
+  if (items.some((item2) => item2.value === value)) return value;
   return findGnbAncestors(items, value)[0];
 }
 function findGnbSiblingValues(items, value) {
   const walk = (list) => {
-    if (list.some((item) => item.value === value)) {
-      return list.filter((item) => item.value !== value).map((item) => item.value);
+    if (list.some((item2) => item2.value === value)) {
+      return list.filter((item2) => item2.value !== value).map((item2) => item2.value);
     }
-    for (const item of list) {
-      if (item.children) {
-        const found = walk(item.children);
+    for (const item2 of list) {
+      if (item2.children) {
+        const found = walk(item2.children);
         if (found) return found;
       }
     }
@@ -8542,10 +8710,10 @@ function findGnbSiblingValues(items, value) {
 }
 function findGnbAncestors(items, value) {
   const walk = (list, trail) => {
-    for (const item of list) {
-      if (item.value === value) return trail;
-      if (item.children) {
-        const found = walk(item.children, [...trail, item.value]);
+    for (const item2 of list) {
+      if (item2.value === value) return trail;
+      if (item2.children) {
+        const found = walk(item2.children, [...trail, item2.value]);
         if (found) return found;
       }
     }
@@ -8555,20 +8723,20 @@ function findGnbAncestors(items, value) {
 }
 function findGnbDescendantBranchValues(items, value) {
   const find = (list) => {
-    for (const item of list) {
-      if (item.value === value) return item;
-      if (item.children) {
-        const found = find(item.children);
+    for (const item2 of list) {
+      if (item2.value === value) return item2;
+      if (item2.children) {
+        const found = find(item2.children);
         if (found) return found;
       }
     }
     return void 0;
   };
   const collect = (list, acc) => {
-    for (const item of list) {
-      if (item.children && item.children.length > 0) {
-        acc.push(item.value);
-        collect(item.children, acc);
+    for (const item2 of list) {
+      if (item2.children && item2.children.length > 0) {
+        acc.push(item2.value);
+        collect(item2.children, acc);
       }
     }
     return acc;
@@ -8611,7 +8779,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   const type = typeProp ?? layout?.type ?? "box";
   const folded = foldedProp ?? layout?.folded ?? false;
   const useRail = useRailProp ?? layout?.useRail ?? false;
-  const railHasLeaf = useRail && items.some((item) => !item.children || item.children.length === 0);
+  const railHasLeaf = useRail && items.some((item2) => !item2.children || item2.children.length === 0);
   const header = railHasLeaf ? "full" : headerProp ?? layout?.header ?? "fix";
   const H = GNB_HEADER[header];
   const M = GNB_MENU[type];
@@ -8654,13 +8822,13 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     labelTipHideRef.current = setTimeout(() => setLabelTip(null), LABEL_TIP_HIDE_DELAY_MS);
   };
   react.useEffect(() => cancelLabelTipHide, []);
-  const rowHoverProps = (item) => ({
+  const rowHoverProps = (item2) => ({
     onMouseEnter: (event) => {
-      setHoveredKey(item.value);
-      showLabelTipIfTruncated(event.currentTarget, item.label);
+      setHoveredKey(item2.value);
+      showLabelTipIfTruncated(event.currentTarget, item2.label);
     },
     onMouseLeave: () => {
-      setHoveredKey((prev) => prev === item.value ? null : prev);
+      setHoveredKey((prev) => prev === item2.value ? null : prev);
       startLabelTipHide();
     }
   });
@@ -8686,7 +8854,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   }, [items, value]);
   react.useEffect(() => {
     setActiveRail(
-      (prev) => prev !== void 0 && items.some((item) => item.value === prev) ? prev : items[0]?.value
+      (prev) => prev !== void 0 && items.some((item2) => item2.value === prev) ? prev : items[0]?.value
     );
   }, [items]);
   const toggleExpand = (key) => {
@@ -8703,33 +8871,33 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
       return next;
     });
   };
-  const handleItemClick = (item) => {
-    if (item.disabled) return;
-    if (item.children && item.children.length > 0) {
-      toggleExpand(item.value);
+  const handleItemClick = (item2) => {
+    if (item2.disabled) return;
+    if (item2.children && item2.children.length > 0) {
+      toggleExpand(item2.value);
       return;
     }
-    onValueChange?.(item.value);
+    onValueChange?.(item2.value);
   };
-  const handleRailClick = (item) => {
-    if (item.disabled) return;
-    setActiveRail(item.value);
-    onRailChange?.(item.value);
-    if (!item.children || item.children.length === 0) onValueChange?.(item.value);
+  const handleRailClick = (item2) => {
+    if (item2.disabled) return;
+    setActiveRail(item2.value);
+    onRailChange?.(item2.value);
+    if (!item2.children || item2.children.length === 0) onValueChange?.(item2.value);
   };
   const handleFoldToggle = () => {
     const next = !folded;
     onFoldChange?.(next);
     if (foldedProp === void 0) layout?.setFolded(next);
   };
-  const renderRailItem = (item) => {
-    const isActive = item.value === activeRail;
-    const isHovered = hoveredKey === item.value && !item.disabled;
+  const renderRailItem = (item2) => {
+    const isActive = item2.value === activeRail;
+    const isHovered = hoveredKey === item2.value && !item2.disabled;
     return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
-        disabled: item.disabled,
+        disabled: item2.disabled,
         "aria-current": isActive ? "true" : void 0,
         className: "box-border flex select-none flex-col items-center border-none bg-transparent transition-colors duration-150",
         style: {
@@ -8744,31 +8912,31 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
           fontSize: GNB_RAIL.itemFontSize,
           lineHeight: `${GNB_RAIL.itemLineHeight}px`,
           fontWeight: isActive ? GNB_RAIL.itemFontWeightSelected : GNB_RAIL.itemFontWeight,
-          opacity: item.disabled ? 0.4 : 1,
-          cursor: item.disabled ? "not-allowed" : "pointer"
+          opacity: item2.disabled ? 0.4 : 1,
+          cursor: item2.disabled ? "not-allowed" : "pointer"
         },
-        onClick: () => handleRailClick(item),
-        ...rowHoverProps(item),
+        onClick: () => handleRailClick(item2),
+        ...rowHoverProps(item2),
         children: [
-          item.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item.icon, size: GNB_RAIL.itemIcon, className: "shrink-0" }),
+          item2.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item2.icon, size: GNB_RAIL.itemIcon, className: "shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               "data-gnb-label": true,
               className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-center",
-              children: item.label
+              children: item2.label
             }
           )
         ]
       }
-    ) }, item.value);
+    ) }, item2.value);
   };
-  const renderItem = (item, depth, branchHasIcon = false) => {
-    const hasChildren = !!(item.children && item.children.length > 0);
-    const isSelected = !hasChildren && item.value === value;
-    const isExpanded = expandedKeys.has(item.value);
-    const isHovered = hoveredKey === item.value && !item.disabled;
-    const iconBranch = depth === 1 ? !!item.icon : branchHasIcon;
+  const renderItem = (item2, depth, branchHasIcon = false) => {
+    const hasChildren = !!(item2.children && item2.children.length > 0);
+    const isSelected = !hasChildren && item2.value === value;
+    const isExpanded = expandedKeys.has(item2.value);
+    const isHovered = hoveredKey === item2.value && !item2.disabled;
+    const iconBranch = depth === 1 ? !!item2.icon : branchHasIcon;
     const itemStyle = {
       gap: M.itemGap,
       paddingTop: M.itemPaddingY,
@@ -8785,8 +8953,8 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
       fontSize: depth === 1 ? M.depth1FontSize : M.itemFontSize,
       lineHeight: `${depth === 1 ? M.depth1LineHeight : M.itemLineHeight}px`,
       fontWeight: depth === 1 ? M.depth1FontWeight : isSelected ? M.itemFontWeightSelected : M.itemFontWeight,
-      opacity: item.disabled ? 0.4 : 1,
-      cursor: item.disabled ? "not-allowed" : "pointer"
+      opacity: item2.disabled ? 0.4 : 1,
+      cursor: item2.disabled ? "not-allowed" : "pointer"
     };
     return (
       // li 를 flex-col 로 둬야 버튼이 좌우 마진만큼 안쪽으로 들어가고,
@@ -8796,18 +8964,18 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
           "button",
           {
             type: "button",
-            disabled: item.disabled,
+            disabled: item2.disabled,
             "aria-expanded": hasChildren ? isExpanded : void 0,
             "aria-current": isSelected ? "page" : void 0,
             className: "box-border flex select-none items-center border-none bg-transparent text-left transition-colors duration-150",
             style: itemStyle,
-            onClick: () => handleItemClick(item),
-            ...rowHoverProps(item),
+            onClick: () => handleItemClick(item2),
+            ...rowHoverProps(item2),
             children: [
-              depth === 1 && item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+              depth === 1 && item2.icon && /* @__PURE__ */ jsxRuntime.jsx(
                 SIcon,
                 {
-                  name: item.icon,
+                  name: item2.icon,
                   size: M.depth1Icon,
                   color: isSelected ? C.itemColorActive : C.itemIcon,
                   className: "shrink-0"
@@ -8827,17 +8995,17 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
                   {
                     "data-gnb-label": true,
                     className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
-                    children: item.label
+                    children: item2.label
                   }
                 )
               ] }),
-              item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+              item2.tag !== void 0 && item2.tag !== "" && /* @__PURE__ */ jsxRuntime.jsx(
                 STag,
                 {
                   shape: "square",
                   size: "xs",
-                  color: item.tagColor ?? "blue",
-                  label: item.tag,
+                  color: item2.tagColor ?? "blue",
+                  label: item2.tag,
                   className: "shrink-0"
                 }
               ),
@@ -8870,16 +9038,16 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
                   visibility: isExpanded ? "visible" : "hidden",
                   transition: `visibility 0s linear ${isExpanded ? "0s" : `${GNB_EXPAND_MS}ms`}`
                 },
-                children: item.children.map((child) => renderItem(child, depth + 1, iconBranch))
+                children: item2.children.map((child) => renderItem(child, depth + 1, iconBranch))
               }
             )
           }
         )
-      ] }, item.value)
+      ] }, item2.value)
     );
   };
   const railItems = useRail ? items : [];
-  const menuItems = useRail ? items.find((item) => item.value === activeRail)?.children ?? [] : items;
+  const menuItems = useRail ? items.find((item2) => item2.value === activeRail)?.children ?? [] : items;
   const showMenu = !useRail || menuItems.length > 0;
   const [uncontrolledMenuWidth, setUncontrolledMenuWidth] = react.useState(
     () => defaultMenuWidth ?? GNB_MENU_WIDTH
@@ -9186,7 +9354,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
                                 paddingTop: M.bodyPaddingY,
                                 paddingBottom: M.bodyPaddingY
                               },
-                              children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })
+                              children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item2) => renderItem(item2, 1)) })
                             }
                           ),
                           menuFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: menuFooter })
@@ -9837,19 +10005,19 @@ var STEPPER_VERTICAL_COLORS = {
   errorBadge: "#FB4444"
 };
 var ERROR_TOOLTIP_MESSAGE = "\uD655\uC778\uC774 \uD544\uC694\uD55C \uD56D\uBAA9\uC774 \uC788\uC2B5\uB2C8\uB2E4.";
-function getItemValue(item, index) {
-  return item.value ?? String(index + 1);
+function getItemValue(item2, index) {
+  return item2.value ?? String(index + 1);
 }
 function groupAdjacentItems(items) {
   return items.reduce(
-    (groups, item, index) => {
-      const currentGroup = item.group;
+    (groups, item2, index) => {
+      const currentGroup = item2.group;
       const previous = groups[groups.length - 1];
       if (currentGroup && previous?.group === currentGroup) {
-        previous.items.push(item);
+        previous.items.push(item2);
         return groups;
       }
-      groups.push({ group: currentGroup, startIndex: index, items: [item] });
+      groups.push({ group: currentGroup, startIndex: index, items: [item2] });
       return groups;
     },
     []
@@ -9879,15 +10047,15 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
   const verticalItemRefs = react.useRef([]);
   const activeIndex = Math.max(
     0,
-    items.findIndex((item, index) => getItemValue(item, index) === value)
+    items.findIndex((item2, index) => getItemValue(item2, index) === value)
   );
   const lastCompletedIndex = items.reduce(
-    (lastIndex, item, index) => item.completed === true ? index : lastIndex,
+    (lastIndex, item2, index) => item2.completed === true ? index : lastIndex,
     -1
   );
   const resolvedClickableIndex = lastCompletedIndex + 1;
   const [visitedMaxIndex, setVisitedMaxIndex] = react.useState(activeIndex);
-  const firstErrorIndex = items.findIndex((item) => item.error === true);
+  const firstErrorIndex = items.findIndex((item2) => item2.error === true);
   react.useImperativeHandle(
     ref,
     () => ({
@@ -9915,18 +10083,18 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
       transform: `translateY(${activeItem.offsetTop}px)`
     });
   }, [activeIndex, vertical, items]);
-  const getState = (item, index) => {
+  const getState = (item2, index) => {
     if (index === activeIndex) return "active";
-    if (item.completed != null) return item.completed ? "completed" : "default";
+    if (item2.completed != null) return item2.completed ? "completed" : "default";
     return "default";
   };
-  const emitValueChange = (item, index) => {
-    onValueChange?.(getItemValue(item, index), item, index);
+  const emitValueChange = (item2, index) => {
+    onValueChange?.(getItemValue(item2, index), item2, index);
   };
   const isWithinClickableIndex = (index) => index <= resolvedClickableIndex;
-  const renderStepContent = (item, index, options = {}) => {
+  const renderStepContent = (item2, index, options = {}) => {
     const { isVertical = false, roleListItem = true, hovered = false } = options;
-    const state2 = getState(item, index);
+    const state2 = getState(item2, index);
     const isHorizontalCompleted = !isVertical && state2 === "completed";
     const isVerticalCompleted = isVertical && state2 === "completed";
     const isVerticalLastActive = isVertical && state2 === "default" && index === visitedMaxIndex;
@@ -10001,12 +10169,12 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
               children: showsCheckIcon ? /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "check", size: STEPPER_LAYOUT.sequenceIcon, color: "currentColor" }) : index + 1
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: item2.label })
         ]
       }
     );
   };
-  const renderClickableStepContent = (item, index, isVertical = false) => {
+  const renderClickableStepContent = (item2, index, isVertical = false) => {
     const isDisabled = !isWithinClickableIndex(index);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -10019,9 +10187,9 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
         ),
         style: { font: "inherit", color: "inherit" },
         onClick: () => {
-          if (!isDisabled) emitValueChange(item, index);
+          if (!isDisabled) emitValueChange(item2, index);
         },
-        children: renderStepContent(item, index, { isVertical, roleListItem: false })
+        children: renderStepContent(item2, index, { isVertical, roleListItem: false })
       }
     );
   };
@@ -10080,10 +10248,10 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                       children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: group.group })
                     }
                   ),
-                  group.items.map((item, itemIndex) => {
+                  group.items.map((item2, itemIndex) => {
                     const index = group.startIndex + itemIndex;
-                    const state2 = getState(item, index);
-                    const itemValue = getItemValue(item, index);
+                    const state2 = getState(item2, index);
+                    const itemValue = getItemValue(item2, index);
                     const canClickItem = isClickable && isWithinClickableIndex(index);
                     const isDisabled = !canClickItem;
                     const isHovered = hoveredIndex === index && canClickItem && state2 !== "active";
@@ -10101,12 +10269,12 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                     const handleMouseLeave = () => {
                       setHoveredIndex((current) => current === index ? null : current);
                     };
-                    const stepContent = renderStepContent(item, index, {
+                    const stepContent = renderStepContent(item2, index, {
                       isVertical: true,
                       roleListItem: false,
                       hovered: isHovered
                     });
-                    const errorBadge = item.error ? /* @__PURE__ */ jsxRuntime.jsx(
+                    const errorBadge = item2.error ? /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -10121,7 +10289,7 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                     ) : null;
                     const isTooltipHovered = tooltipHoverValue === itemValue;
                     const isCustomTooltipOpen = customTooltipOpen && index === firstErrorIndex;
-                    const showTooltip = item.error === true && (isTooltipHovered || isCustomTooltipOpen);
+                    const showTooltip = item2.error === true && (isTooltipHovered || isCustomTooltipOpen);
                     const handleTooltipMouseEnter = () => setTooltipHoverValue(itemValue);
                     const handleTooltipMouseLeave = () => {
                       setTooltipHoverValue((current) => current === itemValue ? null : current);
@@ -10145,7 +10313,7 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                             onMouseEnter: handleTooltipMouseEnter,
                             onMouseLeave: handleTooltipMouseLeave,
                             onClick: isClickable ? () => {
-                              if (!isDisabled) emitValueChange(item, index);
+                              if (!isDisabled) emitValueChange(item2, index);
                             } : void 0,
                             children: [
                               stepContent,
@@ -10177,13 +10345,13 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                               {
                                 type: "button",
                                 disabled: isDisabled,
-                                "aria-label": item.label,
+                                "aria-label": item2.label,
                                 className: cn(
                                   "absolute inset-0 z-[2] m-0 border-0 bg-transparent p-0 text-left outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent)",
                                   isDisabled ? "cursor-default" : "cursor-pointer"
                                 ),
                                 onClick: () => {
-                                  if (!isDisabled) emitValueChange(item, index);
+                                  if (!isDisabled) emitValueChange(item2, index);
                                 }
                               }
                             ),
@@ -10234,9 +10402,9 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
         lineHeight: config.lineHeight,
         ...style
       },
-      children: items.map((item, index) => {
-        const state2 = getState(item, index);
-        const content = isClickable ? /* @__PURE__ */ jsxRuntime.jsx("span", { role: "listitem", "aria-current": state2 === "active" ? "step" : void 0, children: renderClickableStepContent(item, index) }) : renderStepContent(item, index);
+      children: items.map((item2, index) => {
+        const state2 = getState(item2, index);
+        const content = isClickable ? /* @__PURE__ */ jsxRuntime.jsx("span", { role: "listitem", "aria-current": state2 === "active" ? "step" : void 0, children: renderClickableStepContent(item2, index) }) : renderStepContent(item2, index);
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
@@ -10270,7 +10438,7 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
               )
             ]
           },
-          getItemValue(item, index)
+          getItemValue(item2, index)
         );
       })
     }
@@ -10813,7 +10981,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const selectedAnchorIndex = react.useMemo(() => {
     if (selected.length === 0) return -1;
     const selectedSet = new Set(selected);
-    return navigableItems.findIndex((item) => item.value != null && selectedSet.has(item.value));
+    return navigableItems.findIndex((item2) => item2.value != null && selectedSet.has(item2.value));
   }, [navigableItems, selected]);
   selectedAnchorRef.current = selectedAnchorIndex;
   const triggerText = (() => {
@@ -11106,7 +11274,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                           setFocusedIndex(-1);
                           return;
                         }
-                        const index = navigableItems.findIndex((item) => item.key === key);
+                        const index = navigableItems.findIndex((item2) => item2.key === key);
                         if (index >= 0) setFocusedIndex(index);
                       }
                     }
@@ -11338,6 +11506,7 @@ var colWidthFromDef = (c) => {
 };
 var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   columns = [],
+  headerGroups,
   rows = [],
   rowKey = "id",
   selectable = false,
@@ -11385,6 +11554,49 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     onDenseChange?.(next);
   };
   const visibleCols = react.useMemo(() => columns.filter((c) => c.visible !== false), [columns]);
+  const headerGroupInfo = react.useMemo(() => {
+    if (!headerGroups || headerGroups.length === 0) return null;
+    const indexByName = new Map(visibleCols.map((col, index) => [col.name, index]));
+    const covered = /* @__PURE__ */ new Set();
+    let previousLast = -1;
+    const cells = headerGroups.map((group) => {
+      if (group.columnNames.length === 0) {
+        throw new Error("[STable] headerGroups\uC758 columnNames\uB294 \uBE44\uC5B4 \uC788\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
+      }
+      const indexes = group.columnNames.map((name) => {
+        const index = indexByName.get(name);
+        if (index == null) {
+          throw new Error(`[STable] headerGroups\uC5D0 \uC874\uC7AC\uD558\uC9C0 \uC54A\uB294 \uCEEC\uB7FC\uC774 \uC9C0\uC815\uB418\uC5C8\uC2B5\uB2C8\uB2E4: ${name}`);
+        }
+        if (covered.has(name)) {
+          throw new Error(`[STable] headerGroups\uC5D0\uC11C \uCEEC\uB7FC\uC774 \uC911\uBCF5 \uC9C0\uC815\uB418\uC5C8\uC2B5\uB2C8\uB2E4: ${name}`);
+        }
+        covered.add(name);
+        return index;
+      });
+      const first = indexes[0];
+      const last = indexes[indexes.length - 1];
+      if (last - first + 1 !== indexes.length || indexes.some((index, i) => index !== first + i)) {
+        throw new Error(
+          "[STable] headerGroups\uC758 columnNames\uB294 \uC778\uC811\uD55C \uCEEC\uB7FC \uC21C\uC11C\uB85C \uC9C0\uC815\uD574\uC57C \uD569\uB2C8\uB2E4."
+        );
+      }
+      if (first <= previousLast) {
+        throw new Error("[STable] headerGroups\uB294 \uCEEC\uB7FC \uC21C\uC11C\uB300\uB85C \uC9C0\uC815\uD574\uC57C \uD569\uB2C8\uB2E4.");
+      }
+      previousLast = last;
+      return { ...group, firstIndex: first, colSpan: indexes.length };
+    });
+    if (covered.size !== visibleCols.length) {
+      throw new Error("[STable] headerGroups\uC758 columnNames\uAC00 \uBAA8\uB4E0 visible \uCEEC\uB7FC\uC744 \uD3EC\uD568\uD574\uC57C \uD569\uB2C8\uB2E4.");
+    }
+    return {
+      cells,
+      rowSpanNames: new Set(
+        cells.filter((cell) => cell.rowSpan === 2).flatMap((cell) => cell.columnNames)
+      )
+    };
+  }, [headerGroups, visibleCols]);
   const stickyLeft = stickyColumn?.left ?? 0;
   const stickyRight = stickyColumn?.right ?? 0;
   const effectiveRowHeight = rowHeight ?? (innerDense ? DENSE_ROW_HEIGHT : DEFAULT_ROW_HEIGHT);
@@ -11647,6 +11859,35 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       isRightEdge && scrolledRight && "shadow-[-5px_0_8px_0_rgba(34,34,34,0.1)]"
     );
   };
+  const headerResizeHitArea = (i, key) => {
+    const col = visibleCols[i];
+    if (!headerGroupInfo || !resizable || !col || col.autoWidth || i >= visibleCols.length - 1) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        onMouseDown: (e) => startResize(i, e),
+        className: "absolute inset-y-0 right-0 z-[5] w-[9px] cursor-col-resize",
+        "aria-hidden": true
+      },
+      key
+    );
+  };
+  const headerResizer = (i, key) => {
+    const col = visibleCols[i];
+    if (!resizable || !col || col.autoWidth || i >= visibleCols.length - 1) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        onMouseDown: (e) => startResize(i, e),
+        className: "absolute right-0 top-1/2 z-[5] flex h-[16px] w-[9px] -translate-y-1/2 cursor-col-resize items-center justify-end",
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-full w-[4px] border-x border-solid border-[color:var(--cmp-table-header-resizingBar-color)]" })
+      },
+      key
+    );
+  };
   const bodyScrollClass = cn(
     "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-table-border-color)]",
     SCROLLBAR_CLASS,
@@ -11711,145 +11952,179 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                       style: { fontSize: 12 },
                       children: [
                         colgroup,
-                        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn(isNoData && "opacity-40"), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
-                          selectable && /* @__PURE__ */ jsxRuntime.jsxs(
-                            "th",
-                            {
-                              className: cn(
-                                // 원본 .th--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                // 하단 border는 헤더 래퍼가 연속으로 그리므로 셀에는 두지 않는다.
-                                "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
-                                stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
-                              ),
-                              style: {
-                                width: SELECTABLE_COLUMN_WIDTH,
-                                minWidth: SELECTABLE_COLUMN_WIDTH,
-                                maxWidth: SELECTABLE_COLUMN_WIDTH
+                        /* @__PURE__ */ jsxRuntime.jsxs("thead", { className: cn(isNoData && "opacity-40"), children: [
+                          headerGroupInfo && /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
+                            selectable && /* @__PURE__ */ jsxRuntime.jsx(
+                              "th",
+                              {
+                                rowSpan: 2,
+                                className: cn(
+                                  "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
+                                  stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
+                                ),
+                                style: {
+                                  width: SELECTABLE_COLUMN_WIDTH,
+                                  minWidth: SELECTABLE_COLUMN_WIDTH,
+                                  maxWidth: SELECTABLE_COLUMN_WIDTH
+                                },
+                                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: headerCheck, onValueChange: toggleAll }) })
+                              }
+                            ),
+                            headerGroupInfo.cells.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(
+                              "th",
+                              {
+                                colSpan: group.colSpan,
+                                rowSpan: group.rowSpan,
+                                className: cn(
+                                  "relative border-b border-r border-solid border-[color:var(--cmp-table-border-color)] bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[20px] text-[color:var(--sys-color-fg-primary)]",
+                                  group.firstIndex + group.colSpan === visibleCols.length && "border-r-0",
+                                  group.rowSpan === 2 && "border-b-0",
+                                  group.className
+                                ),
+                                style: { textAlign: group.align ?? "left", ...group.style },
+                                children: [
+                                  group.render ? group.render() : group.label,
+                                  group.rowSpan === 2 && group.colSpan === 1 ? headerResizeHitArea(
+                                    group.firstIndex,
+                                    `group-resizer-${group.columnNames[0]}`
+                                  ) : null
+                                ]
                               },
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: headerCheck, onValueChange: toggleAll }) }),
-                                /* @__PURE__ */ jsxRuntime.jsx(
-                                  "span",
-                                  {
-                                    "aria-hidden": true,
-                                    className: "pointer-events-none absolute right-0 top-1/2 h-[16px] w-px -translate-y-1/2 bg-[var(--cmp-table-header-resizingBar-color)]"
-                                  }
-                                )
-                              ]
-                            }
-                          ),
-                          visibleCols.map((col, i) => {
-                            const isSortable = !!col.sortable && !col.renderHeader;
-                            const sortDir = isSortable && sort?.name === col.name ? sort.dir : void 0;
-                            return /* @__PURE__ */ jsxRuntime.jsxs(
+                              group.columnNames.join("|")
+                            ))
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "h-[var(--cmp-table-header-height)] bg-[var(--cmp-table-header-bg)]", children: [
+                            selectable && !headerGroupInfo && /* @__PURE__ */ jsxRuntime.jsxs(
                               "th",
                               {
                                 className: cn(
-                                  // 하단 border는 헤더 래퍼가 연속으로 그린다 (거터 영역까지 이어짐).
-                                  // leading-[0]: th 의 스트럿(line-height 만큼의 빈 인라인 박스)을 없앤다.
-                                  // 내용이 inline-flex 라 스트럿이 남아 있으면 라벨보다 큰 컨트롤(정렬 버튼 등)이
-                                  // 들어올 때 줄 상자가 베이스라인 기준으로 늘어나 헤더 높이를 넘기고
-                                  // 세로 가운데도 어긋난다. 글자 줄높이는 아래 th__content 가 다시 준다.
-                                  "relative bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[0] text-[color:var(--sys-color-fg-primary)]",
-                                  stickyInfo(i).isSticky && "z-[6]",
-                                  stickyShadowClass(i),
-                                  col.thClass
+                                  // 원본 .th--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
+                                  // 하단 border는 헤더 래퍼가 연속으로 그리므로 셀에는 두지 않는다.
+                                  "sticky left-0 z-[7] bg-[var(--cmp-table-header-bg)] text-center align-middle",
+                                  stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
                                 ),
-                                style: { textAlign: col.align ?? "left", ...cellStyle(i), ...col.thStyle },
-                                "aria-sort": isSortable ? sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : "none" : void 0,
+                                style: {
+                                  width: SELECTABLE_COLUMN_WIDTH,
+                                  minWidth: SELECTABLE_COLUMN_WIDTH,
+                                  maxWidth: SELECTABLE_COLUMN_WIDTH
+                                },
                                 children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: headerCheck, onValueChange: toggleAll }) }),
                                   /* @__PURE__ */ jsxRuntime.jsx(
                                     "span",
                                     {
-                                      className: cn(
-                                        // 원본 th__content: align에 따라 justify-content 적용 (th도 정렬 반영)
-                                        // th 가 leading-[0] 이므로 글자 줄높이는 여기서 준다 (truncate 가
-                                        // overflow-hidden 이라 줄높이가 0이면 라벨이 잘려 사라진다).
-                                        "inline-flex w-full min-w-0 items-center gap-[4px] leading-[20px]",
-                                        col.align === "center" && "justify-center",
-                                        col.align === "right" && "justify-end"
-                                      ),
-                                      children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: col.label }),
-                                        col.helpText && col.helpText.length > 0 && // 라벨이 좁아져 truncate 되더라도 아이콘까지 함께 줄어들면 안 되므로
-                                        // shrink-0 래퍼로 감싼다 (STooltip 의 className 은 본문 쪽으로 간다).
-                                        // 아이콘·크기·색은 SKeyValueTable 헤더 도움말과 동일하게 맞춘다.
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                          STooltip2,
-                                          {
-                                            trigger: "hover",
-                                            icon: "helpOutline",
-                                            iconSize: 12,
-                                            color: "var(--sys-color-fg-success)",
-                                            placement: "top",
-                                            message: col.helpText
-                                          }
-                                        ) }),
-                                        col.editable && /* @__PURE__ */ jsxRuntime.jsx(
-                                          SIcon,
-                                          {
-                                            name: "pageEdit",
-                                            size: 12,
-                                            color: "var(--sys-color-link-accent)",
-                                            label: "\uC218\uC815 \uAC00\uB2A5",
-                                            className: "shrink-0"
-                                          }
-                                        ),
-                                        col.navigable && /* @__PURE__ */ jsxRuntime.jsx(
-                                          SIcon,
-                                          {
-                                            name: "pageMove",
-                                            size: 12,
-                                            color: "var(--sys-color-link-accent)",
-                                            label: "\uB2E4\uB978 \uD654\uBA74\uC73C\uB85C \uC774\uB3D9",
-                                            className: "shrink-0"
-                                          }
-                                        ),
-                                        col.required && // 라벨이 truncate 돼도 필수 표시는 남아야 하므로 shrink-0.
-                                        // 아이콘·크기·색은 SKeyValueTable 헤더 필수 표시와 동일하게 맞춘다.
-                                        /* @__PURE__ */ jsxRuntime.jsx(
-                                          SIcon,
-                                          {
-                                            name: "asterisk",
-                                            size: 12,
-                                            color: "var(--sys-color-fg-accent)",
-                                            className: "shrink-0"
-                                          }
-                                        ),
-                                        isSortable && // 미정렬은 updown 을 default(회색)로 — 정렬할 수 있다는 것 자체가
-                                        // 헤더에 보여야 한다. 정렬 중이면 action 색으로 올려 활성임을 알린다.
-                                        // 라벨이 truncate 돼도 버튼은 남도록 shrink-0.
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                          SGhostButton,
-                                          {
-                                            size: "xxs",
-                                            intent: sortDir ? "action" : "default",
-                                            icon: sortDir === "asc" ? "arrowUp" : sortDir === "desc" ? "arrowDown" : "updown",
-                                            ariaLabel: `${col.label} \uC815\uB82C`,
-                                            onClick: () => toggleSort(col)
-                                          }
-                                        ) })
-                                      ] })
-                                    }
-                                  ),
-                                  resizable && !col.autoWidth && i < visibleCols.length - 1 && // 원본 th__resizer: 셀 우측 경계 안쪽 4px 그립(좌우 1px #CCCCCC 라인, 세로 16px).
-                                  // 셀 밖으로 넘치면 다음 셀에 가려져 클릭이 안 먹으므로 translate 없이 셀 내부에 배치.
-                                  // 겉보기 그립은 4px(원본과 동일), 클릭 영역은 9px로 넓혀 사용성 확보.
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    "span",
-                                    {
-                                      onMouseDown: (e) => startResize(i, e),
-                                      className: "absolute right-0 top-1/2 z-[5] flex h-[16px] w-[9px] -translate-y-1/2 cursor-col-resize items-center justify-end",
                                       "aria-hidden": true,
-                                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-full w-[4px] border-x border-solid border-[color:var(--cmp-table-header-resizingBar-color)]" })
+                                      className: "pointer-events-none absolute right-0 top-1/2 h-[16px] w-px -translate-y-1/2 bg-[var(--cmp-table-header-resizingBar-color)]"
                                     }
                                   )
                                 ]
-                              },
-                              col.name
-                            );
-                          })
-                        ] }) })
+                              }
+                            ),
+                            visibleCols.map((col, i) => {
+                              if (headerGroupInfo?.rowSpanNames.has(col.name)) return null;
+                              const isSortable = !!col.sortable && !col.renderHeader;
+                              const sortDir = isSortable && sort?.name === col.name ? sort.dir : void 0;
+                              return /* @__PURE__ */ jsxRuntime.jsxs(
+                                "th",
+                                {
+                                  className: cn(
+                                    // 하단 border는 헤더 래퍼가 연속으로 그린다 (거터 영역까지 이어짐).
+                                    // leading-[0]: th 의 스트럿(line-height 만큼의 빈 인라인 박스)을 없앤다.
+                                    // 내용이 inline-flex 라 스트럿이 남아 있으면 라벨보다 큰 컨트롤(정렬 버튼 등)이
+                                    // 들어올 때 줄 상자가 베이스라인 기준으로 늘어나 헤더 높이를 넘기고
+                                    // 세로 가운데도 어긋난다. 글자 줄높이는 아래 th__content 가 다시 준다.
+                                    headerGroupInfo && "border-r border-solid border-[color:var(--cmp-table-border-color)]",
+                                    headerGroupInfo && i === visibleCols.length - 1 && "border-r-0",
+                                    "relative bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[0] text-[color:var(--sys-color-fg-primary)]",
+                                    stickyInfo(i).isSticky && "z-[6]",
+                                    stickyShadowClass(i),
+                                    col.thClass
+                                  ),
+                                  style: { textAlign: col.align ?? "left", ...cellStyle(i), ...col.thStyle },
+                                  "aria-sort": isSortable ? sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : "none" : void 0,
+                                  children: [
+                                    /* @__PURE__ */ jsxRuntime.jsx(
+                                      "span",
+                                      {
+                                        className: cn(
+                                          // 원본 th__content: align에 따라 justify-content 적용 (th도 정렬 반영)
+                                          // th 가 leading-[0] 이므로 글자 줄높이는 여기서 준다 (truncate 가
+                                          // overflow-hidden 이라 줄높이가 0이면 라벨이 잘려 사라진다).
+                                          "inline-flex w-full min-w-0 items-center gap-[4px] leading-[20px]",
+                                          col.align === "center" && "justify-center",
+                                          col.align === "right" && "justify-end"
+                                        ),
+                                        children: col.renderHeader ? col.renderHeader(col, i) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: col.label }),
+                                          col.helpText && col.helpText.length > 0 && // 라벨이 좁아져 truncate 되더라도 아이콘까지 함께 줄어들면 안 되므로
+                                          // shrink-0 래퍼로 감싼다 (STooltip 의 className 은 본문 쪽으로 간다).
+                                          // 아이콘·크기·색은 SKeyValueTable 헤더 도움말과 동일하게 맞춘다.
+                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                            STooltip2,
+                                            {
+                                              trigger: "hover",
+                                              icon: "helpOutline",
+                                              iconSize: 12,
+                                              color: "var(--sys-color-fg-success)",
+                                              placement: "top",
+                                              message: col.helpText
+                                            }
+                                          ) }),
+                                          col.editable && /* @__PURE__ */ jsxRuntime.jsx(
+                                            SIcon,
+                                            {
+                                              name: "pageEdit",
+                                              size: 12,
+                                              color: "var(--sys-color-link-accent)",
+                                              label: "\uC218\uC815 \uAC00\uB2A5",
+                                              className: "shrink-0"
+                                            }
+                                          ),
+                                          col.navigable && /* @__PURE__ */ jsxRuntime.jsx(
+                                            SIcon,
+                                            {
+                                              name: "pageMove",
+                                              size: 12,
+                                              color: "var(--sys-color-link-accent)",
+                                              label: "\uB2E4\uB978 \uD654\uBA74\uC73C\uB85C \uC774\uB3D9",
+                                              className: "shrink-0"
+                                            }
+                                          ),
+                                          col.required && // 라벨이 truncate 돼도 필수 표시는 남아야 하므로 shrink-0.
+                                          // 아이콘·크기·색은 SKeyValueTable 헤더 필수 표시와 동일하게 맞춘다.
+                                          /* @__PURE__ */ jsxRuntime.jsx(
+                                            SIcon,
+                                            {
+                                              name: "asterisk",
+                                              size: 12,
+                                              color: "var(--sys-color-fg-accent)",
+                                              className: "shrink-0"
+                                            }
+                                          ),
+                                          isSortable && // 미정렬은 updown 을 default(회색)로 — 정렬할 수 있다는 것 자체가
+                                          // 헤더에 보여야 한다. 정렬 중이면 action 색으로 올려 활성임을 알린다.
+                                          // 라벨이 truncate 돼도 버튼은 남도록 shrink-0.
+                                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                            SGhostButton,
+                                            {
+                                              size: "xxs",
+                                              intent: sortDir ? "action" : "default",
+                                              icon: sortDir === "asc" ? "arrowUp" : sortDir === "desc" ? "arrowDown" : "updown",
+                                              ariaLabel: `${col.label} \uC815\uB82C`,
+                                              onClick: () => toggleSort(col)
+                                            }
+                                          ) })
+                                        ] })
+                                      }
+                                    ),
+                                    headerGroupInfo ? headerResizeHitArea(i, `resizer-${col.name}`) : headerResizer(i, `resizer-${col.name}`)
+                                  ]
+                                },
+                                col.name
+                              );
+                            })
+                          ] })
+                        ] })
                       ]
                     }
                   )
@@ -11971,11 +12246,12 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
             ]
           }
         ),
-        (showPagination || dense) && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
+        (showPagination || useRowsPerPageSelect) && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
         // SPagination은 전체 폭 기준 중앙, rows-per-page SSelect는 우측에 absolute 배치해 중앙 정렬을 유지한다.
         // 루트 높이가 확정된 경우(테이블이 남은 영역을 채우는 배치) 페이지네이션 바가
         // 눌리지 않도록 shrink-0으로 48px를 보장한다.
-        // 페이지네이션이 없어도 dense 면 이 바를 그린다 — 밀도 토글이 사는 곳이 여기다.
+        // 페이지네이션이 없어도 rows-per-page 셀렉트가 있으면 이 바를 그린다 — 셀렉트와
+        // 밀도 토글이 사는 곳이 여기다. dense 만으로는 그리지 않는다(빈 바가 남는다).
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -11986,7 +12262,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
             ),
             children: [
               showPagination && /* @__PURE__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
-              (dense || useRowsPerPageSelect) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
+              useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
                 dense && /* @__PURE__ */ jsxRuntime.jsx(
                   STextLink,
                   {
@@ -11998,8 +12274,8 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                     onClick: () => changeDense(!innerDense)
                   }
                 ),
-                dense && useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, className: "my-[6px]" }),
-                useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx(
+                dense && /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, className: "my-[6px]" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
                   SSelect2,
                   {
                     options: rowsPerPageOption,
@@ -13076,7 +13352,7 @@ function SCalendar({
         }) }),
         legend.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(SDivider, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-[var(--cmp-datepicker-calendar-legend-group-gap)] gap-y-[4px] text-[11px] leading-[18px]", children: legend.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-[var(--cmp-datepicker-calendar-legend-group-gap)] gap-y-[4px] text-[11px] leading-[18px]", children: legend.map((item2) => /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
               className: "inline-flex items-center gap-[var(--cmp-datepicker-calendar-legend-gap)]",
@@ -13085,14 +13361,14 @@ function SCalendar({
                   "span",
                   {
                     className: "h-[var(--cmp-datepicker-calendar-day-dot-size)] w-[var(--cmp-datepicker-calendar-day-dot-size)] rounded-full",
-                    style: { backgroundColor: resolveColor(item.color) },
+                    style: { backgroundColor: resolveColor(item2.color) },
                     "aria-hidden": true
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: item2.label })
               ]
             },
-            `${item.color}|${item.label}`
+            `${item2.color}|${item2.label}`
           )) })
         ] })
       ]
@@ -16059,19 +16335,19 @@ function EditorToolbarBar({
     closeLinkEditor();
   };
   const visible = [];
-  for (const item of items) {
-    if (item === "image" && !onImageUpload) continue;
-    if (item === "|" && (visible.length === 0 || visible[visible.length - 1] === "|")) continue;
-    visible.push(item);
+  for (const item2 of items) {
+    if (item2 === "image" && !onImageUpload) continue;
+    if (item2 === "|" && (visible.length === 0 || visible[visible.length - 1] === "|")) continue;
+    visible.push(item2);
   }
   while (visible.length > 0 && visible[visible.length - 1] === "|") visible.pop();
   const groups = [[]];
-  for (const item of visible) {
-    if (item === "|") groups.push([]);
-    else groups[groups.length - 1].push(item);
+  for (const item2 of visible) {
+    if (item2 === "|") groups.push([]);
+    else groups[groups.length - 1].push(item2);
   }
-  const node = (item) => {
-    switch (item) {
+  const node = (item2) => {
+    switch (item2) {
       case "heading":
         return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Root, { modal: !insideModal, children: [
           /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -16106,7 +16382,7 @@ function EditorToolbarBar({
               level
             ))
           ] }) })
-        ] }, item);
+        ] }, item2);
       case "fontSize":
         return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Root, { modal: !insideModal, children: [
           /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarButton, { label: "\uAE00\uC790 \uD06C\uAE30", disabled: off, className: "px-[6px]", children: [
@@ -16145,7 +16421,7 @@ function EditorToolbarBar({
               ]
             }
           ) })
-        ] }, item);
+        ] }, item2);
       case "bold":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
@@ -16157,7 +16433,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleBold().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconBold, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "italic":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16170,7 +16446,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleItalic().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconItalic, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "underline":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16183,7 +16459,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleUnderline().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconUnderline, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "strike":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16196,7 +16472,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleStrike().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconStrike, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "code":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16209,7 +16485,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleCode().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconCode, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "color":
         if (mobile)
@@ -16221,7 +16497,7 @@ function EditorToolbarBar({
               onClick: () => setMobileView("color"),
               children: /* @__PURE__ */ jsxRuntime.jsx(ColorIndicator, { color: off ? "currentColor" : activeColor, children: /* @__PURE__ */ jsxRuntime.jsx(IconTextColor, { size: ICON_SIZE }) })
             },
-            item
+            item2
           );
         return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Root, { modal: !insideModal, children: [
           /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "\uAE00\uC790\uC0C9", disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ColorIndicator, { color: off ? "currentColor" : activeColor, children: /* @__PURE__ */ jsxRuntime.jsx(IconTextColor, { size: ICON_SIZE }) }) }) }),
@@ -16236,7 +16512,7 @@ function EditorToolbarBar({
               onClear: clearColor
             }
           ) }) })
-        ] }, item);
+        ] }, item2);
       case "alignLeft":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
@@ -16248,7 +16524,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("left").run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconAlignLeft, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "alignCenter":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16261,7 +16537,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("center").run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconAlignCenter, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "alignRight":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16274,7 +16550,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("right").run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconAlignRight, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "alignJustify":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16287,7 +16563,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("justify").run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconAlignJustify, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "bulletList":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16300,7 +16576,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleBulletList().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconBulletList, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "orderedList":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16313,7 +16589,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleOrderedList().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconOrderedList, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "taskList":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16326,7 +16602,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleTaskList().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconTaskList, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "list": {
         const ListIcon = state2.orderedList ? IconOrderedList : state2.taskList ? IconTaskList : IconBulletList;
@@ -16371,7 +16647,7 @@ function EditorToolbarBar({
               }
             )
           ] }) })
-        ] }, item);
+        ] }, item2);
       }
       case "blockquote":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16384,7 +16660,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleBlockquote().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconBlockquote, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "codeBlock":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16397,7 +16673,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleCodeBlock().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconCodeBlock, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "horizontalRule":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16408,7 +16684,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setHorizontalRule().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconHorizontalRule, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "link":
         if (mobile)
@@ -16421,7 +16697,7 @@ function EditorToolbarBar({
               onClick: () => setMobileView("link"),
               children: /* @__PURE__ */ jsxRuntime.jsx(IconLink, { size: ICON_SIZE })
             },
-            item
+            item2
           );
         return /* @__PURE__ */ jsxRuntime.jsxs(RPopover11__namespace.Root, { open: linkOpen, onOpenChange: setLinkOpen, children: [
           /* @__PURE__ */ jsxRuntime.jsx(RPopover11__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "\uB9C1\uD06C", active: state2.link, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(IconLink, { size: ICON_SIZE }) }) }),
@@ -16446,7 +16722,7 @@ function EditorToolbarBar({
               )
             }
           ) })
-        ] }, item);
+        ] }, item2);
       case "image":
         return /* @__PURE__ */ jsxRuntime.jsxs(
           ToolbarButton,
@@ -16460,7 +16736,7 @@ function EditorToolbarBar({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] leading-[20px]", children: "\uC774\uBBF8\uC9C0" })
             ]
           },
-          item
+          item2
         );
       case "table":
         return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -16581,7 +16857,7 @@ function EditorToolbarBar({
               ] }) })
             ]
           },
-          item
+          item2
         );
       case "undo":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16592,7 +16868,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.undo().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconUndo, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "redo":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16603,7 +16879,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.redo().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconRedo, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       default:
         return null;
@@ -17211,7 +17487,8 @@ var resolveFieldDefault = (field) => {
   if (field.type === "datepicker-day") return todayIso();
   if (field.type === "select") return field.options?.[0]?.value;
   if (field.type === "datepicker-statistics") {
-    const unit = getFieldPresets(field).find((preset) => !preset.custom)?.value;
+    const presets = getFieldPresets(field).filter((preset) => !preset.custom);
+    const unit = presets.some((preset) => preset.value === "day") ? "day" : presets[0]?.value;
     return unit ? createPeriodValue(unit) : void 0;
   }
   return void 0;
@@ -17341,8 +17618,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   onActiveKeysChange,
   onReset,
   onAddFilter,
-  label = "\uAC80\uC0C9 \uD544\uD130",
-  showLabel = false,
+  label,
   showReset = true,
   disabled = false,
   className,
@@ -17359,6 +17635,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   const pendingOpenKeyRef = react.useRef(null);
   const triggerRefs = react.useRef(/* @__PURE__ */ new Map());
   const initializedDefaultsRef = react.useRef(/* @__PURE__ */ new Set());
+  const misuseWarningSignatureRef = react.useRef(null);
   const prevOpenKeyRef = react.useRef(null);
   const valuesRef = react.useRef(values);
   valuesRef.current = values;
@@ -17374,14 +17651,19 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     (current) => groups.every((group) => isGroupSatisfied(group, current)),
     [groups]
   );
+  const isRequiredSatisfied = react.useCallback(
+    (current) => fields.every((field) => !field.required || !isEmptyValue(current[field.key])),
+    [fields]
+  );
   const runSearch = react.useCallback(
     (next) => {
       if (valuesMapEqual(lastSearchedValuesRef.current, next)) return;
       if (!isGroupsValid(next)) return;
+      if (!isRequiredSatisfied(next)) return;
       lastSearchedValuesRef.current = next;
       onSearch?.(next);
     },
-    [isGroupsValid, onSearch]
+    [isGroupsValid, isRequiredSatisfied, onSearch]
   );
   react.useEffect(() => {
     const prevKey = prevOpenKeyRef.current;
@@ -17416,14 +17698,24 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     });
     if (changed) onValueChange?.({ ...values, ...patch });
   }, [fields, values, onValueChange]);
-  if (typeof console !== "undefined") {
-    const misused = fields.filter((f) => f.defaultValue !== void 0 && !isFixedField(f));
-    if (misused.length > 0) {
+  react.useEffect(() => {
+    if (typeof console === "undefined") return;
+    const misusedKeys = fields.filter((f) => f.defaultValue !== void 0 && !isFixedField(f)).map((f) => f.key);
+    const requiredWithoutDefaultKeys = fields.filter((f) => f.required === true && resolveFieldDefault(f) === void 0).map((f) => f.key);
+    const signature = JSON.stringify([misusedKeys, requiredWithoutDefaultKeys]);
+    if (signature === misuseWarningSignatureRef.current) return;
+    misuseWarningSignatureRef.current = signature;
+    if (misusedKeys.length > 0) {
       console.warn(
-        `[SChipFilter] defaultValue \uB294 fixed\xB7required \uD544\uD130\uC5D0\uC11C\uB9CC \uC4F8 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uBB34\uC2DC\uD569\uB2C8\uB2E4. (${misused.map((f) => f.key).join(", ")})`
+        `[SChipFilter] defaultValue \uB294 fixed\xB7required \uD544\uD130\uC5D0\uC11C\uB9CC \uC4F8 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uBB34\uC2DC\uD569\uB2C8\uB2E4. (${misusedKeys.join(", ")})`
       );
     }
-  }
+    if (requiredWithoutDefaultKeys.length > 0) {
+      console.warn(
+        `[SChipFilter] required \uD544\uD130\uC5D0 defaultValue \uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uC774 \uD0C0\uC785\uC740 \uB0B4\uC7A5 \uAE30\uBCF8\uAC12\uC774 \uC5C6\uC5B4 "\uAC80\uC0C9 \uCD08\uAE30\uD654" \uC2DC \uAC12\uC774 \uBE44\uC6CC\uC9C0\uACE0 \uAC80\uC0C9\uB3C4 \uB9C9\uD799\uB2C8\uB2E4. defaultValue \uB97C \uC9C0\uC815\uD558\uC138\uC694. (${requiredWithoutDefaultKeys.join(", ")})`
+      );
+    }
+  }, [fields]);
   const fixedKeys = fields.filter(isFixedField).map((field) => field.key);
   const resolvedActiveKeys = Array.from(
     /* @__PURE__ */ new Set([...activeKeys ?? internalActiveKeys, ...fixedKeys])
@@ -17491,7 +17783,10 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     },
     [fields]
   );
-  const validate = react.useCallback(() => invalidGroups.size === 0, [invalidGroups]);
+  const validate = react.useCallback(
+    () => invalidGroups.size === 0 && isRequiredSatisfied(values),
+    [invalidGroups, isRequiredSatisfied, values]
+  );
   react.useImperativeHandle(ref, () => ({ open, reset, validate }), [open, reset, validate]);
   const addField = (key) => {
     const next = [...resolvedActiveKeys, key];
@@ -17528,7 +17823,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
       ),
       style: { ...rootStyle, borderColor: "var(--chipfilter-bar-border)" },
       children: [
-        showLabel && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(STag, { className: "shrink-0", shape: "square", size: "sm", color: "darkblue", label }),
           /* @__PURE__ */ jsxRuntime.jsx(Divider, { top: true })
         ] }),
@@ -18238,6 +18533,10 @@ function InlineDatePresetFilter({
     setSelectedId(preset.value);
     onValueChange(preset.resolve ? preset.resolve() : null);
   };
+  const badgeBorder = disabled ? CHIPFILTER.chipDisabledBorder : warning ? CHIPFILTER.chipWarningBorder : CHIPFILTER.chipAppliedBorder;
+  const badgeBackground = disabled ? CHIPFILTER.chipDisabledBg : CHIPFILTER.chipAppliedBg;
+  const badgeLabelColor = disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedLabel;
+  const badgeValueColor = disabled ? CHIPFILTER.chipDisabledText : CHIPFILTER.chipAppliedValue;
   const badge = applied && /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -18245,17 +18544,17 @@ function InlineDatePresetFilter({
       style: {
         minHeight: CHIPFILTER.chipHeight,
         borderRadius: CHIPFILTER.chipRadius,
-        borderColor: warning ? CHIPFILTER.chipWarningBorder : CHIPFILTER.chipAppliedBorder,
-        background: CHIPFILTER.chipAppliedBg,
-        color: CHIPFILTER.chipAppliedLabel,
-        cursor: rangeValue ? "pointer" : void 0
+        borderColor: badgeBorder,
+        background: badgeBackground,
+        color: badgeLabelColor,
+        cursor: rangeValue && !disabled ? "pointer" : void 0
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
           field.label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: CHIPFILTER.chipAppliedValue }, children: displayValue(field, value) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", style: { color: badgeValueColor }, children: displayValue(field, value) }),
         !disabled && showClear && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -19037,8 +19336,8 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                     onMouseDown: (e) => e.preventDefault(),
                     children: [
                       loading2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "s-chip-input__suggestions-empty p-sd-12 text-center text-12 leading-sd-20 text-(--color-grey-65)", children: "\uBD88\uB7EC\uC624\uB294 \uC911..." }),
-                      !effectiveAutocomplete ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-sd-8 px-sd-12 py-sd-6", children: items.map((item, i) => {
-                        const selected = values.includes(item);
+                      !effectiveAutocomplete ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-sd-8 px-sd-12 py-sd-6", children: items.map((item2, i) => {
+                        const selected = values.includes(item2);
                         const active = i === activeIndex && !selected;
                         return /* @__PURE__ */ jsxRuntime.jsx(
                           "div",
@@ -19049,14 +19348,14 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                             style: active ? { outline: "2px solid var(--color-border-accent)", outlineOffset: 1 } : void 0,
                             onMouseDown: (e) => {
                               e.preventDefault();
-                              if (!selected) addChip(item);
+                              if (!selected) addChip(item2);
                             },
-                            children: /* @__PURE__ */ jsxRuntime.jsx(SChip2, { value: item, disabled: selected, editable: false, showRemove: false })
+                            children: /* @__PURE__ */ jsxRuntime.jsx(SChip2, { value: item2, disabled: selected, editable: false, showRemove: false })
                           },
-                          item
+                          item2
                         );
-                      }) }) : items.map((item, i) => {
-                        const selected = values.includes(item);
+                      }) }) : items.map((item2, i) => {
+                        const selected = values.includes(item2);
                         const active = i === activeIndex && !selected;
                         return /* @__PURE__ */ jsxRuntime.jsxs(
                           "div",
@@ -19069,10 +19368,10 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                             ),
                             onMouseDown: (e) => {
                               e.preventDefault();
-                              if (!selected) addChip(item);
+                              if (!selected) addChip(item2);
                             },
                             children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item2 }),
                               selected && /* @__PURE__ */ jsxRuntime.jsx(
                                 SIcon,
                                 {
@@ -19083,7 +19382,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                               )
                             ]
                           },
-                          item
+                          item2
                         );
                       })
                     ]
@@ -19467,22 +19766,22 @@ function TimeSelector({
             style: {
               padding: "var(--cmp-timepicker-selector-section-paddingY) var(--cmp-timepicker-selector-section-paddingX)"
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item, index) => {
-              const selected = item === meridiem;
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item2, index) => {
+              const selected = item2 === meridiem;
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: () => setMeridiem(item),
+                  onClick: () => setMeridiem(item2),
                   className: cn(
                     "box-border h-[var(--cmp-textinput-sm-height)] w-[61px] cursor-pointer border border-solid bg-white text-center text-[12px] font-medium leading-[20px]",
                     index === 0 ? "rounded-l-[var(--cmp-select-sm-radius)]" : "rounded-r-[var(--cmp-select-sm-radius)]",
                     index === 0 ? "-mr-px" : "",
                     selected ? "z-[1] border-[var(--cmp-timepicker-border-focus)] text-[var(--cmp-timepicker-border-focus)]" : "border-[var(--cmp-timepicker-border-default)] text-[var(--cmp-field-hint-color)]"
                   ),
-                  children: item === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
+                  children: item2 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
                 },
-                item
+                item2
               );
             }) })
           }
@@ -19703,8 +20002,8 @@ function getTimeMinutes(value) {
 }
 function normalizeTimeRangeValue(value, rangeOrder = "strict") {
   if (value == null) return null;
-  const normalized = value.map((item) => {
-    const parsed = parseTimeValue(item);
+  const normalized = value.map((item2) => {
+    const parsed = parseTimeValue(item2);
     return formatTimeValue(parsed.hour, parsed.minute);
   });
   if (rangeOrder === "strict" && getTimeMinutes(normalized[0]) > getTimeMinutes(normalized[1])) {
@@ -19914,21 +20213,21 @@ function RangeTimeSelector({
             style: { gap: "var(--cmp-timepicker-selector-range-heading-gap)" },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-nowrap text-center text-[12px] font-bold leading-[20px] text-[var(--cmp-timepicker-selector-range-heading-color)]", children: title }),
-              useMeridiem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item, index) => {
-                const selected = item === getMeridiem(side);
+              useMeridiem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item2, index) => {
+                const selected = item2 === getMeridiem(side);
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     type: "button",
-                    onClick: () => setMeridiem(side, item),
+                    onClick: () => setMeridiem(side, item2),
                     className: cn(
                       "box-border h-[var(--cmp-textinput-sm-height)] w-[61px] cursor-pointer border border-solid bg-white text-center text-[12px] font-medium leading-[20px]",
                       index === 0 ? "rounded-l-[var(--cmp-select-sm-radius)] -mr-px" : "rounded-r-[var(--cmp-select-sm-radius)]",
                       selected ? "z-[1] border-[var(--cmp-timepicker-border-focus)] text-[var(--cmp-timepicker-border-focus)]" : "border-[var(--cmp-timepicker-border-default)] text-[var(--cmp-field-hint-color)]"
                     ),
-                    children: item === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
+                    children: item2 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
                   },
-                  item
+                  item2
                 );
               }) })
             ]
@@ -20252,6 +20551,7 @@ exports.SSelect = SSelect2;
 exports.SSplitter = SSplitter2;
 exports.SStepper = SStepper;
 exports.SSwitch = SSwitch;
+exports.SSystemActionButton = SSystemActionButton;
 exports.STEPPER_SIZES = STEPPER_SIZES;
 exports.STable = STable;
 exports.STableBar = STableBar;
@@ -20267,6 +20567,11 @@ exports.SToggle = SToggle;
 exports.STooltip = STooltip2;
 exports.STree = STree2;
 exports.STreeItem = STreeItem2;
+exports.SYSTEM_ACTION_BUTTON_COLORS = SYSTEM_ACTION_BUTTON_COLORS;
+exports.SYSTEM_ACTION_BUTTON_COLOR_CONFIG = SYSTEM_ACTION_BUTTON_COLOR_CONFIG;
+exports.SYSTEM_ACTION_BUTTON_LAYOUT = SYSTEM_ACTION_BUTTON_LAYOUT;
+exports.SYSTEM_ACTION_BUTTON_TYPES = SYSTEM_ACTION_BUTTON_TYPES;
+exports.SYSTEM_ACTION_BUTTON_TYPE_CONFIG = SYSTEM_ACTION_BUTTON_TYPE_CONFIG;
 exports.TAG_COLORS = TAG_COLORS;
 exports.TAG_SHAPES = TAG_SHAPES;
 exports.TAG_SIZES = TAG_SIZES;