@12-apps/ui 6.38.0 → 6.39.1

package/dist/{chunk-DLJGBJZW.js → chunk-DGMDQHMI.js}

@@ -1,10 +1,14 @@
 import {
   processRows
 } from "./chunk-G3E66C6J.js";
+import {
+  rem,
+  remPx
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/DataGrid/DataGrid.model.ts
+import { useTheme } from "@mui/material/styles/index.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-var DEFAULT_ROW_HEIGHT = 52;
 var DEFAULT_PAGE_SIZE = 50;
 var OVERSCAN_COUNT = 20;
 var VIRTUALIZATION_THRESHOLD = 100;
@@ -46,7 +50,7 @@ function useProcessedRows(props, columnMap, sortBy, filters) {
     ]
   );
 }
-function useRowWindow(rowCount, rowHeight, enabled) {
+function useRowWindow(rowCount, rowPitch, enabled) {
   const [range, setRange] = useState({ start: 0, end: INITIAL_WINDOW });
   const rafRef = useRef(null);
   useEffect(() => {
@@ -64,8 +68,8 @@ function useRowWindow(rowCount, rowHeight, enabled) {
       const { scrollTop, clientHeight } = event.currentTarget;
       if (rafRef.current !== null) window.cancelAnimationFrame(rafRef.current);
       rafRef.current = window.requestAnimationFrame(() => {
-        const first = Math.floor(scrollTop / rowHeight);
-        const visible = Math.ceil(clientHeight / rowHeight);
+        const first = Math.floor(scrollTop / rowPitch);
+        const visible = Math.ceil(clientHeight / rowPitch);
         const start = Math.max(0, first - OVERSCAN_COUNT);
         const end = Math.min(first + visible + OVERSCAN_COUNT, rowCount);
         setRange(
@@ -74,7 +78,7 @@ function useRowWindow(rowCount, rowHeight, enabled) {
         rafRef.current = null;
       });
     },
-    [enabled, rowHeight, rowCount]
+    [enabled, rowPitch, rowCount]
   );
   return { range, onScroll };
 }
@@ -151,10 +155,12 @@ function useSortAndFilter(props) {
 }
 function useDataGridModel(props) {
   const { columns } = props;
+  const theme = useTheme();
   const containerRef = useRef(null);
   const [editingCell, setEditingCell] = useState(null);
   const { sortBy, filters, setInternalSortBy } = useSortAndFilter(props);
-  const rowHeight = densityHeight(props.rowHeight ?? DEFAULT_ROW_HEIGHT, props.density);
+  const designRowHeight = densityHeight(props.rowHeight ?? 52, props.density);
+  const rowPitch = remPx(theme, designRowHeight);
   const columnMap = useMemo(
     () => new Map(columns.map((column) => [column.id, column])),
     [columns]
@@ -162,11 +168,12 @@ function useDataGridModel(props) {
   const visibleColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
   const processedRows = useProcessedRows(props, columnMap, sortBy, filters);
   const virtualized = (props.virtualizeRows ?? true) && processedRows.length > VIRTUALIZATION_THRESHOLD;
-  const { range, onScroll } = useRowWindow(processedRows.length, rowHeight, virtualized);
+  const { range, onScroll } = useRowWindow(processedRows.length, rowPitch, virtualized);
   const onSort = useSortHandler(props, sortBy, filters, setInternalSortBy);
   return {
     containerRef,
-    rowHeight,
+    rowHeight: rem(theme, designRowHeight),
+    rowPitch,
     visibleColumns,
     processedRows,
     visibleRows: virtualized ? processedRows.slice(range.start, range.end) : processedRows,
@@ -184,4 +191,4 @@ function useDataGridModel(props) {
 export {
   useDataGridModel
 };
-//# sourceMappingURL=chunk-DLJGBJZW.js.map
+//# sourceMappingURL=chunk-DGMDQHMI.js.map

package/dist/chunk-DGMDQHMI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataGrid/DataGrid.model.ts"],"sourcesContent":["/**\n * The DataGrid's STATE, in one hook.\n *\n * The component used to hold all of it inline, which made its body 700 lines\n * long and put the row pipeline, the virtualization window and the JSX in one\n * scope where any of them could reach any other. Split out, each piece is a\n * hook with named inputs and the render is left with nothing to do but render.\n *\n * Controlled/uncontrolled is resolved in ONE place per feature: a caller that\n * passes `sorting.sortBy` owns the sort, and a caller that does not gets the\n * internal state — the component never holds a second, divergent copy.\n */\nimport { useTheme } from '@mui/material/styles/index.js';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type React from 'react';\n\nimport { rem, remPx } from '../../../tokens/relative';\n\nimport { processRows } from './DataGrid.rows';\nimport type {\n  DataGridProps,\n  GridColumn,\n  GridFilter,\n  GridSort,\n  SortDirection,\n} from './DataGrid.types';\n\nconst DEFAULT_PAGE_SIZE = 50;\n/** Rows rendered on either side of the window, so a fast scroll stays filled. */\nconst OVERSCAN_COUNT = 20;\n/** Below this many rows, virtualization costs more than it saves. */\nconst VIRTUALIZATION_THRESHOLD = 100;\n/** The initial (and reset) window size, before a scroll has measured anything. */\nconst INITIAL_WINDOW = 50;\n/** Re-window only past this much drift, so a scroll is not one setState per pixel. */\nconst WINDOW_DRIFT = 5;\n\n/** Which id is being edited, or `null`. */\nexport interface EditingCell {\n  rowId: string | number;\n  colId: string;\n}\n\n/** The visible slice of a virtualized body. */\nexport interface VisibleRange {\n  start: number;\n  end: number;\n}\n\n/** Everything the render needs, and nothing it has to derive. */\nexport interface DataGridModel<T extends Record<string, unknown>> {\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  /** A row's height as CSS: the design height, density applied, through `rem`. */\n  rowHeight: string;\n  /**\n   * The same height in px (`remPx`) — what the window divides `scrollTop` by.\n   * One design number drawn two ways, so the rows and the window never disagree.\n   */\n  rowPitch: number;\n  visibleColumns: GridColumn<T>[];\n  processedRows: T[];\n  visibleRows: T[];\n  visibleRange: VisibleRange;\n  virtualized: boolean;\n  sortBy: readonly GridSort[];\n  selectedRowIds: Array<string | number>;\n  selectedRowIdsSet: ReadonlySet<string | number>;\n  expandedRowIdsSet: ReadonlySet<string | number>;\n  editingCell: EditingCell | null;\n  setEditingCell: (cell: EditingCell | null) => void;\n  setSelectedRowIds: (ids: Array<string | number>) => void;\n  onSort: (columnId: string) => void;\n  onToggleRow: (rowId: string | number, isSelected: boolean) => void;\n  onToggleExpansion: (rowId: string | number) => void;\n  onScroll: (event: React.UIEvent<HTMLDivElement>) => void;\n}\n\n/** The row height a density implies, in design px. */\nfunction densityHeight(base: number, density: DataGridProps['density']): number {\n  if (density === 'compact') return Math.max(base * 0.8, 32);\n  if (density === 'spacious') return base * 1.2;\n  return base;\n}\n\n/** The rows this render should show, with every client-mode step resolved. */\nfunction useProcessedRows<T extends Record<string, unknown>>(\n  props: DataGridProps<T>,\n  columnMap: ReadonlyMap<string, GridColumn<T>>,\n  sortBy: readonly GridSort[],\n  filters: readonly GridFilter[],\n): T[] {\n  const { rows, filtering = {}, sorting = {}, pagination, virtualizeRows = true } = props;\n  const pageIndex = pagination?.pageIndex ?? 0;\n  const pageSize = pagination?.pageSize ?? DEFAULT_PAGE_SIZE;\n  return useMemo(\n    () =>\n      processRows({\n        rows,\n        columnMap,\n        filters,\n        sortBy,\n        needsFiltering: filtering.mode === 'client' && filters.length > 0,\n        needsSorting: sorting.mode === 'client' && sortBy.length > 0,\n        // Virtualization already slices; doing both would page a page.\n        needsPagination: pagination?.mode === 'client' && !virtualizeRows,\n        pageIndex,\n        pageSize,\n      }),\n    [\n      rows,\n      columnMap,\n      filters,\n      sortBy,\n      filtering.mode,\n      sorting.mode,\n      pagination?.mode,\n      virtualizeRows,\n      pageIndex,\n      pageSize,\n    ],\n  );\n}\n\n/**\n * The virtualization window and the scroll handler that moves it. `rowPitch` is\n * px, like the `scrollTop` and `clientHeight` it is divided into.\n *\n * Throttled through `requestAnimationFrame`, and only committed once the window\n * has drifted meaningfully — a `setState` per scroll event re-renders every\n * visible row for a movement the eye cannot see.\n */\nfunction useRowWindow(\n  rowCount: number,\n  rowPitch: number,\n  enabled: boolean,\n): { range: VisibleRange; onScroll: (event: React.UIEvent<HTMLDivElement>) => void } {\n  const [range, setRange] = useState<VisibleRange>({ start: 0, end: INITIAL_WINDOW });\n  const rafRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (rowCount < range.end) setRange({ start: 0, end: Math.min(INITIAL_WINDOW, rowCount) });\n  }, [rowCount, range.end]);\n\n  useEffect(\n    () => () => {\n      if (rafRef.current !== null) window.cancelAnimationFrame(rafRef.current);\n    },\n    [],\n  );\n\n  const onScroll = useCallback(\n    (event: React.UIEvent<HTMLDivElement>) => {\n      if (!enabled) return;\n      const { scrollTop, clientHeight } = event.currentTarget;\n      if (rafRef.current !== null) window.cancelAnimationFrame(rafRef.current);\n      rafRef.current = window.requestAnimationFrame(() => {\n        const first = Math.floor(scrollTop / rowPitch);\n        const visible = Math.ceil(clientHeight / rowPitch);\n        const start = Math.max(0, first - OVERSCAN_COUNT);\n        const end = Math.min(first + visible + OVERSCAN_COUNT, rowCount);\n        setRange((current) =>\n          Math.abs(start - current.start) > WINDOW_DRIFT ||\n          Math.abs(end - current.end) > WINDOW_DRIFT\n            ? { start, end }\n            : current,\n        );\n        rafRef.current = null;\n      });\n    },\n    [enabled, rowPitch, rowCount],\n  );\n\n  return { range, onScroll };\n}\n\n/** The next `sortBy` for a header press: asc → desc → unsorted. */\nfunction nextSortBy(current: readonly GridSort[], columnId: string): GridSort[] {\n  const existing = current.find((sort) => sort.id === columnId);\n  let dir: SortDirection = 'asc';\n  if (existing?.dir === 'asc') dir = 'desc';\n  else if (existing?.dir === 'desc') dir = null;\n  return dir ? [{ id: columnId, dir }] : current.filter((sort) => sort.id !== columnId);\n}\n\n/** Selection + expansion, each resolved once against its controlled prop. */\nfunction useRowFlags<T extends Record<string, unknown>>(\n  props: DataGridProps<T>,\n): Pick<\n  DataGridModel<T>,\n  | 'selectedRowIds'\n  | 'selectedRowIdsSet'\n  | 'expandedRowIdsSet'\n  | 'setSelectedRowIds'\n  | 'onToggleRow'\n  | 'onToggleExpansion'\n> {\n  const { selection = { mode: 'none' }, expansion } = props;\n  const [internalSelected, setInternalSelected] = useState(selection.defaultSelectedRowIds ?? []);\n  const [internalExpanded, setInternalExpanded] = useState(expansion?.defaultExpandedRowIds ?? []);\n  const selectedRowIds = selection.selectedRowIds ?? internalSelected;\n  const expandedRowIds = expansion?.expandedRowIds ?? internalExpanded;\n\n  const commitSelected = useCallback(\n    (ids: Array<string | number>) => {\n      if (selection.onChangeSelected) selection.onChangeSelected(ids);\n      else setInternalSelected(ids);\n    },\n    [selection],\n  );\n\n  return {\n    selectedRowIds,\n    selectedRowIdsSet: useMemo(() => new Set(selectedRowIds), [selectedRowIds]),\n    expandedRowIdsSet: useMemo(() => new Set(expandedRowIds), [expandedRowIds]),\n    setSelectedRowIds: commitSelected,\n    onToggleRow: (rowId, isSelected) => {\n      if (selection.mode === 'single') commitSelected(isSelected ? [rowId] : []);\n      else if (selection.mode === 'multi') {\n        commitSelected(\n          isSelected\n            ? [...selectedRowIds, rowId]\n            : selectedRowIds.filter((id) => id !== rowId),\n        );\n      }\n    },\n    onToggleExpansion: (rowId) => {\n      if (!expansion) return;\n      const next = expandedRowIds.includes(rowId)\n        ? expandedRowIds.filter((id) => id !== rowId)\n        : [...expandedRowIds, rowId];\n      if (expansion.onChangeExpanded) expansion.onChangeExpanded(next);\n      else setInternalExpanded(next);\n    },\n  };\n}\n\n/**\n * A header press, routed to whoever owns the sort: the server (which must\n * re-query — sorting the current page locally would reorder one page of a\n * dataset and call it sorted), the caller's `onChangeSortBy`, or internal state.\n */\nfunction useSortHandler<T extends Record<string, unknown>>(\n  props: DataGridProps<T>,\n  sortBy: readonly GridSort[],\n  filters: readonly GridFilter[],\n  setInternalSortBy: (next: GridSort[]) => void,\n): (columnId: string) => void {\n  const { sorting = {}, pagination, onRequestData } = props;\n  return useCallback(\n    (columnId: string) => {\n      const next = nextSortBy(sortBy, columnId);\n      if (sorting.mode === 'server' && onRequestData) {\n        onRequestData({\n          pageIndex: pagination?.pageIndex ?? 0,\n          pageSize: pagination?.pageSize ?? DEFAULT_PAGE_SIZE,\n          sortBy: next,\n          filters: [...filters],\n        });\n        return;\n      }\n      if (sorting.onChangeSortBy) sorting.onChangeSortBy(next);\n      else setInternalSortBy(next);\n    },\n    [sortBy, sorting, onRequestData, pagination, filters, setInternalSortBy],\n  );\n}\n\n/**\n * Sort and filter, each resolved ONCE against its controlled prop: a caller\n * that passes `sorting.sortBy` owns the sort, and one that does not gets the\n * internal state. The grid never holds a second, divergent copy.\n */\nfunction useSortAndFilter<T extends Record<string, unknown>>(\n  props: DataGridProps<T>,\n): {\n  sortBy: readonly GridSort[];\n  filters: readonly GridFilter[];\n  setInternalSortBy: (next: GridSort[]) => void;\n} {\n  const { sorting = {}, filtering = {} } = props;\n  const [internalSortBy, setInternalSortBy] = useState<GridSort[]>(sorting.defaultSortBy ?? []);\n  const [internalFilters] = useState<GridFilter[]>(filtering.defaultFilters ?? []);\n  return {\n    sortBy: sorting.sortBy ?? internalSortBy,\n    filters: filtering.filters ?? internalFilters,\n    setInternalSortBy,\n  };\n}\n\nexport function useDataGridModel<T extends Record<string, unknown>>(\n  props: DataGridProps<T>,\n): DataGridModel<T> {\n  const { columns } = props;\n  const theme = useTheme();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [editingCell, setEditingCell] = useState<EditingCell | null>(null);\n  const { sortBy, filters, setInternalSortBy } = useSortAndFilter(props);\n  // 52 design px unless the caller says; the density scales it, then the type scale does.\n  const designRowHeight = densityHeight(props.rowHeight ?? 52, props.density);\n  const rowPitch = remPx(theme, designRowHeight);\n  const columnMap = useMemo(\n    () => new Map(columns.map((column) => [column.id, column])),\n    [columns],\n  );\n  const visibleColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);\n  const processedRows = useProcessedRows(props, columnMap, sortBy, filters);\n  const virtualized =\n    (props.virtualizeRows ?? true) && processedRows.length > VIRTUALIZATION_THRESHOLD;\n  const { range, onScroll } = useRowWindow(processedRows.length, rowPitch, virtualized);\n  const onSort = useSortHandler(props, sortBy, filters, setInternalSortBy);\n\n  return {\n    containerRef,\n    rowHeight: rem(theme, designRowHeight),\n    rowPitch,\n    visibleColumns,\n    processedRows,\n    visibleRows: virtualized ? processedRows.slice(range.start, range.end) : processedRows,\n    visibleRange: range,\n    virtualized,\n    sortBy,\n    editingCell,\n    setEditingCell,\n    onSort,\n    onScroll,\n    ...useRowFlags(props),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-IAGOUTI6.js → chunk-DNT5PZLF.js}

@@ -1,6 +1,10 @@
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/data-display/DataViews/data-views-overflow-costs.ts
-function estimateWidth(text, extra) {
-  return Math.round(text.length * 7.6) + 56 + extra;
+function estimateWidth(theme, text, extra) {
+  return remPx(theme, Math.round(text.length * 7.6) + 56 + extra);
 }
 function isRangeSet(range) {
   return Boolean(range && (range.min !== void 0 || range.max !== void 0));
@@ -84,20 +88,25 @@ var RESERVED = {
   /**
    * The row's own padding, plus the gaps BETWEEN the fixed furniture.
    *
-   * Not the per-control gaps — `splitFilters` already adds a `GAP` for every
-   * filter it keeps, so counting a fourth one here charged one gap twice.
+   * Not the per-control gaps — `splitFilters` already adds `betweenControls`
+   * for every filter it keeps, so counting a fourth one here charged one gap twice.
    * MEASURED: 32px of padding (16 each side) + three 8px gaps between the
    * search, the counter and the right cluster.
    */
-  chrome: 56
+  chrome: 56,
+  /** The gap between two controls. */
+  betweenControls: 8
 };
-var GAP = 8;
-function rightClusterCost(hasExport, compact) {
-  const one = compact ? RESERVED.displayControlCompact : RESERVED.displayControl;
+function pricesFor(theme) {
+  const entries = Object.entries(RESERVED).map(([key, px]) => [key, remPx(theme, px)]);
+  return Object.fromEntries(entries);
+}
+function rightClusterCost(price, hasExport, compact) {
+  const one = compact ? price.displayControlCompact : price.displayControl;
   return hasExport ? one * 2 : one;
 }
-function furnitureCost(flags, hasExport) {
-  return (flags.searchCollapsed ? RESERVED.searchIcon : RESERVED.search) + (flags.counterHidden ? 0 : RESERVED.counter) + rightClusterCost(hasExport, flags.compactControls) + RESERVED.chrome;
+function furnitureCost(price, flags, hasExport) {
+  return (flags.searchCollapsed ? price.searchIcon : price.search) + (flags.counterHidden ? 0 : price.counter) + rightClusterCost(price, hasExport, flags.compactControls) + price.chrome;
 }
 
 export {
@@ -105,8 +114,8 @@ export {
   isRangeSet,
   pillText,
   RESERVED,
-  GAP,
+  pricesFor,
   rightClusterCost,
   furnitureCost
 };
-//# sourceMappingURL=chunk-IAGOUTI6.js.map
+//# sourceMappingURL=chunk-DNT5PZLF.js.map

package/dist/chunk-DNT5PZLF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-overflow-costs.ts"],"sourcesContent":["/**\n * WHAT EACH THING ON THE TOOLBAR COSTS, IN PIXELS.\n *\n * The pricing half of the collapse ladder, split from `data-views-overflow` at\n * the file-size gate. Pure arithmetic and constants: no React, no measurement,\n * no decisions. `data-views-overflow` measures the row and spends what this\n * says it has.\n *\n * Every number here is either MEASURED in a browser (and says so) or\n * deliberately generous. Over-pricing sheds one control too early, which the\n * \"Mais\" button absorbs invisibly; under-pricing breaks the line.\n *\n * Every number is DESIGN px — measured at MUI's default type scale. The bar is\n * measured in real px, so a price reaches it through `remPx` (`estimateWidth`,\n * `pricesFor`): a theme that scales its type scales the controls, and so the\n * prices, together — a denser theme fits more pills on the same bar.\n */\nimport type { Theme } from \"@mui/material/styles/index.js\";\n\nimport { remPx } from \"../../../tokens/relative\";\n\nimport type { OverflowField } from \"./data-views-overflow\";\nimport type { RangeValue } from \"./data-views-types\";\n\n/**\n * Rough rendered width of a control, in px at `theme`'s type scale.\n *\n * An ESTIMATE from the label text rather than a real measurement, deliberately:\n * measuring the true width needs every control mounted first, and mounting them\n * to decide whether to mount them is the layout thrash this hook exists to\n * avoid. The estimate only has to rank controls and find the cut point — being\n * a few px out moves the cut by at most one control, and the overflow catches it.\n */\nexport function estimateWidth(theme: Theme, text: string, extra: number): number {\n  /**\n   * ~7.6px per character at the toolbar's font size, plus 76px of chrome:\n   * horizontal padding, the border, and the dropdown chevron. The chrome used\n   * to be 52, which under-priced every control by roughly a chevron's width —\n   * six of them then \"fitted\" a row they overflowed, and because they are flex\n   * children the row paid for it by squeezing labels to \"D…\" and \"V…\" rather\n   * than by shedding a control into the overflow.\n   *\n   * Deliberately generous: over-pricing sheds one control too early, which the\n   * \"Mais\" button absorbs invisibly. Under-pricing breaks the line.\n   *\n   * The chrome was 76, and generous had turned into wrong. MEASURED on the\n   * Pedidos bar: \"Pagamento\" renders at 123px against an estimate of 144, and\n   * \"Situação\" at 107 against 137 — every pill over-priced by ~22%, which on a\n   * phone is the whole difference between one pill on the bar and none. 56 is\n   * still above the ~50 measured, so the slack the comment above asks for is\n   * intact; it is just slack rather than a second control's worth of budget.\n   */\n  return remPx(theme, Math.round(text.length * 7.6) + 56 + extra);\n}\n\n/** Is a range bounded at either end? */\nexport function isRangeSet(range: RangeValue | undefined): boolean {\n  return Boolean(range && (range.min !== undefined || range.max !== undefined));\n}\n\n/** The label a pill actually renders, which is what decides its width. */\nexport function pillText<T extends Record<string, unknown>>(field: OverflowField<T>, values: string[]): string {\n  if (values.length === 0) return field.label;\n  if (values.length === 1) {\n    const option = field.pill?.options.find((entry) => entry.value === values[0]);\n    return `${field.label}: ${option?.label ?? values[0]}`;\n  }\n  return `${field.label}: ${values.length}`;\n}\n\n/** Fixed toolbar furniture the filters have to fit around, in design px. */\nexport const RESERVED = {\n  /** The search box never shrinks below this. */\n  search: 200,\n  /**\n   * The \"N de N\" counter.\n   *\n   * MEASURED at 35px, plus its divider and gap. The old 96 was priced for a\n   * counter reading \"1.234 de 5.678\"; a phone shows \"3 de 3\", and charging\n   * nearly triple its rendered width came straight out of the filter budget.\n   */\n  counter: 56,\n  /**\n   * ONE right-hand control (Exibir, or Exportar) WITH its text label.\n   *\n   * Priced per control rather than for the pair, because the pair is not what\n   * every page renders: \"Exportar\" exists only when the host passes an\n   * `exportConfig`, and several pages (Pedidos among them) put their export in\n   * the PAGE HEADER instead. Charging 216 there billed the filters for a button\n   * that was never on the bar — ~108px of budget spent on nothing, which on a\n   * phone is the difference between one filter pill and none.\n   */\n  displayControl: 108,\n  /**\n   * The same control as an icon only — step 2 of the ladder.\n   *\n   * MEASURED at 133px for the PAIR (66 each: a Button's minimum tap target is\n   * a good deal wider than the 20px glyph inside it); 70 keeps that total's\n   * slack at one control's granularity.\n   */\n  displayControlCompact: 70,\n  /**\n   * What step 4 leaves behind: the search as a bare magnifier.\n   *\n   * MEASURED at 30px on the Pedidos bar (`…-search-all-collapsed`); 38 keeps a\n   * tap target's worth of slack over it.\n   */\n  searchIcon: 38,\n  /**\n   * The narrowest keyword box still worth typing into — below it the operator\n   * cannot read back what they wrote, and the box takes over the cluster\n   * instead of sharing it (see `searchTakeover`).\n   *\n   * 120 rather than 140 because this is compared against the ESTIMATE, which\n   * over-prices on purpose (see `estimateWidth`). At 140 a large phone took the\n   * whole cluster to produce a box barely wider than the one it could have had\n   * while keeping its filters — paying for nothing.\n   */\n  usableSearch: 120,\n  /**\n   * The \"Mais\" button, only charged when there IS an overflow — and priced by\n   * the state it is actually in, like the right-hand cluster beside it.\n   *\n   * MEASURED: 128px with its label, badge and chevron; 69px once the ladder has\n   * it down to icon + badge. One number for both was wrong in BOTH directions —\n   * it under-priced the wide bar (the row's own failure mode) and over-priced\n   * the narrow one by a whole pill.\n   */\n  overflowButton: 136,\n  overflowButtonCompact: 80,\n  /**\n   * \"Limpar\", only charged when there IS something to clear.\n   *\n   * It appears exactly when the row is at its widest — every applied filter\n   * has a longer label than the idle one it replaced — so leaving it unpriced\n   * would break the line at the one moment the operator most needs it.\n   * Measured at 64 as an icon; 72 with slack.\n   */\n  clearAll: 72,\n  /**\n   * The row's own padding, plus the gaps BETWEEN the fixed furniture.\n   *\n   * Not the per-control gaps — `splitFilters` already adds `betweenControls`\n   * for every filter it keeps, so counting a fourth one here charged one gap twice.\n   * MEASURED: 32px of padding (16 each side) + three 8px gaps between the\n   * search, the counter and the right cluster.\n   */\n  chrome: 56,\n  /** The gap between two controls. */\n  betweenControls: 8,\n} as const;\n\n/** {@link RESERVED} at a theme's type scale — the px the measured bar is in. */\nexport type Prices = Record<keyof typeof RESERVED, number>;\n\n/** Price the furniture for `theme`: every {@link RESERVED} entry through `remPx`. */\nexport function pricesFor(theme: Theme): Prices {\n  const entries = Object.entries(RESERVED).map(([key, px]) => [key, remPx(theme, px)]);\n  return Object.fromEntries(entries) as Prices;\n}\n\n/** What the right-hand cluster costs, given what the host actually renders. */\nexport function rightClusterCost(price: Prices, hasExport: boolean, compact: boolean): number {\n  const one = compact ? price.displayControlCompact : price.displayControl;\n  return hasExport ? one * 2 : one;\n}\n\n/**\n * What the toolbar furniture costs at a given rung of the ladder — the budget\n * the filter controls have to fit AROUND.\n *\n * This exists because the two halves used to disagree. `splitFilters` priced\n * the furniture at its widest (search 200 + counter 96 + right 216) and shed\n * every filter to make room; the ladder then collapsed those very controls to\n * 44 + 0 + 140 and nobody handed the ~330px back. On a 428px phone that showed\n * as a bar carrying a magnifier, a \"Mais 5\" pill, and a band of nothing.\n */\nexport function furnitureCost(\n  price: Prices,\n  flags: { searchCollapsed: boolean; counterHidden: boolean; compactControls: boolean },\n  hasExport: boolean,\n): number {\n  return (\n    (flags.searchCollapsed ? price.searchIcon : price.search) +\n    (flags.counterHidden ? 0 : price.counter) +\n    rightClusterCost(price, hasExport, flags.compactControls) +\n    price.chrome\n  );\n}\n"],"mappings":";;;;;AAiCO,SAAS,cAAc,OAAc,MAAc,OAAuB;AAmB/E,SAAO,MAAM,OAAO,KAAK,MAAM,KAAK,SAAS,GAAG,IAAI,KAAK,KAAK;AAChE;AAGO,SAAS,WAAW,OAAwC;AACjE,SAAO,QAAQ,UAAU,MAAM,QAAQ,UAAa,MAAM,QAAQ,OAAU;AAC9E;AAGO,SAAS,SAA4C,OAAyB,QAA0B;AAC7G,MAAI,OAAO,WAAW,EAAG,QAAO,MAAM;AACtC,MAAI,OAAO,WAAW,GAAG;AACvB,UAAM,SAAS,MAAM,MAAM,QAAQ,KAAK,CAAC,UAAU,MAAM,UAAU,OAAO,CAAC,CAAC;AAC5E,WAAO,GAAG,MAAM,KAAK,KAAK,QAAQ,SAAS,OAAO,CAAC,CAAC;AAAA,EACtD;AACA,SAAO,GAAG,MAAM,KAAK,KAAK,OAAO,MAAM;AACzC;AAGO,IAAM,WAAW;AAAA;AAAA,EAEtB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQR,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWT,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQhB,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvB,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWZ,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUd,gBAAgB;AAAA,EAChB,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASvB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASV,QAAQ;AAAA;AAAA,EAER,iBAAiB;AACnB;AAMO,SAAS,UAAU,OAAsB;AAC9C,QAAM,UAAU,OAAO,QAAQ,QAAQ,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,MAAM,OAAO,EAAE,CAAC,CAAC;AACnF,SAAO,OAAO,YAAY,OAAO;AACnC;AAGO,SAAS,iBAAiB,OAAe,WAAoB,SAA0B;AAC5F,QAAM,MAAM,UAAU,MAAM,wBAAwB,MAAM;AAC1D,SAAO,YAAY,MAAM,IAAI;AAC/B;AAYO,SAAS,cACd,OACA,OACA,WACQ;AACR,UACG,MAAM,kBAAkB,MAAM,aAAa,MAAM,WACjD,MAAM,gBAAgB,IAAI,MAAM,WACjC,iBAAiB,OAAO,WAAW,MAAM,eAAe,IACxD,MAAM;AAEV;","names":[]}

package/dist/{chunk-DZA7RSLX.js → chunk-DVSO3EG6.js}

@@ -1,11 +1,16 @@
 import {
   useResize
-} from "./chunk-P6TNXBDA.js";
+} from "./chunk-MYKWJCR7.js";
 import {
+  axisPx,
   defaultHandles,
   handleStyle,
-  resolveResizableProps
-} from "./chunk-3TDVGZZN.js";
+  resolveResizableProps,
+  startSizePx
+} from "./chunk-QBTBRJ2Q.js";
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/Resizable/Resizable.tsx
 import Box from "@mui/material/Box/index.js";
@@ -16,8 +21,8 @@ var Resizable = (rawProps) => {
   const {
     children,
     variant,
-    width: initialWidth,
-    height: initialHeight,
+    width,
+    height,
     minWidth,
     maxWidth,
     minHeight,
@@ -30,17 +35,18 @@ var Resizable = (rawProps) => {
     ...rest
   } = resolveResizableProps(rawProps);
   const theme = useTheme();
+  const start = useMemo(() => startSizePx(theme, width, height), [theme, width, height]);
   const bounds = useMemo(
     () => ({
-      width: { min: minWidth, max: maxWidth },
-      height: { min: minHeight, max: maxHeight }
+      width: axisPx(theme, minWidth, maxWidth),
+      height: axisPx(theme, minHeight, maxHeight)
     }),
-    [minWidth, maxWidth, minHeight, maxHeight]
+    [theme, minWidth, maxWidth, minHeight, maxHeight]
   );
   const { size, isResizing, activeHandle, handleMouseDown } = useResize({
-    width: initialWidth,
-    height: initialHeight,
+    start,
     bounds,
+    pxPerDesignPx: remPx(theme, 1),
     disabled,
     onResize
   });
@@ -53,6 +59,8 @@ var Resizable = (rawProps) => {
       "data-testid": dataTestId,
       sx: {
         position: "relative",
+        // The live size: the start and the clamp came through `remPx`, the rest
+        // is pointer pixels dragged, so it is px as it stands.
         width: size.width,
         height: size.height,
         border: `1px solid ${theme.palette.divider}`,
@@ -83,4 +91,4 @@ var Resizable = (rawProps) => {
 export {
   Resizable
 };
-//# sourceMappingURL=chunk-DZA7RSLX.js.map
+//# sourceMappingURL=chunk-DVSO3EG6.js.map

package/dist/chunk-DVSO3EG6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Resizable/Resizable.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React, { useMemo } from 'react';\n\nimport { remPx } from '../../../tokens/relative';\n\nimport {\n  axisPx,\n  defaultHandles,\n  handleStyle,\n  resolveResizableProps,\n  startSizePx,\n} from './Resizable.helpers';\nimport { useResize } from './Resizable.hooks';\nimport type { ResizableProps } from './Resizable.types';\n\nexport const Resizable: React.FC<ResizableProps> = (rawProps) => {\n  const {\n    children,\n    variant,\n    width,\n    height,\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n    onResize,\n    disabled,\n    handles,\n    className,\n    'data-testid': dataTestId,\n    ...rest\n  } = resolveResizableProps(rawProps);\n  const theme = useTheme();\n  // Keyed apart: a new `start` re-seats the box, which a changed clamp must not do.\n  const start = useMemo(() => startSizePx(theme, width, height), [theme, width, height]);\n  const bounds = useMemo(\n    () => ({\n      width: axisPx(theme, minWidth, maxWidth),\n      height: axisPx(theme, minHeight, maxHeight),\n    }),\n    [theme, minWidth, maxWidth, minHeight, maxHeight],\n  );\n\n  const { size, isResizing, activeHandle, handleMouseDown } = useResize({\n    start,\n    bounds,\n    pxPerDesignPx: remPx(theme, 1),\n    disabled,\n    onResize,\n  });\n\n  const activeHandles = handles || defaultHandles(variant);\n\n  return (\n    <Box\n      {...rest}\n      className={className}\n      data-testid={dataTestId}\n      sx={{\n        position: 'relative',\n        // The live size: the start and the clamp came through `remPx`, the rest\n        // is pointer pixels dragged, so it is px as it stands.\n        width: size.width,\n        height: size.height,\n        border: `1px solid ${theme.palette.divider}`,\n        borderRadius: theme.spacing(0.5),\n        overflow: 'hidden',\n        userSelect: isResizing ? 'none' : 'auto',\n        '&:hover .resize-handle': {\n          opacity: 0.3,\n        },\n      }}\n    >\n      {children}\n      {!disabled &&\n        activeHandles.map((handle) => (\n          <Box\n            key={handle}\n            className=\"resize-handle\"\n            data-testid={dataTestId ? `${dataTestId}-handle-${handle}` : undefined}\n            sx={handleStyle(theme, handle, isResizing && activeHandle.current === handle)}\n            onMouseDown={(e) => handleMouseDown(e, handle)}\n          />\n        ))}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AACzB,SAAgB,eAAe;AAqD3B,SAsBM,KAtBN;AAvCG,IAAM,YAAsC,CAAC,aAAa;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,sBAAsB,QAAQ;AAClC,QAAM,QAAQ,SAAS;AAEvB,QAAM,QAAQ,QAAQ,MAAM,YAAY,OAAO,OAAO,MAAM,GAAG,CAAC,OAAO,OAAO,MAAM,CAAC;AACrF,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,OAAO,OAAO,OAAO,UAAU,QAAQ;AAAA,MACvC,QAAQ,OAAO,OAAO,WAAW,SAAS;AAAA,IAC5C;AAAA,IACA,CAAC,OAAO,UAAU,UAAU,WAAW,SAAS;AAAA,EAClD;AAEA,QAAM,EAAE,MAAM,YAAY,cAAc,gBAAgB,IAAI,UAAU;AAAA,IACpE;AAAA,IACA;AAAA,IACA,eAAe,MAAM,OAAO,CAAC;AAAA,IAC7B;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,WAAW,eAAe,OAAO;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA,QACF,UAAU;AAAA;AAAA;AAAA,QAGV,OAAO,KAAK;AAAA,QACZ,QAAQ,KAAK;AAAA,QACb,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,QAC1C,cAAc,MAAM,QAAQ,GAAG;AAAA,QAC/B,UAAU;AAAA,QACV,YAAY,aAAa,SAAS;AAAA,QAClC,0BAA0B;AAAA,UACxB,SAAS;AAAA,QACX;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,QACA,CAAC,YACA,cAAc,IAAI,CAAC,WACjB;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,eAAa,aAAa,GAAG,UAAU,WAAW,MAAM,KAAK;AAAA,YAC7D,IAAI,YAAY,OAAO,QAAQ,cAAc,aAAa,YAAY,MAAM;AAAA,YAC5E,aAAa,CAAC,MAAM,gBAAgB,GAAG,MAAM;AAAA;AAAA,UAJxC;AAAA,QAKP,CACD;AAAA;AAAA;AAAA,EACL;AAEJ;","names":[]}

package/dist/{chunk-OS6KPL4D.js → chunk-EHYI2WCJ.js}

@@ -8,13 +8,13 @@ import {
   metaShape,
   rowStyles,
   useRowShell
-} from "./chunk-FFCJ7NR2.js";
+} from "./chunk-KRQUPE4K.js";
 import {
   ListCardActions,
   ListCardCaption,
   ListCardMeta,
   ListCardTail
-} from "./chunk-M2JTIH5M.js";
+} from "./chunk-F44R7US6.js";
 import {
   useDisclosure
 } from "./chunk-2JCRNWHE.js";
@@ -23,7 +23,7 @@ import {
 } from "./chunk-K4EKTMTC.js";
 import {
   cellRailsTemplate
-} from "./chunk-NB3FGWU4.js";
+} from "./chunk-EQXIW5MQ.js";
 import {
   ListCardCells,
   cellTracks,
@@ -179,4 +179,4 @@ function BaseListCard(props) {
 export {
   BaseListCard
 };
-//# sourceMappingURL=chunk-OS6KPL4D.js.map
+//# sourceMappingURL=chunk-EHYI2WCJ.js.map

package/dist/{chunk-NB3FGWU4.js → chunk-EQXIW5MQ.js}

@@ -1,6 +1,6 @@
 import {
   DENSITY_ROW_PADDING
-} from "./chunk-PMOEG36E.js";
+} from "./chunk-XZJM6EPC.js";
 import {
   CellConfigProvider,
   cellTracks
@@ -129,4 +129,4 @@ export {
   cellRailCount,
   ListCardGroup
 };
-//# sourceMappingURL=chunk-NB3FGWU4.js.map
+//# sourceMappingURL=chunk-EQXIW5MQ.js.map

package/dist/{chunk-C66RGVAS.js → chunk-ERY6D2OV.js}

@@ -1,6 +1,6 @@
 import {
   resolveScrollAreaProps
-} from "./chunk-RHIDWUK7.js";
+} from "./chunk-QUWK7SYN.js";
 import {
   ScrollViewport
 } from "./chunk-BAZXVFLR.js";
@@ -12,6 +12,7 @@ import {
 } from "./chunk-I7GSRTGQ.js";
 import {
   rem,
+  remPx,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
@@ -83,6 +84,7 @@ var useScrollArea = (props) => {
     scrollToTopThreshold,
     smoothScroll
   } = props;
+  const theme = useTheme();
   const { scrollRef, setScrollRef, containerDimensions } = useObservedScrollRef({
     externalScrollRef,
     onResize
@@ -98,11 +100,11 @@ var useScrollArea = (props) => {
       if (disabled) return;
       noteScroll();
       if (scrollToTopButton && scrollRef.current) {
-        setShowScrollToTop(scrollRef.current.scrollTop > scrollToTopThreshold);
+        setShowScrollToTop(scrollRef.current.scrollTop > remPx(theme, scrollToTopThreshold ?? 100));
       }
       onScroll?.(event);
     },
-    [disabled, noteScroll, scrollToTopButton, scrollToTopThreshold, onScroll, scrollRef]
+    [disabled, noteScroll, scrollToTopButton, scrollToTopThreshold, onScroll, scrollRef, theme]
   );
   const scrollToTop = useCallback(() => {
     scrollRef.current?.scrollTo({ top: 0, behavior: smoothScroll ? "smooth" : "auto" });
@@ -247,4 +249,4 @@ var ScrollArea = (componentProps) => {
 export {
   ScrollArea
 };
-//# sourceMappingURL=chunk-C66RGVAS.js.map
+//# sourceMappingURL=chunk-ERY6D2OV.js.map

package/dist/chunk-ERY6D2OV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';\nimport Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Fab from '@mui/material/Fab/index.js';\nimport Zoom from '@mui/material/Zoom/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { rem, remPx, sxRem } from '../../../tokens/relative';\n\nimport type { ResolvedScrollAreaProps } from './ScrollArea.helpers';\nimport { resolveScrollAreaProps } from './ScrollArea.helpers';\nimport { sizeCss } from './ScrollArea.styles';\nimport type { ScrollAreaProps } from './ScrollArea.types';\nimport { ScrollAreaContent } from './ScrollAreaContent';\nimport { ScrollViewport } from './ScrollViewport';\n\n// Owns the scroll container ref (merging in any ref the caller passed) and\n// reports size changes through a ResizeObserver.\nconst useObservedScrollRef = ({\n  externalScrollRef,\n  onResize }: {\n  externalScrollRef?: React.Ref<HTMLDivElement>;\n  onResize?: ScrollAreaProps['onResize'];\n}) => {\n  const internalScrollRef = useRef<HTMLDivElement>(null);\n  const [containerDimensions, setContainerDimensions] = useState({ width: 0, height: 0 });\n\n  // Track container dimensions with ResizeObserver\n  useEffect(() => {\n    if (!internalScrollRef.current) return;\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (entry) {\n        const { width, height } = entry.contentRect;\n        setContainerDimensions({ width, height });\n        onResize?.({ width, height });\n      }\n    });\n\n    resizeObserver.observe(internalScrollRef.current);\n    return () => resizeObserver.disconnect();\n  }, [onResize]);\n\n  // Callback ref that updates both internal and external refs\n  const setScrollRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      // Update internal ref\n      (internalScrollRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      // Update external ref if provided\n      if (externalScrollRef) {\n        (externalScrollRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    },\n    [externalScrollRef],\n  );\n\n  // Use internal ref for accessing the element\n\n  return { scrollRef: internalScrollRef, setScrollRef, containerDimensions };\n};\n\n// Scroll position, the transient \"is scrolling\" flag that drives auto-hide, the\n// observed container size, and the scroll-to-top affordance.\n// The scrollbar shows while scrolling and hides once movement stops.\nconst useAutoHide = ({\n  autoHide,\n  alwaysShowScrollbar,\n  autoHideDelay }: {\n  autoHide: boolean;\n  alwaysShowScrollbar: boolean;\n  autoHideDelay: number;\n}) => {\n  const [isScrolling, setIsScrolling] = useState(false);\n  const timeoutRef = useRef<number | undefined>(undefined);\n\n  const noteScroll = useCallback(() => {\n    if (!autoHide || alwaysShowScrollbar) return;\n\n    setIsScrolling(true);\n    window.clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(() => setIsScrolling(false), autoHideDelay);\n  }, [autoHide, alwaysShowScrollbar, autoHideDelay]);\n\n  useEffect(() => () => window.clearTimeout(timeoutRef.current), []);\n\n  return { isScrolling, noteScroll };\n};\n\nconst useScrollArea = (\n  props: ResolvedScrollAreaProps & { externalScrollRef?: React.Ref<HTMLDivElement> },\n) => {\n  const {\n    disabled,\n    onScroll,\n    onResize,\n    externalScrollRef,\n    autoHide,\n    autoHideDelay,\n    alwaysShowScrollbar,\n    scrollToTopButton,\n    scrollToTopThreshold,\n    smoothScroll } = props;\n\n  const theme = useTheme();\n  const { scrollRef, setScrollRef, containerDimensions } = useObservedScrollRef({\n    externalScrollRef,\n    onResize });\n  const [showScrollToTop, setShowScrollToTop] = useState(false);\n  const { isScrolling, noteScroll } = useAutoHide({\n    autoHide,\n    alwaysShowScrollbar,\n    autoHideDelay });\n\n  const handleScroll = useCallback(\n    (event: React.UIEvent<HTMLDivElement>) => {\n      if (disabled) return;\n\n      noteScroll();\n\n      if (scrollToTopButton && scrollRef.current) {\n        // 100 design px unless the caller says, in the px `scrollTop` is measured in.\n        setShowScrollToTop(scrollRef.current.scrollTop > remPx(theme, scrollToTopThreshold ?? 100));\n      }\n\n      onScroll?.(event);\n    },\n    [disabled, noteScroll, scrollToTopButton, scrollToTopThreshold, onScroll, scrollRef, theme],\n  );\n\n  const scrollToTop = useCallback(() => {\n    scrollRef.current?.scrollTo({ top: 0, behavior: smoothScroll ? 'smooth' : 'auto' });\n  }, [smoothScroll, scrollRef]);\n\n  return {\n    scrollRef,\n    setScrollRef,\n    isScrolling,\n    showScrollToTop,\n    containerDimensions,\n    handleScroll,\n    scrollToTop };\n};\n\nconst LoadingOverlay: FC = () => (\n  <Box\n    sx={{\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n      zIndex: 10 }}\n  >\n    <CircularProgress />\n  </Box>\n);\n\n// The label is guarded at the call site rather than defaulted: the props union\n// already makes it required alongside `scrollToTopButton`, and a fab with an\n// empty accessible name is the exact failure this port exists to remove.\nconst ScrollToTopFab: FC<{\n  visible: boolean;\n  glass: boolean;\n  scrollToTopLabel: string;\n  onClick: () => void;\n}> = ({\n  visible,\n  glass,\n  scrollToTopLabel,\n  onClick }) => {\n  const theme = useTheme();\n\n  return (\n    <Zoom in={visible}>\n      <Fab\n        size=\"small\"\n        aria-label={scrollToTopLabel}\n        onClick={onClick}\n        sx={{\n          position: 'absolute',\n          bottom: sxRem(16),\n          right: sxRem(16),\n          zIndex: 1,\n          backgroundColor: glass\n            ? alpha(theme.palette.primary.main, 0.2)\n            : theme.palette.primary.main,\n          backdropFilter: glass ? `blur(${rem(theme, 10)})` : 'none',\n          '&:hover': {\n            backgroundColor: glass\n              ? alpha(theme.palette.primary.main, 0.3)\n              : theme.palette.primary.dark } }}\n      >\n        <KeyboardArrowUp />\n      </Fab>\n    </Zoom>\n  );\n};\n\n/** The outer box: its size props through the type scale, then the caller's `sx`. */\nfunction outerBoxSx(\n  theme: Theme,\n  size: Pick<ScrollAreaProps, 'width' | 'height' | 'maxHeight' | 'maxWidth'>,\n  sx: ScrollAreaProps['sx'],\n): SxProps<Theme> {\n  return {\n    position: 'relative',\n    width: sizeCss(theme, size.width),\n    height: sizeCss(theme, size.height),\n    maxHeight: sizeCss(theme, size.maxHeight),\n    maxWidth: sizeCss(theme, size.maxWidth),\n    ...sx,\n  } as SxProps<Theme>;\n}\n\nexport const ScrollArea: React.FC<ScrollAreaProps> = (componentProps) => {\n  const theme = useTheme();\n  const resolved = resolveScrollAreaProps(componentProps);\n  const {\n    regionLabel,\n    scrollToTopLabel,\n    children,\n    width: _width,\n    height: _height,\n    maxHeight: _maxHeight,\n    maxWidth: _maxWidth,\n    orientation: _orientation,\n    scrollbarSize: _scrollbarSize,\n    autoHide,\n    autoHideDelay: _autoHideDelay,\n    smoothScroll: _smoothScroll,\n    variant,\n    onScroll: _onScroll,\n    scrollToTopButton,\n    scrollToTopThreshold: _scrollToTopThreshold,\n    scrollbarColor: _scrollbarColor,\n    scrollbarTrackColor: _scrollbarTrackColor,\n    contentPadding: _contentPadding,\n    alwaysShowScrollbar,\n    disabled,\n    loading,\n    emptyContent,\n    testId,\n    scrollRef: externalScrollRef,\n    onResize: _onResize,\n    sx,\n    ...props\n  } = resolved;\n\n  const { scrollRef, setScrollRef, isScrolling, showScrollToTop, containerDimensions, handleScroll, scrollToTop } =\n    useScrollArea({ ...resolved, externalScrollRef });\n\n  // Auto-hide keeps the scrollbar out of the way until the user is scrolling.\n  const shouldShowScrollbar = alwaysShowScrollbar || !autoHide || isScrolling;\n\n  return (\n    <Box\n      data-testid={testId}\n      sx={outerBoxSx(theme, resolved, sx)}\n      {...props}\n    >\n      <ScrollViewport\n        {...resolved}\n        regionLabel={regionLabel}\n        shouldShowScrollbar={shouldShowScrollbar}\n        setScrollRef={setScrollRef}\n        onScroll={handleScroll}\n      >\n        <ScrollAreaContent\n          emptyContent={emptyContent}\n          scrollRef={scrollRef}\n          containerWidth={containerDimensions.width}\n        >\n          {children}\n        </ScrollAreaContent>\n      </ScrollViewport>\n\n      {loading && <LoadingOverlay />}\n\n      {scrollToTopButton && scrollToTopLabel && !disabled && !loading && (\n        <ScrollToTopFab\n          scrollToTopLabel={scrollToTopLabel}\n          visible={showScrollToTop}\n          glass={variant === 'glass'}\n          onClick={scrollToTop}\n        />\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,OAAO,qBAAqB;AAC5B,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,SAAS,OAAO,gBAAgB;AAGhC,SAAgB,aAAa,WAAW,QAAQ,gBAAgB;AAoJ5D,cAsGA,YAtGA;AAvIJ,IAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAS,MAGL;AACJ,QAAM,oBAAoB,OAAuB,IAAI;AACrD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAGtF,YAAU,MAAM;AACd,QAAI,CAAC,kBAAkB,QAAS;AAEhC,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAAY;AACrD,YAAM,QAAQ,QAAQ,CAAC;AACvB,UAAI,OAAO;AACT,cAAM,EAAE,OAAO,OAAO,IAAI,MAAM;AAChC,+BAAuB,EAAE,OAAO,OAAO,CAAC;AACxC,mBAAW,EAAE,OAAO,OAAO,CAAC;AAAA,MAC9B;AAAA,IACF,CAAC;AAED,mBAAe,QAAQ,kBAAkB,OAAO;AAChD,WAAO,MAAM,eAAe,WAAW;AAAA,EACzC,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,eAAe;AAAA,IACnB,CAAC,SAAgC;AAE/B,MAAC,kBAAoE,UAAU;AAE/E,UAAI,mBAAmB;AACrB,QAAC,kBAAoE,UAAU;AAAA,MACjF;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAIA,SAAO,EAAE,WAAW,mBAAmB,cAAc,oBAAoB;AAC3E;AAKA,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAc,MAIV;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,aAAa,OAA2B,MAAS;AAEvD,QAAM,aAAa,YAAY,MAAM;AACnC,QAAI,CAAC,YAAY,oBAAqB;AAEtC,mBAAe,IAAI;AACnB,WAAO,aAAa,WAAW,OAAO;AACtC,eAAW,UAAU,OAAO,WAAW,MAAM,eAAe,KAAK,GAAG,aAAa;AAAA,EACnF,GAAG,CAAC,UAAU,qBAAqB,aAAa,CAAC;AAEjD,YAAU,MAAM,MAAM,OAAO,aAAa,WAAW,OAAO,GAAG,CAAC,CAAC;AAEjE,SAAO,EAAE,aAAa,WAAW;AACnC;AAEA,IAAM,gBAAgB,CACpB,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAa,IAAI;AAEnB,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,WAAW,cAAc,oBAAoB,IAAI,qBAAqB;AAAA,IAC5E;AAAA,IACA;AAAA,EAAS,CAAC;AACZ,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAC5D,QAAM,EAAE,aAAa,WAAW,IAAI,YAAY;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,EAAc,CAAC;AAEjB,QAAM,eAAe;AAAA,IACnB,CAAC,UAAyC;AACxC,UAAI,SAAU;AAEd,iBAAW;AAEX,UAAI,qBAAqB,UAAU,SAAS;AAE1C,2BAAmB,UAAU,QAAQ,YAAY,MAAM,OAAO,wBAAwB,GAAG,CAAC;AAAA,MAC5F;AAEA,iBAAW,KAAK;AAAA,IAClB;AAAA,IACA,CAAC,UAAU,YAAY,mBAAmB,sBAAsB,UAAU,WAAW,KAAK;AAAA,EAC5F;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,cAAU,SAAS,SAAS,EAAE,KAAK,GAAG,UAAU,eAAe,WAAW,OAAO,CAAC;AAAA,EACpF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAY;AAChB;AAEA,IAAM,iBAAqB,MACzB;AAAA,EAAC;AAAA;AAAA,IACC,IAAI;AAAA,MACF,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA,MACX,QAAQ;AAAA,IAAG;AAAA,IAEb,8BAAC,oBAAiB;AAAA;AACpB;AAMF,IAAM,iBAKD,CAAC;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAQ,MAAM;AACd,QAAM,QAAQ,SAAS;AAEvB,SACE,oBAAC,QAAK,IAAI,SACR;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ;AAAA,MACA,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ,MAAM,EAAE;AAAA,QAChB,OAAO,MAAM,EAAE;AAAA,QACf,QAAQ;AAAA,QACR,iBAAiB,QACb,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,IACrC,MAAM,QAAQ,QAAQ;AAAA,QAC1B,gBAAgB,QAAQ,QAAQ,IAAI,OAAO,EAAE,CAAC,MAAM;AAAA,QACpD,WAAW;AAAA,UACT,iBAAiB,QACb,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,IACrC,MAAM,QAAQ,QAAQ;AAAA,QAAK;AAAA,MAAE;AAAA,MAErC,8BAAC,mBAAgB;AAAA;AAAA,EACnB,GACF;AAEJ;AAGA,SAAS,WACP,OACA,MACA,IACgB;AAChB,SAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO,QAAQ,OAAO,KAAK,KAAK;AAAA,IAChC,QAAQ,QAAQ,OAAO,KAAK,MAAM;AAAA,IAClC,WAAW,QAAQ,OAAO,KAAK,SAAS;AAAA,IACxC,UAAU,QAAQ,OAAO,KAAK,QAAQ;AAAA,IACtC,GAAG;AAAA,EACL;AACF;AAEO,IAAM,aAAwC,CAAC,mBAAmB;AACvE,QAAM,QAAQ,SAAS;AACvB,QAAM,WAAW,uBAAuB,cAAc;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAa;AAAA,IACb,eAAe;AAAA,IACf;AAAA,IACA,eAAe;AAAA,IACf,cAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,IAChB,qBAAqB;AAAA,IACrB,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,EAAE,WAAW,cAAc,aAAa,iBAAiB,qBAAqB,cAAc,YAAY,IAC5G,cAAc,EAAE,GAAG,UAAU,kBAAkB,CAAC;AAGlD,QAAM,sBAAsB,uBAAuB,CAAC,YAAY;AAEhE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,IAAI,WAAW,OAAO,UAAU,EAAE;AAAA,MACjC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,gBAAgB,oBAAoB;AAAA,gBAEnC;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA,QAEC,WAAW,oBAAC,kBAAe;AAAA,QAE3B,qBAAqB,oBAAoB,CAAC,YAAY,CAAC,WACtD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,YACT,OAAO,YAAY;AAAA,YACnB,SAAS;AAAA;AAAA,QACX;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/{chunk-M2JTIH5M.js → chunk-F44R7US6.js}

@@ -1,6 +1,6 @@
 import {
   RAIL_GAP_PX
-} from "./chunk-NB3FGWU4.js";
+} from "./chunk-EQXIW5MQ.js";
 import {
   DescriptionItem
 } from "./chunk-VIRYHNEM.js";
@@ -226,4 +226,4 @@ export {
   ListCardActions,
   ListCardTail
 };
-//# sourceMappingURL=chunk-M2JTIH5M.js.map
+//# sourceMappingURL=chunk-F44R7US6.js.map

package/dist/{chunk-AROBXRC5.js → chunk-F7JTIHV5.js}

@@ -1,6 +1,9 @@
 import {
   cellValue
 } from "./chunk-G3E66C6J.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/DataGrid/DataGrid.cells.tsx
 import ArrowDownward from "@mui/icons-material/ArrowDownward";
@@ -25,6 +28,17 @@ function ariaSort(dir) {
   if (!dir) return "none";
   return dir === "asc" ? "ascending" : "descending";
 }
+function columnLength(theme, value) {
+  if (typeof value !== "number") return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+}
+function columnBox(theme, column) {
+  return {
+    minWidth: columnLength(theme, column.minWidth),
+    maxWidth: columnLength(theme, column.maxWidth),
+    width: columnLength(theme, column.width)
+  };
+}
 function HeaderCell({
   column,
   sort,
@@ -47,9 +61,7 @@ function HeaderCell({
         backgroundColor: theme.palette.background.paper,
         borderBottom: `1px solid ${theme.palette.divider}`,
         height: headerHeight,
-        minWidth: column.minWidth,
-        maxWidth: column.maxWidth,
-        width: column.width
+        ...columnBox(theme, column)
       },
       role: "columnheader",
       "aria-sort": ariaSort(sort?.dir),
@@ -83,6 +95,7 @@ function DataCell({
   editing,
   model
 }) {
+  const theme = useTheme();
   const value = cellValue(row, column);
   const isEditing = model.editingCell?.rowId === rowId && model.editingCell?.colId === column.id;
   const content = column.cell ? column.cell({ value, row, rowIndex, col: column }) : String(value ?? "");
@@ -93,9 +106,7 @@ function DataCell({
       "data-col-id": column.id,
       "data-editing": isEditing,
       sx: {
-        minWidth: column.minWidth,
-        maxWidth: column.maxWidth,
-        width: column.width,
+        ...columnBox(theme, column),
         height: rowHeight
       },
       role: "gridcell",
@@ -193,4 +204,4 @@ export {
   DataCell,
   GridRow
 };
-//# sourceMappingURL=chunk-AROBXRC5.js.map
+//# sourceMappingURL=chunk-F7JTIHV5.js.map

package/dist/chunk-F7JTIHV5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataGrid/DataGrid.cells.tsx"],"sourcesContent":["/**\n * The DataGrid's cell and row renderers.\n *\n * Components rather than closures over the grid's scope: as inline `render*`\n * functions they could reach every piece of the component's state, which is how\n * the body grew past 700 lines. Each one now states exactly what it needs.\n */\nimport ArrowDownward from '@mui/icons-material/ArrowDownward';\nimport ArrowUpward from '@mui/icons-material/ArrowUpward';\nimport ExpandLess from '@mui/icons-material/ExpandLess';\nimport ExpandMore from '@mui/icons-material/ExpandMore';\nimport UnfoldMore from '@mui/icons-material/UnfoldMore';\nimport Button from '@mui/material/Button/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport TableCell from '@mui/material/TableCell/index.js';\nimport TableRow from '@mui/material/TableRow/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport { cellValue } from './DataGrid.rows';\nimport type { DataGridModel } from './DataGrid.model';\nimport type { DataGridProps, GridColumn, GridSort } from './DataGrid.types';\n\n/** The glyph for a column's current sort state — unsorted included. */\nfunction SortIcon({ dir }: { dir: GridSort['dir'] | undefined }): React.JSX.Element {\n  if (!dir) return <UnfoldMore fontSize=\"small\" sx={{ opacity: 0.5 }} />;\n  return dir === 'asc' ? <ArrowUpward fontSize=\"small\" /> : <ArrowDownward fontSize=\"small\" />;\n}\n\n/** `aria-sort`'s three values, which are not the same words as `SortDirection`. */\nfunction ariaSort(dir: GridSort['dir'] | undefined): 'none' | 'ascending' | 'descending' {\n  if (!dir) return 'none';\n  return dir === 'asc' ? 'ascending' : 'descending';\n}\n\n/**\n * One of a column's `width`/`minWidth`/`maxWidth` as CSS. A number is design\n * px through the type scale — except 1 or less, which `sx` has always read as a\n * fraction of the table and still does; a string (`'312px'`, `'20%'`) is used as\n * given.\n */\nfunction columnLength(theme: Theme, value: number | string | undefined): string | undefined {\n  if (typeof value !== 'number') return value;\n  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);\n}\n\n/** A column's size constraints, as the `sx` of its header and its cells. */\nfunction columnBox<T extends Record<string, unknown>>(\n  theme: Theme,\n  column: GridColumn<T>,\n): { minWidth?: string; maxWidth?: string; width?: string } {\n  return {\n    minWidth: columnLength(theme, column.minWidth),\n    maxWidth: columnLength(theme, column.maxWidth),\n    width: columnLength(theme, column.width),\n  };\n}\n\nexport interface HeaderCellProps<T extends Record<string, unknown>> {\n  column: GridColumn<T>;\n  sort: GridSort | undefined;\n  sortable: boolean;\n  stickyHeader: boolean;\n  /** The header row's height, as CSS. */\n  headerHeight: string;\n  onSort: (columnId: string) => void;\n}\n\nexport function HeaderCell<T extends Record<string, unknown>>({\n  column,\n  sort,\n  sortable,\n  stickyHeader,\n  headerHeight,\n  onSort,\n}: HeaderCellProps<T>): React.JSX.Element {\n  const theme = useTheme();\n  const content = column.headerCell ? column.headerCell(column) : column.header;\n  return (\n    <TableCell\n      data-slot=\"header-cell\"\n      data-sort={sort?.dir ?? 'none'}\n      sx={{\n        position: stickyHeader ? 'sticky' : 'static',\n        top: 0,\n        zIndex: 1,\n        backgroundColor: theme.palette.background.paper,\n        borderBottom: `1px solid ${theme.palette.divider}`,\n        height: headerHeight,\n        ...columnBox(theme, column),\n      }}\n      role=\"columnheader\"\n      aria-sort={ariaSort(sort?.dir)}\n    >\n      {sortable ? (\n        <Button\n          onClick={() => onSort(column.id)}\n          sx={{\n            justifyContent: 'flex-start',\n            textTransform: 'none',\n            fontWeight: 500,\n            color: 'inherit',\n            p: 0,\n            minWidth: 0,\n            '&:hover': { backgroundColor: 'transparent', opacity: 0.8 },\n          }}\n          endIcon={<SortIcon dir={sort?.dir} />}\n          aria-label={column.ariaLabel ?? `Sort by ${String(column.header)}`}\n        >\n          {content}\n        </Button>\n      ) : (\n        <Typography variant=\"subtitle2\" fontWeight={500}>\n          {content}\n        </Typography>\n      )}\n    </TableCell>\n  );\n}\n\nexport interface DataCellProps<T extends Record<string, unknown>> {\n  row: T;\n  rowIndex: number;\n  rowId: string | number;\n  column: GridColumn<T>;\n  /** The row's height, as CSS — `DataGridModel.rowHeight`. */\n  rowHeight: string;\n  editing: NonNullable<DataGridProps<T>['editing']>;\n  model: Pick<DataGridModel<T>, 'editingCell' | 'setEditingCell'>;\n}\n\nexport function DataCell<T extends Record<string, unknown>>({\n  row,\n  rowIndex,\n  rowId,\n  column,\n  rowHeight,\n  editing,\n  model,\n}: DataCellProps<T>): React.JSX.Element {\n  const theme = useTheme();\n  const value = cellValue(row, column);\n  const isEditing =\n    model.editingCell?.rowId === rowId && model.editingCell?.colId === column.id;\n  const content = column.cell\n    ? column.cell({ value, row, rowIndex, col: column })\n    : String(value ?? '');\n  return (\n    <TableCell\n      data-slot=\"cell\"\n      data-col-id={column.id}\n      data-editing={isEditing}\n      sx={{\n        ...columnBox(theme, column),\n        height: rowHeight,\n      }}\n      role=\"gridcell\"\n      tabIndex={-1}\n    >\n      {isEditing && column.editor\n        ? column.editor({\n            value,\n            row,\n            onChange: () => undefined,\n            commit: () => {\n              editing.onEditCommit?.({ rowId, colId: column.id, value, row });\n              model.setEditingCell(null);\n            },\n            cancel: () => model.setEditingCell(null),\n          })\n        : content}\n    </TableCell>\n  );\n}\n\nexport interface GridRowProps<T extends Record<string, unknown>> {\n  row: T;\n  index: number;\n  rowId: string | number;\n  isSelected: boolean;\n  isExpanded: boolean;\n  totalColumns: number;\n  model: DataGridModel<T>;\n  props: DataGridProps<T>;\n}\n\n/** The leading checkbox / chevron cells, which exist only for enabled features. */\nfunction RowControls<T extends Record<string, unknown>>({\n  row,\n  index,\n  rowId,\n  isSelected,\n  isExpanded,\n  model,\n  props,\n}: GridRowProps<T>): React.JSX.Element {\n  const { selection = { mode: 'none' }, expansion } = props;\n  return (\n    <>\n      {selection.mode !== 'none' && (\n        <TableCell padding=\"checkbox\">\n          <Checkbox\n            checked={isSelected}\n            onChange={(event) => model.onToggleRow(rowId, event.target.checked)}\n            inputProps={{ 'aria-label': `Select row ${index + 1}` }}\n          />\n        </TableCell>\n      )}\n      {expansion && (\n        <TableCell padding=\"checkbox\">\n          {expansion.isRowExpandable?.(row) === false ? null : (\n            <IconButton\n              size=\"small\"\n              // Stopped so a host that opens the record on a row click does not\n              // ALSO open it here: the chevron is its own control.\n              onClick={(event) => {\n                event.stopPropagation();\n                model.onToggleExpansion(rowId);\n              }}\n              aria-expanded={isExpanded}\n              aria-label={\n                isExpanded\n                  ? (expansion.collapseLabel ?? 'Collapse row')\n                  : (expansion.expandLabel ?? 'Expand row')\n              }\n              data-slot=\"expand-toggle\"\n            >\n              {isExpanded ? <ExpandLess /> : <ExpandMore />}\n            </IconButton>\n          )}\n        </TableCell>\n      )}\n    </>\n  );\n}\n\nexport function GridRow<T extends Record<string, unknown>>(\n  rowProps: GridRowProps<T>,\n): React.JSX.Element {\n  const { row, index, rowId, isSelected, isExpanded, totalColumns, model, props } = rowProps;\n  const theme = useTheme();\n  const expansion = props.expansion;\n  return (\n    <React.Fragment>\n      <TableRow\n        data-slot=\"row\"\n        data-selected={isSelected}\n        data-expanded={isExpanded}\n        sx={{\n          '&:hover': { backgroundColor: theme.palette.action.hover },\n          ...(isSelected && { backgroundColor: theme.palette.action.selected }),\n          height: model.rowHeight,\n        }}\n        role=\"row\"\n        aria-selected={isSelected}\n      >\n        <RowControls {...rowProps} />\n        {model.visibleColumns.map((column) => (\n          <DataCell\n            key={column.id}\n            row={row}\n            rowIndex={index}\n            rowId={rowId}\n            column={column}\n            rowHeight={model.rowHeight}\n            editing={props.editing ?? { mode: 'none' }}\n            model={model}\n          />\n        ))}\n      </TableRow>\n      {expansion && isExpanded && expansion.isRowExpandable?.(row) !== false && (\n        <TableRow data-slot=\"row-detail\">\n          <TableCell colSpan={totalColumns}>{expansion.render(row, index)}</TableCell>\n        </TableRow>\n      )}\n    </React.Fragment>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-T7DE44SP.js → chunk-FF2D7V7T.js}

@@ -70,7 +70,7 @@ var SkeletonIndicator = ({ props }) => {
       height: styleLength(theme, props.height || 200),
       animation: props.skeletonProps.animation || "pulse",
       intensity: props.skeletonProps.intensity,
-      borderRadius: props.borderRadius,
+      borderRadius: styleLength(theme, props.borderRadius),
       "data-testid": `${props["data-testid"]}-skeleton`
     }
   );
@@ -137,7 +137,7 @@ var ErrorFallback = ({ props, metrics }) => {
   return /* @__PURE__ */ jsx(
     FallbackContainer,
     {
-      sx: { width: sxLength(theme, width), height: sxLength(theme, height), borderRadius },
+      sx: { width: sxLength(theme, width), height: sxLength(theme, height), borderRadius: styleLength(theme, borderRadius) },
       "data-testid": `${testId}-fallback`,
       children: fallback
     }
@@ -172,7 +172,9 @@ var LazyImage = React.memo(function LazyImage2(rawProps) {
       sx: {
         width: sxLength(theme, width || "auto"),
         height: sxLength(theme, height || "auto"),
-        borderRadius
+        // The same px length the image gets (`metrics`): in `sx` a bare number
+        // would be a multiple of `shape.borderRadius`, and this box clips (FUT-2656).
+        borderRadius: metrics.borderRadius
       },
       "data-testid": testId,
       children: [
@@ -215,4 +217,4 @@ LazyImage.displayName = "LazyImage";
 export {
   LazyImage
 };
-//# sourceMappingURL=chunk-T7DE44SP.js.map
+//# sourceMappingURL=chunk-FF2D7V7T.js.map

package/dist/chunk-FF2D7V7T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LazyImage/LazyImage.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { styled, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\nimport { Skeleton } from '../../layout/Skeleton';\nimport type { ResolvedLazyImageProps } from './LazyImage.hooks';\nimport { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';\nimport type { LazyImageProps } from './LazyImage.types';\nimport { sheen } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst ImageContainer = styled(Box)(() => ({\n  position: 'relative',\n  display: 'inline-block',\n  overflow: 'hidden',\n}));\n\nconst StyledImage = styled('img')<{\n  fadeIn?: boolean;\n  fadeInDuration?: number;\n  isLoaded?: boolean;\n}>(({ fadeIn, fadeInDuration = 300, isLoaded }) => ({\n  display: 'block',\n  maxWidth: '100%',\n  height: 'auto',\n  opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n  transition: fadeIn ? `opacity ${fadeInDuration}ms ease-in-out` : 'none',\n}));\n\nconst SpinnerOverlay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: sheen(theme, 0.8),\n  borderRadius: '50%',\n  padding: theme.spacing(1),\n}));\n\nconst FallbackContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: theme.palette.action.disabledBackground,\n  color: theme.palette.text.secondary,\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}));\n\ntype Length = number | string | undefined;\n\n/** A length prop as React `style` and MUI's `Skeleton` read it: a number is design px. */\nconst styleLength = (theme: Theme, value: Length): string | undefined =>\n  typeof value === 'number' ? rem(theme, value) : value;\n\n/**\n * A length prop as `sx` reads it on a width or height: a number of 1 or less is\n * a fraction of the parent, and that stays so; any other number is design px.\n */\nconst sxLength = (theme: Theme, value: Length): string | undefined => {\n  if (typeof value !== 'number') return value;\n  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);\n};\n\n/** The box the image occupies, as CSS, shared by the real image and every stand-in for it. */\ninterface BoxMetrics {\n  width?: string;\n  height?: string;\n  objectFit: NonNullable<LazyImageProps['objectFit']>;\n  objectPosition: string;\n  borderRadius?: string;\n}\n\ninterface IndicatorProps {\n  props: ResolvedLazyImageProps;\n  metrics: BoxMetrics;\n}\n\nconst SkeletonIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  return (\n    <Skeleton\n      variant=\"rectangular\"\n      width={styleLength(theme, props.width || '100%')}\n      height={styleLength(theme, props.height || 200)}\n      animation={props.skeletonProps.animation || 'pulse'}\n      intensity={props.skeletonProps.intensity}\n      borderRadius={styleLength(theme, props.borderRadius)}\n      data-testid={`${props['data-testid']}-skeleton`}\n    />\n  );\n};\n\nconst SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  const { spinnerProps } = props;\n\n  return (\n    <SpinnerOverlay>\n      <CircularProgress\n        size={styleLength(theme, spinnerProps.size || 40)}\n        thickness={spinnerProps.thickness || 4}\n        sx={{ color: spinnerProps.color || theme.palette.primary.main }}\n        data-testid={`${props['data-testid']}-spinner`}\n      />\n    </SpinnerOverlay>\n  );\n};\n\nconst PlaceholderIndicator: React.FC<IndicatorProps & { hasSrc: boolean }> = ({\n  props,\n  metrics,\n  hasSrc,\n}) => {\n  // Once a src has been chosen the real <img> is on screen, so the placeholder\n  // would only stack behind it.\n  if (!props.placeholder || hasSrc) return null;\n\n  return (\n    <StyledImage\n      src={props.placeholder}\n      alt={`${props.alt} (loading)`}\n      style={metrics}\n      data-testid={`${props['data-testid']}-placeholder`}\n    />\n  );\n};\n\nconst LoadingIndicator: React.FC<\n  IndicatorProps & { kind: NonNullable<LazyImageProps['loadingState']>; hasSrc: boolean }\n> = ({ kind, hasSrc, ...rest }) => {\n  switch (kind) {\n    case 'skeleton':\n      return <SkeletonIndicator {...rest} />;\n    case 'spinner':\n      return <SpinnerIndicator {...rest} />;\n    case 'placeholder':\n      return <PlaceholderIndicator {...rest} hasSrc={hasSrc} />;\n    default:\n      return null;\n  }\n};\n\nconst ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {\n  const theme = useTheme();\n  const { alt, fallback, width, height, borderRadius } = props;\n  const testId = props['data-testid'];\n\n  if (!fallback) return null;\n\n  if (typeof fallback === 'string') {\n    return (\n      <StyledImage\n        src={fallback}\n        alt={`${alt} (fallback)`}\n        style={metrics}\n        fadeIn={false}\n        isLoaded={true}\n        data-testid={`${testId}-fallback`}\n      />\n    );\n  }\n\n  return (\n    <FallbackContainer\n      sx={{ width: sxLength(theme, width), height: sxLength(theme, height), borderRadius: styleLength(theme, borderRadius) }}\n      data-testid={`${testId}-fallback`}\n    >\n      {fallback}\n    </FallbackContainer>\n  );\n};\n\n/**\n * LazyImage component with enhanced features for optimized image loading\n * Supports lazy loading, placeholders, error handling, and various loading states\n */\nexport const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps) {\n  const props = resolveLazyImageProps(rawProps);\n  const theme = useTheme();\n  const {\n    state,\n    containerRef,\n    effectiveLoadingState,\n    handleImageLoad,\n    handleImageError,\n    showImage,\n    showLoading,\n  } = useLazyImage(props);\n\n  const { width, height, borderRadius, alt } = props;\n  const testId = props['data-testid'];\n  const metrics: BoxMetrics = {\n    width: styleLength(theme, width),\n    height: styleLength(theme, height),\n    objectFit: props.objectFit,\n    objectPosition: props.objectPosition,\n    borderRadius: styleLength(theme, borderRadius),\n  };\n\n  return (\n    <ImageContainer\n      ref={containerRef}\n      className={props.className}\n      sx={{\n        width: sxLength(theme, width || 'auto'),\n        height: sxLength(theme, height || 'auto'),\n        // The same px length the image gets (`metrics`): in `sx` a bare number\n        // would be a multiple of `shape.borderRadius`, and this box clips (FUT-2656).\n        borderRadius: metrics.borderRadius,\n      }}\n      data-testid={testId}\n    >\n      {showLoading && (\n        <LoadingIndicator\n          kind={effectiveLoadingState}\n          props={props}\n          metrics={metrics}\n          hasSrc={Boolean(state.currentSrc)}\n        />\n      )}\n\n      {showImage && (\n        <StyledImage\n          src={state.currentSrc || undefined}\n          alt={alt}\n          onLoad={handleImageLoad}\n          onError={handleImageError}\n          fadeIn={props.fadeIn}\n          fadeInDuration={props.fadeInDuration}\n          isLoaded={!state.isLoading}\n          decoding={props.decoding}\n          loading={props.lazy ? 'lazy' : props.loading}\n          style={{ ...metrics, ...props.sx }}\n          aria-label={props['aria-label'] || alt}\n          aria-describedby={props['aria-describedby']}\n          role={props.role}\n          data-testid={`${testId}-img`}\n          {...imgPassThrough(props)}\n        />\n      )}\n\n      {state.hasError && <ErrorFallback props={props} metrics={metrics} />}\n    </ImageContainer>\n  );\n});\n\nLazyImage.displayName = 'LazyImage';\n"],"mappings":"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","names":["LazyImage"]}

package/dist/{chunk-XJJXBUPN.js → chunk-FX26DAFF.js}

@@ -1,6 +1,6 @@
 import {
   GridToolbar
-} from "./chunk-CNQUCNEA.js";
+} from "./chunk-I3F4C5SS.js";
 
 // src/components/data-display/DataViews/data-views-shell-toolbar.tsx
 import { jsx } from "react/jsx-runtime";
@@ -64,4 +64,4 @@ function ShellToolbar({
 export {
   ShellToolbar
 };
-//# sourceMappingURL=chunk-XJJXBUPN.js.map
+//# sourceMappingURL=chunk-FX26DAFF.js.map