@easypost/easy-ui 1.0.0-alpha.111 → 1.0.0-alpha.113

package/DataGrid/index.js

@@ -67,15 +67,16 @@ var __yieldStar = (value) => {
   }, "return" in obj && method("return"), it;
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../__chunks__/jsx-runtime-CH1d66I3.js");
 const React = require("react");
-const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
-const Menu = require("../__chunks__/Menu-Kfc6nxFP.js");
-const Text = require("../__chunks__/Text-CSESKR_s.js");
-const KebabButton = require("../__chunks__/KebabButton-DdzHU7is.js");
+const Icon = require("../__chunks__/Icon-BVa5ddiD.js");
+const Menu = require("../__chunks__/Menu-Du8SsMeJ.js");
+const Text = require("../__chunks__/Text-C4CEsglh.js");
+const KebabButton = require("../__chunks__/KebabButton-3FnxY-Fz.js");
 const utilities_css = require("../utilities/css.js");
 const usePress = require("../__chunks__/usePress-B5G5CgVn.js");
 const ArrowForwardIos = require("../__chunks__/ArrowForwardIos-DpRiDPNZ.js");
-const Checkbox = require("../__chunks__/Checkbox-D2-8vvdr.js");
+const Checkbox = require("../__chunks__/Checkbox-DFWhjlaO.js");
 const useFocusVisible = require("../__chunks__/useFocusVisible-BNcpO5Sv.js");
 const focusSafely = require("../__chunks__/focusSafely-C5HWSeZE.js");
 const FocusScope = require("../__chunks__/FocusScope-CncDnO-E.js");
@@ -91,9 +92,9 @@ const useFocusable = require("../__chunks__/useFocusable-fxgaZN7X.js");
 const VisuallyHidden = require("../__chunks__/VisuallyHidden-CIjowwM_.js");
 const SelectionManager = require("../__chunks__/SelectionManager-CFPcxpAj.js");
 const useHover = require("../__chunks__/useHover-Ck1otl-j.js");
-const useEdgeInterceptors = require("../__chunks__/useEdgeInterceptors-Ihk8NfjJ.js");
+const useEdgeInterceptors = require("../__chunks__/useEdgeInterceptors-BLxn3eUi.js");
 const useResizeObserver = require("../__chunks__/useResizeObserver-CEeqtqhm.js");
-const Spinner = require("../__chunks__/Spinner-D0ifPtVV.js");
+const Spinner = require("../__chunks__/Spinner-Dd68v9QX.js");
 const useSelectableList = require("../__chunks__/useSelectableList-DeSKmxTV.js");
 const LiveAnnouncer = require("../__chunks__/LiveAnnouncer-CzeNwq2D.js");
 const filterDOMProps = require("../__chunks__/filterDOMProps-p6wKN-SS.js");
