@algolia/satellite 1.0.0-beta.135 → 1.0.0-beta.138

package/cjs/Sidebar/Sidebar.js

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -68,10 +68,10 @@ var Sidebar = function Sidebar(_ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
       id: id,
       "aria-label": label,
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n            display-body border-r border-grey-200/50\n            ", "\n            ", "\n          "])), collapsed ? "w-14" : "w-56", variant === "primary" ? "bg-grey-100" : "bg-white"), className),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n            display-body border-r border-grey-200/50\n            ", "\n            ", "\n          "])), collapsed ? "w-14" : "w-56", variant === "primary" ? "bg-grey-100" : "bg-white"), className),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollIndicator["default"], {
-        wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-full"]))),
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["relative px-3 pb-7 flex flex-col no-scrollbar"]))),
+        wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["h-full -mr-px"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["relative px-3 pb-7 flex flex-col no-scrollbar overflow-x-hidden"]))),
         children: children
       })
     })

package/cjs/Sidebar/SidebarHeader.js

@@ -9,7 +9,7 @@ exports.SidebarHeader = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -21,7 +21,7 @@ var SidebarHeader = function SidebarHeader(_ref) {
   var className = _ref.className,
       children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["h-[72px] shrink-0 border-b border-grey-200/50"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["h-[72px] shrink-0 border-b border-grey-200/50"]))), className),
     children: children
   });
 };

package/cjs/Sidebar/SidebarHeading.d.ts

@@ -1,5 +1,6 @@
 import type { FC, ReactNode } from "react";
 export declare type SidebarHeadingProps = {
+    id?: string;
     className?: string;
     children: ReactNode;
 };

package/cjs/Sidebar/SidebarHeading.js

@@ -9,7 +9,7 @@ exports.SidebarHeading = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -20,14 +20,16 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 
 var SidebarHeading = function SidebarHeading(_ref) {
-  var className = _ref.className,
+  var id = _ref.id,
+      className = _ref.className,
       children = _ref.children;
 
   var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
       collapsed = _useSidebarContext.collapsed;
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          h-8 pl-2 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none\n          ", "\n        "])), collapsed && "invisible"), className),
+    id: id,
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          h-8 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none\n          ", "\n        "])), collapsed && "invisible"), className),
     children: children
   });
 };

package/cjs/Sidebar/SidebarLink.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -42,7 +42,7 @@ var SidebarLink = function SidebarLink(props) {
   var isActive = !disabled && isLinkActive((_linkProps$href = linkProps.href) !== null && _linkProps$href !== void 0 ? _linkProps$href : "");
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread({}, linkProps), {}, {
     id: id,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          flex items-center\n          group hover:no-underline focus:outline-none\n          ", "\n        "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n          flex items-center\n          group hover:no-underline focus:outline-none\n          ", "\n        "])), disabled ? "cursor-not-allowed" : "cursor-pointer"), className),
     "aria-current": isActive,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 mr-3 ", ""])), disabled ? "text-grey-300" : "text-grey-500"),

package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js

@@ -9,7 +9,7 @@ exports.ActiveLinkIndicator = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -26,7 +26,7 @@ var ActiveLinkIndicator = function ActiveLinkIndicator(_ref) {
       linksCount = _ref.linksCount;
   var showIndicator = typeof activeIndex === "number" && activeIndex >= 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-4 flex justify-center"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-4 flex justify-center"]))), className),
     style: {
       height: linksCount * LINK_HEIGHT_PX + (linksCount - 1) * LINKS_SPACING_PX
     },

package/cjs/Sidebar/SidebarNav.d.ts

