@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-7EQCZO56.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Command/Command.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { CommandProps } from './Command.types';\nimport { accentFor, rem } from '../../../tokens/scales';\n\ntype CommandVariant = NonNullable<CommandProps['variant']>;\ntype CommandColor = NonNullable<CommandProps['color']>;\ntype CommandSize = NonNullable<CommandProps['size']>;\n\nconst SIZE_MAP: Record<CommandSize, { width: number; fontPx: number }> = {\n  xs: { width: 400, fontPx: 12 },\n  sm: { width: 450, fontPx: 14 },\n  md: { width: 500, fontPx: 16 },\n  lg: { width: 550, fontPx: 18 },\n  xl: { width: 600, fontPx: 20 },\n};\n\n/** The paper's width and type for a size, both design px read through the type scale. */\nexport const commandSizeStyles = (theme: Theme, size: CommandSize) => {\n  const { width, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;\n  return { width: rem(theme, width), fontSize: rem(theme, fontPx) };\n};\n\nconst emphasisStyles = (\n  theme: Theme,\n  color: CommandColor,\n  glow: boolean,\n  pulse: boolean,\n): CSSObject => ({\n  ...(glow && {\n    boxShadow: `0 0 20px ${alpha(accentFor(theme, color).main, 0.4)}`,\n  }),\n  ...(pulse && {\n    animation: 'pulse 2s infinite',\n    '@keyframes pulse': {\n      '0%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },\n      '70%': { boxShadow: `0 0 0 10px ${alpha(accentFor(theme, color).main, 0)}` },\n      '100%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` },\n    },\n  }),\n});\n\nconst surfaceStyles = (\n  theme: Theme,\n  variant: CommandVariant,\n  color: CommandColor,\n): CSSObject => {\n  switch (variant) {\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,\n      };\n    case 'gradient':\n      return {\n        background: `linear-gradient(135deg, ${accentFor(theme, color).main}, ${accentFor(theme, color).dark})`,\n        color: accentFor(theme, color).contrastText,\n      };\n    case 'elevated':\n      return { boxShadow: theme.shadows[8] };\n    case 'minimal':\n      return { border: 'none', boxShadow: 'none' };\n    default:\n      return {};\n  }\n};\n\n/**\n * Every variant shares the same transition and the same optional glow/pulse; only\n * the surface — background, border, shadow — differs.\n */\nexport const commandPaperStyles = (\n  theme: Theme,\n  { variant, color, glow, pulse }: {\n    variant: CommandVariant;\n    color: CommandColor;\n    glow: boolean;\n    pulse: boolean;\n  },\n): CSSObject => ({\n  transition: theme.transitions.create(['all'], {\n    duration: theme.transitions.duration.standard,\n  }),\n  ...emphasisStyles(theme, color, glow, pulse),\n  ...surfaceStyles(theme, variant, color),\n});\n"],"mappings":";;;;;;;;AAAA,SAAS,aAAa;AAUtB,IAAM,WAAmE;AAAA,EACvE,IAAI,EAAE,OAAO,KAAK,QAAQ,GAAG;AAAA,EAC7B,IAAI,EAAE,OAAO,KAAK,QAAQ,GAAG;AAAA,EAC7B,IAAI,EAAE,OAAO,KAAK,QAAQ,GAAG;AAAA,EAC7B,IAAI,EAAE,OAAO,KAAK,QAAQ,GAAG;AAAA,EAC7B,IAAI,EAAE,OAAO,KAAK,QAAQ,GAAG;AAC/B;AAGO,IAAM,oBAAoB,CAAC,OAAc,SAAsB;AACpE,QAAM,EAAE,OAAO,OAAO,IAAI,SAAS,IAAI,KAAK,SAAS;AACrD,SAAO,EAAE,OAAO,IAAI,OAAO,KAAK,GAAG,UAAU,IAAI,OAAO,MAAM,EAAE;AAClE;AAEA,IAAM,iBAAiB,CACrB,OACA,OACA,MACA,WACe;AAAA,EACf,GAAI,QAAQ;AAAA,IACV,WAAW,YAAY,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,EACjE;AAAA,EACA,GAAI,SAAS;AAAA,IACX,WAAW;AAAA,IACX,oBAAoB;AAAA,MAClB,MAAM,EAAE,WAAW,WAAW,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG;AAAA,MACzE,OAAO,EAAE,WAAW,cAAc,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG;AAAA,MAC3E,QAAQ,EAAE,WAAW,WAAW,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG;AAAA,IAC3E;AAAA,EACF;AACF;AAEA,IAAM,gBAAgB,CACpB,OACA,SACA,UACc;AACd,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,QACL,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,QAC1D,gBAAgB;AAAA,QAChB,QAAQ,aAAa,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,MAC/D;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,YAAY,2BAA2B,UAAU,OAAO,KAAK,EAAE,IAAI,KAAK,UAAU,OAAO,KAAK,EAAE,IAAI;AAAA,QACpG,OAAO,UAAU,OAAO,KAAK,EAAE;AAAA,MACjC;AAAA,IACF,KAAK;AACH,aAAO,EAAE,WAAW,MAAM,QAAQ,CAAC,EAAE;AAAA,IACvC,KAAK;AACH,aAAO,EAAE,QAAQ,QAAQ,WAAW,OAAO;AAAA,IAC7C;AACE,aAAO,CAAC;AAAA,EACZ;AACF;AAMO,IAAM,qBAAqB,CAChC,OACA,EAAE,SAAS,OAAO,MAAM,MAAM,OAMf;AAAA,EACf,YAAY,MAAM,YAAY,OAAO,CAAC,KAAK,GAAG;AAAA,IAC5C,UAAU,MAAM,YAAY,SAAS;AAAA,EACvC,CAAC;AAAA,EACD,GAAG,eAAe,OAAO,OAAO,MAAM,KAAK;AAAA,EAC3C,GAAG,cAAc,OAAO,SAAS,KAAK;AACxC;","names":[]}

package/dist/chunk-7LIXQZBG.js

@@ -0,0 +1,193 @@
+import {
+  MenubarToolbar
+} from "./chunk-TTAP5XFX.js";
+import {
+  barStyles
+} from "./chunk-7DN4UXJ3.js";
+import {
+  useMenubarMenus
+} from "./chunk-42VH7N5L.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/Menubar/Menubar.tsx
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import AppBar from "@mui/material/AppBar/index.js";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  variant: "default",
+  size: "md",
+  color: "neutral",
+  orientation: "horizontal",
+  glow: false,
+  pulse: false,
+  glass: false,
+  gradient: false,
+  loading: false,
+  disabled: false,
+  sticky: false,
+  transparent: false,
+  blur: false,
+  elevation: 4,
+  fullWidth: true
+};
+var Menubar = (props) => {
+  const {
+    ariaLabel,
+    items,
+    variant,
+    size,
+    color,
+    orientation,
+    glow,
+    pulse,
+    glass,
+    gradient,
+    loading,
+    disabled,
+    className,
+    style,
+    logo,
+    endContent,
+    sticky,
+    transparent,
+    blur,
+    elevation,
+    fullWidth,
+    onClick,
+    onFocus,
+    onBlur,
+    "data-testid": dataTestId
+  } = withDefaults(props, DEFAULTS);
+  const theme = useTheme();
+  const { activeMenu, menuRefs, handleMenuOpen, handleMenuClose, handleItemClick } = useMenubarMenus(onClick);
+  const isVertical = orientation === "vertical";
+  const barSx = barStyles(theme, {
+    variant,
+    size,
+    color,
+    glow,
+    pulse,
+    glass,
+    gradient,
+    blur,
+    transparent,
+    elevation
+  });
+  const content = /* @__PURE__ */ jsx(
+    MenubarToolbar,
+    {
+      ariaLabel,
+      barSx,
+      items,
+      size,
+      orientation,
+      disabled,
+      loading,
+      logo,
+      endContent,
+      fullWidth,
+      activeMenu,
+      menuRefs,
+      onOpen: handleMenuOpen,
+      onActivate: handleItemClick,
+      onClose: handleMenuClose,
+      onFocus,
+      onBlur
+    }
+  );
+  if (isVertical) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className,
+        sx: {
+          ...style,
+          position: sticky ? "sticky" : "relative",
+          top: sticky ? 0 : "auto",
+          zIndex: theme.zIndex.appBar
+        },
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    AppBar,
+    {
+      position: sticky ? "sticky" : "static",
+      className,
+      "data-testid": dataTestId,
+      sx: { ...barSx, ...style },
+      elevation: 0,
+      component: "header",
+      children: content
+    }
+  );
+};
+var MenubarGroup = ({
+  label,
+  items,
+  icon,
+  disabled,
+  open,
+  onOpenChange,
+  onClick,
+  className,
+  style
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const isOpen = open !== void 0 ? open : Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+    onOpenChange?.(true);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    onOpenChange?.(false);
+  };
+  const handleItemClick = (item) => {
+    if (item.action) {
+      item.action();
+    }
+    onClick?.(item);
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleClick,
+        disabled,
+        startIcon: icon,
+        endIcon: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {}),
+        className,
+        sx: style,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu, { anchorEl, open: isOpen, onClose: handleClose, children: items.map(
+      (item) => item.divider ? /* @__PURE__ */ jsx(Divider, {}, item.id) : /* @__PURE__ */ jsxs(MenuItem, { onClick: () => handleItemClick(item), disabled: item.disabled, children: [
+        item.icon && /* @__PURE__ */ jsx(ListItemIcon, { children: item.icon }),
+        /* @__PURE__ */ jsx(ListItemText, { children: item.label }),
+        item.shortcut && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { ml: 2 }, children: item.shortcut })
+      ] }, item.id)
+    ) })
+  ] });
+};
+
+export {
+  Menubar,
+  MenubarGroup
+};
+//# sourceMappingURL=chunk-7LIXQZBG.js.map

package/dist/chunk-7ZG7T2YN.js

@@ -0,0 +1,92 @@
+import {
+  MIN_QUERY_LENGTH,
+  addressOptionLabel,
+  isSameAddressOption
+} from "./chunk-MTGEJRE4.js";
+import {
+  AddressSuggestionsPaper
+} from "./chunk-ST4YYVUK.js";
+import {
+  AddressOption
+} from "./chunk-P5JCOFK3.js";
+import {
+  AddressInputField
+} from "./chunk-6M33XQLZ.js";
+
+// src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx
+import Alert from "@mui/material/Alert/index.js";
+import Autocomplete from "@mui/material/Autocomplete/index.js";
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AddressAutocompleteField = ({
+  copy,
+  variant,
+  label,
+  placeholder,
+  icon,
+  floating,
+  error,
+  helperText,
+  disabled,
+  required,
+  fullWidth,
+  getCurrentLocation,
+  inputValue,
+  options,
+  loading,
+  apiError,
+  handleInputChange,
+  handleSelect,
+  handleGetCurrentLocation
+}) => /* @__PURE__ */ jsxs(Box, { "data-testid": "address-autocomplete-container", children: [
+  /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      freeSolo: true,
+      options,
+      inputValue,
+      onInputChange: handleInputChange,
+      onChange: handleSelect,
+      loading,
+      disabled,
+      fullWidth,
+      getOptionLabel: addressOptionLabel,
+      isOptionEqualToValue: isSameAddressOption,
+      PaperComponent: AddressSuggestionsPaper,
+      noOptionsText: inputValue.length <= MIN_QUERY_LENGTH ? "Type at least 3 characters" : "No addresses found",
+      renderOption: ({ key, ...optionProps }, option, state) => /* @__PURE__ */ jsx(
+        AddressOption,
+        {
+          optionProps,
+          option,
+          index: state.index
+        },
+        key
+      ),
+      renderInput: (params) => /* @__PURE__ */ jsx(
+        AddressInputField,
+        {
+          copy,
+          params,
+          addressVariant: variant,
+          label: floating ? void 0 : label,
+          placeholder,
+          icon,
+          error: error || !!apiError,
+          helperText: apiError || helperText,
+          required,
+          disabled,
+          loading,
+          showCurrentLocation: getCurrentLocation && !loading,
+          onGetCurrentLocation: handleGetCurrentLocation
+        }
+      )
+    }
+  ),
+  apiError && /* @__PURE__ */ jsx(Alert, { severity: "warning", sx: { mt: 1 }, children: apiError })
+] });
+
+export {
+  AddressAutocompleteField
+};
+//# sourceMappingURL=chunk-7ZG7T2YN.js.map

package/dist/chunk-A6AKFPIQ.js

@@ -0,0 +1,247 @@
+import {
+  buttonRadioSx,
+  formLabelSx,
+  radioCardSx,
+  segmentButtonSx,
+  segmentContainerSx
+} from "./chunk-5SJWDABY.js";
+
+// src/components/form/RadioGroup/RadioGroup.variants.tsx
+import Box from "@mui/material/Box/index.js";
+import ButtonBase from "@mui/material/ButtonBase/index.js";
+import Card from "@mui/material/Card/index.js";
+import CardContent from "@mui/material/CardContent/index.js";
+import FormControlLabel from "@mui/material/FormControlLabel/index.js";
+import FormLabel from "@mui/material/FormLabel/index.js";
+import Radio from "@mui/material/Radio/index.js";
+import MuiRadioGroup from "@mui/material/RadioGroup/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledFormLabel = styled(FormLabel, {
+  shouldForwardProp: (prop) => !["glass", "error"].includes(prop)
+})(({ theme, glass, error }) => ({
+  ...formLabelSx(theme, glass, error)
+}));
+var StyledRadioCard = styled(Card, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "glass", "gradient", "glow", "customSize", "animated"].includes(
+    prop
+  )
+})(({ theme, ...flags }) => ({ ...radioCardSx(theme, flags) }));
+var StyledButtonRadio = styled(ButtonBase, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "glass", "gradient", "customSize", "animated"].includes(
+    prop
+  )
+})(({ theme, ...flags }) => ({ ...buttonRadioSx(theme, flags) }));
+var StyledSegmentContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["glass", "customColor"].includes(prop)
+})(({ theme, glass, customColor }) => ({
+  ...segmentContainerSx(theme, glass, customColor)
+}));
+var StyledSegmentButton = styled(ButtonBase, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "customSize", "animated"].includes(prop)
+})(({ theme, ...flags }) => ({ ...segmentButtonSx(theme, flags) }));
+var testId = (base, suffix) => base ? `${base}-${suffix}` : void 0;
+var muiRadioColor = (color) => color === "danger" ? "error" : color;
+var OptionLabel = ({
+  option,
+  testIdValue
+}) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, "data-testid": testIdValue, children: [
+  option.icon,
+  option.label
+] });
+var DefaultRadios = ({
+  options,
+  value,
+  color,
+  direction,
+  showDescriptions,
+  dataTestId,
+  groupRef,
+  onChange,
+  rest
+}) => /* @__PURE__ */ jsx(
+  MuiRadioGroup,
+  {
+    ref: groupRef,
+    value,
+    onChange,
+    ...rest,
+    sx: { flexDirection: direction, gap: 1 },
+    "data-testid": testId(dataTestId, "group"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        value: option.value,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `option-${index}`),
+        control: /* @__PURE__ */ jsx(
+          Radio,
+          {
+            color: muiRadioColor(color),
+            "data-testid": testId(dataTestId, `radio-${index}`)
+          }
+        ),
+        label: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: { display: "flex", alignItems: "center", gap: 1 },
+            "data-testid": testId(dataTestId, `label-${index}`),
+            children: [
+              option.icon,
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Typography, { children: option.label }),
+                option.description && showDescriptions && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description })
+              ] })
+            ]
+          }
+        )
+      },
+      option.value
+    ))
+  }
+);
+var CardBody = ({
+  option,
+  index,
+  isSelected,
+  color,
+  showDescriptions,
+  dataTestId
+}) => /* @__PURE__ */ jsx(CardContent, { sx: { p: 2, "&:last-child": { pb: 2 } }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", gap: 2 }, children: [
+  option.icon && /* @__PURE__ */ jsx(Box, { sx: { mt: 0.5, color: isSelected ? `${color}.main` : "text.secondary" }, children: option.icon }),
+  /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "subtitle1",
+        fontWeight: 600,
+        color: isSelected ? `${color}.main` : "text.primary",
+        "data-testid": testId(dataTestId, `label-${index}`),
+        children: option.label
+      }
+    ),
+    option.description && showDescriptions && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: option.description })
+  ] })
+] }) });
+var CardRadios = ({
+  options,
+  value,
+  color,
+  size,
+  direction,
+  showDescriptions,
+  glass,
+  gradient,
+  glow,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: { display: "flex", flexDirection: direction, gap: 2 },
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledRadioCard,
+      {
+        selected: value === option.value,
+        customColor: color,
+        glass,
+        gradient,
+        glow,
+        customSize: size,
+        animated: true,
+        "data-testid": testId(dataTestId, `card-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(
+          CardBody,
+          {
+            option,
+            index,
+            isSelected: value === option.value,
+            color,
+            showDescriptions,
+            dataTestId
+          }
+        )
+      },
+      option.value
+    ))
+  }
+);
+var ButtonRadios = ({
+  options,
+  value,
+  color,
+  size,
+  direction,
+  glass,
+  gradient,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: { display: "flex", flexDirection: direction, gap: 1, flexWrap: "wrap" },
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledButtonRadio,
+      {
+        selected: value === option.value,
+        customColor: color,
+        glass,
+        gradient,
+        customSize: size,
+        animated: true,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `button-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(OptionLabel, { option, testIdValue: testId(dataTestId, `label-${index}`) })
+      },
+      option.value
+    ))
+  }
+);
+var SegmentRadios = ({
+  options,
+  value,
+  color,
+  size,
+  glass,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  StyledSegmentContainer,
+  {
+    glass,
+    customColor: color,
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledSegmentButton,
+      {
+        selected: value === option.value,
+        customColor: color,
+        customSize: size,
+        animated: true,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `segment-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(OptionLabel, { option, testIdValue: testId(dataTestId, `label-${index}`) })
+      },
+      option.value
+    ))
+  }
+);
+var GroupLabel = ({ glass, error, dataTestId, children }) => /* @__PURE__ */ jsx(StyledFormLabel, { glass, error, "data-testid": testId(dataTestId, "label"), children });
+
+export {
+  testId,
+  OptionLabel,
+  DefaultRadios,
+  CardBody,
+  CardRadios,
+  ButtonRadios,
+  SegmentRadios,
+  GroupLabel
+};
+//# sourceMappingURL=chunk-A6AKFPIQ.js.map

package/dist/chunk-ADHMNIWS.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-7BZTZ2WG.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-ADHMNIWS.js.map

package/dist/chunk-ADHMNIWS.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":[]}