@algolia/satellite 1.0.0-beta.16 → 1.0.0-beta.160

package/esm/Tables/DataTable/components/Body.js

@@ -0,0 +1,112 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+var _templateObject, _templateObject2, _templateObject3;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import EmptyState from "../../../EmptyState";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { getCellValue } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+export var Body = function Body(_ref) {
+  var rows = _ref.rows,
+    columns = _ref.columns,
+    status = _ref.status,
+    noDataContent = _ref.noDataContent,
+    errorContent = _ref.errorContent,
+    selectMode = _ref.selectMode,
+    _ref$selection = _ref.selection,
+    selection = _ref$selection === void 0 ? [] : _ref$selection,
+    onSelectionChange = _ref.onSelectionChange,
+    onRowHoverChange = _ref.onRowHoverChange,
+    _ref$canHoverRow = _ref.canHoverRow,
+    canHoverRow = _ref$canHoverRow === void 0 ? function () {
+      return true;
+    } : _ref$canHoverRow,
+    locale = _ref.locale;
+  var handleRowSelection = function handleRowSelection(row) {
+    if (!onSelectionChange) return;
+    var rowId = row.id;
+    var isSelected = selection.includes(rowId);
+    var newSelection = isSelected ? selection.filter(function (id) {
+      return id !== rowId;
+    }) : selectMode === "multi" ? [].concat(_toConsumableArray(selection), [rowId]) : [rowId];
+    onSelectionChange(newSelection);
+  };
+  var additionalRowProps = function additionalRowProps(row) {
+    return _objectSpread(_objectSpread({}, canHoverRow(row) ? {
+      onMouseEnter: function onMouseEnter() {
+        return onRowHoverChange(row);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return onRowHoverChange(null);
+      },
+      className: "hoverable"
+    } : {
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["row-disabled"])))
+    }), row.selectable && {
+      onClick: function onClick() {
+        return handleRowSelection(row);
+      }
+    });
+  };
+  if (status === "error") {
+    return /*#__PURE__*/_jsx("tbody", {
+      children: /*#__PURE__*/_jsx("tr", {
+        children: /*#__PURE__*/_jsx("td", {
+          colSpan: columns.length,
+          children: /*#__PURE__*/_jsx("span", {
+            className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex justify-center py-6"]))),
+            children: errorContent || /*#__PURE__*/_jsx(EmptyState, {
+              title: locale.errorTitle,
+              description: locale.errorDescription,
+              centered: true,
+              usageContext: "result"
+            })
+          })
+        })
+      })
+    });
+  }
+  if (rows.length === 0 && status !== "loading") {
+    return /*#__PURE__*/_jsx("tbody", {
+      children: /*#__PURE__*/_jsx("tr", {
+        children: /*#__PURE__*/_jsx("td", {
+          colSpan: columns.length,
+          children: /*#__PURE__*/_jsx("span", {
+            className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex justify-center py-6"]))),
+            children: noDataContent || /*#__PURE__*/_jsx(EmptyState, {
+              title: locale.noDataTitle,
+              description: locale.noDataDescription,
+              centered: true,
+              usageContext: "result"
+            })
+          })
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx("tbody", {
+    children: rows.map(function (row, rowIndex) {
+      return /*#__PURE__*/_createElement("tr", _objectSpread(_objectSpread({}, additionalRowProps(row)), {}, {
+        key: rowIndex
+      }), columns.map(function (column) {
+        var value = getCellValue(column, row);
+        var Cell = column.Cell;
+        return Cell ? /*#__PURE__*/_jsx("td", {
+          className: column === null || column === void 0 ? void 0 : column.className,
+          children: /*#__PURE__*/_jsx(Cell, {
+            row: rows[rowIndex],
+            column: column,
+            value: value
+          })
+        }, column.id) : /*#__PURE__*/_jsx("td", {
+          className: column === null || column === void 0 ? void 0 : column.className,
+          children: value !== null && value !== void 0 ? value : "-"
+        }, column.id);
+      }));
+    })
+  });
+};
+export default Body;

package/esm/Tables/DataTable/components/Footer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { DataConfiguration, PaginationConfiguration } from "../types";
+export interface FooterProps {
+    pagination: PaginationConfiguration;
+    onChange(dataConfiguration: DataConfiguration): void;
+}
+export declare const Footer: ({ pagination, onChange }: FooterProps) => JSX.Element | null;
+export default Footer;

package/esm/Tables/DataTable/components/Footer.js

@@ -0,0 +1,53 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import Pagination, { CompactPagination } from "../../../Pagination";
+import { isDeterminatePagination, isIndeterminatePagination } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Footer = function Footer(_ref) {
+  var pagination = _ref.pagination,
+    onChange = _ref.onChange;
+  return isDeterminatePagination(pagination) ? /*#__PURE__*/_jsx(Pagination, {
+    nbPages: Math.ceil(pagination.totalItemsCount / pagination.itemsPerPage),
+    currentPage: pagination.currentPage,
+    maxButtons: 8,
+    onChange: function (_onChange) {
+      function onChange(_x) {
+        return _onChange.apply(this, arguments);
+      }
+      onChange.toString = function () {
+        return _onChange.toString();
+      };
+      return onChange;
+    }(function (page) {
+      return onChange({
+        pagination: _objectSpread(_objectSpread({}, pagination), {}, {
+          currentPage: page
+        }),
+        sorting: []
+      });
+    })
+  }) : isIndeterminatePagination(pagination) ? /*#__PURE__*/_jsx(CompactPagination, {
+    label: "compact",
+    currentPage: pagination.currentPage,
+    showGoToFirstPage: true,
+    nextDisabled: pagination.isLastPage,
+    onChange: function (_onChange2) {
+      function onChange(_x2) {
+        return _onChange2.apply(this, arguments);
+      }
+      onChange.toString = function () {
+        return _onChange2.toString();
+      };
+      return onChange;
+    }(function (page) {
+      return onChange({
+        pagination: _objectSpread(_objectSpread({}, pagination), {}, {
+          currentPage: page
+        }),
+        sorting: []
+      });
+    })
+  }) : null;
+};
+export default Footer;

package/esm/Tables/DataTable/components/Header.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { AdvancedColumnDefinition, Sorting, SortingDirection } from "../types";
+export interface HeaderProps<Item> {
+    columns: AdvancedColumnDefinition<Item>[];
+    sorting?: Sorting[];
+    onToggleSort: (columnId: string, direction: SortingDirection) => void;
+    disabled?: boolean;
+}
+export declare const Header: <Item extends {}>({ columns, sorting, onToggleSort, disabled }: HeaderProps<Item>) => JSX.Element;
+export default Header;

package/esm/Tables/DataTable/components/Header.js

@@ -0,0 +1,32 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import HeaderCell from "./HeaderCell";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Header = function Header(_ref) {
+  var columns = _ref.columns,
+    _ref$sorting = _ref.sorting,
+    sorting = _ref$sorting === void 0 ? [] : _ref$sorting,
+    onToggleSort = _ref.onToggleSort,
+    disabled = _ref.disabled;
+  return /*#__PURE__*/_jsx("thead", {
+    children: /*#__PURE__*/_jsx("tr", {
+      children: columns.map(function (column) {
+        var Header = column.Header;
+        var sortingDirection = sorting.find(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 1),
+            colId = _ref3[0];
+          return colId === column.id;
+        }) || [null];
+        return /*#__PURE__*/_jsx(HeaderCell, {
+          column: column,
+          disabled: disabled,
+          sortingDirection: sortingDirection[1],
+          onToggleSort: onToggleSort,
+          children: !Header ? null : typeof Header === "string" ? Header : /*#__PURE__*/_jsx(Header, {
+            column: column
+          })
+        }, column.id);
+      })
+    })
+  });
+};
+export default Header;

package/esm/Tables/DataTable/components/HeaderCell.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { AdvancedColumnDefinition, SortingDirection } from "../types";
+export interface HeaderCellProps<Item> extends HTMLAttributes<HTMLTableCellElement> {
+    column: AdvancedColumnDefinition<Item>;
+    disabled?: boolean;
+    isSortingEnabled?: boolean;
+    sortingDirection?: SortingDirection;
+    onToggleSort: (columnId: string, sortingDirection: SortingDirection) => void;
+    children: ReactNode;
+}
+export declare const HeaderCell: <Item extends {}>({ sortingDirection, onToggleSort, column: { id, className, sort }, disabled, children, ...props }: HeaderCellProps<Item>) => JSX.Element;
+export default HeaderCell;

package/esm/Tables/DataTable/components/HeaderCell.js

@@ -0,0 +1,52 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["sortingDirection", "onToggleSort", "column", "disabled", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import cx from "clsx";
+import { ChevronDown, ChevronUp } from "react-feather";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var iconClassName = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-4 inline ml-1"])));
+export var HeaderCell = function HeaderCell(_ref) {
+  var _ref$sortingDirection = _ref.sortingDirection,
+    sortingDirection = _ref$sortingDirection === void 0 ? "none" : _ref$sortingDirection,
+    onToggleSort = _ref.onToggleSort,
+    _ref$column = _ref.column,
+    id = _ref$column.id,
+    className = _ref$column.className,
+    _ref$column$sort = _ref$column.sort,
+    sort = _ref$column$sort === void 0 ? false : _ref$column$sort,
+    disabled = _ref.disabled,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var InternalCellComponent = sort && !disabled ? "button" : "span";
+  var handleSorting = function handleSorting() {
+    if (disabled) return;
+    onToggleSort(id, sortingDirection === "desc" ? "asc" : sortingDirection === "asc" ? "none" : "desc");
+  };
+  var sortButtonProps = sort ? {
+    onClick: function onClick() {
+      return handleSorting();
+    },
+    className: disabled ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["cursor-not-allowed"]))) : stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["cursor-pointer"])))
+  } : {};
+  return /*#__PURE__*/_jsx("th", _objectSpread(_objectSpread({}, props), {}, {
+    "aria-sort": sortingDirection === "desc" ? "descending" : sortingDirection === "asc" ? "ascending" : "none",
+    className: className,
+    children: /*#__PURE__*/_jsxs(InternalCellComponent, _objectSpread(_objectSpread({}, sortButtonProps), {}, {
+      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["px-4 py-[14px] inline-flex items-center focus:outline-none focus:text-accent-600"]))), sortButtonProps.className),
+      children: [children, sort ? sortingDirection === "desc" ? /*#__PURE__*/_jsx(ChevronDown, {
+        className: iconClassName
+      }) : sortingDirection === "asc" ? /*#__PURE__*/_jsx(ChevronUp, {
+        className: iconClassName
+      }) : /*#__PURE__*/_jsx(ChevronDown, {
+        className: cx(iconClassName, stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["text-grey-300"]))))
+      }) : null]
+    }))
+  }));
+};
+export default HeaderCell;

