sellmate-design-system-react 0.1.10 → 0.2.0

package/dist/index.cjs

@@ -3347,8 +3347,12 @@ var SCircleProgress = react.forwardRef(
       "span",
       {
         className: cn(
-          "text-center text-[16px] font-bold leading-[26px]",
-          innerValue && "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+          "text-center text-[16px] font-bold",
+          innerValue ? (
+            // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아
+            // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)
+            "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]"
+          ) : "leading-[26px]"
         ),
         style: { color: percentColor },
         children: [
@@ -3533,10 +3537,15 @@ var FLOATING_SLIDE_ANIM = [
   "data-[state=closed]:data-[side=right]:animate-floating-out-right"
 ].join(" ");
 var PortalContainerContext = react.createContext(null);
+var InsideModalContext = react.createContext(false);
 var PortalContainerProvider = PortalContainerContext.Provider;
+var InsideModalProvider = InsideModalContext.Provider;
 function usePortalContainer() {
   return react.useContext(PortalContainerContext) ?? void 0;
 }
+function useInsideModal() {
+  return react.useContext(InsideModalContext);
+}
 var SIZE_CONFIG = {
   sm: {
     gap: 4,
@@ -3909,7 +3918,7 @@ var SDropdownButton = react.forwardRef(
                 ...style
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-center", children: label }),
                 caret
               ]
             }
@@ -3937,6 +3946,8 @@ function SGhostButton({
   tooltipText,
   disabled = false,
   onClick,
+  anchorClassName,
+  anchorStyle,
   className,
   style
 }) {
@@ -3959,6 +3970,8 @@ function SGhostButton({
   };
   const s = SIZE2[size];
   const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const text = (tooltipText ?? "").trim();
+  const hasTooltip = text !== "";
   const btn = /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -3999,13 +4012,13 @@ function SGhostButton({
       ]
     }
   );
-  const text = (tooltipText ?? "").trim();
-  if (text === "") return btn;
+  if (!hasTooltip) return btn;
   return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: "inline-flex",
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
         onMouseEnter: openNow,
         onMouseLeave: startHide,
         onFocus: openNow,
@@ -4406,7 +4419,7 @@ function SPortal({
             onCloseAutoFocus,
             onClick: autoClose ? () => onClose?.() : void 0,
             className: cn(
-              "z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) py-4 shadow-normal-sm",
+              "z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm",
               maxHeight != null && "overflow-y-auto",
               fit && "min-w-(--radix-popover-trigger-width)",
               FLOATING_SLIDE_ANIM,
@@ -4647,7 +4660,7 @@ function SModalContainer({
                     className: "absolute right-[16px] top-[16px] z-10"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: portalContainer, children })
+                /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: portalContainer, children }) })
               ]
             }
           )
@@ -4693,7 +4706,8 @@ function SConfirmModal({
   tagSize = "sm",
   tagColor = "grey",
   slotLabel,
-  children,
+  tagSlot,
+  optionSlot,
   mainButtonLabel = "\uD655\uC778",
   mainButtonName,
   subButtonLabel,
@@ -4703,6 +4717,9 @@ function SConfirmModal({
 }) {
   const iconName = TYPE_ICON[type];
   const mainStyle = MAIN_BUTTON_STYLE[mainButtonName ?? DEFAULT_MAIN_BUTTON[type]];
+  const tagNode = tagSlot ?? (tagLabel ? /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: tagShape, size: tagSize, color: tagColor, label: tagLabel }) : null);
+  const optionNode = optionSlot ?? (slotLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: slotLabel }) : null);
+  const hasBody = topMessage.length > 0 || bottomMessage.length > 0 || tagNode != null || optionNode != null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SModalContainer,
     {
@@ -4728,15 +4745,12 @@ function SConfirmModal({
               }
             )
           ] }),
-          (topMessage.length > 0 || bottomMessage.length > 0 || tagLabel || slotLabel || children) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[20px] text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-modal-confirm-message-color)]", children: [
+          hasBody && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-[20px] text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-modal-confirm-message-color)] w-full", children: [
             topMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: topMessage.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0", children: m }, i)) }),
-            (tagLabel || slotLabel || children) && // content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px]", children: [
-              tagLabel && /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: tagShape, size: tagSize, color: tagColor, label: tagLabel }),
-              slotLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: slotLabel }),
-              children
-            ] }),
-            bottomMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: bottomMessage.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0", children: m }, i)) })
+            tagNode != null && // tag 위치 content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px] w-full", children: tagNode }),
+            bottomMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[2px]", children: bottomMessage.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0", children: m }, i)) }),
+            optionNode != null && optionNode
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[8px]", children: [
@@ -4887,6 +4901,384 @@ function SLoadingModal({
   );
 }
 
