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

package/dist/index.js

@@ -4,27 +4,56 @@ function cn(...parts) {
 }
 
 // src/paginationRange.ts
-function buildPaginationItems(page, pageCount, siblingCount = 1) {
-  if (pageCount < 1) return [];
-  if (pageCount === 1) return [1];
-  const current = Math.min(Math.max(1, page), pageCount);
-  const range = (start, end) => Array.from({ length: Math.max(0, end - start + 1) }, (_, i) => start + i);
-  if (pageCount <= 7) return range(1, pageCount);
-  const cluster = 5;
-  const side = Math.max(1, siblingCount);
-  if (current <= cluster - 1) {
-    return [...range(1, cluster), "ellipsis", pageCount];
+function buildPaginationItems(page, count, siblingCount = 1, boundaryCount = 1) {
+  if (count < 1) return [];
+  if (count === 1) return [1];
+  const current = Math.min(Math.max(1, page), count);
+  const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({ length: Math.max(0, length) }, (_, i) => start + i);
+  };
+  const startPages = range(1, Math.min(boundaryCount, count));
+  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+  const siblingsStart = Math.max(
+    Math.min(
+      current - siblingCount,
+      count - boundaryCount - siblingCount * 2 - 1
+    ),
+    boundaryCount + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(
+      current + siblingCount,
+      boundaryCount + siblingCount * 2 + 2
+    ),
+    endPages.length > 0 ? endPages[0] - 2 : count - 1
+  );
+  const itemList = [...startPages];
+  if (siblingsStart > boundaryCount + 2) {
+    itemList.push("ellipsis");
+  } else if (boundaryCount + 1 < count - boundaryCount) {
+    itemList.push(boundaryCount + 1);
   }
-  if (current >= pageCount - (cluster - 2)) {
-    return [1, "ellipsis", ...range(pageCount - cluster + 1, pageCount)];
+  itemList.push(...range(siblingsStart, siblingsEnd));
+  if (siblingsEnd < count - boundaryCount - 1) {
+    itemList.push("ellipsis");
+  } else if (count - boundaryCount > boundaryCount) {
+    itemList.push(count - boundaryCount);
   }
-  return [
-    1,
-    "ellipsis",
-    ...range(current - side, current + side),
-    "ellipsis",
-    pageCount
-  ];
+  itemList.push(...endPages);
+  const result = [];
+  for (const item of itemList) {
+    if (item === "ellipsis") {
+      if (result.length > 0 && result[result.length - 1] !== "ellipsis") {
+        result.push("ellipsis");
+      }
+    } else {
+      if (!result.includes(item)) {
+        result.push(item);
+      }
+    }
+  }
+  return result;
 }
 
 // src/StnProvider.tsx
@@ -87,6 +116,64 @@ function StnProvider({
 // src/components/StnButton.tsx
 import { cloneElement, forwardRef, isValidElement } from "react";
 
+// src/inputWidth.ts
+import {
+  resolveStnInputWidth,
+  toStnInputWidthPreset,
+  isStnInputFullWidth
+} from "@stn-uiux/pub-ui/data/stnInputWidth";
+function resolveInputWidthProps(_prefix, fullWidth, width) {
+  const resolved = resolveStnInputWidth(fullWidth, width);
+  if (resolved.kind === "full") {
+    return {
+      className: "full",
+      style: void 0
+    };
+  }
+  if (resolved.kind === "preset" && resolved.preset != null) {
+    return {
+      className: `w${resolved.preset}`,
+      style: void 0
+    };
+  }
+  if (resolved.kind === "custom" && resolved.styleWidth != null) {
+    return {
+      className: "",
+      style: { width: resolved.styleWidth }
+    };
+  }
+  return { className: "", style: void 0 };
+}
+function resolveButtonWidthProps(fullWidth, width, defaultPreset) {
+  if (isStnInputFullWidth(fullWidth, width)) {
+    return {
+      className: "full",
+      style: void 0
+    };
+  }
+  const target = width !== void 0 && width !== "" ? width : defaultPreset;
+  if (target === void 0 || target === "") {
+    return { className: "", style: void 0 };
+  }
+  const preset = toStnInputWidthPreset(target);
+  if (preset != null) {
+    return {
+      className: `w${preset}`,
+      style: void 0
+    };
+  }
+  if (typeof target === "number") {
+    return {
+      className: "",
+      style: { minWidth: `${target}px` }
+    };
+  }
+  return {
+    className: "",
+    style: { minWidth: String(target) }
+  };
+}
+
 // src/components/StnIcon.tsx
 import { resolveSystemIconSrcFromName } from "@stn-uiux/pub-ui/data/stnSystemIcons";
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -181,6 +268,7 @@ var StnButton = forwardRef(function StnButton2({
   shape,
   iconPosition,
   icon,
+  width,
   fullWidth,
   className,
   type = "button",
@@ -195,6 +283,7 @@ var StnButton = forwardRef(function StnButton2({
   const resolvedIcon = resolveIconNode(icon, glyphPx);
   const isIconOnly = !labeled && resolvedIcon != null;
   const position = resolveIconPosition(iconPosition, icon);
+  const widthProps = resolveButtonWidthProps(fullWidth, width);
   const showLeading = (isIconOnly || position === "left") && resolvedIcon != null;
   const showTrailingCustom = !isIconOnly && position === "right" && resolvedIcon != null;
   return /* @__PURE__ */ jsxs(
@@ -210,9 +299,10 @@ var StnButton = forwardRef(function StnButton2({
         resolvedColor !== "primary" && resolvedColor,
         shape === "square" && "square",
         isIconOnly && "icon",
-        fullWidth && !isIconOnly && "full",
+        !isIconOnly && widthProps.className,
         className
       ),
+      style: !isIconOnly ? widthProps.style : void 0,
       ...rest,
       children: [
         showLeading ? /* @__PURE__ */ jsx3("span", { className: "stn-btn__leading", children: resolvedIcon }) : null,
@@ -552,8 +642,25 @@ import {
 } from "@stn-uiux/pub-ui/data/stnPagination";
 
 // src/components/StnPagination.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef4, useState as useState3 } from "react";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var FirstIcon = () => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    className: "stn-pagination__icon",
+    viewBox: "0 0 10 11",
+    width: "10",
+    height: "11",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx7(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M1.5.3a.75.75 0 0 1 .75.75v8.9a.75.75 0 0 1-1.5 0V1.05A.75.75 0 0 1 1.5.3Zm7.7 0a.75.75 0 0 1 0 1.06L5.56 5.5l3.64 4.14a.75.75 0 1 1-1.12 1L3.95 6.06a.75.75 0 0 1 0-1.12L8.08.3a.75.75 0 0 1 1.12 0Z"
+      }
+    )
+  }
+);
 var PrevIcon = () => /* @__PURE__ */ jsx7(
   "svg",
   {
@@ -588,55 +695,136 @@ var NextIcon = () => /* @__PURE__ */ jsx7(
     )
   }
 );
+var LastIcon = () => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    className: "stn-pagination__icon",
+    viewBox: "0 0 10 11",
+    width: "10",
+    height: "11",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx7(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M8.5.3a.75.75 0 0 1 .75.75v8.9a.75.75 0 0 1-1.5 0V1.05A.75.75 0 0 1 8.5.3ZM.8.3a.75.75 0 0 1 1.12 0L6.05 4.94a.75.75 0 0 1 0 1.12L1.92 10.64a.75.75 0 1 1-1.12-1L4.44 5.5.8 1.36A.75.75 0 0 1 .8.3Z"
+      }
+    )
+  }
+);
 var StnPagination = forwardRef4(function StnPagination2({
-  page,
+  page: controlledPage,
+  defaultPage = 1,
   count,
   onPageChange,
-  siblingCount = 1,
+  onChange,
+  compact = false,
+  siblingCount,
+  boundaryCount = 1,
+  showFirstButton = false,
+  showLastButton = false,
+  hidePrevButton = false,
+  hideNextButton = false,
+  size = "md",
+  variant = "text",
+  color = "standard",
+  disabled = false,
   className,
   "aria-label": ariaLabel = "pagination navigation",
   ...rest
 }, ref) {
-  const items = buildPaginationItems(page, count, siblingCount);
-  const canPrev = page > 1;
-  const canNext = page < count;
-  return /* @__PURE__ */ jsxs4("nav", { ref, className: cn("stn-pagination", className), "aria-label": ariaLabel, ...rest, children: [
-    /* @__PURE__ */ jsx7(
-      "button",
-      {
-        type: "button",
-        className: "stn-pagination__prev",
-        disabled: !canPrev,
-        "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
-        onClick: () => canPrev && onPageChange?.(page - 1),
-        children: /* @__PURE__ */ jsx7(PrevIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx7("ul", { className: "stn-pagination__list", children: items.map(
-      (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7("span", { className: "stn-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: cn("stn-pagination__page", item === page && "is-active"),
-          "aria-label": `${item} \uD398\uC774\uC9C0`,
-          "aria-current": item === page ? "page" : void 0,
-          onClick: () => item !== page && onPageChange?.(item),
-          children: item
-        }
-      ) }, item)
-    ) }),
-    /* @__PURE__ */ jsx7(
-      "button",
-      {
-        type: "button",
-        className: "stn-pagination__next",
-        disabled: !canNext,
-        "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
-        onClick: () => canNext && onPageChange?.(page + 1),
-        children: /* @__PURE__ */ jsx7(NextIcon, {})
-      }
-    )
-  ] });
+  const resolvedSiblingCount = siblingCount !== void 0 ? siblingCount : compact ? 0 : 1;
+  const [internalPage, setInternalPage] = useState3(defaultPage);
+  const isControlled = controlledPage !== void 0;
+  const currentPage = Math.min(Math.max(1, isControlled ? controlledPage : internalPage), Math.max(1, count));
+  const handlePageSelect = (nextPage) => {
+    if (disabled || nextPage === currentPage || nextPage < 1 || nextPage > count) return;
+    if (!isControlled) {
+      setInternalPage(nextPage);
+    }
+    onPageChange?.(nextPage);
+    onChange?.(null, nextPage);
+  };
+  const items = buildPaginationItems(currentPage, count, resolvedSiblingCount, boundaryCount);
+  const canPrev = !disabled && currentPage > 1;
+  const canNext = !disabled && currentPage < count;
+  return /* @__PURE__ */ jsxs4(
+    "nav",
+    {
+      ref,
+      className: cn(
+        "stn-pagination",
+        `stn-pagination--${size}`,
+        variant !== "text" && `stn-pagination--${variant}`,
+        color && color !== "standard" && `stn-pagination--${color}`,
+        compact && "is-compact",
+        disabled && "is-disabled",
+        className
+      ),
+      "aria-label": ariaLabel,
+      ...rest,
+      children: [
+        showFirstButton && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "stn-pagination__first",
+            disabled: !canPrev,
+            "aria-label": "\uCCAB \uD398\uC774\uC9C0",
+            onClick: () => handlePageSelect(1),
+            children: /* @__PURE__ */ jsx7(FirstIcon, {})
+          }
+        ),
+        !hidePrevButton && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "stn-pagination__prev",
+            disabled: !canPrev,
+            "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0",
+            onClick: () => handlePageSelect(currentPage - 1),
+            children: /* @__PURE__ */ jsx7(PrevIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx7("ul", { className: "stn-pagination__list", children: items.map(
+          (item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7("span", { className: "stn-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              className: cn("stn-pagination__page", item === currentPage && "is-active"),
+              disabled,
+              "aria-label": `${item} \uD398\uC774\uC9C0`,
+              "aria-current": item === currentPage ? "page" : void 0,
+              onClick: () => handlePageSelect(item),
+              children: item
+            }
+          ) }, item)
+        ) }),
+        !hideNextButton && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "stn-pagination__next",
+            disabled: !canNext,
+            "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0",
+            onClick: () => handlePageSelect(currentPage + 1),
+            children: /* @__PURE__ */ jsx7(NextIcon, {})
+          }
+        ),
+        showLastButton && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "stn-pagination__last",
+            disabled: !canNext,
+            "aria-label": "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0",
+            onClick: () => handlePageSelect(count),
+            children: /* @__PURE__ */ jsx7(LastIcon, {})
+          }
+        )
+      ]
+    }
+  );
 });
 
 // src/components/StnModal.tsx
@@ -1173,12 +1361,12 @@ var StnCircularProgress = forwardRef8(
 // src/components/StnTable.tsx
 import {
   Children,
-  forwardRef as forwardRef10,
+  forwardRef as forwardRef11,
   createContext as createContext2,
   useContext as useContext2,
   useEffect as useEffect5,
   useRef as useRef3,
-  useState as useState3
+  useState as useState5
 } from "react";
 
 // src/components/StnCheckbox.tsx
@@ -1281,8 +1469,331 @@ var StnCheckbox = forwardRef9(function StnCheckbox2({
   );
 });
 
-// src/components/StnTable.tsx
+// src/components/StnStatus.tsx
+import {
+  forwardRef as forwardRef10,
+  useState as useState4
+} from "react";
+
+// src/components/StnSeverityBadge.tsx
+import React from "react";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var SEVERITY_DEFAULT_LABELS = {
+  critical: "Critical",
+  major: "Major",
+  minor: "Minor",
+  warning: "Warning"
+};
+var SEVERITY_ICONS = {
+  critical: "fill/alert4",
+  major: "fill/alert3",
+  minor: "fill/alert2",
+  warning: "fill/alert1"
+};
+var StnSeverityBadge = React.forwardRef(
+  ({
+    severity,
+    variant = "contained",
+    size = "md",
+    round = false,
+    showIcon = true,
+    iconOnly = false,
+    glow = false,
+    blur = false,
+    label,
+    active = false,
+    onClick,
+    className = "",
+    children,
+    ...restProps
+  }, ref) => {
+    const isFilter = variant === "filter";
+    const isInteractive = isFilter || Boolean(onClick);
+    const Component = isInteractive ? "button" : "span";
+    const isIconOnly = Boolean(iconOnly);
+    const hasGlow = Boolean(glow || blur || variant === "glow");
+    const resolvedVariant = variant === "glow" ? "contained" : variant || "contained";
+    const classNames = [
+      "stn-status-severity",
+      isFilter ? "filter" : resolvedVariant,
+      size,
+      round ? "round" : "",
+      isIconOnly ? "icon-only" : "",
+      hasGlow ? "glow" : "",
+      severity,
+      active ? "is-active" : "",
+      className
+    ].filter(Boolean).join(" ");
+    const defaultLabel = SEVERITY_DEFAULT_LABELS[severity];
+    const displayLabel = children ?? label ?? defaultLabel;
+    const iconName = SEVERITY_ICONS[severity];
+    const elementProps = {
+      ref,
+      className: classNames,
+      onClick,
+      title: restProps.title ?? (isIconOnly ? defaultLabel : void 0),
+      "aria-label": restProps["aria-label"] ?? (isIconOnly ? defaultLabel : void 0),
+      ...restProps
+    };
+    if (Component === "button") {
+      elementProps.type = restProps.type || "button";
+      if (isFilter) {
+        elementProps["aria-pressed"] = active;
+      }
+    }
+    const iconSize = isFilter ? 16 : size === "sm" ? 12 : size === "lg" ? 16 : 14;
+    return /* @__PURE__ */ jsxs9(Component, { ...elementProps, children: [
+      (showIcon || isIconOnly) && /* @__PURE__ */ jsx15(
+        StnIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          className: "stn-status-severity__icon",
+          color: "none",
+          "aria-hidden": "true"
+        }
+      ),
+      !isIconOnly && /* @__PURE__ */ jsx15("span", { className: "stn-status-severity__label", children: displayLabel })
+    ] });
+  }
+);
+StnSeverityBadge.displayName = "StnSeverityBadge";
+var ALL_SEVERITIES = ["critical", "major", "minor", "warning"];
+var StnSeverityFilter = ({
+  value = ALL_SEVERITIES,
+  onChange,
+  disabledSeverities = [],
+  showIcon = true,
+  className = ""
+}) => {
+  const handleToggle = (sev) => {
+    if (!onChange) return;
+    const exists = value.includes(sev);
+    const next = exists ? value.filter((item) => item !== sev) : [...value, sev];
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsx15("div", { className: `stn-status-severity-filter-group ${className}`.trim(), role: "group", "aria-label": "\uC2EC\uAC01\uB3C4 \uD544\uD130", children: ALL_SEVERITIES.map((sev) => {
+    const isActive = value.includes(sev);
+    const isDisabled = disabledSeverities.includes(sev);
+    return /* @__PURE__ */ jsx15(
+      StnSeverityBadge,
+      {
+        severity: sev,
+        variant: "filter",
+        showIcon,
+        active: isActive,
+        disabled: isDisabled,
+        onClick: () => !isDisabled && handleToggle(sev)
+      },
+      sev
+    );
+  }) });
+};
+StnSeverityFilter.displayName = "StnSeverityFilter";
+
+// src/components/StnStatus.tsx
+import { Fragment, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var StnStatusDot = forwardRef10(function StnStatusDot2({
+  state = "up",
+  label,
+  count,
+  pulse = false,
+  bordered = false,
+  dotPosition = "left",
+  size = "md",
+  gap,
+  className,
+  ...rest
+}, ref) {
+  const displayLabel = label ?? (state === "up" ? "UP" : state === "down" ? "DOWN" : state.toUpperCase());
+  const pointEl = dotPosition !== "none" ? /* @__PURE__ */ jsx16("span", { className: "stn-status-dot__point", "aria-hidden": "true" }) : null;
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      ref,
+      className: cn(
+        "stn-status-dot",
+        state,
+        size,
+        bordered && "bordered",
+        pulse && "pulse",
+        dotPosition !== "left" && `dot-${dotPosition}`,
+        gap && `gap-${gap}`,
+        className
+      ),
+      "data-stn-status": "dot",
+      ...rest,
+      children: dotPosition === "right" ? /* @__PURE__ */ jsxs10(Fragment, { children: [
+        displayLabel ? /* @__PURE__ */ jsx16("span", { className: "stn-status-dot__label", children: displayLabel }) : null,
+        count !== void 0 && count !== null ? /* @__PURE__ */ jsx16("span", { className: "stn-status-dot__count", children: count }) : null,
+        pointEl
+      ] }) : /* @__PURE__ */ jsxs10(Fragment, { children: [
+        pointEl,
+        displayLabel ? /* @__PURE__ */ jsx16("span", { className: "stn-status-dot__label", children: displayLabel }) : null,
+        count !== void 0 && count !== null ? /* @__PURE__ */ jsx16("span", { className: "stn-status-dot__count", children: count }) : null
+      ] })
+    }
+  );
+});
+var StnStatusDotGroup = forwardRef10(function StnStatusDotGroup2({ items, bordered = true, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      ref,
+      className: cn(
+        "stn-status-dot-group",
+        bordered ? "bordered" : "no-border",
+        className
+      ),
+      "data-stn-status": "dot-group",
+      ...rest,
+      children: items.map((item) => /* @__PURE__ */ jsx16("div", { className: "stn-status-dot-group__item", children: /* @__PURE__ */ jsx16(
+        StnStatusDot,
+        {
+          state: item.state,
+          label: item.label,
+          count: item.count
+        }
+      ) }, item.id))
+    }
+  );
+});
+var StnStatusSwitch = forwardRef10(function StnStatusSwitch2({
+  checked: checkedProp,
+  defaultChecked = false,
+  onChange,
+  labelOn = "\uAC10\uC2DC",
+  labelOff = "\uBBF8\uAC10\uC2DC",
+  icon = "line/shield-check",
+  width,
+  fullWidth = false,
+  disabled,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const [internalChecked, setInternalChecked] = useState4(defaultChecked);
+  const isChecked = checkedProp !== void 0 ? checkedProp : internalChecked;
+  const widthProps = resolveButtonWidthProps(fullWidth, width, 80);
+  const handleClick = () => {
+    if (disabled) return;
+    const next = !isChecked;
+    if (checkedProp === void 0) {
+      setInternalChecked(next);
+    }
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs10(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-checked": isChecked,
+      disabled,
+      className: cn(
+        "stn-status-switch",
+        isChecked && "is-checked",
+        widthProps.className,
+        className
+      ),
+      style: { ...widthProps.style, ...style },
+      onClick: handleClick,
+      "data-stn-status": "switch",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx16("span", { className: "stn-status-switch__badge", "aria-hidden": "true", children: /* @__PURE__ */ jsx16(StnIcon, { name: icon, size: 8 }) }),
+        /* @__PURE__ */ jsx16("span", { className: "stn-status-switch__label", children: isChecked ? labelOn : labelOff }),
+        /* @__PURE__ */ jsx16("span", { className: "stn-status-switch__thumb", "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+var StnStatusFlow = forwardRef10(function StnStatusFlow2({ steps, current, bordered = true, size = "md", className, ...rest }, ref) {
+  const currentIndex = steps.findIndex((s) => s.key === current);
+  const iconSize = size === "xs" ? 9 : size === "sm" ? 10 : size === "lg" ? 13 : size === "xl" ? 15 : 11;
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      ref,
+      className: cn(
+        "stn-status-flow",
+        size,
+        bordered === false && "no-border",
+        className
+      ),
+      "data-stn-status": "flow",
+      ...rest,
+      children: steps.map((step, idx) => {
+        const isCurrent = step.key === current;
+        const isPassed = currentIndex !== -1 && idx < currentIndex;
+        const isDimmed = currentIndex !== -1 && idx > currentIndex;
+        const badgeColor = step.color ?? (isCurrent ? "primary" : "success");
+        return /* @__PURE__ */ jsxs10("div", { className: "stn-status-flow__item", style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+          idx > 0 && /* @__PURE__ */ jsx16("span", { className: "stn-status-flow__connector", "aria-hidden": "true", children: "|" }),
+          /* @__PURE__ */ jsxs10(
+            "div",
+            {
+              className: cn(
+                "stn-status-flow__step",
+                isCurrent && "is-current",
+                isPassed && "is-passed",
+                isDimmed && "is-dimmed"
+              ),
+              children: [
+                /* @__PURE__ */ jsx16(
+                  "span",
+                  {
+                    className: cn(
+                      "stn-status-flow__badge",
+                      `stn-status-flow__badge--${badgeColor}`
+                    ),
+                    "aria-hidden": "true",
+                    children: step.icon ? /* @__PURE__ */ jsx16(StnIcon, { name: step.icon, size: iconSize }) : idx + 1
+                  }
+                ),
+                /* @__PURE__ */ jsx16("span", { className: "stn-status-flow__label", children: step.label })
+              ]
+            }
+          )
+        ] }, step.key);
+      })
+    }
+  );
+});
+function StnStatus(props) {
+  switch (props.type) {
+    case "dot-group": {
+      const { type: _, ...rest } = props;
+      return /* @__PURE__ */ jsx16(StnStatusDotGroup, { ...rest });
+    }
+    case "switch": {
+      const { type: _, ...rest } = props;
+      return /* @__PURE__ */ jsx16(StnStatusSwitch, { ...rest });
+    }
+    case "severity": {
+      const { type: _, ...rest } = props;
+      return /* @__PURE__ */ jsx16(StnSeverityBadge, { ...rest });
+    }
+    case "flow": {
+      const { type: _, ...rest } = props;
+      return /* @__PURE__ */ jsx16(StnStatusFlow, { ...rest });
+    }
+    case "dot":
+    default: {
+      const { type: _, ...rest } = props;
+      return /* @__PURE__ */ jsx16(StnStatusDot, { ...rest });
+    }
+  }
+}
+StnStatus.Dot = StnStatusDot;
+StnStatus.DotGroup = StnStatusDotGroup;
+StnStatus.Severity = StnSeverityBadge;
+StnStatus.Switch = StnStatusSwitch;
+StnStatus.Flow = StnStatusFlow;
+
+// src/components/StnTable.tsx
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var STN_TABLE_FOOTER_MAX_ACTIONS = 4;
 function clampFooterRight(node) {
   const kids = Children.toArray(node);
@@ -1308,7 +1819,7 @@ function StnTableBase({
   onColumnReorder,
   className
 }) {
-  const [visitedRowId, setVisitedRowId] = useState3(null);
+  const [visitedRowId, setVisitedRowId] = useState5(null);
   const wrapperRef = useRef3(null);
   useEffect5(() => {
     const wrapper = wrapperRef.current;
@@ -1477,32 +1988,32 @@ function StnTableBase({
   const hasLeading = summary != null || pageSize != null;
   const hasCenter = footerCenter != null;
   const hasFooter = hasLeading || hasCenter || right != null;
-  return /* @__PURE__ */ jsx15(StnTableContext.Provider, { value: { trackVisited, visitedRowId, setVisitedRowId, resizable, draggable }, children: /* @__PURE__ */ jsxs9("div", { ref: wrapperRef, className: cn("stn-table", fill && "stn-table--fill", className), children: [
-    /* @__PURE__ */ jsx15("div", { className: "stn-table__scroll", style: scrollStyle, children }),
-    hasFooter ? /* @__PURE__ */ jsxs9("div", { className: "stn-table__footer", children: [
-      hasLeading ? /* @__PURE__ */ jsxs9("div", { className: "stn-table__footer-leading", children: [
-        summary != null ? /* @__PURE__ */ jsx15("p", { className: "stn-table__summary", children: summary }) : null,
-        pageSize != null ? /* @__PURE__ */ jsx15("div", { className: "stn-table__page-size", children: pageSize }) : null
-      ] }) : /* @__PURE__ */ jsx15("span", {}),
-      hasCenter ? /* @__PURE__ */ jsx15("div", { className: "stn-table__footer-center", children: footerCenter }) : /* @__PURE__ */ jsx15("span", {}),
-      /* @__PURE__ */ jsx15("div", { className: "stn-table__footer-right", children: right })
+  return /* @__PURE__ */ jsx17(StnTableContext.Provider, { value: { trackVisited, visitedRowId, setVisitedRowId, resizable, draggable }, children: /* @__PURE__ */ jsxs11("div", { ref: wrapperRef, className: cn("stn-table", fill && "stn-table--fill", className), children: [
+    /* @__PURE__ */ jsx17("div", { className: "stn-table__scroll", style: scrollStyle, children }),
+    hasFooter ? /* @__PURE__ */ jsxs11("div", { className: "stn-table__footer", children: [
+      hasLeading ? /* @__PURE__ */ jsxs11("div", { className: "stn-table__footer-leading", children: [
+        summary != null ? /* @__PURE__ */ jsx17("p", { className: "stn-table__summary", children: summary }) : null,
+        pageSize != null ? /* @__PURE__ */ jsx17("div", { className: "stn-table__page-size", children: pageSize }) : null
+      ] }) : /* @__PURE__ */ jsx17("span", {}),
+      hasCenter ? /* @__PURE__ */ jsx17("div", { className: "stn-table__footer-center", children: footerCenter }) : /* @__PURE__ */ jsx17("span", {}),
+      /* @__PURE__ */ jsx17("div", { className: "stn-table__footer-right", children: right })
     ] }) : null
   ] }) });
 }
-var StnTableGrid = forwardRef10(function StnTableGrid2({ className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx15("table", { ref, className: cn("stn-table__grid", className), ...rest, children });
+var StnTableGrid = forwardRef11(function StnTableGrid2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx17("table", { ref, className: cn("stn-table__grid", className), ...rest, children });
 });
-var StnTableHead = forwardRef10(
+var StnTableHead = forwardRef11(
   function StnTableHead2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx15("thead", { ref, className: cn("stn-table__thead", className), ...rest, children });
+    return /* @__PURE__ */ jsx17("thead", { ref, className: cn("stn-table__thead", className), ...rest, children });
   }
 );
-var StnTableBody = forwardRef10(
+var StnTableBody = forwardRef11(
   function StnTableBody2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx15("tbody", { ref, className: cn("stn-table__tbody", className), ...rest, children });
+    return /* @__PURE__ */ jsx17("tbody", { ref, className: cn("stn-table__tbody", className), ...rest, children });
   }
 );
-var StnTableRow = forwardRef10(function StnTableRow2({ className, hoverable = false, selected = false, visited = false, highlighted = false, clickable = false, pressed = false, rowId, children, onClick, ...rest }, ref) {
+var StnTableRow = forwardRef11(function StnTableRow2({ className, hoverable = false, selected = false, visited = false, highlighted = false, clickable = false, pressed = false, rowId, children, onClick, ...rest }, ref) {
   const ctx = useContext2(StnTableContext);
   const isTrackedVisited = ctx?.trackVisited && ctx.visitedRowId != null && ctx.visitedRowId === rowId;
   const finalVisited = visited || isTrackedVisited;
@@ -1514,7 +2025,7 @@ var StnTableRow = forwardRef10(function StnTableRow2({ className, hoverable = fa
     }
     onClick?.(e);
   };
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "tr",
     {
       ref,
@@ -1538,12 +2049,12 @@ function tableColWidthClass(width) {
   if (typeof width !== "number" || !TABLE_COL_WIDTHS.has(width)) return void 0;
   return `stn-table__col--${width}`;
 }
-var StnTableTh = forwardRef10(function StnTableTh2({ className, check = false, align, pressed = false, width, style, children, scope = "col", resizable, draggable, name, groupCols, ...rest }, ref) {
+var StnTableTh = forwardRef11(function StnTableTh2({ className, check = false, align, pressed = false, width, style, children, scope = "col", resizable, draggable, name, groupCols, ...rest }, ref) {
   const ctx = useContext2(StnTableContext);
   const colWidthClass = tableColWidthClass(width);
   const finalResizable = resizable ?? ctx?.resizable;
   const finalDraggable = draggable ?? ctx?.draggable;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs11(
     "th",
     {
       ref,
@@ -1562,7 +2073,7 @@ var StnTableTh = forwardRef10(function StnTableTh2({ className, check = false, a
       ...rest,
       children: [
         children,
-        finalResizable && /* @__PURE__ */ jsx15(
+        finalResizable && /* @__PURE__ */ jsx17(
           "div",
           {
             className: "stn-table__resizer",
@@ -1573,7 +2084,7 @@ var StnTableTh = forwardRef10(function StnTableTh2({ className, check = false, a
     }
   );
 });
-var StnTableTd = forwardRef10(function StnTableTd2({ className, check = false, align, children, title, onMouseEnter, ...rest }, ref) {
+var StnTableTd = forwardRef11(function StnTableTd2({ className, check = false, align, children, title, onMouseEnter, ...rest }, ref) {
   const autoTitle = typeof children === "string" ? children : void 0;
   const handleMouseEnter = (e) => {
     if (onMouseEnter) onMouseEnter(e);
@@ -1586,7 +2097,7 @@ var StnTableTd = forwardRef10(function StnTableTd2({ className, check = false, a
       }
     }
   };
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "td",
     {
       ref,
@@ -1602,15 +2113,15 @@ var StnTableTd = forwardRef10(function StnTableTd2({ className, check = false, a
     }
   );
 });
-var StnTableThCheck = forwardRef10(function StnTableThCheck2({ label = "\uC804\uCCB4 \uC120\uD0DD", scope = "col", className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx15("th", { scope, className: cn("stn-table__col-check", className), children: /* @__PURE__ */ jsx15(StnCheckbox, { ref, controlOnly: true, label, ...rest }) });
+var StnTableThCheck = forwardRef11(function StnTableThCheck2({ label = "\uC804\uCCB4 \uC120\uD0DD", scope = "col", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx17("th", { scope, className: cn("stn-table__col-check", className), children: /* @__PURE__ */ jsx17(StnCheckbox, { ref, controlOnly: true, label, ...rest }) });
 });
-var StnTableTdCheck = forwardRef10(function StnTableTdCheck2({ label = "\uD589 \uC120\uD0DD", className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx15("td", { className: cn("stn-table__col-check", className), children: /* @__PURE__ */ jsx15(StnCheckbox, { ref, controlOnly: true, label, ...rest }) });
+var StnTableTdCheck = forwardRef11(function StnTableTdCheck2({ label = "\uD589 \uC120\uD0DD", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx17("td", { className: cn("stn-table__col-check", className), children: /* @__PURE__ */ jsx17(StnCheckbox, { ref, controlOnly: true, label, ...rest }) });
 });
-var StnTableSort = forwardRef10(function StnTableSort2({ label, sort = "none", pressed = false, className, type = "button", ...rest }, ref) {
+var StnTableSort = forwardRef11(function StnTableSort2({ label, sort = "none", pressed = false, className, type = "button", ...rest }, ref) {
   const active = sort !== "none";
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs11(
     "button",
     {
       ref,
@@ -1626,14 +2137,14 @@ var StnTableSort = forwardRef10(function StnTableSort2({ label, sort = "none", p
       "aria-sort": sort,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx15("span", { className: "stn-table__th-label-text", children: label }),
-        /* @__PURE__ */ jsx15("span", { className: "stn-table__th-label-icon", "aria-hidden": "true" })
+        /* @__PURE__ */ jsx17("span", { className: "stn-table__th-label-text", children: label }),
+        /* @__PURE__ */ jsx17("span", { className: "stn-table__th-label-icon", "aria-hidden": "true" })
       ]
     }
   );
 });
-var StnTableRowActions = forwardRef10(function StnTableRowActions2({ className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx15("div", { ref, className: cn("stn-table__row-actions", className), ...rest, children });
+var StnTableRowActions = forwardRef11(function StnTableRowActions2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx17("div", { ref, className: cn("stn-table__row-actions", className), ...rest, children });
 });
 var StnTable = StnTableBase;
 StnTable.Grid = StnTableGrid;
@@ -1646,17 +2157,20 @@ StnTable.ThCheck = StnTableThCheck;
 StnTable.TdCheck = StnTableTdCheck;
 StnTable.Sort = StnTableSort;
 StnTable.RowActions = StnTableRowActions;
+StnTable.Status = StnStatusDot;
+StnTable.Switch = StnStatusSwitch;
+StnTable.Flow = StnStatusFlow;
 
 // src/components/StnTree.tsx
 import {
-  forwardRef as forwardRef13,
+  forwardRef as forwardRef14,
   useCallback as useCallback4,
   useMemo as useMemo2,
-  useState as useState5
+  useState as useState7
 } from "react";
 
 // src/components/StnTreeNode.tsx
-import { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef12 } from "react";
 import { resolveSystemIconSrcFromName as resolveSystemIconSrcFromName2 } from "@stn-uiux/pub-ui/data/stnSystemIcons";
 
 // src/stnTreeFlatten.ts
@@ -1708,7 +2222,9 @@ function walk(nodes, depth, ancestorIsLast, expanded, out) {
       hasChildren,
       expanded: isExpanded,
       isLast,
-      visible: node.visible !== false
+      visible: node.visible !== false,
+      count: node.count,
+      icon: node.icon
     });
     if (hasChildren && isExpanded) {
       walk(node.children, depth + 1, [...ancestorIsLast, isLast], expanded, out);
@@ -1736,7 +2252,7 @@ function collectExpandableIds(nodes) {
 }
 
 // src/components/StnTreeNode.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var ICON = {
   folderOpen: resolveSystemIconSrcFromName2("fill/folder-open") ?? "",
   folderClosed: resolveSystemIconSrcFromName2("fill/folder") ?? "",
@@ -1752,13 +2268,13 @@ function maskStyle(src) {
 }
 function TreeGuideCell({ cell }) {
   if (cell.type === "blank") {
-    return /* @__PURE__ */ jsx16("span", { className: "stn-tree__cell stn-tree__cell--blank", "aria-hidden": "true" });
+    return /* @__PURE__ */ jsx18("span", { className: "stn-tree__cell stn-tree__cell--blank", "aria-hidden": "true" });
   }
   if (cell.type === "vertical") {
-    return /* @__PURE__ */ jsx16("span", { className: "stn-tree__cell stn-tree__cell--guide", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("span", { className: "stn-tree__guide-glyph", style: maskStyle(ICON.vertical) }) });
+    return /* @__PURE__ */ jsx18("span", { className: "stn-tree__cell stn-tree__cell--guide", "aria-hidden": "true", children: /* @__PURE__ */ jsx18("span", { className: "stn-tree__guide-glyph", style: maskStyle(ICON.vertical) }) });
   }
   if (cell.type === "connector") {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx18(
       "span",
       {
         className: cn(
@@ -1766,7 +2282,7 @@ function TreeGuideCell({ cell }) {
           cell.variant === "end" && "stn-tree__cell--connector-end"
         ),
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx16(
+        children: /* @__PURE__ */ jsx18(
           "span",
           {
             className: "stn-tree__guide-glyph",
@@ -1776,7 +2292,7 @@ function TreeGuideCell({ cell }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx16("span", { className: "stn-tree__cell stn-tree__cell--toggle", "aria-hidden": "true", children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18("span", { className: "stn-tree__cell stn-tree__cell--toggle", "aria-hidden": "true", children: /* @__PURE__ */ jsx18(
     "span",
     {
       className: cn("stn-tree__chevron-glyph", cell.expanded && "is-expanded"),
@@ -1784,10 +2300,17 @@ function TreeGuideCell({ cell }) {
     }
   ) });
 }
-function TreeNodeIcon({ kind, expanded }) {
+function TreeNodeIcon({
+  kind,
+  expanded,
+  icon
+}) {
+  if (icon != null) {
+    return /* @__PURE__ */ jsx18("span", { className: "stn-tree__cell stn-tree__cell--icon stn-tree__icon stn-tree__icon--custom", children: typeof icon === "string" ? /* @__PURE__ */ jsx18(StnIcon, { name: icon, size: 16, className: "stn-tree__icon-glyph" }) : icon });
+  }
   if (kind === "server") {
-    return /* @__PURE__ */ jsxs10("span", { className: "stn-tree__cell stn-tree__cell--icon stn-tree__icon stn-tree__icon--server", children: [
-      /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsxs12("span", { className: "stn-tree__cell stn-tree__cell--icon stn-tree__icon stn-tree__icon--server", children: [
+      /* @__PURE__ */ jsx18(
         StnIcon,
         {
           name: "fill/server_2_tree_light",
@@ -1795,7 +2318,7 @@ function TreeNodeIcon({ kind, expanded }) {
           className: "stn-tree__icon-glyph stn-tree__server-icon stn-tree__server-icon--light stn-icon--color"
         }
       ),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx18(
         StnIcon,
         {
           name: "fill/server_2",
@@ -1807,18 +2330,18 @@ function TreeNodeIcon({ kind, expanded }) {
   }
   const folderKind = kind === "root" ? "root" : "folder";
   const folderSrc = kind === "root" || expanded ? ICON.folderOpen : ICON.folderClosed;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     "span",
     {
       className: cn(
         "stn-tree__cell stn-tree__cell--icon stn-tree__icon",
         `stn-tree__icon--${folderKind}`
       ),
-      children: /* @__PURE__ */ jsx16("span", { className: "stn-tree__icon-glyph", style: maskStyle(folderSrc), "aria-hidden": "true" })
+      children: /* @__PURE__ */ jsx18("span", { className: "stn-tree__icon-glyph", style: maskStyle(folderSrc), "aria-hidden": "true" })
     }
   );
 }
-var StnTreeNode = forwardRef11(function StnTreeNode2({
+var StnTreeNode = forwardRef12(function StnTreeNode2({
   label,
   kind = "folder",
   bold = false,
@@ -1830,6 +2353,8 @@ var StnTreeNode = forwardRef11(function StnTreeNode2({
   ancestorIsLast,
   cells: cellsProp,
   showIcon = true,
+  icon,
+  count,
   visible = true,
   showVisibilityToggle = false,
   onVisibilityChange,
@@ -1861,7 +2386,7 @@ var StnTreeNode = forwardRef11(function StnTreeNode2({
       handleSelect();
     }
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       ref,
@@ -1889,7 +2414,7 @@ var StnTreeNode = forwardRef11(function StnTreeNode2({
       children: [
         cells.map((cell, index) => {
           if (cell.type === "toggle") {
-            return /* @__PURE__ */ jsx16(
+            return /* @__PURE__ */ jsx18(
               "button",
               {
                 type: "button",
@@ -1900,7 +2425,7 @@ var StnTreeNode = forwardRef11(function StnTreeNode2({
                   event.stopPropagation();
                   onToggle?.();
                 },
-                children: /* @__PURE__ */ jsx16(
+                children: /* @__PURE__ */ jsx18(
                   "span",
                   {
                     className: cn("stn-tree__chevron-glyph", cell.expanded && "is-expanded"),
@@ -1911,11 +2436,12 @@ var StnTreeNode = forwardRef11(function StnTreeNode2({
               `c-${index}`
             );
           }
-          return /* @__PURE__ */ jsx16(TreeGuideCell, { cell }, `c-${index}`);
+          return /* @__PURE__ */ jsx18(TreeGuideCell, { cell }, `c-${index}`);
         }),
-        showIcon && /* @__PURE__ */ jsx16(TreeNodeIcon, { kind, expanded }),
-        /* @__PURE__ */ jsx16("span", { className: cn("stn-tree__label", bold && "is-bold"), children: label }),
-        showVisibilityToggle && /* @__PURE__ */ jsx16(
+        showIcon && /* @__PURE__ */ jsx18(TreeNodeIcon, { kind, expanded, icon }),
+        /* @__PURE__ */ jsx18("span", { className: cn("stn-tree__label", bold && "is-bold"), children: label }),
+        count != null && /* @__PURE__ */ jsx18("span", { className: "stn-tree__count", "aria-label": `\uC218\uB7C9 ${count}`, children: count }),
+        showVisibilityToggle && /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -1926,7 +2452,7 @@ var StnTreeNode = forwardRef11(function StnTreeNode2({
               event.stopPropagation();
               onVisibilityChange?.(!visible);
             },
-            children: /* @__PURE__ */ jsx16(
+            children: /* @__PURE__ */ jsx18(
               "span",
               {
                 className: cn("stn-tree__visibility-glyph", !visible && "is-off"),
@@ -1943,14 +2469,14 @@ var StnTreeItem = StnTreeNode;
 
 // src/components/StnScroll.tsx
 import {
-  forwardRef as forwardRef12,
+  forwardRef as forwardRef13,
   useCallback as useCallback3,
   useEffect as useEffect6,
   useId as useId4,
   useRef as useRef4,
-  useState as useState4
+  useState as useState6
 } from "react";
-import { Fragment, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
@@ -1961,7 +2487,7 @@ function barWidth(size, scrollWidth) {
   if (size === "thick") return "12px";
   return "8px";
 }
-var StnScroll = forwardRef12(function StnScroll2({
+var StnScroll = forwardRef13(function StnScroll2({
   orientation = "vertical",
   variant = "default",
   showArrows = false,
@@ -1980,7 +2506,7 @@ var StnScroll = forwardRef12(function StnScroll2({
   const rawId = useId4();
   const customId = `stn-scr-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const innerRef = useRef4(null);
-  const [edges, setEdges] = useState4({ top: true, bottom: false, left: true, right: false });
+  const [edges, setEdges] = useState6({ top: true, bottom: false, left: true, right: false });
   const hasArrows = variant === "arrows" || showArrows;
   const hasCustomStyling = Boolean(thumbColor || trackColor || scrollWidth != null);
   const showY = orientation !== "horizontal";
@@ -1990,7 +2516,7 @@ var StnScroll = forwardRef12(function StnScroll2({
     const w = scrollWidth != null ? typeof scrollWidth === "number" ? `${scrollWidth}px` : scrollWidth : void 0;
     const thumb = thumbColor;
     const track = trackColor || "rgba(255, 255, 255, 0.05)";
-    dynamicStyleTag = /* @__PURE__ */ jsx17("style", { children: `
+    dynamicStyleTag = /* @__PURE__ */ jsx19("style", { children: `
         .${customId}::-webkit-scrollbar {
           ${w ? `width: ${w} !important; height: ${w} !important;` : ""}
           ${track ? `background: ${track} !important;` : ""}
@@ -2049,15 +2575,15 @@ var StnScroll = forwardRef12(function StnScroll2({
       behavior: "smooth"
     });
   };
-  const scrollElement = /* @__PURE__ */ jsx17(
+  const scrollElement = /* @__PURE__ */ jsx19(
     "div",
     {
       ref: setNode,
       className: cn(
         "stn-scroll",
-        `stn-scroll--${orientation}`,
-        size !== "default" && `stn-scroll--${size}`,
-        color !== "default" && `stn-scroll--${color}`,
+        orientation,
+        size !== "default" && size,
+        color !== "default" && color,
         hasCustomStyling && customId,
         className
       ),
@@ -2068,7 +2594,7 @@ var StnScroll = forwardRef12(function StnScroll2({
     }
   );
   if (!hasArrows) {
-    return /* @__PURE__ */ jsxs11(Fragment, { children: [
+    return /* @__PURE__ */ jsxs13(Fragment2, { children: [
       dynamicStyleTag,
       scrollElement
     ] });
@@ -2076,11 +2602,11 @@ var StnScroll = forwardRef12(function StnScroll2({
   const shellStyle = {
     "--stn-scroll-width": barWidth(size, scrollWidth)
   };
-  return /* @__PURE__ */ jsxs11(Fragment, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment2, { children: [
     dynamicStyleTag,
-    /* @__PURE__ */ jsxs11("div", { className: cn("stn-scroll-shell", `stn-scroll-shell--${orientation}`), style: shellStyle, children: [
-      showY ? /* @__PURE__ */ jsxs11(Fragment, { children: [
-        /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsxs13("div", { className: cn("stn-scroll-shell", orientation), style: shellStyle, children: [
+      showY ? /* @__PURE__ */ jsxs13(Fragment2, { children: [
+        /* @__PURE__ */ jsx19(
           ScrollArrow,
           {
             direction: "up",
@@ -2089,7 +2615,7 @@ var StnScroll = forwardRef12(function StnScroll2({
             onClick: () => scrollByAxis("y", -1)
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx19(
           ScrollArrow,
           {
             direction: "down",
@@ -2100,8 +2626,8 @@ var StnScroll = forwardRef12(function StnScroll2({
         )
       ] }) : null,
       scrollElement,
-      showX ? /* @__PURE__ */ jsxs11(Fragment, { children: [
-        /* @__PURE__ */ jsx17(
+      showX ? /* @__PURE__ */ jsxs13(Fragment2, { children: [
+        /* @__PURE__ */ jsx19(
           ScrollArrow,
           {
             direction: "left",
@@ -2110,7 +2636,7 @@ var StnScroll = forwardRef12(function StnScroll2({
             onClick: () => scrollByAxis("x", -1)
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx19(
           ScrollArrow,
           {
             direction: "right",
@@ -2129,27 +2655,27 @@ function ScrollArrow({
   label,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     "button",
     {
       type: "button",
-      className: cn("stn-scroll__arrow", `stn-scroll__arrow--${direction}`, className),
+      className: cn("stn-scroll__arrow", direction, className),
       "aria-label": label,
       ...rest,
       children: [
-        direction === "up" && /* @__PURE__ */ jsx17("svg", { width: "7", height: "6", viewBox: "0 0 7 6", fill: "currentColor", children: /* @__PURE__ */ jsx17("path", { d: "M2.78 1.13a0.85 0.85 0 0 1 1.44 0l2.12 3.18A0.85 0.85 0 0 1 5.64 5.6H1.36a0.85 0.85 0 0 1-.7-1.29l2.12-3.18z" }) }),
-        direction === "down" && /* @__PURE__ */ jsx17("svg", { width: "7", height: "6", viewBox: "0 0 7 6", fill: "currentColor", children: /* @__PURE__ */ jsx17("path", { d: "M2.78 4.87a0.85 0.85 0 0 0 1.44 0l2.12-3.18A0.85 0.85 0 0 0 5.64 0.4H1.36a0.85 0.85 0 0 0-.7 1.29l2.12 3.18z" }) }),
-        direction === "left" && /* @__PURE__ */ jsx17("svg", { width: "6", height: "7", viewBox: "0 0 6 7", fill: "currentColor", children: /* @__PURE__ */ jsx17("path", { d: "M1.13 4.22a0.85 0.85 0 0 1 0-1.44l3.18-2.12A0.85 0.85 0 0 1 5.6 1.36v4.28a0.85 0.85 0 0 1-1.29.7L1.13 4.22z" }) }),
-        direction === "right" && /* @__PURE__ */ jsx17("svg", { width: "6", height: "7", viewBox: "0 0 6 7", fill: "currentColor", children: /* @__PURE__ */ jsx17("path", { d: "M4.87 4.22a0.85 0.85 0 0 0 0-1.44L1.69 0.66A0.85 0.85 0 0 0 0.4 1.36v4.28a0.85 0.85 0 0 0 1.29.7l3.18-2.12z" }) })
+        direction === "up" && /* @__PURE__ */ jsx19("svg", { width: "7", height: "6", viewBox: "0 0 7 6", fill: "currentColor", children: /* @__PURE__ */ jsx19("path", { d: "M2.78 1.13a0.85 0.85 0 0 1 1.44 0l2.12 3.18A0.85 0.85 0 0 1 5.64 5.6H1.36a0.85 0.85 0 0 1-.7-1.29l2.12-3.18z" }) }),
+        direction === "down" && /* @__PURE__ */ jsx19("svg", { width: "7", height: "6", viewBox: "0 0 7 6", fill: "currentColor", children: /* @__PURE__ */ jsx19("path", { d: "M2.78 4.87a0.85 0.85 0 0 0 1.44 0l2.12-3.18A0.85 0.85 0 0 0 5.64 0.4H1.36a0.85 0.85 0 0 0-.7 1.29l2.12 3.18z" }) }),
+        direction === "left" && /* @__PURE__ */ jsx19("svg", { width: "6", height: "7", viewBox: "0 0 6 7", fill: "currentColor", children: /* @__PURE__ */ jsx19("path", { d: "M1.13 4.22a0.85 0.85 0 0 1 0-1.44l3.18-2.12A0.85 0.85 0 0 1 5.6 1.36v4.28a0.85 0.85 0 0 1-1.29.7L1.13 4.22z" }) }),
+        direction === "right" && /* @__PURE__ */ jsx19("svg", { width: "6", height: "7", viewBox: "0 0 6 7", fill: "currentColor", children: /* @__PURE__ */ jsx19("path", { d: "M4.87 4.22a0.85 0.85 0 0 0 0-1.44L1.69 0.66A0.85 0.85 0 0 0 0.4 1.36v4.28a0.85 0.85 0 0 0 1.29.7l3.18-2.12z" }) })
       ]
     }
   );
 }
 
 // src/components/StnTree.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function useControllableSet(controlled, defaultIds, defaultExpandAll, allExpandable) {
-  const [internal, setInternal] = useState5(() => {
+  const [internal, setInternal] = useState7(() => {
     if (defaultIds != null) return defaultIds;
     if (defaultExpandAll) return allExpandable;
     return [];
@@ -2164,7 +2690,7 @@ function useControllableSet(controlled, defaultIds, defaultExpandAll, allExpanda
   );
   return [value, setValue];
 }
-var StnTree = forwardRef13(function StnTree2({
+var StnTree = forwardRef14(function StnTree2({
   nodes,
   heading,
   defaultExpandAll = false,
@@ -2198,9 +2724,9 @@ var StnTree = forwardRef13(function StnTree2({
     defaultExpandAll,
     expandableIds
   );
-  const [internalSelected, setInternalSelected] = useState5(defaultSelectedId);
+  const [internalSelected, setInternalSelected] = useState7(defaultSelectedId);
   const selected = selectedId ?? internalSelected;
-  const [internalHidden, setInternalHidden] = useState5(() => defaultHiddenIds ?? []);
+  const [internalHidden, setInternalHidden] = useState7(() => defaultHiddenIds ?? []);
   const hidden = controlledHiddenIds ?? internalHidden;
   const handleVisibilityToggle = useCallback4(
     (id, nextVisible) => {
@@ -2236,9 +2762,9 @@ var StnTree = forwardRef13(function StnTree2({
     },
     [onSelect, selectedId]
   );
-  const rowsContent = /* @__PURE__ */ jsx18("div", { className: "stn-tree__rows", role: "tree", "aria-label": heading || "folder tree", children: rows.map((row) => {
+  const rowsContent = /* @__PURE__ */ jsx20("div", { className: "stn-tree__rows", role: "tree", "aria-label": heading || "folder tree", children: rows.map((row) => {
     const isHidden = hidden.includes(row.id) || !row.visible;
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20(
       StnTreeNode,
       {
         label: row.label,
@@ -2251,6 +2777,8 @@ var StnTree = forwardRef13(function StnTree2({
         isLast: row.isLast,
         cells: row.cells,
         showIcon: showIcons,
+        icon: row.icon,
+        count: row.count,
         visible: !isHidden,
         showVisibilityToggle,
         onVisibilityChange: (nextVisible) => handleVisibilityToggle(row.id, nextVisible),
@@ -2261,22 +2789,22 @@ var StnTree = forwardRef13(function StnTree2({
       row.id
     );
   }) });
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       ref,
       className: cn(
         "stn-tree",
-        size !== "sm" && `stn-tree--${size}`,
-        width !== "full" && `stn-tree--${width}`,
-        radius !== "sm" && `stn-tree--radius-${radius}`,
-        !guides && "stn-tree--no-guides",
+        size,
+        width,
+        radius !== "sm" && `radius-${radius}`,
+        !guides && "no-guides",
         className
       ),
       ...rest,
       children: [
-        heading ? /* @__PURE__ */ jsx18("p", { className: "stn-tree__heading", children: heading }) : null,
-        maxHeight != null ? /* @__PURE__ */ jsx18(
+        heading ? /* @__PURE__ */ jsx20("p", { className: "stn-tree__heading", children: heading }) : null,
+        maxHeight != null ? /* @__PURE__ */ jsx20(
           StnScroll,
           {
             orientation: "vertical",
@@ -2293,22 +2821,22 @@ var StnTree = forwardRef13(function StnTree2({
 });
 
 // src/components/StnCard.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function StnCardHeader({ children, title, extra, className, ...rest }) {
-  return /* @__PURE__ */ jsxs13("div", { className: cn("stn-card__header", className), ...rest, children: [
-    title ? /* @__PURE__ */ jsx19("div", { className: "stn-card__header-title", children: title }) : null,
+  return /* @__PURE__ */ jsxs15("div", { className: cn("stn-card__header", className), ...rest, children: [
+    title ? /* @__PURE__ */ jsx21("div", { className: "stn-card__header-title", children: title }) : null,
     children,
-    extra ? /* @__PURE__ */ jsx19("div", { className: "stn-card__header-extra", children: extra }) : null
+    extra ? /* @__PURE__ */ jsx21("div", { className: "stn-card__header-extra", children: extra }) : null
   ] });
 }
 function StnCardBody({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx19("div", { className: cn("stn-card__body", className), ...rest, children });
+  return /* @__PURE__ */ jsx21("div", { className: cn("stn-card__body", className), ...rest, children });
 }
 function StnCardFooter({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx19("div", { className: cn("stn-card__footer", className), ...rest, children });
+  return /* @__PURE__ */ jsx21("div", { className: cn("stn-card__footer", className), ...rest, children });
 }
-var StnCard = forwardRef14(function StnCard2({
+var StnCard = forwardRef15(function StnCard2({
   children,
   variant = "flat",
   radius = "md",
@@ -2320,7 +2848,7 @@ var StnCard = forwardRef14(function StnCard2({
   ...rest
 }, ref) {
   const isClickable = interactive || rest.onClick != null;
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       ref,
@@ -2344,39 +2872,48 @@ StnCard.Body = StnCardBody;
 StnCard.Footer = StnCardFooter;
 
 // src/patterns/sectionSide/StnSectionSide.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var StnSectionSide = forwardRef15(function StnSectionSide2({ children, className, fill = true, scrollProps, ...rest }, ref) {
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var StnSectionSide = forwardRef16(function StnSectionSide2({ children, header, footer, className, fill = true, fullWidth = false, scrollProps, ...rest }, ref) {
   const { className: scrollClassName, ...scrollRest } = scrollProps ?? {};
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs16(
     "aside",
     {
       ref,
-      className: cn("stn-section-side", fill && "stn-section-side--fill", className),
+      className: cn(
+        "stn-section-side",
+        fill && "stn-section-side--fill",
+        fullWidth && "is-full-width",
+        className
+      ),
       "data-stn-section-side": true,
       ...rest,
-      children: /* @__PURE__ */ jsx20(
-        StnScroll,
-        {
-          orientation: "vertical",
-          className: cn("stn-section-side__body", scrollClassName),
-          ...scrollRest,
-          children
-        }
-      )
+      children: [
+        header && /* @__PURE__ */ jsx22("div", { className: "stn-section-side__header", children: header }),
+        /* @__PURE__ */ jsx22(
+          StnScroll,
+          {
+            orientation: "vertical",
+            className: cn("stn-section-side__body", scrollClassName),
+            ...scrollRest,
+            children
+          }
+        ),
+        footer && /* @__PURE__ */ jsx22("div", { className: "stn-section-side__footer", children: footer })
+      ]
     }
   );
 });
 function StnSectionSidePreset({ tree, ...sideProps }) {
-  return /* @__PURE__ */ jsx20(StnSectionSide, { ...sideProps, children: /* @__PURE__ */ jsx20(StnTree, { heading: "FOLDER STRUCTURE", ...tree }) });
+  return /* @__PURE__ */ jsx22(StnSectionSide, { ...sideProps, children: /* @__PURE__ */ jsx22(StnTree, { heading: "FOLDER STRUCTURE", ...tree }) });
 }
 
 // src/patterns/login/StnLoginCard.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
-var StnLoginCardGlowWrapper = forwardRef16(
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var StnLoginCardGlowWrapper = forwardRef17(
   function StnLoginCardGlowWrapper2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx23(
       "div",
       {
         ref,
@@ -2388,7 +2925,7 @@ var StnLoginCardGlowWrapper = forwardRef16(
     );
   }
 );
-var StnLoginCard = forwardRef16(function StnLoginCard2({
+var StnLoginCard = forwardRef17(function StnLoginCard2({
   brand,
   children,
   brandPosition = "left",
@@ -2401,7 +2938,7 @@ var StnLoginCard = forwardRef16(function StnLoginCard2({
 }, ref) {
   const isReversed = reverse || brandPosition === "right";
   const hasGlow = glow || variant === "glow";
-  const cardElement = /* @__PURE__ */ jsxs14(
+  const cardElement = /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: hasGlow ? void 0 : ref,
@@ -2409,24 +2946,24 @@ var StnLoginCard = forwardRef16(function StnLoginCard2({
       "data-stn-login-card": true,
       ...rest,
       children: [
-        brand && /* @__PURE__ */ jsx21("div", { className: "stn-login-card__brand", "data-stn-login-card-brand": true, children: brand }),
-        /* @__PURE__ */ jsx21("div", { className: "stn-login-card__form", "data-stn-login-card-form": true, children })
+        brand && /* @__PURE__ */ jsx23("div", { className: "stn-login-card__brand", "data-stn-login-card-brand": true, children: brand }),
+        /* @__PURE__ */ jsx23("div", { className: "stn-login-card__form", "data-stn-login-card-form": true, children })
       ]
     }
   );
   if (hasGlow) {
-    return /* @__PURE__ */ jsx21(StnLoginCardGlowWrapper, { ref, className: wrapperClassName, children: cardElement });
+    return /* @__PURE__ */ jsx23(StnLoginCardGlowWrapper, { ref, className: wrapperClassName, children: cardElement });
   }
   return cardElement;
 });
-var StnLoginBrandStack = forwardRef16(
+var StnLoginBrandStack = forwardRef17(
   function StnLoginBrandStack2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx21("div", { ref, className: cn("stn-login-brand-stack", className), ...rest, children });
+    return /* @__PURE__ */ jsx23("div", { ref, className: cn("stn-login-brand-stack", className), ...rest, children });
   }
 );
-var StnLoginFormStack = forwardRef16(
+var StnLoginFormStack = forwardRef17(
   function StnLoginFormStack2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx23(
       "form",
       {
         ref,
@@ -2438,9 +2975,9 @@ var StnLoginFormStack = forwardRef16(
     );
   }
 );
-var StnLoginFormFields = forwardRef16(
+var StnLoginFormFields = forwardRef17(
   function StnLoginFormFields2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx23(
       "div",
       {
         ref,
@@ -2452,9 +2989,9 @@ var StnLoginFormFields = forwardRef16(
     );
   }
 );
-var StnLoginFormLinks = forwardRef16(
+var StnLoginFormLinks = forwardRef17(
   function StnLoginFormLinks2({ children, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx23(
       "nav",
       {
         ref,
@@ -2467,20 +3004,20 @@ var StnLoginFormLinks = forwardRef16(
     );
   }
 );
-var StnLoginPlaceholder = forwardRef16(
+var StnLoginPlaceholder = forwardRef17(
   function StnLoginPlaceholder2({ children = "\uC18C\uC15C \uB85C\uADF8\uC778 \uAE30\uB2A5\uC740 \uC900\uBE44 \uC911\uC785\uB2C8\uB2E4.", className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx21("p", { ref, className: cn("stn-login__placeholder", className), ...rest, children });
+    return /* @__PURE__ */ jsx23("p", { ref, className: cn("stn-login__placeholder", className), ...rest, children });
   }
 );
 
 // src/patterns/login/StnLoginTextField.tsx
 import {
   cloneElement as cloneElement3,
-  forwardRef as forwardRef17,
+  forwardRef as forwardRef18,
   isValidElement as isValidElement3
 } from "react";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-var StnLoginTextField = forwardRef17(
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var StnLoginTextField = forwardRef18(
   function StnLoginTextField2({
     icon,
     iconColor,
@@ -2495,7 +3032,7 @@ var StnLoginTextField = forwardRef17(
     let renderedIcon = null;
     if (hasIcon) {
       if (typeof icon === "string") {
-        renderedIcon = /* @__PURE__ */ jsx22(
+        renderedIcon = /* @__PURE__ */ jsx24(
           StnIconBox,
           {
             icon,
@@ -2512,7 +3049,7 @@ var StnLoginTextField = forwardRef17(
         renderedIcon = icon;
       }
     }
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs18(
       "div",
       {
         className: cn(
@@ -2522,7 +3059,7 @@ var StnLoginTextField = forwardRef17(
         ),
         children: [
           renderedIcon,
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx24(
             "input",
             {
               ref,
@@ -2540,9 +3077,9 @@ var StnLoginTextField = forwardRef17(
 );
 
 // src/components/StnLogo.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { STN_INFOMAP_LOGO } from "@stn-uiux/pub-ui/data/stnBrand";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 function sources(variant) {
   if (variant === "onlyimg" || variant === "symbol") {
     return { light: STN_INFOMAP_LOGO.onlyImgLight, dark: STN_INFOMAP_LOGO.onlyImgDark };
@@ -2555,9 +3092,9 @@ function sources(variant) {
   }
   return { light: STN_INFOMAP_LOGO.full, dark: STN_INFOMAP_LOGO.fullDark };
 }
-var StnLogo = forwardRef18(function StnLogo2({ variant = "horizontal", size = "md", theme, alt = "InfoMap SRM", className, ...rest }, ref) {
+var StnLogo = forwardRef19(function StnLogo2({ variant = "horizontal", size = "md", theme, alt = "InfoMap SRM", className, ...rest }, ref) {
   const { light, dark } = sources(variant);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs19(
     "span",
     {
       ref,
@@ -2565,17 +3102,17 @@ var StnLogo = forwardRef18(function StnLogo2({ variant = "horizontal", size = "m
       "data-theme": theme,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx23("img", { className: "stn-logo__img light", src: light, alt: theme === "dark" ? "" : alt }),
-        /* @__PURE__ */ jsx23("img", { className: "stn-logo__img dark", src: dark, alt: theme === "light" ? "" : alt })
+        /* @__PURE__ */ jsx25("img", { className: "stn-logo__img light", src: light, alt: theme === "dark" ? "" : alt }),
+        /* @__PURE__ */ jsx25("img", { className: "stn-logo__img dark", src: dark, alt: theme === "light" ? "" : alt })
       ]
     }
   );
 });
 
 // src/components/StnBadge.tsx
-import React from "react";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-var StnBadge = React.forwardRef(
+import React2 from "react";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+var StnBadge = React2.forwardRef(
   ({
     badgeContent,
     variant = "standard",
@@ -2617,7 +3154,7 @@ var StnBadge = React.forwardRef(
       ...badgeStyle,
       ...isStandalone && style ? style : {}
     };
-    const badgeElement = /* @__PURE__ */ jsx24(
+    const badgeElement = /* @__PURE__ */ jsx26(
       "span",
       {
         ref: isStandalone ? ref : void 0,
@@ -2641,7 +3178,7 @@ var StnBadge = React.forwardRef(
     if (isStandalone) {
       return badgeElement;
     }
-    return /* @__PURE__ */ jsxs17("span", { ref, className: cn("stn-badge-root", className), style, ...restProps, children: [
+    return /* @__PURE__ */ jsxs20("span", { ref, className: cn("stn-badge-root", className), style, ...restProps, children: [
       children,
       badgeElement
     ] });
@@ -2653,11 +3190,11 @@ StnBadge.displayName = "StnBadge";
 import {
   STN_GRADE_SOURCE
 } from "@stn-uiux/pub-ui/data/stnChip";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 function hasSideLabel(sideLabel) {
   return sideLabel !== void 0 && sideLabel !== null && sideLabel !== "";
 }
-var DefaultDeleteIcon = () => /* @__PURE__ */ jsx25("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx25("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) });
+var DefaultDeleteIcon = () => /* @__PURE__ */ jsx27("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx27("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" }) });
 function StnChip(props) {
   const {
     variant = "filled",
@@ -2712,9 +3249,9 @@ function StnChip(props) {
       onClick?.(e);
     }
   };
-  const iconElement = icon ? /* @__PURE__ */ jsx25("span", { className: "stn-chip__icon", children: icon }) : null;
-  const contentElement = /* @__PURE__ */ jsx25("span", { className: "stn-chip__label", children: content });
-  const deleteElement = onDelete ? /* @__PURE__ */ jsx25(
+  const iconElement = icon ? /* @__PURE__ */ jsx27("span", { className: "stn-chip__icon", children: icon }) : null;
+  const contentElement = /* @__PURE__ */ jsx27("span", { className: "stn-chip__label", children: content });
+  const deleteElement = onDelete ? /* @__PURE__ */ jsx27(
     "button",
     {
       type: "button",
@@ -2724,7 +3261,7 @@ function StnChip(props) {
         e.stopPropagation();
         onDelete(e);
       },
-      children: deleteIcon ?? /* @__PURE__ */ jsx25(DefaultDeleteIcon, {})
+      children: deleteIcon ?? /* @__PURE__ */ jsx27(DefaultDeleteIcon, {})
     }
   ) : null;
   const elements = [];
@@ -2741,7 +3278,7 @@ function StnChip(props) {
   if (deleteElement && deleteIconPosition === "right") {
     elements.push(deleteElement);
   }
-  const chip = /* @__PURE__ */ jsx25(
+  const chip = /* @__PURE__ */ jsx27(
     "span",
     {
       role,
@@ -2766,241 +3303,19 @@ function StnChip(props) {
   if (!hasSideLabel(resolvedSideLabel)) {
     return chip;
   }
-  return /* @__PURE__ */ jsxs18("span", { className: cn("stn-chip-wrap", positionClass, className), children: [
+  return /* @__PURE__ */ jsxs21("span", { className: cn("stn-chip-wrap", positionClass, className), children: [
     chip,
-    /* @__PURE__ */ jsx25("span", { className: "stn-chip__side", children: resolvedSideLabel })
+    /* @__PURE__ */ jsx27("span", { className: "stn-chip__side", children: resolvedSideLabel })
   ] });
 }
 
-// src/components/StnSeverityBadge.tsx
-import React2 from "react";
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
-var SEVERITY_DEFAULT_LABELS = {
-  critical: "Critical",
-  major: "Major",
-  minor: "Minor",
-  warning: "Warning"
-};
-var SEVERITY_ICONS = {
-  critical: "fill/alert4",
-  major: "fill/alert3",
-  minor: "fill/alert2",
-  warning: "fill/alert1"
-};
-var StnSeverityBadge = React2.forwardRef(
-  ({
-    severity,
-    variant = "badge",
-    size = "md",
-    round = false,
-    showIcon = true,
-    iconOnly = false,
-    glow = false,
-    blur = false,
-    label,
-    active = false,
-    onClick,
-    className = "",
-    children,
-    ...restProps
-  }, ref) => {
-    const isFilter = variant === "filter";
-    const isInteractive = isFilter || Boolean(onClick);
-    const Component = isInteractive ? "button" : "span";
-    const isIconOnly = Boolean(iconOnly);
-    const hasGlow = Boolean(glow || blur || variant === "glow");
-    const classNames = [
-      "stn-severity-badge",
-      isFilter ? "filter" : "badge",
-      size,
-      round ? "round" : "",
-      isIconOnly ? "icon-only" : "",
-      hasGlow ? "glow" : "",
-      severity,
-      active ? "is-active" : "",
-      className
-    ].filter(Boolean).join(" ");
-    const defaultLabel = SEVERITY_DEFAULT_LABELS[severity];
-    const displayLabel = children ?? label ?? defaultLabel;
-    const iconName = SEVERITY_ICONS[severity];
-    const elementProps = {
-      ref,
-      className: classNames,
-      onClick,
-      title: restProps.title ?? (isIconOnly ? defaultLabel : void 0),
-      "aria-label": restProps["aria-label"] ?? (isIconOnly ? defaultLabel : void 0),
-      ...restProps
-    };
-    if (Component === "button") {
-      elementProps.type = restProps.type || "button";
-      if (isFilter) {
-        elementProps["aria-pressed"] = active;
-      }
-    }
-    const iconSize = isFilter ? 16 : size === "sm" ? 12 : size === "lg" ? 16 : 14;
-    return /* @__PURE__ */ jsxs19(Component, { ...elementProps, children: [
-      (showIcon || isIconOnly) && /* @__PURE__ */ jsx26(
-        StnIcon,
-        {
-          name: iconName,
-          size: iconSize,
-          className: "stn-severity-badge__icon",
-          color: "none",
-          "aria-hidden": "true"
-        }
-      ),
-      !isIconOnly && /* @__PURE__ */ jsx26("span", { className: "stn-severity-badge__label", children: displayLabel })
-    ] });
-  }
-);
-StnSeverityBadge.displayName = "StnSeverityBadge";
-var ALL_SEVERITIES = ["critical", "major", "minor", "warning"];
-var StnSeverityFilter = ({
-  value = ALL_SEVERITIES,
-  onChange,
-  disabledSeverities = [],
-  showIcon = true,
-  className = ""
-}) => {
-  const handleToggle = (sev) => {
-    if (!onChange) return;
-    const exists = value.includes(sev);
-    const next = exists ? value.filter((item) => item !== sev) : [...value, sev];
-    onChange(next);
-  };
-  return /* @__PURE__ */ jsx26("div", { className: `stn-severity-filter-group ${className}`.trim(), role: "group", "aria-label": "\uC2EC\uAC01\uB3C4 \uD544\uD130", children: ALL_SEVERITIES.map((sev) => {
-    const isActive = value.includes(sev);
-    const isDisabled = disabledSeverities.includes(sev);
-    return /* @__PURE__ */ jsx26(
-      StnSeverityBadge,
-      {
-        severity: sev,
-        variant: "filter",
-        showIcon,
-        active: isActive,
-        disabled: isDisabled,
-        onClick: () => !isDisabled && handleToggle(sev)
-      },
-      sev
-    );
-  }) });
-};
-StnSeverityFilter.displayName = "StnSeverityFilter";
-
-// src/components/StnSystemChip.tsx
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
-var DEFAULT_TONE_LABELS = {
-  cr: "CR",
-  mj: "MJ",
-  mn: "MN",
-  wr: "WR",
-  critical: "CR",
-  major: "MJ",
-  minor: "MN",
-  warning: "WR",
-  info: "Info",
-  success: "Success",
-  teal: "WR"
-};
-var TONE_PRIORITY = ["cr", "critical", "mj", "major", "mn", "minor", "wr", "warning", "teal"];
-function canonicalTone(tone) {
-  const raw = tone ? tone.toLowerCase() : "info";
-  if (raw === "critical") return "cr";
-  if (raw === "major") return "mj";
-  if (raw === "minor") return "mn";
-  if (raw === "warning" || raw === "teal") return "wr";
-  return raw;
-}
-function pickPrimaryIndex(items) {
-  for (const tone of TONE_PRIORITY) {
-    const index = items.findIndex((item) => {
-      const t = canonicalTone(item.tone);
-      const value = Number(item.value ?? item.count ?? 0);
-      return t === tone && Number.isFinite(value) && value > 0;
-    });
-    if (index >= 0) return index;
-  }
-  return 0;
-}
-function StnSystemChip({
-  items,
-  showLabel = false,
-  border = true,
-  bordered = true,
-  textPosition = "right",
-  compact,
-  className,
-  ...rest
-}) {
-  const primaryIndex = pickPrimaryIndex(items);
-  const hasBorder = border !== false && bordered !== false;
-  return /* @__PURE__ */ jsx27(
-    "div",
-    {
-      className: cn(
-        "stn-system-chip",
-        !hasBorder && "no-border stn-system-chip--no-border",
-        textPosition === "left" && "stn-system-chip--text-left",
-        showLabel && "stn-system-chip--labeled",
-        compact === true && "compact",
-        className
-      ),
-      role: "group",
-      "aria-label": "System status chip",
-      ...compact === void 0 ? {} : { "data-compact": compact ? "true" : "false" },
-      ...rest,
-      children: items.map((item, index) => {
-        const tone = canonicalTone(item.tone);
-        const isNamedTone = [
-          "cr",
-          "mj",
-          "mn",
-          "wr",
-          "info",
-          "success",
-          "purple",
-          "neutral"
-        ].includes(tone);
-        const dotStyle = item.dotColor ? { backgroundColor: item.dotColor } : !isNamedTone && item.tone ? { backgroundColor: item.tone } : void 0;
-        const displayValue = item.value ?? item.count ?? 0;
-        const displayLabel = item.label ?? (showLabel ? DEFAULT_TONE_LABELS[tone] || item.tone && DEFAULT_TONE_LABELS[item.tone] : void 0);
-        return /* @__PURE__ */ jsxs20(
-          "div",
-          {
-            className: cn(
-              "stn-system-chip__item",
-              index === primaryIndex && "stn-system-chip__item--primary"
-            ),
-            children: [
-              /* @__PURE__ */ jsx27(
-                "span",
-                {
-                  className: cn(
-                    "stn-system-chip__dot",
-                    isNamedTone && `stn-system-chip__dot--${tone}`
-                  ),
-                  style: dotStyle,
-                  "aria-hidden": "true"
-                }
-              ),
-              displayLabel ? /* @__PURE__ */ jsx27("span", { className: "stn-system-chip__label", children: displayLabel }) : null,
-              /* @__PURE__ */ jsx27("span", { className: "stn-system-chip__count", children: displayValue })
-            ]
-          },
-          item.id
-        );
-      })
-    }
-  );
-}
-
 // src/components/StnToggleButton.tsx
 import {
-  forwardRef as forwardRef19,
-  useState as useState6
+  forwardRef as forwardRef20,
+  useState as useState8
 } from "react";
-import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
-var StnToggleButton = forwardRef19(
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+var StnToggleButton = forwardRef20(
   function StnToggleButton2({
     pressed: pressedProp,
     defaultPressed = false,
@@ -3022,7 +3337,7 @@ var StnToggleButton = forwardRef19(
     ...rest
   }, ref) {
     const isControlled = pressedProp !== void 0;
-    const [internalPressed, setInternalPressed] = useState6(defaultPressed);
+    const [internalPressed, setInternalPressed] = useState8(defaultPressed);
     const isPressed = isControlled ? Boolean(pressedProp) : internalPressed;
     const hasGradient = gradient && gradient !== "none";
     const isKnownTone = [
@@ -3086,10 +3401,10 @@ var StnToggleButton = forwardRef19(
         style: combinedStyle,
         onClick: handleClick,
         ...rest,
-        children: iconPosition === "right" ? /* @__PURE__ */ jsxs21(Fragment2, { children: [
+        children: iconPosition === "right" ? /* @__PURE__ */ jsxs22(Fragment3, { children: [
           children,
           renderedIcon
-        ] }) : /* @__PURE__ */ jsxs21(Fragment2, { children: [
+        ] }) : /* @__PURE__ */ jsxs22(Fragment3, { children: [
           renderedIcon,
           children
         ] })
@@ -3099,9 +3414,9 @@ var StnToggleButton = forwardRef19(
 );
 
 // src/components/StnSwitch.tsx
-import { forwardRef as forwardRef20, useId as useId5 } from "react";
-import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
-var StnSwitch = forwardRef20(function StnSwitch2({
+import { forwardRef as forwardRef21, useId as useId5 } from "react";
+import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+var StnSwitch = forwardRef21(function StnSwitch2({
   label,
   size = "md",
   color,
@@ -3153,7 +3468,7 @@ var StnSwitch = forwardRef20(function StnSwitch2({
     "--stn-switch-track-checked": color
   } : void 0;
   const sizeClass5 = size !== "md" ? size : "";
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "label",
     {
       className: cn(
@@ -3182,7 +3497,7 @@ var StnSwitch = forwardRef20(function StnSwitch2({
           }
         ),
         /* @__PURE__ */ jsx29("span", { className: "stn-switch__control", "aria-hidden": "true", children: /* @__PURE__ */ jsx29("span", { className: "stn-switch__thumb" }) }),
-        label != null && label !== "" ? /* @__PURE__ */ jsxs22("span", { className: "stn-switch__label", children: [
+        label != null && label !== "" ? /* @__PURE__ */ jsxs23("span", { className: "stn-switch__label", children: [
           label,
           required && /* @__PURE__ */ jsx29("span", { className: "stn-switch__required", "aria-hidden": "true", children: "*" })
         ] }) : null
@@ -3192,9 +3507,9 @@ var StnSwitch = forwardRef20(function StnSwitch2({
 });
 
 // src/components/StnRadio.tsx
-import { forwardRef as forwardRef21, useId as useId6 } from "react";
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
-var StnRadio = forwardRef21(function StnRadio2({
+import { forwardRef as forwardRef22, useId as useId6 } from "react";
+import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+var StnRadio = forwardRef22(function StnRadio2({
   label,
   size = "md",
   color,
@@ -3225,7 +3540,7 @@ var StnRadio = forwardRef21(function StnRadio2({
     "--stn-radio-dot": color,
     "--stn-radio-checked-border": color
   } : void 0;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "span",
     {
       className: cn(
@@ -3241,7 +3556,7 @@ var StnRadio = forwardRef21(function StnRadio2({
       style: inlineStyle,
       children: [
         /* @__PURE__ */ jsx30("input", { ref, type: "radio", id, disabled, required, ...rest }),
-        /* @__PURE__ */ jsxs23("label", { htmlFor: id, "aria-hidden": isControlOnly ? true : void 0, children: [
+        /* @__PURE__ */ jsxs24("label", { htmlFor: id, "aria-hidden": isControlOnly ? true : void 0, children: [
           label,
           required && !isControlOnly && /* @__PURE__ */ jsx30("span", { className: "stn-radio__required", "aria-hidden": "true", children: "*" })
         ] })
@@ -3303,7 +3618,7 @@ function StnRadioGroup({
 
 // src/components/StnSegmented.tsx
 import { useId as useId8 } from "react";
-import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 function renderSegmentedIcon(icon, size) {
   if (!icon) return null;
   if (typeof icon === "string") {
@@ -3318,6 +3633,8 @@ function StnSegmented(props) {
     size = "md",
     orientation = "horizontal",
     vertical = false,
+    fullWidth = false,
+    width,
     block = false,
     disabled = false,
     color,
@@ -3329,6 +3646,7 @@ function StnSegmented(props) {
   const name = nameProp ?? `stn-segmented-${autoName}`;
   const multiple = props.multiple === true;
   const isVertical = vertical || orientation === "vertical";
+  const isFull = Boolean(fullWidth || width === "full" || block);
   function isSelected(optionValue) {
     if (multiple) return props.value.includes(optionValue);
     return props.value === optionValue;
@@ -3349,7 +3667,7 @@ function StnSegmented(props) {
         "stn-segmented",
         isVertical && "vertical",
         size !== "md" && size,
-        block && "block",
+        isFull && "full block",
         multiple && "stn-segmented--multiple",
         color,
         className
@@ -3362,7 +3680,7 @@ function StnSegmented(props) {
         const itemDisabled = disabled || opt.disabled;
         const isIconOnly = Boolean(opt.icon && !opt.label);
         const ariaLabelText = opt["aria-label"] || (isIconOnly && typeof opt.value === "string" ? opt.value : void 0);
-        return /* @__PURE__ */ jsxs24(
+        return /* @__PURE__ */ jsxs25(
           "button",
           {
             id: opt.id,
@@ -3399,38 +3717,9 @@ import {
   useEffect as useEffect7,
   useId as useId9,
   useRef as useRef5,
-  useState as useState7
+  useState as useState9
 } from "react";
-
-// src/inputWidth.ts
-import {
-  resolveStnInputWidth
-} from "@stn-uiux/pub-ui/data/stnInputWidth";
-function resolveInputWidthProps(_prefix, fullWidth, width) {
-  const resolved = resolveStnInputWidth(fullWidth, width);
-  if (resolved.kind === "full") {
-    return {
-      className: "full",
-      style: void 0
-    };
-  }
-  if (resolved.kind === "preset" && resolved.preset != null) {
-    return {
-      className: `w${resolved.preset}`,
-      style: void 0
-    };
-  }
-  if (resolved.kind === "custom" && resolved.styleWidth != null) {
-    return {
-      className: "",
-      style: { width: resolved.styleWidth }
-    };
-  }
-  return { className: "", style: void 0 };
-}
-
-// src/components/StnDropdown.tsx
-import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 function resolveGlyph(node) {
   if (typeof node === "string") return /* @__PURE__ */ jsx33(StnIcon, { name: node, size: 16, color: "currentColor" });
   return node;
@@ -3459,7 +3748,7 @@ function variantClass(variant = "outline") {
   return "outline";
 }
 function useControllable(controlled, defaultValue, onChange) {
-  const [internal, setInternal] = useState7(defaultValue);
+  const [internal, setInternal] = useState9(defaultValue);
   const value = controlled ?? internal;
   const setValue = useCallback5(
     (next) => {
@@ -3501,7 +3790,7 @@ function StnDropdown({
   const autoId = useId9();
   const rootId = idProp ?? `stn-dropdown-${autoId.replace(/:/g, "")}`;
   const [value, setValue] = useControllable(valueProp, defaultValue, onChange);
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState9(false);
   const rootRef = useRef5(null);
   const selected = options.find((o) => o.value === value);
   const hasValue = selected !== void 0 && value !== "";
@@ -3573,7 +3862,7 @@ function StnDropdown({
       setValue(enabledOptions[nextIndex].value);
     }
   };
-  const dropdownNode = /* @__PURE__ */ jsxs25(
+  const dropdownNode = /* @__PURE__ */ jsxs26(
     "div",
     {
       ref: rootRef,
@@ -3624,13 +3913,13 @@ function StnDropdown({
   const hasWrap = hasLabel || hasHelper;
   if (!hasWrap) return dropdownNode;
   const resolvedLabelIcon = labelIcon ?? icon;
-  const labelElement = hasLabel ? /* @__PURE__ */ jsxs25("label", { htmlFor: rootId, className: "stn-dropdown__label", children: [
+  const labelElement = hasLabel ? /* @__PURE__ */ jsxs26("label", { htmlFor: rootId, className: "stn-dropdown__label", children: [
     resolvedLabelIcon ? /* @__PURE__ */ jsx33("span", { className: "stn-dropdown__label-icon", "aria-hidden": "true", children: resolveGlyph(resolvedLabelIcon) }) : null,
     /* @__PURE__ */ jsx33("span", { className: "stn-dropdown__label-text", children: label }),
     required && /* @__PURE__ */ jsx33("span", { className: "stn-dropdown__required", "aria-hidden": "true", children: "*" })
   ] }) : null;
   const isRow = labelPosition === "left" || labelPosition === "right";
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: cn(
@@ -3648,7 +3937,7 @@ function StnDropdown({
       ...divRest,
       children: [
         hasLabel && (labelPosition === "left" || labelPosition === "top") ? labelElement : null,
-        /* @__PURE__ */ jsxs25("div", { className: "stn-dropdown-wrap__body", children: [
+        /* @__PURE__ */ jsxs26("div", { className: "stn-dropdown-wrap__body", children: [
           dropdownNode,
           hasHelper && /* @__PURE__ */ jsx33(
             "span",
@@ -3682,8 +3971,8 @@ function StnDropdownMenu({
 }
 
 // src/components/StnTextField.tsx
-import { forwardRef as forwardRef22, useId as useId10 } from "react";
-import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+import { forwardRef as forwardRef23, useId as useId10 } from "react";
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 function normalizeSize(size) {
   if (!size) return "M";
   const u = String(size).toUpperCase();
@@ -3713,7 +4002,7 @@ function resolveGlyph2(node) {
   if (typeof node === "string") return /* @__PURE__ */ jsx35(StnIcon, { name: node, size: 16, color: "currentColor" });
   return node;
 }
-var StnTextField = forwardRef22(function StnTextField2({
+var StnTextField = forwardRef23(function StnTextField2({
   size = "M",
   variant = "outlined",
   color,
@@ -3755,8 +4044,8 @@ var StnTextField = forwardRef22(function StnTextField2({
     sizeClass2(size),
     colorClass(color),
     !hasWrap && widthProps.className,
-    invalid && "stn-text-field--invalid",
-    hasSlot && "stn-text-field--with-icon",
+    invalid && "invalid",
+    hasSlot && "with-icon",
     className
   );
   const input = /* @__PURE__ */ jsx35(
@@ -3774,19 +4063,19 @@ var StnTextField = forwardRef22(function StnTextField2({
       ...rest
     }
   );
-  const field = hasSlot ? /* @__PURE__ */ jsxs26("div", { className: fieldClass, style: hasWrap ? void 0 : widthProps.style, children: [
+  const field = hasSlot ? /* @__PURE__ */ jsxs27("div", { className: fieldClass, style: hasWrap ? void 0 : widthProps.style, children: [
     hasLeft ? /* @__PURE__ */ jsx35("span", { className: "stn-text-field__icon-left", "aria-hidden": true, children: /* @__PURE__ */ jsx35("span", { className: "stn-text-field__icon-box", children: resolveGlyph2(leftNode) }) }) : null,
     input,
     hasRight ? /* @__PURE__ */ jsx35("span", { className: "stn-text-field__icon-right", "aria-hidden": true, children: /* @__PURE__ */ jsx35("span", { className: "stn-text-field__icon-box", children: resolveGlyph2(rightNode) }) }) : null
   ] }) : input;
   if (!hasWrap) return field;
-  const labelElement = hasLabel ? /* @__PURE__ */ jsxs26("label", { htmlFor: id, className: "stn-text-field__label", children: [
+  const labelElement = hasLabel ? /* @__PURE__ */ jsxs27("label", { htmlFor: id, className: "stn-text-field__label", children: [
     labelIcon ? /* @__PURE__ */ jsx35("span", { className: "stn-text-field__label-icon", "aria-hidden": "true", children: resolveGlyph2(labelIcon) }) : null,
     /* @__PURE__ */ jsx35("span", { className: "stn-text-field__label-text", children: label }),
     required && /* @__PURE__ */ jsx35("span", { className: "stn-text-field__required", "aria-hidden": "true", children: "*" })
   ] }) : null;
   const isRow = labelPosition === "left" || labelPosition === "right";
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       className: cn(
@@ -3800,7 +4089,7 @@ var StnTextField = forwardRef22(function StnTextField2({
       style: widthProps.style,
       children: [
         hasLabel && (labelPosition === "left" || labelPosition === "top") ? labelElement : null,
-        /* @__PURE__ */ jsxs26("div", { className: "stn-text-field-wrap__body", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "stn-text-field-wrap__body", children: [
           field,
           hasHelper && /* @__PURE__ */ jsx35(
             "p",
@@ -3818,11 +4107,11 @@ var StnTextField = forwardRef22(function StnTextField2({
 });
 
 // src/components/StnDateRangeField.tsx
-import { forwardRef as forwardRef23, useId as useId11 } from "react";
+import { forwardRef as forwardRef24, useId as useId11 } from "react";
 import {
   formatStnDateRangeFieldValue
 } from "@stn-uiux/pub-ui/data/stnDateRangeField";
-import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 function resolveGlyph3(node) {
   if (typeof node === "string") return /* @__PURE__ */ jsx36(StnIcon, { name: node, size: 16, color: "currentColor" });
   return node;
@@ -3848,7 +4137,7 @@ function resolveValue(value, format) {
   const trimmed = value.trim();
   return trimmed || null;
 }
-var StnDateRangeField = forwardRef23(function StnDateRangeField2({
+var StnDateRangeField = forwardRef24(function StnDateRangeField2({
   size = "md",
   variant = "outline",
   start,
@@ -3902,8 +4191,8 @@ var StnDateRangeField = forwardRef23(function StnDateRangeField2({
       ),
       style: !hasWrap ? widthProps.style ?? style : void 0,
       ...rest,
-      children: /* @__PURE__ */ jsxs27("span", { className: "stn-date-range-field__inner", children: [
-        /* @__PURE__ */ jsxs27("span", { className: "stn-date-range-field__text", children: [
+      children: /* @__PURE__ */ jsxs28("span", { className: "stn-date-range-field__inner", children: [
+        /* @__PURE__ */ jsxs28("span", { className: "stn-date-range-field__text", children: [
           /* @__PURE__ */ jsx36("span", { className: cn("stn-date-range-field__value", !startText && "is-placeholder"), children: startText ?? startPlaceholder }),
           /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__sep", "aria-hidden": "true", children: "~" }),
           /* @__PURE__ */ jsx36("span", { className: cn("stn-date-range-field__value", !endText && "is-placeholder"), children: endText ?? endPlaceholder })
@@ -3914,13 +4203,13 @@ var StnDateRangeField = forwardRef23(function StnDateRangeField2({
   );
   if (!hasWrap) return buttonNode;
   const resolvedLabelIcon = labelIcon ?? icon;
-  const labelElement = hasLabel ? /* @__PURE__ */ jsxs27("label", { htmlFor: rootId, className: "stn-date-range-field__label", children: [
+  const labelElement = hasLabel ? /* @__PURE__ */ jsxs28("label", { htmlFor: rootId, className: "stn-date-range-field__label", children: [
     resolvedLabelIcon ? /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__label-icon", "aria-hidden": "true", children: resolveGlyph3(resolvedLabelIcon) }) : null,
     /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__label-text", children: label }),
     required && /* @__PURE__ */ jsx36("span", { className: "stn-date-range-field__required", "aria-hidden": "true", children: "*" })
   ] }) : null;
   const isRow = labelPosition === "left" || labelPosition === "right";
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: cn(
@@ -3936,7 +4225,7 @@ var StnDateRangeField = forwardRef23(function StnDateRangeField2({
       style: widthProps.style ?? style,
       children: [
         hasLabel && (labelPosition === "left" || labelPosition === "top") ? labelElement : null,
-        /* @__PURE__ */ jsxs27("div", { className: "stn-date-range-field-wrap__body", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "stn-date-range-field-wrap__body", children: [
           buttonNode,
           hasHelper && /* @__PURE__ */ jsx36(
             "span",
@@ -3957,8 +4246,13 @@ var StnDateRangeField = forwardRef23(function StnDateRangeField2({
 });
 
 // src/components/StnLabelPrefix.tsx
-import { useId as useId12 } from "react";
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import {
+  useId as useId12,
+  useState as useState10,
+  isValidElement as isValidElement4,
+  cloneElement as cloneElement4
+} from "react";
+import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
 function sizeClass4(size) {
   return size;
 }
@@ -3968,6 +4262,14 @@ function variantClass4(variant) {
 function StnLabelPrefix({
   label,
   labelIcon,
+  checkbox = false,
+  checked,
+  defaultChecked,
+  onCheckboxChange,
+  checkboxDisabled = false,
+  checkboxSize,
+  disableControlWhenUnchecked = false,
+  checkboxSlot,
   labelPosition = "prefix",
   required = false,
   size = "md",
@@ -3990,6 +4292,15 @@ function StnLabelPrefix({
   const isError = error || invalid || color === "error";
   const hasHelper = helperText != null && helperText !== "";
   const helperId = hasHelper ? `${id}-helper` : void 0;
+  const [internalChecked, setInternalChecked] = useState10(defaultChecked ?? false);
+  const isChecked = checked !== void 0 ? checked : internalChecked;
+  const handleCheckboxChange = (nextChecked) => {
+    if (checked === void 0) {
+      setInternalChecked(nextChecked);
+    }
+    onCheckboxChange?.(nextChecked);
+  };
+  const isControlDisabled = disabled || disableControlWhenUnchecked && !isChecked;
   const widthProps = resolveInputWidthProps("stn-label-prefix", fullWidth, width);
   const rootClass = cn(
     "stn-label-prefix",
@@ -4000,18 +4311,39 @@ function StnLabelPrefix({
     radius && `radius-${radius}`,
     !hasHelper && widthProps.className,
     disabled && "is-disabled",
+    isControlDisabled && !disabled && "is-control-disabled",
     isError && "is-error",
     !hasHelper && className
   );
-  const labelSection = /* @__PURE__ */ jsxs28("span", { className: "stn-label-prefix__label", children: [
+  const defaultCheckboxSize = size === "lg" ? "md" : "sm";
+  const resolvedCheckboxSize = checkboxSize ?? defaultCheckboxSize;
+  const checkboxNode = checkboxSlot ?? (checkbox ? /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__checkbox", children: /* @__PURE__ */ jsx37(
+    StnCheckbox,
+    {
+      size: resolvedCheckboxSize,
+      controlOnly: true,
+      checked: isChecked,
+      disabled: disabled || checkboxDisabled,
+      onChange: (e) => handleCheckboxChange(e.target.checked),
+      "aria-label": typeof label === "string" ? `${label} \uC120\uD0DD` : void 0
+    }
+  ) }) : null);
+  const labelSection = /* @__PURE__ */ jsxs29("span", { className: "stn-label-prefix__label", children: [
+    checkboxNode,
     labelIcon != null && /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__icon", "aria-hidden": "true", children: labelIcon }),
-    /* @__PURE__ */ jsxs28("span", { className: "stn-label-prefix__text", children: [
+    /* @__PURE__ */ jsxs29("span", { className: "stn-label-prefix__text", children: [
       label,
       required && /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__required", "aria-hidden": "true", children: "*" })
     ] }),
     /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__divider", "aria-hidden": "true" })
   ] });
-  const prefixNode = /* @__PURE__ */ jsxs28(
+  let renderedControl = children;
+  if (isControlDisabled && isValidElement4(children) && typeof children.type !== "string") {
+    renderedControl = cloneElement4(children, {
+      disabled: true
+    });
+  }
+  const prefixNode = /* @__PURE__ */ jsxs29(
     "div",
     {
       id: !hasHelper ? id : void 0,
@@ -4023,14 +4355,14 @@ function StnLabelPrefix({
       ...!hasHelper ? rest : {},
       children: [
         labelSection,
-        /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__control", children })
+        /* @__PURE__ */ jsx37("span", { className: "stn-label-prefix__control", children: renderedControl })
       ]
     }
   );
   if (!hasHelper) {
     return prefixNode;
   }
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       id,
@@ -4110,7 +4442,7 @@ import {
 } from "@stn-uiux/pub-ui/data/stnSearchRequirement";
 
 // src/patterns/search/StnSearchRequirementBar.tsx
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 function StnSearchRequirementBar({
   children,
   className,
@@ -4143,7 +4475,7 @@ function StnSearchRequirementBarField({
   controlClassName,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs29("div", { className: cn("stn-search-requirement__field", className), "data-stn-search-requirement": "field", ...rest, children: [
+  return /* @__PURE__ */ jsxs30("div", { className: cn("stn-search-requirement__field", className), "data-stn-search-requirement": "field", ...rest, children: [
     /* @__PURE__ */ jsx38("span", { className: cn("stn-search-requirement__label", labelClassName), children: label }),
     /* @__PURE__ */ jsx38("div", { className: cn("stn-search-requirement__control", controlClassName), children })
   ] });
@@ -4151,6 +4483,7 @@ function StnSearchRequirementBarField({
 function StnSearchRequirementBarSearchButton({
   children = "\uAC80\uC0C9",
   size = "md",
+  variant = "outlined",
   icon = /* @__PURE__ */ jsx38(StnIcon, { name: "line/search", size: 16, color: "currentColor" }),
   className,
   ...rest
@@ -4159,7 +4492,7 @@ function StnSearchRequirementBarSearchButton({
     StnButton,
     {
       size,
-      variant: "contained",
+      variant,
       icon,
       className,
       "data-stn-search-requirement": "search",
@@ -4217,13 +4550,13 @@ import {
   useEffect as useEffect9,
   useLayoutEffect,
   useRef as useRef6,
-  useState as useState9
+  useState as useState12
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { formatStnDateRangeFieldValue as formatStnDateRangeFieldValue2 } from "@stn-uiux/pub-ui/data/stnDateRangeField";
 
 // src/components/datePicker/StnDateRangePicker.tsx
-import { useCallback as useCallback6, useEffect as useEffect8, useId as useId13, useMemo as useMemo3, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect8, useId as useId13, useMemo as useMemo3, useState as useState11 } from "react";
 import {
   STN_DATE_PICKER_WEEKDAYS
 } from "@stn-uiux/pub-ui/data/stnDatePicker";
@@ -4283,9 +4616,9 @@ function normalizeRange(start, end) {
 }
 
 // src/components/datePicker/StnDateRangePicker.tsx
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 function useDraftRange(value, open) {
-  const [draft, setDraft] = useState8(value);
+  const [draft, setDraft] = useState11(value);
   useEffect8(() => {
     if (open) setDraft(value);
   }, [open, value]);
@@ -4294,13 +4627,13 @@ function useDraftRange(value, open) {
 function CalendarPanel({ month, range, onPick, onPrev, onNext, showPrev = true, showNext = true }) {
   const days = useMemo3(() => buildMonthGrid(month), [month]);
   const { start, end } = range;
-  return /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-panel", children: [
-    /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-panel__header", children: [
+  return /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-panel", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-panel__header", children: [
       showPrev ? /* @__PURE__ */ jsx39("button", { type: "button", className: "stn-date-picker-panel__nav", onClick: onPrev, "aria-label": "Previous month", children: "\u2039" }) : /* @__PURE__ */ jsx39("span", { className: "stn-date-picker-panel__nav", "aria-hidden": "true" }),
       /* @__PURE__ */ jsx39("p", { className: "stn-date-picker-panel__title", children: formatMonthTitle(month) }),
       showNext ? /* @__PURE__ */ jsx39("button", { type: "button", className: "stn-date-picker-panel__nav", onClick: onNext, "aria-label": "Next month", children: "\u203A" }) : /* @__PURE__ */ jsx39("span", { className: "stn-date-picker-panel__nav", "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ jsxs30("table", { className: "stn-date-picker-content", children: [
+    /* @__PURE__ */ jsxs31("table", { className: "stn-date-picker-content", children: [
       /* @__PURE__ */ jsx39("thead", { children: /* @__PURE__ */ jsx39("tr", { children: STN_DATE_PICKER_WEEKDAYS.map((label) => /* @__PURE__ */ jsx39("th", { scope: "col", children: label }, label)) }) }),
       /* @__PURE__ */ jsx39("tbody", { children: Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx39("tr", { children: days.slice(row * 7, row * 7 + 7).map((cell) => {
         const inRange = start && end && isBetweenDays(cell.date, start, end);
@@ -4338,9 +4671,9 @@ function TimeColumns({ label, value, onChange }) {
   const seconds = value?.getSeconds() ?? 0;
   const base = value ?? /* @__PURE__ */ new Date();
   const patch = (h, m, s) => onChange(setTimePart(base, h, m, s));
-  return /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-time__side", children: [
+  return /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-time__side", children: [
     /* @__PURE__ */ jsx39("span", { className: "stn-date-picker-time__label", children: label }),
-    /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-time__columns", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-time__columns", children: [
       /* @__PURE__ */ jsx39(
         StnScroll,
         {
@@ -4408,7 +4741,7 @@ function StnDateRangePicker({
 }) {
   const titleId = useId13();
   const [draft, setDraft] = useDraftRange(value, open);
-  const [leftMonth, setLeftMonth] = useState8(() => startOfMonth(draft.start ?? draft.end ?? /* @__PURE__ */ new Date()));
+  const [leftMonth, setLeftMonth] = useState11(() => startOfMonth(draft.start ?? draft.end ?? /* @__PURE__ */ new Date()));
   useEffect8(() => {
     if (!open) return;
     const anchor = draft.start ?? draft.end ?? /* @__PURE__ */ new Date();
@@ -4468,9 +4801,9 @@ function StnDateRangePicker({
       role: "dialog",
       "aria-modal": "false",
       "aria-labelledby": titleId,
-      children: /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-dropdown__body", children: [
+      children: /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-dropdown__body", children: [
         /* @__PURE__ */ jsx39("span", { id: titleId, className: "stn-sf__visually-hidden", children: "Date range picker" }),
-        /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-dropdown__panels", children: [
+        /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-dropdown__panels", children: [
           /* @__PURE__ */ jsx39(
             CalendarPanel,
             {
@@ -4494,7 +4827,7 @@ function StnDateRangePicker({
             }
           )
         ] }),
-        showTime ? /* @__PURE__ */ jsxs30("div", { className: "stn-date-picker-time", children: [
+        showTime ? /* @__PURE__ */ jsxs31("div", { className: "stn-date-picker-time", children: [
           /* @__PURE__ */ jsx39(
             TimeColumns,
             {
@@ -4519,9 +4852,9 @@ function StnDateRangePicker({
 }
 
 // src/components/datePicker/StnDateRangePickerField.tsx
-import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
 function useControllableRange(controlled, defaultValue, onChange) {
-  const [internal, setInternal] = useState9(defaultValue);
+  const [internal, setInternal] = useState12(defaultValue);
   const value = controlled ?? internal;
   const setValue = useCallback7(
     (next) => {
@@ -4553,8 +4886,8 @@ function StnDateRangePickerField({
 }) {
   const format = formatProp ?? (showTime ? formatStnDateRangeFieldValue2 : formatDateOnly);
   const [value, setValue] = useControllableRange(valueProp, defaultValue, onChange);
-  const [open, setOpen] = useState9(false);
-  const [anchorRect, setAnchorRect] = useState9(null);
+  const [open, setOpen] = useState12(false);
+  const [anchorRect, setAnchorRect] = useState12(null);
   const rootRef = useRef6(null);
   const triggerRef = useRef6(null);
   const panelRef = useRef6(null);
@@ -4591,7 +4924,7 @@ function StnDateRangePickerField({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open]);
-  return /* @__PURE__ */ jsxs31("div", { ref: rootRef, className: cn("stn-date-picker-field", className), children: [
+  return /* @__PURE__ */ jsxs32("div", { ref: rootRef, className: cn("stn-date-picker-field", className), children: [
     /* @__PURE__ */ jsx40(
       StnDateRangeField,
       {
@@ -4631,12 +4964,12 @@ function StnDateRangePickerField({
 }
 
 // src/patterns/search/StnSearchRequirementBarDemo.tsx
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
 var ALL_OPTIONS = [{ value: "", label: "\uC804\uCCB4" }];
 function StnSearchRequirementBarDemo({ onSearch, onExport, className }) {
   const demo = STN_SEARCH_REQUIREMENT_DEMO_FIELDS;
-  return /* @__PURE__ */ jsxs32(StnSearchRequirementBar, { className, children: [
-    /* @__PURE__ */ jsxs32(StnSearchRequirementBar.Fields, { children: [
+  return /* @__PURE__ */ jsxs33(StnSearchRequirementBar, { className, children: [
+    /* @__PURE__ */ jsxs33(StnSearchRequirementBar.Fields, { children: [
       /* @__PURE__ */ jsx41(
         StnTextField,
         {
@@ -4809,7 +5142,7 @@ import {
   STN_LAYER0_BACKGROUND_DEMO_IMAGES,
   STN_LAYER0_MAP_LIGHT_OVERLAY
 } from "@stn-uiux/pub-ui/data/stnLayer0Background";
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 function overlayStyle(overlay) {
   if (overlay == null || overlay <= 0) return void 0;
   const pct = `${Math.min(100, Math.max(0, overlay * 100))}%`;
@@ -4865,7 +5198,7 @@ function StnLayer0Background({
         "aria-hidden": alt === "" ? true : void 0,
         style: { ...overlayStyle(overlay), ...style },
         ...rest,
-        children: /* @__PURE__ */ jsxs33("div", { className: "stn-layer0-bg__media", children: [
+        children: /* @__PURE__ */ jsxs34("div", { className: "stn-layer0-bg__media", children: [
           src ? /* @__PURE__ */ jsx43(
             "img",
             {
@@ -4916,9 +5249,9 @@ import {
 // src/components/StnWidget.tsx
 import {
   Children as Children2,
-  Fragment as Fragment3,
-  cloneElement as cloneElement4,
-  isValidElement as isValidElement4
+  Fragment as Fragment4,
+  cloneElement as cloneElement5,
+  isValidElement as isValidElement5
 } from "react";
 import {
   normalizeStnWidgetAppearance,
@@ -4927,7 +5260,7 @@ import {
 
 // src/components/StnEventBanner.tsx
 import React3 from "react";
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
 var SEVERITY_ICONS2 = {
   critical: "fill/alert4",
   major: "fill/alert3",
@@ -4935,7 +5268,7 @@ var SEVERITY_ICONS2 = {
   warning: "fill/alert1"
 };
 function DefaultTriangleIcon() {
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "svg",
     {
       width: "20",
@@ -4984,7 +5317,7 @@ var StnEventBanner = React3.forwardRef(
     id,
     ...restProps
   }, ref) => {
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(
       "div",
       {
         ref,
@@ -5001,14 +5334,14 @@ var StnEventBanner = React3.forwardRef(
         ),
         ...restProps,
         children: [
-          /* @__PURE__ */ jsxs34("div", { className: "stn-event-banner__left", children: [
+          /* @__PURE__ */ jsxs35("div", { className: "stn-event-banner__left", children: [
             /* @__PURE__ */ jsx44("div", { className: "stn-event-banner__icon-wrap", children: icon ?? resolveDefaultIcon(severity) }),
-            /* @__PURE__ */ jsxs34("div", { className: "stn-event-banner__text", children: [
+            /* @__PURE__ */ jsxs35("div", { className: "stn-event-banner__text", children: [
               title && /* @__PURE__ */ jsx44("span", { className: "stn-event-banner__title", title: typeof title === "string" ? title : void 0, children: title }),
               time && /* @__PURE__ */ jsx44("span", { className: "stn-event-banner__time", title: typeof time === "string" ? time : void 0, children: time })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs34("div", { className: "stn-event-banner__actions", children: [
+          /* @__PURE__ */ jsxs35("div", { className: "stn-event-banner__actions", children: [
             actions,
             actionText && /* @__PURE__ */ jsx44(
               "button",
@@ -5038,7 +5371,7 @@ var StnEventBanner = React3.forwardRef(
 StnEventBanner.displayName = "StnEventBanner";
 
 // src/patterns/scaffold/StnLoadingSkeleton.tsx
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
 function StnLoadingSkeletonLine({ width = "full", className, style, ...rest }) {
   return /* @__PURE__ */ jsx45(
     "div",
@@ -5078,7 +5411,7 @@ function StnLoadingSkeletonCircle({ size = 40, className, style, ...rest }) {
   );
 }
 function StnLoadingSkeletonProfile({ avatarSize = 40, className, style, ...rest }) {
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       className: cn("stn-loading-skeleton--profile", className),
@@ -5088,7 +5421,7 @@ function StnLoadingSkeletonProfile({ avatarSize = 40, className, style, ...rest
       ...rest,
       children: [
         /* @__PURE__ */ jsx45(StnLoadingSkeletonCircle, { size: avatarSize }),
-        /* @__PURE__ */ jsxs35("div", { className: "stn-loading-skeleton__profile-content", children: [
+        /* @__PURE__ */ jsxs36("div", { className: "stn-loading-skeleton__profile-content", children: [
           /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width: "medium" }),
           /* @__PURE__ */ jsx45(StnLoadingSkeletonLine, { width: "short" })
         ] })
@@ -5274,7 +5607,7 @@ function ringOrbitRadius(orbit, ringCount, baseRadius, gap = 36) {
 }
 
 // src/components/topology/StnTopologyNodeMark.tsx
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
 function renderTopologyIcon(icon, color, px) {
   if (!icon) return null;
   if (typeof icon !== "string") return icon;
@@ -5290,7 +5623,7 @@ function renderTopologyIcon(icon, color, px) {
   };
   switch (icon) {
     case "server":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+      return /* @__PURE__ */ jsxs37("svg", { ...iconProps, children: [
         /* @__PURE__ */ jsx46("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2", ry: "2" }),
         /* @__PURE__ */ jsx46("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2", ry: "2" }),
         /* @__PURE__ */ jsx46("line", { x1: "6", y1: "6", x2: "6.01", y2: "6" }),
@@ -5299,7 +5632,7 @@ function renderTopologyIcon(icon, color, px) {
     case "cloud":
       return /* @__PURE__ */ jsx46("svg", { ...iconProps, children: /* @__PURE__ */ jsx46("path", { d: "M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" }) });
     case "ai":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+      return /* @__PURE__ */ jsxs37("svg", { ...iconProps, children: [
         /* @__PURE__ */ jsx46("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
         /* @__PURE__ */ jsx46("rect", { x: "9", y: "9", width: "6", height: "6" }),
         /* @__PURE__ */ jsx46("line", { x1: "9", y1: "1", x2: "9", y2: "4" }),
@@ -5312,7 +5645,7 @@ function renderTopologyIcon(icon, color, px) {
         /* @__PURE__ */ jsx46("line", { x1: "1", y1: "14", x2: "4", y2: "14" })
       ] });
     case "network":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+      return /* @__PURE__ */ jsxs37("svg", { ...iconProps, children: [
         /* @__PURE__ */ jsx46("rect", { x: "2", y: "2", width: "6", height: "6", rx: "1" }),
         /* @__PURE__ */ jsx46("rect", { x: "16", y: "2", width: "6", height: "6", rx: "1" }),
         /* @__PURE__ */ jsx46("rect", { x: "9", y: "16", width: "6", height: "6", rx: "1" }),
@@ -5324,18 +5657,18 @@ function renderTopologyIcon(icon, color, px) {
     case "shield":
       return /* @__PURE__ */ jsx46("svg", { ...iconProps, children: /* @__PURE__ */ jsx46("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
     case "user":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+      return /* @__PURE__ */ jsxs37("svg", { ...iconProps, children: [
         /* @__PURE__ */ jsx46("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
         /* @__PURE__ */ jsx46("circle", { cx: "12", cy: "7", r: "4" })
       ] });
     case "database":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+      return /* @__PURE__ */ jsxs37("svg", { ...iconProps, children: [
         /* @__PURE__ */ jsx46("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
         /* @__PURE__ */ jsx46("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }),
         /* @__PURE__ */ jsx46("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" })
       ] });
     case "wifi":
-      return /* @__PURE__ */ jsxs36("svg", { ...iconProps, children: [
+      return /* @__PURE__ */ jsxs37("svg", { ...iconProps, children: [
         /* @__PURE__ */ jsx46("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
         /* @__PURE__ */ jsx46("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
         /* @__PURE__ */ jsx46("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
@@ -5419,7 +5752,7 @@ function StnTopologyNodeMark({
   const countText = formatTopologyCount(count);
   const iconPx = metrics.icon;
   const showCornerBadge = !isCount && count != null && count !== "";
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "g",
     {
       className: cn("stn-topology-node", selected && "stn-topology-node--selected", className),
@@ -5431,7 +5764,7 @@ function StnTopologyNodeMark({
       style: { cursor: onClick ? "pointer" : "default" },
       ...rest,
       children: [
-        isAlert && /* @__PURE__ */ jsxs36(
+        isAlert && /* @__PURE__ */ jsxs37(
           "circle",
           {
             className: "stn-topology-node__pulse",
@@ -5476,7 +5809,7 @@ function StnTopologyNodeMark({
             children: countText
           }
         ) : /* @__PURE__ */ jsx46("g", { transform: `translate(${x - iconPx / 2}, ${y - iconPx / 2})`, children: renderTopologyIcon(icon, stroke, iconPx) }),
-        showCornerBadge && /* @__PURE__ */ jsxs36("g", { className: "stn-topology-node__badge", children: [
+        showCornerBadge && /* @__PURE__ */ jsxs37("g", { className: "stn-topology-node__badge", children: [
           /* @__PURE__ */ jsx46("circle", { cx: x + r * 0.72, cy: y - r * 0.72, r: Math.max(6, r * 0.38), fill: stroke, stroke: "rgba(6,7,15,0.9)", strokeWidth: "1" }),
           /* @__PURE__ */ jsx46(
             "text",
@@ -5505,7 +5838,7 @@ function StnTopologyNodeMark({
             children: label
           }
         ),
-        showStatus && resolvedStatusLabel && /* @__PURE__ */ jsxs36(
+        showStatus && resolvedStatusLabel && /* @__PURE__ */ jsxs37(
           "text",
           {
             x,
@@ -5540,7 +5873,7 @@ function StnTopologyNodePreview({
 }
 
 // src/components/topology/StnTopologyRing.tsx
-import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
 function StnTopologyRing({
   core = {
     title: "\uC5D0\uC2A4\uD2F0\uC5D4\uC778\uD3EC\uD14D",
@@ -5617,7 +5950,7 @@ function StnTopologyRing({
       "data-stn-topology-ring": true,
       "data-ring-count": safeRingCount,
       ...rest,
-      children: /* @__PURE__ */ jsxs37(
+      children: /* @__PURE__ */ jsxs38(
         "svg",
         {
           className: "stn-topology-ring__svg",
@@ -5626,12 +5959,12 @@ function StnTopologyRing({
           viewBox: `0 0 ${vb} ${vb}`,
           overflow: "visible",
           children: [
-            /* @__PURE__ */ jsxs37("defs", { children: [
-              /* @__PURE__ */ jsxs37("radialGradient", { id: coreGlowId, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsxs38("defs", { children: [
+              /* @__PURE__ */ jsxs38("radialGradient", { id: coreGlowId, cx: "50%", cy: "50%", r: "50%", children: [
                 /* @__PURE__ */ jsx47("stop", { offset: "0%", stopColor: "#722ed1", stopOpacity: "0.8" }),
                 /* @__PURE__ */ jsx47("stop", { offset: "100%", stopColor: "#120338", stopOpacity: "0" })
               ] }),
-              /* @__PURE__ */ jsxs37("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+              /* @__PURE__ */ jsxs38("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
                 /* @__PURE__ */ jsx47("stop", { offset: "0%", stopColor: "#00e5ff", stopOpacity: "0.4" }),
                 /* @__PURE__ */ jsx47("stop", { offset: "100%", stopColor: "#722ed1", stopOpacity: "0.4" })
               ] })
@@ -5665,7 +5998,7 @@ function StnTopologyRing({
               },
               `line-${node.id}`
             )),
-            /* @__PURE__ */ jsxs37("g", { className: "stn-topology-ring__core", children: [
+            /* @__PURE__ */ jsxs38("g", { className: "stn-topology-ring__core", children: [
               /* @__PURE__ */ jsx47("circle", { cx: centerX, cy: centerY, r: 54, fill: `url(#${coreGlowId})` }),
               /* @__PURE__ */ jsx47(
                 "circle",
@@ -5693,7 +6026,7 @@ function StnTopologyRing({
                 }
               ),
               core.title && /* @__PURE__ */ jsx47("text", { x: centerX, y: centerY + 8, textAnchor: "middle", fill: "#f0f2f5", fontSize: "10", fontWeight: "600", children: core.title }),
-              /* @__PURE__ */ jsxs37("text", { x: centerX, y: centerY + 22, textAnchor: "middle", fill: coreColor, fontSize: "9", fontWeight: "500", children: [
+              /* @__PURE__ */ jsxs38("text", { x: centerX, y: centerY + 22, textAnchor: "middle", fill: coreColor, fontSize: "9", fontWeight: "500", children: [
                 "\u25CF ",
                 coreStatusLabel
               ] })
@@ -5726,8 +6059,8 @@ function StnTopologyRing({
 }
 
 // src/components/topology/StnTopologyGraph.tsx
-import { useState as useState10 } from "react";
-import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
 var DEFAULT_GRAPH_NODES = [
   { id: "n1", x: 200, y: 58, status: "minor", label: "GW-01", shape: "circle", content: "icon", icon: "wifi" },
   { id: "n2", x: 118, y: 118, status: "critical", label: "BACKUP", shape: "hexagon", content: "count", count: 4, pulse: true },
@@ -5761,12 +6094,12 @@ function StnTopologyGraph({
   style,
   ...rest
 }) {
-  const [viewMode, setViewMode] = useState10(defaultMode);
+  const [viewMode, setViewMode] = useState13(defaultMode);
   if (loading) {
     return /* @__PURE__ */ jsx48("div", { className: cn("stn-topology-graph", "stn-topology-graph--loading", className), style, ...rest, children: /* @__PURE__ */ jsx48("div", { className: "stn-topology-graph__loading-label", children: "\uD1A0\uD3F4\uB85C\uC9C0 \uCE94\uBC84\uC2A4 \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911..." }) });
   }
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       className: cn("stn-topology-graph", className),
@@ -5787,8 +6120,8 @@ function StnTopologyGraph({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs38("svg", { className: "stn-topology-graph__svg", width: "100%", height: "100%", viewBox: "0 0 400 300", overflow: "visible", children: [
-          viewMode === "3D" ? /* @__PURE__ */ jsxs38("g", { opacity: "0.6", children: [
+        /* @__PURE__ */ jsxs39("svg", { className: "stn-topology-graph__svg", width: "100%", height: "100%", viewBox: "0 0 400 300", overflow: "visible", children: [
+          viewMode === "3D" ? /* @__PURE__ */ jsxs39("g", { opacity: "0.6", children: [
             /* @__PURE__ */ jsx48("line", { x1: "60", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.06)", strokeDasharray: "3 3" }),
             /* @__PURE__ */ jsx48("line", { x1: "130", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "3 3" }),
             /* @__PURE__ */ jsx48("line", { x1: "200", y1: "260", x2: "200", y2: "80", stroke: "rgba(255,255,255,0.14)", strokeDasharray: "3 3" }),
@@ -5797,7 +6130,7 @@ function StnTopologyGraph({
             /* @__PURE__ */ jsx48("line", { x1: "100", y1: "230", x2: "300", y2: "230", stroke: "rgba(255,255,255,0.06)" }),
             /* @__PURE__ */ jsx48("line", { x1: "130", y1: "190", x2: "270", y2: "190", stroke: "rgba(255,255,255,0.06)" }),
             /* @__PURE__ */ jsx48("line", { x1: "160", y1: "140", x2: "240", y2: "140", stroke: "rgba(255,255,255,0.06)" })
-          ] }) : /* @__PURE__ */ jsxs38("g", { opacity: "0.3", children: [
+          ] }) : /* @__PURE__ */ jsxs39("g", { opacity: "0.3", children: [
             /* @__PURE__ */ jsx48("line", { x1: "40", y1: "60", x2: "360", y2: "60", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
             /* @__PURE__ */ jsx48("line", { x1: "40", y1: "150", x2: "360", y2: "150", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
             /* @__PURE__ */ jsx48("line", { x1: "40", y1: "240", x2: "360", y2: "240", stroke: "rgba(255,255,255,0.08)", strokeDasharray: "4 4" }),
@@ -5851,12 +6184,12 @@ function StnTopologyGraph({
             );
           })
         ] }),
-        showMinimap && /* @__PURE__ */ jsxs38("div", { className: "stn-topology-graph__minimap", children: [
-          /* @__PURE__ */ jsxs38("div", { className: "stn-topology-graph__minimap-head", children: [
+        showMinimap && /* @__PURE__ */ jsxs39("div", { className: "stn-topology-graph__minimap", children: [
+          /* @__PURE__ */ jsxs39("div", { className: "stn-topology-graph__minimap-head", children: [
             /* @__PURE__ */ jsx48("span", { children: "\uBBF8\uB9AC\uBCF4\uAE30" }),
             /* @__PURE__ */ jsx48("span", { children: "\u2014" })
           ] }),
-          /* @__PURE__ */ jsxs38("svg", { width: "100%", height: "40", viewBox: "0 0 100 50", children: [
+          /* @__PURE__ */ jsxs39("svg", { width: "100%", height: "40", viewBox: "0 0 100 50", children: [
             /* @__PURE__ */ jsx48("polyline", { points: "50,10 40,25 50,40 60,30", fill: "none", stroke: "rgba(255,77,79,0.5)", strokeWidth: "1" }),
             /* @__PURE__ */ jsx48("circle", { cx: "50", cy: "10", r: "2", fill: STN_TOPOLOGY_STATUS_COLORS.critical.main }),
             /* @__PURE__ */ jsx48("circle", { cx: "40", cy: "25", r: "2.5", fill: STN_TOPOLOGY_STATUS_COLORS.critical.main }),
@@ -5870,7 +6203,7 @@ function StnTopologyGraph({
 }
 
 // src/components/StnWidget.tsx
-import { Fragment as Fragment4, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
 var SHELL_PUB_CLASS = {
   card: "",
   "fault-panel": "",
@@ -5889,8 +6222,8 @@ function bannerSeverityFromStatus(status, isCritical) {
   return void 0;
 }
 function withBannerSeverity(banner, severity) {
-  if (!severity || !isValidElement4(banner) || banner.type !== StnEventBanner) return banner;
-  return cloneElement4(banner, { severity });
+  if (!severity || !isValidElement5(banner) || banner.type !== StnEventBanner) return banner;
+  return cloneElement5(banner, { severity });
 }
 function markWidgetSlot(component, slot) {
   ;
@@ -5905,7 +6238,7 @@ function readWidgetSlot(type) {
 function flattenWidgetChildren(children) {
   const out = [];
   Children2.forEach(children, (child) => {
-    if (isValidElement4(child) && child.type === Fragment3) {
+    if (isValidElement5(child) && child.type === Fragment4) {
       const fragmentProps = child.props;
       out.push(...flattenWidgetChildren(fragmentProps.children));
       return;
@@ -5918,7 +6251,7 @@ function partitionWidgetChildren(children) {
   const slots = { headers: [], bodies: [], footers: [], rest: [] };
   for (const child of flattenWidgetChildren(children)) {
     if (child == null || child === false || child === true) continue;
-    if (isValidElement4(child)) {
+    if (isValidElement5(child)) {
       const slot = readWidgetSlot(child.type);
       if (slot === "header") {
         slots.headers.push(child);
@@ -5939,7 +6272,7 @@ function partitionWidgetChildren(children) {
 }
 function mergeBodySlot(body, extra, contentClassName, isEmptyState, emptyStyle) {
   const prev = body.props;
-  return cloneElement4(
+  return cloneElement5(
     body,
     {
       className: cn(prev.className, contentClassName, isEmptyState && "empty"),
@@ -5983,7 +6316,7 @@ function StnWidgetPeriodPager({
   nextLabel = "\uB2E4\uC74C",
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__period-pager", className), ...rest, children: [
     /* @__PURE__ */ jsx49(
       StnButton,
       {
@@ -6022,13 +6355,13 @@ function StnWidgetHeaderInner({
   wrapActions = false
 }) {
   const resolvedIconName = headerIconName ?? defaultHeaderIconName(appearance);
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__head-start", children: [
+  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
+    /* @__PURE__ */ jsxs40("div", { className: "stn-widget__head-start", children: [
       showHeaderIcon ? headerIcon != null ? /* @__PURE__ */ jsx49(StnWidgetInsetIcon, { size: "sm", children: headerIcon }) : resolvedIconName ? /* @__PURE__ */ jsx49(StnWidgetInsetIcon, { size: "sm", icon: resolvedIconName }) : null : null,
-      title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs39("div", { className: "stn-widget__title-wrap", children: [
+      title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs40("div", { className: "stn-widget__title-wrap", children: [
         typeof title === "string" ? /* @__PURE__ */ jsx49("p", { className: "stn-widget__title", title, children: title }) : null,
         badge
-      ] }) : /* @__PURE__ */ jsxs39(Fragment4, { children: [
+      ] }) : /* @__PURE__ */ jsxs40(Fragment5, { children: [
         title,
         badge
       ] }) : null
@@ -6113,7 +6446,7 @@ function StnWidgetRoot({
     ...rest
   };
   const slots = partitionWidgetChildren(children);
-  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs39("div", { className: "app_bar", children: [
+  const propHead = shell === "fault-panel" && !isFigmaShell ? title != null || titleActions ? /* @__PURE__ */ jsxs40("div", { className: "app_bar", children: [
     /* @__PURE__ */ jsx49("div", { className: "fault_title_box", children: typeof title === "string" ? /* @__PURE__ */ jsx49("span", { children: title }) : title }),
     titleActions
   ] }) : null : shell === "board" || shell === "board-item" ? title != null ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__head", children: typeof title === "string" ? /* @__PURE__ */ jsx49("p", { children: title }) : title }) : null : isFigmaShell ? /* @__PURE__ */ jsx49(
@@ -6130,8 +6463,8 @@ function StnWidgetRoot({
       headerIcon,
       wrapActions
     }
-  ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
-    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__head-start", children: [
+  ) : title != null || badge != null || titleActions ? /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__head", wrapActions && "stn-widget__head--wrap"), children: [
+    /* @__PURE__ */ jsxs40("div", { className: "stn-widget__head-start", children: [
       title != null ? typeof title === "string" ? /* @__PURE__ */ jsx49("p", { className: "stn-widget__title", title, children: title }) : title : null,
       badge
     ] }),
@@ -6150,14 +6483,14 @@ function StnWidgetRoot({
     body = /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__body", autoBodyClass, isEmptyState && "empty", contentClassName), style: emptyStyle, children: slots.rest });
   }
   const footerNode = slots.footers.length > 0 ? slots.footers : footer ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__footer", children: footer }) : null;
-  const card = /* @__PURE__ */ jsxs39("div", { ...rootProps, children: [
+  const card = /* @__PURE__ */ jsxs40("div", { ...rootProps, children: [
     isFigmaShell && appearanceShell === "overlay" ? /* @__PURE__ */ jsx49("div", { className: "stn-widget__map-deco", "aria-hidden": true }) : null,
     head,
     body,
     footerNode
   ] });
   if (banner == null || banner === false) return card;
-  return /* @__PURE__ */ jsxs39("div", { className: "stn-widget-anchor", children: [
+  return /* @__PURE__ */ jsxs40("div", { className: "stn-widget-anchor", children: [
     withBannerSeverity(banner, bannerSeverityFromStatus(status, isCritical)),
     card
   ] });
@@ -6219,8 +6552,8 @@ function StnWidgetStatusItem({
   ...rest
 }) {
   const grade = gradeProp ?? (status === "warning" ? "minor" : status) ?? "normal";
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__status-item", className), ...rest, children: [
-    /* @__PURE__ */ jsxs39("span", { className: "stn-widget__status-label", children: [
+  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__status-item", className), ...rest, children: [
+    /* @__PURE__ */ jsxs40("span", { className: "stn-widget__status-label", children: [
       showDot ? /* @__PURE__ */ jsx49(
         "span",
         {
@@ -6240,7 +6573,7 @@ function StnWidgetStatGroup({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx49("div", { className: cn("stn-widget__stat-group", className), ...rest, children });
 }
 function StnWidgetStatCard({ label, count, className, ...rest }) {
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__stat-card", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__stat-card", className), ...rest, children: [
     /* @__PURE__ */ jsx49("span", { className: "stn-widget__stat-label", children: label }),
     /* @__PURE__ */ jsx49("span", { className: "stn-widget__stat-count", children: count })
   ] });
@@ -6269,15 +6602,15 @@ function StnWidgetGradeRow({
 }) {
   const clamped = Math.max(0, Math.min(100, percent));
   const resolvedPercentLabel = percentLabel ?? formatGradePercent(clamped);
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__grade-row", `stn-widget__grade-row--${grade}`, className), ...rest, children: [
-    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__grade-row-left", children: [
-      /* @__PURE__ */ jsxs39("span", { className: "stn-widget__grade-row-label", children: [
+  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__grade-row", `stn-widget__grade-row--${grade}`, className), ...rest, children: [
+    /* @__PURE__ */ jsxs40("div", { className: "stn-widget__grade-row-left", children: [
+      /* @__PURE__ */ jsxs40("span", { className: "stn-widget__grade-row-label", children: [
         /* @__PURE__ */ jsx49(StnIcon, { name: GRADE_ROW_ICON[grade], size: 20, className: "stn-widget__grade-row-icon", "aria-hidden": true }),
         label
       ] }),
       /* @__PURE__ */ jsx49("div", { className: "stn-widget__grade-row-track", "aria-hidden": true, children: /* @__PURE__ */ jsx49("span", { className: "stn-widget__grade-row-fill", style: { width: `${clamped}%` } }) })
     ] }),
-    /* @__PURE__ */ jsxs39("div", { className: "stn-widget__grade-row-right", children: [
+    /* @__PURE__ */ jsxs40("div", { className: "stn-widget__grade-row-right", children: [
       /* @__PURE__ */ jsx49("span", { className: "stn-widget__grade-row-value", children: value }),
       /* @__PURE__ */ jsx49("span", { className: "stn-widget__grade-row-percent", children: resolvedPercentLabel })
     ] })
@@ -6291,8 +6624,8 @@ function StnWidgetFooter({ className, children, ...rest }) {
 }
 markWidgetSlot(StnWidgetFooter, "footer");
 function StnWidgetEmpty({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs39("div", { className: cn("stn-widget__empty", className), ...rest, children: [
-    /* @__PURE__ */ jsxs39("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { opacity: 0.6 }, children: [
+  return /* @__PURE__ */ jsxs40("div", { className: cn("stn-widget__empty", className), ...rest, children: [
+    /* @__PURE__ */ jsxs40("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { opacity: 0.6 }, children: [
       /* @__PURE__ */ jsx49("circle", { cx: "12", cy: "12", r: "10" }),
       /* @__PURE__ */ jsx49("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
       /* @__PURE__ */ jsx49("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
@@ -6351,11 +6684,11 @@ import {
 // src/layouts/StnStack.tsx
 import {
   Children as Children3,
-  forwardRef as forwardRef24,
-  Fragment as Fragment5,
-  isValidElement as isValidElement5
+  forwardRef as forwardRef25,
+  Fragment as Fragment6,
+  isValidElement as isValidElement6
 } from "react";
-import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
 var BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
 var DIRECTION_CLASS = /* @__PURE__ */ new Set(["row", "row-reverse", "column", "column-reverse"]);
 var STACK_SPACE_TOKENS = /* @__PURE__ */ new Set([2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 36, 40, 44, 48, 56, 64, 80, 84]);
@@ -6448,7 +6781,7 @@ function spacingClassesAndStyle(spacing) {
   }
   return { classes, inlineGap };
 }
-var StnStack = forwardRef24(function StnStack2({
+var StnStack = forwardRef25(function StnStack2({
   component,
   as,
   direction = "column",
@@ -6473,8 +6806,8 @@ var StnStack = forwardRef24(function StnStack2({
   const mergedStyle = inlineGap ? { gap: inlineGap, ...style } : style;
   const validChildren = Children3.toArray(children).filter(Boolean);
   const renderedChildren = divider ? validChildren.map((child, index) => {
-    const key = isValidElement5(child) && child.key != null ? child.key : index;
-    return /* @__PURE__ */ jsxs40(Fragment5, { children: [
+    const key = isValidElement6(child) && child.key != null ? child.key : index;
+    return /* @__PURE__ */ jsxs41(Fragment6, { children: [
       index > 0 ? divider : null,
       child
     ] }, key);
@@ -6503,7 +6836,7 @@ var StnStack = forwardRef24(function StnStack2({
 });
 
 // src/patterns/dashboard/AlertCenterDashboard.tsx
-import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs42 } from "react/jsx-runtime";
 var TOP5_ROWS = [
   { label: "\uADF8\uB791\uC2DC\uC544", percent: 80, value: "80\uAC74", grade: "critical" },
   { label: "\uC5F0\uB9BD\uC8FC\uD0DD 15\uC138\uB300", percent: 74, value: "74\uAC74", grade: "major" },
@@ -6512,7 +6845,7 @@ var TOP5_ROWS = [
   { label: "PRADA", percent: 68, value: "68\uAC74", grade: "default" }
 ];
 function AlertCenterDashboard({ className, appearance = "translucent", loading = false }) {
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     StnStack,
     {
       direction: "column",
@@ -6521,12 +6854,12 @@ function AlertCenterDashboard({ className, appearance = "translucent", loading =
       style: { flex: "1 1 0%", minHeight: 0, height: "100%", width: "100%" },
       "data-stn-dashboard": "alert-widgets",
       children: [
-        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs41(StnWidget.StatusList, { children: [
+        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC2DC\uC124 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs42(StnWidget.StatusList, { children: [
           /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "PTN", value: "179", showDot: false }),
           /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "MSPP", value: "63", showDot: false }),
           /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "L3\uC2A4\uC704\uCE58", value: "27", showDot: false })
         ] }) }),
-        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs41(StnWidget.StatusList, { children: [
+        /* @__PURE__ */ jsx51(StnWidget, { title: "\uC7A5\uC560 \uD604\uD669", appearance, interactive: true, children: loading ? /* @__PURE__ */ jsx51(StnLoadingSkeleton.Widget, { lines: 3 }) : /* @__PURE__ */ jsxs42(StnWidget.StatusList, { children: [
           /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "Critical", value: "43", grade: "critical" }),
           /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "Major", value: "79", grade: "major" }),
           /* @__PURE__ */ jsx51(StnWidget.StatusItem, { label: "Minor", value: "3", grade: "minor" })
@@ -6548,15 +6881,15 @@ function AlertCenterDashboard({ className, appearance = "translucent", loading =
 }
 
 // src/patterns/dashboard/PubDashboardWidgetBodies.tsx
-import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs43 } from "react/jsx-runtime";
 function PubDisabilityStatusList({ items, summary }) {
-  return /* @__PURE__ */ jsxs42("div", { className: "ds-disability-status", children: [
-    /* @__PURE__ */ jsx52("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43("div", { className: "ds-disability-status", children: [
+    /* @__PURE__ */ jsx52("ul", { className: "ds-disability-status__list", children: items.map((item, i) => /* @__PURE__ */ jsxs43(
       "li",
       {
         className: ["ds-disability-status__item", item.grade].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsxs42("span", { children: [
+          /* @__PURE__ */ jsxs43("span", { children: [
             item.showDot !== false && item.grade ? /* @__PURE__ */ jsx52("span", { className: "dot", "aria-hidden": true }) : null,
             item.label
           ] }),
@@ -6565,7 +6898,7 @@ function PubDisabilityStatusList({ items, summary }) {
       },
       i
     )) }),
-    summary && summary.length > 0 ? /* @__PURE__ */ jsx52("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs42("p", { className: "ds-disability-status__value", children: [
+    summary && summary.length > 0 ? /* @__PURE__ */ jsx52("div", { className: "ds-disability-status__summary", children: summary.map((row, i) => /* @__PURE__ */ jsxs43("p", { className: "ds-disability-status__value", children: [
       row.label,
       /* @__PURE__ */ jsx52("span", { children: row.value })
     ] }, i)) }) : null
@@ -6573,16 +6906,16 @@ function PubDisabilityStatusList({ items, summary }) {
 }
 function PubTrafficTop5Bars({ rows }) {
   const maxPercent = Math.max(...rows.map((row) => row.percent), 0);
-  return /* @__PURE__ */ jsx52("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsxs42("div", { className: ["ds-bar", row.percent === maxPercent ? "max" : ""].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsx52("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsxs43("div", { className: ["ds-bar", row.percent === maxPercent ? "max" : ""].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsx52("p", { className: "ds-bar-name", title: row.label, children: row.label }),
     /* @__PURE__ */ jsx52("div", { className: "ds-bar-con", title: `${row.percent}%`, children: /* @__PURE__ */ jsx52("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }) }),
     /* @__PURE__ */ jsx52("p", { className: "ds-bar-value", title: row.value, children: row.value })
   ] }, row.label)) });
 }
 function PubTop5EquipmentBars({ rows }) {
-  return /* @__PURE__ */ jsxs42("div", { className: "ds-group", children: [
+  return /* @__PURE__ */ jsxs43("div", { className: "ds-group", children: [
     /* @__PURE__ */ jsx52("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx52("div", { className: "ds-equipment-ico", children: /* @__PURE__ */ jsx52("span", { className: "blind", children: "\uC7A5\uBE44 \uC774\uBBF8\uC9C0" }) }) }),
-    /* @__PURE__ */ jsx52("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx52("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsx52("div", { className: "ds-bar type-2", children: /* @__PURE__ */ jsxs42("div", { className: "ds-bar-con", title: `${row.percent}%`, children: [
+    /* @__PURE__ */ jsx52("div", { className: "ds-group-box", children: /* @__PURE__ */ jsx52("div", { className: "ds-bar-group", children: rows.map((row) => /* @__PURE__ */ jsx52("div", { className: "ds-bar type-2", children: /* @__PURE__ */ jsxs43("div", { className: "ds-bar-con", title: `${row.percent}%`, children: [
       /* @__PURE__ */ jsx52("span", { className: "ds-bar-gauge", style: { "--percent": `${row.percent}%` } }),
       /* @__PURE__ */ jsx52("div", { className: "ds-bar-status", children: row.status })
     ] }) }, row.label)) }) })
@@ -6597,11 +6930,11 @@ function PubChartSample({
 }
 
 // src/patterns/alertCenter/StnAlertCenterPanel.tsx
-import { useState as useState11 } from "react";
+import { useState as useState14 } from "react";
 import {
   STN_ALERT_CENTER_TABS
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
-import { jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs44 } from "react/jsx-runtime";
 function resolveAlertIcon(item) {
   if (item.icon) {
     if (item.icon === "line/arrow-down") return "line/arrow-narrow-down";
@@ -6637,7 +6970,7 @@ function StnAlertCard({
       interactive: true,
       className: cn("stn-alert-card", className),
       onClick,
-      children: /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__row", children: [
+      children: /* @__PURE__ */ jsxs44("div", { className: "stn-alert-card__row", children: [
         /* @__PURE__ */ jsx53(
           StnIcon,
           {
@@ -6647,8 +6980,8 @@ function StnAlertCard({
             className: "stn-alert-card__icon"
           }
         ),
-        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__body", children: [
-          /* @__PURE__ */ jsxs43(StnStack, { direction: "row", alignItems: "center", spacing: 1, className: "stn-alert-card__header-line", children: [
+        /* @__PURE__ */ jsxs44("div", { className: "stn-alert-card__body", children: [
+          /* @__PURE__ */ jsxs44(StnStack, { direction: "row", alignItems: "center", spacing: 1, className: "stn-alert-card__header-line", children: [
             /* @__PURE__ */ jsx53(
               StnChip,
               {
@@ -6668,7 +7001,7 @@ function StnAlertCard({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs43(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", className: "stn-alert-card__desc-line", children: [
+          /* @__PURE__ */ jsxs44(StnStack, { direction: "row", alignItems: "center", spacing: 2, wrap: "wrap", className: "stn-alert-card__desc-line", children: [
             /* @__PURE__ */ jsx53(
               "span",
               {
@@ -6677,7 +7010,7 @@ function StnAlertCard({
                 children: /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__text-inner", children: item.description })
               }
             ),
-            item.occurredAt && /* @__PURE__ */ jsxs43(
+            item.occurredAt && /* @__PURE__ */ jsxs44(
               StnChip,
               {
                 shape: "pill",
@@ -6693,7 +7026,7 @@ function StnAlertCard({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__meta", children: [
+        /* @__PURE__ */ jsxs44("div", { className: "stn-alert-card__meta", children: [
           /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__time", children: item.time }),
           item.unread !== false && /* @__PURE__ */ jsx53(
             "span",
@@ -6729,11 +7062,11 @@ function StnAlertCenterPanel({
   closeLabel = "\uB2EB\uAE30",
   className
 }) {
-  const [activeTab, setActiveTab] = useState11(defaultTab);
+  const [activeTab, setActiveTab] = useState14(defaultTab);
   const alertCount = alerts.length;
   const resolvedTitleOverflow = titleOverflow ?? textOverflow;
   const resolvedDescOverflow = descOverflow ?? textOverflow;
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     "div",
     {
       className: cn(
@@ -6745,8 +7078,8 @@ function StnAlertCenterPanel({
       ),
       "data-stn-alert-center": true,
       children: [
-        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__header", children: [
-          /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__header-left", children: [
+        /* @__PURE__ */ jsxs44("div", { className: "stn-alert-center__header", children: [
+          /* @__PURE__ */ jsxs44("div", { className: "stn-alert-center__header-left", children: [
             /* @__PURE__ */ jsx53(StnIcon, { name: "line/bell", size: 20, color: "var(--stn-primary)" }),
             /* @__PURE__ */ jsx53("span", { className: "stn-alert-center__title", children: title }),
             alertCount > 0 && /* @__PURE__ */ jsx53(StnChip, { shape: "pill", size: "sm", variant: "subtle", color: "primary", children: alertCount })
@@ -6764,7 +7097,7 @@ function StnAlertCenterPanel({
               }))
             }
           ),
-          /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__header-right", children: [
+          /* @__PURE__ */ jsxs44("div", { className: "stn-alert-center__header-right", children: [
             /* @__PURE__ */ jsx53(
               StnButton,
               {
@@ -6788,7 +7121,7 @@ function StnAlertCenterPanel({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs43("div", { className: "stn-alert-center__list-wrap", children: [
+        /* @__PURE__ */ jsxs44("div", { className: "stn-alert-center__list-wrap", children: [
           activeTab === "error" && /* @__PURE__ */ jsx53("ul", { className: "stn-alert-center__list", children: alerts.map((item) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(
             StnAlertCard,
             {
@@ -6798,24 +7131,24 @@ function StnAlertCenterPanel({
               onClick: () => onItemClick?.(item)
             }
           ) }, item.id ?? item.title)) }),
-          activeTab === "work" && /* @__PURE__ */ jsx53("ul", { className: "stn-alert-center__list", children: workItems.map((row) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__row", children: [
+          activeTab === "work" && /* @__PURE__ */ jsx53("ul", { className: "stn-alert-center__list", children: workItems.map((row) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs44("div", { className: "stn-alert-card__row", children: [
             /* @__PURE__ */ jsx53(StnIcon, { name: "line/clock", size: 24, color: "var(--stn-text-secondary)", className: "stn-alert-card__icon" }),
-            /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__body", children: [
-              /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--work", children: row.typeLabel }),
+            /* @__PURE__ */ jsxs44("div", { className: "stn-alert-card__body", children: [
+              /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__type-label work", children: row.typeLabel }),
               /* @__PURE__ */ jsx53("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__text-inner", children: row.text }) })
             ] }),
             /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__time", children: row.time })
           ] }) }) }, row.id ?? row.text)) }),
-          activeTab === "deploy" && /* @__PURE__ */ jsx53("ul", { className: "stn-alert-center__list", children: deployItems.map((row) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__row", children: [
+          activeTab === "deploy" && /* @__PURE__ */ jsx53("ul", { className: "stn-alert-center__list", children: deployItems.map((row) => /* @__PURE__ */ jsx53("li", { children: /* @__PURE__ */ jsx53(StnCard, { variant: "elevated", radius: "md", padding: "md", interactive: true, className: "stn-alert-card", children: /* @__PURE__ */ jsxs44("div", { className: "stn-alert-card__row", children: [
             /* @__PURE__ */ jsx53(StnIcon, { name: "line/settings", size: 24, color: "var(--stn-secondary)", className: "stn-alert-card__icon" }),
-            /* @__PURE__ */ jsxs43("div", { className: "stn-alert-card__body", children: [
+            /* @__PURE__ */ jsxs44("div", { className: "stn-alert-card__body", children: [
               /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__type-label stn-alert-card__type-label--deploy", children: row.typeLabel }),
               /* @__PURE__ */ jsx53("span", { className: cn("stn-alert-card__desc", resolvedDescOverflow), title: row.text, children: /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__text-inner", children: row.text }) })
             ] }),
             /* @__PURE__ */ jsx53("span", { className: "stn-alert-card__time", children: row.time })
           ] }) }) }, row.id ?? row.text)) })
         ] }),
-        /* @__PURE__ */ jsx53("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs43(
+        /* @__PURE__ */ jsx53("div", { className: "stn-alert-center__footer", children: /* @__PURE__ */ jsxs44(
           "button",
           {
             type: "button",
@@ -6870,13 +7203,13 @@ var SideNavContext = createContext3({
 var useSideNav = () => useContext3(SideNavContext);
 
 // src/components/sideNav/StnSideNavItem.tsx
-import { forwardRef as forwardRef25 } from "react";
+import { forwardRef as forwardRef26 } from "react";
 import { STN_NAV_MENU_SUB_ICON } from "@stn-uiux/pub-ui/data/stnSideNavItem";
-import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
 function maskStyle2(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
-var StnSideNavItem = forwardRef25(function StnSideNavItem2({
+var StnSideNavItem = forwardRef26(function StnSideNavItem2({
   label,
   id,
   iconSrc,
@@ -6919,7 +7252,7 @@ var StnSideNavItem = forwardRef25(function StnSideNavItem2({
       sideNav.onSelect(id);
     }
   };
-  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ jsxs44("span", { className: "stn-side-nav-item__icon-wrap", children: [
+  const iconElement = hasIcon && !isSub ? /* @__PURE__ */ jsxs45("span", { className: "stn-side-nav-item__icon-wrap", children: [
     /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__icon", "aria-hidden": "true", children: icon ?? (resolvedIconSrc ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__icon-glyph", style: maskStyle2(resolvedIconSrc) }) : null) }),
     showDot ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__dot-wrap", "aria-hidden": "true", children: /* @__PURE__ */ jsx55(StnBadge, { variant: "dot", color: "error" }) }) : null
   ] }) : null;
@@ -6944,8 +7277,8 @@ var StnSideNavItem = forwardRef25(function StnSideNavItem2({
       title: collapsed ? label : void 0,
       onClick: handleClick,
       ...rest,
-      children: /* @__PURE__ */ jsxs44("span", { className: cn("stn-side-nav-item__inner", spreadTrail && "spread"), children: [
-        /* @__PURE__ */ jsxs44("span", { className: "stn-side-nav-item__lead", children: [
+      children: /* @__PURE__ */ jsxs45("span", { className: cn("stn-side-nav-item__inner", spreadTrail && "spread"), children: [
+        /* @__PURE__ */ jsxs45("span", { className: "stn-side-nav-item__lead", children: [
           isSub && showSubIndent ? /* @__PURE__ */ jsx55("span", { className: "stn-side-nav-item__sub-indent", "aria-hidden": "true" }) : null,
           shouldShowSubDot ? /* @__PURE__ */ jsx55(
             "span",
@@ -6995,12 +7328,12 @@ var StnSideNavItem = forwardRef25(function StnSideNavItem2({
 });
 
 // src/components/sideNav/StnSideNavHeader.tsx
-import { forwardRef as forwardRef27 } from "react";
+import { forwardRef as forwardRef28 } from "react";
 
 // src/components/sideNav/StnSideNavLogo.tsx
-import { forwardRef as forwardRef26 } from "react";
+import { forwardRef as forwardRef27 } from "react";
 import { jsx as jsx56 } from "react/jsx-runtime";
-var StnSideNavLogo = forwardRef26(
+var StnSideNavLogo = forwardRef27(
   function StnSideNavLogo2({ className, logoProps, ...rest }, ref) {
     const { collapsed } = useSideNav();
     return /* @__PURE__ */ jsx56(
@@ -7028,8 +7361,8 @@ var StnSideNavLogo = forwardRef26(
 );
 
 // src/components/sideNav/StnSideNavHeader.tsx
-import { Fragment as Fragment6, jsx as jsx57, jsxs as jsxs45 } from "react/jsx-runtime";
-var StnSideNavHeader = forwardRef27(function StnSideNavHeader2({
+import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
+var StnSideNavHeader = forwardRef28(function StnSideNavHeader2({
   children,
   border = false,
   hasBorder = false,
@@ -7052,7 +7385,7 @@ var StnSideNavHeader = forwardRef27(function StnSideNavHeader2({
         className
       ),
       ...rest,
-      children: children ?? /* @__PURE__ */ jsxs45(Fragment6, { children: [
+      children: children ?? /* @__PURE__ */ jsxs46(Fragment7, { children: [
         /* @__PURE__ */ jsx57(StnSideNavLogo, {}),
         shouldShowClose ? /* @__PURE__ */ jsx57(
           StnButton,
@@ -7085,9 +7418,9 @@ var StnSideNavHeader = forwardRef27(function StnSideNavHeader2({
 });
 
 // src/components/sideNav/StnSideNavMenu.tsx
-import { forwardRef as forwardRef28 } from "react";
+import { forwardRef as forwardRef29 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
-var StnSideNavMenu = forwardRef28(function StnSideNavMenu2({
+var StnSideNavMenu = forwardRef29(function StnSideNavMenu2({
   children,
   className,
   scrollSize = "thin",
@@ -7101,9 +7434,9 @@ var StnSideNavMenu = forwardRef28(function StnSideNavMenu2({
       className: cn(
         "stn-side-nav__menu",
         "stn-scroll",
-        "stn-scroll--vertical",
-        scrollSize && `stn-scroll--${scrollSize}`,
-        scrollColor && `stn-scroll--${scrollColor}`,
+        "vertical",
+        scrollSize && scrollSize,
+        scrollColor && scrollColor,
         className
       ),
       "aria-label": "\uC0AC\uC774\uB4DC \uB0B4\uBE44\uAC8C\uC774\uC158",
@@ -7115,13 +7448,13 @@ var StnSideNavMenu = forwardRef28(function StnSideNavMenu2({
 
 // src/components/sideNav/StnSideNavGroup.tsx
 import {
-  forwardRef as forwardRef29,
+  forwardRef as forwardRef30,
   useEffect as useEffect10,
   useRef as useRef7,
-  useState as useState12
+  useState as useState15
 } from "react";
-import { jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
-var StnSideNavGroup = forwardRef29(function StnSideNavGroup2({
+import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
+var StnSideNavGroup = forwardRef30(function StnSideNavGroup2({
   label,
   parent,
   direction = "down",
@@ -7137,7 +7470,7 @@ var StnSideNavGroup = forwardRef29(function StnSideNavGroup2({
   ...rest
 }, ref) {
   const { collapsed } = useSideNav();
-  const [internalOpen, setInternalOpen] = useState12(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState15(defaultOpen);
   const isOpen = openProp ?? internalOpen;
   const isDropdown = Boolean(dropdown || variant === "dropdown");
   const isTransparent = dropdownVariant === "transparent" || dropdownBackground === false;
@@ -7180,7 +7513,7 @@ var StnSideNavGroup = forwardRef29(function StnSideNavGroup2({
       children
     }
   ) : null;
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs47(
     "div",
     {
       ref: (node) => {
@@ -7211,9 +7544,9 @@ var StnSideNavGroup = forwardRef29(function StnSideNavGroup2({
 });
 
 // src/components/sideNav/StnSideNavSpacer.tsx
-import { forwardRef as forwardRef30 } from "react";
+import { forwardRef as forwardRef31 } from "react";
 import { jsx as jsx60 } from "react/jsx-runtime";
-var StnSideNavSpacer = forwardRef30(function StnSideNavSpacer2({ className, style, ...rest }, ref) {
+var StnSideNavSpacer = forwardRef31(function StnSideNavSpacer2({ className, style, ...rest }, ref) {
   return /* @__PURE__ */ jsx60(
     "div",
     {
@@ -7227,9 +7560,9 @@ var StnSideNavSpacer = forwardRef30(function StnSideNavSpacer2({ className, styl
 });
 
 // src/components/sideNav/StnSideNavFooter.tsx
-import { forwardRef as forwardRef31 } from "react";
+import { forwardRef as forwardRef32 } from "react";
 import { jsx as jsx61 } from "react/jsx-runtime";
-var StnSideNavFooter = forwardRef31(function StnSideNavFooter2({ curved = false, children, className, ...rest }, ref) {
+var StnSideNavFooter = forwardRef32(function StnSideNavFooter2({ curved = false, children, className, ...rest }, ref) {
   return /* @__PURE__ */ jsx61(
     "nav",
     {
@@ -7243,9 +7576,9 @@ var StnSideNavFooter = forwardRef31(function StnSideNavFooter2({ curved = false,
 });
 
 // src/components/sideNav/StnSideNavToggle.tsx
-import { forwardRef as forwardRef32 } from "react";
+import { forwardRef as forwardRef33 } from "react";
 import { jsx as jsx62 } from "react/jsx-runtime";
-var StnSideNavToggle = forwardRef32(
+var StnSideNavToggle = forwardRef33(
   function StnSideNavToggle2({ className, onClick, ...rest }, ref) {
     const { collapsed, onToggleCollapse } = useSideNav();
     return /* @__PURE__ */ jsx62(
@@ -7281,9 +7614,9 @@ var StnSideNavToggle = forwardRef32(
 );
 
 // src/components/sideNav/StnSideNavWatermark.tsx
-import { forwardRef as forwardRef33 } from "react";
+import { forwardRef as forwardRef34 } from "react";
 import { jsx as jsx63 } from "react/jsx-runtime";
-var StnSideNavWatermark = forwardRef33(
+var StnSideNavWatermark = forwardRef34(
   function StnSideNavWatermark2({ size = "xl", theme, className, ...rest }, ref) {
     return /* @__PURE__ */ jsx63(
       "div",
@@ -7299,9 +7632,9 @@ var StnSideNavWatermark = forwardRef33(
 );
 
 // src/components/sideNav/StnSideNavMobileTrigger.tsx
-import { forwardRef as forwardRef34 } from "react";
-import { jsx as jsx64, jsxs as jsxs47 } from "react/jsx-runtime";
-var StnSideNavMobileTrigger = forwardRef34(
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx64, jsxs as jsxs48 } from "react/jsx-runtime";
+var StnSideNavMobileTrigger = forwardRef35(
   function StnSideNavMobileTrigger2({ floating = false, className, children, onClick, ...rest }, ref) {
     const { onToggleMobileOpen, mobileOpen } = useSideNav();
     return /* @__PURE__ */ jsx64(
@@ -7322,7 +7655,7 @@ var StnSideNavMobileTrigger = forwardRef34(
           onToggleMobileOpen?.();
         },
         ...rest,
-        children: children ?? /* @__PURE__ */ jsxs47("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
+        children: children ?? /* @__PURE__ */ jsxs48("span", { className: "stn-side-nav__hamburger-bars", "aria-hidden": "true", children: [
           /* @__PURE__ */ jsx64("span", {}),
           /* @__PURE__ */ jsx64("span", {}),
           /* @__PURE__ */ jsx64("span", {})
@@ -7334,10 +7667,10 @@ var StnSideNavMobileTrigger = forwardRef34(
 
 // src/components/sideNav/StnSideNavSub.tsx
 import {
-  forwardRef as forwardRef35
+  forwardRef as forwardRef36
 } from "react";
 import { jsx as jsx65 } from "react/jsx-runtime";
-var StnSideNavSub = forwardRef35(
+var StnSideNavSub = forwardRef36(
   function StnSideNavSub2({ children, className, ...rest }, ref) {
     return /* @__PURE__ */ jsx65(
       "div",
@@ -7352,7 +7685,7 @@ var StnSideNavSub = forwardRef35(
     );
   }
 );
-var StnSideNavSubItem = forwardRef35(
+var StnSideNavSubItem = forwardRef36(
   function StnSideNavSubItem2({
     variant = "ghost",
     size = "md",
@@ -7394,9 +7727,9 @@ var StnSideNavSubItem = forwardRef35(
 );
 
 // src/components/sideNav/StnSideNavSubNav.tsx
-import { forwardRef as forwardRef36 } from "react";
+import { forwardRef as forwardRef37 } from "react";
 import { jsx as jsx66 } from "react/jsx-runtime";
-var StnSideNavSubNav = forwardRef36(
+var StnSideNavSubNav = forwardRef37(
   function StnSideNavSubNav2({
     dropdown = false,
     direction = "down",
@@ -7431,14 +7764,14 @@ var StnSideNavSubNav = forwardRef36(
 
 // src/patterns/sideNav/StnSideNavigation.tsx
 import {
-  forwardRef as forwardRef37,
+  forwardRef as forwardRef38,
   useCallback as useCallback8,
   useMemo as useMemo4,
-  useState as useState13
+  useState as useState16
 } from "react";
-import { jsx as jsx67, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
 function useControllableState(controlledValue, defaultValue, onChange) {
-  const [internalState, setInternalState] = useState13(defaultValue);
+  const [internalState, setInternalState] = useState16(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalState;
   const setValue = useCallback8(
@@ -7452,7 +7785,7 @@ function useControllableState(controlledValue, defaultValue, onChange) {
   );
   return [value, setValue];
 }
-var StnSideNavigationRoot = forwardRef37(function StnSideNavigationRoot2({
+var StnSideNavigationRoot = forwardRef38(function StnSideNavigationRoot2({
   variant: variantProp,
   appearance,
   drawerVariant: drawerVariantProp,
@@ -7513,7 +7846,7 @@ var StnSideNavigationRoot = forwardRef37(function StnSideNavigationRoot2({
     }),
     [isEffectiveCollapsed, activeId, setActiveId, handleToggleCollapse, mobileOpen, handleToggleMobileOpen, setMobileOpen, isDrawerMode]
   );
-  return /* @__PURE__ */ jsxs48(SideNavContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsxs49(SideNavContext.Provider, { value: contextValue, children: [
     showMobileTrigger && /* @__PURE__ */ jsx67(StnSideNavMobileTrigger, { floating: true }),
     (drawer || responsiveDrawer) && /* @__PURE__ */ jsx67(
       "div",
@@ -7563,16 +7896,16 @@ var StnSideNavigation = Object.assign(StnSideNavigationRoot, {
 
 // src/components/StnBreadcrumb.tsx
 import {
-  Fragment as Fragment7,
+  Fragment as Fragment8,
   useEffect as useEffect11,
   useId as useId15,
   useRef as useRef8,
-  useState as useState14
+  useState as useState17
 } from "react";
 import {
   STN_BREADCRUMB_ICON_SRC
 } from "@stn-uiux/pub-ui/data/stnBreadcrumb";
-import { Fragment as Fragment8, jsx as jsx68, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx68, jsxs as jsxs50 } from "react/jsx-runtime";
 function maskStyle3(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
@@ -7605,7 +7938,7 @@ function SegmentContent({
   label,
   menu
 }) {
-  return /* @__PURE__ */ jsxs49(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs50(Fragment9, { children: [
     iconSrc ? /* @__PURE__ */ jsx68(BreadcrumbIcon, { src: iconSrc }) : null,
     /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__label", children: label }),
     menu ? /* @__PURE__ */ jsx68(BreadcrumbCaret, {}) : null
@@ -7666,7 +7999,7 @@ function BreadcrumbSegment({
   isCurrent
 }) {
   const menuId = useId15();
-  const [open, setOpen] = useState14(false);
+  const [open, setOpen] = useState17(false);
   const menuItems = item.menuItems ?? [];
   const showMenu = hasSegmentMenu(item) && !isCurrent;
   const canOpenMenu = showMenu && menuItems.length > 0;
@@ -7677,7 +8010,7 @@ function BreadcrumbSegment({
     return /* @__PURE__ */ jsx68("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
   }
   if (canOpenMenu) {
-    return /* @__PURE__ */ jsxs49("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
+    return /* @__PURE__ */ jsxs50("span", { ref: rootRef, className: "stn-breadcrumb__segment-wrap", children: [
       /* @__PURE__ */ jsx68(
         "button",
         {
@@ -7724,7 +8057,7 @@ function BreadcrumbBack({
   href,
   onClick
 }) {
-  const content = /* @__PURE__ */ jsxs49(Fragment8, { children: [
+  const content = /* @__PURE__ */ jsxs50(Fragment9, { children: [
     /* @__PURE__ */ jsx68(
       "span",
       {
@@ -7760,7 +8093,7 @@ function BreadcrumbCollapsed({
   items,
   menuId
 }) {
-  const [open, setOpen] = useState14(false);
+  const [open, setOpen] = useState17(false);
   const rootRef = useDismissibleMenu(open, () => setOpen(false));
   const menuItems = items.map((item) => ({
     id: item.id,
@@ -7769,7 +8102,7 @@ function BreadcrumbCollapsed({
     onClick: item.onClick,
     current: item.current
   }));
-  return /* @__PURE__ */ jsxs49("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
+  return /* @__PURE__ */ jsxs50("li", { className: "stn-breadcrumb__item", ref: rootRef, children: [
     /* @__PURE__ */ jsx68(
       "button",
       {
@@ -7832,21 +8165,21 @@ function StnBreadcrumb({
     {
       className: cn("stn-breadcrumb", size, variant === "chip" && "chip", className),
       "aria-label": "Breadcrumb",
-      children: /* @__PURE__ */ jsxs49("ol", { className: "stn-breadcrumb__list", children: [
+      children: /* @__PURE__ */ jsxs50("ol", { className: "stn-breadcrumb__list", children: [
         currentItem ? /* @__PURE__ */ jsx68("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--back", children: /* @__PURE__ */ jsx68(BreadcrumbBack, { label: currentItem.label, href: backHref, onClick: backOnClick }) }) : null,
-        showHome ? /* @__PURE__ */ jsx68("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs49("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
+        showHome ? /* @__PURE__ */ jsx68("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs50("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
           /* @__PURE__ */ jsx68(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
           /* @__PURE__ */ jsx68("span", { className: "blind", children: homeLabel })
         ] }) }) : null,
-        head.map((item, index) => /* @__PURE__ */ jsxs49(Fragment7, { children: [
+        head.map((item, index) => /* @__PURE__ */ jsxs50(Fragment8, { children: [
           showHome || index > 0 ? /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}) : null,
           renderTrailItem(item)
         ] }, item.id)),
-        hidden.length > 0 ? /* @__PURE__ */ jsxs49(Fragment8, { children: [
+        hidden.length > 0 ? /* @__PURE__ */ jsxs50(Fragment9, { children: [
           /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}),
           /* @__PURE__ */ jsx68(BreadcrumbCollapsed, { items: hidden, menuId })
         ] }) : null,
-        tail.map((item) => /* @__PURE__ */ jsxs49(Fragment7, { children: [
+        tail.map((item) => /* @__PURE__ */ jsxs50(Fragment8, { children: [
           /* @__PURE__ */ jsx68(BreadcrumbSeparator, {}),
           renderTrailItem(item)
         ] }, item.id))
@@ -7856,9 +8189,9 @@ function StnBreadcrumb({
 }
 
 // src/components/StnHeaderTitle.tsx
-import { useEffect as useEffect12, useState as useState15 } from "react";
+import { useEffect as useEffect12, useState as useState18 } from "react";
 import { STN_HEADER_TITLE_FRAME } from "@stn-uiux/pub-ui/data/stnHeaderTitle";
-import { jsx as jsx69, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs51 } from "react/jsx-runtime";
 var KO_WEEKDAY_SHORT = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 var KO_WEEKDAY_LONG = [
   "\uC77C\uC694\uC77C",
@@ -7897,7 +8230,7 @@ function formatStnHeaderTitleTime(date, options) {
 }
 function HeaderTitleFrame({ preview = false }) {
   const frameClass = preview ? "stn-header-title__frame-preview" : "stn-header-title__frame";
-  return /* @__PURE__ */ jsxs50("div", { className: frameClass, "aria-hidden": "true", children: [
+  return /* @__PURE__ */ jsxs51("div", { className: frameClass, "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx69("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--outer", children: /* @__PURE__ */ jsx69(
       "img",
       {
@@ -7907,7 +8240,7 @@ function HeaderTitleFrame({ preview = false }) {
         draggable: false
       }
     ) }),
-    /* @__PURE__ */ jsxs50("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
+    /* @__PURE__ */ jsxs51("div", { className: "stn-header-title__frame-bleed stn-header-title__frame-bleed--inner", children: [
       /* @__PURE__ */ jsx69(
         "img",
         {
@@ -7933,7 +8266,7 @@ function StnHeaderTitleFramePreview({ className }) {
   return /* @__PURE__ */ jsx69("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx69(HeaderTitleFrame, { preview: true }) });
 }
 function useLiveClock(enabled) {
-  const [now, setNow] = useState15(() => /* @__PURE__ */ new Date());
+  const [now, setNow] = useState18(() => /* @__PURE__ */ new Date());
   useEffect12(() => {
     if (!enabled) return;
     const id = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
@@ -7997,7 +8330,7 @@ function StnHeaderTitleClock({
 }) {
   const now = useLiveClock(live);
   if (children != null) {
-    return /* @__PURE__ */ jsxs50(
+    return /* @__PURE__ */ jsxs51(
       "header",
       {
         className: cn(
@@ -8040,7 +8373,7 @@ function StnHeaderTitleClock({
       resolvedTime = formatStnHeaderTitleTime(now, { showSeconds });
     }
   }
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "header",
     {
       className: cn(
@@ -8053,7 +8386,7 @@ function StnHeaderTitleClock({
       ...rest,
       children: [
         framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs50("div", { className: "stn-header-title__content", children: [
+        /* @__PURE__ */ jsxs51("div", { className: "stn-header-title__content", children: [
           resolvedDate ? /* @__PURE__ */ jsx69("time", { className: "stn-header-title__date", dateTime: resolvedDate, children: resolvedDate }) : null,
           showWeekdayOnly ? /* @__PURE__ */ jsx69("span", { className: "stn-header-title__weekday", children: resolvedWeekday }) : null,
           resolvedTime ? /* @__PURE__ */ jsx69("span", { className: "stn-header-title__time", "aria-label": "\uD604\uC7AC \uC2DC\uAC01", children: resolvedTime }) : null
@@ -8073,7 +8406,7 @@ function StnHeaderTitleDual({
   ...rest
 }) {
   const resolvedMain = mainText ?? title ?? children;
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "header",
     {
       className: cn(
@@ -8086,7 +8419,7 @@ function StnHeaderTitleDual({
       ...rest,
       children: [
         framed ? /* @__PURE__ */ jsx69(HeaderTitleFrame, {}) : null,
-        /* @__PURE__ */ jsxs50("div", { className: "stn-header-title__content", children: [
+        /* @__PURE__ */ jsxs51("div", { className: "stn-header-title__content", children: [
           subText != null ? /* @__PURE__ */ jsx69("span", { className: "stn-header-title__sub-text", children: subText }) : null,
           resolvedMain != null ? typeof resolvedMain === "string" || typeof resolvedMain === "number" ? /* @__PURE__ */ jsx69("h1", { className: "stn-header-title__text", children: resolvedMain }) : resolvedMain : null
         ] })
@@ -8103,7 +8436,7 @@ function StnHeaderTitleText({
   ...rest
 }) {
   const resolved = title ?? children;
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs51(
     "header",
     {
       className: cn(
@@ -8141,10 +8474,10 @@ var StnHeaderTitle = Object.assign(StnHeaderTitleRoot, {
 
 // src/layouts/StnContainer.tsx
 import {
-  forwardRef as forwardRef38
+  forwardRef as forwardRef39
 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
-var StnContainer = forwardRef38(function StnContainer2({
+var StnContainer = forwardRef39(function StnContainer2({
   component,
   as,
   maxWidth = "lg",
@@ -8182,7 +8515,7 @@ var StnContainer = forwardRef38(function StnContainer2({
 });
 
 // src/layouts/StnGrid.tsx
-import { forwardRef as forwardRef39 } from "react";
+import { forwardRef as forwardRef40 } from "react";
 import { jsx as jsx71 } from "react/jsx-runtime";
 var BREAKPOINTS2 = ["xs", "sm", "md", "lg", "xl"];
 var SPACING_CLASS = {
@@ -8249,7 +8582,7 @@ function sizeClasses(size) {
   }
   return classes;
 }
-var StnGrid = forwardRef39(function StnGrid2({
+var StnGrid = forwardRef40(function StnGrid2({
   component,
   as,
   container = false,
@@ -8293,7 +8626,7 @@ var StnGrid = forwardRef39(function StnGrid2({
 });
 
 // src/layouts/StnLayerShell.tsx
-import { jsx as jsx72, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs52 } from "react/jsx-runtime";
 function StnLayerShell({
   gnb,
   gnbSide = "left",
@@ -8314,7 +8647,7 @@ function StnLayerShell({
   const resolvedMainContent = layer1 ?? children;
   const resolvedModal = layer2;
   const isGnbRight = gnbSide === "right";
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs52(
     "div",
     {
       id: wrapId,
@@ -8324,7 +8657,7 @@ function StnLayerShell({
       children: [
         layer0,
         utilities ? /* @__PURE__ */ jsx72("div", { className: "stn-page-utilities", "data-stn-layer-role": "utility", children: utilities }) : null,
-        /* @__PURE__ */ jsxs51(
+        /* @__PURE__ */ jsxs52(
           "main",
           {
             id: containerId,
@@ -8333,7 +8666,7 @@ function StnLayerShell({
             className: cn("stn-layer-1", scrollable && "scroll", containerClassName),
             children: [
               !isGnbRight && gnb,
-              /* @__PURE__ */ jsxs51("div", { className: "stn-layer-1__main", children: [
+              /* @__PURE__ */ jsxs52("div", { className: "stn-layer-1__main", children: [
                 header ? /* @__PURE__ */ jsx72("header", { className: "stn-layer-1__header", children: header }) : null,
                 /* @__PURE__ */ jsx72("div", { className: cn("stn-layer-1__body", scrollable && "stn-scroll", contentClassName), children: resolvedMainContent })
               ] }),
@@ -8347,14 +8680,166 @@ function StnLayerShell({
   );
 }
 
+// src/layouts/StnListViewLayout.tsx
+import { jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
+function StnListViewLayoutBody({
+  search,
+  sidebar,
+  table,
+  pagination,
+  lnbSide = "left",
+  children,
+  className
+}) {
+  const lnbClass = lnbSide === "right" ? "stn-page-scaffold__lnb lnb_box lnb_box_right" : "stn-page-scaffold__lnb lnb_box";
+  const sidebarAside = sidebar ? /* @__PURE__ */ jsx73("aside", { className: lnbClass, children: sidebar }) : null;
+  return /* @__PURE__ */ jsx73(
+    StnContainer,
+    {
+      maxWidth: false,
+      className: cn("stn-list-view-layout__body", className),
+      children: /* @__PURE__ */ jsxs53(
+        StnStack,
+        {
+          direction: "row",
+          spacing: 2,
+          className: "stn-list-view__main",
+          children: [
+            lnbSide === "left" ? sidebarAside : null,
+            /* @__PURE__ */ jsxs53(
+              StnStack,
+              {
+                direction: "column",
+                spacing: 2,
+                className: "stn-list-view__content-stack",
+                children: [
+                  search ? /* @__PURE__ */ jsx73("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
+                  /* @__PURE__ */ jsx73(
+                    "div",
+                    {
+                      className: "stn-page-scaffold__content content_box",
+                      children: children ?? /* @__PURE__ */ jsxs53("div", { className: "stn-table stn-table--fill", children: [
+                        table,
+                        pagination
+                      ] })
+                    }
+                  )
+                ]
+              }
+            ),
+            lnbSide === "right" ? sidebarAside : null
+          ]
+        }
+      )
+    }
+  );
+}
+function StnListViewLayoutRoot({
+  bare: bareProp,
+  noShell,
+  title = "\uBAA9\uB85D \uC870\uD68C",
+  header,
+  search,
+  sidebar,
+  table,
+  pagination,
+  lnbSide = "left",
+  children,
+  className,
+  ...rest
+}) {
+  const bare = bareProp ?? noShell ?? false;
+  const hasLnbClass = lnbSide === "right" ? "has_lnb_right" : "has_lnb";
+  const body = /* @__PURE__ */ jsx73(
+    StnListViewLayoutBody,
+    {
+      search,
+      sidebar,
+      table,
+      pagination,
+      lnbSide,
+      className: bare ? className : void 0,
+      children
+    }
+  );
+  if (bare) {
+    return body;
+  }
+  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ jsx73("div", { className: "stn-layer-1__header", children: /* @__PURE__ */ jsx73(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx73(StnHeader.Left, { children: /* @__PURE__ */ jsx73(StnHeaderPageTitle, { children: title }) }) }) });
+  return /* @__PURE__ */ jsxs53("div", { className: cn("stn-list-view-layout", "stn-layer-1", className), ...rest, children: [
+    renderedHeader,
+    /* @__PURE__ */ jsx73(
+      "div",
+      {
+        className: cn("stn-content-area", sidebar ? hasLnbClass : null, search ? "has_sch" : null),
+        children: body
+      }
+    )
+  ] });
+}
+function StnListViewLayoutHeader({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx73("div", { className: cn("stn-layer-1__header", className), ...rest, children });
+}
+function StnListViewLayoutSearch({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx73("div", { className: cn("search_area", className), ...rest, children });
+}
+function StnListViewLayoutSidebar({
+  side = "left",
+  className,
+  children,
+  ...rest
+}) {
+  const lnbClass = side === "right" ? "lnb_box_right" : "lnb_box";
+  return /* @__PURE__ */ jsx73("aside", { className: cn(lnbClass, className), ...rest, children });
+}
+function StnListViewLayoutContent({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx73("div", { className: cn("content_box", className), ...rest, children });
+}
+function StnListViewLayoutTable({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx73("div", { className: cn("stn-table", className), ...rest, children });
+}
+function StnListViewLayoutPagination({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx73("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
+}
+var StnListViewLayout = Object.assign(StnListViewLayoutRoot, {
+  Body: StnListViewLayoutBody,
+  Header: StnListViewLayoutHeader,
+  Search: StnListViewLayoutSearch,
+  Sidebar: StnListViewLayoutSidebar,
+  Content: StnListViewLayoutContent,
+  Table: StnListViewLayoutTable,
+  Pagination: StnListViewLayoutPagination
+});
+
+// src/index.ts
+import {
+  STN_LAYOUT_INTRO,
+  STN_LAYOUT_LAYER_PAGE_TREE,
+  STN_LAYOUT_LIST_VIEW_INTRO,
+  STN_LAYOUT_LIST_VIEW_USAGE,
+  STN_LAYOUT_MAP_DASHBOARD_INTRO,
+  STN_LAYOUT_MAP_DASHBOARD_USAGE,
+  STN_LAYER_SHELL_USAGE,
+  applyLnbSideToModifiers,
+  STN_LAYOUT_CONTENT_ROWS,
+  STN_LAYOUT_REGION_ROWS,
+  STN_LAYOUT_SHELL_USAGE,
+  STN_LAYOUT_RECIPES,
+  STN_LAYOUT_PLAYGROUND_TABS,
+  STN_LAYOUT_WHEN_TO_USE,
+  STN_LAYOUT_SCREEN_RECIPES,
+  STN_LAYOUT_SLOT_USAGE,
+  STN_LAYOUT_ALERT_CENTER_USAGE
+} from "@stn-uiux/pub-ui/data/stnLayout";
+
 // src/patterns/dashboard/StnMapCanvas.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 function StnMapCanvas({
   children,
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     "div",
     {
       className: cn("stn-map-canvas", className),
@@ -8366,7 +8851,7 @@ function StnMapCanvas({
 }
 
 // src/patterns/dashboard/StnDashboard.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var fillStyle = {
   flex: "1 1 0%",
   minHeight: 0,
@@ -8385,7 +8870,7 @@ function StnDashboardRoot({
 }) {
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn(
@@ -8414,7 +8899,7 @@ function StnDashboardLeft({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn("stn-dashboard__left", className),
@@ -8440,7 +8925,7 @@ function StnDashboardRight({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn("stn-dashboard__right", className),
@@ -8468,7 +8953,7 @@ function StnDashboardTopRight({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "div",
     {
       className: cn("stn-dashboard__top-right", className),
@@ -8487,9 +8972,9 @@ var StnDashboard = Object.assign(StnDashboardRoot, {
 });
 
 // src/patterns/scaffold/StnPageScaffold.tsx
-import { jsx as jsx75, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
 function StnPageScaffoldRoot({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       className: cn("stn-page-scaffold", className),
@@ -8506,9 +8991,9 @@ function StnPageScaffoldRegion({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs52("div", { className: cn("stn-page-scaffold__region", className), "data-stn-page-scaffold": "region", ...rest, children: [
-    /* @__PURE__ */ jsx75("span", { className: "stn-page-scaffold__region-label", children: label }),
-    hint ? /* @__PURE__ */ jsx75("span", { className: "stn-page-scaffold__region-hint", children: hint }) : null,
+  return /* @__PURE__ */ jsxs54("div", { className: cn("stn-page-scaffold__region", className), "data-stn-page-scaffold": "region", ...rest, children: [
+    /* @__PURE__ */ jsx76("span", { className: "stn-page-scaffold__region-label", children: label }),
+    hint ? /* @__PURE__ */ jsx76("span", { className: "stn-page-scaffold__region-hint", children: hint }) : null,
     children
   ] });
 }
@@ -8519,7 +9004,7 @@ function StnPageScaffoldMapPlaceholder({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx75("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsx76("div", { className: "stn-widget shell-canvas stn-map-canvas", "data-stn-dashboard": "canvas", children: /* @__PURE__ */ jsxs54(
     "div",
     {
       className: cn("stn-page-scaffold__canvas-placeholder", className),
@@ -8527,8 +9012,8 @@ function StnPageScaffoldMapPlaceholder({
       role: "status",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx75("p", { className: "stn-page-scaffold__canvas-placeholder-title", children: message }),
-        note ? /* @__PURE__ */ jsx75("p", { className: "stn-page-scaffold__canvas-placeholder-note", children: note }) : null,
+        /* @__PURE__ */ jsx76("p", { className: "stn-page-scaffold__canvas-placeholder-title", children: message }),
+        note ? /* @__PURE__ */ jsx76("p", { className: "stn-page-scaffold__canvas-placeholder-note", children: note }) : null,
         children
       ]
     }
@@ -8539,7 +9024,7 @@ function StnPageScaffoldMapCanvas({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       className: cn("stn-widget", "shell-canvas", "stn-map-canvas", "stn-page-scaffold__canvas", className),
@@ -8552,7 +9037,7 @@ function StnPageScaffoldMapCanvas({
 }
 function StnPageScaffoldLayer({ label, hint, children, className, ...layerProps }) {
   const labelText = label ? hint ? `${label} \xB7 ${hint}` : label : void 0;
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     StnLayer2,
     {
       className: cn(
@@ -8595,16 +9080,47 @@ function ListPageScaffold({
   ...shellProps
 }) {
   const lnbClass = listPageLnbClass(lnbSide);
-  const lnbAside = showLnb ? /* @__PURE__ */ jsx75("aside", { className: lnbClass, children: lnb ?? /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "LNB", hint: lnbHint }) }) : null;
+  const lnbAside = showLnb ? /* @__PURE__ */ jsx76("aside", { className: lnbClass, children: lnb ?? /* @__PURE__ */ jsx76(StnPageScaffold.Region, { label: "LNB", hint: lnbHint }) }) : null;
   const resolvedContent = layer1 ?? children;
-  const body = /* @__PURE__ */ jsxs52(StnPageScaffold, { children: [
-    lnbSide === "left" ? lnbAside : null,
-    showSearch ? /* @__PURE__ */ jsx75("div", { className: "stn-page-scaffold__search search_area", children: search ?? /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "Search", hint: searchHint }) }) : null,
-    /* @__PURE__ */ jsx75("div", { className: cn("stn-page-scaffold__content content_box", scrollable && "is-scrollable"), children: resolvedContent ?? /* @__PURE__ */ jsx75("div", { className: "stn-table stn-table--fill", children: /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "Table", hint: tableHint }) }) }),
-    lnbSide === "right" ? lnbAside : null
-  ] });
-  const resolvedHeader = header === null ? void 0 : header ?? /* @__PURE__ */ jsx75(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx75(StnHeader.Left, { children: /* @__PURE__ */ jsx75(StnHeaderPageTitle, { children: title }) }) });
-  return /* @__PURE__ */ jsx75(
+  const body = /* @__PURE__ */ jsx76(
+    StnContainer,
+    {
+      maxWidth: false,
+      className: "stn-list-page-container",
+      children: /* @__PURE__ */ jsxs54(
+        StnStack,
+        {
+          direction: "row",
+          spacing: 2,
+          className: "stn-list-page-main",
+          children: [
+            lnbSide === "left" ? lnbAside : null,
+            /* @__PURE__ */ jsxs54(
+              StnStack,
+              {
+                direction: "column",
+                spacing: 2,
+                className: "stn-list-page-content-stack",
+                children: [
+                  showSearch ? /* @__PURE__ */ jsx76("div", { className: "stn-page-scaffold__search search_area", children: search ?? /* @__PURE__ */ jsx76(StnPageScaffold.Region, { label: "Search", hint: searchHint }) }) : null,
+                  /* @__PURE__ */ jsx76(
+                    "div",
+                    {
+                      className: cn("stn-page-scaffold__content content_box", scrollable && "is-scrollable"),
+                      children: resolvedContent ?? /* @__PURE__ */ jsx76("div", { className: "stn-table stn-table--fill", children: /* @__PURE__ */ jsx76(StnPageScaffold.Region, { label: "Table", hint: tableHint }) })
+                    }
+                  )
+                ]
+              }
+            ),
+            lnbSide === "right" ? lnbAside : null
+          ]
+        }
+      )
+    }
+  );
+  const resolvedHeader = header === null ? void 0 : header ?? /* @__PURE__ */ jsx76(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx76(StnHeader.Left, { children: /* @__PURE__ */ jsx76(StnHeaderPageTitle, { children: title }) }) });
+  return /* @__PURE__ */ jsx76(
     StnLayerShell,
     {
       gnb,
@@ -8645,25 +9161,25 @@ function DashboardPageScaffold({
   const isLeft = widgetPosition === "left";
   const isBoth = widgetPosition === "both";
   const isNone = widgetPosition === "none" || !showRightRegion;
-  const mapColumn = /* @__PURE__ */ jsxs52(StnDashboard.Left, { children: [
-    /* @__PURE__ */ jsx75(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
+  const mapColumn = /* @__PURE__ */ jsxs54(StnDashboard.Left, { children: [
+    /* @__PURE__ */ jsx76(StnPageScaffold.MapPlaceholder, { message: finalMapMessage, note: finalMapNote }),
     faultPanel
   ] });
-  const rightWidgets = right ?? /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const leftWidgets = left ?? right ?? /* @__PURE__ */ jsx75(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC88C\uCE21 \uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
-  const dashboardGrid = bodyEmpty ? /* @__PURE__ */ jsx75(StnDashboard, { empty: true, widgetPosition, "data-stn-page-scaffold": "dashboard-empty" }) : isBoth ? /* @__PURE__ */ jsxs52(StnDashboard, { widgetPosition: "both", children: [
-    /* @__PURE__ */ jsx75(StnDashboard.Right, { children: leftWidgets }),
+  const rightWidgets = right ?? /* @__PURE__ */ jsx76(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
+  const leftWidgets = left ?? right ?? /* @__PURE__ */ jsx76(StnPageScaffold.Region, { label: "dashboard_right", hint: "\uC88C\uCE21 \uC704\uC82F\xB7\uC7A5\uC560 \uD328\uB110" });
+  const dashboardGrid = bodyEmpty ? /* @__PURE__ */ jsx76(StnDashboard, { empty: true, widgetPosition, "data-stn-page-scaffold": "dashboard-empty" }) : isBoth ? /* @__PURE__ */ jsxs54(StnDashboard, { widgetPosition: "both", children: [
+    /* @__PURE__ */ jsx76(StnDashboard.Right, { children: leftWidgets }),
     mapColumn,
-    /* @__PURE__ */ jsx75(StnDashboard.Right, { children: rightWidgets })
-  ] }) : isLeft ? /* @__PURE__ */ jsxs52(StnDashboard, { widgetPosition: "left", children: [
-    /* @__PURE__ */ jsx75(StnDashboard.Right, { children: leftWidgets }),
+    /* @__PURE__ */ jsx76(StnDashboard.Right, { children: rightWidgets })
+  ] }) : isLeft ? /* @__PURE__ */ jsxs54(StnDashboard, { widgetPosition: "left", children: [
+    /* @__PURE__ */ jsx76(StnDashboard.Right, { children: leftWidgets }),
     mapColumn
-  ] }) : /* @__PURE__ */ jsxs52(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
+  ] }) : /* @__PURE__ */ jsxs54(StnDashboard, { widgetPosition: isNone ? "none" : "right", children: [
     mapColumn,
-    !isNone ? /* @__PURE__ */ jsx75(StnDashboard.Right, { children: rightWidgets }) : null
+    !isNone ? /* @__PURE__ */ jsx76(StnDashboard.Right, { children: rightWidgets }) : null
   ] });
   const contentNode = children ?? dashboardGrid;
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     StnLayerShell,
     {
       gnb,
@@ -8672,7 +9188,7 @@ function DashboardPageScaffold({
       layer0,
       layer2,
       ...shellProps,
-      children: /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsx76(
         StnContainer,
         {
           maxWidth: false,
@@ -8685,135 +9201,15 @@ function DashboardPageScaffold({
   );
 }
 
-// src/layouts/StnListViewLayout.tsx
-import { jsx as jsx76, jsxs as jsxs53 } from "react/jsx-runtime";
-function StnListViewLayoutBody({
-  search,
-  sidebar,
-  table,
-  pagination,
-  lnbSide = "left",
-  children,
-  className
-}) {
-  const lnbClass = lnbSide === "right" ? "stn-page-scaffold__lnb lnb_box lnb_box_right" : "stn-page-scaffold__lnb lnb_box";
-  return /* @__PURE__ */ jsxs53(StnPageScaffold, { className: cn("stn-list-view-layout__body", className), children: [
-    lnbSide === "left" && sidebar ? /* @__PURE__ */ jsx76("aside", { className: lnbClass, children: sidebar }) : null,
-    search ? /* @__PURE__ */ jsx76("div", { className: "stn-page-scaffold__search search_area", children: search }) : null,
-    /* @__PURE__ */ jsx76("div", { className: "stn-page-scaffold__content content_box", children: children ?? /* @__PURE__ */ jsxs53("div", { className: "stn-table stn-table--fill", children: [
-      table,
-      pagination
-    ] }) }),
-    lnbSide === "right" && sidebar ? /* @__PURE__ */ jsx76("aside", { className: lnbClass, children: sidebar }) : null
-  ] });
-}
-function StnListViewLayoutRoot({
-  bare: bareProp,
-  noShell,
-  title = "\uBAA9\uB85D \uC870\uD68C",
-  header,
-  search,
-  sidebar,
-  table,
-  pagination,
-  lnbSide = "left",
-  children,
-  className,
-  ...rest
-}) {
-  const bare = bareProp ?? noShell ?? false;
-  const hasLnbClass = lnbSide === "right" ? "has_lnb_right" : "has_lnb";
-  const body = /* @__PURE__ */ jsx76(
-    StnListViewLayoutBody,
-    {
-      search,
-      sidebar,
-      table,
-      pagination,
-      lnbSide,
-      className: bare ? className : void 0,
-      children
-    }
-  );
-  if (bare) {
-    return body;
-  }
-  const renderedHeader = header === null ? null : header !== void 0 ? header : /* @__PURE__ */ jsx76("div", { className: "stn-layer-1__header", children: /* @__PURE__ */ jsx76(StnHeader, { variant: "page", children: /* @__PURE__ */ jsx76(StnHeader.Left, { children: /* @__PURE__ */ jsx76(StnHeaderPageTitle, { children: title }) }) }) });
-  return /* @__PURE__ */ jsxs53("div", { className: cn("stn-list-view-layout", "stn-layer-1", className), ...rest, children: [
-    renderedHeader,
-    /* @__PURE__ */ jsx76(
-      "div",
-      {
-        className: cn("stn-content-area", sidebar ? hasLnbClass : null, search ? "has_sch" : null),
-        children: body
-      }
-    )
-  ] });
-}
-function StnListViewLayoutHeader({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx76("div", { className: cn("stn-layer-1__header", className), ...rest, children });
-}
-function StnListViewLayoutSearch({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx76("div", { className: cn("search_area", className), ...rest, children });
-}
-function StnListViewLayoutSidebar({
-  side = "left",
-  className,
-  children,
-  ...rest
-}) {
-  const lnbClass = side === "right" ? "lnb_box_right" : "lnb_box";
-  return /* @__PURE__ */ jsx76("aside", { className: cn(lnbClass, className), ...rest, children });
-}
-function StnListViewLayoutContent({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx76("div", { className: cn("content_box", className), ...rest, children });
-}
-function StnListViewLayoutTable({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx76("div", { className: cn("stn-table", className), ...rest, children });
-}
-function StnListViewLayoutPagination({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx76("div", { className: cn("stn-list-view-layout__pagination-wrap", className), ...rest, children });
-}
-var StnListViewLayout = Object.assign(StnListViewLayoutRoot, {
-  Body: StnListViewLayoutBody,
-  Header: StnListViewLayoutHeader,
-  Search: StnListViewLayoutSearch,
-  Sidebar: StnListViewLayoutSidebar,
-  Content: StnListViewLayoutContent,
-  Table: StnListViewLayoutTable,
-  Pagination: StnListViewLayoutPagination
-});
-
-// src/index.ts
-import {
-  STN_LAYOUT_INTRO,
-  STN_LAYOUT_LAYER_PAGE_TREE,
-  STN_LAYOUT_LIST_VIEW_INTRO,
-  STN_LAYOUT_LIST_VIEW_USAGE,
-  STN_LAYOUT_MAP_DASHBOARD_INTRO,
-  STN_LAYOUT_MAP_DASHBOARD_USAGE,
-  STN_LAYER_SHELL_USAGE,
-  applyLnbSideToModifiers,
-  STN_LAYOUT_CONTENT_ROWS,
-  STN_LAYOUT_REGION_ROWS,
-  STN_LAYOUT_SHELL_USAGE,
-  STN_LAYOUT_RECIPES,
-  STN_LAYOUT_PLAYGROUND_TABS,
-  STN_LAYOUT_WHEN_TO_USE,
-  STN_LAYOUT_SCREEN_RECIPES,
-  STN_LAYOUT_SLOT_USAGE,
-  STN_LAYOUT_ALERT_CENTER_USAGE
-} from "@stn-uiux/pub-ui/data/stnLayout";
-
 // src/patterns/scaffold/AlertCenterPageScaffold.tsx
-import { useMemo as useMemo5, useState as useState16 } from "react";
+import { useMemo as useMemo5, useState as useState19 } from "react";
 import {
   STN_ALERT_CENTER_DEMO_ALERTS,
   STN_ALERT_CENTER_DEMO_DEPLOY,
   STN_ALERT_CENTER_DEMO_WORK
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
 import { systemIconSrc } from "@stn-uiux/pub-ui/data/stnSystemIcons";
-import { Fragment as Fragment9, jsx as jsx77, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
 function defaultTopologyHeader(_clock) {
   return /* @__PURE__ */ jsx77(StnHeader, { variant: "widget" });
 }
@@ -8832,7 +9228,7 @@ function AlertCenterPageScaffold({
   defaultGnbOpen = true,
   ...shellProps
 }) {
-  const [gnbOpen, setGnbOpen] = useState16(defaultGnbOpen);
+  const [gnbOpen, setGnbOpen] = useState19(defaultGnbOpen);
   const panel = useMemo5(
     () => gnbAlertPanel ?? /* @__PURE__ */ jsx77(
       StnAlertCenterPanel,
@@ -8845,24 +9241,24 @@ function AlertCenterPageScaffold({
     [gnbAlertPanel]
   );
   const sideNav = useMemo5(
-    () => gnbProp ?? /* @__PURE__ */ jsxs54(Fragment9, { children: [
-      /* @__PURE__ */ jsxs54(
+    () => gnbProp ?? /* @__PURE__ */ jsxs55(Fragment10, { children: [
+      /* @__PURE__ */ jsxs55(
         StnSideNavigation,
         {
           collapsed: !gnbOpen,
           onCollapseChange: (col) => setGnbOpen(!col),
           children: [
-            /* @__PURE__ */ jsxs54(StnSideNavigation.Header, { children: [
+            /* @__PURE__ */ jsxs55(StnSideNavigation.Header, { children: [
               /* @__PURE__ */ jsx77(StnSideNavigation.Logo, {}),
               /* @__PURE__ */ jsx77(StnSideNavigation.Toggle, {})
             ] }),
-            /* @__PURE__ */ jsxs54(StnSideNavigation.Menu, { children: [
+            /* @__PURE__ */ jsxs55(StnSideNavigation.Menu, { children: [
               /* @__PURE__ */ jsx77(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/layout-grid"), label: "\uBA54\uC778 \uB300\uC2DC\uBCF4\uB4DC", active: true }),
               /* @__PURE__ */ jsx77(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/server_2"), label: "\uC11C\uBC84 \uBAA8\uB2C8\uD130\uB9C1" }),
               /* @__PURE__ */ jsx77(StnSideNavigation.Item, { iconSrc: systemIconSrc("line/activity"), label: "\uB124\uD2B8\uC6CC\uD06C \uBD84\uC11D" })
             ] }),
             /* @__PURE__ */ jsx77(StnSideNavigation.Spacer, {}),
-            /* @__PURE__ */ jsxs54(StnSideNavigation.Footer, { curved: true, children: [
+            /* @__PURE__ */ jsxs55(StnSideNavigation.Footer, { curved: true, children: [
               /* @__PURE__ */ jsx77(StnSideNavigation.Watermark, {}),
               /* @__PURE__ */ jsx77(
                 StnSideNavigation.Item,
@@ -8900,8 +9296,8 @@ function AlertCenterPageScaffold({
 }
 
 // src/patterns/scaffold/LoginPageScaffold.tsx
-import { useState as useState17 } from "react";
-import { jsx as jsx78, jsxs as jsxs55 } from "react/jsx-runtime";
+import { useState as useState20 } from "react";
+import { jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
 var LOGIN_TABS = [
   { value: "normal", label: "\uC77C\uBC18 \uB85C\uADF8\uC778" },
   { value: "social", label: "\uC18C\uC15C \uB85C\uADF8\uC778" }
@@ -8912,14 +9308,14 @@ function DefaultLoginForm({
   signUpHref = "#",
   recoverHref = "#"
 }) {
-  const [mode, setMode] = useState17("normal");
-  const [userId, setUserId] = useState17("");
-  const [password, setPassword] = useState17("");
+  const [mode, setMode] = useState20("normal");
+  const [userId, setUserId] = useState20("");
+  const [password, setPassword] = useState20("");
   function handleSubmit(e) {
     e.preventDefault();
     onLogin?.(userId, password);
   }
-  return /* @__PURE__ */ jsxs55(StnLoginFormStack, { onSubmit: handleSubmit, children: [
+  return /* @__PURE__ */ jsxs56(StnLoginFormStack, { onSubmit: handleSubmit, children: [
     /* @__PURE__ */ jsx78(
       StnSegmented,
       {
@@ -8929,7 +9325,7 @@ function DefaultLoginForm({
         options: LOGIN_TABS
       }
     ),
-    mode === "normal" ? /* @__PURE__ */ jsxs55(StnLoginFormFields, { children: [
+    mode === "normal" ? /* @__PURE__ */ jsxs56(StnLoginFormFields, { children: [
       /* @__PURE__ */ jsx78(
         StnLoginTextField,
         {
@@ -8957,7 +9353,7 @@ function DefaultLoginForm({
       )
     ] }) : socialContent ?? /* @__PURE__ */ jsx78(StnLoginPlaceholder, {}),
     /* @__PURE__ */ jsx78(StnButton, { type: "submit", size: "xl", fullWidth: true, children: "\uB85C\uADF8\uC778" }),
-    /* @__PURE__ */ jsxs55(StnLoginFormLinks, { children: [
+    /* @__PURE__ */ jsxs56(StnLoginFormLinks, { children: [
       /* @__PURE__ */ jsx78("a", { href: signUpHref, children: "\uD68C\uC6D0\uAC00\uC785" }),
       /* @__PURE__ */ jsx78("a", { href: recoverHref, children: "\uC544\uC774\uB514 / \uBE44\uBC00\uBC88\uD638 \uCC3E\uAE30" })
     ] })
@@ -8978,7 +9374,7 @@ function DefaultLoginCard({
     {
       glow,
       variant,
-      brand: /* @__PURE__ */ jsxs55(StnLoginBrandStack, { children: [
+      brand: /* @__PURE__ */ jsxs56(StnLoginBrandStack, { children: [
         logo ?? /* @__PURE__ */ jsx78(StnLogo, { variant: "vertical", size: "xl" }),
         /* @__PURE__ */ jsx78("p", { className: "stn-login-card__caption", children: productCaption })
       ] }),
@@ -9022,7 +9418,7 @@ function LoginPageScaffold({
       recoverHref
     }
   );
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs56(
     "div",
     {
       className: cn("stn-wrap stn-page--login", wrapClassName),
@@ -9059,7 +9455,7 @@ import {
 
 // src/patterns/toolbar/StnFloatingToolbar.tsx
 import React4 from "react";
-import { jsx as jsx79, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
 var DEFAULT_MAP_MODES = [
   { value: "sphere", label: "\uAD6C\uBA74" },
   { value: "plane", label: "\uD3C9\uBA74" },
@@ -9102,7 +9498,7 @@ var StnMapToolbar = React4.forwardRef(
     children,
     ...restProps
   }, ref) => {
-    return /* @__PURE__ */ jsxs56(
+    return /* @__PURE__ */ jsxs57(
       StnFloatingToolbar,
       {
         ref,
@@ -9129,7 +9525,7 @@ var StnMapToolbar = React4.forwardRef(
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              icon: /* @__PURE__ */ jsxs57("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
                 /* @__PURE__ */ jsx79("path", { d: "M3.06006 13C3.30547 15.1939 4.34865 17.221 5.9912 18.696C7.63374 20.1709 9.76108 20.9907 11.9686 20.9994C14.1762 21.0081 16.3099 20.2052 17.9641 18.7434C19.6183 17.2815 20.6775 15.2627 20.9403 13.0708C21.2031 10.879 20.6511 8.66696 19.3894 6.85551C18.1276 5.04406 16.2441 3.75951 14.0971 3.24618C11.95 2.73284 9.68922 3.02652 7.74457 4.07135C5.79993 5.11619 4.30712 6.83931 3.55006 8.913" }),
                 /* @__PURE__ */ jsx79("path", { d: "M3 4.00098V9.00098H8" }),
                 /* @__PURE__ */ jsx79("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" })
@@ -9145,7 +9541,7 @@ var StnMapToolbar = React4.forwardRef(
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              icon: /* @__PURE__ */ jsxs57("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
                 /* @__PURE__ */ jsx79("path", { d: "M16 4H20V8" }),
                 /* @__PURE__ */ jsx79("path", { d: "M14 10L20 4" }),
                 /* @__PURE__ */ jsx79("path", { d: "M8 20H4V16" }),
@@ -9162,7 +9558,7 @@ var StnMapToolbar = React4.forwardRef(
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              icon: /* @__PURE__ */ jsxs57("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
                 /* @__PURE__ */ jsx79("path", { d: "M12 5V19" }),
                 /* @__PURE__ */ jsx79("path", { d: "M5 12H19" })
               ] }),
@@ -9189,7 +9585,7 @@ var StnMapToolbar = React4.forwardRef(
               variant: buttonVariant,
               size: "md",
               shape: "square",
-              icon: /* @__PURE__ */ jsxs56("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              icon: /* @__PURE__ */ jsxs57("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
                 /* @__PURE__ */ jsx79("path", { d: "M20 11C19.7554 9.24023 18.9391 7.60967 17.6766 6.35951C16.4142 5.10934 14.7758 4.30893 13.0137 4.08156C11.2516 3.8542 9.46362 4.21249 7.9252 5.10126C6.38678 5.99002 5.18325 7.35995 4.5 9.00001M4 5.00001V9.00001H8" }),
                 /* @__PURE__ */ jsx79("path", { d: "M4 13C4.24456 14.7598 5.06093 16.3903 6.32336 17.6405C7.58579 18.8907 9.22424 19.6911 10.9863 19.9184C12.7484 20.1458 14.5364 19.7875 16.0748 18.8988C17.6132 18.01 18.8168 16.6401 19.5 15M20 19V15H16" })
               ] }),
@@ -9443,8 +9839,12 @@ export {
   StnSideNavigation,
   StnSlider,
   StnStack,
+  StnStatus,
+  StnStatusDot,
+  StnStatusDotGroup,
+  StnStatusFlow,
+  StnStatusSwitch,
   StnSwitch,
-  StnSystemChip,
   StnTable,
   StnTableBody,
   StnTableGrid,