sellmate-design-system-react 2.1.2 → 3.0.0

package/dist/index.cjs

@@ -6,10 +6,10 @@ var tailwindMerge = require('tailwind-merge');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
+var RPopover2 = require('@radix-ui/react-popover');
 var client = require('react-dom/client');
 var RTooltip = require('@radix-ui/react-tooltip');
 var RDropdown = require('@radix-ui/react-dropdown-menu');
-var RPopover2 = require('@radix-ui/react-popover');
 var RSwitch = require('@radix-ui/react-switch');
 var RDialog = require('@radix-ui/react-dialog');
 var RCheckbox = require('@radix-ui/react-checkbox');
@@ -33,9 +33,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var RPopover2__namespace = /*#__PURE__*/_interopNamespace(RPopover2);
 var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
 var RDropdown__namespace = /*#__PURE__*/_interopNamespace(RDropdown);
-var RPopover2__namespace = /*#__PURE__*/_interopNamespace(RPopover2);
 var RSwitch__namespace = /*#__PURE__*/_interopNamespace(RSwitch);
 var RDialog__namespace = /*#__PURE__*/_interopNamespace(RDialog);
 var RCheckbox__namespace = /*#__PURE__*/_interopNamespace(RCheckbox);
@@ -2920,6 +2920,227 @@ var SCard = react.forwardRef(function SCard2({ bordered = false, className, chil
     }
   );
 });
+var setRefs = (refs, value) => {
+  refs.forEach((ref) => {
+    if (typeof ref === "function") {
+      ref(value);
+      return;
+    }
+    if (ref) {
+      ref.current = value;
+    }
+  });
+};
+function renderSlot(slot, state2) {
+  return typeof slot === "function" ? slot(state2) : slot;
+}
+var SDraggableItemView = react.forwardRef(
+  function SDraggableItemView2({
+    title,
+    trailing,
+    accentStripe,
+    bordered,
+    selected,
+    dense,
+    dragging,
+    disabled,
+    hovered,
+    dragHandleProps,
+    onDragHandleMouseDown,
+    className,
+    ...rest
+  }, ref) {
+    const renderState = { hovered, dragging, disabled };
+    const titleNode = renderSlot(title, renderState);
+    const trailingNode = renderSlot(trailing, renderState);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "aria-disabled": disabled || void 0,
+        "data-dragging": dragging || void 0,
+        className: cn(
+          "relative flex w-full items-center gap-(--cmp-listDraggableItem-gap) overflow-hidden px-(--cmp-listDraggableItem-paddingX) text-[12px] leading-[20px]",
+          disabled ? "bg-(--cmp-listDraggableItem-bg-default) font-medium text-(--sys-color-disabled-text)" : selected ? "bg-(--cmp-listDraggableItem-bg-selected) font-bold text-(--cmp-listDraggableItem-text-selected)" : "bg-(--cmp-listDraggableItem-bg-default) font-medium text-(--cmp-listDraggableItem-text-default)",
+          !disabled && !selected && !dragging && "hover:bg-(--cmp-listDraggableItem-bg-hover)",
+          dense ? "h-[32px] py-(--cmp-listDraggableItem-paddingY-dense)" : "h-[40px] py-(--cmp-listDraggableItem-paddingY-normal)",
+          bordered ? cn(
+            "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
+            !disabled && !selected && !dragging && "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
+            !disabled && selected && !dragging && "border-(--cmp-listDraggableItem-bordered-border-selected)",
+            !disabled && selected && dragging && "border-[length:var(--cmp-listDraggableItem-bordered-dragging-border-width)] border-(--cmp-listDraggableItem-bordered-dragging-border-color) bg-(--cmp-listDraggableItem-bordered-dragging-bg)"
+          ) : "border-b border-(--cmp-listDraggableItem-border-default)",
+          disabled && "cursor-not-allowed",
+          className
+        ),
+        ...rest,
+        children: [
+          accentStripe && !bordered && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listDraggableItem-accentStripe-width) bg-(--cmp-listDraggableItem-accentStripe-color)"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ...dragHandleProps,
+              role: dragHandleProps?.role ?? "button",
+              tabIndex: dragHandleProps?.tabIndex ?? (disabled ? -1 : 0),
+              "aria-label": dragHandleProps?.["aria-label"] ?? "\uB4DC\uB798\uADF8 \uD578\uB4E4",
+              "aria-disabled": disabled || void 0,
+              onMouseDown: onDragHandleMouseDown,
+              className: cn(
+                "flex size-[24px] shrink-0 select-none items-center justify-center rounded-[4px]",
+                disabled ? "cursor-not-allowed opacity-0" : "cursor-grab hover:bg-black/5 active:cursor-grabbing",
+                dragging && "bg-black/5",
+                dragHandleProps?.className
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "drag", size: 16, color: "grey_65" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 items-center gap-[8px]",
+                dragging && "opacity-(--cmp-listDraggableItem-dragging-content-opacity)"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: titleNode }),
+                trailingNode
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var SDraggableItem = react.forwardRef(
+  function SDraggableItem2({
+    title,
+    trailing,
+    accentStripe = false,
+    bordered = false,
+    selected = false,
+    dense = false,
+    disabled = false,
+    dragOverlay = true,
+    dragOverlayOpacity = 0.75,
+    dragHandleProps,
+    onDragHandleMouseDown,
+    className,
+    onMouseEnter,
+    onMouseLeave,
+    ...rest
+  }, ref) {
+    const [hovered, setHovered] = react.useState(false);
+    const [overlay, setOverlay] = react.useState(null);
+    const rootRef = react.useRef(null);
+    const overlayVisible = overlay != null;
+    const handleMouseEnter = (event) => {
+      if (!disabled) setHovered(true);
+      onMouseEnter?.(event);
+    };
+    const handleMouseLeave = (event) => {
+      setHovered(false);
+      onMouseLeave?.(event);
+    };
+    const handleDragMouseDown = (event) => {
+      if (disabled) return;
+      const rect = rootRef.current?.getBoundingClientRect();
+      if (dragOverlay && rect) {
+        setOverlay({
+          offsetX: event.clientX - rect.left,
+          offsetY: event.clientY - rect.top,
+          rect,
+          x: event.clientX,
+          y: event.clientY
+        });
+      }
+      dragHandleProps?.onMouseDown?.(event);
+      onDragHandleMouseDown?.(event);
+    };
+    react.useEffect(() => {
+      if (!overlayVisible) return void 0;
+      const handleMouseMove = (event) => {
+        setOverlay(
+          (current) => current ? {
+            ...current,
+            x: event.clientX,
+            y: event.clientY
+          } : current
+        );
+      };
+      const handleMouseUp = () => {
+        setOverlay(null);
+      };
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }, [overlayVisible]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SDraggableItemView,
+        {
+          ref: (node) => setRefs([rootRef, ref], node),
+          title,
+          trailing,
+          accentStripe,
+          bordered,
+          selected,
+          dense,
+          dragging: overlayVisible,
+          disabled,
+          hovered,
+          dragHandleProps,
+          onDragHandleMouseDown: handleDragMouseDown,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          className,
+          ...rest
+        }
+      ),
+      overlay && typeof document !== "undefined" && reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-none fixed z-[999999]",
+            style: {
+              left: overlay.x - overlay.offsetX,
+              opacity: dragOverlayOpacity,
+              top: overlay.y - overlay.offsetY,
+              width: overlay.rect.width
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SDraggableItemView,
+              {
+                title,
+                trailing,
+                accentStripe,
+                bordered,
+                selected,
+                dense,
+                dragging: true,
+                disabled,
+                hovered: true,
+                dragHandleProps,
+                className
+              }
+            )
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+);
+SDraggableItem.displayName = "SDraggableItem";
 var SExpansionItem = react.forwardRef(
   function SExpansionItem2({
     title,
@@ -2946,7 +3167,7 @@ var SExpansionItem = react.forwardRef(
       {
         ref,
         className: cn(
-          "group/expansion-item overflow-hidden bg-[var(--cmp-listExpansionItem-title-bg-default)]",
+          "group/expansion-item overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
           // TODO: expansionItem/bordered/radius 및 border intent 토큰 생성 후 고정값을 토큰으로 교체한다.
           bordered && "rounded-[8px] border border-[#E1E1E1] hover:border-[#AAAAAA] [&:has(>button:hover)]:border-[#AAAAAA]",
           bordered && isExpanded && "!border-[#93C4FF]",
@@ -2968,10 +3189,10 @@ var SExpansionItem = react.forwardRef(
                 onToggle?.(next, event);
               },
               className: cn(
-                "flex w-full items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-[var(--cmp-listExpansionItem-title-text-default)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--sys-color-border-accent)] disabled:cursor-not-allowed disabled:text-[var(--sys-color-disabled-text)] cursor-pointer",
+                "flex w-full cursor-pointer items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-(--cmp-listExpansionItem-title-text-default) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent) disabled:cursor-not-allowed disabled:text-(--sys-color-disabled-text)",
                 isExpanded && "border-b border-(--cmp-listExpansionItem-title-border)",
                 !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
-                dense ? "min-h-8 py-(--cmp-listExpansionItem-title-paddingY-dense)" : "min-h-10 py-(--cmp-listExpansionItem-title-paddingY-normal)",
+                dense ? "h-[32px] py-(--cmp-listExpansionItem-title-paddingY-dense)" : "h-[40px] py-(--cmp-listExpansionItem-title-paddingY-normal)",
                 "gap-(--cmp-listExpansionItem-title-gap)",
                 "pr-(--cmp-listExpansionItem-title-paddingX)",
                 depth === 2 ? "pl-[calc(var(--cmp-listExpansionItem-title-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-listExpansionItem-title-paddingX)+64px)]" : "pl-(--cmp-listExpansionItem-title-paddingX)",
@@ -2985,7 +3206,7 @@ var SExpansionItem = react.forwardRef(
                       "flex transition-transform duration-200 ease-out motion-reduce:transition-none",
                       isExpanded && "rotate-180"
                     ),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "caretDown", size: 12 })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "caretDown", size: 12, color: "var(--sys-color-fg-quaternary)" })
                   }
                 ),
                 leadingNode,
@@ -3000,19 +3221,10 @@ var SExpansionItem = react.forwardRef(
               id,
               "aria-hidden": !isExpanded,
               className: cn(
-                "grid overflow-hidden bg-[var(--cmp-listExpansionItem-body-bg)] transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+                "grid overflow-hidden bg-(--cmp-listExpansionItem-body-bg) transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
                 isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "min-h-0 overflow-hidden",
-                    bodyPadding && isExpanded && "p-(--cmp-listExpansionItem-body-padding)"
-                  ),
-                  children
-                }
-              )
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bodyPadding && "p-(--cmp-listExpansionItem-body-padding)"), children }) })
             }
           )
         ]
