sellmate-design-system-react 2.2.0 → 3.1.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,
@@ -3779,83 +4489,14 @@ var STextLink = react.forwardRef(function STextLink2({
       ]
     }
   );
-  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");
-      }
-    }
-    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,
@@ -4077,119 +4718,6 @@ var SDropdownButton = react.forwardRef(
   }
 );
 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 })
-      }
-    ) })
-  ] });
-}
 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 },
@@ -8344,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;
@@ -8518,7 +8910,7 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
-                ref: setRefs,
+                ref: setRefs2,
                 name,
                 type: "text",
                 inputMode: useDecimal ? "decimal" : "numeric",
@@ -12046,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;
@@ -12060,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;
@@ -12074,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;