@pingux/astro 2.142.1-alpha.1 → 2.143.0-alpha.1

package/lib/cjs/components/PanelHeader/PanelHeader.stories.js

@@ -36,7 +36,8 @@ var Default = function Default(_ref) {
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
     data: {
       icon: _AccountIcon["default"],
-      text: 'Fons Vernall'
+      text: 'Fons Vernall',
+      avatarDefualtText: 'FV'
     }
   }));
 };
@@ -53,7 +54,8 @@ var WithSubtext = function WithSubtext(_ref2) {
     data: {
       icon: _AccountIcon["default"],
       subtext: 'rad_developer@pingidentity.com',
-      text: 'Fons Vernall'
+      text: 'Fons Vernall',
+      avatarDefualtText: 'FV'
     }
   }));
 };
@@ -70,7 +72,8 @@ var WithControls = function WithControls(_ref3) {
     data: {
       icon: _AccountIcon["default"],
       text: 'Fons Vernall',
-      subtext: 'rad_developer@pingidentity.com'
+      subtext: 'rad_developer@pingidentity.com',
+      avatarDefualtText: 'FV'
     }
   }), (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), (0, _react2.jsx)(_index.PanelHeaderMenu, null, (0, _react2.jsx)(_index.Item, {
     key: "enable"
@@ -93,7 +96,8 @@ var WithImage = function WithImage(args) {
       image: {
         src: _images.pingImg,
         alt: 'Ping Identity Logo',
-        'aria-label': 'Ping Identity Logo'
+        'aria-label': 'Ping Identity Logo',
+        avatarDefualtText: 'FV'
       },
       text: 'Fons Vernall'
     }
@@ -154,6 +158,7 @@ var WithExtraLongText = function WithExtraLongText(_ref4) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
     data: {
+      avatarDefualtText: 'FV',
       icon: _AccountIcon["default"],
       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
       subtext: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'

package/lib/cjs/components/PanelHeader/PanelHeader.styles.js

@@ -47,11 +47,16 @@ var wrapper = {
 var rightOfData = {
   alignSelf: 'center'
 };
+var iconWrapper = {
+  width: '25px',
+  mx: 'md'
+};
 var _default = {
   container: container,
   controls: controls,
   data: data,
   emptyData: emptyData,
+  iconWrapper: iconWrapper,
   rightOfData: rightOfData,
   wrapper: wrapper
 };

package/lib/cjs/components/PanelHeader/PanelHeader.test.js

@@ -39,6 +39,12 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return (0, _testWrapper.render)((0, _react3.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, defaultProps, props)));
 };
+var getComponentOnyx = function getComponentOnyx() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react3.jsx)(_index.AstroProvider, {
+    themeOverrides: [_index.OnyxTheme]
+  }, (0, _react3.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, defaultProps, props))));
+};
 var fallbackImageObj = null;
 jest.mock('../../hooks/useFallbackImage', function () {
   return function (props) {
@@ -100,4 +106,20 @@ test('renders rightOfData slot', function () {
     }
   });
   _testWrapper.screen.getByText(TEST_TEXT);
+});
+test('renders leftOfData slot', function () {
+  var TEST_TEXT = 'test text';
+  getComponent({
+    slots: {
+      leftOfData: (0, _react3.jsx)("div", null, TEST_TEXT)
+    }
+  });
+  _testWrapper.screen.getByText(TEST_TEXT);
+});
+test('renders onyx components', function () {
+  getComponentOnyx();
+  var image = _testWrapper.screen.getByRole('img');
+  expect(image.tagName.toLowerCase()).toBe('img');
+  expect(image).toHaveAttribute('src', _images.pingImg);
+  expect(image).toHaveAttribute('alt', 'Avatar');
 });

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -13,11 +13,8 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
-var _AlertOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertOutlineIcon"));
-var _CheckboxBlankCircleOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckboxBlankCircleOutlineIcon"));
-var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleIcon"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
+var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Text = _interopRequireDefault(require("../Text"));
@@ -28,6 +25,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var requirements = props.requirements,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    icons = _useGetTheme.icons;
+  var SuccessCircle = icons.SuccessCircle,
+    ErrorCircle = icons.ErrorCircle,
+    WarningIcon = icons.WarningIcon,
+    DefaultCircle = icons.DefaultCircle;
   var statusIconRender = function statusIconRender(status, key) {
     switch (status) {
       case 'success':
@@ -36,7 +39,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Success Status Icon'
           },
-          icon: _CheckCircleIcon["default"],
+          icon: SuccessCircle,
           color: "success.bright",
           mr: "sm",
           size: "sm",
@@ -48,7 +51,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Warning Status Icon'
           },
