@12-apps/ui 6.85.0 → 6.86.1

package/dist/_internal/components/index.js

@@ -368,10 +368,10 @@ import "../../chunk-SUTOAW7I.js";
 import "../../chunk-TWAKMV5B.js";
 import {
   SequenceResolver
-} from "../../chunk-5XTPEA3O.js";
+} from "../../chunk-ZHYLOB7Q.js";
 import "../../chunk-3LUT2C5M.js";
 import "../../chunk-5UBP2DJ4.js";
-import "../../chunk-T6YTDEY4.js";
+import "../../chunk-WXZCNHBX.js";
 import "../../chunk-CHP3QIS3.js";
 import "../../chunk-HHPFWEJY.js";
 import "../../chunk-JD5BVIM7.js";
@@ -457,7 +457,7 @@ import "../../chunk-N7GE6BGM.js";
 import "../../chunk-JQRKXMSH.js";
 import {
   NotificationStatusNotice
-} from "../../chunk-VHGHF537.js";
+} from "../../chunk-V4CWJ7Q6.js";
 import "../../chunk-55FFONIV.js";
 import {
   detectNotificationBrowser,
@@ -523,8 +523,9 @@ import {
 import "../../chunk-ACFKPE2T.js";
 import {
   RegionMap
-} from "../../chunk-3OL2TSEJ.js";
-import "../../chunk-A63WU4UZ.js";
+} from "../../chunk-WNNA6YYE.js";
+import "../../chunk-AKE6KVQG.js";
+import "../../chunk-J3AWGTJY.js";
 import "../../chunk-GMRQPNG3.js";
 import {
   decodePolyline,
@@ -567,23 +568,24 @@ import "../../chunk-724ZONOL.js";
 import "../../chunk-UM35GGCS.js";
 import {
   Lightbox_default
-} from "../../chunk-HWPQKHN2.js";
+} from "../../chunk-COKPPU42.js";
+import "../../chunk-T2G4LDU5.js";
 import "../../chunk-RBGUS7WO.js";
 import "../../chunk-IOCY5G43.js";
+import "../../chunk-P772HCHI.js";
 import "../../chunk-UOS7DEQZ.js";
 import "../../chunk-HZBDTPPV.js";
 import "../../chunk-WZERH7E3.js";
 import "../../chunk-BP3ZKIPE.js";
-import "../../chunk-SYGM4SHY.js";
-import "../../chunk-T2G4LDU5.js";
-import "../../chunk-P772HCHI.js";
 import "../../chunk-TEQYTEM2.js";
+import "../../chunk-SYGM4SHY.js";
 import "../../chunk-VQU3CBAL.js";
 import "../../chunk-EJDOH7IN.js";
 import "../../chunk-62FET2BM.js";
 import {
   Carousel
-} from "../../chunk-JVTZ7FWR.js";
+} from "../../chunk-NCI74EOS.js";
+import "../../chunk-6FDLBWTE.js";
 import "../../chunk-RUIV5TVA.js";
 import "../../chunk-U2ILXZDG.js";
 import {
@@ -592,7 +594,6 @@ import {
   CarouselThumbnails
 } from "../../chunk-BECKKDYG.js";
 import "../../chunk-Z64TMGYT.js";
-import "../../chunk-6FDLBWTE.js";
 import "../../chunk-2GTORM5E.js";
 import {
   Chip
@@ -733,11 +734,11 @@ import "../../chunk-LV7LSPBF.js";
 import "../../chunk-L5CPOEDP.js";
 import {
   DataGrid
-} from "../../chunk-OA6T2ME3.js";
+} from "../../chunk-BLZDSCIZ.js";
+import "../../chunk-LDROG4QI.js";
 import "../../chunk-5RYPVYWP.js";
 import "../../chunk-K6FW4YDA.js";
 import "../../chunk-EARWC6PD.js";
-import "../../chunk-LDROG4QI.js";
 import "../../chunk-G3E66C6J.js";
 import "../../chunk-SNCSGLJ6.js";
 import {
@@ -746,10 +747,10 @@ import {
 import "../../chunk-RQWZYD6H.js";
 import {
   FleetMap
-} from "../../chunk-XNMU32XC.js";
+} from "../../chunk-TMUGBHHG.js";
 import "../../chunk-ZCPSND5Y.js";
-import "../../chunk-ARMKSYEQ.js";
-import "../../chunk-IEAPXS57.js";
+import "../../chunk-ZO2GZRZS.js";
+import "../../chunk-MW7P2C2C.js";
 import "../../chunk-7VUXSNVZ.js";
 import "../../chunk-BTQZ3EX3.js";
 import {
@@ -767,21 +768,21 @@ import "../../chunk-QD4TM6UK.js";
 import "../../chunk-EMPVMZAB.js";
 import {
   MapPreview
-} from "../../chunk-IMCSY2SI.js";
-import "../../chunk-OZYUE2BI.js";
-import "../../chunk-IFX5KP65.js";
+} from "../../chunk-OKRITX4S.js";
+import "../../chunk-CJUK32UH.js";
+import "../../chunk-EXVCVXFX.js";
 import "../../chunk-ZZ4MMUBY.js";
 import "../../chunk-6WHIJPEF.js";
-import "../../chunk-NEYZV6V5.js";
-import "../../chunk-LXMFHD7M.js";
-import "../../chunk-CESGZRVQ.js";
-import "../../chunk-MIUPTZS6.js";
 import "../../chunk-CSGBHYW6.js";
-import "../../chunk-2WVHZIWP.js";
-import "../../chunk-JKIKHWD2.js";
-import "../../chunk-CB6DTWD5.js";
-import "../../chunk-H2J2MTRE.js";
+import "../../chunk-UAOE3ZPC.js";
+import "../../chunk-LTSVYILY.js";
+import "../../chunk-EMSMJRP3.js";
 import "../../chunk-4YYFZ6TE.js";
+import "../../chunk-MIUPTZS6.js";
+import "../../chunk-QSRZOXQI.js";
+import "../../chunk-5NT2M2JI.js";
+import "../../chunk-H2J2MTRE.js";
+import "../../chunk-CB6DTWD5.js";
 import "../../chunk-FEKWKWGK.js";
 import "../../chunk-PZS7N74L.js";
 import "../../chunk-AA2X5GOT.js";
@@ -793,11 +794,11 @@ import "../../chunk-MWFSIB6K.js";
 import "../../chunk-NUGT7LMR.js";
 import {
   Alert
-} from "../../chunk-IF5UY3CT.js";
+} from "../../chunk-QVDEGBME.js";
 import "../../chunk-7HZ36QDH.js";
 import "../../chunk-L5RS6QAT.js";
-import "../../chunk-QXUXO22M.js";
 import "../../chunk-L7VH6IMR.js";
+import "../../chunk-QXUXO22M.js";
 import "../../chunk-2IBFEHIX.js";
 import {
   AlertDialog

package/dist/{chunk-T6QVM5Q5.js → chunk-4LUWZ6UE.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk-4SQ2WCZA.js";
 import {
   Alert
-} from "./chunk-IF5UY3CT.js";
+} from "./chunk-QVDEGBME.js";
 
 // src/components/data-display/DataViews/data-views-table-parts.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -121,4 +121,4 @@ export {
   ViewsMenuSlot,
   ViewDialogs
 };
-//# sourceMappingURL=chunk-T6QVM5Q5.js.map
+//# sourceMappingURL=chunk-4LUWZ6UE.js.map

package/dist/{chunk-JKIKHWD2.js → chunk-5NT2M2JI.js}

@@ -1,6 +1,3 @@
-import {
-  geocode
-} from "./chunk-CB6DTWD5.js";
 import {
   CITY_ZOOM,
   CLICK_JITTER_DEGREES,
@@ -9,6 +6,9 @@ import {
   MAX_ZOOM,
   MIN_ZOOM
 } from "./chunk-H2J2MTRE.js";
+import {
+  geocode
+} from "./chunk-CB6DTWD5.js";
 
 // src/components/data-display/MapPreview/MapPreview.hooks.ts
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -186,4 +186,4 @@ export {
   useMapSearch,
   useMapClick
 };
-//# sourceMappingURL=chunk-JKIKHWD2.js.map
+//# sourceMappingURL=chunk-5NT2M2JI.js.map

package/dist/{chunk-I7JUAHUO.js → chunk-65KJLPF5.js}

@@ -1,9 +1,9 @@
 import {
   GridShell
-} from "./chunk-XMWTVDQN.js";
+} from "./chunk-B32554CQ.js";
 import {
   useDataViewsState
-} from "./chunk-U3HGQHEO.js";
+} from "./chunk-H7CZRKN7.js";
 
 // src/components/data-display/DataViews/DataViewsGrid.tsx
 import { useEffect, useRef } from "react";