@@ -2163,7 +2164,7 @@ const styles$8 = {
 };
 const UnstyledPressButton = React.forwardRef((props, ref) => {
   const { pressProps } = usePress.$f6c31cce2adf654f$export$45712eceda6fad21(props);
-  return React.createElement("button", __spreadProps(__spreadValues({}, pressProps), {
+  return jsxRuntime.jsxRuntimeExports.jsx("button", __spreadProps(__spreadValues({}, pressProps), {
     ref,
     className: utilities_css.classNames(styles$8.UnstyledPressButton, pressProps.className)
   }));
@@ -2191,15 +2192,14 @@ const styles$7 = {
   ActionsCellContent: ActionsCellContent$1
 };
 function ActionsCellContent({ rowActions }) {
-  return React.createElement("span", {
-    className: styles$7.ActionsCellContent
-  }, rowActions.map((rowAction, i) => rowAction.type === "menu" ? React.createElement(MenuRowAction, {
-    key: i,
-    rowAction
-  }) : React.createElement(ActionRowAction, {
-    key: i,
-    rowAction
-  })));
+  return jsxRuntime.jsxRuntimeExports.jsx("span", {
+    className: styles$7.ActionsCellContent,
+    children: rowActions.map((rowAction, i) => rowAction.type === "menu" ? jsxRuntime.jsxRuntimeExports.jsx(MenuRowAction, {
+      rowAction
+    }, i) : jsxRuntime.jsxRuntimeExports.jsx(ActionRowAction, {
+      rowAction
+    }, i))
+  });
 }
 function MenuRowAction({ rowAction }) {
   const { accessibilityLabel = "Actions" } = rowAction;
@@ -2211,26 +2211,31 @@ function MenuRowAction({ rowAction }) {
   const handleOpenChange = React.useCallback((isOpen2) => {
     setIsOpen(isOpen2);
   }, []);
-  return React.createElement(Menu.Menu, {
+  return jsxRuntime.jsxRuntimeExports.jsxs(Menu.Menu, {
     isOpen,
-    onOpenChange: handleOpenChange
-  }, React.createElement(Menu.Menu.Trigger, null, React.createElement(KebabButton.KebabButton, {
-    onPress: handleClick,
-    accessibilityLabel
-  })), rowAction.renderMenuOverlay());
+    onOpenChange: handleOpenChange,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.Menu.Trigger, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(KebabButton.KebabButton, {
+        onPress: handleClick,
+        accessibilityLabel
+      })
+    }), rowAction.renderMenuOverlay()]
+  });
 }
 function ActionRowAction({ rowAction }) {
   const { onAction } = rowAction;
   const handleClick = React.useCallback(() => {
     onAction();
   }, [onAction]);
-  return React.createElement(UnstyledPressButton, {
-    onPress: handleClick
-  }, React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, rowAction.accessibilityLabel), React.createElement(Icon.Icon, {
-    symbol: rowAction.iconSymbol
-  }));
+  return jsxRuntime.jsxRuntimeExports.jsxs(UnstyledPressButton, {
+    onPress: handleClick,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+      visuallyHidden: true,
+      children: rowAction.accessibilityLabel
+    }), jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, {
+      symbol: rowAction.iconSymbol
+    })]
+  });
 }
 const button = "_button_2dhvf_4";
 const expanded$2 = "_expanded_2dhvf_22";
@@ -2243,16 +2248,18 @@ function ExpandCellContent({ isExpanded, toggleExpanded }) {
     toggleExpanded();
   }, [toggleExpanded]);
   const className = utilities_css.classNames(styles$6.button, isExpanded && styles$6.expanded);
-  return React.createElement(UnstyledPressButton, {
+  return jsxRuntime.jsxRuntimeExports.jsxs(UnstyledPressButton, {
     onPress: handleClick,
     className,
-    "aria-expanded": isExpanded
-  }, React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, "Expand"), React.createElement(Icon.Icon, {
-    symbol: ArrowForwardIos.ArrowForwardIos,
-    size: "xs"
-  }));
+    "aria-expanded": isExpanded,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+      visuallyHidden: true,
+      children: "Expand"
+    }), jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, {
+      symbol: ArrowForwardIos.ArrowForwardIos,
+      size: "xs"
+    })]
+  });
 }
 const Cell$1 = "_Cell_mlbdo_4";
 const content$1 = "_content_mlbdo_13";
