sellmate-design-system-react 9.0.0-beta.29 → 9.0.0-beta.30

package/dist/index.cjs

@@ -3762,13 +3762,20 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
           "relative flex w-full items-center gap-(--cmp-listDraggableItem-gap) overflow-hidden px-(--cmp-listDraggableItem-paddingX)",
           titleTypo,
           disabled ? "bg-(--cmp-listDraggableItem-bg-default) text-(--sys-color-disabled-text)" : selected ? "bg-(--cmp-listDraggableItem-bg-selected) text-(--cmp-listDraggableItem-text-selected)" : "bg-(--cmp-listDraggableItem-bg-default) text-(--cmp-listDraggableItem-text-default)",
-          !disabled && !selected && !dragging && "hover:bg-(--cmp-listDraggableItem-bg-hover)",
+          !disabled && !selected && !dragging && cn(
+            "hover:bg-(--cmp-listDraggableItem-bg-hover)",
+            // 리스트가 드래그 중이면(SDraggableList 가 data-drag-active 를 붙인다) hover 를 무효화한다.
+            "[[data-drag-active]_&]:hover:bg-(--cmp-listDraggableItem-bg-default)"
+          ),
           // 높이는 세로 패딩과 내용이 정한다 — 항목에 높이를 못 박지 않는다 (SListItem 과 동일)
           paddingYClass,
           // 항목 사이 구분선은 리스트가 그린다.
           bordered && cn(
             "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
-            !disabled && !selected && !dragging && "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
+            !disabled && !selected && !dragging && cn(
+              "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
+              "[[data-drag-active]_&]:hover:border-(--cmp-listDraggableItem-border-default)"
+            ),
             !disabled && selected && !dragging && "border-(--cmp-listDraggableItem-bordered-border-selected) bg-(--cmp-listDraggableItem-bordered-bg-selected)",
             !disabled && selected && dragging && "border-(--cmp-listDraggableItem-bordered-dragging-border-color) bg-(--cmp-listDraggableItem-bordered-dragging-bg)"
           ),
@@ -3796,6 +3803,7 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
               className: cn(
                 "flex size-[24px] shrink-0 select-none items-center justify-center rounded-[4px]",
                 disabled ? "cursor-not-allowed opacity-0" : "cursor-grab hover:bg-black/5 active:cursor-grabbing",
+                !disabled && !dragging && "[[data-drag-active]_&]:hover:bg-transparent",
                 dragging && "bg-black/5",
                 dragHandleProps?.className
               ),
