@12-apps/ui 6.84.0 → 6.86.0

package/dist/{chunk-6MOJK2QT.js → chunk-4SQ2WCZA.js}

@@ -1,6 +1,6 @@
 import {
   fieldHeight
-} from "./chunk-QQHZBJMU.js";
+} from "./chunk-RGVNXES5.js";
 import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
@@ -238,4 +238,4 @@ function SavedViewsMenu({
 export {
   SavedViewsMenu
 };
-//# sourceMappingURL=chunk-6MOJK2QT.js.map
+//# sourceMappingURL=chunk-4SQ2WCZA.js.map

package/dist/{chunk-QHFAKEZZ.js → chunk-4V37DAMA.js}

@@ -1,12 +1,12 @@
 import {
   useSummaryInfo
-} from "./chunk-XXUTD74L.js";
+} from "./chunk-MK6UXAWY.js";
 import {
   PendingSpinner,
   SaveError,
   SettingHeader,
   partTestId
-} from "./chunk-Q7QQXNL7.js";
+} from "./chunk-UT545JBQ.js";
 import {
   clampStyles,
   descriptionStyles
@@ -87,4 +87,4 @@ export {
   useSettingSwitchIds,
   SettingSwitchBlock
 };
-//# sourceMappingURL=chunk-QHFAKEZZ.js.map
+//# sourceMappingURL=chunk-4V37DAMA.js.map

package/dist/{chunk-PWXDMP7G.js → chunk-52RHAAIH.js}

@@ -1,26 +1,26 @@
 import {
   ClearAllControl,
   CloseSearchControl
-} from "./chunk-YH7G44WL.js";
+} from "./chunk-QLJU7UUI.js";
 import {
   MoreFilters
-} from "./chunk-FYJDI5BW.js";
+} from "./chunk-OQN2FHEL.js";
 import {
   PillControl
-} from "./chunk-ATJTGQYE.js";
+} from "./chunk-GOQOVKUZ.js";
+import {
+  isQuickActive
+} from "./chunk-KYUEO2IO.js";
 import {
   RangePill
-} from "./chunk-KEBYZ2MO.js";
+} from "./chunk-CARUHKZW.js";
 import {
   QuickChip
-} from "./chunk-MHFXJRLD.js";
-import {
-  isQuickActive
-} from "./chunk-KYUEO2IO.js";
+} from "./chunk-AT6UKTH4.js";
 import {
   CollapsedSearch,
   InlineKeyword
-} from "./chunk-M74YHHJE.js";
+} from "./chunk-ACBHZG3Z.js";
 
 // src/components/data-display/DataViews/data-views-inline-bar.tsx
 import Box from "@mui/material/Box/index.js";
