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

package/lib/cjs/components/Card/Card.styles.d.ts

@@ -129,5 +129,16 @@ declare const _default: {
         flex: string;
         p: string;
     };
+    tableWrapper: {
+        padding: number;
+        boxShadow: string;
+        display: string;
+        borderRadius: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        flex: string;
+        p: string;
+    };
 };
 export default _default;

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

@@ -93,6 +93,10 @@ var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
     }
   }
 });
+var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
+  padding: 0,
+  boxShadow: 'none'
+});
 var _default = {
   container: container,
   interactive: interactive,
@@ -100,6 +104,7 @@ var _default = {
   footer: footer,
   flat: flat,
   body: body,
-  activeCard: activeCard
+  activeCard: activeCard,
+  tableWrapper: tableWrapper
 };
 exports["default"] = _default;

package/lib/cjs/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/cjs/components/Table/Table.stories.js

@@ -55,10 +55,9 @@ var objects = [{
   total_grant: '75,000'
 }];
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.Table, args, (0, _react2.jsx)(_index.TableCaption, null, (0, _react2.jsx)(_index.Text, {
-    fontWeight: 3,
-    fontSize: "lg"
-  }, caption)), (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
+  return (0, _react2.jsx)(_index.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_index.Table, args, (0, _react2.jsx)(_index.TableCaption, null, caption), (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {
     key: "head"
   }, (0, _map["default"])(headers).call(headers, function (head) {
     return (0, _react2.jsx)(_index.TableCell, {
@@ -74,6 +73,6 @@ var Default = function Default(args) {
         key: value
       }, value);
     }));
-  })));
+  }))));
 };
 exports.Default = Default;

package/lib/cjs/components/Table/Table.styles.d.ts

@@ -4,14 +4,16 @@ declare const _default: {
         borderTopColor: string;
         borderBottom: string;
         borderBottomColor: string;
-        '&& > tr:nth-of-type(odd) ': {
+        '& > tr:nth-of-type(odd)': {
             backgroundColor: string;
         };
     };
     caption: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        p: string;
         textAlign: string;
-        marginBottom: string;
-        lineHeight: string;
     };
     container: {
         width: string;

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

@@ -21,18 +21,18 @@ var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
   fontWeight: 500,
   width: '100%',
   flexDirection: 'row !important',
-  p: '10px'
+  p: 'sm'
 });
 var data = _objectSpread(_objectSpread({}, _Text.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'
   }
 };