@@ -4252,7 +4260,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(
-    (item2, index) => setDepth(item2, clampDepth(getDepth(item2, fromIndex + index) + depthDelta, maxDepth))
+    (item3, index) => setDepth(item3, clampDepth(getDepth(item3, fromIndex + index) + depthDelta, maxDepth))
   ) : movedItems;
   return [
     ...remainingItems.slice(0, insertionIndex),
@@ -4300,7 +4308,7 @@ function SDraggableListInner({
     setDropTarget({ index, intent: "before" });
   }, []);
   const readDepth = react.useCallback(
-    (item2, index) => clampDepth(getDepth?.(item2, index) ?? 1, maxDepth),
+    (item3, index) => clampDepth(getDepth?.(item3, index) ?? 1, maxDepth),
     [getDepth, maxDepth]
   );
   react.useEffect(() => {
@@ -4335,8 +4343,8 @@ function SDraggableListInner({
           nextDropTarget = ratio < 0.5 ? { index, intent: "before" } : { index, intent: "after" };
           break;
         }
-        const item2 = items[index];
-        const canHaveChildren = (getCanHaveChildren?.(item2, index) ?? true) && readDepth(item2, index) < maxDepth;
+        const item3 = items[index];
+        const canHaveChildren = (getCanHaveChildren?.(item3, index) ?? true) && readDepth(item3, index) < maxDepth;
         if (ratio < 0.25) {
           nextDropTarget = { index, intent: "before" };
         } else if (ratio > 0.75 || !canHaveChildren) {
@@ -4399,6 +4407,7 @@ function SDraggableListInner({
   const currentDropIntent = dragContext ? void 0 : dropTarget?.intent;
   const isDropTarget = dragContext ? groupDrop?.group === dragGroup && groupDrop?.listId === listId : draggingIndex != null;
   const showEmptyDrop = Boolean(dragContext && isDropTarget && items.length === 0);
+  const dragActive = dragContext ? groupDragging?.group === dragGroup : draggingIndex != null;
   const beforeIndicatorStyle = (depth) => ({
     borderTop: "2px solid var(--sys-color-fg-accentLight)",
     left: getIndicatorOffset(depth),
@@ -4432,12 +4441,13 @@ function SDraggableListInner({
       ...rest,
       useGap,
       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-fg-accentLight) before:content-['']" : ""}`,
+      "data-drag-active": dragActive || void 0,
       "data-draggable-group": dragContext ? dragGroup : void 0,
       "data-draggable-list-id": dragContext ? listId : void 0,
-      children: items.map((item2, index) => {
-        const itemKey = getKey(item2, index);
-        const disabled = (getDisabled?.(item2, index) ?? false) || isDescendant(items, index, draggedSubtreeStart, depthEnabled ? readDepth : void 0);
-        const depth = depthEnabled ? readDepth(item2, index) : 1;
+      children: items.map((item3, index) => {
+        const itemKey = getKey(item3, index);
+        const disabled = (getDisabled?.(item3, index) ?? false) || isDescendant(items, index, draggedSubtreeStart, depthEnabled ? readDepth : void 0);
+        const depth = depthEnabled ? readDepth(item3, index) : 1;
         const showBefore = isDropTarget && currentDropIndex === index && (dragContext || currentDropIntent === "before");
         const showInside = isDropTarget && currentDropIndex === index && !dragContext && depthEnabled && currentDropIntent === "inside";
         const showAfter = isDropTarget && (dragContext ? currentDropIndex === items.length && index === items.length - 1 : currentDropIndex === index && currentDropIntent === "after");
@@ -4491,7 +4501,7 @@ function SDraggableListInner({
                   }
                 }
               ),
-              renderItem(item2, index, {
+              renderItem(item3, index, {
                 onDragHandleMouseDown: (event) => {
                   if (disabled) return;
                   if (dragContext && dragGroup && listId) {
@@ -5416,7 +5426,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
 }, ref) {
   const [internalValue, setInternalValue] = react.useState(defaultValue ?? []);
   const [internalExpandedIds, setInternalExpandedIds] = react.useState(
-    defaultExpandedIds ?? items.filter((item2) => item2.children?.length).map((item2) => item2.id)
+    defaultExpandedIds ?? items.filter((item3) => item3.children?.length).map((item3) => item3.id)
   );
   const currentValue = value ?? internalValue;
   const currentExpandedIds = expandedIds ?? internalExpandedIds;
@@ -7906,12 +7916,12 @@ function SDrawer({
     return () => window.removeEventListener("resize", sync);
   }, [rendered]);
   react.useEffect(() => {
-    const panel = panelRef.current;
-    if (!resizable || !rendered || !panel || typeof ResizeObserver === "undefined") return;
+    const panel2 = panelRef.current;
+    if (!resizable || !rendered || !panel2 || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(
-      () => setMeasuredWidth(Math.round(panel.getBoundingClientRect().width))
+      () => setMeasuredWidth(Math.round(panel2.getBoundingClientRect().width))
     );
-    observer.observe(panel);
+    observer.observe(panel2);
     return () => observer.disconnect();
   }, [resizable, rendered]);
   react.useEffect(() => {
@@ -7973,13 +7983,13 @@ function SDrawer({
   };
   const handleResizeStart = (event) => {
     if (typeof document === "undefined") return;
-    const panel = panelRef.current;
-    if (!panel) return;
+    const panel2 = panelRef.current;
+    if (!panel2) return;
     event.preventDefault();
     event.stopPropagation();
     event.currentTarget.focus();
     const startX = event.clientX;
-    const startWidth = panel.getBoundingClientRect().width;
+    const startWidth = panel2.getBoundingClientRect().width;
     const { min, max } = resizeBounds();
     let latest = startWidth;
     const { body } = document;
@@ -8007,9 +8017,9 @@ function SDrawer({
     setResizing(true);
   };
   const handleResizeKeyDown = (event) => {
-    const panel = panelRef.current;
-    if (!panel) return;
-    const startWidth = panel.getBoundingClientRect().width;
+    const panel2 = panelRef.current;
+    if (!panel2) return;
+    const startWidth = panel2.getBoundingClientRect().width;
     const { min, max } = resizeBounds();
     const step = RESIZE_KEY_STEP[event.shiftKey ? "large" : "normal"];
     let next = null;
@@ -8753,17 +8763,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((item2) => item2.value === value)) return value;
+  if (items.some((item3) => item3.value === value)) return value;
   return findGnbAncestors(items, value)[0];
 }
 function findGnbSiblingValues(items, value) {
   const walk = (list) => {
-    if (list.some((item2) => item2.value === value)) {
-      return list.filter((item2) => item2.value !== value).map((item2) => item2.value);
+    if (list.some((item3) => item3.value === value)) {
+      return list.filter((item3) => item3.value !== value).map((item3) => item3.value);
     }
-    for (const item2 of list) {
-      if (item2.children) {
-        const found = walk(item2.children);
+    for (const item3 of list) {
+      if (item3.children) {
+        const found = walk(item3.children);
         if (found) return found;
       }
     }
@@ -8773,10 +8783,10 @@ function findGnbSiblingValues(items, value) {
 }
 function findGnbAncestors(items, value) {
   const walk = (list, trail) => {
-    for (const item2 of list) {
-      if (item2.value === value) return trail;
-      if (item2.children) {
-        const found = walk(item2.children, [...trail, item2.value]);
+    for (const item3 of list) {
+      if (item3.value === value) return trail;
+      if (item3.children) {
+        const found = walk(item3.children, [...trail, item3.value]);
         if (found) return found;
       }
     }
@@ -8786,20 +8796,20 @@ function findGnbAncestors(items, value) {
 }
 function findGnbDescendantBranchValues(items, value) {
   const find = (list) => {
-    for (const item2 of list) {
-      if (item2.value === value) return item2;
-      if (item2.children) {
-        const found = find(item2.children);
+    for (const item3 of list) {
+      if (item3.value === value) return item3;
+      if (item3.children) {
+        const found = find(item3.children);
         if (found) return found;
       }
     }
     return void 0;
   };
   const collect = (list, acc) => {
-    for (const item2 of list) {
-      if (item2.children && item2.children.length > 0) {
-        acc.push(item2.value);
-        collect(item2.children, acc);
+    for (const item3 of list) {
+      if (item3.children && item3.children.length > 0) {
+        acc.push(item3.value);
+        collect(item3.children, acc);
       }
     }
     return acc;
@@ -8807,6 +8817,7 @@ function findGnbDescendantBranchValues(items, value) {
   const target = find(items);
   return target?.children ? collect(target.children, []) : [];
 }
+var SGnbSystemContext = /* @__PURE__ */ react.createContext(null);
 var LABEL_TIP_HIDE_DELAY_MS = 100;
 var DEPTH_PADDING_LEFT = (M, depth) => depth === 1 ? M.depth1PaddingLeft : depth === 2 ? M.depth2PaddingLeft : M.depth3PaddingLeft;
 var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
@@ -8829,6 +8840,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   menuFooter,
   foldedTop,
   foldedFooter,
+  system,
   resizable = false,
   menuWidth: menuWidthProp,
   defaultMenuWidth,
@@ -8842,7 +8854,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((item2) => !item2.children || item2.children.length === 0);
+  const railHasLeaf = useRail && items.some((item3) => !item3.children || item3.children.length === 0);
   const header = railHasLeaf ? "full" : headerProp ?? layout?.header ?? "fix";
   const H = GNB_HEADER[header];
   const M = GNB_MENU[type];
@@ -8885,13 +8897,13 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     labelTipHideRef.current = setTimeout(() => setLabelTip(null), LABEL_TIP_HIDE_DELAY_MS);
   };
   react.useEffect(() => cancelLabelTipHide, []);
-  const rowHoverProps = (item2) => ({
+  const rowHoverProps = (item3) => ({
     onMouseEnter: (event) => {
-      setHoveredKey(item2.value);
-      showLabelTipIfTruncated(event.currentTarget, item2.label);
+      setHoveredKey(item3.value);
+      showLabelTipIfTruncated(event.currentTarget, item3.label);
     },
     onMouseLeave: () => {
-      setHoveredKey((prev) => prev === item2.value ? null : prev);
+      setHoveredKey((prev) => prev === item3.value ? null : prev);
       startLabelTipHide();
     }
   });
@@ -8917,7 +8929,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   }, [items, value]);
   react.useEffect(() => {
     setActiveRail(
-      (prev) => prev !== void 0 && items.some((item2) => item2.value === prev) ? prev : items[0]?.value
+      (prev) => prev !== void 0 && items.some((item3) => item3.value === prev) ? prev : items[0]?.value
     );
   }, [items]);
   const toggleExpand = (key) => {
@@ -8934,33 +8946,33 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
       return next;
     });
   };
-  const handleItemClick = (item2) => {
-    if (item2.disabled) return;
-    if (item2.children && item2.children.length > 0) {
-      toggleExpand(item2.value);
+  const handleItemClick = (item3) => {
+    if (item3.disabled) return;
+    if (item3.children && item3.children.length > 0) {
+      toggleExpand(item3.value);
       return;
     }
-    onValueChange?.(item2.value);
+    onValueChange?.(item3.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 handleRailClick = (item3) => {
+    if (item3.disabled) return;
+    setActiveRail(item3.value);
+    onRailChange?.(item3.value);
+    if (!item3.children || item3.children.length === 0) onValueChange?.(item3.value);
   };
   const handleFoldToggle = () => {
     const next = !folded;
     onFoldChange?.(next);
     if (foldedProp === void 0) layout?.setFolded(next);
   };
-  const renderRailItem = (item2) => {
-    const isActive = item2.value === activeRail;
-    const isHovered = hoveredKey === item2.value && !item2.disabled;
+  const renderRailItem = (item3) => {
+    const isActive = item3.value === activeRail;
+    const isHovered = hoveredKey === item3.value && !item3.disabled;
     return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
-        disabled: item2.disabled,
+        disabled: item3.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: {
@@ -8975,31 +8987,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: item2.disabled ? 0.4 : 1,
-          cursor: item2.disabled ? "not-allowed" : "pointer"
+          opacity: item3.disabled ? 0.4 : 1,
+          cursor: item3.disabled ? "not-allowed" : "pointer"
         },
-        onClick: () => handleRailClick(item2),
-        ...rowHoverProps(item2),
+        onClick: () => handleRailClick(item3),
+        ...rowHoverProps(item3),
         children: [
-          item2.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item2.icon, size: GNB_RAIL.itemIcon, className: "shrink-0" }),
+          item3.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item3.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: item2.label
+              children: item3.label
             }
           )
         ]
       }
-    ) }, item2.value);
+    ) }, item3.value);
   };
-  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 renderItem = (item3, depth, branchHasIcon = false) => {
+    const hasChildren = !!(item3.children && item3.children.length > 0);
+    const isSelected = !hasChildren && item3.value === value;
+    const isExpanded = expandedKeys.has(item3.value);
+    const isHovered = hoveredKey === item3.value && !item3.disabled;
+    const iconBranch = depth === 1 ? !!item3.icon : branchHasIcon;
     const itemStyle = {
       gap: M.itemGap,
       paddingTop: M.itemPaddingY,
@@ -9016,8 +9028,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: item2.disabled ? 0.4 : 1,
-      cursor: item2.disabled ? "not-allowed" : "pointer"
+      opacity: item3.disabled ? 0.4 : 1,
+      cursor: item3.disabled ? "not-allowed" : "pointer"
     };
     return (
       // li 를 flex-col 로 둬야 버튼이 좌우 마진만큼 안쪽으로 들어가고,
@@ -9027,18 +9039,18 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
           "button",
           {
             type: "button",
-            disabled: item2.disabled,
+            disabled: item3.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(item2),
-            ...rowHoverProps(item2),
+            onClick: () => handleItemClick(item3),
+            ...rowHoverProps(item3),
             children: [
-              depth === 1 && item2.icon && /* @__PURE__ */ jsxRuntime.jsx(
+              depth === 1 && item3.icon && /* @__PURE__ */ jsxRuntime.jsx(
                 SIcon,
                 {
-                  name: item2.icon,
+                  name: item3.icon,
                   size: M.depth1Icon,
                   color: isSelected ? C.itemColorActive : C.itemIcon,
                   className: "shrink-0"
@@ -9058,17 +9070,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: item2.label
+                    children: item3.label
                   }
                 )
               ] }),
-              item2.tag !== void 0 && item2.tag !== "" && /* @__PURE__ */ jsxRuntime.jsx(
+              item3.tag !== void 0 && item3.tag !== "" && /* @__PURE__ */ jsxRuntime.jsx(
                 STag,
                 {
                   shape: "square",
                   size: "xs",
-                  color: item2.tagColor ?? "blue",
-                  label: item2.tag,
+                  color: item3.tagColor ?? "blue",
+                  label: item3.tag,
                   className: "shrink-0"
                 }
               ),
@@ -9101,16 +9113,16 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
                   visibility: isExpanded ? "visible" : "hidden",
                   transition: `visibility 0s linear ${isExpanded ? "0s" : `${GNB_EXPAND_MS}ms`}`
                 },
-                children: item2.children.map((child) => renderItem(child, depth + 1, iconBranch))
+                children: item3.children.map((child) => renderItem(child, depth + 1, iconBranch))
               }
             )
           }
         )
-      ] }, item2.value)
+      ] }, item3.value)
     );
   };
   const railItems = useRail ? items : [];
-  const menuItems = useRail ? items.find((item2) => item2.value === activeRail)?.children ?? [] : items;
+  const menuItems = useRail ? items.find((item3) => item3.value === activeRail)?.children ?? [] : items;
   const showMenu = !useRail || menuItems.length > 0;
   const [uncontrolledMenuWidth, setUncontrolledMenuWidth] = react.useState(
     () => defaultMenuWidth ?? GNB_MENU_WIDTH
@@ -9300,6 +9312,14 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     },
     "topContent"
   ) : null;
+  const systemMenuContext = react.useMemo(
+    () => ({ color, folded: false }),
+    [color]
+  );
+  const systemFoldedContext = react.useMemo(
+    () => ({ color, folded: true }),
+    [color]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -9417,10 +9437,11 @@ 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((item2) => renderItem(item2, 1)) })
+                              children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item3) => renderItem(item3, 1)) })
                             }
                           ),
-                          menuFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: menuFooter })
+                          menuFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: menuFooter }),
+                          system && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SGnbSystemContext.Provider, { value: systemMenuContext, children: system }) })
                         ]
                       }
                     )
@@ -9448,7 +9469,295 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
             }
           ) })
         ] }),
