@stn-uiux/pub-ui-react 0.1.49

package/dist/index.d.ts

@@ -0,0 +1,3524 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default, { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, CSSProperties, ComponentPropsWithoutRef, HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes, FormHTMLAttributes, MouseEvent, SVGAttributes, ElementType } from 'react';
+export { resolveSystemIconSrcFromName, systemIconSrc } from '@stn-uiux/pub-ui/data/stnSystemIcons';
+export { STN_PAGINATION_EXAMPLE, STN_PAGINATION_FIGMA, STN_PAGINATION_INTRO, STN_PAGINATION_REACT } from '@stn-uiux/pub-ui/data/stnPagination';
+import { StnToastKind } from '@stn-uiux/pub-ui/data/stnToast';
+export { STN_TOAST_ICON_SLUG } from '@stn-uiux/pub-ui/data/stnToast';
+import { StnChipGrade, StnChipBorderAccent } from '@stn-uiux/pub-ui/data/stnChip';
+import { StnDropdownOption, StnDropdownSize, StnDropdownVariant, StnDropdownModifier, StnDropdownHelperTextPosition, StnDropdownDirection } from '@stn-uiux/pub-ui/data/stnDropdown';
+export { STN_DROPDOWN_HTML_COUNTS, STN_DROPDOWN_INTRO, STN_DROPDOWN_INVENTORY, STN_DROPDOWN_MENU_INTRO, STN_DROPDOWN_MENU_USAGE, STN_DROPDOWN_SIZE_ROWS, STN_DROPDOWN_USAGE, StnDropdownHelperTextPosition, StnDropdownModifier, StnDropdownOption, StnDropdownSize, StnDropdownVariant } from '@stn-uiux/pub-ui/data/stnDropdown';
+import { StnInputWidthValue } from '@stn-uiux/pub-ui/data/stnInputWidth';
+import { StnTextFieldSize } from '@stn-uiux/pub-ui/data/stnTextField';
+export { STN_TEXT_FIELD_FIGMA, STN_TEXT_FIELD_HTML, STN_TEXT_FIELD_INTRO, STN_TEXT_FIELD_SIZE_ROWS, STN_TEXT_FIELD_STATES, STN_TEXT_FIELD_USAGE, StnTextFieldSize } from '@stn-uiux/pub-ui/data/stnTextField';
+import { StnDateRangeFieldSize } from '@stn-uiux/pub-ui/data/stnDateRangeField';
+export { STN_DATE_RANGE_FIELD_DEMO, STN_DATE_RANGE_FIELD_FIGMA, STN_DATE_RANGE_FIELD_HTML, STN_DATE_RANGE_FIELD_INTRO, STN_DATE_RANGE_FIELD_NAME, STN_DATE_RANGE_FIELD_SIZE_ROWS, STN_DATE_RANGE_FIELD_USAGE, StnDateRangeFieldSize, formatStnDateRangeFieldValue, parseStnDateRangeFieldValue } from '@stn-uiux/pub-ui/data/stnDateRangeField';
+export { STN_SEGMENTED_FIGMA, STN_SEGMENTED_HTML, STN_SEGMENTED_INTRO, STN_SEGMENTED_USAGE } from '@stn-uiux/pub-ui/data/stnSegmented';
+export { STN_LOGIN_ASSETS, STN_LOGIN_FIGMA, STN_LOGIN_HTML, STN_LOGIN_INTRO, STN_LOGIN_USAGE } from '@stn-uiux/pub-ui/data/stnLogin';
+export { STN_SEARCH_REQUIREMENT_DEMO_FIELDS, STN_SEARCH_REQUIREMENT_FIGMA, STN_SEARCH_REQUIREMENT_INTRO, STN_SEARCH_REQUIREMENT_KO_NAME, STN_SEARCH_REQUIREMENT_NAME, STN_SEARCH_REQUIREMENT_SPEC, STN_SEARCH_REQUIREMENT_USAGE } from '@stn-uiux/pub-ui/data/stnSearchRequirement';
+import { StnHeaderVariant, StnHeaderPadding, StnHeaderGap } from '@stn-uiux/pub-ui/data/stnHeader';
+export { STN_HEADER_INTRO, STN_HEADER_PAGE_TITLE_DEMO, STN_HEADER_USAGE, STN_HEADER_VARIANT_ROWS, STN_SYSTEM_CHIP_DEMO, StnHeaderGap, StnHeaderPadding, StnHeaderVariant } from '@stn-uiux/pub-ui/data/stnHeader';
+import { StnLayer0BackgroundPreset, StnLayer0BackgroundKind } from '@stn-uiux/pub-ui/data/stnLayer0Background';
+export { STN_LAYER0_BACKGROUND_DEMO_IMAGES, STN_LAYER0_BACKGROUND_FIGMA, STN_LAYER0_BACKGROUND_INTRO, STN_LAYER0_BACKGROUND_USAGE, STN_LAYER0_BACKGROUND_VARIANT_ROWS, STN_LAYER0_MAP_LIGHT_OVERLAY, StnLayer0BackgroundKind, StnLayer0BackgroundPreset } from '@stn-uiux/pub-ui/data/stnLayer0Background';
+import { StnDateRange } from '@stn-uiux/pub-ui/data/stnDatePicker';
+export { STN_DATE_PICKER_INTRO, STN_DATE_PICKER_KO_NAME, STN_DATE_PICKER_NAME, STN_DATE_PICKER_PANEL_USAGE, STN_DATE_PICKER_PART_ROWS, STN_DATE_PICKER_SPEC, STN_DATE_PICKER_USAGE, STN_DATE_PICKER_WEEKDAYS, StnDateRange } from '@stn-uiux/pub-ui/data/stnDatePicker';
+import { StnWidgetShell, StnWidgetAppearance, StnWidgetBackgroundMode, StnWidgetGradeRowGrade } from '@stn-uiux/pub-ui/data/stnWidget';
+export { STN_ALERT_CENTER_DASHBOARD_USAGE, STN_ALERT_CENTER_DASHBOARD_WIDGETS, STN_WIDGET_FIGMA, STN_WIDGET_FIGMA_DARK, STN_WIDGET_FIGMA_DARK_URL, STN_WIDGET_FIGMA_URL, STN_WIDGET_INTRO, STN_WIDGET_KINDS, STN_WIDGET_SHELL_ROWS, STN_WIDGET_USAGE, StnWidgetAppearance, StnWidgetBackgroundMode, StnWidgetContentFamily, StnWidgetGradeRowGrade, StnWidgetKind, StnWidgetShell, getStnWidgetKind, isStnWidgetKindSlug, resolveStnWidgetBackground, stnWidgetSampleUrl } from '@stn-uiux/pub-ui/data/stnWidget';
+import { StnAlertCenterAlertItem, StnAlertCenterWorkItem, StnAlertCenterTab } from '@stn-uiux/pub-ui/data/stnAlertCenter';
+export { STN_ALERT_CENTER_DEMO_ALERTS, STN_ALERT_CENTER_DEMO_DEPLOY, STN_ALERT_CENTER_DEMO_WORK, STN_ALERT_CENTER_INTRO, STN_ALERT_CENTER_TABS, STN_ALERT_CENTER_TAB_IDS, STN_ALERT_CENTER_USAGE, STN_GNB_ALERT_INTEGRATION_USAGE, StnAlertCenterAlertItem, StnAlertCenterTab, StnAlertCenterWorkItem } from '@stn-uiux/pub-ui/data/stnAlertCenter';
+import { StnBreadcrumbIconId } from '@stn-uiux/pub-ui/data/stnBreadcrumb';
+import { StnLnbSide } from '@stn-uiux/pub-ui/data/stnLayout';
+export { STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE, STN_LAYER_SHELL_USAGE, STN_LAYOUT_ALERT_CENTER_USAGE, STN_LAYOUT_CONTENT_ROWS, 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_LAYOUT_PLAYGROUND_TABS, STN_LAYOUT_RECIPES, STN_LAYOUT_REGION_ROWS, STN_LAYOUT_SCREEN_RECIPES, STN_LAYOUT_SHELL_USAGE, STN_LAYOUT_SLOT_USAGE, STN_LAYOUT_WHEN_TO_USE, STN_PAGE_SCAFFOLD_COMPOUND_USAGE, STN_PAGE_SCAFFOLD_INTRO, STN_PAGE_SCAFFOLD_KINDS, StnLayoutScreenKind, StnLnbSide, StnPageScaffoldKind, applyLnbSideToModifiers } from '@stn-uiux/pub-ui/data/stnLayout';
+import { StnElevationLevel, StnLayerRole, StnLayerSurface } from '@stn-uiux/pub-ui/data/stnLayer';
+export { STN_ELEVATION_Z_INDEX, STN_LAYER_INTRO, STN_LAYER_ROLE_ROWS, STN_LAYER_ROLE_TO_LEVEL, STN_LAYER_ROLE_USAGE, STN_LAYER_SURFACE_ROWS, StnElevationLevel, StnLayerRole, StnLayerSurface } from '@stn-uiux/pub-ui/data/stnLayer';
+export { STN_LOADING_SKELETON_INTRO, STN_LOADING_SKELETON_PARTS, STN_LOADING_SKELETON_USAGE } from '@stn-uiux/pub-ui/data/stnLoadingSkeleton';
+
+/** Join truthy class fragments (no dependency on clsx). */
+declare function cn(...parts: Array<string | false | null | undefined>): string;
+
+type StnPaginationItem = number | 'ellipsis';
+/**
+ * Infomap Figma `paging` (node 40000042:210340)
+ * 시작 근처: 1 2 3 4 5 … N
+ * 끝 근처: 1 … N-4 … N
+ * 중간: 1 … c-1 c c+1 … N
+ */
+declare function buildPaginationItems(page: number, pageCount: number, siblingCount?: number): StnPaginationItem[];
+
+type StnTheme = 'light' | 'dark';
+type StnContextValue = {
+    theme: StnTheme;
+    setTheme: (theme: StnTheme) => void;
+};
+declare const StnContext: react.Context<StnContextValue | null>;
+declare function useStn(): StnContextValue;
+declare function useStnOptional(): StnContextValue | null;
+
+type StnProviderProps = {
+    children: ReactNode;
+    theme?: StnTheme;
+    defaultTheme?: StnTheme;
+    onThemeChange?: (theme: StnTheme) => void;
+    applyThemeToDocument?: boolean;
+    className?: string;
+};
+declare function StnProvider({ children, theme: themeProp, defaultTheme, onThemeChange, applyThemeToDocument, className, }: StnProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * 디자인 가이드 준수 — 소비자가 `style`로 높이·색 등 모양을 바꾸지 못하게 차단.
+ * 모양 변경은 size · variant · width 등 패키지가 정의한 props만 사용.
+ */
+type StnWithoutStyle<T> = Omit<T, 'style'>;
+
+/** 표준 2글자 사이즈: xl · lg · md · sm · xs (레거시 L/M/S/large/medium 등 호환) */
+type StnButtonSize = 'xl' | 'lg' | 'md' | 'sm' | 'large' | 'medium' | 'small' | 'XL' | 'L' | 'M' | 'S';
+/** 버튼 variant: contained · outlined · ghost · text */
+type StnButtonVariant = 'contained' | 'outlined' | 'ghost' | 'text';
+/** 색 — 기본 primary. 토큰: --stn-feedback-* */
+type StnButtonColor = 'primary' | 'success' | 'error' | 'warning' | 'info';
+/** 아이콘 위치 — left | right | none */
+type StnButtonIconPosition = 'left' | 'right' | 'none';
+/** 모서리 형태 — pill(기본 캡슐형) · square(사각 버튼: 4px, lg/xl: 6px) */
+type StnButtonShape = 'pill' | 'square';
+type StnButtonProps = StnWithoutStyle<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'color'>> & {
+    size?: StnButtonSize;
+    variant?: StnButtonVariant;
+    color?: StnButtonColor;
+    /** 모서리 형태 (기본 pill, 툴바 등 사각 아이콘 버튼에는 'square') */
+    shape?: StnButtonShape;
+    /** 아이콘 위치 · 기본 none (icon 지정 시 left 기본값) */
+    iconPosition?: StnButtonIconPosition;
+    /** 커스텀 아이콘 또는 아이콘 이름 ('line/pencil-minus' 또는 ReactNode) */
+    icon?: ReactNode;
+    /** width 100% — `.stn-btn.full` */
+    fullWidth?: boolean;
+    className?: string;
+    children?: ReactNode;
+};
+/**
+ * Infomap Figma `btn` — `.stn-btn`
+ * 레이블을 생략하고 `icon`만 주면 아이콘 버튼 (`.stn-btn.icon`). 이때 `aria-label` 필수.
+ */
+declare const StnButton: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "color">> & {
+    size?: StnButtonSize;
+    variant?: StnButtonVariant;
+    color?: StnButtonColor;
+    /** 모서리 형태 (기본 pill, 툴바 등 사각 아이콘 버튼에는 'square') */
+    shape?: StnButtonShape;
+    /** 아이콘 위치 · 기본 none (icon 지정 시 left 기본값) */
+    iconPosition?: StnButtonIconPosition;
+    /** 커스텀 아이콘 또는 아이콘 이름 ('line/pencil-minus' 또는 ReactNode) */
+    icon?: ReactNode;
+    /** width 100% — `.stn-btn.full` */
+    fullWidth?: boolean;
+    className?: string;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type StnSliderSize = 'sm' | 'md' | 'lg';
+type StnSliderColor = 'primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'error' | 'info' | (string & {});
+type StnSliderGradient = boolean | 'main' | 'primary' | 'secondary' | 'critical' | 'major' | 'minor' | 'warning' | (string & {});
+type StnSliderLabelPosition = 'top' | 'bottom' | 'left' | 'right';
+type StnSliderLabelAlign = 'left' | 'center' | 'right';
+type StnSliderProps = StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'value' | 'defaultValue' | 'onChange' | 'size'>> & {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** 슬라이더 상단/주변 레이블 */
+    label?: ReactNode;
+    /** 크기 ('sm', 'md' 기본, 'lg') @default 'md' */
+    size?: StnSliderSize;
+    /** 활성 채움 색상 @default 'primary' */
+    color?: StnSliderColor;
+    /** 활성화 트랙 그라데이션 ('blue', 'teal', 'purple', 'sunset', 'emerald' 또는 커스텀 linear-gradient) */
+    gradient?: StnSliderGradient;
+    /** 레이블 위치 ('top' 기본, 'bottom', 'left', 'right') @default 'top' */
+    labelPosition?: StnSliderLabelPosition;
+    /** 레이블 정렬 ('left' 기본, 'center', 'right') @default 'left' */
+    labelAlign?: StnSliderLabelAlign;
+    /** 값 말풍선 표시 (hover/focus에서도 CSS로 노출) */
+    showValue?: boolean;
+    /** 말풍선에 항상 표시 */
+    alwaysShowValue?: boolean;
+    /** 말풍선 포맷 */
+    formatValue?: (value: number) => ReactNode;
+    /** 필수 조절 여부 (레이블 옆에 붉은색 * 표시) */
+    required?: boolean;
+    onChange?: (value: number) => void;
+    className?: string;
+};
+/**
+ * Slider — continuous range. 모양: `stn-slider.css` (`.stn-slider`)
+ */
+declare const StnSlider: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "value" | "size" | "type" | "defaultValue" | "onChange">> & {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** 슬라이더 상단/주변 레이블 */
+    label?: ReactNode;
+    /** 크기 ('sm', 'md' 기본, 'lg') @default 'md' */
+    size?: StnSliderSize;
+    /** 활성 채움 색상 @default 'primary' */
+    color?: StnSliderColor;
+    /** 활성화 트랙 그라데이션 ('blue', 'teal', 'purple', 'sunset', 'emerald' 또는 커스텀 linear-gradient) */
+    gradient?: StnSliderGradient;
+    /** 레이블 위치 ('top' 기본, 'bottom', 'left', 'right') @default 'top' */
+    labelPosition?: StnSliderLabelPosition;
+    /** 레이블 정렬 ('left' 기본, 'center', 'right') @default 'left' */
+    labelAlign?: StnSliderLabelAlign;
+    /** 값 말풍선 표시 (hover/focus에서도 CSS로 노출) */
+    showValue?: boolean;
+    /** 말풍선에 항상 표시 */
+    alwaysShowValue?: boolean;
+    /** 말풍선 포맷 */
+    formatValue?: (value: number) => ReactNode;
+    /** 필수 조절 여부 (레이블 옆에 붉은색 * 표시) */
+    required?: boolean;
+    onChange?: (value: number) => void;
+    className?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type StnIconProps = {
+    /** Iconography slug (`line/home`) */
+    name?: string;
+    /** 정적 URL · `name`과 동시면 src 우선 */
+    src?: string;
+    /** 모노 아이콘 색 · primitive 변수 (`var(--stn-blue-400)`) 또는 CSS 색상 */
+    color?: string;
+    /** px */
+    size?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * 아이콘 그림 — Button leading 등에서 사용
+ * color 전달 시 CSS Mask를 통해 Primitive 색상으로 실시간 틴트 적용
+ */
+declare function StnIcon({ name, src, color, size, className, style }: StnIconProps): react_jsx_runtime.JSX.Element | null;
+
+type StnIconBoxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type StnIconBoxColor = 'primary' | 'secondary' | 'critical' | 'major' | 'minor' | 'warning' | 'success' | 'error' | 'info' | (string & {});
+type StnIconBoxProps = {
+    /** Iconography slug (`line/user`) 또는 직접 전달하는 ReactNode */
+    icon?: ReactNode;
+    /** 박스 크기 ('xs' | 'sm' | 'md' | 'lg' | 'xl', 기본값: 'md') */
+    size?: StnIconBoxSize;
+    /** 시맨틱 색상 ('primary' | 'secondary' | 'critical' | 'major' | 'minor' | 'warning' 등) 또는 커스텀 CSS 색상 */
+    color?: StnIconBoxColor;
+    /** 아이콘 자체의 px 크기 (지정하지 않으면 size에 따라 12 / 14 / 16 / 20 / 24로 자동 결정) */
+    iconSize?: number;
+    /** 활성(Active) 상태 여부 */
+    active?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+};
+/**
+ * StnIconBox — Design System 표준 입체 아이콘 박스 컴포넌트
+ * Neumorphism inset + drop shadow 효과와 그라데이션 배경을 가집니다.
+ * 크기 variant: xs (20px) | sm (24px) | md (28px - default) | lg (36px) | xl (44px)
+ */
+declare function StnIconBox({ icon, size, color, iconSize, active, className, style, children, }: StnIconBoxProps): react_jsx_runtime.JSX.Element;
+
+type StnPaginationProps = StnWithoutStyle<Omit<ComponentPropsWithoutRef<'nav'>, 'className' | 'children'>> & {
+    /** 1-based current page */
+    page: number;
+    /** Total page count */
+    count: number;
+    onPageChange?: (page: number) => void;
+    /** Pages shown on each side of current when ellipsis appear (Infomap middle) */
+    siblingCount?: number;
+    className?: string;
+};
+/**
+ * Infomap Figma `paging` — 모양: `stn-pagination.css`
+ */
+declare const StnPagination: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children" | "className">> & {
+    /** 1-based current page */
+    page: number;
+    /** Total page count */
+    count: number;
+    onPageChange?: (page: number) => void;
+    /** Pages shown on each side of current when ellipsis appear (Infomap middle) */
+    siblingCount?: number;
+    className?: string;
+} & react.RefAttributes<HTMLElement>>;
+
+/** Matches `STN_POPUP_SIZES` in `@stn-uiux/pub-ui/data/stnPopup` */
+type StnPopupSize = 'xs' | 's' | 'sm' | 'm' | 'md' | 'l' | 'lg' | 'xl' | 'xxl' | '2xl' | 'full';
+type StnPopupProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'title'> & {
+    open: boolean;
+    onClose: () => void;
+    title: ReactNode;
+    size?: StnPopupSize;
+    children: ReactNode;
+    /** Footer actions — maps to `.stn-pop__actions` */
+    actions?: ReactNode;
+    className?: string;
+    /** dim + modal portal (default true) — `StnLayer.Dim` / `StnLayer.Modal` 스택 */
+    portal?: boolean;
+    /** close when dim is clicked (default true) */
+    closeOnScrimClick?: boolean;
+    /** Dim(스크림) 배경 여부 (기본 true). false 시 어두운 배경 딤 없이 모달만 노출 */
+    dim?: boolean;
+};
+declare const StnPopup: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "className" | "title"> & {
+    open: boolean;
+    onClose: () => void;
+    title: ReactNode;
+    size?: StnPopupSize;
+    children: ReactNode;
+    /** Footer actions — maps to `.stn-pop__actions` */
+    actions?: ReactNode;
+    className?: string;
+    /** dim + modal portal (default true) — `StnLayer.Dim` / `StnLayer.Modal` 스택 */
+    portal?: boolean;
+    /** close when dim is clicked (default true) */
+    closeOnScrimClick?: boolean;
+    /** Dim(스크림) 배경 여부 (기본 true). false 시 어두운 배경 딤 없이 모달만 노출 */
+    dim?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type StnToastCloseButtonProps = {
+    onClose?: () => void;
+    closeToast?: (dismissAll?: boolean) => void;
+    ariaLabel?: string;
+    className?: string;
+};
+/**
+ * Toast 닫기 — `StnButton` icon-only (`line/x` · tertiary ghost)
+ * 클래스: `.stn-toast-close`
+ */
+declare function StnToastCloseButton({ onClose, closeToast, ariaLabel, className, }: StnToastCloseButtonProps): react_jsx_runtime.JSX.Element;
+
+type StnToastIconProps = {
+    type?: string;
+    kind?: StnToastKind;
+    theme?: string;
+    isLoading?: boolean;
+    size?: number;
+    className?: string;
+};
+/**
+ * Toast 유형 아이콘 — StnIcon 기반 (currentColor 연동)
+ */
+declare function StnToastIcon({ type, kind: kindProp, isLoading, size, className, }: StnToastIconProps): react_jsx_runtime.JSX.Element | null;
+
+type StnProgressBarTone = 'primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'neutral' | 'info' | 'warn' | 'error' | (string & {});
+type StnProgressBarGradient = 'none' | 'main' | 'primary' | 'secondary' | 'critical' | 'major' | 'minor' | 'warning';
+type StnProgressBarSize = 'sm' | 'md' | 'lg';
+type StnProgressBarTrack = 'default' | 'muted' | 'dark';
+type StnProgressBarLabelPosition = 'top' | 'bottom' | 'inside' | 'side';
+type StnProgressBarLabelAlign = 'between' | 'center' | 'start' | 'end';
+type StnProgressBarProps = StnWithoutStyle<Omit<HTMLAttributes<HTMLDivElement>, 'children'>> & {
+    /** 정적 진행률 0–100 (countdown이 없을 때) */
+    value?: number;
+    /** 기본 100 */
+    max?: number;
+    tone?: StnProgressBarTone;
+    gradient?: StnProgressBarGradient;
+    size?: StnProgressBarSize;
+    /** 배경 트랙 색상 지정 (default: 회색 트랙, muted: 투명 트랙, dark: 짙은 회색) */
+    track?: StnProgressBarTrack;
+    /** 진행률 텍스트 표시 여부 */
+    showLabel?: boolean;
+    /** 텍스트 라벨 (미지정 시 `${Math.round(pct)}%`) */
+    label?: ReactNode;
+    /** 좌측 타이틀 텍스트 (기본 '진행률', null 지정 시 타이틀 생략) */
+    labelTitle?: ReactNode;
+    /** 레이블 위치 ('top' | 'bottom' | 'inside' | 'side') - 기본 'top' */
+    labelPosition?: StnProgressBarLabelPosition;
+    /** 레이블 정렬 방식 ('between' | 'center' | 'start' | 'end') - 기본 'between' */
+    labelAlign?: StnProgressBarLabelAlign;
+    /**
+     * ms — 설정 시 100%→0 countdown 애니메이션
+     * Toast autoClose와 맞춤 · `onComplete`에서 닫기
+     */
+    duration?: number;
+    /** countdown pause (toastify isPaused) */
+    paused?: boolean;
+    onComplete?: () => void;
+    /** Toast 하단 슬롯 (`.stn-progress-bar.toast`) */
+    toastSlot?: boolean;
+};
+/**
+ * Progress Bar — `.stn-progress-bar`
+ * Modifiers: `.sm` · `.md` · `.lg` · `.info` · `.success` · `.warn` · `.error` · `.track-muted` · `.track-dark`
+ */
+declare const StnProgressBar: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<HTMLAttributes<HTMLDivElement>, "children">> & {
+    /** 정적 진행률 0–100 (countdown이 없을 때) */
+    value?: number;
+    /** 기본 100 */
+    max?: number;
+    tone?: StnProgressBarTone;
+    gradient?: StnProgressBarGradient;
+    size?: StnProgressBarSize;
+    /** 배경 트랙 색상 지정 (default: 회색 트랙, muted: 투명 트랙, dark: 짙은 회색) */
+    track?: StnProgressBarTrack;
+    /** 진행률 텍스트 표시 여부 */
+    showLabel?: boolean;
+    /** 텍스트 라벨 (미지정 시 `${Math.round(pct)}%`) */
+    label?: ReactNode;
+    /** 좌측 타이틀 텍스트 (기본 '진행률', null 지정 시 타이틀 생략) */
+    labelTitle?: ReactNode;
+    /** 레이블 위치 ('top' | 'bottom' | 'inside' | 'side') - 기본 'top' */
+    labelPosition?: StnProgressBarLabelPosition;
+    /** 레이블 정렬 방식 ('between' | 'center' | 'start' | 'end') - 기본 'between' */
+    labelAlign?: StnProgressBarLabelAlign;
+    /**
+     * ms — 설정 시 100%→0 countdown 애니메이션
+     * Toast autoClose와 맞춤 · `onComplete`에서 닫기
+     */
+    duration?: number;
+    /** countdown pause (toastify isPaused) */
+    paused?: boolean;
+    onComplete?: () => void;
+    /** Toast 하단 슬롯 (`.stn-progress-bar.toast`) */
+    toastSlot?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type StnCircularProgressSize = 'sm' | 'md' | 'lg' | 'xl';
+type StnCircularProgressTone = 'primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'info' | 'warn' | 'error' | (string & {});
+type StnCircularProgressGradient = 'none' | 'main' | 'primary' | 'secondary' | 'critical' | 'major' | 'minor' | 'warning';
+type StnCircularProgressTrack = 'default' | 'muted';
+type StnCircularProgressLabelPosition = 'center' | 'top' | 'bottom' | 'left' | 'right';
+type StnCircularProgressProps = StnWithoutStyle<Omit<HTMLAttributes<HTMLDivElement>, 'children'>> & {
+    /** 0 - 100 */
+    value?: number;
+    max?: number;
+    size?: StnCircularProgressSize;
+    tone?: StnCircularProgressTone;
+    gradient?: StnCircularProgressGradient;
+    track?: StnCircularProgressTrack;
+    showLabel?: boolean;
+    label?: ReactNode;
+    /** 레이블 표시 위치 ('center' | 'top' | 'bottom' | 'left' | 'right') - 기본 'center' */
+    labelPosition?: StnCircularProgressLabelPosition;
+    /** 외부 레이블 배치 시 원형 안쪽 중앙에 함께 표시할 레이블 */
+    innerLabel?: ReactNode | boolean;
+};
+/**
+ * Circular Progress ? `.stn-progress-circle`
+ * Modifiers: `.sm` �� `.md` �� `.lg` �� `.xl` �� `.info` �� `.success` �� `.warn` �� `.error` �� `.gradient-main` �� `.track-muted`
+ */
+declare const StnCircularProgress: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<HTMLAttributes<HTMLDivElement>, "children">> & {
+    /** 0 - 100 */
+    value?: number;
+    max?: number;
+    size?: StnCircularProgressSize;
+    tone?: StnCircularProgressTone;
+    gradient?: StnCircularProgressGradient;
+    track?: StnCircularProgressTrack;
+    showLabel?: boolean;
+    label?: ReactNode;
+    /** 레이블 표시 위치 ('center' | 'top' | 'bottom' | 'left' | 'right') - 기본 'center' */
+    labelPosition?: StnCircularProgressLabelPosition;
+    /** 외부 레이블 배치 시 원형 안쪽 중앙에 함께 표시할 레이블 */
+    innerLabel?: ReactNode | boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type StnCheckboxSize = 'sm' | 'md' | 'lg';
+type StnCheckboxColor = 'primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'error' | 'neutral' | (string & {});
+type StnCheckboxLabelPlacement = 'end' | 'start' | 'top' | 'bottom' | 'left' | 'right';
+type StnCheckboxProps = StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'children' | 'size'>> & {
+    /** 레이블 텍스트. 생략 시 단독 컨트롤로 표시 */
+    label?: ReactNode;
+    /** 체크박스 크기 ('sm': 14px, 'md': 18px, 'lg': 22px) @default 'md' */
+    size?: StnCheckboxSize;
+    /** 시멘틱 색상 또는 커스텀 색상 ('primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'error' | 'neutral') @default 'primary' */
+    color?: StnCheckboxColor;
+    /** 레이블 배치 위치 ('end' | 'start' | 'top' | 'bottom') @default 'end' */
+    labelPlacement?: StnCheckboxLabelPlacement;
+    /** 부분 선택 (Indeterminate) 상태 표시 */
+    indeterminate?: boolean;
+    /** 부분 선택(indeterminate) 시 표시할 커스텀 아이콘 / 이미지 */
+    indeterminateIcon?: ReactNode;
+    /** 선택(checked) 시 표시할 커스텀 아이콘 / 이미지 */
+    checkedIcon?: ReactNode;
+    /** 미선택(unchecked) 시 표시할 커스텀 아이콘 / 이미지 */
+    icon?: ReactNode;
+    /** 레이블 텍스트 숨기고 18px 컨트롤만 표시 (label이 없으면 자동 적용) */
+    controlOnly?: boolean;
+    /** `.checkbox` 래퍼 */
+    className?: string;
+};
+/**
+ * Checkbox — Figma `input`(default). 모양: `stn-checkbox.css`
+ * 토글 필(ON/OFF)은 `<StnToggleButton>` · 트랙 스위치는 `<StnSwitch>`
+ */
+declare const StnCheckbox: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "className" | "size" | "type">> & {
+    /** 레이블 텍스트. 생략 시 단독 컨트롤로 표시 */
+    label?: ReactNode;
+    /** 체크박스 크기 ('sm': 14px, 'md': 18px, 'lg': 22px) @default 'md' */
+    size?: StnCheckboxSize;
+    /** 시멘틱 색상 또는 커스텀 색상 ('primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'error' | 'neutral') @default 'primary' */
+    color?: StnCheckboxColor;
+    /** 레이블 배치 위치 ('end' | 'start' | 'top' | 'bottom') @default 'end' */
+    labelPlacement?: StnCheckboxLabelPlacement;
+    /** 부분 선택 (Indeterminate) 상태 표시 */
+    indeterminate?: boolean;
+    /** 부분 선택(indeterminate) 시 표시할 커스텀 아이콘 / 이미지 */
+    indeterminateIcon?: ReactNode;
+    /** 선택(checked) 시 표시할 커스텀 아이콘 / 이미지 */
+    checkedIcon?: ReactNode;
+    /** 미선택(unchecked) 시 표시할 커스텀 아이콘 / 이미지 */
+    icon?: ReactNode;
+    /** 레이블 텍스트 숨기고 18px 컨트롤만 표시 (label이 없으면 자동 적용) */
+    controlOnly?: boolean;
+    /** `.checkbox` 래퍼 */
+    className?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+/** footerRight 액션 슬롯 권장 상한 (문서·Figma 101782) */
+declare const STN_TABLE_FOOTER_MAX_ACTIONS = 4;
+type StnTableProps = {
+    /** Scroll area content — usually `<StnTable.Grid>` / `table.stn-table__grid` */
+    children: ReactNode;
+    /** `.stn-table__summary` */
+    summary?: ReactNode;
+    /** `.stn-table__footer-center` — e.g. `<StnPagination />` */
+    footerCenter?: ReactNode;
+    /** `.stn-table__page-size` — 행 수 드롭다운 (footer leading · summary 옆, `<StnDropdown size="sm" direction="up" />` 권장) */
+    pageSize?: ReactNode;
+    /**
+     * `.stn-table__footer-right` — 등록/수정/삭제 등 버튼 슬롯.
+     * 최대 {@link STN_TABLE_FOOTER_MAX_ACTIONS}개 (초과 시 console.warn + slice).
+     */
+    footerRight?: ReactNode;
+    /** list view — `content_box` 높이에 맞춰 스크롤 영역 세로 채움 (`.stn-table--fill`) */
+    fill?: boolean;
+    /** `.stn-table__scroll`에 인라인 스타일 지정 */
+    scrollStyle?: React.CSSProperties;
+    /** 테이블 내의 rowId가 지정된 행 클릭 시 자동으로 visited 상태 관리 */
+    trackVisited?: boolean;
+    /** 모든 Th에 리사이징 핸들러 기본 표시 여부 */
+    resizable?: boolean;
+    /** 모든 Th를 기본적으로 드래그 가능하게 설정 */
+    draggable?: boolean;
+    /** 컬럼 리사이징 종료 시 호출되는 콜백 (StnTable.Th에 name 속성 필수) */
+    onColumnResize?: (name: string, newWidth: number) => void;
+    /** 컬럼 드래그 앤 드롭으로 순서 변경 시 호출되는 콜백 (StnTable.Th에 name 속성 필수) */
+    onColumnReorder?: (sourceName: string, targetName: string, position: 'left' | 'right') => void;
+    className?: string;
+};
+declare function StnTableBase({ children, summary, footerCenter, pageSize, footerRight, fill, scrollStyle, trackVisited, resizable, draggable, onColumnResize, onColumnReorder, className, }: StnTableProps): react_jsx_runtime.JSX.Element;
+type StnTableGridProps = HTMLAttributes<HTMLTableElement>;
+declare const StnTableGrid: react.ForwardRefExoticComponent<StnTableGridProps & react.RefAttributes<HTMLTableElement>>;
+type StnTableHeadProps = HTMLAttributes<HTMLTableSectionElement>;
+declare const StnTableHead: react.ForwardRefExoticComponent<StnTableHeadProps & react.RefAttributes<HTMLTableSectionElement>>;
+type StnTableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+declare const StnTableBody: react.ForwardRefExoticComponent<StnTableBodyProps & react.RefAttributes<HTMLTableSectionElement>>;
+type StnTableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    /** hover background for body rows */
+    hoverable?: boolean;
+    /** 행 선택(Active/Selected) 하이라이트 배경 (푸른 계열) */
+    selected?: boolean;
+    /** 직전에 클릭했던 행 (보라 계열) */
+    visited?: boolean;
+    /** 행 강조 (초록 계열) */
+    highlighted?: boolean;
+    /** 클릭 가능한 행 포인터 커서 (cursor: pointer) */
+    clickable?: boolean;
+    /** 프레스 면 — 마우스 다운 고정(문서) 또는 `.is-pressed` */
+    pressed?: boolean;
+    /** StnTable에 trackVisited 설정 시 내부적으로 visited 상태를 추적하기 위한 고유 식별자 */
+    rowId?: string;
+};
+declare const StnTableRow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
+    /** hover background for body rows */
+    hoverable?: boolean;
+    /** 행 선택(Active/Selected) 하이라이트 배경 (푸른 계열) */
+    selected?: boolean;
+    /** 직전에 클릭했던 행 (보라 계열) */
+    visited?: boolean;
+    /** 행 강조 (초록 계열) */
+    highlighted?: boolean;
+    /** 클릭 가능한 행 포인터 커서 (cursor: pointer) */
+    clickable?: boolean;
+    /** 프레스 면 — 마우스 다운 고정(문서) 또는 `.is-pressed` */
+    pressed?: boolean;
+    /** StnTable에 trackVisited 설정 시 내부적으로 visited 상태를 추적하기 위한 고유 식별자 */
+    rowId?: string;
+} & react.RefAttributes<HTMLTableRowElement>>;
+/** Infomap 기본은 center. 텍스트 열은 left, 수치 열은 right. */
+type StnTableAlign = 'left' | 'center' | 'right';
+type StnTableThProps = Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> & {
+    /** checkbox column — 60px */
+    check?: boolean;
+    /** 셀 텍스트 정렬 — `left` | `center`(기본) | `right` */
+    align?: StnTableAlign;
+    /** 프레스 면 — 마우스 다운 고정(문서) 또는 `.is-pressed` */
+    pressed?: boolean;
+    /**
+     * 열 너비. 사이즈 토큰 스텝만 클래스로 붙는다.
+     * `width={120}` → `.stn-table__col--120` → `var(--stn-size-120)`.
+     * 60 · 70 · 72 · 80 · 100 · 110 · 120 · 140 · 160 · 180 · 200.
+     * 빼 둔 열이 표의 남은 폭을 흡수한다. Body `Td`에는 두지 않는다.
+     */
+    width?: number;
+    /** 열 너비 조절 기능을 사용할지 여부 */
+    resizable?: boolean;
+    /** 컬럼 식별자 (리사이징 및 드래그 앤 드롭 시 onColumnResize, onColumnReorder 콜백으로 전달됨) */
+    name?: string;
+    /** 다중 헤더 그룹인 경우, 하위에 속한 컬럼들의 식별자 배열 (배열을 넘기면 리사이징 시 하위 열들이 골고루 조절됨) */
+    groupCols?: string[];
+};
+declare const StnTableTh: react.ForwardRefExoticComponent<Omit<ThHTMLAttributes<HTMLTableCellElement>, "align"> & {
+    /** checkbox column — 60px */
+    check?: boolean;
+    /** 셀 텍스트 정렬 — `left` | `center`(기본) | `right` */
+    align?: StnTableAlign;
+    /** 프레스 면 — 마우스 다운 고정(문서) 또는 `.is-pressed` */
+    pressed?: boolean;
+    /**
+     * 열 너비. 사이즈 토큰 스텝만 클래스로 붙는다.
+     * `width={120}` → `.stn-table__col--120` → `var(--stn-size-120)`.
+     * 60 · 70 · 72 · 80 · 100 · 110 · 120 · 140 · 160 · 180 · 200.
+     * 빼 둔 열이 표의 남은 폭을 흡수한다. Body `Td`에는 두지 않는다.
+     */
+    width?: number;
+    /** 열 너비 조절 기능을 사용할지 여부 */
+    resizable?: boolean;
+    /** 컬럼 식별자 (리사이징 및 드래그 앤 드롭 시 onColumnResize, onColumnReorder 콜백으로 전달됨) */
+    name?: string;
+    /** 다중 헤더 그룹인 경우, 하위에 속한 컬럼들의 식별자 배열 (배열을 넘기면 리사이징 시 하위 열들이 골고루 조절됨) */
+    groupCols?: string[];
+} & react.RefAttributes<HTMLTableCellElement>>;
+type StnTableTdProps = Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> & {
+    check?: boolean;
+    /** 셀 텍스트 정렬 — `left` | `center`(기본) | `right` */
+    align?: StnTableAlign;
+};
+declare const StnTableTd: react.ForwardRefExoticComponent<Omit<TdHTMLAttributes<HTMLTableCellElement>, "align"> & {
+    check?: boolean;
+    /** 셀 텍스트 정렬 — `left` | `center`(기본) | `right` */
+    align?: StnTableAlign;
+} & react.RefAttributes<HTMLTableCellElement>>;
+type StnTableThCheckProps = Omit<StnCheckboxProps, 'controlOnly' | 'variant'> & Pick<ThHTMLAttributes<HTMLTableCellElement>, 'scope' | 'className'>;
+/** Infomap th 체크박스 전용 — Figma node 40000042:209512 (열 60 · 18×18 · 전체 선택) */
+declare const StnTableThCheck: react.ForwardRefExoticComponent<Omit<StnCheckboxProps, "variant" | "controlOnly"> & Pick<ThHTMLAttributes<HTMLTableCellElement>, "className" | "scope"> & react.RefAttributes<HTMLInputElement>>;
+type StnTableTdCheckProps = Omit<StnCheckboxProps, 'controlOnly' | 'variant'> & Pick<TdHTMLAttributes<HTMLTableCellElement>, 'className'>;
+/** tbody 체크박스 셀 — `StnTable.ThCheck`와 동일 60px 열 */
+declare const StnTableTdCheck: react.ForwardRefExoticComponent<Omit<StnCheckboxProps, "variant" | "controlOnly"> & Pick<TdHTMLAttributes<HTMLTableCellElement>, "className"> & react.RefAttributes<HTMLInputElement>>;
+type StnTableSortProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: ReactNode;
+    /** none | ascending | descending */
+    sort?: 'none' | 'ascending' | 'descending';
+    /** 프레스 면 고정 — `.is-pressed` (문서·마우스 다운과 동일) */
+    pressed?: boolean;
+};
+/** Infomap sortable header — 텍스트+아이콘 inner + 클릭·`aria-sort` (Figma 40000042:209530) */
+declare const StnTableSort: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: ReactNode;
+    /** none | ascending | descending */
+    sort?: "none" | "ascending" | "descending";
+    /** 프레스 면 고정 — `.is-pressed` (문서·마우스 다운과 동일) */
+    pressed?: boolean;
+} & react.RefAttributes<HTMLButtonElement>>;
+type StnTableCompound = typeof StnTableBase & {
+    Grid: typeof StnTableGrid;
+    Head: typeof StnTableHead;
+    Body: typeof StnTableBody;
+    Row: typeof StnTableRow;
+    Th: typeof StnTableTh;
+    Td: typeof StnTableTd;
+    ThCheck: typeof StnTableThCheck;
+    TdCheck: typeof StnTableTdCheck;
+    Sort: typeof StnTableSort;
+};
+/**
+ * Pub list table shell — Infomap Figma thead/tbody (node 40000042:209510).
+ * Markup: `.stn-table` > `.stn-table__scroll` + optional footer.
+ */
+declare const StnTable: StnTableCompound;
+
+type StnTreeNodeKind = 'root' | 'folder' | 'server';
+/** Tree 데이터 노드 — `StnTree`의 `nodes` 항목 (`StnTreeNode` 컴포넌트와 별개) */
+type StnTreeItem = {
+    id: string;
+    label: string;
+    /** default `folder` · leaf는 `server` · 최상위 루트는 `root` */
+    kind?: StnTreeNodeKind;
+    children?: StnTreeItem[];
+};
+type StnTreeGuideCell = {
+    type: 'blank';
+} | {
+    type: 'vertical';
+} | {
+    type: 'connector';
+    variant: 'mid' | 'end';
+} | {
+    type: 'toggle';
+    expanded: boolean;
+};
+type StnTreeFlatRow = {
+    id: string;
+    label: string;
+    kind: StnTreeNodeKind;
+    depth: number;
+    cells: StnTreeGuideCell[];
+    hasChildren: boolean;
+    expanded: boolean;
+    isLast: boolean;
+};
+/** 단일 Tree Node용 가이드/토글 셀 — depth · kind 기준으로 생성 */
+declare function buildStnTreeNodeCells(options: {
+    depth: number;
+    kind: StnTreeNodeKind;
+    hasChildren?: boolean;
+    expanded?: boolean;
+    isLast?: boolean;
+    /** length = max(0, depth - 1) · true면 해당 조상 이후 vertical 숨김 */
+    ancestorIsLast?: boolean[];
+}): StnTreeGuideCell[];
+declare function flattenStnTree(nodes: StnTreeItem[], expandedIds: Iterable<string>): StnTreeFlatRow[];
+declare function collectExpandableIds(nodes: StnTreeItem[]): string[];
+
+type StnTreeNodeDocState = 'default' | 'hover' | 'pressed' | 'selected';
+type StnTreeNodeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect' | 'onToggle'> & {
+    label: string;
+    /** default `folder` */
+    kind?: StnTreeNodeKind;
+    /** 0–3 · `data-depth` · 가이드 들여쓰기 */
+    depth?: number;
+    expanded?: boolean;
+    selected?: boolean;
+    /** folder/root에 자식이 있으면 chevron · server는 connector */
+    hasChildren?: boolean;
+    /** server connector end vs mid */
+    isLast?: boolean;
+    /** depth>1 가이드 · length = depth-1 */
+    ancestorIsLast?: boolean[];
+    /** 셀을 직접 넘기면 depth/kind 기반 생성을 건너뜁니다 */
+    cells?: StnTreeGuideCell[];
+    /**
+     * Docs Playground — hover/pressed/selected 비주얼 고정.
+     * 제품 코드에서는 쓰지 마세요.
+     */
+    docState?: StnTreeNodeDocState;
+    onSelect?: () => void;
+    onToggle?: () => void;
+};
+/** Infomap FOLDER STRUCTURE 행 — Figma 40000042:210359 */
+declare const StnTreeNode: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect" | "onToggle"> & {
+    label: string;
+    /** default `folder` */
+    kind?: StnTreeNodeKind;
+    /** 0–3 · `data-depth` · 가이드 들여쓰기 */
+    depth?: number;
+    expanded?: boolean;
+    selected?: boolean;
+    /** folder/root에 자식이 있으면 chevron · server는 connector */
+    hasChildren?: boolean;
+    /** server connector end vs mid */
+    isLast?: boolean;
+    /** depth>1 가이드 · length = depth-1 */
+    ancestorIsLast?: boolean[];
+    /** 셀을 직접 넘기면 depth/kind 기반 생성을 건너뜁니다 */
+    cells?: StnTreeGuideCell[];
+    /**
+     * Docs Playground — hover/pressed/selected 비주얼 고정.
+     * 제품 코드에서는 쓰지 마세요.
+     */
+    docState?: StnTreeNodeDocState;
+    onSelect?: () => void;
+    onToggle?: () => void;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type StnTreeDocRowState = StnTreeNodeDocState;
+type StnTreeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect'> & {
+    nodes: StnTreeItem[];
+    /** 섹션 제목 — Figma `FOLDER STRUCTURE` */
+    heading?: string;
+    defaultExpandedIds?: string[];
+    expandedIds?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    selectedId?: string | null;
+    defaultSelectedId?: string | null;
+    onSelect?: (id: string) => void;
+    /**
+     * Docs Playground — 특정 행에 hover/pressed/selected 비주얼을 고정합니다.
+     * 제품 코드에서는 쓰지 마세요.
+     */
+    docRowState?: {
+        id: string;
+        state: StnTreeDocRowState;
+    };
+};
+/** Infomap folder structure tree — `StnTreeNode` 조립 · Figma 40000042:210359 */
+declare const StnTree: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect"> & {
+    nodes: StnTreeItem[];
+    /** 섹션 제목 — Figma `FOLDER STRUCTURE` */
+    heading?: string;
+    defaultExpandedIds?: string[];
+    expandedIds?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    selectedId?: string | null;
+    defaultSelectedId?: string | null;
+    onSelect?: (id: string) => void;
+    /**
+     * Docs Playground — 특정 행에 hover/pressed/selected 비주얼을 고정합니다.
+     * 제품 코드에서는 쓰지 마세요.
+     */
+    docRowState?: {
+        id: string;
+        state: StnTreeDocRowState;
+    };
+} & react.RefAttributes<HTMLDivElement>>;
+
+type StnScrollOrientation = 'vertical' | 'horizontal' | 'both';
+type StnScrollSize = 'thin' | 'default' | 'thick';
+type StnScrollColor = 'default' | 'primary' | 'teal' | 'muted' | 'fade';
+type StnScrollProps = HTMLAttributes<HTMLDivElement> & {
+    /** 스크롤 방향 @default 'vertical' */
+    orientation?: StnScrollOrientation;
+    /** 스크롤바 두께 preset @default 'default' (8px) */
+    size?: StnScrollSize;
+    /** 스크롤바 색상 preset */
+    color?: StnScrollColor;
+    /** 커스텀 thumb 색상 (CSS color value) */
+    thumbColor?: string;
+    /** 커스텀 track 배경색 */
+    trackColor?: string;
+    /** 커스텀 스크롤바 너비/높이 (px 숫자 또는 CSS string) */
+    scrollWidth?: number | string;
+    /** max-height shorthand (number → px) */
+    maxHeight?: number | string;
+    /** max-width shorthand (number → px) — 가로 스크롤 용 */
+    maxWidth?: number | string;
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * STN 커스텀 스크롤바 컨테이너
+ * - 색상, 두께, 방향을 토큰으로 제어
+ * - 화살표 버튼은 그리지 않는다
+ */
+declare const StnScroll: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** 스크롤 방향 @default 'vertical' */
+    orientation?: StnScrollOrientation;
+    /** 스크롤바 두께 preset @default 'default' (8px) */
+    size?: StnScrollSize;
+    /** 스크롤바 색상 preset */
+    color?: StnScrollColor;
+    /** 커스텀 thumb 색상 (CSS color value) */
+    thumbColor?: string;
+    /** 커스텀 track 배경색 */
+    trackColor?: string;
+    /** 커스텀 스크롤바 너비/높이 (px 숫자 또는 CSS string) */
+    scrollWidth?: number | string;
+    /** max-height shorthand (number → px) */
+    maxHeight?: number | string;
+    /** max-width shorthand (number → px) — 가로 스크롤 용 */
+    maxWidth?: number | string;
+    children?: ReactNode;
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type StnSectionSideProps = Omit<HTMLAttributes<HTMLElement>, 'className' | 'children'> & {
+    children?: ReactNode;
+    className?: string;
+    /** true면 LNB 열 높이에 맞춰 패널을 세로로 채움 (list view + search) */
+    fill?: boolean;
+    /** StnScroll props (orientation 고정 vertical) */
+    scrollProps?: Omit<StnScrollProps, 'orientation' | 'children'>;
+};
+/**
+ * Infomap section-side — Figma 40000040:102539
+ * 사이드 패널 셸 + Pub 스크롤. 본문은 보통 `StnTree`.
+ */
+declare const StnSectionSide: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "className"> & {
+    children?: ReactNode;
+    className?: string;
+    /** true면 LNB 열 높이에 맞춰 패널을 세로로 채움 (list view + search) */
+    fill?: boolean;
+    /** StnScroll props (orientation 고정 vertical) */
+    scrollProps?: Omit<StnScrollProps, "orientation" | "children">;
+} & react.RefAttributes<HTMLElement>>;
+type StnSectionSidePresetProps = Omit<StnSectionSideProps, 'children'> & {
+    tree: StnTreeProps;
+};
+/** Figma 예제 — FOLDER STRUCTURE + scroll */
+declare function StnSectionSidePreset({ tree, ...sideProps }: StnSectionSidePresetProps): react_jsx_runtime.JSX.Element;
+
+type StnLoginCardBrandPosition = 'left' | 'right';
+type StnLoginCardVariant = 'default' | 'glow';
+type StnLoginCardProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** 좌측(또는 우측) 브랜드 영역 커스텀 콘텐츠 (로고 이미지, 서비스명, 설명 등) */
+    brand?: ReactNode;
+    /** 우측(또는 좌측) 폼 영역 커스텀 콘텐츠 (탭, 입력 필드, 로그인 버튼, 도움말 링크 등) */
+    children?: ReactNode;
+    /**
+     * 브랜드 영역 위치
+     * - 'left': [Brand - Form] (기본값)
+     * - 'right': [Form - Brand] (반전 레이아웃)
+     * @default 'left'
+     */
+    brandPosition?: StnLoginCardBrandPosition;
+    /**
+     * 레이아웃 순서 반전 여부 (true면 [Form - Brand])
+     * brandPosition="right"와 동일하게 동작합니다.
+     */
+    reverse?: boolean;
+    /**
+     * 카드 테두리 회전 레이저 빔 애니메이션 여부 (mockup/login.html 발)
+     * @default false
+     */
+    glow?: boolean;
+    /**
+     * 카드 스타일 변형
+     * - 'default': 기본 정적 테두리
+     * - 'glow': 회전 레이저 빔 애니메이션 테두리
+     * @default 'default'
+     */
+    variant?: StnLoginCardVariant;
+    /** 추가 커스텀 클래스 */
+    className?: string;
+    /** glow 래퍼에 적용할 추가 커스텀 클래스 */
+    wrapperClassName?: string;
+};
+type StnLoginCardGlowWrapperProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * 로그인 카드 테두리 회전 레이저 빔 애니메이션 래퍼 (Card Glow Wrapper)
+ * 독립적으로 사용하거나 StnLoginCard의 `glow` 또는 `variant="glow"`로 자동 적용됩니다.
+ */
+declare const StnLoginCardGlowWrapper: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Infomap / STN Login Card Pattern — Figma 40004209:78293
+ *
+ * 100% STN 공식 디자인 토큰 기반의 2열 로그인 카드 컨테이너입니다.
+ * 브랜드 슬롯(brand)과 폼 슬롯(children)을 자유롭게 조립할 수 있으며,
+ * brandPosition 또는 reverse prop으로 좌우/상하 배치를 자유롭게 바꿀 수 있습니다.
+ * `glow` 또는 `variant="glow"` 옵션으로 테두리 회전 레이저 빔 효과를 활성화할 수 있습니다.
+ * 폼 스택(max 320)은 유지하고, 카드가 좁아지면 브랜드·폼 패딩과 로고(xl→sm)를 같이 줄입니다.
+ * 900px 이하 뷰포트에서는 세로 1열 스택으로 자동 반응합니다.
+ */
+declare const StnLoginCard: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** 좌측(또는 우측) 브랜드 영역 커스텀 콘텐츠 (로고 이미지, 서비스명, 설명 등) */
+    brand?: ReactNode;
+    /** 우측(또는 좌측) 폼 영역 커스텀 콘텐츠 (탭, 입력 필드, 로그인 버튼, 도움말 링크 등) */
+    children?: ReactNode;
+    /**
+     * 브랜드 영역 위치
+     * - 'left': [Brand - Form] (기본값)
+     * - 'right': [Form - Brand] (반전 레이아웃)
+     * @default 'left'
+     */
+    brandPosition?: StnLoginCardBrandPosition;
+    /**
+     * 레이아웃 순서 반전 여부 (true면 [Form - Brand])
+     * brandPosition="right"와 동일하게 동작합니다.
+     */
+    reverse?: boolean;
+    /**
+     * 카드 테두리 회전 레이저 빔 애니메이션 여부 (mockup/login.html 발)
+     * @default false
+     */
+    glow?: boolean;
+    /**
+     * 카드 스타일 변형
+     * - 'default': 기본 정적 테두리
+     * - 'glow': 회전 레이저 빔 애니메이션 테두리
+     * @default 'default'
+     */
+    variant?: StnLoginCardVariant;
+    /** 추가 커스텀 클래스 */
+    className?: string;
+    /** glow 래퍼에 적용할 추가 커스텀 클래스 */
+    wrapperClassName?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+type StnLoginBrandStackProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * 로그인 브랜드 세로 스택 — 로고 · 제목 · 캡션을 브랜드 간격(16px)으로 나열합니다.
+ */
+declare const StnLoginBrandStack: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+type StnLoginFormStackProps = FormHTMLAttributes<HTMLFormElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * 로그인 폼 전체 스택 컨테이너
+ * 탭, 필드 그룹, 로그인 버튼, 하단 링크 등을 정해진 토큰 간격(24px)으로 세로 나열합니다.
+ */
+declare const StnLoginFormStack: react.ForwardRefExoticComponent<FormHTMLAttributes<HTMLFormElement> & {
+    children?: ReactNode;
+    className?: string;
+} & react.RefAttributes<HTMLFormElement>>;
+type StnLoginFormFieldsProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * 로그인 입력 필드 묶음 컨테이너
+ * 아이디, 비밀번호 등의 입력 필드를 16px 간격으로 세로 나열합니다.
+ */
+declare const StnLoginFormFields: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+type StnLoginFormLinksProps = HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * 로그인 하단 링크 바 컨테이너
+ * 회원가입, 아이디/비밀번호 찾기 등의 텍스트 링크를 가로 중앙 정렬합니다.
+ */
+declare const StnLoginFormLinks: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    className?: string;
+} & react.RefAttributes<HTMLElement>>;
+type StnLoginPlaceholderProps = HTMLAttributes<HTMLParagraphElement> & {
+    children?: ReactNode;
+};
+/**
+ * 로그인 폼 내 준비 중 안내 영역 (예: 소셜 로그인 준비 중)
+ * 128px 최소 높이와 중앙 정렬, 토큰 폰트/색상(`--stn-login-link-fg`)이 적용됩니다.
+ */
+declare const StnLoginPlaceholder: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & {
+    children?: ReactNode;
+} & react.RefAttributes<HTMLParagraphElement>>;
+
+type StnLoginTextFieldProps = StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>> & {
+    /** 왼쪽 입체 아이콘 — Iconography slug (`line/user`) 또는 ReactNode */
+    icon?: ReactNode;
+    /** 아이콘 시맨틱 색상 ('primary' | 'success' | 'warning' | 'error' | 'info') */
+    iconColor?: StnIconBoxColor;
+    invalid?: boolean;
+    className?: string;
+};
+/**
+ * Login mockup `.input-group` — XL 56px, full width, left icon box.
+ * 일반 검색·필터는 `StnTextField`를 사용합니다.
+ */
+declare const StnLoginTextField: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, "size">> & {
+    /** 왼쪽 입체 아이콘 — Iconography slug (`line/user`) 또는 ReactNode */
+    icon?: ReactNode;
+    /** 아이콘 시맨틱 색상 ('primary' | 'success' | 'warning' | 'error' | 'info') */
+    iconColor?: StnIconBoxColor;
+    invalid?: boolean;
+    className?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+/** horizontal = 가로 wordmark · vertical = 세로 mark · watermark = 워터마크 · onlyimg/symbol = 아이콘 단독 심볼 */
+type StnLogoVariant = 'horizontal' | 'vertical' | 'watermark' | 'onlyimg' | 'symbol';
+/** CSS tokens: xs sm md lg xl */
+type StnLogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type StnLogoTheme = 'dark' | 'light';
+type StnLogoProps = StnWithoutStyle<Omit<HTMLAttributes<HTMLSpanElement>, 'children'>> & {
+    /**
+     * horizontal: 가로 워드마크 (full PNG)
+     * vertical: 세로 심볼 (single PNG)
+     * watermark: 워터마크 SVG
+     * onlyimg / symbol: 단독 로고 심볼 (logo-onlyimg.png)
+     * @default 'horizontal'
+     */
+    variant?: StnLogoVariant;
+    /**
+     * xs sm md lg xl — 픽셀 width 금지. 기본 md.
+     * @default 'md'
+     */
+    size?: StnLogoSize;
+    /**
+     * dark: 흰색 로고 (어두운 배경용, 기본값)
+     * light: 검은색 로고 (밝은 배경용)
+     * @default 'dark'
+     */
+    theme?: StnLogoTheme;
+    alt?: string;
+};
+declare const StnLogo: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<HTMLAttributes<HTMLSpanElement>, "children">> & {
+    /**
+     * horizontal: 가로 워드마크 (full PNG)
+     * vertical: 세로 심볼 (single PNG)
+     * watermark: 워터마크 SVG
+     * onlyimg / symbol: 단독 로고 심볼 (logo-onlyimg.png)
+     * @default 'horizontal'
+     */
+    variant?: StnLogoVariant;
+    /**
+     * xs sm md lg xl — 픽셀 width 금지. 기본 md.
+     * @default 'md'
+     */
+    size?: StnLogoSize;
+    /**
+     * dark: 흰색 로고 (어두운 배경용, 기본값)
+     * light: 검은색 로고 (밝은 배경용)
+     * @default 'dark'
+     */
+    theme?: StnLogoTheme;
+    alt?: string;
+} & react.RefAttributes<HTMLSpanElement>>;
+
+type StnBadgeVariant = 'standard' | 'dot';
+type StnBadgeAppearance = 'subtle' | 'solid';
+type StnBadgeColor = 'primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'error' | 'neutral' | 'default' | (string & {});
+interface StnBadgeAnchorOrigin {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'right';
+}
+interface StnBadgeProps extends react__default.HTMLAttributes<HTMLSpanElement> {
+    /** 뱃지 내부에 표시할 숫자 또는 내용 (0일 경우 showZero가 false이면 숨김) */
+    badgeContent?: react__default.ReactNode;
+    /** 뱃지 형태: 'standard' (숫자/문자 pill) | 'dot' (작은 원형 점) */
+    variant?: StnBadgeVariant;
+    /** 외형 모드: 'subtle' (mockup .sb-badge 규격, 반투명 배경 + 컬러 텍스트, 기본값) | 'solid' (완전 채움 캡슐형) */
+    appearance?: StnBadgeAppearance;
+    /** 색상 테마: primary, secondary, success, critical/error, major, minor, warning, neutral */
+    color?: StnBadgeColor;
+    /** 최대 표시 수치 (기본값: 99, 99 초과 시 99+ 로 표시) */
+    max?: number;
+    /** badgeContent가 0일 때도 뱃지를 노출할지 여부 (기본값: false) */
+    showZero?: boolean;
+    /** 뱃지를 숨길지 여부 */
+    invisible?: boolean;
+    /** 자식 요소를 기준으로 뱃지가 배치될 위치 (기본값: top-right) */
+    anchorOrigin?: StnBadgeAnchorOrigin;
+    /** 뱃지 버블 요소에 직접 지정할 배경색 (디자인 토큰 또는 컬러값) */
+    backgroundColor?: string;
+    /** 뱃지 버블 요소에 직접 지정할 텍스트 색상 (디자인 토큰 또는 컬러값) */
+    textColor?: string;
+    /** 뱃지 버블 요소에 직접 전달할 인라인 스타일 */
+    badgeStyle?: react__default.CSSProperties;
+    /** 뱃지 자체의 추가 className */
+    badgeClassName?: string;
+    /** 추가 클래스 */
+    className?: string;
+    /** 뱃지가 부착될 대상 엘리먼트 (생략 시 독립 인라인 뱃지로 렌더링) */
+    children?: react__default.ReactNode;
+}
+/**
+ * StnBadge
+ * 알림 개수(Notification count)나 활성 상태를 나타내는 오버레이 뱃지 컴포넌트입니다.
+ * 자식 엘리먼트를 감싸 우측 상단/좌측 하단 등에 카운트나 점을 띄우거나, 단독 인라인 뱃지로 사용됩니다.
+ */
+declare const StnBadge: react__default.ForwardRefExoticComponent<StnBadgeProps & react__default.RefAttributes<HTMLSpanElement>>;
+
+type StnChipVariant = 'filled' | 'outline' | 'outlined' | 'border';
+type StnChipSize = 'sm' | 'md' | 'lg';
+type StnChipShape = 'square' | 'pill' | 'round' | 'rounded';
+type StnChipIconPosition = 'left' | 'right';
+type StnChipLabelPosition = 'top' | 'bottom' | 'left' | 'right';
+type StnChipColor = 'cr' | 'mj' | 'mn' | 'wr' | 'CR' | 'MJ' | 'MN' | 'WR' | 'primary' | 'teal' | 'success' | 'error' | 'red' | 'warn' | 'warning' | 'purple' | 'secondary' | 'neutral' | 'gray' | 'critical' | 'major' | 'minor';
+type StnChipProps = StnWithoutStyle<Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'color'>> & {
+    children?: ReactNode;
+    /** 칩 본문 텍스트 (children이 없을 때 사용하거나, children과 함께 전달 시 외곽 라벨로 기능) */
+    label?: ReactNode;
+    variant?: StnChipVariant;
+    size?: StnChipSize;
+    shape?: StnChipShape;
+    radius?: StnChipShape;
+    color?: StnChipColor;
+    icon?: ReactNode;
+    /** 아이콘 위치 ('left': 기본, 'right') */
+    iconPosition?: StnChipIconPosition;
+    /** 외곽 보조 라벨 */
+    sideLabel?: ReactNode;
+    /** 외곽 보조 라벨 배치 위치 ('top' | 'bottom' | 'left' | 'right', 기본 'right') */
+    labelPosition?: StnChipLabelPosition;
+    /** `labelPosition` 별칭 */
+    sideLabelPosition?: StnChipLabelPosition;
+    /** 클릭 가능한 인터랙티브 칩 여부 (토글과 달리 On/Off 상태를 갖지 않는 액션 클릭용) */
+    clickable?: boolean;
+    /** 삭제 이벤트 콜백 (제공 시 삭제 버튼 렌더링) */
+    onDelete?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** 삭제 버튼 아이콘 (기본: SVG 닫기 아이콘) */
+    deleteIcon?: ReactNode;
+    /** 삭제 버튼 위치 ('left' | 'right', 기본 'right') */
+    deleteIconPosition?: StnChipIconPosition;
+    /** 삭제 버튼 접근성 라벨 @default '삭제' */
+    deleteAriaLabel?: string;
+    className?: string;
+    /** Grade for status */
+    grade?: StnChipGrade;
+    /** Border accent */
+    accent?: StnChipBorderAccent;
+};
+declare function StnChip(props: StnChipProps): react_jsx_runtime.JSX.Element;
+
+type StnSeverityLevel = 'critical' | 'major' | 'minor' | 'warning';
+type StnSeverityVariant = 'badge' | 'filter' | 'glow' | 'solid';
+type StnSeveritySize = 'sm' | 'md' | 'lg';
+interface StnSeverityBadgeProps extends react__default.ButtonHTMLAttributes<HTMLButtonElement | HTMLSpanElement> {
+    /** 심각도: critical, major, minor, warning */
+    severity: StnSeverityLevel;
+    /** 표시 모드: badge (기본 깔끔한 솔리드), glow (네온 블러/글로우 발광), filter (필터 토글 버튼) */
+    variant?: StnSeverityVariant;
+    /** 뱃지 크기: 'sm' (18px), 'md' (20px - 기본값), 'lg' (24px) */
+    size?: StnSeveritySize;
+    /** 라운드(알약/원형) 모서리 적용 여부 (기본값: false, 4px) */
+    round?: boolean;
+    /** 아이콘 표시 여부 (기본값: true) */
+    showIcon?: boolean;
+    /** 아이콘 전용 모드 (텍스트 없이 정사각/원형 심각도 아이콘만 표시) */
+    iconOnly?: boolean;
+    /** 블러 / 네온 글로우 발광 효과 적용 여부 (variant="glow"와 동일, 기본값: false) */
+    glow?: boolean;
+    /** glow의 별칭 prop (blur 발광 효과 제어) */
+    blur?: boolean;
+    /** 텍스트 라벨 (미지정 시 기본 라벨 표시) */
+    label?: react__default.ReactNode;
+    /** 필터 모드일 때 활성화(선택) 상태 */
+    active?: boolean;
+    /** 클릭 이벤트 핸들러 */
+    onClick?: react__default.MouseEventHandler<HTMLElement>;
+    /** 추가 클래스 */
+    className?: string;
+    children?: react__default.ReactNode;
+}
+/**
+ * StnSeverityBadge
+ * 알람 심각도(Critical, Major, Minor, Warning)를 명확하게 표시하거나
+ * 대시보드에서 다중 필터 토글 용도로 사용하는 독립 컴포넌트입니다.
+ */
+declare const StnSeverityBadge: react__default.ForwardRefExoticComponent<StnSeverityBadgeProps & react__default.RefAttributes<HTMLElement>>;
+interface StnSeverityFilterProps {
+    /** 현재 선택된 심각도 레벨 배열 */
+    value?: StnSeverityLevel[];
+    /** 선택 변경 콜백 */
+    onChange?: (nextValue: StnSeverityLevel[]) => void;
+    /** 비활성화할 심각도 목록 */
+    disabledSeverities?: StnSeverityLevel[];
+    /** 아이콘 표시 여부 (기본: true) */
+    showIcon?: boolean;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * StnSeverityFilter
+ * 대시보드 및 실시간 장애 목록 상단에서 사용되는 4단계 심각도 필터 그룹 컴포넌트입니다.
+ */
+declare const StnSeverityFilter: react__default.FC<StnSeverityFilterProps>;
+
+type StnSystemChipTone = 'cr' | 'mj' | 'mn' | 'wr' | 'CR' | 'MJ' | 'MN' | 'WR' | 'info' | 'success' | 'purple' | 'neutral' | 'critical' | 'major' | 'minor' | 'warning' | 'teal' | 'error' | 'warn' | string;
+type StnSystemChipItem = {
+    id: string;
+    /** 점(dot) 색상 톤: 2글자 표준(cr, mj, mn, wr) 또는 info, success, purple 등 */
+    tone?: StnSystemChipTone;
+    /** 점(dot) 커스텀 색상 값 (CSS 컬러 또는 var(--...)) */
+    dotColor?: string;
+    /** 수치 카운트 또는 텍스트 */
+    count?: number | string;
+    value?: number | string;
+    /** 텍스트 라벨 (선택) */
+    label?: string;
+};
+type StnSystemChipProps = HTMLAttributes<HTMLDivElement> & {
+    /** 1개, 2개, 3개, 4개 등 원하는 숫자만큼의 아이템 배열 */
+    items: StnSystemChipItem[];
+    /** 텍스트 라벨 표시 여부 */
+    showLabel?: boolean;
+    /**
+     * 핵심 1개만 노출 · 호버/포커스 시 전체 펼침.
+     * - 생략(`auto`): `stn-header` ≤1200px 에서 CSS 자동 적용
+     * - `true`: 항상 compact
+     * - `false`: 항상 전체 노출
+     */
+    compact?: boolean;
+    className?: string;
+};
+/**
+ * System Chip (헤더 시스템 상태 요약 바)
+ * [ 🔴 0 | 🟠 12 | 🟡 2 | 🔵 3 ] 형태.
+ * compact 모드에서는 핵심 1개만 보이고 호버 시 전체가 펼쳐집니다.
+ */
+declare function StnSystemChip({ items, showLabel, compact, className, ...rest }: StnSystemChipProps): react_jsx_runtime.JSX.Element;
+
+type StnToggleButtonSize = 'sm' | 'md' | 'lg';
+type StnToggleButtonColor = 'primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'neutral' | (string & {});
+type StnToggleButtonGradient = 'none' | 'main' | 'primary' | 'secondary' | 'critical' | 'major' | 'minor' | 'warning';
+type StnToggleButtonWidthPreset = 80 | 100 | 120 | 140 | 160 | 180 | 200;
+type StnToggleButtonWidthValue = StnToggleButtonWidthPreset | 'full' | number | string;
+type StnToggleButtonIconPosition = 'left' | 'right';
+type StnToggleButtonProps = StnWithoutStyle<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'>> & {
+    /** 켜짐(ON) 상태 여부 (제어 모드) */
+    pressed?: boolean;
+    /** 초기 켜짐(ON) 상태 (비제어 모드) @default false */
+    defaultPressed?: boolean;
+    /** 토글 상태 변경 콜백 (true: ON, false: OFF) */
+    onChange?: (pressed: boolean) => void;
+    /** 크기 ('sm': 26px, 'md': 34px 기본, 'lg': 42px) @default 'md' */
+    size?: StnToggleButtonSize;
+    /** 활성(ON) 상태 시맨틱 솔리드 색상 @default 'primary' */
+    color?: StnToggleButtonColor;
+    /** 활성(ON) 상태 7대 표준 시맨틱 그라데이션 ('main' | 'primary' | 'secondary' | 'critical' | 'major' | 'minor' | 'warning') */
+    gradient?: StnToggleButtonGradient;
+    /** 아이콘 요소 또는 시스템 아이콘 slug ('line/volume', 'line/pin' 등) */
+    icon?: ReactNode;
+    /** 아이콘 위치 ('left': 기본, 'right') @default 'left' */
+    iconPosition?: StnToggleButtonIconPosition;
+    /** 아이콘 전용 정사각/원형 모드 */
+    iconOnly?: boolean;
+    /**
+     * 너비 프리셋 (80 | 100 | 120 | 140 | 160 | 180 | 200 | 'full') 또는 커스텀 px/string.
+     * 토글 버튼 특성상 최소 고정 너비(min-width)로 작용하여 글자가 길어지면 자연스럽게 확장(Hug)됩니다.
+     */
+    width?: StnToggleButtonWidthValue;
+    /** 최소 너비(min-width) 명시적 지정 (width와 동일) */
+    minWidth?: number | string;
+    /** 100% 전체 폭 버튼 (`full`) */
+    fullWidth?: boolean;
+    disabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+};
+declare const StnToggleButton: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange">> & {
+    /** 켜짐(ON) 상태 여부 (제어 모드) */
+    pressed?: boolean;
+    /** 초기 켜짐(ON) 상태 (비제어 모드) @default false */
+    defaultPressed?: boolean;
+    /** 토글 상태 변경 콜백 (true: ON, false: OFF) */
+    onChange?: (pressed: boolean) => void;
+    /** 크기 ('sm': 26px, 'md': 34px 기본, 'lg': 42px) @default 'md' */
+    size?: StnToggleButtonSize;
+    /** 활성(ON) 상태 시맨틱 솔리드 색상 @default 'primary' */
+    color?: StnToggleButtonColor;
+    /** 활성(ON) 상태 7대 표준 시맨틱 그라데이션 ('main' | 'primary' | 'secondary' | 'critical' | 'major' | 'minor' | 'warning') */
+    gradient?: StnToggleButtonGradient;
+    /** 아이콘 요소 또는 시스템 아이콘 slug ('line/volume', 'line/pin' 등) */
+    icon?: ReactNode;
+    /** 아이콘 위치 ('left': 기본, 'right') @default 'left' */
+    iconPosition?: StnToggleButtonIconPosition;
+    /** 아이콘 전용 정사각/원형 모드 */
+    iconOnly?: boolean;
+    /**
+     * 너비 프리셋 (80 | 100 | 120 | 140 | 160 | 180 | 200 | 'full') 또는 커스텀 px/string.
+     * 토글 버튼 특성상 최소 고정 너비(min-width)로 작용하여 글자가 길어지면 자연스럽게 확장(Hug)됩니다.
+     */
+    width?: StnToggleButtonWidthValue;
+    /** 최소 너비(min-width) 명시적 지정 (width와 동일) */
+    minWidth?: number | string;
+    /** 100% 전체 폭 버튼 (`full`) */
+    fullWidth?: boolean;
+    disabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+    'aria-label'?: string;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type StnSwitchSize = 'sm' | 'md' | 'lg';
+type StnSwitchColor = 'primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | (string & {});
+type StnSwitchGradient = boolean | 'main' | 'primary' | 'secondary' | 'critical' | 'major' | 'minor' | 'warning' | (string & {});
+type StnSwitchLabelPosition = 'right' | 'left' | 'top' | 'bottom' | 'start' | 'end';
+type StnSwitchProps = StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'children' | 'role' | 'size'>> & {
+    /** 스위치 옆/맞은편 레이블 */
+    label?: ReactNode;
+    /** 크기 ('sm': 28×16, 'md': 36×20 기본, 'lg': 44×24) @default 'md' */
+    size?: StnSwitchSize;
+    /** 활성 트랙 색상 @default 'primary' */
+    color?: StnSwitchColor;
+    /**
+     * 활성화 시 그라데이션 트랙 적용
+     * boolean(기본 블루) 또는 'blue' | 'teal' | 'purple' | 'sunset' | 'emerald' | 커스텀 linear-gradient
+     */
+    gradient?: StnSwitchGradient;
+    /** 레이블 위치 ('right' 기본, 'left', 'top', 'bottom') @default 'right' */
+    labelPosition?: StnSwitchLabelPosition;
+    /**
+     * true: 행 전체 100% width · 레이블 왼쪽 / 스위치 오른쪽 끝 분리 배치
+     */
+    between?: boolean;
+    /** 필수 입력 여부 (레이블 옆에 붉은색 * 표시) */
+    required?: boolean;
+    className?: string;
+};
+/**
+ * Switch Toggle — ON/OFF. 모양: `stn-switch.css`
+ * DOM: input → control → label (checked 스타일은 인접 형제)
+ */
+declare const StnSwitch: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "className" | "size" | "type" | "role">> & {
+    /** 스위치 옆/맞은편 레이블 */
+    label?: ReactNode;
+    /** 크기 ('sm': 28×16, 'md': 36×20 기본, 'lg': 44×24) @default 'md' */
+    size?: StnSwitchSize;
+    /** 활성 트랙 색상 @default 'primary' */
+    color?: StnSwitchColor;
+    /**
+     * 활성화 시 그라데이션 트랙 적용
+     * boolean(기본 블루) 또는 'blue' | 'teal' | 'purple' | 'sunset' | 'emerald' | 커스텀 linear-gradient
+     */
+    gradient?: StnSwitchGradient;
+    /** 레이블 위치 ('right' 기본, 'left', 'top', 'bottom') @default 'right' */
+    labelPosition?: StnSwitchLabelPosition;
+    /**
+     * true: 행 전체 100% width · 레이블 왼쪽 / 스위치 오른쪽 끝 분리 배치
+     */
+    between?: boolean;
+    /** 필수 입력 여부 (레이블 옆에 붉은색 * 표시) */
+    required?: boolean;
+    className?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type StnRadioSize = 'sm' | 'md' | 'lg';
+type StnRadioColor = 'primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | (string & {});
+type StnRadioLabelPlacement = 'end' | 'start' | 'top' | 'bottom' | 'left' | 'right';
+type StnRadioProps = StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'children' | 'size'>> & {
+    /** 레이블 텍스트. 생략 시 단독 컨트롤(control-only)로 표시 */
+    label?: ReactNode;
+    /** 라디오 버튼 크기 ('sm': 14px, 'md': 18px 기본, 'lg': 22px) @default 'md' */
+    size?: StnRadioSize;
+    /** 시멘틱 색상 또는 커스텀 색상 ('primary' | 'error' | 'success' | 'warn' | 'secondary' | 'neutral') @default 'primary' */
+    color?: StnRadioColor;
+    /** 레이블 배치 위치 ('end' | 'start' | 'top' | 'bottom') @default 'end' */
+    labelPlacement?: StnRadioLabelPlacement;
+    /** 레이블 텍스트 숨기고 컨트롤만 표시 (label이 없으면 자동 적용) */
+    controlOnly?: boolean;
+    /** 필수 선택 여부 (레이블 옆에 붉은색 * 표시) */
+    required?: boolean;
+    className?: string;
+};
+/**
+ * Radio — Figma `input`(18×18 · cyan-350 점). 모양: `stn-radio.css`
+ */
+declare const StnRadio: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "className" | "size" | "type">> & {
+    /** 레이블 텍스트. 생략 시 단독 컨트롤(control-only)로 표시 */
+    label?: ReactNode;
+    /** 라디오 버튼 크기 ('sm': 14px, 'md': 18px 기본, 'lg': 22px) @default 'md' */
+    size?: StnRadioSize;
+    /** 시멘틱 색상 또는 커스텀 색상 ('primary' | 'error' | 'success' | 'warn' | 'secondary' | 'neutral') @default 'primary' */
+    color?: StnRadioColor;
+    /** 레이블 배치 위치 ('end' | 'start' | 'top' | 'bottom') @default 'end' */
+    labelPlacement?: StnRadioLabelPlacement;
+    /** 레이블 텍스트 숨기고 컨트롤만 표시 (label이 없으면 자동 적용) */
+    controlOnly?: boolean;
+    /** 필수 선택 여부 (레이블 옆에 붉은색 * 표시) */
+    required?: boolean;
+    className?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type StnRadioGroupOption = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+};
+type StnRadioGroupLayout = 'column' | 'row';
+type StnRadioGroupOrientation = 'horizontal' | 'vertical';
+type StnRadioGroupProps = {
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    options: readonly StnRadioGroupOption[];
+    /** 배치 방향 ('horizontal' | 'vertical') @default 'vertical' */
+    orientation?: StnRadioGroupOrientation;
+    /** column — 세로 나열 · row — 가로 나열 (기존 호환성) */
+    layout?: StnRadioGroupLayout | 'inline';
+    /** 크기 ('sm' | 'md' | 'lg') */
+    size?: StnRadioSize;
+    /** 색상 톤 */
+    color?: StnRadioColor;
+    disabled?: boolean;
+    className?: string;
+    'aria-label'?: string;
+};
+declare function StnRadioGroup({ name: nameProp, value, defaultValue, onChange, options, orientation, layout, size, color, disabled, className, 'aria-label': ariaLabel, }: StnRadioGroupProps): react_jsx_runtime.JSX.Element;
+
+type StnSegmentedSize = 'sm' | 'md' | 'lg';
+type StnSegmentedOrientation = 'horizontal' | 'vertical';
+type StnSegmentedColor = 'primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'neutral';
+type StnSegmentedOption = {
+    value: string;
+    label?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    'aria-label'?: string;
+};
+type StnSegmentedShared = StnWithoutStyle<{
+    /** 탭 항목 목록 */
+    options: readonly StnSegmentedOption[];
+    /** 크기 ('sm': 26px, 'md': 32px 기본, 'lg': 40px) @default 'md' */
+    size?: StnSegmentedSize;
+    /** 활성 탭 시맨틱 솔리드 색상 */
+    color?: StnSegmentedColor;
+    /** 배치 방향 ('horizontal' | 'vertical') @default 'horizontal' */
+    orientation?: StnSegmentedOrientation;
+    /** 수직 세로 배치 여부 @default false */
+    vertical?: boolean;
+    /** 전체 너비 확장 여부 @default false */
+    block?: boolean;
+    /** 전체 비활성화 */
+    disabled?: boolean;
+    className?: string;
+    name?: string;
+    'aria-label'?: string;
+}>;
+type StnSegmentedSingleProps = StnSegmentedShared & {
+    multiple?: false;
+    value: string;
+    onChange: (value: string) => void;
+};
+type StnSegmentedMultipleProps = StnSegmentedShared & {
+    multiple: true;
+    value: readonly string[];
+    onChange: (value: string[]) => void;
+};
+type StnSegmentedProps = StnSegmentedSingleProps | StnSegmentedMultipleProps;
+/**
+ * Pill segmented control — Pub `.stn-segmented`
+ * 기본은 하나만 선택. `multiple`이면 1개도, 여러 개도 고를 수 있다.
+ * 아이콘 전용, 아이콘 + 텍스트, 크기(sm/md/lg), 수직(vertical) 배치를 지원합니다.
+ */
+declare function StnSegmented(props: StnSegmentedProps): react_jsx_runtime.JSX.Element;
+
+type StnDropdownProps = {
+    /** 드롭다운 옵션 목록 */
+    options: StnDropdownOption[];
+    /** 드롭다운 높이 규격: sm (24px) | md (32px, 기본값) | lg (40px) | xl (52px) */
+    size?: StnDropdownSize;
+    /** 외형 스타일 변형: outline (기본) | standard (하단 라인만) | filled (배경 채움) */
+    variant?: StnDropdownVariant;
+    /** 특수 레이아웃 수식어 */
+    modifier?: StnDropdownModifier;
+    /** 선택된 값 (Controlled) */
+    value?: string;
+    /** 초기 기본값 (Uncontrolled) */
+    defaultValue?: string;
+    /** 선택 변경 핸들러 */
+    onChange?: (value: string) => void;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 오류 상태 (빨간색 테두리 및 헬퍼 텍스트) */
+    error?: boolean;
+    /** 읽기 전용 상태 (선택 변경 불가) */
+    readOnly?: boolean;
+    /** 선택되지 않았을 때 표시할 안내 문구 */
+    placeholder?: string;
+    /** 필드 보조 텍스트 (도움말/에러 안내) */
+    helperText?: ReactNode;
+    /** 보조 텍스트 위치 (top | bottom | left | right, 기본값 bottom) */
+    helperTextPosition?: StnDropdownHelperTextPosition;
+    /** 메뉴 열림 방향: down (기본값 · 아래로 열림) | up (위로 열림) */
+    direction?: StnDropdownDirection;
+    /**
+     * 검색 특화 52px 대형 메뉴 (`stn-dropdown--prominent`).
+     * `size="xl"` 사용 권장.
+     */
+    prominent?: boolean;
+    /** width 100% — `stn-dropdown--full w100p` */
+    fullWidth?: boolean;
+    /** 프리셋 80·100·140·180·200 · `100%`/`full` · 그 외 px/string */
+    width?: StnInputWidthValue;
+    className?: string;
+    id?: string;
+    'aria-label'?: string;
+} & StnWithoutStyle<Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'className' | 'style' | 'id' | 'aria-label'>>;
+/**
+ * StnDropdown — 디자인 시스템 표준 커스텀 드롭다운 (`div.selected` + `ul.select_option`).
+ */
+declare function StnDropdown({ options, size, variant, direction, modifier, value: valueProp, defaultValue, onChange, disabled, error, readOnly, placeholder, helperText, helperTextPosition, prominent, fullWidth, width, className, id: idProp, 'aria-label': ariaLabel, ...divRest }: StnDropdownProps): react_jsx_runtime.JSX.Element;
+
+type StnDropdownMenuProps = Omit<StnDropdownProps, 'size' | 'modifier'>;
+/**
+ * Pub 커스텀 메뉴 (`.stn-dropdown` + `.selected` + `.select_option`).
+ * CCTV·simple_board 검색줄 — **52px prominent** (`stn-dropdown--prominent`).
+ * 일반 sm/md/lg 스케일은 `StnDropdown` size prop 사용.
+ */
+declare function StnDropdownMenu({ className, ...rest }: StnDropdownMenuProps): react_jsx_runtime.JSX.Element;
+
+type StnTextFieldVariant = 'outlined' | 'filled' | 'standard';
+/** 색 — 기본 primary. 토큰: --stn-feedback-* */
+type StnTextFieldColor = 'primary' | 'success' | 'error' | 'warning' | 'info' | 'secondary';
+/** 아이콘 위치 — left | right */
+type StnTextFieldIconPosition = 'left' | 'right';
+/** 라벨 위치 — left | right | top */
+type StnTextFieldLabelPosition = 'left' | 'right' | 'top';
+type StnTextFieldSizeProp = StnTextFieldSize | 's' | 'm' | 'l' | 'xl' | 'sm' | 'md' | 'lg';
+type StnTextFieldProps = StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'color'>> & {
+    size?: StnTextFieldSizeProp;
+    /** outlined = box · filled = fill · standard = underline */
+    variant?: StnTextFieldVariant;
+    /** 피드백 색 — primary/secondary는 기본 테두리. success·error·warning·info = --stn-feedback-* */
+    color?: StnTextFieldColor;
+    /** 오류 테두리 — `aria-invalid`도 함께 설정 */
+    invalid?: boolean;
+    /** width 100% — `stn-text-field--full` */
+    fullWidth?: boolean;
+    /** 프리셋 80·100·140·180·200 · `100%`/`full` · 그 외 px/string */
+    width?: StnInputWidthValue;
+    /** 라벨 텍스트 또는 노드 */
+    label?: ReactNode;
+    /** 라벨 위치 ('left' | 'right' | 'top') - 기본 'left' */
+    labelPosition?: StnTextFieldLabelPosition;
+    /** 필수 입력 여부 (`*` 표시) */
+    required?: boolean;
+    /** 왼쪽 아이콘 — Iconography slug (`line/user`) 또는 ReactNode. 로그인 등 고정 왼쪽 슬롯 */
+    prefix?: ReactNode;
+    /** 오른쪽 아이콘 — slug 또는 ReactNode */
+    suffix?: ReactNode;
+    /** 아이콘 — slug 또는 ReactNode. 위치는 iconPosition */
+    icon?: ReactNode;
+    /** 아이콘 위치 · icon 지정 시 기본 left */
+    iconPosition?: StnTextFieldIconPosition;
+    /** 필드 하단 왼쪽 캡션 */
+    helperText?: ReactNode;
+    className?: string;
+};
+declare const StnTextField: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "size">> & {
+    size?: StnTextFieldSizeProp;
+    /** outlined = box · filled = fill · standard = underline */
+    variant?: StnTextFieldVariant;
+    /** 피드백 색 — primary/secondary는 기본 테두리. success·error·warning·info = --stn-feedback-* */
+    color?: StnTextFieldColor;
+    /** 오류 테두리 — `aria-invalid`도 함께 설정 */
+    invalid?: boolean;
+    /** width 100% — `stn-text-field--full` */
+    fullWidth?: boolean;
+    /** 프리셋 80·100·140·180·200 · `100%`/`full` · 그 외 px/string */
+    width?: StnInputWidthValue;
+    /** 라벨 텍스트 또는 노드 */
+    label?: ReactNode;
+    /** 라벨 위치 ('left' | 'right' | 'top') - 기본 'left' */
+    labelPosition?: StnTextFieldLabelPosition;
+    /** 필수 입력 여부 (`*` 표시) */
+    required?: boolean;
+    /** 왼쪽 아이콘 — Iconography slug (`line/user`) 또는 ReactNode. 로그인 등 고정 왼쪽 슬롯 */
+    prefix?: ReactNode;
+    /** 오른쪽 아이콘 — slug 또는 ReactNode */
+    suffix?: ReactNode;
+    /** 아이콘 — slug 또는 ReactNode. 위치는 iconPosition */
+    icon?: ReactNode;
+    /** 아이콘 위치 · icon 지정 시 기본 left */
+    iconPosition?: StnTextFieldIconPosition;
+    /** 필드 하단 왼쪽 캡션 */
+    helperText?: ReactNode;
+    className?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type StnDateRangeFieldProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'value'> & {
+    size?: StnDateRangeFieldSize | 's' | 'm' | 'l' | 'sm' | 'md' | 'lg';
+    start?: Date | string | null;
+    end?: Date | string | null;
+    /** 표시 포맷 — 기본 `YYYY-MM-DD HH:mm:ss` */
+    format?: (date: Date) => string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    invalid?: boolean;
+    fullWidth?: boolean;
+    width?: number | string;
+    className?: string;
+};
+declare const StnDateRangeField: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value"> & {
+    size?: StnDateRangeFieldSize | "s" | "m" | "l" | "sm" | "md" | "lg";
+    start?: Date | string | null;
+    end?: Date | string | null;
+    /** 표시 포맷 — 기본 `YYYY-MM-DD HH:mm:ss` */
+    format?: (date: Date) => string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    invalid?: boolean;
+    fullWidth?: boolean;
+    width?: number | string;
+    className?: string;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type StnSearchRequirementBarProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+    /**
+     * 여백 밀도
+     * - default: padding 8px 16px, gap 16px
+     * - compact: padding 6px 12px, gap 12px
+     */
+    density?: 'default' | 'compact';
+};
+/**
+ * 검색조건 바 — 직접 자식으로 Fields · SearchButton · Export(선택)를 둡니다.
+ * Export는 `margin-left: auto`로 우측 정렬됩니다. Main/export 트레이 래퍼 없음.
+ */
+declare function StnSearchRequirementBar({ children, className, density, ...rest }: StnSearchRequirementBarProps): react_jsx_runtime.JSX.Element;
+declare namespace StnSearchRequirementBar {
+    var Fields: typeof StnSearchRequirementBarFields;
+    var Field: typeof StnSearchRequirementBarField;
+    var SearchButton: typeof StnSearchRequirementBarSearchButton;
+    var Export: typeof StnSearchRequirementBarExport;
+    var Divider: typeof StnSearchRequirementBarDivider;
+}
+type StnSearchRequirementBarFieldsProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+declare function StnSearchRequirementBarFields({ children, className, ...rest }: StnSearchRequirementBarFieldsProps): react_jsx_runtime.JSX.Element;
+type StnSearchRequirementBarFieldProps = HTMLAttributes<HTMLDivElement> & {
+    label: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    labelClassName?: string;
+    controlClassName?: string;
+};
+declare function StnSearchRequirementBarField({ label, children, className, labelClassName, controlClassName, ...rest }: StnSearchRequirementBarFieldProps): react_jsx_runtime.JSX.Element;
+type StnSearchRequirementBarSearchButtonProps = StnButtonProps;
+declare function StnSearchRequirementBarSearchButton({ children, size, icon, className, ...rest }: StnSearchRequirementBarSearchButtonProps): react_jsx_runtime.JSX.Element;
+type StnSearchRequirementBarExportProps = Omit<StnButtonProps, 'children' | 'icon'> & {
+    /** 기본 `line/file-analytics` (엑셀/다운로드) */
+    name?: string;
+    icon?: StnButtonProps['icon'];
+};
+declare function StnSearchRequirementBarExport({ className, name, icon, variant, size, 'aria-label': ariaLabel, ...rest }: StnSearchRequirementBarExportProps): react_jsx_runtime.JSX.Element;
+type StnSearchRequirementBarDividerProps = HTMLAttributes<HTMLSpanElement> & {
+    className?: string;
+};
+declare function StnSearchRequirementBarDivider({ className, ...rest }: StnSearchRequirementBarDividerProps): react_jsx_runtime.JSX.Element;
+
+type StnSearchRequirementBarDemoProps = {
+    onSearch?: () => void;
+    onExport?: () => void;
+    className?: string;
+};
+/** Figma 40000042:186893 — 보고서 검색조건 기본 조합 */
+declare function StnSearchRequirementBarDemo({ onSearch, onExport, className }: StnSearchRequirementBarDemoProps): react_jsx_runtime.JSX.Element;
+
+type StnHeaderProps = HTMLAttributes<HTMLElement> & {
+    /**
+     * @deprecated Header는 Left, Center, Right 슬롯 구성에 따라 레이아웃이 자동 결정되므로 variant 지정이 필요하지 않습니다. 하위 호환성을 위해 유지됩니다.
+     */
+    variant?: StnHeaderVariant;
+    padding?: StnHeaderPadding | number | string;
+    gap?: StnHeaderGap | number | string;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function StnHeader({ variant, padding, gap, children, className, style, ...rest }: StnHeaderProps): react_jsx_runtime.JSX.Element;
+declare namespace StnHeader {
+    var Left: typeof StnHeaderLeft;
+    var Center: typeof StnHeaderCenter;
+    var Right: typeof StnHeaderRight;
+    var TitleGroup: typeof StnHeaderTitleGroup;
+}
+type StnHeaderRegionProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+declare function StnHeaderLeft({ children, className, ...rest }: StnHeaderRegionProps): react_jsx_runtime.JSX.Element;
+declare function StnHeaderCenter({ children, className, ...rest }: StnHeaderRegionProps): react_jsx_runtime.JSX.Element;
+declare function StnHeaderRight({ children, className, ...rest }: StnHeaderRegionProps): react_jsx_runtime.JSX.Element;
+type StnHeaderTitleGroupProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+declare function StnHeaderTitleGroup({ children, className, ...rest }: StnHeaderTitleGroupProps): react_jsx_runtime.JSX.Element;
+type StnHeaderPageTitleProps = HTMLAttributes<HTMLHeadingElement> & {
+    children: ReactNode;
+    className?: string;
+};
+declare function StnHeaderPageTitle({ children, className, title, ...rest }: StnHeaderPageTitleProps): react_jsx_runtime.JSX.Element;
+declare function StnHeaderSubTitle({ children, className, title, ...rest }: StnHeaderPageTitleProps): react_jsx_runtime.JSX.Element;
+declare function StnHeaderContextTitle({ children, className, title, ...rest }: StnHeaderPageTitleProps): react_jsx_runtime.JSX.Element;
+type StnHeaderToolbarProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+declare function StnHeaderToolbar({ children, className, ...rest }: StnHeaderToolbarProps): react_jsx_runtime.JSX.Element;
+
+/** 단색 L0 — 지금은 default만. 장면이 생기면 타입을 추가합니다. */
+type StnLayer0BackgroundColor = 'default';
+type StnLayer0BackgroundProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** 디자인 시스템 사전 정의 프리셋 ('dashboard' | 'login' | 'map-light' | 'showroom-a' | 'showroom-b' | 'none') */
+    variant?: StnLayer0BackgroundPreset;
+    /** 채움 방식. 기본 color. `src`가 있으면 image로 봅니다. */
+    kind?: StnLayer0BackgroundKind;
+    /** 단색 named look. 기본 default (`--stn-elevation-surface-0`) */
+    color?: StnLayer0BackgroundColor;
+    /** 이미지 배경 — light(또는 단일) URL. 있으면 단색이 아닙니다. */
+    src?: string;
+    /** image kind — dark 전용 이미지 (있으면 테마에 따라 전환) */
+    srcDark?: string;
+    /** image kind — 흰색 오버레이 0~1 (Figma map-light light: 0.2) · 다크에서는 숨김 */
+    overlay?: number;
+    /** image kind — dark 전용 radial vignette (Figma showroom-b dark) */
+    overlayDarkRadial?: boolean;
+    /** image kind — 장식 이미지 대체 텍스트 (빈 문자열이면 aria-hidden) */
+    alt?: string;
+    className?: string;
+};
+/**
+ * Layer 0 page background — 프리셋은 `variant`, 단색은 `color`, 임의 URL은 `src`.
+ * `src` + `srcDark` 를 같이 주면 `data-theme` 에 맞춰 전환합니다.
+ */
+declare function StnLayer0Background({ variant, kind: kindProp, color, src: srcProp, srcDark: srcDarkProp, overlay: overlayProp, overlayDarkRadial: overlayDarkRadialProp, alt, className, style, ...rest }: StnLayer0BackgroundProps): react_jsx_runtime.JSX.Element;
+
+type StnDateRangePickerProps = {
+    open: boolean;
+    value: StnDateRange;
+    onChange?: (value: StnDateRange) => void;
+    onApply?: (value: StnDateRange) => void;
+    onClose?: () => void;
+    showTime?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    /** portal positioning — `StnDateRangePickerField`가 전달 */
+    anchorRect?: DOMRect | null;
+};
+declare function StnDateRangePicker({ open, value, onChange, onApply, onClose, showTime, className, style, anchorRect, }: StnDateRangePickerProps): react_jsx_runtime.JSX.Element | null;
+
+type StnDateRangePickerFieldProps = Omit<StnDateRangeFieldProps, 'start' | 'end' | 'onClick' | 'defaultValue' | 'value' | 'onChange'> & {
+    value?: StnDateRange;
+    defaultValue?: StnDateRange;
+    onChange?: (value: StnDateRange) => void;
+    showTime?: boolean;
+    format?: (date: Date) => string;
+    pickerClassName?: string;
+    pickerStyle?: CSSProperties;
+};
+declare function StnDateRangePickerField({ value: valueProp, defaultValue, onChange, showTime, format, className, pickerClassName, pickerStyle, disabled, ...fieldProps }: StnDateRangePickerFieldProps): react_jsx_runtime.JSX.Element;
+
+type StnTopologyNodeStatus = 'normal' | 'minor' | 'major' | 'critical' | 'warning';
+type StnTopologyNodeShape = 'circle' | 'hexagon' | 'diamond' | 'square';
+type StnTopologyNodeSize = 'xs' | 'sm' | 'md' | 'lg';
+/** 노드 본문 — 아이콘 또는 수량 숫자 */
+type StnTopologyNodeContent = 'icon' | 'count';
+type StnTopologyNodeIcon = 'server' | 'cloud' | 'ai' | 'network' | 'shield' | 'user' | 'database' | 'wifi';
+declare const STN_TOPOLOGY_NODE_SHAPES: readonly StnTopologyNodeShape[];
+declare const STN_TOPOLOGY_NODE_SIZES: readonly StnTopologyNodeSize[];
+declare const STN_TOPOLOGY_NODE_STATUSES: readonly StnTopologyNodeStatus[];
+declare const STN_TOPOLOGY_NODE_ICONS: readonly StnTopologyNodeIcon[];
+type StnTopologyStatusTone = {
+    main: string;
+    glow: string;
+    text: string;
+    label: string;
+};
+declare const STN_TOPOLOGY_STATUS_COLORS: Record<StnTopologyNodeStatus, StnTopologyStatusTone>;
+declare const STN_TOPOLOGY_NODE_SIZE: Record<StnTopologyNodeSize, {
+    r: number;
+    icon: number;
+    countFont: number;
+    labelFont: number;
+    statusFont: number;
+    stroke: number;
+}>;
+declare function formatTopologyCount(count: number | string | undefined): string;
+type StnTopologyNode = {
+    id: string;
+    label: string;
+    status?: StnTopologyNodeStatus;
+    statusLabel?: string;
+    icon?: StnTopologyNodeIcon | ReactNode;
+    shape?: StnTopologyNodeShape;
+    size?: StnTopologyNodeSize;
+    content?: StnTopologyNodeContent;
+    /** 노드 본문 숫자(`content: 'count'`) 또는 아이콘 위 뱃지 */
+    count?: number | string;
+    color?: string;
+    /** 링 상의 각도 (0~360). 미지정 시 균등 분할 */
+    angle?: number;
+    /** 1-based 궤도 번호 (안쪽 → 바깥쪽). 미지정 시 메인 궤도 */
+    orbit?: number;
+    subText?: string;
+    data?: unknown;
+    pulse?: boolean;
+};
+type StnTopologyCore = {
+    title?: string;
+    subTitle?: string;
+    status?: StnTopologyNodeStatus;
+    statusLabel?: string;
+    icon?: ReactNode;
+    color?: string;
+};
+
+type StnTopologyRingProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    /** 중앙 코어 노드 정보 */
+    core?: StnTopologyCore;
+    /** 둘레 궤도 상의 관제 노드 목록 */
+    nodes?: StnTopologyNode[];
+    /** 궤도(링) 개수 (기본 3단계 동심원) */
+    ringCount?: number;
+    /** 메인 궤도 반경 (SVG 단위, 기본 115) */
+    orbitRadius?: number;
+    /** 궤도 간격 (기본 36) */
+    ringGap?: number;
+    /** 노드 기본 크기 */
+    nodeSize?: StnTopologyNodeSize;
+    /** 중앙 연결 선 스타일 */
+    connectionLineStyle?: 'solid' | 'dashed' | 'none';
+    /** 선택 하이라이트 노드 id */
+    selectedId?: string;
+    /** 노드 클릭 핸들러 */
+    onNodeClick?: (node: StnTopologyNode) => void;
+    /** 스켈레톤 로딩 상태 */
+    loading?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * StnTopologyRing — 종합 관제 원형 궤도 토폴로지
+ *
+ * - 동심원 궤도 (orbitRadius · ringCount · 노드별 orbit)
+ * - 노드 크기(xs~lg) · 모양(circle/hexagon/diamond/square) · 상태색
+ * - 본문 타입: 아이콘 또는 수량 숫자
+ */
+declare function StnTopologyRing({ core, nodes, ringCount, orbitRadius, ringGap, nodeSize, connectionLineStyle, selectedId, onNodeClick, loading, className, style, ...rest }: StnTopologyRingProps): react_jsx_runtime.JSX.Element;
+
+type StnTopologyGraphNode = {
+    id: string;
+    x: number;
+    y: number;
+    z?: number;
+    label?: string;
+    status?: StnTopologyNodeStatus;
+    statusLabel?: string;
+    isCore?: boolean;
+    color?: string;
+    pulse?: boolean;
+    shape?: StnTopologyNodeShape;
+    size?: StnTopologyNodeSize;
+    content?: StnTopologyNodeContent;
+    count?: number | string;
+    icon?: StnTopologyNodeIcon;
+};
+type StnTopologyGraphLink = {
+    source: string;
+    target: string;
+    status?: StnTopologyNodeStatus;
+    dashed?: boolean;
+};
+type StnTopologyGraphProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    defaultMode?: '2D' | '3D';
+    showModeToggle?: boolean;
+    showMinimap?: boolean;
+    nodes?: StnTopologyGraphNode[];
+    links?: StnTopologyGraphLink[];
+    nodeSize?: StnTopologyNodeSize;
+    selectedId?: string;
+    onNodeClick?: (node: StnTopologyGraphNode) => void;
+    loading?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * StnTopologyGraph — 관제 2D/3D 퍼스펙티브 네트워크 토폴로지
+ */
+declare function StnTopologyGraph({ defaultMode, showModeToggle, showMinimap, nodes, links, nodeSize, selectedId, onNodeClick, loading, className, style, ...rest }: StnTopologyGraphProps): react_jsx_runtime.JSX.Element;
+
+type StnTopologyNodeMarkProps = Omit<SVGAttributes<SVGGElement>, 'onClick'> & {
+    x: number;
+    y: number;
+    size?: StnTopologyNodeSize;
+    shape?: StnTopologyNodeShape;
+    status?: StnTopologyNodeStatus;
+    color?: string;
+    content?: StnTopologyNodeContent;
+    icon?: StnTopologyNodeIcon | ReactNode;
+    count?: number | string;
+    label?: string;
+    statusLabel?: string;
+    pulse?: boolean;
+    selected?: boolean;
+    showLabel?: boolean;
+    showStatus?: boolean;
+    onClick?: () => void;
+};
+/**
+ * StnTopologyNodeMark — 토폴로지 노드 시각 단위 (크기 · 모양 · 색 · 아이콘/숫자)
+ */
+declare function StnTopologyNodeMark({ x, y, size, shape, status, color, content, icon, count, label, statusLabel, pulse, selected, showLabel, showStatus, onClick, className, ...rest }: StnTopologyNodeMarkProps): react_jsx_runtime.JSX.Element;
+type StnTopologyNodePreviewProps = Omit<StnTopologyNodeMarkProps, 'x' | 'y'> & {
+    width?: number;
+    height?: number;
+};
+/** 문서·팔레트용 단독 노드 프리뷰 */
+declare function StnTopologyNodePreview({ width, height, size, showLabel, showStatus, ...rest }: StnTopologyNodePreviewProps): react_jsx_runtime.JSX.Element;
+
+type StnWidgetBackground = boolean | StnWidgetBackgroundMode;
+type StnWidgetStatus = 'default' | 'critical' | 'major' | 'minor' | 'warning';
+type StnWidgetPadding = 'default' | 'compact' | 'none';
+type StnWidgetProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title'> & {
+    className?: string;
+    /** Pub 위젯 셸 — card | fault-panel | board | board-item | canvas (맵/토폴로지 마운트 셸) */
+    shell?: StnWidgetShell;
+    /** 위젯 variant 별칭 (shell과 동일: canvas 등 지정 가능) */
+    variant?: StnWidgetShell;
+    /**
+     * Figma Widget Container 186:114582 — 설정 시 `background` 대신 appearance 면·그림자 사용
+     */
+    appearance?: StnWidgetAppearance;
+    /**
+     * 배경 · L1 elevation (`appearance` 미설정 시)
+     * - true | 'surface' — surface-widget + shadow
+     * - false | 'none' — Pub `none-bg`
+     */
+    background?: StnWidgetBackground;
+    /** 위젯 관제/장애 상태 — 'critical' 시 2px 레드 보더 및 네온 글로우 */
+    status?: StnWidgetStatus;
+    /** 심각 장애 상태 편의 플래그 (.critical) */
+    isCritical?: boolean;
+    /** 위젯 종류 id (sample PNG 파일명 · data-stn-widget-kind) */
+    kind?: string;
+    title?: ReactNode;
+    /** 타이틀 우측에 붙는 뱃지 슬롯 (예: <StnSeverityBadge />) */
+    badge?: ReactNode;
+    titleActions?: ReactNode;
+    /** Figma 헤더 — 차트 아이콘 (appearance 설정 시 기본 true) */
+    showHeaderIcon?: boolean;
+    /** Iconography slug — `line/chart-histogram` 등 (`headerIcon` 미지정 시) */
+    headerIconName?: string;
+    headerIcon?: ReactNode;
+    /** Figma 헤더 — 우측 슬롯: plain text (`periodLabel`) 또는 `periodActions` / `PeriodSelect` · `PeriodPager` */
+    periodLabel?: ReactNode;
+    periodActions?: ReactNode;
+    /** card 셸 본문 — ds-widget-item__con */
+    contentClassName?: string;
+    /** 내부 여백 모드 — 기본(12px), compact(8px), none(0px) */
+    padding?: StnWidgetPadding;
+    /** padding: 0 (Pub none-bg 차트 위젯) */
+    noPadding?: boolean;
+    /** 로딩 상태 여부 */
+    loading?: boolean;
+    /** 빈 상태 여부 */
+    empty?: boolean;
+    /** 빈 상태 안내 문구 */
+    emptyMessage?: ReactNode;
+    /** 하단 푸터 슬롯 */
+    footer?: ReactNode;
+    /**
+     * 카드 바깥에 붙는 플로팅 슬롯. `StnEventBanner`면 `status`와 같은 위험도로 맞춥니다.
+     */
+    banner?: ReactNode;
+    /** hover 애니메이션 및 인터랙션 유무 */
+    interactive?: boolean;
+    /** 문서용 hover 상태 고정 (appearance map · translucent) */
+    docHover?: boolean;
+    /** 너비 100% 채움 여부 (기본: true) */
+    fullWidth?: boolean;
+    /** 높이 100% 채움 여부 (기본: true) */
+    fullHeight?: boolean;
+    /** 헤더 우측 컨트롤이 많을 때 아랫줄로 개행(2행 구조) 허용 여부 (기본: false, 1줄 말줄임) */
+    wrapActions?: boolean;
+    children?: ReactNode;
+};
+/** 헤더 우측 — title과 동일 타이포의 plain text */
+declare function StnWidgetPeriodText({ children, className, ...rest }: {
+    children: ReactNode;
+} & HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+/** 헤더 우측 — 드롭다운(라벨 + chevron). 메뉴는 `onClick` · 외부 Dropdown 연결 */
+declare function StnWidgetPeriodSelect({ label, className, ...rest }: {
+    label: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>): react_jsx_runtime.JSX.Element;
+/** 헤더 우측 — 이전/다음 화살표 + 가운데 라벨 */
+declare function StnWidgetPeriodPager({ label, className, onPrev, onNext, prevLabel, nextLabel, ...rest }: {
+    label: ReactNode;
+    className?: string;
+    onPrev?: () => void;
+    onNext?: () => void;
+    prevLabel?: string;
+    nextLabel?: string;
+} & HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function StnWidgetRoot({ shell: shellProp, variant, appearance, background, status, isCritical, kind, title, badge, titleActions, showHeaderIcon, headerIconName, headerIcon, periodLabel, periodActions, children, className, contentClassName, padding, noPadding, loading, empty, emptyMessage, footer, banner, interactive, docHover, fullWidth, fullHeight, wrapActions, style, ...rest }: StnWidgetProps): react_jsx_runtime.JSX.Element;
+type StnWidgetHeaderProps = HTMLAttributes<HTMLDivElement> & {
+    /** 헤더 우측 컨트롤이 많을 때 아랫줄로 개행(2행 구조) 허용 여부 */
+    wrap?: boolean;
+};
+declare function StnWidgetHeader({ className, wrap, children, ...rest }: StnWidgetHeaderProps): react_jsx_runtime.JSX.Element;
+declare function StnWidgetTitle({ className, children, title, ...rest }: HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function StnWidgetActions({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+type StnWidgetBodyProps = HTMLAttributes<HTMLDivElement> & {
+    /** 본문 내부 여백 규격 — 기본 12px, compact 8px, none 0px */
+    padding?: StnWidgetPadding;
+    /** 내용이 넘칠 때 내부 스크롤 활성화 여부 (기본 true) */
+    scrollable?: boolean;
+    /** 본문 서피스 배경 — 'default' | 'canvas' (차트용 다크 캔버스) | 'transparent' | 'subtle' */
+    surface?: 'default' | 'canvas' | 'transparent' | 'subtle';
+    /** 빈 깡통 슬롯 표시 (점선 테두리 및 'Widget Content Shell' 라벨) */
+    empty?: boolean | string;
+};
+declare function StnWidgetBody({ padding, scrollable, surface, empty, className, style, children, ...rest }: StnWidgetBodyProps): react_jsx_runtime.JSX.Element;
+type StnWidgetChartSlotProps = HTMLAttributes<HTMLDivElement> & {
+    label?: string;
+};
+/** Figma slot — dashed chart mount area */
+declare function StnWidgetChartSlot({ label, className, children, ...rest }: StnWidgetChartSlotProps): react_jsx_runtime.JSX.Element;
+type StnWidgetStatusGrade = 'critical' | 'major' | 'minor' | 'info' | 'normal';
+type StnWidgetStatusItemProps = HTMLAttributes<HTMLDivElement> & {
+    label: ReactNode;
+    value: ReactNode;
+    grade?: StnWidgetStatusGrade;
+    /** @deprecated grade 사용 권장 */
+    status?: StnWidgetStatusGrade | 'warning';
+    showDot?: boolean;
+};
+declare function StnWidgetStatusItem({ label, value, grade: gradeProp, status, showDot, className, ...rest }: StnWidgetStatusItemProps): react_jsx_runtime.JSX.Element;
+declare function StnWidgetStatusList({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function StnWidgetStatGroup({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+type StnWidgetStatCardProps = HTMLAttributes<HTMLDivElement> & {
+    label: ReactNode;
+    count: ReactNode;
+};
+declare function StnWidgetStatCard({ label, count, className, ...rest }: StnWidgetStatCardProps): react_jsx_runtime.JSX.Element;
+/** DS · 스토리용 빈 본문 */
+declare function StnWidgetPlaceholder({ label }: {
+    label?: string;
+}): react_jsx_runtime.JSX.Element;
+type StnWidgetGradeRowProps = HTMLAttributes<HTMLDivElement> & {
+    grade: StnWidgetGradeRowGrade;
+    label: ReactNode;
+    value: ReactNode;
+    /** 0–100 — progress bar width · percent label */
+    percent: number;
+    percentLabel?: ReactNode;
+};
+/** Figma dark dashboard — grade row + 2px progress bar */
+declare function StnWidgetGradeRow({ grade, label, value, percent, percentLabel, className, ...rest }: StnWidgetGradeRowProps): react_jsx_runtime.JSX.Element;
+declare function StnWidgetGradeRowList({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function StnWidgetFooter({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function StnWidgetEmpty({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface StnWidgetLoadingProps extends HTMLAttributes<HTMLDivElement> {
+    lines?: number;
+}
+declare function StnWidgetLoading({ lines, className, children, ...rest }: StnWidgetLoadingProps): react_jsx_runtime.JSX.Element;
+type StnWidgetInsetIconProps = StnIconBoxProps;
+/** 위젯 헤더 아이콘 슬롯 — `StnIconBox` (기본 size=`sm`) */
+declare function StnWidgetInsetIcon({ className, size, ...rest }: StnWidgetInsetIconProps): react_jsx_runtime.JSX.Element;
+declare const StnWidget: typeof StnWidgetRoot & {
+    Header: typeof StnWidgetHeader;
+    Title: typeof StnWidgetTitle;
+    Actions: typeof StnWidgetActions;
+    Body: typeof StnWidgetBody;
+    Footer: typeof StnWidgetFooter;
+    Empty: typeof StnWidgetEmpty;
+    Loading: typeof StnWidgetLoading;
+    InsetIcon: typeof StnWidgetInsetIcon;
+    ChartSlot: typeof StnWidgetChartSlot;
+    PeriodText: typeof StnWidgetPeriodText;
+    PeriodSelect: typeof StnWidgetPeriodSelect;
+    PeriodPager: typeof StnWidgetPeriodPager;
+    StatusList: typeof StnWidgetStatusList;
+    StatusItem: typeof StnWidgetStatusItem;
+    StatGroup: typeof StnWidgetStatGroup;
+    StatCard: typeof StnWidgetStatCard;
+    GradeRowList: typeof StnWidgetGradeRowList;
+    GradeRow: typeof StnWidgetGradeRow;
+    Placeholder: typeof StnWidgetPlaceholder;
+    TopologyRing: typeof StnTopologyRing;
+    TopologyGraph: typeof StnTopologyGraph;
+};
+
+type AlertCenterDashboardProps = {
+    className?: string;
+    appearance?: StnWidgetAppearance;
+    /** 위젯 본문 로딩 스켈레톤 표출 유무 */
+    loading?: boolean;
+};
+/**
+ * alert_center 우측 위젯 묶음 — `.dashboard_right` 슬롯(StnDashboard.Right) 안에 넣음
+ */
+declare function AlertCenterDashboard({ className, appearance, loading }: AlertCenterDashboardProps): react_jsx_runtime.JSX.Element;
+
+/** Pub dashboard_right 위젯 본문 — alert_center.html · dashboard-map.html 공통 마크업 */
+type PubDisabilityStatusItem = {
+    label: ReactNode;
+    value: ReactNode;
+    grade?: 'critical' | 'major' | 'minor' | 'warning' | 'normal';
+    showDot?: boolean;
+};
+type PubDisabilityStatusListProps = {
+    items: PubDisabilityStatusItem[];
+    summary?: {
+        label: string;
+        value: ReactNode;
+    }[];
+};
+declare function PubDisabilityStatusList({ items, summary }: PubDisabilityStatusListProps): react_jsx_runtime.JSX.Element;
+type PubTop5BarRow = {
+    label: string;
+    percent: number;
+    status: string;
+};
+type PubTrafficTop5BarRow = {
+    label: string;
+    percent: number;
+    value: string;
+};
+declare function PubTrafficTop5Bars({ rows }: {
+    rows: PubTrafficTop5BarRow[];
+}): react_jsx_runtime.JSX.Element;
+declare function PubTop5EquipmentBars({ rows }: {
+    rows: PubTop5BarRow[];
+}): react_jsx_runtime.JSX.Element;
+declare function PubChartSample({ src, alt, onError, }: {
+    src: string;
+    alt?: string;
+    onError?: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+type StnAlertCenterPanelProps = {
+    title?: string;
+    alerts?: StnAlertCenterAlertItem[];
+    workItems?: StnAlertCenterWorkItem[];
+    deployItems?: StnAlertCenterWorkItem[];
+    defaultTab?: StnAlertCenterTab;
+    /** Pub `:has(#gnb-alert-tab-*)` — 기본 Pub id 사용 권장 */
+    tabIds?: Partial<Record<StnAlertCenterTab, string>>;
+    tabName?: string;
+    onClose?: () => void;
+    closeLabel?: string;
+    className?: string;
+};
+declare function StnAlertCenterPanel({ title, alerts, workItems, deployItems, defaultTab, tabIds, tabName: tabNameProp, onClose, closeLabel, className, }: StnAlertCenterPanelProps): react_jsx_runtime.JSX.Element;
+
+type StnAlertCenterDocPreviewProps = StnAlertCenterPanelProps & {
+    theme?: StnTheme;
+    /** DS iframe·Color doc용 GNB 크롬 래퍼 */
+    withDocChrome?: boolean;
+    children?: ReactNode;
+};
+/**
+ * 문서·데모 — `stn-doc-frame--alert-center` + SideNav bottom shell.
+ * 제품 앱에서는 `StnSideNavigation` bottom 슬롯에 `StnAlertCenterPanel`만 넣으면 됩니다.
+ */
+declare function StnAlertCenterDocPreview({ theme, withDocChrome, children, ...panelProps }: StnAlertCenterDocPreviewProps): react_jsx_runtime.JSX.Element;
+
+type SideNavContextValue = {
+    collapsed: boolean;
+    activeId?: string;
+    onSelect?: (id: string) => void;
+    onToggleCollapse?: () => void;
+    mobileOpen?: boolean;
+    onToggleMobileOpen?: () => void;
+    setMobileOpen?: (open: boolean) => void;
+    isDrawer?: boolean;
+};
+declare const SideNavContext: react.Context<SideNavContextValue>;
+declare const useSideNav: () => SideNavContextValue;
+
+type StnSideNavItemVariant = 'item' | 'sub';
+type StnSideNavItemIconPosition = 'left' | 'right';
+type StnSideNavItemProps = StnWithoutStyle<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>> & {
+    label: string;
+    id?: string;
+    /** 1depth line icon (mask URL) 또는 2depth sub-icon mask URL */
+    iconSrc?: string;
+    /** active 시 대체 아이콘 — Figma apps gradient URL */
+    activeIconSrc?: string;
+    /** ReactNode 커스텀 아이콘 (1depth 및 2depth sub-icon 모두 지원) */
+    icon?: ReactNode;
+    /** 아이콘 위치 — 기본 left, 우측 배치 시 'right' */
+    iconPosition?: StnSideNavItemIconPosition;
+    variant?: StnSideNavItemVariant;
+    /** 선택됨 (Figma의 state=clicked 동일) */
+    active?: boolean;
+    /** Figma state=clicked 지원용 별칭 (active와 동일하게 동작) */
+    clicked?: boolean;
+    /** hover 가상 상태 강제 적용 (문서/데모용) */
+    hovered?: boolean;
+    /** 사이드바 접힘 여부 (미지정 시 SideNavContext 값 사용) */
+    collapsed?: boolean;
+    /** 하위 메뉴 존재 표시 (chevron 꺽쇠) — 1depth/2depth 모두 지원 */
+    showChevron?: boolean;
+    /** 하위 메뉴 펼침 여부 (chevron 회전) */
+    chevronOpen?: boolean;
+    /** chevron 기본 방향 및 펼침 방향 (기본: 'down', 위로 펼쳐지는 경우 'up') */
+    chevronDirection?: 'down' | 'up';
+    /** 숫자/텍스트 배지 (StnBadge 자동 연동) 또는 StnBadge 컴포넌트 직주입 — 1depth/2depth 모두 지원 */
+    badge?: ReactNode;
+    /** 점 배지 표시 (StnBadge dot) */
+    showBadgeDot?: boolean;
+    /** 2depth 서브 도트(stn-side-nav-item__sub-dot) 표시 여부 (기본값: icon이 없으면 true, icon이 있으면 false. 둘 다 원할 시 true 지정) */
+    showSubDot?: boolean;
+    /** 2depth 서브 들여쓰기(stn-side-nav-item__sub-indent) 표시 여부 (기본값: variant="sub"일 때 true) */
+    showSubIndent?: boolean;
+};
+/**
+ * SideNav 메뉴 행 항목 컴포넌트 — 1depth 및 2depth sub 지원
+ */
+declare const StnSideNavItem: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">> & {
+    label: string;
+    id?: string;
+    /** 1depth line icon (mask URL) 또는 2depth sub-icon mask URL */
+    iconSrc?: string;
+    /** active 시 대체 아이콘 — Figma apps gradient URL */
+    activeIconSrc?: string;
+    /** ReactNode 커스텀 아이콘 (1depth 및 2depth sub-icon 모두 지원) */
+    icon?: ReactNode;
+    /** 아이콘 위치 — 기본 left, 우측 배치 시 'right' */
+    iconPosition?: StnSideNavItemIconPosition;
+    variant?: StnSideNavItemVariant;
+    /** 선택됨 (Figma의 state=clicked 동일) */
+    active?: boolean;
+    /** Figma state=clicked 지원용 별칭 (active와 동일하게 동작) */
+    clicked?: boolean;
+    /** hover 가상 상태 강제 적용 (문서/데모용) */
+    hovered?: boolean;
+    /** 사이드바 접힘 여부 (미지정 시 SideNavContext 값 사용) */
+    collapsed?: boolean;
+    /** 하위 메뉴 존재 표시 (chevron 꺽쇠) — 1depth/2depth 모두 지원 */
+    showChevron?: boolean;
+    /** 하위 메뉴 펼침 여부 (chevron 회전) */
+    chevronOpen?: boolean;
+    /** chevron 기본 방향 및 펼침 방향 (기본: 'down', 위로 펼쳐지는 경우 'up') */
+    chevronDirection?: "down" | "up";
+    /** 숫자/텍스트 배지 (StnBadge 자동 연동) 또는 StnBadge 컴포넌트 직주입 — 1depth/2depth 모두 지원 */
+    badge?: ReactNode;
+    /** 점 배지 표시 (StnBadge dot) */
+    showBadgeDot?: boolean;
+    /** 2depth 서브 도트(stn-side-nav-item__sub-dot) 표시 여부 (기본값: icon이 없으면 true, icon이 있으면 false. 둘 다 원할 시 true 지정) */
+    showSubDot?: boolean;
+    /** 2depth 서브 들여쓰기(stn-side-nav-item__sub-indent) 표시 여부 (기본값: variant="sub"일 때 true) */
+    showSubIndent?: boolean;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type StnSideNavHeaderProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    /** 하단 경계선(divider/border) 표시 여부 (기본값: false, 목업 규격 준수) */
+    border?: boolean;
+    /** border 별칭 */
+    hasBorder?: boolean;
+    /** 접기/펼치기 토글 버튼 표시 여부 @default true */
+    showToggle?: boolean;
+    /** 드로어 모드 닫기 버튼 표시 여부 (드로어 활성화 시 기본 true) */
+    showClose?: boolean;
+};
+/**
+ * SideNav 상단 헤더 영역
+ * - 가운데: InfoMap 브랜드 로고 (펼침: horizontal, 접힘: onlyimg 자동 전환)
+ * - 우측 플로팅: 표준 StnButton 기반 접기/펼치기 아이콘 버튼 또는 드로어 닫기 버튼
+ * - 경계선: border / hasBorder prop으로 하단 구분선 유무 제어 가능 (기본값: false)
+ */
+declare const StnSideNavHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    /** 하단 경계선(divider/border) 표시 여부 (기본값: false, 목업 규격 준수) */
+    border?: boolean;
+    /** border 별칭 */
+    hasBorder?: boolean;
+    /** 접기/펼치기 토글 버튼 표시 여부 @default true */
+    showToggle?: boolean;
+    /** 드로어 모드 닫기 버튼 표시 여부 (드로어 활성화 시 기본 true) */
+    showClose?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type StnSideNavMenuProps = HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    /** StnScroll 두께 프리셋 ('thin' | 'default' | 'thick') @default 'thin' */
+    scrollSize?: StnScrollSize;
+    /** StnScroll 색상/스타일 프리셋 ('default' | 'primary' | 'teal' | 'muted' | 'fade') @default 'fade' */
+    scrollColor?: StnScrollColor;
+};
+/**
+ * SideNav 메인 내비게이션 메뉴 컨테이너 (`<nav>`)
+ * - STN StnScroll (.stn-scroll) 커스텀 스크롤바 내장
+ */
+declare const StnSideNavMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    /** StnScroll 두께 프리셋 ('thin' | 'default' | 'thick') @default 'thin' */
+    scrollSize?: StnScrollSize;
+    /** StnScroll 색상/스타일 프리셋 ('default' | 'primary' | 'teal' | 'muted' | 'fade') @default 'fade' */
+    scrollColor?: StnScrollColor;
+} & react.RefAttributes<HTMLElement>>;
+
+type StnSideNavGroupDirection = 'down' | 'up';
+type StnSideNavGroupVariant = 'inline' | 'dropdown';
+type StnSideNavDropdownVariant = 'filled' | 'transparent';
+type StnSideNavGroupProps = HTMLAttributes<HTMLDivElement> & {
+    /** 그룹 타이틀 레이블 (대문자 캡션 형태로 표시) */
+    label?: ReactNode;
+    /** 펼침/접힘 트리 부모 아이템 (예: StnSideNavItem) */
+    parent?: ReactNode;
+    /** 펼침 방향 (기본: 'down' 아래로 펼쳐짐, 'up' 위로 펼쳐짐) */
+    direction?: StnSideNavGroupDirection;
+    /**
+     * 서브메뉴 표시 모드
+     * - 'inline': 일반 문서 흐름에서 상/하로 밀면서 펼침 (기본값)
+     * - 'dropdown': 위아래 레이아웃 밀림 없이 플로팅 드롭다운/팝오버 형태로 띄움
+     */
+    variant?: StnSideNavGroupVariant;
+    /** dropdown 모드 단축 boolean prop (variant="dropdown"과 동일) */
+    dropdown?: boolean;
+    /**
+     * 드롭다운 서브메뉴 배경 스타일
+     * - 'filled': 배경, 경계선, 블러, 그림자가 적용된 카드 팝오버 (기본값)
+     * - 'transparent': 배경 및 그림자 없이 투명하게 플로팅되는 형태
+     * @default 'filled'
+     */
+    dropdownVariant?: StnSideNavDropdownVariant;
+    /** 드롭다운 배경 표시 여부 (false 시 dropdownVariant="transparent"와 동일) @default true */
+    dropdownBackground?: boolean;
+    /** 펼침 상태 (controlled) */
+    open?: boolean;
+    /** 기본 펼침 상태 (uncontrolled) */
+    defaultOpen?: boolean;
+    /** 펼침 상태 변경 핸들러 */
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+};
+/**
+ * SideNav 메뉴 그룹 컴포넌트
+ * - `label`: 섹션 헤더 레이블로 아이템 그룹핑
+ * - `parent`: 1depth 부모 아이템 클릭 시 2depth 서브메뉴 펼침/접힘 제어
+ * - `variant`: 'inline'(아코디언 형태) | 'dropdown'(플로팅 팝업 드롭다운 형태)
+ * - `direction`: 'down'(아래 방향) | 'up'(위 방향)
+ */
+declare const StnSideNavGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** 그룹 타이틀 레이블 (대문자 캡션 형태로 표시) */
+    label?: ReactNode;
+    /** 펼침/접힘 트리 부모 아이템 (예: StnSideNavItem) */
+    parent?: ReactNode;
+    /** 펼침 방향 (기본: 'down' 아래로 펼쳐짐, 'up' 위로 펼쳐짐) */
+    direction?: StnSideNavGroupDirection;
+    /**
+     * 서브메뉴 표시 모드
+     * - 'inline': 일반 문서 흐름에서 상/하로 밀면서 펼침 (기본값)
+     * - 'dropdown': 위아래 레이아웃 밀림 없이 플로팅 드롭다운/팝오버 형태로 띄움
+     */
+    variant?: StnSideNavGroupVariant;
+    /** dropdown 모드 단축 boolean prop (variant="dropdown"과 동일) */
+    dropdown?: boolean;
+    /**
+     * 드롭다운 서브메뉴 배경 스타일
+     * - 'filled': 배경, 경계선, 블러, 그림자가 적용된 카드 팝오버 (기본값)
+     * - 'transparent': 배경 및 그림자 없이 투명하게 플로팅되는 형태
+     * @default 'filled'
+     */
+    dropdownVariant?: StnSideNavDropdownVariant;
+    /** 드롭다운 배경 표시 여부 (false 시 dropdownVariant="transparent"와 동일) @default true */
+    dropdownBackground?: boolean;
+    /** 펼침 상태 (controlled) */
+    open?: boolean;
+    /** 기본 펼침 상태 (uncontrolled) */
+    defaultOpen?: boolean;
+    /** 펼침 상태 변경 핸들러 */
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type StnSideNavSpacerProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * SideNav 상단 메뉴와 하단 푸터 사이의 여백을 밀어내는 Flex Spacer
+ */
+declare const StnSideNavSpacer: react.ForwardRefExoticComponent<StnSideNavSpacerProps & react.RefAttributes<HTMLDivElement>>;
+
+type StnSideNavFooterProps = HTMLAttributes<HTMLElement> & {
+    /** mockup/index.html 스타일의 상단 우측 32px 곡면 라운드 및 글래스 효과 */
+    curved?: boolean;
+    children?: ReactNode;
+};
+/**
+ * SideNav 하단 푸터 영역 (도움말, 설정, 사용자 프로필, 로그아웃 등)
+ */
+declare const StnSideNavFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /** mockup/index.html 스타일의 상단 우측 32px 곡면 라운드 및 글래스 효과 */
+    curved?: boolean;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLElement>>;
+
+type StnSideNavToggleProps = ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * mockup/index.html의 플로팅 원형 사이드바 접기/펼치기 버튼 (Figma 40004302:30002)
+ * 접힘 시 사이드바 우측 경계선에 걸치고, 펼침 시 헤더 우측 상단으로 이동하며 180도 회전
+ */
+declare const StnSideNavToggle: react.ForwardRefExoticComponent<StnSideNavToggleProps & react.RefAttributes<HTMLButtonElement>>;
+
+type StnSideNavLogoProps = HTMLAttributes<HTMLDivElement> & {
+    logoProps?: Partial<StnLogoProps>;
+};
+/**
+ * 사이드바 로고 영역
+ * - 펼침 상태: InfoMap 가로 로고 (horizontal)
+ * - 접힘 상태: logo-onlyimg 심볼 (onlyimg)로 자동 대체
+ */
+declare const StnSideNavLogo: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    logoProps?: Partial<StnLogoProps>;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type StnSideNavWatermarkProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * 워터마크 로고 크기 (xs, sm, md, lg, xl).
+     * 사이드바 기본 규격에 최적화된 'xl' (120px)이 기본값입니다.
+     * @default 'xl'
+     */
+    size?: StnLogoSize;
+    /**
+     * 다크 / 라이트 테마 (미지정 시 상위 data-theme에 따라 자동 전환)
+     */
+    theme?: StnLogoTheme;
+};
+/**
+ * 사이드바 하단 3D 엠보싱 브랜드 워터마크 카드 (Figma 40004218:102473)
+ * StnLogo(variant="watermark") 기반으로 크기(size prop) 및 테마 제어를 지원합니다.
+ */
+declare const StnSideNavWatermark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /**
+     * 워터마크 로고 크기 (xs, sm, md, lg, xl).
+     * 사이드바 기본 규격에 최적화된 'xl' (120px)이 기본값입니다.
+     * @default 'xl'
+     */
+    size?: StnLogoSize;
+    /**
+     * 다크 / 라이트 테마 (미지정 시 상위 data-theme에 따라 자동 전환)
+     */
+    theme?: StnLogoTheme;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type StnSideNavMobileTriggerProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** 화면 좌하단 플로팅 고정 여부 @default false */
+    floating?: boolean;
+    children?: ReactNode;
+};
+/**
+ * 모바일 화면에서 사이드 내비게이션 드로어를 열고 닫는 햄버거 토글 버튼
+ * - loating 속성 지정 시 화면 좌하단에 플로팅 버튼으로 고정됩니다.
+ * - 컴포넌트 단독 또는 StnSideNavigation.MobileTrigger로 접근할 수 있습니다.
+ */
+declare const StnSideNavMobileTrigger: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** 화면 좌하단 플로팅 고정 여부 @default false */
+    floating?: boolean;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type StnSideNavSubProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+};
+/**
+ * SideNav 하단 푸터 바로 위의 서브/유틸리티 액션 영역 (화면 조정, 테마 전환 등)
+ * - 내부에 StnButton(variant="ghost") 또는 StnSideNavigation.SubItem / Button을 배치할 수 있습니다.
+ * - 접힘 상태(collapsed): 세로 1열 32px 원형 아이콘 버튼 배치
+ * - 펼침 상태(expanded): 가로 2열 캡슐형 Ghost 버튼 배치
+ */
+declare const StnSideNavSub: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+type StnSideNavSubItemProps = Omit<StnButtonProps, 'variant' | 'size' | 'shape'> & {
+    /** 버튼 변형 (기본: 'ghost') */
+    variant?: StnButtonProps['variant'];
+    /** 버튼 크기 (기본: 'md') */
+    size?: StnButtonProps['size'];
+    /** 버튼 형태 (기본: 'pill') */
+    shape?: StnButtonProps['shape'];
+    /** 좌측 또는 단독 아이콘 (ReactNode 또는 아이콘명 slug) */
+    icon?: ReactNode;
+    /** 아이콘 이미지 경로 (SVG 등) */
+    iconSrc?: string;
+    /** 펼쳤을 때 표시되는 버튼 텍스트 라벨 (children 대신 지정 가능) */
+    label?: string;
+    /** 툴팁 또는 접근성 타이틀 (미지정 시 label 사용) */
+    title?: string;
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * StnSideNavSub 내부에서 사용하는 보조 액션 버튼 (StnButton variant="ghost" 기반)
+ */
+declare const StnSideNavSubItem: react.ForwardRefExoticComponent<Omit<StnButtonProps, "size" | "variant" | "shape"> & {
+    /** 버튼 변형 (기본: 'ghost') */
+    variant?: StnButtonProps["variant"];
+    /** 버튼 크기 (기본: 'md') */
+    size?: StnButtonProps["size"];
+    /** 버튼 형태 (기본: 'pill') */
+    shape?: StnButtonProps["shape"];
+    /** 좌측 또는 단독 아이콘 (ReactNode 또는 아이콘명 slug) */
+    icon?: ReactNode;
+    /** 아이콘 이미지 경로 (SVG 등) */
+    iconSrc?: string;
+    /** 펼쳤을 때 표시되는 버튼 텍스트 라벨 (children 대신 지정 가능) */
+    label?: string;
+    /** 툴팁 또는 접근성 타이틀 (미지정 시 label 사용) */
+    title?: string;
+    children?: ReactNode;
+    className?: string;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type StnSideNavSubNavVariant = 'filled' | 'transparent';
+type StnSideNavSubNavDirection = 'down' | 'up';
+type StnSideNavSubNavProps = HTMLAttributes<HTMLDivElement> & {
+    /** 드롭다운(플로팅 팝오버) 모드 여부 @default false */
+    dropdown?: boolean;
+    /** 드롭다운 펼침 방향 ('down' 아래로 | 'up' 위로) @default 'down' */
+    direction?: StnSideNavSubNavDirection;
+    /** 드롭다운 배경 스타일 ('filled' 기본 배경/보더/그림자 | 'transparent' 배경 없는 투명) @default 'filled' */
+    variant?: StnSideNavSubNavVariant;
+    /** 배경 표시 여부 (false 시 variant="transparent"와 동일) @default true */
+    background?: boolean;
+    children?: ReactNode;
+};
+/**
+ * Side Navigation 서브메뉴(2depth) 컨테이너 컴포넌트 (`.stn-side-nav__subnav`)
+ * - 인라인 아코디언 서브메뉴 목록 또는 플로팅 드롭다운 서브메뉴 목록을 감싸는 전용 래퍼입니다.
+ * - `dropdown`: true 지정 시 플로팅 드롭다운 팝오버 모드로 전환됩니다.
+ * - `variant`: 'filled'(배경/보더/그림자 카드) | 'transparent'(배경 없는 투명 모드)
+ * - `background`: false 지정 시 투명 모드로 전환됩니다.
+ */
+declare const StnSideNavSubNav: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** 드롭다운(플로팅 팝오버) 모드 여부 @default false */
+    dropdown?: boolean;
+    /** 드롭다운 펼침 방향 ('down' 아래로 | 'up' 위로) @default 'down' */
+    direction?: StnSideNavSubNavDirection;
+    /** 드롭다운 배경 스타일 ('filled' 기본 배경/보더/그림자 | 'transparent' 배경 없는 투명) @default 'filled' */
+    variant?: StnSideNavSubNavVariant;
+    /** 배경 표시 여부 (false 시 variant="transparent"와 동일) @default true */
+    background?: boolean;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type StnSideNavigationVariant = 'default' | 'glassmorphism';
+type StnSideNavigationProps = HTMLAttributes<HTMLElement> & {
+    /** 사이드바 배경 및 외형 스타일 ('default' 불투명 솔리드 | 'glassmorphism' 반투명 블러) @default 'default' */
+    variant?: StnSideNavigationVariant;
+    /** variant 별칭 */
+    appearance?: StnSideNavigationVariant;
+    /** 모바일 드로어 모드에서의 배경 스타일 (미지정 시 variant 값을 상속) */
+    drawerVariant?: StnSideNavigationVariant;
+    /** drawerVariant 별칭 */
+    drawerAppearance?: StnSideNavigationVariant;
+    /** 사이드바 접힘 상태 (controlled) */
+    collapsed?: boolean;
+    /** 기본 접힘 상태 (uncontrolled) @default false */
+    defaultCollapsed?: boolean;
+    /** 접힘 상태 변경 콜백 */
+    onCollapseChange?: (collapsed: boolean) => void;
+    /** 활성화된 메뉴 아이템 id (controlled) */
+    activeId?: string;
+    /** 기본 활성 메뉴 아이템 id (uncontrolled) */
+    defaultActiveId?: string;
+    /** 메뉴 선택 변경 콜백 */
+    onActiveChange?: (activeId: string) => void;
+    /** 모바일 드로어 열림 상태 (controlled) */
+    mobileOpen?: boolean;
+    /** 기본 모바일 드로어 열림 상태 (uncontrolled) @default false */
+    defaultMobileOpen?: boolean;
+    /** 모바일 드로어 열림 상태 변경 콜백 */
+    onMobileOpenChange?: (open: boolean) => void;
+    /** 상시 드로어 모드 활성화 (화면 오버레이 슬라이드아웃 패널) @default false */
+    drawer?: boolean;
+    /** 반응형 자동 드로어 모드 (모바일 화면 <= 768px / 1024px 시 자동으로 드로어로 변환) @default true */
+    responsiveDrawer?: boolean;
+    /** 화면 좌하단 플로팅 햄버거 토글 버튼 자동 렌더 여부 @default false */
+    showMobileTrigger?: boolean;
+    children?: ReactNode;
+};
+declare const StnSideNavigation: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /** 사이드바 배경 및 외형 스타일 ('default' 불투명 솔리드 | 'glassmorphism' 반투명 블러) @default 'default' */
+    variant?: StnSideNavigationVariant;
+    /** variant 별칭 */
+    appearance?: StnSideNavigationVariant;
+    /** 모바일 드로어 모드에서의 배경 스타일 (미지정 시 variant 값을 상속) */
+    drawerVariant?: StnSideNavigationVariant;
+    /** drawerVariant 별칭 */
+    drawerAppearance?: StnSideNavigationVariant;
+    /** 사이드바 접힘 상태 (controlled) */
+    collapsed?: boolean;
+    /** 기본 접힘 상태 (uncontrolled) @default false */
+    defaultCollapsed?: boolean;
+    /** 접힘 상태 변경 콜백 */
+    onCollapseChange?: (collapsed: boolean) => void;
+    /** 활성화된 메뉴 아이템 id (controlled) */
+    activeId?: string;
+    /** 기본 활성 메뉴 아이템 id (uncontrolled) */
+    defaultActiveId?: string;
+    /** 메뉴 선택 변경 콜백 */
+    onActiveChange?: (activeId: string) => void;
+    /** 모바일 드로어 열림 상태 (controlled) */
+    mobileOpen?: boolean;
+    /** 기본 모바일 드로어 열림 상태 (uncontrolled) @default false */
+    defaultMobileOpen?: boolean;
+    /** 모바일 드로어 열림 상태 변경 콜백 */
+    onMobileOpenChange?: (open: boolean) => void;
+    /** 상시 드로어 모드 활성화 (화면 오버레이 슬라이드아웃 패널) @default false */
+    drawer?: boolean;
+    /** 반응형 자동 드로어 모드 (모바일 화면 <= 768px / 1024px 시 자동으로 드로어로 변환) @default true */
+    responsiveDrawer?: boolean;
+    /** 화면 좌하단 플로팅 햄버거 토글 버튼 자동 렌더 여부 @default false */
+    showMobileTrigger?: boolean;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLElement>> & {
+    Header: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        children?: ReactNode;
+        border?: boolean;
+        hasBorder?: boolean;
+        showToggle?: boolean;
+        showClose?: boolean;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Toggle: react.ForwardRefExoticComponent<StnSideNavToggleProps & react.RefAttributes<HTMLButtonElement>>;
+    Logo: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        logoProps?: Partial<StnLogoProps>;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Menu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        children?: ReactNode;
+        scrollSize?: StnScrollSize;
+        scrollColor?: StnScrollColor;
+    } & react.RefAttributes<HTMLElement>>;
+    Group: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        label?: ReactNode;
+        parent?: ReactNode;
+        direction?: StnSideNavGroupDirection;
+        variant?: StnSideNavGroupVariant;
+        dropdown?: boolean;
+        dropdownVariant?: StnSideNavDropdownVariant;
+        dropdownBackground?: boolean;
+        open?: boolean;
+        defaultOpen?: boolean;
+        onOpenChange?: (open: boolean) => void;
+        children?: ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<react.ButtonHTMLAttributes<HTMLButtonElement>, "children">> & {
+        label: string;
+        id?: string;
+        iconSrc?: string;
+        activeIconSrc?: string;
+        icon?: ReactNode;
+        iconPosition?: StnSideNavItemIconPosition;
+        variant?: StnSideNavItemVariant;
+        active?: boolean;
+        clicked?: boolean;
+        hovered?: boolean;
+        collapsed?: boolean;
+        showChevron?: boolean;
+        chevronOpen?: boolean;
+        chevronDirection?: "down" | "up";
+        badge?: ReactNode;
+        showBadgeDot?: boolean;
+        showSubDot?: boolean;
+        showSubIndent?: boolean;
+    } & react.RefAttributes<HTMLButtonElement>>;
+    SubNav: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        dropdown?: boolean;
+        direction?: StnSideNavSubNavDirection;
+        variant?: StnSideNavSubNavVariant;
+        background?: boolean;
+        children?: ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Spacer: react.ForwardRefExoticComponent<StnSideNavSpacerProps & react.RefAttributes<HTMLDivElement>>;
+    Sub: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        children?: ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
+    SubItem: react.ForwardRefExoticComponent<Omit<StnButtonProps, "size" | "variant" | "shape"> & {
+        variant?: StnButtonProps["variant"];
+        size?: StnButtonProps["size"];
+        shape?: StnButtonProps["shape"];
+        icon?: ReactNode;
+        iconSrc?: string;
+        label?: string;
+        title?: string;
+        children?: ReactNode;
+        className?: string;
+    } & react.RefAttributes<HTMLButtonElement>>;
+    Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        curved?: boolean;
+        children?: ReactNode;
+    } & react.RefAttributes<HTMLElement>>;
+    Watermark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        size?: StnLogoSize;
+        theme?: StnLogoTheme;
+    } & react.RefAttributes<HTMLDivElement>>;
+    MobileTrigger: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes<HTMLButtonElement> & {
+        floating?: boolean;
+        children?: ReactNode;
+    } & react.RefAttributes<HTMLButtonElement>>;
+};
+
+type StnBreadcrumbSize = 'sm' | 'md' | 'lg';
+type StnBreadcrumbVariant = 'default' | 'chip';
+/** Sibling / alternate path option shown in a segment dropdown */
+type StnBreadcrumbMenuItem = {
+    id: string;
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    /** Marks the active sibling in the menu */
+    current?: boolean;
+};
+type StnBreadcrumbItem = {
+    id: string;
+    label: string;
+    /** line icon mask src — defaults from `icon` id */
+    iconSrc?: string;
+    icon?: Exclude<StnBreadcrumbIconId, 'home' | 'separator' | 'caret'>;
+    /**
+     * Show caret and open sibling picker when `menuItems` is provided.
+     * Without `menuItems`, caret is decorative only (prefer passing `menuItems`).
+     */
+    menu?: boolean;
+    /** Dropdown options under this segment */
+    menuItems?: StnBreadcrumbMenuItem[];
+    href?: string;
+    onClick?: () => void;
+    current?: boolean;
+};
+type StnBreadcrumbProps = {
+    items: StnBreadcrumbItem[];
+    className?: string;
+    /** 크기: sm · md(기본) · lg — 클래스 `.sm` `.md` `.lg` */
+    size?: StnBreadcrumbSize;
+    /** `chip`이면 루트에 `.chip` */
+    variant?: StnBreadcrumbVariant;
+    /** 이 개수를 넘으면 중간을 `.collapsed` 버튼으로 접음 */
+    maxItems?: number;
+    itemsBeforeCollapse?: number;
+    itemsAfterCollapse?: number;
+    homeHref?: string;
+    onHomeClick?: () => void;
+    showHome?: boolean;
+    homeLabel?: string;
+    renderItem?: (item: StnBreadcrumbItem, segment: ReactNode) => ReactNode;
+};
+declare function StnBreadcrumb({ items, className, size, variant, maxItems, itemsBeforeCollapse, itemsAfterCollapse, homeHref, onHomeClick, showHome, homeLabel, renderItem, }: StnBreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+interface StnHeaderTitleDateOptions {
+    /** 요일 포함 여부 (기본 true) */
+    includeWeekday?: boolean;
+    /** 요일 표기 형식 ('short': '(화)' · 'long': '(화요일)', 기본 'short') */
+    weekdayFormat?: 'short' | 'long';
+}
+interface StnHeaderTitleTimeOptions {
+    /** 초(Seconds) 포함 여부 (기본 true, false 시 'HH:mm') */
+    showSeconds?: boolean;
+}
+declare function formatStnHeaderTitleDate(date: Date, options?: StnHeaderTitleDateOptions): string;
+declare function formatStnHeaderTitleWeekday(date: Date, format?: 'short' | 'long', wrapped?: boolean): string;
+declare function formatStnHeaderTitleTime(date: Date, options?: StnHeaderTitleTimeOptions): string;
+type StnHeaderTitleVariant = 'title' | 'dual' | 'clock';
+type StnHeaderTitleSize = 'sm' | 'md' | 'lg';
+type StnHeaderTitleBaseProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+    className?: string;
+    /** 프레임 그래픽 표시 · 기본 true · false면 텍스트만 */
+    framed?: boolean;
+    /** 글자 크기 ('sm': 24/16px · 'md': 32/18px · 'lg': 40/20px) · 기본 'md' */
+    size?: StnHeaderTitleSize;
+};
+type StnHeaderTitleTitleProps = StnHeaderTitleBaseProps & {
+    variant?: 'title';
+    /** 단일 타이틀 텍스트 (children 또는 title) */
+    title?: ReactNode;
+    children?: ReactNode;
+};
+type StnHeaderTitleDualProps = StnHeaderTitleBaseProps & {
+    variant?: 'dual';
+    /** 앞부분 일반 굵기 보조 텍스트 (18px Medium) */
+    subText?: ReactNode;
+    /** 뒷부분 굵은 메인 타이틀 텍스트 (32px SemiBold) */
+    mainText?: ReactNode;
+    /** title 또는 children도 mainText로 사용 가능 */
+    title?: ReactNode;
+    children?: ReactNode;
+};
+type StnHeaderTitleClockProps = StnHeaderTitleBaseProps & {
+    variant: 'clock';
+    /** 지정 날짜 문자열 (생략 시 현재 날짜) */
+    date?: string;
+    /** 지정 시각 문자열 (생략 시 현재 시각) */
+    time?: string;
+    /** 지정 요일 문자열 (생략 시 현재 요일 또는 날짜 포맷에 포함) */
+    weekday?: string;
+    /** 1초마다 실시간 갱신 (기본: date와 time이 모두 없을 때 true) */
+    live?: boolean;
+    /** 날짜 표시 여부 (기본 true) */
+    showDate?: boolean;
+    /** 요일 표시 여부 (기본 true, showDate=true일 때 날짜 뒤에 포함되거나 단독 표시) */
+    showWeekday?: boolean;
+    /** 시각 표시 여부 (기본 true) */
+    showTime?: boolean;
+    /** 시각 표시 시 초(Seconds) 포함 여부 (기본 true, false 시 'HH:mm') */
+    showSeconds?: boolean;
+    /** 요일 표기 형식 ('short': '(화)' · 'long': '(화요일)', 기본 'short') */
+    weekdayFormat?: 'short' | 'long';
+    /** 커스텀 날짜 포맷 함수 */
+    dateFormat?: (date: Date) => string;
+    /** 커스텀 시간 포맷 함수 */
+    timeFormat?: (date: Date) => string;
+    /** 커스텀 요일 포맷 함수 */
+    weekdayFormatFn?: (date: Date) => string;
+    /** 직접 하위 컴포넌트(StnHeaderTitle.Date, Time, Weekday 등)를 구성할 경우 */
+    children?: ReactNode;
+};
+type StnHeaderTitleProps = StnHeaderTitleTitleProps | StnHeaderTitleDualProps | StnHeaderTitleClockProps;
+/** 문서용 — 프레임 그래픽만 */
+declare function StnHeaderTitleFramePreview({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function StnHeaderTitleMainText({ className, children, ...rest }: HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function StnHeaderTitleSubText({ className, children, ...rest }: HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+declare function StnHeaderTitleDate({ className, children, ...rest }: HTMLAttributes<HTMLElement>): react_jsx_runtime.JSX.Element;
+declare function StnHeaderTitleWeekday({ className, children, ...rest }: HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+declare function StnHeaderTitleTime({ className, children, ...rest }: HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+declare function StnHeaderTitleRoot(props: StnHeaderTitleProps): react_jsx_runtime.JSX.Element;
+declare const StnHeaderTitle: typeof StnHeaderTitleRoot & {
+    Text: typeof StnHeaderTitleMainText;
+    SubText: typeof StnHeaderTitleSubText;
+    Date: typeof StnHeaderTitleDate;
+    Weekday: typeof StnHeaderTitleWeekday;
+    Time: typeof StnHeaderTitleTime;
+    Frame: typeof StnHeaderTitleFramePreview;
+};
+
+type StnContainerMaxWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+type StnContainerProps<T extends ElementType = 'div'> = {
+    /** 렌더링할 HTML 태그 또는 컴포넌트 (기본: 'div') */
+    component?: T;
+    /** @alias component */
+    as?: T;
+    /**
+     * 콘텐츠 최대 너비. 기본은 화면이 커지면 따라 늘다 이 값에서 멈춘다.
+     * - 'xs' (444px)
+     * - 'sm' (768px)
+     * - 'md' (1024px)
+     * - 'lg' (1280px)
+     * - 'xl' (1440px)
+     * - false (상한 없음)
+     * @default 'lg'
+     */
+    maxWidth?: StnContainerMaxWidth;
+    /** 좌우 패딩 거터 비활성화 여부 */
+    disableGutters?: boolean;
+    /**
+     * true면 breakpoint마다 그 구간 폭으로 고정된다. 구간 안에서는 안 늘어난다.
+     * `maxWidth`가 마지막 계단이다. 기본 `lg`면 768 → 1024 → 1280에서 멈춘다.
+     */
+    fixed?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'component' | 'children' | 'className' | 'style'>;
+/**
+ * 본문 폭을 가운데로 제한하는 컨테이너.
+ * 기본은 화면이 커지면 따라 늘다 `maxWidth`에서 멈춘다.
+ * `fixed`는 breakpoint(768 / 1024 / 1280 / 1440)마다 폭이 한 단계씩 고정된다.
+ */
+declare const StnContainer: react.ForwardRefExoticComponent<Omit<StnContainerProps<ElementType>, "ref"> & react.RefAttributes<any>>;
+
+type StnStackDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type StnStackBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** 값 하나, 또는 xs 기본 · sm 768 · md 1024 · lg 1280 · xl 1440 */
+type StnStackResponsive<T> = T | Partial<Record<StnStackBreakpoint, T>>;
+type StnStackWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+type StnStackScrollable = boolean | 'auto' | 'y' | 'x';
+type StnStackProps<T extends ElementType = 'div'> = {
+    /** 렌더링할 HTML 태그 또는 컴포넌트 (기본: 'div') */
+    component?: T;
+    /** @alias component */
+    as?: T;
+    /**
+     * 플렉스 방향. 브레이크포인트 맵이면 xs가 기본이다.
+     * `direction={{ xs: 'column', sm: 'row' }}`
+     * @default 'column'
+     */
+    direction?: StnStackResponsive<StnStackDirection>;
+    /**
+     * 아이템 간격.
+     * 숫자는 8px 스텝으로 `.stn-stack--spacing-*`가 `--stn-spacing-stack-*`를 고른다.
+     * `1` → `--stn-spacing-stack-8`. `spacing={{ xs: 1, sm: 2, md: 4 }}`
+     * @default 0
+     */
+    spacing?: StnStackResponsive<number | string>;
+    /** 가로/세로 정렬 */
+    alignItems?: CSSProperties['alignItems'];
+    /** 주축 정렬 */
+    justifyContent?: CSSProperties['justifyContent'];
+    /** 줄바꿈 여부 */
+    wrap?: StnStackWrap;
+    /**
+     * 스크롤 가능 여부 및 축
+     * - true | 'auto' | 'y': 세로 스크롤 (overflow-y: auto, overflow-x: hidden, min-height: 0, flex: 1 1 0%)
+     * - 'x': 가로 스크롤 (overflow-x: auto, overflow-y: hidden, min-width: 0)
+     */
+    scrollable?: StnStackScrollable;
+    /**
+     * 주축 방향으로 자식을 균등 분할 (`.is-fill`).
+     * L1 높이 체인 안에서 위젯·패널을 세로/가로로 나눠 채울 때 사용.
+     */
+    fill?: boolean;
+    /**
+     * 자식 사이에 끼우는 구분선. 선 자체에는 간격을 넣지 않습니다.
+     * `spacing`(gap)이 선 양쪽에 그대로 적용됩니다.
+     */
+    divider?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'component' | 'children' | 'className' | 'style'>;
+/**
+ * 1차원 Flex 스택 레이아웃 컴포넌트.
+ * 수직/수평 방향(direction), 간격(spacing), 구분선(divider)을 쉽게 다룰 수 있습니다.
+ */
+declare const StnStack: react.ForwardRefExoticComponent<Omit<StnStackProps<ElementType>, "ref"> & react.RefAttributes<any>>;
+
+type StnGridBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** 숫자 또는 브레이크포인트 맵. xs는 기본, sm 768 · md 1024 · lg 1280 · xl 1440 */
+type StnGridResponsive<T> = T | Partial<Record<StnGridBreakpoint, T>>;
+/**
+ * MUI spacing 스텝. 8px 단위로 `--stn-spacing-grid-*`에 연결된다.
+ * 0 → 0, 0.5 → 4, 1 → 8, 2 → 16, 3 → 24, 4 → 32, 8 → 64, 12 → 96
+ */
+type StnGridSpacing = 0 | 0.5 | 1 | 2 | 3 | 4 | 8 | 12;
+type StnGridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+/** 12열 기준 칸 수, 남는 폭을 나누는 grow, 콘텐츠 폭 auto */
+type StnGridSize = number | 'grow' | 'auto';
+type StnGridProps<T extends ElementType = 'div'> = {
+    /** 렌더링할 HTML 태그 또는 컴포넌트 (기본: 'div') */
+    component?: T;
+    /** @alias component */
+    as?: T;
+    /** true면 그리드 컨테이너 */
+    container?: boolean;
+    /**
+     * 열 수. 기본 12.
+     * `columns={{ xs: 4, sm: 8, md: 12 }}`
+     */
+    columns?: StnGridResponsive<number>;
+    /**
+     * 행·열 간격 스텝. `--stn-spacing-grid-*`를 사용한다.
+     * `spacing={2}` → `var(--stn-spacing-grid-16)`
+     */
+    spacing?: StnGridResponsive<StnGridSpacing>;
+    /** 행 간격. 없으면 spacing을 따른다 */
+    rowSpacing?: StnGridResponsive<StnGridSpacing>;
+    /** 열 간격. 없으면 spacing을 따른다 */
+    columnSpacing?: StnGridResponsive<StnGridSpacing>;
+    /**
+     * 칸 너비. 12열 기준 숫자, 남는 폭을 나누는 grow, 콘텐츠 폭 auto.
+     * `size={8}` · `size="grow"` · `size="auto"` · `size={{ xs: 6, md: 'grow' }}`
+     */
+    size?: StnGridResponsive<StnGridSize>;
+    /**
+     * 정렬 축. 지정하면 flex wrap 컨테이너가 된다.
+     * row · row-reverse · column · column-reverse
+     */
+    direction?: StnGridDirection;
+    /** 주축 정렬. flex-start · center · flex-end · space-between · space-around · space-evenly */
+    justifyContent?: CSSProperties['justifyContent'];
+    /** 교차축 정렬. flex-start · center · flex-end · stretch · baseline */
+    alignItems?: CSSProperties['alignItems'];
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'component' | 'children' | 'className' | 'style'>;
+/**
+ * 12열 flex 그리드. 컨테이너와 칸을 같은 컴포넌트로 쓴다.
+ */
+declare const StnGrid: react.ForwardRefExoticComponent<Omit<StnGridProps<ElementType>, "ref"> & react.RefAttributes<any>>;
+
+type StnLayerShellProps = {
+    /** L1 Main UI — 사이드 내비게이션 레일 (StnSideNavigation 등) */
+    gnb?: ReactNode;
+    /** L1 Main UI — 사이드 네비 위치 @default 'left' */
+    gnbSide?: StnLnbSide;
+    /** L1 Main UI — 상단 바 (StnHeader 등) · 네비 제외 영역 */
+    header?: ReactNode;
+    /** L1 Content 본문 — layer1 미지정 시 children 사용 */
+    children?: ReactNode;
+    /** 루트 래퍼 id */
+    wrapId?: string;
+    /** 루트 래퍼 추가 클래스명 */
+    wrapClassName?: string;
+    /** L1 Content 컨테이너 id */
+    containerId?: string;
+    /** L1 Content 컨테이너 추가 클래스명 */
+    containerClassName?: string;
+    /** 본문 추가 클래스명 */
+    contentClassName?: string;
+    /** LNB·데이터 트리 열 위치 */
+    lnbSide?: StnLnbSide;
+    /** 본문 스크롤 허용 여부 (기본: true). 화면 높이 초과 시 내부 스크롤 허용 */
+    scrollable?: boolean | 'auto' | 'y' | 'x';
+    /** L0 배경 레이어 — `StnLayer.Background` / `StnLayer0Background` 등 (z-index: 0) */
+    layer0?: ReactNode;
+    /** L1 메인 화면 본문 — `children`의 명시적 3단계 층위 슬롯 명칭 (z-index: 100) */
+    layer1?: ReactNode;
+    /** L2 모달 다이얼로그 — `StnPopup` 등 (Dim 스크림 내장, z-index: 200) */
+    layer2?: ReactNode;
+    /** toast · audio 등 유틸리티 오버레이 — `data-stn-layer-role="utility"` */
+    utilities?: ReactNode;
+};
+/**
+ * StnLayer role 기반 페이지 셸 — 3단계 층위 표준:
+ * L0 Background · L1 Main UI (사이드바 + 우측 헤더/본문 스택 2분할 구조) · L2 Modal
+ */
+declare function StnLayerShell({ gnb, gnbSide, header, children, wrapId, wrapClassName, containerId, containerClassName, contentClassName, lnbSide: _lnbSide, scrollable, layer0, layer1, layer2, utilities, }: StnLayerShellProps): react_jsx_runtime.JSX.Element;
+
+type StnListViewLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    /**
+     * `StnLayerShell` / `ListPageScaffold` 안에서 쓸 때 `true`.
+     * L0 · GNB · Header · `stn-content-area` 래퍼 없이
+     * `StnPageScaffold`(LNB · search · table)만 렌더합니다.
+     * @alias noShell
+     */
+    bare?: boolean;
+    /** @deprecated `bare` 사용 */
+    noShell?: boolean;
+    /** 페이지 타이틀 (header 미지정 시 기본 StnHeader에 전달) */
+    title?: string;
+    /** 상단 헤더 슬롯 (null 전달 시 헤더 안 함). `bare`일 때는 무시(셸이 담당) */
+    header?: ReactNode | null;
+    /** 검색 조건 슬롯 (StnSearchRequirementBar 등) */
+    search?: ReactNode;
+    /** LNB 사이드바 슬롯 (StnSectionSide + StnTree 등) */
+    sidebar?: ReactNode;
+    /** 메인 데이터 테이블 슬롯 (StnTable 등) */
+    table?: ReactNode;
+    /** 테이블 하단 페이징 슬롯 (StnPagination 등) */
+    pagination?: ReactNode;
+    /** LNB 위치 — 'left' | 'right' (기본 'left') */
+    lnbSide?: 'left' | 'right';
+    /** 커스텀 본문 (search, table, pagination 조합 대신 직접 전달할 때) */
+    children?: ReactNode;
+};
+type StnListViewLayoutBodyProps = Pick<StnListViewLayoutProps, 'search' | 'sidebar' | 'table' | 'pagination' | 'lnbSide' | 'children' | 'className'>;
+/** L1 listview 그리드 — `StnLayerShell` `stn-content-area` 직하위 또는 `bare` 루트 */
+declare function StnListViewLayoutBody({ search, sidebar, table, pagination, lnbSide, children, className, }: StnListViewLayoutBodyProps): react_jsx_runtime.JSX.Element;
+declare function StnListViewLayoutRoot({ bare: bareProp, noShell, title, header, search, sidebar, table, pagination, lnbSide, children, className, ...rest }: StnListViewLayoutProps): react_jsx_runtime.JSX.Element;
+declare function StnListViewLayoutHeader({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function StnListViewLayoutSearch({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function StnListViewLayoutSidebar({ side, className, children, ...rest }: HTMLAttributes<HTMLElement> & {
+    side?: 'left' | 'right';
+}): react_jsx_runtime.JSX.Element;
+declare function StnListViewLayoutContent({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function StnListViewLayoutTable({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function StnListViewLayoutPagination({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare const StnListViewLayout: typeof StnListViewLayoutRoot & {
+    Body: typeof StnListViewLayoutBody;
+    Header: typeof StnListViewLayoutHeader;
+    Search: typeof StnListViewLayoutSearch;
+    Sidebar: typeof StnListViewLayoutSidebar;
+    Content: typeof StnListViewLayoutContent;
+    Table: typeof StnListViewLayoutTable;
+    Pagination: typeof StnListViewLayoutPagination;
+};
+
+type StnLayerProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
+    /** L0~L4 · map — 고정 z-index 층 */
+    level: StnElevationLevel;
+    /**
+     * Infomap 화면 역할. 미지정 시 level 기본값(0→background · 1→content · 2→modal).
+     * `StnLayer.Dim` 은 같은 L2 elevation이어도 role이 달라야 함.
+     */
+    role?: StnLayerRole | 'map';
+    /**
+     * 면 채움 방식. 기본: L0=default, L1~L4=transparent(투명 셸).
+     * - widget / panel: L1 카드·패널 + shadow.2
+     * - solid: 레벨 surface-N (L2~L4 선택)
+     * - gnb: L2 GNB 투명 크롬
+     * - dim: L3 딤 스크림 (--stn-dim-bg)
+     */
+    surface?: StnLayerSurface;
+    /** solid·widget·panel 에 elevation shadow 적용 (L1 widget/panel은 기본 on) */
+    withShadow?: boolean;
+    className?: string;
+    children?: ReactNode;
+};
+/** role 별칭 — level은 역할에서 고정 */
+type StnLayerRoleProps = Omit<StnLayerProps, 'level' | 'role'>;
+/**
+ * Elevation 레이어(도화지) — z-index 층을 고정하고, 면·shadow는 surface로 선택.
+ * Pub: `stn-elev-{0-4}` + `stn-elev--shell|--panel|--solid|--dim|…`
+ *
+ * 역할: `StnLayer.Background` · `Content` · `Dim` · `Modal` (flat `StnLayerBackground` …)
+ */
+declare const StnLayerRoot: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "className"> & {
+    /** L0~L4 · map — 고정 z-index 층 */
+    level: StnElevationLevel;
+    /**
+     * Infomap 화면 역할. 미지정 시 level 기본값(0→background · 1→content · 2→modal).
+     * `StnLayer.Dim` 은 같은 L2 elevation이어도 role이 달라야 함.
+     */
+    role?: StnLayerRole | "map";
+    /**
+     * 면 채움 방식. 기본: L0=default, L1~L4=transparent(투명 셸).
+     * - widget / panel: L1 카드·패널 + shadow.2
+     * - solid: 레벨 surface-N (L2~L4 선택)
+     * - gnb: L2 GNB 투명 크롬
+     * - dim: L3 딤 스크림 (--stn-dim-bg)
+     */
+    surface?: StnLayerSurface;
+    /** solid·widget·panel 에 elevation shadow 적용 (L1 widget/panel은 기본 on) */
+    withShadow?: boolean;
+    className?: string;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const StnLayerBackground: react.ForwardRefExoticComponent<StnLayerRoleProps & react.RefAttributes<HTMLDivElement>>;
+declare const StnLayerContent: react.ForwardRefExoticComponent<StnLayerRoleProps & react.RefAttributes<HTMLDivElement>>;
+declare const StnLayerDim: react.ForwardRefExoticComponent<StnLayerRoleProps & react.RefAttributes<HTMLDivElement>>;
+declare const StnLayerModal: react.ForwardRefExoticComponent<StnLayerRoleProps & react.RefAttributes<HTMLDivElement>>;
+type StnLayerComponent = typeof StnLayerRoot & {
+    Background: typeof StnLayerBackground;
+    Content: typeof StnLayerContent;
+    Dim: typeof StnLayerDim;
+    Modal: typeof StnLayerModal;
+};
+declare const StnLayer: StnLayerComponent;
+
+type StnPageScaffoldRootProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+/** 페이지 뼈대 루트 — 구역 조립용 래퍼 (로딩 UI 아님) */
+declare function StnPageScaffoldRoot({ children, className, ...rest }: StnPageScaffoldRootProps): react_jsx_runtime.JSX.Element;
+type StnPageScaffoldRegionProps = HTMLAttributes<HTMLDivElement> & {
+    label: string;
+    hint?: string;
+    children?: ReactNode;
+    className?: string;
+};
+/** 빈 구역 라벨 — LNB·search·팝업 본문 등 */
+declare function StnPageScaffoldRegion({ label, hint, children, className, ...rest }: StnPageScaffoldRegionProps): react_jsx_runtime.JSX.Element;
+type StnPageScaffoldMapPlaceholderProps = HTMLAttributes<HTMLDivElement> & {
+    message?: string;
+    note?: string;
+    className?: string;
+};
+/** 맵·토폴로지 자리 — 실제 맵 JS 대신 안내 박스 */
+declare function StnPageScaffoldMapPlaceholder({ message, note, className, children, ...rest }: StnPageScaffoldMapPlaceholderProps): react_jsx_runtime.JSX.Element;
+type StnPageScaffoldMapCanvasProps = HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+};
+/** 맵·토폴로지 마운트 — L0 배경만 보이는 빈 본문 (placeholder 박스 없음) */
+declare function StnPageScaffoldMapCanvas({ className, children, ...rest }: StnPageScaffoldMapCanvasProps): react_jsx_runtime.JSX.Element;
+type StnPageScaffoldLayerProps = StnLayerProps & {
+    /** DS·개발용 구역 라벨 (L3 팝업 본문 등) */
+    label?: string;
+    hint?: string;
+};
+/**
+ * StnLayer + 뼈대 슬롯 — 예: L3 팝업 층에 “여기 본문” 표시
+ * elevation은 StnLayer가 담당, 레이아웃 구역은 Page scaffold.
+ */
+declare function StnPageScaffoldLayer({ label, hint, children, className, ...layerProps }: StnPageScaffoldLayerProps): react_jsx_runtime.JSX.Element;
+/** 토스 ListRow.AssetIcon 스타일 — StnPageScaffold.Region 조합 */
+declare const StnPageScaffold: typeof StnPageScaffoldRoot & {
+    Region: typeof StnPageScaffoldRegion;
+    MapPlaceholder: typeof StnPageScaffoldMapPlaceholder;
+    MapCanvas: typeof StnPageScaffoldMapCanvas;
+    Layer: typeof StnPageScaffoldLayer;
+};
+type ListPageScaffoldProps = Omit<StnLayerShellProps, 'children' | 'header'> & {
+    /** L1 Main UI — 사이드 네비 (StnSideNavigation) */
+    gnb?: ReactNode;
+    /**
+     * L1 Main UI — App header (`StnHeader` page 등).
+     * `null`이면 헤더 없음. Map과 같이 `StnHeader` 전달 가능.
+     */
+    header?: ReactNode | null;
+    /** `header` 미지정 시 page title 기본값 */
+    title?: string;
+    lnbHint?: string;
+    searchHint?: string;
+    tableHint?: string;
+    /** false면 LNB 영역 미렌더 */
+    showLnb?: boolean;
+    /** `lnb_box` 슬롯 — 미지정 시 placeholder Region (보통 `StnSectionSide` + `StnTree`) */
+    lnb?: ReactNode;
+    /** `search_area` 슬롯 — 미지정 시 placeholder Region */
+    search?: ReactNode;
+    /** false면 search_area 미렌더 (has_sch는 호출측에서 빼세요) */
+    showSearch?: boolean;
+    children?: ReactNode;
+    /** @deprecated StnLayerShell이 기본 표준 셸입니다. 생략 가능합니다. */
+    shell?: 'layer';
+    /** LNB 열 위치 — `has_lnb` ↔ `has_lnb_right` 자동 치환 (layer 셸) */
+    lnbSide?: StnLnbSide;
+    /** L0 배경 — `StnLayer0Background` 등 */
+    layer0?: ReactNode;
+    /** L1 메인 화면 본문 — `children`의 명시적 레이어 슬롯 명칭 */
+    layer1?: ReactNode;
+    /** L2 모달 다이얼로그 — `StnPopup` 등 (Dim 스크림 내장) */
+    layer2?: ReactNode;
+};
+/** interface_list 계열 — Header · LNB · search · table 구역 */
+declare function ListPageScaffold({ gnb, header, title, lnbHint, searchHint, tableHint, showLnb, lnb, search, showSearch, children, lnbSide, scrollable, layer0, layer1, layer2, ...shellProps }: ListPageScaffoldProps & {
+    scrollable?: boolean | 'auto' | 'y' | 'x';
+}): react_jsx_runtime.JSX.Element;
+type DashboardType = 'map' | 'topology' | 'widget-grid';
+type DashboardPageScaffoldProps = Omit<StnLayerShellProps, 'children' | 'header' | 'layer1'> & {
+    /** 대시보드 스펙 구분자 — 'map' (GIS/맵) | 'topology' (네트워크 토폴로지) | 'widget-grid' (자유 위젯 그리드) */
+    type?: DashboardType;
+    /** L1 content 본문 커스텀 — 미지정 시 left/right/MapPlaceholder 로 `.dashboard` 조립. layer1 슬롯을 따로 두지 않음 */
+    children?: ReactNode;
+    gnb: ReactNode;
+    header?: ReactNode;
+    mapMessage?: string;
+    mapNote?: string;
+    kind?: 'map' | 'topology' | 'canvas';
+    left?: ReactNode | null;
+    right?: ReactNode | null;
+    faultPanel?: ReactNode;
+    /** 위젯 패널 배치 위치 — 'right' (우측) | 'left' (좌측) | 'both' (양쪽) | 'none' (없음 - 100% Full Map) */
+    widgetPosition?: 'right' | 'left' | 'both' | 'none';
+    /** 우측 `stn-page-scaffold__region` / `dashboard_right` 영역 표시 여부 (기본 true, false 시 100% Full Map) */
+    showRightRegion?: boolean;
+    /**
+     * L1 content 비움 — `.dashboard` 자식 없이 L0 배경만
+     * (`stn-dashboard--empty`)
+     */
+    bodyEmpty?: boolean;
+    wrapClassName?: string;
+    /** 본문 Container 스크롤 가능 여부 (기본: true). 초과 컨텐츠 시 내부 스크롤 허용 */
+    scrollable?: boolean | 'auto' | 'y' | 'x';
+    /** @deprecated StnLayerShell이 기본 표준 셸입니다. 생략 가능합니다. */
+    shell?: 'layer';
+    /** L0 배경 — `StnLayer0Background` */
+    layer0?: ReactNode;
+    /** L2 모달 / 팝업 다이얼로그 (StnPopup 등) */
+    layer2?: ReactNode;
+};
+/** 대시보드 공통 스캐폴드 — type('map' | 'topology' | 'widget-grid')에 맞춰 Header/GNB/캔버스/L0 자동 매핑.
+ * L1 `.stn-layer-1`: 좌측 사이드바 + 우측 본문 스택(Header + Grid) 2분할 구조.
+ */
+declare function DashboardPageScaffold({ type, children, gnb, header, mapMessage, mapNote, kind, left, right, faultPanel, widgetPosition, showRightRegion, bodyEmpty, wrapClassName, scrollable, layer0, layer2, ...shellProps }: DashboardPageScaffoldProps): react_jsx_runtime.JSX.Element;
+
+type AlertCenterPageScaffoldProps = Omit<DashboardPageScaffoldProps, 'gnb' | 'right' | 'faultPanel' | 'mapMessage' | 'mapNote'> & {
+    /** 알림 패널 — 미지정 시 데모 StnAlertCenterPanel */
+    gnbAlertPanel?: ReactNode;
+    defaultAlertOpen?: boolean;
+    mapMessage?: string;
+    mapNote?: string;
+    /** `.real_time_fault_status` 자리 placeholder */
+    showFaultPanelPlaceholder?: boolean;
+    faultPanel?: ReactNode;
+    /** 우측 4위젯 — 기본 AlertCenterDashboard */
+    right?: ReactNode;
+    clock?: ReactNode;
+    gnb?: ReactNode;
+    defaultGnbOpen?: boolean;
+};
+/**
+ * `alert_center.html` 1단계 페이지 뼈대 — 맵 빈 칸 + 사이드바·알림 + 헤더(StnHeader widget) + 우측 위젯
+ */
+declare function AlertCenterPageScaffold({ gnbAlertPanel, defaultAlertOpen: _defaultAlertOpen, mapMessage, mapNote, showFaultPanelPlaceholder, faultPanel, right, clock, header, wrapId, gnb: gnbProp, defaultGnbOpen, ...shellProps }: AlertCenterPageScaffoldProps): react_jsx_runtime.JSX.Element;
+
+type LoginPageScaffoldProps = Omit<StnLayerShellProps, 'children' | 'gnb' | 'header' | 'layer1' | 'layer2'> & {
+    /** L0 배경 — 기본 `StnLayer0Background variant="login"` */
+    layer0?: ReactNode;
+    /** 기본 카드의 로고 — `children`을 넘기면 무시 */
+    logo?: ReactNode;
+    productCaption?: string;
+    /** 카드 테두리 회전 레이저 빔 애니메이션 여부 */
+    cardGlow?: boolean;
+    /** 카드 스타일 변형 ('default' | 'glow') */
+    cardVariant?: StnLoginCardVariant;
+    /** 소셜 로그인 탭 선택 시 노출할 커스텀 콘텐츠. 미지정 시 기본 `<StnLoginPlaceholder />` 노출 */
+    socialContent?: ReactNode;
+    /** L1 카드. 기본은 `StnLoginCard` + 기본 폼. 직접 넘기면 카드 전체를 교체 */
+    children?: ReactNode;
+    onLogin?: (id: string, password: string) => void;
+    signUpHref?: string;
+    recoverHref?: string;
+};
+/**
+ * Login 화면 레시피 — L0 + L1 중앙. 카드는 `StnLoginCard`, 배경은 `StnLayer0Background`.
+ */
+declare function LoginPageScaffold({ layer0, logo, productCaption, cardGlow, cardVariant, socialContent, children, wrapClassName, onLogin, signUpHref, recoverHref, ...shellProps }: LoginPageScaffoldProps): react_jsx_runtime.JSX.Element;
+
+type StnMapCanvasProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * 맵·토폴로지·차트 캔버스 마운트 컨테이너 컴포넌트
+ * `.stn-map-canvas`를 제공하여 GIS 엔진 및 토폴로지 라이브러리를 안전하게 마운트합니다.
+ */
+declare function StnMapCanvas({ children, className, ...rest }: StnMapCanvasProps): react_jsx_runtime.JSX.Element;
+
+type StnDashboardWidgetPosition = 'right' | 'left' | 'both' | 'none';
+type StnDashboardProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+    /** 위젯 패널 위치 — 기본값 'right' */
+    widgetPosition?: StnDashboardWidgetPosition;
+    /** 빈 대시보드 상태 (L0 배경만 노출) */
+    empty?: boolean;
+};
+type StnDashboardRegionProps = HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode;
+    className?: string;
+};
+declare function StnDashboardRoot({ children, className, widgetPosition, empty, style, ...rest }: StnDashboardProps): react_jsx_runtime.JSX.Element;
+declare function StnDashboardLeft({ children, className, style, ...rest }: StnDashboardRegionProps): react_jsx_runtime.JSX.Element;
+declare function StnDashboardRight({ children, className, style, ...rest }: StnDashboardRegionProps): react_jsx_runtime.JSX.Element;
+declare function StnDashboardTopRight({ children, className, ...rest }: StnDashboardRegionProps): react_jsx_runtime.JSX.Element;
+/**
+ * 대시보드 레이아웃 — Pub 클래스(`.dashboard` / `_left` / `_right`)
+ * Compound: `Left` · `Right` · `TopRight` · `Canvas`
+ */
+declare const StnDashboard: typeof StnDashboardRoot & {
+    Root: typeof StnDashboardRoot;
+    Left: typeof StnDashboardLeft;
+    Right: typeof StnDashboardRight;
+    TopRight: typeof StnDashboardTopRight;
+    Canvas: typeof StnMapCanvas;
+};
+
+type StnLoadingSkeletonVariant = 'line' | 'circle' | 'block' | 'profile' | 'widget' | 'table';
+type StnLoadingSkeletonLineProps = HTMLAttributes<HTMLDivElement> & {
+    width?: 'full' | 'medium' | 'short';
+    className?: string;
+    style?: CSSProperties;
+};
+declare function StnLoadingSkeletonLine({ width, className, style, ...rest }: StnLoadingSkeletonLineProps): react_jsx_runtime.JSX.Element;
+type StnLoadingSkeletonBlockProps = HTMLAttributes<HTMLDivElement> & {
+    minHeight?: number | string;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function StnLoadingSkeletonBlock({ minHeight, className, style, ...rest }: StnLoadingSkeletonBlockProps): react_jsx_runtime.JSX.Element;
+type StnLoadingSkeletonCircleProps = HTMLAttributes<HTMLDivElement> & {
+    size?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function StnLoadingSkeletonCircle({ size, className, style, ...rest }: StnLoadingSkeletonCircleProps): react_jsx_runtime.JSX.Element;
+type StnLoadingSkeletonProfileProps = HTMLAttributes<HTMLDivElement> & {
+    /** 아바타 원형 크기 (기본: 40px) */
+    avatarSize?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function StnLoadingSkeletonProfile({ avatarSize, className, style, ...rest }: StnLoadingSkeletonProfileProps): react_jsx_runtime.JSX.Element;
+type StnLoadingSkeletonWidgetProps = HTMLAttributes<HTMLDivElement> & {
+    lines?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+/** 위젯 본문 로딩 — StnWidget children 자리 */
+declare function StnLoadingSkeletonWidget({ lines, className, style, ...rest }: StnLoadingSkeletonWidgetProps): react_jsx_runtime.JSX.Element;
+type StnLoadingSkeletonTableProps = HTMLAttributes<HTMLDivElement> & {
+    rows?: number;
+    cols?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function StnLoadingSkeletonTable({ rows, cols, className, style, ...rest }: StnLoadingSkeletonTableProps): react_jsx_runtime.JSX.Element;
+type StnLoadingSkeletonProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * 스켈레톤 형태:
+     * - 'line': 텍스트 라인 (기본)
+     * - 'circle': 원형 아바타 / 아이콘
+     * - 'block': 카드 / 차트 / 배너 면 영역
+     * - 'profile': 아바타 + 2줄 텍스트 복합 프리셋
+     * - 'widget': 위젯용 다중 라인
+     * - 'table': 그리드형 테이블 프리셋
+     */
+    variant?: StnLoadingSkeletonVariant;
+    /** variant="line" 전용: 가로 너비 ('full' | 'medium' | 'short') */
+    width?: 'full' | 'medium' | 'short';
+    /** variant="circle" 및 "profile" 아바타 크기 (px) */
+    size?: number;
+    avatarSize?: number;
+    /** variant="block" 전용: 최소 높이 (px 또는 string) */
+    minHeight?: number | string;
+    /** variant="widget" 전용: 라인 수 */
+    lines?: number;
+    /** variant="table" 전용: 행/열 수 */
+    rows?: number;
+    cols?: number;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+};
+/**
+ * StnLoadingSkeleton
+ * 단일 컴포넌트에 variant prop을 지정하거나, children을 넘겨 복합 레이아웃 컨테이너로 사용합니다.
+ * 하위 호환을 위해 StnLoadingSkeleton.Line 등의 서브컴포넌트도 동일하게 지원합니다.
+ */
+declare function StnLoadingSkeletonRoot({ variant, width, size, avatarSize, minHeight, lines, rows, cols, children, className, style, ...rest }: StnLoadingSkeletonProps): react_jsx_runtime.JSX.Element;
+/** 로딩 스켈레톤 UI — 단일 컴포넌트(<StnLoadingSkeleton variant="..." />) 또는 서브컴포넌트 네임스페이스 지원 */
+declare const StnLoadingSkeleton: typeof StnLoadingSkeletonRoot & {
+    Line: typeof StnLoadingSkeletonLine;
+    Block: typeof StnLoadingSkeletonBlock;
+    Circle: typeof StnLoadingSkeletonCircle;
+    Profile: typeof StnLoadingSkeletonProfile;
+    Widget: typeof StnLoadingSkeletonWidget;
+    Table: typeof StnLoadingSkeletonTable;
+};
+/** 레거시 RootProps 호환 alias */
+type StnLoadingSkeletonRootProps = StnLoadingSkeletonProps;
+
+type StnToolbarOrientation = 'horizontal' | 'vertical';
+type StnFloatingToolbarPlacement = 'none' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-right' | 'center-left' | 'center-right';
+interface StnFloatingToolbarProps extends react__default.HTMLAttributes<HTMLDivElement> {
+    /** 캔버스 기준 고정 위치 (기본값: 'none' - 인라인 플렉스) */
+    placement?: StnFloatingToolbarPlacement;
+    /** 툴바 방향 (기본값: 'horizontal') */
+    orientation?: StnToolbarOrientation;
+    /** 추가 클래스 */
+    className?: string;
+    children?: react__default.ReactNode;
+}
+interface StnMapToolbarProps extends StnFloatingToolbarProps {
+    /** 뷰 모드 드롭다운 옵션 (미지정 시 기본 ['구면', '평면', '원형'] 제공) */
+    modeOptions?: StnDropdownOption[];
+    /** 현재 선택된 뷰 모드 값 */
+    modeValue?: string;
+    /** 뷰 모드 변경 콜백 */
+    onModeChange?: (value: string) => void;
+    /** 드롭다운 너비 (기본값: 110px) */
+    dropdownWidth?: number | string;
+    /** 툴바 버튼 스타일 (기본값: 'ghost') */
+    buttonVariant?: 'ghost' | 'outlined';
+    /** 초기화(Restore) 버튼 클릭 핸들러 */
+    onRestore?: () => void;
+    /** 전체화면(Fullscreen) 버튼 클릭 핸들러 */
+    onFullscreen?: () => void;
+    /** 확대(Zoom In) 버튼 클릭 핸들러 */
+    onZoomIn?: () => void;
+    /** 축소(Zoom Out) 버튼 클릭 핸들러 */
+    onZoomOut?: () => void;
+    /** 새로고침(Refresh) 버튼 클릭 핸들러 */
+    onRefresh?: () => void;
+    /** 추가 커스텀 액션 버튼들 */
+    extraActions?: react__default.ReactNode;
+}
+/**
+ * StnFloatingToolbar
+ * 지도, 차트, 토폴로지 캔버스 위에 플로팅되는 툴바 컨테이너입니다.
+ */
+declare const StnFloatingToolbar: react__default.ForwardRefExoticComponent<StnFloatingToolbarProps & react__default.RefAttributes<HTMLDivElement>>;
+/**
+ * StnMapToolbar
+ * mockup/index.html의 토폴로지/지도 하단 툴바(topo-toolbar-container)를
+ * 완벽히 재현한 통합 패턴 컴포넌트입니다.
+ * 32px 드롭다운과 4px 각진 아이콘 버튼(StnButton shape="square")으로 구성됩니다.
+ */
+declare const StnMapToolbar: react__default.ForwardRefExoticComponent<StnMapToolbarProps & react__default.RefAttributes<HTMLDivElement>>;
+type StnFloatingToolbarPresetProps = StnMapToolbarProps;
+declare const StnFloatingToolbarPreset: react__default.ForwardRefExoticComponent<StnMapToolbarProps & react__default.RefAttributes<HTMLDivElement>>;
+
+type StnEventBannerPlacement = 'top' | 'bottom' | 'inline';
+type StnEventBannerSeverity = 'critical' | 'major' | 'minor' | 'warning';
+/** 위젯과 배너 사이. 시맨틱 스페이스 토큰 space-0 / 4 / 8 / 16. 기본은 `--stn-spacing-event-banner-gap` */
+type StnEventBannerGap = 0 | 4 | 8 | 16;
+interface StnEventBannerProps extends Omit<react__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** 위험도 레벨: 'critical' | 'major' | 'minor' | 'warning' (기본값: 'critical') */
+    severity?: StnEventBannerSeverity;
+    /** 경보 메인 타이틀 (예: 'DISK 임계치 92.4% 초과', 'CPU/MEM 자원 사용률 초과') */
+    title?: react__default.ReactNode;
+    /** 발생 시간 또는 부가 정보 (예: '발생 시간 09:25:11') */
+    time?: react__default.ReactNode;
+    /** 우측 액션 버튼 텍스트 (예: '이벤트 정보') */
+    actionText?: react__default.ReactNode;
+    /** 우측 액션 버튼 클릭 핸들러 */
+    onAction?: (e: react__default.MouseEvent<HTMLButtonElement>) => void;
+    /** 커스텀 좌측 아이콘 (미지정 시 위험도별 기본 시스템 아이콘) */
+    icon?: react__default.ReactNode;
+    /** 배치. top/bottom은 위젯 바깥 위·아래에 자리를 차지하지 않음. inline은 흐름 안에 둠 */
+    placement?: StnEventBannerPlacement;
+    /** 위젯과의 간격. 0=붙임, 4/8/16은 `--stn-space-*`. 생략하면 `--stn-spacing-event-banner-gap` */
+    gap?: StnEventBannerGap;
+    /** 네온 인셋 숨쉬기 애니메이션 활성화 여부 (기본값: true) */
+    blink?: boolean;
+    /** 우측 추가 커스텀 액션 컨트롤 */
+    actions?: react__default.ReactNode;
+    /** 닫기 버튼 핸들러 (지정 시 닫기 버튼 노출) */
+    onClose?: (e: react__default.MouseEvent<HTMLButtonElement>) => void;
+    /** 추가 클래스 */
+    className?: string;
+    /** 인라인 스타일 */
+    style?: react__default.CSSProperties;
+}
+/** 위험도별 이벤트 배너. placement와 severity로 배치·스타일을 고릅니다. */
+declare const StnEventBanner: react__default.ForwardRefExoticComponent<StnEventBannerProps & react__default.RefAttributes<HTMLDivElement>>;
+
+export { AlertCenterDashboard, type AlertCenterDashboardProps, AlertCenterPageScaffold, type AlertCenterPageScaffoldProps, DashboardPageScaffold, type DashboardPageScaffoldProps, type DashboardType, ListPageScaffold, type ListPageScaffoldProps, LoginPageScaffold, type LoginPageScaffoldProps, PubChartSample, type PubDisabilityStatusItem, PubDisabilityStatusList, type PubTop5BarRow, PubTop5EquipmentBars, type PubTrafficTop5BarRow, PubTrafficTop5Bars, STN_TABLE_FOOTER_MAX_ACTIONS, STN_TOPOLOGY_NODE_ICONS, STN_TOPOLOGY_NODE_SHAPES, STN_TOPOLOGY_NODE_SIZE, STN_TOPOLOGY_NODE_SIZES, STN_TOPOLOGY_NODE_STATUSES, STN_TOPOLOGY_STATUS_COLORS, SideNavContext, type SideNavContextValue, StnAlertCenterDocPreview, type StnAlertCenterDocPreviewProps, StnAlertCenterPanel, type StnAlertCenterPanelProps, StnBadge, type StnBadgeAnchorOrigin, type StnBadgeColor, type StnBadgeProps, type StnBadgeVariant, StnBreadcrumb, type StnBreadcrumbItem, type StnBreadcrumbMenuItem, type StnBreadcrumbProps, type StnBreadcrumbSize, type StnBreadcrumbVariant, StnButton, type StnButtonColor, type StnButtonIconPosition, type StnButtonProps, type StnButtonShape, type StnButtonSize, type StnButtonVariant, StnCheckbox, type StnCheckboxColor, type StnCheckboxLabelPlacement, type StnCheckboxProps, type StnCheckboxSize, StnChip, type StnChipColor, type StnChipIconPosition, type StnChipLabelPosition, type StnChipProps, type StnChipShape, type StnChipSize, type StnChipVariant, StnCircularProgress, type StnCircularProgressGradient, type StnCircularProgressLabelPosition, type StnCircularProgressProps, type StnCircularProgressSize, type StnCircularProgressTone, type StnCircularProgressTrack, StnContainer, type StnContainerMaxWidth, type StnContainerProps, StnContext, type StnContextValue, StnDashboard, type StnDashboardProps, type StnDashboardRegionProps, type StnDashboardWidgetPosition, StnDateRangeField, type StnDateRangeFieldProps, StnDateRangePicker, StnDateRangePickerField, type StnDateRangePickerFieldProps, type StnDateRangePickerProps, StnDropdown, StnDropdownMenu, type StnDropdownMenuProps, type StnDropdownProps, StnEventBanner, type StnEventBannerGap, type StnEventBannerPlacement, type StnEventBannerProps, type StnEventBannerSeverity, StnFloatingToolbar, type StnFloatingToolbarPlacement, StnFloatingToolbarPreset, type StnFloatingToolbarPresetProps, type StnFloatingToolbarProps, StnGrid, type StnGridBreakpoint, type StnGridDirection, type StnGridProps, type StnGridResponsive, type StnGridSize, type StnGridSpacing, StnHeader, StnHeaderContextTitle, StnHeaderPageTitle, type StnHeaderPageTitleProps, type StnHeaderProps, type StnHeaderRegionProps, StnHeaderSubTitle, StnHeaderTitle, type StnHeaderTitleClockProps, StnHeaderTitleDate, type StnHeaderTitleDateOptions, type StnHeaderTitleDualProps, StnHeaderTitleFramePreview, StnHeaderTitleGroup, type StnHeaderTitleGroupProps, StnHeaderTitleMainText, type StnHeaderTitleProps, type StnHeaderTitleSize, StnHeaderTitleSubText, StnHeaderTitleTime, type StnHeaderTitleTimeOptions, type StnHeaderTitleTitleProps, type StnHeaderTitleVariant, StnHeaderTitleWeekday, StnHeaderToolbar, type StnHeaderToolbarProps, StnIcon, StnIconBox, type StnIconBoxColor, type StnIconBoxProps, type StnIconBoxSize, type StnIconProps, StnLayer, StnLayer0Background, type StnLayer0BackgroundColor, type StnLayer0BackgroundProps, StnLayerBackground, StnLayerContent, StnLayerDim, StnLayerModal, type StnLayerProps, type StnLayerRoleProps, StnLayerShell, type StnLayerShellProps, StnListViewLayout, StnListViewLayoutBody, type StnListViewLayoutBodyProps, StnListViewLayoutContent, StnListViewLayoutHeader, StnListViewLayoutPagination, type StnListViewLayoutProps, StnListViewLayoutSearch, StnListViewLayoutSidebar, StnListViewLayoutTable, StnLoadingSkeleton, StnLoadingSkeletonBlock, type StnLoadingSkeletonBlockProps, StnLoadingSkeletonCircle, type StnLoadingSkeletonCircleProps, StnLoadingSkeletonLine, type StnLoadingSkeletonLineProps, StnLoadingSkeletonProfile, type StnLoadingSkeletonProfileProps, type StnLoadingSkeletonProps, type StnLoadingSkeletonRootProps, StnLoadingSkeletonTable, type StnLoadingSkeletonTableProps, type StnLoadingSkeletonVariant, StnLoadingSkeletonWidget, type StnLoadingSkeletonWidgetProps, StnLoginBrandStack, type StnLoginBrandStackProps, StnLoginCard, type StnLoginCardBrandPosition, StnLoginCardGlowWrapper, type StnLoginCardGlowWrapperProps, type StnLoginCardProps, type StnLoginCardVariant, StnLoginFormFields, type StnLoginFormFieldsProps, StnLoginFormLinks, type StnLoginFormLinksProps, StnLoginFormStack, type StnLoginFormStackProps, StnLoginPlaceholder, type StnLoginPlaceholderProps, StnLoginTextField, type StnLoginTextFieldProps, StnLogo, type StnLogoProps, type StnLogoSize, type StnLogoTheme, type StnLogoVariant, StnMapCanvas, type StnMapCanvasProps, StnMapToolbar, type StnMapToolbarProps, StnPageScaffold, StnPageScaffoldLayer, type StnPageScaffoldLayerProps, StnPageScaffoldMapCanvas, type StnPageScaffoldMapCanvasProps, StnPageScaffoldMapPlaceholder, type StnPageScaffoldMapPlaceholderProps, StnPageScaffoldRegion, type StnPageScaffoldRegionProps, StnPageScaffoldRoot, type StnPageScaffoldRootProps, StnPagination, type StnPaginationItem, type StnPaginationProps, StnPopup, type StnPopupProps, type StnPopupSize, StnProgressBar, type StnProgressBarGradient, type StnProgressBarLabelAlign, type StnProgressBarLabelPosition, type StnProgressBarProps, type StnProgressBarSize, type StnProgressBarTone, type StnProgressBarTrack, StnProvider, type StnProviderProps, StnRadio, type StnRadioColor, StnRadioGroup, type StnRadioGroupLayout, type StnRadioGroupOption, type StnRadioGroupOrientation, type StnRadioGroupProps, type StnRadioLabelPlacement, type StnRadioProps, type StnRadioSize, StnScroll, type StnScrollColor, type StnScrollOrientation, type StnScrollProps, type StnScrollSize, StnSearchRequirementBar, StnSearchRequirementBarDemo, type StnSearchRequirementBarDemoProps, type StnSearchRequirementBarDividerProps, type StnSearchRequirementBarExportProps, type StnSearchRequirementBarFieldProps, type StnSearchRequirementBarFieldsProps, type StnSearchRequirementBarProps, type StnSearchRequirementBarSearchButtonProps, StnSectionSide, StnSectionSidePreset, type StnSectionSidePresetProps, type StnSectionSideProps, StnSegmented, type StnSegmentedMultipleProps, type StnSegmentedOption, type StnSegmentedProps, type StnSegmentedSingleProps, StnSeverityBadge, type StnSeverityBadgeProps, StnSeverityFilter, type StnSeverityFilterProps, type StnSeverityLevel, type StnSeverityVariant, type StnSideNavDropdownVariant, StnSideNavFooter, type StnSideNavFooterProps, StnSideNavGroup, type StnSideNavGroupProps, StnSideNavHeader, type StnSideNavHeaderProps, StnSideNavItem, type StnSideNavItemProps, type StnSideNavItemVariant, StnSideNavLogo, type StnSideNavLogoProps, StnSideNavMenu, type StnSideNavMenuProps, StnSideNavMobileTrigger, type StnSideNavMobileTriggerProps, StnSideNavSpacer, type StnSideNavSpacerProps, StnSideNavSub, StnSideNavSubItem, type StnSideNavSubItemProps, StnSideNavSubNav, type StnSideNavSubNavProps, type StnSideNavSubNavVariant, type StnSideNavSubProps, StnSideNavToggle, type StnSideNavToggleProps, StnSideNavWatermark, type StnSideNavWatermarkProps, StnSideNavigation, type StnSideNavigationProps, type StnSideNavigationVariant, StnSlider, type StnSliderColor, type StnSliderGradient, type StnSliderLabelAlign, type StnSliderLabelPosition, type StnSliderProps, type StnSliderSize, StnStack, type StnStackBreakpoint, type StnStackDirection, type StnStackProps, type StnStackResponsive, type StnStackScrollable, type StnStackWrap, StnSwitch, type StnSwitchColor, type StnSwitchGradient, type StnSwitchLabelPosition, type StnSwitchProps, type StnSwitchSize, StnSystemChip, type StnSystemChipItem, type StnSystemChipProps, type StnSystemChipTone, StnTable, type StnTableAlign, StnTableBody, type StnTableBodyProps, StnTableGrid, type StnTableGridProps, StnTableHead, type StnTableHeadProps, type StnTableProps, StnTableRow, type StnTableRowProps, StnTableSort, type StnTableSortProps, StnTableTd, StnTableTdCheck, type StnTableTdCheckProps, type StnTableTdProps, StnTableTh, StnTableThCheck, type StnTableThCheckProps, type StnTableThProps, StnTextField, type StnTextFieldColor, type StnTextFieldIconPosition, type StnTextFieldLabelPosition, type StnTextFieldProps, type StnTextFieldVariant, type StnTheme, StnToastCloseButton, StnToastIcon, type StnToastIconProps, StnToggleButton, type StnToggleButtonColor, type StnToggleButtonIconPosition, type StnToggleButtonProps, type StnToggleButtonSize, type StnToolbarOrientation, type StnTopologyCore, StnTopologyGraph, type StnTopologyGraphLink, type StnTopologyGraphNode, type StnTopologyGraphProps, type StnTopologyNode, type StnTopologyNodeContent, type StnTopologyNodeIcon, StnTopologyNodeMark, type StnTopologyNodeMarkProps, StnTopologyNodePreview, type StnTopologyNodePreviewProps, type StnTopologyNodeShape, type StnTopologyNodeSize, type StnTopologyNodeStatus, StnTopologyRing, type StnTopologyRingProps, StnTree, type StnTreeDocRowState, type StnTreeItem, StnTreeNode, type StnTreeNodeDocState, type StnTreeNodeKind, type StnTreeNodeProps, type StnTreeProps, StnWidget, StnWidgetActions, type StnWidgetBackground, StnWidgetBody, StnWidgetChartSlot, type StnWidgetChartSlotProps, StnWidgetEmpty, StnWidgetFooter, StnWidgetGradeRow, StnWidgetGradeRowList, type StnWidgetGradeRowProps, StnWidgetHeader, StnWidgetInsetIcon, type StnWidgetInsetIconProps, StnWidgetLoading, type StnWidgetPadding, StnWidgetPlaceholder, type StnWidgetProps, StnWidgetStatCard, type StnWidgetStatCardProps, StnWidgetStatGroup, type StnWidgetStatus, type StnWidgetStatusGrade, StnWidgetStatusItem, type StnWidgetStatusItemProps, StnWidgetStatusList, StnWidgetTitle, buildPaginationItems, buildStnTreeNodeCells, cn, collectExpandableIds, flattenStnTree, formatStnHeaderTitleDate, formatStnHeaderTitleTime, formatStnHeaderTitleWeekday, formatTopologyCount, useSideNav, useStn, useStnOptional };