sellmate-design-system-react 9.0.0-beta.60 → 9.0.0-beta.62

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 RDropdown3 = require('@radix-ui/react-dropdown-menu');
+var RDropdown5 = 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 RDropdown3__namespace = /*#__PURE__*/_interopNamespace(RDropdown3);
+var RDropdown5__namespace = /*#__PURE__*/_interopNamespace(RDropdown5);
 var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
 var RDialog__namespace = /*#__PURE__*/_interopNamespace(RDialog);
 var Ariakit__namespace = /*#__PURE__*/_interopNamespace(Ariakit);
@@ -3949,6 +3949,7 @@ var BADGE_COLORS = [
   "blue",
   "darkblue",
   "indigo",
+  "purple",
   "grey"
 ];
 var SBadge = /* @__PURE__ */ react.forwardRef(function SBadge2({ color = "blue", className, ...rest }, ref) {
@@ -4275,7 +4276,7 @@ var TAG_SIZE_CONFIG = {
     radius: 6,
     iconSize: 16,
     fontSize: 12,
-    fontWeight: 700,
+    fontWeight: 600,
     lineHeight: 20
   },
   md: {
@@ -8034,8 +8035,8 @@ function renderItems(message, depth = 1) {
   });
   return out;
 }
-var SCallout = /* @__PURE__ */ react.forwardRef(function SCallout2({ type = "default", message = [], children, className, style }, ref) {
-  const isDanger = type === "danger";
+var SCallout = /* @__PURE__ */ react.forwardRef(function SCallout2({ type = "default", showTitle = true, message = [], children, className, style }, ref) {
+  const hasDangerTitle = type === "danger" && showTitle;
   const surface = SURFACE[type];
   const vars = {
     "--co-bg": surface.bg,
@@ -8054,7 +8055,7 @@ var SCallout = /* @__PURE__ */ react.forwardRef(function SCallout2({ type = "def
       ),
       style: { ...vars, ...style },
       children: [
-        isDanger && /* @__PURE__ */ jsxRuntime.jsxs(
+        hasDangerTitle && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: "flex shrink-0 flex-col items-center justify-center gap-[var(--cmp-callout-danger-title-gap)] px-[var(--cmp-callout-danger-title-paddingX)] py-[8px] text-[16px] font-bold leading-[26px]",
@@ -8381,6 +8382,58 @@ function clampToAvailableWidth(value, availableWidth) {
   const css = typeof value === "number" ? `${value}px` : value;
   return `min(${css}, ${availableWidth})`;
 }
+var VIEWPORT_PADDING = 12;
+var itemClass = 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)]"
+);
+function DropdownMenuContent({
+  items,
+  onItemClick,
+  align = "start",
+  className,
+  ...contentProps
+}) {
+  const portalContainer = usePortalContainer();
+  return /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+    RDropdown5__namespace.Content,
+    {
+      sideOffset: 4,
+      align,
+      collisionPadding: VIEWPORT_PADDING,
+      className: cn(
+        "z-50 overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-normal-sm",
+        // 창보다 넓은 메뉴는 창 폭에 맞춰 줄인다. 호출부가 하한(min-width)을 줄 때도 같은
+        // 상한으로 감싸야 한다 — min-width 가 max-width 를 이기기 때문이다.
+        "max-w-[var(--radix-dropdown-menu-content-available-width)]",
+        FLOATING_SLIDE_ANIM,
+        className
+      ),
+      ...contentProps,
+      children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
+        RDropdown5__namespace.Item,
+        {
+          disabled: it.disabled,
+          onSelect: () => onItemClick?.(it.value),
+          className: itemClass,
+          children: [
+            it.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: it.icon, size: 12 }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "min-w-0 break-words",
+                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(it.label) }
+              }
+            )
+          ]
+        },
+        it.value
+      ))
+    }
+  ) });
+}
 var SIZE2 = {
   xs: { height: 24, paddingX: 8, gap: 6, arrow: 12, fontSize: 12, minWidth: 64, splitMinWidth: 72 },
   sm: {
@@ -8417,13 +8470,6 @@ function splitDivider(color, outline) {
   };
   return (outline ? outlined : solid)[color];
 }
-var VIEWPORT_PADDING = 12;
-var itemClass = 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 SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
   function SDropdownButton({
     color = "primary",
@@ -8439,7 +8485,6 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
     className,
     style
   }, ref) {
-    const portalContainer = usePortalContainer();
     const insideModal = useInsideModal();
     const [open, setOpen] = react.useState(false);
     const splitWrapRef = react.useRef(null);
@@ -8493,45 +8538,20 @@ 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(RDropdown3__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RDropdown3__namespace.Content,
+    const menu = /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenuContent,
       {
-        sideOffset: 4,
-        align: "start",
+        items,
+        onItemClick,
         alignOffset: split ? splitAlignOffset : 0,
-        collisionPadding: VIEWPORT_PADDING,
         className: cn(
-          "z-50 overflow-hidden rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-normal-sm",
-          // 창보다 넓은 메뉴는 창 폭에 맞춰 줄인다. 트리거 너비를 따르는 하한도 같은 상한으로
-          // 감싸야 한다 — min-width 가 max-width 를 이기기 때문이다.
-          "max-w-[var(--radix-dropdown-menu-content-available-width)]",
-          !split && "min-w-[min(var(--radix-dropdown-menu-trigger-width),var(--radix-dropdown-menu-content-available-width))]",
-          FLOATING_SLIDE_ANIM
+          !split && "min-w-[min(var(--radix-dropdown-menu-trigger-width),var(--radix-dropdown-menu-content-available-width))]"
         ),
-        style: split ? { minWidth: clampToAvailableWidth(splitWidth, DROPDOWN_AVAILABLE_WIDTH) } : void 0,
-        children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
-          RDropdown3__namespace.Item,
-          {
-            disabled: it.disabled,
-            onSelect: () => onItemClick?.(it.value),
-            className: itemClass,
-            children: [
-              it.icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: it.icon, size: 12 }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "min-w-0 break-words",
-                  dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(it.label) }
-                }
-              )
-            ]
-          },
-          it.value
-        ))
+        style: split ? { minWidth: clampToAvailableWidth(splitWidth, DROPDOWN_AVAILABLE_WIDTH) } : void 0
       }
