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

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, VFC } 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: VFC<TooltipWrapperProps>;

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/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/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.162",
   "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",