@algolia/satellite 1.0.0-beta.170 → 1.0.0-beta.172

package/esm/Tabs/LinkTabs.d.ts

@@ -2,32 +2,9 @@ import type { VFC } from "react";
 import type { LinkTabsProps, UrlMatcher } from "./types";
 export declare const defaultUrlMatcher: UrlMatcher;
 /**
- * Tabs are an easy way to organize content by grouping similar information on the same page. Use them to help users navigate between related views within the same context, especially when the number of views may be more than 3.
+ * The `Tabs` component is an easy way to organize content by grouping similar information on the same page. Use it to help users navigate between related views within the same context, especially when the number of views may be more than 3.
  *
- * #### 3 core elements
- * - **Selected**: currently active tab
- * - **Unselected**: other available tabs
- * - **Divider**: separates the tab navigation and content
- *
- * #### With badges
- * Use when you have to indicate the number of performed actions or operations as well as their status, e.g. success, error, failure
- *
- * ## Content guidelines
- * - Make them clear to help differentiate the sections beneath
- * - Write short tab labels and use plain language, rather than made-up terms. Tab labels should usually be 1–2 words
- * - Do not use ALL CAPS for tab labels. ALL CAPS is rarely a good idea because it's harder to read
- *
- * ## Usability best practices
- * #### Do
- * - Use tabs to alternate between views within the same context
- * - Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab
- * - Use tabs only when users don't need to see content from multiple tabs simultaneously or compare the info behind different tabs
- *
- * #### Do not
- * - Use tabs to navigate to different context areas
- * - Use tabs for primary navigation
- * - Use more than one row of tabs. Multiple rows create jumping UI elements, which make it impossible for users to remember which tabs they've already visited
- * - Place the tab on the sides or bottom of the page, where users often overlook them
+ * See the [Tabs documentation page](https://satellite.algolia.com/components/navigation/tabs) for more information.
  */
 export declare const LinkTabs: VFC<LinkTabsProps>;
 export default LinkTabs;

package/esm/Tabs/LinkTabs.js

@@ -13,32 +13,9 @@ export var defaultUrlMatcher = function defaultUrlMatcher(tab, location) {
 };
 
 /**
- * Tabs are an easy way to organize content by grouping similar information on the same page. Use them to help users navigate between related views within the same context, especially when the number of views may be more than 3.
+ * The `Tabs` component is an easy way to organize content by grouping similar information on the same page. Use it to help users navigate between related views within the same context, especially when the number of views may be more than 3.
  *
- * #### 3 core elements
- * - **Selected**: currently active tab
- * - **Unselected**: other available tabs
- * - **Divider**: separates the tab navigation and content
- *
- * #### With badges
- * Use when you have to indicate the number of performed actions or operations as well as their status, e.g. success, error, failure
- *
- * ## Content guidelines
- * - Make them clear to help differentiate the sections beneath
- * - Write short tab labels and use plain language, rather than made-up terms. Tab labels should usually be 1–2 words
- * - Do not use ALL CAPS for tab labels. ALL CAPS is rarely a good idea because it's harder to read
- *
- * ## Usability best practices
- * #### Do
- * - Use tabs to alternate between views within the same context
- * - Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab
- * - Use tabs only when users don't need to see content from multiple tabs simultaneously or compare the info behind different tabs
- *
- * #### Do not
- * - Use tabs to navigate to different context areas
- * - Use tabs for primary navigation
- * - Use more than one row of tabs. Multiple rows create jumping UI elements, which make it impossible for users to remember which tabs they've already visited
- * - Place the tab on the sides or bottom of the page, where users often overlook them
+ * See the [Tabs documentation page](https://satellite.algolia.com/components/navigation/tabs) for more information.
  */
 export var LinkTabs = function LinkTabs(_ref) {
   var className = _ref.className,

package/esm/Tag/Tag.d.ts

@@ -23,26 +23,9 @@ export interface TagProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanEleme
     locale?: TagLocale;
 }
 /**
- * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or removed from an object by users**.
- * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or removed from an object by users.
+ * The `Tag` component is an interactive and customizable text label with varied color options.
  *
- * - For status information, use badges instead
- * - For tallies or counts, use badges
- *
- * ## Variations
- * Consider the context and implied severity to choose from the following range:
- *
- * - **Accent**: `variant="accent"`
- * - **Informational**: `variant="grey"` & `variant="blue"`
- * - **Success**: `variant="green"`
- * - **Warning**: `variant="orange"`
- * - **Error**: `variant="red"`
- * - **Admin**: `variant="pink"`
- *
- * ## Usability best practices
- * - Present tags close to or within the input control to allow users to add and remove tags
- * - When writing tags, avoid line-wrapping
- * - Define the max width of text within a tag. Once the text reaches the max, truncate with ellipses
+ * See the [Tag documentation page](https://satellite.algolia.com/components/forms/tag) for more information.
  */
 export declare const Tag: import("react").ForwardRefExoticComponent<Pick<TagProps, "dir" | "slot" | "style" | "title" | "children" | "id" | "variant" | "locale" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "onAdd" | "addTooltip" | "onRemove" | "removeTooltip"> & import("react").RefAttributes<HTMLSpanElement>>;
 export default Tag;

