@12-apps/ui 6.34.0 → 6.35.0

package/dist/chunk-A2CTAEIS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Alert/Alert.styles.tsx"],"sourcesContent":["import Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport CheckCircle from '@mui/icons-material/CheckCircle';\nimport Warning from '@mui/icons-material/Warning';\nimport { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { sheen, softNeutral } from '../../../tokens/ink';\n\nimport type { AlertVariant } from './Alert.base';\nimport { VARIANT_ICON } from './Alert.helpers';\nimport {\n  ACTION_SLOT,\n  ALERT_EASING,\n  ALERT_PADDING_UNITS,\n  ALERT_TRANSITION_MS,\n  type AlertPalette,\n  FADE_IN,\n  GLASS,\n  GLOW,\n  GRADIENT,\n  ICON_SLOT,\n  ICON_SPIN,\n  MESSAGE_BUTTON,\n  MESSAGE_FONT_SIZE,\n  MESSAGE_GAP_UNITS,\n  MESSAGE_LINE_HEIGHT,\n  PULSE,\n  seconds,\n  SEMANTIC_SURFACE,\n  SEMANTIC_VARIANTS,\n} from './Alert.metrics';\nimport type { IconName } from '../../../icons/Icon.types';\nimport { rem } from '../../../tokens/relative';\n\nexport type { AlertPalette } from './Alert.metrics';\n\nexport const pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${PULSE.spread}px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n// Additional animations can be enabled as needed\n// const slideInAnimation = keyframes`\n//   from {\n//     transform: translateX(-100%);\n//     opacity: 0;\n//   }\n//   to {\n//     transform: translateX(0);\n//     opacity: 1;\n//   }\n// `;\n\n// const bounceIn = keyframes`\n//   0% {\n//     transform: scale(0.3);\n//     opacity: 0;\n//   }\n//   50% {\n//     transform: scale(1.05);\n//   }\n//   70% {\n//     transform: scale(0.9);\n//   }\n//   100% {\n//     transform: scale(1);\n//     opacity: 1;\n//   }\n// `;\n\n// Removed unused slideInAnimation - can be re-added if needed for future features\n\nexport const shimmerAnimation = keyframes`\n  0% {\n    background-position: -${GRADIENT.shimmerTravel}px 0;\n  }\n  100% {\n    background-position: ${GRADIENT.shimmerTravel}px 0;\n  }\n`;\n\nexport const fadeInScale = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(${FADE_IN.scale}) translateY(-${FADE_IN.lift}px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n`;\n\nexport const iconRotate = keyframes`\n  0% {\n    transform: rotate(0deg) scale(${ICON_SPIN.from});\n  }\n  50% {\n    transform: rotate(180deg) scale(${ICON_SPIN.mid});\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n`;\n\n// The MUI-themed twin of `alertPalette` in `Alert.metrics.ts`: same names,\n// same three greys for `neutral`, same fallback to `info`.\nexport const getColorFromTheme = (theme: Theme, variant: string): AlertPalette => {\n  const soft = softNeutral(theme);\n  const colorMap: Record<string, AlertPalette> = {\n    info: theme.palette.info,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    danger: theme.palette.error,\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    neutral: { main: soft.main, light: soft.light, dark: soft.dark },\n  };\n\n  return colorMap[variant] || theme.palette.info;\n};\n\n/** The shared glyph names drawn with MUI's icons; the native side draws the same names from the icon set. */\nconst VARIANT_ICONS: Partial<Record<IconName, React.ReactNode>> = {\n  Info: <Info />,\n  CheckCircle: <CheckCircle />,\n  Warning: <Warning />,\n  Error: <Error />,\n};\n\nexport const getVariantIcon = (variant: string): React.ReactNode => {\n  const name = VARIANT_ICON[variant as AlertVariant];\n  return name ? VARIANT_ICONS[name] : undefined;\n};\n\n/**\n * The room the message is given — padding, the stack's rhythm, and where the\n * icon and the close button sit relative to it.\n *\n * Extracted for the same reason {@link alertVariantStyles} and\n * {@link alertEmphasisStyles} were: `styled()`'s callback is one function, and\n * every block written inline is counted against its length by the complexity\n * gate. Keeping the layout here means the callback assembles four named pieces\n * instead of carrying all of them.\n */\nexport const alertLayoutStyles = (\n  theme: Theme,\n  colorPalette: AlertPalette,\n  animate: boolean | undefined,\n): CSSObject => ({\n  // ROOM TO READ.\n  //\n  // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert\n  // routinely carries three things stacked — a sentence, a smaller explanation,\n  // then a control — and at 6px they touched top and bottom and ran together\n  // vertically, so the whole card read as one dense block instead of as a\n  // message with parts. The generosity is what makes the structure legible; it\n  // is not decoration.\n  //\n  // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants\n  // it tight), because this is a default rather than a rule.\n  padding: theme.spacing(ALERT_PADDING_UNITS.vertical, ALERT_PADDING_UNITS.horizontal),\n\n  '.MuiAlert-message': {\n    display: 'flex',\n    flexDirection: 'column',\n    // 0.5 put a title, its explanation and a button 4px apart, which reads as a\n    // spacing bug rather than as a group. 1 separates the lines; the extra\n    // margin below goes to whatever CONTROL sits at the end, because the gap\n    // between prose and a thing you press has to be bigger than the gap between\n    // two lines of prose or the button looks like part of the text.\n    gap: theme.spacing(MESSAGE_GAP_UNITS),\n    fontSize: rem(theme, MESSAGE_FONT_SIZE),\n    lineHeight: MESSAGE_LINE_HEIGHT,\n    // No padding of its own — the root's is now doing that job, and MUI's\n    // default `8px 0` on top of it would double the vertical space.\n    padding: 0,\n    // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.\n    //\n    // `ghost` and `text` paint no background and no border — bare labels, which\n    // works on white where the surrounding page is obviously not clickable.\n    // Inside a coloured Alert it stops working: the label is one more coloured\n    // phrase among several, and a \"Cancelar\" beside two lines of prose reads as\n    // part of the prose.\n    //\n    // Only the BORDER is set, never the background or the colour, and that is\n    // what makes it safe to apply to every button rather than just the bare\n    // ones: a `solid` keeps its fill and its light label and gains a hairline\n    // in the same hue, while a `ghost` gains the whole affordance.\n    '.MuiButton-root': {\n      marginTop: theme.spacing(MESSAGE_BUTTON.marginTopUnits),\n      border: `1px solid ${alpha(colorPalette.main, MESSAGE_BUTTON.borderAlpha)}`,\n    },\n  },\n\n  '.MuiAlert-icon': {\n    transition: `transform ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`,\n    alignItems: 'center',\n    // Clear of the words rather than nearly touching them, and aligned to the\n    // FIRST line instead of centred on the whole block — an icon floating\n    // halfway down a three-line message points at nothing.\n    alignSelf: 'flex-start',\n    marginRight: theme.spacing(ICON_SLOT.marginRightUnits),\n    paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),\n    animation: animate ? `${iconRotate} ${seconds(ICON_SPIN.ms)} ease-out` : 'none',\n  },\n\n  // The close button, kept off the text it sits beside.\n  '.MuiAlert-action': {\n    alignItems: 'flex-start',\n    paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits),\n  },\n});\n\n/**\n * A semantic Alert's surface and ink.\n *\n * ## Why this is not `alpha(main, 0.1)`\n *\n * It used to be, four times over, with `color: main` for the text. Both halves\n * were wrong, and independently so.\n *\n * The fill was TRANSLUCENT. A 10% wash only reads as a banner when something\n * opaque is behind it, so the component silently depended on where a consumer\n * put it. Placed over content — a floating notice, an invite anchored above a\n * catalogue — the page came straight through and the sentence interleaved with\n * whatever it was over. That is not a faint banner; it is an unreadable one,\n * and nothing in the component said so.\n *\n * The ink was the SEVERITY HUE at body size. `#0288d1`, this library's info\n * blue, is 3.03:1 on white — under the 4.5:1 WCAG AA floor before any wash is\n * involved. So the text failed on a plain white page too, where the fill was\n * behaving exactly as intended.\n *\n * ## Why `lighten`/`darken` rather than a hand-picked pair\n *\n * These are the same transforms MUI's own `standard` Alert uses, at the same\n * ratios — the recipe this component overrode. Reusing it means an OPAQUE tint\n * with a dark ink of the same hue, contrast that holds on any surface because\n * it no longer depends on one, and a pairing already proven across MUI's\n * palette rather than eyeballed here. Both modes are handled: on a dark theme\n * the tint darkens and the ink lightens, which an alpha wash could never do\n * because it carries the seed's own lightness through unchanged.\n *\n * The border keeps an alpha — it is a hairline over the tint it belongs to, so\n * translucency there costs nothing and lets the edge follow the fill.\n *\n * The ratios live in `Alert.metrics.ts` (`SEMANTIC_SURFACE`), where the\n * native renderer reads the same three through the same colour arithmetic.\n */\nconst semanticSurface = (theme: Theme, colorPalette: AlertPalette): CSSObject => {\n  const dark = theme.palette.mode === 'dark';\n  return {\n    backgroundColor: dark\n      ? darken(colorPalette.main, SEMANTIC_SURFACE.tint.dark)\n      : lighten(colorPalette.main, SEMANTIC_SURFACE.tint.light),\n    color: dark\n      ? lighten(colorPalette.main, SEMANTIC_SURFACE.ink)\n      : darken(colorPalette.main, SEMANTIC_SURFACE.ink),\n    border: `1px solid ${alpha(colorPalette.main, SEMANTIC_SURFACE.borderAlpha)}`,\n    '.MuiAlert-icon': {\n      color: colorPalette.main,\n    },\n  };\n};\n\n// The six visual variants. Each block is spread in only when it matches, which\n// is how the original inline version read; keeping that shape here means the\n// styled() callback carries one branch instead of six. The four semantics were\n// four IDENTICAL copies of the same block — they now share one, so the next\n// change to a banner's surface cannot land on three of them.\nexport const alertVariantStyles = (\n  theme: Theme,\n  customVariant: string | undefined,\n  colorPalette: AlertPalette,\n): CSSObject => ({\n  ...(customVariant !== undefined &&\n    SEMANTIC_VARIANTS.has(customVariant as AlertVariant) &&\n    semanticSurface(theme, colorPalette)),\n\n  ...(customVariant === 'glass' && {\n    // 85%, not 10%. This is the variant that is MEANT to be see-through, and it\n    // was the same mistake in a costume: at 0.1 the blur had almost nothing to\n    // sit on, so `glass` was not frosted, it was a window. A frosted pane has to\n    // be mostly pane — the backdrop should be legible AS texture behind the\n    // text, never as competition with it.\n    backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n    backdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,\n    WebkitBackdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,\n    border: `1px solid ${alpha(theme.palette.divider, GLASS.borderAlpha)}`,\n    color: theme.palette.text.primary,\n    '.MuiAlert-icon': {\n      color: theme.palette.primary.main,\n    },\n    // Safari before 18 and Firefox with the filter disabled paint the declared\n    // alpha with nothing blurred behind it — the see-through banner this is\n    // fixing. There is no degraded frost to fall back to, so it falls back to an\n    // opaque pane: less pretty, still readable.\n    '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {\n      backgroundColor: theme.palette.background.paper,\n    },\n  }),\n\n  ...(customVariant === 'gradient' && {\n    background: `linear-gradient(${GRADIENT.angleDeg}deg, ${alpha(colorPalette.light || colorPalette.main, GRADIENT.stopAlpha)}, ${alpha(colorPalette.dark || colorPalette.main, GRADIENT.stopAlpha)})`,\n    color: theme.palette.getContrastText(colorPalette.main),\n    border: 'none',\n    position: 'relative',\n    overflow: 'hidden',\n    '.MuiAlert-icon': {\n      color: theme.palette.getContrastText(colorPalette.main),\n    },\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: `-${GRADIENT.shimmerTravel}px`,\n      width: '100%',\n      height: '100%',\n      background: `linear-gradient(90deg, transparent, ${sheen(theme, GRADIENT.shimmerAlpha)}, transparent)`,\n      animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`,\n    },\n  }),\n});\n\n/** The web's glow: a soft shadow of the hue and a touch of brightness. */\nconst glowStyles = (colorPalette: AlertPalette): CSSObject => ({\n  // No `!important`: the pointer states paint their tint as an INSET shadow on\n  // the same property, and compose this one alongside it rather than fighting\n  // it. `glowShadow` in `Alert.tsx` is the other half of that pair.\n  boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,\n  filter: `brightness(${GLOW.brightness})`,\n});\n\n/** The web's pulse: a wash of the hue over the whole card, fading out every two seconds. */\nconst pulseAfter = (colorPalette: AlertPalette): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  borderRadius: 'inherit',\n  backgroundColor: colorPalette.main,\n  opacity: PULSE.alpha,\n  animation: `${pulseAnimation} ${seconds(PULSE.ms)} infinite`,\n  pointerEvents: 'none',\n  zIndex: -1,\n});\n\n// glow and pulse combine into three distinct looks, so the combinations are\n// spelled out rather than layered — layering them would let the glow-only shadow\n// leak into the glow+pulse case. Declaration ORDER is kept as it has always\n// been, because emotion hashes the serialised block into the class name.\nexport const alertEmphasisStyles = (\n  colorPalette: AlertPalette,\n  glow: boolean,\n  pulse: boolean,\n): CSSObject => ({\n  ...(glow && !pulse && glowStyles(colorPalette)),\n\n  // Pulse animation\n  ...(pulse &&\n    !glow && {\n      position: 'relative',\n      '&::after': pulseAfter(colorPalette),\n    }),\n\n  // Both glow and pulse\n  ...(glow &&\n    pulse && {\n      position: 'relative',\n      ...glowStyles(colorPalette),\n      '&::after': pulseAfter(colorPalette),\n    }),\n});\n"],"mappings":"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","names":[]}

package/dist/{chunk-OYYCANKB.js → chunk-A6AKFPIQ.js}

@@ -4,7 +4,7 @@ import {
   radioCardSx,
   segmentButtonSx,
   segmentContainerSx
-} from "./chunk-RPBA4WH7.js";
+} from "./chunk-5SJWDABY.js";
 
 // src/components/form/RadioGroup/RadioGroup.variants.tsx
 import Box from "@mui/material/Box/index.js";
