@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-46UPILLK.js

@@ -0,0 +1,189 @@
+import {
+  CITY_ZOOM,
+  CLICK_JITTER_DEGREES,
+  DRAG_DEGREES_PER_PIXEL,
+  MAP_TYPES,
+  MAX_ZOOM,
+  MIN_ZOOM
+} from "./chunk-H2J2MTRE.js";
+import {
+  geocode
+} from "./chunk-TUBCN4DJ.js";
+
+// src/components/data-display/MapPreview/MapPreview.hooks.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var ORIGIN = { x: 0, y: 0 };
+var useMapView = ({
+  coordinates,
+  initialZoom,
+  initialMapType
+}) => {
+  const [zoom, setZoom] = useState(initialZoom);
+  const [mapType, setMapType] = useState(initialMapType);
+  const [markerPosition, setMarkerPosition] = useState(coordinates);
+  const [panOffset, setPanOffset] = useState(ORIGIN);
+  useEffect(() => {
+    setMarkerPosition(coordinates);
+  }, [coordinates]);
+  const zoomTo = useCallback((next) => {
+    setZoom(next);
+    setPanOffset(ORIGIN);
+  }, []);
+  return {
+    zoom,
+    zoomTo,
+    mapType,
+    setMapType,
+    markerPosition,
+    setMarkerPosition,
+    panOffset,
+    setPanOffset
+  };
+};
+var useMapControls = ({
+  coordinates,
+  zoom,
+  mapType,
+  zoomTo,
+  setMapType,
+  setMarkerPosition,
+  setPanOffset,
+  containerRef
+}) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const handleZoomIn = useCallback(() => zoomTo(Math.min(zoom + 1, MAX_ZOOM)), [zoom, zoomTo]);
+  const handleZoomOut = useCallback(() => zoomTo(Math.max(zoom - 1, MIN_ZOOM)), [zoom, zoomTo]);
+  const handleCenter = useCallback(() => {
+    setMarkerPosition({ ...coordinates });
+    setPanOffset(ORIGIN);
+  }, [coordinates, setMarkerPosition, setPanOffset]);
+  const handleToggleMapType = useCallback(() => {
+    const nextIndex = (MAP_TYPES.indexOf(mapType) + 1) % MAP_TYPES.length;
+    setMapType(MAP_TYPES[nextIndex]);
+  }, [mapType, setMapType]);
+  const handleToggleFullscreen = useCallback(() => {
+    if (!isFullscreen && containerRef.current) {
+      containerRef.current.requestFullscreen?.();
+    } else if (document.fullscreenElement) {
+      document.exitFullscreen?.();
+    }
+    setIsFullscreen((prev) => !prev);
+  }, [isFullscreen, containerRef]);
+  return {
+    isFullscreen,
+    handleZoomIn,
+    handleZoomOut,
+    handleCenter,
+    handleToggleMapType,
+    handleToggleFullscreen
+  };
+};
+var isOnMapSurface = (target) => target.dataset.testid === "static-map-view" || Boolean(target.closest('[data-testid="static-map-view"]'));
+var panTo = (event, start) => ({
+  x: start.offsetX + (event.clientX - start.x),
+  y: start.offsetY + (event.clientY - start.y)
+});
+var dragTo = (event, start) => ({
+  lat: start.lat + (event.clientY - start.y) * DRAG_DEGREES_PER_PIXEL,
+  lng: start.lng + (event.clientX - start.x) * DRAG_DEGREES_PER_PIXEL
+});
+var useMapPointer = ({
+  interactive,
+  markerPosition,
+  panOffset,
+  onMarkerDrag,
+  setMarkerPosition,
+  setPanOffset
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isPanning, setIsPanning] = useState(false);
+  const dragStartRef = useRef(null);
+  const panStartRef = useRef(null);
+  const handleMouseDown = useCallback(
+    (event) => {
+      if (!interactive) return;
+      const { clientX: x, clientY: y } = event;
+      if (isOnMapSurface(event.target) && event.shiftKey) {
+        setIsPanning(true);
+        panStartRef.current = { x, y, offsetX: panOffset.x, offsetY: panOffset.y };
+        return;
+      }
+      setIsDragging(true);
+      dragStartRef.current = { x, y, lat: markerPosition.lat, lng: markerPosition.lng };
+    },
+    [interactive, markerPosition, panOffset]
+  );
+  const handleMouseMove = useCallback(
+    (event) => {
+      const panStart = panStartRef.current;
+      if (isPanning && panStart) {
+        setPanOffset(panTo(event, panStart));
+        return;
+      }
+      const dragStart = dragStartRef.current;
+      if (!isDragging || !dragStart) return;
+      const position = dragTo(event, dragStart);
+      setMarkerPosition(position);
+      onMarkerDrag?.(position);
+    },
+    [isDragging, isPanning, onMarkerDrag, setMarkerPosition, setPanOffset]
+  );
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setIsPanning(false);
+    dragStartRef.current = null;
+    panStartRef.current = null;
+  }, []);
+  return { isDragging, isPanning, handleMouseDown, handleMouseMove, handleMouseUp };
+};
+var useMapSearch = ({
+  zoomTo,
+  setMarkerPosition
+}) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const handleSearch = useCallback(
+    async (event) => {
+      if (event.key !== "Enter" || !searchValue) return;
+      setIsSearching(true);
+      try {
+        const result = await geocode(searchValue);
+        if (!result) return;
+        setMarkerPosition({ ...result });
+        zoomTo(CITY_ZOOM);
+      } finally {
+        setIsSearching(false);
+      }
+    },
+    [searchValue, zoomTo, setMarkerPosition]
+  );
+  return { searchValue, setSearchValue, isSearching, handleSearch };
+};
+var useMapClick = ({
+  coordinates,
+  interactive,
+  isPanning,
+  onMapClick,
+  onMarkerDrag,
+  setMarkerPosition
+}) => useCallback(() => {
+  if (isPanning) return;
+  const coords = {
+    lat: coordinates.lat + (Math.random() - 0.5) * CLICK_JITTER_DEGREES,
+    lng: coordinates.lng + (Math.random() - 0.5) * CLICK_JITTER_DEGREES
+  };
+  onMapClick?.(coords.lat, coords.lng);
+  if (interactive && onMarkerDrag) {
+    setMarkerPosition(coords);
+    onMarkerDrag(coords);
+  }
+}, [coordinates, interactive, isPanning, onMapClick, onMarkerDrag, setMarkerPosition]);
+
+export {
+  useMapView,
+  useMapControls,
+  useMapPointer,
+  useMapSearch,
+  useMapClick
+};
+//# sourceMappingURL=chunk-46UPILLK.js.map