+// src/components/SGnb/gnb.config.ts
+var belt = (p) => `var(--cmp-gnbBelt-${p})`;
+var box = (p) => `var(--cmp-gnbBox-${p})`;
+var light = (p) => `var(--cmp-light-${p})`;
+var dark = (p) => `var(--cmp-dark-${p})`;
+var GNB_LAYOUT = {
+  // 사용자 명명: type="box" → gnbBox 토큰(둥금), type="belt" → gnbBelt 토큰(각짐)
+  box: {
+    topPaddingX: box("paddingX"),
+    topGap: box("gap"),
+    // 상단바 gap (버튼 간 세부 gap 은 --cmp-gnbBox-button-gap)
+    bodyPadding: box("menu-body-padding"),
+    itemPaddingRight: box("item-paddingRight"),
+    itemGap: box("item-gap"),
+    itemRadius: box("item-radius"),
+    itemArrow: box("item-arrow"),
+    depth1PaddingLeft: box("item-depth1-paddingLeft"),
+    depth2PaddingLeft: box("item-depth2-paddingLeft"),
+    depth3PaddingLeft: box("item-depth3-paddingLeft"),
+    depth1Icon: box("item-depth1-icon"),
+    depth1FontSize: 14,
+    // token: gnbBox.item.typography.bold.fontSize
+    depth1LineHeight: 24,
+    // token: gnbBox.item.typography.bold.lineHeight
+    depth1FontWeight: 700,
+    itemFontSize: 14,
+    // token: gnbBox.item.typography.default.fontSize
+    itemLineHeight: 24
+    // token: gnbBox.item.typography.default.lineHeight
+  },
+  belt: {
+    topPaddingX: belt("top-paddingX"),
+    topGap: belt("top-gap"),
+    bodyPadding: belt("body-paddingY"),
+    itemPaddingRight: belt("item-paddingRight"),
+    itemGap: belt("item-gap"),
+    itemRadius: "0px",
+    // belt 토큰에 radius 없음 → 풀폭 행
+    itemArrow: belt("item-icon"),
+    depth1PaddingLeft: belt("item-depth1-paddingLeft"),
+    depth2PaddingLeft: belt("item-depth2-paddingLeft"),
+    depth3PaddingLeft: belt("item-depth3-paddingLeft"),
+    depth1Icon: box("item-depth1-icon"),
+    // belt 토큰에 depth1-icon 없음 → box 값(20) 공유
+    depth1FontSize: 13,
+    // token: gnbBelt.item.depth1.typography.fontSize
+    depth1LineHeight: 22,
+    // token: gnbBelt.item.depth1.typography.lineHeight
+    depth1FontWeight: 700,
+    itemFontSize: 12,
+    // token: gnbBelt.item.typography.default.fontSize
+    itemLineHeight: 20
+    // token: gnbBelt.item.typography.default.lineHeight
+  }
+};
+var GNB_COLORS = {
+  light: {
+    panelBg: light("bg"),
+    topBorder: light("divider"),
+    itemBgDefault: light("item-bg-default"),
+    itemBgHover: light("item-bg-hover"),
+    itemBgSelected: light("item-bg-selected"),
+    itemColorDefault: light("item-fg-default"),
+    itemColorActive: light("item-fg-selected")
+  },
+  dark: {
+    panelBg: dark("bg"),
+    topBorder: dark("divider"),
+    itemBgDefault: dark("item-bg-default"),
+    itemBgHover: dark("item-bg-hover"),
+    itemBgSelected: dark("item-bg-selected"),
+    itemColorDefault: dark("item-fg-default"),
+    itemColorActive: dark("item-fg-selected")
+  }
+};
+var GNB_COMMON = {
+  topHeight: box("top-height"),
+  // 56 (box=belt 동일)
+  logoHeight: box("logo-height"),
+  // 32
+  itemPaddingY: box("item-paddingY"),
+  // 6
+  foldWidth: belt("fold-width")
+  // 48 (belt 토큰 공유)
+};
+var GNB_MENU_WIDTH = 240;
+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]);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return walk(items, []) ?? [];
+}
+var SLayoutContext = react.createContext(null);
+function useSLayout() {
+  const ctx = react.useContext(SLayoutContext);
+  if (!ctx) throw new Error("useSLayout \uC740 <SLayout> \uC548\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.");
+  return ctx;
+}
+var SLayout = react.forwardRef(function SLayout2({
+  type = "box",
+  folded,
+  defaultFolded = false,
+  onFoldedChange,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const [uncontrolledFolded, setUncontrolledFolded] = react.useState(defaultFolded);
+  const isControlled = folded !== void 0;
+  const currentFolded = isControlled ? folded : uncontrolledFolded;
+  const setFolded = react.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledFolded(next);
+      onFoldedChange?.(next);
+    },
+    [isControlled, onFoldedChange]
+  );
+  const ctx = react.useMemo(
+    () => ({ type, folded: currentFolded, setFolded }),
+    [type, currentFolded, setFolded]
+  );
+  const isBox = type === "box";
+  const frameStyle = isBox ? {
+    gridTemplateColumns: `${currentFolded ? 0 : GNB_MENU_WIDTH}px 1fr`,
+    gridTemplateRows: `${GNB_COMMON.topHeight} 1fr`
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(SLayoutContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-type": type,
+      className: cn(
+        "box-border h-full overflow-hidden",
+        isBox ? "grid" : "flex flex-row",
+        className
+      ),
+      style: { ...frameStyle, ...style },
+      ...rest,
+      children
+    }
+  ) });
+});
+var DEPTH_PADDING_LEFT = (L, depth) => depth === 1 ? L.depth1PaddingLeft : depth === 2 ? L.depth2PaddingLeft : L.depth3PaddingLeft;
+var SGnb = react.forwardRef(function SGnb2({
+  type: typeProp,
+  color = "light",
+  items,
+  value = "",
+  onValueChange,
+  folded: foldedProp,
+  onFoldChange,
+  onLauncherClick,
+  logo,
+  search,
+  className,
+  style
+}, ref) {
+  const layout = react.useContext(SLayoutContext);
+  const type = typeProp ?? layout?.type ?? "box";
+  const folded = foldedProp ?? layout?.folded ?? false;
+  const L = GNB_LAYOUT[type];
+  const C = GNB_COLORS[color];
+  const [expandedKeys, setExpandedKeys] = react.useState(
+    () => new Set(findGnbAncestors(items, value))
+  );
+  const [hoveredKey, setHoveredKey] = react.useState(null);
+  react.useEffect(() => {
+    const ancestors = findGnbAncestors(items, value);
+    if (ancestors.length === 0) return;
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      ancestors.forEach((a) => next.add(a));
+      return next;
+    });
+  }, [items, value]);
+  const toggleExpand = (key) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+  const handleItemClick = (item) => {
+    if (item.disabled) return;
+    if (item.children && item.children.length > 0) {
+      toggleExpand(item.value);
+      return;
+    }
+    onValueChange?.(item.value);
+  };
+  const handleFoldToggle = () => {
+    const next = !folded;
+    onFoldChange?.(next);
+    layout?.setFolded(next);
+  };
+  const iconBtnClass = "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-1.5";
+  const renderItem = (item, depth) => {
+    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;
+    const bg = isSelected ? C.itemBgSelected : isHovered && !item.disabled ? C.itemBgHover : C.itemBgDefault;
+    const itemStyle = {
+      gap: L.itemGap,
+      paddingTop: GNB_COMMON.itemPaddingY,
+      paddingBottom: GNB_COMMON.itemPaddingY,
+      paddingRight: L.itemPaddingRight,
+      paddingLeft: DEPTH_PADDING_LEFT(L, depth),
+      marginLeft: L.bodyPadding,
+      marginRight: L.bodyPadding,
+      borderRadius: L.itemRadius,
+      backgroundColor: bg,
+      color: isSelected ? C.itemColorActive : C.itemColorDefault,
+      fontSize: depth === 1 ? L.depth1FontSize : L.itemFontSize,
+      lineHeight: `${depth === 1 ? L.depth1LineHeight : L.itemLineHeight}px`,
+      fontWeight: depth === 1 || isSelected ? L.depth1FontWeight : 400,
+      opacity: item.disabled ? 0.4 : 1,
+      cursor: item.disabled ? "not-allowed" : "pointer"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: hasChildren ? "button" : "menuitem",
+          tabIndex: item.disabled ? -1 : 0,
+          "aria-disabled": item.disabled || void 0,
+          "aria-expanded": hasChildren ? isExpanded : void 0,
+          "aria-current": isSelected ? "page" : void 0,
+          className: "box-border flex select-none items-center transition-colors duration-150",
+          style: itemStyle,
+          onClick: () => handleItemClick(item),
+          onMouseEnter: () => setHoveredKey(item.value),
+          onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleItemClick(item);
+            }
+          },
+          children: [
+            depth === 1 && item.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item.icon, size: L.depth1Icon, className: "shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: item.label }),
+            item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+              STag,
+              {
+                shape: "square",
+                size: "xs",
+                color: isSelected ? "blue" : "grey",
+                label: item.tag,
+                className: "shrink-0"
+              }
+            ),
+            hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
+              SIcon,
+              {
+                name: "chevronDown",
+                size: L.itemArrow,
+                rotate: isExpanded ? 180 : 0,
+                className: "shrink-0 transition-transform duration-150"
+              }
+            )
+          ]
+        }
+      ),
+      hasChildren && isExpanded && item.children.map((child) => renderItem(child, depth + 1))
+    ] }, item.value);
+  };
+  const railFolded = folded && type === "belt";
+  const rootWidth = type === "box" ? "100%" : folded ? GNB_COMMON.foldWidth : GNB_MENU_WIDTH;
+  const inBoxGrid = !!layout && type === "box";
+  const rootStyle = react.useMemo(
+    () => ({
+      width: rootWidth,
+      ...inBoxGrid ? { gridArea: "1 / 1 / -1 / -1" } : null,
+      ...style
+    }),
+    [rootWidth, inBoxGrid, style]
+  );
+  const iconColor = C.itemColorDefault;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "box-border flex flex-col",
+        type === "box" && !inBoxGrid ? "h-auto" : "h-full",
+        className
+      ),
+      style: rootStyle,
+      "data-type": type,
+      "data-color": color,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("box-border flex items-center", railFolded && "flex-col"),
+            style: {
+              gap: railFolded ? 8 : L.topGap,
+              height: railFolded ? "auto" : GNB_COMMON.topHeight,
+              padding: railFolded ? "8px 0" : `0 ${L.topPaddingX}`,
+              borderBottom: `1px solid ${C.topBorder}`,
+              backgroundColor: C.panelBg,
+              color: iconColor
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "app launcher",
+                  className: iconBtnClass,
+                  onClick: onLauncherClick,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "launcher", size: 20 })
+                }
+              ),
+              !railFolded && logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", style: { height: GNB_COMMON.logoHeight }, children: logo }),
+              !railFolded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: search }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "toggle navigation",
+                  "aria-pressed": folded,
+                  className: cn(iconBtnClass, !railFolded && "ml-auto"),
+                  onClick: handleFoldToggle,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "sidebar", size: 20 })
+                }
+              )
+            ]
+          }
+        ),
+        !folded && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "menu",
+            className: "flex flex-col overflow-y-auto",
+            style: {
+              width: GNB_MENU_WIDTH,
+              alignSelf: "flex-start",
+              flexGrow: 1,
+              flexShrink: 1,
+              flexBasis: "auto",
+              minHeight: 0,
+              paddingTop: L.bodyPadding,
+              paddingBottom: L.bodyPadding,
+              backgroundColor: C.panelBg
+            },
+            children: items.map((item) => renderItem(item, 1))
+          }
+        )
+      ]
+    }
+  );
+});
+var SPage = react.forwardRef(function SPage2({ className, style, children, ...rest }, ref) {
+  const layout = react.useContext(SLayoutContext);
+  const gridStyle = layout?.type === "box" ? { gridColumn: 2, gridRow: 2 } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "main",
+    {
+      ref,
+      className: cn("box-border min-h-0 min-w-0 flex-1 overflow-auto p-24", className),
+      style: { ...gridStyle, ...style },
+      ...rest,
+      children
+    }
+  );
+});
+
 // src/components/STabs/tabs.config.ts
 var TAB_MAIN_SIZE = {
   md: { height: 36, paddingX: 24 },
@@ -5237,6 +5629,7 @@ var SField = react.forwardRef(function SField2({
   name,
   label = "",
   icon,
+  iconColor,
   labelTooltip = "",
   labelTooltipProps,
   labelWidth,
@@ -5314,7 +5707,15 @@ var SField = react.forwardRef(function SField2({
               lineHeight: `${s.lineHeight}px`
             },
             children: [
-              icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, style: { marginRight: s.labelGap } }),
+              icon && /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: icon,
+                  size: s.icon,
+                  color: iconColor,
+                  style: { marginRight: s.labelGap }
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
               (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsxRuntime.jsx(
                 STooltip,
@@ -5364,7 +5765,7 @@ var SField = react.forwardRef(function SField2({
                       borderBottomLeftRadius: s.radius - 1
                     },
                     children: [
-                      icon && !label && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon }),
+                      icon && !label && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
                       effectiveAddonLabel
                     ]
                   }
@@ -5436,6 +5837,7 @@ var SSelect = react.forwardRef(function SSelect2({
   label,
   labelWidth,
   icon,
+  iconColor,
   labelTooltip,
   addonLabel,
   addonAlign,
@@ -5447,18 +5849,15 @@ var SSelect = react.forwardRef(function SSelect2({
 }, ref) {
   const multi = type === "multi" || type === "multi_depth";
   const portalContainer = usePortalContainer();
+  const insideModal = useInsideModal();
   const [search, setSearch] = react.useState("");
   const [ruleError, setRuleError] = react.useState("");
   const [open, setOpen] = react.useState(false);
+  const [pendingOpen, setPendingOpen] = react.useState(false);
+  const [focusedIndex, setFocusedIndex] = react.useState(-1);
   const triggerRef = react.useRef(null);
-  react.useImperativeHandle(
-    ref,
-    () => ({
-      focus: () => triggerRef.current?.focus(),
-      open: () => setOpen(true)
-    }),
-    []
-  );
+  const searchInputRef = react.useRef(null);
+  const listRef = react.useRef(null);
   const flat = react.useMemo(() => flattenOptions(options), [options]);
   const selectable = react.useMemo(() => selectableOptions(flat), [flat]);
   const hasLeaf = react.useMemo(() => flat.some((o) => !o.isGroup), [flat]);
@@ -5476,6 +5875,46 @@ var SSelect = react.forwardRef(function SSelect2({
     const arr = Array.isArray(value) ? value : [value];
     return arr.map((v) => v != null && typeof v === "object" ? v.value : v).filter((v) => v != null && v !== "").map(String);
   }, [value]);
+  const selectedRef = react.useRef(selected);
+  selectedRef.current = selected;
+  const emit2 = (next) => {
+    if (!onValueChange) return;
+    const mapped = next.map(
+      (v) => emitValue ? rawByValue.get(v) ?? v : optionByValue.get(v) ?? { value: v, label: v }
+    );
+    onValueChange(multi ? mapped : mapped[0] ?? (emitValue ? "" : null));
+  };
+  const commitOpen = (next) => {
+    setOpen(next);
+    onOpenChange?.(next);
+    if (!next) {
+      setPendingOpen(false);
+      setSearch("");
+      if (rules && rules.length > 0) {
+        setRuleError(runRules(multi ? selectedRef.current : selectedRef.current[0] ?? "", rules));
+      }
+    }
+  };
+  const requestOpen = (next) => {
+    if (next && insideModal && portalContainer == null) {
+      setPendingOpen(true);
+      return;
+    }
+    commitOpen(next);
+  };
+  react.useEffect(() => {
+    if (!insideModal || portalContainer == null || !pendingOpen) return;
+    setPendingOpen(false);
+    commitOpen(true);
+  }, [insideModal, pendingOpen, portalContainer]);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      focus: () => triggerRef.current?.focus(),
+      open: () => requestOpen(true)
+    }),
+    [insideModal, portalContainer]
+  );
   useFormField({
     name,
     validate: () => {
@@ -5485,13 +5924,6 @@ var SSelect = react.forwardRef(function SSelect2({
     },
     resetValidation: () => setRuleError("")
   });
-  const emit2 = (next) => {
-    if (!onValueChange) return;
-    const mapped = next.map(
-      (v) => emitValue ? rawByValue.get(v) ?? v : optionByValue.get(v) ?? { value: v, label: v }
-    );
-    onValueChange(multi ? mapped : mapped[0] ?? (emitValue ? "" : null));
-  };
   const filtered = react.useMemo(() => {
     if (!showSearch || search.trim() === "") return flat;
     const q = search.trim().toLowerCase();
@@ -5502,6 +5934,16 @@ var SSelect = react.forwardRef(function SSelect2({
   const allValues = selectable.map((o) => o.value);
   const allSelected = allValues.length > 0 && allValues.every((v) => selected.includes(v));
   const hasItems = filtered.some((o) => !o.isGroup);
+  const navigableItems = react.useMemo(() => {
+    const items = [];
+    if (multi && useSelectAll && allValues.length > 0) {
+      items.push({ value: "__select_all__", isSelectAll: true });
+    }
+    filtered.forEach((o) => {
+      if (!o.isGroup && !o.disabled) items.push({ value: o.value });
+    });
+    return items;
+  }, [allValues.length, filtered, multi, useSelectAll]);
   const triggerText = (() => {
     if (selected.length === 0) return placeholder;
     if (multi) {
@@ -5511,26 +5953,119 @@ var SSelect = react.forwardRef(function SSelect2({
     return labelByValue.get(selected[0]) ?? selected[0];
   })();
   const isPlaceholder = selected.length === 0;
-  const selectStore = /* @__PURE__ */ jsxRuntime.jsxs(
-    Ariakit__namespace.SelectProvider,
+  const handleSelect = (nextValue) => {
+    if (multi) {
+      const next = selected.includes(nextValue) ? selected.filter((v) => v !== nextValue) : [...selected, nextValue];
+      emit2(next);
+      return;
+    }
+    emit2([nextValue]);
+    commitOpen(false);
+  };
+  const handleSelectAll = () => {
+    emit2(allSelected ? [] : allValues);
+  };
+  react.useEffect(() => {
+    if (!open) {
+      setFocusedIndex(-1);
+      return;
+    }
+    setFocusedIndex(navigableItems.length > 0 ? 0 : -1);
+  }, [open, navigableItems.length]);
+  react.useEffect(() => {
+    if (!open) return;
+    setFocusedIndex(navigableItems.length > 0 ? 0 : -1);
+  }, [search, open, navigableItems.length]);
+  react.useEffect(() => {
+    if (!open || focusedIndex < 0) return;
+    const list = listRef.current;
+    const focusedEl = list?.querySelector('[data-select-focused="true"]');
+    if (!list || !focusedEl) return;
+    const listRect = list.getBoundingClientRect();
+    const itemRect = focusedEl.getBoundingClientRect();
+    if (itemRect.top < listRect.top) {
+      list.scrollTop += itemRect.top - listRect.top;
+    } else if (itemRect.bottom > listRect.bottom) {
+      list.scrollTop += itemRect.bottom - listRect.bottom;
+    }
+  }, [focusedIndex, open]);
+  const moveFocusedIndex = (direction) => {
+    if (!open || navigableItems.length === 0) return;
+    setFocusedIndex((current) => {
+      if (direction === "next") {
+        return current < 0 ? 0 : (current + 1) % navigableItems.length;
+      }
+      return current <= 0 ? navigableItems.length - 1 : current - 1;
+    });
+  };
+  const selectFocusedItem = () => {
+    if (focusedIndex < 0 || focusedIndex >= navigableItems.length) return;
+    const focused = navigableItems[focusedIndex];
+    if (focused.isSelectAll) {
+      handleSelectAll();
+      return;
+    }
+    handleSelect(focused.value);
+  };
+  const handleKeyDown = (event) => {
+    if (!open) {
+      if ((event.key === "ArrowDown" || event.key === "ArrowUp") && !effectiveDisabled) {
+        event.preventDefault();
+        requestOpen(true);
+      }
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveFocusedIndex("next");
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveFocusedIndex("prev");
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      selectFocusedItem();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      commitOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SField,
     {
-      animated: portalContainer == null ? 150 : false,
-      value: multi ? selected : selected[0] ?? "",
-      setValue: (v) => emit2(Array.isArray(v) ? v : v === "" ? [] : [v]),
-      open,
-      setOpen: (o) => {
-        setOpen(o);
-        onOpenChange?.(o);
-        if (!o && rules && rules.length > 0) {
-          setRuleError(runRules(multi ? selected : selected[0] ?? "", rules));
-        }
-      },
+      label,
+      labelWidth,
+      icon,
+      iconColor,
+      labelTooltip,
+      labelTooltipProps,
+      addonLabel,
+      addonAlign,
+      hint,
+      error: error || ruleError !== "",
+      status: rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0,
+      errorMessage: ruleError !== "" ? ruleError : errorMessage,
+      disabled: effectiveDisabled,
+      width,
+      className,
+      style,
       children: [
+        name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: selected.join(",") }),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          Ariakit__namespace.Select,
+          "button",
           {
             ref: triggerRef,
+            type: "button",
             disabled: effectiveDisabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            onClick: () => requestOpen(!open),
+            onKeyDown: handleKeyDown,
             className: "flex h-full w-full cursor-pointer items-center justify-between gap-[8px] bg-transparent px-[12px] text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
             style: {
               color: effectiveDisabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
@@ -5555,178 +6090,237 @@ var SSelect = react.forwardRef(function SSelect2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Ariakit__namespace.SelectPopover,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SPortal,
           {
-            portal: true,
-            portalElement: portalContainer,
-            gutter: 4,
-            sameWidth: !dropdownWidth,
-            className: "z-50 overflow-auto rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)] data-[enter]:animate-floating-in-bottom data-[leave]:animate-floating-out-bottom",
+            open,
+            onClose: () => commitOpen(false),
+            onOpenChange: (next) => {
+              if (next) requestOpen(true);
+            },
+            anchorRef: triggerRef,
+            placement: "bottom",
+            align: "start",
+            offset: 4,
+            fit: !dropdownWidth,
+            onOpenAutoFocus: (event) => {
+              if (!showSearch) {
+                event.preventDefault();
+                return;
+              }
+              event.preventDefault();
+              requestAnimationFrame(() => searchInputRef.current?.focus());
+            },
+            onCloseAutoFocus: (event) => {
+              event.preventDefault();
+              triggerRef.current?.focus();
+            },
+            className: "rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
             style: {
-              maxHeight: dropdownHeight,
               ...dropdownWidth ? { width: dropdownWidth } : {},
               maxWidth: maxDropdownWidth
             },
-            children: [
-              showSearch && // 원본 sd-select-list-item-search: sticky + 검색 아이콘 + 테두리 input + focus-within + clear
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-[1] bg-[var(--cmp-listBox-bg)] px-[8px] py-[4px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[6px] rounded-[4px] border border-solid border-[color:var(--color-grey-45)] bg-white px-[8px] py-[4px] focus-within:border-[color:var(--sys-color-field-border-focus)]", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "search", size: 16, color: "var(--color-grey-70)", className: "shrink-0" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Ariakit__namespace.Combobox,
-                  {
-                    autoSelect: true,
-                    placeholder: "\uAC80\uC0C9",
-                    className: "min-w-0 flex-1 border-none bg-transparent text-[12px] leading-[20px] text-[color:var(--cmp-select-text-default)] outline-none placeholder:text-[color:var(--color-grey-55)]"
-                  }
-                ),
-                search !== "" && /* @__PURE__ */ jsxRuntime.jsx(
-                  SGhostButton,
-                  {
-                    icon: "close",
-                    size: "xxs",
-                    intent: "default",
-                    ariaLabel: "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30",
-                    onClick: () => setSearch(""),
-                    className: "shrink-0"
-                  }
-                )
-              ] }) }),
-              multi && useSelectAll && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "flex w-full items-center px-[12px] py-[4px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)] hover:bg-[var(--cmp-listItem-bg-hover)] hover:text-[color:var(--cmp-listItem-content-hover)]",
-                  onClick: () => emit2(allSelected ? [] : allValues),
-                  children: allSelectedLabel
-                }
-              ),
-              hasItems ? /* @__PURE__ */ jsxRuntime.jsx(ItemList, { items: filtered, multi, selected, useSearch: showSearch }) : (
-                // 원본 sd-select-listbox__empty (표시할 항목이 없을 때)
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
-              )
-            ]
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                ref: listRef,
+                className: "overflow-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar]:bg-[var(--color-grey-25)] [&::-webkit-scrollbar:horizontal]:h-[8px] [&::-webkit-scrollbar-thumb]:rounded-[4px] [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-25)]",
+                style: { maxHeight: dropdownHeight },
+                onMouseLeave: () => setFocusedIndex(-1),
+                children: [
+                  showSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-[1] bg-[var(--cmp-listBox-bg)] px-[8px] py-[4px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[6px] rounded-[4px] border border-solid border-[color:var(--color-grey-45)] bg-white px-[8px] py-[4px] focus-within:border-[color:var(--sys-color-field-border-focus)]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "search", size: 16, color: "var(--color-grey-70)", className: "shrink-0" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        ref: searchInputRef,
+                        value: search,
+                        onChange: (e) => setSearch(e.target.value),
+                        onKeyDown: handleKeyDown,
+                        placeholder: "\uAC80\uC0C9",
+                        className: "min-w-0 flex-1 border-none bg-transparent text-[12px] leading-[20px] text-[color:var(--cmp-select-text-default)] outline-none placeholder:text-[color:var(--color-grey-55)]"
+                      }
+                    ),
+                    search !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+                      SGhostButton,
+                      {
+                        icon: "close",
+                        size: "xxs",
+                        intent: "default",
+                        ariaLabel: "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30",
+                        onClick: () => setSearch(""),
+                        className: "shrink-0"
+                      }
+                    )
+                  ] }) }),
+                  hasItems ? /* @__PURE__ */ jsxRuntime.jsx(
+                    ItemList,
+                    {
+                      items: filtered,
+                      multi,
+                      selected,
+                      focusedValue: navigableItems[focusedIndex]?.isSelectAll ? "__select_all__" : navigableItems[focusedIndex]?.value,
+                      showSelectAll: multi && useSelectAll && allValues.length > 0,
+                      selectAllLabel: allSelectedLabel,
+                      selectAllSelected: allSelected,
+                      onSelectAll: handleSelectAll,
+                      onSelect: handleSelect,
+                      onHoverValue: (value2) => {
+                        if (value2 == null) {
+                          setFocusedIndex(-1);
+                          return;
+                        }
+                        const index = navigableItems.findIndex(
+                          (item) => item.isSelectAll ? value2 === "__select_all__" : item.value === value2
+                        );
+                        if (index >= 0) setFocusedIndex(index);
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                ]
+              }
+            )
           }
         )
       ]
     }
   );
-  const control = showSearch ? /* @__PURE__ */ jsxRuntime.jsx(Ariakit__namespace.ComboboxProvider, { value: search, setValue: setSearch, resetValueOnHide: true, children: selectStore }) : selectStore;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    SField,
-    {
-      label,
-      labelWidth,
-      icon,
-      labelTooltip,
-      labelTooltipProps,
-      addonLabel,
-      addonAlign,
-      hint,
-      error: error || ruleError !== "",
-      status: rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0,
-      errorMessage: ruleError !== "" ? ruleError : errorMessage,
-      disabled: effectiveDisabled,
-      width,
-      className,
-      style,
-      children: [
-        name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: selected.join(",") }),
-        control
-      ]
-    }
-  );
 });
 SSelect.displayName = "SSelect";
 function ItemList({
   items,
   multi,
   selected,
-  useSearch
+  focusedValue,
+  showSelectAll,
+  selectAllLabel,
+  selectAllSelected,
+  onSelectAll,
+  onSelect,
+  onHoverValue
 }) {
   const itemBase = cn(
-    // group: 체크박스 inverse(group-data-[active-item])를 위해 필요
-    "group flex cursor-pointer select-none items-center gap-[8px] text-[12px] leading-[20px] outline-none",
+    "group flex w-full cursor-pointer select-none items-center gap-[8px] border-none bg-transparent text-left text-[12px] leading-[20px] outline-none",
     "text-[color:var(--cmp-listItem-content-default)]",
-    // Ariakit은 disabled 항목에 aria-disabled를 붙이므로 aria-disabled 변형으로 스타일 (data-disabled 아님)
-    "aria-disabled:cursor-not-allowed aria-disabled:text-[color:var(--cmp-listItem-content-disabled)]"
-  );
-  const activeClass = "data-[active-item]:bg-[var(--cmp-listItem-bg-hover)] data-[active-item]:text-[color:var(--cmp-listItem-content-hover)]";
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((o) => {
-    const padLeft = o.depth === 1 ? 12 : o.depth === 2 ? 20 : 28;
-    if (o.isGroup) {
-      const isDepth1 = o.depth === 1;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
-            isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium",
-            // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
-            // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
-            o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
-            o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
-          ),
-          style: { paddingLeft: padLeft },
-          children: o.label
-        },
-        o.value
-      );
-    }
-    const isSelected = selected.includes(o.value);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Ariakit__namespace.SelectItem,
+    "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listItem-content-disabled)]"
+  );
+  const activeClass = "hover:bg-[var(--cmp-listItem-bg-hover)] hover:text-[color:var(--cmp-listItem-content-hover)] focus:bg-[var(--cmp-listItem-bg-hover)] focus:text-[color:var(--cmp-listItem-content-hover)]";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listbox", "aria-multiselectable": multi || void 0, children: [
+    showSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        value: o.value,
-        disabled: o.disabled,
-        accessibleWhenDisabled: true,
+        type: "button",
+        "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
+        "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
         className: cn(
           itemBase,
-          isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
-          // Ariakit은 disabled 항목도 hover 시 active(data-active-item) 처리하므로,
-          // 비활성 항목에는 hover 하이라이트를 적용하지 않아 회색 비활성 스타일을 유지한다.
-          // (원본 Stencil의 `--focused...:not(--disabled)` 규칙과 동일한 의도)
-          !o.disabled && activeClass
+          focusedValue === "__select_all__" && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]"
         ),
-        style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: padLeft },
-        render: useSearch ? /* @__PURE__ */ jsxRuntime.jsx(Ariakit__namespace.ComboboxItem, {}) : void 0,
+        style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: 12 },
+        onMouseEnter: () => onHoverValue("__select_all__"),
+        onMouseLeave: () => onHoverValue(null),
+        onClick: onSelectAll,
         children: [
-          multi && // hover(active) 시 checkbox inverse — 파란 hover 배경 위에서 checked/unchecked 모두 흰 테두리 + 투명 배경
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               className: cn(
                 "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
-                o.disabled ? (
-                  // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
-                  "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
-                ) : cn(
-                  "group-data-[active-item]:border-[color:var(--cmp-checkbox-checked-border-inverse)]",
-                  isSelected ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)] group-data-[active-item]:bg-transparent" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-transparent"
-                )
+                selectAllSelected ? focusedValue === "__select_all__" ? "border-[color:var(--cmp-checkbox-checked-border-inverse)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
               ),
