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

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

package/lib/components/TableBase/TableBase.test.js

@@ -0,0 +1,119 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Cell, Column, Row, TBody, THead } from '../../index';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import TableBase from './TableBase';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-table';
+var defaultProps = {
+  'aria-label': 'table',
+  'data-testid': testId,
+  caption: 'Populations of Countries'
+};
+var headers = [{
+  key: 'country',
+  name: 'Country'
+}, {
+  key: 'population',
+  name: 'Population'
+}, {
+  key: 'continent',
+  name: 'Continent'
+}];
+var objects = [{
+  key: '1',
+  country: 'USA',
+  population: '320,000,000',
+  continent: 'South America',
+  cellProps: {
+    noWrap: true
+  }
+}, {
+  key: '2',
+  country: 'Canada',
+  population: '37,000,000',
+  continent: 'North America'
+}, {
+  key: '3',
+  country: 'China',
+  population: '1,398,000,000',
+  continent: 'Asia'
+}, {
+  key: '4',
+  country: 'France',
+  population: '67,000,000',
+  continent: 'Europe'
+}];
+var getComponent = function getComponent() {
+  return render(___EmotionJSX(TableBase, defaultProps, ___EmotionJSX(THead, {
+    columns: headers
+  }, function (head) {
+    return ___EmotionJSX(Column, {
+      key: head.key
+    }, head.name);
+  }), ___EmotionJSX(TBody, {
+    items: objects
+  }, function (row) {
+    return ___EmotionJSX(Row, {
+      key: row.key
+    }, function (columnKey) {
+      return ___EmotionJSX(Cell, row.cellProps || {}, row[columnKey]);
+    });
+  })));
+};
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(TableBase, _extends({}, defaultProps, props), ___EmotionJSX(THead, {
+      columns: headers
+    }, function (head) {
+      return ___EmotionJSX(Column, {
+        key: head.key
+      }, head.name);
+    }), ___EmotionJSX(TBody, {
+      items: objects
+    }, function (row) {
+      return ___EmotionJSX(Row, {
+        key: row.key
+      }, function (columnKey) {
+        return ___EmotionJSX(Cell, null, row[columnKey]);
+      });
+    }));
+  }
+});
+test('default table', function () {
+  getComponent();
+  var table = screen.getByTestId(testId);
+  expect(table).toBeInTheDocument();
+});
+test('renders caption', function () {
+  getComponent();
+  var caption = screen.getByText(defaultProps.caption);
+  expect(caption).toBeInTheDocument();
+});
+test('renders table headers', function () {
+  getComponent();
+  var headerCells = screen.getAllByRole('columnheader');
+  expect(headerCells).toHaveLength(headers.length);
+  _forEachInstanceProperty(headers).call(headers, function (header) {
+    expect(screen.getByText(header.name)).toBeInTheDocument();
+  });
+});
+test('renders table rows', function () {
+  getComponent();
+  var rows = screen.getAllByRole('row');
+  expect(rows).toHaveLength(objects.length + 1);
+  _forEachInstanceProperty(objects).call(objects, function (object) {
+    expect(screen.getByText(object.country)).toBeInTheDocument();
+    expect(screen.getByText(object.population)).toBeInTheDocument();
+    expect(screen.getByText(object.continent)).toBeInTheDocument();
+  });
+});
+test('renders cell with noWrap prop', function () {
+  getComponent();
+  var cell = screen.getByText('South America');
+  expect(cell).toHaveClass('no-wrap');
+});

package/lib/components/TableBase/index.js

@@ -0,0 +1 @@
+export { default } from './TableBase';

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

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

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

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

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Card, Cell, Column, Row, TableBase, TBody, THead } from '../../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var NextGenTableBase = function NextGenTableBase() {
+  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'
+  }];
+  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 default NextGenTableBase;

package/lib/index.js

@@ -188,6 +188,8 @@ export { default as Tab } from './components/Tab';
 export * from './components/Tab';
 export { default as Table } from './components/Table';
 export * from './components/Table';
+export * from './components/TableBase';
+export { default as TableBase } from './components/TableBase';
 export { default as TableBody } from './components/TableBody';
 export * from './components/TableBody';
 export { default as TableCaption } from './components/TableCaption';
@@ -222,5 +224,4 @@ export { default as NextGenTheme } from './styles/themes/next-gen';
 export { default as OnyxTheme } from './styles/themes/next-gen';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
-export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';
-export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow } from 'react-stately';
+export { Cell, Column, TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, Item, Row, Section, TableBody as TBody, TableHeader as THead, useOverlayTriggerState, useTreeData } from 'react-stately';

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -116,5 +116,27 @@ export default {
         boxShadow: '0 0 0 3px inset #1a73e8'
       }
     }
+  },
+  table: {
+    caption: {
+      color: 'text.secondary'
+    },
+    head: {
+      color: 'text.secondary'
+    },
+    data: {
+      color: 'text.secondary'
+    }
+  },
+  tableBase: {
+    caption: {
+      color: 'text.secondary'
+    },
+    head: {
+      color: 'text.secondary'
+    },
+    data: {
+      color: 'text.secondary'
+    }
   }
 };

package/lib/styles/themes/next-gen/colors/colors.js