package/dist/chunk-46UPILLK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapPreview.hooks.ts"],"sourcesContent":["import type React from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { geocode } from './mapProjection';\nimport {\n  CITY_ZOOM,\n  CLICK_JITTER_DEGREES,\n  DRAG_DEGREES_PER_PIXEL,\n  MAP_TYPES,\n  MAX_ZOOM,\n  MIN_ZOOM,\n} from './MapPreview.constants';\nimport type { LatLng, MapType } from './MapPreview.types';\n\nconst ORIGIN = { x: 0, y: 0 };\n\nexport const useMapView = ({\n  coordinates,\n  initialZoom,\n  initialMapType,\n}: {\n  coordinates: LatLng;\n  initialZoom: number;\n  initialMapType: MapType;\n}) => {\n  const [zoom, setZoom] = useState(initialZoom);\n  const [mapType, setMapType] = useState<MapType>(initialMapType);\n  const [markerPosition, setMarkerPosition] = useState(coordinates);\n  const [panOffset, setPanOffset] = useState(ORIGIN);\n\n  useEffect(() => {\n    setMarkerPosition(coordinates);\n  }, [coordinates]);\n\n  // Panning is relative to the tile grid, so a zoom change invalidates it.\n  const zoomTo = useCallback((next: number) => {\n    setZoom(next);\n    setPanOffset(ORIGIN);\n  }, []);\n\n  return {\n    zoom,\n    zoomTo,\n    mapType,\n    setMapType,\n    markerPosition,\n    setMarkerPosition,\n    panOffset,\n    setPanOffset,\n  };\n};\n\nexport const useMapControls = ({\n  coordinates,\n  zoom,\n  mapType,\n  zoomTo,\n  setMapType,\n  setMarkerPosition,\n  setPanOffset,\n  containerRef,\n}: {\n  coordinates: LatLng;\n  zoom: number;\n  mapType: MapType;\n  zoomTo: (zoom: number) => void;\n  setMapType: (type: MapType) => void;\n  setMarkerPosition: (position: LatLng) => void;\n  setPanOffset: (offset: { x: number; y: number }) => void;\n  containerRef: React.RefObject<HTMLDivElement | null>;\n}) => {\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const handleZoomIn = useCallback(() => zoomTo(Math.min(zoom + 1, MAX_ZOOM)), [zoom, zoomTo]);\n  const handleZoomOut = useCallback(() => zoomTo(Math.max(zoom - 1, MIN_ZOOM)), [zoom, zoomTo]);\n\n  const handleCenter = useCallback(() => {\n    setMarkerPosition({ ...coordinates });\n    setPanOffset(ORIGIN);\n  }, [coordinates, setMarkerPosition, setPanOffset]);\n\n  const handleToggleMapType = useCallback(() => {\n    const nextIndex = (MAP_TYPES.indexOf(mapType) + 1) % MAP_TYPES.length;\n    setMapType(MAP_TYPES[nextIndex] as MapType);\n  }, [mapType, setMapType]);\n\n  const handleToggleFullscreen = useCallback(() => {\n    if (!isFullscreen && containerRef.current) {\n      containerRef.current.requestFullscreen?.();\n    } else if (document.fullscreenElement) {\n      document.exitFullscreen?.();\n    }\n    setIsFullscreen((prev) => !prev);\n  }, [isFullscreen, containerRef]);\n\n  return {\n    isFullscreen,\n    handleZoomIn,\n    handleZoomOut,\n    handleCenter,\n    handleToggleMapType,\n    handleToggleFullscreen,\n  };\n};\n\ninterface DragStart {\n  x: number;\n  y: number;\n  lat: number;\n  lng: number;\n}\n\ninterface PanStart {\n  x: number;\n  y: number;\n  offsetX: number;\n  offsetY: number;\n}\n\nconst isOnMapSurface = (target: HTMLElement): boolean =>\n  target.dataset.testid === 'static-map-view' ||\n  Boolean(target.closest('[data-testid=\"static-map-view\"]'));\n\nconst panTo = (event: React.MouseEvent, start: PanStart) => ({\n  x: start.offsetX + (event.clientX - start.x),\n  y: start.offsetY + (event.clientY - start.y),\n});\n\nconst dragTo = (event: React.MouseEvent, start: DragStart): LatLng => ({\n  lat: start.lat + (event.clientY - start.y) * DRAG_DEGREES_PER_PIXEL,\n  lng: start.lng + (event.clientX - start.x) * DRAG_DEGREES_PER_PIXEL,\n});\n\n// Shift-drag pans the surface; a plain drag moves the marker.\nexport const useMapPointer = ({\n  interactive,\n  markerPosition,\n  panOffset,\n  onMarkerDrag,\n  setMarkerPosition,\n  setPanOffset,\n}: {\n  interactive: boolean;\n  markerPosition: LatLng;\n  panOffset: { x: number; y: number };\n  onMarkerDrag?: (coords: LatLng) => void;\n  setMarkerPosition: (position: LatLng) => void;\n  setPanOffset: (offset: { x: number; y: number }) => void;\n}) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const [isPanning, setIsPanning] = useState(false);\n  const dragStartRef = useRef<DragStart | null>(null);\n  const panStartRef = useRef<PanStart | null>(null);\n\n  const handleMouseDown = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (!interactive) return;\n      const { clientX: x, clientY: y } = event;\n\n      if (isOnMapSurface(event.target as HTMLElement) && event.shiftKey) {\n        setIsPanning(true);\n        panStartRef.current = { x, y, offsetX: panOffset.x, offsetY: panOffset.y };\n        return;\n      }\n\n      setIsDragging(true);\n      dragStartRef.current = { x, y, lat: markerPosition.lat, lng: markerPosition.lng };\n    },\n    [interactive, markerPosition, panOffset],\n  );\n\n  const handleMouseMove = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      const panStart = panStartRef.current;\n      if (isPanning && panStart) {\n        setPanOffset(panTo(event, panStart));\n        return;\n      }\n\n      const dragStart = dragStartRef.current;\n      if (!isDragging || !dragStart) return;\n\n      const position = dragTo(event, dragStart);\n      setMarkerPosition(position);\n      onMarkerDrag?.(position);\n    },\n    [isDragging, isPanning, onMarkerDrag, setMarkerPosition, setPanOffset],\n  );\n\n  const handleMouseUp = useCallback(() => {\n    setIsDragging(false);\n    setIsPanning(false);\n    dragStartRef.current = null;\n    panStartRef.current = null;\n  }, []);\n\n  return { isDragging, isPanning, handleMouseDown, handleMouseMove, handleMouseUp };\n};\n\nexport const useMapSearch = ({\n  zoomTo,\n  setMarkerPosition,\n}: {\n  zoomTo: (zoom: number) => void;\n  setMarkerPosition: (position: LatLng) => void;\n}) => {\n  const [searchValue, setSearchValue] = useState('');\n  const [isSearching, setIsSearching] = useState(false);\n\n  const handleSearch = useCallback(\n    async (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key !== 'Enter' || !searchValue) return;\n\n      setIsSearching(true);\n      try {\n        const result = await geocode(searchValue);\n        // An unknown place leaves the map where it is; a production build would\n        // surface an error here.\n        if (!result) return;\n\n        setMarkerPosition({ ...result });\n        zoomTo(CITY_ZOOM);\n      } finally {\n        setIsSearching(false);\n      }\n    },\n    [searchValue, zoomTo, setMarkerPosition],\n  );\n\n  return { searchValue, setSearchValue, isSearching, handleSearch };\n};\n\nexport const useMapClick = ({\n  coordinates,\n  interactive,\n  isPanning,\n  onMapClick,\n  onMarkerDrag,\n  setMarkerPosition,\n}: {\n  coordinates: LatLng;\n  interactive: boolean;\n  isPanning: boolean;\n  onMapClick?: (lat: number, lng: number) => void;\n  onMarkerDrag?: (coords: LatLng) => void;\n  setMarkerPosition: (position: LatLng) => void;\n}) =>\n  useCallback(() => {\n    // A pan ends with a click event; that should not also drop a marker.\n    if (isPanning) return;\n\n    // Without a real projection there is nothing to convert a click position\n    // into, so the mock jitters around the centre instead.\n    const coords = {\n      lat: coordinates.lat + (Math.random() - 0.5) * CLICK_JITTER_DEGREES,\n      lng: coordinates.lng + (Math.random() - 0.5) * CLICK_JITTER_DEGREES,\n    };\n\n    onMapClick?.(coords.lat, coords.lng);\n\n    if (interactive && onMarkerDrag) {\n      setMarkerPosition(coords);\n      onMarkerDrag(coords);\n    }\n  }, [coordinates, interactive, isPanning, onMapClick, onMarkerDrag, setMarkerPosition]);\n"],"mappings":"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","names":[]}

package/dist/chunk-4DKJGJNZ.js

@@ -0,0 +1,133 @@
+import {
+  useDateTimeParts
+} from "./chunk-ULJ4C6JW.js";
+
+// src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx
+import { Box, Tooltip, Typography } from "@mui/material";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getFontSizes(size) {
+  switch (size) {
+    case "xs":
+    case "sm":
+      return { date: "0.75rem", time: "0.65rem" };
+    case "lg":
+    case "xl":
+      return { date: "1rem", time: "0.875rem" };
+    case "md":
+    default:
+      return { date: "0.875rem", time: "0.75rem" };
+  }
+}
+var Stacked = forwardRef(
+  ({ formattedDate, formattedTime, fontSizes, showTooltip, sx, dataTestId }, ref) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "span",
+      ref,
+      "data-testid": dataTestId,
+      sx: {
+        display: "inline-flex",
+        flexDirection: "column",
+        lineHeight: 1.3,
+        cursor: showTooltip ? "help" : "default",
+        ...sx
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            sx: {
+              fontWeight: 500,
+              fontSize: fontSizes.date
+            },
+            "data-testid": dataTestId ? `${dataTestId}-date` : void 0,
+            children: formattedDate
+          }
+        ),
+        formattedTime && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            sx: {
+              fontSize: fontSizes.time,
+              color: "text.secondary"
+            },
+            "data-testid": dataTestId ? `${dataTestId}-time` : void 0,
+            children: formattedTime
+          }
+        )
+      ]
+    }
+  )
+);
+Stacked.displayName = "DateTimeDisplayStacked";
+var DateTimeDisplay = forwardRef(
+  ({
+    date,
+    dateFormat = "short",
+    timeFormat = "12h",
+    showTimezone = false,
+    size = "md",
+    showTooltip = true,
+    tooltipContent,
+    sx,
+    dataTestId
+  }, ref) => {
+    const { dateObj, formattedDate, formattedTime, fullDateTime } = useDateTimeParts({
+      date,
+      dateFormat,
+      timeFormat,
+      showTimezone
+    });
+    const fontSizes = getFontSizes(size);
+    if (!dateObj) {
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          ref,
+          "data-testid": dataTestId,
+          sx: { color: "text.disabled", ...sx },
+          children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: "-" })
+        }
+      );
+    }
+    const content = /* @__PURE__ */ jsx(
+      Stacked,
+      {
+        ref,
+        formattedDate,
+        formattedTime,
+        fontSizes,
+        showTooltip,
+        sx,
+        dataTestId
+      }
+    );
+    if (!showTooltip) {
+      return content;
+    }
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: tooltipContent || fullDateTime,
+        arrow: true,
+        placement: "top",
+        slotProps: {
+          tooltip: {
+            sx: { px: 2, py: 1 }
+          }
+        },
+        children: content
+      }
+    );
+  }
+);
+DateTimeDisplay.displayName = "DateTimeDisplay";
+
+export {
+  DateTimeDisplay
+};
+//# sourceMappingURL=chunk-4DKJGJNZ.js.map

