@borisj74/bv-ds 0.1.1 → 0.1.3

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, MouseEventHandler, HTMLAttributes, CSSProperties, InputHTMLAttributes, ElementType, TextareaHTMLAttributes, SVGProps } from 'react';
+import react__default, { ReactNode, ButtonHTMLAttributes, MouseEventHandler, HTMLAttributes, CSSProperties, InputHTMLAttributes, ElementType, TextareaHTMLAttributes, SVGProps } from 'react';
 
 type ActivityFeedDivider = "line" | "connector" | "divider" | "none";
 interface ActivityFeedProps {
@@ -576,7 +576,7 @@ interface ChartTooltipProps {
 }
 /**
  * Themed tooltip card for the Recharts chart wrappers — pass as the chart's
- * `<Tooltip content={<ChartTooltip />} />`. Renders a `bg-primary` card with the
+ * `<Tooltip content={<ChartTooltip />} />`. Renders a `bg-bg-primary` card with the
  * point label and one colored-dot row per series. Returns null when inactive.
  */
 declare function ChartTooltip({ active, payload, label, formatValue }: ChartTooltipProps): react.JSX.Element | null;
@@ -837,7 +837,7 @@ interface ContextMenuProps {
 }
 /**
  * A thin positioned panel for right-click menus. Reuses the dropdown panel
- * tokens (shadow-lg, border-secondary-alt, radius-md) and renders whatever
+ * tokens (shadow-lg, border-border-secondary-alt, radius-md) and renders whatever
  * rows you pass — compose DropdownMenuListItem children; it does NOT
  * reimplement list items. Pair with `useContextMenu`.
  */
@@ -1042,6 +1042,28 @@ interface EmptyStateProps {
  */
 declare function EmptyState({ icon, title, description, actions, size, className, }: EmptyStateProps): react.JSX.Element;
 
+type FeaturedIconColor = "brand" | "gray" | "error" | "warning" | "success";
+type FeaturedIconTheme = "light" | "dark" | "gradient" | "modern" | "modern-neue";
+type FeaturedIconSize = "sm" | "md" | "lg" | "xl";
+interface FeaturedIconProps extends Omit<react__default.HTMLAttributes<HTMLSpanElement>, "color"> {
+    /** Icon element (e.g. from @borisj74/bv-ds-icons). Inherits currentColor. */
+    icon: react__default.ReactNode;
+    color?: FeaturedIconColor;
+    theme?: FeaturedIconTheme;
+    size?: FeaturedIconSize;
+}
+/**
+ * FeaturedIcon — Untitled UI "Featured icon" (node 1102:5338).
+ *
+ * A coloured container wrapping an icon, used by Empty state, Alert, Metric,
+ * Notification, etc. Pass the icon via the `icon` slot — it inherits
+ * currentColor, so no fill/stroke props are needed.
+ *
+ * `modern` and `modern-neue` are neutral white-card treatments (gray-only in
+ * Figma); the `color` prop is ignored for those two themes.
+ */
+declare function FeaturedIcon({ icon, color, theme, size, className, ...rest }: FeaturedIconProps): react__default.JSX.Element;
+
 type FeedItemSize = "sm" | "md";
 interface FeedItemBaseProps {
     /** Display name of the actor (e.g. "Olivia Rhye"). */
@@ -1284,7 +1306,7 @@ interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
     arrow?: TooltipArrow;
 }
 /**
- * Presentational tooltip bubble (dark `bg-primary-solid`, white text). `text` is
+ * Presentational tooltip bubble (dark `bg-bg-primary-solid`, white text). `text` is
  * the heading; `supportingText` adds a second `utility-neutral-300` line (max
  * 296px). `arrow` positions a small pointer on the bubble edge (rendered as a
  * rotated square). Positioning relative to a trigger is the caller's job.
@@ -1497,7 +1519,7 @@ interface MessageActionProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCha
  * - **minimal**  — single-line field + square send button (row).
  * - **textarea** — multiline box, attach/emoji + brand Send pinned bottom-right,
  *   record button top-right.
- * - **advanced** — AI prompt box on `bg-secondary`; author chip + Shortcuts/Attach
+ * - **advanced** — AI prompt box on `bg-bg-secondary`; author chip + Shortcuts/Attach
  *   footer, mic top-right, resize handle.
  *
  * Renders real `<input>`/`<textarea>` (controlled via `value`/`onValueChange`);
@@ -1689,12 +1711,20 @@ interface MultiSelectProps {
 declare function MultiSelect({ options, value, onChange, open, onToggle, label, hint, placeholder, searchable, disabled, invalid, className, }: MultiSelectProps): react.JSX.Element;
 
 type NavAccountCardVariant = "simple" | "card";
+type NavAccountCardBreakpoint = "desktop" | "mobile";
 interface NavAccountCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
     /** `simple` = inline row + sign-out button · `card` = boxed trigger that opens a menu. */
     variant?: NavAccountCardVariant;
     /** card only — whether the dropdown menu is shown. */
     open?: boolean;
+    /** Width: `desktop` = 280px · `mobile` = 256px. */
+    breakpoint?: NavAccountCardBreakpoint;
+    /** Custom avatar node — takes precedence over the built-in `src` treatment. */
     avatar?: ReactNode;
+    /** Image URL for the built-in layered avatar (used when `avatar` is not supplied). */
+    src?: string;
+    /** Status dot on the built-in avatar — `true` online (green) · `false` offline (gray) · omit for none. */
+    online?: boolean;
     name?: ReactNode;
     email?: ReactNode;
     /** card only — toggles the dropdown (fires on trigger click). */
@@ -1712,13 +1742,13 @@ interface NavAccountCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "titl
  * with a sign-out button; `card` renders a boxed trigger that, when `open`,
  * reveals a dropdown (the `menu` slot — compose `NavAccountCardMenuItem` rows).
  *
- * The active account is marked with `bg-brand-solid` (the radio inside the
+ * The active account is marked with `bg-bg-brand-solid` (the radio inside the
  * account menu items). Note: Figma opens the desktop menu as a right-side
  * flyout; this opens it above the trigger (`bottom-full`) — a layout
  * simplification (see figma-map). Width defaults to 280px; override via
  * `className` for mobile (256px).
  */
-declare function NavAccountCard({ variant, open, avatar, name, email, onToggle, onSignOut, menu, className, ...rest }: NavAccountCardProps): react.JSX.Element;
+declare function NavAccountCard({ variant, open, breakpoint, avatar, src, online, name, email, onToggle, onSignOut, menu, className, ...rest }: NavAccountCardProps): react.JSX.Element;
 
 type NavAccountCardMenuItemType = "menu-item" | "account";
 interface NavAccountCardMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "name" | "type"> {
@@ -1743,12 +1773,12 @@ interface NavAccountCardMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButt
  * A single row inside `NavAccountCard`'s dropdown. Two shapes:
  * - `menu-item` — icon + label + optional shortcut chip (View profile, Settings…).
  * - `account` — avatar + name/email with a radio indicator; `current` fills the
- *   radio with `bg-brand-solid` (the active-account marker).
+ *   radio with `bg-bg-brand-solid` (the active-account marker).
  */
 declare function NavAccountCardMenuItem({ type, current, icon, label, shortcut, avatar, name, email, className, ...rest }: NavAccountCardMenuItemProps): react.JSX.Element;
 
 interface NavButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-    /** Active route — applies the selected (`bg-secondary`) background. */
+    /** Active route — applies the selected (`bg-bg-secondary`) background. */
     current?: boolean;
     /** Render only the leading icon (square button). */
     iconOnly?: boolean;
@@ -1773,7 +1803,7 @@ interface NavFeaturedCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "tit
     children?: ReactNode;
     /** CTA row — compose Button(s) / link buttons. */
     action?: ReactNode;
-    /** Bordered surface (`bg-primary` + border) vs subtle (`bg-secondary`). */
+    /** Bordered surface (`bg-bg-primary` + border) vs subtle (`bg-bg-secondary`). */
     bordered?: boolean;
     /** Renders an x-close button top-right. */
     onClose?: () => void;
@@ -1788,7 +1818,7 @@ interface NavFeaturedCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "tit
 declare function NavFeaturedCard({ icon, title, subtitle, children, action, bordered, onClose, className, ...rest }: NavFeaturedCardProps): react.JSX.Element;
 
 interface NavItemBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-    /** Active route — selected (`bg-secondary`) background. */
+    /** Active route — selected (`bg-bg-secondary`) background. */
     current?: boolean;
     /** Leading icon (20px). */
     icon?: ReactNode;
@@ -1807,7 +1837,7 @@ interface NavItemBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
 declare function NavItemBase({ current, icon, label, dot, badge, trailingChevron, className, type, ...rest }: NavItemBaseProps): react.JSX.Element;
 
 interface NavItemDropdownBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
-    /** Active group — selected (`bg-secondary`) background on the trigger. */
+    /** Active group — selected (`bg-bg-secondary`) background on the trigger. */
     current?: boolean;
     /** Expanded state — reveals the submenu. */
     open?: boolean;
@@ -1893,7 +1923,7 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" |
     actions?: ReactNode;
     /** Optional breadcrumbs slot above the title. */
     breadcrumbs?: ReactNode;
-    /** Banner background image (banner styles); falls back to `bg-tertiary`. */
+    /** Banner background image (banner styles); falls back to `bg-bg-tertiary`. */
     bannerUrl?: string;
 }
 /**
@@ -1983,7 +2013,7 @@ interface PaginationDotIndicatorProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * Single pagination indicator — a dot or a line. `current` fills it with the
- * brand colour, otherwise `bg-quaternary`. Dimensions per size/variant match
+ * brand colour, otherwise `bg-bg-quaternary`. Dimensions per size/variant match
  * Figma (dot md 8 / lg 10; line md h6 / lg h8, both 40 wide).
  */
 declare function PaginationDotIndicator({ current, size, variant, className, ...rest }: PaginationDotIndicatorProps): react.JSX.Element;
@@ -2037,7 +2067,7 @@ interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * Progress bar — pure CSS, no chart lib. `value` (0–100) drives an animated fill
- * (`fg-brand-primary` on a `bg-quaternary` track). `label`: none / right (inline
+ * (`fg-brand-primary` on a `bg-bg-quaternary` track). `label`: none / right (inline
  * %) / bottom (% under) / top|bottom-floating (tooltip bubble tracking the fill).
  */
 declare function ProgressBar({ value, label, className, ...rest }: ProgressBarProps): react.JSX.Element;
@@ -2159,7 +2189,7 @@ interface RadioGroupItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
 }
 /**
  * Selectable radio/checkbox card. One component over the 6 Figma `type`s — the
- * shared shell (border, padding, `radius-xl`, selected `border-brand`) is
+ * shared shell (border, padding, `radius-xl`, selected `border-border-brand`) is
  * constant; only the leading element and control placement change. `radioButton`
  * uses a radio (leading); `checkbox` a checkbox (leading); `iconSimple`/`avatar`/
  * `paymentIcon` put a `leading` visual on the left and the checkbox trailing;
@@ -2271,8 +2301,8 @@ interface SelectMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
 /**
  * List-item primitive for `Select` and Multi-select dropdowns. One component over
  * both: `multi` swaps the trailing selected-check for a leading checkbox. The
- * shared shell is a full-width row with hover `bg-primary-hover`; `label` is
- * `text-primary`, `supportingText` sits inline in `text-tertiary`.
+ * shared shell is a full-width row with hover `bg-bg-primary-hover`; `label` is
+ * `text-text-primary`, `supportingText` sits inline in `text-text-tertiary`.
  */
 declare function SelectMenuItem({ label, supportingText, selected, size, leading, multi, disabled, className, ...rest }: SelectMenuItemProps): react.JSX.Element;
 
@@ -2296,7 +2326,7 @@ interface SidebarNavigationProps extends Omit<HTMLAttributes<HTMLElement>, "titl
  * a fixed-width rail (`slim` collapses to 68px). Composes existing `Nav*`
  * components via slots/children — it does not reimplement nav items. On mobile
  * the rail is hidden behind a hamburger (`NavMenuButton`); opening it shows a
- * `bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
+ * `bg-bg-overlay` + `backdrop-blur-md` scrim and slides the rail in as a drawer.
  *
  * NOTE: `dualTier`'s icon-rail + expanding-panel split is simplified to a single
  * 280px column here — compose the icon rail separately if you need the two-tier
@@ -2386,8 +2416,8 @@ interface SocialButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>
     children?: ReactNode;
 }
 /**
- * Social-login button. All themes share the neutral white shell (border-primary,
- * shadow-xs, `text-secondary` label) — `theme` only controls the brand glyph:
+ * Social-login button. All themes share the neutral white shell (border-border-primary,
+ * shadow-xs, `text-text-secondary` label) — `theme` only controls the brand glyph:
  * `color`/`brand` = full color, `gray` = monochrome (CSS grayscale, flagged
  * approximation of UntitledUI's true single-color gray logos). `iconOnly` drops
  * the label for a square button.
@@ -2524,7 +2554,7 @@ interface TableHeaderLabelProps extends HTMLAttributes<HTMLDivElement> {
     helpIcon?: ReactNode;
 }
 /**
- * Column-header label — `text-xs` semibold in `text-quaternary` (→ `text-tertiary`
+ * Column-header label — `text-xs` semibold in `text-text-quaternary` (→ `text-text-tertiary`
  * on hover), with an optional sort `arrow` and trailing `helpIcon` slot. Consumed
  * by `TableHeaderCell`.
  */
@@ -2639,7 +2669,7 @@ interface ToggleProps {
     "aria-label"?: string;
 }
 /**
- * Switch toggle. `default` = filled track (`bg-brand-solid` when on); `slim` = a
+ * Switch toggle. `default` = filled track (`bg-bg-brand-solid` when on); `slim` = a
  * thinner track with a bordered knob (uses the `toggle-slim-border-pressed`
  * tokens when on). The `_Toggle base` control is inline (not a separate export).
  * Controlled via `checked`/`onCheckedChange`; optional `label`/`supportingText`.
@@ -2683,7 +2713,7 @@ interface TreeViewItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "onTogg
 /**
  * One row of a `TreeView`. Composes `TreeViewConnector` for the `level` indent
  * guides, plus an optional expand chevron, `checkbox`, `icon` and label. Selected
- * → `bg-secondary`; hover → `bg-primary-hover`. Width is fluid (parent controls).
+ * → `bg-bg-secondary`; hover → `bg-bg-primary-hover`. Width is fluid (parent controls).
  */
 declare function TreeViewItem({ size, level, selected, expandable, open, onToggle, checkbox, checked, onCheckedChange, icon, dragHandle, children, className, ...rest }: TreeViewItemProps): react.JSX.Element;
 
@@ -2734,7 +2764,7 @@ interface VerificationCodeInputProps {
  * OTP-style verification code input. `digits` 4 or 6 separate single-character
  * cells (6 shows a centre "-" separator); large display typography
  * (`display-lg`/`display-xl`). Controlled via `value`/`onChange`; auto-advances
- * focus on entry and steps back on backspace. Cell borders use `border-primary`
+ * focus on entry and steps back on backspace. Cell borders use `border-border-primary`
  * (= `utility-neutral-300` #d4d4d4, same value).
  */
 declare function VerificationCodeInput({ digits, value, onChange, size, label, hint, destructive, disabled, className, "aria-label": ariaLabel, }: VerificationCodeInputProps): react.JSX.Element;
@@ -2759,4 +2789,4 @@ declare namespace index {
   export { index_BoxIllustration as BoxIllustration, index_CloudIllustration as CloudIllustration, index_CreditCardIllustration as CreditCardIllustration, index_DocumentsIllustration as DocumentsIllustration };
 }
 
-export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, CalendarCell, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventColor, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, CalendarHeader, type CalendarHeaderProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerProps, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu };
+export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, CalendarCell, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventColor, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, CalendarHeader, type CalendarHeaderProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerProps, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, type FeaturedIconTheme, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, type NavAccountCardBreakpoint, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu };

package/dist/index.js

@@ -5072,18 +5072,18 @@ function AdvancedFilterBar({
   ] });
 }
 var hierarchyClasses = {
-  Primary: "bg-brand-solid text-white border-2 border-white/[0.12] hover:bg-bg-brand-solid-hover",
-  Secondary: "bg-bg-primary text-text-secondary border border-border-primary",
-  Tertiary: "bg-transparent text-text-tertiary border-0",
-  "Link color": "bg-transparent text-text-brand-secondary border-0 p-0",
-  "Link gray": "bg-transparent text-text-tertiary border-0 p-0"
+  Primary: "bg-bg-brand-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-brand-solid-hover",
+  Secondary: "bg-bg-primary text-text-secondary border border-border-primary shadow-skeuomorphic hover:bg-bg-primary-hover",
+  Tertiary: "bg-transparent text-text-tertiary border-0 hover:bg-bg-secondary",
+  "Link color": "bg-transparent text-text-brand-secondary border-0 p-0 hover:text-text-brand-secondary-hover",
+  "Link gray": "bg-transparent text-text-tertiary border-0 p-0 hover:text-text-tertiary-hover"
 };
 var sizeClasses = {
-  xs: "px-[10px] py-sm text-xs",
-  sm: "px-lg py-md text-xs",
-  md: "px-[14px] py-[10px] text-sm",
-  lg: "px-xl py-[10px] text-md",
-  xl: "px-[18px] py-lg text-md"
+  xs: "px-[10px] py-sm gap-xs text-xs font-semibold",
+  sm: "px-lg py-md gap-xs text-xs font-semibold",
+  md: "px-[14px] py-[10px] gap-xs text-sm font-semibold",
+  lg: "px-xl py-[10px] gap-sm text-md font-semibold",
+  xl: "px-[18px] py-lg gap-sm text-md font-semibold"
 };
 function Button({
   hierarchy = "Primary",
@@ -5098,8 +5098,10 @@ function Button({
     "button",
     {
       className: clsx_default(
-        "font-body font-semibold rounded-md cursor-pointer transition-colors",
-        "disabled:opacity-50 disabled:cursor-not-allowed",
+        "inline-flex items-center justify-center font-body rounded-md",
+        "cursor-pointer transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
         hierarchyClasses[hierarchy],
         sizeClasses[size],
         className
@@ -5107,7 +5109,7 @@ function Button({
       disabled: disabled || loading,
       "aria-disabled": disabled || loading,
       ...rest,
-      children: loading ? "Loading\u2026" : children
+      children: loading ? /* @__PURE__ */ jsx("span", { className: "opacity-70", children: "Loading\u2026" }) : children
     }
   );
 }
@@ -5958,7 +5960,7 @@ function ButtonCloseX({
   );
 }
 var hierarchyClasses2 = {
-  Primary: "bg-error-solid text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-error-solid-hover",
+  Primary: "bg-bg-error-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-error-solid-hover",
   Secondary: "bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
   Tertiary: "bg-transparent text-text-error-primary border-0 hover:bg-bg-error-primary",
   Link: "bg-transparent text-text-error-primary border-0 p-0 hover:text-text-error-primary"
@@ -5984,7 +5986,7 @@ function ButtonDestructive({
     {
       className: clsx_default(
         "font-body font-semibold rounded-md cursor-pointer transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-border-error focus-visible:ring-offset-2 focus-visible:ring-offset-bg-bg-primary",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         hierarchyClasses2[hierarchy],
         hierarchy === "Link" ? "" : sizeClasses4[size],
@@ -6217,7 +6219,7 @@ function CalendarColumnHeader({
           {
             className: clsx_default(
               "flex items-center justify-center text-xs font-semibold",
-              current ? "size-6 rounded-full bg-brand-solid text-white" : "text-text-secondary"
+              current ? "size-6 rounded-full bg-bg-brand-solid text-white" : "text-text-secondary"
             ),
             "aria-current": current ? "date" : void 0,
             children: date2
@@ -6476,7 +6478,7 @@ function CalendarViewDropdown({
                       "flex size-4 shrink-0 items-center justify-center rounded-full border",
                       isSelected ? "border-border-brand" : "border-border-primary"
                     ),
-                    children: isSelected ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-brand-solid" }) : null
+                    children: isSelected ? /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-bg-brand-solid" }) : null
                   }
                 ),
                 /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: opt.label }),
@@ -28847,7 +28849,7 @@ function CheckControlVisual({
         "peer-focus-visible:ring-2 peer-focus-visible:ring-border-brand peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-primary",
         type === "radio" ? "rounded-full" : "rounded-sm",
         boxSize[size],
-        disabled ? "border-border-primary bg-bg-tertiary" : active ? "border-brand-solid bg-brand-solid" : "border-border-primary bg-bg-primary"
+        disabled ? "border-border-primary bg-bg-tertiary" : active ? "border-bg-brand-solid bg-bg-brand-solid" : "border-border-primary bg-bg-primary"
       ),
       children: [
         type === "checkbox" && checked && !indeterminate ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: glyphSize[size], "aria-hidden": true, children: /* @__PURE__ */ jsx(
@@ -29296,7 +29298,7 @@ function ContentDivider({
   );
 }
 var sizeConfig = {
-  sm: { box: "p-3xl rounded-xl", heading: "text-lg", body: "text-md" },
+  sm: { box: "p-3xl rounded-2xl", heading: "text-lg", body: "text-md" },
   md: { box: "p-4xl rounded-2xl", heading: "text-xl", body: "text-lg" }
 };
 function ContentFeatureText({
@@ -29947,6 +29949,100 @@ function EmptyState({
     }
   );
 }
+var boxSize2 = {
+  sm: "size-8",
+  // 32px
+  md: "size-10",
+  // 40px
+  lg: "size-12",
+  // 48px
+  xl: "size-14"
+  // 56px
+};
+var iconPx = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28
+};
+function radiusFor(theme) {
+  if (theme === "light") return "rounded-full";
+  if (theme === "modern-neue") return "rounded-lg";
+  return "rounded-xl";
+}
+var lightBg = {
+  brand: "bg-bg-brand-secondary",
+  gray: "bg-bg-secondary",
+  error: "bg-bg-error-secondary",
+  warning: "bg-bg-warning-secondary",
+  success: "bg-bg-success-secondary"
+};
+var lightFg = {
+  brand: "text-fg-brand-primary",
+  gray: "text-fg-secondary",
+  error: "text-fg-error-primary",
+  warning: "text-fg-warning-primary",
+  success: "text-fg-success-primary"
+};
+var darkBg = {
+  brand: "bg-bg-brand-solid",
+  gray: "bg-bg-secondary-solid",
+  error: "bg-bg-error-solid",
+  warning: "bg-bg-warning-solid",
+  success: "bg-bg-success-solid"
+};
+var gradientFill = {
+  brand: "bg-gradient-to-br from-utility-brand-50 to-utility-brand-200",
+  gray: "bg-gradient-to-br from-utility-neutral-50 to-utility-neutral-200",
+  error: "bg-gradient-to-br from-utility-red-50 to-utility-red-200",
+  warning: "bg-gradient-to-br from-utility-amber-50 to-utility-amber-200",
+  success: "bg-gradient-to-br from-utility-green-50 to-utility-green-200"
+};
+function FeaturedIcon({
+  icon,
+  color: color2 = "brand",
+  theme = "light",
+  size = "md",
+  className,
+  ...rest
+}) {
+  const px = iconPx[size];
+  const themeClasses = clsx_default(
+    theme === "light" && [lightBg[color2], lightFg[color2]],
+    theme === "dark" && [
+      darkBg[color2],
+      "text-fg-white border-2 border-[rgba(255,255,255,0.12)] shadow-skeuomorphic"
+    ],
+    theme === "gradient" && [gradientFill[color2], "text-fg-white"],
+    theme === "modern" && [
+      "bg-bg-primary text-fg-secondary border border-border-primary shadow-skeuomorphic"
+    ],
+    theme === "modern-neue" && [
+      "bg-bg-primary text-fg-secondary border border-border-primary shadow-xs"
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx_default(
+        "inline-flex shrink-0 items-center justify-center",
+        boxSize2[size],
+        radiusFor(theme),
+        themeClasses,
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          style: { width: px, height: px, display: "inline-flex" },
+          children: icon
+        }
+      )
+    }
+  );
+}
 var avatarSize2 = {
   sm: "size-8",
   // 32px
@@ -31397,7 +31493,7 @@ function MetricItem({
     }
   );
 }
-var FeaturedIcon = ({ children }) => /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border-primary text-fg-secondary shadow-xs", children });
+var FeaturedIcon2 = ({ children }) => /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border-primary text-fg-secondary shadow-xs", children });
 var XClose2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15 5 5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function ModalHeader({
   title,
@@ -31431,7 +31527,7 @@ function ModalHeader({
               isCenter && "items-center"
             ),
             children: [
-              icon && /* @__PURE__ */ jsx(FeaturedIcon, { children: icon }),
+              icon && /* @__PURE__ */ jsx(FeaturedIcon2, { children: icon }),
               /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -31748,6 +31844,18 @@ var LogOut = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "non
     strokeLinejoin: "round"
   }
 ) });
+var LayeredAvatar = ({ src, online }) => /* @__PURE__ */ jsxs("span", { className: "relative inline-flex size-10 shrink-0 rounded-full border-[0.75px] border-border-secondary-alt bg-bg-primary p-[1px] shadow-xs", children: [
+  /* @__PURE__ */ jsx("span", { className: "flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]", children: /* @__PURE__ */ jsx("img", { src, alt: "", className: "size-full rounded-full object-cover" }) }),
+  online !== void 0 && /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx_default(
+        "absolute bottom-[-2px] right-[-2px] size-[14px] rounded-full border-[1.5px] border-bg-primary",
+        online ? "bg-fg-success-secondary" : "bg-utility-neutral-300"
+      )
+    }
+  )
+] });
 var AvatarLabel = ({ avatar, name, email }) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-md", children: [
   avatar && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: avatar }),
   /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col text-left", children: [
@@ -31758,7 +31866,10 @@ var AvatarLabel = ({ avatar, name, email }) => /* @__PURE__ */ jsxs("div", { cla
 function NavAccountCard({
   variant = "card",
   open = false,
+  breakpoint = "desktop",
   avatar,
+  src,
+  online,
   name,
   email,
   onToggle,
@@ -31767,17 +31878,20 @@ function NavAccountCard({
   className,
   ...rest
 }) {
+  const widthClass = breakpoint === "mobile" ? "w-[256px]" : "w-[280px]";
+  const avatarNode = avatar ?? (src !== void 0 ? /* @__PURE__ */ jsx(LayeredAvatar, { src, online }) : void 0);
   if (variant === "simple") {
     return /* @__PURE__ */ jsxs(
       "div",
       {
         className: clsx_default(
-          "relative flex w-[280px] items-start gap-xl border-t border-border-secondary px-md pt-2xl",
+          "relative flex items-start gap-xl border-t border-border-secondary px-md pt-2xl",
+          widthClass,
           className
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx(AvatarLabel, { avatar, name, email }),
+          /* @__PURE__ */ jsx(AvatarLabel, { avatar: avatarNode, name, email }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -31792,7 +31906,7 @@ function NavAccountCard({
       }
     );
   }
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("relative w-[280px]", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("relative", widthClass, className), ...rest, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -31800,7 +31914,7 @@ function NavAccountCard({
         onClick: onToggle,
         className: "relative flex w-full items-start gap-xl rounded-xl border border-border-secondary bg-bg-primary-alt p-lg text-left shadow-xs",
         children: [
-          /* @__PURE__ */ jsx(AvatarLabel, { avatar, name, email }),
+          /* @__PURE__ */ jsx(AvatarLabel, { avatar: avatarNode, name, email }),
           /* @__PURE__ */ jsx(
             "span",
             {
@@ -32071,7 +32185,7 @@ var GLYPH = {
   error: "M10 6.67V10m0 3.33h.01M18.33 10a8.33 8.33 0 1 1-16.66 0 8.33 8.33 0 0 1 16.66 0Z"
 };
 var XClose5 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15 5 5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var FeaturedIcon2 = ({ variant }) => /* @__PURE__ */ jsxs("span", { className: clsx_default("relative inline-flex size-5 shrink-0 items-center justify-center", RING[variant].split(" ")[1]), children: [
+var FeaturedIcon3 = ({ variant }) => /* @__PURE__ */ jsxs("span", { className: clsx_default("relative inline-flex size-5 shrink-0 items-center justify-center", RING[variant].split(" ")[1]), children: [
   /* @__PURE__ */ jsx("span", { className: clsx_default("absolute inset-[-20%] rounded-full border-2 opacity-30", RING[variant].split(" ")[0]) }),
   /* @__PURE__ */ jsx("span", { className: clsx_default("absolute inset-[-45%] rounded-full border-2 opacity-10", RING[variant].split(" ")[0]) }),
   /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "relative size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: GLYPH[variant], stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
@@ -32096,7 +32210,7 @@ function Notification({
       ),
       ...rest,
       children: [
-        leadingMedia ?? /* @__PURE__ */ jsx(FeaturedIcon2, { variant }),
+        leadingMedia ?? /* @__PURE__ */ jsx(FeaturedIcon3, { variant }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-lg pr-8", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-xs", children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }),
@@ -32916,7 +33030,7 @@ function SidebarNavigation({
     }
   );
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("aside", { className: "hidden h-full md:block", children: rail }),
+    /* @__PURE__ */ jsx("aside", { className: "hidden h-full md:flex", children: rail }),
     /* @__PURE__ */ jsxs("div", { className: "md:hidden", children: [
       /* @__PURE__ */ jsx(NavMenuButton, { opened: isOpen, onClick: () => setOpen(!isOpen) }),
       isOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex", children: [
@@ -33832,6 +33946,6 @@ object-assign/index.js:
   *)
 */
 
-export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu };
+export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeaturedIcon, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map