@@ -2299,41 +2306,48 @@ function Cell({ cell, state }) {
   const hasLeftShadow = hasActionsAtEnd && table2.isRightEdgeUnderScroll && cell.index === state.collection.columnCount - 1;
   const className = utilities_css.classNames(styles$5.Cell, isFocusVisible && styles$5.focused, row.isExpanded && styles$5.expanded, row.isFocusVisible && styles$5.rowFocused, hasRightShadow && styles$5[utilities_css.variationName("shadow", "right")], hasLeftShadow && styles$5[utilities_css.variationName("shadow", "left")], cell.index === 0 && styles$5.first, hasActionsAtStart && cell.index === 0 && styles$5.firstWithActions, hasActionsAtStart && cell.index === 1 && styles$5.secondWithActions, cell.index === state.collection.columnCount - 1 && styles$5.last, hasActionsAtEnd && cell.index === state.collection.columnCount - 1 && styles$5.lastWithActions, hasActionsAtEnd && cell.index === state.collection.columnCount - 2 && styles$5.secondToLastWithActions, row.index === 0 && styles$5.firstRow, row.index === state.collection.size - 1 && styles$5.lastRow);
   const CellContentComponent = cell.props.isSelectionCell ? SelectCellContent : DefaultCellContent;
-  return React.createElement("td", __spreadProps(__spreadValues({}, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(gridCellProps, focusProps)), {
+  return jsxRuntime.jsxRuntimeExports.jsx("td", __spreadProps(__spreadValues({}, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(gridCellProps, focusProps)), {
     ref,
-    className
-  }), React.createElement("div", {
-    className: styles$5.content
-  }, React.createElement(CellContentComponent, {
-    cell,
-    state
-  }), React.createElement("div", {
-    "data-ezui-data-grid-shadow": true
-  })));
+    className,
+    children: jsxRuntime.jsxRuntimeExports.jsxs("div", {
+      className: styles$5.content,
+      children: [jsxRuntime.jsxRuntimeExports.jsx(CellContentComponent, {
+        cell,
+        state
+      }), jsxRuntime.jsxRuntimeExports.jsx("div", {
+        "data-ezui-data-grid-shadow": true
+      })]
+    })
+  }));
 }
 function DefaultCellContent({ cell }) {
-  return React.createElement(React.Fragment, null, cell.rendered);
+  return jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {
+    children: cell.rendered
+  });
 }
 function SelectCellContent({ cell, state }) {
   const { checkboxProps } = $2a795c53a101c542$export$16ea7f650bd7c1bb({
     key: cell.parentKey
   }, state);
-  return React.createElement(Checkbox.Checkbox, __spreadValues({}, checkboxProps));
+  return jsxRuntime.jsxRuntimeExports.jsx(Checkbox.Checkbox, __spreadValues({}, checkboxProps));
 }
 function StaticCell({ children, colSpan }) {
   const className = utilities_css.classNames(styles$5.Cell, styles$5.static);
-  return React.createElement("td", {
+  return jsxRuntime.jsxRuntimeExports.jsx("td", {
     role: "gridcell",
     className,
-    colSpan
-  }, React.createElement("div", {
-    className: styles$5.content
-  }, React.createElement(Text.Text, {
-    variant: "subtitle2",
-    color: "neutral.500"
-  }, children), React.createElement("div", {
-    "data-ezui-data-grid-shadow": true
-  })));
+    colSpan,
+    children: jsxRuntime.jsxRuntimeExports.jsxs("div", {
+      className: styles$5.content,
+      children: [jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+        variant: "subtitle2",
+        color: "neutral.500",
+        children
+      }), jsxRuntime.jsxRuntimeExports.jsx("div", {
+        "data-ezui-data-grid-shadow": true
+      })]
+    })
+  });
 }
 const SortIndicator$1 = "_SortIndicator_19d3w_4";
 const arrow = "_arrow_19d3w_9";
