@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-N2GEKC4J.js

@@ -0,0 +1,111 @@
+import {
+  captionSx,
+  counterSx
+} from "./chunk-3KA6MYIR.js";
+import {
+  onMedia
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Lightbox/LightboxStage.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import DialogContent from "@mui/material/DialogContent/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STAGE_SX = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  position: "relative",
+  height: "100vh",
+  overflow: "hidden"
+};
+var MEDIA_BOX_SX = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%"
+};
+var LightboxStage = ({
+  items,
+  currentItem,
+  currentIndex,
+  isLoading,
+  showCaptions,
+  thumbnails,
+  testId,
+  media,
+  thumbnailStrip
+}) => /* @__PURE__ */ jsxs(
+  DialogContent,
+  {
+    sx: STAGE_SX,
+    "data-testid": testId("content"),
+    children: [
+      isLoading && /* @__PURE__ */ jsx(
+        CircularProgress,
+        {
+          sx: { position: "absolute", color: onMedia, zIndex: 999 },
+          "data-testid": testId("loading")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: MEDIA_BOX_SX,
+          "data-testid": testId("image-container"),
+          children: media
+        }
+      ),
+      showCaptions && currentItem?.caption && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          id: "lightbox-description",
+          sx: {
+            ...captionSx,
+            position: "absolute",
+            // Sit above the filmstrip when there is one.
+            bottom: sxRem(thumbnails ? 120 : 16),
+            left: "50%",
+            transform: "translateX(-50%)",
+            maxWidth: "80vw",
+            padding: 2
+          },
+          "data-testid": testId("caption"),
+          children: currentItem.caption
+        }
+      ),
+      items.length > 1 && /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          sx: {
+            ...counterSx,
+            position: "absolute",
+            top: sxRem(70),
+            right: sxRem(16),
+            padding: (theme) => rems(theme, 4, 8)
+          },
+          "aria-live": "polite",
+          "data-testid": testId("counter"),
+          children: [
+            currentIndex + 1,
+            " / ",
+            items.length
+          ]
+        }
+      ),
+      thumbnailStrip
+    ]
+  }
+);
+
+export {
+  LightboxStage
+};
+//# sourceMappingURL=chunk-N2GEKC4J.js.map

package/dist/chunk-N2GEKC4J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/LightboxStage.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nimport { captionSx, counterSx } from './Lightbox.constants';\nimport type { LightboxItem } from './Lightbox.types';\nimport { onMedia } from '../../../tokens/ink';\nimport { rems, sxRem } from '../../../tokens/relative';\n\ntype TestId = (suffix: string) => string;\n\nexport interface LightboxStageProps {\n  items: LightboxItem[];\n  currentItem?: LightboxItem;\n  currentIndex: number;\n  isLoading: boolean;\n  showCaptions: boolean;\n  thumbnails: boolean;\n  testId: TestId;\n  media: ReactNode;\n  thumbnailStrip: ReactNode;\n}\n\nconst STAGE_SX = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  padding: 0,\n  position: 'relative',\n  height: '100vh',\n  overflow: 'hidden',\n} as const;\n\nconst MEDIA_BOX_SX = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  height: '100%',\n} as const;\n\n// The viewport itself: the media, whatever floats over it, and the filmstrip.\nexport const LightboxStage: FC<LightboxStageProps> = ({\n  items,\n  currentItem,\n  currentIndex,\n  isLoading,\n  showCaptions,\n  thumbnails,\n  testId,\n  media,\n  thumbnailStrip,\n}) => (\n  <DialogContent\n    sx={STAGE_SX}\n    data-testid={testId('content')}\n  >\n    {isLoading && (\n      <CircularProgress\n        sx={{ position: 'absolute', color: onMedia, zIndex: 999 }}\n        data-testid={testId('loading')}\n      />\n    )}\n\n    <Box\n      sx={MEDIA_BOX_SX}\n      data-testid={testId('image-container')}\n    >\n      {media}\n    </Box>\n\n    {showCaptions && currentItem?.caption && (\n      <Typography\n        id=\"lightbox-description\"\n        sx={{\n          ...captionSx,\n          position: 'absolute',\n          // Sit above the filmstrip when there is one.\n          bottom: sxRem(thumbnails ? 120 : 16),\n          left: '50%',\n          transform: 'translateX(-50%)',\n          maxWidth: '80vw',\n          padding: 2,\n        }}\n        data-testid={testId('caption')}\n      >\n        {currentItem.caption}\n      </Typography>\n    )}\n\n    {items.length > 1 && (\n      <Typography\n        sx={{\n          ...counterSx,\n          position: 'absolute',\n          top: sxRem(70),\n          right: sxRem(16),\n          padding: (theme: Theme) => rems(theme, 4, 8),\n        }}\n        aria-live=\"polite\"\n        data-testid={testId('counter')}\n      >\n        {currentIndex + 1} / {items.length}\n      </Typography>\n    )}\n\n    {thumbnailStrip}\n  </DialogContent>\n);\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAC1B,OAAO,gBAAgB;AA2DjB,cAiCA,YAjCA;AAnCN,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AACZ;AAEA,IAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,QAAQ;AACV;AAGO,IAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,IACJ,eAAa,OAAO,SAAS;AAAA,IAE5B;AAAA,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,EAAE,UAAU,YAAY,OAAO,SAAS,QAAQ,IAAI;AAAA,UACxD,eAAa,OAAO,SAAS;AAAA;AAAA,MAC/B;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,eAAa,OAAO,iBAAiB;AAAA,UAEpC;AAAA;AAAA,MACH;AAAA,MAEC,gBAAgB,aAAa,WAC5B;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,IAAI;AAAA,YACF,GAAG;AAAA,YACH,UAAU;AAAA;AAAA,YAEV,QAAQ,MAAM,aAAa,MAAM,EAAE;AAAA,YACnC,MAAM;AAAA,YACN,WAAW;AAAA,YACX,UAAU;AAAA,YACV,SAAS;AAAA,UACX;AAAA,UACA,eAAa,OAAO,SAAS;AAAA,UAE5B,sBAAY;AAAA;AAAA,MACf;AAAA,MAGD,MAAM,SAAS,KACd;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,MAAM,EAAE;AAAA,YACb,OAAO,MAAM,EAAE;AAAA,YACf,SAAS,CAAC,UAAiB,KAAK,OAAO,GAAG,CAAC;AAAA,UAC7C;AAAA,UACA,aAAU;AAAA,UACV,eAAa,OAAO,SAAS;AAAA,UAE5B;AAAA,2BAAe;AAAA,YAAE;AAAA,YAAI,MAAM;AAAA;AAAA;AAAA,MAC9B;AAAA,MAGD;AAAA;AAAA;AACH;","names":[]}

