@pingux/astro 2.129.0-alpha.1 → 2.129.0-alpha.3

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -1328,5 +1328,136 @@ declare const _default: {
             color: string;
         };
     };
+    table: {
+        container: {
+            overflow: string;
+        };
+        caption: {
+            px: string;
+            color: string;
+            borderBottom: string;
+            borderBottomColor: string;
+        };
+        head: {
+            px: string;
+            py: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+            lineHeight: string;
+        };
+        body: {
+            borderTopColor: string;
+            borderBottom: string;
+            backgroundColor: string;
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+            '&& > tr:not(:last-child)': {
+                borderBottom: string;
+                borderBottomColor: string;
+            };
+            '&& > tr:nth-of-type(odd) ': {
+                backgroundColor: string;
+            };
+            '&& > tr:last-child': {
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+            };
+        };
+        data: {
+            py: string;
+            fontWeight: string;
+            px: string;
+            fontSize: string;
+            color: string;
+            lineHeight: string;
+        };
+    };
+    tableBase: {
+        caption: {
+            backgroundColor: string;
+            px: string;
+            color: string;
+            borderBottom: string;
+            borderBottomColor: string;
+            borderTopLeftRadius: string;
+            borderTopRightRadius: string;
+        };
+        row: {
+            borderBottom: string;
+            borderBottomColor: string;
+            '&.is-focused': {
+                outlineOffset: string;
+                outline: string;
+                outlineColor: string;
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            '&:nth-of-type(odd)': {
+                bg: string;
+                '&.is-hovered': {
+                    bg: string;
+                };
+            };
+        };
+        thead: {
+            backgroundColor: string;
+            '&:not(.has-caption)': {
+                '& > tr:first-child': {
+                    borderTopLeftRadius: string;
+                    borderTopRightRadius: string;
+                    '& > th:first-of-type': {
+                        borderTopLeftRadius: string;
+                    };
+                    '& > th:last-of-type': {
+                        borderTopRightRadius: string;
+                    };
+                };
+            };
+        };
+        head: {
+            px: string;
+            py: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+            lineHeight: string;
+            '&.is-focused': {
+                outlineOffset: string;
+                outline: string;
+                outlineColor: string;
+            };
+        };
+        tbody: {
+            borderTopColor: string;
+            borderBottom: string;
+            backgroundColor: string;
+            '& > tr:last-child': {
+                borderBottom: string;
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+                '& > td:first-of-type': {
+                    borderBottomLeftRadius: string;
+                };
+                '& > td:last-of-type': {
+                    borderBottomRightRadius: string;
+                };
+            };
+        };
+        data: {
+            py: string;
+            fontWeight: string;
+            px: string;
+            fontSize: string;
+            color: string;
+            lineHeight: string;
+            '&.is-focused': {
+                outlineOffset: string;
+                outline: string;
+                outlineColor: string;
+            };
+        };
+    };
 };
 export default _default;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -31,6 +31,8 @@ var _prompt = _interopRequireDefault(require("./prompt"));
 var _response = _interopRequireDefault(require("./response"));
 var _suggestion = _interopRequireDefault(require("./suggestion"));
 var _suggestions = _interopRequireDefault(require("./suggestions"));
+var _table = require("./table");
+var _tableBase = require("./tableBase");
 var _tabs = require("./tabs");
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 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; }
@@ -389,6 +391,8 @@ var _default = {
   rockerButton: rockerButton,
   tooltip: _tooltip["default"],
   footer: _footer.footer,
-  loader: loader
+  loader: loader,
+  table: _table.table,
+  tableBase: _tableBase.tableBase
 };
 exports["default"] = _default;

package/lib/cjs/styles/variants/variants.js

