@algolia/satellite 1.0.0-beta.136 → 1.0.0-beta.137

package/cjs/Avatars/ApplicationAvatar.js

@@ -31,6 +31,8 @@ var ApplicationAvatar = function ApplicationAvatar(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    role: "img",
+    "aria-label": application.name || "Application's avatar",
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["rounded inline-flex shrink-0 items-center justify-center uppercase"]))), (0, _utils.pickApplicationColors)(application.applicationId), SIZE_CLASSNAMES[size], className),
     style: size === "small" ? {
       fontSize: "8px"

package/cjs/Avatars/UserAvatar.js

@@ -42,17 +42,20 @@ var UserAvatar = function UserAvatar(_ref) {
     return setImageLoaded(false);
   }, [user.avatar]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative overflow-hidden flex justify-center items-center rounded-full text-white uppercase transition-colors"]))), imageLoaded ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-white"]))) : (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
+    role: "img",
+    "aria-label": imageLoaded ? (user === null || user === void 0 ? void 0 : user.name) || "User's avatar" : "User's avatar",
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative overflow-hidden flex justify-center items-center rounded-full uppercase transition-colors"]))), imageLoaded ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-white"]))) : (0, _utils.getUserBackgroundClassName)((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
     style: {
       width: size,
       height: size
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    children: [!imageLoaded && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: initials
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n          w-full absolute top-0 left-0\n          transition-opacity ", "\n        "])), imageLoaded ? "opacity-100" : "opacity-0"),
       src: user.avatar,
-      alt: imageLoaded ? "".concat(user.name || user.email, "'s avatar") : "",
+      role: "presentation",
+      alt: "",
       onLoad: function onLoad() {
         return setImageLoaded(true);
       },

package/cjs/Avatars/utils.js

@@ -20,7 +20,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 /** APPLICATION */
 var APPLICATION_COLORS_CLASSNAMES = [
 /* eslint-disable @algolia/satellite/prefer-accent */
-(0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-grey-200 text-grey-800"]))), (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-200 text-nebula-800"]))), (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-200 text-blue-800"]))), (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-200 text-green-800"]))), (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-200 text-pink-800"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-200 text-red-800"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-200 text-orange-800"]))), // Darker variants
+(0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["bg-grey-200 text-grey-800"]))), (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-200 text-nebula-800"]))), (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-200 text-blue-900"]))), (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-green-200 text-green-900"]))), (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-200 text-pink-800"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-red-200 text-red-800"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-200 text-orange-900"]))), // Darker variants
 (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-300 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-300 text-nebula-900"]))), (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-300 text-blue-900"]))), (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["bg-green-300 text-green-900"]))), (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-300 text-pink-900"]))), (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["bg-red-300 text-red-900"]))), (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-300 text-orange-900"])))
 /* eslint-enable @algolia/satellite/prefer-accent */
 ];
@@ -65,8 +65,8 @@ var getApplicationInitials = function getApplicationInitials(_ref) {
 exports.getApplicationInitials = getApplicationInitials;
 var USER_COLORS_CLASSNAMES = [
 /* eslint-disable @algolia/satellite/prefer-accent */
-(0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-400"]))), (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-400"]))), (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-400"]))), (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["bg-green-400"]))), (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-400"]))), (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["bg-red-400"]))), (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-400"]))), // Darker variants
-(0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-700"]))), (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-700"]))), (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-700"]))), (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["bg-green-700"]))), (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-700"]))), (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["bg-red-700"]))), (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-700"])))
+(0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["bg-green-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["bg-red-400 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-400 text-grey-900"]))), // Darker variants
+(0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-700 text-white"]))), (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["bg-nebula-700 text-white"]))), (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-700 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["bg-green-700 text-grey-900"]))), (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-700 text-white"]))), (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["bg-red-700 text-white"]))), (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-600 text-grey-900"])))
 /* eslint-enable @algolia/satellite/prefer-accent */
 ];
 

package/cjs/Badge/Badge.js

