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

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/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");
 
@@ -48,7 +48,7 @@ var HeaderCell = function HeaderCell(_ref) {
     onClick: function onClick() {
       return sort && !disabled && onToggleSort(id, sortingDirection === "desc" ? "asc" : sortingDirection === "asc" ? "none" : "desc");
     },
-    className: (0, _classnames["default"])(className, (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group ", ""])), sort && (disabled ? "cursor-not-allowed" : "cursor-pointer"))),
+    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"]))),
       children: [children, sort ? sortingDirection === "desc" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ChevronDown, {
@@ -56,7 +56,7 @@ var HeaderCell = function HeaderCell(_ref) {
       }) : 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"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300 opacity-0 group-hover:opacity-100"]))))
       }) : 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");
 
@@ -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) {
@@ -107,7 +107,7 @@ var Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       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
   }));
 });

package/cjs/Toggle/Toggle.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");
 
@@ -42,7 +42,7 @@ var Toggle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       inputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   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), {}, {
       type: "checkbox",
       ref: ref

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/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";

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";

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-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"])))
+/* 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"]))), 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"])))
+/* 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";

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/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), {