@algolia/satellite 1.0.0-beta.146 → 1.0.0-beta.148

package/esm/Tables/DataTable/DataTable.js

@@ -2,13 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
 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 compact from "lodash/compact";
 import get from "lodash/get";
 import { useEffect, useState } from "react";
@@ -34,10 +30,10 @@ var DEFAULT_DATATABLE_LOCALE = {
   errorTitle: "Error",
   errorDescription: "An error occurred while loading data."
 };
-
 var DEFAULT_GET_ITEM_ID = function DEFAULT_GET_ITEM_ID(_, idx) {
   return String(idx);
 };
+
 /**
  * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
  *
@@ -57,50 +53,42 @@ var DEFAULT_GET_ITEM_ID = function DEFAULT_GET_ITEM_ID(_, idx) {
  * - 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 DataTable = function DataTable(_ref) {
   var data = _ref.data,
-      itemId = _ref.itemId,
-      columns = _ref.columns,
-      onChange = _ref.onChange,
-      _ref$status = _ref.status,
-      status = _ref$status === void 0 ? "success" : _ref$status,
-      noDataContent = _ref.noDataContent,
-      errorContent = _ref.errorContent,
-      _ref$sorting = _ref.sorting,
-      sorting = _ref$sorting === void 0 ? [] : _ref$sorting,
-      _ref$pagination = _ref.pagination,
-      pagination = _ref$pagination === void 0 ? false : _ref$pagination,
-      _ref$selectMode = _ref.selectMode,
-      selectMode = _ref$selectMode === void 0 ? "none" : _ref$selectMode,
-      selection = _ref.selection,
-      onSelectionChange = _ref.onSelectionChange,
-      canSelectItem = _ref.canSelectItem,
-      canHoverRow = _ref.canHoverRow,
-      onRowHoveredChanged = _ref.onRowHoveredChanged,
-      propsLocale = _ref.locale;
+    itemId = _ref.itemId,
+    columns = _ref.columns,
+    onChange = _ref.onChange,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? "success" : _ref$status,
+    noDataContent = _ref.noDataContent,
+    errorContent = _ref.errorContent,
+    _ref$sorting = _ref.sorting,
+    sorting = _ref$sorting === void 0 ? [] : _ref$sorting,
+    _ref$pagination = _ref.pagination,
+    pagination = _ref$pagination === void 0 ? false : _ref$pagination,
+    _ref$selectMode = _ref.selectMode,
+    selectMode = _ref$selectMode === void 0 ? "none" : _ref$selectMode,
+    selection = _ref.selection,
+    onSelectionChange = _ref.onSelectionChange,
+    canSelectItem = _ref.canSelectItem,
+    canHoverRow = _ref.canHoverRow,
+    onRowHoveredChanged = _ref.onRowHoveredChanged,
+    propsLocale = _ref.locale;
   var contextLocale = useLocale("dataTable");
-
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATATABLE_LOCALE), contextLocale), propsLocale);
-
   if (process.env.NODE_ENV !== "production") {
     var _selection$length;
-
     if (itemId === undefined && (sorting.length > 0 || selectMode !== "none")) {
       console.warn("You did not provide a custom `itemId` function, but you have defined `sorting` and/or `selectMode`. This can lead to unexpected results.");
     }
-
     if (selectMode === "single" && ((_selection$length = selection === null || selection === void 0 ? void 0 : selection.length) !== null && _selection$length !== void 0 ? _selection$length : 0) > 1) {
       console.warn("You can only have one selected item at a time in single `selectMode`.");
     }
   }
-
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      hoveredRowId = _useState2[0],
-      setHoveredRowId = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    hoveredRowId = _useState2[0],
+    setHoveredRowId = _useState2[1];
   useEffect(function () {
     // Reset hovered row when data changes to avoid inconsistent state
     setHoveredRowId(undefined);
@@ -145,7 +133,8 @@ export var DataTable = function DataTable(_ref) {
       var isChecked = selectionLength === dataLength;
       var isIndeterminate = selectionLength > 0 && selectionLength !== dataLength;
       return /*#__PURE__*/_jsx(Checkbox, {
-        "aria-label": locale.selectAllButton // Small hack to position the checkbox in the center of the header
+        "aria-label": locale.selectAllButton
+        // Small hack to position the checkbox in the center of the header
         ,
         className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["absolute mb-2.5"]))),
         checked: isChecked,