@@ -3020,69 +3232,182 @@ var SExpansionItem = react.forwardRef(
     );
   }
 );
-var SDivider = react.forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
+var SList = react.forwardRef(function SList2({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "hr",
+    "div",
     {
       ref,
-      "aria-orientation": vertical ? "vertical" : "horizontal",
       className: cn(
-        "shrink-0 border-0",
-        vertical ? "inline-block h-auto w-px self-stretch" : "block h-px w-full",
+        useGap && "flex flex-col gap-(--cmp-list-group-gap)",
+        usePadding && "p-(--cmp-list-group-padding)",
         className
       ),
-      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
-      ...rest
+      ...rest,
+      children
     }
   );
 });
-
-// src/lib/scrollbar.ts
-var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
-var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
-var SCROLLBAR_HIDDEN_CLASS = "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
-var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-corner]:bg-[var(--color-grey-10)]";
-var SCROLLBAR_TRACK_BG_WHITE_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] [&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)] [&::-webkit-scrollbar-corner]:bg-[var(--color-white)]";
-var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-corner]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-corner]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
-var AXIS_CLASS = {
-  vertical: "overflow-x-hidden overflow-y-auto",
-  horizontal: "overflow-x-auto overflow-y-hidden",
-  both: "overflow-auto"
-};
-var SScrollArea = react.forwardRef(function SScrollArea2({
-  axis = "both",
-  background = false,
+SList.displayName = "SList";
+var SListItem = react.forwardRef(function SListItem2({
+  title,
+  depth = 1,
+  leading,
+  trailing,
   bordered = false,
-  maxHeight,
-  maxWidth,
+  accentStripe = false,
+  dense = false,
+  disabled = false,
   className,
-  style,
-  children,
+  onMouseEnter,
+  onMouseLeave,
   ...rest
 }, ref) {
-  const mergedStyle = { ...style };
-  if (maxHeight) mergedStyle.maxHeight = maxHeight;
-  if (maxWidth) mergedStyle.maxWidth = maxWidth;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const [hovered, setHovered] = react.useState(false);
+  const renderState = { hovered, disabled };
+  const titleNode = typeof title === "function" ? title(renderState) : title;
+  const leadingNode = typeof leading === "function" ? leading(renderState) : leading;
+  const trailingNode = typeof trailing === "function" ? trailing(renderState) : trailing;
+  const handleMouseEnter = (event) => {
+    if (!disabled) setHovered(true);
+    onMouseEnter?.(event);
+  };
+  const handleMouseLeave = (event) => {
+    setHovered(false);
+    onMouseLeave?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
+      "aria-disabled": disabled || void 0,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
       className: cn(
-        AXIS_CLASS[axis],
-        SCROLLBAR_CLASS,
-        background && SCROLLBAR_TRACK_BG_CLASS,
-        bordered && SCROLLBAR_TRACK_BORDER_CLASS,
+        "group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-[14px] font-bold leading-[24px] text-(--cmp-listItem-text-default)",
+        disabled ? "pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)" : "hover:bg-(--cmp-listItem-bg-hover)",
+        dense ? "h-[32px] py-(--cmp-listItem-paddingY-dense)" : "h-[40px] py-(--cmp-listItem-paddingY-normal)",
+        "gap-(--cmp-listItem-gap)",
+        "pr-(--cmp-listItem-paddingX)",
+        depth === 2 ? "pl-[calc(var(--cmp-listItem-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-listItem-paddingX)+64px)]" : "pl-(--cmp-listItem-paddingX)",
+        bordered ? "overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default) hover:border-(--cmp-listItem-bordered-border-hover)" : "border-b border-(--cmp-listItem-border-default)",
         className
       ),
-      style: mergedStyle,
       ...rest,
-      children
+      children: [
+        accentStripe && !bordered && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)"
+          }
+        ),
+        leadingNode,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: titleNode }) }),
+        trailingNode
+      ]
     }
   );
 });
