@12-apps/ui 6.37.0 → 6.39.0

package/dist/{chunk-6GRZ77IS.js → chunk-3AIRFAI3.js}

@@ -2,27 +2,28 @@ import {
   EFFECT_GLOW
 } from "./chunk-N3GAFIXG.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/NavigationMenu/NavigationMenu.styles.ts
 import { alpha, keyframes } from "@mui/material/styles/index.js";
-var slideIn = keyframes`
+var slideIn = (theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateX(-20px);
+    transform: translateX(${rem(theme, -20)});
   }
   to {
     opacity: 1;
     transform: translateX(0);
   }
 `;
-var pulseGlow = keyframes`
+var pulseGlow = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.muiBlue, 0.4)};
   }
   70% {
-    box-shadow: 0 0 0 10px ${alpha(EFFECT_GLOW.muiBlue, 0)};
+    box-shadow: 0 0 0 ${rem(theme, 10)} ${alpha(EFFECT_GLOW.muiBlue, 0)};
   }
   100% {
     box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.muiBlue, 0)};
@@ -44,13 +45,13 @@ var horizontalStyles = (theme) => ({
   borderRadius: theme.spacing(1.5),
   margin: theme.spacing(0, 0.5),
   background: alpha(theme.palette.background.paper, 0.6),
-  backdropFilter: "blur(8px)",
+  backdropFilter: `blur(${rem(theme, 8)})`,
   border: `none`
   // border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
 });
-var collapsedStyles = () => ({
+var collapsedStyles = (theme) => ({
   justifyContent: "center",
-  minHeight: 56,
+  minHeight: rem(theme, 56),
   "& .MuiListItemIcon-root": {
     margin: 0
   }
@@ -117,7 +118,7 @@ var navInteractionStyles = (theme, minimal, collapsed, size) => ({
     // Fancy hover for non-minimal variant
     background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)} 0%, ${alpha(theme.palette.primary.main, 0.08)} 100%)`,
     color: theme.palette.primary.main,
-    boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.15)}`,
+    boxShadow: `0 ${rems(theme, 8, 24)} ${alpha(theme.palette.primary.main, 0.15)}`,
     backgroundColor: alpha(theme.palette.primary.main, 0.04),
     "&::before": {
       opacity: 1
@@ -128,7 +129,7 @@ var navInteractionStyles = (theme, minimal, collapsed, size) => ({
       transition: "all 0.3s ease"
     },
     "& .MuiListItemText-primary": {
-      transform: "translateX(4px)",
+      transform: `translateX(${rem(theme, 4)})`,
       transition: "transform 0.3s ease"
     }
   },
@@ -153,7 +154,7 @@ var navItemButtonStyles = ({
 }) => ({
   ...size ? SIZE_STYLES[size]?.(theme) ?? {} : {},
   ...variant === "horizontal" ? horizontalStyles(theme) : {},
-  ...collapsed ? collapsedStyles() : {},
+  ...collapsed ? collapsedStyles(theme) : {},
   ...active ? activeStyles(theme, variant) : {},
   ...navDecorationStyles(theme),
   ...navInteractionStyles(theme, minimal, collapsed, size),
@@ -170,4 +171,4 @@ export {
   pulseGlow,
   navItemButtonStyles
 };
-//# sourceMappingURL=chunk-6GRZ77IS.js.map
+//# sourceMappingURL=chunk-3AIRFAI3.js.map

package/dist/chunk-3AIRFAI3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/NavigationMenu/NavigationMenu.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { rem, rems } from '../../../tokens/relative';\n\nimport { EFFECT_GLOW } from '../../../tokens/ink.core';\n\nexport const slideIn = (theme: Theme) => keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(${rem(theme, -20)});\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nexport const pulseGlow = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.muiBlue, 0.4)};\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 10)} ${alpha(EFFECT_GLOW.muiBlue, 0)};\n  }\n  100% {\n    box-shadow: 0 0 0 0 ${alpha(EFFECT_GLOW.muiBlue, 0)};\n  }\n`;\n\nconst SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {\n  sm: (theme) => ({\n    padding: theme.spacing(1, 1.5),\n    fontSize: rem(theme, 14),\n    '& .MuiListItemIcon-root': { transform: 'scale(0.85)' },\n  }),\n  lg: (theme) => ({\n    padding: theme.spacing(2, 2.5),\n    fontSize: rem(theme, 18),\n    '& .MuiListItemIcon-root': { transform: 'scale(1.15)' },\n  }),\n};\n\n// Each of these applies independently of the others, so they layer rather than\n// forming a lookup.\nconst horizontalStyles = (theme: Theme): CSSObject => ({\n      borderRadius: theme.spacing(1.5),\n      margin: theme.spacing(0, 0.5),\n      background: alpha(theme.palette.background.paper, 0.6),\n      backdropFilter: `blur(${rem(theme, 8)})`,\n      border: `none`,\n      // border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n    });\n\nconst collapsedStyles = (theme: Theme): CSSObject => ({\n      justifyContent: 'center',\n      minHeight: rem(theme, 56),\n      '& .MuiListItemIcon-root': {\n        margin: 0,\n      },\n    });\n\nconst activeStyles = (theme: Theme, _variant?: string): CSSObject => ({\n      color: theme.palette.primary.main,\n      cursor: 'default',\n\n      '& .MuiListItemIcon-root': {\n        color: theme.palette.primary.main,\n      },\n\n      '&::before': {\n        opacity: 1,\n        background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,\n      },\n\n      '&:hover': {\n        background: 'none',\n        transform: 'none',\n        boxShadow: 'none',\n\n        '&::before': {\n          opacity: 1,\n        },\n\n        '& .MuiListItemIcon-root': {\n          transform: 'none',\n        },\n\n        '& .MuiListItemText-primary': {\n          transform: 'none',\n        },\n      },\n    });\n\n// Decorative sweep and glow layers behind the row.\nconst navDecorationStyles = (theme: Theme): CSSObject => ({\n  '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0)} 0%, ${alpha(theme.palette.primary.main, 0.08)} 100%)`,\n      opacity: 0,\n      transition: 'opacity 0.3s ease',\n    },\n  '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      width: '100%',\n      height: '100%',\n      background: `radial-gradient(circle, ${alpha(theme.palette.primary.main, 0.3)} 0%, transparent 70%)`,\n      transform: 'translate(-50%, -50%) scale(0)',\n      transition: 'transform 0.6s ease',\n      borderRadius: '50%',\n    },\n});\n\n// The minimal variant deliberately skips the lift-and-glow treatment.\nconst navInteractionStyles = (\n  theme: Theme,\n  minimal?: boolean,\n  collapsed?: boolean,\n  size?: string,\n): CSSObject => ({\n  '&:hover': minimal\n      ? {\n          // Simple hover for minimal variant\n          backgroundColor: alpha(theme.palette.action.hover, 0.08),\n          color: theme.palette.primary.main,\n\n          '& .MuiListItemIcon-root': {\n            color: theme.palette.primary.main,\n          },\n        }\n      : {\n          // Fancy hover for non-minimal variant\n          background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)} 0%, ${alpha(theme.palette.primary.main, 0.08)} 100%)`,\n          color: theme.palette.primary.main,\n          boxShadow: `0 ${rems(theme, 8, 24)} ${alpha(theme.palette.primary.main, 0.15)}`,\n          backgroundColor: alpha(theme.palette.primary.main, 0.04),\n\n          '&::before': {\n            opacity: 1,\n          },\n\n          '& .MuiListItemIcon-root': {\n            color: theme.palette.primary.main,\n            transform: collapsed\n              ? 'scale(1.1)'\n              : size === 'sm'\n                ? 'scale(0.95) rotate(-5deg)'\n                : size === 'lg'\n                  ? 'scale(1.25) rotate(-5deg)'\n                  : 'scale(1.1) rotate(-5deg)',\n            transition: 'all 0.3s ease',\n          },\n\n          '& .MuiListItemText-primary': {\n            transform: `translateX(${rem(theme, 4)})`,\n            transition: 'transform 0.3s ease',\n          },\n        },\n  '&:active': minimal\n      ? {\n          // Simple active state for minimal variant\n          opacity: 0.7,\n        }\n      : {\n          // Fancy active state for non-minimal variant\n          transform: 'scale(0.98)',\n          '&::after': {\n            transform: 'translate(-50%, -50%) scale(2)',\n          },\n        },\n});\n\n// The nav row's own styling: base layout plus the variant, size, collapsed and\n// minimal treatments. Lifted out so the styled() callback is a single spread.\nexport const navItemButtonStyles = ({\n  theme,\n  variant,\n  active,\n  size,\n  collapsed,\n  minimal,\n}: {\n  theme: Theme;\n  variant?: string;\n  active?: boolean;\n  size?: string;\n  collapsed?: boolean;\n  minimal?: boolean;\n}): CSSObject => ({\n  ...(size ? (SIZE_STYLES[size]?.(theme) ?? {}) : {}),\n  ...(variant === 'horizontal' ? horizontalStyles(theme) : {}),\n  ...(collapsed ? collapsedStyles(theme) : {}),\n  ...(active ? activeStyles(theme, variant) : {}),\n  ...navDecorationStyles(theme),\n  ...navInteractionStyles(theme, minimal, collapsed, size),\n    borderRadius: theme.spacing(1.5),\n    margin: theme.spacing(0.5),\n    position: 'relative',\n    overflow: 'hidden',\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    transformStyle: 'preserve-3d',\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  });\n"],"mappings":"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","names":[]}

