@12-apps/ui 6.35.0 → 6.36.0

package/dist/chunk-WRCLYSTX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapSearchBar.tsx"],"sourcesContent":["import SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { fieldControlStyles } from '../../../tokens/field-height';\nimport { rem } from '../../../tokens/relative';\n\n// Kept module-local: styled() components cannot be exported across a module\n// boundary here without tripping TS2742.\nconst SearchBar = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  left: '50%',\n  transform: 'translateX(-50%)',\n  zIndex: 2,\n  width: '90%',\n  maxWidth: rem(theme, 400),\n}));\n\nconst SearchField = styled(TextField)(({ theme }) => ({\n  ...fieldControlStyles(theme),\n  '& .MuiOutlinedInput-root': {\n    background: alpha(theme.palette.background.paper, 0.95),\n    backdropFilter: `blur(${rem(theme, 10)})`,\n    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n    borderRadius: fieldRadius(theme),\n    '& fieldset': {\n      borderColor: alpha(theme.palette.divider, 0.2),\n    },\n  },\n}));\n\nexport interface MapSearchBarProps {\n  /** The field's accessible name — it renders no visible label. REQUIRED. */\n  label: string;\n  value: string;\n  placeholder: string;\n  isSearching: boolean;\n  onChange: (value: string) => void;\n  onSubmit: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\nexport const MapSearchBar: FC<MapSearchBarProps> = ({\n  label,\n  value,\n  placeholder,\n  isSearching,\n  onChange,\n  onSubmit,\n}) => (\n  <SearchBar>\n    <SearchField\n      fullWidth\n      size=\"small\"\n      placeholder={placeholder}\n      value={value}\n      onChange={(event) => onChange(event.target.value)}\n      onKeyPress={onSubmit}\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon fontSize=\"small\" sx={{ opacity: isSearching ? 0.5 : 1 }} />\n          </InputAdornment>\n        ),\n      }}\n      disabled={isSearching}\n      aria-label={label}\n    />\n  </SearchBar>\n);\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,OAAO,SAAS;AAChB,OAAO,oBAAoB;AAC3B,OAAO,eAAe;AACtB,SAAS,OAAO,cAAc;AA8DlB;AApDZ,IAAM,YAAY,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC5C,UAAU;AAAA,EACV,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,MAAM;AAAA,EACN,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU,IAAI,OAAO,GAAG;AAC1B,EAAE;AAEF,IAAM,cAAc,OAAO,SAAS,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACpD,GAAG,mBAAmB,KAAK;AAAA,EAC3B,4BAA4B;AAAA,IAC1B,YAAY,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,IACtD,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IACtC,sBAAsB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,IAC5C,cAAc,YAAY,KAAK;AAAA,IAC/B,cAAc;AAAA,MACZ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG;AAAA,IAC/C;AAAA,EACF;AACF,EAAE;AAYK,IAAM,eAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC,aACC;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT,MAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,IAChD,YAAY;AAAA,IACZ,YAAY;AAAA,MACV,gBACE,oBAAC,kBAAe,UAAS,SACvB,8BAAC,cAAW,UAAS,SAAQ,IAAI,EAAE,SAAS,cAAc,MAAM,EAAE,GAAG,GACvE;AAAA,IAEJ;AAAA,IACA,UAAU;AAAA,IACV,cAAY;AAAA;AACd,GACF;","names":[]}

package/dist/{chunk-X4PS3E3V.js → chunk-X6AIKCAV.js}

@@ -2,6 +2,9 @@ import {
   neutralTones,
   uiInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/MapPreview/mapSurface.ts
 import { alpha } from "@mui/material/styles/index.js";
@@ -27,14 +30,14 @@ var tileBackground = (mapType, theme) => {
   const tones = neutralTones(theme);
   return toneGradient(tones.surface, tones.faint, 0.5);
 };
-var BOUNCE_KEYFRAMES = {
+var bounceKeyframes = (theme) => ({
   "0%, 100%": { transform: "translateY(0)" },
-  "50%": { transform: "translateY(-10px)" }
-};
+  "50%": { transform: `translateY(${rem(theme, -10)})` }
+});
 
 export {
   surfaceBackground,
   tileBackground,
-  BOUNCE_KEYFRAMES
+  bounceKeyframes
 };
-//# sourceMappingURL=chunk-X4PS3E3V.js.map
+//# sourceMappingURL=chunk-X6AIKCAV.js.map

package/dist/chunk-X6AIKCAV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/mapSurface.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\n\nimport type { MapType } from './MapPreview.types';\nimport { neutralTones, uiInk } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst toneGradient = (from: string, to: string, opacity = 1): string =>\n  `linear-gradient(135deg, ${alpha(from, opacity)} 0%, ${alpha(to, opacity)} 100%)`;\n\n// The backdrop behind the tiles: dark for satellite, green for terrain, and\n// grey for road maps, following the theme's own light/dark choice.\nexport const surfaceBackground = (mapType: MapType, theme: Theme): string => {\n  const tones = neutralTones(theme);\n  if (mapType === 'satellite') return toneGradient(tones.inverseSurface, tones.raised);\n  if (mapType === 'terrain') {\n    const ground = uiInk(theme).mapSurface;\n    return `linear-gradient(135deg, ${alpha(ground.terrainFrom, 0.2)} 0%, ${alpha(ground.terrainTo, 0.3)} 100%)`;\n  }\n  if (theme.palette.mode === 'dark') return toneGradient(tones.inverseSurface, tones.raised);\n  return toneGradient(tones.surface, tones.faint);\n};\n\nexport const tileBackground = (mapType: MapType, theme: Theme): string => {\n  const ground = uiInk(theme).mapSurface;\n  if (mapType === 'satellite') {\n    return `linear-gradient(135deg, ${alpha(ground.satelliteTileFrom, 0.9)} 0%, ${alpha(ground.satelliteTileTo, 0.9)} 100%)`;\n  }\n  if (mapType === 'terrain') {\n    return `linear-gradient(135deg, ${alpha(ground.terrainTileFrom, 0.1)} 0%, ${alpha(ground.terrainTileTo, 0.1)} 100%)`;\n  }\n  const tones = neutralTones(theme);\n  return toneGradient(tones.surface, tones.faint, 0.5);\n};\n\nexport const bounceKeyframes = (theme: Theme) =>\n  ({\n    '0%, 100%': { transform: 'translateY(0)' },\n    '50%': { transform: `translateY(${rem(theme, -10)})` },\n  }) as const;\n"],"mappings":";;;;;;;;;AACA,SAAS,aAAa;AAMtB,IAAM,eAAe,CAAC,MAAc,IAAY,UAAU,MACxD,2BAA2B,MAAM,MAAM,OAAO,CAAC,QAAQ,MAAM,IAAI,OAAO,CAAC;AAIpE,IAAM,oBAAoB,CAAC,SAAkB,UAAyB;AAC3E,QAAM,QAAQ,aAAa,KAAK;AAChC,MAAI,YAAY,YAAa,QAAO,aAAa,MAAM,gBAAgB,MAAM,MAAM;AACnF,MAAI,YAAY,WAAW;AACzB,UAAM,SAAS,MAAM,KAAK,EAAE;AAC5B,WAAO,2BAA2B,MAAM,OAAO,aAAa,GAAG,CAAC,QAAQ,MAAM,OAAO,WAAW,GAAG,CAAC;AAAA,EACtG;AACA,MAAI,MAAM,QAAQ,SAAS,OAAQ,QAAO,aAAa,MAAM,gBAAgB,MAAM,MAAM;AACzF,SAAO,aAAa,MAAM,SAAS,MAAM,KAAK;AAChD;AAEO,IAAM,iBAAiB,CAAC,SAAkB,UAAyB;AACxE,QAAM,SAAS,MAAM,KAAK,EAAE;AAC5B,MAAI,YAAY,aAAa;AAC3B,WAAO,2BAA2B,MAAM,OAAO,mBAAmB,GAAG,CAAC,QAAQ,MAAM,OAAO,iBAAiB,GAAG,CAAC;AAAA,EAClH;AACA,MAAI,YAAY,WAAW;AACzB,WAAO,2BAA2B,MAAM,OAAO,iBAAiB,GAAG,CAAC,QAAQ,MAAM,OAAO,eAAe,GAAG,CAAC;AAAA,EAC9G;AACA,QAAM,QAAQ,aAAa,KAAK;AAChC,SAAO,aAAa,MAAM,SAAS,MAAM,OAAO,GAAG;AACrD;AAEO,IAAM,kBAAkB,CAAC,WAC7B;AAAA,EACC,YAAY,EAAE,WAAW,gBAAgB;AAAA,EACzC,OAAO,EAAE,WAAW,cAAc,IAAI,OAAO,GAAG,CAAC,IAAI;AACvD;","names":[]}

package/dist/{chunk-KTYZRAB7.js → chunk-XJPJ6ESI.js}

@@ -1,20 +1,23 @@
 import {
   MapLayers
-} from "./chunk-A2DYU5WN.js";
+} from "./chunk-VIUDWOV6.js";
 import {
   glassStyles,
   resolveMapPreviewProps
-} from "./chunk-ACZH2NUW.js";
+} from "./chunk-4NQXHPQR.js";
 import {
   MapCoordinates,
   MapMarkers
-} from "./chunk-24NXQG5F.js";
+} from "./chunk-ODFJTEIL.js";
 import {
   useMapPreview
 } from "./chunk-PQECNGDE.js";
 import {
   StaticMapView
-} from "./chunk-GUVBR62X.js";
+} from "./chunk-DCJSHYE5.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/MapPreview/MapPreview.tsx
 import Box from "@mui/material/Box/index.js";
