@pingux/astro 2.129.0 → 2.130.0-alpha.1

package/lib/components/Callout/Callout.styles.js

@@ -1,34 +1,29 @@
-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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-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) { _defineProperty(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; }
+import tShirtSizes from '../../styles/themes/astro/customProperties/tShirtSizes';
 var base = {
   alignItems: 'center',
   border: '1px solid',
   borderColor: 'text.secondary',
   fontSize: 'md',
   p: '15px 12px 15px 0',
-  width: '600px'
+  width: '600px',
+  '&.is-success, > .is-success': {
+    borderColor: 'success.bright'
+  },
+  '&.is-warning, > .is-warning': {
+    borderColor: 'warning.bright'
+  },
+  '&.is-error, > .is-error': {
+    borderColor: 'critical.bright'
+  }
+};
+var icon = {
+  mr: 'md',
+  ml: 'md',
+  minWidth: "".concat(tShirtSizes.md, " !important"),
+  width: "".concat(tShirtSizes.md, " !important"),
+  height: "".concat(tShirtSizes.md, " !important")
 };
-var error = _objectSpread(_objectSpread({}, base), {}, {
-  borderColor: 'critical.bright'
-});
-var success = _objectSpread(_objectSpread({}, base), {}, {
-  borderColor: 'success.bright'
-});
-var warning = _objectSpread(_objectSpread({}, base), {}, {
-  borderColor: 'warning.bright'
-});
 export default {
   base: base,
-  error: error,
-  success: success,
-  warning: warning
+  icon: icon
 };

package/lib/components/Callout/stories/CalloutNextGenComponent.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import LightbulbOutlineIcon from '@pingux/mdi-react/LightbulbOutlineIcon';
+import { Box, Callout, Icon, Text } from '../../..';
+import statuses from '../../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var CalloutNextGenComponent = function CalloutNextGenComponent() {
+  return ___EmotionJSX(Box, {
+    gap: "md"
+  }, ___EmotionJSX(Callout, null, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")), ___EmotionJSX(Callout, {
+    status: statuses.SUCCESS
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")), ___EmotionJSX(Callout, {
+    status: statuses.WARNING
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")), ___EmotionJSX(Callout, {
+    status: statuses.ERROR
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")), ___EmotionJSX(Callout, {
+    status: statuses.SUCCESS,
+    icon: ___EmotionJSX(Icon, {
+      icon: LightbulbOutlineIcon,
+      size: "sm",
+      color: "success.bright",
+      mr: "md"
+    })
+  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat.")));
+};

package/lib/components/Callout/stories/NextGenCallout.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../..';
+import { CalloutNextGenComponent } from './CalloutNextGenComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Callout'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(CalloutNextGenComponent, null));
+};

package/lib/components/Callout/stories/NextGenDarkCallout.chomatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenDarkTheme } from '../../..';
+import { CalloutNextGenComponent } from './CalloutNextGenComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Dark Callout'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenDarkTheme]
+  }, ___EmotionJSX(CalloutNextGenComponent, null));
+};

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);
+}

package/lib/components/TableBase/TableBase.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Table/Table" />
+
+# Table
+
+Data tables display information in a grid-like format of rows and columns. 
+They organize information in a way that’s easy to scan so that users can look for patterns and develop insights from data. 
+
+Column header names describe the type of content displayed in each column. 
+Each row contains data related to a single entity.
+
+Tables should:
+- Have consistently aligned content.
+- Use multiple heading rows for higher-level grouping of the columns.
+- Use column dividers sparingly.
+
+Tables shouldn’t use different indicators to represent empty fields.
+
+This basic component is rendered as an HTML `<table>`, which accepts the `<TableBody>` component and the `<TableHead>` as children.
+
+### Required Components
+
+This component requires these additional components: 
+
+- TableCaption
+- TableHead
+- TableRow
+- TableCell
+- TableBody

