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

package/cjs/Toggle/Toggle.js

@@ -11,9 +11,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -25,7 +27,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var _excluded = ["className"];
+var _excluded = ["className", "checked", "defaultChecked"];
 
 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; }
 
@@ -39,21 +41,48 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var Toggle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
+      checked = _ref.checked,
+      defaultChecked = _ref.defaultChecked,
       inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var isControlled = typeof checked === "boolean";
+
+  var _useState = (0, _react.useState)(Boolean(isControlled ? checked : defaultChecked)),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      internalChecked = _useState2[0],
+      setInternalChecked = _useState2[1];
+
+  var isChecked = Boolean(isControlled ? checked : internalChecked);
+
+  var handleChange = function handleChange(evt) {
+    var _inputProps$onChange;
+
+    (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, evt);
+
+    if (!isControlled && !evt.isDefaultPrevented()) {
+      setInternalChecked(evt.currentTarget.checked);
+    }
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     translate: "yes",
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["toggle-container"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["toggle-container"]))), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, inputProps), {}, {
+      onChange: handleChange,
+      checked: isChecked,
+      "aria-checked": isChecked,
       type: "checkbox",
+      role: "switch",
       ref: ref
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["toggle flex justify-around items-center"]))),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.Check, {
         size: 12,
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-white"])))
+        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["text-white"]))),
+        "aria-hidden": true
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.X, {
         size: 12,
-        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"])))
+        className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300"]))),
+        "aria-hidden": true
       })]
     })]
   });

package/cjs/Tooltip/OverflowTooltipWrapper.js

@@ -15,7 +15,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -104,13 +104,13 @@ var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: setTargetEl,
-      className: (0, _classnames["default"])(wrapperClassName, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["truncate"])))),
+      className: (0, _clsx["default"])(wrapperClassName, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["truncate"])))),
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       children: children
     }), tooltipText && createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
       style: styles.popper,
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper-popper"]))), tooltipClassName),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper-popper"]))), tooltipClassName),
       ref: setPopperEl,
       children: [!noArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: setArrowEl,

package/cjs/Tooltip/Tooltip.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");
 
@@ -57,7 +57,7 @@ var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       variant = _ref$variant === void 0 ? "dark" : _ref$variant,
       divProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, divProps), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["tooltip typo-display-body"]))), VARIANT_CLASSNAMES[variant], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["tooltip typo-display-body"]))), VARIANT_CLASSNAMES[variant], className),
     ref: ref
   }));
 });

package/cjs/Tooltip/TooltipWrapper.js

@@ -15,7 +15,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
 
@@ -179,7 +179,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper"]))), wrapperClassName),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper"]))), wrapperClassName),
       ref: setTargetEl
     }, isControlled ? {} : {
       onMouseEnter: function onMouseEnter() {
@@ -200,7 +200,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
       children: children
     })), showTooltip && createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
       style: styles.popper,
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper-popper"]))), tooltipClassName),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper-popper"]))), tooltipClassName),
       ref: setPopperEl,
       children: [!noArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         ref: setArrowEl,

package/cjs/UserContent/UserContent.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"));
 
@@ -25,7 +25,7 @@ var UserContent = function UserContent(_ref) {
       _ref$styled = _ref.styled,
       styled = _ref$styled === void 0 ? true : _ref$styled;
   return content ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["usercontent"]))), styled), className),
+    className: (0, _clsx["default"])((0, _defineProperty2["default"])({}, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["usercontent"]))), styled), className),
     dangerouslySetInnerHTML: {
       __html: content
     }

package/cjs/UserContent/UserContent.tailwind.js