@@ -248,4 +248,4 @@ function FilterSlots({
 export {
   InlineFilterControls
 };
-//# sourceMappingURL=chunk-PWXDMP7G.js.map
+//# sourceMappingURL=chunk-52RHAAIH.js.map

package/dist/{chunk-E3E4L7MH.js → chunk-56GWNA5V.js}

@@ -1,6 +1,9 @@
+import {
+  AddressOption
+} from "./chunk-P5JCOFK3.js";
 import {
   AddressInputField
-} from "./chunk-ZCCKIWZU.js";
+} from "./chunk-NYA26GV2.js";
 import {
   MIN_QUERY_LENGTH,
   addressOptionLabel,
@@ -9,9 +12,6 @@ import {
 import {
   AddressSuggestionsPaper
 } from "./chunk-C5RQBTRZ.js";
-import {
-  AddressOption
-} from "./chunk-P5JCOFK3.js";
 import {
   resolveLabels
 } from "./chunk-LL2BWQPM.js";
@@ -99,4 +99,4 @@ var AddressAutocompleteField = ({
 export {
   AddressAutocompleteField
 };
-//# sourceMappingURL=chunk-E3E4L7MH.js.map
+//# sourceMappingURL=chunk-56GWNA5V.js.map

package/dist/{chunk-I54LHHZS.js → chunk-5CP5Z3YU.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-SUTOAW7I.js";
 import {
   isoToMasked
-} from "./chunk-D7SOXI2K.js";
+} from "./chunk-72HOUWAW.js";
 import {
   EN_US_UI_LABELS
 } from "./chunk-XOXXG7Q5.js";
@@ -65,4 +65,4 @@ export {
   resolveQuickRanges,
   activeQuickRangeId
 };
-//# sourceMappingURL=chunk-I54LHHZS.js.map
+//# sourceMappingURL=chunk-5CP5Z3YU.js.map

package/dist/{chunk-L6UTYEUS.js → chunk-5S5K73I6.js}

@@ -1,9 +1,9 @@
 import {
   statusMessage
-} from "./chunk-I54LHHZS.js";
+} from "./chunk-5CP5Z3YU.js";
 import {
   DayBoundInput
-} from "./chunk-D7SOXI2K.js";
+} from "./chunk-72HOUWAW.js";
 
 // src/components/form/DateRangePicker/DateRangePickerFields.tsx
 import Box from "@mui/material/Box/index.js";
@@ -64,4 +64,4 @@ function DateRangeFields({
 export {
   DateRangeFields
 };
-//# sourceMappingURL=chunk-L6UTYEUS.js.map
+//# sourceMappingURL=chunk-5S5K73I6.js.map

package/dist/{chunk-RBW5QQXW.js → chunk-5XTPEA3O.js}

@@ -12,7 +12,7 @@ import {
   SequenceHeader,
   SequenceIntroBody,
   SequenceStepBody
-} from "./chunk-BLNFOP2O.js";
+} from "./chunk-T6YTDEY4.js";
 import {
   chromeSx,
   columnSx,
@@ -159,4 +159,4 @@ function SequenceResolver(props) {
 export {
   SequenceResolver
 };
-//# sourceMappingURL=chunk-RBW5QQXW.js.map
+//# sourceMappingURL=chunk-5XTPEA3O.js.map

package/dist/{chunk-LOGSJH2Q.js → chunk-5ZC7CNU4.js}

@@ -1,6 +1,6 @@
 import {
   GridToolbar
-} from "./chunk-O4G7QKDU.js";
+} from "./chunk-AWUFS2ZC.js";
 
 // src/components/data-display/DataViews/data-views-shell-toolbar.tsx
 import { jsx } from "react/jsx-runtime";
@@ -68,4 +68,4 @@ function ShellToolbar({
 export {
   ShellToolbar
 };
-//# sourceMappingURL=chunk-LOGSJH2Q.js.map
+//# sourceMappingURL=chunk-5ZC7CNU4.js.map

package/dist/{chunk-V4JMZZGH.js → chunk-6A4PTK5Q.js}

@@ -1,12 +1,12 @@
 import {
   fieldHeight
-} from "./chunk-QQHZBJMU.js";
-import {
-  fieldEdge
-} from "./chunk-7ZADLRLP.js";
+} from "./chunk-RGVNXES5.js";
 import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7ZADLRLP.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -172,4 +172,4 @@ export {
   StackedTrigger,
   PillTrigger
 };
-//# sourceMappingURL=chunk-V4JMZZGH.js.map
+//# sourceMappingURL=chunk-6A4PTK5Q.js.map

package/dist/{chunk-2P5ZBBTL.js → chunk-6GICMRDX.js}

@@ -1,21 +1,21 @@
 import {
   CategoryPanelList
-} from "./chunk-QOTMQLMW.js";
+} from "./chunk-6OISIUZM.js";
 import {
   CategoryPanelHead,
   CategoryPinnedTray
-} from "./chunk-7AC2UGTU.js";
+} from "./chunk-Y46R26TE.js";
 import {
   CategoryMultiFoot,
   CategorySingleFoot
-} from "./chunk-GXSHLMT4.js";
+} from "./chunk-WDSJ6SVY.js";
 import {
   CategoryQuickActions
 } from "./chunk-PGGYZU7Q.js";
 import {
   panelSx,
   sheetSx
-} from "./chunk-AKBL7S7A.js";
+} from "./chunk-VPGDYI63.js";
 import {
   removeChip
 } from "./chunk-PN4HVM43.js";
@@ -156,4 +156,4 @@ function PanelFooter({
 export {
   CategoryPanel
 };
-//# sourceMappingURL=chunk-2P5ZBBTL.js.map
+//# sourceMappingURL=chunk-6GICMRDX.js.map

package/dist/{chunk-QOTMQLMW.js → chunk-6OISIUZM.js}

@@ -1,12 +1,12 @@
 import {
   CategorySectionHeading,
   CategoryTreeRow
-} from "./chunk-4HBCWKIX.js";
+} from "./chunk-SGFRSRAL.js";
 import {
   emptySx,
   listSx,
   skeletonSx
-} from "./chunk-AKBL7S7A.js";
+} from "./chunk-VPGDYI63.js";
 import {
   categoryCheckState,
   isLeafCategory,
@@ -144,4 +144,4 @@ function CategoryPanelList(props) {
 export {
   CategoryPanelList
 };
-//# sourceMappingURL=chunk-QOTMQLMW.js.map
+//# sourceMappingURL=chunk-6OISIUZM.js.map

package/dist/{chunk-34FX3NRZ.js → chunk-6PTP5NID.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-AY5GKCH7.js";
 import {
   Button
-} from "./chunk-OKDAHCYE.js";
+} from "./chunk-HJJR2WGL.js";
 
 // src/components/data-display/CardKit/CardKebab.tsx
 import { jsx } from "react/jsx-runtime";
@@ -25,4 +25,4 @@ function CardKebab({
 export {
   CardKebab
 };
-//# sourceMappingURL=chunk-34FX3NRZ.js.map
+//# sourceMappingURL=chunk-6PTP5NID.js.map

package/dist/{chunk-3XZZSHE5.js → chunk-6VTOGR36.js}

@@ -11,13 +11,13 @@ import {
 import {
   fieldControlStyles,
   fieldHeight
-} from "./chunk-QQHZBJMU.js";
-import {
-  fieldEdge
-} from "./chunk-7ZADLRLP.js";
+} from "./chunk-RGVNXES5.js";
 import {
   fieldRadius
 } from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7ZADLRLP.js";
 import {
   FIELD_BORDER_WIDTH
 } from "./chunk-O6MJWHU5.js";
@@ -158,4 +158,4 @@ export {
   SelectFieldControl,
   formControlSize
 };
-//# sourceMappingURL=chunk-3XZZSHE5.js.map
+//# sourceMappingURL=chunk-6VTOGR36.js.map

package/dist/{chunk-RLDTV5I2.js → chunk-6WHIJPEF.js}

@@ -1,6 +1,6 @@
 import {
   resolveMapCopy
-} from "./chunk-UIWVSZ6I.js";
+} from "./chunk-CSGBHYW6.js";
 import {
   MAX_ZOOM,
   MIN_ZOOM
@@ -116,4 +116,4 @@ var MapControlBar = ({
 export {
   MapControlBar
 };
-//# sourceMappingURL=chunk-RLDTV5I2.js.map
+//# sourceMappingURL=chunk-6WHIJPEF.js.map

package/dist/{chunk-6LMYQJZP.js → chunk-6YSGP2WS.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   Select
-} from "./chunk-N3LW5ER5.js";
+} from "./chunk-NZBEE2PR.js";
 import {
   FormControl,
   FormLabel,
@@ -25,6 +25,7 @@ function SelectField({ name, options, label, placeholder }) {
         placeholder,
         value: values[name] ?? "",
         error: Boolean(error),
+        "aria-label": label,
         "data-testid": testId,
         onChange: (event) => setFieldValue(name, String(event.target.value))
       }
@@ -36,4 +37,4 @@ function SelectField({ name, options, label, placeholder }) {
 export {
   SelectField
 };
-//# sourceMappingURL=chunk-6LMYQJZP.js.map
+//# sourceMappingURL=chunk-6YSGP2WS.js.map

package/dist/{chunk-6LMYQJZP.js.map → chunk-6YSGP2WS.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/form/total-form/Fields/SelectField.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { FormControl, FormLabel, FormMessage } from '../../Form';\nimport { Select } from '../../Select';\nimport type { SelectOption } from '../../Select';\nimport { useFormContext } from '../FormContext';\n\n/** Props for the `total-form` {@link SelectField}. */\nexport interface SelectFieldProps {\n  /** Field name; also the key into the form's values/errors. */\n  name: string;\n  /** Selectable options. */\n  options: SelectOption[];\n  /** Optional visible label rendered above the select. */\n  label?: string;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n}\n\n/**\n * Select field bound to {@link useFormContext}. Composes the existing\n * `@12-apps/ui` `Form*` primitives and the `Select` control, reading its\n * value/error from context and writing the chosen value back through it.\n *\n * Renders its error via `total-form-field-<name>-message` and the select via\n * `total-form-field-<name>`.\n */\nexport function SelectField({ name, options, label, placeholder }: SelectFieldProps): React.ReactElement {\n  const { values, errors, setFieldValue } = useFormContext();\n  const error = errors[name];\n  const testId = `total-form-field-${name}`;\n\n  return (\n    <FormControl fullWidth>\n      {label && (\n        <FormLabel htmlFor={name} error={Boolean(error)}>\n          {label}\n        </FormLabel>\n      )}\n      <Select\n        options={options}\n        placeholder={placeholder}\n        value={values[name] ?? ''}\n        error={Boolean(error)}\n        data-testid={testId}\n        onChange={(event) => setFieldValue(name, String(event.target.value))}\n      />\n      {error && (\n        <FormMessage error dataTestId={`${testId}-message`}>\n          {error}\n        </FormMessage>\n      )}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmCI,SAEI,KAFJ;AANG,SAAS,YAAY,EAAE,MAAM,SAAS,OAAO,YAAY,GAAyC;AACvG,QAAM,EAAE,QAAQ,QAAQ,cAAc,IAAI,eAAe;AACzD,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,SAAS,oBAAoB,IAAI;AAEvC,SACE,qBAAC,eAAY,WAAS,MACnB;AAAA,aACC,oBAAC,aAAU,SAAS,MAAM,OAAO,QAAQ,KAAK,GAC3C,iBACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,OAAO,IAAI,KAAK;AAAA,QACvB,OAAO,QAAQ,KAAK;AAAA,QACpB,eAAa;AAAA,QACb,UAAU,CAAC,UAAU,cAAc,MAAM,OAAO,MAAM,OAAO,KAAK,CAAC;AAAA;AAAA,IACrE;AAAA,IACC,SACC,oBAAC,eAAY,OAAK,MAAC,YAAY,GAAG,MAAM,YACrC,iBACH;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../src/components/form/total-form/Fields/SelectField.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { FormControl, FormLabel, FormMessage } from '../../Form';\nimport { Select } from '../../Select';\nimport type { SelectOption } from '../../Select';\nimport { useFormContext } from '../FormContext';\n\n/** Props for the `total-form` {@link SelectField}. */\nexport interface SelectFieldProps {\n  /** Field name; also the key into the form's values/errors. */\n  name: string;\n  /** Selectable options. */\n  options: SelectOption[];\n  /** Optional visible label rendered above the select. */\n  label?: string;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n}\n\n/**\n * Select field bound to {@link useFormContext}. Composes the existing\n * `@12-apps/ui` `Form*` primitives and the `Select` control, reading its\n * value/error from context and writing the chosen value back through it.\n *\n * Renders its error via `total-form-field-<name>-message` and the select via\n * `total-form-field-<name>`.\n */\nexport function SelectField({ name, options, label, placeholder }: SelectFieldProps): React.ReactElement {\n  const { values, errors, setFieldValue } = useFormContext();\n  const error = errors[name];\n  const testId = `total-form-field-${name}`;\n\n  return (\n    <FormControl fullWidth>\n      {label && (\n        <FormLabel htmlFor={name} error={Boolean(error)}>\n          {label}\n        </FormLabel>\n      )}\n      <Select\n        options={options}\n        placeholder={placeholder}\n        value={values[name] ?? ''}\n        error={Boolean(error)}\n        // The `<label htmlFor>` above names nothing: the combobox is MUI's\n        // display div, not a labelable element. `Select` puts `aria-label` on\n        // that div, so the question names the control (FUT-4157).\n        aria-label={label}\n        data-testid={testId}\n        onChange={(event) => setFieldValue(name, String(event.target.value))}\n      />\n      {error && (\n        <FormMessage error dataTestId={`${testId}-message`}>\n          {error}\n        </FormMessage>\n      )}\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmCI,SAEI,KAFJ;AANG,SAAS,YAAY,EAAE,MAAM,SAAS,OAAO,YAAY,GAAyC;AACvG,QAAM,EAAE,QAAQ,QAAQ,cAAc,IAAI,eAAe;AACzD,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,SAAS,oBAAoB,IAAI;AAEvC,SACE,qBAAC,eAAY,WAAS,MACnB;AAAA,aACC,oBAAC,aAAU,SAAS,MAAM,OAAO,QAAQ,KAAK,GAC3C,iBACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,OAAO,IAAI,KAAK;AAAA,QACvB,OAAO,QAAQ,KAAK;AAAA,QAIpB,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,UAAU,CAAC,UAAU,cAAc,MAAM,OAAO,MAAM,OAAO,KAAK,CAAC;AAAA;AAAA,IACrE;AAAA,IACC,SACC,oBAAC,eAAY,OAAK,MAAC,YAAY,GAAG,MAAM,YACrC,iBACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/{chunk-D7SOXI2K.js → chunk-72HOUWAW.js}

@@ -1,6 +1,6 @@
 import {
   fieldTextFieldStyles
-} from "./chunk-QQHZBJMU.js";
+} from "./chunk-RGVNXES5.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -166,4 +166,4 @@ export {
   isImpossibleDay,
   DayBoundInput
 };
-//# sourceMappingURL=chunk-D7SOXI2K.js.map
+//# sourceMappingURL=chunk-72HOUWAW.js.map

package/dist/{chunk-2D4WKET2.js → chunk-75FHDUJW.js}

@@ -7,13 +7,13 @@ import {
 import {
   asFieldSize,
   fieldHeight
-} from "./chunk-QQHZBJMU.js";
-import {
-  fieldEdge
-} from "./chunk-7ZADLRLP.js";
+} from "./chunk-RGVNXES5.js";
 import {
   fieldRadius
 } from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7ZADLRLP.js";
 import {
   FIELD_BORDER_WIDTH
 } from "./chunk-O6MJWHU5.js";
@@ -264,4 +264,4 @@ export {
   segmentContainerSx,
   segmentButtonSx
 };
-//# sourceMappingURL=chunk-2D4WKET2.js.map
+//# sourceMappingURL=chunk-75FHDUJW.js.map

package/dist/{chunk-AAREDFH6.js → chunk-7TKQIZ3K.js}

@@ -1,6 +1,6 @@
 import {
   fieldHeight
-} from "./chunk-QQHZBJMU.js";
+} from "./chunk-RGVNXES5.js";
 import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
@@ -192,4 +192,4 @@ function SortByDropdown({
 export {
   SortByDropdown
 };
-//# sourceMappingURL=chunk-AAREDFH6.js.map
+//# sourceMappingURL=chunk-7TKQIZ3K.js.map

package/dist/{chunk-WPFVQVQC.js → chunk-7VUXSNVZ.js}

@@ -1,15 +1,15 @@
-import {
-  freshnessOf
-} from "./chunk-XPMGFAJ3.js";
 import {
   FLEET_DOT,
   FLEET_ROSTER,
   FLEET_ROW,
   FLEET_SKELETON
 } from "./chunk-BTQZ3EX3.js";
+import {
+  freshnessOf
+} from "./chunk-XPMGFAJ3.js";
 import {
   Skeleton
-} from "./chunk-62SXUU5U.js";
+} from "./chunk-3DPPDGOF.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -220,4 +220,4 @@ function FleetRoster({
 export {
   FleetRoster
 };
-//# sourceMappingURL=chunk-WPFVQVQC.js.map
+//# sourceMappingURL=chunk-7VUXSNVZ.js.map

package/dist/chunk-A63WU4UZ.js

@@ -0,0 +1,226 @@
+import {
+  labelPosition
+} from "./chunk-COOSJKZL.js";
+import {
+  rem,
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/RegionMap/RegionMapDrawing.tsx
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function RegionMapDrawing({
+  model,
+  showCenter,
+  highlightedIds,
+  maxHeight,
+  label,
+  tappable,
+  testId,
+  theme
+}) {
+  const hatchId = `${React.useId().replace(/:/g, "")}-hatch`;
+  const { view, drawn } = model;
+  const wanted = new Set(highlightedIds);
+  const highlighted = drawn.filter((d) => wanted.has(d.id));
+  const labelled = [...drawn.filter((d) => d.excluded), ...highlighted.filter((d) => !d.excluded)];
+  const base = drawn.map((d) => ({ id: d.id, name: d.name, geometry: d.geometry, outside: d.outside === true }));
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth: maxHeight,
+        maxHeight,
+        aspectRatio: "1 / 1",
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 1,
+        overflow: "hidden",
+        bgcolor: "background.paper"
+      },
+      "data-testid": `${testId}-canvas`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: `${view.minX} ${view.minY} ${view.spanX} ${view.spanY}`,
+            role: "img",
+            "aria-label": label,
+            onPointerDown: model.onPointerDown,
+            onClick: model.onClick,
+            style: { display: "block", width: "100%", height: "100%", cursor: tappable ? "pointer" : "default" },
+            children: [
+              /* @__PURE__ */ jsx(Hatch, { id: hatchId, pitch: view.spanX / 70, theme }),
+              /* @__PURE__ */ jsx(BaseAreas, { areas: base, testId, theme }),
+              /* @__PURE__ */ jsx(ExcludedAreas, { drawn, hatchId, testId, theme }),
+              /* @__PURE__ */ jsx(Circles, { radii: model.radii, theme }),
+              highlighted.map((d) => /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: d.geometry.path,
+                  fillRule: "evenodd",
+                  vectorEffect: "non-scaling-stroke",
+                  fill: alpha(theme.palette.primary.main, 0.3),
+                  stroke: theme.palette.primary.main,
+                  strokeWidth: 2.5,
+                  pointerEvents: "none",
+                  "data-testid": `${testId}-highlight-${d.id}`
+                },
+                `h-${d.id}`
+              )),
+              showCenter && /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: 0,
+                  cy: 0,
+                  r: view.spanX / 90,
+                  fill: theme.palette.primary.main,
+                  stroke: theme.palette.background.paper,
+                  strokeWidth: 2,
+                  vectorEffect: "non-scaling-stroke",
+                  pointerEvents: "none",
+                  "data-testid": `${testId}-center`
+                }
+              )
+            ]
+          }
+        ),
+        labelled.map((d) => /* @__PURE__ */ jsx(AreaLabel, { area: d, view, testId, theme }, `l-${d.id}`))
+      ]
+    }
+  );
+}
+function Hatch({ id, pitch, theme }) {
+  return /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("pattern", { id, width: pitch, height: pitch, patternUnits: "userSpaceOnUse", patternTransform: "rotate(45)", children: [
+    /* @__PURE__ */ jsx("rect", { width: pitch, height: pitch, fill: alpha(theme.palette.text.primary, 0.1) }),
+    /* @__PURE__ */ jsx("rect", { width: pitch / 3, height: pitch, fill: theme.palette.text.secondary })
+  ] }) });
+}
+function sameBase(a, b) {
+  if (a.theme !== b.theme || a.testId !== b.testId || a.areas.length !== b.areas.length) return false;
+  return a.areas.every((area, i) => {
+    const other = b.areas[i];
+    return area.id === other.id && area.geometry === other.geometry && area.outside === other.outside && area.name === other.name;
+  });
+}
+var BaseAreas = React.memo(function BaseAreas2({ areas, testId, theme }) {
+  const { palette } = theme;
+  return /* @__PURE__ */ jsx(Fragment, { children: areas.map((d) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: d.geometry.path,
+      fillRule: "evenodd",
+      vectorEffect: "non-scaling-stroke",
+      fill: d.outside ? palette.background.paper : palette.action.hover,
+      stroke: palette.divider,
+      strokeWidth: 1,
+      "data-region-id": d.id,
+      "data-testid": `${testId}-area-${d.id}`,
+      children: /* @__PURE__ */ jsx("title", { children: d.name })
+    },
+    d.id
+  )) });
+}, sameBase);
+function ExcludedAreas({
+  drawn,
+  hatchId,
+  testId,
+  theme
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: drawn.filter((d) => d.excluded).map((d) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: d.geometry.path,
+      fillRule: "evenodd",
+      vectorEffect: "non-scaling-stroke",
+      fill: `url(#${hatchId})`,
+      stroke: theme.palette.text.secondary,
+      strokeWidth: 1.5,
+      pointerEvents: "none",
+      "data-testid": `${testId}-excluded-${d.id}`
+    },
+    `x-${d.id}`
+  )) });
+}
+function Circles({ radii, theme }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: radii.map((radius) => /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: 0,
+      cy: 0,
+      r: radius,
+      fill: "none",
+      stroke: theme.palette.info.main,
+      strokeWidth: 1.75,
+      strokeDasharray: "7 5",
+      vectorEffect: "non-scaling-stroke",
+      pointerEvents: "none"
+    },
+    radius
+  )) });
+}
+function clampCentre(wanted, half, span, gap) {
+  if (span <= 2 * (half + gap)) return span / 2;
+  return Math.min(span - half - gap, Math.max(half + gap, wanted));
+}
+function AreaLabel({
+  area,
+  view,
+  testId,
+  theme
+}) {
+  const at = labelPosition(area.geometry.rings, view);
+  const ref = React.useRef(null);
+  const gap = remPx(theme, 4);
+  React.useEffect(() => {
+    const label = ref.current;
+    const box = label?.parentElement;
+    if (!label || !box || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(() => {
+      const width = box.clientWidth;
+      const height = box.clientHeight;
+      if (width === 0 || height === 0) return;
+      const x = clampCentre(at.fractionX * width, label.offsetWidth / 2, width, gap);
+      const y = clampCentre(at.fractionY * height, label.offsetHeight / 2, height, gap);
+      label.style.left = `${x / width * 100}%`;
+      label.style.top = `${y / height * 100}%`;
+    });
+    observer.observe(box);
+    observer.observe(label);
+    return () => observer.disconnect();
+  }, [at.fractionX, at.fractionY, gap]);
+  const halo = `0 0 ${rem(theme, 3)} ${theme.palette.background.paper}`;
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      ref,
+      component: "span",
+      "aria-hidden": true,
+      "data-testid": `${testId}-label-${area.id}`,
+      style: { left: `${(at.fractionX * 100).toFixed(2)}%`, top: `${(at.fractionY * 100).toFixed(2)}%` },
+      sx: {
+        position: "absolute",
+        transform: "translate(-50%, -50%)",
+        fontSize: rem(theme, 11),
+        fontWeight: 700,
+        lineHeight: 1.1,
+        textAlign: "center",
+        maxWidth: "45%",
+        color: "text.primary",
+        pointerEvents: "none",
+        textShadow: `${halo}, ${halo}`
+      },
+      children: area.name
+    }
+  );
+}
+
+export {
+  RegionMapDrawing
+};
+//# sourceMappingURL=chunk-A63WU4UZ.js.map