@@ -2347,28 +2361,31 @@ const styles$4 = {
 };
 function SortIndicator({ sortDirection }) {
   const { headerVariant } = useDataGridTable();
-  return React.createElement("span", {
+  return jsxRuntime.jsxRuntimeExports.jsx("span", {
     "aria-hidden": "true",
-    className: utilities_css.classNames(styles$4.SortIndicator, sortDirection && styles$4.sorted, headerVariant && styles$4[utilities_css.variationName("onHeader", headerVariant)])
-  }, React.createElement(Arrow, {
-    className: styles$4.arrow,
-    style: {
-      transform: sortDirection === "ascending" ? "scaleY(-1)" : "scaleY(1)"
-    }
-  }));
+    className: utilities_css.classNames(styles$4.SortIndicator, sortDirection && styles$4.sorted, headerVariant && styles$4[utilities_css.variationName("onHeader", headerVariant)]),
+    children: jsxRuntime.jsxRuntimeExports.jsx(Arrow, {
+      className: styles$4.arrow,
+      style: {
+        transform: sortDirection === "ascending" ? "scaleY(-1)" : "scaleY(1)"
+      }
+    })
+  });
 }
 function Arrow(props) {
-  return React.createElement("svg", __spreadValues({
+  return jsxRuntime.jsxRuntimeExports.jsx("svg", __spreadProps(__spreadValues({
     width: "12",
     height: "8",
     viewBox: "0 0 12 8",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), React.createElement("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 0.344238L0 0.344238L6 7.561L12 0.344238Z"
+  }, props), {
+    children: jsxRuntime.jsxRuntimeExports.jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 0.344238L0 0.344238L6 7.561L12 0.344238Z"
+    })
   }));
 }
 const ColumnHeader$1 = "_ColumnHeader_1le2g_4";
@@ -2413,34 +2430,40 @@ function ColumnHeader({ column, state }) {
   const className = utilities_css.classNames(styles$3.ColumnHeader, isFocusVisible && styles$3.focused, column.props.allowsSorting && styles$3.allowsSorting, hasRightShadow && styles$3[utilities_css.variationName("shadow", "right")], hasLeftShadow && styles$3[utilities_css.variationName("shadow", "left")], table2.isTopEdgeUnderScroll && styles$3[utilities_css.variationName("shadow", "bottom")], column.index === 0 && styles$3.first, hasActionsAtStart && column.index === 0 && styles$3.firstWithActions, hasActionsAtStart && column.index === 1 && styles$3.secondWithActions, column.index === state.collection.columnCount - 1 && styles$3.last, hasActionsAtEnd && column.index === state.collection.columnCount - 1 && styles$3.lastWithActions, hasActionsAtEnd && column.index === state.collection.columnCount - 2 && styles$3.secondToLastWithActions);
   const contentClassName = utilities_css.classNames(styles$3.content, column.props.allowsSorting && styles$3.allowsSorting);
   const ColumnHeaderContentComponent = column.props.isSelectionCell ? SelectAllColumnHeaderContent : DefaultColumnHeaderContent;
-  return React.createElement("td", __spreadProps(__spreadValues({
+  return jsxRuntime.jsxRuntimeExports.jsx("td", __spreadProps(__spreadValues({
     ref
   }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(columnHeaderProps, focusProps)), {
     className,
-    "data-ezui-data-grid-column-header": "true"
-  }), React.createElement("div", {
-    className: contentClassName
-  }, React.createElement(ColumnHeaderContentComponent, {
-    column,
-    state
-  }), React.createElement("div", {
-    "data-ezui-data-grid-shadow": "bottom"
-  }), React.createElement("div", {
-    "data-ezui-data-grid-shadow": "side"
-  })));
+    "data-ezui-data-grid-column-header": "true",
+    children: jsxRuntime.jsxRuntimeExports.jsxs("div", {
+      className: contentClassName,
+      children: [jsxRuntime.jsxRuntimeExports.jsx(ColumnHeaderContentComponent, {
+        column,
+        state
+      }), jsxRuntime.jsxRuntimeExports.jsx("div", {
+        "data-ezui-data-grid-shadow": "bottom"
+      }), jsxRuntime.jsxRuntimeExports.jsx("div", {
+        "data-ezui-data-grid-shadow": "side"
+      })]
+    })
+  }));
 }
 function DefaultColumnHeaderContent({ column, state }) {
   var _a, _b;
-  return React.createElement(React.Fragment, null, column.rendered, column.props.allowsSorting && React.createElement(SortIndicator, {
-    sortDirection: ((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? (_b = state.sortDescriptor) == null ? void 0 : _b.direction : void 0
-  }));
+  return jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, {
+    children: [column.rendered, column.props.allowsSorting && jsxRuntime.jsxRuntimeExports.jsx(SortIndicator, {
+      sortDirection: ((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? (_b = state.sortDescriptor) == null ? void 0 : _b.direction : void 0
+    })]
+  });
 }
 function SelectAllColumnHeaderContent({ state }) {
   const { checkboxProps } = $2a795c53a101c542$export$1003db6a7e384b99(state);
   if (state.selectionManager.selectionMode === "single") {
-    return React.createElement(VisuallyHidden.$5c3e21d68f1c4674$export$439d29a4e110a164, null, checkboxProps["aria-label"]);
+    return jsxRuntime.jsxRuntimeExports.jsx(VisuallyHidden.$5c3e21d68f1c4674$export$439d29a4e110a164, {
+      children: checkboxProps["aria-label"]
+    });
   }
-  return React.createElement(Checkbox.Checkbox, __spreadValues({}, checkboxProps));
+  return jsxRuntime.jsxRuntimeExports.jsx(Checkbox.Checkbox, __spreadValues({}, checkboxProps));
 }
 const ExpandedRowContent$1 = "_ExpandedRowContent_180oy_4";
 const inner = "_inner_180oy_16";
@@ -2449,12 +2472,14 @@ const styles$2 = {
   inner
 };
 function ExpandedRowContent({ children }) {
-  return React.createElement("div", {
+  return jsxRuntime.jsxRuntimeExports.jsx("div", {
     className: utilities_css.classNames(styles$2.ExpandedRowContent),
-    "data-ezui-data-grid-expanded-row-content": "active"
-  }, React.createElement("div", {
-    className: utilities_css.classNames(styles$2.inner)
-  }, children));
+    "data-ezui-data-grid-expanded-row-content": "active",
+    children: jsxRuntime.jsxRuntimeExports.jsx("div", {
+      className: utilities_css.classNames(styles$2.inner),
+      children
+    })
+  });
 }
 const Row$1 = "_Row_oip0t_4";
 const noUserSelection = "_noUserSelection_oip0t_10";
@@ -2473,10 +2498,11 @@ function HeaderRow({ item, state, children }) {
   const { rowProps } = $f917ee10f4c32dab$export$1b95a7d2d517b841({
     node: item
   }, state);
-  return React.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+  return jsxRuntime.jsxRuntimeExports.jsx("tr", __spreadProps(__spreadValues({}, rowProps), {
     ref,
-    className: styles$1.Row
-  }), children);
+    className: styles$1.Row,
+    children
+  }));
 }
 const EXPAND_COLUMN_KEY = "__ezui-column-key-expand__";
 const ACTIONS_COLUMN_KEY = "__ezui-column-key-actions__";
@@ -2514,21 +2540,24 @@ function Row({ item, children, state, isExpanded }) {
     };
   }, [isExpanded, isFocusVisible, removeHover, rowIndex]);
   const className = utilities_css.classNames(styles$1.Row, isExpanded && styles$1.expanded, isHovered && styles$1.hovered, isFocusVisible && styles$1.focused, isSelected && styles$1.selected, isPressed && styles$1.pressed, isDisabled && styles$1.disabled, (hasSelection || hasOnRowAction) && styles$1.noUserSelection);
