sellmate-design-system-react 9.0.0-beta.55 → 9.0.0-beta.57

package/dist/index.cjs

@@ -10,7 +10,7 @@ var reactDom = require('react-dom');
 var RCheckbox = require('@radix-ui/react-checkbox');
 var client = require('react-dom/client');
 var RTooltip = require('@radix-ui/react-tooltip');
-var RDropdown2 = require('@radix-ui/react-dropdown-menu');
+var RDropdown3 = require('@radix-ui/react-dropdown-menu');
 var RSwitch = require('@radix-ui/react-switch');
 var RDialog = require('@radix-ui/react-dialog');
 var Ariakit = require('@ariakit/react');
@@ -36,7 +36,7 @@ function _interopNamespace(e) {
 var RPopover12__namespace = /*#__PURE__*/_interopNamespace(RPopover12);
 var RCheckbox__namespace = /*#__PURE__*/_interopNamespace(RCheckbox);
 var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
-var RDropdown2__namespace = /*#__PURE__*/_interopNamespace(RDropdown2);
+var RDropdown3__namespace = /*#__PURE__*/_interopNamespace(RDropdown3);
 var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
 var RDialog__namespace = /*#__PURE__*/_interopNamespace(RDialog);
 var Ariakit__namespace = /*#__PURE__*/_interopNamespace(Ariakit);
@@ -371,6 +371,43 @@ var Icon_alert = (p) => {
     }
   );
 };
+var Icon_alignCenter = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M20 16.25C20.4142 16.25 20.75 16.5858 20.75 17C20.75 17.4142 20.4142 17.75 20 17.75H4C3.58579 17.75 3.25 17.4142 3.25 17C3.25 16.5858 3.58579 16.25 4 16.25H20Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M16 11.25C16.4142 11.25 16.75 11.5858 16.75 12C16.75 12.4142 16.4142 12.75 16 12.75H7C6.58579 12.75 6.25 12.4142 6.25 12C6.25 11.5858 6.58579 11.25 7 11.25H16Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21.4004 6.25C21.8144 6.25021 22.1504 6.58592 22.1504 7C22.1504 7.41408 21.8144 7.74979 21.4004 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H21.4004Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_alignKorean = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -410,6 +447,147 @@ var Icon_alignKorean = (p) => {
     }
   );
 };
+var Icon_alignLeft = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M19 16.25C19.4142 16.25 19.75 16.5858 19.75 17C19.75 17.4142 19.4142 17.75 19 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H19Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M12 11.25C12.4142 11.25 12.75 11.5858 12.75 12C12.75 12.4142 12.4142 12.75 12 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H12Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21.4004 6.25C21.8144 6.25021 22.1504 6.58592 22.1504 7C22.1504 7.41408 21.8144 7.74979 21.4004 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H21.4004Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+var Icon_alignMiddle = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M11.4844 13.9551C11.7735 13.6819 12.2265 13.6819 12.5156 13.9551L15.5156 16.79C15.8165 17.0746 15.8294 17.5496 15.5449 17.8506C15.2604 18.1515 14.7854 18.1653 14.4844 17.8809L12.75 16.2422V20.5C12.75 20.9142 12.4142 21.25 12 21.25C11.5858 21.25 11.25 20.9142 11.25 20.5V16.2422L9.51562 17.8809C9.21463 18.1653 8.73961 18.1515 8.45508 17.8506C8.17061 17.5496 8.18347 17.0746 8.48438 16.79L11.4844 13.9551Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21.2002 11.25C21.6142 11.2502 21.9502 11.5859 21.9502 12C21.9502 12.4141 21.6142 12.7498 21.2002 12.75H2.7998C2.38568 12.7499 2.0498 12.4142 2.0498 12C2.0498 11.5858 2.38568 11.2501 2.7998 11.25H21.2002Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M12 2.75C12.4142 2.75 12.75 3.08579 12.75 3.5V7.75781L14.4844 6.11914C14.7854 5.83467 15.2604 5.8485 15.5449 6.14941C15.8294 6.45041 15.8165 6.92543 15.5156 7.20996L12.5156 10.0449C12.2265 10.3182 11.7735 10.3182 11.4844 10.0449L8.48438 7.20996C8.18347 6.92543 8.17061 6.45041 8.45508 6.14941C8.73961 5.8485 9.21463 5.83467 9.51562 6.11914L11.25 7.75781V3.5C11.25 3.08579 11.5858 2.75 12 2.75Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+var Icon_alignRight = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21 16.25C21.4142 16.25 21.75 16.5858 21.75 17C21.75 17.4142 21.4142 17.75 21 17.75H5C4.58579 17.75 4.25 17.4142 4.25 17C4.25 16.5858 4.58579 16.25 5 16.25H21Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21 11.25C21.4142 11.25 21.75 11.5858 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75H12C11.5858 12.75 11.25 12.4142 11.25 12C11.25 11.5858 11.5858 11.25 12 11.25H21Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21.4004 6.25C21.8144 6.25021 22.1504 6.58592 22.1504 7C22.1504 7.41408 21.8144 7.74979 21.4004 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H21.4004Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+var Icon_alignTop = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M12 6.1499C12.2017 6.1499 12.3951 6.23132 12.5361 6.37549L18.5361 12.519C18.8254 12.8153 18.8204 13.2901 18.5244 13.5796C18.2281 13.869 17.7533 13.8631 17.4639 13.5669L12.75 8.7417V19.8999C12.75 20.3141 12.4142 20.6499 12 20.6499C11.5858 20.6499 11.25 20.3141 11.25 19.8999V8.7417L6.53613 13.5669C6.24671 13.8631 5.77189 13.869 5.47559 13.5796C5.1796 13.2901 5.17456 12.8153 5.46387 12.519L11.4639 6.37549C11.6049 6.23132 11.7983 6.1499 12 6.1499Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M21.2002 3.24951C21.6142 3.24972 21.9502 3.58641 21.9502 4.00049C21.9499 4.41435 21.6141 4.75028 21.2002 4.75049H2.7998C2.38584 4.75039 2.05007 4.41442 2.0498 4.00049C2.0498 3.58634 2.38568 3.24961 2.7998 3.24951H21.2002Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_archive = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3428,7 +3606,12 @@ var ICONS = {
   account: Icon_account,
   add: Icon_add,
   alert: Icon_alert,
+  alignCenter: Icon_alignCenter,
   alignKorean: Icon_alignKorean,
+  alignLeft: Icon_alignLeft,
+  alignMiddle: Icon_alignMiddle,
+  alignRight: Icon_alignRight,
+  alignTop: Icon_alignTop,
   archive: Icon_archive,
   arrowDown: Icon_arrowDown,
   arrowLeft: Icon_arrowLeft,
@@ -4071,7 +4254,8 @@ var TAG_COLORS = [
   "green",
   "blue",
   "darkblue",
-  "indigo"
+  "indigo",
+  "purple"
 ];
 var TAG_SIZE_CONFIG = {
   xs: {
@@ -6193,6 +6377,13 @@ function SDraggableListInner({
   );
 }
 var SDraggableList = /* @__PURE__ */ react.forwardRef(SDraggableListInner);
+function useInertRef(inert) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    ref.current?.toggleAttribute("inert", inert);
+  }, [inert]);
+  return ref;
+}
 var SExpansionItemDescendantContext = /* @__PURE__ */ react.createContext(
   null
 );
