@12-apps/ui 6.39.1 → 6.39.3

package/dist/{chunk-MC4KYGSX.js → chunk-GFQ4U6WZ.js}

@@ -2,7 +2,7 @@ import {
   indicatorSizeFor,
   stepColors,
   stepPalette
-} from "./chunk-V5KKBMAT.js";
+} from "./chunk-VXQOSADY.js";
 import {
   neutralTones
 } from "./chunk-FQ6UW7IY.js";
@@ -126,9 +126,7 @@ var StepContent = styled(Box, {
 var StepConnector = styled(Box, {
   shouldForwardProp: (prop) => !["orientation", "isCompleted", "color", "variant"].includes(prop)
 })(({ theme, orientation, isCompleted, color, variant }) => {
-  const colorKey = color || "primary";
-  const colorValue = colorKey === "neutral" ? { main: neutralTones(theme).emphasis } : theme.palette[colorKey];
-  const connectorColor = isCompleted ? colorValue.main : neutralTones(theme).track;
+  const connectorColor = isCompleted ? stepPalette(theme, color).main : neutralTones(theme).track;
   return {
     flex: 1,
     position: "relative",
@@ -296,4 +294,4 @@ export {
   StepContentComponent,
   StepItemRow
 };
-//# sourceMappingURL=chunk-MC4KYGSX.js.map
+//# sourceMappingURL=chunk-GFQ4U6WZ.js.map

package/dist/chunk-GFQ4U6WZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/WorkflowStep/WorkflowStep.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { forwardRef, useCallback } from 'react';\n\nimport type { StepColors } from './WorkflowStep.helpers';\nimport { indicatorSizeFor, stepColors, stepPalette } from './WorkflowStep.helpers';\nimport type {\n  StepConnectorProps,\n  StepContentProps,\n  StepIndicatorProps,\n  WorkflowStepProps,\n} from './WorkflowStep.types';\nimport { neutralTones } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\n// `outlined` shows the surface through a coloured rim; the other three fill it and\n// differ only in what border they keep.\nconst indicatorVariantStyles = (\n  theme: Theme,\n  variant: WorkflowStepProps['variant'],\n  { backgroundColor, borderColor, textColor }: StepColors,\n): CSSObject => {\n  if (variant === 'outlined') {\n    return {\n      border: `${rem(theme, 2)} solid ${borderColor}`,\n      backgroundColor: theme.palette.background.paper,\n    };\n  }\n\n  const filled = { backgroundColor, color: textColor };\n\n  switch (variant) {\n    case 'filled':\n      return filled;\n    case 'minimal':\n      return { ...filled, border: 'none' };\n    case 'default':\n      return { ...filled, border: `1px solid ${borderColor}` };\n    default:\n      return {};\n  }\n};\n\nconst StepItem = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'isLast'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  isLast: boolean;\n}>(({ orientation, isLast }) => ({\n  display: 'flex',\n  flexDirection: orientation === 'vertical' ? 'column' : 'row',\n  alignItems: orientation === 'vertical' ? 'flex-start' : 'center',\n  flex: orientation === 'horizontal' && !isLast ? 1 : 'none',\n  position: 'relative',\n  minWidth: 0, // Allow content to shrink\n}));\n\nconst StepIndicator = styled(Box, {\n  shouldForwardProp: (prop) => !['size', 'variant', 'color', 'isActive', 'isCompleted', 'isError', 'interactive', 'disabled'].includes(prop as string),\n})<{\n  size: WorkflowStepProps['size'];\n  variant: WorkflowStepProps['variant'];\n  color: WorkflowStepProps['color'];\n  isActive: boolean;\n  isCompleted: boolean;\n  isError: boolean;\n  interactive: boolean;\n  animated: boolean;\n  disabled: boolean;\n}>(({ theme, size, variant, color, isActive, isCompleted, isError, interactive, animated, disabled }) => {\n  const indicatorSize = indicatorSizeFor(size);\n  const palette = stepPalette(theme, color);\n  const { backgroundColor, borderColor, textColor } = stepColors(theme, palette, {\n    isActive,\n    isCompleted,\n    isError,\n    variant,\n  });\n\n  return {\n    width: rem(theme, indicatorSize),\n    height: rem(theme, indicatorSize),\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: rem(theme, 12),\n    fontWeight: theme.typography.fontWeightMedium,\n    cursor: interactive && !disabled ? 'pointer' : 'default',\n    transition: animated\n      ? theme.transitions.create(['background-color', 'border-color', 'transform'], {\n          duration: theme.transitions.duration.short,\n        })\n      : 'none',\n    flexShrink: 0,\n\n    ...indicatorVariantStyles(theme, variant, { backgroundColor, borderColor, textColor }),\n\n    // Interactive states\n    ...(interactive && !disabled && {\n      '&:hover': {\n        transform: 'scale(1.1)',\n        boxShadow: theme.shadows[2],\n      },\n      '&:focus-visible': {\n        outline: `${rem(theme, 2)} solid ${palette.main}`,\n        outlineOffset: rem(theme, 2),\n      },\n    }),\n\n    // Disabled state\n    ...(disabled && {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    }),\n  };\n});\n\nconst StepContent = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'interactive', 'disabled'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  interactive: boolean;\n  disabled: boolean;\n}>(({ theme, orientation, interactive, disabled }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: orientation === 'vertical' ? 'flex-start' : 'center',\n  textAlign: orientation === 'vertical' ? 'left' : 'center',\n  marginTop: orientation === 'vertical' ? theme.spacing(1) : theme.spacing(0.5),\n  marginLeft: orientation === 'horizontal' ? theme.spacing(1) : 0,\n  cursor: interactive && !disabled ? 'pointer' : 'default',\n  minWidth: 0,\n  flex: 1,\n\n  '& .step-title': {\n    fontSize: rem(theme, 14),\n    fontWeight: theme.typography.fontWeightMedium,\n    color: theme.palette.text.primary,\n    marginBottom: theme.spacing(0.5),\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  },\n\n  '& .step-description': {\n    fontSize: rem(theme, 12),\n    color: theme.palette.text.secondary,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  },\n\n  ...(disabled && {\n    opacity: 0.5,\n  }),\n}));\n\nconst StepConnector = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'isCompleted', 'color', 'variant'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  isCompleted: boolean;\n  color: WorkflowStepProps['color'];\n  variant: WorkflowStepProps['variant'];\n}>(({ theme, orientation, isCompleted, color, variant }) => {\n  const connectorColor = isCompleted ? stepPalette(theme, color).main : neutralTones(theme).track;\n\n  return {\n    flex: 1,\n    position: 'relative',\n    \n    ...(orientation === 'horizontal' && {\n      height: rem(theme, 2),\n      backgroundColor: connectorColor,\n      margin: `0 ${theme.spacing(1)}`,\n      minWidth: theme.spacing(2),\n    }),\n    \n    ...(orientation === 'vertical' && {\n      width: rem(theme, 2),\n      backgroundColor: connectorColor,\n      minHeight: theme.spacing(3),\n      marginLeft: theme.spacing(2),\n      position: 'absolute',\n      left: '50%',\n      transform: 'translateX(-50%)',\n      top: '100%',\n    }),\n\n    transition: theme.transitions.create('background-color', {\n      duration: theme.transitions.duration.short,\n    }),\n\n    ...(variant === 'minimal' && {\n      opacity: 0.6,\n    }),\n  };\n});\n\n/**\n * Individual step indicator component\n */\nconst StepIndicatorComponent = forwardRef<HTMLDivElement, StepIndicatorProps>(({\n  step,\n  index,\n  isActive,\n  isCompleted,\n  isError,\n  variant,\n  color,\n  size,\n  showNumbers,\n  showIcons,\n  completedIcon,\n  errorIcon,\n  interactive,\n  animated,\n  disabled,\n  onClick,\n  'data-testid': dataTestId,\n}, ref) => {\n  const handleClick = useCallback(() => {\n    if (interactive && !disabled && onClick) {\n      onClick(index, step);\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (interactive && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      if (onClick) {\n        onClick(index, step);\n      }\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const renderIndicatorContent = () => {\n    if (isError && errorIcon) {\n      return errorIcon;\n    }\n    if (isCompleted && completedIcon) {\n      return completedIcon;\n    }\n    if (showIcons && step.icon) {\n      return step.icon;\n    }\n    if (showNumbers) {\n      return index + 1;\n    }\n    return null;\n  };\n\n  return (\n    <StepIndicator\n      ref={ref}\n      size={size}\n      variant={variant}\n      color={color}\n      isActive={isActive}\n      isCompleted={isCompleted}\n      isError={isError}\n      interactive={interactive}\n      animated={animated}\n      disabled={Boolean(disabled || step.disabled)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive && !disabled && !step.disabled ? 0 : -1}\n      aria-label={`Step ${index + 1}: ${step.title}`}\n      aria-current={isActive ? 'step' : undefined}\n      data-testid={dataTestId}\n    >\n      {renderIndicatorContent()}\n    </StepIndicator>\n  );\n});\n\nStepIndicatorComponent.displayName = 'StepIndicator';\n\n/**\n * Step connector component\n */\nconst StepConnectorComponent = forwardRef<HTMLDivElement, StepConnectorProps>(({\n  isCompleted,\n  orientation,\n  variant,\n  color,\n  'data-testid': dataTestId,\n}, ref) => (\n  <StepConnector\n    ref={ref}\n    orientation={orientation}\n    isCompleted={isCompleted}\n    color={color}\n    variant={variant}\n    data-testid={dataTestId}\n  />\n));\n\nStepConnectorComponent.displayName = 'StepConnector';\n\n/**\n * Step content component\n */\nconst StepContentComponent = forwardRef<HTMLDivElement, StepContentProps>(({\n  step,\n  index,\n  orientation,\n  interactive,\n  disabled,\n  onClick,\n  'data-testid': dataTestId,\n}, ref) => {\n  const handleClick = useCallback(() => {\n    if (interactive && !disabled && onClick) {\n      onClick(index, step);\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (interactive && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      if (onClick) {\n        onClick(index, step);\n      }\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  return (\n    <StepContent\n      ref={ref}\n      orientation={orientation}\n      interactive={interactive}\n      disabled={Boolean(disabled || step.disabled)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive && !disabled && !step.disabled ? 0 : -1}\n      data-testid={dataTestId}\n    >\n      <div className=\"step-title\">{step.title}</div>\n      {step.description && (\n        <div className=\"step-description\">{step.description}</div>\n      )}\n    </StepContent>\n  );\n});\n\nStepContentComponent.displayName = 'StepContent';\n\n/**\n * A plain wrapper around the styled row. Exporting the styled component itself\n * trips TS2742 — its inferred type names a pnpm-internal @mui/system path.\n */\nexport const StepItemRow: React.FC<{\n  orientation: WorkflowStepProps['orientation'];\n  isLast: boolean;\n  children: React.ReactNode;\n}> = ({ orientation, isLast, children }) => (\n  <StepItem orientation={orientation} isLast={isLast}>\n    {children}\n  </StepItem>\n);\n\nexport { StepConnectorComponent, StepContentComponent, StepIndicatorComponent };\n"],"mappings":"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","names":[]}

package/dist/{chunk-5LWB4BYX.js → chunk-RGT6DM5W.js}

@@ -1,9 +1,6 @@
-import {
-  useVirtualScrolling
-} from "./chunk-YZVR5ROE.js";
 import {
   tableRowHeight
-} from "./chunk-JWZJSXI5.js";
+} from "./chunk-XS3REOPN.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -12,7 +9,6 @@ import {
 import { useCallback as useCallback2 } from "react";
 
 // src/components/data-display/Table/TableParts.tsx
-import Box from "@mui/material/Box/index.js";
 import Checkbox from "@mui/material/Checkbox/index.js";
 import TableBody from "@mui/material/TableBody/index.js";
 import TableCell from "@mui/material/TableCell/index.js";
@@ -62,7 +58,8 @@ var EnhancedTableHeader = React.memo(({
   onSortChange,
   selectable,
   selectedRows = [],
-  onSelectAll
+  onSelectAll,
+  headRef
 }) => {
   const handleSort = useCallback(
     (columnKey) => {
@@ -79,7 +76,7 @@ var EnhancedTableHeader = React.memo(({
     },
     [onSelectAll]
   );
-  return /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+  return /* @__PURE__ */ jsx(TableHead, { ref: headRef, children: /* @__PURE__ */ jsxs(TableRow, { children: [
     selectable && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
       Checkbox,
       {
@@ -154,51 +151,28 @@ var TableDataRow = ({
     String(rowKey)
   );
 };
-var VirtualisedBody = ({ visibleItems, rowHeight, containerHeight, onScroll, renderTableRow }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      onScroll,
-      style: {
-        height: rem(theme, containerHeight),
-        overflow: "auto",
-        position: "relative"
-      },
-      children: /* @__PURE__ */ jsx(
-        TableBody,
-        {
-          style: {
-            height: visibleItems.totalHeight,
-            position: "relative"
-          },
-          children: visibleItems.items.map(
-            (rowData, index) => renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)
-          )
-        }
-      )
-    }
-  );
-};
+var VirtualisedBody = ({ visibleItems, rowHeight, renderTableRow }) => /* @__PURE__ */ jsx(
+  TableBody,
+  {
+    style: {
+      height: visibleItems.totalHeight,
+      position: "relative"
+    },
+    children: visibleItems.items.map(
+      (rowData, index) => renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)
+    )
+  }
+);
 var PlainBody = ({ data, renderTableRow }) => /* @__PURE__ */ jsx(TableBody, { children: data.map((rowData, index) => renderTableRow(rowData, index)) });
 var EnhancedTableBody = React.memo((props) => {
-  const { data, virtualScrolling, containerHeight, overscan = 5 } = props;
+  const { data, virtualWindow } = props;
   const renderTableRow = useTableRowRenderer({ ...props, selectedRows: props.selectedRows ?? [] });
-  const rowHeight = tableRowHeight(props.rowHeight);
-  const { visibleItems, handleScroll } = useVirtualScrolling(
-    data,
-    rowHeight || 40,
-    typeof containerHeight === "number" ? containerHeight : 400,
-    overscan
-  );
-  if (virtualScrolling && containerHeight && rowHeight) {
+  if (virtualWindow) {
     return /* @__PURE__ */ jsx(
       VirtualisedBody,
       {
-        visibleItems,
-        rowHeight,
-        containerHeight,
-        onScroll: handleScroll,
+        visibleItems: virtualWindow,
+        rowHeight: tableRowHeight(props.rowHeight),
         renderTableRow
       }
     );
@@ -294,4 +268,4 @@ export {
   TableDataRow,
   EnhancedTableBody
 };
-//# sourceMappingURL=chunk-5LWB4BYX.js.map
+//# sourceMappingURL=chunk-RGT6DM5W.js.map

package/dist/chunk-RGT6DM5W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Table/TableParts.hooks.tsx","../src/components/data-display/Table/TableParts.tsx"],"sourcesContent":["import type React from 'react';\nimport { useCallback } from 'react';\n\nimport { TableDataRow } from './TableParts';\nimport type { TableBodyProps } from './Table.types';\n\n// Row identity, selection and the row element itself. Split out of\n// EnhancedTableBody so that component is just the virtualised/plain choice.\n// A row's identity: the caller's extractor, else its id, else its position.\nconst useRowKey = (rowKeyExtractor: TableBodyProps['rowKeyExtractor']) =>\n  useCallback(\n    (rowData: Record<string, unknown>, index: number): string | number =>\n      rowKeyExtractor ? rowKeyExtractor(rowData, index) : (rowData.id as string | number) || index,\n    [rowKeyExtractor],\n  );\n\nconst useRowSelection = ({\n  selectedRows,\n  onSelectionChange,\n}: {\n  selectedRows: Array<string | number>;\n  onSelectionChange: TableBodyProps['onSelectionChange'];\n}) =>\n  useCallback(\n    (event: React.MouseEvent | React.ChangeEvent, rowKey: string | number) => {\n      // Stop propagation so selecting does not also fire the row click.\n      event.stopPropagation();\n      if (!onSelectionChange) return;\n      onSelectionChange(rowKey, !selectedRows.includes(rowKey));\n    },\n    [onSelectionChange, selectedRows],\n  );\n\nexport const useTableRowRenderer = ({\n  columns,\n  selectedRows,\n  onRowClick,\n  onRowFocus,\n  onRowBlur,\n  onSelectionChange,\n  rowKeyExtractor,\n  selectable,\n  renderRow,\n  renderCell,\n  virtualScrolling,\n  rowHeight,\n}: Pick<\n  TableBodyProps,\n  | 'columns'\n  | 'onRowClick'\n  | 'onRowFocus'\n  | 'onRowBlur'\n  | 'onSelectionChange'\n  | 'rowKeyExtractor'\n  | 'selectable'\n  | 'renderRow'\n  | 'renderCell'\n  | 'virtualScrolling'\n  | 'rowHeight'\n> & { selectedRows: Array<string | number> }) => {\n  const getRowKey = useRowKey(rowKeyExtractor);\n  const isRowSelected = useCallback(\n    (rowKey: string | number) => selectedRows.includes(rowKey),\n    [selectedRows],\n  );\n  const handleRowSelection = useRowSelection({ selectedRows, onSelectionChange });\n\n  const renderTableRow = useCallback(\n    (rowData: Record<string, unknown>, index: number, offsetY: number = 0) => {\n      const rowKey = getRowKey(rowData, index);\n      const selected = isRowSelected(rowKey);\n\n      if (renderRow) return renderRow(rowData, index, selected);\n\n      return (\n        <TableDataRow\n          key={rowKey}\n          rowData={rowData}\n          rowKey={rowKey}\n          index={index}\n          offsetY={offsetY}\n          columns={columns}\n          selected={selected}\n          selectable={selectable}\n          rowHeight={rowHeight}\n          onRowClick={onRowClick}\n          onRowFocus={onRowFocus}\n          onRowBlur={onRowBlur}\n          onSelect={handleRowSelection}\n          virtualScrolling={virtualScrolling}\n          renderCell={renderCell}\n        />\n      );\n    },\n    [\n      columns,\n      getRowKey,\n      isRowSelected,\n      handleRowSelection,\n      onRowClick,\n      onRowFocus,\n      onRowBlur,\n      renderRow,\n      renderCell,\n      rowHeight,\n      selectable,\n      virtualScrolling,\n    ],\n  );\n\n  return renderTableRow;\n};\n","import Checkbox from '@mui/material/Checkbox/index.js';\nimport TableBody from '@mui/material/TableBody/index.js';\nimport TableCell from '@mui/material/TableCell/index.js';\nimport TableHead from '@mui/material/TableHead/index.js';\nimport TableRow from '@mui/material/TableRow/index.js';\nimport TableSortLabel from '@mui/material/TableSortLabel/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useCallback } from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport { tableRowHeight } from './Table.helpers';\nimport { useTableRowRenderer } from './TableParts.hooks';\nimport type { ColumnConfig, TableBodyProps, TableHeaderProps, VirtualWindow } from './Table.types';\n\n// Mirrors the visible sort indicator for assistive technology; undefined when\n// the column is not sorted, which is what removes the attribute entirely.\nconst ariaSortFor = (\n  canSort: boolean,\n  isSorted: boolean,\n  direction?: 'asc' | 'desc',\n): 'ascending' | 'descending' | undefined => {\n  if (!canSort || !isSorted) return undefined;\n\n  return direction === 'asc' ? 'ascending' : 'descending';\n};\n\n/** A column's `width`/`minWidth` as CSS: a number is design px, a string as given. */\nconst columnLength = (theme: Theme, value: number | string | undefined): string | undefined =>\n  typeof value === 'number' ? rem(theme, value) : value;\n\n// One header cell. Sorting is offered when the table is sortable and the column\n// has not opted out; aria-sort mirrors the visible indicator.\nconst HeaderCell: React.FC<{\n  column: ColumnConfig;\n  sortable?: boolean;\n  sortConfig?: { key: string; direction: 'asc' | 'desc' };\n  onSort: (columnKey: string) => void;\n}> = ({ column, sortable, sortConfig, onSort }) => {\n  const theme = useTheme();\n  const canSort = Boolean(sortable) && column.sortable !== false;\n  const isSorted = sortConfig?.key === column.key;\n\n  return (\n    <TableCell\n      align={column.align || 'left'}\n      style={{\n        minWidth: columnLength(theme, column.minWidth),\n        width: columnLength(theme, column.width),\n      }}\n      aria-sort={ariaSortFor(canSort, isSorted, sortConfig?.direction)}\n    >\n      {canSort ? (\n        <TableSortLabel\n          active={isSorted}\n          direction={isSorted ? sortConfig?.direction : 'asc'}\n          onClick={() => onSort(column.key)}\n          data-testid=\"sort-indicator\"\n          aria-label={`Sort by ${column.label}`}\n        >\n          {column.label}\n        </TableSortLabel>\n      ) : (\n        column.label\n      )}\n    </TableCell>\n  );\n};\n\nexport const EnhancedTableHeader: React.FC<TableHeaderProps> = React.memo(({\n  columns,\n  data,\n  sortable,\n  sortConfig,\n  onSortChange,\n  selectable,\n  selectedRows = [],\n  onSelectAll,\n  headRef }) => {\n  const handleSort = useCallback(\n    (columnKey: string) => {\n      if (!sortable || !onSortChange) return;\n      \n      const direction = \n        sortConfig?.key === columnKey && sortConfig.direction === 'asc' ? 'desc' : 'asc';\n      onSortChange(columnKey, direction);\n    },\n    [sortable, onSortChange, sortConfig]\n  );\n\n  const handleSelectAll = useCallback(\n    (event: React.ChangeEvent<globalThis.HTMLInputElement>) => {\n      if (!onSelectAll) return;\n      onSelectAll(event.target.checked);\n    },\n    [onSelectAll]\n  );\n\n  return (\n    <TableHead ref={headRef}>\n      <TableRow>\n        {selectable && (\n          <TableCell padding=\"checkbox\">\n            <Checkbox\n              indeterminate={selectedRows.length > 0 && selectedRows.length < data.length}\n              checked={selectedRows.length === data.length && data.length > 0}\n              onChange={handleSelectAll}\n              inputProps={{ 'aria-label': 'select all' }}\n            />\n          </TableCell>\n        )}\n        {columns.map((column) => (\n          <HeaderCell\n            key={column.key}\n            column={column}\n            sortable={sortable}\n            sortConfig={sortConfig}\n            onSort={handleSort}\n          />\n        ))}\n      </TableRow>\n    </TableHead>\n  );\n});\n\nEnhancedTableHeader.displayName = 'EnhancedTableHeader';\n\n// One data row. Split out of the memoised renderTableRow callback so the\n// callback stays a short dispatch and the row markup is readable on its own.\nexport const TableDataRow: React.FC<{\n  rowData: Record<string, unknown>;\n  rowKey: string | number;\n  index: number;\n  /** Where a virtualised row sits, in design px — drawn through `rem`, like its height. */\n  offsetY: number;\n  columns: ColumnConfig[];\n  selected: boolean;\n  selectable?: boolean;\n  /** Design px; 52 when unset (`tableRowHeight`). */\n  rowHeight?: number;\n  onRowClick?: TableBodyProps['onRowClick'];\n  onRowFocus?: TableBodyProps['onRowFocus'];\n  onRowBlur?: TableBodyProps['onRowBlur'];\n  onSelect: (event: React.MouseEvent | React.ChangeEvent, rowKey: string | number) => void;\n  virtualScrolling?: boolean;\n  renderCell?: TableBodyProps['renderCell'];\n}> = ({\n  rowData,\n  rowKey,\n  index,\n  offsetY,\n  columns,\n  selected,\n  selectable,\n  rowHeight,\n  onRowClick,\n  onRowFocus,\n  onRowBlur,\n  onSelect,\n  virtualScrolling,\n  renderCell }) => {\n  const theme = useTheme();\n  return (\n      <TableRow\n        key={String(rowKey)}\n        selected={selected}\n        className={selected ? 'selected' : ''}\n        onClick={(event: React.MouseEvent<globalThis.HTMLTableRowElement>) => onRowClick?.(event, rowData)}\n        onFocus={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowFocus?.(event, rowData)}\n        onBlur={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowBlur?.(event, rowData)}\n        style={virtualScrolling ? { \n          transform: `translateY(${rem(theme, offsetY)})`,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          height: rem(theme, tableRowHeight(rowHeight)) } : undefined}\n      >\n        {selectable && (\n          <TableCell padding=\"checkbox\">\n            <Checkbox\n              checked={selected}\n              onChange={(event) => onSelect(event, rowKey)}\n              onClick={(event) => event.stopPropagation()}\n              inputProps={{ 'aria-label': `select row ${index + 1}` }}\n            />\n          </TableCell>\n        )}\n        {columns.map((column) => {\n          const value = rowData[column.key];\n          return (\n            <TableCell key={column.key} align={column.align || 'left'}>\n              {renderCell \n                ? renderCell(value, column, rowData, index)\n                : column.render \n                ? column.render(value, rowData) \n                : (value as React.ReactNode)\n              }\n            </TableCell>\n          );\n        })}\n      </TableRow>\n  );\n};\n\n// Only the rows in view are rendered, positioned by absolute offset inside a\n// body sized to the full data set. `rowHeight` and every offset are design px,\n// drawn through `rem`. The `<tbody>` sits directly in the `<table>`; the one\n// scroll container wraps the whole table, header included (FUT-2658).\nconst VirtualisedBody: React.FC<{\n  visibleItems: VirtualWindow;\n  rowHeight: number;\n  renderTableRow: (\n    rowData: Record<string, unknown>,\n    index: number,\n    offsetY?: number,\n  ) => React.ReactNode;\n}> = ({ visibleItems, rowHeight, renderTableRow }) => (\n  <TableBody\n    style={{\n      height: visibleItems.totalHeight,\n      position: 'relative' }}\n  >\n    {visibleItems.items.map((rowData, index) => \n      renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)\n    )}\n  </TableBody>\n);\n\nconst PlainBody: React.FC<{\n  data: TableBodyProps['data'];\n  renderTableRow: (rowData: Record<string, unknown>, index: number) => React.ReactNode;\n}> = ({ data, renderTableRow }) => (\n\n    <TableBody>\n      {data.map((rowData, index) => renderTableRow(rowData, index))}\n    </TableBody>\n);\n\n// Enhanced Table Body Component  \nexport const EnhancedTableBody: React.FC<TableBodyProps> = React.memo((props) => {\n  const { data, virtualWindow } = props;\n  // The row renderer takes the body's own props; its `rowHeight` stays the\n  // caller's design px, and the row resolves the default where it draws it.\n  const renderTableRow = useTableRowRenderer({ ...props, selectedRows: props.selectedRows ?? [] });\n\n  if (virtualWindow) {\n    return (\n      <VirtualisedBody\n        visibleItems={virtualWindow}\n        rowHeight={tableRowHeight(props.rowHeight)}\n        renderTableRow={renderTableRow}\n      />\n    );\n  }\n\n  return (\n    <PlainBody data={data} renderTableRow={renderTableRow} />\n  );\n});\n\nEnhancedTableBody.displayName = 'EnhancedTableBody';\n\n// Main Table Component\n"],"mappings":"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","names":["useCallback","jsx","useCallback"]}

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

@@ -56,18 +56,17 @@ var FallbackContainer = styled(Box)(({ theme }) => ({
   left: 0
 }));
 var styleLength = (theme, value) => typeof value === "number" ? rem(theme, value) : value;
-var sxLength = (theme, value) => {
-  if (typeof value !== "number") return value;
-  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
-};
+var isFraction = (value) => typeof value === "number" && value > 0 && value <= 1;
+var sxLength = (theme, value) => isFraction(value) ? `${value * 100}%` : styleLength(theme, value);
+var innerLength = (theme, value) => isFraction(value) ? "100%" : styleLength(theme, value);
 var SkeletonIndicator = ({ props }) => {
   const theme = useTheme();
   return /* @__PURE__ */ jsx(
     Skeleton,
     {
       variant: "rectangular",
-      width: styleLength(theme, props.width || "100%"),
-      height: styleLength(theme, props.height || 200),
+      width: innerLength(theme, props.width || "100%"),
+      height: innerLength(theme, props.height || 200),
       animation: props.skeletonProps.animation || "pulse",
       intensity: props.skeletonProps.intensity,
       borderRadius: styleLength(theme, props.borderRadius),
@@ -137,7 +136,11 @@ var ErrorFallback = ({ props, metrics }) => {
   return /* @__PURE__ */ jsx(
     FallbackContainer,
     {
-      sx: { width: sxLength(theme, width), height: sxLength(theme, height), borderRadius: styleLength(theme, borderRadius) },
+      sx: {
+        width: innerLength(theme, width),
+        height: innerLength(theme, height),
+        borderRadius: styleLength(theme, borderRadius)
+      },
       "data-testid": `${testId}-fallback`,
       children: fallback
     }
@@ -158,8 +161,8 @@ var LazyImage = React.memo(function LazyImage2(rawProps) {
   const { width, height, borderRadius, alt } = props;
   const testId = props["data-testid"];
   const metrics = {
-    width: styleLength(theme, width),
-    height: styleLength(theme, height),
+    width: innerLength(theme, width),
+    height: innerLength(theme, height),
     objectFit: props.objectFit,
     objectPosition: props.objectPosition,
     borderRadius: styleLength(theme, borderRadius)
@@ -217,4 +220,4 @@ LazyImage.displayName = "LazyImage";
 export {
   LazyImage
 };
-//# sourceMappingURL=chunk-FF2D7V7T.js.map
+//# sourceMappingURL=chunk-SDK5LPPC.js.map

package/dist/chunk-SDK5LPPC.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 width or height above 0 and up to 1 is a fraction of the container's parent, as in `sx`.\n * A negative number is no fraction: it stays a (negative, so invalid) length.\n */\nconst isFraction = (value: Length): value is number =>\n  typeof value === 'number' && value > 0 && value <= 1;\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  isFraction(value) ? `${value * 100}%` : styleLength(theme, value);\n\n/**\n * A width or height for what is drawn inside the container. The container alone\n * takes a fraction, so everything in it fills it: a percentage here is measured\n * against the container and would stack (FUT-2666). Otherwise the same as `styleLength`.\n */\nconst innerLength = (theme: Theme, value: Length): string | undefined =>\n  isFraction(value) ? '100%' : styleLength(theme, value);\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={innerLength(theme, props.width || '100%')}\n      height={innerLength(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={{\n        width: innerLength(theme, width),\n        height: innerLength(theme, height),\n        borderRadius: styleLength(theme, borderRadius),\n      }}\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: innerLength(theme, width),\n    height: innerLength(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-D46SLMCX.js → chunk-SYNB3IIB.js}

@@ -70,6 +70,16 @@ var ruleLength = (theme, length) => {
   if (typeof length === "string") return length;
   return length <= 1 ? `${length * 100}%` : rem(theme, length);
 };
+var labelledSeparatorLayout = (theme, isHorizontal, length) => {
+  if (isHorizontal) return { rule: {}, group: {} };
+  if (length) return { rule: { flex: "none" }, group: {} };
+  return {
+    // A design 16px, as long as the gap beside the label at the default
+    // spacing, so a short or unsized row still shows two rules and not a word.
+    rule: { flex: "1 1 0", minHeight: rem(theme, 16) },
+    group: { alignSelf: "stretch" }
+  };
+};
 var separatorStyles = (theme, { variant, orientation, size, color, blockMargin, length }) => {
   const isHorizontal = orientation === "horizontal";
   const thicknessPx = separatorThickness(size);
@@ -100,6 +110,7 @@ var separatorStyles = (theme, { variant, orientation, size, color, blockMargin,
 export {
   separatorMargin,
   separatorBlockMargin,
+  labelledSeparatorLayout,
   separatorStyles
 };
-//# sourceMappingURL=chunk-D46SLMCX.js.map
+//# sourceMappingURL=chunk-SYNB3IIB.js.map

package/dist/chunk-SYNB3IIB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Separator/Separator.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type {\n  SeparatorOrientation,\n  SeparatorProps,\n  SeparatorSize,\n  SeparatorVariant,\n} from './Separator.types';\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';\nimport { rem } from '../../../tokens/relative';\n\nconst THICKNESS_PX: Record<SeparatorSize, number> = {\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nconst MARGIN_PX: Record<SeparatorSize, number> = {\n  xs: 4,\n  sm: 8,\n  md: 16,\n  lg: 24,\n  xl: 32,\n};\n\nconst separatorThickness = (size: SeparatorSize): number =>\n  THICKNESS_PX[size] ?? THICKNESS_PX.md;\n\n/** An explicit `margin` wins; otherwise the size picks one. */\nexport const separatorMargin = (\n  size: SeparatorSize,\n  margin?: number | string,\n): number | string => margin ?? MARGIN_PX[size] ?? MARGIN_PX.md;\n\n// `gradient` paints a background rather than a border, so it draws its line as a\n// solid border of zero visual consequence.\nconst borderStyleFor = (variant: SeparatorVariant): 'dashed' | 'dotted' | 'solid' => {\n  switch (variant) {\n    case 'dashed':\n      return 'dashed';\n    case 'dotted':\n      return 'dotted';\n    default:\n      return 'solid';\n  }\n};\n\nconst gradientBackground = (\n  variant: SeparatorVariant,\n  orientation: SeparatorOrientation,\n  color: string,\n): string | undefined => {\n  if (variant !== 'gradient') return undefined;\n  const angle = orientation === 'horizontal' ? '90deg' : '180deg';\n  return `linear-gradient(${angle}, transparent 0%, ${color} 50%, transparent 100%)`;\n};\n\n// Only the leading edge carries the rule; the other three are zeroed explicitly so\n// a parent's border shorthand cannot leak through.\nconst borderEdges = (\n  isHorizontal: boolean,\n  thickness: string,\n  style: 'dashed' | 'dotted' | 'solid',\n  color: string,\n): CSSObject => {\n  const leading = isHorizontal ? 'Top' : 'Left';\n  const blank: CSSObject = {\n    borderTopWidth: 0,\n    borderBottomWidth: 0,\n    borderLeftWidth: 0,\n    borderRightWidth: 0,\n    borderTopStyle: 'none',\n    borderBottomStyle: 'none',\n    borderLeftStyle: 'none',\n    borderRightStyle: 'none',\n    borderTopColor: 'transparent',\n    borderBottomColor: 'transparent',\n    borderLeftColor: 'transparent',\n    borderRightColor: 'transparent',\n  };\n\n  return {\n    ...blank,\n    [`border${leading}Width`]: thickness,\n    [`border${leading}Style`]: style,\n    [`border${leading}Color`]: color,\n  };\n};\n\ntype SeparatorStyleArgs = Required<\n  Pick<SeparatorProps, 'variant' | 'orientation' | 'size'>\n> &\n  Pick<SeparatorProps, 'color' | 'length'> & {\n    /** From {@link separatorBlockMargin}, which both the plain and the labelled separator read. */\n    blockMargin: string;\n  };\n\n/**\n * The separator's margin, on the axis it separates along only: above and below\n * a horizontal rule, either side of a vertical one. A margin given as a string\n * carries its own units; a number is design px, through the type scale.\n *\n * The LABELLED separator uses this too. It used to hand the number straight to\n * `sx.margin`, where a number is SPACING UNITS — `md`'s 16 drew 128px on all\n * four sides, against 16px above and below for the unlabelled one.\n */\nexport const separatorBlockMargin = (\n  theme: Theme,\n  size: SeparatorSize,\n  margin: number | string | undefined,\n  isHorizontal: boolean,\n): string => {\n  const value = separatorMargin(size, margin);\n  const length = typeof value === 'string' ? value : rem(theme, value);\n  return isHorizontal ? `${length} 0` : `0 ${length}`;\n};\n\n/**\n * The rule's extent along its axis. It lands in `sx`, which reads a number of 1\n * or less as a fraction of the parent, and that stays so; any other number is\n * design px, through the type scale. Unset (or `0`/`''`) is the full run.\n */\nconst ruleLength = (theme: Theme, length: SeparatorProps['length']): string => {\n  if (!length) return '100%';\n  if (typeof length === 'string') return length;\n  return length <= 1 ? `${length * 100}%` : rem(theme, length);\n};\n\n/**\n * What a labelled separator's rules add to {@link separatorStyles}, and whether\n * the group stretches to its parent (FUT-2617).\n *\n * A labelled VERTICAL separator is a flex COLUMN — rule, label, rule — and with\n * no `length` each rule is `height: 100%` of a column whose height is its own\n * content: both resolved to 0px and only the label showed. So the column\n * stretches to the row it sits in and the two rules split what the label\n * leaves, equally (`flex: 1 1 0`), never shorter than a visible minimum. With a\n * `length` the rule is exactly that long: no grow, no shrink, no basis, and the\n * column keeps its content height, centred as before.\n *\n * Only the labelled branch reads this. The plain separator keeps\n * `separatorStyles` as is, since `flex: 1 1 0` there would widen a vertical\n * separator sitting in a row. The horizontal rules already shrink around the\n * label in their row, so they are left alone.\n */\nexport const labelledSeparatorLayout = (\n  theme: Theme,\n  isHorizontal: boolean,\n  length: SeparatorProps['length'],\n): { rule: CSSObject; group: CSSObject } => {\n  if (isHorizontal) return { rule: {}, group: {} };\n  if (length) return { rule: { flex: 'none' }, group: {} };\n  return {\n    // A design 16px, as long as the gap beside the label at the default\n    // spacing, so a short or unsized row still shows two rules and not a word.\n    rule: { flex: '1 1 0', minHeight: rem(theme, 16) },\n    group: { alignSelf: 'stretch' },\n  };\n};\n\nexport const separatorStyles = (\n  theme: Theme,\n  { variant, orientation, size, color, blockMargin, length }: SeparatorStyleArgs,\n): CSSObject => {\n  const isHorizontal = orientation === 'horizontal';\n  // `xs` is the 1px hairline: it stays one device-independent pixel at every\n  // root size, like every other hairline in the package; heavier rules scale.\n  const thicknessPx = separatorThickness(size);\n  const thickness = thicknessPx === FIELD_BORDER_WIDTH ? `${FIELD_BORDER_WIDTH}px` : rem(theme, thicknessPx);\n  const along = ruleLength(theme, length);\n  const resolvedColor = color || theme.palette.divider;\n\n  const baseStyles: CSSObject = {\n    display: 'flex',\n    alignItems: 'center',\n    margin: blockMargin,\n    width: isHorizontal ? along : thickness,\n    height: isHorizontal ? thickness : along,\n    boxSizing: 'border-box',\n  };\n\n  if (variant === 'gradient') {\n    return {\n      ...baseStyles,\n      background: gradientBackground(variant, orientation, resolvedColor),\n    };\n  }\n\n  return {\n    ...baseStyles,\n    backgroundColor: 'transparent',\n    ...borderEdges(isHorizontal, thickness, borderStyleFor(variant), resolvedColor),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-SNURSSTN.js → chunk-VLOUXTEM.js}

@@ -1,10 +1,10 @@
 import {
   StepRow
-} from "./chunk-BVLMKSHX.js";
+} from "./chunk-WDVNRW3Q.js";
 import {
   resolveWorkflowStepProps,
   withDerivedStatus
-} from "./chunk-V5KKBMAT.js";
+} from "./chunk-VXQOSADY.js";
 
 // src/components/utility/WorkflowStep/WorkflowStep.tsx
 import Box from "@mui/material/Box/index.js";
@@ -104,4 +104,4 @@ export {
   WorkflowStep,
   WorkflowStep_default
 };
-//# sourceMappingURL=chunk-SNURSSTN.js.map
+//# sourceMappingURL=chunk-VLOUXTEM.js.map

package/dist/{chunk-V5KKBMAT.js → chunk-VXQOSADY.js}

@@ -1,3 +1,6 @@
+import {
+  paletteKey
+} from "./chunk-7ZPUN7TV.js";
 import {
   neutralTones
 } from "./chunk-FQ6UW7IY.js";
@@ -12,14 +15,14 @@ var INDICATOR_SIZE = {
 };
 var indicatorSizeFor = (size) => INDICATOR_SIZE[size] ?? INDICATOR_SIZE.md;
 var stepPalette = (theme, color) => {
-  if (color === "neutral") {
+  const key = paletteKey(color || "primary");
+  if (key === "grey") {
     const main = neutralTones(theme).emphasis;
     return {
       main,
       contrastText: theme.palette.getContrastText(main)
     };
   }
-  const key = color || "primary";
   return theme.palette[key];
 };
 var stepColors = (theme, palette, { isActive, isCompleted, isError, variant }) => {
@@ -83,4 +86,4 @@ export {
   withDerivedStatus,
   resolveWorkflowStepProps
 };
-//# sourceMappingURL=chunk-V5KKBMAT.js.map
+//# sourceMappingURL=chunk-VXQOSADY.js.map

package/dist/{chunk-V5KKBMAT.js.map → chunk-VXQOSADY.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/utility/WorkflowStep/WorkflowStep.helpers.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport type { WorkflowStepItem, WorkflowStepProps } from './WorkflowStep.types';\nimport { neutralTones } from '../../../tokens/ink';\n\ntype StepColor = NonNullable<WorkflowStepProps['color']>;\ntype StepSize = NonNullable<WorkflowStepProps['size']>;\n\nconst INDICATOR_SIZE: Record<StepSize, number> = {\n  xs: 20,\n  sm: 24,\n  md: 32,\n  lg: 40,\n  xl: 48,\n};\n\nexport const indicatorSizeFor = (size?: StepSize): number =>\n  INDICATOR_SIZE[size as StepSize] ?? INDICATOR_SIZE.md;\n\ninterface StepPalette {\n  main: string;\n  contrastText: string;\n}\n\n/** `neutral` has no MUI palette entry, so its pair is derived from grey. */\nexport const stepPalette = (theme: Theme, color?: StepColor): StepPalette => {\n  if (color === 'neutral') {\n    const main = neutralTones(theme).emphasis;\n    return {\n      main,\n      contrastText: theme.palette.getContrastText(main),\n    };\n  }\n\n  const key = (color || 'primary') as 'primary' | 'secondary' | 'success' | 'warning' | 'error';\n  return theme.palette[key];\n};\n\nexport interface StepColors {\n  backgroundColor: string;\n  borderColor: string;\n  textColor: string;\n}\n\ninterface StepState {\n  isActive: boolean;\n  isCompleted: boolean;\n  isError: boolean;\n  variant?: WorkflowStepProps['variant'];\n}\n\n/**\n * An indicator is one of four things, in priority order: failed, done, the step\n * you are on, or still ahead. Only the active one respects `variant` — an active\n * outlined step stays hollow with a coloured rim.\n */\nexport const stepColors = (\n  theme: Theme,\n  palette: StepPalette,\n  { isActive, isCompleted, isError, variant }: StepState,\n): StepColors => {\n  if (isError) {\n    return {\n      backgroundColor: theme.palette.error.main,\n      borderColor: theme.palette.error.main,\n      textColor: theme.palette.error.contrastText,\n    };\n  }\n\n  if (isCompleted) {\n    return {\n      backgroundColor: palette.main,\n      borderColor: palette.main,\n      textColor: palette.contrastText,\n    };\n  }\n\n  if (isActive) {\n    const filled = variant === 'filled';\n    return {\n      backgroundColor: filled ? palette.main : theme.palette.background.paper,\n      borderColor: palette.main,\n      textColor: filled ? palette.contrastText : palette.main,\n    };\n  }\n\n  return {\n    backgroundColor: neutralTones(theme).track,\n    borderColor: neutralTones(theme).track,\n    textColor: theme.palette.text.secondary,\n  };\n};\n\n/**\n * A step that declares `error` keeps it; the rest are positioned against\n * `currentStep`, so a caller only has to move one number to advance the workflow.\n */\nexport const withDerivedStatus = (\n  steps: WorkflowStepItem[],\n  currentStep: number,\n): WorkflowStepItem[] =>\n  steps.map((step, index) => {\n    const derivable =\n      step.status === 'pending' || step.status === 'current' || step.status === 'completed';\n\n    if (!derivable) return { ...step, status: step.status };\n\n    if (index < currentStep) return { ...step, status: 'completed' as const };\n    if (index === currentStep) return { ...step, status: 'current' as const };\n    return { ...step, status: 'pending' as const };\n  });\n\ntype WorkflowDefaultedKeys =\n  | 'currentStep'\n  | 'variant'\n  | 'orientation'\n  | 'color'\n  | 'size'\n  | 'showProgress'\n  | 'animated'\n  | 'interactive'\n  | 'showNumbers'\n  | 'showIcons'\n  | 'disabled';\n\ntype ResolvedWorkflowStepProps = WorkflowStepProps &\n  Required<Pick<WorkflowStepProps, WorkflowDefaultedKeys>>;\n\nconst WORKFLOW_DEFAULTS: Pick<WorkflowStepProps, WorkflowDefaultedKeys> = {\n  currentStep: 0,\n  variant: 'default',\n  orientation: 'horizontal',\n  color: 'primary',\n  size: 'md',\n  showProgress: true,\n  animated: true,\n  interactive: false,\n  showNumbers: true,\n  showIcons: false,\n  disabled: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: WorkflowStepProps): Partial<WorkflowStepProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<WorkflowStepProps>;\n\nexport const resolveWorkflowStepProps = (\n  props: WorkflowStepProps,\n): ResolvedWorkflowStepProps =>\n  ({ ...WORKFLOW_DEFAULTS, ...definedProps(props) }) as ResolvedWorkflowStepProps;\n"],"mappings":";;;;;AAQA,IAAM,iBAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,mBAAmB,CAAC,SAC/B,eAAe,IAAgB,KAAK,eAAe;AAQ9C,IAAM,cAAc,CAAC,OAAc,UAAmC;AAC3E,MAAI,UAAU,WAAW;AACvB,UAAM,OAAO,aAAa,KAAK,EAAE;AACjC,WAAO;AAAA,MACL;AAAA,MACA,cAAc,MAAM,QAAQ,gBAAgB,IAAI;AAAA,IAClD;AAAA,EACF;AAEA,QAAM,MAAO,SAAS;AACtB,SAAO,MAAM,QAAQ,GAAG;AAC1B;AAoBO,IAAM,aAAa,CACxB,OACA,SACA,EAAE,UAAU,aAAa,SAAS,QAAQ,MAC3B;AACf,MAAI,SAAS;AACX,WAAO;AAAA,MACL,iBAAiB,MAAM,QAAQ,MAAM;AAAA,MACrC,aAAa,MAAM,QAAQ,MAAM;AAAA,MACjC,WAAW,MAAM,QAAQ,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,MAAI,aAAa;AACf,WAAO;AAAA,MACL,iBAAiB,QAAQ;AAAA,MACzB,aAAa,QAAQ;AAAA,MACrB,WAAW,QAAQ;AAAA,IACrB;AAAA,EACF;AAEA,MAAI,UAAU;AACZ,UAAM,SAAS,YAAY;AAC3B,WAAO;AAAA,MACL,iBAAiB,SAAS,QAAQ,OAAO,MAAM,QAAQ,WAAW;AAAA,MAClE,aAAa,QAAQ;AAAA,MACrB,WAAW,SAAS,QAAQ,eAAe,QAAQ;AAAA,IACrD;AAAA,EACF;AAEA,SAAO;AAAA,IACL,iBAAiB,aAAa,KAAK,EAAE;AAAA,IACrC,aAAa,aAAa,KAAK,EAAE;AAAA,IACjC,WAAW,MAAM,QAAQ,KAAK;AAAA,EAChC;AACF;AAMO,IAAM,oBAAoB,CAC/B,OACA,gBAEA,MAAM,IAAI,CAAC,MAAM,UAAU;AACzB,QAAM,YACJ,KAAK,WAAW,aAAa,KAAK,WAAW,aAAa,KAAK,WAAW;AAE5E,MAAI,CAAC,UAAW,QAAO,EAAE,GAAG,MAAM,QAAQ,KAAK,OAAO;AAEtD,MAAI,QAAQ,YAAa,QAAO,EAAE,GAAG,MAAM,QAAQ,YAAqB;AACxE,MAAI,UAAU,YAAa,QAAO,EAAE,GAAG,MAAM,QAAQ,UAAmB;AACxE,SAAO,EAAE,GAAG,MAAM,QAAQ,UAAmB;AAC/C,CAAC;AAkBH,IAAM,oBAAoE;AAAA,EACxE,aAAa;AAAA,EACb,SAAS;AAAA,EACT,aAAa;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAAA,EACd,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,UAAU;AACZ;AAIA,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAEK,IAAM,2BAA2B,CACtC,WAEC,EAAE,GAAG,mBAAmB,GAAG,aAAa,KAAK,EAAE;","names":[]}
+{"version":3,"sources":["../src/components/utility/WorkflowStep/WorkflowStep.helpers.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport type { WorkflowStepItem, WorkflowStepProps } from './WorkflowStep.types';\nimport { neutralTones } from '../../../tokens/ink';\nimport { paletteKey } from '../../../tokens/scales';\n\ntype StepColor = NonNullable<WorkflowStepProps['color']>;\ntype StepSize = NonNullable<WorkflowStepProps['size']>;\n\nconst INDICATOR_SIZE: Record<StepSize, number> = {\n  xs: 20,\n  sm: 24,\n  md: 32,\n  lg: 40,\n  xl: 48,\n};\n\nexport const indicatorSizeFor = (size?: StepSize): number =>\n  INDICATOR_SIZE[size as StepSize] ?? INDICATOR_SIZE.md;\n\ninterface StepPalette {\n  main: string;\n  contrastText: string;\n}\n\n/**\n * The step's colour pair, keyed through `paletteKey` so `danger` reads MUI's\n * `error` (the palette has no `danger`). `neutral` lands on `grey`, a ramp with\n * no `main`, so its pair is derived from the ramp — with the contrast computed,\n * not assumed.\n */\nexport const stepPalette = (theme: Theme, color?: StepColor): StepPalette => {\n  const key = paletteKey(color || 'primary');\n  if (key === 'grey') {\n    const main = neutralTones(theme).emphasis;\n    return {\n      main,\n      contrastText: theme.palette.getContrastText(main),\n    };\n  }\n\n  return theme.palette[key];\n};\n\nexport interface StepColors {\n  backgroundColor: string;\n  borderColor: string;\n  textColor: string;\n}\n\ninterface StepState {\n  isActive: boolean;\n  isCompleted: boolean;\n  isError: boolean;\n  variant?: WorkflowStepProps['variant'];\n}\n\n/**\n * An indicator is one of four things, in priority order: failed, done, the step\n * you are on, or still ahead. Only the active one respects `variant` — an active\n * outlined step stays hollow with a coloured rim.\n */\nexport const stepColors = (\n  theme: Theme,\n  palette: StepPalette,\n  { isActive, isCompleted, isError, variant }: StepState,\n): StepColors => {\n  if (isError) {\n    return {\n      backgroundColor: theme.palette.error.main,\n      borderColor: theme.palette.error.main,\n      textColor: theme.palette.error.contrastText,\n    };\n  }\n\n  if (isCompleted) {\n    return {\n      backgroundColor: palette.main,\n      borderColor: palette.main,\n      textColor: palette.contrastText,\n    };\n  }\n\n  if (isActive) {\n    const filled = variant === 'filled';\n    return {\n      backgroundColor: filled ? palette.main : theme.palette.background.paper,\n      borderColor: palette.main,\n      textColor: filled ? palette.contrastText : palette.main,\n    };\n  }\n\n  return {\n    backgroundColor: neutralTones(theme).track,\n    borderColor: neutralTones(theme).track,\n    textColor: theme.palette.text.secondary,\n  };\n};\n\n/**\n * A step that declares `error` keeps it; the rest are positioned against\n * `currentStep`, so a caller only has to move one number to advance the workflow.\n */\nexport const withDerivedStatus = (\n  steps: WorkflowStepItem[],\n  currentStep: number,\n): WorkflowStepItem[] =>\n  steps.map((step, index) => {\n    const derivable =\n      step.status === 'pending' || step.status === 'current' || step.status === 'completed';\n\n    if (!derivable) return { ...step, status: step.status };\n\n    if (index < currentStep) return { ...step, status: 'completed' as const };\n    if (index === currentStep) return { ...step, status: 'current' as const };\n    return { ...step, status: 'pending' as const };\n  });\n\ntype WorkflowDefaultedKeys =\n  | 'currentStep'\n  | 'variant'\n  | 'orientation'\n  | 'color'\n  | 'size'\n  | 'showProgress'\n  | 'animated'\n  | 'interactive'\n  | 'showNumbers'\n  | 'showIcons'\n  | 'disabled';\n\ntype ResolvedWorkflowStepProps = WorkflowStepProps &\n  Required<Pick<WorkflowStepProps, WorkflowDefaultedKeys>>;\n\nconst WORKFLOW_DEFAULTS: Pick<WorkflowStepProps, WorkflowDefaultedKeys> = {\n  currentStep: 0,\n  variant: 'default',\n  orientation: 'horizontal',\n  color: 'primary',\n  size: 'md',\n  showProgress: true,\n  animated: true,\n  interactive: false,\n  showNumbers: true,\n  showIcons: false,\n  disabled: false,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: WorkflowStepProps): Partial<WorkflowStepProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<WorkflowStepProps>;\n\nexport const resolveWorkflowStepProps = (\n  props: WorkflowStepProps,\n): ResolvedWorkflowStepProps =>\n  ({ ...WORKFLOW_DEFAULTS, ...definedProps(props) }) as ResolvedWorkflowStepProps;\n"],"mappings":";;;;;;;;AASA,IAAM,iBAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,mBAAmB,CAAC,SAC/B,eAAe,IAAgB,KAAK,eAAe;AAa9C,IAAM,cAAc,CAAC,OAAc,UAAmC;AAC3E,QAAM,MAAM,WAAW,SAAS,SAAS;AACzC,MAAI,QAAQ,QAAQ;AAClB,UAAM,OAAO,aAAa,KAAK,EAAE;AACjC,WAAO;AAAA,MACL;AAAA,MACA,cAAc,MAAM,QAAQ,gBAAgB,IAAI;AAAA,IAClD;AAAA,EACF;AAEA,SAAO,MAAM,QAAQ,GAAG;AAC1B;AAoBO,IAAM,aAAa,CACxB,OACA,SACA,EAAE,UAAU,aAAa,SAAS,QAAQ,MAC3B;AACf,MAAI,SAAS;AACX,WAAO;AAAA,MACL,iBAAiB,MAAM,QAAQ,MAAM;AAAA,MACrC,aAAa,MAAM,QAAQ,MAAM;AAAA,MACjC,WAAW,MAAM,QAAQ,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,MAAI,aAAa;AACf,WAAO;AAAA,MACL,iBAAiB,QAAQ;AAAA,MACzB,aAAa,QAAQ;AAAA,MACrB,WAAW,QAAQ;AAAA,IACrB;AAAA,EACF;AAEA,MAAI,UAAU;AACZ,UAAM,SAAS,YAAY;AAC3B,WAAO;AAAA,MACL,iBAAiB,SAAS,QAAQ,OAAO,MAAM,QAAQ,WAAW;AAAA,MAClE,aAAa,QAAQ;AAAA,MACrB,WAAW,SAAS,QAAQ,eAAe,QAAQ;AAAA,IACrD;AAAA,EACF;AAEA,SAAO;AAAA,IACL,iBAAiB,aAAa,KAAK,EAAE;AAAA,IACrC,aAAa,aAAa,KAAK,EAAE;AAAA,IACjC,WAAW,MAAM,QAAQ,KAAK;AAAA,EAChC;AACF;AAMO,IAAM,oBAAoB,CAC/B,OACA,gBAEA,MAAM,IAAI,CAAC,MAAM,UAAU;AACzB,QAAM,YACJ,KAAK,WAAW,aAAa,KAAK,WAAW,aAAa,KAAK,WAAW;AAE5E,MAAI,CAAC,UAAW,QAAO,EAAE,GAAG,MAAM,QAAQ,KAAK,OAAO;AAEtD,MAAI,QAAQ,YAAa,QAAO,EAAE,GAAG,MAAM,QAAQ,YAAqB;AACxE,MAAI,UAAU,YAAa,QAAO,EAAE,GAAG,MAAM,QAAQ,UAAmB;AACxE,SAAO,EAAE,GAAG,MAAM,QAAQ,UAAmB;AAC/C,CAAC;AAkBH,IAAM,oBAAoE;AAAA,EACxE,aAAa;AAAA,EACb,SAAS;AAAA,EACT,aAAa;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AAAA,EACN,cAAc;AAAA,EACd,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,UAAU;AACZ;AAIA,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAEK,IAAM,2BAA2B,CACtC,WAEC,EAAE,GAAG,mBAAmB,GAAG,aAAa,KAAK,EAAE;","names":[]}

package/dist/{chunk-BVLMKSHX.js → chunk-WDVNRW3Q.js}

@@ -3,7 +3,7 @@ import {
   StepContentComponent,
   StepIndicatorComponent,
   StepItemRow
-} from "./chunk-MC4KYGSX.js";
+} from "./chunk-GFQ4U6WZ.js";
 
 // src/components/utility/WorkflowStep/WorkflowStepRow.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -78,4 +78,4 @@ var StepRow = ({
 export {
   StepRow
 };
-//# sourceMappingURL=chunk-BVLMKSHX.js.map
+//# sourceMappingURL=chunk-WDVNRW3Q.js.map

package/dist/chunk-XS3REOPN.js

@@ -0,0 +1,86 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Table/Table.helpers.ts
+var tableRowHeight = (rowHeight) => rowHeight ?? 52;
+var scrollHeight = (theme, containerHeight) => {
+  const box = containerHeight || 400;
+  return typeof box === "number" ? rem(theme, box) : box;
+};
+var scrollerStyle = (theme, p) => p.virtualScrolling ? { height: scrollHeight(theme, p.containerHeight), overflow: "auto" } : void 0;
+var virtualHeight = (p) => p.virtualScrolling && typeof p.containerHeight === "number" && p.containerHeight > 0 && tableRowHeight(p.rowHeight) > 0 ? p.containerHeight : void 0;
+var TABLE_DEFAULTS = {
+  variant: "default",
+  stripeColor: "neutral",
+  glow: false,
+  pulse: false,
+  hoverable: false,
+  loading: false,
+  density: "normal",
+  stickyHeader: false,
+  selectable: false,
+  selectedRows: [],
+  sortable: false,
+  virtualScrolling: false,
+  overscan: 5,
+  responsive: false,
+  showColumnToggle: true
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var TABLE_OWN_KEYS = {
+  emptyText: true,
+  variant: true,
+  stripeColor: true,
+  glow: true,
+  pulse: true,
+  hoverable: true,
+  loading: true,
+  onRowClick: true,
+  onRowFocus: true,
+  onRowBlur: true,
+  density: true,
+  selectable: true,
+  selectedRows: true,
+  onSelectionChange: true,
+  rowKeyExtractor: true,
+  sortable: true,
+  sortConfig: true,
+  onSortChange: true,
+  filterable: true,
+  filterConfig: true,
+  onFilterChange: true,
+  columns: true,
+  data: true,
+  virtualScrolling: true,
+  rowHeight: true,
+  overscan: true,
+  responsive: true,
+  columnPriorities: true,
+  responsiveBreakpoints: true,
+  showColumnToggle: true,
+  containerHeight: true,
+  loadingComponent: true,
+  emptyStateComponent: true,
+  keyboardNavigation: true,
+  renderRow: true,
+  renderCell: true,
+  draggableRows: true,
+  onRowsReorder: true,
+  fixedColumns: true,
+  rowStyleConfig: true
+};
+var NOT_FORWARDED = /* @__PURE__ */ new Set([...Object.keys(TABLE_OWN_KEYS), "children"]);
+var tableDomProps = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => !NOT_FORWARDED.has(key)));
+
+export {
+  tableRowHeight,
+  scrollerStyle,
+  virtualHeight,
+  TABLE_DEFAULTS,
+  definedProps,
+  tableDomProps
+};
+//# sourceMappingURL=chunk-XS3REOPN.js.map

package/dist/chunk-XS3REOPN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Table/Table.helpers.ts"],"sourcesContent":["import type { TableProps as MuiTableProps } from '@mui/material/Table/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport type { TableProps } from './Table.types';\n\n/**\n * A virtualised row's height in design px: the caller's `rowHeight`, else 52.\n * Resolved here rather than in {@link TABLE_DEFAULTS} so the one number is read\n * where it is drawn (`rem`) and where the window is positioned with it (`remPx`).\n */\nexport const tableRowHeight = (rowHeight: number | undefined): number => rowHeight ?? 52;\n\n/** The scroll box's height: a number is design px, 400 unless the caller says otherwise. */\nconst scrollHeight = (theme: Theme, containerHeight: number | string | undefined): string => {\n  const box = containerHeight || 400;\n  return typeof box === 'number' ? rem(theme, box) : box;\n};\n\n/**\n * The table's one scroll container (FUT-2658): `containerHeight` tall when\n * `virtualScrolling` is on, holding the header and the body. Inline, so the\n * height it was given reads back off the element.\n */\nexport const scrollerStyle = (theme: Theme, p: TableProps): React.CSSProperties | undefined =>\n  p.virtualScrolling ? { height: scrollHeight(theme, p.containerHeight), overflow: 'auto' } : undefined;\n\n/**\n * The window's height in design px when the body is virtualised — only a\n * numeric `containerHeight` virtualises; a string sizes the scroller alone.\n */\nexport const virtualHeight = (p: TableProps): number | undefined =>\n  p.virtualScrolling && typeof p.containerHeight === 'number' && p.containerHeight > 0 &&\n  tableRowHeight(p.rowHeight) > 0\n    ? p.containerHeight\n    : undefined;\n\nexport const TABLE_DEFAULTS: Partial<TableProps> = {\n  variant: 'default',\n  stripeColor: 'neutral',\n  glow: false,\n  pulse: false,\n  hoverable: false,\n  loading: false,\n  density: 'normal',\n  stickyHeader: false,\n  selectable: false,\n  selectedRows: [],\n  sortable: false,\n  virtualScrolling: false,\n  overscan: 5,\n  responsive: false,\n  showColumnToggle: true,\n};\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default as a destructuring default would. Eighteen separate\n// destructuring defaults were most of this component's branch count.\nexport const definedProps = (props: TableProps): Partial<TableProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<TableProps>;\n\n// The container + styled table + optional header, shared by the loading, empty\n// and populated renders.\n\n/** A key `Table` declares on top of MUI's own `TableProps`. */\ntype TableOwnKey = Exclude<keyof TableProps, keyof MuiTableProps>;\n\n/**\n * Every key {@link TableOwnKey} names. None is an HTML attribute: each is read\n * by the table and drawn by its parts, so none may reach the `<table>`\n * (FUT-2658). A `Record` over the key union makes the list exhaustive — a prop\n * added to `Table.types.ts` does not compile until it is named here.\n */\nconst TABLE_OWN_KEYS: Record<TableOwnKey, true> = {\n  emptyText: true,\n  variant: true,\n  stripeColor: true,\n  glow: true,\n  pulse: true,\n  hoverable: true,\n  loading: true,\n  onRowClick: true,\n  onRowFocus: true,\n  onRowBlur: true,\n  density: true,\n  selectable: true,\n  selectedRows: true,\n  onSelectionChange: true,\n  rowKeyExtractor: true,\n  sortable: true,\n  sortConfig: true,\n  onSortChange: true,\n  filterable: true,\n  filterConfig: true,\n  onFilterChange: true,\n  columns: true,\n  data: true,\n  virtualScrolling: true,\n  rowHeight: true,\n  overscan: true,\n  responsive: true,\n  columnPriorities: true,\n  responsiveBreakpoints: true,\n  showColumnToggle: true,\n  containerHeight: true,\n  loadingComponent: true,\n  emptyStateComponent: true,\n  keyboardNavigation: true,\n  renderRow: true,\n  renderCell: true,\n  draggableRows: true,\n  onRowsReorder: true,\n  fixedColumns: true,\n  rowStyleConfig: true,\n};\n\nconst NOT_FORWARDED = new Set<string>([...Object.keys(TABLE_OWN_KEYS), 'children']);\n\n/**\n * What the caller passed that is MUI's or the DOM's — `className`, `id`,\n * `style`, `aria-*`, `data-*`, DOM handlers, `sx`, `size`, `padding`,\n * `component` — for `MuiTable` to spread onto the `<table>`. `children` is\n * placed by the table itself.\n */\nexport const tableDomProps = (props: TableProps): Record<string, unknown> =>\n  Object.fromEntries(Object.entries(props).filter(([key]) => !NOT_FORWARDED.has(key)));\n"],"mappings":";;;;;AAaO,IAAM,iBAAiB,CAAC,cAA0C,aAAa;AAGtF,IAAM,eAAe,CAAC,OAAc,oBAAyD;AAC3F,QAAM,MAAM,mBAAmB;AAC/B,SAAO,OAAO,QAAQ,WAAW,IAAI,OAAO,GAAG,IAAI;AACrD;AAOO,IAAM,gBAAgB,CAAC,OAAc,MAC1C,EAAE,mBAAmB,EAAE,QAAQ,aAAa,OAAO,EAAE,eAAe,GAAG,UAAU,OAAO,IAAI;AAMvF,IAAM,gBAAgB,CAAC,MAC5B,EAAE,oBAAoB,OAAO,EAAE,oBAAoB,YAAY,EAAE,kBAAkB,KACnF,eAAe,EAAE,SAAS,IAAI,IAC1B,EAAE,kBACF;AAEC,IAAM,iBAAsC;AAAA,EACjD,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc,CAAC;AAAA,EACf,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,kBAAkB;AACpB;AAKO,IAAM,eAAe,CAAC,UAC3B,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAcF,IAAM,iBAA4C;AAAA,EAChD,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,uBAAuB;AAAA,EACvB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,cAAc;AAAA,EACd,gBAAgB;AAClB;AAEA,IAAM,gBAAgB,oBAAI,IAAY,CAAC,GAAG,OAAO,KAAK,cAAc,GAAG,UAAU,CAAC;AAQ3E,IAAM,gBAAgB,CAAC,UAC5B,OAAO,YAAY,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,GAAG,MAAM,CAAC,cAAc,IAAI,GAAG,CAAC,CAAC;","names":[]}

package/dist/{chunk-IG23YZZR.js → chunk-XSSCSRUX.js}

@@ -1,7 +1,8 @@
 import {
+  labelledSeparatorLayout,
   separatorBlockMargin,
   separatorStyles
-} from "./chunk-D46SLMCX.js";
+} from "./chunk-SYNB3IIB.js";
 
 // src/components/layout/Separator/Separator.tsx
 import Box from "@mui/material/Box/index.js";
@@ -24,7 +25,8 @@ var Separator = ({
   const blockMargin = separatorBlockMargin(theme, size, margin, isHorizontal);
   const styles = separatorStyles(theme, { variant, orientation, size, color, blockMargin, length });
   if (children) {
-    const ruleStyles = { ...styles, margin: 0 };
+    const layout = labelledSeparatorLayout(theme, isHorizontal, length);
+    const ruleStyles = { ...styles, margin: 0, ...layout.rule };
     return /* @__PURE__ */ jsxs(
       Box,
       {
@@ -35,7 +37,8 @@ var Separator = ({
           alignItems: "center",
           margin: blockMargin,
           flexDirection: isHorizontal ? "row" : "column",
-          gap: theme.spacing(2)
+          gap: theme.spacing(2),
+          ...layout.group
         },
         children: [
           /* @__PURE__ */ jsx(Box, { sx: ruleStyles }),
@@ -68,4 +71,4 @@ var Separator = ({
 export {
   Separator
 };
-//# sourceMappingURL=chunk-IG23YZZR.js.map
+//# sourceMappingURL=chunk-XSSCSRUX.js.map

package/dist/chunk-XSSCSRUX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Separator/Separator.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { labelledSeparatorLayout, separatorBlockMargin, separatorStyles } from './Separator.styles';\nimport type { SeparatorProps } from './Separator.types';\n\nexport const Separator: React.FC<SeparatorProps> = ({\n  variant = 'solid',\n  orientation = 'horizontal',\n  size = 'md',\n  color,\n  margin,\n  length,\n  children,\n  className,\n  'data-testid': dataTestId,\n}) => {\n  const theme = useTheme();\n  const isHorizontal = orientation === 'horizontal';\n  const blockMargin = separatorBlockMargin(theme, size, margin, isHorizontal);\n  const styles = separatorStyles(theme, { variant, orientation, size, color, blockMargin, length });\n\n  if (children) {\n    // The rules either side of the label sit INSIDE the row, which carries the\n    // margin; their own would add it a second time.\n    const layout = labelledSeparatorLayout(theme, isHorizontal, length);\n    const ruleStyles = { ...styles, margin: 0, ...layout.rule };\n\n    return (\n      <Box\n        className={className}\n        // The plain branch below has always carried the caller's hook; this one\n        // silently dropped it, so a LABELLED separator was the one variant no\n        // test could address except through its own words.\n        data-testid={dataTestId}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          margin: blockMargin,\n          flexDirection: isHorizontal ? 'row' : 'column',\n          gap: theme.spacing(2),\n          ...layout.group,\n        }}\n      >\n        <Box sx={ruleStyles} />\n        {/*\n          No background behind the label. The two rules and the words are a FLEX\n          ROW — the rules stop where the label starts — so there is nothing for a\n          background to mask, and painting one made the label a coloured pill on\n          every surface that is not `background.default`. On a white card it read\n          as a highlight nobody had asked for.\n        */}\n        <Typography\n          variant=\"body2\"\n          color=\"text.secondary\"\n          sx={{ flexShrink: 0, padding: theme.spacing(0, 1) }}\n        >\n          {children}\n        </Typography>\n        <Box sx={ruleStyles} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      className={className}\n      sx={styles}\n      role=\"separator\"\n      aria-orientation={orientation}\n      data-testid={dataTestId}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AA6BnB,SAeE,KAfF;AAvBC,IAAM,YAAsC,CAAC;AAAA,EAClD,UAAU;AAAA,EACV,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,gBAAgB;AACrC,QAAM,cAAc,qBAAqB,OAAO,MAAM,QAAQ,YAAY;AAC1E,QAAM,SAAS,gBAAgB,OAAO,EAAE,SAAS,aAAa,MAAM,OAAO,aAAa,OAAO,CAAC;AAEhG,MAAI,UAAU;AAGZ,UAAM,SAAS,wBAAwB,OAAO,cAAc,MAAM;AAClE,UAAM,aAAa,EAAE,GAAG,QAAQ,QAAQ,GAAG,GAAG,OAAO,KAAK;AAE1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAIA,eAAa;AAAA,QACb,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,eAAe,eAAe,QAAQ;AAAA,UACtC,KAAK,MAAM,QAAQ,CAAC;AAAA,UACpB,GAAG,OAAO;AAAA,QACZ;AAAA,QAEA;AAAA,8BAAC,OAAI,IAAI,YAAY;AAAA,UAQrB;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,IAAI,EAAE,YAAY,GAAG,SAAS,MAAM,QAAQ,GAAG,CAAC,EAAE;AAAA,cAEjD;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,OAAI,IAAI,YAAY;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,oBAAkB;AAAA,MAClB,eAAa;AAAA;AAAA,EACf;AAEJ;","names":[]}

package/dist/data-display/LazyImage.js

@@ -1,7 +1,7 @@
 import "../chunk-5ZFO7ROE.js";
 import {
   LazyImage
-} from "../chunk-FF2D7V7T.js";
+} from "../chunk-SDK5LPPC.js";
 import "../chunk-HCT5ELST.js";
 import "../chunk-724ZONOL.js";
 import "../chunk-BEGTLELZ.js";