+SListItem.displayName = "SListItem";
 
-// src/components/SScrollArea/scrollArea.config.ts
-var SCROLL_AREA_AXES = ["vertical", "horizontal", "both"];
+// 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 = react.createContext(null);
+var InsideModalContext = react.createContext(false);
+var PortalContainerProvider = PortalContainerContext.Provider;
+var InsideModalProvider = InsideModalContext.Provider;
+function usePortalContainer() {
+  return react.useContext(PortalContainerContext) ?? void 0;
+}
+function useInsideModal() {
+  return react.useContext(InsideModalContext);
+}
+
+// src/lib/sanitize-inline-html.ts
+var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
+var ALLOWED_ATTRS_BY_TAG = {
+  A: /* @__PURE__ */ new Set(["href", "target", "rel", "class"])
+};
+var COMMON_ALLOWED_ATTRS = /* @__PURE__ */ new Set(["class"]);
+var SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
+var DROP_CONTENT_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "IFRAME",
+  "OBJECT",
+  "EMBED",
+  "META",
+  "LINK",
+  "BASE",
+  "NOSCRIPT",
+  // SVG/MATH 는 foreign-content 파싱 모드로 전환되어 재직렬화 시 다른 트리로
+  // 재파싱될 수 있다(mXSS 벡터). 인라인 라벨에 필요 없으므로 통째로 제거한다.
+  "SVG",
+  "MATH",
+  "TEMPLATE"
+]);
+var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var sanitizeNode = (node) => {
+  if (node.nodeType === Node.COMMENT_NODE) {
+    node.remove();
+    return;
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return;
+  const element = node;
+  const tagName = element.tagName;
+  if (DROP_CONTENT_TAGS.has(tagName)) {
+    element.remove();
+    return;
+  }
+  Array.from(element.childNodes).forEach((child) => sanitizeNode(child));
+  if (ALLOWED_INLINE_TAGS.has(tagName)) {
+    if (element.hasAttribute("className")) {
+      const val = element.getAttribute("className");
+      element.removeAttribute("className");
+      if (!element.hasAttribute("class")) element.setAttribute("class", val);
+    }
+    const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
+    Array.from(element.attributes).forEach((attr) => {
+      if (!allowedAttrs.has(attr.name)) element.removeAttribute(attr.name);
+    });
+    if (tagName === "A") {
+      const href = element.getAttribute("href");
+      if (href !== null && href !== "" && !SAFE_HREF_RE.test(href)) element.removeAttribute("href");
+      if (element.hasAttribute("target")) {
+        element.setAttribute("rel", "noopener noreferrer");
+      }
+    }
+    return;
+  }
+  const parent = element.parentNode;
+  if (parent == null) return;
+  while (element.firstChild) parent.insertBefore(element.firstChild, element);
+  parent.removeChild(element);
+};
+var sanitizeInlineHtml = (value) => {
+  if (typeof document === "undefined") return escapeHtml(value);
+  const template = document.createElement("template");
+  template.innerHTML = value;
+  Array.from(template.content.childNodes).forEach((child) => sanitizeNode(child));
+  return template.innerHTML;
+};
 
 // src/components/STag/tag.config.ts
 var TAG_SHAPES = ["square", "pill"];
@@ -3176,9 +3501,418 @@ var STag = react.forwardRef(function STag2({
     }
   );
 });
