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

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { forwardRef, useState, useRef, useEffect, createContext, useContext, useCallback, useMemo, useId, Children, cloneElement, useImperativeHandle, useLayoutEffect, Fragment as Fragment$1, isValidElement, useSyncExternalStore, Component } from 'react';
+import { forwardRef, useState, useRef, useEffect, createContext, useContext, useCallback, useMemo, useId, Children, cloneElement, useImperativeHandle, Fragment as Fragment$1, useLayoutEffect, isValidElement, useSyncExternalStore, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import * as RCheckbox from '@radix-ui/react-checkbox';
@@ -242,6 +242,47 @@ var fieldWidthValue = (v) => {
   if (isFieldWidthGrade(v)) return `var(--cmp-field-width-${v})`;
   return typeof v === "number" ? `${v}px` : v;
 };
+var Icon_account = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M11.75 13.75H9.35547C7.96612 13.75 6.68824 14.3982 5.74609 15.373C4.80587 16.346 4.25975 17.5818 4.25 18.6846C4.25175 18.6862 4.25343 18.6884 4.25586 18.6904C4.28703 18.7161 4.35523 18.75 4.4541 18.75H12.5V20.25H4.4541C3.65662 20.25 2.75016 19.692 2.75 18.7148C2.75 17.144 3.50242 15.5362 4.66699 14.3311C5.83832 13.119 7.48832 12.25 9.35547 12.25H11.75V13.75Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M17.4854 11C17.6175 11.0001 17.7358 11.0828 17.7803 11.2061L18.0977 12.0859C18.2115 12.1143 18.3098 12.1432 18.3926 12.1729C18.483 12.2052 18.5994 12.2543 18.7432 12.3213L19.4834 11.9297C19.5436 11.8979 19.6124 11.886 19.6797 11.8965C19.7471 11.9071 19.8098 11.9394 19.8574 11.9883L20.5078 12.6611C20.5942 12.7507 20.6188 12.8818 20.5703 12.9961L20.2236 13.8096C20.2811 13.9152 20.3272 14.0055 20.3623 14.0811C20.4001 14.1633 20.4462 14.2768 20.502 14.4229L21.3105 14.7695C21.432 14.8213 21.5071 14.9432 21.499 15.0732L21.4404 16.0068C21.4363 16.0674 21.4137 16.1255 21.377 16.1738C21.3402 16.2221 21.2906 16.2592 21.2334 16.2793L20.4668 16.5508C20.4447 16.6565 20.4218 16.7477 20.3975 16.8242C20.3583 16.9421 20.3137 17.0582 20.2637 17.1719L20.6484 18.0225C20.6756 18.0822 20.6825 18.1497 20.6689 18.2139C20.6553 18.2779 20.6222 18.3364 20.5732 18.3799L19.8408 19.0332C19.7927 19.0758 19.7328 19.1026 19.6689 19.1104C19.6051 19.1181 19.5403 19.1062 19.4834 19.0762L18.7285 18.6768C18.6106 18.7392 18.4889 18.7943 18.3643 18.8418L18.0352 18.9648L17.7422 19.7744C17.7205 19.8337 17.6813 19.8852 17.6299 19.9219C17.5785 19.9585 17.5172 19.9792 17.4541 19.9805L16.5996 20C16.5348 20.0017 16.4709 19.9833 16.417 19.9473C16.3631 19.9113 16.3221 19.8593 16.2988 19.7988L15.9541 18.8867C15.8365 18.8465 15.7196 18.8026 15.6045 18.7559C15.5104 18.7151 15.4173 18.6711 15.3262 18.624L14.4717 18.9893C14.4154 19.0133 14.3533 19.0204 14.293 19.0098C14.2326 18.9991 14.1766 18.9715 14.1318 18.9297L13.499 18.3359C13.452 18.292 13.4197 18.234 13.4072 18.1709C13.3949 18.1079 13.4031 18.0428 13.4297 17.9844L13.7969 17.1826C13.7481 17.088 13.7027 16.9916 13.6611 16.8936C13.6125 16.7733 13.5677 16.6512 13.5264 16.5283L12.7207 16.2832C12.6554 16.2635 12.5985 16.2224 12.5586 16.167C12.5187 16.1114 12.4978 16.0439 12.5 15.9756L12.5312 15.1113C12.5335 15.0549 12.5519 15.0002 12.583 14.9531C12.6141 14.906 12.657 14.868 12.708 14.8438L13.5527 14.4375C13.5918 14.2943 13.6262 14.1829 13.6562 14.1016C13.6987 13.9929 13.7462 13.8859 13.7979 13.7812L13.4316 13.0068C13.4039 12.9481 13.3952 12.8821 13.4072 12.8184C13.4194 12.7545 13.4516 12.6959 13.499 12.6514L14.1309 12.0547C14.175 12.013 14.2303 11.9847 14.29 11.9736C14.3499 11.9626 14.4125 11.9699 14.4688 11.9932L15.3223 12.3457C15.4168 12.2827 15.5027 12.2314 15.5801 12.1904C15.6722 12.1415 15.7953 12.0904 15.9502 12.0352L16.248 11.207C16.27 11.1465 16.3096 11.0936 16.3623 11.0566C16.4151 11.0197 16.4785 10.9999 16.543 11H17.4854ZM17.0107 14.1582C16.2606 14.1582 15.6523 14.7594 15.6523 15.501C15.6524 16.2425 16.2607 16.8437 17.0107 16.8438C17.7604 16.8438 18.3681 16.2425 18.3682 15.501C18.3682 14.7594 17.7609 14.1582 17.0107 14.1582Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M10.5 3.5C12.6875 3.5 14.5 5.3125 14.5 7.5C14.5 9.71875 12.6875 11.5 10.5 11.5C8.28125 11.5 6.5 9.71875 6.5 7.5C6.5 5.3125 8.28125 3.5 10.5 3.5ZM10.5 5C9.11729 5 8 6.13329 8 7.5C8 8.89032 9.10968 10 10.5 10C11.8667 10 13 8.88271 13 7.5C13 6.14093 11.8591 5 10.5 5Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_add = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsx(
@@ -571,6 +612,38 @@ var Icon_bell = (p) => {
     }
   );
 };