package/esm/Tag/Tag.js

@@ -42,26 +42,9 @@ var BUTTON_VARIANT_CLASSNAMES = {
 };
 
 /**
- * Use tags to visually label UI objects for quick recognition and navigation. (!) **Tags can be added or removed from an object by users**.
- * Keep in mind that tags increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation. Tags can be added or removed from an object by users.
+ * The `Tag` component is an interactive and customizable text label with varied color options.
  *
- * - For status information, use badges instead
- * - For tallies or counts, use badges
- *
- * ## Variations
- * Consider the context and implied severity to choose from the following range:
- *
- * - **Accent**: `variant="accent"`
- * - **Informational**: `variant="grey"` & `variant="blue"`
- * - **Success**: `variant="green"`
- * - **Warning**: `variant="orange"`
- * - **Error**: `variant="red"`
- * - **Admin**: `variant="pink"`
- *
- * ## Usability best practices
- * - Present tags close to or within the input control to allow users to add and remove tags
- * - When writing tags, avoid line-wrapping
- * - Define the max width of text within a tag. Once the text reaches the max, truncate with ellipses
+ * See the [Tag documentation page](https://satellite.algolia.com/components/forms/tag) for more information.
  */
 export var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/esm/TextArea/TextArea.d.ts

@@ -1,5 +1,10 @@
 import type { TextareaHTMLAttributes } from "react";
 export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
 }
+/**
+ * The `TextArea` component is a multiline input field for extensive text, ideal for detailed feedback, descriptions, or comments.
+ *
+ * See the [Text Area documentation page](https://satellite.algolia.com/components/forms/text-area) for more information.
+ */
 export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/esm/TextArea/TextArea.js

@@ -9,6 +9,11 @@ import cx from "clsx";
 import { forwardRef } from "react";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The `TextArea` component is a multiline input field for extensive text, ideal for detailed feedback, descriptions, or comments.
+ *
+ * See the [Text Area documentation page](https://satellite.algolia.com/components/forms/text-area) for more information.
+ */
 export var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/esm/TextWrap/TextWrap.d.ts

@@ -4,5 +4,10 @@ export interface TextWrapProps extends Omit<JSX.IntrinsicElements["span"], "chil
     maxLines?: number;
     children: string;
 }
+/**
+ * The `TextWrap` component is used to wrap text and truncate it with an ellipsis if it overflows.
+ *
+ * See the [Text Wrap documentation page](https://satellite.algolia.com/components/misc/text-wrap) for more information.
+ */
 export declare const TextWrap: VFC<TextWrapProps>;
 export default TextWrap;

package/esm/TextWrap/TextWrap.js

@@ -20,6 +20,12 @@ var SEPARATOR_ELEMENT = /*#__PURE__*/_jsx("span", {
   "aria-hidden": "true",
   children: "\u200B"
 });
+
+/**
+ * The `TextWrap` component is used to wrap text and truncate it with an ellipsis if it overflows.
+ *
+ * See the [Text Wrap documentation page](https://satellite.algolia.com/components/misc/text-wrap) for more information.
+ */
 export var TextWrap = function TextWrap(_ref) {
   var text = _ref.children,
     maxLines = _ref.maxLines,

package/esm/Toggle/Toggle.d.ts

@@ -3,10 +3,9 @@ export declare type ToggleProps = Omit<HTMLAttributes<HTMLInputElement>, "childr
     decorative?: boolean;
 };
 /**
- * Toggles are a quick way to view and switch between enabled or disabled states. Use toggles to turn something on or off instantly.
+ * The `Toggle` component is used to view or switch between enabled or disabled states.
  *
- * - Toggles should not require a Save button to apply the changes
- * - If a Save button is needed, try using Radio groups or Checkboxes instead
+ * See the [Toggle documentation page](https://satellite.algolia.com/components/controls/toggle) for more information.
  */
 export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange" | "autoFocus" | "disabled" | "checked" | "required"> & {
     decorative?: boolean | undefined;

package/esm/Toggle/Toggle.js

