@12-apps/ui 6.36.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-FZ4YTEP2.js → chunk-XIG3DXXX.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-KH25WUSX.js";
+} 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-FZ4YTEP2.js.map
+//# sourceMappingURL=chunk-XIG3DXXX.js.map

package/dist/{chunk-CHFHILTM.js → chunk-XJJXBUPN.js}

@@ -1,6 +1,6 @@
 import {
   GridToolbar
-} from "./chunk-B7BNNSM2.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-CHFHILTM.js.map
+//# sourceMappingURL=chunk-XJJXBUPN.js.map

package/dist/{chunk-CMK4DJDR.js → chunk-XLTHZI5W.js}

@@ -1,8 +1,13 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/form/Command/Command.parts.tsx
 import Box from "@mui/material/Box/index.js";
 import CircularProgress from "@mui/material/CircularProgress/index.js";
 import Divider from "@mui/material/Divider/index.js";
 import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var CommandEmpty = ({
   message = "No results found",
@@ -28,25 +33,28 @@ var CommandLoading = ({
   className,
   style,
   dataTestId
-}) => /* @__PURE__ */ jsxs(
-  Box,
-  {
-    className,
-    "data-testid": dataTestId,
-    sx: {
-      p: 4,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: 2,
-      ...style
-    },
-    children: [
-      /* @__PURE__ */ jsx(CircularProgress, { size: 24 }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: message })
-    ]
-  }
-);
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      sx: {
+        p: 4,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 2,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 24) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: message })
+      ]
+    }
+  );
+};
 var CommandSeparator = ({
   className,
   style
@@ -57,4 +65,4 @@ export {
   CommandLoading,
   CommandSeparator
 };
-//# sourceMappingURL=chunk-CMK4DJDR.js.map
+//# sourceMappingURL=chunk-XLTHZI5W.js.map

package/dist/chunk-XLTHZI5W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Command/Command.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type {\n  CommandEmptyProps,\n  CommandLoadingProps,\n  CommandSeparatorProps,\n} from './Command.types';\nimport { rem } from '../../../tokens/relative';\n\nexport const CommandEmpty: React.FC<CommandEmptyProps> = ({\n  message = 'No results found',\n  className,\n  style,\n  dataTestId,\n}) => (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      sx={{\n        p: 4,\n        textAlign: 'center',\n        color: 'text.secondary',\n        ...style,\n      }}\n    >\n      <Typography variant=\"body2\">{message}</Typography>\n    </Box>\n  );\n\nexport const CommandLoading: React.FC<CommandLoadingProps> = ({\n  message = 'Loading...',\n  className,\n  style,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      sx={{\n        p: 4,\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        gap: 2,\n        ...style,\n      }}\n    >\n      <CircularProgress size={rem(theme, 24)} />\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {message}\n      </Typography>\n    </Box>\n  );\n};\n\nexport const CommandSeparator: React.FC<CommandSeparatorProps> = ({\n  className,\n  style,\n}) => <Divider className={className} sx={{ my: 1, ...style }} />;"],"mappings":";;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AA0BnB,cAYF,YAZE;AAhBC,IAAM,eAA4C,CAAC;AAAA,EACxD,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,MACI;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa;AAAA,IACb,IAAI;AAAA,MACF,GAAG;AAAA,MACH,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IAEA,8BAAC,cAAW,SAAQ,SAAS,mBAAQ;AAAA;AACvC;AAGG,IAAM,iBAAgD,CAAC;AAAA,EAC5D,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA,QACF,GAAG;AAAA,QACH,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,GAAG;AAAA,MACL;AAAA,MAEA;AAAA,4BAAC,oBAAiB,MAAM,IAAI,OAAO,EAAE,GAAG;AAAA,QACxC,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAC/B,mBACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,IAAM,mBAAoD,CAAC;AAAA,EAChE;AAAA,EACA;AACF,MAAM,oBAAC,WAAQ,WAAsB,IAAI,EAAE,IAAI,GAAG,GAAG,MAAM,GAAG;","names":[]}

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-DY4BP5WA.js → chunk-Y7F5JBAT.js}