-
-// src/components/SButton/button.config.ts
-var BUTTON_COLORS = ["primary", "secondary", "neutral", "danger"];
+var SIZE = {
+  xxs: { icon: 12, radius: "sm" },
+  xs: { icon: 16, radius: "sm" },
+  sm: { icon: 20, radius: "sm" },
+  md: { icon: 24, radius: "md" },
+  lg: { icon: 32, radius: "md" }
+};
+var TOOLTIP_HIDE_DELAY_MS = 100;
+function SGhostButton({
+  icon,
+  size = "sm",
+  intent = "default",
+  ariaLabel = "",
+  ariaPressed,
+  tooltipText,
+  disabled = false,
+  onClick,
+  anchorClassName,
+  anchorStyle,
+  className,
+  style
+}) {
+  const portalContainer = usePortalContainer();
+  const [open, setOpen] = react.useState(false);
+  const hideTimer = react.useRef(void 0);
+  const cancelHide = () => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = void 0;
+    }
+  };
+  const openNow = () => {
+    cancelHide();
+    setOpen(true);
+  };
+  const startHide = () => {
+    cancelHide();
+    hideTimer.current = setTimeout(() => setOpen(false), TOOLTIP_HIDE_DELAY_MS);
+  };
+  const s = SIZE[size];
+  const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const text = (tooltipText ?? "").trim();
+  const hasTooltip = text !== "";
+  const btn = /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      "aria-disabled": disabled ? "true" : void 0,
+      "aria-label": ariaLabel.trim() || void 0,
+      "aria-pressed": ariaPressed,
+      tabIndex: disabled ? -1 : void 0,
+      onClick: (e) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      },
+      className: cn(
+        "group/ghost-button relative box-border inline-flex items-center justify-center border-none bg-transparent p-0 transition-shadow",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+        "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--cmp-ghostButton-action-hover-bg)]",
+        className
+      ),
+      style: {
+        width: `var(--cmp-ghostButton-${size}-size)`,
+        height: `var(--cmp-ghostButton-${size}-size)`,
+        borderRadius: `var(--cmp-ghostButton-radius-${s.radius})`,
+        ...style
+      },
+      children: [
+        !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/ghost-button:opacity-5",
+            style: { background: `var(--cmp-ghostButton-${intent}-hover-bg)` }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
+      ]
+    }
+  );
+  if (!hasTooltip) return btn;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
+        onMouseEnter: openNow,
+        onMouseLeave: startHide,
+        onFocus: openNow,
+        onBlur: startHide,
+        children: btn
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RPopover2__namespace.Content,
+      {
+        side: "top",
+        sideOffset: 4,
+        className: cn("z-50", FLOATING_SLIDE_ANIM),
+        "aria-hidden": true,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onMouseEnter: cancelHide,
+        onMouseLeave: startHide,
+        children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text })
+      }
+    ) })
+  ] });
+}
+var HIDE_DELAY_MS = 100;
+function useBody(content, message = []) {
+  if (content != null) return content;
+  if (message.length === 0) return null;
+  const singleLine = message.length === 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: singleLine ? "leading-[24px]" : void 0,
+      dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(line) }
+    },
+    i
+  )) });
+}
+var STooltip = react.forwardRef(function STooltip2({
+  content,
+  message = [],
+  trigger = "hover",
+  placement = "top",
+  tooltipType = "default",
+  useClose = false,
+  disabled = false,
+  children,
+  icon = "helpOutline",
+  iconSize = 12,
+  color = "#01BB4B",
+  ariaLabel,
+  className,
+  triggerClassName,
+  style
+}, ref) {
+  const portalContainer = usePortalContainer();
+  const [open, setOpen] = react.useState(false);
+  const hideTimer = react.useRef(void 0);
+  const cancelHide = () => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = void 0;
+    }
+  };
+  const openNow = () => {
+    cancelHide();
+    setOpen(true);
+  };
+  const startHide = () => {
+    if (useClose) return;
+    cancelHide();
+    hideTimer.current = setTimeout(() => setOpen(false), HIDE_DELAY_MS);
+  };
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      show: () => {
+        cancelHide();
+        setOpen(true);
+      },
+      hide: () => {
+        cancelHide();
+        setOpen(false);
+      }
+    }),
+    []
+  );
+  const body = useBody(content, message);
+  const bg = `var(--cmp-tooltip-${tooltipType}-bg)`;
+  const fg = `var(--cmp-tooltip-${tooltipType}-content)`;
+  const triggerNode = children ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-flex cursor-pointer", triggerClassName), "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: iconSize, color }) });
+  if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: triggerNode });
+  const isHover = trigger === "hover";
+  const contentClass = cn(
+    "z-50 w-fit whitespace-nowrap rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-normal-sm",
+    FLOATING_SLIDE_ANIM,
+    className
+  );
+  const contentStyle = {
+    background: bg,
+    color: fg,
+    fontWeight: tooltipType === "default" ? 500 : 700,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
+    isHover ? (
+      // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "inline-flex",
+          onMouseEnter: openNow,
+          onMouseLeave: startHide,
+          onFocus: openNow,
+          onBlur: startHide,
+          children: triggerNode
+        }
+      ) })
+    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover2__namespace.Content,
+      {
+        side: placement,
+        sideOffset: 8,
+        className: contentClass,
+        style: contentStyle,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (e) => {
+          if (useClose) e.preventDefault();
+        },
+        onEscapeKeyDown: (e) => {
+          if (useClose) e.preventDefault();
+        },
+        onMouseEnter: isHover ? cancelHide : void 0,
+        onMouseLeave: isHover ? startHide : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[12px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: body }),
+            useClose && /* @__PURE__ */ jsxRuntime.jsx(
+              SGhostButton,
+              {
+                icon: "close",
+                size: "xs",
+                intent: tooltipType === "default" ? "inverse" : "default",
+                ariaLabel: "\uB2EB\uAE30",
+                className: "shrink-0",
+                onClick: () => {
+                  cancelHide();
+                  setOpen(false);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+        ]
+      }
+    ) })
+  ] });
+});
+STooltip.displayName = "STooltip";
+var topBorderColorClass = {
+  default: "bg-(--cmp-sectionHeaderCard-topBorder-color-default)",
+  accent: "bg-(--cmp-sectionHeaderCard-topBorder-color-accent)"
+};
+var SSectionHeaderCardBody = react.forwardRef(
+  function SSectionHeaderCardBody2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, ...rest, children });
+  }
+);
+var SSectionHeaderCardHeader = react.forwardRef(
+  function SSectionHeaderCardHeader2({
+    title,
+    marker = false,
+    required = false,
+    helpText,
+    subtitle,
+    slot,
+    thickness = false,
+    className,
+    ...rest
+  }, ref) {
+    const hasHelp = helpText != null && helpText.length > 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      thickness && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "h-(--cmp-sectionHeaderCard-topBorder-thickness) w-full shrink-0",
+            topBorderColorClass[thickness]
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: cn(
+            "box-border flex h-[40px] w-full shrink-0 items-center gap-[8px] overflow-hidden border-b border-(--sys-color-border-default) bg-(--sys-color-bg-frame) px-[16px] py-[4px]",
+            className
+          ),
+          ...rest,
+          children: [
+            marker && /* @__PURE__ */ jsxRuntime.jsx(SBadge, { color: "darkblue", className: "shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 shrink-0 items-center gap-[8px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-[12px] font-bold leading-[20px] text-(--sys-color-fg-brand)", children: title }),
+              required && /* @__PURE__ */ jsxRuntime.jsx(
+                SIcon,
+                {
+                  name: "star",
+                  size: 16,
+                  color: "var(--sys-color-fg-accent)",
+                  className: "shrink-0"
+                }
+              ),
+              hasHelp && /* @__PURE__ */ jsxRuntime.jsx(
+                STooltip,
+                {
+                  trigger: "hover",
+                  icon: "helpOutline",
+                  iconSize: 16,
+                  color: "var(--sys-color-fg-success)",
+                  message: helpText,
+                  triggerClassName: "shrink-0 rounded-[4px]"
+                }
+              )
+            ] }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-[12px] font-normal leading-[20px] text-(--sys-color-fg-secondary)", children: subtitle }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex min-h-6 min-w-0 flex-1 items-center justify-end", children: slot })
+          ]
+        }
+      )
+    ] });
+  }
+);
+var SSectionHeaderCardRoot = react.forwardRef(
+  function SSectionHeaderCard({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "box-border flex w-full flex-col items-stretch overflow-hidden rounded-[8px] border border-(--sys-color-border-default) bg-(--sys-color-bg-frame)",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var SSectionHeaderCard2 = Object.assign(SSectionHeaderCardRoot, {
+  Header: SSectionHeaderCardHeader,
+  Body: SSectionHeaderCardBody
+});
+SSectionHeaderCardRoot.displayName = "SSectionHeaderCard";
+SSectionHeaderCardHeader.displayName = "SSectionHeaderCard.Header";
+SSectionHeaderCardBody.displayName = "SSectionHeaderCard.Body";
+var SDivider = react.forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      ref,
+      "aria-orientation": vertical ? "vertical" : "horizontal",
+      className: cn(
+        "shrink-0 border-0",
+        vertical ? "inline-block h-auto w-px self-stretch" : "block h-px w-full",
+        className
+      ),
+      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
+      ...rest
+    }
+  );
+});
+
+// src/lib/scrollbar.ts
+var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
+var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
+var SCROLLBAR_HIDDEN_CLASS = "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
+var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-corner]:bg-[var(--color-grey-10)]";
+var SCROLLBAR_TRACK_BG_WHITE_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-white)] [&::-webkit-scrollbar]:bg-[var(--color-white)] [&::-webkit-scrollbar-track]:bg-[var(--color-white)] [&::-webkit-scrollbar-corner]:bg-[var(--color-white)]";
+var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-corner]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-corner]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
+var AXIS_CLASS = {
+  vertical: "overflow-x-hidden overflow-y-auto",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto"
+};
+var SScrollArea = react.forwardRef(function SScrollArea2({
+  axis = "both",
+  background = false,
+  bordered = false,
+  maxHeight,
+  maxWidth,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const mergedStyle = { ...style };
+  if (maxHeight) mergedStyle.maxHeight = maxHeight;
+  if (maxWidth) mergedStyle.maxWidth = maxWidth;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        AXIS_CLASS[axis],
+        SCROLLBAR_CLASS,
+        background && SCROLLBAR_TRACK_BG_CLASS,
+        bordered && SCROLLBAR_TRACK_BORDER_CLASS,
+        className
+      ),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+});
+
+// src/components/SScrollArea/scrollArea.config.ts
+var SCROLL_AREA_AXES = ["vertical", "horizontal", "both"];
+
+// src/components/SButton/button.config.ts
+var BUTTON_COLORS = ["primary", "secondary", "neutral", "danger"];
 var BUTTON_SIZES = ["xs", "sm", "md", "lg"];
 var V = (path) => `var(--cmp-button-${path})`;
 function buttonPreset(color, outline) {
@@ -3360,7 +4094,13 @@ function renderItems(message, depth = 1) {
           className: cn("flex items-start", isDepth2 && "pl-[32px]"),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[24px] shrink-0 text-center", "aria-hidden": true, children: isDepth2 ? "\u2022" : "-" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 min-w-0 flex-1 break-words", children: m })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "m-0 min-w-0 flex-1 break-words",
