@12-apps/ui 6.37.0 → 6.39.0

package/dist/chunk-L5RQIQIP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItemButton from '@mui/material/ListItemButton/index.js';\nimport { alpha, keyframes, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport type { CSSProperties, PropsWithChildren, ReactNode } from 'react';\nimport React from 'react';\n\nimport { slideIn } from './NavigationMenu.styles';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst megaMenuSlide = (theme: Theme) => keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(${rem(theme, 20)});\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\n// These styled() components stay module-local: their inferred types cannot be\n// named across a module boundary here (TS2742). The plain components exported\n// below are what the layouts import.\nconst NavigationContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'collapsed', 'minimal'].includes(prop as string),\n})<{ variant?: string; collapsed?: boolean; minimal?: boolean }>(({ theme, variant, collapsed, minimal }) => ({\n  display: 'flex',\n  position: 'relative',\n  animation: `${slideIn(theme)} 0.4s ease-out`,\n  ...(variant === 'horizontal' && {\n    flexDirection: 'row',\n    alignItems: 'center',\n    width: '100%',\n    ...(!minimal && {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.95)} 0%, ${alpha(theme.palette.background.paper, 0.98)} 100%)`,\n      backdropFilter: `blur(${rem(theme, 10)})`,\n      borderRadius: theme.spacing(2),\n      boxShadow: `0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.08)}`,\n    }),\n  }),\n  ...(variant === 'vertical' && {\n    flexDirection: 'column',\n    width: rem(theme, collapsed ? 80 : 280),\n    transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',\n    height: '100%',\n    ...(!minimal && {\n      background: `linear-gradient(180deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n      backdropFilter: `blur(${rem(theme, 12)})`,\n      borderRadius: theme.spacing(2),\n      boxShadow: `0 ${rems(theme, 12, 40)} ${shadowInk(theme, 0.1)}`,\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        height: rem(theme, 200),\n        background: `radial-gradient(ellipse at top, ${alpha(theme.palette.primary.main, 0.05)} 0%, transparent 70%)`,\n        pointerEvents: 'none',\n      },\n    }),\n  }),\n  ...(variant === 'mega' && {\n    flexDirection: 'column',\n    width: '100%',\n    ...(!minimal && {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.default, 0.95)} 100%)`,\n      backdropFilter: `blur(${rem(theme, 15)})`,\n      borderRadius: theme.spacing(3),\n      overflow: 'hidden',\n      boxShadow: `0 ${rems(theme, 20, 60)} ${shadowInk(theme, 0.12)}`,\n    }),\n  }),\n}));\n\nconst StyledList = styled(List, {\n  shouldForwardProp: (prop) => !['variant', 'size'].includes(prop as string),\n})<{ variant?: string; size?: string }>(({ theme, variant }) => ({\n  padding: 0,\n  width: '100%',\n  ...(variant === 'horizontal' && {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n  }),\n  ...(variant === 'mega' && {\n    display: 'grid',\n    gridTemplateColumns: `repeat(auto-fit, minmax(${rem(theme, 250)}, 1fr))`,\n    gap: theme.spacing(2),\n    padding: theme.spacing(2),\n  }),\n}));\n\nconst LogoContainer = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(2.5),\n  marginBottom: theme.spacing(2),\n  position: 'relative',\n  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.08)} 0%, ${alpha(theme.palette.primary.dark, 0.04)} 100%)`,\n  borderBottom: `${rem(theme, 2)} solid ${alpha(theme.palette.primary.main, 0.2)}`,\n  overflow: 'hidden',\n\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '-50%',\n    right: '-50%',\n    width: '200%',\n    height: '200%',\n    background: `radial-gradient(circle, ${alpha(theme.palette.primary.light, 0.1)} 0%, transparent 70%)`,\n    animation: `${slideIn(theme)} 1s ease-out`,\n  },\n\n  '& > *': {\n    position: 'relative',\n    zIndex: 1,\n  },\n}));\n\nconst CollapseButton = styled(ListItemButton)(({ theme }) => ({\n  borderRadius: theme.spacing(1.5),\n  margin: theme.spacing(1),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.08)} 0%, ${alpha(theme.palette.primary.dark, 0.04)} 100%)`,\n  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.primary.main, 0.12),\n    transform: 'scale(1.05)',\n    boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(theme.palette.primary.main, 0.2)}`,\n\n    '& .MuiListItemIcon-root': {\n      transform: 'rotate(180deg)',\n      transition: 'transform 0.3s ease',\n    },\n  },\n\n  '&:active': {\n    transform: 'scale(0.98)',\n  },\n}));\n\nconst MegaMenuSection = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(3),\n  borderRadius: theme.spacing(2),\n  background: `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(theme.palette.background.default, 0.9)} 100%)`,\n  boxShadow: `0 ${rems(theme, 10, 30)} ${shadowInk(theme, 0.08)}`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.08)}`,\n  position: 'relative',\n  overflow: 'hidden',\n  animation: `${megaMenuSlide(theme)} 0.5s ease-out`,\n  animationFillMode: 'both',\n\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    height: rem(theme, 3),\n    background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 50%, ${theme.palette.primary.main} 100%)`,\n    backgroundSize: '200% 100%',\n    animation: 'shimmer 3s ease-in-out infinite',\n  },\n\n  '@keyframes shimmer': {\n    '0%': {\n      backgroundPosition: '200% 0',\n    },\n    '100%': {\n      backgroundPosition: '-200% 0',\n    },\n  },\n\n  '&:hover': {\n    transform: `translateY(${rem(theme, -4)})`,\n    boxShadow: `0 ${rems(theme, 15, 40)} ${shadowInk(theme, 0.12)}`,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n  },\n\n  '&:nth-of-type(1)': { animationDelay: '0.1s' },\n  '&:nth-of-type(2)': { animationDelay: '0.2s' },\n  '&:nth-of-type(3)': { animationDelay: '0.3s' },\n  '&:nth-of-type(4)': { animationDelay: '0.4s' },\n}));\n\nexport interface NavigationShellProps extends PropsWithChildren {\n  variant?: string;\n  collapsed?: boolean;\n  minimal?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const NavigationShell = React.forwardRef<HTMLDivElement, NavigationShellProps>(\n  ({ children, ...props }, ref) => (\n    <NavigationContainer ref={ref} {...props}>\n      {children}\n    </NavigationContainer>\n  ),\n);\n\nNavigationShell.displayName = 'NavigationShell';\n\nexport const LogoBar: React.FC<PropsWithChildren> = ({ children }) => (\n  <LogoContainer>{children}</LogoContainer>\n);\n\nexport const MenuList: React.FC<PropsWithChildren<{ variant?: string; size?: string }>> = ({\n  children,\n  ...props\n}) => <StyledList {...props}>{children}</StyledList>;\n\nexport const CollapseToggle: React.FC<PropsWithChildren<{ onClick: () => void }>> = ({\n  children,\n  onClick,\n}) => <CollapseButton onClick={onClick}>{children}</CollapseButton>;\n\nexport const MegaSection: React.FC<{ children: ReactNode }> = ({ children }) => (\n  <MegaMenuSection>{children}</MegaMenuSection>\n);\n"],"mappings":"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","names":[]}

package/dist/{chunk-CQPFSEJB.js → chunk-L7NQCLFU.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -80,4 +80,4 @@ function DataViewsEmpty({
 export {
   DataViewsEmpty
 };
-//# sourceMappingURL=chunk-CQPFSEJB.js.map
+//# sourceMappingURL=chunk-L7NQCLFU.js.map

package/dist/{chunk-DVAAUWTC.js → chunk-LCHCE2G5.js}

@@ -1,6 +1,6 @@
 import {
   MapPreview
-} from "./chunk-XJPJ6ESI.js";
+} from "./chunk-4OAKGKK5.js";
 
 // src/components/data-display/FleetMap/FleetCanvas.tsx
 import Box from "@mui/material/Box/index.js";
@@ -38,4 +38,4 @@ function FleetCanvas({
 export {
   FleetCanvas
 };
-//# sourceMappingURL=chunk-DVAAUWTC.js.map
+//# sourceMappingURL=chunk-LCHCE2G5.js.map

package/dist/{chunk-G4HBNILE.js → chunk-LEHMWJNZ.js}

@@ -5,11 +5,11 @@ import {
 } from "./chunk-EARWC6PD.js";
 import {
   useDataGridModel
-} from "./chunk-DLJGBJZW.js";
+} from "./chunk-DGMDQHMI.js";
 import {
   GridBody,
   GridHeader
-} from "./chunk-HTZNB6IV.js";
+} from "./chunk-H5ZTIELC.js";
 
 // src/components/data-display/DataGrid/DataGrid.tsx
 import Paper from "@mui/material/Paper/index.js";
@@ -117,4 +117,4 @@ export {
   DataGrid,
   GRID_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-G4HBNILE.js.map
+//# sourceMappingURL=chunk-LEHMWJNZ.js.map

package/dist/{chunk-OATHOXIU.js → chunk-MC4KYGSX.js}

@@ -18,7 +18,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var indicatorVariantStyles = (theme, variant, { backgroundColor, borderColor, textColor }) => {
   if (variant === "outlined") {
     return {
-      border: `2px solid ${borderColor}`,
+      border: `${rem(theme, 2)} solid ${borderColor}`,
       backgroundColor: theme.palette.background.paper
     };
   }
@@ -57,8 +57,8 @@ var StepIndicator = styled(Box, {
     variant
   });
   return {
-    width: indicatorSize,
-    height: indicatorSize,
+    width: rem(theme, indicatorSize),
+    height: rem(theme, indicatorSize),
     borderRadius: "50%",
     display: "flex",
     alignItems: "center",
@@ -78,8 +78,8 @@ var StepIndicator = styled(Box, {
         boxShadow: theme.shadows[2]
       },
       "&:focus-visible": {
-        outline: `2px solid ${palette.main}`,
-        outlineOffset: "2px"
+        outline: `${rem(theme, 2)} solid ${palette.main}`,
+        outlineOffset: rem(theme, 2)
       }
     },
     // Disabled state
@@ -133,13 +133,13 @@ var StepConnector = styled(Box, {
     flex: 1,
     position: "relative",
     ...orientation === "horizontal" && {
-      height: "2px",
+      height: rem(theme, 2),
       backgroundColor: connectorColor,
       margin: `0 ${theme.spacing(1)}`,
       minWidth: theme.spacing(2)
     },
     ...orientation === "vertical" && {
-      width: "2px",
+      width: rem(theme, 2),
       backgroundColor: connectorColor,
       minHeight: theme.spacing(3),
       marginLeft: theme.spacing(2),
@@ -296,4 +296,4 @@ export {
   StepContentComponent,
   StepItemRow
 };
-//# sourceMappingURL=chunk-OATHOXIU.js.map
+//# sourceMappingURL=chunk-MC4KYGSX.js.map

package/dist/chunk-MC4KYGSX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/WorkflowStep/WorkflowStep.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { forwardRef, useCallback } from 'react';\n\nimport type { StepColors } from './WorkflowStep.helpers';\nimport { indicatorSizeFor, stepColors, stepPalette } from './WorkflowStep.helpers';\nimport type {\n  StepConnectorProps,\n  StepContentProps,\n  StepIndicatorProps,\n  WorkflowStepProps,\n} from './WorkflowStep.types';\nimport { neutralTones } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\n// `outlined` shows the surface through a coloured rim; the other three fill it and\n// differ only in what border they keep.\nconst indicatorVariantStyles = (\n  theme: Theme,\n  variant: WorkflowStepProps['variant'],\n  { backgroundColor, borderColor, textColor }: StepColors,\n): CSSObject => {\n  if (variant === 'outlined') {\n    return {\n      border: `${rem(theme, 2)} solid ${borderColor}`,\n      backgroundColor: theme.palette.background.paper,\n    };\n  }\n\n  const filled = { backgroundColor, color: textColor };\n\n  switch (variant) {\n    case 'filled':\n      return filled;\n    case 'minimal':\n      return { ...filled, border: 'none' };\n    case 'default':\n      return { ...filled, border: `1px solid ${borderColor}` };\n    default:\n      return {};\n  }\n};\n\nconst StepItem = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'isLast'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  isLast: boolean;\n}>(({ orientation, isLast }) => ({\n  display: 'flex',\n  flexDirection: orientation === 'vertical' ? 'column' : 'row',\n  alignItems: orientation === 'vertical' ? 'flex-start' : 'center',\n  flex: orientation === 'horizontal' && !isLast ? 1 : 'none',\n  position: 'relative',\n  minWidth: 0, // Allow content to shrink\n}));\n\nconst StepIndicator = styled(Box, {\n  shouldForwardProp: (prop) => !['size', 'variant', 'color', 'isActive', 'isCompleted', 'isError', 'interactive', 'disabled'].includes(prop as string),\n})<{\n  size: WorkflowStepProps['size'];\n  variant: WorkflowStepProps['variant'];\n  color: WorkflowStepProps['color'];\n  isActive: boolean;\n  isCompleted: boolean;\n  isError: boolean;\n  interactive: boolean;\n  animated: boolean;\n  disabled: boolean;\n}>(({ theme, size, variant, color, isActive, isCompleted, isError, interactive, animated, disabled }) => {\n  const indicatorSize = indicatorSizeFor(size);\n  const palette = stepPalette(theme, color);\n  const { backgroundColor, borderColor, textColor } = stepColors(theme, palette, {\n    isActive,\n    isCompleted,\n    isError,\n    variant,\n  });\n\n  return {\n    width: rem(theme, indicatorSize),\n    height: rem(theme, indicatorSize),\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: rem(theme, 12),\n    fontWeight: theme.typography.fontWeightMedium,\n    cursor: interactive && !disabled ? 'pointer' : 'default',\n    transition: animated\n      ? theme.transitions.create(['background-color', 'border-color', 'transform'], {\n          duration: theme.transitions.duration.short,\n        })\n      : 'none',\n    flexShrink: 0,\n\n    ...indicatorVariantStyles(theme, variant, { backgroundColor, borderColor, textColor }),\n\n    // Interactive states\n    ...(interactive && !disabled && {\n      '&:hover': {\n        transform: 'scale(1.1)',\n        boxShadow: theme.shadows[2],\n      },\n      '&:focus-visible': {\n        outline: `${rem(theme, 2)} solid ${palette.main}`,\n        outlineOffset: rem(theme, 2),\n      },\n    }),\n\n    // Disabled state\n    ...(disabled && {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    }),\n  };\n});\n\nconst StepContent = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'interactive', 'disabled'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  interactive: boolean;\n  disabled: boolean;\n}>(({ theme, orientation, interactive, disabled }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: orientation === 'vertical' ? 'flex-start' : 'center',\n  textAlign: orientation === 'vertical' ? 'left' : 'center',\n  marginTop: orientation === 'vertical' ? theme.spacing(1) : theme.spacing(0.5),\n  marginLeft: orientation === 'horizontal' ? theme.spacing(1) : 0,\n  cursor: interactive && !disabled ? 'pointer' : 'default',\n  minWidth: 0,\n  flex: 1,\n\n  '& .step-title': {\n    fontSize: rem(theme, 14),\n    fontWeight: theme.typography.fontWeightMedium,\n    color: theme.palette.text.primary,\n    marginBottom: theme.spacing(0.5),\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  },\n\n  '& .step-description': {\n    fontSize: rem(theme, 12),\n    color: theme.palette.text.secondary,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  },\n\n  ...(disabled && {\n    opacity: 0.5,\n  }),\n}));\n\nconst StepConnector = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'isCompleted', 'color', 'variant'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  isCompleted: boolean;\n  color: WorkflowStepProps['color'];\n  variant: WorkflowStepProps['variant'];\n}>(({ theme, orientation, isCompleted, color, variant }) => {\n  const colorKey = color || 'primary';\n  const colorValue = colorKey === 'neutral' \n    ? { main: neutralTones(theme).emphasis }\n    : theme.palette[colorKey as 'primary' | 'secondary' | 'success' | 'warning' | 'error'];\n  const connectorColor = isCompleted ? colorValue.main : neutralTones(theme).track;\n\n  return {\n    flex: 1,\n    position: 'relative',\n    \n    ...(orientation === 'horizontal' && {\n      height: rem(theme, 2),\n      backgroundColor: connectorColor,\n      margin: `0 ${theme.spacing(1)}`,\n      minWidth: theme.spacing(2),\n    }),\n    \n    ...(orientation === 'vertical' && {\n      width: rem(theme, 2),\n      backgroundColor: connectorColor,\n      minHeight: theme.spacing(3),\n      marginLeft: theme.spacing(2),\n      position: 'absolute',\n      left: '50%',\n      transform: 'translateX(-50%)',\n      top: '100%',\n    }),\n\n    transition: theme.transitions.create('background-color', {\n      duration: theme.transitions.duration.short,\n    }),\n\n    ...(variant === 'minimal' && {\n      opacity: 0.6,\n    }),\n  };\n});\n\n/**\n * Individual step indicator component\n */\nconst StepIndicatorComponent = forwardRef<HTMLDivElement, StepIndicatorProps>(({\n  step,\n  index,\n  isActive,\n  isCompleted,\n  isError,\n  variant,\n  color,\n  size,\n  showNumbers,\n  showIcons,\n  completedIcon,\n  errorIcon,\n  interactive,\n  animated,\n  disabled,\n  onClick,\n  'data-testid': dataTestId,\n}, ref) => {\n  const handleClick = useCallback(() => {\n    if (interactive && !disabled && onClick) {\n      onClick(index, step);\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (interactive && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      if (onClick) {\n        onClick(index, step);\n      }\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const renderIndicatorContent = () => {\n    if (isError && errorIcon) {\n      return errorIcon;\n    }\n    if (isCompleted && completedIcon) {\n      return completedIcon;\n    }\n    if (showIcons && step.icon) {\n      return step.icon;\n    }\n    if (showNumbers) {\n      return index + 1;\n    }\n    return null;\n  };\n\n  return (\n    <StepIndicator\n      ref={ref}\n      size={size}\n      variant={variant}\n      color={color}\n      isActive={isActive}\n      isCompleted={isCompleted}\n      isError={isError}\n      interactive={interactive}\n      animated={animated}\n      disabled={Boolean(disabled || step.disabled)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive && !disabled && !step.disabled ? 0 : -1}\n      aria-label={`Step ${index + 1}: ${step.title}`}\n      aria-current={isActive ? 'step' : undefined}\n      data-testid={dataTestId}\n    >\n      {renderIndicatorContent()}\n    </StepIndicator>\n  );\n});\n\nStepIndicatorComponent.displayName = 'StepIndicator';\n\n/**\n * Step connector component\n */\nconst StepConnectorComponent = forwardRef<HTMLDivElement, StepConnectorProps>(({\n  isCompleted,\n  orientation,\n  variant,\n  color,\n  'data-testid': dataTestId,\n}, ref) => (\n  <StepConnector\n    ref={ref}\n    orientation={orientation}\n    isCompleted={isCompleted}\n    color={color}\n    variant={variant}\n    data-testid={dataTestId}\n  />\n));\n\nStepConnectorComponent.displayName = 'StepConnector';\n\n/**\n * Step content component\n */\nconst StepContentComponent = forwardRef<HTMLDivElement, StepContentProps>(({\n  step,\n  index,\n  orientation,\n  interactive,\n  disabled,\n  onClick,\n  'data-testid': dataTestId,\n}, ref) => {\n  const handleClick = useCallback(() => {\n    if (interactive && !disabled && onClick) {\n      onClick(index, step);\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (interactive && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      if (onClick) {\n        onClick(index, step);\n      }\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  return (\n    <StepContent\n      ref={ref}\n      orientation={orientation}\n      interactive={interactive}\n      disabled={Boolean(disabled || step.disabled)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive && !disabled && !step.disabled ? 0 : -1}\n      data-testid={dataTestId}\n    >\n      <div className=\"step-title\">{step.title}</div>\n      {step.description && (\n        <div className=\"step-description\">{step.description}</div>\n      )}\n    </StepContent>\n  );\n});\n\nStepContentComponent.displayName = 'StepContent';\n\n/**\n * A plain wrapper around the styled row. Exporting the styled component itself\n * trips TS2742 — its inferred type names a pnpm-internal @mui/system path.\n */\nexport const StepItemRow: React.FC<{\n  orientation: WorkflowStepProps['orientation'];\n  isLast: boolean;\n  children: React.ReactNode;\n}> = ({ orientation, isLast, children }) => (\n  <StepItem orientation={orientation} isLast={isLast}>\n    {children}\n  </StepItem>\n);\n\nexport { StepConnectorComponent, StepContentComponent, StepIndicatorComponent };\n"],"mappings":"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","names":[]}

package/dist/{chunk-P6TNXBDA.js → chunk-MYKWJCR7.js}

@@ -1,18 +1,18 @@
 import {
   resizedTo
-} from "./chunk-3TDVGZZN.js";
+} from "./chunk-QBTBRJ2Q.js";
 
 // src/components/layout/Resizable/Resizable.hooks.ts
 import React, { useCallback, useRef, useState } from "react";
-var useResize = ({ width, height, bounds, disabled, onResize }) => {
-  const [size, setSize] = useState({ width, height });
+var useResize = ({ start, bounds, pxPerDesignPx, disabled, onResize }) => {
+  const [size, setSize] = useState(start);
   const [isResizing, setIsResizing] = useState(false);
   const startPos = useRef({ x: 0, y: 0 });
   const startSize = useRef({ width: 0, height: 0 });
   const activeHandle = useRef(null);
   React.useEffect(() => {
-    setSize({ width, height });
-  }, [width, height]);
+    setSize(start);
+  }, [start]);
   const handleMouseDown = useCallback(
     (e, handle) => {
       if (disabled) return;
@@ -21,7 +21,7 @@ var useResize = ({ width, height, bounds, disabled, onResize }) => {
       setIsResizing(true);
       activeHandle.current = handle;
       startPos.current = { x: e.clientX, y: e.clientY };
-      startSize.current = { width: size.width, height: size.height };
+      startSize.current = size;
       const handleMouseMove = (move) => {
         const delta = {
           x: move.clientX - startPos.current.x,
@@ -29,7 +29,7 @@ var useResize = ({ width, height, bounds, disabled, onResize }) => {
         };
         const next = resizedTo(handle, delta, startSize.current, bounds);
         setSize(next);
-        onResize?.(next.width, next.height);
+        onResize?.(next.width / pxPerDesignPx, next.height / pxPerDesignPx);
       };
       const handleMouseUp = () => {
         setIsResizing(false);
@@ -40,7 +40,7 @@ var useResize = ({ width, height, bounds, disabled, onResize }) => {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
     },
-    [disabled, size, bounds, onResize]
+    [disabled, size, bounds, pxPerDesignPx, onResize]
   );
   return { size, isResizing, activeHandle, handleMouseDown };
 };
@@ -48,4 +48,4 @@ var useResize = ({ width, height, bounds, disabled, onResize }) => {
 export {
   useResize
 };
-//# sourceMappingURL=chunk-P6TNXBDA.js.map
+//# sourceMappingURL=chunk-MYKWJCR7.js.map

package/dist/chunk-MYKWJCR7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Resizable/Resizable.hooks.ts"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\n\nimport type { Bounds } from './Resizable.helpers';\nimport { resizedTo } from './Resizable.helpers';\nimport type { ResizeHandle } from './Resizable.types';\n\ninterface ResizeArgs {\n  /** Where the box starts, in px (`startSizePx`); a new object re-seats the box. */\n  start: { width: number; height: number };\n  /** The clamp, in px (`axisPx` per axis). */\n  bounds: Bounds;\n  /** Rendered px per design px (`remPx(theme, 1)`) — `onResize` reports design px. */\n  pxPerDesignPx: number;\n  disabled: boolean;\n  onResize?: (width: number, height: number) => void;\n}\n\n/**\n * Tracks the box's size across a drag. The listeners live on the document rather\n * than the handle, so the pointer can leave the handle — or the component — mid\n * drag without the resize sticking.\n *\n * The live size is px, because a drag is pointer pixels. What `onResize`\n * reports is design px — the unit the consumer's `width`/`height` are in — so a\n * controlled box (`onResize` feeding `width`) stays put at any type scale.\n */\nexport const useResize = ({ start, bounds, pxPerDesignPx, disabled, onResize }: ResizeArgs) => {\n  const [size, setSize] = useState(start);\n  const [isResizing, setIsResizing] = useState(false);\n  const startPos = useRef({ x: 0, y: 0 });\n  const startSize = useRef({ width: 0, height: 0 });\n  const activeHandle = useRef<ResizeHandle | null>(null);\n\n  React.useEffect(() => {\n    setSize(start);\n  }, [start]);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent, handle: ResizeHandle) => {\n      if (disabled) return;\n\n      e.preventDefault();\n      e.stopPropagation();\n\n      setIsResizing(true);\n      activeHandle.current = handle;\n      startPos.current = { x: e.clientX, y: e.clientY };\n      // State is replaced on every change, never mutated, so holding it is a snapshot.\n      startSize.current = size;\n\n      const handleMouseMove = (move: globalThis.MouseEvent) => {\n        const delta = {\n          x: move.clientX - startPos.current.x,\n          y: move.clientY - startPos.current.y,\n        };\n        const next = resizedTo(handle, delta, startSize.current, bounds);\n\n        setSize(next);\n        onResize?.(next.width / pxPerDesignPx, next.height / pxPerDesignPx);\n      };\n\n      const handleMouseUp = () => {\n        setIsResizing(false);\n        activeHandle.current = null;\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseup', handleMouseUp);\n      };\n\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseup', handleMouseUp);\n    },\n    [disabled, size, bounds, pxPerDesignPx, onResize],\n  );\n\n  return { size, isResizing, activeHandle, handleMouseDown };\n};\n"],"mappings":";;;;;AAAA,OAAO,SAAS,aAAa,QAAQ,gBAAgB;AA0B9C,IAAM,YAAY,CAAC,EAAE,OAAO,QAAQ,eAAe,UAAU,SAAS,MAAkB;AAC7F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,WAAW,OAAO,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;AACtC,QAAM,YAAY,OAAO,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAChD,QAAM,eAAe,OAA4B,IAAI;AAErD,QAAM,UAAU,MAAM;AACpB,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,kBAAkB;AAAA,IACtB,CAAC,GAAqB,WAAyB;AAC7C,UAAI,SAAU;AAEd,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAElB,oBAAc,IAAI;AAClB,mBAAa,UAAU;AACvB,eAAS,UAAU,EAAE,GAAG,EAAE,SAAS,GAAG,EAAE,QAAQ;AAEhD,gBAAU,UAAU;AAEpB,YAAM,kBAAkB,CAAC,SAAgC;AACvD,cAAM,QAAQ;AAAA,UACZ,GAAG,KAAK,UAAU,SAAS,QAAQ;AAAA,UACnC,GAAG,KAAK,UAAU,SAAS,QAAQ;AAAA,QACrC;AACA,cAAM,OAAO,UAAU,QAAQ,OAAO,UAAU,SAAS,MAAM;AAE/D,gBAAQ,IAAI;AACZ,mBAAW,KAAK,QAAQ,eAAe,KAAK,SAAS,aAAa;AAAA,MACpE;AAEA,YAAM,gBAAgB,MAAM;AAC1B,sBAAc,KAAK;AACnB,qBAAa,UAAU;AACvB,iBAAS,oBAAoB,aAAa,eAAe;AACzD,iBAAS,oBAAoB,WAAW,aAAa;AAAA,MACvD;AAEA,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,WAAW,aAAa;AAAA,IACpD;AAAA,IACA,CAAC,UAAU,MAAM,QAAQ,eAAe,QAAQ;AAAA,EAClD;AAEA,SAAO,EAAE,MAAM,YAAY,cAAc,gBAAgB;AAC3D;","names":[]}

package/dist/{chunk-YVUD3MY4.js → chunk-N23GCN5U.js}

@@ -1,15 +1,18 @@
 import {
   ItemsPerPageSelect,
   PageInfo
-} from "./chunk-MVXFMIVZ.js";
+} from "./chunk-4GB46HLK.js";
 import {
   paginationStyles
-} from "./chunk-PMP6WJJS.js";
+} from "./chunk-BWMHGENX.js";
 import {
   makeTestId,
   muiSizeFor,
   resolvePaginationProps
 } from "./chunk-Z6TIAVEG.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/Pagination/Pagination.tsx
 import FirstPage from "@mui/icons-material/FirstPage";
@@ -66,7 +69,7 @@ var renderPaginationItem = ({
             "&.MuiPaginationItem-page": {
               fontSize: 0,
               overflow: "hidden",
-              textIndent: "-9999px"
+              textIndent: sxRem(-9999)
             }
           }
         }
@@ -191,4 +194,4 @@ Pagination.displayName = "Pagination";
 export {
   Pagination
 };
-//# sourceMappingURL=chunk-YVUD3MY4.js.map
+//# sourceMappingURL=chunk-N23GCN5U.js.map

package/dist/chunk-N23GCN5U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":["import FirstPage from '@mui/icons-material/FirstPage';\nimport LastPage from '@mui/icons-material/LastPage';\nimport NavigateBefore from '@mui/icons-material/NavigateBefore';\nimport NavigateNext from '@mui/icons-material/NavigateNext';\nimport type { PaginationRenderItemParams } from '@mui/material/Pagination/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiPagination from '@mui/material/Pagination/index.js';\nimport PaginationItem from '@mui/material/PaginationItem/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { ResolvedPaginationProps } from './Pagination.helpers';\nimport { makeTestId, muiSizeFor, resolvePaginationProps } from './Pagination.helpers';\nimport { paginationStyles } from './Pagination.styles';\nimport type { PaginationProps } from './Pagination.types';\nimport { ItemsPerPageSelect, PageInfo } from './PaginationParts';\nimport { sxRem } from '../../../tokens/relative';\n\nconst StyledPagination = styled(MuiPagination, {\n  shouldForwardProp: (prop) => !['customVariant', 'customSize'].includes(prop as string) })<{ customVariant?: string; customSize?: string }>(({ theme, customVariant, customSize }) => ({\n  ...paginationStyles({ theme, customVariant, customSize }) }));\n\nconst PaginationContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexWrap: 'wrap',\n  gap: theme.spacing(1) }));\n\n// Arrow items get a short suffix, pages carry their number. This was two\n// parallel switch statements that differed only in whether the prefix came from\n// dataTestId or the literal 'pagination'.\nconst ITEM_TEST_SUFFIX: Record<string, string> = {\n  first: 'first',\n  last: 'last',\n  previous: 'prev',\n  next: 'next' };\n\nconst paginationItemTestId = (\n  base: string | undefined,\n  item: PaginationRenderItemParams,\n): string | undefined => {\n  const prefix = base ?? 'pagination';\n\n  if (item.type === 'page') return `${prefix}-page-${item.page}`;\n\n  const suffix = ITEM_TEST_SUFFIX[item.type];\n  return suffix ? `${prefix}-${suffix}` : undefined;\n};\n\n// A dots-variant page renders as a bare dot; everything else uses MUI's item\n// with our own arrow icons.\nconst renderPaginationItem = ({\n  item,\n  variant,\n  size: _size,\n  dataTestId,\n  icons }: {\n  item: PaginationRenderItemParams;\n  variant: string;\n  size: string;\n  dataTestId?: string;\n  icons: {\n    firstIcon?: React.ReactNode;\n    lastIcon?: React.ReactNode;\n    previousIcon?: React.ReactNode;\n    nextIcon?: React.ReactNode;\n  };\n}) => {\n  const { firstIcon, lastIcon, previousIcon, nextIcon } = icons;\n\n    const itemTestId = paginationItemTestId(dataTestId, item);\n\n    if (variant === 'dots') {\n      if (item.type === 'page') {\n        return (\n          <PaginationItem\n            {...item}\n            data-testid={itemTestId}\n            sx={{\n              '&.MuiPaginationItem-page': {\n                fontSize: 0,\n                overflow: 'hidden',\n                textIndent: sxRem(-9999) } }}\n          />\n        );\n      }\n      return null; // Hide navigation buttons for dots\n    }\n\n    // Map custom icons to components\n    const iconMap: Record<string, React.ReactElement> = {\n      first: firstIcon as React.ReactElement,\n      last: lastIcon as React.ReactElement,\n      previous: previousIcon as React.ReactElement,\n      next: nextIcon as React.ReactElement };\n\n    return (\n      <PaginationItem\n        {...item}\n        data-testid={itemTestId}\n        components={{\n          first: () => iconMap.first || <FirstPage />,\n          last: () => iconMap.last || <LastPage />,\n          previous: () => iconMap.previous || <NavigateBefore />,\n          next: () => iconMap.next || <NavigateNext /> }}\n      />\n    );\n  \n};\n\n// The control itself. Local because StyledPagination cannot cross a module\n// boundary (TS2742).\nconst PaginationControl: React.FC<\n  ResolvedPaginationProps & {\n    innerRef: React.Ref<HTMLElement>;\n    renderItem: (item: PaginationRenderItemParams) => React.ReactNode;\n    rest: Record<string, unknown>;\n  }\n> = ({ innerRef, renderItem, rest, ...p }) => {\n  // The dots variant is a position indicator, not a control: no page numbers\n  // around the current one, and no step buttons.\n  const isDots = p.variant === 'dots';\n\n  return (\n    <StyledPagination\n      ref={innerRef}\n      page={p.page}\n      count={p.count}\n      onChange={p.onChange}\n      customVariant={p.variant}\n      customSize={p.size}\n      variant=\"outlined\"\n      size={muiSizeFor(p.size)}\n      boundaryCount={isDots ? 0 : p.boundaryCount}\n      siblingCount={isDots ? 0 : p.siblingCount}\n      hideNextButton={p.hideNextButton || isDots}\n      hidePrevButton={p.hidePrevButton || isDots}\n      showFirstButton={p.showFirstButton && !isDots}\n      showLastButton={p.showLastButton && !isDots}\n      disabled={p.disabled}\n      // MUI spells the unaccented pagination colour `standard`; ours is\n      // `neutral`, translated here rather than carried as a second name.\n      color={p.color === undefined ? undefined : p.color === 'neutral' ? 'standard' : p.color}\n      renderItem={renderItem}\n      {...rest}\n    />\n  );\n};\n\nexport const Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n  (componentProps, ref) => {\n    const resolved = resolvePaginationProps(componentProps);\n    const {\n      pageSizeLabel,\n      variant,\n      size,\n      page,\n      count,\n      onChange: _onChange,\n      boundaryCount: _boundaryCount,\n      siblingCount: _siblingCount,\n      hideNextButton: _hideNextButton,\n      hidePrevButton: _hidePrevButton,\n      showFirstButton: _showFirstButton,\n      showLastButton: _showLastButton,\n      firstIcon,\n      lastIcon,\n      previousIcon,\n      nextIcon,\n      disabled,\n      color: _color,\n      showPageInfo,\n      pageInfoFormat,\n      showItemsPerPage,\n      itemsPerPageOptions,\n      itemsPerPage,\n      onItemsPerPageChange,\n      className,\n      dataTestId,\n      ...props\n    } = resolved;\n\n    const testId = makeTestId(dataTestId);\n\n    const renderItem = (item: PaginationRenderItemParams) =>\n      renderPaginationItem({\n        item,\n        variant,\n        size,\n        dataTestId,\n        icons: { firstIcon, lastIcon, previousIcon, nextIcon } });\n\n    return (\n      <PaginationContainer className={className} data-testid={dataTestId || 'pagination'}>\n        {showItemsPerPage && onItemsPerPageChange && (\n          <ItemsPerPageSelect\n            pageSizeLabel={pageSizeLabel}\n            value={itemsPerPage}\n            options={itemsPerPageOptions}\n            size={size}\n            disabled={disabled}\n            testId={testId('items-per-page')}\n            onChange={onItemsPerPageChange}\n          />\n        )}\n\n        <PaginationControl\n          {...resolved}\n          innerRef={ref}\n          renderItem={renderItem}\n          rest={props as unknown as Record<string, unknown>}\n        />\n\n        {showPageInfo && (\n          <PageInfo size={size} testId={testId('info')}>\n            {pageInfoFormat(page, count)}\n          </PageInfo>\n        )}\n      </PaginationContainer>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n"],"mappings":"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","names":[]}

package/dist/{chunk-2TJOCI54.js → chunk-NCEQWEXT.js}

@@ -4,7 +4,7 @@ import {
 import {
   backdropSx,
   panelSx
-} from "./chunk-IVIHRZEY.js";
+} from "./chunk-NDMPXMW2.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -77,10 +77,10 @@ var Modal = (props) => {
     }
   );
 };
-var ModalContent = ({ children, padding = 3, dataTestId }) => /* @__PURE__ */ jsx(Box, { sx: { p: padding }, "data-testid": dataTestId || "modal-content", children });
+var ModalContent = ({ children, padding, dataTestId }) => /* @__PURE__ */ jsx(Box, { sx: { p: padding ?? 3 }, "data-testid": dataTestId || "modal-content", children });
 
 export {
   Modal,
   ModalContent
 };
-//# sourceMappingURL=chunk-2TJOCI54.js.map
+//# sourceMappingURL=chunk-NCEQWEXT.js.map

package/dist/{chunk-2TJOCI54.js.map → chunk-NCEQWEXT.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["import Backdrop from '@mui/material/Backdrop/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiModal from '@mui/material/Modal/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { backdropSx, panelSx } from './Modal.styles';\nimport { transitionFor } from './Modal.transitions';\nimport type { ModalContentProps, ModalProps } from './Modal.types';\n\nconst DEFAULTS = {\n  variant: 'center',\n  size: 'md',\n  backdrop: true,\n  persistent: false,\n  glass: false,\n  gradient: false,\n  glow: false,\n  pulse: false,\n  borderRadius: 'lg',\n} satisfies Partial<ModalProps>;\n\ntype ResolvedProps = ModalProps & Required<Pick<ModalProps, keyof typeof DEFAULTS>>;\n\nexport const Modal: React.FC<ModalProps> = (props) => {\n  const {\n    children, variant, size, backdrop, persistent, glass, gradient, glow, pulse,\n    borderRadius, onClose, open, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const theme = useTheme();\n  const isGlass = glass || variant === 'glass';\n\n  /** A persistent modal ignores the two dismissals it did not ask for. */\n  const handleClose = (_event: object, reason: 'backdropClick' | 'escapeKeyDown') => {\n    if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {\n      return;\n    }\n    onClose?.();\n  };\n\n  const TransitionComponent = transitionFor(variant);\n\n  return (\n    <MuiModal\n      open={open}\n      onClose={handleClose}\n      closeAfterTransition\n      BackdropComponent={backdrop ? Backdrop : undefined}\n      BackdropProps={{\n        timeout: 500,\n        sx: backdropSx(theme, isGlass),\n        // @ts-expect-error - data-testid is not part of BackdropProps type but is valid HTML\n        'data-testid': dataTestId ? `${dataTestId}-backdrop` : 'modal-backdrop',\n      }}\n      {...rest}\n    >\n      <TransitionComponent in={open} timeout={500}>\n        <Box\n          sx={panelSx(theme, { variant, size, borderRadius, glass, gradient, glow, pulse })}\n          data-testid={dataTestId || 'modal'}\n        >\n          {children}\n        </Box>\n      </TransitionComponent>\n    </MuiModal>\n  );\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({ children, padding = 3, dataTestId }) => (\n  <Box sx={{ p: padding }} data-testid={dataTestId || 'modal-content'}>\n    {children}\n  </Box>\n);\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,cAAc;AACrB,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,SAAS,gBAAgB;AA0DjB;AAjDR,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,cAAc;AAChB;AAIO,IAAM,QAA8B,CAAC,UAAU;AACpD,QAAM;AAAA,IACJ;AAAA,IAAU;AAAA,IAAS;AAAA,IAAM;AAAA,IAAU;AAAA,IAAY;AAAA,IAAO;AAAA,IAAU;AAAA,IAAM;AAAA,IACtE;AAAA,IAAc;AAAA,IAAS;AAAA,IAAM;AAAA,IAC7B,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,QAAQ;AAEhC,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,SAAS,YAAY;AAGrC,QAAM,cAAc,CAAC,QAAgB,WAA8C;AACjF,QAAI,eAAe,WAAW,mBAAmB,WAAW,kBAAkB;AAC5E;AAAA,IACF;AACA,cAAU;AAAA,EACZ;AAEA,QAAM,sBAAsB,cAAc,OAAO;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,sBAAoB;AAAA,MACpB,mBAAmB,WAAW,WAAW;AAAA,MACzC,eAAe;AAAA,QACb,SAAS;AAAA,QACT,IAAI,WAAW,OAAO,OAAO;AAAA;AAAA,QAE7B,eAAe,aAAa,GAAG,UAAU,cAAc;AAAA,MACzD;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,uBAAoB,IAAI,MAAM,SAAS,KACtC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,QAAQ,OAAO,EAAE,SAAS,MAAM,cAAc,OAAO,UAAU,MAAM,MAAM,CAAC;AAAA,UAChF,eAAa,cAAc;AAAA,UAE1B;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEO,IAAM,eAA4C,CAAC,EAAE,UAAU,UAAU,GAAG,WAAW,MAC5F,oBAAC,OAAI,IAAI,EAAE,GAAG,QAAQ,GAAG,eAAa,cAAc,iBACjD,UACH;","names":[]}
+{"version":3,"sources":["../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["import Backdrop from '@mui/material/Backdrop/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiModal from '@mui/material/Modal/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { backdropSx, panelSx } from './Modal.styles';\nimport { transitionFor } from './Modal.transitions';\nimport type { ModalContentProps, ModalProps } from './Modal.types';\n\nconst DEFAULTS = {\n  variant: 'center',\n  size: 'md',\n  backdrop: true,\n  persistent: false,\n  glass: false,\n  gradient: false,\n  glow: false,\n  pulse: false,\n  borderRadius: 'lg',\n} satisfies Partial<ModalProps>;\n\ntype ResolvedProps = ModalProps & Required<Pick<ModalProps, keyof typeof DEFAULTS>>;\n\nexport const Modal: React.FC<ModalProps> = (props) => {\n  const {\n    children, variant, size, backdrop, persistent, glass, gradient, glow, pulse,\n    borderRadius, onClose, open, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const theme = useTheme();\n  const isGlass = glass || variant === 'glass';\n\n  /** A persistent modal ignores the two dismissals it did not ask for. */\n  const handleClose = (_event: object, reason: 'backdropClick' | 'escapeKeyDown') => {\n    if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {\n      return;\n    }\n    onClose?.();\n  };\n\n  const TransitionComponent = transitionFor(variant);\n\n  return (\n    <MuiModal\n      open={open}\n      onClose={handleClose}\n      closeAfterTransition\n      BackdropComponent={backdrop ? Backdrop : undefined}\n      BackdropProps={{\n        timeout: 500,\n        sx: backdropSx(theme, isGlass),\n        // @ts-expect-error - data-testid is not part of BackdropProps type but is valid HTML\n        'data-testid': dataTestId ? `${dataTestId}-backdrop` : 'modal-backdrop',\n      }}\n      {...rest}\n    >\n      <TransitionComponent in={open} timeout={500}>\n        <Box\n          sx={panelSx(theme, { variant, size, borderRadius, glass, gradient, glow, pulse })}\n          data-testid={dataTestId || 'modal'}\n        >\n          {children}\n        </Box>\n      </TransitionComponent>\n    </MuiModal>\n  );\n};\n\n// `padding` is in spacing units; the default is applied in `sx`, where `p` reads it as one.\nexport const ModalContent: React.FC<ModalContentProps> = ({ children, padding, dataTestId }) => (\n  <Box sx={{ p: padding ?? 3 }} data-testid={dataTestId || 'modal-content'}>\n    {children}\n  </Box>\n);\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,cAAc;AACrB,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,SAAS,gBAAgB;AA0DjB;AAjDR,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,cAAc;AAChB;AAIO,IAAM,QAA8B,CAAC,UAAU;AACpD,QAAM;AAAA,IACJ;AAAA,IAAU;AAAA,IAAS;AAAA,IAAM;AAAA,IAAU;AAAA,IAAY;AAAA,IAAO;AAAA,IAAU;AAAA,IAAM;AAAA,IACtE;AAAA,IAAc;AAAA,IAAS;AAAA,IAAM;AAAA,IAC7B,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,QAAQ;AAEhC,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,SAAS,YAAY;AAGrC,QAAM,cAAc,CAAC,QAAgB,WAA8C;AACjF,QAAI,eAAe,WAAW,mBAAmB,WAAW,kBAAkB;AAC5E;AAAA,IACF;AACA,cAAU;AAAA,EACZ;AAEA,QAAM,sBAAsB,cAAc,OAAO;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,sBAAoB;AAAA,MACpB,mBAAmB,WAAW,WAAW;AAAA,MACzC,eAAe;AAAA,QACb,SAAS;AAAA,QACT,IAAI,WAAW,OAAO,OAAO;AAAA;AAAA,QAE7B,eAAe,aAAa,GAAG,UAAU,cAAc;AAAA,MACzD;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,uBAAoB,IAAI,MAAM,SAAS,KACtC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,QAAQ,OAAO,EAAE,SAAS,MAAM,cAAc,OAAO,UAAU,MAAM,MAAM,CAAC;AAAA,UAChF,eAAa,cAAc;AAAA,UAE1B;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAGO,IAAM,eAA4C,CAAC,EAAE,UAAU,SAAS,WAAW,MACxF,oBAAC,OAAI,IAAI,EAAE,GAAG,WAAW,EAAE,GAAG,eAAa,cAAc,iBACtD,UACH;","names":[]}

package/dist/{chunk-IVIHRZEY.js → chunk-NDMPXMW2.js}

@@ -2,16 +2,20 @@ import {
   scrim,
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/feedback/Modal/Modal.styles.ts
 import { alpha, keyframes } from "@mui/material/styles/index.js";
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 20px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 20)} currentColor;
     opacity: 0;
   }
   100% {
@@ -47,17 +51,17 @@ var pulseRing = (theme) => ({
   borderRadius: "inherit",
   backgroundColor: theme.palette.primary.main,
   opacity: 0.3,
-  animation: `${pulseAnimation} 2s infinite`,
+  animation: `${pulseAnimation(theme)} 2s infinite`,
   pointerEvents: "none",
   zIndex: -1
 });
 var surface = (theme, flags) => {
   const { variant, glass, gradient, glow } = flags;
   const isGlass = glass || variant === "glass";
-  const boxShadow = glow ? `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}` : isGlass ? `0 8px 32px ${shadowInk(theme, 0.1)}` : theme.shadows[8];
+  const boxShadow = glow ? `${rems(theme, 0, 0, 40)} ${alpha(theme.palette.primary.main, 0.3)}` : isGlass ? `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}` : theme.shadows[8];
   return {
     backgroundColor: isGlass ? alpha(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
-    backdropFilter: isGlass ? "blur(20px)" : gradient ? "blur(10px)" : "none",
+    backdropFilter: isGlass ? `blur(${rem(theme, 20)})` : gradient ? `blur(${rem(theme, 10)})` : "none",
     border: isGlass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : "none",
     boxShadow,
     ...gradient && {
@@ -70,7 +74,7 @@ var panelSx = (theme, flags) => {
   return {
     // A pulsing panel positions its own ring, so it becomes the containing block.
     position: pulse ? "relative" : "absolute",
-    width: WIDTHS[size] ?? WIDTHS.md,
+    width: rem(theme, WIDTHS[size] ?? WIDTHS.md),
     maxWidth: "90vw",
     borderRadius: (RADII[borderRadius] ?? RADII.lg)(theme),
     outline: 0,
@@ -86,11 +90,11 @@ var panelSx = (theme, flags) => {
 };
 var backdropSx = (theme, isGlass) => ({
   backgroundColor: scrim(theme, isGlass ? 0.2 : 0.5),
-  backdropFilter: isGlass ? "blur(8px)" : "none"
+  backdropFilter: isGlass ? `blur(${rem(theme, 8)})` : "none"
 });
 
 export {
   panelSx,
   backdropSx
 };
-//# sourceMappingURL=chunk-IVIHRZEY.js.map
+//# sourceMappingURL=chunk-NDMPXMW2.js.map

package/dist/chunk-NDMPXMW2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Modal/Modal.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { scrim, shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\nimport type { ModalProps } from './Modal.types';\n\ntype Variant = NonNullable<ModalProps['variant']>;\ntype Size = NonNullable<ModalProps['size']>;\ntype Radius = NonNullable<ModalProps['borderRadius']>;\n\nconst pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 20)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nconst RADII: Record<Radius, (theme: Theme) => number | string> = {\n  none: () => 0,\n  sm: (theme) => theme.spacing(0.5),\n  md: (theme) => theme.spacing(1),\n  lg: (theme) => theme.spacing(2),\n  xl: (theme) => theme.spacing(3),\n};\n\n/** Every preset is capped at 90vw so the panel never overflows a small screen. */\nconst WIDTHS: Record<Size, number> = { xs: 320, sm: 480, md: 640, lg: 800, xl: 960 };\n\n/**\n * Where the panel sits. Top and bottom are the same layout anchored to opposite\n * edges; centre is the only one that offsets on both axes.\n */\nconst PLACEMENTS: Record<string, CSSObject> = {\n  top: { top: '10%', left: '50%', transform: 'translateX(-50%)', maxHeight: '80vh' },\n  bottom: { bottom: '10%', left: '50%', transform: 'translateX(-50%)', maxHeight: '80vh' },\n  center: {\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    maxHeight: '90vh',\n  },\n};\n\ninterface ModalStyleFlags {\n  variant: Variant;\n  size: Size;\n  borderRadius: Radius;\n  glass: boolean;\n  gradient: boolean;\n  glow: boolean;\n  pulse: boolean;\n}\n\n/** The ring that expands out of the panel while `pulse` is set. */\nconst pulseRing = (theme: Theme): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute' as const,\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  borderRadius: 'inherit',\n  backgroundColor: theme.palette.primary.main,\n  opacity: 0.3,\n  animation: `${pulseAnimation(theme)} 2s infinite`,\n  pointerEvents: 'none' as const,\n  zIndex: -1,\n});\n\n/** The surface: its fill, its blur and the shadow that lifts it off the backdrop. */\nconst surface = (theme: Theme, flags: ModalStyleFlags): CSSObject => {\n  const { variant, glass, gradient, glow } = flags;\n  // The glass variant is the glass flag by another name, so either turns it on.\n  const isGlass = glass || variant === 'glass';\n\n  const boxShadow = glow\n    ? `${rems(theme, 0, 0, 40)} ${alpha(theme.palette.primary.main, 0.3)}`\n    : isGlass\n      ? `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`\n      : theme.shadows[8];\n\n  return {\n    backgroundColor: isGlass\n      ? alpha(theme.palette.background.paper, 0.1)\n      : theme.palette.background.paper,\n    backdropFilter: isGlass ? `blur(${rem(theme, 20)})` : gradient ? `blur(${rem(theme, 10)})` : 'none',\n    border: isGlass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : 'none',\n    boxShadow,\n    ...(gradient && {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,\n    }),\n  };\n};\n\nexport const panelSx = (theme: Theme, flags: ModalStyleFlags): CSSObject => {\n  const { variant, size, borderRadius, pulse } = flags;\n\n  return {\n    // A pulsing panel positions its own ring, so it becomes the containing block.\n    position: pulse ? ('relative' as const) : ('absolute' as const),\n    width: rem(theme, WIDTHS[size] ?? WIDTHS.md),\n    maxWidth: '90vw',\n    borderRadius: (RADII[borderRadius] ?? RADII.lg)(theme),\n    outline: 0,\n    overflowY: 'auto',\n    transition: theme.transitions.create(\n      ['box-shadow', 'background-color', 'backdrop-filter', 'transform'],\n      { duration: theme.transitions.duration.standard },\n    ),\n    ...(PLACEMENTS[variant] ?? PLACEMENTS.center),\n    ...surface(theme, flags),\n    ...(pulse && { '&::after': pulseRing(theme) }),\n  };\n};\n\nexport const backdropSx = (theme: Theme, isGlass: boolean): CSSObject => ({\n  backgroundColor: scrim(theme, isGlass ? 0.2 : 0.5),\n  backdropFilter: isGlass ? `blur(${rem(theme, 8)})` : 'none',\n});\n"],"mappings":";;;;;;;;;;AAAA,SAAS,OAAO,iBAAiB;AAYjC,IAAM,iBAAiB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMjB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAStC,IAAM,QAA2D;AAAA,EAC/D,MAAM,MAAM;AAAA,EACZ,IAAI,CAAC,UAAU,MAAM,QAAQ,GAAG;AAAA,EAChC,IAAI,CAAC,UAAU,MAAM,QAAQ,CAAC;AAAA,EAC9B,IAAI,CAAC,UAAU,MAAM,QAAQ,CAAC;AAAA,EAC9B,IAAI,CAAC,UAAU,MAAM,QAAQ,CAAC;AAChC;AAGA,IAAM,SAA+B,EAAE,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI;AAMnF,IAAM,aAAwC;AAAA,EAC5C,KAAK,EAAE,KAAK,OAAO,MAAM,OAAO,WAAW,oBAAoB,WAAW,OAAO;AAAA,EACjF,QAAQ,EAAE,QAAQ,OAAO,MAAM,OAAO,WAAW,oBAAoB,WAAW,OAAO;AAAA,EACvF,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AACF;AAaA,IAAM,YAAY,CAAC,WAA6B;AAAA,EAC9C,SAAS;AAAA,EACT,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB,MAAM,QAAQ,QAAQ;AAAA,EACvC,SAAS;AAAA,EACT,WAAW,GAAG,eAAe,KAAK,CAAC;AAAA,EACnC,eAAe;AAAA,EACf,QAAQ;AACV;AAGA,IAAM,UAAU,CAAC,OAAc,UAAsC;AACnE,QAAM,EAAE,SAAS,OAAO,UAAU,KAAK,IAAI;AAE3C,QAAM,UAAU,SAAS,YAAY;AAErC,QAAM,YAAY,OACd,GAAG,KAAK,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC,KAClE,UACE,GAAG,KAAK,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,UAAU,OAAO,GAAG,CAAC,KACjD,MAAM,QAAQ,CAAC;AAErB,SAAO;AAAA,IACL,iBAAiB,UACb,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,IACzC,MAAM,QAAQ,WAAW;AAAA,IAC7B,gBAAgB,UAAU,QAAQ,IAAI,OAAO,EAAE,CAAC,MAAM,WAAW,QAAQ,IAAI,OAAO,EAAE,CAAC,MAAM;AAAA,IAC7F,QAAQ,UAAU,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC,KAAK;AAAA,IAC1E;AAAA,IACA,GAAI,YAAY;AAAA,MACd,YAAY,2BAA2B,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC,KAAK,MAAM,MAAM,QAAQ,UAAU,MAAM,GAAG,CAAC;AAAA,IAC5H;AAAA,EACF;AACF;AAEO,IAAM,UAAU,CAAC,OAAc,UAAsC;AAC1E,QAAM,EAAE,SAAS,MAAM,cAAc,MAAM,IAAI;AAE/C,SAAO;AAAA;AAAA,IAEL,UAAU,QAAS,aAAwB;AAAA,IAC3C,OAAO,IAAI,OAAO,OAAO,IAAI,KAAK,OAAO,EAAE;AAAA,IAC3C,UAAU;AAAA,IACV,eAAe,MAAM,YAAY,KAAK,MAAM,IAAI,KAAK;AAAA,IACrD,SAAS;AAAA,IACT,WAAW;AAAA,IACX,YAAY,MAAM,YAAY;AAAA,MAC5B,CAAC,cAAc,oBAAoB,mBAAmB,WAAW;AAAA,MACjE,EAAE,UAAU,MAAM,YAAY,SAAS,SAAS;AAAA,IAClD;AAAA,IACA,GAAI,WAAW,OAAO,KAAK,WAAW;AAAA,IACtC,GAAG,QAAQ,OAAO,KAAK;AAAA,IACvB,GAAI,SAAS,EAAE,YAAY,UAAU,KAAK,EAAE;AAAA,EAC9C;AACF;AAEO,IAAM,aAAa,CAAC,OAAc,aAAiC;AAAA,EACxE,iBAAiB,MAAM,OAAO,UAAU,MAAM,GAAG;AAAA,EACjD,gBAAgB,UAAU,QAAQ,IAAI,OAAO,CAAC,CAAC,MAAM;AACvD;","names":[]}

package/dist/{chunk-UUUMNJPP.js → chunk-NLYNRE7L.js}

@@ -1,9 +1,9 @@
 import {
   PaletteResults
-} from "./chunk-BLJDCMFU.js";
+} from "./chunk-2ARVNCVU.js";
 import {
   ShortcutChip
-} from "./chunk-RNEYZTE4.js";
+} from "./chunk-Z6MCTGIK.js";
 import {
   useCommandPalette
 } from "./chunk-SUZXPDUQ.js";
@@ -33,7 +33,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var StyledDialog = styled(Dialog)(({ theme }) => ({
   "& .MuiBackdrop-root": {
     backgroundColor: scrim(theme, 0.6),
-    backdropFilter: "blur(4px)"
+    backdropFilter: `blur(${rem(theme, 4)})`
   },
   "& .MuiDialog-paper": {
     position: "fixed",
@@ -47,10 +47,10 @@ var StyledDialog = styled(Dialog)(({ theme }) => ({
 }));
 var PaletteContainer = styled(Paper)(({ theme }) => ({
   width: "100%",
-  maxWidth: 640,
+  maxWidth: rem(theme, 640),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-  backdropFilter: "blur(20px)",
-  WebkitBackdropFilter: "blur(20px)",
+  backdropFilter: `blur(${rem(theme, 20)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
   borderRadius: theme.shape.borderRadius * 2,
   overflow: "hidden",
@@ -141,8 +141,8 @@ var CommandPalette = ({
   onClose,
   commands,
   placeholder = "Type a command or search...",
-  width = "640px",
-  maxHeight = "400px",
+  width,
+  maxHeight,
   showRecent = true,
   recentCommands = [],
   onCommandExecute,
@@ -179,7 +179,7 @@ var CommandPalette = ({
       maxWidth: false,
       fullWidth: true,
       "data-testid": dataTestId,
-      children: /* @__PURE__ */ jsx(DialogContent, { sx: { overflow: "visible", p: 0 }, children: /* @__PURE__ */ jsxs(PaletteContainer, { elevation: 24, sx: { width, maxHeight }, children: [
+      children: /* @__PURE__ */ jsx(DialogContent, { sx: { overflow: "visible", p: 0 }, children: /* @__PURE__ */ jsxs(PaletteContainer, { elevation: 24, sx: { width: width ?? sxRem(640), maxHeight: maxHeight ?? sxRem(400) }, children: [
         /* @__PURE__ */ jsx(
           PaletteSearch,
           {
@@ -219,4 +219,4 @@ export {
   CommandPalette,
   CommandPalette_default
 };
-//# sourceMappingURL=chunk-UUUMNJPP.js.map
+//# sourceMappingURL=chunk-NLYNRE7L.js.map

package/dist/chunk-NLYNRE7L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport EnterIcon from '@mui/icons-material/KeyboardReturn';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport InputBase from '@mui/material/InputBase/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { TransitionProps } from '@mui/material/transitions/index.js';\nimport type { FC} from 'react';\nimport React, {  } from 'react';\n\nimport { useCommandPalette } from './CommandPalette.hooks';\nimport { PaletteResults } from './CommandPaletteResults';\nimport { ShortcutChip } from './ShortcutChip';\nimport type { CommandPaletteProps } from './CommandPalette.types';\nimport type { CommandPaletteCopy } from '../../../copy';\nimport { scrim } from '../../../tokens/ink';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n// Styled components\nconst StyledDialog = styled(Dialog)(({ theme }) => ({\n  '& .MuiBackdrop-root': {\n    backgroundColor: scrim(theme, 0.6),\n    backdropFilter: `blur(${rem(theme, 4)})` },\n  '& .MuiDialog-paper': {\n    position: 'fixed',\n    top: '20%',\n    margin: 0,\n    maxHeight: 'none',\n    background: 'transparent',\n    boxShadow: 'none',\n    overflow: 'visible' } }));\n\nconst PaletteContainer = styled(Paper)(({ theme }) => ({\n  width: '100%',\n  maxWidth: rem(theme, 640),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n  backdropFilter: `blur(${rem(theme, 20)})`,\n  WebkitBackdropFilter: `blur(${rem(theme, 20)})`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  borderRadius: theme.shape.borderRadius * 2,\n  overflow: 'hidden',\n  boxShadow: theme.shadows[24] }));\n\nconst SearchContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(2),\n  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n  background: alpha(theme.palette.background.default, 0.4) }));\n\nconst SearchInput = styled(InputBase)(({ theme }) => ({\n  flex: 1,\n  fontSize: rem(theme, 18),\n  fontWeight: 400,\n  '& input': {\n    padding: theme.spacing(0, 1),\n    '&::placeholder': {\n      color: theme.palette.text.secondary,\n      opacity: 0.8 } } }));\n\nconst Transition = React.forwardRef<unknown, TransitionProps & { children: React.ReactElement }>(\n  function Transition(props, ref) {\n    return <Slide direction=\"down\" ref={ref} {...props} />;\n  },\n);\n\n// Main component\nconst PaletteSearch: React.FC<{\n  inputRef: React.Ref<HTMLInputElement>;\n  placeholder?: string;\n  value: string;\n  dataTestId?: string;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  onClose: () => void;\n}> = ({ inputRef, placeholder, value, dataTestId, onChange, onClose }) => (\n  <SearchContainer>\n    <SearchIcon sx={{ color: 'text.secondary', mr: 1 }} />\n    <SearchInput\n      ref={inputRef}\n      placeholder={placeholder}\n      value={value}\n      onChange={onChange}\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      autoCapitalize=\"off\"\n      spellCheck=\"false\"\n      inputProps={{ 'data-testid': `${dataTestId}-input` }}\n    />\n    <IconButton size=\"small\" onClick={onClose} sx={{ ml: 1 }}>\n      <CloseIcon fontSize=\"small\" />\n    </IconButton>\n  </SearchContainer>\n);\n\nconst PaletteFooter: React.FC<{ commandCount: number; copy: CommandPaletteCopy }> = ({\n  commandCount,\n  copy,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        padding: 1,\n        borderTop: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n        background: alpha(theme.palette.background.default, 0.4) }}\n    >\n      <Box sx={{ display: 'flex', gap: 1 }}>\n        <ShortcutChip\n          icon={<EnterIcon sx={{ fontSize: sxRem(12) }} />}\n          label={copy.execute}\n          size=\"small\"\n        />\n        <ShortcutChip label={copy.navigate} size=\"small\" />\n        <ShortcutChip label={copy.close} size=\"small\" />\n      </Box>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        {commandCount} commands\n      </Typography>\n    </Box>\n  );\n};\n\nexport const CommandPalette: FC<CommandPaletteProps> = ({\n  copy,\n  open,\n  onClose,\n  commands,\n  placeholder = 'Type a command or search...',\n  width,\n  maxHeight,\n  showRecent = true,\n  recentCommands = [],\n  onCommandExecute,\n  dataTestId = 'command-palette' }) => {\n  const {\n    searchQuery,\n    setSearchQuery,\n    selectedIndex,\n    setSelectedIndex,\n    searchInputRef,\n    listRef,\n    filteredCommands,\n    groupedCommands,\n    executeCommand,\n    recentCommandIds } = useCommandPalette({\n    open,\n    commands,\n    showRecent,\n    recentCommands,\n    onCommandExecute,\n    onClose });\n\n  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setSearchQuery(event.target.value);\n  };\n\n  return (\n    <StyledDialog\n      open={open}\n      onClose={onClose}\n      TransitionComponent={Transition}\n      maxWidth={false}\n      fullWidth\n      data-testid={dataTestId}\n    >\n      <DialogContent sx={{ overflow: 'visible', p: 0 }}>\n        <PaletteContainer elevation={24} sx={{ width: width ?? sxRem(640), maxHeight: maxHeight ?? sxRem(400) }}>\n          <PaletteSearch\n            inputRef={searchInputRef}\n            placeholder={placeholder}\n            value={searchQuery}\n            dataTestId={dataTestId}\n            onChange={handleSearchChange}\n            onClose={onClose}\n          />\n\n          <PaletteResults\n          copy={copy}\n            listRef={listRef}\n            dataTestId={dataTestId}\n            searchQuery={searchQuery}\n            showRecent={showRecent}\n            commands={commands}\n            recentCommandIds={recentCommandIds}\n            filteredCommands={filteredCommands}\n            groupedCommands={groupedCommands}\n            selectedIndex={selectedIndex}\n            onSelect={setSelectedIndex}\n            onExecute={executeCommand}\n          />\n\n          <PaletteFooter copy={copy} commandCount={filteredCommands.length} />\n        </PaletteContainer>\n      </DialogContent>\n    </StyledDialog>\n  );\n};\n\n// Export default\nexport default CommandPalette;\n"],"mappings":"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","names":["Transition"]}

package/dist/{chunk-KLWW67WP.js → chunk-NOKN4HRK.js}

@@ -1,11 +1,12 @@
 import {
   tabsRootStyles
-} from "./chunk-3D6HXKZM.js";
+} from "./chunk-HDJQDMHB.js";
 import {
   CustomTabPanel
-} from "./chunk-7UZ2TFIK.js";
+} from "./chunk-GNCSDUGY.js";
 import {
-  rem
+  rem,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/Tabs/Tabs.tsx
@@ -28,8 +29,8 @@ var StyledTabs = styled(MuiTabs, {
 var CloseButton = styled(Box)(({ theme }) => ({
   marginLeft: theme.spacing(0.5),
   padding: theme.spacing(0.25),
-  width: 20,
-  height: 20,
+  width: rem(theme, 20),
+  height: rem(theme, 20),
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -43,11 +44,11 @@ var CloseButton = styled(Box)(({ theme }) => ({
 }));
 var BadgeWrapper = styled(Badge)(({ theme }) => ({
   "& .MuiBadge-badge": {
-    right: -6,
-    top: 4,
+    right: rem(theme, -6),
+    top: rem(theme, 4),
     fontSize: rem(theme, 12),
-    minWidth: 16,
-    height: 16,
+    minWidth: rem(theme, 16),
+    height: rem(theme, 16),
     padding: 0
   }
 }));
@@ -156,7 +157,7 @@ var TabsBar = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) =
     sx: buildTabsSx({
       fullWidth: p.fullWidth,
       sticky: p.sticky,
-      stickyOffset: p.stickyOffset,
+      stickyOffset: sxRem(p.stickyOffset ?? 0),
       indicatorColor: p.indicatorColor,
       disabled: p.disabled
     }),
@@ -249,4 +250,4 @@ Tabs.displayName = "Tabs";
 export {
   Tabs
 };
-//# sourceMappingURL=chunk-KLWW67WP.js.map
+//# sourceMappingURL=chunk-NOKN4HRK.js.map