+var Icon_bellRinging = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M14.7569 2.38727C15.5529 2.61577 16.0134 3.44651 15.7853 4.24262L15.6017 4.88283C18.2685 6.33275 19.6863 9.40776 18.8414 12.3553L17.8242 15.9028L17.7839 16.0822C17.615 17.0352 17.9736 18.7681 18.418 19.5394C18.8918 20.3618 17.8729 20.9656 16.9454 20.6999L12.9492 19.554C12.9484 19.5568 12.9478 19.5597 12.9468 19.5625C12.3934 21.1403 10.776 22.0516 9.24413 21.6125C7.71218 21.1732 6.82362 19.5434 7.19047 17.9119C7.19112 17.909 7.19212 17.9062 7.19289 17.9034L3.19671 16.7575L3.02761 16.6989C2.20629 16.3626 1.77717 15.4116 2.56283 14.993C3.34841 14.5742 4.57093 13.2947 4.93263 12.3972L4.99356 12.2237L6.01078 8.6762C6.85627 5.72841 9.68793 3.8709 12.7182 4.05498L12.9015 3.41571C13.13 2.61953 13.9606 2.15895 14.7569 2.38727ZM13.7922 5.75169C10.9998 4.951 8.19452 6.50346 7.45267 9.08965L6.43545 12.6371C6.2092 13.4258 5.61733 14.2164 5.11212 14.7792C4.88445 15.0328 4.62615 15.2903 4.35646 15.5296L16.6125 19.044C16.5106 18.698 16.4281 18.343 16.3694 18.0071C16.2392 17.2621 16.1562 16.2782 16.3823 15.4893L17.3995 11.9419C18.1408 9.35565 16.5842 6.55254 13.7922 5.75169Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M18.7143 4.09705C19.0365 3.83687 19.5097 3.88767 19.77 4.2098C20.8724 5.57421 21.6644 7.17777 22.0725 8.89915C22.1677 9.30202 21.9178 9.70642 21.515 9.80193C21.1123 9.89711 20.7087 9.64808 20.6129 9.24559C20.2569 7.74423 19.5651 6.34446 18.6025 5.15304C18.3423 4.83086 18.3922 4.35736 18.7143 4.09705Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_bill = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxs(
@@ -3070,6 +3143,7 @@ var Icon_youtube = (p) => {
   );
 };
 var ICONS = {
+  account: Icon_account,
   add: Icon_add,
   alert: Icon_alert,
   alignKorean: Icon_alignKorean,
@@ -3082,6 +3156,7 @@ var ICONS = {
   attachFile: Icon_attachFile,
   barcode: Icon_barcode,
   bell: Icon_bell,
+  bellRinging: Icon_bellRinging,
   bill: Icon_bill,
   board: Icon_board,
   box: Icon_box,
@@ -4232,7 +4307,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(
-    (item3, index) => setDepth(item3, clampDepth(getDepth(item3, fromIndex + index) + depthDelta, maxDepth))
+    (item4, index) => setDepth(item4, clampDepth(getDepth(item4, fromIndex + index) + depthDelta, maxDepth))
   ) : movedItems;
   return [
     ...remainingItems.slice(0, insertionIndex),
@@ -4280,7 +4355,7 @@ function SDraggableListInner({
     setDropTarget({ index, intent: "before" });
   }, []);
   const readDepth = useCallback(
-    (item3, index) => clampDepth(getDepth?.(item3, index) ?? 1, maxDepth),
+    (item4, index) => clampDepth(getDepth?.(item4, index) ?? 1, maxDepth),
     [getDepth, maxDepth]
   );
   useEffect(() => {
@@ -4315,8 +4390,8 @@ function SDraggableListInner({
           nextDropTarget = ratio < 0.5 ? { index, intent: "before" } : { index, intent: "after" };
           break;
         }
-        const item3 = items[index];
-        const canHaveChildren = (getCanHaveChildren?.(item3, index) ?? true) && readDepth(item3, index) < maxDepth;
+        const item4 = items[index];
+        const canHaveChildren = (getCanHaveChildren?.(item4, index) ?? true) && readDepth(item4, index) < maxDepth;
         if (ratio < 0.25) {
           nextDropTarget = { index, intent: "before" };
         } else if (ratio > 0.75 || !canHaveChildren) {
@@ -4416,10 +4491,10 @@ function SDraggableListInner({
       "data-drag-active": dragActive || void 0,
       "data-draggable-group": dragContext ? dragGroup : void 0,
       "data-draggable-list-id": dragContext ? listId : void 0,
-      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;
+      children: items.map((item4, index) => {
+        const itemKey = getKey(item4, index);
+        const disabled = (getDisabled?.(item4, index) ?? false) || isDescendant(items, index, draggedSubtreeStart, depthEnabled ? readDepth : void 0);
+        const depth = depthEnabled ? readDepth(item4, 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");
@@ -4473,7 +4548,7 @@ function SDraggableListInner({
                   }
                 }
               ),
-              renderItem(item3, index, {
+              renderItem(item4, index, {
                 onDragHandleMouseDown: (event) => {
                   if (disabled) return;
                   if (dragContext && dragGroup && listId) {
@@ -5046,7 +5121,7 @@ function SGhostButton({
   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(
+  const btn2 = /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -5088,7 +5163,7 @@ function SGhostButton({
       ]
     }
   );
-  if (!hasTooltip) return btn;
+  if (!hasTooltip) return btn2;
   return /* @__PURE__ */ jsxs(RPopover11.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(RPopover11.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
       "span",
@@ -5099,7 +5174,7 @@ function SGhostButton({
         onMouseLeave: startHide,
         onFocus: openNow,
         onBlur: startHide,
-        children: btn
+        children: btn2
       }
     ) }),
     /* @__PURE__ */ jsx(RPopover11.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
@@ -5398,7 +5473,7 @@ var STreeImpl = /* @__PURE__ */ forwardRef(function STree({
 }, ref) {
   const [internalValue, setInternalValue] = useState(defaultValue ?? []);
   const [internalExpandedIds, setInternalExpandedIds] = useState(
-    defaultExpandedIds ?? items.filter((item3) => item3.children?.length).map((item3) => item3.id)
+    defaultExpandedIds ?? items.filter((item4) => item4.children?.length).map((item4) => item4.id)
   );
   const currentValue = value ?? internalValue;
   const currentExpandedIds = expandedIds ?? internalExpandedIds;
@@ -6782,6 +6857,456 @@ function SSwitch({
   );
 }
 
+// src/lib/is-dev.ts
+function isDev() {
+  return typeof process === "undefined" || process?.env?.NODE_ENV !== "production";
+}
+function SPortal({
+  open,
+  onClose,
+  onOpenChange,
+  anchorRef,
+  placement = "bottom",
+  align = "start",
+  offset = 4,
+  alignOffset = 0,
+  fit = false,
+  maxHeight,
+  autoClose = false,
+  persistent = false,
+  viewportPadding = 0,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  onPointerDownOutside,
+  children,
+  className,
+  style,
+  ariaLabel
+}) {
+  const portalContainer = usePortalContainer();
+  const { minWidth: styleMinWidth, maxWidth: styleMaxWidth, ...restStyle } = style ?? {};
+  return /* @__PURE__ */ jsxs(
+    RPopover11.Root,
+    {
+      open,
+      onOpenChange: (next) => {
+        onOpenChange?.(next);
+        if (!next) onClose?.();
+      },
+      children: [
+        /* @__PURE__ */ jsx(RPopover11.Anchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsx(RPopover11.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover11.Content,
+          {
+            side: placement,
+            align,
+            sideOffset: offset,
+            alignOffset,
+            collisionPadding: viewportPadding,
+            "aria-label": ariaLabel,
+            onPointerDownOutside: (e) => {
+              if (persistent || anchorRef.current?.contains(e.target)) {
+                e.preventDefault();
+                return;
+              }
+              onPointerDownOutside?.(e);
+            },
+            onFocusOutside: (e) => {
+              if (persistent || anchorRef.current?.contains(e.target)) {
+                e.preventDefault();
+              }
+            },
+            onEscapeKeyDown: persistent ? (e) => e.preventDefault() : void 0,
+            onOpenAutoFocus,
+            onCloseAutoFocus,
+            onClick: autoClose ? () => onClose?.() : void 0,
+            className: cn(
+              "z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm",
+              maxHeight != null && "overflow-y-auto",
+              // 앵커가 창보다 넓을 수 있는 자리(가로 스크롤 안의 트리거 등)에서도 하한이 상한을
+              // 이기지 않도록, 앵커 너비 역시 가용 폭으로 가둔다.
+              fit && "min-w-[min(var(--radix-popover-trigger-width),var(--radix-popover-content-available-width))]",
+              FLOATING_SLIDE_ANIM,
+              className
+            ),
+            style: {
+              maxHeight,
+              ...restStyle,
+              ...styleMinWidth != null ? { minWidth: clampToAvailableWidth(styleMinWidth, POPOVER_AVAILABLE_WIDTH) } : {},
+              maxWidth: clampToAvailableWidth(styleMaxWidth, POPOVER_AVAILABLE_WIDTH)
+            },
+            children
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/SAccountListBox/accountListBox.config.ts
+var box = (p) => `var(--cmp-gnb-system-accountListBox-${p})`;
+var btn = (p) => `var(--cmp-gnb-system-accountButton-${p})`;
+var item = (p) => `var(--cmp-listBoxItem-${p})`;
+var sys = (p) => `var(--sys-color-${p})`;
+var ACCOUNT_LIST_BOX_ITEM_TONES = ["default", "negative"];
+var ACCOUNT_LIST_BOX_ICONS = {
+  accountSetting: "account",
+  language: "global",
+  logout: "logout"
+};
+var ACCOUNT_LIST_BOX_LABELS = {
+  accountSetting: "\uACC4\uC815 \uC124\uC815",
+  language: "\uC5B8\uC5B4 \uBCC0\uACBD",
+  logout: "\uACC4\uC815 \uB85C\uADF8\uC544\uC6C3"
+};
+var ACCOUNT_LIST_BOX_TONE_CONFIG = {
+  default: {
+    bg: btn("bg-default"),
+    bgHover: btn("bg-hover"),
+    text: btn("content-default"),
+    // TODO: 행 아이콘 전용 색 토큰이 없다. content.default 는 글자색(#222222)이고
+    // 시안의 아이콘은 한 단계 물러난 #555555 라, 그에 맞는 시맨틱 토큰으로 둔다.
+    icon: sys("fg-secondary")
+  },
+  negative: {
+    bg: btn("bg-default"),
+    bgHover: btn("bg-negativeHover"),
+    // 되돌릴 수 없는 행은 글자와 아이콘이 같은 경고색으로 함께 물든다(시안).
+    text: btn("content-negative"),
+    icon: btn("content-negative")
+  }
+};
+var ACCOUNT_LIST_BOX_LAYOUT = {
+  /** 패널 고정 폭 */
+  width: box("width"),
+  /** 패널 배경 */
+  bg: box("bg"),
+  /** 패널 라운드 */
+  radius: box("radius"),
+  /** 사용자정보 영역 배경 */
+  userdataBg: box("userdata-bg"),
+  /** 사용자정보 영역 좌우 여백 */
+  userdataPaddingX: box("userdata-paddingX"),
+  /** 사용자정보 영역 상하 여백 */
+  userdataPaddingY: box("userdata-paddingY"),
+  /** 이메일 글자색 */
+  emailColor: box("userdata-email-color"),
+  /** 이름 글자색 */
+  nameColor: box("userdata-name-color"),
+  /** 권한 글자색 */
+  roleColor: box("userdata-role-color"),
+  /** 행 묶음의 상하 여백 */
+  listPaddingY: box("list-paddingY"),
+  /** 행 좌우 여백 */
+  itemPaddingX: btn("paddingX"),
+  /** 행 상하 여백 */
+  itemPaddingY: btn("paddingY"),
+  /** 행 아이콘 ↔ 라벨 간격 */
+  itemGap: btn("gap"),
+  /** 행 아이콘 크기 */
+  itemIcon: btn("icon"),
+  /** 우측 값 ↔ 화살표 간격 */
+  selectDataGap: btn("selectData-gap"),
+  /** 우측 화살표 크기 */
+  selectDataIcon: btn("selectData-icon"),
+  /** 우측 값 글자색 */
+  selectDataText: btn("selectData-text"),
+  /** 시스템 메뉴에서 지금 값인 칸의 글자색 — 계정 행이 아니라 목록 항목이라
+   *  listBoxItem 의 선택 색을 그대로 따른다(다른 목록의 선택 표시와 같은 색) */
+  menuSelectedText: item("content-selected"),
+  // TODO: 우측 화살표 전용 색 토큰이 없다. 시안(#888888)에 맞는 시맨틱 토큰으로 둔다.
+  /** 우측 화살표색 */
+  selectDataIconColor: sys("fg-tertiary")
+};
+function SystemMenuPortal({
+  open,
+  onOpenChange,
+  anchorRef,
+  placement = "bottom",
+  align,
+  triggerRef,
+  ariaLabel,
+  value,
+  options,
+  onSelect
+}) {
+  const t = ACCOUNT_LIST_BOX_TONE_CONFIG.default;
+  return /* @__PURE__ */ jsx(
+    SPortal,
+    {
+      open,
+      onClose: () => onOpenChange(false),
+      anchorRef,
+      placement,
+      align,
+      offset: 4,
+      viewportPadding: 8,
+      ariaLabel,
+      onPointerDownOutside: (event) => {
+        if (triggerRef?.current?.contains(event.target)) event.preventDefault();
+      },
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      className: "w-auto min-w-[100px] rounded-(--cmp-gnb-system-accountListBox-radius) bg-(--cmp-gnb-system-accountListBox-bg)",
+      children: /* @__PURE__ */ jsx("div", { role: "menu", className: "flex flex-col", style: { paddingBlock: ACCOUNT_LIST_BOX_LAYOUT.listPaddingY }, children: options.map((option) => {
+        const selected = option.value === value;
+        const color = option.color ? `var(--cmp-tag-${option.color}-content)` : selected ? ACCOUNT_LIST_BOX_LAYOUT.menuSelectedText : t.text;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": selected,
+            onClick: () => onSelect(option.value),
+            className: cn(
+              selected ? "typo-field-sm-bold" : "typo-field-sm-medium",
+              "flex w-full cursor-pointer items-center whitespace-nowrap border-none bg-(--alb-bg) text-left transition-colors hover:bg-(--alb-bg-hover)"
+            ),
+            style: {
+              "--alb-bg": t.bg,
+              "--alb-bg-hover": t.bgHover,
+              "paddingInline": ACCOUNT_LIST_BOX_LAYOUT.itemPaddingX,
+              "paddingBlock": ACCOUNT_LIST_BOX_LAYOUT.itemPaddingY,
+              "gap": ACCOUNT_LIST_BOX_LAYOUT.itemGap,
+              color
+            },
+            children: [
+              option.color && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", children: /* @__PURE__ */ jsx(SIcon, { name: "dot", size: "100%", style: { width: ACCOUNT_LIST_BOX_LAYOUT.itemIcon, height: ACCOUNT_LIST_BOX_LAYOUT.itemIcon } }) }),
+              option.label
+            ]
+          },
+          option.value
+        );
+      }) })
+    }
+  );
+}
+function TokenIcon({ name, size }) {
+  return /* @__PURE__ */ jsx(SIcon, { name, size: "100%", style: { width: size, height: size } });
+}
+function Row({
+  tone = "default",
+  icon,
+  label,
+  value,
+  trailingRef,
+  rowRef,
+  hasMenu,
+  expanded,
+  onClick
+}) {
+  const t = ACCOUNT_LIST_BOX_TONE_CONFIG[tone];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: rowRef,
+      type: "button",
+      "aria-haspopup": hasMenu && "menu",
+      "aria-expanded": hasMenu && expanded,
+      onClick,
+      className: "flex w-full cursor-pointer items-center border-none bg-(--alb-bg) text-left transition-colors hover:bg-(--alb-bg-hover)",
+      style: {
+        "--alb-bg": t.bg,
+        "--alb-bg-hover": t.bgHover,
+        "paddingInline": ACCOUNT_LIST_BOX_LAYOUT.itemPaddingX,
+        "paddingBlock": ACCOUNT_LIST_BOX_LAYOUT.itemPaddingY,
+        "gap": ACCOUNT_LIST_BOX_LAYOUT.itemGap
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center", style: { color: t.icon }, children: /* @__PURE__ */ jsx(TokenIcon, { name: icon, size: ACCOUNT_LIST_BOX_LAYOUT.itemIcon }) }),
+        /* @__PURE__ */ jsx("span", { className: "typo-field-sm-medium min-w-0 flex-1 truncate", style: { color: t.text }, children: label }),
+        (value != null || hasMenu) && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            ref: trailingRef,
+            className: "inline-flex shrink-0 items-center",
+            style: { gap: ACCOUNT_LIST_BOX_LAYOUT.selectDataGap },
+            children: [
+              value != null && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "typo-control-xs-medium whitespace-nowrap",
+                  style: { color: ACCOUNT_LIST_BOX_LAYOUT.selectDataText },
+                  children: value
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", style: { color: ACCOUNT_LIST_BOX_LAYOUT.selectDataIconColor }, children: /* @__PURE__ */ jsx(TokenIcon, { name: "chevronRight", size: ACCOUNT_LIST_BOX_LAYOUT.selectDataIcon }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var SAccountListBox = /* @__PURE__ */ forwardRef(
+  function SAccountListBox2({ email, name, authority, accountSetting, language, logout, className, style, ...rest }, ref) {
+    const hasUserdata = email != null || name != null || authority != null;
+    const languageOptions = language?.options ?? [];
+    const hasLanguageMenu = languageOptions.length > 0;
+    const [languageMenuOpen, setLanguageMenuOpen] = useState(false);
+    const languageValueRef = useRef(null);
+    const languageRowRef = useRef(null);
+    const languageLabel = language?.label ?? ACCOUNT_LIST_BOX_LABELS.language;
+    const languageDoesNothing = Boolean(language) && !hasLanguageMenu && !language?.onClick;
+    useEffect(() => {
+      if (isDev() && languageDoesNothing) {
+        console.warn(
+          "[SAccountListBox] language \uC5D0 options \uB3C4 onClick \uB3C4 \uC5C6\uC2B5\uB2C8\uB2E4. \uC571 \uC548\uC5D0\uC11C \uACE0\uB974\uAC8C \uD558\uB824\uBA74 options \uB97C, \uC5B8\uC5B4 \uD654\uBA74\uC73C\uB85C \uBCF4\uB0BC \uAC83\uC774\uBA74 onClick \uC744 \uC8FC\uC138\uC694 \u2014 \uB458 \uB2E4 \uC5C6\uC73C\uBA74 \uD654\uC0B4\uD45C\uB9CC \uC788\uACE0 \uB20C\uB7EC\uB3C4 \uC544\uBB34 \uC77C\uC774 \uC5C6\uB294 \uD589\uC774 \uB429\uB2C8\uB2E4."
+        );
+      }
+    }, [languageDoesNothing]);
+    const languageText = languageOptions.find((option) => option.value === language?.value)?.label ?? language?.value;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("box-border flex flex-col overflow-hidden", className),
+        style: {
+          width: ACCOUNT_LIST_BOX_LAYOUT.width,
+          backgroundColor: ACCOUNT_LIST_BOX_LAYOUT.bg,
+          borderRadius: ACCOUNT_LIST_BOX_LAYOUT.radius,
+          ...style
+        },
+        ...rest,
+        children: [
+          hasUserdata && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex flex-col",
+              style: {
+                backgroundColor: ACCOUNT_LIST_BOX_LAYOUT.userdataBg,
+                paddingInline: ACCOUNT_LIST_BOX_LAYOUT.userdataPaddingX,
+                paddingBlock: ACCOUNT_LIST_BOX_LAYOUT.userdataPaddingY
+              },
+              children: [
+                email != null && /* @__PURE__ */ jsx("span", { className: "typo-body-sm-medium truncate", style: { color: ACCOUNT_LIST_BOX_LAYOUT.emailColor }, children: email }),
+                (name != null || authority != null) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", style: { gap: ACCOUNT_LIST_BOX_LAYOUT.itemGap }, children: [
+                  /* @__PURE__ */ jsx("span", { className: "typo-body-sm-bold min-w-0 truncate", style: { color: ACCOUNT_LIST_BOX_LAYOUT.nameColor }, children: name }),
+                  authority != null && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "typo-body-sm-medium shrink-0 whitespace-nowrap",
+                      style: { color: ACCOUNT_LIST_BOX_LAYOUT.roleColor },
+                      children: authority
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { paddingBlock: ACCOUNT_LIST_BOX_LAYOUT.listPaddingY }, children: [
+            accountSetting && /* @__PURE__ */ jsx(
+              Row,
+              {
+                icon: ACCOUNT_LIST_BOX_ICONS.accountSetting,
+                label: accountSetting.label ?? ACCOUNT_LIST_BOX_LABELS.accountSetting,
+                onClick: accountSetting.onClick
+              }
+            ),
+            language && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Row,
+                {
+                  icon: ACCOUNT_LIST_BOX_ICONS.language,
+                  label: languageLabel,
+                  value: languageText,
+                  trailingRef: languageValueRef,
+                  rowRef: languageRowRef,
+                  hasMenu: hasLanguageMenu,
+                  expanded: languageMenuOpen,
+                  onClick: () => {
+                    language.onClick?.();
+                    if (hasLanguageMenu) setLanguageMenuOpen((open) => !open);
+                  }
+                }
+              ),
+              hasLanguageMenu && /* @__PURE__ */ jsx(
+                SystemMenuPortal,
+                {
+                  open: languageMenuOpen,
+                  onOpenChange: setLanguageMenuOpen,
+                  anchorRef: languageValueRef,
+                  triggerRef: languageRowRef,
+                  align: "end",
+                  ariaLabel: languageLabel,
+                  value: language.value,
+                  options: languageOptions,
+                  onSelect: (next) => {
+                    setLanguageMenuOpen(false);
+                    language.onChange?.(next);
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Row,
+              {
+                tone: "negative",
+                icon: ACCOUNT_LIST_BOX_ICONS.logout,
+                label: logout?.label ?? ACCOUNT_LIST_BOX_LABELS.logout,
+                onClick: logout?.onClick
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+var AccountListBoxAnchorContext = /* @__PURE__ */ createContext("panel");
+var AccountListBoxAnchorProvider = AccountListBoxAnchorContext.Provider;
+var ANCHOR_PLACEMENT = {
+  // 판: 계정 행 위로, 행의 왼쪽 끝에 맞춰
+  panel: { placement: "top", align: "start" },
+  // 상단바: 계정 이름 아래로, 이름의 오른쪽 끝에 맞춰
+  top: { placement: "bottom", align: "end" }
+};
+function AccountListBoxPortal({
+  open,
+  onOpenChange,
+  anchorRef,
+  ariaLabel,
+  content
+}) {
+  const { placement, align } = ANCHOR_PLACEMENT[useContext(AccountListBoxAnchorContext)];
+  const closeAfter = (item4) => item4 && {
+    ...item4,
+    onClick: () => {
+      item4.onClick?.();
+      onOpenChange(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    SPortal,
+    {
+      open,
+      onClose: () => onOpenChange(false),
+      anchorRef,
+      placement,
+      align,
+      offset: 4,
+      viewportPadding: 8,
+      ariaLabel,
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      className: "w-auto rounded-(--cmp-gnb-system-accountListBox-radius) bg-(--cmp-gnb-system-accountListBox-bg)",
+      children: /* @__PURE__ */ jsx(
+        SAccountListBox,
+        {
+          ...content,
+          accountSetting: closeAfter(content.accountSetting),
+          language: content.language && (content.language.options?.length ? {
+            ...content.language,
+            onChange: (next) => {
+              content.language?.onChange?.(next);
+              onOpenChange(false);
+            }
+          } : closeAfter(content.language)),
+          logout: closeAfter(content.logout) ?? { onClick: () => onOpenChange(false) }
+        }
+      )
+    }
+  );
+}
+
 // src/components/SSystemActionButton/systemActionButton.config.ts
 var SYSTEM_ACTION_BUTTON_COLORS = ["light", "dark", "darker"];
 var SYSTEM_ACTION_BUTTON_TYPES = [
@@ -6791,57 +7316,57 @@ var SYSTEM_ACTION_BUTTON_TYPES = [
   "subSelect",
   "status"
 ];
-var item = (p) => `var(--cmp-gnb-system-item-${p})`;
+var item2 = (p) => `var(--cmp-gnb-system-item-${p})`;
 var action = (p) => `var(--cmp-gnb-system-actionButton-${p})`;
-var sys = (p) => `var(--sys-color-${p})`;
+var sys2 = (p) => `var(--sys-color-${p})`;
 var SYSTEM_ACTION_BUTTON_COLOR_CONFIG = {
   light: {
-    bg: item("light-bg-default"),
-    bgHover: item("light-bg-hover"),
+    bg: item2("light-bg-default"),
+    bgHover: item2("light-bg-hover"),
     // light 의 아이콘 프레임 배경은 기본·hover 공통 한 값이다 (흰 면 위 흰 프레임)
-    iconBg: item("light-icon-bg"),
-    iconBgHover: item("light-icon-bg"),
-    iconGlyph: item("light-icon-default"),
-    iconGlyphHover: item("light-icon-default"),
-    text: item("light-text"),
+    iconBg: item2("light-icon-bg"),
+    iconBgHover: item2("light-icon-bg"),
+    iconGlyph: item2("light-icon-default"),
+    iconGlyphHover: item2("light-icon-default"),
+    text: item2("light-text"),
     actionText: {
       switch: action("switch-text-light"),
       selectData: action("selectData-text-light")
     },
     // 트레일링 아이콘 전용 색 토큰이 없다. light 는 item.icon.default 가
     // "actionButton/alertButton/setting 공통 글리프색"이라고 토큰에 명시돼 있다.
-    actionIcon: item("light-icon-default")
+    actionIcon: item2("light-icon-default")
   },
   dark: {
-    bg: item("dark-bg-default"),
-    bgHover: item("dark-bg-hover"),
-    iconBg: item("dark-icon-bg-default"),
-    iconBgHover: item("dark-icon-bg-hover"),
+    bg: item2("dark-bg-default"),
+    bgHover: item2("dark-bg-hover"),
+    iconBg: item2("dark-icon-bg-default"),
+    iconBgHover: item2("dark-icon-bg-hover"),
     // 어두운 면에는 글리프색 토큰이 없다. 기본은 프레임이 배경과 블렌딩되므로 라벨색(흰색),
     // hover 는 프레임이 흰색이 되므로 그 위에 표면색을 그대로 얹는다.
-    iconGlyph: item("dark-text"),
-    iconGlyphHover: item("dark-bg-hover"),
-    text: item("dark-text"),
+    iconGlyph: item2("dark-text"),
+    iconGlyphHover: item2("dark-bg-hover"),
+    text: item2("dark-text"),
     actionText: {
       switch: action("switch-text-dark"),
       selectData: action("selectData-text-dark")
     },
     // TODO: 어두운 면의 트레일링 아이콘 색 토큰이 없다. 시안(#AAAAAA)에 맞는 시맨틱 토큰으로 둔다.
-    actionIcon: sys("fg-quaternary")
+    actionIcon: sys2("fg-quaternary")
   },
   darker: {
-    bg: item("darker-bg-default"),
-    bgHover: item("darker-bg-hover"),
-    iconBg: item("darker-icon-bg-default"),
-    iconBgHover: item("darker-icon-bg-hover"),
-    iconGlyph: item("darker-text"),
-    iconGlyphHover: item("darker-bg-hover"),
-    text: item("darker-text"),
+    bg: item2("darker-bg-default"),
+    bgHover: item2("darker-bg-hover"),
+    iconBg: item2("darker-icon-bg-default"),
+    iconBgHover: item2("darker-icon-bg-hover"),
+    iconGlyph: item2("darker-text"),
+    iconGlyphHover: item2("darker-bg-hover"),
+    text: item2("darker-text"),
     actionText: {
       switch: action("switch-text-dark"),
       selectData: action("selectData-text-dark")
     },
-    actionIcon: sys("fg-quaternary")
+    actionIcon: sys2("fg-quaternary")
   }
 };
 var SYSTEM_ACTION_BUTTON_TYPE_CONFIG = {
@@ -6864,17 +7389,17 @@ var SYSTEM_ACTION_BUTTON_TYPE_CONFIG = {
 };
 var SYSTEM_ACTION_BUTTON_LAYOUT = {
   /** 행 높이 */
-  height: item("height"),
+  height: item2("height"),
   /** 행 라운드 */
-  radius: item("radius"),
+  radius: item2("radius"),
   /** 아이콘 프레임 한 변 */
-  iconFrame: item("icon-frame"),
+  iconFrame: item2("icon-frame"),
   /** 아이콘 글리프 크기 */
-  iconGlyph: item("icon-glyph"),
+  iconGlyph: item2("icon-glyph"),
   /** 아이콘 프레임 라운드 */
-  iconRadius: item("icon-radius"),
+  iconRadius: item2("icon-radius"),
   /** 아이콘 프레임 ↔ 라벨 간격 */
-  iconLabelGap: item("iconLabelGap"),
+  iconLabelGap: item2("iconLabelGap"),
   /** 좌측 여백 */
   paddingLeft: action("paddingLeft"),
   /** 우측 여백 */
@@ -6882,17 +7407,44 @@ var SYSTEM_ACTION_BUTTON_LAYOUT = {
   /** 액션 텍스트 ↔ 액션 아이콘 간격 */
   actionGap: action("selectData-gap")
 };
-function TokenIcon({ name, size }) {
+function TokenIcon2({ name, size }) {
   return /* @__PURE__ */ jsx(SIcon, { name, size: "100%", style: { width: size, height: size } });
 }
 var SSystemActionButton = /* @__PURE__ */ forwardRef(
   function SSystemActionButton2({ color = "light", type, label, option, disabled = false, className, style, ...rest }, ref) {
     const c = SYSTEM_ACTION_BUTTON_COLOR_CONFIG[color];
     const spec = SYSTEM_ACTION_BUTTON_TYPE_CONFIG[type];
+    const listBox = type === "account" ? option ?? {} : void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const listBoxOpen = listBox?.open ?? uncontrolledOpen;
+    const commitListBoxOpen = (next) => {
+      setUncontrolledOpen(next);
+      listBox?.onOpenChange?.(next);
+    };
+    const anchorRef = useRef(null);
+    const setRefs2 = (node) => {
+      anchorRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
     const hoverable = !disabled;
     const status = type === "status" ? option : void 0;
+    const subSelect = type === "subSelect" ? option : void 0;
+    const menu = subSelect ?? status;
+    const menuOptions = menu?.options ?? [];
+    const hasMenu = menuOptions.length > 0;
+    const [menuOpen, setMenuOpen] = useState(false);
+    const selected = menuOptions.find((item4) => item4.value === menu?.value);
     const resolvedIcon = spec.fixedIcon ?? option?.icon;
-    const actionText = spec.actionText ? option?.text : void 0;
+    const actionText = spec.actionText ? subSelect ? selected?.label ?? subSelect.value : option?.text : void 0;
+    const menuIsEmpty = Boolean(menu) && !hasMenu;
+    useEffect(() => {
+      if (isDev() && menuIsEmpty) {
+        console.warn(
+          `[SSystemActionButton] type="${type}" \uC758 option.options \uAC00 \uBE44\uC5B4 \uC788\uC2B5\uB2C8\uB2E4. \uC774 \uD589\uC740 \uACE0\uB978 \uAC12\uC744 \uBC14\uAFB8\uB294 \uBA54\uB274\uC758 \uD2B8\uB9AC\uAC70\uC774\uBBC0\uB85C \uACE0\uB97C \uBAA9\uB85D\uC774 \uD544\uC694\uD569\uB2C8\uB2E4 \u2014 \uB20C\uB7EC\uC11C \uD654\uBA74\uC73C\uB85C \uBCF4\uB0BC \uAC83\uC774\uBA74 type="select" \uB97C, \uBCF4\uC5EC\uC8FC\uAE30\uB9CC \uD560 \uAC83\uC774\uBA74 STag \uB97C \uC4F0\uC138\uC694.`
+        );
+      }
+    }, [menuIsEmpty, type]);
     const cssVars = {
       "--sab-bg": c.bg,
       "--sab-bg-hover": hoverable ? c.bgHover : c.bg,
@@ -6910,12 +7462,14 @@ var SSystemActionButton = /* @__PURE__ */ forwardRef(
       "gap": SYSTEM_ACTION_BUTTON_LAYOUT.iconLabelGap,
       ...style
     };
-    return /* @__PURE__ */ jsxs(
+    const button = /* @__PURE__ */ jsxs(
       "button",
       {
-        ref,
+        ref: setRefs2,
         type: "button",
         disabled,
+        "aria-haspopup": listBox ? "dialog" : hasMenu ? "menu" : void 0,
+        "aria-expanded": listBox ? listBoxOpen : hasMenu ? menuOpen : void 0,
         className: cn(
           "group box-border flex w-full items-center border-none bg-(--sab-bg) text-left transition-colors",
           "hover:bg-(--sab-bg-hover)",
@@ -6924,16 +7478,28 @@ var SSystemActionButton = /* @__PURE__ */ forwardRef(
         ),
         style: cssVars,
         ...rest,
+        onClick: (event) => {
+          rest.onClick?.(event);
+          if (listBox) commitListBoxOpen(!listBoxOpen);
+          else if (hasMenu) setMenuOpen((open) => !open);
+        },
         children: [
           resolvedIcon && /* @__PURE__ */ jsx(
             "span",
             {
               className: "inline-flex shrink-0 items-center justify-center bg-(--sab-icon-bg) text-(--sab-icon-glyph) transition-colors group-hover:bg-(--sab-icon-bg-hover) group-hover:text-(--sab-icon-glyph-hover)",
               style: { width: SYSTEM_ACTION_BUTTON_LAYOUT.iconFrame, height: SYSTEM_ACTION_BUTTON_LAYOUT.iconFrame, borderRadius: SYSTEM_ACTION_BUTTON_LAYOUT.iconRadius },
-              children: /* @__PURE__ */ jsx(TokenIcon, { name: resolvedIcon, size: SYSTEM_ACTION_BUTTON_LAYOUT.iconGlyph })
+              children: /* @__PURE__ */ jsx(TokenIcon2, { name: resolvedIcon, size: SYSTEM_ACTION_BUTTON_LAYOUT.iconGlyph })
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "typo-body-sm-semibold flex min-w-0 flex-1 items-center text-(--sab-text)", children: status ? /* @__PURE__ */ jsx(STag, { color: status.color ?? "blue", icon: "dot", label: status.label }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: label }) }),
+          /* @__PURE__ */ jsx("span", { className: "typo-body-sm-semibold flex min-w-0 flex-1 items-center text-(--sab-text)", children: status ? /* @__PURE__ */ jsx(
+            STag,
+            {
+              color: selected?.color ?? "blue",
+              icon: "dot",
+              label: selected?.label ?? status.value
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "truncate", children: label }) }),
           (actionText != null || spec.actionIcon) && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center", style: { gap: SYSTEM_ACTION_BUTTON_LAYOUT.actionGap }, children: [
             actionText != null && spec.actionText && /* @__PURE__ */ jsx(
               "span",
@@ -6942,11 +7508,48 @@ var SSystemActionButton = /* @__PURE__ */ forwardRef(
                 children: actionText
               }
             ),
-            spec.actionIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center text-(--sab-action-icon)", children: /* @__PURE__ */ jsx(TokenIcon, { name: spec.actionIcon.name, size: spec.actionIcon.size }) })
+            spec.actionIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center text-(--sab-action-icon)", children: /* @__PURE__ */ jsx(TokenIcon2, { name: spec.actionIcon.name, size: spec.actionIcon.size }) })
           ] })
         ]
       }
     );
+    if (!listBox) {
+      if (!hasMenu) return button;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        button,
+        /* @__PURE__ */ jsx(
+          SystemMenuPortal,
+          {
+            open: menuOpen,
+            onOpenChange: setMenuOpen,
+            anchorRef,
+            placement: "right",
+            align: "start",
+            ariaLabel: label ?? selected?.label ?? menu?.value,
+            value: menu?.value,
+            options: menuOptions,
+            onSelect: (next) => {
+              setMenuOpen(false);
+              menu?.onChange?.(next);
+            }
+          }
+        )
+      ] });
+    }
+    const { open: _open, onOpenChange: _onOpenChange, ...content } = listBox;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      button,
+      /* @__PURE__ */ jsx(
+        AccountListBoxPortal,
+        {
+          open: listBoxOpen,
+          onOpenChange: commitListBoxOpen,
+          anchorRef,
+          ariaLabel: label,
+          content
+        }
+      )
+    ] });
   }
 );
 var SIZE_CLASSES = {
@@ -7101,87 +7704,6 @@ function SPopover({
     ) })
   ] });
 }
-function SPortal({
-  open,
-  onClose,
-  onOpenChange,
-  anchorRef,
-  placement = "bottom",
-  align = "start",
-  offset = 4,
-  alignOffset = 0,
-  fit = false,
-  maxHeight,
-  autoClose = false,
-  persistent = false,
-  viewportPadding = 0,
-  onOpenAutoFocus,
-  onCloseAutoFocus,
-  onPointerDownOutside,
-  children,
-  className,
-  style,
-  ariaLabel
-}) {
-  const portalContainer = usePortalContainer();
-  const { minWidth: styleMinWidth, maxWidth: styleMaxWidth, ...restStyle } = style ?? {};
-  return /* @__PURE__ */ jsxs(
-    RPopover11.Root,
-    {
-      open,
-      onOpenChange: (next) => {
-        onOpenChange?.(next);
-        if (!next) onClose?.();
-      },
-      children: [
-        /* @__PURE__ */ jsx(RPopover11.Anchor, { virtualRef: anchorRef }),
-        /* @__PURE__ */ jsx(RPopover11.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover11.Content,
-          {
-            side: placement,
-            align,
-            sideOffset: offset,
-            alignOffset,
-            collisionPadding: viewportPadding,
-            "aria-label": ariaLabel,
-            onPointerDownOutside: (e) => {
-              if (persistent || anchorRef.current?.contains(e.target)) {
-                e.preventDefault();
-                return;
-              }
-              onPointerDownOutside?.(e);
-            },
-            onFocusOutside: (e) => {
-              if (persistent || anchorRef.current?.contains(e.target)) {
-                e.preventDefault();
-              }
-            },
-            onEscapeKeyDown: persistent ? (e) => e.preventDefault() : void 0,
-            onOpenAutoFocus,
-            onCloseAutoFocus,
-            onClick: autoClose ? () => onClose?.() : void 0,
-            className: cn(
-              "z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm",
-              maxHeight != null && "overflow-y-auto",
-              // 앵커가 창보다 넓을 수 있는 자리(가로 스크롤 안의 트리거 등)에서도 하한이 상한을
-              // 이기지 않도록, 앵커 너비 역시 가용 폭으로 가둔다.
-              fit && "min-w-[min(var(--radix-popover-trigger-width),var(--radix-popover-content-available-width))]",
-              FLOATING_SLIDE_ANIM,
-              className
-            ),
-            style: {
-              maxHeight,
-              ...restStyle,
-              ...styleMinWidth != null ? { minWidth: clampToAvailableWidth(styleMinWidth, POPOVER_AVAILABLE_WIDTH) } : {},
-              maxWidth: clampToAvailableWidth(styleMaxWidth, POPOVER_AVAILABLE_WIDTH)
-            },
-            children
-          }
-        ) })
-      ]
-    }
-  );
-}
 var SPopup = /* @__PURE__ */ forwardRef(function SPopup2({
   popupTitle = "",
   type = "default",
@@ -8129,11 +8651,6 @@ function SDrawer({
   ] }) }) });
 }
 
-// src/lib/is-dev.ts
-function isDev() {
-  return typeof process === "undefined" || process?.env?.NODE_ENV !== "production";
-}
-
 // src/lib/modal-outlet.ts
 var EMPTY = [];
 var entries2 = EMPTY;
@@ -8594,7 +9111,7 @@ var SLayout = /* @__PURE__ */ forwardRef(function SLayout2({
 
 // src/components/SGnb/gnb.config.ts
 var gnb = (p) => `var(--cmp-gnb-${p})`;
-var box = (p) => `var(--cmp-gnb-box-${p})`;
+var box2 = (p) => `var(--cmp-gnb-box-${p})`;
 var belt = (p) => `var(--cmp-gnb-belt-${p})`;
 var light = (p) => `var(--cmp-gnb-light-${p})`;
 var dark = (p) => `var(--cmp-gnb-dark-${p})`;
@@ -8615,14 +9132,14 @@ var GNB_MENU = {
     itemMarginX: gnb("body-padding"),
     // 전방향 토큰 → 아이템 좌우 여백에도 사용
     itemPaddingY: gnb("item-paddingY"),
-    itemPaddingRight: box("item-paddingRight"),
-    itemGap: box("item-gap"),
-    itemRadius: box("item-radius"),
+    itemPaddingRight: box2("item-paddingRight"),
+    itemGap: box2("item-gap"),
+    itemRadius: box2("item-radius"),
     itemArrow: gnb("item-chevron-size"),
-    depth1PaddingLeft: box("item-depth1-paddingLeft"),
-    depth2PaddingLeft: box("item-depth2-paddingLeft"),
-    depth3PaddingLeft: box("item-depth3-paddingLeft"),
-    depth1Icon: box("item-depth1-icon"),
+    depth1PaddingLeft: box2("item-depth1-paddingLeft"),
+    depth2PaddingLeft: box2("item-depth2-paddingLeft"),
+    depth3PaddingLeft: box2("item-depth3-paddingLeft"),
+    depth1Icon: box2("item-depth1-icon"),
     // box 는 depth1 전용 타이포 토큰이 없어 depth1 도 selected 타이포를 따른다
     depth1FontSize: 14,
     // token: gnb.box.item.typography.selected.fontSize
@@ -8735,17 +9252,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((item3) => item3.value === value)) return value;
+  if (items.some((item4) => item4.value === value)) return value;
   return findGnbAncestors(items, value)[0];
 }
 function findGnbSiblingValues(items, value) {
   const walk = (list) => {
-    if (list.some((item3) => item3.value === value)) {
-      return list.filter((item3) => item3.value !== value).map((item3) => item3.value);
+    if (list.some((item4) => item4.value === value)) {
+      return list.filter((item4) => item4.value !== value).map((item4) => item4.value);
     }
-    for (const item3 of list) {
-      if (item3.children) {
-        const found = walk(item3.children);
+    for (const item4 of list) {
+      if (item4.children) {
+        const found = walk(item4.children);
         if (found) return found;
       }
     }
@@ -8755,10 +9272,10 @@ function findGnbSiblingValues(items, value) {
 }
 function findGnbAncestors(items, value) {
   const walk = (list, trail) => {
-    for (const item3 of list) {
-      if (item3.value === value) return trail;
-      if (item3.children) {
-        const found = walk(item3.children, [...trail, item3.value]);
+    for (const item4 of list) {
+      if (item4.value === value) return trail;
+      if (item4.children) {
+        const found = walk(item4.children, [...trail, item4.value]);
         if (found) return found;
       }
     }
@@ -8768,20 +9285,20 @@ function findGnbAncestors(items, value) {
 }
 function findGnbDescendantBranchValues(items, value) {
   const find = (list) => {
-    for (const item3 of list) {
-      if (item3.value === value) return item3;
-      if (item3.children) {
-        const found = find(item3.children);
+    for (const item4 of list) {
+      if (item4.value === value) return item4;
+      if (item4.children) {
+        const found = find(item4.children);
         if (found) return found;
       }
     }
     return void 0;
   };
   const collect = (list, acc) => {
-    for (const item3 of list) {
-      if (item3.children && item3.children.length > 0) {
-        acc.push(item3.value);
-        collect(item3.children, acc);
+    for (const item4 of list) {
+      if (item4.children && item4.children.length > 0) {
+        acc.push(item4.value);
+        collect(item4.children, acc);
       }
     }
     return acc;
@@ -8826,7 +9343,7 @@ var SGnb = /* @__PURE__ */ 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((item3) => !item3.children || item3.children.length === 0);
+  const railHasLeaf = useRail && items.some((item4) => !item4.children || item4.children.length === 0);
   const header = railHasLeaf ? "full" : headerProp ?? layout?.header ?? "fix";
   const H = GNB_HEADER[header];
   const M = GNB_MENU[type];
@@ -8869,13 +9386,13 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
     labelTipHideRef.current = setTimeout(() => setLabelTip(null), LABEL_TIP_HIDE_DELAY_MS);
   };
   useEffect(() => cancelLabelTipHide, []);
-  const rowHoverProps = (item3) => ({
+  const rowHoverProps = (item4) => ({
     onMouseEnter: (event) => {
-      setHoveredKey(item3.value);
-      showLabelTipIfTruncated(event.currentTarget, item3.label);
+      setHoveredKey(item4.value);
+      showLabelTipIfTruncated(event.currentTarget, item4.label);
     },
     onMouseLeave: () => {
-      setHoveredKey((prev) => prev === item3.value ? null : prev);
+      setHoveredKey((prev) => prev === item4.value ? null : prev);
       startLabelTipHide();
     }
   });
@@ -8901,7 +9418,7 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
   }, [items, value]);
   useEffect(() => {
     setActiveRail(
-      (prev) => prev !== void 0 && items.some((item3) => item3.value === prev) ? prev : items[0]?.value
+      (prev) => prev !== void 0 && items.some((item4) => item4.value === prev) ? prev : items[0]?.value
     );
   }, [items]);
   const toggleExpand = (key) => {
@@ -8918,33 +9435,33 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
       return next;
     });
   };
-  const handleItemClick = (item3) => {
-    if (item3.disabled) return;
-    if (item3.children && item3.children.length > 0) {
-      toggleExpand(item3.value);
+  const handleItemClick = (item4) => {
+    if (item4.disabled) return;
+    if (item4.children && item4.children.length > 0) {
+      toggleExpand(item4.value);
       return;
     }
-    onValueChange?.(item3.value);
+    onValueChange?.(item4.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 handleRailClick = (item4) => {
+    if (item4.disabled) return;
+    setActiveRail(item4.value);
+    onRailChange?.(item4.value);
+    if (!item4.children || item4.children.length === 0) onValueChange?.(item4.value);
   };
   const handleFoldToggle = () => {
     const next = !folded;
     onFoldChange?.(next);
     if (foldedProp === void 0) layout?.setFolded(next);
   };
-  const renderRailItem = (item3) => {
-    const isActive = item3.value === activeRail;
-    const isHovered = hoveredKey === item3.value && !item3.disabled;
+  const renderRailItem = (item4) => {
+    const isActive = item4.value === activeRail;
+    const isHovered = hoveredKey === item4.value && !item4.disabled;
     return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        disabled: item3.disabled,
+        disabled: item4.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: {
@@ -8959,31 +9476,31 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
           fontSize: GNB_RAIL.itemFontSize,
           lineHeight: `${GNB_RAIL.itemLineHeight}px`,
           fontWeight: isActive ? GNB_RAIL.itemFontWeightSelected : GNB_RAIL.itemFontWeight,
-          opacity: item3.disabled ? 0.4 : 1,
-          cursor: item3.disabled ? "not-allowed" : "pointer"
+          opacity: item4.disabled ? 0.4 : 1,
+          cursor: item4.disabled ? "not-allowed" : "pointer"
         },
-        onClick: () => handleRailClick(item3),
-        ...rowHoverProps(item3),
+        onClick: () => handleRailClick(item4),
+        ...rowHoverProps(item4),
         children: [
-          item3.icon && /* @__PURE__ */ jsx(SIcon, { name: item3.icon, size: GNB_RAIL.itemIcon, className: "shrink-0" }),
+          item4.icon && /* @__PURE__ */ jsx(SIcon, { name: item4.icon, size: GNB_RAIL.itemIcon, className: "shrink-0" }),
           /* @__PURE__ */ jsx(
             "span",
             {
               "data-gnb-label": true,
               className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-center",
-              children: item3.label
+              children: item4.label
             }
           )
         ]
       }
-    ) }, item3.value);
+    ) }, item4.value);
   };
-  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 renderItem = (item4, depth, branchHasIcon = false) => {
+    const hasChildren = !!(item4.children && item4.children.length > 0);
+    const isSelected = !hasChildren && item4.value === value;
+    const isExpanded = expandedKeys.has(item4.value);
+    const isHovered = hoveredKey === item4.value && !item4.disabled;
+    const iconBranch = depth === 1 ? !!item4.icon : branchHasIcon;
     const itemStyle = {
       gap: M.itemGap,
       paddingTop: M.itemPaddingY,
@@ -9000,8 +9517,8 @@ var SGnb = /* @__PURE__ */ 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: item3.disabled ? 0.4 : 1,
-      cursor: item3.disabled ? "not-allowed" : "pointer"
+      opacity: item4.disabled ? 0.4 : 1,
+      cursor: item4.disabled ? "not-allowed" : "pointer"
     };
     return (
       // li 를 flex-col 로 둬야 버튼이 좌우 마진만큼 안쪽으로 들어가고,
@@ -9011,18 +9528,18 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
           "button",
           {
             type: "button",
-            disabled: item3.disabled,
+            disabled: item4.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(item3),
-            ...rowHoverProps(item3),
+            onClick: () => handleItemClick(item4),
+            ...rowHoverProps(item4),
             children: [
-              depth === 1 && item3.icon && /* @__PURE__ */ jsx(
+              depth === 1 && item4.icon && /* @__PURE__ */ jsx(
                 SIcon,
                 {
-                  name: item3.icon,
+                  name: item4.icon,
                   size: M.depth1Icon,
                   color: isSelected ? C.itemColorActive : C.itemIcon,
                   className: "shrink-0"
@@ -9042,17 +9559,17 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
                   {
                     "data-gnb-label": true,
                     className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
-                    children: item3.label
+                    children: item4.label
                   }
                 )
               ] }),
-              item3.tag !== void 0 && item3.tag !== "" && /* @__PURE__ */ jsx(
+              item4.tag !== void 0 && item4.tag !== "" && /* @__PURE__ */ jsx(
                 STag,
                 {
                   shape: "square",
                   size: "xs",
-                  color: item3.tagColor ?? "blue",
-                  label: item3.tag,
+                  color: item4.tagColor ?? "blue",
+                  label: item4.tag,
                   className: "shrink-0"
                 }
               ),
@@ -9085,16 +9602,16 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
                   visibility: isExpanded ? "visible" : "hidden",
                   transition: `visibility 0s linear ${isExpanded ? "0s" : `${GNB_EXPAND_MS}ms`}`
                 },
-                children: item3.children.map((child) => renderItem(child, depth + 1, iconBranch))
+                children: item4.children.map((child) => renderItem(child, depth + 1, iconBranch))
               }
             )
           }
         )
-      ] }, item3.value)
+      ] }, item4.value)
     );
   };
   const railItems = useRail ? items : [];
-  const menuItems = useRail ? items.find((item3) => item3.value === activeRail)?.children ?? [] : items;
+  const menuItems = useRail ? items.find((item4) => item4.value === activeRail)?.children ?? [] : items;
   const showMenu = !useRail || menuItems.length > 0;
   const [uncontrolledMenuWidth, setUncontrolledMenuWidth] = useState(
     () => defaultMenuWidth ?? GNB_MENU_WIDTH
@@ -9285,13 +9802,26 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
     "topContent"
   ) : null;
   const systemMenuContext = useMemo(
-    () => ({ color, folded: false }),
-    [color]
+    () => ({ color, folded: false, placement: "panel", active: !railFolded }),
+    [color, railFolded]
   );
   const systemFoldedContext = useMemo(
-    () => ({ color, folded: true }),
+    () => ({ color, folded: true, placement: "panel", active: true }),
     [color]
   );
+  const systemTopContext = useMemo(
+    () => ({ color, folded: false, placement: "top", active: true }),
+    [color]
+  );
+  const systemTopBox = header === "full" && system ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex shrink-0 items-center",
+      style: { marginLeft: topContentBox ? H.topGap : "auto" },
+      children: /* @__PURE__ */ jsx(SGnbSystemContext.Provider, { value: systemTopContext, children: system })
+    },
+    "system"
+  ) : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -9333,7 +9863,8 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
               launcherButton,
               foldButton,
               logoBox,
-              topContentBox
+              topContentBox,
+              systemTopBox
             ] })
           }
         ),
@@ -9409,11 +9940,11 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
                                 paddingTop: M.bodyPaddingY,
                                 paddingBottom: M.bodyPaddingY
                               },
-                              children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item3) => renderItem(item3, 1)) })
+                              children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item4) => renderItem(item4, 1)) })
                             }
                           ),
                           menuFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: menuFooter }),
-                          system && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(SGnbSystemContext.Provider, { value: systemMenuContext, children: system }) })
+                          !isFull && system && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(SGnbSystemContext.Provider, { value: systemMenuContext, children: system }) })
                         ]
                       }
                     )
@@ -9450,9 +9981,10 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
 
 // src/components/SGnbSystem/gnbSystem.config.ts
 var GNB_SYSTEM_COLORS = ["light", "dark"];
+var GNB_SYSTEM_PLACEMENTS = ["panel", "top"];
 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 item3 = (p) => `var(--cmp-gnb-system-item-${p})`;
 var alert = (p) => `var(--cmp-gnb-system-alertButton-${p})`;
 var GNB_SYSTEM_COLOR_CONFIG = {
   light: {
@@ -9480,6 +10012,27 @@ var GNB_SYSTEM_COLOR_CONFIG = {
     alertHoverBg: void 0
   }
 };
+var GNB_SYSTEM_TOP_COLOR_CONFIG = {
+  light: {
+    item: "light",
+    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: {
+    item: "darker",
+    divider: panel("divider-color-darker"),
+    domainBg: domain("darker-bg"),
+    domainText: domain("darker-text"),
+    alertIcon: alert("icon-color-notification-dark"),
+    alertCount: alert("count-color-dark"),
+    // darker 면에는 알림 hover 배경 토큰이 없다 → 행 기본 hover 를 그대로 쓴다.
+    alertHoverBg: void 0
+  }
+};
 var GNB_SYSTEM_LAYOUT = {
   /** 펼친 패널의 안쪽 여백 */
   padding: "var(--cmp-gnb-system-project-padding)",
@@ -9491,17 +10044,17 @@ var GNB_SYSTEM_LAYOUT = {
    */
   gap: panel("gap"),
   /** 행 높이 */
-  itemHeight: item2("height"),
+  itemHeight: item3("height"),
   /** 행 라운드 */
-  itemRadius: item2("radius"),
+  itemRadius: item3("radius"),
   /** 아이콘 프레임 한 변 */
-  iconFrame: item2("icon-frame"),
+  iconFrame: item3("icon-frame"),
   /** 아이콘 글리프 크기 */
-  iconGlyph: item2("icon-glyph"),
+  iconGlyph: item3("icon-glyph"),
   /** 아이콘 프레임 라운드 */
-  iconRadius: item2("icon-radius"),
+  iconRadius: item3("icon-radius"),
   /** 아이콘 프레임 ↔ 라벨 간격 */
-  iconLabelGap: item2("iconLabelGap"),
+  iconLabelGap: item3("iconLabelGap"),
   /** 알림 버튼 좌우 여백 */
   alertPaddingX: alert("paddingX"),
   /** 설정 버튼 좌우 여백 */
@@ -9514,7 +10067,7 @@ var GNB_SYSTEM_LAYOUT = {
 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 }) {
+function TokenIcon3({ name, size }) {
   return /* @__PURE__ */ jsx(SIcon, { name, size: "100%", style: { width: size, height: size } });
 }
 function SystemButton({
@@ -9529,14 +10082,20 @@ function SystemButton({
   dot,
   accentColor,
   stretch,
+  buttonRef,
+  hasPopup,
+  expanded,
   onClick
 }) {
   const c = SYSTEM_ACTION_BUTTON_COLOR_CONFIG[color];
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      ref: buttonRef,
       type: "button",
       "aria-label": label ? void 0 : ariaLabel,
+      "aria-haspopup": hasPopup ? "dialog" : void 0,
+      "aria-expanded": hasPopup ? expanded : void 0,
       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)",
@@ -9565,7 +10124,7 @@ function SystemButton({
             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__ */ jsx(TokenIcon2, { name: icon, size: GNB_SYSTEM_LAYOUT.iconGlyph }),
+              /* @__PURE__ */ jsx(TokenIcon3, { name: icon, size: GNB_SYSTEM_LAYOUT.iconGlyph }),
               dot && /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -9603,11 +10162,33 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
 }, ref) {
   const gnb2 = useContext(SGnbSystemContext);
   const color = colorProp ?? gnb2?.color ?? "light";
-  const folded = foldedProp ?? gnb2?.folded ?? false;
+  const placement = gnb2?.placement ?? "panel";
+  const isTop = placement === "top";
+  const folded = !isTop && (foldedProp ?? gnb2?.folded ?? false);
+  const active = gnb2?.active ?? true;
   const c = GNB_SYSTEM_COLOR_CONFIG[color];
+  const t = GNB_SYSTEM_TOP_COLOR_CONFIG[color];
+  const itemColor = isTop ? t.item : color;
+  const dividerColor = isTop ? t.divider : c.divider;
+  const domainBg = isTop ? t.domainBg : c.domainBg;
+  const domainText = isTop ? t.domainText : c.domainText;
+  const alertIconColor = isTop ? t.alertIcon : c.alertIcon;
+  const alertCountColor = isTop ? t.alertCount : c.alertCount;
+  const alertHoverBg = isTop ? t.alertHoverBg : c.alertHoverBg;
   const hasActions = (actions?.length ?? 0) > 0;
   const hasDomain = domain2 != null;
   const hasUserBlock = Boolean(alert2 || setting || account);
+  const foldedAccountRef = useRef(null);
+  const [accountOpen, setAccountOpen] = useState(false);
+  const commitAccountOpen = (next) => {
+    setAccountOpen(next);
+    account?.onOpenChange?.(next);
+  };
+  useEffect(() => {
+    if (active || !accountOpen) return;
+    setAccountOpen(false);
+    account?.onOpenChange?.(false);
+  }, [active, accountOpen, account]);
   const alertCount = alert2?.count ?? 0;
   const notified = alertCount > 0;
   const alertLabel = alert2?.label ?? GNB_SYSTEM_ALERT_LABEL;
@@ -9615,20 +10196,113 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
   const alertButton = alert2 && /* @__PURE__ */ jsx(
     SystemButton,
     {
-      color,
-      icon: notified ? "alert" : "bell",
-      label: folded ? void 0 : alertLabel,
+      color: itemColor,
+      icon: notified ? "bellRinging" : "bell",
+      label: folded || isTop ? void 0 : alertLabel,
       ariaLabel: alertLabel,
       paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
-      iconColor: notified ? c.alertIcon : void 0,
-      hoverBg: notified ? c.alertHoverBg : void 0,
+      iconColor: notified ? alertIconColor : void 0,
+      hoverBg: notified ? alertHoverBg : void 0,
       count: folded ? void 0 : alertCount,
       dot: folded && notified,
-      accentColor: c.alertCount,
-      stretch: !folded,
+      accentColor: alertCountColor,
+      stretch: !folded && !isTop,
       onClick: alert2.onClick
     }
   );
+  const settingButton = setting && /* @__PURE__ */ jsx(
+    SystemButton,
+    {
+      color: itemColor,
+      icon: "setting",
+      label: isTop ? void 0 : settingLabel,
+      ariaLabel: settingLabel,
+      paddingX: GNB_SYSTEM_LAYOUT.settingPaddingX,
+      stretch: !isTop && !alert2,
+      onClick: setting.onClick
+    }
+  );
+  const accountButton = account && /* @__PURE__ */ jsx(
+    SSystemActionButton,
+    {
+      color: itemColor,
+      type: "account",
+      label: account.label,
+      onClick: account.onClick,
+      option: { ...account.listBox, open: accountOpen, onOpenChange: commitAccountOpen },
+      className: isTop ? "w-auto shrink-0" : void 0
+    }
+  );
+  const domainTag = hasDomain && /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "typo-body-sm-medium box-border",
+        isTop ? "shrink-0 whitespace-nowrap" : "w-full truncate text-center"
+      ),
+      style: {
+        paddingInline: GNB_SYSTEM_LAYOUT.domainPaddingX,
+        paddingBlock: GNB_SYSTEM_LAYOUT.domainPaddingY,
+        borderRadius: GNB_SYSTEM_LAYOUT.domainRadius,
+        backgroundColor: domainBg,
+        color: domainText
+      },
+      children: domain2
+    }
+  );
+  if (isTop) {
+    const segments = [];
+    actions?.forEach(
+      ({ value, ...action2 }, index) => segments.push({
+        key: `action-${value ?? index}`,
+        node: /* @__PURE__ */ jsx(
+          SSystemActionButton,
+          {
+            color: itemColor,
+            ...action2,
+            className: cn("w-auto shrink-0", action2.className)
+          }
+        )
+      })
+    );
+    if (alertButton) segments.push({ key: "alert", node: alertButton });
+    if (settingButton) segments.push({ key: "setting", node: settingButton });
+    if (domainTag || accountButton) {
+      segments.push({
+        key: "user",
+        node: /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center", style: { gap: GNB_SYSTEM_LAYOUT.gap }, children: [
+          domainTag,
+          accountButton
+        ] })
+      });
+    }
+    if (segments.length === 0) return null;
+    return (
+      // 상단바 줄은 화면 맨 위에 있다 — 계정 리스트박스가 위가 아니라 아래로 펼쳐져야 한다.
+      /* @__PURE__ */ jsx(AccountListBoxAnchorProvider, { value: "top", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: cn("flex items-center", className),
+          style: { gap: GNB_SYSTEM_LAYOUT.gap, ...style },
+          "data-color": color,
+          "data-placement": "top",
+          ...rest,
+          children: segments.map(({ key, node }, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            index > 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "h-sd-16 w-px shrink-0",
+                style: { backgroundColor: dividerColor },
+                "aria-hidden": true
+              }
+            ),
+            node
+          ] }, key))
+        }
+      ) })
+    );
+  }
   const panelStyle = {
     backgroundColor: c.bg,
     // 색에 따라 경계선이 없을 수 있다 — 배경 차이만으로 경계가 읽히는 dark 가 그렇다.
@@ -9645,6 +10319,7 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
         className: cn("box-border flex w-full flex-col", className),
         style: panelStyle,
         "data-color": color,
+        "data-placement": "panel",
         "data-folded": "",
         ...rest,
         children: [
@@ -9652,11 +10327,27 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
           account && /* @__PURE__ */ jsx(
             SystemButton,
             {
-              color,
+              color: itemColor,
               icon: "user",
               ariaLabel: account.label ?? "account",
               paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
-              onClick: account.onClick
+              buttonRef: foldedAccountRef,
+              hasPopup: true,
+              expanded: accountOpen,
+              onClick: () => {
+                account.onClick?.();
+                commitAccountOpen(!accountOpen);
+              }
+            }
+          ),
+          account && /* @__PURE__ */ jsx(
+            AccountListBoxPortal,
+            {
+              open: accountOpen,
+              onOpenChange: commitAccountOpen,
+              anchorRef: foldedAccountRef,
+              ariaLabel: account.label,
+              content: account.listBox ?? {}
             }
           )
         ]
@@ -9671,31 +10362,19 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
       className: cn("box-border flex w-full flex-col", className),
       style: { ...panelStyle, gap: GNB_SYSTEM_LAYOUT.gap },
       "data-color": color,
+      "data-placement": "panel",
       ...rest,
       children: [
         actions?.map(({ value, ...action2 }, index) => /* @__PURE__ */ jsx(
           SSystemActionButton,
           {
-            color,
+            color: itemColor,
             ...action2
           },
           value ?? index
         )),
-        hasActions && (hasDomain || hasUserBlock) && /* @__PURE__ */ jsx("div", { className: "h-px shrink-0", style: { backgroundColor: c.divider } }),
-        domain2 != null && /* @__PURE__ */ 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
-          }
-        ),
+        hasActions && (hasDomain || hasUserBlock) && /* @__PURE__ */ jsx("div", { className: "h-px shrink-0", style: { backgroundColor: dividerColor } }),
+        domainTag,
         hasUserBlock && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
           (alert2 || setting) && /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: GNB_SYSTEM_LAYOUT.gap }, children: [
             alertButton,
@@ -9703,32 +10382,13 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
               "span",
               {
                 className: "h-sd-16 w-px shrink-0",
-                style: { backgroundColor: c.divider },
+                style: { backgroundColor: dividerColor },
                 "aria-hidden": true
               }
             ),