@@ -42,7 +45,7 @@ var MapPreview = (componentProps) => {
   const props = resolveMapPreviewProps(componentProps);
   const theme = useTheme();
   const { containerRef, view, controls, pointer, search, handleMapClick } = useMapPreview(props);
-  const height = controls.isFullscreen ? "100vh" : props.height;
+  const height = controls.isFullscreen ? "100vh" : props.height ?? rem(theme, 400);
   const grabbing = pointer.isDragging || pointer.isPanning;
   return /* @__PURE__ */ jsx(
     MapContainer,
@@ -105,4 +108,4 @@ export {
   MapPreview,
   MapPreview_default
 };
-//# sourceMappingURL=chunk-KTYZRAB7.js.map
+//# sourceMappingURL=chunk-XJPJ6ESI.js.map

package/dist/chunk-XJPJ6ESI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapPreview.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { glassStyles, resolveMapPreviewProps } from './MapPreview.helpers';\nimport type { MapPreviewProps } from './MapPreview.types';\nimport { MapLayers } from './MapLayers';\nimport { MapCoordinates, MapMarkers } from './MapMarkers';\nimport { StaticMapView } from './StaticMapView';\nimport { useMapPreview } from './useMapPreview';\nimport { rem } from '../../../tokens/relative';\n\n// Kept module-local: styled() components cannot be exported across a module\n// boundary here without tripping TS2742.\nconst MapContainer = styled(Paper)(({ theme }) => ({\n  position: 'relative',\n  width: '100%',\n  borderRadius: theme.shape.borderRadius * 2,\n  overflow: 'hidden',\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n}));\n\nconst MapWrapper = styled(Box)<{ height: string }>(({ height }) => ({\n  width: '100%',\n  height,\n  position: 'relative',\n}));\n\nconst cursorFor = (grabbing: boolean, interactive: boolean): string => {\n  if (grabbing) return 'grabbing';\n  return interactive ? 'grab' : 'default';\n};\n\nexport const MapPreview: FC<MapPreviewProps> = (componentProps) => {\n  const props = resolveMapPreviewProps(componentProps);\n  const theme = useTheme();\n  const { containerRef, view, controls, pointer, search, handleMapClick } = useMapPreview(props);\n\n  // The map's own default height is 400 design px, through the theme's type scale.\n  const height = controls.isFullscreen ? '100vh' : (props.height ?? rem(theme, 400));\n  const grabbing = pointer.isDragging || pointer.isPanning;\n\n  return (\n    <MapContainer\n      ref={containerRef}\n      elevation={props.variant === 'glass' ? 0 : 2}\n      data-testid=\"map-preview-container\"\n      role=\"img\"\n      aria-label={`Map preview centered at ${view.markerPosition.lat.toFixed(4)}, ${view.markerPosition.lng.toFixed(4)} with zoom level ${view.zoom}`}\n      tabIndex={0}\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      sx={glassStyles(props.variant, theme)}\n    >\n      <MapWrapper\n        height={height}\n        onClick={handleMapClick}\n        onMouseDown={pointer.handleMouseDown}\n        onMouseMove={pointer.handleMouseMove}\n        onMouseUp={pointer.handleMouseUp}\n        onMouseLeave={pointer.handleMouseUp}\n        style={{\n          cursor: cursorFor(grabbing, props.interactive),\n          transition: props.animated ? 'all 0.3s ease' : 'none',\n        }}\n      >\n        <StaticMapView\n          height={height}\n          zoom={view.zoom}\n          mapType={view.mapType}\n          // The built-in centre marker steps aside for an explicit marker list.\n          marker={props.marker && props.markers.length === 0}\n          markerPosition={view.markerPosition}\n          panOffset={view.panOffset}\n        />\n\n        <MapMarkers markers={props.markers} centre={view.markerPosition} animated={props.animated} />\n\n        <MapLayers\n          settings={props}\n          zoom={view.zoom}\n          mapType={view.mapType}\n          search={search}\n          controls={controls}\n        />\n\n        <MapCoordinates position={view.markerPosition} zoom={view.zoom} />\n      </MapWrapper>\n    </MapContainer>\n  );\n};\n\nexport default MapPreview;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,SAAS,OAAO,QAAQ,gBAAgB;AAuDlC,SAYE,KAZF;AAzCN,IAAM,eAAe,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACjD,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc,MAAM,MAAM,eAAe;AAAA,EACzC,UAAU;AAAA,EACV,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC;AAAA,EACnI,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AACzD,EAAE;AAEF,IAAM,aAAa,OAAO,GAAG,EAAsB,CAAC,EAAE,OAAO,OAAO;AAAA,EAClE,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AACZ,EAAE;AAEF,IAAM,YAAY,CAAC,UAAmB,gBAAiC;AACrE,MAAI,SAAU,QAAO;AACrB,SAAO,cAAc,SAAS;AAChC;AAEO,IAAM,aAAkC,CAAC,mBAAmB;AACjE,QAAM,QAAQ,uBAAuB,cAAc;AACnD,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,cAAc,MAAM,UAAU,SAAS,QAAQ,eAAe,IAAI,cAAc,KAAK;AAG7F,QAAM,SAAS,SAAS,eAAe,UAAW,MAAM,UAAU,IAAI,OAAO,GAAG;AAChF,QAAM,WAAW,QAAQ,cAAc,QAAQ;AAE/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,MAAM,YAAY,UAAU,IAAI;AAAA,MAC3C,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cAAY,2BAA2B,KAAK,eAAe,IAAI,QAAQ,CAAC,CAAC,KAAK,KAAK,eAAe,IAAI,QAAQ,CAAC,CAAC,oBAAoB,KAAK,IAAI;AAAA,MAC7I,UAAU;AAAA,MACV,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,IAAI,YAAY,MAAM,SAAS,KAAK;AAAA,MAEpC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS;AAAA,UACT,aAAa,QAAQ;AAAA,UACrB,aAAa,QAAQ;AAAA,UACrB,WAAW,QAAQ;AAAA,UACnB,cAAc,QAAQ;AAAA,UACtB,OAAO;AAAA,YACL,QAAQ,UAAU,UAAU,MAAM,WAAW;AAAA,YAC7C,YAAY,MAAM,WAAW,kBAAkB;AAAA,UACjD;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,MAAM,KAAK;AAAA,gBACX,SAAS,KAAK;AAAA,gBAEd,QAAQ,MAAM,UAAU,MAAM,QAAQ,WAAW;AAAA,gBACjD,gBAAgB,KAAK;AAAA,gBACrB,WAAW,KAAK;AAAA;AAAA,YAClB;AAAA,YAEA,oBAAC,cAAW,SAAS,MAAM,SAAS,QAAQ,KAAK,gBAAgB,UAAU,MAAM,UAAU;AAAA,YAE3F;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACV,MAAM,KAAK;AAAA,gBACX,SAAS,KAAK;AAAA,gBACd;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,YAEA,oBAAC,kBAAe,UAAU,KAAK,gBAAgB,MAAM,KAAK,MAAM;AAAA;AAAA;AAAA,MAClE;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/{chunk-GVLMG5WQ.js → chunk-XZW2U6KR.js}

@@ -11,23 +11,23 @@ import {
 
 // src/components/data-display/Banner/Banner.styles.ts
 import { alpha, keyframes } from "@mui/material/styles/index.js";
-var fadeInSlide = keyframes`
+var fadeInSlide = (theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(${rem(theme, -10)});
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 `;
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 0.7;
   }
   70% {
-    box-shadow: 0 0 0 8px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 8)} currentColor;
     opacity: 0;
   }
   100% {
@@ -57,10 +57,10 @@ var bannerPartStyles = (theme, colorPalette) => ({
     "&::before": {
       content: '""',
       position: "absolute",
-      inset: -4,
+      inset: rem(theme, -4),
       borderRadius: "50%",
       background: alpha(colorPalette.main, 0.1),
-      animation: `${pulseAnimation} 3s infinite`
+      animation: `${pulseAnimation(theme)} 3s infinite`
     }
   },
   // Content area
@@ -111,8 +111,8 @@ var bannerPartStyles = (theme, colorPalette) => ({
     },
     "&:focus-visible": {
       opacity: 1,
-      outline: `2px solid ${colorPalette.main}`,
-      outlineOffset: "2px"
+      outline: `${rem(theme, 2)} solid ${colorPalette.main}`,
+      outlineOffset: rem(theme, 2)
     }
   }
 });