@@ -72,7 +72,7 @@ module.exports = plugin(function (_ref) {
           "&:after": {
             content: "''",
             background: toBG("ExternalLink", {
-              stroke: theme("colors.nebula.600"),
+              stroke: theme("colors.accent.600"),
               viewBox: "0 0 24 24",
               width: "100%",
               height: "100%"

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/AnnouncementBadge/AnnouncementBadge.js

@@ -9,7 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 "classnames";
+import cx from "clsx";
 import { useLocale } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/AutoComplete/AutoComplete.js

@@ -28,7 +28,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import cx from "classnames";
+import cx from "clsx";
 import Downshift from "downshift";
 import { Component } from "react";
 import { createPortal } from "react-dom";

package/esm/Avatars/ApplicationAvatar.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { getApplicationInitials, pickApplicationColors } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -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

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import cx from "classnames";
+import cx from "clsx";
 import { useEffect, useState } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import { getUserBackgroundClassName, getUserInitials } from "./utils";
@@ -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

@@ -7,8 +7,12 @@ import stl from "../styles/helpers/satellitePrefixer";
 import hashCode from "../utils/hashCode";
 
 /** APPLICATION */
-var APPLICATION_COLORS_CLASSNAMES = [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(_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"])))];
+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-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 */
+];
 export var pickApplicationColors = function pickApplicationColors(applicationId) {
   var _APPLICATION_COLORS_C;
 
@@ -39,8 +43,12 @@ export var getApplicationInitials = function getApplicationInitials(_ref) {
 };
 /** USER */
 
-var USER_COLORS_CLASSNAMES = [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"])))];
+var USER_COLORS_CLASSNAMES = [
+/* eslint-disable @algolia/satellite/prefer-accent */
+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) {
   var _USER_COLORS_CLASSNAM;
 

package/esm/Badge/Badge.js

@@ -9,7 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 "classnames";
+import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -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 = {

package/esm/Banners/Alert/Alert.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
 
-import cx from "classnames";
+import cx from "clsx";
 import { AlertCircle, AlertOctagon, AlertTriangle, CheckCircle, X } from "react-feather";
 import { IconButton } from "../../Button";
 import stl from "../../styles/helpers/satellitePrefixer";

package/esm/Banners/Promote/Promote.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
-import cx from "classnames";
+import cx from "clsx";
 import { X } from "react-feather";
 import { IconButton } from "../../Button";
 import Card from "../../Card";

package/esm/Button/Button.js

@@ -9,7 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 "classnames";
+import cx from "clsx";
 import ProgressSpinner from "../ProgressSpinner";
 import stl from "../styles/helpers/satellitePrefixer";
 import { BUTTON_LOADER_ICON_SIZES, BUTTON_SIZE_CLASSNAMES, BUTTON_VARIANT_CLASSNAMES, getIconColorClassName } from "./styles";

package/esm/Button/Button.tailwind.js

@@ -27,14 +27,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": {
@@ -50,8 +50,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%)"),
@@ -59,8 +59,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": {
@@ -77,8 +77,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": {
@@ -87,7 +87,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/esm/Button/ButtonGroup.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import cx from "classnames";
+import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 

package/esm/Button/IconButton.js

@@ -9,7 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 "classnames";
+import cx from "clsx";
 import ProgressSpinner from "../ProgressSpinner";
 import stl from "../styles/helpers/satellitePrefixer";
 import { TooltipWrapper } from "../Tooltip";

package/esm/Card/Card.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-import cx from "classnames";
+import cx from "clsx";
 import { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import CardHeader from "./components/CardHeader";

package/esm/Card/components/CardHeader.js

@@ -10,7 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 "classnames";
+import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var CardHeader = function CardHeader(_ref) {

package/esm/Card/components/CardTitle.js

@@ -10,7 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 "classnames";
+import cx from "clsx";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var CardTitle = function CardTitle(_ref) {

package/esm/Checkbox/Checkbox.d.ts

@@ -8,7 +8,7 @@ declare type CheckboxCustomProps = {
     indeterminate?: boolean;
     /**
      * Color of the `Checkbox`
-     * @default nebula.600
+     * @default accent.600
      */
     checkedColor?: string;
 };

package/esm/Checkbox/Checkbox.js

@@ -10,7 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 "classnames";
+import cx from "clsx";
 import { forwardRef, useMemo, useState } from "react";
 import { Check, Minus } from "react-feather";
 import { useFieldState } from "../Field";

package/esm/DatePicker/DatePicker.tailwind.js

@@ -13,10 +13,10 @@ var datePickerPlugin = plugin(function (_ref) {
   var defaultRadius = theme("borderRadius.DEFAULT");
   /** @type {string} */
 
-  var nebula600 = theme("colors.nebula.600");
+  var accent600 = theme("colors.accent.600");
   /** @type {string} */
 
-  var nebula200 = theme("colors.nebula.200");
+  var accent200 = theme("colors.accent.200");
 
   var not = function not() {
     for (var _len = arguments.length, modifiers = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -71,18 +71,18 @@ var datePickerPlugin = plugin(function (_ref) {
     ".DayPicker-Day": _defineProperty({
       borderRadius: defaultRadius,
       "&--today": {
-        color: nebula600
+        color: accent600
       }
     }, "&--selected".concat(not("outside")), {
-      backgroundColor: nebula600,
+      backgroundColor: accent600,
       "&:hover": {
-        backgroundColor: nebula600
+        backgroundColor: accent600
       }
     })
   }, "&--selected".concat(not("outside")), {
-    backgroundColor: nebula600,
+    backgroundColor: accent600,
     "&:hover": {
-      backgroundColor: nebula600
+      backgroundColor: accent600
     }
   })), _defineProperty(_addComponents, prefix(".date-range-picker"), {
     "& .DayPicker-Day": (_DayPickerDay3 = {}, _defineProperty(_DayPickerDay3, "&--displayedRanges".concat(not("outside")), {
@@ -101,27 +101,27 @@ var datePickerPlugin = plugin(function (_ref) {
     }), _defineProperty(_DayPickerDay3, "&--selected".concat(not("outside")), {
       color: theme("colors.black"),
       borderRadius: "0px",
-      backgroundColor: nebula200,
+      backgroundColor: accent200,
       "&:hover": {
-        backgroundColor: nebula200
+        backgroundColor: accent200
       }
     }), _defineProperty(_DayPickerDay3, "&--start".concat(not("outside")), {
       color: theme("colors.white"),
       borderRadius: "0px",
       borderTopLeftRadius: defaultRadius,
       borderBottomLeftRadius: defaultRadius,
-      backgroundColor: nebula600,
+      backgroundColor: accent600,
       "&:hover": {
-        backgroundColor: nebula600
+        backgroundColor: accent600
       }
     }), _defineProperty(_DayPickerDay3, "&--end".concat(not("outside")), {
       color: theme("colors.white"),
       borderRadius: "0px",
       borderTopRightRadius: defaultRadius,
       borderBottomRightRadius: defaultRadius,
-      backgroundColor: nebula600,
+      backgroundColor: accent600,
       "&:hover": {
-        backgroundColor: nebula600
+        backgroundColor: accent600
       }
     }), _DayPickerDay3)
   }), _addComponents), {

package/esm/DatePicker/components/Modal.js

@@ -9,7 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 "classnames";
+import cx from "clsx";
 import { useState } from "react";
 import { usePopper } from "react-popper";
 import { ClickAwayContainer } from "../../ClickAwayContainer";