sellmate-design-system-react 9.0.0-beta.60 → 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';
@@ -3921,6 +3921,7 @@ var BADGE_COLORS = [
   "blue",
   "darkblue",
   "indigo",
+  "purple",
   "grey"
 ];
 var SBadge = /* @__PURE__ */ forwardRef(function SBadge2({ color = "blue", className, ...rest }, ref) {
@@ -4247,7 +4248,7 @@ var TAG_SIZE_CONFIG = {
     radius: 6,
     iconSize: 16,
     fontSize: 12,
-    fontWeight: 700,
+    fontWeight: 600,
     lineHeight: 20
   },
   md: {
@@ -8006,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,
@@ -8026,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]",
@@ -8353,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: {
@@ -8389,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",
@@ -8411,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);
@@ -8465,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,
@@ -8535,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,
@@ -8554,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",
@@ -8582,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,
@@ -9557,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;
@@ -9579,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;
@@ -13591,6 +13692,7 @@ var CALENDAR_BOARD_EVENT_COLORS = [
   "yellow",
   "orange",
   "red",
+  "purple",
   "white"
 ];
 var BG = (name) => `var(--cmp-calendarBoard-eventButton-bg-${name})`;
@@ -13603,6 +13705,7 @@ var CALENDAR_BOARD_EVENT_PRESETS = {
   yellow: { bg: BG("yellow"), dot: "yellow" },
   orange: { bg: BG("orange"), dot: "orange" },
   red: { bg: BG("red"), dot: "red" },
+  purple: { bg: BG("purple"), dot: "purple" },
   white: { bg: BG("white"), dot: "grey" }
 };
 var CALENDAR_BOARD_MAX_VISIBLE_EVENTS = 4;
@@ -15533,7 +15636,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
   useEffect(() => {
     setColumnWidths(visibleCols.map(colWidthFromDef));
   }, [colSignature]);
-  const selectedKeys = useMemo(() => new Set(selected.map((r2) => r2[rowKey])), [selected, rowKey]);
+  const selectedKeys = useMemo(() => new Set(selected.map((r3) => r3[rowKey])), [selected, rowKey]);
   const rangeAnchorRef = useRef(null);
   const shiftPressedRef = useRef(false);
   const isRowSelected = useCallback(
@@ -15553,7 +15656,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
       const targets = rws.filter(canSelectRow);
       const total = targets.length;
       if (total === 0) return false;
-      const cnt = targets.filter((r2) => selectedKeys.has(r2[rowKey])).length;
+      const cnt = targets.filter((r3) => selectedKeys.has(r3[rowKey])).length;
       if (cnt === 0) return false;
       if (cnt === total) return true;
       return null;
@@ -15757,16 +15860,16 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
       updateRowSelect: (row) => {
         if (!canSelectRow(row)) return;
         if (selectedKeys.has(row[rowKey]))
-          onSelectedChange?.(selected.filter((r2) => r2[rowKey] !== row[rowKey]));
+          onSelectedChange?.(selected.filter((r3) => r3[rowKey] !== row[rowKey]));
         else onSelectedChange?.([...selected, row]);
       },
       toggleSelectAll: (checked, rws) => {
         if (checked) {
-          const add = rws.filter((r2) => canSelectRow(r2) && !selectedKeys.has(r2[rowKey]));
+          const add = rws.filter((r3) => canSelectRow(r3) && !selectedKeys.has(r3[rowKey]));
           onSelectedChange?.([...selected, ...add]);
         } else {
-          const keys = new Set(rws.map((r2) => r2[rowKey]));
-          onSelectedChange?.(selected.filter((r2) => !keys.has(r2[rowKey])));
+          const keys = new Set(rws.map((r3) => r3[rowKey]));
+          onSelectedChange?.(selected.filter((r3) => !keys.has(r3[rowKey])));
         }
       }
     }),
@@ -15860,10 +15963,10 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
   const toggleAll = () => {
     rangeAnchorRef.current = null;
     if (headerCheck === true) {
-      const targetKeys = new Set(selectAllRows.map((r2) => r2[rowKey]));
-      onSelectedChange?.(selected.filter((r2) => !targetKeys.has(r2[rowKey])));
+      const targetKeys = new Set(selectAllRows.map((r3) => r3[rowKey]));
+      onSelectedChange?.(selected.filter((r3) => !targetKeys.has(r3[rowKey])));
     } else {
-      const add = selectAllRows.filter((r2) => canSelectRow(r2) && !selectedKeys.has(r2[rowKey]));
+      const add = selectAllRows.filter((r3) => canSelectRow(r3) && !selectedKeys.has(r3[rowKey]));
       onSelectedChange?.([...selected, ...add]);
     }
   };
@@ -15876,17 +15979,17 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
       const shouldSelect = selectedKeys.has(anchor.key);
       const range = rows.slice(from, to + 1).filter(canSelectRow);
       if (shouldSelect) {
-        const add = range.filter((r2) => !selectedKeys.has(r2[rowKey]));
+        const add = range.filter((r3) => !selectedKeys.has(r3[rowKey]));
         onSelectedChange?.([...selected, ...add]);
       } else {
-        const keys = new Set(range.map((r2) => r2[rowKey]));
-        onSelectedChange?.(selected.filter((r2) => !keys.has(r2[rowKey])));
+        const keys = new Set(range.map((r3) => r3[rowKey]));
+        onSelectedChange?.(selected.filter((r3) => !keys.has(r3[rowKey])));
       }
       return;
     }
     rangeAnchorRef.current = { index, key: row[rowKey] };
     if (selectedKeys.has(row[rowKey]))
