@12-apps/ui 6.37.0 → 6.38.0

package/dist/{chunk-6QLPSMTA.js → chunk-XEWMY4ZM.js}

@@ -17,62 +17,63 @@ import {
   swingAnimation,
   translateAnimation,
   wobbleAnimation
-} from "./chunk-3T5Z5HXF.js";
+} from "./chunk-KM3Y5TCG.js";
 import {
   neutralTones,
   shadowInk,
   sheen
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var sizeConfigs = {
-  xs: { size: 12, glyph: 10 },
-  sm: { size: 24, glyph: 20 },
-  md: { size: 32, glyph: 28 },
-  lg: { size: 48, glyph: 44 },
-  xl: { size: 64, glyph: 60 }
+  xs: { ring: 12, glyph: 10 },
+  sm: { ring: 24, glyph: 20 },
+  md: { ring: 32, glyph: 28 },
+  lg: { ring: 48, glyph: 44 },
+  xl: { ring: 64, glyph: 60 }
 };
 var ANIMATIONS = {
-  rotate: { keyframes: `${rotateAnimation}`, easing: "linear", scale: 1 },
-  pulse: { keyframes: `${pulseAnimation}`, easing: "ease-in-out", scale: 1 },
-  translate: { keyframes: `${translateAnimation}`, easing: "ease-in-out", scale: 1 },
-  bounce: { keyframes: `${bounceAnimation}`, easing: "ease-in-out", scale: 1 },
-  shake: { keyframes: `${shakeAnimation}`, easing: "ease-in-out", scale: 1 },
-  flip: { keyframes: `${flipAnimation}`, easing: "ease-in-out", scale: 1 },
-  spin: { keyframes: `${spinAnimation}`, easing: "ease-in-out", scale: 1 },
-  fadeInOut: { keyframes: `${fadeInOutAnimation}`, easing: "ease-in-out", scale: 1 },
-  heartbeat: { keyframes: `${heartbeatAnimation}`, easing: "ease-in-out", scale: 1 },
-  wobble: { keyframes: `${wobbleAnimation}`, easing: "ease-in-out", scale: 1 },
-  morph: { keyframes: `${morphAnimation}`, easing: "ease-in-out", scale: 1 },
-  swing: { keyframes: `${swingAnimation}`, easing: "ease-in-out", scale: 1 },
-  jello: { keyframes: `${jelloAnimation}`, easing: "ease-in-out", scale: 1 },
-  float: { keyframes: `${floatAnimation}`, easing: "ease-in-out", scale: 2 },
-  neonFlicker: { keyframes: `${neonFlickerAnimation}`, easing: "ease-in-out", scale: 2 },
-  breathe: { keyframes: `${breatheAnimation}`, easing: "ease-in-out", scale: 1.5 }
+  rotate: { keyframes: () => `${rotateAnimation}`, easing: "linear", scale: 1 },
+  pulse: { keyframes: () => `${pulseAnimation}`, easing: "ease-in-out", scale: 1 },
+  translate: { keyframes: (theme) => `${translateAnimation(theme)}`, easing: "ease-in-out", scale: 1 },
+  bounce: { keyframes: (theme) => `${bounceAnimation(theme)}`, easing: "ease-in-out", scale: 1 },
+  shake: { keyframes: (theme) => `${shakeAnimation(theme)}`, easing: "ease-in-out", scale: 1 },
+  flip: { keyframes: (theme) => `${flipAnimation(theme)}`, easing: "ease-in-out", scale: 1 },
+  spin: { keyframes: () => `${spinAnimation}`, easing: "ease-in-out", scale: 1 },
+  fadeInOut: { keyframes: () => `${fadeInOutAnimation}`, easing: "ease-in-out", scale: 1 },
+  heartbeat: { keyframes: () => `${heartbeatAnimation}`, easing: "ease-in-out", scale: 1 },
+  wobble: { keyframes: (theme) => `${wobbleAnimation(theme)}`, easing: "ease-in-out", scale: 1 },
+  morph: { keyframes: () => `${morphAnimation}`, easing: "ease-in-out", scale: 1 },
+  swing: { keyframes: () => `${swingAnimation}`, easing: "ease-in-out", scale: 1 },
+  jello: { keyframes: () => `${jelloAnimation}`, easing: "ease-in-out", scale: 1 },
+  float: { keyframes: (theme) => `${floatAnimation(theme)}`, easing: "ease-in-out", scale: 2 },
+  neonFlicker: { keyframes: (theme) => `${neonFlickerAnimation(theme)}`, easing: "ease-in-out", scale: 2 },
+  breathe: { keyframes: () => `${breatheAnimation}`, easing: "ease-in-out", scale: 1.5 }
 };
-var animationFor = (variant, duration, delay, loop) => {
+var animationFor = (theme, variant, duration, delay, loop) => {
   const spec = ANIMATIONS[variant];
   if (!spec) return "none";
   const iterationCount = loop ? "infinite" : "1";
-  return `${spec.keyframes} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : "0s"}`;
+  return `${spec.keyframes(theme)} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : "0s"}`;
 };
 var SHADOWS = {
-  soft: (theme) => `0 4px 20px ${shadowInk(theme, 0.15)}`,
-  hard: (theme) => `4px 4px 0px ${shadowInk(theme, 0.25)}`,
-  elevated: (theme) => `0 10px 40px ${shadowInk(theme, 0.2)}, 0 2px 10px ${shadowInk(theme, 0.1)}`
+  soft: (theme) => `0 ${rems(theme, 4, 20)} ${shadowInk(theme, 0.15)}`,
+  hard: (theme) => `${rems(theme, 4, 4)} 0px ${shadowInk(theme, 0.25)}`,
+  elevated: (theme) => `0 ${rems(theme, 10, 40)} ${shadowInk(theme, 0.2)}, 0 ${rems(theme, 2, 10)} ${shadowInk(theme, 0.1)}`
 };
 var effectStyles = (theme, flags, animation, color) => {
   const { $glass, $metallic, $gradient, $neon, $holographic } = flags;
   return {
     ...$glass && {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,
-      backdropFilter: "blur(10px)",
+      backdropFilter: `blur(${rem(theme, 10)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-      boxShadow: `inset 0 1px 1px ${sheen(theme, 0.3)}, 0 8px 32px ${shadowInk(theme, 0.1)}`
+      boxShadow: `inset 0 ${rems(theme, 1, 1)} ${sheen(theme, 0.3)}, 0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.1)}`
     },
     ...$metallic && {
       background: `linear-gradient(145deg,
@@ -83,9 +84,9 @@ var effectStyles = (theme, flags, animation, color) => {
       ${neutralTones(theme).subtle} 100%)`,
       backgroundSize: "200% 200%",
       animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,
-      boxShadow: `inset 0 2px 4px ${sheen(theme, 0.5)},
-                inset 0 -2px 4px ${shadowInk(theme, 0.3)},
-                0 4px 8px ${shadowInk(theme, 0.2)}`
+      boxShadow: `inset 0 ${rems(theme, 2, 4)} ${sheen(theme, 0.5)},
+                inset 0 ${rems(theme, -2, 4)} ${shadowInk(theme, 0.3)},
+                0 ${rems(theme, 4, 8)} ${shadowInk(theme, 0.2)}`
     },
     ...$gradient && {
       background: `linear-gradient(135deg,
@@ -96,9 +97,9 @@ var effectStyles = (theme, flags, animation, color) => {
     },
     ...$neon && {
       color,
-      textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,
+      textShadow: `0 0 ${rem(theme, 10)} ${color}, 0 0 ${rem(theme, 20)} ${color}, 0 0 ${rem(theme, 30)} ${color}`,
       filter: `brightness(1.2) contrast(1.2)`,
-      animation: `${animation}, ${neonFlickerAnimation} 3s ease-in-out infinite`
+      animation: `${animation}, ${neonFlickerAnimation(theme)} 3s ease-in-out infinite`
     },
     ...$holographic && {
       background: `linear-gradient(45deg,
@@ -108,7 +109,7 @@ var effectStyles = (theme, flags, animation, color) => {
       ${theme.palette.warning.main} 75%,
       ${theme.palette.primary.main} 100%)`,
       backgroundSize: "400% 400%",
-      animation: `${animation}, ${floatAnimation} 6s ease-in-out infinite`,
+      animation: `${animation}, ${floatAnimation(theme)} 6s ease-in-out infinite`,
       backgroundClip: "text",
       WebkitBackgroundClip: "text",
       WebkitTextFillColor: "transparent",
@@ -120,10 +121,10 @@ var effectStyles = (theme, flags, animation, color) => {
       "&::before": {
         content: '""',
         position: "absolute",
-        inset: -2,
+        inset: rem(theme, -2),
         borderRadius: "50%",
         background: "inherit",
-        filter: "blur(10px)",
+        filter: `blur(${rem(theme, 10)})`,
         opacity: 0.5,
         zIndex: -1
       }
@@ -147,14 +148,18 @@ var iconSx = (theme, flags) => {
   } = flags;
   const color = $customColor || theme.palette.primary.main;
   const glowColor = $glowColor || color;
-  const animation = animationFor($animationVariant, $duration, $delay, $loop);
-  const glyphSize = { fontSize: rem(theme, $fontSize), width: $fontSize, height: $fontSize };
+  const animation = animationFor(theme, $animationVariant, $duration, $delay, $loop);
+  const glyphSize = {
+    fontSize: rem(theme, $fontSize),
+    width: rem(theme, $fontSize),
+    height: rem(theme, $fontSize)
+  };
   return {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    width: $size,
-    height: $size,
+    width: rem(theme, $size),
+    height: rem(theme, $size),
     color,
     animation,
     position: "relative",
@@ -166,13 +171,13 @@ var iconSx = (theme, flags) => {
       "&::before": {
         content: '""',
         position: "absolute",
-        inset: -8,
+        inset: rem(theme, -8),
         borderRadius: "50%",
         background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,
-        animation: `${glowPulseAnimation} ${$duration * 1.2}s ease-in-out infinite`,
+        animation: `${glowPulseAnimation(theme)} ${$duration * 1.2}s ease-in-out infinite`,
         zIndex: -1
       },
-      filter: `drop-shadow(0 0 8px ${alpha(glowColor, 0.5)})`
+      filter: `drop-shadow(0 0 ${rem(theme, 8)} ${alpha(glowColor, 0.5)})`
     },
     ...effectStyles(theme, flags, animation, color),
     ...$ripple && {
@@ -181,7 +186,7 @@ var iconSx = (theme, flags) => {
         position: "absolute",
         inset: 0,
         borderRadius: "50%",
-        border: `2px solid ${color}`,
+        border: `${rem(theme, 2)} solid ${color}`,
         animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`
       }
     },
@@ -198,4 +203,4 @@ export {
   sizeConfigs,
   iconSx
 };
-//# sourceMappingURL=chunk-6QLPSMTA.js.map
+//# sourceMappingURL=chunk-XEWMY4ZM.js.map

package/dist/chunk-XEWMY4ZM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  bounceAnimation,\n  breatheAnimation,\n  fadeInOutAnimation,\n  flipAnimation,\n  floatAnimation,\n  glowPulseAnimation,\n  heartbeatAnimation,\n  jelloAnimation,\n  morphAnimation,\n  neonFlickerAnimation,\n  pulseAnimation,\n  rippleAnimation,\n  rotateAnimation,\n  shakeAnimation,\n  spinAnimation,\n  swingAnimation,\n  translateAnimation,\n  wobbleAnimation,\n} from './AnimatedIcon.animations';\nimport type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';\nimport { neutralTones, shadowInk, sheen } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\n/** Per size: the ring's edge and the glyph's edge (its font size, width and height), in design px. */\nexport const sizeConfigs: Record<AnimationSize, { ring: number; glyph: number }> = {\n  xs: { ring: 12, glyph: 10 },\n  sm: { ring: 24, glyph: 20 },\n  md: { ring: 32, glyph: 28 },\n  lg: { ring: 48, glyph: 44 },\n  xl: { ring: 64, glyph: 60 },\n};\n\n/**\n * Every variant produces the same shorthand — keyframes, duration, easing,\n * iteration count, delay — so only the three things that actually differ are\n * tabulated. `scale` multiplies the caller's duration for the variants that\n * read as slower than the rest.\n */\nconst ANIMATIONS: Record<string, { keyframes: (theme: Theme) => string; easing: string; scale: number }> = {\n  rotate: { keyframes: () => `${rotateAnimation}`, easing: 'linear', scale: 1 },\n  pulse: { keyframes: () => `${pulseAnimation}`, easing: 'ease-in-out', scale: 1 },\n  translate: { keyframes: (theme) => `${translateAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },\n  bounce: { keyframes: (theme) => `${bounceAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },\n  shake: { keyframes: (theme) => `${shakeAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },\n  flip: { keyframes: (theme) => `${flipAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },\n  spin: { keyframes: () => `${spinAnimation}`, easing: 'ease-in-out', scale: 1 },\n  fadeInOut: { keyframes: () => `${fadeInOutAnimation}`, easing: 'ease-in-out', scale: 1 },\n  heartbeat: { keyframes: () => `${heartbeatAnimation}`, easing: 'ease-in-out', scale: 1 },\n  wobble: { keyframes: (theme) => `${wobbleAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },\n  morph: { keyframes: () => `${morphAnimation}`, easing: 'ease-in-out', scale: 1 },\n  swing: { keyframes: () => `${swingAnimation}`, easing: 'ease-in-out', scale: 1 },\n  jello: { keyframes: () => `${jelloAnimation}`, easing: 'ease-in-out', scale: 1 },\n  float: { keyframes: (theme) => `${floatAnimation(theme)}`, easing: 'ease-in-out', scale: 2 },\n  neonFlicker: { keyframes: (theme) => `${neonFlickerAnimation(theme)}`, easing: 'ease-in-out', scale: 2 },\n  breathe: { keyframes: () => `${breatheAnimation}`, easing: 'ease-in-out', scale: 1.5 },\n};\n\nconst animationFor = (\n  theme: Theme,\n  variant: AnimationVariant,\n  duration: number,\n  delay: number,\n  loop: boolean,\n) => {\n  const spec = ANIMATIONS[variant];\n  if (!spec) return 'none';\n\n  const iterationCount = loop ? 'infinite' : '1';\n  return `${spec.keyframes(theme)} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : '0s'}`;\n};\n\nconst SHADOWS: Record<string, (theme: Theme) => string> = {\n  soft: (theme) => `0 ${rems(theme, 4, 20)} ${shadowInk(theme, 0.15)}`,\n  hard: (theme) => `${rems(theme, 4, 4)} 0px ${shadowInk(theme, 0.25)}`,\n  elevated: (theme) =>\n    `0 ${rems(theme, 10, 40)} ${shadowInk(theme, 0.2)}, 0 ${rems(theme, 2, 10)} ${shadowInk(theme, 0.1)}`,\n};\n\nexport interface IconStyleFlags {\n  $size: number;\n  $fontSize: number;\n  $animationVariant: AnimationVariant;\n  $duration: number;\n  $delay: number;\n  $loop: boolean;\n  $glow: boolean;\n  $glass: boolean;\n  $glowColor?: string;\n  $customColor?: string;\n  $metallic?: boolean;\n  $gradient?: boolean;\n  $shadow?: 'soft' | 'hard' | 'elevated' | 'none';\n  $ripple?: boolean;\n  $neon?: boolean;\n  $holographic?: boolean;\n}\n\n/**\n * The four surface treatments that paint the icon themselves — metallic,\n * gradient, neon and holographic — each run a second animation alongside the\n * chosen one, so they all need the base animation string.\n */\nconst effectStyles = (\n  theme: Theme,\n  flags: IconStyleFlags,\n  animation: string,\n  color: string,\n): CSSObject => {\n  const { $glass, $metallic, $gradient, $neon, $holographic } = flags;\n\n  return {\n    ...($glass && {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,\n      backdropFilter: `blur(${rem(theme, 10)})`,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      boxShadow: `inset 0 ${rems(theme, 1, 1)} ${sheen(theme, 0.3)}, 0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.1)}`,\n    }),\n    ...($metallic && {\n      background: `linear-gradient(145deg,\n      ${neutralTones(theme).track} 0%,\n      ${neutralTones(theme).muted} 25%,\n      ${neutralTones(theme).subtle} 50%,\n      ${neutralTones(theme).emphasis} 75%,\n      ${neutralTones(theme).subtle} 100%)`,\n      backgroundSize: '200% 200%',\n      animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,\n      boxShadow: `inset 0 ${rems(theme, 2, 4)} ${sheen(theme, 0.5)},\n                inset 0 ${rems(theme, -2, 4)} ${shadowInk(theme, 0.3)},\n                0 ${rems(theme, 4, 8)} ${shadowInk(theme, 0.2)}`,\n    }),\n    ...($gradient && {\n      background: `linear-gradient(135deg,\n      ${theme.palette.primary.main} 0%,\n      ${theme.palette.secondary.main} 100%)`,\n      backgroundSize: '200% 200%',\n      animation: `${animation}, ${breatheAnimation} 3s ease-in-out infinite`,\n    }),\n    ...($neon && {\n      color,\n      textShadow: `0 0 ${rem(theme, 10)} ${color}, 0 0 ${rem(theme, 20)} ${color}, 0 0 ${rem(theme, 30)} ${color}`,\n      filter: `brightness(1.2) contrast(1.2)`,\n      animation: `${animation}, ${neonFlickerAnimation(theme)} 3s ease-in-out infinite`,\n    }),\n    ...($holographic && {\n      background: `linear-gradient(45deg,\n      ${theme.palette.primary.main} 0%,\n      ${theme.palette.secondary.main} 25%,\n      ${theme.palette.error.main} 50%,\n      ${theme.palette.warning.main} 75%,\n      ${theme.palette.primary.main} 100%)`,\n      backgroundSize: '400% 400%',\n      animation: `${animation}, ${floatAnimation(theme)} 6s ease-in-out infinite`,\n      backgroundClip: 'text',\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      filter: `hue-rotate(0deg)`,\n      '@keyframes hueRotate': {\n        '0%': { filter: 'hue-rotate(0deg)' },\n        '100%': { filter: 'hue-rotate(360deg)' },\n      },\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: rem(theme, -2),\n        borderRadius: '50%',\n        background: 'inherit',\n        filter: `blur(${rem(theme, 10)})`,\n        opacity: 0.5,\n        zIndex: -1,\n      },\n    }),\n  };\n};\n\nexport const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {\n  const {\n    $size, $fontSize, $animationVariant, $duration, $delay, $loop,\n    $glow, $glowColor, $customColor, $shadow, $ripple, $neon,\n  } = flags;\n\n  const color = $customColor || theme.palette.primary.main;\n  const glowColor = $glowColor || color;\n  const animation = animationFor(theme, $animationVariant, $duration, $delay, $loop);\n\n  // Both selectors size the same glyph — MUI icons render an MuiSvgIcon-root,\n  // a bare child renders an svg.\n  const glyphSize = {\n    fontSize: rem(theme, $fontSize),\n    width: rem(theme, $fontSize),\n    height: rem(theme, $fontSize),\n  };\n\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: rem(theme, $size),\n    height: rem(theme, $size),\n    color,\n    animation,\n    position: 'relative' as const,\n    cursor: 'default',\n    borderRadius: '50%',\n    transition: 'all 0.3s ease',\n    boxShadow: SHADOWS[$shadow ?? 'none']?.(theme) ?? 'none',\n    ...($glow && {\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: rem(theme, -8),\n        borderRadius: '50%',\n        background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,\n        animation: `${glowPulseAnimation(theme)} ${$duration * 1.2}s ease-in-out infinite`,\n        zIndex: -1,\n      },\n      filter: `drop-shadow(0 0 ${rem(theme, 8)} ${alpha(glowColor, 0.5)})`,\n    }),\n    ...effectStyles(theme, flags, animation, color),\n    ...($ripple && {\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: 0,\n        borderRadius: '50%',\n        border: `${rem(theme, 2)} solid ${color}`,\n        animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`,\n      },\n    }),\n    '& .MuiSvgIcon-root': glyphSize,\n    '& svg': glyphSize,\n    '&:hover': {\n      transform: 'scale(1.05)',\n      filter: $neon ? `brightness(1.4) contrast(1.3)` : undefined,\n    },\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-XR46FSOH.js → chunk-XIG3DXXX.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -297,4 +297,4 @@ export {
   ViewHeader,
   ViewFooter
 };
-//# sourceMappingURL=chunk-XR46FSOH.js.map
+//# sourceMappingURL=chunk-XIG3DXXX.js.map

package/dist/{chunk-35S6QI5G.js → chunk-XJJXBUPN.js}

@@ -1,6 +1,6 @@
 import {
   GridToolbar
-} from "./chunk-UZ6AUTE6.js";
+} from "./chunk-CNQUCNEA.js";
 
 // src/components/data-display/DataViews/data-views-shell-toolbar.tsx
 import { jsx } from "react/jsx-runtime";
@@ -64,4 +64,4 @@ function ShellToolbar({
 export {
   ShellToolbar
 };
-//# sourceMappingURL=chunk-35S6QI5G.js.map
+//# sourceMappingURL=chunk-XJJXBUPN.js.map

package/dist/{chunk-GHTBUJ6E.js → chunk-XRUW7DMH.js}

@@ -1,6 +1,6 @@
 import {
   Skeleton
-} from "./chunk-7F7TTOYN.js";
+} from "./chunk-BEGTLELZ.js";
 import {
   rem,
   sxRem
@@ -205,4 +205,4 @@ export {
   StatCard,
   StatCard_default
 };
-//# sourceMappingURL=chunk-GHTBUJ6E.js.map
+//# sourceMappingURL=chunk-XRUW7DMH.js.map

package/dist/{chunk-CSTAQX2B.js → chunk-XWZJLXJT.js}

@@ -1,11 +1,12 @@
 import {
   SettingsStatusMarker
-} from "./chunk-2OIP3T5O.js";
+} from "./chunk-DBFRCTI5.js";
 import {
   TOUCH_TARGET
-} from "./chunk-LIG7TKIB.js";
+} from "./chunk-NYFNF7I5.js";
 import {
-  rem
+  rem,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/SettingsLayout/SettingsSectionChips.tsx
@@ -13,7 +14,7 @@ import Box from "@mui/material/Box/index.js";
 import { alpha, useTheme } from "@mui/material/styles/index.js";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var CHIP_HEIGHT = 34;
+var CHIP_HEIGHT = sxRem(34);
 function prefersReducedMotion() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -83,7 +84,7 @@ function SectionChip({
           insetInlineEnd: 0,
           top: "50%",
           transform: "translateY(-50%)",
-          height: TOUCH_TARGET
+          height: rem(theme, TOUCH_TARGET)
         }
       },
       children: [
@@ -149,4 +150,4 @@ SettingsSectionChips.displayName = "SettingsSectionChips";
 export {
   SettingsSectionChips
 };
-//# sourceMappingURL=chunk-CSTAQX2B.js.map
+//# sourceMappingURL=chunk-XWZJLXJT.js.map

package/dist/chunk-XWZJLXJT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionChips.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useEffect, useRef, type RefObject } from 'react';\n\nimport { SettingsStatusMarker } from './SettingsStatusMarker';\nimport { TOUCH_TARGET } from './SettingsLayout.styles';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n/**\n * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.\n *\n * The strip sits between a section's header and its first field on the width\n * with the least room for either, so the pill is sized to its text rather than\n * to the thumb — and the thumb is served by the hit area instead.\n */\nconst CHIP_HEIGHT = sxRem(34);\nimport type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout.types';\n\nexport interface SettingsSectionChipsProps {\n  /** The sibling sections to offer — usually the open item's own group. */\n  items: SettingsNavItem[];\n  /** Which one is open. */\n  activeItemId?: string;\n  /** Accessible name of the strip, in the host's language. */\n  ariaLabel: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}\n\n/** True when the visitor asked the OS for less movement. Re-read per scroll. */\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Keep the open section's chip in view, however the visitor got here.\n *\n * Keyed on `activeItemId` in an effect rather than done in a click handler:\n * arriving by the desktop rail, by a card, by a pasted link and by the browser's\n * back button all have to land the same way, and only one of those is a click on\n * a chip. Every re-render otherwise starts the strip at scroll 0, which parks\n * the active chip off the right edge on any list longer than a screen — the\n * visitor is told where they are by an element they cannot see.\n *\n * `itemsKey` rather than `items`: a host almost always rebuilds that array per\n * render (`groups.flatMap(...)`), and depending on it would re-run this on every\n * render and yank the strip back mid-drag.\n *\n * The key joins on NUL — as the ESCAPE `'\\u0000'`, which it must stay. A\n * literal NUL byte works identically at runtime and makes git classify this file\n * as BINARY: `git diff` prints \"Binary file not shown\" and the GitHub review UI\n * shows nothing at all. This file shipped that way once, and the cost was not\n * the byte — it was a whole change nobody could read.\n */\nfunction useCentreActiveChip(\n  stripRef: RefObject<HTMLDivElement | null>,\n  activeItemId: string | undefined,\n  itemsKey: string,\n): void {\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!strip || !activeItemId) return;\n    // Walked rather than selected: an id is host data, and a section id carrying\n    // a quote would turn a selector string into a thrown SyntaxError — which\n    // here would take the whole strip down to centre one chip.\n    const chip = Array.from(strip.children).find(\n      (node): node is HTMLElement =>\n        node instanceof HTMLElement && node.dataset.chipId === activeItemId,\n    );\n    if (!chip) return;\n    // Feature-checked, not assumed. `Element.scrollTo` is absent in jsdom and in\n    // a few embedded webviews, and an unguarded call there THROWS out of an\n    // effect — which React escalates to the nearest error boundary. The whole\n    // settings area would go down to centre one chip, and the host's own tests\n    // could not render the shell at all. Same reasoning as walking the children\n    // instead of building a selector: nothing in here is worth a crash.\n    if (typeof strip.scrollTo !== 'function') return;\n    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;\n    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));\n    strip.scrollTo({ left, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n  }, [stripRef, activeItemId, itemsKey]);\n}\n\n/** One chip: a link when the host gave it a target, else a button. */\nfunction SectionChip({\n  item,\n  active,\n  theme,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: {\n  item: SettingsNavItem;\n  active: boolean;\n  theme: Theme;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const asLink = item.href !== undefined && linkComponent !== undefined;\n  const behaviour = asLink\n    ? { component: linkComponent, href: item.href }\n    : { component: 'button' as const, type: 'button' as const, onClick: () => onSelectItem?.(item.id) };\n\n  return (\n    <Box\n      {...behaviour}\n      data-chip-id={item.id}\n      data-testid={`${testIdPrefix}-chip-${item.id}`}\n      aria-current={active ? 'page' : undefined}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 0.75,\n        flex: '0 0 auto',\n        position: 'relative',\n        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.\n        //\n        // Shrinking `minHeight` alone would have bought a slimmer strip with a\n        // smaller hit area — on the one width where the strip IS the navigation\n        // and the input is a thumb. The `::after` below keeps the tappable\n        // region at the full target while the pill itself takes less room, so\n        // this is a visual change and not an accessibility trade.\n        minHeight: CHIP_HEIGHT,\n        px: 1.5,\n        borderRadius: 999,\n        cursor: 'pointer',\n        font: 'inherit',\n        fontSize: rem(theme, 13),\n        fontWeight: active ? 700 : 500,\n        textDecoration: 'none',\n        whiteSpace: 'nowrap',\n        color: active ? 'primary.main' : 'text.secondary',\n        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : 'transparent',\n        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,\n        // Spans the chip's width only, so neighbours never overlap: the strip\n        // is a row, and the extra reach is vertical.\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          insetInlineStart: 0,\n          insetInlineEnd: 0,\n          top: '50%',\n          transform: 'translateY(-50%)',\n          height: rem(theme, TOUCH_TARGET),\n        },\n      }}\n    >\n      {item.status ? (\n        <SettingsStatusMarker\n          status={item.status}\n          label={item.statusLabel}\n          testId={`${testIdPrefix}-chip-status-${item.id}`}\n        />\n      ) : null}\n      {item.label}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width section strip: horizontally scrollable chips for the sections\n * beside the open one.\n *\n * It clips its own overflow — `overflow-x: auto` on the strip, never on an\n * ancestor. A strip that pushes the page wide makes every OTHER screen at that\n * width scroll sideways too, and the cause is nowhere near the symptom.\n */\nexport function SettingsSectionChips({\n  items,\n  activeItemId,\n  ariaLabel,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: SettingsSectionChipsProps): React.JSX.Element {\n  const theme = useTheme();\n  const stripRef = useRef<HTMLDivElement | null>(null);\n  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join('\\u0000'));\n\n  return (\n    <Box\n      ref={stripRef}\n      component=\"nav\"\n      aria-label={ariaLabel}\n      data-testid={`${testIdPrefix}-chips`}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.75,\n        px: 0.25,\n        py: 0.25,\n        overflowX: 'auto',\n        overflowY: 'hidden',\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n      }}\n    >\n      {items.map((item) => (\n        <SectionChip\n          key={item.id}\n          item={item}\n          active={item.id === activeItemId}\n          theme={theme}\n          linkComponent={linkComponent}\n          onSelectItem={onSelectItem}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n\nSettingsSectionChips.displayName = 'SettingsSectionChips';\n"],"mappings":"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","names":[]}

package/dist/{chunk-MBC55H6M.js → chunk-Y5UTYBZW.js}

@@ -1,17 +1,21 @@
 import {
   NavigationMegaSection
-} from "./chunk-5QWQR7XT.js";
+} from "./chunk-YHGOPZXW.js";
 import {
   NavigationStandardBody
-} from "./chunk-PT2XADGH.js";
+} from "./chunk-VPRNKJHP.js";
 import {
   LogoBar,
   NavigationShell
-} from "./chunk-HB7ISSLK.js";
+} from "./chunk-L5RQIQIP.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/NavigationMenu/NavigationMenu.tsx
 import Box from "@mui/material/Box/index.js";
 import Paper from "@mui/material/Paper/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
 import React, { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var MegaMenuLayout = React.forwardRef(
@@ -27,6 +31,8 @@ var MegaMenuLayout = React.forwardRef(
     style,
     ...props
   }, ref) => {
+    const theme = useTheme();
+    const cap = typeof maxWidth === "number" ? rem(theme, maxWidth) : maxWidth;
     return /* @__PURE__ */ jsx(
       NavigationShell,
       {
@@ -34,7 +40,7 @@ var MegaMenuLayout = React.forwardRef(
         variant,
         minimal,
         className,
-        style: { maxWidth, ...style },
+        style: { maxWidth: cap, ...style },
         ...props,
         children: /* @__PURE__ */ jsxs(
           Paper,
@@ -52,7 +58,7 @@ var MegaMenuLayout = React.forwardRef(
                 {
                   sx: {
                     display: "grid",
-                    gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+                    gridTemplateColumns: `repeat(auto-fit, minmax(${rem(theme, 280)}, 1fr))`,
                     gap: 3,
                     p: 3
                   },
@@ -167,4 +173,4 @@ NavigationMenu.displayName = "NavigationMenu";
 export {
   NavigationMenu
 };
-//# sourceMappingURL=chunk-MBC55H6M.js.map
+//# sourceMappingURL=chunk-Y5UTYBZW.js.map

package/dist/chunk-Y5UTYBZW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React, { useState } from 'react';\n\nimport { NavigationMegaSection } from './NavigationMegaSection';\nimport { NavigationStandardBody } from './NavigationStandardBody';\nimport {\n  LogoBar,\n  NavigationShell } from './NavigationMenu.shell';\nimport type { NavigationMenuItem,NavigationMenuProps } from './NavigationMenu.types';\nimport { rem } from '../../../tokens/relative';\n\n\n\n\n\n\n// The mega-menu layout is a different shape from the list-based variants: a\n// grid of titled sections rather than a single column.\n// onItemClick and dataTestId are not on NavigationMenuProps; they arrive through\n// the rest props and are forwarded to the item renderer, so they are named here.\ntype MegaMenuLayoutProps = NavigationMenuProps & {\n  collapsed: boolean;\n  onItemClick?: (item: NavigationMenuItem) => void;\n  dataTestId?: string;\n};\n\nconst MegaMenuLayout = React.forwardRef<HTMLDivElement, MegaMenuLayoutProps>(\n  (\n    {\n      variant,\n      logo,\n      items,\n      size,\n      minimal,\n      dataTestId: _dataTestId,\n      className,\n      maxWidth,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    // An inline style reads a number as px: a number here is design px.\n    const cap = typeof maxWidth === 'number' ? rem(theme, maxWidth) : maxWidth;\n    return (\n    <NavigationShell\n      ref={ref}\n      variant={variant}\n      minimal={minimal}\n      className={className}\n      style={{ maxWidth: cap, ...style }}\n      {...props}\n    >\n      <Paper\n        elevation={minimal ? 0 : 1}\n        sx={{\n          width: '100%',\n          overflow: 'hidden',\n          background: minimal ? 'transparent' : undefined }}\n      >\n        {logo && <LogoBar>{logo}</LogoBar>}\n        <Box\n          sx={{\n            display: 'grid',\n            gridTemplateColumns: `repeat(auto-fit, minmax(${rem(theme, 280)}, 1fr))`,\n            gap: 3,\n            p: 3 }}\n        >\n          {items.map((section, sectionIndex) => (\n            <NavigationMegaSection\n              key={section.id}\n              section={section}\n              sectionIndex={sectionIndex}\n              variant={variant}\n              size={size}\n              minimal={minimal}\n            />\n          ))}\n        </Box>\n      </Paper>\n    </NavigationShell>\n  );\n  },\n);\n\nMegaMenuLayout.displayName = 'MegaMenuLayout';\n\ntype NavigationDefaultedKeys = 'variant' | 'size' | 'minimal' | 'collapsible' | 'showDividers';\n\ntype ResolvedNavigationProps = NavigationMenuProps &\n  Required<Pick<NavigationMenuProps, NavigationDefaultedKeys>>;\n\nconst NAVIGATION_DEFAULTS: Pick<NavigationMenuProps, NavigationDefaultedKeys> = {\n  variant: 'vertical',\n  size: 'md',\n  minimal: false,\n  collapsible: false,\n  showDividers: false };\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default exactly as a destructuring default would. Applied as\n// a merge rather than destructuring defaults, which would otherwise put five\n// branches into the component's own complexity budget.\nconst resolveProps = (props: NavigationMenuProps): ResolvedNavigationProps =>\n  ({\n    ...NAVIGATION_DEFAULTS,\n    ...(Object.fromEntries(\n      Object.entries(props).filter(([, value]) => value !== undefined),\n    ) as Partial<NavigationMenuProps>) }) as ResolvedNavigationProps;\n\nexport const NavigationMenu = React.forwardRef<HTMLDivElement, NavigationMenuProps>(\n  (componentProps, ref) => {\n    const {\n      variant,\n      items,\n      size,\n      minimal,\n      collapsible,\n      collapsed: controlledCollapsed,\n      onCollapseChange,\n      logo,\n      endContent,\n      maxWidth,\n      showDividers,\n      className,\n      style,\n      ...props\n    } = resolveProps(componentProps);\n\n    const [internalCollapsed, setInternalCollapsed] = useState(false);\n\n    // Controlled when the caller passes `collapsed`, uncontrolled otherwise.\n    const isControlled = controlledCollapsed !== undefined;\n    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;\n\n    const handleCollapseToggle = () => {\n      if (!isControlled) setInternalCollapsed(!collapsed);\n      onCollapseChange?.(!collapsed);\n    };\n\n    if (variant === 'mega') {\n      return (\n        <MegaMenuLayout\n          ref={ref}\n          variant={variant}\n          collapsed={collapsed}\n          logo={logo}\n          items={items}\n          size={size}\n          minimal={minimal}\n          className={className}\n          maxWidth={maxWidth}\n          style={style}\n          {...props}\n        />\n      );\n    }\n\n    return (\n      <NavigationShell\n        ref={ref}\n        variant={variant}\n        minimal={minimal}\n        collapsed={collapsed}\n        className={className}\n        style={style}\n        {...props}\n      >\n        <NavigationStandardBody\n          variant={variant}\n          size={size}\n          minimal={minimal}\n          collapsed={collapsed}\n          collapsible={collapsible}\n          showDividers={showDividers}\n          items={items}\n          logo={logo}\n          endContent={endContent}\n          onCollapseToggle={handleCollapseToggle}\n        />\n      </NavigationShell>\n    );\n  },\n);\n\nNavigationMenu.displayName = 'NavigationMenu';\n"],"mappings":"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","names":[]}

package/dist/{chunk-HNPWZ3W2.js → chunk-Y7F5JBAT.js}

@@ -1,16 +1,16 @@
 import {
   ColumnsTab
-} from "./chunk-ROT57BP4.js";
+} from "./chunk-R2XVTUVR.js";
 import {
   DisplayTab,
   SortTab
-} from "./chunk-JLQGRZMN.js";
+} from "./chunk-UEVHI62V.js";
 import {
   ViewActions,
   ViewFooter,
   ViewHeader,
   ViewsList
-} from "./chunk-XR46FSOH.js";
+} from "./chunk-XIG3DXXX.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -265,4 +265,4 @@ function DataViewsDisplayPanel({
 export {
   DataViewsDisplayPanel
 };
-//# sourceMappingURL=chunk-HNPWZ3W2.js.map
+//# sourceMappingURL=chunk-Y7F5JBAT.js.map

package/dist/{chunk-WTOYEWW6.js → chunk-YBH4SPMM.js}

@@ -17,7 +17,8 @@ import {
   withoutTestIdProps
 } from "./chunk-TYJR4GOF.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/typography/Text/Text.tsx
@@ -81,7 +82,7 @@ var textVariantStyles = (theme, a, base) => {
         fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Courier New", monospace',
         fontSize: sizeOverride(theme, a.customSize, CODE_FONT_SIZE),
         backgroundColor: alpha(theme.palette.primary.main, CODE_BACKGROUND_ALPHA),
-        padding: `${CODE_PADDING.vertical}px ${CODE_PADDING.horizontal}px`,
+        padding: rems(theme, CODE_PADDING.vertical, CODE_PADDING.horizontal),
         borderRadius: theme.shape.borderRadius * CODE_RADIUS_FACTOR,
         border: `1px solid ${alpha(theme.palette.primary.main, CODE_BORDER_ALPHA)}`
       };
@@ -142,4 +143,4 @@ Text.displayName = "Text";
 export {
   Text
 };
-//# sourceMappingURL=chunk-WTOYEWW6.js.map
+//# sourceMappingURL=chunk-YBH4SPMM.js.map

package/dist/chunk-YBH4SPMM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/typography/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSObject, Theme } from '@mui/material/styles/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 {\n  CAPTION_FONT_SIZE,\n  CAPTION_LETTER_SPACING_EM,\n  CAPTION_OPACITY,\n  CODE_BACKGROUND_ALPHA,\n  CODE_BORDER_ALPHA,\n  CODE_FONT_SIZE,\n  CODE_PADDING,\n  CODE_RADIUS_FACTOR,\n  HEADING_DEFAULT_WEIGHT,\n  HEADING_LETTER_SPACING_EM,\n  TEXT_SIZES,\n  TEXT_WEIGHTS,\n} from './Text.metrics';\nimport type { TextProps } from './Text.types';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport type { ColorValue } from '../../../tokens/scales';\nimport { rem, rems } from '../../../tokens/relative';\nimport type { UiTypeStep } from '../../../tokens/theme';\n\nconst getColorFromTheme = (theme: Theme, color: ColorValue): string => {\n  if (color === 'neutral') {\n    return theme.palette.text.primary;\n  }\n\n  if (color === 'secondary') {\n    return theme.palette.text.secondary;\n  }\n\n  // Exhaustive over ColorValue on purpose. It was a partial `Record<string, …>`\n  // with a silent `|| text.primary` fallback, so `info` — accepted by the type\n  // — rendered as ordinary body text. Typing the key means a colour added to\n  // the vocabulary cannot reach here without a home.\n  const colorMap: Record<Exclude<ColorValue, 'neutral' | 'secondary'>, string> = {\n    primary: theme.palette.primary.main,\n    success: theme.palette.success.main,\n    warning: theme.palette.warning.main,\n    info: theme.palette.info.main,\n    danger: theme.palette.error.main,\n  };\n\n  return colorMap[color];\n};\n\n// Derived from the shared metrics, not restated: the native `Text` reads the\n// same table, so the two renderers cannot disagree on a size.\n// The table keeps the design px; the size is converted where it is read.\nconst SIZE_MAP: Readonly<Record<string, UiTypeStep | undefined>> = TEXT_SIZES;\n\nconst fontSizeFor = (theme: Theme, customSize: string | undefined): string | undefined => {\n  const drawnAt = SIZE_MAP[customSize ?? 'md']?.fontSize;\n  return drawnAt === undefined ? undefined : rem(theme, drawnAt);\n};\n\nconst WEIGHT_MAP: Record<string, number> = TEXT_WEIGHTS;\n\ninterface TextStyleArgs {\n  theme: Theme;\n  customVariant?: string;\n  customColor?: ColorValue;\n  customSize?: string;\n  customWeight?: string;\n  italic?: boolean;\n  underline?: boolean;\n  strikethrough?: boolean;\n}\n\n// underline and strikethrough combine into one declaration rather than one\n// winning over the other.\nconst decorationFor = (underline?: boolean, strikethrough?: boolean): string =>\n  [underline && 'underline', strikethrough && 'line-through'].filter(Boolean).join(' ') || 'none';\n\nconst baseTextStyles = (theme: Theme, a: TextStyleArgs): CSSObject => ({\n  color: getColorFromTheme(theme, a.customColor ?? 'neutral'),\n  fontSize: fontSizeFor(theme, a.customSize),\n  lineHeight: SIZE_MAP[a.customSize ?? 'md']?.lineHeight,\n  fontWeight: WEIGHT_MAP[a.customWeight ?? 'normal'],\n  fontStyle: a.italic ? 'italic' : 'normal',\n  textDecoration: decorationFor(a.underline, a.strikethrough),\n  transition: 'all 0.2s ease',\n});\n\n// Captions and code shrink relative to the body scale, but only at the default\n// size — an explicit size wins.\nconst sizeOverride = (\n  theme: Theme,\n  customSize: string | undefined,\n  atDefault: number,\n): string | undefined =>\n  (customSize ?? 'md') === 'md' ? rem(theme, atDefault) : fontSizeFor(theme, customSize);\n\nconst textVariantStyles = (theme: Theme, a: TextStyleArgs, base: CSSObject): CSSObject => {\n  const weight = a.customWeight ?? 'normal';\n\n  switch (a.customVariant) {\n    case 'heading':\n      return {\n        ...base,\n        fontFamily: theme.typography.h4.fontFamily,\n        fontWeight: weight === 'normal' ? HEADING_DEFAULT_WEIGHT : WEIGHT_MAP[weight],\n        letterSpacing: `${HEADING_LETTER_SPACING_EM}em`,\n      };\n    case 'caption':\n      return {\n        ...base,\n        fontSize: sizeOverride(theme, a.customSize, CAPTION_FONT_SIZE),\n        opacity: CAPTION_OPACITY,\n        letterSpacing: `${CAPTION_LETTER_SPACING_EM}em`,\n      };\n    case 'code':\n      return {\n        ...base,\n        fontFamily: 'Monaco, Menlo, \"Ubuntu Mono\", \"Courier New\", monospace',\n        fontSize: sizeOverride(theme, a.customSize, CODE_FONT_SIZE),\n        backgroundColor: alpha(theme.palette.primary.main, CODE_BACKGROUND_ALPHA),\n        padding: rems(theme, CODE_PADDING.vertical, CODE_PADDING.horizontal),\n        borderRadius: theme.shape.borderRadius * CODE_RADIUS_FACTOR,\n        border: `1px solid ${alpha(theme.palette.primary.main, CODE_BORDER_ALPHA)}`,\n      };\n    default:\n      return { ...base, fontFamily: theme.typography.body1.fontFamily };\n  }\n};\n\nconst StyledText = styled(Typography, {\n  shouldForwardProp: (prop) =>\n    ![\n      'customVariant',\n      'customColor',\n      'customSize',\n      'customWeight',\n      'italic',\n      'underline',\n      'strikethrough',\n    ].includes(prop as string),\n})<{\n  customVariant?: string;\n  customColor?: ColorValue;\n  customSize?: string;\n  customWeight?: string;\n  italic?: boolean;\n  underline?: boolean;\n  strikethrough?: boolean;\n}>((args) => {\n  const { theme } = args;\n  return textVariantStyles(theme, args, baseTextStyles(theme, args));\n});\n\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\n  (\n    {\n      variant = 'body',\n      color = 'neutral',\n      size = 'md',\n      weight = 'normal',\n      as = 'span',\n      italic = false,\n      underline = false,\n      strikethrough = false,\n      children,\n      ...others\n    },\n    ref,\n  ) => {\n    // `testID` and `dataTestId` are the shared contract's spellings; the DOM\n    // wants `data-testid`, and must not see the other two as attributes.\n    const testId = resolveTestId(others);\n    const props = withoutTestIdProps(others);\n    return (\n      <StyledText\n        ref={ref}\n        data-testid={testId}\n        customVariant={variant}\n        customColor={color}\n        customSize={size}\n        customWeight={weight}\n        italic={italic}\n        underline={underline}\n        strikethrough={strikethrough}\n        {...(as && { as })}\n        {...props}\n      >\n        {children}\n      </StyledText>\n    );\n  },\n);\n\nText.displayName = 'Text';"],"mappings":"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","names":[]}

package/dist/{chunk-5QWQR7XT.js → chunk-YHGOPZXW.js}

@@ -1,12 +1,15 @@
 import {
   MegaSection
-} from "./chunk-HB7ISSLK.js";
+} from "./chunk-L5RQIQIP.js";
 import {
   renderMenuItem
-} from "./chunk-MK4CH4VT.js";
+} from "./chunk-5OUEKIWQ.js";
 import {
   slideIn
-} from "./chunk-6GRZ77IS.js";
+} from "./chunk-3AIRFAI3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/NavigationMenu/NavigationMegaSection.tsx
 import Box from "@mui/material/Box/index.js";
@@ -25,10 +28,10 @@ var SECTION_TITLE_SX = {
     position: "absolute",
     bottom: 0,
     left: 0,
-    width: "40px",
-    height: "3px",
+    width: sxRem(40),
+    height: sxRem(3),
     background: (theme) => `linear-gradient(90deg, ${theme.palette.primary.main} 0%, transparent 100%)`,
-    borderRadius: "2px"
+    borderRadius: sxRem(2)
   }
 };
 var NavigationMegaSection = ({
@@ -43,7 +46,7 @@ var NavigationMegaSection = ({
     Box,
     {
       sx: {
-        animation: `${slideIn} 0.4s ease-out`,
+        animation: (theme) => `${slideIn(theme)} 0.4s ease-out`,
         animationDelay: `${sectionIndex * 0.1 + itemIndex * 0.05}s`,
         animationFillMode: "both"
       },
@@ -56,4 +59,4 @@ var NavigationMegaSection = ({
 export {
   NavigationMegaSection
 };
-//# sourceMappingURL=chunk-5QWQR7XT.js.map
+//# sourceMappingURL=chunk-YHGOPZXW.js.map

package/dist/chunk-YHGOPZXW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/NavigationMenu/NavigationMegaSection.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport List from '@mui/material/List/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { MegaSection } from './NavigationMenu.shell';\nimport { slideIn } from './NavigationMenu.styles';\nimport { sxRem } from '../../../tokens/relative';\nimport type { NavigationMenuItem } from './NavigationMenu.types';\nimport { renderMenuItem } from './NavigationMenuItem';\n\nconst SECTION_TITLE_SX = {\n  mb: 2.5,\n  color: 'primary.main',\n  fontWeight: 600,\n  position: 'relative',\n  paddingBottom: 1,\n  // The short rule under each section heading.\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    width: sxRem(40),\n    height: sxRem(3),\n    background: (theme: { palette: { primary: { main: string } } }) =>\n      `linear-gradient(90deg, ${theme.palette.primary.main} 0%, transparent 100%)`,\n    borderRadius: sxRem(2),\n  },\n} as const;\n\nexport interface NavigationMegaSectionProps {\n  section: NavigationMenuItem;\n  sectionIndex: number;\n  variant?: string;\n  size?: string;\n  minimal?: boolean;\n}\n\n// One column of the mega menu: a heading and its children, each staggered so the\n// grid fills in rather than appearing all at once.\nexport const NavigationMegaSection: FC<NavigationMegaSectionProps> = ({\n  section,\n  sectionIndex,\n  variant,\n  size,\n  minimal,\n}) => (\n  <MegaSection>\n    <Typography variant=\"h6\" sx={SECTION_TITLE_SX}>\n      {section.label}\n    </Typography>\n    <List sx={{ p: 0 }}>\n      {section.children?.map((item, itemIndex) => (\n        <Box\n          key={item.id}\n          sx={{\n            animation: (theme) => `${slideIn(theme)} 0.4s ease-out`,\n            animationDelay: `${sectionIndex * 0.1 + itemIndex * 0.05}s`,\n            animationFillMode: 'both',\n          }}\n        >\n          {renderMenuItem(item, variant, size, false, minimal, 0)}\n        </Box>\n      ))}\n    </List>\n  </MegaSection>\n);\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,gBAAgB;AA+CrB,SACE,KADF;AArCF,IAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,eAAe;AAAA;AAAA,EAEf,YAAY;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,MAAM,EAAE;AAAA,IACf,QAAQ,MAAM,CAAC;AAAA,IACf,YAAY,CAAC,UACX,0BAA0B,MAAM,QAAQ,QAAQ,IAAI;AAAA,IACtD,cAAc,MAAM,CAAC;AAAA,EACvB;AACF;AAYO,IAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,eACC;AAAA,sBAAC,cAAW,SAAQ,MAAK,IAAI,kBAC1B,kBAAQ,OACX;AAAA,EACA,oBAAC,QAAK,IAAI,EAAE,GAAG,EAAE,GACd,kBAAQ,UAAU,IAAI,CAAC,MAAM,cAC5B;AAAA,IAAC;AAAA;AAAA,MAEC,IAAI;AAAA,QACF,WAAW,CAAC,UAAU,GAAG,QAAQ,KAAK,CAAC;AAAA,QACvC,gBAAgB,GAAG,eAAe,MAAM,YAAY,IAAI;AAAA,QACxD,mBAAmB;AAAA,MACrB;AAAA,MAEC,yBAAe,MAAM,SAAS,MAAM,OAAO,SAAS,CAAC;AAAA;AAAA,IAPjD,KAAK;AAAA,EAQZ,CACD,GACH;AAAA,GACF;","names":[]}

package/dist/{chunk-6BDYC4RA.js → chunk-YRSR5LVZ.js}

@@ -1,10 +1,10 @@
 import {
   BreadcrumbEntry
-} from "./chunk-5W4BLTDI.js";
+} from "./chunk-IWFENXST.js";
 import {
   breadcrumbsBarStyles,
   sizeIconMap
-} from "./chunk-6CTPDNNX.js";
+} from "./chunk-52G2KRL4.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -172,4 +172,4 @@ Breadcrumbs.displayName = "Breadcrumbs";
 export {
   Breadcrumbs
 };
-//# sourceMappingURL=chunk-6BDYC4RA.js.map
+//# sourceMappingURL=chunk-YRSR5LVZ.js.map

package/dist/{chunk-57JY4OI2.js → chunk-YUXDVW62.js}

@@ -51,7 +51,7 @@ function resolveTriggerParts(fieldDef, orderOption, orderOptions) {
 }
 var sectionLabelSx = { px: 1, py: 0.75, fontSize: sxRem(12), fontWeight: 600, color: "text.primary", lineHeight: 1.5 };
 function SortCheck({ checked }) {
-  return /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "flex", width: 16, flexShrink: 0, alignItems: "center", justifyContent: "center" }, "aria-hidden": true, children: checked ? /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: sxRem(14) } }) : null });
+  return /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "flex", width: sxRem(16), flexShrink: 0, alignItems: "center", justifyContent: "center" }, "aria-hidden": true, children: checked ? /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: sxRem(14) } }) : null });
 }
 function SortRow({
   value,
@@ -85,7 +85,7 @@ function SortMenu({
       onClose: close,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
-      slotProps: { paper: { sx: { minWidth: 180 } } },
+      slotProps: { paper: { sx: { minWidth: sxRem(180) } } },
       children: [
         orderOptions.length > 0 && [
           /* @__PURE__ */ jsx(ListSubheader, { sx: sectionLabelSx, children: orderHeading }, "order-label"),
@@ -192,4 +192,4 @@ function SortByDropdown({
 export {
   SortByDropdown
 };
-//# sourceMappingURL=chunk-57JY4OI2.js.map
+//# sourceMappingURL=chunk-YUXDVW62.js.map