@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-DB2ZFZVW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/FleetMap/FleetBody.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport { FleetCanvas } from './FleetCanvas';\nimport type { FleetMapState } from './FleetMap.hooks';\nimport type { FleetMapCopy } from './FleetMap.types';\nimport { FleetRoster } from './FleetRoster';\n\nexport interface FleetBodyProps\n  extends Pick<FleetMapState, 'ordered' | 'centre' | 'markers' | 'select' | 'onKeyDown'> {\n  copy: FleetMapCopy;\n  selectedId: string | null | undefined;\n  laggingAfterSeconds: number;\n  staleAfterSeconds: number;\n  height: string;\n  loading: boolean;\n  testId: string;\n}\n\n/**\n * The two halves side by side: the roster that reads the fleet, and the map.\n *\n * A component rather than JSX inside {@link import('./FleetMap').FleetMap}\n * because the layout is where every responsive decision lives, and keeping it\n * here is what leaves the exported component short enough to read in one\n * screen — which the complexity ledger enforces rather than merely suggests.\n */\nexport function FleetBody({\n  ordered,\n  centre,\n  markers,\n  select,\n  onKeyDown,\n  copy,\n  selectedId,\n  laggingAfterSeconds,\n  staleAfterSeconds,\n  height,\n  loading,\n  testId,\n}: FleetBodyProps): React.JSX.Element {\n  return (\n    <Stack\n      direction={{ xs: 'column', md: 'row' }}\n      spacing={2}\n      // `aria-busy` belongs on the halves that are actually reloading, NOT on\n      // the panel root — the live region announcing the reload is a sibling up\n      // there, and a live region inside a busy subtree is exactly what\n      // `aria-busy` tells assistive tech to hold back. Marking the root busy\n      // would have silenced the announcement for the whole of the only window\n      // in which it has anything to say. `CepField` splits them the same way.\n      aria-busy={loading || undefined}\n      data-testid={`${testId}-body`}\n      sx={{ alignItems: 'stretch', minWidth: 0 }}\n    >\n      {/* The roster reads first on a phone and sits beside the map from md up.\n          It keeps a ceiling so thirty units scroll rather than push the map off\n          the screen.\n\n          It also WIDENS with the viewport rather than staying at its md width.\n          Held at 280px, a desktop gave the map 1600px for three pins while the\n          roster stayed too narrow for its own meta line — `Lagging · 2 min ago ·\n          ±180 m` wrapped, at 1920px of all widths. The rungs below are the ones\n          the six-width pass was taken at. */}\n      <Box\n        sx={{\n          flexBasis: (theme: Theme) => ({ md: rem(theme, 280), lg: rem(theme, 320), xl: rem(theme, 380) }),\n          flexShrink: 0,\n          minWidth: 0,\n          maxHeight: height,\n          display: 'flex',\n        }}\n      >\n        <FleetRoster\n          units={ordered}\n          copy={copy}\n          selectedId={selectedId}\n          onSelect={select}\n          laggingAfterSeconds={laggingAfterSeconds}\n          staleAfterSeconds={staleAfterSeconds}\n          loading={loading}\n          testId={testId}\n          onKeyDown={onKeyDown}\n        />\n      </Box>\n      <FleetCanvas\n        copy={copy}\n        centre={centre}\n        markers={markers}\n        height={height}\n        testId={testId}\n      />\n    </Stack>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,WAAW;AA6Cd,SA+BI,KA/BJ;AAfG,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,EAAE,IAAI,UAAU,IAAI,MAAM;AAAA,MACrC,SAAS;AAAA,MAOT,aAAW,WAAW;AAAA,MACtB,eAAa,GAAG,MAAM;AAAA,MACtB,IAAI,EAAE,YAAY,WAAW,UAAU,EAAE;AAAA,MAWzC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,cACF,WAAW,CAAC,WAAkB,EAAE,IAAI,IAAI,OAAO,GAAG,GAAG,IAAI,IAAI,OAAO,GAAG,GAAG,IAAI,IAAI,OAAO,GAAG,EAAE;AAAA,cAC9F,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW;AAAA,cACX,SAAS;AAAA,YACX;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBACA,UAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-DCJSHYE5.js

@@ -0,0 +1,62 @@
+import {
+  MapCentreMarker,
+  MapCompass,
+  MapDecorativePins,
+  MapRoads,
+  MapScaleBar
+} from "./chunk-4CHROSWR.js";
+import {
+  MapTiles
+} from "./chunk-HGMBY5LP.js";
+import {
+  surfaceBackground
+} from "./chunk-X6AIKCAV.js";
+import {
+  getTileCoordinates
+} from "./chunk-TUBCN4DJ.js";
+
+// src/components/data-display/MapPreview/StaticMapView.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StaticMapView = ({
+  height,
+  zoom,
+  mapType,
+  marker,
+  markerPosition,
+  panOffset = { x: 0, y: 0 }
+}) => {
+  const theme = useTheme();
+  const tileOrigin = useMemo(
+    () => markerPosition ? getTileCoordinates(markerPosition.lat, markerPosition.lng, zoom) : null,
+    [markerPosition, zoom]
+  );
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": "static-map-view",
+      sx: {
+        width: "100%",
+        height,
+        position: "relative",
+        background: surfaceBackground(mapType, theme),
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(MapTiles, { origin: tileOrigin, zoom, mapType, panOffset }),
+        /* @__PURE__ */ jsx(MapRoads, {}),
+        marker && /* @__PURE__ */ jsx(MapCentreMarker, {}),
+        /* @__PURE__ */ jsx(MapDecorativePins, {}),
+        /* @__PURE__ */ jsx(MapScaleBar, { zoom }),
+        /* @__PURE__ */ jsx(MapCompass, {})
+      ]
+    }
+  );
+};
+
+export {
+  StaticMapView
+};
+//# sourceMappingURL=chunk-DCJSHYE5.js.map

