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

package/README.md

@@ -28,7 +28,7 @@ import { StnProvider, StnButton, StnTable } from '@stn-uiux/pub-ui-react'
 
 export function App() {
   return (
-    <StnProvider theme="dark" applyThemeToDocument>
+    <StnProvider mode="dark" applyModeToDocument>
       <main>
         <StnButton variant="primary" size="md">
           실행
@@ -43,9 +43,10 @@ export function App() {
 
 | Prop | 타입 | 기본값 | 설명 |
 |------|------|--------|------|
-| `theme` | `'light' \| 'dark'` | `'dark'` | 적용할 디자인 시스템 테마 모드 |
-| `applyThemeToDocument` | `boolean` | `false` | `true`일 경우 `<html>` 태그에 `data-theme` 속성을 자동 적용 |
-| `useStn()` | Hook | - | 하위 컴포넌트에서 현재 테마 상태를 조회하는 훅 |
+| `mode` | `'light' \| 'dark'` | `'dark'` | 다크/라이트 컬러 모드 (`html[data-mode]`) |
+| `applyModeToDocument` | `boolean` | `true` | `true`일 경우 `<html>` 태그에 `data-mode` 속성을 자동 적용 |
+| `theme` | `string` | `undefined` | 커스텀 테마 식별자 (`html[data-theme]`) |
+| `useStn()` | Hook | - | 하위 컴포넌트에서 `{ mode, setMode, theme, setTheme }`를 조회/변경하는 훅 |
 
 
 ## 주요 컴포넌트 목록

package/dist/index.d.ts

@@ -50,10 +50,19 @@ type StnPaginationItem = number | 'ellipsis';
  */
 declare function buildPaginationItems(page: number, count: number, siblingCount?: number, boundaryCount?: number): StnPaginationItem[];
 
-type StnTheme = 'light' | 'dark';
+/** 모드 (Color Mode): dark | light */
+type StnMode = 'light' | 'dark';
+/** 테마 (Theme): 브랜드 및 고객사 커스텀 테마 명칭 */
+type StnTheme = string;
 type StnContextValue = {
-    theme: StnTheme;
-    setTheme: (theme: StnTheme) => void;
+    /** 현재 다크/라이트 색상 모드 */
+    mode: StnMode;
+    /** 다크/라이트 색상 모드 변경 */
+    setMode: (mode: StnMode) => void;
+    /** 커스텀 테마 명칭 */
+    theme?: StnTheme;
+    /** 커스텀 테마 변경 */
+    setTheme?: (theme: StnTheme) => void;
 };
 declare const StnContext: react.Context<StnContextValue | null>;
 declare function useStn(): StnContextValue;
@@ -61,13 +70,25 @@ declare function useStnOptional(): StnContextValue | null;
 
 type StnProviderProps = {
     children: ReactNode;
+    /** 다크/라이트 색상 모드 (제어 상태) */
+    mode?: StnMode;
+    /** 다크/라이트 색상 모드 기본값 (비제어 상태, 기본값 'dark') */
+    defaultMode?: StnMode;
+    /** 모드 변경 이벤트 콜백 */
+    onModeChange?: (mode: StnMode) => void;
+    /** 커스텀 테마 명칭 (예: 'infomap') */
     theme?: StnTheme;
+    /** 커스텀 테마 기본값 */
     defaultTheme?: StnTheme;
+    /** 테마 변경 이벤트 콜백 */
     onThemeChange?: (theme: StnTheme) => void;
+    /** document.documentElement (html 태그)에 data-mode 속성을 적용할지 여부 */
+    applyModeToDocument?: boolean;
+    /** @deprecated applyModeToDocument 사용 권장 */
     applyThemeToDocument?: boolean;
     className?: string;
 };
-declare function StnProvider({ children, theme: themeProp, defaultTheme, onThemeChange, applyThemeToDocument, className, }: StnProviderProps): react_jsx_runtime.JSX.Element;
+declare function StnProvider({ children, mode: modeProp, defaultMode, onModeChange, theme: themeProp, defaultTheme, onThemeChange, applyModeToDocument, applyThemeToDocument, className, }: StnProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * 디자인 가이드 준수 — 소비자가 `style`로 높이·색 등 모양을 바꾸지 못하게 차단.
@@ -620,12 +641,15 @@ declare const StnCircularProgress: react.ForwardRefExoticComponent<StnWithoutSty
 
 type StnCheckboxSize = 'sm' | 'md' | 'lg';
 type StnCheckboxColor = 'primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'error' | 'neutral' | (string & {});
+type StnCheckboxVariant = 'default' | 'translucent';
 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;
+    /** 외형 변형: default(불투명 기본) · translucent(반투명 블러) @default 'default' */
+    variant?: StnCheckboxVariant;
     /** 시멘틱 색상 또는 커스텀 색상 ('primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'error' | 'neutral') @default 'primary' */
     color?: StnCheckboxColor;
     /** 레이블 배치 위치 ('end' | 'start' | 'top' | 'bottom') @default 'end' */
@@ -652,6 +676,8 @@ declare const StnCheckbox: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<
     label?: ReactNode;
     /** 체크박스 크기 ('sm': 14px, 'md': 18px, 'lg': 22px) @default 'md' */
     size?: StnCheckboxSize;
+    /** 외형 변형: default(불투명 기본) · translucent(반투명 블러) @default 'default' */
+    variant?: StnCheckboxVariant;
     /** 시멘틱 색상 또는 커스텀 색상 ('primary' | 'secondary' | 'success' | 'critical' | 'major' | 'minor' | 'warning' | 'error' | 'neutral') @default 'primary' */
     color?: StnCheckboxColor;
     /** 레이블 배치 위치 ('end' | 'start' | 'top' | 'bottom') @default 'end' */
@@ -1532,9 +1558,12 @@ interface StnCardComponent extends React.ForwardRefExoticComponent<StnCardProps
 }
 declare const StnCard: StnCardComponent;
 
+type StnSectionSideVariant = 'solid' | 'translucent';
 type StnSectionSideProps = Omit<HTMLAttributes<HTMLElement>, 'className' | 'children'> & {
     children?: ReactNode;
     className?: string;
+    /** 외형 모드 — solid(기본 불투명 면) | translucent(글래스모피즘 반투명 블러) */
+    variant?: StnSectionSideVariant;
     /** 상단 고정 헤더 영역 (검색창, 탭, 타이틀 등) */
     header?: ReactNode;
     /** 하단 고정 푸터 영역 (스위치, 액션 등) */
@@ -1555,6 +1584,8 @@ type StnSectionSideProps = Omit<HTMLAttributes<HTMLElement>, 'className' | 'chil
 declare const StnSectionSide: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "className"> & {
     children?: ReactNode;
     className?: string;
+    /** 외형 모드 — solid(기본 불투명 면) | translucent(글래스모피즘 반투명 블러) */
+    variant?: StnSectionSideVariant;
     /** 상단 고정 헤더 영역 (검색창, 탭, 타이틀 등) */
     header?: ReactNode;
     /** 하단 고정 푸터 영역 (스위치, 액션 등) */
@@ -1749,7 +1780,9 @@ declare const StnLoginTextField: react.ForwardRefExoticComponent<StnWithoutStyle
 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 StnLogoMode = 'dark' | 'light';
+/** @deprecated StnLogoMode 사용 권장 */
+type StnLogoTheme = StnLogoMode;
 type StnLogoProps = StnWithoutStyle<Omit<HTMLAttributes<HTMLSpanElement>, 'children'>> & {
     /**
      * horizontal: 가로 워드마크 (full PNG)
@@ -1769,6 +1802,8 @@ type StnLogoProps = StnWithoutStyle<Omit<HTMLAttributes<HTMLSpanElement>, 'child
      * light: 검은색 로고 (밝은 배경용)
      * @default 'dark'
      */
+    mode?: StnLogoMode;
+    /** @deprecated mode 사용 권장 */
     theme?: StnLogoTheme;
     alt?: string;
 };
@@ -1791,6 +1826,8 @@ declare const StnLogo: react.ForwardRefExoticComponent<StnWithoutStyle<Omit<HTML
      * light: 검은색 로고 (밝은 배경용)
      * @default 'dark'
      */
+    mode?: StnLogoMode;
+    /** @deprecated mode 사용 권장 */
     theme?: StnLogoTheme;
     alt?: string;
 } & react.RefAttributes<HTMLSpanElement>>;
@@ -2448,8 +2485,8 @@ declare const StnDateRangeField: react.ForwardRefExoticComponent<Omit<ButtonHTML
 
 /** 높이 규격: sm 32px · md 40px(기본) · lg 56px */
 type StnLabelPrefixSize = 'sm' | 'md' | 'lg';
-/** 외형 변형: outline(기본) · filled · standard · transparent */
-type StnLabelPrefixVariant = 'outline' | 'filled' | 'standard' | 'transparent';
+/** 외형 변형: outline(기본) · filled · standard · transparent · translucent */
+type StnLabelPrefixVariant = 'outline' | 'filled' | 'standard' | 'transparent' | 'translucent';
 /** 레이블 위치: prefix(왼쪽, 기본) · suffix(오른쪽) */
 type StnLabelPrefixPosition = 'prefix' | 'suffix';
 /** 보더 반경 오버라이드 */
@@ -2641,7 +2678,7 @@ type StnLayer0BackgroundProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>
 };
 /**
  * Layer 0 page background — 프리셋은 `variant`, 단색은 `color`, 임의 URL은 `src`.
- * `src` + `srcDark` 를 같이 주면 `data-theme` 에 맞춰 전환합니다.
+ * `src` + `srcDark` 를 같이 주면 `data-mode` 에 맞춰 전환합니다.
  */
 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;
 
@@ -3094,6 +3131,7 @@ declare function StnAlertCard({ item, titleOverflow, descOverflow, onClick, clas
 declare function StnAlertCenterPanel({ title, alerts, workItems, deployItems, defaultTab, size, textOverflow, titleOverflow, descOverflow, tabIds, tabName: _tabName, onClose, onMarkAllAsRead, onManageSettings, onItemClick, closeLabel, className, }: StnAlertCenterPanelProps): react_jsx_runtime.JSX.Element;
 
 type StnAlertCenterDocPreviewProps = StnAlertCenterPanelProps & {
+    mode?: StnMode;
     theme?: StnTheme;
     /** DS iframe·Color doc용 GNB 크롬 래퍼 */
     withDocChrome?: boolean;
@@ -3103,7 +3141,7 @@ type StnAlertCenterDocPreviewProps = StnAlertCenterPanelProps & {
  * 문서·데모 — `stn-doc-frame--alert-center` + SideNav bottom shell.
  * 제품 앱에서는 `StnSideNavigation` bottom 슬롯에 `StnAlertCenterPanel`만 넣으면 됩니다.
  */
-declare function StnAlertCenterDocPreview({ theme, withDocChrome, children, ...panelProps }: StnAlertCenterDocPreviewProps): react_jsx_runtime.JSX.Element;
+declare function StnAlertCenterDocPreview({ mode, theme, withDocChrome, children, ...panelProps }: StnAlertCenterDocPreviewProps): react_jsx_runtime.JSX.Element;
 
 type SideNavContextValue = {
     collapsed: boolean;
@@ -3364,13 +3402,17 @@ type StnSideNavWatermarkProps = HTMLAttributes<HTMLDivElement> & {
      */
     size?: StnLogoSize;
     /**
-     * 다크 / 라이트 테마 (미지정 시 상위 data-theme에 따라 자동 전환)
+     * 다크 / 라이트 모드 (미지정 시 상위 data-mode에 따라 자동 전환)
+     */
+    mode?: StnLogoMode;
+    /**
+     * @deprecated mode 사용 권장
      */
     theme?: StnLogoTheme;
 };
 /**
  * 사이드바 하단 3D 엠보싱 브랜드 워터마크 카드 (Figma 40004218:102473)
- * StnLogo(variant="watermark") 기반으로 크기(size prop) 및 테마 제어를 지원합니다.
+ * StnLogo(variant="watermark") 기반으로 크기(size prop) 및 모드 제어를 지원합니다.
  */
 declare const StnSideNavWatermark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     /**
@@ -3380,7 +3422,11 @@ declare const StnSideNavWatermark: react.ForwardRefExoticComponent<HTMLAttribute
      */
     size?: StnLogoSize;
     /**
-     * 다크 / 라이트 테마 (미지정 시 상위 data-theme에 따라 자동 전환)
+     * 다크 / 라이트 모드 (미지정 시 상위 data-mode에 따라 자동 전환)
+     */
+    mode?: StnLogoMode;
+    /**
+     * @deprecated mode 사용 권장
      */
     theme?: StnLogoTheme;
 } & react.RefAttributes<HTMLDivElement>>;
@@ -3633,6 +3679,7 @@ declare const StnSideNavigation: react.ForwardRefExoticComponent<HTMLAttributes<
     } & react.RefAttributes<HTMLElement>>;
     Watermark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
         size?: StnLogoSize;
+        mode?: StnLogoMode;
         theme?: StnLogoTheme;
     } & react.RefAttributes<HTMLDivElement>>;
     MobileTrigger: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -4421,4 +4468,4 @@ interface StnEventBannerProps extends Omit<react__default.HTMLAttributes<HTMLDiv
 /** 위험도별 이벤트 배너. 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, 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, StnAlertCard, type StnAlertCardProps, 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, StnCard, StnCardBody, type StnCardBodyProps, StnCardFooter, type StnCardFooterProps, StnCardHeader, type StnCardHeaderProps, type StnCardProps, 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, type StnDateRangeFieldVariant, 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, 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, StnLabelPrefix, type StnLabelPrefixPosition, type StnLabelPrefixProps, type StnLabelPrefixRadius, type StnLabelPrefixSize, type StnLabelPrefixVariant, 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, StnModal, type StnModalProps, type StnModalSize, StnPageScaffold, StnPageScaffoldLayer, type StnPageScaffoldLayerProps, StnPageScaffoldMapCanvas, type StnPageScaffoldMapCanvasProps, StnPageScaffoldMapPlaceholder, type StnPageScaffoldMapPlaceholderProps, StnPageScaffoldRegion, type StnPageScaffoldRegionProps, StnPageScaffoldRoot, type StnPageScaffoldRootProps, StnPagination, type StnPaginationColor, type StnPaginationItem, type StnPaginationProps, type StnPaginationSize, type StnPaginationVariant, 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, type StnScrollVariant, 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, type StnSeverityLevel, type StnSeveritySize, 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, StnStatus, StnStatusDot, type StnStatusDotGap, StnStatusDotGroup, type StnStatusDotGroupItem, type StnStatusDotGroupProps, type StnStatusDotPosition, type StnStatusDotProps, type StnStatusDotSize, StnStatusFlow, type StnStatusFlowProps, type StnStatusFlowSize, type StnStatusProps, StnStatusSeverity, type StnStatusSeverityProps, StnStatusSwitch, type StnStatusSwitchProps, StnSwitch, type StnSwitchColor, type StnSwitchGradient, type StnSwitchLabelPosition, type StnSwitchProps, type StnSwitchSize, StnTab, StnTabContextProvider, type StnTabContextProviderProps, type StnTabContextValue, StnTabPanel, type StnTabPanelProps, type StnTabProps, 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, StnTabs, type StnTabsProps, StnTabsRoot, StnTextArea, type StnTextAreaColor, type StnTextAreaLabelPosition, type StnTextAreaProps, type StnTextAreaResize, type StnTextAreaSizeProp, type StnTextAreaVariant, 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, StnTooltip, type StnTooltipPlacement, type StnTooltipProps, type StnTooltipSize, type StnTooltipTone, type StnTooltipVariant, 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, StnTreeItem, type StnTreeItemData, type StnTreeItemDocState, type StnTreeItemProps, StnTreeNode, type StnTreeNodeDocState, type StnTreeNodeKind, type StnTreeNodeProps, type StnTreeProps, type StnTreeRadius, type StnTreeSize, type StnTreeWidth, 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, useStnTabsContext };
+export { AlertCenterDashboard, type AlertCenterDashboardProps, AlertCenterPageScaffold, type AlertCenterPageScaffoldProps, DashboardPageScaffold, type DashboardPageScaffoldProps, type DashboardType, 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, StnAlertCard, type StnAlertCardProps, 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, StnCard, StnCardBody, type StnCardBodyProps, StnCardFooter, type StnCardFooterProps, StnCardHeader, type StnCardHeaderProps, type StnCardProps, StnCheckbox, type StnCheckboxColor, type StnCheckboxLabelPlacement, type StnCheckboxProps, type StnCheckboxSize, type StnCheckboxVariant, 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, type StnDateRangeFieldVariant, 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, 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, StnLabelPrefix, type StnLabelPrefixPosition, type StnLabelPrefixProps, type StnLabelPrefixRadius, type StnLabelPrefixSize, type StnLabelPrefixVariant, 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, StnModal, type StnModalProps, type StnModalSize, type StnMode, StnPageScaffold, StnPageScaffoldLayer, type StnPageScaffoldLayerProps, StnPageScaffoldMapCanvas, type StnPageScaffoldMapCanvasProps, StnPageScaffoldMapPlaceholder, type StnPageScaffoldMapPlaceholderProps, StnPageScaffoldRegion, type StnPageScaffoldRegionProps, StnPageScaffoldRoot, type StnPageScaffoldRootProps, StnPagination, type StnPaginationColor, type StnPaginationItem, type StnPaginationProps, type StnPaginationSize, type StnPaginationVariant, 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, type StnScrollVariant, StnSearchRequirementBar, StnSearchRequirementBarDemo, type StnSearchRequirementBarDemoProps, type StnSearchRequirementBarDividerProps, type StnSearchRequirementBarExportProps, type StnSearchRequirementBarFieldProps, type StnSearchRequirementBarFieldsProps, type StnSearchRequirementBarProps, type StnSearchRequirementBarSearchButtonProps, StnSectionSide, StnSectionSidePreset, type StnSectionSidePresetProps, type StnSectionSideProps, type StnSectionSideVariant, StnSegmented, type StnSegmentedMultipleProps, type StnSegmentedOption, type StnSegmentedProps, type StnSegmentedSingleProps, StnSeverityBadge, type StnSeverityBadgeProps, type StnSeverityLevel, type StnSeveritySize, 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, StnStatus, StnStatusDot, type StnStatusDotGap, StnStatusDotGroup, type StnStatusDotGroupItem, type StnStatusDotGroupProps, type StnStatusDotPosition, type StnStatusDotProps, type StnStatusDotSize, StnStatusFlow, type StnStatusFlowProps, type StnStatusFlowSize, type StnStatusProps, StnStatusSeverity, type StnStatusSeverityProps, StnStatusSwitch, type StnStatusSwitchProps, StnSwitch, type StnSwitchColor, type StnSwitchGradient, type StnSwitchLabelPosition, type StnSwitchProps, type StnSwitchSize, StnTab, StnTabContextProvider, type StnTabContextProviderProps, type StnTabContextValue, StnTabPanel, type StnTabPanelProps, type StnTabProps, 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, StnTabs, type StnTabsProps, StnTabsRoot, StnTextArea, type StnTextAreaColor, type StnTextAreaLabelPosition, type StnTextAreaProps, type StnTextAreaResize, type StnTextAreaSizeProp, type StnTextAreaVariant, 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, StnTooltip, type StnTooltipPlacement, type StnTooltipProps, type StnTooltipSize, type StnTooltipTone, type StnTooltipVariant, 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, StnTreeItem, type StnTreeItemData, type StnTreeItemDocState, type StnTreeItemProps, StnTreeNode, type StnTreeNodeDocState, type StnTreeNodeKind, type StnTreeNodeProps, type StnTreeProps, type StnTreeRadius, type StnTreeSize, type StnTreeWidth, 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, useStnTabsContext };

package/dist/index.js

@@ -66,7 +66,10 @@ function useStn() {
   const ctx = useContext(StnContext);
   if (!ctx) {
     return {
-      theme: "light",
+      mode: "dark",
+      setMode: () => {
+      },
+      theme: void 0,
       setTheme: () => {
       }
     };
@@ -81,14 +84,27 @@ function useStnOptional() {
 import { jsx } from "react/jsx-runtime";
 function StnProvider({
   children,
+  mode: modeProp,
+  defaultMode = "dark",
+  onModeChange,
   theme: themeProp,
-  defaultTheme = "light",
+  defaultTheme,
   onThemeChange,
-  applyThemeToDocument = false,
+  applyModeToDocument,
+  applyThemeToDocument,
   className
 }) {
+  const [internalMode, setInternalMode] = useState(defaultMode);
+  const mode = modeProp ?? internalMode;
   const [internalTheme, setInternalTheme] = useState(defaultTheme);
   const theme = themeProp ?? internalTheme;
+  const setMode = useCallback(
+    (next) => {
+      if (modeProp === void 0) setInternalMode(next);
+      onModeChange?.(next);
+    },
+    [modeProp, onModeChange]
+  );
   const setTheme = useCallback(
     (next) => {
       if (themeProp === void 0) setInternalTheme(next);
@@ -96,21 +112,30 @@ function StnProvider({
     },
     [themeProp, onThemeChange]
   );
+  const applyToDoc = applyModeToDocument ?? applyThemeToDocument ?? false;
   useEffect(() => {
-    if (!applyThemeToDocument) return;
+    if (!applyToDoc) return;
     const el = document.documentElement;
-    const prev = el.getAttribute("data-theme");
-    el.setAttribute("data-theme", theme);
+    const prevMode = el.getAttribute("data-mode");
+    const prevTheme = el.getAttribute("data-theme");
+    el.setAttribute("data-mode", mode);
+    if (theme) {
+      el.setAttribute("data-theme", theme);
+    } else {
+      el.removeAttribute("data-theme");
+    }
     return () => {
-      if (prev === null) el.removeAttribute("data-theme");
-      else el.setAttribute("data-theme", prev);
+      if (prevMode === null) el.removeAttribute("data-mode");
+      else el.setAttribute("data-mode", prevMode);
+      if (prevTheme === null) el.removeAttribute("data-theme");
+      else el.setAttribute("data-theme", prevTheme);
     };
-  }, [theme, applyThemeToDocument]);
-  const value = { theme, setTheme };
-  if (applyThemeToDocument) {
+  }, [mode, theme, applyToDoc]);
+  const value = { mode, setMode, theme, setTheme };
+  if (applyToDoc) {
     return /* @__PURE__ */ jsx(StnContext.Provider, { value, children });
   }
-  return /* @__PURE__ */ jsx(StnContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn(className), "data-theme": theme, children }) });
+  return /* @__PURE__ */ jsx(StnContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn(className), "data-mode": mode, "data-theme": theme, children }) });
 }
 
 // src/components/StnButton.tsx
