@borisj74/bv-ds 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -5093,18 +5093,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-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",
@@ -5119,8 +5119,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
@@ -5128,7 +5130,7 @@ function Button({
       disabled: disabled || loading,
       "aria-disabled": disabled || loading,
       ...rest,
-      children: loading ? "Loading\u2026" : children
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: "Loading\u2026" }) : children
     }
   );
 }
@@ -5979,8 +5981,8 @@ function ButtonCloseX({
   );
 }
 var hierarchyClasses2 = {
-  Primary: "bg-error-solid text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-error-solid-hover",
-  Secondary: "bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
+  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-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"
 };
@@ -6005,7 +6007,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],
@@ -31769,6 +31771,18 @@ var LogOut = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16",
     strokeLinejoin: "round"
   }
 ) });
+var LayeredAvatar = ({ src, online }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", className: "size-full rounded-full object-cover" }) }),
+  online !== void 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-md", children: [
   avatar && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: avatar }),
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col text-left", children: [
@@ -31779,7 +31793,10 @@ var AvatarLabel = ({ avatar, name, email }) => /* @__PURE__ */ jsxRuntime.jsxs("
 function NavAccountCard({
   variant = "card",
   open = false,
+  breakpoint = "desktop",
   avatar,
+  src,
+  online,
   name,
   email,
   onToggle,
@@ -31788,17 +31805,20 @@ function NavAccountCard({
   className,
   ...rest
 }) {
+  const widthClass = breakpoint === "mobile" ? "w-[256px]" : "w-[280px]";
+  const avatarNode = avatar ?? (src !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LayeredAvatar, { src, online }) : void 0);
   if (variant === "simple") {
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AvatarLabel, { avatar, name, email }),
+          /* @__PURE__ */ jsxRuntime.jsx(AvatarLabel, { avatar: avatarNode, name, email }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -31813,7 +31833,7 @@ function NavAccountCard({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("relative w-[280px]", className), ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("relative", widthClass, className), ...rest, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -31821,7 +31841,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__ */ jsxRuntime.jsx(AvatarLabel, { avatar, name, email }),
+          /* @__PURE__ */ jsxRuntime.jsx(AvatarLabel, { avatar: avatarNode, name, email }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
@@ -32937,7 +32957,7 @@ function SidebarNavigation({
     }
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "hidden h-full md:block", children: rail }),
+    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "hidden h-full md:flex", children: rail }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden", children: [
       /* @__PURE__ */ jsxRuntime.jsx(NavMenuButton, { opened: isOpen, onClick: () => setOpen(!isOpen) }),
       isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex", children: [

package/dist/index.d.cts

@@ -1689,12 +1689,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). */
@@ -1718,7 +1726,7 @@ interface NavAccountCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "titl
  * 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"> {
@@ -2759,4 +2767,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, 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.d.ts

@@ -1689,12 +1689,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). */
@@ -1718,7 +1726,7 @@ interface NavAccountCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "titl
  * 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"> {
@@ -2759,4 +2767,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, 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-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,8 +5960,8 @@ function ButtonCloseX({
   );
 }
 var hierarchyClasses2 = {
-  Primary: "bg-error-solid text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-error-solid-hover",
-  Secondary: "bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
+  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-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],
@@ -31748,6 +31750,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 +31772,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 +31784,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 +31812,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 +31820,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",
             {
@@ -32916,7 +32936,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: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
   "license": "MIT",
   "type": "module",

package/src/components/Button/Button.tsx

@@ -15,32 +15,44 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   loading?: boolean;
 }
 
-// NOTE: this is a placeholder implementation to verify the build/Storybook
-// pipeline end-to-end. The figma-to-react skill should overwrite this with
-// the full per-hierarchy/per-size token mapping from design.md §3 (all 5
-// sizes, all 5 hierarchies, skeuomorphic shadow stack on Primary/Secondary).
+// Token class names use the doubled-prefix form that matches the nested
+// tailwind-preset.js color groups (v0.1.2+):
+//   colors.bg["brand-solid"]  → bg-bg-brand-solid
+//   colors.text["secondary"]  → text-text-secondary
+//   colors.border["primary"]  → border-border-primary
 //
-// Padding values below use Tailwind arbitrary values ([14px], [10px], etc)
-// rather than the spacing-* scale on purpose — design.md §3 confirms the
-// real Figma component uses raw px at md/lg/xl, not the nearest token.
-// Don't "fix" these to spacing-md/spacing-lg; that would silently diverge
-// from the source design.
+// Padding values use Tailwind arbitrary values ([14px], [10px], etc) rather
+// than the spacing-* scale — design.md §3 confirms the real Figma component
+// uses raw px at certain sizes. Don't "fix" these to spacing tokens; that
+// would silently diverge from the source design.
+//
+// Primary/Secondary use the skeuomorphic shadow stack confirmed in design.md:
+//   shadow-xs outer + inner border highlight + inner bottom shading.
 
 const hierarchyClasses: Record<ButtonHierarchy, string> = {
   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",
+    "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-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",
 };
 
 const sizeClasses: Record<ButtonSize, string> = {
-  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",
 };
 
 export function Button({
@@ -55,8 +67,10 @@ export function Button({
   return (
     <button
       className={clsx(
-        "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,
@@ -65,7 +79,13 @@ export function Button({
       aria-disabled={disabled || loading}
       {...rest}
     >
-      {loading ? "Loading…" : children}
+      {loading ? (
+        <span className="opacity-70">Loading…</span>
+      ) : (
+        children
+      )}
     </button>
   );
 }
+
+export default Button;

package/src/components/ButtonDestructive/ButtonDestructive.tsx

@@ -20,9 +20,9 @@ export interface ButtonDestructiveProps
 // error ring (border-error).
 const hierarchyClasses: Record<ButtonDestructiveHierarchy, string> = {
   Primary:
-    "bg-error-solid text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-error-solid-hover",
+    "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",
+    "bg-bg-primary text-text-error-primary border 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",
@@ -51,7 +51,7 @@ export function ButtonDestructive({
     <button
       className={clsx(
         "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",
         hierarchyClasses[hierarchy],
         hierarchy === "Link" ? "" : sizeClasses[size],

package/src/components/NavAccountCard/NavAccountCard.tsx

@@ -2,6 +2,7 @@ import { type HTMLAttributes, type ReactNode } from "react";
 import clsx from "clsx";
 
 export type NavAccountCardVariant = "simple" | "card";
+export type NavAccountCardBreakpoint = "desktop" | "mobile";
 
 export interface NavAccountCardProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
@@ -9,7 +10,14 @@ export interface NavAccountCardProps
   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). */
@@ -41,6 +49,28 @@ const LogOut = () => (
   </svg>
 );
 
+/**
+ * Layered avatar treatment from Figma (node 7891:87996): white outer ring +
+ * inner hairline border + status dot. `border-[rgba(0,0,0,0.16)]` is a one-off
+ * value (no matching token) per the Figma spec. Used when `src` is supplied and
+ * no `avatar` slot is given.
+ */
+const LayeredAvatar = ({ src, online }: { src?: string; online?: boolean }) => (
+  <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">
+    <span className="flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]">
+      <img src={src} alt="" className="size-full rounded-full object-cover" />
+    </span>
+    {online !== undefined && (
+      <span
+        className={clsx(
+          "absolute bottom-[-2px] right-[-2px] size-[14px] rounded-full border-[1.5px] border-bg-primary",
+          online ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+        )}
+      />
+    )}
+  </span>
+);
+
 const AvatarLabel = ({ avatar, name, email }: { avatar?: ReactNode; name?: ReactNode; email?: ReactNode }) => (
   <div className="flex min-w-0 flex-1 items-center gap-md">
     {avatar && <span className="shrink-0">{avatar}</span>}
@@ -65,7 +95,10 @@ const AvatarLabel = ({ avatar, name, email }: { avatar?: ReactNode; name?: React
 export function NavAccountCard({
   variant = "card",
   open = false,
+  breakpoint = "desktop",
   avatar,
+  src,
+  online,
   name,
   email,
   onToggle,
@@ -74,16 +107,20 @@ export function NavAccountCard({
   className,
   ...rest
 }: NavAccountCardProps) {
+  const widthClass = breakpoint === "mobile" ? "w-[256px]" : "w-[280px]";
+  const avatarNode = avatar ?? (src !== undefined ? <LayeredAvatar src={src} online={online} /> : undefined);
+
   if (variant === "simple") {
     return (
       <div
         className={clsx(
-          "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}
       >
-        <AvatarLabel avatar={avatar} name={name} email={email} />
+        <AvatarLabel avatar={avatarNode} name={name} email={email} />
         <button
           type="button"
           onClick={onSignOut}
@@ -97,13 +134,13 @@ export function NavAccountCard({
   }
 
   return (
-    <div className={clsx("relative w-[280px]", className)} {...rest}>
+    <div className={clsx("relative", widthClass, className)} {...rest}>
       <button
         type="button"
         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"
       >
-        <AvatarLabel avatar={avatar} name={name} email={email} />
+        <AvatarLabel avatar={avatarNode} name={name} email={email} />
         <span
           className={clsx(
             "absolute right-[7px] top-[7px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary",

package/src/components/NavAccountCard/index.ts

@@ -1,2 +1,6 @@
 export { NavAccountCard } from "./NavAccountCard";
-export type { NavAccountCardProps, NavAccountCardVariant } from "./NavAccountCard";
+export type {
+  NavAccountCardProps,
+  NavAccountCardVariant,
+  NavAccountCardBreakpoint,
+} from "./NavAccountCard";

package/src/components/SidebarNavigation/SidebarNavigation.tsx

@@ -79,7 +79,7 @@ export function SidebarNavigation({
   return (
     <>
       {/* Desktop rail */}
-      <aside className="hidden h-full md:block">{rail}</aside>
+      <aside className="hidden h-full md:flex">{rail}</aside>
 
       {/* Mobile trigger + drawer */}
       <div className="md:hidden">

package/tailwind-preset.js

@@ -1,227 +1,238 @@
 // Shareable Tailwind preset — token names traced from design.md, confirmed
 // against the live Figma file via figma-map.md token pulls. Consumers extend
 // their own tailwind.config.js with this preset so generated class names
-// (bg-brand-solid, text-secondary, p-md, etc.) match the design tokens
-// directly rather than arbitrary values.
+// match the design tokens directly.
 //
 // Usage in a consuming app's tailwind.config.js:
 //   const dsPreset = require("@borisj74/bv-ds/tailwind-preset");
 //   module.exports = { presets: [dsPreset], content: [...] };
 //
-// PEER DEPENDENCY — Recharts: chart components (_ChartMini, and the deferred
-// Line/bar/Pie/Radar wrappers) require `recharts` (>=2) installed in the
-// consuming app. Optional peer dependency: install it only if you use the chart
-// components. Recharts color props take hex strings, so those components read
-// token hex values from this preset directly (not Tailwind class names).
+// KEY NAMING — v0.1.2 fix:
+// Colors are nested under their category group (bg, text, border, fg).
+// Tailwind joins group + key with a hyphen at class-generation time:
+//   colors.bg["brand-solid"]   → bg-bg-brand-solid   ✓
+//   colors.text["secondary"]   → text-text-secondary  ✓
+//   colors.border["primary"]   → border-border-primary ✓
+// This prevents cross-category collisions (text-secondary #404040 vs
+// bg-secondary #fafafa) that caused the doubled-prefix bug in v0.1.1.
+//
+// Components must use the doubled-prefix form in className:
+//   bg-bg-brand-solid, text-text-secondary, border-border-primary, etc.
+//
+// PEER DEPENDENCY — Recharts requires `recharts` (>=2) in consuming app.
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   theme: {
     extend: {
       colors: {
-        // Text — design.md §2 "Color — Text"
-        "text-primary": "#171717",
-        "text-primary-on-brand": "#ffffff",
-        "text-secondary": "#404040",
-        "text-secondary-hover": "#262626",
-        "text-secondary-on-brand": "#e9d7fe",
-        "text-tertiary": "#525252",
-        "text-tertiary-hover": "#404040",
-        "text-tertiary-on-brand": "#e9d7fe",
-        "text-quaternary": "#737373",
-        "text-quaternary-on-brand": "#d6bbfb",
-        "text-white": "#ffffff",
-        "text-placeholder": "#737373",
-        "text-brand-primary": "#42307d",
-        "text-brand-secondary": "#6941c6",
-        "text-brand-secondary-hover": "#53389e",
-        "text-brand-tertiary": "#7f56d9",
-        "text-brand-tertiary-alt": "#7f56d9",
-        "text-error-primary": "#dc2626",
-        "text-warning-primary": "#ca8a04",
-        "text-success-primary": "#16a34a",
 
-        // Background — design.md §2 "Color — Background"
-        "bg-primary": "#ffffff",
-        "bg-primary-alt": "#ffffff",
-        "bg-primary-hover": "#fafafa",
-        "bg-primary-solid": "#0a0a0a",
-        "bg-secondary": "#fafafa",
-        "bg-secondary-alt": "#fafafa",
-        "bg-secondary-hover": "#f5f5f5",
-        "bg-secondary-solid": "#525252",
-        "bg-tertiary": "#f5f5f5",
-        "bg-quaternary": "#e5e5e5",
-        "bg-overlay": "#0a0a0a",
-        "bg-brand-primary": "#f9f5ff",
-        "bg-brand-primary-alt": "#f9f5ff",
-        "bg-brand-secondary": "#f4ebff",
-        "bg-brand-solid": "#7f56d9",
-        "bg-brand-solid-hover": "#6941c6",
-        "bg-error-primary": "#fef2f2",
-        "bg-error-secondary": "#fee2e2",
-        "bg-error-solid": "#dc2626",
-        "bg-error-solid-hover": "#b91c1c",
-        "bg-warning-primary": "#fefce8",
-        "bg-warning-secondary": "#fef9c3",
-        "bg-warning-solid": "#ca8a04",
-        "bg-success-primary": "#f0fdf4",
-        "bg-success-secondary": "#dcfce7",
-        "bg-success-solid": "#16a34a",
+        // ── Background tokens ─────────────────────────────────────────────
+        // Usage: bg-bg-primary, bg-bg-brand-solid, bg-bg-error-solid, etc.
+        bg: {
+          "primary":              "#ffffff",
+          "primary-alt":          "#ffffff",
+          "primary-hover":        "#fafafa",
+          "primary-solid":        "#0a0a0a",
+          "secondary":            "#fafafa",
+          "secondary-alt":        "#fafafa",
+          "secondary-hover":      "#f5f5f5",
+          "secondary-solid":      "#525252",
+          "tertiary":             "#f5f5f5",
+          "quaternary":           "#e5e5e5",
+          "overlay":              "#0a0a0a",
+          "brand-primary":        "#f9f5ff",
+          "brand-primary-alt":    "#f9f5ff",
+          "brand-secondary":      "#f4ebff",
+          "brand-solid":          "#7f56d9",
+          "brand-solid-hover":    "#6941c6",
+          "brand-section":        "#53389e",
+          "brand-section-subtle": "#6941c6",
+          "error-primary":        "#fef2f2",
+          "error-secondary":      "#fee2e2",
+          "error-solid":          "#dc2626",
+          "error-solid-hover":    "#b91c1c",
+          "warning-primary":      "#fefce8",
+          "warning-secondary":    "#fef9c3",
+          "warning-solid":        "#ca8a04",
+          "success-primary":      "#f0fdf4",
+          "success-secondary":    "#dcfce7",
+          "success-solid":        "#16a34a",
+        },
+
+        // ── Text tokens ───────────────────────────────────────────────────
+        // Usage: text-text-primary, text-text-secondary, text-text-brand-secondary, etc.
+        text: {
+          "primary":                "#171717",
+          "primary-on-brand":       "#ffffff",
+          "secondary":              "#404040",
+          "secondary-hover":        "#262626",
+          "secondary-on-brand":     "#e9d7fe",
+          "tertiary":               "#525252",
+          "tertiary-hover":         "#404040",
+          "tertiary-on-brand":      "#e9d7fe",
+          "quaternary":             "#737373",
+          "quaternary-on-brand":    "#d6bbfb",
+          "white":                  "#ffffff",
+          "placeholder":            "#737373",
+          "brand-primary":          "#42307d",
+          "brand-secondary":        "#6941c6",
+          "brand-secondary-hover":  "#53389e",
+          "brand-tertiary":         "#7f56d9",
+          "brand-tertiary-alt":     "#7f56d9",
+          "error-primary":          "#dc2626",
+          "warning-primary":        "#ca8a04",
+          "success-primary":        "#16a34a",
+        },
 
-        // Border — design.md §2 "Color — Border"
-        "border-primary": "#d4d4d4",
-        "border-secondary": "#e5e5e5",
-        "border-secondary-alt": "rgba(0,0,0,0.1)",
-        "border-tertiary": "#f5f5f5",
-        "border-brand": "#9e77ed",
-        "border-brand-alt": "#7f56d9",
-        "border-error": "#ef4444",
-        "border-error-subtle": "#fca5a5",
+        // ── Border tokens ─────────────────────────────────────────────────
+        // Usage: border-border-primary, border-border-brand, etc.
+        border: {
+          "primary":              "#d4d4d4",
+          "secondary":            "#e5e5e5",
+          "secondary-alt":        "rgba(0,0,0,0.1)",
+          "tertiary":             "#f5f5f5",
+          "brand":                "#9e77ed",
+          "brand-alt":            "#7f56d9",
+          "error":                "#ef4444",
+          "error-subtle":         "#fca5a5",
+        },
 
-        // Foreground (icons) — design.md §2 "Color — Foreground"
-        "fg-primary": "#171717",
-        "fg-secondary": "#404040",
-        "fg-secondary-hover": "#262626",
-        "fg-tertiary": "#525252",
-        "fg-tertiary-hover": "#404040",
-        "fg-quaternary": "#a3a3a3",
-        "fg-quaternary-hover": "#737373",
-        "fg-white": "#ffffff",
-        "fg-brand-primary": "#7f56d9",
-        "fg-brand-primary-alt": "#7f56d9",
-        "fg-brand-secondary": "#9e77ed",
-        "fg-brand-secondary-alt": "#9e77ed",
-        "fg-error-primary": "#dc2626",
-        "fg-error-secondary": "#ef4444",
-        "fg-warning-primary": "#ca8a04",
-        "fg-warning-secondary": "#eab308",
-        "fg-success-primary": "#16a34a",
-        "fg-success-secondary": "#22c55e",
+        // ── Foreground / icon tokens ──────────────────────────────────────
+        // Usage: text-fg-primary, bg-fg-brand-primary, etc.
+        fg: {
+          "primary":              "#171717",
+          "secondary":            "#404040",
+          "secondary-hover":      "#262626",
+          "tertiary":             "#525252",
+          "tertiary-hover":       "#404040",
+          "quaternary":           "#a3a3a3",
+          "quaternary-hover":     "#737373",
+          "white":                "#ffffff",
+          "brand-primary":        "#7f56d9",
+          "brand-primary-alt":    "#7f56d9",
+          "brand-secondary":      "#9e77ed",
+          "brand-secondary-alt":  "#9e77ed",
+          "error-primary":        "#dc2626",
+          "error-secondary":      "#ef4444",
+          "warning-primary":      "#ca8a04",
+          "warning-secondary":    "#eab308",
+          "success-primary":      "#16a34a",
+          "success-secondary":    "#22c55e",
+        },
 
-        // Utility colors — Component colors/Utility/<Family>/utility-<family>-<shade>
-        // Harvested live from Figma (Badge node 1046:3819 + Calendar event
-        // 7991:78181). NOTE: Figma's actual family names are color names
-        // (yellow/green/red/neutral), NOT the semantic Warning/Success/Error/Gray
-        // aliases — using the real names so utility-* classes round-trip to the
-        // file. Shades included are those Figma actually defines per family — a
-        // superset of the requested 50/200/400/500/700 (also 100/600 and
-        // neutral-300) because Charts/Calendar consume them. Emerald/Amber have
-        // no -400 in the source; omitted rather than invented. The full -100
-        // ramp is now filled for all 14 families; slate-100 (#f1f5f9) and
-        // sky-100 (#e0f2fe) were derived from Tailwind's palette (every other
-        // slate/sky shade matched Tailwind exactly) since they weren't in a
-        // Figma var dump — all other -100s came straight from Figma.
-        "utility-brand-50": "#f9f5ff",
-        "utility-brand-100": "#f4ebff",
-        "utility-brand-200": "#e9d7fe",
-        "utility-brand-400": "#b692f6",
-        "utility-brand-500": "#9e77ed",
-        "utility-brand-600": "#7f56d9",
-        "utility-brand-700": "#6941c6",
-        "utility-yellow-50": "#fefce8",
-        "utility-yellow-100": "#fef9c3",
-        "utility-yellow-200": "#fef08a",
-        "utility-yellow-400": "#facc15",
-        "utility-yellow-500": "#eab308",
-        "utility-yellow-600": "#ca8a04",
-        "utility-yellow-700": "#a16207",
-        // NOTE: Figma's `utility-success-*` naming maps to `utility-green-*` here —
-        // use `utility-green-*` consistently (no `utility-success-*` keys exist).
-        "utility-green-50": "#f0fdf4",
-        "utility-green-100": "#dcfce7",
-        "utility-green-200": "#bbf7d0",
-        "utility-green-400": "#4ade80",
-        "utility-green-500": "#22c55e",
-        "utility-green-600": "#16a34a",
-        "utility-green-700": "#15803d",
-        "utility-slate-50": "#f8fafc",
-        "utility-slate-100": "#f1f5f9",
-        "utility-slate-200": "#e2e8f0",
-        "utility-slate-400": "#94a3b8",
-        "utility-slate-500": "#64748b",
-        "utility-slate-700": "#334155",
-        "utility-sky-50": "#f0f9ff",
-        "utility-sky-100": "#e0f2fe",
-        "utility-sky-200": "#bae6fd",
-        "utility-sky-400": "#38bdf8",
-        "utility-sky-500": "#0ea5e9",
-        "utility-sky-700": "#0369a1",
-        "utility-indigo-50": "#eef2ff",
-        "utility-indigo-100": "#e0e7ff",
-        "utility-indigo-200": "#c7d2fe",
-        "utility-indigo-400": "#818cf8",
-        "utility-indigo-500": "#6366f1",
-        "utility-indigo-600": "#4f46e5",
-        "utility-indigo-700": "#4338ca",
-        "utility-purple-50": "#faf5ff",
-        "utility-purple-100": "#f3e8ff",
-        "utility-purple-200": "#e9d5ff",
-        "utility-purple-400": "#c084fc",
-        "utility-purple-500": "#a855f7",
-        "utility-purple-600": "#9333ea",
-        "utility-purple-700": "#7e22ce",
-        "utility-blue-50": "#eff6ff",
-        "utility-blue-100": "#dbeafe",
-        "utility-blue-200": "#bfdbfe",
-        "utility-blue-400": "#60a5fa",
-        "utility-blue-500": "#3b82f6",
-        "utility-blue-600": "#2563eb",
-        "utility-blue-700": "#1d4ed8",
-        "utility-pink-50": "#fdf2f8",
-        "utility-pink-100": "#fce7f3",
-        "utility-pink-200": "#fbcfe8",
-        "utility-pink-400": "#f472b6",
-        "utility-pink-500": "#ec4899",
-        "utility-pink-600": "#db2777",
-        "utility-pink-700": "#be185d",
-        "utility-orange-50": "#fff7ed",
-        "utility-orange-100": "#ffedd5",
-        "utility-orange-200": "#fed7aa",
-        "utility-orange-400": "#fb923c",
-        "utility-orange-500": "#f97316",
-        "utility-orange-600": "#ea580c",
-        "utility-orange-700": "#c2410c",
-        "utility-red-50": "#fef2f2",
-        "utility-red-100": "#fee2e2",
-        "utility-red-200": "#fecaca",
-        "utility-red-400": "#f87171",
-        "utility-red-500": "#ef4444",
-        "utility-red-600": "#dc2626",
-        "utility-red-700": "#b91c1c",
-        "utility-neutral-50": "#fafafa",
-        "utility-neutral-100": "#f5f5f5",
-        "utility-neutral-200": "#e5e5e5",
-        "utility-neutral-300": "#d4d4d4",
-        "utility-neutral-400": "#a3a3a3",
-        "utility-neutral-500": "#737373",
-        "utility-neutral-600": "#525252",
-        "utility-neutral-700": "#404040",
-        "utility-emerald-50": "#ecfdf5",
-        "utility-emerald-100": "#d1fae5",
-        "utility-emerald-200": "#a7f3d0",
-        "utility-emerald-500": "#10b981",
-        "utility-emerald-600": "#059669",
-        "utility-emerald-700": "#047857",
-        "utility-amber-50": "#fffbeb",
-        "utility-amber-100": "#fef3c7",
-        "utility-amber-200": "#fde68a",
-        "utility-amber-500": "#f59e0b",
-        "utility-amber-600": "#d97706",
-        "utility-amber-700": "#b45309",
-        // Alpha overlays (Component colors/Alpha) — confirmed values
-        "alpha-white-10": "rgba(255,255,255,0.10)",
-        "alpha-white-90": "rgba(255,255,255,0.90)",
-        "alpha-black-10": "rgba(0,0,0,0.10)",
-        "alpha-black-100": "rgba(0,0,0,1.00)",
-        // Component colors/Components/Sliders — confirmed via get_variable_defs (node 1086:534)
-        "slider-handle-bg": "#ffffff",
-        "slider-handle-border": "#7f56d9",
-        // Component colors/Components/Toggles — confirmed via get_variable_defs (node 1102:4208).
-        // Slim toggle pressed track border; Default toggle uses bg-brand-solid/-hover.
-        "toggle-slim-border-pressed": "#7f56d9",
+        // ── Utility palette ───────────────────────────────────────────────
+        // Usage: bg-utility-brand-50, text-utility-neutral-700, etc.
+        // Flat — no collision risk since all keys share the "utility-" prefix.
+        "utility-brand-50":       "#f9f5ff",
+        "utility-brand-100":      "#f4ebff",
+        "utility-brand-200":      "#e9d7fe",
+        "utility-brand-400":      "#b692f6",
+        "utility-brand-500":      "#9e77ed",
+        "utility-brand-600":      "#7f56d9",
+        "utility-brand-700":      "#6941c6",
+        "utility-yellow-50":      "#fefce8",
+        "utility-yellow-100":     "#fef9c3",
+        "utility-yellow-200":     "#fef08a",
+        "utility-yellow-400":     "#facc15",
+        "utility-yellow-500":     "#eab308",
+        "utility-yellow-600":     "#ca8a04",
+        "utility-yellow-700":     "#a16207",
+        "utility-green-50":       "#f0fdf4",
+        "utility-green-100":      "#dcfce7",
+        "utility-green-200":      "#bbf7d0",
+        "utility-green-400":      "#4ade80",
+        "utility-green-500":      "#22c55e",
+        "utility-green-600":      "#16a34a",
+        "utility-green-700":      "#15803d",
+        "utility-slate-50":       "#f8fafc",
+        "utility-slate-100":      "#f1f5f9",
+        "utility-slate-200":      "#e2e8f0",
+        "utility-slate-400":      "#94a3b8",
+        "utility-slate-500":      "#64748b",
+        "utility-slate-700":      "#334155",
+        "utility-sky-50":         "#f0f9ff",
+        "utility-sky-100":        "#e0f2fe",
+        "utility-sky-200":        "#bae6fd",
+        "utility-sky-400":        "#38bdf8",
+        "utility-sky-500":        "#0ea5e9",
+        "utility-sky-700":        "#0369a1",
+        "utility-indigo-50":      "#eef2ff",
+        "utility-indigo-100":     "#e0e7ff",
+        "utility-indigo-200":     "#c7d2fe",
+        "utility-indigo-400":     "#818cf8",
+        "utility-indigo-500":     "#6366f1",
+        "utility-indigo-600":     "#4f46e5",
+        "utility-indigo-700":     "#4338ca",
+        "utility-purple-50":      "#faf5ff",
+        "utility-purple-100":     "#f3e8ff",
+        "utility-purple-200":     "#e9d5ff",
+        "utility-purple-400":     "#c084fc",
+        "utility-purple-500":     "#a855f7",
+        "utility-purple-600":     "#9333ea",
+        "utility-purple-700":     "#7e22ce",
+        "utility-blue-50":        "#eff6ff",
+        "utility-blue-100":       "#dbeafe",
+        "utility-blue-200":       "#bfdbfe",
+        "utility-blue-400":       "#60a5fa",
+        "utility-blue-500":       "#3b82f6",
+        "utility-blue-600":       "#2563eb",
+        "utility-blue-700":       "#1d4ed8",
+        "utility-pink-50":        "#fdf2f8",
+        "utility-pink-100":       "#fce7f3",
+        "utility-pink-200":       "#fbcfe8",
+        "utility-pink-400":       "#f472b6",
+        "utility-pink-500":       "#ec4899",
+        "utility-pink-600":       "#db2777",
+        "utility-pink-700":       "#be185d",
+        "utility-orange-50":      "#fff7ed",
+        "utility-orange-100":     "#ffedd5",
+        "utility-orange-200":     "#fed7aa",
+        "utility-orange-400":     "#fb923c",
+        "utility-orange-500":     "#f97316",
+        "utility-orange-600":     "#ea580c",
+        "utility-orange-700":     "#c2410c",
+        "utility-red-50":         "#fef2f2",
+        "utility-red-100":        "#fee2e2",
+        "utility-red-200":        "#fecaca",
+        "utility-red-400":        "#f87171",
+        "utility-red-500":        "#ef4444",
+        "utility-red-600":        "#dc2626",
+        "utility-red-700":        "#b91c1c",
+        "utility-neutral-50":     "#fafafa",
+        "utility-neutral-100":    "#f5f5f5",
+        "utility-neutral-200":    "#e5e5e5",
+        "utility-neutral-300":    "#d4d4d4",
+        "utility-neutral-400":    "#a3a3a3",
+        "utility-neutral-500":    "#737373",
+        "utility-neutral-600":    "#525252",
+        "utility-neutral-700":    "#404040",
+        "utility-emerald-50":     "#ecfdf5",
+        "utility-emerald-100":    "#d1fae5",
+        "utility-emerald-200":    "#a7f3d0",
+        "utility-emerald-500":    "#10b981",
+        "utility-emerald-600":    "#059669",
+        "utility-emerald-700":    "#047857",
+        "utility-amber-50":       "#fffbeb",
+        "utility-amber-100":      "#fef3c7",
+        "utility-amber-200":      "#fde68a",
+        "utility-amber-500":      "#f59e0b",
+        "utility-amber-600":      "#d97706",
+        "utility-amber-700":      "#b45309",
+
+        // ── Alpha overlays ────────────────────────────────────────────────
+        "alpha-white-10":         "rgba(255,255,255,0.10)",
+        "alpha-white-90":         "rgba(255,255,255,0.90)",
+        "alpha-black-10":         "rgba(0,0,0,0.10)",
+        "alpha-black-100":        "rgba(0,0,0,1.00)",
+
+        // ── Component-specific tokens ─────────────────────────────────────
+        "slider-handle-bg":                 "#ffffff",
+        "slider-handle-border":             "#7f56d9",
+        "toggle-slim-border-pressed":       "#7f56d9",
         "toggle-slim-border-pressed-hover": "#6941c6",
       },
+
       spacing: {
         none: "0px",
         xxs: "2px",
@@ -240,21 +251,23 @@ module.exports = {
         "9xl": "96px",
         "10xl": "128px",
         "11xl": "160px",
-        // Layout container tokens (Alert / Header navigation / Page header)
         "container-padding-desktop": "32px",
         "container-padding-mobile": "16px",
       },
+
       maxWidth: {
         "container-max-width-desktop": "1280px",
         "width-lg": "640px",
       },
+
       boxShadow: {
-        // design.md §2 — base outer drop + the three-layer skeuomorphic stack
-        // (Shadows/shadow-xs-skeuomorphic).
         xs: "0px 1px 2px 0px rgba(0,0,0,0.05)",
         skeuomorphic:
           "0px 1px 2px 0px rgba(0,0,0,0.05), inset 0px -2px 0px 0px rgba(0,0,0,0.05), inset 0px 0px 0px 1px rgba(0,0,0,0.18)",
+        lg: "0px 12px 16px -4px rgba(0,0,0,0.08), 0px 4px 6px -2px rgba(0,0,0,0.03), 0px 2px 2px -1px rgba(0,0,0,0.04)",
+        xl: "0px 20px 24px -4px rgba(0,0,0,0.08), 0px 8px 8px -4px rgba(0,0,0,0.03), 0px 3px 1.5px -1.5px rgba(0,0,0,0.04)",
       },
+
       borderRadius: {
         none: "0px",
         xxs: "2px",
@@ -268,10 +281,12 @@ module.exports = {
         "4xl": "24px",
         full: "9999px",
       },
+
       fontFamily: {
         body: ["Inter", "sans-serif"],
         display: ["Inter", "sans-serif"],
       },
+
       fontSize: {
         xs: ["12px", { lineHeight: "18px" }],
         sm: ["14px", { lineHeight: "20px" }],
@@ -284,9 +299,7 @@ module.exports = {
         "display-lg": ["48px", { lineHeight: "60px", letterSpacing: "-2px" }],
         "display-xl": ["60px", { lineHeight: "72px", letterSpacing: "-2px" }],
       },
-      // Figma "Backdrop blurs/backdrop-blur-md" = radius 16 (Tailwind's default
-      // backdrop-blur-md is 12px). backdrop-blur-* are Tailwind v3 core utilities
-      // (enabled by default); this just aligns the md value to the design token.
+
       backdropBlur: {
         md: "16px",
       },