@12-apps/ui 6.89.2 → 6.91.0

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

@@ -18,6 +18,7 @@ import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function RegionMapDrawing({
   model,
+  overlay,
   showCenter,
   highlightedIds,
   maxHeight,
@@ -65,6 +66,9 @@ function RegionMapDrawing({
               /* @__PURE__ */ jsx(Hatch, { id: hatchId, pitch: view.spanX / 70, theme }),
               /* @__PURE__ */ jsx(BaseAreas, { areas: base, testId, theme }),
               /* @__PURE__ */ jsx(ExcludedAreas, { drawn, hatchId, testId, theme }),
+              overlay && model.projection && // `pointer-events` is inherited in SVG: nothing the host draws here
+              // takes a tap from the areas beneath.
+              /* @__PURE__ */ jsx("g", { pointerEvents: "none", "data-testid": `${testId}-overlay`, children: overlay({ view, projection: model.projection }) }),
               /* @__PURE__ */ jsx(Circles, { radii: model.radii, theme }),
               /* @__PURE__ */ jsx(Highlights, { areas: highlighted, testId, theme }),
               showCenter && /* @__PURE__ */ jsx(
@@ -252,4 +256,4 @@ function AreaLabel({
 export {
   RegionMapDrawing
 };
-//# sourceMappingURL=chunk-AKE6KVQG.js.map
+//# sourceMappingURL=chunk-NGXL4R54.js.map

package/dist/chunk-NGXL4R54.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';\nimport type { RegionMapLayer } from './RegionMap.types';\n\nexport interface RegionMapDrawingProps {\n  model: RegionMapModel & { view: PlaneBox };\n  /** The host's layer, drawn inside the SVG under the circles (`RegionMapProps.overlay`). */\n  overlay?: (layer: RegionMapLayer) => React.ReactNode;\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  overlay,\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        {overlay && model.projection && (\n          // `pointer-events` is inherited in SVG: nothing the host draws here\n          // takes a tap from the areas beneath.\n          <g pointerEvents=\"none\" data-testid={`${testId}-overlay`}>\n            {overlay({ view, projection: model.projection })}\n          </g>\n        )}\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-BEHT4IHH.js → chunk-NKEFH3RS.js}

@@ -4,18 +4,18 @@ import {
 import {
   CardBody
 } from "./chunk-4ZQQUICR.js";
-import {
-  toGridExpansion
-} from "./chunk-O5UGAL2V.js";
 import {
   SelectAllStrip
 } from "./chunk-OY437NRJ.js";
+import {
+  toGridExpansion
+} from "./chunk-O5UGAL2V.js";
 import {
   useStickyTableHead
 } from "./chunk-4IE66GY2.js";
 import {
   ListCardGroup
-} from "./chunk-BMTIBQQC.js";
+} from "./chunk-BBBHPK2Q.js";
 import {
   DENSITY_BOARD_SCALE,
   DENSITY_ROW_PADDING,
@@ -28,7 +28,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   DataGrid
-} from "./chunk-DYHOBKPU.js";
+} from "./chunk-BLZDSCIZ.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -250,4 +250,4 @@ function GridMain(props) {
 export {
   GridMain
 };
-//# sourceMappingURL=chunk-BEHT4IHH.js.map
+//# sourceMappingURL=chunk-NKEFH3RS.js.map

package/dist/{chunk-NI67M453.js → chunk-PGANINQD.js}

@@ -3,15 +3,15 @@ import {
   chipStyles,
   iconWithTestId,
   makeKeyDownHandler
-} from "./chunk-DHAXUVMR.js";
-import {
-  chipMuiSize
-} from "./chunk-E5I776YW.js";
+} from "./chunk-QN7FVZQD.js";
 import {
   chipRole,
   isClickable,
   makeTestId
 } from "./chunk-BF4FYOAR.js";
+import {
+  chipMuiSize
+} from "./chunk-E5I776YW.js";
 
 // src/components/data-display/Chip/Chip.tsx
 import CancelIcon from "@mui/icons-material/Cancel";
@@ -77,4 +77,4 @@ Chip.displayName = "Chip";
 export {
   Chip
 };
-//# sourceMappingURL=chunk-NI67M453.js.map
+//# sourceMappingURL=chunk-PGANINQD.js.map

package/dist/{chunk-RCTHCXS6.js → chunk-PJNIJIE6.js}

@@ -1,6 +1,6 @@
 import {
   Alert
-} from "./chunk-NQCTANF3.js";
+} from "./chunk-QVDEGBME.js";
 
 // src/components/data-display/CardKit/card-actions-context.tsx
 import { createContext, useCallback, useContext, useState } from "react";
@@ -58,4 +58,4 @@ export {
   CardActionsProvider,
   useCardActions
 };
-//# sourceMappingURL=chunk-RCTHCXS6.js.map
+//# sourceMappingURL=chunk-PJNIJIE6.js.map

package/dist/{chunk-E2UOEI7N.js → chunk-Q3SILZTQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-DQ22UKMZ.js";
 import {
   Avatar
-} from "./chunk-JIEVKHOH.js";
+} from "./chunk-4QR7LM5F.js";
 import {
   Card
 } from "./chunk-4XBAEKQQ.js";
@@ -80,4 +80,4 @@ export {
   UserAvatar,
   UserMenu
 };
-//# sourceMappingURL=chunk-E2UOEI7N.js.map
+//# sourceMappingURL=chunk-Q3SILZTQ.js.map

package/dist/{chunk-SB2SEGR6.js → chunk-QHIWV55K.js}

@@ -1,10 +1,10 @@
 import {
   Chart
-} from "./chunk-AMLHEKSV.js";
+} from "./chunk-M3XJVD5G.js";
 import {
   CHART_SEMANTIC_COLORS,
   specToChartProps
-} from "./chunk-HQCZT6TO.js";
+} from "./chunk-JVOEVTCZ.js";
 import {
   accentFor
 } from "./chunk-B7ZHEOQQ.js";
@@ -46,4 +46,4 @@ var SpecChart = ({
 export {
   SpecChart
 };
-//# sourceMappingURL=chunk-SB2SEGR6.js.map
+//# sourceMappingURL=chunk-QHIWV55K.js.map

package/dist/{chunk-DHAXUVMR.js → chunk-QN7FVZQD.js}

@@ -1,3 +1,6 @@
+import {
+  chipKeyAction
+} from "./chunk-BF4FYOAR.js";
 import {
   CHIP_SIZES,
   CHIP_TRANSITION_EASING,
@@ -7,9 +10,6 @@ import {
   SOFT_GROUND_ALPHA,
   SOFT_HOVER_ALPHA
 } from "./chunk-E5I776YW.js";
-import {
-  chipKeyAction
-} from "./chunk-BF4FYOAR.js";
 import {
   shadowInk
 } from "./chunk-XJAD6E3V.js";
@@ -110,4 +110,4 @@ export {
   chipStyles,
   iconWithTestId
 };
-//# sourceMappingURL=chunk-DHAXUVMR.js.map
+//# sourceMappingURL=chunk-QN7FVZQD.js.map

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

@@ -1,9 +1,9 @@
 import {
   statusMessage
-} from "./chunk-5CP5Z3YU.js";
+} from "./chunk-MPWA55CF.js";
 import {
   DayBoundInput
-} from "./chunk-72HOUWAW.js";
+} from "./chunk-L6YTVXGN.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-5S5K73I6.js.map
+//# sourceMappingURL=chunk-QSOCOXVL.js.map

package/dist/{chunk-NQCTANF3.js → chunk-QVDEGBME.js}

@@ -1,3 +1,6 @@
+import {
+  AlertContent
+} from "./chunk-7HZ36QDH.js";
 import {
   alertEmphasisStyles,
   alertLayoutStyles,
@@ -6,17 +9,14 @@ import {
   getColorFromTheme,
   getVariantIcon
 } from "./chunk-L5RS6QAT.js";
-import {
-  resolveIconPlacement
-} from "./chunk-QXUXO22M.js";
-import {
-  AlertContent
-} from "./chunk-7HZ36QDH.js";
 import {
   resolveAlertProps,
   resolveAnnouncement,
   testIdFor
 } from "./chunk-L7VH6IMR.js";
+import {
+  resolveIconPlacement
+} from "./chunk-QXUXO22M.js";
 import {
   ACTIVE,
   ALERT_EASING,
@@ -277,4 +277,4 @@ export {
   Alert,
   ALERT_ONLY_PROPS
 };
-//# sourceMappingURL=chunk-NQCTANF3.js.map
+//# sourceMappingURL=chunk-QVDEGBME.js.map

package/dist/{chunk-BQBEN44R.js → chunk-RDCIST7P.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk-2ORD2FMN.js";
 import {
   Alert
-} from "./chunk-NQCTANF3.js";
+} from "./chunk-QVDEGBME.js";
 import {
   Button
 } from "./chunk-YOXYSAUI.js";
@@ -160,4 +160,4 @@ export {
   SequenceStepBody,
   SequenceDoneBody
 };
-//# sourceMappingURL=chunk-BQBEN44R.js.map
+//# sourceMappingURL=chunk-RDCIST7P.js.map

package/dist/{chunk-HUXAIQC5.js → chunk-RZ3P4X2I.js}

@@ -3,7 +3,7 @@ import {
   defaultMessages,
   resolveDayRange,
   resolveQuickRanges
-} from "./chunk-5CP5Z3YU.js";
+} from "./chunk-MPWA55CF.js";
 import {
   toDayString,
   todayIn
@@ -69,4 +69,4 @@ function useDateRangePicker({
 export {
   useDateRangePicker
 };
-//# sourceMappingURL=chunk-HUXAIQC5.js.map
+//# sourceMappingURL=chunk-RZ3P4X2I.js.map

package/dist/{chunk-QLJU7UUI.js → chunk-T7OIVPCO.js}

@@ -18,18 +18,48 @@ import {
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import FilterAltOffRoundedIcon from "@mui/icons-material/FilterAltOffRounded";
 import Tooltip from "@mui/material/Tooltip/index.js";
+import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+function useBarFrozen(report) {
+  const [openCount, setOpenCount] = useState(0);
+  return {
+    frozen: openCount > 0,
+    onOpenChange: (open) => {
+      setOpenCount((count) => Math.max(0, count + (open ? 1 : -1)));
+      report?.(open);
+    }
+  };
+}
+function useCutByRow(ref, frozen) {
+  const [cut, setCut] = useState(false);
+  useLayoutEffect(() => {
+    if (!frozen) {
+      setCut(false);
+      return;
+    }
+    const button = ref.current;
+    let row = button?.parentElement ?? null;
+    while (row && getComputedStyle(row).overflowX === "visible") row = row.parentElement;
+    if (button && row && button.getBoundingClientRect().right > row.getBoundingClientRect().right + 0.5) setCut(true);
+  });
+  return cut;
+}
 function ClearAllControl({
   onClearAll,
-  compact,
-  testIdPrefix
+  compact: compactRung,
+  testIdPrefix,
+  frozen = false
 }) {
   const copy = useDataViewsCopy();
+  const ref = useRef(null);
+  const cut = useCutByRow(ref, frozen && !compactRung);
+  const compact = compactRung || cut;
   const button = /* @__PURE__ */ jsxs(
     default2,
     {
       component: "button",
       type: "button",
+      ref,
       onClick: onClearAll,
       "data-testid": `${testIdPrefix}-clear-all`,
       "aria-label": copy.filters.clearAll,
@@ -46,6 +76,10 @@ function ClearAllControl({
         font: "inherit",
         fontSize: sxRem(13),
         whiteSpace: "nowrap",
+        // Never squeezed: the bar is frozen while a panel is open, and when a
+        // first filter applied from inside one brought this in, the row had
+        // no room budgeted for it and cut "Limpar" to "Lin" (FUT-4144).
+        flexShrink: 0,
         color: "text.secondary",
         "&:hover": { color: "text.primary", bgcolor: "action.hover" }
       },
@@ -88,7 +122,8 @@ function CloseSearchControl({
 }
 
 export {
+  useBarFrozen,
   ClearAllControl,
   CloseSearchControl
 };
-//# sourceMappingURL=chunk-QLJU7UUI.js.map
+//# sourceMappingURL=chunk-T7OIVPCO.js.map

package/dist/chunk-T7OIVPCO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-bar-controls.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * THE TWO BARE AFFORDANCES ON THE FILTER BAR.\n *\n * Neither opens anything, which is what sets them apart from every other\n * control on that row and why they are styled flat rather than as outlined\n * pills: one clears the filters, one leaves a search takeover. Giving them a\n * pill's weight made \"Limpar\" read as a sixth filter.\n *\n * Their own module because `data-views-inline-bar` outgrew the file-size gate.\n */\nimport CloseRoundedIcon from \"@mui/icons-material/CloseRounded\";\nimport FilterAltOffRoundedIcon from \"@mui/icons-material/FilterAltOffRounded\";\nimport Tooltip from \"@mui/material/Tooltip/index.js\";\nimport React, { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { fieldRadiusPx } from \"../../../tokens/field-radius\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { fieldHeight } from \"../../../tokens/field-height\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/**\n * \"Limpar\" — one gesture back to the unfiltered list.\n *\n * Present ONLY while something is applied, and last in the cluster, because it\n * is destructive and must never be where a filter control was a moment ago.\n * Each pill already carries its own ✕; this is the other job — six applied\n * filters is six ✕ hunts, and the operator who wants \"show me everything\n * again\" has no way to say it.\n *\n * Loses its label on the same rung Exibir/Exportar lose theirs, and keeps a\n * tooltip when it does: it is one of the two controls (with the search) whose\n * icon has to carry the whole meaning on a phone.\n */\n/**\n * Whether a filter control's panel is open — the stretch during which the bar\n * is measured once and then FROZEN, so the field being edited is not promoted\n * out from under the hand (FUT-4144 UI review round 2).\n *\n * Wraps the controls' `onOpenChange` to count the open panels.\n */\nexport function useBarFrozen(report?: (open: boolean) => void): {\n  frozen: boolean;\n  onOpenChange: (open: boolean) => void;\n} {\n  const [openCount, setOpenCount] = useState(0);\n  return {\n    frozen: openCount > 0,\n    onOpenChange: (open) => {\n      setOpenCount((count) => Math.max(0, count + (open ? 1 : -1)));\n      report?.(open);\n    },\n  };\n}\n\n/**\n * Whether the button runs past the edge of the row that holds it. Only asked\n * while the bar is frozen: a first filter applied from inside an open panel\n * brings \"Limpar\" in with no room budgeted for its label, and at 900 the row\n * cut it to \"Lin\". It then shows as its icon (the tooltip and accessible name\n * keep the word) until the panel closes and the row is measured again.\n */\nfunction useCutByRow(ref: React.RefObject<HTMLElement | null>, frozen: boolean): boolean {\n  const [cut, setCut] = useState(false);\n  useLayoutEffect(() => {\n    if (!frozen) {\n      setCut(false);\n      return;\n    }\n    const button = ref.current;\n    let row = button?.parentElement ?? null;\n    while (row && getComputedStyle(row).overflowX === \"visible\") row = row.parentElement;\n    if (button && row && button.getBoundingClientRect().right > row.getBoundingClientRect().right + 0.5) setCut(true);\n  });\n  return cut;\n}\n\nexport function ClearAllControl({\n  onClearAll,\n  compact: compactRung,\n  testIdPrefix,\n  frozen = false,\n}: {\n  onClearAll: () => void;\n  compact: boolean;\n  testIdPrefix: string;\n  /** The bar is frozen while a panel is open; see {@link useCutByRow}. */\n  frozen?: boolean;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const ref = useRef<HTMLButtonElement>(null);\n  const cut = useCutByRow(ref, frozen && !compactRung);\n  const compact = compactRung || cut;\n  // No border, no fill. Every other control on this row is an outlined field\n  // because it OPENS something; this one is an escape hatch, and giving it the\n  // same weight made it read as a sixth filter. Quiet until hovered.\n  const button = (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      ref={ref}\n      onClick={onClearAll}\n      data-testid={`${testIdPrefix}-clear-all`}\n      aria-label={copy.filters.clearAll}\n      sx={{\n        display: \"inline-flex\",\n        alignItems: \"center\",\n        gap: 0.5,\n        height: fieldHeight,\n        px: compact ? 0.75 : 1,\n        border: 0,\n        borderRadius: fieldRadiusPx,\n        bgcolor: \"transparent\",\n        cursor: \"pointer\",\n        font: \"inherit\",\n        fontSize: sxRem(13),\n        whiteSpace: \"nowrap\",\n        // Never squeezed: the bar is frozen while a panel is open, and when a\n        // first filter applied from inside one brought this in, the row had\n        // no room budgeted for it and cut \"Limpar\" to \"Lin\" (FUT-4144).\n        flexShrink: 0,\n        color: \"text.secondary\",\n        \"&:hover\": { color: \"text.primary\", bgcolor: \"action.hover\" },\n      }}\n    >\n      <FilterAltOffRoundedIcon sx={{ fontSize: sxRem(16) }} />\n      {!compact && <Box component=\"span\">{copy.filters.clear}</Box>}\n    </Box>\n  );\n  return compact ? <Tooltip title={copy.filters.clearAll}>{button}</Tooltip> : button;\n}\n\n/**\n * The way out of a search takeover.\n *\n * A phone has no Escape key, and without this the takeover is a one-way door\n * onto a bar with no filters on it.\n\n/**\n * The way out of a search takeover.\n *\n * A phone has no Escape key, and without this the takeover is a one-way door\n * onto a bar with no filters on it.\n */\nexport function CloseSearchControl({\n  onClose,\n  testIdPrefix,\n}: {\n  onClose: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Tooltip title={copy.search.close}>\n      <Box\n        component=\"button\"\n        type=\"button\"\n        onClick={onClose}\n        aria-label={copy.search.close}\n        data-testid={`${testIdPrefix}-search-close`}\n        sx={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          height: fieldHeight,\n          px: 0.75,\n          border: 0,\n          borderRadius: fieldRadiusPx,\n          bgcolor: \"transparent\",\n          cursor: \"pointer\",\n          color: \"text.secondary\",\n          \"&:hover\": { color: \"text.primary\", bgcolor: \"action.hover\" },\n        }}\n      >\n        <CloseRoundedIcon sx={{ fontSize: sxRem(18) }} />\n      </Box>\n    </Tooltip>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/{chunk-U2ILXZDG.js → chunk-TB5CRHTF.js}

@@ -2,7 +2,7 @@ import {
   CarouselArrows,
   CarouselIndicators,
   CarouselThumbnails
-} from "./chunk-BECKKDYG.js";
+} from "./chunk-M2M4IDFU.js";
 
 // src/components/data-display/Carousel/Carousel.chrome.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -60,4 +60,4 @@ var CarouselChrome = ({
 export {
   CarouselChrome
 };
-//# sourceMappingURL=chunk-U2ILXZDG.js.map
+//# sourceMappingURL=chunk-TB5CRHTF.js.map

package/dist/{chunk-X2GWR75Q.js → chunk-TSEBMVYY.js}

@@ -1,12 +1,12 @@
 import {
   partTestId
-} from "./chunk-3EIRRLCQ.js";
+} from "./chunk-HC6OZ7QK.js";
 import {
   SETTING_CARD
 } from "./chunk-BFRVMCQM.js";
 import {
   InteractiveTooltip
-} from "./chunk-Z5WUSI47.js";
+} from "./chunk-G3JFESKD.js";
 import {
   Icon
 } from "./chunk-YEKPQAOW.js";
@@ -92,4 +92,4 @@ export {
   SummaryInfo,
   useSummaryInfo
 };
-//# sourceMappingURL=chunk-X2GWR75Q.js.map
+//# sourceMappingURL=chunk-TSEBMVYY.js.map

package/dist/{chunk-OKRITX4S.js → chunk-U2AEM3K4.js}

@@ -1,21 +1,21 @@
 import {
   MapCoordinates,
   MapMarkers
-} from "./chunk-CJUK32UH.js";
+} from "./chunk-MYTV353T.js";
 import {
   MapLayers
-} from "./chunk-EXVCVXFX.js";
+} from "./chunk-U2QXQ7D4.js";
 import {
   glassStyles,
   resolveMapCopy,
   resolveMapPreviewProps
-} from "./chunk-CSGBHYW6.js";
-import {
-  StaticMapView
-} from "./chunk-UAOE3ZPC.js";
+} from "./chunk-M5Y42AZ4.js";
 import {
   useMapPreview
 } from "./chunk-QSRZOXQI.js";
+import {
+  StaticMapView
+} from "./chunk-UAOE3ZPC.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -113,4 +113,4 @@ export {
   MapPreview,
   MapPreview_default
 };
-//# sourceMappingURL=chunk-OKRITX4S.js.map
+//# sourceMappingURL=chunk-U2AEM3K4.js.map

package/dist/{chunk-EXVCVXFX.js → chunk-U2QXQ7D4.js}

@@ -4,16 +4,16 @@ import {
 } from "./chunk-ZZ4MMUBY.js";
 import {
   MapControlBar
-} from "./chunk-6WHIJPEF.js";
+} from "./chunk-6PU5P7QT.js";
 import {
   resolveMapCopy
-} from "./chunk-CSGBHYW6.js";
-import {
-  MapSearchBar
-} from "./chunk-MIUPTZS6.js";
+} from "./chunk-M5Y42AZ4.js";
 import {
   HEATMAP_VIEWBOX
 } from "./chunk-H2J2MTRE.js";
+import {
+  MapSearchBar
+} from "./chunk-MIUPTZS6.js";
 
 // src/components/data-display/MapPreview/MapLayers.tsx
 import { useTheme } from "@mui/material/styles/index.js";
@@ -59,4 +59,4 @@ var MapLayers = ({ settings, zoom, mapType, search, controls }) => {
 export {
   MapLayers
 };
-//# sourceMappingURL=chunk-EXVCVXFX.js.map
+//# sourceMappingURL=chunk-U2QXQ7D4.js.map

package/dist/{chunk-K6FCSB6T.js → chunk-U2SAW6DH.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-RUIV5TVA.js";
 import {
   CarouselChrome
-} from "./chunk-U2ILXZDG.js";
+} from "./chunk-TB5CRHTF.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -151,4 +151,4 @@ var Carousel = (props) => {
 export {
   Carousel
 };
-//# sourceMappingURL=chunk-K6FCSB6T.js.map
+//# sourceMappingURL=chunk-U2SAW6DH.js.map

package/dist/{chunk-DAHSKQBV.js → chunk-UMOHHWXY.js}

@@ -13,7 +13,7 @@ import {
   RAIL_GAP,
   railsTemplateFor,
   useListRails
-} from "./chunk-BMTIBQQC.js";
+} from "./chunk-BBBHPK2Q.js";
 import {
   DENSITY_ROW_PADDING
 } from "./chunk-5CAWRMDX.js";
@@ -213,4 +213,4 @@ export {
   rowGutters,
   rowStyles
 };
-//# sourceMappingURL=chunk-DAHSKQBV.js.map
+//# sourceMappingURL=chunk-UMOHHWXY.js.map

package/dist/{chunk-YDIC6LSP.js → chunk-VCQFDQM3.js}

@@ -1,6 +1,6 @@
 import {
   CalendarDayCell
-} from "./chunk-XHIBFBNP.js";
+} from "./chunk-3ZRK3BRN.js";
 import {
   getMonthName
 } from "./chunk-QWOI5BZV.js";
@@ -24,13 +24,22 @@ var GRID_SX = {
   rowGap: 0.5
 };
 var MONTH_SX = { flex: `1 1 ${sxRem(280)}`, minWidth: 0, maxWidth: sxRem(304) };
-var MonthNavHeader = ({ title, showPrevious, showNext, onPreviousMonth, onNextMonth }) => /* @__PURE__ */ jsxs(
+var MonthNavHeader = ({ title, showPrevious, showNext, labels, onPreviousMonth, onNextMonth }) => /* @__PURE__ */ jsxs(
   Box,
   {
     sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 },
     "data-testid": "calendar-header",
     children: [
-      showPrevious && /* @__PURE__ */ jsx(IconButton, { onClick: onPreviousMonth, size: "small", "data-testid": "calendar-prev-month", children: /* @__PURE__ */ jsx(ChevronLeft, {}) }),
+      showPrevious && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          onClick: onPreviousMonth,
+          size: "small",
+          "aria-label": labels?.previousMonth,
+          "data-testid": "calendar-prev-month",
+          children: /* @__PURE__ */ jsx(ChevronLeft, {})
+        }
+      ),
       /* @__PURE__ */ jsx(
         Typography,
         {
@@ -40,7 +49,16 @@ var MonthNavHeader = ({ title, showPrevious, showNext, onPreviousMonth, onNextMo
           children: title
         }
       ),
-      showNext && /* @__PURE__ */ jsx(IconButton, { onClick: onNextMonth, size: "small", "data-testid": "calendar-next-month", children: /* @__PURE__ */ jsx(ChevronRight, {}) }),
+      showNext && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          onClick: onNextMonth,
+          size: "small",
+          "aria-label": labels?.nextMonth,
+          "data-testid": "calendar-next-month",
+          children: /* @__PURE__ */ jsx(ChevronRight, {})
+        }
+      ),
       !showPrevious && !showNext && /* @__PURE__ */ jsx(Box, { sx: { width: SPACER_WIDTH } })
     ]
   }
@@ -63,13 +81,13 @@ var WeekdayHeader = ({ weekdayNames }) => /* @__PURE__ */ jsx(Box, { sx: { ...GR
   },
   `weekday-${index}`
 )) });
-var MonthDays = ({ matrix, monthIndex, weekdayNames, dayContext }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+var MonthDays = ({ matrix, weekdayNames, dayContext }) => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(WeekdayHeader, { weekdayNames }),
   /* @__PURE__ */ jsx(
     Box,
     {
       role: "grid",
-      "aria-labelledby": `month-${monthIndex}`,
+      "aria-label": getMonthName(matrix.month, matrix.year, dayContext.locale),
       "data-testid": "calendar-grid",
       sx: GRID_SX,
       children: matrix.weeks.flat().map((day) => /* @__PURE__ */ jsx(CalendarDayCell, { day, ...dayContext }, day.key))
@@ -83,6 +101,7 @@ var CalendarMonth = ({
   locale,
   weekdayNames,
   renderHeader,
+  labels,
   onPreviousMonth,
   onNextMonth,
   dayContext
@@ -102,6 +121,7 @@ var CalendarMonth = ({
           title,
           showPrevious: monthIndex === 0,
           showNext: monthIndex === monthsToShow - 1,
+          labels,
           onPreviousMonth,
           onNextMonth
         }
@@ -124,4 +144,4 @@ export {
   MonthDays,
   CalendarMonth
 };
-//# sourceMappingURL=chunk-YDIC6LSP.js.map
+//# sourceMappingURL=chunk-VCQFDQM3.js.map

package/dist/chunk-VCQFDQM3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Calendar/CalendarMonth.tsx"],"sourcesContent":["import ChevronLeft from '@mui/icons-material/ChevronLeft';\nimport ChevronRight from '@mui/icons-material/ChevronRight';\nimport Box from '@mui/material/Box/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport type { CalendarLabels } from '../../../copy/labels';\nimport { sxRem } from '../../../tokens/relative';\n\nimport { getMonthName } from './Calendar.dates';\nimport type { CalendarProps, MonthMatrix } from './Calendar.types';\nimport type { DayCellContext } from './CalendarDayCell';\nimport { CalendarDayCell } from './CalendarDayCell';\n\n/** The nav spacer's width and the weekday row's height, 32 design px through the type scale. */\nconst SPACER_WIDTH = sxRem(32);\n\n// `minmax(0, 1fr)`, not `1fr`: a bare `1fr` keeps each column at least its\n// content's width, which is what held the grid at 304px (FUT-3861). No column\n// gap: a selected range is one band across the days, and a gap cut it into\n// tiles (FUT-4162). Rows keep theirs. Items centre in their column: the built-in\n// day stretches across it, a host's `renderDay` cell sits in its middle.\nconst GRID_SX = {\n  display: 'grid',\n  justifyItems: 'center',\n  gridTemplateColumns: 'repeat(7, minmax(0, 1fr))',\n  columnGap: 0,\n  rowGap: 0.5,\n} as const;\n\n/**\n * A month takes the room it is given, from nothing up to seven full columns\n * (304 design px: what 7 × 40 cells and 6 × 4 gaps came to before the gaps\n * went, FUT-4162). Months side by side keep a 280 basis,\n * so a multi-month calendar still wraps rather than squeezing every month.\n */\nexport const MONTH_SX = { flex: `1 1 ${sxRem(280)}`, minWidth: 0, maxWidth: sxRem(304) } as const;\n\n/** The two arrows' accessible names; an icon alone names nothing. */\nexport type MonthArrowLabels = Pick<CalendarLabels, 'previousMonth' | 'nextMonth'>;\n\n// Only the outermost months carry arrows; the ones between get a spacer so their\n// titles stay centred.\nconst MonthNavHeader: FC<{\n  title: React.ReactNode;\n  showPrevious: boolean;\n  showNext: boolean;\n  labels?: MonthArrowLabels;\n  onPreviousMonth: () => void;\n  onNextMonth: () => void;\n}> = ({ title, showPrevious, showNext, labels, onPreviousMonth, onNextMonth }) => (\n  <Box\n    sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}\n    data-testid=\"calendar-header\"\n  >\n    {showPrevious && (\n      <IconButton\n        onClick={onPreviousMonth}\n        size=\"small\"\n        aria-label={labels?.previousMonth}\n        data-testid=\"calendar-prev-month\"\n      >\n        <ChevronLeft />\n      </IconButton>\n    )}\n\n    <Typography\n      variant=\"h6\"\n      component=\"h2\"\n      sx={{ fontWeight: 'bold', flex: 1, textAlign: 'center' }}\n    >\n      {title}\n    </Typography>\n\n    {showNext && (\n      <IconButton\n        onClick={onNextMonth}\n        size=\"small\"\n        aria-label={labels?.nextMonth}\n        data-testid=\"calendar-next-month\"\n      >\n        <ChevronRight />\n      </IconButton>\n    )}\n\n    {!showPrevious && !showNext && <Box sx={{ width: SPACER_WIDTH }} />}\n  </Box>\n);\n\nconst WeekdayHeader: FC<{ weekdayNames: string[] }> = ({ weekdayNames }) => (\n  <Box sx={{ ...GRID_SX, mb: 1 }}>\n    {weekdayNames.map((weekday, index) => (\n      <Box\n        // Narrow weekday names repeat within a week ('S', 'T'), so position is\n        // the only stable key here.\n        key={`weekday-${index}`}\n        role=\"columnheader\"\n        data-testid={`calendar-weekday-${index}`}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          height: SPACER_WIDTH,\n          fontSize: sxRem(14),\n          fontWeight: 'bold',\n          color: 'text.secondary',\n        }}\n      >\n        {weekday}\n      </Box>\n    ))}\n  </Box>\n);\n\n/** The weekday row and the day grid under a month's caption. */\nexport const MonthDays: FC<{\n  matrix: MonthMatrix;\n  monthIndex: number;\n  weekdayNames: string[];\n  dayContext: DayCellContext;\n}> = ({ matrix, weekdayNames, dayContext }) => (\n  <>\n    <WeekdayHeader weekdayNames={weekdayNames} />\n\n    <Box\n      role=\"grid\"\n      // Named by its month in words. It pointed at an id nothing carried, so\n      // the grid had no name at all and a two-month calendar read as two\n      // anonymous grids.\n      aria-label={getMonthName(matrix.month, matrix.year, dayContext.locale)}\n      data-testid=\"calendar-grid\"\n      sx={GRID_SX}\n    >\n      {matrix.weeks.flat().map((day) => (\n        <CalendarDayCell key={day.key} day={day} {...dayContext} />\n      ))}\n    </Box>\n  </>\n);\n\nexport interface CalendarMonthProps {\n  matrix: MonthMatrix;\n  monthIndex: number;\n  monthsToShow: number;\n  locale: string;\n  weekdayNames: string[];\n  renderHeader?: CalendarProps['renderHeader'];\n  /** The arrows' accessible names. */\n  labels?: MonthArrowLabels;\n  onPreviousMonth: () => void;\n  onNextMonth: () => void;\n  dayContext: DayCellContext;\n}\n\nexport const CalendarMonth: FC<CalendarMonthProps> = ({\n  matrix,\n  monthIndex,\n  monthsToShow,\n  locale,\n  weekdayNames,\n  renderHeader,\n  labels,\n  onPreviousMonth,\n  onNextMonth,\n  dayContext,\n}) => {\n  const monthName = getMonthName(matrix.month, matrix.year, locale);\n  const title = renderHeader ? renderHeader({ month: matrix.month, year: matrix.year }) : monthName;\n\n  return (\n    /* The month is addressable by its position, because in a multi-month\n       calendar every day number appears once PER MONTH — `calendar-date-5` is\n       January's 5th and February's. Without a per-month hook a test can only\n       reach a day positionally, which is exactly what the flakiness gate\n       refuses. Additive: `calendar-grid` below is unchanged. */\n    <Box sx={MONTH_SX} data-testid={`calendar-month-${monthIndex}`}>\n      <MonthNavHeader\n        title={title}\n        showPrevious={monthIndex === 0}\n        showNext={monthIndex === monthsToShow - 1}\n        labels={labels}\n        onPreviousMonth={onPreviousMonth}\n        onNextMonth={onNextMonth}\n      />\n\n      <MonthDays\n        matrix={matrix}\n        monthIndex={monthIndex}\n        weekdayNames={weekdayNames}\n        dayContext={dayContext}\n      />\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-P772HCHI.js → chunk-W676GY42.js}

@@ -1,11 +1,11 @@
-import {
-  useLightboxCopy
-} from "./chunk-TEQYTEM2.js";
 import {
   OVERLAY_Z_INDEX,
   navButtonSx,
   overlayButtonSx
 } from "./chunk-VQU3CBAL.js";
+import {
+  useLightboxCopy
+} from "./chunk-TEQYTEM2.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -156,4 +156,4 @@ export {
   LightboxZoomControls,
   LightboxAutoplayButton
 };
-//# sourceMappingURL=chunk-P772HCHI.js.map
+//# sourceMappingURL=chunk-W676GY42.js.map