package/esm/Tables/DataTable/components/Loader.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { DataTableLocale } from "../DataTable";
+export interface LoaderProps {
+    className?: string;
+    locale: Required<DataTableLocale>;
+}
+export declare const Loader: ({ className, locale }: LoaderProps) => JSX.Element;
+export default Loader;

package/esm/Tables/DataTable/components/Loader.js

@@ -0,0 +1,40 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _templateObject;
+import { useEffect, useState } from "react";
+import EmptyState from "../../../EmptyState";
+import ProgressSpinner from "../../../ProgressSpinner";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Loader = function Loader(_ref) {
+  var className = _ref.className,
+    locale = _ref.locale;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLoadMessage = _useState2[0],
+    setShowLoadMessage = _useState2[1];
+  useEffect(function () {
+    // See https://github.com/algolia/AlgoliaWeb/blob/develop/_client/src/common/components/AsyncWrapper/AsyncWrapper.tsx#L56
+    var loadTimer = setTimeout(function () {
+      return setShowLoadMessage(true);
+    }, 5000);
+    return function () {
+      clearTimeout(loadTimer);
+      setShowLoadMessage(false);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    children: showLoadMessage ? /*#__PURE__*/_jsx(EmptyState, {
+      usageContext: "result",
+      medallion: /*#__PURE__*/_jsx("div", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex justify-center"]))),
+        children: /*#__PURE__*/_jsx(ProgressSpinner, {})
+      }),
+      title: locale.loadingTitle,
+      description: locale.loadingDescription,
+      centered: true
+    }) : /*#__PURE__*/_jsx(ProgressSpinner, {})
+  });
+};
+export default Loader;

