@12-apps/ui 6.89.2 → 6.91.0

package/dist/{chunk-EUR2ORTN.js → chunk-CSJ7WNXU.js}

@@ -1,6 +1,6 @@
 import {
   RAIL_GAP_PX
-} from "./chunk-BMTIBQQC.js";
+} from "./chunk-BBBHPK2Q.js";
 import {
   COMPACT_BREAK,
   META_BREAK
@@ -257,4 +257,4 @@ export {
   ListCardActions,
   ListCardTail
 };
-//# sourceMappingURL=chunk-EUR2ORTN.js.map
+//# sourceMappingURL=chunk-CSJ7WNXU.js.map

package/dist/{chunk-OWRQOYUE.js → chunk-DA3D5X5Z.js}

@@ -1,9 +1,9 @@
+import {
+  FleetBody
+} from "./chunk-WCF56ZCD.js";
 import {
   useFleetMap
 } from "./chunk-ZCPSND5Y.js";
-import {
-  FleetBody
-} from "./chunk-BAQ3ITZV.js";
 import {
   FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
   FLEET_DEFAULT_STALE_AFTER_SECONDS,
@@ -14,7 +14,7 @@ import {
 } from "./chunk-PUFA7FQ7.js";
 import {
   EmptyState
-} from "./chunk-LXIPBHNJ.js";
+} from "./chunk-42TOCPXB.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -117,4 +117,4 @@ export {
   FleetMap,
   FleetMap_default
 };
-//# sourceMappingURL=chunk-OWRQOYUE.js.map
+//# sourceMappingURL=chunk-DA3D5X5Z.js.map

package/dist/{chunk-LV6AD6XC.js → chunk-DBI6AMNY.js}

@@ -1,9 +1,9 @@
-import {
-  DataViewsDisplayPanel
-} from "./chunk-6HXNFNOB.js";
 import {
   DataViewsExportMenu
 } from "./chunk-4NG3LTRX.js";
+import {
+  DataViewsDisplayPanel
+} from "./chunk-6HXNFNOB.js";
 import {
   STICKY_BAR_ATTR
 } from "./chunk-4IE66GY2.js";
@@ -143,4 +143,4 @@ function GridToolbar(props) {
 export {
   GridToolbar
 };
-//# sourceMappingURL=chunk-LV6AD6XC.js.map
+//# sourceMappingURL=chunk-DBI6AMNY.js.map

package/dist/{chunk-3YFDGFEK.js → chunk-DVX4HDNP.js}

@@ -1,6 +1,6 @@
 import {
   useCardActions
-} from "./chunk-RCTHCXS6.js";
+} from "./chunk-PJNIJIE6.js";
 import {
   ConfirmActionDialog
 } from "./chunk-7W5X3KQ2.js";
