sellmate-design-system-react 9.0.0-beta.65 → 9.0.0-beta.67

package/dist/index.js

@@ -1,9 +1,9 @@
 "use client";
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { forwardRef, useState, useRef, useEffect, createContext, useCallback, useImperativeHandle, useLayoutEffect, useContext, useMemo, useId, Children, cloneElement, Fragment as Fragment$1, isValidElement, useSyncExternalStore, Component } from 'react';
+import { forwardRef, createContext, useState, useRef, useEffect, useCallback, useImperativeHandle, useLayoutEffect, useContext, useMemo, useId, Children, cloneElement, Fragment as Fragment$1, isValidElement, useSyncExternalStore, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as RPopover12 from '@radix-ui/react-popover';
+import * as RPopover13 from '@radix-ui/react-popover';
 import { createPortal } from 'react-dom';
 import * as RCheckbox from '@radix-ui/react-checkbox';
 import { createRoot } from 'react-dom/client';
@@ -3707,6 +3707,57 @@ var SIcon = /* @__PURE__ */ forwardRef(function SIcon2({ name, size = 24, color,
     }
   );
 });
+
+// src/lib/display-name.ts
+function withDisplayName(component, name) {
+  component.displayName = name;
+  return component;
+}
+
+// src/lib/floating-anim.ts
+var FLOATING_SLIDE_ANIM = [
+  "data-[state=open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=closed]:data-[side=top]:animate-floating-out-top",
+  "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
+  "data-[state=open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=closed]:data-[side=left]:animate-floating-out-left",
+  "data-[state=open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=closed]:data-[side=right]:animate-floating-out-right"
+].join(" ");
+
+// src/lib/hover-preview.ts
+function hoverPreviewOrigin({
+  anchor,
+  size,
+  viewportWidth,
+  viewportHeight,
+  padding = 8
+}) {
+  const startX = anchor.left + anchor.width / 2;
+  const startY = anchor.top + anchor.height / 2;
+  const x = Math.max(padding, Math.min(startX, viewportWidth - size - padding));
+  const y = Math.max(padding, Math.min(startY, viewportHeight - size - padding));
+  return { x, y };
+}
+var PortalContainerContext = /* @__PURE__ */ createContext(null);
+var InsideModalContext = /* @__PURE__ */ createContext(false);
+var PortalContainerProvider = PortalContainerContext.Provider;
+var InsideModalProvider = InsideModalContext.Provider;
+function usePortalContainer() {
+  return useContext(PortalContainerContext) ?? void 0;
+}
+function useInsideModal() {
+  return useContext(InsideModalContext);
+}
 var VIEWBOX = 80;
 var RADIUS = 34;
 var STROKE = 12;
