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

package/cjs/AnnouncementBadge/AnnouncementBadge.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 _Satellite = require("../Satellite");
 
@@ -56,7 +56,7 @@ var AnnouncementBadge = function AnnouncementBadge(_ref) {
 
   var variant = typeof variantProp === "string" ? variantProp : text === "internal" ? "red" : "accent";
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames["default"])(DEFAULT_CLASSNAME, variant === "red" ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-red-600"]))) : (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className),
+    className: (0, _clsx["default"])(DEFAULT_CLASSNAME, variant === "red" ? (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-red-600"]))) : (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-600"]))), SIZE_CLASSNAMES[size], className),
     children: locale[text]
   }));
 };

package/cjs/AutoComplete/AutoComplete.js

@@ -29,7 +29,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _downshift = _interopRequireDefault(require("downshift"));
 
@@ -437,7 +437,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
           className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["mr-4 shrink-0 ", ""])), disabled ? "text-grey-200" : inputFocused ? "text-accent-600" : "text-grey-500"),
           size: "1rem"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex items-center flex-1 ", " ", ""])), !noWrap && "flex-wrap", multiple && "-ml-1"), valuesClassName),
+          className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex items-center flex-1 ", " ", ""])), !noWrap && "flex-wrap", multiple && "-ml-1"), valuesClassName),
           children: [multiple && Array.isArray(value) && value.map(function (option) {
             return renderValueTemplate ? renderValueTemplate({
               option: option,
@@ -458,7 +458,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
             "data-lpignore": true
           }))]
         }), (showClearButton || endItem) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _classnames["default"])(showClearButton && endItem && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["my-2 flex self-end space-x-4"])))),
+          className: (0, _clsx["default"])(showClearButton && endItem && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["my-2 flex self-end space-x-4"])))),
           children: [endItem && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["text-grey-700 my-auto"]))),
             children: endItem
@@ -526,7 +526,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
         modifiers: MENU_POPPER_MODFIERS,
         children: function children(popper) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown"]))), menuClassName),
+            className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown"]))), menuClassName),
             style: _objectSpread(_objectSpread({}, popper.style), dropdownStyle),
             "data-popper-placement": popper.placement,
             ref: popper.ref,
@@ -571,6 +571,8 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderSelect", function (autocompleteHelpers, fieldState) {
+      var _this$context$portalT;
+
       var _this$props5 = _this.props,
           className = _this$props5.className,
           options = _this$props5.options,
@@ -588,7 +590,7 @@ var AutoComplete = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: className,
-        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/(0, _reactDom.createPortal)(_this.renderMenu(results, autocompleteHelpers), document.body)]
+        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/(0, _reactDom.createPortal)(_this.renderMenu(results, autocompleteHelpers), (_this$context$portalT = _this.context["portalTarget"]) !== null && _this$context$portalT !== void 0 ? _this$context$portalT : document.body)]
       });
     });
     return _this;

package/cjs/Avatars/ApplicationAvatar.js

@@ -9,7 +9,7 @@ exports["default"] = exports.ApplicationAvatar = 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"));
 