@@ -32,7 +32,7 @@ var VARIANT_CLASSNAMES = {
   grey: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100 border-grey-200 text-grey-700"]))),
   accent: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-100 border-accent-200 text-accent-700"]))),
   blue: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-100 border-blue-200 text-blue-800"]))),
-  green: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-green-100 border-green-300 text-green-800"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-green-100 border-green-300 text-green-900"]))),
   orange: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-100 border-orange-300 text-orange-800"]))),
   red: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-red-100 border-red-200 text-red-700"]))),
   pink: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-pink-100 border-pink-200 text-pink-700"])))
@@ -40,10 +40,10 @@ var VARIANT_CLASSNAMES = {
 var VALUE_VARIANT_CLASSNAMES = {
   grey: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["text-grey-600"]))),
   accent: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["text-accent-600"]))),
-  blue: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["text-blue-700"]))),
-  green: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["text-green-700"]))),
-  orange: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-orange-700"]))),
-  red: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["text-red-600"]))),
+  blue: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["text-blue-800"]))),
+  green: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["text-green-900"]))),
+  orange: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["text-orange-800"]))),
+  red: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["text-red-700"]))),
   pink: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["text-pink-600"])))
 };
 var SIZE_CLASSNAMES = {

package/cjs/Button/Button.tailwind.js

@@ -29,14 +29,14 @@ var buttonPlugin = plugin(function (_ref) {
     ".btn-subtle": {
       color: theme("colors.grey.600"),
       "&:hover": {
-        background: rgba(theme("colors.grey.300"), 0.15)
+        backgroundColor: rgba(theme("colors.grey.300"), 0.15)
       },
       "&:focus": {
         boxShadow: "0 0 0 1px ".concat(theme("colors.accent.600"))
       },
       "&:active, &.btn-active": {
         color: theme("colors.accent.600"),
-        background: theme("colors.accent.100"),
+        backgroundColor: theme("colors.accent.100"),
         boxShadow: "none"
       },
       "&:disabled, &.btn-disabled": {
@@ -52,8 +52,8 @@ var buttonPlugin = plugin(function (_ref) {
       border: "1px solid ".concat(theme("colors.grey.200")),
       boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
       "&:hover": {
-        borderColor: theme("colors.grey.200"),
-        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)")
+        backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
+        borderColor: theme("colors.grey.200")
       },
       "&:focus": {
         backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
@@ -61,8 +61,8 @@ var buttonPlugin = plugin(function (_ref) {
         boxShadow: "\n          0 0 0 1px ".concat(theme("colors.accent.600"), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.5"), "\n        ")
       },
       "&:active, &.btn-active": {
-        backgroundImage: theme("color.grey.100"),
         borderColor: theme("colors.grey.200"),
+        backgroundImage: theme("color.grey.100"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
       },
       "&:disabled, &.btn-disabled": {
@@ -79,8 +79,8 @@ var buttonPlugin = plugin(function (_ref) {
       border: "1px solid ".concat(theme("colors.accent.700")),
       boxShadow: "\n        inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n        0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n      "),
       "&:hover": {
-        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.800"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
         borderColor: theme("colors.accent.800"),
+        backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.800"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
         boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n        ")
       },
       "&:focus": {
@@ -89,7 +89,7 @@ var buttonPlugin = plugin(function (_ref) {
         boxShadow: "\n          inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n          0 0 0 1px ").concat(theme("colors.accent.800"), ",\n          0 2px 0 1px ").concat(theme("colors.shadow.10"), "\n        ")
       },
       "&:active, &.btn-active": {
-        background: theme("colors.accent.700"),
+        backgroundColor: theme("colors.accent.700"),
         borderColor: theme("colors.accent.800"),
         boxShadow: "\n          inset 0 1px 4px 0 ".concat(rgba(theme("colors.accent.900"), 0.4), ",\n          inset 0 1px 1px 0 ").concat(rgba(theme("colors.accent.900"), 0.6), ",\n          0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n        ")
       },

package/cjs/Insert/Insert.js

@@ -13,6 +13,8 @@ var _Badge = _interopRequireDefault(require("../Badge"));
 
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
+var _onlyText = _interopRequireDefault(require("../utils/onlyText"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -53,6 +55,7 @@ var Insert = function Insert(_ref) {
       contexts = _ref.contexts,
       children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("aside", {
+    "aria-label": (0, _onlyText["default"])(title),
     className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["inline-flex flex-col self-start p-4 bg-grey-100 rounded"]))),
     children: [contexts ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["block space-x-2 mb-4"]))),

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

@@ -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, _clsx["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, _clsx["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/Tag/Tag.js

@@ -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"])))
@@ -101,7 +101,6 @@ 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"]))),

package/cjs/utils/onlyText.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+declare const onlyText: (children: ReactNode | ReactNode[]) => string;
+export default onlyText;

package/cjs/utils/onlyText.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var hasChildren = function hasChildren(element) {
+  return /*#__PURE__*/(0, _react.isValidElement)(element) && Boolean(element.props.children);
+};
+
+var childToString = function childToString(child) {
+  if (typeof child === "undefined" || child === null || typeof child === "boolean") {
+    return "";
+  }
+
+  if (JSON.stringify(child) === "{}") {
+    return "";
+  }
+
+  return child.toString();
+}; // Code stolen from `react-children-utils`
+// @see https://github.com/fernandopasik/react-children-utilities/blob/main/src/lib/onlyText.ts
+
+
+var onlyText = function onlyText(children) {
+  if (!(children instanceof Array) && ! /*#__PURE__*/(0, _react.isValidElement)(children)) {
+    return childToString(children);
+  }
+
+  return _react.Children.toArray(children).reduce(function (text, child) {
+    var newText = "";
+
+    if ( /*#__PURE__*/(0, _react.isValidElement)(child) && hasChildren(child)) {
+      newText = onlyText(child.props.children);
+    } else if ( /*#__PURE__*/(0, _react.isValidElement)(child) && !hasChildren(child)) {
+      newText = "";
+    } else {
+      newText = childToString(child);
+    }
+
+    return text.concat(newText);
+  }, "");
+};
+
+var _default = onlyText;
+exports["default"] = _default;

package/esm/Avatars/ApplicationAvatar.js

@@ -18,6 +18,8 @@ export var ApplicationAvatar = function ApplicationAvatar(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size;
   return /*#__PURE__*/_jsx("div", {
+    role: "img",
+    "aria-label": application.name || "Application's avatar",
     className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["rounded inline-flex shrink-0 items-center justify-center uppercase"]))), pickApplicationColors(application.applicationId), SIZE_CLASSNAMES[size], className),
     style: size === "small" ? {
       fontSize: "8px"

package/esm/Avatars/UserAvatar.js

@@ -29,17 +29,20 @@ export var UserAvatar = function UserAvatar(_ref) {
     return setImageLoaded(false);
   }, [user.avatar]);
   return /*#__PURE__*/_jsxs("div", {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["relative overflow-hidden flex justify-center items-center rounded-full text-white uppercase transition-colors"]))), imageLoaded ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-white"]))) : getUserBackgroundClassName((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
+    role: "img",
+    "aria-label": imageLoaded ? (user === null || user === void 0 ? void 0 : user.name) || "User's avatar" : "User's avatar",
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["relative overflow-hidden flex justify-center items-center rounded-full uppercase transition-colors"]))), imageLoaded ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-white"]))) : getUserBackgroundClassName((_user$email = user.email) !== null && _user$email !== void 0 ? _user$email : "no-email"), className),
     style: {
       width: size,
       height: size
     },
-    children: [/*#__PURE__*/_jsx("span", {
+    children: [!imageLoaded && /*#__PURE__*/_jsx("span", {
       children: initials
     }), /*#__PURE__*/_jsx("img", {
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          w-full absolute top-0 left-0\n          transition-opacity ", "\n        "])), imageLoaded ? "opacity-100" : "opacity-0"),
       src: user.avatar,
-      alt: imageLoaded ? "".concat(user.name || user.email, "'s avatar") : "",
+      role: "presentation",
+      alt: "",
       onLoad: function onLoad() {
         return setImageLoaded(true);
       },

package/esm/Avatars/utils.js

@@ -9,7 +9,7 @@ import hashCode from "../utils/hashCode";
 /** APPLICATION */
 var APPLICATION_COLORS_CLASSNAMES = [
 /* eslint-disable @algolia/satellite/prefer-accent */
-stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-200 text-grey-800"]))), stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-nebula-200 text-nebula-800"]))), stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-200 text-blue-800"]))), stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-200 text-green-800"]))), stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-pink-200 text-pink-800"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-200 text-red-800"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-orange-200 text-orange-800"]))), // Darker variants
+stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["bg-grey-200 text-grey-800"]))), stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-nebula-200 text-nebula-800"]))), stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-blue-200 text-blue-900"]))), stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-green-200 text-green-900"]))), stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-pink-200 text-pink-800"]))), stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-red-200 text-red-800"]))), stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-orange-200 text-orange-900"]))), // Darker variants
 stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-grey-300 text-grey-900"]))), stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["bg-nebula-300 text-nebula-900"]))), stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["bg-blue-300 text-blue-900"]))), stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["bg-green-300 text-green-900"]))), stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["bg-pink-300 text-pink-900"]))), stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["bg-red-300 text-red-900"]))), stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["bg-orange-300 text-orange-900"])))
 /* eslint-enable @algolia/satellite/prefer-accent */
 ];