package/dist/chunk-4DKJGJNZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material';\nimport { forwardRef } from 'react';\n\nimport { useDateTimeParts } from './DateTimeDisplay.hooks';\nimport type { DateTimeDisplayProps } from './DateTimeDisplay.types';\nimport type { SizeValue } from '../../../tokens/scales';\n\n/**\n * Get font sizes based on size prop\n */\nfunction getFontSizes(size: SizeValue) {\n  switch (size) {\n    case 'xs':\n    case 'sm':\n      return { date: '0.75rem', time: '0.65rem' };\n    case 'lg':\n    case 'xl':\n      return { date: '1rem', time: '0.875rem' };\n    case 'md':\n    default:\n      return { date: '0.875rem', time: '0.75rem' };\n  }\n}\n\ninterface StackedProps {\n  formattedDate: string | null;\n  formattedTime: string | null;\n  fontSizes: ReturnType<typeof getFontSizes>;\n  showTooltip: boolean;\n  sx: DateTimeDisplayProps['sx'];\n  dataTestId?: string;\n}\n\nconst Stacked = forwardRef<HTMLSpanElement, StackedProps>(\n  ({ formattedDate, formattedTime, fontSizes, showTooltip, sx, dataTestId }, ref) => (\n    <Box\n      component=\"span\"\n      ref={ref}\n      data-testid={dataTestId}\n      sx={{\n        display: 'inline-flex',\n        flexDirection: 'column',\n        lineHeight: 1.3,\n        cursor: showTooltip ? 'help' : 'default',\n        ...sx,\n      }}\n    >\n      <Typography\n        component=\"span\"\n        sx={{\n          fontWeight: 500,\n          fontSize: fontSizes.date,\n        }}\n        data-testid={dataTestId ? `${dataTestId}-date` : undefined}\n      >\n        {formattedDate}\n      </Typography>\n      {formattedTime && (\n        <Typography\n          component=\"span\"\n          sx={{\n            fontSize: fontSizes.time,\n            color: 'text.secondary',\n          }}\n          data-testid={dataTestId ? `${dataTestId}-time` : undefined}\n        >\n          {formattedTime}\n        </Typography>\n      )}\n    </Box>\n  ),\n);\n\nStacked.displayName = 'DateTimeDisplayStacked';\n\n/**\n * DateTimeDisplay component - displays date and time in a stacked format\n * with date on one line and time on another.\n */\nexport const DateTimeDisplay = forwardRef<HTMLSpanElement, DateTimeDisplayProps>(\n  (\n    {\n      date,\n      dateFormat = 'short',\n      timeFormat = '12h',\n      showTimezone = false,\n      size = 'md',\n      showTooltip = true,\n      tooltipContent,\n      sx,\n      dataTestId,\n    },\n    ref,\n  ) => {\n    const { dateObj, formattedDate, formattedTime, fullDateTime } = useDateTimeParts({\n      date,\n      dateFormat,\n      timeFormat,\n      showTimezone,\n    });\n    const fontSizes = getFontSizes(size);\n\n    // Handle invalid or missing date\n    if (!dateObj) {\n      return (\n        <Box\n          component=\"span\"\n          ref={ref}\n          data-testid={dataTestId}\n          sx={{ color: 'text.disabled', ...sx }}\n        >\n          <Typography variant=\"caption\">-</Typography>\n        </Box>\n      );\n    }\n\n    const content = (\n      <Stacked\n        ref={ref}\n        formattedDate={formattedDate}\n        formattedTime={formattedTime}\n        fontSizes={fontSizes}\n        showTooltip={showTooltip}\n        sx={sx}\n        dataTestId={dataTestId}\n      />\n    );\n\n    if (!showTooltip) {\n      return content;\n    }\n\n    return (\n      <Tooltip\n        title={tooltipContent || fullDateTime}\n        arrow\n        placement=\"top\"\n        slotProps={{\n          tooltip: {\n            sx: { px: 2, py: 1 },\n          },\n        }}\n      >\n        {content}\n      </Tooltip>\n    );\n  },\n);\n\nDateTimeDisplay.displayName = 'DateTimeDisplay';\n"],"mappings":";;;;;AAAA,SAAS,KAAK,SAAS,kBAAkB;AACzC,SAAS,kBAAkB;AAkCvB,SAYE,KAZF;AAzBJ,SAAS,aAAa,MAAiB;AACrC,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO,EAAE,MAAM,WAAW,MAAM,UAAU;AAAA,IAC5C,KAAK;AAAA,IACL,KAAK;AACH,aAAO,EAAE,MAAM,QAAQ,MAAM,WAAW;AAAA,IAC1C,KAAK;AAAA,IACL;AACE,aAAO,EAAE,MAAM,YAAY,MAAM,UAAU;AAAA,EAC/C;AACF;AAWA,IAAM,UAAU;AAAA,EACd,CAAC,EAAE,eAAe,eAAe,WAAW,aAAa,IAAI,WAAW,GAAG,QACzE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,QAAQ,cAAc,SAAS;AAAA,QAC/B,GAAG;AAAA,MACL;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,UAAU,UAAU;AAAA,YACtB;AAAA,YACA,eAAa,aAAa,GAAG,UAAU,UAAU;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA,QACC,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,UAAU,UAAU;AAAA,cACpB,OAAO;AAAA,YACT;AAAA,YACA,eAAa,aAAa,GAAG,UAAU,UAAU;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,QAAQ,cAAc;AAMf,IAAM,kBAAkB;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,IACf,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,SAAS,eAAe,eAAe,aAAa,IAAI,iBAAiB;AAAA,MAC/E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,YAAY,aAAa,IAAI;AAGnC,QAAI,CAAC,SAAS;AACZ,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;AAAA,UACA,eAAa;AAAA,UACb,IAAI,EAAE,OAAO,iBAAiB,GAAG,GAAG;AAAA,UAEpC,8BAAC,cAAW,SAAQ,WAAU,eAAC;AAAA;AAAA,MACjC;AAAA,IAEJ;AAEA,UAAM,UACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAGF,QAAI,CAAC,aAAa;AAChB,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,kBAAkB;AAAA,QACzB,OAAK;AAAA,QACL,WAAU;AAAA,QACV,WAAW;AAAA,UACT,SAAS;AAAA,YACP,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE;AAAA,UACrB;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}