@@ -44,9 +44,11 @@ var container = {
   width: '100%'
 };
 var caption = {
-  textAlign: 'left',
-  marginBottom: 'xs',
-  lineHeight: '21px'
+  fontFamily: 'standard',
+  fontSize: 'lg',
+  fontWeight: '2',
+  p: 'sm',
+  textAlign: 'left'
 };
 var _default = {
   body: body,

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

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

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

@@ -0,0 +1,238 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableCell = TableCell;
+exports["default"] = exports.TableRowGroup = exports.TableRow = exports.TableHeaderRow = exports.TableColumnHeader = 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"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _focus = require("@react-aria/focus");
+var _interactions = require("@react-aria/interactions");
+var _table = require("@react-aria/table");
+var _utils = require("@react-aria/utils");
+var _table2 = require("@react-stately/table");
+var _ = require("../..");
+var _hooks = require("../../hooks");
+var _react2 = require("@emotion/react");
+var _excluded = ["caption", "selectionMode", "selectedKeys", "defaultSelectedKeys", "tableBodyProps"],
+  _excluded2 = ["type", "children", "hasCaption", "className"];
+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; }
+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) { (0, _defineProperty2["default"])(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; }
+var TableBase = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var state = (0, _table2.useTableState)(_objectSpread(_objectSpread({}, props), {}, {
+    selectionMode: selectionMode,
+    selectedKeys: selectedKeys,
+    defaultSelectedKeys: selectedKeys ? undefined : defaultSelectedKeys
+  }));
+  var tableRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var bodyRef = (0, _react.useRef)(null);
+  var collection = state.collection;
+  var _useTable = (0, _table.useTable)(_objectSpread(_objectSpread({}, props), {}, {
+      'aria-describedby': props['aria-describedby'] || 'table-caption',
+      scrollRef: bodyRef
+    }), state, tableRef),
+    gridProps = _useTable.gridProps;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "table",
+    display: "table",
+    variant: "tableBase.container",
+    ref: tableRef
+  }, gridProps, others), caption && (0, _react2.jsx)(_.Box, {
+    as: "caption",
+    display: "table-caption",
+    variant: "tableBase.caption",
+    textAlign: "left",
+    id: props['aria-describedby'] || 'table-caption'
+  }, caption), (0, _react2.jsx)(TableRowGroup, {
+    type: "thead",
+    hasCaption: !!caption
+  }, (0, _map["default"])(_context = collection.headerRows).call(_context, function (headerRow) {
+    var _context2, _state$collection$get, _state$collection;
+    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) {
+      return (0, _react2.jsx)(TableColumnHeader, {
+        key: column.key,
+        column: column,
+        state: state
+      });
+    }));
+  })), (0, _react2.jsx)(TableRowGroup, (0, _extends2["default"])({
+    ref: bodyRef,
+    type: "tbody"
+  }, tableBodyProps), (0, _map["default"])(_context3 = (0, _from["default"])(collection)).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) {
+      return (0, _react2.jsx)(TableCell, {
+        key: cell.key,
+        cell: cell,
+        state: state
+      });
+    }));
+  })));
+});
+var _default = TableBase;
+exports["default"] = _default;
+var TableRowGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var type = props.type,
+    children = props.children,
+    hasCaption = props.hasCaption,
+    className = props.className,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+  var _useTableRowGroup = (0, _table.useTableRowGroup)(),
+    rowGroupProps = _useTableRowGroup.rowGroupProps;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      hasCaption: hasCaption
+    }),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    ref: ref
+  }, rowGroupProps, {
+    as: type,
+    className: classNames,
+    display: "table-row-group",
+    variant: "tableBase.".concat(type)
+  }, others), children);
+});
+exports.TableRowGroup = TableRowGroup;
+var TableHeaderRow = function TableHeaderRow(props) {
+  var item = props.item,
+    state = props.state,
+    children = props.children;
+  var ref = (0, _react.useRef)(null);
+  var _useTableHeaderRow = (0, _table.useTableHeaderRow)({
+      node: item
+    }, state, ref),
+    rowProps = _useTableHeaderRow.rowProps;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "tr",
+    display: "table-row"
+  }, rowProps, {
+    ref: ref
+  }), children);
+};
+exports.TableHeaderRow = TableHeaderRow;
+var TableColumnHeader = function TableColumnHeader(props) {
+  var column = props.column,
+    state = props.state,
+    className = props.className;
+  var ref = (0, _react.useRef)(null);
+  var _useTableColumnHeader = (0, _table.useTableColumnHeader)({
+      node: column
+    }, state, ref),
+    columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
+  var _useFocusRing = (0, _focus.useFocusRing)(),
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
+  var _useStatusClasses2 = (0, _hooks.useStatusClasses)(className, {
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses2.classNames;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "th",
+    display: "table-cell",
+    variant: "tableBase.head",
+    className: classNames
+  }, (0, _utils.mergeProps)(columnHeaderProps, focusProps), {
+    ref: ref
+  }, column.props), column.rendered);
+};
+exports.TableColumnHeader = TableColumnHeader;
+var TableRow = function TableRow(props) {
+  var item = props.item,
+    state = props.state,
+    children = props.children,
+    className = props.className;
+  var ref = (0, _react.useRef)(null);
+  var _useTableRow = (0, _table.useTableRow)({
+      node: item
+    }, state, ref),
+    rowProps = _useTableRow.rowProps;
+  var isSelected = state.selectionManager.isSelected(item.key);
+  var _useFocusRing2 = (0, _focus.useFocusRing)(),
+    isFocusVisible = _useFocusRing2.isFocusVisible,
+    focusProps = _useFocusRing2.focusProps;
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = (0, _interactions.usePress)({
+      ref: ref
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
+  var _useStatusClasses3 = (0, _hooks.useStatusClasses)(className, {
+      isSelected: isSelected,
+      isHovered: isHovered,
+      isPressed: isPressed,
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses3.classNames;
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    display: "table-row",
+    as: "tr",
+    className: classNames,
+    variant: "tableBase.row"
+  }, (0, _utils.mergeProps)(rowProps, focusProps, hoverProps, pressProps), {
+    ref: ref
+  }), children);
+};
+exports.TableRow = TableRow;
+function TableCell(props) {
+  var _cell$props$noWrap;
+  var cell = props.cell,
+    state = props.state,
+    className = props.className;
+  var ref = (0, _react.useRef)(null);
+  var _useTableCell = (0, _table.useTableCell)({
+      node: cell
+    }, state, ref),
+    gridCellProps = _useTableCell.gridCellProps;
+  var _useFocusRing3 = (0, _focus.useFocusRing)(),
+    isFocusVisible = _useFocusRing3.isFocusVisible,
+    focusProps = _useFocusRing3.focusProps;
+  var _useStatusClasses4 = (0, _hooks.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 (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "td",
+    display: "table-cell",
+    className: classNames
+  }, (0, _utils.mergeProps)(gridCellProps, focusProps), {
+    variant: "tableBase.data",
+    ref: ref
+  }, cell.props), cell.rendered);
+}