+                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m) }
+              }
+            )
           ]
         },
         `${depth}-${i}-${out.length}`
@@ -3663,36 +4403,6 @@ var loading = {
     setState({ open: false });
   }
 };
-
-// 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 = react.createContext(null);
-var InsideModalContext = react.createContext(false);
-var PortalContainerProvider = PortalContainerContext.Provider;
-var InsideModalProvider = InsideModalContext.Provider;
-function usePortalContainer() {
-  return react.useContext(PortalContainerContext) ?? void 0;
-}
-function useInsideModal() {
-  return react.useContext(InsideModalContext);
-}
 var SIZE_CONFIG = {
   sm: {
     gap: 4,
@@ -3735,127 +4445,58 @@ var STextLink = react.forwardRef(function STextLink2({
   const handle = () => {
     if (!disabled) onClick?.();
   };
-  const portalContainer = usePortalContainer();
-  const link = /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      ref,
-      role: "button",
-      tabIndex: disabled ? -1 : 0,
-      onClick: handle,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handle();
-        }
-      },
-      className: cn(
-        "inline-flex cursor-pointer items-center",
-        underline ? s.underlineTypo : s.typo,
-        !disabled && "hover:underline",
-        disabled && "cursor-not-allowed",
-        className
-      ),
-      style: { gap: s.gap, color: contentColor, ...style },
-      ...rest,
-      children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: resolvedIconColor }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: cn(labelClass),
-            style: disabled ? { color: "var(--cmp-textLink-content-disabled)" } : void 0,
-            children: label || children
-          }
-        ),
-        rightArrow !== "none" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex h-[16px] w-[16px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-          SIcon,
-          {
-            name: rightArrow === "chevron" ? "chevronRight" : "caretRight",
-            size: 12,
-            color: disabled ? "var(--cmp-textLink-icon-disabled)" : "var(--color-grey-65)"
-          }
-        ) })
-      ]
-    }
-  );
-  const text = (tooltipText ?? "").trim();
-  if (text === "") return link;
-  return /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(RTooltip__namespace.Root, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Trigger, { asChild: true, children: link }),
-    /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Content, { side: "top", sideOffset: 4, className: cn("z-50", FLOATING_SLIDE_ANIM), children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text }) }) })
-  ] }) });
-});
-
-// src/lib/sanitize-inline-html.ts
-var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
-var ALLOWED_ATTRS_BY_TAG = {
-  A: /* @__PURE__ */ new Set(["href", "target", "rel", "class"])
-};
-var COMMON_ALLOWED_ATTRS = /* @__PURE__ */ new Set(["class"]);
-var SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
-var DROP_CONTENT_TAGS = /* @__PURE__ */ new Set([
-  "SCRIPT",
-  "STYLE",
-  "IFRAME",
-  "OBJECT",
-  "EMBED",
-  "META",
-  "LINK",
-  "BASE",
-  "NOSCRIPT",
-  // SVG/MATH 는 foreign-content 파싱 모드로 전환되어 재직렬화 시 다른 트리로
-  // 재파싱될 수 있다(mXSS 벡터). 인라인 라벨에 필요 없으므로 통째로 제거한다.
-  "SVG",
-  "MATH",
-  "TEMPLATE"
-]);
-var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-var sanitizeNode = (node) => {
-  if (node.nodeType === Node.COMMENT_NODE) {
-    node.remove();
-    return;
-  }
-  if (node.nodeType !== Node.ELEMENT_NODE) return;
-  const element = node;
-  const tagName = element.tagName;
-  if (DROP_CONTENT_TAGS.has(tagName)) {
-    element.remove();
-    return;
-  }
-  Array.from(element.childNodes).forEach((child) => sanitizeNode(child));
-  if (ALLOWED_INLINE_TAGS.has(tagName)) {
-    if (element.hasAttribute("className")) {
-      const val = element.getAttribute("className");
-      element.removeAttribute("className");
-      if (!element.hasAttribute("class")) element.setAttribute("class", val);
-    }
-    const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
-    Array.from(element.attributes).forEach((attr) => {
-      if (!allowedAttrs.has(attr.name)) element.removeAttribute(attr.name);
-    });
-    if (tagName === "A") {
-      const href = element.getAttribute("href");
-      if (href !== null && href !== "" && !SAFE_HREF_RE.test(href)) element.removeAttribute("href");
-      if (element.hasAttribute("target")) {
-        element.setAttribute("rel", "noopener noreferrer");
-      }
+  const portalContainer = usePortalContainer();
+  const link = /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onClick: handle,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handle();
+        }
+      },
+      className: cn(
+        "inline-flex cursor-pointer items-center",
+        underline ? s.underlineTypo : s.typo,
+        !disabled && "hover:underline",
+        disabled && "cursor-not-allowed",
+        className
+      ),
+      style: { gap: s.gap, color: contentColor, ...style },
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.iconSize, color: resolvedIconColor }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(labelClass),
+            style: disabled ? { color: "var(--cmp-textLink-content-disabled)" } : void 0,
+            children: label || children
+          }
+        ),
+        rightArrow !== "none" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex h-[16px] w-[16px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          SIcon,
+          {
+            name: rightArrow === "chevron" ? "chevronRight" : "caretRight",
+            size: 12,
+            color: disabled ? "var(--cmp-textLink-icon-disabled)" : "var(--color-grey-65)"
+          }
+        ) })
+      ]
     }
-    return;
-  }
-  const parent = element.parentNode;
-  if (parent == null) return;
-  while (element.firstChild) parent.insertBefore(element.firstChild, element);
-  parent.removeChild(element);
-};
-var sanitizeInlineHtml = (value) => {
-  if (typeof document === "undefined") return escapeHtml(value);
-  const template = document.createElement("template");
-  template.innerHTML = value;
-  Array.from(template.content.childNodes).forEach((child) => sanitizeNode(child));
-  return template.innerHTML;
-};
-var SIZE = {
+  );
+  const text = (tooltipText ?? "").trim();
+  if (text === "") return link;
+  return /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(RTooltip__namespace.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Trigger, { asChild: true, children: link }),
+    /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(RTooltip__namespace.Content, { side: "top", sideOffset: 4, className: cn("z-50", FLOATING_SLIDE_ANIM), children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text }) }) })
+  ] }) });
+});
+var SIZE2 = {
   xs: { height: 24, paddingX: 8, gap: 6, arrow: 12, fontSize: 12, minWidth: 64, splitMinWidth: 72 },
   sm: {
     height: 28,
@@ -3941,7 +4582,7 @@ var SDropdownButton = react.forwardRef(
       }),
       []
     );
-    const s = SIZE[size];
+    const s = SIZE2[size];
     const p = buttonPreset(color, outline);
     const colorVars = {
       "--dd-bg": disabled ? "var(--cmp-button-bg-disabled)" : p.bg,
@@ -3995,201 +4636,88 @@ var SDropdownButton = react.forwardRef(
             ]
           },
           it.value