-      onSelectedChange?.(selected.filter((r2) => r2[rowKey] !== row[rowKey]));
+      onSelectedChange?.(selected.filter((r3) => r3[rowKey] !== row[rowKey]));
     else onSelectedChange?.([...selected, row]);
   };
   const isViewSelected = (row) => row != null && (dragPreviewKeys ?? selectedKeys).has(row[rowKey]);
@@ -15894,14 +15997,14 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
     const [a, b] = from <= to ? [from, to] : [to, from];
     return rows.slice(a, b + 1).filter(canSelectRow);
   };
-  const dragPreviewOf = (base, anchor, to) => /* @__PURE__ */ new Set([...base, ...dragRangeRows(anchor, to).map((r2) => r2[rowKey])]);
+  const dragPreviewOf = (base, anchor, to) => /* @__PURE__ */ new Set([...base, ...dragRangeRows(anchor, to).map((r3) => r3[rowKey])]);
   const startDragSelect = (index, event) => {
     if (event.button !== 0) return;
     const target = event.target;
     if (target?.closest?.(ROW_INTERACTIVE_SELECTOR)) return;
     event.preventDefault();
     const baseRows = event.ctrlKey || event.metaKey ? selected : [];
-    const baseKeys = new Set(baseRows.map((r2) => r2[rowKey]));
+    const baseKeys = new Set(baseRows.map((r3) => r3[rowKey]));
     dragRef.current = { anchor: index, last: index, baseKeys, baseRows };
     setDragPreviewKeys(dragPreviewOf(baseKeys, index, index));
   };
@@ -15918,7 +16021,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
     if (!d) return;
     dragRef.current = null;
     setDragPreviewKeys(null);
