@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-V7TPSQOH.js

@@ -0,0 +1,96 @@
+import {
+  otpSlotSx
+} from "./chunk-5QQWAIZO.js";
+import {
+  useOtpDigits
+} from "./chunk-UETHX57J.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/InputOTP/InputOTP.tsx
+import Box from "@mui/material/Box/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledOTPInput = styled(TextField, {
+  shouldForwardProp: (prop) => !["customColor", "customSize", "glass", "gradient"].includes(prop)
+})(({ theme, ...flags }) => ({ ...otpSlotSx(theme, flags) }));
+var DEFAULTS = {
+  variant: "numeric",
+  color: "primary",
+  size: "md",
+  length: 6,
+  value: "",
+  glass: false,
+  gradient: false,
+  autoFocus: false,
+  error: false,
+  disabled: false
+};
+var InputOTP = forwardRef((props, ref) => {
+  const {
+    variant,
+    color,
+    size,
+    length,
+    value,
+    onChange,
+    onComplete,
+    glass,
+    gradient,
+    autoFocus,
+    error,
+    disabled,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste } = useOtpDigits({
+    variant,
+    length,
+    value,
+    onChange,
+    onComplete
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      "data-testid": dataTestId,
+      sx: { display: "flex", gap: 1, justifyContent: "center", alignItems: "center" },
+      ...rest,
+      children: digits.map((digit, index) => /* @__PURE__ */ jsx(
+        StyledOTPInput,
+        {
+          ref: (el) => {
+            inputRefs.current[index] = el?.querySelector("input") || null;
+          },
+          customColor: color,
+          customSize: size,
+          glass,
+          gradient,
+          value: variant === "masked" ? digit ? "\u2022" : "" : digit,
+          onChange: (e) => handleInputChange(index, e.target.value),
+          onKeyDown: (e) => handleKeyDown(index, e),
+          onPaste: index === 0 ? handlePaste : void 0,
+          autoFocus: autoFocus && index === 0,
+          error,
+          disabled,
+          inputProps: {
+            maxLength: 1,
+            style: { textAlign: "center" },
+            "data-testid": dataTestId ? `${dataTestId}-slot-${index}` : void 0
+          }
+        },
+        index
+      ))
+    }
+  );
+});
+InputOTP.displayName = "InputOTP";
+
+export {
+  InputOTP
+};
+//# sourceMappingURL=chunk-V7TPSQOH.js.map