@@ -244,4 +244,4 @@ export {
   SegmentRadios,
   GroupLabel
 };
-//# sourceMappingURL=chunk-OYYCANKB.js.map
+//# sourceMappingURL=chunk-A6AKFPIQ.js.map

package/dist/{chunk-DPJZFQF2.js → chunk-AATIHNPI.js}

@@ -4,12 +4,15 @@ import {
 import {
   navItemButtonStyles,
   pulseGlow
-} from "./chunk-ACHUHT2K.js";
+} from "./chunk-CU4TF7C7.js";
 import {
   onMedia,
   shadowInk,
   uiInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/NavigationMenu/NavigationMenuItem.tsx
 import ChevronRight from "@mui/icons-material/ChevronRight";
@@ -138,7 +141,7 @@ var MenuItemLabel = ({ item, collapsed, open, hasChildren, size, variant }) => /
         height: 20,
         px: 0.75,
         borderRadius: "10px",
-        fontSize: "0.75rem",
+        fontSize: sxRem(12),
         fontWeight: 600,
         color: (theme) => onMedia(theme),
         background: (theme) => `linear-gradient(135deg, ${uiInk(theme).attention.from} 0%, ${uiInk(theme).attention.to} 100%)`,
@@ -306,4 +309,4 @@ var renderMenuItem = (item, variant = "vertical", size = "md", collapsed = false
 export {
   renderMenuItem
 };
-//# sourceMappingURL=chunk-DPJZFQF2.js.map
+//# sourceMappingURL=chunk-AATIHNPI.js.map

package/dist/chunk-AATIHNPI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/NavigationMenu/NavigationMenuItem.tsx"],"sourcesContent":["import ChevronRight from '@mui/icons-material/ChevronRight';\nimport ExpandMore from '@mui/icons-material/ExpandMore';\nimport Box from '@mui/material/Box/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Grow from '@mui/material/Grow/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItem from '@mui/material/ListItem/index.js';\nimport ListItemButton from '@mui/material/ListItemButton/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Popover from '@mui/material/Popover/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React, {  } from 'react';\n\nimport { useMenuItemState } from './NavigationMenuItem.hooks';\nimport { navItemButtonStyles, pulseGlow } from './NavigationMenu.styles';\nimport type { NavigationMenuItem } from './NavigationMenu.types';\nimport { onMedia, shadowInk, uiInk } from '../../../tokens/ink';\nimport { sxRem } from '../../../tokens/relative';\n\nconst StyledListItem = styled(ListItem, {\n  shouldForwardProp: (prop) => !['variant', 'active', 'size', 'level'].includes(prop as string) })<{ variant?: string; active?: boolean; size?: string; level?: number }>(\n  ({ theme, variant, level = 0 }) => ({\n    padding: 0,\n    ...(variant === 'horizontal' && {\n      width: 'auto' }),\n    ...(level > 0 && {\n      paddingLeft: theme.spacing(2 * level) }) }),\n);\n\nconst StyledListItemButton = styled(ListItemButton, {\n  shouldForwardProp: (prop) => !['variant', 'active', 'size', 'collapsed', 'minimal'].includes(prop as string) })<{ variant?: string; active?: boolean; size?: string; collapsed?: boolean; minimal?: boolean }>(\n  ({ theme, variant, active, size, collapsed, minimal }) => ({\n    ...navItemButtonStyles({ theme, variant, active, size, collapsed, minimal }) }),\n);\n\ninterface MenuItemRendererProps {\n  item: NavigationMenuItem;\n  variant: string;\n  size: string;\n  collapsed: boolean;\n  minimal: boolean;\n  level: number;\n  onItemClick?: (item: NavigationMenuItem) => void;\n}\n\n// Hover intent and open/anchor state live in NavigationMenuItem.hooks.\n\n// The flyout a horizontal menu opens on hover.\nconst MenuItemPopover: React.FC<{\n  anchorEl: HTMLElement | null;\n  item: NavigationMenuItem;\n  size?: string;\n  minimal?: boolean;\n  onClose: () => void;\n  onMouseEnter: () => void;\n  onMouseLeave: () => void;\n  onItemClick?: (item: NavigationMenuItem) => void;\n}> = ({ anchorEl, item, size, minimal, onClose, onMouseEnter, onMouseLeave, onItemClick }) => (\n  <Popover\n    open={Boolean(anchorEl)}\n    anchorEl={anchorEl}\n    onClose={onClose}\n    anchorOrigin={{\n      vertical: 'bottom',\n      horizontal: 'left' }}\n    transformOrigin={{\n      vertical: 'top',\n      horizontal: 'left' }}\n    disableRestoreFocus\n    sx={{\n      pointerEvents: 'none' }}\n    slotProps={{\n      paper: {\n        onMouseEnter,\n        onMouseLeave,\n        sx: {\n          pointerEvents: 'auto',\n          mt: 0.5,\n          borderRadius: 2,\n          boxShadow: (theme) => `0 12px 40px ${shadowInk(theme, 0.15)}`,\n          border: (theme) => `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n          background: (theme) =>\n            `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(theme.palette.background.default, 0.95)} 100%)`,\n          backdropFilter: 'blur(10px)',\n          minWidth: 200 } } }}\n  >\n    <List sx={{ p: 1 }}>\n      {item.children?.map((child) => {\n        const childHasChildren = child.children && child.children.length > 0;\n\n        // Only close popover when clicking leaf nodes (items without children)\n        if (childHasChildren) {\n          return renderMenuItem(child, 'vertical', size, false, minimal, 0, onItemClick);\n        }\n\n        // For leaf nodes, wrap with onClick to close the popover\n        return (\n          <Box\n            key={child.id}\n            onClick={onClose}\n          >\n            {renderMenuItem(child, 'vertical', size, false, minimal, 0, onItemClick)}\n          </Box>\n        );\n      })}\n    </List>\n  </Popover>\n);\n\n// Label, badge/chip and the expand chevron, faded out when the rail collapses.\nconst MenuItemLabel: React.FC<{\n  item: NavigationMenuItem;\n  collapsed?: boolean;\n  minimal?: boolean;\n  open: boolean;\n  hasChildren?: boolean;\n  size?: string;\n  variant?: string;\n}> = ({ item, collapsed, open, hasChildren, size, variant }) => (\n  <Fade in={!collapsed} timeout={400}>\n    <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', gap: 1 }}>\n      <ListItemText\n        primary={item.label}\n        secondary={item.description}\n        sx={{\n          flex: 1,\n          minWidth: 0, // Allows text truncation if needed\n        }}\n        slotProps={{\n          primary: {\n            variant: size === 'sm' ? 'body2' : size === 'lg' ? 'h6' : 'body1',\n            sx: {\n              fontWeight: item.active ? 600 : 400,\n              transition: 'all 0.3s ease' } },\n          secondary: {\n            sx: {\n              opacity: 0.7,\n              transition: 'all 0.3s ease' } } }}\n      />\n      {item.badge && (\n        <Box\n          component=\"span\"\n          sx={{\n            flexShrink: 0,\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            minWidth: 20,\n            height: 20,\n            px: 0.75,\n            borderRadius: '10px',\n            fontSize: sxRem(12),\n            fontWeight: 600,\n            color: (theme) => onMedia(theme),\n            background: (theme) =>\n              `linear-gradient(135deg, ${uiInk(theme).attention.from} 0%, ${uiInk(theme).attention.to} 100%)`,\n            boxShadow: (theme) => `0 2px 8px ${alpha(uiInk(theme).attention.glow, 0.4)}`,\n            animation:\n              typeof item.badge === 'number' && item.badge > 0\n                ? `${pulseGlow} 2s infinite`\n                : 'none' }}\n        >\n          {item.badge}\n        </Box>\n      )}\n      {hasChildren && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            flexShrink: 0, // Prevents expand icon from shrinking\n            transition: 'transform 0.3s ease',\n            transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}\n        >\n          {variant === 'horizontal' ? <ChevronRight fontSize=\"small\" /> : <ExpandMore />}\n        </Box>\n      )}\n    </Box>\n  </Fade>\n);\n\n// The row itself: icon, label, badge and the expand chevron.\nconst MenuItemContent: React.FC<{\n  item: NavigationMenuItem;\n  variant?: string;\n  size?: string;\n  active?: boolean;\n  collapsed?: boolean;\n  minimal?: boolean;\n  level: number;\n  open: boolean;\n  hasChildren?: boolean;\n  onClick: (event: React.MouseEvent<HTMLElement>) => void;\n  onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;\n  onMouseLeave: () => void;\n}> = ({\n  item,\n  variant,\n  size,\n  active: _active,\n  collapsed,\n  minimal,\n  level,\n  open,\n  hasChildren,\n  onClick,\n  onMouseEnter,\n  onMouseLeave }) => (\n<StyledListItem key={item.id} variant={variant} active={item.active} size={size} level={level}>\n      <StyledListItemButton\n        variant={variant}\n        active={item.active}\n        size={size}\n        collapsed={collapsed}\n        minimal={minimal}\n        disabled={item.disabled}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        {...(item.href && !hasChildren\n          ? {\n              component: 'a' as React.ElementType,\n              href: item.href,\n              target: item.target }\n          : {})}\n      >\n        {item.icon && (\n          <ListItemIcon\n            sx={{\n              minWidth: collapsed ? 0 : 40,\n              justifyContent: 'center',\n              transition: 'all 0.3s ease',\n              '& svg': {\n                filter: (theme) => (item.active ? `drop-shadow(0 2px 8px ${shadowInk(theme, 0.15)})` : 'none'),\n                transition: 'all 0.3s ease' } }}\n          >\n            <Grow in={true} timeout={600}>\n              <Box>{item.icon}</Box>\n            </Grow>\n          </ListItemIcon>\n        )}\n        {!collapsed && (\n          <MenuItemLabel\n            item={item}\n            collapsed={collapsed}\n            minimal={minimal}\n            open={open}\n            hasChildren={hasChildren}\n            size={size}\n            variant={variant}\n          />\n        )}\n      </StyledListItemButton>\n    </StyledListItem>\n);\n\nconst MenuItemRenderer: React.FC<MenuItemRendererProps> = ({\n  item,\n  variant,\n  size,\n  collapsed,\n  minimal,\n  level,\n  onItemClick }) => {\n  const {\n    open,\n    anchorEl,\n    hasChildren,\n    handleClick,\n    handleMouseEnter,\n    handleMouseLeave,\n    handlePopoverMouseEnter,\n    handlePopoverMouseLeave,\n    closePopover } = useMenuItemState({ item, variant, onItemClick });\n\n  const itemContent = (\n    <MenuItemContent\n      item={item}\n      variant={variant}\n      size={size}\n      active={item.active}\n      collapsed={collapsed}\n      minimal={minimal}\n      level={level}\n      open={open}\n      hasChildren={hasChildren}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    />\n  );\n\n  // Horizontal variant with children - use Popover\n  if (hasChildren && variant === 'horizontal') {\n    return (\n      <React.Fragment key={item.id}>\n        {itemContent}\n        <MenuItemPopover\n          anchorEl={anchorEl}\n          item={item}\n          size={size}\n          minimal={minimal}\n          onClose={closePopover}\n          onMouseEnter={handlePopoverMouseEnter}\n          onMouseLeave={handlePopoverMouseLeave}\n          onItemClick={onItemClick}\n        />\n      </React.Fragment>\n    );\n  }\n\n  // Vertical variant with children - use Collapse\n  if (hasChildren && variant !== 'horizontal') {\n    return (\n      <React.Fragment key={item.id}>\n        {itemContent}\n        {!collapsed && (\n          <Collapse in={open} timeout=\"auto\" unmountOnExit>\n            <List component=\"div\" disablePadding>\n              {item.children?.map((child) =>\n                renderMenuItem(child, variant, size, collapsed, minimal, level + 1, onItemClick),\n              )}\n            </List>\n          </Collapse>\n        )}\n      </React.Fragment>\n    );\n  }\n\n  return itemContent;\n};\n\nexport const renderMenuItem = (\n  item: NavigationMenuItem,\n  variant: string = 'vertical',\n  size: string = 'md',\n  collapsed: boolean = false,\n  minimal: boolean = false,\n  level: number = 0,\n  onItemClick?: (item: NavigationMenuItem) => void,\n): React.ReactNode => (\n    <MenuItemRenderer\n      key={item.id}\n      item={item}\n      variant={variant}\n      size={size}\n      collapsed={collapsed}\n      minimal={minimal}\n      level={level}\n      onItemClick={onItemClick}\n    />\n  );\n"],"mappings":"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","names":[]}

package/dist/{chunk-DJEGLKW3.js → chunk-AI7NVWIG.js}

@@ -1,6 +1,9 @@
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/CardKit/list-card-parts.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,7 +14,7 @@ function DetailColumns({ left, right }) {
   ] });
 }
 function Fact({ label, value }) {
-  return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", justifyContent: "space-between", gap: 2, fontSize: 13, py: 0.25 }, children: [
+  return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", justifyContent: "space-between", gap: 2, fontSize: sxRem(13), py: 0.25 }, children: [
     /* @__PURE__ */ jsx(default2, { component: "span", sx: { color: "text.secondary", flexShrink: 0 }, children: label }),
     /* @__PURE__ */ jsx(default2, { component: "span", sx: { minWidth: 0, textAlign: "right", overflowWrap: "anywhere" }, children: value })
   ] });