package/dist/chunk-4EGKGOV2.js

@@ -0,0 +1,187 @@
+import {
+  DATA_VIEWS_LAYOUTS
+} from "./chunk-C6ATAHBX.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Slider
+} from "./chunk-ILEJ3DVD.js";
+import {
+  Box
+} from "./chunk-34DQAXL2.js";
+
+// src/components/data-display/DataViews/data-views-layout-context.tsx
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DataViewsLayoutContext = createContext(null);
+var DEFAULT_ZOOM = 35;
+var BASE_CARD_WIDTH = 180;
+var CARD_SCALE_RANGE = { min: 0.75, max: 2 };
+var LAYOUT_STORAGE_KEY = "dataviews:layout";
+var DENSITY_STORAGE_KEY = "dataviews:density";
+var DENSITIES = ["compact", "cozy", "comfortable"];
+var DENSITY_ROW_PADDING = {
+  compact: 0.25,
+  cozy: 0.75,
+  comfortable: 1.5
+};
+var DENSITY_CARD_SCALE = {
+  compact: 0.84,
+  cozy: 1.15,
+  comfortable: 1.4
+};
+function cardTargetWidthFor(zoom, density) {
+  return Math.round(cardMinWidthForZoom(zoom) * DENSITY_CARD_SCALE[density]);
+}
+var DENSITY_BOARD_SCALE = {
+  compact: 0.95,
+  cozy: 1,
+  comfortable: 1.25
+};
+function cardScaleForZoom(zoom) {
+  const clamped = Math.max(0, Math.min(100, zoom));
+  return CARD_SCALE_RANGE.min + clamped / 100 * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);
+}
+function cardMinWidthForZoom(zoom) {
+  return Math.round(BASE_CARD_WIDTH * cardScaleForZoom(zoom));
+}
+function isLayout(value) {
+  return DATA_VIEWS_LAYOUTS.includes(value);
+}
+function isDensity(value) {
+  return DENSITIES.includes(value);
+}
+function readStoredDensity() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(DENSITY_STORAGE_KEY);
+    return isDensity(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function pinLayout(layout, available) {
+  if (layout === "cards") return available.canUseCards ? "cards" : "table";
+  if (layout === "list") return available.canUseList ? "list" : "table";
+  if (layout === "board") return available.canUseBoard ? "board" : "table";
+  return "table";
+}
+function readStoredLayout() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(LAYOUT_STORAGE_KEY);
+    return isLayout(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStored(key, value) {
+  try {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function DataViewsLayoutProvider({
+  canUseCards = false,
+  canUseList = false,
+  canUseBoard = false,
+  defaultLayout = "table",
+  viewLayout,
+  ignoreStoredLayout = false,
+  children
+}) {
+  const availability = { canUseCards, canUseList, canUseBoard };
+  const [layout, setLayoutState] = useState(
+    () => pinLayout(
+      viewLayout ?? (ignoreStoredLayout ? void 0 : readStoredLayout()) ?? defaultLayout,
+      availability
+    )
+  );
+  const [density, setDensityState] = useState(
+    () => (ignoreStoredLayout ? void 0 : readStoredDensity()) ?? "cozy"
+  );
+  const [zoom, setZoom] = useState(DEFAULT_ZOOM);
+  useEffect(() => {
+    if (viewLayout) setLayoutState(pinLayout(viewLayout, availability));
+  }, [viewLayout]);
+  const effective = pinLayout(layout, availability);
+  const value = useMemo(
+    () => ({
+      layout: effective,
+      setLayout: (next) => {
+        const pinned = pinLayout(next, availability);
+        setLayoutState(pinned);
+        if (!ignoreStoredLayout) writeStored(LAYOUT_STORAGE_KEY, pinned);
+      },
+      density,
+      setDensity: (next) => {
+        setDensityState(next);
+        if (!ignoreStoredLayout) writeStored(DENSITY_STORAGE_KEY, next);
+      },
+      canUseCards,
+      canUseList,
+      canUseBoard,
+      zoom,
+      setZoom
+    }),
+    [effective, density, canUseCards, canUseList, canUseBoard, zoom]
+  );
+  return /* @__PURE__ */ jsx(DataViewsLayoutContext.Provider, { value, children });
+}
+function useDataViewsLayout() {
+  const ctx = useContext(DataViewsLayoutContext);
+  if (!ctx) {
+    throw new Error("useDataViewsLayout must be used within a DataViewsLayoutProvider");
+  }
+  return ctx;
+}
+function DataViewsZoomSlider({ testIdPrefix }) {
+  const { layout, zoom, setZoom } = useDataViewsLayout();
+  const copy = useDataViewsCopy();
+  if (layout !== "cards" && layout !== "board") return null;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: { xs: "none", sm: "flex" },
+        alignItems: "center",
+        gap: 1,
+        color: "text.secondary"
+      },
+      children: [
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: 14 } }),
+        /* @__PURE__ */ jsx(Box, { sx: { width: 88, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+          Slider,
+          {
+            size: "sm",
+            showValue: false,
+            value: zoom,
+            min: 0,
+            max: 100,
+            step: 5,
+            onChange: (_event, next) => setZoom(Array.isArray(next) ? next[0] ?? 0 : next),
+            "aria-label": copy.display.cardZoom,
+            "data-testid": `${testIdPrefix}-card-zoom`
+          }
+        ) }),
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: 20 } })
+      ]
+    }
+  );
+}
+
+export {
+  DENSITY_ROW_PADDING,
+  DENSITY_CARD_SCALE,
+  cardTargetWidthFor,
+  DENSITY_BOARD_SCALE,
+  cardScaleForZoom,
+  cardMinWidthForZoom,
+  DataViewsLayoutProvider,
+  useDataViewsLayout,
+  DataViewsZoomSlider
+};
+//# sourceMappingURL=chunk-4EGKGOV2.js.map