-        ))
-      }
-    ) });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      RDropdown__namespace.Root,
-      {
-        open,
-        onOpenChange: (o) => {
-          setOpen(o);
-          onOpenChange?.(o);
-        },
-        children: [
-          split ? /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              ref: splitWrapRef,
-              className: cn("inline-flex items-stretch", className),
-              style: { minWidth: s.splitMinWidth, ...style },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    disabled,
-                    onClick: onLabelClick,
-                    className: cn(triggerBase, "flex-1 justify-center rounded-l-[4px] border-r-0"),
-                    style: {
-                      minHeight: s.height,
-                      padding: `0 ${s.paddingX}px`,
-                      fontSize: s.fontSize,
-                      ...colorVars
-                    },
-                    children: label
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(RDropdown__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    ref: splitToggleRef,
-                    type: "button",
-                    disabled,
-                    "aria-label": "\uBA54\uB274 \uC5F4\uAE30",
-                    className: cn(triggerBase, "justify-center rounded-r-[4px] border-l"),
-                    style: {
-                      minHeight: s.height,
-                      minWidth: s.height,
-                      borderLeftColor: disabled ? "var(--cmp-button-border-disabled)" : splitDivider(color, outline),
-                      ...colorVars
-                    },
-                    children: splitIcon
-                  }
-                ) })
-              ]
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(RDropdown__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              disabled,
-              className: cn(triggerBase, "justify-between rounded-[4px]", className),
-              style: {
-                minWidth: s.minWidth,
-                minHeight: s.height,
-                padding: `0 ${s.paddingX}px`,
-                gap: s.gap,
-                fontSize: s.fontSize,
-                ...colorVars,
-                ...style
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-center", children: label }),
-                caret
-              ]
-            }
-          ) }),
-          menu
-        ]
-      }
-    );
-  }
-);
-SDropdownButton.displayName = "SDropdownButton";
-var SIZE2 = {
-  xxs: { icon: 12, radius: "sm" },
-  xs: { icon: 16, radius: "sm" },
-  sm: { icon: 20, radius: "sm" },
-  md: { icon: 24, radius: "md" },
-  lg: { icon: 32, radius: "md" }
-};
-var TOOLTIP_HIDE_DELAY_MS = 100;
-function SGhostButton({
-  icon,
-  size = "sm",
-  intent = "default",
-  ariaLabel = "",
-  ariaPressed,
-  tooltipText,
-  disabled = false,
-  onClick,
-  anchorClassName,
-  anchorStyle,
-  className,
-  style
-}) {
-  const portalContainer = usePortalContainer();
-  const [open, setOpen] = react.useState(false);
-  const hideTimer = react.useRef(void 0);
-  const cancelHide = () => {
-    if (hideTimer.current) {
-      clearTimeout(hideTimer.current);
-      hideTimer.current = void 0;
-    }
-  };
-  const openNow = () => {
-    cancelHide();
-    setOpen(true);
-  };
-  const startHide = () => {
-    cancelHide();
-    hideTimer.current = setTimeout(() => setOpen(false), TOOLTIP_HIDE_DELAY_MS);
-  };
-  const s = SIZE2[size];
-  const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
-  const text = (tooltipText ?? "").trim();
-  const hasTooltip = text !== "";
-  const btn = /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      disabled,
-      "aria-disabled": disabled ? "true" : void 0,
-      "aria-label": ariaLabel.trim() || void 0,
-      "aria-pressed": ariaPressed,
-      tabIndex: disabled ? -1 : void 0,
-      onClick: (e) => {
-        if (disabled) {
-          e.preventDefault();
-          return;
-        }
-        onClick?.(e);
-      },
-      className: cn(
-        "group/ghost-button relative box-border inline-flex items-center justify-center border-none bg-transparent p-0 transition-shadow",
-        disabled ? "cursor-not-allowed" : "cursor-pointer",
-        "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--cmp-ghostButton-action-hover-bg)]",
-        className
-      ),
-      style: {
-        width: `var(--cmp-ghostButton-${size}-size)`,
-        height: `var(--cmp-ghostButton-${size}-size)`,
-        borderRadius: `var(--cmp-ghostButton-radius-${s.radius})`,
-        ...style
-      },
-      children: [
-        !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/ghost-button:opacity-5",
-            style: { background: `var(--cmp-ghostButton-${intent}-hover-bg)` }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: s.icon, color: contentColor })
-      ]
-    }
-  );
-  if (!hasTooltip) return btn;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn("inline-flex", anchorClassName),
-        style: anchorStyle,
-        onMouseEnter: openNow,
-        onMouseLeave: startHide,
-        onFocus: openNow,
-        onBlur: startHide,
-        children: btn
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RPopover2__namespace.Content,
-      {
-        side: "top",
-        sideOffset: 4,
-        className: cn("z-50", FLOATING_SLIDE_ANIM),
-        "aria-hidden": true,
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        onMouseEnter: cancelHide,
-        onMouseLeave: startHide,
-        children: /* @__PURE__ */ jsxRuntime.jsx(STag, { shape: "square", size: "xs", color: "grey", label: text })
+        ))
       }