-        railFolded && foldedFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-center mb-[24px]", children: foldedFooter })
+        railFolded && foldedFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-center mb-[24px]", children: foldedFooter }),
+        railFolded && system && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SGnbSystemContext.Provider, { value: systemFoldedContext, children: system }) })
+      ]
+    }
+  );
+});
+
+// src/components/SGnbSystem/gnbSystem.config.ts
+var GNB_SYSTEM_COLORS = ["light", "dark"];
+var panel = (p) => `var(--cmp-gnb-system-panel-${p})`;
+var domain = (p) => `var(--cmp-gnb-system-domainTag-${p})`;
+var item2 = (p) => `var(--cmp-gnb-system-item-${p})`;
+var alert = (p) => `var(--cmp-gnb-system-alertButton-${p})`;
+var GNB_SYSTEM_COLOR_CONFIG = {
+  light: {
+    bg: panel("light-bg"),
+    border: panel("light-border"),
+    divider: panel("divider-color-light"),
+    domainBg: domain("light-bg"),
+    domainText: domain("light-text"),
+    alertIcon: alert("icon-color-notification-light"),
+    alertCount: alert("count-color-light"),
+    alertHoverBg: alert("bg-notificationHover-light")
+  },
+  dark: {
+    bg: panel("dark-bg"),
+    // dark 는 패널 배경(#004177)이 GNB 배경(#001B39)과 달라 그 차이만으로 경계가 읽힌다.
+    // 시안도 dark 패널 위에 선을 긋지 않으므로 --cmp-gnb-system-panel-dark-border 는 쓰지 않는다.
+    // (light 는 패널 배경이 GNB 배경과 같은 흰색이라 이 선이 유일한 경계다.)
+    border: void 0,
+    divider: panel("divider-color-dark"),
+    domainBg: domain("dark-bg"),
+    domainText: domain("dark-text"),
+    alertIcon: alert("icon-color-notification-dark"),
+    alertCount: alert("count-color-dark"),
+    // dark 에는 알림 hover 배경 토큰이 없다 → 행 기본 hover 를 그대로 쓴다.
+    alertHoverBg: void 0
+  }
+};
+var GNB_SYSTEM_LAYOUT = {
+  /** 펼친 패널의 안쪽 여백 */
+  padding: "var(--cmp-gnb-system-project-padding)",
+  /** 접힌(min) 패널의 안쪽 여백 */
+  foldedPadding: "var(--cmp-gnb-system-min-padding)",
+  /**
+   * 패널이 쌓는 블록 사이 간격. 알림↔설정 사이의 가로 간격도 전용 토큰이 없어 이 값을 쓴다
+   * (시안에서 두 간격이 같다).
+   */
+  gap: panel("gap"),
+  /** 행 높이 */
+  itemHeight: item2("height"),
+  /** 행 라운드 */
+  itemRadius: item2("radius"),
+  /** 아이콘 프레임 한 변 */
+  iconFrame: item2("icon-frame"),
+  /** 아이콘 글리프 크기 */
+  iconGlyph: item2("icon-glyph"),
+  /** 아이콘 프레임 라운드 */
+  iconRadius: item2("icon-radius"),
+  /** 아이콘 프레임 ↔ 라벨 간격 */
+  iconLabelGap: item2("iconLabelGap"),
+  /** 알림 버튼 좌우 여백 */
+  alertPaddingX: alert("paddingX"),
+  /** 설정 버튼 좌우 여백 */
+  settingPaddingX: "var(--cmp-gnb-system-setting-paddingX)",
+  /** 도메인 태그 */
+  domainPaddingX: domain("paddingX"),
+  domainPaddingY: domain("paddingY"),
+  domainRadius: domain("radius")
+};
+var GNB_SYSTEM_ALERT_DOT_SIZE = 6;
+var GNB_SYSTEM_ALERT_LABEL = "\uC54C\uB9BC";
+var GNB_SYSTEM_SETTING_LABEL = "\uC124\uC815";
+function TokenIcon2({ name, size }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name, size: "100%", style: { width: size, height: size } });
+}
+function SystemButton({
+  color,
+  icon,
+  label,
+  ariaLabel,
+  paddingX,
+  iconColor,
+  hoverBg,
+  count,
+  dot,
+  accentColor,
+  stretch,
+  onClick
+}) {
+  const c = SYSTEM_ACTION_BUTTON_COLOR_CONFIG[color];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": label ? void 0 : ariaLabel,
+      onClick,
+      className: cn(
+        "group box-border flex cursor-pointer items-center border-none bg-(--gsb-bg) text-(--gsb-text) transition-colors hover:bg-(--gsb-bg-hover)",
+        stretch ? "min-w-0 flex-1" : "shrink-0",
+        label ? "text-left" : "justify-center"
+      ),
+      style: {
+        "--gsb-bg": c.bg,
+        "--gsb-bg-hover": hoverBg ?? c.bgHover,
+        "--gsb-icon-bg": c.iconBg,
+        "--gsb-icon-bg-hover": c.iconBgHover,
+        "--gsb-icon": iconColor ?? c.iconGlyph,
+        // 강조색을 받은 알림은 hover 해도 그 색을 유지한다 — 색이 곧 "알림이 있다" 는 표시다.
+        "--gsb-icon-hover": iconColor ?? c.iconGlyphHover,
+        "--gsb-text": c.text,
+        "minHeight": GNB_SYSTEM_LAYOUT.itemHeight,
+        "borderRadius": GNB_SYSTEM_LAYOUT.itemRadius,
+        "paddingLeft": paddingX,
+        "paddingRight": paddingX,
+        "gap": GNB_SYSTEM_LAYOUT.iconLabelGap
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "relative inline-flex shrink-0 items-center justify-center bg-(--gsb-icon-bg) text-(--gsb-icon) transition-colors group-hover:bg-(--gsb-icon-bg-hover) group-hover:text-(--gsb-icon-hover)",
+            style: { width: GNB_SYSTEM_LAYOUT.iconFrame, height: GNB_SYSTEM_LAYOUT.iconFrame, borderRadius: GNB_SYSTEM_LAYOUT.iconRadius },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TokenIcon2, { name: icon, size: GNB_SYSTEM_LAYOUT.iconGlyph }),
+              dot && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "absolute",
+                  style: {
+                    top: 1,
+                    right: -GNB_SYSTEM_ALERT_DOT_SIZE / 2,
+                    width: GNB_SYSTEM_ALERT_DOT_SIZE,
+                    height: GNB_SYSTEM_ALERT_DOT_SIZE,
+                    borderRadius: "50%",
+                    backgroundColor: accentColor
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-semibold min-w-0 flex-1 truncate", children: label }),
+        count != null && count > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-bold shrink-0", style: { color: accentColor }, children: count.toLocaleString() })
+      ]
+    }
+  );
+}
+var SGnbSystem = /* @__PURE__ */ react.forwardRef(function SGnbSystem2({
+  color: colorProp,
+  folded: foldedProp,
+  actions,
+  domain: domain2,
+  alert: alert2,
+  setting,
+  account,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const gnb2 = react.useContext(SGnbSystemContext);
+  const color = colorProp ?? gnb2?.color ?? "light";
+  const folded = foldedProp ?? gnb2?.folded ?? false;
+  const c = GNB_SYSTEM_COLOR_CONFIG[color];
+  const hasActions = (actions?.length ?? 0) > 0;
+  const hasDomain = domain2 != null;
+  const hasUserBlock = Boolean(alert2 || setting || account);
+  const alertCount = alert2?.count ?? 0;
+  const notified = alertCount > 0;
+  const alertLabel = alert2?.label ?? GNB_SYSTEM_ALERT_LABEL;
+  const settingLabel = setting?.label ?? GNB_SYSTEM_SETTING_LABEL;
+  const alertButton = alert2 && /* @__PURE__ */ jsxRuntime.jsx(
+    SystemButton,
+    {
+      color,
+      icon: notified ? "alert" : "bell",
+      label: folded ? void 0 : alertLabel,
+      ariaLabel: alertLabel,
+      paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
+      iconColor: notified ? c.alertIcon : void 0,
+      hoverBg: notified ? c.alertHoverBg : void 0,
+      count: folded ? void 0 : alertCount,
+      dot: folded && notified,
+      accentColor: c.alertCount,
+      stretch: !folded,
+      onClick: alert2.onClick
+    }
+  );
+  const panelStyle = {
+    backgroundColor: c.bg,
+    // 색에 따라 경계선이 없을 수 있다 — 배경 차이만으로 경계가 읽히는 dark 가 그렇다.
+    borderTop: c.border ? `1px solid ${c.border}` : void 0,
+    padding: folded ? GNB_SYSTEM_LAYOUT.foldedPadding : GNB_SYSTEM_LAYOUT.padding,
+    ...style
+  };
+  if (folded) {
+    if (!alert2 && !account) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn("box-border flex w-full flex-col", className),
+        style: panelStyle,
+        "data-color": color,
+        "data-folded": "",
+        ...rest,
+        children: [
+          alertButton,
+          account && /* @__PURE__ */ jsxRuntime.jsx(
+            SystemButton,
+            {
+              color,
+              icon: "user",
+              ariaLabel: account.label ?? "account",
+              paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
+              onClick: account.onClick
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (!hasActions && !hasDomain && !hasUserBlock) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn("box-border flex w-full flex-col", className),
+      style: { ...panelStyle, gap: GNB_SYSTEM_LAYOUT.gap },
+      "data-color": color,
+      ...rest,
+      children: [
+        actions?.map(({ value, ...action2 }, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          SSystemActionButton,
+          {
+            color,
+            ...action2
+          },
+          value ?? index
+        )),
+        hasActions && (hasDomain || hasUserBlock) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px shrink-0", style: { backgroundColor: c.divider } }),
+        domain2 != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "typo-body-sm-medium box-border w-full truncate text-center",
+            style: {
+              paddingInline: GNB_SYSTEM_LAYOUT.domainPaddingX,
+              paddingBlock: GNB_SYSTEM_LAYOUT.domainPaddingY,
+              borderRadius: GNB_SYSTEM_LAYOUT.domainRadius,
+              backgroundColor: c.domainBg,
+              color: c.domainText
+            },
+            children: domain2
+          }
+        ),
+        hasUserBlock && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          (alert2 || setting) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: GNB_SYSTEM_LAYOUT.gap }, children: [
+            alertButton,
+            alert2 && setting && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "h-sd-16 w-px shrink-0",
+                style: { backgroundColor: c.divider },
+                "aria-hidden": true
+              }
+            ),
+            setting && /* @__PURE__ */ jsxRuntime.jsx(
+              SystemButton,
+              {
+                color,
+                icon: "setting",
+                label: settingLabel,
+                ariaLabel: settingLabel,
+                paddingX: GNB_SYSTEM_LAYOUT.settingPaddingX,
+                stretch: !alert2,
+                onClick: setting.onClick
+              }
+            )
+          ] }),
+          account && /* @__PURE__ */ jsxRuntime.jsx(
+            SSystemActionButton,
+            {
+              color,
+              type: "account",
+              label: account.label,
+              onClick: account.onClick
+            }
+          )
+        ] })
       ]
     }
   );