package/esm/Tables/DataTable/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Header";
+export * from "./HeaderCell";
+export * from "./Body";
+export * from "./Footer";
+export * from "./Loader";

package/esm/Tables/DataTable/components/index.js

@@ -0,0 +1,5 @@
+export * from "./Header";
+export * from "./HeaderCell";
+export * from "./Body";
+export * from "./Footer";
+export * from "./Loader";

package/esm/Tables/DataTable/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./DataTable";
+export * from "./types";
+export { default } from "./DataTable";

package/esm/Tables/DataTable/index.js

@@ -0,0 +1,3 @@
+export * from "./DataTable";
+export * from "./types";
+export { default } from "./DataTable";

package/esm/Tables/DataTable/types.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentType } from "react";
+export declare type Status = "loading" | "error" | "success";
+export declare type SelectMode = "single" | "multi" | "none";
+export declare type SortingDirection = "asc" | "desc" | "none";
+export declare type Sorting = [columnId: string, direction: SortingDirection];
+export declare type GetItemId<Item> = string | ((item: Item, idx: number) => string);
+export interface Row<Item> {
+    item: Item;
+    id: string;
+    hovered: boolean;
+    selected: boolean;
+    selectable: boolean;
+}
+export interface CellProps<Item> {
+    value: any;
+    row: Row<Item>;
+    column: AdvancedColumnDefinition<Item>;
+}
+export interface HeaderProps<Item> {
+    column: AdvancedColumnDefinition<Item>;
+}
+export interface AdvancedColumnDefinition<Item> {
+    /** The ID of the column - Should be unique */
+    id: string;
+    /** A string or a function which determines how to get the column data */
+    accessor: string | ((item: Item) => any);
+    sort?: boolean;
+    Header?: ComponentType<HeaderProps<Item>> | string | false;
+    Cell?: ComponentType<CellProps<Item>>;
+    className?: string;
+}
+export declare type ColumnDefinition<Item> = string | AdvancedColumnDefinition<Item>;
+export interface IndeterminatePagination {
+    currentPage: number;
+    itemsPerPage: number;
+    isLastPage?: boolean;
+}
+export interface DeterminatePagination {
+    currentPage: number;
+    itemsPerPage: number;
+    totalItemsCount: number;
+}
+export declare type PaginationConfiguration = false | IndeterminatePagination | DeterminatePagination;
+export interface DataConfiguration {
+    /** The current pagination configuration */
+    pagination: PaginationConfiguration;
+    /** The current sorting configuration */
+    sorting: Sorting[];
+}