@@ -1386,6 +1411,7 @@ import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var StnCheckbox = forwardRef9(function StnCheckbox2({
   label,
   size = "md",
+  variant = "default",
   color,
   labelPlacement = "end",
   indeterminate = false,
@@ -1444,6 +1470,7 @@ var StnCheckbox = forwardRef9(function StnCheckbox2({
         "checkbox",
         "stn-checkbox",
         size !== "md" && size,
+        variant === "translucent" && "translucent",
         toneClass,
         placementClass,
         indeterminate && "indeterminate",
@@ -2874,6 +2901,7 @@ var StnSectionSide = forwardRef16(function StnSectionSide2({
   header,
   footer,
   className,
+  variant = "solid",
   fill = true,
   fullWidth = false,
   collapsed = false,
@@ -2887,6 +2915,7 @@ var StnSectionSide = forwardRef16(function StnSectionSide2({
       ref,
       className: cn(
         "stn-section-side",
+        variant === "translucent" && "stn-section-side--translucent",
         fill && "stn-section-side--fill",
         fullWidth && "is-full-width",
         collapsed && "is-collapsed",
@@ -3099,18 +3128,19 @@ function sources(variant) {
   }
   return { light: STN_INFOMAP_LOGO.full, dark: STN_INFOMAP_LOGO.fullDark };
 }
-var StnLogo = forwardRef19(function StnLogo2({ variant = "horizontal", size = "md", theme, alt = "InfoMap SRM", className, ...rest }, ref) {
+var StnLogo = forwardRef19(function StnLogo2({ variant = "horizontal", size = "md", mode, theme, alt = "InfoMap SRM", className, ...rest }, ref) {
   const { light, dark } = sources(variant);
+  const finalMode = mode ?? theme;
   return /* @__PURE__ */ jsxs18(
     "span",
     {
       ref,
       className: cn("stn-logo", variant, size, className),
-      "data-theme": theme,
+      "data-mode": finalMode,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx24("img", { className: "stn-logo__img light", src: light, alt: theme === "dark" ? "" : alt }),
-        /* @__PURE__ */ jsx24("img", { className: "stn-logo__img dark", src: dark, alt: theme === "light" ? "" : alt })
+        /* @__PURE__ */ jsx24("img", { className: "stn-logo__img light", src: light, alt: finalMode === "dark" ? "" : alt }),
+        /* @__PURE__ */ jsx24("img", { className: "stn-logo__img dark", src: dark, alt: finalMode === "light" ? "" : alt })
       ]
     }
   );
@@ -4878,6 +4908,7 @@ function StnLabelPrefix({
     StnCheckbox,
     {
       size: resolvedCheckboxSize,
+      variant: variant === "translucent" ? "translucent" : "default",
       controlOnly: true,
       checked: isChecked,
       disabled: disabled || checkboxDisabled,
@@ -7791,16 +7822,17 @@ function StnAlertCenterPanel({
 // src/patterns/alertCenter/StnAlertCenterDocPreview.tsx
 import { jsx as jsx58 } from "react/jsx-runtime";
 function StnAlertCenterDocPreview({
-  theme = "light",
+  mode = "light",
+  theme,
   withDocChrome = true,
   children,
   ...panelProps
 }) {
   const panel = children ?? /* @__PURE__ */ jsx58(StnAlertCenterPanel, { ...panelProps });
   if (!withDocChrome) {
-    return /* @__PURE__ */ jsx58(StnProvider, { theme, applyThemeToDocument: false, children: panel });
+    return /* @__PURE__ */ jsx58(StnProvider, { mode, theme, applyModeToDocument: false, children: panel });
   }
-  return /* @__PURE__ */ jsx58("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-theme": theme, children: /* @__PURE__ */ jsx58("div", { className: "stn-alert-center-preview-shell", children: panel }) });
+  return /* @__PURE__ */ jsx58("div", { className: "stn-doc-frame stn-doc-frame--alert-center", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ jsx58("div", { className: "stn-alert-center-preview-shell", children: panel }) });
 }
 
 // src/index.ts
@@ -8239,7 +8271,7 @@ var StnSideNavToggle = forwardRef37(
 import { forwardRef as forwardRef38 } from "react";
 import { jsx as jsx67 } from "react/jsx-runtime";
 var StnSideNavWatermark = forwardRef38(
-  function StnSideNavWatermark2({ size = "xl", theme, className, ...rest }, ref) {
+  function StnSideNavWatermark2({ size = "xl", mode, theme, className, ...rest }, ref) {
     return /* @__PURE__ */ jsx67(
       "div",
       {
@@ -8247,7 +8279,7 @@ var StnSideNavWatermark = forwardRef38(
         className: cn("stn-side-nav__watermark", className),
         "aria-hidden": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx67(StnLogo, { variant: "watermark", size, theme })
+        children: /* @__PURE__ */ jsx67(StnLogo, { variant: "watermark", size, mode: mode ?? theme })
       }
     );
   }