package/dist/chunk-N5GVW6RO.js

@@ -0,0 +1,184 @@
+import {
+  DEFAULT_QUICK_RANGES
+} from "./chunk-QKLSHNOH.js";
+import {
+  useDateRangePicker
+} from "./chunk-2LIRGFEK.js";
+import {
+  DateRangeQuickList
+} from "./chunk-6KKQHJE7.js";
+import {
+  DateRangeFields
+} from "./chunk-NR5TW4AH.js";
+import {
+  toLocalDay
+} from "./chunk-FRAVVI4A.js";
+import {
+  Calendar
+} from "./chunk-UN5INW6K.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-N5GVW6RO.js.map

package/dist/chunk-N5GVW6RO.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 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-NB3FGWU4.js

@@ -0,0 +1,132 @@
+import {
+  DENSITY_ROW_PADDING
+} from "./chunk-PMOEG36E.js";
+import {
+  CellConfigProvider,
+  cellTracks
+} from "./chunk-COYGTEN5.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/list-card-rails.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+function metaRail(columns) {
+  return `minmax(max-content, ${Math.max(columns, 1)}fr)`;
+}
+function contentRails(metaColumns) {
+  return metaColumns > 0 ? { caption: "minmax(0, auto)", meta: metaRail(metaColumns) } : { caption: "minmax(0, 1fr)", meta: "auto" };
+}
+var DEFAULT_RAILS = {
+  disclose: "auto",
+  drag: "auto",
+  select: "auto",
+  leading: "auto",
+  // Two is the canonical row (a date and a method); a list carrying a different
+  // number says so with `metaColumns`, and a standalone card counts its own.
+  ...contentRails(2),
+  // `max-content` on the value, so the rail is as wide as the widest amount in
+  // the list and no wider — a fixed px guess is either clipping or dead space.
+  // NOT an `fr`: the value's whole promise is a fixed right edge, and a rail
+  // that grows with the spare width moves that edge on every list.
+  value: "max-content",
+  actions: "auto"
+};
+var ListRailsContext = createContext(null);
+function useListRails() {
+  return useContext(ListRailsContext);
+}
+function railsTemplate(rails) {
+  return [
+    rails.disclose,
+    rails.drag,
+    rails.select,
+    rails.leading,
+    rails.caption,
+    rails.meta,
+    rails.value,
+    rails.actions
+  ].filter((rail) => rail != null).join(" ");
+}
+var RAIL_GAP = 3;
+var RAIL_GAP_PX = RAIL_GAP * 8;
+function railsTemplateFor(gutters, metaColumns) {
+  return railsTemplate({
+    ...DEFAULT_RAILS,
+    // Standalone, the card can simply COUNT its pairs — no `metaColumns` to be
+    // told, and no guess.
+    ...contentRails(metaColumns),
+    ...gutters.disclose ? {} : { disclose: null },
+    ...gutters.drag ? {} : { drag: null },
+    ...gutters.select ? {} : { select: null }
+  });
+}
+var RAIL_COUNT = 8;
+var CELL_FIXED_RAILS = 4;
+function cellRailsTemplate(cells) {
+  return [
+    DEFAULT_RAILS.disclose,
+    DEFAULT_RAILS.drag,
+    DEFAULT_RAILS.select,
+    DEFAULT_RAILS.leading,
+    ...cells,
+    DEFAULT_RAILS.actions
+  ].join(" ");
+}
+function cellRailCount(cells) {
+  return CELL_FIXED_RAILS + cells + 1;
+}
+function ListCardGroup({
+  children,
+  density = "cozy",
+  cells,
+  metaColumns,
+  rails,
+  reserveGutters = true,
+  gap,
+  dataTestId
+}) {
+  const resolved = {
+    ...DEFAULT_RAILS,
+    ...metaColumns == null ? {} : contentRails(metaColumns),
+    ...rails
+  };
+  const configured = cells != null && cells.length > 0;
+  const template = configured ? cellRailsTemplate(cellTracks(cells)) : railsTemplate(resolved);
+  const railCount = configured ? cellRailCount(cells.length) : RAIL_COUNT;
+  return /* @__PURE__ */ jsx(ListRailsContext.Provider, { value: { density, reserveGutters, railCount }, children: /* @__PURE__ */ jsx(CellConfigProvider, { cells, children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      "data-testid": dataTestId,
+      sx: {
+        // The query container for every row inside it — a row cannot be one
+        // itself and a subgrid at the same time (containment drops subgrid).
+        // Every row in a list is the same width anyway, so the group is the
+        // honest place to ask the question.
+        containerType: "inline-size",
+        display: "grid",
+        gridTemplateColumns: template,
+        alignItems: "center",
+        rowGap: gap ?? DENSITY_ROW_PADDING[density]
+      },
+      children
+    }
+  ) }) });
+}
+
+export {
+  metaRail,
+  contentRails,
+  DEFAULT_RAILS,
+  useListRails,
+  railsTemplate,
+  RAIL_GAP,
+  RAIL_GAP_PX,
+  railsTemplateFor,
+  RAIL_COUNT,
+  cellRailsTemplate,
+  cellRailCount,
+  ListCardGroup
+};
+//# sourceMappingURL=chunk-NB3FGWU4.js.map