package/lib/components/TableBase/TableBase.stories.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Badge, Card, Cell, Column, Row, TableBase, TBody, THead } from '../..';
+import { items } from '../../utils/devUtils/constants/items';
+import TableReadme from './TableBase.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/Table',
+  component: TableBase,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TableReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  }
+};
+var headers = [{
+  key: 'type',
+  name: 'Type'
+}, {
+  key: 'date',
+  name: 'Date'
+}, {
+  key: 'additional_grant',
+  name: 'Additional Grant'
+}, {
+  key: 'total_grant',
+  name: 'Total Grant'
+}];
+var objects = [{
+  id: 1,
+  type: 'Lorem ipsum',
+  date: '2020-06-12',
+  additional_grant: '+25,000',
+  total_grant: '25,000'
+}, {
+  id: 2,
+  type: 'Lorem ipsum',
+  date: '2020-10-01',
+  additional_grant: '+25,000',
+  total_grant: '50,000'
+}, {
+  id: 3,
+  type: 'Lorem ipsum',
+  date: '2021-01-01',
+  additional_grant: '+25,000',
+  total_grant: '75,000'
+}];
+export var Default = function Default() {
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
+    caption: "Lorem ipsum",
+    "aria-label": "table"
+  }, ___EmotionJSX(THead, {
+    columns: headers
+  }, function (column) {
+    return ___EmotionJSX(Column, {
+      key: column.key
+    }, column.name);
+  }), ___EmotionJSX(TBody, {
+    items: objects
+  }, function (item) {
+    return ___EmotionJSX(Row, {
+      key: item.id
+    }, function (columnKey) {
+      return ___EmotionJSX(Cell, null, item[columnKey]);
+    });
+  })));
+};
+export var Customization = function Customization() {
+  var statusVariant = {
+    'Pending': 'warningStatusBadge',
+    'Failed': 'criticalStatusBadge',
+    'Rejected': 'criticalStatusBadge',
+    'Active': 'healthyStatusBadge',
+    'Inactive': 'secondaryStatusBadge'
+  };
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
+    "aria-label": "table"
+  }, ___EmotionJSX(THead, null, ___EmotionJSX(Column, {
+    width: 70
+  }, "#"), ___EmotionJSX(Column, null, "Name"), ___EmotionJSX(Column, null, "Email"), ___EmotionJSX(Column, null, "Status"), ___EmotionJSX(Column, null, "Bio")), ___EmotionJSX(TBody, {
+    items: items
+  }, function (item) {
+    return ___EmotionJSX(Row, {
+      key: item.email
+    }, ___EmotionJSX(Cell, null, item.id), ___EmotionJSX(Cell, {
+      noWrap: true
+    }, item.firstName, ' ', item.lastName), ___EmotionJSX(Cell, {
+      noWrap: true
+    }, item.email), ___EmotionJSX(Cell, null, ___EmotionJSX(Badge, {
+      variant: statusVariant[item.status],
+      label: item.status
+    })), ___EmotionJSX(Cell, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!"));
+  })));
+};

package/lib/components/TableBase/TableBase.styles.js

@@ -0,0 +1,72 @@
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _defineProperty(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; }
+import { text } from '../Text/Text.styles';
+var defaultFocus = {
+  outline: '1px',
+  outlineStyle: 'solid',
+  outlineColor: 'focus',
+  outlineOffset: '-1px'
+};
+var container = {
+  width: '100%',
+  borderSpacing: '0',
+  borderCollapse: 'collapse'
+};
+var caption = {
+  fontFamily: 'standard',
+  fontSize: 'lg',
+  fontWeight: '2',
+  p: 'sm',
+  textAlign: 'left'
+};
+var thead = {};
+var head = _objectSpread(_objectSpread({}, text.label), {}, {
+  fontWeight: 500,
+  textAlign: 'left',
+  p: 'sm',
+  cursor: 'default',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+var tbody = {
+  borderTop: '1px solid',
+  borderTopColor: 'neutral.40',
+  borderBottom: '1px solid',
+  borderBottomColor: 'neutral.80'
+};
+var row = {
+  '&:nth-of-type(odd) ': {
+    bg: 'neutral.95'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    // This is the hover state for the row
+  },
+  '&.is-selected': {
+    // This is the selected state for the row
+  }
+};
+var data = _objectSpread(_objectSpread({}, text.tableData), {}, {
+  p: 'sm',
+  '&.no-wrap': {
+    whiteSpace: 'nowrap'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+export default {
+  thead: thead,
+  tbody: tbody,
+  caption: caption,
+  container: container,
+  data: data,
+  head: head,
+  row: row
+};