@algolia/satellite 1.0.0-beta.160 → 1.0.0-beta.162

package/cjs/Tooltip/TooltipWrapper.js

@@ -1,191 +1,82 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TooltipWrapper = exports.DEFAULT_TOOLTIP_POPPER_MODIFIERS = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.TooltipWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var Tooltip = _interopRequireWildcard(require("@radix-ui/react-tooltip"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _react = require("react");
-var _reactPopper = require("react-popper");
 var _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-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) { (0, _defineProperty2["default"])(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; }
-var DEFAULT_TOOLTIP_POPPER_MODIFIERS = [{
-  name: "offset",
-  options: {
-    offset: [0, 8]
-  }
-}];
-exports.DEFAULT_TOOLTIP_POPPER_MODIFIERS = DEFAULT_TOOLTIP_POPPER_MODIFIERS;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var TooltipWrapper = function TooltipWrapper(_ref) {
   var show = _ref.show,
     _ref$delay = _ref.delay,
-    delay = _ref$delay === void 0 ? 0 : _ref$delay,
+    delay = _ref$delay === void 0 ? 250 : _ref$delay,
     _ref$hideDelay = _ref.hideDelay,
     hideDelay = _ref$hideDelay === void 0 ? 500 : _ref$hideDelay,
     tooltipContent = _ref.content,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? "bottom" : _ref$side,
+    _ref$sideOffset = _ref.sideOffset,
+    sideOffset = _ref$sideOffset === void 0 ? 0 : _ref$sideOffset,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "center" : _ref$align,
+    _ref$alignOffset = _ref.alignOffset,
+    alignOffset = _ref$alignOffset === void 0 ? 0 : _ref$alignOffset,
     _ref$tooltipVariant = _ref.tooltipVariant,
     tooltipVariant = _ref$tooltipVariant === void 0 ? "dark" : _ref$tooltipVariant,
-    wrapperClassName = _ref.wrapperClassName,
     tooltipClassName = _ref.tooltipClassName,
     children = _ref.children,
-    _ref$modifiers = _ref.modifiers,
-    modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
     _ref$noArrow = _ref.noArrow,
     noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow,
     _ref$interactive = _ref.interactive,
-    interactive = _ref$interactive === void 0 ? true : _ref$interactive;
+    interactive = _ref$interactive === void 0 ? true : _ref$interactive,
+    _ref$avoidCollisions = _ref.avoidCollisions,
+    avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions;
   var createPortal = (0, _Satellite.useCreatePortal)();
-  var isControlled = typeof show === "boolean";
-  var _useState = (0, _react.useState)(!!show),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    internalShow = _useState2[0],
-    setInternalShow = _useState2[1];
-  var transitioning = (0, _react.useRef)(undefined);
-  (0, _react.useEffect)(function () {
-    if (!isControlled) return;
-    setInternalShow(show);
-    transitioning.current = undefined;
-  }, [isControlled, show]);
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    targetEl = _useState4[0],
-    setTargetEl = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    popperEl = _useState6[0],
-    setPopperEl = _useState6[1];
-  var _useState7 = (0, _react.useState)(null),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    arrowEl = _useState8[0],
-    setArrowEl = _useState8[1];
-  var _usePopper = (0, _reactPopper.usePopper)(targetEl, popperEl, {
-      placement: placement,
-      strategy: "fixed",
-      modifiers: [].concat(DEFAULT_TOOLTIP_POPPER_MODIFIERS, [{
-        name: "arrow",
-        options: {
-          element: arrowEl
-        }
-      }], (0, _toConsumableArray2["default"])(modifiers))
-    }),
-    styles = _usePopper.styles,
-    attributes = _usePopper.attributes,
-    update = _usePopper.update;
-  var showTooltip = Boolean(internalShow && targetEl);
-  var transitionTimeoutId = (0, _react.useRef)();
-  var scheduleTransition = (0, _react.useCallback)(function (show, delay) {
-    transitioning.current = show ? "will-show" : "will-hide";
-    transitionTimeoutId.current = setTimeout(function () {
-      transitioning.current = undefined;
-      setInternalShow(show);
-    }, delay);
-  }, []);
-  var cancelTransition = (0, _react.useCallback)(function () {
-    transitioning.current = undefined;
-    if (transitionTimeoutId.current) {
-      clearTimeout(transitionTimeoutId.current);
-      transitionTimeoutId.current = undefined;
-    }
-  }, []);
-  (0, _react.useEffect)(function () {
-    return function () {
-      return cancelTransition();
-    };
-  }, [cancelTransition]);
-  var scheduleShowTooltip = (0, _react.useCallback)(function () {
-    if (transitioning.current === "will-show") return;
-    cancelTransition();
-    if (internalShow) return;
-    scheduleTransition(true, delay);
-  }, [cancelTransition, delay, internalShow, scheduleTransition]);
-  var scheduleHideTooltip = (0, _react.useCallback)(function () {
-    if (transitioning.current === "will-hide") return;
-    cancelTransition();
-    if (!internalShow) return;
-    scheduleTransition(false, hideDelay);
-  }, [cancelTransition, hideDelay, internalShow, scheduleTransition]);
-  (0, _react.useEffect)(function () {
-    if (isControlled || !showTooltip) return;
-    var handleMouseMove = (0, _throttle["default"])(function (evt) {
-      var target = evt.target;
-      var isWithinBounds = [targetEl, interactive ? popperEl : null].some(function (ref) {
-        return Boolean(ref && (ref === target || ref.contains(target)));
-      });
-      if (isWithinBounds) {
-        scheduleShowTooltip();
-      } else {
-        scheduleHideTooltip();
-      }
-    }, 16, {
-      leading: true
-    });
-    document.addEventListener("mousemove", handleMouseMove);
-    return function () {
-      handleMouseMove.cancel();
-      document.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, [isControlled, popperEl, scheduleHideTooltip, scheduleShowTooltip, showTooltip, targetEl, interactive]);
-
-  /**
-   * Workaround:
-   * When the tooltip content size changes, popper doesn't necessarily update the tooltip positionning correctly.
-   * It's going to trigger some unnecessary updates, but it shouldn't be terribly expensive as update() is intended for "high-frequency updates"
-   */
-  (0, _react.useEffect)(function () {
-    update === null || update === void 0 ? void 0 : update();
-  }, [children, update]);
   if (!tooltipContent) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: children
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper"]))), wrapperClassName),
-      ref: setTargetEl
-    }, isControlled ? {} : {
-      onMouseEnter: function onMouseEnter() {
-        return scheduleShowTooltip();
-      },
-      onFocus: function onFocus() {
-        return scheduleShowTooltip();
-      },
-      onMouseLeave: function onMouseLeave() {
-        return scheduleHideTooltip();
-      },
-      onBlur: function onBlur(evt) {
-        if (evt.relatedTarget === null || !interactive || !(popperEl !== null && popperEl !== void 0 && popperEl.contains(evt.relatedTarget))) {
-          scheduleHideTooltip();
-        }
-      }
-    }), {}, {
-      children: children
-    })), showTooltip && createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
-      style: styles.popper,
-      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,
-        style: styles.arrow,
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper-arrow ", ""])), tooltipVariant === "light" && "tooltip-wrapper-arrow-light")
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
-        variant: tooltipVariant,
-        children: tooltipContent
-      })]
-    })))]
+  var isReactText = typeof children === "string" || typeof children === "number";
+  if (!isReactText && children.type === _react.Fragment) throw new Error("TooltipWrapper component doesn't accept a Fragment as a child.");
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip.Provider, {
+    delayDuration: delay,
+    skipDelayDuration: 300,
+    disableHoverableContent: !interactive,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tooltip.Root, {
+      open: show,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip.Trigger, {
+        asChild: !isReactText,
+        children: children
+      }), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tooltip.Content, {
+        className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["tooltip-content"]))), tooltipClassName),
+        style: {
+          "--tooltip-hide-delay": "".concat(hideDelay, "ms")
+        },
+        side: side,
+        sideOffset: (noArrow ? 8 : 4) + sideOffset,
+        align: align,
+        alignOffset: alignOffset,
+        avoidCollisions: avoidCollisions,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
+          variant: tooltipVariant,
+          children: tooltipContent
+        }), !noArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip.Arrow, {
+          width: 8,
+          height: 4,
+          className: (0, _clsx["default"])(tooltipVariant === "light" ? (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tooltip-arrow-light"]))) : (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["tooltip-arrow-dark"]))))
+        })]
+      }))]
+    })
   });
 };
