@stn-uiux/pub-ui-react 0.1.81 → 0.1.82

package/dist/index.js

@@ -8190,8 +8190,109 @@ StnTopologyGraph.Toolbar = StnTopologyGraphToolbar;
 StnTopologyGraph.Minimap = StnTopologyGraphMinimap;
 StnTopologyGraph.Viewport = StnTopologyGraphViewport;
 
+// src/patterns/widget/StnGradeRow.tsx
+import "react";
+import { jsx as jsx57, jsxs as jsxs45 } from "react/jsx-runtime";
+var GRADE_ROW_ICON = {
+  critical: "fill/alert4",
+  major: "fill/alert3",
+  minor: "fill/alert2",
+  default: "fill/alert1"
+};
+function formatGradePercent(percent, decimals) {
+  if (decimals !== void 0) {
+    return `${percent.toFixed(decimals)}%`;
+  }
+  const rounded = Math.round(percent * 10) / 10;
+  return Number.isInteger(rounded) ? `${rounded}%` : `${rounded.toFixed(1)}%`;
+}
+function StnGradeRow({
+  grade,
+  label,
+  value,
+  percent,
+  percentLabel,
+  decimals,
+  className,
+  ...rest
+}) {
+  const clamped = Math.max(0, Math.min(100, percent));
+  const resolvedPercentLabel = percentLabel ?? formatGradePercent(clamped, decimals);
+  return /* @__PURE__ */ jsxs45(
+    "div",
+    {
+      className: cn(
+        "stn-grade-row",
+        `stn-grade-row--${grade}`,
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs45("div", { className: "stn-grade-row__left", children: [
+          /* @__PURE__ */ jsxs45("span", { className: "stn-grade-row__label", children: [
+            /* @__PURE__ */ jsx57(StnIcon, { name: GRADE_ROW_ICON[grade], size: 20, className: "stn-grade-row__icon", "aria-hidden": true }),
+            label
+          ] }),
+          /* @__PURE__ */ jsx57("div", { className: "stn-grade-row__track", "aria-hidden": true, children: /* @__PURE__ */ jsx57("span", { className: "stn-grade-row__fill", style: { width: `${clamped}%` } }) })
+        ] }),
+        /* @__PURE__ */ jsxs45("div", { className: "stn-grade-row__right", children: [
+          /* @__PURE__ */ jsx57("span", { className: "stn-grade-row__value", children: value }),
+          /* @__PURE__ */ jsx57("span", { className: "stn-grade-row__percent", children: resolvedPercentLabel })
+        ] })
+      ]
+    }
+  );
+}
+function StnGradeRowList({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx57("div", { className: cn("stn-grade-row-list", className), ...rest, children });
+}
+
+// src/patterns/widget/StnStatCard.tsx
+import "react";
+import { jsx as jsx58, jsxs as jsxs46 } from "react/jsx-runtime";
+function StnStatCard({ label, count, className, ...rest }) {
+  return /* @__PURE__ */ jsxs46("div", { className: cn("stn-stat-card", className), ...rest, children: [
+    /* @__PURE__ */ jsx58("span", { className: "stn-stat-label", children: label }),
+    /* @__PURE__ */ jsx58("span", { className: "stn-stat-count", children: count })
+  ] });
+}
+function StnStatGroup({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx58("div", { className: cn("stn-stat-group", className), ...rest, children });
+}
+
+// src/patterns/widget/StnStatusList.tsx
+import "react";
+import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
+function StnStatusItem({
+  label,
+  value,
+  grade: gradeProp,
+  status,
+  showDot = true,
+  className,
+  ...rest
+}) {
+  const grade = gradeProp ?? (status === "warning" ? "minor" : status) ?? "normal";
+  return /* @__PURE__ */ jsxs47("div", { className: cn("stn-status-item", className), ...rest, children: [
+    /* @__PURE__ */ jsxs47("span", { className: "stn-status-item__label", children: [
+      showDot ? /* @__PURE__ */ jsx59(
+        "span",
+        {
+          className: cn("stn-status-item__dot", `stn-status-item__dot--${grade}`),
+          "aria-hidden": "true"
+        }
+      ) : null,
+      label
+    ] }),
+    /* @__PURE__ */ jsx59("span", { className: "stn-status-item__val", children: value })
+  ] });
+}
+function StnStatusList({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx59("div", { className: cn("stn-status-list", className), ...rest, children });
+}
+
 // src/components/StnWidget.tsx
-import { Fragment as Fragment8, jsx as jsx57, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs48 } from "react/jsx-runtime";
 var SHELL_PUB_CLASS = {
   card: "",
   "fault-panel": "",
@@ -8274,20 +8375,20 @@ function StnWidgetPeriodText({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx57("span", { className: cn("stn-widget__period-text", className), ...rest, children });
+  return /* @__PURE__ */ jsx60("span", { className: cn("stn-widget__period-text", className), ...rest, children });
 }
 function StnWidgetPeriodSelect({
   label,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx60(
     StnButton,
     {
       variant: "ghost",
       size: "sm",
       shape: "square",
-      icon: /* @__PURE__ */ jsx57(StnIcon, { name: "line/chevron-down" }),
+      icon: /* @__PURE__ */ jsx60(StnIcon, { name: "line/chevron-down" }),
       iconPosition: "right",
       className,
       ...rest,
@@ -8304,26 +8405,26 @@ function StnWidgetPeriodPager({
   nextLabel = "\uB2E4\uC74C",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs45("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
-    /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs48("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
+    /* @__PURE__ */ jsx60(
       StnButton,
       {
         variant: "ghost",
         size: "sm",
         shape: "square",
-        icon: /* @__PURE__ */ jsx57(StnIcon, { name: "line/arrow-narrow-left" }),
+        icon: /* @__PURE__ */ jsx60(StnIcon, { name: "line/arrow-narrow-left" }),
         onClick: onPrev,
         "aria-label": prevLabel
       }
     ),
-    /* @__PURE__ */ jsx57("span", { className: "stn-widget__period-pager-label", children: label }),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx60("span", { className: "stn-widget__period-pager-label", children: label }),
+    /* @__PURE__ */ jsx60(
       StnButton,
       {
         variant: "ghost",
         size: "sm",
         shape: "square",
-        icon: /* @__PURE__ */ jsx57(StnIcon, { name: "line/arrow-narrow-right" }),
+        icon: /* @__PURE__ */ jsx60(StnIcon, { name: "line/arrow-narrow-right" }),
         onClick: onNext,
         "aria-label": nextLabel
       }
@@ -8350,18 +8451,18 @@ function StnWidgetHeaderInner({
     return null;
   }
   const resolvedIconName = headerIconName ?? defaultHeaderIconName(appearance);
-  return /* @__PURE__ */ jsxs45("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs45("div", { className: "stn-widget__head-start", children: [
-      showHeaderIcon ? headerIcon != null ? /* @__PURE__ */ jsx57(StnWidgetInsetIcon, { size: "sm", children: headerIcon }) : resolvedIconName ? /* @__PURE__ */ jsx57(StnWidgetInsetIcon, { size: "sm", icon: resolvedIconName }) : null : null,
-      title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs45("div", { className: "stn-widget__title-wrap", children: [
-        typeof title === "string" ? /* @__PURE__ */ jsx57("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : null,
+  return /* @__PURE__ */ jsxs48("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
+    /* @__PURE__ */ jsxs48("div", { className: "stn-widget__head-start", children: [
+      showHeaderIcon ? headerIcon != null ? /* @__PURE__ */ jsx60(StnWidgetInsetIcon, { size: "sm", children: headerIcon }) : resolvedIconName ? /* @__PURE__ */ jsx60(StnWidgetInsetIcon, { size: "sm", icon: resolvedIconName }) : null : null,
+      title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs48("div", { className: "stn-widget__title-wrap", children: [
+        typeof title === "string" ? /* @__PURE__ */ jsx60("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : null,
         badge
-      ] }) : /* @__PURE__ */ jsxs45(Fragment8, { children: [
+      ] }) : /* @__PURE__ */ jsxs48(Fragment8, { children: [
         title,
         badge
       ] }) : null
     ] }),
-    titleActions != null || periodActions != null || periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx57("div", { className: "stn-widget__head-end", children: titleActions ?? (periodActions != null ? periodActions : periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx57(StnWidgetPeriodText, { children: periodLabel }) : null) }) : null
+    titleActions != null || periodActions != null || periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx60("div", { className: "stn-widget__head-end", children: titleActions ?? (periodActions != null ? periodActions : periodLabel != null && periodLabel !== "" ? /* @__PURE__ */ jsx60(StnWidgetPeriodText, { children: periodLabel }) : null) }) : null
   ] });
 }
 function StnWidgetRoot({
@@ -8444,10 +8545,10 @@ function StnWidgetRoot({
     ...rest
   };
   const slots = partitionWidgetChildren(children);
-  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs45("div", { className: "app_bar", children: [
-    /* @__PURE__ */ jsx57("div", { className: "fault_title_box", children: typeof title === "string" ? /* @__PURE__ */ jsx57("span", { children: title }) : title }),
+  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs48("div", { className: "app_bar", children: [
+    /* @__PURE__ */ jsx60("div", { className: "fault_title_box", children: typeof title === "string" ? /* @__PURE__ */ jsx60("span", { children: title }) : title }),
     titleActions
-  ] }) : null : shell === "board" || shell === "board-item" ? title != null ? /* @__PURE__ */ jsx57("div", { className: "stn-widget__head", children: typeof title === "string" ? /* @__PURE__ */ jsx57("p", { children: title }) : title }) : null : isFigmaShell ? /* @__PURE__ */ jsx57(
+  ] }) : null : shell === "board" || shell === "board-item" ? title != null ? /* @__PURE__ */ jsx60("div", { className: "stn-widget__head", children: typeof title === "string" ? /* @__PURE__ */ jsx60("p", { children: title }) : title }) : null : isFigmaShell ? /* @__PURE__ */ jsx60(
     StnWidgetHeaderInner,
     {
       appearance,
@@ -8463,40 +8564,40 @@ function StnWidgetRoot({
       headerIcon,
       wrapActions
     }
-  ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs45("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs45("div", { className: "stn-widget__head-start", children: [
-      title != null ? typeof title === "string" ? /* @__PURE__ */ jsx57("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : title : null,
+  ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs48("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
+    /* @__PURE__ */ jsxs48("div", { className: "stn-widget__head-start", children: [
+      title != null ? typeof title === "string" ? /* @__PURE__ */ jsx60("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : title : null,
       badge
     ] }),
-    titleActions ? /* @__PURE__ */ jsx57("div", { className: "stn-widget__head-end", children: titleActions }) : null
+    titleActions ? /* @__PURE__ */ jsx60("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__ */ jsx57("div", { className: cn("stn-widget__body", autoBodyClass, contentClassName), children: /* @__PURE__ */ jsx57(StnWidgetLoading, {}) });
+    body = /* @__PURE__ */ jsx60("div", { className: cn("stn-widget__body", autoBodyClass, contentClassName), children: /* @__PURE__ */ jsx60(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__ */ jsx57("div", { className: cn("stn-widget__body", autoBodyClass, isEmptyState && "empty", contentClassName), style: emptyStyle, children: slots.rest });
+    body = /* @__PURE__ */ jsx60("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__ */ jsx57("div", { className: "stn-widget__footer", children: footer }) : null;
-  const card = /* @__PURE__ */ jsxs45("div", { ...rootProps, children: [
-    isFigmaShell && appearanceShell === "overlay" ? /* @__PURE__ */ jsx57("div", { className: "stn-widget__map-deco", "aria-hidden": true }) : null,
+  const footerNode = slots.footers.length > 0 ? slots.footers : footer ? /* @__PURE__ */ jsx60("div", { className: "stn-widget__footer", children: footer }) : null;
+  const card = /* @__PURE__ */ jsxs48("div", { ...rootProps, children: [
+    isFigmaShell && appearanceShell === "overlay" ? /* @__PURE__ */ jsx60("div", { className: "stn-widget__map-deco", "aria-hidden": true }) : null,
     head,
     body,
     footerNode
   ] });
   if (banner == null || banner === false) return card;
-  return /* @__PURE__ */ jsxs45("div", { className: "stn-widget-anchor", children: [
+  return /* @__PURE__ */ jsxs48("div", { className: "stn-widget-anchor", children: [
     withBannerSeverity(banner, bannerSeverityFromStatus(status, isCritical)),
     card
   ] });
 }
 function StnWidgetHeader({ className, wrap = false, children, ...rest }) {
-  return /* @__PURE__ */ jsx57("div", { className: cn("stn-widget__head", wrap && "stn-widget__head--wrap", className), ...rest, children });
+  return /* @__PURE__ */ jsx60("div", { className: cn("stn-widget__head", wrap && "stn-widget__head--wrap", className), ...rest, children });
 }
 markWidgetSlot(StnWidgetHeader, "header");
 function StnWidgetTitle({
@@ -8508,10 +8609,10 @@ function StnWidgetTitle({
   ...rest
 }) {
   const titleAttr = title ?? (typeof children === "string" ? children : void 0);
-  return /* @__PURE__ */ jsx57("p", { className: cn("stn-widget__title", size, weight, className), title: titleAttr, ...rest, children });
+  return /* @__PURE__ */ jsx60("p", { className: cn("stn-widget__title", size, weight, className), title: titleAttr, ...rest, children });
 }
 function StnWidgetActions({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx57("div", { className: cn("stn-widget__head-end", className), ...rest, children });
+  return /* @__PURE__ */ jsx60("div", { className: cn("stn-widget__head-end", className), ...rest, children });
 }
 function StnWidgetBody({
   padding,
@@ -8525,7 +8626,7 @@ function StnWidgetBody({
 }) {
   const emptyText = typeof empty === "string" ? empty : void 0;
   const mergedStyle = emptyText ? { ["--stn-widget-empty-text"]: `"${emptyText}"`, ...style } : style;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx60(
     "div",
     {
       className: cn(
@@ -8547,104 +8648,36 @@ function StnWidgetBody({
 }
 markWidgetSlot(StnWidgetBody, "body");
 function StnWidgetChartSlot({ label = "select chart", className, children, ...rest }) {
-  return /* @__PURE__ */ jsx57("div", { className: cn("stn-widget__chart-slot", className), "data-stn-widget-chart-slot": true, ...rest, children: children ?? /* @__PURE__ */ jsx57("span", { className: "stn-widget__chart-slot-label", children: label }) });
-}
-function StnWidgetStatusItem({
-  label,
-  value,
-  grade: gradeProp,
-  status,
-  showDot = true,
-  className,
-  ...rest
-}) {
-  const grade = gradeProp ?? (status === "warning" ? "minor" : status) ?? "normal";
-  return /* @__PURE__ */ jsxs45("div", { className: cn("stn-widget__status-item", className), ...rest, children: [
-    /* @__PURE__ */ jsxs45("span", { className: "stn-widget__status-label", children: [
-      showDot ? /* @__PURE__ */ jsx57(
-        "span",
-        {
-          className: cn("stn-widget__status-dot", `stn-widget__status-dot--${grade}`),
-          "aria-hidden": "true"
-        }
-      ) : null,
-      label
-    ] }),
-    /* @__PURE__ */ jsx57("span", { className: "stn-widget__status-val", children: value })
-  ] });
-}
-function StnWidgetStatusList({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx57("div", { className: cn("stn-widget__status-list", className), ...rest, children });
-}
-function StnWidgetStatGroup({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx57("div", { className: cn("stn-widget__stat-group", className), ...rest, children });
-}
-function StnWidgetStatCard({ label, count, className, ...rest }) {
-  return /* @__PURE__ */ jsxs45("div", { className: cn("stn-widget__stat-card", className), ...rest, children: [
-    /* @__PURE__ */ jsx57("span", { className: "stn-widget__stat-label", children: label }),
-    /* @__PURE__ */ jsx57("span", { className: "stn-widget__stat-count", children: count })
-  ] });
+  return /* @__PURE__ */ jsx60("div", { className: cn("stn-widget__chart-slot", className), "data-stn-widget-chart-slot": true, ...rest, children: children ?? /* @__PURE__ */ jsx60("span", { className: "stn-widget__chart-slot-label", children: label }) });
 }
 function StnWidgetPlaceholder({ label = "\uCF58\uD150\uCE20 \uC601\uC5ED" }) {
-  return /* @__PURE__ */ jsx57("div", { className: "stn-widget__placeholder", children: label });
-}
-var GRADE_ROW_ICON = {
-  critical: "fill/alert4",
-  major: "fill/alert3",
-  minor: "fill/alert2",
-  default: "fill/alert1"
-};
-function formatGradePercent(percent) {
-  const rounded = Math.round(percent * 10) / 10;
-  return Number.isInteger(rounded) ? `${rounded}%` : `${rounded.toFixed(1)}%`;
-}
-function StnWidgetGradeRow({
-  grade,
-  label,
-  value,
-  percent,
-  percentLabel,
-  className,
-  ...rest
-}) {
-  const clamped = Math.max(0, Math.min(100, percent));
-  const resolvedPercentLabel = percentLabel ?? formatGradePercent(clamped);
-  return /* @__PURE__ */ jsxs45("div", { className: cn("stn-widget__grade-row", `stn-widget__grade-row--${grade}`, className), ...rest, children: [
-    /* @__PURE__ */ jsxs45("div", { className: "stn-widget__grade-row-left", children: [
-      /* @__PURE__ */ jsxs45("span", { className: "stn-widget__grade-row-label", children: [
-        /* @__PURE__ */ jsx57(StnIcon, { name: GRADE_ROW_ICON[grade], size: 20, className: "stn-widget__grade-row-icon", "aria-hidden": true }),
-        label
-      ] }),
-      /* @__PURE__ */ jsx57("div", { className: "stn-widget__grade-row-track", "aria-hidden": true, children: /* @__PURE__ */ jsx57("span", { className: "stn-widget__grade-row-fill", style: { width: `${clamped}%` } }) })
-    ] }),
-    /* @__PURE__ */ jsxs45("div", { className: "stn-widget__grade-row-right", children: [
-      /* @__PURE__ */ jsx57("span", { className: "stn-widget__grade-row-value", children: value }),
-      /* @__PURE__ */ jsx57("span", { className: "stn-widget__grade-row-percent", children: resolvedPercentLabel })
-    ] })
-  ] });
-}
-function StnWidgetGradeRowList({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx57("div", { className: cn("stn-widget__grade-row-list", className), ...rest, children });
-}
+  return /* @__PURE__ */ jsx60("div", { className: "stn-widget__placeholder", children: label });
+}
+var StnWidgetStatusItem = StnStatusItem;
+var StnWidgetStatusList = StnStatusList;
+var StnWidgetStatGroup = StnStatGroup;
+var StnWidgetStatCard = StnStatCard;
+var StnWidgetGradeRow = StnGradeRow;
+var StnWidgetGradeRowList = StnGradeRowList;
 function StnWidgetFooter({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx57("div", { className: cn("stn-widget__footer", className), ...rest, children });
+  return /* @__PURE__ */ jsx60("div", { className: cn("stn-widget__footer", className), ...rest, children });
 }
 markWidgetSlot(StnWidgetFooter, "footer");
 function StnWidgetEmpty({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs45("div", { className: cn("stn-widget__empty", className), ...rest, children: [
-    /* @__PURE__ */ jsxs45("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__ */ jsx57("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ jsx57("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-      /* @__PURE__ */ jsx57("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  return /* @__PURE__ */ jsxs48("div", { className: cn("stn-widget__empty", className), ...rest, children: [
+    /* @__PURE__ */ jsxs48("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__ */ jsx60("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx60("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsx60("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
     ] }),
-    /* @__PURE__ */ jsx57("div", { children: children ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
+    /* @__PURE__ */ jsx60("div", { children: children ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })
   ] });
 }
 function StnWidgetLoading({ lines = 3, className, children, ...rest }) {
-  return /* @__PURE__ */ jsx57("div", { className: cn("stn-widget__loading", className), ...rest, children: children ?? /* @__PURE__ */ jsx57(StnLoadingSkeleton.Widget, { lines }) });
+  return /* @__PURE__ */ jsx60("div", { className: cn("stn-widget__loading", className), ...rest, children: children ?? /* @__PURE__ */ jsx60(StnLoadingSkeleton.Widget, { lines }) });
 }
 function StnWidgetInsetIcon({ className, size = "sm", ...rest }) {
-  return /* @__PURE__ */ jsx57(StnIconBox, { size, className: cn("stn-widget__inset-icon", className), ...rest });
+  return /* @__PURE__ */ jsx60(StnIconBox, { size, className: cn("stn-widget__inset-icon", className), ...rest });
 }
 var StnWidget = Object.assign(StnWidgetRoot, {
   Header: StnWidgetHeader,
@@ -8689,7 +8722,7 @@ import {
 } from "@stn-uiux/pub-ui/data/stnWidget";
 
 // src/patterns/dashboard/AlertCenterDashboard.tsx
-import { jsx as jsx58, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs49 } 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" },
@@ -8698,7 +8731,7 @@ var TOP5_ROWS = [
   { label: "PRADA", percent: 68, value: "68\uAC74", grade: "default" }
 ];
 function AlertCenterDashboard({ className, appearance = "translucent", loading = false }) {
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs49(
     StnStack,
     {
       direction: "column",
@@ -8707,17 +8740,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__ */ jsx58(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx58(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs46(StnWidget.StatusList, { children: [
-          /* @__PURE__ */ jsx58(StnWidget.StatusItem, { label: "PTN", value: "179", showDot: false }),
-          /* @__PURE__ */ jsx58(StnWidget.StatusItem, { label: "MSPP", value: "63", showDot: false }),
-          /* @__PURE__ */ jsx58(StnWidget.StatusItem, { label: "L3\uC2A4\uC704\uCE58", value: "27", showDot: false })
+        /* @__PURE__ */ jsx61(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx61(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs49(StnWidget.StatusList, { children: [
+          /* @__PURE__ */ jsx61(StnWidget.StatusItem, { label: "PTN", value: "179", showDot: false }),
+          /* @__PURE__ */ jsx61(StnWidget.StatusItem, { label: "MSPP", value: "63", showDot: false }),
+          /* @__PURE__ */ jsx61(StnWidget.StatusItem, { label: "L3\uC2A4\uC704\uCE58", value: "27", showDot: false })
         ] }) }),
-        /* @__PURE__ */ jsx58(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx58(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs46(StnWidget.StatusList, { children: [
-          /* @__PURE__ */ jsx58(StnWidget.StatusItem, { label: "Critical", value: "43", grade: "critical" }),
-          /* @__PURE__ */ jsx58(StnWidget.StatusItem, { label: "Major", value: "79", grade: "major" }),
-          /* @__PURE__ */ jsx58(StnWidget.StatusItem, { label: "Minor", value: "3", grade: "minor" })
+        /* @__PURE__ */ jsx61(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx61(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs49(StnWidget.StatusList, { children: [
+          /* @__PURE__ */ jsx61(StnWidget.StatusItem, { label: "Critical", value: "43", grade: "critical" }),
+          /* @__PURE__ */ jsx61(StnWidget.StatusItem, { label: "Major", value: "79", grade: "major" }),
+          /* @__PURE__ */ jsx61(StnWidget.StatusItem, { label: "Minor", value: "3", grade: "minor" })
         ] }) }),
-        /* @__PURE__ */ jsx58(StnWidget, { title: "\uC77C\uC77C \uC7A5\uBE44\uBCC4 \uC7A5\uC560 TOP5", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx58(StnLoadingSkeleton.Widget, { lines: 4 }) : /* @__PURE__ */ jsx58(StnWidget.GradeRowList, { children: TOP5_ROWS.map((row) => /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx61(StnWidget, { title: "\uC77C\uC77C \uC7A5\uBE44\uBCC4 \uC7A5\uC560 TOP5", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx61(StnLoadingSkeleton.Widget, { lines: 4 }) : /* @__PURE__ */ jsx61(StnWidget.GradeRowList, { children: TOP5_ROWS.map((row) => /* @__PURE__ */ jsx61(
           StnWidget.GradeRow,
           {
             grade: row.grade,
@@ -8727,50 +8760,50 @@ function AlertCenterDashboard({ className, appearance = "translucent", loading =
           },
           row.label
         )) }) }),
-        /* @__PURE__ */ jsx58(StnWidget, { title: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx58(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsx58(StnWidget.ChartSlot, { label: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4 \uCC28\uD2B8" }) })
+        /* @__PURE__ */ jsx61(StnWidget, { title: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx61(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsx61(StnWidget.ChartSlot, { label: "\uC77C\uC77C \uC7A5\uC560 \uD1B5\uACC4 \uCC28\uD2B8" }) })
       ]
     }
   );
 }
 
 // src/patterns/dashboard/PubDashboardWidgetBodies.tsx
-import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs50 } from "react/jsx-runtime";
 function PubDisabilityStatusList({ items, summary }) {
-  return /* @__PURE__ */ jsxs47("div", { className: "ds-disability-status", children: [
-    /* @__PURE__ */ jsx59("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs50("div", { className: "ds-disability-status", children: [
+    /* @__PURE__ */ jsx62("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs50(
       "li",
       {
         className: ["ds-disability-status__item", item.grade].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsxs47("span", { children: [
-            item.showDot !== false && item.grade ? /* @__PURE__ */ jsx59("span", { className: "dot", "aria-hidden": true }) : null,
+          /* @__PURE__ */ jsxs50("span", { children: [
+            item.showDot !== false && item.grade ? /* @__PURE__ */ jsx62("span", { className: "dot", "aria-hidden": true }) : null,
             item.label
           ] }),
-          /* @__PURE__ */ jsx59("p", { children: item.value })
+          /* @__PURE__ */ jsx62("p", { children: item.value })
         ]
       },
       i
     )) }),
-    summary && summary.length > 0 ? /* @__PURE__ */ jsx59("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs47("p", { className: "ds-disability-status__value", children: [
+    summary && summary.length > 0 ? /* @__PURE__ */ jsx62("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs50("p", { className: "ds-disability-status__value", children: [
       row.label,
-      /* @__PURE__ */ jsx59("span", { children: row.value })
+      /* @__PURE__ */ jsx62("span", { children: row.value })
     ] }, i)) }) : null
   ] });
 }
 function PubTrafficTop5Bars({ rows }) {
   const maxPercent = Math.max(...rows.map((row) => row.percent), 0);
-  return /* @__PURE__ */ jsx59("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsxs47("div", { className: ["ds-bar", row.percent === maxPercent ? "max" : ""].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx59("p", { className: "ds-bar-name", title: row.label, children: row.label }),
-    /* @__PURE__ */ jsx59("div", { className: "ds-bar-con", title: `${row.percent}%`, children: /* @__PURE__ */ jsx59("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }) }),
-    /* @__PURE__ */ jsx59("p", { className: "ds-bar-value", title: row.value, children: row.value })
+  return /* @__PURE__ */ jsx62("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsxs50("div", { className: ["ds-bar", row.percent === maxPercent ? "max" : ""].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx62("p", { className: "ds-bar-name", title: row.label, children: row.label }),
+    /* @__PURE__ */ jsx62("div", { className: "ds-bar-con", title: `${row.percent}%`, children: /* @__PURE__ */ jsx62("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }) }),
+    /* @__PURE__ */ jsx62("p", { className: "ds-bar-value", title: row.value, children: row.value })
   ] }, row.label)) });
 }
 function PubTop5EquipmentBars({ rows }) {
-  return /* @__PURE__ */ jsxs47("div", { className: "ds-group", children: [
-    /* @__PURE__ */ jsx59("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx59("div", { className: "ds-equipment-ico", children: /* @__PURE__ */ jsx59("span", { className: "blind", children: "\uC7A5\uBE44 \uC774\uBBF8\uC9C0" }) }) }),
-    /* @__PURE__ */ jsx59("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx59("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsx59("div", { className: "ds-bar type-2", children: /* @__PURE__ */ jsxs47("div", { className: "ds-bar-con", title: `${row.percent}%`, children: [
-      /* @__PURE__ */ jsx59("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }),
-      /* @__PURE__ */ jsx59("div", { className: "ds-bar-status", children: row.status })
+  return /* @__PURE__ */ jsxs50("div", { className: "ds-group", children: [
+    /* @__PURE__ */ jsx62("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx62("div", { className: "ds-equipment-ico", children: /* @__PURE__ */ jsx62("span", { className: "blind", children: "\uC7A5\uBE44 \uC774\uBBF8\uC9C0" }) }) }),
+    /* @__PURE__ */ jsx62("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx62("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsx62("div", { className: "ds-bar type-2", children: /* @__PURE__ */ jsxs50("div", { className: "ds-bar-con", title: `${row.percent}%`, children: [
+      /* @__PURE__ */ jsx62("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }),
+      /* @__PURE__ */ jsx62("div", { className: "ds-bar-status", children: row.status })
     ] }) }, row.label)) }) })
   ] });
 }
@@ -8779,7 +8812,7 @@ function PubChartSample({
   alt = "\uCC28\uD2B8",
   onError
 }) {
-  return /* @__PURE__ */ jsx59("div", { className: "ds-chart", children: /* @__PURE__ */ jsx59("img", { src, alt, className: "chart_sample", onError }) });
+  return /* @__PURE__ */ jsx62("div", { className: "ds-chart", children: /* @__PURE__ */ jsx62("img", { src, alt, className: "chart_sample", onError }) });
 }
 
 // src/patterns/alertCenter/StnAlertCenterPanel.tsx
@@ -8787,7 +8820,7 @@ import { useState as useState16 } from "react";
 import {
   STN_ALERT_CENTER_TABS
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
-import { jsx as jsx60, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs51 } from "react/jsx-runtime";
 function resolveAlertIcon(item) {
   if (item.icon) {
     if (item.icon === "line/arrow-down") return "line/arrow-narrow-down";
@@ -8814,7 +8847,7 @@ function StnAlertCard({
 }) {
   const iconNode = resolveAlertIcon(item);
   const gradeLabel = resolveGradeLabel(item.grade);
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx63(
     StnCard,
     {
       variant: "elevated",
@@ -8823,8 +8856,8 @@ function StnAlertCard({
       interactive: true,
       className: cn("stn-alert-card", className),
       onClick,
-      children: /* @__PURE__ */ jsxs48("div", { className: "stn-alert-card__row", children: [
-        /* @__PURE__ */ jsx60(
+      children: /* @__PURE__ */ jsxs51("div", { className: "stn-alert-card__row", children: [
+        /* @__PURE__ */ jsx63(
           StnIcon,
           {
             name: iconNode,
@@ -8833,9 +8866,9 @@ function StnAlertCard({
             className: "stn-alert-card__icon"
           }
         ),
-        /* @__PURE__ */ jsxs48("div", { className: "stn-alert-card__body", children: [
-          /* @__PURE__ */ jsxs48(StnStack, { direction: "row", alignItems: "center", spacing: 1, className: "stn-alert-card__header-line", children: [
-            /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsxs51("div", { className: "stn-alert-card__body", children: [
+          /* @__PURE__ */ jsxs51(StnStack, { direction: "row", alignItems: "center", spacing: 1, className: "stn-alert-card__header-line", children: [
+            /* @__PURE__ */ jsx63(
               StnChip,
               {
                 shape: "pill",
@@ -8845,25 +8878,25 @@ function StnAlertCard({
                 children: gradeLabel
               }
             ),
-            /* @__PURE__ */ jsx60(
+            /* @__PURE__ */ jsx63(
               "span",
               {
                 className: cn("stn-alert-card__title", titleOverflow),
                 title: item.title,
-                children: /* @__PURE__ */ jsx60("span", { className: "stn-alert-card__text-inner", children: item.title })
+                children: /* @__PURE__ */ jsx63("span", { className: "stn-alert-card__text-inner", children: item.title })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs48(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", className: "stn-alert-card__desc-line", children: [
-            /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsxs51(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", className: "stn-alert-card__desc-line", children: [
+            /* @__PURE__ */ jsx63(
               "span",
               {
                 className: cn("stn-alert-card__desc", descOverflow),
                 title: item.description,
-                children: /* @__PURE__ */ jsx60("span", { className: "stn-alert-card__text-inner", children: item.description })
+                children: /* @__PURE__ */ jsx63("span", { className: "stn-alert-card__text-inner", children: item.description })
               }
             ),
-            item.occurredAt && /* @__PURE__ */ jsxs48(
+            item.occurredAt && /* @__PURE__ */ jsxs51(
               StnChip,
               {
                 shape: "pill",
@@ -8879,9 +8912,9 @@ function StnAlertCard({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs48("div", { className: "stn-alert-card__meta", children: [
-          /* @__PURE__ */ jsx60("span", { className: "stn-alert-card__time", children: item.time }),
-          item.unread !== false && /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsxs51("div", { className: "stn-alert-card__meta", children: [
+          /* @__PURE__ */ jsx63("span", { className: "stn-alert-card__time", children: item.time }),
+          item.unread !== false && /* @__PURE__ */ jsx63(
             "span",
             {
               className: cn(
@@ -8919,7 +8952,7 @@ function StnAlertCenterPanel({
   const alertCount = alerts.length;
   const resolvedTitleOverflow = titleOverflow ?? textOverflow;
   const resolvedDescOverflow = descOverflow ?? textOverflow;
-  return /* @__PURE__ */ jsxs48(
+  return /* @__PURE__ */ jsxs51(
     "div",
     {
       className: cn(
@@ -8931,13 +8964,13 @@ function StnAlertCenterPanel({
       ),
       "data-stn-alert-center": true,
       children: [
-        /* @__PURE__ */ jsxs48("div", { className: "stn-alert-center__header", children: [
-          /* @__PURE__ */ jsxs48("div", { className: "stn-alert-center__header-left", children: [
-            /* @__PURE__ */ jsx60(StnIcon, { name: "line/bell", size: 20, color: "var(--stn-primary)" }),
-            /* @__PURE__ */ jsx60("span", { className: "stn-alert-center__title", children: title }),
-            alertCount > 0 && /* @__PURE__ */ jsx60(StnChip, { shape: "pill", size: "sm", variant: "subtle", color: "primary", children: alertCount })
+        /* @__PURE__ */ jsxs51("div", { className: "stn-alert-center__header", children: [
+          /* @__PURE__ */ jsxs51("div", { className: "stn-alert-center__header-left", children: [
+            /* @__PURE__ */ jsx63(StnIcon, { name: "line/bell", size: 20, color: "var(--stn-primary)" }),
+            /* @__PURE__ */ jsx63("span", { className: "stn-alert-center__title", children: title }),
+            alertCount > 0 && /* @__PURE__ */ jsx63(StnChip, { shape: "pill", size: "sm", variant: "subtle", color: "primary", children: alertCount })
           ] }),
-          /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx63(
             StnSegmented,
             {
               size: "md",
@@ -8950,8 +8983,8 @@ function StnAlertCenterPanel({
               }))
             }
           ),
-          /* @__PURE__ */ jsxs48("div", { className: "stn-alert-center__header-right", children: [
-            /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsxs51("div", { className: "stn-alert-center__header-right", children: [
+            /* @__PURE__ */ jsx63(
               StnButton,
               {
                 variant: "text",
@@ -8961,8 +8994,8 @@ function StnAlertCenterPanel({
                 children: "\uBAA8\uB450 \uC77D\uC74C"
               }
             ),
-            /* @__PURE__ */ jsx60("div", { className: "stn-alert-center__divider", "aria-hidden": true }),
-            /* @__PURE__ */ jsx60(
+            /* @__PURE__ */ jsx63("div", { className: "stn-alert-center__divider", "aria-hidden": true }),
+            /* @__PURE__ */ jsx63(
               StnButton,
               {
                 icon: "line/x",
@@ -8974,14 +9007,14 @@ function StnAlertCenterPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs48(
+        /* @__PURE__ */ jsxs51(
           StnScroll,
           {
             orientation: "vertical",
             size: "thin",
             className: "stn-alert-center__list-wrap",
             children: [
-              activeTab === "error" && /* @__PURE__ */ jsx60("ul", { className: "stn-alert-center__list", children: alerts.map((item) => /* @__PURE__ */ jsx60("li", { children: /* @__PURE__ */ jsx60(
+              activeTab === "error" && /* @__PURE__ */ jsx63("ul", { className: "stn-alert-center__list", children: alerts.map((item) => /* @__PURE__ */ jsx63("li", { children: /* @__PURE__ */ jsx63(
                 StnAlertCard,
                 {
                   item,
@@ -8990,35 +9023,35 @@ function StnAlertCenterPanel({
                   onClick: () => onItemClick?.(item)
                 }
               ) }, item.id ?? item.title)) }),
-              activeTab === "work" && /* @__PURE__ */ jsx60("ul", { className: "stn-alert-center__list", children: workItems.map((row) => /* @__PURE__ */ jsx60("li", { children: /* @__PURE__ */ jsx60(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs48("div", { className: "stn-alert-card__row", children: [
-                /* @__PURE__ */ jsx60(StnIcon, { name: "line/clock", size: 24, color: "var(--stn-text-secondary)", className: "stn-alert-card__icon" }),
-                /* @__PURE__ */ jsxs48("div", { className: "stn-alert-card__body", children: [
-                  /* @__PURE__ */ jsx60("span", { className: "stn-alert-card__type-label work", children: row.typeLabel }),
-                  /* @__PURE__ */ jsx60("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx60("span", { className: "stn-alert-card__text-inner", children: row.text }) })
+              activeTab === "work" && /* @__PURE__ */ jsx63("ul", { className: "stn-alert-center__list", children: workItems.map((row) => /* @__PURE__ */ jsx63("li", { children: /* @__PURE__ */ jsx63(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs51("div", { className: "stn-alert-card__row", children: [
+                /* @__PURE__ */ jsx63(StnIcon, { name: "line/clock", size: 24, color: "var(--stn-text-secondary)", className: "stn-alert-card__icon" }),
+                /* @__PURE__ */ jsxs51("div", { className: "stn-alert-card__body", children: [
+                  /* @__PURE__ */ jsx63("span", { className: "stn-alert-card__type-label work", children: row.typeLabel }),
+                  /* @__PURE__ */ jsx63("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx63("span", { className: "stn-alert-card__text-inner", children: row.text }) })
                 ] }),
-                /* @__PURE__ */ jsx60("span", { className: "stn-alert-card__time", children: row.time })
+                /* @__PURE__ */ jsx63("span", { className: "stn-alert-card__time", children: row.time })
               ] }) }) }, row.id ?? row.text)) }),
-              activeTab === "deploy" && /* @__PURE__ */ jsx60("ul", { className: "stn-alert-center__list", children: deployItems.map((row) => /* @__PURE__ */ jsx60("li", { children: /* @__PURE__ */ jsx60(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs48("div", { className: "stn-alert-card__row", children: [
-                /* @__PURE__ */ jsx60(StnIcon, { name: "line/settings", size: 24, color: "var(--stn-secondary)", className: "stn-alert-card__icon" }),
-                /* @__PURE__ */ jsxs48("div", { className: "stn-alert-card__body", children: [
-                  /* @__PURE__ */ jsx60("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--deploy", children: row.typeLabel }),
-                  /* @__PURE__ */ jsx60("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx60("span", { className: "stn-alert-card__text-inner", children: row.text }) })
+              activeTab === "deploy" && /* @__PURE__ */ jsx63("ul", { className: "stn-alert-center__list", children: deployItems.map((row) => /* @__PURE__ */ jsx63("li", { children: /* @__PURE__ */ jsx63(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs51("div", { className: "stn-alert-card__row", children: [
+                /* @__PURE__ */ jsx63(StnIcon, { name: "line/settings", size: 24, color: "var(--stn-secondary)", className: "stn-alert-card__icon" }),
+                /* @__PURE__ */ jsxs51("div", { className: "stn-alert-card__body", children: [
+                  /* @__PURE__ */ jsx63("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--deploy", children: row.typeLabel }),
+                  /* @__PURE__ */ jsx63("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx63("span", { className: "stn-alert-card__text-inner", children: row.text }) })
                 ] }),
-                /* @__PURE__ */ jsx60("span", { className: "stn-alert-card__time", children: row.time })
+                /* @__PURE__ */ jsx63("span", { className: "stn-alert-card__time", children: row.time })
               ] }) }) }, row.id ?? row.text)) })
             ]
           }
         ),
-        /* @__PURE__ */ jsx60("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs48(
+        /* @__PURE__ */ jsx63("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs51(
           "button",
           {
             type: "button",
             className: "stn-alert-center__footer-link",
             onClick: onManageSettings,
             children: [
-              /* @__PURE__ */ jsx60("span", { children: "\uC54C\uB9BC \uC124\uC815 \uAD00\uB9AC" }),
-              /* @__PURE__ */ jsx60(StnIcon, { name: "line/settings", size: 14 }),
-              /* @__PURE__ */ jsx60(StnIcon, { name: "line/chevron-right", size: 14 })
+              /* @__PURE__ */ jsx63("span", { children: "\uC54C\uB9BC \uC124\uC815 \uAD00\uB9AC" }),
+              /* @__PURE__ */ jsx63(StnIcon, { name: "line/settings", size: 14 }),
+              /* @__PURE__ */ jsx63(StnIcon, { name: "line/chevron-right", size: 14 })
             ]
           }
         ) })
@@ -9028,7 +9061,7 @@ function StnAlertCenterPanel({
 }
 
 // src/patterns/alertCenter/StnAlertCenterDocPreview.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function StnAlertCenterDocPreview({
   mode = "light",
   theme,
@@ -9036,11 +9069,11 @@ function StnAlertCenterDocPreview({
   children,
   ...panelProps
 }) {
-  const panel = children ?? /* @__PURE__ */ jsx61(StnAlertCenterPanel, { ...panelProps });
+  const panel = children ?? /* @__PURE__ */ jsx64(StnAlertCenterPanel, { ...panelProps });
   if (!withDocChrome) {
-    return /* @__PURE__ */ jsx61(StnProvider, { mode, theme, applyModeToDocument: false, children: panel });
+    return /* @__PURE__ */ jsx64(StnProvider, { mode, theme, applyModeToDocument: false, children: panel });
   }
-  return /* @__PURE__ */ jsx61("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ jsx61("div", { className: "stn-alert-center-preview-shell", children: panel }) });
+  return /* @__PURE__ */ jsx64("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ jsx64("div", { className: "stn-alert-center-preview-shell", children: panel }) });
 }
 
 // src/index.ts
@@ -9067,7 +9100,7 @@ var useSideNav = () => useContext5(SideNavContext);
 // src/components/sideNav/StnSideNavItem.tsx
 import { forwardRef as forwardRef33 } from "react";
 import { STN_NAV_MENU_SUB_ICON } from "@stn-uiux/pub-ui/data/stnSideNavItem";
-import { jsx as jsx62, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs52 } from "react/jsx-runtime";
 function maskStyle2(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
@@ -9114,13 +9147,13 @@ var StnSideNavItem = forwardRef33(function StnSideNavItem2({
       sideNav.onSelect(id);
     }
   };
-  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ jsxs49("span", { className: "stn-side-nav-item__icon-wrap", children: [
-    /* @__PURE__ */ jsx62("span", { className: "stn-side-nav-item__icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx62("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }),
-    showDot ? /* @__PURE__ */ jsx62("span", { className: "stn-side-nav-item__dot-wrap", "aria-hidden": "true", children: /* @__PURE__ */ jsx62(StnBadge, { variant: "dot", color: "error" }) }) : null
+  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ jsxs52("span", { className: "stn-side-nav-item__icon-wrap", children: [
+    /* @__PURE__ */ jsx65("span", { className: "stn-side-nav-item__icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx65("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }),
+    showDot ? /* @__PURE__ */ jsx65("span", { className: "stn-side-nav-item__dot-wrap", "aria-hidden": "true", children: /* @__PURE__ */ jsx65(StnBadge, { variant: "dot", color: "error" }) }) : null
   ] }) : null;
-  const subIconElement = hasIcon && isSub ? /* @__PURE__ */ jsx62("span", { className: "stn-side-nav-item__sub-icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx62("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }) : null;
+  const subIconElement = hasIcon && isSub ? /* @__PURE__ */ jsx65("span", { className: "stn-side-nav-item__sub-icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx65("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }) : null;
   const activeIconElement = isSub ? subIconElement : iconElement;
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx65(
     "button",
     {
       ref,
@@ -9139,10 +9172,10 @@ var StnSideNavItem = forwardRef33(function StnSideNavItem2({
       title: collapsed ? label : void 0,
       onClick: handleClick,
       ...rest,
-      children: /* @__PURE__ */ jsxs49("span", { className: cn("stn-side-nav-item__inner", spreadTrail && "spread"), children: [
-        /* @__PURE__ */ jsxs49("span", { className: "stn-side-nav-item__lead", children: [
-          isSub && showSubIndent ? /* @__PURE__ */ jsx62("span", { className: "stn-side-nav-item__sub-indent", "aria-hidden": "true" }) : null,
-          shouldShowSubDot ? /* @__PURE__ */ jsx62(
+      children: /* @__PURE__ */ jsxs52("span", { className: cn("stn-side-nav-item__inner", spreadTrail && "spread"), children: [
+        /* @__PURE__ */ jsxs52("span", { className: "stn-side-nav-item__lead", children: [
+          isSub && showSubIndent ? /* @__PURE__ */ jsx65("span", { className: "stn-side-nav-item__sub-indent", "aria-hidden": "true" }) : null,
+          shouldShowSubDot ? /* @__PURE__ */ jsx65(
             "span",
             {
               className: cn(
@@ -9150,14 +9183,14 @@ var StnSideNavItem = forwardRef33(function StnSideNavItem2({
                 hasIcon && iconPosition === "left" && "compact"
               ),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx62("span", { className: "stn-side-nav-item__sub-dot-glyph", style: maskStyle2(STN_NAV_MENU_SUB_ICON) })
+              children: /* @__PURE__ */ jsx65("span", { className: "stn-side-nav-item__sub-dot-glyph", style: maskStyle2(STN_NAV_MENU_SUB_ICON) })
             }
           ) : null,
           iconPosition === "left" ? activeIconElement : null,
-          /* @__PURE__ */ jsx62("span", { className: "stn-side-nav-item__label", children: label })
+          /* @__PURE__ */ jsx65("span", { className: "stn-side-nav-item__label", children: label })
         ] }),
         iconPosition === "right" ? activeIconElement : null,
-        renderBadge ? typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx62(
+        renderBadge ? typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx65(
           StnBadge,
           {
             badgeContent: badge,
@@ -9165,7 +9198,7 @@ var StnSideNavItem = forwardRef33(function StnSideNavItem2({
             appearance: "subtle",
             className: "stn-side-nav-item__badge"
           }
-        ) : badge ? /* @__PURE__ */ jsx62("span", { className: "stn-side-nav-item__badge", children: badge }) : showBadgeDot ? /* @__PURE__ */ jsx62(
+        ) : badge ? /* @__PURE__ */ jsx65("span", { className: "stn-side-nav-item__badge", children: badge }) : showBadgeDot ? /* @__PURE__ */ jsx65(
           StnBadge,
           {
             variant: "dot",
@@ -9173,7 +9206,7 @@ var StnSideNavItem = forwardRef33(function StnSideNavItem2({
             className: "stn-side-nav-item__badge"
           }
         ) : null : null,
-        !isSub && showChevron && !collapsed ? /* @__PURE__ */ jsx62(
+        !isSub && showChevron && !collapsed ? /* @__PURE__ */ jsx65(
           "span",
           {
             className: cn(
@@ -9194,11 +9227,11 @@ import { forwardRef as forwardRef35 } from "react";
 
 // src/components/sideNav/StnSideNavLogo.tsx
 import { forwardRef as forwardRef34 } from "react";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var StnSideNavLogo = forwardRef34(
   function StnSideNavLogo2({ className, logoProps, ...rest }, ref) {
     const { collapsed } = useSideNav();
-    return /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsx66(
       "div",
       {
         ref,
@@ -9209,7 +9242,7 @@ var StnSideNavLogo = forwardRef34(
         ),
         title: "InfoMap",
         ...rest,
-        children: /* @__PURE__ */ jsx63(
+        children: /* @__PURE__ */ jsx66(
           StnLogo,
           {
             variant: collapsed ? "onlyimg" : "horizontal",
@@ -9223,7 +9256,7 @@ var StnSideNavLogo = forwardRef34(
 );
 
 // src/components/sideNav/StnSideNavHeader.tsx
-import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx67, jsxs as jsxs53 } from "react/jsx-runtime";
 var StnSideNavHeader = forwardRef35(function StnSideNavHeader2({
   children,
   border = false,
@@ -9236,7 +9269,7 @@ var StnSideNavHeader = forwardRef35(function StnSideNavHeader2({
   const { collapsed, onToggleCollapse, isDrawer, setMobileOpen } = useSideNav();
   const withBorder = Boolean(border || hasBorder);
   const shouldShowClose = showClose ?? Boolean(isDrawer);
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx67(
     "div",
     {
       ref,
@@ -9247,9 +9280,9 @@ var StnSideNavHeader = forwardRef35(function StnSideNavHeader2({
         className
       ),
       ...rest,
-      children: children ?? /* @__PURE__ */ jsxs50(Fragment9, { children: [
-        /* @__PURE__ */ jsx64(StnSideNavLogo, {}),
-        shouldShowClose ? /* @__PURE__ */ jsx64(
+      children: children ?? /* @__PURE__ */ jsxs53(Fragment9, { children: [
+        /* @__PURE__ */ jsx67(StnSideNavLogo, {}),
+        shouldShowClose ? /* @__PURE__ */ jsx67(
           StnButton,
           {
             size: "sm",
@@ -9261,7 +9294,7 @@ var StnSideNavHeader = forwardRef35(function StnSideNavHeader2({
             className: "stn-side-nav__collapse-btn",
             onClick: () => setMobileOpen?.(false)
           }
-        ) : showToggle ? /* @__PURE__ */ jsx64(
+        ) : showToggle ? /* @__PURE__ */ jsx67(
           StnButton,
           {
             size: "sm",
@@ -9281,7 +9314,7 @@ var StnSideNavHeader = forwardRef35(function StnSideNavHeader2({
 
 // src/components/sideNav/StnSideNavMenu.tsx
 import { forwardRef as forwardRef36 } from "react";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var StnSideNavMenu = forwardRef36(function StnSideNavMenu2({
   children,
   className,
@@ -9289,7 +9322,7 @@ var StnSideNavMenu = forwardRef36(function StnSideNavMenu2({
   scrollColor = "fade",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx68(
     "nav",
     {
       ref,
@@ -9315,7 +9348,7 @@ import {
   useRef as useRef9,
   useState as useState17
 } from "react";
-import { jsx as jsx66, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
 var StnSideNavGroup = forwardRef37(function StnSideNavGroup2({
   label,
   parent,
@@ -9360,7 +9393,7 @@ var StnSideNavGroup = forwardRef37(function StnSideNavGroup2({
     }
     onOpenChange?.(next);
   };
-  const subnavNode = children && (!collapsed && isOpen) ? /* @__PURE__ */ jsx66(
+  const subnavNode = children && (!collapsed && isOpen) ? /* @__PURE__ */ jsx69(
     "div",
     {
       className: cn(
@@ -9375,7 +9408,7 @@ var StnSideNavGroup = forwardRef37(function StnSideNavGroup2({
       children
     }
   ) : null;
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs54(
     "div",
     {
       ref: (node) => {
@@ -9396,7 +9429,7 @@ var StnSideNavGroup = forwardRef37(function StnSideNavGroup2({
       "aria-label": typeof label === "string" ? label : void 0,
       ...rest,
       children: [
-        label && !collapsed ? /* @__PURE__ */ jsx66("span", { className: "stn-side-nav__group-label", onClick: handleToggle, children: label }) : null,
+        label && !collapsed ? /* @__PURE__ */ jsx69("span", { className: "stn-side-nav__group-label", onClick: handleToggle, children: label }) : null,
         isUp ? subnavNode : null,
         parent,
         !isUp ? subnavNode : null
@@ -9407,9 +9440,9 @@ var StnSideNavGroup = forwardRef37(function StnSideNavGroup2({
 
 // src/components/sideNav/StnSideNavSpacer.tsx
 import { forwardRef as forwardRef38 } from "react";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var StnSideNavSpacer = forwardRef38(function StnSideNavSpacer2({ className, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx70(
     "div",
     {
       ref,
@@ -9423,9 +9456,9 @@ var StnSideNavSpacer = forwardRef38(function StnSideNavSpacer2({ className, styl
 
 // src/components/sideNav/StnSideNavFooter.tsx
 import { forwardRef as forwardRef39 } from "react";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var StnSideNavFooter = forwardRef39(function StnSideNavFooter2({ curved = false, children, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx71(
     "nav",
     {
       ref,
@@ -9439,11 +9472,11 @@ var StnSideNavFooter = forwardRef39(function StnSideNavFooter2({ curved = false,
 
 // src/components/sideNav/StnSideNavToggle.tsx
 import { forwardRef as forwardRef40 } from "react";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var StnSideNavToggle = forwardRef40(
   function StnSideNavToggle2({ className, onClick, ...rest }, ref) {
     const { collapsed, onToggleCollapse } = useSideNav();
-    return /* @__PURE__ */ jsx69(
+    return /* @__PURE__ */ jsx72(
       "button",
       {
         ref,
@@ -9456,7 +9489,7 @@ var StnSideNavToggle = forwardRef40(
         "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__ */ jsx69(
+        children: /* @__PURE__ */ jsx72(
           "svg",
           {
             width: "12",
@@ -9467,7 +9500,7 @@ var StnSideNavToggle = forwardRef40(
             strokeWidth: "2.5",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsx69("path", { d: "M9 18l6-6-6-6" })
+            children: /* @__PURE__ */ jsx72("path", { d: "M9 18l6-6-6-6" })
           }
         )
       }
@@ -9477,17 +9510,17 @@ var StnSideNavToggle = forwardRef40(
 
 // src/components/sideNav/StnSideNavWatermark.tsx
 import { forwardRef as forwardRef41 } from "react";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var StnSideNavWatermark = forwardRef41(
   function StnSideNavWatermark2({ size = "xl", mode, theme, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx70(
+    return /* @__PURE__ */ jsx73(
       "div",
       {
         ref,
         className: cn("stn-side-nav__watermark", className),
         "aria-hidden": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx70(StnLogo, { variant: "watermark", size, mode: mode ?? theme })
+        children: /* @__PURE__ */ jsx73(StnLogo, { variant: "watermark", size, mode: mode ?? theme })
       }
     );
   }
@@ -9495,7 +9528,7 @@ var StnSideNavWatermark = forwardRef41(
 
 // src/components/sideNav/StnSideNavMobileTrigger.tsx
 import { forwardRef as forwardRef42, useEffect as useEffect14, useState as useState18 } from "react";
-import { jsx as jsx71, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs55 } from "react/jsx-runtime";
 var StnSideNavMobileTrigger = forwardRef42(
   function StnSideNavMobileTrigger2({ floating = false, className, children, onClick, ...rest }, ref) {
     const { onToggleMobileOpen, mobileOpen: contextMobileOpen } = useSideNav();
@@ -9514,7 +9547,7 @@ var StnSideNavMobileTrigger = forwardRef42(
       };
     }, [onToggleMobileOpen]);
     const isMobileOpen = onToggleMobileOpen ? contextMobileOpen : fallbackMobileOpen;
-    return /* @__PURE__ */ jsx71(
+    return /* @__PURE__ */ jsx74(
       "button",
       {
         ref,
@@ -9536,10 +9569,10 @@ var StnSideNavMobileTrigger = forwardRef42(
           }
         },
         ...rest,
-        children: children ?? /* @__PURE__ */ jsxs52("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx71("span", {}),
-          /* @__PURE__ */ jsx71("span", {}),
-          /* @__PURE__ */ jsx71("span", {})
+        children: children ?? /* @__PURE__ */ jsxs55("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx74("span", {}),
+          /* @__PURE__ */ jsx74("span", {}),
+          /* @__PURE__ */ jsx74("span", {})
         ] })
       }
     );
@@ -9550,10 +9583,10 @@ var StnSideNavMobileTrigger = forwardRef42(
 import {
   forwardRef as forwardRef43
 } from "react";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var StnSideNavSub = forwardRef43(
   function StnSideNavSub2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx72(
+    return /* @__PURE__ */ jsx75(
       "div",
       {
         ref,
@@ -9582,14 +9615,14 @@ var StnSideNavSubItem = forwardRef43(
     const { collapsed } = useSideNav();
     const content = children ?? label;
     const computedTitle = title ?? (typeof content === "string" ? content : void 0);
-    const resolvedIcon = icon ?? (iconSrc ? /* @__PURE__ */ jsx72("span", { className: "stn-side-nav__sub-icon", children: /* @__PURE__ */ jsx72(
+    const resolvedIcon = icon ?? (iconSrc ? /* @__PURE__ */ jsx75("span", { className: "stn-side-nav__sub-icon", children: /* @__PURE__ */ jsx75(
       "span",
       {
         className: "stn-side-nav__sub-glyph",
         style: { maskImage: `url('${iconSrc}')`, WebkitMaskImage: `url('${iconSrc}')` }
       }
     ) }) : null);
-    return /* @__PURE__ */ jsx72(
+    return /* @__PURE__ */ jsx75(
       StnButton,
       {
         ref,
@@ -9609,7 +9642,7 @@ var StnSideNavSubItem = forwardRef43(
 
 // src/components/sideNav/StnSideNavSubNav.tsx
 import { forwardRef as forwardRef44 } from "react";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var StnSideNavSubNav = forwardRef44(
   function StnSideNavSubNav2({
     dropdown = false,
@@ -9622,7 +9655,7 @@ var StnSideNavSubNav = forwardRef44(
   }, ref) {
     const isUp = direction === "up";
     const isTransparent = variant === "transparent" || background === false;
-    return /* @__PURE__ */ jsx73(
+    return /* @__PURE__ */ jsx76(
       "div",
       {
         ref,
@@ -9651,7 +9684,7 @@ import {
   useMemo as useMemo5,
   useState as useState19
 } from "react";
-import { jsx as jsx74, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs56 } from "react/jsx-runtime";
 function useControllableState(controlledValue, defaultValue, onChange) {
   const [internalState, setInternalState] = useState19(defaultValue);
   const isControlled = controlledValue !== void 0;
@@ -9744,9 +9777,9 @@ var StnSideNavigationRoot = forwardRef45(function StnSideNavigationRoot2({
     }),
     [isEffectiveCollapsed, activeId, setActiveId, handleToggleCollapse, mobileOpen, handleToggleMobileOpen, setMobileOpen, isDrawerMode]
   );
-  return /* @__PURE__ */ jsxs53(SideNavContext.Provider, { value: contextValue, children: [
-    showMobileTrigger && /* @__PURE__ */ jsx74(StnSideNavMobileTrigger, { floating: true }),
-    (drawer || responsiveDrawer) && /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsxs56(SideNavContext.Provider, { value: contextValue, children: [
+    showMobileTrigger && /* @__PURE__ */ jsx77(StnSideNavMobileTrigger, { floating: true }),
+    (drawer || responsiveDrawer) && /* @__PURE__ */ jsx77(
       "div",
       {
         className: cn("stn-side-nav__backdrop", mobileOpen && "is-open"),
@@ -9754,7 +9787,7 @@ var StnSideNavigationRoot = forwardRef45(function StnSideNavigationRoot2({
         "aria-hidden": !mobileOpen
       }
     ),
-    /* @__PURE__ */ jsx74(
+    /* @__PURE__ */ jsx77(
       "aside",
       {
         ref,
@@ -9803,7 +9836,7 @@ import {
 import {
   STN_BREADCRUMB_ICON_SRC
 } from "@stn-uiux/pub-ui/data/stnBreadcrumb";
-import { Fragment as Fragment11, jsx as jsx75, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx78, jsxs as jsxs57 } from "react/jsx-runtime";
 function maskStyle3(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
@@ -9816,13 +9849,13 @@ function hasSegmentMenu(item) {
   return Boolean(item.menu || item.menuItems && item.menuItems.length > 0);
 }
 function BreadcrumbSeparator() {
-  return /* @__PURE__ */ jsx75("li", { className: "separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx75("span", { style: maskStyle3(STN_BREADCRUMB_ICON_SRC.separator) }) });
+  return /* @__PURE__ */ jsx78("li", { className: "separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx78("span", { style: maskStyle3(STN_BREADCRUMB_ICON_SRC.separator) }) });
 }
 function BreadcrumbIcon({ src }) {
-  return /* @__PURE__ */ jsx75("span", { className: "stn-breadcrumb__icon-glyph", style: maskStyle3(src), "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx78("span", { className: "stn-breadcrumb__icon-glyph", style: maskStyle3(src), "aria-hidden": "true" });
 }
 function BreadcrumbCaret() {
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx78(
     "span",
     {
       className: "stn-breadcrumb__caret",
@@ -9836,10 +9869,10 @@ function SegmentContent({
   label,
   menu
 }) {
-  return /* @__PURE__ */ jsxs54(Fragment11, { children: [
-    iconSrc ? /* @__PURE__ */ jsx75(BreadcrumbIcon, { src: iconSrc }) : null,
-    /* @__PURE__ */ jsx75("span", { className: "stn-breadcrumb__label", children: label }),
-    menu ? /* @__PURE__ */ jsx75(BreadcrumbCaret, {}) : null
+  return /* @__PURE__ */ jsxs57(Fragment11, { children: [
+    iconSrc ? /* @__PURE__ */ jsx78(BreadcrumbIcon, { src: iconSrc }) : null,
+    /* @__PURE__ */ jsx78("span", { className: "stn-breadcrumb__label", children: label }),
+    menu ? /* @__PURE__ */ jsx78(BreadcrumbCaret, {}) : null
   ] });
 }
 function BreadcrumbMenuList({
@@ -9847,7 +9880,7 @@ function BreadcrumbMenuList({
   items,
   onPick
 }) {
-  return /* @__PURE__ */ jsx75("ul", { id, className: "stn-breadcrumb__menu", role: "menu", children: items.map((option) => /* @__PURE__ */ jsx75("li", { role: "none", children: option.href ? /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx78("ul", { id, className: "stn-breadcrumb__menu", role: "menu", children: items.map((option) => /* @__PURE__ */ jsx78("li", { role: "none", children: option.href ? /* @__PURE__ */ jsx78(
     "a",
     {
       role: "menuitem",
@@ -9859,7 +9892,7 @@ function BreadcrumbMenuList({
       },
       children: option.label
     }
-  ) : /* @__PURE__ */ jsx75(
+  ) : /* @__PURE__ */ jsx78(
     "button",
     {
       type: "button",
@@ -9903,13 +9936,13 @@ function BreadcrumbSegment({
   const canOpenMenu = showMenu && menuItems.length > 0;
   const rootRef = useDismissibleMenu(open, () => setOpen(false));
   const iconSrc = resolveIconSrc(item);
-  const content = /* @__PURE__ */ jsx75(SegmentContent, { iconSrc, label: item.label, menu: showMenu });
+  const content = /* @__PURE__ */ jsx78(SegmentContent, { iconSrc, label: item.label, menu: showMenu });
   if (isCurrent) {
-    return /* @__PURE__ */ jsx75("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
+    return /* @__PURE__ */ jsx78("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
   }
   if (canOpenMenu) {
-    return /* @__PURE__ */ jsxs54("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
-      /* @__PURE__ */ jsx75(
+    return /* @__PURE__ */ jsxs57("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
+      /* @__PURE__ */ jsx78(
         "button",
         {
           type: "button",
@@ -9925,7 +9958,7 @@ function BreadcrumbSegment({
           children: content
         }
       ),
-      open ? /* @__PURE__ */ jsx75(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
+      open ? /* @__PURE__ */ jsx78(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
     ] });
   }
   if (item.menu || item.onClick) {
@@ -9937,7 +9970,7 @@ function BreadcrumbSegment({
       "aria-haspopup": item.menu ? "menu" : void 0,
       "aria-expanded": item.menu ? false : void 0
     };
-    return /* @__PURE__ */ jsx75("button", { ...buttonProps, children: content });
+    return /* @__PURE__ */ jsx78("button", { ...buttonProps, children: content });
   }
   if (item.href) {
     const linkProps = {
@@ -9946,17 +9979,17 @@ function BreadcrumbSegment({
       onClick: item.onClick,
       "aria-label": item.label
     };
-    return /* @__PURE__ */ jsx75("a", { ...linkProps, children: content });
+    return /* @__PURE__ */ jsx78("a", { ...linkProps, children: content });
   }
-  return /* @__PURE__ */ jsx75("span", { className: "stn-breadcrumb__segment", "aria-label": item.label, children: content });
+  return /* @__PURE__ */ jsx78("span", { className: "stn-breadcrumb__segment", "aria-label": item.label, children: content });
 }
 function BreadcrumbBack({
   label,
   href,
   onClick
 }) {
-  const content = /* @__PURE__ */ jsxs54(Fragment11, { children: [
-    /* @__PURE__ */ jsx75(
+  const content = /* @__PURE__ */ jsxs57(Fragment11, { children: [
+    /* @__PURE__ */ jsx78(
       "span",
       {
         className: "stn-breadcrumb__back-glyph",
@@ -9964,12 +9997,12 @@ function BreadcrumbBack({
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx75("span", { className: "stn-breadcrumb__label", children: label })
+    /* @__PURE__ */ jsx78("span", { className: "stn-breadcrumb__label", children: label })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx75("a", { className: "stn-breadcrumb__back", href, onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
+    return /* @__PURE__ */ jsx78("a", { className: "stn-breadcrumb__back", href, onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
   }
-  return /* @__PURE__ */ jsx75("button", { type: "button", className: "stn-breadcrumb__back", onClick, "aria-label": `\uB4A4\uB85C: ${label}`, children: content });
+  return /* @__PURE__ */ jsx78("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) {
@@ -10000,8 +10033,8 @@ function BreadcrumbCollapsed({
     onClick: item.onClick,
     current: item.current
   }));
-  return /* @__PURE__ */ jsxs54("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
-    /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsxs57("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
+    /* @__PURE__ */ jsx78(
       "button",
       {
         type: "button",
@@ -10014,7 +10047,7 @@ function BreadcrumbCollapsed({
         children: "\u22EF"
       }
     ),
-    open ? /* @__PURE__ */ jsx75(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
+    open ? /* @__PURE__ */ jsx78(BreadcrumbMenuList, { id: menuId, items: menuItems, onPick: () => setOpen(false) }) : null
   ] });
 }
 function StnBreadcrumb({
@@ -10046,8 +10079,8 @@ function StnBreadcrumb({
   const lastId = items[items.length - 1]?.id;
   const renderTrailItem = (item) => {
     const isCurrent = Boolean(item.current) || item.id === lastId;
-    const segment = /* @__PURE__ */ jsx75(BreadcrumbSegment, { item, isCurrent });
-    return /* @__PURE__ */ jsx75(
+    const segment = /* @__PURE__ */ jsx78(BreadcrumbSegment, { item, isCurrent });
+    return /* @__PURE__ */ jsx78(
       "li",
       {
         className: cn(
@@ -10058,27 +10091,27 @@ function StnBreadcrumb({
       }
     );
   };
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx78(
     "nav",
     {
       className: cn("stn-breadcrumb", size, variant === "chip" && "chip", className),
       "aria-label": "Breadcrumb",
-      children: /* @__PURE__ */ jsxs54("ol", { className: "stn-breadcrumb__list", children: [
-        currentItem ? /* @__PURE__ */ jsx75("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--back", children: /* @__PURE__ */ jsx75(BreadcrumbBack, { label: currentItem.label, href: backHref, onClick: backOnClick }) }) : null,
-        showHome ? /* @__PURE__ */ jsx75("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs54("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
-          /* @__PURE__ */ jsx75(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
-          /* @__PURE__ */ jsx75("span", { className: "blind", children: homeLabel })
+      children: /* @__PURE__ */ jsxs57("ol", { className: "stn-breadcrumb__list", children: [
+        currentItem ? /* @__PURE__ */ jsx78("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--back", children: /* @__PURE__ */ jsx78(BreadcrumbBack, { label: currentItem.label, href: backHref, onClick: backOnClick }) }) : null,
+        showHome ? /* @__PURE__ */ jsx78("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs57("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
+          /* @__PURE__ */ jsx78(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
+          /* @__PURE__ */ jsx78("span", { className: "blind", children: homeLabel })
         ] }) }) : null,
-        head.map((item, index) => /* @__PURE__ */ jsxs54(Fragment10, { children: [
-          showHome || index > 0 ? /* @__PURE__ */ jsx75(BreadcrumbSeparator, {}) : null,
+        head.map((item, index) => /* @__PURE__ */ jsxs57(Fragment10, { children: [
+          showHome || index > 0 ? /* @__PURE__ */ jsx78(BreadcrumbSeparator, {}) : null,
           renderTrailItem(item)
         ] }, item.id)),
-        hidden.length > 0 ? /* @__PURE__ */ jsxs54(Fragment11, { children: [
-          /* @__PURE__ */ jsx75(BreadcrumbSeparator, {}),
-          /* @__PURE__ */ jsx75(BreadcrumbCollapsed, { items: hidden, menuId })
+        hidden.length > 0 ? /* @__PURE__ */ jsxs57(Fragment11, { children: [
+          /* @__PURE__ */ jsx78(BreadcrumbSeparator, {}),
+          /* @__PURE__ */ jsx78(BreadcrumbCollapsed, { items: hidden, menuId })
         ] }) : null,
-        tail.map((item) => /* @__PURE__ */ jsxs54(Fragment10, { children: [
-          /* @__PURE__ */ jsx75(BreadcrumbSeparator, {}),
+        tail.map((item) => /* @__PURE__ */ jsxs57(Fragment10, { children: [
+          /* @__PURE__ */ jsx78(BreadcrumbSeparator, {}),
           renderTrailItem(item)
         ] }, item.id))
       ] })
@@ -10089,7 +10122,7 @@ function StnBreadcrumb({
 // src/components/StnHeaderTitle.tsx
 import { useEffect as useEffect17, useState as useState21 } from "react";
 import { STN_HEADER_TITLE_FRAME } from "@stn-uiux/pub-ui/data/stnHeaderTitle";
-import { jsx as jsx76, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs58 } from "react/jsx-runtime";
 var KO_WEEKDAY_SHORT = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 var KO_WEEKDAY_LONG = [
   "\uC77C\uC694\uC77C",
@@ -10128,8 +10161,8 @@ function formatStnHeaderTitleTime(date, options) {
 }
 function HeaderTitleFrame({ preview = false }) {
   const frameClass = preview ? "stn-header-title__frame-preview" : "stn-header-title__frame";
-  return /* @__PURE__ */ jsxs55("div", { className: frameClass, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx76("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--outer", children: /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsxs58("div", { className: frameClass, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx79("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--outer", children: /* @__PURE__ */ jsx79(
       "img",
       {
         className: "stn-header-title__frame-img",
@@ -10138,8 +10171,8 @@ function HeaderTitleFrame({ preview = false }) {
         draggable: false
       }
     ) }),
-    /* @__PURE__ */ jsxs55("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
-      /* @__PURE__ */ jsx76(
+    /* @__PURE__ */ jsxs58("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
+      /* @__PURE__ */ jsx79(
         "img",
         {
           className: "stn-header-title__frame-img stn-header-title__frame-img--dark",
@@ -10148,7 +10181,7 @@ function HeaderTitleFrame({ preview = false }) {
           draggable: false
         }
       ),
-      /* @__PURE__ */ jsx76(
+      /* @__PURE__ */ jsx79(
         "img",
         {
           className: "stn-header-title__frame-img stn-header-title__frame-img--light",
@@ -10161,7 +10194,7 @@ function HeaderTitleFrame({ preview = false }) {
   ] });
 }
 function StnHeaderTitleFramePreview({ className }) {
-  return /* @__PURE__ */ jsx76("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx76(HeaderTitleFrame, { preview: true }) });
+  return /* @__PURE__ */ jsx79("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx79(HeaderTitleFrame, { preview: true }) });
 }
 function useLiveClock(enabled) {
   const [now, setNow] = useState21(() => /* @__PURE__ */ new Date());
@@ -10177,35 +10210,35 @@ function StnHeaderTitleMainText({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx76("h1", { className: cn("stn-header-title__text", className), ...rest, children });
+  return /* @__PURE__ */ jsx79("h1", { className: cn("stn-header-title__text", className), ...rest, children });
 }
 function StnHeaderTitleSubText({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx76("span", { className: cn("stn-header-title__sub-text", className), ...rest, children });
+  return /* @__PURE__ */ jsx79("span", { className: cn("stn-header-title__sub-text", className), ...rest, children });
 }
 function StnHeaderTitleDate({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx76("time", { className: cn("stn-header-title__date", className), ...rest, children });
+  return /* @__PURE__ */ jsx79("time", { className: cn("stn-header-title__date", className), ...rest, children });
 }
 function StnHeaderTitleWeekday({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx76("span", { className: cn("stn-header-title__weekday", className), ...rest, children });
+  return /* @__PURE__ */ jsx79("span", { className: cn("stn-header-title__weekday", className), ...rest, children });
 }
 function StnHeaderTitleTime({
   className,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx76("span", { className: cn("stn-header-title__time", className), "aria-label": "\uD604\uC7AC \uC2DC\uAC01", ...rest, children });
+  return /* @__PURE__ */ jsx79("span", { className: cn("stn-header-title__time", className), "aria-label": "\uD604\uC7AC \uC2DC\uAC01", ...rest, children });
 }
 function StnHeaderTitleClock({
   className,
@@ -10228,7 +10261,7 @@ function StnHeaderTitleClock({
 }) {
   const now = useLiveClock(live);
   if (children != null) {
-    return /* @__PURE__ */ jsxs55(
+    return /* @__PURE__ */ jsxs58(
       "header",
       {
         className: cn(
@@ -10240,8 +10273,8 @@ function StnHeaderTitleClock({
         ),
         ...rest,
         children: [
-          framed ? /* @__PURE__ */ jsx76(HeaderTitleFrame, {}) : null,
-          /* @__PURE__ */ jsx76("div", { className: "stn-header-title__content", children })
+          framed ? /* @__PURE__ */ jsx79(HeaderTitleFrame, {}) : null,
+          /* @__PURE__ */ jsx79("div", { className: "stn-header-title__content", children })
         ]
       }
     );
@@ -10271,7 +10304,7 @@ function StnHeaderTitleClock({
       resolvedTime = formatStnHeaderTitleTime(now, { showSeconds });
     }
   }
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs58(
     "header",
     {
       className: cn(
@@ -10283,11 +10316,11 @@ function StnHeaderTitleClock({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx76(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs55("div", { className: "stn-header-title__content", children: [
-          resolvedDate ? /* @__PURE__ */ jsx76("time", { className: "stn-header-title__date", dateTime: resolvedDate, children: resolvedDate }) : null,
-          showWeekdayOnly ? /* @__PURE__ */ jsx76("span", { className: "stn-header-title__weekday", children: resolvedWeekday }) : null,
-          resolvedTime ? /* @__PURE__ */ jsx76("span", { className: "stn-header-title__time", "aria-label": "\uD604\uC7AC \uC2DC\uAC01", children: resolvedTime }) : null
+        framed ? /* @__PURE__ */ jsx79(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsxs58("div", { className: "stn-header-title__content", children: [
+          resolvedDate ? /* @__PURE__ */ jsx79("time", { className: "stn-header-title__date", dateTime: resolvedDate, children: resolvedDate }) : null,
+          showWeekdayOnly ? /* @__PURE__ */ jsx79("span", { className: "stn-header-title__weekday", children: resolvedWeekday }) : null,
+          resolvedTime ? /* @__PURE__ */ jsx79("span", { className: "stn-header-title__time", "aria-label": "\uD604\uC7AC \uC2DC\uAC01", children: resolvedTime }) : null
         ] })
       ]
     }
@@ -10304,7 +10337,7 @@ function StnHeaderTitleDual({
   ...rest
 }) {
   const resolvedMain = mainText ?? title ?? children;
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs58(
     "header",
     {
       className: cn(
@@ -10316,10 +10349,10 @@ function StnHeaderTitleDual({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx76(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs55("div", { className: "stn-header-title__content", children: [
-          subText != null ? /* @__PURE__ */ jsx76("span", { className: "stn-header-title__sub-text", children: subText }) : null,
-          resolvedMain != null ? typeof resolvedMain === "string" || typeof resolvedMain === "number" ? /* @__PURE__ */ jsx76("h1", { className: "stn-header-title__text", children: resolvedMain }) : resolvedMain : null
+        framed ? /* @__PURE__ */ jsx79(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsxs58("div", { className: "stn-header-title__content", children: [
+          subText != null ? /* @__PURE__ */ jsx79("span", { className: "stn-header-title__sub-text", children: subText }) : null,
+          resolvedMain != null ? typeof resolvedMain === "string" || typeof resolvedMain === "number" ? /* @__PURE__ */ jsx79("h1", { className: "stn-header-title__text", children: resolvedMain }) : resolvedMain : null
         ] })
       ]
     }
@@ -10334,7 +10367,7 @@ function StnHeaderTitleText({
   ...rest
 }) {
   const resolved = title ?? children;
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs58(
     "header",
     {
       className: cn(
@@ -10346,20 +10379,20 @@ function StnHeaderTitleText({
       ),
       ...rest,
       children: [
-        framed ? /* @__PURE__ */ jsx76(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsx76("div", { className: "stn-header-title__content", children: typeof resolved === "string" || typeof resolved === "number" ? /* @__PURE__ */ jsx76("h1", { className: "stn-header-title__text", children: resolved }) : resolved })
+        framed ? /* @__PURE__ */ jsx79(HeaderTitleFrame, {}) : null,
+        /* @__PURE__ */ jsx79("div", { className: "stn-header-title__content", children: typeof resolved === "string" || typeof resolved === "number" ? /* @__PURE__ */ jsx79("h1", { className: "stn-header-title__text", children: resolved }) : resolved })
       ]
     }
   );
 }
 function StnHeaderTitleRoot(props) {
   if (props.variant === "clock") {
-    return /* @__PURE__ */ jsx76(StnHeaderTitleClock, { ...props });
+    return /* @__PURE__ */ jsx79(StnHeaderTitleClock, { ...props });
   }
   if (props.variant === "dual" || "subText" in props && props.subText != null) {
-    return /* @__PURE__ */ jsx76(StnHeaderTitleDual, { ...props });
+    return /* @__PURE__ */ jsx79(StnHeaderTitleDual, { ...props });
   }
-  return /* @__PURE__ */ jsx76(StnHeaderTitleText, { ...props });
+  return /* @__PURE__ */ jsx79(StnHeaderTitleText, { ...props });
 }
 var StnHeaderTitle = Object.assign(StnHeaderTitleRoot, {
   Text: StnHeaderTitleMainText,
@@ -10374,7 +10407,7 @@ var StnHeaderTitle = Object.assign(StnHeaderTitleRoot, {
 import {
   forwardRef as forwardRef46
 } from "react";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var StnContainer = forwardRef46(function StnContainer2({
   component,
   as,
@@ -10390,7 +10423,7 @@ var StnContainer = forwardRef46(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__ */ jsx77(
+  return /* @__PURE__ */ jsx80(
     Component,
     {
       ref,
@@ -10414,7 +10447,7 @@ var StnContainer = forwardRef46(function StnContainer2({
 
 // src/layouts/StnGrid.tsx
 import { forwardRef as forwardRef47 } from "react";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var BREAKPOINTS2 = ["xs", "sm", "md", "lg", "xl"];
 var SPACING_CLASS = {
   "0": "0",
@@ -10500,7 +10533,7 @@ var StnGrid = forwardRef47(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__ */ jsx78(
+  return /* @__PURE__ */ jsx81(
     Component,
     {
       ref,
@@ -10524,7 +10557,7 @@ var StnGrid = forwardRef47(function StnGrid2({
 });
 
 // src/layouts/StnLayerShell.tsx
-import { jsx as jsx79, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs59 } from "react/jsx-runtime";
 function StnLayerShell({
   gnb,
   gnbSide = "left",
@@ -10545,7 +10578,7 @@ function StnLayerShell({
   const resolvedMainContent = layer1 ?? children;
   const resolvedModal = layer2;
   const isGnbRight = gnbSide === "right";
-  return /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs59(
     "div",
     {
       id: wrapId,
@@ -10553,8 +10586,8 @@ function StnLayerShell({
       className: cn("stn-wrap", isGnbRight && "stn-wrap--gnb-right", wrapClassName),
       children: [
         layer0,
-        utilities ? /* @__PURE__ */ jsx79("div", { className: "stn-page-utilities", "data-stn-layer-role": "utility", children: utilities }) : null,
-        /* @__PURE__ */ jsxs56(
+        utilities ? /* @__PURE__ */ jsx82("div", { className: "stn-page-utilities", "data-stn-layer-role": "utility", children: utilities }) : null,
+        /* @__PURE__ */ jsxs59(
           "main",
           {
             id: containerId,
@@ -10563,9 +10596,9 @@ function StnLayerShell({
             className: cn("stn-layer-1", scrollable && "scroll", containerClassName),
             children: [
               !isGnbRight && gnb,
-              /* @__PURE__ */ jsxs56("div", { className: "stn-layer-1__main", children: [
-                header ? /* @__PURE__ */ jsx79("header", { className: "stn-layer-1__header", children: header }) : null,
-                /* @__PURE__ */ jsx79("div", { className: cn("stn-layer-1__body", scrollable && "stn-scroll", contentClassName), children: resolvedMainContent })
+              /* @__PURE__ */ jsxs59("div", { className: "stn-layer-1__main", children: [
+                header ? /* @__PURE__ */ jsx82("header", { className: "stn-layer-1__header", children: header }) : null,
+                /* @__PURE__ */ jsx82("div", { className: cn("stn-layer-1__body", scrollable && "stn-scroll", contentClassName), children: resolvedMainContent })
               ] }),
               isGnbRight && gnb
             ]
@@ -10578,7 +10611,7 @@ function StnLayerShell({
 }
 
 // src/layouts/StnListViewLayout.tsx
-import { jsx as jsx80, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs60 } from "react/jsx-runtime";
 function StnListViewLayoutBody({
   search,
   sidebar,
@@ -10589,13 +10622,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__ */ jsx80("aside", { className: lnbClass, children: sidebar }) : null;
-  return /* @__PURE__ */ jsx80(
+  const sidebarAside = sidebar ? /* @__PURE__ */ jsx83("aside", { className: lnbClass, children: sidebar }) : null;
+  return /* @__PURE__ */ jsx83(
     StnContainer,
     {
       maxWidth: false,
       className: cn("stn-list-view-layout__body", className),
-      children: /* @__PURE__ */ jsxs57(
+      children: /* @__PURE__ */ jsxs60(
         StnStack,
         {
           direction: "row",
@@ -10603,19 +10636,19 @@ function StnListViewLayoutBody({
           className: "stn-list-view__main",
           children: [
             lnbSide === "left" ? sidebarAside : null,
-            /* @__PURE__ */ jsxs57(
+            /* @__PURE__ */ jsxs60(
               StnStack,
               {
                 direction: "column",
                 spacing: 2,
                 className: "stn-list-view__content-stack",
                 children: [
-                  search ? /* @__PURE__ */ jsx80("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
-                  /* @__PURE__ */ jsx80(
+                  search ? /* @__PURE__ */ jsx83("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
+                  /* @__PURE__ */ jsx83(
                     "div",
                     {
                       className: "stn-page-scaffold__content content_box",
-                      children: children ?? /* @__PURE__ */ jsxs57("div", { className: "stn-table stn-table--fill", children: [
+                      children: children ?? /* @__PURE__ */ jsxs60("div", { className: "stn-table stn-table--fill", children: [
                         table,
                         pagination
                       ] })
@@ -10647,7 +10680,7 @@ function StnListViewLayoutRoot({
 }) {
   const bare = bareProp ?? noShell ?? false;
   const hasLnbClass = lnbSide === "right" ? "has_lnb_right" : "has_lnb";
-  const body = /* @__PURE__ */ jsx80(
+  const body = /* @__PURE__ */ jsx83(
     StnListViewLayoutBody,
     {
       search,
@@ -10662,10 +10695,10 @@ function StnListViewLayoutRoot({
   if (bare) {
     return body;
   }
-  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ jsx80("div", { className: "stn-layer-1__header", children: /* @__PURE__ */ jsx80(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx80(StnHeader.Left, { children: /* @__PURE__ */ jsx80(StnHeaderPageTitle, { children: title }) }) }) });
-  return /* @__PURE__ */ jsxs57("div", { className: cn("stn-list-view-layout", "stn-layer-1", className), ...rest, children: [
+  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ jsx83("div", { className: "stn-layer-1__header", children: /* @__PURE__ */ jsx83(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx83(StnHeader.Left, { children: /* @__PURE__ */ jsx83(StnHeaderPageTitle, { children: title }) }) }) });
+  return /* @__PURE__ */ jsxs60("div", { className: cn("stn-list-view-layout", "stn-layer-1", className), ...rest, children: [
     renderedHeader,
-    /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx83(
       "div",
       {
         className: cn("stn-content-area", sidebar ? hasLnbClass : null, search ? "has_sch" : null),
@@ -10675,10 +10708,10 @@ function StnListViewLayoutRoot({
   ] });
 }
 function StnListViewLayoutHeader({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx80("div", { className: cn("stn-layer-1__header", className), ...rest, children });
+  return /* @__PURE__ */ jsx83("div", { className: cn("stn-layer-1__header", className), ...rest, children });
 }
 function StnListViewLayoutSearch({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx80("div", { className: cn("search_area", className), ...rest, children });
+  return /* @__PURE__ */ jsx83("div", { className: cn("search_area", className), ...rest, children });
 }
 function StnListViewLayoutSidebar({
   side = "left",
@@ -10687,16 +10720,16 @@ function StnListViewLayoutSidebar({
   ...rest
 }) {
   const lnbClass = side === "right" ? "lnb_box_right" : "lnb_box";
-  return /* @__PURE__ */ jsx80("aside", { className: cn(lnbClass, className), ...rest, children });
+  return /* @__PURE__ */ jsx83("aside", { className: cn(lnbClass, className), ...rest, children });
 }
 function StnListViewLayoutContent({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx80("div", { className: cn("content_box", className), ...rest, children });
+  return /* @__PURE__ */ jsx83("div", { className: cn("content_box", className), ...rest, children });
 }
 function StnListViewLayoutTable({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx80("div", { className: cn("stn-table", className), ...rest, children });
+  return /* @__PURE__ */ jsx83("div", { className: cn("stn-table", className), ...rest, children });
 }
 function StnListViewLayoutPagination({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx80("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
+  return /* @__PURE__ */ jsx83("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
 }
 var StnListViewLayout = Object.assign(StnListViewLayoutRoot, {
   Body: StnListViewLayoutBody,
@@ -10730,13 +10763,13 @@ import {
 } from "@stn-uiux/pub-ui/data/stnLayout";
 
 // src/patterns/dashboard/StnMapCanvas.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 function StnMapCanvas({
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx84(
     "div",
     {
       className: cn("stn-map-canvas", className),
@@ -10748,7 +10781,7 @@ function StnMapCanvas({
 }
 
 // src/patterns/dashboard/StnDashboard.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var fillStyle = {
   flex: "1 1 0%",
   minHeight: 0,
@@ -10767,7 +10800,7 @@ function StnDashboardRoot({
 }) {
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx85(
     "div",
     {
       className: cn(
@@ -10796,7 +10829,7 @@ function StnDashboardLeft({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx85(
     "div",
     {
       className: cn("stn-dashboard__left", className),
@@ -10822,7 +10855,7 @@ function StnDashboardRight({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx85(
     "div",
     {
       className: cn("stn-dashboard__right", className),
@@ -10850,7 +10883,7 @@ function StnDashboardTopRight({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx85(
     "div",
     {
       className: cn("stn-dashboard__top-right", className),
@@ -10869,9 +10902,9 @@ var StnDashboard = Object.assign(StnDashboardRoot, {
 });
 
 // src/patterns/scaffold/StnPageScaffold.tsx
-import { jsx as jsx83, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs61 } from "react/jsx-runtime";
 function StnPageScaffoldRoot({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx86(
     "div",
     {
       className: cn("stn-page-scaffold", className),
@@ -10888,9 +10921,9 @@ function StnPageScaffoldRegion({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs58("div", { className: cn("stn-page-scaffold__region", className), "data-stn-page-scaffold": "region", ...rest, children: [
-    /* @__PURE__ */ jsx83("span", { className: "stn-page-scaffold__region-label", children: label }),
-    hint ? /* @__PURE__ */ jsx83("span", { className: "stn-page-scaffold__region-hint", children: hint }) : null,
+  return /* @__PURE__ */ jsxs61("div", { className: cn("stn-page-scaffold__region", className), "data-stn-page-scaffold": "region", ...rest, children: [
+    /* @__PURE__ */ jsx86("span", { className: "stn-page-scaffold__region-label", children: label }),
+    hint ? /* @__PURE__ */ jsx86("span", { className: "stn-page-scaffold__region-hint", children: hint }) : null,
     children
   ] });
 }
@@ -10901,7 +10934,7 @@ function StnPageScaffoldMapPlaceholder({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx83("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsx86("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs61(
     "div",
     {
       className: cn("stn-page-scaffold__canvas-placeholder", className),
@@ -10909,8 +10942,8 @@ function StnPageScaffoldMapPlaceholder({
       role: "status",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx83("p", { className: "stn-page-scaffold__canvas-placeholder-title", children: message }),
-        note ? /* @__PURE__ */ jsx83("p", { className: "stn-page-scaffold__canvas-placeholder-note", children: note }) : null,
+        /* @__PURE__ */ jsx86("p", { className: "stn-page-scaffold__canvas-placeholder-title", children: message }),
+        note ? /* @__PURE__ */ jsx86("p", { className: "stn-page-scaffold__canvas-placeholder-note", children: note }) : null,
         children
       ]
     }
@@ -10921,7 +10954,7 @@ function StnPageScaffoldMapCanvas({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx86(
     "div",
     {
       className: cn("stn-widget", "shell-canvas", "stn-map-canvas", "stn-page-scaffold__canvas", className),
@@ -10934,7 +10967,7 @@ function StnPageScaffoldMapCanvas({
 }
 function StnPageScaffoldLayer({ label, hint, children, className, ...layerProps }) {
   const labelText = label ? hint ? `${label} \xB7 ${hint}` : label : void 0;
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx86(
     StnLayer2,
     {
       className: cn(
@@ -10981,25 +11014,25 @@ function DashboardPageScaffold({
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
   const isNone = widgetPosition === "none" || !showRightRegion;
-  const mapColumn = /* @__PURE__ */ jsxs58(StnDashboard.Left, { children: [
-    /* @__PURE__ */ jsx83(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
+  const mapColumn = /* @__PURE__ */ jsxs61(StnDashboard.Left, { children: [
+    /* @__PURE__ */ jsx86(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
     faultPanel
   ] });
-  const rightWidgets = right ?? /* @__PURE__ */ jsx83(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const leftWidgets = left ?? right ?? /* @__PURE__ */ jsx83(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC88C\uCE21 \uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const dashboardGrid = bodyEmpty ? /* @__PURE__ */ jsx83(StnDashboard, { empty: true, widgetPosition, "data-stn-page-scaffold": "dashboard-empty" }) : isBoth ? /* @__PURE__ */ jsxs58(StnDashboard, { widgetPosition: "both", children: [
-    /* @__PURE__ */ jsx83(StnDashboard.Right, { children: leftWidgets }),
+  const rightWidgets = right ?? /* @__PURE__ */ jsx86(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
+  const leftWidgets = left ?? right ?? /* @__PURE__ */ jsx86(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC88C\uCE21 \uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
+  const dashboardGrid = bodyEmpty ? /* @__PURE__ */ jsx86(StnDashboard, { empty: true, widgetPosition, "data-stn-page-scaffold": "dashboard-empty" }) : isBoth ? /* @__PURE__ */ jsxs61(StnDashboard, { widgetPosition: "both", children: [
+    /* @__PURE__ */ jsx86(StnDashboard.Right, { children: leftWidgets }),
     mapColumn,
-    /* @__PURE__ */ jsx83(StnDashboard.Right, { children: rightWidgets })
-  ] }) : isLeft ? /* @__PURE__ */ jsxs58(StnDashboard, { widgetPosition: "left", children: [
-    /* @__PURE__ */ jsx83(StnDashboard.Right, { children: leftWidgets }),
+    /* @__PURE__ */ jsx86(StnDashboard.Right, { children: rightWidgets })
+  ] }) : isLeft ? /* @__PURE__ */ jsxs61(StnDashboard, { widgetPosition: "left", children: [
+    /* @__PURE__ */ jsx86(StnDashboard.Right, { children: leftWidgets }),
     mapColumn
-  ] }) : /* @__PURE__ */ jsxs58(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
+  ] }) : /* @__PURE__ */ jsxs61(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
     mapColumn,
-    !isNone ? /* @__PURE__ */ jsx83(StnDashboard.Right, { children: rightWidgets }) : null
+    !isNone ? /* @__PURE__ */ jsx86(StnDashboard.Right, { children: rightWidgets }) : null
   ] });
   const contentNode = children ?? dashboardGrid;
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx86(
     StnLayerShell,
     {
       gnb,
@@ -11008,7 +11041,7 @@ function DashboardPageScaffold({
       layer0,
       layer2,
       ...shellProps,
-      children: /* @__PURE__ */ jsx83(
+      children: /* @__PURE__ */ jsx86(
         StnContainer,
         {
           maxWidth: false,
@@ -11029,9 +11062,9 @@ import {
   STN_ALERT_CENTER_DEMO_WORK
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
 import { systemIconSrc } from "@stn-uiux/pub-ui/data/stnSystemIcons";
-import { Fragment as Fragment12, jsx as jsx84, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx87, jsxs as jsxs62 } from "react/jsx-runtime";
 function defaultTopologyHeader(_clock) {
-  return /* @__PURE__ */ jsx84(StnHeader, { variant: "widget" });
+  return /* @__PURE__ */ jsx87(StnHeader, { variant: "widget" });
 }
 function AlertCenterPageScaffold({
   gnbAlertPanel,
@@ -11050,7 +11083,7 @@ function AlertCenterPageScaffold({
 }) {
   const [gnbOpen, setGnbOpen] = useState22(defaultGnbOpen);
   const panel = useMemo6(
-    () => gnbAlertPanel ?? /* @__PURE__ */ jsx84(
+    () => gnbAlertPanel ?? /* @__PURE__ */ jsx87(
       StnAlertCenterPanel,
       {
         alerts: STN_ALERT_CENTER_DEMO_ALERTS,
@@ -11061,26 +11094,26 @@ function AlertCenterPageScaffold({
     [gnbAlertPanel]
   );
   const sideNav = useMemo6(
-    () => gnbProp ?? /* @__PURE__ */ jsxs59(Fragment12, { children: [
-      /* @__PURE__ */ jsxs59(
+    () => gnbProp ?? /* @__PURE__ */ jsxs62(Fragment12, { children: [
+      /* @__PURE__ */ jsxs62(
         StnSideNavigation,
         {
           collapsed: !gnbOpen,
           onCollapseChange: (col) => setGnbOpen(!col),
           children: [
-            /* @__PURE__ */ jsxs59(StnSideNavigation.Header, { children: [
-              /* @__PURE__ */ jsx84(StnSideNavigation.Logo, {}),
-              /* @__PURE__ */ jsx84(StnSideNavigation.Toggle, {})
+            /* @__PURE__ */ jsxs62(StnSideNavigation.Header, { children: [
+              /* @__PURE__ */ jsx87(StnSideNavigation.Logo, {}),
+              /* @__PURE__ */ jsx87(StnSideNavigation.Toggle, {})
             ] }),
-            /* @__PURE__ */ jsxs59(StnSideNavigation.Menu, { children: [
-              /* @__PURE__ */ jsx84(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/layout-grid"), label: "\uBA54\uC778 \uB300\uC2DC\uBCF4\uB4DC", active: true }),
-              /* @__PURE__ */ jsx84(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/server_2"), label: "\uC11C\uBC84 \uBAA8\uB2C8\uD130\uB9C1" }),
-              /* @__PURE__ */ jsx84(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/activity"), label: "\uB124\uD2B8\uC6CC\uD06C \uBD84\uC11D" })
+            /* @__PURE__ */ jsxs62(StnSideNavigation.Menu, { children: [
+              /* @__PURE__ */ jsx87(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/layout-grid"), label: "\uBA54\uC778 \uB300\uC2DC\uBCF4\uB4DC", active: true }),
+              /* @__PURE__ */ jsx87(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/server_2"), label: "\uC11C\uBC84 \uBAA8\uB2C8\uD130\uB9C1" }),
+              /* @__PURE__ */ jsx87(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/activity"), label: "\uB124\uD2B8\uC6CC\uD06C \uBD84\uC11D" })
             ] }),
-            /* @__PURE__ */ jsx84(StnSideNavigation.Spacer, {}),
-            /* @__PURE__ */ jsxs59(StnSideNavigation.Footer, { curved: true, children: [
-              /* @__PURE__ */ jsx84(StnSideNavigation.Watermark, {}),
-              /* @__PURE__ */ jsx84(
+            /* @__PURE__ */ jsx87(StnSideNavigation.Spacer, {}),
+            /* @__PURE__ */ jsxs62(StnSideNavigation.Footer, { curved: true, children: [
+              /* @__PURE__ */ jsx87(StnSideNavigation.Watermark, {}),
+              /* @__PURE__ */ jsx87(
                 StnSideNavigation.Item,
                 {
                   iconSrc: systemIconSrc("line/bell"),
@@ -11089,7 +11122,7 @@ function AlertCenterPageScaffold({
                   onClick: void 0
                 }
               ),
-              /* @__PURE__ */ jsx84(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/settings"), label: "\uC124\uC815" })
+              /* @__PURE__ */ jsx87(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/settings"), label: "\uC124\uC815" })
             ] })
           ]
         }
@@ -11098,8 +11131,8 @@ function AlertCenterPageScaffold({
     ] }),
     [gnbProp, gnbOpen, panel]
   );
-  const faultSlot = faultPanel ?? (showFaultPanelPlaceholder ? /* @__PURE__ */ jsx84("div", { className: "wrap_real_time stn-page-scaffold__fault-ph", children: /* @__PURE__ */ jsx84(StnPageScaffold.Region, { label: "\uC2E4\uC2DC\uAC04 \uC7A5\uC560 \uD604\uD669", hint: "StnWidget shell=fault-panel \xB7 \uC120\uD0DD" }) }) : null);
-  return /* @__PURE__ */ jsx84(
+  const faultSlot = faultPanel ?? (showFaultPanelPlaceholder ? /* @__PURE__ */ jsx87("div", { className: "wrap_real_time stn-page-scaffold__fault-ph", children: /* @__PURE__ */ jsx87(StnPageScaffold.Region, { label: "\uC2E4\uC2DC\uAC04 \uC7A5\uC560 \uD604\uD669", hint: "StnWidget shell=fault-panel \xB7 \uC120\uD0DD" }) }) : null);
+  return /* @__PURE__ */ jsx87(
     DashboardPageScaffold,
     {
       gnb: sideNav,
@@ -11107,7 +11140,7 @@ function AlertCenterPageScaffold({
       mapMessage,
       mapNote,
       faultPanel: faultSlot,
-      right: right ?? /* @__PURE__ */ jsx84(AlertCenterDashboard, {}),
+      right: right ?? /* @__PURE__ */ jsx87(AlertCenterDashboard, {}),
       wrapId,
       wrapClassName: "stn-page--map-bg",
       ...shellProps
@@ -11117,7 +11150,7 @@ function AlertCenterPageScaffold({
 
 // src/patterns/scaffold/LoginPageScaffold.tsx
 import { useState as useState23 } from "react";
-import { jsx as jsx85, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs63 } from "react/jsx-runtime";
 var LOGIN_TABS = [
   { value: "normal", label: "\uC77C\uBC18 \uB85C\uADF8\uC778" },
   { value: "social", label: "\uC18C\uC15C \uB85C\uADF8\uC778" }
@@ -11135,8 +11168,8 @@ function DefaultLoginForm({
     e.preventDefault();
     onLogin?.(userId, password);
   }
-  return /* @__PURE__ */ jsxs60(StnLoginFormStack, { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsxs63(StnLoginFormStack, { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx88(
       StnSegmented,
       {
         "aria-label": "\uB85C\uADF8\uC778 \uBC29\uC2DD",
@@ -11145,8 +11178,8 @@ function DefaultLoginForm({
         options: LOGIN_TABS
       }
     ),
-    mode === "normal" ? /* @__PURE__ */ jsxs60(StnLoginFormFields, { children: [
-      /* @__PURE__ */ jsx85(
+    mode === "normal" ? /* @__PURE__ */ jsxs63(StnLoginFormFields, { children: [
+      /* @__PURE__ */ jsx88(
         StnLoginTextField,
         {
           icon: "line/user",
@@ -11158,7 +11191,7 @@ function DefaultLoginForm({
           "aria-label": "\uC544\uC774\uB514"
         }
       ),
-      /* @__PURE__ */ jsx85(
+      /* @__PURE__ */ jsx88(
         StnLoginTextField,
         {
           icon: "line/lock",
@@ -11171,11 +11204,11 @@ function DefaultLoginForm({
           "aria-label": "\uBE44\uBC00\uBC88\uD638"
         }
       )
-    ] }) : socialContent ?? /* @__PURE__ */ jsx85(StnLoginPlaceholder, {}),
-    /* @__PURE__ */ jsx85(StnButton, { type: "submit", size: "xl", fullWidth: true, children: "\uB85C\uADF8\uC778" }),
-    /* @__PURE__ */ jsxs60(StnLoginFormLinks, { children: [
-      /* @__PURE__ */ jsx85("a", { href: signUpHref, children: "\uD68C\uC6D0\uAC00\uC785" }),
-      /* @__PURE__ */ jsx85("a", { href: recoverHref, children: "\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30" })
+    ] }) : socialContent ?? /* @__PURE__ */ jsx88(StnLoginPlaceholder, {}),
+    /* @__PURE__ */ jsx88(StnButton, { type: "submit", size: "xl", fullWidth: true, children: "\uB85C\uADF8\uC778" }),
+    /* @__PURE__ */ jsxs63(StnLoginFormLinks, { children: [
+      /* @__PURE__ */ jsx88("a", { href: signUpHref, children: "\uD68C\uC6D0\uAC00\uC785" }),
+      /* @__PURE__ */ jsx88("a", { href: recoverHref, children: "\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30" })
     ] })
   ] });
 }
@@ -11189,16 +11222,16 @@ function DefaultLoginCard({
   signUpHref,
   recoverHref
 }) {
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx88(
     StnLoginCard,
     {
       glow,
       variant,
-      brand: /* @__PURE__ */ jsxs60(StnLoginBrandStack, { children: [
-        logo ?? /* @__PURE__ */ jsx85(StnLogo, { variant: "vertical", size: "xl" }),
-        /* @__PURE__ */ jsx85("p", { className: "stn-login-card__caption", children: productCaption })
+      brand: /* @__PURE__ */ jsxs63(StnLoginBrandStack, { children: [
+        logo ?? /* @__PURE__ */ jsx88(StnLogo, { variant: "vertical", size: "xl" }),
+        /* @__PURE__ */ jsx88("p", { className: "stn-login-card__caption", children: productCaption })
       ] }),
-      children: /* @__PURE__ */ jsx85(
+      children: /* @__PURE__ */ jsx88(
         DefaultLoginForm,
         {
           onLogin,
@@ -11224,8 +11257,8 @@ function LoginPageScaffold({
   recoverHref,
   ...shellProps
 }) {
-  const resolvedLayer0 = layer0 ?? /* @__PURE__ */ jsx85(StnLayer0Background, { variant: "login" });
-  const resolvedCard = children ?? /* @__PURE__ */ jsx85(
+  const resolvedLayer0 = layer0 ?? /* @__PURE__ */ jsx88(StnLayer0Background, { variant: "login" });
+  const resolvedCard = children ?? /* @__PURE__ */ jsx88(
     DefaultLoginCard,
     {
       logo,
@@ -11238,14 +11271,14 @@ function LoginPageScaffold({
       recoverHref
     }
   );
-  return /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsxs63(
     "div",
     {
       className: cn("stn-wrap stn-page--login", wrapClassName),
       ...shellProps,
       children: [
         resolvedLayer0,
-        /* @__PURE__ */ jsx85("div", { className: "stn-login", children: resolvedCard })
+        /* @__PURE__ */ jsx88("div", { className: "stn-login", children: resolvedCard })
       ]
     }
   );
@@ -11271,11 +11304,1507 @@ import {
   STN_LAYER_ROLE_USAGE,
   STN_ELEVATION_Z_INDEX
 } from "@stn-uiux/pub-ui/data/stnLayer";
+
+// src/components/chartTypes.tsx
+import { jsx as jsx89, jsxs as jsxs64 } from "react/jsx-runtime";
+var SEVERITY_COLOR_TOKENS = {
+  critical: "var(--stn-chart-status-critical)",
+  major: "var(--stn-chart-status-major)",
+  minor: "var(--stn-chart-status-minor)",
+  warning: "var(--stn-chart-status-warning)"
+};
+var STATUS_COLOR_TOKENS = {
+  critical: "var(--stn-chart-status-critical)",
+  major: "var(--stn-chart-status-major)",
+  minor: "var(--stn-chart-status-minor)",
+  warning: "var(--stn-chart-status-warning)",
+  success: "var(--stn-chart-status-success)",
+  normal: "var(--stn-chart-status-success)",
+  info: "var(--stn-chart-status-info)",
+  neutral: "var(--stn-chart-status-neutral)",
+  primary: "var(--stn-primary)",
+  secondary: "var(--stn-secondary)",
+  error: "var(--stn-chart-status-critical)"
+};
+var STN_CHART_STATUS_COLORS = STATUS_COLOR_TOKENS;
+var STN_CHART_COLORS = [
+  "var(--stn-chart-color-1)",
+  "var(--stn-chart-color-2)",
+  "var(--stn-chart-color-3)",
+  "var(--stn-chart-color-4)",
+  "var(--stn-chart-color-5)",
+  "var(--stn-chart-color-6)",
+  "var(--stn-chart-color-7)",
+  "var(--stn-chart-color-8)",
+  "var(--stn-chart-color-9)",
+  "var(--stn-chart-color-10)"
+];
+var DEFAULT_CHART_COLORS = STN_CHART_COLORS;
+var LEGACY_CHART_COLOR_ALIASES = {
+  "var(--stn-chart-bar-1)": "var(--stn-chart-color-1)",
+  "var(--stn-chart-bar-2)": "var(--stn-chart-color-2)",
+  "var(--stn-chart-bar-3)": "var(--stn-chart-color-3)",
+  "var(--stn-chart-bar-4)": "var(--stn-chart-color-4)",
+  "var(--stn-chart-bar-5)": "var(--stn-chart-color-5)",
+  "var(--stn-chart-bar-6)": "var(--stn-chart-color-6)",
+  "var(--stn-chart-line-1)": "var(--stn-chart-color-1)",
+  "var(--stn-chart-line-2)": "var(--stn-chart-color-2)",
+  "var(--stn-chart-line-3)": "var(--stn-chart-color-3)",
+  "var(--stn-chart-line-4)": "var(--stn-chart-color-4)",
+  "var(--stn-chart-line-5)": "var(--stn-chart-color-5)",
+  "var(--stn-chart-line-6)": "var(--stn-chart-color-6)",
+  "var(--stn-chart-line-stroke)": "var(--stn-chart-color-1)",
+  "var(--stn-chart-gauge-seg-1)": "var(--stn-chart-color-1)",
+  "var(--stn-chart-gauge-seg-2)": "var(--stn-chart-color-2)",
+  "var(--stn-chart-gauge-seg-3)": "var(--stn-chart-color-3)",
+  "var(--stn-chart-gauge-seg-4)": "var(--stn-chart-color-4)",
+  "var(--stn-chart-gauge-seg-5)": "var(--stn-chart-color-5)",
+  "var(--stn-chart-gauge-seg-6)": "var(--stn-chart-color-6)",
+  "var(--stn-chart-gauge-seg-7)": "var(--stn-chart-color-7)",
+  "var(--stn-chart-gauge-seg-8)": "var(--stn-chart-color-8)",
+  "var(--stn-chart-gauge-seg-9)": "var(--stn-chart-color-9)",
+  "var(--stn-chart-gauge-seg-10)": "var(--stn-chart-color-10)"
+};
+function resolveChartColor(color, severityOrFallback, status, fallbackColor) {
+  if (color) {
+    const normalized = color.toLowerCase().trim();
+    if (normalized in STATUS_COLOR_TOKENS) {
+      return STATUS_COLOR_TOKENS[normalized];
+    }
+    if (normalized in LEGACY_CHART_COLOR_ALIASES) {
+      return LEGACY_CHART_COLOR_ALIASES[normalized];
+    }
+    return color;
+  }
+  if (typeof severityOrFallback === "string") {
+    if (severityOrFallback in SEVERITY_COLOR_TOKENS) {
+      return SEVERITY_COLOR_TOKENS[severityOrFallback];
+    }
+    if (severityOrFallback in STATUS_COLOR_TOKENS) {
+      return STATUS_COLOR_TOKENS[severityOrFallback];
+    }
+  }
+  if (status && STATUS_COLOR_TOKENS[status]) {
+    return STATUS_COLOR_TOKENS[status];
+  }
+  if (typeof severityOrFallback === "number") {
+    return STN_CHART_COLORS[severityOrFallback % STN_CHART_COLORS.length];
+  }
+  if (fallbackColor) {
+    return fallbackColor;
+  }
+  if (typeof severityOrFallback === "string" && severityOrFallback.startsWith("var(")) {
+    return severityOrFallback;
+  }
+  return STN_CHART_COLORS[0];
+}
+function formatChartValue(value, decimals) {
+  if (value === 0) return "0";
+  if (value >= 1e6) {
+    const m = value / 1e6;
+    const resolvedDecimals2 = decimals !== void 0 ? decimals : m % 1 === 0 ? 0 : 1;
+    return `${m.toFixed(resolvedDecimals2)}M`;
+  }
+  if (value >= 1e3) {
+    const k = value / 1e3;
+    const resolvedDecimals2 = decimals !== void 0 ? decimals : k % 1 === 0 ? 0 : 1;
+    return `${k.toFixed(resolvedDecimals2)}k`;
+  }
+  const resolvedDecimals = decimals !== void 0 ? decimals : value % 1 === 0 ? 0 : 1;
+  return value.toFixed(resolvedDecimals);
+}
+function renderChartState(loading, hasData, emptyText = "\uC870\uD68C\uB41C \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4") {
+  if (loading) {
+    return /* @__PURE__ */ jsxs64("div", { className: "stn-chart-skeleton", "aria-busy": "true", "aria-label": "\uCC28\uD2B8 \uB85C\uB529 \uC911", children: [
+      /* @__PURE__ */ jsxs64("div", { className: "stn-chart-skeleton__bars", children: [
+        /* @__PURE__ */ jsx89("div", { className: "stn-chart-skeleton__bar", style: { height: "45%" } }),
+        /* @__PURE__ */ jsx89("div", { className: "stn-chart-skeleton__bar", style: { height: "75%" } }),
+        /* @__PURE__ */ jsx89("div", { className: "stn-chart-skeleton__bar", style: { height: "30%" } }),
+        /* @__PURE__ */ jsx89("div", { className: "stn-chart-skeleton__bar", style: { height: "90%" } }),
+        /* @__PURE__ */ jsx89("div", { className: "stn-chart-skeleton__bar", style: { height: "60%" } })
+      ] }),
+      /* @__PURE__ */ jsx89("div", { className: "stn-chart-skeleton__axis" })
+    ] });
+  }
+  if (!hasData) {
+    return /* @__PURE__ */ jsxs64("div", { className: "stn-chart-empty", role: "status", "aria-label": "\uB370\uC774\uD130 \uC5C6\uC74C", children: [
+      /* @__PURE__ */ jsxs64(
+        "svg",
+        {
+          className: "stn-chart-empty__icon",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx89("path", { d: "M3 3v18h18" }),
+            /* @__PURE__ */ jsx89("path", { d: "M18 9l-5 5-4-4-3 3" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx89("span", { children: emptyText })
+    ] });
+  }
+  return null;
+}
+
+// src/components/StnBarChart.tsx
+import {
+  useState as useState24
+} from "react";
+import { Fragment as Fragment13, jsx as jsx90, jsxs as jsxs65 } from "react/jsx-runtime";
+var DEFAULT_BAR_COLORS = STN_CHART_COLORS;
+var SIZE_WIDTH_MAP = {
+  sm: "var(--stn-chart-bar-width-sm)",
+  md: "var(--stn-chart-bar-width-md)",
+  lg: "var(--stn-chart-bar-width-lg)"
+};
+function StnBarChart({
+  data = [],
+  direction = "vertical",
+  orientation,
+  size,
+  colorBy = "series",
+  showXAxis = true,
+  showYAxis = true,
+  showTooltip = true,
+  showValue = false,
+  yAxis = {},
+  legend,
+  highlightIndex: controlledHighlight,
+  onColumnClick,
+  compact = false,
+  barWidth: customBarWidth,
+  height,
+  decimals,
+  loading = false,
+  emptyText,
+  className,
+  style,
+  ...rest
+}) {
+  const [internalHighlight, setInternalHighlight] = useState24(null);
+  const [hoveredIndex, setHoveredIndex] = useState24(null);
+  const isHorizontal = direction === "horizontal" || orientation === "horizontal";
+  if (loading || !data || data.length === 0) {
+    const emptyContainerStyle = {
+      ...style,
+      ...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
+    };
+    return /* @__PURE__ */ jsx90(
+      "div",
+      {
+        className: cn(
+          "stn-chart-bar",
+          isHorizontal ? "stn-chart-bar--horizontal" : "stn-chart-bar--vertical",
+          size && `stn-chart-bar--${size}`,
+          className
+        ),
+        style: { ...emptyContainerStyle, minHeight: height || 160 },
+        ...rest,
+        children: renderChartState(loading, Boolean(data && data.length > 0), emptyText)
+      }
+    );
+  }
+  let maxBarsPerCol = 1;
+  const allValues = data.flatMap((d) => {
+    if (d.values.length > maxBarsPerCol) {
+      maxBarsPerCol = d.values.length;
+    }
+    return d.values.map((v) => typeof v === "number" ? v : v.value);
+  });
+  const computedMax = allValues.length > 0 ? Math.max(...allValues) : 100;
+  const max = yAxis.max ?? (computedMax > 0 ? computedMax : 100);
+  const steps = yAxis.steps ?? 5;
+  const formatter = yAxis.format ?? ((val) => formatChartValue(val, decimals));
+  const resolvedBarWidth = customBarWidth !== void 0 ? typeof customBarWidth === "number" ? `${customBarWidth}px` : customBarWidth === "sm" || customBarWidth === "md" || customBarWidth === "lg" ? SIZE_WIDTH_MAP[customBarWidth] : customBarWidth : size !== void 0 ? SIZE_WIDTH_MAP[size] : compact ? "var(--stn-chart-bar-width-sm)" : maxBarsPerCol >= 5 ? "var(--stn-chart-bar-width-sm)" : maxBarsPerCol >= 3 ? "var(--stn-chart-bar-width-sm)" : "var(--stn-chart-bar-width-md)";
+  const gridRows = [];
+  for (let i = steps; i >= 0; i--) {
+    const val = max / steps * i;
+    gridRows.push({
+      label: formatter(val),
+      isZero: i === 0
+    });
+  }
+  const gridCols = [];
+  for (let i = 0; i <= steps; i++) {
+    const val = max / steps * i;
+    gridCols.push({
+      label: formatter(val),
+      isZero: i === 0
+    });
+  }
+  const isHighlighted = (idx, item) => {
+    if (controlledHighlight !== void 0) return controlledHighlight === idx;
+    if (internalHighlight !== null) return internalHighlight === idx;
+    return Boolean(item.highlight);
+  };
+  const handleColClick = (item, idx) => {
+    setInternalHighlight(idx);
+    onColumnClick?.(item, idx);
+  };
+  const containerStyle = {
+    ...style,
+    ...height ? { height } : {},
+    ["--stn-chart-bar-width"]: resolvedBarWidth
+  };
+  return /* @__PURE__ */ jsxs65(
+    "div",
+    {
+      className: cn(
+        "stn-chart-bar",
+        isHorizontal && "stn-chart-bar--horizontal",
+        size && `stn-chart-bar--${size}`,
+        !showXAxis && "stn-chart-bar--no-x-axis",
+        !showYAxis && "stn-chart-bar--no-y-axis",
+        !showTooltip && "stn-chart--no-tooltip",
+        className
+      ),
+      style: containerStyle,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx90("div", { className: "stn-chart-bar__body", children: isHorizontal ? (
+          /* ==================== 가로 막대 (Horizontal) ==================== */
+          /* @__PURE__ */ jsxs65(Fragment13, { children: [
+            showXAxis && /* @__PURE__ */ jsx90("div", { className: "stn-chart-bar__grid-v", "aria-hidden": "true", children: gridCols.map((col, cIdx) => /* @__PURE__ */ jsxs65("div", { className: "stn-chart-bar__grid-v-col", children: [
+              /* @__PURE__ */ jsx90(
+                "div",
+                {
+                  className: cn(
+                    "stn-chart-bar__grid-v-line",
+                    col.isZero && "stn-chart-bar__grid-v-line--zero"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx90("span", { className: "stn-chart-bar__grid-v-label", children: col.label })
+            ] }, cIdx)) }),
+            /* @__PURE__ */ jsx90("div", { className: "stn-chart-bar__rows", role: "list", children: data.map((item, idx) => {
+              const active = isHighlighted(idx, item);
+              const isHovered = hoveredIndex === idx;
+              const rawVals = item.values.map((v, vIdx) => {
+                const colorIndex = colorBy === "category" ? idx : vIdx;
+                if (typeof v === "number") {
+                  return {
+                    value: v,
+                    color: resolveChartColor(void 0, colorIndex),
+                    label: legend?.[colorIndex]?.label || (colorBy === "category" ? item.label : `Series ${vIdx + 1}`)
+                  };
+                }
+                return {
+                  value: v.value,
+                  color: resolveChartColor(v.color, colorIndex),
+                  label: v.label || legend?.[colorIndex]?.label || (colorBy === "category" ? item.label : `Series ${vIdx + 1}`)
+                };
+              });
+              const summaryValues = rawVals.map((v) => v.value).join(", ");
+              const isFirstRow = idx === 0;
+              return /* @__PURE__ */ jsxs65(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "stn-chart-bar__row",
+                    compact && "stn-chart-bar__row--compact",
+                    active && "is-active"
+                  ),
+                  onClick: () => handleColClick(item, idx),
+                  onMouseEnter: () => setHoveredIndex(idx),
+                  onMouseLeave: () => setHoveredIndex(null),
+                  onFocus: () => setHoveredIndex(idx),
+                  onBlur: () => setHoveredIndex(null),
+                  "aria-label": `${item.label} (${summaryValues})`,
+                  role: "listitem",
+                  children: [
+                    showYAxis && /* @__PURE__ */ jsx90("span", { className: "stn-chart-bar__row-label", title: item.label, children: item.label }),
+                    /* @__PURE__ */ jsx90("div", { className: "stn-chart-bar__row-track", children: rawVals.map((bar, bIdx) => {
+                      const pct = Math.max(0, Math.min(100, bar.value / max * 100));
+                      return /* @__PURE__ */ jsx90(
+                        "div",
+                        {
+                          className: "stn-chart-bar__item",
+                          style: {
+                            width: `${pct}%`,
+                            backgroundColor: bar.color
+                          }
+                        },
+                        bIdx
+                      );
+                    }) }),
+                    showValue && rawVals.length === 1 && /* @__PURE__ */ jsx90("span", { className: "stn-chart-bar__row-val", children: formatter(rawVals[0].value) }),
+                    showTooltip && isHovered && /* @__PURE__ */ jsxs65(
+                      "div",
+                      {
+                        className: "stn-chart-tooltip",
+                        style: {
+                          left: "50%",
+                          top: isFirstRow ? "100%" : "0px",
+                          transform: isFirstRow ? "translate(-50%, 8px)" : "translate(-50%, -100%)",
+                          marginTop: isFirstRow ? "0px" : "-8px"
+                        },
+                        role: "tooltip",
+                        children: [
+                          /* @__PURE__ */ jsx90("div", { className: "stn-chart-tooltip__header", children: item.label }),
+                          rawVals.map((bar, bIdx) => /* @__PURE__ */ jsxs65("div", { className: "stn-chart-tooltip__row", children: [
+                            /* @__PURE__ */ jsxs65("div", { className: "stn-chart-tooltip__group", children: [
+                              /* @__PURE__ */ jsx90(
+                                "span",
+                                {
+                                  className: "stn-chart-tooltip__dot",
+                                  style: { backgroundColor: bar.color }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx90("span", { className: "stn-chart-tooltip__label", children: bar.label })
+                            ] }),
+                            /* @__PURE__ */ jsx90("span", { className: "stn-chart-tooltip__value", children: formatter(bar.value) })
+                          ] }, bIdx))
+                        ]
+                      }
+                    )
+                  ]
+                },
+                item.id ?? idx
+              );
+            }) })
+          ] })
+        ) : (
+          /* ==================== 세로 막대 (Vertical) ==================== */
+          /* @__PURE__ */ jsxs65(Fragment13, { children: [
+            showYAxis && /* @__PURE__ */ jsx90("div", { className: "stn-chart-bar__grid", "aria-hidden": "true", children: gridRows.map((row, rIdx) => /* @__PURE__ */ jsxs65("div", { className: "stn-chart-bar__grid-row", children: [
+              /* @__PURE__ */ jsx90("span", { className: "stn-chart-bar__axis-label", children: row.label }),
+              /* @__PURE__ */ jsx90(
+                "div",
+                {
+                  className: cn(
+                    "stn-chart-bar__grid-line",
+                    row.isZero && "stn-chart-bar__grid-line--zero"
+                  )
+                }
+              )
+            ] }, rIdx)) }),
+            /* @__PURE__ */ jsx90("div", { className: "stn-chart-bar__columns", role: "list", children: data.map((item, idx) => {
+              const active = isHighlighted(idx, item);
+              const isHovered = hoveredIndex === idx;
+              const rawVals = item.values.map((v, vIdx) => {
+                const colorIndex = colorBy === "category" ? idx : vIdx;
+                if (typeof v === "number") {
+                  return {
+                    value: v,
+                    color: resolveChartColor(void 0, colorIndex),
+                    label: legend?.[colorIndex]?.label || (colorBy === "category" ? item.label : `Series ${vIdx + 1}`)
+                  };
+                }
+                return {
+                  value: v.value,
+                  color: resolveChartColor(v.color, colorIndex),
+                  label: v.label || legend?.[colorIndex]?.label || (colorBy === "category" ? item.label : `Series ${vIdx + 1}`)
+                };
+              });
+              const summaryValues = rawVals.map((v) => v.value).join(", ");
+              return /* @__PURE__ */ jsxs65(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "stn-chart-bar__col",
+                    compact && "stn-chart-bar__col--compact",
+                    active && "is-active"
+                  ),
+                  onClick: () => handleColClick(item, idx),
+                  onMouseEnter: () => setHoveredIndex(idx),
+                  onMouseLeave: () => setHoveredIndex(null),
+                  onFocus: () => setHoveredIndex(idx),
+                  onBlur: () => setHoveredIndex(null),
+                  "aria-label": `${item.label} (${summaryValues})`,
+                  role: "listitem",
+                  children: [
+                    /* @__PURE__ */ jsx90("div", { className: "stn-chart-bar__highlight" }),
+                    /* @__PURE__ */ jsx90("div", { className: "stn-chart-bar__bars-wrap", children: rawVals.map((bar, bIdx) => {
+                      const pct = Math.max(0, Math.min(100, bar.value / max * 100));
+                      return /* @__PURE__ */ jsx90(
+                        "div",
+                        {
+                          className: "stn-chart-bar__item",
+                          style: {
+                            height: `${pct}%`,
+                            backgroundColor: bar.color
+                          }
+                        },
+                        bIdx
+                      );
+                    }) }),
+                    showXAxis && /* @__PURE__ */ jsx90("span", { className: "stn-chart-bar__label", children: item.label }),
+                    showTooltip && isHovered && /* @__PURE__ */ jsxs65(
+                      "div",
+                      {
+                        className: cn(
+                          "stn-chart-tooltip",
+                          idx >= data.length - 2 && data.length > 3 && "stn-chart-tooltip--flip-x",
+                          idx === 0 && "stn-chart-tooltip--align-left"
+                        ),
+                        style: {
+                          left: "50%",
+                          top: "0px"
+                        },
+                        role: "tooltip",
+                        children: [
+                          /* @__PURE__ */ jsx90("div", { className: "stn-chart-tooltip__header", children: item.label }),
+                          rawVals.map((bar, bIdx) => /* @__PURE__ */ jsxs65("div", { className: "stn-chart-tooltip__row", children: [
+                            /* @__PURE__ */ jsxs65("div", { className: "stn-chart-tooltip__group", children: [
+                              /* @__PURE__ */ jsx90(
+                                "span",
+                                {
+                                  className: "stn-chart-tooltip__dot",
+                                  style: { backgroundColor: bar.color }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx90("span", { className: "stn-chart-tooltip__label", children: bar.label })
+                            ] }),
+                            /* @__PURE__ */ jsx90("span", { className: "stn-chart-tooltip__value", children: formatter(bar.value) })
+                          ] }, bIdx))
+                        ]
+                      }
+                    )
+                  ]
+                },
+                item.id ?? idx
+              );
+            }) })
+          ] })
+        ) }),
+        legend && legend.length > 0 && /* @__PURE__ */ jsx90("div", { className: "stn-chart-legend-pill", "aria-label": "\uCC28\uD2B8 \uBC94\uB840", children: legend.map((leg, lIdx) => /* @__PURE__ */ jsxs65("div", { className: "stn-chart-legend-pill__item", children: [
+          /* @__PURE__ */ jsx90(
+            "span",
+            {
+              className: "stn-chart-legend-pill__bar",
+              style: { backgroundColor: resolveChartColor(leg.color, lIdx) }
+            }
+          ),
+          /* @__PURE__ */ jsx90("span", { className: "stn-chart-legend-pill__label", children: leg.label })
+        ] }, lIdx)) })
+      ]
+    }
+  );
+}
+
+// src/components/StnPieChart.tsx
+import {
+  useId as useId18,
+  useState as useState25
+} from "react";
+import { Fragment as Fragment14, jsx as jsx91, jsxs as jsxs66 } from "react/jsx-runtime";
+var DEFAULT_PIE_COLORS = STN_CHART_COLORS;
+var R = 38;
+var CIRCUMFERENCE = 2 * Math.PI * R;
+var STROKE_WIDTH_MAP = {
+  sm: 3,
+  md: 5,
+  lg: 8
+};
+function StnPieChart({
+  data = [],
+  loading = false,
+  emptyText,
+  variant = "gauge",
+  strokeWidth: customStrokeWidth,
+  thickness,
+  showTooltip = true,
+  centerLabel,
+  centerSubLabel,
+  showLegend = true,
+  size = 90,
+  decimals,
+  format,
+  className,
+  style,
+  ...rest
+}) {
+  const filterId = useId18().replace(/:/g, "");
+  const [hoveredIndex, setHoveredIndex] = useState25(null);
+  const hasData = Boolean(data && data.length > 0);
+  if (loading || !hasData) {
+    return /* @__PURE__ */ jsx91(
+      "div",
+      {
+        className: cn("stn-chart-gauge", className),
+        style: { ...style, position: "relative", minWidth: size, minHeight: size },
+        ...rest,
+        children: renderChartState(loading, hasData, emptyText)
+      }
+    );
+  }
+  const strokeInput = customStrokeWidth ?? thickness;
+  const resolvedStrokeSize = typeof strokeInput === "string" && strokeInput in STROKE_WIDTH_MAP ? strokeInput : void 0;
+  const baseStrokeWidth = typeof strokeInput === "number" ? strokeInput : STROKE_WIDTH_MAP[resolvedStrokeSize ?? "md"] ?? 5;
+  const hoverStrokeWidth = baseStrokeWidth + (baseStrokeWidth >= 8 ? 2.5 : 2);
+  const total = data.reduce((acc, cur) => acc + (cur.value || 0), 0);
+  const resolvedTotal = total > 0 ? total : 1;
+  let accumulatedOffset = 0;
+  const segments = data.map((item, idx) => {
+    const ratio = Math.max(0, item.value / resolvedTotal);
+    const segmentLength = ratio * CIRCUMFERENCE;
+    const offset = -accumulatedOffset;
+    accumulatedOffset += segmentLength;
+    const color = resolveChartColor(item.color, idx);
+    return {
+      ...item,
+      color,
+      segmentLength: Number(segmentLength.toFixed(2)),
+      offset: Number(offset.toFixed(2)),
+      ratio
+    };
+  });
+  const containerStyle = {
+    ...style,
+    position: "relative"
+  };
+  const activeSeg = hoveredIndex !== null ? segments[hoveredIndex] : null;
+  return /* @__PURE__ */ jsxs66(
+    "div",
+    {
+      className: cn(
+        "stn-chart-gauge",
+        resolvedStrokeSize && `stn-chart-gauge--${resolvedStrokeSize}`,
+        !showTooltip && "stn-chart--no-tooltip",
+        className
+      ),
+      style: containerStyle,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs66(
+          "svg",
+          {
+            className: "stn-chart-gauge__svg",
+            viewBox: "0 0 90 90",
+            style: { width: size, height: size },
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx91("defs", { children: /* @__PURE__ */ jsx91("filter", { id: `gauge_shadow_${filterId}`, x: "-30%", y: "-30%", width: "160%", height: "160%", children: /* @__PURE__ */ jsx91("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodColor: "var(--stn-opacity-black-30)" }) }) }),
+              /* @__PURE__ */ jsx91(
+                "circle",
+                {
+                  className: "stn-chart-gauge__track",
+                  cx: "45",
+                  cy: "45",
+                  r: R,
+                  style: resolvedStrokeSize ? void 0 : { strokeWidth: baseStrokeWidth }
+                }
+              ),
+              segments.map((seg, sIdx) => {
+                const isHovered = hoveredIndex === sIdx;
+                return /* @__PURE__ */ jsx91(
+                  "circle",
+                  {
+                    className: "stn-chart-gauge__seg",
+                    cx: "45",
+                    cy: "45",
+                    r: R,
+                    stroke: seg.color,
+                    strokeWidth: isHovered ? hoverStrokeWidth : resolvedStrokeSize ? void 0 : baseStrokeWidth,
+                    strokeDasharray: `${seg.segmentLength} ${CIRCUMFERENCE.toFixed(2)}`,
+                    strokeDashoffset: seg.offset,
+                    onMouseEnter: () => setHoveredIndex(sIdx),
+                    onMouseLeave: () => setHoveredIndex(null),
+                    onFocus: () => setHoveredIndex(sIdx),
+                    onBlur: () => setHoveredIndex(null),
+                    tabIndex: 0,
+                    role: "graphics-symbol",
+                    "aria-label": `${seg.label}: ${seg.value}`,
+                    style: {
+                      cursor: showTooltip ? "pointer" : "default",
+                      transition: "stroke-width 0.15s ease",
+                      outline: "none"
+                    }
+                  },
+                  seg.id ?? sIdx
+                );
+              }),
+              variant === "gauge" ? /* @__PURE__ */ jsxs66(Fragment14, { children: [
+                /* @__PURE__ */ jsx91("circle", { className: "stn-chart-gauge__center-outer", cx: "45", cy: "45", r: "31" }),
+                /* @__PURE__ */ jsx91(
+                  "circle",
+                  {
+                    className: "stn-chart-gauge__center-inner",
+                    cx: "45",
+                    cy: "45",
+                    r: "25",
+                    filter: `url(#gauge_shadow_${filterId})`
+                  }
+                ),
+                centerLabel && /* @__PURE__ */ jsx91("text", { className: "stn-chart-gauge__center-text", x: "45", y: "49", children: centerLabel })
+              ] }) : /* @__PURE__ */ jsxs66(Fragment14, { children: [
+                /* @__PURE__ */ jsx91("circle", { className: "stn-chart-gauge__center-outer", cx: "45", cy: "45", r: "30" }),
+                centerLabel && /* @__PURE__ */ jsx91("text", { className: "stn-chart-gauge__center-text", x: "45", y: centerSubLabel ? "46" : "49", children: centerLabel }),
+                centerSubLabel && /* @__PURE__ */ jsx91(
+                  "text",
+                  {
+                    x: "45",
+                    y: "58",
+                    textAnchor: "middle",
+                    fill: "var(--stn-text-secondary)",
+                    fontSize: "8",
+                    fontFamily: "var(--stn-font-body)",
+                    children: centerSubLabel
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        showTooltip && activeSeg && /* @__PURE__ */ jsxs66(
+          "div",
+          {
+            className: "stn-chart-tooltip",
+            style: {
+              left: "50%",
+              top: "0px"
+            },
+            role: "tooltip",
+            children: [
+              /* @__PURE__ */ jsx91("div", { className: "stn-chart-tooltip__header", children: activeSeg.label }),
+              /* @__PURE__ */ jsxs66("div", { className: "stn-chart-tooltip__row", children: [
+                /* @__PURE__ */ jsxs66("div", { className: "stn-chart-tooltip__group", children: [
+                  /* @__PURE__ */ jsx91("span", { className: "stn-chart-tooltip__dot", style: { backgroundColor: activeSeg.color } }),
+                  /* @__PURE__ */ jsx91("span", { className: "stn-chart-tooltip__label", children: "\uC218\uCE58" })
+                ] }),
+                /* @__PURE__ */ jsx91("span", { className: "stn-chart-tooltip__value", children: format ? format(activeSeg.value, activeSeg.ratio) : `${activeSeg.value.toLocaleString()} (${(activeSeg.ratio * 100).toFixed(decimals !== void 0 ? decimals : 1)}%)` })
+              ] })
+            ]
+          }
+        ),
+        showLegend && segments.length > 0 && /* @__PURE__ */ jsx91("div", { className: "stn-chart-gauge-legend", role: "list", children: segments.map((seg, lIdx) => /* @__PURE__ */ jsxs66(
+          "div",
+          {
+            className: "stn-chart-gauge-legend__item",
+            onMouseEnter: () => setHoveredIndex(lIdx),
+            onMouseLeave: () => setHoveredIndex(null),
+            onFocus: () => setHoveredIndex(lIdx),
+            onBlur: () => setHoveredIndex(null),
+            tabIndex: 0,
+            style: { cursor: "pointer", outline: "none" },
+            role: "listitem",
+            children: [
+              /* @__PURE__ */ jsx91(
+                "span",
+                {
+                  className: "stn-chart-gauge-legend__dot",
+                  style: { backgroundColor: seg.color }
+                }
+              ),
+              /* @__PURE__ */ jsx91("span", { className: "stn-chart-gauge-legend__label", children: seg.label })
+            ]
+          },
+          seg.id ?? lIdx
+        )) })
+      ]
+    }
+  );
+}
+var StnGaugeChart = StnPieChart;
+
+// src/components/StnLineChart.tsx
+import {
+  useId as useId19,
+  useRef as useRef11,
+  useState as useState26
+} from "react";
+import { jsx as jsx92, jsxs as jsxs67 } from "react/jsx-runtime";
+var DEFAULT_LINE_COLORS = STN_CHART_COLORS;
+var VIEW_W = 300;
+var VIEW_H = 84;
+var Y_TOP = 8;
+var Y_BOTTOM = 78;
+var STROKE_WIDTH_MAP2 = {
+  sm: 1.5,
+  md: 2,
+  lg: 3
+};
+var DOT_RADIUS_MAP = {
+  sm: 2,
+  md: 2.5,
+  lg: 3.5
+};
+function StnLineChart({
+  data = [],
+  loading = false,
+  emptyText,
+  variant = "line",
+  size = "md",
+  showDots,
+  showPoints,
+  dots,
+  showXAxis = true,
+  showYAxis = true,
+  showTooltip = true,
+  xAxisLabels = [],
+  yAxis = {},
+  legend,
+  height,
+  decimals,
+  format,
+  className,
+  style,
+  ...rest
+}) {
+  const chartId = useId19().replace(/:/g, "");
+  const svgRef = useRef11(null);
+  const [hoverIndex, setHoverIndex] = useState26(null);
+  const valueFormatter = format ?? ((v) => formatChartValue(v, decimals));
+  const hasDots = Boolean(showDots ?? showPoints ?? dots ?? false);
+  const dotRadius = DOT_RADIUS_MAP[size] || 3;
+  const resolvedHeight = height ?? (variant === "sparkline" ? 36 : 180);
+  const seriesList = Array.isArray(data) && data.length > 0 && typeof data[0] === "number" ? [{ data, color: resolveChartColor(void 0, 0) }] : data.map((s, idx) => ({
+    ...s,
+    color: resolveChartColor(s.color, idx)
+  }));
+  const hasData = seriesList.length > 0 && seriesList.some((s) => Array.isArray(s.data) && s.data.length > 0);
+  if (loading || !hasData) {
+    return /* @__PURE__ */ jsx92(
+      "div",
+      {
+        className: cn("stn-chart-line", `stn-chart-line--${size}`, className),
+        style: { ...style, height: resolvedHeight, position: "relative" },
+        ...rest,
+        children: renderChartState(loading, hasData, emptyText)
+      }
+    );
+  }
+  const allNumbers = seriesList.flatMap((s) => s.data);
+  const computedMax = allNumbers.length > 0 ? Math.max(...allNumbers) : 100;
+  const computedMin = allNumbers.length > 0 ? Math.min(...allNumbers) : 0;
+  const max = yAxis.max ?? (computedMax > 0 ? computedMax : 100);
+  const min = yAxis.min ?? (computedMin < 0 ? computedMin : 0);
+  const range = max - min || 1;
+  const xStart = showYAxis ? 38 : 8;
+  const xEnd = 295;
+  const xDist = xEnd - xStart;
+  const yDist = Y_BOTTOM - Y_TOP;
+  const buildPathString = (points) => {
+    if (!points || points.length === 0) return "";
+    const count = points.length;
+    return points.map((val, idx) => {
+      const x = xStart + idx / Math.max(1, count - 1) * xDist;
+      const y = Y_BOTTOM - (val - min) / range * yDist;
+      return `${idx === 0 ? "M" : "L"} ${x.toFixed(1)},${y.toFixed(1)}`;
+    }).join(" ");
+  };
+  const buildAreaPathString = (points) => {
+    const linePath = buildPathString(points);
+    if (!linePath) return "";
+    return `${linePath} L ${xEnd},${Y_BOTTOM} L ${xStart},${Y_BOTTOM} Z`;
+  };
+  const gridYPositions = [6, 16, 26, 36, 46, 56, 66, 78];
+  const strokeWidth = STROKE_WIDTH_MAP2[size] || 2;
+  const containerStyle = {
+    ...style,
+    height: resolvedHeight
+  };
+  const resolvedLegend = legend ?? (seriesList.length > 1 && seriesList.some((s) => s.label) ? seriesList.map((s, idx) => ({
+    label: s.label || `Line ${idx + 1}`,
+    color: resolveChartColor(s.color, idx)
+  })) : []);
+  const pointCount = seriesList[0]?.data.length || 0;
+  const handleMouseMove = (e) => {
+    if (!showTooltip || pointCount <= 0 || !svgRef.current) return;
+    const rect = svgRef.current.getBoundingClientRect();
+    if (rect.width <= 0) return;
+    const svgX = (e.clientX - rect.left) / rect.width * VIEW_W;
+    const clampedX = Math.max(xStart, Math.min(xEnd, svgX));
+    const ratio = (clampedX - xStart) / xDist;
+    const idx = Math.round(ratio * (pointCount - 1));
+    setHoverIndex(Math.max(0, Math.min(pointCount - 1, idx)));
+  };
+  const handleMouseLeave = () => {
+    setHoverIndex(null);
+  };
+  if (variant === "sparkline") {
+    const firstSeries = seriesList[0] || { data: [] };
+    const points = firstSeries.data;
+    const count = points.length;
+    const sW = 126;
+    const sH = 32;
+    const strokeColor = firstSeries.color || DEFAULT_LINE_COLORS[0];
+    const polyPoints = points.map((v, i) => {
+      const x = i / Math.max(1, count - 1) * sW;
+      const y = sH - 4 - (v - min) / range * (sH - 8);
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    }).join(" ");
+    const areaPoints = `0,${sH} ${polyPoints} ${sW},${sH}`;
+    const lastPoint = points[points.length - 1] ?? 0;
+    const lastX = sW - 2;
+    const lastY = sH - 4 - (lastPoint - min) / range * (sH - 8);
+    return /* @__PURE__ */ jsx92(
+      "div",
+      {
+        className: cn("stn-chart-sparkline", `stn-chart-line--${size}`, className),
+        style: { ...containerStyle, position: "relative", overflow: "hidden" },
+        ...rest,
+        children: /* @__PURE__ */ jsxs67(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            viewBox: `0 0 ${sW} ${sH}`,
+            style: { display: "block" },
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx92("defs", { children: /* @__PURE__ */ jsxs67("linearGradient", { id: `spark_grad_${chartId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ jsx92("stop", { offset: "0%", stopColor: strokeColor, stopOpacity: "0.45" }),
+                /* @__PURE__ */ jsx92("stop", { offset: "100%", stopColor: strokeColor, stopOpacity: "0" })
+              ] }) }),
+              /* @__PURE__ */ jsx92("polygon", { points: areaPoints, fill: `url(#spark_grad_${chartId})` }),
+              /* @__PURE__ */ jsx92(
+                "polyline",
+                {
+                  points: polyPoints,
+                  fill: "none",
+                  stroke: strokeColor,
+                  strokeWidth,
+                  strokeLinejoin: "round",
+                  strokeLinecap: "round",
+                  vectorEffect: "non-scaling-stroke"
+                }
+              ),
+              /* @__PURE__ */ jsx92("circle", { cx: lastX, cy: lastY, r: "3", fill: strokeColor })
+            ]
+          }
+        )
+      }
+    );
+  }
+  const hoverSvgX = hoverIndex !== null && pointCount > 1 ? xStart + hoverIndex / (pointCount - 1) * xDist : null;
+  const hoverPct = hoverSvgX !== null ? hoverSvgX / VIEW_W * 100 : 0;
+  const isNearRight = hoverPct > 68;
+  const isNearLeft = hoverPct < 15;
+  return /* @__PURE__ */ jsxs67(
+    "div",
+    {
+      className: cn(
+        "stn-chart-line",
+        `stn-chart-line--${size}`,
+        hasDots ? "stn-chart-line--dots" : "stn-chart-line--no-dots",
+        !showXAxis && "stn-chart-line--no-x-axis",
+        !showYAxis && "stn-chart-line--no-y-axis",
+        !showTooltip && "stn-chart--no-tooltip",
+        className
+      ),
+      style: containerStyle,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs67("div", { className: "stn-chart-line__body", children: [
+          showYAxis && /* @__PURE__ */ jsx92("div", { className: "stn-chart-line__axis-y", "aria-hidden": "true", children: (yAxis.labels && yAxis.labels.length > 0 ? yAxis.labels : [max, min + (max - min) * 0.66, min + (max - min) * 0.33, min].map((v) => valueFormatter(v))).map((lbl, idx) => /* @__PURE__ */ jsx92("span", { children: lbl }, idx)) }),
+          /* @__PURE__ */ jsxs67("div", { className: "stn-chart-line__plot-area", style: { position: "relative", width: "100%", flex: "1 1 0%", minHeight: 0 }, children: [
+            /* @__PURE__ */ jsxs67(
+              "svg",
+              {
+                ref: svgRef,
+                className: "stn-chart-line__svg",
+                viewBox: `0 0 ${VIEW_W} ${VIEW_H}`,
+                preserveAspectRatio: "none",
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx92("defs", { children: variant === "area" && seriesList.map((series, sIdx) => {
+                    const color = series.color || DEFAULT_LINE_COLORS[sIdx % DEFAULT_LINE_COLORS.length];
+                    return /* @__PURE__ */ jsxs67(
+                      "linearGradient",
+                      {
+                        id: `line_area_grad_${chartId}_${sIdx}`,
+                        x1: "0",
+                        y1: "0",
+                        x2: "0",
+                        y2: "1",
+                        children: [
+                          /* @__PURE__ */ jsx92("stop", { offset: "0%", stopColor: color, stopOpacity: "0.35" }),
+                          /* @__PURE__ */ jsx92("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+                        ]
+                      },
+                      `grad-${sIdx}`
+                    );
+                  }) }),
+                  gridYPositions.map((yPos, idx) => {
+                    const isZero = yPos === Y_BOTTOM || idx === 1;
+                    return /* @__PURE__ */ jsx92(
+                      "line",
+                      {
+                        x1: xStart,
+                        y1: yPos,
+                        x2: xEnd,
+                        y2: yPos,
+                        stroke: isZero ? "var(--stn-chart-zero-line)" : "var(--stn-chart-grid-line)",
+                        strokeDasharray: isZero ? void 0 : "2 2"
+                      },
+                      idx
+                    );
+                  }),
+                  variant === "area" && seriesList.map((series, sIdx) => /* @__PURE__ */ jsx92(
+                    "path",
+                    {
+                      d: buildAreaPathString(series.data),
+                      fill: `url(#line_area_grad_${chartId}_${sIdx})`
+                    },
+                    `area-${series.id ?? sIdx}`
+                  )),
+                  seriesList.map((series, sIdx) => {
+                    const color = series.color || DEFAULT_LINE_COLORS[sIdx % DEFAULT_LINE_COLORS.length];
+                    return /* @__PURE__ */ jsx92(
+                      "path",
+                      {
+                        className: "stn-chart-line__path",
+                        d: buildPathString(series.data),
+                        style: { stroke: color },
+                        vectorEffect: "non-scaling-stroke"
+                      },
+                      `line-${series.id ?? sIdx}`
+                    );
+                  }),
+                  showTooltip && hoverSvgX !== null && hoverIndex !== null && /* @__PURE__ */ jsx92("g", { className: "stn-chart-line__hover-group", children: /* @__PURE__ */ jsx92(
+                    "line",
+                    {
+                      x1: hoverSvgX,
+                      y1: Y_TOP,
+                      x2: hoverSvgX,
+                      y2: Y_BOTTOM,
+                      stroke: "var(--stn-chart-highlight-border)",
+                      strokeDasharray: "2 2",
+                      strokeWidth: "1",
+                      vectorEffect: "non-scaling-stroke"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx92(
+                    "rect",
+                    {
+                      x: "0",
+                      y: "0",
+                      width: VIEW_W,
+                      height: VIEW_H,
+                      fill: "transparent",
+                      style: { cursor: showTooltip ? "crosshair" : "default" }
+                    }
+                  )
+                ]
+              }
+            ),
+            hasDots && /* @__PURE__ */ jsx92("div", { className: "stn-chart-line__dots", "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: seriesList.map((series, sIdx) => {
+              const color = series.color || DEFAULT_LINE_COLORS[sIdx % DEFAULT_LINE_COLORS.length];
+              const count = series.data.length;
+              return series.data.map((val, pIdx) => {
+                const xPct = (xStart + pIdx / Math.max(1, count - 1) * xDist) / VIEW_W * 100;
+                const yPct = (Y_BOTTOM - (val - min) / range * yDist) / VIEW_H * 100;
+                const isHoveredPoint = hoverIndex === pIdx;
+                const r = isHoveredPoint ? dotRadius + 1.2 : dotRadius;
+                return /* @__PURE__ */ jsx92(
+                  "span",
+                  {
+                    className: cn("stn-chart-line__dot", isHoveredPoint && "is-active"),
+                    style: {
+                      position: "absolute",
+                      left: `${xPct}%`,
+                      top: `${yPct}%`,
+                      width: `${r * 2}px`,
+                      height: `${r * 2}px`,
+                      borderRadius: "var(--stn-radius-full)",
+                      backgroundColor: color,
+                      transform: "translate(-50%, -50%)",
+                      boxShadow: isHoveredPoint ? "0 0 0 2px var(--stn-surface-primary)" : void 0,
+                      display: "inline-block"
+                    }
+                  },
+                  `dot-${sIdx}-${pIdx}`
+                );
+              });
+            }) })
+          ] }),
+          showXAxis && xAxisLabels.length > 0 && /* @__PURE__ */ jsx92("div", { className: "stn-chart-line__axis-x", "aria-hidden": "true", children: xAxisLabels.map((lbl, idx) => /* @__PURE__ */ jsx92("span", { children: lbl }, idx)) }),
+          showTooltip && hoverIndex !== null && hoverSvgX !== null && /* @__PURE__ */ jsxs67(
+            "div",
+            {
+              className: cn(
+                "stn-chart-tooltip",
+                isNearRight && "stn-chart-tooltip--flip-x",
+                isNearLeft && "stn-chart-tooltip--align-left"
+              ),
+              style: {
+                left: `${hoverPct}%`,
+                top: "10px"
+              },
+              role: "tooltip",
+              children: [
+                xAxisLabels[hoverIndex] && /* @__PURE__ */ jsx92("div", { className: "stn-chart-tooltip__header", children: xAxisLabels[hoverIndex] }),
+                seriesList.map((series, sIdx) => {
+                  const val = series.data[hoverIndex];
+                  if (val === void 0) return null;
+                  const color = series.color || DEFAULT_LINE_COLORS[sIdx % DEFAULT_LINE_COLORS.length];
+                  return /* @__PURE__ */ jsxs67("div", { className: "stn-chart-tooltip__row", children: [
+                    /* @__PURE__ */ jsxs67("div", { className: "stn-chart-tooltip__group", children: [
+                      /* @__PURE__ */ jsx92("span", { className: "stn-chart-tooltip__dot", style: { backgroundColor: color } }),
+                      /* @__PURE__ */ jsx92("span", { className: "stn-chart-tooltip__label", children: series.label || `Series ${sIdx + 1}` })
+                    ] }),
+                    /* @__PURE__ */ jsx92("span", { className: "stn-chart-tooltip__value", children: valueFormatter(val) })
+                  ] }, sIdx);
+                })
+              ]
+            }
+          )
+        ] }),
+        resolvedLegend.length > 0 && /* @__PURE__ */ jsx92("div", { className: "stn-chart-legend-pill", "aria-label": "\uB77C\uC778 \uCC28\uD2B8 \uBC94\uB840", children: resolvedLegend.map((item, idx) => /* @__PURE__ */ jsxs67("div", { className: "stn-chart-legend-pill__item", children: [
+          /* @__PURE__ */ jsx92(
+            "span",
+            {
+              className: "stn-chart-legend-pill__bar",
+              style: { backgroundColor: item.color }
+            }
+          ),
+          /* @__PURE__ */ jsx92("span", { className: "stn-chart-legend-pill__label", children: item.label })
+        ] }, idx)) })
+      ]
+    }
+  );
+}
+
+// src/components/StnComboChart.tsx
+import {
+  useId as useId20,
+  useState as useState27
+} from "react";
+import { jsx as jsx93, jsxs as jsxs68 } from "react/jsx-runtime";
+var BAR_WIDTH_MAP = {
+  sm: "var(--stn-chart-combo-bar-width-sm)",
+  md: "var(--stn-chart-combo-bar-width-md)",
+  lg: "var(--stn-chart-combo-bar-width-lg)"
+};
+var DOT_RADIUS_MAP2 = {
+  sm: 2,
+  md: 2.5,
+  lg: 3.5
+};
+var VIEW_W2 = 300;
+var VIEW_H2 = 100;
+var Y_TOP2 = 8;
+var Y_BOTTOM2 = 92;
+function StnComboChart({
+  data = [],
+  loading = false,
+  emptyText,
+  lines = [],
+  size = "md",
+  showDots = false,
+  showXAxis = true,
+  showLeftYAxis = true,
+  showRightYAxis: controlledShowRightYAxis,
+  showTooltip = true,
+  leftYAxis = {},
+  rightYAxis,
+  legend,
+  height = 220,
+  barWidth: customBarWidth,
+  highlightIndex: controlledHighlight,
+  onColumnClick,
+  decimals,
+  className,
+  style,
+  ...rest
+}) {
+  const chartId = useId20().replace(/:/g, "");
+  const [internalHighlight, setInternalHighlight] = useState27(null);
+  const [hoverIndex, setHoverIndex] = useState27(null);
+  const hasData = Boolean(data && data.length > 0);
+  if (loading || !hasData) {
+    return /* @__PURE__ */ jsx93(
+      "div",
+      {
+        className: cn("stn-chart-combo", `stn-chart-combo--${size}`, className),
+        style: { ...style, height, position: "relative" },
+        ...rest,
+        children: renderChartState(loading, hasData, emptyText)
+      }
+    );
+  }
+  const showRightYAxis = controlledShowRightYAxis ?? Boolean(rightYAxis);
+  const hasRightAxis = Boolean(rightYAxis);
+  const parsedData = data.map((d) => {
+    let rawVals = [];
+    if (d.bar !== void 0) {
+      rawVals = [{ value: d.bar, color: resolveChartColor(void 0, 0), label: "Bar" }];
+    } else if (d.barValues !== void 0) {
+      if (typeof d.barValues === "number") {
+        rawVals = [{ value: d.barValues, color: resolveChartColor(void 0, 0), label: "Bar" }];
+      } else if (Array.isArray(d.barValues)) {
+        rawVals = d.barValues.map((v, vIdx) => {
+          if (typeof v === "number") {
+            return { value: v, color: resolveChartColor(void 0, vIdx), label: `Bar ${vIdx + 1}` };
+          }
+          return {
+            value: v.value,
+            color: resolveChartColor(v.color, vIdx),
+            label: v.label || `Bar ${vIdx + 1}`
+          };
+        });
+      }
+    }
+    return {
+      ...d,
+      bars: rawVals
+    };
+  });
+  const colCount = parsedData.length;
+  const safeLines = lines.map((l, lIdx) => ({
+    ...l,
+    color: resolveChartColor(l.color, (lIdx + 1) % DEFAULT_LINE_COLORS.length),
+    data: colCount > 0 && l.data.length > colCount ? l.data.slice(0, colCount) : l.data
+  }));
+  const allBarValues = parsedData.flatMap((d) => d.bars.map((b) => b.value));
+  const leftLineValues = safeLines.filter((l) => (l.yAxis ?? "left") === "left").flatMap((l) => l.data);
+  const rightLineValues = safeLines.filter((l) => l.yAxis === "right").flatMap((l) => l.data);
+  const allLeftValues = [...allBarValues, ...leftLineValues];
+  const computedLeftMax = allLeftValues.length > 0 ? Math.max(...allLeftValues) : 100;
+  const computedLeftMin = allLeftValues.length > 0 ? Math.min(...allLeftValues) : 0;
+  const leftMax = leftYAxis.max ?? (computedLeftMax > 0 ? computedLeftMax : 100);
+  const leftMin = leftYAxis.min ?? (computedLeftMin < 0 ? computedLeftMin : 0);
+  const leftRange = leftMax - leftMin || 1;
+  const leftSteps = leftYAxis.steps ?? 4;
+  const leftFormatter = leftYAxis.format ?? ((val) => `${formatChartValue(val, decimals)}${leftYAxis.unit ?? ""}`);
+  const computedRightMax = rightLineValues.length > 0 ? Math.max(...rightLineValues) : 100;
+  const computedRightMin = rightLineValues.length > 0 ? Math.min(...rightLineValues) : 0;
+  const rightMax = rightYAxis?.max ?? (computedRightMax > 0 ? computedRightMax : 100);
+  const rightMin = rightYAxis?.min ?? (computedRightMin < 0 ? computedRightMin : 0);
+  const rightRange = rightMax - rightMin || 1;
+  const rightSteps = rightYAxis?.steps ?? leftSteps;
+  const rightFormatter = rightYAxis?.format ?? ((val) => `${formatChartValue(val, decimals)}${rightYAxis?.unit ?? ""}`);
+  const resolvedBarWidth = customBarWidth !== void 0 ? typeof customBarWidth === "number" ? `${customBarWidth}px` : customBarWidth === "sm" || customBarWidth === "md" || customBarWidth === "lg" ? BAR_WIDTH_MAP[customBarWidth] : customBarWidth : BAR_WIDTH_MAP[size] || "var(--stn-chart-combo-bar-width-md)";
+  const dotRadius = DOT_RADIUS_MAP2[size] || 2.5;
+  const leftGridRows = [];
+  if (leftYAxis.labels && leftYAxis.labels.length > 0) {
+    leftYAxis.labels.forEach((lbl, idx) => {
+      leftGridRows.push({ label: lbl, isZero: idx === leftYAxis.labels.length - 1 });
+    });
+  } else {
+    for (let i = leftSteps; i >= 0; i--) {
+      const rawVal = leftMin + leftRange / leftSteps * i;
+      const val = Math.abs(rawVal - Math.round(rawVal)) < 1e-9 ? Math.round(rawVal) : Number(rawVal.toFixed(6));
+      leftGridRows.push({
+        label: leftFormatter(val),
+        isZero: val === 0
+      });
+    }
+  }
+  const rightGridRows = [];
+  if (hasRightAxis) {
+    if (rightYAxis?.labels && rightYAxis.labels.length > 0) {
+      rightGridRows.push(...rightYAxis.labels);
+    } else {
+      for (let i = rightSteps; i >= 0; i--) {
+        const rawVal = rightMin + rightRange / rightSteps * i;
+        const val = Math.abs(rawVal - Math.round(rawVal)) < 1e-9 ? Math.round(rawVal) : Number(rawVal.toFixed(6));
+        rightGridRows.push(rightFormatter(val));
+      }
+    }
+  }
+  const colW = colCount > 0 ? VIEW_W2 / colCount : VIEW_W2;
+  const getLineX = (index) => (index + 0.5) * colW;
+  const getLineY = (val, isRightAxis) => {
+    const curMin = isRightAxis ? rightMin : leftMin;
+    const curRange = isRightAxis ? rightRange : leftRange;
+    const pct = (val - curMin) / curRange;
+    return Y_BOTTOM2 - pct * (Y_BOTTOM2 - Y_TOP2);
+  };
+  const buildPathString = (points, isRightAxis) => {
+    if (!points || points.length === 0) return "";
+    return points.map((val, idx) => {
+      const x = getLineX(idx);
+      const y = getLineY(val, isRightAxis);
+      return `${idx === 0 ? "M" : "L"} ${x.toFixed(1)},${y.toFixed(1)}`;
+    }).join(" ");
+  };
+  const buildAreaPathString = (points, isRightAxis) => {
+    const linePath = buildPathString(points, isRightAxis);
+    if (!linePath || points.length === 0) return "";
+    const startX = getLineX(0);
+    const endX = getLineX(points.length - 1);
+    return `${linePath} L ${endX.toFixed(1)},${Y_BOTTOM2} L ${startX.toFixed(1)},${Y_BOTTOM2} Z`;
+  };
+  const resolvedLegend = legend ?? [
+    ...(parsedData[0]?.bars.length ?? 0) > 0 ? parsedData[0].bars.map((b, bIdx) => ({
+      label: b.label || (bIdx === 0 ? "\uB9C9\uB300" : `\uB9C9\uB300 ${bIdx + 1}`),
+      color: b.color || DEFAULT_BAR_COLORS[bIdx % DEFAULT_BAR_COLORS.length],
+      type: "bar"
+    })) : [],
+    ...safeLines.map((l, lIdx) => ({
+      label: l.label || `\uC120 ${lIdx + 1}`,
+      color: l.color || DEFAULT_LINE_COLORS[(lIdx + 1) % DEFAULT_LINE_COLORS.length],
+      type: "line"
+    }))
+  ];
+  const isHighlighted = (idx, item) => {
+    if (controlledHighlight !== void 0) return controlledHighlight === idx;
+    if (internalHighlight !== null) return internalHighlight === idx;
+    return Boolean(item.highlight);
+  };
+  const handleColClick = (item, idx) => {
+    setInternalHighlight(idx);
+    onColumnClick?.(item, idx);
+  };
+  const containerStyle = {
+    ...style,
+    height,
+    ["--stn-chart-combo-bar-width"]: resolvedBarWidth
+  };
+  const hoverGuideX = hoverIndex !== null ? getLineX(hoverIndex) : null;
+  return /* @__PURE__ */ jsxs68(
+    "div",
+    {
+      className: cn(
+        "stn-chart-combo",
+        `stn-chart-combo--${size}`,
+        !showXAxis && "stn-chart-combo--no-x-axis",
+        !showLeftYAxis && "stn-chart-combo--no-left-y-axis",
+        (!showRightYAxis || !hasRightAxis) && "stn-chart-combo--no-right-y-axis",
+        !showTooltip && "stn-chart--no-tooltip",
+        className
+      ),
+      style: containerStyle,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs68("div", { className: "stn-chart-combo__body", children: [
+          showLeftYAxis && /* @__PURE__ */ jsx93("div", { className: "stn-chart-combo__axis-y-left", "aria-hidden": "true", children: leftGridRows.map((row, rIdx) => /* @__PURE__ */ jsx93("span", { children: row.label }, rIdx)) }),
+          showRightYAxis && hasRightAxis && /* @__PURE__ */ jsx93("div", { className: "stn-chart-combo__axis-y-right", "aria-hidden": "true", children: rightGridRows.map((lbl, rIdx) => /* @__PURE__ */ jsx93("span", { children: lbl }, rIdx)) }),
+          /* @__PURE__ */ jsx93("div", { className: "stn-chart-combo__grid", "aria-hidden": "true", children: leftGridRows.map((row, rIdx) => /* @__PURE__ */ jsx93("div", { className: "stn-chart-combo__grid-row", children: /* @__PURE__ */ jsx93(
+            "div",
+            {
+              className: cn(
+                "stn-chart-combo__grid-line",
+                row.isZero && "stn-chart-combo__grid-line--zero"
+              )
+            }
+          ) }, rIdx)) }),
+          /* @__PURE__ */ jsxs68("div", { className: "stn-chart-combo__content", children: [
+            /* @__PURE__ */ jsx93("div", { className: "stn-chart-combo__columns", role: "list", children: parsedData.map((item, idx) => {
+              const active = isHighlighted(idx, item);
+              return /* @__PURE__ */ jsxs68(
+                "button",
+                {
+                  type: "button",
+                  className: cn("stn-chart-combo__col", active && "is-active"),
+                  onClick: () => handleColClick(item, idx),
+                  onMouseEnter: () => setHoverIndex(idx),
+                  onMouseLeave: () => setHoverIndex(null),
+                  "aria-label": item.label,
+                  role: "listitem",
+                  children: [
+                    /* @__PURE__ */ jsx93("div", { className: "stn-chart-combo__highlight" }),
+                    /* @__PURE__ */ jsx93("div", { className: "stn-chart-combo__bars-wrap", children: item.bars.map((b, bIdx) => {
+                      const pct = Math.max(0, Math.min(100, (b.value - leftMin) / leftRange * 100));
+                      return /* @__PURE__ */ jsx93(
+                        "div",
+                        {
+                          className: "stn-chart-combo__bar",
+                          style: {
+                            height: `${pct}%`,
+                            backgroundColor: b.color
+                          }
+                        },
+                        bIdx
+                      );
+                    }) })
+                  ]
+                },
+                item.id ?? idx
+              );
+            }) }),
+            /* @__PURE__ */ jsxs68(
+              "svg",
+              {
+                className: "stn-chart-combo__svg-overlay",
+                viewBox: `0 0 ${VIEW_W2} ${VIEW_H2}`,
+                preserveAspectRatio: "none",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx93("defs", { children: safeLines.map((series, sIdx) => {
+                    if (!series.area) return null;
+                    const color = series.color || DEFAULT_LINE_COLORS[(sIdx + 1) % DEFAULT_LINE_COLORS.length];
+                    return /* @__PURE__ */ jsxs68(
+                      "linearGradient",
+                      {
+                        id: `combo_area_grad_${chartId}_${sIdx}`,
+                        x1: "0",
+                        y1: "0",
+                        x2: "0",
+                        y2: "1",
+                        children: [
+                          /* @__PURE__ */ jsx93("stop", { offset: "0%", stopColor: color, stopOpacity: "0.32" }),
+                          /* @__PURE__ */ jsx93("stop", { offset: "100%", stopColor: color, stopOpacity: "0.0" })
+                        ]
+                      },
+                      `grad-${sIdx}`
+                    );
+                  }) }),
+                  safeLines.map((series, sIdx) => {
+                    if (!series.area) return null;
+                    const isRight = series.yAxis === "right";
+                    return /* @__PURE__ */ jsx93(
+                      "path",
+                      {
+                        d: buildAreaPathString(series.data, isRight),
+                        fill: `url(#combo_area_grad_${chartId}_${sIdx})`
+                      },
+                      `area-${series.id ?? sIdx}`
+                    );
+                  }),
+                  safeLines.map((series, sIdx) => {
+                    const color = series.color || DEFAULT_LINE_COLORS[(sIdx + 1) % DEFAULT_LINE_COLORS.length];
+                    const isRight = series.yAxis === "right";
+                    return /* @__PURE__ */ jsx93(
+                      "path",
+                      {
+                        className: "stn-chart-combo__path",
+                        d: buildPathString(series.data, isRight),
+                        style: { stroke: color },
+                        vectorEffect: "non-scaling-stroke"
+                      },
+                      `line-${series.id ?? sIdx}`
+                    );
+                  }),
+                  showTooltip && hoverGuideX !== null && /* @__PURE__ */ jsx93("g", { className: "stn-chart-line__hover-group", children: /* @__PURE__ */ jsx93(
+                    "line",
+                    {
+                      x1: hoverGuideX,
+                      y1: Y_TOP2,
+                      x2: hoverGuideX,
+                      y2: Y_BOTTOM2,
+                      stroke: "var(--stn-chart-highlight-border)",
+                      strokeDasharray: "2 2",
+                      strokeWidth: "1",
+                      vectorEffect: "non-scaling-stroke"
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx93("div", { className: "stn-chart-combo__dots-layer", "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 3 }, children: safeLines.map((series, sIdx) => {
+              const shouldShowDots = series.showDots ?? showDots;
+              if (!shouldShowDots) return null;
+              const color = series.color || DEFAULT_LINE_COLORS[(sIdx + 1) % DEFAULT_LINE_COLORS.length];
+              const isRight = series.yAxis === "right";
+              return series.data.map((val, pIdx) => {
+                const xPct = getLineX(pIdx) / VIEW_W2 * 100;
+                const yPct = getLineY(val, isRight) / VIEW_H2 * 100;
+                const isHovered = hoverIndex === pIdx;
+                const r = isHovered ? dotRadius + 1.2 : dotRadius;
+                return /* @__PURE__ */ jsx93(
+                  "span",
+                  {
+                    className: cn("stn-chart-line__dot", isHovered && "is-active"),
+                    style: {
+                      position: "absolute",
+                      left: `${xPct}%`,
+                      top: `${yPct}%`,
+                      width: `${r * 2}px`,
+                      height: `${r * 2}px`,
+                      borderRadius: "var(--stn-radius-full)",
+                      backgroundColor: color,
+                      transform: "translate(-50%, -50%)",
+                      boxShadow: isHovered ? "0 0 0 2px var(--stn-surface-primary)" : void 0,
+                      display: "inline-block"
+                    }
+                  },
+                  `combo-dot-${sIdx}-${pIdx}`
+                );
+              });
+            }) }),
+            showTooltip && hoverIndex !== null && parsedData[hoverIndex] && (() => {
+              const colPct = (hoverIndex + 0.5) / colCount * 100;
+              const isNearRight = colPct > 68;
+              const isNearLeft = colPct < 15;
+              return /* @__PURE__ */ jsxs68(
+                "div",
+                {
+                  className: cn(
+                    "stn-chart-tooltip",
+                    isNearRight && "stn-chart-tooltip--flip-x",
+                    isNearLeft && "stn-chart-tooltip--align-left"
+                  ),
+                  style: {
+                    left: `${colPct}%`,
+                    top: "0px"
+                  },
+                  role: "tooltip",
+                  children: [
+                    /* @__PURE__ */ jsx93("div", { className: "stn-chart-tooltip__header", children: parsedData[hoverIndex].label }),
+                    parsedData[hoverIndex].bars.map((b, bIdx) => /* @__PURE__ */ jsxs68("div", { className: "stn-chart-tooltip__row", children: [
+                      /* @__PURE__ */ jsxs68("div", { className: "stn-chart-tooltip__group", children: [
+                        /* @__PURE__ */ jsx93(
+                          "span",
+                          {
+                            className: "stn-chart-tooltip__bar-mark",
+                            style: {
+                              backgroundColor: b.color
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx93("span", { className: "stn-chart-tooltip__label", children: b.label })
+                      ] }),
+                      /* @__PURE__ */ jsx93("span", { className: "stn-chart-tooltip__value", children: leftFormatter(b.value) })
+                    ] }, `tip-bar-${bIdx}`)),
+                    safeLines.map((series, sIdx) => {
+                      const val = series.data[hoverIndex];
+                      if (val === void 0) return null;
+                      const color = series.color || DEFAULT_LINE_COLORS[(sIdx + 1) % DEFAULT_LINE_COLORS.length];
+                      const isRight = series.yAxis === "right";
+                      const formatter = isRight ? rightFormatter : leftFormatter;
+                      return /* @__PURE__ */ jsxs68("div", { className: "stn-chart-tooltip__row", children: [
+                        /* @__PURE__ */ jsxs68("div", { className: "stn-chart-tooltip__group", children: [
+                          /* @__PURE__ */ jsx93("span", { className: "stn-chart-tooltip__dot", style: { backgroundColor: color } }),
+                          /* @__PURE__ */ jsx93("span", { className: "stn-chart-tooltip__label", children: series.label || `\uC120 ${sIdx + 1}` })
+                        ] }),
+                        /* @__PURE__ */ jsx93("span", { className: "stn-chart-tooltip__value", children: formatter(val) })
+                      ] }, `tip-line-${sIdx}`);
+                    })
+                  ]
+                }
+              );
+            })()
+          ] }),
+          showXAxis && /* @__PURE__ */ jsx93("div", { className: "stn-chart-combo__axis-x", "aria-hidden": "true", children: parsedData.map((item, idx) => /* @__PURE__ */ jsx93("span", { className: "stn-chart-combo__axis-x-item", title: item.label, children: item.label }, item.id ?? idx)) })
+        ] }),
+        resolvedLegend.length > 0 && /* @__PURE__ */ jsx93("div", { className: "stn-chart-legend-pill", "aria-label": "\uBCF5\uD569 \uCC28\uD2B8 \uBC94\uB840", children: resolvedLegend.map((item, idx) => /* @__PURE__ */ jsxs68("div", { className: "stn-chart-legend-pill__item", children: [
+          item.type === "line" ? /* @__PURE__ */ jsx93(
+            "span",
+            {
+              className: "stn-chart-legend-pill__line-marker",
+              style: { backgroundColor: item.color },
+              children: /* @__PURE__ */ jsx93(
+                "span",
+                {
+                  className: "stn-chart-legend-pill__line-dot",
+                  style: { backgroundColor: item.color }
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx93(
+            "span",
+            {
+              className: "stn-chart-legend-pill__bar",
+              style: { backgroundColor: item.color }
+            }
+          ),
+          /* @__PURE__ */ jsx93("span", { className: "stn-chart-legend-pill__label", children: item.label })
+        ] }, idx)) })
+      ]
+    }
+  );
+}
 export {
   AlertCenterDashboard,
   AlertCenterPageScaffold,
   DEFAULT_3D_GRAPH_LINKS,
   DEFAULT_3D_GRAPH_NODES,
+  DEFAULT_BAR_COLORS,
+  DEFAULT_CHART_COLORS,
+  DEFAULT_LINE_COLORS,
+  DEFAULT_PIE_COLORS,
   DashboardPageScaffold,
   Divider,
   LoginPageScaffold,
@@ -11283,6 +12812,8 @@ export {
   PubDisabilityStatusList,
   PubTop5EquipmentBars,
   PubTrafficTop5Bars,
+  SEVERITY_COLOR_TOKENS,
+  STATUS_COLOR_TOKENS,
   STN_ALERT_CENTER_DASHBOARD_USAGE,
   STN_ALERT_CENTER_DASHBOARD_WIDGETS,
   STN_ALERT_CENTER_DEMO_ALERTS2 as STN_ALERT_CENTER_DEMO_ALERTS,
@@ -11294,6 +12825,8 @@ export {
   STN_ALERT_CENTER_TAB_IDS,
   STN_ALERT_CENTER_USAGE,
   STN_ALERT_CENTER_USAGE_HTML,
+  STN_CHART_COLORS,
+  STN_CHART_STATUS_COLORS,
   STN_DATE_PICKER_INTRO,
   STN_DATE_PICKER_KO_NAME,
   STN_DATE_PICKER_NAME,
@@ -11402,6 +12935,7 @@ export {
   StnAlertCenterDocPreview,
   StnAlertCenterPanel,
   StnBadge,
+  StnBarChart,
   StnBreadcrumb,
   StnButton,
   StnCard,
@@ -11411,6 +12945,7 @@ export {
   StnCheckbox,
   StnChip,
   StnCircularProgress,
+  StnComboChart,
   StnContainer,
   StnContext,
   StnDashboard,
@@ -11427,6 +12962,9 @@ export {
   StnEventBanner,
   StnFloatingToolbar,
   StnFloatingToolbarPreset,
+  StnGaugeChart,
+  StnGradeRow,
+  StnGradeRowList,
   StnGrid,
   StnHeader,
   StnHeaderContextTitle,
@@ -11450,6 +12988,7 @@ export {
   StnLayerDim,
   StnLayerModal,
   StnLayerShell,
+  StnLineChart,
   StnListViewLayout,
   StnListViewLayoutBody,
   StnListViewLayoutContent,
@@ -11484,6 +13023,7 @@ export {
   StnPageScaffoldRegion,
   StnPageScaffoldRoot,
   StnPagination,
+  StnPieChart,
   StnPopup,
   StnProgressBar,
   StnProvider,
@@ -11512,10 +13052,14 @@ export {
   StnSideNavigation,
   StnSlider,
   StnStack,
+  StnStatCard,
+  StnStatGroup,
   StnStatus,
   StnStatusDot,
   StnStatusDotGroup,
   StnStatusFlow,
+  StnStatusItem,
+  StnStatusList,
   StnStatusSeverity,
   StnStatusSwitch,
   StnSwitch,
@@ -11581,6 +13125,7 @@ export {
   cn,
   collectExpandableIds,
   flattenStnTree,
+  formatChartValue,
   formatStnDateRangeFieldValue3 as formatStnDateRangeFieldValue,
   formatStnHeaderTitleDate,
   formatStnHeaderTitleTime,
@@ -11589,6 +13134,8 @@ export {
   getStnWidgetKind,
   isStnWidgetKindSlug,
   parseStnDateRangeFieldValue2 as parseStnDateRangeFieldValue,
+  renderChartState,
+  resolveChartColor,
   resolveStnWidgetBackground2 as resolveStnWidgetBackground,
   resolveSystemIconSrcFromName3 as resolveSystemIconSrcFromName,
   stnWidgetSampleUrl,