@@ -10068,19 +10377,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(item2, index) {
-  return item2.value ?? String(index + 1);
+function getItemValue(item3, index) {
+  return item3.value ?? String(index + 1);
 }
 function groupAdjacentItems(items) {
   return items.reduce(
-    (groups, item2, index) => {
-      const currentGroup = item2.group;
+    (groups, item3, index) => {
+      const currentGroup = item3.group;
       const previous = groups[groups.length - 1];
       if (currentGroup && previous?.group === currentGroup) {
-        previous.items.push(item2);
+        previous.items.push(item3);
         return groups;
       }
-      groups.push({ group: currentGroup, startIndex: index, items: [item2] });
+      groups.push({ group: currentGroup, startIndex: index, items: [item3] });
       return groups;
     },
     []
@@ -10110,15 +10419,15 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
   const verticalItemRefs = react.useRef([]);
   const activeIndex = Math.max(
     0,
-    items.findIndex((item2, index) => getItemValue(item2, index) === value)
+    items.findIndex((item3, index) => getItemValue(item3, index) === value)
   );
   const lastCompletedIndex = items.reduce(
-    (lastIndex, item2, index) => item2.completed === true ? index : lastIndex,
+    (lastIndex, item3, index) => item3.completed === true ? index : lastIndex,
     -1
   );
   const resolvedClickableIndex = lastCompletedIndex + 1;
   const [visitedMaxIndex, setVisitedMaxIndex] = react.useState(activeIndex);
-  const firstErrorIndex = items.findIndex((item2) => item2.error === true);
+  const firstErrorIndex = items.findIndex((item3) => item3.error === true);
   react.useImperativeHandle(
     ref,
     () => ({
@@ -10146,18 +10455,18 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
       transform: `translateY(${activeItem.offsetTop}px)`
     });
   }, [activeIndex, vertical, items]);
-  const getState = (item2, index) => {
+  const getState = (item3, index) => {
     if (index === activeIndex) return "active";
-    if (item2.completed != null) return item2.completed ? "completed" : "default";
+    if (item3.completed != null) return item3.completed ? "completed" : "default";
     return "default";
   };
-  const emitValueChange = (item2, index) => {
-    onValueChange?.(getItemValue(item2, index), item2, index);
+  const emitValueChange = (item3, index) => {
+    onValueChange?.(getItemValue(item3, index), item3, index);
   };
   const isWithinClickableIndex = (index) => index <= resolvedClickableIndex;
-  const renderStepContent = (item2, index, options = {}) => {
+  const renderStepContent = (item3, index, options = {}) => {
     const { isVertical = false, roleListItem = true, hovered = false } = options;
-    const state2 = getState(item2, index);
+    const state2 = getState(item3, index);
     const isHorizontalCompleted = !isVertical && state2 === "completed";
     const isVerticalCompleted = isVertical && state2 === "completed";
     const isVerticalLastActive = isVertical && state2 === "default" && index === visitedMaxIndex;
@@ -10232,12 +10541,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: item2.label })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: item3.label })
         ]
       }
     );
   };