-            setting && /* @__PURE__ */ jsx(
-              SystemButton,
-              {
-                color,
-                icon: "setting",
-                label: settingLabel,
-                ariaLabel: settingLabel,
-                paddingX: GNB_SYSTEM_LAYOUT.settingPaddingX,
-                stretch: !alert2,
-                onClick: setting.onClick
-              }
-            )
+            settingButton
           ] }),
-          account && /* @__PURE__ */ jsx(
-            SSystemActionButton,
-            {
-              color,
-              type: "account",
-              label: account.label,
-              onClick: account.onClick
-            }
-          )
+          accountButton
         ] })
       ]
     }
@@ -10349,19 +11009,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(item3, index) {
-  return item3.value ?? String(index + 1);
+function getItemValue(item4, index) {
+  return item4.value ?? String(index + 1);
 }
 function groupAdjacentItems(items) {
   return items.reduce(
-    (groups, item3, index) => {
-      const currentGroup = item3.group;
+    (groups, item4, index) => {
+      const currentGroup = item4.group;
       const previous = groups[groups.length - 1];
       if (currentGroup && previous?.group === currentGroup) {
-        previous.items.push(item3);
+        previous.items.push(item4);
         return groups;
       }
-      groups.push({ group: currentGroup, startIndex: index, items: [item3] });
+      groups.push({ group: currentGroup, startIndex: index, items: [item4] });
       return groups;
     },
     []
@@ -10391,15 +11051,15 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
   const verticalItemRefs = useRef([]);
   const activeIndex = Math.max(
     0,
-    items.findIndex((item3, index) => getItemValue(item3, index) === value)
+    items.findIndex((item4, index) => getItemValue(item4, index) === value)
   );
   const lastCompletedIndex = items.reduce(
-    (lastIndex, item3, index) => item3.completed === true ? index : lastIndex,
+    (lastIndex, item4, index) => item4.completed === true ? index : lastIndex,
     -1
   );
   const resolvedClickableIndex = lastCompletedIndex + 1;
   const [visitedMaxIndex, setVisitedMaxIndex] = useState(activeIndex);
-  const firstErrorIndex = items.findIndex((item3) => item3.error === true);
+  const firstErrorIndex = items.findIndex((item4) => item4.error === true);
   useImperativeHandle(
     ref,
     () => ({
@@ -10427,18 +11087,18 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
       transform: `translateY(${activeItem.offsetTop}px)`
     });
   }, [activeIndex, vertical, items]);
-  const getState = (item3, index) => {
+  const getState = (item4, index) => {
     if (index === activeIndex) return "active";
-    if (item3.completed != null) return item3.completed ? "completed" : "default";
+    if (item4.completed != null) return item4.completed ? "completed" : "default";
     return "default";
   };
-  const emitValueChange = (item3, index) => {
-    onValueChange?.(getItemValue(item3, index), item3, index);
+  const emitValueChange = (item4, index) => {
+    onValueChange?.(getItemValue(item4, index), item4, index);
   };
   const isWithinClickableIndex = (index) => index <= resolvedClickableIndex;
-  const renderStepContent = (item3, index, options = {}) => {
+  const renderStepContent = (item4, index, options = {}) => {
     const { isVertical = false, roleListItem = true, hovered = false } = options;
-    const state2 = getState(item3, index);
+    const state2 = getState(item4, index);
     const isHorizontalCompleted = !isVertical && state2 === "completed";
     const isVerticalCompleted = isVertical && state2 === "completed";
     const isVerticalLastActive = isVertical && state2 === "default" && index === visitedMaxIndex;
@@ -10513,12 +11173,12 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
               children: showsCheckIcon ? /* @__PURE__ */ jsx(SIcon, { name: "check", size: STEPPER_LAYOUT.sequenceIcon, color: "currentColor" }) : index + 1
             }
           ),
-          /* @__PURE__ */ jsx("span", { children: item3.label })
+          /* @__PURE__ */ jsx("span", { children: item4.label })
         ]
       }
     );
   };
-  const renderClickableStepContent = (item3, index, isVertical = false) => {
+  const renderClickableStepContent = (item4, index, isVertical = false) => {
     const isDisabled = !isWithinClickableIndex(index);
     return /* @__PURE__ */ jsx(
       "button",
@@ -10531,9 +11191,9 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
         ),
         style: { font: "inherit", color: "inherit" },
         onClick: () => {
-          if (!isDisabled) emitValueChange(item3, index);
+          if (!isDisabled) emitValueChange(item4, index);
         },
-        children: renderStepContent(item3, index, { isVertical, roleListItem: false })
+        children: renderStepContent(item4, index, { isVertical, roleListItem: false })
       }
     );
   };