package/dist/{chunk-Q73PTVNO.js → chunk-3FNXOCBD.js}

@@ -6,20 +6,24 @@ import {
 } from "./chunk-IJFAF3A7.js";
 import {
   Separator
-} from "./chunk-Q4CAZ2TP.js";
+} from "./chunk-IG23YZZR.js";
 import {
   Card,
   CardContent
-} from "./chunk-N6CSXHFJ.js";
+} from "./chunk-WN5PNP6F.js";
 import {
   Button
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   uiInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/social-login-button/social-login-button.tsx
 import * as React from "react";
@@ -27,9 +31,11 @@ import Box from "@mui/material/Box/index.js";
 import Stack from "@mui/material/Stack/index.js";
 import { useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+var logoStyle = (theme) => ({ width: rem(theme, 20), height: rem(theme, 20) });
 var GoogleIcon = () => {
-  const logo = uiInk(useTheme()).socialBrand.googleLogo;
-  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  const theme = useTheme();
+  const logo = uiInk(theme).socialBrand.googleLogo;
+  return /* @__PURE__ */ jsxs("svg", { style: logoStyle(theme), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ jsx(
       "path",
       {
@@ -61,8 +67,9 @@ var GoogleIcon = () => {
   ] });
 };
 var FacebookIcon = () => {
-  const { logo } = uiInk(useTheme()).socialBrand.facebook;
-  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+  const theme = useTheme();
+  const { logo } = uiInk(theme).socialBrand.facebook;
+  return /* @__PURE__ */ jsx("svg", { style: logoStyle(theme), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
     "path",
     {
       d: "M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z",
@@ -70,7 +77,7 @@ var FacebookIcon = () => {
     }
   ) });
 };
-var AppleIcon = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) });
+var AppleIcon = () => /* @__PURE__ */ jsx("svg", { style: logoStyle(useTheme()), viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) });
 var GOOGLE_LOGO_WHEN_DISABLED_SX = {
   "&.Mui-disabled .MuiButton-startIcon": {
     filter: "brightness(0)",
@@ -156,7 +163,7 @@ var SocialLoginButton = React.forwardRef(
         fullWidth,
         ...iconOnly ? { "aria-label": label, title: label } : {},
         sx: {
-          minHeight: 48,
+          minHeight: sxRem(48),
           justifyContent: "flex-start",
           gap: 2,
           ...iconOnly ? ICON_ONLY_SX : {},
@@ -168,14 +175,19 @@ var SocialLoginButton = React.forwardRef(
   }
 );
 SocialLoginButton.displayName = "SocialLoginButton";
+function cardMaxWidth(theme, value) {
+  if (typeof value !== "number") return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+}
 function SocialLoginContainer({
   children,
   title = "Sign in to continue",
   subtitle,
   showDivider = false,
   dividerText = "or",
-  maxWidth = 400
+  maxWidth
 }) {
+  const theme = useTheme();
   return (
     // `width: 100%` is what makes the cap below mean anything. Every caller
     // centres this card in a flex column (`Container variant="centered"` does),
@@ -183,7 +195,7 @@ function SocialLoginContainer({
     // card sat at whatever the longest label happened to need, ~267px, at every
     // viewport from 390 to 1280. The 400 was never reached, which is why raising
     // it would have changed nothing; the card had no width to cap.
-    /* @__PURE__ */ jsx(Card, { variant: "elevated", borderRadius: "lg", sx: { width: "100%", maxWidth }, children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 3, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Card, { variant: "elevated", borderRadius: "lg", sx: { width: "100%", maxWidth: cardMaxWidth(theme, maxWidth ?? 400) }, children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 3, sx: { width: "100%" }, children: [
       title && /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center" }, children: [
         /* @__PURE__ */ jsx(Heading, { level: "h2", children: title }),
         subtitle && /* @__PURE__ */ jsx(Text, { color: "secondary", size: "sm", children: subtitle })
@@ -205,4 +217,4 @@ export {
   SocialLoginButton,
   SocialLoginContainer
 };
-//# sourceMappingURL=chunk-Q73PTVNO.js.map
+//# sourceMappingURL=chunk-3FNXOCBD.js.map

package/dist/chunk-3FNXOCBD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/social-login-button/social-login-button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from 'react';\nimport Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport { Button } from '../components/form/Button';\nimport { Card, CardContent } from '../components/layout/Card';\nimport { Heading } from '../components/typography/Heading';\nimport { Text } from '../components/typography/Text';\nimport { Separator } from '../components/layout/Separator';\nimport type { SocialLoginCopy } from '../copy/form';\nimport { EN_US_SOCIAL_LOGIN_COPY } from '../en-US.form';\nimport { uiInk, type UiInk } from '../tokens/ink';\nimport { rem, sxRem } from '../tokens/relative';\n\nexport type SocialProvider = 'google' | 'facebook' | 'apple';\n\n/** A provider logo's box: 20 design px square, through the type scale. */\nconst logoStyle = (theme: Theme): React.CSSProperties => ({ width: rem(theme, 20), height: rem(theme, 20) });\n\n/**\n * SVG Icons for social providers\n */\nconst GoogleIcon = (): React.ReactElement => {\n  const theme = useTheme();\n  const logo = uiInk(theme).socialBrand.googleLogo;\n  return (\n    <svg style={logoStyle(theme)} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n        fill={logo.blue}\n      />\n      <path\n        d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n        fill={logo.green}\n      />\n      <path\n        d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n        fill={logo.yellow}\n      />\n      <path\n        d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n        fill={logo.red}\n      />\n    </svg>\n  );\n};\n\nconst FacebookIcon = (): React.ReactElement => {\n  const theme = useTheme();\n  const { logo } = uiInk(theme).socialBrand.facebook;\n  return (\n    <svg style={logoStyle(theme)} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z\"\n        fill={logo}\n      />\n    </svg>\n  );\n};\n\nconst AppleIcon = (): React.ReactElement => (\n  <svg style={logoStyle(useTheme())} viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z\" />\n  </svg>\n);\n\n/**\n * Google's logo on a disabled button: one flat grey, faded (FUT-2393).\n *\n * The G is drawn in Google's four colours, hard-coded in its SVG, so MUI\n * greying a disabled button's label left a full-colour G beside it. The grey\n * label still said the button could not be pressed; an icon-only button has no\n * label, and read as ready to tap.\n *\n * `brightness(0)` draws the G in one flat colour, as Google's own disabled\n * button does, and the theme's `disabledOpacity` fades it, the step MUI dims a\n * disabled control by. `grayscale` would not do: it turns the four colours four\n * different greys, and the yellow arc all but vanished (1.26:1 against white).\n *\n * Google's alone: Facebook's and Apple's logos are drawn in the button's\n * `currentColor`, so they grey with the label by themselves, and fading them\n * again would all but erase them. Keyed on `.Mui-disabled`, the class MUI greys\n * the label by, so the logo and the label always agree. A loading button\n * carries it too, but its spinner replaces the logo slot.\n */\nconst GOOGLE_LOGO_WHEN_DISABLED_SX = {\n  '&.Mui-disabled .MuiButton-startIcon': {\n    filter: 'brightness(0)',\n    opacity: (theme: Theme) => theme.palette.action.disabledOpacity,\n  },\n} as const;\n\n/**\n * Facebook's logo in its button's own colour (FUT-2393).\n *\n * `FacebookIcon` is the blue roundel, drawn in #1877F2 with the \"f\" cut out of\n * it. On the button's own #1877F2 the roundel vanished: a label beside nothing,\n * and an icon-only button an empty blue slab. In `currentColor` it is the white\n * roundel Facebook's own button carries, and a disabled button greys it with\n * the label. Set on the button rather than in `FacebookIcon`, which a host may\n * draw on a white page.\n */\nconst FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX = {\n  '& .MuiButton-startIcon path': { fill: 'currentColor' },\n} as const;\n\n/** A provider's own colour, read from the theme's `uiInk.socialBrand` as an `sx` value. */\nconst brand =\n  (pick: (colours: UiInk['socialBrand']) => string) =>\n  (theme: Theme): string =>\n    pick(uiInk(theme).socialBrand);\n\ninterface ProviderConfig {\n  Icon: () => React.ReactElement;\n  variant: 'solid' | 'outline' | 'ghost';\n  color: 'primary' | 'secondary' | 'neutral';\n  sx?: object;\n}\n\nconst providerConfig: Record<SocialProvider, ProviderConfig> = {\n  google: {\n    Icon: GoogleIcon,\n    variant: 'outline',\n    color: 'neutral',\n    sx: {\n      backgroundColor: brand((c) => c.google.background),\n      color: brand((c) => c.google.text),\n      borderColor: brand((c) => c.google.border),\n      '&:hover': {\n        backgroundColor: brand((c) => c.google.hover),\n        borderColor: brand((c) => c.google.hoverBorder),\n      },\n      ...GOOGLE_LOGO_WHEN_DISABLED_SX,\n    },\n  },\n  facebook: {\n    Icon: FacebookIcon,\n    variant: 'solid',\n    color: 'primary',\n    sx: {\n      backgroundColor: brand((c) => c.facebook.background),\n      color: brand((c) => c.facebook.text),\n      '&:hover': {\n        backgroundColor: brand((c) => c.facebook.hover),\n      },\n      ...FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX,\n    },\n  },\n  apple: {\n    Icon: AppleIcon,\n    variant: 'solid',\n    color: 'neutral',\n    sx: {\n      backgroundColor: brand((c) => c.apple.background),\n      color: brand((c) => c.apple.text),\n      '&:hover': {\n        backgroundColor: brand((c) => c.apple.hover),\n      },\n    },\n  },\n};\n\nexport interface SocialLoginButtonProps {\n  provider: SocialProvider;\n  onClick?: () => void;\n  loading?: boolean;\n  disabled?: boolean;\n  fullWidth?: boolean;\n  /**\n   * The three provider labels (FUT-1263). `SOCIAL_LOGIN_COPY` ships both\n   * languages, so a host passes `SOCIAL_LOGIN_COPY[\"pt-BR\"]` rather than\n   * authoring a word.\n   *\n   * These used to be English string literals inside `providerConfig`, reachable\n   * by nothing: a pt-BR storefront rendered \"Continue with Google\" on an\n   * otherwise Portuguese sign-in screen and had no way to change it.\n   *\n   * OPTIONAL, unlike every other `copy` in this package, and defaulted to the\n   * en-US pack. That is a deliberate exception so this ships as a MINOR: making\n   * it required would break every existing caller on a routine update. The cost\n   * is the one this package's convention exists to avoid — a host that says\n   * nothing still renders English — so a consumer wanting Portuguese must pass\n   * the pack, and FUT-1263 is not closed until it does.\n   */\n  copy?: SocialLoginCopy;\n  /**\n   * Per-provider test hook. Without one all three buttons render the same\n   * `data-testid`, leaving their visible text as the only selector — which is\n   * exactly the text a host is now expected to translate.\n   */\n  dataTestId?: string;\n  /**\n   * The provider's logo alone, centred (FUT-2393).\n   *\n   * For a row of providers in a narrow block, where \"Continuar com o Google\"\n   * wraps to two lines at 320px and two providers cannot share a line. The\n   * label is not dropped: it stays the button's accessible name, so a screen\n   * reader still announces the provider, and its `title`, so a pointer\n   * hovering the logo reads it too.\n   */\n  iconOnly?: boolean;\n}\n\n/**\n * What an icon-only social button changes: the logo centred, with no gap\n * reserved for a label and no margin MUI keeps beside a start icon.\n */\nconst ICON_ONLY_SX = {\n  justifyContent: 'center',\n  gap: 0,\n  '& .MuiButton-startIcon': { margin: 0 },\n} as const;\n\n/**\n * Social login button using UI package Button component\n */\nexport const SocialLoginButton = React.forwardRef<HTMLButtonElement, SocialLoginButtonProps>(\n  (\n    {\n      provider,\n      onClick,\n      loading = false,\n      disabled = false,\n      fullWidth = true,\n      copy = EN_US_SOCIAL_LOGIN_COPY,\n      dataTestId,\n      iconOnly = false,\n    },\n    ref,\n  ) => {\n    const config = providerConfig[provider];\n    const label = copy[provider];\n\n    return (\n      <Button\n        ref={ref}\n        variant={config.variant}\n        color={config.color}\n        size=\"lg\"\n        loading={loading}\n        disabled={disabled}\n        onClick={onClick}\n        icon={<config.Icon />}\n        dataTestId={dataTestId}\n        fullWidth={fullWidth}\n        {...(iconOnly ? { 'aria-label': label, title: label } : {})}\n        sx={{\n          minHeight: sxRem(48),\n          justifyContent: 'flex-start',\n          gap: 2,\n          ...(iconOnly ? ICON_ONLY_SX : {}),\n          ...config.sx,\n        }}\n      >\n        {iconOnly ? undefined : label}\n      </Button>\n    );\n  }\n);\n\nSocialLoginButton.displayName = 'SocialLoginButton';\n\n/**\n * Container for social login buttons with optional divider\n */\nexport interface SocialLoginContainerProps {\n  children: React.ReactNode;\n  title?: string;\n  subtitle?: string;\n  showDivider?: boolean;\n  dividerText?: string;\n  /**\n   * How wide the card is allowed to get. Defaults to the 400 it has always\n   * intended, so nothing that does not ask for a width moves.\n   *\n   * Worth passing for a card holding a FORM rather than a row of provider\n   * buttons: 400 was chosen for the latter, and an e-mail + password pair reads\n   * cramped in it.\n   */\n  maxWidth?: number | string;\n}\n\n/**\n * The card's cap as CSS. `sx` reads a number of 1 or less as a fraction of the\n * parent, and that stays so; any other number is design px, through the type\n * scale; a string is as given.\n */\nfunction cardMaxWidth(theme: Theme, value: number | string): string {\n  if (typeof value !== 'number') return value;\n  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);\n}\n\nexport function SocialLoginContainer({\n  children,\n  title = \"Sign in to continue\",\n  subtitle,\n  showDivider = false,\n  dividerText = \"or\",\n  maxWidth,\n}: SocialLoginContainerProps): React.ReactElement {\n  const theme = useTheme();\n  return (\n    // `width: 100%` is what makes the cap below mean anything. Every caller\n    // centres this card in a flex column (`Container variant=\"centered\"` does),\n    // and a flex item under `align-items: center` sizes to its CONTENT — so the\n    // card sat at whatever the longest label happened to need, ~267px, at every\n    // viewport from 390 to 1280. The 400 was never reached, which is why raising\n    // it would have changed nothing; the card had no width to cap.\n    <Card variant=\"elevated\" borderRadius=\"lg\" sx={{ width: '100%', maxWidth: cardMaxWidth(theme, maxWidth ?? 400) }}>\n      <CardContent>\n        <Stack spacing={3} sx={{ width: '100%' }}>\n          {title && (\n            <Box sx={{ textAlign: 'center' }}>\n              <Heading level=\"h2\">\n                {title}\n              </Heading>\n              {subtitle && (\n                <Text color=\"secondary\" size=\"sm\">\n                  {subtitle}\n                </Text>\n              )}\n            </Box>\n          )}\n\n          <Stack spacing={2}>\n            {children}\n          </Stack>\n\n          {showDivider && (\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n              <Separator />\n              <Text color=\"secondary\" size=\"sm\">\n                {dividerText}\n              </Text>\n              <Separator />\n            </Box>\n          )}\n        </Stack>\n      </CardContent>\n    </Card>\n  );\n}\n\nexport { GoogleIcon, FacebookIcon, AppleIcon };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,YAAY,WAAW;AACvB,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,SAAS,gBAA4B;AAuBjC,SACE,KADF;AATJ,IAAM,YAAY,CAAC,WAAuC,EAAE,OAAO,IAAI,OAAO,EAAE,GAAG,QAAQ,IAAI,OAAO,EAAE,EAAE;AAK1G,IAAM,aAAa,MAA0B;AAC3C,QAAM,QAAQ,SAAS;AACvB,QAAM,OAAO,MAAM,KAAK,EAAE,YAAY;AACtC,SACE,qBAAC,SAAI,OAAO,UAAU,KAAK,GAAG,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAClE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM,KAAK;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM,KAAK;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM,KAAK;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAM,KAAK;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;AAEA,IAAM,eAAe,MAA0B;AAC7C,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,KAAK,IAAI,MAAM,KAAK,EAAE,YAAY;AAC1C,SACE,oBAAC,SAAI,OAAO,UAAU,KAAK,GAAG,SAAQ,aAAY,MAAK,QAAO,OAAM,8BAClE;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAM;AAAA;AAAA,EACR,GACF;AAEJ;AAEA,IAAM,YAAY,MAChB,oBAAC,SAAI,OAAO,UAAU,SAAS,CAAC,GAAG,SAAQ,aAAY,MAAK,gBAAe,OAAM,8BAC/E,8BAAC,UAAK,GAAE,uUAAsU,GAChV;AAsBF,IAAM,+BAA+B;AAAA,EACnC,uCAAuC;AAAA,IACrC,QAAQ;AAAA,IACR,SAAS,CAAC,UAAiB,MAAM,QAAQ,OAAO;AAAA,EAClD;AACF;AAYA,IAAM,oCAAoC;AAAA,EACxC,+BAA+B,EAAE,MAAM,eAAe;AACxD;AAGA,IAAM,QACJ,CAAC,SACD,CAAC,UACC,KAAK,MAAM,KAAK,EAAE,WAAW;AASjC,IAAM,iBAAyD;AAAA,EAC7D,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,IAAI;AAAA,MACF,iBAAiB,MAAM,CAAC,MAAM,EAAE,OAAO,UAAU;AAAA,MACjD,OAAO,MAAM,CAAC,MAAM,EAAE,OAAO,IAAI;AAAA,MACjC,aAAa,MAAM,CAAC,MAAM,EAAE,OAAO,MAAM;AAAA,MACzC,WAAW;AAAA,QACT,iBAAiB,MAAM,CAAC,MAAM,EAAE,OAAO,KAAK;AAAA,QAC5C,aAAa,MAAM,CAAC,MAAM,EAAE,OAAO,WAAW;AAAA,MAChD;AAAA,MACA,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,IAAI;AAAA,MACF,iBAAiB,MAAM,CAAC,MAAM,EAAE,SAAS,UAAU;AAAA,MACnD,OAAO,MAAM,CAAC,MAAM,EAAE,SAAS,IAAI;AAAA,MACnC,WAAW;AAAA,QACT,iBAAiB,MAAM,CAAC,MAAM,EAAE,SAAS,KAAK;AAAA,MAChD;AAAA,MACA,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,IAAI;AAAA,MACF,iBAAiB,MAAM,CAAC,MAAM,EAAE,MAAM,UAAU;AAAA,MAChD,OAAO,MAAM,CAAC,MAAM,EAAE,MAAM,IAAI;AAAA,MAChC,WAAW;AAAA,QACT,iBAAiB,MAAM,CAAC,MAAM,EAAE,MAAM,KAAK;AAAA,MAC7C;AAAA,IACF;AAAA,EACF;AACF;AA+CA,IAAM,eAAe;AAAA,EACnB,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,0BAA0B,EAAE,QAAQ,EAAE;AACxC;AAKO,IAAM,oBAA0B;AAAA,EACrC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,EACb,GACA,QACG;AACH,UAAM,SAAS,eAAe,QAAQ;AACtC,UAAM,QAAQ,KAAK,QAAQ;AAE3B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,OAAO;AAAA,QAChB,OAAO,OAAO;AAAA,QACd,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,oBAAC,OAAO,MAAP,EAAY;AAAA,QACnB;AAAA,QACA;AAAA,QACC,GAAI,WAAW,EAAE,cAAc,OAAO,OAAO,MAAM,IAAI,CAAC;AAAA,QACzD,IAAI;AAAA,UACF,WAAW,MAAM,EAAE;AAAA,UACnB,gBAAgB;AAAA,UAChB,KAAK;AAAA,UACL,GAAI,WAAW,eAAe,CAAC;AAAA,UAC/B,GAAG,OAAO;AAAA,QACZ;AAAA,QAEC,qBAAW,SAAY;AAAA;AAAA,IAC1B;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;AA2BhC,SAAS,aAAa,OAAc,OAAgC;AAClE,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,SAAO,SAAS,KAAK,UAAU,IAAI,GAAG,QAAQ,GAAG,MAAM,IAAI,OAAO,KAAK;AACzE;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AACF,GAAkD;AAChD,QAAM,QAAQ,SAAS;AACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOE,oBAAC,QAAK,SAAQ,YAAW,cAAa,MAAK,IAAI,EAAE,OAAO,QAAQ,UAAU,aAAa,OAAO,YAAY,GAAG,EAAE,GAC7G,8BAAC,eACC,+BAAC,SAAM,SAAS,GAAG,IAAI,EAAE,OAAO,OAAO,GACpC;AAAA,eACC,qBAAC,OAAI,IAAI,EAAE,WAAW,SAAS,GAC7B;AAAA,4BAAC,WAAQ,OAAM,MACZ,iBACH;AAAA,QACC,YACC,oBAAC,QAAK,OAAM,aAAY,MAAK,MAC1B,oBACH;AAAA,SAEJ;AAAA,MAGF,oBAAC,SAAM,SAAS,GACb,UACH;AAAA,MAEC,eACC,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE,GACvD;AAAA,4BAAC,aAAU;AAAA,QACX,oBAAC,QAAK,OAAM,aAAY,MAAK,MAC1B,uBACH;AAAA,QACA,oBAAC,aAAU;AAAA,SACb;AAAA,OAEJ,GACF,GACF;AAAA;AAEJ;","names":[]}

package/dist/{chunk-BAQBUKDU.js → chunk-3KREF4ZF.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 
 // src/components/data-display/DataViews/data-views-select-all-strip.tsx
 import Checkbox from "@mui/material/Checkbox/index.js";
@@ -85,4 +85,4 @@ function SelectAllStrip({
 export {
   SelectAllStrip
 };
-//# sourceMappingURL=chunk-BAQBUKDU.js.map
+//# sourceMappingURL=chunk-3KREF4ZF.js.map

package/dist/{chunk-EL7CMURV.js → chunk-3LSIFHQK.js}

@@ -63,7 +63,7 @@ function ViewKebab({
         "aria-label": `${labels.apply} ${view.name}`,
         "data-testid": `${testIdPrefix}-kebab-${view.id}`,
         onClick: (event) => setAnchorEl(event.currentTarget),
-        sx: { width: 28, height: 28, color: "text.secondary" },
+        sx: { width: sxRem(28), height: sxRem(28), color: "text.secondary" },
         children: /* @__PURE__ */ jsx(KebabIcon, { sx: { fontSize: sxRem(16) } })
       }
     ),
@@ -137,7 +137,7 @@ function PopoverBody({
   onManageAll,
   testIdPrefix
 }) {
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, sx: { p: 1.5, width: 300 }, "data-testid": `${testIdPrefix}-popover`, children: [
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, sx: { p: 1.5, width: sxRem(300) }, "data-testid": `${testIdPrefix}-popover`, children: [
     /* @__PURE__ */ jsxs(MenuItem, { "data-testid": `${testIdPrefix}-main`, selected: !activeViewName, onClick: onSelectMain, sx: { borderRadius: 1, px: 1, gap: 1 }, children: [
       /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1, minWidth: 0, fontSize: sxRem(14) }, children: labels.mainView }),
       !activeViewName && /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: sxRem(16), color: "primary.main" } })
@@ -238,4 +238,4 @@ function SavedViewsMenu({
 export {
   SavedViewsMenu
 };
-//# sourceMappingURL=chunk-EL7CMURV.js.map
+//# sourceMappingURL=chunk-3LSIFHQK.js.map

package/dist/chunk-3LSIFHQK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/SavedViewsMenu.tsx"],"sourcesContent":["'use client';\n\nimport CheckIcon from '@mui/icons-material/Check';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport KebabIcon from '@mui/icons-material/MoreVert';\nimport ViewIcon from '@mui/icons-material/Visibility';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Popover from '@mui/material/Popover/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useState } from 'react';\n\nimport type {\n  SavedViewLike,\n  SavedViewsLabels,\n  SavedViewsMenuProps,\n} from './ContentToolbar.types';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { sxRem } from '../../../tokens/relative';\n\n/** How many non-pinned views show under \"Recentes\". */\nconst RECENT_LIMIT = 5;\n\ninterface RowHandlers<V extends SavedViewLike> {\n  apply: (view: V) => void;\n  onEdit: (view: V) => void;\n  onDelete: (view: V) => void;\n  onSetDefault: (view: V) => void;\n  onTogglePin: (view: V) => void;\n  onToggleShare: (view: V) => void;\n}\n\nfunction DefaultTag({ label, testId }: { label: string; testId: string }): React.JSX.Element {\n  return (\n    <Box\n      component=\"span\"\n      data-testid={testId}\n      sx={{ px: 0.75, py: 0.125, borderRadius: 1, fontSize: sxRem(11.2), bgcolor: 'primary.main', color: 'primary.contrastText' }}\n    >\n      {label}\n    </Box>\n  );\n}\n\ninterface KebabAction {\n  id: string;\n  label: string;\n  danger?: boolean;\n  run: () => void;\n}\n\n/** Build the per-view ⋮ actions; owner-only mutations follow \"Apply\". */\nfunction buildActions<V extends SavedViewLike>(\n  view: V,\n  handlers: RowHandlers<V>,\n  labels: SavedViewsLabels,\n): KebabAction[] {\n  const actions: KebabAction[] = [{ id: 'apply', label: labels.apply, run: () => handlers.apply(view) }];\n  if (!view.isOwner) return actions;\n  if (!view.isDefault) {\n    actions.push({ id: 'default', label: labels.setDefault, run: () => handlers.onSetDefault(view) });\n  }\n  actions.push({ id: 'pin', label: view.pinned ? labels.unpin : labels.pin, run: () => handlers.onTogglePin(view) });\n  actions.push({ id: 'share', label: view.shared ? labels.unshare : labels.share, run: () => handlers.onToggleShare(view) });\n  actions.push({ id: 'edit', label: labels.edit, run: () => handlers.onEdit(view) });\n  actions.push({ id: 'delete', label: labels.remove, danger: true, run: () => handlers.onDelete(view) });\n  return actions;\n}\n\nfunction ViewKebab<V extends SavedViewLike>({\n  view,\n  handlers,\n  labels,\n  testIdPrefix,\n}: {\n  view: V;\n  handlers: RowHandlers<V>;\n  labels: SavedViewsLabels;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const close = (): void => setAnchorEl(null);\n  return (\n    <>\n      <IconButton\n        size=\"small\"\n        aria-label={`${labels.apply} ${view.name}`}\n        data-testid={`${testIdPrefix}-kebab-${view.id}`}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{ width: sxRem(28), height: sxRem(28), color: 'text.secondary' }}\n      >\n        <KebabIcon sx={{ fontSize: sxRem(16) }} />\n      </IconButton>\n      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={close}>\n        {buildActions(view, handlers, labels).map((action) => (\n          <MenuItem\n            key={action.id}\n            data-testid={`${testIdPrefix}-item-${action.id}-${view.id}`}\n            onClick={() => {\n              action.run();\n              close();\n            }}\n            sx={action.danger ? { color: 'error.main' } : undefined}\n          >\n            {action.label}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  );\n}\n\nfunction ViewRow<V extends SavedViewLike>({\n  view,\n  handlers,\n  labels,\n  testIdPrefix,\n}: {\n  view: V;\n  handlers: RowHandlers<V>;\n  labels: SavedViewsLabels;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }} data-testid={`${testIdPrefix}-row-${view.id}`}>\n      <Box\n        onClick={() => handlers.apply(view)}\n        sx={{ flex: 1, minWidth: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 0.75 }}\n        data-testid={`${testIdPrefix}-apply-${view.id}`}\n      >\n        <Typography component=\"span\" sx={{ fontSize: sxRem(14) }}>\n          {view.name}\n        </Typography>\n        {view.isDefault && <DefaultTag label={labels.defaultTag} testId={`${testIdPrefix}-default-${view.id}`} />}\n      </Box>\n      <ViewKebab view={view} handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />\n    </Stack>\n  );\n}\n\nfunction ViewSection<V extends SavedViewLike>({\n  title,\n  list,\n  sectionKey,\n  handlers,\n  labels,\n  testIdPrefix,\n}: {\n  title: string;\n  list: V[];\n  sectionKey: string;\n  handlers: RowHandlers<V>;\n  labels: SavedViewsLabels;\n  testIdPrefix: string;\n}): React.JSX.Element | null {\n  if (list.length === 0) return null;\n  return (\n    <Box data-testid={`${testIdPrefix}-section-${sectionKey}`}>\n      <Typography component=\"span\" sx={{ fontSize: sxRem(12), fontWeight: 600, color: 'text.secondary' }}>\n        {title}\n      </Typography>\n      <Stack spacing={0.5} sx={{ mt: 0.5 }}>\n        {list.map((view) => (\n          <ViewRow key={view.id} view={view} handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />\n        ))}\n      </Stack>\n    </Box>\n  );\n}\n\n/** A borderless footer text button (Save current / Manage all). */\nfunction FooterButton({\n  label,\n  testId,\n  onClick,\n}: {\n  label: string;\n  testId: string;\n  onClick: () => void;\n}): React.JSX.Element {\n  return (\n    <Button variant=\"text\" size=\"small\" color=\"inherit\" onClick={onClick} data-testid={testId} sx={{ textTransform: 'none' }}>\n      {label}\n    </Button>\n  );\n}\n\n/** The popover contents: the built-in Main vision default, saved-view sections, and footer. */\nfunction PopoverBody<V extends SavedViewLike>({\n  views,\n  pinned,\n  recent,\n  activeViewName,\n  labels,\n  handlers,\n  onSelectMain,\n  onSaveCurrent,\n  onManageAll,\n  testIdPrefix,\n}: {\n  views: V[];\n  pinned: V[];\n  recent: V[];\n  activeViewName?: string;\n  labels: SavedViewsLabels;\n  handlers: RowHandlers<V>;\n  onSelectMain: () => void;\n  onSaveCurrent: () => void;\n  onManageAll: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Stack spacing={1.5} sx={{ p: 1.5, width: sxRem(300) }} data-testid={`${testIdPrefix}-popover`}>\n      {/* Built-in no-filter default, always available above the saved views. */}\n      <MenuItem data-testid={`${testIdPrefix}-main`} selected={!activeViewName} onClick={onSelectMain} sx={{ borderRadius: 1, px: 1, gap: 1 }}>\n        <Box component=\"span\" sx={{ flex: 1, minWidth: 0, fontSize: sxRem(14) }}>\n          {labels.mainView}\n        </Box>\n        {!activeViewName && <CheckIcon sx={{ fontSize: sxRem(16), color: 'primary.main' }} />}\n      </MenuItem>\n      {views.length === 0 ? (\n        <Typography sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>{labels.empty}</Typography>\n      ) : (\n        <>\n          <ViewSection title={labels.pinned} list={pinned} sectionKey=\"pinned\" handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />\n          <ViewSection title={labels.recent} list={recent} sectionKey=\"recent\" handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />\n        </>\n      )}\n      <Box sx={{ borderTop: 1, borderColor: 'divider', pt: 1 }}>\n        <Stack spacing={0.5} sx={{ alignItems: 'flex-start' }}>\n          <FooterButton label={labels.saveCurrent} testId={`${testIdPrefix}-save-current`} onClick={onSaveCurrent} />\n          <FooterButton label={labels.manageAll} testId={`${testIdPrefix}-manage-all`} onClick={onManageAll} />\n        </Stack>\n      </Box>\n    </Stack>\n  );\n}\n\n/**\n * Stateless saved-views dropdown: a neutral trigger (styled like the sibling\n * toolbar controls) that shows `activeViewName` when a view is applied, else the\n * built-in \"Main vision\" label. The popover lists the Main vision default plus\n * pinned + recent views; a per-view ⋮ exposes owner-only mutations. This\n * component owns NO data — every action is a callback, so a page-level Connector\n * wires it to the backend.\n */\nexport function SavedViewsMenu<V extends SavedViewLike = SavedViewLike>({\n  views,\n  activeViewName,\n  onApply,\n  onSelectMain,\n  onSaveCurrent,\n  onEdit,\n  onDelete,\n  onSetDefault,\n  onTogglePin,\n  onToggleShare,\n  onManageAll,\n  labels: labelOverrides,\n  testIdPrefix = 'views',\n}: SavedViewsMenuProps<V>): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);\n  const close = (): void => setAnchorEl(null);\n  const runAndClose = (action: () => void) => (): void => {\n    action();\n    close();\n  };\n  const labels = labelOverrides;\n  const pinned = views.filter((view) => view.pinned);\n  const recent = views.filter((view) => !view.pinned).slice(0, RECENT_LIMIT);\n\n  const handlers: RowHandlers<V> = {\n    apply: (view) => {\n      onApply(view);\n      close();\n    },\n    onEdit,\n    onDelete,\n    onSetDefault,\n    onTogglePin,\n    onToggleShare,\n  };\n\n  return (\n    <>\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        data-testid={`${testIdPrefix}-button`}\n        aria-haspopup=\"menu\"\n        aria-expanded={Boolean(anchorEl)}\n        aria-label={activeViewName ?? labels.mainView}\n        sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}\n      >\n        {/* Mobile: an eye icon stands in for the view name to keep the toolbar one line. */}\n        <ViewIcon sx={{ fontSize: sxRem(18), display: { xs: 'inline-flex', md: 'none' } }} />\n        <Box component=\"span\" sx={{ display: { xs: 'none', md: 'inline' } }}>\n          {activeViewName ?? labels.mainView}\n        </Box>\n        <ChevronDownIcon sx={{ fontSize: sxRem(14) }} />\n      </Button>\n      <Popover\n        open={Boolean(anchorEl)}\n        anchorEl={anchorEl}\n        onClose={close}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n      >\n        <PopoverBody\n          views={views}\n          pinned={pinned}\n          recent={recent}\n          activeViewName={activeViewName}\n          labels={labels}\n          handlers={handlers}\n          onSelectMain={runAndClose(onSelectMain)}\n          onSaveCurrent={runAndClose(onSaveCurrent)}\n          onManageAll={runAndClose(onManageAll)}\n          testIdPrefix={testIdPrefix}\n        />\n      </Popover>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-MP4VSWHK.js → chunk-3NJMNMWB.js}

@@ -6,11 +6,18 @@ import {
 import {
   resolveTestId
 } from "./chunk-TYJR4GOF.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/Spacer/Spacer.tsx
 import Box from "@mui/material/Box/index.js";
 import { useTheme } from "@mui/material/styles/index.js";
 import { jsx } from "react/jsx-runtime";
+var spacerLength = (theme, value) => {
+  if (typeof value !== "number") return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+};
 var Spacer = ({
   size,
   direction,
@@ -21,7 +28,10 @@ var Spacer = ({
   ...testIdProps
 }) => {
   const theme = useTheme();
-  const dimensions = spacerDimensions({ size, direction, width, height }, (units) => theme.spacing(units));
+  const dimensions = spacerDimensions(
+    { size, direction, width: spacerLength(theme, width), height: spacerLength(theme, height) },
+    (units) => theme.spacing(units)
+  );
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -43,4 +53,4 @@ var Spacer = ({
 export {
   Spacer
 };
-//# sourceMappingURL=chunk-MP4VSWHK.js.map
+//# sourceMappingURL=chunk-3NJMNMWB.js.map

package/dist/chunk-3NJMNMWB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Spacer/Spacer.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { SPACER_FLEX_GROW, SPACER_FLEX_SHRINK, spacerDimensions } from './Spacer.metrics';\nimport type { SpacerProps } from './Spacer.types';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { rem } from '../../../tokens/relative';\n\n/**\n * An explicit `width`/`height` 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 spacerLength = (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\nexport const Spacer: React.FC<SpacerProps> = ({\n  size,\n  direction,\n  width,\n  height,\n  flex = false,\n  className,\n  ...testIdProps\n}) => {\n  const theme = useTheme();\n\n  // From the shared metrics, not a table of our own: the native `Spacer` reads\n  // the same units, so the two renderers cannot disagree on a step.\n  const dimensions = spacerDimensions(\n    { size, direction, width: spacerLength(theme, width), height: spacerLength(theme, height) },\n    (units) => theme.spacing(units),\n  );\n\n  return (\n    <Box\n      className={className}\n      data-testid={resolveTestId(testIdProps)}\n      sx={{\n        width: dimensions.width,\n        height: dimensions.height,\n        flex: flex ? SPACER_FLEX_GROW : undefined,\n        flexShrink: SPACER_FLEX_SHRINK,\n        pointerEvents: 'none',\n        userSelect: 'none',\n      }}\n      aria-hidden=\"true\"\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AAsCrB;AAxBJ,IAAM,eAAe,CAAC,OAAc,UAA2D;AAC7F,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,SAAO,SAAS,KAAK,UAAU,IAAI,GAAG,QAAQ,GAAG,MAAM,IAAI,OAAO,KAAK;AACzE;AAEO,IAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,SAAS;AAIvB,QAAM,aAAa;AAAA,IACjB,EAAE,MAAM,WAAW,OAAO,aAAa,OAAO,KAAK,GAAG,QAAQ,aAAa,OAAO,MAAM,EAAE;AAAA,IAC1F,CAAC,UAAU,MAAM,QAAQ,KAAK;AAAA,EAChC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa,cAAc,WAAW;AAAA,MACtC,IAAI;AAAA,QACF,OAAO,WAAW;AAAA,QAClB,QAAQ,WAAW;AAAA,QACnB,MAAM,OAAO,mBAAmB;AAAA,QAChC,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,YAAY;AAAA,MACd;AAAA,MACA,eAAY;AAAA;AAAA,EACd;AAEJ;","names":[]}

package/dist/{chunk-N52O2OKZ.js → chunk-3NNO6YIH.js}

@@ -1,6 +1,11 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/utility/AspectRatio/AspectRatio.tsx
 import Box from "@mui/material/Box/index.js";
 import { jsx } from "react/jsx-runtime";
+var sxCap = (value) => typeof value === "number" ? (theme) => value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value) : value;
 var AspectRatio = ({
   children,
   variant = "16:9",
@@ -38,8 +43,8 @@ var AspectRatio = ({
       sx: {
         position: "relative",
         width: "100%",
-        maxWidth,
-        maxHeight,
+        maxWidth: sxCap(maxWidth),
+        maxHeight: sxCap(maxHeight),
         ...sx
       },
       ...props,
@@ -77,4 +82,4 @@ var AspectRatio = ({
 export {
   AspectRatio
 };
-//# sourceMappingURL=chunk-N52O2OKZ.js.map
+//# sourceMappingURL=chunk-3NNO6YIH.js.map

package/dist/chunk-3NNO6YIH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { AspectRatioProps } from './AspectRatio.types';\nimport { rem } from '../../../tokens/relative';\n\n/**\n * A caller's cap for `sx`: a string as given, a number as design px — except\n * `≤ 1`, which `sx` has always read as a fraction of the parent.\n */\nconst sxCap = (value: number | string | undefined): string | undefined | ((theme: Theme) => string) =>\n  typeof value === 'number'\n    ? (theme) => (value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value))\n    : value;\n\nexport const AspectRatio: React.FC<AspectRatioProps> = ({\n  children,\n  variant = '16:9',\n  ratio,\n  maxWidth,\n  maxHeight,\n  dataTestId,\n  sx,\n  ...props\n}) => {\n  const getAspectRatio = () => {\n    if (variant === 'custom' && ratio) {\n      return ratio;\n    }\n\n    switch (variant) {\n      case '16:9':\n        return 16 / 9;\n      case '4:3':\n        return 4 / 3;\n      case '1:1':\n        return 1;\n      case '3:2':\n        return 3 / 2;\n      case '21:9':\n        return 21 / 9;\n      default:\n        return 16 / 9;\n    }\n  };\n\n  const aspectRatio = getAspectRatio();\n\n  return (\n    <Box\n      data-testid={dataTestId}\n      sx={{\n        position: 'relative',\n        width: '100%',\n        maxWidth: sxCap(maxWidth),\n        maxHeight: sxCap(maxHeight),\n        ...sx,\n      }}\n      {...props}\n    >\n      <Box\n        sx={{\n          width: '100%',\n          paddingTop: `${(1 / aspectRatio) * 100}%`,\n          position: 'relative',\n        }}\n      >\n        <Box\n          sx={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            overflow: 'hidden',\n          }}\n        >\n          {children}\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,SAAS;AAoER;AAzDR,IAAM,QAAQ,CAAC,UACb,OAAO,UAAU,WACb,CAAC,UAAW,SAAS,KAAK,UAAU,IAAI,GAAG,QAAQ,GAAG,MAAM,IAAI,OAAO,KAAK,IAC5E;AAEC,IAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB,MAAM;AAC3B,QAAI,YAAY,YAAY,OAAO;AACjC,aAAO;AAAA,IACT;AAEA,YAAQ,SAAS;AAAA,MACf,KAAK;AACH,eAAO,KAAK;AAAA,MACd,KAAK;AACH,eAAO,IAAI;AAAA,MACb,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO,IAAI;AAAA,MACb,KAAK;AACH,eAAO,KAAK;AAAA,MACd;AACE,eAAO,KAAK;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,cAAc,eAAe;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,UAAU,MAAM,QAAQ;AAAA,QACxB,WAAW,MAAM,SAAS;AAAA,QAC1B,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,OAAO;AAAA,YACP,YAAY,GAAI,IAAI,cAAe,GAAG;AAAA,YACtC,UAAU;AAAA,UACZ;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,gBACF,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,UAAU;AAAA,cACZ;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/{chunk-SYN46YL6.js → chunk-3RMDIO4G.js}

@@ -23,10 +23,10 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Card
-} from "./chunk-N6CSXHFJ.js";
+} from "./chunk-WN5PNP6F.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   rem,
   sxRem
@@ -268,4 +268,4 @@ function BaseCard(props) {
 export {
   BaseCard
 };
-//# sourceMappingURL=chunk-SYN46YL6.js.map
+//# sourceMappingURL=chunk-3RMDIO4G.js.map

package/dist/{chunk-S3D5VBHW.js → chunk-3YOXVNO4.js}

@@ -1,10 +1,6 @@
 import {
   tableStyles
 } from "./chunk-POV2KL2P.js";
-import {
-  TABLE_DEFAULTS,
-  definedProps
-} from "./chunk-MTFCPPZ5.js";
 import {
   EmptyRow,
   NoDataPlaceholder
@@ -12,10 +8,14 @@ import {
 import {
   EnhancedTableBody,
   EnhancedTableHeader
-} from "./chunk-ULTOQ6ZV.js";
+} from "./chunk-5LWB4BYX.js";
 import {
   useTableSelection
-} from "./chunk-DF4K5XVW.js";
+} from "./chunk-YZVR5ROE.js";
+import {
+  TABLE_DEFAULTS,
+  definedProps
+} from "./chunk-JWZJSXI5.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -295,4 +295,4 @@ Table.displayName = "Table";
 export {
   Table
 };
-//# sourceMappingURL=chunk-S3D5VBHW.js.map
+//# sourceMappingURL=chunk-3YOXVNO4.js.map

package/dist/{chunk-MJ3BVWPZ.js → chunk-43G3WMYN.js}

@@ -1,3 +1,8 @@
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/layout/Accordion/Accordion.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var BASE_TRANSITION = "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)";
@@ -6,7 +11,7 @@ var accordionVariantStyles = (theme, variant) => {
     case "glass":
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.08),
-        backdropFilter: "blur(24px) saturate(180%)",
+        backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,
         border: `1px solid ${alpha(theme.palette.primary.main, 0.15)}`,
         borderRadius: theme.spacing(1.5),
         transition: BASE_TRANSITION,
@@ -16,8 +21,8 @@ var accordionVariantStyles = (theme, variant) => {
         "&:hover": {
           backgroundColor: alpha(theme.palette.background.paper, 0.12),
           border: `1px solid ${alpha(theme.palette.primary.main, 0.25)}`,
-          transform: "translateY(-1px)",
-          boxShadow: `0 8px 32px ${alpha(theme.palette.primary.main, 0.12)}`
+          transform: `translateY(${rem(theme, -1)})`,
+          boxShadow: `${rems(theme, 0, 8, 32)} ${alpha(theme.palette.primary.main, 0.12)}`
         },
         "&.Mui-expanded": {
           backgroundColor: alpha(theme.palette.background.paper, 0.15),
@@ -37,7 +42,7 @@ var accordionVariantStyles = (theme, variant) => {
         },
         "&:hover": {
           borderColor: theme.palette.primary.main,
-          boxShadow: `0 0 0 1px ${alpha(theme.palette.primary.main, 0.1)}`
+          boxShadow: `${rems(theme, 0, 0, 0, 1)} ${alpha(theme.palette.primary.main, 0.1)}`
         },
         "&.Mui-expanded": {
           borderColor: theme.palette.primary.main
@@ -56,11 +61,11 @@ var accordionVariantStyles = (theme, variant) => {
         },
         "&:hover": {
           boxShadow: theme.shadows[4],
-          transform: "translateY(-2px)"
+          transform: `translateY(${rem(theme, -2)})`
         },
         "&.Mui-expanded": {
           boxShadow: theme.shadows[6],
-          transform: "translateY(-1px)"
+          transform: `translateY(${rem(theme, -1)})`
         }
       };
     default:
@@ -76,4 +81,4 @@ var accordionVariantStyles = (theme, variant) => {
 export {
   accordionVariantStyles
 };
-//# sourceMappingURL=chunk-MJ3BVWPZ.js.map
+//# sourceMappingURL=chunk-43G3WMYN.js.map

package/dist/chunk-43G3WMYN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Accordion/Accordion.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\n\nimport { rem, rems } from '../../../tokens/relative';\n\nimport type { AccordionVariant } from './Accordion.types';\n\nconst BASE_TRANSITION = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';\n\n// Deliberately unannotated: the inferred union of literals assigns to MUI's\n// `sx`, whereas a `CSSObject` return type does not survive being spread into it.\nexport const accordionVariantStyles = (theme: Theme, variant: AccordionVariant) => {\n  switch (variant) {\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.08),\n        backdropFilter: `blur(${rem(theme, 24)}) saturate(180%)`,\n        border: `1px solid ${alpha(theme.palette.primary.main, 0.15)}`,\n        borderRadius: theme.spacing(1.5),\n        transition: BASE_TRANSITION,\n        '&:before': {\n          display: 'none',\n        },\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.background.paper, 0.12),\n          border: `1px solid ${alpha(theme.palette.primary.main, 0.25)}`,\n          transform: `translateY(${rem(theme, -1)})`,\n          boxShadow: `${rems(theme, 0, 8, 32)} ${alpha(theme.palette.primary.main, 0.12)}`,\n        },\n        '&.Mui-expanded': {\n          backgroundColor: alpha(theme.palette.background.paper, 0.15),\n          border: `1px solid ${alpha(theme.palette.primary.main, 0.3)}`,\n        },\n      };\n    case 'bordered':\n      return {\n        border: `1px solid ${theme.palette.divider}`,\n        borderRadius: theme.spacing(1),\n        transition: BASE_TRANSITION,\n        '&:before': {\n          display: 'none',\n        },\n        '&:not(:last-child)': {\n          marginBottom: theme.spacing(1),\n        },\n        '&:hover': {\n          borderColor: theme.palette.primary.main,\n          boxShadow: `${rems(theme, 0, 0, 0, 1)} ${alpha(theme.palette.primary.main, 0.1)}`,\n        },\n        '&.Mui-expanded': {\n          borderColor: theme.palette.primary.main,\n        },\n      };\n    case 'separated':\n      return {\n        boxShadow: theme.shadows[2],\n        borderRadius: theme.spacing(1.5),\n        transition: BASE_TRANSITION,\n        '&:before': {\n          display: 'none',\n        },\n        '&:not(:last-child)': {\n          marginBottom: theme.spacing(2),\n        },\n        '&:hover': {\n          boxShadow: theme.shadows[4],\n          transform: `translateY(${rem(theme, -2)})`,\n        },\n        '&.Mui-expanded': {\n          boxShadow: theme.shadows[6],\n          transform: `translateY(${rem(theme, -1)})`,\n        },\n      };\n    default:\n      return {\n        transition: BASE_TRANSITION,\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.action.hover, 0.04),\n        },\n      };\n  }\n};\n"],"mappings":";;;;;;AAAA,SAAS,aAAa;AAOtB,IAAM,kBAAkB;AAIjB,IAAM,yBAAyB,CAAC,OAAc,YAA8B;AACjF,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,QACL,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,QAC3D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QACtC,QAAQ,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,CAAC;AAAA,QAC5D,cAAc,MAAM,QAAQ,GAAG;AAAA,QAC/B,YAAY;AAAA,QACZ,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,QACA,WAAW;AAAA,UACT,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,UAC3D,QAAQ,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,CAAC;AAAA,UAC5D,WAAW,cAAc,IAAI,OAAO,EAAE,CAAC;AAAA,UACvC,WAAW,GAAG,KAAK,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,CAAC;AAAA,QAChF;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,UAC3D,QAAQ,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAAA,QAC7D;AAAA,MACF;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,QAC1C,cAAc,MAAM,QAAQ,CAAC;AAAA,QAC7B,YAAY;AAAA,QACZ,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,QACA,sBAAsB;AAAA,UACpB,cAAc,MAAM,QAAQ,CAAC;AAAA,QAC/B;AAAA,QACA,WAAW;AAAA,UACT,aAAa,MAAM,QAAQ,QAAQ;AAAA,UACnC,WAAW,GAAG,KAAK,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,IAAI,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAAA,QACjF;AAAA,QACA,kBAAkB;AAAA,UAChB,aAAa,MAAM,QAAQ,QAAQ;AAAA,QACrC;AAAA,MACF;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW,MAAM,QAAQ,CAAC;AAAA,QAC1B,cAAc,MAAM,QAAQ,GAAG;AAAA,QAC/B,YAAY;AAAA,QACZ,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,QACA,sBAAsB;AAAA,UACpB,cAAc,MAAM,QAAQ,CAAC;AAAA,QAC/B;AAAA,QACA,WAAW;AAAA,UACT,WAAW,MAAM,QAAQ,CAAC;AAAA,UAC1B,WAAW,cAAc,IAAI,OAAO,EAAE,CAAC;AAAA,QACzC;AAAA,QACA,kBAAkB;AAAA,UAChB,WAAW,MAAM,QAAQ,CAAC;AAAA,UAC1B,WAAW,cAAc,IAAI,OAAO,EAAE,CAAC;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AACE,aAAO;AAAA,QACL,YAAY;AAAA,QACZ,WAAW;AAAA,UACT,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,IAAI;AAAA,QACzD;AAAA,MACF;AAAA,EACJ;AACF;","names":[]}

package/dist/{chunk-E7MSDXED.js → chunk-43H66TVT.js}

@@ -2,6 +2,7 @@ import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
@@ -13,13 +14,19 @@ var BAR_MIN_HEIGHT = { regular: 64, dense: 52 };
 var HEADER_DEFAULTS = {
   position: "sticky",
   offsetTop: 0,
-  maxWidth: 1200,
   divider: true,
   elevateOnScroll: false,
   dense: false,
   disableSpacer: false,
   dataTestId: "app-header"
 };
+function contentMaxWidth(maxWidth) {
+  if (typeof maxWidth === "string") return maxWidth;
+  return (theme) => {
+    const value = maxWidth ?? theme.breakpoints.values.lg;
+    return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+  };
+}
 function useScrolled(enabled) {
   const [scrolled, setScrolled] = React.useState(false);
   React.useEffect(() => {
@@ -54,7 +61,7 @@ function surfaceSx({
 }) {
   return {
     position,
-    ...position === "static" ? {} : { top: offsetTop, zIndex: "appBar" },
+    ...position === "static" ? {} : { top: typeof offsetTop === "number" ? sxRem(offsetTop) : offsetTop, zIndex: "appBar" },
     ...position === "fixed" ? { left: 0, right: 0 } : {},
     backgroundColor: "background.paper",
     borderBottom: divider ? 1 : 0,
@@ -135,7 +142,7 @@ var AppHeader = (props) => {
         className,
         "data-testid": dataTestId,
         sx: surfaceSx({ position, offsetTop, divider, scrolled }),
-        children: /* @__PURE__ */ jsxs(Box, { sx: { maxWidth, mx: "auto", px: { xs: 2, md: 3 } }, children: [
+        children: /* @__PURE__ */ jsxs(Box, { sx: { maxWidth: contentMaxWidth(maxWidth), mx: "auto", px: { xs: 2, md: 3 } }, children: [
           /* @__PURE__ */ jsxs(
             Box,
             {
@@ -143,7 +150,7 @@ var AppHeader = (props) => {
                 display: "flex",
                 alignItems: "center",
                 gap: { xs: 1, md: 2 },
-                minHeight: dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular,
+                minHeight: sxRem(dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular),
                 py: 1
               },
               children: [
@@ -167,4 +174,4 @@ export {
   AppHeader,
   AppHeader_default
 };
-//# sourceMappingURL=chunk-E7MSDXED.js.map
+//# sourceMappingURL=chunk-43H66TVT.js.map