@cere/cere-design-system 0.0.45 → 0.2.0

package/dist/chunk-KKIKOIMP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-KKIKOIMP.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/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","React","Fragment","Typography","IconButton","ListItemIcon","ListItemText","StyledListItemButton","Tooltip","List","Button","useState","Menu","ListItemButton"],"mappings":"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","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-KKIKOIMP.js","sourcesContent":[null,"import Popover from '@mui/material/Popover';\nimport type { PopoverProps } from '@mui/material/Popover';\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 from '@mui/material/Stack';\nimport { styled } from '@mui/material/styles';\nimport { avatarClasses } from '@mui/material/Avatar';\nimport Typography from '@mui/material/Typography';\nimport Button from '@mui/material/Button';\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 Drawer from '@mui/material/Drawer';\nimport List from '@mui/material/List';\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\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 ListItemButton from '@mui/material/ListItemButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport { styled } from '@mui/material/styles';\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 from 'react';\nimport MuiStepper from '@mui/material/Stepper';\nimport type { StepperProps as MuiStepperProps } from '@mui/material/Stepper';\nimport MuiStep from '@mui/material/Step';\nimport type { StepProps as MuiStepProps } from '@mui/material/Step';\nimport MuiStepLabel from '@mui/material/StepLabel';\nimport type { StepLabelProps as MuiStepLabelProps } from '@mui/material/StepLabel';\nimport MuiStepContent from '@mui/material/StepContent';\nimport type { StepContentProps as MuiStepContentProps } from '@mui/material/StepContent';\nimport MuiStepButton from '@mui/material/StepButton';\nimport type { StepButtonProps as MuiStepButtonProps } from '@mui/material/StepButton';\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/Box';\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 from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport ButtonBase from '@mui/material/ButtonBase';\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 from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\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 ListItemButton from '@mui/material/ListItemButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Box from '@mui/material/Box';\nimport Tooltip from '@mui/material/Tooltip';\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  // Public ref typed `HTMLElement` because MuiListItemButton renders one of\n  // `<li>` (default), `<a>` (when `href` is set), or `<button>` (when\n  // `component=\"button\"`). Pinning to HTMLDivElement would have misled\n  // consumers about the runtime element.\n  React.forwardRef<HTMLElement, 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      // MUI's ListItemButton.ref is typed Ref<HTMLDivElement> by default, but\n      // the rendered element is <li> (or <a>/<button> when component/href is\n      // overridden). Our public ref union (HTMLElement) is honest about the\n      // runtime shape; this cast bridges to MUI's narrower static typing.\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 from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport Tooltip from '@mui/material/Tooltip';\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 from '@mui/material/Box';\nimport Avatar from '@mui/material/Avatar';\nimport Typography from '@mui/material/Typography';\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\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 MuiMenu from '@mui/material/Menu';\nimport type { MenuProps as MuiMenuProps } from '@mui/material/Menu';\nimport MuiMenuItem from '@mui/material/MenuItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Divider from '@mui/material/Divider';\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 Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport Avatar from '@mui/material/Avatar';\nimport Menu from '@mui/material/Menu';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport List from '@mui/material/List';\nimport ListItemButton from '@mui/material/ListItemButton';\nimport ListItemAvatar from '@mui/material/ListItemAvatar';\nimport ListItemText from '@mui/material/ListItemText';\nimport CircularProgress from '@mui/material/CircularProgress';\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-LVJSKRX3.js