package/dist/chunk-4EGKGOV2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-layout-context.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from \"react\";\n\nimport GridViewOutlinedIcon from \"@mui/icons-material/GridViewOutlined\";\n\nimport { Slider } from \"../../form/Slider\";\nimport { Box } from \"../../../mui/Box\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { DATA_VIEWS_LAYOUTS, type DataViewsLayout } from \"./data-views-types\";\n\n/**\n * The DataViews layout (view type): the dense \"Tabela\" grid, the \"Grade\" of\n * cards, the \"Lista\" of full-width rows, or the \"Quadro\" board of state columns.\n * Shared across the toolbar (the toggle) and the body (the selector) via context\n * so a single source of truth drives what renders — each layout only appears\n * when the table opts into it (`renderCard` for the grade, `renderListRow` for\n * the lista, `board` + `renderCard` for the quadro).\n */\nexport type { DataViewsLayout };\n\ninterface DataViewsLayoutValue {\n  layout: DataViewsLayout;\n  setLayout: (layout: DataViewsLayout) => void;\n  /** How much air each record gets — see {@link DataViewsDensity}. */\n  density: DataViewsDensity;\n  setDensity: (density: DataViewsDensity) => void;\n  /** Whether the cards layout is available (a `renderCard` was supplied). */\n  canUseCards: boolean;\n  /** Whether the list layout is available (a `renderListRow` was supplied). */\n  canUseList: boolean;\n  /** Whether the board layout is available (a `board` config AND a `renderCard`). */\n  canUseBoard: boolean;\n  /** Card-size zoom (0–100); drives the card grid's min column width. */\n  zoom: number;\n  setZoom: (zoom: number) => void;\n}\n\nconst DataViewsLayoutContext = createContext<DataViewsLayoutValue | null>(null);\n\n/** Default card zoom (0–100). */\nconst DEFAULT_ZOOM = 35;\n/** The card's width in px at scale 1 — the zoom slider multiplies this. */\nconst BASE_CARD_WIDTH = 180;\n/** The size multiplier the zoom slider spans (0.75× to 2×). */\nconst CARD_SCALE_RANGE = { min: 0.75, max: 2 } as const;\n\n/**\n * Where the user's layout preference is remembered. ONE key for every DataViews\n * table in the app, on purpose: picking \"Grade\" on Produtos is a statement about\n * how this operator likes to read lists, not about that one screen. Every other\n * screen that CAN render cards then opens in cards, and one that cannot falls\n * back without forgetting the preference.\n */\nconst LAYOUT_STORAGE_KEY = \"dataviews:layout\";\n\n/**\n * The density preference, remembered app-wide for the same reason as the layout:\n * an operator who wants tight rows wants them on every list, not on one.\n */\nconst DENSITY_STORAGE_KEY = \"dataviews:density\";\n\n/**\n * How much room each record gets. It means different things per layout, and\n * that is the point — one control, phrased in the terms of what is on screen:\n *\n * - table / list → row height (\"Baixa / Média / Alta\")\n * - cards        → how many fit per row (\"Muitos / Médio / Poucos\")\n *\n * The board is unaffected: its cards are already sized by the zoom slider.\n */\nexport type DataViewsDensity = \"compact\" | \"cozy\" | \"comfortable\";\n\n/** Every density this build knows — the guard's single source. */\nconst DENSITIES: readonly DataViewsDensity[] = [\"compact\", \"cozy\", \"comfortable\"];\n\n/** Vertical padding (theme spacing units) per density, for a table or list row. */\nexport const DENSITY_ROW_PADDING: Record<DataViewsDensity, number> = {\n  compact: 0.25,\n  cozy: 0.75,\n  comfortable: 1.5,\n};\n\n/**\n * The card WIDTH each density aims for, as a multiple of the base card width.\n *\n * Density used to cap the column COUNT, with a track floor of\n * `max(baseWidth, 100% / count)`. That base is a constant, so wherever it won\n * the arithmetic every density produced an identical track — \"Muitos\" and\n * \"Medio\" both drew 3 cards of 279px at md — and where the percentage won\n * instead, on a wide screen, the count was pinned and each card grew to a share\n * of the viewport: ~430px of card holding one chip and two lines of text.\n *\n * One width per density fixes both, because the number `auto-fill` divides by\n * now differs per density at every size. The spread is chosen so the three land\n * on DIFFERENT column counts across the range rather than by eye — 4/3/2 at md,\n * 6/4/3 at lg, 7/5/4 at xl, 13/9/8 at 2560.\n */\nexport const DENSITY_CARD_SCALE: Record<DataViewsDensity, number> = {\n  compact: 0.84,\n  cozy: 1.15,\n  comfortable: 1.4,\n};\n\n/** The width a card aims for: the base width, scaled by zoom, then by density. */\nexport function cardTargetWidthFor(zoom: number, density: DataViewsDensity): number {\n  return Math.round(cardMinWidthForZoom(zoom) * DENSITY_CARD_SCALE[density]);\n}\n\n/**\n * The BOARD's column-width multiplier per density.\n *\n * Density means \"how much air a record gets\", and on a board that is the column\n * width — narrow columns fit more etapas on screen, wide ones give each card\n * room to be read. Without this the board was the one layout the Exibição tab\n * offered nothing for: the format tile switched to Quadro and the whole density\n * section vanished, which reads as a control that broke rather than one that\n * does not apply.\n *\n * The spread is deliberately narrower than the card grid's. A board column has\n * a hard floor (`MIN_COLUMN_WIDTH` — a card below it stops being readable), so\n * a multiplier that undershoots it buys nothing and makes \"Estreita\" a tile\n * that does nothing on a phone.\n */\nexport const DENSITY_BOARD_SCALE: Record<DataViewsDensity, number> = {\n  compact: 0.95,\n  cozy: 1,\n  comfortable: 1.25,\n};\n\n/**\n * Map the 0–100 zoom to the card SIZE multiplier. This is the single knob: the\n * card's width is {@link BASE_CARD_WIDTH} × scale and its padding + typography\n * scale by the same factor, so the whole card grows together (scale 2 → twice\n * the size, proportion preserved by the aspect ratio). Passed to a card via\n * `DataViewCardSelection.scale`.\n */\nexport function cardScaleForZoom(zoom: number): number {\n  const clamped = Math.max(0, Math.min(100, zoom));\n  return CARD_SCALE_RANGE.min + (clamped / 100) * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);\n}\n\n/** The card grid's min column width in px = base width × the zoom size multiplier. */\nexport function cardMinWidthForZoom(zoom: number): number {\n  return Math.round(BASE_CARD_WIDTH * cardScaleForZoom(zoom));\n}\n\n/** Which layouts this table can actually render. */\ninterface LayoutAvailability {\n  canUseCards: boolean;\n  canUseList: boolean;\n  canUseBoard: boolean;\n}\n\n/** Is this a layout string this build knows? Guards whatever is in storage. */\nfunction isLayout(value: unknown): value is DataViewsLayout {\n  return DATA_VIEWS_LAYOUTS.includes(value as DataViewsLayout);\n}\n\n/** Is this a density this build knows? Guards whatever is in storage. */\nfunction isDensity(value: unknown): value is DataViewsDensity {\n  return DENSITIES.includes(value as DataViewsDensity);\n}\n\n/** The remembered density, or undefined (no window, no value, junk). */\nfunction readStoredDensity(): DataViewsDensity | undefined {\n  try {\n    if (typeof window === \"undefined\") return undefined;\n    const stored = window.localStorage.getItem(DENSITY_STORAGE_KEY);\n    return isDensity(stored) ? stored : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * Pin a layout to one this table can render. \"Tabela\" is always available, so it\n * is the floor: a page with no `renderCard` never renders a cards body, one with\n * no `renderListRow` never renders a list, and one with no `board` config never\n * renders a board — whatever is stored, saved in a view, or requested.\n */\nfunction pinLayout(layout: DataViewsLayout, available: LayoutAvailability): DataViewsLayout {\n  if (layout === \"cards\") return available.canUseCards ? \"cards\" : \"table\";\n  if (layout === \"list\") return available.canUseList ? \"list\" : \"table\";\n  if (layout === \"board\") return available.canUseBoard ? \"board\" : \"table\";\n  return \"table\";\n}\n\n/** The stored cross-screen preference, or undefined (no window, no value, junk). */\nfunction readStoredLayout(): DataViewsLayout | undefined {\n  // Guarded rather than assumed: this module is also imported in Node (tests,\n  // any SSR host), and a `localStorage` access can throw outright under a\n  // restrictive privacy setting — a thrown read must not take the grid with it.\n  try {\n    if (typeof window === \"undefined\") return undefined;\n    const stored = window.localStorage.getItem(LAYOUT_STORAGE_KEY);\n    return isLayout(stored) ? stored : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/** Remember a preference for every other screen. A failed write is not an error. */\nfunction writeStored(key: string, value: string): void {\n  try {\n    if (typeof window === \"undefined\") return;\n    window.localStorage.setItem(key, value);\n  } catch {\n    // Private mode / quota / disabled storage: the preference simply does not\n    // survive the session. Nothing about the current view depends on it.\n  }\n}\n\ninterface LayoutProviderProps extends Partial<LayoutAvailability> {\n  /** Which layout to show first when the user has expressed no preference. */\n  defaultLayout?: DataViewsLayout;\n  /**\n   * The layout an APPLIED SAVED VIEW pins, when it stored one. It wins over the\n   * remembered preference for as long as that view is applied — the view is a\n   * snapshot someone chose to keep — but it does NOT overwrite the preference:\n   * only the toggle does that, because only the toggle is the user saying so.\n   */\n  viewLayout?: DataViewsLayout;\n  /**\n   * Ignore — and stop writing — the remembered cross-screen preference, making\n   * `defaultLayout` authoritative for this table.\n   *\n   * For a table that exists to SHOW a particular layout rather than to be\n   * browsed: a Storybook story called \"Board\", a docs example, a screenshot\n   * harness. Without it the remembered preference wins, so opening \"Board\"\n   * after having clicked Tabela anywhere renders a table — the demonstration\n   * silently showing the wrong thing, and a shared link doing it for everyone\n   * whose preference differs.\n   *\n   * A real screen leaves this off: remembering how someone likes to read\n   * lists is the point.\n   */\n  ignoreStoredLayout?: boolean;\n  children: ReactNode;\n}\n\n/**\n * Provides the view-type state, seeded from (in order) the applied saved view's\n * layout, the user's remembered cross-screen preference, then `defaultLayout` —\n * each pinned to what this table can actually render.\n */\nexport function DataViewsLayoutProvider({\n  canUseCards = false,\n  canUseList = false,\n  canUseBoard = false,\n  defaultLayout = \"table\",\n  viewLayout,\n  ignoreStoredLayout = false,\n  children,\n}: LayoutProviderProps): React.JSX.Element {\n  const availability = { canUseCards, canUseList, canUseBoard };\n  const [layout, setLayoutState] = useState<DataViewsLayout>(() =>\n    pinLayout(\n      viewLayout ?? (ignoreStoredLayout ? undefined : readStoredLayout()) ?? defaultLayout,\n      availability,\n    ),\n  );\n  const [density, setDensityState] = useState<DataViewsDensity>(\n    () => (ignoreStoredLayout ? undefined : readStoredDensity()) ?? \"cozy\",\n  );\n  const [zoom, setZoom] = useState(DEFAULT_ZOOM);\n  // A newly applied view carrying a layout switches to it (its reference-change\n  // is the signal, exactly as `appliedState` works for the filters).\n  useEffect(() => {\n    if (viewLayout) setLayoutState(pinLayout(viewLayout, availability));\n    // Availability is derived from props that do not change for a mounted table.\n  }, [viewLayout]);\n  // Pin again on read: `canUseCards`/`canUseBoard` can flip for a mounted table\n  // (a page that supplies `renderCard` only once its card data has loaded), and\n  // a stale \"cards\" would otherwise render a cards body with no renderer.\n  const effective = pinLayout(layout, availability);\n\n  const value = useMemo<DataViewsLayoutValue>(\n    () => ({\n      layout: effective,\n      setLayout: (next: DataViewsLayout) => {\n        const pinned = pinLayout(next, availability);\n        setLayoutState(pinned);\n        // Remember the user's own choice across every screen — see LAYOUT_STORAGE_KEY.\n        // A table pinned to a layout does not write: it would teach the\n        // preference a value the operator never chose.\n        if (!ignoreStoredLayout) writeStored(LAYOUT_STORAGE_KEY, pinned);\n      },\n      density,\n      setDensity: (next: DataViewsDensity) => {\n        setDensityState(next);\n        if (!ignoreStoredLayout) writeStored(DENSITY_STORAGE_KEY, next);\n      },\n      canUseCards,\n      canUseList,\n      canUseBoard,\n      zoom,\n      setZoom,\n    }),\n    [effective, density, canUseCards, canUseList, canUseBoard, zoom],\n  );\n  return <DataViewsLayoutContext.Provider value={value}>{children}</DataViewsLayoutContext.Provider>;\n}\n\n/** Read the current DataViews layout. Throws outside a provider. */\nexport function useDataViewsLayout(): DataViewsLayoutValue {\n  const ctx = useContext(DataViewsLayoutContext);\n  if (!ctx) {\n    throw new Error(\"useDataViewsLayout must be used within a DataViewsLayoutProvider\");\n  }\n  return ctx;\n}\n\n/**\n * Card-size slider for the toolbar — shown in the CARD-BASED layouts (\"Grade\"\n * and \"Quadro\"), mirroring the tabwoah view-selector's zoom. The board reuses\n * the same `renderCard`, so the same knob scales both.\n *\n * Deliberately ABSENT in \"Lista\" and \"Tabela\" (FUT-733): a list row is\n * full-width and sized by its content, so a card-size multiplier has nothing to\n * act on — a slider that moved and changed nothing would be worse than none.\n */\nexport function DataViewsZoomSlider({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Element | null {\n  const { layout, zoom, setZoom } = useDataViewsLayout();\n  const copy = useDataViewsCopy();\n  if (layout !== \"cards\" && layout !== \"board\") return null;\n  return (\n    <Box\n      sx={{\n        display: { xs: \"none\", sm: \"flex\" },\n        alignItems: \"center\",\n        gap: 1,\n        color: \"text.secondary\",\n      }}\n    >\n      <GridViewOutlinedIcon sx={{ fontSize: 14 }} />\n      <Box sx={{ width: 88, display: \"flex\", alignItems: \"center\" }}>\n        <Slider\n          size=\"sm\"\n          showValue={false}\n          value={zoom}\n          min={0}\n          max={100}\n          step={5}\n          onChange={(_event, next) => setZoom(Array.isArray(next) ? (next[0] ?? 0) : next)}\n          aria-label={copy.display.cardZoom}\n          data-testid={`${testIdPrefix}-card-zoom`}\n        />\n      </Box>\n      <GridViewOutlinedIcon sx={{ fontSize: 20 }} />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-4GMSUI77.js