package/dist/chunk-DJYL2LC6.js

@@ -0,0 +1,90 @@
+import {
+  MenubarSeparator
+} from "./chunk-YMGHTZA6.js";
+import {
+  MenubarItemView
+} from "./chunk-LP3JCXER.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Menubar/Menubar.toolbar.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Toolbar from "@mui/material/Toolbar/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MenubarToolbar = ({
+  ariaLabel,
+  barSx,
+  items,
+  size,
+  orientation,
+  disabled,
+  loading,
+  logo,
+  endContent,
+  fullWidth,
+  activeMenu,
+  menuRefs,
+  onOpen,
+  onActivate,
+  onClose,
+  onFocus,
+  onBlur
+}) => {
+  const theme = useTheme();
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      role: "toolbar",
+      "aria-label": ariaLabel,
+      sx: {
+        ...barSx,
+        width: fullWidth ? "100%" : "auto",
+        flexDirection: isVertical ? "column" : "row",
+        alignItems: isVertical ? "flex-start" : "center",
+        gap: 1
+      },
+      children: [
+        logo && /* @__PURE__ */ jsx(Box, { sx: { mr: 2, display: "flex", alignItems: "center" }, children: logo }),
+        loading ? /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 20), color: "inherit" }) : /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: isVertical ? "column" : "row",
+              gap: isVertical ? 0.5 : 1,
+              flex: 1
+            },
+            children: items.map(
+              (item) => item.divider ? /* @__PURE__ */ jsx(MenubarSeparator, { orientation }, item.id) : /* @__PURE__ */ jsx(
+                MenubarItemView,
+                {
+                  item,
+                  size,
+                  disabled,
+                  isOpen: activeMenu === item.id,
+                  anchorEl: menuRefs.current[item.id] ?? null,
+                  onOpen,
+                  onActivate,
+                  onClose,
+                  onFocus,
+                  onBlur
+                },
+                item.id
+              )
+            )
+          }
+        ),
+        endContent && /* @__PURE__ */ jsx(Box, { sx: { ml: "auto" }, children: endContent })
+      ]
+    }
+  );
+};
+
+export {
+  MenubarToolbar
+};
+//# sourceMappingURL=chunk-DJYL2LC6.js.map