@@ -140,4 +140,4 @@ export {
   bannerPointerStates,
   BANNER_TINT_S
 };
-//# sourceMappingURL=chunk-GVLMG5WQ.js.map
+//# sourceMappingURL=chunk-XZW2U6KR.js.map

package/dist/chunk-XZW2U6KR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Banner/Banner.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';\n\nimport type { BannerVariant } from './Banner.types';\nimport { ACTIVE, HOVER } from '../Alert/Alert.metrics';\nimport { modeInk } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\n// Animations\nexport const fadeInSlide = (theme: Theme) => keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(${rem(theme, -10)});\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0.7;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 8)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nexport const getVariantColor = (theme: Theme, variant: BannerVariant) => {\n  const colorMap = {\n    info: theme.palette.info,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    critical: theme.palette.error,\n  };\n  return colorMap[variant];\n};\n\nexport const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSObject => ({\n  // Icon container\n  '.banner-icon': {\n    flexShrink: 0,\n    marginTop: theme.spacing(0.25),\n    color: colorPalette.main,\n    fontSize: rem(theme, 20),\n    display: 'flex',\n    alignItems: 'center',\n    position: 'relative',\n\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      inset: rem(theme, -4),\n      borderRadius: '50%',\n      background: alpha(colorPalette.main, 0.1),\n      animation: `${pulseAnimation(theme)} 3s infinite`,\n    },\n  },\n\n  // Content area\n  '.banner-content': {\n    flex: 1,\n    minWidth: 0, // Prevents flex item overflow\n  },\n\n  // Title styles\n  '.banner-title': {\n    fontWeight: 600,\n    fontSize: rem(theme, 16),\n    lineHeight: 1.4,\n    marginBottom: theme.spacing(0.5),\n    color: colorPalette.dark || colorPalette.main,\n  },\n\n  // Description styles  \n  '.banner-description': {\n    fontSize: rem(theme, 14),\n    lineHeight: 1.5,\n    opacity: 0.9,\n    color: 'inherit',\n  },\n\n  // Actions area\n  '.banner-actions': {\n    display: 'flex',\n    flexShrink: 0,\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    marginTop: theme.spacing(1),\n\n    [theme.breakpoints.up('sm')]: {\n      marginTop: 0,\n      marginLeft: theme.spacing(2),\n    },\n  },\n\n  // Dismiss button\n  '.banner-dismiss': {\n    color: 'inherit',\n    opacity: 0.7,\n    marginLeft: theme.spacing(1),\n    flexShrink: 0,\n\n    // Opacity and a wash only: the dismiss used to spin 90deg, which drew the\n    // eye to the way out rather than to the message. Same fix as `Alert`'s\n    // close button, which is the sibling surface (FUT-1458).\n    '&:hover': {\n      opacity: 1,\n      backgroundColor: alpha(colorPalette.main, 0.1),\n    },\n\n    '&:focus-visible': {\n      opacity: 1,\n      outline: `${rem(theme, 2)} solid ${colorPalette.main}`,\n      outlineOffset: rem(theme, 2),\n    },\n  },\n});\n\n/**\n * The pointer states, from `Alert`'s own table.\n *\n * Banner had NO hover at all — measured ΔE76 0.00 on every variant in both\n * modes — so moving between the two surfaces gave feedback on one and silence\n * on the other. They are the same kind of thing and now answer a pointer the\n * same way.\n *\n * Neither block may declare `transition`: `:active` under a mouse always\n * implies `:hover`, so a shorthand here would outrank the root's and reset the\n * opacity fade the press is built on.\n */\n/** The same flat inset tint `Alert` paints; see `ACTIVE` for why it is a layer. */\nconst tint = (theme: Theme, a: number): string =>\n  `inset 0 0 0 100vmax ${alpha(modeInk(theme), a)}`;\n\nexport const bannerPointerStates = (theme: Theme): CSSObject => ({\n  '&:hover': {\n    boxShadow: tint(theme, HOVER.tintAlpha),\n  },\n\n  // The `:not(:has(…))` names CONTROLS, not any descendant: `:active` matches\n  // an ancestor of whatever is pressed, so without it pressing the dismiss or\n  // an action dimmed the message that owns it. Excluding `:has(:active)`\n  // wholesale does not work — pressing the TEXT makes that text `:active` too,\n  // so the guard matched on every press and the state never fired.\n  '&:active:not(:has(button:active, a:active, [role=\"button\"]:active))': {\n    boxShadow: tint(theme, ACTIVE.tintAlpha),\n    transition: 'none',\n  },\n});\n\n/** The seconds the tint takes easing back, shared with `Alert`. */\nexport const BANNER_TINT_S = ACTIVE.ms / 1000;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,OAAO,iBAAiB;AAS1B,IAAM,cAAc,CAAC,UAAiB;AAAA;AAAA;AAAA,4BAGjB,IAAI,OAAO,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3C,IAAM,iBAAiB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMjB,IAAI,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9B,IAAM,kBAAkB,CAAC,OAAc,YAA2B;AACvE,QAAM,WAAW;AAAA,IACf,MAAM,MAAM,QAAQ;AAAA,IACpB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,UAAU,MAAM,QAAQ;AAAA,EAC1B;AACA,SAAO,SAAS,OAAO;AACzB;AAEO,IAAM,mBAAmB,CAAC,OAAc,kBAA2C;AAAA;AAAA,EAExF,gBAAgB;AAAA,IACd,YAAY;AAAA,IACZ,WAAW,MAAM,QAAQ,IAAI;AAAA,IAC7B,OAAO,aAAa;AAAA,IACpB,UAAU,IAAI,OAAO,EAAE;AAAA,IACvB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,aAAa;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO,IAAI,OAAO,EAAE;AAAA,MACpB,cAAc;AAAA,MACd,YAAY,MAAM,aAAa,MAAM,GAAG;AAAA,MACxC,WAAW,GAAG,eAAe,KAAK,CAAC;AAAA,IACrC;AAAA,EACF;AAAA;AAAA,EAGA,mBAAmB;AAAA,IACjB,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EACZ;AAAA;AAAA,EAGA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU,IAAI,OAAO,EAAE;AAAA,IACvB,YAAY;AAAA,IACZ,cAAc,MAAM,QAAQ,GAAG;AAAA,IAC/B,OAAO,aAAa,QAAQ,aAAa;AAAA,EAC3C;AAAA;AAAA,EAGA,uBAAuB;AAAA,IACrB,UAAU,IAAI,OAAO,EAAE;AAAA,IACvB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA;AAAA,EAGA,mBAAmB;AAAA,IACjB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,QAAQ,CAAC;AAAA,IACpB,YAAY;AAAA,IACZ,WAAW,MAAM,QAAQ,CAAC;AAAA,IAE1B,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,MAC5B,WAAW;AAAA,MACX,YAAY,MAAM,QAAQ,CAAC;AAAA,IAC7B;AAAA,EACF;AAAA;AAAA,EAGA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY,MAAM,QAAQ,CAAC;AAAA,IAC3B,YAAY;AAAA;AAAA;AAAA;AAAA,IAKZ,WAAW;AAAA,MACT,SAAS;AAAA,MACT,iBAAiB,MAAM,aAAa,MAAM,GAAG;AAAA,IAC/C;AAAA,IAEA,mBAAmB;AAAA,MACjB,SAAS;AAAA,MACT,SAAS,GAAG,IAAI,OAAO,CAAC,CAAC,UAAU,aAAa,IAAI;AAAA,MACpD,eAAe,IAAI,OAAO,CAAC;AAAA,IAC7B;AAAA,EACF;AACF;AAeA,IAAM,OAAO,CAAC,OAAc,MAC1B,uBAAuB,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAE1C,IAAM,sBAAsB,CAAC,WAA6B;AAAA,EAC/D,WAAW;AAAA,IACT,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,uEAAuE;AAAA,IACrE,WAAW,KAAK,OAAO,OAAO,SAAS;AAAA,IACvC,YAAY;AAAA,EACd;AACF;AAGO,IAAM,gBAAgB,OAAO,KAAK;","names":[]}