@@ -1,6 +1,7 @@
 import type { FC, ReactNode } from "react";
 export declare type SidebarNavSpacing = "small" | "large";
 export declare type SidebarNavProps = {
+    id?: string;
     className?: string;
     spacing?: SidebarNavSpacing;
     label: string;

package/cjs/Sidebar/SidebarNav.js

@@ -20,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 
 var SidebarNav = function SidebarNav(_ref) {
-  var className = _ref.className,
+  var id = _ref.id,
+      className = _ref.className,
       spacingProp = _ref.spacing,
       label = _ref.label,
       children = _ref.children;
@@ -30,6 +31,7 @@ var SidebarNav = function SidebarNav(_ref) {
 
   var spacing = typeof spacingProp === "string" ? spacingProp : variant === "primary" ? "small" : "large";
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+    id: id,
     className: className,
     "aria-label": label,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {

package/cjs/Switch/Switch.js

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -92,7 +92,7 @@ var Switch = function Switch(_ref) {
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: containerRef,
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["switch\n           relative inline-flex typo-display-body rounded bg-grey-100\n           ", "\n          "])), size === "large" ? "switch-large space-x-1" : "space-x-2px"), _styles.BUTTON_SIZE_CLASSNAMES[size], className),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["switch\n           relative inline-flex typo-display-body rounded bg-grey-100\n           ", "\n          "])), size === "large" ? "switch-large space-x-1" : "space-x-2px"), _styles.BUTTON_SIZE_CLASSNAMES[size], className),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: valueIndicatorRef,
         style: valueIndicatorStyle,

package/cjs/Tables/DataTable/DataTable.js

@@ -41,9 +41,11 @@ var _Header = _interopRequireDefault(require("./components/Header"));
 
 var _Loader = _interopRequireDefault(require("./components/Loader"));
 
