@12-apps/ui 6.97.0 → 6.98.0

package/src/components/form/DateRangePicker/DateRangePicker.types.ts

@@ -4,7 +4,10 @@
  * "1 August" is the same day in every zone, and only the question "which day is
  * TODAY" needs a zone to answer.
  */
-import type { DateRange } from '../Calendar';
+import type React from 'react';
+
+import type { CalendarLabels } from '../../../copy/labels';
+import type { CalendarTodayIndicator, DateRange } from '../Calendar';
 
 /** One inclusive calendar day as `AAAA-MM-DD`. Sorts lexicographically. */
 export type DayString = string;
@@ -90,6 +93,12 @@ export interface DateRangePickerMessages {
   quickRanges: string;
   /** Shown while only one end is chosen. */
   incomplete: string;
+  /**
+   * Shown, with `openEnd`, for a start with no end: a finished answer ("no end
+   * date"), worded WITHOUT the date, which the field beside it already shows.
+   * Optional so a full messages object written before it still type-checks.
+   */
+  openEnded?: string;
   /** Shown when the start is after the end. */
   reversed: string;
   /** Shown when the range — typed or quick-picked — exceeds the cap. */
@@ -164,6 +173,78 @@ export interface DateRangePickerProps {
   numberOfMonths?: number;
   /** Copy overrides, merged over the English defaults. */
   messages?: Partial<DateRangePickerMessages>;
+  /**
+   * Where the typed half sits. `below` (default) is the layout this picker
+   * always had. `beside` is for a picker laid out in a page rather than a
+   * popover: the months sit in their own frame and the fields in a column
+   * beside them when the PICKER's own width has room for both, under them when
+   * it has not — and one month instead of two when two would not fit either.
+   * Decided by measuring the picker, not the viewport, because a form column
+   * beside a preview is narrow on the widest screen.
+   */
+  fieldsPlacement?: 'below' | 'beside';
+  /**
+   * With `fieldsPlacement="beside"`: the months' frame meets the picker's own
+   * edges instead of hugging its months. Under the fields' row the frame spans
+   * the picker; beside them it takes what the fields' column leaves, and that
+   * column stops at 320 design px — a `dd/mm/aaaa` date and its message need
+   * no more. The calendar's seven columns spread across the frame and the day
+   * faces keep their size (`Calendar` `fullWidth`). For a picker laid into a
+   * form section whose edges the frame must line up with. Under the fields the
+   * frame trims its side padding before a column drops under 40 design px.
+   * Ignored without `fieldsPlacement="beside"`: the popover's frame is as wide
+   * as its months. Default: false — the frame as wide as its months, centred
+   * under the fields.
+   */
+  fullWidth?: boolean;
+  /**
+   * The consumer's OWN typed fields, in place of the built-in pair and the
+   * summary line under it — for a form whose fields carry its own rules (a
+   * half-typed date kept until submit, its own messages), which a second line
+   * would only repeat. Told where it sits, so it can lay its fields out for it.
+   * The calendar follows the value when the consumer changes it, as it follows
+   * a typed date.
+   */
+  renderFields?: (args: { placement: 'beside' | 'below'; disabled: boolean }) => React.ReactNode;
+  /**
+   * The period is shown but cannot be changed now — its consumer cannot place
+   * its days (FUT-4482). Every day of the grid is disabled and a tap writes
+   * nothing, the quick ranges are not offered, the built-in boxes are
+   * disabled, `renderFields` is told (`disabled`) so the consumer's own fields
+   * follow, and the root is a `group` named by `label` that carries
+   * `aria-disabled`. The month arrows are disabled too and today's ring takes
+   * the disabled ink (review round 6). Say WHY next to the picker; the control
+   * cannot — and describe the consumer's own fields with that sentence.
+   *
+   * In a popover, the picker is only what opens: the consumer disables its OWN
+   * trigger (the button or field that opens the popover); this prop cannot
+   * reach it. Default: false.
+   */
+  disabled?: boolean;
+  /**
+   * The picker's accessible name while it is `disabled` and its root is a
+   * group. Default: `messages.calendarLabel`.
+   */
+  label?: string;
+  /**
+   * A start with no end is a finished answer — "from this day on" — rather
+   * than half a range: the summary says `messages.openEnded` instead of asking
+   * for the end. `resolveDayRange` is unchanged; the caller decides what an
+   * open end means to it.
+   */
+  openEnd?: boolean;
+  /**
+   * The calendar's display options, passed through (`Calendar`'s own):
+   * whether a month shows its neighbours' days (default true), how today is
+   * marked (default `'bold'`), and whether one day may be the whole range
+   * (default true). With `allowSameDayRange={false}` a second tap on the start
+   * day does nothing.
+   */
+  showOutsideDays?: boolean;
+  todayIndicator?: CalendarTodayIndicator;
+  allowSameDayRange?: boolean;
+  /** Names for the calendar's own controls (the month arrows), in the host's language. */
+  calendarLabels?: Partial<CalendarLabels>;
   /** Root test id; every part derives from it (`-from`, `-quick-today`, …). */
   dataTestId?: string;
   className?: string;
@@ -182,6 +263,12 @@ export interface UseDateRangePickerArgs {
   weekStartsOn: WeekStart;
   quickRanges: QuickRange[];
   messages: Partial<DateRangePickerMessages> | undefined;
+  /**
+   * Remount the calendar onto the range whenever the CONSUMER moves it, not
+   * only when a typed field or a quick pick does — true when the consumer owns
+   * the fields (`renderFields`), whose edits never pass through the picker.
+   */
+  followValue?: boolean;
 }
 
 /** Everything the component renders from, and every way the range can move. */

package/src/components/form/DateRangePicker/DateRangePickerFields.tsx

@@ -38,6 +38,12 @@ export interface DateRangeFieldsProps {
   /** Id of the status line, so both fields can point at it. */
   statusId: string;
   dataTestId: string;
+  /** A start with no end is an answer (`openEnd`), not a half-chosen range. */
+  openEnd?: boolean;
+  /** Beside the months the pair stacks; under them it sits side by side. */
+  stacked?: boolean;
+  /** The picker is `disabled`: both boxes are. */
+  disabled?: boolean;
 }
 
 export function DateRangeFields({
@@ -48,6 +54,9 @@ export function DateRangeFields({
   onEdit,
   statusId,
   dataTestId,
+  openEnd = false,
+  stacked = false,
+  disabled = false,
 }: DateRangeFieldsProps): React.JSX.Element {
   // "Incomplete" is not an error — it is a range that is not finished yet, and
   // painting it red would make the first click on a two-click control look like
@@ -56,7 +65,7 @@ export function DateRangeFields({
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+      <Box sx={{ display: 'flex', flexDirection: stacked ? 'column' : 'row', flexWrap: 'wrap', gap: 2 }}>
         <DayBoundInput
           mask={messages.dayMask}
           label={messages.from}
@@ -65,6 +74,7 @@ export function DateRangeFields({
           testId={`${dataTestId}-from`}
           error={rejected}
           describedBy={statusId}
+          disabled={disabled}
         />
         <DayBoundInput
           mask={messages.dayMask}
@@ -74,6 +84,7 @@ export function DateRangeFields({
           testId={`${dataTestId}-to`}
           error={rejected}
           describedBy={statusId}
+          disabled={disabled}
         />
       </Box>
       <Typography
@@ -86,7 +97,7 @@ export function DateRangeFields({
         color={rejected ? 'error.main' : 'text.secondary'}
         data-testid={`${dataTestId}-status`}
       >
-        {statusMessage(status, messages, maxRangeDays)}
+        {statusMessage(status, messages, maxRangeDays, { enabled: openEnd, draft: value })}
       </Typography>
     </Box>
   );

package/src/components/navigation/Tabs/Tabs.md

@@ -78,7 +78,8 @@ The Tabs component provides an intuitive way to organize related content into se
 | Prop             | Type                                    | Default  | Description                    |
 | ---------------- | --------------------------------------- | -------- | ------------------------------ |
 | `scrollable`     | `boolean`                               | `false`  | Enable scrolling for many tabs |
-| `scrollButtons`  | `'auto' \| 'desktop' \| 'on' \| 'off'`  | `'auto'` | Scroll button behavior         |
+| `scrollButtons`  | `boolean \| 'auto' \| 'desktop' \| 'on' \| 'off'` | `'auto'` | The ‹ › buttons of a `scrollable` strip: `'auto'` while it overflows, `true` always, `false` never (swipe/wheel/keyboard still scroll). `'desktop'`, `'on'`, `'off'` are deprecated and behave as `'auto'` |
+| `allowScrollButtonsMobile` | `boolean`                      | `scrollable` | Show the scroll buttons on phone widths too; `false` keeps MUI's hide-below-`sm` rule |
 | `sticky`         | `boolean`                               | `false`  | Pin the tab list while panels scroll beneath it |
 | `stickyOffset`   | `number`                                | `0`      | Top offset (px) when `sticky` — e.g. a fixed header height |
 
@@ -270,6 +271,26 @@ function ScrollableTabsExample() {
 }
 ```
 
+### Scrollable Tabs Without Scroll Buttons
+
+`scrollButtons={false}` keeps the strip scrollable (swipe, wheel, keyboard) but
+renders no ‹ › buttons, so the tabs run edge to edge and nothing shifts when the
+strip leaves its start. A host that wants arrows draws its own, for example
+overlaid on a fade at the side with more tabs.
+
+```tsx
+<Tabs
+  items={items}
+  value={activeTab}
+  onChange={handleChange}
+  scrollable
+  scrollButtons={false}
+/>
+```
+
+Note that `scrollButtons="off"` does **not** do this: the legacy strings
+`'desktop'`, `'on'` and `'off'` all behave as `'auto'`, as they always have.
+
 ### Sticky, Scrollable Tabs
 
 Pin the tab list under a fixed header while the panels scroll, and let the row

package/src/components/navigation/Tabs/Tabs.tsx

@@ -133,13 +133,28 @@ const definedProps = (props: TabsProps): Partial<TabsProps> =>
     Object.entries(props).filter(([, value]) => value !== undefined),
   ) as Partial<TabsProps>;
 
-// Once the row is scrollable every accepted scrollButtons value ends up as
-// MUI's 'auto'. That is exactly what the previous nested ternary did — it mapped
-// 'on'/'off'/'desktop' to 'auto', and its remaining branch could only ever be
-// 'auto' anyway — so the behaviour is preserved here rather than quietly
-// changed. Worth knowing that scrollButtons="off" therefore still shows buttons.
-const resolveScrollButtons = (scrollable?: boolean): 'auto' | false =>
-  scrollable ? 'auto' : false;
+/**
+ * The `scrollButtons` value handed to MUI (FUT-4408).
+ *
+ * A strip that does not scroll has no buttons. A scrollable one honours the
+ * host: `false` drops the buttons entirely (the host may draw its own, or let
+ * the strip be swiped), `true` keeps them on whether or not the row overflows,
+ * and `'auto'` — the default — shows them while it does.
+ *
+ * The legacy strings `'desktop'`, `'on'` and `'off'` keep resolving to
+ * `'auto'`, exactly as they always have: hosts already pass them (one passes
+ * `'off'` on a scrollable strip and gets buttons today), so giving them a new
+ * meaning in a patch release would move existing screens. They are deprecated
+ * in `TabsProps`; a host that wants none passes `false`.
+ */
+const resolveScrollButtons = (
+  scrollable: boolean | undefined,
+  scrollButtons: TabsProps['scrollButtons'],
+): 'auto' | boolean => {
+  if (!scrollable) return false;
+  if (typeof scrollButtons === 'boolean') return scrollButtons;
+  return 'auto';
+};
 
 const buildTabsSx = ({
   fullWidth,
@@ -233,8 +248,9 @@ const TabsBar: React.FC<
     // `scrollable` flag onto it so overflowing tab rows actually scroll.
     variant={p.scrollable ? 'scrollable' : 'standard'}
     data-testid={dataTestId ? `${dataTestId}-list` : 'tabs-list'}
-    scrollButtons={resolveScrollButtons(p.scrollable)}
-    allowScrollButtonsMobile={p.scrollable}
+    scrollButtons={resolveScrollButtons(p.scrollable, p.scrollButtons)}
+    // Phones get the buttons too unless the host says otherwise.
+    allowScrollButtonsMobile={p.allowScrollButtonsMobile ?? p.scrollable}
     textColor={p.color}
     indicatorColor={p.color}
     sx={buildTabsSx({

package/src/components/navigation/Tabs/Tabs.types.ts

@@ -122,9 +122,25 @@ export interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'children' | '
   scrollable?: boolean;
   
   /**
-   * Scroll button behavior
+   * The ‹ › scroll buttons of a `scrollable` strip (ignored when the strip does
+   * not scroll, which never has any):
+   *
+   * - `'auto'` (default): shown while the row overflows; the disabled one at
+   *   either end collapses to no width.
+   * - `true`: always shown, even when every tab fits.
+   * - `false`: never rendered. The strip still scrolls by swipe, wheel and
+   *   keyboard; a host that wants arrows draws its own (e.g. overlaid).
+   * - `'desktop'`, `'on'`, `'off'`: **deprecated**, each behaves exactly as
+   *   `'auto'` (as they always have). Use `false` for none, `true` for always.
+   */
+  scrollButtons?: boolean | 'auto' | 'desktop' | 'on' | 'off';
+
+  /**
+   * Whether the scroll buttons are shown on narrow (phone) viewports too.
+   * Defaults to the value of `scrollable`, so a scrollable strip shows them on
+   * phones; pass `false` to keep MUI's own rule of hiding them below `sm`.
    */
-  scrollButtons?: 'auto' | 'desktop' | 'on' | 'off';
+  allowScrollButtonsMobile?: boolean;
 
   /**
    * Pin the tab list in place (CSS `position: sticky`) while the tab panels

package/src/copy/labels.ts

@@ -212,6 +212,12 @@ export interface SocialLoginLabels {
 /** `DateRangePicker`'s calendar popover name. */
 export interface DateRangePickerLabels {
   calendar: string;
+  /**
+   * The line under the fields, with `openEnd`, for a start with no end.
+   * Optional (review round 6): a host's own `UiLabels` pack predates it, and
+   * the picker says the English default where it is missing.
+   */
+  openEnded?: string;
 }
 
 /**

package/src/en-US.labels.ts

@@ -143,6 +143,7 @@ export const EN_US_UI_LABELS: UiLabels = {
   },
   dateRangePicker: {
     calendar: "Calendar",
+    openEnded: "No end date.",
   },
   calendar: {
     chooseMonth: (month) => `${month}, choose month`,

package/src/pt-BR.labels.ts

@@ -142,6 +142,7 @@ export const PT_BR_UI_LABELS: UiLabels = {
   },
   dateRangePicker: {
     calendar: "Calendário",
+    openEnded: "Sem data de término.",
   },
   calendar: {
     chooseMonth: (month) => `${month}, escolher mês`,

package/dist/chunk-3ZRK3BRN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Calendar/CalendarDayCell.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React from 'react';\n\nimport { bandFor } from './Calendar.band';\nimport { isSameDay } from './Calendar.dates';\nimport { buildDayArgs } from './Calendar.selection';\nimport type { CalendarProps, DateRange, MonthMatrixDay, SelectionMode } from './Calendar.types';\nimport { CalendarDay } from './CalendarDay';\n\n// Everything a cell needs that is the same for every cell in the calendar.\nexport interface DayCellContext {\n  selectionMode: SelectionMode;\n  /** BCP-47 tag each day's spoken name is written in. */\n  locale: string;\n  value: Date | null;\n  range: DateRange;\n  hoveredDate: Date | null;\n  focusedDate: Date;\n  today: Date;\n  showOutsideDays: boolean;\n  isDisabled: (date: Date) => boolean;\n  renderDay?: CalendarProps['renderDay'];\n  dayClassName?: CalendarProps['dayClassName'];\n  onSelect: (date: Date) => void;\n  onHover: (date: Date) => void;\n  onHoverEnd: () => void;\n}\n\nexport const CalendarDayCell: FC<DayCellContext & { day: MonthMatrixDay }> = ({\n  day,\n  focusedDate,\n  showOutsideDays,\n  renderDay,\n  dayClassName,\n  onSelect,\n  onHover,\n  onHoverEnd,\n  locale,\n  ...context\n}) => {\n  const args = buildDayArgs({ day, ...context });\n\n  if (renderDay) return <>{renderDay(args)}</>;\n\n  return (\n    <CalendarDay\n      day={args}\n      locale={locale}\n      band={bandFor({ args, ...context })}\n      focused={isSameDay(args.date, focusedDate)}\n      showOutsideDays={showOutsideDays}\n      dayClassName={dayClassName}\n      onSelect={onSelect}\n      onHover={onHover}\n      onHoverEnd={onHoverEnd}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AA0CwB;AAdjB,IAAM,kBAAgE,CAAC;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,OAAO,aAAa,EAAE,KAAK,GAAG,QAAQ,CAAC;AAE7C,MAAI,UAAW,QAAO,gCAAG,oBAAU,IAAI,GAAE;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAM,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;AAAA,MAClC,SAAS,UAAU,KAAK,MAAM,WAAW;AAAA,MACzC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-4L54KUZV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Calendar/CalendarDay.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\n\nimport type { DayBand } from './Calendar.band';\nimport { bandColor, endpointFill, endpointHoverFill } from './Calendar.band';\nimport type { DayRenderArgs } from './Calendar.types';\n\n/**\n * A column's width: the 304 design px a month asked for when its seven 40px\n * cells sat 4px apart, shared by seven columns that now touch (FUT-4162). The\n * cell fills its column up to this size, so the month shrinks with its\n * container instead of holding a fixed 304px floor (FUT-3861).\n */\nconst COLUMN_SIZE = sxRem(304 / 7);\n\n/** 304/7 wide to 40 tall: the day's face is a 40 design px circle at full size. */\nconst CELL_RATIO = '38 / 35';\n\ninterface DayState extends DayRenderArgs {\n  outside: boolean;\n  focused: boolean;\n}\n\n// Order matters: these land on the element in the order listed.\nconst CLASS_FLAGS: Array<[keyof DayState, string]> = [\n  ['selected', 'selected'],\n  ['inRange', 'in-range'],\n  ['rangeStart', 'range-start'],\n  ['rangeEnd', 'range-end'],\n  ['disabled', 'disabled'],\n  ['today', 'today'],\n  ['outside', 'outside'],\n  ['hovered', 'hovered'],\n  ['focused', 'focused'],\n];\n\nconst dayClassNames = (state: DayState, custom?: string): string =>\n  [\n    'calendar-day',\n    ...CLASS_FLAGS.filter(([flag]) => state[flag]).map(([, name]) => name),\n    ...(custom ? [custom] : []),\n  ].join(' ');\n\nconst isEndpoint = (day: DayRenderArgs): boolean =>\n  day.selected || day.rangeStart || day.rangeEnd;\n\n// The band's share of the cell (see `Calendar.band.ts`): all of it, or the\n// half that faces the rest of the range.\nconst BAND_IMAGE: Record<Exclude<DayBand, 'none'>, (band: string) => string> = {\n  full: (band) => `linear-gradient(${band}, ${band})`,\n  after: (band) => `linear-gradient(to right, transparent 50%, ${band} 50%)`,\n  before: (band) => `linear-gradient(to left, transparent 50%, ${band} 50%)`,\n};\n\n// A gradient's `to right` is physical; a right-to-left grid starts a range on\n// its right, so the two halves trade places there.\nconst inDirection = (band: Exclude<DayBand, 'none'>, theme: Theme): Exclude<DayBand, 'none'> => {\n  if (theme.direction !== 'rtl' || band === 'full') return band;\n  return band === 'after' ? 'before' : 'after';\n};\n\nconst faceBackgroundFor = (day: DayRenderArgs): ((theme: Theme) => string) | string =>\n  isEndpoint(day) ? endpointFill : 'transparent';\n\nconst colorFor = (day: DayRenderArgs, visible: boolean): string => {\n  if (isEndpoint(day)) return 'primary.contrastText';\n  if (day.disabled) return 'text.disabled';\n  // Outside days that are switched off still occupy the grid, they just have\n  // nothing to show.\n  if (!visible) return 'transparent';\n  return 'text.primary';\n};\n\nconst hoverBackgroundFor = (day: DayRenderArgs): ((theme: Theme) => string) | string | undefined => {\n  if (day.disabled) return undefined;\n  return isEndpoint(day) ? endpointHoverFill : 'action.hover';\n};\n\n// The band reaches the cell's edges so neighbouring days join; where a week\n// row ends, it rounds off instead of stopping square: half the cell each way\n// is a half-round cap on a cell as tall as it is wide.\nconst BAND_RADIUS = '50%';\n\n/**\n * One cell: the band, painted on the button across its whole column, and the\n * day's round face, a `::before` circle behind the number. The face is a\n * pseudo-element so the button's own content stays the bare day number a host's\n * tests query (`getByText('27')` is the cell, as it always was).\n */\nconst dayCellSx = (day: DayRenderArgs, band: DayBand, visible: boolean): SxProps<Theme> => ({\n  position: 'relative',\n  isolation: 'isolate',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  // The column it ASKS for keeps the month's intrinsic width at 304 (FUT-3861),\n  // now that the seven columns carry no gap between them; `maxWidth` and the\n  // column's `minmax(0, 1fr)` let it give way below that, and the ratio keeps\n  // it 40 tall at full size and shrinking with it.\n  width: COLUMN_SIZE,\n  maxWidth: '100%',\n  aspectRatio: CELL_RATIO,\n  justifySelf: 'stretch',\n  boxSizing: 'border-box',\n  padding: 0,\n  border: 'none',\n  background: 'none',\n  backgroundImage: band === 'none' ? 'none' : (theme: Theme) => BAND_IMAGE[inDirection(band, theme)](bandColor(theme)),\n  cursor: day.disabled ? 'not-allowed' : 'pointer',\n  color: colorFor(day, visible),\n  opacity: !day.inCurrentMonth && visible ? 0.5 : 1,\n  fontWeight: day.today || isEndpoint(day) ? 'bold' : 'normal',\n  // `nth-child`, counting every cell of the week: a hidden outside day is an\n  // inert `span` placeholder (FUT-4144), and `nth-of-type` counted only the\n  // buttons, so the caps landed mid-week in a month with hidden outside days.\n  '&:nth-child(7n + 1)': { borderStartStartRadius: BAND_RADIUS, borderEndStartRadius: BAND_RADIUS },\n  '&:nth-child(7n)': { borderStartEndRadius: BAND_RADIUS, borderEndEndRadius: BAND_RADIUS },\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    margin: 'auto',\n    zIndex: -1,\n    // A circle as tall as the cell: 40 design px at full size (FUT-3861).\n    height: '100%',\n    aspectRatio: '1 / 1',\n    maxWidth: '100%',\n    borderRadius: '50%',\n    backgroundColor: faceBackgroundFor(day),\n  },\n  '&:hover::before': {\n    backgroundColor: hoverBackgroundFor(day),\n  },\n  '&:focus': { outline: 'none' },\n  '&:focus::before': {\n    outline: (theme: Theme) => `${rem(theme, 2)} solid`,\n    outlineColor: 'primary.main',\n    outlineOffset: sxRem(1),\n  },\n});\n\n/**\n * A day's spoken name, whole: \"1 de outubro de 2026\". The cell's text is the\n * bare number, which a screen reader would read as \"1\" — in a two-month range\n * calendar that is two different days.\n */\nconst dayName = (date: Date, locale: string): string =>\n  date.toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric' });\n\nexport interface CalendarDayProps {\n  day: DayRenderArgs;\n  /** BCP-47 tag the day's accessible name is written in. Default: en-US. */\n  locale?: string;\n  band: DayBand;\n  focused: boolean;\n  showOutsideDays: boolean;\n  dayClassName?: (args: DayRenderArgs) => string;\n  onSelect: (date: Date) => void;\n  onHover: (date: Date) => void;\n  onHoverEnd: () => void;\n}\n\nexport const CalendarDay: FC<CalendarDayProps> = ({\n  day,\n  locale = 'en-US',\n  band,\n  focused,\n  showOutsideDays,\n  dayClassName,\n  onSelect,\n  onHover,\n  onHoverEnd,\n}) => {\n  const visible = day.inCurrentMonth || showOutsideDays;\n  const state: DayState = { ...day, outside: !day.inCurrentMonth, focused };\n\n  // A day hidden by `showOutsideDays={false}` keeps its place in the grid and\n  // nothing else: no button to click in a blank, no name, no tab stop that\n  // cannot be seen (FUT-4144).\n  if (!visible) {\n    return (\n      <Box\n        component=\"span\"\n        aria-hidden=\"true\"\n        data-testid=\"calendar-outside-placeholder\"\n        sx={{ width: COLUMN_SIZE, maxWidth: '100%', aspectRatio: CELL_RATIO, justifySelf: 'stretch' }}\n      />\n    );\n  }\n\n  return (\n    <Box\n      component=\"button\"\n      role=\"gridcell\"\n      tabIndex={focused ? 0 : -1}\n      aria-selected={day.selected}\n      aria-disabled={day.disabled}\n      aria-current={day.today ? 'date' : undefined}\n      aria-label={dayName(day.date, locale)}\n      data-in-month={day.inCurrentMonth}\n      className={dayClassNames(state, dayClassName?.(day))}\n      data-testid={`calendar-date-${day.date.getDate()}`}\n      onClick={() => onSelect(day.date)}\n      onMouseEnter={() => onHover(day.date)}\n      onMouseLeave={onHoverEnd}\n      sx={dayCellSx(day, band, visible)}\n    >\n      {day.selected && (\n        <Box component=\"span\" data-testid=\"calendar-selected-date\" sx={{ display: 'none' }} />\n      )}\n      {day.today && (\n        <Box component=\"span\" data-testid=\"calendar-today\" sx={{ display: 'none' }} />\n      )}\n      {day.date.getDate()}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-FYAW5GBF.js.map

@@ -1 +0,0 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,SAAS,aAAa,WAAW,cAAc;AAmHlD,SAqBM,KArBN;AApGJ,IAAM,cAAc,CAAC,kBAA0C;AAAA,EAC7D,GAAG;AAAA,EACH,SAAS;AAAA,EACT,eAAe,eAAe,IAAI,QAAQ;AAAA,EAC1C,KAAK;AAAA,EACL,SAAS;AAAA,EACT,kBAAkB;AAAA,IAChB,SAAS,CAAC,UAAiB,GAAG,IAAI,OAAO,CAAC,CAAC;AAAA,IAC3C,cAAc;AAAA,IACd,eAAe,MAAM,CAAC;AAAA,EACxB;AACF;AAIA,IAAM,kBAAkB,CAAC,OAA8B,cAA6C;AAAA,EAClG,eAAe,MAAM;AAAA,EACrB,QAAQ,MAAM;AAAA,EACd,OAAO,MAAM;AAAA,EACb,OAAO,MAAM;AAAA,EACb,iBAAiB,MAAM;AAAA,EACvB,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,EACpB,aAAa,SAAS;AAAA,EACtB,aAAa,SAAS;AAAA,EACtB,OAAO,SAAS;AAAA,EAChB,YAAY,SAAS;AAAA,EACrB,UAAU,SAAS;AAAA,EACnB,SAAS,SAAS;AAAA,EAClB,YAAY,SAAS;AACvB;AAGA,IAAM,aAAa,CAAC,cAAkD;AACpE,QAAM,UAAU,OAA8B,IAAI;AAClD,QAAM,UAAU;AAAA,IACd,CAAC,SAAgC;AAC/B,cAAQ,UAAU;AAClB,UAAI,OAAO,cAAc,WAAY,WAAU,IAAI;AAAA,eAC1C,UAAW,WAAU,UAAU;AAAA,IAC1C;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,SAAO,EAAE,SAAS,QAAQ;AAC5B;AAGA,IAAM,iBAAiB;AACvB,IAAM,WAAW;AAiBjB,IAAM,oBAAoB,CACxB,SACA,aACA,mBACG;AACH,QAAM,YAAY,OAAsB,IAAI;AAC5C,YAAU,MAAM;AACd,UAAM,OAAO,UAAU;AACvB,cAAU,UAAU;AACpB,QAAI,SAAS,QAAQ,SAAS,YAAY,QAAQ,EAAG;AACrD,UAAM,OAAO,QAAQ;AACrB,KAAC,MAAM,cAA2B,cAAc,KAAK,MAAM,cAA2B,QAAQ,IAAI,MAAM;AAAA,EAC1G,GAAG,CAAC,SAAS,WAAW,CAAC;AACzB,SAAO,CAAC,UAA+B;AACrC,UAAM,QAAS,MAAM,OAAuB,aAAa,MAAM,MAAM;AACrE,UAAM,QAAQ,cAAc,MAAM,KAAK,aAAa,EAAE,gBAAgB,UAAU,MAAM,SAAS,CAAC,MAAM;AACtG,cAAU,UAAU,SAAS,QAAQ,YAAY,QAAQ,IAAI;AAAA,EAC/D;AACF;AAEO,IAAM,WAAW,MAAM,WAA0C,CAAC,gBAAgB,QAAQ;AAC/F,QAAM,QAAQ,qBAAqB,cAAc;AACjD,QAAM,EAAE,cAAc,QAAQ,cAAc,cAAc,WAAW,UAAU,IAAI;AAEnF,QAAM,WAAW,YAAY,KAAK;AAClC,QAAM,EAAE,SAAS,QAAQ,IAAI,WAAW,GAAG;AAC3C,QAAM,SAAS,EAAE,SAAS,MAAM,SAAS,SAAS,MAAM,QAAQ;AAChE,QAAM,SAAS,kBAAkB,EAAE,SAAS,QAAQ,GAAG,SAAS,CAAC;AACjE,QAAM,aAAa,gBAAgB,OAAO,QAAQ;AAClD,QAAM,gBAAgB,kBAAkB,SAAS,SAAS,aAAa,MAAM,cAAc;AAC3F,QAAM,SAAS,cAAc,gBAAgB,UAAU,MAAM,MAAM;AAEnE,QAAM,aAAa,SAAS,cAAc,CAAC;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,UAAU;AAAA,MAGV,WACE,OAAO,SAAS,SACZ,CAAC,UAAU;AACT,sBAAc,KAAK;AACnB,iBAAS,cAAc,KAAK;AAAA,MAC9B,IACA;AAAA,MAEN,eAAY;AAAA,MACZ,IAAI,YAAY,YAAY;AAAA,MAE5B;AAAA,4BAAC,OAAI,KAAK,SAAS,SAAS,IAAI,EAAE,SAAS,QAAQ,KAAK,GAAG,UAAU,OAAO,GACzE,gBAAM,kBAAkB,eAAe,aACtC;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ;AAAA,YACR;AAAA,YACA,cAAc,SAAS;AAAA,YACvB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,iBAAiB,MAAM;AACrB,qBAAO,SAAS;AAChB,uBAAS,kBAAkB;AAAA,YAC7B;AAAA,YACA,aAAa,MAAM;AACjB,qBAAO,SAAS;AAChB,uBAAS,cAAc;AAAA,YACzB;AAAA;AAAA,QACF,IAEA,SAAS,cAAc,IAAI,CAAC,QAAQ,UAClC;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA,YAAY;AAAA,YACZ;AAAA,YACA;AAAA,YACA,cAAc,SAAS;AAAA,YACvB;AAAA,YAGA,QAAQ,MAAM,SAAS,SAAS;AAAA,YAChC,iBAAiB,SAAS;AAAA,YAC1B,aAAa,SAAS;AAAA,YACtB;AAAA;AAAA,UAZK,SAAS,OAAO,IAAI,IAAI,OAAO,KAAK;AAAA,QAa3C,CACD,GAEL;AAAA,QAEC,gBACC,oBAAC,OAAI,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,WAAW,GAAG,aAAa,UAAU,GAAI,wBAAa;AAAA;AAAA;AAAA,EAEnF;AAEJ,CAAC;AAED,SAAS,cAAc;AAEvB,IAAO,mBAAQ;","names":[]}

package/dist/chunk-H2UUMZQR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Calendar/Calendar.band.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { alpha, blend, darken, decomposeColor, getContrastRatio, getLuminance, lighten } from '../../../tokens/color';\n\nimport { isSameDay } from './Calendar.dates';\nimport type { DateRange, DayRenderArgs, SelectionMode } from './Calendar.types';\n\n/**\n * WHERE A DAY SITS ON THE RANGE BAND (FUT-4162).\n *\n * A selected range is ONE band behind its days, not a tile per day: the grid\n * has no column gap and each day paints its share of the band. A day strictly\n * inside the range paints all of it (`full`); the first and last day paint the\n * half that faces the rest of the range (`after` / `before`), so the band runs\n * into the round endpoint and stops at its centre. A range of one day, or no\n * range, paints none.\n *\n * While only the start is chosen, the hovered day stands in for the end, the\n * same preview `isDateInRange` draws.\n */\nexport type DayBand = 'none' | 'full' | 'after' | 'before';\n\n// The other end of the range: its end, or while only the start is chosen, the\n// hovered day standing in for it.\nconst otherEnd = (range: DateRange, hoveredDate: Date | null, isDisabled: (date: Date) => boolean) =>\n  range.end ?? (hoveredDate && !isDisabled(hoveredDate) ? hoveredDate : null);\n\n// The half an endpoint paints: towards the rest of the range.\nconst endpointBand = (date: Date, start: Date, other: Date): DayBand => {\n  const [first, last] = start < other ? [start, other] : [other, start];\n  if (isSameDay(date, first)) return 'after';\n  if (isSameDay(date, last)) return 'before';\n  return 'none';\n};\n\nexport const bandFor = ({\n  args,\n  selectionMode,\n  range,\n  hoveredDate,\n  isDisabled,\n}: {\n  args: DayRenderArgs;\n  selectionMode: SelectionMode;\n  range: DateRange;\n  hoveredDate: Date | null;\n  isDisabled: (date: Date) => boolean;\n}): DayBand => {\n  if (selectionMode !== 'range') return 'none';\n  if (args.inRange) return 'full';\n\n  const other = otherEnd(range, hoveredDate, isDisabled);\n  if (!range.start || !other || isSameDay(range.start, other)) return 'none';\n  return endpointBand(args.date, range.start, other);\n};\n\n/**\n * The band: the brand at a quarter strength, so it reads as the brand's tint on\n * any ground (on white it is the brand three quarters of the way to white).\n */\nexport const BAND_OPACITY = 0.25;\n\nexport const bandColor = (theme: Theme): string => alpha(theme.palette.primary.main, BAND_OPACITY);\n\n/**\n * WCAG AA for body text, plus a margin: `getLuminance` rounds to three\n * places, which can move a ratio by about a hundredth either way.\n */\nconst ENDPOINT_MIN_CONTRAST = 4.55;\nconst STEP = 0.01;\n\n// The ink as it reads ON the fill: MUI's dark ink is 87% black, so it is laid\n// over the fill before it is measured, rather than taken as solid black.\nconst readsAt = (ink: string, fill: string): number => {\n  const [, , , opacity = 1] = decomposeColor(ink).values;\n  return getContrastRatio(opacity < 1 ? blend(fill, ink, opacity) : ink, fill);\n};\n\n// Light ink (white) wants a darker fill; dark ink a lighter one.\nconst awayFromInk = (ink: string): ((color: string, coefficient: number) => string) =>\n  getLuminance(ink) > 0.5 ? darken : lighten;\n\n/**\n * An endpoint's fill: the brand, moved away from its own ink JUST far enough\n * for that ink to read at AA (FUT-4162).\n *\n * The ink is the palette's `primary.contrastText`, which MUI picks at 3:1, so\n * a brand can ship an ink that reads at 3 to 4.5:1 on it — the default indigo\n * is 4.47:1 under white. Rather than change the ink (every other component\n * shares it), the fill gives way: darker under white ink, lighter under dark\n * ink. A brand that already passes is returned unchanged; the default indigo\n * moves by one percent, which no one can see.\n */\nexport const endpointFill = (theme: Theme): string => {\n  const { main, contrastText } = theme.palette.primary;\n  try {\n    if (readsAt(contrastText, main) >= ENDPOINT_MIN_CONTRAST) return main;\n    const move = awayFromInk(contrastText);\n    for (let coefficient = STEP; coefficient < 1; coefficient += STEP) {\n      const fill = move(main, coefficient);\n      if (readsAt(contrastText, fill) >= ENDPOINT_MIN_CONTRAST) return fill;\n    }\n    return move(main, 1);\n  } catch {\n    // A colour format the helpers cannot decompose: the brand as it is.\n    return main;\n  }\n};\n\n/** A hovered endpoint: one more step the same way, so it only gains contrast. */\nexport const endpointHoverFill = (theme: Theme): string => {\n  const fill = endpointFill(theme);\n  try {\n    return awayFromInk(theme.palette.primary.contrastText)(fill, 0.15);\n  } catch {\n    return fill;\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;AAwBA,IAAM,WAAW,CAAC,OAAkB,aAA0B,eAC5D,MAAM,QAAQ,eAAe,CAAC,WAAW,WAAW,IAAI,cAAc;AAGxE,IAAM,eAAe,CAAC,MAAY,OAAa,UAAyB;AACtE,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,QAAQ,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AACpE,MAAI,UAAU,MAAM,KAAK,EAAG,QAAO;AACnC,MAAI,UAAU,MAAM,IAAI,EAAG,QAAO;AAClC,SAAO;AACT;AAEO,IAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMe;AACb,MAAI,kBAAkB,QAAS,QAAO;AACtC,MAAI,KAAK,QAAS,QAAO;AAEzB,QAAM,QAAQ,SAAS,OAAO,aAAa,UAAU;AACrD,MAAI,CAAC,MAAM,SAAS,CAAC,SAAS,UAAU,MAAM,OAAO,KAAK,EAAG,QAAO;AACpE,SAAO,aAAa,KAAK,MAAM,MAAM,OAAO,KAAK;AACnD;AAMO,IAAM,eAAe;AAErB,IAAM,YAAY,CAAC,UAAyB,MAAM,MAAM,QAAQ,QAAQ,MAAM,YAAY;AAMjG,IAAM,wBAAwB;AAC9B,IAAM,OAAO;AAIb,IAAM,UAAU,CAAC,KAAa,SAAyB;AACrD,QAAM,CAAC,EAAE,EAAE,EAAE,UAAU,CAAC,IAAI,eAAe,GAAG,EAAE;AAChD,SAAO,iBAAiB,UAAU,IAAI,MAAM,MAAM,KAAK,OAAO,IAAI,KAAK,IAAI;AAC7E;AAGA,IAAM,cAAc,CAAC,QACnB,aAAa,GAAG,IAAI,MAAM,SAAS;AAa9B,IAAM,eAAe,CAAC,UAAyB;AACpD,QAAM,EAAE,MAAM,aAAa,IAAI,MAAM,QAAQ;AAC7C,MAAI;AACF,QAAI,QAAQ,cAAc,IAAI,KAAK,sBAAuB,QAAO;AACjE,UAAM,OAAO,YAAY,YAAY;AACrC,aAAS,cAAc,MAAM,cAAc,GAAG,eAAe,MAAM;AACjE,YAAM,OAAO,KAAK,MAAM,WAAW;AACnC,UAAI,QAAQ,cAAc,IAAI,KAAK,sBAAuB,QAAO;AAAA,IACnE;AACA,WAAO,KAAK,MAAM,CAAC;AAAA,EACrB,QAAQ;AAEN,WAAO;AAAA,EACT;AACF;AAGO,IAAM,oBAAoB,CAAC,UAAyB;AACzD,QAAM,OAAO,aAAa,KAAK;AAC/B,MAAI;AACF,WAAO,YAAY,MAAM,QAAQ,QAAQ,YAAY,EAAE,MAAM,IAAI;AAAA,EACnE,QAAQ;AACN,WAAO;AAAA,EACT;AACF;","names":[]}

package/dist/chunk-I4K5JMS4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Calendar/Calendar.helpers.ts"],"sourcesContent":["import type { CalendarProps, ResolvedCalendarProps } from './Calendar.types';\n\nconst CALENDAR_DEFAULTS = {\n  selectionMode: 'single',\n  value: null,\n  range: { start: null, end: null },\n  firstDayOfWeek: 0,\n  locale: 'en-US',\n  showOutsideDays: true,\n  minRangeLength: 1,\n  allowSameDayRange: true,\n  autoFocus: false,\n  captionLayout: 'arrows',\n} as const satisfies Partial<CalendarProps>;\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: CalendarProps): Partial<CalendarProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<CalendarProps>;\n\n// Applied as a merge rather than destructuring defaults, which would otherwise\n// put nine branches into the component's own complexity budget.\nexport const resolveCalendarProps = (props: CalendarProps): ResolvedCalendarProps => {\n  const merged = { ...CALENDAR_DEFAULTS, ...definedProps(props) } as ResolvedCalendarProps;\n\n  // A range needs two months side by side to be picked comfortably; a single\n  // date does not.\n  const defaultMonths = merged.selectionMode === 'range' ? 2 : 1;\n\n  // The selectors caption names ONE month and one year, so it shows one month.\n  if (merged.captionLayout === 'selectors') return { ...merged, monthsToShow: 1 };\n\n  return { ...merged, monthsToShow: merged.numberOfMonths ?? defaultMonths };\n};\n"],"mappings":";AAEA,IAAM,oBAAoB;AAAA,EACxB,eAAe;AAAA,EACf,OAAO;AAAA,EACP,OAAO,EAAE,OAAO,MAAM,KAAK,KAAK;AAAA,EAChC,gBAAgB;AAAA,EAChB,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,eAAe;AACjB;AAIA,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAIK,IAAM,uBAAuB,CAAC,UAAgD;AACnF,QAAM,SAAS,EAAE,GAAG,mBAAmB,GAAG,aAAa,KAAK,EAAE;AAI9D,QAAM,gBAAgB,OAAO,kBAAkB,UAAU,IAAI;AAG7D,MAAI,OAAO,kBAAkB,YAAa,QAAO,EAAE,GAAG,QAAQ,cAAc,EAAE;AAE9E,SAAO,EAAE,GAAG,QAAQ,cAAc,OAAO,kBAAkB,cAAc;AAC3E;","names":[]}

package/dist/chunk-J2GDA64N.js

@@ -1,184 +0,0 @@
-import {
-  DEFAULT_QUICK_RANGES
-} from "./chunk-R26WP22N.js";
-import {
-  useDateRangePicker
-} from "./chunk-RZ3P4X2I.js";
-import {
-  DateRangeQuickList
-} from "./chunk-6KKQHJE7.js";
-import {
-  DateRangeFields
-} from "./chunk-QSOCOXVL.js";
-import {
-  toLocalDay
-} from "./chunk-SUTOAW7I.js";
-import {
-  Calendar
-} from "./chunk-FYAW5GBF.js";
-
-// src/components/form/DateRangePicker/DateRangePicker.tsx
-import Box from "@mui/material/Box/index.js";
-import Paper from "@mui/material/Paper/index.js";
-import useMediaQuery from "@mui/material/useMediaQuery/index.js";
-import { useTheme } from "@mui/material/styles/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-var CALENDAR_CLASS = "date-range-picker__calendar";
-var ROOT_SX = {
-  display: "inline-flex",
-  flexDirection: "column",
-  gap: 2,
-  p: 2,
-  maxWidth: "100%",
-  // `Calendar` renders its own `Paper` with 24px of padding. Nested in this one
-  // that reads as a box inside a box, so the inner frame is flattened here
-  // through the className hook the component exposes for exactly this.
-  [`& .${CALENDAR_CLASS}`]: {
-    p: 0,
-    boxShadow: "none",
-    backgroundColor: "transparent",
-    backgroundImage: "none"
-  }
-};
-var BODY_SX = {
-  display: "flex",
-  // The quick column sits BESIDE the calendar on a wide screen. Narrow, it
-  // moves ABOVE it — `column-reverse`, so the DOM order stays calendar-then-
-  // list (the calendar is the primary control and should be reached first by a
-  // screen reader and by Tab) while the eye meets the quick ranges first, which
-  // is the order the phone mock asks for and the order a thumb wants: nine
-  // one-tap answers before a grid of thirty.
-  //
-  // A side column at 390px would squeeze the day grid to roughly half its width
-  // and make the numbers unreadable. Checked at 390px.
-  flexDirection: { xs: "column-reverse", md: "row" },
-  alignItems: { xs: "stretch", md: "flex-start" },
-  gap: 2,
-  maxWidth: "100%"
-};
-var QUICK_DIVIDER_SX = {
-  borderColor: "divider",
-  borderStyle: "solid",
-  borderWidth: 0,
-  borderLeftWidth: { xs: 0, md: "1px" },
-  borderBottomWidth: { xs: "1px", md: 0 },
-  pl: { xs: 0, md: 2 },
-  pb: { xs: 2, md: 0 },
-  alignSelf: "stretch"
-};
-var FIELDS_DIVIDER_SX = {
-  borderTop: "1px solid",
-  borderColor: "divider",
-  pt: 2
-};
-function useMonthCount(requested) {
-  const theme = useTheme();
-  const narrow = useMediaQuery(theme.breakpoints.down("md"));
-  return narrow ? 1 : requested;
-}
-function RangeCalendar({
-  calendarLabel,
-  picker,
-  value,
-  locale,
-  weekStartsOn,
-  months,
-  maxRangeDays
-}) {
-  return /* @__PURE__ */ jsx(
-    Calendar,
-    {
-      ariaLabel: calendarLabel,
-      className: CALENDAR_CLASS,
-      selectionMode: "range",
-      locale,
-      firstDayOfWeek: weekStartsOn,
-      numberOfMonths: months,
-      range: { start: toLocalDay(value.from), end: toLocalDay(value.to) },
-      onIntermediateRangeChange: picker.pickOnCalendar,
-      onRangeChange: picker.pickOnCalendar,
-      maxRangeLength: maxRangeDays
-    },
-    picker.viewNonce
-  );
-}
-function QuickColumn({
-  picker,
-  maxRangeDays,
-  dataTestId
-}) {
-  if (picker.options.length === 0) return null;
-  return /* @__PURE__ */ jsx(Box, { sx: QUICK_DIVIDER_SX, children: /* @__PURE__ */ jsx(
-    DateRangeQuickList,
-    {
-      options: picker.options,
-      activeId: picker.activeId,
-      onPick: picker.pickQuick,
-      reasonFor: (option) => picker.copy.overMax({ maxRangeDays: maxRangeDays ?? option.days, days: option.days }),
-      label: picker.copy.quickRanges,
-      dataTestId
-    }
-  ) });
-}
-function DateRangePicker({
-  value,
-  onChange,
-  timeZone,
-  now,
-  maxRangeDays,
-  weekStartsOn = 0,
-  quickRanges = DEFAULT_QUICK_RANGES,
-  locale = "en-US",
-  numberOfMonths,
-  messages,
-  dataTestId = "date-range-picker",
-  className
-}) {
-  const picker = useDateRangePicker({
-    value,
-    onChange,
-    timeZone,
-    now,
-    maxRangeDays,
-    weekStartsOn,
-    quickRanges,
-    messages
-  });
-  const months = useMonthCount(numberOfMonths);
-  return /* @__PURE__ */ jsxs(Paper, { className, "data-testid": dataTestId, sx: ROOT_SX, children: [
-    /* @__PURE__ */ jsxs(Box, { sx: BODY_SX, children: [
-      /* @__PURE__ */ jsx(
-        RangeCalendar,
-        {
-          calendarLabel: picker.copy.calendarLabel,
-          picker,
-          value,
-          locale,
-          weekStartsOn,
-          months,
-          maxRangeDays
-        }
-      ),
-      /* @__PURE__ */ jsx(QuickColumn, { picker, maxRangeDays, dataTestId })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { sx: FIELDS_DIVIDER_SX, children: /* @__PURE__ */ jsx(
-      DateRangeFields,
-      {
-        value,
-        status: picker.status,
-        messages: picker.copy,
-        maxRangeDays,
-        onEdit: picker.editBound,
-        statusId: picker.statusId,
-        dataTestId
-      }
-    ) })
-  ] });
-}
-var DateRangePicker_default = DateRangePicker;
-
-export {
-  DateRangePicker,
-  DateRangePicker_default
-};
-//# sourceMappingURL=chunk-J2GDA64N.js.map

package/dist/chunk-J2GDA64N.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["'use client';\n\n/**\n * Three views of ONE range: a calendar, a quick-pick column, and two typed\n * dates. Change any and the other two follow.\n *\n * WHY IT EXISTS: a range calendar alone makes \"this quarter\" cost two clicks,\n * a month of paging, and a mental note of which day a quarter starts on; a list\n * of presets alone cannot express \"the 3rd to the 19th\"; and typed fields alone\n * make you spell out a window you can see. Each of the three is the fastest\n * route to a different range, so the control offers all three over one value\n * rather than picking a favourite.\n *\n * WHAT IT DOES NOT KNOW: anything about the data behind the range. No preset\n * list of a product's own, no ceiling of its own, no notion of whose clock\n * \"today\" runs on — `quickRanges`, `maxRangeDays` and `timeZone` are props, and\n * a consumer that needs its own periods passes them rather than teaching this\n * file about its domain. The calendar is `Calendar` in `selectionMode=\"range\"`,\n * not a second implementation of one.\n *\n * The value is a DRAFT (`{ from, to }`, either end possibly null) rather than a\n * finished window, so a half-picked or impossible range has somewhere to live\n * while it is being fixed. Every `onChange` carries the verdict with it.\n */\nimport Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { Calendar } from '../Calendar';\n\nimport { toLocalDay } from './DateRangePicker.dates';\nimport { useDateRangePicker } from './DateRangePicker.hooks';\nimport { DEFAULT_QUICK_RANGES } from './DateRangePicker.quick';\nimport type { DateRangeDraft, DateRangePickerProps, WeekStart } from './DateRangePicker.types';\nimport { DateRangeFields } from './DateRangePickerFields';\nimport { DateRangeQuickList } from './DateRangePickerQuickList';\n\nconst CALENDAR_CLASS = 'date-range-picker__calendar';\n\nconst ROOT_SX: SxProps<Theme> = {\n  display: 'inline-flex',\n  flexDirection: 'column',\n  gap: 2,\n  p: 2,\n  maxWidth: '100%',\n  // `Calendar` renders its own `Paper` with 24px of padding. Nested in this one\n  // that reads as a box inside a box, so the inner frame is flattened here\n  // through the className hook the component exposes for exactly this.\n  [`& .${CALENDAR_CLASS}`]: {\n    p: 0,\n    boxShadow: 'none',\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n  },\n};\n\nconst BODY_SX: SxProps<Theme> = {\n  display: 'flex',\n  // The quick column sits BESIDE the calendar on a wide screen. Narrow, it\n  // moves ABOVE it — `column-reverse`, so the DOM order stays calendar-then-\n  // list (the calendar is the primary control and should be reached first by a\n  // screen reader and by Tab) while the eye meets the quick ranges first, which\n  // is the order the phone mock asks for and the order a thumb wants: nine\n  // one-tap answers before a grid of thirty.\n  //\n  // A side column at 390px would squeeze the day grid to roughly half its width\n  // and make the numbers unreadable. Checked at 390px.\n  flexDirection: { xs: 'column-reverse', md: 'row' },\n  alignItems: { xs: 'stretch', md: 'flex-start' },\n  gap: 2,\n  maxWidth: '100%',\n};\n\n/**\n * The rule between the calendar and the quick ranges.\n *\n * Two lists of dates side by side with only whitespace between them read as one\n * ragged thing; the rule says which numbers belong to which control. It turns\n * with the layout — a vertical rule when the list is a column beside the\n * calendar, a horizontal one when it has moved above it — because a divider\n * that keeps its axis while the flex direction flips ends up separating nothing.\n */\nconst QUICK_DIVIDER_SX: SxProps<Theme> = {\n  borderColor: 'divider',\n  borderStyle: 'solid',\n  borderWidth: 0,\n  borderLeftWidth: { xs: 0, md: '1px' },\n  borderBottomWidth: { xs: '1px', md: 0 },\n  pl: { xs: 0, md: 2 },\n  pb: { xs: 2, md: 0 },\n  alignSelf: 'stretch',\n};\n\n/** And the rule above the typed pair, which is a third way in, not a caption. */\nconst FIELDS_DIVIDER_SX: SxProps<Theme> = {\n  borderTop: '1px solid',\n  borderColor: 'divider',\n  pt: 2,\n};\n\ntype Picker = ReturnType<typeof useDateRangePicker>;\n\n/**\n * How many months to draw.\n *\n * A month grid has a floor: seven columns that must stay legible, which is\n * about 280px. Two of them need 580, so on a phone the consumer's\n * `numberOfMonths` is not a preference that can be honoured — it is a request\n * for a layout that does not fit. Capped here rather than left to the consumer,\n * because the consumer chooses for its own reason (the reports dialog wants two\n * because a period often crosses a month boundary) and has no way to know the\n * picker is currently 390px wide.\n *\n * A media query rather than an `sx` breakpoint: this decides what to RENDER,\n * and CSS cannot un-render a second month.\n *\n * Below the theme's `md` the picker is a phone layout — the same breakpoint the\n * `sx` blocks here switch on. The query is a STRING built from `useTheme()`,\n * not `useMediaQuery`'s callback form: the callback reads the theme from\n * context and throws on a null one, so a consumer that mounts this outside a\n * `ThemeProvider` would crash — which the unit tests here do, and which is a\n * fair thing for a consumer to do. `useTheme()` falls back to MUI's default\n * theme there, whose `md` is the `(max-width:899.95px)` this used to spell out.\n */\nfunction useMonthCount(requested: number | undefined): number | undefined {\n  const theme = useTheme();\n  const narrow = useMediaQuery(theme.breakpoints.down('md'));\n  return narrow ? 1 : requested;\n}\n\n/** The grid, in range mode — `Calendar`, never a second implementation of one. */\nfunction RangeCalendar({\n  calendarLabel,\n  picker,\n  value,\n  locale,\n  weekStartsOn,\n  months,\n  maxRangeDays,\n}: {\n  picker: Picker;\n  value: DateRangeDraft;\n  locale: string;\n  weekStartsOn: WeekStart;\n  months: number | undefined;\n  maxRangeDays: number | undefined;\n  calendarLabel: string;\n}): React.JSX.Element {\n  return (\n    <Calendar\n      key={picker.viewNonce}\n      ariaLabel={calendarLabel}\n      className={CALENDAR_CLASS}\n      selectionMode=\"range\"\n      locale={locale}\n      // One prop drives the grid's first column AND the day \"this week\" starts\n      // on, so a highlighted week can never begin mid-row.\n      firstDayOfWeek={weekStartsOn}\n      numberOfMonths={months}\n      range={{ start: toLocalDay(value.from), end: toLocalDay(value.to) }}\n      // BOTH callbacks, and the intermediate one does the work: the other fires\n      // only on the click that CLOSES a range, so a picker wired to it alone\n      // would not repaint after the first click.\n      onIntermediateRangeChange={picker.pickOnCalendar}\n      onRangeChange={picker.pickOnCalendar}\n      // The same ceiling the quick list is judged against, so the calendar\n      // cannot hand back a window the control has just called too long.\n      maxRangeLength={maxRangeDays}\n    />\n  );\n}\n\n/** The quick ranges, inside the rule that separates them from the grid. */\nfunction QuickColumn({\n  picker,\n  maxRangeDays,\n  dataTestId,\n}: {\n  picker: Picker;\n  maxRangeDays: number | undefined;\n  dataTestId: string;\n}): React.JSX.Element | null {\n  if (picker.options.length === 0) return null;\n  return (\n    <Box sx={QUICK_DIVIDER_SX}>\n      <DateRangeQuickList\n        options={picker.options}\n        activeId={picker.activeId}\n        onPick={picker.pickQuick}\n        reasonFor={(option) =>\n          picker.copy.overMax({ maxRangeDays: maxRangeDays ?? option.days, days: option.days })\n        }\n        label={picker.copy.quickRanges}\n        dataTestId={dataTestId}\n      />\n    </Box>\n  );\n}\n\nexport function DateRangePicker({\n  value,\n  onChange,\n  timeZone,\n  now,\n  maxRangeDays,\n  weekStartsOn = 0,\n  quickRanges = DEFAULT_QUICK_RANGES,\n  locale = 'en-US',\n  numberOfMonths,\n  messages,\n  dataTestId = 'date-range-picker',\n  className,\n}: DateRangePickerProps): React.JSX.Element {\n  const picker = useDateRangePicker({\n    value,\n    onChange,\n    timeZone,\n    now,\n    maxRangeDays,\n    weekStartsOn,\n    quickRanges,\n    messages,\n  });\n  const months = useMonthCount(numberOfMonths);\n\n  return (\n    <Paper className={className} data-testid={dataTestId} sx={ROOT_SX}>\n      <Box sx={BODY_SX}>\n        <RangeCalendar\n          calendarLabel={picker.copy.calendarLabel}\n          picker={picker}\n          value={value}\n          locale={locale}\n          weekStartsOn={weekStartsOn}\n          months={months}\n          maxRangeDays={maxRangeDays}\n        />\n        <QuickColumn picker={picker} maxRangeDays={maxRangeDays} dataTestId={dataTestId} />\n      </Box>\n      <Box sx={FIELDS_DIVIDER_SX}>\n        <DateRangeFields\n          value={value}\n          status={picker.status}\n          messages={picker.copy}\n          maxRangeDays={maxRangeDays}\n          onEdit={picker.editBound}\n          statusId={picker.statusId}\n          dataTestId={dataTestId}\n        />\n      </Box>\n    </Paper>\n  );\n}\n\nexport default DateRangePicker;\n"],"mappings":"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","names":[]}

package/dist/chunk-MPWA55CF.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/DateRangePicker/DateRangePicker.range.ts"],"sourcesContent":["/**\n * Judging a draft, and saying so in words.\n *\n * The picker never repairs what it is given. A reversed pair is not silently\n * swapped and an over-long one is not clipped to the cap: both are reported,\n * because a control that returns a different range from the one on screen is\n * indistinguishable from one that ignored you. The caller reads\n * {@link DateRangeStatus} and keeps its own confirm button shut.\n */\nimport { isoToMasked } from '../../data-display/DataViews/data-views-day-input';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\nimport { dayCount, isAfterDay } from './DateRangePicker.dates';\nimport type {\n  DateRangePickerMessages,\n  DateRangeDraft,\n  DateRangeStatus,\n  QuickRange,\n  QuickRangeContext,\n  ResolvedQuickRange,\n} from './DateRangePicker.types';\n\n/**\n * Whether a draft is a window this picker will hand over.\n *\n * Exported because the caller needs the same verdict the picker shows: a dialog\n * disabling its \"Apply\" button must not re-derive \"is this legal\" from the two\n * strings, or the two answers drift and the button ends up enabled over a\n * message saying the range is impossible.\n */\nexport function resolveDayRange(\n  draft: DateRangeDraft,\n  maxRangeDays?: number,\n): DateRangeStatus {\n  const { from, to } = draft;\n  if (!from || !to) return { ok: false, problem: 'incomplete', days: 0 };\n  if (isAfterDay(from, to)) return { ok: false, problem: 'reversed', days: 0 };\n\n  const days = dayCount(from, to);\n  if (maxRangeDays !== undefined && days > maxRangeDays) {\n    return { ok: false, problem: 'over-max', days };\n  }\n  return { ok: true, window: { from, to }, days };\n}\n\n/**\n * The English defaults.\n *\n * The summary prints the days in the SAME `dd/mm/aaaa` the two fields are\n * masked to, rather than in the host locale's order. One control cannot show\n * the same date two ways: an `en-US` host formatting the summary as `08/05`\n * over a field reading `05/08` leaves the reader to work out which of the two\n * is lying. A host that wants its own order replaces `messages.summary`, which\n * moves both halves of the decision to the same place.\n */\nexport function defaultMessages(): DateRangePickerMessages {\n  // ONE mask, read by both the fields and the summary below. They are the same\n  // date in the same control, so a summary formatted in a different order from\n  // the boxes it summarises is a control arguing with itself — which is what\n  // two independent literals eventually become.\n  const dayMask = 'dd/mm/yyyy';\n  return {\n    from: 'Start date',\n    to: 'End date',\n    quickRanges: 'Quick ranges',\n    incomplete: 'Choose both dates.',\n    reversed: 'The end date must be on or after the start date.',\n    overMax: ({ maxRangeDays }) => `Choose a range of at most ${maxRangeDays} days.`,\n    summary: ({ from, to }) => `${isoToMasked(from, dayMask)} – ${isoToMasked(to, dayMask)}`,\n    calendarLabel: EN_US_UI_LABELS.dateRangePicker.calendar,\n    dayMask,\n  };\n}\n\n/** The line under the fields: the chosen window, or why there isn't one. */\nexport function statusMessage(\n  status: DateRangeStatus,\n  messages: DateRangePickerMessages,\n  maxRangeDays: number | undefined,\n): string {\n  if (status.ok) return messages.summary(status.window);\n  if (status.problem === 'incomplete') return messages.incomplete;\n  if (status.problem === 'reversed') return messages.reversed;\n  return messages.overMax({ maxRangeDays: maxRangeDays ?? status.days, days: status.days });\n}\n\n/** Every quick range with its window, its length, and whether it is over cap. */\nexport function resolveQuickRanges(\n  quickRanges: QuickRange[],\n  context: QuickRangeContext,\n  maxRangeDays: number | undefined,\n): ResolvedQuickRange[] {\n  return quickRanges.map((quickRange) => {\n    const window = quickRange.resolve(context);\n    const days = dayCount(window.from, window.to);\n    return {\n      ...quickRange,\n      window,\n      days,\n      overMax: maxRangeDays !== undefined && days > maxRangeDays,\n    };\n  });\n}\n\n/** The quick range the draft currently IS, if it is exactly one of them. */\nexport function activeQuickRangeId(\n  options: ResolvedQuickRange[],\n  draft: DateRangeDraft,\n): string | undefined {\n  return options.find(\n    (option) => option.window.from === draft.from && option.window.to === draft.to,\n  )?.id;\n}\n"],"mappings":";;;;;;;;;;;;AA8BO,SAAS,gBACd,OACA,cACiB;AACjB,QAAM,EAAE,MAAM,GAAG,IAAI;AACrB,MAAI,CAAC,QAAQ,CAAC,GAAI,QAAO,EAAE,IAAI,OAAO,SAAS,cAAc,MAAM,EAAE;AACrE,MAAI,WAAW,MAAM,EAAE,EAAG,QAAO,EAAE,IAAI,OAAO,SAAS,YAAY,MAAM,EAAE;AAE3E,QAAM,OAAO,SAAS,MAAM,EAAE;AAC9B,MAAI,iBAAiB,UAAa,OAAO,cAAc;AACrD,WAAO,EAAE,IAAI,OAAO,SAAS,YAAY,KAAK;AAAA,EAChD;AACA,SAAO,EAAE,IAAI,MAAM,QAAQ,EAAE,MAAM,GAAG,GAAG,KAAK;AAChD;AAYO,SAAS,kBAA2C;AAKzD,QAAM,UAAU;AAChB,SAAO;AAAA,IACL,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS,CAAC,EAAE,aAAa,MAAM,6BAA6B,YAAY;AAAA,IACxE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,MAAM,OAAO,CAAC,WAAM,YAAY,IAAI,OAAO,CAAC;AAAA,IACtF,eAAe,gBAAgB,gBAAgB;AAAA,IAC/C;AAAA,EACF;AACF;AAGO,SAAS,cACd,QACA,UACA,cACQ;AACR,MAAI,OAAO,GAAI,QAAO,SAAS,QAAQ,OAAO,MAAM;AACpD,MAAI,OAAO,YAAY,aAAc,QAAO,SAAS;AACrD,MAAI,OAAO,YAAY,WAAY,QAAO,SAAS;AACnD,SAAO,SAAS,QAAQ,EAAE,cAAc,gBAAgB,OAAO,MAAM,MAAM,OAAO,KAAK,CAAC;AAC1F;AAGO,SAAS,mBACd,aACA,SACA,cACsB;AACtB,SAAO,YAAY,IAAI,CAAC,eAAe;AACrC,UAAM,SAAS,WAAW,QAAQ,OAAO;AACzC,UAAM,OAAO,SAAS,OAAO,MAAM,OAAO,EAAE;AAC5C,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,SAAS,iBAAiB,UAAa,OAAO;AAAA,IAChD;AAAA,EACF,CAAC;AACH;AAGO,SAAS,mBACd,SACA,OACoB;AACpB,SAAO,QAAQ;AAAA,IACb,CAAC,WAAW,OAAO,OAAO,SAAS,MAAM,QAAQ,OAAO,OAAO,OAAO,MAAM;AAAA,EAC9E,GAAG;AACL;","names":[]}