-  return React.createElement(DataGridRowContext.Provider, {
-    value: context2
-  }, React.createElement("tr", __spreadProps(__spreadValues({
-    ref
-  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(rowProps, focusProps, hoverProps)), {
-    className,
-    "data-ezui-data-grid-expanded-row": isPendingExpanded,
-    "data-ezui-data-grid-row": "true"
-  }), children));
+  return jsxRuntime.jsxRuntimeExports.jsx(DataGridRowContext.Provider, {
+    value: context2,
+    children: jsxRuntime.jsxRuntimeExports.jsx("tr", __spreadProps(__spreadValues({
+      ref
+    }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(rowProps, focusProps, hoverProps)), {
+      className,
+      "data-ezui-data-grid-expanded-row": isPendingExpanded,
+      "data-ezui-data-grid-row": "true",
+      children
+    }))
+  });
 }
 function StaticRow({ children }) {
-  return React.createElement("tr", {
+  return jsxRuntime.jsxRuntimeExports.jsx("tr", {
     role: "row",
-    className: styles$1.Row
-  }, children);
+    className: styles$1.Row,
+    children
+  });
 }
 const DataGrid$1 = "_DataGrid_en1kq_4";
 const sizeSm = "_sizeSm_en1kq_40";
@@ -2552,9 +2581,10 @@ const styles = {
 };
 function RowGroup({ as: As = "div", children }) {
   const { rowGroupProps } = $0047e6c294ea075f$export$6fb1613bd7b28198();
-  return React.createElement(As, __spreadProps(__spreadValues({}, rowGroupProps), {
-    className: styles.contents
-  }), children);
+  return jsxRuntime.jsxRuntimeExports.jsx(As, __spreadProps(__spreadValues({}, rowGroupProps), {
+    className: styles.contents,
+    children
+  }));
 }
 function useExpandedRow({ containerRef, state }) {
   const [expandedRowRect, setExpandedRowRect] = React.useState(null);
@@ -2647,52 +2677,64 @@ function Table(props) {
       isRightEdgeUnderScroll
     };
   }, [headerVariant, hasSelection, hasExpansion, hasRowActions, hasOnRowAction, isTopEdgeUnderScroll, isLeftEdgeUnderScroll, isRightEdgeUnderScroll]);
