@cere/cere-design-system 0.0.45 → 0.1.0

package/dist/chunk-EOF3QNPF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-EOF3QNPF.js","../src/components/navigation/Dropdown/Dropdown.tsx","../src/components/navigation/Dropdown/DropdownAnchor.tsx","../src/components/navigation/Sidebar.tsx","../src/components/navigation/SidebarItem.tsx","../src/components/navigation/ServiceSelector.tsx","../src/components/navigation/WorkspaceSelector.tsx","../src/components/navigation/Stepper.tsx","../src/components/navigation/NumberedStepper.tsx","../src/components/navigation/SideNav/SideNav.tsx","../src/components/navigation/SideNav/styles.ts","../src/components/navigation/SideNav/SideNavHeader.tsx","../src/components/navigation/SideNav/NavigationList.tsx","../src/components/navigation/SideNav/NavigationItem.tsx","../src/components/navigation/SideNav/ConnectionStatus.tsx","../src/components/navigation/SideNav/AccountSection.tsx","../src/components/navigation/Tab.tsx","../src/components/navigation/Menu.tsx","../src/components/navigation/Pagination.tsx","../src/components/navigation/Selector.tsx"],"names":["jsx","jsxs","styled","Box","Typography","IconButton","Link","TextField","List","ListItemText","Button","Fragment","Avatar","InputAdornment","ListItem","ListItemAvatar","Menu","KeyboardArrowDownIcon","React","Tooltip","ListItemButton","ListItemIcon","StyledListItemButton","useState"],"mappings":"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","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-EOF3QNPF.js","sourcesContent":[null,"import { Popover, PopoverProps } from '@mui/material';\nimport { ReactNode, Ref, useCallback, useRef } from 'react';\n\nimport { DropdownAnchor, DropdownAnchorProps } from './DropdownAnchor';\n\ntype RenderAnchorOptions = {\n  ref: Ref<any>;\n  open: boolean;\n  onOpen: () => void;\n};\n\nexport type DropdownProps = Pick<PopoverProps, 'open' | 'children'> &\n  Omit<DropdownAnchorProps, 'open'> & {\n    direction?: 'right' | 'left';\n    dense?: boolean;\n    disableGutters?: boolean;\n    disablePaddings?: boolean;\n    onToggle?: (open: boolean) => void;\n    renderAnchor?: (options: RenderAnchorOptions) => ReactNode;\n    variant: 'header' | 'button';\n  };\n\nexport const Dropdown = ({\n  open,\n  label,\n  leftElement,\n  direction = 'left',\n  children,\n  onToggle,\n  dense = false,\n  disableGutters = false,\n  disablePaddings = false,\n  variant,\n  renderAnchor = ({ ref, open, onOpen }) => (\n    <DropdownAnchor ref={ref} open={open} label={label} leftElement={leftElement} onOpen={onOpen} variant={variant} />\n  ),\n}: DropdownProps) => {\n  const anchorRef = useRef(null);\n  const horizontal = direction === 'left' ? 'right' : 'left';\n  const onOpen = useCallback(() => onToggle?.(true), [onToggle]);\n  const padding = dense ? 1 : 2;\n\n  return (\n    <>\n      {renderAnchor({ ref: anchorRef, onOpen, open })}\n      <Popover\n        aria-label=\"Overlay\"\n        open={open}\n        onClose={() => onToggle?.(false)}\n        anchorEl={anchorRef.current}\n        anchorOrigin={{\n          horizontal,\n          vertical: 'bottom',\n        }}\n        transformOrigin={{\n          horizontal,\n          vertical: -8,\n        }}\n        slotProps={{\n          paper: {\n            elevation: 0,\n            sx: {\n              padding: disablePaddings ? 0 : padding,\n              paddingX: !disablePaddings && disableGutters ? 0 : padding,\n              borderRadius: 3,\n              border: '1px solid',\n              borderColor: 'divider',\n              boxShadow: 2,\n            },\n          },\n        }}\n      >\n        {children}\n      </Popover>\n    </>\n  );\n};\n","import { forwardRef, ReactNode, Ref } from 'react';\nimport { Stack, styled, avatarClasses, Typography, Button } from '@mui/material';\nimport { ArrowDropUp, ArrowDropDown } from '@mui/icons-material';\n\nexport type DropdownAnchorProps = {\n  open?: boolean;\n  label?: ReactNode;\n  leftElement?: ReactNode;\n  onOpen?: () => void;\n  variant?: 'header' | 'button';\n};\n\nconst Clickable = styled(Button)({\n  padding: 0,\n});\n\nconst Anchor = styled(Stack)<{ variant?: DropdownAnchorProps['variant'] }>(({ theme, variant }) => ({\n  height: 40,\n  borderRadius: 25,\n  padding: theme.spacing(1),\n  color: theme.palette.text.secondary,\n  backgroundColor: variant !== 'header' ? theme.palette.grey[200] : 'transparent',\n  cursor: 'pointer',\n}));\n\nconst Left = styled('div')(({ theme }) => ({\n  [`& .${avatarClasses.root}`]: {\n    width: 30,\n    height: 30,\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: theme.palette.background.paper,\n  },\n}));\n\nconst Center = styled(Typography)(({ theme }) => ({\n  fontWeight: theme.typography.fontWeightBold,\n  color: theme.palette.text.primary,\n}));\n\nexport const DropdownAnchor = forwardRef(\n  ({ open, label, leftElement, onOpen, variant, ...props }: DropdownAnchorProps, ref: Ref<HTMLButtonElement>) => (\n    <Clickable ref={ref} {...props} color=\"inherit\" variant=\"text\" onClick={onOpen}>\n      <Anchor variant={variant} spacing={1} direction=\"row\" alignItems=\"stretch\">\n        <Left>{leftElement}</Left>\n        <Center variant=\"body1\">{label}</Center>\n        {variant !== 'header' && (open ? <ArrowDropUp /> : <ArrowDropDown />)}\n      </Anchor>\n    </Clickable>\n  ),\n);\n\nDropdownAnchor.displayName = 'DropdownAnchor';\n","import React from 'react';\nimport {\n  Drawer,\n  List,\n  styled,\n  Box,\n} from '@mui/material';\nimport { SidebarItem, SidebarItemProps } from './SidebarItem';\n\nexport interface SidebarProps {\n  open?: boolean;\n  width?: number;\n  items: SidebarItemProps[];\n  onClose?: () => void;\n  variant?: 'permanent' | 'persistent' | 'temporary';\n}\n\nconst StyledDrawer = styled(Drawer)(({ theme }) => ({\n  '& .MuiDrawer-paper': {\n    backgroundColor: theme.palette.background.paper,\n    borderRight: `1px solid ${theme.palette.grey[200]}`,\n    boxShadow: 'none',\n  },\n}));\n\nexport const Sidebar: React.FC<SidebarProps> = ({\n  open = true,\n  width = 280,\n  items,\n  onClose,\n  variant = 'permanent',\n}) => {\n  return (\n    <StyledDrawer\n      variant={variant}\n      open={open}\n      onClose={onClose}\n      sx={{\n        width,\n        flexShrink: 0,\n        '& .MuiDrawer-paper': {\n          width,\n          boxSizing: 'border-box',\n        },\n      }}\n    >\n      <Box sx={{ overflow: 'auto', padding: '8px 0' }}>\n        <List>\n          {items.map((item, index) => (\n            <SidebarItem key={index} {...item} />\n          ))}\n        </List>\n      </Box>\n    </StyledDrawer>\n  );\n};\n\n","import React from 'react';\nimport {\n  ListItemButton,\n  ListItemIcon,\n  ListItemText,\n  styled,\n} from '@mui/material';\n\nexport interface SidebarItemProps {\n  label: string;\n  icon?: React.ReactNode;\n  selected?: boolean;\n  onClick?: () => void;\n  size?: 'small' | 'medium' | 'large';\n  endIcon?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\nconst StyledListItemButton = styled(ListItemButton, {\n  shouldForwardProp: (prop) => prop !== 'selected' && prop !== 'size',\n})<{ selected?: boolean; size?: string }>(({ theme, selected, size = 'medium' }) => {\n  const heightMap: Record<string, string> = {\n    small: '40px',\n    medium: '56px',\n    large: '64px',\n  };\n\n  return {\n    height: heightMap[size],\n    paddingLeft: '16px',\n    paddingRight: '16px',\n    borderRadius: '8px',\n    margin: '4px 8px',\n    color: selected ? theme.palette.primary.main : theme.palette.text.primary,\n    backgroundColor: selected ? theme.palette.background.selected : 'transparent',\n    '&:hover': {\n      backgroundColor: selected ? theme.palette.background.selected : theme.palette.grey[50],\n    },\n    '& .MuiListItemIcon-root': {\n      color: selected ? theme.palette.primary.main : theme.palette.text.secondary,\n      minWidth: '40px',\n    },\n    '& .MuiListItemText-primary': {\n      fontWeight: selected ? 600 : 400,\n      color: selected ? theme.palette.primary.main : theme.palette.text.primary,\n    },\n  };\n});\n\nexport const SidebarItem: React.FC<SidebarItemProps> = ({\n  label,\n  icon,\n  selected = false,\n  onClick,\n  size = 'medium',\n  endIcon,\n  children,\n}) => {\n  return (\n    <StyledListItemButton selected={selected} size={size} onClick={onClick}>\n      {icon && <ListItemIcon>{icon}</ListItemIcon>}\n      <ListItemText primary={label} />\n      {endIcon && <div style={{ marginLeft: 'auto' }}>{endIcon}</div>}\n      {children}\n    </StyledListItemButton>\n  );\n};\n\n","import React, { useState, useCallback } from 'react';\nimport {\n  Box,\n  Typography,\n  Avatar,\n  Tooltip,\n  IconButton,\n  Link,\n  Chip,\n  TextField,\n  InputAdornment,\n  List,\n  ListItem,\n  ListItemAvatar,\n  ListItemText,\n  Button,\n  Menu,\n} from '@mui/material';\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport ArchiveIcon from '@mui/icons-material/Archive';\nimport UnarchiveIcon from '@mui/icons-material/Unarchive';\nimport SearchIcon from '@mui/icons-material/Search';\nimport AddIcon from '@mui/icons-material/Add';\nimport CheckIcon from '@mui/icons-material/Check';\nimport SettingsIcon from '@mui/icons-material/Settings';\nimport PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';\n\nexport interface Service {\n  id: string;\n  name: string;\n  description?: string;\n  type?: string;\n  lastAccessed?: string;\n  memberCount?: number;\n  favorited?: boolean;\n  isPersonal?: boolean;\n  avatar?: string;\n  archived?: boolean;\n}\n\nexport interface ServiceSelectorButtonProps {\n  /**\n   * List of services to display\n   */\n  services: Service[];\n  /**\n   * Currently selected service ID\n   */\n  selectedServiceId: string | null;\n  /**\n   * Loading state\n   */\n  loading?: boolean;\n  /**\n   * Compact mode for mobile or mini-sidebar\n   */\n  compact?: boolean;\n  /**\n   * Callback when service is selected\n   */\n  onSelectService?: (serviceId: string) => void;\n  /**\n   * Callback when service name is clicked (for navigation)\n   */\n  onServiceClick?: (serviceId: string) => void;\n  /**\n   * Callback when \"Create Service\" is clicked\n   */\n  onCreateService?: () => void;\n  /**\n   * Callback after service is created\n   */\n  onServiceCreated?: () => void;\n  /**\n   * Whether user is a manager for the selected service\n   */\n  isManager?: boolean;\n  /**\n   * Custom styles\n   */\n  sx?: never;\n  /**\n   * Panel width\n   * @default 350\n   */\n  panelWidth?: number;\n  /**\n   * Callback when Settings button is clicked\n   */\n  onOpenSettings?: (serviceId: string) => void;\n  /**\n   * Callback when Add Member button is clicked\n   */\n  onOpenAddMember?: (serviceId: string) => void;\n}\n\nexport const ServiceSelectorButton: React.FC<ServiceSelectorButtonProps> = ({\n  services,\n  selectedServiceId,\n  loading = false,\n  compact = false,\n  onSelectService,\n  onServiceClick,\n  onCreateService,\n  onServiceCreated,\n  isManager = false,\n  sx = {},\n  panelWidth = 350,\n  onOpenSettings,\n  onOpenAddMember,\n}) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const [searchTerm, setSearchTerm] = useState('');\n  const [showArchived, setShowArchived] = useState(false);\n\n  // Handle opening the service selector\n  const handleOpenSelector = (event: React.MouseEvent<HTMLElement>) => {\n    event.stopPropagation();\n    setAnchorEl(event.currentTarget);\n  };\n\n  // Handle closing the service selector\n  const handleClose = () => {\n    setAnchorEl(null);\n    setSearchTerm('');\n    setShowArchived(false);\n  };\n\n  // Handle clicking on the service name (navigates to dashboard)\n  const handleServiceClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (selectedServiceId && onServiceClick) {\n      onServiceClick(selectedServiceId);\n    }\n  };\n\n  // Handle selecting a service\n  const handleSelectService = useCallback(\n    (serviceId: string) => {\n      handleClose();\n      if (onSelectService) {\n        onSelectService(serviceId);\n      }\n    },\n    [onSelectService]\n  );\n\n  const handleCreateClick = () => {\n    handleClose();\n    if (onCreateService) {\n      onCreateService();\n    }\n  };\n\n  // Get the selected service\n  const selectedService = Array.isArray(services)\n    ? services.find((s) => s.id === selectedServiceId)\n    : null;\n\n  // Filter services based on search term and archived status\n  const filteredServices = services.filter((service) => {\n    const matchesSearch =\n      searchTerm === '' ||\n      service.name.toLowerCase().includes(searchTerm.toLowerCase());\n    const isArchived = service.archived === true;\n    const matchesArchivedFilter = showArchived ? isArchived : !isArchived;\n    return matchesSearch && matchesArchivedFilter;\n  });\n\n  // Compact version for mobile or mini-sidebar\n  if (compact) {\n    return (\n      <>\n        <Box sx={{ position: 'relative' }}>\n          <Tooltip title=\"Select service\" placement=\"right\">\n            <IconButton\n              onClick={handleOpenSelector}\n              sx={{\n                p: 1,\n                '&:hover': {\n                  bgcolor: 'rgba(0, 0, 0, 0.04)',\n                },\n                ...sx,\n              }}\n            >\n              <Avatar\n                sx={{\n                  width: 32,\n                  height: 32,\n                  bgcolor: selectedServiceId ? 'primary.main' : 'grey.400',\n                  fontSize: '0.9rem',\n                }}\n              >\n                {selectedService ? selectedService.name.charAt(0) : 'D'}\n              </Avatar>\n            </IconButton>\n          </Tooltip>\n        </Box>\n\n        <ServiceSelectorPanel\n          open={Boolean(anchorEl)}\n          anchorEl={anchorEl}\n          onClose={handleClose}\n          services={services}\n          selectedServiceId={selectedServiceId}\n          onSelectService={handleSelectService}\n          onCreateService={handleCreateClick}\n          onServiceCreated={onServiceCreated}\n          loading={loading}\n          width={panelWidth}\n          isManager={isManager}\n          selectedService={selectedService}\n          searchTerm={searchTerm}\n          onSearchChange={setSearchTerm}\n          showArchived={showArchived}\n          onToggleArchived={() => setShowArchived(!showArchived)}\n          filteredServices={filteredServices}\n          onOpenSettings={onOpenSettings}\n          onOpenAddMember={onOpenAddMember}\n        />\n      </>\n    );\n  }\n\n  // Standard breadcrumb style\n  return (\n    <>\n      <Box sx={{ display: 'flex', alignItems: 'center', ...sx }}>\n        {selectedService ? (\n          <>\n            {/* Service name as a regular breadcrumb link if user is manager, otherwise just text */}\n            {isManager ? (\n              <Link\n                underline=\"hover\"\n                color=\"inherit\"\n                onClick={handleServiceClick}\n                sx={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  fontSize: '0.875rem',\n                  cursor: 'pointer',\n                  mr: 0.5,\n                }}\n              >\n                <Avatar\n                  sx={{\n                    width: 20,\n                    height: 20,\n                    bgcolor: 'primary.main',\n                    fontSize: '0.7rem',\n                    mr: 0.5,\n                  }}\n                >\n                  {selectedService.name.charAt(0)}\n                </Avatar>\n                {selectedService.name}\n              </Link>\n            ) : (\n              <Box\n                sx={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  fontSize: '0.875rem',\n                  mr: 0.5,\n                  color: 'text.primary',\n                }}\n              >\n                <Avatar\n                  sx={{\n                    width: 20,\n                    height: 20,\n                    bgcolor: 'primary.main',\n                    fontSize: '0.7rem',\n                    mr: 0.5,\n                  }}\n                >\n                  {selectedService.name.charAt(0)}\n                </Avatar>\n                {selectedService.name}\n              </Box>\n            )}\n\n            {/* Show archived chip if service is archived */}\n            {selectedService.archived && (\n              <Chip\n                size=\"small\"\n                label=\"Archived\"\n                color=\"error\"\n                variant=\"outlined\"\n                sx={{\n                  ml: 0.5,\n                  height: 20,\n                  fontSize: '0.8rem',\n                  '& .MuiChip-label': { px: 1 },\n                  '& .MuiChip-icon': { fontSize: '0.7rem', ml: 0.5 },\n                }}\n              />\n            )}\n          </>\n        ) : (\n          <Typography\n            variant=\"body2\"\n            color=\"text.secondary\"\n            sx={{\n              fontSize: '0.875rem',\n            }}\n          >\n            Select Service\n          </Typography>\n        )}\n\n        {/* Separate selector button */}\n        <IconButton\n          onClick={handleOpenSelector}\n          size=\"small\"\n          sx={{\n            p: 0.2,\n            ml: 0.5,\n            color: 'text.secondary',\n          }}\n        >\n          <KeyboardArrowDownIcon fontSize=\"small\" />\n        </IconButton>\n      </Box>\n\n      <ServiceSelectorPanel\n        open={Boolean(anchorEl)}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        services={services}\n        selectedServiceId={selectedServiceId}\n        onSelectService={handleSelectService}\n        onCreateService={handleCreateClick}\n        onServiceCreated={onServiceCreated}\n        loading={loading}\n        width={panelWidth}\n        isManager={isManager}\n        selectedService={selectedService}\n        searchTerm={searchTerm}\n        onSearchChange={setSearchTerm}\n        showArchived={showArchived}\n        onToggleArchived={() => setShowArchived(!showArchived)}\n        filteredServices={filteredServices}\n        onOpenSettings={onOpenSettings}\n        onOpenAddMember={onOpenAddMember}\n      />\n    </>\n  );\n};\n\ninterface ServiceSelectorPanelProps {\n  open: boolean;\n  anchorEl: HTMLElement | null;\n  onClose: () => void;\n  services: Service[];\n  selectedServiceId: string | null;\n  onSelectService: (serviceId: string) => void;\n  onCreateService?: () => void;\n  onServiceCreated?: () => void;\n  loading?: boolean;\n  width?: number;\n  isManager?: boolean;\n  selectedService?: Service | null;\n  searchTerm?: string;\n  onSearchChange?: (term: string) => void;\n  showArchived?: boolean;\n  onToggleArchived?: () => void;\n  filteredServices?: Service[];\n  onOpenSettings?: (serviceId: string) => void;\n  onOpenAddMember?: (serviceId: string) => void;\n}\n\nconst ServiceSelectorPanel: React.FC<ServiceSelectorPanelProps> = ({\n  open,\n  anchorEl,\n  onClose,\n  services,\n  selectedServiceId,\n  onSelectService,\n  onCreateService,\n  onServiceCreated,\n  loading = false,\n  width = 350,\n  isManager = false,\n  selectedService,\n  searchTerm: externalSearchTerm,\n  onSearchChange: externalOnSearchChange,\n  showArchived: externalShowArchived,\n  onToggleArchived: externalOnToggleArchived,\n  filteredServices: externalFilteredServices,\n  onOpenSettings,\n  onOpenAddMember,\n}) => {\n  const [internalSearchTerm, setInternalSearchTerm] = useState('');\n  const [internalShowArchived, setInternalShowArchived] = useState(false);\n\n  const searchTerm = externalSearchTerm !== undefined ? externalSearchTerm : internalSearchTerm;\n  const setSearchTerm = externalOnSearchChange || setInternalSearchTerm;\n  const showArchived = externalShowArchived !== undefined ? externalShowArchived : internalShowArchived;\n  const toggleArchived = externalOnToggleArchived || (() => setInternalShowArchived(!internalShowArchived));\n\n  // Filter services if not provided externally\n  const filteredServices =\n    externalFilteredServices ||\n    services.filter((service) => {\n      const matchesSearch =\n        searchTerm === '' ||\n        service.name.toLowerCase().includes(searchTerm.toLowerCase());\n      const isArchived = service.archived === true;\n      const matchesArchivedFilter = showArchived ? isArchived : !isArchived;\n      return matchesSearch && matchesArchivedFilter;\n    });\n\n  const handleCreateClick = () => {\n    if (onCreateService) {\n      onCreateService();\n    } else {\n      // If no onCreateService handler, just close and call onServiceCreated\n      onClose();\n      if (onServiceCreated) {\n        onServiceCreated();\n      }\n    }\n  };\n\n  return (\n    <Menu\n      anchorEl={anchorEl}\n      open={open}\n      onClose={onClose}\n      anchorOrigin={{\n        vertical: 'bottom',\n        horizontal: 'left',\n      }}\n      transformOrigin={{\n        vertical: 'top',\n        horizontal: 'left',\n      }}\n      PaperProps={{\n        sx: {\n          width: width,\n          maxHeight: '80vh',\n          borderRadius: 1,\n          boxShadow: '0 2px 10px rgba(0, 0, 0, 0.12)',\n          overflow: 'hidden',\n          mt: 1,\n        },\n      }}\n    >\n      {/* Header with selected service and management buttons */}\n      {selectedService && (\n        <Box\n          sx={{\n            paddingLeft: 2,\n            paddingRight: 2,\n            paddingTop: 1.5,\n            paddingBottom: 1.5,\n            borderBottom: 1,\n            borderColor: 'divider',\n          }}\n        >\n          {/* Top section with service name */}\n          <Box sx={{\n            display: 'flex',\n            alignItems: 'center',\n            mb: 1.5\n          }}>\n            <Avatar\n              sx={{\n                width: 32,\n                height: 32,\n                bgcolor: 'primary.main',\n                fontSize: '0.9rem',\n                mr: 1.5\n              }}\n            >\n              {selectedService.name.charAt(0)}\n            </Avatar>\n            <Box sx={{ flex: 1 }}>\n              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n                <Typography variant=\"subtitle1\" sx={{ fontWeight: 600, fontSize: '1rem' }}>\n                  {selectedService.name}\n                </Typography>\n                <Box\n                  sx={{\n                    display: 'inline-block',\n                    bgcolor: 'rgba(0, 0, 0, 0.04)',\n                    color: 'text.secondary',\n                    px: 1,\n                    py: 0.3,\n                    borderRadius: '12px',\n                    fontSize: '0.7rem',\n                    fontWeight: 500,\n                    lineHeight: 1,\n                  }}\n                >\n                  {isManager ? 'Manager' : 'Viewer'}\n                </Box>\n              </Box>\n            </Box>\n          </Box>\n\n          {/* Bottom section with management buttons - always visible */}\n          {(onOpenSettings || onOpenAddMember) && (\n            <Box sx={{ display: 'flex', gap: 1 }}>\n              {onOpenAddMember && (\n                <Button\n                  startIcon={<PersonAddAltIcon />}\n                  variant=\"outlined\"\n                  size=\"small\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onClose();\n                    onOpenAddMember(selectedServiceId || '');\n                  }}\n                  disabled={!isManager}\n                  sx={{\n                    flex: 1,\n                    textTransform: 'none',\n                    color: 'text.secondary',\n                    fontSize: '0.8rem',\n                    py: 0.75,\n                    justifyContent: 'flex-start',\n                    borderColor: 'rgba(0, 0, 0, 0.12)',\n                    borderRadius: '6px',\n                    '&:hover': {\n                      borderColor: 'rgba(0, 0, 0, 0.23)',\n                      backgroundColor: 'rgba(0, 0, 0, 0.03)'\n                    },\n                    '&:disabled': {\n                      opacity: 0.5,\n                      cursor: 'not-allowed'\n                    }\n                  }}\n                >\n                  Add member\n                </Button>\n              )}\n\n              {onOpenSettings && (\n                <Button\n                  startIcon={<SettingsIcon />}\n                  variant=\"outlined\"\n                  size=\"small\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onClose();\n                    onOpenSettings(selectedServiceId || '');\n                  }}\n                  disabled={!isManager}\n                  sx={{\n                    flex: 1,\n                    textTransform: 'none',\n                    color: 'text.secondary',\n                    fontSize: '0.8rem',\n                    py: 0.75,\n                    justifyContent: 'flex-start',\n                    borderColor: 'rgba(0, 0, 0, 0.12)',\n                    borderRadius: '6px',\n                    '&:hover': {\n                      borderColor: 'rgba(0, 0, 0, 0.23)',\n                      backgroundColor: 'rgba(0, 0, 0, 0.03)'\n                    },\n                    '&:disabled': {\n                      opacity: 0.5,\n                      cursor: 'not-allowed'\n                    }\n                  }}\n                >\n                  Settings\n                </Button>\n              )}\n            </Box>\n          )}\n        </Box>\n      )}\n\n      {/* Search box with archive toggle */}\n      <Box sx={{ px: 2, pt: 2, pb: 1.5 }}>\n        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>\n          <TextField\n            size=\"small\"\n            placeholder=\"Search services...\"\n            value={searchTerm}\n            onChange={(e) => setSearchTerm(e.target.value)}\n            sx={{ flex: 1 }}\n            InputProps={{\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <SearchIcon fontSize=\"small\" color=\"action\" />\n                </InputAdornment>\n              ),\n              sx: {\n                borderRadius: 1.5,\n                backgroundColor: 'rgba(0, 0, 0, 0.04)',\n                '& fieldset': { border: 'none' },\n                py: 0.5,\n              },\n            }}\n          />\n          <Tooltip title={showArchived ? 'Show active' : 'Show archived'}>\n            <IconButton\n              size=\"small\"\n              onClick={toggleArchived}\n              color={showArchived ? 'primary' : 'default'}\n              sx={{ ml: 1 }}\n            >\n              {showArchived ? (\n                <UnarchiveIcon fontSize=\"small\" />\n              ) : (\n                <ArchiveIcon fontSize=\"small\" />\n              )}\n            </IconButton>\n          </Tooltip>\n        </Box>\n\n        {/* Service list content */}\n        <Box\n          sx={{\n            maxHeight: 400,\n            overflow: 'auto',\n            py: 1,\n          }}\n        >\n          {loading ? (\n            <Box sx={{ p: 2, textAlign: 'center' }}>\n              <Typography variant=\"body2\" color=\"text.secondary\">\n                Loading services...\n              </Typography>\n            </Box>\n          ) : filteredServices.length === 0 ? (\n            <Box sx={{ p: 2, textAlign: 'center' }}>\n              <Typography variant=\"body2\" color=\"text.secondary\">\n                {searchTerm\n                  ? `No ${showArchived ? 'archived ' : ''}services matching \"${searchTerm}\"`\n                  : showArchived\n                  ? 'No archived services found'\n                  : 'No active services found'}\n              </Typography>\n            </Box>\n          ) : (\n            <>\n              {/* Group Header */}\n              <Typography\n                variant=\"caption\"\n                sx={{\n                  display: 'block',\n                  px: 2.5,\n                  py: 0.5,\n                  color: 'text.secondary',\n                  fontWeight: 600,\n                  textTransform: 'uppercase',\n                  fontSize: '0.65rem',\n                  letterSpacing: 0.5,\n                }}\n              >\n                Services\n                {showArchived && (\n                  <Chip\n                    size=\"small\"\n                    label=\"Archived\"\n                    color=\"error\"\n                    variant=\"outlined\"\n                    sx={{\n                      ml: 1,\n                      height: 20,\n                      fontSize: '0.6rem',\n                      '& .MuiChip-label': { px: 0.5 },\n                      '& .MuiChip-icon': { fontSize: '0.7rem', ml: 0.5 },\n                    }}\n                  />\n                )}\n              </Typography>\n\n              {/* Group Services */}\n              <List disablePadding>\n                {filteredServices.map((service) => (\n                  <ListItem\n                    key={service.id}\n                    sx={{\n                      py: 0.75,\n                      px: 2,\n                      cursor: 'pointer',\n                      '&:hover': {\n                        backgroundColor: 'rgba(0, 0, 0, 0.04)',\n                      },\n                      backgroundColor:\n                        service.id === selectedServiceId\n                          ? 'rgba(25, 118, 210, 0.08)'\n                          : 'transparent',\n                      position: 'relative',\n                    }}\n                    onClick={() => onSelectService(service.id)}\n                    secondaryAction={\n                      service.id === selectedServiceId ? (\n                        <CheckIcon\n                          sx={{\n                            color: 'primary.main',\n                            fontSize: '1.2rem',\n                          }}\n                        />\n                      ) : null\n                    }\n                  >\n                    <ListItemAvatar sx={{ minWidth: 40 }}>\n                      <Avatar\n                        sx={{\n                          width: 26,\n                          height: 26,\n                          bgcolor:\n                            service.id === selectedServiceId ? 'primary.main' : 'grey.400',\n                          fontSize: '0.8rem',\n                        }}\n                        src={service.avatar}\n                      >\n                        {service.name.charAt(0)}\n                      </Avatar>\n                    </ListItemAvatar>\n                    <ListItemText\n                      primary={\n                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n                          <Typography\n                            variant=\"body2\"\n                            sx={{\n                              fontWeight: service.id === selectedServiceId ? 600 : 400,\n                              color:\n                                service.id === selectedServiceId\n                                  ? 'primary.main'\n                                  : 'text.primary',\n                            }}\n                          >\n                            {service.name}\n                          </Typography>\n                        </Box>\n                      }\n                      primaryTypographyProps={{ sx: { fontWeight: 500 } }}\n                      sx={{ my: 0 }}\n                    />\n                  </ListItem>\n                ))}\n              </List>\n            </>\n          )}\n        </Box>\n\n        {/* Footer actions */}\n        <Box\n          sx={{\n            paddingTop: 2,\n            paddingLeft: 2,\n            paddingRight: 2,\n            borderTop: 1,\n            borderColor: 'divider',\n          }}\n        >\n          <Button\n            fullWidth\n            variant=\"text\"\n            startIcon={<AddIcon />}\n            onClick={handleCreateClick}\n            sx={{\n              textTransform: 'none',\n              fontWeight: 500,\n              justifyContent: 'flex-start',\n              color: 'primary.main',\n              py: 1,\n              px: 1.5,\n              '&:hover': {\n                backgroundColor: 'rgba(25, 118, 210, 0.08)',\n              },\n            }}\n          >\n            New Service\n          </Button>\n        </Box>\n      </Box>\n    </Menu>\n  );\n};\n\nexport default ServiceSelectorButton;\n\n","import React, { useState, useCallback } from 'react';\nimport {\n  Box,\n  Typography,\n  Avatar,\n  IconButton,\n  Link,\n  TextField,\n  InputAdornment,\n  List,\n  ListItem,\n  ListItemAvatar,\n  ListItemText,\n  Button,\n  Menu,\n} from '@mui/material';\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport SearchIcon from '@mui/icons-material/Search';\nimport AddIcon from '@mui/icons-material/Add';\nimport CheckIcon from '@mui/icons-material/Check';\n\nexport interface Workspace {\n  id: string;\n  name: string;\n  description?: string;\n}\n\nexport interface WorkspaceSelectorButtonProps {\n  /**\n   * List of workspaces to display\n   */\n  workspaces: Workspace[];\n  /**\n   * Currently selected workspace ID\n   */\n  selectedWorkspaceId: string | null;\n  /**\n   * Loading state\n   */\n  loading?: boolean;\n  /**\n   * Callback when workspace is selected\n   */\n  onSelectWorkspace?: (workspaceId: string) => void;\n  /**\n   * Callback when workspace name is clicked (for navigation)\n   */\n  onWorkspaceClick?: (workspaceId: string) => void;\n  /**\n   * Callback when \"Create Workspace\" is clicked\n   */\n  onCreateWorkspace?: () => void;\n  /**\n   * Custom styles\n   */\n  sx?: any;\n  /**\n   * Panel width\n   * @default 350\n   */\n  panelWidth?: number;\n}\n\nexport const WorkspaceSelectorButton: React.FC<WorkspaceSelectorButtonProps> = ({\n  workspaces,\n  selectedWorkspaceId,\n  loading = false,\n  onSelectWorkspace,\n  onWorkspaceClick,\n  onCreateWorkspace,\n  sx = {},\n  panelWidth = 350,\n}) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  // Handle opening the workspace selector\n  const handleOpenSelector = (event: React.MouseEvent<HTMLElement>) => {\n    event.stopPropagation();\n    setAnchorEl(event.currentTarget);\n  };\n\n  // Handle closing the workspace selector\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  // Handle selecting a workspace\n  const handleSelectWorkspace = useCallback(\n    (workspaceId: string) => {\n      handleClose();\n      if (onSelectWorkspace) {\n        onSelectWorkspace(workspaceId);\n      }\n    },\n    [onSelectWorkspace]\n  );\n\n  // Get the selected workspace\n  const selectedWorkspace = Array.isArray(workspaces)\n    ? workspaces.find((w) => w.id === selectedWorkspaceId)\n    : null;\n\n  if (!workspaces || workspaces.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <Box sx={{ display: 'flex', alignItems: 'center', ...sx }}>\n        {selectedWorkspace ? (\n          <>\n            {/* Workspace name as a regular breadcrumb link */}\n            <Link\n              underline=\"hover\"\n              color=\"inherit\"\n              onClick={(e) => {\n                e.stopPropagation();\n                if (onWorkspaceClick) {\n                  onWorkspaceClick(selectedWorkspace.id);\n                }\n              }}\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                fontSize: '0.875rem',\n                cursor: 'pointer',\n                mr: 0.5,\n              }}\n            >\n              <Avatar\n                sx={{\n                  width: 20,\n                  height: 20,\n                  bgcolor: 'secondary.main',\n                  fontSize: '0.7rem',\n                  mr: 0.5,\n                }}\n              >\n                {selectedWorkspace.name.charAt(0)}\n              </Avatar>\n              {selectedWorkspace.name}\n            </Link>\n          </>\n        ) : (\n          <Typography\n            variant=\"body2\"\n            color=\"text.secondary\"\n            sx={{\n              fontSize: '0.875rem',\n            }}\n          >\n            Select Workspace\n          </Typography>\n        )}\n\n        {/* Separate selector button */}\n        <IconButton\n          onClick={handleOpenSelector}\n          size=\"small\"\n          sx={{\n            p: 0.2,\n            ml: 0.5,\n            color: 'text.secondary',\n          }}\n        >\n          <KeyboardArrowDownIcon fontSize=\"small\" />\n        </IconButton>\n      </Box>\n\n      <WorkspaceSelectorPanel\n        open={Boolean(anchorEl)}\n        anchorEl={anchorEl}\n        onClose={handleClose}\n        workspaces={workspaces}\n        selectedWorkspaceId={selectedWorkspaceId}\n        onSelectWorkspace={handleSelectWorkspace}\n        onCreateWorkspace={onCreateWorkspace}\n        loading={loading}\n        width={panelWidth}\n      />\n    </>\n  );\n};\n\ninterface WorkspaceSelectorPanelProps {\n  open: boolean;\n  anchorEl: HTMLElement | null;\n  onClose: () => void;\n  workspaces: Workspace[];\n  selectedWorkspaceId: string | null;\n  onSelectWorkspace: (workspaceId: string) => void;\n  onCreateWorkspace?: () => void;\n  loading?: boolean;\n  width?: number;\n}\n\nconst WorkspaceSelectorPanel: React.FC<WorkspaceSelectorPanelProps> = ({\n  open,\n  anchorEl,\n  onClose,\n  workspaces,\n  selectedWorkspaceId,\n  onSelectWorkspace,\n  onCreateWorkspace,\n  loading = false,\n  width = 350,\n}) => {\n  const [searchTerm, setSearchTerm] = useState('');\n\n  // Reset search when panel opens\n  React.useEffect(() => {\n    if (open) {\n      setSearchTerm('');\n    }\n  }, [open]);\n\n  const filteredWorkspaces = workspaces.filter((w) =>\n    w.name.toLowerCase().includes(searchTerm.toLowerCase())\n  );\n\n  const handleCreateClick = () => {\n    onClose();\n    if (onCreateWorkspace) {\n      onCreateWorkspace();\n    }\n  };\n\n  const handleSelect = (workspaceId: string) => {\n    onSelectWorkspace(workspaceId);\n    onClose();\n  };\n\n  return (\n    <Menu\n      open={open}\n      anchorEl={anchorEl}\n      onClose={onClose}\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n      transformOrigin={{ vertical: 'top', horizontal: 'left' }}\n      PaperProps={{\n        sx: {\n          width: width,\n          maxHeight: 600,\n          mt: 1,\n          borderRadius: 2,\n        },\n      }}\n    >\n      <Box>\n        {/* Search box */}\n        <Box sx={{ px: 2, pt: 2, pb: 1.5 }}>\n          <TextField\n            fullWidth\n            size=\"small\"\n            placeholder=\"Search workspaces...\"\n            value={searchTerm}\n            onChange={(e) => setSearchTerm(e.target.value)}\n            InputProps={{\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <SearchIcon fontSize=\"small\" />\n                </InputAdornment>\n              ),\n            }}\n          />\n        </Box>\n\n        {/* Workspace list */}\n        <Box sx={{ maxHeight: 400, overflowY: 'auto' }}>\n          {loading ? (\n            <Box sx={{ p: 2, textAlign: 'center' }}>\n              <Typography variant=\"body2\" color=\"text.secondary\">\n                Loading...\n              </Typography>\n            </Box>\n          ) : filteredWorkspaces.length === 0 ? (\n            <Box sx={{ p: 2, textAlign: 'center' }}>\n              <Typography variant=\"body2\" color=\"text.secondary\">\n                No workspaces found\n              </Typography>\n            </Box>\n          ) : (\n            <List dense>\n              {filteredWorkspaces.map((workspace) => (\n                <ListItem\n                  key={workspace.id}\n                  onClick={() => handleSelect(workspace.id)}\n                  sx={{\n                    py: 0.5,\n                    cursor: 'pointer',\n                    bgcolor:\n                      workspace.id === selectedWorkspaceId\n                        ? 'action.selected'\n                        : 'transparent',\n                    '&:hover': {\n                      bgcolor: 'action.hover',\n                    },\n                  }}\n                >\n                  <ListItemAvatar>\n                    <Avatar\n                      sx={{ width: 32, height: 32, bgcolor: 'secondary.main' }}\n                    >\n                      {workspace.name.charAt(0)}\n                    </Avatar>\n                  </ListItemAvatar>\n                  <ListItemText\n                    primary={\n                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n                        <Typography variant=\"body2\" fontWeight={500}>\n                          {workspace.name}\n                        </Typography>\n                        {workspace.id === selectedWorkspaceId && (\n                          <CheckIcon fontSize=\"small\" color=\"primary\" />\n                        )}\n                      </Box>\n                    }\n                    secondary={workspace.description}\n                  />\n                </ListItem>\n              ))}\n            </List>\n          )}\n        </Box>\n\n        {/* Footer actions */}\n        <Box\n          sx={{\n            paddingTop: 2,\n            paddingLeft: 2,\n            paddingRight: 2,\n            borderTop: 1,\n            borderColor: 'divider',\n          }}\n        >\n          <Button\n            fullWidth\n            variant=\"text\"\n            startIcon={<AddIcon />}\n            onClick={handleCreateClick}\n            sx={{\n              textTransform: 'none',\n              fontWeight: 500,\n              justifyContent: 'flex-start',\n              color: 'primary.main',\n              py: 1,\n              px: 1.5,\n              '&:hover': {\n                backgroundColor: 'rgba(25, 118, 210, 0.08)',\n              },\n            }}\n          >\n            New Workspace\n          </Button>\n        </Box>\n      </Box>\n    </Menu>\n  );\n};\n\nexport default WorkspaceSelectorButton;\n\n","import React from 'react';\nimport {\n  Stepper as MuiStepper,\n  Step as MuiStep,\n  StepLabel as MuiStepLabel,\n  StepContent as MuiStepContent,\n  StepButton as MuiStepButton,\n  StepperProps as MuiStepperProps,\n  StepProps as MuiStepProps,\n  StepLabelProps as MuiStepLabelProps,\n  StepContentProps as MuiStepContentProps,\n  StepButtonProps as MuiStepButtonProps,\n} from '@mui/material';\n\nexport type StepperProps = MuiStepperProps\n\n/**\n * Stepper component - displays progress through a sequence of steps\n *\n * @example\n * ```tsx\n * <Stepper activeStep={activeStep}>\n *   <Step>\n *     <StepLabel>Step 1</StepLabel>\n *   </Step>\n *   <Step>\n *     <StepLabel>Step 2</StepLabel>\n *   </Step>\n * </Stepper>\n * ```\n */\nexport const Stepper: React.FC<StepperProps> = (props) => {\n  return <MuiStepper {...props} />;\n};\n\nexport type StepProps = MuiStepProps\n\n/**\n * Step component - represents a single step in a Stepper\n */\nexport const Step: React.FC<StepProps> = (props) => {\n  return <MuiStep {...props} />;\n};\n\nexport type StepLabelProps = MuiStepLabelProps\n\n/**\n * StepLabel component - label for a Step\n */\nexport const StepLabel: React.FC<StepLabelProps> = (props) => {\n  return <MuiStepLabel {...props} />;\n};\n\nexport type StepContentProps = MuiStepContentProps\n\n/**\n * StepContent component - optional content that appears below a StepLabel\n */\nexport const StepContent: React.FC<StepContentProps> = (props) => {\n  return <MuiStepContent {...props} />;\n};\n\nexport type StepButtonProps = MuiStepButtonProps\n\n/**\n * StepButton component - makes a Step clickable\n */\nexport const StepButton: React.FC<StepButtonProps> = (props) => {\n  return <MuiStepButton {...props} />;\n};\n\nexport default Stepper;\n\n","import React from 'react';\nimport { styled } from '@mui/material/styles';\nimport { webSurfaceTokens } from '../../theme/webSurfaceTokens';\n\nexport interface NumberedStepperStep {\n  key: string;\n  label: string;\n}\n\nexport interface NumberedStepperProps {\n  steps: NumberedStepperStep[];\n  /** Index of the active step. -1 = none active. */\n  current: number;\n  className?: string;\n}\n\nconst Root = styled('ol')({\n  listStyle: 'none',\n  padding: 0,\n  margin: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 8,\n});\n\nconst Row = styled('li')({\n  display: 'flex',\n  gap: 10,\n  alignItems: 'center',\n});\n\nconst Num = styled('span', {\n  shouldForwardProp: (p) => p !== 'state',\n})<{ state: 'pending' | 'active' | 'done' }>(({ state }) => ({\n  width: 24,\n  height: 24,\n  flexShrink: 0,\n  borderRadius: '50%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontSize: 12,\n  fontWeight: 600,\n  border: `1px solid ${webSurfaceTokens.strokeOnMed}`,\n  background: webSurfaceTokens.surfaceContrast,\n  color: webSurfaceTokens.textSecondary,\n  ...(state === 'active' && {\n    background: webSurfaceTokens.cVioletLight,\n    borderColor: webSurfaceTokens.cViolet,\n    color: webSurfaceTokens.cVioletDark,\n  }),\n  ...(state === 'done' && {\n    background: webSurfaceTokens.cViolet,\n    borderColor: webSurfaceTokens.cViolet,\n    color: 'white',\n  }),\n}));\n\nconst Label = styled('span', {\n  shouldForwardProp: (p) => p !== 'active',\n})<{ active: boolean }>(({ active }) => ({\n  fontSize: 13,\n  color: active ? webSurfaceTokens.textPrimary : webSurfaceTokens.textSecondary,\n  fontWeight: active ? 500 : 400,\n}));\n\n/**\n * Vertical numbered stepper used by Try-this-out and similar guided flows.\n * Brand-styled: active rows take the violet palette; completed rows show ✓.\n */\nexport const NumberedStepper = React.forwardRef<HTMLOListElement, NumberedStepperProps>(\n  function NumberedStepper({ steps, current, className }, ref) {\n    return (\n      <Root ref={ref} className={className}>\n        {steps.map((s, i) => {\n          const state: 'pending' | 'active' | 'done' =\n            i < current ? 'done' : i === current ? 'active' : 'pending';\n          return (\n            <Row key={s.key} {...(state === 'active' ? { 'aria-current': 'step' } : {})}>\n              <Num state={state}>{state === 'done' ? '✓' : i + 1}</Num>\n              <Label active={state === 'active'}>{s.label}</Label>\n            </Row>\n          );\n        })}\n      </Root>\n    );\n  },\n);\n","/**\n * SideNav Component\n * Main container for side navigation with compound components\n * V2: Added collapsed state support with animated transitions\n */\n\nimport React, { useState, useCallback } from 'react';\nimport { Box } from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport type { SideNavProps, SideNavHeaderSlotProps, SideNavNavigationProps, SideNavFooterProps } from './types';\nimport { scrollbarStyles } from './styles';\n\n// Context to pass collapsed state and handlers to child components\ninterface SideNavContextValue {\n  collapsed: boolean;\n  showTooltips: boolean;\n  onToggleCollapse?: () => void;\n}\n\nconst SideNavContext = React.createContext<SideNavContextValue>({\n  collapsed: false,\n  showTooltips: true,\n});\n\n/**\n * Styled main container with collapsed state support\n */\nconst SideNavContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['navWidth', 'navPosition', 'showBorder', 'backgroundColor', 'isCollapsed', 'collapsedWidth', 'transitionDuration'].includes(prop as string),\n})<{\n  navWidth?: number;\n  navPosition?: string;\n  showBorder?: boolean;\n  backgroundColor?: string;\n  isCollapsed?: boolean;\n  collapsedWidth?: number;\n  transitionDuration?: number;\n}>(({ theme, navWidth = 280, navPosition = 'left', showBorder = true, backgroundColor, isCollapsed = false, collapsedWidth = 68, transitionDuration = 300 }) => ({\n  width: isCollapsed ? collapsedWidth : navWidth,\n  height: '100%',\n  display: 'flex',\n  flexDirection: 'column',\n  backgroundColor: backgroundColor || theme.palette.background.paper,\n  overflow: 'hidden',\n  transition: `width ${transitionDuration}ms ${theme.transitions.easing.easeInOut}`,\n\n  // Disable transition for reduced motion preference\n  '@media (prefers-reduced-motion: reduce)': {\n    transition: 'none',\n  },\n\n  // Border on the appropriate side\n  ...(showBorder && {\n    borderRight: navPosition === 'left' ? `1px solid ${theme.palette.divider}` : 'none',\n    borderLeft: navPosition === 'right' ? `1px solid ${theme.palette.divider}` : 'none',\n  }),\n}));\n\n/**\n * Header section (fixed at top)\n */\nconst HeaderSection = styled(Box)(({ theme }) => ({\n  flexShrink: 0,\n  backgroundColor: theme.palette.background.paper,\n}));\n\n/**\n * Navigation section (scrollable)\n */\nconst NavigationSection = styled(Box)(() => ({\n  flexGrow: 1,\n  overflowY: 'auto',\n  overflowX: 'hidden',\n  ...scrollbarStyles,\n}));\n\n/**\n * Footer section (fixed)\n */\nconst FooterSection = styled(Box)(({ theme }) => ({\n  flexShrink: 0,\n  backgroundColor: theme.palette.background.paper,\n}));\n\n/**\n * SideNav.Header compound component\n * Passes collapsed state and toggle handler to children\n */\nconst Header = React.memo<SideNavHeaderSlotProps>(({ children, className }) => {\n  const { collapsed, onToggleCollapse } = React.useContext(SideNavContext);\n  \n  // Clone children and inject collapsed prop\n  const enhancedChildren = React.Children.map(children, (child) => {\n    if (React.isValidElement(child)) {\n      return React.cloneElement(child as React.ReactElement<any>, {\n        collapsed,\n        onCollapse: onToggleCollapse,\n      });\n    }\n    return child;\n  });\n\n  return (\n    <HeaderSection className={className} data-testid=\"sidenav-header\">\n      {enhancedChildren}\n    </HeaderSection>\n  );\n});\n\nHeader.displayName = 'SideNav.Header';\n\n/**\n * SideNav.Navigation compound component\n * Passes collapsed state to children\n */\nconst Navigation = React.memo<SideNavNavigationProps>(({ children, className }) => {\n  const { collapsed, showTooltips } = React.useContext(SideNavContext);\n  \n  // Clone children and inject collapsed and showTooltips props\n  const enhancedChildren = React.Children.map(children, (child) => {\n    if (React.isValidElement(child)) {\n      return React.cloneElement(child as React.ReactElement<any>, {\n        collapsed,\n        showTooltips,\n      });\n    }\n    return child;\n  });\n\n  return (\n    <NavigationSection className={className} data-testid=\"sidenav-navigation\">\n      {enhancedChildren}\n    </NavigationSection>\n  );\n});\n\nNavigation.displayName = 'SideNav.Navigation';\n\n/**\n * SideNav.Footer compound component\n * Passes collapsed state to children\n */\nconst Footer = React.memo<SideNavFooterProps>(({ children, className }) => {\n  const { collapsed } = React.useContext(SideNavContext);\n  \n  // Clone children and inject compact prop\n  const enhancedChildren = React.Children.map(children, (child) => {\n    if (React.isValidElement(child)) {\n      return React.cloneElement(child as React.ReactElement<any>, {\n        compact: collapsed,\n      });\n    }\n    return child;\n  });\n\n  return (\n    <FooterSection className={className} data-testid=\"sidenav-footer\">\n      {enhancedChildren}\n    </FooterSection>\n  );\n});\n\nFooter.displayName = 'SideNav.Footer';\n\n/**\n * Main SideNav component with compound components\n * V2: Supports controlled/uncontrolled collapsed state\n */\ninterface SideNavComponent extends React.FC<SideNavProps> {\n  Header: typeof Header;\n  Navigation: typeof Navigation;\n  Footer: typeof Footer;\n}\n\nexport const SideNav: SideNavComponent = Object.assign(\n  React.memo<SideNavProps>(({\n    width = 280,\n    collapsedWidth = 68,\n    collapsed: controlledCollapsed,\n    defaultCollapsed = false,\n    onCollapseChange,\n    transitionDuration = 300,\n    showTooltips = true,\n    position = 'left',\n    showBorder = true,\n    backgroundColor,\n    children,\n    className,\n    ariaLabel = 'Main navigation',\n  }) => {\n    // Internal state for uncontrolled mode\n    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);\n\n    // Determine if we're in controlled mode\n    const isControlled = controlledCollapsed !== undefined;\n    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;\n\n    // Toggle handler\n    const handleToggleCollapse = useCallback(() => {\n      const newCollapsed = !collapsed;\n      \n      // Update internal state if uncontrolled\n      if (!isControlled) {\n        setInternalCollapsed(newCollapsed);\n      }\n\n      // Call the callback if provided\n      if (onCollapseChange) {\n        onCollapseChange(newCollapsed);\n      }\n    }, [collapsed, isControlled, onCollapseChange]);\n\n    // Context value to pass to children\n    const contextValue: SideNavContextValue = {\n      collapsed,\n      showTooltips,\n      onToggleCollapse: handleToggleCollapse,\n    };\n\n    return (\n      <SideNavContext.Provider value={contextValue}>\n      <SideNavContainer\n        role=\"navigation\"\n        aria-label={ariaLabel}\n        navWidth={width}\n        collapsedWidth={collapsedWidth}\n        isCollapsed={collapsed}\n        transitionDuration={transitionDuration}\n        navPosition={position}\n        showBorder={showBorder}\n        backgroundColor={backgroundColor}\n        className={className}\n      >\n        {children}\n      </SideNavContainer>\n      </SideNavContext.Provider>\n    );\n  }),\n  {\n    Header,\n    Navigation,\n    Footer,\n  }\n);\n\nSideNav.displayName = 'SideNav';\n\n// Export context for use by child components\nexport { SideNavContext };\n","/**\n * Shared styles for SideNav components\n */\n\n/**\n * Custom scrollbar styling for scrollable containers\n * Used by NavigationSection (SideNav) and NavigationList\n */\nexport const scrollbarStyles = {\n  '&::-webkit-scrollbar': {\n    width: '8px',\n  },\n  '&::-webkit-scrollbar-track': {\n    backgroundColor: 'transparent',\n  },\n  '&::-webkit-scrollbar-thumb': {\n    backgroundColor: 'rgba(0, 0, 0, 0.2)',\n    borderRadius: '4px',\n    '&:hover': {\n      backgroundColor: 'rgba(0, 0, 0, 0.3)',\n    },\n  },\n} as const;\n","/**\n * SideNavHeader Component\n * Displays app branding (logo + title) and an optional collapse toggle button\n * V2: Supports collapsed state with compact logo-only view\n */\n\nimport React from 'react';\nimport { Box, Typography, IconButton, Tooltip, ButtonBase } from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\nimport type { SideNavHeaderProps } from './types';\n\n/**\n * Styled container for the header section\n */\nconst HeaderContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'isCollapsed',\n})<{ isCollapsed?: boolean }>(({ theme, isCollapsed }) => ({\n  display: 'flex',\n  flexDirection: isCollapsed ? 'column' : 'row',\n  alignItems: 'center',\n  justifyContent: isCollapsed ? 'center' : 'flex-start',\n  gap: isCollapsed ? theme.spacing(1) : theme.spacing(1.5),\n  padding: theme.spacing(2),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  transition: theme.transitions.create(['gap', 'justify-content', 'flex-direction'], {\n    duration: theme.transitions.duration.shorter,\n  }),\n}));\n\n/**\n * Styled clickable branding area (logo + title).\n * Only this region triggers onLogoClick — not the full header.\n */\nconst BrandingButton = styled(ButtonBase)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  minWidth: 0,\n  padding: 0,\n  borderRadius: theme.shape.borderRadius,\n  // Subtle hover feedback only when clickable\n  '&:hover': {\n    opacity: 0.8,\n  },\n  '&:focus-visible': {\n    outline: `2px solid ${theme.palette.primary.main}`,\n    outlineOffset: 2,\n  },\n}));\n\n/**\n * SideNavHeader Component\n *\n * Renders the app branding area at the top of the side navigation.\n * Includes an optional logo, a title, and an optional collapse toggle button.\n * V2: In collapsed state, shows logo stacked vertically above toggle button.\n *\n * If `onLogoClick` is provided, only the logo+title area is clickable\n * (e.g. to navigate back to the home page). The rest of the header\n * (collapse button, surrounding padding) does NOT trigger that callback.\n */\nexport const SideNavHeader = React.memo<SideNavHeaderProps>(({\n  logo,\n  title,\n  showCollapseButton = true,\n  onCollapse,\n  onLogoClick,\n  ariaLabel,\n  collapsed = false,\n}) => {\n  const headerAriaLabel = ariaLabel || `${title} navigation header`;\n\n  // The logo + title content (shared between clickable and non-clickable variants)\n  const brandingContent = (\n    <>\n      {/* Logo - Always visible */}\n      {logo && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            flexShrink: 0,\n          }}\n        >\n          {logo}\n        </Box>\n      )}\n\n      {/* Title - Hidden when collapsed */}\n      {!collapsed && (\n        <Typography\n          variant=\"subtitle1\"\n          sx={{\n            fontWeight: 700,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n            minWidth: 0,\n          }}\n        >\n          {title}\n        </Typography>\n      )}\n    </>\n  );\n\n  return (\n    <HeaderContainer\n      data-testid=\"sidenav-header-content\"\n      aria-label={headerAriaLabel}\n      isCollapsed={collapsed}\n    >\n      {/* Branding area — only this region is clickable for \"go home\" */}\n      {onLogoClick ? (\n        <BrandingButton\n          onClick={onLogoClick}\n          aria-label={`Go to ${title} home`}\n          data-testid=\"sidenav-home-link\"\n        >\n          {brandingContent}\n        </BrandingButton>\n      ) : (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 1.5,\n            minWidth: 0,\n          }}\n        >\n          {brandingContent}\n        </Box>\n      )}\n\n      {/* Collapse toggle button — pushed to the right edge via marginLeft auto */}\n      {showCollapseButton && (\n        <Tooltip\n          title={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n          placement=\"right\"\n          arrow\n        >\n          <IconButton\n            onClick={onCollapse}\n            aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n            aria-expanded={!collapsed}\n            size=\"small\"\n            sx={{\n              flexShrink: 0,\n              marginLeft: collapsed ? 0 : 'auto',\n              color: 'text.secondary',\n              '&:hover': {\n                backgroundColor: 'action.hover',\n                color: 'text.primary',\n              },\n            }}\n          >\n            {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}\n          </IconButton>\n        </Tooltip>\n      )}\n    </HeaderContainer>\n  );\n});\n\nSideNavHeader.displayName = 'SideNavHeader';\n","/**\n * NavigationList Component\n * Container for multiple navigation items with scroll support\n * V2: Passes collapsed state to navigation items\n */\n\nimport React, { useState } from 'react';\nimport { List, ListItem } from '@mui/material';\nimport { NavigationItem } from './NavigationItem';\nimport { scrollbarStyles } from './styles';\nimport type { NavigationListProps } from './types';\n\n/**\n * NavigationList Component\n */\nexport const NavigationList = React.memo<NavigationListProps>(({\n  items,\n  selectedId,\n  onSelectionChange,\n  maxHeight = 'auto',\n  ariaLabel = 'Navigation menu',\n  collapsed = false,\n  showTooltips = true,\n}) => {\n  // Internal state for uncontrolled mode\n  const [internalSelectedId, setInternalSelectedId] = useState<string | undefined>(\n    selectedId\n  );\n\n  // Determine if we're in controlled mode\n  const isControlled = selectedId !== undefined;\n  const currentSelectedId = isControlled ? selectedId : internalSelectedId;\n\n  const handleItemClick = (id: string) => {\n    // Update internal state if uncontrolled\n    if (!isControlled) {\n      setInternalSelectedId(id);\n    }\n\n    // Call the callback if provided\n    if (onSelectionChange) {\n      onSelectionChange(id);\n    }\n  };\n\n  return (\n    <List\n      role=\"list\"\n      aria-label={ariaLabel}\n      sx={{\n        padding: 0,\n        maxHeight,\n        overflowY: maxHeight !== 'auto' ? 'auto' : 'visible',\n        overflowX: 'hidden',\n        ...(maxHeight !== 'auto' ? scrollbarStyles : {}),\n      }}\n    >\n      {items.map((item, index) => {\n        const isSelected = currentSelectedId === item.id;\n\n        return (\n          <ListItem\n            key={`${item.id}-${index}`}\n            role=\"listitem\"\n            sx={{\n              padding: 0,\n              display: 'block',\n            }}\n          >\n            <NavigationItem\n              {...item}\n              selected={isSelected}\n              collapsed={collapsed}\n              showTooltip={showTooltips}\n              onClick={(id) => {\n                // Don't handle click if item is disabled\n                if (item.disabled) {\n                  return;\n                }\n\n                // Call the item's onClick if provided\n                if (item.onClick) {\n                  item.onClick(id);\n                }\n\n                // Handle selection change\n                handleItemClick(id);\n              }}\n            />\n          </ListItem>\n        );\n      })}\n    </List>\n  );\n});\n\nNavigationList.displayName = 'NavigationList';\n","/**\n * NavigationItem Component\n * Individual navigation menu item with icon, label, and interactive states\n * V2: Added collapsed state support with tooltips\n */\n\nimport React from 'react';\nimport {\n  ListItemButton,\n  ListItemIcon,\n  ListItemText,\n  Box,\n  Tooltip,\n} from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport type { NavigationItemProps } from './types';\n\n/**\n * Styled ListItemButton with custom states and collapsed support\n */\nconst StyledListItemButton = styled(ListItemButton, {\n  shouldForwardProp: (prop) => \n    !['selected', 'size', 'iconPosition', 'isCollapsed'].includes(prop as string),\n})<{ selected?: boolean; size?: string; isCollapsed?: boolean }>(({ theme, selected, size, isCollapsed }) => {\n  const heights = {\n    small: 40,\n    medium: 48,\n    large: 56,\n  };\n\n  return {\n    minHeight: heights[size as keyof typeof heights] || heights.medium,\n    padding: theme.spacing(1, 1.5), // 8px 12px\n    margin: theme.spacing(0.5, 1), // 4px 8px\n    borderRadius: theme.shape.borderRadius,\n    gap: isCollapsed ? 0 : theme.spacing(1), // No gap in collapsed mode\n    justifyContent: isCollapsed ? 'center' : 'flex-start',\n    transition: theme.transitions.create(\n      ['background-color', 'color', 'justify-content'],\n      { duration: theme.transitions.duration.shortest }\n    ),\n\n    // Default state\n    color: theme.palette.text.primary,\n    backgroundColor: 'transparent',\n\n    '& .MuiListItemIcon-root': {\n      minWidth: 'auto',\n      color: theme.palette.text.secondary,\n    },\n\n    // Hover state\n    '&:hover': {\n      backgroundColor: theme.palette.action.hover,\n      '& .MuiListItemIcon-root': {\n        color: theme.palette.text.primary,\n      },\n    },\n\n    // Selected state\n    ...(selected && {\n      color: theme.palette.primary.main,\n      backgroundColor: theme.palette.action.selected,\n\n      '& .MuiListItemIcon-root': {\n        minWidth: 'auto',\n        color: theme.palette.primary.main,\n      },\n\n      '&:hover': {\n        backgroundColor: theme.palette.action.selected,\n        '& .MuiListItemIcon-root': {\n          color: theme.palette.primary.main,\n        },\n      },\n    }),\n\n    // Disabled state\n    '&.Mui-disabled': {\n      opacity: 1,\n      color: theme.palette.text.disabled,\n      '& .MuiListItemIcon-root': {\n        color: theme.palette.action.disabled,\n      },\n    },\n  };\n});\n\n/**\n * NavigationItem Component\n * V2: Supports collapsed state with tooltip\n */\nexport const NavigationItem = React.memo(\n  React.forwardRef<HTMLDivElement, NavigationItemProps>(function NavigationItem(\n    {\n      id,\n      label,\n      icon,\n      iconPosition = 'left',\n      selected = false,\n      disabled = false,\n      onClick,\n      endContent,\n      href,\n      ariaLabel,\n      size = 'medium',\n      collapsed = false,\n      showTooltip = true,\n      tooltipPlacement = 'right',\n      ...rest\n    },\n    ref,\n  ) {\n  const handleClick = () => {\n    if (!disabled && onClick) {\n      onClick(id);\n    }\n  };\n\n  const iconElement = icon && (\n    <ListItemIcon\n      sx={{\n        fontSize: 24,\n        width: 24,\n        height: 24,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      {icon}\n    </ListItemIcon>\n  );\n\n  const labelElement = (\n    <ListItemText\n      primary={label}\n      primaryTypographyProps={{\n        sx: {\n          fontWeight: 400,\n          fontSize: 16,\n          lineHeight: 1.5,\n          letterSpacing: '0.0168em',\n          display: collapsed ? 'none' : 'block',\n          opacity: collapsed ? 0 : 1,\n          transition: (theme) => theme.transitions.create(['opacity'], {\n            duration: theme.transitions.duration.shorter,\n          }),\n        },\n      }}\n    />\n  );\n\n  const buttonContent = (\n    <StyledListItemButton\n      ref={ref as React.Ref<HTMLDivElement>}\n      selected={selected}\n      disabled={disabled}\n      onClick={handleClick}\n      {...(href && { component: 'a', href })}\n      aria-label={ariaLabel || label}\n      aria-current={selected ? 'page' : undefined}\n      aria-disabled={disabled}\n      size={size}\n      isCollapsed={collapsed}\n      {...rest}\n    >\n      {/* Icon on left */}\n      {icon && iconPosition === 'left' && iconElement}\n\n      {/* Label (hidden in collapsed mode) */}\n      {labelElement}\n\n      {/* Icon on right */}\n      {icon && iconPosition === 'right' && iconElement}\n\n      {/* End content (hidden in collapsed mode) */}\n      {endContent && !collapsed && (\n        <Box\n          sx={{\n            marginLeft: 'auto',\n            display: 'flex',\n            alignItems: 'center',\n          }}\n        >\n          {endContent}\n        </Box>\n      )}\n    </StyledListItemButton>\n  );\n\n  // Wrap in tooltip when collapsed\n  if (collapsed && showTooltip) {\n    return (\n      <Tooltip\n        title={label}\n        placement={tooltipPlacement}\n        enterDelay={200}\n        leaveDelay={0}\n        arrow\n      >\n        {buttonContent}\n      </Tooltip>\n    );\n  }\n\n  return buttonContent;\n  }),\n);\n\nNavigationItem.displayName = 'NavigationItem';\n","/**\n * ConnectionStatus Component\n * Displays connection status with pill-style indicator\n * V2: Supports compact mode for collapsed sidebar\n */\n\nimport React from 'react';\nimport { Box, Typography, Tooltip } from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport PowerIcon from '@mui/icons-material/Power';\nimport type { ConnectionStatusProps } from './types';\n\n/**\n * Styled container for the status pill\n */\nconst StatusPill = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'interactive'].includes(prop as string),\n})<{ variant?: string; interactive?: boolean }>(({ theme, variant = 'info', interactive }) => {\n  const variantColors = {\n    success: {\n      background: theme.palette.success.light + '20',\n      text: theme.palette.success.dark,\n    },\n    warning: {\n      background: theme.palette.warning.light + '20',\n      text: theme.palette.warning.dark,\n    },\n    error: {\n      background: theme.palette.error.light + '20',\n      text: theme.palette.error.dark,\n    },\n    info: {\n      background: theme.palette.grey[100],\n      text: theme.palette.text.primary,\n    },\n  };\n\n  const colors = variantColors[variant as keyof typeof variantColors] || variantColors.info;\n\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing(1),\n    padding: theme.spacing(0.75, 1.5), // 6px 12px\n    borderRadius: 16, // Always pill-shaped\n    backgroundColor: colors.background,\n    cursor: interactive ? 'pointer' : 'default',\n    transition: theme.transitions.create(['background-color', 'transform'], {\n      duration: theme.transitions.duration.shortest,\n    }),\n    maxWidth: '100%',\n\n    ...(interactive && {\n      '&:hover': {\n        backgroundColor: colors.background + '40', // Slightly darker on hover\n        transform: 'scale(1.02)',\n      },\n      '&:active': {\n        transform: 'scale(0.98)',\n      },\n    }),\n\n    '& .status-text': {\n      color: colors.text,\n      fontWeight: 500,\n      fontSize: 14,\n      lineHeight: 1.5,\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      minWidth: 0, // Allow text to shrink and truncate in flex container\n    },\n  };\n});\n\n/**\n * ConnectionStatus Component\n * V2: Supports compact mode\n */\nexport const ConnectionStatus = React.memo<ConnectionStatusProps>(({\n  status,\n  variant = 'info',\n  icon,\n  onClick,\n  compact = false,\n  compactText,\n}) => {\n  const interactive = !!onClick;\n\n  const handleClick = () => {\n    if (onClick) {\n      onClick();\n    }\n  };\n\n  const statusContent = (\n    <StatusPill\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      aria-label={compact ? status : undefined}\n      variant={variant}\n      interactive={interactive}\n      onClick={handleClick}\n    >\n      {/* Icon */}\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          fontSize: 16,\n          color: 'inherit',\n        }}\n      >\n        {icon || <PowerIcon fontSize=\"small\" />}\n      </Box>\n\n      {/* Status text: compactText in compact mode, full status in normal mode */}\n      <Typography className=\"status-text\" variant=\"body2\">\n        {compact ? (compactText ?? status) : status}\n      </Typography>\n    </StatusPill>\n  );\n\n  // Wrap in tooltip when compact\n  if (compact) {\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'center',\n          padding: 1,\n        }}\n      >\n        <Tooltip title={status} placement=\"right\" arrow>\n          {statusContent}\n        </Tooltip>\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'center',\n        padding: 1,\n      }}\n    >\n      {statusContent}\n    </Box>\n  );\n});\n\nConnectionStatus.displayName = 'ConnectionStatus';\n","/**\n * AccountSection Component\n * Displays user account information with avatar, name, and logout\n * V2: Supports compact mode for collapsed sidebar\n */\n\nimport React from 'react';\nimport { Box, Avatar, Typography, Button, IconButton, Tooltip } from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport LogoutIcon from '@mui/icons-material/Logout';\nimport type { AccountSectionProps } from './types';\n\n/**\n * Styled container for account section\n */\nconst AccountContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['layout', 'isCompact'].includes(prop as string),\n})<{ layout?: string; isCompact?: boolean }>(({ theme, layout = 'horizontal', isCompact }) => ({\n  display: 'flex',\n  flexDirection: isCompact ? 'column' : 'row',\n  alignItems: 'center',\n  justifyContent: isCompact ? 'center' : 'flex-start',\n  gap: isCompact ? theme.spacing(1) : theme.spacing(1.5),\n  padding: theme.spacing(2),\n  borderTop: `1px solid ${theme.palette.divider}`,\n  transition: theme.transitions.create(['gap', 'justify-content'], {\n    duration: theme.transitions.duration.shorter,\n  }),\n\n  ...(layout === 'vertical' && !isCompact && {\n    flexDirection: 'column',\n    textAlign: 'center',\n  }),\n}));\n\n/**\n * Derive initials from user name\n */\nconst deriveInitials = (name: string): string => {\n  if (!name || name.trim() === '') {\n    return '?';\n  }\n\n  const words = name.trim().split(/\\s+/);\n  \n  if (words.length === 1) {\n    // Single word: use first letter\n    return words[0][0].toUpperCase();\n  }\n  \n  if (words.length === 2) {\n    // Two words: use first letter of each\n    return (words[0][0] + words[1][0]).toUpperCase();\n  }\n  \n  // Three or more words: use first and last\n  return (words[0][0] + words[words.length - 1][0]).toUpperCase();\n};\n\n/**\n * AccountSection Component\n * V2: Supports compact mode\n */\nexport const AccountSection = React.memo<AccountSectionProps>(({\n  user,\n  onLogout,\n  showEmail = false,\n  layout = 'horizontal',\n  compact = false,\n}) => {\n  const initials = user.initials || deriveInitials(user.name);\n  const avatarSrc = user.avatarUrl;\n\n  // Compact mode: Avatar + logout icon button\n  if (compact) {\n    return (\n      <AccountContainer layout={layout} isCompact={true} aria-label=\"Account section\">\n        {/* Avatar with tooltip */}\n        <Tooltip\n          title={`${user.name}${user.email ? ` (${user.email})` : ''}`}\n          placement=\"right\"\n          arrow\n        >\n          <Avatar\n            src={avatarSrc}\n            alt={user.name}\n            sx={{\n              width: 40,\n              height: 40,\n              backgroundColor: 'primary.main',\n              fontSize: 16,\n              fontWeight: 600,\n              flexShrink: 0,\n              cursor: 'default',\n            }}\n          >\n            {initials}\n          </Avatar>\n        </Tooltip>\n\n        {/* Compact logout icon button */}\n        <Tooltip title=\"Logout\" placement=\"right\" arrow>\n          <IconButton\n            onClick={onLogout}\n            aria-label=\"Logout\"\n            size=\"small\"\n            sx={{\n              color: 'text.secondary',\n              '&:hover': {\n                backgroundColor: 'action.hover',\n                color: 'text.primary',\n              },\n            }}\n          >\n            <LogoutIcon fontSize=\"small\" />\n          </IconButton>\n        </Tooltip>\n      </AccountContainer>\n    );\n  }\n\n  // Normal mode: Full layout\n  return (\n    <AccountContainer layout={layout} isCompact={false} aria-label=\"Account section\">\n      {/* Avatar */}\n      <Avatar\n        src={avatarSrc}\n        alt={user.name}\n        sx={{\n          width: 40,\n          height: 40,\n          backgroundColor: 'primary.main',\n          fontSize: 16,\n          fontWeight: 600,\n          flexShrink: 0,\n        }}\n      >\n        {initials}\n      </Avatar>\n\n      {/* User info and logout stacked vertically */}\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 0.5,\n          flexGrow: 1,\n          minWidth: 0, // Allow text truncation\n        }}\n      >\n        {/* User name */}\n        <Typography\n          variant=\"body2\"\n          sx={{\n            fontWeight: 600,\n            lineHeight: 1.5,\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {user.name}\n        </Typography>\n\n        {showEmail && user.email && (\n          <Typography\n            variant=\"caption\"\n            sx={{\n              color: 'text.secondary',\n              lineHeight: 1.5,\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n              display: 'block',\n            }}\n          >\n            {user.email}\n          </Typography>\n        )}\n\n        {/* Logout button below name */}\n        <Button\n          onClick={onLogout}\n          aria-label=\"Logout\"\n          startIcon={<LogoutIcon fontSize=\"small\" />}\n          sx={{\n            color: 'text.secondary',\n            textTransform: 'none',\n            fontSize: '14px',\n            fontWeight: 400,\n            padding: '4px 8px',\n            justifyContent: 'flex-start',\n            alignSelf: 'flex-start',\n            minWidth: 'auto',\n            '&:hover': {\n              backgroundColor: 'action.hover',\n              color: 'text.primary',\n            },\n          }}\n        >\n          Logout\n        </Button>\n      </Box>\n    </AccountContainer>\n  );\n});\n\nAccountSection.displayName = 'AccountSection';\n","import React from 'react';\nimport MuiTab, { TabProps as MuiTabProps } from '@mui/material/Tab';\nimport { styled } from '@mui/material/styles';\nimport { Badge } from '../feedback/Badge';\n\nexport interface TabProps extends Omit<MuiTabProps, 'icon'> {\n  badge?: number | string;\n  badgeVariant?: 'default' | 'primary' | 'success' | 'error';\n}\n\nconst StyledTab = styled(MuiTab)(({ theme }) => ({\n  textTransform: 'none',\n  minHeight: '48px',\n  fontWeight: 400,\n  color: theme.palette.text.primary,\n  borderBottom: '2px solid transparent',\n  '&:hover': {\n    color: theme.palette.primary.main,\n  },\n  '&.Mui-selected': {\n    fontWeight: 600,\n    color: theme.palette.primary.main,\n    borderBottom: `2px solid ${theme.palette.primary.main}`,\n  },\n}));\n\nexport const Tab: React.FC<TabProps> = ({\n  badge,\n  badgeVariant = 'primary',\n  label,\n  ...props\n}) => {\n  const tabLabel = badge !== undefined ? (\n    <Badge variant={badgeVariant} badgeContent={badge}>\n      {label}\n    </Badge>\n  ) : (\n    label\n  );\n\n  return <StyledTab label={tabLabel} {...props} />;\n};\n\n","import React from 'react';\nimport {\n  Menu as MuiMenu,\n  MenuItem as MuiMenuItem,\n  MenuProps as MuiMenuProps,\n  ListItemIcon,\n  ListItemText,\n  Divider,\n} from '@mui/material';\nimport { styled } from '@mui/material/styles';\n\nexport interface MenuProps extends Omit<MuiMenuProps, 'open'> {\n  anchorEl?: HTMLElement | null;\n  onClose: () => void;\n}\n\nconst StyledMenu = styled(MuiMenu)(({ theme }) => ({\n  '& .MuiPaper-root': {\n    borderRadius: 8,\n    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.15)',\n    minWidth: 200,\n  },\n  '& .MuiMenuItem-root': {\n    padding: '8px 16px',\n    '&:hover': {\n      backgroundColor: theme.palette.background.selected,\n    },\n  },\n}));\n\nexport const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(\n  { anchorEl, onClose, children, ...props },\n  ref,\n) {\n  return (\n    <StyledMenu\n      ref={ref}\n      anchorEl={anchorEl}\n      open={Boolean(anchorEl)}\n      onClose={onClose}\n      anchorOrigin={{\n        vertical: 'bottom',\n        horizontal: 'left',\n      }}\n      transformOrigin={{\n        vertical: 'top',\n        horizontal: 'left',\n      }}\n      {...props}\n    >\n      {children}\n    </StyledMenu>\n  );\n});\n\nexport interface MenuItemProps {\n  icon?: React.ReactNode;\n  label: string;\n  onClick?: () => void;\n  disabled?: boolean;\n  divider?: boolean;\n}\n\nexport const MenuItem = React.forwardRef<HTMLLIElement, MenuItemProps>(function MenuItem(\n  { icon, label, onClick, disabled = false, divider = false },\n  ref,\n) {\n  return (\n    <>\n      <MuiMenuItem ref={ref} onClick={onClick} disabled={disabled}>\n        {icon && <ListItemIcon>{icon}</ListItemIcon>}\n        <ListItemText>{label}</ListItemText>\n      </MuiMenuItem>\n      {divider && <Divider />}\n    </>\n  );\n});\n\n","import React from 'react';\nimport MuiPagination, { PaginationProps as MuiPaginationProps } from '@mui/material/Pagination';\nimport { styled } from '@mui/material/styles';\n\nexport interface PaginationProps extends Omit<MuiPaginationProps, 'color'> {\n  color?: 'primary' | 'secondary' | 'standard';\n}\n\nconst StyledPagination = styled(MuiPagination)(({ theme }) => ({\n  '& .MuiPaginationItem-root': {\n    '&.Mui-selected': {\n      backgroundColor: theme.palette.primary.main,\n      color: theme.palette.primary.contrastText,\n      '&:hover': {\n        backgroundColor: theme.palette.primary.light,\n      },\n    },\n    '&:hover': {\n      backgroundColor: theme.palette.background.selected,\n    },\n  },\n}));\n\nexport const Pagination: React.FC<PaginationProps> = ({ color = 'primary', ...props }) => {\n  return <StyledPagination color={color} {...props} />;\n};\n\n","import React, { useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Avatar,\n  Menu,\n  InputAdornment,\n  List,\n  ListItemButton,\n  ListItemAvatar,\n  ListItemText,\n  CircularProgress,\n} from '@mui/material';\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport SearchIcon from '@mui/icons-material/Search';\nimport AddIcon from '@mui/icons-material/Add';\nimport { useTheme } from '@mui/material/styles';\nimport { Link } from '../layout/Link';\nimport { IconButton } from '../buttons/IconButton';\nimport { TextField } from '../inputs/TextField';\nimport { Button } from '../buttons/Button';\n\nexport interface SelectorOption {\n  id: string;\n  name: string;\n  description?: string;\n  avatar?: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SelectorProps {\n  options: SelectorOption[];\n  selectedId: string | null;\n  onSelect: (id: string) => void;\n  onCreate?: () => void;\n  loading?: boolean;\n  placeholder?: string;\n  emptyMessage?: string;\n  compact?: boolean;\n  renderSelected?: (option: SelectorOption) => React.ReactNode;\n  width?: number;\n}\n\nexport const Selector: React.FC<SelectorProps> = ({\n  options,\n  selectedId,\n  onSelect,\n  onCreate,\n  loading = false,\n  placeholder = 'Select...',\n  emptyMessage = 'No items found',\n  compact = false,\n  renderSelected,\n  width = 350,\n}) => {\n  const theme = useTheme();\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const [searchTerm, setSearchTerm] = useState('');\n\n  const open = Boolean(anchorEl);\n  const selectedOption = options.find((opt) => opt.id === selectedId);\n\n  const filteredOptions = options.filter((opt) =>\n    opt.name.toLowerCase().includes(searchTerm.toLowerCase())\n  );\n\n  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {\n    event.stopPropagation();\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n    setSearchTerm('');\n  };\n\n  const handleSelect = (id: string) => {\n    onSelect(id);\n    handleClose();\n  };\n\n  const defaultRenderSelected = (option: SelectorOption) => (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n      {option.avatar ? (\n        <Avatar src={option.avatar} sx={{ width: 20, height: 20 }} />\n      ) : option.icon ? (\n        option.icon\n      ) : (\n        <Avatar sx={{ width: 20, height: 20, bgcolor: theme.palette.primary.main, fontSize: '0.7rem' }}>\n          {option.name.charAt(0)}\n        </Avatar>\n      )}\n      <Typography variant=\"body2\">{option.name}</Typography>\n    </Box>\n  );\n\n  if (compact) {\n    return (\n      <>\n        <IconButton onClick={handleOpen} size=\"small\">\n          {selectedOption ? (\n            selectedOption.avatar ? (\n              <Avatar src={selectedOption.avatar} sx={{ width: 32, height: 32 }} />\n            ) : (\n              <Avatar sx={{ width: 32, height: 32, bgcolor: theme.palette.primary.main }}>\n                {selectedOption.name.charAt(0)}\n              </Avatar>\n            )\n          ) : (\n            <Avatar sx={{ width: 32, height: 32, bgcolor: theme.palette.grey[400] }}>?</Avatar>\n          )}\n        </IconButton>\n        <Menu\n          anchorEl={anchorEl}\n          open={open}\n          onClose={handleClose}\n          PaperProps={{\n            sx: { width, maxHeight: 600, mt: 1 },\n          }}\n        >\n          {loading ? (\n            <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>\n              <CircularProgress size={24} />\n            </Box>\n          ) : (\n            <>\n              {options.length > 5 && (\n                <Box sx={{ p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }}>\n                  <TextField\n                    size=\"small\"\n                    fullWidth\n                    placeholder=\"Search...\"\n                    value={searchTerm}\n                    onChange={(e) => setSearchTerm(e.target.value)}\n                    InputProps={{\n                      startAdornment: (\n                        <InputAdornment position=\"start\">\n                          <SearchIcon fontSize=\"small\" />\n                        </InputAdornment>\n                      ),\n                    }}\n                  />\n                </Box>\n              )}\n              <List sx={{ maxHeight: 400, overflow: 'auto' }}>\n                {filteredOptions.map((option) => (\n                  <ListItemButton\n                    key={option.id}\n                    selected={option.id === selectedId}\n                    onClick={() => handleSelect(option.id)}\n                    disabled={option.disabled}\n                  >\n                    {option.avatar ? (\n                      <ListItemAvatar>\n                        <Avatar src={option.avatar} />\n                      </ListItemAvatar>\n                    ) : option.icon ? (\n                      <ListItemAvatar>{option.icon}</ListItemAvatar>\n                    ) : (\n                      <ListItemAvatar>\n                        <Avatar sx={{ bgcolor: theme.palette.primary.main }}>\n                          {option.name.charAt(0)}\n                        </Avatar>\n                      </ListItemAvatar>\n                    )}\n                    <ListItemText primary={option.name} secondary={option.description} />\n                  </ListItemButton>\n                ))}\n                {filteredOptions.length === 0 && (\n                  <Box sx={{ p: 2, textAlign: 'center' }}>\n                    <Typography variant=\"body2\" color=\"text.secondary\">\n                      {emptyMessage}\n                    </Typography>\n                  </Box>\n                )}\n              </List>\n              {onCreate && (\n                <Box sx={{ p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }}>\n                  <Button\n                    fullWidth\n                    startIcon={<AddIcon />}\n                    onClick={() => {\n                      onCreate();\n                      handleClose();\n                    }}\n                  >\n                    Create New\n                  </Button>\n                </Box>\n              )}\n            </>\n          )}\n        </Menu>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n        {selectedOption ? (\n          renderSelected ? (\n            <Link onClick={handleOpen} underline=\"hover\">\n              {renderSelected(selectedOption)}\n            </Link>\n          ) : (\n            <Link onClick={handleOpen} underline=\"hover\">\n              {defaultRenderSelected(selectedOption)}\n            </Link>\n          )\n        ) : (\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {placeholder}\n          </Typography>\n        )}\n        <IconButton onClick={handleOpen} size=\"small\" sx={{ p: 0.2, ml: 0.5 }}>\n          <KeyboardArrowDownIcon fontSize=\"small\" />\n        </IconButton>\n      </Box>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        PaperProps={{\n          sx: { width, maxHeight: 600, mt: 1 },\n        }}\n      >\n        {loading ? (\n          <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>\n            <CircularProgress size={24} />\n          </Box>\n        ) : (\n          <>\n            {options.length > 5 && (\n              <Box sx={{ p: 1, borderBottom: `1px solid ${theme.palette.grey[200]}` }}>\n                <TextField\n                  size=\"small\"\n                  fullWidth\n                  placeholder=\"Search...\"\n                  value={searchTerm}\n                  onChange={(e) => setSearchTerm(e.target.value)}\n                  InputProps={{\n                    startAdornment: (\n                      <InputAdornment position=\"start\">\n                        <SearchIcon fontSize=\"small\" />\n                      </InputAdornment>\n                    ),\n                  }}\n                />\n              </Box>\n            )}\n            <List sx={{ maxHeight: 400, overflow: 'auto' }}>\n              {filteredOptions.map((option) => (\n                <ListItemButton\n                  key={option.id}\n                  selected={option.id === selectedId}\n                  onClick={() => handleSelect(option.id)}\n                  disabled={option.disabled}\n                >\n                  {option.avatar ? (\n                    <ListItemAvatar>\n                      <Avatar src={option.avatar} />\n                    </ListItemAvatar>\n                  ) : option.icon ? (\n                    <ListItemAvatar>{option.icon}</ListItemAvatar>\n                  ) : (\n                    <ListItemAvatar>\n                      <Avatar sx={{ bgcolor: theme.palette.primary.main }}>\n                        {option.name.charAt(0)}\n                      </Avatar>\n                    </ListItemAvatar>\n                  )}\n                  <ListItemText primary={option.name} secondary={option.description} />\n                </ListItemButton>\n              ))}\n              {filteredOptions.length === 0 && (\n                <Box sx={{ p: 2, textAlign: 'center' }}>\n                  <Typography variant=\"body2\" color=\"text.secondary\">\n                    {emptyMessage}\n                  </Typography>\n                </Box>\n              )}\n            </List>\n            {onCreate && (\n              <Box sx={{ p: 1, borderTop: `1px solid ${theme.palette.grey[200]}` }}>\n                <Button\n                  fullWidth\n                  startIcon={<AddIcon />}\n                  onClick={() => {\n                    onCreate();\n                    handleClose();\n                  }}\n                >\n                  Create New\n                </Button>\n              </Box>\n            )}\n          </>\n        )}\n      </Menu>\n    </>\n  );\n};\n\n"]}

