@12-apps/ui 6.35.0 → 6.36.0

package/dist/chunk-E7T3A4IR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/FleetMap/FleetRoster.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport { freshnessOf } from './FleetMap.helpers';\nimport { FLEET_DOT, FLEET_ROSTER, FLEET_ROW, FLEET_SKELETON } from './FleetMap.metrics';\nimport type { FleetFreshness, FleetMapCopy, FleetUnit } from './FleetMap.types';\n\n/**\n * The roster beside the map — and the ACCESSIBLE half of this component.\n *\n * A map is a picture of positions and a screen reader cannot read a picture, so\n * the panel's information is carried by this list. That is not a consolation\n * prize: the list answers the questions a dispatcher actually asks — who is\n * reporting, how recently, and what are they carrying — and it answers them in\n * an order the map cannot express.\n *\n * The map beside it is a NAMED LANDMARK rather than an `aria-hidden` one, so a\n * reader can skip it in one gesture — see `FleetCanvas`, which carries the\n * reason it must not be hidden.\n */\n\n/** Each freshness draws from the semantic palette, never a hardcoded hex. */\nfunction freshnessColor(freshness: FleetFreshness, theme: Theme): string {\n  if (freshness === 'live') return theme.palette.success.main;\n  if (freshness === 'lagging') return theme.palette.warning.main;\n  return theme.palette.text.disabled;\n}\n\n/**\n * A row's two lines of text — the name, and the one-line summary under it.\n *\n * Split out of `FleetRow` to keep that function under the size gate, and the\n * seam is the natural one: everything here is READ, nothing is interactive.\n */\nfunction RowText({\n  unit,\n  copy,\n  freshness,\n  testId,\n}: Pick<RowProps, 'unit' | 'copy' | 'freshness' | 'testId'>): React.JSX.Element {\n  const theme = useTheme();\n\n  // Dropped rather than rendered empty: a phone that reports no accuracy radius\n  // would otherwise print a trailing separator with nothing after it.\n  const meta = [\n    copy.freshness[freshness],\n    copy.lastSeen(unit.staleSeconds),\n    unit.accuracyM == null ? null : copy.accuracy(unit.accuracyM),\n  ]\n    .filter((part): part is string => Boolean(part))\n    .join(' · ');\n\n  return (\n    <Stack sx={{ minWidth: 0, flexGrow: 1 }}>\n      <Typography\n        variant=\"body2\"\n        component=\"p\"\n        data-testid={`${testId}-label`}\n        sx={{ fontWeight: theme.typography.fontWeightMedium, overflowWrap: 'anywhere' }}\n      >\n        {unit.label}\n      </Typography>\n      <Typography\n        variant=\"caption\"\n        component=\"p\"\n        data-testid={`${testId}-meta`}\n        sx={{ color: theme.palette.text.secondary }}\n      >\n        {meta}\n      </Typography>\n    </Stack>\n  );\n}\n\n/**\n * Keep the selected row visible INSIDE the roster.\n *\n * The roster caps its own height, so a dispatcher arrowing through a fleet of\n * thirty otherwise walks the selection below the fold with nothing moving —\n * `aria-activedescendant` follows, and a SIGHTED keyboard user sees no feedback\n * at all.\n *\n * Watches the row's POSITION as well as its selectedness, because the roster\n * re-sorts on every poll: a rider who stays selected while their staleness\n * moves them down the list would otherwise slide out of view with the effect\n * never re-running.\n *\n * Arithmetic rather than `scrollIntoView({ block: 'nearest' })` because that\n * walks every scrollable ancestor, the document included, and `nearest` only\n * spares an ancestor the row is already visible in — which is exactly false\n * when the panel is off screen. Re-running on every re-sort, it would yank the\n * whole page back to the map on a timer, and drag it there on mount for any\n * board rendered below the fold with a selection already set.\n */\nfunction useKeptInView(\n  selected: boolean,\n  position: number,\n): React.RefObject<HTMLDivElement | null> {\n  const row = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    const box = row.current;\n    const list = box?.parentElement;\n    if (!selected || !box || !list) return;\n    const top = box.offsetTop - list.offsetTop;\n    if (top < list.scrollTop) {\n      list.scrollTop = top;\n    } else if (top + box.offsetHeight > list.scrollTop + list.clientHeight) {\n      list.scrollTop = top + box.offsetHeight - list.clientHeight;\n    }\n  }, [selected, position]);\n\n  return row;\n}\n\n/**\n * A row's own box, selected or not.\n *\n * Out of line because the hover rule needs the explanation more than the JSX\n * has room for: hover must never WEAKEN the selection. Written flat as\n * `'&:hover': { backgroundColor: action.hover }`, the pseudo-class wins on\n * specificity and repaints the selected row with the hover tint — measured at\n * `rgba(0,0,0,0.08)` idle against `rgba(0,0,0,0.04)` hovered, so pointing at\n * the selected row visually DESELECTED it and made it indistinguishable from\n * any other row under the cursor.\n */\nfunction rowSx(theme: Theme, selected: boolean): SxProps<Theme> {\n  const resting = selected ? theme.palette.action.selected : 'transparent';\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(FLEET_ROW.gapUnits),\n    padding: theme.spacing(FLEET_ROW.paddingYUnits, FLEET_ROW.paddingXUnits),\n    // `1`, not `theme.shape.borderRadius / 4`. MUI's `sx` reads a NUMBER here as\n    // a multiple of `theme.shape.borderRadius`, so dividing the theme value out\n    // and letting `sx` multiply it back in is quadratic: measured 4px on the\n    // default theme — which is why this looked right — and 36px on a host that\n    // sets its own radius to 12. In a package whose whole premise is being\n    // re-themed, only the multiple is portable.\n    borderRadius: FLEET_ROW.radiusMultiple,\n    cursor: 'pointer',\n    backgroundColor: resting,\n    '&:hover': {\n      backgroundColor: selected ? theme.palette.action.selected : theme.palette.action.hover,\n    },\n  };\n}\n\ninterface RowProps {\n  unit: FleetUnit;\n  copy: FleetMapCopy;\n  freshness: FleetFreshness;\n  selected: boolean;\n  onSelect: (id: string) => void;\n  /** The row's DOM id, which `aria-activedescendant` points at. */\n  optionId: string;\n  /** Where the row sits in the re-sorted roster — see the scroll effect. */\n  position: number;\n  testId: string;\n}\n\nfunction FleetRow({\n  unit,\n  copy,\n  freshness,\n  selected,\n  onSelect,\n  optionId,\n  position,\n  testId,\n}: RowProps): React.JSX.Element {\n  const theme = useTheme();\n  const color = freshnessColor(freshness, theme);\n  const row = useKeptInView(selected, position);\n\n  return (\n    <Box\n      ref={row}\n      role=\"option\"\n      aria-selected={selected}\n      id={optionId}\n      data-testid={testId}\n      data-freshness={freshness}\n      onClick={() => onSelect(unit.id)}\n      sx={rowSx(theme, selected)}\n    >\n      {/* The dot repeats what the freshness word beside it already says, so it\n          is hidden rather than read twice — and colour is never the only\n          carrier of the state. */}\n      <Box\n        aria-hidden=\"true\"\n        data-testid={`${testId}-dot`}\n        sx={{\n          width: rem(theme, FLEET_DOT.size),\n          height: rem(theme, FLEET_DOT.size),\n          borderRadius: '50%',\n          flexShrink: 0,\n          backgroundColor: color,\n        }}\n      />\n      <RowText unit={unit} copy={copy} freshness={freshness} testId={testId} />\n      {unit.badge && (\n        <Typography\n          variant=\"caption\"\n          component=\"span\"\n          data-testid={`${testId}-badge`}\n          sx={{ color: theme.palette.text.secondary, flexShrink: 0 }}\n        >\n          {unit.badge}\n        </Typography>\n      )}\n    </Box>\n  );\n}\n\n/**\n * What stands in for the roster before any unit has landed.\n *\n * `aria-hidden`, because three grey bars are not information — the panel's\n * `aria-busy` and its optional announcement carry that. The radius is the same\n * MULTIPLE a real row uses rather than a raw pixel count: `Skeleton` forwards\n * the number into `sx`, where it scales with `theme.shape.borderRadius`, so a\n * literal `4` drew 16px against the rows' 4px on the default theme and 48px\n * against 12px on a re-themed host.\n */\nfunction FirstLoad({ testId }: { testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Stack spacing={FLEET_SKELETON.gapUnits} data-testid={`${testId}-skeleton`} aria-hidden=\"true\">\n      {Array.from({ length: FLEET_SKELETON.rows }, (_, row) => (\n        <Skeleton\n          key={row}\n          variant=\"rectangular\"\n          height={rem(theme, FLEET_SKELETON.height)}\n          borderRadius={FLEET_SKELETON.radiusMultiple}\n        />\n      ))}\n    </Stack>\n  );\n}\n\nexport interface FleetRosterProps {\n  units: readonly FleetUnit[];\n  copy: FleetMapCopy;\n  selectedId: string | null | undefined;\n  onSelect: (id: string) => void;\n  laggingAfterSeconds: number;\n  staleAfterSeconds: number;\n  loading: boolean;\n  testId: string;\n  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport function FleetRoster({\n  units,\n  copy,\n  selectedId,\n  onSelect,\n  laggingAfterSeconds,\n  staleAfterSeconds,\n  loading,\n  testId,\n  onKeyDown,\n}: FleetRosterProps): React.JSX.Element {\n  const theme = useTheme();\n  // Generated, not derived from `dataTestId`: two boards on one page filtered\n  // from the same fleet would otherwise emit duplicate DOM ids and an ambiguous\n  // `aria-activedescendant`. Same reason the heading uses one.\n  const rowIdPrefix = React.useId();\n  const optionId = (id: string): string => `${rowIdPrefix}-${id}`;\n\n  // The selection is CONTROLLED, so it can name a unit that has since dropped\n  // out of the freshness window — a courier ending their shift mid-poll. The\n  // attribute must then be absent rather than pointing at an element that no\n  // longer renders, which announces nothing and fails an axe audit. `mapCentre`\n  // and `nextSelection` both handle the same case; this is the third place.\n  const active = units.some((unit) => unit.id === selectedId) ? selectedId : null;\n\n  // Only when there is nothing to show yet. Unmounting a populated listbox on\n  // every poll destroys the focus inside it, so a dispatcher arrowing through\n  // the roster is thrown back to the top of the page each time the data\n  // refreshes — and the rows they were reading vanish and return.\n  if (loading && units.length === 0) return <FirstLoad testId={testId} />;\n\n  return (\n    <Box\n      role=\"listbox\"\n      // A single tab stop with arrow keys inside, which is the listbox pattern:\n      // a dispatcher tabbing past a fleet of thirty should not have to press it\n      // thirty times to reach the map.\n      tabIndex={0}\n      aria-label={copy.rosterLabel}\n      aria-activedescendant={active ? optionId(active) : undefined}\n      data-testid={`${testId}-roster`}\n      onKeyDown={onKeyDown}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: theme.spacing(FLEET_ROSTER.gapUnits),\n        overflowY: 'auto',\n        minWidth: 0,\n        '&:focus-visible': {\n          outline: `${rem(theme, FLEET_ROSTER.focusRingWidth)} solid ${theme.palette.primary.main}`,\n          outlineOffset: rem(theme, FLEET_ROSTER.focusRingOffset),\n        },\n      }}\n    >\n      {units.map((unit, index) => (\n        <FleetRow\n          key={unit.id}\n          unit={unit}\n          copy={copy}\n          freshness={freshnessOf(unit.staleSeconds, laggingAfterSeconds, staleAfterSeconds)}\n          selected={unit.id === active}\n          onSelect={onSelect}\n          optionId={optionId(unit.id)}\n          position={index}\n          testId={`${testId}-${unit.id}`}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-I6EVBLFX.js → chunk-EA2UNEL6.js}

@@ -5,21 +5,29 @@ import {
   uiInk
 } from "./chunk-FQ6UW7IY.js";
 import {
+  rem,
+  remPx,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Chart/chart-internals.ts
 import { alpha } from "@mui/material/styles/index.js";
 var SIZE_PRESETS = {
-  xs: { height: 200, fontSize: sxRem(12), tickMargin: 10 },
-  sm: { height: 300, fontSize: sxRem(14), tickMargin: 12 },
-  md: { height: 400, fontSize: sxRem(16), tickMargin: 14 },
-  lg: { height: 500, fontSize: sxRem(18), tickMargin: 16 },
-  xl: { height: 600, fontSize: sxRem(20), tickMargin: 18 }
+  xs: { heightPx: 200, fontSize: sxRem(12), tickMarginPx: 10 },
+  sm: { heightPx: 300, fontSize: sxRem(14), tickMarginPx: 12 },
+  md: { heightPx: 400, fontSize: sxRem(16), tickMarginPx: 14 },
+  lg: { heightPx: 500, fontSize: sxRem(18), tickMarginPx: 16 },
+  xl: { heightPx: 600, fontSize: sxRem(20), tickMarginPx: 18 }
 };
+var presetOf = (size) => SIZE_PRESETS[size ?? "md"] ?? SIZE_PRESETS.md;
+var plotHeightPx = (size, height) => height ?? presetOf(size).heightPx;
 function getSizeStyles(theme, size, height) {
-  const preset = SIZE_PRESETS[size ?? "md"] ?? SIZE_PRESETS.md;
-  return { ...preset, fontSize: preset.fontSize(theme), height: height ?? preset.height };
+  const preset = presetOf(size);
+  return {
+    height: remPx(theme, plotHeightPx(size, height)),
+    fontSize: preset.fontSize(theme),
+    tickMargin: remPx(theme, preset.tickMarginPx)
+  };
 }
 function getDefaultColors(theme, variant, colors) {
   if (colors) return colors;
@@ -35,12 +43,12 @@ function getDefaultColors(theme, variant, colors) {
 }
 function effectStyles(theme, options) {
   const accent = accentFor(theme, options.color).main;
-  const glow = options.glow ? { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` } : {};
+  const glow = options.glow ? { boxShadow: `0 0 ${rem(theme, 30)} ${alpha(accent, 0.4)}` } : {};
   const pulse = options.pulse ? {
     animation: "pulse 2s infinite",
     "@keyframes pulse": {
       "0%": { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },
-      "70%": { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },
+      "70%": { boxShadow: `0 0 0 ${rem(theme, 20)} ${alpha(accent, 0)}` },
       "100%": { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` }
     }
   } : {};
@@ -51,7 +59,7 @@ function variantSurface(theme, options) {
     case "glass":
       return {
         backgroundColor: alpha(theme.palette.background.paper, options.glass ? 0.1 : 0.9),
-        backdropFilter: "blur(20px)",
+        backdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(theme.palette.divider, 0.1)}`
       };
     case "gradient":
@@ -114,10 +122,11 @@ function getAxisStyles(theme, variant, fontSize) {
 }
 
 export {
+  plotHeightPx,
   getSizeStyles,
   getDefaultColors,
   getVariantStyles,
   resolveSeries,
   getAxisStyles
 };
-//# sourceMappingURL=chunk-I6EVBLFX.js.map
+//# sourceMappingURL=chunk-EA2UNEL6.js.map

package/dist/chunk-EA2UNEL6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/chart-internals.ts"],"sourcesContent":["import { alpha, type Theme } from '@mui/material/styles/index.js';\nimport type { CSSProperties } from 'react';\n\nimport type { ChartProps, ChartSeries } from './Chart.types';\nimport { uiInk } from '../../../tokens/ink';\nimport { accentFor, rem, remPx, sxRem } from '../../../tokens/scales';\n\n/**\n * Non-JSX internals of the prop-driven Chart: size/variant styling, palette\n * resolution and series auto-detection. Split from Chart.tsx to keep every\n * function inside the repo's complexity budget.\n */\n\nexport interface SizeStyles {\n  /** The plot's height in rendered px — Recharts sizes from a number — through the type scale. */\n  height: number;\n  fontSize: string;\n  /**\n   * Gap between an axis line and its tick labels, in rendered px, through the\n   * type scale.\n   *\n   * Recharts' default of 2 is not enough. The bottom VALUE tick is centred on\n   * the x-axis line, so its text box reaches ~0.79em BELOW that line, while\n   * the category labels begin 2px under the 6px tick mark — the two collide at\n   * the axis corner, at every viewport. Each value below is ~0.8em of its own\n   * font size, which clears the value label's descender with ~6px to spare.\n   */\n  tickMargin: number;\n}\n\n/** One size step, in design px: the plot's height, its type size and its tick margin. */\ninterface SizePreset {\n  heightPx: number;\n  fontSize: (theme: Theme) => string;\n  tickMarginPx: number;\n}\n\nconst SIZE_PRESETS: Record<NonNullable<ChartProps['size']>, SizePreset> = {\n  xs: { heightPx: 200, fontSize: sxRem(12), tickMarginPx: 10 },\n  sm: { heightPx: 300, fontSize: sxRem(14), tickMarginPx: 12 },\n  md: { heightPx: 400, fontSize: sxRem(16), tickMarginPx: 14 },\n  lg: { heightPx: 500, fontSize: sxRem(18), tickMarginPx: 16 },\n  xl: { heightPx: 600, fontSize: sxRem(20), tickMarginPx: 18 },\n};\n\nconst presetOf = (size: ChartProps['size']): SizePreset => SIZE_PRESETS[size ?? 'md'] ?? SIZE_PRESETS.md;\n\n/** The plot's height in design px: the explicit `height`, else the size's preset. */\nexport const plotHeightPx = (size: ChartProps['size'], height?: number): number =>\n  height ?? presetOf(size).heightPx;\n\nexport function getSizeStyles(theme: Theme, size: ChartProps['size'], height?: number): SizeStyles {\n  const preset = presetOf(size);\n  return {\n    height: remPx(theme, plotHeightPx(size, height)),\n    fontSize: preset.fontSize(theme),\n    tickMargin: remPx(theme, preset.tickMarginPx),\n  };\n}\n\nexport function getDefaultColors(theme: Theme, variant: ChartProps['variant'], colors?: string[]): string[] {\n  if (colors) return colors;\n  if (variant === 'neon') return [...uiInk(theme).dataVizNeon.series];\n  return [\n    theme.palette.primary.main,\n    theme.palette.secondary.main,\n    theme.palette.success.main,\n    theme.palette.warning.main,\n    theme.palette.error.main,\n    theme.palette.info.main,\n  ];\n}\n\ntype SxStyles = Record<string, unknown>;\n\ninterface VariantOptions {\n  variant: NonNullable<ChartProps['variant']>;\n  color: NonNullable<ChartProps['color']>;\n  glow: boolean;\n  pulse: boolean;\n  glass: boolean;\n  gradient: boolean;\n  disabled: boolean;\n}\n\nfunction effectStyles(theme: Theme, options: VariantOptions): SxStyles {\n  const accent = accentFor(theme, options.color).main;\n  const glow = options.glow ? { boxShadow: `0 0 ${rem(theme, 30)} ${alpha(accent, 0.4)}` } : {};\n  const pulse = options.pulse\n    ? {\n        animation: 'pulse 2s infinite',\n        '@keyframes pulse': {\n          '0%': { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },\n          '70%': { boxShadow: `0 0 0 ${rem(theme, 20)} ${alpha(accent, 0)}` },\n          '100%': { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` },\n        },\n      }\n    : {};\n  return { ...glow, ...pulse };\n}\n\nfunction variantSurface(theme: Theme, options: VariantOptions): SxStyles {\n  switch (options.variant) {\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, options.glass ? 0.1 : 0.9),\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n      };\n    case 'gradient':\n      return {\n        background: options.gradient\n          ? `linear-gradient(135deg, ${alpha(accentFor(theme, options.color).light, 0.05)}, ${alpha(accentFor(theme, options.color).dark, 0.05)})`\n          : theme.palette.background.paper,\n      };\n    case 'elevated':\n      return { boxShadow: theme.shadows[4] };\n    case 'minimal':\n      return { border: 'none', backgroundColor: 'transparent' };\n    case 'neon': {\n      const neon = uiInk(theme).dataVizNeon;\n      return {\n        backgroundColor: neon.ground,\n        border: `1px solid ${alpha(neon.accent, 0.3)}`,\n        '& .recharts-cartesian-grid-horizontal line, & .recharts-cartesian-grid-vertical line': {\n          stroke: alpha(neon.accent, 0.1),\n        },\n      };\n    }\n    default:\n      return { backgroundColor: theme.palette.background.paper };\n  }\n}\n\nexport function getVariantStyles(theme: Theme, options: VariantOptions): SxStyles {\n  return {\n    borderRadius: theme.spacing(1),\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    opacity: options.disabled ? 0.5 : 1,\n    pointerEvents: options.disabled ? ('none' as const) : ('auto' as const),\n    ...effectStyles(theme, options),\n    ...variantSurface(theme, options),\n  };\n}\n\n/** Explicit series, or one series per non-axis key found in the first row. */\nexport function resolveSeries(\n  data: ChartProps['data'],\n  series: ChartSeries[] | undefined,\n  xAxisKey: string,\n  palette: string[],\n): ChartSeries[] {\n  if (series) return series;\n  if (data.length === 0) return [];\n  return Object.keys(data[0] ?? {})\n    .filter((key) => key !== xAxisKey)\n    .map((key, index) => ({\n      dataKey: key,\n      name: key,\n      color: palette[index % palette.length],\n    }));\n}\n\ninterface AxisTextStyles {\n  axisStyle: CSSProperties;\n  gridStroke: string;\n  /**\n   * Multiplier applied to `gridStroke`'s own alpha. Gridlines must read one\n   * step BELOW the card border — the border is `divider`, so half of it —\n   * without being dashed at data weight. Expressing the step as an opacity\n   * rather than a second colour keeps it derived from the theme's divider\n   * whatever form that takes (rgba, hex, or a CSS variable, which the colour\n   * helpers cannot decompose).\n   */\n  gridOpacity: number;\n}\n\nexport function getAxisStyles(theme: Theme, variant: ChartProps['variant'], fontSize: string): AxisTextStyles {\n  const neon = variant === 'neon';\n  const neonAccent = uiInk(theme).dataVizNeon.accent;\n  return {\n    axisStyle: {\n      fontSize,\n      fill: neon ? neonAccent : theme.palette.text.secondary,\n      // Ticks are columns of digits: they have to line up between rows.\n      fontVariantNumeric: 'tabular-nums',\n    },\n    gridStroke: neon ? alpha(neonAccent, 0.1) : theme.palette.divider,\n    // The neon grid is already a 10%-alpha cyan; halving it again would erase it.\n    gridOpacity: neon ? 1 : 0.5,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-5E3XZAED.js → chunk-EARWC6PD.js}

@@ -1,3 +1,7 @@
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/data-display/DataGrid/DataGrid.states.tsx
 import Box from "@mui/material/Box/index.js";
 import CircularProgress from "@mui/material/CircularProgress/index.js";
@@ -26,7 +30,7 @@ function Placeholder({
         alignItems: "center",
         flexDirection: "column",
         gap: 2,
-        height: 200
+        height: sxRem(200)
       },
       "aria-label": ariaLabel,
       role: "grid",
@@ -52,4 +56,4 @@ export {
   DataGridError,
   DataGridEmpty
 };
-//# sourceMappingURL=chunk-5E3XZAED.js.map
+//# sourceMappingURL=chunk-EARWC6PD.js.map

package/dist/chunk-EARWC6PD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataGrid/DataGrid.states.tsx"],"sourcesContent":["/**\n * The DataGrid's three PLACEHOLDER states: loading, error, and empty.\n *\n * ## Why they carry `data-testid`\n *\n * They used to not, and it was invisible: `data-testid` is destructured out of\n * the props and was re-applied only on the populated render, so a grid whose\n * first paint was any of these three states rendered with NO test id at all.\n * The grid had booted perfectly and simply could not be found — every spec that\n * landed on a screen with no rows yet waited out its whole budget on an element\n * that would only appear once somebody created a row. `stations.e2e.ts` carries\n * a paragraph about working around exactly this.\n *\n * So all four renders now agree: the id names the GRID, not the grid's data.\n * A test that asks \"did the grid mount\" gets the same answer in every state,\n * and `data-loading` / `data-error` / `data-empty` say WHICH state it is.\n */\nimport Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type React from 'react';\n\nimport { sxRem } from '../../../tokens/relative';\n\n/** Shared by all three: the same box, the same role, the same id. */\ninterface PlaceholderProps {\n  dataTestId?: string;\n  ariaLabel?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  htmlProps: React.HTMLAttributes<HTMLElement>;\n  children: React.ReactNode;\n  /** The single state flag this placeholder sets (`data-loading` etc.). */\n  flag: 'data-loading' | 'data-error' | 'data-empty';\n}\n\nfunction Placeholder({\n  dataTestId,\n  ariaLabel,\n  className,\n  style,\n  htmlProps,\n  children,\n  flag,\n}: PlaceholderProps): React.JSX.Element {\n  return (\n    <Box\n      data-ui=\"datagrid\"\n      {...{ [flag]: 'true' }}\n      data-testid={dataTestId}\n      className={className}\n      style={style}\n      sx={{\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        flexDirection: 'column',\n        gap: 2,\n        height: sxRem(200),\n      }}\n      aria-label={ariaLabel}\n      role=\"grid\"\n      {...htmlProps}\n    >\n      {children}\n    </Box>\n  );\n}\n\ntype StateProps = Omit<PlaceholderProps, 'children' | 'flag'>;\n\nexport function DataGridLoading(props: StateProps): React.JSX.Element {\n  return (\n    <Placeholder {...props} flag=\"data-loading\">\n      <CircularProgress />\n    </Placeholder>\n  );\n}\n\nexport function DataGridError(\n  props: StateProps & { error: React.ReactNode },\n): React.JSX.Element {\n  const { error, ...rest } = props;\n  return (\n    <Placeholder {...rest} flag=\"data-error\">\n      <Typography color=\"error\" variant=\"body1\">\n        {error}\n      </Typography>\n    </Placeholder>\n  );\n}\n\nexport function DataGridEmpty(\n  props: StateProps & { emptyState?: React.ReactNode; emptyText: string },\n): React.JSX.Element {\n  const { emptyState, emptyText, ...rest } = props;\n  return (\n    <Placeholder {...rest} flag=\"data-empty\">\n      {emptyState ?? (\n        <Typography variant=\"body1\" color=\"text.secondary\">\n          {emptyText}\n        </Typography>\n      )}\n    </Placeholder>\n  );\n}\n"],"mappings":";;;;;AAiBA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,gBAAgB;AA2BnB;AAVJ,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwC;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAQ;AAAA,MACP,GAAG,EAAE,CAAC,IAAI,GAAG,OAAO;AAAA,MACrB,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAI;AAAA,QACF,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,KAAK;AAAA,QACL,QAAQ,MAAM,GAAG;AAAA,MACnB;AAAA,MACA,cAAY;AAAA,MACZ,MAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAIO,SAAS,gBAAgB,OAAsC;AACpE,SACE,oBAAC,eAAa,GAAG,OAAO,MAAK,gBAC3B,8BAAC,oBAAiB,GACpB;AAEJ;AAEO,SAAS,cACd,OACmB;AACnB,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAC3B,SACE,oBAAC,eAAa,GAAG,MAAM,MAAK,cAC1B,8BAAC,cAAW,OAAM,SAAQ,SAAQ,SAC/B,iBACH,GACF;AAEJ;AAEO,SAAS,cACd,OACmB;AACnB,QAAM,EAAE,YAAY,WAAW,GAAG,KAAK,IAAI;AAC3C,SACE,oBAAC,eAAa,GAAG,MAAM,MAAK,cACzB,wBACC,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAC/B,qBACH,GAEJ;AAEJ;","names":[]}

package/dist/{chunk-NVNZFT5X.js → chunk-EIYTS5VZ.js}

@@ -3,7 +3,8 @@ import {
   uiInk
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Timeline/TimelineRow.tsx
@@ -21,7 +22,7 @@ import Stack from "@mui/material/Stack/index.js";
 import Typography from "@mui/material/Typography/index.js";
 import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var slideInAnimation = keyframes`from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); }`;
+var slideInAnimation = (theme) => keyframes`from { opacity: 0; transform: translateX(${rem(theme, -20)}); } to { opacity: 1; transform: translateX(0); }`;
 var pulseAnimation = keyframes`0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; }`;
 var TimelineItemContainer = styled(Box, {
   shouldForwardProp: (prop) => !["animated", "alternating", "index"].includes(prop)
@@ -30,7 +31,7 @@ var TimelineItemContainer = styled(Box, {
   gap: theme.spacing(2),
   position: "relative",
   ...animated && {
-    animation: `${slideInAnimation} 0.5s ease ${index * 0.1}s both`
+    animation: `${slideInAnimation(theme)} 0.5s ease ${index * 0.1}s both`
   },
   ...orientation === "vertical" && alternating && {
     flexDirection: index % 2 === 0 ? "row" : "row-reverse",
@@ -39,7 +40,7 @@ var TimelineItemContainer = styled(Box, {
   ...orientation === "horizontal" && {
     flexDirection: "column",
     alignItems: "center",
-    minWidth: 280
+    minWidth: rem(theme, 280)
   }
 }));
 var TimelineConnector = styled(Box, {
@@ -48,29 +49,29 @@ var TimelineConnector = styled(Box, {
   position: "absolute",
   background: `linear-gradient(180deg, ${theme.palette.primary.main} 0%, ${alpha(theme.palette.primary.main, 0.3)} 100%)`,
   ...orientation === "vertical" ? {
-    width: 2,
-    height: isLast ? 0 : "calc(100% + 16px)",
-    left: 19,
-    top: 40
+    width: rem(theme, 2),
+    height: isLast ? 0 : `calc(100% + ${rem(theme, 16)})`,
+    left: rem(theme, 19),
+    top: rem(theme, 40)
   } : {
-    height: 2,
-    width: isLast ? 0 : "240px",
-    top: 19,
-    left: 40
+    height: rem(theme, 2),
+    width: isLast ? 0 : rem(theme, 240),
+    top: rem(theme, 19),
+    left: rem(theme, 40)
   }
 }));
 var TimelineDot = styled(Box, {
   shouldForwardProp: (prop) => !["dotColor", "hasIcon", "animated"].includes(prop)
 })(({ theme, dotColor, hasIcon, animated }) => ({
-  width: 40,
-  height: 40,
+  width: rem(theme, 40),
+  height: rem(theme, 40),
   borderRadius: "50%",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   background: dotColor ? `linear-gradient(135deg, ${dotColor} 0%, ${alpha(dotColor, 0.8)} 100%)` : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`,
-  boxShadow: `0 4px 12px ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,
-  border: `2px solid ${theme.palette.background.paper}`,
+  boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,
+  border: `${rem(theme, 2)} solid ${theme.palette.background.paper}`,
   zIndex: 1,
   flexShrink: 0,
   ...animated && {
@@ -87,14 +88,14 @@ var TimelineCard = styled(Card, {
   ({ theme, timelineVariant, isClickable }) => ({
     flex: 1,
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
-    backdropFilter: "blur(10px)",
-    WebkitBackdropFilter: "blur(10px)",
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
     transition: theme.transitions.create(["transform", "box-shadow"]),
     ...isClickable && {
       cursor: "pointer",
       "&:hover": {
-        transform: "translateY(-2px)",
+        transform: `translateY(${rem(theme, -2)})`,
         boxShadow: theme.shadows[8]
       }
     },
@@ -113,11 +114,11 @@ var TimelineTimestamp = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,
   fontSize: rem(theme, 12),
   fontWeight: 500,
-  letterSpacing: "0.5px",
+  letterSpacing: rem(theme, 0.5),
   textTransform: "uppercase"
 }));
 var MetadataChip = styled(Chip)(({ theme }) => ({
-  height: 24,
+  height: rem(theme, 24),
   fontSize: rem(theme, 12),
   background: alpha(theme.palette.primary.main, 0.08),
   border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
@@ -266,4 +267,4 @@ var TimelineRow = ({
 export {
   TimelineRow
 };
-//# sourceMappingURL=chunk-NVNZFT5X.js.map
+//# sourceMappingURL=chunk-EIYTS5VZ.js.map

package/dist/chunk-EIYTS5VZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Timeline/TimelineRow.tsx"],"sourcesContent":["import DotIcon from '@mui/icons-material/Circle';\nimport ExpandIcon from '@mui/icons-material/ExpandMore';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Card from '@mui/material/Card/index.js';\nimport CardContent from '@mui/material/CardContent/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, keyframes, styled, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { TimelineItem, TimelineProps } from './Timeline.types';\nimport { onMedia, uiInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst slideInAnimation = (theme: Theme) =>\n  keyframes`from { opacity: 0; transform: translateX(${rem(theme, -20)}); } to { opacity: 1; transform: translateX(0); }`;\nconst pulseAnimation = keyframes`0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; }`;\n\nconst TimelineItemContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['animated', 'alternating', 'index'].includes(prop as string),\n})<{\n  animated: boolean;\n  alternating: boolean;\n  index: number;\n  orientation: 'vertical' | 'horizontal';\n}>(({ theme, animated, alternating, index, orientation }) => ({\n  display: 'flex',\n  gap: theme.spacing(2),\n  position: 'relative',\n  ...(animated && {\n    animation: `${slideInAnimation(theme)} 0.5s ease ${index * 0.1}s both`,\n  }),\n  ...(orientation === 'vertical' &&\n    alternating && {\n      flexDirection: index % 2 === 0 ? 'row' : 'row-reverse',\n      textAlign: index % 2 === 0 ? 'left' : 'right',\n    }),\n  ...(orientation === 'horizontal' && {\n    flexDirection: 'column',\n    alignItems: 'center',\n    minWidth: rem(theme, 280),\n  }),\n}));\n\nconst TimelineConnector = styled(Box, {\n  shouldForwardProp: (prop) => !['isLast'].includes(prop as string),\n})<{\n  orientation: 'vertical' | 'horizontal';\n  isLast: boolean;\n}>(({ theme, orientation, isLast }) => ({\n  position: 'absolute',\n  background: `linear-gradient(180deg, ${theme.palette.primary.main} 0%, ${alpha(theme.palette.primary.main, 0.3)} 100%)`,\n  ...(orientation === 'vertical'\n    ? {\n        width: rem(theme, 2),\n        height: isLast ? 0 : `calc(100% + ${rem(theme, 16)})`,\n        left: rem(theme, 19),\n        top: rem(theme, 40),\n      }\n    : {\n        height: rem(theme, 2),\n        width: isLast ? 0 : rem(theme, 240),\n        top: rem(theme, 19),\n        left: rem(theme, 40),\n      }),\n}));\n\nconst TimelineDot = styled(Box, {\n  shouldForwardProp: (prop) => !['dotColor', 'hasIcon', 'animated'].includes(prop as string),\n})<{ dotColor?: string; hasIcon: boolean; animated: boolean }>(({ theme, dotColor, hasIcon, animated }) => ({\n  width: rem(theme, 40),\n  height: rem(theme, 40),\n  borderRadius: '50%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  background: dotColor\n    ? `linear-gradient(135deg, ${dotColor} 0%, ${alpha(dotColor, 0.8)} 100%)`\n    : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`,\n  boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,\n  border: `${rem(theme, 2)} solid ${theme.palette.background.paper}`,\n  zIndex: 1,\n  flexShrink: 0,\n  ...(animated && {\n    animation: `${pulseAnimation} 2s ease infinite`,\n  }),\n  '& svg': {\n    fontSize: rem(theme, hasIcon ? 19.2 : 12.8),\n    color: theme.palette.background.paper,\n  },\n}));\n\nconst TimelineCard = styled(Card, {\n  shouldForwardProp: (prop) => !['timelineVariant', 'isClickable'].includes(prop as string),\n})<{ timelineVariant: 'default' | 'compact' | 'detailed'; isClickable: boolean }>(\n  ({ theme, timelineVariant, isClickable }) => ({\n    flex: 1,\n    background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,\n    backdropFilter: `blur(${rem(theme, 10)})`,\n    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n    transition: theme.transitions.create(['transform', 'box-shadow']),\n    ...(isClickable && {\n      cursor: 'pointer',\n      '&:hover': {\n        transform: `translateY(${rem(theme, -2)})`,\n        boxShadow: theme.shadows[8],\n      },\n    }),\n    ...(timelineVariant === 'compact' && {\n      padding: theme.spacing(1.5),\n      '& .MuiCardContent-root': {\n        padding: 0,\n        '&:last-child': {\n          paddingBottom: 0,\n        },\n      },\n    }),\n  }),\n);\n\nconst TimelineTimestamp = styled(Typography)(({ theme }) => ({\n  color: theme.palette.text.secondary,\n  fontSize: rem(theme, 12),\n  fontWeight: 500,\n  letterSpacing: rem(theme, 0.5),\n  textTransform: 'uppercase',\n}));\n\nconst MetadataChip = styled(Chip)(({ theme }) => ({\n  height: rem(theme, 24),\n  fontSize: rem(theme, 12),\n  background: alpha(theme.palette.primary.main, 0.08),\n  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n}));\n\n// Description, metadata chips and the action button, revealed on expand — or\n// always, in the detailed variant.\nconst TimelineDetails: React.FC<{\n  item: TimelineItem;\n  isExpanded: boolean;\n  variant: NonNullable<TimelineProps['variant']>;\n}> = ({ item, isExpanded, variant }) => {\n  const open = isExpanded || variant === 'detailed';\n\n  return (\n    <Collapse in={open}>\n      <Fade in={open}>\n        <Stack spacing={1.5} sx={{ mt: 1 }}>\n          {item.description && (\n            <Typography variant=\"body2\" color=\"text.secondary\">\n              {item.description}\n            </Typography>\n          )}\n\n          {item.metadata && (\n            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>\n              {Object.entries(item.metadata).map(([key, value]) => (\n                <MetadataChip key={key} label={`${key}: ${value}`} size=\"small\" />\n              ))}\n            </Box>\n          )}\n\n          {item.action && (\n            <Box>\n              <Button\n                size=\"small\"\n                variant=\"contained\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  item.action!.onClick();\n                }}\n                sx={(theme) => ({\n                  background: `linear-gradient(135deg, ${uiInk(theme).celebration.violet[0]} 0%, ${uiInk(theme).celebration.violet[1]} 100%)`,\n                  color: onMedia(theme),\n                })}\n              >\n                {item.action.label}\n              </Button>\n            </Box>\n          )}\n        </Stack>\n      </Fade>\n    </Collapse>\n  );\n};\n\n// Timestamp, title and the expand toggle.\nconst TimelineCardHeader: React.FC<{\n  item: TimelineItem;\n  variant: NonNullable<TimelineProps['variant']>;\n  isExpanded: boolean;\n  onExpandClick: (itemId: string, event: React.MouseEvent) => void;\n}> = ({ item, variant, isExpanded, onExpandClick }) => (\n  <Box\n    sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}\n  >\n    <Box sx={{ flex: 1 }}>\n      <TimelineTimestamp data-testid=\"timeline-timestamp\">\n        {item.timestamp}\n      </TimelineTimestamp>\n      <Typography\n        variant={variant === 'compact' ? 'body2' : 'h6'}\n        fontWeight={variant === 'compact' ? 500 : 600}\n        sx={{ mt: 0.5 }}\n      >\n        {item.title}\n      </Typography>\n    </Box>\n    {item.description && variant !== 'compact' && (\n      <IconButton\n        size=\"small\"\n        onClick={(e) => onExpandClick(item.id, e)}\n        aria-label={isExpanded ? 'Collapse item details' : 'Expand item details'}\n        sx={{\n          transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',\n          transition: 'transform 0.3s ease',\n        }}\n      >\n        <ExpandIcon />\n      </IconButton>\n    )}\n  </Box>\n);\n\n// The card beside the rail: timestamp, title, expand toggle and the collapsible\n// detail body.\nconst TimelineRowCard: React.FC<{\n  item: TimelineItem;\n  variant: NonNullable<TimelineProps['variant']>;\n  isClickable: boolean;\n  isExpanded: boolean;\n  onItemClick?: (item: TimelineItem) => void;\n  onExpandClick: (itemId: string, event: React.MouseEvent) => void;\n}> = ({ item, variant, isClickable, isExpanded, onItemClick, onExpandClick }) => (\n  <TimelineCard\n    timelineVariant={variant}\n    isClickable={isClickable}\n    onClick={isClickable ? () => onItemClick?.(item) : undefined}\n    role=\"article\"\n    aria-label={`Timeline item: ${item.title}`}\n    data-testid=\"timeline-card\"\n  >\n    <CardContent>\n      <Stack spacing={1}>\n        <TimelineCardHeader\n          item={item}\n          variant={variant}\n          isExpanded={isExpanded}\n          onExpandClick={onExpandClick}\n        />\n\n        {variant === 'compact' && item.description && (\n          <Typography variant=\"caption\" color=\"text.secondary\">\n            {item.description}\n          </Typography>\n        )}\n\n        {variant !== 'compact' && (\n          <TimelineDetails item={item} isExpanded={isExpanded} variant={variant} />\n        )}\n      </Stack>\n    </CardContent>\n  </TimelineCard>\n);\n\n// One entry: the dot and connector on the rail, and the card beside it.\nexport const TimelineRow: React.FC<{\n  item: TimelineItem;\n  index: number;\n  isLast: boolean;\n  variant: NonNullable<TimelineProps['variant']>;\n  orientation: 'vertical' | 'horizontal';\n  showConnector: boolean;\n  animated: boolean;\n  alternating: boolean;\n  isExpanded: boolean;\n  onItemClick?: (item: TimelineItem) => void;\n  onExpandClick: (itemId: string, event: React.MouseEvent) => void;\n}> = ({\n  item,\n  index,\n  isLast,\n  variant,\n  orientation,\n  showConnector,\n  animated,\n  alternating,\n  isExpanded,\n  onItemClick,\n  onExpandClick,\n}) => {\n\n    \n  // Determine if item should be clickable:\n  // - Has onItemClick callback, OR\n  // - Has description and variant is not compact (so it can be expanded)\n  const hasExpandableContent = item.description && variant !== 'compact';\n  const isClickable = !!onItemClick || !!hasExpandableContent;\n\n  return (\n    <TimelineItemContainer\n      key={item.id}\n      animated={animated}\n      alternating={alternating && orientation === 'vertical'}\n      index={index}\n      orientation={orientation}\n      data-testid=\"timeline-item-container\"\n    >\n      <Box sx={{ position: 'relative' }}>\n        <TimelineDot\n          dotColor={item.color}\n          hasIcon={!!item.icon}\n          animated={animated}\n          data-testid=\"timeline-dot\"\n        >\n          {item.icon ? (\n            <Box data-testid=\"item-icon\">{item.icon}</Box>\n          ) : (\n            <DotIcon data-testid=\"item-icon-default\" />\n          )}\n        </TimelineDot>\n        {showConnector && !isLast && (\n          <TimelineConnector\n            orientation={orientation}\n            isLast={isLast}\n            data-testid=\"timeline-connector\"\n          />\n        )}\n      </Box>\n\n      <TimelineRowCard\n        item={item}\n        variant={variant}\n        isClickable={isClickable}\n        isExpanded={isExpanded}\n        onItemClick={onItemClick}\n        onExpandClick={onExpandClick}\n      />\n    </TimelineItemContainer>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-GN5EZPSL.js → chunk-EJYJLVPK.js}

@@ -2,45 +2,53 @@ import {
   glowAnimation,
   pulseAnimation,
   shimmerAnimation
-} from "./chunk-F52N6ACD.js";
+} from "./chunk-IM4DMKH4.js";
 import {
   accentFor
 } from "./chunk-TCAQOUIB.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
 import {
   shadowInk,
   sheen
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Sheet/Sheet.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var isHorizontalPosition = (position) => position === "left" || position === "right";
 var HORIZONTAL_SIZES = {
-  xs: "min(92vw, 240px)",
-  sm: "min(92vw, 320px)",
-  md: "min(92vw, 400px)",
-  lg: "min(92vw, max(560px, 32vw))",
-  xl: "min(92vw, max(720px, 40vw))",
-  full: "100%"
+  xs: (theme) => `min(92vw, ${rem(theme, 240)})`,
+  sm: (theme) => `min(92vw, ${rem(theme, 320)})`,
+  md: (theme) => `min(92vw, ${rem(theme, 400)})`,
+  lg: (theme) => `min(92vw, max(${rem(theme, 560)}, 32vw))`,
+  xl: (theme) => `min(92vw, max(${rem(theme, 720)}, 40vw))`,
+  full: () => "100%"
 };
 var VERTICAL_SIZES = {
-  xs: "min(200px, 100%)",
-  sm: "min(300px, 100%)",
-  md: "min(400px, 100%)",
-  lg: "min(500px, 100%)",
-  xl: "min(600px, 100%)"
+  xs: (theme) => `min(${rem(theme, 200)}, 100%)`,
+  sm: (theme) => `min(${rem(theme, 300)}, 100%)`,
+  md: (theme) => `min(${rem(theme, 400)}, 100%)`,
+  lg: (theme) => `min(${rem(theme, 500)}, 100%)`,
+  xl: (theme) => `min(${rem(theme, 600)}, 100%)`
 };
-var VERTICAL_MAX_WIDTH = "min(100%, 640px)";
+var verticalMaxWidth = (theme) => `min(100%, ${rem(theme, 640)})`;
 var sizeStyles = ({
+  theme,
   position,
   size,
   isDraggableVariant,
   currentHeight
 }) => {
   if (isHorizontalPosition(position)) {
-    return { width: HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md };
+    return { width: (HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md)(theme) };
   }
   if (size === "full") return { width: "100%", height: "100%" };
-  const cross = { width: VERTICAL_MAX_WIDTH, marginInline: "auto" };
+  const cross = { width: verticalMaxWidth(theme), marginInline: "auto" };
   if (isDraggableVariant && currentHeight !== null) {
     return { ...cross, height: currentHeight };
   }
@@ -50,7 +58,7 @@ var sizeStyles = ({
     // rather than left off so the rule survives a caller who set a height on a
     // previous render, and it is what lets the panel hug what it holds.
     height: "auto",
-    maxHeight: VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md
+    maxHeight: (VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md)(theme)
   };
 };
 var toRgbTriplet = (hexColor) => {
@@ -74,10 +82,10 @@ var SURFACES = {
   draggable: ({ theme, elevation, accent }) => ({
     boxShadow: `
             ${theme.shadows[Math.min(elevation + 4, 24)]},
-            0 -2px 10px 0 ${shadowInk(theme, 0.1)}
+            ${rems(theme, 0, -2, 10, 0)} ${shadowInk(theme, 0.1)}
           `,
     border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
-    borderTop: `2px solid ${alpha(accent, 0.3)}`,
+    borderTop: `${rem(theme, 2)} solid ${alpha(accent, 0.3)}`,
     transition: theme.transitions.create(["transform", "box-shadow", "border-color"], {
       duration: theme.transitions.duration.shorter,
       easing: theme.transitions.easing.easeInOut
@@ -86,12 +94,12 @@ var SURFACES = {
   }),
   glass: ({ theme, glass }) => ({
     backgroundColor: alpha(theme.palette.background.paper, glass ? 0.75 : 0.95),
-    backdropFilter: "blur(24px) saturate(180%)",
-    WebkitBackdropFilter: "blur(24px) saturate(180%)",
+    backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
+    WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
     border: `1px solid ${alpha(theme.palette.divider, 0.15)}`,
     boxShadow: `
-            0 8px 32px 0 ${shadowInk(theme, 0.15)},
-            inset 0 0 0 1px ${sheen(theme, 0.1)}
+            ${rems(theme, 0, 8, 32, 0)} ${shadowInk(theme, 0.15)},
+            inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${sheen(theme, 0.1)}
           `
   }),
   gradient: ({ theme, color, gradient, accent }) => ({
@@ -108,7 +116,7 @@ var SURFACES = {
   elevated: ({ theme, elevation }) => ({
     boxShadow: `
             ${theme.shadows[elevation]},
-            0 20px 40px -15px ${shadowInk(theme, 0.15)}
+            ${rems(theme, 0, 20, 40, -15)} ${shadowInk(theme, 0.15)}
           `,
     transform: "translateZ(0)",
     willChange: "transform"
@@ -129,7 +137,7 @@ var shimmerOverlay = (theme) => ({
               ${sheen(theme, 0.2)},
               transparent
             )`,
-  animation: `${shimmerAnimation} 3s infinite`
+  animation: `${shimmerAnimation(theme)} 3s infinite`
 });
 var baseSurface = (input, accent) => {
   const { theme, disabled, isDragging, isAnimating, isDraggableVariant, isVerticalSheet } = input;
@@ -157,14 +165,14 @@ var variantStyles = (input) => {
     ...baseSurface(input, accent),
     // glow first, then pulse: with both set the pulse keyframes win the shared
     // `animation` slot, which is the order the original spread produced.
-    ...glow && { animation: `${glowAnimation} 2s ease-in-out infinite`, filter: "brightness(1.05)" },
-    ...pulse && { animation: `${pulseAnimation} 2s infinite`, position: "relative" },
+    ...glow && { animation: `${glowAnimation(theme)} 2s ease-in-out infinite`, filter: "brightness(1.05)" },
+    ...pulse && { animation: `${pulseAnimation(theme)} 2s infinite`, position: "relative" },
     ...rounded && roundedStyles(theme, position),
     ...(SURFACES[variant] ?? SURFACES.default)({ ...input, accent })
   };
 };
 var panelSx = (input) => {
-  const { position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } = input;
+  const { theme, position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } = input;
   return {
     // The DEFAULT, so the glow and the elevated shadow are not clipped by the
     // panel they hang off. It used to be stated last, which made it a rule
@@ -174,7 +182,7 @@ var panelSx = (input) => {
     // `left: -100%` and a full-width panel put it off-screen; a 640px one puts
     // it on the backdrop beside the sheet.
     overflow: "visible",
-    ...sizeStyles({ position, size, isDraggableVariant, currentHeight }),
+    ...sizeStyles({ theme, position, size, isDraggableVariant, currentHeight }),
     // A COLUMN, so `maxHeight` above can be a ceiling rather than a height: the
     // body is then a flex item that shrinks against it, and the scrolling falls
     // to `SheetContent` where it belongs. Without this the panel would clip a
@@ -192,4 +200,4 @@ var panelSx = (input) => {
 export {
   panelSx
 };
-//# sourceMappingURL=chunk-GN5EZPSL.js.map
+//# sourceMappingURL=chunk-EJYJLVPK.js.map

package/dist/chunk-EJYJLVPK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport { glowAnimation, pulseAnimation, shimmerAnimation } from './Sheet.animations';\nimport type { SheetProps } from './Sheet.types';\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';\nimport { shadowInk, sheen } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\nimport { accentFor } from '../../../tokens/scales';\n\ntype Position = NonNullable<SheetProps['position']>;\ntype Variant = NonNullable<SheetProps['variant']>;\ntype Size = NonNullable<SheetProps['size']>;\ntype Color = NonNullable<SheetProps['color']>;\n\nconst isHorizontalPosition = (position: Position) => position === 'left' || position === 'right';\n\n/**\n * Horizontal (left/right) sheets are viewport-aware: a design-px floor (through\n * `rem`) keeps the panel\n * usable, `…vw` lets the larger presets grow on wide screens (lg ≥32%, xl ≥40%\n * of the viewport), and the outer `min(92vw, …)` guarantees the panel never\n * overflows a small screen.\n */\nconst HORIZONTAL_SIZES: Record<Size, (theme: Theme) => string> = {\n  xs: (theme) => `min(92vw, ${rem(theme, 240)})`,\n  sm: (theme) => `min(92vw, ${rem(theme, 320)})`,\n  md: (theme) => `min(92vw, ${rem(theme, 400)})`,\n  lg: (theme) => `min(92vw, max(${rem(theme, 560)}, 32vw))`,\n  xl: (theme) => `min(92vw, max(${rem(theme, 720)}, 40vw))`,\n  full: () => '100%',\n};\n\n/**\n * `size` governs a vertical sheet's MAIN axis, and it is a CEILING rather than\n * a height: the panel is as tall as what it holds, and starts scrolling only\n * once that would pass the preset.\n *\n * It was a fixed `height`, which meant a short sheet reserved the rest of the\n * preset as dead space — a `md` sheet holding three lines and a button drew a\n * 400px panel and floated them in it. `min(…, 100%)` keeps the ceiling under\n * the viewport, which is also what MUI's own bottom paper asks for.\n *\n * `full` is absent on purpose: it is not a ceiling, it is the whole viewport,\n * and `sizeStyles` answers it before it gets here.\n */\nconst VERTICAL_SIZES: Record<Exclude<Size, 'full'>, (theme: Theme) => string> = {\n  xs: (theme) => `min(${rem(theme, 200)}, 100%)`,\n  sm: (theme) => `min(${rem(theme, 300)}, 100%)`,\n  md: (theme) => `min(${rem(theme, 400)}, 100%)`,\n  lg: (theme) => `min(${rem(theme, 500)}, 100%)`,\n  xl: (theme) => `min(${rem(theme, 600)}, 100%)`,\n};\n\n/**\n * How wide a top/bottom sheet is allowed to get — its CROSS axis, so it is one\n * rule rather than one per `size` preset.\n *\n * A bottom sheet spanning the full width is a phone layout, and it was the only\n * layout this component had: on a desktop a panel holding a sentence and one\n * button was drawn 1900px wide, with the content stranded in the middle of it.\n * 640px is Material's own ceiling for a bottom sheet above the handset\n * breakpoint, and below it `100%` gives the phone back exactly what it had.\n *\n * `fullHeight` is the documented opt-out — it expands a vertical sheet along\n * this axis — and it becomes meaningful here for the first time: it used to\n * name the behaviour every bottom sheet already had.\n */\nconst verticalMaxWidth = (theme: Theme): string => `min(100%, ${rem(theme, 640)})`;\n\ninterface SizeStyleInput {\n  theme: Theme;\n  position: Position;\n  size: Size;\n  isDraggableVariant: boolean;\n  currentHeight: number | null;\n}\n\nconst sizeStyles = ({\n  theme,\n  position,\n  size,\n  isDraggableVariant,\n  currentHeight,\n}: SizeStyleInput) => {\n  if (isHorizontalPosition(position)) {\n    return { width: (HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md)(theme) };\n  }\n\n  // `full` is not a size on the scale — it is THE WHOLE VIEWPORT, on both axes,\n  // and it has to stay that: a consumer using it for a phone takeover would\n  // otherwise get a content-hugging 640px card out of a catalog bump, with\n  // nothing in the API left to ask for what they had. So it is answered before\n  // either rule below touches it.\n  if (size === 'full') return { width: '100%', height: '100%' };\n\n  // The cross axis is the same rule whatever the preset, and the draggable\n  // variant needs it too — dragging moves the panel's height, never its width.\n  // `marginInline` is what centres it: MUI pins the bottom paper `left: 0;\n  // right: 0`, so a definite width plus auto margins resolves to the middle.\n  const cross = { width: verticalMaxWidth(theme), marginInline: 'auto' };\n\n  // The draggable variant owns its own height: the snap point decides it, so a\n  // preset would fight the drag.\n  if (isDraggableVariant && currentHeight !== null) {\n    return { ...cross, height: currentHeight };\n  }\n\n  return {\n    ...cross,\n    // A CEILING, not a height — see `VERTICAL_SIZES`. `height: auto` is stated\n    // rather than left off so the rule survives a caller who set a height on a\n    // previous render, and it is what lets the panel hug what it holds.\n    height: 'auto',\n    maxHeight: (VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md)(theme),\n  };\n};\n\n/** `r, g, b` for a hex colour, so it can feed an `rgba(var(--x), a)` custom property. */\nconst toRgbTriplet = (hexColor: string) => {\n  const hex = hexColor.replace('#', '');\n  const r = parseInt(hex.substring(0, 2), 16);\n  const g = parseInt(hex.substring(2, 4), 16);\n  const b = parseInt(hex.substring(4, 6), 16);\n  return `${r}, ${g}, ${b}`;\n};\n\nconst roundedStyles = (theme: Theme, position: Position) => {\n  const radius = theme.spacing(2);\n  const byPosition: Record<Position, string> = {\n    top: `0 0 ${radius} ${radius}`,\n    bottom: `${radius} ${radius} 0 0`,\n    left: `0 ${radius} ${radius} 0`,\n    right: `${radius} 0 0 ${radius}`,\n  };\n  return { borderRadius: byPosition[position] };\n};\n\ninterface VariantStyleInput {\n  theme: Theme;\n  variant: Variant;\n  color: Color;\n  position: Position;\n  elevation: number;\n  glow: boolean;\n  pulse: boolean;\n  glass: boolean;\n  gradient: boolean;\n  rounded: boolean;\n  disabled: boolean;\n  isDragging: boolean;\n  isAnimating: boolean;\n  isDraggableVariant: boolean;\n  isVerticalSheet: boolean;\n}\n\ntype SurfaceInput = VariantStyleInput & { accent: string };\n\n/**\n * Each variant's own additions to the shared surface — never the shared part\n * itself. Every arm of the old switch re-spread the same base, glow, pulse and\n * rounded objects before adding these few rules; `variantStyles` applies that\n * prefix once and lets the table hold only what actually differs.\n */\nconst SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>> = {\n  draggable: ({ theme, elevation, accent }) => ({\n    boxShadow: `\n            ${theme.shadows[Math.min(elevation + 4, 24)]},\n            ${rems(theme, 0, -2, 10, 0)} ${shadowInk(theme, 0.1)}\n          `,\n    border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n    borderTop: `${rem(theme, 2)} solid ${alpha(accent, 0.3)}`,\n    transition: theme.transitions.create(['transform', 'box-shadow', 'border-color'], {\n      duration: theme.transitions.duration.shorter,\n      easing: theme.transitions.easing.easeInOut,\n    }),\n    '&:hover': { borderTopColor: alpha(accent, 0.5) },\n  }),\n\n  glass: ({ theme, glass }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.75 : 0.95),\n    backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n    WebkitBackdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.15)}`,\n    boxShadow: `\n            ${rems(theme, 0, 8, 32, 0)} ${shadowInk(theme, 0.15)},\n            inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${sheen(theme, 0.1)}\n          `,\n  }),\n\n  gradient: ({ theme, color, gradient, accent }) => ({\n    background: gradient\n      ? `linear-gradient(\n                135deg,\n                ${theme.palette.background.paper} 0%,\n                ${alpha(accent, 0.08)} 50%,\n                ${alpha(accentFor(theme, color)?.dark || accent, 0.12)} 100%\n              )`\n      : theme.palette.background.paper,\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    '&::before': gradient ? shimmerOverlay(theme) : {},\n  }),\n\n  elevated: ({ theme, elevation }) => ({\n    boxShadow: `\n            ${theme.shadows[elevation]},\n            ${rems(theme, 0, 20, 40, -15)} ${shadowInk(theme, 0.15)}\n          `,\n    transform: 'translateZ(0)',\n    willChange: 'transform',\n  }),\n\n  minimal: () => ({ boxShadow: 'none', border: 'none' }),\n\n  default: () => ({}),\n};\n\n/** The sweep of light the gradient variant runs across itself. */\nconst shimmerOverlay = (theme: Theme) => ({\n  content: '\"\"',\n  position: 'absolute',\n  top: 0,\n  left: '-100%',\n  width: '100%',\n  height: '100%',\n  background: `linear-gradient(\n              90deg,\n              transparent,\n              ${sheen(theme, 0.2)},\n              transparent\n            )`,\n  animation: `${shimmerAnimation(theme)} 3s infinite`,\n});\n\n/**\n * The parts of the surface that do not depend on the variant: the paper colour,\n * the transition suppression while a drag or spring is driving the panel, the\n * disabled and cursor states, and the two colour custom properties the glow and\n * pulse keyframes read.\n */\nconst baseSurface = (input: VariantStyleInput, accent: string) => {\n  const { theme, disabled, isDragging, isAnimating, isDraggableVariant, isVerticalSheet } = input;\n  const colorRgb = toRgbTriplet(accent);\n\n  return {\n    backgroundColor: theme.palette.background.paper,\n    // A transition would fight the per-frame height writes while a drag or a\n    // snap animation is driving the panel.\n    transition:\n      !isDragging && !isAnimating\n        ? theme.transitions.create(['all'], {\n            duration: theme.transitions.duration.standard,\n            easing: theme.transitions.easing.easeInOut,\n          })\n        : 'none',\n    opacity: disabled ? 0.5 : 1,\n    pointerEvents: disabled ? ('none' as const) : ('auto' as const),\n    cursor: isDraggableVariant && isVerticalSheet ? 'grab' : 'auto',\n    '--pulse-color': colorRgb,\n    '--glow-color': colorRgb,\n    ...(isDragging && { cursor: 'grabbing' }),\n  };\n};\n\nconst variantStyles = (input: VariantStyleInput) => {\n  const { theme, variant, color, position, glow, pulse, rounded } = input;\n  const accent = accentFor(theme, color)?.main || theme.palette.primary.main;\n\n  return {\n    ...baseSurface(input, accent),\n    // glow first, then pulse: with both set the pulse keyframes win the shared\n    // `animation` slot, which is the order the original spread produced.\n    ...(glow && { animation: `${glowAnimation(theme)} 2s ease-in-out infinite`, filter: 'brightness(1.05)' }),\n    ...(pulse && { animation: `${pulseAnimation(theme)} 2s infinite`, position: 'relative' as const }),\n    ...(rounded && roundedStyles(theme, position)),\n    ...(SURFACES[variant] ?? SURFACES.default)({ ...input, accent }),\n  };\n};\n\ninterface PanelSxInput extends VariantStyleInput {\n  size: Size;\n  currentHeight: number | null;\n  fullHeight: boolean;\n  style?: React.CSSProperties;\n}\n\n/**\n * The drawer paper's complete `sx`: its size, its variant surface, the caller's\n * own `style`, and the full-height rule.\n *\n * Built here rather than in the component so the component holds no style\n * branches of its own — the cross-axis rule below is four on its own.\n */\nexport const panelSx = (input: PanelSxInput): CSSObject => {\n  const { theme, position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } =\n    input;\n\n  return {\n    // The DEFAULT, so the glow and the elevated shadow are not clipped by the\n    // panel they hang off. It used to be stated last, which made it a rule\n    // nothing could override — including `gradient`, whose own `overflow:\n    // hidden` is what keeps its shimmer inside the panel. That was invisible\n    // while every vertical sheet was full-bleed, because the sweep starts at\n    // `left: -100%` and a full-width panel put it off-screen; a 640px one puts\n    // it on the backdrop beside the sheet.\n    overflow: 'visible',\n    ...sizeStyles({ theme, position, size, isDraggableVariant, currentHeight }),\n    // A COLUMN, so `maxHeight` above can be a ceiling rather than a height: the\n    // body is then a flex item that shrinks against it, and the scrolling falls\n    // to `SheetContent` where it belongs. Without this the panel would clip a\n    // long sheet instead of scrolling it.\n    ...(isVerticalSheet ? { display: 'flex', flexDirection: 'column' } : {}),\n    ...variantStyles(input),\n    ...style,\n    // Expand only the cross axis so the chosen `size` still governs the main\n    // axis: side sheets keep their (responsive) width and go full-height;\n    // top/bottom sheets keep their height and go full-width.\n    ...(fullHeight &&\n      !isDraggableVariant &&\n      (isHorizontalPosition(position) ? { height: '100%' } : { width: '100%' })),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-F5KEWLZK.js → chunk-FC7NQ6XM.js}

@@ -1,12 +1,12 @@
 import {
   ErrorState
-} from "./chunk-DZHN5FFX.js";
+} from "./chunk-PBMCRDZI.js";
 import {
   LoadingState
-} from "./chunk-QO6QWBDI.js";
+} from "./chunk-E4TNDTWV.js";
 import {
   EmptyState
-} from "./chunk-MZMGQKT3.js";
+} from "./chunk-HN3PZTUK.js";
 
 // src/components/data-display/AsyncStateContainer/AsyncStateContainer.tsx
 import Box from "@mui/material/Box/index.js";
@@ -65,4 +65,4 @@ export {
   AsyncStateContainer,
   AsyncStateContainer_default
 };
-//# sourceMappingURL=chunk-F5KEWLZK.js.map
+//# sourceMappingURL=chunk-FC7NQ6XM.js.map

package/dist/{chunk-MISZGWO7.js → chunk-FPVYD7BO.js}

@@ -1,6 +1,6 @@
 import {
   shimmerAnimation
-} from "./chunk-F52N6ACD.js";
+} from "./chunk-IM4DMKH4.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -8,6 +8,10 @@ import {
   scrim,
   sheen
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Sheet/Sheet.parts.tsx
 import CloseIcon from "@mui/icons-material/Close";
@@ -20,8 +24,8 @@ import Typography from "@mui/material/Typography/index.js";
 import { alpha, useTheme } from "@mui/material/styles/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var handleSx = (theme, isDraggable) => ({
-  width: isDraggable ? 48 : 32,
-  height: isDraggable ? 6 : 4,
+  width: rem(theme, isDraggable ? 48 : 32),
+  height: rem(theme, isDraggable ? 6 : 4),
   backgroundColor: alpha(theme.palette.text.primary, 0.3),
   borderRadius: 3,
   transition: theme.transitions.create(["all"], {
@@ -43,15 +47,15 @@ var handleSx = (theme, isDraggable) => ({
       ${sheen(theme, 0.3)},
       transparent
     )`,
-    animation: isDraggable ? `${shimmerAnimation} 2s infinite` : "none"
+    animation: isDraggable ? `${shimmerAnimation(theme)} 2s infinite` : "none"
   },
   ...isDraggable && {
     backgroundColor: alpha(theme.palette.primary.main, 0.4),
-    boxShadow: `0 2px 4px ${alpha(theme.palette.primary.main, 0.2)}`,
+    boxShadow: `${rems(theme, 0, 2, 4)} ${alpha(theme.palette.primary.main, 0.2)}`,
     "&:hover": {
       backgroundColor: theme.palette.primary.main,
       transform: "scaleX(1.15) scaleY(1.2)",
-      boxShadow: `0 3px 6px ${alpha(theme.palette.primary.main, 0.3)}`
+      boxShadow: `${rems(theme, 0, 3, 6)} ${alpha(theme.palette.primary.main, 0.3)}`
     }
   }
 });
@@ -193,8 +197,8 @@ var SheetOverlay = (props) => {
         // is given a no-op BackdropComponent) and must sit under the panel.
         zIndex: theme.zIndex.drawer - 1,
         backgroundColor: scrim(theme, blur ? 0.6 : 0.5),
-        backdropFilter: blur ? "blur(8px) saturate(180%)" : "none",
-        WebkitBackdropFilter: blur ? "blur(8px) saturate(180%)" : "none",
+        backdropFilter: blur ? `blur(${rem(theme, 8)}) saturate(180%)` : "none",
+        WebkitBackdropFilter: blur ? `blur(${rem(theme, 8)}) saturate(180%)` : "none",
         ...style
       }
     }
@@ -207,4 +211,4 @@ export {
   SheetFooter,
   SheetOverlay
 };
-//# sourceMappingURL=chunk-MISZGWO7.js.map
+//# sourceMappingURL=chunk-FPVYD7BO.js.map