package/dist/chunk-DJYL2LC6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Menubar/Menubar.toolbar.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Toolbar from '@mui/material/Toolbar/index.js';\nimport { useTheme, type CSSObject } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { MenubarItemView } from './Menubar.item';\nimport { MenubarSeparator } from './Menubar.separator';\nimport type { MenubarItem, MenubarProps } from './Menubar.types';\nimport { rem } from '../../../tokens/relative';\n\nexport interface MenubarToolbarProps {\n  ariaLabel: string;\n  barSx: CSSObject;\n  items: MenubarItem[];\n  size: NonNullable<MenubarProps['size']>;\n  orientation: NonNullable<MenubarProps['orientation']>;\n  disabled: boolean;\n  loading: boolean;\n  logo?: React.ReactNode;\n  endContent?: React.ReactNode;\n  fullWidth: boolean;\n  activeMenu: string | null;\n  menuRefs: React.MutableRefObject<{ [key: string]: HTMLElement | null }>;\n  onOpen: (itemId: string, anchorEl: HTMLElement) => void;\n  onActivate: (item: MenubarItem) => void;\n  onClose: () => void;\n  onFocus?: React.FocusEventHandler;\n  onBlur?: React.FocusEventHandler;\n}\n\n/**\n * The bar's contents: an optional logo, the entries themselves, and whatever the\n * caller hangs off the end. Shared by both orientations — only the element\n * wrapping it differs.\n */\nexport const MenubarToolbar: React.FC<MenubarToolbarProps> = ({\n  ariaLabel,\n  barSx,\n  items,\n  size,\n  orientation,\n  disabled,\n  loading,\n  logo,\n  endContent,\n  fullWidth,\n  activeMenu,\n  menuRefs,\n  onOpen,\n  onActivate,\n  onClose,\n  onFocus,\n  onBlur,\n}) => {\n  const theme = useTheme();\n  const isVertical = orientation === 'vertical';\n\n  return (\n    <Toolbar\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      sx={{\n        ...barSx,\n        width: fullWidth ? '100%' : 'auto',\n        flexDirection: isVertical ? 'column' : 'row',\n        alignItems: isVertical ? 'flex-start' : 'center',\n        gap: 1,\n      }}\n    >\n      {logo && <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>{logo}</Box>}\n\n      {loading ? (\n        <CircularProgress size={rem(theme, 20)} color=\"inherit\" />\n      ) : (\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: isVertical ? 'column' : 'row',\n            gap: isVertical ? 0.5 : 1,\n            flex: 1,\n          }}\n        >\n          {items.map((item) =>\n            item.divider ? (\n              <MenubarSeparator key={item.id} orientation={orientation} />\n            ) : (\n              <MenubarItemView\n                key={item.id}\n                item={item}\n                size={size}\n                disabled={disabled}\n                isOpen={activeMenu === item.id}\n                anchorEl={menuRefs.current[item.id] ?? null}\n                onOpen={onOpen}\n                onActivate={onActivate}\n                onClose={onClose}\n                onFocus={onFocus}\n                onBlur={onBlur}\n              />\n            ),\n          )}\n        </Box>\n      )}\n\n      {endContent && <Box sx={{ ml: 'auto' }}>{endContent}</Box>}\n    </Toolbar>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,aAAa;AACpB,SAAS,gBAAgC;AAwDrC,SAWW,KAXX;AAvBG,IAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,gBAAgB;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,IAAI;AAAA,QACF,GAAG;AAAA,QACH,OAAO,YAAY,SAAS;AAAA,QAC5B,eAAe,aAAa,WAAW;AAAA,QACvC,YAAY,aAAa,eAAe;AAAA,QACxC,KAAK;AAAA,MACP;AAAA,MAEC;AAAA,gBAAQ,oBAAC,OAAI,IAAI,EAAE,IAAI,GAAG,SAAS,QAAQ,YAAY,SAAS,GAAI,gBAAK;AAAA,QAEzE,UACC,oBAAC,oBAAiB,MAAM,IAAI,OAAO,EAAE,GAAG,OAAM,WAAU,IAExD;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,cACF,SAAS;AAAA,cACT,eAAe,aAAa,WAAW;AAAA,cACvC,KAAK,aAAa,MAAM;AAAA,cACxB,MAAM;AAAA,YACR;AAAA,YAEC,gBAAM;AAAA,cAAI,CAAC,SACV,KAAK,UACH,oBAAC,oBAA+B,eAAT,KAAK,EAA8B,IAE1D;AAAA,gBAAC;AAAA;AAAA,kBAEC;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,QAAQ,eAAe,KAAK;AAAA,kBAC5B,UAAU,SAAS,QAAQ,KAAK,EAAE,KAAK;AAAA,kBACvC;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,gBAVK,KAAK;AAAA,cAWZ;AAAA,YAEJ;AAAA;AAAA,QACF;AAAA,QAGD,cAAc,oBAAC,OAAI,IAAI,EAAE,IAAI,OAAO,GAAI,sBAAW;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/dist/chunk-DUNG7D4B.js

@@ -0,0 +1,228 @@
+import {
+  getColorFromTheme,
+  textareaEmphasisStyles
+} from "./chunk-4RDJMIWL.js";
+import {
+  fieldBorder
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Textarea/Textarea.tsx
+import Box from "@mui/material/Box/index.js";
+import FormHelperText from "@mui/material/FormHelperText/index.js";
+import InputLabel from "@mui/material/InputLabel/index.js";
+import TextareaAutosize from "@mui/material/TextareaAutosize/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import { lazy, Suspense, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TextareaRichEditor = lazy(async () => ({
+  default: (await import("./_internal/components/form/Textarea/TextareaRichEditor.js")).TextareaRichEditor
+}));
+var StyledTextarea = styled(TextareaAutosize, {
+  shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize", "glow", "glass", "gradient", "error"].includes(
+    prop
+  )
+})(({
+  theme,
+  customVariant,
+  customColor = "primary",
+  customSize = "md",
+  glow,
+  glass,
+  gradient,
+  error
+}) => {
+  if (!theme) return {};
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const errorColor = theme.palette.error;
+  const sizeMap = {
+    xs: { padding: rems(theme, 6, 8), fontSize: rem(theme, 12), minHeight: rem(theme, 60) },
+    sm: { padding: rems(theme, 8, 10), fontSize: rem(theme, 14), minHeight: rem(theme, 80) },
+    md: { padding: rems(theme, 10, 12), fontSize: rem(theme, 16), minHeight: rem(theme, 100) },
+    lg: { padding: rems(theme, 12, 14), fontSize: rem(theme, 18), minHeight: rem(theme, 120) },
+    xl: { padding: rems(theme, 14, 16), fontSize: rem(theme, 20), minHeight: rem(theme, 140) }
+  };
+  const baseStyles = {
+    width: "100%",
+    fontFamily: theme.typography.fontFamily,
+    borderRadius: fieldRadius(theme),
+    border: error ? `${FIELD_BORDER_WIDTH}px solid ${errorColor.main}` : fieldBorder(theme),
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    transition: "all 0.3s ease",
+    resize: customVariant === "resizable" ? "vertical" : "none",
+    outline: "none",
+    ...sizeMap[customSize],
+    "&::placeholder": {
+      color: theme.palette.text.secondary,
+      opacity: 0.7
+    },
+    "&:hover": {
+      borderColor: error ? errorColor.dark : colorPalette.main,
+      backgroundColor: alpha(theme.palette.background.paper, 0.8)
+    },
+    // Focus is two pixels, like every other field's: the second is an inset
+    // shadow, so the 1px resting border can thicken without the box moving.
+    "&:focus": {
+      borderColor: error ? errorColor.main : colorPalette.main,
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: `inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${error ? errorColor.main : colorPalette.main}, 0 0 0 ${rem(theme, 3)} ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}`
+    }
+  };
+  return {
+    ...baseStyles,
+    ...textareaEmphasisStyles({ theme, colorPalette, glass, gradient, glow })
+  };
+});
+var StyledLabel = styled(InputLabel, {
+  shouldForwardProp: (prop) => !["glass", "error"].includes(prop)
+})(({ theme, glass, error }) => ({
+  marginBottom: theme.spacing(1),
+  fontWeight: 500,
+  color: error ? theme.palette.error.main : theme.palette.text.primary,
+  ...glass && {
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    padding: rems(theme, 4, 8),
+    borderRadius: rem(theme, 4),
+    border: `1px solid ${fieldEdge(theme)}`,
+    display: "inline-block"
+  }
+}));
+var TEXTAREA_DEFAULTS = {
+  variant: "default",
+  color: "primary",
+  size: "md",
+  error: false,
+  glassLabel: false,
+  glow: false,
+  glass: false,
+  gradient: false,
+  iconPosition: "start",
+  minRows: 3
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var TextareaShell = ({ testId, label, glassLabel, error, helperText, children }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: { position: "relative", width: "100%" },
+    "data-testid": testId ? `${testId}-wrapper` : void 0,
+    children: [
+      label && /* @__PURE__ */ jsx(StyledLabel, { glass: glassLabel, error, children: label }),
+      children,
+      helperText && /* @__PURE__ */ jsx(FormHelperText, { error, sx: { mt: 1 }, children: helperText })
+    ]
+  }
+);
+var TextareaIcon = ({ icon, iconPosition }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      position: "absolute",
+      top: sxRem(12),
+      ...iconPosition === "start" ? { left: sxRem(12) } : { right: sxRem(12) },
+      color: "text.secondary",
+      pointerEvents: "none",
+      zIndex: 1
+    },
+    children: icon
+  }
+);
+function RichVariant({
+  shell,
+  editor
+}) {
+  return /* @__PURE__ */ jsx(TextareaShell, { ...shell, children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(TextareaRichEditor, { ...editor }) }) });
+}
+function withIconGutter(theme, style, hasIcon, iconPosition) {
+  if (!hasIcon) return { ...style };
+  return { ...style, [iconPosition === "start" ? "paddingLeft" : "paddingRight"]: rem(theme, 40) };
+}
+var Textarea = (textareaProps) => {
+  const {
+    variant,
+    color,
+    size,
+    error,
+    helperText,
+    label,
+    glassLabel,
+    glow,
+    glass,
+    gradient,
+    icon,
+    iconPosition,
+    minRows,
+    maxRows,
+    style,
+    "data-testid": dataTestId,
+    dataTestId: dataTestIdCamelCase,
+    ...props
+  } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };
+  const { richEditorCopy } = textareaProps;
+  const theme = useTheme();
+  const [richTextValue, setRichTextValue] = useState("");
+  const hasIcon = Boolean(icon);
+  const testId = dataTestId || dataTestIdCamelCase;
+  const textareaStyle = withIconGutter(theme, style, hasIcon, iconPosition);
+  if (variant === "rich" && richEditorCopy) {
+    return /* @__PURE__ */ jsx(
+      RichVariant,
+      {
+        shell: { testId, label, glassLabel, error, helperText },
+        editor: {
+          copy: richEditorCopy,
+          value: richTextValue,
+          onChange: setRichTextValue,
+          placeholder: props.placeholder,
+          error,
+          glass,
+          color,
+          characterLimit: props.maxLength
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(TextareaShell, { testId, label, glassLabel, error, helperText, children: /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+    hasIcon && /* @__PURE__ */ jsx(TextareaIcon, { icon, iconPosition }),
+    /* @__PURE__ */ jsx(
+      StyledTextarea,
+      {
+        customVariant: variant,
+        customColor: color,
+        customSize: size,
+        glow,
+        glass,
+        gradient,
+        error,
+        minRows: variant === "autosize" ? minRows : void 0,
+        maxRows: variant === "autosize" ? maxRows : void 0,
+        style: textareaStyle,
+        "aria-label": label || props["aria-label"],
+        "data-testid": testId,
+        ...props
+      }
+    )
+  ] }) });
+};
+Textarea.displayName = "Textarea";
+
+export {
+  Textarea
+};
+//# sourceMappingURL=chunk-DUNG7D4B.js.map

