@12-apps/ui 6.89.2 → 6.91.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/data-display/DataViews/data-views-day-input.tsx"],"sourcesContent":["'use client';\n\n/**\n * A day bound as a MASKED `dd/mm/aaaa` text field, replacing `<input type=\"date\">`.\n *\n * The native control is three separate segments wearing one box. Typing a date\n * means filling a segment, being jumped to the next, and starting over — and\n * which segment comes first is the BROWSER's locale, not ours, so the same\n * field reads `dd/mm/aaaa` for one merchant and `mm/dd/yyyy` for the next with\n * nothing in our code saying which. There is no way to type a date as one\n * continuous run of digits, which is how people actually type dates.\n *\n * A mask gives that back: eight digits straight through, separators inserted as\n * you go, backspace walking back through them.\n *\n * Measured, driving both controls in Chromium with the same eight keystrokes\n * (`01072026`, one `keydown` at a time):\n *\n *   native  →  field ends EMPTY, no filter applied, 0 requests\n *   masked  →  field reads `01/07/2026`, filter applied, 1 request\n *\n * The native result is the whole complaint: you type a date and nothing lands.\n *\n * The second half of the fix is WHEN the bound is written. A partially-typed\n * year is itself a valid date — `2026` passes through `0002`, `0020`, `0202` on\n * the way — so committing on every keystroke would send the grid off to fetch\n * years nobody meant. A bound is written only once the text is a WHOLE, real\n * date, which is what keeps the run above at one request rather than four.\n */\nimport TextField from '@mui/material/TextField/index.js';\nimport React, { useEffect, useId, useState } from 'react';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\n\n/**\n * THE MASK IS THE ORDER, and both halves of this file read it.\n *\n * The placeholder a host supplies (`copy.filters.dayMask` — `dd/mm/aaaa` for\n * pt-BR, `mm/dd/yyyy` for en-US) is not decoration: it tells the reader which\n * segment comes first. Everything below therefore derives the segment order\n * FROM that same string, so the shape on screen and the shape the parser\n * expects cannot disagree.\n *\n * They did disagree, and the failure was silent in the worst direction. The\n * mask/parse pair was hardcoded day-first (the `Br` in the old names was\n * accurate) while the placeholder followed the copy pack — so under `en-US` the\n * field ASKED for `mm/dd/yyyy`, and a reader who typed exactly that got a day\n * of 12 and a month of 31, which is not a date, which commits nothing. No\n * error, no filter, a full list that reads like an answer. The en-US pack's own\n * comment already said the mask \"is the shape that gets a date entered\n * backwards\"; nothing enforced it.\n */\n\n/** What one segment of a mask is, and how many digits it takes. */\ntype DaySegment = 'year' | 'month' | 'day';\nconst SEGMENT_WIDTH: Readonly<Record<DaySegment, number>> = { year: 4, month: 2, day: 2 };\n\n/**\n * The segments a mask asks for, in its own order.\n *\n * Keyed on each token's FIRST letter so one rule covers every spelling a host\n * might use — `aaaa`/`yyyy` for the year, `mm` for the month, `dd`/`tt` for the\n * day. An unreadable mask falls back to day-first rather than throwing: this\n * runs on every keystroke, and a field that renders is recoverable where one\n * that crashes the grid is not.\n */\nfunction segmentsOf(mask: string): readonly DaySegment[] {\n  const tokens = mask.split(/[^A-Za-z]+/).filter(Boolean);\n  if (tokens.length !== 3) return ['day', 'month', 'year'];\n  const segments = tokens.map((token): DaySegment => {\n    const head = token.slice(0, 1).toLowerCase();\n    if (head === 'y' || head === 'a') return 'year';\n    return head === 'm' ? 'month' : 'day';\n  });\n  // A mask naming the same segment twice describes no date. Fall back rather\n  // than build a parser that can never succeed.\n  return new Set(segments).size === 3 ? segments : ['day', 'month', 'year'];\n}\n\n/** The separator the mask uses, defaulting to `/`. */\nconst separatorOf = (mask: string): string => mask.replace(/[A-Za-z]/g, '').slice(0, 1) || '/';\n\n/** `AAAA-MM-DD` (the wire) → the mask's own order (what the reader sees). */\nexport function isoToMasked(iso: string, mask: string): string {\n  const parts = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(iso);\n  if (!parts) return '';\n  const value: Record<DaySegment, string> = {\n    year: parts[1] as string,\n    month: parts[2] as string,\n    day: parts[3] as string,\n  };\n  return segmentsOf(mask)\n    .map((segment) => value[segment])\n    .join(separatorOf(mask));\n}\n\n/**\n * The mask's order → `AAAA-MM-DD`, but ONLY for a day that exists.\n *\n * `31/02/2026` parses fine as three numbers and is not a date, and `Date` would\n * silently roll it into March rather than reject it — so the round trip through\n * UTC is the check: if the month or day comes back changed, the input was not a\n * day.\n */\nexport function maskedToIso(text: string, mask: string): string {\n  const segments = segmentsOf(mask);\n  const digits = text.replace(/\\D/g, '');\n  if (digits.length !== 8) return '';\n  const value = {} as Record<DaySegment, string>;\n  let cursor = 0;\n  for (const segment of segments) {\n    value[segment] = digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]);\n    cursor += SEGMENT_WIDTH[segment];\n  }\n  const year = Number(value.year);\n  const month = Number(value.month);\n  const day = Number(value.day);\n  if (year < 1000) return '';\n  const probe = new Date(Date.UTC(year, month - 1, day));\n  if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return '';\n  return `${value.year}-${value.month}-${value.day}`;\n}\n\n/**\n * Digits only, capped at the mask's width, with the separators put back as you\n * type.\n *\n * Deriving the whole string from the digits — rather than editing the text in\n * place — is what makes backspace behave. Four digits of `dd/mm/aaaa` render as\n * `06/08`, not `06/08/`, so deleting the first digit of the year removes the\n * trailing separator with it instead of leaving a dead keystroke that changes\n * nothing.\n */\nexport function maskDate(raw: string, mask: string): string {\n  const segments = segmentsOf(mask);\n  const separator = separatorOf(mask);\n  const digits = raw.replace(/\\D/g, '').slice(0, 8);\n  const out: string[] = [];\n  let cursor = 0;\n  for (const segment of segments) {\n    if (cursor >= digits.length) break;\n    out.push(digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]));\n    cursor += SEGMENT_WIDTH[segment];\n  }\n  return out.join(separator);\n}\n\n/** A wire day on its own, as a paste or an autofill delivers it: `2026-10-01`. */\nconst ISO_DAY = /^\\s*(\\d{4}-\\d{2}-\\d{2})\\s*$/;\n\n/**\n * What the field shows for whatever arrived — typed, pasted, autofilled.\n *\n * A whole ISO day (`AAAA-MM-DD`) is READ AS THAT DAY and written in the mask's\n * order. Through `maskDate` alone it is eight digits taken day-first, so a\n * pasted `2026-10-01` came out as `20/26/1001` (FUT-4144). Anything else is\n * masked exactly as typing always was, so the typed and pasted forms of one day\n * land on the same text.\n */\nexport function readDayText(raw: string, mask: string): string {\n  const iso = ISO_DAY.exec(raw)?.[1];\n  const masked = iso ? isoToMasked(iso, mask) : '';\n  return masked || maskDate(raw, mask);\n}\n\n/**\n * Whether `text` is a WHOLE day that does not exist — `31/02/2026`. A partial\n * entry is not impossible, only unfinished, and is never flagged.\n */\nexport function isImpossibleDay(text: string, mask: string): boolean {\n  return text.replace(/\\D/g, '').length === 8 && maskedToIso(text, mask) === '';\n}\n\n/**\n * What has to land on the `<input>` itself rather than on the `TextField`.\n *\n * Anything `TextField` does not recognise is spread onto its root `FormControl`\n * div. `inputMode` went up there once: the attribute sat on a non-editable\n * wrapper, meant nothing, and the phone went on offering the letter keyboard\n * for a field that only takes digits (the `dd/mm/aaaa` hint under a QWERTY\n * layout). Only the `<input>` this reaches decides which keypad opens — and the\n * same is true of `aria-describedby`, which on the wrapper points at a\n * description no screen reader will read out for the field.\n *\n * `numeric` and not `tel`: both raise a keypad, but the phone one is a dialler\n * with `+ * #` on it — keys that cannot occur in a date. A paste carrying\n * separators still lands, because the MASK is what filters the text; the keypad\n * only narrows what a thumb can reach for.\n *\n * Autofill off for the same reason: the browser's saved-value strip covers the\n * keypad to suggest names and addresses, none of which are a date, and none of\n * which the mask would keep.\n */\nfunction dayInputProps(testId: string, describedBy: readonly (string | undefined)[]) {\n  const ids = describedBy.filter(Boolean).join(' ');\n  return {\n    'data-testid': testId,\n    maxLength: 10,\n    inputMode: 'numeric' as const,\n    autoComplete: 'off',\n    ...(ids ? { 'aria-describedby': ids } : {}),\n  };\n}\n\n/** Props of {@link DayBoundInput}. */\ninterface DayBoundInputProps {\n  label: string;\n  /** The applied bound, `AAAA-MM-DD`, or undefined when this end is open. */\n  value: string | undefined;\n  onChange: (bound: string | undefined) => void;\n  testId: string;\n  /**\n   * Paint the field as rejected. It only ever writes a real day by itself, so\n   * this is for a caller judging the PAIR: a window whose end precedes its\n   * start is two valid days and one impossible period, and the field it was\n   * typed into is the only place to say which half is being complained about.\n   */\n  error?: boolean;\n  /** Id of the element carrying that complaint, so it is read WITH the field. */\n  describedBy?: string;\n  /**\n   * The day mask, which IS the placeholder — so the expected ORDER is on\n   * screen before the first keystroke rather than discovered by getting it\n   * wrong. `dd/mm/aaaa` is one locale's order and one locale's letters.\n   *\n   * A PROP rather than a context read: this field has two callers, and only\n   * one of them is inside DataViews. `DateRangePicker` mounts it standalone\n   * with its own message table, so a context read here throws for every host\n   * of that picker — which is exactly what it did.\n   */\n  mask: string;\n  /**\n   * Said under the field when its eight digits name no day (`31/02/2026`); the\n   * field is then marked invalid and KEEPS the text on blur, so the reader sees\n   * what was refused instead of the old value quietly coming back (FUT-4144).\n   *\n   * Opt-in, because the field ships no words of its own: without it an\n   * impossible day is still never written, and blur still snaps back.\n   */\n  invalidMessage?: string;\n}\n\n/** What {@link useDayText} hands the field: its text, its verdict and its handlers. */\ninterface DayText {\n  text: string;\n  impossible: boolean;\n  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  handlePaste: (event: React.ClipboardEvent<HTMLDivElement>) => void;\n  handleBlur: () => void;\n}\n\n/** The typed text of one bound, kept apart from the APPLIED bound it may commit. */\nfunction useDayText(\n  applied: string,\n  mask: string,\n  onChange: (bound: string | undefined) => void,\n  judgesImpossible: boolean,\n): DayText {\n  const [text, setText] = useState(() => isoToMasked(applied, mask));\n  const impossible = judgesImpossible && isImpossibleDay(text, mask);\n\n  // Emptying clears the bound. A COMPLETE day applies it. A partial (or an\n  // impossible) one does NEITHER — it leaves whatever is applied alone, so\n  // typing is never fought and a half-typed year never reaches the backend.\n  const enter = (next: string) => {\n    setText(next);\n    if (next === '') return onChange(undefined);\n    const iso = maskedToIso(next, mask);\n    if (iso) onChange(iso);\n  };\n\n  // The bound is the APPLIED filter; `text` is what is being typed. Re-sync only\n  // when the applied value moved somewhere the text does not already mean — a\n  // \"Limpar\", a saved view, the other pill resetting the pair. Without that\n  // guard the field's own write bounces straight back mid-edit and resets the\n  // caret, which is the native control's worst habit reproduced by hand.\n  //\n  // \"Already means\" is a REAL day equal to the bound, or an empty field for an\n  // open bound. An impossible day parses to `''` too, so a bare comparison let\n  // a \"Limpar\" (applied → `''`) keep `31/02/2026` on screen, red, over a filter\n  // that had just been cleared.\n  useEffect(() => {\n    setText((current) => {\n      const iso = maskedToIso(current, mask);\n      const means = (iso !== '' || current === '') && iso === applied;\n      return means ? current : isoToMasked(applied, mask);\n    });\n  }, [applied, mask]);\n\n  return {\n    text,\n    impossible,\n    handleChange: (event) => enter(readDayText(event.target.value, mask)),\n    // A pasted ISO day REPLACES the field whatever it held: inserted at the\n    // caret into existing digits it would be read as more digits, and the\n    // `maxLength` would cut a padded one before `onChange` ever saw it.\n    handlePaste: (event) => {\n      const pasted = event.clipboardData.getData('text');\n      if (!ISO_DAY.test(pasted)) return;\n      event.preventDefault();\n      enter(readDayText(pasted, mask));\n    },\n    // Leaving a half-typed date on screen would show a filter the list is not\n    // actually using. On blur the field snaps back to what IS applied; a\n    // complete date already equals it, so this only ever tidies. An impossible\n    // day the field is SAYING is impossible stays, with its message: snapping\n    // it back is the silent forgetting FUT-4144 removed.\n    handleBlur: () => {\n      if (!impossible) setText(isoToMasked(applied, mask));\n    },\n  };\n}\n\n/**\n * One end of a day window. The BOUND stays `AAAA-MM-DD` — the form the backend's\n * inclusive day comparison already speaks, and the form the chip label reads —\n * so only the typing surface changes.\n */\nexport function DayBoundInput({\n  label,\n  value,\n  onChange,\n  testId,\n  error = false,\n  describedBy,\n  mask,\n  invalidMessage,\n}: DayBoundInputProps): React.JSX.Element {\n  const id = useId();\n  const { text, impossible, handleChange, handlePaste, handleBlur } = useDayText(\n    value ?? '',\n    mask,\n    onChange,\n    invalidMessage !== undefined,\n  );\n\n  return (\n    <TextField\n      size=\"small\"\n      type=\"text\"\n      id={id}\n      label={label}\n      error={error || impossible}\n      helperText={impossible ? invalidMessage : undefined}\n      placeholder={mask}\n      value={text}\n      onChange={handleChange}\n      onPaste={handlePaste}\n      onBlur={handleBlur}\n      // The placeholder occupies the space an un-shrunk label would render into.\n      InputLabelProps={{ shrink: true }}\n      inputProps={dayInputProps(testId, [impossible ? `${id}-helper-text` : undefined, describedBy])}\n      sx={[{ width: sxRem(165) }, fieldTextFieldStyles]}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-day-input.tsx"],"sourcesContent":["'use client';\n\n/**\n * A day bound as a MASKED `dd/mm/aaaa` text field, replacing `<input type=\"date\">`.\n *\n * The native control is three separate segments wearing one box. Typing a date\n * means filling a segment, being jumped to the next, and starting over — and\n * which segment comes first is the BROWSER's locale, not ours, so the same\n * field reads `dd/mm/aaaa` for one merchant and `mm/dd/yyyy` for the next with\n * nothing in our code saying which. There is no way to type a date as one\n * continuous run of digits, which is how people actually type dates.\n *\n * A mask gives that back: eight digits straight through, separators inserted as\n * you go, backspace walking back through them.\n *\n * Measured, driving both controls in Chromium with the same eight keystrokes\n * (`01072026`, one `keydown` at a time):\n *\n *   native  →  field ends EMPTY, no filter applied, 0 requests\n *   masked  →  field reads `01/07/2026`, filter applied, 1 request\n *\n * The native result is the whole complaint: you type a date and nothing lands.\n *\n * The second half of the fix is WHEN the bound is written. A partially-typed\n * year is itself a valid date — `2026` passes through `0002`, `0020`, `0202` on\n * the way — so committing on every keystroke would send the grid off to fetch\n * years nobody meant. A bound is written only once the text is a WHOLE, real\n * date, which is what keeps the run above at one request rather than four.\n */\nimport TextField from '@mui/material/TextField/index.js';\nimport React, { useEffect, useId, useState } from 'react';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\n\n/**\n * THE MASK IS THE ORDER, and both halves of this file read it.\n *\n * The placeholder a host supplies (`copy.filters.dayMask` — `dd/mm/aaaa` for\n * pt-BR, `mm/dd/yyyy` for en-US) is not decoration: it tells the reader which\n * segment comes first. Everything below therefore derives the segment order\n * FROM that same string, so the shape on screen and the shape the parser\n * expects cannot disagree.\n *\n * They did disagree, and the failure was silent in the worst direction. The\n * mask/parse pair was hardcoded day-first (the `Br` in the old names was\n * accurate) while the placeholder followed the copy pack — so under `en-US` the\n * field ASKED for `mm/dd/yyyy`, and a reader who typed exactly that got a day\n * of 12 and a month of 31, which is not a date, which commits nothing. No\n * error, no filter, a full list that reads like an answer. The en-US pack's own\n * comment already said the mask \"is the shape that gets a date entered\n * backwards\"; nothing enforced it.\n */\n\n/** What one segment of a mask is, and how many digits it takes. */\ntype DaySegment = 'year' | 'month' | 'day';\nconst SEGMENT_WIDTH: Readonly<Record<DaySegment, number>> = { year: 4, month: 2, day: 2 };\n\n/**\n * The segments a mask asks for, in its own order.\n *\n * Keyed on each token's FIRST letter so one rule covers every spelling a host\n * might use — `aaaa`/`yyyy` for the year, `mm` for the month, `dd`/`tt` for the\n * day. An unreadable mask falls back to day-first rather than throwing: this\n * runs on every keystroke, and a field that renders is recoverable where one\n * that crashes the grid is not.\n */\nfunction segmentsOf(mask: string): readonly DaySegment[] {\n  const tokens = mask.split(/[^A-Za-z]+/).filter(Boolean);\n  if (tokens.length !== 3) return ['day', 'month', 'year'];\n  const segments = tokens.map((token): DaySegment => {\n    const head = token.slice(0, 1).toLowerCase();\n    if (head === 'y' || head === 'a') return 'year';\n    return head === 'm' ? 'month' : 'day';\n  });\n  // A mask naming the same segment twice describes no date. Fall back rather\n  // than build a parser that can never succeed.\n  return new Set(segments).size === 3 ? segments : ['day', 'month', 'year'];\n}\n\n/** The separator the mask uses, defaulting to `/`. */\nconst separatorOf = (mask: string): string => mask.replace(/[A-Za-z]/g, '').slice(0, 1) || '/';\n\n/** `AAAA-MM-DD` (the wire) → the mask's own order (what the reader sees). */\nexport function isoToMasked(iso: string, mask: string): string {\n  const parts = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(iso);\n  if (!parts) return '';\n  const value: Record<DaySegment, string> = {\n    year: parts[1] as string,\n    month: parts[2] as string,\n    day: parts[3] as string,\n  };\n  return segmentsOf(mask)\n    .map((segment) => value[segment])\n    .join(separatorOf(mask));\n}\n\n/**\n * The mask's order → `AAAA-MM-DD`, but ONLY for a day that exists.\n *\n * `31/02/2026` parses fine as three numbers and is not a date, and `Date` would\n * silently roll it into March rather than reject it — so the round trip through\n * UTC is the check: if the month or day comes back changed, the input was not a\n * day.\n */\nexport function maskedToIso(text: string, mask: string): string {\n  const segments = segmentsOf(mask);\n  const digits = text.replace(/\\D/g, '');\n  if (digits.length !== 8) return '';\n  const value = {} as Record<DaySegment, string>;\n  let cursor = 0;\n  for (const segment of segments) {\n    value[segment] = digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]);\n    cursor += SEGMENT_WIDTH[segment];\n  }\n  const year = Number(value.year);\n  const month = Number(value.month);\n  const day = Number(value.day);\n  if (year < 1000) return '';\n  const probe = new Date(Date.UTC(year, month - 1, day));\n  if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return '';\n  return `${value.year}-${value.month}-${value.day}`;\n}\n\n/**\n * Digits only, capped at the mask's width, with the separators put back as you\n * type.\n *\n * Deriving the whole string from the digits — rather than editing the text in\n * place — is what makes backspace behave. Four digits of `dd/mm/aaaa` render as\n * `06/08`, not `06/08/`, so deleting the first digit of the year removes the\n * trailing separator with it instead of leaving a dead keystroke that changes\n * nothing.\n */\nexport function maskDate(raw: string, mask: string): string {\n  const segments = segmentsOf(mask);\n  const separator = separatorOf(mask);\n  const digits = raw.replace(/\\D/g, '').slice(0, 8);\n  const out: string[] = [];\n  let cursor = 0;\n  for (const segment of segments) {\n    if (cursor >= digits.length) break;\n    out.push(digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]));\n    cursor += SEGMENT_WIDTH[segment];\n  }\n  return out.join(separator);\n}\n\n/** A wire day on its own, as a paste or an autofill delivers it: `2026-10-01`. */\nconst ISO_DAY = /^\\s*(\\d{4}-\\d{2}-\\d{2})\\s*$/;\n\n/**\n * What the field shows for whatever arrived — typed, pasted, autofilled.\n *\n * A whole ISO day (`AAAA-MM-DD`) is READ AS THAT DAY and written in the mask's\n * order. Through `maskDate` alone it is eight digits taken day-first, so a\n * pasted `2026-10-01` came out as `20/26/1001` (FUT-4144). Anything else is\n * masked exactly as typing always was, so the typed and pasted forms of one day\n * land on the same text.\n */\nexport function readDayText(raw: string, mask: string): string {\n  const iso = ISO_DAY.exec(raw)?.[1];\n  const masked = iso ? isoToMasked(iso, mask) : '';\n  return masked || maskDate(raw, mask);\n}\n\n/**\n * Whether `text` is a WHOLE day that does not exist — `31/02/2026`. A partial\n * entry is not impossible, only unfinished, and is never flagged.\n */\nexport function isImpossibleDay(text: string, mask: string): boolean {\n  return text.replace(/\\D/g, '').length === 8 && maskedToIso(text, mask) === '';\n}\n\n/**\n * What has to land on the `<input>` itself rather than on the `TextField`.\n *\n * Anything `TextField` does not recognise is spread onto its root `FormControl`\n * div. `inputMode` went up there once: the attribute sat on a non-editable\n * wrapper, meant nothing, and the phone went on offering the letter keyboard\n * for a field that only takes digits (the `dd/mm/aaaa` hint under a QWERTY\n * layout). Only the `<input>` this reaches decides which keypad opens — and the\n * same is true of `aria-describedby`, which on the wrapper points at a\n * description no screen reader will read out for the field.\n *\n * `numeric` and not `tel`: both raise a keypad, but the phone one is a dialler\n * with `+ * #` on it — keys that cannot occur in a date. A paste carrying\n * separators still lands, because the MASK is what filters the text; the keypad\n * only narrows what a thumb can reach for.\n *\n * Autofill off for the same reason: the browser's saved-value strip covers the\n * keypad to suggest names and addresses, none of which are a date, and none of\n * which the mask would keep.\n */\nfunction dayInputProps(testId: string, describedBy: readonly (string | undefined)[]) {\n  const ids = describedBy.filter(Boolean).join(' ');\n  return {\n    'data-testid': testId,\n    maxLength: 10,\n    inputMode: 'numeric' as const,\n    autoComplete: 'off',\n    ...(ids ? { 'aria-describedby': ids } : {}),\n  };\n}\n\n/** Props of {@link DayBoundInput}. */\ninterface DayBoundInputProps {\n  label: string;\n  /** The applied bound, `AAAA-MM-DD`, or undefined when this end is open. */\n  value: string | undefined;\n  onChange: (bound: string | undefined) => void;\n  testId: string;\n  /**\n   * Paint the field as rejected. It only ever writes a real day by itself, so\n   * this is for a caller judging the PAIR: a window whose end precedes its\n   * start is two valid days and one impossible period, and the field it was\n   * typed into is the only place to say which half is being complained about.\n   */\n  error?: boolean;\n  /** Id of the element carrying that complaint, so it is read WITH the field. */\n  describedBy?: string;\n  /**\n   * The day mask, which IS the placeholder — so the expected ORDER is on\n   * screen before the first keystroke rather than discovered by getting it\n   * wrong. `dd/mm/aaaa` is one locale's order and one locale's letters.\n   *\n   * A PROP rather than a context read: this field has two callers, and only\n   * one of them is inside DataViews. `DateRangePicker` mounts it standalone\n   * with its own message table, so a context read here throws for every host\n   * of that picker — which is exactly what it did.\n   */\n  mask: string;\n  /**\n   * Said under the field when its eight digits name no day (`31/02/2026`); the\n   * field is then marked invalid and KEEPS the text on blur, so the reader sees\n   * what was refused instead of the old value quietly coming back (FUT-4144).\n   *\n   * Opt-in, because the field ships no words of its own: without it an\n   * impossible day is still never written, and blur still snaps back.\n   */\n  invalidMessage?: string;\n  /**\n   * Take the width of the box it sits in rather than its own 165px. Set where\n   * the pair stands over the range calendar, so the two boxes span the\n   * calendar's width instead of leaving a gap beside them (FUT-4144).\n   */\n  fill?: boolean;\n}\n\n/** What {@link useDayText} hands the field: its text, its verdict and its handlers. */\ninterface DayText {\n  text: string;\n  impossible: boolean;\n  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  handlePaste: (event: React.ClipboardEvent<HTMLDivElement>) => void;\n  handleBlur: () => void;\n}\n\n/** The typed text of one bound, kept apart from the APPLIED bound it may commit. */\nfunction useDayText(\n  applied: string,\n  mask: string,\n  onChange: (bound: string | undefined) => void,\n  judgesImpossible: boolean,\n): DayText {\n  const [text, setText] = useState(() => isoToMasked(applied, mask));\n  const impossible = judgesImpossible && isImpossibleDay(text, mask);\n\n  // Emptying clears the bound. A COMPLETE day applies it. A partial (or an\n  // impossible) one does NEITHER — it leaves whatever is applied alone, so\n  // typing is never fought and a half-typed year never reaches the backend.\n  const enter = (next: string) => {\n    setText(next);\n    if (next === '') return onChange(undefined);\n    const iso = maskedToIso(next, mask);\n    if (iso) onChange(iso);\n  };\n\n  // The bound is the APPLIED filter; `text` is what is being typed. Re-sync only\n  // when the applied value moved somewhere the text does not already mean — a\n  // \"Limpar\", a saved view, the other pill resetting the pair. Without that\n  // guard the field's own write bounces straight back mid-edit and resets the\n  // caret, which is the native control's worst habit reproduced by hand.\n  //\n  // \"Already means\" is a REAL day equal to the bound, or an empty field for an\n  // open bound. An impossible day parses to `''` too, so a bare comparison let\n  // a \"Limpar\" (applied → `''`) keep `31/02/2026` on screen, red, over a filter\n  // that had just been cleared.\n  useEffect(() => {\n    setText((current) => {\n      const iso = maskedToIso(current, mask);\n      const means = (iso !== '' || current === '') && iso === applied;\n      return means ? current : isoToMasked(applied, mask);\n    });\n  }, [applied, mask]);\n\n  return {\n    text,\n    impossible,\n    handleChange: (event) => enter(readDayText(event.target.value, mask)),\n    // A pasted ISO day REPLACES the field whatever it held: inserted at the\n    // caret into existing digits it would be read as more digits, and the\n    // `maxLength` would cut a padded one before `onChange` ever saw it.\n    handlePaste: (event) => {\n      const pasted = event.clipboardData.getData('text');\n      if (!ISO_DAY.test(pasted)) return;\n      event.preventDefault();\n      enter(readDayText(pasted, mask));\n    },\n    // Leaving a half-typed date on screen would show a filter the list is not\n    // actually using. On blur the field snaps back to what IS applied; a\n    // complete date already equals it, so this only ever tidies. An impossible\n    // day the field is SAYING is impossible stays, with its message: snapping\n    // it back is the silent forgetting FUT-4144 removed.\n    handleBlur: () => {\n      if (!impossible) setText(isoToMasked(applied, mask));\n    },\n  };\n}\n\n/**\n * One end of a day window. The BOUND stays `AAAA-MM-DD` — the form the backend's\n * inclusive day comparison already speaks, and the form the chip label reads —\n * so only the typing surface changes.\n */\nexport function DayBoundInput({\n  label,\n  value,\n  onChange,\n  testId,\n  error = false,\n  describedBy,\n  mask,\n  invalidMessage,\n  fill = false,\n}: DayBoundInputProps): React.JSX.Element {\n  const id = useId();\n  const { text, impossible, handleChange, handlePaste, handleBlur } = useDayText(\n    value ?? '',\n    mask,\n    onChange,\n    invalidMessage !== undefined,\n  );\n\n  return (\n    <TextField\n      size=\"small\"\n      type=\"text\"\n      id={id}\n      label={label}\n      error={error || impossible}\n      helperText={impossible ? invalidMessage : undefined}\n      placeholder={mask}\n      value={text}\n      onChange={handleChange}\n      onPaste={handlePaste}\n      onBlur={handleBlur}\n      // The placeholder occupies the space an un-shrunk label would render into.\n      InputLabelProps={{ shrink: true }}\n      inputProps={dayInputProps(testId, [impossible ? `${id}-helper-text` : undefined, describedBy])}\n      fullWidth={fill}\n      sx={[{ width: fill ? '100%' : sxRem(165) }, fieldTextFieldStyles]}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-LZNUBQ5I.js

@@ -0,0 +1,181 @@
+import {
+  isPresetActive,
+  resolvePreset
+} from "./chunk-CBOB5AV6.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  EN_US_DATA_VIEWS_COPY
+} from "./chunk-ARGVUTTL.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-preset-chips.tsx
+import Box from "@mui/material/Box/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PresetChip({
+  preset,
+  active,
+  onSelect,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "button",
+      type: "button",
+      onClick: onSelect,
+      "aria-pressed": active,
+      "data-testid": testId,
+      sx: {
+        px: 1.25,
+        py: 0.5,
+        border: 1,
+        borderStyle: "solid",
+        borderColor: active ? "primary.main" : "divider",
+        borderRadius: 999,
+        bgcolor: active ? "action.selected" : "background.paper",
+        color: active ? "primary.main" : "text.secondary",
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: sxRem(12),
+        fontWeight: 600,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        minWidth: 0,
+        "&:hover": { borderColor: active ? "primary.main" : "text.primary" }
+      },
+      children: preset.label
+    }
+  );
+}
+var MEASURE_SX = {
+  display: "inline-block",
+  px: 1.25,
+  border: 1,
+  font: "inherit",
+  fontSize: sxRem(12),
+  fontWeight: 600,
+  whiteSpace: "nowrap"
+};
+function presetsFitOneLine(width, widest, count, gap) {
+  if (width === null) return true;
+  return widest * count + gap * (count - 1) <= width;
+}
+function useElementWidth(ref) {
+  const [width, setWidth] = useState(null);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (element === null || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver((entries) => {
+      const measured = entries[0]?.contentRect.width;
+      if (measured !== void 0 && measured > 0) setWidth(measured);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref]);
+  return width;
+}
+function useWidestLabel(ref, labels, width) {
+  const [widest, setWidest] = useState(0);
+  useLayoutEffect(() => {
+    const measure = () => {
+      const spans = ref.current?.querySelectorAll("[data-preset-measure]") ?? [];
+      setWidest(Math.max(0, ...Array.from(spans, (span) => span.offsetWidth + 1)));
+    };
+    measure();
+    let live = true;
+    void document.fonts?.ready.then(() => {
+      if (live) measure();
+    });
+    return () => {
+      live = false;
+    };
+  }, [ref, labels, width]);
+  return widest;
+}
+function PresetSelect({
+  presets,
+  value,
+  onChange,
+  testId
+}) {
+  const copy = useDataViewsCopy().filters.presetSelect ?? EN_US_DATA_VIEWS_COPY.filters.presetSelect;
+  const active = presets.find((preset) => isPresetActive(preset, value))?.id ?? "";
+  return /* @__PURE__ */ jsxs(
+    TextField,
+    {
+      select: true,
+      size: "small",
+      fullWidth: true,
+      label: copy?.label,
+      value: active,
+      onChange: (event) => {
+        const picked = presets.find((preset) => preset.id === event.target.value);
+        onChange(picked ? resolvePreset(picked) : {});
+      },
+      SelectProps: { native: true },
+      InputLabelProps: { shrink: true },
+      inputProps: { "data-testid": `${testId}-presets-select` },
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: copy?.none }),
+        presets.map((preset) => /* @__PURE__ */ jsx("option", { value: preset.id, children: preset.label }, preset.id))
+      ]
+    }
+  );
+}
+function RangePresets({
+  presets,
+  value,
+  onChange,
+  testId
+}) {
+  const theme = useTheme();
+  const box = useRef(null);
+  const width = useElementWidth(box);
+  const widest = useWidestLabel(box, presets.map((preset) => preset.label).join("|"), width);
+  if (presets.length === 0) return null;
+  const fits = presetsFitOneLine(width, widest, presets.length, parseFloat(theme.spacing(0.75)));
+  return /* @__PURE__ */ jsxs(Box, { ref: box, sx: { position: "relative", minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        "aria-hidden": "true",
+        sx: { position: "absolute", top: 0, left: 0, width: "max-content", height: 0, overflow: "hidden", visibility: "hidden" },
+        children: presets.map((preset) => /* @__PURE__ */ jsx(Box, { component: "span", "data-preset-measure": "", sx: MEASURE_SX, children: preset.label }, preset.id))
+      }
+    ),
+    fits ? /* @__PURE__ */ jsx(
+      Box,
+      {
+        "data-testid": `${testId}-presets`,
+        sx: { display: "grid", gridTemplateColumns: `repeat(${presets.length}, minmax(0, 1fr))`, gap: 0.75 },
+        children: presets.map((preset) => {
+          const active = isPresetActive(preset, value);
+          return /* @__PURE__ */ jsx(
+            PresetChip,
+            {
+              preset,
+              active,
+              onSelect: () => onChange(active ? {} : resolvePreset(preset)),
+              testId: `${testId}-preset-${preset.id}`
+            },
+            preset.id
+          );
+        })
+      }
+    ) : /* @__PURE__ */ jsx(Box, { "data-testid": `${testId}-presets`, children: /* @__PURE__ */ jsx(PresetSelect, { presets, value, onChange, testId }) })
+  ] });
+}
+
+export {
+  presetsFitOneLine,
+  RangePresets
+};
+//# sourceMappingURL=chunk-LZNUBQ5I.js.map