-exports.TooltipWrapper = TooltipWrapper;
-var _default = TooltipWrapper;
-exports["default"] = _default;
+exports.TooltipWrapper = TooltipWrapper;

package/cjs/Tooltip/types.d.ts

@@ -1,14 +1,65 @@
-import type { Placement, StrictModifiers } from "@popperjs/core";
+import type { TooltipContentProps } from "@radix-ui/react-tooltip";
 import type { ReactNode } from "react";
 import type { TooltipVariant } from "./Tooltip";
 export interface TooltipWrapperBaseProps {
-    /** Defines where to open the menu */
-    placement?: Placement;
+    /**
+     * Defines how long you should hover the wrapped element before displaying the tooltip (in ms).
+     * @default 250
+     */
+    delay?: number;
+    /**
+     * Defines how long the tooltip should stay displayed when leaving the wrapped element (in ms).
+     * @default 500
+     */
+    hideDelay?: number;
+    /**
+     * Defines the side of the trigger element where the tooltip should be displayed.
+     * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+     * @default "bottom"
+     */
+    side?: TooltipContentProps["side"];
+    /**
+     * Defines the offset in pixels of the tooltip from the trigger element.
+     * @default 0
+     */
+    sideOffset?: TooltipContentProps["sideOffset"];
+    /**
+     * Defines the preferred alignment of the tooltip against the trigger element.
+     * May change when collisions occur.
+     * @default "center"
+     */
+    align?: TooltipContentProps["align"];
+    /**
+     * Defines the offset in pixels of the tooltip along the trigger element.
+     * It only works when the `align` option is set to "start" or "end".
+     * @default 0
+     */
+    alignOffset?: TooltipContentProps["alignOffset"];
+    /**
+     * Defines the variant of the tooltip.
+     * @default "dark"
+     */
     tooltipVariant?: TooltipVariant;
+    /**
+     * Defines the CSS class to be applied to the tooltip element.
+     */
     tooltipClassName?: string;
-    wrapperClassName?: string;
-    /** Modifiers for the Popper menu */
-    modifiers?: StrictModifiers[];
+    /**
+     * Defines if the tooltip arrow should be hidden.
+     * @default false
+     */
     noArrow?: boolean;
+    /**
+     * Defines whether the tooltip itself should be considered when computing the tooltip target.
+     * Useful when the tooltip itself contains selectable text or interactive elements, and thus
+     * shouldn't be dismissed when the mouse hovers it.
+     * @default true
+     */
+    interactive?: boolean;
+    /**
+     * Defines whether the tooltip should avoid collisions with the viewport.
+     * @default true
+     */
+    avoidCollisions?: boolean;
     children: ReactNode;
 }