-              children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+              children: selectAllSelected && /* @__PURE__ */ jsxRuntime.jsx(
                 SIcon,
                 {
                   name: "checkboxCheck",
                   size: 12,
-                  color: o.disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
+                  color: "var(--cmp-checkbox-checked-icon-default)"
                 }
               )
             }
           ),
-          isHtmlLabel(o.label) ? /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "flex-1 truncate",
-              dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(o.label) }
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: o.label })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
         ]
-      },
-      o.value
-    );
-  }) });
+      }
+    ),
+    items.map((o) => {
+      const padLeft = o.depth === 1 ? 12 : o.depth === 2 ? 20 : 28;
+      if (o.isGroup) {
+        const isDepth1 = o.depth === 1;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
+              isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium",
+              // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
+              // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
+              o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
+              o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
+            ),
+            style: { paddingLeft: padLeft },
+            children: o.label
+          },
+          o.value
+        );
+      }
+      const isSelected = selected.includes(o.value);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: o.disabled,
+          role: "option",
+          "aria-selected": isSelected,
+          "data-select-focused": focusedValue === o.value ? "true" : void 0,
+          "data-select-active": focusedValue === o.value ? "true" : void 0,
+          className: cn(
+            itemBase,
+            isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
+            focusedValue === o.value && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]",
+            // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
+            // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
+            !o.disabled && activeClass
+          ),
+          style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: padLeft },
+          onMouseEnter: () => onHoverValue(o.value),
+          onMouseLeave: () => onHoverValue(null),
+          onClick: () => onSelect(o.value),
+          children: [
+            multi && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
+                  o.disabled ? (
+                    // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
+                    "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
+                  ) : cn(
+                    isSelected ? focusedValue === o.value ? "border-[color:var(--cmp-checkbox-checked-border-inverse)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
+                  )
+                ),
+                children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                  SIcon,
+                  {
+                    name: "checkboxCheck",
+                    size: 12,
+                    color: o.disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
+                  }
+                )
+              }
+            ),
+            isHtmlLabel(o.label) ? /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "flex-1 truncate",
+                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(o.label) }
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: o.label })
+          ]
+        },
+        o.value
+      );
+    })
+  ] });
 }
 var DEFAULT_ROW_HEIGHT = 44;
 var DENSE_ROW_HEIGHT = 32;