package/esm/Tables/DataTable/types.js

@@ -0,0 +1 @@
+export {};

package/esm/Tables/DataTable/utils.d.ts

@@ -0,0 +1,4 @@
+import type { AdvancedColumnDefinition, DeterminatePagination, IndeterminatePagination, PaginationConfiguration, Row } from "./types";
+export declare const isDeterminatePagination: (pagination: PaginationConfiguration) => pagination is DeterminatePagination;
+export declare const isIndeterminatePagination: (pagination: PaginationConfiguration) => pagination is IndeterminatePagination;
+export declare const getCellValue: <Item extends {}>(column: AdvancedColumnDefinition<Item>, row: Row<Item>) => any;

package/esm/Tables/DataTable/utils.js

@@ -0,0 +1,13 @@
+import get from "lodash/get";
+export var isDeterminatePagination = function isDeterminatePagination(pagination) {
+  return pagination !== false && "totalItemsCount" in pagination;
+};
+export var isIndeterminatePagination = function isIndeterminatePagination(pagination) {
+  return pagination !== false && !("totalItemsCount" in pagination) && "currentPage" in pagination && typeof pagination.currentPage === "number";
+};
+export var getCellValue = function getCellValue(column, row) {
+  if (typeof column.accessor === "string") {
+    return get(row.item, column.accessor);
+  }
+  return column.accessor(row.item);
+};

package/esm/Tables/Table/Table.d.ts

@@ -0,0 +1,28 @@
+import type { DetailedHTMLProps, ReactNode, TableHTMLAttributes } from "react";
+export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
+    footer?: ReactNode;
+    smallFooter?: boolean;
+    hasActions?: boolean;
+    highlight?: boolean;
+}
+/**
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ *
+ * #### Do
+ *
+ * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
+ * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
+ * - Indicate sorting capabilities of a column with a chevron in the cell header
+ * - Start by columns with highest value to the user, and continue with less important ones
+ *
+ * #### Do not
+ *
+ * - Center align text in cells
+ *
+ * ## Best practices
+ *
+ * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
+ * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
+ */
+export declare const Table: ({ className, footer, smallFooter, hasActions, highlight, ...props }: TableProps) => JSX.Element;
+export default Table;