-    ) });
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      RDropdown3__namespace.Root,
+      RDropdown5__namespace.Root,
       {
         modal: !insideModal,
         open,
@@ -8563,7 +8583,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
                     children: label
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     ref: splitToggleRef,
@@ -8582,7 +8602,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
                 ) })
               ]
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          ) : /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               type: "button",
@@ -8610,6 +8630,87 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
   }
 );
 var SDropdownButton2 = /* @__PURE__ */ withDisplayName(SDropdownButtonImpl, "SDropdownButton");
+var DEFAULT_LABEL = "\uAE30\uB2A5 \uB354 \uBCF4\uAE30";
+var SMeatballButtonImpl = /* @__PURE__ */ react.forwardRef(
+  function SMeatballButton({
+    size = "sm",
+    intent = "default",
+    items = [],
+    // 기본값을 리터럴로 둬야 README(docs:gen)에 실제 문구가 찍힌다
+    tooltipText = "\uAE30\uB2A5 \uB354 \uBCF4\uAE30",
+    ariaLabel,
+    disabled = false,
+    onItemClick,
+    onOpenChange,
+    className,
+    style
+  }, ref) {
+    const insideModal = useInsideModal();
+    const [open, setOpen] = react.useState(false);
+    const buttonRef = react.useRef(null);
+    const pointerRef = react.useRef(false);
+    const setMenuOpen = (o) => {
+      setOpen(o);
+      onOpenChange?.(o);
+    };
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        open: () => setOpen(true),
+        close: () => setOpen(false)
+      }),
+      []
+    );
+    const label = ariaLabel?.trim() || tooltipText.trim() || DEFAULT_LABEL;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      RDropdown5__namespace.Root,
+      {
+        modal: !insideModal,
+        open,
+        onOpenChange: setMenuOpen,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn("inline-flex", className),
+              style,
+              onPointerDownCapture: () => pointerRef.current = true,
+              onKeyDownCapture: () => pointerRef.current = false,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                SGhostButton,
+                {
+                  ref: buttonRef,
+                  icon: "etc",
+                  size,
+                  intent,
+                  tooltipText: open ? "" : tooltipText,
+                  ariaLabel: label,
+                  ariaExpanded: open,
+                  disabled
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DropdownMenuContent,
+            {
+              items,
+              onItemClick,
+              onPointerDown: () => pointerRef.current = true,
+              onPointerDownOutside: () => pointerRef.current = true,
+              onKeyDown: () => pointerRef.current = false,
+              onCloseAutoFocus: (e) => {
+                e.preventDefault();
+                if (!pointerRef.current) buttonRef.current?.focus();
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var SMeatballButton2 = /* @__PURE__ */ withDisplayName(SMeatballButtonImpl, "SMeatballButton");
 function SSwitch({
   value = false,
   leftLabel,
@@ -9585,7 +9686,7 @@ var SPopup = /* @__PURE__ */ react.forwardRef(function SPopup2({
     }
   );
 });
-var DEFAULT_LABEL = { tip: "\uD65C\uC6A9 TIP", notion: "\uC0AC\uC6A9\uBC95 \uC548\uB0B4" };
+var DEFAULT_LABEL2 = { tip: "\uD65C\uC6A9 TIP", notion: "\uC0AC\uC6A9\uBC95 \uC548\uB0B4" };
 var ICON = { tip: "helpOutline", notion: "notion" };
 var VIEWPORT_GUTTER = 24;
 var CLOSE_INSET = 12;
@@ -9607,7 +9708,7 @@ function SGuide({
   const portalContainer = usePortalContainer();
   const isNotion = type === "notion";
   const isAutoWidth = popupWidth === "auto";
-  const defaultLabel = DEFAULT_LABEL[type];
+  const defaultLabel = DEFAULT_LABEL2[type];
   const iconName = ICON[type];
   const messages = flattenMessages(message);
   const active = open;
@@ -13619,6 +13720,7 @@ var CALENDAR_BOARD_EVENT_COLORS = [
   "yellow",
   "orange",
   "red",
+  "purple",
   "white"
 ];
 var BG = (name) => `var(--cmp-calendarBoard-eventButton-bg-${name})`;
@@ -13631,6 +13733,7 @@ var CALENDAR_BOARD_EVENT_PRESETS = {
   yellow: { bg: BG("yellow"), dot: "yellow" },
   orange: { bg: BG("orange"), dot: "orange" },
   red: { bg: BG("red"), dot: "red" },
+  purple: { bg: BG("purple"), dot: "purple" },
   white: { bg: BG("white"), dot: "grey" }
 };
 var CALENDAR_BOARD_MAX_VISIBLE_EVENTS = 4;
@@ -15561,7 +15664,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   react.useEffect(() => {
     setColumnWidths(visibleCols.map(colWidthFromDef));
   }, [colSignature]);
-  const selectedKeys = react.useMemo(() => new Set(selected.map((r2) => r2[rowKey])), [selected, rowKey]);
+  const selectedKeys = react.useMemo(() => new Set(selected.map((r3) => r3[rowKey])), [selected, rowKey]);
   const rangeAnchorRef = react.useRef(null);
   const shiftPressedRef = react.useRef(false);
   const isRowSelected = react.useCallback(
@@ -15581,7 +15684,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       const targets = rws.filter(canSelectRow);
       const total = targets.length;
       if (total === 0) return false;
-      const cnt = targets.filter((r2) => selectedKeys.has(r2[rowKey])).length;
+      const cnt = targets.filter((r3) => selectedKeys.has(r3[rowKey])).length;
       if (cnt === 0) return false;
       if (cnt === total) return true;
       return null;
@@ -15785,16 +15888,16 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       updateRowSelect: (row) => {
         if (!canSelectRow(row)) return;
         if (selectedKeys.has(row[rowKey]))
-          onSelectedChange?.(selected.filter((r2) => r2[rowKey] !== row[rowKey]));
+          onSelectedChange?.(selected.filter((r3) => r3[rowKey] !== row[rowKey]));
         else onSelectedChange?.([...selected, row]);
       },
       toggleSelectAll: (checked, rws) => {
         if (checked) {
-          const add = rws.filter((r2) => canSelectRow(r2) && !selectedKeys.has(r2[rowKey]));
+          const add = rws.filter((r3) => canSelectRow(r3) && !selectedKeys.has(r3[rowKey]));
           onSelectedChange?.([...selected, ...add]);
         } else {
-          const keys = new Set(rws.map((r2) => r2[rowKey]));
-          onSelectedChange?.(selected.filter((r2) => !keys.has(r2[rowKey])));
+          const keys = new Set(rws.map((r3) => r3[rowKey]));
+          onSelectedChange?.(selected.filter((r3) => !keys.has(r3[rowKey])));
         }
       }
     }),
@@ -15888,10 +15991,10 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   const toggleAll = () => {
     rangeAnchorRef.current = null;
     if (headerCheck === true) {
-      const targetKeys = new Set(selectAllRows.map((r2) => r2[rowKey]));
-      onSelectedChange?.(selected.filter((r2) => !targetKeys.has(r2[rowKey])));
+      const targetKeys = new Set(selectAllRows.map((r3) => r3[rowKey]));
+      onSelectedChange?.(selected.filter((r3) => !targetKeys.has(r3[rowKey])));
     } else {
-      const add = selectAllRows.filter((r2) => canSelectRow(r2) && !selectedKeys.has(r2[rowKey]));
+      const add = selectAllRows.filter((r3) => canSelectRow(r3) && !selectedKeys.has(r3[rowKey]));
       onSelectedChange?.([...selected, ...add]);
     }
   };
@@ -15904,17 +16007,17 @@ 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((r2) => !selectedKeys.has(r2[rowKey]));
+        const add = range.filter((r3) => !selectedKeys.has(r3[rowKey]));
         onSelectedChange?.([...selected, ...add]);
       } else {
-        const keys = new Set(range.map((r2) => r2[rowKey]));
-        onSelectedChange?.(selected.filter((r2) => !keys.has(r2[rowKey])));
+        const keys = new Set(range.map((r3) => r3[rowKey]));
+        onSelectedChange?.(selected.filter((r3) => !keys.has(r3[rowKey])));
       }
       return;
     }
     rangeAnchorRef.current = { index, key: row[rowKey] };
     if (selectedKeys.has(row[rowKey]))
-      onSelectedChange?.(selected.filter((r2) => r2[rowKey] !== row[rowKey]));
+      onSelectedChange?.(selected.filter((r3) => r3[rowKey] !== row[rowKey]));
     else onSelectedChange?.([...selected, row]);
   };
   const isViewSelected = (row) => row != null && (dragPreviewKeys ?? selectedKeys).has(row[rowKey]);
@@ -15922,14 +16025,14 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     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 dragPreviewOf = (base, anchor, to) => /* @__PURE__ */ new Set([...base, ...dragRangeRows(anchor, to).map((r3) => r3[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]));
+    const baseKeys = new Set(baseRows.map((r3) => r3[rowKey]));
     dragRef.current = { anchor: index, last: index, baseKeys, baseRows };
     setDragPreviewKeys(dragPreviewOf(baseKeys, index, index));
   };
@@ -15946,7 +16049,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     if (!d) return;
     dragRef.current = null;
     setDragPreviewKeys(null);
-    const add = dragRangeRows(d.anchor, d.last).filter((r2) => !d.baseKeys.has(r2[rowKey]));
+    const add = dragRangeRows(d.anchor, d.last).filter((r3) => !d.baseKeys.has(r3[rowKey]));
     onSelectedChange?.([...d.baseRows, ...add]);
   };
   react.useEffect(() => {
@@ -16503,7 +16606,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
         ),
         contextMenuOn && typeof document !== "undefined" && reactDom.createPortal(
           /* @__PURE__ */ jsxRuntime.jsxs(
-            RDropdown3__namespace.Root,
+            RDropdown5__namespace.Root,
             {
               modal: false,
               open: contextMenuOpen,
@@ -16511,7 +16614,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                 if (!open) setContextMenu((m) => m == null ? null : { ...m, open: false });
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
                     "aria-hidden": true,
@@ -16520,7 +16623,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                   }
                 ) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  RDropdown3__namespace.Content,
+                  RDropdown5__namespace.Content,
                   {
                     align: "start",
                     side: "bottom",
@@ -16534,7 +16637,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                       FLOATING_SLIDE_ANIM
                     ),
                     children: contextMenuItems?.map((item4) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      RDropdown3__namespace.Item,
+                      RDropdown5__namespace.Item,
                       {
                         disabled: item4.disabled,
                         onSelect: () => onContextMenuItemClick?.(item4.value, contextMenu?.rows ?? []),
@@ -18419,10 +18522,10 @@ function SDateRangePicker({
     lineHeight: 20,
     radius: 4
   };
-  const select = (r2) => {
+  const select = (r3) => {
     setPendingStart(null);
-    onValueChange?.(r2);
-    if (rules && rules.length > 0) setRuleError(runRules(r2, rules));
+    onValueChange?.(r3);
+    if (rules && rules.length > 0) setRuleError(runRules(r3, rules));
     if (!showTimePicker) setOpen(false);
   };
   const clear = () => {
@@ -18558,7 +18661,19 @@ function SDateRangePicker({
     }
   );
 }
+var CHIP_COLORS = [
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "darkblue",
+  "indigo",
+  "purple",
+  "grey"
+];
 var SChipImpl = /* @__PURE__ */ react.forwardRef(function SChip({
+  color,
   name,
   value = "",
   error: errorProp = false,
@@ -18633,9 +18748,10 @@ var SChipImpl = /* @__PURE__ */ react.forwardRef(function SChip({
       cancel();
     }
   };
-  const bg = disabled ? "var(--cmp-chip-bg-disabled)" : error ? "var(--cmp-chip-bg-error)" : editing ? "var(--cmp-chip-bg-focus)" : "var(--cmp-chip-bg-default)";
-  const content = disabled ? "var(--cmp-chip-content-disabled)" : error ? "var(--cmp-chip-content-error)" : editing ? "var(--cmp-chip-content-focus)" : "var(--cmp-chip-content-default)";
-  const borderColor = editing && !error ? "var(--cmp-chip-border-focus)" : "transparent";
+  const colored = color != null && !disabled && !error && !editing;
+  const bg = disabled ? "var(--cmp-chip-bg-disabled)" : error ? "var(--cmp-chip-bg-error)" : editing ? "var(--cmp-chip-bg-focus)" : colored ? `var(--cmp-chip-chip-${color}-bg)` : "var(--cmp-chip-bg-default)";
+  const content = disabled ? "var(--cmp-chip-content-disabled)" : error ? "var(--cmp-chip-content-error)" : editing ? "var(--cmp-chip-content-focus)" : colored ? `var(--cmp-chip-chip-${color}-content)` : "var(--cmp-chip-content-default)";
+  const borderColor = editing && !error ? "var(--cmp-chip-border-focus)" : colored ? `var(--cmp-chip-chip-${color}-border)` : "transparent";
   return (
     // 외곽 span 은 비상호작용 컨테이너다. 편집 진입 트리거는 값 텍스트의 실제 <button>
     // 이 담당하고, remove 는 형제 <button> 으로 둔다 — role="button" 안에 버튼을 넣던
@@ -18991,8 +19107,8 @@ function SKeyValueTable({
   const isLabelCol = [];
   const labelColWidth = [];
   let maxCols = 0;
-  fields.forEach((row, r2) => {
-    const occupied = grid[r2];
+  fields.forEach((row, r3) => {
+    const occupied = grid[r3];
     let col = 0;
     const skipOccupied = () => {
       let sawThSupply = false;
@@ -19009,7 +19125,7 @@ function SKeyValueTable({
       const tdColSpan = f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : 1;
       const thSuppliedAbove = skipOccupied();
       const showTh = !f.hideTh && !thSuppliedAbove;
-      showThAt[r2][i] = showTh;
+      showThAt[r3][i] = showTh;
       if (showTh) {
         isLabelCol[col] = true;
         if (thColSpan === 1 && f.thWidth != null && labelColWidth[col] == null)
@@ -19017,7 +19133,7 @@ function SKeyValueTable({
         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];
+            const target = grid[r3 + dr];
             if (target) target[col + dc] = kind;
           }
         }
@@ -19026,7 +19142,7 @@ function SKeyValueTable({
       skipOccupied();
       for (let dr = 1; dr < tdRowSpan; dr++) {
         for (let dc = 0; dc < tdColSpan; dc++) {
-          const target = grid[r2 + dr];
+          const target = grid[r3 + dr];
           if (target) target[col + dc] = "blocked";
         }
       }
@@ -19051,10 +19167,10 @@ function SKeyValueTable({
           { 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)]";
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: fields.map((row, r3) => {
+          const cellBorder = r3 === 0 ? "" : "border-t border-solid border-[color:var(--cmp-table-border-color)]";
           return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: row.map((f, c) => {
-            const showTh = showThAt[r2][c];
+            const showTh = showThAt[r3][c];
             const isReadOnlyCell = f.render == null && (f.type == null || f.type === "text");
             return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
               showTh && /* @__PURE__ */ jsxRuntime.jsx(
@@ -19090,7 +19206,7 @@ function SKeyValueTable({
                     )
                   ] })
                 },
-                `th-${r2}-${c}`
+                `th-${r3}-${c}`
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "td",
@@ -19107,10 +19223,10 @@ function SKeyValueTable({
                   style: { height: cellHeight, paddingTop: cellPadY, paddingBottom: cellPadY },
                   children: renderField(f)
                 },
-                `td-${r2}-${c}`
+                `td-${r3}-${c}`
               )
-            ] }, `${r2}-${c}`);
-          }) }, r2);
+            ] }, `${r3}-${c}`);
+          }) }, r3);
         }) })
       ]
     }
@@ -19416,6 +19532,7 @@ function ChartTooltip({
   anchor,
   bounds,
   gapX = DEFAULT_GAP_X,
+  footer,
   className
 }) {
   const { ref, size } = useElementSize();
@@ -19466,7 +19583,8 @@ function ChartTooltip({
             ]
           },
           `${item4.label}-${index}`
-        ))
+        )),
+        footer != null && footer !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { children: footer })
       ]
     }
   );