package/dist/chunk-NCPWLHZT.js

@@ -0,0 +1,77 @@
+import {
+  Avatar
+} from "./chunk-PGPPN63I.js";
+import {
+  Card
+} from "./chunk-N6CSXHFJ.js";
+import {
+  Button
+} from "./chunk-2EAAWOZ2.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+
+// src/user-avatar/user-avatar.tsx
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0]?.substring(0, 2).toUpperCase() ?? "";
+  }
+  return ((parts[0]?.charAt(0) ?? "") + (parts[parts.length - 1]?.charAt(0) ?? "")).toUpperCase();
+}
+function UserAvatar({
+  src,
+  name,
+  size = "md",
+  onClick,
+  interactive = false
+}) {
+  const fallbackText = name ? getInitials(name) : "?";
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      src: src ?? void 0,
+      alt: name ?? "User avatar",
+      fallback: fallbackText,
+      size,
+      variant: "circle",
+      interactive: interactive || !!onClick,
+      onClick
+    }
+  );
+}
+function UserMenu({ user, onSignOut, copy }) {
+  return /* @__PURE__ */ jsx(Card, { variant: "elevated", borderRadius: "md", children: /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+    /* @__PURE__ */ jsx(
+      UserAvatar,
+      {
+        src: user.image,
+        name: user.name,
+        size: "md"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, sx: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx(Text, { weight: "semibold", size: "sm", children: user.name ?? "User" }),
+      user.email && /* @__PURE__ */ jsx(Text, { color: "secondary", size: "xs", children: user.email })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        color: "danger",
+        size: "sm",
+        onClick: onSignOut,
+        children: copy.signOut
+      }
+    )
+  ] }) }) });
+}
+
+export {
+  UserAvatar,
+  UserMenu
+};
+//# sourceMappingURL=chunk-NCPWLHZT.js.map