@danske/sapphire-react-lab 0.106.3 → 0.107.0

package/build/cjs/index.js

@@ -59,6 +59,33 @@ var styles$a = require('@danske/sapphire-css/components/dateField/dateField.modu
 var useTimeField = require('react-aria/useTimeField');
 var useTimeFieldState = require('react-stately/useTimeFieldState');
 var useDateField = require('react-aria/useDateField');
+var styles$b = require('@danske/sapphire-css/components/truncate-overflow/truncate-overflow.module.css');
+var useOverlayTriggerState = require('react-stately/useOverlayTriggerState');
+var styles$c = require('@danske/sapphire-css/components/table/table.module.css');
+var reactTable = require('@tanstack/react-table');
+var reactVirtual = require('@tanstack/react-virtual');
+var useLoadMore = require('react-aria/private/utils/useLoadMore');
+var useFocusVisible = require('react-aria/private/interactions/useFocusVisible');
+var styles$g = require('@danske/sapphire-css/components/radio/radio.module.css');
+var sapphireReactContext = require('@danske/sapphire-react-context');
+var VirtualizerItem = require('react-aria/private/virtualizer/VirtualizerItem');
+var styles$e = require('@danske/sapphire-css/components/listbox/listbox.module.css');
+var iconStyles = require('@danske/sapphire-css/components/icon/icon.module.css');
+var styles$d = require('@danske/sapphire-css/components/skeleton/skeleton.module.css');
+var popoverStyles = require('@danske/sapphire-css/components/popover/popover.module.css');
+var ariaHideOutside = require('react-aria/private/overlays/ariaHideOutside');
+var avatarStyles = require('@danske/sapphire-css/components/avatar/avatar.module.css');
+require('@danske/sapphire-css/themes/default');
+require('@danske/sapphire-css/themes/default-dark');
+require('@danske/sapphire-css/themes/realkredit');
+var themes = require('@danske/sapphire-css/themes');
+require('react-dom');
+var surfaceStyles = require('@danske/sapphire-css/components/surface/surface.module.css');
+require('react-aria/PortalProvider');
+var useVirtualizerItem = require('react-aria/private/virtualizer/useVirtualizerItem');
+var styles$f = require('@danske/sapphire-css/components/separator/separator.module.css');
+var useVirtualizerState = require('react-stately/useVirtualizerState');
+var Virtualizer = require('react-aria/private/virtualizer/Virtualizer');
 
 const AccordionContext = React.createContext({
   sidePadding: void 0,
@@ -354,47 +381,47 @@ const Amount = ({
   );
 };
 
-var da$3 = {
+var da$4 = {
 	"listbox-suggestions": "Forslag"
 };
 
-var en$3 = {
+var en$4 = {
 	"listbox-suggestions": "Suggestions"
 };
 
-var de$3 = {
+var de$4 = {
 	"listbox-suggestions": "Vorschläge"
 };
 
-var fi$3 = {
+var fi$4 = {
 	"listbox-suggestions": "Ehdotukset"
 };
 
-var no$3 = {
+var no$4 = {
 	"listbox-suggestions": "Forslag"
 };
 
-var pl$3 = {
+var pl$4 = {
 	"listbox-suggestions": "Sugestie"
 };
 
-var se$3 = {
+var se$4 = {
 	"listbox-suggestions": "Förslag"
 };
 
-var intlMessages$3 = {
-  "da-DK": da$3,
-  "en-US": en$3,
-  "de-DE": de$3,
-  "fi-FI": fi$3,
-  "nb-NO": no$3,
-  "pl-PL": pl$3,
-  "sv-SE": se$3
+var intlMessages$4 = {
+  "da-DK": da$4,
+  "en-US": en$4,
+  "de-DE": de$4,
+  "fi-FI": fi$4,
+  "nb-NO": no$4,
+  "pl-PL": pl$4,
+  "sv-SE": se$4
 };
 
 function Autocomplete(props) {
   sapphireReact.useThemeCheck();
-  const formatMessage = i18n.useMessageFormatter(intlMessages$3);
+  const formatMessage = i18n.useMessageFormatter(intlMessages$4);
   const {
     inputValue,
     renderInput,
@@ -795,56 +822,56 @@ const convertFileListToFileDropItems = (fileList) => {
   }));
 };
 
-var da$2 = {
+var da$3 = {
 	"dropzone-heading-default": "Træk filer hertil, eller klik for at vælge",
 	"dropzone-heading-default-single": "Træk fil her, eller klik for at vælge",
 	"dropzone-heading-dropping": "Slip fil"
 };
 
-var en$2 = {
+var en$3 = {
 	"dropzone-heading-default": "Drag files here or click to select",
 	"dropzone-heading-default-single": "Drag a file here or click to select",
 	"dropzone-heading-dropping": "Drop file"
 };
 
-var de$2 = {
+var de$3 = {
 	"dropzone-heading-default": "Ziehen Sie Dateien hierher oder klicken Sie, um sie auszuwählen",
 	"dropzone-heading-default-single": "Ziehen Sie die Datei hierher oder klicken Sie, um sie auszuwählen",
 	"dropzone-heading-dropping": "Datei ablegen"
 };
 
-var fi$2 = {
+var fi$3 = {
 	"dropzone-heading-default": "Vedä tiedostoja tähän tai valitse napsauttamalla",
 	"dropzone-heading-default-single": "Vedä tiedosto tähän tai valitse napsauttamalla",
 	"dropzone-heading-dropping": "Pudota tiedosto"
 };
 
-var no$2 = {
+var no$3 = {
 	"dropzone-heading-default": "Dra filer her eller klikk for å velge",
 	"dropzone-heading-default-single": "Dra fil her eller klikk for å velge",
 	"dropzone-heading-dropping": "Slipp fil"
 };
 
-var pl$2 = {
+var pl$3 = {
 	"dropzone-heading-default": "Przeciągnij pliki tutaj lub kliknij, aby wybrać",
 	"dropzone-heading-default-single": "Przeciągnij plik tutaj lub kliknij, aby wybrać",
 	"dropzone-heading-dropping": "Upuść plik"
 };
 
-var se$2 = {
+var se$3 = {
 	"dropzone-heading-default": "Dra filer hit eller klicka för att välja",
 	"dropzone-heading-default-single": "Dra fil hit eller klicka för att välja",
 	"dropzone-heading-dropping": "Släpp filen"
 };
 
-var intlMessages$2 = {
-  "da-DK": da$2,
-  "en-US": en$2,
-  "de-DE": de$2,
-  "fi-FI": fi$2,
-  "nb-NO": no$2,
-  "pl-PL": pl$2,
-  "sv-SE": se$2
+var intlMessages$3 = {
+  "da-DK": da$3,
+  "en-US": en$3,
+  "de-DE": de$3,
+  "fi-FI": fi$3,
+  "nb-NO": no$3,
+  "pl-PL": pl$3,
+  "sv-SE": se$3
 };
 
 const FileDropzone = React.forwardRef(function DropzoneWrapper(props, forwardedRef) {
@@ -861,7 +888,7 @@ const FileDropzone = React.forwardRef(function DropzoneWrapper(props, forwardedR
   } = props;
   const id = useId.useId();
   const paragraphId = props["aria-label"] ? void 0 : id;
-  const format = i18n.useMessageFormatter(intlMessages$2);
+  const format = i18n.useMessageFormatter(intlMessages$3);
   const pressableRef = useObjectRef.useObjectRef(forwardedRef);
   const { hoverProps, isHovered } = useHover.useHover({ isDisabled });
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
@@ -1136,61 +1163,61 @@ function LabeledValue({
 
 var increment$6 = "øge";
 var decrement$6 = "formindske";
-var da$1 = {
+var da$2 = {
 	increment: increment$6,
 	decrement: decrement$6
 };
 
 var increment$5 = "Increase";
 var decrement$5 = "Decrease";
-var en$1 = {
+var en$2 = {
 	increment: increment$5,
 	decrement: decrement$5
 };
 
 var increment$4 = "erhöhen";
 var decrement$4 = "verringern";
-var de$1 = {
+var de$2 = {
 	increment: increment$4,
 	decrement: decrement$4
 };
 
 var increment$3 = "lisääntyä";
 var decrement$3 = "vähentää";
-var fi$1 = {
+var fi$2 = {
 	increment: increment$3,
 	decrement: decrement$3
 };
 
 var increment$2 = "øke";
 var decrement$2 = "avta";
-var no$1 = {
+var no$2 = {
 	increment: increment$2,
 	decrement: decrement$2
 };
 
 var increment$1 = "zwiększyć";
 var decrement$1 = "zmniejszenie";
-var pl$1 = {
+var pl$2 = {
 	increment: increment$1,
 	decrement: decrement$1
 };
 
 var increment = "öka";
 var decrement = "minska";
-var se$1 = {
+var se$2 = {
 	increment: increment,
 	decrement: decrement
 };
 
-var intlMessages$1 = {
-  "da-DK": da$1,
-  "en-US": en$1,
-  "de-DE": de$1,
-  "fi-FI": fi$1,
-  "nb-NO": no$1,
-  "pl-PL": pl$1,
-  "sv-SE": se$1
+var intlMessages$2 = {
+  "da-DK": da$2,
+  "en-US": en$2,
+  "de-DE": de$2,
+  "fi-FI": fi$2,
+  "nb-NO": no$2,
+  "pl-PL": pl$2,
+  "sv-SE": se$2
 };
 
 const StepperButton = ({
@@ -1666,7 +1693,7 @@ const NumberField = React.forwardRef(function NumberField2(props, ref) {
   }, [affix]);
   sapphireReact.useThemeCheck();
   const inputRef = useObjectRef.useObjectRef(props.inputRef);
-  const formatMessage = i18n.useMessageFormatter(intlMessages$1);
+  const formatMessage = i18n.useMessageFormatter(intlMessages$2);
   const {
     inputProps,
     labelProps,
@@ -2586,48 +2613,48 @@ const EditableSegment = ({ segment, state }) => {
 };
 
 var clear$6 = "Nulstil";
-var da = {
+var da$1 = {
 	clear: clear$6
 };
 
 var clear$5 = "Clear";
-var en = {
+var en$1 = {
 	clear: clear$5
 };
 
 var clear$4 = "Zurücksetzen";
-var de = {
+var de$1 = {
 	clear: clear$4
 };
 
 var clear$3 = "Nollaa";
-var fi = {
+var fi$1 = {
 	clear: clear$3
 };
 
 var clear$2 = "Nullstill";
-var no = {
+var no$1 = {
 	clear: clear$2
 };
 
 var clear$1 = "Zresetuj";
-var pl = {
+var pl$1 = {
 	clear: clear$1
 };
 
 var clear = "Återställ";
-var se = {
+var se$1 = {
 	clear: clear
 };
 
-var intlMessages = {
-  "da-DK": da,
-  "en-US": en,
-  "de-DE": de,
-  "fi-FI": fi,
-  "nb-NO": no,
-  "pl-PL": pl,
-  "sv-SE": se
+var intlMessages$1 = {
+  "da-DK": da$1,
+  "en-US": en$1,
+  "de-DE": de$1,
+  "fi-FI": fi$1,
+  "nb-NO": no$1,
+  "pl-PL": pl$1,
+  "sv-SE": se$1
 };
 
 const isAnySegmentModified = (segments) => segments.map(({ type, isPlaceholder }) => {
@@ -2646,7 +2673,7 @@ function _TimeField({
   sapphireReact.useThemeCheck();
   const timeFieldRef = useObjectRef.useObjectRef(ref);
   const { locale } = I18nProvider.useLocale();
-  const formatMessage = i18n.useMessageFormatter(intlMessages);
+  const formatMessage = i18n.useMessageFormatter(intlMessages$1);
   const state = useTimeFieldState.useTimeFieldState({
     ...otherProps,
     locale,
@@ -2704,6 +2731,2469 @@ function _TimeField({
 }
 const TimeField = React.forwardRef(_TimeField);
 
+const TruncateOverflow = React.forwardRef(({ children, tooltip: tooltipProp, ...props }, forwardedRef) => {
+  const ref = useObjectRef.useObjectRef(forwardedRef);
+  const { styleProps, filteredProps } = sapphireReact.useSapphireStyleProps(props);
+  const [needsTooltip, setNeedsTooltip] = React.useState(false);
+  const [content, setContent] = React.useState(
+    typeof children === "string" ? children : ""
+  );
+  const tooltip = tooltipProp ?? content;
+  React.useEffect(() => {
+    const elem = ref.current;
+    if (!elem) return;
+    const hasOverflow = elem.scrollWidth > elem.clientWidth || elem.scrollHeight > elem.clientHeight;
+    setNeedsTooltip(hasOverflow);
+    setContent(
+      typeof children === "string" ? children : elem.textContent?.trim() ?? ""
+    );
+  });
+  return needsTooltip && tooltip ? /* @__PURE__ */ React.createElement(sapphireReact.Tooltip, { title: tooltip }, (triggerProps) => /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ...mergeProps.mergeProps(triggerProps, filteredProps),
+      ref: mergeRefs.mergeRefs(
+        ref,
+        triggerProps.ref
+      ),
+      className: clsx(
+        styles$b["sapphire-truncate-overflow"],
+        styleProps.className
+      ),
+      style: styleProps.style
+    },
+    children
+  )) : /* @__PURE__ */ React.createElement("span", { ref, className: styles$b["sapphire-truncate-overflow"] }, children);
+});
+TruncateOverflow.displayName = "TruncateOverflow";
+
+const DataGridCellContext = React.createContext(null);
+
+const EditableCellContent = React.forwardRef(function EditableCellContent2(props, ref) {
+  const {
+    children,
+    renderEditor,
+    onSubmit,
+    onCancel,
+    editButtonLabel,
+    saveButtonLabel
+  } = props;
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [cellPosition, setCellPosition] = React.useState({ width: 0, offset: 0 });
+  const cellContext = React.useContext(DataGridCellContext);
+  if (!cellContext) {
+    throw new Error(
+      "DataGrid.EditableCellContent is meant to be rendered inside DataGrid columns."
+    );
+  }
+  const cellRef = cellContext.ref;
+  const formRef = React.useRef(null);
+  const handleSubmit = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      const result = onSubmit?.(e);
+      if (result !== false) {
+        setIsEditing(false);
+      }
+    },
+    [onSubmit, setIsEditing]
+  );
+  const cancel = React.useCallback(() => {
+    setIsEditing(false);
+    onCancel?.();
+  }, [setIsEditing, onCancel]);
+  const popoverState = useOverlayTriggerState.useOverlayTriggerState({
+    isOpen: isEditing,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) {
+        formRef.current?.requestSubmit();
+      }
+    }
+  });
+  React.useLayoutEffect(() => {
+    if (isEditing && cellRef.current) {
+      const width = cellRef.current.clientWidth;
+      const offset = -cellRef.current.offsetHeight - 1;
+      setCellPosition({ width, offset });
+    }
+  }, [isEditing]);
+  React.useEffect(() => {
+    if (isEditing) {
+      const onKeyDown = (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          e.preventDefault();
+          cancel();
+        }
+      };
+      window.addEventListener("keydown", onKeyDown);
+      return () => {
+        window.removeEventListener("keydown", onKeyDown);
+      };
+    }
+  }, [isEditing, cancel]);
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ref,
+      className: clsx(styles$c["sapphire-table__cell-container--editable"])
+    },
+    children,
+    /* @__PURE__ */ React.createElement(
+      sapphireReact.IconButton,
+      {
+        "aria-label": editButtonLabel ?? "Edit",
+        variant: "tertiary",
+        size: "sm",
+        onPress: () => setIsEditing(true),
+        UNSAFE_className: clsx(styles$c["sapphire-table__edit-button"])
+      },
+      /* @__PURE__ */ React.createElement(react.EditAlt, null)
+    ),
+    /* @__PURE__ */ React.createElement(
+      sapphireReact.Popover,
+      {
+        state: popoverState,
+        triggerRef: cellRef,
+        placement: "bottom start",
+        offset: cellPosition.offset,
+        isKeyboardDismissDisabled: true,
+        padded: true,
+        UNSAFE_style: { minWidth: `${cellPosition.width}px` }
+      },
+      /* @__PURE__ */ React.createElement(
+        "form",
+        {
+          ref: formRef,
+          onSubmit: handleSubmit,
+          className: clsx(styles$c["sapphire-table__edit-cell-popover"])
+        },
+        renderEditor(),
+        /* @__PURE__ */ React.createElement(
+          sapphireReact.IconButton,
+          {
+            size: "md",
+            type: "submit",
+            variant: "tertiary",
+            "aria-label": saveButtonLabel ?? "Save"
+          },
+          /* @__PURE__ */ React.createElement(react.Checkmark, null)
+        )
+      )
+    )
+  );
+});
+
+function useMeasureColumnWidths({
+  data,
+  table,
+  enabled: shouldAutoMeasure,
+  tableRef
+}) {
+  const [measuredColumnWidths, setMeasuredColumnWidths] = React.useState(null);
+  const columnKey = table.getVisibleLeafColumns().map((c) => c.id).join(",");
+  React.useLayoutEffect(() => {
+    if (shouldAutoMeasure) {
+      setMeasuredColumnWidths(null);
+    }
+  }, [columnKey, shouldAutoMeasure]);
+  React.useLayoutEffect(() => {
+    if (!shouldAutoMeasure || measuredColumnWidths !== null) return;
+    if (data.length === 0) return;
+    const tableEl = tableRef.current;
+    if (!tableEl) return;
+    let rafId;
+    let cancelled = false;
+    const measureColumnWidths = () => {
+      if (cancelled) return;
+      const bodyRows = tableEl.querySelectorAll("tbody tr:not([aria-hidden])");
+      if (bodyRows.length === 0) {
+        rafId = requestAnimationFrame(measureColumnWidths);
+        return;
+      }
+      const headerCells = tableEl.querySelectorAll("thead th");
+      const visibleColumns = table.getVisibleLeafColumns();
+      const widths = {};
+      visibleColumns.forEach((col, i) => {
+        const thEl = headerCells[i];
+        if (thEl) {
+          widths[col.id] = thEl.getBoundingClientRect().width;
+        }
+      });
+      if (Object.keys(widths).length > 0 && !cancelled) {
+        setMeasuredColumnWidths(widths);
+      }
+    };
+    rafId = requestAnimationFrame(measureColumnWidths);
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(rafId);
+    };
+  }, [shouldAutoMeasure, measuredColumnWidths, data.length, table]);
+  return {
+    measuredColumnWidths
+  };
+}
+
+const INTERACTIVE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])"
+].join(", ");
+const GRID_ROW_ATTR = "data-grid-row";
+const DATA_INDEX_ATTR = "data-index";
+function buildGrid(table) {
+  const grid = [];
+  const thead = table.querySelector("thead");
+  if (thead) {
+    thead.querySelectorAll(":scope > tr").forEach((tr) => {
+      const cells = rowCells(tr);
+      if (cells.length > 0) grid.push(cells);
+    });
+  }
+  const tbody = table.querySelector("tbody");
+  if (tbody) {
+    tbody.querySelectorAll(`:scope > tr[${GRID_ROW_ATTR}]`).forEach((tr) => {
+      const cells = rowCells(tr);
+      if (cells.length > 0) grid.push(cells);
+    });
+  }
+  return grid;
+}
+function rowCells(tr) {
+  const cells = [];
+  tr.querySelectorAll(":scope > th, :scope > td").forEach(
+    (cell) => {
+      cells.push({ element: cell, focusTarget: getFocusTarget(cell) });
+    }
+  );
+  return cells;
+}
+function getFocusTarget(cell) {
+  const interactive = cell.querySelectorAll(INTERACTIVE_SELECTOR);
+  return interactive.length === 1 ? interactive[0] : cell;
+}
+function isEditableTarget(target) {
+  if (target instanceof HTMLTextAreaElement) return true;
+  if (target instanceof HTMLSelectElement) return true;
+  if (target instanceof HTMLInputElement && target.type !== "checkbox" && target.type !== "radio" && target.type !== "button")
+    return true;
+  return target instanceof HTMLElement && target.isContentEditable;
+}
+function getDataIndexOfCell(cell) {
+  const tr = cell.closest("tr");
+  const raw = tr?.getAttribute(DATA_INDEX_ATTR);
+  if (raw == null) return null;
+  const n = parseInt(raw, 10);
+  return isNaN(n) ? null : n;
+}
+function findGridRowByDataIndex(grid, dataIndex) {
+  for (let r = grid.length - 1; r >= 0; r--) {
+    const tr = grid[r][0]?.element.closest("tr");
+    if (tr?.getAttribute(DATA_INDEX_ATTR) === String(dataIndex)) return r;
+  }
+  return -1;
+}
+function getVisiblePageSize(scrollContainer, table) {
+  const fallback = 7;
+  if (!scrollContainer) return fallback;
+  const containerHeight = scrollContainer.clientHeight;
+  if (containerHeight <= 0) return fallback;
+  const firstBodyRow = table.querySelector(
+    `tbody > tr[${GRID_ROW_ATTR}]`
+  );
+  if (!firstBodyRow) return fallback;
+  const rowHeight = firstBodyRow.getBoundingClientRect().height;
+  if (rowHeight <= 0) return fallback;
+  return Math.max(1, Math.floor(containerHeight / rowHeight));
+}
+function countHeaderRows(grid) {
+  let count = 0;
+  for (const row of grid) {
+    const tr = row[0]?.element.closest("tr");
+    if (tr?.closest("thead")) count++;
+    else break;
+  }
+  return count;
+}
+function useGridKeyboardNavigation({
+  tableRef,
+  enabled = true,
+  scrollContainerRef,
+  rowItemCount,
+  onScrollToRowIndex
+}) {
+  const activeCoordsRef = React.useRef({ row: 0, col: 0 });
+  const pendingFocusRef = React.useRef(null);
+  const [focusedRowIndex, setFocusedRowIndex] = React.useState(null);
+  const syncTabIndices = () => {
+    const table = tableRef.current;
+    if (!table || !enabled) return;
+    const grid = buildGrid(table);
+    if (grid.length === 0) return;
+    let { row, col } = activeCoordsRef.current;
+    const activeEl = table.ownerDocument.activeElement;
+    if (activeEl && table.contains(activeEl)) {
+      const focusedCell = activeEl.closest?.(
+        "th, td"
+      );
+      if (focusedCell) {
+        for (let r = 0; r < grid.length; r++) {
+          for (let c = 0; c < grid[r].length; c++) {
+            if (grid[r][c].element === focusedCell) {
+              row = r;
+              col = c;
+              break;
+            }
+          }
+        }
+      }
+    }
+    const clampedRow = clamp(row, 0, grid.length - 1);
+    const clampedCol = clamp(col, 0, grid[clampedRow].length - 1);
+    activeCoordsRef.current = { row: clampedRow, col: clampedCol };
+    for (let r = 0; r < grid.length; r++) {
+      for (let c = 0; c < grid[r].length; c++) {
+        const { element, focusTarget } = grid[r][c];
+        const isActive = r === clampedRow && c === clampedCol;
+        element.setAttribute("tabindex", "-1");
+        element.querySelectorAll(INTERACTIVE_SELECTOR).forEach((child) => {
+          child.setAttribute("tabindex", "-1");
+        });
+        if (isActive) {
+          focusTarget.setAttribute("tabindex", "0");
+        }
+      }
+    }
+  };
+  React.useLayoutEffect(() => {
+    if (!enabled) return;
+    const table = tableRef.current;
+    if (!table) return;
+    const pending = pendingFocusRef.current;
+    if (pending) {
+      const grid = buildGrid(table);
+      const gridRow = findNearestGridRowByDataIndex(grid, pending.dataIndex);
+      if (gridRow >= 0) {
+        pendingFocusRef.current = null;
+        const col = clamp(pending.col, 0, grid[gridRow].length - 1);
+        activeCoordsRef.current = { row: gridRow, col };
+        syncTabIndices();
+        grid[gridRow][col].focusTarget.focus();
+        return;
+      }
+    }
+    syncTabIndices();
+  });
+  const navigateTo = (targetRow, targetCol) => {
+    const table = tableRef.current;
+    if (!table) return;
+    const grid = buildGrid(table);
+    if (grid.length === 0) return;
+    const row = clamp(targetRow, 0, grid.length - 1);
+    const col = clamp(targetCol, 0, grid[row].length - 1);
+    activeCoordsRef.current = { row, col };
+    syncTabIndices();
+    const cell = grid[row]?.[col];
+    if (cell) {
+      cell.focusTarget.focus({ preventScroll: true });
+      cell.element.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    }
+  };
+  const navigateToDataIndex = (dataIndex, col) => {
+    const table = tableRef.current;
+    if (!table) return;
+    const grid = buildGrid(table);
+    const gridRow = findGridRowByDataIndex(grid, dataIndex);
+    if (gridRow >= 0) {
+      const clampedCol = clamp(col, 0, grid[gridRow].length - 1);
+      activeCoordsRef.current = { row: gridRow, col: clampedCol };
+      syncTabIndices();
+      grid[gridRow][clampedCol].focusTarget.focus({ preventScroll: true });
+      grid[gridRow][clampedCol].element.scrollIntoView?.({
+        block: "nearest",
+        inline: "nearest"
+      });
+      return;
+    }
+    if (onScrollToRowIndex) {
+      onScrollToRowIndex(dataIndex);
+      pendingFocusRef.current = { dataIndex, col };
+    }
+  };
+  const onKeyDown = (e) => {
+    if (!enabled) return;
+    const table = tableRef.current;
+    if (!table) return;
+    if (isEditableTarget(e.target)) return;
+    const grid = buildGrid(table);
+    if (grid.length === 0) return;
+    const cell = e.target.closest?.(
+      "th, td"
+    );
+    if (!cell || !table.contains(cell)) return;
+    let curRow = -1;
+    let curCol = -1;
+    outer: for (let r = 0; r < grid.length; r++) {
+      for (let c = 0; c < grid[r].length; c++) {
+        if (grid[r][c].element === cell) {
+          curRow = r;
+          curCol = c;
+          break outer;
+        }
+      }
+    }
+    if (curRow < 0) return;
+    const curDataIndex = getDataIndexOfCell(cell);
+    const headerRows = countHeaderRows(grid);
+    const isBodyRow = curDataIndex != null;
+    const maxRow = grid.length - 1;
+    let targetRow = curRow;
+    let targetCol = curCol;
+    let handled = true;
+    switch (e.key) {
+      case "ArrowRight":
+        targetCol = Math.min(curCol + 1, grid[curRow].length - 1);
+        break;
+      case "ArrowLeft":
+        targetCol = Math.max(curCol - 1, 0);
+        break;
+      case "ArrowDown":
+        if (isBodyRow && rowItemCount != null) {
+          const nextDataIndex = findNextNavigableDataIndex(
+            grid,
+            curDataIndex,
+            1,
+            rowItemCount
+          );
+          if (nextDataIndex != null) {
+            e.preventDefault();
+            navigateToDataIndex(nextDataIndex, curCol);
+            return;
+          }
+        } else {
+          targetRow = Math.min(curRow + 1, maxRow);
+        }
+        break;
+      case "ArrowUp":
+        if (isBodyRow) {
+          const prevDataIndex = findNextNavigableDataIndex(
+            grid,
+            curDataIndex,
+            -1,
+            rowItemCount ?? curDataIndex
+          );
+          if (prevDataIndex != null) {
+            e.preventDefault();
+            navigateToDataIndex(prevDataIndex, curCol);
+            return;
+          }
+          targetRow = Math.max(headerRows - 1, 0);
+        } else {
+          targetRow = Math.max(curRow - 1, 0);
+        }
+        break;
+      case "Home":
+        if (e.ctrlKey || e.metaKey) {
+          targetRow = 0;
+          targetCol = 0;
+        } else {
+          targetCol = 0;
+        }
+        break;
+      case "End":
+        if (e.ctrlKey || e.metaKey) {
+          targetRow = maxRow;
+          targetCol = grid[maxRow].length - 1;
+        } else {
+          targetCol = grid[curRow].length - 1;
+        }
+        break;
+      case "PageDown":
+      case "PageUp": {
+        const pageSize = getVisiblePageSize(
+          scrollContainerRef?.current ?? null,
+          table
+        );
+        const direction = e.key === "PageDown" ? 1 : -1;
+        if (isBodyRow && rowItemCount != null) {
+          let target = curDataIndex;
+          let stepsUsed = 0;
+          for (let i = 0; i < pageSize; i++) {
+            const next = findNextNavigableDataIndex(
+              grid,
+              target,
+              direction,
+              rowItemCount
+            );
+            if (next == null) break;
+            target = next;
+            stepsUsed++;
+          }
+          const hasRemainingSteps = stepsUsed < pageSize;
+          if (direction === -1 && hasRemainingSteps) {
+            targetRow = 0;
+            break;
+          }
+          if (target !== curDataIndex) {
+            e.preventDefault();
+            navigateToDataIndex(target, curCol);
+            return;
+          }
+        }
+        targetRow = clamp(curRow + direction * pageSize, 0, maxRow);
+        break;
+      }
+      default:
+        handled = false;
+    }
+    if (handled) {
+      e.preventDefault();
+      targetCol = Math.min(targetCol, grid[targetRow].length - 1);
+      navigateTo(targetRow, targetCol);
+    }
+  };
+  const onFocus = (e) => {
+    if (!enabled) return;
+    const table = tableRef.current;
+    if (!table) return;
+    const cell = e.target.closest?.(
+      "th, td"
+    );
+    if (!cell || !table.contains(cell)) return;
+    if (focusedRowIndex != null && !table.contains(e.relatedTarget) && useFocusVisible.getInteractionModality() !== "pointer") {
+      onScrollToRowIndex?.(focusedRowIndex, { align: "start" });
+    }
+    const grid = buildGrid(table);
+    for (let r = 0; r < grid.length; r++) {
+      for (let c = 0; c < grid[r].length; c++) {
+        if (grid[r][c].element === cell) {
+          activeCoordsRef.current = { row: r, col: c };
+          syncTabIndices();
+          const dataIndex = getDataIndexOfCell(cell);
+          if (dataIndex !== focusedRowIndex) {
+            setFocusedRowIndex(dataIndex);
+          }
+          return;
+        }
+      }
+    }
+  };
+  const rangeExtractor = React.useCallback(
+    (range) => {
+      const indices = reactVirtual.defaultRangeExtractor(range);
+      if (focusedRowIndex != null && !indices.includes(focusedRowIndex)) {
+        indices.push(focusedRowIndex);
+        indices.sort((a, b) => a - b);
+      }
+      return indices;
+    },
+    [focusedRowIndex]
+  );
+  return {
+    gridKeyboardNavigationProps: { onKeyDown, onFocus },
+    rangeExtractor
+  };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function findNextNavigableDataIndex(grid, fromDataIndex, direction, rowItemCount) {
+  const navigable = /* @__PURE__ */ new Set();
+  const nonNavigable = /* @__PURE__ */ new Set();
+  const table = grid[0]?.[0]?.element.closest("table");
+  if (table) {
+    const tbody = table.querySelector("tbody");
+    if (tbody) {
+      tbody.querySelectorAll(":scope > tr[data-index]").forEach((tr) => {
+        const idx = parseInt(tr.getAttribute(DATA_INDEX_ATTR), 10);
+        if (isNaN(idx)) return;
+        if (tr.hasAttribute(GRID_ROW_ATTR)) {
+          navigable.add(idx);
+        } else {
+          nonNavigable.add(idx);
+        }
+      });
+    }
+  }
+  let candidate = fromDataIndex + direction;
+  while (candidate >= 0 && candidate < rowItemCount) {
+    if (nonNavigable.has(candidate)) {
+      candidate += direction;
+      continue;
+    }
+    return candidate;
+  }
+  return null;
+}
+function findNearestGridRowByDataIndex(grid, targetDataIndex) {
+  let bestRow = -1;
+  let bestDist = Infinity;
+  for (let r = 0; r < grid.length; r++) {
+    const tr = grid[r][0]?.element.closest("tr");
+    const raw = tr?.getAttribute(DATA_INDEX_ATTR);
+    if (raw == null) continue;
+    const idx = parseInt(raw, 10);
+    if (isNaN(idx)) continue;
+    const dist = Math.abs(idx - targetDataIndex);
+    if (dist < bestDist) {
+      bestDist = dist;
+      bestRow = r;
+    }
+  }
+  return bestRow;
+}
+
+const isHiddenHandler = {
+  styleProp: "display",
+  convertValue: (value) => value ? "none" : void 0
+};
+const commonStyleHandlers = {
+  margin: "margin",
+  marginLeft: "marginLeft",
+  marginRight: "marginRight",
+  marginTop: "marginTop",
+  marginBottom: "marginBottom",
+  marginX: {
+    styleProps: ["marginLeft", "marginRight"]
+  },
+  marginY: {
+    styleProps: ["marginTop", "marginBottom"]
+  },
+  width: "width",
+  height: "height",
+  minWidth: "minWidth",
+  minHeight: "minHeight",
+  maxWidth: "maxWidth",
+  maxHeight: "maxHeight",
+  flex: "flex",
+  flexGrow: "flexGrow",
+  flexShrink: "flexShrink",
+  flexBasis: "flexBasis",
+  justifySelf: "justifySelf",
+  alignSelf: "alignSelf",
+  order: "order",
+  gridArea: "gridArea",
+  gridColumn: "gridColumn",
+  gridColumnEnd: "gridColumnEnd",
+  gridColumnStart: "gridColumnStart",
+  gridRow: "gridRow",
+  gridRowEnd: "gridRowEnd",
+  gridRowStart: "gridRowStart",
+  position: "position",
+  zIndex: "zIndex",
+  top: "top",
+  bottom: "bottom",
+  left: "left",
+  right: "right",
+  inset: "inset",
+  isHidden: isHiddenHandler
+};
+
+function useBreakpointContext() {
+  return React.useContext(
+    sapphireReactContext.BreakpointContext
+  );
+}
+
+const isSapphireToken = (obj) => "value" in obj;
+const resolveResponsiveValue = (matchedBreakpoints, value) => {
+  if (value && typeof value === "object") {
+    if (isSapphireToken(value)) {
+      return value.value;
+    }
+    for (const breakpoint of matchedBreakpoints) {
+      if (breakpoint === "base") {
+        continue;
+      }
+      const breakpointValue = value[breakpoint];
+      if (breakpointValue != null) {
+        if (typeof breakpointValue === "object" && isSapphireToken(breakpointValue)) {
+          return breakpointValue.value;
+        }
+        return breakpointValue;
+      }
+    }
+    const baseValue = value.base;
+    if (baseValue != null) {
+      if (typeof baseValue === "object" && isSapphireToken(baseValue)) {
+        return baseValue.value;
+      }
+      return baseValue;
+    }
+  }
+  return value;
+};
+const useResolveResponsiveValue = () => {
+  const breakpointContext = useBreakpointContext();
+  const matchedBreakpoints = breakpointContext?.matchedBreakpoints || ["base"];
+  return (value) => resolveResponsiveValue(matchedBreakpoints, value);
+};
+const generateRulePart = (containerBreakpointValue, className, key, breakpointResponsiveValue, container) => {
+  const kebabCaseKey = key.replace(
+    /[A-Z]/g,
+    (match) => `-${match.toLowerCase()}`
+  );
+  const value = breakpointResponsiveValue && typeof breakpointResponsiveValue === "object" && isSapphireToken(breakpointResponsiveValue) ? breakpointResponsiveValue.value : breakpointResponsiveValue;
+  return `
+    @container ${typeof container === "string" ? container : ""} (min-width: ${containerBreakpointValue}px) {
+      .${className} {
+        ${kebabCaseKey}: ${value};
+      }
+    }`;
+};
+const useContainerStyleProps = (props, handlers) => {
+  const uniqueId = useId.useId().replace(/:/g, "_");
+  const elementClassName = `container-query-${uniqueId}`;
+  const breakpointContext = useBreakpointContext();
+  let stylesString = "";
+  Object.keys(props).forEach((_key) => {
+    const key = _key;
+    const responsiveValue = props[key];
+    if (!responsiveValue || !isContainerResponsiveProp(responsiveValue)) {
+      return;
+    }
+    const breakpoints = [
+      0,
+      // `value.base` should be mapped to min-width: 0px and should always be first in the stylesheet.
+      ...Object.keys(responsiveValue).filter(
+        (breakpointKey) => !["base", "container"].includes(breakpointKey)
+      )
+    ];
+    breakpoints.forEach((breakpointKey) => {
+      const isDesignTokenBreakpoint = isNaN(Number(breakpointKey));
+      const containerBreakpointValue = isDesignTokenBreakpoint ? (
+        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain -- we are confident it's a BreakpointKey
+        breakpointContext?.breakpoints?.[breakpointKey]
+      ) : Number(breakpointKey);
+      const value = isDesignTokenBreakpoint ? responsiveValue[breakpointKey] : breakpointKey === 0 ? responsiveValue.base : responsiveValue[containerBreakpointValue];
+      Object.entries(
+        normalizeHandler(handlers[key], value ?? void 0)
+      ).forEach(([styleProp, styleValue]) => {
+        stylesString += generateRulePart(
+          containerBreakpointValue,
+          elementClassName,
+          styleProp,
+          styleValue,
+          responsiveValue.container
+        );
+      });
+    });
+  });
+  const getOrCreateStylesheet = React.useCallback(() => {
+    const stylesheetElementId = "container-query-stylesheet-" + uniqueId;
+    let containerQueryStylesheetElement = document.getElementById(stylesheetElementId);
+    if (!containerQueryStylesheetElement) {
+      containerQueryStylesheetElement = document.createElement("style");
+      containerQueryStylesheetElement.id = stylesheetElementId;
+      document.head.appendChild(containerQueryStylesheetElement);
+    }
+    return containerQueryStylesheetElement;
+  }, [uniqueId]);
+  React.useEffect(() => {
+    if (!stylesString) {
+      return;
+    }
+    const styleSheet = getOrCreateStylesheet();
+    const cssRuleNode = document.createTextNode(stylesString);
+    styleSheet.appendChild(cssRuleNode);
+    return () => {
+      styleSheet.remove();
+    };
+  }, [stylesString, getOrCreateStylesheet]);
+  return {
+    containerStylesClassName: stylesString ? elementClassName : ""
+  };
+};
+function isContainerResponsiveProp(prop) {
+  return prop && typeof prop === "object" && "container" in prop;
+}
+const useSapphireStyleProps = ({ UNSAFE_className, UNSAFE_style, ...props }, handlers = commonStyleHandlers) => {
+  const resolveResponsiveValue2 = useResolveResponsiveValue();
+  const { containerStylesClassName } = useContainerStyleProps(
+    props,
+    handlers
+  );
+  const derivedStyle = {};
+  const filteredProps = {};
+  Object.keys(props).forEach((key) => {
+    if (["style", "className"].includes(key) && typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
+      return console.warn(
+        "Passing 'style' or 'className' props will have no effect. Please use supported style props directly or use UNSAFE_style or UNSAFE_className if you have no other options than applying style directly to the component."
+      );
+    }
+    const currentProp = props[key];
+    const handler = handlers[key];
+    if (handler !== void 0 && currentProp !== null) {
+      if (!isContainerResponsiveProp(currentProp)) {
+        const resolvedResponsiveValue = resolveResponsiveValue2(
+          // @ts-expect-error: TS2590: Expression produces a union type that is too complex to represent.
+          currentProp
+        );
+        Object.assign(
+          derivedStyle,
+          normalizeHandler(handler, resolvedResponsiveValue)
+        );
+      }
+    } else {
+      filteredProps[key] = currentProp;
+    }
+  });
+  return {
+    styleProps: {
+      style: { ...UNSAFE_style, ...derivedStyle },
+      className: clsx(UNSAFE_className, containerStylesClassName)
+    },
+    filteredProps
+  };
+};
+function normalizeHandler(handler, value) {
+  const result = {};
+  if (value == void 0) {
+    return result;
+  }
+  if (typeof handler === "object") {
+    if ("convertValue" in handler) {
+      value = handler.convertValue(value);
+    }
+    const styleProps = "styleProps" in handler ? handler.styleProps : [handler.styleProp];
+    styleProps.forEach((styleProp) => {
+      result[styleProp] = value;
+    });
+  } else {
+    result[handler] = value;
+  }
+  return result;
+}
+
+({
+  ...commonStyleHandlers});
+
+const ListBoxContext = React.createContext(
+  null
+);
+
+const getAnimationDelay = (order) => order ? `${order * 80}ms` : void 0;
+
+const isFixedWidthType = (props) => {
+  return props.widthType === "fixed";
+};
+const SkeletonText = (props) => {
+  useThemeCheck();
+  const {
+    index,
+    widthType = "randomPct",
+    UNSAFE_className,
+    UNSAFE_style,
+    children,
+    minWidth = 50,
+    maxWidth = 100,
+    ...rest
+  } = props;
+  const animationDelay = getAnimationDelay(index);
+  const { styleProps } = useSapphireStyleProps({
+    UNSAFE_className,
+    UNSAFE_style
+  });
+  const skeletonWidth = React.useMemo(() => {
+    if (isFixedWidthType(props)) {
+      return props.width;
+    }
+    const calculatedWidth = Math.random() * (maxWidth - minWidth) + minWidth;
+    return widthType === "randomPct" ? `${calculatedWidth}%` : calculatedWidth;
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ...rest,
+      style: {
+        width: skeletonWidth,
+        animationDelay,
+        ...styleProps.style
+      },
+      className: clsx(
+        styles$d["sapphire-skeleton"],
+        styles$d["sapphire-skeleton--text"],
+        styleProps.className
+      )
+    }
+  );
+};
+
+const SkeletonCircle = ({
+  index,
+  children,
+  ...rest
+}) => {
+  useThemeCheck();
+  const { styleProps } = useSapphireStyleProps(rest);
+  const animationDelay = getAnimationDelay(index);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      style: {
+        animationDelay,
+        ...styleProps.style
+      },
+      className: clsx(
+        styles$d["sapphire-skeleton"],
+        styles$d["sapphire-skeleton--circle"],
+        styleProps.className
+      )
+    }
+  );
+};
+
+const Skeleton = {
+  Circle: SkeletonCircle,
+  Text: SkeletonText};
+
+const ListBoxItemSkeleton = ({
+  index,
+  primaryText = true,
+  secondaryText = false,
+  icon = false,
+  iconSize = "lg"
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: clsx(
+      styles$e["sapphire-listbox__item"],
+      styles$e["js-hover"],
+      styles$e["js-focus"]
+    )
+  },
+  /* @__PURE__ */ React.createElement("div", { className: styles$e["sapphire-listbox__content"] }, icon && /* @__PURE__ */ React.createElement("div", { className: styles$e["sapphire-listbox__icon"] }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(iconStyles["sapphire-icon"], {
+        [iconStyles["sapphire-icon--sm"]]: iconSize === "sm",
+        [iconStyles["sapphire-icon--md"]]: iconSize === "md",
+        [iconStyles["sapphire-icon--lg"]]: iconSize === "lg",
+        [iconStyles["sapphire-icon--xl"]]: iconSize === "xl"
+      })
+    },
+    icon === true ? /* @__PURE__ */ React.createElement(Skeleton.Circle, { index }) : icon
+  )), /* @__PURE__ */ React.createElement("div", { className: styles$e["sapphire-listbox__text-container"] }, /* @__PURE__ */ React.createElement("div", { className: styles$e["sapphire-listbox__primary-text"] }, primaryText === true ? /* @__PURE__ */ React.createElement(Skeleton.Text, { index }) : primaryText), secondaryText && /* @__PURE__ */ React.createElement("div", { className: styles$e["sapphire-listbox__secondary-text"] }, secondaryText === true ? /* @__PURE__ */ React.createElement(Skeleton.Text, { index }) : secondaryText)))
+);
+
+const Icon = React.forwardRef(function Icon2({
+  size = "md",
+  color = "inherit",
+  "aria-label": ariaLabel,
+  ...props
+}, ref) {
+  useThemeCheck();
+  const { styleProps } = useSapphireStyleProps(props);
+  const colorClass = color === "inherit" ? void 0 : iconStyles[`sapphire-icon--${color}`];
+  return React.cloneElement(utils.getWrappedElement(props.children), {
+    ref,
+    role: "img",
+    ...ariaLabel ? { "aria-label": ariaLabel } : { "aria-hidden": true },
+    className: clsx(
+      iconStyles["sapphire-icon"],
+      styleProps.className,
+      iconStyles[`sapphire-icon--${size}`],
+      colorClass
+    ),
+    style: styleProps.style
+  });
+});
+
+const flexStylePropsHandler = {
+  ...commonStyleHandlers,
+  flexDirection: "flexDirection",
+  flexWrap: "flexWrap",
+  flexFlow: "flexFlow",
+  justifyContent: { styleProp: "justifyContent", convertValue: flexAlignValue },
+  alignItems: { styleProp: "alignItems", convertValue: flexAlignValue },
+  alignContent: { styleProp: "alignContent", convertValue: flexAlignValue },
+  gap: "gap",
+  columnGap: "columnGap",
+  rowGap: "rowGap",
+  padding: "padding",
+  paddingLeft: "paddingLeft",
+  paddingRight: "paddingRight",
+  paddingTop: "paddingTop",
+  paddingBottom: "paddingBottom",
+  container: "container",
+  containerType: "containerType",
+  containerName: "containerName"
+};
+React.forwardRef(function Flex2(props, ref) {
+  useThemeCheck();
+  const { children, elementType, ...otherProps } = props;
+  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps, flexStylePropsHandler);
+  const style = {
+    ...styleProps.style,
+    display: "flex"
+  };
+  const ElementType2 = elementType || "div";
+  return /* @__PURE__ */ React.createElement(
+    ElementType2,
+    {
+      ...filteredProps,
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
+      style,
+      ref,
+      className: styleProps.className
+    },
+    children
+  );
+});
+function flexAlignValue(value) {
+  if (value === "start") {
+    return "flex-start";
+  }
+  if (value === "end") {
+    return "flex-end";
+  }
+  return value;
+}
+
+const gridStylePropsHandler = {
+  ...commonStyleHandlers,
+  gridAutoFlow: "gridAutoFlow",
+  gridAutoColumns: "gridAutoColumns",
+  gridAutoRows: "gridAutoRows",
+  gridTemplateAreas: "gridTemplateAreas",
+  gridTemplateColumns: "gridTemplateColumns",
+  gridTemplateRows: "gridTemplateRows",
+  gap: "gap",
+  columnGap: "columnGap",
+  rowGap: "rowGap",
+  justifyItems: "justifyItems",
+  justifyContent: "justifyContent",
+  alignItems: "alignItems",
+  alignContent: "alignContent",
+  padding: "padding",
+  paddingLeft: "paddingLeft",
+  paddingRight: "paddingRight",
+  paddingTop: "paddingTop",
+  paddingBottom: "paddingBottom"
+};
+React.forwardRef(function Grid2(props, ref) {
+  useThemeCheck();
+  const { children, ...otherProps } = props;
+  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps, gridStylePropsHandler);
+  const style = {
+    ...styleProps.style,
+    display: "grid"
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...filteredProps,
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
+      style,
+      ref,
+      className: styleProps.className
+    },
+    children
+  );
+});
+
+const viewStylePropHandlers = {
+  ...commonStyleHandlers,
+  ...flexStylePropsHandler,
+  ...gridStylePropsHandler,
+  display: "display",
+  color: "color",
+  backgroundColor: "backgroundColor",
+  border: "border",
+  borderWidth: "borderWidth",
+  borderColor: "borderColor",
+  borderStyle: "borderStyle",
+  borderLeft: "borderLeft",
+  borderLeftWidth: "borderLeftWidth",
+  borderLeftColor: "borderLeftColor",
+  borderLeftStyle: "borderLeftStyle",
+  borderRight: "borderRight",
+  borderRightWidth: "borderRightWidth",
+  borderRightColor: "borderRightColor",
+  borderRightStyle: "borderRightStyle",
+  borderTop: "borderTop",
+  borderTopWidth: "borderTopWidth",
+  borderTopColor: "borderTopColor",
+  borderTopStyle: "borderTopStyle",
+  borderBottom: "borderBottom",
+  borderBottomWidth: "borderBottomWidth",
+  borderBottomColor: "borderBottomColor",
+  borderBottomStyle: "borderBottomStyle",
+  borderRadius: "borderRadius",
+  borderTopLeftRadius: "borderTopLeftRadius",
+  borderTopRightRadius: "borderTopRightRadius",
+  borderBottomLeftRadius: "borderBottomLeftRadius",
+  borderBottomRightRadius: "borderBottomRightRadius",
+  boxShadow: "boxShadow",
+  container: "container",
+  containerType: "containerType",
+  containerName: "containerName",
+  overflow: "overflow",
+  overflowX: "overflowX",
+  overflowY: "overflowY"
+};
+React.forwardRef(function View2({ elementType: ElementType = "div", children, ...otherProps }, ref) {
+  useThemeCheck();
+  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps, viewStylePropHandlers);
+  return /* @__PURE__ */ React.createElement(ElementType, { ...filteredProps, ...styleProps, ref }, children);
+});
+
+React.forwardRef(function ThemeRoot2({ children, variant, noSurface = false, ...props }, ref) {
+  const themeContext = React.useContext(sapphireReactContext.ThemeContext);
+  if (typeof themeContext.theme === "undefined") {
+    throw new Error(
+      "<ThemeRoot> must be rendered inside a <SapphireProvider>."
+    );
+  }
+  const { styleProps } = useSapphireStyleProps(props, viewStylePropHandlers);
+  const theme = themeContext.theme;
+  const themeVariant = variant || themeContext.themeVariant;
+  const themeClassName = theme?.themeClassName;
+  const colorScheme = themeClassName?.includes("dark") ? "dark" : "light";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        themeClassName,
+        themeVariant === "secondary" ? theme?.themeSecondaryModifierClassName : themeVariant === "tertiary" ? theme?.themeTertiaryModifierClassName : themeVariant === "contrast" ? theme?.themeContrastModifierClassName : null,
+        styleProps.className,
+        !noSurface && surfaceStyles["sapphire-surface"]
+      ),
+      style: { ...styleProps.style, colorScheme },
+      ref,
+      ...filterDOMProps.filterDOMProps(props, { global: true })
+    },
+    children
+  );
+});
+
+const ListBoxOption = ({
+  item
+}) => {
+  const ref = React.useRef(null);
+  const {
+    state,
+    shouldUseVirtualFocus,
+    disableSelectedStyles,
+    containerMaxWidth
+  } = React.useContext(ListBoxContext);
+  const {
+    optionProps,
+    isDisabled,
+    isFocused: isVirtuallyFocused,
+    isPressed
+  } = useListBox.useOption({ key: item.key }, state, ref);
+  const { focusProps, isFocusVisible: isFocusRingVisible } = useFocusRing.useFocusRing();
+  const { hoverProps, isHovered } = useHover.useHover({ isDisabled });
+  usePreventTouchEnd(ref);
+  const rightIcon = item.props.rightIcon || item.props.icon;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...mergeProps.mergeProps(
+        optionProps,
+        hoverProps,
+        shouldUseVirtualFocus ? {} : focusProps
+      ),
+      ref,
+      className: clsx(
+        styles$e["sapphire-listbox__item"],
+        styles$e["js-hover"],
+        styles$e["js-focus"],
+        {
+          [styles$e["is-disabled"]]: isDisabled,
+          [styles$e["is-focus"]]: shouldUseVirtualFocus ? isVirtuallyFocused && useFocusVisible.isFocusVisible() : isFocusRingVisible,
+          [styles$e["is-hover"]]: isHovered,
+          [styles$e["is-active"]]: isPressed
+        }
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(styles$e["sapphire-listbox__content"]),
+        style: containerMaxWidth !== void 0 ? {
+          maxWidth: `calc(${containerMaxWidth}px - 2 * ${themes.tokens.size.iconSm})`
+        } : void 0
+      },
+      !disableSelectedStyles && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(styles$e["sapphire-listbox__checkmark"]),
+          style: {
+            visibility: state.selectionManager.selectedKeys.has(item.key) ? "visible" : "hidden"
+          }
+        },
+        /* @__PURE__ */ React.createElement(Icon, { size: "sm", color: "informative" }, /* @__PURE__ */ React.createElement(react.Checkmark, null))
+      ),
+      item.props.leftIcon && /* @__PURE__ */ React.createElement("div", { className: clsx(styles$e["sapphire-listbox__icon"]) }, /* @__PURE__ */ React.createElement(Icon, { size: "sm" }, item.props.leftIcon)),
+      /* @__PURE__ */ React.createElement("div", { className: clsx(styles$e["sapphire-listbox__text-container"]) }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles$e["sapphire-listbox__primary-text"]) }, item.rendered), item.props.secondaryText && /* @__PURE__ */ React.createElement("div", { className: clsx(styles$e["sapphire-listbox__secondary-text"]) }, item.props.secondaryText)),
+      rightIcon ? /* @__PURE__ */ React.createElement("div", { className: clsx(styles$e["sapphire-listbox__icon"]) }, /* @__PURE__ */ React.createElement(Icon, { size: "sm" }, rightIcon)) : item.props.avatar && /* @__PURE__ */ React.createElement("div", { className: clsx(styles$e["sapphire-listbox__icon"]) }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(
+            avatarStyles["sapphire-avatar"],
+            avatarStyles["sapphire-avatar--sm"]
+          )
+        },
+        item.props.avatar
+      ))
+    )
+  );
+};
+
+const useThemeCheck = () => {
+  const themeContext = React.useContext(sapphireReactContext.ThemeContext);
+  if (typeof themeContext.theme === void 0) {
+    throw new Error(
+      "A Sapphire component must be rendered inside a <SapphireProvider>."
+    );
+  }
+};
+
+const Separator = React.forwardRef(function Separator2(props, ref) {
+  useThemeCheck();
+  const { orientation = "horizontal", ...otherProps } = props;
+  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps);
+  return /* @__PURE__ */ React.createElement(
+    reactAriaComponents.Separator,
+    {
+      ref,
+      ...filteredProps,
+      ...filterDOMProps.filterDOMProps(props, { global: true }),
+      style: styleProps.style,
+      className: clsx(styles$f["sapphire-separator"], styleProps.className),
+      orientation
+    }
+  );
+});
+
+function ListBoxSection({
+  item,
+  layoutInfo,
+  virtualizer,
+  childrenViews,
+  children
+}) {
+  useThemeCheck();
+  const { groupProps, headingProps } = useListBox.useListBoxSection({
+    "aria-label": item["aria-label"],
+    heading: item.rendered
+  });
+  const headerLayoutInfo = childrenViews && childrenViews.find((c) => c.viewType === "header")?.layoutInfo;
+  const dividerLayoutInfo = childrenViews && childrenViews.find((c) => c.viewType === "divider")?.layoutInfo;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, headerLayoutInfo && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "presentation",
+      style: VirtualizerItem.layoutInfoToStyle(headerLayoutInfo, "ltr")
+    },
+    item.prevKey && /* @__PURE__ */ React.createElement(
+      Separator,
+      {
+        UNSAFE_className: styles$e["sapphire-listbox__separator"]
+      }
+    ),
+    item.rendered && /* @__PURE__ */ React.createElement(
+      SectionHeader,
+      {
+        item,
+        headerLayoutInfo,
+        headingProps,
+        virtualizer
+      }
+    )
+  ), layoutInfo && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...groupProps,
+      key: layoutInfo.key,
+      style: VirtualizerItem.layoutInfoToStyle(layoutInfo, "ltr"),
+      className: styles$e["sapphire-listbox__section"]
+    },
+    children
+  ), dividerLayoutInfo && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "presentation",
+      style: VirtualizerItem.layoutInfoToStyle(dividerLayoutInfo, "ltr")
+    },
+    /* @__PURE__ */ React.createElement(Separator, { UNSAFE_className: styles$e["sapphire-listbox__separator"] })
+  ));
+}
+const SectionHeader = ({
+  item,
+  headerLayoutInfo,
+  headingProps,
+  virtualizer
+}) => {
+  const headerRef = React.useRef(null);
+  useVirtualizerItem.useVirtualizerItem({
+    layoutInfo: headerLayoutInfo,
+    virtualizer,
+    ref: headerRef
+  });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...headingProps,
+      ref: headerRef,
+      className: styles$e["sapphire-listbox__section-header"]
+    },
+    item.rendered
+  );
+};
+
+class VariableWidthListLayout extends useVirtualizerState.ListLayout {
+  /**
+   * content width of items are stored here, if the content width is bigger than the Virtualizer's
+   * visible rect's width.
+   */
+  keyToWidth = /* @__PURE__ */ new Map();
+  visibleContentWidth = 0;
+  constructor(options) {
+    super(options);
+  }
+  buildItem(node, x, y) {
+    const previousLayoutNode = this.layoutNodes.get(node.key);
+    const layoutNode = super.buildItem(node, x, y);
+    if (this.visibleContentWidth) {
+      layoutNode.layoutInfo.rect.width = this.visibleContentWidth;
+    }
+    if (previousLayoutNode && previousLayoutNode.node === node && !previousLayoutNode.layoutInfo.estimatedSize) {
+      layoutNode.layoutInfo.estimatedSize = false;
+    }
+    return layoutNode;
+  }
+  /**
+   * Allows for overriding buildCollection in a sub-class
+   */
+  doBuildCollection() {
+    return super.buildCollection();
+  }
+  buildCollection() {
+    this.visibleContentWidth = this.getVisibleContentWidth();
+    const layoutNodes = this.doBuildCollection();
+    this.contentSize.width = this.visibleContentWidth;
+    return layoutNodes;
+  }
+  shouldInvalidate(newRect, oldRect) {
+    return super.shouldInvalidate(newRect, oldRect) || this.getVisibleContentWidth() !== this.visibleContentWidth;
+  }
+  shouldInvalidateEverything(invalidationContext) {
+    return super.shouldInvalidateEverything(invalidationContext) || // in buildChild, if invalidateEverything is false and y is not changed, it will reuse the existing layoutInfo.
+    // which can be problematic, if it was created in a time when the visible content width was different.
+    // A more efficient approach (instead of rebuilding the whole collection), might be to set layout width to
+    // visibleContentWidth, in getVisibleLayoutInfos, if mutation is ok.
+    // UPDATE: using getFinalLayoutInfo seems to be a legitimate last minute way to mutate layout infos.
+    this.contentSize?.width !== this.visibleContentWidth;
+  }
+  updateItemSize(key, size) {
+    const changed = super.updateItemSize(key, size);
+    const layoutNode = this.layoutNodes.get(key);
+    if (!layoutNode) return false;
+    const layoutInfo = layoutNode.layoutInfo;
+    if (layoutInfo && size.width > this.contentSize.width) {
+      this.keyToWidth.set(key, size.width);
+      this.contentSize.width = size.width;
+      return true;
+    } else {
+      return changed;
+    }
+  }
+  getVisibleContentWidth() {
+    return this.virtualizer ? Math.max(
+      this.virtualizer.visibleRect.width,
+      ...Array.from(this.keyToWidth.values())
+    ) : 0;
+  }
+}
+
+class ListWithLoadingStateLayout extends VariableWidthListLayout {
+  options;
+  constructor(options) {
+    super(options);
+    this.options = options;
+    this.loaderSize = options.loadingRowsCount * (options.rowHeight ?? options.estimatedRowHeight ?? 50);
+  }
+  doBuildCollection() {
+    let nodes = [];
+    if (this.options.loadingState === "loading" || this.collection.size === 0) {
+      this.contentSize.height = 0;
+    } else {
+      nodes = super.doBuildCollection();
+    }
+    if (this.options.loadingState) {
+      const loaderNode = this.buildLoader();
+      nodes.push(loaderNode);
+      this.contentSize.height = this.contentSize.height + loaderNode.layoutInfo.rect.height;
+    }
+    if (!this.options.loadingState && this.collection.size === 0) {
+      const emptyStateNode = this.buildEmptyState();
+      nodes.push(emptyStateNode);
+      this.contentSize.height = emptyStateNode.layoutInfo.rect.height;
+    }
+    return nodes;
+  }
+  /**
+   * Adds the section header node (which is rendered as a divider and
+   * optional heading text)
+   */
+  buildSection(node, x, y) {
+    const headerNode = {
+      type: "header",
+      key: node.key + ":header",
+      parentKey: node.key,
+      value: null,
+      level: node.level,
+      index: node.index,
+      hasChildNodes: false,
+      childNodes: [],
+      rendered: node.rendered,
+      textValue: node.textValue
+    };
+    this.headingSize = node.rendered ? this.options.headingHeight : 0;
+    const header = this.buildSectionHeader(headerNode, x, y);
+    header.node = headerNode;
+    header.layoutInfo.parentKey = node.key;
+    this.layoutNodes.set(headerNode.key, header);
+    header.layoutInfo.rect.height += // if first item is the section, we don't show the divider
+    node.prevKey ? this.options.sectionDividerHeight : 0;
+    y += header.layoutInfo.rect.height;
+    const section = super.buildSection(node, x, y);
+    section.children.unshift(header);
+    if (node.nextKey && node.index !== void 0) {
+      const nextNode = this.nextNodeAtLevel(node.level, node.index);
+      if (nextNode && nextNode.type !== "section") {
+        const dividerRect = new useVirtualizerState.Rect(
+          0,
+          section.layoutInfo.rect.maxY,
+          this.virtualizer?.visibleRect.width,
+          this.options.sectionDividerHeight
+        );
+        const layoutInfo = new useVirtualizerState.LayoutInfo(
+          "divider",
+          `${node.key}:divider`,
+          dividerRect
+        );
+        layoutInfo.parentKey = node.key;
+        const layoutNode = {
+          layoutInfo,
+          validRect: layoutInfo.rect.intersection(this.validRect)
+        };
+        this.layoutNodes.set(layoutInfo.key, layoutNode);
+        section.children?.push(layoutNode);
+        section.layoutInfo.rect.height += dividerRect.height;
+        y += dividerRect.height;
+      }
+    }
+    return section;
+  }
+  nextNodeAtLevel(level, startAt) {
+    for (const item of this.collection) {
+      if (item.level === level && item.index && item.index > startAt) {
+        return item;
+      }
+    }
+  }
+  /**
+   * Builds loader node (containing all loading rows at the end of the view)
+   */
+  buildLoader() {
+    const rect = new useVirtualizerState.Rect(
+      0,
+      this.contentSize.height,
+      this.virtualizer?.visibleRect.width,
+      this.loaderSize ?? 0
+    );
+    const previousLayoutNode = this.layoutNodes.get("loader");
+    if (previousLayoutNode?.layoutInfo.rect.y === rect.y) {
+      return previousLayoutNode;
+    }
+    const layoutNode = {
+      layoutInfo: new useVirtualizerState.LayoutInfo("loader", "loader", rect),
+      validRect: rect
+    };
+    layoutNode.layoutInfo.estimatedSize = true;
+    this.layoutNodes.set("loader", layoutNode);
+    return layoutNode;
+  }
+  /**
+   * Builds empty state node
+   */
+  buildEmptyState() {
+    const rect = new useVirtualizerState.Rect(
+      0,
+      this.contentSize.height,
+      this.virtualizer?.visibleRect.width,
+      this.options.rowHeight ?? this.options.estimatedRowHeight ?? 50
+    );
+    const previousLayoutNode = this.layoutNodes.get("empty-state");
+    if (previousLayoutNode?.layoutInfo.rect.y === rect.y) {
+      return previousLayoutNode;
+    }
+    const layoutNode = {
+      layoutInfo: new useVirtualizerState.LayoutInfo("empty-state", "empty-state", rect),
+      validRect: rect
+    };
+    layoutNode.layoutInfo.estimatedSize = true;
+    this.layoutNodes.set("empty-state", layoutNode);
+    return layoutNode;
+  }
+  /**
+   * estimatedSize is set to false by default after size is updated, assuming item
+   * height is not dynamic. In some cases (including loading skeleton rows) the height can
+   * change as custom loading skeleton render can be passed as a prop. Setting estimatedSize to
+   * true makes sure size is calculated and updated if needed after each render.
+   * See useVirtualizerItem code for more details.
+   */
+  updateItemSize(key, size) {
+    const result = super.updateItemSize(key, size);
+    if (this.canNodeHaveVariableHeight(key)) {
+      const loaderLayoutInfo = this.virtualizer?.getVisibleLayoutInfos().get(key);
+      if (loaderLayoutInfo) {
+        loaderLayoutInfo.estimatedSize = true;
+      }
+    }
+    return result;
+  }
+  canNodeHaveVariableHeight(key) {
+    return key === "loader";
+  }
+}
+
+function useListWithLoadingStateLayout({
+  loadingState,
+  loadingSkeletonRowsCount,
+  sectionDividerHeight = 5,
+  headingHeight = 34
+  // default css height
+}) {
+  const layout = React.useMemo(
+    () => new ListWithLoadingStateLayout({
+      /**
+       * The estimated height is an average between the min and max height
+       * of list items built with our own exports. Which is the only way
+       * to render InteractiveList items.
+       */
+      estimatedRowHeight: 60,
+      loadingState,
+      sectionDividerHeight,
+      headingHeight,
+      loadingRowsCount: loadingSkeletonRowsCount
+    }),
+    [
+      loadingState,
+      loadingSkeletonRowsCount,
+      sectionDividerHeight,
+      headingHeight
+    ]
+  );
+  return layout;
+}
+
+const LoadingRendererContext = React.createContext({
+  loadingSkeletonRowsCount: NaN,
+  renderLoadingSkeleton: () => {
+    throw new Error("Illegal state.");
+  }
+});
+function _VirtualizerWithLoading({
+  renderLoadingSkeleton,
+  loadingSkeletonRowsCount,
+  emptyState,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ React.createElement(
+    LoadingRendererContext.Provider,
+    {
+      value: { renderLoadingSkeleton, loadingSkeletonRowsCount }
+    },
+    /* @__PURE__ */ React.createElement(Virtualizer.Virtualizer, { ...props, ref: useObjectRef.useObjectRef(ref) }, (kind, item) => {
+      if (kind === "loader") {
+        return /* @__PURE__ */ React.createElement(LoadingRendererContext.Consumer, null, ({ renderLoadingSkeleton: renderLoadingSkeleton2, loadingSkeletonRowsCount: loadingSkeletonRowsCount2 }) => Array.from(Array(loadingSkeletonRowsCount2)).map(
+          (_, index) => renderLoadingSkeleton2(index)
+        ));
+      }
+      if (!!emptyState && kind === "empty-state") {
+        return emptyState;
+      }
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children(kind, item));
+    })
+  );
+}
+const VirtualizerWithLoadingSkeleton = React.forwardRef(
+  _VirtualizerWithLoading
+);
+
+const useCollectionFocusProxy = ({
+  state,
+  focusProxyRef,
+  collectionRef
+}) => {
+  React.useEffect(
+    () => {
+      const proxy = focusProxyRef?.current;
+      if (proxy) {
+        const onKeyDown = (event) => {
+          if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+            event.stopPropagation();
+            state.selectionManager.setFocused(true);
+            collectionRef.current?.dispatchEvent(
+              new KeyboardEvent(event.type, event)
+            );
+          } else if (event.key === "Enter" && state.selectionManager?.focusedKey != null) {
+            forwardEventToFocusedItem(event);
+            event.preventDefault();
+            event.currentTarget?.addEventListener(
+              "keyup",
+              (event2) => {
+                if (event2.key === "Enter" && state.selectionManager.focusedKey != null) {
+                  forwardEventToFocusedItem(event2);
+                }
+              },
+              { once: true, capture: true }
+            );
+          }
+          function forwardEventToFocusedItem(event2) {
+            if (state.selectionManager.focusedKey != null) {
+              collectionRef.current?.querySelector(
+                `[data-key="${state.selectionManager.focusedKey}"]`
+              )?.dispatchEvent(new KeyboardEvent(event2.type, event2));
+            }
+          }
+        };
+        proxy.addEventListener("keydown", onKeyDown);
+        return () => {
+          proxy.removeEventListener("keydown", onKeyDown);
+        };
+      }
+    }
+    /* with no dependency here, event listeners are reattached on each render, but that's the case when unmemoized
+    event handlers are passed to elements too (e.g., when using any react-aria hook) */
+  );
+};
+
+const ListBoxEmptyState = ({
+  children
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: clsx(
+      styles$e["sapphire-listbox__item"],
+      styles$e["sapphire-listbox__item--empty"]
+    )
+  },
+  /* @__PURE__ */ React.createElement("div", { className: clsx(styles$e["sapphire-listbox__content"]) }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "presentation",
+      className: styles$e["sapphire-listbox__primary-text"]
+    },
+    children
+  ))
+);
+
+var empty$6 = "Ingen resultater";
+var da = {
+	empty: empty$6
+};
+
+var empty$5 = "No results";
+var en = {
+	empty: empty$5
+};
+
+var empty$4 = "Keine Ergebnisse";
+var de = {
+	empty: empty$4
+};
+
+var empty$3 = "Ei tuloksia";
+var fi = {
+	empty: empty$3
+};
+
+var empty$2 = "Ingen resultater";
+var no = {
+	empty: empty$2
+};
+
+var empty$1 = "Brak wyników";
+var pl = {
+	empty: empty$1
+};
+
+var empty = "Inga resultat";
+var se = {
+	empty: empty
+};
+
+var intlMessages = {
+  "da-DK": da,
+  "en-US": en,
+  "de-DE": de,
+  "fi-FI": fi,
+  "nb-NO": no,
+  "pl-PL": pl,
+  "sv-SE": se
+};
+
+const _StatelessListBox = ({
+  loadingState,
+  loadingSkeletonRowsCount = 4,
+  state,
+  renderLoadingSkeleton = (index) => /* @__PURE__ */ React.createElement(ListBoxItemSkeleton, { key: index, index }),
+  onLoadMore,
+  hasScrollDividers = false,
+  connectedInputRef,
+  shouldUseVirtualFocus = Boolean(connectedInputRef),
+  disableSelectedStyles = false,
+  negativeSideMargin,
+  emptyState: emptyStateProp,
+  ...otherProps
+}, ref) => {
+  const { styleProps } = useSapphireStyleProps(otherProps);
+  const listBoxRef = useObjectRef.useObjectRef(ref);
+  const { listBoxProps } = useListBox.useListBox(
+    {
+      ...otherProps,
+      shouldUseVirtualFocus,
+      isVirtualized: true
+    },
+    state,
+    listBoxRef
+  );
+  const formatMessage = i18n.useMessageFormatter(intlMessages);
+  const emptyState = emptyStateProp === null ? null : /* @__PURE__ */ React.createElement(ListBoxEmptyState, null, emptyStateProp || formatMessage("empty"));
+  const layout = useListWithLoadingStateLayout({
+    loadingState,
+    loadingSkeletonRowsCount,
+    sectionDividerHeight: 5,
+    headingHeight: 34
+  });
+  useCollectionFocusProxy({
+    state,
+    focusProxyRef: connectedInputRef,
+    collectionRef: listBoxRef
+  });
+  const { scrollCheckProps, isScrolled, isScrollable } = useScrollCheck(listBoxRef);
+  const constrainWidth = styleProps.style?.maxWidth !== void 0 || styleProps.style?.width !== void 0;
+  const [containerMaxWidth, setContainerMaxWidth] = React.useState(void 0);
+  React.useLayoutEffect(() => {
+    setContainerMaxWidth(
+      constrainWidth && listBoxRef.current ? listBoxRef.current.offsetWidth : void 0
+    );
+  }, [constrainWidth]);
+  const renderWrapper = React.useCallback(
+    (parent, reusableView, children, renderChildren) => {
+      if (reusableView.viewType === "section" && reusableView.content) {
+        return /* @__PURE__ */ React.createElement(
+          ListBoxSection,
+          {
+            key: reusableView.key,
+            item: reusableView.content,
+            layoutInfo: reusableView.layoutInfo,
+            virtualizer: reusableView.virtualizer,
+            childrenViews: children
+          },
+          renderChildren(children.filter((c) => c.viewType === "item"))
+        );
+      }
+      return /* @__PURE__ */ React.createElement(
+        VirtualizerItem.VirtualizerItem,
+        {
+          key: reusableView.key,
+          layoutInfo: reusableView.layoutInfo,
+          virtualizer: reusableView.virtualizer,
+          parent: parent?.layoutInfo
+        },
+        reusableView.rendered
+      );
+    },
+    []
+  );
+  return /* @__PURE__ */ React.createElement(
+    ListBoxContext.Provider,
+    {
+      value: {
+        state,
+        shouldUseVirtualFocus,
+        disableSelectedStyles,
+        containerMaxWidth
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      VirtualizerWithLoadingSkeleton,
+      {
+        ...mergeProps.mergeProps(listBoxProps, scrollCheckProps),
+        onLoadMore,
+        scrollDirection: "vertical",
+        autoFocus: Boolean(otherProps.autoFocus),
+        layout,
+        collection: state.collection,
+        persistedKeys: new Set(
+          [
+            ...state.selectionManager.selectedKeys,
+            state.selectionManager.focusedKey
+          ].filter((key) => key !== null)
+        ),
+        className: clsx(
+          styles$e["sapphire-listbox"],
+          {
+            [styles$e["sapphire-listbox--selection"]]: !disableSelectedStyles
+          },
+          styleProps.className
+        ),
+        style: {
+          ...styleProps.style,
+          padding: void 0,
+          ...negativeSideMargin ? {
+            marginLeft: typeof negativeSideMargin === "string" ? `calc(${negativeSideMargin} * -1)` : `-${negativeSideMargin}px`,
+            marginRight: typeof negativeSideMargin === "string" ? `calc(${negativeSideMargin} * -1)` : `-${negativeSideMargin}px`
+          } : {},
+          // Should be moved to css when we are a little more sure about what we want, and specially
+          // when/if we need the same feature in Sapphire Angular.
+          borderTop: hasScrollDividers && isScrolled ? `${themes.tokens.size.borderSm} solid ${themes.tokens.color.borderSecondary}` : "",
+          borderBottom: hasScrollDividers && isScrollable ? `${themes.tokens.size.borderSm} solid ${themes.tokens.color.borderSecondary}` : ""
+        },
+        renderWrapper,
+        renderLoadingSkeleton,
+        loadingSkeletonRowsCount,
+        emptyState,
+        ref: listBoxRef,
+        "aria-busy": loadingState && true
+      },
+      (kind, item) => {
+        const node = item;
+        if (kind === "item") {
+          return /* @__PURE__ */ React.createElement(ListBoxOption, { key: node.key, item: node });
+        }
+        return null;
+      }
+    )
+  );
+};
+React.forwardRef(_StatelessListBox);
+
+React.forwardRef(function Popover2({
+  children,
+  padded,
+  defaultMaxWidth,
+  maxHeight,
+  state,
+  restoreFocus = false,
+  ...props
+}, forwardedRef) {
+  const ref = useObjectRef.useObjectRef(forwardedRef);
+  const { styleProps } = useSapphireStyleProps({ ...props, maxHeight });
+  React.useEffect(() => {
+    if (state && state.isOpen && props.isNonModal) {
+      return ariaHideOutside.ariaHideOutside([
+        props.triggerRef?.current,
+        ref?.current
+      ]);
+    }
+  }, [state?.isOpen, props.isNonModal, ref, props.triggerRef]);
+  const popover = /* @__PURE__ */ React.createElement(
+    reactAriaComponents.Popover,
+    {
+      ...props,
+      ref,
+      style: styleProps.style,
+      className: clsx(styleProps.className, popoverStyles["sapphire-popover"], {
+        [popoverStyles["sapphire-popover--padded"]]: padded,
+        [popoverStyles["sapphire-popover--max-width"]]: defaultMaxWidth
+      })
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: popoverStyles["sapphire-popover__content"],
+        role: "presentation"
+      },
+      /* @__PURE__ */ React.createElement(
+        FocusScope.FocusScope,
+        {
+          autoFocus: !props.isNonModal,
+          contain: !props.isNonModal,
+          restoreFocus
+        },
+        children
+      )
+    )
+  );
+  if (state) {
+    return /* @__PURE__ */ React.createElement(reactAriaComponents.OverlayTriggerStateContext.Provider, { value: state }, popover);
+  }
+  return popover;
+});
+
+const useScrollCheck = (ref) => {
+  const [isScrollable, setScrollable] = React.useState(false);
+  const [isScrolled, setScrolled] = React.useState(false);
+  const onScroll = () => {
+    if (ref.current?.scrollTop === 0) {
+      setScrolled(false);
+    } else {
+      setScrolled(true);
+    }
+  };
+  React.useLayoutEffect(() => {
+    const bodyElement = ref.current;
+    const resizeObserver = new ResizeObserver(() => {
+      if (bodyElement) {
+        setScrollable(bodyElement?.scrollHeight > bodyElement.offsetHeight);
+      }
+    });
+    if (bodyElement) {
+      resizeObserver.observe(bodyElement);
+    }
+    return () => {
+      if (bodyElement) {
+        resizeObserver.unobserve(bodyElement);
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    if (ref.current) {
+      setScrollable(ref.current?.scrollHeight > ref.current.offsetHeight);
+    }
+  });
+  return { isScrollable, isScrolled, scrollCheckProps: { onScroll } };
+};
+
+const usePreventTouchEnd = (ref) => React.useEffect(() => {
+  ref.current?.addEventListener(
+    "touchend",
+    (e) => {
+      if (e.currentTarget?.getAttribute("type") !== "submit" && typeof e.currentTarget?.getAttribute("href") !== "string") {
+        e.preventDefault();
+      }
+    },
+    { passive: false }
+  );
+}, []);
+
+const RadioBox = React.forwardRef(function RadioBox2(props, ref) {
+  [props, ref] = reactAriaComponents.useContextProps(props, ref, reactAriaComponents.CheckboxContext);
+  const {
+    elementType: CustomElement = "div",
+    size,
+    isDisabled,
+    isHovered,
+    isFocusVisible,
+    isPressed,
+    isSelected,
+    label,
+    role,
+    children,
+    slot,
+    ...otherProps
+  } = props;
+  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps);
+  const ariaProps = role === "checkbox" ? { role, "aria-checked": isSelected } : { role };
+  return /* @__PURE__ */ React.createElement(
+    CustomElement,
+    {
+      ...filteredProps,
+      ...ariaProps,
+      ref,
+      className: clsx(
+        styles$g["sapphire-radio"],
+        {
+          [styles$g["sapphire-radio--checked"]]: isSelected,
+          [styles$g["sapphire-radio--md"]]: size === "md",
+          [styles$g["is-hover"]]: isHovered,
+          [styles$g["is-focus"]]: isFocusVisible,
+          [styles$g["is-active"]]: isPressed
+        },
+        styles$g["js-focus"],
+        styleProps.className
+      ),
+      style: styleProps.style
+    },
+    children,
+    /* @__PURE__ */ React.createElement("span", { className: clsx(styles$g["sapphire-radio__box"]) }),
+    label && /* @__PURE__ */ React.createElement("span", { className: clsx(styles$g["sapphire-radio__label"]) }, label)
+  );
+});
+
+const PaginationContext = React.createContext({
+  scrollableRef: void 0
+});
+
+const DEFAULT_ROW_HEIGHTS = {
+  sm: 40,
+  md: 48,
+  lg: 56,
+  xl: 64
+};
+const SELECTION_COLUMN_ID = "__selection";
+function DataGrid({
+  "aria-label": ariaLabel,
+  columns,
+  data,
+  cellSpacing = "md",
+  sortDescriptor,
+  onSortChange,
+  defaultSortDescriptor,
+  selectionMode = "none",
+  disallowEmptySelection,
+  getRowId,
+  selectedRowIds: selectedRowsProp,
+  defaultSelectedRowIds,
+  onSelectionChange,
+  emptyState,
+  loadingState,
+  loadingSkeletonRowsCount = 3,
+  hideLastDivider,
+  enableRowVirtualization,
+  estimatedRowHeight,
+  rowExpansion,
+  expandedRowIds,
+  defaultExpandedRowIds,
+  onExpandedRowsChange,
+  onLoadMore,
+  onRowAction,
+  isDisabled,
+  disabledBehavior = "all",
+  layout = "auto",
+  footer,
+  stickyHeader = "auto",
+  stickyFooter = "auto",
+  context,
+  ...otherProps
+}) {
+  sapphireReact.useThemeCheck();
+  const { styleProps, filteredProps } = sapphireReact.useSapphireStyleProps(otherProps);
+  const [sorting, setSorting] = useControlledState.useControlledState(
+    toSortingState(sortDescriptor),
+    toSortingState(defaultSortDescriptor) ?? [],
+    (sortingState) => {
+      onSortChange?.(fromSortingState(sortingState));
+    }
+  );
+  const [rowSelection, setRowSelection] = useControlledState.useControlledState(
+    toBooleanMap(selectedRowsProp),
+    toBooleanMap(defaultSelectedRowIds) ?? {},
+    (state) => {
+      onSelectionChange?.(
+        fromBooleanMap(state),
+        pendingSelectionInteraction.current
+      );
+    }
+  );
+  const pendingSelectionInteraction = React.useRef("select");
+  const handleRowSelectionChange = (updater) => {
+    const newValue = typeof updater === "function" ? updater(rowSelection) : updater;
+    if (!disallowEmptySelection || Object.values(newValue).filter(Boolean).length > 0) {
+      setRowSelection(newValue);
+      pendingSelectionInteraction.current = "select";
+    }
+  };
+  const [expanded, setExpanded] = useControlledState.useControlledState(
+    toBooleanMap(expandedRowIds),
+    toBooleanMap(defaultExpandedRowIds) ?? {},
+    (expandedState) => {
+      onExpandedRowsChange?.(
+        expandedState === true ? [] : fromBooleanMap(expandedState)
+      );
+    }
+  );
+  const contextRef = React.useRef(context);
+  contextRef.current = context;
+  const allColumns = React.useMemo(() => {
+    const result = [];
+    if (selectionMode !== "none") {
+      result.push({
+        id: SELECTION_COLUMN_ID,
+        header: selectionMode === "multiple" ? ({ table: table2 }) => /* @__PURE__ */ React.createElement(
+          sapphireReact.Checkbox,
+          {
+            "aria-label": "Select all",
+            isSelected: table2.getIsAllRowsSelected(),
+            isIndeterminate: table2.getIsSomeRowsSelected(),
+            isDisabled: isDisabled === true,
+            onChange: (isSelected) => {
+              pendingSelectionInteraction.current = "select-all";
+              table2.toggleAllRowsSelected(isSelected);
+            }
+          }
+        ) : () => null,
+        cell: ({ row }) => {
+          const checkboxProps = {
+            "aria-label": "Select",
+            // TODO(i18n)
+            isSelected: row.getIsSelected(),
+            isDisabled: !row.getCanSelect(),
+            onChange: (isSelected) => row.toggleSelected(isSelected)
+          };
+          return selectionMode === "single" && disallowEmptySelection ? /* @__PURE__ */ React.createElement(RadioBox, { role: "checkbox", ...checkboxProps }) : /* @__PURE__ */ React.createElement(sapphireReact.Checkbox, { ...checkboxProps });
+        },
+        renderLoadingSkeleton: (i) => /* @__PURE__ */ React.createElement(sapphireReact.Skeleton.From, { index: i, margin: "auto" }, /* @__PURE__ */ React.createElement(sapphireReact.Checkbox, null))
+      });
+    }
+    result.push(
+      ...columns.map(({ header, cell, footer: footer2, ...column }) => {
+        return {
+          ...column,
+          header: typeof header === "function" ? () => header({ context: contextRef.current }) : header,
+          footer: typeof footer2 === "function" ? () => footer2({ context: contextRef.current }) : footer2,
+          cell: ({ row, getValue }) => {
+            const value = getValue();
+            if (!cell) {
+              return value;
+            }
+            return cell({
+              rowData: row.original,
+              value,
+              rowIndex: row.index,
+              context: contextRef.current
+            });
+          }
+        };
+      })
+    );
+    return result;
+  }, [
+    selectionMode,
+    disallowEmptySelection,
+    isDisabled,
+    disabledBehavior,
+    columns
+  ]);
+  const table = reactTable.useReactTable({
+    data,
+    columns: allColumns,
+    state: { sorting, rowSelection, expanded },
+    defaultColumn: {
+      enableSorting: false,
+      // TODO(decision): should sorting be enabled or disabled by default?
+      size: void 0
+    },
+    getRowId,
+    getSubRows: rowExpansion?.type === "subRows" ? rowExpansion.getSubRows : void 0,
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    getExpandedRowModel: reactTable.getExpandedRowModel(),
+    // sorting
+    enableMultiSort: false,
+    sortDescFirst: false,
+    // TODO(decision): should it be an option?
+    manualSorting: sortDescriptor !== void 0,
+    onSortingChange: setSorting,
+    // row selection
+    enableRowSelection: selectionMode === "none" ? false : isDisabled !== void 0 ? (tanStackRow) => {
+      const disabled = typeof isDisabled === "function" ? isDisabled?.(tanStackRow.original) : isDisabled;
+      return !disabled;
+    } : true,
+    enableMultiRowSelection: selectionMode === "multiple",
+    onRowSelectionChange: handleRowSelectionChange,
+    // row expansion
+    onExpandedChange: setExpanded
+  });
+  const containerRef = React.useRef(null);
+  const tableRef = React.useRef(null);
+  const { measuredColumnWidths } = useMeasureColumnWidths({
+    table,
+    data,
+    tableRef,
+    enabled: Boolean(enableRowVirtualization && layout === "auto")
+  });
+  const rows = table.getRowModel().rows;
+  const rowItems = [];
+  if (loadingState !== "loading") {
+    for (const row of rows) {
+      const disabled = typeof isDisabled === "function" ? isDisabled?.(row.original) : isDisabled ?? false;
+      const expandedView = rowExpansion?.type === "expandedView" ? rowExpansion.getExpandedView(row.original, row.index) : void 0;
+      rowItems.push({
+        type: "data",
+        row,
+        hasExpandedView: Boolean(expandedView),
+        disabled
+      });
+      if (expandedView && row.getIsExpanded()) {
+        rowItems.push({
+          type: "expandedView",
+          row,
+          expandedView
+        });
+      }
+    }
+  }
+  if (loadingState) {
+    for (let skeletonIndex = 0; skeletonIndex < loadingSkeletonRowsCount; skeletonIndex++) {
+      rowItems.push({ type: "skeleton", skeletonIndex });
+    }
+  }
+  const { gridKeyboardNavigationProps, rangeExtractor } = useGridKeyboardNavigation({
+    tableRef,
+    enabled: true,
+    scrollContainerRef: containerRef,
+    rowItemCount: rowItems.length,
+    onScrollToRowIndex: enableRowVirtualization ? (...args) => {
+      virtualizer.scrollToIndex(...args);
+    } : void 0
+  });
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: rowItems.length,
+    getScrollElement: () => containerRef.current,
+    estimateSize: () => estimatedRowHeight ?? DEFAULT_ROW_HEIGHTS[cellSpacing],
+    overscan: 5,
+    enabled: enableRowVirtualization,
+    rangeExtractor
+  });
+  const virtualRows = enableRowVirtualization ? virtualizer.getVirtualItems() : null;
+  const topGap = (virtualRows?.[1]?.start || 0) - (virtualRows?.[0]?.end || 0);
+  const bottomGap = (virtualRows?.[virtualRows.length - 2]?.end || 0) - (virtualRows?.[virtualRows.length - 1]?.start || 0);
+  const virtualPaddingTop = virtualRows?.length ? virtualRows[0].start + topGap : 0;
+  const virtualPaddingBottom = virtualRows?.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end + bottomGap : 0;
+  const renderedRowItems = virtualRows ? virtualRows.map((vi) => ({ rowItem: rowItems[vi.index], index: vi.index })).filter(({ rowItem }) => !!rowItem) : rowItems.map((rowItem, index) => ({ rowItem, index }));
+  const columnCount = table.getVisibleLeafColumns().length;
+  const hasFooterRow = columns.some((col) => col.footer != null);
+  useLoadMore.useLoadMore(
+    { isLoading: !!loadingState, onLoadMore, items: data },
+    containerRef
+  );
+  const columnSizeVars = Object.fromEntries(
+    table.getVisibleLeafColumns().flatMap((col) => {
+      const columnDef = col.columnDef;
+      const width = measuredColumnWidths?.[col.id] ?? columnDef.sizing?.width;
+      if (width === void 0) return [];
+      const cssValue = typeof width === "number" ? `${width}px` : width;
+      return [[`--col-${col.id}-width`, cssValue]];
+    })
+  );
+  return /* @__PURE__ */ React.createElement(
+    sapphireReact.Table.Container,
+    {
+      ref: containerRef,
+      hideLastDivider: hideLastDivider || data.length === 0 && !loadingState,
+      stickyHeader,
+      stickyFooter,
+      UNSAFE_style: styleProps.style,
+      UNSAFE_className: styleProps.className,
+      footer: footer ? /* @__PURE__ */ React.createElement(PaginationContext.Provider, { value: { scrollableRef: containerRef } }, footer) : void 0,
+      ...filteredProps
+    },
+    /* @__PURE__ */ React.createElement(
+      sapphireReact.Table,
+      {
+        ref: tableRef,
+        role: "grid",
+        "aria-label": ariaLabel,
+        cellSpacing,
+        "aria-busy": Boolean(loadingState) || void 0,
+        layout: layout === "fixed" || measuredColumnWidths !== null ? "fixed" : "auto",
+        UNSAFE_style: columnSizeVars,
+        ...gridKeyboardNavigationProps
+      },
+      /* @__PURE__ */ React.createElement("colgroup", null, table.getVisibleLeafColumns().map((col) => {
+        const varName = `--col-${col.id}-width`;
+        return /* @__PURE__ */ React.createElement(
+          "col",
+          {
+            key: col.id,
+            style: columnSizeVars[varName] ? { width: `var(${varName})` } : void 0
+          }
+        );
+      })),
+      /* @__PURE__ */ React.createElement(sapphireReact.Table.Header, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement(sapphireReact.Table.HeaderRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
+        const columnDef = header.column.columnDef;
+        return /* @__PURE__ */ React.createElement(
+          sapphireReact.Table.HeaderCell,
+          {
+            key: header.id,
+            allowsSorting: header.column.getCanSort(),
+            sortDirection: mapSortDirection(
+              header.column.getIsSorted()
+            ),
+            onPress: header.column.getToggleSortingHandler(),
+            align: columnDef.align,
+            variant: header.column.id === SELECTION_COLUMN_ID ? "selection" : "normal",
+            minWidth: columnDef.sizing?.minWidth,
+            maxWidth: columnDef.sizing?.maxWidth
+          },
+          header.isPlaceholder ? null : reactTable.flexRender(columnDef.header, header.getContext())
+        );
+      })))),
+      /* @__PURE__ */ React.createElement(sapphireReact.Table.Body, null, virtualPaddingTop > 0 && /* @__PURE__ */ React.createElement("tr", { "aria-hidden": true, style: { height: virtualPaddingTop } }, /* @__PURE__ */ React.createElement("td", { colSpan: columnCount })), renderedRowItems.map(({ rowItem, index: itemIndex }) => {
+        if (rowItem.type === "skeleton") {
+          const { skeletonIndex: i } = rowItem;
+          return /* @__PURE__ */ React.createElement(sapphireReact.Table.Row, { key: `skeleton-${i}`, "aria-hidden": true }, table.getVisibleLeafColumns().map((col) => {
+            const columnDef = col.columnDef;
+            const renderLoadingSkeleton = columnDef.renderLoadingSkeleton ?? ((i2) => /* @__PURE__ */ React.createElement(sapphireReact.Skeleton.Text, { index: i2, widthType: "randomPct" }));
+            return /* @__PURE__ */ React.createElement(
+              sapphireReact.Table.Cell,
+              {
+                key: col.id,
+                align: columnDef.align,
+                overflow: "none",
+                variant: col.id === SELECTION_COLUMN_ID ? "selection" : "normal"
+              },
+              renderLoadingSkeleton(i)
+            );
+          }));
+        }
+        if (rowItem.type === "expandedView") {
+          const { row: row2 } = rowItem;
+          return /* @__PURE__ */ React.createElement(
+            sapphireReact.Table.Row,
+            {
+              key: `${row2.id}-expanded-view`,
+              "data-index": itemIndex,
+              ref: (element) => {
+                virtualizer.measureElement(element);
+              }
+            },
+            /* @__PURE__ */ React.createElement(sapphireReact.Table.Cell, { colSpan: columnCount, overflow: "none" }, rowItem.expandedView)
+          );
+        }
+        const { row, disabled } = rowItem;
+        const canExpand = row.getCanExpand() || rowItem.hasExpandedView;
+        const toggleRowExpansion = canExpand ? () => row?.toggleExpanded() : void 0;
+        const toggleRowSelection = row.getCanSelect() ? () => row?.toggleSelected() : void 0;
+        const rowAction = onRowAction ? () => onRowAction(row.original) : void 0;
+        const isRowActionDisabled = disabled && disabledBehavior !== "selection";
+        const onAction = !isRowActionDisabled ? rowAction ?? toggleRowExpansion ?? toggleRowSelection : void 0;
+        const firstUserColumnId = row.getVisibleCells().find((c) => c.column.id !== SELECTION_COLUMN_ID)?.column.id;
+        return /* @__PURE__ */ React.createElement(
+          sapphireReact.Table.Row,
+          {
+            key: row.id,
+            isDisabled: isRowActionDisabled,
+            isSelected: selectionMode !== "none" ? row.getIsSelected() : void 0,
+            "aria-selected": selectionMode !== "none" ? row.getIsSelected() : void 0,
+            onAction: onAction && ((e) => {
+              if (e.pointerType === "keyboard" && e.key === " " && toggleRowSelection) {
+                toggleRowSelection();
+              } else {
+                onAction?.();
+              }
+            }),
+            triggerActionOnPressStart: onAction === toggleRowSelection,
+            isExpanded: row.getIsExpanded() && rowExpansion?.type === "expandedView",
+            "aria-level": rowExpansion != null ? row.depth + 1 : void 0,
+            "data-grid-row": isRowActionDisabled ? void 0 : "",
+            "data-index": itemIndex,
+            ref: (element) => {
+              virtualizer.measureElement(element);
+            }
+          },
+          row.getVisibleCells().map((cell) => {
+            const columnDef = cell.column.columnDef;
+            const isTreeColumn = rowExpansion != null && cell.column.id === firstUserColumnId;
+            return /* @__PURE__ */ React.createElement(
+              DataGridCell,
+              {
+                key: cell.id,
+                align: columnDef.align,
+                isRowHeader: columnDef.isRowHeader,
+                variant: cell.column.id === SELECTION_COLUMN_ID ? "selection" : isTreeColumn ? "tree" : "normal"
+              },
+              isTreeColumn && canExpand && /* @__PURE__ */ React.createElement(
+                sapphireReact.Table.ToggleExpandButton,
+                {
+                  isExpanded: row.getIsExpanded(),
+                  onPress: toggleRowExpansion,
+                  isDisabled: isRowActionDisabled
+                }
+              ),
+              reactTable.flexRender(columnDef.cell, cell.getContext())
+            );
+          })
+        );
+      }), virtualPaddingBottom > 0 && /* @__PURE__ */ React.createElement("tr", { "aria-hidden": true, style: { height: virtualPaddingBottom } }, /* @__PURE__ */ React.createElement("td", { colSpan: columnCount })), !loadingState && data.length === 0 && emptyState != null && /* @__PURE__ */ React.createElement(sapphireReact.Table.Row, null, /* @__PURE__ */ React.createElement(sapphireReact.Table.Cell, { colSpan: columnCount, overflow: "none" }, emptyState))),
+      hasFooterRow && table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ React.createElement(sapphireReact.Table.Footer, { key: footerGroup.id }, /* @__PURE__ */ React.createElement(sapphireReact.Table.Row, null, footerGroup.headers.map((footer2) => {
+        const columnDef = footer2.column.columnDef;
+        return /* @__PURE__ */ React.createElement(
+          sapphireReact.Table.Cell,
+          {
+            key: footer2.id,
+            role: "gridcell",
+            align: columnDef.align,
+            overflow: "none"
+          },
+          footer2.isPlaceholder ? null : reactTable.flexRender(columnDef.footer, footer2.getContext())
+        );
+      }))))
+    )
+  );
+}
+function DataGridCell({
+  align,
+  isRowHeader,
+  children,
+  variant
+}) {
+  const ref = React.useRef(null);
+  return /* @__PURE__ */ React.createElement(DataGridCellContext.Provider, { value: { ref } }, /* @__PURE__ */ React.createElement(
+    sapphireReact.Table.Cell,
+    {
+      ref,
+      role: isRowHeader ? "rowheader" : "gridcell",
+      align,
+      overflow: "none",
+      variant
+    },
+    children
+  ));
+}
+function fromBooleanMap(state) {
+  return Object.entries(state).filter(([, isExpanded]) => isExpanded).map(([id]) => id);
+}
+function toBooleanMap(ids) {
+  return ids?.reduce((acc, id) => {
+    acc[id] = true;
+    return acc;
+  }, {});
+}
+function toSortingState(sorting) {
+  return sorting ? [
+    {
+      id: sorting.column,
+      desc: sorting.direction === "descending"
+    }
+  ] : void 0;
+}
+function fromSortingState(sorting) {
+  return sorting[0] ? {
+    column: sorting[0].id,
+    direction: sorting[0].desc ? "descending" : "ascending"
+  } : void 0;
+}
+function mapSortDirection(tanStackSortDirection) {
+  if (tanStackSortDirection === "asc") {
+    return "ascending";
+  } else if (tanStackSortDirection === "desc") {
+    return "descending";
+  }
+  return void 0;
+}
+
+function createDataGridColumnHelper(_options) {
+  const helper = {
+    accessor: (accessorKeyOrFn, column) => {
+      if (typeof accessorKeyOrFn === "function") {
+        return { ...column, accessorFn: accessorKeyOrFn };
+      }
+      return { ...column, accessorKey: accessorKeyOrFn };
+    },
+    display: (column) => column
+  };
+  return helper;
+}
+
+const _DataGrid = Object.assign(DataGrid, {
+  EditableCellContent
+});
+
 Object.defineProperty(exports, "useLocale", {
   enumerable: true,
   get: function () { return I18nProvider.useLocale; }
@@ -2715,6 +5205,7 @@ exports.Amount = Amount;
 exports.Autocomplete = Autocomplete;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.Breadcrumbs = Breadcrumbs;
+exports.DataGrid = _DataGrid;
 exports.FileDropzone = FileDropzone;
 exports.FileTrigger = FileTrigger;
 exports.FilterDropdown = FilterDropdown;
@@ -2728,4 +5219,6 @@ exports.Slider = _Slider;
 exports.TagGroup = TagGroup;
 exports.TagItem = TagItem;
 exports.TimeField = TimeField;
+exports.TruncateOverflow = TruncateOverflow;
+exports.createDataGridColumnHelper = createDataGridColumnHelper;
 //# sourceMappingURL=index.js.map