-    const add = dragRangeRows(d.anchor, d.last).filter((r2) => !d.baseKeys.has(r2[rowKey]));
+    const add = dragRangeRows(d.anchor, d.last).filter((r3) => !d.baseKeys.has(r3[rowKey]));
     onSelectedChange?.([...d.baseRows, ...add]);
   };
   useEffect(() => {
@@ -16475,7 +16578,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
         ),
         contextMenuOn && typeof document !== "undefined" && createPortal(
           /* @__PURE__ */ jsxs(
-            RDropdown3.Root,
+            RDropdown5.Root,
             {
               modal: false,
               open: contextMenuOpen,
@@ -16483,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,
@@ -16492,7 +16595,7 @@ var STable = /* @__PURE__ */ forwardRef(function STable2({
                   }
                 ) }),
                 /* @__PURE__ */ jsx(
-                  RDropdown3.Content,
+                  RDropdown5.Content,
                   {
                     align: "start",
                     side: "bottom",
@@ -16506,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 ?? []),
@@ -18391,10 +18494,10 @@ function SDateRangePicker({
     lineHeight: 20,
     radius: 4
   };
-  const select = (r2) => {
+  const select = (r3) => {
     setPendingStart(null);
-    onValueChange?.(r2);
-    if (rules && rules.length > 0) setRuleError(runRules(r2, rules));
+    onValueChange?.(r3);
+    if (rules && rules.length > 0) setRuleError(runRules(r3, rules));
     if (!showTimePicker) setOpen(false);
   };
   const clear = () => {
@@ -18530,7 +18633,19 @@ function SDateRangePicker({
     }
   );
 }
+var CHIP_COLORS = [
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "darkblue",
+  "indigo",
+  "purple",
+  "grey"
+];
 var SChipImpl = /* @__PURE__ */ forwardRef(function SChip({
+  color,
   name,
   value = "",
   error: errorProp = false,
@@ -18605,9 +18720,10 @@ var SChipImpl = /* @__PURE__ */ forwardRef(function SChip({
       cancel();
     }
   };
-  const bg = disabled ? "var(--cmp-chip-bg-disabled)" : error ? "var(--cmp-chip-bg-error)" : editing ? "var(--cmp-chip-bg-focus)" : "var(--cmp-chip-bg-default)";
-  const content = disabled ? "var(--cmp-chip-content-disabled)" : error ? "var(--cmp-chip-content-error)" : editing ? "var(--cmp-chip-content-focus)" : "var(--cmp-chip-content-default)";
-  const borderColor = editing && !error ? "var(--cmp-chip-border-focus)" : "transparent";
+  const colored = color != null && !disabled && !error && !editing;
+  const bg = disabled ? "var(--cmp-chip-bg-disabled)" : error ? "var(--cmp-chip-bg-error)" : editing ? "var(--cmp-chip-bg-focus)" : colored ? `var(--cmp-chip-chip-${color}-bg)` : "var(--cmp-chip-bg-default)";
+  const content = disabled ? "var(--cmp-chip-content-disabled)" : error ? "var(--cmp-chip-content-error)" : editing ? "var(--cmp-chip-content-focus)" : colored ? `var(--cmp-chip-chip-${color}-content)` : "var(--cmp-chip-content-default)";
+  const borderColor = editing && !error ? "var(--cmp-chip-border-focus)" : colored ? `var(--cmp-chip-chip-${color}-border)` : "transparent";
   return (
     // 외곽 span 은 비상호작용 컨테이너다. 편집 진입 트리거는 값 텍스트의 실제 <button>
     // 이 담당하고, remove 는 형제 <button> 으로 둔다 — role="button" 안에 버튼을 넣던
@@ -18963,8 +19079,8 @@ function SKeyValueTable({
   const isLabelCol = [];
   const labelColWidth = [];
   let maxCols = 0;
-  fields.forEach((row, r2) => {
-    const occupied = grid[r2];
+  fields.forEach((row, r3) => {
+    const occupied = grid[r3];
     let col = 0;
     const skipOccupied = () => {
       let sawThSupply = false;
@@ -18981,7 +19097,7 @@ function SKeyValueTable({
       const tdColSpan = f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : 1;
       const thSuppliedAbove = skipOccupied();
       const showTh = !f.hideTh && !thSuppliedAbove;
-      showThAt[r2][i] = showTh;
+      showThAt[r3][i] = showTh;
       if (showTh) {
         isLabelCol[col] = true;
         if (thColSpan === 1 && f.thWidth != null && labelColWidth[col] == null)
@@ -18989,7 +19105,7 @@ function SKeyValueTable({
         for (let dr = 1; dr < thRowSpan; dr++) {
           const kind = dr >= tdRowSpan ? "th-supply" : "blocked";
           for (let dc = 0; dc < thColSpan; dc++) {
-            const target = grid[r2 + dr];
+            const target = grid[r3 + dr];
             if (target) target[col + dc] = kind;
           }
         }
@@ -18998,7 +19114,7 @@ function SKeyValueTable({
       skipOccupied();
       for (let dr = 1; dr < tdRowSpan; dr++) {
         for (let dc = 0; dc < tdColSpan; dc++) {
-          const target = grid[r2 + dr];
+          const target = grid[r3 + dr];
           if (target) target[col + dc] = "blocked";
         }
       }
@@ -19023,10 +19139,10 @@ function SKeyValueTable({
           { length: maxCols },
           (_, i) => isLabelCol[i] ? /* @__PURE__ */ jsx("col", { style: { width: cssLen2(labelColWidth[i]) ?? "120px" } }, `col-${i}`) : /* @__PURE__ */ jsx("col", {}, `col-${i}`)
         ) }),
-        /* @__PURE__ */ jsx("tbody", { children: fields.map((row, r2) => {
-          const cellBorder = r2 === 0 ? "" : "border-t border-solid border-[color:var(--cmp-table-border-color)]";
+        /* @__PURE__ */ jsx("tbody", { children: fields.map((row, r3) => {
+          const cellBorder = r3 === 0 ? "" : "border-t border-solid border-[color:var(--cmp-table-border-color)]";
           return /* @__PURE__ */ jsx("tr", { children: row.map((f, c) => {
-            const showTh = showThAt[r2][c];
+            const showTh = showThAt[r3][c];
             const isReadOnlyCell = f.render == null && (f.type == null || f.type === "text");
             return /* @__PURE__ */ jsxs(Fragment$1, { children: [
               showTh && /* @__PURE__ */ jsx(
@@ -19062,7 +19178,7 @@ function SKeyValueTable({
                     )
                   ] })
                 },
-                `th-${r2}-${c}`
+                `th-${r3}-${c}`
               ),
               /* @__PURE__ */ jsx(
                 "td",
@@ -19079,10 +19195,10 @@ function SKeyValueTable({
                   style: { height: cellHeight, paddingTop: cellPadY, paddingBottom: cellPadY },
                   children: renderField(f)
                 },
-                `td-${r2}-${c}`
+                `td-${r3}-${c}`
               )
-            ] }, `${r2}-${c}`);
-          }) }, r2);
+            ] }, `${r3}-${c}`);
+          }) }, r3);
         }) })
       ]
     }
@@ -19388,6 +19504,7 @@ function ChartTooltip({
   anchor,
   bounds,
   gapX = DEFAULT_GAP_X,
+  footer,
   className
 }) {
   const { ref, size } = useElementSize();
@@ -19438,7 +19555,8 @@ function ChartTooltip({
             ]
           },
           `${item4.label}-${index}`
-        ))
+        )),
+        footer != null && footer !== false && /* @__PURE__ */ jsx("div", { children: footer })
       ]
     }
   );
@@ -19493,23 +19611,23 @@ function barOpacity(hoveredCategory, categoryIndex) {
   return hoveredCategory === categoryIndex ? BAR_OPACITY_HOVER : BAR_OPACITY_DIMMED;
 }
 function barPath(x, y, width, height, direction, negative) {
-  const r2 = Math.max(0, Math.min(BAR_RADIUS, width / 2, height / 2));
-  if (r2 === 0) return `M${x} ${y}h${width}v${height}h${-width}Z`;
+  const r3 = Math.max(0, Math.min(BAR_RADIUS, width / 2, height / 2));
+  if (r3 === 0) return `M${x} ${y}h${width}v${height}h${-width}Z`;
   if (direction === "vertical") {
     return negative ? (
       // 아래로 자란다 — 아래쪽 두 모서리가 둥글다
-      `M${x} ${y}h${width}v${height - r2}a${r2} ${r2} 0 0 1 ${-r2} ${r2}h${-(width - 2 * r2)}a${r2} ${r2} 0 0 1 ${-r2} ${-r2}Z`
+      `M${x} ${y}h${width}v${height - r3}a${r3} ${r3} 0 0 1 ${-r3} ${r3}h${-(width - 2 * r3)}a${r3} ${r3} 0 0 1 ${-r3} ${-r3}Z`
     ) : (
       // 위로 자란다 — 위쪽 두 모서리가 둥글다
-      `M${x} ${y + height}v${-(height - r2)}a${r2} ${r2} 0 0 1 ${r2} ${-r2}h${width - 2 * r2}a${r2} ${r2} 0 0 1 ${r2} ${r2}v${height - r2}Z`
+      `M${x} ${y + height}v${-(height - r3)}a${r3} ${r3} 0 0 1 ${r3} ${-r3}h${width - 2 * r3}a${r3} ${r3} 0 0 1 ${r3} ${r3}v${height - r3}Z`
     );
   }
   return negative ? (
     // 왼쪽으로 자란다
-    `M${x + width} ${y}h${-(width - r2)}a${r2} ${r2} 0 0 0 ${-r2} ${r2}v${height - 2 * r2}a${r2} ${r2} 0 0 0 ${r2} ${r2}h${width - r2}Z`
+    `M${x + width} ${y}h${-(width - r3)}a${r3} ${r3} 0 0 0 ${-r3} ${r3}v${height - 2 * r3}a${r3} ${r3} 0 0 0 ${r3} ${r3}h${width - r3}Z`
   ) : (
     // 오른쪽으로 자란다
-    `M${x} ${y}h${width - r2}a${r2} ${r2} 0 0 1 ${r2} ${r2}v${height - 2 * r2}a${r2} ${r2} 0 0 1 ${-r2} ${r2}h${-(width - r2)}Z`
+    `M${x} ${y}h${width - r3}a${r3} ${r3} 0 0 1 ${r3} ${r3}v${height - 2 * r3}a${r3} ${r3} 0 0 1 ${-r3} ${r3}h${-(width - r3)}Z`
   );
 }
 var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
@@ -19529,6 +19647,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
   formatValue = defaultFormat,
   height,
   onBarClick,
+  tooltipFooter,
   className,
   style
 }, ref) {
@@ -19957,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 }];
+                    })
+                  })
                 }
               )
             ]
@@ -20019,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";
@@ -20115,6 +20244,7 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
   formatValue = defaultFormat2,
   height,
   onPointClick,
+  tooltipFooter,
   className,
   style
 }, ref) {
@@ -20122,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),
@@ -20149,26 +20280,41 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
     ),
     [rows, tickCount, max]
   );