-    ) })
-  ] });
-}
+    ) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      RDropdown__namespace.Root,
+      {
+        open,
+        onOpenChange: (o) => {
+          setOpen(o);
+          onOpenChange?.(o);
+        },
+        children: [
+          split ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: splitWrapRef,
+              className: cn("inline-flex items-stretch", className),
+              style: { minWidth: s.splitMinWidth, ...style },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled,
+                    onClick: onLabelClick,
+                    className: cn(triggerBase, "flex-1 justify-center rounded-l-[4px] border-r-0"),
+                    style: {
+                      minHeight: s.height,
+                      padding: `0 ${s.paddingX}px`,
+                      fontSize: s.fontSize,
+                      ...colorVars
+                    },
+                    children: label
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(RDropdown__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    ref: splitToggleRef,
+                    type: "button",
+                    disabled,
+                    "aria-label": "\uBA54\uB274 \uC5F4\uAE30",
+                    className: cn(triggerBase, "justify-center rounded-r-[4px] border-l"),
+                    style: {
+                      minHeight: s.height,
+                      minWidth: s.height,
+                      borderLeftColor: disabled ? "var(--cmp-button-border-disabled)" : splitDivider(color, outline),
+                      ...colorVars
+                    },
+                    children: splitIcon
+                  }
+                ) })
+              ]
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(RDropdown__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              disabled,
+              className: cn(triggerBase, "justify-between rounded-[4px]", className),
+              style: {
+                minWidth: s.minWidth,
+                minHeight: s.height,
+                padding: `0 ${s.paddingX}px`,
+                gap: s.gap,
+                fontSize: s.fontSize,
+                ...colorVars,
+                ...style
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-center", children: label }),
+                caret
+              ]
+            }
+          ) }),
+          menu
+        ]
+      }
+    );
+  }
+);
+SDropdownButton.displayName = "SDropdownButton";
 function SSwitch({
   value = false,
   leftLabel,
@@ -4271,142 +4799,6 @@ function SToggle({
     }
   );
 }
-var HIDE_DELAY_MS = 100;
-function useBody(content, message = []) {
-  if (content != null) return content;
-  if (message.length === 0) return null;
-  const singleLine = message.length === 1;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: singleLine ? "leading-[24px]" : void 0,
-      dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(line) }
-    },
-    i
-  )) });
-}
-var STooltip = react.forwardRef(function STooltip2({
-  content,
-  message = [],
-  trigger = "hover",
-  placement = "top",
-  tooltipType = "default",
-  useClose = false,
-  disabled = false,
-  children,
-  icon = "helpOutline",
-  iconSize = 12,
-  color = "#01BB4B",
-  ariaLabel,
-  className,
-  triggerClassName,
-  style
-}, ref) {
-  const portalContainer = usePortalContainer();
-  const [open, setOpen] = react.useState(false);
-  const hideTimer = react.useRef(void 0);
-  const cancelHide = () => {
-    if (hideTimer.current) {
-      clearTimeout(hideTimer.current);
-      hideTimer.current = void 0;
-    }
-  };
-  const openNow = () => {
-    cancelHide();
-    setOpen(true);
-  };
-  const startHide = () => {
-    if (useClose) return;
-    cancelHide();
-    hideTimer.current = setTimeout(() => setOpen(false), HIDE_DELAY_MS);
-  };
-  react.useImperativeHandle(
-    ref,
-    () => ({
-      show: () => {
-        cancelHide();
-        setOpen(true);
-      },
-      hide: () => {
-        cancelHide();
-        setOpen(false);
-      }
-    }),
-    []
-  );
-  const body = useBody(content, message);
-  const bg = `var(--cmp-tooltip-${tooltipType}-bg)`;
-  const fg = `var(--cmp-tooltip-${tooltipType}-content)`;
-  const triggerNode = children ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-flex cursor-pointer", triggerClassName), "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: iconSize, color }) });
-  if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: triggerNode });
-  const isHover = trigger === "hover";
-  const contentClass = cn(
-    "z-50 w-fit whitespace-nowrap rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-normal-sm",
-    FLOATING_SLIDE_ANIM,
-    className
-  );
-  const contentStyle = {
-    background: bg,
-    color: fg,
-    fontWeight: tooltipType === "default" ? 500 : 700,
-    ...style
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
-    isHover ? (
-      // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "inline-flex",
-          onMouseEnter: openNow,
-          onMouseLeave: startHide,
-          onFocus: openNow,
-          onBlur: startHide,
-          children: triggerNode
-        }
-      ) })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover2__namespace.Content,
-      {
-        side: placement,
-        sideOffset: 8,
-        className: contentClass,
-        style: contentStyle,
-        onOpenAutoFocus: (e) => e.preventDefault(),
-        onInteractOutside: (e) => {
-          if (useClose) e.preventDefault();
-        },
-        onEscapeKeyDown: (e) => {
-          if (useClose) e.preventDefault();
-        },
-        onMouseEnter: isHover ? cancelHide : void 0,
-        onMouseLeave: isHover ? startHide : void 0,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[12px]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: body }),
-            useClose && /* @__PURE__ */ jsxRuntime.jsx(
-              SGhostButton,
-              {
-                icon: "close",
-                size: "xs",
-                intent: tooltipType === "default" ? "inverse" : "default",
-                ariaLabel: "\uB2EB\uAE30",
-                className: "shrink-0",
-                onClick: () => {
-                  cancelHide();
-                  setOpen(false);
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
-        ]
-      }
-    ) })
-  ] });
-});
-STooltip.displayName = "STooltip";
 var BUTTON_PRESET = {
   default: { color: "primary", outline: false },
   accent: { color: "primary", outline: false },
@@ -7384,8 +7776,10 @@ var STable = react.forwardRef(function STable2({
   stickyColumn,
   radius = "default",
   noDataLabel = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  noDataSlot,
   isLoading = false,
   dense = false,
+  noHover = false,
   pagination,
   onPageChange,
   useInternalPagination = false,
@@ -7471,7 +7865,10 @@ var STable = react.forwardRef(function STable2({
   );
   const handleScroll = react.useCallback(() => {
     const el = scrollRef.current;
-    if (!el) return;
+    if (!el) {
+      setHeaderGutter(0);
+      return;
+    }
     const header = headerScrollRef.current;
     if (header) header.scrollLeft = el.scrollLeft;
     setHeaderGutter(el.offsetWidth - el.clientWidth);
@@ -7603,6 +8000,7 @@ var STable = react.forwardRef(function STable2({
     bodyRows = rows.slice(pageInfo.startIndex, pageInfo.endIndex);
   }
   const isNoData = rowCount === 0 && !isLoading;
+  const showNoDataSlot = isNoData && noDataSlot != null;
   const showPagination = !useVirtualScroll && (pagination != null || useInternalPagination);
   const lastPage = useInternalPagination ? Math.max(1, Math.ceil(rowCount / (innerRowsPerPage || 1))) : pagination?.lastPage ?? Math.max(1, Math.ceil(rowCount / (pagination?.rowsPerPage ?? 10)));
   const displayPage = useInternalPagination ? currentPage : pagination?.page ?? 1;
@@ -7664,6 +8062,12 @@ var STable = react.forwardRef(function STable2({
       isRightEdge && scrolledRight && "shadow-[-5px_0_8px_0_rgba(34,34,34,0.1)]"
     );
   };
+  const bodyScrollClass = cn(
+    "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-table-border-color)]",
+    SCROLLBAR_CLASS,
+    SCROLLBAR_TRACK_BG_CLASS,
+    SCROLLBAR_TRACK_BORDER_CLASS
+  );
   const colgroup = /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { children: [
     selectable && /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: SELECTABLE_COLUMN_WIDTH } }),
     visibleCols.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx("col", { style: col.autoWidth ? void 0 : { width: columnWidths[i] } }, col.name))
@@ -7785,97 +8189,106 @@ var STable = react.forwardRef(function STable2({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  ref: scrollRef,
-                  onScroll: handleScroll,
-                  className: cn(
-                    // 헤더 하단 구분선은 body 상단 border로 그린다. body 래퍼는 스크롤바를 포함한
-                    // 전체 폭을 차지하므로(스크롤바는 border 안쪽) 헤더 거터의 border-right와 미터가
-                    // 생기지 않아 색·길이가 균일한 한 줄이 된다.
-                    "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-table-border-color)]",
-                    SCROLLBAR_CLASS,
-                    SCROLLBAR_TRACK_BG_CLASS,
-                    SCROLLBAR_TRACK_BORDER_CLASS,
-                    // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
-                    (isLoading || rowCount === 0) && "overflow-hidden"
-                  ),
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "table",
-                    {
-                      className: "w-full table-fixed border-separate border-spacing-0 text-left",
-                      style: { fontSize: 12 },
-                      children: [
-                        colgroup,
-                        /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-                          useVirtualScroll && topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
-                          rowCount === 0 ? null : bodyRows.map((row, ri) => {
-                            const isSel = selectedKeys.has(row[rowKey]);
-                            const rowBg = "bg-white";
-                            return /* @__PURE__ */ jsxRuntime.jsxs(
-                              "tr",
-                              {
-                                onClick: () => onRowClick?.(row),
-                                className: cn(
-                                  "group/table-row hover:bg-[var(--color-grey-05)]",
-                                  onRowClick && "cursor-pointer"
-                                ),
-                                style: { height: useVirtualScroll ? effectiveRowHeight : rowH },
-                                children: [
-                                  selectable && /* @__PURE__ */ jsxRuntime.jsx(
-                                    "td",
-                                    {
-                                      className: cn(
-                                        // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
-                                        "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle group-hover/table-row:bg-[var(--color-grey-05)]",
-                                        rowBg,
-                                        stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
-                                      ),
-                                      style: {
-                                        width: SELECTABLE_COLUMN_WIDTH,
-                                        minWidth: SELECTABLE_COLUMN_WIDTH,
-                                        maxWidth: SELECTABLE_COLUMN_WIDTH
-                                      },
-                                      onClick: (e) => e.stopPropagation(),
-                                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: isSel, onValueChange: () => toggleRow(row) }) })
-                                    }
+              showNoDataSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bodyScrollClass, "pointer-events-auto bg-white"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-[60px] w-full items-center justify-center", children: noDataSlot }) }) : (
+                /* 바디: 세로 스크롤은 이 컨테이너에만 생긴다 (헤더 제외) */
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    ref: scrollRef,
+                    onScroll: handleScroll,
+                    className: cn(
+                      bodyScrollClass,
+                      // 원본 sd-table__scroll-container--loading/--no-data: 로딩·데이터 없음 시 스크롤 차단
+                      (isLoading || rowCount === 0) && "overflow-hidden"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "table",
+                      {
+                        className: "w-full table-fixed border-separate border-spacing-0 text-left",
+                        style: { fontSize: 12 },
+                        children: [
+                          colgroup,
+                          /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+                            useVirtualScroll && topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: topSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) }),
+                            rowCount === 0 ? null : bodyRows.map((row, ri) => {
+                              const isSel = selectedKeys.has(row[rowKey]);
+                              const rowBg = "bg-white";
+                              return /* @__PURE__ */ jsxRuntime.jsxs(
+                                "tr",
+                                {
+                                  onClick: () => onRowClick?.(row),
+                                  className: cn(
+                                    "group/table-row",
+                                    !noHover && "hover:bg-[var(--color-grey-05)]",
+                                    onRowClick && "cursor-pointer"
                                   ),
-                                  visibleCols.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                                    "td",
-                                    {
-                                      className: cn(
+                                  style: { height: useVirtualScroll ? effectiveRowHeight : rowH },
+                                  children: [
+                                    selectable && /* @__PURE__ */ jsxRuntime.jsx(
+                                      "td",
+                                      {
+                                        className: cn(
+                                          // 원본 .td--selected: 48px 고정폭, 항상 left sticky, 체크박스 중앙정렬
+                                          "sticky left-0 z-[2] border-b border-solid border-[color:var(--cmp-table-border-color)] align-middle",
+                                          rowBg,
+                                          !noHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                          stickyLeft === 0 && scrolledLeft && "shadow-[5px_0_8px_0_rgba(34,34,34,0.1)]"
+                                        ),
+                                        style: {
+                                          width: SELECTABLE_COLUMN_WIDTH,
+                                          minWidth: SELECTABLE_COLUMN_WIDTH,
+                                          maxWidth: SELECTABLE_COLUMN_WIDTH
+                                        },
+                                        onClick: (e) => e.stopPropagation(),
+                                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: isSel, onValueChange: () => toggleRow(row) }) })
+                                      }
+                                    ),
+                                    visibleCols.map((col, i) => {
+                                      const tdClassName = cn(
                                         // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
                                         // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
                                         "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
                                         rowBg,
-                                        "group-hover/table-row:bg-[var(--color-grey-05)]",
+                                        !noHover && "group-hover/table-row:bg-[var(--color-grey-05)]",
                                         stickyShadowClass(i),
                                         typeof col.tdClass === "function" ? col.tdClass(row) : col.tdClass
-                                      ),
-                                      style: {
+                                      );
+                                      const tdStyle = {
                                         paddingLeft: cellPadX,
                                         paddingRight: cellPadX,
                                         paddingTop: cellPadY,
                                         paddingBottom: cellPadY,
                                         textAlign: col.align ?? "left",
                                         ...cellStyle(i)
-                                      },
-                                      children: col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row)
-                                    },
-                                    col.name
-                                  ))
-                                ]
-                              },
-                              row[rowKey] ?? ri
-                            );
-                          }),
-                          useVirtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
-                        ] })
-                      ]
-                    }
-                  )
-                }
+                                      };
+                                      if (col.renderCell) {
+                                        const cell = col.renderCell({
+                                          row,
+                                          value: cellValue(col, row),
+                                          column: col,
+                                          colIndex: i,
+                                          rowIndex: ri,
+                                          isSelected: isSel,
+                                          className: tdClassName,
+                                          style: tdStyle
+                                        });
+                                        if (cell == null || cell === false) return null;
+                                        return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: cell }, col.name);
+                                      }
+                                      return /* @__PURE__ */ jsxRuntime.jsx("td", { className: tdClassName, style: tdStyle, children: col.render ? col.render(row, cellValue(col, row)) : cellValue(col, row) }, col.name);
+                                    })
+                                  ]
+                                },
+                                row[rowKey] ?? ri
+                              );
+                            }),
+                            useVirtualScroll && bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { "aria-hidden": true, style: { height: bottomSpacer }, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColSpan, className: "p-0" }) })
+                          ] })
+                        ]
+                      }
+                    )
+                  }
+                )
               ),
               isNoData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -7885,7 +8298,7 @@ var STable = react.forwardRef(function STable2({
                     className: "pointer-events-none absolute left-0 right-0 top-0 z-[31] h-[var(--cmp-table-header-height)] bg-white/60"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
+                !showNoDataSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
               ] }),
               isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-white/60", children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true }) })
             ]