-          icon: _AlertOutlineIcon["default"],
+          icon: WarningIcon,
           color: "warning.bright",
           mr: "sm",
           size: "sm",
@@ -60,7 +63,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Error Status Icon'
           },
-          icon: _AlertCircleIcon["default"],
+          icon: ErrorCircle,
           color: "critical.bright",
           mr: "sm",
           size: "sm",
@@ -72,7 +75,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             id: key,
             name: 'Empty Status Icon'
           },
-          icon: _CheckboxBlankCircleOutlineIcon["default"],
+          icon: DefaultCircle,
           color: "neutral.40",
           mr: "sm",
           size: "sm",

package/lib/cjs/components/Stepper/Step.js

@@ -39,7 +39,7 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: className
   }), status === COMPLETED && !isHovered ? (0, _react2.jsx)(_index.Icon, {
     icon: _CheckBoldIcon["default"],
-    size: 23,
+    size: "sm",
     color: "text.primaryLight",
     title: {
       name: 'Check Bold Icon'

package/lib/cjs/components/Stepper/Stepper.styles.js

@@ -91,6 +91,7 @@ var stepBase = {
   fontSize: '17px',
   fontWeight: 3,
   cursor: 'pointer',
+  fontFamily: 'standard',
   '&[aria-expanded="true"]': {
     backgroundColor: 'active',
     borderColor: 'active',

package/lib/cjs/components/Switch/Switch.js

@@ -13,6 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -24,21 +25,30 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * **Note: Requires a label. It's recommended to use `SwitchField` for a complete solution.**
  */var Switch = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var inputProps = props.inputProps;
+  var inputProps = props.inputProps,
+    isSelected = props.isSelected;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
+      isSelected: isSelected
+    }),
+    classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    className: classNames,
     variant: "forms.switch.container"
   }, props), (0, _react2.jsx)(_reactAria.VisuallyHidden, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "input"
   }, inputProps, {
     ref: ref
   }))), (0, _react2.jsx)(_Box["default"], {
+    className: classNames,
     variant: "forms.switch.thumbContainer"
   }, (0, _react2.jsx)(_Box["default"], {
+    className: classNames,
     variant: "forms.switch.thumb"
   })));
 });
 Switch.propTypes = {
-  inputProps: _propTypes["default"].shape({})
+  inputProps: _propTypes["default"].shape({}),
+  isSelected: _propTypes["default"].bool
 };
 Switch.displayName = 'Switch';
 var _default = Switch;

package/lib/cjs/components/Switch/Switch.styles.js

@@ -58,7 +58,7 @@ var thumb = {
   transitionTimingFunction: 'ease-out',
   transitionDuration: '0.1s',
   transform: 'translateX(0)',
-  'label.is-selected &': {
+  '&.is-selected': {
     transform: 'translateX(20px)',
     borderColor: 'active'
   }

package/lib/cjs/components/SwitchField/SwitchField.js

@@ -61,8 +61,9 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       'aria-label': others['aria-label'] || 'switch-field'
     }), state, switchRef),
     inputProps = _useSwitch.inputProps;
