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

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"));
 
@@ -39,7 +39,7 @@ var getNextNonDisabledSibling = function getNextNonDisabledSibling(el) {
     var _next, _next$nextElementSibl, _next2, _next3, _next3$parentElement;
 
     next = (_next$nextElementSibl = (_next2 = next) === null || _next2 === void 0 ? void 0 : _next2.nextElementSibling) !== null && _next$nextElementSibl !== void 0 ? _next$nextElementSibl : (_next3 = next) === null || _next3 === void 0 ? void 0 : (_next3$parentElement = _next3.parentElement) === null || _next3$parentElement === void 0 ? void 0 : _next3$parentElement.firstElementChild;
-  } while (Boolean((_next = next) === null || _next === void 0 ? void 0 : _next.getAttribute("data-disabled")));
+  } while (Boolean((_next = next) === null || _next === void 0 ? void 0 : _next.getAttribute("aria-disabled")));
 
   return (_ref = next) !== null && _ref !== void 0 ? _ref : null;
 };
@@ -54,7 +54,7 @@ var getPreviousNonDisabledSibling = function getPreviousNonDisabledSibling(el) {
     var _next4, _next$previousElement, _next5, _next6, _next6$parentElement;
 
     next = (_next$previousElement = (_next5 = next) === null || _next5 === void 0 ? void 0 : _next5.previousElementSibling) !== null && _next$previousElement !== void 0 ? _next$previousElement : (_next6 = next) === null || _next6 === void 0 ? void 0 : (_next6$parentElement = _next6.parentElement) === null || _next6$parentElement === void 0 ? void 0 : _next6$parentElement.lastElementChild;
-  } while (Boolean((_next4 = next) === null || _next4 === void 0 ? void 0 : _next4.getAttribute("data-disabled")));
+  } while (Boolean((_next4 = next) === null || _next4 === void 0 ? void 0 : _next4.getAttribute("aria-disabled")));
 
   return (_ref2 = next) !== null && _ref2 !== void 0 ? _ref2 : null;
 };
@@ -66,16 +66,16 @@ var LinkTab = function LinkTab(_ref3) {
   var variant = tab.variant || "accent";
   var selectionProps = selected ? {
     "aria-selected": true,
-    "data-selected": true
+    tabIndex: 0
   } : {
-    "aria-selected": false
+    "aria-selected": false,
+    tabIndex: -1
   };
   var linkProps = (0, _useLinkProps["default"])({
     href: tab.to,
+    disabled: tab.disabled,
     onClick: function onClick(evt) {
-      if (tab.disabled) {
-        evt.preventDefault();
-      } else if (_onClick) {
+      if (_onClick) {
         _onClick(evt);
       }
     }
@@ -83,9 +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),
-    tabIndex: selected ? 0 : -1,
-    "data-disabled": tab.disabled,
+    className: (0, _clsx["default"])(_utils.ACTIVE_UNDERLINE_VARIANT_CLASSNAMES[variant], (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tab pb-3 text-base leading-sm hover:no-underline"]))), tab.className),
     onKeyDown: function onKeyDown(evt) {
       if (tab.disabled) return;
 

package/cjs/Tag/Tag.js

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

package/cjs/TextArea/TextArea.js

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

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,14 +15,14 @@ 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");
 
-var _reactDom = require("react-dom");
-
 var _reactPopper = require("react-popper");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _TextWrap = _interopRequireDefault(require("../TextWrap"));
@@ -58,6 +58,7 @@ var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
       modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
       _ref$noArrow = _ref.noArrow,
       noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow;
+  var createPortal = (0, _Satellite.useCreatePortal)();
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -103,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 && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
+    }), 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,
@@ -121,7 +122,7 @@ var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
           children: tooltipText
         })
       })]
-    })), document.body)]
+    })))]
   });
 };
 

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,16 +15,16 @@ 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"));
 
 var _react = require("react");
 
-var _reactDom = require("react-dom");
-
 var _reactPopper = require("react-popper");
 
+var _Satellite = require("../Satellite");
+
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
@@ -65,6 +65,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
       noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow,
       _ref$interactive = _ref.interactive,
       interactive = _ref$interactive === void 0 ? true : _ref$interactive;