package/dist/chunk-FFZ5S7PQ.mjs

@@ -0,0 +1,146 @@
+import {
+  borderRadius,
+  deploymentSurfaceTokens
+} from "./chunk-ATIFLPH6.mjs";
+import {
+  motion,
+  webSurfaceTokens
+} from "./chunk-PWF2NJDB.mjs";
+
+// src/components/buttons/Button.tsx
+import React from "react";
+import MuiButton from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+var BUTTON_SPACING = {
+  borderRadius: "8px",
+  padding: "8px 16px",
+  iconMargin: "8px"
+};
+var BUTTON_TYPOGRAPHY = {
+  fontSize: "16px",
+  fontWeight: 500,
+  lineHeight: 1.5,
+  letterSpacing: "0.8px"
+};
+var StyledPrimaryButton = styled(MuiButton)(({ theme }) => ({
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  "&:hover": {
+    backgroundColor: theme.palette.primary.light
+  },
+  "&:active": {
+    backgroundColor: theme.palette.primary.dark
+  },
+  "&:disabled": {
+    backgroundColor: theme.palette.grey[300],
+    color: theme.palette.grey[500]
+  }
+}));
+var iconStyles = {
+  "& > *": {
+    fontSize: BUTTON_TYPOGRAPHY.fontSize
+  }
+};
+var StyledSecondaryButton = styled(MuiButton)(({ theme }) => ({
+  backgroundColor: deploymentSurfaceTokens.surfaceHigh,
+  color: deploymentSurfaceTokens.textPrimary,
+  border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
+  borderRadius: BUTTON_SPACING.borderRadius,
+  padding: BUTTON_SPACING.padding,
+  textTransform: "capitalize",
+  letterSpacing: BUTTON_TYPOGRAPHY.letterSpacing,
+  fontSize: BUTTON_TYPOGRAPHY.fontSize,
+  fontWeight: BUTTON_TYPOGRAPHY.fontWeight,
+  lineHeight: BUTTON_TYPOGRAPHY.lineHeight,
+  "&:hover": {
+    backgroundColor: theme.palette.background.selected,
+    borderColor: deploymentSurfaceTokens.strokeOutside
+  },
+  "&:active": {
+    backgroundColor: theme.palette.background.selected,
+    borderColor: deploymentSurfaceTokens.borderDefault
+  },
+  "&:disabled": {
+    borderColor: theme.palette.grey[300],
+    color: theme.palette.grey[500],
+    backgroundColor: theme.palette.grey[50]
+  },
+  "& .MuiButton-startIcon": {
+    marginRight: BUTTON_SPACING.iconMargin,
+    ...iconStyles
+  },
+  "& .MuiButton-endIcon": {
+    marginLeft: BUTTON_SPACING.iconMargin,
+    ...iconStyles
+  }
+}));
+var StyledTertiaryButton = styled(MuiButton)(({ theme }) => ({
+  backgroundColor: "transparent",
+  color: theme.palette.warning.main,
+  "&:hover": {
+    backgroundColor: "rgba(245, 158, 11, 0.1)"
+  },
+  "&:active": {
+    backgroundColor: "rgba(245, 158, 11, 0.2)"
+  },
+  "&:disabled": {
+    color: theme.palette.grey[500]
+  }
+}));
+var StyledOnGradientButton = styled(MuiButton)({
+  backgroundColor: "white",
+  color: webSurfaceTokens.robNearBlack2,
+  border: "none",
+  borderRadius: `${borderRadius.pill}px`,
+  padding: "10px 18px",
+  fontWeight: 500,
+  fontSize: "14px",
+  textTransform: "none",
+  letterSpacing: "0.2px",
+  transition: `transform ${motion.dur.fast} ${motion.ease.standard}`,
+  boxShadow: "none",
+  "&:hover": {
+    backgroundColor: "white",
+    transform: "translateX(2px)",
+    boxShadow: "none"
+  },
+  "&:focus-visible": {
+    outline: "none",
+    boxShadow: webSurfaceTokens.shadowFocus
+  },
+  "& .MuiButton-startIcon": {
+    marginRight: BUTTON_SPACING.iconMargin,
+    ...iconStyles
+  },
+  "& .MuiButton-endIcon": {
+    marginLeft: BUTTON_SPACING.iconMargin,
+    ...iconStyles
+  }
+});
+var BUTTON_COMPONENTS = {
+  primary: StyledPrimaryButton,
+  secondary: StyledSecondaryButton,
+  tertiary: StyledTertiaryButton
+};
+var Button = React.forwardRef(function Button2({
+  variant = "primary",
+  tone = "default",
+  children,
+  startIcon,
+  endIcon,
+  ...props
+}, ref) {
+  const ButtonComponent = tone === "onGradient" ? StyledOnGradientButton : BUTTON_COMPONENTS[variant];
+  const buttonProps = {
+    ...props,
+    startIcon,
+    endIcon
+  };
+  return /* @__PURE__ */ jsx(ButtonComponent, { ref, ...buttonProps, children });
+});
+
+export {
+  Button
+};
+//# sourceMappingURL=chunk-FFZ5S7PQ.mjs.map