package/dist/chunk-LZNUBQ5I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-preset-chips.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * THE ONE-CLICK WINDOWS ABOVE A RANGE'S `De`/`Até` INPUTS.\n *\n * \"Filter by last month\" is two date pickers, four gestures and a mental\n * calculation of which day the month ended on. It is also the overwhelmingly\n * common case. So the common windows get a chip each, and the inputs stay for\n * the windows nobody could enumerate.\n *\n * Clicking an active preset CLEARS it. A chip that reads as pressed and does\n * nothing when pressed again is a dead control, and the alternative — hunting\n * for the pill's ✕ — is the gesture this row exists to remove.\n *\n * ONE LINE at every width (ADR 0190 in the host, FUT-4144): the presets are\n * the options of one question, and as wrapping chips \"Este ano\" fell onto a\n * second line at 320, 390 and 600, where it read as a second question. Where\n * the row is wide enough they are a segmented control of equal parts; where it\n * is not, the same question is a select.\n */\nimport Box from \"@mui/material/Box/index.js\";\nimport TextField from \"@mui/material/TextField/index.js\";\nimport { useTheme } from \"@mui/material/styles/index.js\";\nimport React, { useLayoutEffect, useRef, useState, type RefObject } from \"react\";\n\nimport { EN_US_DATA_VIEWS_COPY } from \"../../../en-US.data-display\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { isPresetActive, resolvePreset } from \"./data-views-range-presets\";\nimport type { RangePreset, RangeValue } from \"./data-views-types\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/** One preset, styled as the same pill-shaped chip the filter bar uses. */\nfunction PresetChip({\n  preset,\n  active,\n  onSelect,\n  testId,\n}: {\n  preset: RangePreset;\n  active: boolean;\n  onSelect: () => void;\n  testId: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      onClick={onSelect}\n      aria-pressed={active}\n      data-testid={testId}\n      sx={{\n        px: 1.25,\n        py: 0.5,\n        border: 1,\n        borderStyle: \"solid\",\n        borderColor: active ? \"primary.main\" : \"divider\",\n        borderRadius: 999,\n        bgcolor: active ? \"action.selected\" : \"background.paper\",\n        color: active ? \"primary.main\" : \"text.secondary\",\n        cursor: \"pointer\",\n        font: \"inherit\",\n        fontSize: sxRem(12),\n        fontWeight: 600,\n        whiteSpace: \"nowrap\",\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        minWidth: 0,\n        \"&:hover\": { borderColor: active ? \"primary.main\" : \"text.primary\" },\n      }}\n    >\n      {preset.label}\n    </Box>\n  );\n}\n\n/** The chip look, for the hidden row that measures each label at its natural width. */\nconst MEASURE_SX = {\n  display: \"inline-block\",\n  px: 1.25,\n  border: 1,\n  font: \"inherit\",\n  fontSize: sxRem(12),\n  fontWeight: 600,\n  whiteSpace: \"nowrap\",\n} as const;\n\n/**\n * Whether `count` equal parts, each as wide as the widest label, fit `width`\n * with `gap` between them. Unmeasured (`null`: the server, jsdom) counts as\n * fitting, so the row renders the buttons it always rendered.\n */\nexport function presetsFitOneLine(width: number | null, widest: number, count: number, gap: number): boolean {\n  if (width === null) return true;\n  return widest * count + gap * (count - 1) <= width;\n}\n\n/** The element's own width as it changes; `null` until measured, or where nothing can measure. */\nfunction useElementWidth(ref: RefObject<HTMLElement | null>): number | null {\n  const [width, setWidth] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (element === null || typeof ResizeObserver === \"undefined\") return undefined;\n    const observer = new ResizeObserver((entries) => {\n      const measured = entries[0]?.contentRect.width;\n      if (measured !== undefined && measured > 0) setWidth(measured);\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref]);\n  return width;\n}\n\n/**\n * The widest label at the chip's own type, padding and border, read off the\n * hidden measuring row.\n *\n * `offsetWidth`, the LAYOUT width, never the bounding box: a popover grows in\n * from 75% scale, and a box read during that transition is a quarter short —\n * which judged \"Acima de R$ 10\" to fit a third of the \"Mais\" panel and cut it\n * to \"Acima de …\" (FUT-4144 UI review round 2). Measured again when the row's\n * width changes and once the web fonts have loaded, since a fallback face is\n * narrower than the one the parts will be drawn in.\n */\nfunction useWidestLabel(ref: RefObject<HTMLElement | null>, labels: string, width: number | null): number {\n  const [widest, setWidest] = useState(0);\n  useLayoutEffect(() => {\n    const measure = (): void => {\n      const spans = ref.current?.querySelectorAll<HTMLElement>(\"[data-preset-measure]\") ?? [];\n      // +1: `offsetWidth` rounds, so a label laid out at 80.4px reads 80 and\n      // would be judged to fit half a pixel short, behind an ellipsis.\n      setWidest(Math.max(0, ...Array.from(spans, (span) => span.offsetWidth + 1)));\n    };\n    measure();\n    let live = true;\n    void document.fonts?.ready.then(() => {\n      if (live) measure();\n    });\n    return () => {\n      live = false;\n    };\n  }, [ref, labels, width]);\n  return widest;\n}\n\n/** The same question as a select, for a row too narrow for its parts. */\nfunction PresetSelect({\n  presets,\n  value,\n  onChange,\n  testId,\n}: {\n  presets: RangePreset[];\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy().filters.presetSelect ?? EN_US_DATA_VIEWS_COPY.filters.presetSelect;\n  const active = presets.find((preset) => isPresetActive(preset, value))?.id ?? \"\";\n  return (\n    <TextField\n      select\n      size=\"small\"\n      fullWidth\n      label={copy?.label}\n      value={active}\n      onChange={(event) => {\n        const picked = presets.find((preset) => preset.id === event.target.value);\n        // \"None\" is the select's way of tapping the active chip again.\n        onChange(picked ? resolvePreset(picked) : {});\n      }}\n      SelectProps={{ native: true }}\n      InputLabelProps={{ shrink: true }}\n      inputProps={{ \"data-testid\": `${testId}-presets-select` }}\n    >\n      <option value=\"\">{copy?.none}</option>\n      {presets.map((preset) => (\n        <option key={preset.id} value={preset.id}>\n          {preset.label}\n        </option>\n      ))}\n    </TextField>\n  );\n}\n\n/**\n * The preset row. Renders nothing when a field declares none, so a numeric\n * range without host-configured windows keeps the popover it had.\n *\n * Carries no outer margin — the three surfaces that host it (the pill's\n * popover, the slide-in panel, the \"Mais\" overflow) each sit it in a different\n * stack, and a baked-in margin would be wrong in two of them.\n *\n * What is measured is the row's OWN width, not the window's: the same row\n * lives in a 670px popover, a 300px panel and a phone-wide sheet.\n */\nexport function RangePresets({\n  presets,\n  value,\n  onChange,\n  testId,\n}: {\n  presets: RangePreset[];\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n}): React.JSX.Element | null {\n  const theme = useTheme();\n  const box = useRef<HTMLDivElement>(null);\n  const width = useElementWidth(box);\n  const widest = useWidestLabel(box, presets.map((preset) => preset.label).join(\"|\"), width);\n  if (presets.length === 0) return null;\n  const fits = presetsFitOneLine(width, widest, presets.length, parseFloat(theme.spacing(0.75)));\n  return (\n    <Box ref={box} sx={{ position: \"relative\", minWidth: 0 }}>\n      <Box\n        aria-hidden=\"true\"\n        sx={{ position: \"absolute\", top: 0, left: 0, width: \"max-content\", height: 0, overflow: \"hidden\", visibility: \"hidden\" }}\n      >\n        {presets.map((preset) => (\n          <Box key={preset.id} component=\"span\" data-preset-measure=\"\" sx={MEASURE_SX}>\n            {preset.label}\n          </Box>\n        ))}\n      </Box>\n      {fits ? (\n        <Box\n          data-testid={`${testId}-presets`}\n          sx={{ display: \"grid\", gridTemplateColumns: `repeat(${presets.length}, minmax(0, 1fr))`, gap: 0.75 }}\n        >\n          {presets.map((preset) => {\n            const active = isPresetActive(preset, value);\n            return (\n              <PresetChip\n                key={preset.id}\n                preset={preset}\n                active={active}\n                onSelect={() => onChange(active ? {} : resolvePreset(preset))}\n                testId={`${testId}-preset-${preset.id}`}\n              />\n            );\n          })}\n        </Box>\n      ) : (\n        <Box data-testid={`${testId}-presets`}>\n          <PresetSelect presets={presets} value={value} onChange={onChange} testId={testId} />\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-BECKKDYG.js → chunk-M2M4IDFU.js}