@@ -3824,7 +3875,10 @@ var SCircleProgress = /* @__PURE__ */ forwardRef(
 var IMAGE_FITS = ["cover", "contain", "fill", "none", "scale-down"];
 var EMPTY_ICON_SIZE = "60cqh";
 var SPINNER_SIZE = "45cqh";
-var SImage = /* @__PURE__ */ forwardRef(function SImage2({
+var PREVIEW_HIDE_DELAY_MS = 100;
+var PREVIEW_MAX_SIZE = 200;
+var PREVIEW_VIEWPORT_PADDING = 8;
+var SImageImpl = /* @__PURE__ */ forwardRef(function SImageImpl2({
   src,
   alt = "",
   ratio = 1,
@@ -3836,6 +3890,9 @@ var SImage = /* @__PURE__ */ forwardRef(function SImage2({
   loadingSlot,
   errorSlot,
   imgProps,
+  previewOnHover = false,
+  previewSrc,
+  previewSize = PREVIEW_MAX_SIZE,
   onLoad,
   onError,
   className,
@@ -3866,16 +3923,94 @@ var SImage = /* @__PURE__ */ forwardRef(function SImage2({
     const timer = setTimeout(() => setSpinnerVisible(true), loadingShowDelay);
     return () => clearTimeout(timer);
   }, [status, loadingShowDelay, src]);
+  const portalContainer = usePortalContainer();
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const previewHideTimer = useRef(void 0);
+  const boxRef = useRef(null);
+  const previewSource = previewSrc ?? src;
+  const previewEnabled = previewOnHover && !!previewSource;
+  const previewBoxSize = Math.min(previewSize, PREVIEW_MAX_SIZE);
+  const previewBoxSizeRef = useRef(previewBoxSize);
+  previewBoxSizeRef.current = previewBoxSize;
+  const previewAnchorRef = useRef(null);
+  if (previewAnchorRef.current == null) {
+    previewAnchorRef.current = {
+      getBoundingClientRect: () => {
+        const anchor = boxRef.current?.getBoundingClientRect();
+        if (!anchor) return new DOMRect(0, 0, 0, 0);
+        const { x, y } = hoverPreviewOrigin({
+          anchor,
+          size: previewBoxSizeRef.current,
+          viewportWidth: window.innerWidth,
+          viewportHeight: window.innerHeight,
+          padding: PREVIEW_VIEWPORT_PADDING
+        });
+        return new DOMRect(x, y, 0, 0);
+      },
+      // autoUpdate 가 스크롤 조상을 찾는 기준 — 없으면 표 안에서 스크롤할 때 위치가 굳는다
+      get contextElement() {
+        return boxRef.current ?? void 0;
+      }
+    };
+  }
+  const cancelPreviewHide = useCallback(() => {
+    if (previewHideTimer.current) {
+      clearTimeout(previewHideTimer.current);
+      previewHideTimer.current = void 0;
+    }
+  }, []);
+  const openPreview = () => {
+    cancelPreviewHide();
+    setPreviewOpen(true);
+  };
+  const startPreviewHide = () => {
+    cancelPreviewHide();
+    previewHideTimer.current = setTimeout(() => setPreviewOpen(false), PREVIEW_HIDE_DELAY_MS);
+  };
+  useEffect(() => {
+    if (!previewEnabled) {
+      cancelPreviewHide();
+      setPreviewOpen(false);
+    }
+  }, [previewEnabled, cancelPreviewHide]);
+  useEffect(() => cancelPreviewHide, [cancelPreviewHide]);
+  const previewContentRef = useCallback((node) => {
+    node?.parentElement?.style.setProperty("pointer-events", "none");
+  }, []);
+  const previewHandlers = previewEnabled ? {
+    onMouseEnter: (event) => {
+      rest.onMouseEnter?.(event);
+      openPreview();
+    },
+    onMouseLeave: (event) => {
+      rest.onMouseLeave?.(event);
+      startPreviewHide();
+    },
+    // 소비자가 tabIndex 를 준 썸네일에서는 키보드로도 열린다
+    onFocus: (event) => {
+      rest.onFocus?.(event);
+      openPreview();
+    },
+    onBlur: (event) => {
+      rest.onBlur?.(event);
+      startPreviewHide();
+    }
+  } : void 0;
   const isEmpty = !src;
   const showFallback = isEmpty || status === "error";
   const spinnerShown = !isEmpty && status === "loading" && showSpinner && spinnerVisible;
-  return /* @__PURE__ */ jsxs(
+  const box3 = /* @__PURE__ */ jsxs(
     "div",
     {
-      ref,
+      ref: (node) => {
+        boxRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
       className: cn("relative overflow-hidden bg-(--cmp-image-bg)", className),
       style: { containerType: "size", aspectRatio: ratio, ...style },
       ...rest,
+      ...previewHandlers,
       children: [
         !isEmpty && /* @__PURE__ */ jsx(
           "img",
@@ -3911,7 +4046,47 @@ var SImage = /* @__PURE__ */ forwardRef(function SImage2({
       ]
     }
   );
+  if (!previewEnabled) return box3;
+  return /* @__PURE__ */ jsxs(RPopover13.Root, { open: previewOpen, onOpenChange: setPreviewOpen, children: [
+    box3,
+    /* @__PURE__ */ jsx(RPopover13.Anchor, { virtualRef: previewAnchorRef }),
+    /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+      RPopover13.Content,
+      {
+        ref: previewContentRef,
+        side: "bottom",
+        align: "start",
+        sideOffset: 0,
+        alignOffset: 0,
+        avoidCollisions: false,
+        role: "presentation",
+        "aria-hidden": true,
+        className: cn(
+          "z-50 overflow-hidden rounded-[6px] shadow-normal-sm",
+          // 읽기 전용이라 호버 브릿지를 두지 않는다. 그 대신 마우스를 통과시켜,
+          // 목록 위로 뜬 미리보기가 아래 행의 클릭을 가로채지 않게 한다.
+          // (래퍼 쪽은 previewContentRef 가 함께 끈다 — 둘 다 꺼야 깜빡이지 않는다)
+          "pointer-events-none",
+          FLOATING_SLIDE_ANIM
+        ),
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsx(
+          SImage,
+          {
+            src: previewSource,
+            alt: "",
+            ratio: 1,
+            fit: "contain",
+            loading: "eager",
+            style: { width: previewBoxSize }
+          }
+        )
+      }
+    ) })
+  ] });
 });
+var SImage = /* @__PURE__ */ withDisplayName(SImageImpl, "SImage");
 var BADGE_COLORS = [
   "red",
   "orange",
@@ -4180,42 +4355,6 @@ var SCard = /* @__PURE__ */ forwardRef(function SCard2({ bordered = false, foote
   );
 });
 
-// src/lib/display-name.ts
-function withDisplayName(component, name) {
-  component.displayName = name;
-  return component;
-}
-
-// src/lib/floating-anim.ts
-var FLOATING_SLIDE_ANIM = [
-  "data-[state=open]:data-[side=top]:animate-floating-in-top",
-  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
-  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
-  "data-[state=closed]:data-[side=top]:animate-floating-out-top",
-  "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
-  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
-  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
-  "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
-  "data-[state=open]:data-[side=left]:animate-floating-in-left",
-  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
-  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
-  "data-[state=closed]:data-[side=left]:animate-floating-out-left",
-  "data-[state=open]:data-[side=right]:animate-floating-in-right",
-  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
-  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
-  "data-[state=closed]:data-[side=right]:animate-floating-out-right"
-].join(" ");
-var PortalContainerContext = /* @__PURE__ */ createContext(null);
-var InsideModalContext = /* @__PURE__ */ createContext(false);
-var PortalContainerProvider = PortalContainerContext.Provider;
-var InsideModalProvider = InsideModalContext.Provider;
-function usePortalContainer() {
-  return useContext(PortalContainerContext) ?? void 0;
-}
-function useInsideModal() {
-  return useContext(InsideModalContext);
-}
-
 // src/components/STag/tag.config.ts
 var TAG_SHAPES = ["square", "pill"];
 var TAG_SIZES = ["xs", "sm", "md"];
@@ -4403,8 +4542,8 @@ var SGhostButton = /* @__PURE__ */ forwardRef(function SGhostButton2({
     }
   );
   if (!hasTooltip) return btn2;
-  return /* @__PURE__ */ jsxs(RPopover12.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RPopover12.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(RPopover13.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RPopover13.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
       "span",
       {
         className: cn("inline-flex", anchorClassName),
@@ -4416,8 +4555,8 @@ var SGhostButton = /* @__PURE__ */ forwardRef(function SGhostButton2({
         children: btn2
       }
     ) }),
-    /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-      RPopover12.Content,
+    /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+      RPopover13.Content,
       {
         side: "top",
         sideOffset: 4,
@@ -4606,14 +4745,14 @@ var STooltipImpl = /* @__PURE__ */ forwardRef(function STooltip({
     ...style,
     ...contentPropsStyle
   };
-  return /* @__PURE__ */ jsxs(RPopover12.Root, { open, onOpenChange: setOpenState, children: [
+  return /* @__PURE__ */ jsxs(RPopover13.Root, { open, onOpenChange: setOpenState, children: [
     isNone ? (
       // 트리거 없음: children 을 래퍼 없이 그대로 앵커로 쓴다 (소비자 레이아웃 보존).
       // mouse/focus 핸들러가 없으므로 showClose 없이도 자동 닫힘이 발생하지 않는다.
-      /* @__PURE__ */ jsx(RPopover12.Anchor, { asChild: true, children: triggerNode })
+      /* @__PURE__ */ jsx(RPopover13.Anchor, { asChild: true, children: triggerNode })
     ) : isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsx(RPopover12.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(RPopover13.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
         "span",
         {
           className: "inline-flex",
@@ -4624,9 +4763,9 @@ var STooltipImpl = /* @__PURE__ */ forwardRef(function STooltip({
           children: triggerNode
         }
       ) })
-    ) : /* @__PURE__ */ jsx(RPopover12.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
-      RPopover12.Content,
+    ) : /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+      RPopover13.Content,
       {
         side: placement,
         sideOffset,
@@ -4660,7 +4799,7 @@ var STooltipImpl = /* @__PURE__ */ forwardRef(function STooltip({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(RPopover12.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsx(RPopover13.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -8309,12 +8448,18 @@ var release = (id) => {
   entries = next;
   sync();
 };
+var updateEntry = (id, message) => {
+  const index = entries.findIndex((e) => e.id === id);
+  if (index === -1) return;
+  entries = entries.map((e, i) => i === index ? { ...e, message } : e);
+  sync();
+};
 var subscribe = (cb) => {
   listeners.add(cb);
   return () => listeners.delete(cb);
 };
 var getSnapshot = () => state;
-function SLoadingViewport() {
+function LoadingViewport() {
   const s = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   return /* @__PURE__ */ jsx(SLoadingContainer, { open: s.open, message: s.message });
 }
@@ -8325,39 +8470,56 @@ function ensureMounted() {
   const host = document.createElement("div");
   host.setAttribute("data-sd-loading-root", "");
   document.body.appendChild(host);
-  createRoot(host).render(/* @__PURE__ */ jsx(SLoadingViewport, {}));
+  createRoot(host).render(/* @__PURE__ */ jsx(LoadingViewport, {}));
+}
+function showEntry(options = {}) {
+  ensureMounted();
+  const id = ++seq;
+  entries = [...entries, { id, message: options.message }];
+  sync();
+  let released = false;
+  const handle = (() => {
+    if (released) return;
+    released = true;
+    release(id);
+  });
+  handle.update = (next) => {
+    if (released) return;
+    updateEntry(id, next.message);
+  };
+  return handle;
 }
 var loading = {
   /**
    * 로딩 오버레이 표시. 겹쳐 부르면 그만큼 쌓이고 **마지막 하나가 걷힐 때** 닫힌다.
-   * 반환값은 이 호출 하나만 걷는 함수다(두 번 불러도 한 번만 걷힌다) — `hide()` 대신 이것을
-   * 쓰면 짝이 어긋나지 않는다.
+   * 반환값은 이 호출 하나를 걷고 갱신하는 핸들이다(두 번 걷어도 한 번만 걷힌다).
+   *
+   * **걷는 것은 `finally` 에 둔다.** 빠뜨리면 그 즉시 화면이 갇히고, 정상 경로에서는 아무
+   * 표시가 없다.
    *
-   * ⚠️ 메시지만 바꾸려면 `update()` 를 쓴다. `show()` 를 다시 부르면 하나 더 쌓여
-   * `hide()` 한 번으로는 닫히지 않는다.
+   * ```ts
+   * const done = loading.show({ message: '1/2 ...' });
+   * try {
+   *   done.update({ message: '2/2 ...' });   // 이 호출의 메시지만 바뀐다
+   *   await api.submit(payload);
+   * } finally {
+   *   done();                                // 이 호출만 걷는다
+   * }
+   * ```
+   *
+   * ⚠️ **메시지를 바꾸려고 `show()` 를 다시 부르지 않는다.** 하나 더 쌓여 한 번 걷는 것으로는
+   * 닫히지 않는다. 핸들의 `update()` 를 쓴다. (참조 카운트 이전에는 `show()` 를 다시 부르는
+   * 것이 갱신이었다 — Quasar 도 같은 그룹에 다시 show 하면 갱신이다. 그 시절 관행대로 쓰인
+   * 코드는 지금 오버레이를 하나 남긴다.)
    */
   show(options = {}) {
-    ensureMounted();
-    const id = ++seq;
-    entries = [...entries, { id, message: options.message }];
-    sync();
-    return () => release(id);
-  },
-  /** 표시 중인 메시지 갱신 — 쌓인 수는 그대로다 */
-  update(options) {
-    const top = entries[entries.length - 1];
-    if (!top) return;
-    entries = [...entries.slice(0, -1), { ...top, message: options.message }];
-    sync();
-  },
-  /** 가장 나중의 show 하나를 걷는다. 남은 것이 없을 때만 오버레이가 닫힌다 */
-  hide() {
-    const top = entries[entries.length - 1];
-    if (top) release(top.id);
+    return showEntry(options);
   },
   /**
-   * 쌓인 것을 모두 걷고 즉시 닫는다. 화면 전환·에러 복구처럼 진행 중이던 작업의 짝을 더는
-   * 맞출 수 없을 때만 쓴다 — 평소에는 `hide()` 나 `show()` 가 준 함수로 하나씩 걷는다.
+   * 쌓인 것을 모두 걷고 즉시 닫는다. **원본(Quasar)의 인자 없는 `hide()` 가 이것이다.**
+   * 화면 전환·에러 복구처럼 진행 중이던 작업의 짝을 더는 맞출 수 없을 때만 쓴다 — 평소에는
+   * `show()` 가 준 핸들로 걷는다.
+   * 이걸로 걷힌 항목의 주인이 뒤늦게 자기 핸들을 불러도 아무 일도 일어나지 않는다.
    */
   hideAll() {
     if (entries.length === 0) return;
@@ -8879,7 +9041,7 @@ function SPortal({
   const portalContainer = usePortalContainer();
   const { minWidth: styleMinWidth, maxWidth: styleMaxWidth, ...restStyle } = style ?? {};
   return /* @__PURE__ */ jsxs(
-    RPopover12.Root,
+    RPopover13.Root,
     {
       open,
       onOpenChange: (next) => {
@@ -8887,9 +9049,9 @@ function SPortal({
         if (!next) onClose?.();
       },
       children: [
-        /* @__PURE__ */ jsx(RPopover12.Anchor, { virtualRef: anchorRef }),
-        /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover12.Content,
+        /* @__PURE__ */ jsx(RPopover13.Anchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover13.Content,
           {
             side: placement,
             align,
@@ -9640,10 +9802,10 @@ function SPopover({
   const descColor = type === "default" ? "var(--cmp-popover-default-description)" : "var(--cmp-popover-light-description)";
   const leftLinkLabelClass = type === "default" ? "text-[color:var(--cmp-popover-default-subAction)]" : "text-[color:var(--cmp-popover-light-subAction)]";
   const triggerNode = trigger ?? /* @__PURE__ */ jsx("span", { className: "inline-flex cursor-pointer", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(SIcon, { name: icon, size: iconSize, color }) });
-  return /* @__PURE__ */ jsxs(RPopover12.Root, { open: actualOpen, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RPopover12.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
-      RPopover12.Content,
+  return /* @__PURE__ */ jsxs(RPopover13.Root, { open: actualOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+      RPopover13.Content,
       {
         side: placement,
         sideOffset: 8,
@@ -9709,7 +9871,7 @@ function SPopover({
               ]
             }
           ),
-          /* @__PURE__ */ jsx(RPopover12.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsx(RPopover13.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -9827,10 +9989,10 @@ function SGuide({
   );
   if (isNotion)
     return /* @__PURE__ */ jsx("span", { className, style, children: trigger });
-  return /* @__PURE__ */ jsxs(RPopover12.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RPopover12.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
-      RPopover12.Content,
+  return /* @__PURE__ */ jsxs(RPopover13.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+      RPopover13.Content,
       {
         side: "bottom",
         align: "start",
@@ -12323,10 +12485,10 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
         ),
         header === "fix" && menuResizeHandle,
         launcherListBox,
-        /* @__PURE__ */ jsxs(RPopover12.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
-          /* @__PURE__ */ jsx(RPopover12.Anchor, { virtualRef: labelTipAnchorRef }),
-          /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-            RPopover12.Content,
+        /* @__PURE__ */ jsxs(RPopover13.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
+          /* @__PURE__ */ jsx(RPopover13.Anchor, { virtualRef: labelTipAnchorRef }),
+          /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+            RPopover13.Content,
             {
               side: "right",
               sideOffset: 4,
@@ -14421,7 +14583,7 @@ function SCalendarBoard({
           }
         ),
         /* @__PURE__ */ jsxs(
-          RPopover12.Root,
+          RPopover13.Root,
           {
             open: openDate !== null,
             onOpenChange: (open) => {
@@ -14465,12 +14627,12 @@ function SCalendarBoard({
                       },
                       cell.date
                     );
-                    return cell.date === openDate ? /* @__PURE__ */ jsx(RPopover12.Anchor, { asChild: true, children: card }, cell.date) : card;
+                    return cell.date === openDate ? /* @__PURE__ */ jsx(RPopover13.Anchor, { asChild: true, children: card }, cell.date) : card;
                   })
                 }
               ),
-              /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-                RPopover12.Content,
+              /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+                RPopover13.Content,
                 {
                   onInteractOutside: (e) => {
                     const target = e.detail.originalEvent.target;
@@ -16973,10 +17135,10 @@ function useTruncatedValueTooltip({
     valueRef: elRef,
     onMouseEnter: active ? onMouseEnter : cancelHide,
     onMouseLeave: active ? startHide : cancelHide,
-    tooltip: active ? /* @__PURE__ */ jsxs(RPopover12.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(RPopover12.Anchor, { virtualRef: elRef }),
-      /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-        RPopover12.Content,
+    tooltip: active ? /* @__PURE__ */ jsxs(RPopover13.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(RPopover13.Anchor, { virtualRef: elRef }),
+      /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+        RPopover13.Content,
         {
           side: "top",
           sideOffset: 4,
@@ -18230,8 +18392,8 @@ function SDatePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxs(RPopover12.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
-        /* @__PURE__ */ jsx(RPopover12.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(RPopover13.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
             role: "button",
@@ -18290,8 +18452,8 @@ function SDatePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover12.Content,
+        /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover13.Content,
           {
             side: "bottom",
             align: mode === "date" ? "start" : "center",
@@ -18767,7 +18929,7 @@ function SDateRangePicker({
       className,
       style,
       children: /* @__PURE__ */ jsxs(
-        RPopover12.Root,
+        RPopover13.Root,
         {
           open,
           onOpenChange: (o) => {
@@ -18776,7 +18938,7 @@ function SDateRangePicker({
             if (!o) setPendingStart(null);
           },
           children: [
-            /* @__PURE__ */ jsx(RPopover12.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
               "div",
               {
                 role: "button",
@@ -18840,8 +19002,8 @@ function SDateRangePicker({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-              RPopover12.Content,
+            /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+              RPopover13.Content,
               {
                 side: "bottom",
                 align: "start",
@@ -19608,9 +19770,56 @@ var ChartFrame = /* @__PURE__ */ forwardRef(function ChartFrame2({ title, unit,
     }
   );
 });
+
+// src/lib/chart/hover-dim.ts
+var CHART_DIM_OPACITY_TRANSITION = "transition-opacity duration-200 ease-out motion-reduce:transition-none";
+var CHART_DIM_COLOR_TRANSITION = "transition-colors duration-200 ease-out motion-reduce:transition-none";
 var DOT_SIZE = 6;
-function ChartLegend({ items, align = "center", activeIndex, className }) {
+function ChartLegend({
+  items,
+  align = "center",
+  activeIndex,
+  className,
+  variant = "simple"
+}) {
   if (items.length === 0) return null;
+  const dot = (color) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "shrink-0 rounded-full",
+      style: { width: DOT_SIZE, height: DOT_SIZE, background: color }
+    }
+  );
+  if (variant === "default") {
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: cn(
+          "flex list-none flex-col gap-(--cmp-chart-doughnut-legend-data-default-gap) p-0",
+          className
+        ),
+        children: items.map((item4, index) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn(
+              "flex items-center gap-(--cmp-chart-legendItem-gap)",
+              "py-(--cmp-chart-legendItem-paddingY)",
+              "typo-body-sm-medium text-(--cmp-chart-legendItem-color)",
+              CHART_DIM_OPACITY_TRANSITION,
+              activeIndex != null && activeIndex !== index && "opacity-(--opacity-060)"
+            ),
+            children: [
+              dot(item4.color),
+              /* @__PURE__ */ jsx("span", { children: item4.name }),
+              item4.value != null && /* @__PURE__ */ jsx("span", { className: "ml-auto typo-body-sm-bold", style: { color: item4.valueColor }, children: item4.value })
+            ]
+          },
+          `${item4.name}-${index}`
+        ))
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "ul",
     {
@@ -19628,18 +19837,11 @@ function ChartLegend({ items, align = "center", activeIndex, className }) {
             "flex items-center gap-(--cmp-chart-legendItem-gap)",
             "py-(--cmp-chart-legendItem-paddingY)",
             "typo-body-sm-medium text-(--cmp-chart-legendItem-color)",
-            "transition-opacity duration-200 ease-out motion-reduce:transition-none",
+            CHART_DIM_OPACITY_TRANSITION,
             activeIndex != null && activeIndex !== index && "opacity-(--opacity-060)"
           ),
           children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                "aria-hidden": true,
-                className: "shrink-0 rounded-full",
-                style: { width: DOT_SIZE, height: DOT_SIZE, background: item4.color }
-              }
-            ),
+            dot(item4.color),
             item4.name
           ]
         },
@@ -19652,6 +19854,7 @@ function ChartLegend({ items, align = "center", activeIndex, className }) {
 // src/lib/chart/palette.ts
 var V3 = (path) => `var(--cmp-chart-palette-${path})`;
 var DIMMED = (path) => `var(--cmp-chart-line-point-dimmed-palette-${path})`;
+var VALUE = (path) => `var(--cmp-chart-dataValue-palette-${path})`;
 var colorsOf = (v) => ({
   positivePrimary: v("variation-positivePrimary"),
   positiveSecondary: v("variation-positiveSecondary"),
@@ -19688,6 +19891,31 @@ var CHART_COLORS = colorsOf(V3);
 var CHART_PALETTES = palettesOf(V3);
 var DIMMED_COLORS = colorsOf(DIMMED);
 var DIMMED_PALETTES = palettesOf(DIMMED);
+var DATA_VALUE_COLORS = colorsOf(VALUE);
+var DATA_VALUE_PALETTES = {
+  default: [DATA_VALUE_COLORS.positivePrimary],
+  multi: [
+    VALUE("multi-blue"),
+    VALUE("multi-skyblue"),
+    VALUE("multi-yellow"),
+    VALUE("multi-olive"),
+    VALUE("multi-lightRed"),
+    VALUE("multi-warmBlue"),
+    VALUE("multi-orange"),
+    VALUE("multi-green"),
+    VALUE("multi-navy"),
+    VALUE("multi-grey"),
+    VALUE("multi-red")
+  ],
+  gradation: [
+    V3("gradation-1"),
+    V3("gradation-2"),
+    V3("gradation-3"),
+    V3("gradation-4"),
+    V3("gradation-5"),
+    VALUE("gradation-6")
+  ]
+};
 function pick(names, palettes, palette, index, colors) {
   if (palette === "custom") {
     if (!colors?.length) return palettes.default[0];
@@ -19702,6 +19930,9 @@ function paletteColor(palette, index, colors) {
 function linePointDimmedColor(palette, index, colors) {
   return pick(DIMMED_COLORS, DIMMED_PALETTES, palette, index, colors);
 }
+function dataValueColor(palette, index, colors) {
+  return pick(DATA_VALUE_COLORS, DATA_VALUE_PALETTES, palette, index, colors);
+}
 function useElementSize() {
   const ref = useRef(null);
   const [size, setSize] = useState({ width: 0, height: 0 });
@@ -19835,7 +20066,6 @@ var BAR_OPACITY_HOVER = 1;
 var BAR_DATA_LABEL_COLOR = "var(--cmp-chart-dataLabel-color-default)";
 var BAR_DATA_LABEL_TYPO = "typo-body-sm-medium";
 var BAR_DATA_LABEL_TYPO_HOVER = "typo-body-md-bold";
-var BAR_HOVER_TRANSITION = "transition-opacity duration-200 ease-out motion-reduce:transition-none";
 function bandLayout(size, categoryCount, seriesCount, barSizeMax = BAR_SIZE_MAX) {
   const categories = Math.max(1, categoryCount);
   const series = Math.max(1, seriesCount);
@@ -20102,7 +20332,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
             "path",
             {
               d: barPath(x, y, width, barHeight, direction, negative),
-              className: BAR_HOVER_TRANSITION,
+              className: CHART_DIM_OPACITY_TRANSITION,
               style: {
                 fill: colorAt(seriesIndex, categoryIndex),
                 opacity,
@@ -20119,7 +20349,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
               y: labelY,
               className: cn(
                 hoveredCategory === categoryIndex ? BAR_DATA_LABEL_TYPO_HOVER : BAR_DATA_LABEL_TYPO,
-                BAR_HOVER_TRANSITION
+                CHART_DIM_OPACITY_TRANSITION
               ),
               style: {
                 fill: BAR_DATA_LABEL_COLOR,
@@ -20200,7 +20430,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
               width: box3.width,
               height: box3.height,
               clipPath: `url(#${segment.value < 0 ? negativeClip : positiveClip})`,
-              className: BAR_HOVER_TRANSITION,
+              className: CHART_DIM_OPACITY_TRANSITION,
               style: {
                 // 조각과 라벨에 따로 건다 — 묶음(<g>)에 걸면 호버가 없을 때의
                 // 기본 흐림까지 합계 라벨에 묻어 숫자가 늘 옅어진다.
@@ -20225,7 +20455,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
             y: labelY,
             className: cn(
               hoveredCategory === categoryIndex ? BAR_DATA_LABEL_TYPO_HOVER : BAR_DATA_LABEL_TYPO,
-              BAR_HOVER_TRANSITION
+              CHART_DIM_OPACITY_TRANSITION
             ),
             style: {
               fill: BAR_DATA_LABEL_COLOR,
@@ -20403,6 +20633,7 @@ var SBarChart = /* @__PURE__ */ forwardRef(function SBarChart2({
 // src/components/SLineChart/lineChart.config.ts
 var LINE_WIDTH = "var(--cmp-chart-line-width)";
 var LINE_OPACITY = "var(--cmp-chart-line-opacity)";
+var LINE_DASH = "11 11";
 var POINT_RADIUS = 5;
 var POINT_HOVER_RADIUS = 6;
 var POINT_HALO_RADIUS = 12;
@@ -20495,6 +20726,7 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
   title,
   unit,
   curve = "linear",
+  lineStyle = "solid",
   area = false,
   stacked = false,
   palette = "default",
@@ -20703,14 +20935,15 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
             style: {
               stroke: colorAt(seriesIndex),
               strokeWidth: LINE_WIDTH,
-              strokeOpacity: LINE_OPACITY
+              strokeOpacity: LINE_OPACITY,
+              strokeDasharray: lineStyle === "dashed" ? LINE_DASH : void 0
             }
           },
           `line-${seriesIndex}-${runIndex}`
         );
       })
     ),
-    [plotted, smooth, colorAt]
+    [plotted, smooth, colorAt, lineStyle]
   );
   const { pointHalos, pointDots } = useMemo(() => {
     const halos = [];
@@ -20745,6 +20978,7 @@ var SLineChart = /* @__PURE__ */ forwardRef(function SLineChart2({
               cx: point.x,
               cy: point.y,
               r: hovered ? POINT_HOVER_RADIUS : POINT_RADIUS,
+              className: CHART_DIM_COLOR_TRANSITION,
               style: {
                 fill: dimmed ? dimmedColorAt(seriesIndex) : color,
                 cursor: onPointClick ? "pointer" : void 0
@@ -20990,6 +21224,7 @@ var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
   showValueLabel = false,
   showLegend = true,
   legendPosition = "top",
+  legendVariant = "simple",
   showTooltip = true,
   formatValue = defaultFormat3,
   onSliceClick,
@@ -21017,7 +21252,8 @@ var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
         ratio,
         start,
         end: angle,
-        color: paletteColor(effective, slice2.index, colors)
+        color: paletteColor(effective, slice2.index, colors),
+        valueColor: dataValueColor(effective, slice2.index, colors)
       };
     });
     return list;
@@ -21030,8 +21266,14 @@ var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
   const legend = showLegend ? /* @__PURE__ */ jsx(
     ChartLegend,
     {
-      items: arcs.map((arc2) => ({ name: arc2.name, color: arc2.color })),
-      activeIndex: hoveredArc ? arcs.indexOf(hoveredArc) : null
+      items: arcs.map((arc2) => ({
+        name: arc2.name,
+        color: arc2.color,
+        value: legendVariant === "default" ? formatValue(arc2.value) : void 0,
+        valueColor: arc2.valueColor
+      })),
+      activeIndex: hoveredArc ? arcs.indexOf(hoveredArc) : null,
+      variant: legendVariant
     }
   ) : null;
   const tooltipAnchor = useMemo(() => {
@@ -21091,7 +21333,7 @@ var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
                   {
                     d: slice(arc2),
                     fillRule: "evenodd",
-                    className: "transition-opacity duration-200 ease-out motion-reduce:transition-none",
+                    className: CHART_DIM_OPACITY_TRANSITION,
                     style: {
                       fill: arc2.color,
                       opacity,
@@ -21124,7 +21366,10 @@ var RadialChart = /* @__PURE__ */ forwardRef(function RadialChart2({
                     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",
+                    className: cn(
+                      "pointer-events-none typo-body-sm-bold",
+                      CHART_DIM_OPACITY_TRANSITION
+                    ),
                     style: {
                       fill: "var(--sys-color-fg-inverse)",
                       opacity: hovered != null && hovered !== arc2.index ? OPACITY_DIMMED : void 0
@@ -21190,6 +21435,7 @@ var SDonutChart = /* @__PURE__ */ forwardRef(function SDonutChart2({
   showValueLabel = false,
   showLegend = true,
   legendPosition = "top",
+  legendVariant = "simple",
   showTooltip = true,
   ...props
 }, ref) {
@@ -21202,6 +21448,7 @@ var SDonutChart = /* @__PURE__ */ forwardRef(function SDonutChart2({
       showValueLabel,
       showLegend,
       legendPosition,
+      legendVariant,
       showTooltip,
       innerRatio: DONUT_INNER_RATIO,
       kind: "\uB3C4\uB11B \uADF8\uB798\uD504"
@@ -23139,10 +23386,10 @@ function EditorToolbarBar({
             },
             item4
           );
-        return /* @__PURE__ */ jsxs(RPopover12.Root, { open: linkOpen, onOpenChange: setLinkOpen, children: [
-          /* @__PURE__ */ jsx(RPopover12.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsx(ToolbarButton, { label: "\uB9C1\uD06C", active: state2.link, disabled: off, children: /* @__PURE__ */ jsx(IconLink, { size: ICON_SIZE }) }) }),
-          /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-            RPopover12.Content,
+        return /* @__PURE__ */ jsxs(RPopover13.Root, { open: linkOpen, onOpenChange: setLinkOpen, children: [
+          /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsx(ToolbarButton, { label: "\uB9C1\uD06C", active: state2.link, disabled: off, children: /* @__PURE__ */ jsx(IconLink, { size: ICON_SIZE }) }) }),
+          /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+            RPopover13.Content,
             {
               sideOffset: 4,
               align: "start",
@@ -24535,8 +24782,8 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
           })(),
           hasRightActions && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(Divider, { inset: true }),
-            hasAddButton && /* @__PURE__ */ jsxs(RPopover12.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
-              /* @__PURE__ */ jsx(RPopover12.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            hasAddButton && /* @__PURE__ */ jsxs(RPopover13.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
+              /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
@@ -24561,8 +24808,8 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-                RPopover12.Content,
+              /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+                RPopover13.Content,
                 {
                   side: "bottom",
                   align: "start",
@@ -24597,17 +24844,17 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(RPopover12.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
+        /* @__PURE__ */ jsxs(RPopover13.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
           /* @__PURE__ */ jsx(
-            RPopover12.Anchor,
+            RPopover13.Anchor,
             {
               virtualRef: {
                 current: openKey ? triggerRefs.current.get(openKey) : null
               }
             }
           ),
-          /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-            RPopover12.Content,
+          /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+            RPopover13.Content,
             {
               side: "bottom",
               align: "start",
@@ -25200,8 +25447,8 @@ function InlineDatePresetFilter({
     applied && (rangeValue ? (
       // 뱃지 모양은 그대로 두고, 눌렀을 때 캘린더가 열려 기간을 직접 다시 고를 수 있게 한다.
       // 직접 고르면 프리셋 선택은 해제된다.
-      /* @__PURE__ */ jsxs(RPopover12.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
-        /* @__PURE__ */ jsx(RPopover12.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(RPopover13.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
+        /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -25210,8 +25457,8 @@ function InlineDatePresetFilter({
             children: badge
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover12.Content,
+        /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover13.Content,
           {
             side: "bottom",
             align: "start",
@@ -26673,8 +26920,8 @@ function STimePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxs(RPopover12.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsx(RPopover12.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(RPopover13.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
             ref: triggerRef,
@@ -26734,8 +26981,8 @@ function STimePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover12.Content,
+        /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover13.Content,
           {
             side: "bottom",
             align: "start",
@@ -27143,8 +27390,8 @@ function STimeRangePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxs(RPopover12.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsx(RPopover12.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(RPopover13.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsx(RPopover13.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "div",
           {
             ref: triggerRef,
@@ -27204,8 +27451,8 @@ function STimeRangePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(RPopover12.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
-          RPopover12.Content,
+        /* @__PURE__ */ jsx(RPopover13.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover13.Content,
           {
             side: "bottom",
             align: "start",
@@ -27232,6 +27479,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, CONTEXT_ALERT_DEFAULT_ICON, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, 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, PAGE_PADDINGS, 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, SContextAlert, 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 };
+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, CONTEXT_ALERT_DEFAULT_ICON, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, 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, PAGE_PADDINGS, 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, SContextAlert, 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, 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