sellmate-design-system-react 9.0.0-beta.56 → 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);
@@ -4254,7 +4254,8 @@ var TAG_COLORS = [
   "green",
   "blue",
   "darkblue",
-  "indigo"
+  "indigo",
+  "purple"
 ];
 var TAG_SIZE_CONFIG = {
   xs: {
@@ -8495,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",
@@ -8512,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),
@@ -8533,7 +8534,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
       }
     ) });
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RDropdown2__namespace.Root,
+      RDropdown3__namespace.Root,
       {
         modal: !insideModal,
         open,
@@ -8565,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,
@@ -8584,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",
@@ -13585,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();
@@ -15429,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;
@@ -15441,6 +15457,9 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   rows = [],
   rowKey = "id",
   selectable = false,
+  dragSelectable = false,
+  contextMenuItems,
+  onContextMenuItemClick,
   isRowSelectable,
   selected = [],
   onSelectedChange,
@@ -15556,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);
@@ -15897,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)";
@@ -15919,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];
@@ -16120,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(
@@ -16235,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: [
@@ -16256,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) => {
@@ -16285,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) {
@@ -16383,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
         )
       ]
     }
@@ -17901,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 = () => {
@@ -19250,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}`
         ))
       ]
     }
@@ -21117,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,
@@ -21249,7 +21426,7 @@ var TableMenuItem = ({
   disabled,
   onSelect
 }) => /* @__PURE__ */ jsxRuntime.jsx(
-  RDropdown2__namespace.Item,
+  RDropdown3__namespace.Item,
   {
     className: cn(menuItemClass, menuItemDisabledClass),
     disabled,
@@ -21416,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",
@@ -21430,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(),
@@ -21440,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(),
@@ -21451,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",
@@ -21465,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)`,
@@ -21474,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" });
@@ -21566,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,
@@ -21674,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(),
@@ -21692,7 +21869,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown2__namespace.Item,
+              RDropdown3__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleOrderedList().run(),
@@ -21703,7 +21880,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown2__namespace.Item,
+              RDropdown3__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleTaskList().run(),
@@ -21807,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,
@@ -21829,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,
@@ -21863,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,
                   {
@@ -21896,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,
                   {