@@ -19521,23 +19639,23 @@ function barOpacity(hoveredCategory, categoryIndex) {
   return hoveredCategory === categoryIndex ? BAR_OPACITY_HOVER : BAR_OPACITY_DIMMED;
 }
 function barPath(x, y, width, height, direction, negative) {
-  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`;
+  const r3 = Math.max(0, Math.min(BAR_RADIUS, width / 2, height / 2));
+  if (r3 === 0) return `M${x} ${y}h${width}v${height}h${-width}Z`;
   if (direction === "vertical") {
     return negative ? (
       // 아래로 자란다 — 아래쪽 두 모서리가 둥글다
-      `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}h${width}v${height - r3}a${r3} ${r3} 0 0 1 ${-r3} ${r3}h${-(width - 2 * r3)}a${r3} ${r3} 0 0 1 ${-r3} ${-r3}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`
+      `M${x} ${y + height}v${-(height - r3)}a${r3} ${r3} 0 0 1 ${r3} ${-r3}h${width - 2 * r3}a${r3} ${r3} 0 0 1 ${r3} ${r3}v${height - r3}Z`
     );
   }
   return negative ? (
     // 왼쪽으로 자란다
-    `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 + width} ${y}h${-(width - r3)}a${r3} ${r3} 0 0 0 ${-r3} ${r3}v${height - 2 * r3}a${r3} ${r3} 0 0 0 ${r3} ${r3}h${width - r3}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`
+    `M${x} ${y}h${width - r3}a${r3} ${r3} 0 0 1 ${r3} ${r3}v${height - 2 * r3}a${r3} ${r3} 0 0 1 ${-r3} ${r3}h${-(width - r3)}Z`
   );
 }
 var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
@@ -19557,6 +19675,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
   formatValue = defaultFormat,
   height,
   onBarClick,
+  tooltipFooter,
   className,
   style
 }, ref) {
@@ -19985,7 +20104,16 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
                   items: tooltipItems,
                   anchor: tooltipAnchor,
                   bounds: size,
-                  gapX: tooltipGapX
+                  gapX: tooltipGapX,
+                  footer: tooltipFooter?.({
+                    categoryIndex: hoveredCategory,
+                    name: categories[hoveredCategory] ?? "",
+                    points: series.flatMap((s, seriesIndex) => {
+                      const value = s.data[hoveredCategory];
+                      if (value == null || !Number.isFinite(value)) return [];
+                      return [{ seriesIndex, categoryIndex: hoveredCategory, value }];
+                    })
+                  })
                 }
               )
             ]
@@ -20047,7 +20175,8 @@ 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 AREA_OPACITY_TOP = "30%";
+var AREA_OPACITY_BOTTOM = "var(--opacity-005)";
 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";
@@ -20143,6 +20272,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
   formatValue = defaultFormat2,
   height,
   onPointClick,
+  tooltipFooter,
   className,
   style
 }, ref) {
@@ -20150,6 +20280,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
   const { ref: plotRef, size } = useElementSize();
   const { ref: axisTextRef, size: axisText } = useElementSize();
   const { ref: axisSampleRef, size: axisSample } = useElementSize();
+  const gradientId = react.useId();
   const [hoveredCategory, setHoveredCategory] = react.useState(null);
   const colorAt = react.useCallback(
     (seriesIndex) => paletteColor(palette, seriesIndex, customColors),
@@ -20177,26 +20308,41 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
     ),
     [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 count = categories.length;
+  const step = count > 1 ? size.width / (count - 1) : 0;
+  const xAt = react.useCallback(
+    (index) => count > 1 ? index * step : size.width / 2,
+    [count, step, size.width]
+  );
+  const cellOf = react.useCallback(
+    (index) => count > 1 ? {
+      left: Math.max(0, xAt(index) - step / 2),
+      right: Math.min(size.width, xAt(index) + step / 2)
+    } : { left: 0, right: size.width },
+    [count, step, xAt, size.width]
+  );
+  const edgeOf = react.useCallback(
+    (index) => count > 1 && index === 0 ? "start" : count > 1 && index === count - 1 ? "end" : null,
+    [count]
+  );
+  const minPlotWidth = categories.length * BAND_MIN;
   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 }
+        (point, categoryIndex) => point == null ? null : { x: xAt(categoryIndex), y: yOf(point.value), baseY: yOf(point.base), own: point.own }
       )
     );
-  }, [rows, size.width, size.height, band, scale]);
+  }, [rows, size.width, size.height, xAt, 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;
+    if (!showTooltip || count === 0 || size.width <= 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);
+    const along = event.clientX - rect.left;
+    const category = count > 1 ? Math.round(along / step) : 0;
     setHoveredCategory(category >= 0 && category < categories.length ? category : null);
   };
   const tooltipItems = hoveredCategory == null ? [] : rows.flatMap((row, seriesIndex) => {
@@ -20222,10 +20368,9 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
   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]);
+    return { ...cellOf(hoveredCategory), top };
+  }, [hoveredCategory, anchorTop, cellOf, showValueLabel, valueLabel.top]);
   const categoryLabels = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -20236,8 +20381,11 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
         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 },
+            className: cn(
+              "absolute top-0 whitespace-nowrap",
+              edgeOf(index) === "start" ? "translate-x-0" : edgeOf(index) === "end" ? "-translate-x-full" : "-translate-x-1/2"
+            ),
+            style: { left: xAt(index) },
             children: label
           },
           `${label}-${index}`
@@ -20261,13 +20409,43 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
           {
             "aria-hidden": true,
             d,
-            style: { fill: colorAt(seriesIndex), fillOpacity: AREA_OPACITY }
+            style: { fill: `url(#${gradientId}-area-${seriesIndex})` }
           },
           `area-${seriesIndex}-${runIndex}`
         );
       })
     );