@@ -59,6 +59,7 @@ var _Skeleton = _interopRequireDefault(require("../../components/Skeleton/Skelet
 var _Slider = _interopRequireDefault(require("../../components/SliderField/Slider.styles"));
 var _Stepper = _interopRequireDefault(require("../../components/Stepper/Stepper.styles"));
 var _Table = _interopRequireDefault(require("../../components/Table/Table.styles"));
+var _TableBase = _interopRequireDefault(require("../../components/TableBase/TableBase.styles"));
 var tab = _interopRequireWildcard(require("../../components/Tabs/Tabs.style"));
 var _TimeField = _interopRequireDefault(require("../../components/TimeField/TimeField.styles"));
 var _TimeZone = _interopRequireDefault(require("../../components/TimeZonePicker/TimeZone.styles"));
@@ -68,7 +69,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-var _default = _objectSpread({
+var _default = _objectSpread(_objectSpread({
   accordion: _Accordion["default"],
   accordionGrid: _AccordionGrid["default"],
   box: _Box["default"],
@@ -116,5 +117,7 @@ var _default = _objectSpread({
   timeZone: _TimeZone["default"],
   tooltip: _Tooltip["default"],
   treeView: _TreeView["default"]
-}, tab);
+}, tab), {}, {
+  tableBase: _TableBase["default"]
+});
 exports["default"] = _default;

package/lib/cjs/types/cell.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { StyleProps } from './shared';
+declare module '@react-types/table' {
+    interface CellProps extends StyleProps {
+        /** Whether the cell should not wrap its contents. */
+        noWrap?: boolean;
+        /** The contents of the cell. */
+        children: React.ReactNode;
+        /** A string representation of the cell's contents, used for features like typeahead. */
+        textValue?: string;
+    }
+}

package/lib/cjs/types/cell.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/tableBase.d.ts

@@ -0,0 +1,45 @@
+import { Key, ReactNode } from 'react';
+import type { TableState } from '@react-stately/table';
+import type { GridNode } from '@react-types/grid';
+import type { Node } from '@react-types/shared';
+import { TestingAttributes } from './shared/test';
+import { BoxProps } from './box';
+import { DOMAttributes } from './shared';
+export interface TableBaseProp extends BoxProps, TestingAttributes, DOMAttributes {
+}
+export interface TableBaseProps extends TableBaseProp {
+    'aria-label'?: string;
+    selectedKeys?: Key[];
+    defaultSelectedKeys?: Key[];
+    selectionMode?: 'single' | 'none';
+    'data-testid'?: string;
+    caption?: ReactNode | string;
+    tableBodyProps?: Record<string, unknown>;
+}
+export interface TableRowGroupProps extends TableBaseProp {
+    type: 'thead' | 'tbody' | 'tfoot';
+    children: ReactNode;
+    hasCaption?: boolean;
+}
+export interface TableHeaderRowProps extends TableBaseProp {
+    item: Node<object>;
+    state: TableState<object>;
+    children: ReactNode;
+    className?: string;
+}
+export interface TableColumnHeaderProps extends TableBaseProp {
+    column: GridNode<object>;
+    state: TableState<object>;
+    className?: string;
+}
+export interface TableRowProps extends TableBaseProp {
+    item: Node<object>;
+    state: TableState<object>;
+    children: ReactNode;
+    className?: string;
+}
+export interface TableCellProps extends TableBaseProp {
+    cell: GridNode<object>;
+    state: TableState<object>;
+    className?: string;
+}

package/lib/cjs/types/tableBase.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/utils/devUtils/constants/items.d.ts

@@ -0,0 +1,10 @@
+import { Key } from 'react';
+interface Item {
+    id: Key;
+    email: string;
+    firstName: string;
+    lastName: string;
+    status: 'Pending' | 'Active' | 'Failed' | 'Rejected';
+}
+export declare const items: Item[];
+export {};

package/lib/cjs/utils/devUtils/constants/items.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.items = void 0;
+var items = [{
+  id: '1',
+  email: 'dburkitt5@columbia.edu',
+  firstName: 'Nicola',
+  lastName: 'Burkitt',
+  status: 'Failed'
+}, {
+  id: '2',
+  email: 'idixie2@elegantthemes.com',
+  firstName: 'Cacilia',
+  lastName: 'Dixie',
+  status: 'Active'
+}, {
+  id: '3',
+  email: 'dfowler0@rambler.ru',
+  firstName: 'Stavro',
+  lastName: 'Fowler',
+  status: 'Active'
+}, {
+  id: '4',
+  email: 'jgolde8@jimdo.com',
+  firstName: 'Celisse',
+  lastName: 'Golde',
+  status: 'Active'
+}, {
+  id: '5',
+  email: 'shearst9@answers.com',
+  firstName: 'Jeth',
+  lastName: 'Hearst',
+  status: 'Pending'
+}, {
+  id: '6',
+  email: 'ajinaa@mapquest.com',
+  firstName: 'Kaycee',
+  lastName: 'Jina',
+  status: 'Active'
+}, {
+  id: '7',
+  email: 'vmalster4@biblegateway.com',
+  firstName: 'Lorry',
+  lastName: 'Malster',
+  status: 'Pending'
+}, {
+  id: '8',
+  email: 'yphipp6@yellowpages.com',
+  firstName: 'Stanley',
+  lastName: 'Phipp',
+  status: 'Active'
+}, {
+  id: '9',
+  email: 'mskilbeck3@bbc.co.uk',
+  firstName: 'Gradey',
+  lastName: 'Skilbeck',
+  status: 'Pending'
+}, {
+  id: '10',
+  email: 'dstebbing1@msu.edu',
+  firstName: 'Marnia',
+  lastName: 'Stebbing',
+  status: 'Rejected'
+}, {
+  id: '11',
+  email: 'lsterley7@lulu.com',
+  firstName: 'Joshua',
+  lastName: 'Sterley',
+  status: 'Pending'
+}, {
+  id: '12',
+  email: 'luttleyb@hugedomains.com',
+  firstName: 'Jarrod',
+  lastName: 'Uttley',
+  status: 'Active'
+}, {
+  id: '13',
+  email: 'lidelc@yelp.com',
+  firstName: 'Andromache',
+  lastName: 'Idel',
+  status: 'Pending'
+}];
+exports.items = items;

package/lib/components/Card/Card.styles.js

@@ -85,6 +85,10 @@ var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
     }
   }
 });