package/dist/chunk-V7TPSQOH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/InputOTP/InputOTP.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { useOtpDigits } from './InputOTP.hooks';\nimport { otpSlotSx } from './InputOTP.styles';\nimport type { OtpSlotFlags } from './InputOTP.styles';\nimport type { InputOTPProps } from './InputOTP.types';\n\nconst StyledOTPInput = styled(TextField, {\n  shouldForwardProp: (prop) =>\n    !['customColor', 'customSize', 'glass', 'gradient'].includes(prop as string),\n})<OtpSlotFlags>(({ theme, ...flags }) => ({ ...otpSlotSx(theme, flags) }));\n\nconst DEFAULTS = {\n  variant: 'numeric',\n  color: 'primary',\n  size: 'md',\n  length: 6,\n  value: '',\n  glass: false,\n  gradient: false,\n  autoFocus: false,\n  error: false,\n  disabled: false,\n} satisfies Partial<InputOTPProps>;\n\ntype ResolvedProps = InputOTPProps & Required<Pick<InputOTPProps, keyof typeof DEFAULTS>>;\n\nexport const InputOTP = forwardRef<HTMLDivElement, InputOTPProps>((props, ref) => {\n  const {\n    variant, color, size, length, value, onChange, onComplete,\n    glass, gradient, autoFocus, error, disabled, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste } = useOtpDigits({\n    variant,\n    length,\n    value,\n    onChange,\n    onComplete,\n  });\n\n  return (\n    <Box\n      ref={ref}\n      data-testid={dataTestId}\n      sx={{ display: 'flex', gap: 1, justifyContent: 'center', alignItems: 'center' }}\n      {...rest}\n    >\n      {digits.map((digit, index) => (\n        <StyledOTPInput\n          key={index}\n          ref={(el: HTMLDivElement | null) => {\n            inputRefs.current[index] = el?.querySelector('input') || null;\n          }}\n          customColor={color}\n          customSize={size}\n          glass={glass}\n          gradient={gradient}\n          // `masked` keeps the digit in state and shows a bullet in its place.\n          value={variant === 'masked' ? (digit ? '•' : '') : digit}\n          onChange={(e) => handleInputChange(index, e.target.value)}\n          onKeyDown={(e) => handleKeyDown(index, e)}\n          // Only the first slot takes a paste; it fills the rest itself.\n          onPaste={index === 0 ? handlePaste : undefined}\n          autoFocus={autoFocus && index === 0}\n          error={error}\n          disabled={disabled}\n          inputProps={{\n            maxLength: 1,\n            style: { textAlign: 'center' },\n            'data-testid': dataTestId ? `${dataTestId}-slot-${index}` : undefined,\n          }}\n        />\n      ))}\n    </Box>\n  );\n});\n\nInputOTP.displayName = 'InputOTP';\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,eAAe;AACtB,SAAS,cAAc;AACvB,SAAgB,kBAAkB;AAoD1B;AA3CR,IAAM,iBAAiB,OAAO,WAAW;AAAA,EACvC,mBAAmB,CAAC,SAClB,CAAC,CAAC,eAAe,cAAc,SAAS,UAAU,EAAE,SAAS,IAAc;AAC/E,CAAC,EAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,OAAO,EAAE,GAAG,UAAU,OAAO,KAAK,EAAE,EAAE;AAE1E,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AACZ;AAIO,IAAM,WAAW,WAA0C,CAAC,OAAO,QAAQ;AAChF,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAO;AAAA,IAAM;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAU;AAAA,IAC/C;AAAA,IAAO;AAAA,IAAU;AAAA,IAAW;AAAA,IAAO;AAAA,IAAU;AAAA,IAC7C,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,QAAQ;AAEhC,QAAM,EAAE,QAAQ,WAAW,mBAAmB,eAAe,YAAY,IAAI,aAAa;AAAA,IACxF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,IAAI,EAAE,SAAS,QAAQ,KAAK,GAAG,gBAAgB,UAAU,YAAY,SAAS;AAAA,MAC7E,GAAG;AAAA,MAEH,iBAAO,IAAI,CAAC,OAAO,UAClB;AAAA,QAAC;AAAA;AAAA,UAEC,KAAK,CAAC,OAA8B;AAClC,sBAAU,QAAQ,KAAK,IAAI,IAAI,cAAc,OAAO,KAAK;AAAA,UAC3D;AAAA,UACA,aAAa;AAAA,UACb,YAAY;AAAA,UACZ;AAAA,UACA;AAAA,UAEA,OAAO,YAAY,WAAY,QAAQ,WAAM,KAAM;AAAA,UACnD,UAAU,CAAC,MAAM,kBAAkB,OAAO,EAAE,OAAO,KAAK;AAAA,UACxD,WAAW,CAAC,MAAM,cAAc,OAAO,CAAC;AAAA,UAExC,SAAS,UAAU,IAAI,cAAc;AAAA,UACrC,WAAW,aAAa,UAAU;AAAA,UAClC;AAAA,UACA;AAAA,UACA,YAAY;AAAA,YACV,WAAW;AAAA,YACX,OAAO,EAAE,WAAW,SAAS;AAAA,YAC7B,eAAe,aAAa,GAAG,UAAU,SAAS,KAAK,KAAK;AAAA,UAC9D;AAAA;AAAA,QArBK;AAAA,MAsBP,CACD;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,cAAc;","names":[]}

package/dist/chunk-VJFH2AXT.js

@@ -0,0 +1,183 @@
+import {
+  DEFAULT_QUICK_RANGES
+} from "./chunk-QKLSHNOH.js";
+import {
+  useDateRangePicker
+} from "./chunk-OD4Z5G6G.js";
+import {
+  DateRangeQuickList
+} from "./chunk-ZRHSIFWA.js";
+import {
+  DateRangeFields
+} from "./chunk-MEWYA74E.js";
+import {
+  toLocalDay
+} from "./chunk-FRAVVI4A.js";
+import {
+  Calendar
+} from "./chunk-CZJLWCEG.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 { jsx, jsxs } from "react/jsx-runtime";
+var CALENDAR_CLASS = "date-range-picker__calendar";
+var NARROW_QUERY = "(max-width:899.95px)";
+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 narrow = useMediaQuery(NARROW_QUERY);
+  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-VJFH2AXT.js.map

package/dist/chunk-VJFH2AXT.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 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\n/** Below this the picker is a phone layout. MUI's own `md`, written out. */\nconst NARROW_QUERY = '(max-width:899.95px)';\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 * The query is a LITERAL, not `theme.breakpoints.down('md')`. The callback form\n * reads the theme from context and throws on a null one, so a consumer that\n * mounts this outside a `ThemeProvider` would crash — which the unit tests here\n * do, and which is a fair thing for a consumer to do.\n */\nfunction useMonthCount(requested: number | undefined): number | undefined {\n  const narrow = useMediaQuery(NARROW_QUERY);\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-VMF3UXM4.js

@@ -0,0 +1,137 @@
+// src/components/layout/Card/Card.styles.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 15px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var borderRadiusFor = (theme, radius) => {
+  switch (radius) {
+    case "none":
+      return 0;
+    case "sm":
+      return theme.spacing(0.5);
+    case "lg":
+      return theme.spacing(2);
+    case "xl":
+      return theme.spacing(3);
+    case "full":
+      return "50%";
+    default:
+      return theme.spacing(1);
+  }
+};
+var pulseSurface = (theme) => ({
+  position: "relative",
+  overflow: "visible",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "0",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    borderRadius: "inherit",
+    backgroundColor: theme.palette.primary.main,
+    opacity: 0.3,
+    animation: `${pulseAnimation} 2s infinite`,
+    pointerEvents: "none",
+    zIndex: -1
+  }
+});
+var neumorphicShadow = (theme, lifted) => {
+  const spread = lifted ? 12 : 8;
+  const blur = spread * 2;
+  return theme.palette.mode === "dark" ? `${spread}px ${spread}px ${blur}px ${alpha(theme.palette.common.black, 0.3)}, -${spread}px -${spread}px ${blur}px ${alpha(theme.palette.common.white, 0.1)}` : `${spread}px ${spread}px ${blur}px ${alpha(theme.palette.grey[400], lifted ? 0.3 : 0.2)}, -${spread}px -${spread}px ${blur}px ${alpha(theme.palette.common.white, lifted ? 0.9 : 0.8)}`;
+};
+var sectionBackground = (theme, lifted) => {
+  if (theme.palette.mode === "dark") {
+    return lifted ? "rgba(0, 0, 0, 0.25)" : "rgba(0, 0, 0, 0.2)";
+  }
+  return lifted ? "rgba(0, 0, 0, 0.04)" : "rgba(0, 0, 0, 0.02)";
+};
+var VARIANT_SURFACES = {
+  elevated: (_theme, lifted) => ({
+    surface: { elevation: 4 },
+    hover: { elevation: lifted ? 8 : 4 }
+  }),
+  outlined: (theme, lifted) => ({
+    surface: { border: `1px solid ${theme.palette.divider}`, boxShadow: "none" },
+    hover: { borderColor: lifted ? theme.palette.primary.main : theme.palette.divider }
+  }),
+  glass: (theme, lifted) => ({
+    surface: {
+      backgroundColor: alpha(theme.palette.background.paper, 0.1),
+      backdropFilter: "blur(20px)",
+      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+      boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`
+    },
+    hover: {
+      backgroundColor: alpha(theme.palette.background.paper, lifted ? 0.15 : 0.1),
+      border: `1px solid ${alpha(theme.palette.primary.main, 0.3)}`
+    }
+  }),
+  gradient: (theme, lifted) => ({
+    surface: {
+      background: cardGradient(theme, false),
+      color: theme.palette.primary.contrastText,
+      boxShadow: `0 4px 20px ${alpha(theme.palette.primary.main, 0.3)}`
+    },
+    hover: { background: cardGradient(theme, lifted) }
+  }),
+  neumorphic: (theme, lifted) => ({
+    surface: {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[100],
+      boxShadow: neumorphicShadow(theme, false),
+      border: "none"
+    },
+    hover: { boxShadow: neumorphicShadow(theme, lifted) }
+  }),
+  section: (theme, lifted) => ({
+    surface: {
+      backgroundColor: sectionBackground(theme, false),
+      border: "none",
+      boxShadow: "none"
+    },
+    hover: { backgroundColor: sectionBackground(theme, lifted) }
+  })
+};
+var cardGradient = (theme, dark) => dark ? `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})` : `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`;
+var variantSurface = (theme, variant, interactive) => VARIANT_SURFACES[variant]?.(theme, interactive) ?? null;
+var cardStyles = (theme, { variant, interactive, glow, pulse, borderRadius }) => {
+  const base = {
+    borderRadius: borderRadiusFor(theme, borderRadius),
+    transition: theme.transitions.create(
+      ["box-shadow", "transform", "border-color", "background-color"],
+      { duration: theme.transitions.duration.standard }
+    )
+  };
+  const chosen = variantSurface(theme, variant, interactive);
+  if (!chosen) return base;
+  return {
+    ...base,
+    ...interactive && { cursor: "pointer", "&:active": { transform: "translateY(0)" } },
+    ...glow && { boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.3)}` },
+    ...pulse && pulseSurface(theme),
+    ...chosen.surface,
+    "&:hover": {
+      ...interactive && { transform: "translateY(-2px)" },
+      ...glow && { boxShadow: `0 0 30px ${alpha(theme.palette.primary.main, 0.4)}` },
+      ...chosen.hover
+    }
+  };
+};
+
+export {
+  cardStyles
+};
+//# sourceMappingURL=chunk-VMF3UXM4.js.map

package/dist/chunk-VMF3UXM4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Card/Card.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { CardProps, CardVariant } from './Card.types';\n\ntype BorderRadius = NonNullable<CardProps['borderRadius']>;\n\n// Define pulse animation\nconst pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 15px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nconst borderRadiusFor = (theme: Theme, radius: BorderRadius): number | string => {\n  switch (radius) {\n    case 'none':\n      return 0;\n    case 'sm':\n      return theme.spacing(0.5);\n    case 'lg':\n      return theme.spacing(2);\n    case 'xl':\n      return theme.spacing(3);\n    case 'full':\n      return '50%';\n    default:\n      return theme.spacing(1);\n  }\n};\n\nconst pulseSurface = (theme: Theme): CSSObject => ({\n  position: 'relative',\n  overflow: 'visible',\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '0',\n    left: '0',\n    right: '0',\n    bottom: '0',\n    borderRadius: 'inherit',\n    backgroundColor: theme.palette.primary.main,\n    opacity: 0.3,\n    animation: `${pulseAnimation} 2s infinite`,\n    pointerEvents: 'none',\n    zIndex: -1,\n  },\n});\n\nconst neumorphicShadow = (theme: Theme, lifted: boolean): string => {\n  const spread = lifted ? 12 : 8;\n  const blur = spread * 2;\n\n  return theme.palette.mode === 'dark'\n    ? `${spread}px ${spread}px ${blur}px ${alpha(theme.palette.common.black, 0.3)}, -${spread}px -${spread}px ${blur}px ${alpha(theme.palette.common.white, 0.1)}`\n    : `${spread}px ${spread}px ${blur}px ${alpha(theme.palette.grey[400], lifted ? 0.3 : 0.2)}, -${spread}px -${spread}px ${blur}px ${alpha(theme.palette.common.white, lifted ? 0.9 : 0.8)}`;\n};\n\nconst sectionBackground = (theme: Theme, lifted: boolean): string => {\n  if (theme.palette.mode === 'dark') {\n    return lifted ? 'rgba(0, 0, 0, 0.25)' : 'rgba(0, 0, 0, 0.2)';\n  }\n  return lifted ? 'rgba(0, 0, 0, 0.04)' : 'rgba(0, 0, 0, 0.02)';\n};\n\ninterface Surface {\n  surface: CSSObject;\n  hover: CSSObject;\n}\n\n/**\n * Each variant contributes a resting surface and whatever it changes on hover.\n * Only `interactive` cards actually move on hover, so the hover half of every\n * variant reads back its resting value when `interactive` is off.\n */\nconst VARIANT_SURFACES: Record<CardVariant, (theme: Theme, lifted: boolean) => Surface> = {\n  elevated: (_theme, lifted) => ({\n    surface: { elevation: 4 } as CSSObject,\n    hover: { elevation: lifted ? 8 : 4 } as CSSObject,\n  }),\n  outlined: (theme, lifted) => ({\n    surface: { border: `1px solid ${theme.palette.divider}`, boxShadow: 'none' },\n    hover: { borderColor: lifted ? theme.palette.primary.main : theme.palette.divider },\n  }),\n  glass: (theme, lifted) => ({\n    surface: {\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: 'blur(20px)',\n      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n      boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,\n    },\n    hover: {\n      backgroundColor: alpha(theme.palette.background.paper, lifted ? 0.15 : 0.1),\n      border: `1px solid ${alpha(theme.palette.primary.main, 0.3)}`,\n    },\n  }),\n  gradient: (theme, lifted) => ({\n    surface: {\n      background: cardGradient(theme, false),\n      color: theme.palette.primary.contrastText,\n      boxShadow: `0 4px 20px ${alpha(theme.palette.primary.main, 0.3)}`,\n    },\n    hover: { background: cardGradient(theme, lifted) },\n  }),\n  neumorphic: (theme, lifted) => ({\n    surface: {\n      backgroundColor:\n        theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],\n      boxShadow: neumorphicShadow(theme, false),\n      border: 'none',\n    },\n    hover: { boxShadow: neumorphicShadow(theme, lifted) },\n  }),\n  section: (theme, lifted) => ({\n    surface: {\n      backgroundColor: sectionBackground(theme, false),\n      border: 'none',\n      boxShadow: 'none',\n    },\n    hover: { backgroundColor: sectionBackground(theme, lifted) },\n  }),\n};\n\nconst cardGradient = (theme: Theme, dark: boolean): string =>\n  dark\n    ? `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`\n    : `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`;\n\n// An unrecognised variant gets the shared base only — no interactive, glow or\n// pulse decoration, as before.\nconst variantSurface = (\n  theme: Theme,\n  variant: CardVariant,\n  interactive: boolean,\n): Surface | null => VARIANT_SURFACES[variant]?.(theme, interactive) ?? null;\n\ninterface CardStyleArgs {\n  variant: CardVariant;\n  interactive: boolean;\n  glow: boolean;\n  pulse: boolean;\n  borderRadius: BorderRadius;\n}\n\nexport const cardStyles = (\n  theme: Theme,\n  { variant, interactive, glow, pulse, borderRadius }: CardStyleArgs,\n): CSSObject => {\n  const base: CSSObject = {\n    borderRadius: borderRadiusFor(theme, borderRadius),\n    transition: theme.transitions.create(\n      ['box-shadow', 'transform', 'border-color', 'background-color'],\n      { duration: theme.transitions.duration.standard },\n    ),\n  };\n\n  const chosen = variantSurface(theme, variant, interactive);\n  if (!chosen) return base;\n\n  return {\n    ...base,\n    ...(interactive && { cursor: 'pointer', '&:active': { transform: 'translateY(0)' } }),\n    ...(glow && { boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.3)}` }),\n    ...(pulse && pulseSurface(theme)),\n    ...chosen.surface,\n    '&:hover': {\n      ...(interactive && { transform: 'translateY(-2px)' }),\n      ...(glow && { boxShadow: `0 0 30px ${alpha(theme.palette.primary.main, 0.4)}` }),\n      ...chosen.hover,\n    },\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-VN6Z6F7R.js

@@ -0,0 +1,68 @@
+// src/components/form/CategorySelect/useCategoryCommit.ts
+import { useCallback, useMemo } from "react";
+function useCategoryCommit({
+  props,
+  state,
+  single,
+  allowParentSelection
+}) {
+  const { closePanel, triggerRef, toggleCategory, toggleSubcategory, toggleExpanded } = state;
+  const closeAndRefocus = useCallback(() => {
+    closePanel();
+    triggerRef.current?.focus();
+  }, [closePanel, triggerRef]);
+  const commit = useCallback(() => {
+    if (props.mode === "single") return;
+    props.onChange([...state.draft]);
+    closeAndRefocus();
+  }, [props, state.draft, closeAndRefocus]);
+  const pick = useCallback(
+    (id) => {
+      if (props.mode !== "single") return;
+      props.onChange(id);
+      closeAndRefocus();
+    },
+    [props, closeAndRefocus]
+  );
+  const clearSelection = useCallback(() => {
+    if (props.mode === "single") props.onChange(null);
+    else props.onChange([]);
+  }, [props]);
+  const activateCategory = useCallback(
+    (group) => {
+      if (allowParentSelection && single) {
+        pick(group.category.id);
+        return;
+      }
+      if (allowParentSelection) {
+        toggleCategory(group);
+        return;
+      }
+      toggleExpanded(group.category.id);
+    },
+    [allowParentSelection, single, pick, toggleCategory, toggleExpanded]
+  );
+  const activateSubcategory = useCallback(
+    (id) => {
+      if (single) pick(id);
+      else toggleSubcategory(id);
+    },
+    [single, pick, toggleSubcategory]
+  );
+  return useMemo(
+    () => ({
+      commit,
+      pick,
+      cancel: closeAndRefocus,
+      clearSelection,
+      activateCategory,
+      activateSubcategory
+    }),
+    [commit, pick, closeAndRefocus, clearSelection, activateCategory, activateSubcategory]
+  );
+}
+
+export {
+  useCategoryCommit
+};
+//# sourceMappingURL=chunk-VN6Z6F7R.js.map

package/dist/chunk-VN6Z6F7R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/useCategoryCommit.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport type { CategoryGroup, CategorySelectProps } from './CategorySelect.types';\nimport type { CategorySelectState } from './useCategorySelect';\n\n/** The verbs a row, a footer button or a key press can invoke. */\nexport interface CategoryActions {\n  /** Publish the draft to the caller and close (multi-select). */\n  commit: () => void;\n  /** Choose one id and close (single-select). */\n  pick: (id: string) => void;\n  /** Close without publishing, returning focus to the trigger. */\n  cancel: () => void;\n  /** Empty the APPLIED selection straight from the closed trigger. */\n  clearSelection: () => void;\n  activateCategory: (group: CategoryGroup) => void;\n  activateSubcategory: (id: string) => void;\n}\n\ninterface UseCategoryCommitArgs {\n  props: CategorySelectProps;\n  state: CategorySelectState;\n  single: boolean;\n  allowParentSelection: boolean;\n}\n\n/**\n * The commit semantics, which are the one thing the two modes genuinely differ\n * on: multi-select batches into a draft and publishes on Apply, single-select\n * publishes the moment a row is chosen.\n */\nexport function useCategoryCommit({\n  props,\n  state,\n  single,\n  allowParentSelection,\n}: UseCategoryCommitArgs): CategoryActions {\n  const { closePanel, triggerRef, toggleCategory, toggleSubcategory, toggleExpanded } = state;\n\n  const closeAndRefocus = useCallback(() => {\n    closePanel();\n    triggerRef.current?.focus();\n  }, [closePanel, triggerRef]);\n\n  const commit = useCallback(() => {\n    if (props.mode === 'single') return;\n    props.onChange([...state.draft]);\n    closeAndRefocus();\n  }, [props, state.draft, closeAndRefocus]);\n\n  const pick = useCallback(\n    (id: string) => {\n      if (props.mode !== 'single') return;\n      props.onChange(id);\n      closeAndRefocus();\n    },\n    [props, closeAndRefocus],\n  );\n\n  const clearSelection = useCallback(() => {\n    if (props.mode === 'single') props.onChange(null);\n    else props.onChange([]);\n  }, [props]);\n\n  // A category row means different things per mode: pick the whole category,\n  // tick all its leaves, or — when it is only a heading — just fold it.\n  const activateCategory = useCallback(\n    (group: CategoryGroup) => {\n      if (allowParentSelection && single) {\n        pick(group.category.id);\n        return;\n      }\n      if (allowParentSelection) {\n        toggleCategory(group);\n        return;\n      }\n      toggleExpanded(group.category.id);\n    },\n    [allowParentSelection, single, pick, toggleCategory, toggleExpanded],\n  );\n\n  const activateSubcategory = useCallback(\n    (id: string) => {\n      if (single) pick(id);\n      else toggleSubcategory(id);\n    },\n    [single, pick, toggleSubcategory],\n  );\n\n  return useMemo(\n    () => ({\n      commit,\n      pick,\n      cancel: closeAndRefocus,\n      clearSelection,\n      activateCategory,\n      activateSubcategory,\n    }),\n    [commit, pick, closeAndRefocus, clearSelection, activateCategory, activateSubcategory],\n  );\n}\n"],"mappings":";AAAA,SAAS,aAAa,eAAe;AA+B9B,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2C;AACzC,QAAM,EAAE,YAAY,YAAY,gBAAgB,mBAAmB,eAAe,IAAI;AAEtF,QAAM,kBAAkB,YAAY,MAAM;AACxC,eAAW;AACX,eAAW,SAAS,MAAM;AAAA,EAC5B,GAAG,CAAC,YAAY,UAAU,CAAC;AAE3B,QAAM,SAAS,YAAY,MAAM;AAC/B,QAAI,MAAM,SAAS,SAAU;AAC7B,UAAM,SAAS,CAAC,GAAG,MAAM,KAAK,CAAC;AAC/B,oBAAgB;AAAA,EAClB,GAAG,CAAC,OAAO,MAAM,OAAO,eAAe,CAAC;AAExC,QAAM,OAAO;AAAA,IACX,CAAC,OAAe;AACd,UAAI,MAAM,SAAS,SAAU;AAC7B,YAAM,SAAS,EAAE;AACjB,sBAAgB;AAAA,IAClB;AAAA,IACA,CAAC,OAAO,eAAe;AAAA,EACzB;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,MAAM,SAAS,SAAU,OAAM,SAAS,IAAI;AAAA,QAC3C,OAAM,SAAS,CAAC,CAAC;AAAA,EACxB,GAAG,CAAC,KAAK,CAAC;AAIV,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAyB;AACxB,UAAI,wBAAwB,QAAQ;AAClC,aAAK,MAAM,SAAS,EAAE;AACtB;AAAA,MACF;AACA,UAAI,sBAAsB;AACxB,uBAAe,KAAK;AACpB;AAAA,MACF;AACA,qBAAe,MAAM,SAAS,EAAE;AAAA,IAClC;AAAA,IACA,CAAC,sBAAsB,QAAQ,MAAM,gBAAgB,cAAc;AAAA,EACrE;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,OAAe;AACd,UAAI,OAAQ,MAAK,EAAE;AAAA,UACd,mBAAkB,EAAE;AAAA,IAC3B;AAAA,IACA,CAAC,QAAQ,MAAM,iBAAiB;AAAA,EAClC;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,MAAM,iBAAiB,gBAAgB,kBAAkB,mBAAmB;AAAA,EACvF;AACF;","names":[]}

package/dist/chunk-VR5HDUBK.js

@@ -0,0 +1,34 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Pagination
+} from "./chunk-W2UTDN4T.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-pagination.tsx
+import { jsx } from "react/jsx-runtime";
+function DataViewsPagination({
+  c,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  if (!c.serverMode || c.serverPageCount <= 1) return null;
+  return /* @__PURE__ */ jsx(default2, { sx: { mt: 2, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      pageSizeLabel: copy.nav.pageSize,
+      page: c.serverPage,
+      count: c.serverPageCount,
+      onChange: (_event, page) => c.changePage(page),
+      dataTestId: `${testIdPrefix}-pagination`
+    }
+  ) });
+}
+
+export {
+  DataViewsPagination
+};
+//# sourceMappingURL=chunk-VR5HDUBK.js.map

package/dist/chunk-VR5HDUBK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { Pagination } from \"../../navigation/Pagination\";\n\nimport type { DataViewsController } from \"./use-data-views-state\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/**\n * The server-mode pagination control rendered beneath the grid — shown only\n * when the table is backend-driven and there is more than one page. Client-mode\n * tables render every matched row at once, so they never show it (FUT-180).\n */\nexport function DataViewsPagination<T extends Record<string, unknown>>({\n  c,\n  testIdPrefix,\n}: {\n  c: DataViewsController<T>;\n  testIdPrefix: string;\n}): React.JSX.Element | null {\n  const copy = useDataViewsCopy();\n  if (!c.serverMode || c.serverPageCount <= 1) return null;\n  return (\n    <Box sx={{ mt: 2, display: \"flex\", justifyContent: \"center\" }}>\n      <Pagination\n        pageSizeLabel={copy.nav.pageSize}\n        page={c.serverPage}\n        count={c.serverPageCount}\n        onChange={(_event, page) => c.changePage(page)}\n        dataTestId={`${testIdPrefix}-pagination`}\n      />\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAwBM;AAXC,SAAS,oBAAuD;AAAA,EACrE;AAAA,EACA;AACF,GAG6B;AAC3B,QAAM,OAAO,iBAAiB;AAC9B,MAAI,CAAC,EAAE,cAAc,EAAE,mBAAmB,EAAG,QAAO;AACpD,SACE,oBAACA,UAAA,EAAI,IAAI,EAAE,IAAI,GAAG,SAAS,QAAQ,gBAAgB,SAAS,GAC1D;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,KAAK,IAAI;AAAA,MACxB,MAAM,EAAE;AAAA,MACR,OAAO,EAAE;AAAA,MACT,UAAU,CAAC,QAAQ,SAAS,EAAE,WAAW,IAAI;AAAA,MAC7C,YAAY,GAAG,YAAY;AAAA;AAAA,EAC7B,GACF;AAEJ;","names":["default"]}