-  const band = categories.length > 0 ? Math.max(0, size.width - AXIS_EDGE_PADDING * 2) / categories.length : 0;
-  const minPlotWidth = categories.length * BAND_MIN + AXIS_EDGE_PADDING * 2;
+  const count = categories.length;
+  const step = count > 1 ? size.width / (count - 1) : 0;
+  const xAt = useCallback(
+    (index) => count > 1 ? index * step : size.width / 2,
+    [count, step, size.width]
+  );
+  const cellOf = useCallback(
+    (index) => count > 1 ? {
+      left: Math.max(0, xAt(index) - step / 2),
+      right: Math.min(size.width, xAt(index) + step / 2)
+    } : { left: 0, right: size.width },
+    [count, step, xAt, size.width]
+  );
+  const edgeOf = useCallback(
+    (index) => count > 1 && index === 0 ? "start" : count > 1 && index === count - 1 ? "end" : null,
+    [count]
+  );
+  const minPlotWidth = categories.length * BAND_MIN;
   const totalHeight = height ?? 320;
   const plotHeight = typeof totalHeight === "number" ? Math.max(0, totalHeight - axisText.height) : `calc(${totalHeight} - ${axisText.height}px)`;
   const plotted = useMemo(() => {
     if (size.width <= 0 || size.height <= 0) return [];
-    const xOf = (index) => AXIS_EDGE_PADDING + (index + 0.5) * band;
     const yOf = (value) => size.height - ratioOf(value, scale) * size.height;
     return rows.map(
       (row) => row.map(
-        (point, categoryIndex) => point == null ? null : { x: xOf(categoryIndex), y: yOf(point.value), baseY: yOf(point.base), own: point.own }
+        (point, categoryIndex) => point == null ? null : { x: xAt(categoryIndex), y: yOf(point.value), baseY: yOf(point.base), own: point.own }
       )
     );
-  }, [rows, size.width, size.height, band, scale]);
+  }, [rows, size.width, size.height, xAt, scale]);
   const legend = showLegend ? /* @__PURE__ */ jsx(ChartLegend, { items: series.map((s, i) => ({ name: s.name, color: colorAt(i) })) }) : null;
   const handleMove = (event) => {
-    if (!showTooltip || band <= 0 || series.length === 0) return;
+    if (!showTooltip || count === 0 || size.width <= 0 || series.length === 0) return;
     const rect = event.currentTarget.getBoundingClientRect();
-    const along = event.clientX - rect.left - AXIS_EDGE_PADDING;
-    const category = Math.floor(along / band);
+    const along = event.clientX - rect.left;
+    const category = count > 1 ? Math.round(along / step) : 0;
     setHoveredCategory(category >= 0 && category < categories.length ? category : null);
   };
   const tooltipItems = hoveredCategory == null ? [] : rows.flatMap((row, seriesIndex) => {
@@ -20194,10 +20340,9 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
   const { ref: valueLabelRef, metrics: valueLabel } = useSvgTextMetrics();
   const tooltipAnchor = useMemo(() => {
     if (hoveredCategory == null || anchorTop == null) return null;
-    const left = AXIS_EDGE_PADDING + hoveredCategory * band;
     const top = showValueLabel ? anchorTop - POINT_RADIUS - VALUE_LABEL_GAP2 + valueLabel.top : anchorTop - POINT_HOVER_EXTENT;
-    return { left, right: left + band, top };
-  }, [hoveredCategory, anchorTop, band, showValueLabel, valueLabel.top]);
+    return { ...cellOf(hoveredCategory), top };
+  }, [hoveredCategory, anchorTop, cellOf, showValueLabel, valueLabel.top]);
   const categoryLabels = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -20208,8 +20353,11 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
         categories.map((label, index) => /* @__PURE__ */ jsx(
           "span",
           {
-            className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
-            style: { left: AXIS_EDGE_PADDING + (index + 0.5) * band },
+            className: cn(
+              "absolute top-0 whitespace-nowrap",
+              edgeOf(index) === "start" ? "translate-x-0" : edgeOf(index) === "end" ? "-translate-x-full" : "-translate-x-1/2"
+            ),
+            style: { left: xAt(index) },
             children: label
           },
           `${label}-${index}`
@@ -20233,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) => {
@@ -20319,7 +20497,7 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
             y: point.y - POINT_RADIUS - VALUE_LABEL_GAP2,
             className: hoveredCategory === categoryIndex ? LINE_DATA_LABEL_TYPO_HOVER : LINE_DATA_LABEL_TYPO,
             style: { fill: LINE_DATA_LABEL_COLOR },
-            textAnchor: "middle",
+            textAnchor: edgeOf(categoryIndex) === "start" ? "start" : edgeOf(categoryIndex) === "end" ? "end" : "middle",
             dominantBaseline: "auto",
             children: formatValue(point.own)
           },
@@ -20327,7 +20505,7 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
         )
       )
     ) : [],