@@ -6224,6 +6415,7 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
     const [hovered, setHovered] = react.useState(false);
     const parentDescendantContext = react.useContext(SExpansionItemDescendantContext);
     const isExpanded = expanded ?? internalExpanded;
+    const bodyRef = useInertRef(!isExpanded);
     const isSelected = isExpanded && (selected || expandedDescendantCount === 0);
     const hasChevronInteraction = interaction === "chevron";
     const showInteractionChevron = hasChevronInteraction && !disabled && (isSelected || hovered);
@@ -6347,6 +6539,7 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
             "div",
             {
               id,
+              ref: bodyRef,
               "aria-hidden": !isExpanded,
               className: cn(
                 "grid overflow-hidden bg-(--cmp-listExpansionItem-body-bg) transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
@@ -6792,11 +6985,29 @@ function TreeConnector({
     ] })
   ] });
 }
+function TreeBranch({ expanded, children }) {
+  const branchRef = useInertRef(!expanded);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: branchRef,
+      "aria-hidden": !expanded,
+      className: cn(
+        "grid w-full overflow-hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+        expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden", children })
+    }
+  );
+}
 function STreeAllItem({
   selected,
   indeterminate,
   border,
   size,
+  rowId,
+  tabIndex,
+  onKeyDown,
   onSelect
 }) {
   const checkboxValue = indeterminate ? null : selected;
@@ -6808,6 +7019,9 @@ function STreeAllItem({
       role: "treeitem",
       "aria-level": 1,
       "aria-selected": selected,
+      "data-tree-row": rowId,
+      tabIndex,
+      onKeyDown,
       onClick: onSelect,
       className: cn(
         "group/tree-item box-border flex w-full cursor-pointer items-center overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)",
@@ -6993,6 +7207,34 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   const someSelected = selectableIds.some((id) => selectedSet.has(id));
   const allIndeterminate = someSelected && !allSelected;
   const showAllItem = selectable && showSelectAll;
+  const visibleRows = react.useMemo(() => {
+    const rows = [];
+    if (showAllItem) {
+      rows.push({ id: TREE_ALL_NODE.id, node: TREE_ALL_NODE, parentId: null, expanded: false });
+    }
+    const walk = (nodes, parentId) => {
+      nodes.forEach((node) => {
+        const expanded = !!node.children?.length && expandedSet.has(node.id);
+        rows.push({ id: node.id, node, parentId, expanded });
+        if (expanded) walk(node.children, node.id);
+      });
+    };
+    walk(items, null);
+    return rows;
+  }, [items, expandedSet, showAllItem]);
+  const [focusedId, setFocusedId] = react.useState(null);
+  const activeRowId = focusedId != null && visibleRows.some((row) => row.id === focusedId) ? focusedId : visibleRows[0]?.id ?? null;
+  const treeRef = react.useRef(null);
+  const focusRow = (id) => {
+    setFocusedId(id);
+    const rows = treeRef.current?.querySelectorAll("[data-tree-row]") ?? [];
+    for (const row of rows) {
+      if (row.dataset.treeRow === id) {
+        row.focus();
+        return;
+      }
+    }
+  };
   const updateExpanded = (node) => {
     const next = new Set(currentExpandedIds);
     if (next.has(node.id)) next.delete(node.id);
@@ -7026,6 +7268,59 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
     if (value === void 0) setInternalValue(orderedIds);
     onValueChange?.(orderedIds, TREE_ALL_NODE);
   };
+  const handleTreeKeyDown = (event) => {
+    const target = event.target;
+    const rowId = target.dataset?.treeRow;
+    if (rowId == null) return;
+    const index = visibleRows.findIndex((row2) => row2.id === rowId);
+    if (index < 0) return;
+    const row = visibleRows[index];
+    const hasChildren = !!row.node.children?.length;
+    switch (event.key) {
+      case "ArrowDown": {
+        const next = visibleRows[index + 1];
+        if (next) focusRow(next.id);
+        break;
+      }
+      case "ArrowUp": {
+        const prev = visibleRows[index - 1];
+        if (prev) focusRow(prev.id);
+        break;
+      }
+      case "ArrowRight": {
+        if (!hasChildren || row.node.disabled) return;
+        if (!row.expanded) updateExpanded(row.node);
+        else if (visibleRows[index + 1]) focusRow(visibleRows[index + 1].id);
+        break;
+      }
+      case "ArrowLeft": {
+        if (hasChildren && row.expanded && !row.node.disabled) updateExpanded(row.node);
+        else if (row.parentId != null) focusRow(row.parentId);
+        else return;
+        break;
+      }
+      case "Home": {
+        if (visibleRows[0]) focusRow(visibleRows[0].id);
+        break;
+      }
+      case "End": {
+        const last = visibleRows[visibleRows.length - 1];
+        if (last) focusRow(last.id);
+        break;
+      }
+      case "Enter":
+      case " ": {
+        if (row.id === TREE_ALL_NODE.id) updateAllSelected();
+        else if (selectable) updateSelected(row.node);
+        else if (hasChildren && !row.node.disabled) updateExpanded(row.node);
+        else return;
+        break;
+      }
+      default:
+        return;
+    }
+    event.preventDefault();
+  };
   const renderNodes = (nodes, depth = 1, ancestorLast = []) => nodes.map((node, index) => {
     const isLast = index === nodes.length - 1;
     const isExpanded = expandedSet.has(node.id);
@@ -7034,6 +7329,9 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
       /* @__PURE__ */ jsxRuntime.jsx(
         STreeItem2,
         {
+          "data-tree-row": node.id,
+          tabIndex: activeRowId === node.id ? 0 : -1,
+          onKeyDown: handleTreeKeyDown,
           node,
           depth,
           last: isLast,
@@ -7051,30 +7349,31 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
           onTreeSelect: updateSelected
         }
       ),
-      node.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "aria-hidden": !isExpanded,
-          className: cn(
-            "grid w-full overflow-hidden transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
-            isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden", children: renderNodes(node.children, depth + 1, [...ancestorLast, isLast]) })
-        }
-      ) : null
+      node.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(TreeBranch, { expanded: isExpanded, children: renderNodes(node.children, depth + 1, [...ancestorLast, isLast]) }) : null
     ] }, node.id);
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref,
+      ref: (node) => {
+        treeRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
       role: "tree",
       className: cn("flex w-full flex-col items-start bg-(--cmp-tree-item-bg-default)", className),
+      onFocus: (event) => {
+        const rowId = event.target.closest?.("[data-tree-row]")?.getAttribute("data-tree-row");
+        if (rowId != null) setFocusedId(rowId);
+      },
       ...rest,
       children: [
         showAllItem && /* @__PURE__ */ jsxRuntime.jsx(
           STreeAllItem,
           {
+            rowId: TREE_ALL_NODE.id,
+            tabIndex: activeRowId === TREE_ALL_NODE.id ? 0 : -1,
+            onKeyDown: handleTreeKeyDown,
             selected: allSelected,
             indeterminate: allIndeterminate,
             border,
@@ -7844,10 +8143,11 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
 // src/lib/global-overlay.ts
 var GLOBAL_OVERLAY_ATTR = "data-s-global-overlay";
 var globalOverlayProps = { [GLOBAL_OVERLAY_ATTR]: "" };
+var ELEMENT_NODE = 1;
 function isFromGlobalOverlay(event) {
   const detail = event.detail;
   const target = detail?.originalEvent?.target ?? event.target;
-  const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+  const element = target == null ? null : target.nodeType === ELEMENT_NODE ? target : target.parentElement ?? null;
   return !!element?.closest(`[${GLOBAL_OVERLAY_ATTR}]`);
 }
 var SLoadingContainer = /* @__PURE__ */ react.forwardRef(
@@ -8196,8 +8496,8 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
       "border-[color:var(--dd-border)] bg-[var(--dd-bg)] text-[color:var(--dd-text)]",
       disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-[var(--dd-bg-hover)]"
     );
-    const menu = /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RDropdown2__namespace.Content,
+    const menu = /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RDropdown3__namespace.Content,
       {
         sideOffset: 4,
         align: "start",
@@ -8213,7 +8513,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
         ),
         style: split ? { minWidth: clampToAvailableWidth(splitWidth, DROPDOWN_AVAILABLE_WIDTH) } : void 0,
         children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
-          RDropdown2__namespace.Item,
+          RDropdown3__namespace.Item,
           {
             disabled: it.disabled,
             onSelect: () => onItemClick?.(it.value),
@@ -8234,7 +8534,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
       }
     ) });
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RDropdown2__namespace.Root,
+      RDropdown3__namespace.Root,
       {
         modal: !insideModal,
         open,
@@ -8266,7 +8566,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
                     children: label
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     ref: splitToggleRef,
@@ -8285,7 +8585,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
                 ) })
               ]
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          ) : /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               type: "button",
@@ -13286,10 +13586,9 @@ function todayStr() {
 function formatDate(year, month, day) {
   return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
 }
-function calcYearMonth(year, month, dir) {
-  if (dir === "prev")
-    return month === 1 ? { year: year - 1, month: 12 } : { year, month: month - 1 };
-  return month === 12 ? { year: year + 1, month: 1 } : { year, month: month + 1 };
+function calcYearMonth(year, month, dir, step = 1) {
+  const index = year * 12 + (month - 1) + (dir === "prev" ? -step : step);
+  return { year: Math.floor(index / 12), month: index % 12 + 1 };
 }
 function monthCells(year, month) {
   const firstDayIndex = new Date(year, month - 1, 1).getDay();
@@ -14274,6 +14573,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const [open, setOpen] = react.useState(false);
   const [pendingOpen, setPendingOpen] = react.useState(false);
   const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  const baseId = react.useId();
+  const listboxId = `${baseId}-listbox`;
+  const activeOptionId = `${baseId}-active-option`;
   const [win, setWin] = react.useState({ start: 0, end: 0, top: 0, bottom: 0 });
   const winRef = react.useRef(win);
   winRef.current = win;
@@ -14359,13 +14661,15 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     setPendingOpen(false);
     commitOpen(true);
   }, [insideModal, pendingOpen, portalContainer]);
+  const requestOpenRef = react.useRef(requestOpen);
+  requestOpenRef.current = requestOpen;
   react.useImperativeHandle(
     ref,
     () => ({
       focus: () => triggerRef.current?.focus(),
-      open: () => requestOpen(true)
+      open: () => requestOpenRef.current(true)
     }),
-    [insideModal, portalContainer]
+    []
   );
   useFormField({
     name,
@@ -14703,6 +15007,8 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
             disabled: effectiveDisabled,
             "aria-haspopup": "listbox",
             "aria-expanded": open,
+            "aria-controls": open ? listboxId : void 0,
+            "aria-activedescendant": open && focusedIndex >= 0 ? activeOptionId : void 0,
             onClick: () => requestOpen(!open),
             onKeyDown: handleKeyDown,
             className: "flex h-full w-full cursor-pointer items-center justify-between gap-[8px] bg-transparent px-[12px] text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
@@ -14829,7 +15135,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                           onValueChange: setSearch,
                           onKeyDown: handleKeyDown,
                           placeholder: "\uAC80\uC0C9",
-                          clearable: true
+                          clearable: true,
+                          "aria-controls": listboxId,
+                          "aria-activedescendant": focusedIndex >= 0 ? activeOptionId : void 0
                         }
                       )
                     }
