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

package/esm/Dropzone/Dropzone.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["id", "placeholder", "disabled", "multiple", "clearable", "onChange", "className", "locale"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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";
@@ -26,22 +26,20 @@ var DropzoneFileItem = function DropzoneFileItem(_ref) {
     children: [file.name, " - ", formatHumanSize(file.size)]
   });
 };
-var STATUS_CLASSNAMES = {
-  "default": "",
-  invalid: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["input-invalid"]))),
-  validated: ""
-};
 var DEFAULT_DROPZONE_LOCALE = {
-  clearInput: "Clear input"
+  clearInput: "Clear input",
+  placeholder: function placeholder(multiple) {
+    return "Drop ".concat(multiple ? "files" : "file", " here or click to select.");
+  }
 };
 var InvalidIcon = function InvalidIcon() {
   return /*#__PURE__*/_jsx(X, {
-    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
+    className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-red-700 p-px rounded-full"])))
   });
 };
 var ValidatedIcon = function ValidatedIcon() {
   return /*#__PURE__*/_jsx(Check, {
-    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
   });
 };
 export var Dropzone = function Dropzone(_ref2) {
@@ -92,10 +90,11 @@ export var Dropzone = function Dropzone(_ref2) {
     return id !== null && id !== void 0 ? id : uniqueId("dropzone");
   }, [id]);
   var isValueEmpty = files.length === 0;
-  var StatusIcon = status === "invalid" ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
+  var isInvalid = status === "invalid";
+  var StatusIcon = isInvalid ? InvalidIcon : status === "validated" ? ValidatedIcon : Fragment;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getRootProps({
     "aria-controls": dropzoneId,
-    className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            input group\n            ", "\n            ", "\n            min-h-16 cursor-pointer\n            ", ""])), focused && "input-focused", disabled && "input-disabled cursor-not-allowed", isDragReject ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500" : null), STATUS_CLASSNAMES[status], className),
+    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            relative flex items-center group/dropzone\n            border border-grey-500 rounded\n            shadow-field\n            overflow-hidden transition-all ease-in-out delay-100\n            focus-within:border-accent-600 focus-within:shadow-field-focused\n            min-h-16\n            ", "\n            ", "\n            ", "\n            ", ""])), focused && "border-accent-600 shadow-field-focused", disabled ? "cursor-not-allowed border-grey-200/30 shadow-none bg-gradient-to-b from-white to-grey-100" : "cursor-pointer", isDragReject && !disabled ? "border-red-200 cursor-not-allowed" : isDragActive ? "border-accent-500 cursor-pointer" : null, isInvalid ? "bg-red-100 border-red-700 hover:bg-red-50" : "bg-white hover:bg-grey-50"), className),
     onClick: function onClick(evt) {
       // Helps with https://github.com/react-dropzone/react-dropzone/issues/182
       if (evt.target.closest("label")) {
@@ -112,7 +111,7 @@ export var Dropzone = function Dropzone(_ref2) {
         return setFocused(false);
       }
     }))), /*#__PURE__*/_jsx("div", {
-      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
+      className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex-1 flex items-center justify-center space-x-2 display-body"]))),
       children: files.length > 0 ? files.length > 1 ? /*#__PURE__*/_jsx("ul", {
         children: files.map(function (file) {
           return /*#__PURE__*/_jsx("li", {
@@ -124,19 +123,19 @@ export var Dropzone = function Dropzone(_ref2) {
       }) : /*#__PURE__*/_jsx(DropzoneFileItem, {
         file: files[0]
       }) : /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["flex items-center justify-center space-x-2 display-body"]))),
+        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex items-center justify-center space-x-2 display-body"]))),
         children: [/*#__PURE__*/_jsx(UploadCloud, {
           size: "1rem",
-          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
+          className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-200" : "text-grey-500")
         }), /*#__PURE__*/_jsx("p", {
-          className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
-          children: placeholder || "Drop ".concat(multiple ? "files" : "file", " here or click to select.")
+          className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", ""])), disabled ? "text-grey-300" : "typo-subdued"),
+          children: placeholder || locale.placeholder(multiple)
         })]
       })
     }), clearable && !disabled && !isValueEmpty && /*#__PURE__*/_jsx("span", {
-      className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""]))),
+      className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""]))),
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover:visible"),
+        className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["mr-2 ", ""])), focused ? "visible" : "invisible group-hover/dropzone:visible"),
         title: locale.clearInput,
         icon: X,
         variant: "subtle",