@@ -50,4 +50,4 @@ function useRemoveConfirm({
 export {
   useRemoveConfirm
 };
-//# sourceMappingURL=chunk-3YFDGFEK.js.map
+//# sourceMappingURL=chunk-DVX4HDNP.js.map

package/dist/chunk-DY2I6LMX.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-DY2I6LMX.js.map

package/dist/chunk-DY2I6LMX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-QKOJ4637.js → chunk-E6K2UZGR.js}

@@ -1,9 +1,9 @@
 import {
   rowGutters
-} from "./chunk-DAHSKQBV.js";
+} from "./chunk-UMOHHWXY.js";
 import {
   cellRailsTemplate
-} from "./chunk-BMTIBQQC.js";
+} from "./chunk-BBBHPK2Q.js";
 import {
   cellTracks,
   compactCellTracks,
@@ -55,4 +55,4 @@ export {
   useRowLayout,
   StandaloneContainer
 };
-//# sourceMappingURL=chunk-QKOJ4637.js.map
+//# sourceMappingURL=chunk-E6K2UZGR.js.map

package/dist/{chunk-7XSCEHGA.js → chunk-EOQ6EKTS.js}

@@ -1,9 +1,3 @@
-import {
-  pulseAnimation,
-  rotateAnimation,
-  scaleInAnimation,
-  shimmerAnimation
-} from "./chunk-MTEQEPNY.js";
 import {
   ACTIVE_SCALE,
   AVATAR_SIZES,
@@ -23,6 +17,12 @@ import {
   SPINNER,
   STATUS_DOT
 } from "./chunk-6ZZGK5DT.js";
+import {
+  pulseAnimation,
+  rotateAnimation,
+  scaleInAnimation,
+  shimmerAnimation
+} from "./chunk-MTEQEPNY.js";
 import {
   absoluteInk,
   controlNeutral,
@@ -277,4 +277,4 @@ function AvatarView(props) {
 export {
   AvatarView
 };
-//# sourceMappingURL=chunk-7XSCEHGA.js.map
+//# sourceMappingURL=chunk-EOQ6EKTS.js.map

package/dist/chunk-FORAVDJF.js

@@ -0,0 +1,164 @@
+import {
+  RangePresets
+} from "./chunk-LZNUBQ5I.js";
+import {
+  NumberBoundInput
+} from "./chunk-2FKWKLSC.js";
+import {
+  useOutsideResetKey
+} from "./chunk-YOPMXGHY.js";
+import {
+  presetsFor
+} from "./chunk-CBOB5AV6.js";
+import {
+  DayRangeCalendar
+} from "./chunk-MICX23P4.js";
+import {
+  isRangeInverted
+} from "./chunk-GCZJH4XL.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  DayBoundInput
+} from "./chunk-L6YTVXGN.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-range-bounds.tsx
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BoundField({
+  field,
+  label,
+  value,
+  onChange,
+  testId,
+  fill
+}) {
+  const copy = useDataViewsCopy();
+  if (field.kind === "day") {
+    return /* @__PURE__ */ jsx(
+      DayBoundInput,
+      {
+        fill: true,
+        mask: copy.filters.dayMask,
+        invalidMessage: copy.filters.dayInvalid,
+        label,
+        value: value == null ? void 0 : String(value),
+        onChange,
+        testId
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    NumberBoundInput,
+    {
+      fill,
+      label,
+      value,
+      unit: field.unit,
+      onChange,
+      testId
+    }
+  );
+}
+function BoundCell({ grow, children }) {
+  if (!grow) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(Box, { sx: { flex: "1 1 0", minWidth: 0 }, children });
+}
+function RangeNote({
+  day,
+  inverted,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  if (inverted) {
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "p",
+        "data-testid": `${testId}-inverted`,
+        sx: { mt: 0.75, fontSize: sxRem(12), color: "error.main" },
+        children: copy.filters.rangeInvalid
+      }
+    );
+  }
+  if (!day) return null;
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "p",
+      "data-testid": `${testId}-inclusive`,
+      sx: { mt: { xs: 0.25, sm: 0.75 }, fontSize: sxRem(12), color: "text.secondary" },
+      children: copy.filters.rangeInclusiveNote
+    }
+  );
+}
+function RangeBounds({
+  field,
+  value,
+  onChange,
+  testId,
+  calendarMonths = 1,
+  showCalendar = true,
+  fillRow = false
+}) {
+  const copy = useDataViewsCopy();
+  const { key, emitted } = useOutsideResetKey(value);
+  const [typed, setTyped] = useState(0);
+  const typedChange = (range) => {
+    setTyped((n) => n + 1);
+    onChange(emitted(range));
+  };
+  const day = field.kind === "day";
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": `${testId}-panel`, children: [
+    /* @__PURE__ */ jsx(Box, { sx: { "&:not(:empty)": { mb: { xs: 1, sm: 1.5 } } }, children: /* @__PURE__ */ jsx(RangePresets, { presets: presetsFor(field, copy), value, onChange, testId }) }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", gap: 1.5 }, children: [
+      /* @__PURE__ */ jsx(BoundCell, { grow: day || fillRow, children: /* @__PURE__ */ jsx(
+        BoundField,
+        {
+          field,
+          label: copy.filters.rangeStart,
+          value: value.min,
+          onChange: (min) => typedChange({ ...value, min }),
+          testId: `${testId}-min`,
+          fill: fillRow
+        },
+        `min-${key}`
+      ) }),
+      /* @__PURE__ */ jsx(BoundCell, { grow: day || fillRow, children: /* @__PURE__ */ jsx(
+        BoundField,
+        {
+          field,
+          label: copy.filters.rangeEnd,
+          value: value.max,
+          onChange: (max) => typedChange({ ...value, max }),
+          testId: `${testId}-max`,
+          fill: fillRow
+        },
+        `max-${key}`
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(RangeNote, { day, inverted: isRangeInverted(value), testId }),
+    day && showCalendar && /* @__PURE__ */ jsx(
+      DayRangeCalendar,
+      {
+        fieldLabel: field.label,
+        value,
+        onChange: (range) => onChange(emitted(range)),
+        months: calendarMonths,
+        viewKey: `${key}-${typed}`,
+        testId
+      }
+    )
+  ] });
+}
+
+export {
+  RangeBounds
+};
+//# sourceMappingURL=chunk-FORAVDJF.js.map

package/dist/chunk-FORAVDJF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-bounds.tsx"],"sourcesContent":["'use client';\n\n/**\n * The `De`/`Até` pair of a range filter, its preset chips, the line under it\n * and — for a day range — the calendar under that (FUT-4144). Shared by the\n * pill's popover, the slide-in panel and the \"Mais\" sheet, so the three cannot\n * drift on what a bound accepts or how it clears.\n */\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useState } from 'react';\n\nimport { useDataViewsCopy } from './data-views-copy-context';\nimport { DayBoundInput } from './data-views-day-input';\nimport { NumberBoundInput } from './data-views-number-input';\nimport { RangePresets } from './data-views-preset-chips';\nimport { DayRangeCalendar } from './data-views-range-calendar';\nimport { presetsFor } from './data-views-range-presets';\nimport { useOutsideResetKey } from './data-views-range-reset';\nimport { isRangeInverted } from './data-views-range-values';\nimport type { RangeFieldConfig, RangeValue } from './data-views-types';\nimport { sxRem } from '../../../tokens/relative';\n\n/**\n * One end of the range. A day keeps its `AAAA-MM-DD` string verbatim (the form\n * both the field and the backend speak) and is typed through the masked\n * `dd/mm/aaaa` field rather than a native date input — see\n * {@link DayBoundInput} for why. A number parses, and an unparseable/blank\n * entry CLEARS the bound rather than writing `NaN`.\n */\nfunction BoundField<T extends Record<string, unknown>>({\n  field,\n  label,\n  value,\n  onChange,\n  testId,\n  fill,\n}: {\n  field: RangeFieldConfig<T>;\n  label: string;\n  value: number | string | undefined;\n  onChange: (bound: number | string | undefined) => void;\n  testId: string;\n  /** A number box takes its cell's width; a day box always does. */\n  fill: boolean;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  if (field.kind === 'day') {\n    return (\n      <DayBoundInput\n        fill\n        mask={copy.filters.dayMask}\n        invalidMessage={copy.filters.dayInvalid}\n        label={label}\n        value={value == null ? undefined : String(value)}\n        onChange={onChange}\n        testId={testId}\n      />\n    );\n  }\n  return (\n    <NumberBoundInput\n      fill={fill}\n      label={label}\n      value={value}\n      unit={field.unit}\n      onChange={onChange}\n      testId={testId}\n    />\n  );\n}\n\n\n/** One box of the pair: an equal share of the row for a day, as it was for a number. */\nfunction BoundCell({ grow, children }: { grow: boolean; children: React.ReactNode }): React.JSX.Element {\n  if (!grow) return <>{children}</>;\n  return <Box sx={{ flex: '1 1 0', minWidth: 0 }}>{children}</Box>;\n}\n\n/**\n * The line under the pair: why an inverted window matches nothing, or — for a\n * day range — that BOTH days are in the result. Saying so is FUT-668's other\n * half: the bounds compare as ISO strings precisely so `até` keeps its whole\n * day, and nothing on screen would otherwise tell the merchant that.\n */\nfunction RangeNote({\n  day,\n  inverted,\n  testId,\n}: {\n  day: boolean;\n  inverted: boolean;\n  testId: string;\n}): React.JSX.Element | null {\n  const copy = useDataViewsCopy();\n  if (inverted) {\n    return (\n      <Typography\n        component=\"p\"\n        data-testid={`${testId}-inverted`}\n        sx={{ mt: 0.75, fontSize: sxRem(12), color: 'error.main' }}\n      >\n        {copy.filters.rangeInvalid}\n      </Typography>\n    );\n  }\n  if (!day) return null;\n  return (\n    <Typography\n      component=\"p\"\n      data-testid={`${testId}-inclusive`}\n      // `text.secondary`, not `disabled`: the note is read, and disabled grey\n      // at 12px is 2.68:1 (FUT-4144 UI review).\n      sx={{ mt: { xs: 0.25, sm: 0.75 }, fontSize: sxRem(12), color: 'text.secondary' }}\n    >\n      {copy.filters.rangeInclusiveNote}\n    </Typography>\n  );\n}\n\n/** Props of {@link RangeBounds}. */\ninterface RangeBoundsProps<T extends Record<string, unknown>> {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n  /**\n   * Months the day calendar shows side by side (FUT-4144). Two where the\n   * popover has the room; one, with the month/year selectors, on a phone and\n   * in the panels.\n   */\n  calendarMonths?: 1 | 2;\n  /**\n   * Whether the day calendar is mounted. A host that keeps the pair mounted\n   * while hidden (the slide-in panel) passes its open state, so a closed panel\n   * holds no calendar of its own.\n   */\n  showCalendar?: boolean;\n  /**\n   * A NUMBER pair splits the row equally too, as a day pair always does. Set\n   * by the panels, whose width is the row's; the pill's popover sizes itself to\n   * its content and keeps the boxes' own width.\n   */\n  fillRow?: boolean;\n}\n\n/**\n * The `De`/`Até` pair for a range — shared by the pill's popover and the\n * slide-in panel's day fields, so the two surfaces cannot drift on what a bound\n * accepts or how it clears.\n */\nexport function RangeBounds<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testId,\n  calendarMonths = 1,\n  showCalendar = true,\n  fillRow = false,\n}: RangeBoundsProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { key, emitted } = useOutsideResetKey(value);\n  // Moves the calendar to a TYPED day. A typed write is the fields' own, so\n  // the outside key above does not see it; a tap on the calendar moves\n  // neither, which is what keeps it still under the finger.\n  const [typed, setTyped] = useState(0);\n  const typedChange = (range: RangeValue) => {\n    setTyped((n) => n + 1);\n    onChange(emitted(range));\n  };\n  const day = field.kind === 'day';\n  return (\n    <Box data-testid={`${testId}-panel`}>\n      {/* Above the inputs, not below: the presets are the answer for most\n          merchants, and the two date pickers are the escape hatch. */}\n      <Box sx={{ '&:not(:empty)': { mb: { xs: 1, sm: 1.5 } } }}>\n        <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />\n      </Box>\n      {/* Top-aligned: a day that does not exist grows ITS field by a message\n          line, and centring would push the other box half a line down. The two\n          boxes are one height, so with no message this is the same row. */}\n      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>\n        {/* A day pair shares the row equally, so it spans the calendar under\n            it; a number pair keeps its own widths. */}\n        <BoundCell grow={day || fillRow}>\n          <BoundField\n            key={`min-${key}`}\n            field={field}\n            label={copy.filters.rangeStart}\n            value={value.min}\n            onChange={(min) => typedChange({ ...value, min })}\n            testId={`${testId}-min`}\n            fill={fillRow}\n          />\n        </BoundCell>\n        <BoundCell grow={day || fillRow}>\n          <BoundField\n            key={`max-${key}`}\n            field={field}\n            label={copy.filters.rangeEnd}\n            value={value.max}\n            onChange={(max) => typedChange({ ...value, max })}\n            testId={`${testId}-max`}\n            fill={fillRow}\n          />\n        </BoundCell>\n      </Box>\n      <RangeNote day={day} inverted={isRangeInverted(value)} testId={testId} />\n      {/* Under the boxes and the note, with no button to reach it: the typed\n          path stays as short as it was, and a period is two taps (FUT-4144). */}\n      {day && showCalendar && (\n        <DayRangeCalendar\n          fieldLabel={field.label}\n          value={value}\n          onChange={(range) => onChange(emitted(range))}\n          months={calendarMonths}\n          viewKey={`${key}-${typed}`}\n          testId={testId}\n        />\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-FWAY2SAI.js

@@ -0,0 +1,72 @@
+import {
+  extent,
+  planeBounds,
+  projectRings,
+  projectionAt,
+  viewBoxFor
+} from "./chunk-COOSJKZL.js";
+
+// src/components/data-display/RegionMap/RegionMap.view.ts
+function unionBox(boxes) {
+  const real = boxes.filter((box) => box !== null);
+  const xs = extent(real.flatMap((b) => [b.minX, b.minX + b.spanX]));
+  const ys = extent(real.flatMap((b) => [b.minY, b.minY + b.spanY]));
+  if (xs === null || ys === null) return null;
+  return { minX: xs.min, minY: ys.min, spanX: xs.max - xs.min, spanY: ys.max - ys.min };
+}
+function boundsOfRings(rings) {
+  const points = rings.flat();
+  const lats = extent(points.map(([latitude]) => latitude));
+  const lngs = extent(points.map(([, longitude]) => longitude));
+  if (lats === null || lngs === null) return null;
+  return { south: lats.min, west: lngs.min, north: lats.max, east: lngs.max };
+}
+function reachBox(reach, projection) {
+  if ("radiusMetres" in reach) {
+    const r = reach.radiusMetres;
+    return Number.isFinite(r) && r > 0 ? { minX: -r, minY: -r, spanX: r * 2, spanY: r * 2 } : null;
+  }
+  const { south, west, north, east } = reach.bounds;
+  const a = projection.project([north, west]);
+  const b = projection.project([south, east]);
+  return unionBox([{ minX: a.x, minY: a.y, spanX: 0, spanY: 0 }, { minX: b.x, minY: b.y, spanX: 0, spanY: 0 }]);
+}
+function farthestEdge(box) {
+  return Math.max(Math.abs(box.minX), Math.abs(box.minX + box.spanX), Math.abs(box.minY), Math.abs(box.minY + box.spanY));
+}
+function viewWithin(outermostMetres, reach, areaBoxes) {
+  if (outermostMetres !== null) {
+    return viewBoxFor(Math.max(outermostMetres, reach === null ? 0 : farthestEdge(reach)), null);
+  }
+  return viewBoxFor(null, unionBox([...areaBoxes(), reach]));
+}
+function centreOf(regions) {
+  const bounds = boundsOfRings(regions.flatMap((r) => r.rings));
+  if (bounds === null) return null;
+  return { latitude: (bounds.south + bounds.north) / 2, longitude: (bounds.west + bounds.east) / 2 };
+}
+function regionMapView({
+  regions,
+  center,
+  circles = [],
+  reach
+}) {
+  const origin = center ?? centreOf(regions);
+  if (origin === null) return null;
+  const projection = projectionAt(origin);
+  return viewWithin(
+    extent(circles.map((c) => c.radiusMetres))?.max ?? null,
+    reach === void 0 ? null : reachBox(reach, projection),
+    () => regions.map((r) => planeBounds(projectRings(r.rings, projection)))
+  );
+}
+
+export {
+  unionBox,
+  boundsOfRings,
+  reachBox,
+  viewWithin,
+  centreOf,
+  regionMapView
+};
+//# sourceMappingURL=chunk-FWAY2SAI.js.map

package/dist/chunk-FWAY2SAI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/RegionMap/RegionMap.view.ts"],"sourcesContent":["import {\n  extent,\n  planeBounds,\n  projectionAt,\n  projectRings,\n  viewBoxFor,\n  type PlaneBox,\n  type Projection,\n} from './RegionMap.helpers';\nimport type {\n  RegionMapBounds,\n  RegionMapCircle,\n  RegionMapReach,\n  RegionMapRegion,\n  RegionMapRing,\n} from './RegionMap.types';\n\n// What `RegionMap` shows: its view, given the circles, the areas and a host's\n// `reach` — pure, so a host laying HTML over the drawing computes the same one.\n\n/** The smallest box holding every given box, or null with none. */\nexport function unionBox(boxes: readonly (PlaneBox | null)[]): PlaneBox | null {\n  const real = boxes.filter((box): box is PlaneBox => box !== null);\n  const xs = extent(real.flatMap((b) => [b.minX, b.minX + b.spanX]));\n  const ys = extent(real.flatMap((b) => [b.minY, b.minY + b.spanY]));\n  if (xs === null || ys === null) return null;\n  return { minX: xs.min, minY: ys.min, spanX: xs.max - xs.min, spanY: ys.max - ys.min };\n}\n\n/** The latitude/longitude box around some outlines — a `reach` no radius describes. */\nexport function boundsOfRings(rings: readonly RegionMapRing[]): RegionMapBounds | null {\n  const points = rings.flat();\n  const lats = extent(points.map(([latitude]) => latitude));\n  const lngs = extent(points.map(([, longitude]) => longitude));\n  if (lats === null || lngs === null) return null;\n  return { south: lats.min, west: lngs.min, north: lats.max, east: lngs.max };\n}\n\n/** A `reach` as a box in projected metres (a radius is a square around the centre). */\nexport function reachBox(reach: RegionMapReach, projection: Projection): PlaneBox | null {\n  if ('radiusMetres' in reach) {\n    const r = reach.radiusMetres;\n    return Number.isFinite(r) && r > 0 ? { minX: -r, minY: -r, spanX: r * 2, spanY: r * 2 } : null;\n  }\n  const { south, west, north, east } = reach.bounds;\n  const a = projection.project([north, west]);\n  const b = projection.project([south, east]);\n  return unionBox([{ minX: a.x, minY: a.y, spanX: 0, spanY: 0 }, { minX: b.x, minY: b.y, spanX: 0, spanY: 0 }]);\n}\n\n/** How far the box reaches from the centre along either axis — the half-side of a centred square holding it. */\nfunction farthestEdge(box: PlaneBox): number {\n  return Math.max(Math.abs(box.minX), Math.abs(box.minX + box.spanX), Math.abs(box.minY), Math.abs(box.minY + box.spanY));\n}\n\n/**\n * The view, given what it must fit: the outermost circle and the `reach` with\n * the margin on top, still centred on the centre; else every area and the\n * reach together. Without a reach it is exactly `viewBoxFor`'s.\n */\nexport function viewWithin(\n  outermostMetres: number | null,\n  reach: PlaneBox | null,\n  areaBoxes: () => readonly (PlaneBox | null)[],\n): PlaneBox | null {\n  if (outermostMetres !== null) {\n    return viewBoxFor(Math.max(outermostMetres, reach === null ? 0 : farthestEdge(reach)), null);\n  }\n  return viewBoxFor(null, unionBox([...areaBoxes(), reach]));\n}\n\n/** The middle of every area, for a map with no centre of its own. */\nexport function centreOf(regions: readonly RegionMapRegion[]): { latitude: number; longitude: number } | null {\n  const bounds = boundsOfRings(regions.flatMap((r) => r.rings));\n  if (bounds === null) return null;\n  return { latitude: (bounds.south + bounds.north) / 2, longitude: (bounds.west + bounds.east) / 2 };\n}\n\n/**\n * The square `RegionMap` shows for these props, in projected metres around\n * `center` (or the areas' middle) — for a host that lays its own HTML over the\n * drawing at the same scale: a point `p` sits at\n * `(p.x - view.minX) / view.spanX` across. With circles the view is centred,\n * so its half-side is `view.spanX / 2`.\n */\nexport function regionMapView({\n  regions,\n  center,\n  circles = [],\n  reach,\n}: {\n  regions: readonly RegionMapRegion[];\n  center: { latitude: number; longitude: number } | null;\n  circles?: readonly RegionMapCircle[];\n  reach?: RegionMapReach;\n}): PlaneBox | null {\n  const origin = center ?? centreOf(regions);\n  if (origin === null) return null;\n  const projection = projectionAt(origin);\n  return viewWithin(\n    extent(circles.map((c) => c.radiusMetres))?.max ?? null,\n    reach === undefined ? null : reachBox(reach, projection),\n    () => regions.map((r) => planeBounds(projectRings(r.rings, projection))),\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-Q2ERGAQO.js → chunk-FYAW5GBF.js}

@@ -4,15 +4,18 @@ import {
 import {
   useCalendar
 } from "./chunk-TPMT3J32.js";
+import {
+  navigateFocus
+} from "./chunk-LZOCNAUA.js";
 import {
   resolveCalendarProps
 } from "./chunk-I4K5JMS4.js";
 import {
   CalendarSelectorsMonth
-} from "./chunk-5BVAUUWL.js";
+} from "./chunk-X37NTEVS.js";
 import {
   CalendarMonth
-} from "./chunk-YDIC6LSP.js";
+} from "./chunk-VCQFDQM3.js";
 import {
   resolveLabels
 } from "./chunk-LL2BWQPM.js";
@@ -27,7 +30,7 @@ import {
 // src/components/form/Calendar/Calendar.tsx
 import Box from "@mui/material/Box/index.js";
 import Paper from "@mui/material/Paper/index.js";
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var containerSx = (monthsToShow) => ({
   p: 3,
@@ -43,6 +46,7 @@ var containerSx = (monthsToShow) => ({
 });
 var buildDayContext = (props, calendar) => ({
   selectionMode: props.selectionMode,
+  locale: props.locale,
   value: props.value,
   range: props.range,
   showOutsideDays: props.showOutsideDays,
@@ -68,6 +72,23 @@ var useRootRef = (forwarded) => {
   );
   return { rootRef, setRoot };
 };
+var OWN_MONTH_STOP = '[role="gridcell"][tabindex="0"][data-in-month="true"]';
+var ANY_STOP = '[role="gridcell"][tabindex="0"]';
+var useFollowDayFocus = (rootRef, focusedDate, firstDayOfWeek) => {
+  const movedFrom = useRef(null);
+  useEffect(() => {
+    const from = movedFrom.current;
+    movedFrom.current = null;
+    if (from === null || from === focusedDate.getTime()) return;
+    const root = rootRef.current;
+    (root?.querySelector(OWN_MONTH_STOP) ?? root?.querySelector(ANY_STOP))?.focus();
+  }, [rootRef, focusedDate]);
+  return (event) => {
+    const onDay = event.target.getAttribute("role") === "gridcell";
+    const moves = navigateFocus(event.key, focusedDate, { firstDayOfWeek, shiftKey: event.shiftKey }) !== null;
+    movedFrom.current = onDay && moves ? focusedDate.getTime() : null;
+  };
+};
 var Calendar = React.forwardRef((componentProps, ref) => {
   const props = resolveCalendarProps(componentProps);
   const { monthsToShow, locale, renderHeader, renderFooter, className, ariaLabel } = props;
@@ -76,6 +97,8 @@ var Calendar = React.forwardRef((componentProps, ref) => {
   const bounds = { minDate: props.minDate, maxDate: props.maxDate };
   const picker = useCalendarPicker({ rootRef, bounds, ...calendar });
   const dayContext = buildDayContext(props, calendar);
+  const noteKeyTarget = useFollowDayFocus(rootRef, calendar.focusedDate, props.firstDayOfWeek);
+  const labels = resolveLabels(EN_US_UI_LABELS.calendar, props.labels);
   const firstMonth = calendar.monthMatrices[0];
   return /* @__PURE__ */ jsxs(
     Paper,
@@ -85,7 +108,10 @@ var Calendar = React.forwardRef((componentProps, ref) => {
       role: "application",
       "aria-label": ariaLabel,
       tabIndex: 0,
-      onKeyDown: picker.view === "days" ? calendar.handleKeyDown : void 0,
+      onKeyDown: picker.view === "days" ? (event) => {
+        noteKeyTarget(event);
+        calendar.handleKeyDown(event);
+      } : void 0,
       "data-testid": "calendar-container",
       sx: containerSx(monthsToShow),
       children: [
@@ -97,7 +123,7 @@ var Calendar = React.forwardRef((componentProps, ref) => {
             weekdayNames: calendar.weekdayNames,
             dayContext,
             bounds,
-            labels: resolveLabels(EN_US_UI_LABELS.calendar, props.labels),
+            labels,
             picker,
             onPreviousMonth: () => {
               picker.showDays();
@@ -117,6 +143,7 @@ var Calendar = React.forwardRef((componentProps, ref) => {
             locale,
             weekdayNames: calendar.weekdayNames,
             renderHeader,
+            labels: props.labels ? labels : void 0,
             onPreviousMonth: calendar.goToPreviousMonth,
             onNextMonth: calendar.goToNextMonth,
             dayContext
@@ -135,4 +162,4 @@ export {
   Calendar,
   Calendar_default
 };
-//# sourceMappingURL=chunk-Q2ERGAQO.js.map
+//# sourceMappingURL=chunk-FYAW5GBF.js.map

package/dist/chunk-FYAW5GBF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Calendar/Calendar.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { resolveLabels } from '../../../utils/resolve-labels';\n\nimport { resolveCalendarProps } from './Calendar.helpers';\nimport { useCalendar } from './Calendar.hooks';\nimport { navigateFocus } from './Calendar.keyboard';\nimport { useCalendarPicker } from './Calendar.picker';\nimport type { CalendarProps, ResolvedCalendarProps } from './Calendar.types';\nimport type { DayCellContext } from './CalendarDayCell';\nimport { CalendarMonth } from './CalendarMonth';\nimport { CalendarSelectorsMonth } from './CalendarSelectorsMonth';\n\nconst containerSx = (monthsToShow: number): SxProps<Theme> => ({\n  p: 3,\n  display: 'flex',\n  flexDirection: monthsToShow > 1 ? 'row' : 'column',\n  gap: 3,\n  outline: 'none',\n  '&:focus-within': {\n    outline: (theme: Theme) => `${rem(theme, 2)} solid`,\n    outlineColor: 'primary.main',\n    outlineOffset: sxRem(2),\n  },\n});\n\ntype CalendarState = ReturnType<typeof useCalendar>;\n\nconst buildDayContext = (props: ResolvedCalendarProps, calendar: CalendarState): DayCellContext => ({\n  selectionMode: props.selectionMode,\n  locale: props.locale,\n  value: props.value,\n  range: props.range,\n  showOutsideDays: props.showOutsideDays,\n  renderDay: props.renderDay,\n  dayClassName: props.dayClassName,\n  hoveredDate: calendar.hoveredDate,\n  focusedDate: calendar.focusedDate,\n  today: calendar.today,\n  isDisabled: calendar.isDisabled,\n  onSelect: calendar.handleDateClick,\n  onHover: calendar.handleDateMouseEnter,\n  onHoverEnd: calendar.handleDateMouseLeave,\n});\n\n// The container is the forwarded ref's AND the picker's: focus falls back to it.\nconst useRootRef = (forwarded: React.ForwardedRef<HTMLDivElement>) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const setRoot = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      if (typeof forwarded === 'function') forwarded(node);\n      else if (forwarded) forwarded.current = node;\n    },\n    [forwarded],\n  );\n  return { rootRef, setRoot };\n};\n\n/** The tab stop as a day of its OWN month — side by side, an outside copy of it comes first in the DOM. */\nconst OWN_MONTH_STOP = '[role=\"gridcell\"][tabindex=\"0\"][data-in-month=\"true\"]';\nconst ANY_STOP = '[role=\"gridcell\"][tabindex=\"0\"]';\n\n/**\n * Keeps the keyboard's place visible when it is on a DAY.\n *\n * The arrows move the grid's one tab stop (`focusedDate`), and that is enough\n * while the container holds focus. But a reader who tabbed onto a day, or\n * clicked one, has focus on that day's button: the tab stop moved and focus\n * stayed behind on a cell that is no longer it, so the ring sat on the old day\n * and a month change unmounted it under the reader.\n *\n * So a NAVIGATION key pressed on a day notes where the tab stop was, and once\n * it has moved, focus follows it to the day in its own month. Any other key —\n * Enter, Tab, Escape — clears the note: Enter re-sets the same day and must\n * leave focus alone, and a stale note would pull focus into the grid on the\n * next mouse pick.\n */\nconst useFollowDayFocus = (\n  rootRef: React.RefObject<HTMLDivElement | null>,\n  focusedDate: Date,\n  firstDayOfWeek: number,\n) => {\n  const movedFrom = useRef<number | null>(null);\n  useEffect(() => {\n    const from = movedFrom.current;\n    movedFrom.current = null;\n    if (from === null || from === focusedDate.getTime()) return;\n    const root = rootRef.current;\n    (root?.querySelector<HTMLElement>(OWN_MONTH_STOP) ?? root?.querySelector<HTMLElement>(ANY_STOP))?.focus();\n  }, [rootRef, focusedDate]);\n  return (event: React.KeyboardEvent) => {\n    const onDay = (event.target as HTMLElement).getAttribute('role') === 'gridcell';\n    const moves = navigateFocus(event.key, focusedDate, { firstDayOfWeek, shiftKey: event.shiftKey }) !== null;\n    movedFrom.current = onDay && moves ? focusedDate.getTime() : null;\n  };\n};\n\nexport const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((componentProps, ref) => {\n  const props = resolveCalendarProps(componentProps);\n  const { monthsToShow, locale, renderHeader, renderFooter, className, ariaLabel } = props;\n\n  const calendar = useCalendar(props);\n  const { rootRef, setRoot } = useRootRef(ref);\n  const bounds = { minDate: props.minDate, maxDate: props.maxDate };\n  const picker = useCalendarPicker({ rootRef, bounds, ...calendar });\n  const dayContext = buildDayContext(props, calendar);\n  const noteKeyTarget = useFollowDayFocus(rootRef, calendar.focusedDate, props.firstDayOfWeek);\n  const labels = resolveLabels(EN_US_UI_LABELS.calendar, props.labels);\n  // The selectors caption always resolves to one month (see the helpers).\n  const firstMonth = calendar.monthMatrices[0];\n\n  return (\n    <Paper\n      ref={setRoot}\n      className={className}\n      role=\"application\"\n      aria-label={ariaLabel}\n      tabIndex={0}\n      // The day keys belong to the days: with a month or year grid open there\n      // is no focused day on screen to move.\n      onKeyDown={\n        picker.view === 'days'\n          ? (event) => {\n              noteKeyTarget(event);\n              calendar.handleKeyDown(event);\n            }\n          : undefined\n      }\n      data-testid=\"calendar-container\"\n      sx={containerSx(monthsToShow)}\n    >\n      <Box ref={calendar.gridRef} sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>\n        {props.captionLayout === 'selectors' && firstMonth ? (\n          <CalendarSelectorsMonth\n            matrix={firstMonth}\n            locale={locale}\n            weekdayNames={calendar.weekdayNames}\n            dayContext={dayContext}\n            bounds={bounds}\n            labels={labels}\n            picker={picker}\n            onPreviousMonth={() => {\n              picker.showDays();\n              calendar.goToPreviousMonth();\n            }}\n            onNextMonth={() => {\n              picker.showDays();\n              calendar.goToNextMonth();\n            }}\n          />\n        ) : (\n          calendar.monthMatrices.map((matrix, index) => (\n            <CalendarMonth\n              key={`month-${matrix.year}-${matrix.month}`}\n              matrix={matrix}\n              monthIndex={index}\n              monthsToShow={monthsToShow}\n              locale={locale}\n              weekdayNames={calendar.weekdayNames}\n              renderHeader={renderHeader}\n              // Only a host that passed `labels` gets named arrows: without\n              // them the arrows caption stays exactly as it always was.\n              labels={props.labels ? labels : undefined}\n              onPreviousMonth={calendar.goToPreviousMonth}\n              onNextMonth={calendar.goToNextMonth}\n              dayContext={dayContext}\n            />\n          ))\n        )}\n      </Box>\n\n      {renderFooter && (\n        <Box sx={{ mt: 2, pt: 2, borderTop: 1, borderColor: 'divider' }}>{renderFooter}</Box>\n      )}\n    </Paper>\n  );\n});\n\nCalendar.displayName = 'Calendar';\n\nexport default Calendar;\n"],"mappings":"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","names":[]}

package/dist/{chunk-GMRQPNG3.js → chunk-G2NVBCF7.js}

@@ -1,22 +1,19 @@
+import {
+  centreOf,
+  reachBox,
+  viewWithin
+} from "./chunk-FWAY2SAI.js";
 import {
   drawOrder,
   extent,
   geometryCache,
   hitRegion,
-  projectionAt,
-  viewBoxFor
+  projectionAt
 } from "./chunk-COOSJKZL.js";
 
 // src/components/data-display/RegionMap/RegionMap.hooks.ts
 import React from "react";
 var TOLERANCE_SHARE = 1 / 45;
-function centreOf(regions) {
-  const points = regions.flatMap((r) => r.rings.flat());
-  const lats = extent(points.map(([lat]) => lat));
-  const lngs = extent(points.map(([, lng]) => lng));
-  if (lats === null || lngs === null) return null;
-  return { latitude: (lats.min + lats.max) / 2, longitude: (lngs.min + lngs.max) / 2 };
-}
 function svgPoint(event) {
   const svg = event.currentTarget;
   const matrix = typeof svg.getScreenCTM === "function" ? svg.getScreenCTM() : null;
@@ -24,14 +21,6 @@ function svgPoint(event) {
   const point = new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix.inverse());
   return { x: point.x, y: point.y };
 }
-function viewOf(outermostMetres, drawable) {
-  if (outermostMetres !== null) return viewBoxFor(outermostMetres, null);
-  const boxes = drawable().filter((box) => box !== null);
-  const xs = extent(boxes.flatMap((b) => [b.minX, b.minX + b.spanX]));
-  const ys = extent(boxes.flatMap((b) => [b.minY, b.minY + b.spanY]));
-  if (xs === null || ys === null) return null;
-  return viewBoxFor(null, { minX: xs.min, minY: ys.min, spanX: xs.max - xs.min, spanY: ys.max - ys.min });
-}
 function tappedRegion(event, pointer, drawn, view) {
   const targetId = event.target.getAttribute("data-region-id");
   if (pointer === "mouse" && targetId) return targetId;
@@ -46,21 +35,27 @@ function tappedRegion(event, pointer, drawn, view) {
 function useGeometry(origin) {
   const lat = origin?.latitude ?? null;
   const lng = origin?.longitude ?? null;
-  return React.useMemo(
-    () => lat === null || lng === null ? null : geometryCache(projectionAt({ latitude: lat, longitude: lng })),
-    [lat, lng]
-  );
+  return React.useMemo(() => {
+    if (lat === null || lng === null) return { projection: null, geometryOf: null };
+    const projection = projectionAt({ latitude: lat, longitude: lng });
+    return { projection, geometryOf: geometryCache(projection) };
+  }, [lat, lng]);
 }
 function useRegionMap({
   regions,
   center,
   circles = [],
+  reach,
   onToggle
 }) {
-  const geometryOf = useGeometry(center ?? centreOf(regions));
+  const { projection, geometryOf } = useGeometry(center ?? centreOf(regions));
   const radii = circles.map((c) => c.radiusMetres);
   const outermostMetres = extent(radii)?.max ?? null;
-  const view = geometryOf === null ? null : viewOf(outermostMetres, () => regions.map((r) => geometryOf(r.rings).bounds));
+  const view = projection === null || geometryOf === null ? null : viewWithin(
+    outermostMetres,
+    reach === void 0 ? null : reachBox(reach, projection),
+    () => regions.map((r) => geometryOf(r.rings).bounds)
+  );
   const drawn = geometryOf && view ? drawOrder(regions, geometryOf, view) : [];
   const pointerType = React.useRef("mouse");
   const onPointerDown = (event) => {
@@ -71,10 +66,10 @@ function useRegionMap({
     const hit = tappedRegion(event, pointerType.current, drawn, view);
     if (hit) onToggle(hit);
   };
-  return { view, drawn, radii, outermostMetres, onPointerDown, onClick };
+  return { view, projection, drawn, radii, outermostMetres, onPointerDown, onClick };
 }
 
 export {
   useRegionMap
 };
-//# sourceMappingURL=chunk-GMRQPNG3.js.map
+//# sourceMappingURL=chunk-G2NVBCF7.js.map

package/dist/chunk-G2NVBCF7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/RegionMap/RegionMap.hooks.ts"],"sourcesContent":["import React from 'react';\n\nimport {\n  drawOrder,\n  extent,\n  geometryCache,\n  hitRegion,\n  projectionAt,\n  type DrawnRegion,\n  type PlaneBox,\n  type Projection,\n} from './RegionMap.helpers';\nimport type { RegionMapProps } from './RegionMap.types';\nimport { centreOf, reachBox, viewWithin } from './RegionMap.view';\n\n/** What the drawing needs, derived from the props. */\nexport interface RegionMapModel {\n  /** The square shown, or null when there is nothing to centre on. */\n  view: PlaneBox | null;\n  /** The projection drawn with, or null when there is nothing to centre on. */\n  projection: Projection | null;\n  drawn: DrawnRegion[];\n  /** Radii drawn, in metres; empty without circles. */\n  radii: number[];\n  outermostMetres: number | null;\n  /** The tap handlers for the drawing's `<svg>`. */\n  onPointerDown: (event: React.PointerEvent<SVGSVGElement>) => void;\n  onClick: (event: React.MouseEvent<SVGSVGElement>) => void;\n}\n\n/** A tap reaches an area this close: a share of the view (~8 px on a phone). */\nconst TOLERANCE_SHARE = 1 / 45;\n\n/** The click, in the drawing's own coordinates — or null where it cannot be read. */\nfunction svgPoint(event: React.MouseEvent<SVGSVGElement>): { x: number; y: number } | null {\n  const svg = event.currentTarget;\n  const matrix = typeof svg.getScreenCTM === 'function' ? svg.getScreenCTM() : null;\n  if (!matrix || typeof DOMPoint === 'undefined') return null;\n  const point = new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix.inverse());\n  return { x: point.x, y: point.y };\n}\n\n/** Which area a click or tap means — see `useRegionMap`. */\nfunction tappedRegion(\n  event: React.MouseEvent<SVGSVGElement>,\n  pointer: string,\n  drawn: readonly DrawnRegion[],\n  view: PlaneBox,\n): string | null {\n  const targetId = (event.target as Element).getAttribute('data-region-id');\n  if (pointer === 'mouse' && targetId) return targetId;\n  const point = svgPoint(event);\n  if (point === null) return targetId;\n  return hitRegion(\n    drawn.map((d) => ({ id: d.id, geometry: d.geometry })),\n    point,\n    view.spanX * TOLERANCE_SHARE,\n  );\n}\n\n/** The projection and geometry cache for a centre, or nulls without one. */\nfunction useGeometry(origin: { latitude: number; longitude: number } | null): {\n  projection: Projection | null;\n  geometryOf: ReturnType<typeof geometryCache> | null;\n} {\n  const lat = origin?.latitude ?? null;\n  const lng = origin?.longitude ?? null;\n  return React.useMemo(() => {\n    if (lat === null || lng === null) return { projection: null, geometryOf: null };\n    const projection = projectionAt({ latitude: lat, longitude: lng });\n    return { projection, geometryOf: geometryCache(projection) };\n  }, [lat, lng]);\n}\n\n/**\n * The projection, the view, the areas in draw order and the tap handlers.\n *\n * Geometry is projected once per `rings` identity and centre\n * (`geometryCache`), so a toggle — which changes `excluded`, not `rings` —\n * re-projects nothing.\n *\n * A MOUSE click on a path is that path's area: a pointer is precise. Any\n * other tap — a finger, a pen — goes to `hitRegion`: the smallest area within\n * a few pixels, so a sliver beside a big area is reachable from the map.\n */\nexport function useRegionMap({\n  regions,\n  center,\n  circles = [],\n  reach,\n  onToggle,\n}: Pick<RegionMapProps, 'regions' | 'center' | 'circles' | 'reach' | 'onToggle'>): RegionMapModel {\n  const { projection, geometryOf } = useGeometry(center ?? centreOf(regions));\n  const radii = circles.map((c) => c.radiusMetres);\n  const outermostMetres = extent(radii)?.max ?? null;\n  const view =\n    projection === null || geometryOf === null\n      ? null\n      : viewWithin(outermostMetres, reach === undefined ? null : reachBox(reach, projection), () =>\n          regions.map((r) => geometryOf(r.rings).bounds),\n        );\n  const drawn = geometryOf && view ? drawOrder(regions, geometryOf, view) : [];\n  const pointerType = React.useRef<string>('mouse');\n\n  const onPointerDown = (event: React.PointerEvent<SVGSVGElement>): void => {\n    pointerType.current = event.pointerType || 'mouse';\n  };\n\n  const onClick = (event: React.MouseEvent<SVGSVGElement>): void => {\n    if (!onToggle || view === null) return;\n    const hit = tappedRegion(event, pointerType.current, drawn, view);\n    if (hit) onToggle(hit);\n  };\n\n  return { view, projection, drawn, radii, outermostMetres, onPointerDown, onClick };\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,WAAW;AA+BlB,IAAM,kBAAkB,IAAI;AAG5B,SAAS,SAAS,OAAyE;AACzF,QAAM,MAAM,MAAM;AAClB,QAAM,SAAS,OAAO,IAAI,iBAAiB,aAAa,IAAI,aAAa,IAAI;AAC7E,MAAI,CAAC,UAAU,OAAO,aAAa,YAAa,QAAO;AACvD,QAAM,QAAQ,IAAI,SAAS,MAAM,SAAS,MAAM,OAAO,EAAE,gBAAgB,OAAO,QAAQ,CAAC;AACzF,SAAO,EAAE,GAAG,MAAM,GAAG,GAAG,MAAM,EAAE;AAClC;AAGA,SAAS,aACP,OACA,SACA,OACA,MACe;AACf,QAAM,WAAY,MAAM,OAAmB,aAAa,gBAAgB;AACxE,MAAI,YAAY,WAAW,SAAU,QAAO;AAC5C,QAAM,QAAQ,SAAS,KAAK;AAC5B,MAAI,UAAU,KAAM,QAAO;AAC3B,SAAO;AAAA,IACL,MAAM,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,UAAU,EAAE,SAAS,EAAE;AAAA,IACrD;AAAA,IACA,KAAK,QAAQ;AAAA,EACf;AACF;AAGA,SAAS,YAAY,QAGnB;AACA,QAAM,MAAM,QAAQ,YAAY;AAChC,QAAM,MAAM,QAAQ,aAAa;AACjC,SAAO,MAAM,QAAQ,MAAM;AACzB,QAAI,QAAQ,QAAQ,QAAQ,KAAM,QAAO,EAAE,YAAY,MAAM,YAAY,KAAK;AAC9E,UAAM,aAAa,aAAa,EAAE,UAAU,KAAK,WAAW,IAAI,CAAC;AACjE,WAAO,EAAE,YAAY,YAAY,cAAc,UAAU,EAAE;AAAA,EAC7D,GAAG,CAAC,KAAK,GAAG,CAAC;AACf;AAaO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AACF,GAAkG;AAChG,QAAM,EAAE,YAAY,WAAW,IAAI,YAAY,UAAU,SAAS,OAAO,CAAC;AAC1E,QAAM,QAAQ,QAAQ,IAAI,CAAC,MAAM,EAAE,YAAY;AAC/C,QAAM,kBAAkB,OAAO,KAAK,GAAG,OAAO;AAC9C,QAAM,OACJ,eAAe,QAAQ,eAAe,OAClC,OACA;AAAA,IAAW;AAAA,IAAiB,UAAU,SAAY,OAAO,SAAS,OAAO,UAAU;AAAA,IAAG,MACpF,QAAQ,IAAI,CAAC,MAAM,WAAW,EAAE,KAAK,EAAE,MAAM;AAAA,EAC/C;AACN,QAAM,QAAQ,cAAc,OAAO,UAAU,SAAS,YAAY,IAAI,IAAI,CAAC;AAC3E,QAAM,cAAc,MAAM,OAAe,OAAO;AAEhD,QAAM,gBAAgB,CAAC,UAAmD;AACxE,gBAAY,UAAU,MAAM,eAAe;AAAA,EAC7C;AAEA,QAAM,UAAU,CAAC,UAAiD;AAChE,QAAI,CAAC,YAAY,SAAS,KAAM;AAChC,UAAM,MAAM,aAAa,OAAO,YAAY,SAAS,OAAO,IAAI;AAChE,QAAI,IAAK,UAAS,GAAG;AAAA,EACvB;AAEA,SAAO,EAAE,MAAM,YAAY,OAAO,OAAO,iBAAiB,eAAe,QAAQ;AACnF;","names":[]}