-  const renderClickableStepContent = (item2, index, isVertical = false) => {
+  const renderClickableStepContent = (item3, index, isVertical = false) => {
     const isDisabled = !isWithinClickableIndex(index);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -10250,9 +10559,9 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
         ),
         style: { font: "inherit", color: "inherit" },
         onClick: () => {
-          if (!isDisabled) emitValueChange(item2, index);
+          if (!isDisabled) emitValueChange(item3, index);
         },
-        children: renderStepContent(item2, index, { isVertical, roleListItem: false })
+        children: renderStepContent(item3, index, { isVertical, roleListItem: false })
       }
     );
   };
@@ -10311,10 +10620,10 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                       children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: group.group })
                     }
                   ),
-                  group.items.map((item2, itemIndex) => {
+                  group.items.map((item3, itemIndex) => {
                     const index = group.startIndex + itemIndex;
-                    const state2 = getState(item2, index);
-                    const itemValue = getItemValue(item2, index);
+                    const state2 = getState(item3, index);
+                    const itemValue = getItemValue(item3, index);
                     const canClickItem = isClickable && isWithinClickableIndex(index);
                     const isDisabled = !canClickItem;
                     const isHovered = hoveredIndex === index && canClickItem && state2 !== "active";
@@ -10332,12 +10641,12 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                     const handleMouseLeave = () => {
                       setHoveredIndex((current) => current === index ? null : current);
                     };
-                    const stepContent = renderStepContent(item2, index, {
+                    const stepContent = renderStepContent(item3, index, {
                       isVertical: true,
                       roleListItem: false,
                       hovered: isHovered
                     });
-                    const errorBadge = item2.error ? /* @__PURE__ */ jsxRuntime.jsx(
+                    const errorBadge = item3.error ? /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -10352,7 +10661,7 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                     ) : null;
                     const isTooltipHovered = tooltipHoverValue === itemValue;
                     const isCustomTooltipOpen = customTooltipOpen && index === firstErrorIndex;
-                    const showTooltip = item2.error === true && (isTooltipHovered || isCustomTooltipOpen);
+                    const showTooltip = item3.error === true && (isTooltipHovered || isCustomTooltipOpen);
                     const handleTooltipMouseEnter = () => setTooltipHoverValue(itemValue);
                     const handleTooltipMouseLeave = () => {
                       setTooltipHoverValue((current) => current === itemValue ? null : current);
@@ -10376,7 +10685,7 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                             onMouseEnter: handleTooltipMouseEnter,
                             onMouseLeave: handleTooltipMouseLeave,
                             onClick: isClickable ? () => {
-                              if (!isDisabled) emitValueChange(item2, index);
+                              if (!isDisabled) emitValueChange(item3, index);
                             } : void 0,
                             children: [
                               stepContent,
@@ -10408,13 +10717,13 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
                               {
                                 type: "button",
                                 disabled: isDisabled,
-                                "aria-label": item2.label,
+                                "aria-label": item3.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(item2, index);
+                                  if (!isDisabled) emitValueChange(item3, index);
                                 }
                               }
                             ),
@@ -10465,9 +10774,9 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
         lineHeight: config.lineHeight,
         ...style
       },
-      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);
+      children: items.map((item3, index) => {
+        const state2 = getState(item3, index);
+        const content = isClickable ? /* @__PURE__ */ jsxRuntime.jsx("span", { role: "listitem", "aria-current": state2 === "active" ? "step" : void 0, children: renderClickableStepContent(item3, index) }) : renderStepContent(item3, index);
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
@@ -10501,7 +10810,7 @@ var SStepper = /* @__PURE__ */ react.forwardRef(function SStepper2({
               )
             ]
           },
-          getItemValue(item2, index)
+          getItemValue(item3, index)
         );
       })
     }
@@ -11052,7 +11361,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((item2) => item2.value != null && selectedSet.has(item2.value));
+    return navigableItems.findIndex((item3) => item3.value != null && selectedSet.has(item3.value));
   }, [navigableItems, selected]);
   selectedAnchorRef.current = selectedAnchorIndex;
   const triggerText = (() => {
@@ -11346,7 +11655,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                           setFocusedIndex(-1);
                           return;
                         }
-                        const index = navigableItems.findIndex((item2) => item2.key === key);
+                        const index = navigableItems.findIndex((item3) => item3.key === key);
                         if (index >= 0) setFocusedIndex(index);
                       }
                     }