-  }, [area, plotted, smooth, colorAt]);
+  }, [area, plotted, smooth, gradientId]);
+  const areaGradients = react.useMemo(() => {
+    if (!area) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("defs", { children: plotted.map((_, seriesIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "linearGradient",
+      {
+        id: `${gradientId}-area-${seriesIndex}`,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "stop",
+            {
+              offset: "0",
+              style: { stopColor: colorAt(seriesIndex), stopOpacity: AREA_OPACITY_TOP }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "stop",
+            {
+              offset: "1",
+              style: { stopColor: colorAt(seriesIndex), stopOpacity: AREA_OPACITY_BOTTOM }
+            }
+          )
+        ]
+      },
+      `area-gradient-${seriesIndex}`
+    )) });
+  }, [area, plotted, colorAt, gradientId]);
   const lines = react.useMemo(
     () => plotted.flatMap(
       (row, seriesIndex) => runsOf(row).map((run, runIndex) => {
@@ -20347,7 +20525,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
             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",
+            textAnchor: edgeOf(categoryIndex) === "start" ? "start" : edgeOf(categoryIndex) === "end" ? "end" : "middle",
             dominantBaseline: "auto",
             children: formatValue(point.own)
           },
@@ -20355,7 +20533,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
         )
       )
     ) : [],