@@ -1,6 +1,6 @@
 import {
   EN_US_CAROUSEL_COPY
-} from "./chunk-FEKWKWGK.js";
+} from "./chunk-ARGVUTTL.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -330,4 +330,4 @@ export {
   CarouselArrows,
   CarouselThumbnails
 };
-//# sourceMappingURL=chunk-BECKKDYG.js.map
+//# sourceMappingURL=chunk-M2M4IDFU.js.map

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

@@ -1,14 +1,14 @@
 import {
   renderChartByType
-} from "./chunk-6ATXOJVQ.js";
+} from "./chunk-3JZ3KEQQ.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-M3XJVD5G.js.map

package/dist/{chunk-CSGBHYW6.js → chunk-M5Y42AZ4.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-H2J2MTRE.js";
 import {
   EN_US_MAP_PREVIEW_COPY
-} from "./chunk-FEKWKWGK.js";
+} from "./chunk-ARGVUTTL.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -46,4 +46,4 @@ export {
   resolveMapPreviewProps,
   glassStyles
 };
-//# sourceMappingURL=chunk-CSGBHYW6.js.map
+//# sourceMappingURL=chunk-M5Y42AZ4.js.map

package/dist/chunk-MICX23P4.js

@@ -0,0 +1,122 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  toDayString,
+  toLocalDay
+} from "./chunk-SUTOAW7I.js";
+import {
+  Calendar
+} from "./chunk-FYAW5GBF.js";
+import {
+  EN_US_DATA_VIEWS_COPY
+} from "./chunk-ARGVUTTL.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-range-calendar.tsx
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CALENDAR_CLASS = "data-views-range-calendar";
+var ROOT_SX = (theme) => ({
+  mt: { xs: 1, sm: 1.5 },
+  // Below `sm` the caption and the weekday row give up their bottom margins,
+  // so the whole popover fits a 320×568 screen under its pill (FUT-4144).
+  '& :has(> * > [data-testid="calendar-month-select"])': { mb: { xs: 0.5, sm: 2 } },
+  '& :has(> [role="columnheader"])': { mb: { xs: 0, sm: 1 } },
+  '& [role="columnheader"]': { height: { xs: rem(theme, 24), sm: rem(theme, 32) } },
+  // The days carry no column gap of their own (`Calendar`, FUT-4162), so the
+  // seven columns are what a day's 40px target is carved from below `sm`; the
+  // range band and its round endpoints are the Calendar's, untouched here.
+  // The month/year caption on ONE row at 320: the selectors give up the slack
+  // around their text before the arrows are pushed onto a second row.
+  '& [data-testid="calendar-month-select"], & [data-testid="calendar-year-select"]': { px: 0.5, minWidth: 0 },
+  [`& .${CALENDAR_CLASS}`]: {
+    p: 0,
+    boxShadow: "none",
+    backgroundColor: "transparent",
+    backgroundImage: "none",
+    // A tapped day already rings itself; the whole grid framed in the primary
+    // colour after every tap is noise in a popover. The frame stays for the
+    // keyboard reaching the grid itself.
+    "&:focus-within": { outline: "none" },
+    "&:focus-visible": {
+      outline: (theme2) => `${rem(theme2, 2)} solid`,
+      outlineColor: "primary.main",
+      outlineOffset: sxRem(2)
+    }
+  }
+});
+function rangeOf(value) {
+  return {
+    start: toLocalDay(typeof value.min === "string" ? value.min : null),
+    end: toLocalDay(typeof value.max === "string" ? value.max : null)
+  };
+}
+function rangeFromCalendar(previous, picked) {
+  const min = dayOf(picked.start);
+  const max = dayOf(picked.end) ?? keptEnd(previous, min);
+  return { ...min ? { min } : {}, ...max ? { max } : {} };
+}
+var dayOf = (date) => date ? toDayString(date) : void 0;
+function keptEnd(previous, min) {
+  if (previous.min != null || typeof previous.max !== "string") return void 0;
+  return min && min <= previous.max ? previous.max : void 0;
+}
+function openingMonth(value, months) {
+  const end = toLocalDay(typeof value.max === "string" ? value.max : null);
+  const anchor = end ?? /* @__PURE__ */ new Date();
+  return new Date(anchor.getFullYear(), anchor.getMonth() - (months > 1 ? 1 : 0), 1);
+}
+function DayRangeCalendar({
+  fieldLabel,
+  value,
+  onChange,
+  months,
+  viewKey,
+  testId
+}) {
+  const copy = useDataViewsCopy().filters.dayCalendar ?? EN_US_DATA_VIEWS_COPY.filters.dayCalendar;
+  const range = rangeOf(value);
+  const pick = (picked) => onChange(rangeFromCalendar(value, picked));
+  const waitingForEnd = Boolean(range.start && !range.end);
+  return /* @__PURE__ */ jsxs(Box, { sx: ROOT_SX, "data-testid": `${testId}-calendar`, children: [
+    /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        ariaLabel: copy.label(fieldLabel),
+        className: CALENDAR_CLASS,
+        selectionMode: "range",
+        locale: copy.locale,
+        labels: copy.caption,
+        firstDayOfWeek: 0,
+        numberOfMonths: months,
+        showOutsideDays: months === 1,
+        captionLayout: months > 1 ? "arrows" : "selectors",
+        defaultMonth: openingMonth(value, months),
+        range,
+        onIntermediateRangeChange: pick
+      },
+      viewKey
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "p",
+        "aria-live": "polite",
+        "data-testid": `${testId}-calendar-hint`,
+        sx: { mt: { xs: 0.25, sm: 1 }, fontSize: sxRem(12), color: "text.secondary" },
+        children: waitingForEnd ? copy.pickEnd : copy.pickStart
+      }
+    )
+  ] });
+}
+
+export {
+  rangeFromCalendar,
+  DayRangeCalendar
+};
+//# sourceMappingURL=chunk-MICX23P4.js.map