@@ -45,8 +45,8 @@ export var getApplicationInitials = function getApplicationInitials(_ref) {
 
 var USER_COLORS_CLASSNAMES = [
 /* eslint-disable @algolia/satellite/prefer-accent */
-stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["bg-grey-400"]))), stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["bg-nebula-400"]))), stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["bg-blue-400"]))), stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["bg-green-400"]))), stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["bg-pink-400"]))), stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["bg-red-400"]))), stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["bg-orange-400"]))), // Darker variants
-stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["bg-grey-700"]))), stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["bg-nebula-700"]))), stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["bg-blue-700"]))), stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["bg-green-700"]))), stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["bg-pink-700"]))), stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["bg-red-700"]))), stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["bg-orange-700"])))
+stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["bg-grey-400 text-grey-900"]))), stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["bg-nebula-400 text-grey-900"]))), stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["bg-blue-400 text-grey-900"]))), stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["bg-green-400 text-grey-900"]))), stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["bg-pink-400 text-grey-900"]))), stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["bg-red-400 text-grey-900"]))), stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["bg-orange-400 text-grey-900"]))), // Darker variants
+stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["bg-grey-700 text-white"]))), stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["bg-nebula-700 text-white"]))), stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["bg-blue-700 text-grey-900"]))), stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["bg-green-700 text-grey-900"]))), stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["bg-pink-700 text-white"]))), stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["bg-red-700 text-white"]))), stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["bg-orange-600 text-grey-900"])))
 /* eslint-enable @algolia/satellite/prefer-accent */
 ];
 export var getUserBackgroundClassName = function getUserBackgroundClassName(email) {

package/esm/Badge/Badge.js

@@ -18,7 +18,7 @@ var VARIANT_CLASSNAMES = {
   grey: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-grey-100 border-grey-200 text-grey-700"]))),
   accent: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-accent-100 border-accent-200 text-accent-700"]))),
   blue: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-blue-100 border-blue-200 text-blue-800"]))),
-  green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-green-100 border-green-300 text-green-800"]))),
+  green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-green-100 border-green-300 text-green-900"]))),
   orange: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-orange-100 border-orange-300 text-orange-800"]))),
   red: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-red-100 border-red-200 text-red-700"]))),
   pink: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["bg-pink-100 border-pink-200 text-pink-700"])))
@@ -26,10 +26,10 @@ var VARIANT_CLASSNAMES = {
 var VALUE_VARIANT_CLASSNAMES = {
   grey: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["text-grey-600"]))),
   accent: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["text-accent-600"]))),
-  blue: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["text-blue-700"]))),
-  green: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["text-green-700"]))),
-  orange: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-orange-700"]))),
-  red: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-red-600"]))),
+  blue: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["text-blue-800"]))),
+  green: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["text-green-900"]))),
+  orange: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["text-orange-800"]))),
+  red: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["text-red-700"]))),
   pink: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["text-pink-600"])))
 };
 var SIZE_CLASSNAMES = {