package/dist/{chunk-LI6OLYUB.js → chunk-YBTC4XNO.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   createConfirmButton
-} from "./chunk-UCA47HM7.js";
+} from "./chunk-KCAW6HRO.js";
 import {
   Dialog,
   DialogContent
@@ -128,4 +128,4 @@ function ManageViewsDialog({
 export {
   ManageViewsDialog
 };
-//# sourceMappingURL=chunk-LI6OLYUB.js.map
+//# sourceMappingURL=chunk-YBTC4XNO.js.map

package/dist/chunk-YLGY3D52.js

@@ -0,0 +1,62 @@
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-glyphs.tsx
+import { jsx } from "react/jsx-runtime";
+var FRAME = { width: sxRem(32), height: sxRem(24), display: "flex" };
+function barColor(active) {
+  return active ? "primary.main" : "action.disabled";
+}
+function RowsGlyph({ gap, active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, flexDirection: "column", justifyContent: "center", gap }, children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(default2, { sx: { height: sxRem(2), width: "100%", borderRadius: 1, bgcolor: barColor(active) } }, index)) });
+}
+function TableGlyph({ active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: sxRem(2) }, children: Array.from({ length: 9 }).map((_, index) => /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: { borderRadius: 0.5, bgcolor: barColor(active), opacity: index < 3 ? 1 : 0.55 }
+    },
+    index
+  )) });
+}
+function ListGlyph({ active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, flexDirection: "column", justifyContent: "center", gap: sxRem(4) }, children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        height: sxRem(5),
+        width: "100%",
+        borderRadius: 0.5,
+        bgcolor: barColor(active),
+        opacity: 0.7,
+        display: "flex",
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ jsx(default2, { sx: { ml: sxRem(2), height: sxRem(3), width: sxRem(3), borderRadius: "50%", bgcolor: "background.paper" } })
+    },
+    index
+  )) });
+}
+function GridGlyph({ n = 3, active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, display: "grid", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: sxRem(2) }, children: Array.from({ length: n * 2 }).map((_, index) => /* @__PURE__ */ jsx(default2, { sx: { borderRadius: 0.5, bgcolor: barColor(active) } }, index)) });
+}
+function ColumnsGlyph({ n, active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, gap: sxRem(2) }, children: Array.from({ length: n }).map((_, column) => /* @__PURE__ */ jsx(default2, { sx: { flex: 1, borderRadius: 0.5, bgcolor: barColor(active) } }, column)) });
+}
+function BoardGlyph({ active }) {
+  return /* @__PURE__ */ jsx(default2, { sx: { ...FRAME, gap: sxRem(2) }, children: [3, 2, 1].map((count, column) => /* @__PURE__ */ jsx(default2, { sx: { flex: 1, display: "flex", flexDirection: "column", gap: sxRem(2) }, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(default2, { sx: { height: sxRem(5), borderRadius: 0.5, bgcolor: barColor(active) } }, index)) }, column)) });
+}
+
+export {
+  RowsGlyph,
+  TableGlyph,
+  ListGlyph,
+  GridGlyph,
+  ColumnsGlyph,
+  BoardGlyph
+};
+//# sourceMappingURL=chunk-YLGY3D52.js.map

package/dist/chunk-YLGY3D52.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-glyphs.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Theme } from \"@mui/material/styles/index.js\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/**\n * Miniature previews of what a layout or a density setting DOES.\n *\n * \"Baixa / Média / Alta\" tells an operator nothing until they try it, and\n * \"Grade\" vs \"Lista\" is only obvious to whoever named them. A glyph that draws\n * three tight rows, or three loose ones, or a grid of blocks, answers the\n * question before the click — so the picker is read once instead of cycled\n * through.\n *\n * Deliberately CSS boxes rather than icons: the point is to show spacing and\n * proportion, which is exactly what an icon font flattens away.\n */\n\n/** The glyph's own footprint, so every tile in a picker lines up. */\nconst FRAME = { width: sxRem(32), height: sxRem(24), display: \"flex\" } as const;\n\n/** Active tiles use the accent; the rest stay muted so the choice reads at a glance. */\nfunction barColor(active: boolean): string {\n  return active ? \"primary.main\" : \"action.disabled\";\n}\n\n/** Three rows at a given gap (through the type scale) — the density preview for the table and list. */\nexport function RowsGlyph({ gap, active }: { gap: (theme: Theme) => string; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, flexDirection: \"column\", justifyContent: \"center\", gap }}>\n      {[0, 1, 2].map((index) => (\n        <Box key={index} sx={{ height: sxRem(2), width: \"100%\", borderRadius: 1, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/** A dense block grid — the table layout. */\nexport function TableGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: sxRem(2) }}>\n      {Array.from({ length: 9 }).map((_, index) => (\n        <Box\n          key={index}\n          sx={{ borderRadius: 0.5, bgcolor: barColor(active), opacity: index < 3 ? 1 : 0.55 }}\n        />\n      ))}\n    </Box>\n  );\n}\n\n/** Full-width rows each carrying a leading mark — the list layout. */\nexport function ListGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, flexDirection: \"column\", justifyContent: \"center\", gap: sxRem(4) }}>\n      {[0, 1, 2].map((index) => (\n        <Box\n          key={index}\n          sx={{\n            height: sxRem(5),\n            width: \"100%\",\n            borderRadius: 0.5,\n            bgcolor: barColor(active),\n            opacity: 0.7,\n            display: \"flex\",\n            alignItems: \"center\",\n          }}\n        >\n          <Box sx={{ ml: sxRem(2), height: sxRem(3), width: sxRem(3), borderRadius: \"50%\", bgcolor: \"background.paper\" }} />\n        </Box>\n      ))}\n    </Box>\n  );\n}\n\n/**\n * A grid of blocks — the cards layout, and ALSO the cards density preview: `n`\n * is how many fit per row, so \"Muitos / Médio / Poucos\" is shown rather than\n * described.\n */\nexport function GridGlyph({ n = 3, active }: { n?: number; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, display: \"grid\", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: sxRem(2) }}>\n      {Array.from({ length: n * 2 }).map((_, index) => (\n        <Box key={index} sx={{ borderRadius: 0.5, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/**\n * Full-height columns, `n` of them — the board's DENSITY, where fewer, wider\n * columns is the comfortable end. Distinct from {@link BoardGlyph}, which\n * stands for the board format itself and shows cards stacked at differing\n * depths; this one is about the columns' width, so the bars are solid.\n */\nexport function ColumnsGlyph({ n, active }: { n: number; active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, gap: sxRem(2) }}>\n      {Array.from({ length: n }).map((_, column) => (\n        <Box key={column} sx={{ flex: 1, borderRadius: 0.5, bgcolor: barColor(active) }} />\n      ))}\n    </Box>\n  );\n}\n\n/** Three columns of decreasing height — the board. */\nexport function BoardGlyph({ active }: { active: boolean }): React.JSX.Element {\n  return (\n    <Box sx={{ ...FRAME, gap: sxRem(2) }}>\n      {[3, 2, 1].map((count, column) => (\n        <Box key={column} sx={{ flex: 1, display: \"flex\", flexDirection: \"column\", gap: sxRem(2) }}>\n          {Array.from({ length: count }).map((_, index) => (\n            <Box key={index} sx={{ height: sxRem(5), borderRadius: 0.5, bgcolor: barColor(active) }} />\n          ))}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/{chunk-H3B5PIM3.js → chunk-YYVB7IWQ.js}