package/dist/chunk-MICX23P4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-calendar.tsx"],"sourcesContent":["'use client';\n\n/**\n * The range calendar under a day filter's `De`/`Até` boxes (FUT-4144).\n *\n * The owner picked it ALWAYS OPEN (option B of the prototype): a period is\n * three taps — open the filter, the first day, the last day — against five for\n * a calendar button in each box and four for a link to a separate sheet. It\n * sits BELOW the boxes, with no button of its own, so the typed path is not one\n * keystroke longer than it was.\n *\n * The boxes and the calendar are two views of ONE range: a tap writes the\n * boxes, a typed day moves and repaints the calendar, an impossible typed day\n * (which writes nothing) leaves it alone, and \"Limpar\" empties both.\n *\n * It is `Calendar` in `selectionMode=\"range\"`, the same one `DateRangePicker`\n * mounts — not a second calendar. Its own rule picks the period: the first tap\n * starts it, the second closes it, and a second tap BEFORE the first swaps the\n * two, so the boxes never show a period backwards.\n */\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport { EN_US_DATA_VIEWS_COPY } from '../../../en-US.data-display';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { Calendar, type DateRange } from '../../form/Calendar';\nimport { toDayString, toLocalDay } from '../../form/DateRangePicker/DateRangePicker.dates';\nimport type { DataViewsDayCalendarCopy } from './data-views-copy';\nimport { useDataViewsCopy } from './data-views-copy-context';\nimport type { RangeValue } from './data-views-types';\n\nconst CALENDAR_CLASS = 'data-views-range-calendar';\n\n/**\n * `Calendar` draws its own `Paper` with 24px of padding and a shadow. Inside\n * the filter's popover that reads as a card inside a card, so the inner frame\n * is flattened through the class hook the component offers for this — the\n * same thing `DateRangePicker` does.\n */\nconst ROOT_SX = (theme: Theme) => ({\n  mt: { xs: 1, sm: 1.5 },\n  // Below `sm` the caption and the weekday row give up their bottom margins,\n  // so the whole popover fits a 320×568 screen under its pill (FUT-4144).\n  '& :has(> * > [data-testid=\"calendar-month-select\"])': { mb: { xs: 0.5, sm: 2 } },\n  '& :has(> [role=\"columnheader\"])': { mb: { xs: 0, sm: 1 } },\n  '& [role=\"columnheader\"]': { height: { xs: rem(theme, 24), sm: rem(theme, 32) } },\n  // The days carry no column gap of their own (`Calendar`, FUT-4162), so the\n  // seven columns are what a day's 40px target is carved from below `sm`; the\n  // range band and its round endpoints are the Calendar's, untouched here.\n  // The month/year caption on ONE row at 320: the selectors give up the slack\n  // around their text before the arrows are pushed onto a second row.\n  '& [data-testid=\"calendar-month-select\"], & [data-testid=\"calendar-year-select\"]': { px: 0.5, minWidth: 0 },\n  [`& .${CALENDAR_CLASS}`]: {\n    p: 0,\n    boxShadow: 'none',\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    // A tapped day already rings itself; the whole grid framed in the primary\n    // colour after every tap is noise in a popover. The frame stays for the\n    // keyboard reaching the grid itself.\n    '&:focus-within': { outline: 'none' },\n    '&:focus-visible': {\n      outline: (theme: Theme) => `${rem(theme, 2)} solid`,\n      outlineColor: 'primary.main',\n      outlineOffset: sxRem(2),\n    },\n  },\n});\n\n/** The two ends of a range, as `Calendar` reads them. */\nfunction rangeOf(value: RangeValue): DateRange {\n  return {\n    start: toLocalDay(typeof value.min === 'string' ? value.min : null),\n    end: toLocalDay(typeof value.max === 'string' ? value.max : null),\n  };\n}\n\n/**\n * What a tap on the calendar makes of the range.\n *\n * `Calendar` reports the period it holds after the tap: a fresh start (`end`\n * null) or a closed one, already in order. The one case it cannot see is a\n * range with only `Até` — typed, or left by a saved view — where its first tap\n * would drop that `Até`. A first day on or before it keeps it, so \"até 15/10\"\n * plus one tap on the 3rd is 03/10–15/10, as the prototype does.\n */\nexport function rangeFromCalendar(previous: RangeValue, picked: DateRange): RangeValue {\n  const min = dayOf(picked.start);\n  const max = dayOf(picked.end) ?? keptEnd(previous, min);\n  return { ...(min ? { min } : {}), ...(max ? { max } : {}) };\n}\n\nconst dayOf = (date: Date | null | undefined): string | undefined => (date ? toDayString(date) : undefined);\n\n/** The `Até` of a range that has ONLY one, when the new first day is on or before it. */\nfunction keptEnd(previous: RangeValue, min: string | undefined): string | undefined {\n  if (previous.min != null || typeof previous.max !== 'string') return undefined;\n  return min && min <= previous.max ? previous.max : undefined;\n}\n\n/**\n * The month the calendar opens on while `De` is empty. With `De` set it opens\n * on De's month, which `Calendar` does by itself.\n *\n * With two months the current month sits on the RIGHT (setembro | outubro), so\n * the days a filter usually asks about — the ones just past — are on screen;\n * with only `Até` set, its month takes that place.\n */\nfunction openingMonth(value: RangeValue, months: number): Date | undefined {\n  const end = toLocalDay(typeof value.max === 'string' ? value.max : null);\n  const anchor = end ?? new Date();\n  return new Date(anchor.getFullYear(), anchor.getMonth() - (months > 1 ? 1 : 0), 1);\n}\n\n/** Props of {@link DayRangeCalendar}. */\nexport interface DayRangeCalendarProps {\n  /** The filter's own label (\"Data\"), which names the calendar. */\n  fieldLabel: string;\n  value: RangeValue;\n  /** Called with the range a tap leaves; never for a typed day. */\n  onChange: (range: RangeValue) => void;\n  /**\n   * Months side by side. Two read as a period at a glance where there is room;\n   * one, with the month/year selectors, where there is not.\n   */\n  months: 1 | 2;\n  /**\n   * Changes when the range moved from OUTSIDE the calendar (typed, a preset,\n   * \"Limpar\"), so the calendar re-opens on it. Never for its own taps: a\n   * calendar that jumped under the finger picking in it would be unusable.\n   */\n  viewKey: string;\n  testId: string;\n}\n\nexport function DayRangeCalendar({\n  fieldLabel,\n  value,\n  onChange,\n  months,\n  viewKey,\n  testId,\n}: DayRangeCalendarProps): React.JSX.Element {\n  const copy: DataViewsDayCalendarCopy =\n    useDataViewsCopy().filters.dayCalendar ?? (EN_US_DATA_VIEWS_COPY.filters.dayCalendar as DataViewsDayCalendarCopy);\n  const range = rangeOf(value);\n  const pick = (picked: DateRange) => onChange(rangeFromCalendar(value, picked));\n  const waitingForEnd = Boolean(range.start && !range.end);\n\n  return (\n    <Box sx={ROOT_SX} data-testid={`${testId}-calendar`}>\n      <Calendar\n        key={viewKey}\n        ariaLabel={copy.label(fieldLabel)}\n        className={CALENDAR_CLASS}\n        selectionMode=\"range\"\n        locale={copy.locale}\n        labels={copy.caption}\n        // Sunday first, as a pt-BR calendar reads (`D S T Q Q S S`) and as the\n        // presets' \"Esta semana\" counts.\n        firstDayOfWeek={0}\n        numberOfMonths={months}\n        // Side by side, a day of the next month in this one is the same day\n        // twice; one month alone keeps them, muted, as a six-week frame.\n        showOutsideDays={months === 1}\n        captionLayout={months > 1 ? 'arrows' : 'selectors'}\n        defaultMonth={openingMonth(value, months)}\n        range={range}\n        // The intermediate callback does the work: the other fires only on the\n        // tap that CLOSES a period, so the first tap would write nothing.\n        onIntermediateRangeChange={pick}\n      />\n      <Typography\n        component=\"p\"\n        aria-live=\"polite\"\n        data-testid={`${testId}-calendar-hint`}\n        sx={{ mt: { xs: 0.25, sm: 1 }, fontSize: sxRem(12), color: 'text.secondary' }}\n      >\n        {waitingForEnd ? copy.pickEnd : copy.pickStart}\n      </Typography>\n    </Box>\n  );\n}\n"],"mappings":"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","names":["theme"]}

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

@@ -1,10 +1,10 @@
+import {
+  isoToMasked
+} from "./chunk-L6YTVXGN.js";
 import {
   dayCount,
   isAfterDay
 } from "./chunk-SUTOAW7I.js";
-import {
-  isoToMasked
-} from "./chunk-72HOUWAW.js";
 import {
   EN_US_UI_LABELS
 } from "./chunk-XOXXG7Q5.js";
@@ -65,4 +65,4 @@ export {
   resolveQuickRanges,
   activeQuickRangeId
 };
-//# sourceMappingURL=chunk-5CP5Z3YU.js.map
+//# sourceMappingURL=chunk-MPWA55CF.js.map

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

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

package/dist/{chunk-BO6MT2S2.js → chunk-MZAYIG2I.js}

@@ -1,15 +1,15 @@
 import {
   PillControl
 } from "./chunk-AJ6KFHEE.js";
-import {
-  QuickRow
-} from "./chunk-AT6UKTH4.js";
 import {
   isQuickActive
 } from "./chunk-KYUEO2IO.js";
 import {
   RangeBounds
-} from "./chunk-5RSK5M6M.js";
+} from "./chunk-FORAVDJF.js";
+import {
+  QuickRow
+} from "./chunk-AT6UKTH4.js";
 import {
   isRangeSet
 } from "./chunk-GCZJH4XL.js";
@@ -119,7 +119,8 @@ function OverflowRange({
       field: field.range,
       value,
       onChange,
-      testId: `${testIdPrefix}-more-${field.id}`
+      testId: `${testIdPrefix}-more-${field.id}`,
+      fillRow: true
     }
   );
 }