@@ -6002,7 +6596,7 @@ var STable = react.forwardRef(function STable2({
   };
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[var(--cmp-table-radius)] rounded-t-none" : "rounded-[var(--cmp-table-radius)]";
   const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
-  const cellPadX = dense ? "var(--cmp-table-body-paddingX-default)" : "var(--cmp-table-body-paddingX-wide)";
+  const cellPadX = "var(--cmp-table-body-paddingX-wide)";
   const rowH = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-body-default-height)";
   const totalColSpan = visibleCols.length + (selectable ? 1 : 0);
   const stickyInfo = (i) => {
@@ -6210,10 +6804,10 @@ var STable = react.forwardRef(function STable2({
                   "div",
                   {
                     "aria-hidden": true,
-                    className: "pointer-events-none absolute left-0 right-0 top-0 z-[210] h-[var(--cmp-table-header-height)] bg-white/60"
+                    className: "pointer-events-none absolute left-0 right-0 top-0 z-[31] h-[var(--cmp-table-header-height)] bg-white/60"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[200] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
               ] }),
               isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-white/60", children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true }) })
             ]
@@ -6249,6 +6843,7 @@ var SInput = react.forwardRef(function SInput2({
   type = "text",
   size = "sm",
   icon,
+  iconColor,
   prefix,
   suffix,
   clearable = false,
@@ -6302,6 +6897,7 @@ var SInput = react.forwardRef(function SInput2({
       labelTooltip,
       labelTooltipProps,
       icon,
+      iconColor,
       size,
       hint,
       error: resolvedError,
@@ -6403,6 +6999,7 @@ var STextarea = react.forwardRef(function STextarea2({
   label,
   labelWidth,
   icon,
+  iconColor,
   labelTooltip,
   labelTooltipProps,
   addonLabel,
@@ -6439,6 +7036,7 @@ var STextarea = react.forwardRef(function STextarea2({
       label,
       labelWidth,
       icon,
+      iconColor,
       labelTooltip,
       labelTooltipProps,
       addonLabel,
@@ -6571,6 +7169,7 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
   label,
   labelWidth,
   icon,
+  iconColor,
   labelTooltip,
   labelTooltipProps,
   addonLabel,
@@ -6729,6 +7328,7 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
       label,
       labelWidth,
       icon,
+      iconColor,
       labelTooltip,
       labelTooltipProps,
       addonLabel,
@@ -7204,6 +7804,7 @@ function SDatePicker({
   label,
   labelWidth,
   icon,
+  iconColor,
   labelTooltip,
   labelTooltipProps,
   addonLabel,
@@ -7242,6 +7843,7 @@ function SDatePicker({
       label,
       labelWidth,
       icon,
+      iconColor,
       labelTooltip,
       labelTooltipProps,
       addonLabel,
@@ -7510,6 +8112,7 @@ function SDateRangePicker({
   label,
   labelWidth,
   icon,
+  iconColor,
   labelTooltip,
   labelTooltipProps,
   addonLabel,
@@ -7552,6 +8155,7 @@ function SDateRangePicker({
       label,
       labelWidth,
       icon,
+      iconColor,
       labelTooltip,
       labelTooltipProps,
       addonLabel,
@@ -7813,6 +8417,7 @@ function SFilePicker({
   label,
   labelWidth,
   icon,
+  iconColor,
   labelTooltip,
   labelTooltipProps,
   addonLabel,
@@ -7982,7 +8587,7 @@ function SFilePicker({
         unmountOnHide: true,
         getAnchorRect: () => contentBoxRef.current?.getBoundingClientRect() ?? null,
         style: { minWidth: contentBoxRef.current?.offsetWidth },
-        className: "z-50 box-border flex flex-col items-stretch gap-[8px] rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] p-[8px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+        className: "z-50 box-border flex flex-col items-start gap-[8px] rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] p-[8px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
         children: filesArr.map((f, i) => /* @__PURE__ */ jsxRuntime.jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i))
       }
     )
@@ -7996,6 +8601,7 @@ function SFilePicker({
         label,
         labelWidth,
         icon,
+        iconColor,
         labelTooltip,
         labelTooltipProps,
         addonLabel,
@@ -8018,21 +8624,26 @@ function SFilePicker({
 var cssLen2 = (v) => v == null ? void 0 : typeof v === "number" ? `${v}px` : v;
 function SKeyValueTable({
   fields = [],
+  values = {},
   search = false,
   radius = "default",
-  dense = false,
   onChange,
   onSearch,
   className,
   style
 }) {
   if (fields.length === 0) return null;
-  const emit2 = (name, value) => onChange?.({ name, value });
-  const cellHeight = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-keyValue-height)";
-  const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-keyValue-body-paddingY)";
+  const emit2 = (name, value) => onChange?.({
+    name,
+    value,
+    values: { ...values, [name]: value }
+  });
+  const cellHeight = "var(--cmp-table-keyValue-height)";
+  const cellPadY = "var(--cmp-table-keyValue-body-paddingY)";
   const renderField = (f) => {
     if (f.render) return f.render;
-    const opt = f.options ?? {};
+    const opt = { ...f.options ?? {} };
+    if (Object.prototype.hasOwnProperty.call(values, f.name)) opt.value = values[f.name];
     const up = (v) => emit2(f.name, v);
     switch (f.type) {
       case "input":
@@ -8144,7 +8755,10 @@ function SKeyValueTable({
                   rowSpan: f.tdRowSpan && f.tdRowSpan > 1 ? f.tdRowSpan : void 0,
                   colSpan: f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : void 0,
                   className: cn(
-                    "box-border bg-[var(--sys-color-bg-frame)] px-[var(--cmp-table-keyValue-body-paddingX-default)] align-middle",
+                    "box-border bg-[var(--sys-color-bg-frame)] align-middle",
+                    // text 타입(및 미지정 기본값)은 읽기 전용 콘텐츠라 넓은 paddingX(wide),
+                    // 폼 필드 셀은 default paddingX 유지
+                    f.type == null || f.type === "text" ? "px-[var(--cmp-table-keyValue-body-paddingX-wide)]" : "px-[var(--cmp-table-keyValue-body-paddingX-default)]",
                     cellBorder,
                     f.tdClass
                   ),
@@ -8637,6 +9251,7 @@ var SChipInput = react.forwardRef(function SChipInput2({
   error,
   useReset = false,
   maxCount,
+  metaPlacement = "end",
   duplicateLabel,
   suggestions = [],
   loadingSuggestions = false,
@@ -8650,6 +9265,7 @@ var SChipInput = react.forwardRef(function SChipInput2({
   width,
   status,
   icon,
+  iconColor,
   labelTooltip,
   labelTooltipProps,
   className,
@@ -8784,6 +9400,7 @@ var SChipInput = react.forwardRef(function SChipInput2({
       labelWidth,
       labelHeight: `calc(var(--cmp-chipInput-${size}-minHeight) + 2px)`,
       icon,
+      iconColor,
       labelTooltip,
       labelTooltipProps,
       size,
@@ -8931,7 +9548,11 @@ var SChipInput = react.forwardRef(function SChipInput2({
             showMetaInfo && /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
-                className: "s-chip-input__meta ml-auto flex items-center gap-8",
+                className: cn(
+                  "s-chip-input__meta flex items-center gap-8",
+                  metaPlacement === "end" && "ml-auto"
+                ),
+                "data-placement": metaPlacement,
                 onMouseDown: (e) => e.preventDefault(),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -8941,11 +9562,20 @@ var SChipInput = react.forwardRef(function SChipInput2({
                       style: { width: 1, height: 12, backgroundColor: "#E1E1E1" }
                     }
                   ),
-                  showMaxCount && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "s-chip-input__max-count text-12 text-(--cmp-chipInput-text-placeholder)", children: [
-                    "\uCD5C\uB300 ",
-                    maxCount,
-                    "\uAC1C"
-                  ] }),
+                  showMaxCount && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "s-chip-input__max-count text-12",
+                        isMax ? "text-(--sys-color-fg-warning)" : "text-(--cmp-chipInput-text-placeholder)"
+                      ),
+                      children: [
+                        "\uCD5C\uB300 ",
+                        maxCount,
+                        "\uAC1C"
+                      ]
+                    }
+                  ),
                   showResetLink && /* @__PURE__ */ jsxRuntime.jsx(
                     STextLink,
                     {
@@ -8982,7 +9612,7 @@ var SChipInput = react.forwardRef(function SChipInput2({
                     onMouseDown: (e) => e.preventDefault(),
                     children: [
                       loading2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "s-chip-input__suggestions-empty p-12 text-center text-12 leading-20 text-(--color-grey-65)", children: "\uBD88\uB7EC\uC624\uB294 \uC911..." }),
-                      !effectiveAutocomplete ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-8 p-12", children: items.map((item, i) => {
+                      !effectiveAutocomplete ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-8 px-12 py-6", children: items.map((item, i) => {
                         const selected = values.includes(item);
                         const active = i === activeIndex && !selected;
                         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -9071,6 +9701,7 @@ var SBarcodeInput = react.forwardRef(
     label,
     labelWidth,
     icon,
+    iconColor,
     labelTooltip,
     labelTooltipProps,
     addonLabel,
@@ -9102,6 +9733,7 @@ var SBarcodeInput = react.forwardRef(
         label,
         labelWidth,
         icon,
+        iconColor,
         labelTooltip,
         labelTooltipProps,
         addonLabel,
@@ -9184,6 +9816,10 @@ exports.BADGE_COLORS = BADGE_COLORS;
 exports.BUTTON_COLORS = BUTTON_COLORS;
 exports.BUTTON_SIZES = BUTTON_SIZES;
 exports.COLOR_KEYS = COLOR_KEYS;
+exports.GNB_COLORS = GNB_COLORS;
+exports.GNB_COMMON = GNB_COMMON;
+exports.GNB_LAYOUT = GNB_LAYOUT;
+exports.GNB_MENU_WIDTH = GNB_MENU_WIDTH;
 exports.ICONS = ICONS;
 exports.SActionModal = SActionModal;
 exports.SBadge = SBadge;
@@ -9205,16 +9841,19 @@ exports.SField = SField;
 exports.SFilePicker = SFilePicker;
 exports.SForm = SForm;
 exports.SGhostButton = SGhostButton;
+exports.SGnb = SGnb;
 exports.SGuide = SGuide;
 exports.SIcon = SIcon;
 exports.SInput = SInput;
 exports.SKeyValueTable = SKeyValueTable;
+exports.SLayout = SLayout;
+exports.SLayoutContext = SLayoutContext;
 exports.SLinearProgress = SLinearProgress;
 exports.SLoadingContainer = SLoadingContainer;
 exports.SLoadingModal = SLoadingModal;
 exports.SLoadingViewport = SLoadingViewport;
-exports.SModalContainer = SModalContainer;
 exports.SNumberInput = SNumberInput;
+exports.SPage = SPage;
 exports.SPagination = SPagination;
 exports.SPopover = SPopover;
 exports.SPopup = SPopup;
@@ -9238,8 +9877,10 @@ exports.TAG_SHAPES = TAG_SHAPES;
 exports.TAG_SIZES = TAG_SIZES;
 exports.buttonPreset = buttonPreset;
 exports.cn = cn;
+exports.findGnbAncestors = findGnbAncestors;
 exports.isColorKey = isColorKey;
 exports.loading = loading;
 exports.resolveColor = resolveColor;
+exports.useSLayout = useSLayout;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map