@@ -10592,10 +11252,10 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
                       children: /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: group.group })
                     }
                   ),
-                  group.items.map((item3, itemIndex) => {
+                  group.items.map((item4, itemIndex) => {
                     const index = group.startIndex + itemIndex;
-                    const state2 = getState(item3, index);
-                    const itemValue = getItemValue(item3, index);
+                    const state2 = getState(item4, index);
+                    const itemValue = getItemValue(item4, index);
                     const canClickItem = isClickable && isWithinClickableIndex(index);
                     const isDisabled = !canClickItem;
                     const isHovered = hoveredIndex === index && canClickItem && state2 !== "active";
@@ -10613,12 +11273,12 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
                     const handleMouseLeave = () => {
                       setHoveredIndex((current) => current === index ? null : current);
                     };
-                    const stepContent = renderStepContent(item3, index, {
+                    const stepContent = renderStepContent(item4, index, {
                       isVertical: true,
                       roleListItem: false,
                       hovered: isHovered
                     });
-                    const errorBadge = item3.error ? /* @__PURE__ */ jsx(
+                    const errorBadge = item4.error ? /* @__PURE__ */ jsx(
                       "span",
                       {
                         "aria-hidden": "true",
@@ -10633,7 +11293,7 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
                     ) : null;
                     const isTooltipHovered = tooltipHoverValue === itemValue;
                     const isCustomTooltipOpen = customTooltipOpen && index === firstErrorIndex;
-                    const showTooltip = item3.error === true && (isTooltipHovered || isCustomTooltipOpen);
+                    const showTooltip = item4.error === true && (isTooltipHovered || isCustomTooltipOpen);
                     const handleTooltipMouseEnter = () => setTooltipHoverValue(itemValue);
                     const handleTooltipMouseLeave = () => {
                       setTooltipHoverValue((current) => current === itemValue ? null : current);
@@ -10657,7 +11317,7 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
                             onMouseEnter: handleTooltipMouseEnter,
                             onMouseLeave: handleTooltipMouseLeave,
                             onClick: isClickable ? () => {
-                              if (!isDisabled) emitValueChange(item3, index);
+                              if (!isDisabled) emitValueChange(item4, index);
                             } : void 0,
                             children: [
                               stepContent,
@@ -10689,13 +11349,13 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
                               {
                                 type: "button",
                                 disabled: isDisabled,
-                                "aria-label": item3.label,
+                                "aria-label": item4.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(item3, index);
+                                  if (!isDisabled) emitValueChange(item4, index);
                                 }
                               }
                             ),
@@ -10746,9 +11406,9 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
         lineHeight: config.lineHeight,
         ...style
       },
-      children: items.map((item3, index) => {
-        const state2 = getState(item3, index);
-        const content = isClickable ? /* @__PURE__ */ jsx("span", { role: "listitem", "aria-current": state2 === "active" ? "step" : void 0, children: renderClickableStepContent(item3, index) }) : renderStepContent(item3, index);
+      children: items.map((item4, index) => {
+        const state2 = getState(item4, index);
+        const content = isClickable ? /* @__PURE__ */ jsx("span", { role: "listitem", "aria-current": state2 === "active" ? "step" : void 0, children: renderClickableStepContent(item4, index) }) : renderStepContent(item4, index);
         return /* @__PURE__ */ jsxs(
           "span",
           {
@@ -10782,7 +11442,7 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
               )
             ]
           },
-          getItemValue(item3, index)
+          getItemValue(item4, index)
         );
       })
     }
@@ -11333,7 +11993,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   const selectedAnchorIndex = useMemo(() => {
     if (selected.length === 0) return -1;
     const selectedSet = new Set(selected);
-    return navigableItems.findIndex((item3) => item3.value != null && selectedSet.has(item3.value));
+    return navigableItems.findIndex((item4) => item4.value != null && selectedSet.has(item4.value));
   }, [navigableItems, selected]);
   selectedAnchorRef.current = selectedAnchorIndex;
   const triggerText = (() => {
@@ -11627,7 +12287,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
                           setFocusedIndex(-1);
                           return;
                         }
-                        const index = navigableItems.findIndex((item3) => item3.key === key);
+                        const index = navigableItems.findIndex((item4) => item4.key === key);
                         if (index >= 0) setFocusedIndex(index);
                       }
                     }
@@ -13397,7 +14057,9 @@ function SRadio({
     {
       ...labelInteractiveProps,
       className: cn(
-        "inline-flex items-center gap-[8px]",
+        // align-middle: 텍스트 baseline 이 아니라 줄 중앙에 맞춘다 — SCheckbox 와 같은 규칙.
+        // td 처럼 strut(셀 폰트의 줄 상자)이 라디오보다 큰 곳에서 위로 치우치지 않게 한다.
+        "inline-flex items-center gap-(--cmp-radio-gap) align-middle",
         disabled ? "cursor-not-allowed" : "cursor-pointer",
         className
       ),
@@ -13419,17 +14081,21 @@ function SRadio({
           "span",
           {
             className: cn(
-              "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full border border-solid border-[color:var(--rd-border)] bg-[var(--rd-bg)]",
-              !disabled && !checked && "hover:border-[color:var(--cmp-radio-border-hover)] hover:bg-[var(--cmp-radio-bg-hover)]"
+              "relative flex h-(--cmp-radio-size) w-(--cmp-radio-size) shrink-0 items-center justify-center rounded-(--cmp-radio-radius) border-(length:--cmp-radio-borderWidth) border-solid border-(--rd-border) bg-(--rd-bg)",
+              !disabled && !checked && "hover:border-(--cmp-radio-border-hover) hover:bg-(--cmp-radio-bg-hover)"
             ),
             style: {
               "--rd-bg": disabled ? "var(--cmp-radio-bg-disabled)" : "var(--cmp-radio-bg-default)",
               "--rd-border": disabled ? "var(--cmp-radio-border-disabled)" : checked ? "var(--cmp-radio-border-active)" : "var(--cmp-radio-border-default)"
             },
-            children: checked && /* @__PURE__ */ jsx(
+            children: checked && // dot 은 반드시 flow 밖(absolute)에 둔다. in-flow 자식으로 넣으면 동그라미(flex 컨테이너)의
+            // 합성 baseline 이 "border-box 하단"에서 "dot 하단"으로 옮겨가고, inline-flex 인 SRadio·
+            // SRadioGroup 의 baseline 까지 따라 움직여 선택할 때마다 줄 상자가 3px 흔들린다
+            // (SKeyValueTable 의 td 처럼 baseline 정렬되는 곳에서 눈에 띈다).
+            /* @__PURE__ */ jsx(
               "span",
               {
-                className: "h-[10px] w-[10px] rounded-full",
+                className: "absolute top-1/2 left-1/2 h-(--cmp-radio-dot-size) w-(--cmp-radio-dot-size) -translate-x-1/2 -translate-y-1/2 rounded-(--cmp-radio-radius)",
                 style: {
                   background: disabled ? "var(--cmp-radio-dot-disabled)" : "var(--cmp-radio-dot-default)"
                 }
@@ -13440,13 +14106,20 @@ function SRadio({
         label && /* @__PURE__ */ jsxs(
           "span",
           {
-            className: "grid text-[12px] leading-[20px]",
+            className: "grid",
             style: {
               color: disabled ? "var(--cmp-radio-label-disabled)" : "var(--cmp-radio-label-default)"
             },
             children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "invisible font-medium", style: { gridArea: "1 / 1" }, children: label }),
-              /* @__PURE__ */ jsx("span", { style: { gridArea: "1 / 1", fontWeight: checked ? 500 : 400 }, children: label })
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "typo-body-sm-medium invisible", style: { gridArea: "1 / 1" }, children: label }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: checked ? "typo-body-sm-medium" : "typo-body-sm-default",
+                  style: { gridArea: "1 / 1" },
+                  children: label
+                }
+              )
             ]
           }
         )
@@ -13469,7 +14142,8 @@ function SRadioGroup({
     {
       role: "radiogroup",
       className: cn(
-        "inline-flex",
+        // align-middle 은 SRadio 와 같은 이유 — inline 문맥(td 등)에서 줄 중앙에 맞춘다.
+        "inline-flex align-middle",
         direction === "vertical" ? "flex-col gap-[var(--cmp-radio-group-gap-vertical)]" : "flex-row gap-[var(--cmp-radio-group-gap-horizontal)]",
         className
       ),
@@ -13705,7 +14379,7 @@ function SCalendar({
         }) }),
         legend.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(SDivider, {}),
-          /* @__PURE__ */ 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__ */ jsxs(
+          /* @__PURE__ */ 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((item4) => /* @__PURE__ */ jsxs(
             "span",
             {
               className: "inline-flex items-center gap-[var(--cmp-datepicker-calendar-legend-gap)]",
@@ -13714,14 +14388,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(item3.color) },
+                    style: { backgroundColor: resolveColor(item4.color) },
                     "aria-hidden": true
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { children: item3.label })
+                /* @__PURE__ */ jsx("span", { children: item4.label })
               ]
             },
-            `${item3.color}|${item3.label}`
+            `${item4.color}|${item4.label}`
           )) })
         ] })
       ]
@@ -16843,19 +17517,19 @@ function EditorToolbarBar({
     closeLinkEditor();
   };
   const visible = [];
-  for (const item3 of items) {
-    if (item3 === "image" && !onImageUpload) continue;
-    if (item3 === "|" && (visible.length === 0 || visible[visible.length - 1] === "|")) continue;
-    visible.push(item3);
+  for (const item4 of items) {
+    if (item4 === "image" && !onImageUpload) continue;
+    if (item4 === "|" && (visible.length === 0 || visible[visible.length - 1] === "|")) continue;
+    visible.push(item4);
   }
   while (visible.length > 0 && visible[visible.length - 1] === "|") visible.pop();
   const groups = [[]];
-  for (const item3 of visible) {
-    if (item3 === "|") groups.push([]);
-    else groups[groups.length - 1].push(item3);
+  for (const item4 of visible) {
+    if (item4 === "|") groups.push([]);
+    else groups[groups.length - 1].push(item4);
   }
-  const node = (item3) => {
-    switch (item3) {
+  const node = (item4) => {
+    switch (item4) {
       case "heading":
         return /* @__PURE__ */ jsxs(RDropdown2.Root, { modal: !insideModal, children: [
           /* @__PURE__ */ jsx(RDropdown2.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxs(
@@ -16890,7 +17564,7 @@ function EditorToolbarBar({
               level
             ))
           ] }) })
-        ] }, item3);
+        ] }, item4);
       case "fontSize":
         return /* @__PURE__ */ jsxs(RDropdown2.Root, { modal: !insideModal, children: [
           /* @__PURE__ */ jsx(RDropdown2.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxs(ToolbarButton, { label: "\uAE00\uC790 \uD06C\uAE30", disabled: off, className: "px-[6px]", children: [
@@ -16929,7 +17603,7 @@ function EditorToolbarBar({
               ]
             }
           ) })
-        ] }, item3);
+        ] }, item4);
       case "bold":
         return /* @__PURE__ */ jsx(
           ToolbarButton,
@@ -16941,7 +17615,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleBold().run(),
             children: /* @__PURE__ */ jsx(IconBold, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "italic":
         return /* @__PURE__ */ jsx(
@@ -16954,7 +17628,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleItalic().run(),
             children: /* @__PURE__ */ jsx(IconItalic, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "underline":
         return /* @__PURE__ */ jsx(
@@ -16967,7 +17641,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleUnderline().run(),
             children: /* @__PURE__ */ jsx(IconUnderline, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "strike":
         return /* @__PURE__ */ jsx(
@@ -16980,7 +17654,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleStrike().run(),
             children: /* @__PURE__ */ jsx(IconStrike, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "code":
         return /* @__PURE__ */ jsx(
@@ -16993,7 +17667,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleCode().run(),
             children: /* @__PURE__ */ jsx(IconCode, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "color":
         if (mobile)
@@ -17005,7 +17679,7 @@ function EditorToolbarBar({
               onClick: () => setMobileView("color"),
               children: /* @__PURE__ */ jsx(ColorIndicator, { color: off ? "currentColor" : activeColor, children: /* @__PURE__ */ jsx(IconTextColor, { size: ICON_SIZE }) })
             },
-            item3
+            item4
           );
         return /* @__PURE__ */ jsxs(RDropdown2.Root, { modal: !insideModal, children: [
           /* @__PURE__ */ jsx(RDropdown2.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsx(ToolbarButton, { label: "\uAE00\uC790\uC0C9", disabled: off, children: /* @__PURE__ */ jsx(ColorIndicator, { color: off ? "currentColor" : activeColor, children: /* @__PURE__ */ jsx(IconTextColor, { size: ICON_SIZE }) }) }) }),
@@ -17020,7 +17694,7 @@ function EditorToolbarBar({
               onClear: clearColor
             }
           ) }) })
-        ] }, item3);
+        ] }, item4);
       case "alignLeft":
         return /* @__PURE__ */ jsx(
           ToolbarButton,
@@ -17032,7 +17706,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("left").run(),
             children: /* @__PURE__ */ jsx(IconAlignLeft, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "alignCenter":
         return /* @__PURE__ */ jsx(
@@ -17045,7 +17719,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("center").run(),
             children: /* @__PURE__ */ jsx(IconAlignCenter, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "alignRight":
         return /* @__PURE__ */ jsx(
@@ -17058,7 +17732,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("right").run(),
             children: /* @__PURE__ */ jsx(IconAlignRight, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "alignJustify":
         return /* @__PURE__ */ jsx(
@@ -17071,7 +17745,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setTextAlign("justify").run(),
             children: /* @__PURE__ */ jsx(IconAlignJustify, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "bulletList":
         return /* @__PURE__ */ jsx(
@@ -17084,7 +17758,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleBulletList().run(),
             children: /* @__PURE__ */ jsx(IconBulletList, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "orderedList":
         return /* @__PURE__ */ jsx(
@@ -17097,7 +17771,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleOrderedList().run(),
             children: /* @__PURE__ */ jsx(IconOrderedList, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "taskList":
         return /* @__PURE__ */ jsx(
@@ -17110,7 +17784,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleTaskList().run(),
             children: /* @__PURE__ */ jsx(IconTaskList, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "list": {
         const ListIcon = state2.orderedList ? IconOrderedList : state2.taskList ? IconTaskList : IconBulletList;
@@ -17155,7 +17829,7 @@ function EditorToolbarBar({
               }
             )
           ] }) })
-        ] }, item3);
+        ] }, item4);
       }
       case "blockquote":
         return /* @__PURE__ */ jsx(
@@ -17168,7 +17842,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleBlockquote().run(),
             children: /* @__PURE__ */ jsx(IconBlockquote, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "codeBlock":
         return /* @__PURE__ */ jsx(
@@ -17181,7 +17855,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.toggleCodeBlock().run(),
             children: /* @__PURE__ */ jsx(IconCodeBlock, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "horizontalRule":
         return /* @__PURE__ */ jsx(
@@ -17192,7 +17866,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.setHorizontalRule().run(),
             children: /* @__PURE__ */ jsx(IconHorizontalRule, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "link":
         if (mobile)
@@ -17205,7 +17879,7 @@ function EditorToolbarBar({
               onClick: () => setMobileView("link"),
               children: /* @__PURE__ */ jsx(IconLink, { size: ICON_SIZE })
             },
-            item3
+            item4
           );
         return /* @__PURE__ */ jsxs(RPopover11.Root, { open: linkOpen, onOpenChange: setLinkOpen, children: [
           /* @__PURE__ */ jsx(RPopover11.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsx(ToolbarButton, { label: "\uB9C1\uD06C", active: state2.link, disabled: off, children: /* @__PURE__ */ jsx(IconLink, { size: ICON_SIZE }) }) }),
@@ -17230,7 +17904,7 @@ function EditorToolbarBar({
               )
             }
           ) })
-        ] }, item3);
+        ] }, item4);
       case "image":
         return /* @__PURE__ */ jsxs(
           ToolbarButton,
@@ -17244,7 +17918,7 @@ function EditorToolbarBar({
               /* @__PURE__ */ jsx("span", { className: "text-[12px] leading-[20px]", children: "\uC774\uBBF8\uC9C0" })
             ]
           },
-          item3
+          item4
         );
       case "table":
         return /* @__PURE__ */ jsxs(
@@ -17365,7 +18039,7 @@ function EditorToolbarBar({
               ] }) })
             ]
           },
-          item3
+          item4
         );
       case "undo":
         return /* @__PURE__ */ jsx(
@@ -17376,7 +18050,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.undo().run(),
             children: /* @__PURE__ */ jsx(IconUndo, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       case "redo":
         return /* @__PURE__ */ jsx(
@@ -17387,7 +18061,7 @@ function EditorToolbarBar({
             onClick: () => chain()?.redo().run(),
             children: /* @__PURE__ */ jsx(IconRedo, { size: ICON_SIZE })
           },
-          item3
+          item4
         );
       default:
         return null;
@@ -17968,6 +18642,13 @@ var keywordEntries = (value) => {
   }
   return [];
 };
+var CSV_PASTE_SEPARATOR = /[,\r\n\t]+/;
+var newKeywordEntries = (entries3, candidates) => candidates.reduce((acc, raw) => {
+  const next = raw.trim();
+  if (next === "" || entries3.includes(next) || acc.includes(next)) return acc;
+  return [...acc, next];
+}, []);
+var withKeywordEntries = (field, current, nextEntries) => field.matchModes ? { keywords: nextEntries, mode: isKeywordValue(current) ? current.mode : "contains" } : nextEntries;
 var isEmptyValue = (value) => {
   if (value == null) return true;
   if (Array.isArray(value)) return value.length === 0 || value.every((v) => v == null || v === "");
@@ -18018,8 +18699,18 @@ var createPeriodValue = (unit, maxRange) => ({
   unit,
   value: getDefaultPeriodInputValue(unit, maxRange)
 });
+var singleOptionValue = (field) => {
+  if (field.type !== "select" && field.type !== "select-multi") return void 0;
+  const options = field.options ?? [];
+  if (options.length !== 1 || options[0].disabled === true) return void 0;
+  return options[0].value;
+};
 var resolveFieldDefault = (field) => {
   if (field.defaultValue !== void 0 && isFixedField(field)) return field.defaultValue;
+  if (isFixedField(field)) {
+    const only = singleOptionValue(field);
+    if (only !== void 0) return field.type === "select-multi" ? [only] : only;
+  }
   if (field.type === "datepicker-range") {
     if (!isInlineDateField(field) && !field.required) return void 0;
     const today = todayIso();
@@ -18118,7 +18809,7 @@ var displayValue = (field, value) => {
   if (field.type === "select-multi") {
     const values = toArrayValue(value);
     const selectableValues = (field.options ?? []).filter((option) => !option.disabled).map((option) => option.value);
-    if (selectableValues.length > 0 && selectableValues.every((selectableValue) => values.includes(selectableValue))) {
+    if (selectableValues.length > 1 && selectableValues.every((selectableValue) => values.includes(selectableValue))) {
       return "\uC804\uCCB4";
     }
     return formatValueList(values.map((v) => optionLabel(field, v)));
@@ -18182,7 +18873,7 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
   const prevOpenKeyRef = useRef(null);
   const valuesRef = useRef(values);
   valuesRef.current = values;
-  const lastSearchedValuesRef = useRef(values);
+  const lastSearchedValuesRef = useRef(null);
   const invalidGroups = useMemo(() => {
     const invalid = /* @__PURE__ */ new Set();
     groups.forEach((group, groupIndex) => {
@@ -18200,7 +18891,8 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
   );
   const runSearch = useCallback(
     (next) => {
-      if (valuesMapEqual(lastSearchedValuesRef.current, next)) return;
+      const last = lastSearchedValuesRef.current;
+      if (last != null && valuesMapEqual(last, next)) return;
       if (!isGroupsValid(next)) return;
       if (!isRequiredSatisfied(next)) return;
       lastSearchedValuesRef.current = next;
@@ -18208,13 +18900,36 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
     },
     [isGroupsValid, isRequiredSatisfied, onSearch]
   );
+  const keywordDraftRef = useRef(null);
+  const commitKeywordDraft = useCallback(
+    (key) => {
+      const draft = keywordDraftRef.current;
+      keywordDraftRef.current = null;
+      if (draft == null || draft.key !== key) return null;
+      const field = fields.find((f) => f.key === key);
+      if (field == null || field.type !== "keyword" || disabled || field.disabled) return null;
+      const current = valuesRef.current[key];
+      const entries3 = keywordEntries(current);
+      const added = newKeywordEntries(
+        entries3,
+        field.input === "csv" ? draft.text.split(CSV_PASTE_SEPARATOR) : [draft.text]
+      );
+      if (added.length === 0) return null;
+      const nextValue = withKeywordEntries(field, current, [...entries3, ...added]);
+      const next = { ...valuesRef.current, [key]: nextValue };
+      onValueChange?.(next);
+      onFilterChange?.({ key, value: nextValue, values: next });
+      return next;
+    },
+    [disabled, fields, onFilterChange, onValueChange]
+  );
   useEffect(() => {
     const prevKey = prevOpenKeyRef.current;
     if (prevKey != null && prevKey !== openKey) {
-      runSearch(valuesRef.current);
+      runSearch(commitKeywordDraft(prevKey) ?? valuesRef.current);
     }
     prevOpenKeyRef.current = openKey;
-  }, [openKey, runSearch]);
+  }, [commitKeywordDraft, openKey, runSearch]);
   useEffect(() => {
     fields.forEach((field) => {
       if (isEmptyValue(values[field.key])) dismissedRef.current.delete(field.key);
@@ -18313,6 +19028,7 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
     runSearch(emitValue(key, def !== void 0 ? def : null));
   };
   const removeField = (key) => {
+    keywordDraftRef.current = null;
     const nextValues = emitValue(key, null);
     dismissedRef.current.add(key);
     setInternalActiveKeys((current) => current.filter((activeKey) => activeKey !== key));
@@ -18325,6 +19041,7 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
       return acc;
     }, {});
     dismissedRef.current.clear();
+    keywordDraftRef.current = null;
     setInternalActiveKeys(fields.filter(isFixedField).map((field) => field.key));
     setOpenKey(null);
     onValueChange?.(next);
@@ -18592,6 +19309,9 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                   disabled: disabled || currentOpenField.disabled,
                   onValueChange: (next) => emitValue(currentOpenField.key, next),
                   onValueCommit: (next) => emitValueAndSearch(currentOpenField.key, next),
+                  onDraftChange: (text) => {
+                    keywordDraftRef.current = text.trim() === "" ? null : { key: currentOpenField.key, text };
+                  },
                   onClose: () => setOpenKey(null)
                 }
               )
@@ -18743,6 +19463,7 @@ function EditorPanel({
   disabled,
   onValueChange,
   onValueCommit,
+  onDraftChange,
   onClose
 }) {
   const wrapsInPaddedTop = field.type === "datepicker-day" || field.type === "datepicker-range" || field.type === "datepicker-statistics";
@@ -18764,7 +19485,8 @@ function EditorPanel({
         value,
         disabled,
         onValueChange,
-        onValueCommit
+        onValueCommit,
+        onDraftChange
       }
     ) }) : /* @__PURE__ */ jsx(
       FilterEditor,
@@ -18773,7 +19495,8 @@ function EditorPanel({
         value,
         disabled,
         onValueChange,
-        onValueCommit
+        onValueCommit,
+        onDraftChange
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -18826,7 +19549,8 @@ function FilterEditor({
   value,
   disabled,
   onValueChange,
-  onValueCommit
+  onValueCommit,
+  onDraftChange
 }) {
   if (field.type === "datepicker-statistics") {
     return /* @__PURE__ */ jsx(
@@ -18872,7 +19596,8 @@ function FilterEditor({
         value: isKeywordValue(value) ? value : keywordEntries(value),
         disabled,
         onValueChange,
-        onValueCommit
+        onValueCommit,
+        onDraftChange
       }
     );
   }
@@ -19195,7 +19920,6 @@ function InlineDatePresetFilter({
     ) : badge)
   ] });
 }
-var CSV_PASTE_SEPARATOR = /[,\r\n\t]+/;
 var MATCH_MODE_OPTIONS = [
   { value: "contains", label: "\uD3EC\uD568" },
   { value: "exact", label: "\uC77C\uCE58" }
@@ -19209,14 +19933,19 @@ function KeywordEditor({
   value,
   disabled,
   onValueChange,
-  onValueCommit
+  onValueCommit,
+  onDraftChange
 }) {
   const entries3 = keywordEntries(value);
-  const [draft, setDraft] = useState("");
+  const [draftText, setDraftText] = useState("");
   const [mode, setMode] = useState(
     isKeywordValue(value) ? value.mode : "contains"
   );
   const inputRef = useRef(null);
+  const setDraft = (next) => {
+    setDraftText(next);
+    onDraftChange(next);
+  };
   useEffect(() => {
     if (disabled) return;
     inputRef.current?.focus();
@@ -19231,11 +19960,7 @@ function KeywordEditor({
     setMode(next);
     emit3(entries3, next);
   };
-  const newEntries = (candidates) => candidates.reduce((acc, raw) => {
-    const next = raw.trim();
-    if (next === "" || entries3.includes(next) || acc.includes(next)) return acc;
-    return [...acc, next];
-  }, []);
+  const newEntries = (candidates) => newKeywordEntries(entries3, candidates);
   const addEntry = (raw) => {
     const added = newEntries([raw]);
     if (added.length === 0) {
@@ -19261,7 +19986,7 @@ function KeywordEditor({
     const text = event.clipboardData.getData("text");
     if (!CSV_PASTE_SEPARATOR.test(text)) return;
     event.preventDefault();
-    const added = newEntries((draft + text).split(CSV_PASTE_SEPARATOR));
+    const added = newEntries((draftText + text).split(CSV_PASTE_SEPARATOR));
     if (added.length > 0) commit([...entries3, ...added]);
     setDraft("");
   };
@@ -19272,7 +19997,7 @@ function KeywordEditor({
     if (event.key === "Enter") {
       if (event.nativeEvent.isComposing) return;
       event.preventDefault();
-      addEntry(draft);
+      addEntry(draftText);
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -19304,7 +20029,7 @@ function KeywordEditor({
           "input",
           {
             ref: inputRef,
-            value: draft,
+            value: draftText,
             disabled,
             placeholder: field.placeholder ?? (field.input === "csv" ? "\uB2E4\uC911 \uD0A4\uC6CC\uB4DC\uB294 \uCF64\uB9C8(,)\uB85C \uAD6C\uBD84" : "\uC785\uB825 \uD6C4 Enter\uB85C \uCD94\uAC00"),
             onChange: (event) => changeDraft(event.target.value),
@@ -19907,8 +20632,8 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                     onMouseDown: (e) => e.preventDefault(),
                     children: [
                       loading2 && /* @__PURE__ */ 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__ */ 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);
+                      !effectiveAutocomplete ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-sd-8 px-sd-12 py-sd-6", children: items.map((item4, i) => {
+                        const selected = values.includes(item4);
                         const active = i === activeIndex && !selected;
                         return /* @__PURE__ */ jsx(
                           "div",
@@ -19919,14 +20644,14 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                             style: active ? { outline: "2px solid var(--color-border-accent)", outlineOffset: 1 } : void 0,
                             onMouseDown: (e) => {
                               e.preventDefault();
-                              if (!selected) addChip(item3);
+                              if (!selected) addChip(item4);
                             },
-                            children: /* @__PURE__ */ jsx(SChip2, { value: item3, disabled: selected, editable: false, showRemove: false })
+                            children: /* @__PURE__ */ jsx(SChip2, { value: item4, disabled: selected, editable: false, showRemove: false })
                           },
-                          item3
+                          item4
                         );
-                      }) }) : items.map((item3, i) => {
-                        const selected = values.includes(item3);
+                      }) }) : items.map((item4, i) => {
+                        const selected = values.includes(item4);
                         const active = i === activeIndex && !selected;
                         return /* @__PURE__ */ jsxs(
                           "div",
@@ -19939,10 +20664,10 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                             ),
                             onMouseDown: (e) => {
                               e.preventDefault();
-                              if (!selected) addChip(item3);
+                              if (!selected) addChip(item4);
                             },
                             children: [
-                              /* @__PURE__ */ jsx("span", { className: "flex-1", children: item3 }),
+                              /* @__PURE__ */ jsx("span", { className: "flex-1", children: item4 }),
                               selected && /* @__PURE__ */ jsx(
                                 SIcon,
                                 {
@@ -19953,7 +20678,7 @@ var SChipInput = /* @__PURE__ */ forwardRef(function SChipInput2({
                               )
                             ]
                           },
-                          item3
+                          item4
                         );
                       })
                     ]
@@ -20337,22 +21062,22 @@ function TimeSelector({
             style: {
               padding: "var(--cmp-timepicker-selector-section-paddingY) var(--cmp-timepicker-selector-section-paddingX)"
             },
-            children: /* @__PURE__ */ jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item3, index) => {
-              const selected = item3 === meridiem;
+            children: /* @__PURE__ */ jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item4, index) => {
+              const selected = item4 === meridiem;
               return /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: () => setMeridiem(item3),
+                  onClick: () => setMeridiem(item4),
                   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: item3 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
+                  children: item4 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
                 },
-                item3
+                item4
               );
             }) })
           }
@@ -20573,8 +21298,8 @@ function getTimeMinutes(value) {
 }
 function normalizeTimeRangeValue(value, rangeOrder = "strict") {
   if (value == null) return null;
-  const normalized = value.map((item3) => {
-    const parsed = parseTimeValue(item3);
+  const normalized = value.map((item4) => {
+    const parsed = parseTimeValue(item4);
     return formatTimeValue(parsed.hour, parsed.minute);
   });
   if (rangeOrder === "strict" && getTimeMinutes(normalized[0]) > getTimeMinutes(normalized[1])) {
@@ -20784,21 +21509,21 @@ function RangeTimeSelector({
             style: { gap: "var(--cmp-timepicker-selector-range-heading-gap)" },
             children: [
               /* @__PURE__ */ 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__ */ jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item3, index) => {
-                const selected = item3 === getMeridiem(side);
+              useMeridiem && /* @__PURE__ */ jsx("div", { className: "isolate flex", children: ["AM", "PM"].map((item4, index) => {
+                const selected = item4 === getMeridiem(side);
                 return /* @__PURE__ */ jsx(
                   "button",
                   {
                     type: "button",
-                    onClick: () => setMeridiem(side, item3),
+                    onClick: () => setMeridiem(side, item4),
                     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: item3 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
+                    children: item4 === "AM" ? "\uC624\uC804" : "\uC624\uD6C4"
                   },
-                  item3
+                  item4
                 );
               }) })
             ]
@@ -21034,6 +21759,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, RangeCalendar, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, findGnbAncestors, findGnbRailValue, isColorKey, isFieldWidthGrade, loading, resolveColor, useSLayout };
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, findGnbAncestors, findGnbRailValue, isColorKey, isFieldWidthGrade, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map