@@ -0,0 +1,26 @@
+// src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx
+import { alpha, Paper, useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var AddressSuggestionsPaper = (props) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      ...props,
+      elevation: 8,
+      "data-testid": "address-suggestions-dropdown",
+      sx: {
+        mt: 1,
+        background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
+        backdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "blur(20px)",
+        border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
+      }
+    }
+  );
+};
+
+export {
+  AddressSuggestionsPaper
+};
+//# sourceMappingURL=chunk-4GMSUI77.js.map

package/dist/chunk-4GMSUI77.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx"],"sourcesContent":["import type { PaperProps } from '@mui/material';\nimport { alpha, Paper, useTheme } from '@mui/material';\nimport type { FC } from 'react';\nimport React from 'react';\n\n// The dropdown surface, frosted to match the glass field.\nexport const AddressSuggestionsPaper: FC<PaperProps> = (props) => {\n  const theme = useTheme();\n\n  return (\n    <Paper\n      {...props}\n      elevation={8}\n      data-testid=\"address-suggestions-dropdown\"\n      sx={{\n        mt: 1,\n        background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n        backdropFilter: 'blur(20px)',\n        WebkitBackdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n      }}\n    />\n  );\n};\n"],"mappings":";AACA,SAAS,OAAO,OAAO,gBAAgB;AASnC;AAJG,IAAM,0BAA0C,CAAC,UAAU;AAChE,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC;AAAA,QACrI,gBAAgB;AAAA,QAChB,sBAAsB;AAAA,QACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AAAA,MACzD;AAAA;AAAA,EACF;AAEJ;","names":[]}