@@ -31,7 +31,9 @@ var ApplicationAvatar = function ApplicationAvatar(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames["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),
+    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

@@ -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");
 
@@ -42,17 +42,20 @@ var UserAvatar = function UserAvatar(_ref) {
     return setImageLoaded(false);
   }, [user.avatar]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["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

@@ -18,8 +18,12 @@ var _hashCode = _interopRequireDefault(require("../utils/hashCode"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
 
 /** APPLICATION */
-var APPLICATION_COLORS_CLASSNAMES = [(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"])(_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"])))];
+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-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 */
+];
 
 var pickApplicationColors = function pickApplicationColors(applicationId) {
   var _APPLICATION_COLORS_C;
@@ -59,8 +63,12 @@ var getApplicationInitials = function getApplicationInitials(_ref) {
 
 
 exports.getApplicationInitials = getApplicationInitials;
-var USER_COLORS_CLASSNAMES = [(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"])))];
+var USER_COLORS_CLASSNAMES = [
+/* eslint-disable @algolia/satellite/prefer-accent */
+(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 */
+];
 
 var getUserBackgroundClassName = function getUserBackgroundClassName(email) {
   var _USER_COLORS_CLASSNAM;

package/cjs/Badge/Badge.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 _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
@@ -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 = {
@@ -76,7 +76,7 @@ var Badge = function Badge(_ref) {
       size = _ref$size === void 0 ? "default" : _ref$size,
       className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var badgeClassName = (0, _classnames["default"])(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
+  var badgeClassName = (0, _clsx["default"])(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, props), {}, {
     className: badgeClassName,
     children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/cjs/Banners/Alert/Alert.js

@@ -9,7 +9,7 @@ exports["default"] = exports.Alert = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _reactFeather = require("react-feather");
 
@@ -112,14 +112,14 @@ var Alert = function Alert(_ref) {
       className = _ref.className,
       style = _ref.style,
       children = _ref.children;
-  var containerClassName = (0, _classnames["default"])(BASE_CLASSNAME, title ? (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))) : (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["py-2 px-3"]))), BACKGROUND_CLASSNAMES[variant], BORDER_CLASSNAMES[variant], usageContext !== "page" && (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["rounded border"]))), className);
+  var containerClassName = (0, _clsx["default"])(BASE_CLASSNAME, title ? (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["p-4"]))) : (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["py-2 px-3"]))), BACKGROUND_CLASSNAMES[variant], BORDER_CLASSNAMES[variant], usageContext !== "page" && (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["rounded border"]))), className);
   var internalIcon = icon === undefined ? true : icon;
   var Icon = typeof internalIcon === "boolean" && internalIcon ? ICON_VARIANTS[variant] : internalIcon;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: containerClassName,
     style: style,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["\n            shrink-0 mr-2\n            ", "\n            "])), title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
       size: "1rem"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["flex flex-1 flex-col ", ""])), onDismiss && "mr-6"),

package/cjs/Banners/Promote/Promote.js

@@ -9,7 +9,7 @@ exports["default"] = exports.Promote = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _reactFeather = require("react-feather");
 
@@ -97,7 +97,7 @@ var Promote = function Promote(_ref) {
         className: BODY_VARIANT_CLASSNAMES[variant],
         children: children
       }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex space-x-2"]))), ACTIONS_VARIANT_CLASSNAMES[variant]),
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["flex space-x-2"]))), ACTIONS_VARIANT_CLASSNAMES[variant]),
         children: actions
       })]
     }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/cjs/Button/Button.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 _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
 
@@ -68,10 +68,10 @@ var Button = function Button(props) {
     cleanedProps.disabled = true;
   }
 
-  var buttonClassName = (0, _classnames["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
+  var buttonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, _styles.BUTTON_SIZE_CLASSNAMES[size], _styles.BUTTON_VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
   var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
-  var iconClassNames = (0, _classnames["default"])((0, _styles.getIconColorClassName)(props), loading && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
-  var textClassNames = (0, _classnames["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
+  var iconClassNames = (0, _clsx["default"])((0, _styles.getIconColorClassName)(props), loading && (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
+  var textClassNames = (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["invisible"]))));
 
   if ((0, _types.isButtonType)(props) && !cleanedProps.hasOwnProperty("type")) {
     // @ts-ignore
@@ -85,12 +85,12 @@ var Button = function Button(props) {
       size: _styles.BUTTON_LOADER_ICON_SIZES[size],
       thickness: 1
     }), StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 pr-2"]))), iconClassNames)
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 pr-2"]))), iconClassNames)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["truncate text-center"]))), textClassNames),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["truncate text-center"]))), textClassNames),
       children: children
     }), EndIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndIcon, {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 pl-2"]))), iconClassNames)
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["shrink-0 pl-2"]))), iconClassNames)
     })]
   }));
 };

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/Button/ButtonGroup.js

@@ -9,7 +9,7 @@ exports["default"] = exports.ButtonGroup = 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"));
 
@@ -28,7 +28,7 @@ var ButtonGroup = function ButtonGroup(_ref) {
       Tag = _ref$as === void 0 ? "div" : _ref$as,
       children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn-group"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["btn-group"]))), className),
     children: children
   });
 };

