@12-apps/ui 6.89.2 → 6.90.0

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

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

package/dist/{chunk-5RSK5M6M.js → chunk-FI2CQOGC.js}

@@ -1,9 +1,15 @@
 import {
-  NumberBoundInput
-} from "./chunk-FJ3UZ4RC.js";
+  RangeBounds
+} from "./chunk-VIMMEADQ.js";
 import {
   RangePresets
-} from "./chunk-7D7CJRL7.js";
+} from "./chunk-LZNUBQ5I.js";
+import {
+  presetsFor
+} from "./chunk-CBOB5AV6.js";
+import {
+  RangeSummary
+} from "./chunk-J2AVWIMM.js";
 import {
   isRangeInverted,
   isRangeSet,
@@ -11,11 +17,8 @@ import {
   rangeChipLabel
 } from "./chunk-GCZJH4XL.js";
 import {
-  useOutsideResetKey
-} from "./chunk-YOPMXGHY.js";
-import {
-  presetsFor
-} from "./chunk-CBOB5AV6.js";
+  useStillAnchor
+} from "./chunk-7CUZTWKW.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -23,8 +26,8 @@ import {
   TableFilter
 } from "./chunk-FORQEHRQ.js";
 import {
-  DayBoundInput
-} from "./chunk-72HOUWAW.js";
+  TableFilterContext
+} from "./chunk-7AIL2F5E.js";
 import {
   fieldHeight
 } from "./chunk-RGVNXES5.js";