@@ -14837,6 +15145,8 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                   hasItems ? /* @__PURE__ */ jsxRuntime.jsx(
                     ItemList,
                     {
+                      listboxId,
+                      activeOptionId,
                       items: visibleItems,
                       indexOffset: windowStart,
                       topSpacer: win.top,
@@ -14885,6 +15195,8 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
 });
 var SSelect2 = /* @__PURE__ */ withDisplayName(SSelectImpl, "SSelect");
 function ItemList({
+  listboxId,
+  activeOptionId,
   items,
   indexOffset,
   topSpacer,
@@ -14910,12 +15222,13 @@ function ItemList({
     "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listBoxItem-content-disabled)]"
   );
   const activeClass = "hover:bg-[var(--cmp-listBoxItem-bg-hover)] hover:text-[color:var(--cmp-listBoxItem-content-hover)] focus-visible:bg-[var(--cmp-listBoxItem-bg-hover)] focus-visible:text-[color:var(--cmp-listBoxItem-content-hover)]";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listbox", "aria-multiselectable": multi || void 0, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: listboxId, role: "listbox", "aria-multiselectable": multi || void 0, children: [
     showSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
         "data-select-all-row": true,
+        id: focusedValue === "__select_all__" ? activeOptionId : void 0,
         "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
         "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
         className: cn(
@@ -14957,6 +15270,7 @@ function ItemList({
               type: "button",
               "data-select-row": true,
               "data-index": idx,
+              id: groupFocused ? activeOptionId : void 0,
               role: "option",
               "aria-selected": groupState === true,
               disabled: groupDisabled,
@@ -15030,6 +15344,7 @@ function ItemList({
           type: "button",
           "data-select-row": true,
           "data-index": idx,
+          id: focusedValue === o.value ? activeOptionId : void 0,
           disabled: o.disabled,
           role: "option",
           "aria-selected": isSelected,
@@ -15114,6 +15429,22 @@ var cellValue = (col, row) => {
   return col.format ? col.format(raw, row) : raw;
 };
 var DEFAULT_COLUMN_WIDTH = 120;
+var LOCKED_BG = "var(--cmp-table-body-disabled-bg)";
+var LOCKED_CONTENT = "var(--cmp-table-body-disabled-content)";
+var DRAG_BG = "var(--cmp-table-dragSelectable-bg-color)";
+var DRAG_EDGE_W = "var(--cmp-table-dragSelectable-border-width)";
+var DRAG_EDGE_NEG_W = `calc(-1 * ${DRAG_EDGE_W})`;
+var DRAG_EDGE_C = "var(--cmp-table-dragSelectable-border-color)";
+var CONTEXT_MENU_VIEWPORT_PADDING = 12;
+var CONTEXT_MENU_CURSOR_GAP = 2;
+var CONTEXT_MENU_ARM_FALLBACK_MS = 500;
+var CONTEXT_MENU_ITEM_CLASS = cn(
+  "flex min-h-[28px] cursor-pointer select-none items-center gap-[8px] rounded-[2px] px-[12px] py-[4px] text-[12px] leading-[20px] outline-none",
+  "text-[color:var(--sys-color-fg-secondary)]",
+  "data-[disabled]:cursor-not-allowed data-[disabled]:text-[color:var(--cmp-button-text-disabled)]",
+  "data-[highlighted]:bg-[var(--sys-color-bg-accent)] data-[highlighted]:text-[color:var(--sys-color-fg-inverse)]"
+);
+var ROW_INTERACTIVE_SELECTOR = 'button, a, input, select, textarea, label, [role="button"], [role="checkbox"], [contenteditable="true"]';
 var colWidthFromDef = (c) => {
   if (c.autoWidth) return 0;
   if (c.width == null) return DEFAULT_COLUMN_WIDTH;
@@ -15126,6 +15457,9 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   rows = [],
   rowKey = "id",
   selectable = false,
+  dragSelectable = false,
+  contextMenuItems,
+  onContextMenuItemClick,
   isRowSelectable,
   selected = [],
   onSelectedChange,
@@ -15241,6 +15575,10 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     (row) => isRowSelectable ? isRowSelectable(row) : true,
     [isRowSelectable]
   );
+  const dragSelectOn = dragSelectable && !selectable;
+  const portalContainer = usePortalContainer();
+  const [dragPreviewKeys, setDragPreviewKeys] = react.useState(null);
+  const dragRef = react.useRef(null);
   const getIsAllChecked = react.useCallback(
     (rws) => {
       const targets = rws.filter(canSelectRow);
@@ -15582,6 +15920,76 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       onSelectedChange?.(selected.filter((r) => r[rowKey] !== row[rowKey]));
     else onSelectedChange?.([...selected, row]);
   };
+  const isViewSelected = (row) => row != null && (dragPreviewKeys ?? selectedKeys).has(row[rowKey]);
+  const dragRangeRows = (from, to) => {
+    const [a, b] = from <= to ? [from, to] : [to, from];
+    return rows.slice(a, b + 1).filter(canSelectRow);
+  };
+  const dragPreviewOf = (base, anchor, to) => /* @__PURE__ */ new Set([...base, ...dragRangeRows(anchor, to).map((r) => r[rowKey])]);
+  const startDragSelect = (index, event) => {
+    if (event.button !== 0) return;
+    const target = event.target;
+    if (target?.closest?.(ROW_INTERACTIVE_SELECTOR)) return;
+    event.preventDefault();
+    const baseRows = event.ctrlKey || event.metaKey ? selected : [];
+    const baseKeys = new Set(baseRows.map((r) => r[rowKey]));
+    dragRef.current = { anchor: index, last: index, baseKeys, baseRows };
+    setDragPreviewKeys(dragPreviewOf(baseKeys, index, index));
+  };
+  const extendDragSelect = (index) => {
+    const d = dragRef.current;
+    if (!d || d.last === index) return;
+    d.last = index;
+    setDragPreviewKeys(dragPreviewOf(d.baseKeys, d.anchor, index));
+  };
+  const finishDragSelectRef = react.useRef(() => {
+  });
+  finishDragSelectRef.current = () => {
+    const d = dragRef.current;
+    if (!d) return;
+    dragRef.current = null;
+    setDragPreviewKeys(null);
+    const add = dragRangeRows(d.anchor, d.last).filter((r) => !d.baseKeys.has(r[rowKey]));
+    onSelectedChange?.([...d.baseRows, ...add]);
+  };
+  react.useEffect(() => {
+    if (!dragSelectOn) return;
+    const onUp = () => finishDragSelectRef.current();
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mouseup", onUp);
+      dragRef.current = null;
+    };
+  }, [dragSelectOn]);
+  const contextMenuOn = dragSelectOn && (contextMenuItems?.length ?? 0) > 0;
+  const [contextMenu, setContextMenu] = react.useState(null);
+  const contextMenuOpen = contextMenu?.open === true;
+  const [contextMenuArmed, setContextMenuArmed] = react.useState(false);
+  react.useEffect(() => {
+    if (!contextMenuOpen || contextMenuArmed) return;
+    const arm = () => setContextMenuArmed(true);
+    window.addEventListener("pointerup", arm, { once: true, capture: true });
+    const timer = window.setTimeout(arm, CONTEXT_MENU_ARM_FALLBACK_MS);
+    return () => {
+      window.removeEventListener("pointerup", arm, { capture: true });
+      window.clearTimeout(timer);
+    };
+  }, [contextMenuOpen, contextMenuArmed]);
+  react.useEffect(() => {
+    if (!contextMenuOpen) return;
+    const close = () => setContextMenu((m) => m == null ? null : { ...m, open: false });
+    window.addEventListener("scroll", close, { capture: true, passive: true });
+    return () => window.removeEventListener("scroll", close, { capture: true });
+  }, [contextMenuOpen]);
+  const openContextMenu = (row, event) => {
+    if (!canSelectRow(row)) return;
+    event.preventDefault();
+    const alreadySelected = selectedKeys.has(row[rowKey]);
+    const rows2 = alreadySelected ? selected : [row];
+    if (!alreadySelected) onSelectedChange?.(rows2);
+    setContextMenuArmed(false);
+    setContextMenu({ x: event.clientX, y: event.clientY, rows: rows2, open: true });
+  };
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[var(--cmp-table-radius)] rounded-t-none" : "rounded-[var(--cmp-table-radius)]";
   const cellPadY = innerDense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
   const cellPadXOf = (col) => col.contentType === "control" ? "var(--cmp-table-body-paddingX-default)" : "var(--cmp-table-body-paddingX-wide)";
@@ -15604,14 +16012,13 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       zIndex: 6
     };
   };
-  const stickyShadowClass = (i) => {
+  const stickyShadowValue = (i) => {
     const { isLeft, isRight } = stickyInfo(i);
     const isLeftEdge = isLeft && i === stickyLeft - 1;
     const isRightEdge = isRight && i === visibleCols.length - stickyRight;
-    return cn(
-      isLeftEdge && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]",
-      isRightEdge && scrolledRight && "shadow-[-5px_0_8px_0_rgba(34,34,34,0.1)]"
-    );
+    if (isLeftEdge && scrolledLeft) return "5px 0 8px 0 rgba(34,34,34,0.1)";
+    if (isRightEdge && scrolledRight) return "-5px 0 8px 0 rgba(34,34,34,0.1)";
+    return null;
   };
   const headerResizeHitArea = (i, key) => {
     const col = visibleCols[i];
@@ -15805,10 +16212,14 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                     headerGroupInfo && i === visibleCols.length - 1 && "border-r-0",
                                     "relative bg-[var(--cmp-table-header-bg)] px-[16px] text-[12px] font-medium leading-[0] text-[color:var(--sys-color-fg-primary)]",
                                     stickyInfo(i).isSticky && "z-[6]",
-                                    stickyShadowClass(i),
                                     col.thClass
                                   ),
-                                  style: { textAlign: col.align ?? "left", ...cellStyle(i), ...col.thStyle },
+                                  style: {
+                                    textAlign: col.align ?? "left",
+                                    boxShadow: stickyShadowValue(i) ?? void 0,
+                                    ...cellStyle(i),
+                                    ...col.thStyle
+                                  },
                                   "aria-sort": isSortable ? sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : "none" : void 0,
                                   children: [
                                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -15920,17 +16331,27 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                           /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
                             virtualScroll && topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
                             rowCount === 0 ? null : bodyRows.map((row, ri) => {
-                              const isSel = selectedKeys.has(row[rowKey]);
+                              const rowIndex = rowOffset + ri;
+                              const isSel = isViewSelected(row);
+                              const dragSel = dragSelectOn && isSel;
+                              const dragTop = dragSel && !isViewSelected(rows[rowIndex - 1]);
+                              const dragBottom = dragSel && !isViewSelected(rows[rowIndex + 1]);
+                              const rowLocked = (selectable || dragSelectable) && !canSelectRow(row);
                               const rowBg = "bg-white";
+                              const rowHover = hoverable && !rowLocked;
                               return /* @__PURE__ */ jsxRuntime.jsxs(
                                 "tr",
                                 {
-                                  "data-row-index": rowOffset + ri,
+                                  "data-row-index": rowIndex,
                                   onClick: () => onRowClick?.(row),
+                                  onMouseDown: dragSelectOn ? (event) => startDragSelect(rowIndex, event) : void 0,
+                                  onMouseEnter: dragSelectOn ? () => extendDragSelect(rowIndex) : void 0,
+                                  onContextMenu: contextMenuOn ? (event) => openContextMenu(row, event) : void 0,
                                   className: cn(
                                     "group/table-row",
-                                    hoverable && "hover:bg-[var(--color-grey-05)]",
-                                    onRowClick && "cursor-pointer"
+                                    rowHover && "hover:bg-[var(--color-grey-05)]",
+                                    onRowClick && "cursor-pointer",
+                                    dragSelectOn && "select-none"
                                   ),
                                   style: { height: virtualScroll ? effectiveRowHeight : rowH },
                                   children: [
@@ -15941,13 +16362,15 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                           // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
                                           "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle",
                                           rowBg,
-                                          hoverable && "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                          rowHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
                                           stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
                                         ),
                                         style: {
                                           width: SELECTABLE_COLUMN_WIDTH,
                                           minWidth: SELECTABLE_COLUMN_WIDTH,
-                                          maxWidth: SELECTABLE_COLUMN_WIDTH
+                                          maxWidth: SELECTABLE_COLUMN_WIDTH,
+                                          // 선택 열도 행의 일부다 — 여기만 희지 않으면 회색 줄이 끊긴다
+                                          background: rowLocked ? LOCKED_BG : void 0
                                         },
                                         onClick: (e) => e.stopPropagation(),
                                         onClickCapture: (e) => {
@@ -15970,17 +16393,29 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                         // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
                                         "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
                                         rowBg,
-                                        hoverable && "group-hover/table-row:bg-[var(--color-grey-05)]",
-                                        stickyShadowClass(i),
+                                        rowHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
                                         typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
                                       );
                                       const tdPadX = cellPadXOf(col);
+                                      const dragEdges = dragSel ? [
+                                        dragTop && `inset 0 ${DRAG_EDGE_W} 0 0 ${DRAG_EDGE_C}`,
+                                        dragBottom && `inset 0 ${DRAG_EDGE_NEG_W} 0 0 ${DRAG_EDGE_C}`,
+                                        i === 0 && `inset ${DRAG_EDGE_W} 0 0 0 ${DRAG_EDGE_C}`,
+                                        i === visibleCols.length - 1 && `inset ${DRAG_EDGE_NEG_W} 0 0 0 ${DRAG_EDGE_C}`
+                                      ].filter(Boolean) : [];
+                                      const shadows = [...dragEdges, stickyShadowValue(i)].filter(Boolean);
                                       const tdStyle = {
                                         paddingLeft: tdPadX,
                                         paddingRight: tdPadX,
                                         paddingTop: cellPadY,
                                         paddingBottom: cellPadY,
                                         textAlign: col.align ?? "left",
+                                        // 인라인이라 hover 배경보다 세다 — 고른 행은 hover 로 흐려지지 않는다.
+                                        background: dragSel ? DRAG_BG : rowLocked ? LOCKED_BG : void 0,
+                                        // 클래스의 기본 글자색을 덮는다. 셀이 자기 색을 정한 내용(SIcon 의
+                                        // color, STag 등)까지는 닿지 않는다 — 그건 소비 앱 몫이다.
+                                        color: rowLocked ? LOCKED_CONTENT : void 0,
+                                        boxShadow: shadows.length > 0 ? shadows.join(", ") : void 0,
                                         ...cellStyle(i)
                                       };
                                       if (col.renderCell) {
@@ -16068,6 +16503,59 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
               ] })
             ]
           }
+        ),
+        contextMenuOn && typeof document !== "undefined" && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            RDropdown3__namespace.Root,
+            {
+              modal: false,
+              open: contextMenuOpen,
+              onOpenChange: (open) => {
+                if (!open) setContextMenu((m) => m == null ? null : { ...m, open: false });
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none fixed block h-0 w-0",
+                    style: { left: contextMenu?.x ?? 0, top: contextMenu?.y ?? 0 }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  RDropdown3__namespace.Content,
+                  {
+                    align: "start",
+                    side: "bottom",
+                    sideOffset: CONTEXT_MENU_CURSOR_GAP,
+                    alignOffset: CONTEXT_MENU_CURSOR_GAP,
+                    collisionPadding: CONTEXT_MENU_VIEWPORT_PADDING,
+                    style: contextMenuArmed ? void 0 : { pointerEvents: "none" },
+                    className: cn(
+                      "z-50 overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-normal-sm",
+                      "max-w-[var(--radix-dropdown-menu-content-available-width)]",
+                      FLOATING_SLIDE_ANIM
+                    ),
+                    children: contextMenuItems?.map((item4) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      RDropdown3__namespace.Item,
+                      {
+                        disabled: item4.disabled,
+                        onSelect: () => onContextMenuItemClick?.(item4.value, contextMenu?.rows ?? []),
+                        className: CONTEXT_MENU_ITEM_CLASS,
+                        children: [
+                          item4.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: item4.icon, size: 12 }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 break-words", children: item4.label })
+                        ]
+                      },
+                      item4.value
+                    ))
+                  }
+                )
+              ]
+            },
+            contextMenu == null ? "closed" : `${contextMenu.x},${contextMenu.y}`
+          ),
+          portalContainer ?? document.body
         )
       ]
     }