package/cjs/Tooltip/utils.d.ts

@@ -0,0 +1 @@
+export declare const isOverflowing: (element: HTMLElement) => boolean;

package/cjs/Tooltip/utils.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isOverflowing = void 0;
+var isOverflowing = function isOverflowing(element) {
+  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+};
+exports.isOverflowing = isOverflowing;

package/cjs/UserContent/UserContent.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 export interface UserContentProps {
     styled?: boolean;
     className?: string;
     content?: string;
 }
-export declare const UserContent: ({ className, content, styled }: UserContentProps) => JSX.Element | null;
+export declare const UserContent: VFC<UserContentProps>;
 export default UserContent;

package/cjs/index.d.ts

@@ -34,9 +34,10 @@ export * from "./ProgressBar";
 export * from "./ProgressSpinner";
 export * from "./RadioGroup";
 export * from "./RangeSlider";
-export * from "./ScrollIndicator";
 export * from "./Satellite";
+export * from "./ScrollIndicator";
 export * from "./Select";
+export * from "./Separator";
 export * from "./Sidebar";
 export * from "./Switch";
 export * from "./Tables";

package/cjs/index.js

@@ -422,27 +422,27 @@ Object.keys(_RangeSlider).forEach(function (key) {
     }
   });
 });
-var _ScrollIndicator = require("./ScrollIndicator");
-Object.keys(_ScrollIndicator).forEach(function (key) {
+var _Satellite = require("./Satellite");
+Object.keys(_Satellite).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ScrollIndicator[key]) return;
+  if (key in exports && exports[key] === _Satellite[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _ScrollIndicator[key];
+      return _Satellite[key];
     }
   });
 });
-var _Satellite = require("./Satellite");
-Object.keys(_Satellite).forEach(function (key) {
+var _ScrollIndicator = require("./ScrollIndicator");
+Object.keys(_ScrollIndicator).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Satellite[key]) return;
+  if (key in exports && exports[key] === _ScrollIndicator[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Satellite[key];
+      return _ScrollIndicator[key];
     }
   });
 });