@@ -13424,7 +13733,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((item2) => /* @__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((item3) => /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
               className: "inline-flex items-center gap-[var(--cmp-datepicker-calendar-legend-gap)]",
@@ -13433,14 +13742,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(item2.color) },
+                    style: { backgroundColor: resolveColor(item3.color) },
                     "aria-hidden": true
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: item2.label })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: item3.label })
               ]
             },
-            `${item2.color}|${item2.label}`
+            `${item3.color}|${item3.label}`
           )) })
         ] })
       ]
@@ -13996,7 +14305,8 @@ function RangeCalendar({
       if (e !== "" && d > e) return true;
     }
     if (maxRange && maxRange > 0 && start && !end) {
-      if (d < addDays(start, -maxRange) || d > addDays(start, maxRange)) return true;
+      const span = maxRange - 1;
+      if (d < addDays(start, -span) || d > addDays(start, span)) return true;
     }
     return false;
   };
@@ -16561,19 +16871,19 @@ function EditorToolbarBar({
     closeLinkEditor();
   };
   const visible = [];
-  for (const item2 of items) {
-    if (item2 === "image" && !onImageUpload) continue;
-    if (item2 === "|" && (visible.length === 0 || visible[visible.length - 1] === "|")) continue;
-    visible.push(item2);
+  for (const item3 of items) {
+    if (item3 === "image" && !onImageUpload) continue;
+    if (item3 === "|" && (visible.length === 0 || visible[visible.length - 1] === "|")) continue;
+    visible.push(item3);
   }
   while (visible.length > 0 && visible[visible.length - 1] === "|") visible.pop();
   const groups = [[]];
-  for (const item2 of visible) {
-    if (item2 === "|") groups.push([]);
-    else groups[groups.length - 1].push(item2);
+  for (const item3 of visible) {
+    if (item3 === "|") groups.push([]);
+    else groups[groups.length - 1].push(item3);
   }
-  const node = (item2) => {
-    switch (item2) {
+  const node = (item3) => {
+    switch (item3) {
       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(
@@ -16608,7 +16918,7 @@ function EditorToolbarBar({
               level
             ))
           ] }) })
-        ] }, item2);
+        ] }, item3);
       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: [
@@ -16647,7 +16957,7 @@ function EditorToolbarBar({
               ]
             }
           ) })
-        ] }, item2);
+        ] }, item3);
       case "bold":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
@@ -16659,7 +16969,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleBold().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconBold, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "italic":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16672,7 +16982,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleItalic().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconItalic, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "underline":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16685,7 +16995,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleUnderline().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconUnderline, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "strike":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16698,7 +17008,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleStrike().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconStrike, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "code":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16711,7 +17021,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleCode().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconCode, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "color":
         if (mobile)
@@ -16723,7 +17033,7 @@ function EditorToolbarBar({
               onClick: () => setMobileView("color"),
               children: /* @__PURE__ */ jsxRuntime.jsx(ColorIndicator, { color: off ? "currentColor" : activeColor, children: /* @__PURE__ */ jsxRuntime.jsx(IconTextColor, { size: ICON_SIZE }) })
             },
-            item2
+            item3
           );
         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 }) }) }) }),
@@ -16738,7 +17048,7 @@ function EditorToolbarBar({
               onClear: clearColor
             }
           ) }) })
-        ] }, item2);
+        ] }, item3);
       case "alignLeft":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