-    [showValueLabel, plotted, hoveredCategory, formatValue]
+    [showValueLabel, plotted, hoveredCategory, formatValue, edgeOf]
   );
   const inset = { paddingTop: axisSample.height / 2, paddingBottom: axisSample.height / 2 };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -20385,95 +20563,385 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
                 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(
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "min-w-0 overflow-x-auto",
+                style: { marginInline: -POINT_HOVER_EXTENT, paddingInline: POINT_HOVER_EXTENT },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     "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 }
-                          }
-                        )
-                      ]
+                      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,
+                                overflow: "visible",
+                                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: cellOf(hoveredCategory).left,
+                                      y: 0,
+                                      width: cellOf(hoveredCategory).right - cellOf(hoveredCategory).left,
+                                      height: size.height,
+                                      style: {
+                                        fill: "var(--cmp-chart-barContainer-hover-bg)",
+                                        fillOpacity: "var(--cmp-chart-barContainer-hover-opacity)"
+                                      }
+                                    }
+                                  ),
+                                  areaGradients,
+                                  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 },
+                                footer: tooltipFooter?.({
+                                  categoryIndex: hoveredCategory,
+                                  name: categories[hoveredCategory] ?? "",
+                                  points: rows.flatMap((row, seriesIndex) => {
+                                    const point = row[hoveredCategory];
+                                    if (point == null) return [];
+                                    return [{ seriesIndex, categoryIndex: hoveredCategory, value: point.own }];
+                                  })
+                                })
+                              }
+                            )
+                          ]
+                        }
+                      )
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: axisTextRef, children: categoryLabels })
-            ] })
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { ref: axisTextRef, children: categoryLabels })
+                ]
+              }
+            )
           ]
         }
       )
     }
   );
 });
