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

package/esm/Tooltip/Tooltip.js

@@ -18,18 +18,18 @@ var VARIANT_CLASSNAMES = {
  * Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.
  *
  * Use tooltips to identify or add a small amount of information to an element. Typically, tooltips are used to help users understand the meaning or purpose of icons, showing the full version of truncated text, or displaying the alt text for an image. Tooltips do not receive input focus.
- * When writing tooltips, be short and concise.. When you need to add more than a single line of extra information, consider using inline dialogs instead.
+ * When writing tooltips, be short and concise. When you need to add more than a single line of extra information, consider using inline dialogs instead.
  *
  * The position of tooltips is flexible and will change depending on how close the element is to the edge of the screen.
  *
  * ## Best practices
  * Tooltips should:
  *
- * - Provide useful, additional information or clarification
- * - Succinctly describe or expand on the element they point to
- * - Not be used to communicate critical information, including errors in forms or other interaction feedback
- * - Not contain any links or buttons
- * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience
+ * - Provide useful, additional information or clarification.
+ * - Succinctly describe or expand on the element they point to.
+ * - Not be used to communicate critical information, including errors in forms or other interaction feedback.
+ * - Not contain any links, inputs, or buttons.
+ * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
  */
 export var Tooltip = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,

package/esm/Tooltip/Tooltip.tailwind.js

@@ -4,12 +4,12 @@ var plugin = _plugin;
 var tooltipPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
-  var arrowSize = 4;
-
   /** @type {string} */
   var tooltipDarkBackground = theme("colors.grey.900");
   /** @type {string} */
   var tooltipLightBackground = theme("colors.white");
+  var animationDuration = "100ms";
+  var animationEasing = "cubic-bezier(.17,.61,.4,.95)";
   addComponents({
     ".tooltip": {
       padding: "".concat(theme("spacing.1"), " ").concat(theme("spacing.2")),
@@ -38,76 +38,98 @@ var tooltipPlugin = plugin(function (_ref) {
     }
   });
   addComponents({
-    ".tooltip-wrapper": {
-      display: "inline-block",
-      lineHeight: "0",
-      outline: "0px"
-    },
-    ".tooltip-wrapper-popper": {
-      zIndex: theme("zIndex.tooltip"),
-      userSelect: "none",
-      maxWidth: theme("spacing.64")
-    },
-    ".tooltip-wrapper-arrow": {
-      position: "absolute",
-      display: "block",
-      width: "".concat(arrowSize, "px"),
-      height: "".concat(arrowSize, "px"),
-      border: "".concat(arrowSize, "px solid transparent"),
-      color: tooltipDarkBackground,
-      '[data-popper-placement^="right"] > &': {
-        left: "".concat(-arrowSize, "px"),
-        borderLeft: "none",
-        borderRightColor: "currentColor"
-      },
-      '[data-popper-placement^="left"] > &': {
-        right: "".concat(-arrowSize, "px"),
-        borderRight: "none",
-        borderLeftColor: "currentColor"
+    /* eslint-disable @algolia/satellite/prefer-stl-helper */
+    "@keyframes stl-tooltip-slide-down-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateY(-2px)"
       },
-      '[data-popper-placement^="top"] > &': {
-        top: "100%",
-        borderBottom: "none",
-        borderTopColor: "currentColor"
+      to: {
+        opacity: "1",
+        transform: "translateY(0)"
+      }
+    },
+    "@keyframes stl-tooltip-slide-left-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateX(2px)"
       },
-      '[data-popper-placement^="bottom"] > &': {
-        top: "".concat(-arrowSize, "px"),
-        borderTop: "none",
-        borderBottomColor: "currentColor"
+      to: {
+        opacity: "1",
+        transform: "translateX(0)"
       }
     },
-    ".tooltip-wrapper-arrow-light": {
-      color: theme("colors.shadow.10"),
-      "&::after": {
-        position: "absolute",
-        content: '" "',
-        border: "".concat(arrowSize - 1, "px solid transparent")
+    "@keyframes stl-tooltip-slide-up-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateY(2px)"
       },
-      '[data-popper-placement^="left"] > &::after': {
-        right: "1px",
-        transform: "translate(0, -50%)",
-        borderRight: "none",
-        borderLeftColor: tooltipLightBackground
+      to: {
+        opacity: "1",
+        transform: "translateY(0)"
+      }
+    },
+    "@keyframes stl-tooltip-slide-right-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateX(-2px)"
       },
-      '[data-popper-placement^="right"] > &::after': {
-        left: "1px",
-        transform: "translate(0, -50%)",
-        borderLeft: "none",
-        borderRightColor: tooltipLightBackground
+      to: {
+        opacity: "1",
+        transform: "translateX(0)"
+      }
+    },
+    "@keyframes stl-tooltip-fade-out": {
+      from: {
+        opacity: "1"
       },
-      '[data-popper-placement^="top"] > &::after': {
-        bottom: "1px",
-        transform: "translate(-50%, 0)",
-        borderBottom: "none",
-        borderTopColor: tooltipLightBackground
+      to: {
+        opacity: "0"
+      }
+    },
+    ".tooltip-content": {
+      zIndex: theme("zIndex.tooltip"),
+      userSelect: "none",
+      maxWidth: theme("spacing.64"),
+      // Even if the user has enabled reduced motion or animate is `false`,
+      // we still need to keep this animation to handle the hide delay
+      '&[data-state="closed"]': {
+        animation: "stl-tooltip-fade-out 0ms linear var(--tooltip-hide-delay)"
       },
-      '[data-popper-placement^="bottom"] > &::after': {
-        top: "1px",
-        transform: "translate(-50%, 0)",
-        borderTop: "none",
-        borderBottomColor: tooltipLightBackground
+      "@media (prefers-reduced-motion: no-preference)": {
+        willChange: "transform, opacity",
+        '&[data-state="delayed-open"]': {
+          '&[data-side="top"]': {
+            animation: "stl-tooltip-slide-down-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          },
+          '&[data-side="right"]': {
+            animation: "stl-tooltip-slide-left-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          },
+          '&[data-side="left"]': {
+            animation: "stl-tooltip-slide-right-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          },
+          '&[data-side="bottom"]': {
+            animation: "stl-tooltip-slide-up-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          }
+        },
+        '&[data-state="closed"]': {
+          animation: "stl-tooltip-fade-out ".concat(animationDuration, " ").concat(animationEasing, " var(--tooltip-hide-delay)")
+        }
       }
+    },
+    ".tooltip-arrow-dark": {
+      fill: tooltipDarkBackground
+    },
+    // Since Radix relies on a SVG for the arrow, we use the stroke property
+    // with a dash array/offset to create a border around the arrow.
+    ".tooltip-arrow-light": {
+      fill: tooltipLightBackground,
+      stroke: theme("colors.shadow.10"),
+      strokeWidth: "3px",
+      strokeDasharray: "36",
+      strokeDashoffset: "-30"
     }
+    /* eslint-enable @algolia/satellite/prefer-stl-helper */
   });
 });
 export default tooltipPlugin;

package/esm/Tooltip/TooltipWrapper.d.ts

@@ -1,28 +1,15 @@
-import type { FunctionComponent, ReactNode } from "react";
-import { StrictModifier } from "react-popper";
+import { ReactElement, ReactNode, ReactText } from "react";
 import type { TooltipWrapperBaseProps } from "./types";
-export declare const DEFAULT_TOOLTIP_POPPER_MODIFIERS: StrictModifier[];
 export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
-    show?: boolean;
-    /**
-     * Controls how long you should hover the wrapped element before displaying the tooltip (in ms)
-     * @default 0
-     * */
-    delay?: number;
     /**
-     * Controls how long the tooltip should stay displayed when leaving the wrapped element (in ms)
-     * @default 500
-     * */
-    hideDelay?: number;
+     * Defines whether the tooltip should be displayed or not.
+     * @default undefined
+     */
+    show?: boolean;
     /**
-     * Indicates 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
+     * Defines the content of the tooltip.
      */
-    interactive?: boolean;
     content: ReactNode;
-    children: ReactNode;
+    children: ReactElement | ReactText;
 }
-export declare const TooltipWrapper: FunctionComponent<TooltipWrapperProps>;
-export default TooltipWrapper;
+export declare const TooltipWrapper: ({ show, delay, hideDelay, content: tooltipContent, side, sideOffset, align, alignOffset, tooltipVariant, tooltipClassName, children, noArrow, interactive, avoidCollisions, }: TooltipWrapperProps) => JSX.Element;

package/esm/Tooltip/TooltipWrapper.js

@@ -1,183 +1,73 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _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 * as Tooltip from "@radix-ui/react-tooltip";
 import cx from "clsx";
-import throttle from "lodash/throttle";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { usePopper } from "react-popper";
+import { Fragment } from "react";
 import { useCreatePortal } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
-import Tooltip from "./Tooltip";
+import TooltipInternal from "./Tooltip";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var DEFAULT_TOOLTIP_POPPER_MODIFIERS = [{
-  name: "offset",
-  options: {
-    offset: [0, 8]
-  }
-}];
 export 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 = useCreatePortal();
-  var isControlled = typeof show === "boolean";
-  var _useState = useState(!!show),
-    _useState2 = _slicedToArray(_useState, 2),
-    internalShow = _useState2[0],
-    setInternalShow = _useState2[1];
-  var transitioning = useRef(undefined);
-  useEffect(function () {
-    if (!isControlled) return;
-    setInternalShow(show);
-    transitioning.current = undefined;
-  }, [isControlled, show]);
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    targetEl = _useState4[0],
-    setTargetEl = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    popperEl = _useState6[0],
-    setPopperEl = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    arrowEl = _useState8[0],
-    setArrowEl = _useState8[1];
-  var _usePopper = usePopper(targetEl, popperEl, {
-      placement: placement,
-      strategy: "fixed",
-      modifiers: [].concat(DEFAULT_TOOLTIP_POPPER_MODIFIERS, [{
-        name: "arrow",
-        options: {
-          element: arrowEl
-        }
-      }], _toConsumableArray(modifiers))
-    }),
-    styles = _usePopper.styles,
-    attributes = _usePopper.attributes,
-    update = _usePopper.update;
-  var showTooltip = Boolean(internalShow && targetEl);
-  var transitionTimeoutId = useRef();
-  var scheduleTransition = useCallback(function (show, delay) {
-    transitioning.current = show ? "will-show" : "will-hide";
-    transitionTimeoutId.current = setTimeout(function () {
-      transitioning.current = undefined;
-      setInternalShow(show);
-    }, delay);
-  }, []);
-  var cancelTransition = useCallback(function () {
-    transitioning.current = undefined;
-    if (transitionTimeoutId.current) {
-      clearTimeout(transitionTimeoutId.current);
-      transitionTimeoutId.current = undefined;
-    }
-  }, []);
-  useEffect(function () {
-    return function () {
-      return cancelTransition();
-    };
-  }, [cancelTransition]);
-  var scheduleShowTooltip = useCallback(function () {
-    if (transitioning.current === "will-show") return;
-    cancelTransition();
-    if (internalShow) return;
-    scheduleTransition(true, delay);
-  }, [cancelTransition, delay, internalShow, scheduleTransition]);
-  var scheduleHideTooltip = useCallback(function () {
-    if (transitioning.current === "will-hide") return;
-    cancelTransition();
-    if (!internalShow) return;
-    scheduleTransition(false, hideDelay);
-  }, [cancelTransition, hideDelay, internalShow, scheduleTransition]);
-  useEffect(function () {
-    if (isControlled || !showTooltip) return;
-    var handleMouseMove = throttle(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"
-   */
-  useEffect(function () {
-    update === null || update === void 0 ? void 0 : update();
-  }, [children, update]);
   if (!tooltipContent) return /*#__PURE__*/_jsx(_Fragment, {
     children: children
   });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
-      className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["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__*/_jsxs("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
-      style: styles.popper,
-      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tooltip-wrapper-popper"]))), tooltipClassName),
-      ref: setPopperEl,
-      children: [!noArrow && /*#__PURE__*/_jsx("div", {
-        ref: setArrowEl,
-        style: styles.arrow,
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["tooltip-wrapper-arrow ", ""])), tooltipVariant === "light" && "tooltip-wrapper-arrow-light")
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        variant: tooltipVariant,
-        children: tooltipContent
-      })]
-    })))]
+  var isReactText = typeof children === "string" || typeof children === "number";
+  if (!isReactText && children.type === Fragment) throw new Error("TooltipWrapper component doesn't accept a Fragment as a child.");
+  return /*#__PURE__*/_jsx(Tooltip.Provider, {
+    delayDuration: delay,
+    skipDelayDuration: 300,
+    disableHoverableContent: !interactive,
+    children: /*#__PURE__*/_jsxs(Tooltip.Root, {
+      open: show,
+      children: [/*#__PURE__*/_jsx(Tooltip.Trigger, {
+        asChild: !isReactText,
+        children: children
+      }), createPortal( /*#__PURE__*/_jsxs(Tooltip.Content, {
+        className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["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__*/_jsx(TooltipInternal, {
+          variant: tooltipVariant,
+          children: tooltipContent
+        }), !noArrow && /*#__PURE__*/_jsx(Tooltip.Arrow, {
+          width: 8,
+          height: 4,
+          className: cx(tooltipVariant === "light" ? stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["tooltip-arrow-light"]))) : stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["tooltip-arrow-dark"]))))
+        })]
+      }))]
+    })
   });
-};
-export default TooltipWrapper;
+};

package/esm/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/esm/Tooltip/utils.d.ts

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

package/esm/Tooltip/utils.js

@@ -0,0 +1,3 @@
+export var isOverflowing = function isOverflowing(element) {
+  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+};

package/esm/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/esm/index.js

@@ -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/esm/styles/tailwind.config.js

@@ -141,5 +141,5 @@ export default {
       }
     }
   },
-  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/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.160",
+  "version": "1.0.0-beta.161",
   "description": "Algolia design system React components",
   "scripts": {
     "clean": "rimraf dist",
@@ -72,8 +72,10 @@
     "@popperjs/core": "^2.4.4",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "clsx": "^1.2.1",
     "color": "^4.2.3",
     "date-fns": "^2.29.3",