@@ -227,4 +228,4 @@ export {
   MoreQuick,
   MoreGroup
 };
-//# sourceMappingURL=chunk-BO6MT2S2.js.map
+//# sourceMappingURL=chunk-MZAYIG2I.js.map

package/dist/chunk-MZAYIG2I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-more-fields.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * ONE FIELD, RENDERED INSIDE THE \"MAIS\" PANEL.\n *\n * Split from `data-views-more-filters` at the file-size gate, along the seam\n * that was already there: that module is the trigger, the panel and its\n * footer — the chrome — and this is what goes in it.\n *\n * A field with one or two options renders FLAT: inside a panel there is no\n * space to win back, and two labelled checkboxes are faster than a dropdown\n * needing a second click. Past that — or whenever the field asks for a tree or\n * a search — it is the bar's own {@link PillControl}; see `sharesBarControl`.\n */\nimport Checkbox from \"@mui/material/Checkbox/index.js\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport { PillControl } from \"./data-views-category-pill\";\nimport type { OverflowField } from \"./data-views-overflow\";\nimport { RangeBounds } from \"./data-views-range-pill\";\nimport { isRangeSet } from \"./data-views-range-values\";\nimport type { QuickFilterConfig, RangeValue } from \"./data-views-types\";\nimport { QuickRow } from \"./data-views-quick-chip\";\nimport { isQuickActive } from \"./data-views-overflow-fields\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { fieldRadiusPx } from \"../../../tokens/field-radius\";\nimport { fieldHeight } from \"../../../tokens/field-height\";\nimport { fieldEdge } from \"../../../tokens/field-edge\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/** What each field's control needs, minus the panel's own chrome. */\nexport interface MoreFieldProps {\n  pills: Record<string, string[]>;\n  ranges: Record<string, RangeValue>;\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onChangeRange: (fieldId: string, range: RangeValue) => void;\n  /** Presses or releases a quick chip shed into the panel. */\n  onToggleQuick?: (quick: QuickFilterConfig) => void;\n  testIdPrefix: string;\n}\n\n/**\n * Above this many options a field is a DROPDOWN rather than a flat row of\n * checkboxes. Two options cost two lines and read faster laid out; a \"Cliente\"\n * with a dozen turns the panel into a scrolling wall and buries every field\n * under it, which is exactly what the overflow was meant to avoid.\n */\nconst INLINE_OPTION_LIMIT = 2;\n\n/**\n * Whether an overflowed pill keeps the SAME control it has on the bar.\n *\n * The panel used to build its own flat dropdown for every field past two\n * options, so a field's config only held while it fitted: `control:\n * \"category\"` lost its tree (subcategories flattened into one list, no\n * \"Marcar tudo\", no count footer) and `searchEnabled` lost its search, on\n * exactly the phone widths where most filters live in here. Anything the bar\n * would render as a dropdown now renders as the bar's own {@link PillControl};\n * only a plain two-option field — one that did not ask for a dropdown, a tree\n * or a search — stays a flat checkbox row, which is a panel layout rather than\n * a different control (the filter panel draws the same line).\n */\nfunction sharesBarControl<T extends Record<string, unknown>>(field: OverflowField<T>): boolean {\n  const pill = field.pill;\n  if (!pill) return false;\n  return (\n    pill.control === \"category\" ||\n    pill.control === \"multiselect\" ||\n    pill.searchEnabled === true ||\n    pill.options.length > INLINE_OPTION_LIMIT\n  );\n}\n\n/** One overflowed pill: the bar's control, or its options as checkboxes. */\nfunction OverflowPill<T extends Record<string, unknown>>({\n  field,\n  values,\n  onTogglePill,\n  onClear,\n  testIdPrefix,\n}: {\n  field: OverflowField<T>;\n  values: string[];\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onClear: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const testId = `${testIdPrefix}-more-${field.id}`;\n  if (field.pill && sharesBarControl(field)) {\n    return (\n      <PillControl\n        fieldId={field.id}\n        pill={field.pill}\n        selected={values}\n        onTogglePill={onTogglePill}\n        onClearField={onClear}\n        testIdPrefix={testIdPrefix}\n        testId={testId}\n      />\n    );\n  }\n  const onToggle = (value: string, checked: boolean) => onTogglePill(field.id, value, checked);\n  return (\n    <Box sx={{ display: \"flex\", flexWrap: \"wrap\", gap: 0.75 }}>\n      {(field.pill?.options ?? []).map((option) => {\n        const checked = values.includes(option.value);\n        return (\n          <Box\n            key={option.value}\n            component=\"label\"\n            data-testid={`${testId}-${option.value}`}\n            sx={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              gap: 0.25,\n              pr: 1,\n              border: 1,\n              borderStyle: \"solid\",\n              minHeight: fieldHeight,\n              borderColor: (theme) => (checked ? theme.palette.primary.main : fieldEdge(theme)),\n              bgcolor: checked ? \"action.selected\" : \"transparent\",\n              borderRadius: fieldRadiusPx,\n              cursor: \"pointer\",\n              fontSize: sxRem(13),\n              color: checked ? \"primary.main\" : \"text.secondary\",\n            }}\n          >\n            <Checkbox\n              size=\"small\"\n              checked={checked}\n              onChange={(event) => onToggle(option.value, event.target.checked)}\n              inputProps={{ \"aria-label\": `${field.label}: ${option.label}` }}\n            />\n            {option.label}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n}\n\n\n/**\n * One overflowed range: its presets and its two bounds, as the same controls\n * the pill uses.\n *\n * The whole control DELEGATES to {@link RangeBounds} rather than being built\n * here, which is the point — this panel used to render a raw\n * `<input type=\"date\">`, so the masked `dd/mm/aaaa` field existed only while\n * the filter FITTED on the bar. The moment \"Data\" overflowed it reverted to the\n * native control the mask replaced, and a merchant on a narrow screen never saw\n * the fix at all (FUT-744). `Valor` had the twin bug: a bare `type=\"number\"`\n * plus `Number(raw)` dropped the decimal comma this panel is meant to accept.\n *\n * That also retires the intrinsic-width workaround this pair used to need — a\n * native date input reports a wide minimum (its own mask plus the picker\n * glyph), which is what made two of them refuse to shrink and scrolled the\n * panel sideways. A text input has no such minimum.\n *\n * `RangeBounds` renders the preset chips ITSELF, above the inputs. This panel\n * must NOT render its own row as well: when the delegation above landed, the\n * chips it used to draw by hand stayed behind, and \"Data\" showed Hoje/Ontem/\n * Esta semana/Este mês/Este ano twice — two rows, duplicated test ids, and half\n * the panel's height spent saying the same thing (FUT-751).\n */\nfunction OverflowRange<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testIdPrefix,\n}: {\n  field: OverflowField<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testIdPrefix: string;\n}): React.JSX.Element | null {\n  // `group === \"range\"` is what selects this component, so `range` is always\n  // set; the guard is for the type, not for a state the caller can reach.\n  if (!field.range) return null;\n  return (\n    <RangeBounds\n      field={field.range}\n      value={value}\n      onChange={onChange}\n      testId={`${testIdPrefix}-more-${field.id}`}\n      fillRow\n    />\n  );\n}\n\n/**\n * Whether a field has anything applied, and how to unapply it — the two shapes\n * (a pill's selected values, a range's bounds) answered in one place so the\n * group that renders them stays a renderer.\n */\nexport function fieldClearing<T extends Record<string, unknown>>({\n  field,\n  pills,\n  ranges,\n  onTogglePill,\n  onChangeRange,\n}: {\n  field: OverflowField<T>;\n} & Pick<MoreFieldProps, \"pills\" | \"ranges\" | \"onTogglePill\" | \"onChangeRange\">): {\n  applied: boolean;\n  clear: () => void;\n} {\n  if (field.group === \"quick\" && field.quick) {\n    const quick = field.quick;\n    // A `default` chip lit by an empty field has nothing to clear.\n    const applied = isQuickActive(quick, pills) && (pills[quick.fieldId]?.length ?? 0) > 0;\n    return { applied, clear: () => onTogglePill(quick.fieldId, quick.value, false) };\n  }\n  if (field.group === \"range\") {\n    return {\n      applied: isRangeSet(ranges[field.id] ?? {}),\n      clear: () => onChangeRange(field.id, {}),\n    };\n  }\n  const values = pills[field.id] ?? [];\n  return {\n    applied: values.length > 0,\n    clear: () => values.forEach((value) => onTogglePill(field.id, value, false)),\n  };\n}\n\n\n/**\n * A quick chip shed into the panel: its own line, because label and count are\n * already the whole control — no heading above it, no \"Limpar\" beside it.\n */\nexport function MoreQuick({\n  quick,\n  pills,\n  onToggleQuick,\n  testIdPrefix,\n}: {\n  quick: QuickFilterConfig;\n} & Pick<MoreFieldProps, \"pills\" | \"onToggleQuick\" | \"testIdPrefix\">): React.JSX.Element {\n  return (\n    <Box sx={{ mb: 1, \"&:last-of-type\": { mb: 0 } }}>\n      <QuickRow\n        quick={quick}\n        active={isQuickActive(quick, pills)}\n        onToggle={() => onToggleQuick?.(quick)}\n        testIdPrefix={testIdPrefix}\n      />\n    </Box>\n  );\n}\n\n/** One labelled group in the panel: the field's name, then its control. */\nexport function MoreGroup<T extends Record<string, unknown>>({\n  field,\n  pills,\n  ranges,\n  onTogglePill,\n  onChangeRange,\n  testIdPrefix,\n}: {\n  field: OverflowField<T>;\n} & MoreFieldProps): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { applied, clear } = fieldClearing({ field, pills, ranges, onTogglePill, onChangeRange });\n  return (\n    <Box sx={{ mb: 1.5, \"&:last-of-type\": { mb: 0 } }}>\n      <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1, mb: 0.5 }}>\n        <Text variant=\"caption\" as=\"span\">\n          <Box component=\"span\" sx={{ color: \"text.secondary\" }}>\n            {field.label}\n            {field.group === \"range\" && isRangeSet(ranges[field.id] ?? {}) ? \" •\" : \"\"}\n          </Box>\n        </Text>\n        {/* The panel's equivalent of the pill's ✕. Without it a field applied\n            in here could only be cleared by finding it again on the bar —\n            which is where it goes the moment it becomes active, so the\n            operator has to close this panel to undo what they just did. */}\n        {applied && (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            onClick={clear}\n            data-testid={`${testIdPrefix}-more-${field.id}-clear`}\n            sx={{\n              ml: \"auto\",\n              border: 0,\n              p: 0,\n              bgcolor: \"transparent\",\n              cursor: \"pointer\",\n              font: \"inherit\",\n              fontSize: sxRem(12),\n              color: \"primary.main\",\n              \"&:hover\": { textDecoration: \"underline\" },\n            }}\n          >\n            {copy.filters.clear}\n          </Box>\n        )}\n      </Box>\n      {field.group === \"pill\" ? (\n        <OverflowPill\n          field={field}\n          values={pills[field.id] ?? []}\n          onTogglePill={onTogglePill}\n          onClear={() => (pills[field.id] ?? []).forEach((v) => onTogglePill(field.id, v, false))}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : (\n        <OverflowRange\n          field={field}\n          value={ranges[field.id] ?? {}}\n          onChange={(range) => onChangeRange(field.id, range)}\n          testIdPrefix={testIdPrefix}\n        />\n      )}\n    </Box>\n  );\n}\n\n"],"mappings":"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","names":["default"]}