@beydesign/storybook 0.2.29 → 0.3.0

package/dist/stories/Navigation/internal/types.js

@@ -0,0 +1,30 @@
+/**
+ * Expanded / collapsed size shared across every navigation panel and its
+ * sub-components.
+ */
+export var NavPanelSize;
+(function (NavPanelSize) {
+    NavPanelSize["Expanded"] = "Expanded";
+    NavPanelSize["Collapsed"] = "Collapsed";
+})(NavPanelSize || (NavPanelSize = {}));
+/**
+ * Visual state of a single navigation item.
+ * `Hover` is mostly useful for documentation/Storybook — at runtime an
+ * `Inactive` item also picks up the hover styling on real pointer hover.
+ */
+export var NavItemState;
+(function (NavItemState) {
+    NavItemState["Active"] = "Active";
+    NavItemState["Inactive"] = "Inactive";
+    NavItemState["Hover"] = "Hover";
+    NavItemState["Disabled"] = "Disabled";
+})(NavItemState || (NavItemState = {}));
+/**
+ * Hierarchy of a navigation item. `First` is a top-level entry (36px row),
+ * `Secondary` is a nested sub-item (28px row, lighter weight).
+ */
+export var NavItemHierarchy;
+(function (NavItemHierarchy) {
+    NavItemHierarchy["First"] = "First";
+    NavItemHierarchy["Secondary"] = "Secondary";
+})(NavItemHierarchy || (NavItemHierarchy = {}));

package/dist/stories/Navigation/navigation.fixtures.d.ts

@@ -0,0 +1,22 @@
+import type { DrawerNavItemConfig } from './Drawer';
+import type { SubNavSection } from './SubNav';
+/**
+ * Sample navigation config shared by the navigation stories.
+ *
+ * The point of this file is the point of the whole design: ONE config drives
+ * both layouts. On desktop `settingsSections` renders as a `SubNav` panel
+ * beside the `Drawer`; on mobile the very same array rides along on the
+ * Settings item's `subNav` and becomes the second pane of `MobileNav`.
+ */
+export declare const settingsSections: SubNavSection[];
+export declare const drawerNavItems: DrawerNavItemConfig[];
+export declare const credits: {
+    usedCredits: number;
+    maxCredits: number;
+};
+export declare const profile: {
+    name: string;
+    email: string;
+};
+/** Display names for the settings keys, for the example page's content area. */
+export declare const settingsLabels: Record<string, string>;

package/dist/stories/Navigation/navigation.fixtures.js

@@ -0,0 +1,64 @@
+/**
+ * Sample navigation config shared by the navigation stories.
+ *
+ * The point of this file is the point of the whole design: ONE config drives
+ * both layouts. On desktop `settingsSections` renders as a `SubNav` panel
+ * beside the `Drawer`; on mobile the very same array rides along on the
+ * Settings item's `subNav` and becomes the second pane of `MobileNav`.
+ */
+export const settingsSections = [
+    {
+        key: 'business',
+        title: 'Your business',
+        items: [{ key: 'branding', text: 'Branding', icon: 'StarFour' }],
+    },
+    {
+        key: 'team',
+        title: 'Team',
+        items: [{ key: 'members', text: 'Members', icon: 'UsersThree' }],
+    },
+    {
+        key: 'billing',
+        title: 'Billing & plans',
+        items: [
+            { key: 'subscription', text: 'Subscription', icon: 'CreditCard' },
+            { key: 'invoices', text: 'Invoices', icon: 'FileText' },
+        ],
+    },
+    {
+        key: 'developers',
+        title: 'Developers',
+        items: [
+            { key: 'api-keys', text: 'API keys', icon: 'Key' },
+            { key: 'webhooks', text: 'Webhooks', icon: 'Graph' },
+        ],
+    },
+];
+export const drawerNavItems = [
+    { key: 'home', text: 'Home', icon: 'House' },
+    { key: 'avatars', text: 'Avatars', icon: 'UserFocus' },
+    { key: 'agents', text: 'My Agents', icon: 'Headset' },
+    { key: 'ttv', text: 'Text-to-Video', icon: 'VideoCamera' },
+    { key: 'kb', text: 'Knowledge Base', icon: 'Book' },
+    { key: 'conversations', text: 'Conversations', icon: 'ChatTeardropDots' },
+    { key: 'analytics', text: 'Analytics', icon: 'ChartBar' },
+    { key: 'api', text: 'API keys', icon: 'Key' },
+    { key: 'developers', text: 'Developers', icon: 'BracketsCurly' },
+    {
+        key: 'settings',
+        text: 'Settings',
+        icon: 'GearSix',
+        subNav: { title: 'Settings', sections: settingsSections },
+    },
+];
+export const credits = { usedCredits: 500, maxCredits: 2000 };
+export const profile = { name: 'Emma Novak', email: 'emma@example.com' };
+/** Display names for the settings keys, for the example page's content area. */
+export const settingsLabels = {
+    branding: 'Branding',
+    members: 'Members',
+    subscription: 'Subscription',
+    invoices: 'Invoices',
+    'api-keys': 'API keys',
+    webhooks: 'Webhooks',
+};