+  var createPortal = (0, _Satellite.useCreatePortal)();
   var isControlled = typeof show === "boolean";
 
   var _useState = (0, _react.useState)(!!show),
@@ -178,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() {
@@ -197,9 +198,9 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
       }
     }), {}, {
       children: children
-    })), showTooltip && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
+    })), 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,
@@ -209,7 +210,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
         variant: tooltipVariant,
         children: tooltipContent
       })]
-    })), document.body)]
+    })))]
   });
 };
 

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/index.d.ts

@@ -8,7 +8,6 @@ export * from "./AnnouncementBadge";
 export * from "./AutoComplete";
 export * from "./Avatars";
 export * from "./Badge";
-export * from "./Banner";
 export * from "./Banners";
 export * from "./Button";
 export * from "./Card";

package/cjs/index.js

@@ -128,20 +128,6 @@ Object.keys(_Badge).forEach(function (key) {
   });
 });
 
-var _Banner = require("./Banner");
-
-Object.keys(_Banner).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Banner[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Banner[key];
-    }
-  });
-});
-
 var _Banners = require("./Banners");
 
 Object.keys(_Banners).forEach(function (key) {

package/cjs/styles/tailwind.config.js

@@ -147,5 +147,5 @@ module.exports = {
       }
     }
   },
-  plugins: [require("./base.tailwind"), require("../utilities/utilities.tailwind"), require("../Typography/Typography.tailwind"), require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../KeyboardKey/KeyboardKey.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../RangeSlider/RangeSlider.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Sidebar/Sidebar.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
+  plugins: [require("./base.tailwind"), require("../utilities/utilities.tailwind"), require("../Typography/Typography.tailwind"), require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../KeyboardKey/KeyboardKey.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../RangeSlider/RangeSlider.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
 };

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/cjs/utils/useLinkProps.d.ts

@@ -1,4 +1,7 @@
 import type { AnchorHTMLAttributes } from "react";
-export declare type UseLinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "target" | "rel">;
-export declare const useLinkProps: (props: UseLinkProps) => UseLinkProps;
+export declare type UseLinkPropsArgs = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "target" | "rel" | "role" | "tabIndex"> & {
+    disabled?: boolean;
+};
+export declare type UseLinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "target" | "rel" | "role" | "tabIndex" | "aria-disabled">;
+export declare const useLinkProps: (props: UseLinkPropsArgs) => UseLinkProps;
 export default useLinkProps;

package/cjs/utils/useLinkProps.js

@@ -47,11 +47,18 @@ var useLinkProps = function useLinkProps(props) {
   var isExternal = router.isExternalLocation(parsedLocation);
   var target = (_props$target = props.target) !== null && _props$target !== void 0 ? _props$target : router.shouldOpenInNewTab(parsedLocation) ? "_blank" : undefined;
   var rel = (_props$rel = props.rel) !== null && _props$rel !== void 0 ? _props$rel : isExternal ? "noopener noreferrer" : undefined;
-  return {
+  return props.disabled ? {
+    role: "link",
+    target: target,
+    tabIndex: -1,
+    "aria-disabled": true
+  } : {
     target: target,
     href: href,
     rel: rel,
-    onClick: onClick
+    onClick: onClick,
+    role: props.role,
+    tabIndex: props.tabIndex
   };
 };
 

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";
@@ -556,6 +556,8 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderSelect", function (autocompleteHelpers, fieldState) {
+      var _this$context$portalT;
+
       var _this$props5 = _this.props,
           className = _this$props5.className,
           options = _this$props5.options,
@@ -573,7 +575,7 @@ export var AutoComplete = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/_jsxs("div", {
         className: className,
-        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/createPortal(_this.renderMenu(results, autocompleteHelpers), document.body)]
+        children: [_this.renderInput(results, autocompleteHelpers, fieldState), _this.inputContainerRef && /*#__PURE__*/createPortal(_this.renderMenu(results, autocompleteHelpers), (_this$context$portalT = _this.context["portalTarget"]) !== null && _this$context$portalT !== void 0 ? _this$context$portalT : document.body)]
       });
     });
 

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