sellmate-design-system-react 9.0.0-beta.61 → 9.0.0-beta.63

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);
@@ -8035,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,
@@ -8055,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]",
@@ -8382,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: {
@@ -8418,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",
@@ -8440,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);
@@ -8494,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,
@@ -8564,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,
@@ -8583,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",
@@ -8611,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,
@@ -9586,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;
@@ -9608,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;
@@ -12661,6 +12761,10 @@ var BACKGROUND_CLASS = {
   neutral: "bg-[var(--sys-color-bg-neutralLight)]",
   screen: "bg-[var(--sys-color-bg-screen)]"
 };
+var PADDING_CLASS2 = {
+  default: "p-[var(--cmp-pageBody-padding-default)]",
+  none: "p-0"
+};
 var NATIVE_SCROLLBAR_BACKGROUND_CLASS = {
   frame: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_CLASS}`,
   neutral: `${SCROLLBAR_TRACK_BORDER_CLASS} ${SCROLLBAR_TRACK_BG_WHITE_CLASS}`,
@@ -12676,6 +12780,7 @@ var setForwardedRef = (ref, node) => {
 var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
   background = "frame",
   scrollEndSpacing = false,
+  padding = "default",
   overlayScrollbar = false,
   contentHeight = "auto",
   contentWidth = "full",
@@ -12714,7 +12819,8 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
     {
       ref: setMainRef,
       className: cn(
-        "box-border min-h-0 min-w-0 flex-1 overflow-auto p-[var(--cmp-pageBody-padding-default)]",
+        "box-border min-h-0 min-w-0 flex-1 overflow-auto",
+        PADDING_CLASS2[padding],
         overlayScrollbar && "h-full",
         !fill && scrollEndSpacing && "pb-[var(--cmp-pageBody-padding-scrollEnd)]",
         overlayScrollbar ? SCROLLBAR_HIDDEN_CLASS : `${SCROLLBAR_CLASS} ${NATIVE_SCROLLBAR_BACKGROUND_CLASS[background]}`,
@@ -12754,6 +12860,7 @@ var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({
 // src/components/SPage/page.config.ts
 var PAGE_BACKGROUNDS = ["frame", "neutral", "screen"];
 var PAGE_CONTENT_HEIGHTS = ["auto", "fill"];
+var PAGE_PADDINGS = ["default", "none"];
 var PAGE_CONTENT_WIDTHS = ["full", "fixed", "fixedCenter"];
 var PAGE_HEADER_VARIANTS = ["plain", "bar"];
 var SPageHeader = /* @__PURE__ */ withDisplayName(
@@ -16506,7 +16613,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,
@@ -16514,7 +16621,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,
@@ -16523,7 +16630,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                   }
                 ) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  RDropdown3__namespace.Content,
+                  RDropdown5__namespace.Content,
                   {
                     align: "start",
                     side: "bottom",
@@ -16537,7 +16644,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 ?? []),
@@ -19432,6 +19539,7 @@ function ChartTooltip({
   anchor,
   bounds,
   gapX = DEFAULT_GAP_X,
+  footer,
   className
 }) {
   const { ref, size } = useElementSize();
@@ -19482,7 +19590,8 @@ function ChartTooltip({
             ]
           },
           `${item4.label}-${index}`
-        ))
+        )),
+        footer != null && footer !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { children: footer })
       ]
     }
   );
@@ -19573,6 +19682,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
   formatValue = defaultFormat,
   height,
   onBarClick,
+  tooltipFooter,
   className,
   style
 }, ref) {
@@ -20001,7 +20111,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 }];
+                    })
+                  })
                 }
               )
             ]
@@ -20063,7 +20182,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";
@@ -20159,6 +20279,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
   formatValue = defaultFormat2,
   height,
   onPointClick,
+  tooltipFooter,
   className,
   style
 }, ref) {
@@ -20166,6 +20287,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),
@@ -20294,13 +20416,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) => {
@@ -20482,6 +20634,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
                                       }
                                     }
                                   ),
+                                  areaGradients,
                                   areas,
                                   lines,
                                   pointHalos,
@@ -20497,7 +20650,16 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
                                 items: tooltipItems,
                                 anchor: tooltipAnchor,
                                 bounds: size,
-                                gapX: { after: -4, before: -4 }
+                                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 }];
+                                  })
+                                })
                               }
                             )
                           ]
@@ -20515,9 +20677,11 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
     }
   );
 });
-var DONUT_INNER_RATIO = 0.6;
+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;
@@ -20530,19 +20694,42 @@ 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) };
 }
-function slicePath(center, outer, inner, start, end) {
+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 large = end - start > Math.PI ? 1 : 0;
-  const o0 = polar(center, outer, start);
-  const o1 = polar(center, outer, end);
-  const outerArc = `M${r2(o0.x)} ${r2(o0.y)}A${r2(outer)} ${r2(outer)} 0 ${large} 1 ${r2(o1.x)} ${r2(o1.y)}`;
-  if (inner <= 0) return `${outerArc}L${r2(center)} ${r2(center)}Z`;
-  const i1 = polar(center, inner, end);
-  const i0 = polar(center, inner, start);
-  return `${outerArc}L${r2(i1.x)} ${r2(i1.y)}A${r2(inner)} ${r2(inner)} 0 ${large} 0 ${r2(i0.x)} ${r2(i0.y)}Z`;
+  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,
@@ -20554,44 +20741,44 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
   showTooltip = true,
   formatValue = defaultFormat3,
   onSliceClick,
+  tooltipFooter,
   className,
   style,
   innerRatio,
-  renderCenter,
   kind
 }, ref) {
   const { ref: plotRef, size } = useElementSize();
   const [hovered, setHovered] = react.useState(null);
-  const { arcs, total } = react.useMemo(() => {
+  const arcs = react.useMemo(() => {
     const effective = palette === "custom" && !colors?.length ? "multi" : palette;
-    const valid = data.map((slice, index) => ({ ...slice, index })).filter((slice) => Number.isFinite(slice.value) && slice.value > 0);
-    const sum = valid.reduce((acc, slice) => acc + slice.value, 0);
+    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((slice) => {
-      const ratio = slice.value / sum;
+    const list = valid.map((slice2) => {
+      const ratio = slice2.value / sum;
       const start = angle;
       angle += ratio * Math.PI * 2;
       return {
-        index: slice.index,
-        name: slice.name,
-        value: slice.value,
+        index: slice2.index,
+        name: slice2.name,
+        value: slice2.value,
         ratio,
         start,
         end: angle,
-        color: paletteColor(effective, slice.index, colors)
+        color: paletteColor(effective, slice2.index, colors)
       };
     });
-    return { arcs: list, total: sum };
+    return list;
   }, [data, palette, colors]);
   const diameter = size.width;
   const center = diameter / 2;
-  const outer = center;
+  const outer = Math.max(center - HOVER_GROW, 0);
   const inner = outer * innerRatio;
-  const hoveredArc = arcs.find((arc) => arc.index === hovered) ?? null;
+  const hoveredArc = arcs.find((arc2) => arc2.index === hovered) ?? null;
   const legend = showLegend ? /* @__PURE__ */ jsxRuntime.jsx(
     ChartLegend,
     {
-      items: arcs.map((arc) => ({ name: arc.name, color: arc.color })),
+      items: arcs.map((arc2) => ({ name: arc2.name, color: arc2.color })),
       activeIndex: hoveredArc ? arcs.indexOf(hoveredArc) : null
     }
   ) : null;
@@ -20602,6 +20789,17 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
     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,
     {
@@ -20631,34 +20829,34 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
                     style: { fill: "var(--cmp-chart-grid-line-color)" }
                   }
                 )
-              ) : arcs.map((arc) => {
-                const opacity = hovered == null ? OPACITY_DEFAULT : hovered === arc.index ? OPACITY_HOVER : OPACITY_DIMMED;
+              ) : arcs.map((arc2) => {
+                const opacity = hovered == null ? OPACITY_DEFAULT : hovered === arc2.index ? OPACITY_HOVER : OPACITY_DIMMED;
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   "path",
                   {
-                    d: slicePath(center, outer, inner, arc.start, arc.end),
+                    d: slice(arc2),
                     fillRule: "evenodd",
                     className: "transition-opacity duration-200 ease-out motion-reduce:transition-none",
                     style: {
-                      fill: arc.color,
+                      fill: arc2.color,
                       opacity,
                       cursor: onSliceClick ? "pointer" : void 0
                     },
-                    onMouseEnter: () => setHovered(arc.index),
+                    onMouseEnter: () => setHovered(arc2.index),
                     onClick: onSliceClick ? () => onSliceClick({
-                      index: arc.index,
-                      name: arc.name,
-                      value: arc.value,
-                      ratio: arc.ratio
+                      index: arc2.index,
+                      name: arc2.name,
+                      value: arc2.value,
+                      ratio: arc2.ratio
                     }) : void 0,
-                    children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${arc.name} ${formatValue(arc.value)} (${formatRatio(arc.ratio)})` })
+                    children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${arc2.name} ${formatValue(arc2.value)} (${formatRatio(arc2.ratio)})` })
                   },
-                  `slice-${arc.index}`
+                  `slice-${arc2.index}`
                 );
               }),
-              showValueLabel && arcs.map((arc) => {
-                if (arc.ratio < LABEL_MIN_RATIO) return null;
-                const point = polar(center, labelRadius, (arc.start + arc.end) / 2);
+              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",
                   {
@@ -20670,25 +20868,16 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
                     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 !== arc.index ? OPACITY_DIMMED : void 0
+                      opacity: hovered != null && hovered !== arc2.index ? OPACITY_DIMMED : void 0
                     },
-                    children: formatRatio(arc.ratio)
+                    children: formatRatio(arc2.ratio)
                   },
-                  `label-${arc.index}`
+                  `label-${arc2.index}`
                 );
               })
             ]
           }
         ),
-        renderCenter && diameter > 0 && // 가운데 글자는 조각을 가리지 않도록 마우스를 통과시킨다.
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "pointer-events-none absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center text-center",
-            style: { maxWidth: inner * Math.SQRT2 },
-            children: renderCenter(total)
-          }
-        ),
         showTooltip && hoveredArc && tooltipAnchor && /* @__PURE__ */ jsxRuntime.jsx(
           ChartTooltip,
           {
@@ -20701,19 +20890,19 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
               }
             ],
             anchor: tooltipAnchor,
-            bounds: size
+            bounds: size,
+            footer: tooltipFooter?.({
+              index: hoveredArc.index,
+              name: hoveredArc.name,
+              value: hoveredArc.value,
+              ratio: hoveredArc.ratio
+            })
           }
         )
       ] })
     }
   );
 });
-function RadialCenter({ label, value }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("typo-body-sm-medium text-(--cmp-chart-axis-color)"), children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-lg-bold break-all text-(--cmp-chart-bar-dataLabel-color-default)", children: value })
-  ] });
-}
 var SPieChart = /* @__PURE__ */ react.forwardRef(function SPieChart2({
   palette = "multi",
   showValueLabel = false,
@@ -20737,17 +20926,12 @@ var SPieChart = /* @__PURE__ */ react.forwardRef(function SPieChart2({
     }
   );
 });
-var defaultFormat4 = (value) => value.toLocaleString();
 var SDonutChart = /* @__PURE__ */ react.forwardRef(function SDonutChart2({
-  centerLabel,
-  centerValue,
-  hideCenter = false,
   palette = "multi",
   showValueLabel = false,
   showLegend = true,
   legendPosition = "top",
   showTooltip = true,
-  formatValue = defaultFormat4,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -20760,10 +20944,8 @@ var SDonutChart = /* @__PURE__ */ react.forwardRef(function SDonutChart2({
       showLegend,
       legendPosition,
       showTooltip,
-      formatValue,
       innerRatio: DONUT_INNER_RATIO,
-      kind: "\uB3C4\uB11B \uADF8\uB798\uD504",
-      renderCenter: hideCenter ? void 0 : (total) => /* @__PURE__ */ jsxRuntime.jsx(RadialCenter, { label: centerLabel, value: centerValue ?? formatValue(total) })
+      kind: "\uB3C4\uB11B \uADF8\uB798\uD504"
     }
   );
 });
@@ -22049,7 +22231,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,
@@ -22181,7 +22363,7 @@ var TableMenuItem = ({
   disabled,
   onSelect
 }) => /* @__PURE__ */ jsxRuntime.jsx(
-  RDropdown3__namespace.Item,
+  RDropdown5__namespace.Item,
   {
     className: cn(menuItemClass, menuItemDisabledClass),
     disabled,
@@ -22348,8 +22530,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",
@@ -22362,9 +22544,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(),
@@ -22372,7 +22554,7 @@ function EditorToolbarBar({
               }
             ),
             SEDITOR_HEADING_LEVELS.map((level) => /* @__PURE__ */ jsxRuntime.jsx(
-              RDropdown3__namespace.Item,
+              RDropdown5__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.setHeading({ level }).run(),
@@ -22383,13 +22565,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",
@@ -22397,7 +22579,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)`,
@@ -22406,7 +22588,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" });
@@ -22498,9 +22680,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,
@@ -22606,14 +22788,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(),
@@ -22624,7 +22806,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown3__namespace.Item,
+              RDropdown5__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleOrderedList().run(),
@@ -22635,7 +22817,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              RDropdown3__namespace.Item,
+              RDropdown5__namespace.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleTaskList().run(),
@@ -22739,17 +22921,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,
@@ -22761,7 +22943,7 @@ function EditorToolbarBar({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(RDropdown3__namespace.Separator, { className: menuSeparatorClass })
+                  /* @__PURE__ */ jsxRuntime.jsx(RDropdown5__namespace.Separator, { className: menuSeparatorClass })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   TableMenuItem,
@@ -22795,7 +22977,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,
                   {
@@ -22828,7 +23010,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,
                   {
@@ -26834,6 +27016,7 @@ exports.PAGE_BACKGROUNDS = PAGE_BACKGROUNDS;
 exports.PAGE_CONTENT_HEIGHTS = PAGE_CONTENT_HEIGHTS;
 exports.PAGE_CONTENT_WIDTHS = PAGE_CONTENT_WIDTHS;
 exports.PAGE_HEADER_VARIANTS = PAGE_HEADER_VARIANTS;
+exports.PAGE_PADDINGS = PAGE_PADDINGS;
 exports.RangeCalendar = RangeCalendar;
 exports.SAccountListBox = SAccountListBox;
 exports.SActionModal = SActionModal;
@@ -26900,6 +27083,7 @@ exports.SLoadingModal = SLoadingModal;
 exports.SLoadingViewport = SLoadingViewport;
 exports.SLoginCard = SLoginCard2;
 exports.SLogo = SLogo;
+exports.SMeatballButton = SMeatballButton2;
 exports.SModal = SModal;
 exports.SModalOutlet = SModalOutlet;
 exports.SNumberInput = SNumberInput;