package/dist/stories/Navigation/types.d.ts

@@ -1,8 +1,9 @@
+import { CSSProperties } from 'react';
 import { SxProps, Theme } from '@mui/material';
 import { IconName } from '../../utils';
 import { AvatarProps } from '../UI';
 import { CreditsCardProps } from '../Credits';
-import { DrawerProps } from '../Drawer';
+import { DrawerBodyProps, DrawerProps } from './Drawer';
 /**
  * Header component props
  */
@@ -185,6 +186,28 @@ export interface ProcessHeaderProps {
     /** The class name to apply to the component */
     className?: string;
 }
+/**
+ * Props for the {@link MobileNav} overlay — the single navigation panel used
+ * below the mobile breakpoint, which holds the `Drawer` and any `subNav` as
+ * pushable panes.
+ */
+export interface MobileNavProps extends Omit<DrawerBodyProps, 'size' | 'onSubNavOpen'> {
+    /** Whether the overlay is open. */
+    open: boolean;
+    /**
+     * Fired with the next open value — when the scrim is clicked, Esc is pressed,
+     * or the user navigates from a nav item.
+     */
+    onOpenChange: (open: boolean) => void;
+    /** Panel width. Defaults to `315px`, matching the mobile design. */
+    width?: string;
+    /** The class name to apply to the component */
+    className?: string;
+    /** The style object to apply to the sliding panel */
+    style?: CSSProperties;
+    /** Renders as `data-testid` for testing. */
+    testId?: string;
+}
 /**
  * Mobile navigation bar props
  */

package/dist/stories/UI/Menu.js

@@ -4,14 +4,16 @@ import { Fragment, useState } from 'react';
 import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonType, ButtonSize, } from '../Buttons';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