@@ -99,7 +99,8 @@ var background = {
   base: 'white',
   secondary: nextGenColors['gray-100'],
   card: nextGenColors['blue-100'],
-  suggestion: '#ecf0f5'
+  suggestion: '#ecf0f5',
+  hover: nextGenColors['gray-100']
 };
 var card = {
   blue: nextGenColors['blue-100'],

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'RockerButtonGroup', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'IconWrapper', 'ComboBoxField', 'CodeView', 'Sticker Sheet', 'NextGen ListViewItem', 'Skeleton', 'TooltipTrigger', 'ListViewItem', 'Pagination', 'Table', 'TableBase'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Badge: ['Status Badge Variants', 'Badge With Left Slot And Icon', 'Callout Badges', 'Removable'],

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

@@ -28,7 +28,8 @@ var interactive = {
   }
 };
 var container = _objectSpread(_objectSpread({}, flat), {}, {
-  p: 'lg'
+  p: 'lg',
+  borderColor: 'border.base'
 });
 var dark = _objectSpread(_objectSpread({}, flat), {}, {
   border: 'none',
@@ -73,6 +74,9 @@ var suggestionRow = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
 var suggestionColumn = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
   display: 'flex'
 });
+var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
+  overflowY: 'hidden'
+});
 export default {
   interactive: interactive,
   dark: dark,
@@ -80,5 +84,6 @@ export default {
   activeCard: activeCard,
   container: container,
   suggestionColumn: suggestionColumn,
-  suggestionRow: suggestionRow
+  suggestionRow: suggestionRow,
+  tableWrapper: tableWrapper
 };

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

@@ -0,0 +1,57 @@
+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; }
+var container = {
+  overflow: 'hidden'
+};
+var caption = {
+  px: 'lg',
+  color: 'text.primary',
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.base'
+};
+var head = {
+  px: 'lg',
+  py: 'sm',
+  fontSize: 'md',
+  fontWeight: '2',
+  color: 'text.primary',
+  lineHeight: 'body'
+};
+var body = {
+  borderTopColor: 'border.base',
+  borderBottom: 'unset',
+  backgroundColor: 'background.base',
+  borderBottomLeftRadius: '16px',
+  borderBottomRightRadius: '16px',
+  '&& > tr:not(:last-child)': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base'
+  },
+  '&& > tr:nth-of-type(odd) ': {
+    backgroundColor: 'background.base'
+  },
+  '&& > tr:last-child': {
+    borderBottomLeftRadius: '16px',
+    borderBottomRightRadius: '16px'
+  }
+};
+var data = _objectSpread(_objectSpread({}, head), {}, {
+  py: 'md',
+  fontWeight: '1'
+});
+export var table = {
+  container: container,
+  caption: caption,
+  head: head,
+  body: body,
+  data: data
+};

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

@@ -0,0 +1,91 @@
+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 { defaultFocus as baseFocus } from './button';
+var borderRadius = '16px';
+var defaultFocus = _objectSpread(_objectSpread({}, baseFocus), {}, {
+  outlineOffset: '-2px'
+});
+var caption = {
+  backgroundColor: 'background.base',
+  px: 'lg',
+  color: 'text.primary',
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.base',
+  borderTopLeftRadius: borderRadius,
+  borderTopRightRadius: borderRadius
+};
+var row = {
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.base',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'background.hover'
+  },
+  '&:nth-of-type(odd)': {
+    bg: 'background.base',
+    '&.is-hovered': {
+      bg: 'background.hover'
+    }
+  }
+};
+var thead = {
+  backgroundColor: 'background.base',
+  '&:not(.has-caption)': {
+    '& > tr:first-child': {
+      borderTopLeftRadius: borderRadius,
+      borderTopRightRadius: borderRadius,
+      '& > th:first-of-type': {
+        borderTopLeftRadius: borderRadius
+      },
+      '& > th:last-of-type': {
+        borderTopRightRadius: borderRadius
+      }
+    }
+  }
+};
+var head = {
+  px: 'lg',
+  py: 'sm',
+  fontSize: 'md',
+  fontWeight: '2',
+  color: 'text.primary',
+  lineHeight: 'body',
+  '&.is-focused': _objectSpread({}, defaultFocus)
+};
+var tbody = {
+  borderTopColor: 'border.base',
+  borderBottom: 'unset',
+  backgroundColor: 'background.base',
+  '& > tr:last-child': {
+    borderBottom: 'unset',
+    borderBottomLeftRadius: borderRadius,
+    borderBottomRightRadius: borderRadius,
+    '& > td:first-of-type': {
+      borderBottomLeftRadius: borderRadius
+    },
+    '& > td:last-of-type': {
+      borderBottomRightRadius: borderRadius
+    }
+  }
+};
+var data = _objectSpread(_objectSpread({}, head), {}, {
+  py: 'md',
+  fontWeight: '1'
+});
+export var tableBase = {
+  caption: caption,
+  row: row,
+  thead: thead,
+  head: head,
+  tbody: tbody,
+  data: data
+};

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

@@ -26,6 +26,8 @@ import prompt from './prompt';
 import response from './response';
 import suggestion from './suggestion';
 import suggestions from './suggestions';
+import { table } from './table';
+import { tableBase } from './tableBase';
 import { menuTab, tab, tabs } from './tabs';
 import tooltip from './tooltip';
 var fieldHelperText = {
@@ -380,5 +382,7 @@ export default {
   rockerButton: rockerButton,
   tooltip: tooltip,
   footer: footer,
-  loader: loader
+  loader: loader,
+  table: table,
+  tableBase: tableBase
 };