sellmate-design-system-react 0.1.11 → 0.3.0

package/dist/index.d.ts

@@ -23,6 +23,9 @@ export * from './components/SGuide';
 export * from './components/SConfirmModal';
 export * from './components/SActionModal';
 export * from './components/SLoadingModal';
+export * from './components/SGnb';
+export * from './components/SLayout';
+export * from './components/SPage';
 export * from './components/STabs';
 export * from './components/SPagination';
 export * from './components/STable';

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { forwardRef, useState, useEffect, useRef, useCallback, createContext, useImperativeHandle, useMemo, useId, useLayoutEffect, useContext, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
+import { forwardRef, useState, useEffect, useRef, useCallback, createContext, useImperativeHandle, useMemo, useContext, useId, useLayoutEffect, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -3319,8 +3319,12 @@ var SCircleProgress = 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: [
@@ -3886,7 +3890,7 @@ var SDropdownButton = forwardRef(
                 ...style
               },
               children: [
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-center", children: label }),
                 caret
               ]
             }
@@ -3911,9 +3915,12 @@ function SGhostButton({
   size = "sm",
   intent = "default",
   ariaLabel = "",
+  ariaPressed,
   tooltipText,
   disabled = false,
   onClick,
+  anchorClassName,
+  anchorStyle,
   className,
   style
 }) {
@@ -3936,6 +3943,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__ */ jsxs(
     "button",
     {
@@ -3943,6 +3952,7 @@ function SGhostButton({
       disabled,
       "aria-disabled": disabled ? "true" : void 0,
       "aria-label": ariaLabel.trim() || void 0,
+      "aria-pressed": ariaPressed,
       tabIndex: disabled ? -1 : void 0,
       onClick: (e) => {
         if (disabled) {
@@ -3976,13 +3986,13 @@ function SGhostButton({
       ]
     }
   );
-  const text = (tooltipText ?? "").trim();
-  if (text === "") return btn;
+  if (!hasTooltip) return btn;
   return /* @__PURE__ */ jsxs(RPopover2.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(RPopover2.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
       "span",
       {
-        className: "inline-flex",
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
         onMouseEnter: openNow,
         onMouseLeave: startHide,
         onFocus: openNow,
@@ -4383,7 +4393,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,
@@ -4865,6 +4875,404 @@ 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_HEADER = {
+  fix: {
+    topHeight: belt("top-height"),
+    topPaddingX: belt("top-paddingX"),
+    topGap: belt("top-gap"),
+    logoHeight: belt("logo-height")
+  },
+  full: {
+    topHeight: box("top-height"),
+    topPaddingX: box("paddingX"),
+    topGap: box("gap"),
+    // 상단바 gap (버튼 간 세부 gap 은 --cmp-gnbBox-button-gap)
+    logoHeight: box("logo-height")
+  }
+};
+var GNB_MENU = {
+  box: {
+    // menu.body.padding 은 전방향 토큰 → 세로 패딩과 아이템 좌우 여백 양쪽에 쓴다
+    bodyPaddingY: box("menu-body-padding"),
+    itemMarginX: box("menu-body-padding"),
+    itemPaddingY: box("item-paddingY"),
+    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: {
+    bodyPaddingY: belt("body-paddingY"),
+    itemMarginX: "0px",
+    // belt 토큰에 가로 여백 없음 → 풀폭 행 (들여쓰기는 depth*-paddingLeft 전담)
+    itemPaddingY: belt("item-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"),
+    itemColorHover: light("item-fg-hover"),
+    itemColorActive: light("item-fg-selected"),
+    itemChevron: light("item-chevron")
+  },
+  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"),
+    itemColorHover: dark("item-fg-hover"),
+    itemColorActive: dark("item-fg-selected"),
+    itemChevron: dark("item-chevron")
+  }
+};
+var GNB_COMMON = {
+  /** 접힘 레일 폭. header="full" 은 접으면 메뉴만 사라져 레일이 없으므로 fix 전용. */
+  foldWidth: belt("fold-width"),
+  /**
+   * 상단바 아이콘 버튼 사이 간격. fix 레일(세로 스택)의 gap·상하 여백에 쓴다.
+   * 레일 전용 여백 토큰이 따로 없어 같은 값(8px)인 이 토큰으로 재해석했다.
+   */
+  buttonGap: box("button-gap")
+};
+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 = createContext(null);
+function useSLayout() {
+  const ctx = 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 = forwardRef(function SLayout2({
+  type = "box",
+  header = "fix",
+  folded,
+  defaultFolded = false,
+  onFoldedChange,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const [uncontrolledFolded, setUncontrolledFolded] = useState(defaultFolded);
+  const isControlled = folded !== void 0;
+  const currentFolded = isControlled ? folded : uncontrolledFolded;
+  const setFolded = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledFolded(next);
+      onFoldedChange?.(next);
+    },
+    [isControlled, onFoldedChange]
+  );
+  const ctx = useMemo(
+    () => ({ type, header, folded: currentFolded, setFolded }),
+    [type, header, currentFolded, setFolded]
+  );
+  const isFullHeader = header === "full";
+  const frameStyle = isFullHeader ? {
+    gridTemplateColumns: `${currentFolded ? 0 : GNB_MENU_WIDTH}px 1fr`,
+    gridTemplateRows: `${GNB_HEADER[header].topHeight} 1fr`
+  } : void 0;
+  return /* @__PURE__ */ jsx(SLayoutContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-type": type,
+      "data-header": header,
+      className: cn(
+        "box-border h-full overflow-hidden",
+        isFullHeader ? "grid" : "flex flex-row",
+        className
+      ),
+      style: { ...frameStyle, ...style },
+      ...rest,
+      children
+    }
+  ) });
+});
+var DEPTH_PADDING_LEFT = (M, depth) => depth === 1 ? M.depth1PaddingLeft : depth === 2 ? M.depth2PaddingLeft : M.depth3PaddingLeft;
+var SGnb = forwardRef(function SGnb2({
+  type: typeProp,
+  header: headerProp,
+  color = "light",
+  items,
+  value = "",
+  onValueChange,
+  folded: foldedProp,
+  onFoldChange,
+  onLauncherClick,
+  logo,
+  ariaLabel = "global navigation",
+  className,
+  style,
+  ...rest
+}, ref) {
+  const layout = useContext(SLayoutContext);
+  const type = typeProp ?? layout?.type ?? "box";
+  const header = headerProp ?? layout?.header ?? "fix";
+  const folded = foldedProp ?? layout?.folded ?? false;
+  const H = GNB_HEADER[header];
+  const M = GNB_MENU[type];
+  const C = GNB_COLORS[color];
+  const [expandedKeys, setExpandedKeys] = useState(
+    () => new Set(findGnbAncestors(items, value))
+  );
+  const [hoveredKey, setHoveredKey] = useState(null);
+  useEffect(() => {
+    const ancestors = findGnbAncestors(items, value);
+    if (ancestors.length === 0) return;
+    setExpandedKeys((prev) => {
+      if (ancestors.every((a) => prev.has(a))) return 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);
+    if (foldedProp === void 0) layout?.setFolded(next);
+  };
+  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 && !item.disabled;
+    const itemStyle = {
+      gap: M.itemGap,
+      paddingTop: M.itemPaddingY,
+      paddingBottom: M.itemPaddingY,
+      paddingRight: M.itemPaddingRight,
+      paddingLeft: DEPTH_PADDING_LEFT(M, depth),
+      marginLeft: M.itemMarginX,
+      marginRight: M.itemMarginX,
+      borderRadius: M.itemRadius,
+      backgroundColor: isSelected ? C.itemBgSelected : isHovered ? C.itemBgHover : C.itemBgDefault,
+      color: isSelected ? C.itemColorActive : isHovered ? C.itemColorHover : C.itemColorDefault,
+      // <button> 의 UA 폰트(Arial 13.3px)를 끊고 앱 폰트를 잇는다
+      fontFamily: "inherit",
+      fontSize: depth === 1 ? M.depth1FontSize : M.itemFontSize,
+      lineHeight: `${depth === 1 ? M.depth1LineHeight : M.itemLineHeight}px`,
+      fontWeight: depth === 1 || isSelected ? M.depth1FontWeight : 400,
+      opacity: item.disabled ? 0.4 : 1,
+      cursor: item.disabled ? "not-allowed" : "pointer"
+    };
+    return (
+      // li 를 flex-col 로 둬야 버튼이 좌우 마진만큼 안쪽으로 들어가고,
+      // 하위 ul 은 마진 없이 전폭을 써서 depth*-paddingLeft 가 들여쓰기를 단독으로 책임진다.
+      /* @__PURE__ */ jsxs("li", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: item.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),
+            onMouseEnter: () => setHoveredKey(item.value),
+            onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
+            children: [
+              depth === 1 && item.icon && /* @__PURE__ */ jsx(SIcon, { name: item.icon, size: M.depth1Icon, className: "shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: item.label }),
+              item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsx(
+                STag,
+                {
+                  shape: "square",
+                  size: "xs",
+                  color: item.tagColor ?? "blue",
+                  label: item.tag,
+                  className: "shrink-0"
+                }
+              ),
+              hasChildren && /* @__PURE__ */ jsx(
+                SIcon,
+                {
+                  name: "chevronDown",
+                  size: M.itemArrow,
+                  color: C.itemChevron,
+                  rotate: isExpanded ? 180 : 0,
+                  className: "shrink-0 transition-transform duration-150"
+                }
+              )
+            ]
+          }
+        ),
+        hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: item.children.map((child) => renderItem(child, depth + 1)) })
+      ] }, item.value)
+    );
+  };
+  const railFolded = folded && header === "fix";
+  const rootWidth = header === "full" ? "100%" : folded ? GNB_COMMON.foldWidth : GNB_MENU_WIDTH;
+  const rootStyle = {
+    width: rootWidth,
+    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg },
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("box-border flex h-full shrink-0 flex-col", className),
+      style: rootStyle,
+      "data-type": type,
+      "data-header": header,
+      "data-color": color,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("box-border flex items-center", railFolded && "flex-col"),
+            style: {
+              gap: railFolded ? GNB_COMMON.buttonGap : H.topGap,
+              height: railFolded ? "auto" : H.topHeight,
+              padding: railFolded ? `${GNB_COMMON.buttonGap} 0` : `0 ${H.topPaddingX}`,
+              borderBottom: `1px solid ${C.topBorder}`,
+              backgroundColor: C.panelBg,
+              pointerEvents: "auto",
+              // 아이콘 버튼은 자체 ghostButton 토큰을 쓰므로, 이 색은 logo 슬롯 상속용
+              color: C.itemColorDefault
+            },
+            children: [
+              onLauncherClick && /* @__PURE__ */ jsx(
+                SGhostButton,
+                {
+                  icon: "launcher",
+                  size: "xs",
+                  intent: color === "dark" ? "inverse" : "default",
+                  ariaLabel: "app launcher",
+                  onClick: onLauncherClick,
+                  className: "shrink-0"
+                }
+              ),
+              !railFolded && logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", style: { height: H.logoHeight }, children: logo }),
+              /* @__PURE__ */ jsx(
+                SGhostButton,
+                {
+                  icon: "sidebar",
+                  size: "xs",
+                  intent: color === "dark" ? "inverse" : "default",
+                  ariaLabel: "toggle navigation",
+                  ariaPressed: folded,
+                  onClick: handleFoldToggle,
+                  className: cn("shrink-0", !railFolded && "ml-auto")
+                }
+              )
+            ]
+          }
+        ),
+        !folded && /* @__PURE__ */ jsx(
+          "nav",
+          {
+            "aria-label": ariaLabel,
+            className: "flex flex-col overflow-y-auto",
+            style: {
+              width: GNB_MENU_WIDTH,
+              alignSelf: "flex-start",
+              flexGrow: 1,
+              flexShrink: 1,
+              flexBasis: "auto",
+              minHeight: 0,
+              paddingTop: M.bodyPaddingY,
+              paddingBottom: M.bodyPaddingY,
+              backgroundColor: C.panelBg,
+              pointerEvents: "auto"
+            },
+            children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: items.map((item) => renderItem(item, 1)) })
+          }
+        )
+      ]
+    }
+  );
+});
+var SPage = forwardRef(function SPage2({ className, style, children, ...rest }, ref) {
+  const layout = useContext(SLayoutContext);
+  const gridStyle = layout?.header === "full" ? { gridColumn: 2, gridRow: 2 } : void 0;
+  return /* @__PURE__ */ 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 },
@@ -5701,7 +6109,7 @@ var SSelect = forwardRef(function SSelect2({
               event.preventDefault();
               triggerRef.current?.focus();
             },
-            className: "rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] py-[4px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+            className: "rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
             style: {
               ...dropdownWidth ? { width: dropdownWidth } : {},
               maxWidth: maxDropdownWidth
@@ -5752,6 +6160,10 @@ var SSelect = forwardRef(function SSelect2({
                       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
                         );
@@ -5800,6 +6212,7 @@ function ItemList({
         ),
         style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: 12 },
         onMouseEnter: () => onHoverValue("__select_all__"),
+        onMouseLeave: () => onHoverValue(null),
         onClick: onSelectAll,
         children: [
           /* @__PURE__ */ jsx(
@@ -5858,10 +6271,13 @@ function ItemList({
             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)]",
-            activeClass
+            // 비활성 항목은 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__ */ jsx(
@@ -6382,10 +6798,10 @@ var STable = 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__ */ 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__ */ jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
+                /* @__PURE__ */ 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__ */ jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
               ] }),
               isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-white/60", children: /* @__PURE__ */ jsx(SCircleProgress, { indeterminate: true }) })
             ]
@@ -9140,11 +9556,20 @@ var SChipInput = forwardRef(function SChipInput2({
                       style: { width: 1, height: 12, backgroundColor: "#E1E1E1" }
                     }
                   ),
-                  showMaxCount && /* @__PURE__ */ jsxs("span", { className: "s-chip-input__max-count text-12 text-(--cmp-chipInput-text-placeholder)", children: [
-                    "\uCD5C\uB300 ",
-                    maxCount,
-                    "\uAC1C"
-                  ] }),
+                  showMaxCount && /* @__PURE__ */ 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__ */ jsx(
                     STextLink,
                     {
@@ -9181,7 +9606,7 @@ var SChipInput = forwardRef(function SChipInput2({
                     onMouseDown: (e) => e.preventDefault(),
                     children: [
                       loading2 && /* @__PURE__ */ 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__ */ jsx("div", { className: "flex flex-wrap gap-8 p-12", children: items.map((item, i) => {
+                      !effectiveAutocomplete ? /* @__PURE__ */ 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__ */ jsx(
@@ -9381,6 +9806,6 @@ var SBarcodeInput = forwardRef(
   }
 );
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, ICONS, SActionModal, SBadge, SBarcodeInput, SButton, SCalendar, SCallout, SCard, SCheckbox, SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDropdownButton, SField, SFilePicker, SForm, SGhostButton, SGuide, SIcon, SInput, SKeyValueTable, SLinearProgress, SLoadingContainer, SLoadingModal, SLoadingViewport, SNumberInput, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSelect, SSwitch, STable, STabs, STag, STextLink, STextarea, SToast, SToastContainer, SToggle, STooltip, TAG_COLORS, TAG_SHAPES, TAG_SIZES, buttonPreset, cn, isColorKey, loading, resolveColor };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, ICONS, SActionModal, SBadge, SBarcodeInput, SButton, SCalendar, SCallout, SCard, SCheckbox, SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDropdownButton, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SLoadingContainer, SLoadingModal, SLoadingViewport, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSelect, SSwitch, STable, STabs, STag, STextLink, STextarea, SToast, SToastContainer, SToggle, STooltip, TAG_COLORS, TAG_SHAPES, TAG_SIZES, buttonPreset, cn, findGnbAncestors, isColorKey, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map