package/esm/Field/Field.d.ts

@@ -1,5 +1,5 @@
 import type { ReactChild, ReactNode, VFC } from "react";
-import { FieldState } from "./FieldStateContext";
+import type { FieldState } from "./FieldStateContext";
 export interface FieldProps {
     /** @ignore */
     className?: string;

package/esm/HelpUnderline/HelpUnderline.d.ts

@@ -1,5 +1,5 @@
 import type { VFC } from "react";
-import { TooltipWrapperProps } from "../Tooltip";
+import type { TooltipWrapperProps } from "../Tooltip";
 import type { TooltipWrapperBaseProps } from "../Tooltip/types";
 export declare type HelpUnderlineProps = {
     /** @ignore */

package/esm/HelpUnderline/HelpUnderline.js

@@ -20,7 +20,7 @@ export var HelpUnderline = function HelpUnderline(_ref) {
     content: tooltipContent
   }, props), {}, {
     children: /*#__PURE__*/_jsx("span", {
-      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["help-underline leading-inherit"]))), className),
+      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["help-underline"]))), className),
       children: children
     })
   }));

package/esm/Input/Input.tailwind.js

@@ -22,7 +22,7 @@ var inputPlugin = plugin(function (_ref) {
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       overflow: "hidden",
       transition: "all 100ms ease-in-out",
-      "&:not(.input-disabled):hover": {
+      "&:not(.input-disabled, .input-focused):hover": {
         borderColor: theme("colors.grey.600"),
         ".input-spinner-button": {
           borderColor: theme("colors.grey.600")

package/esm/Insert/Insert.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode, VFC } from "react";
-import { BadgeVariants } from "../Badge";
+import type { BadgeVariants } from "../Badge";
 declare type InsertContext = {
     label: string;
     variant?: BadgeVariants;

package/esm/ProgressBar/ProgressBar.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, VFC } from "react";
+import { type HTMLAttributes } from "react";
 export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
     barClassName?: string;
     value: number;
@@ -9,5 +9,5 @@ export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
  * - Progress bars show an indication of how much of the task has been completed and how much is still left.
  * - You should indicate either a percentage or other numeric values (such as - 234/4092 queries processed)
  */
-export declare const ProgressBar: VFC<ProgressBarProps>;
+export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>>;
 export default ProgressBar;

package/esm/ProgressBar/ProgressBar.js

@@ -6,6 +6,7 @@ var _excluded = ["value", "className", "barClassName"];
 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 { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -14,12 +15,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - Progress bars show an indication of how much of the task has been completed and how much is still left.
  * - You should indicate either a percentage or other numeric values (such as - 234/4092 queries processed)
  */
-export var ProgressBar = function ProgressBar(_ref) {
+export var ProgressBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     className = _ref.className,
     barClassName = _ref.barClassName,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["progress-bar"]))), className),
     role: "progressbar",
     "aria-valuenow": value,
@@ -33,5 +36,6 @@ export var ProgressBar = function ProgressBar(_ref) {
       }
     })
   }));
-};
+});
+ProgressBar.displayName = "ProgressBar";
 export default ProgressBar;

package/esm/RangeSlider/RangeSlider.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { ForwardedRef } from "react";
 declare type RangeSliderValue = number | [number, number];
 declare type WidenNumber<T> = T extends number ? number : T;
 export interface RangeSliderProps<Value extends RangeSliderValue = number> {
@@ -20,6 +20,7 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
     track1Color?: string;
     track2Color?: string;
 }
+declare const RangeSliderInternal: <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>, ref: ForwardedRef<HTMLSpanElement>) => JSX.Element;
 /**
  * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
  *
@@ -27,8 +28,9 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
  * - Provide min and max value whenever possible
  * - Provide text input for better accessibility
  */