@@ -1,6 +1,10 @@
 import {
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Popover/Popover.tsx
 import Paper from "@mui/material/Paper/index.js";
@@ -8,13 +12,13 @@ import MuiPopover from "@mui/material/Popover/index.js";
 import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
-var pulseAnimation = keyframes`
+var pulseAnimation = (theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 10px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;
     opacity: 0;
   }
   100% {
@@ -37,9 +41,9 @@ var StyledPaper = styled(Paper, {
   },
   ...customVariant === "glass" && {
     backgroundColor: alpha(theme.palette.background.paper, 0.1),
-    backdropFilter: "blur(20px)",
+    backdropFilter: `blur(${rem(theme, 20)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-    boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`
+    boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`
   },
   ...customVariant === "arrow" && {
     backgroundColor: theme.palette.background.paper,
@@ -48,7 +52,7 @@ var StyledPaper = styled(Paper, {
   },
   // Glow effect
   ...glow && !pulse && {
-    boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+    boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
     filter: "brightness(1.05)"
   },
   // Pulse animation
@@ -64,7 +68,7 @@ var StyledPaper = styled(Paper, {
       borderRadius: "inherit",
       backgroundColor: theme.palette.primary.main,
       opacity: 0.1,
-      animation: `${pulseAnimation} 2s infinite`,
+      animation: `${pulseAnimation(theme)} 2s infinite`,
       pointerEvents: "none",
       zIndex: -1
     }
@@ -72,7 +76,7 @@ var StyledPaper = styled(Paper, {
   // Both glow and pulse
   ...glow && pulse && {
     position: "relative",
-    boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+    boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
     filter: "brightness(1.05)",
     "&::after": {
       content: '""',
@@ -84,18 +88,22 @@ var StyledPaper = styled(Paper, {
       borderRadius: "inherit",
       backgroundColor: theme.palette.primary.main,
       opacity: 0.1,
-      animation: `${pulseAnimation} 2s infinite`,
+      animation: `${pulseAnimation(theme)} 2s infinite`,
       pointerEvents: "none",
       zIndex: -1
     }
   }
 }));
+var popoverCap = (maxWidth) => (theme) => {
+  const cap = maxWidth ?? 400;
+  return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
+};
 var Popover = React.forwardRef(
   ({
     variant = "default",
     glow = false,
     pulse = false,
-    maxWidth = 400,
+    maxWidth,
     dataTestId,
     children,
     ...props
@@ -109,7 +117,7 @@ var Popover = React.forwardRef(
         customVariant: variant,
         glow,
         pulse,
-        sx: { maxWidth },
+        sx: { maxWidth: popoverCap(maxWidth) },
         ...props.PaperProps
       },
       ...props,
@@ -122,4 +130,4 @@ Popover.displayName = "Popover";
 export {
   Popover
 };
-//# sourceMappingURL=chunk-H3B5PIM3.js.map
+//# sourceMappingURL=chunk-YYVB7IWQ.js.map

package/dist/chunk-YYVB7IWQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Popover/Popover.tsx"],"sourcesContent":["import type { PaperProps } from '@mui/material/Paper/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport MuiPopover from '@mui/material/Popover/index.js';\nimport { alpha, keyframes, styled, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { PopoverProps } from './Popover.types';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\n// Define pulse animation\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, 10)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nconst StyledPaper = styled(Paper, {\n  shouldForwardProp: (prop) => \n    !['customVariant', 'glow', 'pulse'].includes(prop as string),\n})<{ \n  customVariant?: string; \n  glow?: boolean; \n  pulse?: boolean; \n}>(({ theme, customVariant, glow, pulse }) => ({\n  borderRadius: theme.spacing(1.5),\n  transition: 'all 0.3s ease',\n  position: 'relative',\n  overflow: 'hidden',\n\n  // Variant styles\n  ...(customVariant === 'default' && {\n    backgroundColor: theme.palette.background.paper,\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    boxShadow: theme.shadows[8],\n  }),\n\n  ...(customVariant === 'glass' && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: `blur(${rem(theme, 20)})`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,\n  }),\n\n  ...(customVariant === 'arrow' && {\n    backgroundColor: theme.palette.background.paper,\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    boxShadow: theme.shadows[12],\n  }),\n\n  // Glow effect\n  ...(glow && !pulse && {\n    boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n    filter: 'brightness(1.05)',\n  }),\n\n  // Pulse animation\n  ...(pulse && !glow && {\n    position: 'relative',\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: 0.1,\n      animation: `${pulseAnimation(theme)} 2s infinite`,\n      pointerEvents: 'none',\n      zIndex: -1,\n    },\n  }),\n\n  // Both glow and pulse\n  ...(glow && pulse && {\n    position: 'relative',\n    boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n    filter: 'brightness(1.05)',\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: 0.1,\n      animation: `${pulseAnimation(theme)} 2s infinite`,\n      pointerEvents: 'none',\n      zIndex: -1,\n    },\n  }),\n}));\n\n/**\n * The paper's cap: 400 design px unless the caller says otherwise. `sx` has\n * always read a number of 1 or less as a fraction of the parent, and that stays so.\n */\nconst popoverCap =\n  (maxWidth: number | undefined) =>\n  (theme: Theme): string => {\n    const cap = maxWidth ?? 400;\n    return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);\n  };\n\nexport const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(\n  ({\n    variant = 'default',\n    glow = false,\n    pulse = false,\n    maxWidth,\n    dataTestId,\n    children,\n    ...props\n  }, ref) => (\n      <MuiPopover\n        ref={ref}\n        data-testid={dataTestId || 'popover-content'}\n        PaperProps={{\n          component: StyledPaper as React.ComponentType<PaperProps>,\n          customVariant: variant,\n          glow,\n          pulse,\n          sx: { maxWidth: popoverCap(maxWidth) },\n          ...props.PaperProps,\n        } as PaperProps & { customVariant?: string; glow?: boolean; pulse?: boolean }}\n        {...props}\n      >\n        {children}\n      </MuiPopover>\n    )\n);\n\nPopover.displayName = 'Popover';"],"mappings":"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","names":[]}

package/dist/{chunk-OOSD7363.js → chunk-ZAFFKQQU.js}

@@ -5,7 +5,7 @@ import {
   ListGlyph,
   RowsGlyph,
   TableGlyph
-} from "./chunk-SNR537TI.js";
+} from "./chunk-YLGY3D52.js";
 import {
   useDataViewsLayout
 } from "./chunk-4LQZH4PU.js";
@@ -150,7 +150,7 @@ function SortFieldRow({
           default2,
           {
             component: "span",
-            sx: { height: 6, width: 6, borderRadius: "50%", bgcolor: active ? "primary.main" : "action.disabled" }
+            sx: { height: sxRem(6), width: sxRem(6), borderRadius: "50%", bgcolor: active ? "primary.main" : "action.disabled" }
           }
         ),
         /* @__PURE__ */ jsx(default2, { component: "span", sx: { flex: 1, minWidth: 0 }, children: label })
@@ -161,9 +161,9 @@ function SortFieldRow({
 function densityTiles(layout, copy) {
   const labels = copy.display.densityLabels[layout] ?? copy.display.densityLabels.table;
   return [
-    { value: "compact", label: labels?.compact ?? "compact", gap: 2, columns: 4 },
-    { value: "cozy", label: labels?.cozy ?? "cozy", gap: 5, columns: 3 },
-    { value: "comfortable", label: labels?.comfortable ?? "comfortable", gap: 8, columns: 2 }
+    { value: "compact", label: labels?.compact ?? "compact", gap: sxRem(2), columns: 4 },
+    { value: "cozy", label: labels?.cozy ?? "cozy", gap: sxRem(5), columns: 3 },
+    { value: "comfortable", label: labels?.comfortable ?? "comfortable", gap: sxRem(8), columns: 2 }
   ];
 }
 function densityGlyph(layout, tile, active) {
@@ -246,4 +246,4 @@ export {
   SortTab,
   DisplayTab
 };
-//# sourceMappingURL=chunk-OOSD7363.js.map
+//# sourceMappingURL=chunk-ZAFFKQQU.js.map

package/dist/chunk-ZAFFKQQU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-display-tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport type { DataViewsCopy } from \"./data-views-copy\";\nimport ArrowDownwardRoundedIcon from \"@mui/icons-material/ArrowDownwardRounded\";\nimport ArrowUpwardRoundedIcon from \"@mui/icons-material/ArrowUpwardRounded\";\nimport useMediaQuery from \"@mui/material/useMediaQuery/index.js\";\nimport type { Theme } from \"@mui/material/styles/index.js\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport type { SortFieldDefinition } from \"../../layout/ContentToolbar\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport {\n  BoardGlyph,\n  ColumnsGlyph,\n  GridGlyph,\n  ListGlyph,\n  RowsGlyph,\n  TableGlyph,\n} from \"./data-views-glyphs\";\nimport {\n  useDataViewsLayout,\n  type DataViewsDensity,\n  type DataViewsLayout,\n} from \"./data-views-layout-context\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/**\n * Two of the three tabs inside the \"Exibir\" panel — Ordenar and Exibição. The\n * Colunas tab is its own file (`data-views-columns-tab.tsx`) for the size budget.\n *\n * They live together because they answer one question (\"how do I want to read\n * this list?\") and were previously three separate toolbar dropdowns that the\n * operator had to know apart. Split into this file so the panel that frames\n * them, and each tab, stays inside the size budget.\n */\n\n/* ── Shared tile ─────────────────────────────────────────────────────────── */\n\n/** A picker tile: a glyph over its label, highlighted when it is the choice. */\nfunction Tile({\n  active,\n  label,\n  onClick,\n  testId,\n  children,\n}: {\n  active: boolean;\n  label: string;\n  onClick: () => void;\n  testId: string;\n  children: React.ReactNode;\n}): React.JSX.Element {\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      onClick={onClick}\n      aria-pressed={active}\n      data-testid={testId}\n      sx={{\n        flex: 1,\n        minWidth: 0,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        gap: 0.75,\n        p: 1.25,\n        border: 1,\n        borderStyle: \"solid\",\n        borderColor: active ? \"primary.main\" : \"divider\",\n        bgcolor: active ? \"action.selected\" : \"transparent\",\n        borderRadius: 1,\n        cursor: \"pointer\",\n        font: \"inherit\",\n        fontSize: sxRem(12),\n        fontWeight: active ? 600 : 400,\n        color: active ? \"primary.main\" : \"text.secondary\",\n        \"&:hover\": { bgcolor: \"action.hover\" },\n      }}\n    >\n      {children}\n      {label}\n    </Box>\n  );\n}\n\n/* ── Ordenar ─────────────────────────────────────────────────────────────── */\n\n/**\n * Direction labels read in the COLUMN'S OWN TERMS. \"Crescente\" on a currency\n * column is a puzzle the operator has to solve every time; \"Menor → maior\" is\n * not, and \"Mais recente\" is what someone actually means about a date.\n */\nconst DIRECTION_LABELS: Record<string, [string, string]> = {\n  number: [\"Menor → maior\", \"Maior → menor\"],\n  currency: [\"Menor → maior\", \"Maior → menor\"],\n  date: [\"Mais antigo\", \"Mais recente\"],\n  text: [\"A → Z\", \"Z → A\"],\n};\n\n/** The direction wording for a sort field, falling back to alphabetical. */\nfunction directionLabels(kind: string | undefined): [string, string] {\n  return DIRECTION_LABELS[kind ?? \"text\"] ?? DIRECTION_LABELS.text!;\n}\n\ninterface SortTabProps {\n  fields: SortFieldDefinition[];\n  activeField: string;\n  activeOrder: \"asc\" | \"desc\";\n  onChange: (field: string, order: \"asc\" | \"desc\") => void;\n  /** Per-field value kind, so the direction can be phrased in its own terms. */\n  sortKinds?: Record<string, string>;\n  testIdPrefix: string;\n}\n\n/** Direction first (two tiles), then the field list — the order they are decided in. */\nexport function SortTab({\n  fields,\n  activeField,\n  activeOrder,\n  onChange,\n  sortKinds,\n  testIdPrefix,\n}: SortTabProps): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const [ascLabel, descLabel] = directionLabels(sortKinds?.[activeField]);\n  return (\n    <Box sx={{ p: 1 }}>\n      <Text variant=\"caption\" as=\"p\">\n        <Box component=\"span\" sx={{ px: 0.5, color: \"text.secondary\" }}>\n          {copy.display.direction}\n        </Box>\n      </Text>\n      <Box sx={{ display: \"flex\", gap: 0.75, mb: 1.5, mt: 0.5 }}>\n        {([\"asc\", \"desc\"] as const).map((direction, index) => (\n          <Tile\n            key={direction}\n            active={activeOrder === direction}\n            label={index === 0 ? ascLabel : descLabel}\n            onClick={() => onChange(activeField || fields[0]?.value || \"\", direction)}\n            testId={`${testIdPrefix}-sort-dir-${direction}`}\n          >\n            {direction === \"asc\" ? (\n              <ArrowUpwardRoundedIcon fontSize=\"small\" />\n            ) : (\n              <ArrowDownwardRoundedIcon fontSize=\"small\" />\n            )}\n          </Tile>\n        ))}\n      </Box>\n      <Text variant=\"caption\" as=\"p\">\n        <Box component=\"span\" sx={{ px: 0.5, color: \"text.secondary\" }}>\n          {copy.display.fieldHeading}\n        </Box>\n      </Text>\n      {fields.map((field) => (\n        <SortFieldRow\n          key={field.value}\n          label={field.label}\n          active={field.value === activeField}\n          onClick={() => onChange(field.value, activeOrder)}\n          testId={`${testIdPrefix}-sort-field-${field.value}`}\n        />\n      ))}\n    </Box>\n  );\n}\n\n/** One sort field: a dot and its label, highlighted when it is the active sort. */\nfunction SortFieldRow({\n  label,\n  active,\n  onClick,\n  testId,\n}: {\n  label: string;\n  active: boolean;\n  onClick: () => void;\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      onClick={onClick}\n      data-testid={testId}\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 1,\n        width: \"100%\",\n        px: 1,\n        py: 0.75,\n        border: 0,\n        background: \"none\",\n        borderRadius: 1,\n        cursor: \"pointer\",\n        font: \"inherit\",\n        fontSize: sxRem(13),\n        textAlign: \"left\",\n        fontWeight: active ? 600 : 400,\n        color: active ? \"primary.main\" : \"text.primary\",\n        \"&:hover\": { bgcolor: \"action.hover\" },\n      }}\n    >\n      <Box\n        component=\"span\"\n        sx={{ height: sxRem(6), width: sxRem(6), borderRadius: \"50%\", bgcolor: active ? \"primary.main\" : \"action.disabled\" }}\n      />\n      <Box component=\"span\" sx={{ flex: 1, minWidth: 0 }}>\n        {label}\n      </Box>\n    </Box>\n  );\n}\n\n/* ── Exibição ────────────────────────────────────────────────────────────── */\n\n\n/**\n * What density MEANS in each layout — same three values, three different\n * questions. A table's is how tall its rows are, a card grid's is how many fit\n * on a line, and a board's is how wide its columns are. The heading and the\n * tile labels change with the layout because \"Alta\" over a board is meaningless\n * where \"Larga\" is not.\n */\n\n\n/** The density tiles, phrased for whichever layout is on screen. */\nfunction densityTiles(\n  layout: DataViewsLayout,\n  copy: DataViewsCopy,\n): { value: DataViewsDensity; label: string; gap: (theme: Theme) => string; columns: number }[] {\n  // A layout the pack does not key falls back to the table's words rather\n  // than rendering three blank tiles — a host adding a layout should still see\n  // a usable control while it writes the labels for it.\n  const labels = copy.display.densityLabels[layout] ?? copy.display.densityLabels.table;\n  return [\n    { value: \"compact\", label: labels?.compact ?? \"compact\", gap: sxRem(2), columns: 4 },\n    { value: \"cozy\", label: labels?.cozy ?? \"cozy\", gap: sxRem(5), columns: 3 },\n    { value: \"comfortable\", label: labels?.comfortable ?? \"comfortable\", gap: sxRem(8), columns: 2 },\n  ];\n}\n\n/** The preview for one density tile, in the terms that layout's density is in. */\nfunction densityGlyph(\n  layout: DataViewsLayout,\n  tile: { gap: (theme: Theme) => string; columns: number },\n  active: boolean,\n): React.JSX.Element {\n  if (layout === \"cards\") return <GridGlyph n={tile.columns} active={active} />;\n  // A wider column means FEWER of them across the same board, so the\n  // comfortable end draws two fat columns and the compact end four thin ones.\n  if (layout === \"board\") return <ColumnsGlyph n={tile.columns} active={active} />;\n  return <RowsGlyph gap={tile.gap} active={active} />;\n}\n\n/** The glyph for a layout tile. */\nfunction layoutGlyph(layout: DataViewsLayout, active: boolean): React.JSX.Element {\n  if (layout === \"table\") return <TableGlyph active={active} />;\n  if (layout === \"list\") return <ListGlyph active={active} />;\n  if (layout === \"cards\") return <GridGlyph active={active} />;\n  return <BoardGlyph active={active} />;\n}\n\nconst LAYOUT_TILE_LABELS: Record<DataViewsLayout, string> = {\n  table: \"Tabela\",\n  list: \"Lista\",\n  cards: \"Grade\",\n  board: \"Quadro\",\n};\n\n/**\n * Format and density, both shown as PREVIEWS rather than words — see\n * `data-views-glyphs.tsx` for why. A layout this table cannot render is simply\n * not offered, and the panel says why rather than leaving a gap.\n */\n/**\n * The three density tiles — or, on a phone, a line saying why there are none:\n * the card grid is `1fr` there, so all three would draw one card per row. Says\n * so rather than vanishing, for the same reason as the board note below it.\n */\nfunction DensityTiles({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { layout, density, setDensity } = useDataViewsLayout();\n  // Matches the card grid's own `xs: \"1fr\"` track, so the control and the thing\n  // it controls agree on where density stops meaning anything.\n  const isOneColumn = useMediaQuery((t: Theme) => t.breakpoints.down(\"sm\"));\n  if (layout === \"cards\" && isOneColumn) {\n    return (\n      <Text variant=\"caption\" as=\"p\">\n        <Box component=\"span\" sx={{ px: 0.5, pt: 0.5, display: \"block\", color: \"text.disabled\" }}>\n          {copy.display.densityUnavailableNarrow}\n        </Box>\n      </Text>\n    );\n  }\n  return (\n    <Box sx={{ display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: 0.75, mt: 0.5 }}>\n      {densityTiles(layout, copy).map((tile) => (\n        <Tile\n          key={tile.value}\n          active={density === tile.value}\n          label={tile.label}\n          onClick={() => setDensity(tile.value)}\n          testId={`${testIdPrefix}-density-${tile.value}`}\n        >\n          {densityGlyph(layout, tile, density === tile.value)}\n        </Tile>\n      ))}\n    </Box>\n  );\n}\n\nexport function DisplayTab({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { layout, setLayout, canUseCards, canUseList, canUseBoard } = useDataViewsLayout();\n  const available: DataViewsLayout[] = [\n    \"table\",\n    ...(canUseList ? ([\"list\"] as const) : []),\n    ...(canUseCards ? ([\"cards\"] as const) : []),\n    ...(canUseBoard ? ([\"board\"] as const) : []),\n  ];\n  return (\n    <Box sx={{ p: 1 }}>\n      <Text variant=\"caption\" as=\"p\">\n        <Box component=\"span\" sx={{ px: 0.5, color: \"text.secondary\" }}>\n          {copy.display.formatHeading}\n        </Box>\n      </Text>\n      <Box\n        sx={{\n          display: \"grid\",\n          gridTemplateColumns: available.length > 3 ? \"repeat(2, 1fr)\" : `repeat(${available.length}, 1fr)`,\n          gap: 0.75,\n          mt: 0.5,\n        }}\n      >\n        {available.map((value) => (\n          <Tile\n            key={value}\n            active={layout === value}\n            label={LAYOUT_TILE_LABELS[value]}\n            onClick={() => setLayout(value)}\n            testId={`${testIdPrefix}-layout-${value}`}\n          >\n            {layoutGlyph(value, layout === value)}\n          </Tile>\n        ))}\n      </Box>\n      <Text variant=\"caption\" as=\"p\">\n        <Box component=\"span\" sx={{ px: 0.5, py: 1, display: \"block\", color: \"text.disabled\" }}>\n          {copy.display.layoutHints[layout]}\n        </Box>\n      </Text>\n      {/* Every layout gets this, the board included. It used to be hidden on\n          Quadro, which left the format tile switching to a view with no sizing\n          control at all — and the section disappearing on select reads as a\n          control that broke rather than one that does not apply. */}\n      <Text variant=\"caption\" as=\"p\">\n        <Box component=\"span\" sx={{ px: 0.5, color: \"text.secondary\" }}>\n          {copy.display.densityHeadings[layout]}\n        </Box>\n      </Text>\n      <DensityTiles testIdPrefix={testIdPrefix} />\n      {!canUseBoard && (\n        <Text variant=\"caption\" as=\"p\">\n          <Box component=\"span\" sx={{ px: 0.5, pt: 1.25, display: \"block\", color: \"text.disabled\" }}>\n            {copy.display.boardUnavailable}\n          </Box>\n        </Text>\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/{chunk-IT7ATXU7.js → chunk-ZHV7TCAC.js}

@@ -1,12 +1,16 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/data-display/HoverCard/HoverCard.animations.ts
 import { 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 10px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;
     opacity: 0;
   }
   100% {
@@ -14,40 +18,40 @@ var pulseAnimation = keyframes`
     opacity: 0;
   }
 `;
-var slideInUp = keyframes`
+var slideInUp = (theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateY(8px);
+    transform: translateY(${rem(theme, 8)});
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 `;
-var slideInDown = keyframes`
+var slideInDown = (theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateY(-8px);
+    transform: translateY(${rem(theme, -8)});
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 `;
-var slideInLeft = keyframes`
+var slideInLeft = (theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateX(8px);
+    transform: translateX(${rem(theme, 8)});
   }
   to {
     opacity: 1;
     transform: translateX(0);
   }
 `;
-var slideInRight = keyframes`
+var slideInRight = (theme) => keyframes`
   from {
     opacity: 0;
-    transform: translateX(-8px);
+    transform: translateX(${rem(theme, -8)});
   }
   to {
     opacity: 1;
@@ -73,4 +77,4 @@ export {
   slideInRight,
   scaleIn
 };
-//# sourceMappingURL=chunk-IT7ATXU7.js.map
+//# sourceMappingURL=chunk-ZHV7TCAC.js.map

package/dist/chunk-ZHV7TCAC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/HoverCard/HoverCard.animations.ts"],"sourcesContent":["import { keyframes, type Theme } from '@mui/material/styles/index.js';\n\nimport { rem } from '../../../tokens/relative';\n\nexport const 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, 10)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nexport const slideInUp = (theme: Theme) => keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(${rem(theme, 8)});\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const slideInDown = (theme: Theme) => keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(${rem(theme, -8)});\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const slideInLeft = (theme: Theme) => keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(${rem(theme, 8)});\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nexport const slideInRight = (theme: Theme) => keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(${rem(theme, -8)});\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nexport const scaleIn = keyframes`\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\n// Arrow component\n"],"mappings":";;;;;AAAA,SAAS,iBAA6B;AAI/B,IAAM,iBAAiB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMxB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS/B,IAAM,YAAY,CAAC,UAAiB;AAAA;AAAA;AAAA,4BAGf,IAAI,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlC,IAAM,cAAc,CAAC,UAAiB;AAAA;AAAA;AAAA,4BAGjB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnC,IAAM,cAAc,CAAC,UAAiB;AAAA;AAAA;AAAA,4BAGjB,IAAI,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlC,IAAM,eAAe,CAAC,UAAiB;AAAA;AAAA;AAAA,4BAGlB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnC,IAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/{chunk-KUVOMH5I.js → chunk-ZZ4MMUBY.js}

@@ -10,18 +10,19 @@ var OVERLAY_STYLE = {
   pointerEvents: "none",
   zIndex: 1
 };
-var MAX_HEAT_RADIUS = 30;
+var MAX_HEAT_R = 30;
 var MAX_HEAT_OPACITY = 0.3;
 var DEGREES_TO_PIXELS = 10;
-var HeatmapOverlay = ({ points, width, height }) => {
+var HeatmapOverlay = ({ points, viewBox }) => {
   const theme = useTheme();
+  const { width, height } = viewBox;
   if (points.length === 0) return null;
   return /* @__PURE__ */ jsx("svg", { style: OVERLAY_STYLE, viewBox: `0 0 ${width} ${height}`, children: points.map((point, index) => /* @__PURE__ */ jsx(
     "circle",
     {
       cx: width / 2 + point.lng * DEGREES_TO_PIXELS,
       cy: height / 2 - point.lat * DEGREES_TO_PIXELS,
-      r: MAX_HEAT_RADIUS * point.weight,
+      r: MAX_HEAT_R * point.weight,
       fill: theme.palette.error.main,
       opacity: MAX_HEAT_OPACITY * point.weight
     },
@@ -48,4 +49,4 @@ export {
   HeatmapOverlay,
   RouteOverlay
 };
-//# sourceMappingURL=chunk-KUVOMH5I.js.map
+//# sourceMappingURL=chunk-ZZ4MMUBY.js.map

package/dist/chunk-ZZ4MMUBY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapOverlays.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles/index.js';\nimport type { CSSProperties, FC } from 'react';\nimport React from 'react';\n\nimport type { HeatmapPoint } from './MapPreview.types';\n\nconst OVERLAY_STYLE: CSSProperties = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: '100%',\n  height: '100%',\n  pointerEvents: 'none',\n  zIndex: 1,\n};\n\n// The hottest point's circle `r`, in the viewBox's user units: it scales with the\n// SVG box, which fills the map, so it is not a CSS length.\nconst MAX_HEAT_R = 30;\nconst MAX_HEAT_OPACITY = 0.3;\nconst DEGREES_TO_PIXELS = 10;\n\nexport interface HeatmapOverlayProps {\n  points: HeatmapPoint[];\n  /** The drawing's user-space extent — the `viewBox`, not a CSS size. */\n  viewBox: { width: number; height: number };\n}\n\n// Each point's weight drives both its radius and its opacity, so denser areas\n// read hotter where circles overlap.\nexport const HeatmapOverlay: FC<HeatmapOverlayProps> = ({ points, viewBox }) => {\n  const theme = useTheme();\n  const { width, height } = viewBox;\n\n  if (points.length === 0) return null;\n\n  return (\n    <svg style={OVERLAY_STYLE} viewBox={`0 0 ${width} ${height}`}>\n      {points.map((point, index) => (\n        <circle\n          key={`${point.lat}-${point.lng}-${index}`}\n          cx={width / 2 + point.lng * DEGREES_TO_PIXELS}\n          cy={height / 2 - point.lat * DEGREES_TO_PIXELS}\n          r={MAX_HEAT_R * point.weight}\n          fill={theme.palette.error.main}\n          opacity={MAX_HEAT_OPACITY * point.weight}\n        />\n      ))}\n    </svg>\n  );\n};\n\nexport const RouteOverlay: FC<{ color: string }> = ({ color }) => {\n  const theme = useTheme();\n\n  return (\n    <svg style={OVERLAY_STYLE} viewBox=\"0 0 100 100\">\n      <path\n        d=\"M 20,20 Q 40,10 50,30 T 80,80\"\n        stroke={color || theme.palette.primary.main}\n        strokeWidth=\"3\"\n        fill=\"none\"\n        strokeDasharray=\"5,5\"\n        opacity=\"0.8\"\n      >\n        {/* Marching-ants dashes to suggest direction of travel. */}\n        <animate attributeName=\"stroke-dashoffset\" values=\"0;10\" dur=\"1s\" repeatCount=\"indefinite\" />\n      </path>\n    </svg>\n  );\n};\n"],"mappings":";AAAA,SAAS,gBAAgB;AAuCjB;AAjCR,IAAM,gBAA+B;AAAA,EACnC,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,QAAQ;AACV;AAIA,IAAM,aAAa;AACnB,IAAM,mBAAmB;AACzB,IAAM,oBAAoB;AAUnB,IAAM,iBAA0C,CAAC,EAAE,QAAQ,QAAQ,MAAM;AAC9E,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,OAAO,OAAO,IAAI;AAE1B,MAAI,OAAO,WAAW,EAAG,QAAO;AAEhC,SACE,oBAAC,SAAI,OAAO,eAAe,SAAS,OAAO,KAAK,IAAI,MAAM,IACvD,iBAAO,IAAI,CAAC,OAAO,UAClB;AAAA,IAAC;AAAA;AAAA,MAEC,IAAI,QAAQ,IAAI,MAAM,MAAM;AAAA,MAC5B,IAAI,SAAS,IAAI,MAAM,MAAM;AAAA,MAC7B,GAAG,aAAa,MAAM;AAAA,MACtB,MAAM,MAAM,QAAQ,MAAM;AAAA,MAC1B,SAAS,mBAAmB,MAAM;AAAA;AAAA,IAL7B,GAAG,MAAM,GAAG,IAAI,MAAM,GAAG,IAAI,KAAK;AAAA,EAMzC,CACD,GACH;AAEJ;AAEO,IAAM,eAAsC,CAAC,EAAE,MAAM,MAAM;AAChE,QAAM,QAAQ,SAAS;AAEvB,SACE,oBAAC,SAAI,OAAO,eAAe,SAAQ,eACjC;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,QAAQ,SAAS,MAAM,QAAQ,QAAQ;AAAA,MACvC,aAAY;AAAA,MACZ,MAAK;AAAA,MACL,iBAAgB;AAAA,MAChB,SAAQ;AAAA,MAGR,8BAAC,aAAQ,eAAc,qBAAoB,QAAO,QAAO,KAAI,MAAK,aAAY,cAAa;AAAA;AAAA,EAC7F,GACF;AAEJ;","names":[]}

package/dist/data-display/Alert.js

@@ -1,8 +1,8 @@
 import "../chunk-NUGT7LMR.js";
 import {
   Alert
-} from "../chunk-2PWVPTS3.js";
-import "../chunk-A2CTAEIS.js";
+} from "../chunk-AUHYR7ID.js";
+import "../chunk-MO47Y26B.js";
 import "../chunk-L7VH6IMR.js";
 import "../chunk-P2UIXDEG.js";
 import "../chunk-TYJR4GOF.js";
@@ -13,9 +13,9 @@ import "../chunk-FZXKH2ZT.js";
 import "../chunk-PZBK3F52.js";
 import "../chunk-26X4CZVR.js";
 import "../chunk-FQ6UW7IY.js";
-import "../chunk-YKCAJ2TN.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-N3GAFIXG.js";
+import "../chunk-YKCAJ2TN.js";
 import "../chunk-PZ5AY32C.js";
 export {
   Alert