@@ -169,7 +158,6 @@ export var DataTable = function DataTable(_ref) {
     className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["w-3"])))
   }].concat(_toConsumableArray(columns.map(function (c) {
     var _c$Header;
-
     return typeof c === "string" ? {
       id: c,
       accessor: c,
@@ -181,7 +169,6 @@ export var DataTable = function DataTable(_ref) {
   var getItemIdInternal = itemId || DEFAULT_GET_ITEM_ID;
   var rows = data.map(function (item, index) {
     var _ref4;
-
     var id = typeof getItemIdInternal === "string" ? String(get(item, getItemIdInternal, DEFAULT_GET_ITEM_ID(item, index))) : getItemIdInternal(item, index);
     var hovered = hoveredRowId === id;
     var sanitizedSelection = (_ref4 = selectMode === "single" ? selection === null || selection === void 0 ? void 0 : selection.slice(0, 1) : selectMode === "none" ? [] : selection) !== null && _ref4 !== void 0 ? _ref4 : [];
@@ -197,32 +184,26 @@ export var DataTable = function DataTable(_ref) {
   });
   var internalSorting = computedColumns.map(function (c) {
     var _sorting$find$, _sorting$find;
-
     return [c.id, c.sort ? (_sorting$find$ = (_sorting$find = sorting.find(function (_ref5) {
       var _ref6 = _slicedToArray(_ref5, 1),
-          columnId = _ref6[0];
-
+        columnId = _ref6[0];
       return columnId === c.id;
     })) === null || _sorting$find === void 0 ? void 0 : _sorting$find[1]) !== null && _sorting$find$ !== void 0 ? _sorting$find$ : "desc" : "none"];
   });
-
   var shouldRenderPagination = function shouldRenderPagination() {
     if (isDeterminatePagination(pagination)) return pagination && pagination.totalItemsCount > 0;
     if (isIndeterminatePagination(pagination)) return pagination && data.length > 0;
     return false;
   };
-
   var onRowHoverChange = function onRowHoverChange(row) {
     setHoveredRowId(row === null || row === void 0 ? void 0 : row.id);
     onRowHoveredChanged === null || onRowHoveredChanged === void 0 ? void 0 : onRowHoveredChanged(row);
   };
-
   var onToggleSort = function onToggleSort(columnId, direction) {
     var newSorting = internalSorting.map(function (_ref7) {
       var _ref8 = _slicedToArray(_ref7, 2),
-          colId = _ref8[0],
-          d = _ref8[1];
-
+        colId = _ref8[0],
+        d = _ref8[1];
       return columnId === colId ? [columnId, direction] : [colId, d];
     });
     onChange === null || onChange === void 0 ? void 0 : onChange({
@@ -230,11 +211,9 @@ export var DataTable = function DataTable(_ref) {
       sorting: newSorting
     });
   };
-
   var handlePaginationChange = function handlePaginationChange(dataConfiguration) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(dataConfiguration);
   };
-
   return /*#__PURE__*/_jsxs("div", {
     className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["relative"]))),
     children: [status === "loading" && /*#__PURE__*/_jsx("div", {

package/esm/Tables/DataTable/DataTable.tailwind.js

@@ -1,9 +1,10 @@
 import _plugin from "tailwindcss/plugin";
 // purgecss whitelist: th, td, tr
+
 var plugin = _plugin;
 var datatablePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
-      theme = _ref.theme;
+    theme = _ref.theme;
   addComponents({
     ".datatable": {
       th: {

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

@@ -1,13 +1,9 @@
 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";
@@ -15,21 +11,20 @@ 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;
-
+    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;
@@ -39,7 +34,6 @@ export var Body = function Body(_ref) {
     }) : selectMode === "multi" ? [].concat(_toConsumableArray(selection), [rowId]) : [rowId];
     onSelectionChange(newSelection);
   };
-
   var additionalRowProps = function additionalRowProps(row) {
     return _objectSpread(_objectSpread({}, canHoverRow(row) ? {
       onMouseEnter: function onMouseEnter() {
@@ -57,7 +51,6 @@ export var Body = function Body(_ref) {
       }
     });
   };
-
   if (status === "error") {
     return /*#__PURE__*/_jsx("tbody", {
       children: /*#__PURE__*/_jsx("tr", {
@@ -76,7 +69,6 @@ export var Body = function Body(_ref) {
       })
     });
   }
-
   if (rows.length === 0 && status !== "loading") {
     return /*#__PURE__*/_jsx("tbody", {
       children: /*#__PURE__*/_jsx("tr", {
@@ -95,7 +87,6 @@ export var Body = function Body(_ref) {
       })
     });
   }
-
   return /*#__PURE__*/_jsx("tbody", {
     children: rows.map(function (row, rowIndex) {
       return /*#__PURE__*/_createElement("tr", _objectSpread(_objectSpread({}, additionalRowProps(row)), {}, {

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

@@ -1,15 +1,12 @@
 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;
+    onChange = _ref.onChange;
   return isDeterminatePagination(pagination) ? /*#__PURE__*/_jsx(Pagination, {
     nbPages: Math.ceil(pagination.totalItemsCount / pagination.itemsPerPage),
     currentPage: pagination.currentPage,
@@ -18,11 +15,9 @@ export var Footer = function Footer(_ref) {
       function onChange(_x) {
         return _onChange.apply(this, arguments);
       }
-
       onChange.toString = function () {
         return _onChange.toString();
       };
-
       return onChange;
     }(function (page) {
       return onChange({
@@ -41,11 +36,9 @@ export var Footer = function Footer(_ref) {
       function onChange(_x2) {
         return _onChange2.apply(this, arguments);
       }
-
       onChange.toString = function () {
         return _onChange2.toString();
       };
-
       return onChange;
     }(function (page) {
       return onChange({

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

@@ -3,18 +3,17 @@ 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;
+    _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];
-
+            colId = _ref3[0];
           return colId === column.id;
         }) || [null];
         return /*#__PURE__*/_jsx(HeaderCell, {

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

@@ -2,13 +2,9 @@ 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";
@@ -17,24 +13,21 @@ 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);
-
+    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();

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

@@ -1,8 +1,6 @@
 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";
@@ -10,13 +8,11 @@ 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;
-
+    locale = _ref.locale;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showLoadMessage = _useState2[0],
-      setShowLoadMessage = _useState2[1];
-
+    _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 () {

package/esm/Tables/DataTable/utils.js

@@ -9,6 +9,5 @@ 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.js

@@ -1,21 +1,15 @@
 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.
  *
@@ -37,14 +31,13 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  */
 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);
-
+    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", {

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

@@ -3,7 +3,7 @@ import _plugin from "tailwindcss/plugin";
 var plugin = _plugin;
 var tablePlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
-      theme = _ref.theme;
+    theme = _ref.theme;
   addComponents({
     ".table": {
       width: "100%",

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

@@ -1,14 +1,12 @@
 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;
+    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"])))

package/esm/Tabs/ContentTabs.js

@@ -1,11 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-import { Tabs as ReachTabs, Tab, TabList, TabPanel, TabPanels } from "@reach/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@radix-ui/react-tabs";
 import cx from "clsx";
-import { useEffect, useState } from "react";
 import Badge from "../Badge";
 import stl from "../styles/helpers/satellitePrefixer";
 import { ACTIVE_UNDERLINE_VARIANT_CLASSNAMES } from "./utils";
@@ -13,47 +9,30 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var ContentTabs = function ContentTabs(_ref) {
   var className = _ref.className,
-      tabs = _ref.tabs,
-      tabIndex = _ref.tabIndex,
-      _ref$defaultIndex = _ref.defaultIndex,
-      defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
-      onChange = _ref.onChange;
-
-  var _useState = useState(tabIndex !== null && tabIndex !== void 0 ? tabIndex : defaultIndex),
-      _useState2 = _slicedToArray(_useState, 2),
-      internalTabIndex = _useState2[0],
-      setInternalTabIndex = _useState2[1];
-
-  useEffect(function () {
-    if (tabIndex !== undefined && internalTabIndex !== tabIndex) {
-      setInternalTabIndex(tabIndex);
-    }
-  }, [internalTabIndex, tabIndex]);
-
-  var handleTabsChange = function handleTabsChange(index) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(index);
-
-    if (tabIndex === undefined) {
-      setInternalTabIndex(index);
-    }
-  };
-
-  return /*#__PURE__*/_jsxs(ReachTabs, {
-    index: internalTabIndex,
-    onChange: handleTabsChange,
-    defaultIndex: internalTabIndex,
-    children: [/*#__PURE__*/_jsx(TabList, {
+    tabs = _ref.tabs,
+    tabIndex = _ref.tabIndex,
+    _ref$defaultIndex = _ref.defaultIndex,
+    defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/_jsxs(Tabs, {
+    value: typeof tabIndex !== "undefined" ? String(tabIndex) : undefined,
+    defaultValue: typeof defaultIndex !== "undefined" ? String(defaultIndex) : undefined,
+    onValueChange: function onValueChange(value) {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(Number(value));
+    },
+    children: [/*#__PURE__*/_jsx(TabsList, {
       className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
       children: tabs.map(function (_ref2, index) {
         var _ref2$variant = _ref2.variant,
-            variant = _ref2$variant === void 0 ? "accent" : _ref2$variant,
-            className = _ref2.className,
-            disabled = _ref2.disabled,
-            label = _ref2.label,
-            value = _ref2.value;
-        return /*#__PURE__*/_jsxs(Tab, {
-          className: cx(ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tab pb-3 text-base leading-sm"]))), className),
+          variant = _ref2$variant === void 0 ? "accent" : _ref2$variant,
+          className = _ref2.className,
+          disabled = _ref2.disabled,
+          label = _ref2.label,
+          value = _ref2.value;
+        return /*#__PURE__*/_jsxs(TabsTrigger, {
+          value: String(index),
           disabled: disabled,
+          className: cx(ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tab pb-3 text-base leading-sm"]))), className),
           children: [label, value && /*#__PURE__*/_jsx(Badge, {
             size: "small",
             variant: variant,
@@ -62,15 +41,13 @@ export var ContentTabs = function ContentTabs(_ref) {
           })]
         }, index);
       })
-    }), /*#__PURE__*/_jsx(TabPanels, {
-      children: tabs.map(function (_ref3, index) {
-        var content = _ref3.content;
-        var isActive = internalTabIndex === index;
-        return /*#__PURE__*/_jsx(TabPanel, {
-          className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["focus:outline-none"]))),
-          children: isActive ? content : null
-        }, index);
-      })
+    }), tabs.map(function (_ref3, index) {
+      var content = _ref3.content;
+      return /*#__PURE__*/_jsx(TabsContent, {
+        value: String(index),
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["focus:outline-none"]))),
+        children: content
+      }, index);
     })]
   });
 };

package/esm/Tabs/LinkTabs.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import cx from "clsx";
 import useLocation from "react-use/lib/useLocation";
 import stl from "../styles/helpers/satellitePrefixer";
@@ -13,6 +11,7 @@ export var defaultUrlMatcher = function defaultUrlMatcher(tab, location) {
     pathname: location.pathname || ""
   });
 };
+
 /**
  * Tabs are an easy way to organize content by grouping similar information on the same page. Use them to help users navigate between related views within the same context, especially when the number of views may be more than 3.
  *
@@ -41,13 +40,12 @@ export var defaultUrlMatcher = function defaultUrlMatcher(tab, location) {
  * - Use more than one row of tabs. Multiple rows create jumping UI elements, which make it impossible for users to remember which tabs they've already visited
  * - Place the tab on the sides or bottom of the page, where users often overlook them
  */
-
 export var LinkTabs = function LinkTabs(_ref) {
   var className = _ref.className,
-      tabs = _ref.tabs,
-      onTabClick = _ref.onTabClick,
-      _ref$urlMatcher = _ref.urlMatcher,
-      urlMatcher = _ref$urlMatcher === void 0 ? defaultUrlMatcher : _ref$urlMatcher;
+    tabs = _ref.tabs,
+    onTabClick = _ref.onTabClick,
+    _ref$urlMatcher = _ref.urlMatcher,
+    urlMatcher = _ref$urlMatcher === void 0 ? defaultUrlMatcher : _ref$urlMatcher;
   var location = useLocation();
   var tabIndex = tabs.findIndex(function (tab) {
     return urlMatcher(tab, location);

package/esm/Tabs/Tabs.tailwind.js

@@ -3,7 +3,7 @@ import _plugin from "tailwindcss/plugin";
 var plugin = _plugin;
 var tabsPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
-      theme = _ref.theme;
+    theme = _ref.theme;
   addComponents({
     ".tabs-tabbar": {
       scrollBehavior: "smooth"