-    [showValueLabel, plotted, hoveredCategory, formatValue]
+    [showValueLabel, plotted, hoveredCategory, formatValue, edgeOf]
   );
   const inset = { paddingTop: axisSample.height / 2, paddingBottom: axisSample.height / 2 };
   return /* @__PURE__ */ jsx(
@@ -20357,95 +20535,385 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
                 sampleRef: axisSampleRef
               }
             ) }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 overflow-x-auto", children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "relative min-w-0",
-                  style: { height: plotHeight, minWidth: minPlotWidth || void 0, ...inset },
-                  children: /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "min-w-0 overflow-x-auto",
+                style: { marginInline: -POINT_HOVER_EXTENT, paddingInline: POINT_HOVER_EXTENT },
+                children: [
+                  /* @__PURE__ */ jsx(
                     "div",
                     {
-                      ref: plotRef,
-                      className: "relative h-full w-full",
-                      onMouseMove: handleMove,
-                      onMouseLeave: () => setHoveredCategory(null),
-                      children: [
-                        size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxs(
-                          "svg",
-                          {
-                            width: size.width,
-                            height: size.height,
-                            role: "img",
-                            "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 ${stacked ? "\uB204\uC801 " : ""}\uAEBE\uC740\uC120 \uADF8\uB798\uD504`,
-                            children: [
-                              /* @__PURE__ */ jsx(
-                                "text",
-                                {
-                                  ref: valueLabelRef,
-                                  "aria-hidden": true,
-                                  x: 0,
-                                  y: 0,
-                                  className: LINE_DATA_LABEL_TYPO_HOVER,
-                                  dominantBaseline: "auto",
-                                  style: { visibility: "hidden" },
-                                  children: "0"
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                ChartGrid,
-                                {
-                                  scale,
-                                  direction: "vertical",
-                                  width: size.width,
-                                  height: size.height
-                                }
-                              ),
-                              hoveredCategory != null && /* @__PURE__ */ jsx(
-                                "rect",
-                                {
-                                  "aria-hidden": true,
-                                  x: AXIS_EDGE_PADDING + hoveredCategory * band,
-                                  y: 0,
-                                  width: band,
-                                  height: size.height,
-                                  style: {
-                                    fill: "var(--cmp-chart-barContainer-hover-bg)",
-                                    fillOpacity: "var(--cmp-chart-barContainer-hover-opacity)"
-                                  }
-                                }
-                              ),
-                              areas,
-                              lines,
-                              pointHalos,
-                              pointDots,
-                              valueLabels
-                            ]
-                          }
-                        ),
-                        showTooltip && hoveredCategory != null && tooltipAnchor != null && tooltipItems.length > 0 && /* @__PURE__ */ jsx(
-                          ChartTooltip,
-                          {
-                            title: categories[hoveredCategory] ?? "",
-                            items: tooltipItems,
-                            anchor: tooltipAnchor,
-                            bounds: size,
-                            gapX: { after: -4, before: -4 }
-                          }
-                        )
-                      ]
+                      className: "relative min-w-0",
+                      style: { height: plotHeight, minWidth: minPlotWidth || void 0, ...inset },
+                      children: /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          ref: plotRef,
+                          className: "relative h-full w-full",
+                          onMouseMove: handleMove,
+                          onMouseLeave: () => setHoveredCategory(null),
+                          children: [
+                            size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxs(
+                              "svg",
+                              {
+                                width: size.width,
+                                height: size.height,
+                                overflow: "visible",
+                                role: "img",
+                                "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 ${stacked ? "\uB204\uC801 " : ""}\uAEBE\uC740\uC120 \uADF8\uB798\uD504`,
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    "text",
+                                    {
+                                      ref: valueLabelRef,
+                                      "aria-hidden": true,
+                                      x: 0,
+                                      y: 0,
+                                      className: LINE_DATA_LABEL_TYPO_HOVER,
+                                      dominantBaseline: "auto",
+                                      style: { visibility: "hidden" },
+                                      children: "0"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    ChartGrid,
+                                    {
+                                      scale,
+                                      direction: "vertical",
+                                      width: size.width,
+                                      height: size.height
+                                    }
+                                  ),
+                                  hoveredCategory != null && /* @__PURE__ */ jsx(
+                                    "rect",
+                                    {
+                                      "aria-hidden": true,
+                                      x: cellOf(hoveredCategory).left,
+                                      y: 0,
+                                      width: cellOf(hoveredCategory).right - cellOf(hoveredCategory).left,
+                                      height: size.height,
+                                      style: {
+                                        fill: "var(--cmp-chart-barContainer-hover-bg)",
+                                        fillOpacity: "var(--cmp-chart-barContainer-hover-opacity)"
+                                      }
+                                    }
+                                  ),
+                                  areaGradients,
+                                  areas,
+                                  lines,
+                                  pointHalos,
+                                  pointDots,
+                                  valueLabels
+                                ]
+                              }
+                            ),
+                            showTooltip && hoveredCategory != null && tooltipAnchor != null && tooltipItems.length > 0 && /* @__PURE__ */ jsx(
+                              ChartTooltip,
+                              {
+                                title: categories[hoveredCategory] ?? "",
+                                items: tooltipItems,
+                                anchor: tooltipAnchor,
+                                bounds: size,
+                                gapX: { after: -4, before: -4 },
+                                footer: tooltipFooter?.({
+                                  categoryIndex: hoveredCategory,
+                                  name: categories[hoveredCategory] ?? "",
+                                  points: rows.flatMap((row, seriesIndex) => {
+                                    const point = row[hoveredCategory];
+                                    if (point == null) return [];
+                                    return [{ seriesIndex, categoryIndex: hoveredCategory, value: point.own }];
+                                  })
+                                })
+                              }
+                            )
+                          ]
+                        }
+                      )
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { ref: axisTextRef, children: categoryLabels })
-            ] })
+                  ),
+                  /* @__PURE__ */ jsx("div", { ref: axisTextRef, children: categoryLabels })
+                ]
+              }
+            )
           ]
         }
       )
     }
   );
 });