package/cjs/Button/IconButton.js

@@ -13,7 +13,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 _ProgressSpinner = _interopRequireDefault(require("../ProgressSpinner"));
 
@@ -65,7 +65,7 @@ var IconButton = function IconButton(props) {
     cleanedProps.disabled = true;
   }
 
-  var iconButtonClassName = (0, _classnames["default"])(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
+  var iconButtonClassName = (0, _clsx["default"])(BASE_CLASSNAMES, SIZE_CLASSNAMES[size], VARIANT_CLASSNAMES[variant], cleanedProps.disabled && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["btn-disabled"]))), className);
   var loaderClassNames = (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["absolute ", ""])), (variant === "destructive" || variant === "primary") && "text-white");
 
   if ((0, _types.isButtonType)(props) && !cleanedProps.hasOwnProperty("type")) {
@@ -87,7 +87,7 @@ var IconButton = function IconButton(props) {
           size: _styles.BUTTON_LOADER_ICON_SIZES[size],
           thickness: 1
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          className: (0, _classnames["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["invisible"])))),
+          className: (0, _clsx["default"])(loading && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["invisible"])))),
           size: "1em"
         })]
       })

package/cjs/Card/Card.js

@@ -9,7 +9,7 @@ exports["default"] = exports.Card = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 
 var _react = require("react");
 
@@ -43,7 +43,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
     id: id,
     ref: ref,
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["card ", " display-body"])), fullBleed && "card-fullbleed"), ELEVATION_CLASSNAMES[elevation], className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["card ", " display-body"])), fullBleed && "card-fullbleed"), ELEVATION_CLASSNAMES[elevation], className),
     style: style,
     children: children
   });

package/cjs/Card/components/CardHeader.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"));
 
@@ -31,7 +31,7 @@ var CardHeader = function CardHeader(_ref) {
   var className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"]))), className)
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex justify-between"]))), className)
   }));
 };
 

package/cjs/Card/components/CardTitle.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"));
 
@@ -32,7 +32,7 @@ var CardTitle = function CardTitle(_ref) {
       children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-display-heading"]))), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-display-heading"]))), className),
     children: children
   }));
 };

package/cjs/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/cjs/Checkbox/Checkbox.js

@@ -15,7 +15,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");
 
@@ -90,9 +90,9 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
+    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            checkbox\n            ", "\n            ", "\n            ", "\n          "])), indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n            checkbox\n            ", "\n            ", "\n            ", "\n          "])), indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
       style: {
         color: checkedColor
       },

package/cjs/DatePicker/DatePicker.tailwind.js

@@ -18,10 +18,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++) {
@@ -76,18 +76,18 @@ var datePickerPlugin = plugin(function (_ref) {
     ".DayPicker-Day": (0, _defineProperty2["default"])({
       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
     }
   })), (0, _defineProperty2["default"])(_addComponents, prefix(".date-range-picker"), {
     "& .DayPicker-Day": (_DayPickerDay3 = {}, (0, _defineProperty2["default"])(_DayPickerDay3, "&--displayedRanges".concat(not("outside")), {
@@ -106,27 +106,27 @@ var datePickerPlugin = plugin(function (_ref) {
     }), (0, _defineProperty2["default"])(_DayPickerDay3, "&--selected".concat(not("outside")), {
       color: theme("colors.black"),
       borderRadius: "0px",
-      backgroundColor: nebula200,
+      backgroundColor: accent200,
       "&:hover": {
-        backgroundColor: nebula200
+        backgroundColor: accent200
       }
     }), (0, _defineProperty2["default"])(_DayPickerDay3, "&--start".concat(not("outside")), {
       color: theme("colors.white"),
       borderRadius: "0px",
       borderTopLeftRadius: defaultRadius,
       borderBottomLeftRadius: defaultRadius,
-      backgroundColor: nebula600,
+      backgroundColor: accent600,
       "&:hover": {
-        backgroundColor: nebula600
+        backgroundColor: accent600
       }
     }), (0, _defineProperty2["default"])(_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), {