@@ -27,4 +27,4 @@ function DataViewsGrid(props) {
 export {
   DataViewsGrid
 };
-//# sourceMappingURL=chunk-I7JUAHUO.js.map
+//# sourceMappingURL=chunk-65KJLPF5.js.map

package/dist/{chunk-C74PDNTF.js → chunk-67ADHGA2.js}

@@ -28,7 +28,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   DataGrid
-} from "./chunk-OA6T2ME3.js";
+} from "./chunk-BLZDSCIZ.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -250,4 +250,4 @@ function GridMain(props) {
 export {
   GridMain
 };
-//# sourceMappingURL=chunk-C74PDNTF.js.map
+//# sourceMappingURL=chunk-67ADHGA2.js.map

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

@@ -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-GCBWZ3MX.js.map
+//# sourceMappingURL=chunk-6YSGP2WS.js.map

package/dist/{chunk-GCBWZ3MX.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-ZLVRCQPG.js → chunk-A5CKUJP2.js}

@@ -1,9 +1,9 @@
-import {
-  DataViewsGrid
-} from "./chunk-I7JUAHUO.js";
 import {
   DeleteViewDialog
 } from "./chunk-CPZGFIFH.js";
+import {
+  DataViewsGrid
+} from "./chunk-65KJLPF5.js";
 import {
   viewStateKey
 } from "./chunk-ZOLAYP2D.js";