package/esm/Tables/Table/Table.js

@@ -0,0 +1,54 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import cx from "clsx";
+import stl from "../../styles/helpers/satellitePrefixer";
+import TableFooter from "./components/TableFooter";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ *
+ * #### Do
+ *
+ * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
+ * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
+ * - Indicate sorting capabilities of a column with a chevron in the cell header
+ * - Start by columns with highest value to the user, and continue with less important ones
+ *
+ * #### Do not
+ *
+ * - Center align text in cells
+ *
+ * ## Best practices
+ *
+ * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
+ * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
+ */
+export var Table = function Table(_ref) {
+  var className = _ref.className,
+    footer = _ref.footer,
+    _ref$smallFooter = _ref.smallFooter,
+    smallFooter = _ref$smallFooter === void 0 ? false : _ref$smallFooter,
+    hasActions = _ref.hasActions,
+    _ref$highlight = _ref.highlight,
+    highlight = _ref$highlight === void 0 ? true : _ref$highlight,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["rounded text-grey-900 bg-white display-body"]))), className),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["overflow-x-auto"]))),
+      children: /*#__PURE__*/_jsx("table", _objectSpread(_objectSpread({}, props), {}, {
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
+      }))
+    }), !!footer && /*#__PURE__*/_jsx(TableFooter, {
+      size: smallFooter ? "small" : "default",
+      children: footer
+    })]
+  });
+};
+export default Table;

package/esm/Tables/Table/Table.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = tablePlugin;
+declare const tablePlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss").Config> | undefined;
+};

package/esm/Tables/Table/Table.tailwind.js

@@ -0,0 +1,38 @@
+import _plugin from "tailwindcss/plugin";
+// purgecss whitelist: th, td, tr
+var plugin = _plugin;
+var tablePlugin = plugin(function (_ref) {
+  var addComponents = _ref.addComponents,
+    theme = _ref.theme;
+  addComponents({
+    ".table": {
+      width: "100%",
+      borderCollapse: "collapse",
+      textAlign: "left",
+      "th, td": {
+        padding: "14px 16px"
+      },
+      thead: {
+        backgroundColor: theme("colors.grey.50")
+      },
+      th: {
+        borderBottom: "1px solid ".concat(theme("colors.grey.200")),
+        fontWeight: "normal"
+      },
+      "tr:not(:last-child) td": {
+        borderBottom: "1px solid ".concat(theme("colors.grey.100"))
+      }
+    },
+    ".table-with-actions": {
+      "th:last-of-type, td:last-of-type": {
+        textAlign: "right"
+      }
+    },
+    ".table-with-highlight": {
+      "tr:hover td": {
+        backgroundColor: theme("colors.grey.50")
+      }
+    }
+  });
+});
+export default tablePlugin;

package/esm/Tables/Table/components/TableFooter.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export declare type FooterSizes = "default" | "small";
+export interface FooterProps {
+    size?: FooterSizes;
+    children?: ReactNode;
+}
+export declare const TableFooter: ({ size, children }: FooterProps) => JSX.Element;
+export default TableFooter;

package/esm/Tables/Table/components/TableFooter.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import cx from "clsx";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var TableFooter = function TableFooter(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
+    children = _ref.children;
+  var SIZE_CLASSNAMES = {
+    "default": stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["py-3 px-4"]))),
+    small: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["py-1 px-4"])))
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size]),
+    children: children
+  });
+};
+export default TableFooter;

package/esm/Tables/Table/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Table";
+export * from "./components/TableFooter";
+export { default } from "./Table";

package/esm/Tables/Table/index.js

@@ -0,0 +1,3 @@
+export * from "./Table";
+export * from "./components/TableFooter";
+export { default } from "./Table";

package/esm/Tables/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Table";
+export * from "./DataTable";
+export { default } from "./Table";

package/esm/Tables/index.js

@@ -0,0 +1,3 @@
+export * from "./Table";
+export * from "./DataTable";
+export { default } from "./Table";

package/esm/Tabs/ContentTabs.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ContentTabsProps } from "./types";
+export declare const ContentTabs: ({ className, tabs, tabIndex, defaultIndex, onChange }: ContentTabsProps) => JSX.Element;
+export default ContentTabs;