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

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

@@ -10,7 +10,7 @@ export interface IconButtonBaseProps {
     title: string;
     showTooltip?: boolean;
     /** @default "top" */
-    tooltipPlacement?: TooltipWrapperBaseProps["placement"];
+    tooltipSide?: TooltipWrapperBaseProps["side"];
     loading?: boolean;
 }
 export declare type PolymorphicIconButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, IconButtonBaseProps>;

package/esm/Button/PolymorphicIconButton.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "tooltipPlacement", "loading"];
+var _excluded = ["as", "className", "variant", "size", "icon", "title", "showTooltip", "tooltipSide", "loading"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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; }
@@ -38,8 +38,8 @@ export var PolymorphicIconButton = /*#__PURE__*/forwardRef(function (props, ref)
     Icon = props.icon,
     title = props.title,
     showTooltip = props.showTooltip,
-    _props$tooltipPlaceme = props.tooltipPlacement,
-    tooltipPlacement = _props$tooltipPlaceme === void 0 ? "top" : _props$tooltipPlaceme,
+    _props$tooltipSide = props.tooltipSide,
+    tooltipSide = _props$tooltipSide === void 0 ? "top" : _props$tooltipSide,
     _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
     cleanedProps = _objectWithoutProperties(props, _excluded);
@@ -56,7 +56,7 @@ export var PolymorphicIconButton = /*#__PURE__*/forwardRef(function (props, ref)
   return /*#__PURE__*/_jsx(TooltipWrapper, {
     delay: 500,
     show: showTooltip,
-    placement: tooltipPlacement,
+    side: tooltipSide,
     content: title,
     children: /*#__PURE__*/_jsx(Tag, _objectSpread(_objectSpread({}, cleanedProps), {}, {
       className: iconButtonClassName,

package/esm/Checkbox/Checkbox.js

@@ -61,9 +61,9 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
+    className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["group inline-flex items-center ", ""])), textPosition === "left" && "flex-row-reverse"), className),
     children: [/*#__PURE__*/_jsxs("span", {
-      className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            checkbox\n            ", "\n            ", "\n            ", "\n          "])), indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
+      className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            checkbox\n            ", "\n            ", "\n            ", "\n            ", "\n          "])), !disabled && "group-hover:border-grey-900", indeterminate && "checkbox-indeterminate", isChecked && "checkbox-checked", disabled && "checkbox-disabled"), STATUS_CLASSNAMES[status]),
       style: {
         color: checkedColor
       },
@@ -72,7 +72,7 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, checkboxProps), {}, {
         "aria-checked": indeterminate ? "mixed" : isChecked,
         id: id,
-        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n              opacity-0 absolute inset-0 cursor-pointer\n              ", "\n            "])), disabled && "cursor-not-allowed"),
+        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n              opacity-0 absolute inset-0\n              ", "\n            "])), disabled ? "cursor-not-allowed" : "cursor-pointer"),
         type: "checkbox",
         ref: ref,
         onChange: handleChange,

package/esm/Checkbox/Checkbox.tailwind.js

@@ -18,7 +18,7 @@ var checkboxPlugin = plugin(function (_ref) {
       overflow: "hidden",
       color: theme("colors.accent.600"),
       background: "linear-gradient(180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),
       borderRadius: theme("borderRadius.DEFAULT"),
       transition: "all 250ms cubic-bezier(0.23, 1, 0.32, 1)",

package/esm/HelpUnderline/HelpUnderline.d.ts

@@ -1,12 +1,11 @@
 import type { FunctionComponent } from "react";
 import { TooltipWrapperProps } from "../Tooltip";
-export interface HelpUnderlineProps {
+import type { TooltipWrapperBaseProps } from "../Tooltip/types";
+export declare type HelpUnderlineProps = {
     /** @ignore */
     className?: string;
-    placement?: TooltipWrapperProps["placement"];
-    tooltipClassName?: TooltipWrapperProps["tooltipClassName"];
     tooltipContent: TooltipWrapperProps["content"];
     children: string;
-}
+} & Omit<TooltipWrapperBaseProps, "children">;
 export declare const HelpUnderline: FunctionComponent<HelpUnderlineProps>;
 export default HelpUnderline;

package/esm/HelpUnderline/HelpUnderline.js

@@ -1,5 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _templateObject, _templateObject2;
+var _excluded = ["className", "children", "tooltipClassName", "tooltipContent"];
+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 stl from "../styles/helpers/satellitePrefixer";
 import { TooltipWrapper } from "../Tooltip";
@@ -9,17 +14,15 @@ export var HelpUnderline = function HelpUnderline(_ref) {
     children = _ref.children,
     tooltipClassName = _ref.tooltipClassName,
     tooltipContent = _ref.tooltipContent,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom" : _ref$placement;
-  return /*#__PURE__*/_jsx(TooltipWrapper, {
-    wrapperClassName: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["leading-inherit"]))), className),
-    tooltipClassName: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["max-w-64"]))), tooltipClassName),
-    content: tooltipContent,
-    placement: placement,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(TooltipWrapper, _objectSpread(_objectSpread({
+    tooltipClassName: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["max-w-64"]))), tooltipClassName),
+    content: tooltipContent
+  }, props), {}, {
     children: /*#__PURE__*/_jsx("span", {
-      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["help-underline"]))),
+      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["help-underline leading-inherit"]))), className),
       children: children
     })
-  });
+  }));
 };
 export default HelpUnderline;