@@ -8323,7 +8736,7 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
   const [display, setDisplay] = react.useState(() => formatWithCommas(numValue));
   const [ruleError, setRuleError] = react.useState("");
   const innerRef = react.useRef(null);
-  const setRefs = (el) => {
+  const setRefs2 = (el) => {
     innerRef.current = el;
     if (typeof ref === "function") ref(el);
     else if (ref) ref.current = el;
@@ -8497,7 +8910,7 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
-                ref: setRefs,
+                ref: setRefs2,
                 name,
                 type: "text",
                 inputMode: useDecimal ? "decimal" : "numeric",
@@ -12025,6 +12438,7 @@ exports.SConfirmModal = SConfirmModal;
 exports.SDatePicker = SDatePicker;
 exports.SDateRangePicker = SDateRangePicker;
 exports.SDivider = SDivider;
+exports.SDraggableItem = SDraggableItem;
 exports.SDropdownButton = SDropdownButton;
 exports.SExpansionItem = SExpansionItem;
 exports.SField = SField;
@@ -12039,6 +12453,8 @@ exports.SKeyValueTable = SKeyValueTable;
 exports.SLayout = SLayout;
 exports.SLayoutContext = SLayoutContext;
 exports.SLinearProgress = SLinearProgress;
+exports.SList = SList;
+exports.SListItem = SListItem;
 exports.SLoadingContainer = SLoadingContainer;
 exports.SLoadingModal = SLoadingModal;
 exports.SLoadingViewport = SLoadingViewport;
@@ -12053,6 +12469,7 @@ exports.SRadio = SRadio;
 exports.SRadioButton = SRadioButton;
 exports.SRadioGroup = SRadioGroup;
 exports.SScrollArea = SScrollArea;
+exports.SSectionHeaderCard = SSectionHeaderCard2;
 exports.SSelect = SSelect;
 exports.SStepper = SStepper;
 exports.SSwitch = SSwitch;