@@ -12,10 +12,9 @@ import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Toggles are a quick way to view and switch between enabled or disabled states. Use toggles to turn something on or off instantly.
+ * The `Toggle` component is used to view or switch between enabled or disabled states.
  *
- * - Toggles should not require a Save button to apply the changes
- * - If a Save button is needed, try using Radio groups or Checkboxes instead
+ * See the [Toggle documentation page](https://satellite.algolia.com/components/controls/toggle) for more information.
  */
 export var Toggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,

package/esm/Tooltip/OverflowTooltipWrapper.d.ts

@@ -2,4 +2,9 @@ import type { VFC } from "react";
 import type { TooltipWrapperBaseProps } from "./types";
 export interface OverflowTooltipWrapperProps extends TooltipWrapperBaseProps {
 }
+/**
+ * The `OverflowTooltipWrapper` component is used to wrap text that may overflow its container and display a tooltip with the full text on hover.
+ *
+ * See the [Tooltip documentation page](https://satellite.algolia.com/components/overlay/tooltip) for more information.
+ */
 export declare const OverflowTooltipWrapper: VFC<OverflowTooltipWrapperProps>;

package/esm/Tooltip/OverflowTooltipWrapper.js

@@ -14,6 +14,11 @@ import { isReactText } from "../utils/isReactText";
 import { TooltipWrapper } from "./TooltipWrapper";
 import { isOverflowing } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The `OverflowTooltipWrapper` component is used to wrap text that may overflow its container and display a tooltip with the full text on hover.
+ *
+ * See the [Tooltip documentation page](https://satellite.algolia.com/components/overlay/tooltip) for more information.
+ */
 export var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);

package/esm/Tooltip/Tooltip.d.ts

@@ -4,21 +4,9 @@ export interface TooltipProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivEl
     variant?: TooltipVariant;
 }
 /**
- * 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.
+ * The `Tooltip` component displays additional information when hovering/focusing on an element. It is used to provide clarification or identify the purpose of UI elements.
  *
- * 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.
- *
- * 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, 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.
+ * See the [Tooltip documentation page](https://satellite.algolia.com/components/overlay/tooltip) for more information.
  */
 export declare const Tooltip: import("react").ForwardRefExoticComponent<Pick<TooltipProps, "dir" | "slot" | "style" | "title" | "children" | "id" | "variant" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Tooltip;

package/esm/Tooltip/Tooltip.js

@@ -15,21 +15,9 @@ 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.
+ * The `Tooltip` component displays additional information when hovering/focusing on an element. It is used to provide clarification or identify the purpose of UI elements.
  *
- * 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.
- *
- * 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, 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.
+ * See the [Tooltip documentation page](https://satellite.algolia.com/components/overlay/tooltip) for more information.
  */
 export var Tooltip = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,

package/esm/Tooltip/TooltipWrapper.d.ts

@@ -11,4 +11,9 @@ export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
      */
     content: ReactNode;
 }
+/**
+ * The `TooltipWrapper` component is used to wrap content and display a tooltip on hover.
+ *
+ * See the [Tooltip documentation page](https://satellite.algolia.com/components/overlay/tooltip) for more information.
+ */
 export declare const TooltipWrapper: VFC<TooltipWrapperProps>;

package/esm/Tooltip/TooltipWrapper.js

@@ -10,6 +10,11 @@ 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";
+/**
+ * The `TooltipWrapper` component is used to wrap content and display a tooltip on hover.
+ *
+ * See the [Tooltip documentation page](https://satellite.algolia.com/components/overlay/tooltip) for more information.
+ */
 export var TooltipWrapper = function TooltipWrapper(_ref) {
   var show = _ref.show,
     _ref$delay = _ref.delay,

package/esm/UserContent/UserContent.d.ts

@@ -5,5 +5,10 @@ export interface UserContentProps {
     className?: string;
     content?: string;
 }
+/**
+ * The `UserContent` component is used to style user generated content that comes as HTML, often from a markdown source.
+ *
+ * See the [User Content documentation page](https://satellite.algolia.com/layouts/user-content) for more information.
+ */
 export declare const UserContent: VFC<UserContentProps>;
 export default UserContent;

package/esm/UserContent/UserContent.js

@@ -3,6 +3,11 @@ var _templateObject;
 import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The `UserContent` component is used to style user generated content that comes as HTML, often from a markdown source.
+ *
+ * See the [User Content documentation page](https://satellite.algolia.com/layouts/user-content) for more information.
+ */
 export var UserContent = function UserContent(_ref) {
   var className = _ref.className,
     content = _ref.content,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.170",
+  "version": "1.0.0-beta.172",
   "description": "Algolia design system React components",
   "scripts": {
     "clean": "rimraf dist",