@12-apps/ui 6.37.0 → 6.39.0

package/dist/{chunk-TBF2CPJW.js → chunk-KIHGTL2D.js}

@@ -1,6 +1,10 @@
 import {
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/Drawer/Drawer.tsx
 import Close from "@mui/icons-material/Close";
@@ -10,6 +14,10 @@ import IconButton from "@mui/material/IconButton/index.js";
 import Typography from "@mui/material/Typography/index.js";
 import { alpha, useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+var drawerLength = (theme, value) => {
+  if (typeof value !== "number") return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+};
 var resolveAnchor = (anchor, variant) => {
   if (anchor) return anchor;
   switch (variant) {
@@ -27,21 +35,23 @@ var resolveAnchor = (anchor, variant) => {
   }
 };
 var buildDrawerStyles = (theme, anchor, variant, width, height, paperSx) => {
+  const widthCss = drawerLength(theme, width);
+  const heightCss = drawerLength(theme, height);
   const baseStyles = {
-    width: ["left", "right"].includes(anchor) ? width : "100%",
-    height: ["top", "bottom"].includes(anchor) ? height : "100%",
+    width: ["left", "right"].includes(anchor) ? widthCss : "100%",
+    height: ["top", "bottom"].includes(anchor) ? heightCss : "100%",
     flexShrink: 0
   };
   if (variant === "glass") {
     return {
       ...baseStyles,
       "& .MuiDrawer-paper": {
-        width,
+        width: widthCss,
         height: "100%",
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: "blur(20px)",
+        backdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-        boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,
+        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,
         ...paperSx
       }
     };
@@ -49,8 +59,8 @@ var buildDrawerStyles = (theme, anchor, variant, width, height, paperSx) => {
   return {
     ...baseStyles,
     "& .MuiDrawer-paper": {
-      width: ["left", "right"].includes(anchor) ? width : "100%",
-      height: ["top", "bottom"].includes(anchor) ? height : "100%",
+      width: ["left", "right"].includes(anchor) ? widthCss : "100%",
+      height: ["top", "bottom"].includes(anchor) ? heightCss : "100%",
       boxSizing: "border-box",
       ...paperSx
     }
@@ -62,7 +72,7 @@ var Drawer = ({
   onClose,
   variant = "left",
   anchor,
-  width = 280,
+  width,
   height = "100%",
   persistent = false,
   backdrop = true,
@@ -89,7 +99,7 @@ var Drawer = ({
           invisible: !backdrop
         }
       },
-      sx: buildDrawerStyles(theme, drawerAnchor, variant, width, height, paperSx),
+      sx: buildDrawerStyles(theme, drawerAnchor, variant, width ?? 280, height, paperSx),
       className,
       "data-testid": dataTestId || "drawer",
       ...rest,
@@ -114,7 +124,7 @@ var DrawerHeader = ({
         alignItems: "center",
         padding: theme.spacing(2),
         borderBottom: `1px solid ${theme.palette.divider}`,
-        minHeight: 64,
+        minHeight: rem(theme, 64),
         justifyContent: "space-between"
       },
       children: [
@@ -154,4 +164,4 @@ export {
   DrawerHeader,
   DrawerContent
 };
-//# sourceMappingURL=chunk-TBF2CPJW.js.map
+//# sourceMappingURL=chunk-KIHGTL2D.js.map

package/dist/chunk-KIHGTL2D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Drawer/Drawer.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport MuiDrawer from '@mui/material/Drawer/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { DrawerContentProps,DrawerHeaderProps, DrawerProps } from './Drawer.types';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\ntype DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';\n\n/**\n * A `width`/`height` prop as CSS. `sx` reads a number of 1 or less as a\n * fraction of the parent, and that stays so; any other number is design px,\n * through the type scale; a string is as given.\n */\nconst drawerLength = (theme: Theme, value: number | string | undefined): string | undefined => {\n  if (typeof value !== 'number') return value;\n  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);\n};\n\n// `variant` doubles as a position preset, but an explicit `anchor` always wins.\nconst resolveAnchor = (\n  anchor: DrawerProps['anchor'],\n  variant: DrawerProps['variant'],\n): DrawerAnchor => {\n  if (anchor) return anchor;\n\n  // Map variant to anchor position\n  switch (variant) {\n    case 'right':\n      return 'right';\n    case 'top':\n      return 'top';\n    case 'bottom':\n      return 'bottom';\n    case 'glass':\n      return 'right';\n    case 'left':\n    default:\n      return 'left';\n  }\n};\n\nconst buildDrawerStyles = (\n  theme: Theme,\n  anchor: DrawerAnchor,\n  variant: DrawerProps['variant'],\n  width: DrawerProps['width'],\n  height: DrawerProps['height'],\n  // Merged LAST into the surface's own rules, so a caller can shape the sliding\n  // surface itself (rounded corners on a bottom sheet, a docked panel's offset)\n  // without reaching for the MUI paper class from outside. Undefined by default:\n  // omit it and the drawer styles exactly as it always has.\n  paperSx?: DrawerProps['paperSx'],\n) => {\n  const widthCss = drawerLength(theme, width);\n  const heightCss = drawerLength(theme, height);\n  const baseStyles = {\n    width: ['left', 'right'].includes(anchor) ? widthCss : '100%',\n    height: ['top', 'bottom'].includes(anchor) ? heightCss : '100%',\n    flexShrink: 0,\n  };\n\n  if (variant === 'glass') {\n    return {\n      ...baseStyles,\n      '& .MuiDrawer-paper': {\n        width: widthCss,\n        height: '100%',\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,\n        ...paperSx,\n      },\n    };\n  }\n\n  return {\n    ...baseStyles,\n    '& .MuiDrawer-paper': {\n      width: ['left', 'right'].includes(anchor) ? widthCss : '100%',\n      height: ['top', 'bottom'].includes(anchor) ? heightCss : '100%',\n      boxSizing: 'border-box',\n      ...paperSx,\n    },\n  };\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  children,\n  open,\n  onClose,\n  variant = 'left',\n  anchor,\n  width,\n  height = '100%',\n  persistent = false,\n  backdrop = true,\n  hideBackdrop = false,\n  keepMounted = false,\n  paperSx,\n  className,\n  dataTestId,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const drawerAnchor = resolveAnchor(anchor, variant);\n\n  return (\n    <MuiDrawer\n      anchor={drawerAnchor}\n      open={open}\n      onClose={onClose}\n      variant={persistent ? 'persistent' : 'temporary'}\n      ModalProps={{\n        keepMounted,\n        hideBackdrop,\n        BackdropProps: {\n          invisible: !backdrop,\n        },\n      }}\n      sx={buildDrawerStyles(theme, drawerAnchor, variant, width ?? 280, height, paperSx)}\n      className={className}\n      data-testid={dataTestId || 'drawer'}\n      {...rest}\n    >\n      {children}\n    </MuiDrawer>\n  );\n};\n\nexport const DrawerHeader: React.FC<DrawerHeaderProps> = ({\n  children,\n  onClose,\n  showCloseButton = true,\n  closeLabel,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId || 'drawer-header'}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        padding: theme.spacing(2),\n        borderBottom: `1px solid ${theme.palette.divider}`,\n        minHeight: rem(theme, 64),\n        justifyContent: 'space-between',\n      }}\n    >\n      <Box sx={{ flex: 1 }} data-testid={dataTestId ? `${dataTestId}-title` : 'drawer-title'}>\n        {typeof children === 'string' ? <Typography variant=\"h6\">{children}</Typography> : children}\n      </Box>\n      {showCloseButton && onClose && (\n        <IconButton\n          onClick={onClose}\n          edge=\"end\"\n          aria-label={closeLabel ?? 'Close drawer'}\n          data-testid={dataTestId ? `${dataTestId}-close` : 'drawer-close'}\n        >\n          <Close />\n        </IconButton>\n      )}\n    </Box>\n  );\n};\n\nexport const DrawerContent: React.FC<DrawerContentProps> = ({ children, padding = true, dataTestId }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId || 'drawer-content'}\n      sx={{\n        flex: 1,\n        overflow: 'auto',\n        padding: padding ? theme.spacing(2) : 0,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-3T5Z5HXF.js → chunk-KM3Y5TCG.js}

@@ -1,3 +1,7 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/utility/AnimatedIcon/AnimatedIcon.animations.ts
 import { keyframes } from "@mui/material/styles/index.js";
 var rotateAnimation = keyframes`
@@ -22,56 +26,56 @@ var pulseAnimation = keyframes`
     opacity: 1;
   }
 `;
-var translateAnimation = keyframes`
+var translateAnimation = (theme) => keyframes`
   0% {
     transform: translateY(0px);
   }
   50% {
-    transform: translateY(-8px);
+    transform: translateY(${rem(theme, -8)});
   }
   100% {
     transform: translateY(0px);
   }
 `;
-var glowPulseAnimation = keyframes`
+var glowPulseAnimation = (theme) => keyframes`
   0% {
-    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor, 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 15)} currentColor;
   }
   50% {
-    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
+    box-shadow: 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 20)} currentColor, 0 0 ${rem(theme, 30)} currentColor;
   }
   100% {
-    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+    box-shadow: 0 0 ${rem(theme, 5)} currentColor, 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 15)} currentColor;
   }
 `;
-var bounceAnimation = keyframes`
+var bounceAnimation = (theme) => keyframes`
   0%, 20%, 50%, 80%, 100% {
     transform: translateY(0);
   }
   40% {
-    transform: translateY(-20px);
+    transform: translateY(${rem(theme, -20)});
   }
   60% {
-    transform: translateY(-10px);
+    transform: translateY(${rem(theme, -10)});
   }
 `;
-var shakeAnimation = keyframes`
+var shakeAnimation = (theme) => keyframes`
   0%, 100% {
     transform: translateX(0);
   }
   10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-4px);
+    transform: translateX(${rem(theme, -4)});
   }
   20%, 40%, 60%, 80% {
-    transform: translateX(4px);
+    transform: translateX(${rem(theme, 4)});
   }
 `;
-var flipAnimation = keyframes`
+var flipAnimation = (theme) => keyframes`
   0% {
-    transform: perspective(400px) rotateY(0);
+    transform: perspective(${rem(theme, 400)}) rotateY(0);
   }
   100% {
-    transform: perspective(400px) rotateY(360deg);
+    transform: perspective(${rem(theme, 400)}) rotateY(360deg);
   }
 `;
 var spinAnimation = keyframes`
@@ -110,24 +114,24 @@ var heartbeatAnimation = keyframes`
     transform: scale(1);
   }
 `;
-var wobbleAnimation = keyframes`
+var wobbleAnimation = (theme) => keyframes`
   0%, 100% {
     transform: translateX(0) rotate(0deg);
   }
   15% {
-    transform: translateX(-10px) rotate(-5deg);
+    transform: translateX(${rem(theme, -10)}) rotate(-5deg);
   }
   30% {
-    transform: translateX(8px) rotate(3deg);
+    transform: translateX(${rem(theme, 8)}) rotate(3deg);
   }
   45% {
-    transform: translateX(-6px) rotate(-3deg);
+    transform: translateX(${rem(theme, -6)}) rotate(-3deg);
   }
   60% {
-    transform: translateX(4px) rotate(2deg);
+    transform: translateX(${rem(theme, 4)}) rotate(2deg);
   }
   75% {
-    transform: translateX(-2px) rotate(-1deg);
+    transform: translateX(${rem(theme, -2)}) rotate(-1deg);
   }
 `;
 var morphAnimation = keyframes`
@@ -165,15 +169,15 @@ var swingAnimation = keyframes`
     transform: rotate(0deg);
   }
 `;
-var floatAnimation = keyframes`
+var floatAnimation = (theme) => keyframes`
   0%, 100% {
     transform: translateY(0) translateX(0);
   }
   33% {
-    transform: translateY(-10px) translateX(-5px);
+    transform: translateY(${rem(theme, -10)}) translateX(${rem(theme, -5)});
   }
   66% {
-    transform: translateY(5px) translateX(5px);
+    transform: translateY(${rem(theme, 5)}) translateX(${rem(theme, 5)});
   }
 `;
 var jelloAnimation = keyframes`
@@ -200,46 +204,46 @@ var rippleAnimation = keyframes`
     opacity: 0;
   }
 `;
-var neonFlickerAnimation = keyframes`
+var neonFlickerAnimation = (theme) => keyframes`
   0%, 100% {
     opacity: 1;
-    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+    filter: brightness(1) drop-shadow(0 0 ${rem(theme, 10)} currentColor);
   }
   10% {
     opacity: 0.8;
-    filter: brightness(0.8) drop-shadow(0 0 5px currentColor);
+    filter: brightness(0.8) drop-shadow(0 0 ${rem(theme, 5)} currentColor);
   }
   20% {
     opacity: 1;
-    filter: brightness(1.2) drop-shadow(0 0 15px currentColor);
+    filter: brightness(1.2) drop-shadow(0 0 ${rem(theme, 15)} currentColor);
   }
   30% {
     opacity: 0.9;
-    filter: brightness(0.9) drop-shadow(0 0 8px currentColor);
+    filter: brightness(0.9) drop-shadow(0 0 ${rem(theme, 8)} currentColor);
   }
   40% {
     opacity: 1;
-    filter: brightness(1.1) drop-shadow(0 0 12px currentColor);
+    filter: brightness(1.1) drop-shadow(0 0 ${rem(theme, 12)} currentColor);
   }
   50% {
     opacity: 0.95;
-    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+    filter: brightness(1) drop-shadow(0 0 ${rem(theme, 10)} currentColor);
   }
   60% {
     opacity: 0.85;
-    filter: brightness(0.85) drop-shadow(0 0 6px currentColor);
+    filter: brightness(0.85) drop-shadow(0 0 ${rem(theme, 6)} currentColor);
   }
   70% {
     opacity: 1;
-    filter: brightness(1.15) drop-shadow(0 0 14px currentColor);
+    filter: brightness(1.15) drop-shadow(0 0 ${rem(theme, 14)} currentColor);
   }
   80% {
     opacity: 0.9;
-    filter: brightness(0.95) drop-shadow(0 0 9px currentColor);
+    filter: brightness(0.95) drop-shadow(0 0 ${rem(theme, 9)} currentColor);
   }
   90% {
     opacity: 1;
-    filter: brightness(1.05) drop-shadow(0 0 11px currentColor);
+    filter: brightness(1.05) drop-shadow(0 0 ${rem(theme, 11)} currentColor);
   }
 `;
 var breatheAnimation = keyframes`
@@ -273,4 +277,4 @@ export {
   neonFlickerAnimation,
   breatheAnimation
 };
-//# sourceMappingURL=chunk-3T5Z5HXF.js.map
+//# sourceMappingURL=chunk-KM3Y5TCG.js.map

package/dist/chunk-KM3Y5TCG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/AnimatedIcon/AnimatedIcon.animations.ts"],"sourcesContent":["import { keyframes } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\n\nimport { rem } from '../../../tokens/relative';\n\nexport const rotateAnimation = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`;\n\nexport const pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.1);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nexport const translateAnimation = (theme: Theme) => keyframes`\n  0% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(${rem(theme, -8)});\n  }\n  100% {\n    transform: translateY(0px);\n  }\n`;\n\nexport const glowPulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 ${rem(theme, 5)} currentColor, 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 15)} currentColor;\n  }\n  50% {\n    box-shadow: 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 20)} currentColor, 0 0 ${rem(theme, 30)} currentColor;\n  }\n  100% {\n    box-shadow: 0 0 ${rem(theme, 5)} currentColor, 0 0 ${rem(theme, 10)} currentColor, 0 0 ${rem(theme, 15)} currentColor;\n  }\n`;\n\n// New animation keyframes\nexport const bounceAnimation = (theme: Theme) => keyframes`\n  0%, 20%, 50%, 80%, 100% {\n    transform: translateY(0);\n  }\n  40% {\n    transform: translateY(${rem(theme, -20)});\n  }\n  60% {\n    transform: translateY(${rem(theme, -10)});\n  }\n`;\n\nexport const shakeAnimation = (theme: Theme) => keyframes`\n  0%, 100% {\n    transform: translateX(0);\n  }\n  10%, 30%, 50%, 70%, 90% {\n    transform: translateX(${rem(theme, -4)});\n  }\n  20%, 40%, 60%, 80% {\n    transform: translateX(${rem(theme, 4)});\n  }\n`;\n\nexport const flipAnimation = (theme: Theme) => keyframes`\n  0% {\n    transform: perspective(${rem(theme, 400)}) rotateY(0);\n  }\n  100% {\n    transform: perspective(${rem(theme, 400)}) rotateY(360deg);\n  }\n`;\n\nexport const spinAnimation = keyframes`\n  0% {\n    transform: rotate(0deg) scale(1);\n  }\n  50% {\n    transform: rotate(180deg) scale(1.2);\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n`;\n\nexport const fadeInOutAnimation = keyframes`\n  0%, 100% {\n    opacity: 0.3;\n  }\n  50% {\n    opacity: 1;\n  }\n`;\n\nexport const heartbeatAnimation = keyframes`\n  0%, 100% {\n    transform: scale(1);\n  }\n  5% {\n    transform: scale(1.25);\n  }\n  10% {\n    transform: scale(1);\n  }\n  15% {\n    transform: scale(1.25);\n  }\n  20% {\n    transform: scale(1);\n  }\n`;\n\nexport const wobbleAnimation = (theme: Theme) => keyframes`\n  0%, 100% {\n    transform: translateX(0) rotate(0deg);\n  }\n  15% {\n    transform: translateX(${rem(theme, -10)}) rotate(-5deg);\n  }\n  30% {\n    transform: translateX(${rem(theme, 8)}) rotate(3deg);\n  }\n  45% {\n    transform: translateX(${rem(theme, -6)}) rotate(-3deg);\n  }\n  60% {\n    transform: translateX(${rem(theme, 4)}) rotate(2deg);\n  }\n  75% {\n    transform: translateX(${rem(theme, -2)}) rotate(-1deg);\n  }\n`;\n\nexport const morphAnimation = keyframes`\n  0%, 100% {\n    border-radius: 50%;\n    transform: scale(1);\n  }\n  25% {\n    border-radius: 30%;\n    transform: scale(1.1);\n  }\n  50% {\n    border-radius: 20%;\n    transform: scale(0.95);\n  }\n  75% {\n    border-radius: 40%;\n    transform: scale(1.05);\n  }\n`;\n\nexport const swingAnimation = keyframes`\n  20% {\n    transform: rotate(15deg);\n  }\n  40% {\n    transform: rotate(-10deg);\n  }\n  60% {\n    transform: rotate(5deg);\n  }\n  80% {\n    transform: rotate(-5deg);\n  }\n  100% {\n    transform: rotate(0deg);\n  }\n`;\n\nexport const floatAnimation = (theme: Theme) => keyframes`\n  0%, 100% {\n    transform: translateY(0) translateX(0);\n  }\n  33% {\n    transform: translateY(${rem(theme, -10)}) translateX(${rem(theme, -5)});\n  }\n  66% {\n    transform: translateY(${rem(theme, 5)}) translateX(${rem(theme, 5)});\n  }\n`;\n\nexport const jelloAnimation = keyframes`\n  0%, 100% {\n    transform: scale(1, 1);\n  }\n  25% {\n    transform: scale(0.9, 1.1);\n  }\n  50% {\n    transform: scale(1.1, 0.9);\n  }\n  75% {\n    transform: scale(0.95, 1.05);\n  }\n`;\n\nexport const rippleAnimation = keyframes`\n  0% {\n    transform: scale(0.8);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n`;\n\nexport const neonFlickerAnimation = (theme: Theme) => keyframes`\n  0%, 100% {\n    opacity: 1;\n    filter: brightness(1) drop-shadow(0 0 ${rem(theme, 10)} currentColor);\n  }\n  10% {\n    opacity: 0.8;\n    filter: brightness(0.8) drop-shadow(0 0 ${rem(theme, 5)} currentColor);\n  }\n  20% {\n    opacity: 1;\n    filter: brightness(1.2) drop-shadow(0 0 ${rem(theme, 15)} currentColor);\n  }\n  30% {\n    opacity: 0.9;\n    filter: brightness(0.9) drop-shadow(0 0 ${rem(theme, 8)} currentColor);\n  }\n  40% {\n    opacity: 1;\n    filter: brightness(1.1) drop-shadow(0 0 ${rem(theme, 12)} currentColor);\n  }\n  50% {\n    opacity: 0.95;\n    filter: brightness(1) drop-shadow(0 0 ${rem(theme, 10)} currentColor);\n  }\n  60% {\n    opacity: 0.85;\n    filter: brightness(0.85) drop-shadow(0 0 ${rem(theme, 6)} currentColor);\n  }\n  70% {\n    opacity: 1;\n    filter: brightness(1.15) drop-shadow(0 0 ${rem(theme, 14)} currentColor);\n  }\n  80% {\n    opacity: 0.9;\n    filter: brightness(0.95) drop-shadow(0 0 ${rem(theme, 9)} currentColor);\n  }\n  90% {\n    opacity: 1;\n    filter: brightness(1.05) drop-shadow(0 0 ${rem(theme, 11)} currentColor);\n  }\n`;\n\nexport const breatheAnimation = keyframes`\n  0%, 100% {\n    transform: scale(1);\n    filter: brightness(1);\n  }\n  50% {\n    transform: scale(1.05);\n    filter: brightness(1.2);\n  }\n`;\n\n// Size configurations\n"],"mappings":"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","names":[]}

package/dist/{chunk-C55AWF3U.js → chunk-KRQUPE4K.js}

@@ -1,6 +1,6 @@
 import {
   STACK_BREAK
-} from "./chunk-2ZIHZLF5.js";
+} from "./chunk-F44R7US6.js";
 import {
   CARD_RADIUS,
   cardSurfaceStyles,
@@ -16,10 +16,10 @@ import {
   RAIL_GAP,
   railsTemplateFor,
   useListRails
-} from "./chunk-NB3FGWU4.js";
+} from "./chunk-EQXIW5MQ.js";
 import {
   DENSITY_ROW_PADDING
-} from "./chunk-PMOEG36E.js";
+} from "./chunk-XZJM6EPC.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -189,4 +189,4 @@ export {
   actionProps,
   rowStyles
 };
-//# sourceMappingURL=chunk-C55AWF3U.js.map
+//# sourceMappingURL=chunk-KRQUPE4K.js.map

package/dist/{chunk-SJO3K7SB.js → chunk-KXLUMEDX.js}

@@ -1,15 +1,15 @@
 import {
   SaveViewModal
-} from "./chunk-2BIVCYTO.js";
+} from "./chunk-27LOJVR3.js";
 import {
   ManageViewsDialog
-} from "./chunk-LT4NEKXB.js";
+} from "./chunk-QA2ZGCRL.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   SavedViewsMenu
-} from "./chunk-EL7CMURV.js";
+} from "./chunk-3LSIFHQK.js";
 import {
   Alert
 } from "./chunk-AUHYR7ID.js";
@@ -121,4 +121,4 @@ export {
   ViewsMenuSlot,
   ViewDialogs
 };
-//# sourceMappingURL=chunk-SJO3K7SB.js.map
+//# sourceMappingURL=chunk-KXLUMEDX.js.map

package/dist/{chunk-RWTFZ7J5.js → chunk-L4G5BZFF.js}

@@ -4,10 +4,13 @@ import {
   titleLeftStyles,
   titleRightStyles,
   titleStyles
-} from "./chunk-2NLYGZP3.js";
+} from "./chunk-77JL5XVD.js";
 import {
   safeAreaBottom
 } from "./chunk-AKZWDZCZ.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/feedback/StackedModal/StackedModal.parts.tsx
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
@@ -20,7 +23,7 @@ import DialogTitle from "@mui/material/DialogTitle/index.js";
 import IconButton from "@mui/material/IconButton/index.js";
 import Skeleton from "@mui/material/Skeleton/index.js";
 import Typography from "@mui/material/Typography/index.js";
-import { styled } from "@mui/material/styles/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var StyledDialogTitle = styled(DialogTitle, {
@@ -63,10 +66,13 @@ var modalAriaIds = (modalId, ariaLabelledBy, ariaDescribedBy) => ({
 var ModalLoadingOverlay = ({
   loadingText,
   dataTestId
-}) => /* @__PURE__ */ jsxs(LoadingOverlay, { "data-testid": testId(dataTestId, "loading-overlay"), children: [
-  /* @__PURE__ */ jsx(CircularProgress, { size: 40, "data-testid": testId(dataTestId, "loading-spinner") }),
-  loadingText && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 2 }, "data-testid": testId(dataTestId, "loading-text"), children: loadingText })
-] });
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(LoadingOverlay, { "data-testid": testId(dataTestId, "loading-overlay"), children: [
+    /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 40), "data-testid": testId(dataTestId, "loading-spinner") }),
+    loadingText && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 2 }, "data-testid": testId(dataTestId, "loading-text"), children: loadingText })
+  ] });
+};
 var HeaderLeadingButton = ({ canGoBack, onBack, backLabel, onClose, hideClose, rtl, dataTestId }) => {
   if (canGoBack) {
     return /* @__PURE__ */ jsx(
@@ -136,12 +142,15 @@ var ModalHeader = ({
   ] }),
   /* @__PURE__ */ jsx(DialogTitleRight, { "data-testid": testId(dataTestId, "header-actions"), children: headerActions })
 ] });
-var ContentSkeleton = () => /* @__PURE__ */ jsxs(Box, { sx: { p: 3 }, children: [
-  /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "60%", height: 32 }),
-  /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%" }),
-  /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%" }),
-  /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", height: 200, sx: { mt: 2 } })
-] });
+var ContentSkeleton = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Box, { sx: { p: 3 }, children: [
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "60%", height: rem(theme, 32) }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%" }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%" }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", height: rem(theme, 200), sx: { mt: 2 } })
+  ] });
+};
 var ModalBody = ({
   descId,
   showSkeleton,
@@ -222,4 +231,4 @@ export {
   ModalFooter,
   ModalPanelContents
 };
-//# sourceMappingURL=chunk-RWTFZ7J5.js.map
+//# sourceMappingURL=chunk-L4G5BZFF.js.map

package/dist/chunk-L4G5BZFF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/StackedModal/StackedModal.parts.tsx"],"sourcesContent":["import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport CloseIcon from '@mui/icons-material/Close';\nimport Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport DialogActions from '@mui/material/DialogActions/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport DialogTitle from '@mui/material/DialogTitle/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Skeleton from '@mui/material/Skeleton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\nimport { rem } from '../../../tokens/relative';\nimport { safeAreaBottom } from '../../../utils/viewport';\nimport {\n  loadingOverlayStyles,\n  modalContentStyles,\n  titleLeftStyles,\n  titleRightStyles,\n  titleStyles,\n} from './StackedModal.styles';\n\nconst StyledDialogTitle = styled(DialogTitle, {\n  shouldForwardProp: (prop) => prop !== 'rtl',\n})<{ rtl?: boolean }>(({ theme, rtl }) => titleStyles(theme, rtl));\n\nconst DialogTitleLeft = styled(Box)(({ theme }) => titleLeftStyles(theme));\nconst DialogTitleRight = styled(Box)(({ theme }) => titleRightStyles(theme));\nconst LoadingOverlay = styled(Box)(({ theme }) => loadingOverlayStyles(theme));\n\n/**\n * The padded content wrapper callers put inside a StackedModal. The explicit\n * `typeof DialogContent` annotation keeps its type nameable across package\n * boundaries (TS2742) now that it is re-exported from the barrel.\n */\nexport const StackedModalContent: typeof DialogContent = styled(DialogContent)(({ theme }) =>\n  modalContentStyles(theme),\n) as typeof DialogContent;\n\n/** Sub-element test IDs derive from the modal's own, or stay off when it has none. */\nexport const testId = (base: string | undefined, suffix: string): string | undefined =>\n  base ? `${base}-${suffix}` : undefined;\n\n/**\n * A wrapper marking the subtree that should render as modal actions — the\n * StackedModal pulls it out of `children` and places it by device.\n */\nexport const StackedModalActions: FC<{ children?: ReactNode }> = ({ children }) => <>{children}</>;\n\n/** Separates the `StackedModalActions` subtree from the rest of the content. */\nconst splitModalChildren = (children: ReactNode): { content: ReactNode; actions: ReactNode } => {\n  let actions: ReactNode = null;\n\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement<{ children?: ReactNode }>(child) && child.type === StackedModalActions) {\n      actions = child.props.children;\n    }\n  });\n\n  const content = React.Children.toArray(children).filter(\n    (child) => !(React.isValidElement(child) && child.type === StackedModalActions),\n  );\n\n  return { content, actions };\n};\n\n/**\n * Works out what renders where: a `StackedModalActions` child wins over the\n * `actions` prop, and on phones those actions move out of the header into a\n * pinned bottom bar.\n */\nexport const resolveModalContent = (\n  children: ReactNode,\n  actions: ReactNode,\n  isMobile: boolean,\n): {\n  content: ReactNode;\n  modalActions: ReactNode;\n  headerActions: ReactNode;\n  hasMobileActions: boolean;\n} => {\n  const { content, actions: childActions } = splitModalChildren(children);\n  const modalActions = childActions ?? actions;\n  return {\n    content,\n    modalActions,\n    headerActions: isMobile ? null : modalActions,\n    hasMobileActions: Boolean(isMobile && modalActions),\n  };\n};\n\n/** The panel's own ARIA ids, unless the caller wired it to its own labels. */\nexport const modalAriaIds = (\n  modalId: string,\n  ariaLabelledBy?: string,\n  ariaDescribedBy?: string,\n): { titleId: string; descId: string } => ({\n  titleId: ariaLabelledBy || `modal-title-${modalId}`,\n  descId: ariaDescribedBy || `modal-desc-${modalId}`,\n});\n\nexport const ModalLoadingOverlay: FC<{ loadingText?: string; dataTestId?: string }> = ({\n  loadingText,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n  return (\n    <LoadingOverlay data-testid={testId(dataTestId, 'loading-overlay')}>\n      <CircularProgress size={rem(theme, 40)} data-testid={testId(dataTestId, 'loading-spinner')} />\n      {loadingText && (\n        <Typography variant=\"body2\" sx={{ mt: 2 }} data-testid={testId(dataTestId, 'loading-text')}>\n          {loadingText}\n        </Typography>\n      )}\n    </LoadingOverlay>\n  );\n};\n\ninterface ModalHeaderProps {\n  titleId: string;\n  navigationTitle?: ReactNode;\n  /** Deeper than the first panel, so the leading button goes back instead of closing. */\n  canGoBack: boolean;\n  onBack: () => void;\n  /** The back arrow's accessible name — it carries a glyph only. REQUIRED. */\n  backLabel: string;\n  onClose: () => void;\n  /** Renders the bar without its ✕ — the panel's content owns the dismiss. */\n  hideClose?: boolean;\n  /** Header actions — desktop only; on phones they move to the footer. */\n  headerActions?: ReactNode;\n  rtl?: boolean;\n  dataTestId?: string;\n}\n\n/**\n * The bar's leading control: back at depth ≥2, otherwise close — and nothing at\n * all when the panel's content carries its own ✕ (`hideClose`).\n */\nconst HeaderLeadingButton: FC<\n  Pick<\n    ModalHeaderProps,\n    'canGoBack' | 'onBack' | 'backLabel' | 'onClose' | 'hideClose' | 'rtl' | 'dataTestId'\n  >\n> = ({ canGoBack, onBack, backLabel, onClose, hideClose, rtl, dataTestId }) => {\n  if (canGoBack) {\n    return (\n      <IconButton\n        edge=\"start\"\n        color=\"inherit\"\n        onClick={onBack}\n        aria-label={backLabel}\n        size=\"small\"\n        sx={{ transform: rtl ? 'rotate(180deg)' : 'none' }}\n        data-testid={testId(dataTestId, 'back-button')}\n      >\n        <ChevronLeftIcon />\n      </IconButton>\n    );\n  }\n  if (hideClose) return null;\n  return (\n    <IconButton\n      edge=\"start\"\n      color=\"inherit\"\n      onClick={onClose}\n      aria-label=\"close\"\n      size=\"small\"\n      data-testid={testId(dataTestId, 'close-button')}\n    >\n      <CloseIcon />\n    </IconButton>\n  );\n};\n\nexport const ModalHeader: FC<ModalHeaderProps> = ({\n  titleId,\n  navigationTitle,\n  canGoBack,\n  onBack,\n  onClose,\n  hideClose,\n  backLabel,\n  headerActions,\n  rtl,\n  dataTestId,\n}) => (\n  <StyledDialogTitle id={titleId} rtl={rtl} data-testid={testId(dataTestId, 'header')}>\n    <DialogTitleLeft>\n      <HeaderLeadingButton\n        canGoBack={canGoBack}\n        onBack={onBack}\n        backLabel={backLabel}\n        onClose={onClose}\n        hideClose={hideClose}\n        rtl={rtl}\n        dataTestId={dataTestId}\n      />\n      {navigationTitle && (\n        <Typography\n          variant=\"h6\"\n          component=\"h2\"\n          noWrap\n          sx={{ ml: canGoBack || !hideClose ? 1 : 0 }}\n          data-testid={testId(dataTestId, 'title')}\n        >\n          {navigationTitle}\n        </Typography>\n      )}\n    </DialogTitleLeft>\n    <DialogTitleRight data-testid={testId(dataTestId, 'header-actions')}>\n      {headerActions}\n    </DialogTitleRight>\n  </StyledDialogTitle>\n);\n\nconst ContentSkeleton: FC = () => {\n  const theme = useTheme();\n  return (\n    <Box sx={{ p: 3 }}>\n      <Skeleton variant=\"text\" width=\"60%\" height={rem(theme, 32)} />\n      <Skeleton variant=\"text\" width=\"100%\" />\n      <Skeleton variant=\"text\" width=\"100%\" />\n      <Skeleton variant=\"rectangular\" height={rem(theme, 200)} sx={{ mt: 2 }} />\n    </Box>\n  );\n};\n\ninterface ModalBodyProps {\n  descId: string;\n  showSkeleton: boolean;\n  /** When there is no action bar, the body is what reaches the bottom of the panel. */\n  endsPanel: boolean;\n  dataTestId?: string;\n  children?: ReactNode;\n}\n\nexport const ModalBody: FC<ModalBodyProps> = ({\n  descId,\n  showSkeleton,\n  endsPanel,\n  dataTestId,\n  children,\n}) => (\n  <Box\n    id={descId}\n    sx={{\n      position: 'relative',\n      flex: 1,\n      overflow: 'auto',\n      // iOS momentum scrolling, and no scroll-chaining to the page behind —\n      // without `contain`, an overscroll at the end of the list rubber-bands the\n      // whole panel and springs back before the last row can be tapped.\n      WebkitOverflowScrolling: 'touch',\n      overscrollBehavior: 'contain',\n      // The content itself ends the panel when there is no action bar, so it has\n      // to clear the home indicator on its own.\n      ...(endsPanel ? safeAreaBottom(0) : {}),\n    }}\n    data-testid={testId(dataTestId, 'content')}\n  >\n    {showSkeleton ? <ContentSkeleton /> : children}\n  </Box>\n);\n\n/** The phone-only pinned action bar; on desktop the actions live in the header. */\nexport const ModalFooter: FC<{ dataTestId?: string; children?: ReactNode }> = ({\n  dataTestId,\n  children,\n}) => (\n  <DialogActions\n    sx={{\n      borderTop: (theme) => `1px solid ${theme.palette.divider}`,\n      padding: 2,\n      // Never let the action row sit under the iOS home indicator.\n      flexShrink: 0,\n      ...safeAreaBottom(16),\n    }}\n    data-testid={testId(dataTestId, 'footer')}\n  >\n    {children}\n  </DialogActions>\n);\n\ninterface PanelContentsProps extends ModalHeaderProps {\n  showSkeleton: boolean;\n  loadingText?: string;\n  descId: string;\n  content: ReactNode;\n  /** The resolved actions, already placed in the header or destined for the footer. */\n  modalActions: ReactNode;\n  hasMobileActions: boolean;\n}\n\n/** Everything inside the sliding panel: the loading veil, header, body and action bar. */\nexport const ModalPanelContents: FC<PanelContentsProps> = ({\n  showSkeleton,\n  loadingText,\n  descId,\n  content,\n  modalActions,\n  hasMobileActions,\n  ...header\n}) => (\n  <>\n    {showSkeleton && (\n      <ModalLoadingOverlay loadingText={loadingText} dataTestId={header.dataTestId} />\n    )}\n    <ModalHeader {...header} />\n    <ModalBody\n      descId={descId}\n      showSkeleton={showSkeleton}\n      endsPanel={!hasMobileActions}\n      dataTestId={header.dataTestId}\n    >\n      {content}\n    </ModalBody>\n    {hasMobileActions && (\n      <ModalFooter dataTestId={header.dataTestId}>{modalActions}</ModalFooter>\n    )}\n  </>\n);\n"],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,qBAAqB;AAC5B,OAAO,eAAe;AACtB,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAC1B,OAAO,mBAAmB;AAC1B,OAAO,iBAAiB;AACxB,OAAO,gBAAgB;AACvB,OAAO,cAAc;AACrB,OAAO,gBAAgB;AACvB,SAAS,QAAQ,gBAAgB;AAEjC,OAAO,WAAW;AAoCiE,wBA4D/E,YA5D+E;AAzBnF,IAAM,oBAAoB,OAAO,aAAa;AAAA,EAC5C,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC,EAAqB,CAAC,EAAE,OAAO,IAAI,MAAM,YAAY,OAAO,GAAG,CAAC;AAEjE,IAAM,kBAAkB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,MAAM,gBAAgB,KAAK,CAAC;AACzE,IAAM,mBAAmB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,MAAM,iBAAiB,KAAK,CAAC;AAC3E,IAAM,iBAAiB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,MAAM,qBAAqB,KAAK,CAAC;AAOtE,IAAM,sBAA4C,OAAO,aAAa;AAAA,EAAE,CAAC,EAAE,MAAM,MACtF,mBAAmB,KAAK;AAC1B;AAGO,IAAM,SAAS,CAAC,MAA0B,WAC/C,OAAO,GAAG,IAAI,IAAI,MAAM,KAAK;AAMxB,IAAM,sBAAoD,CAAC,EAAE,SAAS,MAAM,gCAAG,UAAS;AAG/F,IAAM,qBAAqB,CAAC,aAAoE;AAC9F,MAAI,UAAqB;AAEzB,QAAM,SAAS,QAAQ,UAAU,CAAC,UAAU;AAC1C,QAAI,MAAM,eAAyC,KAAK,KAAK,MAAM,SAAS,qBAAqB;AAC/F,gBAAU,MAAM,MAAM;AAAA,IACxB;AAAA,EACF,CAAC;AAED,QAAM,UAAU,MAAM,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAC/C,CAAC,UAAU,EAAE,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AAAA,EAC7D;AAEA,SAAO,EAAE,SAAS,QAAQ;AAC5B;AAOO,IAAM,sBAAsB,CACjC,UACA,SACA,aAMG;AACH,QAAM,EAAE,SAAS,SAAS,aAAa,IAAI,mBAAmB,QAAQ;AACtE,QAAM,eAAe,gBAAgB;AACrC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,eAAe,WAAW,OAAO;AAAA,IACjC,kBAAkB,QAAQ,YAAY,YAAY;AAAA,EACpD;AACF;AAGO,IAAM,eAAe,CAC1B,SACA,gBACA,qBACyC;AAAA,EACzC,SAAS,kBAAkB,eAAe,OAAO;AAAA,EACjD,QAAQ,mBAAmB,cAAc,OAAO;AAClD;AAEO,IAAM,sBAAyE,CAAC;AAAA,EACrF;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,kBAAe,eAAa,OAAO,YAAY,iBAAiB,GAC/D;AAAA,wBAAC,oBAAiB,MAAM,IAAI,OAAO,EAAE,GAAG,eAAa,OAAO,YAAY,iBAAiB,GAAG;AAAA,IAC3F,eACC,oBAAC,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAE,GAAG,eAAa,OAAO,YAAY,cAAc,GACtF,uBACH;AAAA,KAEJ;AAEJ;AAuBA,IAAM,sBAKF,CAAC,EAAE,WAAW,QAAQ,WAAW,SAAS,WAAW,KAAK,WAAW,MAAM;AAC7E,MAAI,WAAW;AACb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAAS;AAAA,QACT,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,IAAI,EAAE,WAAW,MAAM,mBAAmB,OAAO;AAAA,QACjD,eAAa,OAAO,YAAY,aAAa;AAAA,QAE7C,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,EAEJ;AACA,MAAI,UAAW,QAAO;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAM;AAAA,MACN,SAAS;AAAA,MACT,cAAW;AAAA,MACX,MAAK;AAAA,MACL,eAAa,OAAO,YAAY,cAAc;AAAA,MAE9C,8BAAC,aAAU;AAAA;AAAA,EACb;AAEJ;AAEO,IAAM,cAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,qBAAkB,IAAI,SAAS,KAAU,eAAa,OAAO,YAAY,QAAQ,GAChF;AAAA,uBAAC,mBACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACC,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,QAAM;AAAA,QACN,IAAI,EAAE,IAAI,aAAa,CAAC,YAAY,IAAI,EAAE;AAAA,QAC1C,eAAa,OAAO,YAAY,OAAO;AAAA,QAEtC;AAAA;AAAA,IACH;AAAA,KAEJ;AAAA,EACA,oBAAC,oBAAiB,eAAa,OAAO,YAAY,gBAAgB,GAC/D,yBACH;AAAA,GACF;AAGF,IAAM,kBAAsB,MAAM;AAChC,QAAM,QAAQ,SAAS;AACvB,SACE,qBAAC,OAAI,IAAI,EAAE,GAAG,EAAE,GACd;AAAA,wBAAC,YAAS,SAAQ,QAAO,OAAM,OAAM,QAAQ,IAAI,OAAO,EAAE,GAAG;AAAA,IAC7D,oBAAC,YAAS,SAAQ,QAAO,OAAM,QAAO;AAAA,IACtC,oBAAC,YAAS,SAAQ,QAAO,OAAM,QAAO;AAAA,IACtC,oBAAC,YAAS,SAAQ,eAAc,QAAQ,IAAI,OAAO,GAAG,GAAG,IAAI,EAAE,IAAI,EAAE,GAAG;AAAA,KAC1E;AAEJ;AAWO,IAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,IACJ,IAAI;AAAA,MACF,UAAU;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA;AAAA;AAAA;AAAA,MAIV,yBAAyB;AAAA,MACzB,oBAAoB;AAAA;AAAA;AAAA,MAGpB,GAAI,YAAY,eAAe,CAAC,IAAI,CAAC;AAAA,IACvC;AAAA,IACA,eAAa,OAAO,YAAY,SAAS;AAAA,IAExC,yBAAe,oBAAC,mBAAgB,IAAK;AAAA;AACxC;AAIK,IAAM,cAAiE,CAAC;AAAA,EAC7E;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,WAAW,CAAC,UAAU,aAAa,MAAM,QAAQ,OAAO;AAAA,MACxD,SAAS;AAAA;AAAA,MAET,YAAY;AAAA,MACZ,GAAG,eAAe,EAAE;AAAA,IACtB;AAAA,IACA,eAAa,OAAO,YAAY,QAAQ;AAAA,IAEvC;AAAA;AACH;AAcK,IAAM,qBAA6C,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE,iCACG;AAAA,kBACC,oBAAC,uBAAoB,aAA0B,YAAY,OAAO,YAAY;AAAA,EAEhF,oBAAC,eAAa,GAAG,QAAQ;AAAA,EACzB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,CAAC;AAAA,MACZ,YAAY,OAAO;AAAA,MAElB;AAAA;AAAA,EACH;AAAA,EACC,oBACC,oBAAC,eAAY,YAAY,OAAO,YAAa,wBAAa;AAAA,GAE9D;","names":[]}

package/dist/{chunk-HB7ISSLK.js → chunk-L5RQIQIP.js}

@@ -1,9 +1,13 @@
 import {
   slideIn
-} from "./chunk-6GRZ77IS.js";
+} from "./chunk-3AIRFAI3.js";
 import {
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx
 import Box from "@mui/material/Box/index.js";
@@ -12,10 +16,10 @@ import ListItemButton from "@mui/material/ListItemButton/index.js";
 import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-var megaMenuSlide = keyframes`
+var megaMenuSlide = (theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(${rem(theme, 20)});
   }
   to {
     opacity: 1;
@@ -27,35 +31,35 @@ var NavigationContainer = styled(Box, {
 })(({ theme, variant, collapsed, minimal }) => ({
   display: "flex",
   position: "relative",
-  animation: `${slideIn} 0.4s ease-out`,
+  animation: `${slideIn(theme)} 0.4s ease-out`,
   ...variant === "horizontal" && {
     flexDirection: "row",
     alignItems: "center",
     width: "100%",
     ...!minimal && {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.95)} 0%, ${alpha(theme.palette.background.paper, 0.98)} 100%)`,
-      backdropFilter: "blur(10px)",
+      backdropFilter: `blur(${rem(theme, 10)})`,
       borderRadius: theme.spacing(2),
-      boxShadow: `0 8px 32px ${shadowInk(theme, 0.08)}`
+      boxShadow: `0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.08)}`
     }
   },
   ...variant === "vertical" && {
     flexDirection: "column",
-    width: collapsed ? 80 : 280,
+    width: rem(theme, collapsed ? 80 : 280),
     transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
     height: "100%",
     ...!minimal && {
       background: `linear-gradient(180deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
-      backdropFilter: "blur(12px)",
+      backdropFilter: `blur(${rem(theme, 12)})`,
       borderRadius: theme.spacing(2),
-      boxShadow: `0 12px 40px ${shadowInk(theme, 0.1)}`,
+      boxShadow: `0 ${rems(theme, 12, 40)} ${shadowInk(theme, 0.1)}`,
       "&::before": {
         content: '""',
         position: "absolute",
         top: 0,
         left: 0,
         right: 0,
-        height: "200px",
+        height: rem(theme, 200),
         background: `radial-gradient(ellipse at top, ${alpha(theme.palette.primary.main, 0.05)} 0%, transparent 70%)`,
         pointerEvents: "none"
       }
@@ -66,10 +70,10 @@ var NavigationContainer = styled(Box, {
     width: "100%",
     ...!minimal && {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.default, 0.95)} 100%)`,
-      backdropFilter: "blur(15px)",
+      backdropFilter: `blur(${rem(theme, 15)})`,
       borderRadius: theme.spacing(3),
       overflow: "hidden",
-      boxShadow: `0 20px 60px ${shadowInk(theme, 0.12)}`
+      boxShadow: `0 ${rems(theme, 20, 60)} ${shadowInk(theme, 0.12)}`
     }
   }
 }));
@@ -85,7 +89,7 @@ var StyledList = styled(List, {
   },
   ...variant === "mega" && {
     display: "grid",
-    gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+    gridTemplateColumns: `repeat(auto-fit, minmax(${rem(theme, 250)}, 1fr))`,
     gap: theme.spacing(2),
     padding: theme.spacing(2)
   }
@@ -95,7 +99,7 @@ var LogoContainer = styled(Box)(({ theme }) => ({
   marginBottom: theme.spacing(2),
   position: "relative",
   background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.08)} 0%, ${alpha(theme.palette.primary.dark, 0.04)} 100%)`,
-  borderBottom: `2px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+  borderBottom: `${rem(theme, 2)} solid ${alpha(theme.palette.primary.main, 0.2)}`,
   overflow: "hidden",
   "&::before": {
     content: '""',
@@ -105,7 +109,7 @@ var LogoContainer = styled(Box)(({ theme }) => ({
     width: "200%",
     height: "200%",
     background: `radial-gradient(circle, ${alpha(theme.palette.primary.light, 0.1)} 0%, transparent 70%)`,
-    animation: `${slideIn} 1s ease-out`
+    animation: `${slideIn(theme)} 1s ease-out`
   },
   "& > *": {
     position: "relative",
@@ -121,7 +125,7 @@ var CollapseButton = styled(ListItemButton)(({ theme }) => ({
   "&:hover": {
     backgroundColor: alpha(theme.palette.primary.main, 0.12),
     transform: "scale(1.05)",
-    boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.2)}`,
+    boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(theme.palette.primary.main, 0.2)}`,
     "& .MuiListItemIcon-root": {
       transform: "rotate(180deg)",
       transition: "transform 0.3s ease"
@@ -135,11 +139,11 @@ var MegaMenuSection = styled(Box)(({ theme }) => ({
   padding: theme.spacing(3),
   borderRadius: theme.spacing(2),
   background: `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(theme.palette.background.default, 0.9)} 100%)`,
-  boxShadow: `0 10px 30px ${shadowInk(theme, 0.08)}`,
+  boxShadow: `0 ${rems(theme, 10, 30)} ${shadowInk(theme, 0.08)}`,
   border: `1px solid ${alpha(theme.palette.divider, 0.08)}`,
   position: "relative",
   overflow: "hidden",
-  animation: `${megaMenuSlide} 0.5s ease-out`,
+  animation: `${megaMenuSlide(theme)} 0.5s ease-out`,
   animationFillMode: "both",
   "&::before": {
     content: '""',
@@ -147,7 +151,7 @@ var MegaMenuSection = styled(Box)(({ theme }) => ({
     top: 0,
     left: 0,
     right: 0,
-    height: "3px",
+    height: rem(theme, 3),
     background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 50%, ${theme.palette.primary.main} 100%)`,
     backgroundSize: "200% 100%",
     animation: "shimmer 3s ease-in-out infinite"
@@ -161,8 +165,8 @@ var MegaMenuSection = styled(Box)(({ theme }) => ({
     }
   },
   "&:hover": {
-    transform: "translateY(-4px)",
-    boxShadow: `0 15px 40px ${shadowInk(theme, 0.12)}`,
+    transform: `translateY(${rem(theme, -4)})`,
+    boxShadow: `0 ${rems(theme, 15, 40)} ${shadowInk(theme, 0.12)}`,
     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
   },
   "&:nth-of-type(1)": { animationDelay: "0.1s" },
@@ -192,4 +196,4 @@ export {
   CollapseToggle,
   MegaSection
 };
-//# sourceMappingURL=chunk-HB7ISSLK.js.map
+//# sourceMappingURL=chunk-L5RQIQIP.js.map