@12-apps/ui 6.97.1 → 6.98.1

package/dist/{chunk-WW3F7DCX.js → chunk-IFOHCY4O.js}

@@ -1,6 +1,6 @@
 import {
   GridToolbar
-} from "./chunk-LV6AD6XC.js";
+} from "./chunk-FT3LJZWZ.js";
 
 // src/components/data-display/DataViews/data-views-shell-toolbar.tsx
 import { jsx } from "react/jsx-runtime";
@@ -68,4 +68,4 @@ function ShellToolbar({
 export {
   ShellToolbar
 };
-//# sourceMappingURL=chunk-WW3F7DCX.js.map
+//# sourceMappingURL=chunk-IFOHCY4O.js.map

package/dist/{chunk-S46LGAQ2.js → chunk-IJVBLU25.js}

@@ -1,6 +1,6 @@
 import {
   SectionNavBar
-} from "./chunk-F7LBTMCA.js";
+} from "./chunk-ULC4SCFC.js";
 import {
   SectionNavRail
 } from "./chunk-SNWCT6JN.js";
@@ -55,4 +55,4 @@ function SectionNav({
 export {
   SectionNav
 };
-//# sourceMappingURL=chunk-S46LGAQ2.js.map
+//# sourceMappingURL=chunk-IJVBLU25.js.map

package/dist/{chunk-ARGVUTTL.js → chunk-IPVGWENM.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-AA2X5GOT.js";
 import {
   EN_US_UI_LABELS
-} from "./chunk-XOXXG7Q5.js";
+} from "./chunk-VWKMN3ZZ.js";
 
 // src/en-US.data-display.ts
 var EN_US_LIGHTBOX_COPY = {
@@ -285,4 +285,4 @@ export {
   EN_US_DATA_STATE_COPY,
   EN_US_DATA_VIEWS_COPY
 };
-//# sourceMappingURL=chunk-ARGVUTTL.js.map
+//# sourceMappingURL=chunk-IPVGWENM.js.map

package/dist/{chunk-MPWA55CF.js → chunk-IXXB7CTR.js}

@@ -1,13 +1,13 @@
 import {
   isoToMasked
-} from "./chunk-L6YTVXGN.js";
+} from "./chunk-VCYYL23C.js";
 import {
   dayCount,
   isAfterDay
 } from "./chunk-SUTOAW7I.js";
 import {
   EN_US_UI_LABELS
-} from "./chunk-XOXXG7Q5.js";
+} from "./chunk-VWKMN3ZZ.js";
 
 // src/components/form/DateRangePicker/DateRangePicker.range.ts
 function resolveDayRange(draft, maxRangeDays) {
@@ -27,6 +27,7 @@ function defaultMessages() {
     to: "End date",
     quickRanges: "Quick ranges",
     incomplete: "Choose both dates.",
+    openEnded: EN_US_UI_LABELS.dateRangePicker.openEnded,
     reversed: "The end date must be on or after the start date.",
     overMax: ({ maxRangeDays }) => `Choose a range of at most ${maxRangeDays} days.`,
     summary: ({ from, to }) => `${isoToMasked(from, dayMask)} \u2013 ${isoToMasked(to, dayMask)}`,
@@ -34,9 +35,12 @@ function defaultMessages() {
     dayMask
   };
 }
-function statusMessage(status, messages, maxRangeDays) {
+function statusMessage(status, messages, maxRangeDays, openEnd = { enabled: false, draft: { from: null, to: null } }) {
   if (status.ok) return messages.summary(status.window);
-  if (status.problem === "incomplete") return messages.incomplete;
+  if (status.problem === "incomplete") {
+    const openEnded = openEnd.enabled && openEnd.draft.from !== null && openEnd.draft.to === null;
+    return openEnded ? messages.openEnded ?? messages.incomplete : messages.incomplete;
+  }
   if (status.problem === "reversed") return messages.reversed;
   return messages.overMax({ maxRangeDays: maxRangeDays ?? status.days, days: status.days });
 }
@@ -65,4 +69,4 @@ export {
   resolveQuickRanges,
   activeQuickRangeId
 };
-//# sourceMappingURL=chunk-MPWA55CF.js.map
+//# sourceMappingURL=chunk-IXXB7CTR.js.map

package/dist/chunk-IXXB7CTR.js.map

@@ -0,0 +1 @@
+{"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    openEnded: EN_US_UI_LABELS.dateRangePicker.openEnded,\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/**\n * The line under the fields: the chosen window, or why there isn't one. With\n * `openEnd`, a start with no end is an answer of its own and is said as one.\n */\nexport function statusMessage(\n  status: DateRangeStatus,\n  messages: DateRangePickerMessages,\n  maxRangeDays: number | undefined,\n  openEnd: { enabled: boolean; draft: DateRangeDraft } = { enabled: false, draft: { from: null, to: null } },\n): string {\n  if (status.ok) return messages.summary(status.window);\n  if (status.problem === 'incomplete') {\n    const openEnded = openEnd.enabled && openEnd.draft.from !== null && openEnd.draft.to === null;\n    return openEnded ? (messages.openEnded ?? messages.incomplete) : messages.incomplete;\n  }\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,WAAW,gBAAgB,gBAAgB;AAAA,IAC3C,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;AAMO,SAAS,cACd,QACA,UACA,cACA,UAAuD,EAAE,SAAS,OAAO,OAAO,EAAE,MAAM,MAAM,IAAI,KAAK,EAAE,GACjG;AACR,MAAI,OAAO,GAAI,QAAO,SAAS,QAAQ,OAAO,MAAM;AACpD,MAAI,OAAO,YAAY,cAAc;AACnC,UAAM,YAAY,QAAQ,WAAW,QAAQ,MAAM,SAAS,QAAQ,QAAQ,MAAM,OAAO;AACzF,WAAO,YAAa,SAAS,aAAa,SAAS,aAAc,SAAS;AAAA,EAC5E;AACA,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":[]}

package/dist/{chunk-MWXZXCVX.js → chunk-J43PARXM.js}

@@ -1,18 +1,18 @@
-import {
-  usePanelChrome
-} from "./chunk-J4UA744J.js";
 import {
   ModalPanelContents,
   modalAriaIds,
   resolveModalContent
-} from "./chunk-EYFDIUVR.js";
+} from "./chunk-M4G4LRQK.js";
 import {
   STYLE_ONLY_PROPS,
   dialogRootStyles
 } from "./chunk-YKQA4NPM.js";
+import {
+  usePanelChrome
+} from "./chunk-J4UA744J.js";
 import {
   EN_US_UI_LABELS
-} from "./chunk-XOXXG7Q5.js";
+} from "./chunk-VWKMN3ZZ.js";
 
 // src/components/feedback/StackedModal/StackedModal.tsx
 import Dialog from "@mui/material/Dialog/index.js";
@@ -179,4 +179,4 @@ var StackedModal = (props) => {
 export {
   StackedModal
 };
-//# sourceMappingURL=chunk-MWXZXCVX.js.map
+//# sourceMappingURL=chunk-J43PARXM.js.map

package/dist/{chunk-UYKIUUWP.js → chunk-JJTJ7DCV.js}

@@ -1,6 +1,6 @@
 import {
   EN_US_UI_LABELS
-} from "./chunk-XOXXG7Q5.js";
+} from "./chunk-VWKMN3ZZ.js";
 import {
   shadowInk
 } from "./chunk-XJAD6E3V.js";
@@ -170,4 +170,4 @@ export {
   DrawerHeader,
   DrawerContent
 };
-//# sourceMappingURL=chunk-UYKIUUWP.js.map
+//# sourceMappingURL=chunk-JJTJ7DCV.js.map

package/dist/{chunk-HQCZT6TO.js → chunk-JVOEVTCZ.js}

@@ -1,11 +1,11 @@
-import {
-  chartAxisValueFormatter,
-  chartValueFormatter
-} from "./chunk-6GPNZSAE.js";
 import {
   getChartSpecRenderer,
   getRegisteredChartSpecTypes
 } from "./chunk-WKUA6P3W.js";
+import {
+  chartAxisValueFormatter,
+  chartValueFormatter
+} from "./chunk-6GPNZSAE.js";
 
 // src/components/data-display/Chart/chart-spec.ts
 var CHART_SEMANTIC_COLORS = [
@@ -151,4 +151,4 @@ export {
   parseChartSpec,
   specToChartProps
 };
-//# sourceMappingURL=chunk-HQCZT6TO.js.map
+//# sourceMappingURL=chunk-JVOEVTCZ.js.map

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

@@ -3,14 +3,31 @@ import {
   defaultMessages,
   resolveDayRange,
   resolveQuickRanges
-} from "./chunk-MPWA55CF.js";
+} from "./chunk-IXXB7CTR.js";
 import {
   toDayString,
   todayIn
 } from "./chunk-SUTOAW7I.js";
 
 // src/components/form/DateRangePicker/DateRangePicker.hooks.ts
-import { useId, useMemo, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+function cameFromPicker(value, emitted) {
+  if (emitted === null) return false;
+  const kept = (bound) => emitted[bound] === null || emitted[bound] === value[bound];
+  return kept("from") && kept("to");
+}
+function useFollowValue(enabled, value, lastEmitted, setViewNonce) {
+  const previous = useRef(value);
+  useEffect(() => {
+    const before = previous.current;
+    previous.current = value;
+    if (!enabled || before.from === value.from && before.to === value.to) return;
+    const emitted = lastEmitted.current;
+    lastEmitted.current = null;
+    if (cameFromPicker(value, emitted)) return;
+    setViewNonce((nonce) => nonce + 1);
+  }, [enabled, value, lastEmitted, setViewNonce]);
+}
 function useDateRangePicker({
   value,
   onChange,
@@ -19,7 +36,8 @@ function useDateRangePicker({
   maxRangeDays,
   weekStartsOn,
   quickRanges,
-  messages
+  messages,
+  followValue = false
 }) {
   const statusId = useId();
   const [viewNonce, setViewNonce] = useState(0);
@@ -30,7 +48,10 @@ function useDateRangePicker({
     [quickRanges, today, weekStartsOn, maxRangeDays]
   );
   const status = useMemo(() => resolveDayRange(value, maxRangeDays), [value, maxRangeDays]);
+  const lastEmitted = useRef(null);
+  useFollowValue(followValue, value, lastEmitted, setViewNonce);
   const emit = (next, source, quickRangeId) => {
+    lastEmitted.current = next;
     onChange(next, {
       source,
       ...quickRangeId ? { quickRangeId } : {},
@@ -69,4 +90,4 @@ function useDateRangePicker({
 export {
   useDateRangePicker
 };
-//# sourceMappingURL=chunk-RZ3P4X2I.js.map
+//# sourceMappingURL=chunk-K62L5JFC.js.map

package/dist/chunk-K62L5JFC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/DateRangePicker/DateRangePicker.hooks.ts"],"sourcesContent":["/**\n * Everything the picker derives and every way its range can move, kept out of\n * the component so that file is a layout and this one is the behaviour — the\n * same split `Calendar.hooks.ts` uses next door.\n */\nimport { useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { toDayString, todayIn } from './DateRangePicker.dates';\nimport {\n  activeQuickRangeId,\n  defaultMessages,\n  resolveDayRange,\n  resolveQuickRanges,\n} from './DateRangePicker.range';\nimport type {\n  DateRangeChangeMeta,\n  DateRangeDraft,\n  DateRangePickerState,\n  UseDateRangePickerArgs,\n} from './DateRangePicker.types';\n\n/**\n * Whether `value` is what the picker last handed out — or that tap's draft\n * carried on by the consumer: every bound the tap chose kept, a bound it left\n * open filled in (a consumer that keeps an end the tap would have dropped).\n * Either way the grid under the pointer must not move, nor lose its focus.\n */\nfunction cameFromPicker(value: DateRangeDraft, emitted: DateRangeDraft | null): boolean {\n  if (emitted === null) return false;\n  const kept = (bound: 'from' | 'to'): boolean => emitted[bound] === null || emitted[bound] === value[bound];\n  return kept('from') && kept('to');\n}\n\n/**\n * Bump the view nonce when the value moves and the picker did not move it —\n * a consumer's own field committed a day. Skips the mount and the picker's own\n * emissions, so a click in the grid never remounts the grid under it. An\n * emission is read once: the change after it is the consumer's own.\n */\nfunction useFollowValue(\n  enabled: boolean,\n  value: DateRangeDraft,\n  lastEmitted: { current: DateRangeDraft | null },\n  setViewNonce: (update: (nonce: number) => number) => void,\n): void {\n  const previous = useRef(value);\n  useEffect(() => {\n    const before = previous.current;\n    previous.current = value;\n    if (!enabled || (before.from === value.from && before.to === value.to)) return;\n    const emitted = lastEmitted.current;\n    lastEmitted.current = null;\n    if (cameFromPicker(value, emitted)) return;\n    setViewNonce((nonce) => nonce + 1);\n  }, [enabled, value, lastEmitted, setViewNonce]);\n}\n\nexport function useDateRangePicker({\n  value,\n  onChange,\n  timeZone,\n  now,\n  maxRangeDays,\n  weekStartsOn,\n  quickRanges,\n  messages,\n  followValue = false,\n}: UseDateRangePickerArgs): DateRangePickerState {\n  const statusId = useId();\n  // `Calendar` reads which month to open on from the range it is handed, and\n  // only when it MOUNTS. Bumping this key remounts it, which is how the other\n  // two views move it. It changes for a quick pick and for a typed date and\n  // NEVER for a click inside the grid — a calendar that jumped under the\n  // pointer picking in it would be unusable.\n  const [viewNonce, setViewNonce] = useState(0);\n\n  const copy = useMemo(() => ({ ...defaultMessages(), ...messages }), [messages]);\n  const today = useMemo(() => todayIn(timeZone, now ?? new Date()), [timeZone, now]);\n  const options = useMemo(\n    () => resolveQuickRanges(quickRanges, { today, weekStartsOn }, maxRangeDays),\n    [quickRanges, today, weekStartsOn, maxRangeDays],\n  );\n  const status = useMemo(() => resolveDayRange(value, maxRangeDays), [value, maxRangeDays]);\n  // What the picker itself last handed out: a value equal to it came FROM here\n  // (a click in the grid), and must not move the grid under the pointer.\n  const lastEmitted = useRef<DateRangeDraft | null>(null);\n  useFollowValue(followValue, value, lastEmitted, setViewNonce);\n\n  const emit = (\n    next: DateRangeDraft,\n    source: DateRangeChangeMeta['source'],\n    quickRangeId?: string,\n  ): void => {\n    lastEmitted.current = next;\n    onChange(next, {\n      source,\n      ...(quickRangeId ? { quickRangeId } : {}),\n      // Judged here, once. A caller left to re-derive \"is this usable\" is a\n      // second opinion able to disagree with the message on screen.\n      status: resolveDayRange(next, maxRangeDays),\n    });\n  };\n\n  return {\n    copy,\n    options,\n    activeId: activeQuickRangeId(options, value),\n    status,\n    statusId,\n    viewNonce,\n    pickQuick: (option) => {\n      setViewNonce((nonce) => nonce + 1);\n      emit({ from: option.window.from, to: option.window.to }, 'quick', option.id);\n    },\n    editBound: (which, bound) => {\n      setViewNonce((nonce) => nonce + 1);\n      emit({ ...value, [which]: bound }, which);\n    },\n    pickOnCalendar: (range) => {\n      emit(\n        {\n          from: range.start ? toDayString(range.start) : null,\n          to: range.end ? toDayString(range.end) : null,\n        },\n        'calendar',\n      );\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAKA,SAAS,WAAW,OAAO,SAAS,QAAQ,gBAAgB;AAsB5D,SAAS,eAAe,OAAuB,SAAyC;AACtF,MAAI,YAAY,KAAM,QAAO;AAC7B,QAAM,OAAO,CAAC,UAAkC,QAAQ,KAAK,MAAM,QAAQ,QAAQ,KAAK,MAAM,MAAM,KAAK;AACzG,SAAO,KAAK,MAAM,KAAK,KAAK,IAAI;AAClC;AAQA,SAAS,eACP,SACA,OACA,aACA,cACM;AACN,QAAM,WAAW,OAAO,KAAK;AAC7B,YAAU,MAAM;AACd,UAAM,SAAS,SAAS;AACxB,aAAS,UAAU;AACnB,QAAI,CAAC,WAAY,OAAO,SAAS,MAAM,QAAQ,OAAO,OAAO,MAAM,GAAK;AACxE,UAAM,UAAU,YAAY;AAC5B,gBAAY,UAAU;AACtB,QAAI,eAAe,OAAO,OAAO,EAAG;AACpC,iBAAa,CAAC,UAAU,QAAQ,CAAC;AAAA,EACnC,GAAG,CAAC,SAAS,OAAO,aAAa,YAAY,CAAC;AAChD;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAAiD;AAC/C,QAAM,WAAW,MAAM;AAMvB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAE5C,QAAM,OAAO,QAAQ,OAAO,EAAE,GAAG,gBAAgB,GAAG,GAAG,SAAS,IAAI,CAAC,QAAQ,CAAC;AAC9E,QAAM,QAAQ,QAAQ,MAAM,QAAQ,UAAU,OAAO,oBAAI,KAAK,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC;AACjF,QAAM,UAAU;AAAA,IACd,MAAM,mBAAmB,aAAa,EAAE,OAAO,aAAa,GAAG,YAAY;AAAA,IAC3E,CAAC,aAAa,OAAO,cAAc,YAAY;AAAA,EACjD;AACA,QAAM,SAAS,QAAQ,MAAM,gBAAgB,OAAO,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC;AAGxF,QAAM,cAAc,OAA8B,IAAI;AACtD,iBAAe,aAAa,OAAO,aAAa,YAAY;AAE5D,QAAM,OAAO,CACX,MACA,QACA,iBACS;AACT,gBAAY,UAAU;AACtB,aAAS,MAAM;AAAA,MACb;AAAA,MACA,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;AAAA;AAAA;AAAA,MAGvC,QAAQ,gBAAgB,MAAM,YAAY;AAAA,IAC5C,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU,mBAAmB,SAAS,KAAK;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,CAAC,WAAW;AACrB,mBAAa,CAAC,UAAU,QAAQ,CAAC;AACjC,WAAK,EAAE,MAAM,OAAO,OAAO,MAAM,IAAI,OAAO,OAAO,GAAG,GAAG,SAAS,OAAO,EAAE;AAAA,IAC7E;AAAA,IACA,WAAW,CAAC,OAAO,UAAU;AAC3B,mBAAa,CAAC,UAAU,QAAQ,CAAC;AACjC,WAAK,EAAE,GAAG,OAAO,CAAC,KAAK,GAAG,MAAM,GAAG,KAAK;AAAA,IAC1C;AAAA,IACA,gBAAgB,CAAC,UAAU;AACzB;AAAA,QACE;AAAA,UACE,MAAM,MAAM,QAAQ,YAAY,MAAM,KAAK,IAAI;AAAA,UAC/C,IAAI,MAAM,MAAM,YAAY,MAAM,GAAG,IAAI;AAAA,QAC3C;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/{chunk-2365CQJU.js → chunk-KAQDWEG6.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk-NK4T624E.js";
 import {
   EN_US_UI_LABELS
-} from "./chunk-XOXXG7Q5.js";
+} from "./chunk-VWKMN3ZZ.js";
 import {
   withDefaults
 } from "./chunk-HPK33ACY.js";
@@ -151,4 +151,4 @@ SettingsLayout.displayName = "SettingsLayout";
 export {
   SettingsLayout
 };
-//# sourceMappingURL=chunk-2365CQJU.js.map
+//# sourceMappingURL=chunk-KAQDWEG6.js.map

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

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

package/dist/chunk-KNW63H63.js

@@ -0,0 +1,263 @@
+import {
+  DEFAULT_QUICK_RANGES
+} from "./chunk-R26WP22N.js";
+import {
+  useDateRangePicker
+} from "./chunk-K62L5JFC.js";
+import {
+  CALENDAR_CLASS,
+  FLAT_CALENDAR,
+  fieldsColumnSx,
+  frameSx
+} from "./chunk-SIY64A6O.js";
+import {
+  besideLayout,
+  useMeasuredWidth
+} from "./chunk-QAF76E6U.js";
+import {
+  DateRangeQuickList
+} from "./chunk-6KKQHJE7.js";
+import {
+  DateRangeFields
+} from "./chunk-EASEJDBQ.js";
+import {
+  toLocalDay
+} from "./chunk-SUTOAW7I.js";
+import {
+  Calendar
+} from "./chunk-YQMJJ7AL.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 { useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ROOT_SX = {
+  display: "inline-flex",
+  flexDirection: "column",
+  gap: 2,
+  p: 2,
+  maxWidth: "100%",
+  ...FLAT_CALENDAR
+};
+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;
+}
+var EVERY_DAY = () => true;
+function RangeCalendar({
+  calendarLabel,
+  picker,
+  value,
+  locale,
+  weekStartsOn,
+  months,
+  maxRangeDays,
+  labels,
+  display
+}) {
+  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,
+      ...labels ? { labels } : {},
+      showOutsideDays: display.showOutsideDays,
+      todayIndicator: display.todayIndicator,
+      allowSameDayRange: display.allowSameDayRange,
+      fullWidth: display.fullWidth,
+      ...display.disabled === true ? { isDateDisabled: EVERY_DAY, navigationDisabled: true } : {}
+    },
+    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 TypedHalf({
+  props,
+  picker,
+  placement
+}) {
+  const disabled = props.disabled === true;
+  if (props.renderFields) return /* @__PURE__ */ jsx(Fragment, { children: props.renderFields({ placement, disabled }) });
+  return /* @__PURE__ */ jsx(
+    DateRangeFields,
+    {
+      value: props.value,
+      status: picker.status,
+      messages: picker.copy,
+      maxRangeDays: props.maxRangeDays,
+      onEdit: picker.editBound,
+      statusId: picker.statusId,
+      dataTestId: props.dataTestId ?? "date-range-picker",
+      openEnd: props.openEnd ?? false,
+      stacked: placement === "beside",
+      disabled
+    }
+  );
+}
+function usePickerLayout(props) {
+  const theme = useTheme();
+  const viewportMonths = useMonthCount(props.numberOfMonths);
+  const root = useRef(null);
+  const beside = props.fieldsPlacement === "beside";
+  const width = useMeasuredWidth(root, beside);
+  if (!beside || width === null) return { root, months: viewportMonths, placement: "below" };
+  const layout = besideLayout(width, props.numberOfMonths ?? 2, theme);
+  return { root, months: layout.months, placement: layout.placement };
+}
+function InPageLayout({
+  props,
+  picker,
+  layout,
+  body
+}) {
+  const sideBySide = layout.placement === "beside";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: layout.root,
+      className: props.className,
+      "data-testid": props.dataTestId ?? "date-range-picker",
+      "data-fields-placement": layout.placement,
+      ...disabledGroup(props, picker),
+      sx: {
+        display: "flex",
+        flexDirection: sideBySide ? "row" : "column",
+        alignItems: sideBySide ? "flex-start" : "stretch",
+        gap: sideBySide ? 4 : 2,
+        width: "100%",
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(Paper, { variant: "outlined", sx: frameSx(sideBySide, props.fullWidth === true, layout.months ?? 1), children: body }),
+        /* @__PURE__ */ jsx(Box, { sx: fieldsColumnSx(sideBySide, props.fullWidth === true), children: /* @__PURE__ */ jsx(TypedHalf, { props, picker, placement: layout.placement }) })
+      ]
+    }
+  );
+}
+function disabledGroup(props, picker) {
+  if (props.disabled !== true) return {};
+  return { role: "group", "aria-label": props.label ?? picker.copy.calendarLabel, "aria-disabled": true };
+}
+function PopoverLayout({
+  props,
+  picker,
+  body
+}) {
+  const typed = /* @__PURE__ */ jsx(TypedHalf, { props, picker, placement: "below" });
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      className: props.className,
+      "data-testid": props.dataTestId ?? "date-range-picker",
+      ...disabledGroup(props, picker),
+      sx: ROOT_SX,
+      children: [
+        body,
+        props.renderFields ? typed : /* @__PURE__ */ jsx(Box, { sx: FIELDS_DIVIDER_SX, children: typed })
+      ]
+    }
+  );
+}
+function DateRangePicker(props) {
+  const { value, maxRangeDays, weekStartsOn = 0, locale = "en-US", dataTestId = "date-range-picker" } = props;
+  const picker = useDateRangePicker({
+    value,
+    onChange: props.onChange,
+    timeZone: props.timeZone,
+    now: props.now,
+    maxRangeDays,
+    weekStartsOn,
+    quickRanges: props.quickRanges ?? DEFAULT_QUICK_RANGES,
+    messages: props.messages,
+    followValue: props.renderFields !== void 0
+  });
+  const layout = usePickerLayout(props);
+  const body = /* @__PURE__ */ jsxs(Box, { sx: BODY_SX, children: [
+    /* @__PURE__ */ jsx(
+      RangeCalendar,
+      {
+        calendarLabel: picker.copy.calendarLabel,
+        picker,
+        value,
+        locale,
+        weekStartsOn,
+        months: layout.months,
+        maxRangeDays,
+        labels: props.calendarLabels,
+        display: { ...props, fullWidth: props.fieldsPlacement === "beside" && props.fullWidth === true }
+      }
+    ),
+    props.disabled === true ? null : /* @__PURE__ */ jsx(QuickColumn, { picker, maxRangeDays, dataTestId })
+  ] });
+  if (props.fieldsPlacement === "beside") {
+    return /* @__PURE__ */ jsx(InPageLayout, { props, picker, layout, body });
+  }
+  return /* @__PURE__ */ jsx(PopoverLayout, { props, picker, body });
+}
+var DateRangePicker_default = DateRangePicker;
+
+export {
+  DateRangePicker,
+  DateRangePicker_default
+};
+//# sourceMappingURL=chunk-KNW63H63.js.map

package/dist/chunk-KNW63H63.js.map

@@ -0,0 +1 @@
+{"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, { useRef } from 'react';\n\nimport type { CalendarLabels } from '../../../copy/labels';\nimport { Calendar } from '../Calendar';\n\nimport { toLocalDay } from './DateRangePicker.dates';\nimport { useDateRangePicker } from './DateRangePicker.hooks';\nimport { CALENDAR_CLASS, FLAT_CALENDAR, fieldsColumnSx, frameSx } from './DateRangePicker.frame';\nimport { besideLayout, useMeasuredWidth, type FieldsPlacement } from './DateRangePicker.layout';\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 ROOT_SX: SxProps<Theme> = {\n  display: 'inline-flex',\n  flexDirection: 'column',\n  gap: 2,\n  p: 2,\n  maxWidth: '100%',\n  ...FLAT_CALENDAR,\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. */\n/** The calendar options a picker passes through untouched. */\ntype CalendarDisplay = Pick<\n  DateRangePickerProps,\n  'showOutsideDays' | 'todayIndicator' | 'allowSameDayRange' | 'fullWidth' | 'disabled'\n>;\n\n/** Every day, for a picker that is `disabled`. */\nconst EVERY_DAY = (): boolean => true;\n\nfunction RangeCalendar({\n  calendarLabel,\n  picker,\n  value,\n  locale,\n  weekStartsOn,\n  months,\n  maxRangeDays,\n  labels,\n  display,\n}: {\n  labels: Partial<CalendarLabels> | undefined;\n  display: CalendarDisplay;\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      {...(labels ? { labels } : {})}\n      showOutsideDays={display.showOutsideDays}\n      todayIndicator={display.todayIndicator}\n      allowSameDayRange={display.allowSameDayRange}\n      fullWidth={display.fullWidth}\n      {...(display.disabled === true ? { isDateDisabled: EVERY_DAY, navigationDisabled: true } : {})}\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\n/** The typed half: the consumer's own fields, or the built-in pair and its line. */\nfunction TypedHalf({\n  props,\n  picker,\n  placement,\n}: {\n  props: DateRangePickerProps;\n  picker: Picker;\n  placement: FieldsPlacement;\n}): React.JSX.Element {\n  const disabled = props.disabled === true;\n  if (props.renderFields) return <>{props.renderFields({ placement, disabled })}</>;\n  return (\n    <DateRangeFields\n      value={props.value}\n      status={picker.status}\n      messages={picker.copy}\n      maxRangeDays={props.maxRangeDays}\n      onEdit={picker.editBound}\n      statusId={picker.statusId}\n      dataTestId={props.dataTestId ?? 'date-range-picker'}\n      openEnd={props.openEnd ?? false}\n      stacked={placement === 'beside'}\n      disabled={disabled}\n    />\n  );\n}\n\n/**\n * How many months, and where the typed half goes. The default layout counts\n * months by the viewport, as it always did; `beside` measures the picker.\n */\nfunction usePickerLayout(props: DateRangePickerProps): {\n  root: React.RefObject<HTMLDivElement | null>;\n  months: number | undefined;\n  placement: FieldsPlacement;\n} {\n  const theme = useTheme();\n  const viewportMonths = useMonthCount(props.numberOfMonths);\n  const root = useRef<HTMLDivElement>(null);\n  const beside = props.fieldsPlacement === 'beside';\n  const width = useMeasuredWidth(root, beside);\n  if (!beside || width === null) return { root, months: viewportMonths, placement: 'below' };\n  const layout = besideLayout(width, props.numberOfMonths ?? 2, theme);\n  return { root, months: layout.months, placement: layout.placement };\n}\n\n/** The `beside` layout: the months in their own frame, the fields on the page. */\nfunction InPageLayout({\n  props,\n  picker,\n  layout,\n  body,\n}: {\n  props: DateRangePickerProps;\n  picker: Picker;\n  layout: ReturnType<typeof usePickerLayout>;\n  body: React.ReactNode;\n}): React.JSX.Element {\n  const sideBySide = layout.placement === 'beside';\n  return (\n    <Box\n      ref={layout.root}\n      className={props.className}\n      data-testid={props.dataTestId ?? 'date-range-picker'}\n      data-fields-placement={layout.placement}\n      {...disabledGroup(props, picker)}\n      sx={{\n        display: 'flex',\n        flexDirection: sideBySide ? 'row' : 'column',\n        alignItems: sideBySide ? 'flex-start' : 'stretch',\n        gap: sideBySide ? 4 : 2,\n        width: '100%',\n        minWidth: 0,\n      }}\n    >\n      <Paper variant=\"outlined\" sx={frameSx(sideBySide, props.fullWidth === true, layout.months ?? 1)}>\n        {body}\n      </Paper>\n      <Box sx={fieldsColumnSx(sideBySide, props.fullWidth === true)}>\n        <TypedHalf props={props} picker={picker} placement={layout.placement} />\n      </Box>\n    </Box>\n  );\n}\n\n/**\n * A disabled picker's root is a named GROUP (review round 6): `aria-disabled`\n * is only valid on an element with a role, and the name says what is off.\n * Enabled, the root carries neither, as it always did.\n */\nfunction disabledGroup(props: DateRangePickerProps, picker: Picker) {\n  if (props.disabled !== true) return {};\n  return { role: 'group', 'aria-label': props.label ?? picker.copy.calendarLabel, 'aria-disabled': true } as const;\n}\n\n/** The default layout: one framed block, the typed half under the months. */\nfunction PopoverLayout({\n  props,\n  picker,\n  body,\n}: {\n  props: DateRangePickerProps;\n  picker: Picker;\n  body: React.ReactNode;\n}): React.JSX.Element {\n  const typed = <TypedHalf props={props} picker={picker} placement=\"below\" />;\n  return (\n    <Paper\n      className={props.className}\n      data-testid={props.dataTestId ?? 'date-range-picker'}\n      {...disabledGroup(props, picker)}\n      sx={ROOT_SX}\n    >\n      {body}\n      {props.renderFields ? typed : <Box sx={FIELDS_DIVIDER_SX}>{typed}</Box>}\n    </Paper>\n  );\n}\n\nexport function DateRangePicker(props: DateRangePickerProps): React.JSX.Element {\n  const { value, maxRangeDays, weekStartsOn = 0, locale = 'en-US', dataTestId = 'date-range-picker' } = props;\n  const picker = useDateRangePicker({\n    value,\n    onChange: props.onChange,\n    timeZone: props.timeZone,\n    now: props.now,\n    maxRangeDays,\n    weekStartsOn,\n    quickRanges: props.quickRanges ?? DEFAULT_QUICK_RANGES,\n    messages: props.messages,\n    followValue: props.renderFields !== undefined,\n  });\n  const layout = usePickerLayout(props);\n\n  const body = (\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={layout.months}\n        maxRangeDays={maxRangeDays}\n        labels={props.calendarLabels}\n        // `fullWidth` fills the in-page frame; the popover's frame is as wide\n        // as its months, and a filling calendar in it spread past the quick\n        // column and the typed pair (FUT-4156, round 3).\n        display={{ ...props, fullWidth: props.fieldsPlacement === 'beside' && props.fullWidth === true }}\n      />\n      {props.disabled === true ? null : (\n        <QuickColumn picker={picker} maxRangeDays={maxRangeDays} dataTestId={dataTestId} />\n      )}\n    </Box>\n  );\n\n  if (props.fieldsPlacement === 'beside') {\n    return <InPageLayout props={props} picker={picker} layout={layout} body={body} />;\n  }\n  return <PopoverLayout props={props} picker={picker} body={body} />;\n}\n\nexport default DateRangePicker;\n"],"mappings":"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","names":[]}

package/dist/{chunk-PVIQDBUN.js → chunk-KUQ4XHVV.js}

@@ -1,6 +1,6 @@
 import {
   EN_US_UI_LABELS
-} from "./chunk-XOXXG7Q5.js";
+} from "./chunk-VWKMN3ZZ.js";
 import {
   fieldHeight
 } from "./chunk-RGVNXES5.js";
@@ -108,4 +108,4 @@ function ColumnsMenu({
 export {
   ColumnsMenu
 };
-//# sourceMappingURL=chunk-PVIQDBUN.js.map
+//# sourceMappingURL=chunk-KUQ4XHVV.js.map

package/dist/{chunk-DAFFZED3.js → chunk-KWBMM6MJ.js}

@@ -24,7 +24,7 @@ import {
 } from "./chunk-LV7LSPBF.js";
 import {
   EN_US_UI_LABELS
-} from "./chunk-XOXXG7Q5.js";
+} from "./chunk-VWKMN3ZZ.js";
 import {
   childTestId,
   resolveTestId,
@@ -309,4 +309,4 @@ export {
   DialogContent,
   DialogActions
 };
-//# sourceMappingURL=chunk-DAFFZED3.js.map
+//# sourceMappingURL=chunk-KWBMM6MJ.js.map

package/dist/{chunk-QPCHABOZ.js → chunk-L5YGVLPH.js}

@@ -113,7 +113,11 @@ var domPassthrough = (props) => Object.fromEntries(Object.entries(props).filter(
 var definedProps = (props) => Object.fromEntries(
   Object.entries(props).filter(([, value]) => value !== void 0)
 );
-var resolveScrollButtons = (scrollable) => scrollable ? "auto" : false;
+var resolveScrollButtons = (scrollable, scrollButtons) => {
+  if (!scrollable) return false;
+  if (typeof scrollButtons === "boolean") return scrollButtons;
+  return "auto";
+};
 var buildTabsSx = ({
   fullWidth,
   sticky,
@@ -173,8 +177,8 @@ var TabsBar = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) =
     centered: p.centered,
     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),
+    allowScrollButtonsMobile: p.allowScrollButtonsMobile ?? p.scrollable,
     textColor: p.color,
     indicatorColor: p.color,
     sx: buildTabsSx({
@@ -273,4 +277,4 @@ Tabs.displayName = "Tabs";
 export {
   Tabs
 };
-//# sourceMappingURL=chunk-QPCHABOZ.js.map
+//# sourceMappingURL=chunk-L5YGVLPH.js.map