@@ -35,6 +38,8 @@ import {
   fieldEdge
 } from "./chunk-7ZADLRLP.js";
 import {
+  rem,
+  remPx,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
@@ -45,95 +50,10 @@ import Box from "@mui/material/Box/index.js";
 import Button from "@mui/material/Button/index.js";
 import Popover from "@mui/material/Popover/index.js";
 import Typography from "@mui/material/Typography/index.js";
-import { useState } from "react";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useContext } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function BoundField({
-  field,
-  label,
-  value,
-  onChange,
-  testId
-}) {
-  const copy = useDataViewsCopy();
-  if (field.kind === "day") {
-    return /* @__PURE__ */ jsx(
-      DayBoundInput,
-      {
-        mask: copy.filters.dayMask,
-        invalidMessage: copy.filters.dayInvalid,
-        label,
-        value: value == null ? void 0 : String(value),
-        onChange,
-        testId
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    NumberBoundInput,
-    {
-      label,
-      value,
-      unit: field.unit,
-      onChange,
-      testId
-    }
-  );
-}
-function RangeBounds({
-  field,
-  value,
-  onChange,
-  testId
-}) {
-  const copy = useDataViewsCopy();
-  const inverted = isRangeInverted(value);
-  const { key, emitted } = useOutsideResetKey(value);
-  return /* @__PURE__ */ jsxs(Box, { "data-testid": `${testId}-panel`, children: [
-    /* @__PURE__ */ jsx(Box, { sx: { "&:not(:empty)": { mb: 1.5 } }, children: /* @__PURE__ */ jsx(RangePresets, { presets: presetsFor(field, copy), value, onChange, testId }) }),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", gap: 1.5 }, children: [
-      /* @__PURE__ */ jsx(
-        BoundField,
-        {
-          field,
-          label: copy.filters.rangeStart,
-          value: value.min,
-          onChange: (min) => onChange(emitted({ ...value, min })),
-          testId: `${testId}-min`
-        },
-        `min-${key}`
-      ),
-      /* @__PURE__ */ jsx(
-        BoundField,
-        {
-          field,
-          label: copy.filters.rangeEnd,
-          value: value.max,
-          onChange: (max) => onChange(emitted({ ...value, max })),
-          testId: `${testId}-max`
-        },
-        `max-${key}`
-      )
-    ] }),
-    inverted && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        component: "p",
-        "data-testid": `${testId}-inverted`,
-        sx: { mt: 0.75, fontSize: sxRem(12), color: "error.main" },
-        children: copy.filters.rangeInvalid
-      }
-    ),
-    field.kind === "day" && !inverted && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        component: "p",
-        "data-testid": `${testId}-inclusive`,
-        sx: { mt: 0.75, fontSize: sxRem(12), color: "text.disabled" },
-        children: copy.filters.rangeInclusiveNote
-      }
-    )
-  ] });
-}
 function ClearAffordance({
   label,
   onClear,
@@ -207,6 +127,18 @@ function RangeTrigger({
     }
   );
 }
+function useCalendarMonths() {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.up("md")) ? 2 : 1;
+}
+var DAY_PAPER_SX = (theme) => ({
+  width: { xs: "100%", sm: rem(theme, 400), md: "auto" },
+  // Below `sm` 8px from each edge and 8px of padding, so the month gets the
+  // 280px seven 40px day columns need: at 320 it had 256 and every day was a
+  // 33px target (FUT-4144 UI review).
+  maxWidth: { xs: `calc(100% - ${rem(theme, 16)})`, sm: `calc(100% - ${rem(theme, 32)})` },
+  p: { xs: 1, sm: 2 }
+});
 function RangePill({
   field,
   value,
@@ -214,10 +146,11 @@ function RangePill({
   onOpenChange,
   testIdPrefix
 }) {
-  const copy = useDataViewsCopy();
-  const [anchor, setAnchor] = useState(null);
-  const active = isRangeSet(value);
+  const still = useStillAnchor();
   const testId = `${testIdPrefix}-range-${field.id}`;
+  const calendarMonths = useCalendarMonths();
+  const theme = useTheme();
+  const phone = useMediaQuery(theme.breakpoints.down("sm"));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       RangeTrigger,
@@ -226,40 +159,35 @@ function RangePill({
         value,
         onChange,
         onOpen: (element) => {
-          setAnchor(element);
+          still.open(element);
           onOpenChange?.(true);
         },
-        open: Boolean(anchor),
+        open: Boolean(still.anchor),
         testId
       }
     ),
     /* @__PURE__ */ jsxs(
       Popover,
       {
-        open: Boolean(anchor),
-        anchorEl: anchor,
+        ...still.popoverProps,
         onClose: () => {
-          setAnchor(null);
+          still.close();
           onOpenChange?.(false);
         },
-        anchorOrigin: { vertical: "bottom", horizontal: "left" },
-        slotProps: { paper: { sx: { p: 2, mt: 0.5 } } },
+        marginThreshold: field.kind === "day" && phone ? remPx(theme, 8) : void 0,
+        slotProps: { paper: { ref: still.paperRef, sx: [{ p: 2, mt: 0.5 }, field.kind === "day" && DAY_PAPER_SX] } },
         children: [
-          /* @__PURE__ */ jsx(RangeBounds, { field, value, onChange, testId }),
-          active && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, mt: 1.5 }, children: [
-            /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: sxRem(12), color: "text.secondary" }, children: rangeChipLabel(field, value) }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "text",
-                size: "small",
-                onClick: () => onChange({}),
-                "data-testid": `${testId}-clear`,
-                sx: { textTransform: "none" },
-                children: copy.filters.clear
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsx(
+            RangeBounds,
+            {
+              field,
+              value,
+              onChange,
+              testId,
+              calendarMonths
+            }
+          ),
+          /* @__PURE__ */ jsx(RangeSummary, { field, value, onClear: () => onChange({}), testId })
         ]
       }
     )
@@ -272,10 +200,20 @@ function PanelRangeField({
   testId
 }) {
   const copy = useDataViewsCopy();
+  const panel = useContext(TableFilterContext);
   if (field.kind === "day") {
     return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
       /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: field.label }),
-      /* @__PURE__ */ jsx(RangeBounds, { field, value, onChange, testId })
+      /* @__PURE__ */ jsx(
+        RangeBounds,
+        {
+          field,
+          value,
+          onChange,
+          testId,
+          showCalendar: panel ? panel.open : true
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
@@ -294,8 +232,7 @@ function PanelRangeField({
 }
 
 export {
-  RangeBounds,
   RangePill,
   PanelRangeField
 };
-//# sourceMappingURL=chunk-5RSK5M6M.js.map
+//# sourceMappingURL=chunk-FI2CQOGC.js.map

package/dist/chunk-FI2CQOGC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-pill.tsx"],"sourcesContent":["'use client';\n\n/**\n * A range filter as a PILL in the inline filter bar — the same affordance the\n * multi-select facets use, so \"Data\" and \"Valor\" sit in the filter row beside\n * \"Pagamento\"/\"Situação\"/\"Método\" instead of floating above the grid.\n *\n * Before this the inline bar rendered pills only, and `rangeFields` had a\n * surface on the slide-in panel alone — which `inlineFilters` REPLACES on a wide\n * screen. So a range filter was invisible on exactly the screens that use it,\n * and a page wanting one had to hang its own inputs outside the grid, outside\n * `DataViewState`, and outside the grid's \"Limpar filtros\" (FUT-668).\n */\nimport CloseIcon from '@mui/icons-material/Close';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Popover from '@mui/material/Popover/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useContext } from 'react';\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { TableFilter } from '../../layout/TableFilter';\nimport { TableFilterContext } from '../../layout/TableFilter/TableFilterContext';\nimport { RangePresets } from './data-views-preset-chips';\nimport { RangeBounds } from './data-views-range-bounds';\nimport { RangeSummary } from './data-views-range-summary';\nimport { useStillAnchor } from './data-views-still-anchor';\nimport { presetsFor } from './data-views-range-presets';\nimport {\n  isRangeInverted,\n  isRangeSet,\n  numericRange,\n  rangeChipLabel,\n} from './data-views-range-values';\nimport type { RangeFieldConfig, RangeValue } from './data-views-types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { rem, remPx, sxRem } from '../../../tokens/relative';\n\n// Re-exported: the pair moved to its own file, and its importers keep their path.\nexport { RangeBounds };\n\n/**\n * The pill + its popover. Bounds commit on change (the list is server-driven, so\n * each edit is a query) and the popover stays open, which is what lets a\n * merchant set \"de\" and then \"até\" without re-opening it.\n */\n/** An applied range clears from the pill itself — re-opening to empty two fields is three gestures for one intent. */\nfunction ClearAffordance({\n  label,\n  onClear,\n  testId,\n}: {\n  label: string;\n  onClear: () => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const clear = (event: React.SyntheticEvent): void => {\n    event.stopPropagation();\n    onClear();\n  };\n  return (\n    <Box\n      component=\"span\"\n      role=\"button\"\n      tabIndex={0}\n      aria-label={copy.filters.clearRange(label)}\n      data-testid={testId}\n      onClick={clear}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        if (event.key !== 'Enter' && event.key !== ' ') return;\n        event.preventDefault();\n        clear(event);\n      }}\n      sx={{ display: 'inline-flex', borderRadius: 999, p: 0.125, '&:hover': { bgcolor: 'action.selected' } }}\n    >\n      <CloseIcon sx={{ fontSize: sxRem(14) }} />\n    </Box>\n  );\n}\n\n/** The pill button: its label carries the applied window, and its tone the state. */\nfunction RangeTrigger<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  onOpen,\n  open,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  onOpen: (anchor: HTMLElement) => void;\n  open: boolean;\n  testId: string;\n}): React.JSX.Element {\n  const active = isRangeSet(value);\n  const inverted = isRangeInverted(value);\n  // An INVERTED window gets its own tone rather than the ordinary \"applied\"\n  // one: it is applied, and it matches nothing, and those are different states.\n  // At rest the pill draws the one field border (`fieldEdge`).\n  const tone = inverted ? 'error.main' : active ? 'primary.main' : null;\n  return (\n    <Button\n      variant=\"outlined\"\n      color=\"inherit\"\n      size=\"small\"\n      data-testid={testId}\n      aria-haspopup=\"dialog\"\n      aria-expanded={open}\n      onClick={(event) => onOpen(event.currentTarget)}\n      // ✕ FIRST, chevron LAST — the same shape as every other pill. It used to\n      // replace the chevron at the end, so a range pill and a multi-select pill\n      // put the clear in different places, and an applied range lost the\n      // affordance that says it opens.\n      startIcon={\n        active ? (\n          <ClearAffordance label={field.label} onClear={() => onChange({})} testId={`${testId}-clear-inline`} />\n        ) : undefined\n      }\n      endIcon={<ChevronDownIcon sx={{ fontSize: sxRem(16) }} />}\n      sx={{\n        borderRadius: fieldRadiusPx,\n        height: fieldHeight,\n        px: 1.5,\n        maxWidth: sxRem(280),\n        color: inverted ? 'error.main' : 'text.primary',\n        fontWeight: 600,\n        fontSize: sxRem(13),\n        textTransform: 'none',\n        whiteSpace: 'nowrap',\n        borderColor: (theme) => tone ?? fieldEdge(theme),\n        bgcolor: active ? 'action.selected' : 'background.paper',\n        '&:hover': {\n          borderColor: active ? tone : 'text.primary',\n          bgcolor: active ? 'action.selected' : 'action.hover',\n        },\n      }}\n    >\n      {/* The applied bounds, in the label — a pill reading only \"Valor\" hides\n          the very thing that is narrowing the list. */}\n      <Box component=\"span\" sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n        {active ? rangeChipLabel(field, value) : field.label}\n      </Box>\n    </Button>\n  );\n}\n\n/**\n * How many months the pill's calendar shows: two from the theme's `md` up,\n * where the popover has the ~670px they take; one below it.\n *\n * A media query, not an `sx` breakpoint, because it decides what to RENDER —\n * CSS cannot un-render a second month. `up('md')` so that where nothing can be\n * measured (a test, the server) the answer is the one month that always fits.\n */\nfunction useCalendarMonths(): 1 | 2 {\n  const theme = useTheme();\n  return useMediaQuery(theme.breakpoints.up('md')) ? 2 : 1;\n}\n\n/**\n * The day popover's width. Below `sm` it takes the screen's (less the\n * popover's own 16px margins, which its `maxWidth` already keeps), so the boxes\n * and the month share it instead of leaving a strip of grid beside a narrow\n * card. From `sm` to `md` it holds one month, and sized to its content the\n * preset row alone stretched it to ~515px with the month hugging the left and\n * a band of nothing beside it; 400 keeps the month and the boxes one width.\n * From `md` its content — two months — sets it.\n */\nconst DAY_PAPER_SX = (theme: Theme) => ({\n  width: { xs: '100%', sm: rem(theme, 400), md: 'auto' },\n  // Below `sm` 8px from each edge and 8px of padding, so the month gets the\n  // 280px seven 40px day columns need: at 320 it had 256 and every day was a\n  // 33px target (FUT-4144 UI review).\n  maxWidth: { xs: `calc(100% - ${rem(theme, 16)})`, sm: `calc(100% - ${rem(theme, 32)})` },\n  p: { xs: 1, sm: 2 },\n});\n\n\nexport function RangePill<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  onOpenChange,\n  testIdPrefix,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  /** So a measured toolbar can hold still while this is open. */\n  onOpenChange?: (open: boolean) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const still = useStillAnchor();\n  const testId = `${testIdPrefix}-range-${field.id}`;\n  const calendarMonths = useCalendarMonths();\n  const theme = useTheme();\n  const phone = useMediaQuery(theme.breakpoints.down('sm'));\n  return (\n    <>\n      <RangeTrigger\n        field={field}\n        value={value}\n        onChange={onChange}\n        onOpen={(element) => {\n          still.open(element);\n          onOpenChange?.(true);\n        }}\n        open={Boolean(still.anchor)}\n        testId={testId}\n      />\n      <Popover\n        {...still.popoverProps}\n        onClose={() => {\n          still.close();\n          onOpenChange?.(false);\n        }}\n        // Below `sm` a day popover keeps 8px from the screen's edges instead of 16.\n        marginThreshold={field.kind === 'day' && phone ? remPx(theme, 8) : undefined}\n        slotProps={{ paper: { ref: still.paperRef, sx: [{ p: 2, mt: 0.5 }, field.kind === 'day' && DAY_PAPER_SX] } }}\n      >\n        <RangeBounds\n          field={field}\n          value={value}\n          onChange={onChange}\n          testId={testId}\n          calendarMonths={calendarMonths}\n        />\n        <RangeSummary field={field} value={value} onClear={() => onChange({})} testId={testId} />\n      </Popover>\n    </>\n  );\n}\n\n\n/**\n * One range on the SLIDE-IN panel (and the narrow-screen modal): the numeric\n * control the panel already had, or — for a day range, which that control cannot\n * express — the same `De`/`Até` pair the pill's popover uses.\n */\nexport function PanelRangeField<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  // The slide-in panel stays mounted while closed; its calendar does not.\n  // Outside a `TableFilter` (the \"Mais\" sheet, a test) the pair is on screen.\n  const panel = useContext(TableFilterContext);\n  if (field.kind === \"day\") {\n    return (\n      <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n        <Typography component=\"span\" sx={{ fontSize: sxRem(12), fontWeight: 500, color: \"text.secondary\" }}>\n          {field.label}\n        </Typography>\n        <RangeBounds\n          field={field}\n          value={value}\n          onChange={onChange}\n          testId={testId}\n          showCalendar={panel ? panel.open : true}\n        />\n      </Box>\n    );\n  }\n  return (\n    <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n      <TableFilter.RangeField\n        label={field.label}\n        unit={field.unit}\n        value={numericRange(value)}\n        onChange={(range) => onChange(range)}\n        testId={testId}\n      />\n      {/* Below the numeric control here, unlike the pill's popover: this one\n          renders its own label, and chips above it would separate the label\n          from the field it names. */}\n      <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

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

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

package/dist/chunk-FYAW5GBF.js.map

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

package/dist/{chunk-AMLHEKSV.js → chunk-HI7JPDD6.js}

@@ -1,14 +1,14 @@
 import {
   renderChartByType
-} from "./chunk-6ATXOJVQ.js";
+} from "./chunk-QADTI63U.js";
+import {
+  ChartContainer
+} from "./chunk-RIRTW5EU.js";
 import {
   getSizeStyles,
   getVariantStyles,
   plotHeightPx
 } from "./chunk-TCWISGSS.js";
-import {
-  ChartContainer
-} from "./chunk-RIRTW5EU.js";
 import {
   muiColor
 } from "./chunk-7ZPUN7TV.js";
@@ -111,4 +111,4 @@ var Chart = (props) => {
 export {
   Chart
 };
-//# sourceMappingURL=chunk-AMLHEKSV.js.map
+//# sourceMappingURL=chunk-HI7JPDD6.js.map

package/dist/chunk-J2AVWIMM.js

@@ -0,0 +1,60 @@
+import {
+  isRangeSet,
+  rangeChipLabel
+} from "./chunk-GCZJH4XL.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-range-summary.tsx
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RangeSummary({
+  field,
+  value,
+  onClear,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  const active = isRangeSet(value);
+  if (!active && field.kind !== "day") return null;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "aria-hidden": active ? void 0 : true,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        mt: { xs: 0.5, sm: 1.5 },
+        visibility: active ? void 0 : "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: sxRem(12), color: "text.secondary" }, children: active ? rangeChipLabel(field, value) : field.label }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            size: "small",
+            onClick: active ? onClear : void 0,
+            tabIndex: active ? void 0 : -1,
+            "data-testid": active ? `${testId}-clear` : void 0,
+            sx: { textTransform: "none" },
+            children: copy.filters.clear
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  RangeSummary
+};
+//# sourceMappingURL=chunk-J2AVWIMM.js.map

package/dist/chunk-J2AVWIMM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-summary.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport { useDataViewsCopy } from './data-views-copy-context';\nimport { isRangeSet, rangeChipLabel } from './data-views-range-values';\nimport type { RangeFieldConfig, RangeValue } from './data-views-types';\nimport { sxRem } from '../../../tokens/relative';\n\n/**\n * The applied window in words, and \"Limpar\".\n *\n * An inverted window is not an error the merchant must fix before the list\n * responds — it simply matches nothing, and saying so beats an empty grid with\n * no explanation (FUT-668).\n *\n * A DAY filter keeps the row's height while nothing is applied: its first tap\n * on the calendar applies a bound, and a row appearing then grew the popover\n * 26px and moved it 32px up at 320×568, the day under the finger with it\n * (FUT-4144 UI review round 2). The held row is invisible and inert.\n */\nexport function RangeSummary<T extends Record<string, unknown>>({\n  field,\n  value,\n  onClear,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onClear: () => void;\n  testId: string;\n}): React.JSX.Element | null {\n  const copy = useDataViewsCopy();\n  const active = isRangeSet(value);\n  if (!active && field.kind !== 'day') return null;\n  return (\n    <Box\n      aria-hidden={active ? undefined : true}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        gap: 2,\n        mt: { xs: 0.5, sm: 1.5 },\n        visibility: active ? undefined : 'hidden',\n      }}\n    >\n      <Typography component=\"span\" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>\n        {active ? rangeChipLabel(field, value) : field.label}\n      </Typography>\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        onClick={active ? onClear : undefined}\n        tabIndex={active ? undefined : -1}\n        data-testid={active ? `${testId}-clear` : undefined}\n        sx={{ textTransform: 'none' }}\n      >\n        {copy.filters.clear}\n      </Button>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAEA,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,gBAAgB;AAmCnB,SAWE,KAXF;AAfG,SAAS,aAAgD;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAK6B;AAC3B,QAAM,OAAO,iBAAiB;AAC9B,QAAM,SAAS,WAAW,KAAK;AAC/B,MAAI,CAAC,UAAU,MAAM,SAAS,MAAO,QAAO;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,SAAS,SAAY;AAAA,MAClC,IAAI;AAAA,QACF,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,QACL,IAAI,EAAE,IAAI,KAAK,IAAI,IAAI;AAAA,QACvB,YAAY,SAAS,SAAY;AAAA,MACnC;AAAA,MAEA;AAAA,4BAAC,cAAW,WAAU,QAAO,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,OAAO,iBAAiB,GAC7E,mBAAS,eAAe,OAAO,KAAK,IAAI,MAAM,OACjD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS,SAAS,UAAU;AAAA,YAC5B,UAAU,SAAS,SAAY;AAAA,YAC/B,eAAa,SAAS,GAAG,MAAM,WAAW;AAAA,YAC1C,IAAI,EAAE,eAAe,OAAO;AAAA,YAE3B,eAAK,QAAQ;AAAA;AAAA,QAChB;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/{chunk-7QKIL5YF.js → chunk-J2GDA64N.js}

@@ -3,19 +3,19 @@ import {
 } from "./chunk-R26WP22N.js";
 import {
   useDateRangePicker
-} from "./chunk-HUXAIQC5.js";
+} from "./chunk-RZ3P4X2I.js";
 import {
   DateRangeQuickList
 } from "./chunk-6KKQHJE7.js";
 import {
   DateRangeFields
-} from "./chunk-5S5K73I6.js";
+} from "./chunk-QSOCOXVL.js";
 import {
   toLocalDay
 } from "./chunk-SUTOAW7I.js";
 import {
   Calendar
-} from "./chunk-Q2ERGAQO.js";
+} from "./chunk-FYAW5GBF.js";
 
 // src/components/form/DateRangePicker/DateRangePicker.tsx
 import Box from "@mui/material/Box/index.js";
@@ -181,4 +181,4 @@ export {
   DateRangePicker,
   DateRangePicker_default
 };
-//# sourceMappingURL=chunk-7QKIL5YF.js.map
+//# sourceMappingURL=chunk-J2GDA64N.js.map

package/dist/{chunk-BAQ3ITZV.js → chunk-JFD742C3.js}

@@ -1,6 +1,6 @@
 import {
   FleetCanvas
-} from "./chunk-MW7P2C2C.js";
+} from "./chunk-QAEO52Z4.js";
 import {
   FleetRoster
 } from "./chunk-A4B27HYU.js";
@@ -79,4 +79,4 @@ function FleetBody({
 export {
   FleetBody
 };
-//# sourceMappingURL=chunk-BAQ3ITZV.js.map
+//# sourceMappingURL=chunk-JFD742C3.js.map