-export declare const RangeSlider: {
-    <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>): JSX.Element;
-    displayName: string;
+export declare const RangeSlider: (<Value extends RangeSliderValue>(props: RangeSliderProps<Value> & {
+    ref?: ForwardedRef<HTMLSpanElement> | undefined;
+}) => ReturnType<typeof RangeSliderInternal>) & {
+    displayName?: string | undefined;
 };
 export default RangeSlider;

package/esm/RangeSlider/RangeSlider.js

@@ -7,6 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { SliderRange, Root as SliderRoot, SliderThumb, SliderTrack } from "@radix-ui/react-slider";
 import cx from "clsx";
+import { forwardRef } from "react";
 import colors from "../styles/colors";
 import stl from "../styles/helpers/satellitePrefixer";
 
@@ -26,15 +27,7 @@ var ThumbGroove = function ThumbGroove(_ref) {
     className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["h-3 w-px bg-grey-500 group-hover:bg-grey-600"]))), className)
   });
 };
-
-/**
- * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
- *
- * - Range sliders should always be used with a label
- * - Provide min and max value whenever possible
- * - Provide text input for better accessibility
- */
-export var RangeSlider = function RangeSlider(_ref2) {
+var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
   var className = _ref2.className,
     value = _ref2.value,
     defaultValue = _ref2.defaultValue,
@@ -53,7 +46,9 @@ export var RangeSlider = function RangeSlider(_ref2) {
     track1: disabled ? colors.grey[200] : track1Color,
     track2: disabled ? colors.grey[100] : track2Color
   };
-  return /*#__PURE__*/_jsxs(SliderRoot, _objectSpread(_objectSpread({}, otherProps), {}, {
+  return /*#__PURE__*/_jsxs(SliderRoot, _objectSpread(_objectSpread({
+    ref: ref
+  }, otherProps), {}, {
     className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["relative h-6 min-w-[200px] flex items-center select-none touch-none aria-disabled:opacity-70 cursor-pointer aria-disabled:cursor-not-allowed"]))), className),
     value: coerceToRadixValue(value),
     defaultValue: coerceToRadixValue(defaultValue),
@@ -93,5 +88,14 @@ export var RangeSlider = function RangeSlider(_ref2) {
     })]
   }));
 };
+
+/**
+ * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
+ *
+ * - Range sliders should always be used with a label
+ * - Provide min and max value whenever possible
+ * - Provide text input for better accessibility
+ */
+export var RangeSlider = /*#__PURE__*/forwardRef(RangeSliderInternal);
 RangeSlider.displayName = "RangeSlider";
 export default RangeSlider;

package/esm/Satellite/SatelliteContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ComponentsLocales } from "./locale";
-import { SatelliteRouter } from "./SatelliteRouter";
+import type { SatelliteRouter } from "./SatelliteRouter";
 export interface SatelliteContextType {
     router: SatelliteRouter;
     portalTarget: HTMLElement | null;

package/esm/Satellite/useCreatePortal.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
 declare type CreatePortal = (children: ReactNode) => ReactElement;
 export declare const useCreatePortal: () => CreatePortal;
 export {};

package/esm/Sidebar/SidebarButtonLink.js

@@ -63,11 +63,11 @@ export var SidebarButtonLink = function SidebarButtonLink(props) {
       className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 min-w-8 w-full rounded\n          flex items-center space-x-3\n          border border-transparent\n          display-body\n          hover:no-underline focus:no-underline\n          ", "\n          ", "\n          ", "\n          ", "\n        "])), disabled ? "cursor-not-allowed opacity-70" : "focus:border-grey-500", isActive ? "shadow-z100" : !disabled && "hover:border-grey-200", isActive && "bg-gradient-to-b from-white to-grey-50", collapsed ? "pl-2" : "px-2"),
       "aria-current": isActive,
       children: [/*#__PURE__*/_jsx(Icon, {
-        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " ml-[-3px]"])), showColors ? "text-accent-600" : "text-grey-400"),
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " ml-[-3px] shrink-0"])), showColors ? "text-accent-600" : "text-grey-400"),
         height: 20,
         width: 20
       }), /*#__PURE__*/_jsx("span", {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
+        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            truncate\n            ", "\n            ", "\n            ", "\n          "])), collapsed && "sr-only", showColors ? "text-accent-600" : "typo-subdued", isActive && "font-bold"),
         children: children
       }), isExternalLink && !collapsed && /*#__PURE__*/_jsx(ExternalLink, {
         className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["", " !ml-1 shrink-0"])), showColors ? "text-accent-600" : "typo-subdued"),