@@ -1,16 +1,16 @@
 import {
   ColumnsTab
-} from "./chunk-ROT57BP4.js";
+} from "./chunk-R2XVTUVR.js";
 import {
   DisplayTab,
   SortTab
-} from "./chunk-ZAFFKQQU.js";
+} from "./chunk-UEVHI62V.js";
 import {
   ViewActions,
   ViewFooter,
   ViewHeader,
   ViewsList
-} from "./chunk-FZ4YTEP2.js";
+} from "./chunk-XIG3DXXX.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Button
-} from "./chunk-KH25WUSX.js";
+} from "./chunk-2EAAWOZ2.js";
 import {
   rem,
   sxRem
@@ -265,4 +265,4 @@ function DataViewsDisplayPanel({
 export {
   DataViewsDisplayPanel
 };
-//# sourceMappingURL=chunk-DY4BP5WA.js.map
+//# sourceMappingURL=chunk-Y7F5JBAT.js.map

package/dist/{chunk-CJHP6E34.js → chunk-YAFBUYVW.js}

@@ -1,4 +1,5 @@
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
@@ -14,6 +15,7 @@ import List from "@mui/material/List/index.js";
 import ListItemButton from "@mui/material/ListItemButton/index.js";
 import Paper from "@mui/material/Paper/index.js";
 import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function highlight(text, query) {
   const q = query.trim();
@@ -34,20 +36,21 @@ function Lead({ lead }) {
         component: "img",
         src: lead.src,
         alt: lead.alt ?? "",
-        sx: { width: 32, height: 32, borderRadius: 1, objectFit: "cover", flexShrink: 0 }
+        sx: { width: sxRem(32), height: sxRem(32), borderRadius: 1, objectFit: "cover", flexShrink: 0 }
       }
     );
   }
   if (lead.kind === "avatar") {
-    return /* @__PURE__ */ jsx(Avatar, { src: lead.src, alt: lead.alt ?? "", sx: { width: 32, height: 32, fontSize: sxRem(13.6) }, children: lead.fallback });
+    return /* @__PURE__ */ jsx(Avatar, { src: lead.src, alt: lead.alt ?? "", sx: { width: sxRem(32), height: sxRem(32), fontSize: sxRem(13.6) }, children: lead.fallback });
   }
-  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", width: 32, justifyContent: "center", flexShrink: 0, color: "text.secondary" }, children: lead.node });
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", width: sxRem(32), justifyContent: "center", flexShrink: 0, color: "text.secondary" }, children: lead.node });
 }
 function ghostRemainder(topPrimary, query) {
   if (!query || !topPrimary) return "";
   return topPrimary.toLowerCase().startsWith(query.toLowerCase()) && topPrimary.length > query.length ? topPrimary.slice(query.length) : "";
 }
 function PaletteInput(props) {
+  const theme = useTheme();
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.25, px: 2, py: 1.5 }, children: [
     /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small", sx: { color: "text.secondary", flexShrink: 0 } }),
     /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", flex: 1, minWidth: 0 }, children: [
@@ -90,7 +93,7 @@ function PaletteInput(props) {
         }
       )
     ] }),
-    props.isLoading && /* @__PURE__ */ jsx(CircularProgress, { size: 18, sx: { flexShrink: 0 } })
+    props.isLoading && /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 18), sx: { flexShrink: 0 } })
   ] });
 }
 function FilterChips(props) {
@@ -207,7 +210,7 @@ function PaletteBody(view) {
 }
 var PALETTE_CARD_SX = {
   width: "100%",
-  maxWidth: 640,
+  maxWidth: sxRem(640),
   maxHeight: "100%",
   borderRadius: 2,
   overflow: "hidden",
@@ -261,4 +264,4 @@ export {
   PaletteScrollArea,
   createKeyDownHandler
 };
-//# sourceMappingURL=chunk-CJHP6E34.js.map
+//# sourceMappingURL=chunk-YAFBUYVW.js.map