@@ -17586,11 +18074,11 @@ function RangeCalendar({
   const goPrevYear = () => setBase(y - 1, m);
   const goNextYear = () => setBase(y + 1, m);
   const goPrevMonth = () => {
-    const n = calcYearMonth(y, m, "prev");
+    const n = calcYearMonth(y, m, "prev", 2);
     setBase(n.year, n.month);
   };
   const goNextMonth = () => {
-    const n = calcYearMonth(y, m, "next");
+    const n = calcYearMonth(y, m, "next", 2);
     setBase(n.year, n.month);
   };
   const goToday = () => {
@@ -18935,20 +19423,24 @@ function ChartTooltip({
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-bold text-(--cmp-chart-chartTooltip-title-color)", children: title }),
-        items.map((item4, index) => (
-          // TODO: 토큰 생성되면 gap 을 `--cmp-chart-chartTooltipItem-gap` 으로 교체
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-sd-8", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "aria-hidden": true,
-                className: "shrink-0 rounded-full",
-                style: { width: DOT_SIZE2, height: DOT_SIZE2, background: item4.color }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default text-(--sys-color-fg-primary)", children: item4.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-bold ml-auto text-(--sys-color-fg-primary)", children: item4.value })
-          ] }, `${item4.label}-${index}`)
+        items.map((item4, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "flex items-center gap-(--cmp-chart-chartTooltipItem-gap)",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "shrink-0 rounded-full",
+                  style: { width: DOT_SIZE2, height: DOT_SIZE2, background: item4.color }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default text-(--cmp-chart-chartTooltipItem-label-color)", children: item4.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-bold ml-auto text-(--cmp-chart-chartTooltipItem-dataValue-color)", children: item4.value })
+            ]
+          },
+          `${item4.label}-${index}`
         ))
       ]
     }
