sellmate-design-system-react 9.0.0-beta.56 → 9.0.0-beta.59

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,
@@ -15545,7 +15564,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   react.useEffect(() => {
     setColumnWidths(visibleCols.map(colWidthFromDef));
   }, [colSignature]);
-  const selectedKeys = react.useMemo(() => new Set(selected.map((r) => r[rowKey])), [selected, rowKey]);
+  const selectedKeys = react.useMemo(() => new Set(selected.map((r2) => r2[rowKey])), [selected, rowKey]);
   const rangeAnchorRef = react.useRef(null);
   const shiftPressedRef = react.useRef(false);
   const isRowSelected = react.useCallback(
@@ -15556,12 +15575,16 @@ 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);
       const total = targets.length;
       if (total === 0) return false;
-      const cnt = targets.filter((r) => selectedKeys.has(r[rowKey])).length;
+      const cnt = targets.filter((r2) => selectedKeys.has(r2[rowKey])).length;
       if (cnt === 0) return false;
       if (cnt === total) return true;
       return null;
@@ -15765,16 +15788,16 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       updateRowSelect: (row) => {
         if (!canSelectRow(row)) return;
         if (selectedKeys.has(row[rowKey]))
-          onSelectedChange?.(selected.filter((r) => r[rowKey] !== row[rowKey]));
+          onSelectedChange?.(selected.filter((r2) => r2[rowKey] !== row[rowKey]));
         else onSelectedChange?.([...selected, row]);
       },
       toggleSelectAll: (checked, rws) => {
         if (checked) {
-          const add = rws.filter((r) => canSelectRow(r) && !selectedKeys.has(r[rowKey]));
+          const add = rws.filter((r2) => canSelectRow(r2) && !selectedKeys.has(r2[rowKey]));
           onSelectedChange?.([...selected, ...add]);
         } else {
-          const keys = new Set(rws.map((r) => r[rowKey]));
-          onSelectedChange?.(selected.filter((r) => !keys.has(r[rowKey])));
+          const keys = new Set(rws.map((r2) => r2[rowKey]));
+          onSelectedChange?.(selected.filter((r2) => !keys.has(r2[rowKey])));
         }
       }
     }),
@@ -15868,10 +15891,10 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   const toggleAll = () => {
     rangeAnchorRef.current = null;
     if (headerCheck === true) {
-      const targetKeys = new Set(selectAllRows.map((r) => r[rowKey]));
-      onSelectedChange?.(selected.filter((r) => !targetKeys.has(r[rowKey])));
+      const targetKeys = new Set(selectAllRows.map((r2) => r2[rowKey]));
+      onSelectedChange?.(selected.filter((r2) => !targetKeys.has(r2[rowKey])));
     } else {
-      const add = selectAllRows.filter((r) => canSelectRow(r) && !selectedKeys.has(r[rowKey]));
+      const add = selectAllRows.filter((r2) => canSelectRow(r2) && !selectedKeys.has(r2[rowKey]));
       onSelectedChange?.([...selected, ...add]);
     }
   };
@@ -15884,19 +15907,89 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       const shouldSelect = selectedKeys.has(anchor.key);
       const range = rows.slice(from, to + 1).filter(canSelectRow);
       if (shouldSelect) {
-        const add = range.filter((r) => !selectedKeys.has(r[rowKey]));
+        const add = range.filter((r2) => !selectedKeys.has(r2[rowKey]));
         onSelectedChange?.([...selected, ...add]);
       } else {
-        const keys = new Set(range.map((r) => r[rowKey]));
-        onSelectedChange?.(selected.filter((r) => !keys.has(r[rowKey])));
+        const keys = new Set(range.map((r2) => r2[rowKey]));
+        onSelectedChange?.(selected.filter((r2) => !keys.has(r2[rowKey])));
       }
       return;
     }
     rangeAnchorRef.current = { index, key: row[rowKey] };
     if (selectedKeys.has(row[rowKey]))