+var _utils2 = require("./utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+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; }
 
@@ -111,17 +113,13 @@ var DataTable = function DataTable(_ref) {
   if (process.env.NODE_ENV !== "production") {
     var _selection$length;
 
-    if (itemId === undefined && (sorting.length > 0 || selectMode !== null)) {
+    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`.");
     }
-
-    if (pagination && data.length > pagination.itemsPerPage) {
-      console.warn("`pagination.itemsPerPage` (".concat(pagination.itemsPerPage, ") doesn't match `data.length` (").concat(data.length, ")."));
-    }
   }
 
   var _useState = (0, _react.useState)(),
@@ -136,19 +134,24 @@ var DataTable = function DataTable(_ref) {
   var computedColumns = (0, _compact["default"])([selectMode === "single" && {
     id: "_internal_singleSelect",
     accessor: "_internal_singleSelect",
-    Header: false,
+    Header: function Header() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["sr-only"]))),
+        children: "Selected row"
+      });
+    },
     Cell: function Cell(_ref2) {
       var row = _ref2.row;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, {
           defaultChecked: row.selected,
           disabled: !row.selectable,
-          className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+          className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
         })
       });
     },
-    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
   }, selectMode === "multi" && {
     id: "_internal_multiSelect",
     accessor: "_internal_multiSelect",
@@ -170,7 +173,7 @@ var DataTable = function DataTable(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox["default"], {
         "aria-label": locale.selectAllButton // Small hack to position the checkbox in the center of the header
         ,
-        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["absolute mb-2.5"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["absolute mb-2.5"]))),
         checked: isChecked,
         indeterminate: isIndeterminate,
         onClick: function onClick() {
@@ -181,15 +184,15 @@ var DataTable = function DataTable(_ref) {
     Cell: function Cell(_ref3) {
       var row = _ref3.row;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox["default"], {
           checked: row.selected,
           disabled: !row.selectable,
-          className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+          className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
         })
       });
     },
-    className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
+    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
   }].concat((0, _toConsumableArray2["default"])(columns.map(function (c) {
     var _c$Header;
 
@@ -229,12 +232,18 @@ var DataTable = function DataTable(_ref) {
     })) === null || _sorting$find === void 0 ? void 0 : _sorting$find[1]) !== null && _sorting$find$ !== void 0 ? _sorting$find$ : "desc" : "none"];
   });
 
+  var shouldRenderPagination = function shouldRenderPagination() {
+    if ((0, _utils2.isDeterminatePagination)(pagination)) return pagination && pagination.totalItemsCount > 0;
+    if ((0, _utils2.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 handleToggleSort = function handleToggleSort(columnId, direction) {
+  var onToggleSort = function onToggleSort(columnId, direction) {
     var newSorting = internalSorting.map(function (_ref7) {
       var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
           colId = _ref8[0],
@@ -253,24 +262,24 @@ var DataTable = function DataTable(_ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["relative"]))),
+    className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["relative"]))),
     children: [status === "loading" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["absolute bg-white/50 z-10 w-full h-full flex items-center justify-center"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["absolute bg-white/50 z-10 w-full h-full flex items-center justify-center"]))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader["default"], {
-        className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["-mt-12"]))),
+        className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["-mt-12"]))),
         locale: locale
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Table["default"], {
-      className: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
+      className: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
       highlight: false,
-      footer: pagination !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer["default"], {
+      footer: shouldRenderPagination() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer["default"], {
         pagination: pagination,
         onChange: handlePaginationChange
       }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
         disabled: status !== "success" || rows.length === 0,
         columns: computedColumns,
-        onToggleSort: handleToggleSort,
+        onToggleSort: onToggleSort,
         sorting: internalSorting
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Body["default"], {
         rows: rows,

package/cjs/Tables/DataTable/DataTable.tailwind.js

@@ -8,6 +8,9 @@ var datatablePlugin = plugin(function (_ref) {
       theme = _ref.theme;
   addComponents({
     ".datatable": {
+      th: {
+        padding: "0 !important"
+      },
       "tr.row-disabled td": {
         cursor: "not-allowed"
       },

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

@@ -3,6 +3,7 @@ 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;

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _reactFeather = require("react-feather");
 
@@ -23,7 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["sortingDirection", "onToggleSort", "column", "disabled", "children"];
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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; }
 
@@ -43,22 +43,32 @@ var HeaderCell = function HeaderCell(_ref) {
       disabled = _ref.disabled,
       children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", _objectSpread(_objectSpread({}, props), {}, {
-    "aria-sort": sortingDirection === "desc" ? "descending" : sortingDirection === "asc" ? "ascending" : "none",
+  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 sort && !disabled && onToggleSort(id, sortingDirection === "desc" ? "asc" : sortingDirection === "asc" ? "none" : "desc");
+      return handleSorting();
     },
-    className: (0, _classnames["default"])(className, (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group ", ""])), sort && (disabled ? "cursor-not-allowed" : "cursor-pointer"))),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center"]))),
+    className: disabled ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["cursor-not-allowed"]))) : (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["cursor-pointer"])))
+  } : {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", _objectSpread(_objectSpread({}, props), {}, {
+    "aria-sort": sortingDirection === "desc" ? "descending" : sortingDirection === "asc" ? "ascending" : "none",
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(InternalCellComponent, _objectSpread(_objectSpread({}, sortButtonProps), {}, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["px-4 py-[14px] inline-flex items-center focus:outline-none focus:text-accent-600"]))), sortButtonProps.className),
       children: [children, sort ? sortingDirection === "desc" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronDown, {
         className: iconClassName
       }) : sortingDirection === "asc" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronUp, {
         className: iconClassName
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronDown, {
-        className: (0, _classnames["default"])(iconClassName, (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300 opacity-0 group-hover:opacity-100"]))))
+        className: (0, _clsx["default"])(iconClassName, (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"]))))
       }) : null]
-    })
+    }))
   }));
 };
 

package/cjs/Tables/Table/Table.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
@@ -58,7 +58,7 @@ var Table = function Table(_ref) {
       highlight = _ref$highlight === void 0 ? true : _ref$highlight,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["rounded text-grey-900 bg-white display-body"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["rounded text-grey-900 bg-white display-body"]))), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["overflow-x-auto"]))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", _objectSpread(_objectSpread({}, props), {}, {

package/cjs/Tables/Table/components/Footer.js

@@ -9,7 +9,7 @@ exports["default"] = exports.Footer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
 
@@ -26,7 +26,7 @@ var Footer = function Footer(_ref) {
     small: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["py-1 px-4"])))
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size]),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size]),
     children: children
   });
 };

package/cjs/Tabs/ContentTabs.js

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _tabs = require("@reach/tabs");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -59,7 +59,7 @@ var ContentTabs = function ContentTabs(_ref) {
     onChange: handleTabsChange,
     defaultIndex: internalTabIndex,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.TabList, {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["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,
@@ -68,7 +68,7 @@ var ContentTabs = function ContentTabs(_ref) {
             label = _ref2.label,
             value = _ref2.value;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tabs.Tab, {
-          className: (0, _classnames["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm"]))), className),
+          className: (0, _clsx["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm"]))), className),
           disabled: disabled,
           children: [label, value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge["default"], {
             size: "small",

package/cjs/Tabs/LinkTabs.js

@@ -9,7 +9,7 @@ exports.defaultUrlMatcher = exports["default"] = exports.LinkTabs = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _useLocation = _interopRequireDefault(require("react-use/lib/useLocation"));
 
@@ -73,7 +73,7 @@ var LinkTabs = function LinkTabs(_ref) {
   tabIndex = tabIndex === -1 ? 0 : tabIndex;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
     role: "tablist",
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tabs-tabbar border-b border-grey-200 flex overflow-x-auto whitespace-nowrap space-x-6"]))), className),
     children: tabs.map(function (tab, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkTab["default"], {
         tab: tab,

package/cjs/Tabs/components/LinkTab.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _Badge = _interopRequireDefault(require("../../Badge"));
 
@@ -83,7 +83,7 @@ var LinkTab = function LinkTab(_ref3) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread(_objectSpread({}, linkProps), selectionProps), {}, {
     id: tab.id,
     role: "tab",
-    className: (0, _classnames["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm hover:no-underline"]))), tab.className),
+    className: (0, _clsx["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm hover:no-underline"]))), tab.className),
     onKeyDown: function onKeyDown(evt) {
       if (tab.disabled) return;
 

package/cjs/Tag/Tag.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -41,8 +41,8 @@ var DEFAULT_TAG_LOCALE = {
 var VARIANT_CLASSNAMES = {
   accent: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-accent-100 border-accent-200 text-accent-700"]))),
   grey: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-grey-200 text-grey-700"]))),
-  blue: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-100 border-blue-200 text-blue-700"]))),
-  green: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-100 border-green-300 text-green-800"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-100 border-blue-200 text-blue-800"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-100 border-green-300 text-green-900"]))),
   orange: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-100 border-orange-300 text-orange-800"]))),
   red: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-100 border-red-200 text-red-700"]))),
   pink: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-100 border-pink-200 text-pink-700"])))
@@ -91,7 +91,7 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_TAG_LOCALE), contextLocale), propsLocale);
 
-  var tagClassName = (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["tag"]))), VARIANT_CLASSNAMES[variant], className);
+  var tagClassName = (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["tag"]))), VARIANT_CLASSNAMES[variant], className);
   var editable = Boolean(onDelete);
 
   var handleDelete = function handleDelete(evt) {
@@ -101,13 +101,12 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", _objectSpread(_objectSpread({}, props), {}, {
     className: tagClassName,
-    "aria-label": title,
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["truncate flex-1"]))),
       children: children
     }), editable && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["tag-close-button"]))), BUTTON_CLOSE_VARIANT_CLASSNAMES[variant]),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["tag-close-button"]))), BUTTON_CLOSE_VARIANT_CLASSNAMES[variant]),
       type: "button",
       onClick: handleDelete,
       "aria-label": typeof locale.removeButton === "function" ? locale.removeButton(title) : locale.removeButton,

package/cjs/TextArea/TextArea.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -33,7 +33,7 @@ var TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
       otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", _objectSpread(_objectSpread({}, otherProps), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["text-area"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["text-area"]))), className),
     ref: ref
   }));
 });