@@ -20802,7 +21294,7 @@ var PaletteItem = ({
   className,
   onSelect,
   children
-}) => asMenu ? /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Item, { title: label, "aria-label": label, className, onSelect, children }) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", title: label, "aria-label": label, className, onClick: onSelect, children });
+}) => asMenu ? /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Item, { title: label, "aria-label": label, className, onSelect, children }) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", title: label, "aria-label": label, className, onClick: onSelect, children });
 var ColorPalette = ({
   colors,
   columns,
@@ -20934,7 +21426,7 @@ var TableMenuItem = ({
   disabled,
   onSelect
 }) => /* @__PURE__ */ jsxRuntime.jsx(
-  RDropdown2__namespace.Item,
+  RDropdown3__namespace.Item,
   {
     className: cn(menuItemClass, menuItemDisabledClass),
     disabled,
@@ -21101,8 +21593,8 @@ function EditorToolbarBar({
   const node = (item4) => {
     switch (item4) {
       case "heading":
-        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Root, { modal: !insideModal, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown3__namespace.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(
             ToolbarButton,
             {
               label: "\uC81C\uBAA9 \uB2E8\uACC4",
@@ -21115,9 +21607,9 @@ function EditorToolbarBar({
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown3__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              RDropdown2__namespace.Item,
+              RDropdown3__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.setParagraph().run(),
@@ -21125,7 +21617,7 @@ function EditorToolbarBar({
               }
             ),
             SEDITOR_HEADING_LEVELS.map((level) => /* @__PURE__ */ jsxRuntime.jsx(
-              RDropdown2__namespace.Item,
+              RDropdown3__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.setHeading({ level }).run(),
@@ -21136,13 +21628,13 @@ function EditorToolbarBar({
           ] }) })
         ] }, item4);
       case "fontSize":
-        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Root, { modal: !insideModal, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarButton, { label: "\uAE00\uC790 \uD06C\uAE30", disabled: off, className: "px-[6px]", children: [
+        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown3__namespace.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarButton, { label: "\uAE00\uC790 \uD06C\uAE30", disabled: off, className: "px-[6px]", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] leading-[20px]", children: activeFontSize ?? FONT_SIZE_DEFAULT_LABEL }),
             /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "caretDown", size: 12 })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            RDropdown2__namespace.Content,
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            RDropdown3__namespace.Content,
             {
               sideOffset: 4,
               align: "start",
@@ -21150,7 +21642,7 @@ function EditorToolbarBar({
               style: { maxHeight: FONT_SIZE_MENU_MAX_HEIGHT },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  RDropdown2__namespace.Item,
+                  RDropdown3__namespace.Item,
                   {
                     className: cn(menuItemClass, activeFontSize === null && menuItemSelectedClass),
                     title: `${FONT_SIZE_DEFAULT_LABEL} (\uBCF8\uBB38 ${SEDITOR_DEFAULT_FONT_SIZE}px)`,
@@ -21159,7 +21651,7 @@ function EditorToolbarBar({
                   }
                 ),
                 SEDITOR_FONT_SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsx(
-                  RDropdown2__namespace.Item,
+                  RDropdown3__namespace.Item,
                   {
                     ref: activeFontSize === size ? (el) => {
                       el?.scrollIntoView({ block: "nearest" });
@@ -21251,9 +21743,9 @@ function EditorToolbarBar({
             },
             item4
           );
-        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Root, { modal: !insideModal, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "\uAE00\uC790\uC0C9", disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ColorIndicator, { color: off ? "currentColor" : activeColor, children: /* @__PURE__ */ jsxRuntime.jsx(IconTextColor, { size: ICON_SIZE }) }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown3__namespace.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "\uAE00\uC790\uC0C9", disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ColorIndicator, { color: off ? "currentColor" : activeColor, children: /* @__PURE__ */ jsxRuntime.jsx(IconTextColor, { size: ICON_SIZE }) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: /* @__PURE__ */ jsxRuntime.jsx(
             ColorPalette,
             {
               asMenu: true,
@@ -21359,14 +21851,14 @@ function EditorToolbarBar({
       case "list": {
         const ListIcon = state2.orderedList ? IconOrderedList : state2.taskList ? IconTaskList : IconBulletList;
         const listActive = state2.bulletList || state2.orderedList || state2.taskList;
-        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Root, { modal: !insideModal, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarButton, { label: "\uBAA9\uB85D", active: listActive, disabled: off, className: "px-[4px]", children: [
+        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown3__namespace.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarButton, { label: "\uBAA9\uB85D", active: listActive, disabled: off, className: "px-[4px]", children: [
             /* @__PURE__ */ jsxRuntime.jsx(ListIcon, { size: ICON_SIZE }),
             /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "caretDown", size: CARET_SIZE })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown3__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown2__namespace.Item,
+              RDropdown3__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleBulletList().run(),
@@ -21377,7 +21869,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown2__namespace.Item,
+              RDropdown3__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleOrderedList().run(),
@@ -21388,7 +21880,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown2__namespace.Item,
+              RDropdown3__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleTaskList().run(),
@@ -21492,17 +21984,17 @@ function EditorToolbarBar({
         );
       case "table":
         return /* @__PURE__ */ jsxRuntime.jsxs(
-          RDropdown2__namespace.Root,
+          RDropdown3__namespace.Root,
           {
             open: tableOpen,
             onOpenChange: setTableOpen,
             modal: !insideModal,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarButton, { label: "\uD45C", active: state2.inTable, disabled: off, className: "px-[6px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(ToolbarButton, { label: "\uD45C", active: state2.inTable, disabled: off, className: "px-[6px]", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(IconTable, { size: ICON_SIZE }),
                 /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "caretDown", size: CARET_SIZE })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown2__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown3__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
                 !state2.inTable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     TableSizePicker,
@@ -21514,7 +22006,7 @@ function EditorToolbarBar({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Separator, { className: menuSeparatorClass })
+                  /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Separator, { className: menuSeparatorClass })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   TableMenuItem,
@@ -21548,7 +22040,7 @@ function EditorToolbarBar({
                     onSelect: () => chain()?.addColumnAfter().run()
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Separator, { className: menuSeparatorClass }),
+                /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Separator, { className: menuSeparatorClass }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   TableMenuItem,
                   {
@@ -21581,7 +22073,7 @@ function EditorToolbarBar({
                     onSelect: () => chain()?.toggleHeaderColumn().run()
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(RDropdown2__namespace.Separator, { className: menuSeparatorClass }),
+                /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Separator, { className: menuSeparatorClass }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   TableMenuItem,
                   {
@@ -24055,6 +24547,8 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
 }, ref) {
   const autoId = react.useId();
   const resolvedName = name ?? autoId;
+  const listboxId = `${autoId}-listbox`;
+  const activeOptionId = `${autoId}-active-option`;
   const [inputValue, setInputValue] = react.useState("");
   const [focused, setFocused] = react.useState(false);
   const [hovered, setHovered] = react.useState(false);
@@ -24277,6 +24771,11 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                       ref: inputRef,
                       name: resolvedName,
                       size: 1,
+                      role: "combobox",
+                      "aria-expanded": showDropdown,
+                      "aria-controls": showDropdown ? listboxId : void 0,
+                      "aria-activedescendant": showDropdown && activeIndex >= 0 ? activeOptionId : void 0,
+                      "aria-autocomplete": "list",
                       className: cn(
                         "s-chip-input__input col-start-1 row-start-1 w-full border-0 bg-transparent p-0 font-normal text-(--cmp-chip-content-focus) outline-none placeholder:text-(--cmp-chipInput-text-placeholder) disabled:cursor-not-allowed",
                         AUTOFILL_RESET_CLASS,
@@ -24390,6 +24889,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                 children: /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
+                    id: listboxId,
                     role: "listbox",
                     className: "s-chip-input__suggestions flex w-full flex-col outline-none",
                     onMouseDown: (e) => e.preventDefault(),
@@ -24401,6 +24901,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                         return /* @__PURE__ */ jsxRuntime.jsx(
                           "div",
                           {
+                            id: active ? activeOptionId : void 0,
                             role: "option",
                             "aria-selected": selected || active,
                             className: "rounded-full",
@@ -24419,6 +24920,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                         return /* @__PURE__ */ jsxRuntime.jsxs(
                           "div",
                           {
+                            id: active ? activeOptionId : void 0,
                             role: "option",
                             "aria-selected": selected || active,
                             className: cn(