+var DONUT_INNER_RATIO = 0.4;
+var LABEL_MIN_RATIO = 0.05;
+var PIE_LABEL_RADIUS_RATIO = 0.65;
+var HOVER_GROW = 4;
+var HOVER_CORNER = 2;
+var OPACITY_DEFAULT = "var(--cmp-chart-bar-opacity-default)";
+var OPACITY_DIMMED = "var(--cmp-chart-bar-opacity-dimmed)";
+var OPACITY_HOVER = 1;
+var defaultFormat3 = (value) => value.toLocaleString();
+function formatRatio(ratio) {
+  if (ratio > 0 && ratio < 0.01) return "<1%";
+  return `${Math.round(ratio * 100)}%`;
+}
+var r2 = (value) => Math.round(value * 100) / 100;
+function polar(center, radius, angle) {
+  return { x: center + radius * Math.sin(angle), y: center - radius * Math.cos(angle) };
+}
+var arc = (radius, large, sweep, p) => `A${r2(radius)} ${r2(radius)} 0 ${large} ${sweep} ${r2(p.x)} ${r2(p.y)}`;
+function fitCorner(corner, outer, inner, span) {
+  if (corner <= 0 || outer <= 0) return 0;
+  let fitted = Math.min(corner, (outer - inner) / 2);
+  if (span < Math.PI) {
+    const half = Math.sin(span / 2);
+    fitted = Math.min(fitted, outer * half / (1 + half));
+    if (inner > 0) fitted = Math.min(fitted, inner * half / (1 - half));
+  }
+  return fitted >= 0.5 ? fitted : 0;
+}
+function slicePath(center, outer, inner, start, end, corner = 0) {
+  if (end - start >= Math.PI * 2 - 1e-6) {
+    const ring = (radius) => `M${r2(center - radius)} ${r2(center)}A${r2(radius)} ${r2(radius)} 0 1 1 ${r2(center + radius)} ${r2(center)}A${r2(radius)} ${r2(radius)} 0 1 1 ${r2(center - radius)} ${r2(center)}Z`;
+    return inner > 0 ? ring(outer) + ring(inner) : ring(outer);
+  }
+  const span = end - start;
+  const round = fitCorner(corner, outer, inner, span);
+  const outerLine = Math.sqrt(Math.max(outer * outer - 2 * outer * round, 0));
+  const outerPhi = round > 0 ? Math.asin(round / (outer - round)) : 0;
+  const outerLarge = span - 2 * outerPhi > Math.PI ? 1 : 0;
+  const o0 = polar(center, outerLine, start);
+  let d = `M${r2(o0.x)} ${r2(o0.y)}`;
+  if (round > 0) d += arc(round, 0, 1, polar(center, outer, start + outerPhi));
+  d += arc(outer, outerLarge, 1, polar(center, outer, end - outerPhi));
+  if (round > 0) d += arc(round, 0, 1, polar(center, outerLine, end));
+  if (inner <= 0) return `${d}L${r2(center)} ${r2(center)}Z`;
+  const innerLine = Math.sqrt(inner * inner + 2 * inner * round);
+  const innerPhi = round > 0 ? Math.asin(round / (inner + round)) : 0;
+  const innerLarge = span - 2 * innerPhi > Math.PI ? 1 : 0;
+  const i0 = polar(center, innerLine, end);
+  d += `L${r2(i0.x)} ${r2(i0.y)}`;
+  if (round > 0) d += arc(round, 0, 1, polar(center, inner, end - innerPhi));
+  d += arc(inner, innerLarge, 0, polar(center, inner, start + innerPhi));
+  if (round > 0) d += arc(round, 0, 1, polar(center, innerLine, start));
+  return `${d}Z`;
+}
+var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
+  data,
+  palette = "multi",
+  colors,
+  showValueLabel = false,
+  showLegend = true,
+  legendPosition = "top",
+  showTooltip = true,
+  formatValue = defaultFormat3,
+  onSliceClick,
+  tooltipFooter,
+  className,
+  style,
+  innerRatio,
+  kind
+}, ref) {
+  const { ref: plotRef, size } = useElementSize();
+  const [hovered, setHovered] = react.useState(null);
+  const arcs = react.useMemo(() => {
+    const effective = palette === "custom" && !colors?.length ? "multi" : palette;
+    const valid = data.map((slice2, index) => ({ ...slice2, index })).filter((slice2) => Number.isFinite(slice2.value) && slice2.value > 0);
+    const sum = valid.reduce((acc, slice2) => acc + slice2.value, 0);
+    let angle = 0;
+    const list = valid.map((slice2) => {
+      const ratio = slice2.value / sum;
+      const start = angle;
+      angle += ratio * Math.PI * 2;
+      return {
+        index: slice2.index,
+        name: slice2.name,
+        value: slice2.value,
+        ratio,
+        start,
+        end: angle,
+        color: paletteColor(effective, slice2.index, colors)
+      };
+    });
+    return list;
+  }, [data, palette, colors]);
+  const diameter = size.width;
+  const center = diameter / 2;
+  const outer = Math.max(center - HOVER_GROW, 0);
+  const inner = outer * innerRatio;
+  const hoveredArc = arcs.find((arc2) => arc2.index === hovered) ?? null;
+  const legend = showLegend ? /* @__PURE__ */ jsxRuntime.jsx(
+    ChartLegend,
+    {
+      items: arcs.map((arc2) => ({ name: arc2.name, color: arc2.color })),
+      activeIndex: hoveredArc ? arcs.indexOf(hoveredArc) : null
+    }
+  ) : null;
+  const tooltipAnchor = react.useMemo(() => {
+    if (!hoveredArc || diameter <= 0) return null;
+    const mid = (hoveredArc.start + hoveredArc.end) / 2;
+    const point = polar(center, (outer + inner) / 2, mid);
+    return { left: point.x, right: point.x, top: point.y };
+  }, [hoveredArc, diameter, center, outer, inner]);
+  const labelRadius = inner > 0 ? (outer + inner) / 2 : outer * PIE_LABEL_RADIUS_RATIO;
+  const slice = (target) => {
+    const picked = hovered === target.index;
+    return slicePath(
+      center,
+      picked ? outer + HOVER_GROW : outer,
+      picked ? Math.max(inner - HOVER_GROW, 0) : inner,
+      target.start,
+      target.end,
+      picked ? HOVER_CORNER : 0
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChartFrame,
+    {
+      ref,
+      legend,
+      legendPosition,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: plotRef, className: "relative aspect-square w-full", children: [
+        diameter > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: diameter,
+            height: diameter,
+            role: "img",
+            "aria-label": `${arcs.length}\uAC1C \uD56D\uBAA9 ${kind}`,
+            onMouseLeave: () => setHovered(null),
+            children: [
+              arcs.length === 0 ? (
+                // 그릴 값이 없어도 자리는 남긴다 — 차트가 사라지면 화면이 무너진 것처럼 보인다.
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    "aria-hidden": true,
+                    d: slicePath(center, outer, inner, 0, Math.PI * 2),
+                    fillRule: "evenodd",
+                    style: { fill: "var(--cmp-chart-grid-line-color)" }
+                  }
+                )
+              ) : arcs.map((arc2) => {
+                const opacity = hovered == null ? OPACITY_DEFAULT : hovered === arc2.index ? OPACITY_HOVER : OPACITY_DIMMED;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: slice(arc2),
+                    fillRule: "evenodd",
+                    className: "transition-opacity duration-200 ease-out motion-reduce:transition-none",
+                    style: {
+                      fill: arc2.color,
+                      opacity,
+                      cursor: onSliceClick ? "pointer" : void 0
+                    },
+                    onMouseEnter: () => setHovered(arc2.index),
+                    onClick: onSliceClick ? () => onSliceClick({
+                      index: arc2.index,
+                      name: arc2.name,
+                      value: arc2.value,
+                      ratio: arc2.ratio
+                    }) : void 0,
+                    children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${arc2.name} ${formatValue(arc2.value)} (${formatRatio(arc2.ratio)})` })
+                  },
+                  `slice-${arc2.index}`
+                );
+              }),
+              showValueLabel && arcs.map((arc2) => {
+                if (arc2.ratio < LABEL_MIN_RATIO) return null;
+                const point = polar(center, labelRadius, (arc2.start + arc2.end) / 2);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    "aria-hidden": true,
+                    x: point.x,
+                    y: point.y,
+                    textAnchor: "middle",
+                    dominantBaseline: "central",
+                    className: "pointer-events-none typo-body-sm-bold transition-opacity duration-200 ease-out motion-reduce:transition-none",
+                    style: {
+                      fill: "var(--sys-color-fg-inverse)",
+                      opacity: hovered != null && hovered !== arc2.index ? OPACITY_DIMMED : void 0
+                    },
+                    children: formatRatio(arc2.ratio)
+                  },
+                  `label-${arc2.index}`
+                );
+              })
+            ]
+          }
+        ),
+        showTooltip && hoveredArc && tooltipAnchor && /* @__PURE__ */ jsxRuntime.jsx(
+          ChartTooltip,
+          {
+            title: hoveredArc.name,
+            items: [
+              {
+                color: hoveredArc.color,
+                label: formatValue(hoveredArc.value),
+                value: formatRatio(hoveredArc.ratio)
+              }
+            ],
+            anchor: tooltipAnchor,
+            bounds: size,
+            footer: tooltipFooter?.({
+              index: hoveredArc.index,
+              name: hoveredArc.name,
+              value: hoveredArc.value,
+              ratio: hoveredArc.ratio
+            })
+          }
+        )
+      ] })
+    }
+  );
+});
+var SPieChart = /* @__PURE__ */ react.forwardRef(function SPieChart2({
+  palette = "multi",
+  showValueLabel = false,
+  showLegend = true,
+  legendPosition = "top",
+  showTooltip = true,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadialChart,
+    {
+      ref,
+      ...props,
+      palette,
+      showValueLabel,
+      showLegend,
+      legendPosition,
+      showTooltip,
+      innerRatio: 0,
+      kind: "\uD30C\uC774 \uADF8\uB798\uD504"
+    }
+  );
+});
+var SDonutChart = /* @__PURE__ */ react.forwardRef(function SDonutChart2({
+  palette = "multi",
+  showValueLabel = false,
+  showLegend = true,
+  legendPosition = "top",
+  showTooltip = true,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadialChart,
+    {
+      ref,
+      ...props,
+      palette,
+      showValueLabel,
+      showLegend,
+      legendPosition,
+      showTooltip,
+      innerRatio: DONUT_INNER_RATIO,
+      kind: "\uB3C4\uB11B \uADF8\uB798\uD504"
+    }
+  );
+});
 var BUTTON_STYLE = {
   default: { color: "secondary" },
   danger: { color: "danger", outline: true },
@@ -21756,7 +22224,7 @@ var PaletteItem = ({
   className,
   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 });
+}) => asMenu ? /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__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,
@@ -21842,14 +22310,14 @@ var TableSizePicker = ({
             onPick(size.rows, 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;
+        children: Array.from({ length: TABLE_PICKER_ROWS }, (_, r3) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", className: "flex", style: { gap: TABLE_PICKER_GAP }, children: Array.from({ length: TABLE_PICKER_COLS }, (_2, c) => {
+          const on = r3 < size.rows && c < size.cols;
           return /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               role: "gridcell",
-              "aria-label": `${r2 + 1}\uD589 ${c + 1}\uC5F4`,
+              "aria-label": `${r3 + 1}\uD589 ${c + 1}\uC5F4`,
               "aria-selected": on,
               tabIndex: -1,
               className: "box-border cursor-pointer rounded-[3px] border border-solid p-0 outline-none",
@@ -21859,13 +22327,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: r2 + 1, cols: c + 1 }),
-              onFocus: () => setSize({ rows: r2 + 1, cols: c + 1 }),
-              onClick: () => onPick(r2 + 1, c + 1)
+              onMouseEnter: () => setSize({ rows: r3 + 1, cols: c + 1 }),
+              onFocus: () => setSize({ rows: r3 + 1, cols: c + 1 }),
+              onClick: () => onPick(r3 + 1, c + 1)
             },
             c
           );
-        }) }, r2))
+        }) }, r3))
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -21888,7 +22356,7 @@ var TableMenuItem = ({
   disabled,
   onSelect
 }) => /* @__PURE__ */ jsxRuntime.jsx(
-  RDropdown3__namespace.Item,
+  RDropdown5__namespace.Item,
   {
     className: cn(menuItemClass, menuItemDisabledClass),
     disabled,
@@ -22055,8 +22523,8 @@ function EditorToolbarBar({
   const node = (item4) => {
     switch (item4) {
       case "heading":
-        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown3__namespace.Root, { modal: !insideModal, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown5__namespace.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsxs(
             ToolbarButton,
             {
               label: "\uC81C\uBAA9 \uB2E8\uACC4",
@@ -22069,9 +22537,9 @@ function EditorToolbarBar({
               ]
             }
           ) }),
-          /* @__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(RDropdown5__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown5__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              RDropdown3__namespace.Item,
+              RDropdown5__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.setParagraph().run(),
@@ -22079,7 +22547,7 @@ function EditorToolbarBar({
               }
             ),
             SEDITOR_HEADING_LEVELS.map((level) => /* @__PURE__ */ jsxRuntime.jsx(
-              RDropdown3__namespace.Item,
+              RDropdown5__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.setHeading({ level }).run(),
@@ -22090,13 +22558,13 @@ function EditorToolbarBar({
           ] }) })
         ] }, item4);
       case "fontSize":
-        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: [
+        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown5__namespace.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__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(RDropdown3__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            RDropdown3__namespace.Content,
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            RDropdown5__namespace.Content,
             {
               sideOffset: 4,
               align: "start",
@@ -22104,7 +22572,7 @@ function EditorToolbarBar({
               style: { maxHeight: FONT_SIZE_MENU_MAX_HEIGHT },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  RDropdown3__namespace.Item,
+                  RDropdown5__namespace.Item,
                   {
                     className: cn(menuItemClass, activeFontSize === null && menuItemSelectedClass),
                     title: `${FONT_SIZE_DEFAULT_LABEL} (\uBCF8\uBB38 ${SEDITOR_DEFAULT_FONT_SIZE}px)`,
@@ -22113,7 +22581,7 @@ function EditorToolbarBar({
                   }
                 ),
                 SEDITOR_FONT_SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsx(
-                  RDropdown3__namespace.Item,
+                  RDropdown5__namespace.Item,
                   {
                     ref: activeFontSize === size ? (el) => {
                       el?.scrollIntoView({ block: "nearest" });
@@ -22205,9 +22673,9 @@ function EditorToolbarBar({
             },
             item4
           );
-        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(
+        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown5__namespace.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__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(RDropdown5__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: /* @__PURE__ */ jsxRuntime.jsx(
             ColorPalette,
             {
               asMenu: true,
@@ -22313,14 +22781,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(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: [
+        return /* @__PURE__ */ jsxRuntime.jsxs(RDropdown5__namespace.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__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(RDropdown3__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown3__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown5__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown3__namespace.Item,
+              RDropdown5__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleBulletList().run(),
@@ -22331,7 +22799,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown3__namespace.Item,
+              RDropdown5__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleOrderedList().run(),
@@ -22342,7 +22810,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown3__namespace.Item,
+              RDropdown5__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleTaskList().run(),
@@ -22446,17 +22914,17 @@ function EditorToolbarBar({
         );
       case "table":
         return /* @__PURE__ */ jsxRuntime.jsxs(
-          RDropdown3__namespace.Root,
+          RDropdown5__namespace.Root,
           {
             open: tableOpen,
             onOpenChange: setTableOpen,
             modal: !insideModal,
             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(RDropdown5__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(RDropdown3__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown3__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RDropdown5__namespace.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
                 !state2.inTable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     TableSizePicker,
@@ -22468,7 +22936,7 @@ function EditorToolbarBar({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Separator, { className: menuSeparatorClass })
+                  /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Separator, { className: menuSeparatorClass })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   TableMenuItem,
@@ -22502,7 +22970,7 @@ function EditorToolbarBar({
                     onSelect: () => chain()?.addColumnAfter().run()
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Separator, { className: menuSeparatorClass }),
+                /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Separator, { className: menuSeparatorClass }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   TableMenuItem,
                   {
@@ -22535,7 +23003,7 @@ function EditorToolbarBar({
                     onSelect: () => chain()?.toggleHeaderColumn().run()
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Separator, { className: menuSeparatorClass }),
+                /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Separator, { className: menuSeparatorClass }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   TableMenuItem,
                   {
@@ -26509,6 +26977,7 @@ exports.CHAT_FILE_CONFIG = CHAT_FILE_CONFIG;
 exports.CHAT_MESSAGE_DIRECTIONS = CHAT_MESSAGE_DIRECTIONS;
 exports.CHAT_MESSAGE_READ_STATUSES = CHAT_MESSAGE_READ_STATUSES;
 exports.CHAT_MESSAGE_VARIANTS = CHAT_MESSAGE_VARIANTS;
+exports.CHIP_COLORS = CHIP_COLORS;
 exports.COLOR_KEYS = COLOR_KEYS;
 exports.FIELD_WIDTH_GRADES = FIELD_WIDTH_GRADES;
 exports.GNB_COLORS = GNB_COLORS;
@@ -26568,6 +27037,7 @@ exports.SDatePickerMonthListbox = SDatePickerMonthListbox;
 exports.SDatePickerYearListbox = SDatePickerYearListbox;
 exports.SDateRangePicker = SDateRangePicker;
 exports.SDivider = SDivider;
+exports.SDonutChart = SDonutChart;
 exports.SDraggableGroup = SDraggableGroup;
 exports.SDraggableItem = SDraggableItem2;
 exports.SDraggableList = SDraggableList;
@@ -26605,12 +27075,14 @@ exports.SLoadingModal = SLoadingModal;
 exports.SLoadingViewport = SLoadingViewport;
 exports.SLoginCard = SLoginCard2;
 exports.SLogo = SLogo;
+exports.SMeatballButton = SMeatballButton2;
 exports.SModal = SModal;
 exports.SModalOutlet = SModalOutlet;
 exports.SNumberInput = SNumberInput;
 exports.SPage = SPage;
 exports.SPageHeader = SPageHeader;
 exports.SPagination = SPagination;
+exports.SPieChart = SPieChart;
 exports.SPopover = SPopover;
 exports.SPopup = SPopup;
 exports.SPortal = SPortal;