@@ -16750,7 +17060,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("left").run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconAlignLeft, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "alignCenter":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16763,7 +17073,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("center").run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconAlignCenter, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "alignRight":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16776,7 +17086,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("right").run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconAlignRight, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "alignJustify":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16789,7 +17099,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("justify").run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconAlignJustify, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "bulletList":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16802,7 +17112,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleBulletList().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconBulletList, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "orderedList":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16815,7 +17125,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleOrderedList().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconOrderedList, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "taskList":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16828,7 +17138,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleTaskList().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconTaskList, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "list": {
         const ListIcon = state2.orderedList ? IconOrderedList : state2.taskList ? IconTaskList : IconBulletList;
@@ -16873,7 +17183,7 @@ function EditorToolbarBar({
               }
             )
           ] }) })
-        ] }, item2);
+        ] }, item3);
       }
       case "blockquote":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16886,7 +17196,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleBlockquote().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconBlockquote, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "codeBlock":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16899,7 +17209,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleCodeBlock().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconCodeBlock, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "horizontalRule":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16910,7 +17220,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setHorizontalRule().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconHorizontalRule, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "link":
         if (mobile)
@@ -16923,7 +17233,7 @@ function EditorToolbarBar({
               onClick: () => setMobileView("link"),
               children: /* @__PURE__ */ jsxRuntime.jsx(IconLink, { size: ICON_SIZE })
             },
-            item2
+            item3
           );
         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 }) }) }),
@@ -16948,7 +17258,7 @@ function EditorToolbarBar({
               )
             }
           ) })
-        ] }, item2);
+        ] }, item3);
       case "image":
         return /* @__PURE__ */ jsxRuntime.jsxs(
           ToolbarButton,
@@ -16962,7 +17272,7 @@ function EditorToolbarBar({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] leading-[20px]", children: "\uC774\uBBF8\uC9C0" })
             ]
           },
-          item2
+          item3
         );
       case "table":
         return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -17083,7 +17393,7 @@ function EditorToolbarBar({
               ] }) })
             ]
           },
-          item2
+          item3
         );
       case "undo":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17094,7 +17404,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.undo().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconUndo, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       case "redo":
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17105,7 +17415,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.redo().run(),
             children: /* @__PURE__ */ jsxRuntime.jsx(IconRedo, { size: ICON_SIZE })
           },
-          item2
+          item3
         );
       default:
         return null;
@@ -17668,12 +17978,12 @@ var DEFAULT_DATE_RANGE_PRESETS = [
   {
     value: "last7",
     label: "\uC9C0\uB09C 7\uC77C",
-    resolve: () => [addDaysIso(todayIso(), -7), todayIso()]
+    resolve: () => [rangeStartIso(todayIso(), 7), todayIso()]
   },
   {
     value: "last30",
     label: "\uC9C0\uB09C 30\uC77C",
-    resolve: () => [addDaysIso(todayIso(), -30), todayIso()]
+    resolve: () => [rangeStartIso(todayIso(), 30), todayIso()]
   },
   { value: "custom", label: "\uC0AC\uC6A9\uC790 \uC9C0\uC815", custom: true }
 ];
@@ -17707,6 +18017,7 @@ var addDaysIso = (iso, n) => {
   const pad = (v) => String(v).padStart(2, "0");
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 };
+var rangeStartIso = (today, days) => addDaysIso(today, -(days - 1));
 var isInlineDateField = (field) => field.type === "datepicker-range" && field.radioButton === true && (field.presets?.length ?? 0) > 0;
 var getFieldPresets = (field) => {
   if (field.type === "datepicker-statistics") return field.presets ?? DEFAULT_PERIOD_PRESETS;
@@ -17729,7 +18040,7 @@ var getDefaultPeriodInputValue = (unit, maxRange) => {
   if (unit === "half") return "first";
   if (unit === "year") return today.slice(0, 4);
   const days = maxRange && maxRange > 0 ? maxRange : DEFAULT_CUSTOM_MAX_RANGE;
-  return [addDaysIso(today, -days), today];
+  return [rangeStartIso(today, days), today];
 };
 var createPeriodValue = (unit, maxRange) => ({
   unit,
@@ -17785,6 +18096,7 @@ var isAtResetTarget = (field, value) => {
 var isInlineField = (field) => isInlineDateField(field) || field.type === "custom";
 var isFixedField = (field) => field.fixed === true || field.required === true;
 var isAddableField = (field) => !isFixedField(field);
+var sameKeys = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
 var isGroupSatisfied = (group, values) => {
   if (!group.rule) return true;
   const keys = group.fields.map((f) => f.key);
@@ -17873,8 +18185,6 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   onValueChange,
   onFilterChange,
   onSearch,
-  activeKeys,
-  onActiveKeysChange,
   onReset,
   onAddFilter,
   label,
@@ -17894,6 +18204,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   const pendingOpenKeyRef = react.useRef(null);
   const triggerRefs = react.useRef(/* @__PURE__ */ new Map());
   const initializedDefaultsRef = react.useRef(/* @__PURE__ */ new Set());
+  const dismissedRef = react.useRef(/* @__PURE__ */ new Set());
   const pendingDefaultRef = react.useRef(/* @__PURE__ */ new Set());
   const misuseWarningSignatureRef = react.useRef(null);
   const prevOpenKeyRef = react.useRef(null);
@@ -17933,14 +18244,17 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     prevOpenKeyRef.current = openKey;
   }, [openKey, runSearch]);
   react.useEffect(() => {
-    if (activeKeys) return;
+    fields.forEach((field) => {
+      if (isEmptyValue(values[field.key])) dismissedRef.current.delete(field.key);
+    });
     setInternalActiveKeys((current) => {
       const known = new Set(fields.map((field) => field.key));
       const kept = current.filter((key) => known.has(key));
       const additions = fields.filter((field) => isFixedField(field) && !kept.includes(field.key)).map((field) => field.key);
-      return [...kept, ...additions];
+      const next = [...kept, ...additions];
+      return sameKeys(current, next) ? current : next;
     });
-  }, [activeKeys, fields]);
+  }, [fields, values]);
   react.useEffect(() => {
     const patch = {};
     let changed = false;
@@ -17980,8 +18294,9 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     }
   }, [fields]);
   const fixedKeys = fields.filter(isFixedField).map((field) => field.key);
+  const filledKeys = fields.filter((field) => !dismissedRef.current.has(field.key)).filter((field) => !isEmptyValue(values[field.key])).map((field) => field.key);
   const resolvedActiveKeys = Array.from(
-    /* @__PURE__ */ new Set([...activeKeys ?? internalActiveKeys, ...fixedKeys])
+    /* @__PURE__ */ new Set([...internalActiveKeys, ...fixedKeys, ...filledKeys])
   );
   const activeFields = fields.filter((field) => resolvedActiveKeys.includes(field.key));
   const inactiveFields = fields.filter(
@@ -18005,9 +18320,11 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     }
     return { width: CHIPFILTER_LISTBOX_WIDTH };
   }, [currentOpenField]);