@@ -27,7 +30,7 @@ function Ledger({
         sx: {
           display: "flex",
           justifyContent: "space-between",
-          fontSize: 13,
+          fontSize: sxRem(13),
           color: line.tone === "info" ? "info.main" : "text.secondary"
         },
         children: [
@@ -62,7 +65,7 @@ function BodyHeading({ children }) {
     default2,
     {
       sx: {
-        fontSize: 11,
+        fontSize: sxRem(11),
         fontWeight: 700,
         letterSpacing: 0.4,
         textTransform: "uppercase",
@@ -78,14 +81,14 @@ function TagList({
   empty
 }) {
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx(default2, { sx: { fontSize: 13, color: "text.disabled" }, children: empty });
+    return /* @__PURE__ */ jsx(default2, { sx: { fontSize: sxRem(13), color: "text.disabled" }, children: empty });
   }
   return /* @__PURE__ */ jsx(default2, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: items.map((item) => /* @__PURE__ */ jsx(
     default2,
     {
       component: "span",
       sx: {
-        fontSize: 12,
+        fontSize: sxRem(12),
         px: 0.75,
         py: 0.25,
         borderRadius: 1,
@@ -106,4 +109,4 @@ export {
   BodyHeading,
   TagList
 };
-//# sourceMappingURL=chunk-DJEGLKW3.js.map
+//# sourceMappingURL=chunk-AI7NVWIG.js.map

package/dist/chunk-AI7NVWIG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/CardKit/list-card-parts.tsx"],"sourcesContent":["'use client';\n\nimport type { JSX, ReactNode } from 'react';\n\nimport { Box } from '../../../mui/Box';\n\nimport type { CardFactProps, CardLedgerLine } from './CardKit.types';\nimport { sxRem } from '../../../tokens/relative';\n\n/**\n * THE SHARED FURNITURE OF AN EXPANDED LIST-CARD BODY.\n *\n * `BaseListCard` says nothing about what goes inside a row's expanded area — it\n * spans the rails and stops, because the design belongs to the consumer. Right\n * for the card; wrong as the place where every entity in an admin app invents\n * its own two-column layout, its own label/value pair and its own ledger.\n *\n * So the four shapes that actually repeat live here, once. Nothing here knows a\n * domain: they take `ReactNode` and lay it out.\n */\n\n/** The expanded body's two-column split: detail on the left, a ledger right. */\nexport function DetailColumns({ left, right }: { left: ReactNode; right: ReactNode }): JSX.Element {\n  return (\n    <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 3 }}>\n      <Box sx={{ minWidth: 0 }}>{left}</Box>\n      <Box sx={{ minWidth: 0 }}>{right}</Box>\n    </Box>\n  );\n}\n\n/**\n * One labelled fact inside an expanded body.\n *\n * Horizontal, not stacked: the body is already a wide area with room for a\n * label beside its value, and stacking them there would ape the summary rails\n * above without their alignment.\n */\nexport function Fact({ label, value }: CardFactProps): JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, fontSize: sxRem(13), py: 0.25 }}>\n      <Box component=\"span\" sx={{ color: 'text.secondary', flexShrink: 0 }}>\n        {label}\n      </Box>\n      <Box component=\"span\" sx={{ minWidth: 0, textAlign: 'right', overflowWrap: 'anywhere' }}>\n        {value}\n      </Box>\n    </Box>\n  );\n}\n\n/**\n * A money ledger: rows of label/amount, then a ruled total.\n *\n * The total is separated by a RULE rather than by weight alone, because a\n * subtotal and a total in one column with only bold between them is the classic\n * misread — the eye lands on whichever number is larger.\n *\n * The figures arrive pre-formatted. This is a layout, and a component that\n * formatted money would be choosing a locale on the consumer's behalf.\n */\nexport function Ledger({\n  lines,\n  total,\n}: {\n  lines: CardLedgerLine[];\n  total: { label: string; value: ReactNode };\n}): JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n      {lines.map((line) => (\n        <Box\n          key={line.label}\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            fontSize: sxRem(13),\n            color: line.tone === 'info' ? 'info.main' : 'text.secondary',\n          }}\n        >\n          <Box component=\"span\">{line.label}</Box>\n          <Box component=\"span\" sx={{ fontVariantNumeric: 'tabular-nums' }}>\n            {line.value}\n          </Box>\n        </Box>\n      ))}\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          fontWeight: 700,\n          borderTop: 1,\n          borderColor: 'divider',\n          pt: 0.5,\n          mt: 0.5,\n        }}\n      >\n        <Box component=\"span\">{total.label}</Box>\n        <Box component=\"span\" sx={{ fontVariantNumeric: 'tabular-nums' }}>\n          {total.value}\n        </Box>\n      </Box>\n    </Box>\n  );\n}\n\n/** A heading inside the expanded body, for a section that needs naming. */\nexport function BodyHeading({ children }: { children: ReactNode }): JSX.Element {\n  return (\n    <Box\n      sx={{\n        fontSize: sxRem(11),\n        fontWeight: 700,\n        letterSpacing: 0.4,\n        textTransform: 'uppercase',\n        color: 'text.disabled',\n        mb: 0.5,\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * A wrapping run of small items — permission names, role names, target ids.\n *\n * The whole reason several entities earn a list card at all: a `string[]` has no\n * honest table cell. Truncated to \"3 items\" it says nothing; printed in full it\n * destroys the column. Here it simply wraps.\n */\nexport function TagList({\n  items,\n  empty,\n}: {\n  items: readonly string[];\n  /** What to show for an empty run — the consumer's sentence, no default. */\n  empty: string;\n}): JSX.Element {\n  if (items.length === 0) {\n    return <Box sx={{ fontSize: sxRem(13), color: 'text.disabled' }}>{empty}</Box>;\n  }\n  return (\n    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>\n      {items.map((item) => (\n        <Box\n          key={item}\n          component=\"span\"\n          sx={{\n            fontSize: sxRem(12),\n            px: 0.75,\n            py: 0.25,\n            borderRadius: 1,\n            bgcolor: 'action.hover',\n            color: 'text.secondary',\n            fontFamily: 'monospace',\n          }}\n        >\n          {item}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;AAwBI,SACE,KADF;AAFG,SAAS,cAAc,EAAE,MAAM,MAAM,GAAuD;AACjG,SACE,qBAACA,UAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,qBAAqB,EAAE,IAAI,OAAO,IAAI,UAAU,GAAG,KAAK,EAAE,GACpF;AAAA,wBAACA,UAAA,EAAI,IAAI,EAAE,UAAU,EAAE,GAAI,gBAAK;AAAA,IAChC,oBAACA,UAAA,EAAI,IAAI,EAAE,UAAU,EAAE,GAAI,iBAAM;AAAA,KACnC;AAEJ;AASO,SAAS,KAAK,EAAE,OAAO,MAAM,GAA+B;AACjE,SACE,qBAACA,UAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,gBAAgB,iBAAiB,KAAK,GAAG,UAAU,MAAM,EAAE,GAAG,IAAI,KAAK,GACjG;AAAA,wBAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,OAAO,kBAAkB,YAAY,EAAE,GAChE,iBACH;AAAA,IACA,oBAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,UAAU,GAAG,WAAW,SAAS,cAAc,WAAW,GACnF,iBACH;AAAA,KACF;AAEJ;AAYO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AACF,GAGgB;AACd,SACE,qBAACA,UAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,KAAK,GAC5D;AAAA,UAAM,IAAI,CAAC,SACV;AAAA,MAACA;AAAA,MAAA;AAAA,QAEC,IAAI;AAAA,UACF,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,UAAU,MAAM,EAAE;AAAA,UAClB,OAAO,KAAK,SAAS,SAAS,cAAc;AAAA,QAC9C;AAAA,QAEA;AAAA,8BAACA,UAAA,EAAI,WAAU,QAAQ,eAAK,OAAM;AAAA,UAClC,oBAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,oBAAoB,eAAe,GAC5D,eAAK,OACR;AAAA;AAAA;AAAA,MAXK,KAAK;AAAA,IAYZ,CACD;AAAA,IACD;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,aAAa;AAAA,UACb,IAAI;AAAA,UACJ,IAAI;AAAA,QACN;AAAA,QAEA;AAAA,8BAACA,UAAA,EAAI,WAAU,QAAQ,gBAAM,OAAM;AAAA,UACnC,oBAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,oBAAoB,eAAe,GAC5D,gBAAM,OACT;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGO,SAAS,YAAY,EAAE,SAAS,GAAyC;AAC9E,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU,MAAM,EAAE;AAAA,QAClB,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,eAAe;AAAA,QACf,OAAO;AAAA,QACP,IAAI;AAAA,MACN;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AASO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AACF,GAIgB;AACd,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO,oBAACA,UAAA,EAAI,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,OAAO,gBAAgB,GAAI,iBAAM;AAAA,EAC1E;AACA,SACE,oBAACA,UAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,UAAU,QAAQ,KAAK,IAAI,GACpD,gBAAM,IAAI,CAAC,SACV;AAAA,IAACA;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,IAAI;AAAA,QACF,UAAU,MAAM,EAAE;AAAA,QAClB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,cAAc;AAAA,QACd,SAAS;AAAA,QACT,OAAO;AAAA,QACP,YAAY;AAAA,MACd;AAAA,MAEC;AAAA;AAAA,IAZI;AAAA,EAaP,CACD,GACH;AAEJ;","names":["default"]}

package/dist/{chunk-O63WG6YJ.js → chunk-AJSPLHG4.js}

@@ -1,6 +1,6 @@
 import {
   TimelineRow
-} from "./chunk-HBYWUSPI.js";
+} from "./chunk-NVNZFT5X.js";
 
 // src/components/data-display/Timeline/Timeline.tsx
 import Box from "@mui/material/Box/index.js";
@@ -87,4 +87,4 @@ export {
   Timeline,
   Timeline_default
 };
-//# sourceMappingURL=chunk-O63WG6YJ.js.map
+//# sourceMappingURL=chunk-AJSPLHG4.js.map

package/dist/{chunk-CY6HHLYM.js → chunk-AQSX3YH2.js}

@@ -1,6 +1,6 @@
 import {
   STACK_BREAK
-} from "./chunk-EYPRDTWI.js";
+} from "./chunk-RORP6DWR.js";
 import {
   CARD_RADIUS,
   cardSurfaceStyles,
@@ -16,10 +16,10 @@ import {
   RAIL_GAP,
   railsTemplateFor,
   useListRails
-} from "./chunk-TAB6AIPN.js";
+} from "./chunk-JFEEV3XI.js";
 import {
   DENSITY_ROW_PADDING
-} from "./chunk-2XGGHYEA.js";
+} from "./chunk-4LQZH4PU.js";
 
 // src/components/data-display/DataViews/base-list-card-geometry.tsx
 import { useTheme } from "@mui/material/styles/index.js";
@@ -181,4 +181,4 @@ export {
   actionProps,
   rowStyles
 };
-//# sourceMappingURL=chunk-CY6HHLYM.js.map
+//# sourceMappingURL=chunk-AQSX3YH2.js.map

package/dist/{chunk-2CEV746H.js → chunk-BBXJQI4S.js}

@@ -1,3 +1,7 @@
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/form/HeaderButton/HeaderButton.tsx
 import Box from "@mui/material/Box/index.js";
 import Button from "@mui/material/Button/index.js";
@@ -30,7 +34,7 @@ function HeaderButton({
       "aria-haspopup": aria["aria-haspopup"],
       "aria-expanded": aria["aria-expanded"],
       "data-testid": dataTestId,
-      sx: { minWidth: 0, gap: 0.75, px: horizontalPad, py: 1, fontSize: "1rem", textTransform: "none" },
+      sx: { minWidth: 0, gap: 0.75, px: horizontalPad, py: 1, fontSize: sxRem(16), textTransform: "none" },
       children: [
         /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center" }, children: icon }),
         /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: labelDisplay }, children: text }),
@@ -43,4 +47,4 @@ function HeaderButton({
 export {
   HeaderButton
 };
-//# sourceMappingURL=chunk-2CEV746H.js.map
+//# sourceMappingURL=chunk-BBXJQI4S.js.map

package/dist/chunk-BBXJQI4S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/HeaderButton/HeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport type { ButtonProps } from '@mui/material/Button/index.js';\nimport type { ReactNode } from 'react';\n\nimport { sxRem } from '../../../tokens/relative';\n\ntype Breakpoint = 'sm' | 'md' | 'lg';\n\nexport interface HeaderButtonProps {\n  /** The label — shown next to the icon on wide screens, hidden (icon-only) below `collapseBelow`. */\n  text: ReactNode;\n  /** Leading icon/image — always visible. */\n  icon: ReactNode;\n  /** Optional trailing icon (e.g. a dropdown chevron) — always visible. */\n  endIcon?: ReactNode;\n  onClick?: ButtonProps['onClick'];\n  /** MUI variant. @default 'contained' */\n  variant?: ButtonProps['variant'];\n  /** MUI color. @default 'primary' */\n  color?: ButtonProps['color'];\n  disabled?: boolean;\n  /** Width below which the button collapses to icon-only. @default 'md' */\n  collapseBelow?: Breakpoint;\n  fullWidth?: boolean;\n  'aria-haspopup'?: ButtonProps['aria-haspopup'];\n  'aria-expanded'?: boolean;\n  dataTestId?: string;\n}\n\n/**\n * A page-header action that adapts to width: below `collapseBelow` it renders\n * ONLY its icon (compact, so several fit one line on phones); at/above it renders\n * the icon + text label. The accessible name is always `text`, so the icon-only\n * state stays labeled for screen readers.\n */\nexport function HeaderButton({\n  text,\n  icon,\n  endIcon,\n  onClick,\n  variant = 'contained',\n  color = 'primary',\n  disabled,\n  collapseBelow = 'md',\n  fullWidth,\n  dataTestId,\n  ...aria\n}: HeaderButtonProps): React.JSX.Element {\n  // Hide the label below the breakpoint; keep the icon(s). `gap` collapses around\n  // the display:none label, so on mobile it reads as a compact icon button.\n  const labelDisplay = { xs: 'none', [collapseBelow]: 'inline' };\n  const horizontalPad = { xs: 1, [collapseBelow]: 2 };\n  return (\n    <Button\n      variant={variant}\n      color={color}\n      size=\"medium\"\n      onClick={onClick}\n      disabled={disabled}\n      fullWidth={fullWidth}\n      aria-label={typeof text === 'string' ? text : undefined}\n      aria-haspopup={aria['aria-haspopup']}\n      aria-expanded={aria['aria-expanded']}\n      data-testid={dataTestId}\n      sx={{ minWidth: 0, gap: 0.75, px: horizontalPad, py: 1, fontSize: sxRem(16), textTransform: 'none' }}\n    >\n      <Box component=\"span\" sx={{ display: 'inline-flex', alignItems: 'center' }}>\n        {icon}\n      </Box>\n      <Box component=\"span\" sx={{ display: labelDisplay }}>\n        {text}\n      </Box>\n      {endIcon != null && (\n        <Box component=\"span\" sx={{ display: 'inline-flex', alignItems: 'center' }}>\n          {endIcon}\n        </Box>\n      )}\n    </Button>\n  );\n}\n"],"mappings":";;;;;AAEA,OAAO,SAAS;AAChB,OAAO,YAAY;AAqDf,SAaE,KAbF;AAlBG,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyC;AAGvC,QAAM,eAAe,EAAE,IAAI,QAAQ,CAAC,aAAa,GAAG,SAAS;AAC7D,QAAM,gBAAgB,EAAE,IAAI,GAAG,CAAC,aAAa,GAAG,EAAE;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY,OAAO,SAAS,WAAW,OAAO;AAAA,MAC9C,iBAAe,KAAK,eAAe;AAAA,MACnC,iBAAe,KAAK,eAAe;AAAA,MACnC,eAAa;AAAA,MACb,IAAI,EAAE,UAAU,GAAG,KAAK,MAAM,IAAI,eAAe,IAAI,GAAG,UAAU,MAAM,EAAE,GAAG,eAAe,OAAO;AAAA,MAEnG;AAAA,4BAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,eAAe,YAAY,SAAS,GACtE,gBACH;AAAA,QACA,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,aAAa,GAC/C,gBACH;AAAA,QACC,WAAW,QACV,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,eAAe,YAAY,SAAS,GACtE,mBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/{chunk-JGDS2SJZ.js → chunk-BD2GGIGS.js}

@@ -1,6 +1,6 @@
 import {
   FleetBody
-} from "./chunk-37DCYIT5.js";
+} from "./chunk-YU647YW4.js";
 import {
   FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
   FLEET_DEFAULT_STALE_AFTER_SECONDS,
@@ -11,7 +11,7 @@ import {
 } from "./chunk-ZCPSND5Y.js";
 import {
   SR_ONLY_SX
-} from "./chunk-KDIPBEVE.js";
+} from "./chunk-7BZTZ2WG.js";
 import {
   EmptyState
 } from "./chunk-MZMGQKT3.js";
@@ -113,4 +113,4 @@ export {
   FleetMap,
   FleetMap_default
 };
-//# sourceMappingURL=chunk-JGDS2SJZ.js.map
+//# sourceMappingURL=chunk-BD2GGIGS.js.map

package/dist/{chunk-SQSFMZTF.js → chunk-BLJDCMFU.js}

@@ -1,6 +1,10 @@
 import {
   ShortcutChip
-} from "./chunk-5EIW2FZY.js";
+} from "./chunk-RNEYZTE4.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/CommandPalette/CommandPaletteResults.tsx
 import RecentIcon from "@mui/icons-material/History";
@@ -48,7 +52,7 @@ var CommandItem = styled(ListItem)(({ theme, selected }) => ({
   }
 }));
 var CategoryLabel = styled(Typography)(({ theme }) => ({
-  fontSize: "0.75rem",
+  fontSize: rem(theme, 12),
   fontWeight: 600,
   color: theme.palette.text.secondary,
   textTransform: "uppercase",
@@ -76,8 +80,8 @@ var CommandRow = ({ command, index, selected, dataTestId, onSelect, onExecute })
         {
           primary: command.label,
           secondary: command.description,
-          primaryTypographyProps: { fontSize: "0.9rem", fontWeight: selected ? 500 : 400 },
-          secondaryTypographyProps: { fontSize: "0.75rem" }
+          primaryTypographyProps: { fontSize: sxRem(14.4), fontWeight: selected ? 500 : 400 },
+          secondaryTypographyProps: { fontSize: sxRem(12) }
         }
       ),
       command.shortcut && /* @__PURE__ */ jsx(ShortcutChip, { label: command.shortcut, size: "small" })
@@ -131,7 +135,7 @@ var PaletteResults = ({
   return /* @__PURE__ */ jsxs(ResultsList, { ref: listRef, "data-testid": `${dataTestId}-list`, children: [
     showRecentSection && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(CategoryLabel, { "data-testid": `${dataTestId}-group-recent`, children: [
-        /* @__PURE__ */ jsx(RecentIcon, { sx: { fontSize: 14, mr: 0.5, verticalAlign: "middle" } }),
+        /* @__PURE__ */ jsx(RecentIcon, { sx: { fontSize: sxRem(14), mr: 0.5, verticalAlign: "middle" } }),
         copy.recent
       ] }),
       recent.map(row),
@@ -147,4 +151,4 @@ var PaletteResults = ({
 export {
   PaletteResults
 };
-//# sourceMappingURL=chunk-SQSFMZTF.js.map
+//# sourceMappingURL=chunk-BLJDCMFU.js.map

package/dist/chunk-BLJDCMFU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/CommandPalette/CommandPaletteResults.tsx"],"sourcesContent":["import RecentIcon from '@mui/icons-material/History';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItem from '@mui/material/ListItem/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { ShortcutChip } from './ShortcutChip';\nimport type { PaletteCommand } from './CommandPalette.types';\nimport type { CommandPaletteCopy } from '../../../copy';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst ResultsList = styled(List)(({ theme }) => ({\n  maxHeight: 400,\n  overflowY: 'auto',\n  padding: theme.spacing(1),\n  '&::-webkit-scrollbar': {\n    width: 8,\n  },\n  '&::-webkit-scrollbar-track': {\n    background: alpha(theme.palette.action.disabled, 0.1),\n  },\n  '&::-webkit-scrollbar-thumb': {\n    background: alpha(theme.palette.primary.main, 0.3),\n    borderRadius: 4,\n    '&:hover': {\n      background: alpha(theme.palette.primary.main, 0.5),\n    },\n  },\n}));\n\nconst CommandItem = styled(ListItem)<{ selected?: boolean }>(({ theme, selected }) => ({\n  borderRadius: theme.shape.borderRadius,\n  marginBottom: theme.spacing(0.5),\n  transition: theme.transitions.create(['background-color', 'transform']),\n  cursor: 'pointer',\n  ...(selected && {\n    backgroundColor: alpha(theme.palette.primary.main, 0.12),\n    transform: 'translateX(4px)',\n    '& .MuiListItemIcon-root': {\n      color: theme.palette.primary.main,\n    },\n  }),\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.primary.main, 0.08),\n  },\n}));\n\nconst CategoryLabel = styled(Typography)(({ theme }) => ({\n  fontSize: rem(theme, 12),\n  fontWeight: 600,\n  color: theme.palette.text.secondary,\n  textTransform: 'uppercase',\n  letterSpacing: '0.1em',\n  padding: theme.spacing(1, 2, 0.5, 2),\n  marginTop: theme.spacing(1),\n}));\n\nconst NoResults = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(4, 2),\n  textAlign: 'center',\n  color: theme.palette.text.secondary,\n}));\n\nconst CommandRow: React.FC<{\n  command: PaletteCommand;\n  index: number;\n  selected: boolean;\n  dataTestId?: string;\n  onSelect: (index: number) => void;\n  onExecute: (command: PaletteCommand) => void;\n}> = ({ command, index, selected, dataTestId, onSelect, onExecute }) => (\n  <CommandItem\n    data-index={index}\n    data-testid={`${dataTestId}-item-${command.id}`}\n    selected={selected}\n    onClick={() => onExecute(command)}\n    onMouseEnter={() => onSelect(index)}\n  >\n    {command.icon && <ListItemIcon sx={{ minWidth: 40 }}>{command.icon}</ListItemIcon>}\n    <ListItemText\n      primary={command.label}\n      secondary={command.description}\n      primaryTypographyProps={{ fontSize: sxRem(14.4), fontWeight: selected ? 500 : 400 }}\n      secondaryTypographyProps={{ fontSize: sxRem(12) }}\n    />\n    {command.shortcut && <ShortcutChip label={command.shortcut} size=\"small\" />}\n  </CommandItem>\n);\n\nconst slug = (value: string) => value.toLowerCase().replace(/\\s+/g, '-');\n\n// The list, its recent section and the empty state. The running commandIndex\n// has to stay consistent across both sections, so it is threaded through here\n// rather than mutated from inside the render as it was before.\nexport const PaletteResults: React.FC<{\n  copy: CommandPaletteCopy;\n  listRef: React.Ref<globalThis.HTMLUListElement>;\n  dataTestId?: string;\n  searchQuery: string;\n  showRecent?: boolean;\n  commands: PaletteCommand[];\n  recentCommandIds: string[];\n  filteredCommands: PaletteCommand[];\n  groupedCommands: Record<string, PaletteCommand[]>;\n  selectedIndex: number;\n  onSelect: (index: number) => void;\n  onExecute: (command: PaletteCommand) => void;\n}> = ({\n  copy,\n  listRef,\n  dataTestId,\n  searchQuery,\n  showRecent,\n  commands,\n  recentCommandIds,\n  filteredCommands,\n  groupedCommands,\n  selectedIndex,\n  onSelect,\n  onExecute,\n}) => {\n  if (filteredCommands.length === 0) {\n    return (\n      <NoResults data-testid={`${dataTestId}-no-results`}>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          No commands found for \"{searchQuery}\"\n        </Typography>\n        <Typography variant=\"caption\" color=\"text.disabled\" sx={{ mt: 1 }}>\n          {copy.tryAnotherTerm}\n        </Typography>\n      </NoResults>\n    );\n  }\n\n  const showRecentSection = !searchQuery && showRecent && recentCommandIds.length > 0;\n  const recent = showRecentSection\n    ? (recentCommandIds\n        .map((id) => commands.find((command) => command.id === id))\n        .filter(Boolean) as PaletteCommand[])\n    : [];\n\n  // One running index across both sections, so keyboard selection lines up with\n  // what is on screen.\n  let commandIndex = 0;\n  const row = (command: PaletteCommand) => {\n    const index = commandIndex++;\n    return (\n      <CommandRow\n        key={command.id}\n        command={command}\n        index={index}\n        selected={index === selectedIndex}\n        dataTestId={dataTestId}\n        onSelect={onSelect}\n        onExecute={onExecute}\n      />\n    );\n  };\n\n  const showCategoryLabels = Object.keys(groupedCommands).length > 1;\n\n  return (\n    <ResultsList ref={listRef} data-testid={`${dataTestId}-list`}>\n      {showRecentSection && (\n        <>\n          <CategoryLabel data-testid={`${dataTestId}-group-recent`}>\n            <RecentIcon sx={{ fontSize: sxRem(14), mr: 0.5, verticalAlign: 'middle' }} />\n            {copy.recent}\n          </CategoryLabel>\n          {recent.map(row)}\n          {filteredCommands.length > recentCommandIds.length && <Divider sx={{ my: 1 }} />}\n        </>\n      )}\n\n      {Object.entries(groupedCommands).map(([category, categoryCommands]) => (\n        <Box key={category} data-testid={`${dataTestId}-group-${slug(category)}`}>\n          {showCategoryLabels && (\n            <CategoryLabel data-testid={`${dataTestId}-group-label-${slug(category)}`}>\n              {category}\n            </CategoryLabel>\n          )}\n          {categoryCommands.map(row)}\n        </Box>\n      ))}\n    </ResultsList>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-PYPFDRX4.js → chunk-BNU4RLEC.js}

@@ -1,39 +1,44 @@
 import {
   getSizeStyles
-} from "./chunk-3CBL5FWS.js";
+} from "./chunk-7HFGVT3G.js";
 import {
   BADGE_CONTENT_GAP,
   BADGE_SIZES
 } from "./chunk-PYC4CWCQ.js";
 import {
-  px
-} from "./chunk-PE4ZW3IA.js";
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Badge/BadgeContent.tsx
 import CloseIcon from "@mui/icons-material/Close";
 import IconButton from "@mui/material/IconButton/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
 import { jsx } from "react/jsx-runtime";
 var CLOSE_ICON_SIZES = Object.fromEntries(
-  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, px(metrics.closeIconSize)])
+  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, metrics.closeIconSize])
 );
 var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;
 var BadgeIcon = ({
   icon,
   size,
   testId
-}) => /* @__PURE__ */ jsx(
-  "span",
-  {
-    "data-testid": testId,
-    style: {
-      fontSize: getSizeStyles(size).iconSize,
-      display: "inline-flex",
-      alignItems: "center"
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-testid": testId,
+      style: {
+        fontSize: rem(theme, getSizeStyles(size).step.iconSize),
+        display: "inline-flex",
+        alignItems: "center"
+      },
+      children: icon
     },
-    children: icon
-  },
-  "icon"
-);
+    "icon"
+  );
+};
 var BadgeCloseButton = ({
   size,
   testId,
@@ -48,7 +53,7 @@ var BadgeCloseButton = ({
       p: 0,
       ml: 0.5,
       color: "inherit",
-      "& svg": { fontSize: CLOSE_ICON_SIZES[size] ?? CLOSE_ICON_SIZES.lg },
+      "& svg": { fontSize: sxRem(CLOSE_ICON_SIZES[size] ?? BADGE_SIZES.lg.closeIconSize) },
       "&:hover": { opacity: 0.8 }
     },
     children: /* @__PURE__ */ jsx(CloseIcon, {})
@@ -85,4 +90,4 @@ var buildBadgeContent = ({
 export {
   buildBadgeContent
 };
-//# sourceMappingURL=chunk-PYPFDRX4.js.map
+//# sourceMappingURL=chunk-BNU4RLEC.js.map

package/dist/chunk-BNU4RLEC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/BadgeContent.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nimport { BADGE_CONTENT_GAP, BADGE_SIZES } from './Badge.metrics';\nimport { getSizeStyles } from './Badge.styles';\nimport type { BadgeSize } from './Badge.types';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n// Derived from the shared metrics: `xl` takes `lg`'s glyph, which is what the\n// hand-written map did through its `?? CLOSE_ICON_SIZES.lg` fallback.\nconst CLOSE_ICON_SIZES: Record<string, number> = Object.fromEntries(\n  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, metrics.closeIconSize]),\n);\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;\n\nconst BadgeIcon: FC<{ icon: ReactNode; size: BadgeSize; testId: string }> = ({\n  icon,\n  size,\n  testId,\n}) => {\n  const theme = useTheme();\n  return (\n    <span\n      key=\"icon\"\n      data-testid={testId}\n      style={{\n        fontSize: rem(theme, getSizeStyles(size).step.iconSize),\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n    >\n      {icon}\n    </span>\n  );\n};\n\nconst BadgeCloseButton: FC<{ size: BadgeSize; testId: string; onClose: (e: React.MouseEvent) => void }> = ({\n  size,\n  testId,\n  onClose,\n}) => (\n  <IconButton\n    key=\"close\"\n    size=\"small\"\n    onClick={onClose}\n    data-testid={testId}\n    sx={{\n      p: 0,\n      ml: 0.5,\n      color: 'inherit',\n      '& svg': { fontSize: sxRem(CLOSE_ICON_SIZES[size] ?? BADGE_SIZES.lg.closeIconSize) },\n      '&:hover': { opacity: 0.8 },\n    }}\n  >\n    <CloseIcon />\n  </IconButton>\n);\n\n// The badge's inner run: optional icon, the content itself, optional close\n// button. A dot badge shows none of it.\nexport const buildBadgeContent = ({\n  variant,\n  size,\n  icon,\n  closable,\n  dataTestId,\n  baseContent,\n  onClose,\n}: {\n  variant: string;\n  size: BadgeSize;\n  icon?: ReactNode;\n  closable?: boolean;\n  dataTestId?: string;\n  baseContent: ReactNode;\n  onClose: (e: React.MouseEvent) => void;\n}): ReactNode => {\n  if (variant === 'dot') return '';\n\n  const testId = makeTestId(dataTestId);\n  const parts: ReactNode[] = [];\n\n  if (icon) parts.push(<BadgeIcon key=\"icon\" icon={icon} size={size} testId={testId('icon')} />);\n\n  if (baseContent !== null && baseContent !== undefined) {\n    parts.push(\n      <span key=\"content\" data-testid={testId('content')}>\n        {baseContent}\n      </span>,\n    );\n  }\n\n  if (closable && !variant.includes('dot')) {\n    parts.push(\n      <BadgeCloseButton key=\"close\" size={size} testId={testId('close')} onClose={onClose} />,\n    );\n  }\n\n  if (parts.length === 0) return null;\n\n  return (\n    <span style={{ display: 'inline-flex', alignItems: 'center', gap: `${BADGE_CONTENT_GAP}px` }}>{parts}</span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AA2BrB;AAhBJ,IAAM,mBAA2C,OAAO;AAAA,EACtD,OAAO,QAAQ,WAAW,EAAE,IAAI,CAAC,CAAC,MAAM,OAAO,MAAM,CAAC,MAAM,QAAQ,aAAa,CAAC;AACpF;AAEA,IAAM,aACJ,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,SAAS,MAAM;AAE5D,IAAM,YAAsE,CAAC;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa;AAAA,MACb,OAAO;AAAA,QACL,UAAU,IAAI,OAAO,cAAc,IAAI,EAAE,KAAK,QAAQ;AAAA,QACtD,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,MAEC;AAAA;AAAA,IARG;AAAA,EASN;AAEJ;AAEA,IAAM,mBAAoG,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IAEC,MAAK;AAAA,IACL,SAAS;AAAA,IACT,eAAa;AAAA,IACb,IAAI;AAAA,MACF,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,SAAS,EAAE,UAAU,MAAM,iBAAiB,IAAI,KAAK,YAAY,GAAG,aAAa,EAAE;AAAA,MACnF,WAAW,EAAE,SAAS,IAAI;AAAA,IAC5B;AAAA,IAEA,8BAAC,aAAU;AAAA;AAAA,EAZP;AAaN;AAKK,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAQiB;AACf,MAAI,YAAY,MAAO,QAAO;AAE9B,QAAM,SAAS,WAAW,UAAU;AACpC,QAAM,QAAqB,CAAC;AAE5B,MAAI,KAAM,OAAM,KAAK,oBAAC,aAAqB,MAAY,MAAY,QAAQ,OAAO,MAAM,KAApD,MAAuD,CAAE;AAE7F,MAAI,gBAAgB,QAAQ,gBAAgB,QAAW;AACrD,UAAM;AAAA,MACJ,oBAAC,UAAmB,eAAa,OAAO,SAAS,GAC9C,yBADO,SAEV;AAAA,IACF;AAAA,EACF;AAEA,MAAI,YAAY,CAAC,QAAQ,SAAS,KAAK,GAAG;AACxC,UAAM;AAAA,MACJ,oBAAC,oBAA6B,MAAY,QAAQ,OAAO,OAAO,GAAG,WAA7C,OAA+D;AAAA,IACvF;AAAA,EACF;AAEA,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SACE,oBAAC,UAAK,OAAO,EAAE,SAAS,eAAe,YAAY,UAAU,KAAK,GAAG,iBAAiB,KAAK,GAAI,iBAAM;AAEzG;","names":[]}

package/dist/{chunk-7WK2L3ZO.js → chunk-BO2SDMNQ.js}

@@ -1,6 +1,6 @@
 import {
   ConfirmActionDialog
-} from "./chunk-GPUYB3ST.js";
+} from "./chunk-VZAGBDZ2.js";
 import {
   useConfirmAction
 } from "./chunk-EMYESBIT.js";
@@ -43,4 +43,4 @@ function useRowConfirm({
 export {
   useRowConfirm
 };
-//# sourceMappingURL=chunk-7WK2L3ZO.js.map
+//# sourceMappingURL=chunk-BO2SDMNQ.js.map

package/dist/{chunk-ZSRLRDTP.js → chunk-BXAL7OIS.js}

@@ -11,6 +11,9 @@ import {
   absoluteInk,
   uiInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/form/CategorySelect/CategorySelect.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
@@ -51,7 +54,7 @@ var triggerSx = (theme, selected, open) => {
     background: selected ? brand.soft : theme.palette.background.paper,
     color: selected ? brand.ink : theme.palette.text.primary,
     font: "inherit",
-    fontSize: 13,
+    fontSize: rem(theme, 13),
     cursor: "pointer",
     maxWidth: "100%",
     transition: "border-color .12s, box-shadow .12s",
@@ -67,7 +70,7 @@ var triggerSx = (theme, selected, open) => {
 };
 var triggerCountSx = (theme) => ({
   fontWeight: 600,
-  fontSize: 11,
+  fontSize: rem(theme, 11),
   lineHeight: 1,
   background: theme.palette.primary.main,
   color: theme.palette.primary.contrastText,
@@ -140,7 +143,7 @@ var pinnedSx = (theme) => ({
 });
 var pinnedLabelSx = (theme) => ({
   fontWeight: 600,
-  fontSize: 10,
+  fontSize: rem(theme, 10),
   lineHeight: 1,
   letterSpacing: ".08em",
   textTransform: "uppercase",
@@ -160,7 +163,7 @@ var chipSx = (theme) => {
     display: "inline-flex",
     alignItems: "center",
     gap: "5px",
-    fontSize: 12,
+    fontSize: rem(theme, 12),
     background: brand.soft,
     color: brand.ink,
     border: `1px solid ${brand.edge}`,
@@ -178,7 +181,7 @@ var chipSx = (theme) => {
       display: "grid",
       placeItems: "center",
       opacity: 0.65,
-      fontSize: 13,
+      fontSize: rem(theme, 13),
       lineHeight: 1,
       "&:hover": { background: alpha(theme.palette.primary.main, 0.16), opacity: 1 }
     }
@@ -219,12 +222,12 @@ var rowNameSx = (theme, isCategory) => ({
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis",
-  fontSize: 13.5,
+  fontSize: rem(theme, 13.5),
   fontWeight: isCategory ? 600 : 450,
   color: isCategory ? theme.palette.text.primary : theme.palette.text.secondary
 });
 var rowMetaSx = (theme, selected) => ({
-  font: "500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace",
+  font: `500 ${rem(theme, 11)}/1 ui-monospace, SFMono-Regular, Menlo, monospace`,
   color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
   fontWeight: selected ? 600 : 500,
   flex: "0 0 auto"
@@ -279,7 +282,7 @@ var radioSx = (theme, on) => ({
 });
 var sectionHeadSx = (theme) => ({
   fontWeight: 600,
-  fontSize: 10,
+  fontSize: rem(theme, 10),
   lineHeight: 1,
   letterSpacing: ".08em",
   textTransform: "uppercase",
@@ -302,10 +305,10 @@ var emptySx = (theme) => ({
   "& strong": {
     display: "block",
     color: theme.palette.text.primary,
-    fontSize: 13.5,
+    fontSize: rem(theme, 13.5),
     marginBottom: "4px"
   },
-  "& p": { margin: "0 0 12px", fontSize: 12.5, lineHeight: 1.5 }
+  "& p": { margin: "0 0 12px", fontSize: rem(theme, 12.5), lineHeight: 1.5 }
 });
 var skeletonSx = {
   height: METRICS.rowHeight,
@@ -341,4 +344,4 @@ export {
   emptySx,
   skeletonSx
 };
-//# sourceMappingURL=chunk-ZSRLRDTP.js.map
+//# sourceMappingURL=chunk-BXAL7OIS.js.map