+var DONUT_INNER_RATIO = 0.4;
+var LABEL_MIN_RATIO = 0.05;
+var PIE_LABEL_RADIUS_RATIO = 0.65;
+var HOVER_GROW = 4;
+var HOVER_CORNER = 2;
+var OPACITY_DEFAULT = "var(--cmp-chart-bar-opacity-default)";
+var OPACITY_DIMMED = "var(--cmp-chart-bar-opacity-dimmed)";
+var OPACITY_HOVER = 1;
+var defaultFormat3 = (value) => value.toLocaleString();
+function formatRatio(ratio) {
+  if (ratio > 0 && ratio < 0.01) return "<1%";
+  return `${Math.round(ratio * 100)}%`;
+}
+var r2 = (value) => Math.round(value * 100) / 100;
+function polar(center, radius, angle) {
+  return { x: center + radius * Math.sin(angle), y: center - radius * Math.cos(angle) };
+}
+var arc = (radius, large, sweep, p) => `A${r2(radius)} ${r2(radius)} 0 ${large} ${sweep} ${r2(p.x)} ${r2(p.y)}`;
+function fitCorner(corner, outer, inner, span) {
+  if (corner <= 0 || outer <= 0) return 0;
+  let fitted = Math.min(corner, (outer - inner) / 2);
+  if (span < Math.PI) {
+    const half = Math.sin(span / 2);
+    fitted = Math.min(fitted, outer * half / (1 + half));
+    if (inner > 0) fitted = Math.min(fitted, inner * half / (1 - half));
+  }
+  return fitted >= 0.5 ? fitted : 0;
+}
+function slicePath(center, outer, inner, start, end, corner = 0) {
+  if (end - start >= Math.PI * 2 - 1e-6) {
+    const ring = (radius) => `M${r2(center - radius)} ${r2(center)}A${r2(radius)} ${r2(radius)} 0 1 1 ${r2(center + radius)} ${r2(center)}A${r2(radius)} ${r2(radius)} 0 1 1 ${r2(center - radius)} ${r2(center)}Z`;
+    return inner > 0 ? ring(outer) + ring(inner) : ring(outer);
+  }
+  const span = end - start;
+  const round = fitCorner(corner, outer, inner, span);
+  const outerLine = Math.sqrt(Math.max(outer * outer - 2 * outer * round, 0));
+  const outerPhi = round > 0 ? Math.asin(round / (outer - round)) : 0;
+  const outerLarge = span - 2 * outerPhi > Math.PI ? 1 : 0;
+  const o0 = polar(center, outerLine, start);
+  let d = `M${r2(o0.x)} ${r2(o0.y)}`;
+  if (round > 0) d += arc(round, 0, 1, polar(center, outer, start + outerPhi));
+  d += arc(outer, outerLarge, 1, polar(center, outer, end - outerPhi));
+  if (round > 0) d += arc(round, 0, 1, polar(center, outerLine, end));
+  if (inner <= 0) return `${d}L${r2(center)} ${r2(center)}Z`;
+  const innerLine = Math.sqrt(inner * inner + 2 * inner * round);
+  const innerPhi = round > 0 ? Math.asin(round / (inner + round)) : 0;
+  const innerLarge = span - 2 * innerPhi > Math.PI ? 1 : 0;
+  const i0 = polar(center, innerLine, end);
+  d += `L${r2(i0.x)} ${r2(i0.y)}`;
+  if (round > 0) d += arc(round, 0, 1, polar(center, inner, end - innerPhi));
+  d += arc(inner, innerLarge, 0, polar(center, inner, start + innerPhi));
+  if (round > 0) d += arc(round, 0, 1, polar(center, innerLine, start));
+  return `${d}Z`;
+}
+var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
+  data,
+  palette = "multi",
+  colors,
+  showValueLabel = false,
+  showLegend = true,
+  legendPosition = "top",
+  showTooltip = true,
+  formatValue = defaultFormat3,
+  onSliceClick,
+  tooltipFooter,
+  className,
+  style,
+  innerRatio,
+  kind
+}, ref) {
+  const { ref: plotRef, size } = useElementSize();
+  const [hovered, setHovered] = useState(null);
+  const arcs = useMemo(() => {
+    const effective = palette === "custom" && !colors?.length ? "multi" : palette;
+    const valid = data.map((slice2, index) => ({ ...slice2, index })).filter((slice2) => Number.isFinite(slice2.value) && slice2.value > 0);
+    const sum = valid.reduce((acc, slice2) => acc + slice2.value, 0);
+    let angle = 0;
+    const list = valid.map((slice2) => {
+      const ratio = slice2.value / sum;
+      const start = angle;
+      angle += ratio * Math.PI * 2;
+      return {
+        index: slice2.index,
+        name: slice2.name,
+        value: slice2.value,
+        ratio,
+        start,
+        end: angle,
+        color: paletteColor(effective, slice2.index, colors)
+      };
+    });
+    return list;
+  }, [data, palette, colors]);
+  const diameter = size.width;
+  const center = diameter / 2;
+  const outer = Math.max(center - HOVER_GROW, 0);
+  const inner = outer * innerRatio;
+  const hoveredArc = arcs.find((arc2) => arc2.index === hovered) ?? null;
+  const legend = showLegend ? /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      items: arcs.map((arc2) => ({ name: arc2.name, color: arc2.color })),
+      activeIndex: hoveredArc ? arcs.indexOf(hoveredArc) : null
+    }
+  ) : null;
+  const tooltipAnchor = useMemo(() => {
+    if (!hoveredArc || diameter <= 0) return null;
+    const mid = (hoveredArc.start + hoveredArc.end) / 2;
+    const point = polar(center, (outer + inner) / 2, mid);
+    return { left: point.x, right: point.x, top: point.y };
+  }, [hoveredArc, diameter, center, outer, inner]);
+  const labelRadius = inner > 0 ? (outer + inner) / 2 : outer * PIE_LABEL_RADIUS_RATIO;
+  const slice = (target) => {
+    const picked = hovered === target.index;
+    return slicePath(
+      center,
+      picked ? outer + HOVER_GROW : outer,
+      picked ? Math.max(inner - HOVER_GROW, 0) : inner,
+      target.start,
+      target.end,
+      picked ? HOVER_CORNER : 0
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ref,
+      legend,
+      legendPosition,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxs("div", { ref: plotRef, className: "relative aspect-square w-full", children: [
+        diameter > 0 && /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: diameter,
+            height: diameter,
+            role: "img",
+            "aria-label": `${arcs.length}\uAC1C \uD56D\uBAA9 ${kind}`,
+            onMouseLeave: () => setHovered(null),
+            children: [
+              arcs.length === 0 ? (
+                // 그릴 값이 없어도 자리는 남긴다 — 차트가 사라지면 화면이 무너진 것처럼 보인다.
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    "aria-hidden": true,
+                    d: slicePath(center, outer, inner, 0, Math.PI * 2),
+                    fillRule: "evenodd",
+                    style: { fill: "var(--cmp-chart-grid-line-color)" }
+                  }
+                )
+              ) : arcs.map((arc2) => {
+                const opacity = hovered == null ? OPACITY_DEFAULT : hovered === arc2.index ? OPACITY_HOVER : OPACITY_DIMMED;
+                return /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: slice(arc2),
+                    fillRule: "evenodd",
+                    className: "transition-opacity duration-200 ease-out motion-reduce:transition-none",
+                    style: {
+                      fill: arc2.color,
+                      opacity,
+                      cursor: onSliceClick ? "pointer" : void 0
+                    },
+                    onMouseEnter: () => setHovered(arc2.index),
+                    onClick: onSliceClick ? () => onSliceClick({
+                      index: arc2.index,
+                      name: arc2.name,
+                      value: arc2.value,
+                      ratio: arc2.ratio
+                    }) : void 0,
+                    children: /* @__PURE__ */ jsx("title", { children: `${arc2.name} ${formatValue(arc2.value)} (${formatRatio(arc2.ratio)})` })
+                  },
+                  `slice-${arc2.index}`
+                );
+              }),
+              showValueLabel && arcs.map((arc2) => {
+                if (arc2.ratio < LABEL_MIN_RATIO) return null;
+                const point = polar(center, labelRadius, (arc2.start + arc2.end) / 2);
+                return /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    "aria-hidden": true,
+                    x: point.x,
+                    y: point.y,
+                    textAnchor: "middle",
+                    dominantBaseline: "central",
+                    className: "pointer-events-none typo-body-sm-bold transition-opacity duration-200 ease-out motion-reduce:transition-none",
+                    style: {
+                      fill: "var(--sys-color-fg-inverse)",
+                      opacity: hovered != null && hovered !== arc2.index ? OPACITY_DIMMED : void 0
+                    },
+                    children: formatRatio(arc2.ratio)
+                  },
+                  `label-${arc2.index}`
+                );
+              })
+            ]
+          }
+        ),
+        showTooltip && hoveredArc && tooltipAnchor && /* @__PURE__ */ jsx(
+          ChartTooltip,
+          {
+            title: hoveredArc.name,
+            items: [
+              {
+                color: hoveredArc.color,
+                label: formatValue(hoveredArc.value),
+                value: formatRatio(hoveredArc.ratio)
+              }
+            ],
+            anchor: tooltipAnchor,
+            bounds: size,
+            footer: tooltipFooter?.({
+              index: hoveredArc.index,
+              name: hoveredArc.name,
+              value: hoveredArc.value,
+              ratio: hoveredArc.ratio
+            })
+          }
+        )
+      ] })
+    }
+  );
+});
+var SPieChart = /* @__PURE__ */ forwardRef(function SPieChart2({
+  palette = "multi",
+  showValueLabel = false,
+  showLegend = true,
+  legendPosition = "top",
+  showTooltip = true,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    RadialChart,
+    {
+      ref,
+      ...props,
+      palette,
+      showValueLabel,
+      showLegend,
+      legendPosition,
+      showTooltip,
+      innerRatio: 0,
+      kind: "\uD30C\uC774 \uADF8\uB798\uD504"
+    }
+  );
+});
+var SDonutChart = /* @__PURE__ */ forwardRef(function SDonutChart2({
+  palette = "multi",
+  showValueLabel = false,
+  showLegend = true,
+  legendPosition = "top",
+  showTooltip = true,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    RadialChart,
+    {
+      ref,
+      ...props,
+      palette,
+      showValueLabel,
+      showLegend,
+      legendPosition,
+      showTooltip,
+      innerRatio: DONUT_INNER_RATIO,
+      kind: "\uB3C4\uB11B \uADF8\uB798\uD504"
+    }
+  );
+});
 var BUTTON_STYLE = {
   default: { color: "secondary" },
   danger: { color: "danger", outline: true },
@@ -21728,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,
@@ -21814,14 +22282,14 @@ var TableSizePicker = ({
             onPick(size.rows, size.cols);
           }
         },
-        children: Array.from({ length: TABLE_PICKER_ROWS }, (_, r2) => /* @__PURE__ */ jsx("div", { role: "row", className: "flex", style: { gap: TABLE_PICKER_GAP }, children: Array.from({ length: TABLE_PICKER_COLS }, (_2, c) => {
-          const on = r2 < size.rows && c < size.cols;
+        children: Array.from({ length: TABLE_PICKER_ROWS }, (_, r3) => /* @__PURE__ */ jsx("div", { role: "row", className: "flex", style: { gap: TABLE_PICKER_GAP }, children: Array.from({ length: TABLE_PICKER_COLS }, (_2, c) => {
+          const on = r3 < size.rows && c < size.cols;
           return /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               role: "gridcell",
-              "aria-label": `${r2 + 1}\uD589 ${c + 1}\uC5F4`,
+              "aria-label": `${r3 + 1}\uD589 ${c + 1}\uC5F4`,
               "aria-selected": on,
               tabIndex: -1,
               className: "box-border cursor-pointer rounded-[3px] border border-solid p-0 outline-none",
@@ -21831,13 +22299,13 @@ var TableSizePicker = ({
                 borderColor: on ? "var(--sys-color-bg-accent)" : "var(--sys-color-border-default)",
                 background: on ? "var(--color-bg-accentFaint)" : "transparent"
               },
-              onMouseEnter: () => setSize({ rows: r2 + 1, cols: c + 1 }),
-              onFocus: () => setSize({ rows: r2 + 1, cols: c + 1 }),
-              onClick: () => onPick(r2 + 1, c + 1)
+              onMouseEnter: () => setSize({ rows: r3 + 1, cols: c + 1 }),
+              onFocus: () => setSize({ rows: r3 + 1, cols: c + 1 }),
+              onClick: () => onPick(r3 + 1, c + 1)
             },
             c
           );
-        }) }, r2))
+        }) }, r3))
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -21860,7 +22328,7 @@ var TableMenuItem = ({
   disabled,
   onSelect
 }) => /* @__PURE__ */ jsx(
-  RDropdown3.Item,
+  RDropdown5.Item,
   {
     className: cn(menuItemClass, menuItemDisabledClass),
     disabled,
@@ -22027,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",
@@ -22041,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(),
@@ -22051,7 +22519,7 @@ function EditorToolbarBar({
               }
             ),
             SEDITOR_HEADING_LEVELS.map((level) => /* @__PURE__ */ jsx(
-              RDropdown3.Item,
+              RDropdown5.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.setHeading({ level }).run(),
@@ -22062,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",
@@ -22076,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)`,
@@ -22085,7 +22553,7 @@ function EditorToolbarBar({
                   }
                 ),
                 SEDITOR_FONT_SIZES.map((size) => /* @__PURE__ */ jsx(
-                  RDropdown3.Item,
+                  RDropdown5.Item,
                   {
                     ref: activeFontSize === size ? (el) => {
                       el?.scrollIntoView({ block: "nearest" });
@@ -22177,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,
@@ -22285,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(),
@@ -22303,7 +22771,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxs(
-              RDropdown3.Item,
+              RDropdown5.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleOrderedList().run(),
@@ -22314,7 +22782,7 @@ function EditorToolbarBar({
               }
             ),
             /* @__PURE__ */ jsxs(
-              RDropdown3.Item,
+              RDropdown5.Item,
               {
                 className: menuItemClass,
                 onSelect: () => chain()?.toggleTaskList().run(),
@@ -22418,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,
@@ -22440,7 +22908,7 @@ function EditorToolbarBar({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx(RDropdown3.Separator, { className: menuSeparatorClass })
+                  /* @__PURE__ */ jsx(RDropdown5.Separator, { className: menuSeparatorClass })
                 ] }),
                 /* @__PURE__ */ jsx(
                   TableMenuItem,
@@ -22474,7 +22942,7 @@ function EditorToolbarBar({
                     onSelect: () => chain()?.addColumnAfter().run()
                   }
                 ),
-                /* @__PURE__ */ jsx(RDropdown3.Separator, { className: menuSeparatorClass }),
+                /* @__PURE__ */ jsx(RDropdown5.Separator, { className: menuSeparatorClass }),
                 /* @__PURE__ */ jsx(
                   TableMenuItem,
                   {
@@ -22507,7 +22975,7 @@ function EditorToolbarBar({
                     onSelect: () => chain()?.toggleHeaderColumn().run()
                   }
                 ),
-                /* @__PURE__ */ jsx(RDropdown3.Separator, { className: menuSeparatorClass }),
+                /* @__PURE__ */ jsx(RDropdown5.Separator, { className: menuSeparatorClass }),
                 /* @__PURE__ */ jsx(
                   TableMenuItem,
                   {
@@ -26460,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, 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, 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, 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