@@ -14,7 +14,7 @@ import {
 import {
   ViewDialogs,
   ViewMutationErrorAlert
-} from "./chunk-T6QVM5Q5.js";
+} from "./chunk-4LUWZ6UE.js";
 import {
   useSavedViewsController
 } from "./chunk-B2JSUFDX.js";
@@ -166,4 +166,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-ZLVRCQPG.js.map
+//# sourceMappingURL=chunk-A5CKUJP2.js.map

package/dist/{chunk-A63WU4UZ.js → chunk-AKE6KVQG.js}

@@ -1,3 +1,7 @@
+import {
+  labelOrder,
+  placeLabels
+} from "./chunk-J3AWGTJY.js";
 import {
   labelPosition
 } from "./chunk-COOSJKZL.js";
@@ -26,7 +30,9 @@ function RegionMapDrawing({
   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 labelled = labelOrder(drawn.filter((d) => d.excluded || wanted.has(d.id)), wanted);
+  const boxRef = React.useRef(null);
+  useLabelPlacement(boxRef, labelled.map((d) => d.id).join("|"), remPx(theme, 4));
   const base = drawn.map((d) => ({ id: d.id, name: d.name, geometry: d.geometry, outside: d.outside === true }));
   return /* @__PURE__ */ jsxs(
     Box,
@@ -44,6 +50,7 @@ function RegionMapDrawing({
         bgcolor: "background.paper"
       },
       "data-testid": `${testId}-canvas`,
+      ref: boxRef,
       children: [
         /* @__PURE__ */ jsxs(
           "svg",
@@ -59,20 +66,7 @@ function RegionMapDrawing({
               /* @__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}`
-              )),
+              /* @__PURE__ */ jsx(Highlights, { areas: highlighted, testId, theme }),
               showCenter && /* @__PURE__ */ jsx(
                 "circle",
                 {
@@ -95,6 +89,26 @@ function RegionMapDrawing({
     }
   );
 }
+function Highlights({
+  areas,
+  testId,
+  theme
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: areas.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}`
+  )) });
+}
 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) }),
@@ -164,9 +178,38 @@ function Circles({ radii, theme }) {
     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 useLabelPlacement(boxRef, key, gap) {
+  React.useEffect(() => {
+    const box = boxRef.current;
+    if (!box || typeof ResizeObserver === "undefined") return void 0;
+    const labels = Array.from(box.querySelectorAll("[data-region-label]"));
+    const place = () => {
+      const spanX = box.clientWidth;
+      const spanY = box.clientHeight;
+      if (spanX === 0 || spanY === 0) return;
+      const placed = placeLabels(
+        labels.map((label) => ({
+          fractionX: Number(label.dataset.fractionX),
+          fractionY: Number(label.dataset.fractionY),
+          spanX: label.offsetWidth,
+          spanY: label.offsetHeight
+        })),
+        { spanX, spanY },
+        gap
+      );
+      placed.forEach(({ x, y, visible }, index) => {
+        const label = labels[index];
+        label.style.left = `${x / spanX * 100}%`;
+        label.style.top = `${y / spanY * 100}%`;
+        label.style.visibility = visible ? "visible" : "hidden";
+        label.dataset.hidden = visible ? "false" : "true";
+      });
+    };
+    const observer = new ResizeObserver(place);
+    observer.observe(box);
+    for (const label of labels) observer.observe(label);
+    return () => observer.disconnect();
+  }, [boxRef, key, gap]);
 }
 function AreaLabel({
   area,
@@ -175,38 +218,24 @@ function AreaLabel({
   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)}%` },
+      "data-region-label": "",
+      "data-fraction-x": at.fractionX,
+      "data-fraction-y": at.fractionY,
+      style: {
+        left: `${(at.fractionX * 100).toFixed(2)}%`,
+        top: `${(at.fractionY * 100).toFixed(2)}%`
+      },
       sx: {
         position: "absolute",
         transform: "translate(-50%, -50%)",
-        fontSize: rem(theme, 11),
+        fontSize: rem(theme, 12),
         fontWeight: 700,
         lineHeight: 1.1,
         textAlign: "center",
@@ -223,4 +252,4 @@ function AreaLabel({
 export {
   RegionMapDrawing
 };
-//# sourceMappingURL=chunk-A63WU4UZ.js.map
+//# sourceMappingURL=chunk-AKE6KVQG.js.map

package/dist/chunk-AKE6KVQG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/RegionMap/RegionMapDrawing.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem, remPx } from '../../../tokens/relative';\n\nimport { labelPosition, type AreaGeometry, type DrawnRegion, type PlaneBox } from './RegionMap.helpers';\nimport type { RegionMapModel } from './RegionMap.hooks';\nimport { labelOrder, placeLabels } from './RegionMap.labels';\n\nexport interface RegionMapDrawingProps {\n  model: RegionMapModel & { view: PlaneBox };\n  showCenter: boolean;\n  highlightedIds: readonly string[];\n  maxHeight: string | undefined;\n  label: string;\n  tappable: boolean;\n  testId: string;\n  theme: Theme;\n}\n\n/**\n * The drawing: one `role=\"img\"`, square, with HTML labels laid over it.\n *\n * Strokes are `non-scaling-stroke` and labels are HTML at theme sizes, so the\n * picture reads the same at 320 px and 1600 px; `maxHeight` caps it on a wide\n * screen. Where it sits in a wider box is the host's call.\n *\n * The base areas are a memoised layer: a toggle changes `excluded`, not the\n * geometry, so only the hatch, highlight and label layers re-render.\n */\nexport function RegionMapDrawing({\n  model,\n  showCenter,\n  highlightedIds,\n  maxHeight,\n  label,\n  tappable,\n  testId,\n  theme,\n}: RegionMapDrawingProps): React.JSX.Element {\n  const hatchId = `${React.useId().replace(/:/g, '')}-hatch`;\n  const { view, drawn } = model;\n  const wanted = new Set(highlightedIds);\n  const highlighted = drawn.filter((d) => wanted.has(d.id));\n  // Highlighted, then excluded, then larger, then by name: the order labels\n  // claim their place in, so a collision hides the less important one.\n  const labelled = labelOrder(drawn.filter((d) => d.excluded || wanted.has(d.id)), wanted);\n  const boxRef = React.useRef<HTMLDivElement>(null);\n  useLabelPlacement(boxRef, labelled.map((d) => d.id).join('|'), remPx(theme, 4));\n  const base = drawn.map((d) => ({ id: d.id, name: d.name, geometry: d.geometry, outside: d.outside === true }));\n  return (\n    <Box\n      sx={{\n        position: 'relative',\n        width: '100%',\n        maxWidth: maxHeight,\n        maxHeight,\n        aspectRatio: '1 / 1',\n        border: 1,\n        borderColor: 'divider',\n        borderRadius: 1,\n        overflow: 'hidden',\n        bgcolor: 'background.paper',\n      }}\n      data-testid={`${testId}-canvas`}\n      ref={boxRef}\n    >\n      <svg\n        viewBox={`${view.minX} ${view.minY} ${view.spanX} ${view.spanY}`}\n        role=\"img\"\n        aria-label={label}\n        onPointerDown={model.onPointerDown}\n        onClick={model.onClick}\n        style={{ display: 'block', width: '100%', height: '100%', cursor: tappable ? 'pointer' : 'default' }}\n      >\n        <Hatch id={hatchId} pitch={view.spanX / 70} theme={theme} />\n        <BaseAreas areas={base} testId={testId} theme={theme} />\n        <ExcludedAreas drawn={drawn} hatchId={hatchId} testId={testId} theme={theme} />\n        <Circles radii={model.radii} theme={theme} />\n        <Highlights areas={highlighted} testId={testId} theme={theme} />\n        {showCenter && (\n          <circle\n            cx={0}\n            cy={0}\n            r={view.spanX / 90}\n            fill={theme.palette.primary.main}\n            stroke={theme.palette.background.paper}\n            strokeWidth={2}\n            vectorEffect=\"non-scaling-stroke\"\n            pointerEvents=\"none\"\n            data-testid={`${testId}-center`}\n          />\n        )}\n      </svg>\n      {labelled.map((d) => (\n        <AreaLabel key={`l-${d.id}`} area={d} view={view} testId={testId} theme={theme} />\n      ))}\n    </Box>\n  );\n}\n\n/** The highlighted areas, drawn over everything but the centre. */\nfunction Highlights({\n  areas,\n  testId,\n  theme,\n}: {\n  areas: readonly DrawnRegion[];\n  testId: string;\n  theme: Theme;\n}): React.JSX.Element {\n  return (\n    <>\n      {areas.map((d) => (\n        <path\n          key={`h-${d.id}`}\n          d={d.geometry.path}\n          fillRule=\"evenodd\"\n          vectorEffect=\"non-scaling-stroke\"\n          fill={alpha(theme.palette.primary.main, 0.3)}\n          stroke={theme.palette.primary.main}\n          strokeWidth={2.5}\n          pointerEvents=\"none\"\n          data-testid={`${testId}-highlight-${d.id}`}\n        />\n      ))}\n    </>\n  );\n}\n\n/** The hatch an excluded area is filled with: lines, not a colour. */\nfunction Hatch({ id, pitch, theme }: { id: string; pitch: number; theme: Theme }): React.JSX.Element {\n  return (\n    <defs>\n      <pattern id={id} width={pitch} height={pitch} patternUnits=\"userSpaceOnUse\" patternTransform=\"rotate(45)\">\n        <rect width={pitch} height={pitch} fill={alpha(theme.palette.text.primary, 0.1)} />\n        <rect width={pitch / 3} height={pitch} fill={theme.palette.text.secondary} />\n      </pattern>\n    </defs>\n  );\n}\n\ninterface BaseArea {\n  id: string;\n  name: string;\n  geometry: AreaGeometry;\n  outside: boolean;\n}\n\ninterface BaseAreasProps {\n  areas: readonly BaseArea[];\n  testId: string;\n  theme: Theme;\n}\n\n/** Same areas, same geometry objects, same look: nothing to re-render. */\nfunction sameBase(a: BaseAreasProps, b: BaseAreasProps): boolean {\n  if (a.theme !== b.theme || a.testId !== b.testId || a.areas.length !== b.areas.length) return false;\n  return a.areas.every((area, i) => {\n    const other = b.areas[i]!;\n    return (\n      area.id === other.id &&\n      area.geometry === other.geometry &&\n      area.outside === other.outside &&\n      area.name === other.name\n    );\n  });\n}\n\n/** Every area's fill and border — the tap targets. Memoised: see `sameBase`. */\nconst BaseAreas = React.memo(function BaseAreas({ areas, testId, theme }: BaseAreasProps): React.JSX.Element {\n  const { palette } = theme;\n  return (\n    <>\n      {areas.map((d) => (\n        <path\n          key={d.id}\n          d={d.geometry.path}\n          fillRule=\"evenodd\"\n          vectorEffect=\"non-scaling-stroke\"\n          fill={d.outside ? palette.background.paper : palette.action.hover}\n          stroke={palette.divider}\n          strokeWidth={1}\n          data-region-id={d.id}\n          data-testid={`${testId}-area-${d.id}`}\n        >\n          <title>{d.name}</title>\n        </path>\n      ))}\n    </>\n  );\n}, sameBase);\n\n/** The hatch over every excluded area. */\nfunction ExcludedAreas({\n  drawn,\n  hatchId,\n  testId,\n  theme,\n}: {\n  drawn: readonly DrawnRegion[];\n  hatchId: string;\n  testId: string;\n  theme: Theme;\n}): React.JSX.Element {\n  return (\n    <>\n      {drawn\n        .filter((d) => d.excluded)\n        .map((d) => (\n          <path\n            key={`x-${d.id}`}\n            d={d.geometry.path}\n            fillRule=\"evenodd\"\n            vectorEffect=\"non-scaling-stroke\"\n            fill={`url(#${hatchId})`}\n            stroke={theme.palette.text.secondary}\n            strokeWidth={1.5}\n            pointerEvents=\"none\"\n            data-testid={`${testId}-excluded-${d.id}`}\n          />\n        ))}\n    </>\n  );\n}\n\n/** The dashed circles around the centre. */\nfunction Circles({ radii, theme }: { radii: readonly number[]; theme: Theme }): React.JSX.Element {\n  return (\n    <>\n      {radii.map((radius) => (\n        <circle\n          key={radius}\n          cx={0}\n          cy={0}\n          r={radius}\n          fill=\"none\"\n          stroke={theme.palette.info.main}\n          strokeWidth={1.75}\n          strokeDasharray=\"7 5\"\n          vectorEffect=\"non-scaling-stroke\"\n          pointerEvents=\"none\"\n        />\n      ))}\n    </>\n  );\n}\n\n/**\n * Places every label the drawing carries, in their DOM order (the priority\n * order), and hides one that would overlap a label already drawn\n * (`placeLabels`). Measured by a ResizeObserver, never in a layout effect: its\n * first call comes after the browser's own layout, so mounting a label on a\n * tap forces no synchronous reflow of the drawing.\n */\nfunction useLabelPlacement(boxRef: React.RefObject<HTMLDivElement | null>, key: string, gap: number): void {\n  React.useEffect(() => {\n    const box = boxRef.current;\n    if (!box || typeof ResizeObserver === 'undefined') return undefined;\n    const labels = Array.from(box.querySelectorAll<HTMLElement>('[data-region-label]'));\n    const place = (): void => {\n      const spanX = box.clientWidth;\n      const spanY = box.clientHeight;\n      if (spanX === 0 || spanY === 0) return;\n      const placed = placeLabels(\n        labels.map((label) => ({\n          fractionX: Number(label.dataset.fractionX),\n          fractionY: Number(label.dataset.fractionY),\n          spanX: label.offsetWidth,\n          spanY: label.offsetHeight,\n        })),\n        { spanX, spanY },\n        gap,\n      );\n      placed.forEach(({ x, y, visible }, index) => {\n        const label = labels[index]!;\n        label.style.left = `${(x / spanX) * 100}%`;\n        label.style.top = `${(y / spanY) * 100}%`;\n        label.style.visibility = visible ? 'visible' : 'hidden';\n        label.dataset.hidden = visible ? 'false' : 'true';\n      });\n    };\n    const observer = new ResizeObserver(place);\n    observer.observe(box);\n    for (const label of labels) observer.observe(label);\n    return () => observer.disconnect();\n  }, [boxRef, key, gap]);\n}\n\n/**\n * An area's name over the drawing, at the theme's type size whatever the\n * width. Placed — and hidden on a collision — by {@link useLabelPlacement}.\n * Decorative (`aria-hidden`): the area's name is its `<title>` and its row in\n * the list.\n */\nfunction AreaLabel({\n  area,\n  view,\n  testId,\n  theme,\n}: {\n  area: DrawnRegion;\n  view: PlaneBox;\n  testId: string;\n  theme: Theme;\n}): React.JSX.Element {\n  const at = labelPosition(area.geometry.rings, view);\n  const halo = `0 0 ${rem(theme, 3)} ${theme.palette.background.paper}`;\n  return (\n    <Typography\n      component=\"span\"\n      aria-hidden\n      data-testid={`${testId}-label-${area.id}`}\n      data-region-label=\"\"\n      data-fraction-x={at.fractionX}\n      data-fraction-y={at.fractionY}\n      // Position as an inline style, not `sx`: a per-label class would insert\n      // a new CSS rule (and a style recalculation) on every tap.\n      style={{\n        left: `${(at.fractionX * 100).toFixed(2)}%`,\n        top: `${(at.fractionY * 100).toFixed(2)}%`,\n      }}\n      sx={{\n        position: 'absolute',\n        transform: 'translate(-50%, -50%)',\n        fontSize: rem(theme, 12),\n        fontWeight: 700,\n        lineHeight: 1.1,\n        textAlign: 'center',\n        maxWidth: '45%',\n        color: 'text.primary',\n        pointerEvents: 'none',\n        textShadow: `${halo}, ${halo}`,\n      }}\n    >\n      {area.name}\n    </Typography>\n  );\n}\n"],"mappings":"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","names":["BaseAreas"]}

package/dist/{chunk-75I42HHE.js → chunk-AYJGRQT4.js}

@@ -25,6 +25,7 @@ function ToggleField({ name, options, label }) {
         options,
         value: values[name] ?? "",
         fullWidth: true,
+        "aria-label": label,
         dataTestId: testId,
         onChange: (_event, next) => {
           if (typeof next === "string") setFieldValue(name, next);
@@ -38,4 +39,4 @@ function ToggleField({ name, options, label }) {
 export {
   ToggleField
 };
-//# sourceMappingURL=chunk-75I42HHE.js.map
+//# sourceMappingURL=chunk-AYJGRQT4.js.map

package/dist/{chunk-75I42HHE.js.map → chunk-AYJGRQT4.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/form/total-form/Fields/ToggleField.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { FormControl, FormLabel, FormMessage } from '../../Form';\nimport { ToggleGroup } from '../../ToggleGroup';\nimport type { ToggleOption } from '../../ToggleGroup';\nimport { useFormContext } from '../FormContext';\n\n/** Props for the `total-form` {@link ToggleField}. */\nexport interface ToggleFieldProps {\n  /** Field name; also the key into the form's values/errors. */\n  name: string;\n  /** The mutually-exclusive options (one is always selected). */\n  options: ToggleOption[];\n  /** Optional visible label rendered above the toggle. */\n  label?: string;\n}\n\n/**\n * Exclusive toggle (segmented control) bound to {@link useFormContext} — a\n * label-height-matched alternative to {@link SelectField} for a short, always-set\n * enum. Composes the `Form*` primitives and the `ToggleGroup` control, reading\n * its value from context and writing the chosen value back through it. Ignores a\n * deselect (clicking the active segment) so a value is always kept.\n *\n * Renders its error via `total-form-field-<name>-message` and the toggle via\n * `total-form-field-<name>` (each segment at `total-form-field-<name>-item-<value>`).\n */\nexport function ToggleField({ name, options, label }: ToggleFieldProps): 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      <ToggleGroup\n        variant=\"exclusive\"\n        options={options}\n        value={values[name] ?? ''}\n        fullWidth\n        dataTestId={testId}\n        onChange={(_event, next) => {\n          if (typeof next === 'string') setFieldValue(name, next);\n        }}\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,MAAM,GAAyC;AAC1F,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,SAAQ;AAAA,QACR;AAAA,QACA,OAAO,OAAO,IAAI,KAAK;AAAA,QACvB,WAAS;AAAA,QACT,YAAY;AAAA,QACZ,UAAU,CAAC,QAAQ,SAAS;AAC1B,cAAI,OAAO,SAAS,SAAU,eAAc,MAAM,IAAI;AAAA,QACxD;AAAA;AAAA,IACF;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/ToggleField.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { FormControl, FormLabel, FormMessage } from '../../Form';\nimport { ToggleGroup } from '../../ToggleGroup';\nimport type { ToggleOption } from '../../ToggleGroup';\nimport { useFormContext } from '../FormContext';\n\n/** Props for the `total-form` {@link ToggleField}. */\nexport interface ToggleFieldProps {\n  /** Field name; also the key into the form's values/errors. */\n  name: string;\n  /** The mutually-exclusive options (one is always selected). */\n  options: ToggleOption[];\n  /** Optional visible label rendered above the toggle. */\n  label?: string;\n}\n\n/**\n * Exclusive toggle (segmented control) bound to {@link useFormContext} — a\n * label-height-matched alternative to {@link SelectField} for a short, always-set\n * enum. Composes the `Form*` primitives and the `ToggleGroup` control, reading\n * its value from context and writing the chosen value back through it. Ignores a\n * deselect (clicking the active segment) so a value is always kept.\n *\n * Renders its error via `total-form-field-<name>-message` and the toggle via\n * `total-form-field-<name>` (each segment at `total-form-field-<name>-item-<value>`).\n */\nexport function ToggleField({ name, options, label }: ToggleFieldProps): 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      <ToggleGroup\n        variant=\"exclusive\"\n        options={options}\n        value={values[name] ?? ''}\n        fullWidth\n        // A `role=\"group\"` div is not labelable, so the `<label htmlFor>`\n        // above names nothing; the group carries the question itself (FUT-4157).\n        aria-label={label}\n        dataTestId={testId}\n        onChange={(_event, next) => {\n          if (typeof next === 'string') setFieldValue(name, next);\n        }}\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,MAAM,GAAyC;AAC1F,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,SAAQ;AAAA,QACR;AAAA,QACA,OAAO,OAAO,IAAI,KAAK;AAAA,QACvB,WAAS;AAAA,QAGT,cAAY;AAAA,QACZ,YAAY;AAAA,QACZ,UAAU,CAAC,QAAQ,SAAS;AAC1B,cAAI,OAAO,SAAS,SAAU,eAAc,MAAM,IAAI;AAAA,QACxD;AAAA;AAAA,IACF;AAAA,IACC,SACC,oBAAC,eAAY,OAAK,MAAC,YAAY,GAAG,MAAM,YACrC,iBACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/{chunk-XMWTVDQN.js → chunk-B32554CQ.js}

@@ -1,19 +1,22 @@
 import {
   ShellEmpty
 } from "./chunk-NTRWUDP6.js";
+import {
+  InlineFilterControls
+} from "./chunk-52RHAAIH.js";
 import {
   GridHeaderRow
 } from "./chunk-X3AFXHY5.js";
 import {
   GridMain
-} from "./chunk-C74PDNTF.js";
+} from "./chunk-67ADHGA2.js";
 import {
   FilterDialog,
   GridFilterPanel
 } from "./chunk-OPY2AGAU.js";
 import {
-  InlineFilterControls
-} from "./chunk-52RHAAIH.js";
+  DataViewsPagination
+} from "./chunk-K6WY2CHG.js";
 import {
   useFilterOverflow
 } from "./chunk-WWH674WU.js";
@@ -21,30 +24,27 @@ import {
   toOverflowFields,
   toggleQuick
 } from "./chunk-KYUEO2IO.js";
-import {
-  DataViewsPagination
-} from "./chunk-K6WY2CHG.js";
 import {
   allOnPageSelected,
   resolveSelectionExtra
 } from "./chunk-5YDS6HO3.js";
 import {
   ScopeTabsSlot
-} from "./chunk-K6VEN5VN.js";
+} from "./chunk-K3PMMW23.js";
 import {
   ShellToolbar
-} from "./chunk-5ZC7CNU4.js";
+} from "./chunk-I2LMLQGQ.js";
 import {
   SHELL_PROPS,
   useStickyBarTop
 } from "./chunk-4IE66GY2.js";
+import {
+  togglePillValues
+} from "./chunk-WTOA52EQ.js";
 import {
   DataViewsLayoutProvider,
   useDataViewsLayout
 } from "./chunk-5CAWRMDX.js";
-import {
-  togglePillValues
-} from "./chunk-WTOA52EQ.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -252,4 +252,4 @@ function GridShell(props) {
 export {
   GridShell
 };
-//# sourceMappingURL=chunk-XMWTVDQN.js.map
+//# sourceMappingURL=chunk-B32554CQ.js.map

package/dist/{chunk-OA6T2ME3.js → chunk-BLZDSCIZ.js}

@@ -1,3 +1,6 @@
+import {
+  useDataGridModel
+} from "./chunk-LDROG4QI.js";
 import {
   GridBody,
   GridHeader
@@ -7,9 +10,6 @@ import {
   DataGridError,
   DataGridLoading
 } from "./chunk-EARWC6PD.js";
-import {
-  useDataGridModel
-} from "./chunk-LDROG4QI.js";
 
 // src/components/data-display/DataGrid/DataGrid.tsx
 import Paper from "@mui/material/Paper/index.js";
@@ -120,4 +120,4 @@ export {
   DataGrid,
   GRID_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-OA6T2ME3.js.map
+//# sourceMappingURL=chunk-BLZDSCIZ.js.map

package/dist/{chunk-OZYUE2BI.js → chunk-CJUK32UH.js}

@@ -1,12 +1,12 @@
 import {
   resolveMapCopy
 } from "./chunk-CSGBHYW6.js";
-import {
-  MARKER_PIXELS_PER_DEGREE
-} from "./chunk-H2J2MTRE.js";
 import {
   bounceKeyframes
 } from "./chunk-4YYFZ6TE.js";
+import {
+  MARKER_PIXELS_PER_DEGREE
+} from "./chunk-H2J2MTRE.js";
 import {
   shadowInk
 } from "./chunk-XJAD6E3V.js";
@@ -85,4 +85,4 @@ export {
   MapMarkers,
   MapCoordinates
 };
-//# sourceMappingURL=chunk-OZYUE2BI.js.map
+//# sourceMappingURL=chunk-CJUK32UH.js.map

package/dist/{chunk-HWPQKHN2.js → chunk-COKPPU42.js}

@@ -1,3 +1,6 @@
+import {
+  LightboxOverlay
+} from "./chunk-T2G4LDU5.js";
 import {
   LightboxCurrentMedia
 } from "./chunk-RBGUS7WO.js";
@@ -10,15 +13,12 @@ import {
 import {
   LightboxThumbnails
 } from "./chunk-BP3ZKIPE.js";
-import {
-  LightboxStage
-} from "./chunk-SYGM4SHY.js";
-import {
-  LightboxOverlay
-} from "./chunk-T2G4LDU5.js";
 import {
   LightboxCopyProvider
 } from "./chunk-TEQYTEM2.js";
+import {
+  LightboxStage
+} from "./chunk-SYGM4SHY.js";
 import {
   makeTestId
 } from "./chunk-VQU3CBAL.js";
@@ -148,4 +148,4 @@ export {
   Lightbox,
   Lightbox_default
 };
-//# sourceMappingURL=chunk-HWPQKHN2.js.map
+//# sourceMappingURL=chunk-COKPPU42.js.map