-export const Menu = ({ icon = 'DotsThreeOutline', iconWeight = 'bold', items, style, testKey, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Tertiary, }) => {
+export const Menu = ({ icon = 'DotsThreeOutline', iconWeight = 'bold', items, style, testKey, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Tertiary, onOpenChange, }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
+        onOpenChange?.(true);
     };
     const handleClose = () => {
         setAnchorEl(null);
+        onOpenChange?.(false);
     };
     const handleMenuItemClick = (item, event) => {
         handleClose();

package/dist/stories/UI/types.d.ts

@@ -217,6 +217,8 @@ export type MenuProps = {
     size?: ButtonSize;
     /** Hierarchy of the trigger button */
     hierarchy?: ButtonHierarchy;
+    /** Called when the menu opens (true) or closes (false) */
+    onOpenChange?: (open: boolean) => void;
 };
 /**
  * Check icon color variants

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.2.29",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/stories/Drawer/Drawer.js

@@ -1,163 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import styled from '@emotion/styled';
-import { DrawerSize, DrawerNavItemState, DrawerNavItemHierarchy, } from './types';
-import { DrawerNavItem } from './DrawerNavItem';
-import { DrawerCreditsCard } from './DrawerCreditsCard';
-import { DrawerCreditsCardSkeleton } from './DrawerCreditsCardSkeleton';
-import { DrawerProfile } from './DrawerProfile';
-import { DrawerProfileSkeleton } from './DrawerProfileSkeleton';
-import { Logo, LogoVariant } from '../UI';
-import { getIconComponent } from '../../utils';
-const EXPANDED_WIDTH = '238px';
-const COLLAPSED_WIDTH = '68px';
-/** Composed from the semantic `shadow-sm` design token. */
-const SHADOW_SM = 'var(--global-shadows-shadow-sm-offset-x) var(--global-shadows-shadow-sm-offset-y) var(--global-shadows-shadow-sm-blur) var(--global-shadows-shadow-sm-spread) var(--global-shadows-shadow-sm-color)';
-/**
- * Non-clipping outer shell. The toggle lives here (a sibling of the scroll
- * area) so it can overhang the right edge without being clipped by the panel's
- * `overflow`.
- */
-const Shell = styled.aside `
-  position: relative;
-  flex-shrink: 0;
-  height: 100vh;
-  width: ${({ $collapsed }) => ($collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH)};
-  transition: width 0.3s ease-in-out;
-`;
-const Scroll = styled.div `
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  padding: var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)
-    var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)
-    var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
-  background-color: var(--color-background-bg-page-contrast);
-  border-right: 1px solid var(--color-border-border-subtle);
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  /* Theme-aware thin scrollbar */
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border-border-component) transparent;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--color-border-border-component);
-    border-radius: var(--spacing-tokens-size-in-px-radius-radius-full);
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-text-text-subtle);
-  }
-`;
-const LogoHeader = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
-  height: 38px;
-  min-height: 38px;
-  margin-bottom: 40px;
-`;
-const Nav = styled.nav `
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  justify-content: space-between;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
-`;
-const NavTop = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-lg, 12px);
-`;
-const Footer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
-`;
-const FooterSlot = styled.div `
-  display: flex;
-  justify-content: center;
-`;
-const ToggleButton = styled.button `
-  appearance: none;
-  position: absolute;
-  top: 52px;
-  right: -16px;
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: 1px solid var(--color-border-border-subtle);
-  border-radius: var(--spacing-tokens-size-in-px-radius-radius-full);
-  background-color: var(--color-background-bg-element);
-  color: var(--color-text-text-paragraph);
-  cursor: pointer;
-  box-shadow: ${SHADOW_SM};
-  transition: color 0.2s ease-in-out;
-
-  &:hover {
-    color: var(--color-text-text-clicable);
-  }
-`;
-/** Rotates the chevron smoothly between expanded (◀) and collapsed (▶). */
-const ToggleIcon = styled.span `
-  display: inline-flex;
-  transform: rotate(${({ $collapsed }) => ($collapsed ? '180deg' : '0deg')});
-  transition: transform 0.3s ease-in-out;
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-`;
-const resolveState = (item, activeKey) => {
-    if (item.state)
-        return item.state;
-    if (item.disabled)
-        return DrawerNavItemState.Disabled;
-    const key = item.key ?? item.text;
-    if (activeKey !== undefined && key === activeKey) {
-        return DrawerNavItemState.Active;
-    }
-    return DrawerNavItemState.Inactive;
-};
-/**
- * Composed application sidebar ("Drawer"): logo header, navigation list,
- * credits card and user-profile footer, with a floating collapse/expand
- * toggle. Collapse state can be controlled (`collapsed` + `onToggle`) or left
- * uncontrolled (`defaultCollapsed`). Every colour, space and radius resolves to
- * `@beydesign/tokens` CSS variables, so it renders correctly in light and dark.
- */
-export const Drawer = ({ navItems, activeKey, collapsed, defaultCollapsed = false, onToggle, showToggle = true, credits, creditsLoading = false, profile, profileLoading = false, logo, className, style, testId, }) => {
-    const isControlled = collapsed !== undefined;
-    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
-    const isCollapsed = isControlled ? collapsed : internalCollapsed;
-    const drawerSize = isCollapsed ? DrawerSize.Collapsed : DrawerSize.Expanded;
-    const handleToggle = () => {
-        const next = !isCollapsed;
-        if (!isControlled)
-            setInternalCollapsed(next);
-        onToggle?.(next);
-    };
-    const handleItemClick = (item) => {
-        if (item.disabled)
-            return;
-        if (item.link) {
-            window.location.href = item.link;
-        }
-        else {
-            item.onClick?.();
-        }
-    };
-    return (_jsxs(Shell, { "$collapsed": isCollapsed, className: className, style: style, "data-testid": testId, children: [_jsxs(Scroll, { children: [_jsx(LogoHeader, { "$collapsed": isCollapsed, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl }) }), _jsxs(Nav, { children: [_jsx(NavTop, { children: navItems.map((item) => (_jsx(DrawerNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), size: drawerSize, hierarchy: item.hierarchy ?? DrawerNavItemHierarchy.First, showBadge: item.showBadge, badgeText: item.badgeText, onClick: () => handleItemClick(item) }, item.key ?? item.text))) }), (credits || creditsLoading || profile || profileLoading) && (_jsxs(Footer, { children: [(credits || creditsLoading) && (_jsx(FooterSlot, { "$collapsed": isCollapsed, children: creditsLoading ? (_jsx(DrawerCreditsCardSkeleton, { size: drawerSize })) : (_jsx(DrawerCreditsCard, { ...credits, size: drawerSize })) })), (profile || profileLoading) && (_jsx(FooterSlot, { "$collapsed": isCollapsed, children: profileLoading ? (_jsx(DrawerProfileSkeleton, { size: drawerSize })) : (profile && _jsx(DrawerProfile, { ...profile, size: drawerSize })) }))] }))] })] }), showToggle && (_jsx(ToggleButton, { type: "button", onClick: handleToggle, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: _jsx(ToggleIcon, { "$collapsed": isCollapsed, children: getIconComponent('CaretLeft', { size: 16, weight: 'bold' }) }) }))] }));
-};

package/dist/stories/Drawer/DrawerNavItem.js

@@ -1,87 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { DrawerNavItemState, DrawerNavItemHierarchy, DrawerSize, } from './types';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { Badge, BadgeColor, BadgeSize } from '../UI';
-import { getIconComponent } from '../../utils';
-const ACTIVE_FG = 'var(--color-text-text-clicable)';
-const INACTIVE_FG = 'var(--color-text-text-subtle)';
-const ACTIVE_BG = 'var(--color-background-bg-brand-transparent)';
-const HOVER_BG = 'var(--color-background-bg-brand-transparent-hover)';
-const foreground = (state) => state === DrawerNavItemState.Active || state === DrawerNavItemState.Hover
-    ? ACTIVE_FG
-    : INACTIVE_FG;
-const background = (state) => {
-    if (state === DrawerNavItemState.Active)
-        return ACTIVE_BG;
-    if (state === DrawerNavItemState.Hover)
-        return HOVER_BG;
-    return 'transparent';
-};
-const StyledNavItem = styled.button `
-  appearance: none;
-  font: inherit;
-  text-align: left;
-  border: none;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-  width: ${({ $collapsed }) => ($collapsed ? '36px' : '100%')};
-  height: ${({ $collapsed }) => ($collapsed ? '36px' : 'auto')};
-  align-self: ${({ $collapsed }) => ($collapsed ? 'center' : 'stretch')};
-  padding: ${({ $collapsed, $hierarchy }) => {
-    if ($collapsed)
-        return '0';
-    return $hierarchy === DrawerNavItemHierarchy.Secondary
-        ? 'var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px) var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)'
-        : 'var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)';
-}};
-  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-  color: ${({ $state }) => foreground($state)};
-  background-color: ${({ $state }) => background($state)};
-  opacity: ${({ $state }) => $state === DrawerNavItemState.Disabled ? 0.5 : 1};
-  cursor: ${({ $state }) => $state === DrawerNavItemState.Disabled ? 'not-allowed' : 'pointer'};
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out,
-    padding 0.3s ease-in-out;
-
-  &:hover {
-    ${({ $state }) => $state === DrawerNavItemState.Inactive
-    ? `background-color: ${HOVER_BG}; color: ${ACTIVE_FG};`
-    : ''}
-  }
-`;
-const IconSlot = styled.span `
-  display: inline-flex;
-  flex-shrink: 0;
-  color: inherit;
-`;
-const Label = styled.span `
-  display: inline-flex;
-  flex: 1 1 0;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: inherit;
-`;
-/**
- * A single navigation row for the {@link Drawer}. Supports active / inactive /
- * hover / disabled states, first / secondary hierarchy and expanded / collapsed
- * sizes. All colours resolve to theme tokens, so it adapts to light and dark.
- */
-export const DrawerNavItem = ({ text, icon, state = DrawerNavItemState.Inactive, size = DrawerSize.Expanded, hierarchy = DrawerNavItemHierarchy.First, showBadge = false, badgeText = 'Coming Soon', onClick, className, style, testId, }) => {
-    const isCollapsed = size === DrawerSize.Collapsed;
-    const isDisabled = state === DrawerNavItemState.Disabled;
-    const isSecondary = hierarchy === DrawerNavItemHierarchy.Secondary;
-    const handleClick = () => {
-        if (!isDisabled)
-            onClick?.();
-    };
-    return (_jsxs(StyledNavItem, { type: "button", "$state": state, "$collapsed": isCollapsed, "$hierarchy": hierarchy, className: className, style: style, onClick: handleClick, disabled: isDisabled, title: isCollapsed ? text : undefined, "data-testid": testId, children: [_jsx(IconSlot, { children: getIconComponent(icon, { size: 20 }) }), !isCollapsed && (_jsxs(_Fragment, { children: [_jsx(Label, { children: _jsx(Typography, { size: isSecondary ? TypographySize.TextXS : TypographySize.TextS, weight: isSecondary
-                                ? TypographyWeight.Medium
-                                : TypographyWeight.SemiBold, color: "inherit", children: text }) }), showBadge && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: badgeText, color: BadgeColor.Default }))] }))] }));
-};

package/dist/stories/Drawer/types.js

@@ -1,29 +0,0 @@
-/**
- * Expanded / collapsed size shared across the Drawer and its sub-components.
- */
-export var DrawerSize;
-(function (DrawerSize) {
-    DrawerSize["Expanded"] = "Expanded";
-    DrawerSize["Collapsed"] = "Collapsed";
-})(DrawerSize || (DrawerSize = {}));
-/**
- * Visual state of a single navigation item.
- * `Hover` is mostly useful for documentation/Storybook — at runtime an
- * `Inactive` item also picks up the hover styling on real pointer hover.
- */
-export var DrawerNavItemState;
-(function (DrawerNavItemState) {
-    DrawerNavItemState["Active"] = "Active";
-    DrawerNavItemState["Inactive"] = "Inactive";
-    DrawerNavItemState["Hover"] = "Hover";
-    DrawerNavItemState["Disabled"] = "Disabled";
-})(DrawerNavItemState || (DrawerNavItemState = {}));
-/**
- * Hierarchy of a navigation item. `First` is a top-level entry (36px row),
- * `Secondary` is a nested sub-item (28px row, lighter weight).
- */
-export var DrawerNavItemHierarchy;
-(function (DrawerNavItemHierarchy) {
-    DrawerNavItemHierarchy["First"] = "First";
-    DrawerNavItemHierarchy["Secondary"] = "Secondary";
-})(DrawerNavItemHierarchy || (DrawerNavItemHierarchy = {}));

package/dist/stories/Settings/SettingsNav.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { SettingsNavProps } from './types';
-/**
- * Secondary navigation for the Settings area: a "Settings" heading followed by
- * titled sections of {@link SettingsNavItem} rows. Sits beside the primary
- * {@link Drawer} and only appears on settings pages. Every colour, space and
- * radius resolves to `@beydesign/tokens` CSS variables, so it renders correctly
- * in light and dark.
- */
-export declare const SettingsNav: React.FC<SettingsNavProps>;

package/dist/stories/Settings/SettingsNav.js

@@ -1,97 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { SettingsNavItem } from './SettingsNavItem';
-import { DrawerNavItemState } from '../Drawer/types';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-const WIDTH = '238px';
-const Shell = styled.aside `
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  width: ${WIDTH};
-  height: 100vh;
-  padding: var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)
-    var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)
-    var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
-  background-color: var(--color-background-bg-page-contrast);
-  border-right: 1px solid var(--color-border-border-component);
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border-border-component) transparent;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--color-border-border-component);
-    border-radius: var(--spacing-tokens-size-in-px-radius-radius-full);
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-text-text-subtle);
-  }
-`;
-const Content = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 20px);
-  height: 100%;
-`;
-const Header = styled.div `
-  padding: 0 var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-`;
-const Sections = styled.nav `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 20px);
-`;
-const Section = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-`;
-const SectionTitle = styled.div `
-  padding: 0 var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-  text-transform: uppercase;
-`;
-const Items = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
-`;
-const resolveState = (item, activeKey) => {
-    if (item.state)
-        return item.state;
-    if (item.disabled)
-        return DrawerNavItemState.Disabled;
-    const key = item.key ?? item.text;
-    if (activeKey !== undefined && key === activeKey) {
-        return DrawerNavItemState.Active;
-    }
-    return DrawerNavItemState.Inactive;
-};
-/**
- * Secondary navigation for the Settings area: a "Settings" heading followed by
- * titled sections of {@link SettingsNavItem} rows. Sits beside the primary
- * {@link Drawer} and only appears on settings pages. Every colour, space and
- * radius resolves to `@beydesign/tokens` CSS variables, so it renders correctly
- * in light and dark.
- */
-export const SettingsNav = ({ title = 'Settings', sections, activeKey, className, style, testId, }) => {
-    const handleItemClick = (item) => {
-        if (item.disabled)
-            return;
-        if (item.link) {
-            window.location.href = item.link;
-        }
-        else {
-            item.onClick?.();
-        }
-    };
-    return (_jsx(Shell, { className: className, style: style, "data-testid": testId, children: _jsxs(Content, { children: [_jsx(Header, { children: _jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: title }) }), _jsx(Sections, { children: sections.map((section, sectionIndex) => (_jsxs(Section, { children: [section.title && (_jsx(SectionTitle, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-subtle)", children: section.title }) })), _jsx(Items, { children: section.items.map((item) => (_jsx(SettingsNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), showBadge: item.showBadge, badgeText: item.badgeText, onClick: () => handleItemClick(item) }, item.key ?? item.text))) })] }, section.key ?? section.title ?? sectionIndex))) })] }) }));
-};

package/dist/stories/Settings/SettingsNavItem.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { SettingsNavItemProps } from './types';
-/**
- * A single navigation row for the {@link SettingsNav}. Deliberately more compact
- * than {@link DrawerNavItem} — 28px tall (4px vertical padding), a 16px icon and
- * a Medium-weight label — to read as secondary navigation. All colours resolve
- * to theme tokens, so it adapts to light and dark.
- */
-export declare const SettingsNavItem: React.FC<SettingsNavItemProps>;