package/dist/chunk-DUNG7D4B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Textarea/Textarea.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport InputLabel from '@mui/material/InputLabel/index.js';\nimport TextareaAutosize from '@mui/material/TextareaAutosize/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React, { lazy, Suspense, useState } from 'react';\n\nimport {\n  getColorFromTheme,\n  textareaEmphasisStyles } from './Textarea.styles';\n\n/**\n * The rich editor is LOADED ON DEMAND, not imported (12-51 follow-up).\n *\n * It renders only for `variant === 'rich'`, but a static import made every\n * consumer of a plain `<Textarea>` pay for it — 387 lines of toolbar plus the\n * MUI `Tooltip`, `IconButton` and `Divider` its formatting buttons need. That\n * is not theoretical: an adopting storefront imports this entry for a one-line\n * order note, and `Tooltip` (8.7 KiB) reached its EAGER chunk through here\n * while nothing on that critical path renders a tooltip at all.\n *\n * `variant` is a prop, so the branch cannot be decided at build time and no\n * amount of tree-shaking removes it. A lazy boundary is what expresses \"only\n * the rich variant pays\", and it costs the rich variant one microtask it can\n * afford — it is a text editor a user has already chosen to open, never a\n * first-paint element.\n */\nconst TextareaRichEditor = lazy(async () => ({\n  default: (await import('./TextareaRichEditor')).TextareaRichEditor }));\nimport type { TextareaProps } from './Textarea.types';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { FIELD_BORDER_WIDTH, fieldBorder } from '../../../tokens/field-height';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n// Interface for styled component props\ninterface StyledTextareaProps {\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n  error?: boolean;\n  theme?: Theme;\n}\n\n// Glow animation for enhanced visual effects\nconst StyledTextarea = styled(TextareaAutosize, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient', 'error'].includes(\n      prop as string,\n    ) })<StyledTextareaProps>(({\n  theme,\n  customVariant,\n  customColor = 'primary',\n  customSize = 'md',\n  glow,\n  glass,\n  gradient,\n  error }) => {\n  if (!theme) return {};\n  const colorPalette = getColorFromTheme(theme, customColor);\n  const errorColor = theme.palette.error;\n\n  const sizeMap = {\n    xs: { padding: rems(theme, 6, 8), fontSize: rem(theme, 12), minHeight: rem(theme, 60) },\n    sm: { padding: rems(theme, 8, 10), fontSize: rem(theme, 14), minHeight: rem(theme, 80) },\n    md: { padding: rems(theme, 10, 12), fontSize: rem(theme, 16), minHeight: rem(theme, 100) },\n    lg: { padding: rems(theme, 12, 14), fontSize: rem(theme, 18), minHeight: rem(theme, 120) },\n    xl: { padding: rems(theme, 14, 16), fontSize: rem(theme, 20), minHeight: rem(theme, 140) } };\n\n  const baseStyles = {\n    width: '100%',\n    fontFamily: theme.typography.fontFamily,\n    borderRadius: fieldRadius(theme),\n    border: error ? `${FIELD_BORDER_WIDTH}px solid ${errorColor.main}` : fieldBorder(theme),\n    backgroundColor: theme.palette.background.paper,\n    color: theme.palette.text.primary,\n    transition: 'all 0.3s ease',\n    resize: customVariant === 'resizable' ? 'vertical' : 'none',\n    outline: 'none',\n    ...sizeMap[customSize as keyof typeof sizeMap],\n\n    '&::placeholder': {\n      color: theme.palette.text.secondary,\n      opacity: 0.7 },\n\n    '&:hover': {\n      borderColor: error ? errorColor.dark : colorPalette.main,\n      backgroundColor: alpha(theme.palette.background.paper, 0.8) },\n\n    // Focus is two pixels, like every other field's: the second is an inset\n    // shadow, so the 1px resting border can thicken without the box moving.\n    '&:focus': {\n      borderColor: error ? errorColor.main : colorPalette.main,\n      backgroundColor: theme.palette.background.paper,\n      boxShadow: `inset 0 0 0 ${FIELD_BORDER_WIDTH}px ${error ? errorColor.main : colorPalette.main}, 0 0 0 ${rem(theme, 3)} ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };\n\n  // Glass morphism effect\n  return {\n    ...baseStyles,\n    ...textareaEmphasisStyles({ theme, colorPalette, glass, gradient, glow }) };\n});\n\nconst StyledLabel = styled(InputLabel, {\n  shouldForwardProp: (prop) => !['glass', 'error'].includes(prop as string) })<{ glass?: boolean; error?: boolean }>(({ theme, glass, error }) => ({\n  marginBottom: theme.spacing(1),\n  fontWeight: 500,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  ...(glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: `blur(${rem(theme, 10)})`,\n    padding: rems(theme, 4, 8),\n    borderRadius: rem(theme, 4),\n    border: `1px solid ${fieldEdge(theme)}`,\n    display: 'inline-block' }) }));\n\n// IconWrapper - replaced with inline Box component for better TypeScript compatibility\n// const IconWrapper = styled(Box)<{ position: 'start' | 'end' }>(({ theme, position }) => {\n//   const positionStyles = position === 'start' ? { left: '12px' } : { right: '12px' };\n//   return {\n//     position: 'absolute' as const,\n//     top: '12px',\n//     ...positionStyles,\n//     color: theme.palette.text.secondary,\n//     pointerEvents: 'none' as const,\n//     zIndex: 1,\n//   };\n// });\n\n// Rich text toolbar styling\n\nconst TEXTAREA_DEFAULTS = {\n  variant: 'default',\n  color: 'primary',\n  size: 'md',\n  error: false,\n  glassLabel: false,\n  glow: false,\n  glass: false,\n  gradient: false,\n  iconPosition: 'start',\n  minRows: 3 } satisfies Partial<TextareaProps>;\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: TextareaProps): Partial<TextareaProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<TextareaProps>;\n\n// Label above, helper text below — identical for the plain and rich variants,\n// which previously duplicated both.\nconst TextareaShell: React.FC<{\n  testId?: string;\n  label?: React.ReactNode;\n  glassLabel: boolean;\n  error: boolean;\n  helperText?: React.ReactNode;\n  children: React.ReactNode;\n}> = ({ testId, label, glassLabel, error, helperText, children }) => (\n  <Box\n    sx={{ position: 'relative', width: '100%' }}\n    data-testid={testId ? `${testId}-wrapper` : undefined}\n  >\n    {label && (\n      <StyledLabel glass={glassLabel} error={error}>\n        {label}\n      </StyledLabel>\n    )}\n\n    {children}\n\n    {helperText && (\n      <FormHelperText error={error} sx={{ mt: 1 }}>\n        {helperText}\n      </FormHelperText>\n    )}\n  </Box>\n);\n\nconst TextareaIcon: React.FC<{\n  icon?: React.ReactNode;\n  iconPosition: 'start' | 'end';\n}> = ({ icon, iconPosition }) => (\n  <Box\n    sx={{\n      position: 'absolute',\n      top: sxRem(12),\n      ...(iconPosition === 'start' ? { left: sxRem(12) } : { right: sxRem(12) }),\n      color: 'text.secondary',\n      pointerEvents: 'none',\n      zIndex: 1 }}\n  >\n    {icon}\n  </Box>\n);\n\n/**\n * The rich variant, kept out of the main component's body.\n *\n * Two reasons rather than one: the `Suspense` boundary and its props belong\n * together with the lazy import above, and the component that renders every\n * OTHER variant stays inside the size the complexity gate allows without\n * anything being suppressed.\n */\nfunction RichVariant({\n  shell,\n  editor }: {\n  shell: Omit<React.ComponentProps<typeof TextareaShell>, 'children'>;\n  editor: React.ComponentProps<typeof TextareaRichEditor>;\n}): React.JSX.Element {\n  return (\n    <TextareaShell {...shell}>\n      {/*\n        `null` rather than a spinner: the editor resolves from the same document\n        the caller is already rendering, so a fallback would flash for a frame\n        and read as a glitch rather than as loading.\n      */}\n      <Suspense fallback={null}>\n        <TextareaRichEditor {...editor} />\n      </Suspense>\n    </TextareaShell>\n  );\n}\n\n// Same gap either side; only which side it applies to changes. The previous\n// version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose\n// two branches were identical. The icon's gutter is 40px at the design scale.\nfunction withIconGutter(\n  theme: Theme,\n  style: React.CSSProperties | undefined,\n  hasIcon: boolean,\n  iconPosition: TextareaProps['iconPosition'],\n): React.CSSProperties {\n  if (!hasIcon) return { ...style };\n  return { ...style, [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: rem(theme, 40) };\n}\n\nexport const Textarea: React.FC<TextareaProps> = (textareaProps) => {\n  const {\n    variant,\n    color,\n    size,\n    error,\n    helperText,\n    label,\n    glassLabel,\n    glow,\n    glass,\n    gradient,\n    icon,\n    iconPosition,\n    minRows,\n    maxRows,\n    style,\n    'data-testid': dataTestId,\n    dataTestId: dataTestIdCamelCase,\n    ...props\n  } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };\n\n  // Read off the props rather than the merged object: the spread widens every\n  // key to optional, which would lose what the variant union already proved.\n  const { richEditorCopy } = textareaProps;\n\n  const theme = useTheme();\n  const [richTextValue, setRichTextValue] = useState('');\n  const hasIcon = Boolean(icon);\n  const testId = dataTestId || dataTestIdCamelCase;\n\n  const textareaStyle = withIconGutter(theme, style, hasIcon, iconPosition);\n\n  // If rich text variant, use the rich text editor\n  if (variant === 'rich' && richEditorCopy) {\n    return (\n      <RichVariant\n        shell={{ testId, label, glassLabel, error, helperText }}\n        editor={{\n          copy: richEditorCopy,\n          value: richTextValue,\n          onChange: setRichTextValue,\n          placeholder: props.placeholder,\n          error,\n          glass,\n          color,\n          characterLimit: props.maxLength }}\n      />\n    );\n  }\n\n  return (\n    <TextareaShell testId={testId} label={label} glassLabel={glassLabel} error={error} helperText={helperText}>\n      <Box sx={{ position: 'relative' }}>\n        {hasIcon && <TextareaIcon icon={icon} iconPosition={iconPosition} />}\n\n        <StyledTextarea\n          customVariant={variant}\n          customColor={color}\n          customSize={size}\n          glow={glow}\n          glass={glass}\n          gradient={gradient}\n          error={error}\n          minRows={variant === 'autosize' ? minRows : undefined}\n          maxRows={variant === 'autosize' ? maxRows : undefined}\n          style={textareaStyle}\n          aria-label={label || props['aria-label']}\n          data-testid={testId}\n          {...props}\n        />\n      </Box>\n    </TextareaShell>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n"],"mappings":"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","names":[]}

package/dist/chunk-DVAAUWTC.js

@@ -0,0 +1,41 @@
+import {
+  MapPreview
+} from "./chunk-XJPJ6ESI.js";
+
+// src/components/data-display/FleetMap/FleetCanvas.tsx
+import Box from "@mui/material/Box/index.js";
+import { jsx } from "react/jsx-runtime";
+function FleetCanvas({
+  copy,
+  centre,
+  markers,
+  height,
+  testId
+}) {
+  if (!centre) return null;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "region",
+      "aria-label": copy.mapLabel,
+      "data-testid": `${testId}-canvas`,
+      sx: { flexGrow: 1, minWidth: 0 },
+      children: /* @__PURE__ */ jsx(
+        MapPreview,
+        {
+          copy: copy.map,
+          center: centre,
+          markers,
+          height,
+          interactive: true,
+          showControls: true
+        }
+      )
+    }
+  );
+}
+
+export {
+  FleetCanvas
+};
+//# sourceMappingURL=chunk-DVAAUWTC.js.map

package/dist/chunk-E4TNDTWV.js

@@ -0,0 +1,145 @@
+import {
+  SIZE_MAP,
+  makeTestIds,
+  resolveLoadingStateProps
+} from "./chunk-7DFEKTT7.js";
+import {
+  SKELETON_FULL_ROW_WIDTH,
+  SKELETON_LAST_ROW_WIDTH,
+  SKELETON_MESSAGE_MARGIN_TOP_UNITS,
+  SKELETON_PADDING_UNITS,
+  SKELETON_RADIUS,
+  SKELETON_ROW_GAP_UNITS,
+  SKELETON_ROW_HEIGHT,
+  SPINNER_GAP_UNITS,
+  SPINNER_MIN_HEIGHT,
+  SPINNER_PADDING_UNITS
+} from "./chunk-YSTHOE66.js";
+import {
+  Skeleton
+} from "./chunk-7F7TTOYN.js";
+import {
+  resolveTestId
+} from "./chunk-TYJR4GOF.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/LoadingState/LoadingState.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Stack from "@mui/material/Stack/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 LoadingMessage = ({ message, size, testIds, sx }) => message ? /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: SIZE_MAP[size].text,
+    color: "text.secondary",
+    sx,
+    "data-testid": testIds.named("message"),
+    children: message
+  }
+) : null;
+var SkeletonView = ({
+  message,
+  size,
+  skeletonRows,
+  className,
+  testIds
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": message || "Loading content",
+      className,
+      "data-testid": testIds.base,
+      sx: {
+        width: "100%",
+        padding: theme.spacing(SKELETON_PADDING_UNITS)
+      },
+      children: [
+        /* @__PURE__ */ jsx(Stack, { spacing: SKELETON_ROW_GAP_UNITS, children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rectangular",
+            animation: "wave",
+            height: rem(theme, SKELETON_ROW_HEIGHT[size]),
+            width: index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH,
+            borderRadius: SKELETON_RADIUS,
+            "data-testid": testIds.optional(`skeleton-${index}`)
+          },
+          `skeleton-row-${index}`
+        )) }),
+        /* @__PURE__ */ jsx(
+          LoadingMessage,
+          {
+            message,
+            size,
+            testIds,
+            sx: { mt: SKELETON_MESSAGE_MARGIN_TOP_UNITS, textAlign: "center" }
+          }
+        )
+      ]
+    }
+  );
+};
+var SpinnerView = ({ message, size, className, testIds }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": message || "Loading",
+      className,
+      "data-testid": testIds.base,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: theme.spacing(SPINNER_PADDING_UNITS),
+        minHeight: rem(theme, SPINNER_MIN_HEIGHT),
+        gap: theme.spacing(SPINNER_GAP_UNITS)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            size: rem(theme, SIZE_MAP[size].spinner),
+            "data-testid": testIds.named("spinner")
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingMessage, { message, size, testIds })
+      ]
+    }
+  );
+};
+var LoadingState = React.memo((rawProps) => {
+  const resolved = resolveLoadingStateProps(rawProps);
+  const { variant, message, size, skeletonRows, className } = resolved;
+  const viewProps = {
+    message,
+    size,
+    skeletonRows,
+    className,
+    // `dataTestId` is the documented spelling; `testID`, the shared contract's
+    // other one, resolves to the same id.
+    testIds: makeTestIds(resolveTestId(resolved))
+  };
+  return variant === "skeleton" ? /* @__PURE__ */ jsx(SkeletonView, { ...viewProps }) : /* @__PURE__ */ jsx(SpinnerView, { ...viewProps });
+});
+LoadingState.displayName = "LoadingState";
+var LoadingState_default = LoadingState;
+
+export {
+  LoadingState,
+  LoadingState_default
+};
+//# sourceMappingURL=chunk-E4TNDTWV.js.map