@@ -458,6 +458,18 @@ Object.keys(_Select).forEach(function (key) {
     }
   });
 });
+var _Separator = require("./Separator");
+Object.keys(_Separator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Separator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Separator[key];
+    }
+  });
+});
 var _Sidebar = require("./Sidebar");
 Object.keys(_Sidebar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/styles/tailwind.config.js

@@ -140,5 +140,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("../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")]
+  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("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Separator/Separator.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/types.d.ts

@@ -7,9 +7,9 @@ export declare type ColorVariant = "accent" | "grey" | "green" | "blue" | "orang
  * Ensures at least one type is required
  * See https://stackoverflow.com/a/48244432/5903923
  */
-export declare type AtLeastOne<T, U = {
-    [K in keyof T]: Pick<T, K>;
-}> = Partial<T> & U[keyof U];
+export declare type AtLeastOne<Type, Union = {
+    [Key in keyof Type]: Pick<Type, Key>;
+}> = Partial<Type> & Union[keyof Union];
 /**
  * Makes an optional property required
  * See https://bobbyhadz.com/blog/typescript-make-property-required
@@ -17,12 +17,12 @@ export declare type AtLeastOne<T, U = {
 export declare type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
     [Property in Key]-?: Type[Property];
 };
-declare type Without<T, U> = {
-    [P in Exclude<keyof T, keyof U>]?: never;
+declare type Without<Type, Union> = {
+    [Property in Exclude<keyof Type, keyof Union>]?: never;
 };
 /**
  * Makes two types mutually exclusive
  * https://stackoverflow.com/questions/42123407/does-typescript-support-mutually-exclusive-types
  */
-export declare type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+export declare type XOR<Type, Union> = Type | Union extends object ? (Without<Type, Union> & Union) | (Without<Union, Type> & Type) : Type | Union;
 export {};

package/esm/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, HTMLAttributes } from "react";
+import type { HTMLAttributes, VFC } from "react";
 export declare type AnnouncementBadgeSizes = "default" | "small";
 export declare type AnnouncementBadgeTexts = "new" | "beta" | "internal" | "pilot";
 export declare type AnnouncementBadgeLocale = {
@@ -17,5 +17,5 @@ export interface AnnouncementBadgeProps extends HTMLAttributes<HTMLSpanElement>
     locale?: AnnouncementBadgeLocale;
     children?: never;
 }
-export declare const AnnouncementBadge: FunctionComponent<AnnouncementBadgeProps>;
+export declare const AnnouncementBadge: VFC<AnnouncementBadgeProps>;
 export default AnnouncementBadge;

package/esm/AutoComplete/AutoComplete.tailwind.js

