@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-3UIDKLML.js

@@ -0,0 +1,79 @@
+import {
+  BOUNCE,
+  FADE_IN_SCALE,
+  GLOW_PULSE,
+  PULSE
+} from "./chunk-PYC4CWCQ.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Badge/Badge.animations.ts
+import { keyframes } from "@mui/material/styles/index.js";
+var pulseAnimation = keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(${PULSE.scale});
+    opacity: ${PULSE.opacity};
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+var bounceAnimation = (theme) => keyframes`
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0) scale(1);
+  }
+  40% {
+    transform: translateY(${rem(theme, -BOUNCE.lift)}) scale(${BOUNCE.scale});
+  }
+  60% {
+    transform: translateY(${rem(theme, -BOUNCE.secondLift)}) scale(${BOUNCE.secondScale});
+  }
+`;
+var shimmerAnimation = (theme) => keyframes`
+  0% {
+    background-position: ${rem(theme, -1e3)} 0;
+  }
+  100% {
+    background-position: ${rem(theme, 1e3)} 0;
+  }
+`;
+var fadeInScaleAnimation = keyframes`
+  0% {
+    opacity: 0;
+    transform: scale(${FADE_IN_SCALE.from});
+  }
+  50% {
+    transform: scale(${FADE_IN_SCALE.overshoot});
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+var glowPulseAnimation = (theme) => keyframes`
+  0% {
+    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.fromBlur, GLOW_PULSE.fromSpread)} rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
+  }
+  50% {
+    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.toBlur, GLOW_PULSE.toSpread)} rgba(var(--glow-color), ${GLOW_PULSE.toAlpha});
+  }
+  100% {
+    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.fromBlur, GLOW_PULSE.fromSpread)} rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});
+  }
+`;
+
+export {
+  pulseAnimation,
+  bounceAnimation,
+  shimmerAnimation,
+  fadeInScaleAnimation,
+  glowPulseAnimation
+};
+//# sourceMappingURL=chunk-3UIDKLML.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/Badge.animations.ts"],"sourcesContent":["import { keyframes } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\n\nimport { rem, rems } from '../../../tokens/relative';\n\nimport { BOUNCE, FADE_IN_SCALE, GLOW_PULSE, PULSE } from './Badge.metrics';\n\nexport const pulseAnimation = keyframes`\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  70% {\n    transform: scale(${PULSE.scale});\n    opacity: ${PULSE.opacity};\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\n// Define bounce animation\nexport const bounceAnimation = (theme: Theme) => keyframes`\n  0%, 20%, 50%, 80%, 100% {\n    transform: translateY(0) scale(1);\n  }\n  40% {\n    transform: translateY(${rem(theme, -BOUNCE.lift)}) scale(${BOUNCE.scale});\n  }\n  60% {\n    transform: translateY(${rem(theme, -BOUNCE.secondLift)}) scale(${BOUNCE.secondScale});\n  }\n`;\n\n// Define shimmer animation\nexport const shimmerAnimation = (theme: Theme) => keyframes`\n  0% {\n    background-position: ${rem(theme, -1000)} 0;\n  }\n  100% {\n    background-position: ${rem(theme, 1000)} 0;\n  }\n`;\n\n// Define fade in animation with scale\nexport const fadeInScaleAnimation = keyframes`\n  0% {\n    opacity: 0;\n    transform: scale(${FADE_IN_SCALE.from});\n  }\n  50% {\n    transform: scale(${FADE_IN_SCALE.overshoot});\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n`;\n\n// Define glow pulse animation\nexport const glowPulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.fromBlur, GLOW_PULSE.fromSpread)} rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});\n  }\n  50% {\n    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.toBlur, GLOW_PULSE.toSpread)} rgba(var(--glow-color), ${GLOW_PULSE.toAlpha});\n  }\n  100% {\n    box-shadow: 0 0 ${rems(theme, GLOW_PULSE.fromBlur, GLOW_PULSE.fromSpread)} rgba(var(--glow-color), ${GLOW_PULSE.fromAlpha});\n  }\n`;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,iBAAiB;AAOnB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAMP,MAAM,KAAK;AAAA,eACnB,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASrB,IAAM,kBAAkB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKrB,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,WAAW,OAAO,KAAK;AAAA;AAAA;AAAA,4BAG/C,IAAI,OAAO,CAAC,OAAO,UAAU,CAAC,WAAW,OAAO,WAAW;AAAA;AAAA;AAKhF,IAAM,mBAAmB,CAAC,UAAiB;AAAA;AAAA,2BAEvB,IAAI,OAAO,IAAK,CAAC;AAAA;AAAA;AAAA,2BAGjB,IAAI,OAAO,GAAI,CAAC;AAAA;AAAA;AAKpC,IAAM,uBAAuB;AAAA;AAAA;AAAA,uBAGb,cAAc,IAAI;AAAA;AAAA;AAAA,uBAGlB,cAAc,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvC,IAAM,qBAAqB,CAAC,UAAiB;AAAA;AAAA,sBAE9B,KAAK,OAAO,WAAW,UAAU,WAAW,UAAU,CAAC,4BAA4B,WAAW,SAAS;AAAA;AAAA;AAAA,sBAGvG,KAAK,OAAO,WAAW,QAAQ,WAAW,QAAQ,CAAC,4BAA4B,WAAW,OAAO;AAAA;AAAA;AAAA,sBAGjG,KAAK,OAAO,WAAW,UAAU,WAAW,UAAU,CAAC,4BAA4B,WAAW,SAAS;AAAA;AAAA;","names":[]}

package/dist/chunk-4B5XUQQS.js

@@ -0,0 +1,38 @@
+import {
+  AddressFallbackField
+} from "./chunk-TXEN3QJ4.js";
+import {
+  AddressAutocompleteField
+} from "./chunk-7GHYCQCJ.js";
+import {
+  useAddressAutocomplete
+} from "./chunk-WC3W36AM.js";
+import {
+  resolveAddressProps
+} from "./chunk-MTGEJRE4.js";
+
+// src/components/form/AddressAutocomplete/AddressAutocomplete.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import { jsx } from "react/jsx-runtime";
+var AddressAutocomplete = (componentProps) => {
+  const resolved = resolveAddressProps(componentProps);
+  const { defaultValue, googleMapsApiKey, restrictions, onSelect, icon = /* @__PURE__ */ jsx(LocationIcon, {}) } = resolved;
+  const fieldProps = { ...resolved, icon };
+  const state = useAddressAutocomplete({
+    defaultValue,
+    googleMapsApiKey,
+    restrictions,
+    onSelect
+  });
+  if (!state.isLoaded || state.mapsError) {
+    return /* @__PURE__ */ jsx(AddressFallbackField, { ...fieldProps, mapsError: state.mapsError });
+  }
+  return /* @__PURE__ */ jsx(AddressAutocompleteField, { ...fieldProps, ...state });
+};
+var AddressAutocomplete_default = AddressAutocomplete;
+
+export {
+  AddressAutocomplete,
+  AddressAutocomplete_default
+};
+//# sourceMappingURL=chunk-4B5XUQQS.js.map

package/dist/chunk-4CHROSWR.js

@@ -0,0 +1,174 @@
+import {
+  bounceKeyframes
+} from "./chunk-X6AIKCAV.js";
+import {
+  getScaleDistance
+} from "./chunk-TUBCN4DJ.js";
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/MapPreview/MapDecorations.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+import NavigationIcon from "@mui/icons-material/Navigation";
+import PlaceIcon from "@mui/icons-material/Place";
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MapRoads = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: "20%", left: "15%", width: "70%", height: "60%", opacity: 0.2 }, children: /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", style: { position: "absolute" }, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 10,50 Q 30,30 50,50 T 90,50",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "2",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 50,10 L 50,90",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1.5",
+        fill: "none",
+        opacity: "0.3"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 20,30 L 80,70",
+        stroke: theme.palette.text.secondary,
+        strokeWidth: "1",
+        fill: "none",
+        opacity: "0.2"
+      }
+    )
+  ] }) });
+};
+var DecorativePin = ({ top, left }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top, left, opacity: 0.6 }, children: /* @__PURE__ */ jsx(PlaceIcon, { sx: { fontSize: rem(theme, 20), color: theme.palette.primary.main } }) });
+};
+var MapDecorativePins = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DecorativePin, { top: "30%", left: "25%" }),
+  /* @__PURE__ */ jsx(DecorativePin, { top: "65%", left: "70%" })
+] });
+var MapCentreMarker = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": "map-marker",
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -100%)",
+        zIndex: 2,
+        filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`
+      },
+      children: /* @__PURE__ */ jsx(
+        LocationIcon,
+        {
+          sx: {
+            fontSize: rem(theme, 36),
+            color: theme.palette.error.main,
+            animation: "bounce 2s infinite",
+            "@keyframes bounce": bounceKeyframes(theme)
+          }
+        }
+      )
+    }
+  );
+};
+var MapScaleBar = ({ zoom }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        bottom: theme.spacing(2),
+        right: theme.spacing(2),
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        padding: theme.spacing(0.5, 1),
+        background: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: theme.shape.borderRadius,
+        fontSize: rem(theme, 12),
+        color: theme.palette.text.secondary
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              width: rem(theme, 40),
+              height: rem(theme, 2),
+              background: theme.palette.text.secondary,
+              position: "relative",
+              // The end caps that make the bar read as a measurement.
+              "&::before, &::after": {
+                content: '""',
+                position: "absolute",
+                width: rem(theme, 2),
+                height: rem(theme, 6),
+                background: theme.palette.text.secondary
+              },
+              "&::before": { left: 0, top: rem(theme, -2) },
+              "&::after": { right: 0, top: rem(theme, -2) }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", children: getScaleDistance(zoom) })
+      ]
+    }
+  );
+};
+var MapCompass = () => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: theme.spacing(2),
+        left: theme.spacing(2),
+        width: rem(theme, 40),
+        height: rem(theme, 40),
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: "50%",
+        boxShadow: theme.shadows[2]
+      },
+      children: /* @__PURE__ */ jsx(
+        NavigationIcon,
+        {
+          sx: { fontSize: rem(theme, 24), color: theme.palette.primary.main, transform: "rotate(-45deg)" }
+        }
+      )
+    }
+  );
+};
+
+export {
+  MapRoads,
+  MapDecorativePins,
+  MapCentreMarker,
+  MapScaleBar,
+  MapCompass
+};
+//# sourceMappingURL=chunk-4CHROSWR.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapDecorations.tsx"],"sourcesContent":["import LocationIcon from '@mui/icons-material/LocationOn';\nimport NavigationIcon from '@mui/icons-material/Navigation';\nimport PlaceIcon from '@mui/icons-material/Place';\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { getScaleDistance } from './mapProjection';\nimport { bounceKeyframes } from './mapSurface';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\n// Decorative only: these give the mock surface something to look like without\n// standing in for real map data.\nexport const MapRoads: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'absolute', top: '20%', left: '15%', width: '70%', height: '60%', opacity: 0.2 }}>\n      <svg width=\"100%\" height=\"100%\" style={{ position: 'absolute' }}>\n        <path\n          d=\"M 10,50 Q 30,30 50,50 T 90,50\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"2\"\n          fill=\"none\"\n          opacity=\"0.3\"\n        />\n        <path\n          d=\"M 50,10 L 50,90\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"1.5\"\n          fill=\"none\"\n          opacity=\"0.3\"\n        />\n        <path\n          d=\"M 20,30 L 80,70\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"1\"\n          fill=\"none\"\n          opacity=\"0.2\"\n        />\n      </svg>\n    </Box>\n  );\n};\n\nconst DecorativePin: FC<{ top: string; left: string }> = ({ top, left }) => {\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'absolute', top, left, opacity: 0.6 }}>\n      <PlaceIcon sx={{ fontSize: rem(theme, 20), color: theme.palette.primary.main }} />\n    </Box>\n  );\n};\n\nexport const MapDecorativePins: FC = () => (\n  <>\n    <DecorativePin top=\"30%\" left=\"25%\" />\n    <DecorativePin top=\"65%\" left=\"70%\" />\n  </>\n);\n\nexport const MapCentreMarker: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid=\"map-marker\"\n      sx={{\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -100%)',\n        zIndex: 2,\n        filter: `drop-shadow(${rems(theme, 0, 2, 4)} ${shadowInk(theme, 0.3)})`,\n      }}\n    >\n      <LocationIcon\n        sx={{\n          fontSize: rem(theme, 36),\n          color: theme.palette.error.main,\n          animation: 'bounce 2s infinite',\n          '@keyframes bounce': bounceKeyframes(theme),\n        }}\n      />\n    </Box>\n  );\n};\n\nexport const MapScaleBar: FC<{ zoom: number }> = ({ zoom }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        bottom: theme.spacing(2),\n        right: theme.spacing(2),\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.5,\n        padding: theme.spacing(0.5, 1),\n        background: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: theme.shape.borderRadius,\n        fontSize: rem(theme, 12),\n        color: theme.palette.text.secondary,\n      }}\n    >\n      <Box\n        sx={{\n          width: rem(theme, 40),\n          height: rem(theme, 2),\n          background: theme.palette.text.secondary,\n          position: 'relative',\n          // The end caps that make the bar read as a measurement.\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            width: rem(theme, 2),\n            height: rem(theme, 6),\n            background: theme.palette.text.secondary,\n          },\n          '&::before': { left: 0, top: rem(theme, -2) },\n          '&::after': { right: 0, top: rem(theme, -2) },\n        }}\n      />\n      <Typography variant=\"caption\">{getScaleDistance(zoom)}</Typography>\n    </Box>\n  );\n};\n\nexport const MapCompass: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        top: theme.spacing(2),\n        left: theme.spacing(2),\n        width: rem(theme, 40),\n        height: rem(theme, 40),\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        background: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: '50%',\n        boxShadow: theme.shadows[2],\n      }}\n    >\n      <NavigationIcon\n        sx={{ fontSize: rem(theme, 24), color: theme.palette.primary.main, transform: 'rotate(-45deg)' }}\n      />\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-4CXEWFKO.js

@@ -0,0 +1,120 @@
+import {
+  FleetBody
+} from "./chunk-DB2ZFZVW.js";
+import {
+  FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
+  FLEET_DEFAULT_STALE_AFTER_SECONDS,
+  FLEET_PANEL
+} from "./chunk-BTQZ3EX3.js";
+import {
+  useFleetMap
+} from "./chunk-ZCPSND5Y.js";
+import {
+  SR_ONLY_SX
+} from "./chunk-VY2BMSHN.js";
+import {
+  EmptyState
+} from "./chunk-HN3PZTUK.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/FleetMap/FleetMap.tsx
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultHeight = (theme) => rem(theme, 420);
+function FleetStatus({
+  announcement,
+  loading,
+  testId
+}) {
+  if (announcement === void 0) return null;
+  return /* @__PURE__ */ jsx(Box, { role: "status", "aria-live": "polite", "data-testid": `${testId}-status`, sx: SR_ONLY_SX, children: loading ? announcement : "" });
+}
+var FleetMap = React.memo(
+  ({
+    units,
+    copy,
+    // NO default. `undefined` is what tells the hook the caller does not own
+    // the selection; defaulting it to `null` here made every render look
+    // controlled and the uncontrolled path unreachable.
+    selectedId,
+    onSelect,
+    laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
+    staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,
+    height: heightProp,
+    loading = false,
+    className,
+    dataTestId
+  }) => {
+    const theme = useTheme();
+    const height = heightProp ?? defaultHeight(theme);
+    const testId = dataTestId || "fleet-map";
+    const headingId = React.useId();
+    const { ordered, active, centre, select, markers, onKeyDown } = useFleetMap(
+      units,
+      selectedId,
+      onSelect
+    );
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: "region",
+        "aria-labelledby": headingId,
+        className,
+        "data-testid": testId,
+        sx: { display: "flex", flexDirection: "column", gap: theme.spacing(FLEET_PANEL.gapUnits), minWidth: 0 },
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              id: headingId,
+              variant: "subtitle1",
+              component: "h2",
+              "data-testid": `${testId}-title`,
+              sx: { fontWeight: theme.typography.fontWeightMedium },
+              children: copy.title
+            }
+          ),
+          /* @__PURE__ */ jsx(FleetStatus, { announcement: copy.loading, loading, testId }),
+          !loading && ordered.length === 0 ? /* @__PURE__ */ jsx(
+            EmptyState,
+            {
+              variant: "minimal",
+              title: copy.emptyTitle,
+              description: copy.emptyDescription,
+              dataTestId: `${testId}-empty`
+            }
+          ) : /* @__PURE__ */ jsx(
+            FleetBody,
+            {
+              ordered,
+              centre,
+              markers,
+              select,
+              onKeyDown,
+              copy,
+              selectedId: active,
+              laggingAfterSeconds,
+              staleAfterSeconds,
+              height,
+              loading,
+              testId
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FleetMap.displayName = "FleetMap";
+var FleetMap_default = FleetMap;
+
+export {
+  FleetMap,
+  FleetMap_default
+};
+//# sourceMappingURL=chunk-4CXEWFKO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/FleetMap/FleetMap.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { SR_ONLY_SX } from '../../form/Label/Label.styles';\nimport { rem } from '../../../tokens/relative';\nimport { EmptyState } from '../EmptyState/EmptyState';\n\nimport { FleetBody } from './FleetBody';\nimport { useFleetMap } from './FleetMap.hooks';\nimport {\n  FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n  FLEET_DEFAULT_STALE_AFTER_SECONDS,\n  FLEET_PANEL,\n} from './FleetMap.metrics';\nimport type { FleetMapProps } from './FleetMap.types';\n\n/** The map's own default height, in design px. Overridable, and never a hardcoded viewport. */\nconst defaultHeight = (theme: Theme): string => rem(theme, 420);\n\n/**\n * The reload announcement, and nothing else.\n *\n * `aria-busy` marks the region stale for assistive technology but UTTERS\n * nothing, and the skeletons beside it are `aria-hidden` — so a screen-reader\n * user got silence while the roster reloaded. This is the utterance.\n *\n * Optional by design: the sentence is in the reader's language, which only the\n * caller knows, and inventing an English one in a component whose whole premise\n * is that every word arrives through `copy` would be the bug it exists to\n * avoid. No `copy.loading`, no region.\n *\n * ## The node outlives the text, and that is the whole trick\n *\n * A live region has to be in the DOM BEFORE its content changes; a screen\n * reader watches an existing region for mutations rather than announcing one\n * that appears already populated. Mounting region-and-text together in a single\n * commit is the classic silent case — it satisfies a DOM assertion while\n * announcing nothing. So the region mounts as soon as the caller offers the\n * copy and merely EMPTIES when idle, which is what `CepField`, `UploadButton`\n * and `DateRangePickerFields` all do.\n */\nfunction FleetStatus({\n  announcement,\n  loading,\n  testId,\n}: {\n  announcement: string | undefined;\n  loading: boolean;\n  testId: string;\n}): React.JSX.Element | null {\n  // No copy, no region at all — the caller has not asked for an announcement.\n  if (announcement === undefined) return null;\n  return (\n    <Box role=\"status\" aria-live=\"polite\" data-testid={`${testId}-status`} sx={SR_ONLY_SX}>\n      {loading ? announcement : ''}\n    </Box>\n  );\n}\n\n/**\n * FleetMap — where a set of tracked units is right now, as a map beside the\n * roster that reads it.\n *\n * Product-free by construction: it draws labelled dots with a freshness, and\n * every word — the heading, the three freshness states, how a duration and a\n * distance are written — arrives through {@link FleetMapProps.copy}. Couriers,\n * service vans and field engineers are all the same picture.\n *\n * ## Three decisions worth knowing before changing it\n *\n * **The roster is the accessible representation, not a sidebar.** A map is a\n * picture and a screen reader cannot read one, so the list carries the\n * information: everything a sighted user gets from a pin — who, how recently,\n * what they are carrying — is on the row. The map is a NAMED region rather than\n * an `aria-hidden` one, because its controls are focusable and hiding a\n * focusable subtree is the `aria-hidden-focus` violation.\n *\n * **Nothing here formats.** `lastSeen` and `accuracy` are functions on the copy\n * object, the same line `StatCard` holds for its `value`: a duration and a\n * distance are locale rules, and a component that wrote \"2 min ago\" would have\n * made English the only language it could ever render.\n *\n * **An empty fleet is an empty STATE, not an empty map.** A map with no pins is\n * indistinguishable from a map that failed to load, and the difference is the\n * whole question a dispatcher is asking.\n */\nexport const FleetMap: React.FC<FleetMapProps> = React.memo(\n  ({\n    units,\n    copy,\n    // NO default. `undefined` is what tells the hook the caller does not own\n    // the selection; defaulting it to `null` here made every render look\n    // controlled and the uncontrolled path unreachable.\n    selectedId,\n    onSelect,\n    laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,\n    staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,\n    height: heightProp,\n    loading = false,\n    className,\n    dataTestId,\n  }) => {\n    const theme = useTheme();\n    const height = heightProp ?? defaultHeight(theme);\n    const testId = dataTestId || 'fleet-map';\n    const headingId = React.useId();\n    const { ordered, active, centre, select, markers, onKeyDown } = useFleetMap(\n      units,\n      selectedId,\n      onSelect,\n    );\n\n    return (\n      <Box\n        role=\"region\"\n        aria-labelledby={headingId}\n        className={className}\n        data-testid={testId}\n        sx={{ display: 'flex', flexDirection: 'column', gap: theme.spacing(FLEET_PANEL.gapUnits), minWidth: 0 }}\n      >\n        <Typography\n          id={headingId}\n          variant=\"subtitle1\"\n          component=\"h2\"\n          data-testid={`${testId}-title`}\n          sx={{ fontWeight: theme.typography.fontWeightMedium }}\n        >\n          {copy.title}\n        </Typography>\n\n        <FleetStatus announcement={copy.loading} loading={loading} testId={testId} />\n\n        {!loading && ordered.length === 0 ? (\n          <EmptyState\n            variant=\"minimal\"\n            title={copy.emptyTitle}\n            description={copy.emptyDescription}\n            dataTestId={`${testId}-empty`}\n          />\n        ) : (\n          <FleetBody\n            ordered={ordered}\n            centre={centre}\n            markers={markers}\n            select={select}\n            onKeyDown={onKeyDown}\n            copy={copy}\n            selectedId={active}\n            laggingAfterSeconds={laggingAfterSeconds}\n            staleAfterSeconds={staleAfterSeconds}\n            height={height}\n            loading={loading}\n            testId={testId}\n          />\n        )}\n      </Box>\n    );\n  },\n);\n\nFleetMap.displayName = 'FleetMap';\n\nexport default FleetMap;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,SAAS,gBAA4B;AACrC,OAAO,WAAW;AAoDd,cA4DE,YA5DF;AApCJ,IAAM,gBAAgB,CAAC,UAAyB,IAAI,OAAO,GAAG;AAwB9D,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAI6B;AAE3B,MAAI,iBAAiB,OAAW,QAAO;AACvC,SACE,oBAAC,OAAI,MAAK,UAAS,aAAU,UAAS,eAAa,GAAG,MAAM,WAAW,IAAI,YACxE,oBAAU,eAAe,IAC5B;AAEJ;AA6BO,IAAM,WAAoC,MAAM;AAAA,EACrD,CAAC;AAAA,IACC;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,oBAAoB;AAAA,IACpB,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,QAAQ,SAAS;AACvB,UAAM,SAAS,cAAc,cAAc,KAAK;AAChD,UAAM,SAAS,cAAc;AAC7B,UAAM,YAAY,MAAM,MAAM;AAC9B,UAAM,EAAE,SAAS,QAAQ,QAAQ,QAAQ,SAAS,UAAU,IAAI;AAAA,MAC9D;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,mBAAiB;AAAA,QACjB;AAAA,QACA,eAAa;AAAA,QACb,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAM,QAAQ,YAAY,QAAQ,GAAG,UAAU,EAAE;AAAA,QAEtG;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,eAAa,GAAG,MAAM;AAAA,cACtB,IAAI,EAAE,YAAY,MAAM,WAAW,iBAAiB;AAAA,cAEnD,eAAK;AAAA;AAAA,UACR;AAAA,UAEA,oBAAC,eAAY,cAAc,KAAK,SAAS,SAAkB,QAAgB;AAAA,UAE1E,CAAC,WAAW,QAAQ,WAAW,IAC9B;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAO,KAAK;AAAA,cACZ,aAAa,KAAK;AAAA,cAClB,YAAY,GAAG,MAAM;AAAA;AAAA,UACvB,IAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,YAAY;AAAA,cACZ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAEvB,IAAO,mBAAQ;","names":[]}

package/dist/chunk-4JFL62K3.js

@@ -0,0 +1,223 @@
+import {
+  onTrackInk,
+  switchSx
+} from "./chunk-AUSUCZYR.js";
+import {
+  LABEL_GAP_UNITS,
+  SWITCH_ICON_SIZES,
+  TAP_TARGET_MIN
+} from "./chunk-D5SZXH7Q.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Switch/Switch.parts.tsx
+import Box from "@mui/material/Box/index.js";
+import FormHelperText from "@mui/material/FormHelperText/index.js";
+import MuiSwitch from "@mui/material/Switch/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StyledSwitch = styled(MuiSwitch, {
+  shouldForwardProp: (prop) => ![
+    "customVariant",
+    "customColor",
+    "customSize",
+    "glow",
+    "glass",
+    "gradient",
+    "trackWidth",
+    "trackHeight",
+    "onText",
+    "offText",
+    "loading",
+    "ripple",
+    "pulse"
+  ].includes(prop)
+})(({ theme, ...flags }) => ({ ...switchSx(theme, flags) }));
+var StyledLabelContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["labelPosition", "error"].includes(prop)
+})(({ theme, labelPosition, error }) => {
+  const stacked = labelPosition === "top" || labelPosition === "bottom";
+  return {
+    display: "flex",
+    alignItems: stacked ? "flex-start" : "center",
+    flexDirection: labelPosition === "top" ? "column" : labelPosition === "bottom" ? "column-reverse" : "row",
+    gap: theme.spacing(stacked ? LABEL_GAP_UNITS.stacked : LABEL_GAP_UNITS.beside),
+    width: "100%",
+    ...error && { "& .MuiTypography-root": { color: theme.palette.error.main } }
+  };
+});
+var LabelContainer = ({ labelPosition, error, children }) => /* @__PURE__ */ jsx(StyledLabelContainer, { labelPosition, error, children });
+var SwitchIcon = ({
+  icon,
+  shown,
+  animated,
+  size,
+  side,
+  onInk
+}) => {
+  const isOn = side === "on";
+  const translate = isOn ? "translate(-50%, -50%)" : "translate(50%, -50%)";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: "50%",
+        ...isOn ? { left: shown ? sxRem(4) : "50%" } : { right: shown ? sxRem(4) : "50%" },
+        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+        opacity: shown ? 1 : 0,
+        transform: `${translate} scale(${shown && animated ? 1 : 0.8})`,
+        pointerEvents: "none",
+        zIndex: 2,
+        color: isOn ? onInk : "text.secondary",
+        fontSize: sxRem(SWITCH_ICON_SIZES[size] ?? SWITCH_ICON_SIZES.md)
+      },
+      children: icon
+    }
+  );
+};
+var SwitchControl = ({
+  checked,
+  onChange,
+  onIcon,
+  offIcon,
+  animated,
+  size,
+  dataTestId,
+  switchRef,
+  inputId,
+  inputProps,
+  describedBy,
+  rest,
+  ...flags
+}) => {
+  const props = rest;
+  const theme = useTheme();
+  const onInk = onTrackInk(theme, flags);
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsx(
+      StyledSwitch,
+      {
+        ref: switchRef,
+        ...flags,
+        checked,
+        onChange,
+        disabled: Boolean(flags.loading) || props.disabled,
+        ...props,
+        inputProps: {
+          "aria-label": props["aria-label"],
+          "data-testid": dataTestId || "switch",
+          ...inputProps,
+          id: inputId,
+          "aria-describedby": describedBy
+        }
+      }
+    ),
+    onIcon && /* @__PURE__ */ jsx(
+      SwitchIcon,
+      {
+        icon: onIcon,
+        shown: Boolean(checked),
+        animated,
+        size,
+        side: "on",
+        onInk
+      }
+    ),
+    offIcon && /* @__PURE__ */ jsx(
+      SwitchIcon,
+      {
+        icon: offIcon,
+        shown: !checked,
+        animated,
+        size,
+        side: "off",
+        onInk
+      }
+    )
+  ] });
+};
+var SwitchHelper = ({ helperText, error, dataTestId, id }) => helperText ? /* @__PURE__ */ jsx(
+  FormHelperText,
+  {
+    id,
+    error,
+    sx: { mt: 1 },
+    "data-testid": dataTestId ? `${dataTestId}-helper` : "switch-helper",
+    children: helperText
+  }
+) : null;
+var SwitchLabel = ({ label, description, error, dataTestId, htmlFor, descriptionId, disabled }) => /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+  /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "label",
+      htmlFor,
+      variant: "body2",
+      fontWeight: 500,
+      color: error ? "error.main" : "text.primary",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        // The floor applies to the row the label shares with the control. A
+        // description already makes the row taller than 40px, so forcing it
+        // there would only add blank space.
+        ...description ? {} : { minHeight: sxRem(TAP_TARGET_MIN) },
+        // A disabled control's label toggles nothing, so it must not wear the
+        // cursor that says it does.
+        ...htmlFor && !disabled ? { cursor: "pointer" } : {}
+      },
+      "data-testid": dataTestId ? `${dataTestId}-label` : "switch-label",
+      children: label
+    }
+  ),
+  description && /* @__PURE__ */ jsx(
+    Typography,
+    {
+      id: descriptionId,
+      variant: "caption",
+      color: error ? "error.main" : "text.secondary",
+      sx: { display: "block", mt: 0.5 },
+      children: description
+    }
+  )
+] });
+var SwitchRow = ({
+  label,
+  description,
+  labelPosition,
+  error,
+  dataTestId,
+  htmlFor,
+  descriptionId,
+  disabled,
+  control
+}) => {
+  if (!label) return /* @__PURE__ */ jsx(Fragment, { children: control });
+  return /* @__PURE__ */ jsxs(LabelContainer, { labelPosition, error, children: [
+    labelPosition === "start" && control,
+    /* @__PURE__ */ jsx(
+      SwitchLabel,
+      {
+        label,
+        description,
+        error,
+        dataTestId,
+        htmlFor,
+        descriptionId,
+        disabled
+      }
+    ),
+    labelPosition !== "start" && control
+  ] });
+};
+
+export {
+  SwitchIcon,
+  SwitchControl,
+  SwitchHelper,
+  SwitchRow
+};
+//# sourceMappingURL=chunk-4JFL62K3.js.map