package/dist/chunk-E4TNDTWV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LoadingState/LoadingState.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport {\n  makeTestIds,\n  resolveLoadingStateProps,\n  SIZE_MAP,\n  SKELETON_ROW_HEIGHT,\n} from './LoadingState.helpers';\nimport {\n  SKELETON_FULL_ROW_WIDTH,\n  SKELETON_LAST_ROW_WIDTH,\n  SKELETON_MESSAGE_MARGIN_TOP_UNITS,\n  SKELETON_PADDING_UNITS,\n  SKELETON_RADIUS,\n  SKELETON_ROW_GAP_UNITS,\n  SPINNER_GAP_UNITS,\n  SPINNER_MIN_HEIGHT,\n  SPINNER_PADDING_UNITS,\n} from './LoadingState.metrics';\nimport type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { rem } from '../../../tokens/relative';\n\ninterface ViewProps {\n  message?: string;\n  size: LoadingStateSize;\n  skeletonRows: number;\n  className?: string;\n  testIds: ReturnType<typeof makeTestIds>;\n}\n\nconst LoadingMessage: React.FC<{\n  message?: string;\n  size: LoadingStateSize;\n  testIds: ViewProps['testIds'];\n  sx?: object;\n}> = ({ message, size, testIds, sx }) =>\n  message ? (\n    <Typography\n      variant={SIZE_MAP[size].text}\n      color=\"text.secondary\"\n      sx={sx}\n      data-testid={testIds.named('message')}\n    >\n      {message}\n    </Typography>\n  ) : null;\n\nconst SkeletonView: React.FC<ViewProps> = ({\n  message,\n  size,\n  skeletonRows,\n  className,\n  testIds,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading content'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        width: '100%',\n        padding: theme.spacing(SKELETON_PADDING_UNITS),\n      }}\n    >\n      <Stack spacing={SKELETON_ROW_GAP_UNITS}>\n        {Array.from({ length: skeletonRows }).map((_, index) => (\n          <Skeleton\n            key={`skeleton-row-${index}`}\n            variant=\"rectangular\"\n            animation=\"wave\"\n            height={rem(theme, SKELETON_ROW_HEIGHT[size])}\n            // The last row is short, so the block reads as a paragraph of text.\n            width={index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH}\n            borderRadius={SKELETON_RADIUS}\n            data-testid={testIds.optional(`skeleton-${index}`)}\n          />\n        ))}\n      </Stack>\n      <LoadingMessage\n        message={message}\n        size={size}\n        testIds={testIds}\n        sx={{ mt: SKELETON_MESSAGE_MARGIN_TOP_UNITS, textAlign: 'center' }}\n      />\n    </Box>\n  );\n};\n\nconst SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: theme.spacing(SPINNER_PADDING_UNITS),\n        minHeight: rem(theme, SPINNER_MIN_HEIGHT),\n        gap: theme.spacing(SPINNER_GAP_UNITS),\n      }}\n    >\n      <CircularProgress\n        size={rem(theme, SIZE_MAP[size].spinner)}\n        data-testid={testIds.named('spinner')}\n      />\n      <LoadingMessage message={message} size={size} testIds={testIds} />\n    </Box>\n  );\n};\n\nexport const LoadingState: React.FC<LoadingStateProps> = React.memo((rawProps) => {\n  const resolved = resolveLoadingStateProps(rawProps);\n  const { variant, message, size, skeletonRows, className } = resolved;\n  const viewProps: ViewProps = {\n    message,\n    size,\n    skeletonRows,\n    className,\n    // `dataTestId` is the documented spelling; `testID`, the shared contract's\n    // other one, resolves to the same id.\n    testIds: makeTestIds(resolveTestId(resolved)),\n  };\n\n  return variant === 'skeleton' ? (\n    <SkeletonView {...viewProps} />\n  ) : (\n    <SpinnerView {...viewProps} />\n  );\n});\n\nLoadingState.displayName = 'LoadingState';\n\nexport default LoadingState;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AACzB,OAAO,WAAW;AAwCd,cAoBA,YApBA;AAPJ,IAAM,iBAKD,CAAC,EAAE,SAAS,MAAM,SAAS,GAAG,MACjC,UACE;AAAA,EAAC;AAAA;AAAA,IACC,SAAS,SAAS,IAAI,EAAE;AAAA,IACxB,OAAM;AAAA,IACN;AAAA,IACA,eAAa,QAAQ,MAAM,SAAS;AAAA,IAEnC;AAAA;AACH,IACE;AAEN,IAAM,eAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,WAAW;AAAA,MACvB;AAAA,MACA,eAAa,QAAQ;AAAA,MACrB,IAAI;AAAA,QACF,OAAO;AAAA,QACP,SAAS,MAAM,QAAQ,sBAAsB;AAAA,MAC/C;AAAA,MAEA;AAAA,4BAAC,SAAM,SAAS,wBACb,gBAAM,KAAK,EAAE,QAAQ,aAAa,CAAC,EAAE,IAAI,CAAC,GAAG,UAC5C;AAAA,UAAC;AAAA;AAAA,YAEC,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,QAAQ,IAAI,OAAO,oBAAoB,IAAI,CAAC;AAAA,YAE5C,OAAO,UAAU,eAAe,IAAI,0BAA0B;AAAA,YAC9D,cAAc;AAAA,YACd,eAAa,QAAQ,SAAS,YAAY,KAAK,EAAE;AAAA;AAAA,UAP5C,gBAAgB,KAAK;AAAA,QAQ5B,CACD,GACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,IAAI,EAAE,IAAI,mCAAmC,WAAW,SAAS;AAAA;AAAA,QACnE;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAmC,CAAC,EAAE,SAAS,MAAM,WAAW,QAAQ,MAAM;AAClF,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,WAAW;AAAA,MACvB;AAAA,MACA,eAAa,QAAQ;AAAA,MACrB,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,SAAS,MAAM,QAAQ,qBAAqB;AAAA,QAC5C,WAAW,IAAI,OAAO,kBAAkB;AAAA,QACxC,KAAK,MAAM,QAAQ,iBAAiB;AAAA,MACtC;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,IAAI,OAAO,SAAS,IAAI,EAAE,OAAO;AAAA,YACvC,eAAa,QAAQ,MAAM,SAAS;AAAA;AAAA,QACtC;AAAA,QACA,oBAAC,kBAAe,SAAkB,MAAY,SAAkB;AAAA;AAAA;AAAA,EAClE;AAEJ;AAEO,IAAM,eAA4C,MAAM,KAAK,CAAC,aAAa;AAChF,QAAM,WAAW,yBAAyB,QAAQ;AAClD,QAAM,EAAE,SAAS,SAAS,MAAM,cAAc,UAAU,IAAI;AAC5D,QAAM,YAAuB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,SAAS,YAAY,cAAc,QAAQ,CAAC;AAAA,EAC9C;AAEA,SAAO,YAAY,aACjB,oBAAC,gBAAc,GAAG,WAAW,IAE7B,oBAAC,eAAa,GAAG,WAAW;AAEhC,CAAC;AAED,aAAa,cAAc;AAE3B,IAAO,uBAAQ;","names":[]}