@12-apps/ui 6.37.0 → 6.38.0

package/dist/{chunk-LVEG6XQL.js → chunk-76X6JRVI.js}

@@ -12,25 +12,25 @@ import {
   CARD_SECTION_BACKGROUND,
   neumorphicShadows
 } from "./chunk-JH7EEJEQ.js";
-import {
-  shadowCss,
-  shadowListCss
-} from "./chunk-73BEVJCS.js";
 import {
   neutralTones,
   shadowInk,
   sheen
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/Card/Card.styles.ts
 import { alpha, keyframes } from "@mui/material/styles/index.js";
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 ${CARD_PULSE.spread}px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, CARD_PULSE.spread)} currentColor;
     opacity: 0;
   }
   100% {
@@ -38,10 +38,14 @@ var pulseAnimation = keyframes`
     opacity: 0;
   }
 `;
+var shadowRem = (theme, shadow) => {
+  const spread = shadow.spreadDistance === 0 ? [] : [shadow.spreadDistance];
+  return `${rems(theme, shadow.offsetX, shadow.offsetY, shadow.blurRadius, ...spread)} ${shadow.color}`;
+};
 var borderRadiusFor = (theme, radius) => {
   if (radius === "full") return CARD_RADIUS_FULL;
   const units = CARD_RADIUS_UNITS[radius] ?? CARD_RADIUS_UNITS.md;
-  return units === 0 ? 0 : theme.spacing(units);
+  return units === 0 ? "0" : theme.spacing(units);
 };
 var pulseSurface = (theme) => ({
   position: "relative",
@@ -56,7 +60,7 @@ var pulseSurface = (theme) => ({
     borderRadius: "inherit",
     backgroundColor: theme.palette.primary.main,
     opacity: CARD_PULSE.alpha,
-    animation: `${pulseAnimation} ${CARD_PULSE.durationMs / 1e3}s infinite`,
+    animation: `${pulseAnimation(theme)} ${CARD_PULSE.durationMs / 1e3}s infinite`,
     pointerEvents: "none",
     zIndex: CARD_PULSE.zIndex
   }
@@ -70,7 +74,7 @@ var neumorphicShadow = (theme, lifted) => {
     alpha(neutralTones(theme).subtle, lifted ? light.near.lifted : light.near.rest),
     sheen(theme, lifted ? light.far.lifted : light.far.rest)
   ];
-  return shadowListCss(neumorphicShadows(lifted, near, far));
+  return neumorphicShadows(lifted, near, far).map((shadow) => shadowRem(theme, shadow)).join(", ");
 };
 var sectionBackground = (theme, lifted) => {
   const wash = CARD_SECTION_BACKGROUND[theme.palette.mode === "dark" ? "dark" : "light"];
@@ -78,13 +82,7 @@ var sectionBackground = (theme, lifted) => {
 };
 var glowShadow = (theme, lifted) => {
   const { blurRadius, alpha: opacity } = lifted ? CARD_GLOW.lifted : CARD_GLOW.rest;
-  return shadowCss({
-    offsetX: 0,
-    offsetY: 0,
-    blurRadius,
-    spreadDistance: 0,
-    color: alpha(theme.palette.primary.main, opacity)
-  });
+  return `${rems(theme, 0, 0, blurRadius)} ${alpha(theme.palette.primary.main, opacity)}`;
 };
 var VARIANT_SURFACES = {
   elevated: (_theme, lifted) => ({
@@ -101,15 +99,9 @@ var VARIANT_SURFACES = {
   glass: (theme, lifted) => ({
     surface: {
       backgroundColor: alpha(theme.palette.background.paper, CARD_GLASS.backgroundAlpha.rest),
-      backdropFilter: `blur(${CARD_GLASS.blurPx}px)`,
+      backdropFilter: `blur(${rem(theme, CARD_GLASS.blurPx)})`,
       border: `${CARD_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, CARD_GLASS.borderAlpha.rest)}`,
-      boxShadow: shadowCss({
-        offsetX: 0,
-        offsetY: CARD_GLASS.shadow.offsetY,
-        blurRadius: CARD_GLASS.shadow.blurRadius,
-        spreadDistance: 0,
-        color: shadowInk(theme, CARD_GLASS.shadow.alpha)
-      })
+      boxShadow: `${rems(theme, 0, CARD_GLASS.shadow.offsetY, CARD_GLASS.shadow.blurRadius)} ${shadowInk(theme, CARD_GLASS.shadow.alpha)}`
     },
     hover: {
       backgroundColor: alpha(
@@ -123,13 +115,7 @@ var VARIANT_SURFACES = {
     surface: {
       background: cardGradient(theme, false),
       color: theme.palette.primary.contrastText,
-      boxShadow: shadowCss({
-        offsetX: 0,
-        offsetY: CARD_GRADIENT.shadow.offsetY,
-        blurRadius: CARD_GRADIENT.shadow.blurRadius,
-        spreadDistance: 0,
-        color: alpha(theme.palette.primary.main, CARD_GRADIENT.shadow.alpha)
-      })
+      boxShadow: `${rems(theme, 0, CARD_GRADIENT.shadow.offsetY, CARD_GRADIENT.shadow.blurRadius)} ${alpha(theme.palette.primary.main, CARD_GRADIENT.shadow.alpha)}`
     },
     hover: { background: cardGradient(theme, lifted) }
   }),
@@ -169,7 +155,7 @@ var cardStyles = (theme, { variant, interactive, glow, pulse, borderRadius }) =>
     ...pulse && pulseSurface(theme),
     ...chosen.surface,
     "&:hover": {
-      ...interactive && { transform: `translateY(-${CARD_INTERACTIVE_LIFT}px)` },
+      ...interactive && { transform: `translateY(${rem(theme, -CARD_INTERACTIVE_LIFT)})` },
       ...glow && { boxShadow: glowShadow(theme, true) },
       ...chosen.hover
     }
@@ -179,4 +165,4 @@ var cardStyles = (theme, { variant, interactive, glow, pulse, borderRadius }) =>
 export {
   cardStyles
 };
-//# sourceMappingURL=chunk-LVEG6XQL.js.map
+//# sourceMappingURL=chunk-76X6JRVI.js.map

package/dist/chunk-76X6JRVI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Card/Card.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { CardBorderRadius, CardVariant } from './Card.base';\nimport {\n  CARD_BORDER_WIDTH,\n  CARD_ELEVATION,\n  CARD_GLASS,\n  CARD_GLOW,\n  CARD_GRADIENT,\n  CARD_INTERACTIVE_LIFT,\n  CARD_NEUMORPHIC,\n  CARD_PULSE,\n  CARD_RADIUS_FULL,\n  CARD_RADIUS_UNITS,\n  CARD_SECTION_BACKGROUND,\n  neumorphicShadows,\n} from './Card.metrics';\nimport { neutralTones, shadowInk, sheen } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\nimport type { UiShadow } from '../../../tokens/shadow';\n\ntype BorderRadius = CardBorderRadius;\n\n// Define pulse animation. The 15px spread and the 2s period are the shared\n// metrics, so the native ring grows by exactly as much for exactly as long.\nconst pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, CARD_PULSE.spread)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n/**\n * A shared-metrics shadow as CSS, every length through the type scale: the text\n * `shadowCss` writes (a bare `0`, no zero spread) with rem in place of px.\n */\nconst shadowRem = (theme: Theme, shadow: UiShadow): string => {\n  const spread = shadow.spreadDistance === 0 ? [] : [shadow.spreadDistance];\n  return `${rems(theme, shadow.offsetX, shadow.offsetY, shadow.blurRadius, ...spread)} ${shadow.color}`;\n};\n\nconst borderRadiusFor = (theme: Theme, radius: BorderRadius): string => {\n  if (radius === 'full') return CARD_RADIUS_FULL;\n  const units = CARD_RADIUS_UNITS[radius] ?? CARD_RADIUS_UNITS.md;\n  // `none` is a bare 0 rather than `spacing(0)`, as this has always written it.\n  return units === 0 ? '0' : theme.spacing(units);\n};\n\nconst pulseSurface = (theme: Theme): CSSObject => ({\n  position: 'relative',\n  overflow: 'visible',\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '0',\n    left: '0',\n    right: '0',\n    bottom: '0',\n    borderRadius: 'inherit',\n    backgroundColor: theme.palette.primary.main,\n    opacity: CARD_PULSE.alpha,\n    animation: `${pulseAnimation(theme)} ${CARD_PULSE.durationMs / 1000}s infinite`,\n    pointerEvents: 'none',\n    zIndex: CARD_PULSE.zIndex,\n  },\n});\n\nconst neumorphicShadow = (theme: Theme, lifted: boolean): string => {\n  const { dark, light } = CARD_NEUMORPHIC.alpha;\n  const [near, far] =\n    theme.palette.mode === 'dark'\n      ? [\n          shadowInk(theme, dark.near),\n          sheen(theme, dark.far),\n        ]\n      : [\n          alpha(neutralTones(theme).subtle, lifted ? light.near.lifted : light.near.rest),\n          sheen(theme, lifted ? light.far.lifted : light.far.rest),\n        ];\n\n  return neumorphicShadows(lifted, near, far).map((shadow) => shadowRem(theme, shadow)).join(', ');\n};\n\nconst sectionBackground = (theme: Theme, lifted: boolean): string => {\n  const wash = CARD_SECTION_BACKGROUND[theme.palette.mode === 'dark' ? 'dark' : 'light'];\n  return lifted ? wash.lifted : wash.rest;\n};\n\nconst glowShadow = (theme: Theme, lifted: boolean): string => {\n  const { blurRadius, alpha: opacity } = lifted ? CARD_GLOW.lifted : CARD_GLOW.rest;\n  return `${rems(theme, 0, 0, blurRadius)} ${alpha(theme.palette.primary.main, opacity)}`;\n};\n\ninterface Surface {\n  surface: CSSObject;\n  hover: CSSObject;\n}\n\n/**\n * Each variant contributes a resting surface and whatever it changes on hover.\n * Only `interactive` cards actually move on hover, so the hover half of every\n * variant reads back its resting value when `interactive` is off.\n */\nconst VARIANT_SURFACES: Record<CardVariant, (theme: Theme, lifted: boolean) => Surface> = {\n  elevated: (_theme, lifted) => ({\n    surface: { elevation: CARD_ELEVATION.rest } as CSSObject,\n    hover: { elevation: lifted ? CARD_ELEVATION.lifted : CARD_ELEVATION.rest } as CSSObject,\n  }),\n  outlined: (theme, lifted) => ({\n    surface: {\n      border: `${CARD_BORDER_WIDTH}px solid ${theme.palette.divider}`,\n      boxShadow: 'none',\n    },\n    hover: { borderColor: lifted ? theme.palette.primary.main : theme.palette.divider },\n  }),\n  glass: (theme, lifted) => ({\n    surface: {\n      backgroundColor: alpha(theme.palette.background.paper, CARD_GLASS.backgroundAlpha.rest),\n      backdropFilter: `blur(${rem(theme, CARD_GLASS.blurPx)})`,\n      border: `${CARD_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, CARD_GLASS.borderAlpha.rest)}`,\n      boxShadow: `${rems(theme, 0, CARD_GLASS.shadow.offsetY, CARD_GLASS.shadow.blurRadius)} ${shadowInk(theme, CARD_GLASS.shadow.alpha)}`,\n    },\n    hover: {\n      backgroundColor: alpha(\n        theme.palette.background.paper,\n        lifted ? CARD_GLASS.backgroundAlpha.lifted : CARD_GLASS.backgroundAlpha.rest,\n      ),\n      border: `${CARD_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, CARD_GLASS.borderAlpha.lifted)}`,\n    },\n  }),\n  gradient: (theme, lifted) => ({\n    surface: {\n      background: cardGradient(theme, false),\n      color: theme.palette.primary.contrastText,\n      boxShadow: `${rems(theme, 0, CARD_GRADIENT.shadow.offsetY, CARD_GRADIENT.shadow.blurRadius)} ${alpha(theme.palette.primary.main, CARD_GRADIENT.shadow.alpha)}`,\n    },\n    hover: { background: cardGradient(theme, lifted) },\n  }),\n  neumorphic: (theme, lifted) => ({\n    surface: {\n      backgroundColor:\n        theme.palette.mode === 'dark' ? neutralTones(theme).raised : neutralTones(theme).surface,\n      boxShadow: neumorphicShadow(theme, false),\n      border: 'none',\n    },\n    hover: { boxShadow: neumorphicShadow(theme, lifted) },\n  }),\n  section: (theme, lifted) => ({\n    surface: {\n      backgroundColor: sectionBackground(theme, false),\n      border: 'none',\n      boxShadow: 'none',\n    },\n    hover: { backgroundColor: sectionBackground(theme, lifted) },\n  }),\n};\n\nconst cardGradient = (theme: Theme, dark: boolean): string =>\n  dark\n    ? `linear-gradient(${CARD_GRADIENT.angleDeg}deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`\n    : `linear-gradient(${CARD_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`;\n\n// An unrecognised variant gets the shared base only — no interactive, glow or\n// pulse decoration, as before.\nconst variantSurface = (\n  theme: Theme,\n  variant: CardVariant,\n  interactive: boolean,\n): Surface | null => VARIANT_SURFACES[variant]?.(theme, interactive) ?? null;\n\ninterface CardStyleArgs {\n  variant: CardVariant;\n  interactive: boolean;\n  glow: boolean;\n  pulse: boolean;\n  borderRadius: BorderRadius;\n}\n\nexport const cardStyles = (\n  theme: Theme,\n  { variant, interactive, glow, pulse, borderRadius }: CardStyleArgs,\n): CSSObject => {\n  const base: CSSObject = {\n    borderRadius: borderRadiusFor(theme, borderRadius),\n    transition: theme.transitions.create(\n      ['box-shadow', 'transform', 'border-color', 'background-color'],\n      { duration: theme.transitions.duration.standard },\n    ),\n  };\n\n  const chosen = variantSurface(theme, variant, interactive);\n  if (!chosen) return base;\n\n  return {\n    ...base,\n    ...(interactive && { cursor: 'pointer', '&:active': { transform: 'translateY(0)' } }),\n    ...(glow && { boxShadow: glowShadow(theme, false) }),\n    ...(pulse && pulseSurface(theme)),\n    ...chosen.surface,\n    '&:hover': {\n      ...(interactive && { transform: `translateY(${rem(theme, -CARD_INTERACTIVE_LIFT)})` }),\n      ...(glow && { boxShadow: glowShadow(theme, true) }),\n      ...chosen.hover,\n    },\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-2NLYGZP3.js → chunk-77JL5XVD.js}

@@ -4,6 +4,9 @@ import {
 import {
   scrim
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/feedback/StackedModal/StackedModal.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
@@ -34,16 +37,17 @@ var KEYFRAMES = {
   }
 };
 var cap = (customMaxWidth) => customMaxWidth ? MAX_WIDTH_PX[customMaxWidth] : null;
-var panelWidth = (share, capPx) => capPx ? { width: `min(${share}, ${capPx}px)`, maxWidth: `${capPx}px` } : { width: share, maxWidth: share };
+var panelWidth = (theme, share, capPx) => capPx ? { width: `min(${share}, ${rem(theme, capPx)})`, maxWidth: rem(theme, capPx) } : { width: share, maxWidth: share };
 var backdropStyles = (theme, modalRole) => ({
   backgroundColor: scrim(theme, (modalRole && BACKDROP_ALPHA_BY_ROLE[modalRole]) ?? 0.5),
-  backdropFilter: modalRole === "primary" ? "blur(4px)" : "none"
+  backdropFilter: modalRole === "primary" ? `blur(${rem(theme, 4)})` : "none"
 });
 var primaryPanelStyles = (theme, capPx) => ({
-  [theme.breakpoints.down("sm")]: panelWidth("100%", capPx),
-  [theme.breakpoints.between("sm", "lg")]: panelWidth("80vw", capPx),
-  [theme.breakpoints.up("lg")]: panelWidth("60vw", capPx),
-  "@media (min-width:2200px)": panelWidth("40vw", capPx)
+  [theme.breakpoints.down("sm")]: panelWidth(theme, "100%", capPx),
+  [theme.breakpoints.between("sm", "lg")]: panelWidth(theme, "80vw", capPx),
+  [theme.breakpoints.up("lg")]: panelWidth(theme, "60vw", capPx),
+  // A viewport width, in the theme's breakpoint unit like the three above.
+  [theme.breakpoints.up(2200)]: panelWidth(theme, "40vw", capPx)
 });
 var secondaryPanelStyles = () => ({
   width: "100vw !important",
@@ -63,8 +67,8 @@ var rolePanelStyles = (theme, role, capPx) => {
 };
 var glassStyles = (theme, glass, role) => glass && role === "primary" ? {
   backgroundColor: alpha(theme.palette.background.paper, 0.85),
-  backdropFilter: "blur(10px)",
-  WebkitBackdropFilter: "blur(10px)",
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
 } : {};
 var animationStyles = (isAnimating, role) => isAnimating ? { animation: (role && ANIMATION_BY_ROLE[role]) ?? "none" } : {};
@@ -153,4 +157,4 @@ export {
   loadingOverlayStyles,
   modalContentStyles
 };
-//# sourceMappingURL=chunk-2NLYGZP3.js.map
+//# sourceMappingURL=chunk-77JL5XVD.js.map

package/dist/chunk-77JL5XVD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/StackedModal/StackedModal.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { scrim } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\nimport { dynamicViewportHeight } from '../../../utils/viewport';\nimport type { ModalPanelRole, PanelMaxWidth } from './StackedModal.types';\n\n/** Props that drive the panel's look but must not reach the DOM. */\nexport interface PanelStyleProps {\n  modalRole?: ModalPanelRole;\n  isAnimating?: boolean;\n  glass?: boolean;\n  rtl?: boolean;\n  customMaxWidth?: PanelMaxWidth;\n}\n\n/** Style-only props, filtered out before they can land on a DOM node. */\nexport const STYLE_ONLY_PROPS = ['modalRole', 'isAnimating', 'glass', 'rtl', 'customMaxWidth'];\n\n/** MUI breakpoint names mapped to the pixel width they cap the panel at. */\nconst MAX_WIDTH_PX: Record<Exclude<PanelMaxWidth, false>, number> = {\n  xs: 444,\n  sm: 600,\n  md: 960,\n  lg: 1280,\n  xl: 1920,\n};\n\n/** The scrim's opacity behind each receding panel role. */\nconst BACKDROP_ALPHA_BY_ROLE: Partial<Record<ModalPanelRole, number>> = {\n  secondary: 0.3,\n  background: 0.1,\n};\n\nconst ANIMATION_BY_ROLE: Partial<Record<ModalPanelRole, string>> = {\n  secondary: 'expandModal 300ms ease-in-out forwards',\n  primary: 'contractModal 300ms ease-in-out forwards',\n};\n\n// Animation endpoints use the common lg width (60vw); the role styles set the\n// exact per-breakpoint width once the animation settles.\nconst KEYFRAMES: CSSObject = {\n  '@keyframes expandModal': {\n    from: { width: '60vw', transform: 'translateX(0)' },\n    to: { width: '100vw', transform: 'translateX(0)' },\n  },\n  '@keyframes contractModal': {\n    from: { width: '100vw', transform: 'translateX(0)' },\n    to: { width: '60vw', transform: 'translateX(0)' },\n  },\n};\n\nconst cap = (customMaxWidth?: PanelMaxWidth): number | null =>\n  customMaxWidth ? MAX_WIDTH_PX[customMaxWidth] : null;\n\n/** One breakpoint's width: the viewport share, held under the optional px cap. */\nconst panelWidth = (theme: Theme, share: string, capPx: number | null): CSSObject =>\n  capPx\n    ? { width: `min(${share}, ${rem(theme, capPx)})`, maxWidth: rem(theme, capPx) }\n    : { width: share, maxWidth: share };\n\nconst backdropStyles = (theme: Theme, modalRole?: ModalPanelRole): CSSObject => ({\n  backgroundColor: scrim(theme, (modalRole && BACKDROP_ALPHA_BY_ROLE[modalRole]) ?? 0.5),\n  backdropFilter: modalRole === 'primary' ? `blur(${rem(theme, 4)})` : 'none',\n});\n\n/**\n * The top panel is viewport-aware and narrows as the screen grows: full width on\n * mobile, 80vw on tablet/small desktop, 60vw on regular desktops (lg up —\n * including ~1080p/1440p/1080-wide), and 40vw only on ultra-wide screens\n * (≥2200px) so the receding panel stays visible on huge monitors. A `maxWidth`\n * prop, when given, caps it further.\n */\nconst primaryPanelStyles = (theme: Theme, capPx: number | null): CSSObject => ({\n  [theme.breakpoints.down('sm')]: panelWidth(theme, '100%', capPx),\n  [theme.breakpoints.between('sm', 'lg')]: panelWidth(theme, '80vw', capPx),\n  [theme.breakpoints.up('lg')]: panelWidth(theme, '60vw', capPx),\n  // A viewport width, in the theme's breakpoint unit like the three above.\n  [theme.breakpoints.up(2200)]: panelWidth(theme, '40vw', capPx),\n});\n\n/** Panels below the top one expand to full width, producing the GTM stacking effect. */\nconst secondaryPanelStyles = (): CSSObject => ({\n  width: '100vw !important',\n  maxWidth: '100vw !important',\n  right: '0 !important',\n  top: '0 !important',\n  ...dynamicViewportHeight('height', 'maxHeight'),\n  borderRadius: '0 !important',\n  opacity: 0.95,\n  transform: 'scale(1)',\n});\n\nconst rolePanelStyles = (theme: Theme, role: ModalPanelRole | undefined, capPx: number | null): CSSObject => {\n  if (role === 'primary') return primaryPanelStyles(theme, capPx);\n  if (role === 'secondary') return secondaryPanelStyles();\n  // Background modals stay mounted but hidden, for performance.\n  if (role === 'background') return { display: 'none' };\n  return {};\n};\n\nconst glassStyles = (theme: Theme, glass?: boolean, role?: ModalPanelRole): CSSObject =>\n  glass && role === 'primary'\n    ? {\n        backgroundColor: alpha(theme.palette.background.paper, 0.85),\n        backdropFilter: `blur(${rem(theme, 10)})`,\n        WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n        border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n      }\n    : {};\n\nconst animationStyles = (isAnimating?: boolean, role?: ModalPanelRole): CSSObject =>\n  isAnimating ? { animation: (role && ANIMATION_BY_ROLE[role]) ?? 'none' } : {};\n\nconst panelBaseStyles = (theme: Theme): CSSObject => ({\n  margin: 0,\n  position: 'fixed',\n  right: 0,\n  top: 0,\n  // Pinned to the DYNAMIC viewport: on iOS a `100vh` panel runs underneath the\n  // browser toolbar, which parks the tail of the scroll area (the submit row)\n  // out of reach. See `dynamicViewportHeight`.\n  ...dynamicViewportHeight('height', 'maxHeight'),\n  borderRadius: 0,\n  willChange: 'transform, width, border-radius',\n  transition: theme.transitions.create(\n    ['width', 'max-width', 'border-radius', 'transform', 'opacity'],\n    { duration: 300, easing: theme.transitions.easing.easeInOut },\n  ),\n});\n\nconst panelStyles = (theme: Theme, props: PanelStyleProps): CSSObject => {\n  const capPx = cap(props.customMaxWidth);\n  return {\n    ...panelBaseStyles(theme),\n    ...rolePanelStyles(theme, props.modalRole, capPx),\n    ...glassStyles(theme, props.glass, props.modalRole),\n    ...animationStyles(props.isAnimating, props.modalRole),\n  };\n};\n\n/** The full rule set for the sliding panel's Dialog root. */\nexport const dialogRootStyles = (theme: Theme, props: PanelStyleProps): CSSObject => ({\n  direction: props.rtl ? 'rtl' : 'ltr',\n  '& .MuiBackdrop-root': backdropStyles(theme, props.modalRole),\n  '& .MuiDialog-container': { alignItems: 'flex-start', justifyContent: 'flex-end' },\n  '& .MuiDialog-paper': panelStyles(theme, props),\n  ...KEYFRAMES,\n});\n\nexport const titleStyles = (theme: Theme, rtl?: boolean): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: theme.spacing(2, 2.5),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  direction: rtl ? 'rtl' : 'ltr',\n});\n\nexport const titleLeftStyles = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1.5),\n  flex: 1,\n});\n\nexport const titleRightStyles = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n});\n\nexport const loadingOverlayStyles = (theme: Theme): CSSObject => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: alpha(theme.palette.background.paper, 0.8),\n  zIndex: 9999,\n});\n\nexport const modalContentStyles = (theme: Theme): CSSObject => ({\n  padding: theme.spacing(3),\n  // MUI's DialogContent defaults to `overflow-y: auto`, but inside a panel it is\n  // NOT the element that scrolls — ModalBody above it is, and this box always\n  // ends up exactly as tall as its own content. A scroll container that never\n  // scrolls is still the containing block for every `position: sticky`\n  // descendant, so a sticky header anchored here gets zero travel and rides the\n  // content out of view: sticky, and pinned to nothing. Handing the overflow\n  // back to ModalBody makes the panel's own scroller the anchor.\n  overflowY: 'visible',\n});\n"],"mappings":"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","names":[]}

package/dist/{chunk-T3WHW7ZC.js → chunk-BAZXVFLR.js}

@@ -1,7 +1,11 @@
 import {
   getOverflowStyle,
-  getVariantStyles
-} from "./chunk-L7SFH3ED.js";
+  getVariantStyles,
+  sizeCss
+} from "./chunk-I7GSRTGQ.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/ScrollArea/ScrollViewport.tsx
 import Box from "@mui/material/Box/index.js";
@@ -39,7 +43,7 @@ var ScrollViewport = ({
         width: "100%",
         height: "100%",
         // Use an explicit maxHeight when height is 'auto', else inherit.
-        maxHeight: height === "auto" && maxHeight ? maxHeight : "100%",
+        maxHeight: height === "auto" && maxHeight ? sizeCss(theme, maxHeight) : "100%",
         padding: contentPadding,
         opacity: loading ? 0.5 : 1,
         pointerEvents: disabled || loading ? "none" : "auto",
@@ -47,8 +51,8 @@ var ScrollViewport = ({
         "&:focus": {
           outline: "none",
           "&:focus-visible": {
-            outline: `2px solid ${theme.palette.primary.main}`,
-            outlineOffset: -2
+            outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,
+            outlineOffset: rem(theme, -2)
           }
         },
         ...getOverflowStyle({ disabled, orientation }),
@@ -71,4 +75,4 @@ var ScrollViewport = ({
 export {
   ScrollViewport
 };
-//# sourceMappingURL=chunk-T3WHW7ZC.js.map
+//# sourceMappingURL=chunk-BAZXVFLR.js.map

package/dist/chunk-BAZXVFLR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ScrollArea/ScrollViewport.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode, UIEvent } from 'react';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport { getOverflowStyle, getVariantStyles, sizeCss } from './ScrollArea.styles';\nimport type { ResolvedScrollAreaProps } from './ScrollArea.helpers';\n\nexport interface ScrollViewportProps\n  extends Pick<\n    ResolvedScrollAreaProps,\n    | 'height'\n    | 'maxHeight'\n    | 'orientation'\n    | 'scrollbarSize'\n    | 'scrollbarColor'\n    | 'scrollbarTrackColor'\n    | 'contentPadding'\n    | 'variant'\n    | 'disabled'\n    | 'loading'\n    | 'smoothScroll'\n  > {\n  /** The scroll region's accessible name. REQUIRED. */\n  regionLabel: string;\n  children: ReactNode;\n  shouldShowScrollbar: boolean;\n  setScrollRef: (node: HTMLDivElement | null) => void;\n  onScroll: (event: UIEvent<HTMLDivElement>) => void;\n}\n\n// The element that actually scrolls: its own overflow and scrollbar styling,\n// plus the disabled and loading treatments.\nexport const ScrollViewport: FC<ScrollViewportProps> = ({\n  regionLabel,\n  children,\n  height,\n  maxHeight,\n  orientation,\n  scrollbarSize,\n  scrollbarColor,\n  scrollbarTrackColor,\n  contentPadding,\n  variant,\n  disabled,\n  loading,\n  smoothScroll,\n  shouldShowScrollbar,\n  setScrollRef,\n  onScroll,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      ref={setScrollRef}\n      onScroll={onScroll}\n      role=\"region\"\n      aria-label={regionLabel}\n      aria-busy={loading}\n      tabIndex={disabled ? -1 : 0}\n      sx={{\n        width: '100%',\n        height: '100%',\n        // Use an explicit maxHeight when height is 'auto', else inherit.\n        maxHeight: height === 'auto' && maxHeight ? sizeCss(theme, maxHeight) : '100%',\n        padding: contentPadding,\n        opacity: loading ? 0.5 : 1,\n        pointerEvents: disabled || loading ? 'none' : 'auto',\n        transition: 'opacity 0.3s ease',\n        '&:focus': {\n          outline: 'none',\n          '&:focus-visible': {\n            outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,\n            outlineOffset: rem(theme, -2),\n          },\n        },\n        ...getOverflowStyle({ disabled, orientation }),\n        ...getVariantStyles({\n          theme,\n          variant,\n          orientation,\n          scrollbarSize,\n          scrollbarColor,\n          scrollbarTrackColor,\n          shouldShowScrollbar,\n        }),\n      }}\n      style={{ scrollBehavior: smoothScroll ? 'smooth' : 'auto' }}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AAuDrB;AArBG,IAAM,iBAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,aAAW;AAAA,MACX,UAAU,WAAW,KAAK;AAAA,MAC1B,IAAI;AAAA,QACF,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,QAER,WAAW,WAAW,UAAU,YAAY,QAAQ,OAAO,SAAS,IAAI;AAAA,QACxE,SAAS;AAAA,QACT,SAAS,UAAU,MAAM;AAAA,QACzB,eAAe,YAAY,UAAU,SAAS;AAAA,QAC9C,YAAY;AAAA,QACZ,WAAW;AAAA,UACT,SAAS;AAAA,UACT,mBAAmB;AAAA,YACjB,SAAS,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,MAAM,QAAQ,QAAQ,IAAI;AAAA,YAC7D,eAAe,IAAI,OAAO,EAAE;AAAA,UAC9B;AAAA,QACF;AAAA,QACA,GAAG,iBAAiB,EAAE,UAAU,YAAY,CAAC;AAAA,QAC7C,GAAG,iBAAiB;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,OAAO,EAAE,gBAAgB,eAAe,WAAW,OAAO;AAAA,MAEzD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/{chunk-7F7TTOYN.js → chunk-BEGTLELZ.js}

@@ -2,8 +2,9 @@ import {
   defaultDimensions,
   muiAnimationFor,
   muiVariantFor,
-  skeletonStyles
-} from "./chunk-Q4BQYYPU.js";
+  skeletonLength,
+  skeletonSx
+} from "./chunk-E2QIKJX2.js";
 import {
   resolveSkeletonProps,
   skeletonInstanceTestId
@@ -50,9 +51,9 @@ var Skeleton = React.memo((rawProps) => {
     {
       variant: muiVariantFor(variant),
       animation: muiAnimationFor(variant, animation),
-      width: finalWidth,
-      height: finalHeight,
-      sx: skeletonStyles(theme, {
+      width: finalWidth === 0 ? 0 : skeletonLength(theme, finalWidth),
+      height: finalHeight === 0 ? 0 : skeletonLength(theme, finalHeight),
+      sx: skeletonSx(theme, {
         intensity,
         borderRadius,
         glassmorphism,
@@ -77,4 +78,4 @@ Skeleton.displayName = "Skeleton";
 export {
   Skeleton
 };
-//# sourceMappingURL=chunk-7F7TTOYN.js.map
+//# sourceMappingURL=chunk-BEGTLELZ.js.map

package/dist/chunk-BEGTLELZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Skeleton/Skeleton.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport MuiSkeleton from '@mui/material/Skeleton/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { resolveSkeletonProps, skeletonInstanceTestId } from './Skeleton.helpers';\nimport {\n  defaultDimensions,\n  muiAnimationFor,\n  muiVariantFor,\n  skeletonLength,\n  skeletonSx,\n} from './Skeleton.styles';\nimport type { SkeletonProps } from './Skeleton.types';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\n\nexport const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {\n  const {\n    variant,\n    animation,\n    width,\n    height,\n    count,\n    spacing,\n    borderRadius,\n    className,\n    intensity,\n    glassmorphism,\n    shimmer,\n    style,\n    ...others\n  } = resolveSkeletonProps(rawProps);\n  // `testID` and `dataTestId` are the shared contract's spellings; the DOM\n  // wants `data-testid`, and must not see the other two as attributes.\n  const dataTestId = resolveTestId(others);\n  const props = withoutTestIdProps(others);\n  const theme = useTheme();\n\n  const defaults = defaultDimensions(variant);\n  const finalWidth = width ?? defaults.width;\n  const finalHeight = height ?? defaults.height;\n\n  // Handle edge case: count of 0 should render nothing\n  if (count === 0) {\n    return null;\n  }\n\n  const singleSkeleton = (\n    <MuiSkeleton\n      variant={muiVariantFor(variant)}\n      animation={muiAnimationFor(variant, animation)}\n      // A `0` stays `0`: MUI reads a falsy size as \"size from children\".\n      width={finalWidth === 0 ? 0 : skeletonLength(theme, finalWidth)}\n      height={finalHeight === 0 ? 0 : skeletonLength(theme, finalHeight)}\n      sx={skeletonSx(theme, {\n        intensity,\n        borderRadius,\n        glassmorphism,\n        shimmer,\n        style,\n      })}\n      className={className}\n      data-testid={dataTestId}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  );\n\n  if (count === 1) {\n    return singleSkeleton;\n  }\n\n  return (\n    <Stack spacing={spacing}>\n      {Array.from({ length: count }).map((_, index) => (\n        <Box key={`skeleton-${index}`}>\n          {React.cloneElement(singleSkeleton, {\n            'data-testid': skeletonInstanceTestId(dataTestId, index),\n          })}\n        </Box>\n      ))}\n    </Stack>\n  );\n});\n\nSkeleton.displayName = 'Skeleton';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,iBAAiB;AACxB,OAAO,WAAW;AAClB,SAAS,gBAAgB;AACzB,OAAO,WAAW;AA6Cd;AAhCG,IAAM,WAAoC,MAAM,KAAK,CAAC,aAAa;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,qBAAqB,QAAQ;AAGjC,QAAM,aAAa,cAAc,MAAM;AACvC,QAAM,QAAQ,mBAAmB,MAAM;AACvC,QAAM,QAAQ,SAAS;AAEvB,QAAM,WAAW,kBAAkB,OAAO;AAC1C,QAAM,aAAa,SAAS,SAAS;AACrC,QAAM,cAAc,UAAU,SAAS;AAGvC,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,EACT;AAEA,QAAM,iBACJ;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,cAAc,OAAO;AAAA,MAC9B,WAAW,gBAAgB,SAAS,SAAS;AAAA,MAE7C,OAAO,eAAe,IAAI,IAAI,eAAe,OAAO,UAAU;AAAA,MAC9D,QAAQ,gBAAgB,IAAI,IAAI,eAAe,OAAO,WAAW;AAAA,MACjE,IAAI,WAAW,OAAO;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MACD;AAAA,MACA,eAAa;AAAA,MACb,eAAY;AAAA,MACX,GAAG;AAAA;AAAA,EACN;AAGF,MAAI,UAAU,GAAG;AACf,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAM,SACJ,gBAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UACrC,oBAAC,OACE,gBAAM,aAAa,gBAAgB;AAAA,IAClC,eAAe,uBAAuB,YAAY,KAAK;AAAA,EACzD,CAAC,KAHO,YAAY,KAAK,EAI3B,CACD,GACH;AAEJ,CAAC;AAED,SAAS,cAAc;","names":[]}

package/dist/{chunk-VT5HQ2AD.js → chunk-BFMDA6UO.js}

@@ -4,7 +4,7 @@ import {
 import {
   Dialog,
   DialogContent
-} from "./chunk-L4UP5VYS.js";
+} from "./chunk-GVH7C2PT.js";
 import {
   default as default2
 } from "./chunk-WEBEOBN5.js";
@@ -13,7 +13,7 @@ import {
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 
 // src/components/data-display/DataViews/DeleteViewDialog.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -69,4 +69,4 @@ function DeleteViewDialog({
 export {
   DeleteViewDialog
 };
-//# sourceMappingURL=chunk-VT5HQ2AD.js.map
+//# sourceMappingURL=chunk-BFMDA6UO.js.map

package/dist/{chunk-R75DZ3AK.js → chunk-BVLMKSHX.js}

@@ -3,7 +3,7 @@ import {
   StepContentComponent,
   StepIndicatorComponent,
   StepItemRow
-} from "./chunk-OATHOXIU.js";
+} from "./chunk-MC4KYGSX.js";
 
 // src/components/utility/WorkflowStep/WorkflowStepRow.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -78,4 +78,4 @@ var StepRow = ({
 export {
   StepRow
 };
-//# sourceMappingURL=chunk-R75DZ3AK.js.map
+//# sourceMappingURL=chunk-BVLMKSHX.js.map

package/dist/{chunk-PMP6WJJS.js → chunk-BWMHGENX.js}

@@ -1,5 +1,6 @@
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/Pagination/Pagination.styles.ts
@@ -7,14 +8,14 @@ import { alpha } from "@mui/material/styles/index.js";
 var ITEM_SIZE_STYLES = {
   sm: (theme) => ({
     fontSize: rem(theme, 14),
-    minWidth: 28,
-    height: 28,
+    minWidth: rem(theme, 28),
+    height: rem(theme, 28),
     padding: theme.spacing(0.25, 0.5)
   }),
   lg: (theme) => ({
     fontSize: rem(theme, 18),
-    minWidth: 44,
-    height: 44,
+    minWidth: rem(theme, 44),
+    height: rem(theme, 44),
     padding: theme.spacing(1, 1.5)
   })
 };
@@ -23,33 +24,33 @@ var ITEM_VARIANTS = {
     borderRadius: theme.spacing(1),
     "&:hover": {
       backgroundColor: alpha(theme.palette.primary.main, 0.08),
-      transform: "translateY(-1px)",
-      boxShadow: `0 2px 8px ${alpha(theme.palette.primary.main, 0.15)}`
+      transform: `translateY(${rem(theme, -1)})`,
+      boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.primary.main, 0.15)}`
     },
     "&.Mui-selected": {
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.primary.contrastText,
-      boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+      boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.primary.main, 0.3)}`,
       "&:hover": {
         backgroundColor: theme.palette.primary.dark,
-        transform: "translateY(-2px)"
+        transform: `translateY(${rem(theme, -2)})`
       }
     }
   }),
   rounded: (theme, customSize) => ({
     borderRadius: "50%",
-    minWidth: customSize === "sm" ? 28 : customSize === "lg" ? 44 : 36,
-    width: customSize === "sm" ? 28 : customSize === "lg" ? 44 : 36,
+    minWidth: rem(theme, customSize === "sm" ? 28 : customSize === "lg" ? 44 : 36),
+    width: rem(theme, customSize === "sm" ? 28 : customSize === "lg" ? 44 : 36),
     "&:hover": {
       backgroundColor: alpha(theme.palette.primary.main, 0.08),
       transform: "scale(1.1)",
-      boxShadow: `0 4px 16px ${alpha(theme.palette.primary.main, 0.2)}`
+      boxShadow: `0 ${rems(theme, 4, 16)} ${alpha(theme.palette.primary.main, 0.2)}`
     },
     "&.Mui-selected": {
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.primary.contrastText,
       transform: "scale(1.05)",
-      boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.3)}`,
+      boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(theme.palette.primary.main, 0.3)}`,
       "&:hover": {
         backgroundColor: theme.palette.primary.dark,
         transform: "scale(1.15)"
@@ -58,9 +59,9 @@ var ITEM_VARIANTS = {
   }),
   dots: (theme, customSize) => ({
     borderRadius: "50%",
-    minWidth: customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10,
-    width: customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10,
-    height: customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10,
+    minWidth: rem(theme, customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10),
+    width: rem(theme, customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10),
+    height: rem(theme, customSize === "sm" ? 8 : customSize === "lg" ? 12 : 10),
     fontSize: 0,
     backgroundColor: alpha(theme.palette.text.secondary, 0.3),
     "&:hover": {
@@ -100,9 +101,9 @@ var ITEM_VARIANTS = {
         left: "50%",
         transform: "translateX(-50%)",
         width: "60%",
-        height: 2,
+        height: rem(theme, 2),
         backgroundColor: theme.palette.primary.main,
-        borderRadius: 1
+        borderRadius: rem(theme, 1)
       }
     }
   })
@@ -138,4 +139,4 @@ var paginationStyles = ({
 export {
   paginationStyles
 };
-//# sourceMappingURL=chunk-PMP6WJJS.js.map
+//# sourceMappingURL=chunk-BWMHGENX.js.map

package/dist/chunk-BWMHGENX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Pagination/Pagination.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst ITEM_SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {\n  sm: (theme) => ({\n      fontSize: rem(theme, 14),\n      minWidth: rem(theme, 28),\n      height: rem(theme, 28),\n      padding: theme.spacing(0.25, 0.5) }),\n  lg: (theme) => ({\n      fontSize: rem(theme, 18),\n      minWidth: rem(theme, 44),\n      height: rem(theme, 44),\n      padding: theme.spacing(1, 1.5) }) };\n\n// One variant applies at a time, so a lookup replaces the mutually exclusive\n// spreads.\nconst ITEM_VARIANTS: Record<string, (theme: Theme, customSize?: string) => CSSObject> = {\n  default: (theme, _customSize) => ({\n      borderRadius: theme.spacing(1),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.08),\n        transform: `translateY(${rem(theme, -1)})`,\n        boxShadow: `0 ${rems(theme, 2, 8)} ${alpha(theme.palette.primary.main, 0.15)}` },\n      '&.Mui-selected': {\n        backgroundColor: theme.palette.primary.main,\n        color: theme.palette.primary.contrastText,\n        boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.primary.main, 0.3)}`,\n        '&:hover': {\n          backgroundColor: theme.palette.primary.dark,\n          transform: `translateY(${rem(theme, -2)})` } } }),\n  rounded: (theme, customSize) => ({\n      borderRadius: '50%',\n      minWidth: rem(theme, customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36),\n      width: rem(theme, customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.08),\n        transform: 'scale(1.1)',\n        boxShadow: `0 ${rems(theme, 4, 16)} ${alpha(theme.palette.primary.main, 0.2)}` },\n      '&.Mui-selected': {\n        backgroundColor: theme.palette.primary.main,\n        color: theme.palette.primary.contrastText,\n        transform: 'scale(1.05)',\n        boxShadow: `0 ${rems(theme, 6, 20)} ${alpha(theme.palette.primary.main, 0.3)}`,\n        '&:hover': {\n          backgroundColor: theme.palette.primary.dark,\n          transform: 'scale(1.15)' } } }),\n  dots: (theme, customSize) => ({\n      borderRadius: '50%',\n      minWidth: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),\n      width: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),\n      height: rem(theme, customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10),\n      fontSize: 0,\n      backgroundColor: alpha(theme.palette.text.secondary, 0.3),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.5),\n        transform: 'scale(1.3)' },\n      '&.Mui-selected': {\n        backgroundColor: theme.palette.primary.main,\n        transform: 'scale(1.2)',\n        '&:hover': {\n          backgroundColor: theme.palette.primary.dark,\n          transform: 'scale(1.4)' } },\n      '&.MuiPaginationItem-previousNext, &.MuiPaginationItem-firstLast': {\n        display: 'none' } }),\n  minimal: (theme, _customSize) => ({\n      borderRadius: theme.spacing(0.5),\n      backgroundColor: 'transparent',\n      color: theme.palette.text.secondary,\n      padding: theme.spacing(0.5, 1),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.04),\n        color: theme.palette.primary.main },\n      '&.Mui-selected': {\n        backgroundColor: 'transparent',\n        color: theme.palette.primary.main,\n        fontWeight: 600,\n        position: 'relative',\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          bottom: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          width: '60%',\n          height: rem(theme, 2),\n          backgroundColor: theme.palette.primary.main,\n          borderRadius: rem(theme, 1) } } }) };\n\nconst itemSizeStyles = (theme: Theme, customSize?: string): CSSObject =>\n  customSize ? (ITEM_SIZE_STYLES[customSize]?.(theme) ?? {}) : {};\n\nconst itemVariantStyles = (theme: Theme, customVariant?: string, customSize?: string): CSSObject =>\n  customVariant ? (ITEM_VARIANTS[customVariant]?.(theme, customSize) ?? {}) : {};\n\n// The pagination list's own styling, lifted out so the styled() callback is a\n// single spread.\nexport const paginationStyles = ({\n  theme,\n  customVariant,\n  customSize }: {\n  theme: Theme;\n  customVariant?: string;\n  customSize?: string;\n}): CSSObject => ({\n  '& .MuiPagination-ul': {\n    gap: customVariant === 'minimal' ? theme.spacing(0.5) : theme.spacing(1) },\n\n  '& .MuiPaginationItem-root': {\n    ...itemSizeStyles(theme, customSize),\n    ...itemVariantStyles(theme, customVariant, customSize),\n    transition: 'all 0.2s ease',\n    fontWeight: 500,\n\n\n\n\n\n    // Default variant (flat design)\n\n\n    // Rounded variant\n\n\n    // Dots variant (minimal circular dots)\n\n\n    // Minimal variant (text-only)\n\n  },\n\n  // Hide ellipsis for dots variant\n  ...(customVariant === 'dots' && {\n    '& .MuiPaginationItem-ellipsis': {\n      display: 'none' } }) });\n"],"mappings":"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","names":[]}

package/dist/{chunk-QAP3FW33.js → chunk-C66RGVAS.js}

@@ -3,10 +3,17 @@ import {
 } from "./chunk-RHIDWUK7.js";
 import {
   ScrollViewport
-} from "./chunk-T3WHW7ZC.js";
+} from "./chunk-BAZXVFLR.js";
 import {
   ScrollAreaContent
-} from "./chunk-4OEKIFBC.js";
+} from "./chunk-4VMFS3VJ.js";
+import {
+  sizeCss
+} from "./chunk-I7GSRTGQ.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/ScrollArea/ScrollArea.tsx
 import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
@@ -138,11 +145,11 @@ var ScrollToTopFab = ({
       onClick,
       sx: {
         position: "absolute",
-        bottom: 16,
-        right: 16,
+        bottom: sxRem(16),
+        right: sxRem(16),
         zIndex: 1,
         backgroundColor: glass ? alpha(theme.palette.primary.main, 0.2) : theme.palette.primary.main,
-        backdropFilter: glass ? "blur(10px)" : "none",
+        backdropFilter: glass ? `blur(${rem(theme, 10)})` : "none",
         "&:hover": {
           backgroundColor: glass ? alpha(theme.palette.primary.main, 0.3) : theme.palette.primary.dark
         }
@@ -151,16 +158,27 @@ var ScrollToTopFab = ({
     }
   ) });
 };
+function outerBoxSx(theme, size, sx) {
+  return {
+    position: "relative",
+    width: sizeCss(theme, size.width),
+    height: sizeCss(theme, size.height),
+    maxHeight: sizeCss(theme, size.maxHeight),
+    maxWidth: sizeCss(theme, size.maxWidth),
+    ...sx
+  };
+}
 var ScrollArea = (componentProps) => {
+  const theme = useTheme();
   const resolved = resolveScrollAreaProps(componentProps);
   const {
     regionLabel,
     scrollToTopLabel,
     children,
-    width,
-    height,
-    maxHeight,
-    maxWidth,
+    width: _width,
+    height: _height,
+    maxHeight: _maxHeight,
+    maxWidth: _maxWidth,
     orientation: _orientation,
     scrollbarSize: _scrollbarSize,
     autoHide,
@@ -183,21 +201,13 @@ var ScrollArea = (componentProps) => {
     sx,
     ...props
   } = resolved;
-  const {
-    scrollRef,
-    setScrollRef,
-    isScrolling,
-    showScrollToTop,
-    containerDimensions,
-    handleScroll,
-    scrollToTop
-  } = useScrollArea({ ...resolved, externalScrollRef });
+  const { scrollRef, setScrollRef, isScrolling, showScrollToTop, containerDimensions, handleScroll, scrollToTop } = useScrollArea({ ...resolved, externalScrollRef });
   const shouldShowScrollbar = alwaysShowScrollbar || !autoHide || isScrolling;
   return /* @__PURE__ */ jsxs(
     Box,
     {
       "data-testid": testId,
-      sx: { position: "relative", width, height, maxHeight, maxWidth, ...sx },
+      sx: outerBoxSx(theme, resolved, sx),
       ...props,
       children: [
         /* @__PURE__ */ jsx(
@@ -237,4 +247,4 @@ var ScrollArea = (componentProps) => {
 export {
   ScrollArea
 };
-//# sourceMappingURL=chunk-QAP3FW33.js.map
+//# sourceMappingURL=chunk-C66RGVAS.js.map

package/dist/chunk-C66RGVAS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';\nimport Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Fab from '@mui/material/Fab/index.js';\nimport Zoom from '@mui/material/Zoom/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\n\nimport type { ResolvedScrollAreaProps } from './ScrollArea.helpers';\nimport { resolveScrollAreaProps } from './ScrollArea.helpers';\nimport { sizeCss } from './ScrollArea.styles';\nimport type { ScrollAreaProps } from './ScrollArea.types';\nimport { ScrollAreaContent } from './ScrollAreaContent';\nimport { ScrollViewport } from './ScrollViewport';\n\n// Owns the scroll container ref (merging in any ref the caller passed) and\n// reports size changes through a ResizeObserver.\nconst useObservedScrollRef = ({\n  externalScrollRef,\n  onResize }: {\n  externalScrollRef?: React.Ref<HTMLDivElement>;\n  onResize?: ScrollAreaProps['onResize'];\n}) => {\n  const internalScrollRef = useRef<HTMLDivElement>(null);\n  const [containerDimensions, setContainerDimensions] = useState({ width: 0, height: 0 });\n\n  // Track container dimensions with ResizeObserver\n  useEffect(() => {\n    if (!internalScrollRef.current) return;\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (entry) {\n        const { width, height } = entry.contentRect;\n        setContainerDimensions({ width, height });\n        onResize?.({ width, height });\n      }\n    });\n\n    resizeObserver.observe(internalScrollRef.current);\n    return () => resizeObserver.disconnect();\n  }, [onResize]);\n\n  // Callback ref that updates both internal and external refs\n  const setScrollRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      // Update internal ref\n      (internalScrollRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      // Update external ref if provided\n      if (externalScrollRef) {\n        (externalScrollRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    },\n    [externalScrollRef],\n  );\n\n  // Use internal ref for accessing the element\n\n  return { scrollRef: internalScrollRef, setScrollRef, containerDimensions };\n};\n\n// Scroll position, the transient \"is scrolling\" flag that drives auto-hide, the\n// observed container size, and the scroll-to-top affordance.\n// The scrollbar shows while scrolling and hides once movement stops.\nconst useAutoHide = ({\n  autoHide,\n  alwaysShowScrollbar,\n  autoHideDelay }: {\n  autoHide: boolean;\n  alwaysShowScrollbar: boolean;\n  autoHideDelay: number;\n}) => {\n  const [isScrolling, setIsScrolling] = useState(false);\n  const timeoutRef = useRef<number | undefined>(undefined);\n\n  const noteScroll = useCallback(() => {\n    if (!autoHide || alwaysShowScrollbar) return;\n\n    setIsScrolling(true);\n    window.clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(() => setIsScrolling(false), autoHideDelay);\n  }, [autoHide, alwaysShowScrollbar, autoHideDelay]);\n\n  useEffect(() => () => window.clearTimeout(timeoutRef.current), []);\n\n  return { isScrolling, noteScroll };\n};\n\nconst useScrollArea = (\n  props: ResolvedScrollAreaProps & { externalScrollRef?: React.Ref<HTMLDivElement> },\n) => {\n  const {\n    disabled,\n    onScroll,\n    onResize,\n    externalScrollRef,\n    autoHide,\n    autoHideDelay,\n    alwaysShowScrollbar,\n    scrollToTopButton,\n    scrollToTopThreshold,\n    smoothScroll } = props;\n\n  const { scrollRef, setScrollRef, containerDimensions } = useObservedScrollRef({\n    externalScrollRef,\n    onResize });\n  const [showScrollToTop, setShowScrollToTop] = useState(false);\n  const { isScrolling, noteScroll } = useAutoHide({\n    autoHide,\n    alwaysShowScrollbar,\n    autoHideDelay });\n\n  const handleScroll = useCallback(\n    (event: React.UIEvent<HTMLDivElement>) => {\n      if (disabled) return;\n\n      noteScroll();\n\n      if (scrollToTopButton && scrollRef.current) {\n        setShowScrollToTop(scrollRef.current.scrollTop > scrollToTopThreshold);\n      }\n\n      onScroll?.(event);\n    },\n    [disabled, noteScroll, scrollToTopButton, scrollToTopThreshold, onScroll, scrollRef],\n  );\n\n  const scrollToTop = useCallback(() => {\n    scrollRef.current?.scrollTo({ top: 0, behavior: smoothScroll ? 'smooth' : 'auto' });\n  }, [smoothScroll, scrollRef]);\n\n  return {\n    scrollRef,\n    setScrollRef,\n    isScrolling,\n    showScrollToTop,\n    containerDimensions,\n    handleScroll,\n    scrollToTop };\n};\n\nconst LoadingOverlay: FC = () => (\n  <Box\n    sx={{\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n      zIndex: 10 }}\n  >\n    <CircularProgress />\n  </Box>\n);\n\n// The label is guarded at the call site rather than defaulted: the props union\n// already makes it required alongside `scrollToTopButton`, and a fab with an\n// empty accessible name is the exact failure this port exists to remove.\nconst ScrollToTopFab: FC<{\n  visible: boolean;\n  glass: boolean;\n  scrollToTopLabel: string;\n  onClick: () => void;\n}> = ({\n  visible,\n  glass,\n  scrollToTopLabel,\n  onClick }) => {\n  const theme = useTheme();\n\n  return (\n    <Zoom in={visible}>\n      <Fab\n        size=\"small\"\n        aria-label={scrollToTopLabel}\n        onClick={onClick}\n        sx={{\n          position: 'absolute',\n          bottom: sxRem(16),\n          right: sxRem(16),\n          zIndex: 1,\n          backgroundColor: glass\n            ? alpha(theme.palette.primary.main, 0.2)\n            : theme.palette.primary.main,\n          backdropFilter: glass ? `blur(${rem(theme, 10)})` : 'none',\n          '&:hover': {\n            backgroundColor: glass\n              ? alpha(theme.palette.primary.main, 0.3)\n              : theme.palette.primary.dark } }}\n      >\n        <KeyboardArrowUp />\n      </Fab>\n    </Zoom>\n  );\n};\n\n/** The outer box: its size props through the type scale, then the caller's `sx`. */\nfunction outerBoxSx(\n  theme: Theme,\n  size: Pick<ScrollAreaProps, 'width' | 'height' | 'maxHeight' | 'maxWidth'>,\n  sx: ScrollAreaProps['sx'],\n): SxProps<Theme> {\n  return {\n    position: 'relative',\n    width: sizeCss(theme, size.width),\n    height: sizeCss(theme, size.height),\n    maxHeight: sizeCss(theme, size.maxHeight),\n    maxWidth: sizeCss(theme, size.maxWidth),\n    ...sx,\n  } as SxProps<Theme>;\n}\n\nexport const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {\n  const theme = useTheme();\n  const resolved = resolveScrollAreaProps(componentProps);\n  const {\n    regionLabel,\n    scrollToTopLabel,\n    children,\n    width: _width,\n    height: _height,\n    maxHeight: _maxHeight,\n    maxWidth: _maxWidth,\n    orientation: _orientation,\n    scrollbarSize: _scrollbarSize,\n    autoHide,\n    autoHideDelay: _autoHideDelay,\n    smoothScroll: _smoothScroll,\n    variant,\n    onScroll: _onScroll,\n    scrollToTopButton,\n    scrollToTopThreshold: _scrollToTopThreshold,\n    scrollbarColor: _scrollbarColor,\n    scrollbarTrackColor: _scrollbarTrackColor,\n    contentPadding: _contentPadding,\n    alwaysShowScrollbar,\n    disabled,\n    loading,\n    emptyContent,\n    testId,\n    scrollRef: externalScrollRef,\n    onResize: _onResize,\n    sx,\n    ...props\n  } = resolved;\n\n  const { scrollRef, setScrollRef, isScrolling, showScrollToTop, containerDimensions, handleScroll, scrollToTop } =\n    useScrollArea({ ...resolved, externalScrollRef });\n\n  // Auto-hide keeps the scrollbar out of the way until the user is scrolling.\n  const shouldShowScrollbar = alwaysShowScrollbar || !autoHide || isScrolling;\n\n  return (\n    <Box\n      data-testid={testId}\n      sx={outerBoxSx(theme, resolved, sx)}\n      {...props}\n    >\n      <ScrollViewport\n        {...resolved}\n        regionLabel={regionLabel}\n        shouldShowScrollbar={shouldShowScrollbar}\n        setScrollRef={setScrollRef}\n        onScroll={handleScroll}\n      >\n        <ScrollAreaContent\n          emptyContent={emptyContent}\n          scrollRef={scrollRef}\n          containerWidth={containerDimensions.width}\n        >\n          {children}\n        </ScrollAreaContent>\n      </ScrollViewport>\n\n      {loading && <LoadingOverlay />}\n\n      {scrollToTopButton && scrollToTopLabel && !disabled && !loading && (\n        <ScrollToTopFab\n          scrollToTopLabel={scrollToTopLabel}\n          visible={showScrollToTop}\n          glass={variant === 'glass'}\n          onClick={scrollToTop}\n        />\n      )}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}