@@ -21,9 +21,12 @@ var autoCompletePlugin = plugin(function (_ref) {
       cursor: "text",
       backgroundColor: theme("colors.white"),
       borderRadius: theme("borderRadius.DEFAULT"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       transition: "all 100ms ease-in-out",
+      "&:not(.autocomplete-disabled):hover": {
+        borderColor: theme("colors.grey.600")
+      },
       // Workaround for ie
       "&::after": {
         content: '" "',

package/esm/AutoComplete/components/AutoCompleteEmptyState.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import { MedallionVariant } from "../../Medallion";
 import type { IconComponentType } from "../../types";
 export interface AutoCompleteEmptyStateProps {
@@ -9,5 +9,5 @@ export interface AutoCompleteEmptyStateProps {
     /** Optional description to explain why the screen is empty or define next steps */
     description?: ReactNode;
 }
-export declare const AutoCompleteEmptyState: ({ icon, variant, title, description, }: AutoCompleteEmptyStateProps) => JSX.Element;
+export declare const AutoCompleteEmptyState: VFC<AutoCompleteEmptyStateProps>;
 export default AutoCompleteEmptyState;

package/esm/AutoComplete/components/DefaultOptionItem.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { AutoCompleteLocale, OptionItemProps } from "../types";
 declare type DefaultOptionItemProps = OptionItemProps & {
     locale?: AutoCompleteLocale;
 };
-declare const DefaultOptionItem: ({ option, multiple, locale }: DefaultOptionItemProps) => JSX.Element;
+declare const DefaultOptionItem: VFC<DefaultOptionItemProps>;
 export default DefaultOptionItem;

package/esm/Avatars/ApplicationAvatar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { ApplicationAvatarSize, MinimalApplication } from "./types";
 export interface ApplicationAvatarProps {
     /** A minimal application object containing `applicationID` and `name`. */
@@ -9,5 +9,5 @@ export interface ApplicationAvatarProps {
     className?: string;
 }
 /** The `ApplicationAvatar` is used as a visual representation of an application. */
-export declare const ApplicationAvatar: ({ className, application, size }: ApplicationAvatarProps) => JSX.Element;
+export declare const ApplicationAvatar: VFC<ApplicationAvatarProps>;
 export default ApplicationAvatar;

package/esm/Avatars/UserAvatar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { VFC } from "react";
 import type { MinimalUser } from "./types";
 export declare type UserAvatarLocale = {
     fallbackText?: string;
@@ -16,5 +16,5 @@ export interface UserAvatarProps {
     locale?: UserAvatarLocale;
 }
 /** The `UserAvatar` is used as a visual representation of a user. */
-export declare const UserAvatar: ({ className, user, size, locale: propsLocale }: UserAvatarProps) => JSX.Element;
+export declare const UserAvatar: VFC<UserAvatarProps>;
 export default UserAvatar;

package/esm/Badge/Badge.d.ts

@@ -1,8 +1,8 @@
-import type { FunctionComponent, HTMLAttributes, ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 import type { AtLeastOne, ColorVariant, IconComponentType } from "../types";
 export declare type BadgeSizes = "small" | "medium" | "large";
 export declare type BadgeVariants = ColorVariant | "pink";
-interface BaseBadgeProps extends HTMLAttributes<HTMLDivElement> {
+interface BaseBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** @default "grey" */
     variant?: BadgeVariants;
     /** @default "default" */
@@ -31,5 +31,5 @@ export declare type BadgeProps = BaseBadgeProps & AtLeastOne<BadgeContentProps>;
  * - To indicate problem with an index
  * - To display numeric values for multiple items (similar to a "tag cloud")
  */
-export declare const Badge: FunctionComponent<BadgeProps>;
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Badge;

package/esm/Badge/Badge.js

@@ -6,6 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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 "clsx";
+import { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import isRenderedChild from "../utils/isRenderedChild";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -41,7 +42,7 @@ var SIZE_CLASSNAMES = {
  * - To indicate problem with an index
  * - To display numeric values for multiple items (similar to a "tag cloud")
  */
-export var Badge = function Badge(_ref) {
+export var Badge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     value = _ref.value,
     Icon = _ref.icon,
@@ -52,7 +53,8 @@ export var Badge = function Badge(_ref) {
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var badgeClassName = cx(BASE_CLASSNAMES, VARIANT_CLASSNAMES[variant], SIZE_CLASSNAMES[size], className);
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
     className: badgeClassName,
     children: [Icon && /*#__PURE__*/_jsx("span", {
       children: /*#__PURE__*/_jsx(Icon, {
@@ -65,5 +67,6 @@ export var Badge = function Badge(_ref) {
       children: value
     })]
   }));
-};
+});
+Badge.displayName = "Badge";
 export default Badge;

package/esm/Banners/Alert/Alert.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, FunctionComponent, ReactNode } from "react";
+import type { CSSProperties, ReactNode, VFC } from "react";
 import type { ColorVariant, IconComponentType } from "../../types";
 export declare type AlertContextType = "page" | "section";
 export declare type AlertColorVariant = Exclude<ColorVariant, "blue">;
@@ -74,5 +74,5 @@ export interface AlertProps {
 * ## Accessibility
 * TODO
  */
-export declare const Alert: FunctionComponent<AlertProps>;
+export declare const Alert: VFC<AlertProps>;
 export default Alert;

package/esm/Banners/BigBertha/BigBertha.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 import type { IconComponentType } from "../../types";
 export interface BigBerthaProps {
     icon?: IconComponentType;
@@ -37,5 +37,5 @@ export interface BigBerthaProps {
 * ## Accessibility
 * TODO
  */
-export declare const BigBertha: FC<BigBerthaProps>;
+export declare const BigBertha: VFC<BigBerthaProps>;
 export default BigBertha;

package/esm/Banners/Promote/Promote.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode, VFC } from "react";
 declare type PromoteVariants = "large" | "compact";
 interface CompactPromoteProps {
     variant?: Extract<PromoteVariants, "compact">;
@@ -53,5 +53,5 @@ export declare type PromoteProps = {
 * ## Accessibility
 * TODO
  */
-export declare const Promote: FC<PromoteProps>;
+export declare const Promote: VFC<PromoteProps>;
 export default Promote;