@@ -0,0 +1,147 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+
+var _chunk72TQ56EPjs = require('./chunk-72TQ56EP.js');
+
+
+
+var _chunkXZZZ4MZVjs = require('./chunk-XZZZ4MZV.js');
+
+// src/components/buttons/Button.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _Button = require('@mui/material/Button'); var _Button2 = _interopRequireDefault(_Button);
+var _styles = require('@mui/material/styles');
+var _jsxruntime = require('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 = _styles.styled.call(void 0, (0, _Button2.default))(({ 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 = _styles.styled.call(void 0, (0, _Button2.default))(({ theme }) => ({
+  backgroundColor: _chunk72TQ56EPjs.deploymentSurfaceTokens.surfaceHigh,
+  color: _chunk72TQ56EPjs.deploymentSurfaceTokens.textPrimary,
+  border: `1px solid ${_chunk72TQ56EPjs.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: _chunk72TQ56EPjs.deploymentSurfaceTokens.strokeOutside
+  },
+  "&:active": {
+    backgroundColor: theme.palette.background.selected,
+    borderColor: _chunk72TQ56EPjs.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 = _styles.styled.call(void 0, (0, _Button2.default))(({ 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 = _styles.styled.call(void 0, (0, _Button2.default))({
+  backgroundColor: "white",
+  color: _chunkXZZZ4MZVjs.webSurfaceTokens.robNearBlack2,
+  border: "none",
+  borderRadius: `${_chunk72TQ56EPjs.borderRadius.pill}px`,
+  padding: "10px 18px",
+  fontWeight: 500,
+  fontSize: "14px",
+  textTransform: "none",
+  letterSpacing: "0.2px",
+  transition: `transform ${_chunkXZZZ4MZVjs.motion.dur.fast} ${_chunkXZZZ4MZVjs.motion.ease.standard}`,
+  boxShadow: "none",
+  "&:hover": {
+    backgroundColor: "white",
+    transform: "translateX(2px)",
+    boxShadow: "none"
+  },
+  "&:focus-visible": {
+    outline: "none",
+    boxShadow: _chunkXZZZ4MZVjs.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 = _react2.default.forwardRef(function Button2({
+  variant,
+  tone = "default",
+  children,
+  startIcon,
+  endIcon,
+  ...props
+}, ref) {
+  const resolvedVariant = tone === "onGradient" ? "primary" : _nullishCoalesce(variant, () => ( "primary"));
+  const ButtonComponent = tone === "onGradient" ? StyledOnGradientButton : BUTTON_COMPONENTS[resolvedVariant];
+  const buttonProps = {
+    ...props,
+    startIcon,
+    endIcon
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ButtonComponent, { ref, ...buttonProps, children });
+});
+
+
+
+exports.Button = Button;
+//# sourceMappingURL=chunk-LVJSKRX3.js.map

package/dist/chunk-LVJSKRX3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-LVJSKRX3.js","../src/components/buttons/Button.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-LVJSKRX3.js","sourcesContent":[null,"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\n/** Shared base: props valid for both tone shapes. */\ninterface ButtonBaseProps extends Omit<MuiButtonProps, 'variant' | 'color'> {\n  size?: 'small' | 'medium' | 'large';\n  startIcon?: React.ReactNode;\n  endIcon?: React.ReactNode;\n}\n\n/**\n * Default tone: `variant` controls the visual style.\n * @default tone 'default'\n */\nexport interface ButtonDefaultProps extends ButtonBaseProps {\n  tone?: 'default';\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\n/**\n * onGradient tone: white pill on a dark gradient surface (banner CTA).\n * `variant` must be omitted — it is not applicable when tone is 'onGradient'.\n */\nexport interface ButtonOnGradientProps extends ButtonBaseProps {\n  tone: 'onGradient';\n  /**\n   * Not applicable when tone='onGradient'. Omit this prop.\n   * @deprecated Passing variant with tone='onGradient' is a type error.\n   */\n  variant?: never;\n}\n\n/** ButtonProps is a discriminated union on `tone`. */\nexport type ButtonProps = ButtonDefaultProps | ButtonOnGradientProps;\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<MuiButtonProps>> = {\n  primary: StyledPrimaryButton,\n  secondary: StyledSecondaryButton,\n  tertiary: StyledTertiaryButton,\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant,\n    tone = 'default',\n    children,\n    startIcon,\n    endIcon,\n    ...props\n  },\n  ref,\n) {\n  const resolvedVariant: ButtonVariant = tone === 'onGradient' ? 'primary' : (variant ?? 'primary');\n  const ButtonComponent =\n    tone === 'onGradient' ? StyledOnGradientButton : BUTTON_COMPONENTS[resolvedVariant];\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"]}

package/dist/chunk-OWWDNDF4.js

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/components/buttons/IconButton.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
+var _styles = require('@mui/material/styles');
+var _jsxruntime = require('react/jsx-runtime');
+var StyledIconButton = _styles.styled.call(void 0, _IconButton2.default, {
+  shouldForwardProp: (prop) => prop !== "buttonVariant"
+})(({ theme, buttonVariant = "default" }) => {
+  const variants = {
+    primary: {
+      color: theme.palette.primary.main,
+      "&:hover": {
+        backgroundColor: theme.palette.background.selected
+      }
+    },
+    secondary: {
+      color: theme.palette.text.secondary,
+      "&:hover": {
+        backgroundColor: theme.palette.grey[50]
+      }
+    },
+    default: {
+      color: theme.palette.text.primary,
+      "&:hover": {
+        backgroundColor: theme.palette.grey[50]
+      }
+    }
+  };
+  return variants[buttonVariant] || variants.default;
+});
+var IconButton = _react2.default.forwardRef(
+  function IconButton2({ variant = "default", ...props }, ref) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledIconButton, { ref, buttonVariant: variant, ...props });
+  }
+);
+
+
+
+exports.IconButton = IconButton;
+//# sourceMappingURL=chunk-OWWDNDF4.js.map

package/dist/chunk-OWWDNDF4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-OWWDNDF4.js","../src/components/buttons/IconButton.tsx"],"names":["IconButton"],"mappings":"AAAA;ACAA,4EAAkB;AAClB,8GAAqE;AACrE,8CAAuB;AAkCZ,+CAAA;AA7BX,IAAM,iBAAA,EAAmB,4BAAA,oBAAO,EAAe;AAAA,EAC7C,iBAAA,EAAmB,CAAC,IAAA,EAAA,GAAS,KAAA,IAAS;AACxC,CAAC,CAAA,CAA8B,CAAC,EAAE,KAAA,EAAO,cAAA,EAAgB,UAAU,CAAA,EAAA,GAAM;AACvE,EAAA,MAAM,SAAA,EAAgC;AAAA,IACpC,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,OAAA,CAAQ,IAAA;AAAA,MAC7B,SAAA,EAAW;AAAA,QACT,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,UAAA,CAAW;AAAA,MAC5C;AAAA,IACF,CAAA;AAAA,IACA,SAAA,EAAW;AAAA,MACT,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,SAAA;AAAA,MAC1B,SAAA,EAAW;AAAA,QACT,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,EAAE;AAAA,MACxC;AAAA,IACF,CAAA;AAAA,IACA,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,MAC1B,SAAA,EAAW;AAAA,QACT,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,EAAE;AAAA,MACxC;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,OAAO,QAAA,CAAS,aAAa,EAAA,GAAK,QAAA,CAAS,OAAA;AAC7C,CAAC,CAAA;AAEM,IAAM,WAAA,EAAa,eAAA,CAAM,UAAA;AAAA,EAC9B,SAASA,WAAAA,CAAW,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAM,CAAA,EAAG,GAAA,EAAK;AAC1D,IAAA,uBAAO,6BAAA,gBAAC,EAAA,EAAiB,GAAA,EAAU,aAAA,EAAe,OAAA,EAAU,GAAG,MAAA,CAAO,CAAA;AAAA,EACxE;AACF,CAAA;ADHA;AACA;AACE;AACF,gCAAC","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-OWWDNDF4.js","sourcesContent":[null,"import React from 'react';\nimport MuiIconButton, { IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';\nimport { styled } from '@mui/material/styles';\nexport interface IconButtonProps extends MuiIconButtonProps {\n  variant?: 'default' | 'primary' | 'secondary';\n}\n\nconst StyledIconButton = styled(MuiIconButton, {\n  shouldForwardProp: (prop) => prop !== 'buttonVariant',\n})<{ buttonVariant?: string }>(({ theme, buttonVariant = 'default' }) => {\n  const variants: Record<string, any> = {\n    primary: {\n      color: theme.palette.primary.main,\n      '&:hover': {\n        backgroundColor: theme.palette.background.selected,\n      },\n    },\n    secondary: {\n      color: theme.palette.text.secondary,\n      '&:hover': {\n        backgroundColor: theme.palette.grey[50],\n      },\n    },\n    default: {\n      color: theme.palette.text.primary,\n      '&:hover': {\n        backgroundColor: theme.palette.grey[50],\n      },\n    },\n  };\n\n  return variants[buttonVariant] || variants.default;\n});\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton({ variant = 'default', ...props }, ref) {\n    return <StyledIconButton ref={ref} buttonVariant={variant} {...props} />;\n  },\n);\n\n"]}

package/dist/chunk-PFZZJZ64.js

@@ -0,0 +1,162 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunk72TQ56EPjs = require('./chunk-72TQ56EP.js');
+
+// src/components/feedback/RoleBadge.tsx
+var _Chip = require('@mui/material/Chip'); var _Chip2 = _interopRequireDefault(_Chip);
+var _styles = require('@mui/material/styles');
+var _jsxruntime = require('react/jsx-runtime');
+var StyledRoleBadge = _styles.styled.call(void 0, (0, _Chip2.default))(() => ({
+  // Pill shape - 100px border radius
+  borderRadius: "100px",
+  // Typography specifications from Figma
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "18px",
+  letterSpacing: "0.16px",
+  // Padding specifications from Figma
+  padding: "3px 4px",
+  height: "auto",
+  // Outlined style (no background fill)
+  "& .MuiChip-label": {
+    padding: "0 8px"
+  }
+}));
+var RoleBadge = ({
+  label,
+  color = "primary",
+  size = "small",
+  ...props
+}) => {
+  if (!label || label.trim() === "") {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledRoleBadge,
+    {
+      label,
+      variant: "outlined",
+      color,
+      size,
+      ...props
+    }
+  );
+};
+
+// src/components/feedback/IDBlock.tsx
+var _react = require('react');
+var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
+var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
+var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
+var _Snackbar = require('@mui/material/Snackbar'); var _Snackbar2 = _interopRequireDefault(_Snackbar);
+var _Alert = require('@mui/material/Alert'); var _Alert2 = _interopRequireDefault(_Alert);
+var _ContentCopy = require('@mui/icons-material/ContentCopy'); var _ContentCopy2 = _interopRequireDefault(_ContentCopy);
+
+
+var IDContainer = _styles.styled.call(void 0, (0, _Box2.default))(() => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "4px",
+  padding: "8px 16px",
+  backgroundColor: _chunk72TQ56EPjs.deploymentSurfaceTokens.surfaceHigh,
+  border: `1px solid ${_chunk72TQ56EPjs.deploymentSurfaceTokens.strokeOutside}`,
+  borderRadius: "8px"
+}));
+var IDBlock = ({
+  id,
+  label = "ID",
+  entityType = "entity",
+  onCopy
+}) => {
+  const [snackbar, setSnackbar] = _react.useState.call(void 0, {
+    open: false,
+    message: "",
+    severity: "success"
+  });
+  if (!id || id.trim() === "") {
+    return null;
+  }
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(id);
+      setSnackbar({ open: true, message: "ID copied to clipboard", severity: "success" });
+      _optionalChain([onCopy, 'optionalCall', _ => _()]);
+    } catch (e) {
+      setSnackbar({ open: true, message: "Failed to copy ID", severity: "error" });
+    }
+  };
+  const handleSnackbarClose = () => {
+    setSnackbar((prev) => ({ ...prev, open: false }));
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, IDContainer, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _Typography2.default,
+        {
+          variant: "body2",
+          sx: {
+            fontSize: "13px",
+            fontWeight: 500,
+            color: _chunk72TQ56EPjs.deploymentSurfaceTokens.textSecondary
+          },
+          children: [
+            label,
+            ":"
+          ]
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _Typography2.default,
+        {
+          variant: "body2",
+          sx: {
+            fontSize: "13px",
+            fontWeight: 500,
+            color: _chunk72TQ56EPjs.deploymentSurfaceTokens.textPrimary,
+            userSelect: "all"
+          },
+          children: id
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _IconButton2.default,
+        {
+          onClick: handleCopy,
+          size: "small",
+          "aria-label": `Copy ${entityType} ID ${id}`,
+          sx: {
+            padding: "4px",
+            "&:hover": {
+              backgroundColor: _chunk72TQ56EPjs.deploymentSurfaceTokens.hoverOverlay
+            }
+          },
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _ContentCopy2.default,
+            {
+              sx: {
+                fontSize: "16px",
+                color: _chunk72TQ56EPjs.deploymentSurfaceTokens.textSecondary
+              }
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Snackbar2.default,
+      {
+        open: snackbar.open,
+        autoHideDuration: 3e3,
+        onClose: handleSnackbarClose,
+        anchorOrigin: { vertical: "top", horizontal: "center" },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Alert2.default, { onClose: handleSnackbarClose, severity: snackbar.severity, children: snackbar.message })
+      }
+    )
+  ] });
+};
+
+
+
+
+exports.RoleBadge = RoleBadge; exports.IDBlock = IDBlock;
+//# sourceMappingURL=chunk-PFZZJZ64.js.map

package/dist/chunk-PFZZJZ64.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-PFZZJZ64.js","../src/components/feedback/RoleBadge.tsx","../src/components/feedback/IDBlock.tsx"],"names":["styled","jsx"],"mappings":"AAAA;AACE;AACF,sDAA4B;AAC5B;AACA;ACHA,sFAAmD;AACnD,8CAAuB;AAqFnB,+CAAA;AAjDJ,IAAM,gBAAA,EAAkB,4BAAA,mBAAc,CAAA,CAAgB,CAAA,EAAA,GAAA,CAAO;AAAA;AAAA,EAE3D,YAAA,EAAc,OAAA;AAAA;AAAA,EAEd,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,GAAA;AAAA,EACZ,UAAA,EAAY,MAAA;AAAA,EACZ,aAAA,EAAe,QAAA;AAAA;AAAA,EAEf,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,MAAA;AAAA;AAAA,EAER,kBAAA,EAAoB;AAAA,IAClB,OAAA,EAAS;AAAA,EACX;AACF,CAAA,CAAE,CAAA;AAuBK,IAAM,UAAA,EAAsC,CAAC;AAAA,EAClD,KAAA;AAAA,EACA,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,OAAA;AAAA,EACP,GAAG;AACL,CAAA,EAAA,GAAM;AACJ,EAAA,GAAA,CAAI,CAAC,MAAA,GAAS,KAAA,CAAM,IAAA,CAAK,EAAA,IAAM,EAAA,EAAI;AACjC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,6BAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,KAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN,CAAA;AAEJ,CAAA;ADnDA;AACA;AE7CA,8BAAgC;AAChC,kFAAgB;AAChB,8GAAuB;AACvB,8GAAuB;AACvB,sGAAqB;AACrB,0FAAkB;AAClB,wHAA4B;AAC5B;AAkGI;AAlEJ,IAAM,YAAA,EAAcA,4BAAAA,kBAAU,CAAA,CAAE,CAAA,EAAA,GAAA,CAAO;AAAA,EACrC,OAAA,EAAS,aAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,KAAA;AAAA,EACL,OAAA,EAAS,UAAA;AAAA,EACT,eAAA,EAAiB,wCAAA,CAAwB,WAAA;AAAA,EACzC,MAAA,EAAQ,CAAA,UAAA,EAAa,wCAAA,CAAwB,aAAa,CAAA,CAAA;AAC5C,EAAA;AACd;AA2B8C;AAC9C,EAAA;AACQ,EAAA;AACK,EAAA;AACb,EAAA;AACI;AAC+F,EAAA;AAC3F,IAAA;AACG,IAAA;AACC,IAAA;AACX,EAAA;AAE4B,EAAA;AACpB,IAAA;AACT,EAAA;AAE+B,EAAA;AACzB,IAAA;AACoC,MAAA;AACH,MAAA;AAC1B,sBAAA;AACH,IAAA;AAC6B,MAAA;AACrC,IAAA;AACF,EAAA;AAEkC,EAAA;AACgB,IAAA;AAClD,EAAA;AAII,EAAA;AACE,oBAAA;AAAA,sBAAA;AAAC,QAAA;AAAA,QAAA;AACS,UAAA;AACJ,UAAA;AACQ,YAAA;AACE,YAAA;AACmB,YAAA;AACjC,UAAA;AAEC,UAAA;AAAA,YAAA;AAAM,YAAA;AAAA,UAAA;AAAA,QAAA;AACT,MAAA;AACAC,sBAAAA;AAAC,QAAA;AAAA,QAAA;AACS,UAAA;AACJ,UAAA;AACQ,YAAA;AACE,YAAA;AACmB,YAAA;AACnB,YAAA;AACd,UAAA;AAEC,UAAA;AAAA,QAAA;AACH,MAAA;AACAA,sBAAAA;AAAC,QAAA;AAAA,QAAA;AACU,UAAA;AACJ,UAAA;AACkC,UAAA;AACnC,UAAA;AACO,YAAA;AACE,YAAA;AACgC,cAAA;AAC3C,YAAA;AACF,UAAA;AAEAA,UAAAA;AAAC,YAAA;AAAA,YAAA;AACK,cAAA;AACQ,gBAAA;AACqB,gBAAA;AACjC,cAAA;AAAA,YAAA;AACF,UAAA;AAAA,QAAA;AACF,MAAA;AACF,IAAA;AACAA,oBAAAA;AAAC,MAAA;AAAA,MAAA;AACgB,QAAA;AACG,QAAA;AACT,QAAA;AACoC,QAAA;AAE7B,QAAA;AAEhB,MAAA;AACF,IAAA;AACF,EAAA;AAEJ;AFH6D;AACA;AACA;AACA;AACA","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-PFZZJZ64.js","sourcesContent":[null,"import React from 'react';\nimport MuiChip, { ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\n\n/**\n * Color variants for the RoleBadge component\n */\nexport type RoleBadgeColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning';\n\n/**\n * Size variants for the RoleBadge component\n */\nexport type RoleBadgeSize = 'small' | 'medium';\n\n/**\n * RoleBadge component props\n */\nexport interface RoleBadgeProps extends Omit<MuiChipProps, 'label' | 'variant' | 'color' | 'size'> {\n  /**\n   * The text content to display in the badge\n   */\n  label: string;\n  /**\n   * The color theme of the badge\n   * @default 'primary'\n   */\n  color?: RoleBadgeColor;\n  /**\n   * The size of the badge\n   * @default 'small'\n   */\n  size?: RoleBadgeSize;\n}\n\n/**\n * Styled MUI Chip with pill shape and outlined style\n * Matches Figma node 17-3595 specifications\n */\nconst StyledRoleBadge = styled(MuiChip)<MuiChipProps>(() => ({\n  // Pill shape - 100px border radius\n  borderRadius: '100px',\n  // Typography specifications from Figma\n  fontSize: '13px',\n  fontWeight: 400,\n  lineHeight: '18px',\n  letterSpacing: '0.16px',\n  // Padding specifications from Figma\n  padding: '3px 4px',\n  height: 'auto',\n  // Outlined style (no background fill)\n  '& .MuiChip-label': {\n    padding: '0 8px',\n  },\n}));\n\n/**\n * RoleBadge - Pill-shaped badge component for displaying roles or status labels\n *\n * A reusable badge component that extends MUI Chip with a pill-shaped outline style.\n * Designed for displaying user roles, status indicators, or categorization labels.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <RoleBadge label=\"Manager\" />\n *\n * // With color variants\n * <RoleBadge label=\"Admin\" color=\"error\" />\n * <RoleBadge label=\"Active\" color=\"success\" />\n *\n * // With size variants\n * <RoleBadge label=\"Owner\" size=\"medium\" />\n * ```\n *\n * @see Figma node 17-3595 for design specifications\n */\nexport const RoleBadge: React.FC<RoleBadgeProps> = ({\n  label,\n  color = 'primary',\n  size = 'small',\n  ...props\n}) => {\n  if (!label || label.trim() === '') {\n    return null;\n  }\n\n  return (\n    <StyledRoleBadge\n      label={label}\n      variant=\"outlined\"\n      color={color}\n      size={size}\n      {...props}\n    />\n  );\n};\n","import React, { useState } from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport IconButton from '@mui/material/IconButton';\nimport Snackbar from '@mui/material/Snackbar';\nimport Alert from '@mui/material/Alert';\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\nimport { styled } from '@mui/material/styles';\nimport type { AlertColor } from '@mui/material/Alert';\nimport { deploymentSurfaceTokens } from '../../theme';\n\n/**\n * IDBlock component props\n */\nexport interface IDBlockProps {\n  /**\n   * The identifier value to display and copy\n   */\n  id: string;\n  /**\n   * Label prefix text\n   * @default 'ID'\n   */\n  label?: string;\n  /**\n   * Entity type for accessibility (used in aria-label)\n   * @default 'entity'\n   */\n  entityType?: string;\n  /**\n   * Additional callback to execute after successful copy\n   */\n  onCopy?: () => void;\n}\n\n/**\n * Styled container for the ID block\n * Matches Figma node 17-3596 specifications\n */\nconst IDContainer = styled(Box)(() => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '4px',\n  padding: '8px 16px',\n  backgroundColor: deploymentSurfaceTokens.surfaceHigh,\n  border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,\n  borderRadius: '8px',\n}));\n\n/**\n * IDBlock - Read-only identifier display with integrated copy-to-clipboard button\n *\n * A component that displays an identifier (ID, account number, etc.) with a copy button.\n * Provides user feedback via an inline Snackbar when copy succeeds or fails.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <IDBlock id=\"W1234567890\" />\n *\n * // With custom label\n * <IDBlock id=\"ACC-9876543\" label=\"Account ID\" entityType=\"account\" />\n *\n * // With callback\n * <IDBlock\n *   id=\"DEPLOY-12345\"\n *   label=\"Deployment ID\"\n *   entityType=\"deployment\"\n *   onCopy={() => console.log('ID copied')}\n * />\n * ```\n *\n * @see Figma node 17-3596 for design specifications\n */\nexport const IDBlock: React.FC<IDBlockProps> = ({\n  id,\n  label = 'ID',\n  entityType = 'entity',\n  onCopy,\n}) => {\n  const [snackbar, setSnackbar] = useState<{ open: boolean; message: string; severity: AlertColor }>({\n    open: false,\n    message: '',\n    severity: 'success',\n  });\n\n  if (!id || id.trim() === '') {\n    return null;\n  }\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(id);\n      setSnackbar({ open: true, message: 'ID copied to clipboard', severity: 'success' });\n      onCopy?.();\n    } catch {\n      setSnackbar({ open: true, message: 'Failed to copy ID', severity: 'error' });\n    }\n  };\n\n  const handleSnackbarClose = () => {\n    setSnackbar((prev) => ({ ...prev, open: false }));\n  };\n\n  return (\n    <>\n      <IDContainer>\n        <Typography\n          variant=\"body2\"\n          sx={{\n            fontSize: '13px',\n            fontWeight: 500,\n            color: deploymentSurfaceTokens.textSecondary,\n          }}\n        >\n          {label}:\n        </Typography>\n        <Typography\n          variant=\"body2\"\n          sx={{\n            fontSize: '13px',\n            fontWeight: 500,\n            color: deploymentSurfaceTokens.textPrimary,\n            userSelect: 'all',\n          }}\n        >\n          {id}\n        </Typography>\n        <IconButton\n          onClick={handleCopy}\n          size=\"small\"\n          aria-label={`Copy ${entityType} ID ${id}`}\n          sx={{\n            padding: '4px',\n            '&:hover': {\n              backgroundColor: deploymentSurfaceTokens.hoverOverlay,\n            },\n          }}\n        >\n          <ContentCopyIcon\n            sx={{\n              fontSize: '16px',\n              color: deploymentSurfaceTokens.textSecondary,\n            }}\n          />\n        </IconButton>\n      </IDContainer>\n      <Snackbar\n        open={snackbar.open}\n        autoHideDuration={3000}\n        onClose={handleSnackbarClose}\n        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}\n      >\n        <Alert onClose={handleSnackbarClose} severity={snackbar.severity}>\n          {snackbar.message}\n        </Alert>\n      </Snackbar>\n    </>\n  );\n};\n"]}

package/dist/chunk-PHMNZK2R.mjs

@@ -0,0 +1,18 @@
+// src/components/layout/Link.tsx
+import MuiLink from "@mui/material/Link";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+var StyledLink = styled(MuiLink)(({ theme }) => ({
+  color: theme.palette.primary.main,
+  "&:hover": {
+    color: theme.palette.primary.light
+  }
+}));
+var Link = ({ underline = "hover", ...props }) => {
+  return /* @__PURE__ */ jsx(StyledLink, { underline, ...props });
+};
+
+export {
+  Link
+};
+//# sourceMappingURL=chunk-PHMNZK2R.mjs.map

package/dist/chunk-PHMNZK2R.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Link.tsx"],"sourcesContent":["import React from 'react';\nimport MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';\nimport { styled } from '@mui/material/styles';\nexport interface LinkProps extends MuiLinkProps {\n  underline?: 'none' | 'hover' | 'always';\n}\n\nconst StyledLink = styled(MuiLink)(({ theme }) => ({\n  color: theme.palette.primary.main,\n  '&:hover': {\n    color: theme.palette.primary.light,\n  },\n}));\n\nexport const Link: React.FC<LinkProps> = ({ underline = 'hover', ...props }) => {\n  return <StyledLink underline={underline} {...props} />;\n};\n\n"],"mappings":";AACA,OAAO,aAA4C;AACnD,SAAS,cAAc;AAad;AART,IAAM,aAAa,OAAO,OAAO,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACjD,OAAO,MAAM,QAAQ,QAAQ;AAAA,EAC7B,WAAW;AAAA,IACT,OAAO,MAAM,QAAQ,QAAQ;AAAA,EAC/B;AACF,EAAE;AAEK,IAAM,OAA4B,CAAC,EAAE,YAAY,SAAS,GAAG,MAAM,MAAM;AAC9E,SAAO,oBAAC,cAAW,WAAuB,GAAG,OAAO;AACtD;","names":[]}