-      onSelectedChange?.(selected.filter((r) => r[rowKey] !== row[rowKey]));
+      onSelectedChange?.(selected.filter((r2) => r2[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((r2) => r2[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((r2) => r2[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((r2) => !d.baseKeys.has(r2[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 = () => {
@@ -18188,6 +18361,7 @@ function SDateRangePicker({
   disabled = false,
   clearable = false,
   width,
+  maxWidth,
   name,
   rules,
   status,
@@ -18248,10 +18422,10 @@ function SDateRangePicker({
     lineHeight: 20,
     radius: 4
   };
-  const select = (r) => {
+  const select = (r2) => {
     setPendingStart(null);
-    onValueChange?.(r);
-    if (rules && rules.length > 0) setRuleError(runRules(r, rules));
+    onValueChange?.(r2);
+    if (rules && rules.length > 0) setRuleError(runRules(r2, rules));
     if (!showTimePicker) setOpen(false);
   };
   const clear = () => {
@@ -18279,7 +18453,7 @@ function SDateRangePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinW,
-      maxWidth: dims.fieldMaxW,
+      maxWidth: maxWidth ?? dims.fieldMaxW,
       disabled,
       className,
       style,
@@ -18769,6 +18943,7 @@ function SKeyValueTable({
   search = false,
   radius = "default",
   bordered = true,
+  fieldWidth = "auto",
   onChange,
   onSearch,
   className,
@@ -18782,6 +18957,7 @@ function SKeyValueTable({
   });
   const cellHeight = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-keyValue-height)";
   const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-keyValue-body-paddingY)";
+  const fillMaxWidth = fieldWidth === "fill" ? { maxWidth: "100%" } : void 0;
   const renderField = (f) => {
     if (f.render) return f.render;
     const opt = { ...f.options ?? {} };
@@ -18803,9 +18979,9 @@ function SKeyValueTable({
       case "switch":
         return /* @__PURE__ */ jsxRuntime.jsx(SSwitch, { ...opt, onValueChange: up });
       case "date-picker":
-        return /* @__PURE__ */ jsxRuntime.jsx(SDatePicker, { width: "100%", ...opt, onValueChange: up });
+        return /* @__PURE__ */ jsxRuntime.jsx(SDatePicker, { width: "100%", ...fillMaxWidth, ...opt, onValueChange: up });
       case "date-range-picker":
-        return /* @__PURE__ */ jsxRuntime.jsx(SDateRangePicker, { width: "100%", ...opt, onValueChange: up });
+        return /* @__PURE__ */ jsxRuntime.jsx(SDateRangePicker, { width: "100%", ...fillMaxWidth, ...opt, onValueChange: up });
       case "file-picker":
         return /* @__PURE__ */ jsxRuntime.jsx(SFilePicker, { width: "100%", ...opt, onValueChange: up });
       case "text":
@@ -18813,25 +18989,54 @@ function SKeyValueTable({
         return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--sys-color-fg-primary)]", children: opt.value ?? "" });
     }
   };
-  const skip = fields.map((row) => row.map(() => false));
-  fields.forEach(
-    (row, r) => row.forEach((f, c) => {
-      const span = f.thRowSpan && f.thRowSpan > 1 ? f.thRowSpan : 1;
-      for (let dr = 1; dr < span; dr++) {
-        const tr = skip[r + dr];
-        if (tr && c < tr.length) tr[c] = true;
-      }
-    })
-  );
+  const grid = fields.map(() => []);
+  const showThAt = fields.map((row) => row.map(() => true));
+  const isLabelCol = [];
+  const labelColWidth = [];
   let maxCols = 0;
-  fields.forEach((row, r) => {
-    let cols = 0;
-    row.forEach((f, c) => {
-      const thCols = f.hideTh ? 0 : skip[r]?.[c] ? 1 : f.thColSpan && f.thColSpan > 1 ? f.thColSpan : 1;
-      const tdCols = f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : 1;
-      cols += thCols + tdCols;
+  fields.forEach((row, r2) => {
+    const occupied = grid[r2];
+    let col = 0;
+    const skipOccupied = () => {
+      let sawThSupply = false;
+      while (occupied[col] != null) {
+        if (occupied[col] === "th-supply") sawThSupply = true;
+        col++;
+      }
+      return sawThSupply;
+    };
+    row.forEach((f, i) => {
+      const thRowSpan = f.thRowSpan && f.thRowSpan > 1 ? f.thRowSpan : 1;
+      const thColSpan = f.thColSpan && f.thColSpan > 1 ? f.thColSpan : 1;
+      const tdRowSpan = f.tdRowSpan && f.tdRowSpan > 1 ? f.tdRowSpan : 1;
+      const tdColSpan = f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : 1;
+      const thSuppliedAbove = skipOccupied();
+      const showTh = !f.hideTh && !thSuppliedAbove;
+      showThAt[r2][i] = showTh;
+      if (showTh) {
+        isLabelCol[col] = true;
+        if (thColSpan === 1 && f.thWidth != null && labelColWidth[col] == null)
+          labelColWidth[col] = f.thWidth;
+        for (let dr = 1; dr < thRowSpan; dr++) {
+          const kind = dr >= tdRowSpan ? "th-supply" : "blocked";
+          for (let dc = 0; dc < thColSpan; dc++) {
+            const target = grid[r2 + dr];
+            if (target) target[col + dc] = kind;
+          }
+        }
+        col += thColSpan;
+      }
+      skipOccupied();
+      for (let dr = 1; dr < tdRowSpan; dr++) {
+        for (let dc = 0; dc < tdColSpan; dc++) {
+          const target = grid[r2 + dr];
+          if (target) target[col + dc] = "blocked";
+        }
+      }
+      col += tdColSpan;
     });
-    if (cols > maxCols) maxCols = cols;
+    skipOccupied();
+    maxCols = Math.max(maxCols, col, occupied.length);
   });
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[8px] rounded-t-none" : "rounded-[8px]";
   const frameClass = cn(
@@ -18845,19 +19050,14 @@ function SKeyValueTable({
       className: "w-full border-separate border-spacing-0",
       style: { tableLayout: "fixed", ...style },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: Array.from({ length: maxCols }, (_, i) => {
-          if (i % 2 !== 0) return /* @__PURE__ */ jsxRuntime.jsx("col", {}, `col-${i}`);
-          const fieldIdx = i / 2;
-          const fieldThWidth = fields.reduce((found, row) => {
-            if (found != null) return found;
-            return row[fieldIdx]?.thWidth;
-          }, void 0);
-          return /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: cssLen2(fieldThWidth) ?? "120px" } }, `col-${i}`);
-        }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: fields.map((row, r) => {
-          const cellBorder = r === 0 ? "" : "border-t border-solid border-[color:var(--cmp-table-border-color)]";
+        /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: Array.from(
+          { length: maxCols },
+          (_, i) => isLabelCol[i] ? /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: cssLen2(labelColWidth[i]) ?? "120px" } }, `col-${i}`) : /* @__PURE__ */ jsxRuntime.jsx("col", {}, `col-${i}`)
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: fields.map((row, r2) => {
+          const cellBorder = r2 === 0 ? "" : "border-t border-solid border-[color:var(--cmp-table-border-color)]";
           return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: row.map((f, c) => {
-            const showTh = !f.hideTh && !skip[r][c];
+            const showTh = showThAt[r2][c];
             const isReadOnlyCell = f.render == null && (f.type == null || f.type === "text");
             return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
               showTh && /* @__PURE__ */ jsxRuntime.jsx(
@@ -18893,7 +19093,7 @@ function SKeyValueTable({
                     )
                   ] })
                 },
-                `th-${r}-${c}`
+                `th-${r2}-${c}`
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "td",
@@ -18910,10 +19110,10 @@ function SKeyValueTable({
                   style: { height: cellHeight, paddingTop: cellPadY, paddingBottom: cellPadY },
                   children: renderField(f)
                 },
-                `td-${r}-${c}`
+                `td-${r2}-${c}`
               )
-            ] }, `${r}-${c}`);
-          }) }, r);
+            ] }, `${r2}-${c}`);
+          }) }, r2);
         }) })
       ]
     }
@@ -18972,6 +19172,7 @@ function ratioOf(value, scale) {
   return (value - scale.min) / span;
 }
 var AXIS_LABEL_GAP = 8;
+var AXIS_EDGE_PADDING = 24;
 function ChartGrid({ scale, direction, width, height }) {
   const vertical = direction === "vertical";
   return /* @__PURE__ */ jsxRuntime.jsx("g", { "aria-hidden": true, children: scale.ticks.map((tick) => {
@@ -19250,20 +19451,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}`
         ))
       ]
     }
@@ -19276,7 +19481,6 @@ var BAR_SIZE_MAX = 80;
 var BAR_GAP = 6;
 var GROUP_PADDING_MIN = 8;
 var GROUP_PADDING_MAX = 24;
-var AXIS_EDGE_PADDING = 24;
 var VALUE_LABEL_GAP = 6;
 var BAR_RADIUS = 8;
 var BAR_OPACITY_DEFAULT = "var(--cmp-chart-bar-opacity-default)";
@@ -19320,23 +19524,23 @@ function barOpacity(hoveredCategory, categoryIndex) {
   return hoveredCategory === categoryIndex ? BAR_OPACITY_HOVER : BAR_OPACITY_DIMMED;
 }
 function barPath(x, y, width, height, direction, negative) {
-  const r = Math.max(0, Math.min(BAR_RADIUS, width / 2, height / 2));
-  if (r === 0) return `M${x} ${y}h${width}v${height}h${-width}Z`;
+  const r2 = Math.max(0, Math.min(BAR_RADIUS, width / 2, height / 2));
+  if (r2 === 0) return `M${x} ${y}h${width}v${height}h${-width}Z`;
   if (direction === "vertical") {
     return negative ? (
       // 아래로 자란다 — 아래쪽 두 모서리가 둥글다
-      `M${x} ${y}h${width}v${height - r}a${r} ${r} 0 0 1 ${-r} ${r}h${-(width - 2 * r)}a${r} ${r} 0 0 1 ${-r} ${-r}Z`
+      `M${x} ${y}h${width}v${height - r2}a${r2} ${r2} 0 0 1 ${-r2} ${r2}h${-(width - 2 * r2)}a${r2} ${r2} 0 0 1 ${-r2} ${-r2}Z`
     ) : (
       // 위로 자란다 — 위쪽 두 모서리가 둥글다
-      `M${x} ${y + height}v${-(height - r)}a${r} ${r} 0 0 1 ${r} ${-r}h${width - 2 * r}a${r} ${r} 0 0 1 ${r} ${r}v${height - r}Z`
+      `M${x} ${y + height}v${-(height - r2)}a${r2} ${r2} 0 0 1 ${r2} ${-r2}h${width - 2 * r2}a${r2} ${r2} 0 0 1 ${r2} ${r2}v${height - r2}Z`
     );
   }
   return negative ? (
     // 왼쪽으로 자란다
-    `M${x + width} ${y}h${-(width - r)}a${r} ${r} 0 0 0 ${-r} ${r}v${height - 2 * r}a${r} ${r} 0 0 0 ${r} ${r}h${width - r}Z`
+    `M${x + width} ${y}h${-(width - r2)}a${r2} ${r2} 0 0 0 ${-r2} ${r2}v${height - 2 * r2}a${r2} ${r2} 0 0 0 ${r2} ${r2}h${width - r2}Z`
   ) : (
     // 오른쪽으로 자란다
-    `M${x} ${y}h${width - r}a${r} ${r} 0 0 1 ${r} ${r}v${height - 2 * r}a${r} ${r} 0 0 1 ${-r} ${r}h${-(width - r)}Z`
+    `M${x} ${y}h${width - r2}a${r2} ${r2} 0 0 1 ${r2} ${r2}v${height - 2 * r2}a${r2} ${r2} 0 0 1 ${-r2} ${r2}h${-(width - r2)}Z`
   );
 }
 var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
@@ -19835,6 +20039,444 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
     }
   );
 });
+
+// src/components/SLineChart/lineChart.config.ts
+var LINE_WIDTH = 2;
+var POINT_RADIUS = 4;
+var POINT_HOVER_RADIUS = 9.5;
+var POINT_HOVER_BORDER_WIDTH = 1;
+var POINT_HOVER_INNER_RADIUS = 5;
+var POINT_HOVER_BG = "var(--cmp-chart-bg)";
+var POINT_HOVER_EXTENT = POINT_HOVER_RADIUS + POINT_HOVER_BORDER_WIDTH / 2;
+var BAND_MIN = 40;
+var VALUE_LABEL_GAP2 = 6;
+var AREA_OPACITY = "var(--opacity-040)";
+var LINE_DATA_LABEL_COLOR = "var(--cmp-chart-bar-dataLabel-color-default)";
+var LINE_DATA_LABEL_TYPO = "typo-body-sm-medium";
+var LINE_DATA_LABEL_TYPO_HOVER = "typo-body-md-bold";
+var r = (value) => Math.round(value * 100) / 100;
+function tangents(points) {
+  const n = points.length;
+  const slopes = [];
+  for (let i = 0; i < n - 1; i += 1) {
+    const dx = points[i + 1].x - points[i].x;
+    slopes.push(dx === 0 ? 0 : (points[i + 1].y - points[i].y) / dx);
+  }
+  const m = new Array(n).fill(0);
+  m[0] = slopes[0] ?? 0;
+  m[n - 1] = slopes[n - 2] ?? 0;
+  for (let i = 1; i < n - 1; i += 1) {
+    const prev = slopes[i - 1];
+    const next = slopes[i];
+    m[i] = prev * next <= 0 ? 0 : (prev + next) / 2;
+  }
+  for (let i = 0; i < n - 1; i += 1) {
+    const slope = slopes[i];
+    if (slope === 0) {
+      m[i] = 0;
+      m[i + 1] = 0;
+      continue;
+    }
+    const a = m[i] / slope;
+    const b = m[i + 1] / slope;
+    const scale = Math.hypot(a, b);
+    if (scale > 3) {
+      m[i] = 3 * a / scale * slope;
+      m[i + 1] = 3 * b / scale * slope;
+    }
+  }
+  return m;
+}
+function commands(points, smooth) {
+  if (points.length < 2) return "";
+  if (!smooth) {
+    return points.slice(1).map((p) => `L${r(p.x)} ${r(p.y)}`).join("");
+  }
+  const m = tangents(points);
+  let path = "";
+  for (let i = 0; i < points.length - 1; i += 1) {
+    const from = points[i];
+    const to = points[i + 1];
+    const dx = (to.x - from.x) / 3;
+    path += `C${r(from.x + dx)} ${r(from.y + m[i] * dx)} ${r(to.x - dx)} ${r(to.y - m[i + 1] * dx)} ${r(to.x)} ${r(to.y)}`;
+  }
+  return path;
+}
+function linePath(points, smooth) {
+  const first = points[0];
+  if (!first || points.length < 2) return "";
+  return `M${r(first.x)} ${r(first.y)}${commands(points, smooth)}`;
+}
+function areaPath(top, bottom, smooth) {
+  const first = top[0];
+  if (!first || top.length < 2 || bottom.length !== top.length) return "";
+  const back = [...bottom].reverse();
+  return `M${r(first.x)} ${r(first.y)}${commands(top, smooth)}L${r(back[0].x)} ${r(back[0].y)}${commands(back, smooth)}Z`;
+}
+var defaultFormat2 = (value) => value.toLocaleString();
+function runsOf(row) {
+  const runs = [];
+  let current = [];
+  for (const point of row) {
+    if (point == null) {
+      if (current.length > 0) runs.push(current);
+      current = [];
+      continue;
+    }
+    current.push(point);
+  }
+  if (current.length > 0) runs.push(current);
+  return runs;
+}
+var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
+  categories,
+  series,
+  curve = "linear",
+  area = false,
+  stacked = false,
+  palette = "default",
+  colors: customColors,
+  max,
+  tickCount = 8,
+  showPoint = true,
+  showValueLabel = false,
+  showLegend = true,
+  legendPosition = "top",
+  showTooltip = true,
+  formatValue = defaultFormat2,
+  height,
+  onPointClick,
+  className,
+  style
+}, ref) {
+  const smooth = curve === "smooth";
+  const { ref: plotRef, size } = useElementSize();
+  const { ref: axisTextRef, size: axisText } = useElementSize();
+  const { ref: axisSampleRef, size: axisSample } = useElementSize();
+  const [hoveredCategory, setHoveredCategory] = react.useState(null);
+  const colorAt = react.useCallback(
+    (seriesIndex) => paletteColor(palette, seriesIndex, customColors),
+    [palette, customColors]
+  );
+  const rows = react.useMemo(() => {
+    const running = categories.map(() => 0);
+    return series.map(
+      (s) => categories.map((_, categoryIndex) => {
+        const raw = s.data[categoryIndex];
+        if (raw == null || !Number.isFinite(raw)) return null;
+        if (!stacked) return { value: raw, base: 0, own: raw };
+        const base = running[categoryIndex];
+        running[categoryIndex] = base + raw;
+        return { value: base + raw, base, own: raw };
+      })
+    );
+  }, [series, categories, stacked]);
+  const scale = react.useMemo(
+    () => niceScale(
+      // 누적은 쌓아 올린 값까지 축에 들어와야 맨 위 선이 눈금 밖으로 나가지 않는다.
+      rows.flatMap((row) => row.flatMap((point) => point == null ? [] : [point.value, point.base])),
+      tickCount,
+      max
+    ),
+    [rows, tickCount, max]
+  );
+  const band = categories.length > 0 ? Math.max(0, size.width - AXIS_EDGE_PADDING * 2) / categories.length : 0;
+  const minPlotWidth = categories.length * BAND_MIN + AXIS_EDGE_PADDING * 2;
+  const totalHeight = height ?? 320;
+  const plotHeight = typeof totalHeight === "number" ? Math.max(0, totalHeight - axisText.height) : `calc(${totalHeight} - ${axisText.height}px)`;
+  const plotted = react.useMemo(() => {
+    if (size.width <= 0 || size.height <= 0) return [];
+    const xOf = (index) => AXIS_EDGE_PADDING + (index + 0.5) * band;
+    const yOf = (value) => size.height - ratioOf(value, scale) * size.height;
+    return rows.map(
+      (row) => row.map(
+        (point, categoryIndex) => point == null ? null : { x: xOf(categoryIndex), y: yOf(point.value), baseY: yOf(point.base), own: point.own }
+      )
+    );
+  }, [rows, size.width, size.height, band, scale]);
+  const legend = showLegend ? /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: series.map((s, i) => ({ name: s.name, color: colorAt(i) })) }) : null;
+  const handleMove = (event) => {
+    if (!showTooltip || band <= 0 || series.length === 0) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const along = event.clientX - rect.left - AXIS_EDGE_PADDING;
+    const category = Math.floor(along / band);
+    setHoveredCategory(category >= 0 && category < categories.length ? category : null);
+  };
+  const tooltipItems = hoveredCategory == null ? [] : rows.flatMap((row, seriesIndex) => {
+    const point = row[hoveredCategory];
+    if (point == null) return [];
+    return [
+      {
+        color: colorAt(seriesIndex),
+        label: series[seriesIndex]?.name ?? "",
+        value: formatValue(point.own)
+      }
+    ];
+  });
+  const anchorTop = react.useMemo(() => {
+    if (hoveredCategory == null || plotted.length === 0) return null;
+    let top = Number.POSITIVE_INFINITY;
+    for (const row of plotted) {
+      const point = row[hoveredCategory];
+      if (point != null) top = Math.min(top, point.y);
+    }
+    return Number.isFinite(top) ? top : null;
+  }, [hoveredCategory, plotted]);
+  const { ref: valueLabelRef, metrics: valueLabel } = useSvgTextMetrics();
+  const tooltipAnchor = react.useMemo(() => {
+    if (hoveredCategory == null || anchorTop == null) return null;
+    const left = AXIS_EDGE_PADDING + hoveredCategory * band;
+    const top = showValueLabel ? anchorTop - POINT_RADIUS - VALUE_LABEL_GAP2 + valueLabel.top : anchorTop - POINT_HOVER_EXTENT;
+    return { left, right: left + band, top };
+  }, [hoveredCategory, anchorTop, band, showValueLabel, valueLabel.top]);
+  const categoryLabels = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      className: "relative w-full typo-body-sm-medium text-(--cmp-chart-axis-color)",
+      style: { minWidth: minPlotWidth || void 0 },
+      children: [
+        categories.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
+            style: { left: AXIS_EDGE_PADDING + (index + 0.5) * band },
+            children: label
+          },
+          `${label}-${index}`
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "invisible block whitespace-nowrap", children: "0" })
+      ]
+    }
+  );
+  const areas = react.useMemo(() => {
+    if (!area) return [];
+    return plotted.flatMap(
+      (row, seriesIndex) => runsOf(row).map((run, runIndex) => {
+        const d = areaPath(
+          run,
+          run.map((p) => ({ x: p.x, y: p.baseY })),
+          smooth
+        );
+        if (!d) return null;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            "aria-hidden": true,
+            d,
+            style: { fill: colorAt(seriesIndex), fillOpacity: AREA_OPACITY }
+          },
+          `area-${seriesIndex}-${runIndex}`
+        );
+      })
+    );
+  }, [area, plotted, smooth, colorAt]);
+  const lines = react.useMemo(
+    () => plotted.flatMap(
+      (row, seriesIndex) => runsOf(row).map((run, runIndex) => {
+        const d = linePath(run, smooth);
+        if (!d) return null;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            "aria-hidden": true,
+            d,
+            fill: "none",
+            strokeWidth: LINE_WIDTH,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            style: { stroke: colorAt(seriesIndex) }
+          },
+          `line-${seriesIndex}-${runIndex}`
+        );
+      })
+    ),
+    [plotted, smooth, colorAt]
+  );
+  const { pointHalos, pointDots } = react.useMemo(() => {
+    const halos = [];
+    const dots = [];
+    plotted.forEach((row, seriesIndex) => {
+      row.forEach((point, categoryIndex) => {
+        if (point == null) return;
+        const hovered = hoveredCategory === categoryIndex;
+        if (!showPoint && !hovered) return;
+        const color = colorAt(seriesIndex);
+        const key = `${seriesIndex}-${categoryIndex}`;
+        if (hovered) {
+          halos.push(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                "aria-hidden": true,
+                cx: point.x,
+                cy: point.y,
+                r: POINT_HOVER_RADIUS,
+                style: {
+                  fill: POINT_HOVER_BG,
+                  stroke: color,
+                  strokeWidth: POINT_HOVER_BORDER_WIDTH
+                }
+              },
+              `halo-${key}`
+            )
+          );
+        }
+        dots.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: point.x,
+              cy: point.y,
+              r: hovered ? POINT_HOVER_INNER_RADIUS : POINT_RADIUS,
+              style: { fill: color, cursor: onPointClick ? "pointer" : void 0 },
+              onClick: onPointClick ? () => onPointClick({ seriesIndex, categoryIndex, value: point.own }) : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${categories[categoryIndex]} ${series[seriesIndex]?.name ?? ""} ${formatValue(point.own)}` })
+            },
+            `dot-${key}`
+          )
+        );
+      });
+    });
+    return { pointHalos: halos, pointDots: dots };
+  }, [plotted, showPoint, hoveredCategory, colorAt, onPointClick, categories, series, formatValue]);
+  const valueLabels = react.useMemo(
+    () => showValueLabel ? plotted.flatMap(
+      (row, seriesIndex) => row.map(
+        (point, categoryIndex) => point == null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: point.x,
+            y: point.y - POINT_RADIUS - VALUE_LABEL_GAP2,
+            className: hoveredCategory === categoryIndex ? LINE_DATA_LABEL_TYPO_HOVER : LINE_DATA_LABEL_TYPO,
+            style: { fill: LINE_DATA_LABEL_COLOR },
+            textAnchor: "middle",
+            dominantBaseline: "auto",
+            children: formatValue(point.own)
+          },
+          `label-${seriesIndex}-${categoryIndex}`
+        )
+      )
+    ) : [],
+    [showValueLabel, plotted, hoveredCategory, formatValue]
+  );
+  const inset = { paddingTop: axisSample.height / 2, paddingBottom: axisSample.height / 2 };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChartFrame,
+    {
+      ref,
+      legend,
+      legendPosition,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "grid",
+          style: {
+            columnGap: AXIS_LABEL_GAP,
+            // 눈금은 왼쪽 한 줄뿐이다 — 오른쪽에도 적으면 서로 다른 단위처럼 읽힌다.
+            gridTemplateColumns: "max-content 1fr"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: plotHeight, ...inset }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ChartAxisLabels,
+              {
+                scale,
+                direction: "vertical",
+                format: formatValue,
+                sampleRef: axisSampleRef
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 overflow-x-auto", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "relative min-w-0",
+                  style: { height: plotHeight, minWidth: minPlotWidth || void 0, ...inset },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      ref: plotRef,
+                      className: "relative h-full w-full",
+                      onMouseMove: handleMove,
+                      onMouseLeave: () => setHoveredCategory(null),
+                      children: [
+                        size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                          "svg",
+                          {
+                            width: size.width,
+                            height: size.height,
+                            role: "img",
+                            "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 ${stacked ? "\uB204\uC801 " : ""}\uAEBE\uC740\uC120 \uADF8\uB798\uD504`,
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "text",
+                                {
+                                  ref: valueLabelRef,
+                                  "aria-hidden": true,
+                                  x: 0,
+                                  y: 0,
+                                  className: LINE_DATA_LABEL_TYPO_HOVER,
+                                  dominantBaseline: "auto",
+                                  style: { visibility: "hidden" },
+                                  children: "0"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ChartGrid,
+                                {
+                                  scale,
+                                  direction: "vertical",
+                                  width: size.width,
+                                  height: size.height
+                                }
+                              ),
+                              hoveredCategory != null && /* @__PURE__ */ jsxRuntime.jsx(
+                                "rect",
+                                {
+                                  "aria-hidden": true,
+                                  x: AXIS_EDGE_PADDING + hoveredCategory * band,
+                                  y: 0,
+                                  width: band,
+                                  height: size.height,
+                                  style: {
+                                    fill: "var(--cmp-chart-barContainer-hover-bg)",
+                                    fillOpacity: "var(--cmp-chart-barContainer-hover-opacity)"
+                                  }
+                                }
+                              ),
+                              areas,
+                              lines,
+                              pointHalos,
+                              pointDots,
+                              valueLabels
+                            ]
+                          }
+                        ),
+                        showTooltip && hoveredCategory != null && tooltipAnchor != null && tooltipItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                          ChartTooltip,
+                          {
+                            title: categories[hoveredCategory] ?? "",
+                            items: tooltipItems,
+                            anchor: tooltipAnchor,
+                            bounds: size,
+                            gapX: { after: -4, before: -4 }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: axisTextRef, children: categoryLabels })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+});
 var BUTTON_STYLE = {
   default: { color: "secondary" },
   danger: { color: "danger", outline: true },
@@ -21117,7 +21759,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,
@@ -21203,14 +21845,14 @@ var TableSizePicker = ({
             onPick(size.rows, size.cols);
           }
         },
-        children: Array.from({ length: TABLE_PICKER_ROWS }, (_, r) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", className: "flex", style: { gap: TABLE_PICKER_GAP }, children: Array.from({ length: TABLE_PICKER_COLS }, (_2, c) => {
-          const on = r < size.rows && c < size.cols;
+        children: Array.from({ length: TABLE_PICKER_ROWS }, (_, r2) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", className: "flex", style: { gap: TABLE_PICKER_GAP }, children: Array.from({ length: TABLE_PICKER_COLS }, (_2, c) => {
+          const on = r2 < size.rows && c < size.cols;
           return /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               role: "gridcell",
-              "aria-label": `${r + 1}\uD589 ${c + 1}\uC5F4`,
+              "aria-label": `${r2 + 1}\uD589 ${c + 1}\uC5F4`,
               "aria-selected": on,
               tabIndex: -1,
               className: "box-border cursor-pointer rounded-[3px] border border-solid p-0 outline-none",
@@ -21220,13 +21862,13 @@ var TableSizePicker = ({
                 borderColor: on ? "var(--sys-color-bg-accent)" : "var(--sys-color-border-default)",
                 background: on ? "var(--color-bg-accentFaint)" : "transparent"
               },
-              onMouseEnter: () => setSize({ rows: r + 1, cols: c + 1 }),
-              onFocus: () => setSize({ rows: r + 1, cols: c + 1 }),
-              onClick: () => onPick(r + 1, c + 1)
+              onMouseEnter: () => setSize({ rows: r2 + 1, cols: c + 1 }),
+              onFocus: () => setSize({ rows: r2 + 1, cols: c + 1 }),
+              onClick: () => onPick(r2 + 1, c + 1)
             },
             c
           );
-        }) }, r))
+        }) }, r2))
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -21249,7 +21891,7 @@ var TableMenuItem = ({
   disabled,
   onSelect
 }) => /* @__PURE__ */ jsxRuntime.jsx(
-  RDropdown2__namespace.Item,
+  RDropdown3__namespace.Item,
   {
     className: cn(menuItemClass, menuItemDisabledClass),
     disabled,
@@ -21416,8 +22058,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 +22072,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 +22082,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 +22093,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 +22107,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 +22116,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 +22208,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 +22316,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 +22334,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown2__namespace.Item,
+              RDropdown3__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleOrderedList().run(),
@@ -21703,7 +22345,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown2__namespace.Item,
+              RDropdown3__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleTaskList().run(),
@@ -21807,17 +22449,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 +22471,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 +22505,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 +22538,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,
                   {
@@ -25214,6 +25856,7 @@ function STimePicker({
   showMeridiem,
   minuteStep = 1,
   width,
+  maxWidth,
   name,
   rules,
   status,
@@ -25287,7 +25930,7 @@ function STimePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: dims.fieldMinWidth,
-      maxWidth: dims.fieldMaxWidth,
+      maxWidth: maxWidth ?? dims.fieldMaxWidth,
       disabled,
       className,
       style,
@@ -25679,6 +26322,7 @@ function STimeRangePicker({
   minuteStep = 1,
   rangeOrder = "strict",
   width,
+  maxWidth,
   name,
   rules,
   status,
@@ -25754,7 +26398,7 @@ function STimeRangePicker({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       width,
       minWidth: effectiveShowMeridiem ? MIDDAY_FIELD_MIN_WIDTH[size] : dims.fieldMinWidth,
-      maxWidth: effectiveShowMeridiem ? MIDDAY_FIELD_MAX_WIDTH[size] : dims.fieldMaxWidth,
+      maxWidth: maxWidth ?? (effectiveShowMeridiem ? MIDDAY_FIELD_MAX_WIDTH[size] : dims.fieldMaxWidth),
       disabled,
       className,
       style,
@@ -25955,6 +26599,7 @@ exports.SLAYOUT_MIN_WIDTH = SLAYOUT_MIN_WIDTH;
 exports.SLauncherListBox = SLauncherListBox;
 exports.SLayout = SLayout;
 exports.SLayoutContext = SLayoutContext;
+exports.SLineChart = SLineChart;
 exports.SLinearProgress = SLinearProgress;
 exports.SList = SList2;
 exports.SListItem = SListItem2;