+  var isSelected = (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false;
   var statusClasses = {
-    isSelected: (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false
+    isSelected: isSelected
   };
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({
       statusClasses: statusClasses
@@ -77,7 +78,10 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     'aria-controls': others['aria-controls'],
     'aria-errormessage': others['aria-errormessage']
   };
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps, {
+    alignSelf: "top",
+    alignItems: "start"
+  }), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
     variant: "forms.switch.label"
   }, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, fieldControlWrapperProps, {
     sx: _objectSpread(_objectSpread({}, fieldControlWrapperProps.sx), {}, {
@@ -85,6 +89,7 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     })
   }), (0, _react2.jsx)(_.Switch, (0, _extends2["default"])({
     ref: switchRef,
+    isSelected: isSelected,
     inputProps: fieldControlInputProps,
     name: name
   }, unhandledAriaProps, (0, _omit["default"])(others, 'data-pendo-id', 'aria-label')))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {

package/lib/cjs/components/TableBase/TableBase.d.ts

@@ -1,10 +1,4 @@
 import React from 'react';
-import type { TableBaseProps, TableCellProps, TableCheckboxCellProps, TableColumnHeaderProps, TableHeaderRowProps, TableRowGroupProps, TableRowProps } from '../../types/tableBase';
+import type { TableBaseProps } from '../../types/tableBase';
 declare const TableBase: React.ForwardRefExoticComponent<TableBaseProps<object> & React.RefAttributes<HTMLTableElement>>;
 export default TableBase;
-export declare const TableRowGroup: React.ForwardRefExoticComponent<TableRowGroupProps & React.RefAttributes<HTMLTableSectionElement>>;
-export declare function TableHeaderRow<T>(props: TableHeaderRowProps<T>): React.JSX.Element;
-export declare function TableColumnHeader<T>(props: TableColumnHeaderProps<T>): React.JSX.Element;
-export declare function TableRow<T>(props: TableRowProps<T>): React.JSX.Element;
-export declare function TableCell<T>(props: TableCellProps<T>): React.JSX.Element;
-export declare function TableCheckboxCell<T>(props: TableCheckboxCellProps<T>): React.JSX.Element;

package/lib/cjs/components/TableBase/TableBase.js

@@ -14,12 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableCell = TableCell;
-exports.TableCheckboxCell = TableCheckboxCell;
-exports.TableColumnHeader = TableColumnHeader;
-exports.TableHeaderRow = TableHeaderRow;
-exports.TableRow = TableRow;
-exports["default"] = exports.TableRowGroup = void 0;
+exports["default"] = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -36,8 +31,9 @@ var _table2 = require("@react-stately/table");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
-var _excluded = ["caption", "selectionMode", "selectionBehavior", "tableBodyProps", "hasSelectionCheckboxes", "isStickyHeader"],
-  _excluded2 = ["type", "children", "hasCaption", "className", "isSticky"];
+var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className"],
+  _excluded2 = ["caption"],
+  _excluded3 = ["type", "children", "className", "isSticky"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -47,11 +43,15 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var caption = props.caption,
     selectionMode = props.selectionMode,
     selectionBehavior = props.selectionBehavior,
-    tableBodyProps = props.tableBodyProps,
     hasSelectionCheckboxes = props.hasSelectionCheckboxes,
     _props$isStickyHeader = props.isStickyHeader,
     isStickyHeader = _props$isStickyHeader === void 0 ? false : _props$isStickyHeader,
+    className = props.className,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var tableRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var headerRef = (0, _react.useRef)(null);
+  var scrollRef = (0, _react.useRef)(null);
+  var bodyRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     tableWidth = _useState2[0],
@@ -59,11 +59,9 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _table2.useTableState)(_objectSpread(_objectSpread({}, props), {}, {
     showSelectionCheckboxes: hasSelectionCheckboxes || selectionMode === 'multiple' && selectionBehavior !== 'replace'
   }));
-  var tableRef = (0, _hooks.useLocalOrForwardRef)(ref);
-  var bodyRef = (0, _react.useRef)(null);
   var collection = state.collection;
   var _useTable = (0, _table.useTable)(_objectSpread(_objectSpread({}, props), {}, {
-      scrollRef: bodyRef
+      scrollRef: scrollRef
     }), state, tableRef),
     gridProps = _useTable.gridProps;
   var getDefaultWidth = (0, _react.useCallback)(function (node) {
@@ -74,9 +72,9 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, []);
   var getDefaultMinWidth = (0, _react.useCallback)(function (node) {
     if (node.props.isSelectionCell) {
-      return 50;
+      return 70;
     }
-    return 70;
+    return 100;
   }, []);
   var layoutState = (0, _table2.useTableColumnResizeState)({
     getDefaultWidth: getDefaultWidth,
@@ -94,28 +92,31 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return setTableWidth(tableRef.current.clientWidth);
     }
   });
-  return (0, _react2.jsx)(_.Card, {
-    variant: "cards.tableWrapper"
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      'has-caption': !!caption
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_.Box, {
+    ref: scrollRef
   }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "table",
+    display: "table",
     variant: "tableBase.container",
+    className: classNames,
     ref: tableRef
-  }, gridProps, others), caption && (0, _react2.jsx)(_.Box, {
-    as: "caption",
-    display: "table-caption",
-    variant: "tableBase.caption",
-    textAlign: "left"
-  }, caption), (0, _react2.jsx)(TableRowGroup, {
+  }, gridProps, others), caption && (0, _react2.jsx)(TableCaption, {
+    caption: caption
+  }), (0, _react2.jsx)(TableRowGroup, {
+    ref: headerRef,
     type: "thead",
-    hasCaption: !!caption,
     isSticky: isStickyHeader
   }, (0, _map["default"])(_context = collection.headerRows).call(_context, function (headerRow) {
-    var _context2, _state$collection$get, _state$collection;
+    var _context2;
     return (0, _react2.jsx)(TableHeaderRow, {
       key: headerRow.key,
       item: headerRow,
       state: state
-    }, (0, _map["default"])(_context2 = (0, _from["default"])(((_state$collection$get = (_state$collection = state.collection).getChildren) === null || _state$collection$get === void 0 ? void 0 : _state$collection$get.call(_state$collection, headerRow.key)) || [])).call(_context2, function (column) {
+    }, (0, _map["default"])(_context2 = (0, _from["default"])(headerRow.childNodes)).call(_context2, function (column) {
       return column.props.isSelectionCell ? (0, _react2.jsx)(TableSelectAllCell, {
         key: column.key,
         column: column,
@@ -131,24 +132,24 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   })), (0, _react2.jsx)(TableRowGroup, (0, _extends2["default"])({
     ref: bodyRef,
     type: "tbody"
-  }, tableBodyProps), collection.size === 0 && (0, _react2.jsx)(_.Box, {
+  }, collection.body.props), collection.size === 0 && (0, _react2.jsx)(_.Box, {
+    as: "tr",
     role: "row",
     key: "loading",
     "data-testid": "loading",
-    as: "tr",
     alignItems: "center",
     justifyContent: "center",
     px: "lg",
     py: "md"
   }, (0, _react2.jsx)(_.Loader, {
     color: "active"
-  })), (0, _map["default"])(_context3 = (0, _from["default"])(collection)).call(_context3, function (row) {
+  })), (0, _map["default"])(_context3 = (0, _from["default"])(collection.body.childNodes)).call(_context3, function (row) {
     var _context4;
     return (0, _react2.jsx)(TableRow, {
       key: row.key,
       item: row,
       state: state
-    }, (0, _map["default"])(_context4 = (0, _from["default"])(state.collection.getChildren(row.key))).call(_context4, function (cell) {
+    }, (0, _map["default"])(_context4 = (0, _from["default"])(collection.getChildren(row.key))).call(_context4, function (cell) {
       return cell.props.isSelectionCell ? (0, _react2.jsx)(TableCheckboxCell, {
         key: cell.key,
         cell: cell,
@@ -163,30 +164,40 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }));
   }))));
 });
-var _default = TableBase;
-exports["default"] = _default;
+var TableCaption = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var caption = props.caption,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+  if (!caption) {
+    return null;
+  }
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "caption",
+    display: "table-caption",
+    ref: ref,
+    variant: "tableBase.caption",
+    textAlign: "left"
+  }, others), caption);
+});
 var TableRowGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var type = props.type,
     children = props.children,