package/dist/chunk-FFZ5S7PQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/buttons/Button.tsx"],"sourcesContent":["import React from 'react';\nimport MuiButton, { ButtonProps as MuiButtonProps } from '@mui/material/Button';\nimport { styled } from '@mui/material/styles';\nimport { deploymentSurfaceTokens, webSurfaceTokens, motion, borderRadius } from '../../theme';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary';\n\nexport type ButtonTone = 'default' | 'onGradient';\n\nexport interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'color'> {\n  /**\n   * The visual style variant of the button\n   * - primary: Filled button with primary color background\n   * - secondary: Outlined button with transparent background and border\n   * - tertiary: Text button with no background or border\n   */\n  variant?: ButtonVariant;\n  /**\n   * Tone overlay. When set, **replaces** the per-variant styling — `variant`\n   * is ignored. Today the only non-default tone is `onGradient`, which paints\n   * the button as a white pill on a dark gradient surface (banner CTA\n   * pattern). Use the default tone if you want `variant` to drive the look.\n   * @default 'default'\n   */\n  tone?: ButtonTone;\n  /**\n   * The size of the button\n   */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Icon element to display before the button text\n   */\n  startIcon?: React.ReactNode;\n  /**\n   * Icon element to display after the button text\n   */\n  endIcon?: React.ReactNode;\n}\n\n// Design system constants matching Figma specs\nconst BUTTON_SPACING = {\n  borderRadius: '8px',\n  padding: '8px 16px',\n  iconMargin: '8px',\n} as const;\n\nconst BUTTON_TYPOGRAPHY = {\n  fontSize: '16px',\n  fontWeight: 500,\n  lineHeight: 1.5,\n  letterSpacing: '0.8px',\n} as const;\n\nconst StyledPrimaryButton = styled(MuiButton)(({ theme }) => ({\n  backgroundColor: theme.palette.primary.main,\n  color: theme.palette.primary.contrastText,\n  '&:hover': {\n    backgroundColor: theme.palette.primary.light,\n  },\n  '&:active': {\n    backgroundColor: theme.palette.primary.dark,\n  },\n  '&:disabled': {\n    backgroundColor: theme.palette.grey[300],\n    color: theme.palette.grey[500],\n  },\n}));\n\nconst iconStyles = {\n  '& > *': {\n    fontSize: BUTTON_TYPOGRAPHY.fontSize,\n  },\n};\n\nconst StyledSecondaryButton = styled(MuiButton)(({ theme }) => ({\n  backgroundColor: deploymentSurfaceTokens.surfaceHigh,\n  color: deploymentSurfaceTokens.textPrimary,\n  border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,\n  borderRadius: BUTTON_SPACING.borderRadius,\n  padding: BUTTON_SPACING.padding,\n  textTransform: 'capitalize',\n  letterSpacing: BUTTON_TYPOGRAPHY.letterSpacing,\n  fontSize: BUTTON_TYPOGRAPHY.fontSize,\n  fontWeight: BUTTON_TYPOGRAPHY.fontWeight,\n  lineHeight: BUTTON_TYPOGRAPHY.lineHeight,\n  '&:hover': {\n    backgroundColor: theme.palette.background.selected,\n    borderColor: deploymentSurfaceTokens.strokeOutside,\n  },\n  '&:active': {\n    backgroundColor: theme.palette.background.selected,\n    borderColor: deploymentSurfaceTokens.borderDefault,\n  },\n  '&:disabled': {\n    borderColor: theme.palette.grey[300],\n    color: theme.palette.grey[500],\n    backgroundColor: theme.palette.grey[50],\n  },\n  '& .MuiButton-startIcon': {\n    marginRight: BUTTON_SPACING.iconMargin,\n    ...iconStyles,\n  },\n  '& .MuiButton-endIcon': {\n    marginLeft: BUTTON_SPACING.iconMargin,\n    ...iconStyles,\n  },\n}));\n\nconst StyledTertiaryButton = styled(MuiButton)(({ theme }) => ({\n  backgroundColor: 'transparent',\n  color: theme.palette.warning.main,\n  '&:hover': {\n    backgroundColor: 'rgba(245, 158, 11, 0.1)',\n  },\n  '&:active': {\n    backgroundColor: 'rgba(245, 158, 11, 0.2)',\n  },\n  '&:disabled': {\n    color: theme.palette.grey[500],\n  },\n}));\n\n/**\n * Tone overlay: white pill on a dark gradient surface (banner CTA).\n * Applied via a wrapper component that takes precedence over per-variant\n * background/border styles by ordering after the variant styles.\n */\nconst StyledOnGradientButton = styled(MuiButton)({\n  backgroundColor: 'white',\n  color: webSurfaceTokens.robNearBlack2,\n  border: 'none',\n  borderRadius: `${borderRadius.pill}px`,\n  padding: '10px 18px',\n  fontWeight: 500,\n  fontSize: '14px',\n  textTransform: 'none',\n  letterSpacing: '0.2px',\n  transition: `transform ${motion.dur.fast} ${motion.ease.standard}`,\n  boxShadow: 'none',\n  '&:hover': {\n    backgroundColor: 'white',\n    transform: 'translateX(2px)',\n    boxShadow: 'none',\n  },\n  '&:focus-visible': {\n    outline: 'none',\n    boxShadow: webSurfaceTokens.shadowFocus,\n  },\n  '& .MuiButton-startIcon': {\n    marginRight: BUTTON_SPACING.iconMargin,\n    ...iconStyles,\n  },\n  '& .MuiButton-endIcon': {\n    marginLeft: BUTTON_SPACING.iconMargin,\n    ...iconStyles,\n  },\n});\n\nconst BUTTON_COMPONENTS: Record<ButtonVariant, React.ComponentType<any>> = {\n  primary: StyledPrimaryButton,\n  secondary: StyledSecondaryButton,\n  tertiary: StyledTertiaryButton,\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'primary',\n    tone = 'default',\n    children,\n    startIcon,\n    endIcon,\n    ...props\n  },\n  ref,\n) {\n  const ButtonComponent =\n    tone === 'onGradient' ? StyledOnGradientButton : BUTTON_COMPONENTS[variant];\n  const buttonProps = {\n    ...props,\n    startIcon,\n    endIcon,\n  };\n\n  return (\n    <ButtonComponent ref={ref} {...buttonProps}>\n      {children}\n    </ButtonComponent>\n  );\n});\n"],"mappings":"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","names":["Button"]}