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

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);
                       }
                     }
@@ -11971,11 +12139,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 +12155,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 +12167,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 +13245,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 +13254,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 +16228,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 +16275,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 +16314,7 @@ function EditorToolbarBar({
               ]
             }
           ) })
-        ] }, item);
+        ] }, item2);
       case "bold":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
@@ -16157,7 +16326,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 +16339,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 +16352,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 +16365,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 +16378,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleCode().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconCode, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "color":
         if (mobile)
@@ -16221,7 +16390,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 +16405,7 @@ function EditorToolbarBar({
               onClear: clearColor
             }
           ) }) })
-        ] }, item);
+        ] }, item2);
       case "alignLeft":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
@@ -16248,7 +16417,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 +16430,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 +16443,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 +16456,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 +16469,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 +16482,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 +16495,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 +16540,7 @@ function EditorToolbarBar({
               }
             )
           ] }) })
-        ] }, item);
+        ] }, item2);
       }
       case "blockquote":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16384,7 +16553,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 +16566,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 +16577,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setHorizontalRule().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconHorizontalRule, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       case "link":
         if (mobile)
@@ -16421,7 +16590,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 +16615,7 @@ function EditorToolbarBar({
               )
             }
           ) })
-        ] }, item);
+        ] }, item2);
       case "image":
         return /* @__PURE__ */ jsxRuntime.jsxs(
           ToolbarButton,
@@ -16460,7 +16629,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 +16750,7 @@ function EditorToolbarBar({
               ] }) })
             ]
           },
-          item
+          item2
         );
       case "undo":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16592,7 +16761,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 +16772,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.redo().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconRedo, { size: ICON_SIZE })
           },
-          item
+          item2
         );
       default:
         return null;
@@ -19037,8 +19206,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 +19218,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 +19238,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 +19252,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                               )
                             ]
                           },
-                          item
+                          item2
                         );
                       })
                     ]
@@ -19467,22 +19636,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 +19872,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 +20083,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 +20421,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 +20437,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;