-    hasCaption = props.hasCaption,
     className = props.className,
     isSticky = props.isSticky,
-    others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded3);
   var _useTableRowGroup = (0, _table.useTableRowGroup)(),
     rowGroupProps = _useTableRowGroup.rowGroupProps;
-  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
-      hasCaption: hasCaption,
+  var _useStatusClasses2 = (0, _hooks.useStatusClasses)(className, {
       isSticky: isSticky && type === 'thead'
     }),
-    classNames = _useStatusClasses.classNames;
+    classNames = _useStatusClasses2.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    ref: ref,
     as: type,
+    display: type === 'thead' ? 'table-header-group' : 'table-row-group',
+    ref: ref,
     className: classNames,
     variant: "tableBase.".concat(type)
   }, rowGroupProps, others), children);
 });
-exports.TableRowGroup = TableRowGroup;
 function TableHeaderRow(props) {
   var item = props.item,
     state = props.state,
@@ -198,7 +209,7 @@ function TableHeaderRow(props) {
     rowProps = _useTableHeaderRow.rowProps;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "tr",
-    isRow: true
+    display: "table-row"
   }, rowProps, {
     ref: ref
   }), children);
@@ -232,22 +243,24 @@ function TableColumnHeader(props) {
       name: (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending' ? 'Sort ascending' : 'Sort descending'
     }
   });
-  var _useStatusClasses2 = (0, _hooks.useStatusClasses)(className, {
+  var _useStatusClasses3 = (0, _hooks.useStatusClasses)(className, {
       isFocused: isFocusVisible
     }),
-    classNames = _useStatusClasses2.classNames;
+    classNames = _useStatusClasses3.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    isRow: true,
-    ref: ref,
     as: "th",
+    display: "table-cell",
+    ref: ref,
     variant: "tableBase.head",
     className: classNames,
-    alignItems: "center",
     sx: _objectSpread({
-      gap: 'sm',
       width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
     }, column.props.sx)
-  }, (0, _utils.mergeProps)(columnHeaderProps, focusProps, column.props)), column.rendered, allowsSorting && sortIcon);
+  }, (0, _utils.mergeProps)(columnHeaderProps, focusProps, column.props)), (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    gap: "sm",
+    alignItems: "center"
+  }, (0, _react2.jsx)(_.Text, null, column.rendered), allowsSorting && sortIcon));
 }
 function TableRow(props) {
   var item = props.item,
@@ -272,17 +285,17 @@ function TableRow(props) {
     }),
     pressProps = _usePress.pressProps,
     isPressed = _usePress.isPressed;
