@stn-uiux/pub-ui-react 0.1.63 → 0.1.65

package/dist/index.js

@@ -177,13 +177,12 @@ function resolveButtonWidthProps(fullWidth, width, defaultPreset) {
 // src/components/StnIcon.tsx
 import { resolveSystemIconSrcFromName } from "@stn-uiux/pub-ui/data/stnSystemIcons";
 import { jsx as jsx2 } from "react/jsx-runtime";
-function StnIcon({ name, src, color, size = 24, className, style }) {
+function StnIcon({ name, src, color, size, className, style }) {
   if (name && src) {
     console.warn("[StnIcon] `name` and `src` cannot be used together. Using `src`.");
   }
   const sizeStyle = {
-    width: size,
-    height: size,
+    ...size !== void 0 ? { width: size, height: size } : void 0,
     ...style
   };
   const resolvedSrc = src ?? (name ? resolveSystemIconSrcFromName(name) : null);
@@ -358,6 +357,7 @@ var StnTooltip = forwardRef2(
     iconPosition = "left",
     leadingIcon,
     trailingIcon,
+    offset,
     open,
     alwaysVisible,
     tooltipClassName,
@@ -368,11 +368,16 @@ var StnTooltip = forwardRef2(
     const glyphPx = TOOLTIP_ICON_PX[size] ?? 14;
     const finalLeadingIcon = leadingIcon != null ? resolveIconNode2(leadingIcon, glyphPx) : icon != null && iconPosition !== "right" ? resolveIconNode2(icon, glyphPx) : null;
     const finalTrailingIcon = trailingIcon != null ? resolveIconNode2(trailingIcon, glyphPx) : icon != null && iconPosition === "right" ? resolveIconNode2(icon, glyphPx) : null;
+    const resolvedOffset = offset !== void 0 ? typeof offset === "number" ? `${offset}px` : /^space[-_]\d+$/.test(String(offset).trim()) ? `var(--stn-${String(offset).trim().replace("_", "-")})` : /^\d+$/.test(String(offset).trim()) ? `${String(offset).trim()}px` : String(offset).trim() : void 0;
+    const tooltipStyle = resolvedOffset !== void 0 ? {
+      "--stn-tooltip-offset": resolvedOffset
+    } : void 0;
     const tooltipElement = /* @__PURE__ */ jsxs2(
       "div",
       {
         ref: !children ? ref : void 0,
         role: "tooltip",
+        style: tooltipStyle,
         className: cn(
           "stn-tooltip",
           variant,
@@ -1854,6 +1859,12 @@ var SEVERITY_DEFAULT_LABELS = {
   minor: "Minor",
   warning: "Warning"
 };
+var SEVERITY_ABBR_LABELS = {
+  critical: "CR",
+  major: "MJ",
+  minor: "MN",
+  warning: "WR"
+};
 var SEVERITY_ICONS = {
   critical: "fill/alert4",
   major: "fill/alert3",
@@ -1869,6 +1880,7 @@ var StnStatusSeverity = forwardRef11(function StnStatusSeverity2({
   iconOnly = false,
   glow = false,
   blur = false,
+  abbr = false,
   label,
   active = false,
   onClick,
@@ -1893,7 +1905,7 @@ var StnStatusSeverity = forwardRef11(function StnStatusSeverity2({
     active ? "is-active" : "",
     className
   ].filter(Boolean).join(" ");
-  const defaultLabel = SEVERITY_DEFAULT_LABELS[severity];
+  const defaultLabel = abbr ? SEVERITY_ABBR_LABELS[severity] : SEVERITY_DEFAULT_LABELS[severity];
   const displayLabel = children ?? label ?? defaultLabel;
   const iconName = SEVERITY_ICONS[severity];
   const elementProps = {
@@ -1926,38 +1938,6 @@ var StnStatusSeverity = forwardRef11(function StnStatusSeverity2({
   ] });
 });
 StnStatusSeverity.displayName = "StnStatusSeverity";
-var ALL_SEVERITIES = ["critical", "major", "minor", "warning"];
-function StnStatusSeverityFilter({
-  value = ALL_SEVERITIES,
-  onChange,
-  disabledSeverities = [],
-  showIcon = true,
-  className = ""
-}) {
-  const handleToggle = (sev) => {
-    if (!onChange) return;
-    const exists = value.includes(sev);
-    const next = exists ? value.filter((item) => item !== sev) : [...value, sev];
-    onChange(next);
-  };
-  return /* @__PURE__ */ jsx16("div", { className: `stn-status-severity-filter-group ${className}`.trim(), role: "group", "aria-label": "\uC2EC\uAC01\uB3C4 \uD544\uD130", children: ALL_SEVERITIES.map((sev) => {
-    const isActive = value.includes(sev);
-    const isDisabled = disabledSeverities.includes(sev);
-    return /* @__PURE__ */ jsx16(
-      StnStatusSeverity,
-      {
-        severity: sev,
-        variant: "filter",
-        showIcon,
-        active: isActive,
-        disabled: isDisabled,
-        onClick: () => !isDisabled && handleToggle(sev)
-      },
-      sev
-    );
-  }) });
-}
-StnStatusSeverityFilter.displayName = "StnStatusSeverityFilter";
 function StnStatus(props) {
   switch (props.type) {
     case "dot-group": {
@@ -1972,10 +1952,6 @@ function StnStatus(props) {
       const { type: _, ...rest } = props;
       return /* @__PURE__ */ jsx16(StnStatusSeverity, { ...rest });
     }
-    case "severity-filter": {
-      const { type: _, ...rest } = props;
-      return /* @__PURE__ */ jsx16(StnStatusSeverityFilter, { ...rest });
-    }
     case "flow": {
       const { type: _, ...rest } = props;
       return /* @__PURE__ */ jsx16(StnStatusFlow, { ...rest });
@@ -1990,7 +1966,6 @@ function StnStatus(props) {
 StnStatus.Dot = StnStatusDot;
 StnStatus.DotGroup = StnStatusDotGroup;
 StnStatus.Severity = StnStatusSeverity;
-StnStatus.SeverityFilter = StnStatusSeverityFilter;
 StnStatus.Switch = StnStatusSwitch;
 StnStatus.Flow = StnStatusFlow;
 
@@ -2517,7 +2492,7 @@ function TreeNodeIcon({
   icon
 }) {
   if (icon != null) {
-    return /* @__PURE__ */ jsx18("span", { className: "stn-tree__cell stn-tree__cell--icon stn-tree__icon stn-tree__icon--custom", children: typeof icon === "string" ? /* @__PURE__ */ jsx18(StnIcon, { name: icon, size: 16, className: "stn-tree__icon-glyph" }) : icon });
+    return /* @__PURE__ */ jsx18("span", { className: "stn-tree__cell stn-tree__cell--icon stn-tree__icon stn-tree__icon--custom", children: typeof icon === "string" ? /* @__PURE__ */ jsx18(StnIcon, { name: icon, className: "stn-tree__icon-glyph" }) : icon });
   }
   if (kind === "server") {
     return /* @__PURE__ */ jsxs12("span", { className: "stn-tree__cell stn-tree__cell--icon stn-tree__icon stn-tree__icon--server", children: [
@@ -2525,7 +2500,6 @@ function TreeNodeIcon({
         StnIcon,
         {
           name: "fill/server_2_tree_light",
-          size: 16,
           className: "stn-tree__icon-glyph stn-tree__server-icon stn-tree__server-icon--light stn-icon--color"
         }
       ),
@@ -2533,7 +2507,6 @@ function TreeNodeIcon({
         StnIcon,
         {
           name: "fill/server_2",
-          size: 16,
           className: "stn-tree__icon-glyph stn-tree__server-icon stn-tree__server-icon--dark stn-icon--color"
         }
       )
@@ -2914,6 +2887,7 @@ var StnSectionSide = forwardRef16(function StnSectionSide2({
           StnScroll,
           {
             orientation: "vertical",
+            size: "thin",
             className: cn("stn-section-side__body", scrollClassName),
             ...scrollRest,
             children
@@ -3165,7 +3139,7 @@ var StnBadge = React.forwardRef(
       displayContent = `${max}+`;
     }
     const positionClass = `${anchorOrigin.vertical}-${anchorOrigin.horizontal}`;
-    const colorClass2 = color;
+    const colorClass3 = color;
     const appearanceClass = appearance;
     const isStandalone = !children;
     const customBadgeStyle = {
@@ -3182,7 +3156,7 @@ var StnBadge = React.forwardRef(
           "stn-badge",
           isDot ? "dot" : "standard",
           appearanceClass,
-          colorClass2,
+          colorClass3,
           !isStandalone && positionClass,
           isStandalone && "standalone",
           invisible && "is-invisible",
@@ -3238,6 +3212,7 @@ function StnChip(props) {
     children,
     grade,
     accent,
+    dashed = false,
     onClick,
     onKeyDown,
     role: roleProp,
@@ -3248,7 +3223,7 @@ function StnChip(props) {
   const resolvedShape = rawShape === "rounded" || rawShape === "square" ? "square" : rawShape;
   const isOutline = variant === "outline" || variant === "outlined" || variant === "border";
   const isSubtle = bgOpacity === 50 || bgOpacity === "50" || bgOpacity === "50%" || bgOpacity === 0.5 || variant === "subtle" || variant === "soft" || variant === "tinted" || variant === "contained-50" || variant === "filled-50";
-  const variantClass6 = isOutline ? "outline" : isSubtle ? "subtle contained-50 bg-50" : "filled";
+  const variantClass7 = isOutline ? "outline" : isSubtle ? "subtle contained-50 bg-50" : "filled";
   const resolvedColor = color ?? grade;
   let content = children ?? label;
   if (!content && grade && STN_GRADE_SOURCE[grade]) {
@@ -3305,10 +3280,11 @@ function StnChip(props) {
       tabIndex,
       className: cn(
         "stn-chip",
-        variantClass6,
+        variantClass7,
         size,
         resolvedShape,
         resolvedColor,
+        dashed && "dashed",
         isClickable && "clickable",
         onDelete && "deletable",
         accent && `stn-chip--accent-${accent}`,
@@ -3911,21 +3887,45 @@ function StnDropdown({
             children: displayLabel
           }
         ),
-        /* @__PURE__ */ jsx32("ul", { className: "select_option", role: "listbox", "aria-label": ariaLabel, children: options.map((opt) => /* @__PURE__ */ jsx32(
-          "li",
+        /* @__PURE__ */ jsx32(
+          "ul",
           {
-            role: "option",
-            "aria-selected": opt.value === value,
-            "aria-disabled": opt.disabled,
-            className: opt.disabled ? "disabled" : void 0,
-            onClick: () => !opt.disabled && pick(opt.value),
-            onKeyDown: (e) => {
-              if (e.key === "Enter" && !opt.disabled) pick(opt.value);
-            },
-            children: opt.label
-          },
-          opt.value
-        )) })
+            className: cn("select_option", "stn-scroll", "vertical", "thin"),
+            role: "listbox",
+            "aria-label": ariaLabel,
+            children: options.map((opt) => {
+              const isSelected = opt.value === value;
+              return /* @__PURE__ */ jsxs25(
+                "li",
+                {
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": opt.disabled,
+                  className: cn(
+                    opt.disabled && "disabled",
+                    isSelected && "is-selected selected"
+                  ),
+                  onClick: () => !opt.disabled && pick(opt.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && !opt.disabled) pick(opt.value);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx32(
+                      "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
+                      }
+                    ),
+                    /* @__PURE__ */ jsx32("span", { className: "stn-dropdown__item-label", children: opt.label })
+                  ]
+                },
+                opt.value
+              );
+            })
+          }
+        )
       ]
     }
   );
@@ -4126,17 +4126,170 @@ var StnTextField = forwardRef23(function StnTextField2({
   );
 });
 
-// src/components/StnDateRangeField.tsx
-import { forwardRef as forwardRef24, useId as useId11 } from "react";
+// src/components/StnTextArea.tsx
 import {
-  formatStnDateRangeFieldValue
-} from "@stn-uiux/pub-ui/data/stnDateRangeField";
+  forwardRef as forwardRef24,
+  useId as useId11,
+  useState as useState10
+} from "react";
 import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+function normalizeSize2(size) {
+  return size ?? "md";
+}
+function variantClass3(variant) {
+  if (variant === "filled") return "filled";
+  if (variant === "standard") return "standard";
+  if (variant === "transparent") return "transparent";
+  return "outlined";
+}
+function colorClass2(color) {
+  if (!color || color === "primary" || color === "secondary") return void 0;
+  return color;
+}
+function resizeClass(resize) {
+  if (resize === "none") return "resize-none";
+  if (resize === "horizontal") return "resize-horizontal";
+  if (resize === "both") return "resize-both";
+  return "resize-vertical";
+}
 function resolveGlyph3(node) {
   if (typeof node === "string") return /* @__PURE__ */ jsx35(StnIcon, { name: node, size: 16, color: "currentColor" });
   return node;
 }
-function normalizeSize2(size) {
+var StnTextArea = forwardRef24(function StnTextArea2({
+  size = "md",
+  variant = "outlined",
+  color,
+  invalid,
+  fullWidth,
+  width,
+  label,
+  labelIcon,
+  labelPosition = "top",
+  required,
+  helperText,
+  showCount = false,
+  resize = "vertical",
+  rows = 3,
+  maxLength,
+  className,
+  disabled,
+  id: idProp,
+  value,
+  defaultValue,
+  onChange,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
+  ...rest
+}, ref) {
+  const autoId = useId11();
+  const id = idProp ?? autoId;
+  const isControlled = value !== void 0;
+  const [uncontrolledLength, setUncontrolledLength] = useState10(() => {
+    if (defaultValue != null) return String(defaultValue).length;
+    return 0;
+  });
+  const currentLength = isControlled ? String(value ?? "").length : uncontrolledLength;
+  const handleTextChange = (e) => {
+    if (!isControlled) {
+      setUncontrolledLength(e.target.value.length);
+    }
+    onChange?.(e);
+  };
+  const hasLabel = label != null && label !== "";
+  const hasHelper = helperText != null && helperText !== "";
+  const hasFooter = hasHelper || showCount;
+  const hasWrap = hasLabel || hasFooter;
+  const helperId = hasHelper ? `${id}-helper` : void 0;
+  const describedBy = [ariaDescribedBy, helperId].filter(Boolean).join(" ") || void 0;
+  const widthProps = resolveInputWidthProps("stn-text-area", fullWidth, width);
+  const textAreaClass = cn(
+    "stn-text-area",
+    variantClass3(variant),
+    normalizeSize2(size),
+    colorClass2(color),
+    resizeClass(resize),
+    !hasWrap && widthProps.className,
+    invalid && "invalid",
+    className
+  );
+  const textareaElement = /* @__PURE__ */ jsx35(
+    "textarea",
+    {
+      ref,
+      id,
+      rows,
+      disabled,
+      required,
+      maxLength,
+      value,
+      defaultValue,
+      onChange: handleTextChange,
+      "aria-invalid": invalid ? true : ariaInvalid,
+      "aria-describedby": describedBy,
+      className: textAreaClass,
+      style: hasWrap ? void 0 : widthProps.style,
+      ...rest
+    }
+  );
+  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: "*" })
+  ] }) : null;
+  const isRow = labelPosition === "left" || labelPosition === "right";
+  return /* @__PURE__ */ jsxs27(
+    "div",
+    {
+      className: cn(
+        "stn-text-area-wrap",
+        isRow ? "stn-text-area-wrap--row" : "stn-text-area-wrap--col",
+        hasLabel && labelPosition === "left" && "stn-text-area-wrap--label-left",
+        hasLabel && labelPosition === "right" && "stn-text-area-wrap--label-right",
+        hasLabel && labelPosition === "top" && "stn-text-area-wrap--label-top",
+        widthProps.className
+      ),
+      style: widthProps.style,
+      children: [
+        hasLabel && (labelPosition === "left" || labelPosition === "top") ? labelElement : null,
+        /* @__PURE__ */ jsxs27("div", { className: "stn-text-area-wrap__body", children: [
+          textareaElement,
+          hasFooter && /* @__PURE__ */ jsxs27("div", { className: "stn-text-area__footer", children: [
+            hasHelper ? /* @__PURE__ */ jsx35(
+              "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: [
+              currentLength,
+              maxLength != null ? ` / ${maxLength}` : ""
+            ] })
+          ] })
+        ] }),
+        hasLabel && labelPosition === "right" ? labelElement : null
+      ]
+    }
+  );
+});
+StnTextArea.displayName = "StnTextArea";
+
+// src/components/StnDateRangeField.tsx
+import { forwardRef as forwardRef25, 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";
+function resolveGlyph4(node) {
+  if (typeof node === "string") return /* @__PURE__ */ jsx36(StnIcon, { name: node, size: 16, color: "currentColor" });
+  return node;
+}
+function normalizeSize3(size) {
   if (!size) return "md";
   const s = String(size).toLowerCase();
   if (s === "s" || s === "sm") return "sm";
@@ -4145,9 +4298,9 @@ function normalizeSize2(size) {
   return "md";
 }
 function sizeClass3(size) {
-  return normalizeSize2(size);
+  return normalizeSize3(size);
 }
-function variantClass3(variant = "outline") {
+function variantClass4(variant = "outline") {
   if (variant === "transparent") return "transparent";
   return "";
 }
@@ -4157,7 +4310,7 @@ function resolveValue(value, format) {
   const trimmed = value.trim();
   return trimmed || null;
 }
-var StnDateRangeField = forwardRef24(function StnDateRangeField2({
+var StnDateRangeField = forwardRef25(function StnDateRangeField2({
   size = "md",
   variant = "outline",
   start,
@@ -4182,7 +4335,7 @@ var StnDateRangeField = forwardRef24(function StnDateRangeField2({
   "aria-invalid": ariaInvalid,
   ...rest
 }, ref) {
-  const autoId = useId11();
+  const autoId = useId12();
   const rootId = idProp ?? `stn-date-range-${autoId.replace(/:/g, "")}`;
   const startText = resolveValue(start, format);
   const endText = resolveValue(end, format);
@@ -4191,7 +4344,7 @@ var StnDateRangeField = forwardRef24(function StnDateRangeField2({
   const hasLabel = label != null && label !== "";
   const hasHelper = helperText != null && helperText !== "";
   const hasWrap = hasLabel || hasHelper;
-  const buttonNode = /* @__PURE__ */ jsx35(
+  const buttonNode = /* @__PURE__ */ jsx36(
     "button",
     {
       ref,
@@ -4202,7 +4355,7 @@ var StnDateRangeField = forwardRef24(function StnDateRangeField2({
       className: cn(
         "stn-date-range-field",
         sizeClass3(size),
-        variantClass3(variant),
+        variantClass4(variant),
         !hasWrap && widthProps.className,
         fullWidth && "stn-date-range-field--full w100p",
         invalid && "stn-date-range-field--invalid",
@@ -4211,25 +4364,25 @@ var StnDateRangeField = forwardRef24(function StnDateRangeField2({
       ),
       style: !hasWrap ? widthProps.style ?? style : void 0,
       ...rest,
-      children: /* @__PURE__ */ jsxs27("span", { className: "stn-date-range-field__inner", children: [
-        /* @__PURE__ */ jsxs27("span", { className: "stn-date-range-field__text", children: [
-          /* @__PURE__ */ jsx35("span", { className: cn("stn-date-range-field__value", !startText && "is-placeholder"), children: startText ?? startPlaceholder }),
-          /* @__PURE__ */ jsx35("span", { className: "stn-date-range-field__sep", "aria-hidden": "true", children: "~" }),
-          /* @__PURE__ */ jsx35("span", { className: cn("stn-date-range-field__value", !endText && "is-placeholder"), children: endText ?? endPlaceholder })
+      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 })
         ] }),
-        /* @__PURE__ */ jsx35("span", { className: "stn-date-range-field__icon", "aria-hidden": "true" })
+        /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__icon", "aria-hidden": "true" })
       ] })
     }
   );
   if (!hasWrap) return buttonNode;
   const resolvedLabelIcon = labelIcon ?? icon;
-  const labelElement = hasLabel ? /* @__PURE__ */ jsxs27("label", { htmlFor: rootId, className: "stn-date-range-field__label", children: [
-    resolvedLabelIcon ? /* @__PURE__ */ jsx35("span", { className: "stn-date-range-field__label-icon", "aria-hidden": "true", children: resolveGlyph3(resolvedLabelIcon) }) : null,
-    /* @__PURE__ */ jsx35("span", { className: "stn-date-range-field__label-text", children: label }),
-    required && /* @__PURE__ */ jsx35("span", { className: "stn-date-range-field__required", "aria-hidden": "true", children: "*" })
+  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: "*" })
   ] }) : null;
   const isRow = labelPosition === "left" || labelPosition === "right";
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: cn(
@@ -4245,9 +4398,9 @@ var StnDateRangeField = forwardRef24(function StnDateRangeField2({
       style: widthProps.style ?? style,
       children: [
         hasLabel && (labelPosition === "left" || labelPosition === "top") ? labelElement : null,
-        /* @__PURE__ */ jsxs27("div", { className: "stn-date-range-field-wrap__body", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "stn-date-range-field-wrap__body", children: [
           buttonNode,
-          hasHelper && /* @__PURE__ */ jsx35(
+          hasHelper && /* @__PURE__ */ jsx36(
             "span",
             {
               id: `${rootId}-helper`,
@@ -4267,16 +4420,16 @@ var StnDateRangeField = forwardRef24(function StnDateRangeField2({
 
 // src/components/StnLabelPrefix.tsx
 import {
-  useId as useId12,
-  useState as useState10,
+  useId as useId13,
+  useState as useState11,
   isValidElement as isValidElement4,
   cloneElement as cloneElement4
 } from "react";
-import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
 function sizeClass4(size) {
   return size;
 }
-function variantClass4(variant) {
+function variantClass5(variant) {
   return variant;
 }
 function StnLabelPrefix({
@@ -4307,12 +4460,12 @@ function StnLabelPrefix({
   id: idProp,
   ...rest
 }) {
-  const autoId = useId12();
+  const autoId = useId13();
   const id = idProp ?? autoId;
   const isError = error || invalid || color === "error";
   const hasHelper = helperText != null && helperText !== "";
   const helperId = hasHelper ? `${id}-helper` : void 0;
-  const [internalChecked, setInternalChecked] = useState10(defaultChecked ?? false);
+  const [internalChecked, setInternalChecked] = useState11(defaultChecked ?? false);
   const isChecked = checked !== void 0 ? checked : internalChecked;
   const handleCheckboxChange = (nextChecked) => {
     if (checked === void 0) {
@@ -4325,7 +4478,7 @@ function StnLabelPrefix({
   const rootClass = cn(
     "stn-label-prefix",
     sizeClass4(size),
-    variantClass4(variant),
+    variantClass5(variant),
     color && color !== "error" && color,
     labelPosition === "suffix" && "stn-label-prefix--suffix",
     radius && `radius-${radius}`,
@@ -4337,7 +4490,7 @@ function StnLabelPrefix({
   );
   const defaultCheckboxSize = size === "lg" ? "md" : "sm";
   const resolvedCheckboxSize = checkboxSize ?? defaultCheckboxSize;
-  const checkboxNode = checkboxSlot ?? (checkbox ? /* @__PURE__ */ jsx36("span", { className: "stn-label-prefix__checkbox", children: /* @__PURE__ */ jsx36(
+  const checkboxNode = checkboxSlot ?? (checkbox ? /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__checkbox", children: /* @__PURE__ */ jsx37(
     StnCheckbox,
     {
       size: resolvedCheckboxSize,
@@ -4348,14 +4501,14 @@ function StnLabelPrefix({
       "aria-label": typeof label === "string" ? `${label} \uC120\uD0DD` : void 0
     }
   ) }) : null);
-  const labelSection = /* @__PURE__ */ jsxs28("span", { className: "stn-label-prefix__label", children: [
+  const labelSection = /* @__PURE__ */ jsxs29("span", { className: "stn-label-prefix__label", children: [
     checkboxNode,
-    labelIcon != null && /* @__PURE__ */ jsx36("span", { className: "stn-label-prefix__icon", "aria-hidden": "true", children: labelIcon }),
-    /* @__PURE__ */ jsxs28("span", { className: "stn-label-prefix__text", children: [
+    labelIcon != null && /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__icon", "aria-hidden": "true", children: labelIcon }),
+    /* @__PURE__ */ jsxs29("span", { className: "stn-label-prefix__text", children: [
       label,
-      required && /* @__PURE__ */ jsx36("span", { className: "stn-label-prefix__required", "aria-hidden": "true", children: "*" })
+      required && /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__required", "aria-hidden": "true", children: "*" })
     ] }),
-    /* @__PURE__ */ jsx36("span", { className: "stn-label-prefix__divider", "aria-hidden": "true" })
+    /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__divider", "aria-hidden": "true" })
   ] });
   let renderedControl = children;
   if (isControlDisabled && isValidElement4(children) && typeof children.type !== "string") {
@@ -4363,7 +4516,7 @@ function StnLabelPrefix({
       disabled: true
     });
   }
-  const prefixNode = /* @__PURE__ */ jsxs28(
+  const prefixNode = /* @__PURE__ */ jsxs29(
     "div",
     {
       id: !hasHelper ? id : void 0,
@@ -4375,14 +4528,14 @@ function StnLabelPrefix({
       ...!hasHelper ? rest : {},
       children: [
         labelSection,
-        /* @__PURE__ */ jsx36("span", { className: "stn-label-prefix__control", children: renderedControl })
+        /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__control", children: renderedControl })
       ]
     }
   );
   if (!hasHelper) {
     return prefixNode;
   }
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       id,
@@ -4396,7 +4549,7 @@ function StnLabelPrefix({
       ...rest,
       children: [
         prefixNode,
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "p",
           {
             id: helperId,
@@ -4462,14 +4615,14 @@ import {
 } from "@stn-uiux/pub-ui/data/stnSearchRequirement";
 
 // src/patterns/search/StnSearchRequirementBar.tsx
-import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 function StnSearchRequirementBar({
   children,
   className,
   density = "default",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: cn(
@@ -4485,7 +4638,7 @@ function StnSearchRequirementBar({
   );
 }
 function StnSearchRequirementBarFields({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx37("div", { className: cn("stn-search-requirement__fields", className), "data-stn-search-requirement": "fields", ...rest, children });
+  return /* @__PURE__ */ jsx38("div", { className: cn("stn-search-requirement__fields", className), "data-stn-search-requirement": "fields", ...rest, children });
 }
 function StnSearchRequirementBarField({
   label,
@@ -4495,20 +4648,20 @@ function StnSearchRequirementBarField({
   controlClassName,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs29("div", { className: cn("stn-search-requirement__field", className), "data-stn-search-requirement": "field", ...rest, children: [
-    /* @__PURE__ */ jsx37("span", { className: cn("stn-search-requirement__label", labelClassName), children: label }),
-    /* @__PURE__ */ jsx37("div", { className: cn("stn-search-requirement__control", controlClassName), children })
+  return /* @__PURE__ */ 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 })
   ] });
 }
 function StnSearchRequirementBarSearchButton({
   children = "\uAC80\uC0C9",
   size = "md",
   variant = "outlined",
-  icon = /* @__PURE__ */ jsx37(StnIcon, { name: "line/search", size: 16, color: "currentColor" }),
+  icon = /* @__PURE__ */ jsx38(StnIcon, { name: "line/search", size: 16, color: "currentColor" }),
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     StnButton,
     {
       size,
@@ -4530,10 +4683,10 @@ function StnSearchRequirementBarExport({
   "aria-label": ariaLabel = "Excel\uBCF4\uB0B4\uAE30",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     StnButton,
     {
-      icon: icon ?? /* @__PURE__ */ jsx37(StnIcon, { name, size: 24, color: "currentColor" }),
+      icon: icon ?? /* @__PURE__ */ jsx38(StnIcon, { name, size: 24, color: "currentColor" }),
       variant,
       size,
       "aria-label": ariaLabel,
@@ -4544,7 +4697,7 @@ function StnSearchRequirementBarExport({
   );
 }
 function StnSearchRequirementBarDivider({ className, ...rest }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "span",
     {
       className: cn("stn-search-requirement__divider", className),
@@ -4570,13 +4723,13 @@ import {
   useEffect as useEffect9,
   useLayoutEffect,
   useRef as useRef6,
-  useState as useState12
+  useState as useState13
 } 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 useId13, useMemo as useMemo3, useState as useState11 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect8, useId as useId14, useMemo as useMemo3, useState as useState12 } from "react";
 import {
   STN_DATE_PICKER_WEEKDAYS
 } from "@stn-uiux/pub-ui/data/stnDatePicker";
@@ -4636,9 +4789,9 @@ function normalizeRange(start, end) {
 }
 
 // src/components/datePicker/StnDateRangePicker.tsx
-import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 function useDraftRange(value, open) {
-  const [draft, setDraft] = useState11(value);
+  const [draft, setDraft] = useState12(value);
   useEffect8(() => {
     if (open) setDraft(value);
   }, [open, value]);
@@ -4647,19 +4800,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__ */ jsxs30("div", { className: "stn-date-picker-panel", children: [
-    /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-panel__header", children: [
-      showPrev ? /* @__PURE__ */ jsx38("button", { type: "button", className: "stn-date-picker-panel__nav", onClick: onPrev, "aria-label": "Previous month", children: "\u2039" }) : /* @__PURE__ */ jsx38("span", { className: "stn-date-picker-panel__nav", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx38("p", { className: "stn-date-picker-panel__title", children: formatMonthTitle(month) }),
-      showNext ? /* @__PURE__ */ jsx38("button", { type: "button", className: "stn-date-picker-panel__nav", onClick: onNext, "aria-label": "Next month", children: "\u203A" }) : /* @__PURE__ */ jsx38("span", { className: "stn-date-picker-panel__nav", "aria-hidden": "true" })
+  return /* @__PURE__ */ 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" })
     ] }),
-    /* @__PURE__ */ jsxs30("table", { className: "stn-date-picker-content", children: [
-      /* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsx38("tr", { children: STN_DATE_PICKER_WEEKDAYS.map((label) => /* @__PURE__ */ jsx38("th", { scope: "col", children: label }, label)) }) }),
-      /* @__PURE__ */ jsx38("tbody", { children: Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx38("tr", { children: days.slice(row * 7, row * 7 + 7).map((cell) => {
+    /* @__PURE__ */ 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) => {
         const inRange = start && end && isBetweenDays(cell.date, start, end);
         const isStart = start ? isSameDay(cell.date, start) : false;
         const isEnd = end ? isSameDay(cell.date, end) : false;
-        return /* @__PURE__ */ jsx38(
+        return /* @__PURE__ */ jsx39(
           "td",
           {
             className: cn(
@@ -4669,7 +4822,7 @@ function CalendarPanel({ month, range, onPick, onPrev, onNext, showPrev = true,
               isStart && "stn-date-picker-cell--range-start",
               isEnd && "stn-date-picker-cell--range-end"
             ),
-            children: /* @__PURE__ */ jsx38(
+            children: /* @__PURE__ */ jsx39(
               "button",
               {
                 type: "button",
@@ -4691,16 +4844,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__ */ jsxs30("div", { className: "stn-date-picker-time__side", children: [
-    /* @__PURE__ */ jsx38("span", { className: "stn-date-picker-time__label", children: label }),
-    /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-time__columns", children: [
-      /* @__PURE__ */ jsx38(
+  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(
         StnScroll,
         {
           variant: "arrows",
           size: "thin",
           className: "stn-date-picker-time__scroll",
-          children: /* @__PURE__ */ jsx38("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} hour`, children: Array.from({ length: 24 }, (_, h) => /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
+          children: /* @__PURE__ */ jsx39("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} hour`, children: Array.from({ length: 24 }, (_, h) => /* @__PURE__ */ jsx39("li", { children: /* @__PURE__ */ jsx39(
             "button",
             {
               type: "button",
@@ -4711,13 +4864,13 @@ function TimeColumns({ label, value, onChange }) {
           ) }, h)) })
         }
       ),
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         StnScroll,
         {
           variant: "arrows",
           size: "thin",
           className: "stn-date-picker-time__scroll",
-          children: /* @__PURE__ */ jsx38("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} minute`, children: Array.from({ length: 60 }, (_, m) => /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
+          children: /* @__PURE__ */ jsx39("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} minute`, children: Array.from({ length: 60 }, (_, m) => /* @__PURE__ */ jsx39("li", { children: /* @__PURE__ */ jsx39(
             "button",
             {
               type: "button",
@@ -4728,13 +4881,13 @@ function TimeColumns({ label, value, onChange }) {
           ) }, m)) })
         }
       ),
-      /* @__PURE__ */ jsx38(
+      /* @__PURE__ */ jsx39(
         StnScroll,
         {
           variant: "arrows",
           size: "thin",
           className: "stn-date-picker-time__scroll",
-          children: /* @__PURE__ */ jsx38("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} second`, children: Array.from({ length: 60 }, (_, s) => /* @__PURE__ */ jsx38("li", { children: /* @__PURE__ */ jsx38(
+          children: /* @__PURE__ */ jsx39("ul", { className: "stn-date-picker-time__column", "aria-label": `${label} second`, children: Array.from({ length: 60 }, (_, s) => /* @__PURE__ */ jsx39("li", { children: /* @__PURE__ */ jsx39(
             "button",
             {
               type: "button",
@@ -4759,9 +4912,9 @@ function StnDateRangePicker({
   style,
   anchorRect
 }) {
-  const titleId = useId13();
+  const titleId = useId14();
   const [draft, setDraft] = useDraftRange(value, open);
-  const [leftMonth, setLeftMonth] = useState11(() => startOfMonth(draft.start ?? draft.end ?? /* @__PURE__ */ new Date()));
+  const [leftMonth, setLeftMonth] = useState12(() => startOfMonth(draft.start ?? draft.end ?? /* @__PURE__ */ new Date()));
   useEffect8(() => {
     if (!open) return;
     const anchor = draft.start ?? draft.end ?? /* @__PURE__ */ new Date();
@@ -4813,7 +4966,7 @@ function StnDateRangePicker({
     left: anchorRect.left,
     ...style
   } : style ?? {};
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       className: cn("stn-date-picker-dropdown", className),
@@ -4821,10 +4974,10 @@ function StnDateRangePicker({
       role: "dialog",
       "aria-modal": "false",
       "aria-labelledby": titleId,
-      children: /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-dropdown__body", children: [
-        /* @__PURE__ */ jsx38("span", { id: titleId, className: "stn-sf__visually-hidden", children: "Date range picker" }),
-        /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-dropdown__panels", children: [
-          /* @__PURE__ */ jsx38(
+      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(
             CalendarPanel,
             {
               month: leftMonth,
@@ -4835,7 +4988,7 @@ function StnDateRangePicker({
               showNext: false
             }
           ),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             CalendarPanel,
             {
               month: rightMonth,
@@ -4847,8 +5000,8 @@ function StnDateRangePicker({
             }
           )
         ] }),
-        showTime ? /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-time", children: [
-          /* @__PURE__ */ jsx38(
+        showTime ? /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-time", children: [
+          /* @__PURE__ */ jsx39(
             TimeColumns,
             {
               label: "\uC2DC\uC791",
@@ -4856,7 +5009,7 @@ function StnDateRangePicker({
               onChange: (start) => updateDraft({ ...draft, start })
             }
           ),
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(
             TimeColumns,
             {
               label: "\uC885\uB8CC",
@@ -4865,16 +5018,16 @@ function StnDateRangePicker({
             }
           )
         ] }) : null,
-        /* @__PURE__ */ jsx38("div", { className: "stn-date-picker-footer", children: /* @__PURE__ */ jsx38(StnButton, { size: "md", variant: "contained", onClick: handleApply, disabled: !draft.start || !draft.end, children: "\uD655\uC778" }) })
+        /* @__PURE__ */ jsx39("div", { className: "stn-date-picker-footer", children: /* @__PURE__ */ jsx39(StnButton, { size: "md", variant: "contained", onClick: handleApply, disabled: !draft.start || !draft.end, children: "\uD655\uC778" }) })
       ] })
     }
   );
 }
 
 // src/components/datePicker/StnDateRangePickerField.tsx
-import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
 function useControllableRange(controlled, defaultValue, onChange) {
-  const [internal, setInternal] = useState12(defaultValue);
+  const [internal, setInternal] = useState13(defaultValue);
   const value = controlled ?? internal;
   const setValue = useCallback7(
     (next) => {
@@ -4906,8 +5059,8 @@ function StnDateRangePickerField({
 }) {
   const format = formatProp ?? (showTime ? formatStnDateRangeFieldValue2 : formatDateOnly);
   const [value, setValue] = useControllableRange(valueProp, defaultValue, onChange);
-  const [open, setOpen] = useState12(false);
-  const [anchorRect, setAnchorRect] = useState12(null);
+  const [open, setOpen] = useState13(false);
+  const [anchorRect, setAnchorRect] = useState13(null);
   const rootRef = useRef6(null);
   const triggerRef = useRef6(null);
   const panelRef = useRef6(null);
@@ -4944,8 +5097,8 @@ function StnDateRangePickerField({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open]);
-  return /* @__PURE__ */ jsxs31("div", { ref: rootRef, className: cn("stn-date-picker-field", className), children: [
-    /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs32("div", { ref: rootRef, className: cn("stn-date-picker-field", className), children: [
+    /* @__PURE__ */ jsx40(
       StnDateRangeField,
       {
         ref: triggerRef,
@@ -4965,7 +5118,7 @@ function StnDateRangePickerField({
       }
     ),
     open && typeof document !== "undefined" ? createPortal2(
-      /* @__PURE__ */ jsx39("div", { ref: panelRef, children: /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40("div", { ref: panelRef, children: /* @__PURE__ */ jsx40(
         StnDateRangePicker,
         {
           open: true,
@@ -4984,13 +5137,13 @@ function StnDateRangePickerField({
 }
 
 // src/patterns/search/StnSearchRequirementBarDemo.tsx
-import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs33 } 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__ */ jsxs32(StnSearchRequirementBar, { className, children: [
-    /* @__PURE__ */ jsxs32(StnSearchRequirementBar.Fields, { children: [
-      /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs33(StnSearchRequirementBar, { className, children: [
+    /* @__PURE__ */ jsxs33(StnSearchRequirementBar.Fields, { children: [
+      /* @__PURE__ */ jsx41(
         StnTextField,
         {
           label: demo.reportTypeText.label,
@@ -5000,7 +5153,7 @@ function StnSearchRequirementBarDemo({ onSearch, onExport, className }) {
           "aria-label": demo.reportTypeText.label
         }
       ),
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx41(
         StnDropdown,
         {
           label: demo.reportTypeSelect.label,
@@ -5011,7 +5164,7 @@ function StnSearchRequirementBarDemo({ onSearch, onExport, className }) {
           "aria-label": demo.reportTypeSelect.label
         }
       ),
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx41(
         StnDropdown,
         {
           label: demo.periodType.label,
@@ -5022,7 +5175,7 @@ function StnSearchRequirementBarDemo({ onSearch, onExport, className }) {
           "aria-label": demo.periodType.label
         }
       ),
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx41(
         StnDateRangePickerField,
         {
           label: demo.period.label,
@@ -5036,8 +5189,8 @@ function StnSearchRequirementBarDemo({ onSearch, onExport, className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx40(StnSearchRequirementBar.SearchButton, { onClick: onSearch }),
-    /* @__PURE__ */ jsx40(StnSearchRequirementBar.Export, { onClick: onExport })
+    /* @__PURE__ */ jsx41(StnSearchRequirementBar.SearchButton, { onClick: onSearch }),
+    /* @__PURE__ */ jsx41(StnSearchRequirementBar.Export, { onClick: onExport })
   ] });
 }
 
@@ -5051,8 +5204,8 @@ import {
 } from "@stn-uiux/pub-ui/data/stnHeader";
 
 // src/patterns/header/StnHeader.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
-function variantClass5(variant) {
+import { jsx as jsx42 } from "react/jsx-runtime";
+function variantClass6(variant) {
   if (variant === "page") return "stn-header--page";
   return void 0;
 }
@@ -5078,12 +5231,12 @@ function StnHeader({
     ...dynamicStyles,
     ...style
   };
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "header",
     {
       className: cn(
         "stn-header",
-        variantClass5(variant),
+        variantClass6(variant),
         isNamedPadding ? `padding-${padding}` : void 0,
         isNamedGap ? `gap-${gap}` : void 0,
         className
@@ -5096,20 +5249,20 @@ function StnHeader({
   );
 }
 function StnHeaderLeft({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx41("div", { className: cn("stn-header__left", className), "data-stn-header-region": "left", ...rest, children });
+  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header__left", className), "data-stn-header-region": "left", ...rest, children });
 }
 function StnHeaderCenter({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx41("div", { className: cn("stn-header__center", className), "data-stn-header-region": "center", ...rest, children });
+  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header__center", className), "data-stn-header-region": "center", ...rest, children });
 }
 function StnHeaderRight({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx41("div", { className: cn("stn-header__right", className), "data-stn-header-region": "right", ...rest, children });
+  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header__right", className), "data-stn-header-region": "right", ...rest, children });
 }
 StnHeader.Left = StnHeaderLeft;
 StnHeader.Center = StnHeaderCenter;
 StnHeader.Right = StnHeaderRight;
 function StnHeaderPageTitle({ children, className, title, ...rest }) {
   const autoTitle = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "h1",
     {
       className: cn("stn-header__page-title", className),
@@ -5121,7 +5274,7 @@ function StnHeaderPageTitle({ children, className, title, ...rest }) {
 }
 function StnHeaderSubTitle({ children, className, title, ...rest }) {
   const autoTitle = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "span",
     {
       className: cn("stn-header__subtitle", className),
@@ -5133,7 +5286,7 @@ function StnHeaderSubTitle({ children, className, title, ...rest }) {
 }
 function StnHeaderContextTitle({ children, className, title, ...rest }) {
   const autoTitle = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "span",
     {
       className: cn("stn-header__context-title", className),
@@ -5144,7 +5297,7 @@ function StnHeaderContextTitle({ children, className, title, ...rest }) {
   );
 }
 function StnHeaderToolbar({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx41("div", { className: cn("stn-header-toolbar", className), "data-stn-header-toolbar": true, ...rest, children });
+  return /* @__PURE__ */ jsx42("div", { className: cn("stn-header-toolbar", className), "data-stn-header-toolbar": true, ...rest, children });
 }
 
 // src/index.ts
@@ -5162,7 +5315,7 @@ import {
   STN_LAYER0_BACKGROUND_DEMO_IMAGES,
   STN_LAYER0_MAP_LIGHT_OVERLAY
 } from "@stn-uiux/pub-ui/data/stnLayer0Background";
-import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs34 } 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))}%`;
@@ -5211,15 +5364,15 @@ function StnLayer0Background({
   const isImage = kind === "image" || Boolean(src || srcDark);
   if (isImage) {
     const paired = Boolean(src && srcDark);
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx43(
       "div",
       {
         className: cn("stn-layer0-bg", "image", className),
         "aria-hidden": alt === "" ? true : void 0,
         style: { ...overlayStyle(overlay), ...style },
         ...rest,
-        children: /* @__PURE__ */ jsxs33("div", { className: "stn-layer0-bg__media", children: [
-          src ? /* @__PURE__ */ jsx42(
+        children: /* @__PURE__ */ jsxs34("div", { className: "stn-layer0-bg__media", children: [
+          src ? /* @__PURE__ */ jsx43(
             "img",
             {
               className: cn("stn-layer0-bg__img", paired && "light"),
@@ -5228,7 +5381,7 @@ function StnLayer0Background({
               decoding: "async"
             }
           ) : null,
-          srcDark ? /* @__PURE__ */ jsx42(
+          srcDark ? /* @__PURE__ */ jsx43(
             "img",
             {
               className: cn("stn-layer0-bg__img", paired ? "dark" : void 0),
@@ -5237,13 +5390,13 @@ function StnLayer0Background({
               decoding: "async"
             }
           ) : null,
-          overlay != null && overlay > 0 ? /* @__PURE__ */ jsx42("div", { className: "stn-layer0-bg__overlay", "aria-hidden": "true" }) : null,
-          overlayDarkRadial ? /* @__PURE__ */ jsx42("div", { className: "stn-layer0-bg__overlay radial", "aria-hidden": "true" }) : null
+          overlay != null && overlay > 0 ? /* @__PURE__ */ jsx43("div", { className: "stn-layer0-bg__overlay", "aria-hidden": "true" }) : null,
+          overlayDarkRadial ? /* @__PURE__ */ jsx43("div", { className: "stn-layer0-bg__overlay radial", "aria-hidden": "true" }) : null
         ] })
       }
     );
   }
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       className: cn("stn-layer0-bg", "color", color, className),
@@ -5280,7 +5433,7 @@ import {
 
 // src/components/StnEventBanner.tsx
 import React2 from "react";
-import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
 var SEVERITY_ICONS2 = {
   critical: "fill/alert4",
   major: "fill/alert3",
@@ -5288,7 +5441,7 @@ var SEVERITY_ICONS2 = {
   warning: "fill/alert1"
 };
 function DefaultTriangleIcon() {
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "svg",
     {
       width: "20",
@@ -5298,7 +5451,7 @@ function DefaultTriangleIcon() {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "path",
           {
             d: "M10.29 3.86L1.82 18A2 2 0 0 0 3.54 21H20.46A2 2 0 0 0 22.18 18L13.71 3.86A2 2 0 0 0 10.29 3.86Z",
@@ -5308,17 +5461,17 @@ function DefaultTriangleIcon() {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx43("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx43("circle", { cx: "12", cy: "17", r: "1", fill: "currentColor" })
+        /* @__PURE__ */ jsx44("line", { x1: "12", y1: "9", x2: "12", y2: "13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx44("circle", { cx: "12", cy: "17", r: "1", fill: "currentColor" })
       ]
     }
   );
 }
 function resolveDefaultIcon(severity) {
   if (severity === "critical") {
-    return /* @__PURE__ */ jsx43(DefaultTriangleIcon, {});
+    return /* @__PURE__ */ jsx44(DefaultTriangleIcon, {});
   }
-  return /* @__PURE__ */ jsx43(StnIcon, { name: SEVERITY_ICONS2[severity] || "fill/alert4", size: 20 });
+  return /* @__PURE__ */ jsx44(StnIcon, { name: SEVERITY_ICONS2[severity] || "fill/alert4", size: 20 });
 }
 var StnEventBanner = React2.forwardRef(
   ({
@@ -5337,7 +5490,7 @@ var StnEventBanner = React2.forwardRef(
     id,
     ...restProps
   }, ref) => {
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(
       "div",
       {
         ref,
@@ -5354,16 +5507,16 @@ var StnEventBanner = React2.forwardRef(
         ),
         ...restProps,
         children: [
-          /* @__PURE__ */ jsxs34("div", { className: "stn-event-banner__left", children: [
-            /* @__PURE__ */ jsx43("div", { className: "stn-event-banner__icon-wrap", children: icon ?? resolveDefaultIcon(severity) }),
-            /* @__PURE__ */ jsxs34("div", { className: "stn-event-banner__text", children: [
-              title && /* @__PURE__ */ jsx43("span", { className: "stn-event-banner__title", title: typeof title === "string" ? title : void 0, children: title }),
-              time && /* @__PURE__ */ jsx43("span", { className: "stn-event-banner__time", title: typeof time === "string" ? time : void 0, children: time })
+          /* @__PURE__ */ 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__ */ jsxs34("div", { className: "stn-event-banner__actions", children: [
+          /* @__PURE__ */ jsxs35("div", { className: "stn-event-banner__actions", children: [
             actions,
-            actionText && /* @__PURE__ */ jsx43(
+            actionText && /* @__PURE__ */ jsx44(
               "button",
               {
                 type: "button",
@@ -5372,7 +5525,7 @@ var StnEventBanner = React2.forwardRef(
                 children: actionText
               }
             ),
-            onClose && /* @__PURE__ */ jsx43(
+            onClose && /* @__PURE__ */ jsx44(
               "button",
               {
                 type: "button",
@@ -5391,9 +5544,9 @@ var StnEventBanner = React2.forwardRef(
 StnEventBanner.displayName = "StnEventBanner";
 
 // src/patterns/scaffold/StnLoadingSkeleton.tsx
-import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
 function StnLoadingSkeletonLine({ width = "full", className, style, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn(
@@ -5409,7 +5562,7 @@ function StnLoadingSkeletonLine({ width = "full", className, style, ...rest }) {
   );
 }
 function StnLoadingSkeletonBlock({ minHeight = 48, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn("stn-loading-skeleton__block", className),
@@ -5420,7 +5573,7 @@ function StnLoadingSkeletonBlock({ minHeight = 48, className, style, ...rest })
   );
 }
 function StnLoadingSkeletonCircle({ size = 40, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn("stn-loading-skeleton__circle", className),
@@ -5431,7 +5584,7 @@ function StnLoadingSkeletonCircle({ size = 40, className, style, ...rest }) {
   );
 }
 function StnLoadingSkeletonProfile({ avatarSize = 40, className, style, ...rest }) {
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       className: cn("stn-loading-skeleton--profile", className),
@@ -5440,17 +5593,17 @@ function StnLoadingSkeletonProfile({ avatarSize = 40, className, style, ...rest
       "aria-label": "\uD504\uB85C\uD544 \uB85C\uB529 \uC911",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx44(StnLoadingSkeletonCircle, { size: avatarSize }),
-        /* @__PURE__ */ jsxs35("div", { className: "stn-loading-skeleton__profile-content", children: [
-          /* @__PURE__ */ jsx44(StnLoadingSkeletonLine, { width: "medium" }),
-          /* @__PURE__ */ jsx44(StnLoadingSkeletonLine, { width: "short" })
+        /* @__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" })
         ] })
       ]
     }
   );
 }
 function StnLoadingSkeletonWidget({ lines = 4, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn("stn-loading-skeleton", "stn-loading-skeleton--widget", className),
@@ -5458,12 +5611,12 @@ function StnLoadingSkeletonWidget({ lines = 4, className, style, ...rest }) {
       "aria-busy": "true",
       "aria-label": "\uB85C\uB529 \uC911",
       ...rest,
-      children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx44(StnLoadingSkeletonLine, { width: i % 3 === 0 ? "short" : i % 2 === 0 ? "medium" : "full" }, i))
+      children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width: i % 3 === 0 ? "short" : i % 2 === 0 ? "medium" : "full" }, i))
     }
   );
 }
 function StnLoadingSkeletonTable({ rows = 5, cols = 4, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn("stn-loading-skeleton", "stn-loading-skeleton--table", className),
@@ -5471,7 +5624,7 @@ function StnLoadingSkeletonTable({ rows = 5, cols = 4, className, style, ...rest
       "aria-busy": "true",
       "aria-label": "\uD14C\uC774\uBE14 \uB85C\uB529 \uC911",
       ...rest,
-      children: Array.from({ length: rows }, (_, row) => /* @__PURE__ */ jsx44("div", { className: "stn-loading-skeleton__table-row", children: Array.from({ length: cols }, (_2, col) => /* @__PURE__ */ jsx44(StnLoadingSkeletonLine, {}, col)) }, row))
+      children: Array.from({ length: rows }, (_, row) => /* @__PURE__ */ jsx45("div", { className: "stn-loading-skeleton__table-row", children: Array.from({ length: cols }, (_2, col) => /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, {}, col)) }, row))
     }
   );
 }
@@ -5490,23 +5643,23 @@ function StnLoadingSkeletonRoot({
   ...rest
 }) {
   if (children != null) {
-    return /* @__PURE__ */ jsx44("div", { className: cn("stn-loading-skeleton", className), style, "aria-busy": "true", ...rest, children });
+    return /* @__PURE__ */ jsx45("div", { className: cn("stn-loading-skeleton", className), style, "aria-busy": "true", ...rest, children });
   }
   const resolvedVariant = variant ?? "line";
   switch (resolvedVariant) {
     case "circle":
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonCircle, { size, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonCircle, { size, className, style, ...rest });
     case "block":
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonBlock, { minHeight, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonBlock, { minHeight, className, style, ...rest });
     case "profile":
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonProfile, { avatarSize: avatarSize ?? size, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonProfile, { avatarSize: avatarSize ?? size, className, style, ...rest });
     case "widget":
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonWidget, { lines, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonWidget, { lines, className, style, ...rest });
     case "table":
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonTable, { rows, cols, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonTable, { rows, cols, className, style, ...rest });
     case "line":
     default:
-      return /* @__PURE__ */ jsx44(StnLoadingSkeletonLine, { width, className, style, ...rest });
+      return /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width, className, style, ...rest });
   }
 }
 var StnLoadingSkeleton = Object.assign(StnLoadingSkeletonRoot, {
@@ -5519,7 +5672,7 @@ var StnLoadingSkeleton = Object.assign(StnLoadingSkeletonRoot, {
 });
 
 // src/components/topology/StnTopologyRing.tsx
-import { useId as useId14 } from "react";
+import { useId as useId15 } from "react";
 
 // src/components/topology/stnTopologyShared.ts
 var STN_TOPOLOGY_NODE_SHAPES = [
@@ -5627,7 +5780,7 @@ function ringOrbitRadius(orbit, ringCount, baseRadius, gap = 36) {
 }
 
 // src/components/topology/StnTopologyNodeMark.tsx
-import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
 function renderTopologyIcon(icon, color, px) {
   if (!icon) return null;
   if (typeof icon !== "string") return icon;
@@ -5643,56 +5796,56 @@ function renderTopologyIcon(icon, color, px) {
   };
   switch (icon) {
     case "server":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx45("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx45("line", { x1: "6", y1: "6", x2: "6.01", y2: "6" }),
-        /* @__PURE__ */ jsx45("line", { x1: "6", y1: "18", x2: "6.01", y2: "18" })
+      return /* @__PURE__ */ 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" })
       ] });
     case "cloud":
-      return /* @__PURE__ */ jsx45("svg", { ...iconProps, children: /* @__PURE__ */ jsx45("path", { d: "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" }) });
+      return /* @__PURE__ */ jsx46("svg", { ...iconProps, children: /* @__PURE__ */ jsx46("path", { d: "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" }) });
     case "ai":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
-        /* @__PURE__ */ jsx45("rect", { x: "9", y: "9", width: "6", height: "6" }),
-        /* @__PURE__ */ jsx45("line", { x1: "9", y1: "1", x2: "9", y2: "4" }),
-        /* @__PURE__ */ jsx45("line", { x1: "15", y1: "1", x2: "15", y2: "4" }),
-        /* @__PURE__ */ jsx45("line", { x1: "9", y1: "20", x2: "9", y2: "23" }),
-        /* @__PURE__ */ jsx45("line", { x1: "15", y1: "20", x2: "15", y2: "23" }),
-        /* @__PURE__ */ jsx45("line", { x1: "20", y1: "9", x2: "23", y2: "9" }),
-        /* @__PURE__ */ jsx45("line", { x1: "20", y1: "14", x2: "23", y2: "14" }),
-        /* @__PURE__ */ jsx45("line", { x1: "1", y1: "9", x2: "4", y2: "9" }),
-        /* @__PURE__ */ jsx45("line", { x1: "1", y1: "14", x2: "4", y2: "14" })
+      return /* @__PURE__ */ 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" })
       ] });
     case "network":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("rect", { x: "2", y: "2", width: "6", height: "6", rx: "1" }),
-        /* @__PURE__ */ jsx45("rect", { x: "16", y: "2", width: "6", height: "6", rx: "1" }),
-        /* @__PURE__ */ jsx45("rect", { x: "9", y: "16", width: "6", height: "6", rx: "1" }),
-        /* @__PURE__ */ jsx45("line", { x1: "5", y1: "8", x2: "5", y2: "12" }),
-        /* @__PURE__ */ jsx45("line", { x1: "19", y1: "8", x2: "19", y2: "12" }),
-        /* @__PURE__ */ jsx45("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-        /* @__PURE__ */ jsx45("line", { x1: "12", y1: "12", x2: "12", y2: "16" })
+      return /* @__PURE__ */ 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" })
       ] });
     case "shield":
-      return /* @__PURE__ */ jsx45("svg", { ...iconProps, children: /* @__PURE__ */ jsx45("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
+      return /* @__PURE__ */ jsx46("svg", { ...iconProps, children: /* @__PURE__ */ jsx46("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
     case "user":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
-        /* @__PURE__ */ jsx45("circle", { cx: "12", cy: "7", r: "4" })
+      return /* @__PURE__ */ 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" })
       ] });
     case "database":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
-        /* @__PURE__ */ jsx45("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }),
-        /* @__PURE__ */ jsx45("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" })
+      return /* @__PURE__ */ 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" })
       ] });
     case "wifi":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
-        /* @__PURE__ */ jsx45("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
-        /* @__PURE__ */ jsx45("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
-        /* @__PURE__ */ jsx45("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
-        /* @__PURE__ */ jsx45("line", { x1: "12", y1: "20", x2: "12.01", y2: "20" })
+      return /* @__PURE__ */ 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" })
       ] });
     default:
       return null;
@@ -5710,11 +5863,11 @@ function NodeShape({
 }) {
   const filter = glow ? `drop-shadow(0 0 8px ${glow})` : "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4))";
   if (shape === "circle") {
-    return /* @__PURE__ */ jsx45("circle", { cx: x, cy: y, r, fill, stroke, strokeWidth, style: { filter } });
+    return /* @__PURE__ */ jsx46("circle", { cx: x, cy: y, r, fill, stroke, strokeWidth, style: { filter } });
   }
   if (shape === "square") {
     const size = r * 2;
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx46(
       "rect",
       {
         x: x - r,
@@ -5729,7 +5882,7 @@ function NodeShape({
       }
     );
   }
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "polygon",
     {
       points: topologyShapePoints(shape, x, y, r),
@@ -5772,7 +5925,7 @@ function StnTopologyNodeMark({
   const countText = formatTopologyCount(count);
   const iconPx = metrics.icon;
   const showCornerBadge = !isCount && count != null && count !== "";
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "g",
     {
       className: cn("stn-topology-node", selected && "stn-topology-node--selected", className),
@@ -5784,7 +5937,7 @@ function StnTopologyNodeMark({
       style: { cursor: onClick ? "pointer" : "default" },
       ...rest,
       children: [
-        isAlert && /* @__PURE__ */ jsxs36(
+        isAlert && /* @__PURE__ */ jsxs37(
           "circle",
           {
             className: "stn-topology-node__pulse",
@@ -5796,13 +5949,13 @@ function StnTopologyNodeMark({
             strokeWidth: "1.5",
             opacity: "0.55",
             children: [
-              /* @__PURE__ */ jsx45("animate", { attributeName: "r", values: `${r + 4};${r + 12};${r + 4}`, dur: "2s", repeatCount: "indefinite" }),
-              /* @__PURE__ */ jsx45("animate", { attributeName: "opacity", values: "0.75;0.15;0.75", dur: "2s", repeatCount: "indefinite" })
+              /* @__PURE__ */ jsx46("animate", { attributeName: "r", values: `${r + 4};${r + 12};${r + 4}`, dur: "2s", repeatCount: "indefinite" }),
+              /* @__PURE__ */ jsx46("animate", { attributeName: "opacity", values: "0.75;0.15;0.75", dur: "2s", repeatCount: "indefinite" })
             ]
           }
         ),
-        selected && /* @__PURE__ */ jsx45("circle", { cx: x, cy: y, r: r + 6, fill: "none", stroke: "#00e5ff", strokeWidth: "1.5", strokeDasharray: "3 3" }),
-        /* @__PURE__ */ jsx45(
+        selected && /* @__PURE__ */ jsx46("circle", { cx: x, cy: y, r: r + 6, fill: "none", stroke: "#00e5ff", strokeWidth: "1.5", strokeDasharray: "3 3" }),
+        /* @__PURE__ */ jsx46(
           NodeShape,
           {
             shape,
@@ -5815,7 +5968,7 @@ function StnTopologyNodeMark({
             glow: isAlert || isCount ? tone.glow : ""
           }
         ),
-        isCount ? /* @__PURE__ */ jsx45(
+        isCount ? /* @__PURE__ */ jsx46(
           "text",
           {
             x,
@@ -5828,10 +5981,10 @@ function StnTopologyNodeMark({
             style: { textShadow: "0 1px 2px rgba(0, 0, 0, 0.85)" },
             children: countText
           }
-        ) : /* @__PURE__ */ jsx45("g", { transform: `translate(${x - iconPx / 2}, ${y - iconPx / 2})`, children: renderTopologyIcon(icon, stroke, iconPx) }),
-        showCornerBadge && /* @__PURE__ */ jsxs36("g", { className: "stn-topology-node__badge", children: [
-          /* @__PURE__ */ jsx45("circle", { cx: x + r * 0.72, cy: y - r * 0.72, r: Math.max(6, r * 0.38), fill: stroke, stroke: "rgba(6,7,15,0.9)", strokeWidth: "1" }),
-          /* @__PURE__ */ jsx45(
+        ) : /* @__PURE__ */ jsx46("g", { transform: `translate(${x - iconPx / 2}, ${y - iconPx / 2})`, children: renderTopologyIcon(icon, stroke, iconPx) }),
+        showCornerBadge && /* @__PURE__ */ 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(
             "text",
             {
               x: x + r * 0.72,
@@ -5845,7 +5998,7 @@ function StnTopologyNodeMark({
             }
           )
         ] }),
-        showLabel && label && /* @__PURE__ */ jsx45(
+        showLabel && label && /* @__PURE__ */ jsx46(
           "text",
           {
             x,
@@ -5858,7 +6011,7 @@ function StnTopologyNodeMark({
             children: label
           }
         ),
-        showStatus && resolvedStatusLabel && /* @__PURE__ */ jsxs36(
+        showStatus && resolvedStatusLabel && /* @__PURE__ */ jsxs37(
           "text",
           {
             x,
@@ -5889,11 +6042,11 @@ function StnTopologyNodePreview({
   const r = STN_TOPOLOGY_NODE_SIZE[size].r;
   const w = width ?? r * 2 + (showLabel ? 88 : 28);
   const h = height ?? r * 2 + (showLabel || showStatus ? 56 : 28);
-  return /* @__PURE__ */ jsx45("svg", { className: "stn-topology-node-preview", width: w, height: h, viewBox: `0 0 ${w} ${h}`, overflow: "visible", children: /* @__PURE__ */ jsx45(StnTopologyNodeMark, { x: w / 2, y: h / 2, size, showLabel, showStatus, ...rest }) });
+  return /* @__PURE__ */ jsx46("svg", { className: "stn-topology-node-preview", width: w, height: h, viewBox: `0 0 ${w} ${h}`, overflow: "visible", children: /* @__PURE__ */ jsx46(StnTopologyNodeMark, { x: w / 2, y: h / 2, size, showLabel, showStatus, ...rest }) });
 }
 
 // src/components/topology/StnTopologyRing.tsx
-import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
 function StnTopologyRing({
   core = {
     title: "\uC5D0\uC2A4\uD2F0\uC5D4\uC778\uD3EC\uD14D",
@@ -5914,8 +6067,8 @@ function StnTopologyRing({
   style,
   ...rest
 }) {
-  const gradientId = useId14();
-  const coreGlowId = useId14();
+  const gradientId = useId15();
+  const coreGlowId = useId15();
   const safeRingCount = Math.max(1, ringCount);
   const radii = Array.from(
     { length: safeRingCount },
@@ -5952,17 +6105,17 @@ function StnTopologyRing({
     };
   });
   if (loading) {
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx47(
       "div",
       {
         className: cn("stn-topology-ring", "stn-topology-ring--loading", className),
         style,
         ...rest,
-        children: /* @__PURE__ */ jsx46("div", { className: "stn-topology-ring__loading-label", children: "\uD1A0\uD3F4\uB85C\uC9C0 \uB9C1 \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911..." })
+        children: /* @__PURE__ */ jsx47("div", { className: "stn-topology-ring__loading-label", children: "\uD1A0\uD3F4\uB85C\uC9C0 \uB9C1 \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911..." })
       }
     );
   }
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     "div",
     {
       className: cn("stn-topology-ring", className),
@@ -5970,7 +6123,7 @@ function StnTopologyRing({
       "data-stn-topology-ring": true,
       "data-ring-count": safeRingCount,
       ...rest,
-      children: /* @__PURE__ */ jsxs37(
+      children: /* @__PURE__ */ jsxs38(
         "svg",
         {
           className: "stn-topology-ring__svg",
@@ -5979,19 +6132,19 @@ function StnTopologyRing({
           viewBox: `0 0 ${vb} ${vb}`,
           overflow: "visible",
           children: [
-            /* @__PURE__ */ jsxs37("defs", { children: [
-              /* @__PURE__ */ jsxs37("radialGradient", { id: coreGlowId, cx: "50%", cy: "50%", r: "50%", children: [
-                /* @__PURE__ */ jsx46("stop", { offset: "0%", stopColor: "#722ed1", stopOpacity: "0.8" }),
-                /* @__PURE__ */ jsx46("stop", { offset: "100%", stopColor: "#120338", stopOpacity: "0" })
+            /* @__PURE__ */ 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__ */ jsxs37("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-                /* @__PURE__ */ jsx46("stop", { offset: "0%", stopColor: "#00e5ff", stopOpacity: "0.4" }),
-                /* @__PURE__ */ jsx46("stop", { offset: "100%", stopColor: "#722ed1", stopOpacity: "0.4" })
+              /* @__PURE__ */ 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" })
               ] })
             ] }),
             radii.map((r, idx) => {
               const isMain = idx + 1 === mainOrbit;
-              return /* @__PURE__ */ jsx46(
+              return /* @__PURE__ */ jsx47(
                 "circle",
                 {
                   cx: centerX,
@@ -6005,7 +6158,7 @@ function StnTopologyRing({
                 `orbit-${idx}`
               );
             }),
-            connectionLineStyle !== "none" && calculatedNodes.map((node) => /* @__PURE__ */ jsx46(
+            connectionLineStyle !== "none" && calculatedNodes.map((node) => /* @__PURE__ */ jsx47(
               "line",
               {
                 x1: centerX,
@@ -6018,9 +6171,9 @@ function StnTopologyRing({
               },
               `line-${node.id}`
             )),
-            /* @__PURE__ */ jsxs37("g", { className: "stn-topology-ring__core", children: [
-              /* @__PURE__ */ jsx46("circle", { cx: centerX, cy: centerY, r: 54, fill: `url(#${coreGlowId})` }),
-              /* @__PURE__ */ jsx46(
+            /* @__PURE__ */ jsxs38("g", { className: "stn-topology-ring__core", children: [
+              /* @__PURE__ */ jsx47("circle", { cx: centerX, cy: centerY, r: 54, fill: `url(#${coreGlowId})` }),
+              /* @__PURE__ */ jsx47(
                 "circle",
                 {
                   cx: centerX,
@@ -6032,7 +6185,7 @@ function StnTopologyRing({
                   style: { filter: "drop-shadow(0 0 12px rgba(114, 46, 209, 0.6))" }
                 }
               ),
-              core.subTitle && /* @__PURE__ */ jsx46(
+              core.subTitle && /* @__PURE__ */ jsx47(
                 "text",
                 {
                   x: centerX,
@@ -6045,13 +6198,13 @@ function StnTopologyRing({
                   children: core.subTitle
                 }
               ),
-              core.title && /* @__PURE__ */ jsx46("text", { x: centerX, y: centerY + 8, textAnchor: "middle", fill: "#f0f2f5", fontSize: "10", fontWeight: "600", children: core.title }),
-              /* @__PURE__ */ jsxs37("text", { x: centerX, y: centerY + 22, textAnchor: "middle", fill: coreColor, fontSize: "9", fontWeight: "500", children: [
+              core.title && /* @__PURE__ */ jsx47("text", { x: centerX, y: centerY + 8, textAnchor: "middle", fill: "#f0f2f5", fontSize: "10", fontWeight: "600", children: core.title }),
+              /* @__PURE__ */ jsxs38("text", { x: centerX, y: centerY + 22, textAnchor: "middle", fill: coreColor, fontSize: "9", fontWeight: "500", children: [
                 "\u25CF ",
                 coreStatusLabel
               ] })
             ] }),
-            calculatedNodes.map((node) => /* @__PURE__ */ jsx46(
+            calculatedNodes.map((node) => /* @__PURE__ */ jsx47(
               StnTopologyNodeMark,
               {
                 x: node.x,
@@ -6079,8 +6232,8 @@ function StnTopologyRing({
 }
 
 // src/components/topology/StnTopologyGraph.tsx
-import { useState as useState13 } from "react";
-import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useState as useState14 } from "react";
+import { jsx as jsx48, jsxs as jsxs39 } 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 },
@@ -6114,12 +6267,12 @@ function StnTopologyGraph({
   style,
   ...rest
 }) {
-  const [viewMode, setViewMode] = useState13(defaultMode);
+  const [viewMode, setViewMode] = useState14(defaultMode);
   if (loading) {
-    return /* @__PURE__ */ jsx47("div", { className: cn("stn-topology-graph", "stn-topology-graph--loading", className), style, ...rest, children: /* @__PURE__ */ jsx47("div", { className: "stn-topology-graph__loading-label", children: "\uD1A0\uD3F4\uB85C\uC9C0 \uCE94\uBC84\uC2A4 \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911..." }) });
+    return /* @__PURE__ */ jsx48("div", { className: cn("stn-topology-graph", "stn-topology-graph--loading", className), style, ...rest, children: /* @__PURE__ */ jsx48("div", { className: "stn-topology-graph__loading-label", children: "\uD1A0\uD3F4\uB85C\uC9C0 \uCE94\uBC84\uC2A4 \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911..." }) });
   }
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       className: cn("stn-topology-graph", className),
@@ -6128,7 +6281,7 @@ function StnTopologyGraph({
       "data-view-mode": viewMode,
       ...rest,
       children: [
-        showModeToggle && /* @__PURE__ */ jsx47("div", { className: "stn-topology-graph__mode", children: /* @__PURE__ */ jsx47(
+        showModeToggle && /* @__PURE__ */ jsx48("div", { className: "stn-topology-graph__mode", children: /* @__PURE__ */ jsx48(
           StnSegmented,
           {
             size: "sm",
@@ -6140,23 +6293,23 @@ function StnTopologyGraph({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs38("svg", { className: "stn-topology-graph__svg", width: "100%", height: "100%", viewBox: "0 0 400 300", overflow: "visible", children: [
-          viewMode === "3D" ? /* @__PURE__ */ jsxs38("g", { opacity: "0.6", children: [
-            /* @__PURE__ */ jsx47("line", { x1: "60", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.06)", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsx47("line", { x1: "130", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsx47("line", { x1: "200", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.14)", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsx47("line", { x1: "270", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsx47("line", { x1: "340", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.06)", strokeDasharray: "3 3" }),
-            /* @__PURE__ */ jsx47("line", { x1: "100", y1: "230", x2: "300", y2: "230", stroke: "rgba(255,255,255,0.06)" }),
-            /* @__PURE__ */ jsx47("line", { x1: "130", y1: "190", x2: "270", y2: "190", stroke: "rgba(255,255,255,0.06)" }),
-            /* @__PURE__ */ jsx47("line", { x1: "160", y1: "140", x2: "240", y2: "140", stroke: "rgba(255,255,255,0.06)" })
-          ] }) : /* @__PURE__ */ jsxs38("g", { opacity: "0.3", children: [
-            /* @__PURE__ */ jsx47("line", { x1: "40", y1: "60", x2: "360", y2: "60", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
-            /* @__PURE__ */ jsx47("line", { x1: "40", y1: "150", x2: "360", y2: "150", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
-            /* @__PURE__ */ jsx47("line", { x1: "40", y1: "240", x2: "360", y2: "240", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
-            /* @__PURE__ */ jsx47("line", { x1: "100", y1: "20", x2: "100", y2: "280", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
-            /* @__PURE__ */ jsx47("line", { x1: "200", y1: "20", x2: "200", y2: "280", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
-            /* @__PURE__ */ jsx47("line", { x1: "300", y1: "20", x2: "300", y2: "280", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" })
+        /* @__PURE__ */ 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" })
           ] }),
           links.map((link, idx) => {
             const s = nodeMap.get(link.source);
@@ -6164,7 +6317,7 @@ function StnTopologyGraph({
             if (!s || !t) return null;
             const isAlert = s.status === "critical" || t.status === "critical" || link.status === "critical";
             const strokeColor = isAlert ? "rgba(255, 77, 79, 0.65)" : "rgba(255, 255, 255, 0.2)";
-            return /* @__PURE__ */ jsx47(
+            return /* @__PURE__ */ jsx48(
               "line",
               {
                 x1: s.x,
@@ -6181,7 +6334,7 @@ function StnTopologyGraph({
           nodes.map((node) => {
             const status = node.status ?? "normal";
             const isCore = Boolean(node.isCore);
-            return /* @__PURE__ */ jsx47(
+            return /* @__PURE__ */ jsx48(
               StnTopologyNodeMark,
               {
                 x: node.x,
@@ -6204,17 +6357,17 @@ function StnTopologyGraph({
             );
           })
         ] }),
-        showMinimap && /* @__PURE__ */ jsxs38("div", { className: "stn-topology-graph__minimap", children: [
-          /* @__PURE__ */ jsxs38("div", { className: "stn-topology-graph__minimap-head", children: [
-            /* @__PURE__ */ jsx47("span", { children: "\uBBF8\uB9AC\uBCF4\uAE30" }),
-            /* @__PURE__ */ jsx47("span", { children: "\u2014" })
+        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" })
           ] }),
-          /* @__PURE__ */ jsxs38("svg", { width: "100%", height: "40", viewBox: "0 0 100 50", children: [
-            /* @__PURE__ */ jsx47("polyline", { points: "50,10 40,25 50,40 60,30", fill: "none", stroke: "rgba(255,77,79,0.5)", strokeWidth: "1" }),
-            /* @__PURE__ */ jsx47("circle", { cx: "50", cy: "10", r: "2", fill: STN_TOPOLOGY_STATUS_COLORS.critical.main }),
-            /* @__PURE__ */ jsx47("circle", { cx: "40", cy: "25", r: "2.5", fill: STN_TOPOLOGY_STATUS_COLORS.critical.main }),
-            /* @__PURE__ */ jsx47("circle", { cx: "50", cy: "40", r: "2", fill: "#00e5ff" }),
-            /* @__PURE__ */ jsx47("circle", { cx: "60", cy: "30", r: "2", fill: STN_TOPOLOGY_STATUS_COLORS.normal.main })
+          /* @__PURE__ */ 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 })
           ] })
         ] })
       ]
@@ -6223,7 +6376,7 @@ function StnTopologyGraph({
 }
 
 // src/components/StnWidget.tsx
-import { Fragment as Fragment5, jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
 var SHELL_PUB_CLASS = {
   card: "",
   "fault-panel": "",
@@ -6306,20 +6459,20 @@ function StnWidgetPeriodText({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx48("span", { className: cn("stn-widget__period-text", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("span", { className: cn("stn-widget__period-text", className), ...rest, children });
 }
 function StnWidgetPeriodSelect({
   label,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     StnButton,
     {
       variant: "ghost",
       size: "sm",
       shape: "square",
-      icon: /* @__PURE__ */ jsx48(StnIcon, { name: "line/chevron-down" }),
+      icon: /* @__PURE__ */ jsx49(StnIcon, { name: "line/chevron-down" }),
       iconPosition: "right",
       className,
       ...rest,
@@ -6336,26 +6489,26 @@ function StnWidgetPeriodPager({
   nextLabel = "\uB2E4\uC74C",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
-    /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
+    /* @__PURE__ */ jsx49(
       StnButton,
       {
         variant: "ghost",
         size: "sm",
         shape: "square",
-        icon: /* @__PURE__ */ jsx48(StnIcon, { name: "line/arrow-narrow-left" }),
+        icon: /* @__PURE__ */ jsx49(StnIcon, { name: "line/arrow-narrow-left" }),
         onClick: onPrev,
         "aria-label": prevLabel
       }
     ),
-    /* @__PURE__ */ jsx48("span", { className: "stn-widget__period-pager-label", children: label }),
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx49("span", { className: "stn-widget__period-pager-label", children: label }),
+    /* @__PURE__ */ jsx49(
       StnButton,
       {
         variant: "ghost",
         size: "sm",
         shape: "square",
-        icon: /* @__PURE__ */ jsx48(StnIcon, { name: "line/arrow-narrow-right" }),
+        icon: /* @__PURE__ */ jsx49(StnIcon, { name: "line/arrow-narrow-right" }),
         onClick: onNext,
         "aria-label": nextLabel
       }
@@ -6375,18 +6528,18 @@ function StnWidgetHeaderInner({
   wrapActions = false
 }) {
   const resolvedIconName = headerIconName ?? defaultHeaderIconName(appearance);
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__head-start", children: [
-      showHeaderIcon ? headerIcon != null ? /* @__PURE__ */ jsx48(StnWidgetInsetIcon, { size: "sm", children: headerIcon }) : resolvedIconName ? /* @__PURE__ */ jsx48(StnWidgetInsetIcon, { size: "sm", icon: resolvedIconName }) : null : null,
-      title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs39("div", { className: "stn-widget__title-wrap", children: [
-        typeof title === "string" ? /* @__PURE__ */ jsx48("p", { className: "stn-widget__title", title, children: title }) : null,
+  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: "stn-widget__title", title, children: title }) : null,
         badge
-      ] }) : /* @__PURE__ */ jsxs39(Fragment5, { children: [
+      ] }) : /* @__PURE__ */ jsxs40(Fragment5, { children: [
         title,
         badge
       ] }) : null
     ] }),
-    titleActions != null || periodActions != null || periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx48("div", { className: "stn-widget__head-end", children: titleActions ?? (periodActions != null ? periodActions : periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx48(StnWidgetPeriodText, { children: periodLabel }) : null) }) : null
+    titleActions != null || periodActions != null || periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__head-end", children: titleActions ?? (periodActions != null ? periodActions : periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx49(StnWidgetPeriodText, { children: periodLabel }) : null) }) : null
   ] });
 }
 function StnWidgetRoot({
@@ -6466,10 +6619,10 @@ function StnWidgetRoot({
     ...rest
   };
   const slots = partitionWidgetChildren(children);
-  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs39("div", { className: "app_bar", children: [
-    /* @__PURE__ */ jsx48("div", { className: "fault_title_box", children: typeof title === "string" ? /* @__PURE__ */ jsx48("span", { children: title }) : title }),
+  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs40("div", { className: "app_bar", children: [
+    /* @__PURE__ */ jsx49("div", { className: "fault_title_box", children: typeof title === "string" ? /* @__PURE__ */ jsx49("span", { children: title }) : title }),
     titleActions
-  ] }) : null : shell === "board" || shell === "board-item" ? title != null ? /* @__PURE__ */ jsx48("div", { className: "stn-widget__head", children: typeof title === "string" ? /* @__PURE__ */ jsx48("p", { children: title }) : title }) : null : isFigmaShell ? /* @__PURE__ */ jsx48(
+  ] }) : null : shell === "board" || shell === "board-item" ? title != null ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__head", children: typeof title === "string" ? /* @__PURE__ */ jsx49("p", { children: title }) : title }) : null : isFigmaShell ? /* @__PURE__ */ jsx49(
     StnWidgetHeaderInner,
     {
       appearance,
@@ -6483,48 +6636,48 @@ function StnWidgetRoot({
       headerIcon,
       wrapActions
     }
-  ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__head-start", children: [
-      title != null ? typeof title === "string" ? /* @__PURE__ */ jsx48("p", { className: "stn-widget__title", title, children: title }) : title : null,
+  ) : 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: "stn-widget__title", title, children: title }) : title : null,
       badge
     ] }),
-    titleActions ? /* @__PURE__ */ jsx48("div", { className: "stn-widget__head-end", children: titleActions }) : null
+    titleActions ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__head-end", children: titleActions }) : null
   ] }) : null;
   const head = slots.headers.length > 0 ? slots.headers : propHead;
   const autoBodyClass = shell === "fault-panel" && !isFigmaShell ? "table_area" : void 0;
   let body;
   if (loading) {
-    body = /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__body", autoBodyClass, contentClassName), children: /* @__PURE__ */ jsx48(StnWidgetLoading, {}) });
+    body = /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__body", autoBodyClass, contentClassName), children: /* @__PURE__ */ jsx49(StnWidgetLoading, {}) });
   } else if (slots.bodies.length > 0) {
     body = slots.bodies.map(
       (slot, index) => mergeBodySlot(slot, index === 0 ? slots.rest : [], contentClassName, isEmptyState, emptyStyle)
     );
   } else {
-    body = /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__body", autoBodyClass, isEmptyState && "empty", contentClassName), style: emptyStyle, children: slots.rest });
+    body = /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__body", autoBodyClass, isEmptyState && "empty", contentClassName), style: emptyStyle, children: slots.rest });
   }
-  const footerNode = slots.footers.length > 0 ? slots.footers : footer ? /* @__PURE__ */ jsx48("div", { className: "stn-widget__footer", children: footer }) : null;
-  const card = /* @__PURE__ */ jsxs39("div", { ...rootProps, children: [
-    isFigmaShell && appearanceShell === "overlay" ? /* @__PURE__ */ jsx48("div", { className: "stn-widget__map-deco", "aria-hidden": true }) : null,
+  const footerNode = slots.footers.length > 0 ? slots.footers : footer ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__footer", children: footer }) : null;
+  const card = /* @__PURE__ */ jsxs40("div", { ...rootProps, children: [
+    isFigmaShell && appearanceShell === "overlay" ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__map-deco", "aria-hidden": true }) : null,
     head,
     body,
     footerNode
   ] });
   if (banner == null || banner === false) return card;
-  return /* @__PURE__ */ jsxs39("div", { className: "stn-widget-anchor", children: [
+  return /* @__PURE__ */ jsxs40("div", { className: "stn-widget-anchor", children: [
     withBannerSeverity(banner, bannerSeverityFromStatus(status, isCritical)),
     card
   ] });
 }
 function StnWidgetHeader({ className, wrap = false, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__head", wrap && "stn-widget__head--wrap", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__head", wrap && "stn-widget__head--wrap", className), ...rest, children });
 }
 markWidgetSlot(StnWidgetHeader, "header");
 function StnWidgetTitle({ className, children, title, ...rest }) {
   const titleAttr = title ?? (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ jsx48("p", { className: cn("stn-widget__title", className), title: titleAttr, ...rest, children });
+  return /* @__PURE__ */ jsx49("p", { className: cn("stn-widget__title", className), title: titleAttr, ...rest, children });
 }
 function StnWidgetActions({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__head-end", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__head-end", className), ...rest, children });
 }
 function StnWidgetBody({
   padding,
@@ -6538,7 +6691,7 @@ function StnWidgetBody({
 }) {
   const emptyText = typeof empty === "string" ? empty : void 0;
   const mergedStyle = emptyText ? { ["--stn-widget-empty-text"]: `"${emptyText}"`, ...style } : style;
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       className: cn(
@@ -6560,7 +6713,7 @@ function StnWidgetBody({
 }
 markWidgetSlot(StnWidgetBody, "body");
 function StnWidgetChartSlot({ label = "select chart", className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__chart-slot", className), "data-stn-widget-chart-slot": true, ...rest, children: children ?? /* @__PURE__ */ jsx48("span", { className: "stn-widget__chart-slot-label", children: label }) });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__chart-slot", className), "data-stn-widget-chart-slot": true, ...rest, children: children ?? /* @__PURE__ */ jsx49("span", { className: "stn-widget__chart-slot-label", children: label }) });
 }
 function StnWidgetStatusItem({
   label,
@@ -6572,9 +6725,9 @@ function StnWidgetStatusItem({
   ...rest
 }) {
   const grade = gradeProp ?? (status === "warning" ? "minor" : status) ?? "normal";
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__status-item", className), ...rest, children: [
-    /* @__PURE__ */ jsxs39("span", { className: "stn-widget__status-label", children: [
-      showDot ? /* @__PURE__ */ jsx48(
+  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(
         "span",
         {
           className: cn("stn-widget__status-dot", `stn-widget__status-dot--${grade}`),
@@ -6583,23 +6736,23 @@ function StnWidgetStatusItem({
       ) : null,
       label
     ] }),
-    /* @__PURE__ */ jsx48("span", { className: "stn-widget__status-val", children: value })
+    /* @__PURE__ */ jsx49("span", { className: "stn-widget__status-val", children: value })
   ] });
 }
 function StnWidgetStatusList({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__status-list", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__status-list", className), ...rest, children });
 }
 function StnWidgetStatGroup({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__stat-group", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__stat-group", className), ...rest, children });
 }
 function StnWidgetStatCard({ label, count, className, ...rest }) {
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__stat-card", className), ...rest, children: [
-    /* @__PURE__ */ jsx48("span", { className: "stn-widget__stat-label", children: label }),
-    /* @__PURE__ */ jsx48("span", { className: "stn-widget__stat-count", children: count })
+  return /* @__PURE__ */ 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 })
   ] });
 }
 function StnWidgetPlaceholder({ label = "\uCF58\uD150\uCE20 \uC601\uC5ED" }) {
-  return /* @__PURE__ */ jsx48("div", { className: "stn-widget__placeholder", children: label });
+  return /* @__PURE__ */ jsx49("div", { className: "stn-widget__placeholder", children: label });
 }
 var GRADE_ROW_ICON = {
   critical: "fill/alert4",
@@ -6622,42 +6775,42 @@ function StnWidgetGradeRow({
 }) {
   const clamped = Math.max(0, Math.min(100, percent));
   const resolvedPercentLabel = percentLabel ?? formatGradePercent(clamped);
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__grade-row", `stn-widget__grade-row--${grade}`, className), ...rest, children: [
-    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__grade-row-left", children: [
-      /* @__PURE__ */ jsxs39("span", { className: "stn-widget__grade-row-label", children: [
-        /* @__PURE__ */ jsx48(StnIcon, { name: GRADE_ROW_ICON[grade], size: 20, className: "stn-widget__grade-row-icon", "aria-hidden": true }),
+  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 }),
         label
       ] }),
-      /* @__PURE__ */ jsx48("div", { className: "stn-widget__grade-row-track", "aria-hidden": true, children: /* @__PURE__ */ jsx48("span", { className: "stn-widget__grade-row-fill", style: { width: `${clamped}%` } }) })
+      /* @__PURE__ */ jsx49("div", { className: "stn-widget__grade-row-track", "aria-hidden": true, children: /* @__PURE__ */ jsx49("span", { className: "stn-widget__grade-row-fill", style: { width: `${clamped}%` } }) })
     ] }),
-    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__grade-row-right", children: [
-      /* @__PURE__ */ jsx48("span", { className: "stn-widget__grade-row-value", children: value }),
-      /* @__PURE__ */ jsx48("span", { className: "stn-widget__grade-row-percent", children: resolvedPercentLabel })
+    /* @__PURE__ */ 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 })
     ] })
   ] });
 }
 function StnWidgetGradeRowList({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__grade-row-list", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__grade-row-list", className), ...rest, children });
 }
 function StnWidgetFooter({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__footer", className), ...rest, children });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__footer", className), ...rest, children });
 }
 markWidgetSlot(StnWidgetFooter, "footer");
 function StnWidgetEmpty({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__empty", className), ...rest, children: [
-    /* @__PURE__ */ jsxs39("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { opacity: 0.6 }, children: [
-      /* @__PURE__ */ jsx48("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ jsx48("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-      /* @__PURE__ */ jsx48("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  return /* @__PURE__ */ 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" })
     ] }),
-    /* @__PURE__ */ jsx48("div", { children: children ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
+    /* @__PURE__ */ jsx49("div", { children: children ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
   ] });
 }
 function StnWidgetLoading({ lines = 3, className, children, ...rest }) {
-  return /* @__PURE__ */ jsx48("div", { className: cn("stn-widget__loading", className), ...rest, children: children ?? /* @__PURE__ */ jsx48(StnLoadingSkeleton.Widget, { lines }) });
+  return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__loading", className), ...rest, children: children ?? /* @__PURE__ */ jsx49(StnLoadingSkeleton.Widget, { lines }) });
 }
 function StnWidgetInsetIcon({ className, size = "sm", ...rest }) {
-  return /* @__PURE__ */ jsx48(StnIconBox, { size, className: cn("stn-widget__inset-icon", className), ...rest });
+  return /* @__PURE__ */ jsx49(StnIconBox, { size, className: cn("stn-widget__inset-icon", className), ...rest });
 }
 var StnWidget = Object.assign(StnWidgetRoot, {
   Header: StnWidgetHeader,
@@ -6704,11 +6857,11 @@ import {
 // src/layouts/StnStack.tsx
 import {
   Children as Children3,
-  forwardRef as forwardRef25,
+  forwardRef as forwardRef26,
   Fragment as Fragment6,
   isValidElement as isValidElement6
 } from "react";
-import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs41 } 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]);
@@ -6801,7 +6954,7 @@ function spacingClassesAndStyle(spacing) {
   }
   return { classes, inlineGap };
 }
-var StnStack = forwardRef25(function StnStack2({
+var StnStack = forwardRef26(function StnStack2({
   component,
   as,
   direction = "column",
@@ -6831,12 +6984,12 @@ var StnStack = forwardRef25(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__ */ jsxs40(Fragment6, { children: [
+    return /* @__PURE__ */ jsxs41(Fragment6, { children: [
       index > 0 ? divider : null,
       child
     ] }, key);
   }) : children;
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     Component,
     {
       ref,
@@ -6860,7 +7013,7 @@ var StnStack = forwardRef25(function StnStack2({
 });
 
 // src/patterns/dashboard/AlertCenterDashboard.tsx
-import { jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs42 } 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" },
@@ -6869,7 +7022,7 @@ var TOP5_ROWS = [
   { label: "PRADA", percent: 68, value: "68\uAC74", grade: "default" }
 ];
 function AlertCenterDashboard({ className, appearance = "translucent", loading = false }) {
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     StnStack,
     {
       direction: "column",
@@ -6878,17 +7031,17 @@ function AlertCenterDashboard({ className, appearance = "translucent", loading =
       style: { flex: "1 1 0%", minHeight: 0, height: "100%", width: "100%" },
       "data-stn-dashboard": "alert-widgets",
       children: [
-        /* @__PURE__ */ jsx50(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx50(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs41(StnWidget.StatusList, { children: [
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "PTN", value: "179", showDot: false }),
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "MSPP", value: "63", showDot: false }),
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "L3\uC2A4\uC704\uCE58", value: "27", showDot: false })
+        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ 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__ */ jsx50(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx50(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs41(StnWidget.StatusList, { children: [
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "Critical", value: "43", grade: "critical" }),
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "Major", value: "79", grade: "major" }),
-          /* @__PURE__ */ jsx50(StnWidget.StatusItem, { label: "Minor", value: "3", grade: "minor" })
+        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ 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__ */ jsx50(StnWidget, { title: "\uC77C\uC77C \uC7A5\uBE44\uBCC4 \uC7A5\uC560 TOP5", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx50(StnLoadingSkeleton.Widget, { lines: 4 }) : /* @__PURE__ */ jsx50(StnWidget.GradeRowList, { children: TOP5_ROWS.map((row) => /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC77C\uC77C \uC7A5\uBE44\uBCC4 \uC7A5\uC560 TOP5", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 4 }) : /* @__PURE__ */ jsx51(StnWidget.GradeRowList, { children: TOP5_ROWS.map((row) => /* @__PURE__ */ jsx51(
           StnWidget.GradeRow,
           {
             grade: row.grade,
@@ -6898,50 +7051,50 @@ function AlertCenterDashboard({ className, appearance = "translucent", loading =
           },
           row.label
         )) }) }),
-        /* @__PURE__ */ jsx50(StnWidget, { title: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx50(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsx50(StnWidget.ChartSlot, { label: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4 \uCC28\uD2B8" }) })
+        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsx51(StnWidget.ChartSlot, { label: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4 \uCC28\uD2B8" }) })
       ]
     }
   );
 }
 
 // src/patterns/dashboard/PubDashboardWidgetBodies.tsx
-import { jsx as jsx51, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs43 } from "react/jsx-runtime";
 function PubDisabilityStatusList({ items, summary }) {
-  return /* @__PURE__ */ jsxs42("div", { className: "ds-disability-status", children: [
-    /* @__PURE__ */ jsx51("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43("div", { className: "ds-disability-status", children: [
+    /* @__PURE__ */ jsx52("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs43(
       "li",
       {
         className: ["ds-disability-status__item", item.grade].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsxs42("span", { children: [
-            item.showDot !== false && item.grade ? /* @__PURE__ */ jsx51("span", { className: "dot", "aria-hidden": true }) : null,
+          /* @__PURE__ */ jsxs43("span", { children: [
+            item.showDot !== false && item.grade ? /* @__PURE__ */ jsx52("span", { className: "dot", "aria-hidden": true }) : null,
             item.label
           ] }),
-          /* @__PURE__ */ jsx51("p", { children: item.value })
+          /* @__PURE__ */ jsx52("p", { children: item.value })
         ]
       },
       i
     )) }),
-    summary && summary.length > 0 ? /* @__PURE__ */ jsx51("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs42("p", { className: "ds-disability-status__value", children: [
+    summary && summary.length > 0 ? /* @__PURE__ */ jsx52("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs43("p", { className: "ds-disability-status__value", children: [
       row.label,
-      /* @__PURE__ */ jsx51("span", { children: row.value })
+      /* @__PURE__ */ jsx52("span", { children: row.value })
     ] }, i)) }) : null
   ] });
 }
 function PubTrafficTop5Bars({ rows }) {
   const maxPercent = Math.max(...rows.map((row) => row.percent), 0);
-  return /* @__PURE__ */ jsx51("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsxs42("div", { className: ["ds-bar", row.percent === maxPercent ? "max" : ""].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx51("p", { className: "ds-bar-name", title: row.label, children: row.label }),
-    /* @__PURE__ */ jsx51("div", { className: "ds-bar-con", title: `${row.percent}%`, children: /* @__PURE__ */ jsx51("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }) }),
-    /* @__PURE__ */ jsx51("p", { className: "ds-bar-value", title: row.value, children: row.value })
+  return /* @__PURE__ */ jsx52("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ 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 })
   ] }, row.label)) });
 }
 function PubTop5EquipmentBars({ rows }) {
-  return /* @__PURE__ */ jsxs42("div", { className: "ds-group", children: [
-    /* @__PURE__ */ jsx51("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx51("div", { className: "ds-equipment-ico", children: /* @__PURE__ */ jsx51("span", { className: "blind", children: "\uC7A5\uBE44 \uC774\uBBF8\uC9C0" }) }) }),
-    /* @__PURE__ */ jsx51("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx51("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsx51("div", { className: "ds-bar type-2", children: /* @__PURE__ */ jsxs42("div", { className: "ds-bar-con", title: `${row.percent}%`, children: [
-      /* @__PURE__ */ jsx51("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }),
-      /* @__PURE__ */ jsx51("div", { className: "ds-bar-status", children: row.status })
+  return /* @__PURE__ */ 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 })
     ] }) }, row.label)) }) })
   ] });
 }
@@ -6950,15 +7103,15 @@ function PubChartSample({
   alt = "\uCC28\uD2B8",
   onError
 }) {
-  return /* @__PURE__ */ jsx51("div", { className: "ds-chart", children: /* @__PURE__ */ jsx51("img", { src, alt, className: "chart_sample", onError }) });
+  return /* @__PURE__ */ jsx52("div", { className: "ds-chart", children: /* @__PURE__ */ jsx52("img", { src, alt, className: "chart_sample", onError }) });
 }
 
 // src/patterns/alertCenter/StnAlertCenterPanel.tsx
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import {
   STN_ALERT_CENTER_TABS
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
-import { jsx as jsx52, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs44 } from "react/jsx-runtime";
 function resolveAlertIcon(item) {
   if (item.icon) {
     if (item.icon === "line/arrow-down") return "line/arrow-narrow-down";
@@ -6985,7 +7138,7 @@ function StnAlertCard({
 }) {
   const iconNode = resolveAlertIcon(item);
   const gradeLabel = resolveGradeLabel(item.grade);
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     StnCard,
     {
       variant: "elevated",
@@ -6994,8 +7147,8 @@ function StnAlertCard({
       interactive: true,
       className: cn("stn-alert-card", className),
       onClick,
-      children: /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__row", children: [
-        /* @__PURE__ */ jsx52(
+      children: /* @__PURE__ */ jsxs44("div", { className: "stn-alert-card__row", children: [
+        /* @__PURE__ */ jsx53(
           StnIcon,
           {
             name: iconNode,
@@ -7004,9 +7157,9 @@ function StnAlertCard({
             className: "stn-alert-card__icon"
           }
         ),
-        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__body", children: [
-          /* @__PURE__ */ jsxs43(StnStack, { direction: "row", alignItems: "center", spacing: 1, className: "stn-alert-card__header-line", children: [
-            /* @__PURE__ */ jsx52(
+        /* @__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(
               StnChip,
               {
                 shape: "pill",
@@ -7016,25 +7169,25 @@ function StnAlertCard({
                 children: gradeLabel
               }
             ),
-            /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsx53(
               "span",
               {
                 className: cn("stn-alert-card__title", titleOverflow),
                 title: item.title,
-                children: /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__text-inner", children: item.title })
+                children: /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__text-inner", children: item.title })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs43(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", className: "stn-alert-card__desc-line", children: [
-            /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsxs44(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", className: "stn-alert-card__desc-line", children: [
+            /* @__PURE__ */ jsx53(
               "span",
               {
                 className: cn("stn-alert-card__desc", descOverflow),
                 title: item.description,
-                children: /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__text-inner", children: item.description })
+                children: /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__text-inner", children: item.description })
               }
             ),
-            item.occurredAt && /* @__PURE__ */ jsxs43(
+            item.occurredAt && /* @__PURE__ */ jsxs44(
               StnChip,
               {
                 shape: "pill",
@@ -7050,9 +7203,9 @@ function StnAlertCard({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__meta", children: [
-          /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__time", children: item.time }),
-          item.unread !== false && /* @__PURE__ */ jsx52(
+        /* @__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(
             "span",
             {
               className: cn(
@@ -7086,11 +7239,11 @@ function StnAlertCenterPanel({
   closeLabel = "\uB2EB\uAE30",
   className
 }) {
-  const [activeTab, setActiveTab] = useState14(defaultTab);
+  const [activeTab, setActiveTab] = useState15(defaultTab);
   const alertCount = alerts.length;
   const resolvedTitleOverflow = titleOverflow ?? textOverflow;
   const resolvedDescOverflow = descOverflow ?? textOverflow;
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     "div",
     {
       className: cn(
@@ -7102,13 +7255,13 @@ function StnAlertCenterPanel({
       ),
       "data-stn-alert-center": true,
       children: [
-        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__header", children: [
-          /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__header-left", children: [
-            /* @__PURE__ */ jsx52(StnIcon, { name: "line/bell", size: 20, color: "var(--stn-primary)" }),
-            /* @__PURE__ */ jsx52("span", { className: "stn-alert-center__title", children: title }),
-            alertCount > 0 && /* @__PURE__ */ jsx52(StnChip, { shape: "pill", size: "sm", variant: "subtle", color: "primary", children: alertCount })
+        /* @__PURE__ */ 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__ */ jsx52(
+          /* @__PURE__ */ jsx53(
             StnSegmented,
             {
               size: "md",
@@ -7121,8 +7274,8 @@ function StnAlertCenterPanel({
               }))
             }
           ),
-          /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__header-right", children: [
-            /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsxs44("div", { className: "stn-alert-center__header-right", children: [
+            /* @__PURE__ */ jsx53(
               StnButton,
               {
                 variant: "text",
@@ -7132,8 +7285,8 @@ function StnAlertCenterPanel({
                 children: "\uBAA8\uB450 \uC77D\uC74C"
               }
             ),
-            /* @__PURE__ */ jsx52("div", { className: "stn-alert-center__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx52(
+            /* @__PURE__ */ jsx53("div", { className: "stn-alert-center__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx53(
               StnButton,
               {
                 icon: "line/x",
@@ -7145,43 +7298,51 @@ function StnAlertCenterPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__list-wrap", children: [
-          activeTab === "error" && /* @__PURE__ */ jsx52("ul", { className: "stn-alert-center__list", children: alerts.map((item) => /* @__PURE__ */ jsx52("li", { children: /* @__PURE__ */ jsx52(
-            StnAlertCard,
-            {
-              item,
-              titleOverflow: resolvedTitleOverflow,
-              descOverflow: resolvedDescOverflow,
-              onClick: () => onItemClick?.(item)
-            }
-          ) }, item.id ?? item.title)) }),
-          activeTab === "work" && /* @__PURE__ */ jsx52("ul", { className: "stn-alert-center__list", children: workItems.map((row) => /* @__PURE__ */ jsx52("li", { children: /* @__PURE__ */ jsx52(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__row", children: [
-            /* @__PURE__ */ jsx52(StnIcon, { name: "line/clock", size: 24, color: "var(--stn-text-secondary)", className: "stn-alert-card__icon" }),
-            /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__body", children: [
-              /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__type-label work", children: row.typeLabel }),
-              /* @__PURE__ */ jsx52("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__text-inner", children: row.text }) })
-            ] }),
-            /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__time", children: row.time })
-          ] }) }) }, row.id ?? row.text)) }),
-          activeTab === "deploy" && /* @__PURE__ */ jsx52("ul", { className: "stn-alert-center__list", children: deployItems.map((row) => /* @__PURE__ */ jsx52("li", { children: /* @__PURE__ */ jsx52(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__row", children: [
-            /* @__PURE__ */ jsx52(StnIcon, { name: "line/settings", size: 24, color: "var(--stn-secondary)", className: "stn-alert-card__icon" }),
-            /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__body", children: [
-              /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--deploy", children: row.typeLabel }),
-              /* @__PURE__ */ jsx52("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__text-inner", children: row.text }) })
-            ] }),
-            /* @__PURE__ */ jsx52("span", { className: "stn-alert-card__time", children: row.time })
-          ] }) }) }, row.id ?? row.text)) })
-        ] }),
-        /* @__PURE__ */ jsx52("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs43(
+        /* @__PURE__ */ jsxs44(
+          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(
+                StnAlertCard,
+                {
+                  item,
+                  titleOverflow: resolvedTitleOverflow,
+                  descOverflow: resolvedDescOverflow,
+                  onClick: () => onItemClick?.(item)
+                }
+              ) }, item.id ?? item.title)) }),
+              activeTab === "work" && /* @__PURE__ */ jsx53("ul", { className: "stn-alert-center__list", children: workItems.map((row) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ 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 }) })
+                ] }),
+                /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__time", children: row.time })
+              ] }) }) }, row.id ?? row.text)) }),
+              activeTab === "deploy" && /* @__PURE__ */ jsx53("ul", { className: "stn-alert-center__list", children: deployItems.map((row) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ 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 }) })
+                ] }),
+                /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__time", children: row.time })
+              ] }) }) }, row.id ?? row.text)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx53("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs44(
           "button",
           {
             type: "button",
             className: "stn-alert-center__footer-link",
             onClick: onManageSettings,
             children: [
-              /* @__PURE__ */ jsx52("span", { children: "\uC54C\uB9BC \uC124\uC815 \uAD00\uB9AC" }),
-              /* @__PURE__ */ jsx52(StnIcon, { name: "line/settings", size: 14 }),
-              /* @__PURE__ */ jsx52(StnIcon, { name: "line/chevron-right", size: 14 })
+              /* @__PURE__ */ jsx53("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 })
             ]
           }
         ) })
@@ -7191,18 +7352,18 @@ function StnAlertCenterPanel({
 }
 
 // src/patterns/alertCenter/StnAlertCenterDocPreview.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function StnAlertCenterDocPreview({
   theme = "light",
   withDocChrome = true,
   children,
   ...panelProps
 }) {
-  const panel = children ?? /* @__PURE__ */ jsx53(StnAlertCenterPanel, { ...panelProps });
+  const panel = children ?? /* @__PURE__ */ jsx54(StnAlertCenterPanel, { ...panelProps });
   if (!withDocChrome) {
-    return /* @__PURE__ */ jsx53(StnProvider, { theme, applyThemeToDocument: false, children: panel });
+    return /* @__PURE__ */ jsx54(StnProvider, { theme, applyThemeToDocument: false, children: panel });
   }
-  return /* @__PURE__ */ jsx53("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-theme": theme, children: /* @__PURE__ */ jsx53("div", { className: "stn-alert-center-preview-shell", children: panel }) });
+  return /* @__PURE__ */ jsx54("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-theme": theme, children: /* @__PURE__ */ jsx54("div", { className: "stn-alert-center-preview-shell", children: panel }) });
 }
 
 // src/index.ts
@@ -7227,13 +7388,13 @@ var SideNavContext = createContext3({
 var useSideNav = () => useContext3(SideNavContext);
 
 // src/components/sideNav/StnSideNavItem.tsx
-import { forwardRef as forwardRef26 } from "react";
+import { forwardRef as forwardRef27 } from "react";
 import { STN_NAV_MENU_SUB_ICON } from "@stn-uiux/pub-ui/data/stnSideNavItem";
-import { jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
 function maskStyle2(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
-var StnSideNavItem = forwardRef26(function StnSideNavItem2({
+var StnSideNavItem = forwardRef27(function StnSideNavItem2({
   label,
   id,
   iconSrc,
@@ -7276,13 +7437,13 @@ var StnSideNavItem = forwardRef26(function StnSideNavItem2({
       sideNav.onSelect(id);
     }
   };
-  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ jsxs44("span", { className: "stn-side-nav-item__icon-wrap", children: [
-    /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }),
-    showDot ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__dot-wrap", "aria-hidden": "true", children: /* @__PURE__ */ jsx54(StnBadge, { variant: "dot", color: "error" }) }) : null
+  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ 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
   ] }) : null;
-  const subIconElement = hasIcon && isSub ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__sub-icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }) : null;
+  const subIconElement = hasIcon && isSub ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__sub-icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }) : null;
   const activeIconElement = isSub ? subIconElement : iconElement;
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     "button",
     {
       ref,
@@ -7301,10 +7462,10 @@ var StnSideNavItem = forwardRef26(function StnSideNavItem2({
       title: collapsed ? label : void 0,
       onClick: handleClick,
       ...rest,
-      children: /* @__PURE__ */ jsxs44("span", { className: cn("stn-side-nav-item__inner", spreadTrail && "spread"), children: [
-        /* @__PURE__ */ jsxs44("span", { className: "stn-side-nav-item__lead", children: [
-          isSub && showSubIndent ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__sub-indent", "aria-hidden": "true" }) : null,
-          shouldShowSubDot ? /* @__PURE__ */ jsx54(
+      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(
             "span",
             {
               className: cn(
@@ -7312,14 +7473,14 @@ var StnSideNavItem = forwardRef26(function StnSideNavItem2({
                 hasIcon && iconPosition === "left" && "compact"
               ),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__sub-dot-glyph", style: maskStyle2(STN_NAV_MENU_SUB_ICON) })
+              children: /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__sub-dot-glyph", style: maskStyle2(STN_NAV_MENU_SUB_ICON) })
             }
           ) : null,
           iconPosition === "left" ? activeIconElement : null,
-          /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__label", children: label })
+          /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__label", children: label })
         ] }),
         iconPosition === "right" ? activeIconElement : null,
-        renderBadge ? typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx54(
+        renderBadge ? typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx55(
           StnBadge,
           {
             badgeContent: badge,
@@ -7327,7 +7488,7 @@ var StnSideNavItem = forwardRef26(function StnSideNavItem2({
             appearance: "subtle",
             className: "stn-side-nav-item__badge"
           }
-        ) : badge ? /* @__PURE__ */ jsx54("span", { className: "stn-side-nav-item__badge", children: badge }) : showBadgeDot ? /* @__PURE__ */ jsx54(
+        ) : badge ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__badge", children: badge }) : showBadgeDot ? /* @__PURE__ */ jsx55(
           StnBadge,
           {
             variant: "dot",
@@ -7335,7 +7496,7 @@ var StnSideNavItem = forwardRef26(function StnSideNavItem2({
             className: "stn-side-nav-item__badge"
           }
         ) : null : null,
-        !isSub && showChevron && !collapsed ? /* @__PURE__ */ jsx54(
+        !isSub && showChevron && !collapsed ? /* @__PURE__ */ jsx55(
           "span",
           {
             className: cn(
@@ -7352,15 +7513,15 @@ var StnSideNavItem = forwardRef26(function StnSideNavItem2({
 });
 
 // src/components/sideNav/StnSideNavHeader.tsx
-import { forwardRef as forwardRef28 } from "react";
+import { forwardRef as forwardRef29 } from "react";
 
 // src/components/sideNav/StnSideNavLogo.tsx
-import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx55 } from "react/jsx-runtime";
-var StnSideNavLogo = forwardRef27(
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx56 } from "react/jsx-runtime";
+var StnSideNavLogo = forwardRef28(
   function StnSideNavLogo2({ className, logoProps, ...rest }, ref) {
     const { collapsed } = useSideNav();
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       "div",
       {
         ref,
@@ -7371,7 +7532,7 @@ var StnSideNavLogo = forwardRef27(
         ),
         title: "InfoMap",
         ...rest,
-        children: /* @__PURE__ */ jsx55(
+        children: /* @__PURE__ */ jsx56(
           StnLogo,
           {
             variant: collapsed ? "onlyimg" : "horizontal",
@@ -7385,8 +7546,8 @@ var StnSideNavLogo = forwardRef27(
 );
 
 // src/components/sideNav/StnSideNavHeader.tsx
-import { Fragment as Fragment7, jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
-var StnSideNavHeader = forwardRef28(function StnSideNavHeader2({
+import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
+var StnSideNavHeader = forwardRef29(function StnSideNavHeader2({
   children,
   border = false,
   hasBorder = false,
@@ -7398,7 +7559,7 @@ var StnSideNavHeader = forwardRef28(function StnSideNavHeader2({
   const { collapsed, onToggleCollapse, isDrawer, setMobileOpen } = useSideNav();
   const withBorder = Boolean(border || hasBorder);
   const shouldShowClose = showClose ?? Boolean(isDrawer);
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       ref,
@@ -7409,9 +7570,9 @@ var StnSideNavHeader = forwardRef28(function StnSideNavHeader2({
         className
       ),
       ...rest,
-      children: children ?? /* @__PURE__ */ jsxs45(Fragment7, { children: [
-        /* @__PURE__ */ jsx56(StnSideNavLogo, {}),
-        shouldShowClose ? /* @__PURE__ */ jsx56(
+      children: children ?? /* @__PURE__ */ jsxs46(Fragment7, { children: [
+        /* @__PURE__ */ jsx57(StnSideNavLogo, {}),
+        shouldShowClose ? /* @__PURE__ */ jsx57(
           StnButton,
           {
             size: "sm",
@@ -7423,7 +7584,7 @@ var StnSideNavHeader = forwardRef28(function StnSideNavHeader2({
             className: "stn-side-nav__collapse-btn",
             onClick: () => setMobileOpen?.(false)
           }
-        ) : showToggle ? /* @__PURE__ */ jsx56(
+        ) : showToggle ? /* @__PURE__ */ jsx57(
           StnButton,
           {
             size: "sm",
@@ -7442,16 +7603,16 @@ var StnSideNavHeader = forwardRef28(function StnSideNavHeader2({
 });
 
 // src/components/sideNav/StnSideNavMenu.tsx
-import { forwardRef as forwardRef29 } from "react";
-import { jsx as jsx57 } from "react/jsx-runtime";
-var StnSideNavMenu = forwardRef29(function StnSideNavMenu2({
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx58 } from "react/jsx-runtime";
+var StnSideNavMenu = forwardRef30(function StnSideNavMenu2({
   children,
   className,
   scrollSize = "thin",
   scrollColor = "fade",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     "nav",
     {
       ref,
@@ -7472,13 +7633,13 @@ var StnSideNavMenu = forwardRef29(function StnSideNavMenu2({
 
 // src/components/sideNav/StnSideNavGroup.tsx
 import {
-  forwardRef as forwardRef30,
+  forwardRef as forwardRef31,
   useEffect as useEffect10,
   useRef as useRef7,
-  useState as useState15
+  useState as useState16
 } from "react";
-import { jsx as jsx58, jsxs as jsxs46 } from "react/jsx-runtime";
-var StnSideNavGroup = forwardRef30(function StnSideNavGroup2({
+import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
+var StnSideNavGroup = forwardRef31(function StnSideNavGroup2({
   label,
   parent,
   direction = "down",
@@ -7494,7 +7655,7 @@ var StnSideNavGroup = forwardRef30(function StnSideNavGroup2({
   ...rest
 }, ref) {
   const { collapsed } = useSideNav();
-  const [internalOpen, setInternalOpen] = useState15(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState16(defaultOpen);
   const isOpen = openProp ?? internalOpen;
   const isDropdown = Boolean(dropdown || variant === "dropdown");
   const isTransparent = dropdownVariant === "transparent" || dropdownBackground === false;
@@ -7522,7 +7683,7 @@ var StnSideNavGroup = forwardRef30(function StnSideNavGroup2({
     }
     onOpenChange?.(next);
   };
-  const subnavNode = children && (!collapsed && isOpen) ? /* @__PURE__ */ jsx58(
+  const subnavNode = children && (!collapsed && isOpen) ? /* @__PURE__ */ jsx59(
     "div",
     {
       className: cn(
@@ -7537,7 +7698,7 @@ var StnSideNavGroup = forwardRef30(function StnSideNavGroup2({
       children
     }
   ) : null;
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs47(
     "div",
     {
       ref: (node) => {
@@ -7558,7 +7719,7 @@ var StnSideNavGroup = forwardRef30(function StnSideNavGroup2({
       "aria-label": typeof label === "string" ? label : void 0,
       ...rest,
       children: [
-        label && !collapsed ? /* @__PURE__ */ jsx58("span", { className: "stn-side-nav__group-label", onClick: handleToggle, children: label }) : null,
+        label && !collapsed ? /* @__PURE__ */ jsx59("span", { className: "stn-side-nav__group-label", onClick: handleToggle, children: label }) : null,
         isUp ? subnavNode : null,
         parent,
         !isUp ? subnavNode : null
@@ -7568,10 +7729,10 @@ var StnSideNavGroup = forwardRef30(function StnSideNavGroup2({
 });
 
 // src/components/sideNav/StnSideNavSpacer.tsx
-import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx59 } from "react/jsx-runtime";
-var StnSideNavSpacer = forwardRef31(function StnSideNavSpacer2({ className, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsx59(
+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(
     "div",
     {
       ref,
@@ -7584,10 +7745,10 @@ var StnSideNavSpacer = forwardRef31(function StnSideNavSpacer2({ className, styl
 });
 
 // src/components/sideNav/StnSideNavFooter.tsx
-import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx60 } from "react/jsx-runtime";
-var StnSideNavFooter = forwardRef32(function StnSideNavFooter2({ curved = false, children, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx60(
+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(
     "nav",
     {
       ref,
@@ -7600,12 +7761,12 @@ var StnSideNavFooter = forwardRef32(function StnSideNavFooter2({ curved = false,
 });
 
 // src/components/sideNav/StnSideNavToggle.tsx
-import { forwardRef as forwardRef33 } from "react";
-import { jsx as jsx61 } from "react/jsx-runtime";
-var StnSideNavToggle = forwardRef33(
+import { forwardRef as forwardRef34 } from "react";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var StnSideNavToggle = forwardRef34(
   function StnSideNavToggle2({ className, onClick, ...rest }, ref) {
     const { collapsed, onToggleCollapse } = useSideNav();
-    return /* @__PURE__ */ jsx61(
+    return /* @__PURE__ */ jsx62(
       "button",
       {
         ref,
@@ -7618,7 +7779,7 @@ var StnSideNavToggle = forwardRef33(
         "aria-label": collapsed ? "\uC0AC\uC774\uB4DC\uBC14 \uD3BC\uCE58\uAE30" : "\uC0AC\uC774\uB4DC\uBC14 \uC811\uAE30",
         title: collapsed ? "\uC0AC\uC774\uB4DC\uBC14 \uD3BC\uCE58\uAE30" : "\uC0AC\uC774\uB4DC\uBC14 \uC811\uAE30",
         ...rest,
-        children: /* @__PURE__ */ jsx61(
+        children: /* @__PURE__ */ jsx62(
           "svg",
           {
             width: "12",
@@ -7629,7 +7790,7 @@ var StnSideNavToggle = forwardRef33(
             strokeWidth: "2.5",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsx61("path", { d: "M9 18l6-6-6-6" })
+            children: /* @__PURE__ */ jsx62("path", { d: "M9 18l6-6-6-6" })
           }
         )
       }
@@ -7638,30 +7799,30 @@ var StnSideNavToggle = forwardRef33(
 );
 
 // src/components/sideNav/StnSideNavWatermark.tsx
-import { forwardRef as forwardRef34 } from "react";
-import { jsx as jsx62 } from "react/jsx-runtime";
-var StnSideNavWatermark = forwardRef34(
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx63 } from "react/jsx-runtime";
+var StnSideNavWatermark = forwardRef35(
   function StnSideNavWatermark2({ size = "xl", theme, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx62(
+    return /* @__PURE__ */ jsx63(
       "div",
       {
         ref,
         className: cn("stn-side-nav__watermark", className),
         "aria-hidden": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx62(StnLogo, { variant: "watermark", size, theme })
+        children: /* @__PURE__ */ jsx63(StnLogo, { variant: "watermark", size, theme })
       }
     );
   }
 );
 
 // src/components/sideNav/StnSideNavMobileTrigger.tsx
-import { forwardRef as forwardRef35 } from "react";
-import { jsx as jsx63, jsxs as jsxs47 } from "react/jsx-runtime";
-var StnSideNavMobileTrigger = forwardRef35(
+import { forwardRef as forwardRef36 } from "react";
+import { jsx as jsx64, jsxs as jsxs48 } from "react/jsx-runtime";
+var StnSideNavMobileTrigger = forwardRef36(
   function StnSideNavMobileTrigger2({ floating = false, className, children, onClick, ...rest }, ref) {
     const { onToggleMobileOpen, mobileOpen } = useSideNav();
-    return /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsx64(
       "button",
       {
         ref,
@@ -7679,10 +7840,10 @@ var StnSideNavMobileTrigger = forwardRef35(
           onToggleMobileOpen?.();
         },
         ...rest,
-        children: children ?? /* @__PURE__ */ jsxs47("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx63("span", {}),
-          /* @__PURE__ */ jsx63("span", {}),
-          /* @__PURE__ */ jsx63("span", {})
+        children: children ?? /* @__PURE__ */ jsxs48("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx64("span", {}),
+          /* @__PURE__ */ jsx64("span", {}),
+          /* @__PURE__ */ jsx64("span", {})
         ] })
       }
     );
@@ -7691,12 +7852,12 @@ var StnSideNavMobileTrigger = forwardRef35(
 
 // src/components/sideNav/StnSideNavSub.tsx
 import {
-  forwardRef as forwardRef36
+  forwardRef as forwardRef37
 } from "react";
-import { jsx as jsx64 } from "react/jsx-runtime";
-var StnSideNavSub = forwardRef36(
+import { jsx as jsx65 } from "react/jsx-runtime";
+var StnSideNavSub = forwardRef37(
   function StnSideNavSub2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx65(
       "div",
       {
         ref,
@@ -7709,7 +7870,7 @@ var StnSideNavSub = forwardRef36(
     );
   }
 );
-var StnSideNavSubItem = forwardRef36(
+var StnSideNavSubItem = forwardRef37(
   function StnSideNavSubItem2({
     variant = "ghost",
     size = "md",
@@ -7725,14 +7886,14 @@ var StnSideNavSubItem = forwardRef36(
     const { collapsed } = useSideNav();
     const content = children ?? label;
     const computedTitle = title ?? (typeof content === "string" ? content : void 0);
-    const resolvedIcon = icon ?? (iconSrc ? /* @__PURE__ */ jsx64("span", { className: "stn-side-nav__sub-icon", children: /* @__PURE__ */ jsx64(
+    const resolvedIcon = icon ?? (iconSrc ? /* @__PURE__ */ jsx65("span", { className: "stn-side-nav__sub-icon", children: /* @__PURE__ */ jsx65(
       "span",
       {
         className: "stn-side-nav__sub-glyph",
         style: { maskImage: `url('${iconSrc}')`, WebkitMaskImage: `url('${iconSrc}')` }
       }
     ) }) : null);
-    return /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx65(
       StnButton,
       {
         ref,
@@ -7751,9 +7912,9 @@ var StnSideNavSubItem = forwardRef36(
 );
 
 // src/components/sideNav/StnSideNavSubNav.tsx
-import { forwardRef as forwardRef37 } from "react";
-import { jsx as jsx65 } from "react/jsx-runtime";
-var StnSideNavSubNav = forwardRef37(
+import { forwardRef as forwardRef38 } from "react";
+import { jsx as jsx66 } from "react/jsx-runtime";
+var StnSideNavSubNav = forwardRef38(
   function StnSideNavSubNav2({
     dropdown = false,
     direction = "down",
@@ -7765,7 +7926,7 @@ var StnSideNavSubNav = forwardRef37(
   }, ref) {
     const isUp = direction === "up";
     const isTransparent = variant === "transparent" || background === false;
-    return /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx66(
       "div",
       {
         ref,
@@ -7788,14 +7949,14 @@ var StnSideNavSubNav = forwardRef37(
 
 // src/patterns/sideNav/StnSideNavigation.tsx
 import {
-  forwardRef as forwardRef38,
+  forwardRef as forwardRef39,
   useCallback as useCallback8,
   useMemo as useMemo4,
-  useState as useState16
+  useState as useState17
 } from "react";
-import { jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
 function useControllableState(controlledValue, defaultValue, onChange) {
-  const [internalState, setInternalState] = useState16(defaultValue);
+  const [internalState, setInternalState] = useState17(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalState;
   const setValue = useCallback8(
@@ -7809,7 +7970,7 @@ function useControllableState(controlledValue, defaultValue, onChange) {
   );
   return [value, setValue];
 }
-var StnSideNavigationRoot = forwardRef38(function StnSideNavigationRoot2({
+var StnSideNavigationRoot = forwardRef39(function StnSideNavigationRoot2({
   variant: variantProp,
   appearance,
   drawerVariant: drawerVariantProp,
@@ -7870,9 +8031,9 @@ var StnSideNavigationRoot = forwardRef38(function StnSideNavigationRoot2({
     }),
     [isEffectiveCollapsed, activeId, setActiveId, handleToggleCollapse, mobileOpen, handleToggleMobileOpen, setMobileOpen, isDrawerMode]
   );
-  return /* @__PURE__ */ jsxs48(SideNavContext.Provider, { value: contextValue, children: [
-    showMobileTrigger && /* @__PURE__ */ jsx66(StnSideNavMobileTrigger, { floating: true }),
-    (drawer || responsiveDrawer) && /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsxs49(SideNavContext.Provider, { value: contextValue, children: [
+    showMobileTrigger && /* @__PURE__ */ jsx67(StnSideNavMobileTrigger, { floating: true }),
+    (drawer || responsiveDrawer) && /* @__PURE__ */ jsx67(
       "div",
       {
         className: cn("stn-side-nav__backdrop", mobileOpen && "is-open"),
@@ -7880,7 +8041,7 @@ var StnSideNavigationRoot = forwardRef38(function StnSideNavigationRoot2({
         "aria-hidden": !mobileOpen
       }
     ),
-    /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx67(
       "aside",
       {
         ref,
@@ -7922,14 +8083,14 @@ var StnSideNavigation = Object.assign(StnSideNavigationRoot, {
 import {
   Fragment as Fragment8,
   useEffect as useEffect11,
-  useId as useId15,
+  useId as useId16,
   useRef as useRef8,
-  useState as useState17
+  useState as useState18
 } from "react";
 import {
   STN_BREADCRUMB_ICON_SRC
 } from "@stn-uiux/pub-ui/data/stnBreadcrumb";
-import { Fragment as Fragment9, jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx68, jsxs as jsxs50 } from "react/jsx-runtime";
 function maskStyle3(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
@@ -7942,13 +8103,13 @@ function hasSegmentMenu(item) {
   return Boolean(item.menu || item.menuItems && item.menuItems.length > 0);
 }
 function BreadcrumbSeparator() {
-  return /* @__PURE__ */ jsx67("li", { className: "separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx67("span", { style: maskStyle3(STN_BREADCRUMB_ICON_SRC.separator) }) });
+  return /* @__PURE__ */ jsx68("li", { className: "separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx68("span", { style: maskStyle3(STN_BREADCRUMB_ICON_SRC.separator) }) });
 }
 function BreadcrumbIcon({ src }) {
-  return /* @__PURE__ */ jsx67("span", { className: "stn-breadcrumb__icon-glyph", style: maskStyle3(src), "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__icon-glyph", style: maskStyle3(src), "aria-hidden": "true" });
 }
 function BreadcrumbCaret() {
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     "span",
     {
       className: "stn-breadcrumb__caret",
@@ -7962,10 +8123,10 @@ function SegmentContent({
   label,
   menu
 }) {
-  return /* @__PURE__ */ jsxs49(Fragment9, { children: [
-    iconSrc ? /* @__PURE__ */ jsx67(BreadcrumbIcon, { src: iconSrc }) : null,
-    /* @__PURE__ */ jsx67("span", { className: "stn-breadcrumb__label", children: label }),
-    menu ? /* @__PURE__ */ jsx67(BreadcrumbCaret, {}) : null
+  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
   ] });
 }
 function BreadcrumbMenuList({
@@ -7973,7 +8134,7 @@ function BreadcrumbMenuList({
   items,
   onPick
 }) {
-  return /* @__PURE__ */ jsx67("ul", { id, className: "stn-breadcrumb__menu", role: "menu", children: items.map((option) => /* @__PURE__ */ jsx67("li", { role: "none", children: option.href ? /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68("ul", { id, className: "stn-breadcrumb__menu", role: "menu", children: items.map((option) => /* @__PURE__ */ jsx68("li", { role: "none", children: option.href ? /* @__PURE__ */ jsx68(
     "a",
     {
       role: "menuitem",
@@ -7985,7 +8146,7 @@ function BreadcrumbMenuList({
       },
       children: option.label
     }
-  ) : /* @__PURE__ */ jsx67(
+  ) : /* @__PURE__ */ jsx68(
     "button",
     {
       type: "button",
@@ -8022,20 +8183,20 @@ function BreadcrumbSegment({
   item,
   isCurrent
 }) {
-  const menuId = useId15();
-  const [open, setOpen] = useState17(false);
+  const menuId = useId16();
+  const [open, setOpen] = useState18(false);
   const menuItems = item.menuItems ?? [];
   const showMenu = hasSegmentMenu(item) && !isCurrent;
   const canOpenMenu = showMenu && menuItems.length > 0;
   const rootRef = useDismissibleMenu(open, () => setOpen(false));
   const iconSrc = resolveIconSrc(item);
-  const content = /* @__PURE__ */ jsx67(SegmentContent, { iconSrc, label: item.label, menu: showMenu });
+  const content = /* @__PURE__ */ jsx68(SegmentContent, { iconSrc, label: item.label, menu: showMenu });
   if (isCurrent) {
-    return /* @__PURE__ */ jsx67("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
+    return /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
   }
   if (canOpenMenu) {
-    return /* @__PURE__ */ jsxs49("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
-      /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsxs50("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
+      /* @__PURE__ */ jsx68(
         "button",
         {
           type: "button",
@@ -8051,7 +8212,7 @@ function BreadcrumbSegment({
           children: content
         }
       ),
-      open ? /* @__PURE__ */ jsx67(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
+      open ? /* @__PURE__ */ jsx68(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
     ] });
   }
   if (item.menu || item.onClick) {
@@ -8063,7 +8224,7 @@ function BreadcrumbSegment({
       "aria-haspopup": item.menu ? "menu" : void 0,
       "aria-expanded": item.menu ? false : void 0
     };
-    return /* @__PURE__ */ jsx67("button", { ...buttonProps, children: content });
+    return /* @__PURE__ */ jsx68("button", { ...buttonProps, children: content });
   }
   if (item.href) {
     const linkProps = {
@@ -8072,17 +8233,17 @@ function BreadcrumbSegment({
       onClick: item.onClick,
       "aria-label": item.label
     };
-    return /* @__PURE__ */ jsx67("a", { ...linkProps, children: content });
+    return /* @__PURE__ */ jsx68("a", { ...linkProps, children: content });
   }
-  return /* @__PURE__ */ jsx67("span", { className: "stn-breadcrumb__segment", "aria-label": item.label, children: content });
+  return /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__segment", "aria-label": item.label, children: content });
 }
 function BreadcrumbBack({
   label,
   href,
   onClick
 }) {
-  const content = /* @__PURE__ */ jsxs49(Fragment9, { children: [
-    /* @__PURE__ */ jsx67(
+  const content = /* @__PURE__ */ jsxs50(Fragment9, { children: [
+    /* @__PURE__ */ jsx68(
       "span",
       {
         className: "stn-breadcrumb__back-glyph",
@@ -8090,12 +8251,12 @@ function BreadcrumbBack({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx67("span", { className: "stn-breadcrumb__label", children: label })
+    /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__label", children: label })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx67("a", { className: "stn-breadcrumb__back", href, onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
+    return /* @__PURE__ */ jsx68("a", { className: "stn-breadcrumb__back", href, onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
   }
-  return /* @__PURE__ */ jsx67("button", { type: "button", className: "stn-breadcrumb__back", onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
+  return /* @__PURE__ */ jsx68("button", { type: "button", className: "stn-breadcrumb__back", onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
 }
 function splitCollapsedItems(items, maxItems, itemsBeforeCollapse, itemsAfterCollapse) {
   if (!maxItems || items.length <= maxItems) {
@@ -8117,7 +8278,7 @@ function BreadcrumbCollapsed({
   items,
   menuId
 }) {
-  const [open, setOpen] = useState17(false);
+  const [open, setOpen] = useState18(false);
   const rootRef = useDismissibleMenu(open, () => setOpen(false));
   const menuItems = items.map((item) => ({
     id: item.id,
@@ -8126,8 +8287,8 @@ function BreadcrumbCollapsed({
     onClick: item.onClick,
     current: item.current
   }));
-  return /* @__PURE__ */ jsxs49("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
-    /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsxs50("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
+    /* @__PURE__ */ jsx68(
       "button",
       {
         type: "button",
@@ -8140,7 +8301,7 @@ function BreadcrumbCollapsed({
         children: "\u22EF"
       }
     ),
-    open ? /* @__PURE__ */ jsx67(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
+    open ? /* @__PURE__ */ jsx68(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
   ] });
 }
 function StnBreadcrumb({
@@ -8157,7 +8318,7 @@ function StnBreadcrumb({
   homeLabel = "\uD648",
   renderItem
 }) {
-  const menuId = useId15();
+  const menuId = useId16();
   const currentIndex = items.findIndex((item, index) => item.current ?? index === items.length - 1);
   const currentItem = currentIndex >= 0 ? items[currentIndex] : items[items.length - 1];
   const previousItem = currentIndex > 0 ? items[currentIndex - 1] : null;
@@ -8172,8 +8333,8 @@ function StnBreadcrumb({
   const lastId = items[items.length - 1]?.id;
   const renderTrailItem = (item) => {
     const isCurrent = Boolean(item.current) || item.id === lastId;
-    const segment = /* @__PURE__ */ jsx67(BreadcrumbSegment, { item, isCurrent });
-    return /* @__PURE__ */ jsx67(
+    const segment = /* @__PURE__ */ jsx68(BreadcrumbSegment, { item, isCurrent });
+    return /* @__PURE__ */ jsx68(
       "li",
       {
         className: cn(
@@ -8184,27 +8345,27 @@ function StnBreadcrumb({
       }
     );
   };
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     "nav",
     {
       className: cn("stn-breadcrumb", size, variant === "chip" && "chip", className),
       "aria-label": "Breadcrumb",
-      children: /* @__PURE__ */ jsxs49("ol", { className: "stn-breadcrumb__list", children: [
-        currentItem ? /* @__PURE__ */ jsx67("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--back", children: /* @__PURE__ */ jsx67(BreadcrumbBack, { label: currentItem.label, href: backHref, onClick: backOnClick }) }) : null,
-        showHome ? /* @__PURE__ */ jsx67("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs49("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
-          /* @__PURE__ */ jsx67(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
-          /* @__PURE__ */ jsx67("span", { className: "blind", children: homeLabel })
+      children: /* @__PURE__ */ 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 })
         ] }) }) : null,
-        head.map((item, index) => /* @__PURE__ */ jsxs49(Fragment8, { children: [
-          showHome || index > 0 ? /* @__PURE__ */ jsx67(BreadcrumbSeparator, {}) : null,
+        head.map((item, index) => /* @__PURE__ */ jsxs50(Fragment8, { children: [
+          showHome || index > 0 ? /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}) : null,
           renderTrailItem(item)
         ] }, item.id)),
-        hidden.length > 0 ? /* @__PURE__ */ jsxs49(Fragment9, { children: [
-          /* @__PURE__ */ jsx67(BreadcrumbSeparator, {}),
-          /* @__PURE__ */ jsx67(BreadcrumbCollapsed, { items: hidden, menuId })
+        hidden.length > 0 ? /* @__PURE__ */ jsxs50(Fragment9, { children: [
+          /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}),
+          /* @__PURE__ */ jsx68(BreadcrumbCollapsed, { items: hidden, menuId })
         ] }) : null,
-        tail.map((item) => /* @__PURE__ */ jsxs49(Fragment8, { children: [
-          /* @__PURE__ */ jsx67(BreadcrumbSeparator, {}),
+        tail.map((item) => /* @__PURE__ */ jsxs50(Fragment8, { children: [
+          /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}),
           renderTrailItem(item)
         ] }, item.id))
       ] })
@@ -8213,9 +8374,9 @@ function StnBreadcrumb({
 }
 
 // src/components/StnHeaderTitle.tsx
-import { useEffect as useEffect12, useState as useState18 } from "react";
+import { useEffect as useEffect12, useState as useState19 } from "react";
 import { STN_HEADER_TITLE_FRAME } from "@stn-uiux/pub-ui/data/stnHeaderTitle";
-import { jsx as jsx68, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs51 } from "react/jsx-runtime";
 var KO_WEEKDAY_SHORT = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 var KO_WEEKDAY_LONG = [
   "\uC77C\uC694\uC77C",
@@ -8254,8 +8415,8 @@ function formatStnHeaderTitleTime(date, options) {
 }
 function HeaderTitleFrame({ preview = false }) {
   const frameClass = preview ? "stn-header-title__frame-preview" : "stn-header-title__frame";
-  return /* @__PURE__ */ jsxs50("div", { className: frameClass, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx68("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--outer", children: /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ 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(
       "img",
       {
         className: "stn-header-title__frame-img",
@@ -8264,8 +8425,8 @@ function HeaderTitleFrame({ preview = false }) {
         draggable: false
       }
     ) }),
-    /* @__PURE__ */ jsxs50("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
-      /* @__PURE__ */ jsx68(
+    /* @__PURE__ */ jsxs51("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
+      /* @__PURE__ */ jsx69(
         "img",
         {
           className: "stn-header-title__frame-img stn-header-title__frame-img--dark",
@@ -8274,7 +8435,7 @@ function HeaderTitleFrame({ preview = false }) {
           draggable: false
         }
       ),
-      /* @__PURE__ */ jsx68(
+      /* @__PURE__ */ jsx69(
         "img",
         {
           className: "stn-header-title__frame-img stn-header-title__frame-img--light",
@@ -8287,10 +8448,10 @@ function HeaderTitleFrame({ preview = false }) {
   ] });
 }
 function StnHeaderTitleFramePreview({ className }) {
-  return /* @__PURE__ */ jsx68("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx68(HeaderTitleFrame, { preview: true }) });
+  return /* @__PURE__ */ jsx69("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx69(HeaderTitleFrame, { preview: true }) });
 }
 function useLiveClock(enabled) {
-  const [now, setNow] = useState18(() => /* @__PURE__ */ new Date());
+  const [now, setNow] = useState19(() => /* @__PURE__ */ new Date());
   useEffect12(() => {
     if (!enabled) return;
     const id = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
@@ -8303,35 +8464,35 @@ function StnHeaderTitleMainText({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68("h1", { className: cn("stn-header-title__text", className), ...rest, children });
+  return /* @__PURE__ */ jsx69("h1", { className: cn("stn-header-title__text", className), ...rest, children });
 }
 function StnHeaderTitleSubText({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68("span", { className: cn("stn-header-title__sub-text", className), ...rest, children });
+  return /* @__PURE__ */ jsx69("span", { className: cn("stn-header-title__sub-text", className), ...rest, children });
 }
 function StnHeaderTitleDate({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68("time", { className: cn("stn-header-title__date", className), ...rest, children });
+  return /* @__PURE__ */ jsx69("time", { className: cn("stn-header-title__date", className), ...rest, children });
 }
 function StnHeaderTitleWeekday({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68("span", { className: cn("stn-header-title__weekday", className), ...rest, children });
+  return /* @__PURE__ */ jsx69("span", { className: cn("stn-header-title__weekday", className), ...rest, children });
 }
 function StnHeaderTitleTime({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx68("span", { className: cn("stn-header-title__time", className), "aria-label": "\uD604\uC7AC \uC2DC\uAC01", ...rest, children });
+  return /* @__PURE__ */ jsx69("span", { className: cn("stn-header-title__time", className), "aria-label": "\uD604\uC7AC \uC2DC\uAC01", ...rest, children });
 }
 function StnHeaderTitleClock({
   className,
@@ -8354,7 +8515,7 @@ function StnHeaderTitleClock({
 }) {
   const now = useLiveClock(live);
   if (children != null) {
-    return /* @__PURE__ */ jsxs50(
+    return /* @__PURE__ */ jsxs51(
       "header",
       {
         className: cn(
@@ -8366,8 +8527,8 @@ function StnHeaderTitleClock({
         ),
         ...rest,
         children: [
-          framed ? /* @__PURE__ */ jsx68(HeaderTitleFrame, {}) : null,
-          /* @__PURE__ */ jsx68("div", { className: "stn-header-title__content", children })
+          framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
+          /* @__PURE__ */ jsx69("div", { className: "stn-header-title__content", children })
         ]
       }
     );
@@ -8397,7 +8558,7 @@ function StnHeaderTitleClock({
       resolvedTime = formatStnHeaderTitleTime(now, { showSeconds });
     }
   }
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "header",
     {
       className: cn(
@@ -8409,11 +8570,11 @@ function StnHeaderTitleClock({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx68(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs50("div", { className: "stn-header-title__content", children: [
-          resolvedDate ? /* @__PURE__ */ jsx68("time", { className: "stn-header-title__date", dateTime: resolvedDate, children: resolvedDate }) : null,
-          showWeekdayOnly ? /* @__PURE__ */ jsx68("span", { className: "stn-header-title__weekday", children: resolvedWeekday }) : null,
-          resolvedTime ? /* @__PURE__ */ jsx68("span", { className: "stn-header-title__time", "aria-label": "\uD604\uC7AC \uC2DC\uAC01", children: resolvedTime }) : null
+        framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ 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
         ] })
       ]
     }
@@ -8430,7 +8591,7 @@ function StnHeaderTitleDual({
   ...rest
 }) {
   const resolvedMain = mainText ?? title ?? children;
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "header",
     {
       className: cn(
@@ -8442,10 +8603,10 @@ function StnHeaderTitleDual({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx68(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs50("div", { className: "stn-header-title__content", children: [
-          subText != null ? /* @__PURE__ */ jsx68("span", { className: "stn-header-title__sub-text", children: subText }) : null,
-          resolvedMain != null ? typeof resolvedMain === "string" || typeof resolvedMain === "number" ? /* @__PURE__ */ jsx68("h1", { className: "stn-header-title__text", children: resolvedMain }) : resolvedMain : null
+        framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ 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
         ] })
       ]
     }
@@ -8460,7 +8621,7 @@ function StnHeaderTitleText({
   ...rest
 }) {
   const resolved = title ?? children;
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "header",
     {
       className: cn(
@@ -8472,20 +8633,20 @@ function StnHeaderTitleText({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx68(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsx68("div", { className: "stn-header-title__content", children: typeof resolved === "string" || typeof resolved === "number" ? /* @__PURE__ */ jsx68("h1", { className: "stn-header-title__text", children: resolved }) : resolved })
+        framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsx69("div", { className: "stn-header-title__content", children: typeof resolved === "string" || typeof resolved === "number" ? /* @__PURE__ */ jsx69("h1", { className: "stn-header-title__text", children: resolved }) : resolved })
       ]
     }
   );
 }
 function StnHeaderTitleRoot(props) {
   if (props.variant === "clock") {
-    return /* @__PURE__ */ jsx68(StnHeaderTitleClock, { ...props });
+    return /* @__PURE__ */ jsx69(StnHeaderTitleClock, { ...props });
   }
   if (props.variant === "dual" || "subText" in props && props.subText != null) {
-    return /* @__PURE__ */ jsx68(StnHeaderTitleDual, { ...props });
+    return /* @__PURE__ */ jsx69(StnHeaderTitleDual, { ...props });
   }
-  return /* @__PURE__ */ jsx68(StnHeaderTitleText, { ...props });
+  return /* @__PURE__ */ jsx69(StnHeaderTitleText, { ...props });
 }
 var StnHeaderTitle = Object.assign(StnHeaderTitleRoot, {
   Text: StnHeaderTitleMainText,
@@ -8498,10 +8659,10 @@ var StnHeaderTitle = Object.assign(StnHeaderTitleRoot, {
 
 // src/layouts/StnContainer.tsx
 import {
-  forwardRef as forwardRef39
+  forwardRef as forwardRef40
 } from "react";
-import { jsx as jsx69 } from "react/jsx-runtime";
-var StnContainer = forwardRef39(function StnContainer2({
+import { jsx as jsx70 } from "react/jsx-runtime";
+var StnContainer = forwardRef40(function StnContainer2({
   component,
   as,
   maxWidth = "lg",
@@ -8516,7 +8677,7 @@ var StnContainer = forwardRef39(function StnContainer2({
   const Component = component ?? as ?? "div";
   const maxWidthClass = maxWidth ? `stn-container--${maxWidth} stn-container--max-width-${maxWidth}` : "stn-container--fluid stn-container--max-width-false";
   const classKey = maxWidth ? `maxWidth${maxWidth.charAt(0).toUpperCase() + maxWidth.slice(1)}` : "maxWidthFalse";
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx70(
     Component,
     {
       ref,
@@ -8539,8 +8700,8 @@ var StnContainer = forwardRef39(function StnContainer2({
 });
 
 // src/layouts/StnGrid.tsx
-import { forwardRef as forwardRef40 } from "react";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { forwardRef as forwardRef41 } from "react";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var BREAKPOINTS2 = ["xs", "sm", "md", "lg", "xl"];
 var SPACING_CLASS = {
   "0": "0",
@@ -8606,7 +8767,7 @@ function sizeClasses(size) {
   }
   return classes;
 }
-var StnGrid = forwardRef40(function StnGrid2({
+var StnGrid = forwardRef41(function StnGrid2({
   component,
   as,
   container = false,
@@ -8626,7 +8787,7 @@ var StnGrid = forwardRef40(function StnGrid2({
   const Component = component ?? as ?? "div";
   const justify = typeof justifyContent === "string" && JUSTIFY_CLASS2.has(justifyContent) ? justifyContent : void 0;
   const align = typeof alignItems === "string" && ALIGN_CLASS2.has(alignItems) ? alignItems : void 0;
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     Component,
     {
       ref,
@@ -8650,7 +8811,7 @@ var StnGrid = forwardRef40(function StnGrid2({
 });
 
 // src/layouts/StnLayerShell.tsx
-import { jsx as jsx71, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs52 } from "react/jsx-runtime";
 function StnLayerShell({
   gnb,
   gnbSide = "left",
@@ -8671,7 +8832,7 @@ function StnLayerShell({
   const resolvedMainContent = layer1 ?? children;
   const resolvedModal = layer2;
   const isGnbRight = gnbSide === "right";
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs52(
     "div",
     {
       id: wrapId,
@@ -8680,8 +8841,8 @@ function StnLayerShell({
       className: cn("stn-wrap", isGnbRight && "stn-wrap--gnb-right", wrapClassName),
       children: [
         layer0,
-        utilities ? /* @__PURE__ */ jsx71("div", { className: "stn-page-utilities", "data-stn-layer-role": "utility", children: utilities }) : null,
-        /* @__PURE__ */ jsxs51(
+        utilities ? /* @__PURE__ */ jsx72("div", { className: "stn-page-utilities", "data-stn-layer-role": "utility", children: utilities }) : null,
+        /* @__PURE__ */ jsxs52(
           "main",
           {
             id: containerId,
@@ -8690,9 +8851,9 @@ function StnLayerShell({
             className: cn("stn-layer-1", scrollable && "scroll", containerClassName),
             children: [
               !isGnbRight && gnb,
-              /* @__PURE__ */ jsxs51("div", { className: "stn-layer-1__main", children: [
-                header ? /* @__PURE__ */ jsx71("header", { className: "stn-layer-1__header", children: header }) : null,
-                /* @__PURE__ */ jsx71("div", { className: cn("stn-layer-1__body", scrollable && "stn-scroll", contentClassName), children: resolvedMainContent })
+              /* @__PURE__ */ 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 })
               ] }),
               isGnbRight && gnb
             ]
@@ -8705,7 +8866,7 @@ function StnLayerShell({
 }
 
 // src/layouts/StnListViewLayout.tsx
-import { jsx as jsx72, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
 function StnListViewLayoutBody({
   search,
   sidebar,
@@ -8716,13 +8877,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__ */ jsx72("aside", { className: lnbClass, children: sidebar }) : null;
-  return /* @__PURE__ */ jsx72(
+  const sidebarAside = sidebar ? /* @__PURE__ */ jsx73("aside", { className: lnbClass, children: sidebar }) : null;
+  return /* @__PURE__ */ jsx73(
     StnContainer,
     {
       maxWidth: false,
       className: cn("stn-list-view-layout__body", className),
-      children: /* @__PURE__ */ jsxs52(
+      children: /* @__PURE__ */ jsxs53(
         StnStack,
         {
           direction: "row",
@@ -8730,19 +8891,19 @@ function StnListViewLayoutBody({
           className: "stn-list-view__main",
           children: [
             lnbSide === "left" ? sidebarAside : null,
-            /* @__PURE__ */ jsxs52(
+            /* @__PURE__ */ jsxs53(
               StnStack,
               {
                 direction: "column",
                 spacing: 2,
                 className: "stn-list-view__content-stack",
                 children: [
-                  search ? /* @__PURE__ */ jsx72("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
-                  /* @__PURE__ */ jsx72(
+                  search ? /* @__PURE__ */ jsx73("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
+                  /* @__PURE__ */ jsx73(
                     "div",
                     {
                       className: "stn-page-scaffold__content content_box",
-                      children: children ?? /* @__PURE__ */ jsxs52("div", { className: "stn-table stn-table--fill", children: [
+                      children: children ?? /* @__PURE__ */ jsxs53("div", { className: "stn-table stn-table--fill", children: [
                         table,
                         pagination
                       ] })
@@ -8774,7 +8935,7 @@ function StnListViewLayoutRoot({
 }) {
   const bare = bareProp ?? noShell ?? false;
   const hasLnbClass = lnbSide === "right" ? "has_lnb_right" : "has_lnb";
-  const body = /* @__PURE__ */ jsx72(
+  const body = /* @__PURE__ */ jsx73(
     StnListViewLayoutBody,
     {
       search,
@@ -8789,10 +8950,10 @@ function StnListViewLayoutRoot({
   if (bare) {
     return body;
   }
-  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ jsx72("div", { className: "stn-layer-1__header", children: /* @__PURE__ */ jsx72(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx72(StnHeader.Left, { children: /* @__PURE__ */ jsx72(StnHeaderPageTitle, { children: title }) }) }) });
-  return /* @__PURE__ */ jsxs52("div", { className: cn("stn-list-view-layout", "stn-layer-1", className), ...rest, children: [
+  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ 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: [
     renderedHeader,
-    /* @__PURE__ */ jsx72(
+    /* @__PURE__ */ jsx73(
       "div",
       {
         className: cn("stn-content-area", sidebar ? hasLnbClass : null, search ? "has_sch" : null),
@@ -8802,10 +8963,10 @@ function StnListViewLayoutRoot({
   ] });
 }
 function StnListViewLayoutHeader({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx72("div", { className: cn("stn-layer-1__header", className), ...rest, children });
+  return /* @__PURE__ */ jsx73("div", { className: cn("stn-layer-1__header", className), ...rest, children });
 }
 function StnListViewLayoutSearch({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx72("div", { className: cn("search_area", className), ...rest, children });
+  return /* @__PURE__ */ jsx73("div", { className: cn("search_area", className), ...rest, children });
 }
 function StnListViewLayoutSidebar({
   side = "left",
@@ -8814,16 +8975,16 @@ function StnListViewLayoutSidebar({
   ...rest
 }) {
   const lnbClass = side === "right" ? "lnb_box_right" : "lnb_box";
-  return /* @__PURE__ */ jsx72("aside", { className: cn(lnbClass, className), ...rest, children });
+  return /* @__PURE__ */ jsx73("aside", { className: cn(lnbClass, className), ...rest, children });
 }
 function StnListViewLayoutContent({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx72("div", { className: cn("content_box", className), ...rest, children });
+  return /* @__PURE__ */ jsx73("div", { className: cn("content_box", className), ...rest, children });
 }
 function StnListViewLayoutTable({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx72("div", { className: cn("stn-table", className), ...rest, children });
+  return /* @__PURE__ */ jsx73("div", { className: cn("stn-table", className), ...rest, children });
 }
 function StnListViewLayoutPagination({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx72("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
+  return /* @__PURE__ */ jsx73("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
 }
 var StnListViewLayout = Object.assign(StnListViewLayoutRoot, {
   Body: StnListViewLayoutBody,
@@ -8857,13 +9018,13 @@ import {
 } from "@stn-uiux/pub-ui/data/stnLayout";
 
 // src/patterns/dashboard/StnMapCanvas.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 function StnMapCanvas({
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     "div",
     {
       className: cn("stn-map-canvas", className),
@@ -8875,7 +9036,7 @@ function StnMapCanvas({
 }
 
 // src/patterns/dashboard/StnDashboard.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var fillStyle = {
   flex: "1 1 0%",
   minHeight: 0,
@@ -8894,7 +9055,7 @@ function StnDashboardRoot({
 }) {
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn(
@@ -8923,7 +9084,7 @@ function StnDashboardLeft({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn("stn-dashboard__left", className),
@@ -8949,7 +9110,7 @@ function StnDashboardRight({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn("stn-dashboard__right", className),
@@ -8977,7 +9138,7 @@ function StnDashboardTopRight({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn("stn-dashboard__top-right", className),
@@ -8996,9 +9157,9 @@ var StnDashboard = Object.assign(StnDashboardRoot, {
 });
 
 // src/patterns/scaffold/StnPageScaffold.tsx
-import { jsx as jsx75, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
 function StnPageScaffoldRoot({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       className: cn("stn-page-scaffold", className),
@@ -9015,9 +9176,9 @@ function StnPageScaffoldRegion({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs53("div", { className: cn("stn-page-scaffold__region", className), "data-stn-page-scaffold": "region", ...rest, children: [
-    /* @__PURE__ */ jsx75("span", { className: "stn-page-scaffold__region-label", children: label }),
-    hint ? /* @__PURE__ */ jsx75("span", { className: "stn-page-scaffold__region-hint", children: hint }) : null,
+  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,
     children
   ] });
 }
@@ -9028,7 +9189,7 @@ function StnPageScaffoldMapPlaceholder({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx75("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsx76("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs54(
     "div",
     {
       className: cn("stn-page-scaffold__canvas-placeholder", className),
@@ -9036,8 +9197,8 @@ function StnPageScaffoldMapPlaceholder({
       role: "status",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx75("p", { className: "stn-page-scaffold__canvas-placeholder-title", children: message }),
-        note ? /* @__PURE__ */ jsx75("p", { className: "stn-page-scaffold__canvas-placeholder-note", children: note }) : null,
+        /* @__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,
         children
       ]
     }
@@ -9048,7 +9209,7 @@ function StnPageScaffoldMapCanvas({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       className: cn("stn-widget", "shell-canvas", "stn-map-canvas", "stn-page-scaffold__canvas", className),
@@ -9061,7 +9222,7 @@ function StnPageScaffoldMapCanvas({
 }
 function StnPageScaffoldLayer({ label, hint, children, className, ...layerProps }) {
   const labelText = label ? hint ? `${label} \xB7 ${hint}` : label : void 0;
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     StnLayer2,
     {
       className: cn(
@@ -9108,25 +9269,25 @@ function DashboardPageScaffold({
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
   const isNone = widgetPosition === "none" || !showRightRegion;
-  const mapColumn = /* @__PURE__ */ jsxs53(StnDashboard.Left, { children: [
-    /* @__PURE__ */ jsx75(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
+  const mapColumn = /* @__PURE__ */ jsxs54(StnDashboard.Left, { children: [
+    /* @__PURE__ */ jsx76(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
     faultPanel
   ] });
-  const rightWidgets = right ?? /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const leftWidgets = left ?? right ?? /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC88C\uCE21 \uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const dashboardGrid = bodyEmpty ? /* @__PURE__ */ jsx75(StnDashboard, { empty: true, widgetPosition, "data-stn-page-scaffold": "dashboard-empty" }) : isBoth ? /* @__PURE__ */ jsxs53(StnDashboard, { widgetPosition: "both", children: [
-    /* @__PURE__ */ jsx75(StnDashboard.Right, { children: leftWidgets }),
+  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 }),
     mapColumn,
-    /* @__PURE__ */ jsx75(StnDashboard.Right, { children: rightWidgets })
-  ] }) : isLeft ? /* @__PURE__ */ jsxs53(StnDashboard, { widgetPosition: "left", children: [
-    /* @__PURE__ */ jsx75(StnDashboard.Right, { children: leftWidgets }),
+    /* @__PURE__ */ jsx76(StnDashboard.Right, { children: rightWidgets })
+  ] }) : isLeft ? /* @__PURE__ */ jsxs54(StnDashboard, { widgetPosition: "left", children: [
+    /* @__PURE__ */ jsx76(StnDashboard.Right, { children: leftWidgets }),
     mapColumn
-  ] }) : /* @__PURE__ */ jsxs53(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
+  ] }) : /* @__PURE__ */ jsxs54(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
     mapColumn,
-    !isNone ? /* @__PURE__ */ jsx75(StnDashboard.Right, { children: rightWidgets }) : null
+    !isNone ? /* @__PURE__ */ jsx76(StnDashboard.Right, { children: rightWidgets }) : null
   ] });
   const contentNode = children ?? dashboardGrid;
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     StnLayerShell,
     {
       gnb,
@@ -9135,7 +9296,7 @@ function DashboardPageScaffold({
       layer0,
       layer2,
       ...shellProps,
-      children: /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsx76(
         StnContainer,
         {
           maxWidth: false,
@@ -9149,16 +9310,16 @@ function DashboardPageScaffold({
 }
 
 // src/patterns/scaffold/AlertCenterPageScaffold.tsx
-import { useMemo as useMemo5, useState as useState19 } from "react";
+import { useMemo as useMemo5, useState as useState20 } 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 jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
 function defaultTopologyHeader(_clock) {
-  return /* @__PURE__ */ jsx76(StnHeader, { variant: "widget" });
+  return /* @__PURE__ */ jsx77(StnHeader, { variant: "widget" });
 }
 function AlertCenterPageScaffold({
   gnbAlertPanel,
@@ -9175,9 +9336,9 @@ function AlertCenterPageScaffold({
   defaultGnbOpen = true,
   ...shellProps
 }) {
-  const [gnbOpen, setGnbOpen] = useState19(defaultGnbOpen);
+  const [gnbOpen, setGnbOpen] = useState20(defaultGnbOpen);
   const panel = useMemo5(
-    () => gnbAlertPanel ?? /* @__PURE__ */ jsx76(
+    () => gnbAlertPanel ?? /* @__PURE__ */ jsx77(
       StnAlertCenterPanel,
       {
         alerts: STN_ALERT_CENTER_DEMO_ALERTS,
@@ -9188,26 +9349,26 @@ function AlertCenterPageScaffold({
     [gnbAlertPanel]
   );
   const sideNav = useMemo5(
-    () => gnbProp ?? /* @__PURE__ */ jsxs54(Fragment10, { children: [
-      /* @__PURE__ */ jsxs54(
+    () => gnbProp ?? /* @__PURE__ */ jsxs55(Fragment10, { children: [
+      /* @__PURE__ */ jsxs55(
         StnSideNavigation,
         {
           collapsed: !gnbOpen,
           onCollapseChange: (col) => setGnbOpen(!col),
           children: [
-            /* @__PURE__ */ jsxs54(StnSideNavigation.Header, { children: [
-              /* @__PURE__ */ jsx76(StnSideNavigation.Logo, {}),
-              /* @__PURE__ */ jsx76(StnSideNavigation.Toggle, {})
+            /* @__PURE__ */ jsxs55(StnSideNavigation.Header, { children: [
+              /* @__PURE__ */ jsx77(StnSideNavigation.Logo, {}),
+              /* @__PURE__ */ jsx77(StnSideNavigation.Toggle, {})
             ] }),
-            /* @__PURE__ */ jsxs54(StnSideNavigation.Menu, { children: [
-              /* @__PURE__ */ jsx76(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/layout-grid"), label: "\uBA54\uC778 \uB300\uC2DC\uBCF4\uB4DC", active: true }),
-              /* @__PURE__ */ jsx76(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/server_2"), label: "\uC11C\uBC84 \uBAA8\uB2C8\uD130\uB9C1" }),
-              /* @__PURE__ */ jsx76(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/activity"), label: "\uB124\uD2B8\uC6CC\uD06C \uBD84\uC11D" })
+            /* @__PURE__ */ 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__ */ jsx76(StnSideNavigation.Spacer, {}),
-            /* @__PURE__ */ jsxs54(StnSideNavigation.Footer, { curved: true, children: [
-              /* @__PURE__ */ jsx76(StnSideNavigation.Watermark, {}),
-              /* @__PURE__ */ jsx76(
+            /* @__PURE__ */ jsx77(StnSideNavigation.Spacer, {}),
+            /* @__PURE__ */ jsxs55(StnSideNavigation.Footer, { curved: true, children: [
+              /* @__PURE__ */ jsx77(StnSideNavigation.Watermark, {}),
+              /* @__PURE__ */ jsx77(
                 StnSideNavigation.Item,
                 {
                   iconSrc: systemIconSrc("line/bell"),
@@ -9216,7 +9377,7 @@ function AlertCenterPageScaffold({
                   onClick: void 0
                 }
               ),
-              /* @__PURE__ */ jsx76(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/settings"), label: "\uC124\uC815" })
+              /* @__PURE__ */ jsx77(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/settings"), label: "\uC124\uC815" })
             ] })
           ]
         }
@@ -9225,8 +9386,8 @@ function AlertCenterPageScaffold({
     ] }),
     [gnbProp, gnbOpen, panel]
   );
-  const faultSlot = faultPanel ?? (showFaultPanelPlaceholder ? /* @__PURE__ */ jsx76("div", { className: "wrap_real_time stn-page-scaffold__fault-ph", children: /* @__PURE__ */ jsx76(StnPageScaffold.Region, { label: "\uC2E4\uC2DC\uAC04 \uC7A5\uC560 \uD604\uD669", hint: "StnWidget shell=fault-panel \xB7 \uC120\uD0DD" }) }) : null);
-  return /* @__PURE__ */ jsx76(
+  const faultSlot = faultPanel ?? (showFaultPanelPlaceholder ? /* @__PURE__ */ jsx77("div", { className: "wrap_real_time stn-page-scaffold__fault-ph", children: /* @__PURE__ */ jsx77(StnPageScaffold.Region, { label: "\uC2E4\uC2DC\uAC04 \uC7A5\uC560 \uD604\uD669", hint: "StnWidget shell=fault-panel \xB7 \uC120\uD0DD" }) }) : null);
+  return /* @__PURE__ */ jsx77(
     DashboardPageScaffold,
     {
       gnb: sideNav,
@@ -9234,7 +9395,7 @@ function AlertCenterPageScaffold({
       mapMessage,
       mapNote,
       faultPanel: faultSlot,
-      right: right ?? /* @__PURE__ */ jsx76(AlertCenterDashboard, {}),
+      right: right ?? /* @__PURE__ */ jsx77(AlertCenterDashboard, {}),
       wrapId,
       wrapClassName: "stn-page--map-bg",
       ...shellProps
@@ -9243,8 +9404,8 @@ function AlertCenterPageScaffold({
 }
 
 // src/patterns/scaffold/LoginPageScaffold.tsx
-import { useState as useState20 } from "react";
-import { jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
+import { useState as useState21 } from "react";
+import { jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
 var LOGIN_TABS = [
   { value: "normal", label: "\uC77C\uBC18 \uB85C\uADF8\uC778" },
   { value: "social", label: "\uC18C\uC15C \uB85C\uADF8\uC778" }
@@ -9255,15 +9416,15 @@ function DefaultLoginForm({
   signUpHref = "#",
   recoverHref = "#"
 }) {
-  const [mode, setMode] = useState20("normal");
-  const [userId, setUserId] = useState20("");
-  const [password, setPassword] = useState20("");
+  const [mode, setMode] = useState21("normal");
+  const [userId, setUserId] = useState21("");
+  const [password, setPassword] = useState21("");
   function handleSubmit(e) {
     e.preventDefault();
     onLogin?.(userId, password);
   }
-  return /* @__PURE__ */ jsxs55(StnLoginFormStack, { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsxs56(StnLoginFormStack, { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx78(
       StnSegmented,
       {
         "aria-label": "\uB85C\uADF8\uC778 \uBC29\uC2DD",
@@ -9272,8 +9433,8 @@ function DefaultLoginForm({
         options: LOGIN_TABS
       }
     ),
-    mode === "normal" ? /* @__PURE__ */ jsxs55(StnLoginFormFields, { children: [
-      /* @__PURE__ */ jsx77(
+    mode === "normal" ? /* @__PURE__ */ jsxs56(StnLoginFormFields, { children: [
+      /* @__PURE__ */ jsx78(
         StnLoginTextField,
         {
           icon: "line/user",
@@ -9285,7 +9446,7 @@ function DefaultLoginForm({
           "aria-label": "\uC544\uC774\uB514"
         }
       ),
-      /* @__PURE__ */ jsx77(
+      /* @__PURE__ */ jsx78(
         StnLoginTextField,
         {
           icon: "line/lock",
@@ -9298,11 +9459,11 @@ function DefaultLoginForm({
           "aria-label": "\uBE44\uBC00\uBC88\uD638"
         }
       )
-    ] }) : socialContent ?? /* @__PURE__ */ jsx77(StnLoginPlaceholder, {}),
-    /* @__PURE__ */ jsx77(StnButton, { type: "submit", size: "xl", fullWidth: true, children: "\uB85C\uADF8\uC778" }),
-    /* @__PURE__ */ jsxs55(StnLoginFormLinks, { children: [
-      /* @__PURE__ */ jsx77("a", { href: signUpHref, children: "\uD68C\uC6D0\uAC00\uC785" }),
-      /* @__PURE__ */ jsx77("a", { href: recoverHref, children: "\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30" })
+    ] }) : socialContent ?? /* @__PURE__ */ jsx78(StnLoginPlaceholder, {}),
+    /* @__PURE__ */ jsx78(StnButton, { type: "submit", size: "xl", fullWidth: true, children: "\uB85C\uADF8\uC778" }),
+    /* @__PURE__ */ 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" })
     ] })
   ] });
 }
@@ -9316,16 +9477,16 @@ function DefaultLoginCard({
   signUpHref,
   recoverHref
 }) {
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     StnLoginCard,
     {
       glow,
       variant,
-      brand: /* @__PURE__ */ jsxs55(StnLoginBrandStack, { children: [
-        logo ?? /* @__PURE__ */ jsx77(StnLogo, { variant: "vertical", size: "xl" }),
-        /* @__PURE__ */ jsx77("p", { className: "stn-login-card__caption", children: productCaption })
+      brand: /* @__PURE__ */ jsxs56(StnLoginBrandStack, { children: [
+        logo ?? /* @__PURE__ */ jsx78(StnLogo, { variant: "vertical", size: "xl" }),
+        /* @__PURE__ */ jsx78("p", { className: "stn-login-card__caption", children: productCaption })
       ] }),
-      children: /* @__PURE__ */ jsx77(
+      children: /* @__PURE__ */ jsx78(
         DefaultLoginForm,
         {
           onLogin,
@@ -9351,8 +9512,8 @@ function LoginPageScaffold({
   recoverHref,
   ...shellProps
 }) {
-  const resolvedLayer0 = layer0 ?? /* @__PURE__ */ jsx77(StnLayer0Background, { variant: "login" });
-  const resolvedCard = children ?? /* @__PURE__ */ jsx77(
+  const resolvedLayer0 = layer0 ?? /* @__PURE__ */ jsx78(StnLayer0Background, { variant: "login" });
+  const resolvedCard = children ?? /* @__PURE__ */ jsx78(
     DefaultLoginCard,
     {
       logo,
@@ -9365,7 +9526,7 @@ function LoginPageScaffold({
       recoverHref
     }
   );
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs56(
     "div",
     {
       className: cn("stn-wrap stn-page--login", wrapClassName),
@@ -9373,7 +9534,7 @@ function LoginPageScaffold({
       ...shellProps,
       children: [
         resolvedLayer0,
-        /* @__PURE__ */ jsx77("div", { className: "stn-login", children: resolvedCard })
+        /* @__PURE__ */ jsx78("div", { className: "stn-login", children: resolvedCard })
       ]
     }
   );
@@ -9402,7 +9563,7 @@ import {
 
 // src/patterns/toolbar/StnFloatingToolbar.tsx
 import React3 from "react";
-import { jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
 var DEFAULT_MAP_MODES = [
   { value: "sphere", label: "\uAD6C\uBA74" },
   { value: "plane", label: "\uD3C9\uBA74" },
@@ -9412,7 +9573,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__ */ jsx78(
+    return /* @__PURE__ */ jsx79(
       "div",
       {
         ref,
@@ -9445,7 +9606,7 @@ var StnMapToolbar = React3.forwardRef(
     children,
     ...restProps
   }, ref) => {
-    return /* @__PURE__ */ jsxs56(
+    return /* @__PURE__ */ jsxs57(
       StnFloatingToolbar,
       {
         ref,
@@ -9455,7 +9616,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__ */ jsx78(
+          modeOptions && modeOptions.length > 0 && /* @__PURE__ */ jsx79(
             StnDropdown,
             {
               size: "md",
@@ -9466,75 +9627,75 @@ var StnMapToolbar = React3.forwardRef(
               "aria-label": "\uD22C\uC601 \uBAA8\uB4DC \uC120\uD0DD"
             }
           ),
-          onRestore && /* @__PURE__ */ jsx78(
+          onRestore && /* @__PURE__ */ jsx79(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx78("path", { d: "M3.06006 13C3.30547 15.1939 4.34865 17.221 5.9912 18.696C7.63374 20.1709 9.76108 20.9907 11.9686 20.9994C14.1762 21.0081 16.3099 20.2052 17.9641 18.7434C19.6183 17.2815 20.6775 15.2627 20.9403 13.0708C21.2031 10.879 20.6511 8.66696 19.3894 6.85551C18.1276 5.04406 16.2441 3.75951 14.0971 3.24618C11.95 2.73284 9.68922 3.02652 7.74457 4.07135C5.79993 5.11619 4.30712 6.83931 3.55006 8.913" }),
-                /* @__PURE__ */ jsx78("path", { d: "M3 4.00098V9.00098H8" }),
-                /* @__PURE__ */ jsx78("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" })
+              icon: /* @__PURE__ */ 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" })
               ] }),
               "aria-label": "\uCD08\uAE30\uD654 (Restore)",
               title: "\uCD08\uAE30\uD654 (Restore)",
               onClick: onRestore
             }
           ),
-          onFullscreen && /* @__PURE__ */ jsx78(
+          onFullscreen && /* @__PURE__ */ jsx79(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx78("path", { d: "M16 4H20V8" }),
-                /* @__PURE__ */ jsx78("path", { d: "M14 10L20 4" }),
-                /* @__PURE__ */ jsx78("path", { d: "M8 20H4V16" }),
-                /* @__PURE__ */ jsx78("path", { d: "M4 20L10 14" })
+              icon: /* @__PURE__ */ 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" })
               ] }),
               "aria-label": "\uC804\uCCB4\uD654\uBA74",
               title: "\uC804\uCCB4\uD654\uBA74",
               onClick: onFullscreen
             }
           ),
-          onZoomIn && /* @__PURE__ */ jsx78(
+          onZoomIn && /* @__PURE__ */ jsx79(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx78("path", { d: "M12 5V19" }),
-                /* @__PURE__ */ jsx78("path", { d: "M5 12H19" })
+              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" })
               ] }),
               "aria-label": "\uD655\uB300",
               title: "\uD655\uB300",
               onClick: onZoomIn
             }
           ),
-          onZoomOut && /* @__PURE__ */ jsx78(
+          onZoomOut && /* @__PURE__ */ jsx79(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsx78("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx78("path", { d: "M5 12H19" }) }),
+              icon: /* @__PURE__ */ jsx79("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx79("path", { d: "M5 12H19" }) }),
               "aria-label": "\uCD95\uC18C",
               title: "\uCD95\uC18C",
               onClick: onZoomOut
             }
           ),
-          onRefresh && /* @__PURE__ */ jsx78(
+          onRefresh && /* @__PURE__ */ jsx79(
             StnButton,
             {
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx78("path", { d: "M20 11C19.7554 9.24023 18.9391 7.60967 17.6766 6.35951C16.4142 5.10934 14.7758 4.30893 13.0137 4.08156C11.2516 3.8542 9.46362 4.21249 7.9252 5.10126C6.38678 5.99002 5.18325 7.35995 4.5 9.00001M4 5.00001V9.00001H8" }),
-                /* @__PURE__ */ jsx78("path", { d: "M4 13C4.24456 14.7598 5.06093 16.3903 6.32336 17.6405C7.58579 18.8907 9.22424 19.6911 10.9863 19.9184C12.7484 20.1458 14.5364 19.7875 16.0748 18.8988C17.6132 18.01 18.8168 16.6401 19.5 15M20 19V15H16" })
+              icon: /* @__PURE__ */ 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" })
               ] }),
               "aria-label": "\uC0C8\uB85C\uACE0\uCE68",
               title: "\uC0C8\uB85C\uACE0\uCE68",
@@ -9788,7 +9949,6 @@ export {
   StnStatusDotGroup,
   StnStatusFlow,
   StnStatusSeverity,
-  StnStatusSeverityFilter,
   StnStatusSwitch,
   StnSwitch,
   StnTable,
@@ -9801,6 +9961,7 @@ export {
   StnTableTdCheck,
   StnTableTh,
   StnTableThCheck,
+  StnTextArea,
   StnTextField,
   StnToastCloseButton,
   StnToastIcon,