-  const setActive = (next) => {
-    if (!activeKeys) setInternalActiveKeys(next);
-    onActiveKeysChange?.(next);
+  const openField = (key) => {
+    if (key != null) {
+      setInternalActiveKeys((current) => current.includes(key) ? current : [...current, key]);
+    }
+    setOpenKey(key);
   };
   const emitValue = (key, nextValue) => {
     const next = { ...values, [key]: nextValue };
@@ -18025,7 +18342,8 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   };
   const removeField = (key) => {
     const nextValues = emitValue(key, null);
-    setActive(resolvedActiveKeys.filter((activeKey) => activeKey !== key));
+    dismissedRef.current.add(key);
+    setInternalActiveKeys((current) => current.filter((activeKey) => activeKey !== key));
     if (openKey === key) setOpenKey(null);
     runSearch(nextValues);
   };
@@ -18034,6 +18352,9 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
       acc[field.key] = resetTargetValue(field);
       return acc;
     }, {});
+    dismissedRef.current.clear();
+    setInternalActiveKeys(fields.filter(isFixedField).map((field) => field.key));
+    setOpenKey(null);
     onValueChange?.(next);
     runSearch(next);
     onReset?.();
@@ -18042,6 +18363,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
     (key) => {
       const field = fields.find((f) => f.key === key);
       if (!field || isInlineField(field)) return;
+      setInternalActiveKeys((current) => current.includes(key) ? current : [...current, key]);
       setOpenKey(key);
     },
     [fields]
@@ -18052,8 +18374,8 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
   );
   react.useImperativeHandle(ref, () => ({ open, reset, validate }), [open, reset, validate]);
   const addField = (key) => {
-    const next = [...resolvedActiveKeys, key];
-    setActive(next);
+    dismissedRef.current.delete(key);
+    setInternalActiveKeys((current) => current.includes(key) ? current : [...current, key]);
     onAddFilter?.(key);
     setAddOpen(false);
     const field = fields.find((f) => f.key === key);
@@ -18187,7 +18509,7 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   showClear,
                   showClearWhenEmpty: addable,
                   refCallback: (node2) => triggerRefs.current.set(field.key, node2),
-                  onOpen: () => setOpenKey(openKey === field.key ? null : field.key),
+                  onOpen: () => openField(openKey === field.key ? null : field.key),
                   onClear: handleClear
                 },
                 field.key
@@ -18617,7 +18939,7 @@ function DatePresetEditor({
     }
     const today = todayIso();
     const days = maxRange && maxRange > 0 ? maxRange : DEFAULT_CUSTOM_MAX_RANGE;
-    onValueChange([addDaysIso(today, -days), today]);
+    onValueChange([rangeStartIso(today, days), today]);
   };
   if (presets.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -19613,8 +19935,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((item2, i) => {
-                        const selected = values.includes(item2);
+                      !effectiveAutocomplete ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-sd-8 px-sd-12 py-sd-6", children: items.map((item3, i) => {
+                        const selected = values.includes(item3);
                         const active = i === activeIndex && !selected;
                         return /* @__PURE__ */ jsxRuntime.jsx(
                           "div",
@@ -19625,14 +19947,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(item2);
+                              if (!selected) addChip(item3);
                             },
-                            children: /* @__PURE__ */ jsxRuntime.jsx(SChip2, { value: item2, disabled: selected, editable: false, showRemove: false })
+                            children: /* @__PURE__ */ jsxRuntime.jsx(SChip2, { value: item3, disabled: selected, editable: false, showRemove: false })
                           },
-                          item2
+                          item3
                         );
-                      }) }) : items.map((item2, i) => {
-                        const selected = values.includes(item2);
+                      }) }) : items.map((item3, i) => {
+                        const selected = values.includes(item3);
                         const active = i === activeIndex && !selected;
                         return /* @__PURE__ */ jsxRuntime.jsxs(
                           "div",
@@ -19645,10 +19967,10 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                             ),
                             onMouseDown: (e) => {
                               e.preventDefault();
-                              if (!selected) addChip(item2);
+                              if (!selected) addChip(item3);
                             },
                             children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item2 }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item3 }),
                               selected && /* @__PURE__ */ jsxRuntime.jsx(
                                 SIcon,
                                 {
@@ -19659,7 +19981,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                               )
                             ]
                           },
-                          item2
+                          item3
                         );
                       })
                     ]
@@ -20043,22 +20365,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((item2, index) => {
-              const selected = item2 === meridiem;
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item3, index) => {
+              const selected = item3 === meridiem;
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: () => setMeridiem(item2),
+                  onClick: () => setMeridiem(item3),
                   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: item2 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
+                  children: item3 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
                 },
-                item2
+                item3
               );
             }) })
           }
@@ -20279,8 +20601,8 @@ function getTimeMinutes(value) {
 }
 function normalizeTimeRangeValue(value, rangeOrder = "strict") {
   if (value == null) return null;
-  const normalized = value.map((item2) => {
-    const parsed = parseTimeValue(item2);
+  const normalized = value.map((item3) => {
+    const parsed = parseTimeValue(item3);
     return formatTimeValue(parsed.hour, parsed.minute);
   });
   if (rangeOrder === "strict" && getTimeMinutes(normalized[0]) > getTimeMinutes(normalized[1])) {
@@ -20490,21 +20812,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((item2, index) => {
-                const selected = item2 === getMeridiem(side);
+              useMeridiem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item3, index) => {
+                const selected = item3 === getMeridiem(side);
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     type: "button",
-                    onClick: () => setMeridiem(side, item2),
+                    onClick: () => setMeridiem(side, item3),
                     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: item2 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
+                    children: item3 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
                   },
-                  item2
+                  item3
                 );
               }) })
             ]
@@ -20754,6 +21076,9 @@ exports.GNB_MENU = GNB_MENU;
 exports.GNB_MENU_WIDTH = GNB_MENU_WIDTH;
 exports.GNB_RAIL = GNB_RAIL;
 exports.GNB_RAIL_WIDTH = GNB_RAIL_WIDTH;
+exports.GNB_SYSTEM_COLORS = GNB_SYSTEM_COLORS;
+exports.GNB_SYSTEM_COLOR_CONFIG = GNB_SYSTEM_COLOR_CONFIG;
+exports.GNB_SYSTEM_LAYOUT = GNB_SYSTEM_LAYOUT;
 exports.ICONS = ICONS;
 exports.IMAGE_FITS = IMAGE_FITS;
 exports.PAGE_BACKGROUNDS = PAGE_BACKGROUNDS;
@@ -20795,6 +21120,8 @@ exports.SFilePicker = SFilePicker;
 exports.SForm = SForm;
 exports.SGhostButton = SGhostButton;
 exports.SGnb = SGnb;
+exports.SGnbSystem = SGnbSystem;
+exports.SGnbSystemContext = SGnbSystemContext;
 exports.SGuide = SGuide;
 exports.SIcon = SIcon;
 exports.SImage = SImage;