+var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
+  padding: 0,
+  boxShadow: 'none'
+});
 export default {
   container: container,
   interactive: interactive,
@@ -92,5 +96,6 @@ export default {
   footer: footer,
   flat: flat,
   body: body,
-  activeCard: activeCard
+  activeCard: activeCard,
+  tableWrapper: tableWrapper
 };

package/lib/components/RockerButtonGroup/RockerButtonGroup.mdx

@@ -10,7 +10,7 @@ This component should:
 - Be used for a single-item selection.
 - Contain concise labels.
 
-It shouldn’t be used as a replacement for RadioButton.
+It should not be used as a replacement for RadioButton.
 
 ### Required Components
 

package/lib/components/Table/Table.stories.js

@@ -2,7 +2,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableRow, Text } from '../../index';
+import { Card, Table, TableBody, TableCaption, TableCell, TableHead, TableRow } from '../../index';
 import TableReadme from './Table.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -46,10 +46,9 @@ var objects = [{
   total_grant: '75,000'
 }];
 export var Default = function Default(args) {
-  return ___EmotionJSX(Table, args, ___EmotionJSX(TableCaption, null, ___EmotionJSX(Text, {
-    fontWeight: 3,
-    fontSize: "lg"
-  }, caption)), ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(Table, args, ___EmotionJSX(TableCaption, null, caption), ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
     key: "head"
   }, _mapInstanceProperty(headers).call(headers, function (head) {
     return ___EmotionJSX(TableCell, {
@@ -65,5 +64,5 @@ export var Default = function Default(args) {
         key: value
       }, value);
     }));
-  })));
+  }))));
 };

package/lib/components/Table/Table.styles.js

