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

package/dist/index.js

@@ -8,7 +8,7 @@ import { createPortal } from 'react-dom';
 import * as RCheckbox from '@radix-ui/react-checkbox';
 import { createRoot } from 'react-dom/client';
 import * as RTooltip from '@radix-ui/react-tooltip';
-import * as RDropdown3 from '@radix-ui/react-dropdown-menu';
+import * as RDropdown5 from '@radix-ui/react-dropdown-menu';
 import * as RSwitch from '@radix-ui/react-switch';
 import * as RDialog from '@radix-ui/react-dialog';
 import * as Ariakit from '@ariakit/react';
@@ -8007,8 +8007,8 @@ function renderItems(message, depth = 1) {
   });
   return out;
 }
-var SCallout = /* @__PURE__ */ forwardRef(function SCallout2({ type = "default", message = [], children, className, style }, ref) {
-  const isDanger = type === "danger";
+var SCallout = /* @__PURE__ */ 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,
@@ -8027,7 +8027,7 @@ var SCallout = /* @__PURE__ */ forwardRef(function SCallout2({ type = "default",
       ),
       style: { ...vars, ...style },
       children: [
-        isDanger && /* @__PURE__ */ jsxs(
+        hasDangerTitle && /* @__PURE__ */ 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]",
@@ -8354,6 +8354,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__ */ jsx(RDropdown5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+    RDropdown5.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__ */ jsxs(
+        RDropdown5.Item,
+        {
+          disabled: it.disabled,
+          onSelect: () => onItemClick?.(it.value),
+          className: itemClass,
+          children: [
+            it.icon && /* @__PURE__ */ jsx(SIcon, { name: it.icon, size: 12 }),
+            /* @__PURE__ */ 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: {
@@ -8390,13 +8442,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__ */ forwardRef(
   function SDropdownButton({
     color = "primary",
@@ -8412,7 +8457,6 @@ var SDropdownButtonImpl = /* @__PURE__ */ forwardRef(
     className,
     style
   }, ref) {
-    const portalContainer = usePortalContainer();
     const insideModal = useInsideModal();
     const [open, setOpen] = useState(false);
     const splitWrapRef = useRef(null);
@@ -8466,45 +8510,20 @@ var SDropdownButtonImpl = /* @__PURE__ */ 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__ */ jsx(RDropdown3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-      RDropdown3.Content,
+    const menu = /* @__PURE__ */ 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__ */ jsxs(
-          RDropdown3.Item,
-          {
-            disabled: it.disabled,
-            onSelect: () => onItemClick?.(it.value),
-            className: itemClass,
-            children: [
-              it.icon && /* @__PURE__ */ jsx(SIcon, { name: it.icon, size: 12 }),
-              /* @__PURE__ */ 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__ */ jsxs(
-      RDropdown3.Root,
+      RDropdown5.Root,
       {
         modal: !insideModal,
         open,
@@ -8536,7 +8555,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ forwardRef(
                     children: label
                   }
                 ),
-                /* @__PURE__ */ jsx(RDropdown3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(RDropdown5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
                   "button",
                   {
                     ref: splitToggleRef,
@@ -8555,7 +8574,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ forwardRef(
                 ) })
               ]
             }
-          ) : /* @__PURE__ */ jsx(RDropdown3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          ) : /* @__PURE__ */ jsx(RDropdown5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
@@ -8583,6 +8602,87 @@ var SDropdownButtonImpl = /* @__PURE__ */ forwardRef(
   }
 );
 var SDropdownButton2 = /* @__PURE__ */ withDisplayName(SDropdownButtonImpl, "SDropdownButton");
+var DEFAULT_LABEL = "\uAE30\uB2A5 \uB354 \uBCF4\uAE30";
+var SMeatballButtonImpl = /* @__PURE__ */ 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] = useState(false);
+    const buttonRef = useRef(null);
+    const pointerRef = useRef(false);
+    const setMenuOpen = (o) => {
+      setOpen(o);
+      onOpenChange?.(o);
+    };
+    useImperativeHandle(
+      ref,
+      () => ({
+        open: () => setOpen(true),
+        close: () => setOpen(false)
+      }),
+      []
+    );
+    const label = ariaLabel?.trim() || tooltipText.trim() || DEFAULT_LABEL;
+    return /* @__PURE__ */ jsxs(
+      RDropdown5.Root,
+      {
+        modal: !insideModal,
+        open,
+        onOpenChange: setMenuOpen,
+        children: [
+          /* @__PURE__ */ jsx(RDropdown5.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("inline-flex", className),
+              style,
+              onPointerDownCapture: () => pointerRef.current = true,
+              onKeyDownCapture: () => pointerRef.current = false,
+              children: /* @__PURE__ */ jsx(
+                SGhostButton,
+                {
+                  ref: buttonRef,
+                  icon: "etc",
+                  size,
+                  intent,
+                  tooltipText: open ? "" : tooltipText,
+                  ariaLabel: label,
+                  ariaExpanded: open,
+                  disabled
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ 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,
@@ -9558,7 +9658,7 @@ var SPopup = /* @__PURE__ */ 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;
@@ -9580,7 +9680,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;
@@ -16478,7 +16578,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
         ),
         contextMenuOn && typeof document !== "undefined" && createPortal(
           /* @__PURE__ */ jsxs(
-            RDropdown3.Root,
+            RDropdown5.Root,
             {
               modal: false,
               open: contextMenuOpen,
@@ -16486,7 +16586,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
                 if (!open) setContextMenu((m) => m == null ? null : { ...m, open: false });
               },
               children: [
-                /* @__PURE__ */ jsx(RDropdown3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(RDropdown5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
                   "span",
                   {
                     "aria-hidden": true,
@@ -16495,7 +16595,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
                   }
                 ) }),
                 /* @__PURE__ */ jsx(
-                  RDropdown3.Content,
+                  RDropdown5.Content,
                   {
                     align: "start",
                     side: "bottom",
@@ -16509,7 +16609,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
                       FLOATING_SLIDE_ANIM
                     ),
                     children: contextMenuItems?.map((item4) => /* @__PURE__ */ jsxs(
-                      RDropdown3.Item,
+                      RDropdown5.Item,
                       {
                         disabled: item4.disabled,
                         onSelect: () => onContextMenuItemClick?.(item4.value, contextMenu?.rows ?? []),
@@ -19404,6 +19504,7 @@ function ChartTooltip({
   anchor,
   bounds,
   gapX = DEFAULT_GAP_X,
+  footer,
   className
 }) {
   const { ref, size } = useElementSize();
@@ -19454,7 +19555,8 @@ function ChartTooltip({
             ]
           },
           `${item4.label}-${index}`
-        ))
+        )),
+        footer != null && footer !== false && /* @__PURE__ */ jsx("div", { children: footer })
       ]
     }
   );
@@ -19545,6 +19647,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
   formatValue = defaultFormat,
   height,
   onBarClick,
+  tooltipFooter,
   className,
   style
 }, ref) {
@@ -19973,7 +20076,16 @@ var SBarChart = /* @__PURE__ */ 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 }];
+                    })
+                  })
                 }
               )
             ]
@@ -20035,7 +20147,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";
@@ -20131,6 +20244,7 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
   formatValue = defaultFormat2,
   height,
   onPointClick,
+  tooltipFooter,
   className,
   style
 }, ref) {
@@ -20138,6 +20252,7 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
   const { ref: plotRef, size } = useElementSize();
   const { ref: axisTextRef, size: axisText } = useElementSize();
   const { ref: axisSampleRef, size: axisSample } = useElementSize();
+  const gradientId = useId();
   const [hoveredCategory, setHoveredCategory] = useState(null);
   const colorAt = useCallback(
     (seriesIndex) => paletteColor(palette, seriesIndex, customColors),
@@ -20266,13 +20381,43 @@ var SLineChart = /* @__PURE__ */ 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 = useMemo(() => {
+    if (!area) return null;
+    return /* @__PURE__ */ jsx("defs", { children: plotted.map((_, seriesIndex) => /* @__PURE__ */ jsxs(
+      "linearGradient",
+      {
+        id: `${gradientId}-area-${seriesIndex}`,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: [
+          /* @__PURE__ */ jsx(
+            "stop",
+            {
+              offset: "0",
+              style: { stopColor: colorAt(seriesIndex), stopOpacity: AREA_OPACITY_TOP }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "stop",
+            {
+              offset: "1",
+              style: { stopColor: colorAt(seriesIndex), stopOpacity: AREA_OPACITY_BOTTOM }
+            }
+          )
+        ]
+      },
+      `area-gradient-${seriesIndex}`
+    )) });
+  }, [area, plotted, colorAt, gradientId]);
   const lines = useMemo(
     () => plotted.flatMap(
       (row, seriesIndex) => runsOf(row).map((run, runIndex) => {
@@ -20454,6 +20599,7 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
                                       }
                                     }
                                   ),
+                                  areaGradients,
                                   areas,
                                   lines,
                                   pointHalos,
@@ -20469,7 +20615,16 @@ var SLineChart = /* @__PURE__ */ 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 }];
+                                  })
+                                })
                               }
                             )
                           ]
@@ -20487,9 +20642,11 @@ var SLineChart = /* @__PURE__ */ 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;
@@ -20502,19 +20659,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__ */ forwardRef(function RadialChart2({
   data,
@@ -20526,44 +20706,44 @@ var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
   showTooltip = true,
   formatValue = defaultFormat3,
   onSliceClick,
+  tooltipFooter,
   className,
   style,
   innerRatio,
-  renderCenter,
   kind
 }, ref) {
   const { ref: plotRef, size } = useElementSize();
   const [hovered, setHovered] = useState(null);
-  const { arcs, total } = useMemo(() => {
+  const arcs = 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__ */ 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;
@@ -20574,6 +20754,17 @@ var RadialChart = /* @__PURE__ */ 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__ */ jsx(
     ChartFrame,
     {
@@ -20603,34 +20794,34 @@ var RadialChart = /* @__PURE__ */ 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__ */ 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__ */ jsx("title", { children: `${arc.name} ${formatValue(arc.value)} (${formatRatio(arc.ratio)})` })
+                    children: /* @__PURE__ */ 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__ */ jsx(
                   "text",
                   {
@@ -20642,25 +20833,16 @@ var RadialChart = /* @__PURE__ */ 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__ */ 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__ */ jsx(
           ChartTooltip,
           {
@@ -20673,19 +20855,19 @@ var RadialChart = /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-    label != null && /* @__PURE__ */ jsx("span", { className: cn("typo-body-sm-medium text-(--cmp-chart-axis-color)"), children: label }),
-    /* @__PURE__ */ jsx("span", { className: "typo-body-lg-bold break-all text-(--cmp-chart-bar-dataLabel-color-default)", children: value })
-  ] });
-}
 var SPieChart = /* @__PURE__ */ forwardRef(function SPieChart2({
   palette = "multi",
   showValueLabel = false,
@@ -20709,17 +20891,12 @@ var SPieChart = /* @__PURE__ */ forwardRef(function SPieChart2({
     }
   );
 });
-var defaultFormat4 = (value) => value.toLocaleString();
 var SDonutChart = /* @__PURE__ */ forwardRef(function SDonutChart2({
-  centerLabel,
-  centerValue,
-  hideCenter = false,
   palette = "multi",
   showValueLabel = false,
   showLegend = true,
   legendPosition = "top",
   showTooltip = true,
-  formatValue = defaultFormat4,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsx(
@@ -20732,10 +20909,8 @@ var SDonutChart = /* @__PURE__ */ forwardRef(function SDonutChart2({
       showLegend,
       legendPosition,
       showTooltip,
-      formatValue,
       innerRatio: DONUT_INNER_RATIO,
-      kind: "\uB3C4\uB11B \uADF8\uB798\uD504",
-      renderCenter: hideCenter ? void 0 : (total) => /* @__PURE__ */ jsx(RadialCenter, { label: centerLabel, value: centerValue ?? formatValue(total) })
+      kind: "\uB3C4\uB11B \uADF8\uB798\uD504"
     }
   );
 });
@@ -22021,7 +22196,7 @@ var PaletteItem = ({
   className,
   onSelect,
   children
-}) => asMenu ? /* @__PURE__ */ jsx(RDropdown3.Item, { title: label, "aria-label": label, className, onSelect, children }) : /* @__PURE__ */ jsx("button", { type: "button", title: label, "aria-label": label, className, onClick: onSelect, children });
+}) => asMenu ? /* @__PURE__ */ jsx(RDropdown5.Item, { title: label, "aria-label": label, className, onSelect, children }) : /* @__PURE__ */ jsx("button", { type: "button", title: label, "aria-label": label, className, onClick: onSelect, children });
 var ColorPalette = ({
   colors,
   columns,
@@ -22153,7 +22328,7 @@ var TableMenuItem = ({
   disabled,
   onSelect
 }) => /* @__PURE__ */ jsx(
-  RDropdown3.Item,
+  RDropdown5.Item,
   {
     className: cn(menuItemClass, menuItemDisabledClass),
     disabled,
@@ -22320,8 +22495,8 @@ function EditorToolbarBar({
   const node = (item4) => {
     switch (item4) {
       case "heading":
-        return /* @__PURE__ */ jsxs(RDropdown3.Root, { modal: !insideModal, children: [
-          /* @__PURE__ */ jsx(RDropdown3.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsxs(RDropdown5.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsx(RDropdown5.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxs(
             ToolbarButton,
             {
               label: "\uC81C\uBAA9 \uB2E8\uACC4",
@@ -22334,9 +22509,9 @@ function EditorToolbarBar({
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx(RDropdown3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RDropdown3.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
+          /* @__PURE__ */ jsx(RDropdown5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RDropdown5.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
             /* @__PURE__ */ jsx(
-              RDropdown3.Item,
+              RDropdown5.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.setParagraph().run(),
@@ -22344,7 +22519,7 @@ function EditorToolbarBar({
               }
             ),
             SEDITOR_HEADING_LEVELS.map((level) => /* @__PURE__ */ jsx(
-              RDropdown3.Item,
+              RDropdown5.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.setHeading({ level }).run(),
@@ -22355,13 +22530,13 @@ function EditorToolbarBar({
           ] }) })
         ] }, item4);
       case "fontSize":
-        return /* @__PURE__ */ jsxs(RDropdown3.Root, { modal: !insideModal, children: [
-          /* @__PURE__ */ jsx(RDropdown3.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxs(ToolbarButton, { label: "\uAE00\uC790 \uD06C\uAE30", disabled: off, className: "px-[6px]", children: [
+        return /* @__PURE__ */ jsxs(RDropdown5.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsx(RDropdown5.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxs(ToolbarButton, { label: "\uAE00\uC790 \uD06C\uAE30", disabled: off, className: "px-[6px]", children: [
             /* @__PURE__ */ jsx("span", { className: "text-[12px] leading-[20px]", children: activeFontSize ?? FONT_SIZE_DEFAULT_LABEL }),
             /* @__PURE__ */ jsx(SIcon, { name: "caretDown", size: 12 })
           ] }) }),
-          /* @__PURE__ */ jsx(RDropdown3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
-            RDropdown3.Content,
+          /* @__PURE__ */ jsx(RDropdown5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+            RDropdown5.Content,
             {
               sideOffset: 4,
               align: "start",
@@ -22369,7 +22544,7 @@ function EditorToolbarBar({
               style: { maxHeight: FONT_SIZE_MENU_MAX_HEIGHT },
               children: [
                 /* @__PURE__ */ jsx(
-                  RDropdown3.Item,
+                  RDropdown5.Item,
                   {
                     className: cn(menuItemClass, activeFontSize === null && menuItemSelectedClass),
                     title: `${FONT_SIZE_DEFAULT_LABEL} (\uBCF8\uBB38 ${SEDITOR_DEFAULT_FONT_SIZE}px)`,
@@ -22378,7 +22553,7 @@ function EditorToolbarBar({
                   }
                 ),
                 SEDITOR_FONT_SIZES.map((size) => /* @__PURE__ */ jsx(
-                  RDropdown3.Item,
+                  RDropdown5.Item,
                   {
                     ref: activeFontSize === size ? (el) => {
                       el?.scrollIntoView({ block: "nearest" });
@@ -22470,9 +22645,9 @@ function EditorToolbarBar({
             },
             item4
           );
-        return /* @__PURE__ */ jsxs(RDropdown3.Root, { modal: !insideModal, children: [
-          /* @__PURE__ */ jsx(RDropdown3.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsx(ToolbarButton, { label: "\uAE00\uC790\uC0C9", disabled: off, children: /* @__PURE__ */ jsx(ColorIndicator, { color: off ? "currentColor" : activeColor, children: /* @__PURE__ */ jsx(IconTextColor, { size: ICON_SIZE }) }) }) }),
-          /* @__PURE__ */ jsx(RDropdown3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(RDropdown3.Content, { sideOffset: 4, align: "start", className: menuClass, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsxs(RDropdown5.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsx(RDropdown5.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsx(ToolbarButton, { label: "\uAE00\uC790\uC0C9", disabled: off, children: /* @__PURE__ */ jsx(ColorIndicator, { color: off ? "currentColor" : activeColor, children: /* @__PURE__ */ jsx(IconTextColor, { size: ICON_SIZE }) }) }) }),
+          /* @__PURE__ */ jsx(RDropdown5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(RDropdown5.Content, { sideOffset: 4, align: "start", className: menuClass, children: /* @__PURE__ */ jsx(
             ColorPalette,
             {
               asMenu: true,
@@ -22578,14 +22753,14 @@ function EditorToolbarBar({
       case "list": {
         const ListIcon = state2.orderedList ? IconOrderedList : state2.taskList ? IconTaskList : IconBulletList;
         const listActive = state2.bulletList || state2.orderedList || state2.taskList;
-        return /* @__PURE__ */ jsxs(RDropdown3.Root, { modal: !insideModal, children: [
-          /* @__PURE__ */ jsx(RDropdown3.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxs(ToolbarButton, { label: "\uBAA9\uB85D", active: listActive, disabled: off, className: "px-[4px]", children: [
+        return /* @__PURE__ */ jsxs(RDropdown5.Root, { modal: !insideModal, children: [
+          /* @__PURE__ */ jsx(RDropdown5.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxs(ToolbarButton, { label: "\uBAA9\uB85D", active: listActive, disabled: off, className: "px-[4px]", children: [
             /* @__PURE__ */ jsx(ListIcon, { size: ICON_SIZE }),
             /* @__PURE__ */ jsx(SIcon, { name: "caretDown", size: CARET_SIZE })
           ] }) }),
-          /* @__PURE__ */ jsx(RDropdown3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RDropdown3.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
+          /* @__PURE__ */ jsx(RDropdown5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RDropdown5.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
             /* @__PURE__ */ jsxs(
-              RDropdown3.Item,
+              RDropdown5.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleBulletList().run(),
@@ -22596,7 +22771,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxs(
-              RDropdown3.Item,
+              RDropdown5.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleOrderedList().run(),
@@ -22607,7 +22782,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxs(
-              RDropdown3.Item,
+              RDropdown5.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleTaskList().run(),
@@ -22711,17 +22886,17 @@ function EditorToolbarBar({
         );
       case "table":
         return /* @__PURE__ */ jsxs(
-          RDropdown3.Root,
+          RDropdown5.Root,
           {
             open: tableOpen,
             onOpenChange: setTableOpen,
             modal: !insideModal,
             children: [
-              /* @__PURE__ */ jsx(RDropdown3.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxs(ToolbarButton, { label: "\uD45C", active: state2.inTable, disabled: off, className: "px-[6px]", children: [
+              /* @__PURE__ */ jsx(RDropdown5.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxs(ToolbarButton, { label: "\uD45C", active: state2.inTable, disabled: off, className: "px-[6px]", children: [
                 /* @__PURE__ */ jsx(IconTable, { size: ICON_SIZE }),
                 /* @__PURE__ */ jsx(SIcon, { name: "caretDown", size: CARET_SIZE })
               ] }) }),
-              /* @__PURE__ */ jsx(RDropdown3.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RDropdown3.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
+              /* @__PURE__ */ jsx(RDropdown5.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RDropdown5.Content, { sideOffset: 4, align: "start", className: menuClass, children: [
                 !state2.inTable && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     TableSizePicker,
@@ -22733,7 +22908,7 @@ function EditorToolbarBar({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx(RDropdown3.Separator, { className: menuSeparatorClass })
+                  /* @__PURE__ */ jsx(RDropdown5.Separator, { className: menuSeparatorClass })
                 ] }),
                 /* @__PURE__ */ jsx(
                   TableMenuItem,
@@ -22767,7 +22942,7 @@ function EditorToolbarBar({
                     onSelect: () => chain()?.addColumnAfter().run()
                   }
                 ),
-                /* @__PURE__ */ jsx(RDropdown3.Separator, { className: menuSeparatorClass }),
+                /* @__PURE__ */ jsx(RDropdown5.Separator, { className: menuSeparatorClass }),
                 /* @__PURE__ */ jsx(
                   TableMenuItem,
                   {
@@ -22800,7 +22975,7 @@ function EditorToolbarBar({
                     onSelect: () => chain()?.toggleHeaderColumn().run()
                   }
                 ),
-                /* @__PURE__ */ jsx(RDropdown3.Separator, { className: menuSeparatorClass }),
+                /* @__PURE__ */ jsx(RDropdown5.Separator, { className: menuSeparatorClass }),
                 /* @__PURE__ */ jsx(
                   TableMenuItem,
                   {
@@ -26753,6 +26928,6 @@ function STimeRangePicker({
   );
 }
 
-export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SLoginCard2 as SLoginCard, SLogo, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map