package/lib/cjs/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/cjs/components/TableBase/TableBase.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryFn } from '@storybook/react';
+import { TableProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<TableProps>;
+export declare const Customization: StoryFn<TableProps>;

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

@@ -0,0 +1,111 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = exports.Customization = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _ = require("../..");
+var _items = require("../../utils/devUtils/constants/items");
+var _TableBase = _interopRequireDefault(require("./TableBase.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Experimental/Table',
+  component: _.TableBase,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TableBase["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  }
+};
+exports["default"] = _default;
+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'
+}];
+var Default = function Default() {
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
+    caption: "Lorem ipsum",
+    "aria-label": "table"
+  }, (0, _react2.jsx)(_.THead, {
+    columns: headers
+  }, function (column) {
+    return (0, _react2.jsx)(_.Column, {
+      key: column.key
+    }, column.name);
+  }), (0, _react2.jsx)(_.TBody, {
+    items: objects
+  }, function (item) {
+    return (0, _react2.jsx)(_.Row, {
+      key: item.id
+    }, function (columnKey) {
+      return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
+    });
+  })));
+};
+exports.Default = Default;
+var Customization = function Customization() {
+  var statusVariant = {
+    'Pending': 'warningStatusBadge',
+    'Failed': 'criticalStatusBadge',
+    'Rejected': 'criticalStatusBadge',
+    'Active': 'healthyStatusBadge',
+    'Inactive': 'secondaryStatusBadge'
+  };
+  return (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
+    "aria-label": "table"
+  }, (0, _react2.jsx)(_.THead, null, (0, _react2.jsx)(_.Column, {
+    width: 70
+  }, "#"), (0, _react2.jsx)(_.Column, null, "Name"), (0, _react2.jsx)(_.Column, null, "Email"), (0, _react2.jsx)(_.Column, null, "Status"), (0, _react2.jsx)(_.Column, null, "Bio")), (0, _react2.jsx)(_.TBody, {
+    items: _items.items
+  }, function (item) {
+    return (0, _react2.jsx)(_.Row, {
+      key: item.email
+    }, (0, _react2.jsx)(_.Cell, null, item.id), (0, _react2.jsx)(_.Cell, {
+      noWrap: true
+    }, item.firstName, ' ', item.lastName), (0, _react2.jsx)(_.Cell, {
+      noWrap: true
+    }, item.email), (0, _react2.jsx)(_.Cell, null, (0, _react2.jsx)(_.Badge, {
+      variant: statusVariant[item.status],
+      label: item.status
+    })), (0, _react2.jsx)(_.Cell, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem accusantium architecto tempore facere!"));
+  })));
+};
+exports.Customization = Customization;

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

@@ -0,0 +1,76 @@
+declare const _default: {
+    thead: {};
+    tbody: {
+        borderTop: string;
+        borderTopColor: string;
+        borderBottom: string;
+        borderBottomColor: string;
+    };
+    caption: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        p: string;
+        textAlign: string;
+    };
+    container: {
+        width: string;
+        borderSpacing: string;
+        borderCollapse: string;
+    };
+    data: {
+        p: string;
+        '&.no-wrap': {
+            whiteSpace: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineStyle: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: import("../..").overflowWrap;
+        maxWidth: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+    };
+    head: {
+        fontWeight: number;
+        textAlign: string;
+        p: string;
+        cursor: string;
+        '&.is-focused': {
+            outline: string;
+            outlineStyle: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: import("../..").overflowWrap;
+        maxWidth: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+    };
+    row: {
+        '&:nth-of-type(odd) ': {
+            bg: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineStyle: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {};
+        '&.is-selected': {};
+    };
+};
+export default _default;