@@ -14,18 +14,18 @@ var head = _objectSpread(_objectSpread({}, text.label), {}, {
   fontWeight: 500,
   width: '100%',
   flexDirection: 'row !important',
-  p: '10px'
+  p: 'sm'
 });
 var data = _objectSpread(_objectSpread({}, text.tableData), {}, {
   width: '100%',
-  p: '10px'
+  p: 'sm'
 });
 var body = {
   borderTop: '1px solid',
   borderTopColor: 'neutral.40',
   borderBottom: '1px solid',
   borderBottomColor: 'neutral.80',
-  '&& > tr:nth-of-type(odd) ': {
+  '& > tr:nth-of-type(odd)': {
     backgroundColor: 'neutral.95'
   }
 };
@@ -37,9 +37,11 @@ var container = {
   width: '100%'
 };
 var caption = {
-  textAlign: 'left',
-  marginBottom: 'xs',
-  lineHeight: '21px'
+  fontFamily: 'standard',
+  fontSize: 'lg',
+  fontWeight: '2',
+  p: 'sm',
+  textAlign: 'left'
 };
 export default {
   body: body,

package/lib/components/TableBase/TableBase.js

@@ -0,0 +1,221 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["caption", "selectionMode", "selectedKeys", "defaultSelectedKeys", "tableBodyProps"],
+  _excluded2 = ["type", "children", "hasCaption", "className"];
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { forwardRef, useRef } from 'react';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover, usePress } from '@react-aria/interactions';
+import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup } from '@react-aria/table';
+import { mergeProps } from '@react-aria/utils';
+import { useTableState } from '@react-stately/table';
+import { Box } from '../..';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context, _context3;
+  var caption = props.caption,
+    selectionMode = props.selectionMode,
+    selectedKeys = props.selectedKeys,
+    _props$defaultSelecte = props.defaultSelectedKeys,
+    defaultSelectedKeys = _props$defaultSelecte === void 0 ? [] : _props$defaultSelecte,
+    tableBodyProps = props.tableBodyProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var state = useTableState(_objectSpread(_objectSpread({}, props), {}, {
+    selectionMode: selectionMode,
+    selectedKeys: selectedKeys,
+    defaultSelectedKeys: selectedKeys ? undefined : defaultSelectedKeys
+  }));
+  var tableRef = useLocalOrForwardRef(ref);
+  var bodyRef = useRef(null);
+  var collection = state.collection;
+  var _useTable = useTable(_objectSpread(_objectSpread({}, props), {}, {
+      'aria-describedby': props['aria-describedby'] || 'table-caption',
+      scrollRef: bodyRef
+    }), state, tableRef),
+    gridProps = _useTable.gridProps;
+  return ___EmotionJSX(Box, _extends({
+    as: "table",
+    display: "table",
+    variant: "tableBase.container",
+    ref: tableRef
+  }, gridProps, others), caption && ___EmotionJSX(Box, {
+    as: "caption",
+    display: "table-caption",
+    variant: "tableBase.caption",
+    textAlign: "left",
+    id: props['aria-describedby'] || 'table-caption'
+  }, caption), ___EmotionJSX(TableRowGroup, {
+    type: "thead",
+    hasCaption: !!caption
+  }, _mapInstanceProperty(_context = collection.headerRows).call(_context, function (headerRow) {
+    var _context2, _state$collection$get, _state$collection;
+    return ___EmotionJSX(TableHeaderRow, {
+      key: headerRow.key,
+      item: headerRow,
+      state: state
+    }, _mapInstanceProperty(_context2 = _Array$from(((_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) {
+      return ___EmotionJSX(TableColumnHeader, {
+        key: column.key,
+        column: column,
+        state: state
+      });
+    }));
+  })), ___EmotionJSX(TableRowGroup, _extends({
+    ref: bodyRef,
+    type: "tbody"
+  }, tableBodyProps), _mapInstanceProperty(_context3 = _Array$from(collection)).call(_context3, function (row) {
+    var _context4;
+    return ___EmotionJSX(TableRow, {
+      key: row.key,
+      item: row,
+      state: state
+    }, _mapInstanceProperty(_context4 = _Array$from(state.collection.getChildren(row.key))).call(_context4, function (cell) {
+      return ___EmotionJSX(TableCell, {
+        key: cell.key,
+        cell: cell,
+        state: state
+      });
+    }));
+  })));
+});
+export default TableBase;
+export var TableRowGroup = /*#__PURE__*/forwardRef(function (props, ref) {
+  var type = props.type,
+    children = props.children,
+    hasCaption = props.hasCaption,
+    className = props.className,
+    others = _objectWithoutProperties(props, _excluded2);
+  var _useTableRowGroup = useTableRowGroup(),
+    rowGroupProps = _useTableRowGroup.rowGroupProps;
+  var _useStatusClasses = useStatusClasses(className, {
+      hasCaption: hasCaption
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(Box, _extends({
+    ref: ref
+  }, rowGroupProps, {
+    as: type,
+    className: classNames,
+    display: "table-row-group",
+    variant: "tableBase.".concat(type)
+  }, others), children);
+});
+export var TableHeaderRow = function TableHeaderRow(props) {
+  var item = props.item,
+    state = props.state,
+    children = props.children;
+  var ref = useRef(null);
+  var _useTableHeaderRow = useTableHeaderRow({
+      node: item
+    }, state, ref),
+    rowProps = _useTableHeaderRow.rowProps;
+  return ___EmotionJSX(Box, _extends({
+    as: "tr",
+    display: "table-row"
+  }, rowProps, {
+    ref: ref
+  }), children);
+};
+export var TableColumnHeader = function TableColumnHeader(props) {
+  var column = props.column,
+    state = props.state,
+    className = props.className;
+  var ref = useRef(null);
+  var _useTableColumnHeader = useTableColumnHeader({
+      node: column
+    }, state, ref),
+    columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
+  var _useFocusRing = useFocusRing(),
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
+  var _useStatusClasses2 = useStatusClasses(className, {
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses2.classNames;
+  return ___EmotionJSX(Box, _extends({
+    as: "th",
+    display: "table-cell",
+    variant: "tableBase.head",
+    className: classNames
+  }, mergeProps(columnHeaderProps, focusProps), {
+    ref: ref
+  }, column.props), column.rendered);
+};
+export var TableRow = function TableRow(props) {
+  var item = props.item,
+    state = props.state,
+    children = props.children,
+    className = props.className;
+  var ref = useRef(null);
+  var _useTableRow = useTableRow({
+      node: item
+    }, state, ref),
+    rowProps = _useTableRow.rowProps;
+  var isSelected = state.selectionManager.isSelected(item.key);
+  var _useFocusRing2 = useFocusRing(),
+    isFocusVisible = _useFocusRing2.isFocusVisible,
+    focusProps = _useFocusRing2.focusProps;
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = usePress({
+      ref: ref
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
+  var _useStatusClasses3 = useStatusClasses(className, {
+      isSelected: isSelected,
+      isHovered: isHovered,
+      isPressed: isPressed,
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses3.classNames;
+  return ___EmotionJSX(Box, _extends({
+    display: "table-row",
+    as: "tr",
+    className: classNames,
+    variant: "tableBase.row"
+  }, mergeProps(rowProps, focusProps, hoverProps, pressProps), {
+    ref: ref
+  }), children);
+};
+export function TableCell(props) {
+  var _cell$props$noWrap;
+  var cell = props.cell,
+    state = props.state,
+    className = props.className;
+  var ref = useRef(null);
+  var _useTableCell = useTableCell({
+      node: cell
+    }, state, ref),
+    gridCellProps = _useTableCell.gridCellProps;
+  var _useFocusRing3 = useFocusRing(),
+    isFocusVisible = _useFocusRing3.isFocusVisible,
+    focusProps = _useFocusRing3.focusProps;
+  var _useStatusClasses4 = useStatusClasses(className, {
+      isFocused: isFocusVisible,
+      noWrap: (_cell$props$noWrap = cell.props.noWrap) !== null && _cell$props$noWrap !== void 0 ? _cell$props$noWrap : false
+    }),
+    classNames = _useStatusClasses4.classNames;
+  return ___EmotionJSX(Box, _extends({
+    as: "td",
+    display: "table-cell",
+    className: classNames
+  }, mergeProps(gridCellProps, focusProps), {
+    variant: "tableBase.data",
+    ref: ref
+  }, cell.props), cell.rendered);
+}