-  var _useStatusClasses3 = (0, _hooks.useStatusClasses)(className, {
+  var _useStatusClasses4 = (0, _hooks.useStatusClasses)(className, {
       isSelected: isSelected,
       isHovered: isHovered,
       isPressed: isPressed,
       isFocused: isFocusVisible,
       isDisabled: isDisabled
     }),
-    classNames = _useStatusClasses3.classNames;
+    classNames = _useStatusClasses4.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "tr",
-    isRow: true,
+    display: "table-row",
     className: classNames,
     variant: "tableBase.row"
   }, (0, _utils.mergeProps)(rowProps, focusProps, hoverProps, pressProps), {
@@ -302,12 +315,13 @@ function TableCell(props) {
   var _useFocusRing3 = (0, _focus.useFocusRing)(),
     isFocusVisible = _useFocusRing3.isFocusVisible,
     focusProps = _useFocusRing3.focusProps;
-  var _useStatusClasses4 = (0, _hooks.useStatusClasses)(className, {
+  var _useStatusClasses5 = (0, _hooks.useStatusClasses)(className, {
       isFocused: isFocusVisible
     }),
-    classNames = _useStatusClasses4.classNames;
+    classNames = _useStatusClasses5.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "td",
+    display: "table-cell",
     variant: "tableBase.data",
     ref: ref,
     className: classNames,
@@ -316,27 +330,6 @@ function TableCell(props) {
     }, cell.props.sx)
   }, (0, _utils.mergeProps)(gridCellProps, focusProps, cell.props)), cell.rendered);
 }
-function TableCheckboxCell(props) {
-  var cell = props.cell,
-    state = props.state,
-    layoutState = props.layoutState;
-  var ref = (0, _react.useRef)(null);
-  var _useTableCell2 = (0, _table.useTableCell)({
-      node: cell
-    }, state, ref),
-    gridCellProps = _useTableCell2.gridCellProps;
-  var _useTableSelectionChe = (0, _table.useTableSelectionCheckbox)({
-      key: cell.parentKey
-    }, state),
-    checkboxProps = _useTableSelectionChe.checkboxProps;
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
-    as: "td",
-    variant: "tableBase.data",
-    width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(cell.column.key)
-  }, gridCellProps, {
-    ref: ref
-  }), (0, _react2.jsx)(_.CheckboxField, checkboxProps));
-}
 function TableSelectAllCell(props) {
   var column = props.column,
     state = props.state,
@@ -350,8 +343,11 @@ function TableSelectAllCell(props) {
     checkboxProps = _useTableSelectAllChe.checkboxProps;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "th",
+    display: "table-cell",
     variant: "tableBase.head",
-    width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
+    sx: {
+      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
+    }
   }, columnHeaderProps, {
     ref: ref
   }), state.selectionManager.selectionMode === 'single' ? (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, checkboxProps['aria-label']) : (0, _react2.jsx)(_.CheckboxField, (0, _extends2["default"])({
@@ -359,4 +355,30 @@ function TableSelectAllCell(props) {
       'data-testid': 'select-all-checkbox'
     }
   }, checkboxProps)));
-}
+}
+function TableCheckboxCell(props) {
+  var cell = props.cell,
+    state = props.state,
+    layoutState = props.layoutState;
+  var ref = (0, _react.useRef)(null);
+  var _useTableCell2 = (0, _table.useTableCell)({
+      node: cell
+    }, state, ref),
+    gridCellProps = _useTableCell2.gridCellProps;
+  var _useTableSelectionChe = (0, _table.useTableSelectionCheckbox)({
+      key: cell.parentKey
+    }, state),
+    checkboxProps = _useTableSelectionChe.checkboxProps;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "td",
+    display: "table-cell",
+    variant: "tableBase.data",
+    sx: _objectSpread({
+      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(cell.column.key)
+    }, cell.props.sx)
+  }, gridCellProps, {
+    ref: ref
+  }), (0, _react2.jsx)(_.CheckboxField, checkboxProps));
+}
+var _default = TableBase;
+exports["default"] = _default;