package/esm/Sidebar/SidebarHeading.js

@@ -12,7 +12,7 @@ export var SidebarHeading = function SidebarHeading(_ref) {
     collapsed = _useSidebarContext.collapsed;
   return /*#__PURE__*/_jsx("span", {
     id: id,
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none\n          ", "\n        "])), collapsed && "opacity-0"), className),
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          h-8 block leading-[2rem]\n          display-subheading typo-subdued uppercase select-none truncate\n          ", "\n        "])), collapsed && "opacity-0"), className),
     children: children
   });
 };

package/esm/Switch/SwitchOption.js

@@ -30,7 +30,9 @@ export var SwitchOption = function SwitchOption(_ref) {
         return context.onChange(evt.currentTarget.value);
       }
     }), /*#__PURE__*/_jsx(OverflowTooltipWrapper, {
-      children: children
+      children: /*#__PURE__*/_jsx("span", {
+        children: children
+      })
     })]
   }));
 };

package/esm/Tables/DataTable/components/Loader.d.ts

@@ -1,4 +1,4 @@
-import { VFC } from "react";
+import type { VFC } from "react";
 import type { DataTableLocale } from "../DataTable";
 export interface LoaderProps {
     className?: string;

package/esm/TextArea/TextArea.tailwind.js

@@ -13,7 +13,7 @@ var textAreaPlugin = plugin(function (_ref) {
       width: "100%",
       padding: theme("spacing.4"),
       backgroundColor: theme("colors.white"),
-      border: "1px solid ".concat(theme("colors.grey.200")),
+      border: "1px solid ".concat(theme("colors.grey.500")),
       borderRadius: theme("borderRadius.DEFAULT"),
       boxShadow: "inset 0px 1px 4px 0px ".concat(rgba(theme("colors.grey.500"), 0.3)),
       transition: "all 100ms ease-in-out",
@@ -22,6 +22,9 @@ var textAreaPlugin = plugin(function (_ref) {
       "&::placeholder": {
         color: theme("colors.grey.600")
       },
+      "&:hover": {
+        borderColor: theme("colors.grey.600")
+      },
       "&:focus": {
         borderColor: theme("colors.accent.600"),
         boxShadow: "0px 1px 0px 0px ".concat(theme("colors.shadow.5")),

package/esm/Tooltip/OverflowTooltipWrapper.d.ts

@@ -1,3 +1,5 @@
-import { VFC } from "react";
+import type { VFC } from "react";
 import type { TooltipWrapperBaseProps } from "./types";
-export declare const OverflowTooltipWrapper: VFC<TooltipWrapperBaseProps>;
+export interface OverflowTooltipWrapperProps extends TooltipWrapperBaseProps {
+}
+export declare const OverflowTooltipWrapper: VFC<OverflowTooltipWrapperProps>;

package/esm/Tooltip/OverflowTooltipWrapper.js

@@ -6,9 +6,11 @@ var _templateObject;
 var _excluded = ["children"];
 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 { Slot } from "@radix-ui/react-slot";
 import { useState } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import TextWrap from "../TextWrap";
+import { isReactText } from "../utils/isReactText";
 import { TooltipWrapper } from "./TooltipWrapper";
 import { isOverflowing } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,12 +24,13 @@ export var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
   var onMouseEnter = function onMouseEnter(evt) {
     setContent(isOverflowing(evt.currentTarget) ? evt.currentTarget.textContent : null);
   };
+  var Wrapper = isReactText(children) ? "div" : Slot;
   return /*#__PURE__*/_jsx(TooltipWrapper, _objectSpread(_objectSpread({
     content: content && /*#__PURE__*/_jsx(TextWrap, {
       children: content
     })
   }, props), {}, {
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(Wrapper, {
       className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["truncate"]))),
       onMouseEnter: onMouseEnter,
       children: children

package/esm/Tooltip/TooltipWrapper.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, ReactText, VFC } from "react";
+import type { ReactNode, VFC } from "react";
 import type { TooltipWrapperBaseProps } from "./types";
 export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
     /**
@@ -10,6 +10,5 @@ export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
      * Defines the content of the tooltip.
      */
     content: ReactNode;
-    children: ReactElement | ReactText;
 }
 export declare const TooltipWrapper: VFC<TooltipWrapperProps>;

package/esm/Tooltip/TooltipWrapper.js

@@ -5,6 +5,7 @@ import cx from "clsx";
 import { Fragment } from "react";
 import { useCreatePortal } from "../Satellite";
 import stl from "../styles/helpers/satellitePrefixer";
+import { isReactText } from "../utils/isReactText";
 import TooltipInternal from "./Tooltip";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -38,8 +39,8 @@ export var TooltipWrapper = function TooltipWrapper(_ref) {
   if (!tooltipContent) return /*#__PURE__*/_jsx(_Fragment, {
     children: children
   });
-  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.");
+  var hasTextChildren = isReactText(children);
+  if (!hasTextChildren && 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,
@@ -47,7 +48,7 @@ export var TooltipWrapper = function TooltipWrapper(_ref) {
     children: /*#__PURE__*/_jsxs(Tooltip.Root, {
       open: show,
       children: [/*#__PURE__*/_jsx(Tooltip.Trigger, {
-        asChild: !isReactText,
+        asChild: !hasTextChildren,
         children: children
       }), createPortal( /*#__PURE__*/_jsxs(Tooltip.Content, {
         className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["tooltip-content"]))), tooltipClassName),

package/esm/Tooltip/types.d.ts

@@ -1,5 +1,5 @@
 import type { TooltipContentProps } from "@radix-ui/react-tooltip";
-import type { ReactNode } from "react";
+import type { ReactElement, ReactText } from "react";
 import type { TooltipVariant } from "./Tooltip";
 export interface TooltipWrapperBaseProps {
     /**
@@ -61,5 +61,5 @@ export interface TooltipWrapperBaseProps {
      * @default true
      */
     avoidCollisions?: boolean;
-    children: ReactNode;
+    children: ReactElement | ReactText;
 }

package/esm/styles/tailwind.config.js

@@ -81,7 +81,9 @@ export default {
         z200: "0px 0px 0px 1px ".concat(theme("colors.shadow.5"), ", 0px 4px 8px -2px ").concat(theme("colors.shadow.25")),
         z300: "0px 0px 0px 1px ".concat(theme("colors.shadow.5"), ", 0px 8px 16px -4px ").concat(theme("colors.shadow.25")),
         z400: "0px 0px 0px 1px ".concat(theme("colors.shadow.5"), ", 0px 12px 24px -6px ").concat(theme("colors.shadow.25")),
-        z500: "0px 0px 0px 1px ".concat(theme("colors.shadow.5"), ", 0px 20px 32px -8px ").concat(theme("colors.shadow.25"))
+        z500: "0px 0px 0px 1px ".concat(theme("colors.shadow.5"), ", 0px 20px 32px -8px ").concat(theme("colors.shadow.25")),
+        field: "inset 0px 1px 4px 0px ".concat(rgba(colors.grey[500], 0.3)),
+        "field-focused": "0px 1px 0px 0px ".concat(theme("colors.shadow.5"))
       };
     },
     opacity: {

package/esm/utils/isReactText.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from "react";
+export declare const isReactText: (children: ReactNode) => children is string | number;

package/esm/utils/isReactText.js

@@ -0,0 +1,3 @@
+export var isReactText = function isReactText(children) {
+  return typeof children === "string" || typeof children === "number";
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.162",
+  "version": "1.0.0-beta.164",
   "description": "Algolia design system React components",
   "scripts": {
     "clean": "rimraf dist",
@@ -74,6 +74,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "clsx": "^1.2.1",
@@ -87,7 +88,7 @@
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.5",
     "react-use": "^15.3.8",
-    "tailwindcss": "^3.3.1"
+    "tailwindcss": "^3.3.3"
   },
   "main": "./cjs/index.js",
   "module": "./esm/index.js",