@stn-uiux/pub-ui-react 0.1.69 → 0.1.70

package/dist/index.js

@@ -3721,17 +3721,386 @@ function StnSegmented(props) {
   );
 }
 
-// src/components/StnDropdown.tsx
+// src/components/tabs/StnTabs.tsx
 import {
-  useCallback as useCallback5,
+  forwardRef as forwardRef25,
+  useState as useState9,
+  useRef as useRef5,
   useEffect as useEffect7,
+  useCallback as useCallback5,
+  useLayoutEffect
+} from "react";
+
+// src/components/tabs/StnTabContext.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var StnTabsContext = createContext3(null);
+function useStnTabsContext() {
+  return useContext3(StnTabsContext);
+}
+function StnTabContextProvider({
+  value,
+  onChange,
+  size = "md",
+  variant = "line",
+  children
+}) {
+  return /* @__PURE__ */ jsx32(StnTabsContext.Provider, { value: { value, onChange, size, variant }, children });
+}
+
+// src/components/tabs/StnTab.tsx
+import { forwardRef as forwardRef23 } from "react";
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+var StnTab = forwardRef23(function StnTab2({
+  value,
+  label,
+  icon,
+  iconPosition = "start",
+  iconSize = "md",
+  badge,
+  count,
+  disabled = false,
+  wrapped = false,
+  className = "",
+  children,
+  onClick,
+  ...rest
+}, ref) {
+  const context = useStnTabsContext();
+  const isActive = context ? context.value === value : false;
+  const handleClick = (e) => {
+    if (disabled) return;
+    onClick?.(e);
+    if (!e.defaultPrevented && context?.onChange) {
+      context.onChange(value);
+    }
+  };
+  const content = children ?? label;
+  const isIconOnly = Boolean(icon && !content);
+  const classList = [
+    "stn-tab",
+    isActive && "is-active",
+    disabled && "is-disabled",
+    wrapped && "is-wrapped",
+    icon && `icon-${iconPosition}`,
+    isIconOnly && "icon-only",
+    className
+  ].filter(Boolean).join(" ");
+  const iconSizeClass = typeof iconSize === "string" ? `icon-${iconSize}` : void 0;
+  const iconStyle = typeof iconSize === "number" ? { width: `${iconSize}px`, height: `${iconSize}px` } : void 0;
+  const renderedIcon = icon ? /* @__PURE__ */ jsx33(
+    "span",
+    {
+      className: ["stn-tab__icon", iconSizeClass].filter(Boolean).join(" "),
+      style: iconStyle,
+      "aria-hidden": "true",
+      children: icon
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs25(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-disabled": disabled,
+      tabIndex: isActive ? 0 : -1,
+      disabled,
+      className: classList,
+      "data-value": value,
+      onClick: handleClick,
+      ...rest,
+      children: [
+        iconPosition !== "end" && iconPosition !== "bottom" && renderedIcon,
+        content && /* @__PURE__ */ jsx33("span", { className: "stn-tab__label", children: content }),
+        (iconPosition === "end" || iconPosition === "bottom") && renderedIcon,
+        count !== void 0 && /* @__PURE__ */ jsx33("span", { className: "stn-tab__badge", children: count }),
+        badge && /* @__PURE__ */ jsx33("span", { className: "stn-tab__extra", children: badge })
+      ]
+    }
+  );
+});
+
+// src/components/tabs/StnTabPanel.tsx
+import { forwardRef as forwardRef24 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var StnTabPanel = forwardRef24(function StnTabPanel2({
+  value,
+  current,
+  padding = "md",
+  keepMounted = false,
+  className = "",
+  children,
+  ...rest
+}, ref) {
+  const context = useStnTabsContext();
+  const activeValue = current !== void 0 ? current : context?.value;
+  const isSelected = activeValue !== void 0 ? activeValue === value : true;
+  if (!isSelected && !keepMounted) {
+    return null;
+  }
+  const classList = [
+    "stn-tab-panel",
+    padding && `padding-${padding}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx34(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      hidden: !isSelected,
+      tabIndex: 0,
+      className: classList,
+      ...rest,
+      children: isSelected ? children : null
+    }
+  );
+});
+
+// src/components/tabs/StnTabs.tsx
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect7;
+var StnTabsRoot = forwardRef25(function StnTabs({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  size: propSize,
+  variant: propVariant,
+  scrollButtons = "auto",
+  fullWidth = false,
+  centered = false,
+  items,
+  className = "",
+  children,
+  ...rest
+}, ref) {
+  const context = useStnTabsContext();
+  const [internalValue, setInternalValue] = useState9(() => {
+    return controlledValue ?? context?.value ?? defaultValue ?? (items && items.length > 0 ? items[0].value : "");
+  });
+  const activeValue = controlledValue ?? context?.value ?? internalValue;
+  const handleValueChange = useCallback5(
+    (newValue) => {
+      if (controlledValue === void 0 && !context?.onChange) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+      context?.onChange?.(newValue);
+    },
+    [controlledValue, context, onChange]
+  );
+  const resolvedSize = propSize ?? context?.size ?? "md";
+  const resolvedVariant = propVariant ?? context?.variant ?? "line";
+  const scrollerRef = useRef5(null);
+  const listRef = useRef5(null);
+  const [indicatorStyle, setIndicatorStyle] = useState9({ left: 0, width: 0, opacity: 0 });
+  const [canScrollStart, setCanScrollStart] = useState9(false);
+  const [canScrollEnd, setCanScrollEnd] = useState9(false);
+  const [isScrollable, setIsScrollable] = useState9(false);
+  const updateIndicator = useCallback5(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const activeTab = list.querySelector(
+      `[data-value="${CSS.escape(String(activeValue))}"]`
+    );
+    if (activeTab) {
+      const listRect = list.getBoundingClientRect();
+      const tabRect = activeTab.getBoundingClientRect();
+      setIndicatorStyle({
+        left: tabRect.left - listRect.left,
+        width: tabRect.width,
+        opacity: 1
+      });
+    } else {
+      setIndicatorStyle((prev) => ({ ...prev, opacity: 0 }));
+    }
+  }, [activeValue]);
+  const updateScrollState = useCallback5(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const { scrollLeft, scrollWidth, clientWidth } = scroller;
+    const scrollMax = scrollWidth - clientWidth;
+    const scrollable = scrollWidth > clientWidth;
+    setIsScrollable(scrollable);
+    setCanScrollStart(scrollLeft > 2);
+    setCanScrollEnd(scrollLeft < scrollMax - 2);
+  }, []);
+  const scrollActiveTabIntoView = useCallback5(() => {
+    const scroller = scrollerRef.current;
+    const list = listRef.current;
+    if (!scroller || !list) return;
+    const activeTab = list.querySelector(
+      `[data-value="${CSS.escape(String(activeValue))}"]`
+    );
+    if (activeTab) {
+      const tabLeft = activeTab.offsetLeft;
+      const tabWidth = activeTab.offsetWidth;
+      const scrollerWidth = scroller.clientWidth;
+      const scrollerScrollLeft = scroller.scrollLeft;
+      if (tabLeft < scrollerScrollLeft) {
+        scroller.scrollTo({ left: tabLeft - 32, behavior: "smooth" });
+      } else if (tabLeft + tabWidth > scrollerScrollLeft + scrollerWidth) {
+        scroller.scrollTo({
+          left: tabLeft + tabWidth - scrollerWidth + 32,
+          behavior: "smooth"
+        });
+      }
+    }
+  }, [activeValue]);
+  useIsomorphicLayoutEffect(() => {
+    updateIndicator();
+    updateScrollState();
+    scrollActiveTabIntoView();
+  }, [activeValue, updateIndicator, updateScrollState, scrollActiveTabIntoView]);
+  useEffect7(() => {
+    const handleResize = () => {
+      updateIndicator();
+      updateScrollState();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [updateIndicator, updateScrollState]);
+  const handleScrollLeft = () => {
+    if (scrollerRef.current) {
+      scrollerRef.current.scrollBy({ left: -200, behavior: "smooth" });
+    }
+  };
+  const handleScrollRight = () => {
+    if (scrollerRef.current) {
+      scrollerRef.current.scrollBy({ left: 200, behavior: "smooth" });
+    }
+  };
+  const showScrollButtons = scrollButtons === true || scrollButtons === "auto" && isScrollable;
+  const classList = [
+    "stn-tabs",
+    resolvedSize,
+    resolvedVariant,
+    fullWidth && "full",
+    centered && "centered",
+    isScrollable && "is-scrollable",
+    canScrollStart && "has-scroll-start",
+    canScrollEnd && "has-scroll-end",
+    className
+  ].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ jsxs26("div", { ref, className: classList, ...rest, children: [
+    showScrollButtons && /* @__PURE__ */ jsx35(
+      "button",
+      {
+        type: "button",
+        "aria-label": "\uC774\uC804 \uD0ED \uBCF4\uAE30",
+        disabled: !canScrollStart,
+        className: "stn-tabs__scroll-button start",
+        onClick: handleScrollLeft,
+        children: /* @__PURE__ */ jsx35(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx35("polyline", { points: "15 18 9 12 15 6" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx35(
+      "div",
+      {
+        ref: scrollerRef,
+        className: "stn-tabs__scroller",
+        onScroll: updateScrollState,
+        children: /* @__PURE__ */ jsxs26("ul", { ref: listRef, role: "tablist", className: "stn-tabs__list", children: [
+          /* @__PURE__ */ jsx35(
+            "div",
+            {
+              className: "stn-tabs__indicator",
+              style: {
+                left: `${indicatorStyle.left}px`,
+                width: `${indicatorStyle.width}px`,
+                opacity: indicatorStyle.opacity
+              }
+            }
+          ),
+          items && items.length > 0 ? items.map((item) => /* @__PURE__ */ jsx35(
+            StnTab,
+            {
+              value: item.value,
+              label: item.label,
+              icon: item.icon,
+              iconPosition: item.iconPosition,
+              iconSize: item.iconSize,
+              badge: item.badge,
+              count: item.count,
+              disabled: item.disabled,
+              wrapped: item.wrapped
+            },
+            item.value
+          )) : children
+        ] })
+      }
+    ),
+    showScrollButtons && /* @__PURE__ */ jsx35(
+      "button",
+      {
+        type: "button",
+        "aria-label": "\uB2E4\uC74C \uD0ED \uBCF4\uAE30",
+        disabled: !canScrollEnd,
+        className: "stn-tabs__scroll-button end",
+        onClick: handleScrollRight,
+        children: /* @__PURE__ */ jsx35(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx35("polyline", { points: "9 18 15 12 9 6" })
+          }
+        )
+      }
+    )
+  ] });
+  if (!context) {
+    return /* @__PURE__ */ jsx35(
+      StnTabContextProvider,
+      {
+        value: activeValue,
+        onChange: handleValueChange,
+        size: resolvedSize,
+        variant: resolvedVariant,
+        children: content
+      }
+    );
+  }
+  return content;
+});
+var StnTabs2 = Object.assign(StnTabsRoot, {
+  Tab: StnTab,
+  Panel: StnTabPanel,
+  Context: StnTabContextProvider
+});
+
+// src/components/StnDropdown.tsx
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect8,
   useId as useId9,
-  useRef as useRef5,
-  useState as useState9
+  useRef as useRef6,
+  useState as useState10
 } from "react";
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 function resolveGlyph(node) {
-  if (typeof node === "string") return /* @__PURE__ */ jsx32(StnIcon, { name: node, size: 16, color: "currentColor" });
+  if (typeof node === "string") return /* @__PURE__ */ jsx36(StnIcon, { name: node, size: 16, color: "currentColor" });
   return node;
 }
 function modifierClass(modifier) {
@@ -3759,9 +4128,9 @@ function variantClass(variant = "outline") {
   return "outline";
 }
 function useControllable(controlled, defaultValue, onChange) {
-  const [internal, setInternal] = useState9(defaultValue);
+  const [internal, setInternal] = useState10(defaultValue);
   const value = controlled ?? internal;
-  const setValue = useCallback5(
+  const setValue = useCallback6(
     (next) => {
       if (controlled === void 0) setInternal(next);
       onChange?.(next);
@@ -3801,8 +4170,8 @@ function StnDropdown({
   const autoId = useId9();
   const rootId = idProp ?? `stn-dropdown-${autoId.replace(/:/g, "")}`;
   const [value, setValue] = useControllable(valueProp, defaultValue, onChange);
-  const [open, setOpen] = useState9(false);
-  const rootRef = useRef5(null);
+  const [open, setOpen] = useState10(false);
+  const rootRef = useRef6(null);
   const selected = options.find((o) => o.value === value);
   const hasValue = selected !== void 0 && value !== "";
   const displayLabel = hasValue ? selected.label : placeholder ?? (options[0]?.label ?? "");
@@ -3828,10 +4197,10 @@ function StnDropdown({
     open && "on",
     shouldApplyWidthToDropdown && className
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (disabled || readOnly) setOpen(false);
   }, [disabled, readOnly]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
@@ -3873,7 +4242,7 @@ function StnDropdown({
       setValue(enabledOptions[nextIndex].value);
     }
   };
-  const dropdownNode = /* @__PURE__ */ jsxs25(
+  const dropdownNode = /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: rootRef,
@@ -3885,7 +4254,7 @@ function StnDropdown({
       "aria-invalid": error || void 0,
       ...!hasHelper ? divRest : {},
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx36(
           "div",
           {
             className: cn("selected", !hasValue && placeholder && "is-placeholder"),
@@ -3902,7 +4271,7 @@ function StnDropdown({
             children: displayLabel
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx36(
           "ul",
           {
             className: cn("select_option", "stn-scroll", "vertical", "thin"),
@@ -3910,7 +4279,7 @@ function StnDropdown({
             "aria-label": ariaLabel,
             children: options.map((opt) => {
               const isSelected = opt.value === value;
-              return /* @__PURE__ */ jsxs25(
+              return /* @__PURE__ */ jsxs27(
                 "li",
                 {
                   role: "option",
@@ -3925,15 +4294,15 @@ function StnDropdown({
                     if (e.key === "Enter" && !opt.disabled) pick(opt.value);
                   },
                   children: [
-                    /* @__PURE__ */ jsx32(
+                    /* @__PURE__ */ jsx36(
                       "span",
                       {
                         className: cn("stn-dropdown__check", isSelected && "is-checked"),
                         "aria-hidden": "true",
-                        children: isSelected ? /* @__PURE__ */ jsx32(StnIcon, { name: "line/check", size: 14, color: "currentColor" }) : null
+                        children: isSelected ? /* @__PURE__ */ jsx36(StnIcon, { name: "line/check", size: 14, color: "currentColor" }) : null
                       }
                     ),
-                    /* @__PURE__ */ jsx32("span", { className: "stn-dropdown__item-label", children: opt.label })
+                    /* @__PURE__ */ jsx36("span", { className: "stn-dropdown__item-label", children: opt.label })
                   ]
                 },
                 opt.value
@@ -3948,13 +4317,13 @@ function StnDropdown({
   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__ */ jsx32("span", { className: "stn-dropdown__label-icon", "aria-hidden": "true", children: resolveGlyph(resolvedLabelIcon) }) : null,
-    /* @__PURE__ */ jsx32("span", { className: "stn-dropdown__label-text", children: label }),
-    required && /* @__PURE__ */ jsx32("span", { className: "stn-dropdown__required", "aria-hidden": "true", children: "*" })
+  const labelElement = hasLabel ? /* @__PURE__ */ jsxs27("label", { htmlFor: rootId, className: "stn-dropdown__label", children: [
+    resolvedLabelIcon ? /* @__PURE__ */ jsx36("span", { className: "stn-dropdown__label-icon", "aria-hidden": "true", children: resolveGlyph(resolvedLabelIcon) }) : null,
+    /* @__PURE__ */ jsx36("span", { className: "stn-dropdown__label-text", children: label }),
+    required && /* @__PURE__ */ jsx36("span", { className: "stn-dropdown__required", "aria-hidden": "true", children: "*" })
   ] }) : null;
   const isRow = labelPosition === "left" || labelPosition === "right";
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       className: cn(
@@ -3972,9 +4341,9 @@ function StnDropdown({
       ...divRest,
       children: [
         hasLabel && (labelPosition === "left" || labelPosition === "top") ? labelElement : null,
-        /* @__PURE__ */ jsxs25("div", { className: "stn-dropdown-wrap__body", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "stn-dropdown-wrap__body", children: [
           dropdownNode,
-          hasHelper && /* @__PURE__ */ jsx32(
+          hasHelper && /* @__PURE__ */ jsx36(
             "span",
             {
               id: helperId,
@@ -3990,12 +4359,12 @@ function StnDropdown({
 }
 
 // src/components/StnDropdownMenu.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function StnDropdownMenu({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx37(
     StnDropdown,
     {
       size: "xl",
@@ -4006,8 +4375,8 @@ function StnDropdownMenu({
 }
 
 // src/components/StnTextField.tsx
-import { forwardRef as forwardRef23, useId as useId10 } from "react";
-import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+import { forwardRef as forwardRef26, useId as useId10 } from "react";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 function normalizeSize(size) {
   if (!size) return "M";
   const u = String(size).toUpperCase();
@@ -4034,10 +4403,10 @@ function colorClass(color) {
   return color;
 }
 function resolveGlyph2(node) {
-  if (typeof node === "string") return /* @__PURE__ */ jsx34(StnIcon, { name: node, size: 16, color: "currentColor" });
+  if (typeof node === "string") return /* @__PURE__ */ jsx38(StnIcon, { name: node, size: 16, color: "currentColor" });
   return node;
 }
-var StnTextField = forwardRef23(function StnTextField2({
+var StnTextField = forwardRef26(function StnTextField2({
   size = "M",
   variant = "outlined",
   color,
@@ -4083,7 +4452,7 @@ var StnTextField = forwardRef23(function StnTextField2({
     hasSlot && "with-icon",
     className
   );
-  const input = /* @__PURE__ */ jsx34(
+  const input = /* @__PURE__ */ jsx38(
     "input",
     {
       ref,
@@ -4098,19 +4467,19 @@ var StnTextField = forwardRef23(function StnTextField2({
       ...rest
     }
   );
-  const field = hasSlot ? /* @__PURE__ */ jsxs26("div", { className: fieldClass, style: hasWrap ? void 0 : widthProps.style, children: [
-    hasLeft ? /* @__PURE__ */ jsx34("span", { className: "stn-text-field__icon-left", "aria-hidden": true, children: /* @__PURE__ */ jsx34("span", { className: "stn-text-field__icon-box", children: resolveGlyph2(leftNode) }) }) : null,
+  const field = hasSlot ? /* @__PURE__ */ jsxs28("div", { className: fieldClass, style: hasWrap ? void 0 : widthProps.style, children: [
+    hasLeft ? /* @__PURE__ */ jsx38("span", { className: "stn-text-field__icon-left", "aria-hidden": true, children: /* @__PURE__ */ jsx38("span", { className: "stn-text-field__icon-box", children: resolveGlyph2(leftNode) }) }) : null,
     input,
-    hasRight ? /* @__PURE__ */ jsx34("span", { className: "stn-text-field__icon-right", "aria-hidden": true, children: /* @__PURE__ */ jsx34("span", { className: "stn-text-field__icon-box", children: resolveGlyph2(rightNode) }) }) : null
+    hasRight ? /* @__PURE__ */ jsx38("span", { className: "stn-text-field__icon-right", "aria-hidden": true, children: /* @__PURE__ */ jsx38("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__ */ jsx34("span", { className: "stn-text-field__label-icon", "aria-hidden": "true", children: resolveGlyph2(labelIcon) }) : null,
-    /* @__PURE__ */ jsx34("span", { className: "stn-text-field__label-text", children: label }),
-    required && /* @__PURE__ */ jsx34("span", { className: "stn-text-field__required", "aria-hidden": "true", children: "*" })
+  const labelElement = hasLabel ? /* @__PURE__ */ jsxs28("label", { htmlFor: id, className: "stn-text-field__label", children: [
+    labelIcon ? /* @__PURE__ */ jsx38("span", { className: "stn-text-field__label-icon", "aria-hidden": "true", children: resolveGlyph2(labelIcon) }) : null,
+    /* @__PURE__ */ jsx38("span", { className: "stn-text-field__label-text", children: label }),
+    required && /* @__PURE__ */ jsx38("span", { className: "stn-text-field__required", "aria-hidden": "true", children: "*" })
   ] }) : null;
   const isRow = labelPosition === "left" || labelPosition === "right";
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: cn(
@@ -4124,9 +4493,9 @@ var StnTextField = forwardRef23(function StnTextField2({
       style: widthProps.style,
       children: [
         hasLabel && (labelPosition === "left" || labelPosition === "top") ? labelElement : null,
-        /* @__PURE__ */ jsxs26("div", { className: "stn-text-field-wrap__body", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "stn-text-field-wrap__body", children: [
           field,
-          hasHelper && /* @__PURE__ */ jsx34(
+          hasHelper && /* @__PURE__ */ jsx38(
             "p",
             {
               id: helperId,
@@ -4143,11 +4512,11 @@ var StnTextField = forwardRef23(function StnTextField2({
 
 // src/components/StnTextArea.tsx
 import {
-  forwardRef as forwardRef24,
+  forwardRef as forwardRef27,
   useId as useId11,
-  useState as useState10
+  useState as useState11
 } from "react";
-import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function normalizeSize2(size) {
   return size ?? "md";
 }
@@ -4168,10 +4537,10 @@ function resizeClass(resize) {
   return "resize-vertical";
 }
 function resolveGlyph3(node) {
-  if (typeof node === "string") return /* @__PURE__ */ jsx35(StnIcon, { name: node, size: 16, color: "currentColor" });
+  if (typeof node === "string") return /* @__PURE__ */ jsx39(StnIcon, { name: node, size: 16, color: "currentColor" });
   return node;
 }
-var StnTextArea = forwardRef24(function StnTextArea2({
+var StnTextArea = forwardRef27(function StnTextArea2({
   size = "md",
   variant = "outlined",
   color,
@@ -4200,7 +4569,7 @@ var StnTextArea = forwardRef24(function StnTextArea2({
   const autoId = useId11();
   const id = idProp ?? autoId;
   const isControlled = value !== void 0;
-  const [uncontrolledLength, setUncontrolledLength] = useState10(() => {
+  const [uncontrolledLength, setUncontrolledLength] = useState11(() => {
     if (defaultValue != null) return String(defaultValue).length;
     return 0;
   });
@@ -4228,7 +4597,7 @@ var StnTextArea = forwardRef24(function StnTextArea2({
     invalid && "invalid",
     className
   );
-  const textareaElement = /* @__PURE__ */ jsx35(
+  const textareaElement = /* @__PURE__ */ jsx39(
     "textarea",
     {
       ref,
@@ -4250,13 +4619,13 @@ var StnTextArea = forwardRef24(function StnTextArea2({
   if (!hasWrap) {
     return textareaElement;
   }
-  const labelElement = hasLabel ? /* @__PURE__ */ jsxs27("label", { htmlFor: id, className: "stn-text-area__label", children: [
-    labelIcon ? /* @__PURE__ */ jsx35("span", { className: "stn-text-area__label-icon", "aria-hidden": "true", children: resolveGlyph3(labelIcon) }) : null,
-    /* @__PURE__ */ jsx35("span", { className: "stn-text-area__label-text", children: label }),
-    required && /* @__PURE__ */ jsx35("span", { className: "stn-text-area__required", "aria-hidden": "true", children: "*" })
+  const labelElement = hasLabel ? /* @__PURE__ */ jsxs29("label", { htmlFor: id, className: "stn-text-area__label", children: [
+    labelIcon ? /* @__PURE__ */ jsx39("span", { className: "stn-text-area__label-icon", "aria-hidden": "true", children: resolveGlyph3(labelIcon) }) : null,
+    /* @__PURE__ */ jsx39("span", { className: "stn-text-area__label-text", children: label }),
+    required && /* @__PURE__ */ jsx39("span", { className: "stn-text-area__required", "aria-hidden": "true", children: "*" })
   ] }) : null;
   const isRow = labelPosition === "left" || labelPosition === "right";
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: cn(
@@ -4270,18 +4639,18 @@ var StnTextArea = forwardRef24(function StnTextArea2({
       style: widthProps.style,
       children: [
         hasLabel && (labelPosition === "left" || labelPosition === "top") ? labelElement : null,
-        /* @__PURE__ */ jsxs27("div", { className: "stn-text-area-wrap__body", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "stn-text-area-wrap__body", children: [
           textareaElement,
-          hasFooter && /* @__PURE__ */ jsxs27("div", { className: "stn-text-area__footer", children: [
-            hasHelper ? /* @__PURE__ */ jsx35(
+          hasFooter && /* @__PURE__ */ jsxs29("div", { className: "stn-text-area__footer", children: [
+            hasHelper ? /* @__PURE__ */ jsx39(
               "p",
               {
                 id: helperId,
                 className: cn("stn-text-area__helper", invalid && "stn-text-area__helper--error"),
                 children: helperText
               }
-            ) : /* @__PURE__ */ jsx35("span", {}),
-            showCount && /* @__PURE__ */ jsxs27("span", { className: "stn-text-area__count", children: [
+            ) : /* @__PURE__ */ jsx39("span", {}),
+            showCount && /* @__PURE__ */ jsxs29("span", { className: "stn-text-area__count", children: [
               currentLength,
               maxLength != null ? ` / ${maxLength}` : ""
             ] })
@@ -4295,13 +4664,13 @@ var StnTextArea = forwardRef24(function StnTextArea2({
 StnTextArea.displayName = "StnTextArea";
 
 // src/components/StnDateRangeField.tsx
-import { forwardRef as forwardRef25, useId as useId12 } from "react";
+import { forwardRef as forwardRef28, useId as useId12 } from "react";
 import {
   formatStnDateRangeFieldValue
 } from "@stn-uiux/pub-ui/data/stnDateRangeField";
-import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 function resolveGlyph4(node) {
-  if (typeof node === "string") return /* @__PURE__ */ jsx36(StnIcon, { name: node, size: 16, color: "currentColor" });
+  if (typeof node === "string") return /* @__PURE__ */ jsx40(StnIcon, { name: node, size: 16, color: "currentColor" });
   return node;
 }
 function normalizeSize3(size) {
@@ -4325,7 +4694,7 @@ function resolveValue(value, format) {
   const trimmed = value.trim();
   return trimmed || null;
 }
-var StnDateRangeField = forwardRef25(function StnDateRangeField2({
+var StnDateRangeField = forwardRef28(function StnDateRangeField2({
   size = "md",
   variant = "outline",
   start,
@@ -4359,7 +4728,7 @@ var StnDateRangeField = forwardRef25(function StnDateRangeField2({
   const hasLabel = label != null && label !== "";
   const hasHelper = helperText != null && helperText !== "";
   const hasWrap = hasLabel || hasHelper;
-  const buttonNode = /* @__PURE__ */ jsx36(
+  const buttonNode = /* @__PURE__ */ jsx40(
     "button",
     {
       ref,
@@ -4379,25 +4748,25 @@ var StnDateRangeField = forwardRef25(function StnDateRangeField2({
       ),
       style: !hasWrap ? widthProps.style ?? style : void 0,
       ...rest,
-      children: /* @__PURE__ */ jsxs28("span", { className: "stn-date-range-field__inner", children: [
-        /* @__PURE__ */ jsxs28("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 })
+      children: /* @__PURE__ */ jsxs30("span", { className: "stn-date-range-field__inner", children: [
+        /* @__PURE__ */ jsxs30("span", { className: "stn-date-range-field__text", children: [
+          /* @__PURE__ */ jsx40("span", { className: cn("stn-date-range-field__value", !startText && "is-placeholder"), children: startText ?? startPlaceholder }),
+          /* @__PURE__ */ jsx40("span", { className: "stn-date-range-field__sep", "aria-hidden": "true", children: "~" }),
+          /* @__PURE__ */ jsx40("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" })
+        /* @__PURE__ */ jsx40("span", { className: "stn-date-range-field__icon", "aria-hidden": "true" })
       ] })
     }
   );
   if (!hasWrap) return buttonNode;
   const resolvedLabelIcon = labelIcon ?? icon;
-  const labelElement = hasLabel ? /* @__PURE__ */ jsxs28("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: resolveGlyph4(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: "*" })
+  const labelElement = hasLabel ? /* @__PURE__ */ jsxs30("label", { htmlFor: rootId, className: "stn-date-range-field__label", children: [
+    resolvedLabelIcon ? /* @__PURE__ */ jsx40("span", { className: "stn-date-range-field__label-icon", "aria-hidden": "true", children: resolveGlyph4(resolvedLabelIcon) }) : null,
+    /* @__PURE__ */ jsx40("span", { className: "stn-date-range-field__label-text", children: label }),
+    required && /* @__PURE__ */ jsx40("span", { className: "stn-date-range-field__required", "aria-hidden": "true", children: "*" })
   ] }) : null;
   const isRow = labelPosition === "left" || labelPosition === "right";
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cn(
@@ -4413,9 +4782,9 @@ var StnDateRangeField = forwardRef25(function StnDateRangeField2({
       style: widthProps.style ?? style,
       children: [
         hasLabel && (labelPosition === "left" || labelPosition === "top") ? labelElement : null,
-        /* @__PURE__ */ jsxs28("div", { className: "stn-date-range-field-wrap__body", children: [
+        /* @__PURE__ */ jsxs30("div", { className: "stn-date-range-field-wrap__body", children: [
           buttonNode,
-          hasHelper && /* @__PURE__ */ jsx36(
+          hasHelper && /* @__PURE__ */ jsx40(
             "span",
             {
               id: `${rootId}-helper`,
@@ -4436,11 +4805,11 @@ var StnDateRangeField = forwardRef25(function StnDateRangeField2({
 // src/components/StnLabelPrefix.tsx
 import {
   useId as useId13,
-  useState as useState11,
+  useState as useState12,
   isValidElement as isValidElement4,
   cloneElement as cloneElement4
 } from "react";
-import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 function sizeClass4(size) {
   return size;
 }
@@ -4480,7 +4849,7 @@ function StnLabelPrefix({
   const isError = error || invalid || color === "error";
   const hasHelper = helperText != null && helperText !== "";
   const helperId = hasHelper ? `${id}-helper` : void 0;
-  const [internalChecked, setInternalChecked] = useState11(defaultChecked ?? false);
+  const [internalChecked, setInternalChecked] = useState12(defaultChecked ?? false);
   const isChecked = checked !== void 0 ? checked : internalChecked;
   const handleCheckboxChange = (nextChecked) => {
     if (checked === void 0) {
@@ -4505,7 +4874,7 @@ function StnLabelPrefix({
   );
   const defaultCheckboxSize = size === "lg" ? "md" : "sm";
   const resolvedCheckboxSize = checkboxSize ?? defaultCheckboxSize;
-  const checkboxNode = checkboxSlot ?? (checkbox ? /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__checkbox", children: /* @__PURE__ */ jsx37(
+  const checkboxNode = checkboxSlot ?? (checkbox ? /* @__PURE__ */ jsx41("span", { className: "stn-label-prefix__checkbox", children: /* @__PURE__ */ jsx41(
     StnCheckbox,
     {
       size: resolvedCheckboxSize,
@@ -4516,14 +4885,14 @@ function StnLabelPrefix({
       "aria-label": typeof label === "string" ? `${label} \uC120\uD0DD` : void 0
     }
   ) }) : null);
-  const labelSection = /* @__PURE__ */ jsxs29("span", { className: "stn-label-prefix__label", children: [
+  const labelSection = /* @__PURE__ */ jsxs31("span", { className: "stn-label-prefix__label", children: [
     checkboxNode,
-    labelIcon != null && /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__icon", "aria-hidden": "true", children: labelIcon }),
-    /* @__PURE__ */ jsxs29("span", { className: "stn-label-prefix__text", children: [
+    labelIcon != null && /* @__PURE__ */ jsx41("span", { className: "stn-label-prefix__icon", "aria-hidden": "true", children: labelIcon }),
+    /* @__PURE__ */ jsxs31("span", { className: "stn-label-prefix__text", children: [
       label,
-      required && /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__required", "aria-hidden": "true", children: "*" })
+      required && /* @__PURE__ */ jsx41("span", { className: "stn-label-prefix__required", "aria-hidden": "true", children: "*" })
     ] }),
-    /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__divider", "aria-hidden": "true" })
+    /* @__PURE__ */ jsx41("span", { className: "stn-label-prefix__divider", "aria-hidden": "true" })
   ] });
   let renderedControl = children;
   if (isControlDisabled && isValidElement4(children) && typeof children.type !== "string") {
@@ -4531,7 +4900,7 @@ function StnLabelPrefix({
       disabled: true
     });
   }
-  const prefixNode = /* @__PURE__ */ jsxs29(
+  const prefixNode = /* @__PURE__ */ jsxs31(
     "div",
     {
       id: !hasHelper ? id : void 0,
@@ -4543,14 +4912,14 @@ function StnLabelPrefix({
       ...!hasHelper ? rest : {},
       children: [
         labelSection,
-        /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__control", children: renderedControl })
+        /* @__PURE__ */ jsx41("span", { className: "stn-label-prefix__control", children: renderedControl })
       ]
     }
   );
   if (!hasHelper) {
     return prefixNode;
   }
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       id,
@@ -4564,7 +4933,7 @@ function StnLabelPrefix({
       ...rest,
       children: [
         prefixNode,
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx41(
           "p",
           {
             id: helperId,
@@ -4630,14 +4999,14 @@ import {
 } from "@stn-uiux/pub-ui/data/stnSearchRequirement";
 
 // src/patterns/search/StnSearchRequirementBar.tsx
-import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 function StnSearchRequirementBar({
   children,
   className,
   density = "default",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       className: cn(
@@ -4653,7 +5022,7 @@ function StnSearchRequirementBar({
   );
 }
 function StnSearchRequirementBarFields({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx38("div", { className: cn("stn-search-requirement__fields", className), "data-stn-search-requirement": "fields", ...rest, children });
+  return /* @__PURE__ */ jsx42("div", { className: cn("stn-search-requirement__fields", className), "data-stn-search-requirement": "fields", ...rest, children });
 }
 function StnSearchRequirementBarField({
   label,
@@ -4663,20 +5032,20 @@ function StnSearchRequirementBarField({
   controlClassName,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs30("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 })
+  return /* @__PURE__ */ jsxs32("div", { className: cn("stn-search-requirement__field", className), "data-stn-search-requirement": "field", ...rest, children: [
+    /* @__PURE__ */ jsx42("span", { className: cn("stn-search-requirement__label", labelClassName), children: label }),
+    /* @__PURE__ */ jsx42("div", { className: cn("stn-search-requirement__control", controlClassName), children })
   ] });
 }
 function StnSearchRequirementBarSearchButton({
   children = "\uAC80\uC0C9",
   size = "md",
   variant = "outlined",
-  icon = /* @__PURE__ */ jsx38(StnIcon, { name: "line/search", size: 16, color: "currentColor" }),
+  icon = /* @__PURE__ */ jsx42(StnIcon, { name: "line/search", size: 16, color: "currentColor" }),
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx42(
     StnButton,
     {
       size,
@@ -4698,10 +5067,10 @@ function StnSearchRequirementBarExport({
   "aria-label": ariaLabel = "Excel\uBCF4\uB0B4\uAE30",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx42(
     StnButton,
     {
-      icon: icon ?? /* @__PURE__ */ jsx38(StnIcon, { name, size: 24, color: "currentColor" }),
+      icon: icon ?? /* @__PURE__ */ jsx42(StnIcon, { name, size: 24, color: "currentColor" }),
       variant,
       size,
       "aria-label": ariaLabel,
@@ -4712,7 +5081,7 @@ function StnSearchRequirementBarExport({
   );
 }
 function StnSearchRequirementBarDivider({ className, ...rest }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx42(
     "span",
     {
       className: cn("stn-search-requirement__divider", className),
@@ -4734,17 +5103,17 @@ import { STN_SEARCH_REQUIREMENT_DEMO_FIELDS } from "@stn-uiux/pub-ui/data/stnSea
 
 // src/components/datePicker/StnDateRangePickerField.tsx
 import {
-  useCallback as useCallback7,
-  useEffect as useEffect9,
-  useLayoutEffect,
-  useRef as useRef6,
-  useState as useState13
+  useCallback as useCallback8,
+  useEffect as useEffect10,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef7,
+  useState as useState14
 } from "react";
 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 useId14, useMemo as useMemo3, useState as useState12 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect9, useId as useId14, useMemo as useMemo3, useState as useState13 } from "react";
 import {
   STN_DATE_PICKER_WEEKDAYS
 } from "@stn-uiux/pub-ui/data/stnDatePicker";
@@ -4804,10 +5173,10 @@ function normalizeRange(start, end) {
 }
 
 // src/components/datePicker/StnDateRangePicker.tsx
-import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 function useDraftRange(value, open) {
-  const [draft, setDraft] = useState12(value);
-  useEffect8(() => {
+  const [draft, setDraft] = useState13(value);
+  useEffect9(() => {
     if (open) setDraft(value);
   }, [open, value]);
   return [draft, setDraft];
@@ -4815,19 +5184,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__ */ jsxs31("div", { className: "stn-date-picker-panel", children: [
-    /* @__PURE__ */ jsxs31("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" })
+  return /* @__PURE__ */ jsxs33("div", { className: "stn-date-picker-panel", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "stn-date-picker-panel__header", children: [
+      showPrev ? /* @__PURE__ */ jsx43("button", { type: "button", className: "stn-date-picker-panel__nav", onClick: onPrev, "aria-label": "Previous month", children: "\u2039" }) : /* @__PURE__ */ jsx43("span", { className: "stn-date-picker-panel__nav", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx43("p", { className: "stn-date-picker-panel__title", children: formatMonthTitle(month) }),
+      showNext ? /* @__PURE__ */ jsx43("button", { type: "button", className: "stn-date-picker-panel__nav", onClick: onNext, "aria-label": "Next month", children: "\u203A" }) : /* @__PURE__ */ jsx43("span", { className: "stn-date-picker-panel__nav", "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ jsxs31("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) => {
+    /* @__PURE__ */ jsxs33("table", { className: "stn-date-picker-content", children: [
+      /* @__PURE__ */ jsx43("thead", { children: /* @__PURE__ */ jsx43("tr", { children: STN_DATE_PICKER_WEEKDAYS.map((label) => /* @__PURE__ */ jsx43("th", { scope: "col", children: label }, label)) }) }),
+      /* @__PURE__ */ jsx43("tbody", { children: Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx43("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__ */ jsx39(
+        return /* @__PURE__ */ jsx43(
           "td",
           {
             className: cn(
@@ -4837,7 +5206,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__ */ jsx39(
+            children: /* @__PURE__ */ jsx43(
               "button",
               {
                 type: "button",
@@ -4859,16 +5228,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__ */ jsxs31("div", { className: "stn-date-picker-time__side", children: [
-    /* @__PURE__ */ jsx39("span", { className: "stn-date-picker-time__label", children: label }),
-    /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-time__columns", children: [
-      /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs33("div", { className: "stn-date-picker-time__side", children: [
+    /* @__PURE__ */ jsx43("span", { className: "stn-date-picker-time__label", children: label }),
+    /* @__PURE__ */ jsxs33("div", { className: "stn-date-picker-time__columns", children: [
+      /* @__PURE__ */ jsx43(
         StnScroll,
         {
           variant: "arrows",
           size: "thin",
           className: "stn-date-picker-time__scroll",
-          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(
+          children: /* @__PURE__ */ jsx43("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} hour`, children: Array.from({ length: 24 }, (_, h) => /* @__PURE__ */ jsx43("li", { children: /* @__PURE__ */ jsx43(
             "button",
             {
               type: "button",
@@ -4879,13 +5248,13 @@ function TimeColumns({ label, value, onChange }) {
           ) }, h)) })
         }
       ),
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx43(
         StnScroll,
         {
           variant: "arrows",
           size: "thin",
           className: "stn-date-picker-time__scroll",
-          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(
+          children: /* @__PURE__ */ jsx43("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} minute`, children: Array.from({ length: 60 }, (_, m) => /* @__PURE__ */ jsx43("li", { children: /* @__PURE__ */ jsx43(
             "button",
             {
               type: "button",
@@ -4896,13 +5265,13 @@ function TimeColumns({ label, value, onChange }) {
           ) }, m)) })
         }
       ),
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx43(
         StnScroll,
         {
           variant: "arrows",
           size: "thin",
           className: "stn-date-picker-time__scroll",
-          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(
+          children: /* @__PURE__ */ jsx43("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} second`, children: Array.from({ length: 60 }, (_, s) => /* @__PURE__ */ jsx43("li", { children: /* @__PURE__ */ jsx43(
             "button",
             {
               type: "button",
@@ -4929,21 +5298,21 @@ function StnDateRangePicker({
 }) {
   const titleId = useId14();
   const [draft, setDraft] = useDraftRange(value, open);
-  const [leftMonth, setLeftMonth] = useState12(() => startOfMonth(draft.start ?? draft.end ?? /* @__PURE__ */ new Date()));
-  useEffect8(() => {
+  const [leftMonth, setLeftMonth] = useState13(() => startOfMonth(draft.start ?? draft.end ?? /* @__PURE__ */ new Date()));
+  useEffect9(() => {
     if (!open) return;
     const anchor = draft.start ?? draft.end ?? /* @__PURE__ */ new Date();
     setLeftMonth(startOfMonth(anchor));
   }, [open, draft.start, draft.end]);
   const rightMonth = useMemo3(() => addMonths(leftMonth, 1), [leftMonth]);
-  const updateDraft = useCallback6(
+  const updateDraft = useCallback7(
     (next) => {
       setDraft(next);
       onChange?.(next);
     },
     [onChange]
   );
-  const pickDay = useCallback6(
+  const pickDay = useCallback7(
     (day) => {
       const nextStart = cloneDate(day);
       if (!showTime) {
@@ -4981,7 +5350,7 @@ function StnDateRangePicker({
     left: anchorRect.left,
     ...style
   } : style ?? {};
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       className: cn("stn-date-picker-dropdown", className),
@@ -4989,10 +5358,10 @@ function StnDateRangePicker({
       role: "dialog",
       "aria-modal": "false",
       "aria-labelledby": titleId,
-      children: /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-dropdown__body", children: [
-        /* @__PURE__ */ jsx39("span", { id: titleId, className: "stn-sf__visually-hidden", children: "Date range picker" }),
-        /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-dropdown__panels", children: [
-          /* @__PURE__ */ jsx39(
+      children: /* @__PURE__ */ jsxs33("div", { className: "stn-date-picker-dropdown__body", children: [
+        /* @__PURE__ */ jsx43("span", { id: titleId, className: "stn-sf__visually-hidden", children: "Date range picker" }),
+        /* @__PURE__ */ jsxs33("div", { className: "stn-date-picker-dropdown__panels", children: [
+          /* @__PURE__ */ jsx43(
             CalendarPanel,
             {
               month: leftMonth,
@@ -5003,7 +5372,7 @@ function StnDateRangePicker({
               showNext: false
             }
           ),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx43(
             CalendarPanel,
             {
               month: rightMonth,
@@ -5015,8 +5384,8 @@ function StnDateRangePicker({
             }
           )
         ] }),
-        showTime ? /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-time", children: [
-          /* @__PURE__ */ jsx39(
+        showTime ? /* @__PURE__ */ jsxs33("div", { className: "stn-date-picker-time", children: [
+          /* @__PURE__ */ jsx43(
             TimeColumns,
             {
               label: "\uC2DC\uC791",
@@ -5024,7 +5393,7 @@ function StnDateRangePicker({
               onChange: (start) => updateDraft({ ...draft, start })
             }
           ),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx43(
             TimeColumns,
             {
               label: "\uC885\uB8CC",
@@ -5033,18 +5402,18 @@ function StnDateRangePicker({
             }
           )
         ] }) : null,
-        /* @__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" }) })
+        /* @__PURE__ */ jsx43("div", { className: "stn-date-picker-footer", children: /* @__PURE__ */ jsx43(StnButton, { size: "md", variant: "contained", onClick: handleApply, disabled: !draft.start || !draft.end, children: "\uD655\uC778" }) })
       ] })
     }
   );
 }
 
 // src/components/datePicker/StnDateRangePickerField.tsx
-import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 function useControllableRange(controlled, defaultValue, onChange) {
-  const [internal, setInternal] = useState13(defaultValue);
+  const [internal, setInternal] = useState14(defaultValue);
   const value = controlled ?? internal;
-  const setValue = useCallback7(
+  const setValue = useCallback8(
     (next) => {
       if (controlled === void 0) setInternal(next);
       onChange?.(next);
@@ -5074,15 +5443,15 @@ function StnDateRangePickerField({
 }) {
   const format = formatProp ?? (showTime ? formatStnDateRangeFieldValue2 : formatDateOnly);
   const [value, setValue] = useControllableRange(valueProp, defaultValue, onChange);
-  const [open, setOpen] = useState13(false);
-  const [anchorRect, setAnchorRect] = useState13(null);
-  const rootRef = useRef6(null);
-  const triggerRef = useRef6(null);
-  const panelRef = useRef6(null);
-  const updateAnchor = useCallback7(() => {
+  const [open, setOpen] = useState14(false);
+  const [anchorRect, setAnchorRect] = useState14(null);
+  const rootRef = useRef7(null);
+  const triggerRef = useRef7(null);
+  const panelRef = useRef7(null);
+  const updateAnchor = useCallback8(() => {
     setAnchorRect(triggerRef.current?.getBoundingClientRect() ?? null);
   }, []);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!open) return;
     updateAnchor();
     const onReflow = () => updateAnchor();
@@ -5093,7 +5462,7 @@ function StnDateRangePickerField({
       window.removeEventListener("scroll", onReflow, true);
     };
   }, [open, updateAnchor]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!open) return;
     const onDocMouseDown = (event) => {
       const target = event.target;
@@ -5104,7 +5473,7 @@ function StnDateRangePickerField({
     document.addEventListener("mousedown", onDocMouseDown);
     return () => document.removeEventListener("mousedown", onDocMouseDown);
   }, [open]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") setOpen(false);
@@ -5112,8 +5481,8 @@ function StnDateRangePickerField({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open]);
-  return /* @__PURE__ */ jsxs32("div", { ref: rootRef, className: cn("stn-date-picker-field", className), children: [
-    /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs34("div", { ref: rootRef, className: cn("stn-date-picker-field", className), children: [
+    /* @__PURE__ */ jsx44(
       StnDateRangeField,
       {
         ref: triggerRef,
@@ -5133,7 +5502,7 @@ function StnDateRangePickerField({
       }
     ),
     open && typeof document !== "undefined" ? createPortal2(
-      /* @__PURE__ */ jsx40("div", { ref: panelRef, children: /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx44("div", { ref: panelRef, children: /* @__PURE__ */ jsx44(
         StnDateRangePicker,
         {
           open: true,
@@ -5152,13 +5521,13 @@ function StnDateRangePickerField({
 }
 
 // src/patterns/search/StnSearchRequirementBarDemo.tsx
-import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } 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__ */ jsxs33(StnSearchRequirementBar, { className, children: [
-    /* @__PURE__ */ jsxs33(StnSearchRequirementBar.Fields, { children: [
-      /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsxs35(StnSearchRequirementBar, { className, children: [
+    /* @__PURE__ */ jsxs35(StnSearchRequirementBar.Fields, { children: [
+      /* @__PURE__ */ jsx45(
         StnTextField,
         {
           label: demo.reportTypeText.label,
@@ -5168,7 +5537,7 @@ function StnSearchRequirementBarDemo({ onSearch, onExport, className }) {
           "aria-label": demo.reportTypeText.label
         }
       ),
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx45(
         StnDropdown,
         {
           label: demo.reportTypeSelect.label,
@@ -5179,7 +5548,7 @@ function StnSearchRequirementBarDemo({ onSearch, onExport, className }) {
           "aria-label": demo.reportTypeSelect.label
         }
       ),
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx45(
         StnDropdown,
         {
           label: demo.periodType.label,
@@ -5190,7 +5559,7 @@ function StnSearchRequirementBarDemo({ onSearch, onExport, className }) {
           "aria-label": demo.periodType.label
         }
       ),
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx45(
         StnDateRangePickerField,
         {
           label: demo.period.label,
@@ -5204,8 +5573,8 @@ function StnSearchRequirementBarDemo({ onSearch, onExport, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx41(StnSearchRequirementBar.SearchButton, { onClick: onSearch }),
-    /* @__PURE__ */ jsx41(StnSearchRequirementBar.Export, { onClick: onExport })
+    /* @__PURE__ */ jsx45(StnSearchRequirementBar.SearchButton, { onClick: onSearch }),
+    /* @__PURE__ */ jsx45(StnSearchRequirementBar.Export, { onClick: onExport })
   ] });
 }
 
@@ -5219,7 +5588,7 @@ import {
 } from "@stn-uiux/pub-ui/data/stnHeader";
 
 // src/patterns/header/StnHeader.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function variantClass6(variant) {
   if (variant === "page") return "stn-header--page";
   return void 0;
@@ -5246,7 +5615,7 @@ function StnHeader({
     ...dynamicStyles,
     ...style
   };
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx46(
     "header",
     {
       className: cn(
@@ -5264,20 +5633,20 @@ function StnHeader({
   );
 }
 function StnHeaderLeft({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header__left", className), "data-stn-header-region": "left", ...rest, children });
+  return /* @__PURE__ */ jsx46("div", { className: cn("stn-header__left", className), "data-stn-header-region": "left", ...rest, children });
 }
 function StnHeaderCenter({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header__center", className), "data-stn-header-region": "center", ...rest, children });
+  return /* @__PURE__ */ jsx46("div", { className: cn("stn-header__center", className), "data-stn-header-region": "center", ...rest, children });
 }
 function StnHeaderRight({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header__right", className), "data-stn-header-region": "right", ...rest, children });
+  return /* @__PURE__ */ jsx46("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__ */ jsx42(
+  return /* @__PURE__ */ jsx46(
     "h1",
     {
       className: cn("stn-header__page-title", className),
@@ -5289,7 +5658,7 @@ function StnHeaderPageTitle({ children, className, title, ...rest }) {
 }
 function StnHeaderSubTitle({ children, className, title, ...rest }) {
   const autoTitle = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx46(
     "span",
     {
       className: cn("stn-header__subtitle", className),
@@ -5301,7 +5670,7 @@ function StnHeaderSubTitle({ children, className, title, ...rest }) {
 }
 function StnHeaderContextTitle({ children, className, title, ...rest }) {
   const autoTitle = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx46(
     "span",
     {
       className: cn("stn-header__context-title", className),
@@ -5312,7 +5681,7 @@ function StnHeaderContextTitle({ children, className, title, ...rest }) {
   );
 }
 function StnHeaderToolbar({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header-toolbar", className), "data-stn-header-toolbar": true, ...rest, children });
+  return /* @__PURE__ */ jsx46("div", { className: cn("stn-header-toolbar", className), "data-stn-header-toolbar": true, ...rest, children });
 }
 
 // src/index.ts
@@ -5330,7 +5699,7 @@ import {
   STN_LAYER0_BACKGROUND_DEMO_IMAGES,
   STN_LAYER0_MAP_LIGHT_OVERLAY
 } from "@stn-uiux/pub-ui/data/stnLayer0Background";
-import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs36 } 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))}%`;
@@ -5385,15 +5754,15 @@ function StnLayer0Background({
   const isImage = kind === "image" || Boolean(src || srcDark);
   if (isImage) {
     const paired = Boolean(src && srcDark);
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx47(
       "div",
       {
         className: cn("stn-layer0-bg", "image", className),
         "aria-hidden": alt === "" ? true : void 0,
         style: { ...overlayStyle(overlay), ...style },
         ...rest,
-        children: /* @__PURE__ */ jsxs34("div", { className: "stn-layer0-bg__media", children: [
-          src ? /* @__PURE__ */ jsx43(
+        children: /* @__PURE__ */ jsxs36("div", { className: "stn-layer0-bg__media", children: [
+          src ? /* @__PURE__ */ jsx47(
             "img",
             {
               className: cn("stn-layer0-bg__img", paired && "light"),
@@ -5410,7 +5779,7 @@ function StnLayer0Background({
               }
             }
           ) : null,
-          srcDark ? /* @__PURE__ */ jsx43(
+          srcDark ? /* @__PURE__ */ jsx47(
             "img",
             {
               className: cn("stn-layer0-bg__img", paired ? "dark" : void 0),
@@ -5427,15 +5796,15 @@ function StnLayer0Background({
               }
             }
           ) : 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
+          overlay != null && overlay > 0 ? /* @__PURE__ */ jsx47("div", { className: "stn-layer0-bg__overlay", "aria-hidden": "true" }) : null,
+          overlayDarkRadial ? /* @__PURE__ */ jsx47("div", { className: "stn-layer0-bg__overlay radial", "aria-hidden": "true" }) : null
         ] })
       }
     );
   }
   const isGradient = kind === "gradient" || variant === "gradient";
   if (isGradient) {
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx47(
       "div",
       {
         className: cn("stn-layer0-bg", "gradient", className),
@@ -5445,7 +5814,7 @@ function StnLayer0Background({
       }
     );
   }
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx47(
     "div",
     {
       className: cn("stn-layer0-bg", "color", color, className),
@@ -5482,7 +5851,7 @@ import {
 
 // src/components/StnEventBanner.tsx
 import React2 from "react";
-import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
 var SEVERITY_ICONS2 = {
   critical: "fill/alert4",
   major: "fill/alert3",
@@ -5490,7 +5859,7 @@ var SEVERITY_ICONS2 = {
   warning: "fill/alert1"
 };
 function DefaultTriangleIcon() {
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs37(
     "svg",
     {
       width: "20",
@@ -5500,7 +5869,7 @@ function DefaultTriangleIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx48(
           "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",
@@ -5510,17 +5879,17 @@ function DefaultTriangleIcon() {
             strokeLinejoin: "round"
           }
         ),
-        /* @__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" })
+        /* @__PURE__ */ jsx48("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx48("circle", { cx: "12", cy: "17", r: "1", fill: "currentColor" })
       ]
     }
   );
 }
 function resolveDefaultIcon(severity) {
   if (severity === "critical") {
-    return /* @__PURE__ */ jsx44(DefaultTriangleIcon, {});
+    return /* @__PURE__ */ jsx48(DefaultTriangleIcon, {});
   }
-  return /* @__PURE__ */ jsx44(StnIcon, { name: SEVERITY_ICONS2[severity] || "fill/alert4", size: 20 });
+  return /* @__PURE__ */ jsx48(StnIcon, { name: SEVERITY_ICONS2[severity] || "fill/alert4", size: 20 });
 }
 var StnEventBanner = React2.forwardRef(
   ({
@@ -5539,7 +5908,7 @@ var StnEventBanner = React2.forwardRef(
     id,
     ...restProps
   }, ref) => {
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs37(
       "div",
       {
         ref,
@@ -5556,16 +5925,16 @@ var StnEventBanner = React2.forwardRef(
         ),
         ...restProps,
         children: [
-          /* @__PURE__ */ jsxs35("div", { className: "stn-event-banner__left", children: [
-            /* @__PURE__ */ jsx44("div", { className: "stn-event-banner__icon-wrap", children: icon ?? resolveDefaultIcon(severity) }),
-            /* @__PURE__ */ jsxs35("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__ */ jsxs37("div", { className: "stn-event-banner__left", children: [
+            /* @__PURE__ */ jsx48("div", { className: "stn-event-banner__icon-wrap", children: icon ?? resolveDefaultIcon(severity) }),
+            /* @__PURE__ */ jsxs37("div", { className: "stn-event-banner__text", children: [
+              title && /* @__PURE__ */ jsx48("span", { className: "stn-event-banner__title", title: typeof title === "string" ? title : void 0, children: title }),
+              time && /* @__PURE__ */ jsx48("span", { className: "stn-event-banner__time", title: typeof time === "string" ? time : void 0, children: time })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs35("div", { className: "stn-event-banner__actions", children: [
+          /* @__PURE__ */ jsxs37("div", { className: "stn-event-banner__actions", children: [
             actions,
-            actionText && /* @__PURE__ */ jsx44(
+            actionText && /* @__PURE__ */ jsx48(
               "button",
               {
                 type: "button",
@@ -5574,7 +5943,7 @@ var StnEventBanner = React2.forwardRef(
                 children: actionText
               }
             ),
-            onClose && /* @__PURE__ */ jsx44(
+            onClose && /* @__PURE__ */ jsx48(
               "button",
               {
                 type: "button",
@@ -5593,9 +5962,9 @@ var StnEventBanner = React2.forwardRef(
 StnEventBanner.displayName = "StnEventBanner";
 
 // src/patterns/scaffold/StnLoadingSkeleton.tsx
-import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
 function StnLoadingSkeletonLine({ width = "full", className, style, ...rest }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       className: cn(
@@ -5611,7 +5980,7 @@ function StnLoadingSkeletonLine({ width = "full", className, style, ...rest }) {
   );
 }
 function StnLoadingSkeletonBlock({ minHeight = 48, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       className: cn("stn-loading-skeleton__block", className),
@@ -5622,7 +5991,7 @@ function StnLoadingSkeletonBlock({ minHeight = 48, className, style, ...rest })
   );
 }
 function StnLoadingSkeletonCircle({ size = 40, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       className: cn("stn-loading-skeleton__circle", className),
@@ -5633,7 +6002,7 @@ function StnLoadingSkeletonCircle({ size = 40, className, style, ...rest }) {
   );
 }
 function StnLoadingSkeletonProfile({ avatarSize = 40, className, style, ...rest }) {
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       className: cn("stn-loading-skeleton--profile", className),
@@ -5642,17 +6011,17 @@ function StnLoadingSkeletonProfile({ avatarSize = 40, className, style, ...rest
       "aria-label": "\uD504\uB85C\uD544 \uB85C\uB529 \uC911",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx45(StnLoadingSkeletonCircle, { size: avatarSize }),
-        /* @__PURE__ */ jsxs36("div", { className: "stn-loading-skeleton__profile-content", children: [
-          /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width: "medium" }),
-          /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width: "short" })
+        /* @__PURE__ */ jsx49(StnLoadingSkeletonCircle, { size: avatarSize }),
+        /* @__PURE__ */ jsxs38("div", { className: "stn-loading-skeleton__profile-content", children: [
+          /* @__PURE__ */ jsx49(StnLoadingSkeletonLine, { width: "medium" }),
+          /* @__PURE__ */ jsx49(StnLoadingSkeletonLine, { width: "short" })
         ] })
       ]
     }
   );
 }
 function StnLoadingSkeletonWidget({ lines = 4, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       className: cn("stn-loading-skeleton", "stn-loading-skeleton--widget", className),
@@ -5660,12 +6029,12 @@ function StnLoadingSkeletonWidget({ lines = 4, className, style, ...rest }) {
       "aria-busy": "true",
       "aria-label": "\uB85C\uB529 \uC911",
       ...rest,
-      children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width: i % 3 === 0 ? "short" : i % 2 === 0 ? "medium" : "full" }, i))
+      children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx49(StnLoadingSkeletonLine, { width: i % 3 === 0 ? "short" : i % 2 === 0 ? "medium" : "full" }, i))
     }
   );
 }
 function StnLoadingSkeletonTable({ rows = 5, cols = 4, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       className: cn("stn-loading-skeleton", "stn-loading-skeleton--table", className),
@@ -5673,7 +6042,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__ */ jsx45("div", { className: "stn-loading-skeleton__table-row", children: Array.from({ length: cols }, (_2, col) => /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, {}, col)) }, row))
+      children: Array.from({ length: rows }, (_, row) => /* @__PURE__ */ jsx49("div", { className: "stn-loading-skeleton__table-row", children: Array.from({ length: cols }, (_2, col) => /* @__PURE__ */ jsx49(StnLoadingSkeletonLine, {}, col)) }, row))
     }
   );
 }
@@ -5692,23 +6061,23 @@ function StnLoadingSkeletonRoot({
   ...rest
 }) {
   if (children != null) {
-    return /* @__PURE__ */ jsx45("div", { className: cn("stn-loading-skeleton", className), style, "aria-busy": "true", ...rest, children });
+    return /* @__PURE__ */ jsx49("div", { className: cn("stn-loading-skeleton", className), style, "aria-busy": "true", ...rest, children });
   }
   const resolvedVariant = variant ?? "line";
   switch (resolvedVariant) {
     case "circle":
-      return /* @__PURE__ */ jsx45(StnLoadingSkeletonCircle, { size, className, style, ...rest });
+      return /* @__PURE__ */ jsx49(StnLoadingSkeletonCircle, { size, className, style, ...rest });
     case "block":
-      return /* @__PURE__ */ jsx45(StnLoadingSkeletonBlock, { minHeight, className, style, ...rest });
+      return /* @__PURE__ */ jsx49(StnLoadingSkeletonBlock, { minHeight, className, style, ...rest });
     case "profile":
-      return /* @__PURE__ */ jsx45(StnLoadingSkeletonProfile, { avatarSize: avatarSize ?? size, className, style, ...rest });
+      return /* @__PURE__ */ jsx49(StnLoadingSkeletonProfile, { avatarSize: avatarSize ?? size, className, style, ...rest });
     case "widget":
-      return /* @__PURE__ */ jsx45(StnLoadingSkeletonWidget, { lines, className, style, ...rest });
+      return /* @__PURE__ */ jsx49(StnLoadingSkeletonWidget, { lines, className, style, ...rest });
     case "table":
-      return /* @__PURE__ */ jsx45(StnLoadingSkeletonTable, { rows, cols, className, style, ...rest });
+      return /* @__PURE__ */ jsx49(StnLoadingSkeletonTable, { rows, cols, className, style, ...rest });
     case "line":
     default:
-      return /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width, className, style, ...rest });
+      return /* @__PURE__ */ jsx49(StnLoadingSkeletonLine, { width, className, style, ...rest });
   }
 }
 var StnLoadingSkeleton = Object.assign(StnLoadingSkeletonRoot, {
@@ -5829,7 +6198,7 @@ function ringOrbitRadius(orbit, ringCount, baseRadius, gap = 36) {
 }
 
 // src/components/topology/StnTopologyNodeMark.tsx
-import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 function renderTopologyIcon(icon, color, px) {
   if (!icon) return null;
   if (typeof icon !== "string") return icon;
@@ -5845,56 +6214,56 @@ function renderTopologyIcon(icon, color, px) {
   };
   switch (icon) {
     case "server":
-      return /* @__PURE__ */ jsxs37("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" })
+      return /* @__PURE__ */ jsxs39("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx50("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx50("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx50("line", { x1: "6", y1: "6", x2: "6.01", y2: "6" }),
+        /* @__PURE__ */ jsx50("line", { x1: "6", y1: "18", x2: "6.01", y2: "18" })
       ] });
     case "cloud":
-      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" }) });
+      return /* @__PURE__ */ jsx50("svg", { ...iconProps, children: /* @__PURE__ */ jsx50("path", { d: "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" }) });
     case "ai":
-      return /* @__PURE__ */ jsxs37("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" })
+      return /* @__PURE__ */ jsxs39("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx50("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
+        /* @__PURE__ */ jsx50("rect", { x: "9", y: "9", width: "6", height: "6" }),
+        /* @__PURE__ */ jsx50("line", { x1: "9", y1: "1", x2: "9", y2: "4" }),
+        /* @__PURE__ */ jsx50("line", { x1: "15", y1: "1", x2: "15", y2: "4" }),
+        /* @__PURE__ */ jsx50("line", { x1: "9", y1: "20", x2: "9", y2: "23" }),
+        /* @__PURE__ */ jsx50("line", { x1: "15", y1: "20", x2: "15", y2: "23" }),
+        /* @__PURE__ */ jsx50("line", { x1: "20", y1: "9", x2: "23", y2: "9" }),
+        /* @__PURE__ */ jsx50("line", { x1: "20", y1: "14", x2: "23", y2: "14" }),
+        /* @__PURE__ */ jsx50("line", { x1: "1", y1: "9", x2: "4", y2: "9" }),
+        /* @__PURE__ */ jsx50("line", { x1: "1", y1: "14", x2: "4", y2: "14" })
       ] });
     case "network":
-      return /* @__PURE__ */ jsxs37("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" })
+      return /* @__PURE__ */ jsxs39("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx50("rect", { x: "2", y: "2", width: "6", height: "6", rx: "1" }),
+        /* @__PURE__ */ jsx50("rect", { x: "16", y: "2", width: "6", height: "6", rx: "1" }),
+        /* @__PURE__ */ jsx50("rect", { x: "9", y: "16", width: "6", height: "6", rx: "1" }),
+        /* @__PURE__ */ jsx50("line", { x1: "5", y1: "8", x2: "5", y2: "12" }),
+        /* @__PURE__ */ jsx50("line", { x1: "19", y1: "8", x2: "19", y2: "12" }),
+        /* @__PURE__ */ jsx50("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+        /* @__PURE__ */ jsx50("line", { x1: "12", y1: "12", x2: "12", y2: "16" })
       ] });
     case "shield":
-      return /* @__PURE__ */ jsx46("svg", { ...iconProps, children: /* @__PURE__ */ jsx46("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
+      return /* @__PURE__ */ jsx50("svg", { ...iconProps, children: /* @__PURE__ */ jsx50("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
     case "user":
-      return /* @__PURE__ */ jsxs37("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" })
+      return /* @__PURE__ */ jsxs39("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx50("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ jsx50("circle", { cx: "12", cy: "7", r: "4" })
       ] });
     case "database":
-      return /* @__PURE__ */ jsxs37("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" })
+      return /* @__PURE__ */ jsxs39("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx50("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
+        /* @__PURE__ */ jsx50("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }),
+        /* @__PURE__ */ jsx50("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" })
       ] });
     case "wifi":
-      return /* @__PURE__ */ jsxs37("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" })
+      return /* @__PURE__ */ jsxs39("svg", { ...iconProps, children: [
+        /* @__PURE__ */ jsx50("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
+        /* @__PURE__ */ jsx50("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
+        /* @__PURE__ */ jsx50("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
+        /* @__PURE__ */ jsx50("line", { x1: "12", y1: "20", x2: "12.01", y2: "20" })
       ] });
     default:
       return null;
@@ -5912,11 +6281,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__ */ jsx46("circle", { cx: x, cy: y, r, fill, stroke, strokeWidth, style: { filter } });
+    return /* @__PURE__ */ jsx50("circle", { cx: x, cy: y, r, fill, stroke, strokeWidth, style: { filter } });
   }
   if (shape === "square") {
     const size = r * 2;
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx50(
       "rect",
       {
         x: x - r,
@@ -5931,7 +6300,7 @@ function NodeShape({
       }
     );
   }
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx50(
     "polygon",
     {
       points: topologyShapePoints(shape, x, y, r),
@@ -5974,7 +6343,7 @@ function StnTopologyNodeMark({
   const countText = formatTopologyCount(count);
   const iconPx = metrics.icon;
   const showCornerBadge = !isCount && count != null && count !== "";
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs39(
     "g",
     {
       className: cn("stn-topology-node", selected && "stn-topology-node--selected", className),
@@ -5986,7 +6355,7 @@ function StnTopologyNodeMark({
       style: { cursor: onClick ? "pointer" : "default" },
       ...rest,
       children: [
-        isAlert && /* @__PURE__ */ jsxs37(
+        isAlert && /* @__PURE__ */ jsxs39(
           "circle",
           {
             className: "stn-topology-node__pulse",
@@ -5998,13 +6367,13 @@ function StnTopologyNodeMark({
             strokeWidth: "1.5",
             opacity: "0.55",
             children: [
-              /* @__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" })
+              /* @__PURE__ */ jsx50("animate", { attributeName: "r", values: `${r + 4};${r + 12};${r + 4}`, dur: "2s", repeatCount: "indefinite" }),
+              /* @__PURE__ */ jsx50("animate", { attributeName: "opacity", values: "0.75;0.15;0.75", dur: "2s", repeatCount: "indefinite" })
             ]
           }
         ),
-        selected && /* @__PURE__ */ jsx46("circle", { cx: x, cy: y, r: r + 6, fill: "none", stroke: "#00e5ff", strokeWidth: "1.5", strokeDasharray: "3 3" }),
-        /* @__PURE__ */ jsx46(
+        selected && /* @__PURE__ */ jsx50("circle", { cx: x, cy: y, r: r + 6, fill: "none", stroke: "#00e5ff", strokeWidth: "1.5", strokeDasharray: "3 3" }),
+        /* @__PURE__ */ jsx50(
           NodeShape,
           {
             shape,
@@ -6017,7 +6386,7 @@ function StnTopologyNodeMark({
             glow: isAlert || isCount ? tone.glow : ""
           }
         ),
-        isCount ? /* @__PURE__ */ jsx46(
+        isCount ? /* @__PURE__ */ jsx50(
           "text",
           {
             x,
@@ -6030,10 +6399,10 @@ function StnTopologyNodeMark({
             style: { textShadow: "0 1px 2px rgba(0, 0, 0, 0.85)" },
             children: countText
           }
-        ) : /* @__PURE__ */ jsx46("g", { transform: `translate(${x - iconPx / 2}, ${y - iconPx / 2})`, children: renderTopologyIcon(icon, stroke, iconPx) }),
-        showCornerBadge && /* @__PURE__ */ jsxs37("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(
+        ) : /* @__PURE__ */ jsx50("g", { transform: `translate(${x - iconPx / 2}, ${y - iconPx / 2})`, children: renderTopologyIcon(icon, stroke, iconPx) }),
+        showCornerBadge && /* @__PURE__ */ jsxs39("g", { className: "stn-topology-node__badge", children: [
+          /* @__PURE__ */ jsx50("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__ */ jsx50(
             "text",
             {
               x: x + r * 0.72,
@@ -6047,7 +6416,7 @@ function StnTopologyNodeMark({
             }
           )
         ] }),
-        showLabel && label && /* @__PURE__ */ jsx46(
+        showLabel && label && /* @__PURE__ */ jsx50(
           "text",
           {
             x,
@@ -6060,7 +6429,7 @@ function StnTopologyNodeMark({
             children: label
           }
         ),
-        showStatus && resolvedStatusLabel && /* @__PURE__ */ jsxs37(
+        showStatus && resolvedStatusLabel && /* @__PURE__ */ jsxs39(
           "text",
           {
             x,
@@ -6091,11 +6460,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__ */ 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 }) });
+  return /* @__PURE__ */ jsx50("svg", { className: "stn-topology-node-preview", width: w, height: h, viewBox: `0 0 ${w} ${h}`, overflow: "visible", children: /* @__PURE__ */ jsx50(StnTopologyNodeMark, { x: w / 2, y: h / 2, size, showLabel, showStatus, ...rest }) });
 }
 
 // src/components/topology/StnTopologyRing.tsx
-import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 function StnTopologyRing({
   core = {
     title: "\uC5D0\uC2A4\uD2F0\uC5D4\uC778\uD3EC\uD14D",
@@ -6154,17 +6523,17 @@ function StnTopologyRing({
     };
   });
   if (loading) {
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx51(
       "div",
       {
         className: cn("stn-topology-ring", "stn-topology-ring--loading", className),
         style,
         ...rest,
-        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..." })
+        children: /* @__PURE__ */ jsx51("div", { className: "stn-topology-ring__loading-label", children: "\uD1A0\uD3F4\uB85C\uC9C0 \uB9C1 \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911..." })
       }
     );
   }
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       className: cn("stn-topology-ring", className),
@@ -6172,7 +6541,7 @@ function StnTopologyRing({
       "data-stn-topology-ring": true,
       "data-ring-count": safeRingCount,
       ...rest,
-      children: /* @__PURE__ */ jsxs38(
+      children: /* @__PURE__ */ jsxs40(
         "svg",
         {
           className: "stn-topology-ring__svg",
@@ -6181,19 +6550,19 @@ function StnTopologyRing({
           viewBox: `0 0 ${vb} ${vb}`,
           overflow: "visible",
           children: [
-            /* @__PURE__ */ jsxs38("defs", { children: [
-              /* @__PURE__ */ jsxs38("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__ */ jsxs40("defs", { children: [
+              /* @__PURE__ */ jsxs40("radialGradient", { id: coreGlowId, cx: "50%", cy: "50%", r: "50%", children: [
+                /* @__PURE__ */ jsx51("stop", { offset: "0%", stopColor: "#722ed1", stopOpacity: "0.8" }),
+                /* @__PURE__ */ jsx51("stop", { offset: "100%", stopColor: "#120338", stopOpacity: "0" })
               ] }),
-              /* @__PURE__ */ jsxs38("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" })
+              /* @__PURE__ */ jsxs40("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                /* @__PURE__ */ jsx51("stop", { offset: "0%", stopColor: "#00e5ff", stopOpacity: "0.4" }),
+                /* @__PURE__ */ jsx51("stop", { offset: "100%", stopColor: "#722ed1", stopOpacity: "0.4" })
               ] })
             ] }),
             radii.map((r, idx) => {
               const isMain = idx + 1 === mainOrbit;
-              return /* @__PURE__ */ jsx47(
+              return /* @__PURE__ */ jsx51(
                 "circle",
                 {
                   cx: centerX,
@@ -6207,7 +6576,7 @@ function StnTopologyRing({
                 `orbit-${idx}`
               );
             }),
-            connectionLineStyle !== "none" && calculatedNodes.map((node) => /* @__PURE__ */ jsx47(
+            connectionLineStyle !== "none" && calculatedNodes.map((node) => /* @__PURE__ */ jsx51(
               "line",
               {
                 x1: centerX,
@@ -6220,9 +6589,9 @@ function StnTopologyRing({
               },
               `line-${node.id}`
             )),
-            /* @__PURE__ */ jsxs38("g", { className: "stn-topology-ring__core", children: [
-              /* @__PURE__ */ jsx47("circle", { cx: centerX, cy: centerY, r: 54, fill: `url(#${coreGlowId})` }),
-              /* @__PURE__ */ jsx47(
+            /* @__PURE__ */ jsxs40("g", { className: "stn-topology-ring__core", children: [
+              /* @__PURE__ */ jsx51("circle", { cx: centerX, cy: centerY, r: 54, fill: `url(#${coreGlowId})` }),
+              /* @__PURE__ */ jsx51(
                 "circle",
                 {
                   cx: centerX,
@@ -6234,7 +6603,7 @@ function StnTopologyRing({
                   style: { filter: "drop-shadow(0 0 12px rgba(114, 46, 209, 0.6))" }
                 }
               ),
-              core.subTitle && /* @__PURE__ */ jsx47(
+              core.subTitle && /* @__PURE__ */ jsx51(
                 "text",
                 {
                   x: centerX,
@@ -6247,13 +6616,13 @@ function StnTopologyRing({
                   children: core.subTitle
                 }
               ),
-              core.title && /* @__PURE__ */ jsx47("text", { x: centerX, y: centerY + 8, textAnchor: "middle", fill: "#f0f2f5", fontSize: "10", fontWeight: "600", children: core.title }),
-              /* @__PURE__ */ jsxs38("text", { x: centerX, y: centerY + 22, textAnchor: "middle", fill: coreColor, fontSize: "9", fontWeight: "500", children: [
+              core.title && /* @__PURE__ */ jsx51("text", { x: centerX, y: centerY + 8, textAnchor: "middle", fill: "#f0f2f5", fontSize: "10", fontWeight: "600", children: core.title }),
+              /* @__PURE__ */ jsxs40("text", { x: centerX, y: centerY + 22, textAnchor: "middle", fill: coreColor, fontSize: "9", fontWeight: "500", children: [
                 "\u25CF ",
                 coreStatusLabel
               ] })
             ] }),
-            calculatedNodes.map((node) => /* @__PURE__ */ jsx47(
+            calculatedNodes.map((node) => /* @__PURE__ */ jsx51(
               StnTopologyNodeMark,
               {
                 x: node.x,
@@ -6281,8 +6650,8 @@ function StnTopologyRing({
 }
 
 // src/components/topology/StnTopologyGraph.tsx
-import { useState as useState14 } from "react";
-import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { jsx as jsx52, jsxs as jsxs41 } 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 },
@@ -6316,12 +6685,12 @@ function StnTopologyGraph({
   style,
   ...rest
 }) {
-  const [viewMode, setViewMode] = useState14(defaultMode);
+  const [viewMode, setViewMode] = useState15(defaultMode);
   if (loading) {
-    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..." }) });
+    return /* @__PURE__ */ jsx52("div", { className: cn("stn-topology-graph", "stn-topology-graph--loading", className), style, ...rest, children: /* @__PURE__ */ jsx52("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__ */ jsxs39(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       className: cn("stn-topology-graph", className),
@@ -6330,7 +6699,7 @@ function StnTopologyGraph({
       "data-view-mode": viewMode,
       ...rest,
       children: [
-        showModeToggle && /* @__PURE__ */ jsx48("div", { className: "stn-topology-graph__mode", children: /* @__PURE__ */ jsx48(
+        showModeToggle && /* @__PURE__ */ jsx52("div", { className: "stn-topology-graph__mode", children: /* @__PURE__ */ jsx52(
           StnSegmented,
           {
             size: "sm",
@@ -6342,23 +6711,23 @@ function StnTopologyGraph({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs39("svg", { className: "stn-topology-graph__svg", width: "100%", height: "100%", viewBox: "0 0 400 300", overflow: "visible", children: [
-          viewMode === "3D" ? /* @__PURE__ */ jsxs39("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__ */ jsxs39("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" })
+        /* @__PURE__ */ jsxs41("svg", { className: "stn-topology-graph__svg", width: "100%", height: "100%", viewBox: "0 0 400 300", overflow: "visible", children: [
+          viewMode === "3D" ? /* @__PURE__ */ jsxs41("g", { opacity: "0.6", children: [
+            /* @__PURE__ */ jsx52("line", { x1: "60", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.06)", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx52("line", { x1: "130", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx52("line", { x1: "200", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.14)", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx52("line", { x1: "270", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx52("line", { x1: "340", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.06)", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx52("line", { x1: "100", y1: "230", x2: "300", y2: "230", stroke: "rgba(255,255,255,0.06)" }),
+            /* @__PURE__ */ jsx52("line", { x1: "130", y1: "190", x2: "270", y2: "190", stroke: "rgba(255,255,255,0.06)" }),
+            /* @__PURE__ */ jsx52("line", { x1: "160", y1: "140", x2: "240", y2: "140", stroke: "rgba(255,255,255,0.06)" })
+          ] }) : /* @__PURE__ */ jsxs41("g", { opacity: "0.3", children: [
+            /* @__PURE__ */ jsx52("line", { x1: "40", y1: "60", x2: "360", y2: "60", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
+            /* @__PURE__ */ jsx52("line", { x1: "40", y1: "150", x2: "360", y2: "150", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
+            /* @__PURE__ */ jsx52("line", { x1: "40", y1: "240", x2: "360", y2: "240", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
+            /* @__PURE__ */ jsx52("line", { x1: "100", y1: "20", x2: "100", y2: "280", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
+            /* @__PURE__ */ jsx52("line", { x1: "200", y1: "20", x2: "200", y2: "280", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
+            /* @__PURE__ */ jsx52("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);
@@ -6366,7 +6735,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__ */ jsx48(
+            return /* @__PURE__ */ jsx52(
               "line",
               {
                 x1: s.x,
@@ -6383,7 +6752,7 @@ function StnTopologyGraph({
           nodes.map((node) => {
             const status = node.status ?? "normal";
             const isCore = Boolean(node.isCore);
-            return /* @__PURE__ */ jsx48(
+            return /* @__PURE__ */ jsx52(
               StnTopologyNodeMark,
               {
                 x: node.x,
@@ -6406,17 +6775,17 @@ function StnTopologyGraph({
             );
           })
         ] }),
-        showMinimap && /* @__PURE__ */ jsxs39("div", { className: "stn-topology-graph__minimap", children: [
-          /* @__PURE__ */ jsxs39("div", { className: "stn-topology-graph__minimap-head", children: [
-            /* @__PURE__ */ jsx48("span", { children: "\uBBF8\uB9AC\uBCF4\uAE30" }),
-            /* @__PURE__ */ jsx48("span", { children: "\u2014" })
+        showMinimap && /* @__PURE__ */ jsxs41("div", { className: "stn-topology-graph__minimap", children: [
+          /* @__PURE__ */ jsxs41("div", { className: "stn-topology-graph__minimap-head", children: [
+            /* @__PURE__ */ jsx52("span", { children: "\uBBF8\uB9AC\uBCF4\uAE30" }),
+            /* @__PURE__ */ jsx52("span", { children: "\u2014" })
           ] }),
-          /* @__PURE__ */ jsxs39("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 })
+          /* @__PURE__ */ jsxs41("svg", { width: "100%", height: "40", viewBox: "0 0 100 50", children: [
+            /* @__PURE__ */ jsx52("polyline", { points: "50,10 40,25 50,40 60,30", fill: "none", stroke: "rgba(255,77,79,0.5)", strokeWidth: "1" }),
+            /* @__PURE__ */ jsx52("circle", { cx: "50", cy: "10", r: "2", fill: STN_TOPOLOGY_STATUS_COLORS.critical.main }),
+            /* @__PURE__ */ jsx52("circle", { cx: "40", cy: "25", r: "2.5", fill: STN_TOPOLOGY_STATUS_COLORS.critical.main }),
+            /* @__PURE__ */ jsx52("circle", { cx: "50", cy: "40", r: "2", fill: "#00e5ff" }),
+            /* @__PURE__ */ jsx52("circle", { cx: "60", cy: "30", r: "2", fill: STN_TOPOLOGY_STATUS_COLORS.normal.main })
           ] })
         ] })
       ]
@@ -6425,7 +6794,7 @@ function StnTopologyGraph({
 }
 
 // src/components/StnWidget.tsx
-import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 var SHELL_PUB_CLASS = {
   card: "",
   "fault-panel": "",
@@ -6508,20 +6877,20 @@ function StnWidgetPeriodText({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx49("span", { className: cn("stn-widget__period-text", className), ...rest, children });
+  return /* @__PURE__ */ jsx53("span", { className: cn("stn-widget__period-text", className), ...rest, children });
 }
 function StnWidgetPeriodSelect({
   label,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx53(
     StnButton,
     {
       variant: "ghost",
       size: "sm",
       shape: "square",
-      icon: /* @__PURE__ */ jsx49(StnIcon, { name: "line/chevron-down" }),
+      icon: /* @__PURE__ */ jsx53(StnIcon, { name: "line/chevron-down" }),
       iconPosition: "right",
       className,
       ...rest,
@@ -6538,26 +6907,26 @@ function StnWidgetPeriodPager({
   nextLabel = "\uB2E4\uC74C",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
-    /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs42("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
+    /* @__PURE__ */ jsx53(
       StnButton,
       {
         variant: "ghost",
         size: "sm",
         shape: "square",
-        icon: /* @__PURE__ */ jsx49(StnIcon, { name: "line/arrow-narrow-left" }),
+        icon: /* @__PURE__ */ jsx53(StnIcon, { name: "line/arrow-narrow-left" }),
         onClick: onPrev,
         "aria-label": prevLabel
       }
     ),
-    /* @__PURE__ */ jsx49("span", { className: "stn-widget__period-pager-label", children: label }),
-    /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx53("span", { className: "stn-widget__period-pager-label", children: label }),
+    /* @__PURE__ */ jsx53(
       StnButton,
       {
         variant: "ghost",
         size: "sm",
         shape: "square",
-        icon: /* @__PURE__ */ jsx49(StnIcon, { name: "line/arrow-narrow-right" }),
+        icon: /* @__PURE__ */ jsx53(StnIcon, { name: "line/arrow-narrow-right" }),
         onClick: onNext,
         "aria-label": nextLabel
       }
@@ -6584,18 +6953,18 @@ function StnWidgetHeaderInner({
     return null;
   }
   const resolvedIconName = headerIconName ?? defaultHeaderIconName(appearance);
-  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs40("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__ */ jsxs40("div", { className: "stn-widget__title-wrap", children: [
-        typeof title === "string" ? /* @__PURE__ */ jsx49("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : null,
+  return /* @__PURE__ */ jsxs42("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
+    /* @__PURE__ */ jsxs42("div", { className: "stn-widget__head-start", children: [
+      showHeaderIcon ? headerIcon != null ? /* @__PURE__ */ jsx53(StnWidgetInsetIcon, { size: "sm", children: headerIcon }) : resolvedIconName ? /* @__PURE__ */ jsx53(StnWidgetInsetIcon, { size: "sm", icon: resolvedIconName }) : null : null,
+      title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs42("div", { className: "stn-widget__title-wrap", children: [
+        typeof title === "string" ? /* @__PURE__ */ jsx53("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : null,
         badge
-      ] }) : /* @__PURE__ */ jsxs40(Fragment5, { children: [
+      ] }) : /* @__PURE__ */ jsxs42(Fragment5, { children: [
         title,
         badge
       ] }) : 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
+    titleActions != null || periodActions != null || periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx53("div", { className: "stn-widget__head-end", children: titleActions ?? (periodActions != null ? periodActions : periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx53(StnWidgetPeriodText, { children: periodLabel }) : null) }) : null
   ] });
 }
 function StnWidgetRoot({
@@ -6678,10 +7047,10 @@ function StnWidgetRoot({
     ...rest
   };
   const slots = partitionWidgetChildren(children);
-  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs40("div", { className: "app_bar", children: [
-    /* @__PURE__ */ jsx49("div", { className: "fault_title_box", children: typeof title === "string" ? /* @__PURE__ */ jsx49("span", { children: title }) : title }),
+  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs42("div", { className: "app_bar", children: [
+    /* @__PURE__ */ jsx53("div", { className: "fault_title_box", children: typeof title === "string" ? /* @__PURE__ */ jsx53("span", { children: title }) : title }),
     titleActions
-  ] }) : 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(
+  ] }) : null : shell === "board" || shell === "board-item" ? title != null ? /* @__PURE__ */ jsx53("div", { className: "stn-widget__head", children: typeof title === "string" ? /* @__PURE__ */ jsx53("p", { children: title }) : title }) : null : isFigmaShell ? /* @__PURE__ */ jsx53(
     StnWidgetHeaderInner,
     {
       appearance,
@@ -6697,40 +7066,40 @@ function StnWidgetRoot({
       headerIcon,
       wrapActions
     }
-  ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs40("div", { className: "stn-widget__head-start", children: [
-      title != null ? typeof title === "string" ? /* @__PURE__ */ jsx49("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : title : null,
+  ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs42("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
+    /* @__PURE__ */ jsxs42("div", { className: "stn-widget__head-start", children: [
+      title != null ? typeof title === "string" ? /* @__PURE__ */ jsx53("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : title : null,
       badge
     ] }),
-    titleActions ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__head-end", children: titleActions }) : null
+    titleActions ? /* @__PURE__ */ jsx53("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__ */ jsx49("div", { className: cn("stn-widget__body", autoBodyClass, contentClassName), children: /* @__PURE__ */ jsx49(StnWidgetLoading, {}) });
+    body = /* @__PURE__ */ jsx53("div", { className: cn("stn-widget__body", autoBodyClass, contentClassName), children: /* @__PURE__ */ jsx53(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__ */ jsx49("div", { className: cn("stn-widget__body", autoBodyClass, isEmptyState && "empty", contentClassName), style: emptyStyle, children: slots.rest });
+    body = /* @__PURE__ */ jsx53("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__ */ jsx49("div", { className: "stn-widget__footer", children: footer }) : null;
-  const card = /* @__PURE__ */ jsxs40("div", { ...rootProps, children: [
-    isFigmaShell && appearanceShell === "overlay" ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__map-deco", "aria-hidden": true }) : null,
+  const footerNode = slots.footers.length > 0 ? slots.footers : footer ? /* @__PURE__ */ jsx53("div", { className: "stn-widget__footer", children: footer }) : null;
+  const card = /* @__PURE__ */ jsxs42("div", { ...rootProps, children: [
+    isFigmaShell && appearanceShell === "overlay" ? /* @__PURE__ */ jsx53("div", { className: "stn-widget__map-deco", "aria-hidden": true }) : null,
     head,
     body,
     footerNode
   ] });
   if (banner == null || banner === false) return card;
-  return /* @__PURE__ */ jsxs40("div", { className: "stn-widget-anchor", children: [
+  return /* @__PURE__ */ jsxs42("div", { className: "stn-widget-anchor", children: [
     withBannerSeverity(banner, bannerSeverityFromStatus(status, isCritical)),
     card
   ] });
 }
 function StnWidgetHeader({ className, wrap = false, children, ...rest }) {
-  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__head", wrap && "stn-widget__head--wrap", className), ...rest, children });
+  return /* @__PURE__ */ jsx53("div", { className: cn("stn-widget__head", wrap && "stn-widget__head--wrap", className), ...rest, children });
 }
 markWidgetSlot(StnWidgetHeader, "header");
 function StnWidgetTitle({
@@ -6742,10 +7111,10 @@ function StnWidgetTitle({
   ...rest
 }) {
   const titleAttr = title ?? (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ jsx49("p", { className: cn("stn-widget__title", size, weight, className), title: titleAttr, ...rest, children });
+  return /* @__PURE__ */ jsx53("p", { className: cn("stn-widget__title", size, weight, className), title: titleAttr, ...rest, children });
 }
 function StnWidgetActions({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__head-end", className), ...rest, children });
+  return /* @__PURE__ */ jsx53("div", { className: cn("stn-widget__head-end", className), ...rest, children });
 }
 function StnWidgetBody({
   padding,
@@ -6759,7 +7128,7 @@ function StnWidgetBody({
 }) {
   const emptyText = typeof empty === "string" ? empty : void 0;
   const mergedStyle = emptyText ? { ["--stn-widget-empty-text"]: `"${emptyText}"`, ...style } : style;
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx53(
     "div",
     {
       className: cn(
@@ -6781,7 +7150,7 @@ function StnWidgetBody({
 }
 markWidgetSlot(StnWidgetBody, "body");
 function StnWidgetChartSlot({ label = "select chart", className, children, ...rest }) {
-  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 }) });
+  return /* @__PURE__ */ jsx53("div", { className: cn("stn-widget__chart-slot", className), "data-stn-widget-chart-slot": true, ...rest, children: children ?? /* @__PURE__ */ jsx53("span", { className: "stn-widget__chart-slot-label", children: label }) });
 }
 function StnWidgetStatusItem({
   label,
@@ -6793,9 +7162,9 @@ function StnWidgetStatusItem({
   ...rest
 }) {
   const grade = gradeProp ?? (status === "warning" ? "minor" : status) ?? "normal";
-  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__status-item", className), ...rest, children: [
-    /* @__PURE__ */ jsxs40("span", { className: "stn-widget__status-label", children: [
-      showDot ? /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs42("div", { className: cn("stn-widget__status-item", className), ...rest, children: [
+    /* @__PURE__ */ jsxs42("span", { className: "stn-widget__status-label", children: [
+      showDot ? /* @__PURE__ */ jsx53(
         "span",
         {
           className: cn("stn-widget__status-dot", `stn-widget__status-dot--${grade}`),
@@ -6804,23 +7173,23 @@ function StnWidgetStatusItem({
       ) : null,
       label
     ] }),
-    /* @__PURE__ */ jsx49("span", { className: "stn-widget__status-val", children: value })
+    /* @__PURE__ */ jsx53("span", { className: "stn-widget__status-val", children: value })
   ] });
 }
 function StnWidgetStatusList({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__status-list", className), ...rest, children });
+  return /* @__PURE__ */ jsx53("div", { className: cn("stn-widget__status-list", className), ...rest, children });
 }
 function StnWidgetStatGroup({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__stat-group", className), ...rest, children });
+  return /* @__PURE__ */ jsx53("div", { className: cn("stn-widget__stat-group", className), ...rest, children });
 }
 function StnWidgetStatCard({ label, count, className, ...rest }) {
-  return /* @__PURE__ */ jsxs40("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 })
+  return /* @__PURE__ */ jsxs42("div", { className: cn("stn-widget__stat-card", className), ...rest, children: [
+    /* @__PURE__ */ jsx53("span", { className: "stn-widget__stat-label", children: label }),
+    /* @__PURE__ */ jsx53("span", { className: "stn-widget__stat-count", children: count })
   ] });
 }
 function StnWidgetPlaceholder({ label = "\uCF58\uD150\uCE20 \uC601\uC5ED" }) {
-  return /* @__PURE__ */ jsx49("div", { className: "stn-widget__placeholder", children: label });
+  return /* @__PURE__ */ jsx53("div", { className: "stn-widget__placeholder", children: label });
 }
 var GRADE_ROW_ICON = {
   critical: "fill/alert4",
@@ -6843,42 +7212,42 @@ function StnWidgetGradeRow({
 }) {
   const clamped = Math.max(0, Math.min(100, percent));
   const resolvedPercentLabel = percentLabel ?? formatGradePercent(clamped);
-  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__grade-row", `stn-widget__grade-row--${grade}`, className), ...rest, children: [
-    /* @__PURE__ */ jsxs40("div", { className: "stn-widget__grade-row-left", children: [
-      /* @__PURE__ */ jsxs40("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 }),
+  return /* @__PURE__ */ jsxs42("div", { className: cn("stn-widget__grade-row", `stn-widget__grade-row--${grade}`, className), ...rest, children: [
+    /* @__PURE__ */ jsxs42("div", { className: "stn-widget__grade-row-left", children: [
+      /* @__PURE__ */ jsxs42("span", { className: "stn-widget__grade-row-label", children: [
+        /* @__PURE__ */ jsx53(StnIcon, { name: GRADE_ROW_ICON[grade], size: 20, className: "stn-widget__grade-row-icon", "aria-hidden": true }),
         label
       ] }),
-      /* @__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__ */ jsx53("div", { className: "stn-widget__grade-row-track", "aria-hidden": true, children: /* @__PURE__ */ jsx53("span", { className: "stn-widget__grade-row-fill", style: { width: `${clamped}%` } }) })
     ] }),
-    /* @__PURE__ */ jsxs40("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 })
+    /* @__PURE__ */ jsxs42("div", { className: "stn-widget__grade-row-right", children: [
+      /* @__PURE__ */ jsx53("span", { className: "stn-widget__grade-row-value", children: value }),
+      /* @__PURE__ */ jsx53("span", { className: "stn-widget__grade-row-percent", children: resolvedPercentLabel })
     ] })
   ] });
 }
 function StnWidgetGradeRowList({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__grade-row-list", className), ...rest, children });
+  return /* @__PURE__ */ jsx53("div", { className: cn("stn-widget__grade-row-list", className), ...rest, children });
 }
 function StnWidgetFooter({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__footer", className), ...rest, children });
+  return /* @__PURE__ */ jsx53("div", { className: cn("stn-widget__footer", className), ...rest, children });
 }
 markWidgetSlot(StnWidgetFooter, "footer");
 function StnWidgetEmpty({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__empty", className), ...rest, children: [
-    /* @__PURE__ */ jsxs40("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" })
+  return /* @__PURE__ */ jsxs42("div", { className: cn("stn-widget__empty", className), ...rest, children: [
+    /* @__PURE__ */ jsxs42("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__ */ jsx53("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx53("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsx53("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
     ] }),
-    /* @__PURE__ */ jsx49("div", { children: children ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
+    /* @__PURE__ */ jsx53("div", { children: children ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
   ] });
 }
 function StnWidgetLoading({ lines = 3, className, children, ...rest }) {
-  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__loading", className), ...rest, children: children ?? /* @__PURE__ */ jsx49(StnLoadingSkeleton.Widget, { lines }) });
+  return /* @__PURE__ */ jsx53("div", { className: cn("stn-widget__loading", className), ...rest, children: children ?? /* @__PURE__ */ jsx53(StnLoadingSkeleton.Widget, { lines }) });
 }
 function StnWidgetInsetIcon({ className, size = "sm", ...rest }) {
-  return /* @__PURE__ */ jsx49(StnIconBox, { size, className: cn("stn-widget__inset-icon", className), ...rest });
+  return /* @__PURE__ */ jsx53(StnIconBox, { size, className: cn("stn-widget__inset-icon", className), ...rest });
 }
 var StnWidget = Object.assign(StnWidgetRoot, {
   Header: StnWidgetHeader,
@@ -6925,11 +7294,11 @@ import {
 // src/layouts/StnStack.tsx
 import {
   Children as Children3,
-  forwardRef as forwardRef26,
+  forwardRef as forwardRef29,
   Fragment as Fragment6,
   isValidElement as isValidElement6
 } from "react";
-import { jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs43 } 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]);
@@ -7022,7 +7391,7 @@ function spacingClassesAndStyle(spacing) {
   }
   return { classes, inlineGap };
 }
-var StnStack = forwardRef26(function StnStack2({
+var StnStack = forwardRef29(function StnStack2({
   component,
   as,
   direction = "column",
@@ -7052,12 +7421,12 @@ var StnStack = forwardRef26(function StnStack2({
   const validChildren = Children3.toArray(children).filter(Boolean);
   const renderedChildren = divider ? validChildren.map((child, index) => {
     const key = isValidElement6(child) && child.key != null ? child.key : index;
-    return /* @__PURE__ */ jsxs41(Fragment6, { children: [
+    return /* @__PURE__ */ jsxs43(Fragment6, { children: [
       index > 0 ? divider : null,
       child
     ] }, key);
   }) : children;
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx54(
     Component,
     {
       ref,
@@ -7081,7 +7450,7 @@ var StnStack = forwardRef26(function StnStack2({
 });
 
 // src/patterns/dashboard/AlertCenterDashboard.tsx
-import { jsx as jsx51, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs44 } 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" },
@@ -7090,7 +7459,7 @@ var TOP5_ROWS = [
   { label: "PRADA", percent: 68, value: "68\uAC74", grade: "default" }
 ];
 function AlertCenterDashboard({ className, appearance = "translucent", loading = false }) {
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs44(
     StnStack,
     {
       direction: "column",
@@ -7099,17 +7468,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__ */ jsx51(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs42(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__ */ jsx55(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx55(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs44(StnWidget.StatusList, { children: [
+          /* @__PURE__ */ jsx55(StnWidget.StatusItem, { label: "PTN", value: "179", showDot: false }),
+          /* @__PURE__ */ jsx55(StnWidget.StatusItem, { label: "MSPP", value: "63", showDot: false }),
+          /* @__PURE__ */ jsx55(StnWidget.StatusItem, { label: "L3\uC2A4\uC704\uCE58", value: "27", showDot: false })
         ] }) }),
-        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs42(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__ */ jsx55(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx55(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs44(StnWidget.StatusList, { children: [
+          /* @__PURE__ */ jsx55(StnWidget.StatusItem, { label: "Critical", value: "43", grade: "critical" }),
+          /* @__PURE__ */ jsx55(StnWidget.StatusItem, { label: "Major", value: "79", grade: "major" }),
+          /* @__PURE__ */ jsx55(StnWidget.StatusItem, { label: "Minor", value: "3", grade: "minor" })
         ] }) }),
-        /* @__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(
+        /* @__PURE__ */ jsx55(StnWidget, { title: "\uC77C\uC77C \uC7A5\uBE44\uBCC4 \uC7A5\uC560 TOP5", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx55(StnLoadingSkeleton.Widget, { lines: 4 }) : /* @__PURE__ */ jsx55(StnWidget.GradeRowList, { children: TOP5_ROWS.map((row) => /* @__PURE__ */ jsx55(
           StnWidget.GradeRow,
           {
             grade: row.grade,
@@ -7119,50 +7488,50 @@ function AlertCenterDashboard({ className, appearance = "translucent", loading =
           },
           row.label
         )) }) }),
-        /* @__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" }) })
+        /* @__PURE__ */ jsx55(StnWidget, { title: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx55(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsx55(StnWidget.ChartSlot, { label: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4 \uCC28\uD2B8" }) })
       ]
     }
   );
 }
 
 // src/patterns/dashboard/PubDashboardWidgetBodies.tsx
-import { jsx as jsx52, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
 function PubDisabilityStatusList({ items, summary }) {
-  return /* @__PURE__ */ jsxs43("div", { className: "ds-disability-status", children: [
-    /* @__PURE__ */ jsx52("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs45("div", { className: "ds-disability-status", children: [
+    /* @__PURE__ */ jsx56("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs45(
       "li",
       {
         className: ["ds-disability-status__item", item.grade].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsxs43("span", { children: [
-            item.showDot !== false && item.grade ? /* @__PURE__ */ jsx52("span", { className: "dot", "aria-hidden": true }) : null,
+          /* @__PURE__ */ jsxs45("span", { children: [
+            item.showDot !== false && item.grade ? /* @__PURE__ */ jsx56("span", { className: "dot", "aria-hidden": true }) : null,
             item.label
           ] }),
-          /* @__PURE__ */ jsx52("p", { children: item.value })
+          /* @__PURE__ */ jsx56("p", { children: item.value })
         ]
       },
       i
     )) }),
-    summary && summary.length > 0 ? /* @__PURE__ */ jsx52("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs43("p", { className: "ds-disability-status__value", children: [
+    summary && summary.length > 0 ? /* @__PURE__ */ jsx56("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs45("p", { className: "ds-disability-status__value", children: [
       row.label,
-      /* @__PURE__ */ jsx52("span", { children: row.value })
+      /* @__PURE__ */ jsx56("span", { children: row.value })
     ] }, i)) }) : null
   ] });
 }
 function PubTrafficTop5Bars({ rows }) {
   const maxPercent = Math.max(...rows.map((row) => row.percent), 0);
-  return /* @__PURE__ */ jsx52("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsxs43("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 })
+  return /* @__PURE__ */ jsx56("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsxs45("div", { className: ["ds-bar", row.percent === maxPercent ? "max" : ""].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx56("p", { className: "ds-bar-name", title: row.label, children: row.label }),
+    /* @__PURE__ */ jsx56("div", { className: "ds-bar-con", title: `${row.percent}%`, children: /* @__PURE__ */ jsx56("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }) }),
+    /* @__PURE__ */ jsx56("p", { className: "ds-bar-value", title: row.value, children: row.value })
   ] }, row.label)) });
 }
 function PubTop5EquipmentBars({ rows }) {
-  return /* @__PURE__ */ jsxs43("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__ */ jsxs43("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 })
+  return /* @__PURE__ */ jsxs45("div", { className: "ds-group", children: [
+    /* @__PURE__ */ jsx56("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx56("div", { className: "ds-equipment-ico", children: /* @__PURE__ */ jsx56("span", { className: "blind", children: "\uC7A5\uBE44 \uC774\uBBF8\uC9C0" }) }) }),
+    /* @__PURE__ */ jsx56("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx56("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsx56("div", { className: "ds-bar type-2", children: /* @__PURE__ */ jsxs45("div", { className: "ds-bar-con", title: `${row.percent}%`, children: [
+      /* @__PURE__ */ jsx56("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }),
+      /* @__PURE__ */ jsx56("div", { className: "ds-bar-status", children: row.status })
     ] }) }, row.label)) }) })
   ] });
 }
@@ -7171,15 +7540,15 @@ function PubChartSample({
   alt = "\uCC28\uD2B8",
   onError
 }) {
-  return /* @__PURE__ */ jsx52("div", { className: "ds-chart", children: /* @__PURE__ */ jsx52("img", { src, alt, className: "chart_sample", onError }) });
+  return /* @__PURE__ */ jsx56("div", { className: "ds-chart", children: /* @__PURE__ */ jsx56("img", { src, alt, className: "chart_sample", onError }) });
 }
 
 // src/patterns/alertCenter/StnAlertCenterPanel.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import {
   STN_ALERT_CENTER_TABS
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
-import { jsx as jsx53, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
 function resolveAlertIcon(item) {
   if (item.icon) {
     if (item.icon === "line/arrow-down") return "line/arrow-narrow-down";
@@ -7206,7 +7575,7 @@ function StnAlertCard({
 }) {
   const iconNode = resolveAlertIcon(item);
   const gradeLabel = resolveGradeLabel(item.grade);
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx57(
     StnCard,
     {
       variant: "elevated",
@@ -7215,8 +7584,8 @@ function StnAlertCard({
       interactive: true,
       className: cn("stn-alert-card", className),
       onClick,
-      children: /* @__PURE__ */ jsxs44("div", { className: "stn-alert-card__row", children: [
-        /* @__PURE__ */ jsx53(
+      children: /* @__PURE__ */ jsxs46("div", { className: "stn-alert-card__row", children: [
+        /* @__PURE__ */ jsx57(
           StnIcon,
           {
             name: iconNode,
@@ -7225,9 +7594,9 @@ function StnAlertCard({
             className: "stn-alert-card__icon"
           }
         ),
-        /* @__PURE__ */ jsxs44("div", { className: "stn-alert-card__body", children: [
-          /* @__PURE__ */ jsxs44(StnStack, { direction: "row", alignItems: "center", spacing: 1, className: "stn-alert-card__header-line", children: [
-            /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsxs46("div", { className: "stn-alert-card__body", children: [
+          /* @__PURE__ */ jsxs46(StnStack, { direction: "row", alignItems: "center", spacing: 1, className: "stn-alert-card__header-line", children: [
+            /* @__PURE__ */ jsx57(
               StnChip,
               {
                 shape: "pill",
@@ -7237,25 +7606,25 @@ function StnAlertCard({
                 children: gradeLabel
               }
             ),
-            /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsx57(
               "span",
               {
                 className: cn("stn-alert-card__title", titleOverflow),
                 title: item.title,
-                children: /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__text-inner", children: item.title })
+                children: /* @__PURE__ */ jsx57("span", { className: "stn-alert-card__text-inner", children: item.title })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs44(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", className: "stn-alert-card__desc-line", children: [
-            /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsxs46(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", className: "stn-alert-card__desc-line", children: [
+            /* @__PURE__ */ jsx57(
               "span",
               {
                 className: cn("stn-alert-card__desc", descOverflow),
                 title: item.description,
-                children: /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__text-inner", children: item.description })
+                children: /* @__PURE__ */ jsx57("span", { className: "stn-alert-card__text-inner", children: item.description })
               }
             ),
-            item.occurredAt && /* @__PURE__ */ jsxs44(
+            item.occurredAt && /* @__PURE__ */ jsxs46(
               StnChip,
               {
                 shape: "pill",
@@ -7271,9 +7640,9 @@ function StnAlertCard({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs44("div", { className: "stn-alert-card__meta", children: [
-          /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__time", children: item.time }),
-          item.unread !== false && /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsxs46("div", { className: "stn-alert-card__meta", children: [
+          /* @__PURE__ */ jsx57("span", { className: "stn-alert-card__time", children: item.time }),
+          item.unread !== false && /* @__PURE__ */ jsx57(
             "span",
             {
               className: cn(
@@ -7307,11 +7676,11 @@ function StnAlertCenterPanel({
   closeLabel = "\uB2EB\uAE30",
   className
 }) {
-  const [activeTab, setActiveTab] = useState15(defaultTab);
+  const [activeTab, setActiveTab] = useState16(defaultTab);
   const alertCount = alerts.length;
   const resolvedTitleOverflow = titleOverflow ?? textOverflow;
   const resolvedDescOverflow = descOverflow ?? textOverflow;
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs46(
     "div",
     {
       className: cn(
@@ -7323,13 +7692,13 @@ function StnAlertCenterPanel({
       ),
       "data-stn-alert-center": true,
       children: [
-        /* @__PURE__ */ jsxs44("div", { className: "stn-alert-center__header", children: [
-          /* @__PURE__ */ jsxs44("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__ */ jsxs46("div", { className: "stn-alert-center__header", children: [
+          /* @__PURE__ */ jsxs46("div", { className: "stn-alert-center__header-left", children: [
+            /* @__PURE__ */ jsx57(StnIcon, { name: "line/bell", size: 20, color: "var(--stn-primary)" }),
+            /* @__PURE__ */ jsx57("span", { className: "stn-alert-center__title", children: title }),
+            alertCount > 0 && /* @__PURE__ */ jsx57(StnChip, { shape: "pill", size: "sm", variant: "subtle", color: "primary", children: alertCount })
           ] }),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx57(
             StnSegmented,
             {
               size: "md",
@@ -7342,8 +7711,8 @@ function StnAlertCenterPanel({
               }))
             }
           ),
-          /* @__PURE__ */ jsxs44("div", { className: "stn-alert-center__header-right", children: [
-            /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsxs46("div", { className: "stn-alert-center__header-right", children: [
+            /* @__PURE__ */ jsx57(
               StnButton,
               {
                 variant: "text",
@@ -7353,8 +7722,8 @@ function StnAlertCenterPanel({
                 children: "\uBAA8\uB450 \uC77D\uC74C"
               }
             ),
-            /* @__PURE__ */ jsx53("div", { className: "stn-alert-center__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsx57("div", { className: "stn-alert-center__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx57(
               StnButton,
               {
                 icon: "line/x",
@@ -7366,14 +7735,14 @@ function StnAlertCenterPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs44(
+        /* @__PURE__ */ jsxs46(
           StnScroll,
           {
             orientation: "vertical",
             size: "thin",
             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(
+              activeTab === "error" && /* @__PURE__ */ jsx57("ul", { className: "stn-alert-center__list", children: alerts.map((item) => /* @__PURE__ */ jsx57("li", { children: /* @__PURE__ */ jsx57(
                 StnAlertCard,
                 {
                   item,
@@ -7382,35 +7751,35 @@ function StnAlertCenterPanel({
                   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__ */ jsxs44("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__ */ jsxs44("div", { className: "stn-alert-card__body", children: [
-                  /* @__PURE__ */ jsx53("span", { className: "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 }) })
+              activeTab === "work" && /* @__PURE__ */ jsx57("ul", { className: "stn-alert-center__list", children: workItems.map((row) => /* @__PURE__ */ jsx57("li", { children: /* @__PURE__ */ jsx57(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs46("div", { className: "stn-alert-card__row", children: [
+                /* @__PURE__ */ jsx57(StnIcon, { name: "line/clock", size: 24, color: "var(--stn-text-secondary)", className: "stn-alert-card__icon" }),
+                /* @__PURE__ */ jsxs46("div", { className: "stn-alert-card__body", children: [
+                  /* @__PURE__ */ jsx57("span", { className: "stn-alert-card__type-label work", children: row.typeLabel }),
+                  /* @__PURE__ */ jsx57("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx57("span", { className: "stn-alert-card__text-inner", children: row.text }) })
                 ] }),
-                /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__time", children: row.time })
+                /* @__PURE__ */ jsx57("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__ */ jsxs44("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__ */ jsxs44("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 }) })
+              activeTab === "deploy" && /* @__PURE__ */ jsx57("ul", { className: "stn-alert-center__list", children: deployItems.map((row) => /* @__PURE__ */ jsx57("li", { children: /* @__PURE__ */ jsx57(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs46("div", { className: "stn-alert-card__row", children: [
+                /* @__PURE__ */ jsx57(StnIcon, { name: "line/settings", size: 24, color: "var(--stn-secondary)", className: "stn-alert-card__icon" }),
+                /* @__PURE__ */ jsxs46("div", { className: "stn-alert-card__body", children: [
+                  /* @__PURE__ */ jsx57("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--deploy", children: row.typeLabel }),
+                  /* @__PURE__ */ jsx57("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx57("span", { className: "stn-alert-card__text-inner", children: row.text }) })
                 ] }),
-                /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__time", children: row.time })
+                /* @__PURE__ */ jsx57("span", { className: "stn-alert-card__time", children: row.time })
               ] }) }) }, row.id ?? row.text)) })
             ]
           }
         ),
-        /* @__PURE__ */ jsx53("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs44(
+        /* @__PURE__ */ jsx57("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs46(
           "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 })
+              /* @__PURE__ */ jsx57("span", { children: "\uC54C\uB9BC \uC124\uC815 \uAD00\uB9AC" }),
+              /* @__PURE__ */ jsx57(StnIcon, { name: "line/settings", size: 14 }),
+              /* @__PURE__ */ jsx57(StnIcon, { name: "line/chevron-right", size: 14 })
             ]
           }
         ) })
@@ -7420,18 +7789,18 @@ function StnAlertCenterPanel({
 }
 
 // src/patterns/alertCenter/StnAlertCenterDocPreview.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function StnAlertCenterDocPreview({
   theme = "light",
   withDocChrome = true,
   children,
   ...panelProps
 }) {
-  const panel = children ?? /* @__PURE__ */ jsx54(StnAlertCenterPanel, { ...panelProps });
+  const panel = children ?? /* @__PURE__ */ jsx58(StnAlertCenterPanel, { ...panelProps });
   if (!withDocChrome) {
-    return /* @__PURE__ */ jsx54(StnProvider, { theme, applyThemeToDocument: false, children: panel });
+    return /* @__PURE__ */ jsx58(StnProvider, { theme, applyThemeToDocument: false, 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 }) });
+  return /* @__PURE__ */ jsx58("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-theme": theme, children: /* @__PURE__ */ jsx58("div", { className: "stn-alert-center-preview-shell", children: panel }) });
 }
 
 // src/index.ts
@@ -7448,21 +7817,21 @@ import {
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
 
 // src/components/sideNav/SideNavContext.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var SideNavContext = createContext3({
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var SideNavContext = createContext4({
   collapsed: false,
   mobileOpen: false
 });
-var useSideNav = () => useContext3(SideNavContext);
+var useSideNav = () => useContext4(SideNavContext);
 
 // src/components/sideNav/StnSideNavItem.tsx
-import { forwardRef as forwardRef27 } from "react";
+import { forwardRef as forwardRef30 } from "react";
 import { STN_NAV_MENU_SUB_ICON } from "@stn-uiux/pub-ui/data/stnSideNavItem";
-import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
 function maskStyle2(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
-var StnSideNavItem = forwardRef27(function StnSideNavItem2({
+var StnSideNavItem = forwardRef30(function StnSideNavItem2({
   label,
   id,
   iconSrc,
@@ -7505,13 +7874,13 @@ var StnSideNavItem = forwardRef27(function StnSideNavItem2({
       sideNav.onSelect(id);
     }
   };
-  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ jsxs45("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
+  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ jsxs47("span", { className: "stn-side-nav-item__icon-wrap", children: [
+    /* @__PURE__ */ jsx59("span", { className: "stn-side-nav-item__icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx59("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }),
+    showDot ? /* @__PURE__ */ jsx59("span", { className: "stn-side-nav-item__dot-wrap", "aria-hidden": "true", children: /* @__PURE__ */ jsx59(StnBadge, { variant: "dot", color: "error" }) }) : 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 subIconElement = hasIcon && isSub ? /* @__PURE__ */ jsx59("span", { className: "stn-side-nav-item__sub-icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx59("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }) : null;
   const activeIconElement = isSub ? subIconElement : iconElement;
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx59(
     "button",
     {
       ref,
@@ -7530,10 +7899,10 @@ var StnSideNavItem = forwardRef27(function StnSideNavItem2({
       title: collapsed ? label : void 0,
       onClick: handleClick,
       ...rest,
-      children: /* @__PURE__ */ jsxs45("span", { className: cn("stn-side-nav-item__inner", spreadTrail && "spread"), children: [
-        /* @__PURE__ */ jsxs45("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(
+      children: /* @__PURE__ */ jsxs47("span", { className: cn("stn-side-nav-item__inner", spreadTrail && "spread"), children: [
+        /* @__PURE__ */ jsxs47("span", { className: "stn-side-nav-item__lead", children: [
+          isSub && showSubIndent ? /* @__PURE__ */ jsx59("span", { className: "stn-side-nav-item__sub-indent", "aria-hidden": "true" }) : null,
+          shouldShowSubDot ? /* @__PURE__ */ jsx59(
             "span",
             {
               className: cn(
@@ -7541,14 +7910,14 @@ var StnSideNavItem = forwardRef27(function StnSideNavItem2({
                 hasIcon && iconPosition === "left" && "compact"
               ),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__sub-dot-glyph", style: maskStyle2(STN_NAV_MENU_SUB_ICON) })
+              children: /* @__PURE__ */ jsx59("span", { className: "stn-side-nav-item__sub-dot-glyph", style: maskStyle2(STN_NAV_MENU_SUB_ICON) })
             }
           ) : null,
           iconPosition === "left" ? activeIconElement : null,
-          /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__label", children: label })
+          /* @__PURE__ */ jsx59("span", { className: "stn-side-nav-item__label", children: label })
         ] }),
         iconPosition === "right" ? activeIconElement : null,
-        renderBadge ? typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx55(
+        renderBadge ? typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx59(
           StnBadge,
           {
             badgeContent: badge,
@@ -7556,7 +7925,7 @@ var StnSideNavItem = forwardRef27(function StnSideNavItem2({
             appearance: "subtle",
             className: "stn-side-nav-item__badge"
           }
-        ) : badge ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__badge", children: badge }) : showBadgeDot ? /* @__PURE__ */ jsx55(
+        ) : badge ? /* @__PURE__ */ jsx59("span", { className: "stn-side-nav-item__badge", children: badge }) : showBadgeDot ? /* @__PURE__ */ jsx59(
           StnBadge,
           {
             variant: "dot",
@@ -7564,7 +7933,7 @@ var StnSideNavItem = forwardRef27(function StnSideNavItem2({
             className: "stn-side-nav-item__badge"
           }
         ) : null : null,
-        !isSub && showChevron && !collapsed ? /* @__PURE__ */ jsx55(
+        !isSub && showChevron && !collapsed ? /* @__PURE__ */ jsx59(
           "span",
           {
             className: cn(
@@ -7581,15 +7950,15 @@ var StnSideNavItem = forwardRef27(function StnSideNavItem2({
 });
 
 // src/components/sideNav/StnSideNavHeader.tsx
-import { forwardRef as forwardRef29 } from "react";
+import { forwardRef as forwardRef32 } from "react";
 
 // src/components/sideNav/StnSideNavLogo.tsx
-import { forwardRef as forwardRef28 } from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
-var StnSideNavLogo = forwardRef28(
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx60 } from "react/jsx-runtime";
+var StnSideNavLogo = forwardRef31(
   function StnSideNavLogo2({ className, logoProps, ...rest }, ref) {
     const { collapsed } = useSideNav();
-    return /* @__PURE__ */ jsx56(
+    return /* @__PURE__ */ jsx60(
       "div",
       {
         ref,
@@ -7600,7 +7969,7 @@ var StnSideNavLogo = forwardRef28(
         ),
         title: "InfoMap",
         ...rest,
-        children: /* @__PURE__ */ jsx56(
+        children: /* @__PURE__ */ jsx60(
           StnLogo,
           {
             variant: collapsed ? "onlyimg" : "horizontal",
@@ -7614,8 +7983,8 @@ var StnSideNavLogo = forwardRef28(
 );
 
 // src/components/sideNav/StnSideNavHeader.tsx
-import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
-var StnSideNavHeader = forwardRef29(function StnSideNavHeader2({
+import { Fragment as Fragment7, jsx as jsx61, jsxs as jsxs48 } from "react/jsx-runtime";
+var StnSideNavHeader = forwardRef32(function StnSideNavHeader2({
   children,
   border = false,
   hasBorder = false,
@@ -7627,7 +7996,7 @@ var StnSideNavHeader = forwardRef29(function StnSideNavHeader2({
   const { collapsed, onToggleCollapse, isDrawer, setMobileOpen } = useSideNav();
   const withBorder = Boolean(border || hasBorder);
   const shouldShowClose = showClose ?? Boolean(isDrawer);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx61(
     "div",
     {
       ref,
@@ -7638,9 +8007,9 @@ var StnSideNavHeader = forwardRef29(function StnSideNavHeader2({
         className
       ),
       ...rest,
-      children: children ?? /* @__PURE__ */ jsxs46(Fragment7, { children: [
-        /* @__PURE__ */ jsx57(StnSideNavLogo, {}),
-        shouldShowClose ? /* @__PURE__ */ jsx57(
+      children: children ?? /* @__PURE__ */ jsxs48(Fragment7, { children: [
+        /* @__PURE__ */ jsx61(StnSideNavLogo, {}),
+        shouldShowClose ? /* @__PURE__ */ jsx61(
           StnButton,
           {
             size: "sm",
@@ -7652,7 +8021,7 @@ var StnSideNavHeader = forwardRef29(function StnSideNavHeader2({
             className: "stn-side-nav__collapse-btn",
             onClick: () => setMobileOpen?.(false)
           }
-        ) : showToggle ? /* @__PURE__ */ jsx57(
+        ) : showToggle ? /* @__PURE__ */ jsx61(
           StnButton,
           {
             size: "sm",
@@ -7671,16 +8040,16 @@ var StnSideNavHeader = forwardRef29(function StnSideNavHeader2({
 });
 
 // src/components/sideNav/StnSideNavMenu.tsx
-import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx58 } from "react/jsx-runtime";
-var StnSideNavMenu = forwardRef30(function StnSideNavMenu2({
+import { forwardRef as forwardRef33 } from "react";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var StnSideNavMenu = forwardRef33(function StnSideNavMenu2({
   children,
   className,
   scrollSize = "thin",
   scrollColor = "fade",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx62(
     "nav",
     {
       ref,
@@ -7701,13 +8070,13 @@ var StnSideNavMenu = forwardRef30(function StnSideNavMenu2({
 
 // src/components/sideNav/StnSideNavGroup.tsx
 import {
-  forwardRef as forwardRef31,
-  useEffect as useEffect10,
-  useRef as useRef7,
-  useState as useState16
+  forwardRef as forwardRef34,
+  useEffect as useEffect11,
+  useRef as useRef8,
+  useState as useState17
 } from "react";
-import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
-var StnSideNavGroup = forwardRef31(function StnSideNavGroup2({
+import { jsx as jsx63, jsxs as jsxs49 } from "react/jsx-runtime";
+var StnSideNavGroup = forwardRef34(function StnSideNavGroup2({
   label,
   parent,
   direction = "down",
@@ -7723,13 +8092,13 @@ var StnSideNavGroup = forwardRef31(function StnSideNavGroup2({
   ...rest
 }, ref) {
   const { collapsed } = useSideNav();
-  const [internalOpen, setInternalOpen] = useState16(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState17(defaultOpen);
   const isOpen = openProp ?? internalOpen;
   const isDropdown = Boolean(dropdown || variant === "dropdown");
   const isTransparent = dropdownVariant === "transparent" || dropdownBackground === false;
   const isUp = direction === "up";
-  const groupRef = useRef7(null);
-  useEffect10(() => {
+  const groupRef = useRef8(null);
+  useEffect11(() => {
     if (!isDropdown || !isOpen) return;
     const handlePointerDown = (e) => {
       if (groupRef.current && !groupRef.current.contains(e.target)) {
@@ -7751,7 +8120,7 @@ var StnSideNavGroup = forwardRef31(function StnSideNavGroup2({
     }
     onOpenChange?.(next);
   };
-  const subnavNode = children && (!collapsed && isOpen) ? /* @__PURE__ */ jsx59(
+  const subnavNode = children && (!collapsed && isOpen) ? /* @__PURE__ */ jsx63(
     "div",
     {
       className: cn(
@@ -7766,7 +8135,7 @@ var StnSideNavGroup = forwardRef31(function StnSideNavGroup2({
       children
     }
   ) : null;
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs49(
     "div",
     {
       ref: (node) => {
@@ -7787,7 +8156,7 @@ var StnSideNavGroup = forwardRef31(function StnSideNavGroup2({
       "aria-label": typeof label === "string" ? label : void 0,
       ...rest,
       children: [
-        label && !collapsed ? /* @__PURE__ */ jsx59("span", { className: "stn-side-nav__group-label", onClick: handleToggle, children: label }) : null,
+        label && !collapsed ? /* @__PURE__ */ jsx63("span", { className: "stn-side-nav__group-label", onClick: handleToggle, children: label }) : null,
         isUp ? subnavNode : null,
         parent,
         !isUp ? subnavNode : null
@@ -7797,10 +8166,10 @@ var StnSideNavGroup = forwardRef31(function StnSideNavGroup2({
 });
 
 // src/components/sideNav/StnSideNavSpacer.tsx
-import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx60 } from "react/jsx-runtime";
-var StnSideNavSpacer = forwardRef32(function StnSideNavSpacer2({ className, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsx60(
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx64 } from "react/jsx-runtime";
+var StnSideNavSpacer = forwardRef35(function StnSideNavSpacer2({ className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx64(
     "div",
     {
       ref,
@@ -7813,10 +8182,10 @@ var StnSideNavSpacer = forwardRef32(function StnSideNavSpacer2({ className, styl
 });
 
 // src/components/sideNav/StnSideNavFooter.tsx
-import { forwardRef as forwardRef33 } from "react";
-import { jsx as jsx61 } from "react/jsx-runtime";
-var StnSideNavFooter = forwardRef33(function StnSideNavFooter2({ curved = false, children, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx61(
+import { forwardRef as forwardRef36 } from "react";
+import { jsx as jsx65 } from "react/jsx-runtime";
+var StnSideNavFooter = forwardRef36(function StnSideNavFooter2({ curved = false, children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx65(
     "nav",
     {
       ref,
@@ -7829,12 +8198,12 @@ var StnSideNavFooter = forwardRef33(function StnSideNavFooter2({ curved = false,
 });
 
 // src/components/sideNav/StnSideNavToggle.tsx
-import { forwardRef as forwardRef34 } from "react";
-import { jsx as jsx62 } from "react/jsx-runtime";
-var StnSideNavToggle = forwardRef34(
+import { forwardRef as forwardRef37 } from "react";
+import { jsx as jsx66 } from "react/jsx-runtime";
+var StnSideNavToggle = forwardRef37(
   function StnSideNavToggle2({ className, onClick, ...rest }, ref) {
     const { collapsed, onToggleCollapse } = useSideNav();
-    return /* @__PURE__ */ jsx62(
+    return /* @__PURE__ */ jsx66(
       "button",
       {
         ref,
@@ -7847,7 +8216,7 @@ var StnSideNavToggle = forwardRef34(
         "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__ */ jsx62(
+        children: /* @__PURE__ */ jsx66(
           "svg",
           {
             width: "12",
@@ -7858,7 +8227,7 @@ var StnSideNavToggle = forwardRef34(
             strokeWidth: "2.5",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsx62("path", { d: "M9 18l6-6-6-6" })
+            children: /* @__PURE__ */ jsx66("path", { d: "M9 18l6-6-6-6" })
           }
         )
       }
@@ -7867,30 +8236,30 @@ var StnSideNavToggle = forwardRef34(
 );
 
 // src/components/sideNav/StnSideNavWatermark.tsx
-import { forwardRef as forwardRef35 } from "react";
-import { jsx as jsx63 } from "react/jsx-runtime";
-var StnSideNavWatermark = forwardRef35(
+import { forwardRef as forwardRef38 } from "react";
+import { jsx as jsx67 } from "react/jsx-runtime";
+var StnSideNavWatermark = forwardRef38(
   function StnSideNavWatermark2({ size = "xl", theme, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsx67(
       "div",
       {
         ref,
         className: cn("stn-side-nav__watermark", className),
         "aria-hidden": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx63(StnLogo, { variant: "watermark", size, theme })
+        children: /* @__PURE__ */ jsx67(StnLogo, { variant: "watermark", size, theme })
       }
     );
   }
 );
 
 // src/components/sideNav/StnSideNavMobileTrigger.tsx
-import { forwardRef as forwardRef36 } from "react";
-import { jsx as jsx64, jsxs as jsxs48 } from "react/jsx-runtime";
-var StnSideNavMobileTrigger = forwardRef36(
+import { forwardRef as forwardRef39 } from "react";
+import { jsx as jsx68, jsxs as jsxs50 } from "react/jsx-runtime";
+var StnSideNavMobileTrigger = forwardRef39(
   function StnSideNavMobileTrigger2({ floating = false, className, children, onClick, ...rest }, ref) {
     const { onToggleMobileOpen, mobileOpen } = useSideNav();
-    return /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx68(
       "button",
       {
         ref,
@@ -7908,10 +8277,10 @@ var StnSideNavMobileTrigger = forwardRef36(
           onToggleMobileOpen?.();
         },
         ...rest,
-        children: children ?? /* @__PURE__ */ jsxs48("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx64("span", {}),
-          /* @__PURE__ */ jsx64("span", {}),
-          /* @__PURE__ */ jsx64("span", {})
+        children: children ?? /* @__PURE__ */ jsxs50("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx68("span", {}),
+          /* @__PURE__ */ jsx68("span", {}),
+          /* @__PURE__ */ jsx68("span", {})
         ] })
       }
     );
@@ -7920,12 +8289,12 @@ var StnSideNavMobileTrigger = forwardRef36(
 
 // src/components/sideNav/StnSideNavSub.tsx
 import {
-  forwardRef as forwardRef37
+  forwardRef as forwardRef40
 } from "react";
-import { jsx as jsx65 } from "react/jsx-runtime";
-var StnSideNavSub = forwardRef37(
+import { jsx as jsx69 } from "react/jsx-runtime";
+var StnSideNavSub = forwardRef40(
   function StnSideNavSub2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx69(
       "div",
       {
         ref,
@@ -7938,7 +8307,7 @@ var StnSideNavSub = forwardRef37(
     );
   }
 );
-var StnSideNavSubItem = forwardRef37(
+var StnSideNavSubItem = forwardRef40(
   function StnSideNavSubItem2({
     variant = "ghost",
     size = "md",
@@ -7954,14 +8323,14 @@ var StnSideNavSubItem = forwardRef37(
     const { collapsed } = useSideNav();
     const content = children ?? label;
     const computedTitle = title ?? (typeof content === "string" ? content : void 0);
-    const resolvedIcon = icon ?? (iconSrc ? /* @__PURE__ */ jsx65("span", { className: "stn-side-nav__sub-icon", children: /* @__PURE__ */ jsx65(
+    const resolvedIcon = icon ?? (iconSrc ? /* @__PURE__ */ jsx69("span", { className: "stn-side-nav__sub-icon", children: /* @__PURE__ */ jsx69(
       "span",
       {
         className: "stn-side-nav__sub-glyph",
         style: { maskImage: `url('${iconSrc}')`, WebkitMaskImage: `url('${iconSrc}')` }
       }
     ) }) : null);
-    return /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx69(
       StnButton,
       {
         ref,
@@ -7980,9 +8349,9 @@ var StnSideNavSubItem = forwardRef37(
 );
 
 // src/components/sideNav/StnSideNavSubNav.tsx
-import { forwardRef as forwardRef38 } from "react";
-import { jsx as jsx66 } from "react/jsx-runtime";
-var StnSideNavSubNav = forwardRef38(
+import { forwardRef as forwardRef41 } from "react";
+import { jsx as jsx70 } from "react/jsx-runtime";
+var StnSideNavSubNav = forwardRef41(
   function StnSideNavSubNav2({
     dropdown = false,
     direction = "down",
@@ -7994,7 +8363,7 @@ var StnSideNavSubNav = forwardRef38(
   }, ref) {
     const isUp = direction === "up";
     const isTransparent = variant === "transparent" || background === false;
-    return /* @__PURE__ */ jsx66(
+    return /* @__PURE__ */ jsx70(
       "div",
       {
         ref,
@@ -8017,17 +8386,17 @@ var StnSideNavSubNav = forwardRef38(
 
 // src/patterns/sideNav/StnSideNavigation.tsx
 import {
-  forwardRef as forwardRef39,
-  useCallback as useCallback8,
+  forwardRef as forwardRef42,
+  useCallback as useCallback9,
   useMemo as useMemo4,
-  useState as useState17
+  useState as useState18
 } from "react";
-import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs51 } from "react/jsx-runtime";
 function useControllableState(controlledValue, defaultValue, onChange) {
-  const [internalState, setInternalState] = useState17(defaultValue);
+  const [internalState, setInternalState] = useState18(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalState;
-  const setValue = useCallback8(
+  const setValue = useCallback9(
     (next) => {
       if (!isControlled) {
         setInternalState(next);
@@ -8038,7 +8407,7 @@ function useControllableState(controlledValue, defaultValue, onChange) {
   );
   return [value, setValue];
 }
-var StnSideNavigationRoot = forwardRef39(function StnSideNavigationRoot2({
+var StnSideNavigationRoot = forwardRef42(function StnSideNavigationRoot2({
   variant: variantProp,
   appearance,
   drawerVariant: drawerVariantProp,
@@ -8076,10 +8445,10 @@ var StnSideNavigationRoot = forwardRef39(function StnSideNavigationRoot2({
     defaultMobileOpen,
     onMobileOpenChange
   );
-  const handleToggleCollapse = useCallback8(() => {
+  const handleToggleCollapse = useCallback9(() => {
     setCollapsed(!collapsed);
   }, [collapsed, setCollapsed]);
-  const handleToggleMobileOpen = useCallback8(() => {
+  const handleToggleMobileOpen = useCallback9(() => {
     setMobileOpen(!mobileOpen);
   }, [mobileOpen, setMobileOpen]);
   const isDrawerMode = Boolean(drawer || responsiveDrawer && mobileOpen);
@@ -8099,9 +8468,9 @@ var StnSideNavigationRoot = forwardRef39(function StnSideNavigationRoot2({
     }),
     [isEffectiveCollapsed, activeId, setActiveId, handleToggleCollapse, mobileOpen, handleToggleMobileOpen, setMobileOpen, isDrawerMode]
   );
-  return /* @__PURE__ */ jsxs49(SideNavContext.Provider, { value: contextValue, children: [
-    showMobileTrigger && /* @__PURE__ */ jsx67(StnSideNavMobileTrigger, { floating: true }),
-    (drawer || responsiveDrawer) && /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsxs51(SideNavContext.Provider, { value: contextValue, children: [
+    showMobileTrigger && /* @__PURE__ */ jsx71(StnSideNavMobileTrigger, { floating: true }),
+    (drawer || responsiveDrawer) && /* @__PURE__ */ jsx71(
       "div",
       {
         className: cn("stn-side-nav__backdrop", mobileOpen && "is-open"),
@@ -8109,7 +8478,7 @@ var StnSideNavigationRoot = forwardRef39(function StnSideNavigationRoot2({
         "aria-hidden": !mobileOpen
       }
     ),
-    /* @__PURE__ */ jsx67(
+    /* @__PURE__ */ jsx71(
       "aside",
       {
         ref,
@@ -8150,15 +8519,15 @@ var StnSideNavigation = Object.assign(StnSideNavigationRoot, {
 // src/components/StnBreadcrumb.tsx
 import {
   Fragment as Fragment8,
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useId as useId16,
-  useRef as useRef8,
-  useState as useState18
+  useRef as useRef9,
+  useState as useState19
 } from "react";
 import {
   STN_BREADCRUMB_ICON_SRC
 } from "@stn-uiux/pub-ui/data/stnBreadcrumb";
-import { Fragment as Fragment9, jsx as jsx68, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx72, jsxs as jsxs52 } from "react/jsx-runtime";
 function maskStyle3(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
@@ -8171,13 +8540,13 @@ function hasSegmentMenu(item) {
   return Boolean(item.menu || item.menuItems && item.menuItems.length > 0);
 }
 function BreadcrumbSeparator() {
-  return /* @__PURE__ */ jsx68("li", { className: "separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx68("span", { style: maskStyle3(STN_BREADCRUMB_ICON_SRC.separator) }) });
+  return /* @__PURE__ */ jsx72("li", { className: "separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx72("span", { style: maskStyle3(STN_BREADCRUMB_ICON_SRC.separator) }) });
 }
 function BreadcrumbIcon({ src }) {
-  return /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__icon-glyph", style: maskStyle3(src), "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx72("span", { className: "stn-breadcrumb__icon-glyph", style: maskStyle3(src), "aria-hidden": "true" });
 }
 function BreadcrumbCaret() {
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx72(
     "span",
     {
       className: "stn-breadcrumb__caret",
@@ -8191,10 +8560,10 @@ function SegmentContent({
   label,
   menu
 }) {
-  return /* @__PURE__ */ jsxs50(Fragment9, { children: [
-    iconSrc ? /* @__PURE__ */ jsx68(BreadcrumbIcon, { src: iconSrc }) : null,
-    /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__label", children: label }),
-    menu ? /* @__PURE__ */ jsx68(BreadcrumbCaret, {}) : null
+  return /* @__PURE__ */ jsxs52(Fragment9, { children: [
+    iconSrc ? /* @__PURE__ */ jsx72(BreadcrumbIcon, { src: iconSrc }) : null,
+    /* @__PURE__ */ jsx72("span", { className: "stn-breadcrumb__label", children: label }),
+    menu ? /* @__PURE__ */ jsx72(BreadcrumbCaret, {}) : null
   ] });
 }
 function BreadcrumbMenuList({
@@ -8202,7 +8571,7 @@ function BreadcrumbMenuList({
   items,
   onPick
 }) {
-  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(
+  return /* @__PURE__ */ jsx72("ul", { id, className: "stn-breadcrumb__menu", role: "menu", children: items.map((option) => /* @__PURE__ */ jsx72("li", { role: "none", children: option.href ? /* @__PURE__ */ jsx72(
     "a",
     {
       role: "menuitem",
@@ -8214,7 +8583,7 @@ function BreadcrumbMenuList({
       },
       children: option.label
     }
-  ) : /* @__PURE__ */ jsx68(
+  ) : /* @__PURE__ */ jsx72(
     "button",
     {
       type: "button",
@@ -8229,8 +8598,8 @@ function BreadcrumbMenuList({
   ) }, option.id)) });
 }
 function useDismissibleMenu(open, onClose) {
-  const rootRef = useRef8(null);
-  useEffect11(() => {
+  const rootRef = useRef9(null);
+  useEffect12(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (!rootRef.current?.contains(event.target)) onClose();
@@ -8252,19 +8621,19 @@ function BreadcrumbSegment({
   isCurrent
 }) {
   const menuId = useId16();
-  const [open, setOpen] = useState18(false);
+  const [open, setOpen] = useState19(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__ */ jsx68(SegmentContent, { iconSrc, label: item.label, menu: showMenu });
+  const content = /* @__PURE__ */ jsx72(SegmentContent, { iconSrc, label: item.label, menu: showMenu });
   if (isCurrent) {
-    return /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
+    return /* @__PURE__ */ jsx72("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
   }
   if (canOpenMenu) {
-    return /* @__PURE__ */ jsxs50("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
-      /* @__PURE__ */ jsx68(
+    return /* @__PURE__ */ jsxs52("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
+      /* @__PURE__ */ jsx72(
         "button",
         {
           type: "button",
@@ -8280,7 +8649,7 @@ function BreadcrumbSegment({
           children: content
         }
       ),
-      open ? /* @__PURE__ */ jsx68(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
+      open ? /* @__PURE__ */ jsx72(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
     ] });
   }
   if (item.menu || item.onClick) {
@@ -8292,7 +8661,7 @@ function BreadcrumbSegment({
       "aria-haspopup": item.menu ? "menu" : void 0,
       "aria-expanded": item.menu ? false : void 0
     };
-    return /* @__PURE__ */ jsx68("button", { ...buttonProps, children: content });
+    return /* @__PURE__ */ jsx72("button", { ...buttonProps, children: content });
   }
   if (item.href) {
     const linkProps = {
@@ -8301,17 +8670,17 @@ function BreadcrumbSegment({
       onClick: item.onClick,
       "aria-label": item.label
     };
-    return /* @__PURE__ */ jsx68("a", { ...linkProps, children: content });
+    return /* @__PURE__ */ jsx72("a", { ...linkProps, children: content });
   }
-  return /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__segment", "aria-label": item.label, children: content });
+  return /* @__PURE__ */ jsx72("span", { className: "stn-breadcrumb__segment", "aria-label": item.label, children: content });
 }
 function BreadcrumbBack({
   label,
   href,
   onClick
 }) {
-  const content = /* @__PURE__ */ jsxs50(Fragment9, { children: [
-    /* @__PURE__ */ jsx68(
+  const content = /* @__PURE__ */ jsxs52(Fragment9, { children: [
+    /* @__PURE__ */ jsx72(
       "span",
       {
         className: "stn-breadcrumb__back-glyph",
@@ -8319,12 +8688,12 @@ function BreadcrumbBack({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__label", children: label })
+    /* @__PURE__ */ jsx72("span", { className: "stn-breadcrumb__label", children: label })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx68("a", { className: "stn-breadcrumb__back", href, onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
+    return /* @__PURE__ */ jsx72("a", { className: "stn-breadcrumb__back", href, 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 });
+  return /* @__PURE__ */ jsx72("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) {
@@ -8346,7 +8715,7 @@ function BreadcrumbCollapsed({
   items,
   menuId
 }) {
-  const [open, setOpen] = useState18(false);
+  const [open, setOpen] = useState19(false);
   const rootRef = useDismissibleMenu(open, () => setOpen(false));
   const menuItems = items.map((item) => ({
     id: item.id,
@@ -8355,8 +8724,8 @@ function BreadcrumbCollapsed({
     onClick: item.onClick,
     current: item.current
   }));
-  return /* @__PURE__ */ jsxs50("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
-    /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsxs52("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
+    /* @__PURE__ */ jsx72(
       "button",
       {
         type: "button",
@@ -8369,7 +8738,7 @@ function BreadcrumbCollapsed({
         children: "\u22EF"
       }
     ),
-    open ? /* @__PURE__ */ jsx68(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
+    open ? /* @__PURE__ */ jsx72(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
   ] });
 }
 function StnBreadcrumb({
@@ -8401,8 +8770,8 @@ function StnBreadcrumb({
   const lastId = items[items.length - 1]?.id;
   const renderTrailItem = (item) => {
     const isCurrent = Boolean(item.current) || item.id === lastId;
-    const segment = /* @__PURE__ */ jsx68(BreadcrumbSegment, { item, isCurrent });
-    return /* @__PURE__ */ jsx68(
+    const segment = /* @__PURE__ */ jsx72(BreadcrumbSegment, { item, isCurrent });
+    return /* @__PURE__ */ jsx72(
       "li",
       {
         className: cn(
@@ -8413,27 +8782,27 @@ function StnBreadcrumb({
       }
     );
   };
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx72(
     "nav",
     {
       className: cn("stn-breadcrumb", size, variant === "chip" && "chip", className),
       "aria-label": "Breadcrumb",
-      children: /* @__PURE__ */ jsxs50("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__ */ jsxs50("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 })
+      children: /* @__PURE__ */ jsxs52("ol", { className: "stn-breadcrumb__list", children: [
+        currentItem ? /* @__PURE__ */ jsx72("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--back", children: /* @__PURE__ */ jsx72(BreadcrumbBack, { label: currentItem.label, href: backHref, onClick: backOnClick }) }) : null,
+        showHome ? /* @__PURE__ */ jsx72("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs52("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
+          /* @__PURE__ */ jsx72(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
+          /* @__PURE__ */ jsx72("span", { className: "blind", children: homeLabel })
         ] }) }) : null,
-        head.map((item, index) => /* @__PURE__ */ jsxs50(Fragment8, { children: [
-          showHome || index > 0 ? /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}) : null,
+        head.map((item, index) => /* @__PURE__ */ jsxs52(Fragment8, { children: [
+          showHome || index > 0 ? /* @__PURE__ */ jsx72(BreadcrumbSeparator, {}) : null,
           renderTrailItem(item)
         ] }, item.id)),
-        hidden.length > 0 ? /* @__PURE__ */ jsxs50(Fragment9, { children: [
-          /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}),
-          /* @__PURE__ */ jsx68(BreadcrumbCollapsed, { items: hidden, menuId })
+        hidden.length > 0 ? /* @__PURE__ */ jsxs52(Fragment9, { children: [
+          /* @__PURE__ */ jsx72(BreadcrumbSeparator, {}),
+          /* @__PURE__ */ jsx72(BreadcrumbCollapsed, { items: hidden, menuId })
         ] }) : null,
-        tail.map((item) => /* @__PURE__ */ jsxs50(Fragment8, { children: [
-          /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}),
+        tail.map((item) => /* @__PURE__ */ jsxs52(Fragment8, { children: [
+          /* @__PURE__ */ jsx72(BreadcrumbSeparator, {}),
           renderTrailItem(item)
         ] }, item.id))
       ] })
@@ -8442,9 +8811,9 @@ function StnBreadcrumb({
 }
 
 // src/components/StnHeaderTitle.tsx
-import { useEffect as useEffect12, useState as useState19 } from "react";
+import { useEffect as useEffect13, useState as useState20 } from "react";
 import { STN_HEADER_TITLE_FRAME } from "@stn-uiux/pub-ui/data/stnHeaderTitle";
-import { jsx as jsx69, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
 var KO_WEEKDAY_SHORT = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 var KO_WEEKDAY_LONG = [
   "\uC77C\uC694\uC77C",
@@ -8483,8 +8852,8 @@ function formatStnHeaderTitleTime(date, options) {
 }
 function HeaderTitleFrame({ preview = false }) {
   const frameClass = preview ? "stn-header-title__frame-preview" : "stn-header-title__frame";
-  return /* @__PURE__ */ jsxs51("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(
+  return /* @__PURE__ */ jsxs53("div", { className: frameClass, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx73("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--outer", children: /* @__PURE__ */ jsx73(
       "img",
       {
         className: "stn-header-title__frame-img",
@@ -8493,8 +8862,8 @@ function HeaderTitleFrame({ preview = false }) {
         draggable: false
       }
     ) }),
-    /* @__PURE__ */ jsxs51("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
-      /* @__PURE__ */ jsx69(
+    /* @__PURE__ */ jsxs53("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
+      /* @__PURE__ */ jsx73(
         "img",
         {
           className: "stn-header-title__frame-img stn-header-title__frame-img--dark",
@@ -8503,7 +8872,7 @@ function HeaderTitleFrame({ preview = false }) {
           draggable: false
         }
       ),
-      /* @__PURE__ */ jsx69(
+      /* @__PURE__ */ jsx73(
         "img",
         {
           className: "stn-header-title__frame-img stn-header-title__frame-img--light",
@@ -8516,11 +8885,11 @@ function HeaderTitleFrame({ preview = false }) {
   ] });
 }
 function StnHeaderTitleFramePreview({ className }) {
-  return /* @__PURE__ */ jsx69("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx69(HeaderTitleFrame, { preview: true }) });
+  return /* @__PURE__ */ jsx73("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx73(HeaderTitleFrame, { preview: true }) });
 }
 function useLiveClock(enabled) {
-  const [now, setNow] = useState19(() => /* @__PURE__ */ new Date());
-  useEffect12(() => {
+  const [now, setNow] = useState20(() => /* @__PURE__ */ new Date());
+  useEffect13(() => {
     if (!enabled) return;
     const id = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
     return () => window.clearInterval(id);
@@ -8532,35 +8901,35 @@ function StnHeaderTitleMainText({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx69("h1", { className: cn("stn-header-title__text", className), ...rest, children });
+  return /* @__PURE__ */ jsx73("h1", { className: cn("stn-header-title__text", className), ...rest, children });
 }
 function StnHeaderTitleSubText({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx69("span", { className: cn("stn-header-title__sub-text", className), ...rest, children });
+  return /* @__PURE__ */ jsx73("span", { className: cn("stn-header-title__sub-text", className), ...rest, children });
 }
 function StnHeaderTitleDate({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx69("time", { className: cn("stn-header-title__date", className), ...rest, children });
+  return /* @__PURE__ */ jsx73("time", { className: cn("stn-header-title__date", className), ...rest, children });
 }
 function StnHeaderTitleWeekday({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx69("span", { className: cn("stn-header-title__weekday", className), ...rest, children });
+  return /* @__PURE__ */ jsx73("span", { className: cn("stn-header-title__weekday", className), ...rest, children });
 }
 function StnHeaderTitleTime({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx69("span", { className: cn("stn-header-title__time", className), "aria-label": "\uD604\uC7AC \uC2DC\uAC01", ...rest, children });
+  return /* @__PURE__ */ jsx73("span", { className: cn("stn-header-title__time", className), "aria-label": "\uD604\uC7AC \uC2DC\uAC01", ...rest, children });
 }
 function StnHeaderTitleClock({
   className,
@@ -8583,7 +8952,7 @@ function StnHeaderTitleClock({
 }) {
   const now = useLiveClock(live);
   if (children != null) {
-    return /* @__PURE__ */ jsxs51(
+    return /* @__PURE__ */ jsxs53(
       "header",
       {
         className: cn(
@@ -8595,8 +8964,8 @@ function StnHeaderTitleClock({
         ),
         ...rest,
         children: [
-          framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
-          /* @__PURE__ */ jsx69("div", { className: "stn-header-title__content", children })
+          framed ? /* @__PURE__ */ jsx73(HeaderTitleFrame, {}) : null,
+          /* @__PURE__ */ jsx73("div", { className: "stn-header-title__content", children })
         ]
       }
     );
@@ -8626,7 +8995,7 @@ function StnHeaderTitleClock({
       resolvedTime = formatStnHeaderTitleTime(now, { showSeconds });
     }
   }
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs53(
     "header",
     {
       className: cn(
@@ -8638,11 +9007,11 @@ function StnHeaderTitleClock({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs51("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
+        framed ? /* @__PURE__ */ jsx73(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsxs53("div", { className: "stn-header-title__content", children: [
+          resolvedDate ? /* @__PURE__ */ jsx73("time", { className: "stn-header-title__date", dateTime: resolvedDate, children: resolvedDate }) : null,
+          showWeekdayOnly ? /* @__PURE__ */ jsx73("span", { className: "stn-header-title__weekday", children: resolvedWeekday }) : null,
+          resolvedTime ? /* @__PURE__ */ jsx73("span", { className: "stn-header-title__time", "aria-label": "\uD604\uC7AC \uC2DC\uAC01", children: resolvedTime }) : null
         ] })
       ]
     }
@@ -8659,7 +9028,7 @@ function StnHeaderTitleDual({
   ...rest
 }) {
   const resolvedMain = mainText ?? title ?? children;
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs53(
     "header",
     {
       className: cn(
@@ -8671,10 +9040,10 @@ function StnHeaderTitleDual({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs51("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
+        framed ? /* @__PURE__ */ jsx73(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsxs53("div", { className: "stn-header-title__content", children: [
+          subText != null ? /* @__PURE__ */ jsx73("span", { className: "stn-header-title__sub-text", children: subText }) : null,
+          resolvedMain != null ? typeof resolvedMain === "string" || typeof resolvedMain === "number" ? /* @__PURE__ */ jsx73("h1", { className: "stn-header-title__text", children: resolvedMain }) : resolvedMain : null
         ] })
       ]
     }
@@ -8689,7 +9058,7 @@ function StnHeaderTitleText({
   ...rest
 }) {
   const resolved = title ?? children;
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs53(
     "header",
     {
       className: cn(
@@ -8701,20 +9070,20 @@ function StnHeaderTitleText({
       ),
       ...rest,
       children: [
-        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 })
+        framed ? /* @__PURE__ */ jsx73(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsx73("div", { className: "stn-header-title__content", children: typeof resolved === "string" || typeof resolved === "number" ? /* @__PURE__ */ jsx73("h1", { className: "stn-header-title__text", children: resolved }) : resolved })
       ]
     }
   );
 }
 function StnHeaderTitleRoot(props) {
   if (props.variant === "clock") {
-    return /* @__PURE__ */ jsx69(StnHeaderTitleClock, { ...props });
+    return /* @__PURE__ */ jsx73(StnHeaderTitleClock, { ...props });
   }
   if (props.variant === "dual" || "subText" in props && props.subText != null) {
-    return /* @__PURE__ */ jsx69(StnHeaderTitleDual, { ...props });
+    return /* @__PURE__ */ jsx73(StnHeaderTitleDual, { ...props });
   }
-  return /* @__PURE__ */ jsx69(StnHeaderTitleText, { ...props });
+  return /* @__PURE__ */ jsx73(StnHeaderTitleText, { ...props });
 }
 var StnHeaderTitle = Object.assign(StnHeaderTitleRoot, {
   Text: StnHeaderTitleMainText,
@@ -8727,10 +9096,10 @@ var StnHeaderTitle = Object.assign(StnHeaderTitleRoot, {
 
 // src/layouts/StnContainer.tsx
 import {
-  forwardRef as forwardRef40
+  forwardRef as forwardRef43
 } from "react";
-import { jsx as jsx70 } from "react/jsx-runtime";
-var StnContainer = forwardRef40(function StnContainer2({
+import { jsx as jsx74 } from "react/jsx-runtime";
+var StnContainer = forwardRef43(function StnContainer2({
   component,
   as,
   maxWidth = "lg",
@@ -8745,7 +9114,7 @@ var StnContainer = forwardRef40(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__ */ jsx70(
+  return /* @__PURE__ */ jsx74(
     Component,
     {
       ref,
@@ -8768,8 +9137,8 @@ var StnContainer = forwardRef40(function StnContainer2({
 });
 
 // src/layouts/StnGrid.tsx
-import { forwardRef as forwardRef41 } from "react";
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { forwardRef as forwardRef44 } from "react";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var BREAKPOINTS2 = ["xs", "sm", "md", "lg", "xl"];
 var SPACING_CLASS = {
   "0": "0",
@@ -8835,7 +9204,7 @@ function sizeClasses(size) {
   }
   return classes;
 }
-var StnGrid = forwardRef41(function StnGrid2({
+var StnGrid = forwardRef44(function StnGrid2({
   component,
   as,
   container = false,
@@ -8855,7 +9224,7 @@ var StnGrid = forwardRef41(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__ */ jsx71(
+  return /* @__PURE__ */ jsx75(
     Component,
     {
       ref,
@@ -8879,7 +9248,7 @@ var StnGrid = forwardRef41(function StnGrid2({
 });
 
 // src/layouts/StnLayerShell.tsx
-import { jsx as jsx72, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
 function StnLayerShell({
   gnb,
   gnbSide = "left",
@@ -8900,7 +9269,7 @@ function StnLayerShell({
   const resolvedMainContent = layer1 ?? children;
   const resolvedModal = layer2;
   const isGnbRight = gnbSide === "right";
-  return /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsxs54(
     "div",
     {
       id: wrapId,
@@ -8909,8 +9278,8 @@ function StnLayerShell({
       className: cn("stn-wrap", isGnbRight && "stn-wrap--gnb-right", wrapClassName),
       children: [
         layer0,
-        utilities ? /* @__PURE__ */ jsx72("div", { className: "stn-page-utilities", "data-stn-layer-role": "utility", children: utilities }) : null,
-        /* @__PURE__ */ jsxs52(
+        utilities ? /* @__PURE__ */ jsx76("div", { className: "stn-page-utilities", "data-stn-layer-role": "utility", children: utilities }) : null,
+        /* @__PURE__ */ jsxs54(
           "main",
           {
             id: containerId,
@@ -8919,9 +9288,9 @@ function StnLayerShell({
             className: cn("stn-layer-1", scrollable && "scroll", containerClassName),
             children: [
               !isGnbRight && gnb,
-              /* @__PURE__ */ jsxs52("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 })
+              /* @__PURE__ */ jsxs54("div", { className: "stn-layer-1__main", children: [
+                header ? /* @__PURE__ */ jsx76("header", { className: "stn-layer-1__header", children: header }) : null,
+                /* @__PURE__ */ jsx76("div", { className: cn("stn-layer-1__body", scrollable && "stn-scroll", contentClassName), children: resolvedMainContent })
               ] }),
               isGnbRight && gnb
             ]
@@ -8934,7 +9303,7 @@ function StnLayerShell({
 }
 
 // src/layouts/StnListViewLayout.tsx
-import { jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
 function StnListViewLayoutBody({
   search,
   sidebar,
@@ -8945,13 +9314,13 @@ function StnListViewLayoutBody({
   className
 }) {
   const lnbClass = lnbSide === "right" ? "stn-page-scaffold__lnb lnb_box lnb_box_right" : "stn-page-scaffold__lnb lnb_box";
-  const sidebarAside = sidebar ? /* @__PURE__ */ jsx73("aside", { className: lnbClass, children: sidebar }) : null;
-  return /* @__PURE__ */ jsx73(
+  const sidebarAside = sidebar ? /* @__PURE__ */ jsx77("aside", { className: lnbClass, children: sidebar }) : null;
+  return /* @__PURE__ */ jsx77(
     StnContainer,
     {
       maxWidth: false,
       className: cn("stn-list-view-layout__body", className),
-      children: /* @__PURE__ */ jsxs53(
+      children: /* @__PURE__ */ jsxs55(
         StnStack,
         {
           direction: "row",
@@ -8959,19 +9328,19 @@ function StnListViewLayoutBody({
           className: "stn-list-view__main",
           children: [
             lnbSide === "left" ? sidebarAside : null,
-            /* @__PURE__ */ jsxs53(
+            /* @__PURE__ */ jsxs55(
               StnStack,
               {
                 direction: "column",
                 spacing: 2,
                 className: "stn-list-view__content-stack",
                 children: [
-                  search ? /* @__PURE__ */ jsx73("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
-                  /* @__PURE__ */ jsx73(
+                  search ? /* @__PURE__ */ jsx77("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
+                  /* @__PURE__ */ jsx77(
                     "div",
                     {
                       className: "stn-page-scaffold__content content_box",
-                      children: children ?? /* @__PURE__ */ jsxs53("div", { className: "stn-table stn-table--fill", children: [
+                      children: children ?? /* @__PURE__ */ jsxs55("div", { className: "stn-table stn-table--fill", children: [
                         table,
                         pagination
                       ] })
@@ -9003,7 +9372,7 @@ function StnListViewLayoutRoot({
 }) {
   const bare = bareProp ?? noShell ?? false;
   const hasLnbClass = lnbSide === "right" ? "has_lnb_right" : "has_lnb";
-  const body = /* @__PURE__ */ jsx73(
+  const body = /* @__PURE__ */ jsx77(
     StnListViewLayoutBody,
     {
       search,
@@ -9018,10 +9387,10 @@ function StnListViewLayoutRoot({
   if (bare) {
     return body;
   }
-  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ jsx73("div", { className: "stn-layer-1__header", children: /* @__PURE__ */ jsx73(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx73(StnHeader.Left, { children: /* @__PURE__ */ jsx73(StnHeaderPageTitle, { children: title }) }) }) });
-  return /* @__PURE__ */ jsxs53("div", { className: cn("stn-list-view-layout", "stn-layer-1", className), ...rest, children: [
+  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ jsx77("div", { className: "stn-layer-1__header", children: /* @__PURE__ */ jsx77(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx77(StnHeader.Left, { children: /* @__PURE__ */ jsx77(StnHeaderPageTitle, { children: title }) }) }) });
+  return /* @__PURE__ */ jsxs55("div", { className: cn("stn-list-view-layout", "stn-layer-1", className), ...rest, children: [
     renderedHeader,
-    /* @__PURE__ */ jsx73(
+    /* @__PURE__ */ jsx77(
       "div",
       {
         className: cn("stn-content-area", sidebar ? hasLnbClass : null, search ? "has_sch" : null),
@@ -9031,10 +9400,10 @@ function StnListViewLayoutRoot({
   ] });
 }
 function StnListViewLayoutHeader({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx73("div", { className: cn("stn-layer-1__header", className), ...rest, children });
+  return /* @__PURE__ */ jsx77("div", { className: cn("stn-layer-1__header", className), ...rest, children });
 }
 function StnListViewLayoutSearch({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx73("div", { className: cn("search_area", className), ...rest, children });
+  return /* @__PURE__ */ jsx77("div", { className: cn("search_area", className), ...rest, children });
 }
 function StnListViewLayoutSidebar({
   side = "left",
@@ -9043,16 +9412,16 @@ function StnListViewLayoutSidebar({
   ...rest
 }) {
   const lnbClass = side === "right" ? "lnb_box_right" : "lnb_box";
-  return /* @__PURE__ */ jsx73("aside", { className: cn(lnbClass, className), ...rest, children });
+  return /* @__PURE__ */ jsx77("aside", { className: cn(lnbClass, className), ...rest, children });
 }
 function StnListViewLayoutContent({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx73("div", { className: cn("content_box", className), ...rest, children });
+  return /* @__PURE__ */ jsx77("div", { className: cn("content_box", className), ...rest, children });
 }
 function StnListViewLayoutTable({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx73("div", { className: cn("stn-table", className), ...rest, children });
+  return /* @__PURE__ */ jsx77("div", { className: cn("stn-table", className), ...rest, children });
 }
 function StnListViewLayoutPagination({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx73("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
+  return /* @__PURE__ */ jsx77("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
 }
 var StnListViewLayout = Object.assign(StnListViewLayoutRoot, {
   Body: StnListViewLayoutBody,
@@ -9086,13 +9455,13 @@ import {
 } from "@stn-uiux/pub-ui/data/stnLayout";
 
 // src/patterns/dashboard/StnMapCanvas.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 function StnMapCanvas({
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx78(
     "div",
     {
       className: cn("stn-map-canvas", className),
@@ -9104,7 +9473,7 @@ function StnMapCanvas({
 }
 
 // src/patterns/dashboard/StnDashboard.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var fillStyle = {
   flex: "1 1 0%",
   minHeight: 0,
@@ -9123,7 +9492,7 @@ function StnDashboardRoot({
 }) {
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx79(
     "div",
     {
       className: cn(
@@ -9152,7 +9521,7 @@ function StnDashboardLeft({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx79(
     "div",
     {
       className: cn("stn-dashboard__left", className),
@@ -9178,7 +9547,7 @@ function StnDashboardRight({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx79(
     "div",
     {
       className: cn("stn-dashboard__right", className),
@@ -9206,7 +9575,7 @@ function StnDashboardTopRight({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx79(
     "div",
     {
       className: cn("stn-dashboard__top-right", className),
@@ -9225,9 +9594,9 @@ var StnDashboard = Object.assign(StnDashboardRoot, {
 });
 
 // src/patterns/scaffold/StnPageScaffold.tsx
-import { jsx as jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs56 } from "react/jsx-runtime";
 function StnPageScaffoldRoot({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx80(
     "div",
     {
       className: cn("stn-page-scaffold", className),
@@ -9244,9 +9613,9 @@ function StnPageScaffoldRegion({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs54("div", { className: cn("stn-page-scaffold__region", className), "data-stn-page-scaffold": "region", ...rest, children: [
-    /* @__PURE__ */ jsx76("span", { className: "stn-page-scaffold__region-label", children: label }),
-    hint ? /* @__PURE__ */ jsx76("span", { className: "stn-page-scaffold__region-hint", children: hint }) : null,
+  return /* @__PURE__ */ jsxs56("div", { className: cn("stn-page-scaffold__region", className), "data-stn-page-scaffold": "region", ...rest, children: [
+    /* @__PURE__ */ jsx80("span", { className: "stn-page-scaffold__region-label", children: label }),
+    hint ? /* @__PURE__ */ jsx80("span", { className: "stn-page-scaffold__region-hint", children: hint }) : null,
     children
   ] });
 }
@@ -9257,7 +9626,7 @@ function StnPageScaffoldMapPlaceholder({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx76("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsx80("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs56(
     "div",
     {
       className: cn("stn-page-scaffold__canvas-placeholder", className),
@@ -9265,8 +9634,8 @@ function StnPageScaffoldMapPlaceholder({
       role: "status",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx76("p", { className: "stn-page-scaffold__canvas-placeholder-title", children: message }),
-        note ? /* @__PURE__ */ jsx76("p", { className: "stn-page-scaffold__canvas-placeholder-note", children: note }) : null,
+        /* @__PURE__ */ jsx80("p", { className: "stn-page-scaffold__canvas-placeholder-title", children: message }),
+        note ? /* @__PURE__ */ jsx80("p", { className: "stn-page-scaffold__canvas-placeholder-note", children: note }) : null,
         children
       ]
     }
@@ -9277,7 +9646,7 @@ function StnPageScaffoldMapCanvas({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx80(
     "div",
     {
       className: cn("stn-widget", "shell-canvas", "stn-map-canvas", "stn-page-scaffold__canvas", className),
@@ -9290,7 +9659,7 @@ function StnPageScaffoldMapCanvas({
 }
 function StnPageScaffoldLayer({ label, hint, children, className, ...layerProps }) {
   const labelText = label ? hint ? `${label} \xB7 ${hint}` : label : void 0;
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx80(
     StnLayer2,
     {
       className: cn(
@@ -9337,25 +9706,25 @@ function DashboardPageScaffold({
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
   const isNone = widgetPosition === "none" || !showRightRegion;
-  const mapColumn = /* @__PURE__ */ jsxs54(StnDashboard.Left, { children: [
-    /* @__PURE__ */ jsx76(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
+  const mapColumn = /* @__PURE__ */ jsxs56(StnDashboard.Left, { children: [
+    /* @__PURE__ */ jsx80(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
     faultPanel
   ] });
-  const rightWidgets = right ?? /* @__PURE__ */ jsx76(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const leftWidgets = left ?? right ?? /* @__PURE__ */ jsx76(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC88C\uCE21 \uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const dashboardGrid = bodyEmpty ? /* @__PURE__ */ jsx76(StnDashboard, { empty: true, widgetPosition, "data-stn-page-scaffold": "dashboard-empty" }) : isBoth ? /* @__PURE__ */ jsxs54(StnDashboard, { widgetPosition: "both", children: [
-    /* @__PURE__ */ jsx76(StnDashboard.Right, { children: leftWidgets }),
+  const rightWidgets = right ?? /* @__PURE__ */ jsx80(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
+  const leftWidgets = left ?? right ?? /* @__PURE__ */ jsx80(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC88C\uCE21 \uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
+  const dashboardGrid = bodyEmpty ? /* @__PURE__ */ jsx80(StnDashboard, { empty: true, widgetPosition, "data-stn-page-scaffold": "dashboard-empty" }) : isBoth ? /* @__PURE__ */ jsxs56(StnDashboard, { widgetPosition: "both", children: [
+    /* @__PURE__ */ jsx80(StnDashboard.Right, { children: leftWidgets }),
     mapColumn,
-    /* @__PURE__ */ jsx76(StnDashboard.Right, { children: rightWidgets })
-  ] }) : isLeft ? /* @__PURE__ */ jsxs54(StnDashboard, { widgetPosition: "left", children: [
-    /* @__PURE__ */ jsx76(StnDashboard.Right, { children: leftWidgets }),
+    /* @__PURE__ */ jsx80(StnDashboard.Right, { children: rightWidgets })
+  ] }) : isLeft ? /* @__PURE__ */ jsxs56(StnDashboard, { widgetPosition: "left", children: [
+    /* @__PURE__ */ jsx80(StnDashboard.Right, { children: leftWidgets }),
     mapColumn
-  ] }) : /* @__PURE__ */ jsxs54(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
+  ] }) : /* @__PURE__ */ jsxs56(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
     mapColumn,
-    !isNone ? /* @__PURE__ */ jsx76(StnDashboard.Right, { children: rightWidgets }) : null
+    !isNone ? /* @__PURE__ */ jsx80(StnDashboard.Right, { children: rightWidgets }) : null
   ] });
   const contentNode = children ?? dashboardGrid;
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx80(
     StnLayerShell,
     {
       gnb,
@@ -9364,7 +9733,7 @@ function DashboardPageScaffold({
       layer0,
       layer2,
       ...shellProps,
-      children: /* @__PURE__ */ jsx76(
+      children: /* @__PURE__ */ jsx80(
         StnContainer,
         {
           maxWidth: false,
@@ -9378,16 +9747,16 @@ function DashboardPageScaffold({
 }
 
 // src/patterns/scaffold/AlertCenterPageScaffold.tsx
-import { useMemo as useMemo5, useState as useState20 } from "react";
+import { useMemo as useMemo5, useState as useState21 } from "react";
 import {
   STN_ALERT_CENTER_DEMO_ALERTS,
   STN_ALERT_CENTER_DEMO_DEPLOY,
   STN_ALERT_CENTER_DEMO_WORK
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
 import { systemIconSrc } from "@stn-uiux/pub-ui/data/stnSystemIcons";
-import { Fragment as Fragment10, jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx81, jsxs as jsxs57 } from "react/jsx-runtime";
 function defaultTopologyHeader(_clock) {
-  return /* @__PURE__ */ jsx77(StnHeader, { variant: "widget" });
+  return /* @__PURE__ */ jsx81(StnHeader, { variant: "widget" });
 }
 function AlertCenterPageScaffold({
   gnbAlertPanel,
@@ -9404,9 +9773,9 @@ function AlertCenterPageScaffold({
   defaultGnbOpen = true,
   ...shellProps
 }) {
-  const [gnbOpen, setGnbOpen] = useState20(defaultGnbOpen);
+  const [gnbOpen, setGnbOpen] = useState21(defaultGnbOpen);
   const panel = useMemo5(
-    () => gnbAlertPanel ?? /* @__PURE__ */ jsx77(
+    () => gnbAlertPanel ?? /* @__PURE__ */ jsx81(
       StnAlertCenterPanel,
       {
         alerts: STN_ALERT_CENTER_DEMO_ALERTS,
@@ -9417,26 +9786,26 @@ function AlertCenterPageScaffold({
     [gnbAlertPanel]
   );
   const sideNav = useMemo5(
-    () => gnbProp ?? /* @__PURE__ */ jsxs55(Fragment10, { children: [
-      /* @__PURE__ */ jsxs55(
+    () => gnbProp ?? /* @__PURE__ */ jsxs57(Fragment10, { children: [
+      /* @__PURE__ */ jsxs57(
         StnSideNavigation,
         {
           collapsed: !gnbOpen,
           onCollapseChange: (col) => setGnbOpen(!col),
           children: [
-            /* @__PURE__ */ jsxs55(StnSideNavigation.Header, { children: [
-              /* @__PURE__ */ jsx77(StnSideNavigation.Logo, {}),
-              /* @__PURE__ */ jsx77(StnSideNavigation.Toggle, {})
+            /* @__PURE__ */ jsxs57(StnSideNavigation.Header, { children: [
+              /* @__PURE__ */ jsx81(StnSideNavigation.Logo, {}),
+              /* @__PURE__ */ jsx81(StnSideNavigation.Toggle, {})
             ] }),
-            /* @__PURE__ */ jsxs55(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__ */ jsxs57(StnSideNavigation.Menu, { children: [
+              /* @__PURE__ */ jsx81(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/layout-grid"), label: "\uBA54\uC778 \uB300\uC2DC\uBCF4\uB4DC", active: true }),
+              /* @__PURE__ */ jsx81(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/server_2"), label: "\uC11C\uBC84 \uBAA8\uB2C8\uD130\uB9C1" }),
+              /* @__PURE__ */ jsx81(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/activity"), label: "\uB124\uD2B8\uC6CC\uD06C \uBD84\uC11D" })
             ] }),
-            /* @__PURE__ */ jsx77(StnSideNavigation.Spacer, {}),
-            /* @__PURE__ */ jsxs55(StnSideNavigation.Footer, { curved: true, children: [
-              /* @__PURE__ */ jsx77(StnSideNavigation.Watermark, {}),
-              /* @__PURE__ */ jsx77(
+            /* @__PURE__ */ jsx81(StnSideNavigation.Spacer, {}),
+            /* @__PURE__ */ jsxs57(StnSideNavigation.Footer, { curved: true, children: [
+              /* @__PURE__ */ jsx81(StnSideNavigation.Watermark, {}),
+              /* @__PURE__ */ jsx81(
                 StnSideNavigation.Item,
                 {
                   iconSrc: systemIconSrc("line/bell"),
@@ -9445,7 +9814,7 @@ function AlertCenterPageScaffold({
                   onClick: void 0
                 }
               ),
-              /* @__PURE__ */ jsx77(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/settings"), label: "\uC124\uC815" })
+              /* @__PURE__ */ jsx81(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/settings"), label: "\uC124\uC815" })
             ] })
           ]
         }
@@ -9454,8 +9823,8 @@ function AlertCenterPageScaffold({
     ] }),
     [gnbProp, gnbOpen, panel]
   );
-  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(
+  const faultSlot = faultPanel ?? (showFaultPanelPlaceholder ? /* @__PURE__ */ jsx81("div", { className: "wrap_real_time stn-page-scaffold__fault-ph", children: /* @__PURE__ */ jsx81(StnPageScaffold.Region, { label: "\uC2E4\uC2DC\uAC04 \uC7A5\uC560 \uD604\uD669", hint: "StnWidget shell=fault-panel \xB7 \uC120\uD0DD" }) }) : null);
+  return /* @__PURE__ */ jsx81(
     DashboardPageScaffold,
     {
       gnb: sideNav,
@@ -9463,7 +9832,7 @@ function AlertCenterPageScaffold({
       mapMessage,
       mapNote,
       faultPanel: faultSlot,
-      right: right ?? /* @__PURE__ */ jsx77(AlertCenterDashboard, {}),
+      right: right ?? /* @__PURE__ */ jsx81(AlertCenterDashboard, {}),
       wrapId,
       wrapClassName: "stn-page--map-bg",
       ...shellProps
@@ -9472,8 +9841,8 @@ function AlertCenterPageScaffold({
 }
 
 // src/patterns/scaffold/LoginPageScaffold.tsx
-import { useState as useState21 } from "react";
-import { jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
+import { useState as useState22 } from "react";
+import { jsx as jsx82, jsxs as jsxs58 } from "react/jsx-runtime";
 var LOGIN_TABS = [
   { value: "normal", label: "\uC77C\uBC18 \uB85C\uADF8\uC778" },
   { value: "social", label: "\uC18C\uC15C \uB85C\uADF8\uC778" }
@@ -9484,15 +9853,15 @@ function DefaultLoginForm({
   signUpHref = "#",
   recoverHref = "#"
 }) {
-  const [mode, setMode] = useState21("normal");
-  const [userId, setUserId] = useState21("");
-  const [password, setPassword] = useState21("");
+  const [mode, setMode] = useState22("normal");
+  const [userId, setUserId] = useState22("");
+  const [password, setPassword] = useState22("");
   function handleSubmit(e) {
     e.preventDefault();
     onLogin?.(userId, password);
   }
-  return /* @__PURE__ */ jsxs56(StnLoginFormStack, { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsxs58(StnLoginFormStack, { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx82(
       StnSegmented,
       {
         "aria-label": "\uB85C\uADF8\uC778 \uBC29\uC2DD",
@@ -9501,8 +9870,8 @@ function DefaultLoginForm({
         options: LOGIN_TABS
       }
     ),
-    mode === "normal" ? /* @__PURE__ */ jsxs56(StnLoginFormFields, { children: [
-      /* @__PURE__ */ jsx78(
+    mode === "normal" ? /* @__PURE__ */ jsxs58(StnLoginFormFields, { children: [
+      /* @__PURE__ */ jsx82(
         StnLoginTextField,
         {
           icon: "line/user",
@@ -9514,7 +9883,7 @@ function DefaultLoginForm({
           "aria-label": "\uC544\uC774\uB514"
         }
       ),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx82(
         StnLoginTextField,
         {
           icon: "line/lock",
@@ -9527,11 +9896,11 @@ function DefaultLoginForm({
           "aria-label": "\uBE44\uBC00\uBC88\uD638"
         }
       )
-    ] }) : socialContent ?? /* @__PURE__ */ jsx78(StnLoginPlaceholder, {}),
-    /* @__PURE__ */ jsx78(StnButton, { type: "submit", size: "xl", fullWidth: true, children: "\uB85C\uADF8\uC778" }),
-    /* @__PURE__ */ jsxs56(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" })
+    ] }) : socialContent ?? /* @__PURE__ */ jsx82(StnLoginPlaceholder, {}),
+    /* @__PURE__ */ jsx82(StnButton, { type: "submit", size: "xl", fullWidth: true, children: "\uB85C\uADF8\uC778" }),
+    /* @__PURE__ */ jsxs58(StnLoginFormLinks, { children: [
+      /* @__PURE__ */ jsx82("a", { href: signUpHref, children: "\uD68C\uC6D0\uAC00\uC785" }),
+      /* @__PURE__ */ jsx82("a", { href: recoverHref, children: "\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30" })
     ] })
   ] });
 }
@@ -9545,16 +9914,16 @@ function DefaultLoginCard({
   signUpHref,
   recoverHref
 }) {
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx82(
     StnLoginCard,
     {
       glow,
       variant,
-      brand: /* @__PURE__ */ jsxs56(StnLoginBrandStack, { children: [
-        logo ?? /* @__PURE__ */ jsx78(StnLogo, { variant: "vertical", size: "xl" }),
-        /* @__PURE__ */ jsx78("p", { className: "stn-login-card__caption", children: productCaption })
+      brand: /* @__PURE__ */ jsxs58(StnLoginBrandStack, { children: [
+        logo ?? /* @__PURE__ */ jsx82(StnLogo, { variant: "vertical", size: "xl" }),
+        /* @__PURE__ */ jsx82("p", { className: "stn-login-card__caption", children: productCaption })
       ] }),
-      children: /* @__PURE__ */ jsx78(
+      children: /* @__PURE__ */ jsx82(
         DefaultLoginForm,
         {
           onLogin,
@@ -9580,8 +9949,8 @@ function LoginPageScaffold({
   recoverHref,
   ...shellProps
 }) {
-  const resolvedLayer0 = layer0 ?? /* @__PURE__ */ jsx78(StnLayer0Background, { variant: "login" });
-  const resolvedCard = children ?? /* @__PURE__ */ jsx78(
+  const resolvedLayer0 = layer0 ?? /* @__PURE__ */ jsx82(StnLayer0Background, { variant: "login" });
+  const resolvedCard = children ?? /* @__PURE__ */ jsx82(
     DefaultLoginCard,
     {
       logo,
@@ -9594,7 +9963,7 @@ function LoginPageScaffold({
       recoverHref
     }
   );
-  return /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs58(
     "div",
     {
       className: cn("stn-wrap stn-page--login", wrapClassName),
@@ -9602,7 +9971,7 @@ function LoginPageScaffold({
       ...shellProps,
       children: [
         resolvedLayer0,
-        /* @__PURE__ */ jsx78("div", { className: "stn-login", children: resolvedCard })
+        /* @__PURE__ */ jsx82("div", { className: "stn-login", children: resolvedCard })
       ]
     }
   );
@@ -9631,7 +10000,7 @@ import {
 
 // src/patterns/toolbar/StnFloatingToolbar.tsx
 import React3 from "react";
-import { jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs59 } from "react/jsx-runtime";
 var DEFAULT_MAP_MODES = [
   { value: "sphere", label: "\uAD6C\uBA74" },
   { value: "plane", label: "\uD3C9\uBA74" },
@@ -9641,7 +10010,7 @@ var StnFloatingToolbar = React3.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__ */ jsx79(
+    return /* @__PURE__ */ jsx83(
       "div",
       {
         ref,
@@ -9674,7 +10043,7 @@ var StnMapToolbar = React3.forwardRef(
     children,
     ...restProps
   }, ref) => {
-    return /* @__PURE__ */ jsxs57(
+    return /* @__PURE__ */ jsxs59(
       StnFloatingToolbar,
       {
         ref,
@@ -9684,7 +10053,7 @@ var StnMapToolbar = React3.forwardRef(
         "aria-label": "\uC9C0\uB3C4 \uBC0F \uD1A0\uD3F4\uB85C\uC9C0 \uB3C4\uAD6C \uBAA8\uC74C",
         ...restProps,
         children: [
-          modeOptions && modeOptions.length > 0 && /* @__PURE__ */ jsx79(
+          modeOptions && modeOptions.length > 0 && /* @__PURE__ */ jsx83(
             StnDropdown,
             {
               size: "md",
@@ -9695,75 +10064,75 @@ var StnMapToolbar = React3.forwardRef(
               "aria-label": "\uD22C\uC601 \uBAA8\uB4DC \uC120\uD0DD"
             }
           ),
-          onRestore && /* @__PURE__ */ jsx79(
+          onRestore && /* @__PURE__ */ jsx83(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs57("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" })
+              icon: /* @__PURE__ */ jsxs59("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__ */ jsx83("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__ */ jsx83("path", { d: "M3 4.00098V9.00098H8" }),
+                /* @__PURE__ */ jsx83("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" })
               ] }),
               "aria-label": "\uCD08\uAE30\uD654 (Restore)",
               title: "\uCD08\uAE30\uD654 (Restore)",
               onClick: onRestore
             }
           ),
-          onFullscreen && /* @__PURE__ */ jsx79(
+          onFullscreen && /* @__PURE__ */ jsx83(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs57("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" })
+              icon: /* @__PURE__ */ jsxs59("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__ */ jsx83("path", { d: "M16 4H20V8" }),
+                /* @__PURE__ */ jsx83("path", { d: "M14 10L20 4" }),
+                /* @__PURE__ */ jsx83("path", { d: "M8 20H4V16" }),
+                /* @__PURE__ */ jsx83("path", { d: "M4 20L10 14" })
               ] }),
               "aria-label": "\uC804\uCCB4\uD654\uBA74",
               title: "\uC804\uCCB4\uD654\uBA74",
               onClick: onFullscreen
             }
           ),
-          onZoomIn && /* @__PURE__ */ jsx79(
+          onZoomIn && /* @__PURE__ */ jsx83(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs57("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" })
+              icon: /* @__PURE__ */ jsxs59("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__ */ jsx83("path", { d: "M12 5V19" }),
+                /* @__PURE__ */ jsx83("path", { d: "M5 12H19" })
               ] }),
               "aria-label": "\uD655\uB300",
               title: "\uD655\uB300",
               onClick: onZoomIn
             }
           ),
-          onZoomOut && /* @__PURE__ */ jsx79(
+          onZoomOut && /* @__PURE__ */ jsx83(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              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" }) }),
+              icon: /* @__PURE__ */ jsx83("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__ */ jsx83("path", { d: "M5 12H19" }) }),
               "aria-label": "\uCD95\uC18C",
               title: "\uCD95\uC18C",
               onClick: onZoomOut
             }
           ),
-          onRefresh && /* @__PURE__ */ jsx79(
+          onRefresh && /* @__PURE__ */ jsx83(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs57("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" })
+              icon: /* @__PURE__ */ jsxs59("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__ */ jsx83("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__ */ jsx83("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",
@@ -10020,6 +10389,9 @@ export {
   StnStatusSeverity,
   StnStatusSwitch,
   StnSwitch,
+  StnTab,
+  StnTabContextProvider,
+  StnTabPanel,
   StnTable,
   StnTableBody,
   StnTableGrid,
@@ -10030,6 +10402,8 @@ export {
   StnTableTdCheck,
   StnTableTh,
   StnTableThCheck,
+  StnTabs2 as StnTabs,
+  StnTabsRoot,
   StnTextArea,
   StnTextField,
   StnToastCloseButton,
@@ -10080,6 +10454,7 @@ export {
   systemIconSrc2 as systemIconSrc,
   useSideNav,
   useStn,
-  useStnOptional
+  useStnOptional,
+  useStnTabsContext
 };
 //# sourceMappingURL=index.js.map