@stn-uiux/pub-ui-react 0.1.55 → 0.1.58

package/dist/index.js

@@ -406,7 +406,7 @@ var StnSlider = forwardRef3(function StnSlider2({
       customGradient = gradient;
     }
   }
-  const sizeClass4 = size !== "md" ? size : "";
+  const sizeClass5 = size !== "md" ? size : "";
   const style = {
     ["--stn-slider-pct"]: `${pct}%`,
     ["--stn-slider-pct-num"]: String(pct / 100),
@@ -462,7 +462,7 @@ var StnSlider = forwardRef3(function StnSlider2({
     {
       className: cn(
         "stn-slider",
-        sizeClass4,
+        sizeClass5,
         toneClass,
         gradientClass,
         hasGradient && "gradient-fill stn-slider--gradient-fill",
@@ -639,7 +639,7 @@ var StnPagination = forwardRef4(function StnPagination2({
   ] });
 });
 
-// src/components/StnPopup.tsx
+// src/components/StnModal.tsx
 import { forwardRef as forwardRef6, useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
 
@@ -730,29 +730,28 @@ StnLayer2.Content = StnLayerContent;
 StnLayer2.Dim = StnLayerDim;
 StnLayer2.Modal = StnLayerModal;
 
-// src/components/StnPopup.tsx
+// src/components/StnModal.tsx
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var SIZE_CLASS = {
   xs: "stn-pop--xs",
-  s: "stn-pop--sm",
   sm: "stn-pop--sm",
-  m: "stn-pop--md",
   md: "stn-pop--md",
-  l: "stn-pop--lg",
   lg: "stn-pop--lg",
   xl: "stn-pop--xl",
-  xxl: "stn-pop--xxl",
-  "2xl": "stn-pop--2xl",
   full: "stn-pop--full"
 };
-var StnPopup = forwardRef6(function StnPopup2({
+var StnModal = forwardRef6(function StnModal2({
   open,
   onClose,
   title,
+  subtitle,
+  headerExtra,
   size = "md",
   children,
   actions,
+  actionAlign = "right",
   className,
+  bodyClassName,
   portal = true,
   closeOnScrimClick = true,
   dim = true,
@@ -768,7 +767,7 @@ var StnPopup = forwardRef6(function StnPopup2({
     };
   }, [open, portal]);
   if (!open) return null;
-  const titleId = rest.id ? `${rest.id}-title` : "stn-pop-title";
+  const titleId = rest.id ? `${rest.id}-title` : "stn-modal-title";
   const dialog = /* @__PURE__ */ jsx9(
     "div",
     {
@@ -779,7 +778,13 @@ var StnPopup = forwardRef6(function StnPopup2({
       className: cn("stn-pop", SIZE_CLASS[size], "stn-pop--open", className),
       ...rest,
       children: /* @__PURE__ */ jsx9("div", { className: "stn-pop__cont", children: /* @__PURE__ */ jsxs5("div", { className: "stn-pop__panel", children: [
-        /* @__PURE__ */ jsx9("div", { className: "stn-pop__head", id: titleId, children: /* @__PURE__ */ jsx9("h4", { children: title }) }),
+        /* @__PURE__ */ jsxs5("div", { className: "stn-pop__head", id: titleId, children: [
+          /* @__PURE__ */ jsxs5("div", { className: "stn-pop__head-row", children: [
+            /* @__PURE__ */ jsx9("h4", { children: title }),
+            headerExtra ? /* @__PURE__ */ jsx9("div", { className: "stn-pop__head-extra", children: headerExtra }) : null
+          ] }),
+          subtitle ? /* @__PURE__ */ jsx9("p", { className: "stn-pop__subtitle", children: subtitle }) : null
+        ] }),
         /* @__PURE__ */ jsx9(
           StnButton,
           {
@@ -791,8 +796,19 @@ var StnPopup = forwardRef6(function StnPopup2({
             onClick: onClose
           }
         ),
-        /* @__PURE__ */ jsx9("div", { className: "stn-pop__body", children }),
-        actions ? /* @__PURE__ */ jsx9("div", { className: "stn-pop__actions", children: actions }) : null
+        /* @__PURE__ */ jsx9("div", { className: cn("stn-pop__body", bodyClassName), children }),
+        actions ? /* @__PURE__ */ jsx9(
+          "div",
+          {
+            className: cn(
+              "stn-pop__actions",
+              actionAlign === "center" && "stn-pop__actions--center",
+              actionAlign === "right" && "stn-pop__actions--right",
+              actionAlign === "between" && "stn-pop__actions--between"
+            ),
+            children: actions
+          }
+        ) : null
       ] }) })
     }
   );
@@ -816,6 +832,7 @@ var StnPopup = forwardRef6(function StnPopup2({
     document.body
   );
 });
+var StnPopup = StnModal;
 
 // src/components/toast/StnToastCloseButton.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -1632,10 +1649,10 @@ StnTable.RowActions = StnTableRowActions;
 
 // src/components/StnTree.tsx
 import {
-  forwardRef as forwardRef12,
-  useCallback as useCallback3,
+  forwardRef as forwardRef13,
+  useCallback as useCallback4,
   useMemo as useMemo2,
-  useState as useState4
+  useState as useState5
 } from "react";
 
 // src/components/StnTreeNode.tsx
@@ -1685,11 +1702,13 @@ function walk(nodes, depth, ancestorIsLast, expanded, out) {
       id: node.id,
       label: node.label,
       kind,
+      bold: Boolean(node.bold),
       depth,
       cells: buildPrefixCells(depth, kind, ancestorIsLast, isLast, hasChildren, isExpanded),
       hasChildren,
       expanded: isExpanded,
-      isLast
+      isLast,
+      visible: node.visible !== false
     });
     if (hasChildren && isExpanded) {
       walk(node.children, depth + 1, [...ancestorIsLast, isLast], expanded, out);
@@ -1724,7 +1743,9 @@ var ICON = {
   vertical: resolveSystemIconSrcFromName2("line/vertical_line") ?? "",
   connectorMid: resolveSystemIconSrcFromName2("line/tree_connector_midium") ?? "",
   connectorEnd: resolveSystemIconSrcFromName2("line/tree_connector") ?? "",
-  chevron: resolveSystemIconSrcFromName2("line/arrow-left") ?? ""
+  chevron: resolveSystemIconSrcFromName2("line/arrow-left") ?? "",
+  eye: resolveSystemIconSrcFromName2("line/eye") ?? "",
+  eyeOff: resolveSystemIconSrcFromName2("line/eye-off") ?? ""
 };
 function maskStyle(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
@@ -1800,6 +1821,7 @@ function TreeNodeIcon({ kind, expanded }) {
 var StnTreeNode = forwardRef11(function StnTreeNode2({
   label,
   kind = "folder",
+  bold = false,
   depth = 0,
   expanded = false,
   selected = false,
@@ -1807,6 +1829,10 @@ var StnTreeNode = forwardRef11(function StnTreeNode2({
   isLast = true,
   ancestorIsLast,
   cells: cellsProp,
+  showIcon = true,
+  visible = true,
+  showVisibilityToggle = false,
+  onVisibilityChange,
   docState = "default",
   onSelect,
   onToggle,
@@ -1815,6 +1841,7 @@ var StnTreeNode = forwardRef11(function StnTreeNode2({
   onKeyDown,
   ...rest
 }, ref) {
+  const labelText = typeof label === "string" ? label : "";
   const resolvedHasChildren = hasChildren ?? kind !== "server";
   const cells = cellsProp ?? buildStnTreeNodeCells({
     depth,
@@ -1843,9 +1870,11 @@ var StnTreeNode = forwardRef11(function StnTreeNode2({
       "aria-expanded": resolvedHasChildren ? expanded : void 0,
       className: cn(
         "stn-tree__row",
+        bold && "is-bold",
         isSelected && "is-selected",
         docState === "hover" && "is-hover",
         docState === "pressed" && "is-pressed",
+        !visible && "is-hidden-node",
         `stn-tree__row--${kind}`,
         className
       ),
@@ -1865,7 +1894,7 @@ var StnTreeNode = forwardRef11(function StnTreeNode2({
               {
                 type: "button",
                 className: "stn-tree__cell stn-tree__cell--toggle stn-tree__toggle",
-                "aria-label": cell.expanded ? `${label} \uC811\uAE30` : `${label} \uD3BC\uCE58\uAE30`,
+                "aria-label": cell.expanded ? `${labelText} \uC811\uAE30` : `${labelText} \uD3BC\uCE58\uAE30`,
                 "aria-expanded": cell.expanded,
                 onClick: (event) => {
                   event.stopPropagation();
@@ -1884,99 +1913,44 @@ var StnTreeNode = forwardRef11(function StnTreeNode2({
           }
           return /* @__PURE__ */ jsx16(TreeGuideCell, { cell }, `c-${index}`);
         }),
-        /* @__PURE__ */ jsx16(TreeNodeIcon, { kind, expanded }),
-        /* @__PURE__ */ jsx16("span", { className: "stn-tree__label", children: label })
+        showIcon && /* @__PURE__ */ jsx16(TreeNodeIcon, { kind, expanded }),
+        /* @__PURE__ */ jsx16("span", { className: cn("stn-tree__label", bold && "is-bold"), children: label }),
+        showVisibilityToggle && /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: "stn-tree__visibility-btn",
+            "aria-label": visible ? `${labelText} \uC228\uAE30\uAE30` : `${labelText} \uD45C\uC2DC\uD558\uAE30`,
+            title: visible ? "\uC228\uAE30\uAE30" : "\uD45C\uC2DC\uD558\uAE30",
+            onClick: (event) => {
+              event.stopPropagation();
+              onVisibilityChange?.(!visible);
+            },
+            children: /* @__PURE__ */ jsx16(
+              "span",
+              {
+                className: cn("stn-tree__visibility-glyph", !visible && "is-off"),
+                style: maskStyle(visible ? ICON.eye : ICON.eyeOff)
+              }
+            )
+          }
+        )
       ]
     }
   );
 });
-
-// src/components/StnTree.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
-function useControllableSet(controlled, defaultIds, allExpandable) {
-  const [internal, setInternal] = useState4(() => defaultIds ?? allExpandable);
-  const value = controlled ?? internal;
-  const setValue = useCallback3(
-    (next) => {
-      const resolved = typeof next === "function" ? next(controlled ?? internal) : next;
-      if (controlled == null) setInternal(resolved);
-    },
-    [controlled, internal]
-  );
-  return [value, setValue];
-}
-var StnTree = forwardRef12(function StnTree2({
-  nodes,
-  heading = "FOLDER STRUCTURE",
-  defaultExpandedIds,
-  expandedIds,
-  onExpandedChange,
-  selectedId,
-  defaultSelectedId = null,
-  onSelect,
-  docRowState,
-  className,
-  ...rest
-}, ref) {
-  const expandableIds = useMemo2(() => collectExpandableIds(nodes), [nodes]);
-  const [expanded, setExpanded] = useControllableSet(expandedIds, defaultExpandedIds, expandableIds);
-  const [internalSelected, setInternalSelected] = useState4(defaultSelectedId);
-  const selected = selectedId ?? internalSelected;
-  const rows = useMemo2(() => flattenStnTree(nodes, expanded), [nodes, expanded]);
-  const setExpandedIds = useCallback3(
-    (next) => {
-      setExpanded(next);
-      onExpandedChange?.(next);
-    },
-    [onExpandedChange, setExpanded]
-  );
-  const handleToggle = useCallback3(
-    (id) => {
-      setExpandedIds(
-        expanded.includes(id) ? expanded.filter((item) => item !== id) : [...expanded, id]
-      );
-    },
-    [expanded, setExpandedIds]
-  );
-  const handleSelect = useCallback3(
-    (id) => {
-      if (selectedId == null) setInternalSelected(id);
-      onSelect?.(id);
-    },
-    [onSelect, selectedId]
-  );
-  return /* @__PURE__ */ jsxs11("div", { ref, className: cn("stn-tree", className), ...rest, children: [
-    heading ? /* @__PURE__ */ jsx17("p", { className: "stn-tree__heading", children: heading }) : null,
-    /* @__PURE__ */ jsx17("div", { className: "stn-tree__rows", role: "tree", "aria-label": heading || "folder tree", children: rows.map((row) => /* @__PURE__ */ jsx17(
-      StnTreeNode,
-      {
-        label: row.label,
-        kind: row.kind,
-        depth: row.depth,
-        expanded: row.expanded,
-        selected: selected === row.id,
-        hasChildren: row.hasChildren,
-        isLast: row.isLast,
-        cells: row.cells,
-        docState: docRowState?.id === row.id ? docRowState.state : "default",
-        onToggle: () => handleToggle(row.id),
-        onSelect: () => handleSelect(row.id)
-      },
-      row.id
-    )) })
-  ] });
-});
+var StnTreeItem = StnTreeNode;
 
 // src/components/StnScroll.tsx
 import {
-  forwardRef as forwardRef13,
-  useCallback as useCallback4,
+  forwardRef as forwardRef12,
+  useCallback as useCallback3,
   useEffect as useEffect6,
   useId as useId4,
   useRef as useRef4,
-  useState as useState5
+  useState as useState4
 } from "react";
-import { Fragment, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
@@ -1987,7 +1961,7 @@ function barWidth(size, scrollWidth) {
   if (size === "thick") return "12px";
   return "8px";
 }
-var StnScroll = forwardRef13(function StnScroll2({
+var StnScroll = forwardRef12(function StnScroll2({
   orientation = "vertical",
   variant = "default",
   showArrows = false,
@@ -2006,7 +1980,7 @@ var StnScroll = forwardRef13(function StnScroll2({
   const rawId = useId4();
   const customId = `stn-scr-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const innerRef = useRef4(null);
-  const [edges, setEdges] = useState5({ top: true, bottom: false, left: true, right: false });
+  const [edges, setEdges] = useState4({ top: true, bottom: false, left: true, right: false });
   const hasArrows = variant === "arrows" || showArrows;
   const hasCustomStyling = Boolean(thumbColor || trackColor || scrollWidth != null);
   const showY = orientation !== "horizontal";
@@ -2016,7 +1990,7 @@ var StnScroll = forwardRef13(function StnScroll2({
     const w = scrollWidth != null ? typeof scrollWidth === "number" ? `${scrollWidth}px` : scrollWidth : void 0;
     const thumb = thumbColor;
     const track = trackColor || "rgba(255, 255, 255, 0.05)";
-    dynamicStyleTag = /* @__PURE__ */ jsx18("style", { children: `
+    dynamicStyleTag = /* @__PURE__ */ jsx17("style", { children: `
         .${customId}::-webkit-scrollbar {
           ${w ? `width: ${w} !important; height: ${w} !important;` : ""}
           ${track ? `background: ${track} !important;` : ""}
@@ -2038,7 +2012,7 @@ var StnScroll = forwardRef13(function StnScroll2({
     ...thumbColor && { scrollbarColor: `${thumbColor} ${trackColor || "transparent"}` },
     ...style
   };
-  const syncEdges = useCallback4(() => {
+  const syncEdges = useCallback3(() => {
     const el = innerRef.current;
     if (!el) return;
     setEdges({
@@ -2075,7 +2049,7 @@ var StnScroll = forwardRef13(function StnScroll2({
       behavior: "smooth"
     });
   };
-  const scrollElement = /* @__PURE__ */ jsx18(
+  const scrollElement = /* @__PURE__ */ jsx17(
     "div",
     {
       ref: setNode,
@@ -2094,7 +2068,7 @@ var StnScroll = forwardRef13(function StnScroll2({
     }
   );
   if (!hasArrows) {
-    return /* @__PURE__ */ jsxs12(Fragment, { children: [
+    return /* @__PURE__ */ jsxs11(Fragment, { children: [
       dynamicStyleTag,
       scrollElement
     ] });
@@ -2102,11 +2076,11 @@ var StnScroll = forwardRef13(function StnScroll2({
   const shellStyle = {
     "--stn-scroll-width": barWidth(size, scrollWidth)
   };
-  return /* @__PURE__ */ jsxs12(Fragment, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment, { children: [
     dynamicStyleTag,
-    /* @__PURE__ */ jsxs12("div", { className: cn("stn-scroll-shell", `stn-scroll-shell--${orientation}`), style: shellStyle, children: [
-      showY ? /* @__PURE__ */ jsxs12(Fragment, { children: [
-        /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsxs11("div", { className: cn("stn-scroll-shell", `stn-scroll-shell--${orientation}`), style: shellStyle, children: [
+      showY ? /* @__PURE__ */ jsxs11(Fragment, { children: [
+        /* @__PURE__ */ jsx17(
           ScrollArrow,
           {
             direction: "up",
@@ -2115,7 +2089,7 @@ var StnScroll = forwardRef13(function StnScroll2({
             onClick: () => scrollByAxis("y", -1)
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx17(
           ScrollArrow,
           {
             direction: "down",
@@ -2126,8 +2100,8 @@ var StnScroll = forwardRef13(function StnScroll2({
         )
       ] }) : null,
       scrollElement,
-      showX ? /* @__PURE__ */ jsxs12(Fragment, { children: [
-        /* @__PURE__ */ jsx18(
+      showX ? /* @__PURE__ */ jsxs11(Fragment, { children: [
+        /* @__PURE__ */ jsx17(
           ScrollArrow,
           {
             direction: "left",
@@ -2136,7 +2110,7 @@ var StnScroll = forwardRef13(function StnScroll2({
             onClick: () => scrollByAxis("x", -1)
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx17(
           ScrollArrow,
           {
             direction: "right",
@@ -2155,7 +2129,7 @@ function ScrollArrow({
   label,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     "button",
     {
       type: "button",
@@ -2163,15 +2137,161 @@ function ScrollArrow({
       "aria-label": label,
       ...rest,
       children: [
-        direction === "up" && /* @__PURE__ */ jsx18("svg", { width: "7", height: "6", viewBox: "0 0 7 6", fill: "currentColor", children: /* @__PURE__ */ jsx18("path", { d: "M2.78 1.13a0.85 0.85 0 0 1 1.44 0l2.12 3.18A0.85 0.85 0 0 1 5.64 5.6H1.36a0.85 0.85 0 0 1-.7-1.29l2.12-3.18z" }) }),
-        direction === "down" && /* @__PURE__ */ jsx18("svg", { width: "7", height: "6", viewBox: "0 0 7 6", fill: "currentColor", children: /* @__PURE__ */ jsx18("path", { d: "M2.78 4.87a0.85 0.85 0 0 0 1.44 0l2.12-3.18A0.85 0.85 0 0 0 5.64 0.4H1.36a0.85 0.85 0 0 0-.7 1.29l2.12 3.18z" }) }),
-        direction === "left" && /* @__PURE__ */ jsx18("svg", { width: "6", height: "7", viewBox: "0 0 6 7", fill: "currentColor", children: /* @__PURE__ */ jsx18("path", { d: "M1.13 4.22a0.85 0.85 0 0 1 0-1.44l3.18-2.12A0.85 0.85 0 0 1 5.6 1.36v4.28a0.85 0.85 0 0 1-1.29.7L1.13 4.22z" }) }),
-        direction === "right" && /* @__PURE__ */ jsx18("svg", { width: "6", height: "7", viewBox: "0 0 6 7", fill: "currentColor", children: /* @__PURE__ */ jsx18("path", { d: "M4.87 4.22a0.85 0.85 0 0 0 0-1.44L1.69 0.66A0.85 0.85 0 0 0 0.4 1.36v4.28a0.85 0.85 0 0 0 1.29.7l3.18-2.12z" }) })
+        direction === "up" && /* @__PURE__ */ jsx17("svg", { width: "7", height: "6", viewBox: "0 0 7 6", fill: "currentColor", children: /* @__PURE__ */ jsx17("path", { d: "M2.78 1.13a0.85 0.85 0 0 1 1.44 0l2.12 3.18A0.85 0.85 0 0 1 5.64 5.6H1.36a0.85 0.85 0 0 1-.7-1.29l2.12-3.18z" }) }),
+        direction === "down" && /* @__PURE__ */ jsx17("svg", { width: "7", height: "6", viewBox: "0 0 7 6", fill: "currentColor", children: /* @__PURE__ */ jsx17("path", { d: "M2.78 4.87a0.85 0.85 0 0 0 1.44 0l2.12-3.18A0.85 0.85 0 0 0 5.64 0.4H1.36a0.85 0.85 0 0 0-.7 1.29l2.12 3.18z" }) }),
+        direction === "left" && /* @__PURE__ */ jsx17("svg", { width: "6", height: "7", viewBox: "0 0 6 7", fill: "currentColor", children: /* @__PURE__ */ jsx17("path", { d: "M1.13 4.22a0.85 0.85 0 0 1 0-1.44l3.18-2.12A0.85 0.85 0 0 1 5.6 1.36v4.28a0.85 0.85 0 0 1-1.29.7L1.13 4.22z" }) }),
+        direction === "right" && /* @__PURE__ */ jsx17("svg", { width: "6", height: "7", viewBox: "0 0 6 7", fill: "currentColor", children: /* @__PURE__ */ jsx17("path", { d: "M4.87 4.22a0.85 0.85 0 0 0 0-1.44L1.69 0.66A0.85 0.85 0 0 0 0.4 1.36v4.28a0.85 0.85 0 0 0 1.29.7l3.18-2.12z" }) })
       ]
     }
   );
 }
 
+// src/components/StnTree.tsx
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+function useControllableSet(controlled, defaultIds, defaultExpandAll, allExpandable) {
+  const [internal, setInternal] = useState5(() => {
+    if (defaultIds != null) return defaultIds;
+    if (defaultExpandAll) return allExpandable;
+    return [];
+  });
+  const value = controlled ?? internal;
+  const setValue = useCallback4(
+    (next) => {
+      const resolved = typeof next === "function" ? next(controlled ?? internal) : next;
+      if (controlled == null) setInternal(resolved);
+    },
+    [controlled, internal]
+  );
+  return [value, setValue];
+}
+var StnTree = forwardRef13(function StnTree2({
+  nodes,
+  heading,
+  defaultExpandAll = false,
+  defaultExpandedIds,
+  expandedIds,
+  onExpandedChange,
+  selectedId,
+  defaultSelectedId = null,
+  onSelect,
+  size = "sm",
+  width = "full",
+  radius = "sm",
+  guides = true,
+  showIcons = true,
+  showVisibilityToggle = false,
+  onVisibilityChange,
+  hiddenIds: controlledHiddenIds,
+  defaultHiddenIds,
+  docRowState,
+  maxHeight,
+  scrollVariant = "default",
+  scrollSize = "thin",
+  scrollColor = "fade",
+  className,
+  ...rest
+}, ref) {
+  const expandableIds = useMemo2(() => collectExpandableIds(nodes), [nodes]);
+  const [expanded, setExpanded] = useControllableSet(
+    expandedIds,
+    defaultExpandedIds,
+    defaultExpandAll,
+    expandableIds
+  );
+  const [internalSelected, setInternalSelected] = useState5(defaultSelectedId);
+  const selected = selectedId ?? internalSelected;
+  const [internalHidden, setInternalHidden] = useState5(() => defaultHiddenIds ?? []);
+  const hidden = controlledHiddenIds ?? internalHidden;
+  const handleVisibilityToggle = useCallback4(
+    (id, nextVisible) => {
+      if (controlledHiddenIds == null) {
+        setInternalHidden(
+          (prev) => nextVisible ? prev.filter((item) => item !== id) : [...prev, id]
+        );
+      }
+      onVisibilityChange?.(id, nextVisible);
+    },
+    [controlledHiddenIds, onVisibilityChange]
+  );
+  const rows = useMemo2(() => flattenStnTree(nodes, expanded), [nodes, expanded]);
+  const setExpandedIds = useCallback4(
+    (next) => {
+      setExpanded(next);
+      onExpandedChange?.(next);
+    },
+    [onExpandedChange, setExpanded]
+  );
+  const handleToggle = useCallback4(
+    (id) => {
+      setExpandedIds(
+        expanded.includes(id) ? expanded.filter((item) => item !== id) : [...expanded, id]
+      );
+    },
+    [expanded, setExpandedIds]
+  );
+  const handleSelect = useCallback4(
+    (id) => {
+      if (selectedId == null) setInternalSelected(id);
+      onSelect?.(id);
+    },
+    [onSelect, selectedId]
+  );
+  const rowsContent = /* @__PURE__ */ jsx18("div", { className: "stn-tree__rows", role: "tree", "aria-label": heading || "folder tree", children: rows.map((row) => {
+    const isHidden = hidden.includes(row.id) || !row.visible;
+    return /* @__PURE__ */ jsx18(
+      StnTreeNode,
+      {
+        label: row.label,
+        kind: row.kind,
+        bold: row.bold,
+        depth: row.depth,
+        expanded: row.expanded,
+        selected: selected === row.id,
+        hasChildren: row.hasChildren,
+        isLast: row.isLast,
+        cells: row.cells,
+        showIcon: showIcons,
+        visible: !isHidden,
+        showVisibilityToggle,
+        onVisibilityChange: (nextVisible) => handleVisibilityToggle(row.id, nextVisible),
+        docState: docRowState?.id === row.id ? docRowState.state : "default",
+        onToggle: () => handleToggle(row.id),
+        onSelect: () => handleSelect(row.id)
+      },
+      row.id
+    );
+  }) });
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      ref,
+      className: cn(
+        "stn-tree",
+        size !== "sm" && `stn-tree--${size}`,
+        width !== "full" && `stn-tree--${width}`,
+        radius !== "sm" && `stn-tree--radius-${radius}`,
+        !guides && "stn-tree--no-guides",
+        className
+      ),
+      ...rest,
+      children: [
+        heading ? /* @__PURE__ */ jsx18("p", { className: "stn-tree__heading", children: heading }) : null,
+        maxHeight != null ? /* @__PURE__ */ jsx18(
+          StnScroll,
+          {
+            orientation: "vertical",
+            maxHeight,
+            variant: scrollVariant,
+            size: scrollSize,
+            color: scrollColor,
+            children: rowsContent
+          }
+        ) : rowsContent
+      ]
+    }
+  );
+});
+
 // src/components/StnCard.tsx
 import { forwardRef as forwardRef14 } from "react";
 import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -2571,7 +2691,7 @@ function StnChip(props) {
   const resolvedShape = rawShape === "rounded" || rawShape === "square" ? "square" : rawShape;
   const isOutline = variant === "outline" || variant === "outlined" || variant === "border";
   const isSubtle = bgOpacity === 50 || bgOpacity === "50" || bgOpacity === "50%" || bgOpacity === 0.5 || variant === "subtle" || variant === "soft" || variant === "tinted" || variant === "contained-50" || variant === "filled-50";
-  const variantClass4 = isOutline ? "outline" : isSubtle ? "subtle contained-50 bg-50" : "filled";
+  const variantClass6 = isOutline ? "outline" : isSubtle ? "subtle contained-50 bg-50" : "filled";
   const resolvedColor = color ?? grade;
   let content = children ?? label;
   if (!content && grade && STN_GRADE_SOURCE[grade]) {
@@ -2628,7 +2748,7 @@ function StnChip(props) {
       tabIndex,
       className: cn(
         "stn-chip",
-        variantClass4,
+        variantClass6,
         size,
         resolvedShape,
         resolvedColor,
@@ -3032,13 +3152,13 @@ var StnSwitch = forwardRef20(function StnSwitch2({
   } : color && !isKnownTone ? {
     "--stn-switch-track-checked": color
   } : void 0;
-  const sizeClass4 = size !== "md" ? size : "";
+  const sizeClass5 = size !== "md" ? size : "";
   return /* @__PURE__ */ jsxs22(
     "label",
     {
       className: cn(
         "stn-switch",
-        sizeClass4,
+        sizeClass5,
         toneClass,
         gradientClass,
         positionClass,
@@ -3100,7 +3220,7 @@ var StnRadio = forwardRef21(function StnRadio2({
     "warning"
   ].includes(color);
   const toneClass = isKnownTone ? color : "";
-  const sizeClass4 = size !== "md" ? size : "";
+  const sizeClass5 = size !== "md" ? size : "";
   const inlineStyle = color && !isKnownTone ? {
     "--stn-radio-dot": color,
     "--stn-radio-checked-border": color
@@ -3111,7 +3231,7 @@ var StnRadio = forwardRef21(function StnRadio2({
       className: cn(
         "radio",
         "stn-radio",
-        sizeClass4,
+        sizeClass5,
         toneClass,
         placementClass,
         isControlOnly && "control-only",
@@ -3311,6 +3431,10 @@ function resolveInputWidthProps(_prefix, fullWidth, width) {
 
 // src/components/StnDropdown.tsx
 import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+function resolveGlyph(node) {
+  if (typeof node === "string") return /* @__PURE__ */ jsx33(StnIcon, { name: node, size: 16, color: "currentColor" });
+  return node;
+}
 function modifierClass(modifier) {
   if (modifier === "pageSize") return "stn-table__page-size";
   if (modifier === "serverFilter") return "server_filter";
@@ -3331,6 +3455,7 @@ function menuSizeClass(size, prominent) {
 function variantClass(variant = "outline") {
   if (variant === "standard") return "standard";
   if (variant === "filled") return "filled";
+  if (variant === "transparent") return "transparent";
   return "outline";
 }
 function useControllable(controlled, defaultValue, onChange) {
@@ -3358,6 +3483,11 @@ function StnDropdown({
   error = false,
   readOnly = false,
   placeholder,
+  label,
+  labelIcon,
+  icon,
+  labelPosition = "left",
+  required = false,
   helperText,
   helperTextPosition = "bottom",
   prominent = false,
@@ -3490,29 +3620,46 @@ function StnDropdown({
       ]
     }
   );
-  if (!hasHelper) return dropdownNode;
+  const hasLabel = label != null && label !== "";
+  const hasWrap = hasLabel || hasHelper;
+  if (!hasWrap) return dropdownNode;
+  const resolvedLabelIcon = labelIcon ?? icon;
+  const labelElement = hasLabel ? /* @__PURE__ */ jsxs25("label", { htmlFor: rootId, className: "stn-dropdown__label", children: [
+    resolvedLabelIcon ? /* @__PURE__ */ jsx33("span", { className: "stn-dropdown__label-icon", "aria-hidden": "true", children: resolveGlyph(resolvedLabelIcon) }) : null,
+    /* @__PURE__ */ jsx33("span", { className: "stn-dropdown__label-text", children: label }),
+    required && /* @__PURE__ */ jsx33("span", { className: "stn-dropdown__required", "aria-hidden": "true", children: "*" })
+  ] }) : null;
+  const isRow = labelPosition === "left" || labelPosition === "right";
   return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: cn(
-        "stn-dropdown-field",
-        `stn-dropdown-field--pos-${helperTextPosition}`,
+        "stn-dropdown-wrap",
+        hasLabel && (isRow ? "stn-dropdown-wrap--row" : "stn-dropdown-wrap--col"),
+        hasLabel && labelPosition === "left" && "stn-dropdown-wrap--label-left",
+        hasLabel && labelPosition === "right" && "stn-dropdown-wrap--label-right",
+        hasLabel && labelPosition === "top" && "stn-dropdown-wrap--label-top",
+        !hasLabel && hasHelper && `stn-dropdown-field--pos-${helperTextPosition}`,
         error && "is-error",
-        !isHorizontalHelper && widthProps.className,
+        widthProps.className,
         className
       ),
-      style: !isHorizontalHelper ? widthProps.style : void 0,
+      style: widthProps.style,
       ...divRest,
       children: [
-        dropdownNode,
-        /* @__PURE__ */ jsx33(
-          "span",
-          {
-            id: helperId,
-            className: cn("stn-dropdown-field__helper", error && "stn-dropdown-field__helper--error"),
-            children: helperText
-          }
-        )
+        hasLabel && (labelPosition === "left" || labelPosition === "top") ? labelElement : null,
+        /* @__PURE__ */ jsxs25("div", { className: "stn-dropdown-wrap__body", children: [
+          dropdownNode,
+          hasHelper && /* @__PURE__ */ jsx33(
+            "span",
+            {
+              id: helperId,
+              className: cn("stn-dropdown__helper", error && "stn-dropdown__helper--error"),
+              children: helperText
+            }
+          )
+        ] }),
+        hasLabel && labelPosition === "right" ? labelElement : null
       ]
     }
   );
@@ -3555,13 +3702,14 @@ function sizeClass2(size) {
 function variantClass2(variant) {
   if (variant === "filled") return "filled";
   if (variant === "standard") return "standard";
+  if (variant === "transparent") return "transparent";
   return "outlined";
 }
 function colorClass(color) {
   if (!color || color === "primary" || color === "secondary") return void 0;
   return color;
 }
-function resolveGlyph(node) {
+function resolveGlyph2(node) {
   if (typeof node === "string") return /* @__PURE__ */ jsx35(StnIcon, { name: node, size: 16, color: "currentColor" });
   return node;
 }
@@ -3573,10 +3721,9 @@ var StnTextField = forwardRef22(function StnTextField2({
   fullWidth,
   width,
   label,
+  labelIcon,
   labelPosition = "left",
   required,
-  prefix,
-  suffix,
   icon,
   iconPosition,
   helperText,
@@ -3591,10 +3738,8 @@ var StnTextField = forwardRef22(function StnTextField2({
   const autoId = useId10();
   const id = idProp ?? autoId;
   const resolvedIconPos = iconPosition ?? "left";
-  const leftFromIcon = icon != null && resolvedIconPos === "left" ? icon : void 0;
-  const rightFromIcon = icon != null && resolvedIconPos === "right" ? icon : void 0;
-  const leftNode = prefix ?? leftFromIcon;
-  const rightNode = suffix ?? rightFromIcon;
+  const leftNode = icon != null && resolvedIconPos === "left" ? icon : void 0;
+  const rightNode = icon != null && resolvedIconPos === "right" ? icon : void 0;
   const hasLeft = leftNode != null && leftNode !== false;
   const hasRight = rightNode != null && rightNode !== false;
   const hasSlot = hasLeft || hasRight;
@@ -3611,7 +3756,6 @@ var StnTextField = forwardRef22(function StnTextField2({
     colorClass(color),
     !hasWrap && widthProps.className,
     invalid && "stn-text-field--invalid",
-    Boolean(prefix) && "stn-text-field--with-prefix",
     hasSlot && "stn-text-field--with-icon",
     className
   );
@@ -3631,12 +3775,13 @@ var StnTextField = forwardRef22(function StnTextField2({
     }
   );
   const field = hasSlot ? /* @__PURE__ */ jsxs26("div", { className: fieldClass, style: hasWrap ? void 0 : widthProps.style, children: [
-    hasLeft ? /* @__PURE__ */ jsx35("span", { className: "stn-text-field__prefix", "aria-hidden": true, children: /* @__PURE__ */ jsx35("span", { className: "stn-text-field__icon-box", children: resolveGlyph(leftNode) }) }) : null,
+    hasLeft ? /* @__PURE__ */ jsx35("span", { className: "stn-text-field__icon-left", "aria-hidden": true, children: /* @__PURE__ */ jsx35("span", { className: "stn-text-field__icon-box", children: resolveGlyph2(leftNode) }) }) : null,
     input,
-    hasRight ? /* @__PURE__ */ jsx35("span", { className: "stn-text-field__suffix", "aria-hidden": true, children: /* @__PURE__ */ jsx35("span", { className: "stn-text-field__icon-box", children: resolveGlyph(rightNode) }) }) : null
+    hasRight ? /* @__PURE__ */ jsx35("span", { className: "stn-text-field__icon-right", "aria-hidden": true, children: /* @__PURE__ */ jsx35("span", { className: "stn-text-field__icon-box", children: resolveGlyph2(rightNode) }) }) : null
   ] }) : input;
   if (!hasWrap) return field;
   const labelElement = hasLabel ? /* @__PURE__ */ jsxs26("label", { htmlFor: id, className: "stn-text-field__label", children: [
+    labelIcon ? /* @__PURE__ */ jsx35("span", { className: "stn-text-field__label-icon", "aria-hidden": "true", children: resolveGlyph2(labelIcon) }) : null,
     /* @__PURE__ */ jsx35("span", { className: "stn-text-field__label-text", children: label }),
     required && /* @__PURE__ */ jsx35("span", { className: "stn-text-field__required", "aria-hidden": "true", children: "*" })
   ] }) : null;
@@ -3673,21 +3818,30 @@ var StnTextField = forwardRef22(function StnTextField2({
 });
 
 // src/components/StnDateRangeField.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef23, useId as useId11 } from "react";
 import {
   formatStnDateRangeFieldValue
 } from "@stn-uiux/pub-ui/data/stnDateRangeField";
 import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+function resolveGlyph3(node) {
+  if (typeof node === "string") return /* @__PURE__ */ jsx36(StnIcon, { name: node, size: 16, color: "currentColor" });
+  return node;
+}
 function normalizeSize2(size) {
   if (!size) return "md";
   const s = String(size).toLowerCase();
   if (s === "s" || s === "sm") return "sm";
   if (s === "l" || s === "lg") return "lg";
+  if (s === "xl") return "xl";
   return "md";
 }
 function sizeClass3(size) {
   return normalizeSize2(size);
 }
+function variantClass3(variant = "outline") {
+  if (variant === "transparent") return "transparent";
+  return "";
+}
 function resolveValue(value, format) {
   if (value == null) return null;
   if (value instanceof Date) return format(value);
@@ -3696,53 +3850,212 @@ function resolveValue(value, format) {
 }
 var StnDateRangeField = forwardRef23(function StnDateRangeField2({
   size = "md",
+  variant = "outline",
   start,
   end,
   format = formatStnDateRangeFieldValue,
   startPlaceholder = "Start",
   endPlaceholder = "End",
+  label,
+  labelIcon,
+  icon,
+  labelPosition = "left",
+  required = false,
+  helperText,
   invalid,
   fullWidth,
   width,
   className,
   style,
   disabled,
+  id: idProp,
   type = "button",
   "aria-invalid": ariaInvalid,
   ...rest
 }, ref) {
+  const autoId = useId11();
+  const rootId = idProp ?? `stn-date-range-${autoId.replace(/:/g, "")}`;
   const startText = resolveValue(start, format);
   const endText = resolveValue(end, format);
   const isEmpty = !startText && !endText;
-  const resolvedStyle = width !== void 0 ? { ...style, width: typeof width === "number" ? `${width}px` : width } : style;
-  return /* @__PURE__ */ jsx36(
+  const widthProps = resolveInputWidthProps("stn-date-range-field", fullWidth, width);
+  const hasLabel = label != null && label !== "";
+  const hasHelper = helperText != null && helperText !== "";
+  const hasWrap = hasLabel || hasHelper;
+  const buttonNode = /* @__PURE__ */ jsx36(
     "button",
     {
       ref,
+      id: rootId,
       type,
       disabled,
       "aria-invalid": invalid ? true : ariaInvalid,
       className: cn(
-        "stn-date-range-field",
-        sizeClass3(size),
-        fullWidth && "stn-date-range-field--full w100p",
-        invalid && "stn-date-range-field--invalid",
-        isEmpty && "is-empty",
+        "stn-date-range-field",
+        sizeClass3(size),
+        variantClass3(variant),
+        !hasWrap && widthProps.className,
+        fullWidth && "stn-date-range-field--full w100p",
+        invalid && "stn-date-range-field--invalid",
+        isEmpty && "is-empty",
+        !hasWrap && className
+      ),
+      style: !hasWrap ? widthProps.style ?? style : void 0,
+      ...rest,
+      children: /* @__PURE__ */ jsxs27("span", { className: "stn-date-range-field__inner", children: [
+        /* @__PURE__ */ jsxs27("span", { className: "stn-date-range-field__text", children: [
+          /* @__PURE__ */ jsx36("span", { className: cn("stn-date-range-field__value", !startText && "is-placeholder"), children: startText ?? startPlaceholder }),
+          /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__sep", "aria-hidden": "true", children: "~" }),
+          /* @__PURE__ */ jsx36("span", { className: cn("stn-date-range-field__value", !endText && "is-placeholder"), children: endText ?? endPlaceholder })
+        ] }),
+        /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__icon", "aria-hidden": "true" })
+      ] })
+    }
+  );
+  if (!hasWrap) return buttonNode;
+  const resolvedLabelIcon = labelIcon ?? icon;
+  const labelElement = hasLabel ? /* @__PURE__ */ jsxs27("label", { htmlFor: rootId, className: "stn-date-range-field__label", children: [
+    resolvedLabelIcon ? /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__label-icon", "aria-hidden": "true", children: resolveGlyph3(resolvedLabelIcon) }) : null,
+    /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__label-text", children: label }),
+    required && /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__required", "aria-hidden": "true", children: "*" })
+  ] }) : null;
+  const isRow = labelPosition === "left" || labelPosition === "right";
+  return /* @__PURE__ */ jsxs27(
+    "div",
+    {
+      className: cn(
+        "stn-date-range-field-wrap",
+        hasLabel && (isRow ? "stn-date-range-field-wrap--row" : "stn-date-range-field-wrap--col"),
+        hasLabel && labelPosition === "left" && "stn-date-range-field-wrap--label-left",
+        hasLabel && labelPosition === "right" && "stn-date-range-field-wrap--label-right",
+        hasLabel && labelPosition === "top" && "stn-date-range-field-wrap--label-top",
+        invalid && "is-error",
+        widthProps.className,
+        className
+      ),
+      style: widthProps.style ?? style,
+      children: [
+        hasLabel && (labelPosition === "left" || labelPosition === "top") ? labelElement : null,
+        /* @__PURE__ */ jsxs27("div", { className: "stn-date-range-field-wrap__body", children: [
+          buttonNode,
+          hasHelper && /* @__PURE__ */ jsx36(
+            "span",
+            {
+              id: `${rootId}-helper`,
+              className: cn(
+                "stn-date-range-field__helper",
+                invalid && "stn-date-range-field__helper--error"
+              ),
+              children: helperText
+            }
+          )
+        ] }),
+        hasLabel && labelPosition === "right" ? labelElement : null
+      ]
+    }
+  );
+});
+
+// src/components/StnLabelPrefix.tsx
+import { useId as useId12 } from "react";
+import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+function sizeClass4(size) {
+  return size;
+}
+function variantClass4(variant) {
+  return variant;
+}
+function StnLabelPrefix({
+  label,
+  labelIcon,
+  labelPosition = "prefix",
+  required = false,
+  size = "md",
+  variant = "outline",
+  color,
+  error = false,
+  invalid = false,
+  radius,
+  fullWidth = false,
+  width,
+  helperText,
+  disabled = false,
+  children,
+  className,
+  id: idProp,
+  ...rest
+}) {
+  const autoId = useId12();
+  const id = idProp ?? autoId;
+  const isError = error || invalid || color === "error";
+  const hasHelper = helperText != null && helperText !== "";
+  const helperId = hasHelper ? `${id}-helper` : void 0;
+  const widthProps = resolveInputWidthProps("stn-label-prefix", fullWidth, width);
+  const rootClass = cn(
+    "stn-label-prefix",
+    sizeClass4(size),
+    variantClass4(variant),
+    color && color !== "error" && color,
+    labelPosition === "suffix" && "stn-label-prefix--suffix",
+    radius && `radius-${radius}`,
+    !hasHelper && widthProps.className,
+    disabled && "is-disabled",
+    isError && "is-error",
+    !hasHelper && className
+  );
+  const labelSection = /* @__PURE__ */ jsxs28("span", { className: "stn-label-prefix__label", children: [
+    labelIcon != null && /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__icon", "aria-hidden": "true", children: labelIcon }),
+    /* @__PURE__ */ jsxs28("span", { className: "stn-label-prefix__text", children: [
+      label,
+      required && /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__divider", "aria-hidden": "true" })
+  ] });
+  const prefixNode = /* @__PURE__ */ jsxs28(
+    "div",
+    {
+      id: !hasHelper ? id : void 0,
+      className: rootClass,
+      style: !hasHelper ? widthProps.style : void 0,
+      "aria-disabled": disabled || void 0,
+      "aria-invalid": isError || void 0,
+      "aria-describedby": helperId,
+      ...!hasHelper ? rest : {},
+      children: [
+        labelSection,
+        /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__control", children })
+      ]
+    }
+  );
+  if (!hasHelper) {
+    return prefixNode;
+  }
+  return /* @__PURE__ */ jsxs28(
+    "div",
+    {
+      id,
+      className: cn(
+        "stn-label-prefix-wrap",
+        isError && "is-error",
+        widthProps.className,
         className
       ),
-      style: resolvedStyle,
+      style: widthProps.style,
       ...rest,
-      children: /* @__PURE__ */ jsxs27("span", { className: "stn-date-range-field__inner", children: [
-        /* @__PURE__ */ jsxs27("span", { className: "stn-date-range-field__text", children: [
-          /* @__PURE__ */ jsx36("span", { className: cn("stn-date-range-field__value", !startText && "is-placeholder"), children: startText ?? startPlaceholder }),
-          /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__sep", "aria-hidden": "true", children: "~" }),
-          /* @__PURE__ */ jsx36("span", { className: cn("stn-date-range-field__value", !endText && "is-placeholder"), children: endText ?? endPlaceholder })
-        ] }),
-        /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__icon", "aria-hidden": "true" })
-      ] })
+      children: [
+        prefixNode,
+        /* @__PURE__ */ jsx37(
+          "p",
+          {
+            id: helperId,
+            className: cn("stn-label-prefix__helper", isError && "stn-label-prefix__helper--error"),
+            children: helperText
+          }
+        )
+      ]
     }
   );
-});
+}
 
 // src/index.ts
 import {
@@ -3797,18 +4110,19 @@ import {
 } from "@stn-uiux/pub-ui/data/stnSearchRequirement";
 
 // src/patterns/search/StnSearchRequirementBar.tsx
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
 function StnSearchRequirementBar({
   children,
   className,
   density = "default",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: cn(
         "stn-search-requirement",
+        density === "compact" && "compact",
         density === "compact" && "stn-search-requirement--compact",
         className
       ),
@@ -3819,7 +4133,7 @@ function StnSearchRequirementBar({
   );
 }
 function StnSearchRequirementBarFields({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx37("div", { className: cn("stn-search-requirement__fields", className), "data-stn-search-requirement": "fields", ...rest, children });
+  return /* @__PURE__ */ jsx38("div", { className: cn("stn-search-requirement__fields", className), "data-stn-search-requirement": "fields", ...rest, children });
 }
 function StnSearchRequirementBarField({
   label,
@@ -3829,19 +4143,19 @@ function StnSearchRequirementBarField({
   controlClassName,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs28("div", { className: cn("stn-search-requirement__field", className), "data-stn-search-requirement": "field", ...rest, children: [
-    /* @__PURE__ */ jsx37("span", { className: cn("stn-search-requirement__label", labelClassName), children: label }),
-    /* @__PURE__ */ jsx37("div", { className: cn("stn-search-requirement__control", controlClassName), children })
+  return /* @__PURE__ */ jsxs29("div", { className: cn("stn-search-requirement__field", className), "data-stn-search-requirement": "field", ...rest, children: [
+    /* @__PURE__ */ jsx38("span", { className: cn("stn-search-requirement__label", labelClassName), children: label }),
+    /* @__PURE__ */ jsx38("div", { className: cn("stn-search-requirement__control", controlClassName), children })
   ] });
 }
 function StnSearchRequirementBarSearchButton({
   children = "\uAC80\uC0C9",
-  size = "M",
-  icon = /* @__PURE__ */ jsx37(StnIcon, { name: "line/search", size: 16, color: "currentColor" }),
+  size = "md",
+  icon = /* @__PURE__ */ jsx38(StnIcon, { name: "line/search", size: 16, color: "currentColor" }),
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     StnButton,
     {
       size,
@@ -3863,10 +4177,10 @@ function StnSearchRequirementBarExport({
   "aria-label": ariaLabel = "Excel\uBCF4\uB0B4\uAE30",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     StnButton,
     {
-      icon: icon ?? /* @__PURE__ */ jsx37(StnIcon, { name, size: 24, color: "currentColor" }),
+      icon: icon ?? /* @__PURE__ */ jsx38(StnIcon, { name, size: 24, color: "currentColor" }),
       variant,
       size,
       "aria-label": ariaLabel,
@@ -3877,7 +4191,7 @@ function StnSearchRequirementBarExport({
   );
 }
 function StnSearchRequirementBarDivider({ className, ...rest }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "span",
     {
       className: cn("stn-search-requirement__divider", className),
@@ -3909,7 +4223,7 @@ import { createPortal as createPortal2 } from "react-dom";
 import { formatStnDateRangeFieldValue as formatStnDateRangeFieldValue2 } from "@stn-uiux/pub-ui/data/stnDateRangeField";
 
 // src/components/datePicker/StnDateRangePicker.tsx
-import { useCallback as useCallback6, useEffect as useEffect8, useId as useId11, useMemo as useMemo3, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect8, useId as useId13, useMemo as useMemo3, useState as useState8 } from "react";
 import {
   STN_DATE_PICKER_WEEKDAYS
 } from "@stn-uiux/pub-ui/data/stnDatePicker";
@@ -3969,7 +4283,7 @@ function normalizeRange(start, end) {
 }
 
 // src/components/datePicker/StnDateRangePicker.tsx
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 function useDraftRange(value, open) {
   const [draft, setDraft] = useState8(value);
   useEffect8(() => {
@@ -3980,19 +4294,19 @@ function useDraftRange(value, open) {
 function CalendarPanel({ month, range, onPick, onPrev, onNext, showPrev = true, showNext = true }) {
   const days = useMemo3(() => buildMonthGrid(month), [month]);
   const { start, end } = range;
-  return /* @__PURE__ */ jsxs29("div", { className: "stn-date-picker-panel", children: [
-    /* @__PURE__ */ jsxs29("div", { className: "stn-date-picker-panel__header", children: [
-      showPrev ? /* @__PURE__ */ jsx38("button", { type: "button", className: "stn-date-picker-panel__nav", onClick: onPrev, "aria-label": "Previous month", children: "\u2039" }) : /* @__PURE__ */ jsx38("span", { className: "stn-date-picker-panel__nav", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx38("p", { className: "stn-date-picker-panel__title", children: formatMonthTitle(month) }),
-      showNext ? /* @__PURE__ */ jsx38("button", { type: "button", className: "stn-date-picker-panel__nav", onClick: onNext, "aria-label": "Next month", children: "\u203A" }) : /* @__PURE__ */ jsx38("span", { className: "stn-date-picker-panel__nav", "aria-hidden": "true" })
+  return /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-panel", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-panel__header", children: [
+      showPrev ? /* @__PURE__ */ jsx39("button", { type: "button", className: "stn-date-picker-panel__nav", onClick: onPrev, "aria-label": "Previous month", children: "\u2039" }) : /* @__PURE__ */ jsx39("span", { className: "stn-date-picker-panel__nav", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx39("p", { className: "stn-date-picker-panel__title", children: formatMonthTitle(month) }),
+      showNext ? /* @__PURE__ */ jsx39("button", { type: "button", className: "stn-date-picker-panel__nav", onClick: onNext, "aria-label": "Next month", children: "\u203A" }) : /* @__PURE__ */ jsx39("span", { className: "stn-date-picker-panel__nav", "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ jsxs29("table", { className: "stn-date-picker-content", children: [
-      /* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsx38("tr", { children: STN_DATE_PICKER_WEEKDAYS.map((label) => /* @__PURE__ */ jsx38("th", { scope: "col", children: label }, label)) }) }),
-      /* @__PURE__ */ jsx38("tbody", { children: Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx38("tr", { children: days.slice(row * 7, row * 7 + 7).map((cell) => {
+    /* @__PURE__ */ jsxs30("table", { className: "stn-date-picker-content", children: [
+      /* @__PURE__ */ jsx39("thead", { children: /* @__PURE__ */ jsx39("tr", { children: STN_DATE_PICKER_WEEKDAYS.map((label) => /* @__PURE__ */ jsx39("th", { scope: "col", children: label }, label)) }) }),
+      /* @__PURE__ */ jsx39("tbody", { children: Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx39("tr", { children: days.slice(row * 7, row * 7 + 7).map((cell) => {
         const inRange = start && end && isBetweenDays(cell.date, start, end);
         const isStart = start ? isSameDay(cell.date, start) : false;
         const isEnd = end ? isSameDay(cell.date, end) : false;
-        return /* @__PURE__ */ jsx38(
+        return /* @__PURE__ */ jsx39(
           "td",
           {
             className: cn(
@@ -4002,7 +4316,7 @@ function CalendarPanel({ month, range, onPick, onPrev, onNext, showPrev = true,
               isStart && "stn-date-picker-cell--range-start",
               isEnd && "stn-date-picker-cell--range-end"
             ),
-            children: /* @__PURE__ */ jsx38(
+            children: /* @__PURE__ */ jsx39(
               "button",
               {
                 type: "button",
@@ -4024,16 +4338,16 @@ function TimeColumns({ label, value, onChange }) {
   const seconds = value?.getSeconds() ?? 0;
   const base = value ?? /* @__PURE__ */ new Date();
   const patch = (h, m, s) => onChange(setTimePart(base, h, m, s));
-  return /* @__PURE__ */ jsxs29("div", { className: "stn-date-picker-time__side", children: [
-    /* @__PURE__ */ jsx38("span", { className: "stn-date-picker-time__label", children: label }),
-    /* @__PURE__ */ jsxs29("div", { className: "stn-date-picker-time__columns", children: [
-      /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-time__side", children: [
+    /* @__PURE__ */ jsx39("span", { className: "stn-date-picker-time__label", children: label }),
+    /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-time__columns", children: [
+      /* @__PURE__ */ jsx39(
         StnScroll,
         {
           variant: "arrows",
           size: "thin",
           className: "stn-date-picker-time__scroll",
-          children: /* @__PURE__ */ jsx38("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} hour`, children: Array.from({ length: 24 }, (_, h) => /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
+          children: /* @__PURE__ */ jsx39("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} hour`, children: Array.from({ length: 24 }, (_, h) => /* @__PURE__ */ jsx39("li", { children: /* @__PURE__ */ jsx39(
             "button",
             {
               type: "button",
@@ -4044,13 +4358,13 @@ function TimeColumns({ label, value, onChange }) {
           ) }, h)) })
         }
       ),
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         StnScroll,
         {
           variant: "arrows",
           size: "thin",
           className: "stn-date-picker-time__scroll",
-          children: /* @__PURE__ */ jsx38("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} minute`, children: Array.from({ length: 60 }, (_, m) => /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
+          children: /* @__PURE__ */ jsx39("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} minute`, children: Array.from({ length: 60 }, (_, m) => /* @__PURE__ */ jsx39("li", { children: /* @__PURE__ */ jsx39(
             "button",
             {
               type: "button",
@@ -4061,13 +4375,13 @@ function TimeColumns({ label, value, onChange }) {
           ) }, m)) })
         }
       ),
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         StnScroll,
         {
           variant: "arrows",
           size: "thin",
           className: "stn-date-picker-time__scroll",
-          children: /* @__PURE__ */ jsx38("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} second`, children: Array.from({ length: 60 }, (_, s) => /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
+          children: /* @__PURE__ */ jsx39("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} second`, children: Array.from({ length: 60 }, (_, s) => /* @__PURE__ */ jsx39("li", { children: /* @__PURE__ */ jsx39(
             "button",
             {
               type: "button",
@@ -4092,7 +4406,7 @@ function StnDateRangePicker({
   style,
   anchorRect
 }) {
-  const titleId = useId11();
+  const titleId = useId13();
   const [draft, setDraft] = useDraftRange(value, open);
   const [leftMonth, setLeftMonth] = useState8(() => startOfMonth(draft.start ?? draft.end ?? /* @__PURE__ */ new Date()));
   useEffect8(() => {
@@ -4146,7 +4460,7 @@ function StnDateRangePicker({
     left: anchorRect.left,
     ...style
   } : style ?? {};
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       className: cn("stn-date-picker-dropdown", className),
@@ -4154,10 +4468,10 @@ function StnDateRangePicker({
       role: "dialog",
       "aria-modal": "false",
       "aria-labelledby": titleId,
-      children: /* @__PURE__ */ jsxs29("div", { className: "stn-date-picker-dropdown__body", children: [
-        /* @__PURE__ */ jsx38("span", { id: titleId, className: "stn-sf__visually-hidden", children: "Date range picker" }),
-        /* @__PURE__ */ jsxs29("div", { className: "stn-date-picker-dropdown__panels", children: [
-          /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-dropdown__body", children: [
+        /* @__PURE__ */ jsx39("span", { id: titleId, className: "stn-sf__visually-hidden", children: "Date range picker" }),
+        /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-dropdown__panels", children: [
+          /* @__PURE__ */ jsx39(
             CalendarPanel,
             {
               month: leftMonth,
@@ -4168,7 +4482,7 @@ function StnDateRangePicker({
               showNext: false
             }
           ),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             CalendarPanel,
             {
               month: rightMonth,
@@ -4180,8 +4494,8 @@ function StnDateRangePicker({
             }
           )
         ] }),
-        showTime ? /* @__PURE__ */ jsxs29("div", { className: "stn-date-picker-time", children: [
-          /* @__PURE__ */ jsx38(
+        showTime ? /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-time", children: [
+          /* @__PURE__ */ jsx39(
             TimeColumns,
             {
               label: "\uC2DC\uC791",
@@ -4189,7 +4503,7 @@ function StnDateRangePicker({
               onChange: (start) => updateDraft({ ...draft, start })
             }
           ),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             TimeColumns,
             {
               label: "\uC885\uB8CC",
@@ -4198,14 +4512,14 @@ function StnDateRangePicker({
             }
           )
         ] }) : null,
-        /* @__PURE__ */ jsx38("div", { className: "stn-date-picker-footer", children: /* @__PURE__ */ jsx38(StnButton, { size: "md", variant: "contained", onClick: handleApply, disabled: !draft.start || !draft.end, children: "\uD655\uC778" }) })
+        /* @__PURE__ */ jsx39("div", { className: "stn-date-picker-footer", children: /* @__PURE__ */ jsx39(StnButton, { size: "md", variant: "contained", onClick: handleApply, disabled: !draft.start || !draft.end, children: "\uD655\uC778" }) })
       ] })
     }
   );
 }
 
 // src/components/datePicker/StnDateRangePickerField.tsx
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
 function useControllableRange(controlled, defaultValue, onChange) {
   const [internal, setInternal] = useState9(defaultValue);
   const value = controlled ?? internal;
@@ -4219,18 +4533,25 @@ function useControllableRange(controlled, defaultValue, onChange) {
   return [value, setValue];
 }
 var EMPTY_RANGE = { start: null, end: null };
+function formatDateOnly(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
 function StnDateRangePickerField({
   value: valueProp,
   defaultValue = EMPTY_RANGE,
   onChange,
   showTime = true,
-  format = formatStnDateRangeFieldValue2,
+  format: formatProp,
   className,
   pickerClassName,
   pickerStyle,
   disabled,
   ...fieldProps
 }) {
+  const format = formatProp ?? (showTime ? formatStnDateRangeFieldValue2 : formatDateOnly);
   const [value, setValue] = useControllableRange(valueProp, defaultValue, onChange);
   const [open, setOpen] = useState9(false);
   const [anchorRect, setAnchorRect] = useState9(null);
@@ -4270,8 +4591,8 @@ function StnDateRangePickerField({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open]);
-  return /* @__PURE__ */ jsxs30("div", { ref: rootRef, className: cn("stn-date-picker-field", className), children: [
-    /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs31("div", { ref: rootRef, className: cn("stn-date-picker-field", className), children: [
+    /* @__PURE__ */ jsx40(
       StnDateRangeField,
       {
         ref: triggerRef,
@@ -4291,7 +4612,7 @@ function StnDateRangePickerField({
       }
     ),
     open && typeof document !== "undefined" ? createPortal2(
-      /* @__PURE__ */ jsx39("div", { ref: panelRef, children: /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40("div", { ref: panelRef, children: /* @__PURE__ */ jsx40(
         StnDateRangePicker,
         {
           open: true,
@@ -4310,45 +4631,49 @@ function StnDateRangePickerField({
 }
 
 // src/patterns/search/StnSearchRequirementBarDemo.tsx
-import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
 var ALL_OPTIONS = [{ value: "", label: "\uC804\uCCB4" }];
 function StnSearchRequirementBarDemo({ onSearch, onExport, className }) {
   const demo = STN_SEARCH_REQUIREMENT_DEMO_FIELDS;
-  return /* @__PURE__ */ jsxs31(StnSearchRequirementBar, { className, children: [
-    /* @__PURE__ */ jsxs31(StnSearchRequirementBar.Fields, { children: [
-      /* @__PURE__ */ jsx40(StnSearchRequirementBar.Field, { label: demo.reportTypeText.label, children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs32(StnSearchRequirementBar, { className, children: [
+    /* @__PURE__ */ jsxs32(StnSearchRequirementBar.Fields, { children: [
+      /* @__PURE__ */ jsx41(
         StnTextField,
         {
-          size: "M",
+          label: demo.reportTypeText.label,
+          size: "md",
           defaultValue: demo.reportTypeText.value,
-          width: 140,
+          width: "w140",
           "aria-label": demo.reportTypeText.label
         }
-      ) }),
-      /* @__PURE__ */ jsx40(StnSearchRequirementBar.Field, { label: demo.reportTypeSelect.label, children: /* @__PURE__ */ jsx40(
+      ),
+      /* @__PURE__ */ jsx41(
         StnDropdown,
         {
+          label: demo.reportTypeSelect.label,
           size: "md",
-          width: 130,
+          width: "w140",
           options: ALL_OPTIONS,
           defaultValue: demo.reportTypeSelect.value,
           "aria-label": demo.reportTypeSelect.label
         }
-      ) }),
-      /* @__PURE__ */ jsx40(StnSearchRequirementBar.Field, { label: demo.periodType.label, children: /* @__PURE__ */ jsx40(
+      ),
+      /* @__PURE__ */ jsx41(
         StnDropdown,
         {
+          label: demo.periodType.label,
           size: "md",
-          width: 130,
+          width: "w140",
           options: ALL_OPTIONS,
           defaultValue: demo.periodType.value,
           "aria-label": demo.periodType.label
         }
-      ) }),
-      /* @__PURE__ */ jsx40(StnSearchRequirementBar.Field, { label: demo.period.label, children: /* @__PURE__ */ jsx40(
+      ),
+      /* @__PURE__ */ jsx41(
         StnDateRangePickerField,
         {
-          size: "M",
+          label: demo.period.label,
+          size: "md",
           defaultValue: {
             start: parseStnDateRangeFieldValue(STN_DATE_RANGE_FIELD_DEMO.start),
             end: parseStnDateRangeFieldValue(STN_DATE_RANGE_FIELD_DEMO.end)
@@ -4356,10 +4681,10 @@ function StnSearchRequirementBarDemo({ onSearch, onExport, className }) {
           showTime: true,
           "aria-label": demo.period.label
         }
-      ) })
+      )
     ] }),
-    /* @__PURE__ */ jsx40(StnSearchRequirementBar.SearchButton, { onClick: onSearch }),
-    /* @__PURE__ */ jsx40(StnSearchRequirementBar.Export, { onClick: onExport })
+    /* @__PURE__ */ jsx41(StnSearchRequirementBar.SearchButton, { onClick: onSearch }),
+    /* @__PURE__ */ jsx41(StnSearchRequirementBar.Export, { onClick: onExport })
   ] });
 }
 
@@ -4373,8 +4698,8 @@ import {
 } from "@stn-uiux/pub-ui/data/stnHeader";
 
 // src/patterns/header/StnHeader.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
-function variantClass3(variant) {
+import { jsx as jsx42 } from "react/jsx-runtime";
+function variantClass5(variant) {
   if (variant === "page") return "stn-header--page";
   return void 0;
 }
@@ -4400,12 +4725,12 @@ function StnHeader({
     ...dynamicStyles,
     ...style
   };
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "header",
     {
       className: cn(
         "stn-header",
-        variantClass3(variant),
+        variantClass5(variant),
         isNamedPadding ? `padding-${padding}` : void 0,
         isNamedGap ? `gap-${gap}` : void 0,
         className
@@ -4418,20 +4743,20 @@ function StnHeader({
   );
 }
 function StnHeaderLeft({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx41("div", { className: cn("stn-header__left", className), "data-stn-header-region": "left", ...rest, children });
+  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header__left", className), "data-stn-header-region": "left", ...rest, children });
 }
 function StnHeaderCenter({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx41("div", { className: cn("stn-header__center", className), "data-stn-header-region": "center", ...rest, children });
+  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header__center", className), "data-stn-header-region": "center", ...rest, children });
 }
 function StnHeaderRight({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx41("div", { className: cn("stn-header__right", className), "data-stn-header-region": "right", ...rest, children });
+  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header__right", className), "data-stn-header-region": "right", ...rest, children });
 }
 StnHeader.Left = StnHeaderLeft;
 StnHeader.Center = StnHeaderCenter;
 StnHeader.Right = StnHeaderRight;
 function StnHeaderPageTitle({ children, className, title, ...rest }) {
   const autoTitle = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "h1",
     {
       className: cn("stn-header__page-title", className),
@@ -4443,7 +4768,7 @@ function StnHeaderPageTitle({ children, className, title, ...rest }) {
 }
 function StnHeaderSubTitle({ children, className, title, ...rest }) {
   const autoTitle = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "span",
     {
       className: cn("stn-header__subtitle", className),
@@ -4455,7 +4780,7 @@ function StnHeaderSubTitle({ children, className, title, ...rest }) {
 }
 function StnHeaderContextTitle({ children, className, title, ...rest }) {
   const autoTitle = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "span",
     {
       className: cn("stn-header__context-title", className),
@@ -4466,7 +4791,7 @@ function StnHeaderContextTitle({ children, className, title, ...rest }) {
   );
 }
 function StnHeaderToolbar({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx41("div", { className: cn("stn-header-toolbar", className), "data-stn-header-toolbar": true, ...rest, children });
+  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header-toolbar", className), "data-stn-header-toolbar": true, ...rest, children });
 }
 
 // src/index.ts
@@ -4484,7 +4809,7 @@ import {
   STN_LAYER0_BACKGROUND_DEMO_IMAGES,
   STN_LAYER0_MAP_LIGHT_OVERLAY
 } from "@stn-uiux/pub-ui/data/stnLayer0Background";
-import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 function overlayStyle(overlay) {
   if (overlay == null || overlay <= 0) return void 0;
   const pct = `${Math.min(100, Math.max(0, overlay * 100))}%`;
@@ -4533,15 +4858,15 @@ function StnLayer0Background({
   const isImage = kind === "image" || Boolean(src || srcDark);
   if (isImage) {
     const paired = Boolean(src && srcDark);
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx43(
       "div",
       {
         className: cn("stn-layer0-bg", "image", className),
         "aria-hidden": alt === "" ? true : void 0,
         style: { ...overlayStyle(overlay), ...style },
         ...rest,
-        children: /* @__PURE__ */ jsxs32("div", { className: "stn-layer0-bg__media", children: [
-          src ? /* @__PURE__ */ jsx42(
+        children: /* @__PURE__ */ jsxs33("div", { className: "stn-layer0-bg__media", children: [
+          src ? /* @__PURE__ */ jsx43(
             "img",
             {
               className: cn("stn-layer0-bg__img", paired && "light"),
@@ -4550,7 +4875,7 @@ function StnLayer0Background({
               decoding: "async"
             }
           ) : null,
-          srcDark ? /* @__PURE__ */ jsx42(
+          srcDark ? /* @__PURE__ */ jsx43(
             "img",
             {
               className: cn("stn-layer0-bg__img", paired ? "dark" : void 0),
@@ -4559,13 +4884,13 @@ function StnLayer0Background({
               decoding: "async"
             }
           ) : null,
-          overlay != null && overlay > 0 ? /* @__PURE__ */ jsx42("div", { className: "stn-layer0-bg__overlay", "aria-hidden": "true" }) : null,
-          overlayDarkRadial ? /* @__PURE__ */ jsx42("div", { className: "stn-layer0-bg__overlay radial", "aria-hidden": "true" }) : null
+          overlay != null && overlay > 0 ? /* @__PURE__ */ jsx43("div", { className: "stn-layer0-bg__overlay", "aria-hidden": "true" }) : null,
+          overlayDarkRadial ? /* @__PURE__ */ jsx43("div", { className: "stn-layer0-bg__overlay radial", "aria-hidden": "true" }) : null
         ] })
       }
     );
   }
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       className: cn("stn-layer0-bg", "color", color, className),
@@ -4602,7 +4927,7 @@ import {
 
 // src/components/StnEventBanner.tsx
 import React3 from "react";
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var SEVERITY_ICONS2 = {
   critical: "fill/alert4",
   major: "fill/alert3",
@@ -4610,7 +4935,7 @@ var SEVERITY_ICONS2 = {
   warning: "fill/alert1"
 };
 function DefaultTriangleIcon() {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "svg",
     {
       width: "20",
@@ -4620,7 +4945,7 @@ function DefaultTriangleIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "path",
           {
             d: "M10.29 3.86L1.82 18A2 2 0 0 0 3.54 21H20.46A2 2 0 0 0 22.18 18L13.71 3.86A2 2 0 0 0 10.29 3.86Z",
@@ -4630,17 +4955,17 @@ function DefaultTriangleIcon() {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx43("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx43("circle", { cx: "12", cy: "17", r: "1", fill: "currentColor" })
+        /* @__PURE__ */ jsx44("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx44("circle", { cx: "12", cy: "17", r: "1", fill: "currentColor" })
       ]
     }
   );
 }
 function resolveDefaultIcon(severity) {
   if (severity === "critical") {
-    return /* @__PURE__ */ jsx43(DefaultTriangleIcon, {});
+    return /* @__PURE__ */ jsx44(DefaultTriangleIcon, {});
   }
-  return /* @__PURE__ */ jsx43(StnIcon, { name: SEVERITY_ICONS2[severity] || "fill/alert4", size: 20 });
+  return /* @__PURE__ */ jsx44(StnIcon, { name: SEVERITY_ICONS2[severity] || "fill/alert4", size: 20 });
 }
 var StnEventBanner = React3.forwardRef(
   ({
@@ -4659,7 +4984,7 @@ var StnEventBanner = React3.forwardRef(
     id,
     ...restProps
   }, ref) => {
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs34(
       "div",
       {
         ref,
@@ -4676,16 +5001,16 @@ var StnEventBanner = React3.forwardRef(
         ),
         ...restProps,
         children: [
-          /* @__PURE__ */ jsxs33("div", { className: "stn-event-banner__left", children: [
-            /* @__PURE__ */ jsx43("div", { className: "stn-event-banner__icon-wrap", children: icon ?? resolveDefaultIcon(severity) }),
-            /* @__PURE__ */ jsxs33("div", { className: "stn-event-banner__text", children: [
-              title && /* @__PURE__ */ jsx43("span", { className: "stn-event-banner__title", title: typeof title === "string" ? title : void 0, children: title }),
-              time && /* @__PURE__ */ jsx43("span", { className: "stn-event-banner__time", title: typeof time === "string" ? time : void 0, children: time })
+          /* @__PURE__ */ jsxs34("div", { className: "stn-event-banner__left", children: [
+            /* @__PURE__ */ jsx44("div", { className: "stn-event-banner__icon-wrap", children: icon ?? resolveDefaultIcon(severity) }),
+            /* @__PURE__ */ jsxs34("div", { className: "stn-event-banner__text", children: [
+              title && /* @__PURE__ */ jsx44("span", { className: "stn-event-banner__title", title: typeof title === "string" ? title : void 0, children: title }),
+              time && /* @__PURE__ */ jsx44("span", { className: "stn-event-banner__time", title: typeof time === "string" ? time : void 0, children: time })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs33("div", { className: "stn-event-banner__actions", children: [
+          /* @__PURE__ */ jsxs34("div", { className: "stn-event-banner__actions", children: [
             actions,
-            actionText && /* @__PURE__ */ jsx43(
+            actionText && /* @__PURE__ */ jsx44(
               "button",
               {
                 type: "button",
@@ -4694,7 +5019,7 @@ var StnEventBanner = React3.forwardRef(
                 children: actionText
               }
             ),
-            onClose && /* @__PURE__ */ jsx43(
+            onClose && /* @__PURE__ */ jsx44(
               "button",
               {
                 type: "button",
@@ -4713,9 +5038,9 @@ var StnEventBanner = React3.forwardRef(
 StnEventBanner.displayName = "StnEventBanner";
 
 // src/patterns/scaffold/StnLoadingSkeleton.tsx
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 function StnLoadingSkeletonLine({ width = "full", className, style, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn(
@@ -4731,7 +5056,7 @@ function StnLoadingSkeletonLine({ width = "full", className, style, ...rest }) {
   );
 }
 function StnLoadingSkeletonBlock({ minHeight = 48, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn("stn-loading-skeleton__block", className),
@@ -4742,7 +5067,7 @@ function StnLoadingSkeletonBlock({ minHeight = 48, className, style, ...rest })
   );
 }
 function StnLoadingSkeletonCircle({ size = 40, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn("stn-loading-skeleton__circle", className),
@@ -4753,7 +5078,7 @@ function StnLoadingSkeletonCircle({ size = 40, className, style, ...rest }) {
   );
 }
 function StnLoadingSkeletonProfile({ avatarSize = 40, className, style, ...rest }) {
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       className: cn("stn-loading-skeleton--profile", className),
@@ -4762,17 +5087,17 @@ function StnLoadingSkeletonProfile({ avatarSize = 40, className, style, ...rest
       "aria-label": "\uD504\uB85C\uD544 \uB85C\uB529 \uC911",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx44(StnLoadingSkeletonCircle, { size: avatarSize }),
-        /* @__PURE__ */ jsxs34("div", { className: "stn-loading-skeleton__profile-content", children: [
-          /* @__PURE__ */ jsx44(StnLoadingSkeletonLine, { width: "medium" }),
-          /* @__PURE__ */ jsx44(StnLoadingSkeletonLine, { width: "short" })
+        /* @__PURE__ */ jsx45(StnLoadingSkeletonCircle, { size: avatarSize }),
+        /* @__PURE__ */ jsxs35("div", { className: "stn-loading-skeleton__profile-content", children: [
+          /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width: "medium" }),
+          /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width: "short" })
         ] })
       ]
     }
   );
 }
 function StnLoadingSkeletonWidget({ lines = 4, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn("stn-loading-skeleton", "stn-loading-skeleton--widget", className),
@@ -4780,12 +5105,12 @@ function StnLoadingSkeletonWidget({ lines = 4, className, style, ...rest }) {
       "aria-busy": "true",
       "aria-label": "\uB85C\uB529 \uC911",
       ...rest,
-      children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx44(StnLoadingSkeletonLine, { width: i % 3 === 0 ? "short" : i % 2 === 0 ? "medium" : "full" }, i))
+      children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width: i % 3 === 0 ? "short" : i % 2 === 0 ? "medium" : "full" }, i))
     }
   );
 }
 function StnLoadingSkeletonTable({ rows = 5, cols = 4, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn("stn-loading-skeleton", "stn-loading-skeleton--table", className),
@@ -4793,7 +5118,7 @@ function StnLoadingSkeletonTable({ rows = 5, cols = 4, className, style, ...rest
       "aria-busy": "true",
       "aria-label": "\uD14C\uC774\uBE14 \uB85C\uB529 \uC911",
       ...rest,
-      children: Array.from({ length: rows }, (_, row) => /* @__PURE__ */ jsx44("div", { className: "stn-loading-skeleton__table-row", children: Array.from({ length: cols }, (_2, col) => /* @__PURE__ */ jsx44(StnLoadingSkeletonLine, {}, col)) }, row))
+      children: Array.from({ length: rows }, (_, row) => /* @__PURE__ */ jsx45("div", { className: "stn-loading-skeleton__table-row", children: Array.from({ length: cols }, (_2, col) => /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, {}, col)) }, row))
     }
   );
 }
@@ -4812,23 +5137,23 @@ function StnLoadingSkeletonRoot({
   ...rest
 }) {
   if (children != null) {
-    return /* @__PURE__ */ jsx44("div", { className: cn("stn-loading-skeleton", className), style, "aria-busy": "true", ...rest, children });
+    return /* @__PURE__ */ jsx45("div", { className: cn("stn-loading-skeleton", className), style, "aria-busy": "true", ...rest, children });
   }
   const resolvedVariant = variant ?? "line";
   switch (resolvedVariant) {
     case "circle":
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonCircle, { size, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonCircle, { size, className, style, ...rest });
     case "block":
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonBlock, { minHeight, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonBlock, { minHeight, className, style, ...rest });
     case "profile":
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonProfile, { avatarSize: avatarSize ?? size, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonProfile, { avatarSize: avatarSize ?? size, className, style, ...rest });
     case "widget":
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonWidget, { lines, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonWidget, { lines, className, style, ...rest });
     case "table":
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonTable, { rows, cols, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonTable, { rows, cols, className, style, ...rest });
     case "line":
     default:
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonLine, { width, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width, className, style, ...rest });
   }
 }
 var StnLoadingSkeleton = Object.assign(StnLoadingSkeletonRoot, {
@@ -4841,7 +5166,7 @@ var StnLoadingSkeleton = Object.assign(StnLoadingSkeletonRoot, {
 });
 
 // src/components/topology/StnTopologyRing.tsx
-import { useId as useId12 } from "react";
+import { useId as useId14 } from "react";
 
 // src/components/topology/stnTopologyShared.ts
 var STN_TOPOLOGY_NODE_SHAPES = [
@@ -4949,7 +5274,7 @@ function ringOrbitRadius(orbit, ringCount, baseRadius, gap = 36) {
 }
 
 // src/components/topology/StnTopologyNodeMark.tsx
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 function renderTopologyIcon(icon, color, px) {
   if (!icon) return null;
   if (typeof icon !== "string") return icon;
@@ -4965,56 +5290,56 @@ function renderTopologyIcon(icon, color, px) {
   };
   switch (icon) {
     case "server":
-      return /* @__PURE__ */ jsxs35("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx45("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx45("line", { x1: "6", y1: "6", x2: "6.01", y2: "6" }),
-        /* @__PURE__ */ jsx45("line", { x1: "6", y1: "18", x2: "6.01", y2: "18" })
+      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx46("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx46("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx46("line", { x1: "6", y1: "6", x2: "6.01", y2: "6" }),
+        /* @__PURE__ */ jsx46("line", { x1: "6", y1: "18", x2: "6.01", y2: "18" })
       ] });
     case "cloud":
-      return /* @__PURE__ */ jsx45("svg", { ...iconProps, children: /* @__PURE__ */ jsx45("path", { d: "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" }) });
+      return /* @__PURE__ */ jsx46("svg", { ...iconProps, children: /* @__PURE__ */ jsx46("path", { d: "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" }) });
     case "ai":
-      return /* @__PURE__ */ jsxs35("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
-        /* @__PURE__ */ jsx45("rect", { x: "9", y: "9", width: "6", height: "6" }),
-        /* @__PURE__ */ jsx45("line", { x1: "9", y1: "1", x2: "9", y2: "4" }),
-        /* @__PURE__ */ jsx45("line", { x1: "15", y1: "1", x2: "15", y2: "4" }),
-        /* @__PURE__ */ jsx45("line", { x1: "9", y1: "20", x2: "9", y2: "23" }),
-        /* @__PURE__ */ jsx45("line", { x1: "15", y1: "20", x2: "15", y2: "23" }),
-        /* @__PURE__ */ jsx45("line", { x1: "20", y1: "9", x2: "23", y2: "9" }),
-        /* @__PURE__ */ jsx45("line", { x1: "20", y1: "14", x2: "23", y2: "14" }),
-        /* @__PURE__ */ jsx45("line", { x1: "1", y1: "9", x2: "4", y2: "9" }),
-        /* @__PURE__ */ jsx45("line", { x1: "1", y1: "14", x2: "4", y2: "14" })
+      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx46("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
+        /* @__PURE__ */ jsx46("rect", { x: "9", y: "9", width: "6", height: "6" }),
+        /* @__PURE__ */ jsx46("line", { x1: "9", y1: "1", x2: "9", y2: "4" }),
+        /* @__PURE__ */ jsx46("line", { x1: "15", y1: "1", x2: "15", y2: "4" }),
+        /* @__PURE__ */ jsx46("line", { x1: "9", y1: "20", x2: "9", y2: "23" }),
+        /* @__PURE__ */ jsx46("line", { x1: "15", y1: "20", x2: "15", y2: "23" }),
+        /* @__PURE__ */ jsx46("line", { x1: "20", y1: "9", x2: "23", y2: "9" }),
+        /* @__PURE__ */ jsx46("line", { x1: "20", y1: "14", x2: "23", y2: "14" }),
+        /* @__PURE__ */ jsx46("line", { x1: "1", y1: "9", x2: "4", y2: "9" }),
+        /* @__PURE__ */ jsx46("line", { x1: "1", y1: "14", x2: "4", y2: "14" })
       ] });
     case "network":
-      return /* @__PURE__ */ jsxs35("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("rect", { x: "2", y: "2", width: "6", height: "6", rx: "1" }),
-        /* @__PURE__ */ jsx45("rect", { x: "16", y: "2", width: "6", height: "6", rx: "1" }),
-        /* @__PURE__ */ jsx45("rect", { x: "9", y: "16", width: "6", height: "6", rx: "1" }),
-        /* @__PURE__ */ jsx45("line", { x1: "5", y1: "8", x2: "5", y2: "12" }),
-        /* @__PURE__ */ jsx45("line", { x1: "19", y1: "8", x2: "19", y2: "12" }),
-        /* @__PURE__ */ jsx45("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-        /* @__PURE__ */ jsx45("line", { x1: "12", y1: "12", x2: "12", y2: "16" })
+      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx46("rect", { x: "2", y: "2", width: "6", height: "6", rx: "1" }),
+        /* @__PURE__ */ jsx46("rect", { x: "16", y: "2", width: "6", height: "6", rx: "1" }),
+        /* @__PURE__ */ jsx46("rect", { x: "9", y: "16", width: "6", height: "6", rx: "1" }),
+        /* @__PURE__ */ jsx46("line", { x1: "5", y1: "8", x2: "5", y2: "12" }),
+        /* @__PURE__ */ jsx46("line", { x1: "19", y1: "8", x2: "19", y2: "12" }),
+        /* @__PURE__ */ jsx46("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+        /* @__PURE__ */ jsx46("line", { x1: "12", y1: "12", x2: "12", y2: "16" })
       ] });
     case "shield":
-      return /* @__PURE__ */ jsx45("svg", { ...iconProps, children: /* @__PURE__ */ jsx45("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
+      return /* @__PURE__ */ jsx46("svg", { ...iconProps, children: /* @__PURE__ */ jsx46("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
     case "user":
-      return /* @__PURE__ */ jsxs35("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
-        /* @__PURE__ */ jsx45("circle", { cx: "12", cy: "7", r: "4" })
+      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx46("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ jsx46("circle", { cx: "12", cy: "7", r: "4" })
       ] });
     case "database":
-      return /* @__PURE__ */ jsxs35("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
-        /* @__PURE__ */ jsx45("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }),
-        /* @__PURE__ */ jsx45("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" })
+      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx46("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
+        /* @__PURE__ */ jsx46("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }),
+        /* @__PURE__ */ jsx46("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" })
       ] });
     case "wifi":
-      return /* @__PURE__ */ jsxs35("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
-        /* @__PURE__ */ jsx45("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
-        /* @__PURE__ */ jsx45("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
-        /* @__PURE__ */ jsx45("line", { x1: "12", y1: "20", x2: "12.01", y2: "20" })
+      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx46("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
+        /* @__PURE__ */ jsx46("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
+        /* @__PURE__ */ jsx46("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
+        /* @__PURE__ */ jsx46("line", { x1: "12", y1: "20", x2: "12.01", y2: "20" })
       ] });
     default:
       return null;
@@ -5032,11 +5357,11 @@ function NodeShape({
 }) {
   const filter = glow ? `drop-shadow(0 0 8px ${glow})` : "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4))";
   if (shape === "circle") {
-    return /* @__PURE__ */ jsx45("circle", { cx: x, cy: y, r, fill, stroke, strokeWidth, style: { filter } });
+    return /* @__PURE__ */ jsx46("circle", { cx: x, cy: y, r, fill, stroke, strokeWidth, style: { filter } });
   }
   if (shape === "square") {
     const size = r * 2;
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx46(
       "rect",
       {
         x: x - r,
@@ -5051,7 +5376,7 @@ function NodeShape({
       }
     );
   }
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "polygon",
     {
       points: topologyShapePoints(shape, x, y, r),
@@ -5094,7 +5419,7 @@ function StnTopologyNodeMark({
   const countText = formatTopologyCount(count);
   const iconPx = metrics.icon;
   const showCornerBadge = !isCount && count != null && count !== "";
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "g",
     {
       className: cn("stn-topology-node", selected && "stn-topology-node--selected", className),
@@ -5106,7 +5431,7 @@ function StnTopologyNodeMark({
       style: { cursor: onClick ? "pointer" : "default" },
       ...rest,
       children: [
-        isAlert && /* @__PURE__ */ jsxs35(
+        isAlert && /* @__PURE__ */ jsxs36(
           "circle",
           {
             className: "stn-topology-node__pulse",
@@ -5118,13 +5443,13 @@ function StnTopologyNodeMark({
             strokeWidth: "1.5",
             opacity: "0.55",
             children: [
-              /* @__PURE__ */ jsx45("animate", { attributeName: "r", values: `${r + 4};${r + 12};${r + 4}`, dur: "2s", repeatCount: "indefinite" }),
-              /* @__PURE__ */ jsx45("animate", { attributeName: "opacity", values: "0.75;0.15;0.75", dur: "2s", repeatCount: "indefinite" })
+              /* @__PURE__ */ jsx46("animate", { attributeName: "r", values: `${r + 4};${r + 12};${r + 4}`, dur: "2s", repeatCount: "indefinite" }),
+              /* @__PURE__ */ jsx46("animate", { attributeName: "opacity", values: "0.75;0.15;0.75", dur: "2s", repeatCount: "indefinite" })
             ]
           }
         ),
-        selected && /* @__PURE__ */ jsx45("circle", { cx: x, cy: y, r: r + 6, fill: "none", stroke: "#00e5ff", strokeWidth: "1.5", strokeDasharray: "3 3" }),
-        /* @__PURE__ */ jsx45(
+        selected && /* @__PURE__ */ jsx46("circle", { cx: x, cy: y, r: r + 6, fill: "none", stroke: "#00e5ff", strokeWidth: "1.5", strokeDasharray: "3 3" }),
+        /* @__PURE__ */ jsx46(
           NodeShape,
           {
             shape,
@@ -5137,7 +5462,7 @@ function StnTopologyNodeMark({
             glow: isAlert || isCount ? tone.glow : ""
           }
         ),
-        isCount ? /* @__PURE__ */ jsx45(
+        isCount ? /* @__PURE__ */ jsx46(
           "text",
           {
             x,
@@ -5150,10 +5475,10 @@ function StnTopologyNodeMark({
             style: { textShadow: "0 1px 2px rgba(0, 0, 0, 0.85)" },
             children: countText
           }
-        ) : /* @__PURE__ */ jsx45("g", { transform: `translate(${x - iconPx / 2}, ${y - iconPx / 2})`, children: renderTopologyIcon(icon, stroke, iconPx) }),
-        showCornerBadge && /* @__PURE__ */ jsxs35("g", { className: "stn-topology-node__badge", children: [
-          /* @__PURE__ */ jsx45("circle", { cx: x + r * 0.72, cy: y - r * 0.72, r: Math.max(6, r * 0.38), fill: stroke, stroke: "rgba(6,7,15,0.9)", strokeWidth: "1" }),
-          /* @__PURE__ */ jsx45(
+        ) : /* @__PURE__ */ jsx46("g", { transform: `translate(${x - iconPx / 2}, ${y - iconPx / 2})`, children: renderTopologyIcon(icon, stroke, iconPx) }),
+        showCornerBadge && /* @__PURE__ */ jsxs36("g", { className: "stn-topology-node__badge", children: [
+          /* @__PURE__ */ jsx46("circle", { cx: x + r * 0.72, cy: y - r * 0.72, r: Math.max(6, r * 0.38), fill: stroke, stroke: "rgba(6,7,15,0.9)", strokeWidth: "1" }),
+          /* @__PURE__ */ jsx46(
             "text",
             {
               x: x + r * 0.72,
@@ -5167,7 +5492,7 @@ function StnTopologyNodeMark({
             }
           )
         ] }),
-        showLabel && label && /* @__PURE__ */ jsx45(
+        showLabel && label && /* @__PURE__ */ jsx46(
           "text",
           {
             x,
@@ -5180,7 +5505,7 @@ function StnTopologyNodeMark({
             children: label
           }
         ),
-        showStatus && resolvedStatusLabel && /* @__PURE__ */ jsxs35(
+        showStatus && resolvedStatusLabel && /* @__PURE__ */ jsxs36(
           "text",
           {
             x,
@@ -5211,11 +5536,11 @@ function StnTopologyNodePreview({
   const r = STN_TOPOLOGY_NODE_SIZE[size].r;
   const w = width ?? r * 2 + (showLabel ? 88 : 28);
   const h = height ?? r * 2 + (showLabel || showStatus ? 56 : 28);
-  return /* @__PURE__ */ jsx45("svg", { className: "stn-topology-node-preview", width: w, height: h, viewBox: `0 0 ${w} ${h}`, overflow: "visible", children: /* @__PURE__ */ jsx45(StnTopologyNodeMark, { x: w / 2, y: h / 2, size, showLabel, showStatus, ...rest }) });
+  return /* @__PURE__ */ jsx46("svg", { className: "stn-topology-node-preview", width: w, height: h, viewBox: `0 0 ${w} ${h}`, overflow: "visible", children: /* @__PURE__ */ jsx46(StnTopologyNodeMark, { x: w / 2, y: h / 2, size, showLabel, showStatus, ...rest }) });
 }
 
 // src/components/topology/StnTopologyRing.tsx
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 function StnTopologyRing({
   core = {
     title: "\uC5D0\uC2A4\uD2F0\uC5D4\uC778\uD3EC\uD14D",
@@ -5236,8 +5561,8 @@ function StnTopologyRing({
   style,
   ...rest
 }) {
-  const gradientId = useId12();
-  const coreGlowId = useId12();
+  const gradientId = useId14();
+  const coreGlowId = useId14();
   const safeRingCount = Math.max(1, ringCount);
   const radii = Array.from(
     { length: safeRingCount },
@@ -5274,17 +5599,17 @@ function StnTopologyRing({
     };
   });
   if (loading) {
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx47(
       "div",
       {
         className: cn("stn-topology-ring", "stn-topology-ring--loading", className),
         style,
         ...rest,
-        children: /* @__PURE__ */ jsx46("div", { className: "stn-topology-ring__loading-label", children: "\uD1A0\uD3F4\uB85C\uC9C0 \uB9C1 \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911..." })
+        children: /* @__PURE__ */ jsx47("div", { className: "stn-topology-ring__loading-label", children: "\uD1A0\uD3F4\uB85C\uC9C0 \uB9C1 \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911..." })
       }
     );
   }
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     "div",
     {
       className: cn("stn-topology-ring", className),
@@ -5292,7 +5617,7 @@ function StnTopologyRing({
       "data-stn-topology-ring": true,
       "data-ring-count": safeRingCount,
       ...rest,
-      children: /* @__PURE__ */ jsxs36(
+      children: /* @__PURE__ */ jsxs37(
         "svg",
         {
           className: "stn-topology-ring__svg",
@@ -5301,19 +5626,19 @@ function StnTopologyRing({
           viewBox: `0 0 ${vb} ${vb}`,
           overflow: "visible",
           children: [
-            /* @__PURE__ */ jsxs36("defs", { children: [
-              /* @__PURE__ */ jsxs36("radialGradient", { id: coreGlowId, cx: "50%", cy: "50%", r: "50%", children: [
-                /* @__PURE__ */ jsx46("stop", { offset: "0%", stopColor: "#722ed1", stopOpacity: "0.8" }),
-                /* @__PURE__ */ jsx46("stop", { offset: "100%", stopColor: "#120338", stopOpacity: "0" })
+            /* @__PURE__ */ jsxs37("defs", { children: [
+              /* @__PURE__ */ jsxs37("radialGradient", { id: coreGlowId, cx: "50%", cy: "50%", r: "50%", children: [
+                /* @__PURE__ */ jsx47("stop", { offset: "0%", stopColor: "#722ed1", stopOpacity: "0.8" }),
+                /* @__PURE__ */ jsx47("stop", { offset: "100%", stopColor: "#120338", stopOpacity: "0" })
               ] }),
-              /* @__PURE__ */ jsxs36("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                /* @__PURE__ */ jsx46("stop", { offset: "0%", stopColor: "#00e5ff", stopOpacity: "0.4" }),
-                /* @__PURE__ */ jsx46("stop", { offset: "100%", stopColor: "#722ed1", stopOpacity: "0.4" })
+              /* @__PURE__ */ jsxs37("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                /* @__PURE__ */ jsx47("stop", { offset: "0%", stopColor: "#00e5ff", stopOpacity: "0.4" }),
+                /* @__PURE__ */ jsx47("stop", { offset: "100%", stopColor: "#722ed1", stopOpacity: "0.4" })
               ] })
             ] }),
             radii.map((r, idx) => {
               const isMain = idx + 1 === mainOrbit;
-              return /* @__PURE__ */ jsx46(
+              return /* @__PURE__ */ jsx47(
                 "circle",
                 {
                   cx: centerX,
@@ -5327,7 +5652,7 @@ function StnTopologyRing({
                 `orbit-${idx}`
               );
             }),
-            connectionLineStyle !== "none" && calculatedNodes.map((node) => /* @__PURE__ */ jsx46(
+            connectionLineStyle !== "none" && calculatedNodes.map((node) => /* @__PURE__ */ jsx47(
               "line",
               {
                 x1: centerX,
@@ -5340,9 +5665,9 @@ function StnTopologyRing({
               },
               `line-${node.id}`
             )),
-            /* @__PURE__ */ jsxs36("g", { className: "stn-topology-ring__core", children: [
-              /* @__PURE__ */ jsx46("circle", { cx: centerX, cy: centerY, r: 54, fill: `url(#${coreGlowId})` }),
-              /* @__PURE__ */ jsx46(
+            /* @__PURE__ */ jsxs37("g", { className: "stn-topology-ring__core", children: [
+              /* @__PURE__ */ jsx47("circle", { cx: centerX, cy: centerY, r: 54, fill: `url(#${coreGlowId})` }),
+              /* @__PURE__ */ jsx47(
                 "circle",
                 {
                   cx: centerX,
@@ -5354,7 +5679,7 @@ function StnTopologyRing({
                   style: { filter: "drop-shadow(0 0 12px rgba(114, 46, 209, 0.6))" }
                 }
               ),
-              core.subTitle && /* @__PURE__ */ jsx46(
+              core.subTitle && /* @__PURE__ */ jsx47(
                 "text",
                 {
                   x: centerX,
@@ -5367,13 +5692,13 @@ function StnTopologyRing({
                   children: core.subTitle
                 }
               ),
-              core.title && /* @__PURE__ */ jsx46("text", { x: centerX, y: centerY + 8, textAnchor: "middle", fill: "#f0f2f5", fontSize: "10", fontWeight: "600", children: core.title }),
-              /* @__PURE__ */ jsxs36("text", { x: centerX, y: centerY + 22, textAnchor: "middle", fill: coreColor, fontSize: "9", fontWeight: "500", children: [
+              core.title && /* @__PURE__ */ jsx47("text", { x: centerX, y: centerY + 8, textAnchor: "middle", fill: "#f0f2f5", fontSize: "10", fontWeight: "600", children: core.title }),
+              /* @__PURE__ */ jsxs37("text", { x: centerX, y: centerY + 22, textAnchor: "middle", fill: coreColor, fontSize: "9", fontWeight: "500", children: [
                 "\u25CF ",
                 coreStatusLabel
               ] })
             ] }),
-            calculatedNodes.map((node) => /* @__PURE__ */ jsx46(
+            calculatedNodes.map((node) => /* @__PURE__ */ jsx47(
               StnTopologyNodeMark,
               {
                 x: node.x,
@@ -5402,7 +5727,7 @@ function StnTopologyRing({
 
 // src/components/topology/StnTopologyGraph.tsx
 import { useState as useState10 } from "react";
-import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var DEFAULT_GRAPH_NODES = [
   { id: "n1", x: 200, y: 58, status: "minor", label: "GW-01", shape: "circle", content: "icon", icon: "wifi" },
   { id: "n2", x: 118, y: 118, status: "critical", label: "BACKUP", shape: "hexagon", content: "count", count: 4, pulse: true },
@@ -5438,10 +5763,10 @@ function StnTopologyGraph({
 }) {
   const [viewMode, setViewMode] = useState10(defaultMode);
   if (loading) {
-    return /* @__PURE__ */ jsx47("div", { className: cn("stn-topology-graph", "stn-topology-graph--loading", className), style, ...rest, children: /* @__PURE__ */ jsx47("div", { className: "stn-topology-graph__loading-label", children: "\uD1A0\uD3F4\uB85C\uC9C0 \uCE94\uBC84\uC2A4 \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911..." }) });
+    return /* @__PURE__ */ jsx48("div", { className: cn("stn-topology-graph", "stn-topology-graph--loading", className), style, ...rest, children: /* @__PURE__ */ jsx48("div", { className: "stn-topology-graph__loading-label", children: "\uD1A0\uD3F4\uB85C\uC9C0 \uCE94\uBC84\uC2A4 \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911..." }) });
   }
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       className: cn("stn-topology-graph", className),
@@ -5450,7 +5775,7 @@ function StnTopologyGraph({
       "data-view-mode": viewMode,
       ...rest,
       children: [
-        showModeToggle && /* @__PURE__ */ jsx47("div", { className: "stn-topology-graph__mode", children: /* @__PURE__ */ jsx47(
+        showModeToggle && /* @__PURE__ */ jsx48("div", { className: "stn-topology-graph__mode", children: /* @__PURE__ */ jsx48(
           StnSegmented,
           {
             size: "sm",
@@ -5462,23 +5787,23 @@ function StnTopologyGraph({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs37("svg", { className: "stn-topology-graph__svg", width: "100%", height: "100%", viewBox: "0 0 400 300", overflow: "visible", children: [
-          viewMode === "3D" ? /* @__PURE__ */ jsxs37("g", { opacity: "0.6", children: [
-            /* @__PURE__ */ jsx47("line", { x1: "60", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.06)", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsx47("line", { x1: "130", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsx47("line", { x1: "200", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.14)", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsx47("line", { x1: "270", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsx47("line", { x1: "340", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.06)", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsx47("line", { x1: "100", y1: "230", x2: "300", y2: "230", stroke: "rgba(255,255,255,0.06)" }),
-            /* @__PURE__ */ jsx47("line", { x1: "130", y1: "190", x2: "270", y2: "190", stroke: "rgba(255,255,255,0.06)" }),
-            /* @__PURE__ */ jsx47("line", { x1: "160", y1: "140", x2: "240", y2: "140", stroke: "rgba(255,255,255,0.06)" })
-          ] }) : /* @__PURE__ */ jsxs37("g", { opacity: "0.3", children: [
-            /* @__PURE__ */ jsx47("line", { x1: "40", y1: "60", x2: "360", y2: "60", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
-            /* @__PURE__ */ jsx47("line", { x1: "40", y1: "150", x2: "360", y2: "150", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
-            /* @__PURE__ */ jsx47("line", { x1: "40", y1: "240", x2: "360", y2: "240", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
-            /* @__PURE__ */ jsx47("line", { x1: "100", y1: "20", x2: "100", y2: "280", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
-            /* @__PURE__ */ jsx47("line", { x1: "200", y1: "20", x2: "200", y2: "280", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
-            /* @__PURE__ */ jsx47("line", { x1: "300", y1: "20", x2: "300", y2: "280", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" })
+        /* @__PURE__ */ jsxs38("svg", { className: "stn-topology-graph__svg", width: "100%", height: "100%", viewBox: "0 0 400 300", overflow: "visible", children: [
+          viewMode === "3D" ? /* @__PURE__ */ jsxs38("g", { opacity: "0.6", children: [
+            /* @__PURE__ */ jsx48("line", { x1: "60", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.06)", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx48("line", { x1: "130", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx48("line", { x1: "200", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.14)", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx48("line", { x1: "270", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx48("line", { x1: "340", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.06)", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx48("line", { x1: "100", y1: "230", x2: "300", y2: "230", stroke: "rgba(255,255,255,0.06)" }),
+            /* @__PURE__ */ jsx48("line", { x1: "130", y1: "190", x2: "270", y2: "190", stroke: "rgba(255,255,255,0.06)" }),
+            /* @__PURE__ */ jsx48("line", { x1: "160", y1: "140", x2: "240", y2: "140", stroke: "rgba(255,255,255,0.06)" })
+          ] }) : /* @__PURE__ */ jsxs38("g", { opacity: "0.3", children: [
+            /* @__PURE__ */ jsx48("line", { x1: "40", y1: "60", x2: "360", y2: "60", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
+            /* @__PURE__ */ jsx48("line", { x1: "40", y1: "150", x2: "360", y2: "150", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
+            /* @__PURE__ */ jsx48("line", { x1: "40", y1: "240", x2: "360", y2: "240", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
+            /* @__PURE__ */ jsx48("line", { x1: "100", y1: "20", x2: "100", y2: "280", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
+            /* @__PURE__ */ jsx48("line", { x1: "200", y1: "20", x2: "200", y2: "280", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
+            /* @__PURE__ */ jsx48("line", { x1: "300", y1: "20", x2: "300", y2: "280", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" })
           ] }),
           links.map((link, idx) => {
             const s = nodeMap.get(link.source);
@@ -5486,7 +5811,7 @@ function StnTopologyGraph({
             if (!s || !t) return null;
             const isAlert = s.status === "critical" || t.status === "critical" || link.status === "critical";
             const strokeColor = isAlert ? "rgba(255, 77, 79, 0.65)" : "rgba(255, 255, 255, 0.2)";
-            return /* @__PURE__ */ jsx47(
+            return /* @__PURE__ */ jsx48(
               "line",
               {
                 x1: s.x,
@@ -5503,7 +5828,7 @@ function StnTopologyGraph({
           nodes.map((node) => {
             const status = node.status ?? "normal";
             const isCore = Boolean(node.isCore);
-            return /* @__PURE__ */ jsx47(
+            return /* @__PURE__ */ jsx48(
               StnTopologyNodeMark,
               {
                 x: node.x,
@@ -5526,17 +5851,17 @@ function StnTopologyGraph({
             );
           })
         ] }),
-        showMinimap && /* @__PURE__ */ jsxs37("div", { className: "stn-topology-graph__minimap", children: [
-          /* @__PURE__ */ jsxs37("div", { className: "stn-topology-graph__minimap-head", children: [
-            /* @__PURE__ */ jsx47("span", { children: "\uBBF8\uB9AC\uBCF4\uAE30" }),
-            /* @__PURE__ */ jsx47("span", { children: "\u2014" })
+        showMinimap && /* @__PURE__ */ jsxs38("div", { className: "stn-topology-graph__minimap", children: [
+          /* @__PURE__ */ jsxs38("div", { className: "stn-topology-graph__minimap-head", children: [
+            /* @__PURE__ */ jsx48("span", { children: "\uBBF8\uB9AC\uBCF4\uAE30" }),
+            /* @__PURE__ */ jsx48("span", { children: "\u2014" })
           ] }),
-          /* @__PURE__ */ jsxs37("svg", { width: "100%", height: "40", viewBox: "0 0 100 50", children: [
-            /* @__PURE__ */ jsx47("polyline", { points: "50,10 40,25 50,40 60,30", fill: "none", stroke: "rgba(255,77,79,0.5)", strokeWidth: "1" }),
-            /* @__PURE__ */ jsx47("circle", { cx: "50", cy: "10", r: "2", fill: STN_TOPOLOGY_STATUS_COLORS.critical.main }),
-            /* @__PURE__ */ jsx47("circle", { cx: "40", cy: "25", r: "2.5", fill: STN_TOPOLOGY_STATUS_COLORS.critical.main }),
-            /* @__PURE__ */ jsx47("circle", { cx: "50", cy: "40", r: "2", fill: "#00e5ff" }),
-            /* @__PURE__ */ jsx47("circle", { cx: "60", cy: "30", r: "2", fill: STN_TOPOLOGY_STATUS_COLORS.normal.main })
+          /* @__PURE__ */ jsxs38("svg", { width: "100%", height: "40", viewBox: "0 0 100 50", children: [
+            /* @__PURE__ */ jsx48("polyline", { points: "50,10 40,25 50,40 60,30", fill: "none", stroke: "rgba(255,77,79,0.5)", strokeWidth: "1" }),
+            /* @__PURE__ */ jsx48("circle", { cx: "50", cy: "10", r: "2", fill: STN_TOPOLOGY_STATUS_COLORS.critical.main }),
+            /* @__PURE__ */ jsx48("circle", { cx: "40", cy: "25", r: "2.5", fill: STN_TOPOLOGY_STATUS_COLORS.critical.main }),
+            /* @__PURE__ */ jsx48("circle", { cx: "50", cy: "40", r: "2", fill: "#00e5ff" }),
+            /* @__PURE__ */ jsx48("circle", { cx: "60", cy: "30", r: "2", fill: STN_TOPOLOGY_STATUS_COLORS.normal.main })
           ] })
         ] })
       ]
@@ -5545,7 +5870,7 @@ function StnTopologyGraph({
 }
 
 // src/components/StnWidget.tsx
-import { Fragment as Fragment4, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 var SHELL_PUB_CLASS = {
   card: "",
   "fault-panel": "",
@@ -5628,20 +5953,20 @@ function StnWidgetPeriodText({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx48("span", { className: cn("stn-widget__period-text", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("span", { className: cn("stn-widget__period-text", className), ...rest, children });
 }
 function StnWidgetPeriodSelect({
   label,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     StnButton,
     {
       variant: "ghost",
       size: "sm",
       shape: "square",
-      icon: /* @__PURE__ */ jsx48(StnIcon, { name: "line/chevron-down" }),
+      icon: /* @__PURE__ */ jsx49(StnIcon, { name: "line/chevron-down" }),
       iconPosition: "right",
       className,
       ...rest,
@@ -5658,26 +5983,26 @@ function StnWidgetPeriodPager({
   nextLabel = "\uB2E4\uC74C",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs38("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
-    /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
+    /* @__PURE__ */ jsx49(
       StnButton,
       {
         variant: "ghost",
         size: "sm",
         shape: "square",
-        icon: /* @__PURE__ */ jsx48(StnIcon, { name: "line/arrow-narrow-left" }),
+        icon: /* @__PURE__ */ jsx49(StnIcon, { name: "line/arrow-narrow-left" }),
         onClick: onPrev,
         "aria-label": prevLabel
       }
     ),
-    /* @__PURE__ */ jsx48("span", { className: "stn-widget__period-pager-label", children: label }),
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx49("span", { className: "stn-widget__period-pager-label", children: label }),
+    /* @__PURE__ */ jsx49(
       StnButton,
       {
         variant: "ghost",
         size: "sm",
         shape: "square",
-        icon: /* @__PURE__ */ jsx48(StnIcon, { name: "line/arrow-narrow-right" }),
+        icon: /* @__PURE__ */ jsx49(StnIcon, { name: "line/arrow-narrow-right" }),
         onClick: onNext,
         "aria-label": nextLabel
       }
@@ -5697,18 +6022,18 @@ function StnWidgetHeaderInner({
   wrapActions = false
 }) {
   const resolvedIconName = headerIconName ?? defaultHeaderIconName(appearance);
-  return /* @__PURE__ */ jsxs38("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs38("div", { className: "stn-widget__head-start", children: [
-      showHeaderIcon ? headerIcon != null ? /* @__PURE__ */ jsx48(StnWidgetInsetIcon, { size: "sm", children: headerIcon }) : resolvedIconName ? /* @__PURE__ */ jsx48(StnWidgetInsetIcon, { size: "sm", icon: resolvedIconName }) : null : null,
-      title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs38("div", { className: "stn-widget__title-wrap", children: [
-        typeof title === "string" ? /* @__PURE__ */ jsx48("p", { className: "stn-widget__title", title, children: title }) : null,
+  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
+    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__head-start", children: [
+      showHeaderIcon ? headerIcon != null ? /* @__PURE__ */ jsx49(StnWidgetInsetIcon, { size: "sm", children: headerIcon }) : resolvedIconName ? /* @__PURE__ */ jsx49(StnWidgetInsetIcon, { size: "sm", icon: resolvedIconName }) : null : null,
+      title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs39("div", { className: "stn-widget__title-wrap", children: [
+        typeof title === "string" ? /* @__PURE__ */ jsx49("p", { className: "stn-widget__title", title, children: title }) : null,
         badge
-      ] }) : /* @__PURE__ */ jsxs38(Fragment4, { children: [
+      ] }) : /* @__PURE__ */ jsxs39(Fragment4, { children: [
         title,
         badge
       ] }) : null
     ] }),
-    titleActions != null || periodActions != null || periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx48("div", { className: "stn-widget__head-end", children: titleActions ?? (periodActions != null ? periodActions : periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx48(StnWidgetPeriodText, { children: periodLabel }) : null) }) : null
+    titleActions != null || periodActions != null || periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__head-end", children: titleActions ?? (periodActions != null ? periodActions : periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx49(StnWidgetPeriodText, { children: periodLabel }) : null) }) : null
   ] });
 }
 function StnWidgetRoot({
@@ -5788,10 +6113,10 @@ function StnWidgetRoot({
     ...rest
   };
   const slots = partitionWidgetChildren(children);
-  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs38("div", { className: "app_bar", children: [
-    /* @__PURE__ */ jsx48("div", { className: "fault_title_box", children: typeof title === "string" ? /* @__PURE__ */ jsx48("span", { children: title }) : title }),
+  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs39("div", { className: "app_bar", children: [
+    /* @__PURE__ */ jsx49("div", { className: "fault_title_box", children: typeof title === "string" ? /* @__PURE__ */ jsx49("span", { children: title }) : title }),
     titleActions
-  ] }) : null : shell === "board" || shell === "board-item" ? title != null ? /* @__PURE__ */ jsx48("div", { className: "stn-widget__head", children: typeof title === "string" ? /* @__PURE__ */ jsx48("p", { children: title }) : title }) : null : isFigmaShell ? /* @__PURE__ */ jsx48(
+  ] }) : null : shell === "board" || shell === "board-item" ? title != null ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__head", children: typeof title === "string" ? /* @__PURE__ */ jsx49("p", { children: title }) : title }) : null : isFigmaShell ? /* @__PURE__ */ jsx49(
     StnWidgetHeaderInner,
     {
       appearance,
@@ -5805,48 +6130,48 @@ function StnWidgetRoot({
       headerIcon,
       wrapActions
     }
-  ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs38("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs38("div", { className: "stn-widget__head-start", children: [
-      title != null ? typeof title === "string" ? /* @__PURE__ */ jsx48("p", { className: "stn-widget__title", title, children: title }) : title : null,
+  ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
+    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__head-start", children: [
+      title != null ? typeof title === "string" ? /* @__PURE__ */ jsx49("p", { className: "stn-widget__title", title, children: title }) : title : null,
       badge
     ] }),
-    titleActions ? /* @__PURE__ */ jsx48("div", { className: "stn-widget__head-end", children: titleActions }) : null
+    titleActions ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__head-end", children: titleActions }) : null
   ] }) : null;
   const head = slots.headers.length > 0 ? slots.headers : propHead;
   const autoBodyClass = shell === "fault-panel" && !isFigmaShell ? "table_area" : void 0;
   let body;
   if (loading) {
-    body = /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__body", autoBodyClass, contentClassName), children: /* @__PURE__ */ jsx48(StnWidgetLoading, {}) });
+    body = /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__body", autoBodyClass, contentClassName), children: /* @__PURE__ */ jsx49(StnWidgetLoading, {}) });
   } else if (slots.bodies.length > 0) {
     body = slots.bodies.map(
       (slot, index) => mergeBodySlot(slot, index === 0 ? slots.rest : [], contentClassName, isEmptyState, emptyStyle)
     );
   } else {
-    body = /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__body", autoBodyClass, isEmptyState && "empty", contentClassName), style: emptyStyle, children: slots.rest });
+    body = /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__body", autoBodyClass, isEmptyState && "empty", contentClassName), style: emptyStyle, children: slots.rest });
   }
-  const footerNode = slots.footers.length > 0 ? slots.footers : footer ? /* @__PURE__ */ jsx48("div", { className: "stn-widget__footer", children: footer }) : null;
-  const card = /* @__PURE__ */ jsxs38("div", { ...rootProps, children: [
-    isFigmaShell && appearanceShell === "overlay" ? /* @__PURE__ */ jsx48("div", { className: "stn-widget__map-deco", "aria-hidden": true }) : null,
+  const footerNode = slots.footers.length > 0 ? slots.footers : footer ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__footer", children: footer }) : null;
+  const card = /* @__PURE__ */ jsxs39("div", { ...rootProps, children: [
+    isFigmaShell && appearanceShell === "overlay" ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__map-deco", "aria-hidden": true }) : null,
     head,
     body,
     footerNode
   ] });
   if (banner == null || banner === false) return card;
-  return /* @__PURE__ */ jsxs38("div", { className: "stn-widget-anchor", children: [
+  return /* @__PURE__ */ jsxs39("div", { className: "stn-widget-anchor", children: [
     withBannerSeverity(banner, bannerSeverityFromStatus(status, isCritical)),
     card
   ] });
 }
 function StnWidgetHeader({ className, wrap = false, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__head", wrap && "stn-widget__head--wrap", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__head", wrap && "stn-widget__head--wrap", className), ...rest, children });
 }
 markWidgetSlot(StnWidgetHeader, "header");
 function StnWidgetTitle({ className, children, title, ...rest }) {
   const titleAttr = title ?? (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ jsx48("p", { className: cn("stn-widget__title", className), title: titleAttr, ...rest, children });
+  return /* @__PURE__ */ jsx49("p", { className: cn("stn-widget__title", className), title: titleAttr, ...rest, children });
 }
 function StnWidgetActions({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__head-end", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__head-end", className), ...rest, children });
 }
 function StnWidgetBody({
   padding,
@@ -5860,7 +6185,7 @@ function StnWidgetBody({
 }) {
   const emptyText = typeof empty === "string" ? empty : void 0;
   const mergedStyle = emptyText ? { ["--stn-widget-empty-text"]: `"${emptyText}"`, ...style } : style;
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       className: cn(
@@ -5882,7 +6207,7 @@ function StnWidgetBody({
 }
 markWidgetSlot(StnWidgetBody, "body");
 function StnWidgetChartSlot({ label = "select chart", className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__chart-slot", className), "data-stn-widget-chart-slot": true, ...rest, children: children ?? /* @__PURE__ */ jsx48("span", { className: "stn-widget__chart-slot-label", children: label }) });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__chart-slot", className), "data-stn-widget-chart-slot": true, ...rest, children: children ?? /* @__PURE__ */ jsx49("span", { className: "stn-widget__chart-slot-label", children: label }) });
 }
 function StnWidgetStatusItem({
   label,
@@ -5894,9 +6219,9 @@ function StnWidgetStatusItem({
   ...rest
 }) {
   const grade = gradeProp ?? (status === "warning" ? "minor" : status) ?? "normal";
-  return /* @__PURE__ */ jsxs38("div", { className: cn("stn-widget__status-item", className), ...rest, children: [
-    /* @__PURE__ */ jsxs38("span", { className: "stn-widget__status-label", children: [
-      showDot ? /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__status-item", className), ...rest, children: [
+    /* @__PURE__ */ jsxs39("span", { className: "stn-widget__status-label", children: [
+      showDot ? /* @__PURE__ */ jsx49(
         "span",
         {
           className: cn("stn-widget__status-dot", `stn-widget__status-dot--${grade}`),
@@ -5905,23 +6230,23 @@ function StnWidgetStatusItem({
       ) : null,
       label
     ] }),
-    /* @__PURE__ */ jsx48("span", { className: "stn-widget__status-val", children: value })
+    /* @__PURE__ */ jsx49("span", { className: "stn-widget__status-val", children: value })
   ] });
 }
 function StnWidgetStatusList({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__status-list", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__status-list", className), ...rest, children });
 }
 function StnWidgetStatGroup({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__stat-group", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__stat-group", className), ...rest, children });
 }
 function StnWidgetStatCard({ label, count, className, ...rest }) {
-  return /* @__PURE__ */ jsxs38("div", { className: cn("stn-widget__stat-card", className), ...rest, children: [
-    /* @__PURE__ */ jsx48("span", { className: "stn-widget__stat-label", children: label }),
-    /* @__PURE__ */ jsx48("span", { className: "stn-widget__stat-count", children: count })
+  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__stat-card", className), ...rest, children: [
+    /* @__PURE__ */ jsx49("span", { className: "stn-widget__stat-label", children: label }),
+    /* @__PURE__ */ jsx49("span", { className: "stn-widget__stat-count", children: count })
   ] });
 }
 function StnWidgetPlaceholder({ label = "\uCF58\uD150\uCE20 \uC601\uC5ED" }) {
-  return /* @__PURE__ */ jsx48("div", { className: "stn-widget__placeholder", children: label });
+  return /* @__PURE__ */ jsx49("div", { className: "stn-widget__placeholder", children: label });
 }
 var GRADE_ROW_ICON = {
   critical: "fill/alert4",
@@ -5944,42 +6269,42 @@ function StnWidgetGradeRow({
 }) {
   const clamped = Math.max(0, Math.min(100, percent));
   const resolvedPercentLabel = percentLabel ?? formatGradePercent(clamped);
-  return /* @__PURE__ */ jsxs38("div", { className: cn("stn-widget__grade-row", `stn-widget__grade-row--${grade}`, className), ...rest, children: [
-    /* @__PURE__ */ jsxs38("div", { className: "stn-widget__grade-row-left", children: [
-      /* @__PURE__ */ jsxs38("span", { className: "stn-widget__grade-row-label", children: [
-        /* @__PURE__ */ jsx48(StnIcon, { name: GRADE_ROW_ICON[grade], size: 20, className: "stn-widget__grade-row-icon", "aria-hidden": true }),
+  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__grade-row", `stn-widget__grade-row--${grade}`, className), ...rest, children: [
+    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__grade-row-left", children: [
+      /* @__PURE__ */ jsxs39("span", { className: "stn-widget__grade-row-label", children: [
+        /* @__PURE__ */ jsx49(StnIcon, { name: GRADE_ROW_ICON[grade], size: 20, className: "stn-widget__grade-row-icon", "aria-hidden": true }),
         label
       ] }),
-      /* @__PURE__ */ jsx48("div", { className: "stn-widget__grade-row-track", "aria-hidden": true, children: /* @__PURE__ */ jsx48("span", { className: "stn-widget__grade-row-fill", style: { width: `${clamped}%` } }) })
+      /* @__PURE__ */ jsx49("div", { className: "stn-widget__grade-row-track", "aria-hidden": true, children: /* @__PURE__ */ jsx49("span", { className: "stn-widget__grade-row-fill", style: { width: `${clamped}%` } }) })
     ] }),
-    /* @__PURE__ */ jsxs38("div", { className: "stn-widget__grade-row-right", children: [
-      /* @__PURE__ */ jsx48("span", { className: "stn-widget__grade-row-value", children: value }),
-      /* @__PURE__ */ jsx48("span", { className: "stn-widget__grade-row-percent", children: resolvedPercentLabel })
+    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__grade-row-right", children: [
+      /* @__PURE__ */ jsx49("span", { className: "stn-widget__grade-row-value", children: value }),
+      /* @__PURE__ */ jsx49("span", { className: "stn-widget__grade-row-percent", children: resolvedPercentLabel })
     ] })
   ] });
 }
 function StnWidgetGradeRowList({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__grade-row-list", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__grade-row-list", className), ...rest, children });
 }
 function StnWidgetFooter({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__footer", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__footer", className), ...rest, children });
 }
 markWidgetSlot(StnWidgetFooter, "footer");
 function StnWidgetEmpty({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs38("div", { className: cn("stn-widget__empty", className), ...rest, children: [
-    /* @__PURE__ */ jsxs38("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { opacity: 0.6 }, children: [
-      /* @__PURE__ */ jsx48("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ jsx48("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-      /* @__PURE__ */ jsx48("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__empty", className), ...rest, children: [
+    /* @__PURE__ */ jsxs39("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { opacity: 0.6 }, children: [
+      /* @__PURE__ */ jsx49("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx49("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsx49("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
     ] }),
-    /* @__PURE__ */ jsx48("div", { children: children ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
+    /* @__PURE__ */ jsx49("div", { children: children ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
   ] });
 }
 function StnWidgetLoading({ lines = 3, className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__loading", className), ...rest, children: children ?? /* @__PURE__ */ jsx48(StnLoadingSkeleton.Widget, { lines }) });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__loading", className), ...rest, children: children ?? /* @__PURE__ */ jsx49(StnLoadingSkeleton.Widget, { lines }) });
 }
 function StnWidgetInsetIcon({ className, size = "sm", ...rest }) {
-  return /* @__PURE__ */ jsx48(StnIconBox, { size, className: cn("stn-widget__inset-icon", className), ...rest });
+  return /* @__PURE__ */ jsx49(StnIconBox, { size, className: cn("stn-widget__inset-icon", className), ...rest });
 }
 var StnWidget = Object.assign(StnWidgetRoot, {
   Header: StnWidgetHeader,
@@ -6030,7 +6355,7 @@ import {
   Fragment as Fragment5,
   isValidElement as isValidElement5
 } from "react";
-import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 var BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
 var DIRECTION_CLASS = /* @__PURE__ */ new Set(["row", "row-reverse", "column", "column-reverse"]);
 var STACK_SPACE_TOKENS = /* @__PURE__ */ new Set([2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 36, 40, 44, 48, 56, 64, 80, 84]);
@@ -6149,12 +6474,12 @@ var StnStack = forwardRef24(function StnStack2({
   const validChildren = Children3.toArray(children).filter(Boolean);
   const renderedChildren = divider ? validChildren.map((child, index) => {
     const key = isValidElement5(child) && child.key != null ? child.key : index;
-    return /* @__PURE__ */ jsxs39(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs40(Fragment5, { children: [
       index > 0 ? divider : null,
       child
     ] }, key);
   }) : children;
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     Component,
     {
       ref,
@@ -6178,7 +6503,7 @@ var StnStack = forwardRef24(function StnStack2({
 });
 
 // src/patterns/dashboard/AlertCenterDashboard.tsx
-import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
 var TOP5_ROWS = [
   { label: "\uADF8\uB791\uC2DC\uC544", percent: 80, value: "80\uAC74", grade: "critical" },
   { label: "\uC5F0\uB9BD\uC8FC\uD0DD 15\uC138\uB300", percent: 74, value: "74\uAC74", grade: "major" },
@@ -6187,7 +6512,7 @@ var TOP5_ROWS = [
   { label: "PRADA", percent: 68, value: "68\uAC74", grade: "default" }
 ];
 function AlertCenterDashboard({ className, appearance = "translucent", loading = false }) {
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     StnStack,
     {
       direction: "column",
@@ -6196,17 +6521,17 @@ function AlertCenterDashboard({ className, appearance = "translucent", loading =
       style: { flex: "1 1 0%", minHeight: 0, height: "100%", width: "100%" },
       "data-stn-dashboard": "alert-widgets",
       children: [
-        /* @__PURE__ */ jsx50(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx50(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs40(StnWidget.StatusList, { children: [
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "PTN", value: "179", showDot: false }),
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "MSPP", value: "63", showDot: false }),
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "L3\uC2A4\uC704\uCE58", value: "27", showDot: false })
+        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs41(StnWidget.StatusList, { children: [
+          /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "PTN", value: "179", showDot: false }),
+          /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "MSPP", value: "63", showDot: false }),
+          /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "L3\uC2A4\uC704\uCE58", value: "27", showDot: false })
         ] }) }),
-        /* @__PURE__ */ jsx50(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx50(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs40(StnWidget.StatusList, { children: [
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "Critical", value: "43", grade: "critical" }),
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "Major", value: "79", grade: "major" }),
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "Minor", value: "3", grade: "minor" })
+        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs41(StnWidget.StatusList, { children: [
+          /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "Critical", value: "43", grade: "critical" }),
+          /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "Major", value: "79", grade: "major" }),
+          /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "Minor", value: "3", grade: "minor" })
         ] }) }),
-        /* @__PURE__ */ jsx50(StnWidget, { title: "\uC77C\uC77C \uC7A5\uBE44\uBCC4 \uC7A5\uC560 TOP5", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx50(StnLoadingSkeleton.Widget, { lines: 4 }) : /* @__PURE__ */ jsx50(StnWidget.GradeRowList, { children: TOP5_ROWS.map((row) => /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC77C\uC77C \uC7A5\uBE44\uBCC4 \uC7A5\uC560 TOP5", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 4 }) : /* @__PURE__ */ jsx51(StnWidget.GradeRowList, { children: TOP5_ROWS.map((row) => /* @__PURE__ */ jsx51(
           StnWidget.GradeRow,
           {
             grade: row.grade,
@@ -6216,50 +6541,50 @@ function AlertCenterDashboard({ className, appearance = "translucent", loading =
           },
           row.label
         )) }) }),
-        /* @__PURE__ */ jsx50(StnWidget, { title: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx50(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsx50(StnWidget.ChartSlot, { label: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4 \uCC28\uD2B8" }) })
+        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsx51(StnWidget.ChartSlot, { label: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4 \uCC28\uD2B8" }) })
       ]
     }
   );
 }
 
 // src/patterns/dashboard/PubDashboardWidgetBodies.tsx
-import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
 function PubDisabilityStatusList({ items, summary }) {
-  return /* @__PURE__ */ jsxs41("div", { className: "ds-disability-status", children: [
-    /* @__PURE__ */ jsx51("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42("div", { className: "ds-disability-status", children: [
+    /* @__PURE__ */ jsx52("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs42(
       "li",
       {
         className: ["ds-disability-status__item", item.grade].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsxs41("span", { children: [
-            item.showDot !== false && item.grade ? /* @__PURE__ */ jsx51("span", { className: "dot", "aria-hidden": true }) : null,
+          /* @__PURE__ */ jsxs42("span", { children: [
+            item.showDot !== false && item.grade ? /* @__PURE__ */ jsx52("span", { className: "dot", "aria-hidden": true }) : null,
             item.label
           ] }),
-          /* @__PURE__ */ jsx51("p", { children: item.value })
+          /* @__PURE__ */ jsx52("p", { children: item.value })
         ]
       },
       i
     )) }),
-    summary && summary.length > 0 ? /* @__PURE__ */ jsx51("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs41("p", { className: "ds-disability-status__value", children: [
+    summary && summary.length > 0 ? /* @__PURE__ */ jsx52("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs42("p", { className: "ds-disability-status__value", children: [
       row.label,
-      /* @__PURE__ */ jsx51("span", { children: row.value })
+      /* @__PURE__ */ jsx52("span", { children: row.value })
     ] }, i)) }) : null
   ] });
 }
 function PubTrafficTop5Bars({ rows }) {
   const maxPercent = Math.max(...rows.map((row) => row.percent), 0);
-  return /* @__PURE__ */ jsx51("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsxs41("div", { className: ["ds-bar", row.percent === maxPercent ? "max" : ""].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx51("p", { className: "ds-bar-name", title: row.label, children: row.label }),
-    /* @__PURE__ */ jsx51("div", { className: "ds-bar-con", title: `${row.percent}%`, children: /* @__PURE__ */ jsx51("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }) }),
-    /* @__PURE__ */ jsx51("p", { className: "ds-bar-value", title: row.value, children: row.value })
+  return /* @__PURE__ */ jsx52("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsxs42("div", { className: ["ds-bar", row.percent === maxPercent ? "max" : ""].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx52("p", { className: "ds-bar-name", title: row.label, children: row.label }),
+    /* @__PURE__ */ jsx52("div", { className: "ds-bar-con", title: `${row.percent}%`, children: /* @__PURE__ */ jsx52("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }) }),
+    /* @__PURE__ */ jsx52("p", { className: "ds-bar-value", title: row.value, children: row.value })
   ] }, row.label)) });
 }
 function PubTop5EquipmentBars({ rows }) {
-  return /* @__PURE__ */ jsxs41("div", { className: "ds-group", children: [
-    /* @__PURE__ */ jsx51("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx51("div", { className: "ds-equipment-ico", children: /* @__PURE__ */ jsx51("span", { className: "blind", children: "\uC7A5\uBE44 \uC774\uBBF8\uC9C0" }) }) }),
-    /* @__PURE__ */ jsx51("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx51("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsx51("div", { className: "ds-bar type-2", children: /* @__PURE__ */ jsxs41("div", { className: "ds-bar-con", title: `${row.percent}%`, children: [
-      /* @__PURE__ */ jsx51("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }),
-      /* @__PURE__ */ jsx51("div", { className: "ds-bar-status", children: row.status })
+  return /* @__PURE__ */ jsxs42("div", { className: "ds-group", children: [
+    /* @__PURE__ */ jsx52("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx52("div", { className: "ds-equipment-ico", children: /* @__PURE__ */ jsx52("span", { className: "blind", children: "\uC7A5\uBE44 \uC774\uBBF8\uC9C0" }) }) }),
+    /* @__PURE__ */ jsx52("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx52("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsx52("div", { className: "ds-bar type-2", children: /* @__PURE__ */ jsxs42("div", { className: "ds-bar-con", title: `${row.percent}%`, children: [
+      /* @__PURE__ */ jsx52("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }),
+      /* @__PURE__ */ jsx52("div", { className: "ds-bar-status", children: row.status })
     ] }) }, row.label)) }) })
   ] });
 }
@@ -6268,7 +6593,7 @@ function PubChartSample({
   alt = "\uCC28\uD2B8",
   onError
 }) {
-  return /* @__PURE__ */ jsx51("div", { className: "ds-chart", children: /* @__PURE__ */ jsx51("img", { src, alt, className: "chart_sample", onError }) });
+  return /* @__PURE__ */ jsx52("div", { className: "ds-chart", children: /* @__PURE__ */ jsx52("img", { src, alt, className: "chart_sample", onError }) });
 }
 
 // src/patterns/alertCenter/StnAlertCenterPanel.tsx
@@ -6276,7 +6601,7 @@ import { useState as useState11 } from "react";
 import {
   STN_ALERT_CENTER_TABS
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
-import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
 function resolveAlertIcon(item) {
   if (item.icon) {
     if (item.icon === "line/arrow-down") return "line/arrow-narrow-down";
@@ -6294,6 +6619,97 @@ function resolveGradeLabel(grade) {
   if (grade === "warning") return "WR";
   return grade.toUpperCase();
 }
+function StnAlertCard({
+  item,
+  titleOverflow = "wrap",
+  descOverflow = "wrap",
+  onClick,
+  className
+}) {
+  const iconNode = resolveAlertIcon(item);
+  const gradeLabel = resolveGradeLabel(item.grade);
+  return /* @__PURE__ */ jsx53(
+    StnCard,
+    {
+      variant: "elevated",
+      radius: "md",
+      padding: "md",
+      interactive: true,
+      className: cn("stn-alert-card", className),
+      onClick,
+      children: /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__row", children: [
+        /* @__PURE__ */ jsx53(
+          StnIcon,
+          {
+            name: iconNode,
+            size: 24,
+            color: `var(--stn-grade-${item.grade}, var(--stn-primary))`,
+            className: "stn-alert-card__icon"
+          }
+        ),
+        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__body", children: [
+          /* @__PURE__ */ jsxs43(StnStack, { direction: "row", alignItems: "center", spacing: 1, className: "stn-alert-card__header-line", children: [
+            /* @__PURE__ */ jsx53(
+              StnChip,
+              {
+                shape: "pill",
+                size: "sm",
+                variant: "filled",
+                color: item.grade,
+                children: gradeLabel
+              }
+            ),
+            /* @__PURE__ */ jsx53(
+              "span",
+              {
+                className: cn("stn-alert-card__title", titleOverflow),
+                title: item.title,
+                children: /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__text-inner", children: item.title })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs43(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", className: "stn-alert-card__desc-line", children: [
+            /* @__PURE__ */ jsx53(
+              "span",
+              {
+                className: cn("stn-alert-card__desc", descOverflow),
+                title: item.description,
+                children: /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__text-inner", children: item.description })
+              }
+            ),
+            item.occurredAt && /* @__PURE__ */ jsxs43(
+              StnChip,
+              {
+                shape: "pill",
+                size: "sm",
+                variant: "subtle",
+                color: "critical",
+                className: "stn-alert-card__time-chip",
+                children: [
+                  "\uBC1C\uC0DD\uC2DC\uAC04: ",
+                  item.occurredAt
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__meta", children: [
+          /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__time", children: item.time }),
+          item.unread !== false && /* @__PURE__ */ jsx53(
+            "span",
+            {
+              className: cn(
+                "stn-alert-card__dot",
+                `stn-alert-card__dot--${item.grade}`
+              ),
+              "aria-hidden": true
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
 function StnAlertCenterPanel({
   title = "\uC54C\uB9BC\uC13C\uD130",
   alerts = [],
@@ -6301,6 +6717,9 @@ function StnAlertCenterPanel({
   deployItems = [],
   defaultTab = "error",
   size = "md",
+  textOverflow = "wrap",
+  titleOverflow,
+  descOverflow,
   tabIds,
   tabName: _tabName,
   onClose,
@@ -6312,167 +6731,121 @@ function StnAlertCenterPanel({
 }) {
   const [activeTab, setActiveTab] = useState11(defaultTab);
   const alertCount = alerts.length;
-  return /* @__PURE__ */ jsxs42("div", { className: cn("stn-alert-center", size, className), "data-stn-alert-center": true, children: [
-    /* @__PURE__ */ jsxs42("div", { className: "stn-alert-center__header", children: [
-      /* @__PURE__ */ jsxs42("div", { className: "stn-alert-center__header-left", children: [
-        /* @__PURE__ */ jsx52(StnIcon, { name: "line/bell", size: 20, color: "var(--stn-primary)" }),
-        /* @__PURE__ */ jsx52("span", { className: "stn-alert-center__title", children: title }),
-        alertCount > 0 && /* @__PURE__ */ jsx52(StnChip, { shape: "pill", size: "sm", variant: "subtle", color: "primary", children: alertCount })
-      ] }),
-      /* @__PURE__ */ jsx52(
-        StnSegmented,
-        {
-          size: "md",
-          value: activeTab,
-          onChange: (val) => setActiveTab(val),
-          options: STN_ALERT_CENTER_TABS.map((tab) => ({
-            value: tab.id,
-            label: tab.label,
-            id: tabIds?.[tab.id]
-          }))
-        }
+  const resolvedTitleOverflow = titleOverflow ?? textOverflow;
+  const resolvedDescOverflow = descOverflow ?? textOverflow;
+  return /* @__PURE__ */ jsxs43(
+    "div",
+    {
+      className: cn(
+        "stn-alert-center",
+        size,
+        `title-${resolvedTitleOverflow}`,
+        `desc-${resolvedDescOverflow}`,
+        className
       ),
-      /* @__PURE__ */ jsxs42("div", { className: "stn-alert-center__header-right", children: [
-        /* @__PURE__ */ jsx52(
-          StnButton,
-          {
-            variant: "text",
-            size: "sm",
-            icon: "line/check-circle",
-            onClick: onMarkAllAsRead,
-            children: "\uBAA8\uB450 \uC77D\uC74C"
-          }
-        ),
-        /* @__PURE__ */ jsx52("div", { className: "stn-alert-center__divider", "aria-hidden": true }),
-        /* @__PURE__ */ jsx52(
-          StnButton,
-          {
-            icon: "line/x",
-            variant: "text",
-            size: "sm",
-            "aria-label": closeLabel,
-            onClick: onClose
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs42("div", { className: "stn-alert-center__list-wrap", children: [
-      activeTab === "error" && /* @__PURE__ */ jsx52("ul", { className: "stn-alert-center__list", children: alerts.map((item) => {
-        const iconNode = resolveAlertIcon(item);
-        const gradeLabel = resolveGradeLabel(item.grade);
-        return /* @__PURE__ */ jsx52("li", { children: /* @__PURE__ */ jsx52(
-          StnCard,
-          {
-            variant: "elevated",
-            radius: "md",
-            padding: "md",
-            interactive: true,
-            className: "stn-alert-card",
-            onClick: () => onItemClick?.(item),
-            children: /* @__PURE__ */ jsxs42("div", { className: "stn-alert-card__row", children: [
-              /* @__PURE__ */ jsx52(
-                StnIcon,
-                {
-                  name: iconNode,
-                  size: 24,
-                  color: `var(--stn-grade-${item.grade}, var(--stn-primary))`,
-                  className: "stn-alert-card__icon"
-                }
-              ),
-              /* @__PURE__ */ jsxs42("div", { className: "stn-alert-card__body", children: [
-                /* @__PURE__ */ jsxs42(StnStack, { direction: "row", alignItems: "center", spacing: 1, children: [
-                  /* @__PURE__ */ jsx52(
-                    StnChip,
-                    {
-                      shape: "pill",
-                      size: "sm",
-                      variant: "filled",
-                      color: item.grade,
-                      children: gradeLabel
-                    }
-                  ),
-                  /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__title", children: item.title })
-                ] }),
-                /* @__PURE__ */ jsxs42(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", children: [
-                  /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__desc", children: item.description }),
-                  item.occurredAt && /* @__PURE__ */ jsxs42(
-                    StnChip,
-                    {
-                      shape: "pill",
-                      size: "sm",
-                      variant: "subtle",
-                      color: "critical",
-                      children: [
-                        "\uBC1C\uC0DD\uC2DC\uAC04: ",
-                        item.occurredAt
-                      ]
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs42("div", { className: "stn-alert-card__meta", children: [
-                /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__time", children: item.time }),
-                item.unread !== false && /* @__PURE__ */ jsx52(
-                  "span",
-                  {
-                    className: cn(
-                      "stn-alert-card__dot",
-                      `stn-alert-card__dot--${item.grade}`
-                    ),
-                    "aria-hidden": true
-                  }
-                )
-              ] })
-            ] })
-          }
-        ) }, item.id ?? item.title);
-      }) }),
-      activeTab === "work" && /* @__PURE__ */ jsx52("ul", { className: "stn-alert-center__list", children: workItems.map((row) => /* @__PURE__ */ jsx52("li", { children: /* @__PURE__ */ jsx52(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs42("div", { className: "stn-alert-card__row", children: [
-        /* @__PURE__ */ jsx52(StnIcon, { name: "line/clock", size: 24, color: "var(--stn-text-secondary)", className: "stn-alert-card__icon" }),
-        /* @__PURE__ */ jsxs42("div", { className: "stn-alert-card__body", children: [
-          /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--work", children: row.typeLabel }),
-          /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__desc", children: row.text })
+      "data-stn-alert-center": true,
+      children: [
+        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__header", children: [
+          /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__header-left", children: [
+            /* @__PURE__ */ jsx53(StnIcon, { name: "line/bell", size: 20, color: "var(--stn-primary)" }),
+            /* @__PURE__ */ jsx53("span", { className: "stn-alert-center__title", children: title }),
+            alertCount > 0 && /* @__PURE__ */ jsx53(StnChip, { shape: "pill", size: "sm", variant: "subtle", color: "primary", children: alertCount })
+          ] }),
+          /* @__PURE__ */ jsx53(
+            StnSegmented,
+            {
+              size: "md",
+              value: activeTab,
+              onChange: (val) => setActiveTab(val),
+              options: STN_ALERT_CENTER_TABS.map((tab) => ({
+                value: tab.id,
+                label: tab.label,
+                id: tabIds?.[tab.id]
+              }))
+            }
+          ),
+          /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__header-right", children: [
+            /* @__PURE__ */ jsx53(
+              StnButton,
+              {
+                variant: "text",
+                size: "sm",
+                icon: "line/check-circle",
+                onClick: onMarkAllAsRead,
+                children: "\uBAA8\uB450 \uC77D\uC74C"
+              }
+            ),
+            /* @__PURE__ */ jsx53("div", { className: "stn-alert-center__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx53(
+              StnButton,
+              {
+                icon: "line/x",
+                variant: "text",
+                size: "sm",
+                "aria-label": closeLabel,
+                onClick: onClose
+              }
+            )
+          ] })
         ] }),
-        /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__time", children: row.time })
-      ] }) }) }, row.id ?? row.text)) }),
-      activeTab === "deploy" && /* @__PURE__ */ jsx52("ul", { className: "stn-alert-center__list", children: deployItems.map((row) => /* @__PURE__ */ jsx52("li", { children: /* @__PURE__ */ jsx52(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs42("div", { className: "stn-alert-card__row", children: [
-        /* @__PURE__ */ jsx52(StnIcon, { name: "line/settings", size: 24, color: "var(--stn-secondary)", className: "stn-alert-card__icon" }),
-        /* @__PURE__ */ jsxs42("div", { className: "stn-alert-card__body", children: [
-          /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--deploy", children: row.typeLabel }),
-          /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__desc", children: row.text })
+        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__list-wrap", children: [
+          activeTab === "error" && /* @__PURE__ */ jsx53("ul", { className: "stn-alert-center__list", children: alerts.map((item) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(
+            StnAlertCard,
+            {
+              item,
+              titleOverflow: resolvedTitleOverflow,
+              descOverflow: resolvedDescOverflow,
+              onClick: () => onItemClick?.(item)
+            }
+          ) }, item.id ?? item.title)) }),
+          activeTab === "work" && /* @__PURE__ */ jsx53("ul", { className: "stn-alert-center__list", children: workItems.map((row) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__row", children: [
+            /* @__PURE__ */ jsx53(StnIcon, { name: "line/clock", size: 24, color: "var(--stn-text-secondary)", className: "stn-alert-card__icon" }),
+            /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__body", children: [
+              /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--work", children: row.typeLabel }),
+              /* @__PURE__ */ jsx53("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__text-inner", children: row.text }) })
+            ] }),
+            /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__time", children: row.time })
+          ] }) }) }, row.id ?? row.text)) }),
+          activeTab === "deploy" && /* @__PURE__ */ jsx53("ul", { className: "stn-alert-center__list", children: deployItems.map((row) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__row", children: [
+            /* @__PURE__ */ jsx53(StnIcon, { name: "line/settings", size: 24, color: "var(--stn-secondary)", className: "stn-alert-card__icon" }),
+            /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__body", children: [
+              /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--deploy", children: row.typeLabel }),
+              /* @__PURE__ */ jsx53("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__text-inner", children: row.text }) })
+            ] }),
+            /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__time", children: row.time })
+          ] }) }) }, row.id ?? row.text)) })
         ] }),
-        /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__time", children: row.time })
-      ] }) }) }, row.id ?? row.text)) })
-    ] }),
-    /* @__PURE__ */ jsx52("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs42(
-      "button",
-      {
-        type: "button",
-        className: "stn-alert-center__footer-link",
-        onClick: onManageSettings,
-        children: [
-          /* @__PURE__ */ jsx52("span", { children: "\uC54C\uB9BC \uC124\uC815 \uAD00\uB9AC" }),
-          /* @__PURE__ */ jsx52(StnIcon, { name: "line/settings", size: 14 }),
-          /* @__PURE__ */ jsx52(StnIcon, { name: "line/chevron-right", size: 14 })
-        ]
-      }
-    ) })
-  ] });
+        /* @__PURE__ */ jsx53("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs43(
+          "button",
+          {
+            type: "button",
+            className: "stn-alert-center__footer-link",
+            onClick: onManageSettings,
+            children: [
+              /* @__PURE__ */ jsx53("span", { children: "\uC54C\uB9BC \uC124\uC815 \uAD00\uB9AC" }),
+              /* @__PURE__ */ jsx53(StnIcon, { name: "line/settings", size: 14 }),
+              /* @__PURE__ */ jsx53(StnIcon, { name: "line/chevron-right", size: 14 })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 }
 
 // src/patterns/alertCenter/StnAlertCenterDocPreview.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function StnAlertCenterDocPreview({
   theme = "light",
   withDocChrome = true,
   children,
   ...panelProps
 }) {
-  const panel = children ?? /* @__PURE__ */ jsx53(StnAlertCenterPanel, { ...panelProps });
+  const panel = children ?? /* @__PURE__ */ jsx54(StnAlertCenterPanel, { ...panelProps });
   if (!withDocChrome) {
-    return /* @__PURE__ */ jsx53(StnProvider, { theme, applyThemeToDocument: false, children: panel });
+    return /* @__PURE__ */ jsx54(StnProvider, { theme, applyThemeToDocument: false, children: panel });
   }
-  return /* @__PURE__ */ jsx53("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-theme": theme, children: /* @__PURE__ */ jsx53("div", { className: "stn-alert-center-preview-shell", children: panel }) });
+  return /* @__PURE__ */ jsx54("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-theme": theme, children: /* @__PURE__ */ jsx54("div", { className: "stn-alert-center-preview-shell", children: panel }) });
 }
 
 // src/index.ts
@@ -6484,6 +6857,7 @@ import {
   STN_ALERT_CENTER_DEMO_WORK as STN_ALERT_CENTER_DEMO_WORK2,
   STN_ALERT_CENTER_DEMO_DEPLOY as STN_ALERT_CENTER_DEMO_DEPLOY2,
   STN_ALERT_CENTER_USAGE,
+  STN_ALERT_CENTER_USAGE_HTML,
   STN_GNB_ALERT_INTEGRATION_USAGE
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
 
@@ -6498,7 +6872,7 @@ var useSideNav = () => useContext3(SideNavContext);
 // src/components/sideNav/StnSideNavItem.tsx
 import { forwardRef as forwardRef25 } from "react";
 import { STN_NAV_MENU_SUB_ICON } from "@stn-uiux/pub-ui/data/stnSideNavItem";
-import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 function maskStyle2(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
@@ -6545,13 +6919,13 @@ var StnSideNavItem = forwardRef25(function StnSideNavItem2({
       sideNav.onSelect(id);
     }
   };
-  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ jsxs43("span", { className: "stn-side-nav-item__icon-wrap", children: [
-    /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }),
-    showDot ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__dot-wrap", "aria-hidden": "true", children: /* @__PURE__ */ jsx54(StnBadge, { variant: "dot", color: "error" }) }) : null
+  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ jsxs44("span", { className: "stn-side-nav-item__icon-wrap", children: [
+    /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }),
+    showDot ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__dot-wrap", "aria-hidden": "true", children: /* @__PURE__ */ jsx55(StnBadge, { variant: "dot", color: "error" }) }) : null
   ] }) : null;
-  const subIconElement = hasIcon && isSub ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__sub-icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }) : null;
+  const subIconElement = hasIcon && isSub ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__sub-icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }) : null;
   const activeIconElement = isSub ? subIconElement : iconElement;
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     "button",
     {
       ref,
@@ -6570,10 +6944,10 @@ var StnSideNavItem = forwardRef25(function StnSideNavItem2({
       title: collapsed ? label : void 0,
       onClick: handleClick,
       ...rest,
-      children: /* @__PURE__ */ jsxs43("span", { className: cn("stn-side-nav-item__inner", spreadTrail && "spread"), children: [
-        /* @__PURE__ */ jsxs43("span", { className: "stn-side-nav-item__lead", children: [
-          isSub && showSubIndent ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__sub-indent", "aria-hidden": "true" }) : null,
-          shouldShowSubDot ? /* @__PURE__ */ jsx54(
+      children: /* @__PURE__ */ jsxs44("span", { className: cn("stn-side-nav-item__inner", spreadTrail && "spread"), children: [
+        /* @__PURE__ */ jsxs44("span", { className: "stn-side-nav-item__lead", children: [
+          isSub && showSubIndent ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__sub-indent", "aria-hidden": "true" }) : null,
+          shouldShowSubDot ? /* @__PURE__ */ jsx55(
             "span",
             {
               className: cn(
@@ -6581,14 +6955,14 @@ var StnSideNavItem = forwardRef25(function StnSideNavItem2({
                 hasIcon && iconPosition === "left" && "compact"
               ),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__sub-dot-glyph", style: maskStyle2(STN_NAV_MENU_SUB_ICON) })
+              children: /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__sub-dot-glyph", style: maskStyle2(STN_NAV_MENU_SUB_ICON) })
             }
           ) : null,
           iconPosition === "left" ? activeIconElement : null,
-          /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__label", children: label })
+          /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__label", children: label })
         ] }),
         iconPosition === "right" ? activeIconElement : null,
-        renderBadge ? typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx54(
+        renderBadge ? typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx55(
           StnBadge,
           {
             badgeContent: badge,
@@ -6596,7 +6970,7 @@ var StnSideNavItem = forwardRef25(function StnSideNavItem2({
             appearance: "subtle",
             className: "stn-side-nav-item__badge"
           }
-        ) : badge ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__badge", children: badge }) : showBadgeDot ? /* @__PURE__ */ jsx54(
+        ) : badge ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__badge", children: badge }) : showBadgeDot ? /* @__PURE__ */ jsx55(
           StnBadge,
           {
             variant: "dot",
@@ -6604,7 +6978,7 @@ var StnSideNavItem = forwardRef25(function StnSideNavItem2({
             className: "stn-side-nav-item__badge"
           }
         ) : null : null,
-        !isSub && showChevron && !collapsed ? /* @__PURE__ */ jsx54(
+        !isSub && showChevron && !collapsed ? /* @__PURE__ */ jsx55(
           "span",
           {
             className: cn(
@@ -6625,11 +6999,11 @@ import { forwardRef as forwardRef27 } from "react";
 
 // src/components/sideNav/StnSideNavLogo.tsx
 import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var StnSideNavLogo = forwardRef26(
   function StnSideNavLogo2({ className, logoProps, ...rest }, ref) {
     const { collapsed } = useSideNav();
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       "div",
       {
         ref,
@@ -6640,7 +7014,7 @@ var StnSideNavLogo = forwardRef26(
         ),
         title: "InfoMap",
         ...rest,
-        children: /* @__PURE__ */ jsx55(
+        children: /* @__PURE__ */ jsx56(
           StnLogo,
           {
             variant: collapsed ? "onlyimg" : "horizontal",
@@ -6654,7 +7028,7 @@ var StnSideNavLogo = forwardRef26(
 );
 
 // src/components/sideNav/StnSideNavHeader.tsx
-import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx57, jsxs as jsxs45 } from "react/jsx-runtime";
 var StnSideNavHeader = forwardRef27(function StnSideNavHeader2({
   children,
   border = false,
@@ -6667,7 +7041,7 @@ var StnSideNavHeader = forwardRef27(function StnSideNavHeader2({
   const { collapsed, onToggleCollapse, isDrawer, setMobileOpen } = useSideNav();
   const withBorder = Boolean(border || hasBorder);
   const shouldShowClose = showClose ?? Boolean(isDrawer);
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       ref,
@@ -6678,9 +7052,9 @@ var StnSideNavHeader = forwardRef27(function StnSideNavHeader2({
         className
       ),
       ...rest,
-      children: children ?? /* @__PURE__ */ jsxs44(Fragment6, { children: [
-        /* @__PURE__ */ jsx56(StnSideNavLogo, {}),
-        shouldShowClose ? /* @__PURE__ */ jsx56(
+      children: children ?? /* @__PURE__ */ jsxs45(Fragment6, { children: [
+        /* @__PURE__ */ jsx57(StnSideNavLogo, {}),
+        shouldShowClose ? /* @__PURE__ */ jsx57(
           StnButton,
           {
             size: "sm",
@@ -6692,7 +7066,7 @@ var StnSideNavHeader = forwardRef27(function StnSideNavHeader2({
             className: "stn-side-nav__collapse-btn",
             onClick: () => setMobileOpen?.(false)
           }
-        ) : showToggle ? /* @__PURE__ */ jsx56(
+        ) : showToggle ? /* @__PURE__ */ jsx57(
           StnButton,
           {
             size: "sm",
@@ -6712,7 +7086,7 @@ var StnSideNavHeader = forwardRef27(function StnSideNavHeader2({
 
 // src/components/sideNav/StnSideNavMenu.tsx
 import { forwardRef as forwardRef28 } from "react";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var StnSideNavMenu = forwardRef28(function StnSideNavMenu2({
   children,
   className,
@@ -6720,7 +7094,7 @@ var StnSideNavMenu = forwardRef28(function StnSideNavMenu2({
   scrollColor = "fade",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     "nav",
     {
       ref,
@@ -6746,7 +7120,7 @@ import {
   useRef as useRef7,
   useState as useState12
 } from "react";
-import { jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
 var StnSideNavGroup = forwardRef29(function StnSideNavGroup2({
   label,
   parent,
@@ -6791,7 +7165,7 @@ var StnSideNavGroup = forwardRef29(function StnSideNavGroup2({
     }
     onOpenChange?.(next);
   };
-  const subnavNode = children && (!collapsed && isOpen) ? /* @__PURE__ */ jsx58(
+  const subnavNode = children && (!collapsed && isOpen) ? /* @__PURE__ */ jsx59(
     "div",
     {
       className: cn(
@@ -6806,7 +7180,7 @@ var StnSideNavGroup = forwardRef29(function StnSideNavGroup2({
       children
     }
   ) : null;
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46(
     "div",
     {
       ref: (node) => {
@@ -6827,7 +7201,7 @@ var StnSideNavGroup = forwardRef29(function StnSideNavGroup2({
       "aria-label": typeof label === "string" ? label : void 0,
       ...rest,
       children: [
-        label && !collapsed ? /* @__PURE__ */ jsx58("span", { className: "stn-side-nav__group-label", onClick: handleToggle, children: label }) : null,
+        label && !collapsed ? /* @__PURE__ */ jsx59("span", { className: "stn-side-nav__group-label", onClick: handleToggle, children: label }) : null,
         isUp ? subnavNode : null,
         parent,
         !isUp ? subnavNode : null
@@ -6838,9 +7212,9 @@ var StnSideNavGroup = forwardRef29(function StnSideNavGroup2({
 
 // src/components/sideNav/StnSideNavSpacer.tsx
 import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var StnSideNavSpacer = forwardRef30(function StnSideNavSpacer2({ className, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     "div",
     {
       ref,
@@ -6854,9 +7228,9 @@ var StnSideNavSpacer = forwardRef30(function StnSideNavSpacer2({ className, styl
 
 // src/components/sideNav/StnSideNavFooter.tsx
 import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var StnSideNavFooter = forwardRef31(function StnSideNavFooter2({ curved = false, children, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "nav",
     {
       ref,
@@ -6870,11 +7244,11 @@ var StnSideNavFooter = forwardRef31(function StnSideNavFooter2({ curved = false,
 
 // src/components/sideNav/StnSideNavToggle.tsx
 import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var StnSideNavToggle = forwardRef32(
   function StnSideNavToggle2({ className, onClick, ...rest }, ref) {
     const { collapsed, onToggleCollapse } = useSideNav();
-    return /* @__PURE__ */ jsx61(
+    return /* @__PURE__ */ jsx62(
       "button",
       {
         ref,
@@ -6887,7 +7261,7 @@ var StnSideNavToggle = forwardRef32(
         "aria-label": collapsed ? "\uC0AC\uC774\uB4DC\uBC14 \uD3BC\uCE58\uAE30" : "\uC0AC\uC774\uB4DC\uBC14 \uC811\uAE30",
         title: collapsed ? "\uC0AC\uC774\uB4DC\uBC14 \uD3BC\uCE58\uAE30" : "\uC0AC\uC774\uB4DC\uBC14 \uC811\uAE30",
         ...rest,
-        children: /* @__PURE__ */ jsx61(
+        children: /* @__PURE__ */ jsx62(
           "svg",
           {
             width: "12",
@@ -6898,7 +7272,7 @@ var StnSideNavToggle = forwardRef32(
             strokeWidth: "2.5",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsx61("path", { d: "M9 18l6-6-6-6" })
+            children: /* @__PURE__ */ jsx62("path", { d: "M9 18l6-6-6-6" })
           }
         )
       }
@@ -6908,17 +7282,17 @@ var StnSideNavToggle = forwardRef32(
 
 // src/components/sideNav/StnSideNavWatermark.tsx
 import { forwardRef as forwardRef33 } from "react";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var StnSideNavWatermark = forwardRef33(
   function StnSideNavWatermark2({ size = "xl", theme, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx62(
+    return /* @__PURE__ */ jsx63(
       "div",
       {
         ref,
         className: cn("stn-side-nav__watermark", className),
         "aria-hidden": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx62(StnLogo, { variant: "watermark", size, theme })
+        children: /* @__PURE__ */ jsx63(StnLogo, { variant: "watermark", size, theme })
       }
     );
   }
@@ -6926,11 +7300,11 @@ var StnSideNavWatermark = forwardRef33(
 
 // src/components/sideNav/StnSideNavMobileTrigger.tsx
 import { forwardRef as forwardRef34 } from "react";
-import { jsx as jsx63, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs47 } from "react/jsx-runtime";
 var StnSideNavMobileTrigger = forwardRef34(
   function StnSideNavMobileTrigger2({ floating = false, className, children, onClick, ...rest }, ref) {
     const { onToggleMobileOpen, mobileOpen } = useSideNav();
-    return /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsx64(
       "button",
       {
         ref,
@@ -6948,10 +7322,10 @@ var StnSideNavMobileTrigger = forwardRef34(
           onToggleMobileOpen?.();
         },
         ...rest,
-        children: children ?? /* @__PURE__ */ jsxs46("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx63("span", {}),
-          /* @__PURE__ */ jsx63("span", {}),
-          /* @__PURE__ */ jsx63("span", {})
+        children: children ?? /* @__PURE__ */ jsxs47("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx64("span", {}),
+          /* @__PURE__ */ jsx64("span", {}),
+          /* @__PURE__ */ jsx64("span", {})
         ] })
       }
     );
@@ -6962,10 +7336,10 @@ var StnSideNavMobileTrigger = forwardRef34(
 import {
   forwardRef as forwardRef35
 } from "react";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var StnSideNavSub = forwardRef35(
   function StnSideNavSub2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx65(
       "div",
       {
         ref,
@@ -6994,14 +7368,14 @@ var StnSideNavSubItem = forwardRef35(
     const { collapsed } = useSideNav();
     const content = children ?? label;
     const computedTitle = title ?? (typeof content === "string" ? content : void 0);
-    const resolvedIcon = icon ?? (iconSrc ? /* @__PURE__ */ jsx64("span", { className: "stn-side-nav__sub-icon", children: /* @__PURE__ */ jsx64(
+    const resolvedIcon = icon ?? (iconSrc ? /* @__PURE__ */ jsx65("span", { className: "stn-side-nav__sub-icon", children: /* @__PURE__ */ jsx65(
       "span",
       {
         className: "stn-side-nav__sub-glyph",
         style: { maskImage: `url('${iconSrc}')`, WebkitMaskImage: `url('${iconSrc}')` }
       }
     ) }) : null);
-    return /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx65(
       StnButton,
       {
         ref,
@@ -7021,7 +7395,7 @@ var StnSideNavSubItem = forwardRef35(
 
 // src/components/sideNav/StnSideNavSubNav.tsx
 import { forwardRef as forwardRef36 } from "react";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var StnSideNavSubNav = forwardRef36(
   function StnSideNavSubNav2({
     dropdown = false,
@@ -7034,7 +7408,7 @@ var StnSideNavSubNav = forwardRef36(
   }, ref) {
     const isUp = direction === "up";
     const isTransparent = variant === "transparent" || background === false;
-    return /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx66(
       "div",
       {
         ref,
@@ -7062,7 +7436,7 @@ import {
   useMemo as useMemo4,
   useState as useState13
 } from "react";
-import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs48 } from "react/jsx-runtime";
 function useControllableState(controlledValue, defaultValue, onChange) {
   const [internalState, setInternalState] = useState13(defaultValue);
   const isControlled = controlledValue !== void 0;
@@ -7139,9 +7513,9 @@ var StnSideNavigationRoot = forwardRef37(function StnSideNavigationRoot2({
     }),
     [isEffectiveCollapsed, activeId, setActiveId, handleToggleCollapse, mobileOpen, handleToggleMobileOpen, setMobileOpen, isDrawerMode]
   );
-  return /* @__PURE__ */ jsxs47(SideNavContext.Provider, { value: contextValue, children: [
-    showMobileTrigger && /* @__PURE__ */ jsx66(StnSideNavMobileTrigger, { floating: true }),
-    (drawer || responsiveDrawer) && /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsxs48(SideNavContext.Provider, { value: contextValue, children: [
+    showMobileTrigger && /* @__PURE__ */ jsx67(StnSideNavMobileTrigger, { floating: true }),
+    (drawer || responsiveDrawer) && /* @__PURE__ */ jsx67(
       "div",
       {
         className: cn("stn-side-nav__backdrop", mobileOpen && "is-open"),
@@ -7149,7 +7523,7 @@ var StnSideNavigationRoot = forwardRef37(function StnSideNavigationRoot2({
         "aria-hidden": !mobileOpen
       }
     ),
-    /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx67(
       "aside",
       {
         ref,
@@ -7191,14 +7565,14 @@ var StnSideNavigation = Object.assign(StnSideNavigationRoot, {
 import {
   Fragment as Fragment7,
   useEffect as useEffect11,
-  useId as useId13,
+  useId as useId15,
   useRef as useRef8,
   useState as useState14
 } from "react";
 import {
   STN_BREADCRUMB_ICON_SRC
 } from "@stn-uiux/pub-ui/data/stnBreadcrumb";
-import { Fragment as Fragment8, jsx as jsx67, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx68, jsxs as jsxs49 } from "react/jsx-runtime";
 function maskStyle3(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
@@ -7211,13 +7585,13 @@ function hasSegmentMenu(item) {
   return Boolean(item.menu || item.menuItems && item.menuItems.length > 0);
 }
 function BreadcrumbSeparator() {
-  return /* @__PURE__ */ jsx67("li", { className: "separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx67("span", { style: maskStyle3(STN_BREADCRUMB_ICON_SRC.separator) }) });
+  return /* @__PURE__ */ jsx68("li", { className: "separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx68("span", { style: maskStyle3(STN_BREADCRUMB_ICON_SRC.separator) }) });
 }
 function BreadcrumbIcon({ src }) {
-  return /* @__PURE__ */ jsx67("span", { className: "stn-breadcrumb__icon-glyph", style: maskStyle3(src), "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__icon-glyph", style: maskStyle3(src), "aria-hidden": "true" });
 }
 function BreadcrumbCaret() {
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     "span",
     {
       className: "stn-breadcrumb__caret",
@@ -7231,10 +7605,10 @@ function SegmentContent({
   label,
   menu
 }) {
-  return /* @__PURE__ */ jsxs48(Fragment8, { children: [
-    iconSrc ? /* @__PURE__ */ jsx67(BreadcrumbIcon, { src: iconSrc }) : null,
-    /* @__PURE__ */ jsx67("span", { className: "stn-breadcrumb__label", children: label }),
-    menu ? /* @__PURE__ */ jsx67(BreadcrumbCaret, {}) : null
+  return /* @__PURE__ */ jsxs49(Fragment8, { children: [
+    iconSrc ? /* @__PURE__ */ jsx68(BreadcrumbIcon, { src: iconSrc }) : null,
+    /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__label", children: label }),
+    menu ? /* @__PURE__ */ jsx68(BreadcrumbCaret, {}) : null
   ] });
 }
 function BreadcrumbMenuList({
@@ -7242,7 +7616,7 @@ function BreadcrumbMenuList({
   items,
   onPick
 }) {
-  return /* @__PURE__ */ jsx67("ul", { id, className: "stn-breadcrumb__menu", role: "menu", children: items.map((option) => /* @__PURE__ */ jsx67("li", { role: "none", children: option.href ? /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68("ul", { id, className: "stn-breadcrumb__menu", role: "menu", children: items.map((option) => /* @__PURE__ */ jsx68("li", { role: "none", children: option.href ? /* @__PURE__ */ jsx68(
     "a",
     {
       role: "menuitem",
@@ -7254,7 +7628,7 @@ function BreadcrumbMenuList({
       },
       children: option.label
     }
-  ) : /* @__PURE__ */ jsx67(
+  ) : /* @__PURE__ */ jsx68(
     "button",
     {
       type: "button",
@@ -7291,20 +7665,20 @@ function BreadcrumbSegment({
   item,
   isCurrent
 }) {
-  const menuId = useId13();
+  const menuId = useId15();
   const [open, setOpen] = useState14(false);
   const menuItems = item.menuItems ?? [];
   const showMenu = hasSegmentMenu(item) && !isCurrent;
   const canOpenMenu = showMenu && menuItems.length > 0;
   const rootRef = useDismissibleMenu(open, () => setOpen(false));
   const iconSrc = resolveIconSrc(item);
-  const content = /* @__PURE__ */ jsx67(SegmentContent, { iconSrc, label: item.label, menu: showMenu });
+  const content = /* @__PURE__ */ jsx68(SegmentContent, { iconSrc, label: item.label, menu: showMenu });
   if (isCurrent) {
-    return /* @__PURE__ */ jsx67("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
+    return /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
   }
   if (canOpenMenu) {
-    return /* @__PURE__ */ jsxs48("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
-      /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsxs49("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
+      /* @__PURE__ */ jsx68(
         "button",
         {
           type: "button",
@@ -7320,7 +7694,7 @@ function BreadcrumbSegment({
           children: content
         }
       ),
-      open ? /* @__PURE__ */ jsx67(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
+      open ? /* @__PURE__ */ jsx68(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
     ] });
   }
   if (item.menu || item.onClick) {
@@ -7332,7 +7706,7 @@ function BreadcrumbSegment({
       "aria-haspopup": item.menu ? "menu" : void 0,
       "aria-expanded": item.menu ? false : void 0
     };
-    return /* @__PURE__ */ jsx67("button", { ...buttonProps, children: content });
+    return /* @__PURE__ */ jsx68("button", { ...buttonProps, children: content });
   }
   if (item.href) {
     const linkProps = {
@@ -7341,17 +7715,17 @@ function BreadcrumbSegment({
       onClick: item.onClick,
       "aria-label": item.label
     };
-    return /* @__PURE__ */ jsx67("a", { ...linkProps, children: content });
+    return /* @__PURE__ */ jsx68("a", { ...linkProps, children: content });
   }
-  return /* @__PURE__ */ jsx67("span", { className: "stn-breadcrumb__segment", "aria-label": item.label, children: content });
+  return /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__segment", "aria-label": item.label, children: content });
 }
 function BreadcrumbBack({
   label,
   href,
   onClick
 }) {
-  const content = /* @__PURE__ */ jsxs48(Fragment8, { children: [
-    /* @__PURE__ */ jsx67(
+  const content = /* @__PURE__ */ jsxs49(Fragment8, { children: [
+    /* @__PURE__ */ jsx68(
       "span",
       {
         className: "stn-breadcrumb__back-glyph",
@@ -7359,12 +7733,12 @@ function BreadcrumbBack({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx67("span", { className: "stn-breadcrumb__label", children: label })
+    /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__label", children: label })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx67("a", { className: "stn-breadcrumb__back", href, onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
+    return /* @__PURE__ */ jsx68("a", { className: "stn-breadcrumb__back", href, onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
   }
-  return /* @__PURE__ */ jsx67("button", { type: "button", className: "stn-breadcrumb__back", onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
+  return /* @__PURE__ */ jsx68("button", { type: "button", className: "stn-breadcrumb__back", onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
 }
 function splitCollapsedItems(items, maxItems, itemsBeforeCollapse, itemsAfterCollapse) {
   if (!maxItems || items.length <= maxItems) {
@@ -7395,8 +7769,8 @@ function BreadcrumbCollapsed({
     onClick: item.onClick,
     current: item.current
   }));
-  return /* @__PURE__ */ jsxs48("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
-    /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsxs49("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
+    /* @__PURE__ */ jsx68(
       "button",
       {
         type: "button",
@@ -7409,7 +7783,7 @@ function BreadcrumbCollapsed({
         children: "\u22EF"
       }
     ),
-    open ? /* @__PURE__ */ jsx67(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
+    open ? /* @__PURE__ */ jsx68(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
   ] });
 }
 function StnBreadcrumb({
@@ -7426,7 +7800,7 @@ function StnBreadcrumb({
   homeLabel = "\uD648",
   renderItem
 }) {
-  const menuId = useId13();
+  const menuId = useId15();
   const currentIndex = items.findIndex((item, index) => item.current ?? index === items.length - 1);
   const currentItem = currentIndex >= 0 ? items[currentIndex] : items[items.length - 1];
   const previousItem = currentIndex > 0 ? items[currentIndex - 1] : null;
@@ -7441,8 +7815,8 @@ function StnBreadcrumb({
   const lastId = items[items.length - 1]?.id;
   const renderTrailItem = (item) => {
     const isCurrent = Boolean(item.current) || item.id === lastId;
-    const segment = /* @__PURE__ */ jsx67(BreadcrumbSegment, { item, isCurrent });
-    return /* @__PURE__ */ jsx67(
+    const segment = /* @__PURE__ */ jsx68(BreadcrumbSegment, { item, isCurrent });
+    return /* @__PURE__ */ jsx68(
       "li",
       {
         className: cn(
@@ -7453,27 +7827,27 @@ function StnBreadcrumb({
       }
     );
   };
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     "nav",
     {
       className: cn("stn-breadcrumb", size, variant === "chip" && "chip", className),
       "aria-label": "Breadcrumb",
-      children: /* @__PURE__ */ jsxs48("ol", { className: "stn-breadcrumb__list", children: [
-        currentItem ? /* @__PURE__ */ jsx67("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--back", children: /* @__PURE__ */ jsx67(BreadcrumbBack, { label: currentItem.label, href: backHref, onClick: backOnClick }) }) : null,
-        showHome ? /* @__PURE__ */ jsx67("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs48("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
-          /* @__PURE__ */ jsx67(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
-          /* @__PURE__ */ jsx67("span", { className: "blind", children: homeLabel })
+      children: /* @__PURE__ */ jsxs49("ol", { className: "stn-breadcrumb__list", children: [
+        currentItem ? /* @__PURE__ */ jsx68("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--back", children: /* @__PURE__ */ jsx68(BreadcrumbBack, { label: currentItem.label, href: backHref, onClick: backOnClick }) }) : null,
+        showHome ? /* @__PURE__ */ jsx68("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs49("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
+          /* @__PURE__ */ jsx68(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
+          /* @__PURE__ */ jsx68("span", { className: "blind", children: homeLabel })
         ] }) }) : null,
-        head.map((item, index) => /* @__PURE__ */ jsxs48(Fragment7, { children: [
-          showHome || index > 0 ? /* @__PURE__ */ jsx67(BreadcrumbSeparator, {}) : null,
+        head.map((item, index) => /* @__PURE__ */ jsxs49(Fragment7, { children: [
+          showHome || index > 0 ? /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}) : null,
           renderTrailItem(item)
         ] }, item.id)),
-        hidden.length > 0 ? /* @__PURE__ */ jsxs48(Fragment8, { children: [
-          /* @__PURE__ */ jsx67(BreadcrumbSeparator, {}),
-          /* @__PURE__ */ jsx67(BreadcrumbCollapsed, { items: hidden, menuId })
+        hidden.length > 0 ? /* @__PURE__ */ jsxs49(Fragment8, { children: [
+          /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}),
+          /* @__PURE__ */ jsx68(BreadcrumbCollapsed, { items: hidden, menuId })
         ] }) : null,
-        tail.map((item) => /* @__PURE__ */ jsxs48(Fragment7, { children: [
-          /* @__PURE__ */ jsx67(BreadcrumbSeparator, {}),
+        tail.map((item) => /* @__PURE__ */ jsxs49(Fragment7, { children: [
+          /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}),
           renderTrailItem(item)
         ] }, item.id))
       ] })
@@ -7484,7 +7858,7 @@ function StnBreadcrumb({
 // src/components/StnHeaderTitle.tsx
 import { useEffect as useEffect12, useState as useState15 } from "react";
 import { STN_HEADER_TITLE_FRAME } from "@stn-uiux/pub-ui/data/stnHeaderTitle";
-import { jsx as jsx68, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs50 } from "react/jsx-runtime";
 var KO_WEEKDAY_SHORT = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 var KO_WEEKDAY_LONG = [
   "\uC77C\uC694\uC77C",
@@ -7523,8 +7897,8 @@ function formatStnHeaderTitleTime(date, options) {
 }
 function HeaderTitleFrame({ preview = false }) {
   const frameClass = preview ? "stn-header-title__frame-preview" : "stn-header-title__frame";
-  return /* @__PURE__ */ jsxs49("div", { className: frameClass, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx68("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--outer", children: /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsxs50("div", { className: frameClass, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx69("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--outer", children: /* @__PURE__ */ jsx69(
       "img",
       {
         className: "stn-header-title__frame-img",
@@ -7533,8 +7907,8 @@ function HeaderTitleFrame({ preview = false }) {
         draggable: false
       }
     ) }),
-    /* @__PURE__ */ jsxs49("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
-      /* @__PURE__ */ jsx68(
+    /* @__PURE__ */ jsxs50("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
+      /* @__PURE__ */ jsx69(
         "img",
         {
           className: "stn-header-title__frame-img stn-header-title__frame-img--dark",
@@ -7543,7 +7917,7 @@ function HeaderTitleFrame({ preview = false }) {
           draggable: false
         }
       ),
-      /* @__PURE__ */ jsx68(
+      /* @__PURE__ */ jsx69(
         "img",
         {
           className: "stn-header-title__frame-img stn-header-title__frame-img--light",
@@ -7556,7 +7930,7 @@ function HeaderTitleFrame({ preview = false }) {
   ] });
 }
 function StnHeaderTitleFramePreview({ className }) {
-  return /* @__PURE__ */ jsx68("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx68(HeaderTitleFrame, { preview: true }) });
+  return /* @__PURE__ */ jsx69("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx69(HeaderTitleFrame, { preview: true }) });
 }
 function useLiveClock(enabled) {
   const [now, setNow] = useState15(() => /* @__PURE__ */ new Date());
@@ -7572,35 +7946,35 @@ function StnHeaderTitleMainText({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68("h1", { className: cn("stn-header-title__text", className), ...rest, children });
+  return /* @__PURE__ */ jsx69("h1", { className: cn("stn-header-title__text", className), ...rest, children });
 }
 function StnHeaderTitleSubText({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68("span", { className: cn("stn-header-title__sub-text", className), ...rest, children });
+  return /* @__PURE__ */ jsx69("span", { className: cn("stn-header-title__sub-text", className), ...rest, children });
 }
 function StnHeaderTitleDate({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68("time", { className: cn("stn-header-title__date", className), ...rest, children });
+  return /* @__PURE__ */ jsx69("time", { className: cn("stn-header-title__date", className), ...rest, children });
 }
 function StnHeaderTitleWeekday({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68("span", { className: cn("stn-header-title__weekday", className), ...rest, children });
+  return /* @__PURE__ */ jsx69("span", { className: cn("stn-header-title__weekday", className), ...rest, children });
 }
 function StnHeaderTitleTime({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68("span", { className: cn("stn-header-title__time", className), "aria-label": "\uD604\uC7AC \uC2DC\uAC01", ...rest, children });
+  return /* @__PURE__ */ jsx69("span", { className: cn("stn-header-title__time", className), "aria-label": "\uD604\uC7AC \uC2DC\uAC01", ...rest, children });
 }
 function StnHeaderTitleClock({
   className,
@@ -7623,7 +7997,7 @@ function StnHeaderTitleClock({
 }) {
   const now = useLiveClock(live);
   if (children != null) {
-    return /* @__PURE__ */ jsxs49(
+    return /* @__PURE__ */ jsxs50(
       "header",
       {
         className: cn(
@@ -7635,8 +8009,8 @@ function StnHeaderTitleClock({
         ),
         ...rest,
         children: [
-          framed ? /* @__PURE__ */ jsx68(HeaderTitleFrame, {}) : null,
-          /* @__PURE__ */ jsx68("div", { className: "stn-header-title__content", children })
+          framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
+          /* @__PURE__ */ jsx69("div", { className: "stn-header-title__content", children })
         ]
       }
     );
@@ -7666,7 +8040,7 @@ function StnHeaderTitleClock({
       resolvedTime = formatStnHeaderTitleTime(now, { showSeconds });
     }
   }
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "header",
     {
       className: cn(
@@ -7678,11 +8052,11 @@ function StnHeaderTitleClock({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx68(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs49("div", { className: "stn-header-title__content", children: [
-          resolvedDate ? /* @__PURE__ */ jsx68("time", { className: "stn-header-title__date", dateTime: resolvedDate, children: resolvedDate }) : null,
-          showWeekdayOnly ? /* @__PURE__ */ jsx68("span", { className: "stn-header-title__weekday", children: resolvedWeekday }) : null,
-          resolvedTime ? /* @__PURE__ */ jsx68("span", { className: "stn-header-title__time", "aria-label": "\uD604\uC7AC \uC2DC\uAC01", children: resolvedTime }) : null
+        framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsxs50("div", { className: "stn-header-title__content", children: [
+          resolvedDate ? /* @__PURE__ */ jsx69("time", { className: "stn-header-title__date", dateTime: resolvedDate, children: resolvedDate }) : null,
+          showWeekdayOnly ? /* @__PURE__ */ jsx69("span", { className: "stn-header-title__weekday", children: resolvedWeekday }) : null,
+          resolvedTime ? /* @__PURE__ */ jsx69("span", { className: "stn-header-title__time", "aria-label": "\uD604\uC7AC \uC2DC\uAC01", children: resolvedTime }) : null
         ] })
       ]
     }
@@ -7699,7 +8073,7 @@ function StnHeaderTitleDual({
   ...rest
 }) {
   const resolvedMain = mainText ?? title ?? children;
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "header",
     {
       className: cn(
@@ -7711,10 +8085,10 @@ function StnHeaderTitleDual({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx68(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs49("div", { className: "stn-header-title__content", children: [
-          subText != null ? /* @__PURE__ */ jsx68("span", { className: "stn-header-title__sub-text", children: subText }) : null,
-          resolvedMain != null ? typeof resolvedMain === "string" || typeof resolvedMain === "number" ? /* @__PURE__ */ jsx68("h1", { className: "stn-header-title__text", children: resolvedMain }) : resolvedMain : null
+        framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsxs50("div", { className: "stn-header-title__content", children: [
+          subText != null ? /* @__PURE__ */ jsx69("span", { className: "stn-header-title__sub-text", children: subText }) : null,
+          resolvedMain != null ? typeof resolvedMain === "string" || typeof resolvedMain === "number" ? /* @__PURE__ */ jsx69("h1", { className: "stn-header-title__text", children: resolvedMain }) : resolvedMain : null
         ] })
       ]
     }
@@ -7729,7 +8103,7 @@ function StnHeaderTitleText({
   ...rest
 }) {
   const resolved = title ?? children;
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "header",
     {
       className: cn(
@@ -7741,20 +8115,20 @@ function StnHeaderTitleText({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx68(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsx68("div", { className: "stn-header-title__content", children: typeof resolved === "string" || typeof resolved === "number" ? /* @__PURE__ */ jsx68("h1", { className: "stn-header-title__text", children: resolved }) : resolved })
+        framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsx69("div", { className: "stn-header-title__content", children: typeof resolved === "string" || typeof resolved === "number" ? /* @__PURE__ */ jsx69("h1", { className: "stn-header-title__text", children: resolved }) : resolved })
       ]
     }
   );
 }
 function StnHeaderTitleRoot(props) {
   if (props.variant === "clock") {
-    return /* @__PURE__ */ jsx68(StnHeaderTitleClock, { ...props });
+    return /* @__PURE__ */ jsx69(StnHeaderTitleClock, { ...props });
   }
   if (props.variant === "dual" || "subText" in props && props.subText != null) {
-    return /* @__PURE__ */ jsx68(StnHeaderTitleDual, { ...props });
+    return /* @__PURE__ */ jsx69(StnHeaderTitleDual, { ...props });
   }
-  return /* @__PURE__ */ jsx68(StnHeaderTitleText, { ...props });
+  return /* @__PURE__ */ jsx69(StnHeaderTitleText, { ...props });
 }
 var StnHeaderTitle = Object.assign(StnHeaderTitleRoot, {
   Text: StnHeaderTitleMainText,
@@ -7769,7 +8143,7 @@ var StnHeaderTitle = Object.assign(StnHeaderTitleRoot, {
 import {
   forwardRef as forwardRef38
 } from "react";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var StnContainer = forwardRef38(function StnContainer2({
   component,
   as,
@@ -7785,7 +8159,7 @@ var StnContainer = forwardRef38(function StnContainer2({
   const Component = component ?? as ?? "div";
   const maxWidthClass = maxWidth ? `stn-container--${maxWidth} stn-container--max-width-${maxWidth}` : "stn-container--fluid stn-container--max-width-false";
   const classKey = maxWidth ? `maxWidth${maxWidth.charAt(0).toUpperCase() + maxWidth.slice(1)}` : "maxWidthFalse";
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     Component,
     {
       ref,
@@ -7809,7 +8183,7 @@ var StnContainer = forwardRef38(function StnContainer2({
 
 // src/layouts/StnGrid.tsx
 import { forwardRef as forwardRef39 } from "react";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var BREAKPOINTS2 = ["xs", "sm", "md", "lg", "xl"];
 var SPACING_CLASS = {
   "0": "0",
@@ -7895,7 +8269,7 @@ var StnGrid = forwardRef39(function StnGrid2({
   const Component = component ?? as ?? "div";
   const justify = typeof justifyContent === "string" && JUSTIFY_CLASS2.has(justifyContent) ? justifyContent : void 0;
   const align = typeof alignItems === "string" && ALIGN_CLASS2.has(alignItems) ? alignItems : void 0;
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     Component,
     {
       ref,
@@ -7919,7 +8293,7 @@ var StnGrid = forwardRef39(function StnGrid2({
 });
 
 // src/layouts/StnLayerShell.tsx
-import { jsx as jsx71, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs51 } from "react/jsx-runtime";
 function StnLayerShell({
   gnb,
   gnbSide = "left",
@@ -7940,7 +8314,7 @@ function StnLayerShell({
   const resolvedMainContent = layer1 ?? children;
   const resolvedModal = layer2;
   const isGnbRight = gnbSide === "right";
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "div",
     {
       id: wrapId,
@@ -7949,8 +8323,8 @@ function StnLayerShell({
       className: cn("stn-wrap", isGnbRight && "stn-wrap--gnb-right", wrapClassName),
       children: [
         layer0,
-        utilities ? /* @__PURE__ */ jsx71("div", { className: "stn-page-utilities", "data-stn-layer-role": "utility", children: utilities }) : null,
-        /* @__PURE__ */ jsxs50(
+        utilities ? /* @__PURE__ */ jsx72("div", { className: "stn-page-utilities", "data-stn-layer-role": "utility", children: utilities }) : null,
+        /* @__PURE__ */ jsxs51(
           "main",
           {
             id: containerId,
@@ -7959,9 +8333,9 @@ function StnLayerShell({
             className: cn("stn-layer-1", scrollable && "scroll", containerClassName),
             children: [
               !isGnbRight && gnb,
-              /* @__PURE__ */ jsxs50("div", { className: "stn-layer-1__main", children: [
-                header ? /* @__PURE__ */ jsx71("header", { className: "stn-layer-1__header", children: header }) : null,
-                /* @__PURE__ */ jsx71("div", { className: cn("stn-layer-1__body", scrollable && "stn-scroll", contentClassName), children: resolvedMainContent })
+              /* @__PURE__ */ jsxs51("div", { className: "stn-layer-1__main", children: [
+                header ? /* @__PURE__ */ jsx72("header", { className: "stn-layer-1__header", children: header }) : null,
+                /* @__PURE__ */ jsx72("div", { className: cn("stn-layer-1__body", scrollable && "stn-scroll", contentClassName), children: resolvedMainContent })
               ] }),
               isGnbRight && gnb
             ]
@@ -7974,13 +8348,13 @@ function StnLayerShell({
 }
 
 // src/patterns/dashboard/StnMapCanvas.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 function StnMapCanvas({
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(
     "div",
     {
       className: cn("stn-map-canvas", className),
@@ -7992,7 +8366,7 @@ function StnMapCanvas({
 }
 
 // src/patterns/dashboard/StnDashboard.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var fillStyle = {
   flex: "1 1 0%",
   minHeight: 0,
@@ -8011,7 +8385,7 @@ function StnDashboardRoot({
 }) {
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     "div",
     {
       className: cn(
@@ -8040,7 +8414,7 @@ function StnDashboardLeft({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     "div",
     {
       className: cn("stn-dashboard__left", className),
@@ -8066,7 +8440,7 @@ function StnDashboardRight({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     "div",
     {
       className: cn("stn-dashboard__right", className),
@@ -8094,7 +8468,7 @@ function StnDashboardTopRight({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     "div",
     {
       className: cn("stn-dashboard__top-right", className),
@@ -8113,9 +8487,9 @@ var StnDashboard = Object.assign(StnDashboardRoot, {
 });
 
 // src/patterns/scaffold/StnPageScaffold.tsx
-import { jsx as jsx74, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs52 } from "react/jsx-runtime";
 function StnPageScaffoldRoot({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn("stn-page-scaffold", className),
@@ -8132,9 +8506,9 @@ function StnPageScaffoldRegion({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs51("div", { className: cn("stn-page-scaffold__region", className), "data-stn-page-scaffold": "region", ...rest, children: [
-    /* @__PURE__ */ jsx74("span", { className: "stn-page-scaffold__region-label", children: label }),
-    hint ? /* @__PURE__ */ jsx74("span", { className: "stn-page-scaffold__region-hint", children: hint }) : null,
+  return /* @__PURE__ */ jsxs52("div", { className: cn("stn-page-scaffold__region", className), "data-stn-page-scaffold": "region", ...rest, children: [
+    /* @__PURE__ */ jsx75("span", { className: "stn-page-scaffold__region-label", children: label }),
+    hint ? /* @__PURE__ */ jsx75("span", { className: "stn-page-scaffold__region-hint", children: hint }) : null,
     children
   ] });
 }
@@ -8145,7 +8519,7 @@ function StnPageScaffoldMapPlaceholder({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx74("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsx75("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs52(
     "div",
     {
       className: cn("stn-page-scaffold__canvas-placeholder", className),
@@ -8153,8 +8527,8 @@ function StnPageScaffoldMapPlaceholder({
       role: "status",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx74("p", { className: "stn-page-scaffold__canvas-placeholder-title", children: message }),
-        note ? /* @__PURE__ */ jsx74("p", { className: "stn-page-scaffold__canvas-placeholder-note", children: note }) : null,
+        /* @__PURE__ */ jsx75("p", { className: "stn-page-scaffold__canvas-placeholder-title", children: message }),
+        note ? /* @__PURE__ */ jsx75("p", { className: "stn-page-scaffold__canvas-placeholder-note", children: note }) : null,
         children
       ]
     }
@@ -8165,7 +8539,7 @@ function StnPageScaffoldMapCanvas({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn("stn-widget", "shell-canvas", "stn-map-canvas", "stn-page-scaffold__canvas", className),
@@ -8178,7 +8552,7 @@ function StnPageScaffoldMapCanvas({
 }
 function StnPageScaffoldLayer({ label, hint, children, className, ...layerProps }) {
   const labelText = label ? hint ? `${label} \xB7 ${hint}` : label : void 0;
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     StnLayer2,
     {
       className: cn(
@@ -8221,16 +8595,16 @@ function ListPageScaffold({
   ...shellProps
 }) {
   const lnbClass = listPageLnbClass(lnbSide);
-  const lnbAside = showLnb ? /* @__PURE__ */ jsx74("aside", { className: lnbClass, children: lnb ?? /* @__PURE__ */ jsx74(StnPageScaffold.Region, { label: "LNB", hint: lnbHint }) }) : null;
+  const lnbAside = showLnb ? /* @__PURE__ */ jsx75("aside", { className: lnbClass, children: lnb ?? /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "LNB", hint: lnbHint }) }) : null;
   const resolvedContent = layer1 ?? children;
-  const body = /* @__PURE__ */ jsxs51(StnPageScaffold, { children: [
+  const body = /* @__PURE__ */ jsxs52(StnPageScaffold, { children: [
     lnbSide === "left" ? lnbAside : null,
-    showSearch ? /* @__PURE__ */ jsx74("div", { className: "stn-page-scaffold__search search_area", children: search ?? /* @__PURE__ */ jsx74(StnPageScaffold.Region, { label: "Search", hint: searchHint }) }) : null,
-    /* @__PURE__ */ jsx74("div", { className: cn("stn-page-scaffold__content content_box", scrollable && "is-scrollable"), children: resolvedContent ?? /* @__PURE__ */ jsx74("div", { className: "stn-table stn-table--fill", children: /* @__PURE__ */ jsx74(StnPageScaffold.Region, { label: "Table", hint: tableHint }) }) }),
+    showSearch ? /* @__PURE__ */ jsx75("div", { className: "stn-page-scaffold__search search_area", children: search ?? /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "Search", hint: searchHint }) }) : null,
+    /* @__PURE__ */ jsx75("div", { className: cn("stn-page-scaffold__content content_box", scrollable && "is-scrollable"), children: resolvedContent ?? /* @__PURE__ */ jsx75("div", { className: "stn-table stn-table--fill", children: /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "Table", hint: tableHint }) }) }),
     lnbSide === "right" ? lnbAside : null
   ] });
-  const resolvedHeader = header === null ? void 0 : header ?? /* @__PURE__ */ jsx74(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx74(StnHeader.Left, { children: /* @__PURE__ */ jsx74(StnHeaderPageTitle, { children: title }) }) });
-  return /* @__PURE__ */ jsx74(
+  const resolvedHeader = header === null ? void 0 : header ?? /* @__PURE__ */ jsx75(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx75(StnHeader.Left, { children: /* @__PURE__ */ jsx75(StnHeaderPageTitle, { children: title }) }) });
+  return /* @__PURE__ */ jsx75(
     StnLayerShell,
     {
       gnb,
@@ -8271,25 +8645,25 @@ function DashboardPageScaffold({
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
   const isNone = widgetPosition === "none" || !showRightRegion;
-  const mapColumn = /* @__PURE__ */ jsxs51(StnDashboard.Left, { children: [
-    /* @__PURE__ */ jsx74(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
+  const mapColumn = /* @__PURE__ */ jsxs52(StnDashboard.Left, { children: [
+    /* @__PURE__ */ jsx75(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
     faultPanel
   ] });
-  const rightWidgets = right ?? /* @__PURE__ */ jsx74(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const leftWidgets = left ?? right ?? /* @__PURE__ */ jsx74(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC88C\uCE21 \uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const dashboardGrid = bodyEmpty ? /* @__PURE__ */ jsx74(StnDashboard, { empty: true, widgetPosition, "data-stn-page-scaffold": "dashboard-empty" }) : isBoth ? /* @__PURE__ */ jsxs51(StnDashboard, { widgetPosition: "both", children: [
-    /* @__PURE__ */ jsx74(StnDashboard.Right, { children: leftWidgets }),
+  const rightWidgets = right ?? /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
+  const leftWidgets = left ?? right ?? /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC88C\uCE21 \uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
+  const dashboardGrid = bodyEmpty ? /* @__PURE__ */ jsx75(StnDashboard, { empty: true, widgetPosition, "data-stn-page-scaffold": "dashboard-empty" }) : isBoth ? /* @__PURE__ */ jsxs52(StnDashboard, { widgetPosition: "both", children: [
+    /* @__PURE__ */ jsx75(StnDashboard.Right, { children: leftWidgets }),
     mapColumn,
-    /* @__PURE__ */ jsx74(StnDashboard.Right, { children: rightWidgets })
-  ] }) : isLeft ? /* @__PURE__ */ jsxs51(StnDashboard, { widgetPosition: "left", children: [
-    /* @__PURE__ */ jsx74(StnDashboard.Right, { children: leftWidgets }),
+    /* @__PURE__ */ jsx75(StnDashboard.Right, { children: rightWidgets })
+  ] }) : isLeft ? /* @__PURE__ */ jsxs52(StnDashboard, { widgetPosition: "left", children: [
+    /* @__PURE__ */ jsx75(StnDashboard.Right, { children: leftWidgets }),
     mapColumn
-  ] }) : /* @__PURE__ */ jsxs51(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
+  ] }) : /* @__PURE__ */ jsxs52(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
     mapColumn,
-    !isNone ? /* @__PURE__ */ jsx74(StnDashboard.Right, { children: rightWidgets }) : null
+    !isNone ? /* @__PURE__ */ jsx75(StnDashboard.Right, { children: rightWidgets }) : null
   ] });
   const contentNode = children ?? dashboardGrid;
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     StnLayerShell,
     {
       gnb,
@@ -8298,7 +8672,7 @@ function DashboardPageScaffold({
       layer0,
       layer2,
       ...shellProps,
-      children: /* @__PURE__ */ jsx74(
+      children: /* @__PURE__ */ jsx75(
         StnContainer,
         {
           maxWidth: false,
@@ -8312,7 +8686,7 @@ function DashboardPageScaffold({
 }
 
 // src/layouts/StnListViewLayout.tsx
-import { jsx as jsx75, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs53 } from "react/jsx-runtime";
 function StnListViewLayoutBody({
   search,
   sidebar,
@@ -8323,14 +8697,14 @@ function StnListViewLayoutBody({
   className
 }) {
   const lnbClass = lnbSide === "right" ? "stn-page-scaffold__lnb lnb_box lnb_box_right" : "stn-page-scaffold__lnb lnb_box";
-  return /* @__PURE__ */ jsxs52(StnPageScaffold, { className: cn("stn-list-view-layout__body", className), children: [
-    lnbSide === "left" && sidebar ? /* @__PURE__ */ jsx75("aside", { className: lnbClass, children: sidebar }) : null,
-    search ? /* @__PURE__ */ jsx75("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
-    /* @__PURE__ */ jsx75("div", { className: "stn-page-scaffold__content content_box", children: children ?? /* @__PURE__ */ jsxs52("div", { className: "stn-table stn-table--fill", children: [
+  return /* @__PURE__ */ jsxs53(StnPageScaffold, { className: cn("stn-list-view-layout__body", className), children: [
+    lnbSide === "left" && sidebar ? /* @__PURE__ */ jsx76("aside", { className: lnbClass, children: sidebar }) : null,
+    search ? /* @__PURE__ */ jsx76("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
+    /* @__PURE__ */ jsx76("div", { className: "stn-page-scaffold__content content_box", children: children ?? /* @__PURE__ */ jsxs53("div", { className: "stn-table stn-table--fill", children: [
       table,
       pagination
     ] }) }),
-    lnbSide === "right" && sidebar ? /* @__PURE__ */ jsx75("aside", { className: lnbClass, children: sidebar }) : null
+    lnbSide === "right" && sidebar ? /* @__PURE__ */ jsx76("aside", { className: lnbClass, children: sidebar }) : null
   ] });
 }
 function StnListViewLayoutRoot({
@@ -8349,7 +8723,7 @@ function StnListViewLayoutRoot({
 }) {
   const bare = bareProp ?? noShell ?? false;
   const hasLnbClass = lnbSide === "right" ? "has_lnb_right" : "has_lnb";
-  const body = /* @__PURE__ */ jsx75(
+  const body = /* @__PURE__ */ jsx76(
     StnListViewLayoutBody,
     {
       search,
@@ -8364,10 +8738,10 @@ function StnListViewLayoutRoot({
   if (bare) {
     return body;
   }
-  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ jsx75("div", { className: "stn-layer-1__header", children: /* @__PURE__ */ jsx75(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx75(StnHeader.Left, { children: /* @__PURE__ */ jsx75(StnHeaderPageTitle, { children: title }) }) }) });
-  return /* @__PURE__ */ jsxs52("div", { className: cn("stn-list-view-layout", "stn-layer-1", className), ...rest, children: [
+  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ jsx76("div", { className: "stn-layer-1__header", children: /* @__PURE__ */ jsx76(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx76(StnHeader.Left, { children: /* @__PURE__ */ jsx76(StnHeaderPageTitle, { children: title }) }) }) });
+  return /* @__PURE__ */ jsxs53("div", { className: cn("stn-list-view-layout", "stn-layer-1", className), ...rest, children: [
     renderedHeader,
-    /* @__PURE__ */ jsx75(
+    /* @__PURE__ */ jsx76(
       "div",
       {
         className: cn("stn-content-area", sidebar ? hasLnbClass : null, search ? "has_sch" : null),
@@ -8377,10 +8751,10 @@ function StnListViewLayoutRoot({
   ] });
 }
 function StnListViewLayoutHeader({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx75("div", { className: cn("stn-layer-1__header", className), ...rest, children });
+  return /* @__PURE__ */ jsx76("div", { className: cn("stn-layer-1__header", className), ...rest, children });
 }
 function StnListViewLayoutSearch({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx75("div", { className: cn("search_area", className), ...rest, children });
+  return /* @__PURE__ */ jsx76("div", { className: cn("search_area", className), ...rest, children });
 }
 function StnListViewLayoutSidebar({
   side = "left",
@@ -8389,16 +8763,16 @@ function StnListViewLayoutSidebar({
   ...rest
 }) {
   const lnbClass = side === "right" ? "lnb_box_right" : "lnb_box";
-  return /* @__PURE__ */ jsx75("aside", { className: cn(lnbClass, className), ...rest, children });
+  return /* @__PURE__ */ jsx76("aside", { className: cn(lnbClass, className), ...rest, children });
 }
 function StnListViewLayoutContent({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx75("div", { className: cn("content_box", className), ...rest, children });
+  return /* @__PURE__ */ jsx76("div", { className: cn("content_box", className), ...rest, children });
 }
 function StnListViewLayoutTable({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx75("div", { className: cn("stn-table", className), ...rest, children });
+  return /* @__PURE__ */ jsx76("div", { className: cn("stn-table", className), ...rest, children });
 }
 function StnListViewLayoutPagination({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx75("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
+  return /* @__PURE__ */ jsx76("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
 }
 var StnListViewLayout = Object.assign(StnListViewLayoutRoot, {
   Body: StnListViewLayoutBody,
@@ -8439,9 +8813,9 @@ import {
   STN_ALERT_CENTER_DEMO_WORK
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
 import { systemIconSrc } from "@stn-uiux/pub-ui/data/stnSystemIcons";
-import { Fragment as Fragment9, jsx as jsx76, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx77, jsxs as jsxs54 } from "react/jsx-runtime";
 function defaultTopologyHeader(_clock) {
-  return /* @__PURE__ */ jsx76(StnHeader, { variant: "widget" });
+  return /* @__PURE__ */ jsx77(StnHeader, { variant: "widget" });
 }
 function AlertCenterPageScaffold({
   gnbAlertPanel,
@@ -8460,7 +8834,7 @@ function AlertCenterPageScaffold({
 }) {
   const [gnbOpen, setGnbOpen] = useState16(defaultGnbOpen);
   const panel = useMemo5(
-    () => gnbAlertPanel ?? /* @__PURE__ */ jsx76(
+    () => gnbAlertPanel ?? /* @__PURE__ */ jsx77(
       StnAlertCenterPanel,
       {
         alerts: STN_ALERT_CENTER_DEMO_ALERTS,
@@ -8471,26 +8845,26 @@ function AlertCenterPageScaffold({
     [gnbAlertPanel]
   );
   const sideNav = useMemo5(
-    () => gnbProp ?? /* @__PURE__ */ jsxs53(Fragment9, { children: [
-      /* @__PURE__ */ jsxs53(
+    () => gnbProp ?? /* @__PURE__ */ jsxs54(Fragment9, { children: [
+      /* @__PURE__ */ jsxs54(
         StnSideNavigation,
         {
           collapsed: !gnbOpen,
           onCollapseChange: (col) => setGnbOpen(!col),
           children: [
-            /* @__PURE__ */ jsxs53(StnSideNavigation.Header, { children: [
-              /* @__PURE__ */ jsx76(StnSideNavigation.Logo, {}),
-              /* @__PURE__ */ jsx76(StnSideNavigation.Toggle, {})
+            /* @__PURE__ */ jsxs54(StnSideNavigation.Header, { children: [
+              /* @__PURE__ */ jsx77(StnSideNavigation.Logo, {}),
+              /* @__PURE__ */ jsx77(StnSideNavigation.Toggle, {})
             ] }),
-            /* @__PURE__ */ jsxs53(StnSideNavigation.Menu, { children: [
-              /* @__PURE__ */ jsx76(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/layout-grid"), label: "\uBA54\uC778 \uB300\uC2DC\uBCF4\uB4DC", active: true }),
-              /* @__PURE__ */ jsx76(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/server_2"), label: "\uC11C\uBC84 \uBAA8\uB2C8\uD130\uB9C1" }),
-              /* @__PURE__ */ jsx76(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/activity"), label: "\uB124\uD2B8\uC6CC\uD06C \uBD84\uC11D" })
+            /* @__PURE__ */ jsxs54(StnSideNavigation.Menu, { children: [
+              /* @__PURE__ */ jsx77(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/layout-grid"), label: "\uBA54\uC778 \uB300\uC2DC\uBCF4\uB4DC", active: true }),
+              /* @__PURE__ */ jsx77(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/server_2"), label: "\uC11C\uBC84 \uBAA8\uB2C8\uD130\uB9C1" }),
+              /* @__PURE__ */ jsx77(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/activity"), label: "\uB124\uD2B8\uC6CC\uD06C \uBD84\uC11D" })
             ] }),
-            /* @__PURE__ */ jsx76(StnSideNavigation.Spacer, {}),
-            /* @__PURE__ */ jsxs53(StnSideNavigation.Footer, { curved: true, children: [
-              /* @__PURE__ */ jsx76(StnSideNavigation.Watermark, {}),
-              /* @__PURE__ */ jsx76(
+            /* @__PURE__ */ jsx77(StnSideNavigation.Spacer, {}),
+            /* @__PURE__ */ jsxs54(StnSideNavigation.Footer, { curved: true, children: [
+              /* @__PURE__ */ jsx77(StnSideNavigation.Watermark, {}),
+              /* @__PURE__ */ jsx77(
                 StnSideNavigation.Item,
                 {
                   iconSrc: systemIconSrc("line/bell"),
@@ -8499,7 +8873,7 @@ function AlertCenterPageScaffold({
                   onClick: void 0
                 }
               ),
-              /* @__PURE__ */ jsx76(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/settings"), label: "\uC124\uC815" })
+              /* @__PURE__ */ jsx77(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/settings"), label: "\uC124\uC815" })
             ] })
           ]
         }
@@ -8508,8 +8882,8 @@ function AlertCenterPageScaffold({
     ] }),
     [gnbProp, gnbOpen, panel]
   );
-  const faultSlot = faultPanel ?? (showFaultPanelPlaceholder ? /* @__PURE__ */ jsx76("div", { className: "wrap_real_time stn-page-scaffold__fault-ph", children: /* @__PURE__ */ jsx76(StnPageScaffold.Region, { label: "\uC2E4\uC2DC\uAC04 \uC7A5\uC560 \uD604\uD669", hint: "StnWidget shell=fault-panel \xB7 \uC120\uD0DD" }) }) : null);
-  return /* @__PURE__ */ jsx76(
+  const faultSlot = faultPanel ?? (showFaultPanelPlaceholder ? /* @__PURE__ */ jsx77("div", { className: "wrap_real_time stn-page-scaffold__fault-ph", children: /* @__PURE__ */ jsx77(StnPageScaffold.Region, { label: "\uC2E4\uC2DC\uAC04 \uC7A5\uC560 \uD604\uD669", hint: "StnWidget shell=fault-panel \xB7 \uC120\uD0DD" }) }) : null);
+  return /* @__PURE__ */ jsx77(
     DashboardPageScaffold,
     {
       gnb: sideNav,
@@ -8517,7 +8891,7 @@ function AlertCenterPageScaffold({
       mapMessage,
       mapNote,
       faultPanel: faultSlot,
-      right: right ?? /* @__PURE__ */ jsx76(AlertCenterDashboard, {}),
+      right: right ?? /* @__PURE__ */ jsx77(AlertCenterDashboard, {}),
       wrapId,
       wrapClassName: "stn-page--map-bg",
       ...shellProps
@@ -8527,7 +8901,7 @@ function AlertCenterPageScaffold({
 
 // src/patterns/scaffold/LoginPageScaffold.tsx
 import { useState as useState17 } from "react";
-import { jsx as jsx77, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs55 } from "react/jsx-runtime";
 var LOGIN_TABS = [
   { value: "normal", label: "\uC77C\uBC18 \uB85C\uADF8\uC778" },
   { value: "social", label: "\uC18C\uC15C \uB85C\uADF8\uC778" }
@@ -8545,8 +8919,8 @@ function DefaultLoginForm({
     e.preventDefault();
     onLogin?.(userId, password);
   }
-  return /* @__PURE__ */ jsxs54(StnLoginFormStack, { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsxs55(StnLoginFormStack, { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx78(
       StnSegmented,
       {
         "aria-label": "\uB85C\uADF8\uC778 \uBC29\uC2DD",
@@ -8555,8 +8929,8 @@ function DefaultLoginForm({
         options: LOGIN_TABS
       }
     ),
-    mode === "normal" ? /* @__PURE__ */ jsxs54(StnLoginFormFields, { children: [
-      /* @__PURE__ */ jsx77(
+    mode === "normal" ? /* @__PURE__ */ jsxs55(StnLoginFormFields, { children: [
+      /* @__PURE__ */ jsx78(
         StnLoginTextField,
         {
           icon: "line/user",
@@ -8568,7 +8942,7 @@ function DefaultLoginForm({
           "aria-label": "\uC544\uC774\uB514"
         }
       ),
-      /* @__PURE__ */ jsx77(
+      /* @__PURE__ */ jsx78(
         StnLoginTextField,
         {
           icon: "line/lock",
@@ -8581,11 +8955,11 @@ function DefaultLoginForm({
           "aria-label": "\uBE44\uBC00\uBC88\uD638"
         }
       )
-    ] }) : socialContent ?? /* @__PURE__ */ jsx77(StnLoginPlaceholder, {}),
-    /* @__PURE__ */ jsx77(StnButton, { type: "submit", size: "xl", fullWidth: true, children: "\uB85C\uADF8\uC778" }),
-    /* @__PURE__ */ jsxs54(StnLoginFormLinks, { children: [
-      /* @__PURE__ */ jsx77("a", { href: signUpHref, children: "\uD68C\uC6D0\uAC00\uC785" }),
-      /* @__PURE__ */ jsx77("a", { href: recoverHref, children: "\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30" })
+    ] }) : socialContent ?? /* @__PURE__ */ jsx78(StnLoginPlaceholder, {}),
+    /* @__PURE__ */ jsx78(StnButton, { type: "submit", size: "xl", fullWidth: true, children: "\uB85C\uADF8\uC778" }),
+    /* @__PURE__ */ jsxs55(StnLoginFormLinks, { children: [
+      /* @__PURE__ */ jsx78("a", { href: signUpHref, children: "\uD68C\uC6D0\uAC00\uC785" }),
+      /* @__PURE__ */ jsx78("a", { href: recoverHref, children: "\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30" })
     ] })
   ] });
 }
@@ -8599,16 +8973,16 @@ function DefaultLoginCard({
   signUpHref,
   recoverHref
 }) {
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     StnLoginCard,
     {
       glow,
       variant,
-      brand: /* @__PURE__ */ jsxs54(StnLoginBrandStack, { children: [
-        logo ?? /* @__PURE__ */ jsx77(StnLogo, { variant: "vertical", size: "xl" }),
-        /* @__PURE__ */ jsx77("p", { className: "stn-login-card__caption", children: productCaption })
+      brand: /* @__PURE__ */ jsxs55(StnLoginBrandStack, { children: [
+        logo ?? /* @__PURE__ */ jsx78(StnLogo, { variant: "vertical", size: "xl" }),
+        /* @__PURE__ */ jsx78("p", { className: "stn-login-card__caption", children: productCaption })
       ] }),
-      children: /* @__PURE__ */ jsx77(
+      children: /* @__PURE__ */ jsx78(
         DefaultLoginForm,
         {
           onLogin,
@@ -8634,8 +9008,8 @@ function LoginPageScaffold({
   recoverHref,
   ...shellProps
 }) {
-  const resolvedLayer0 = layer0 ?? /* @__PURE__ */ jsx77(StnLayer0Background, { variant: "login" });
-  const resolvedCard = children ?? /* @__PURE__ */ jsx77(
+  const resolvedLayer0 = layer0 ?? /* @__PURE__ */ jsx78(StnLayer0Background, { variant: "login" });
+  const resolvedCard = children ?? /* @__PURE__ */ jsx78(
     DefaultLoginCard,
     {
       logo,
@@ -8648,7 +9022,7 @@ function LoginPageScaffold({
       recoverHref
     }
   );
-  return /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs55(
     "div",
     {
       className: cn("stn-wrap stn-page--login", wrapClassName),
@@ -8656,7 +9030,7 @@ function LoginPageScaffold({
       ...shellProps,
       children: [
         resolvedLayer0,
-        /* @__PURE__ */ jsx77("div", { className: "stn-login", children: resolvedCard })
+        /* @__PURE__ */ jsx78("div", { className: "stn-login", children: resolvedCard })
       ]
     }
   );
@@ -8685,7 +9059,7 @@ import {
 
 // src/patterns/toolbar/StnFloatingToolbar.tsx
 import React4 from "react";
-import { jsx as jsx78, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs56 } from "react/jsx-runtime";
 var DEFAULT_MAP_MODES = [
   { value: "sphere", label: "\uAD6C\uBA74" },
   { value: "plane", label: "\uD3C9\uBA74" },
@@ -8695,7 +9069,7 @@ var StnFloatingToolbar = React4.forwardRef(
   ({ placement = "none", orientation = "horizontal", className, children, ...restProps }, ref) => {
     const placementClass = placement !== "none" ? `stn-floating-toolbar--${placement}` : "";
     const orientationClass = orientation === "vertical" ? "stn-floating-toolbar--vertical" : "";
-    return /* @__PURE__ */ jsx78(
+    return /* @__PURE__ */ jsx79(
       "div",
       {
         ref,
@@ -8728,7 +9102,7 @@ var StnMapToolbar = React4.forwardRef(
     children,
     ...restProps
   }, ref) => {
-    return /* @__PURE__ */ jsxs55(
+    return /* @__PURE__ */ jsxs56(
       StnFloatingToolbar,
       {
         ref,
@@ -8738,7 +9112,7 @@ var StnMapToolbar = React4.forwardRef(
         "aria-label": "\uC9C0\uB3C4 \uBC0F \uD1A0\uD3F4\uB85C\uC9C0 \uB3C4\uAD6C \uBAA8\uC74C",
         ...restProps,
         children: [
-          modeOptions && modeOptions.length > 0 && /* @__PURE__ */ jsx78(
+          modeOptions && modeOptions.length > 0 && /* @__PURE__ */ jsx79(
             StnDropdown,
             {
               size: "md",
@@ -8749,75 +9123,75 @@ var StnMapToolbar = React4.forwardRef(
               "aria-label": "\uD22C\uC601 \uBAA8\uB4DC \uC120\uD0DD"
             }
           ),
-          onRestore && /* @__PURE__ */ jsx78(
+          onRestore && /* @__PURE__ */ jsx79(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs55("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx78("path", { d: "M3.06006 13C3.30547 15.1939 4.34865 17.221 5.9912 18.696C7.63374 20.1709 9.76108 20.9907 11.9686 20.9994C14.1762 21.0081 16.3099 20.2052 17.9641 18.7434C19.6183 17.2815 20.6775 15.2627 20.9403 13.0708C21.2031 10.879 20.6511 8.66696 19.3894 6.85551C18.1276 5.04406 16.2441 3.75951 14.0971 3.24618C11.95 2.73284 9.68922 3.02652 7.74457 4.07135C5.79993 5.11619 4.30712 6.83931 3.55006 8.913" }),
-                /* @__PURE__ */ jsx78("path", { d: "M3 4.00098V9.00098H8" }),
-                /* @__PURE__ */ jsx78("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" })
+              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx79("path", { d: "M3.06006 13C3.30547 15.1939 4.34865 17.221 5.9912 18.696C7.63374 20.1709 9.76108 20.9907 11.9686 20.9994C14.1762 21.0081 16.3099 20.2052 17.9641 18.7434C19.6183 17.2815 20.6775 15.2627 20.9403 13.0708C21.2031 10.879 20.6511 8.66696 19.3894 6.85551C18.1276 5.04406 16.2441 3.75951 14.0971 3.24618C11.95 2.73284 9.68922 3.02652 7.74457 4.07135C5.79993 5.11619 4.30712 6.83931 3.55006 8.913" }),
+                /* @__PURE__ */ jsx79("path", { d: "M3 4.00098V9.00098H8" }),
+                /* @__PURE__ */ jsx79("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" })
               ] }),
               "aria-label": "\uCD08\uAE30\uD654 (Restore)",
               title: "\uCD08\uAE30\uD654 (Restore)",
               onClick: onRestore
             }
           ),
-          onFullscreen && /* @__PURE__ */ jsx78(
+          onFullscreen && /* @__PURE__ */ jsx79(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs55("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx78("path", { d: "M16 4H20V8" }),
-                /* @__PURE__ */ jsx78("path", { d: "M14 10L20 4" }),
-                /* @__PURE__ */ jsx78("path", { d: "M8 20H4V16" }),
-                /* @__PURE__ */ jsx78("path", { d: "M4 20L10 14" })
+              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx79("path", { d: "M16 4H20V8" }),
+                /* @__PURE__ */ jsx79("path", { d: "M14 10L20 4" }),
+                /* @__PURE__ */ jsx79("path", { d: "M8 20H4V16" }),
+                /* @__PURE__ */ jsx79("path", { d: "M4 20L10 14" })
               ] }),
               "aria-label": "\uC804\uCCB4\uD654\uBA74",
               title: "\uC804\uCCB4\uD654\uBA74",
               onClick: onFullscreen
             }
           ),
-          onZoomIn && /* @__PURE__ */ jsx78(
+          onZoomIn && /* @__PURE__ */ jsx79(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs55("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx78("path", { d: "M12 5V19" }),
-                /* @__PURE__ */ jsx78("path", { d: "M5 12H19" })
+              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx79("path", { d: "M12 5V19" }),
+                /* @__PURE__ */ jsx79("path", { d: "M5 12H19" })
               ] }),
               "aria-label": "\uD655\uB300",
               title: "\uD655\uB300",
               onClick: onZoomIn
             }
           ),
-          onZoomOut && /* @__PURE__ */ jsx78(
+          onZoomOut && /* @__PURE__ */ jsx79(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsx78("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx78("path", { d: "M5 12H19" }) }),
+              icon: /* @__PURE__ */ jsx79("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx79("path", { d: "M5 12H19" }) }),
               "aria-label": "\uCD95\uC18C",
               title: "\uCD95\uC18C",
               onClick: onZoomOut
             }
           ),
-          onRefresh && /* @__PURE__ */ jsx78(
+          onRefresh && /* @__PURE__ */ jsx79(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs55("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx78("path", { d: "M20 11C19.7554 9.24023 18.9391 7.60967 17.6766 6.35951C16.4142 5.10934 14.7758 4.30893 13.0137 4.08156C11.2516 3.8542 9.46362 4.21249 7.9252 5.10126C6.38678 5.99002 5.18325 7.35995 4.5 9.00001M4 5.00001V9.00001H8" }),
-                /* @__PURE__ */ jsx78("path", { d: "M4 13C4.24456 14.7598 5.06093 16.3903 6.32336 17.6405C7.58579 18.8907 9.22424 19.6911 10.9863 19.9184C12.7484 20.1458 14.5364 19.7875 16.0748 18.8988C17.6132 18.01 18.8168 16.6401 19.5 15M20 19V15H16" })
+              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx79("path", { d: "M20 11C19.7554 9.24023 18.9391 7.60967 17.6766 6.35951C16.4142 5.10934 14.7758 4.30893 13.0137 4.08156C11.2516 3.8542 9.46362 4.21249 7.9252 5.10126C6.38678 5.99002 5.18325 7.35995 4.5 9.00001M4 5.00001V9.00001H8" }),
+                /* @__PURE__ */ jsx79("path", { d: "M4 13C4.24456 14.7598 5.06093 16.3903 6.32336 17.6405C7.58579 18.8907 9.22424 19.6911 10.9863 19.9184C12.7484 20.1458 14.5364 19.7875 16.0748 18.8988C17.6132 18.01 18.8168 16.6401 19.5 15M20 19V15H16" })
               ] }),
               "aria-label": "\uC0C8\uB85C\uACE0\uCE68",
               title: "\uC0C8\uB85C\uACE0\uCE68",
@@ -8853,6 +9227,7 @@ export {
   STN_ALERT_CENTER_TABS2 as STN_ALERT_CENTER_TABS,
   STN_ALERT_CENTER_TAB_IDS,
   STN_ALERT_CENTER_USAGE,
+  STN_ALERT_CENTER_USAGE_HTML,
   STN_DATE_PICKER_INTRO,
   STN_DATE_PICKER_KO_NAME,
   STN_DATE_PICKER_NAME,
@@ -8958,6 +9333,7 @@ export {
   STN_WIDGET_SHELL_ROWS,
   STN_WIDGET_USAGE,
   SideNavContext,
+  StnAlertCard,
   StnAlertCenterDocPreview,
   StnAlertCenterPanel,
   StnBadge,
@@ -8996,6 +9372,7 @@ export {
   StnHeaderToolbar,
   StnIcon,
   StnIconBox,
+  StnLabelPrefix,
   StnLayer2 as StnLayer,
   StnLayer0Background,
   StnLayerBackground,
@@ -9029,6 +9406,7 @@ export {
   StnLogo,
   StnMapCanvas,
   StnMapToolbar,
+  StnModal,
   StnPageScaffold,
   StnPageScaffoldLayer,
   StnPageScaffoldMapCanvas,
@@ -9087,6 +9465,7 @@ export {
   StnTopologyNodePreview,
   StnTopologyRing,
   StnTree,
+  StnTreeItem,
   StnTreeNode,
   StnWidget,
   StnWidgetActions,