-  return React.createElement(DataGridTableContext.Provider, {
-    value: context2
-  }, React.createElement("div", {
-    ref: outerContainerRef,
-    className: dataGridClassName,
-    style
-  }, React.createElement("div", {
-    ref: innerContainerRef,
-    className: styles.innerContainer
-  }, React.createElement("table", __spreadProps(__spreadValues({}, gridProps), {
-    ref: tableRef,
-    className: tableClassName
-  }), React.createElement(RowGroup, {
-    as: "thead"
-  }, collection.headerRows.map((headerRow) => React.createElement(HeaderRow, {
-    key: headerRow.key,
-    item: headerRow,
-    state
-  }, [...headerRow.childNodes].map((column) => React.createElement(ColumnHeader, {
-    key: column.key,
-    column,
-    state
-  }))))), React.createElement(RowGroup, {
-    as: "tbody"
-  }, collection.size === 0 || isLoading ? React.createElement(StaticRow, null, React.createElement(StaticCell, {
-    colSpan: collection.columnCount
-  }, isLoading ? React.createElement(Spinner.Spinner, {
-    isIndeterminate: true,
-    size: "sm"
-  }, "Loading..") : renderEmptyState())) : [...collection.body.childNodes].map((row) => React.createElement(Row, {
-    key: row.key,
-    item: row,
-    state,
-    isExpanded: expandedRow ? expandedRow.key === row.key : false
-  }, [...row.childNodes].map((cell) => React.createElement(Cell, {
-    key: cell.key,
-    cell,
-    state
-  })))))), expandedRow && React.createElement(ExpandedRowContent, null, renderExpandedRow(expandedRow.key)), renderInterceptors())));
+  return jsxRuntime.jsxRuntimeExports.jsx(DataGridTableContext.Provider, {
+    value: context2,
+    children: jsxRuntime.jsxRuntimeExports.jsx("div", {
+      ref: outerContainerRef,
+      className: dataGridClassName,
+      style,
+      children: jsxRuntime.jsxRuntimeExports.jsxs("div", {
+        ref: innerContainerRef,
+        className: styles.innerContainer,
+        children: [jsxRuntime.jsxRuntimeExports.jsxs("table", __spreadProps(__spreadValues({}, gridProps), {
+          ref: tableRef,
+          className: tableClassName,
+          children: [jsxRuntime.jsxRuntimeExports.jsx(RowGroup, {
+            as: "thead",
+            children: collection.headerRows.map((headerRow) => jsxRuntime.jsxRuntimeExports.jsx(HeaderRow, {
+              item: headerRow,
+              state,
+              children: [...headerRow.childNodes].map((column) => jsxRuntime.jsxRuntimeExports.jsx(ColumnHeader, {
+                column,
+                state
+              }, column.key))
+            }, headerRow.key))
+          }), jsxRuntime.jsxRuntimeExports.jsx(RowGroup, {
+            as: "tbody",
+            children: collection.size === 0 || isLoading ? jsxRuntime.jsxRuntimeExports.jsx(StaticRow, {
+              children: jsxRuntime.jsxRuntimeExports.jsx(StaticCell, {
+                colSpan: collection.columnCount,
+                children: isLoading ? jsxRuntime.jsxRuntimeExports.jsx(Spinner.Spinner, {
+                  isIndeterminate: true,
+                  size: "sm",
+                  children: "Loading.."
+                }) : renderEmptyState()
+              })
+            }) : [...collection.body.childNodes].map((row) => jsxRuntime.jsxRuntimeExports.jsx(Row, {
+              item: row,
+              state,
+              isExpanded: expandedRow ? expandedRow.key === row.key : false,
+              children: [...row.childNodes].map((cell) => jsxRuntime.jsxRuntimeExports.jsx(Cell, {
+                cell,
+                state
+              }, cell.key))
+            }, row.key))
+          })]
+        })), expandedRow && jsxRuntime.jsxRuntimeExports.jsx(ExpandedRowContent, {
+          children: renderExpandedRow(expandedRow.key)
+        }), renderInterceptors()]
+      })
+    })
+  });
 }
 function VisuallyHiddenCellContent({ children }) {
-  return React.createElement("span", {
-    className: styles.visuallyHiddenCellContainer
-  }, React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, children));
+  return jsxRuntime.jsxRuntimeExports.jsx("span", {
+    className: styles.visuallyHiddenCellContainer,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+      visuallyHidden: true,
+      children
+    })
+  });
 }
 function DataGrid(props) {
   const { columns: unprocessedColumns, columnKeysAllowingSort = [], defaultExpandedKey, expandedKey: expandedKeyFromUser, onExpandedChange = () => {
@@ -2728,21 +2770,35 @@ function DataGrid(props) {
       setExpandedKey
     };
   }, [expandedKey]);
-  return React.createElement(DataGridContext.Provider, {
-    value: context2
-  }, React.createElement(Table, __spreadValues({}, props), React.createElement($312ae3b56a94a86e$export$f850895b287ef28e, {
-    columns
-  }, (column) => React.createElement($1cd244557c2f97d5$export$816b5d811295e6bc, {
-    isRowHeader: column.key === rowHeaderColumnKey,
-    allowsSorting: column.key === EXPAND_COLUMN_KEY || column.key === ACTIONS_COLUMN_KEY ? false : columnKeysAllowingSort.includes(column.key)
-  }, column.key === EXPAND_COLUMN_KEY ? React.createElement(VisuallyHiddenCellContent, null, "Expand row") : column.key === ACTIONS_COLUMN_KEY ? React.createElement(VisuallyHiddenCellContent, null, "Row actions") : renderColumnCell(column))), React.createElement($4ae5314bf50db1a3$export$76ccd210b9029917, {
-    items: rows
-  }, (row) => React.createElement($70d70eb16ea48428$export$b59bdbef9ce70de2, null, (columnKey) => React.createElement($941d1d9a6a28982a$export$f6f0c3fe4ec306ea, null, columnKey === EXPAND_COLUMN_KEY ? React.createElement(ExpandCellContent, {
-    isExpanded: row.key === expandedKey,
-    toggleExpanded: () => toggleExpandedRow(row.key)
-  }) : columnKey === ACTIONS_COLUMN_KEY && rowActions ? React.createElement(ActionsCellContent, {
-    rowActions: rowActions(row.key)
-  }) : renderRowCell(row[columnKey], columnKey, row))))));
+  return jsxRuntime.jsxRuntimeExports.jsx(DataGridContext.Provider, {
+    value: context2,
+    children: jsxRuntime.jsxRuntimeExports.jsxs(Table, __spreadProps(__spreadValues({}, props), {
+      children: [jsxRuntime.jsxRuntimeExports.jsx($312ae3b56a94a86e$export$f850895b287ef28e, {
+        columns,
+        children: (column) => jsxRuntime.jsxRuntimeExports.jsx($1cd244557c2f97d5$export$816b5d811295e6bc, {
+          isRowHeader: column.key === rowHeaderColumnKey,
+          allowsSorting: column.key === EXPAND_COLUMN_KEY || column.key === ACTIONS_COLUMN_KEY ? false : columnKeysAllowingSort.includes(column.key),
+          children: column.key === EXPAND_COLUMN_KEY ? jsxRuntime.jsxRuntimeExports.jsx(VisuallyHiddenCellContent, {
+            children: "Expand row"
+          }) : column.key === ACTIONS_COLUMN_KEY ? jsxRuntime.jsxRuntimeExports.jsx(VisuallyHiddenCellContent, {
+            children: "Row actions"
+          }) : renderColumnCell(column)
+        })
+      }), jsxRuntime.jsxRuntimeExports.jsx($4ae5314bf50db1a3$export$76ccd210b9029917, {
+        items: rows,
+        children: (row) => jsxRuntime.jsxRuntimeExports.jsx($70d70eb16ea48428$export$b59bdbef9ce70de2, {
+          children: (columnKey) => jsxRuntime.jsxRuntimeExports.jsx($941d1d9a6a28982a$export$f6f0c3fe4ec306ea, {
+            children: columnKey === EXPAND_COLUMN_KEY ? jsxRuntime.jsxRuntimeExports.jsx(ExpandCellContent, {
+              isExpanded: row.key === expandedKey,
+              toggleExpanded: () => toggleExpandedRow(row.key)
+            }) : columnKey === ACTIONS_COLUMN_KEY && rowActions ? jsxRuntime.jsxRuntimeExports.jsx(ActionsCellContent, {
+              rowActions: rowActions(row.key)
+            }) : renderRowCell(row[columnKey], columnKey, row)
+          })
+        })
+      })]
+    }))
+  });
 }
 function useProcessedColumns(props) {
   const { renderExpandedRow, columns, rowActions } = props;