@algolia/satellite 1.0.0-beta.171 → 1.0.0-beta.173

package/cjs/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/cjs/Tabs/LinkTabs.js

@@ -20,32 +20,9 @@ var defaultUrlMatcher = exports.defaultUrlMatcher = function defaultUrlMatcher(t
 };
 
 /**
- * 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.
  */
 var LinkTabs = exports.LinkTabs = function LinkTabs(_ref) {
   var className = _ref.className,

package/cjs/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/cjs/Tag/Tag.js

@@ -48,26 +48,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.
  */
 var Tag = exports.Tag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,

package/cjs/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/cjs/TextArea/TextArea.js

@@ -16,6 +16,11 @@ var _templateObject;
 var _excluded = ["className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * 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.
+ */
 var TextArea = exports.TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);

package/cjs/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/cjs/TextWrap/TextWrap.js

@@ -26,6 +26,12 @@ var SEPARATOR_ELEMENT = /*#__PURE__*/(0, _jsxRuntime.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.
+ */
 var TextWrap = exports.TextWrap = function TextWrap(_ref) {
   var text = _ref.children,
     maxLines = _ref.maxLines,

package/cjs/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/cjs/Toggle/Toggle.js

@@ -18,10 +18,9 @@ var _excluded = ["className", "checked", "decorative", "defaultChecked"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * 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.
  */
 var Toggle = exports.Toggle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,

package/cjs/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/cjs/Tooltip/OverflowTooltipWrapper.js

@@ -21,6 +21,11 @@ var _templateObject;
 var _excluded = ["children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * 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.
+ */
 var OverflowTooltipWrapper = exports.OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);

package/cjs/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/cjs/Tooltip/Tooltip.js

@@ -22,21 +22,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.
  */
 var Tooltip = exports.Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,

package/cjs/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/cjs/Tooltip/TooltipWrapper.js

@@ -18,6 +18,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+/**
+ * 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.
+ */
 var TooltipWrapper = exports.TooltipWrapper = function TooltipWrapper(_ref) {
   var show = _ref.show,
     _ref$delay = _ref.delay,

package/cjs/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/cjs/UserContent/UserContent.js

@@ -10,6 +10,11 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
+/**
+ * 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.
+ */
 var UserContent = exports.UserContent = function UserContent(_ref) {
   var className = _ref.className,
     content = _ref.content,

package/cjs/index.d.ts

@@ -30,6 +30,7 @@ export * from "./Link";
 export * from "./Medallion";
 export * from "./Modal";
 export * from "./Pagination";
+export * from "./Popover";
 export * from "./ProgressBar";
 export * from "./ProgressSpinner";
 export * from "./RadioGroup";

package/cjs/index.js

@@ -374,6 +374,18 @@ Object.keys(_Pagination).forEach(function (key) {
     }
   });
 });
+var _Popover = require("./Popover");
+Object.keys(_Popover).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Popover[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Popover[key];
+    }
+  });
+});
 var _ProgressBar = require("./ProgressBar");
 Object.keys(_ProgressBar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/esm/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -17,5 +17,10 @@ export interface AnnouncementBadgeProps extends HTMLAttributes<HTMLSpanElement>
     locale?: AnnouncementBadgeLocale;
     children?: never;
 }
+/**
+ * The `AnnouncementBadge` component is used to display a small badge with a text on it.
+ *
+ * See the [Announcement Badge documentation page](https://satellite.algolia.com/components/feedback/announcement-badge) for more information.
+ */
 export declare const AnnouncementBadge: import("react").ForwardRefExoticComponent<AnnouncementBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default AnnouncementBadge;

package/esm/AnnouncementBadge/AnnouncementBadge.js

@@ -21,6 +21,12 @@ var SIZE_CLASSNAMES = {
   "default": stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["display-body h-6 leading-md px-2"]))),
   small: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["display-caption px-1"])))
 };
+
+/**
+ * The `AnnouncementBadge` component is used to display a small badge with a text on it.
+ *
+ * See the [Announcement Badge documentation page](https://satellite.algolia.com/components/feedback/announcement-badge) for more information.
+ */
 export var AnnouncementBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "default" : _ref$size,

package/esm/AutoComplete/AutoComplete.d.ts

@@ -1,20 +1,9 @@
 /// <reference types="react" />
 import type { AutoCompleteProps, Option } from "./types";
 /**
- * Autocomplete is a search-as-you-type function that matches what a person types, usually the beginning of a word, or a prefix, with a word list. Not to be confused with auto-suggestion that predicts the end of a query.
+ * The `Autocomplete` component enables users to search and select from a list using real-time input matching.
  *
- * Use this component when the user needs to search through a long list of results.
- *
- * ## Menu Size Variations
- * - **Medium (default)**: the standard dropdown menu height for most use cases
- * - **Large**: when numerous results should be displayed in the dropdown to ease selection
- *
- * ## Best practices
- *
- * - Provide an empty state if there is no result
- * - Highlight letters in results matching the query
- * - Provide matching results quickly
- * - Style different data
+ * See the [Autocomplete documentation page](https://satellite.algolia.com/components/forms/autocomplete) for more information.
  */
 export declare const AutoComplete: <O extends Option = Option>({ locale: localeProp, id, labelId, "aria-label": ariaLabel, name, placeholder, autoFocus, inputValue: inputValueProp, onTextChange, onFocus, onBlur, disabled, clearable, renderValueTemplate, noWrap, separatorKeys, multiple, value, selectOnBlur, onChange, options, optionItemComponent, creatable, createFromInputValue, emptyState, maxResults: maxItems, menuFooter, menuSize, variant, icon: Icon, endItem, className, menuClassName, valuesClassName, internalsRef, }: AutoCompleteProps<O>) => JSX.Element;
 export default AutoComplete;

package/esm/AutoComplete/AutoComplete.js

@@ -11,6 +11,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { X } from "react-feather";
 import { usePopper } from "react-popper";
 import useMeasure from "react-use/lib/useMeasure";
+import usePrevious from "react-use/lib/usePrevious";
 import { Card } from "../Card";
 import { ClickAwayContainer } from "../ClickAwayContainer";
 import { useField } from "../Field";
@@ -45,20 +46,9 @@ var updateRef = function updateRef(ref, value) {
 };
 
 /**
- * Autocomplete is a search-as-you-type function that matches what a person types, usually the beginning of a word, or a prefix, with a word list. Not to be confused with auto-suggestion that predicts the end of a query.
+ * The `Autocomplete` component enables users to search and select from a list using real-time input matching.
  *
- * Use this component when the user needs to search through a long list of results.
- *
- * ## Menu Size Variations
- * - **Medium (default)**: the standard dropdown menu height for most use cases
- * - **Large**: when numerous results should be displayed in the dropdown to ease selection
- *
- * ## Best practices
- *
- * - Provide an empty state if there is no result
- * - Highlight letters in results matching the query
- * - Provide matching results quickly
- * - Style different data
+ * See the [Autocomplete documentation page](https://satellite.algolia.com/components/forms/autocomplete) for more information.
  */
 export var AutoComplete = function AutoComplete(_ref) {
   var localeProp = _ref.locale,
@@ -117,17 +107,12 @@ export var AutoComplete = function AutoComplete(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     internalInputValue = _useState4[0],
     setInternalInputValue = _useState4[1];
-
-  // See https://github.com/downshift-js/downshift/issues/1108
-  // as to why we manage the input value ourselves completely
-  var updateInputValue = function updateInputValue(value) {
-    setInternalInputValue(value);
-    onTextChange === null || onTextChange === void 0 || onTextChange(value);
-  };
+  var previousValue = usePrevious(value);
   useEffect(function () {
     if (multiple || typeof inputValueProp !== "undefined") return;
-    setInternalInputValue(optionToString(value !== null && value !== void 0 ? value : null));
-  }, [multiple, inputValueProp, value]);
+    if (!Array.isArray(previousValue) && optionToString(previousValue) === optionToString(value)) return;
+    setInternalInputValue(optionToString(value));
+  }, [multiple, inputValueProp, previousValue, value]);
   var inputValue = inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : internalInputValue;
   var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
@@ -226,11 +211,11 @@ export var AutoComplete = function AutoComplete(_ref) {
               combobox.setHighlightedIndex(maxItems);
             } else if (multiple) {
               multipleSelection.addSelectedItem(selectedItem);
-              updateInputValue("");
+              setInternalInputValue("");
               setShowAllItems(false);
             } else {
               multipleSelection.setSelectedItems([selectedItem]);
-              updateInputValue(optionToString(selectedItem));
+              setInternalInputValue(optionToString(selectedItem));
               setShowAllItems(false);
             }
             break;
@@ -238,7 +223,7 @@ export var AutoComplete = function AutoComplete(_ref) {
         case useCombobox.stateChangeTypes.InputKeyDownEscape:
           {
             if (!combobox.isOpen) {
-              updateInputValue("");
+              setInternalInputValue("");
               multipleSelection.setSelectedItems([]);
             }
             break;
@@ -255,10 +240,13 @@ export var AutoComplete = function AutoComplete(_ref) {
     ref: inputRef,
     autoFocus: autoFocus,
     disabled: disabled,
+    // See https://github.com/downshift-js/downshift/issues/1108
+    // as to why we manage the input value ourselves completely
     onChange: function onChange(evt) {
       var _value, _menuPopper$update;
       var newInputValue = (_value = evt.currentTarget.value) !== null && _value !== void 0 ? _value : "";
-      updateInputValue(newInputValue);
+      setInternalInputValue(newInputValue);
+      onTextChange === null || onTextChange === void 0 || onTextChange(newInputValue);
       if (!multiple && value && !newInputValue) {
         multipleSelection.setSelectedItems([]);
       }
@@ -288,7 +276,7 @@ export var AutoComplete = function AutoComplete(_ref) {
           newOption = _createFromInputValue2[0];
         if (newOption && !newOption.disabled) {
           multipleSelection.addSelectedItem(newOption);
-          updateInputValue("");
+          setInternalInputValue("");
         }
       }
     }
@@ -380,9 +368,8 @@ export var AutoComplete = function AutoComplete(_ref) {
           }), showClearButton && /*#__PURE__*/_jsx("button", {
             type: "button",
             className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
-            onClick: function onClick(evt) {
-              evt.stopPropagation();
-              updateInputValue("");
+            onClick: function onClick() {
+              setInternalInputValue("");
               multipleSelection.setSelectedItems([]);
             },
             "aria-label": locale.clearInputButton,

package/esm/AutoComplete/utils.d.ts

@@ -3,6 +3,6 @@ export declare function isAutoCompleteMultiProps<T extends Option = Option>(prop
 export declare const defaultCreateFromInputValue: <T extends Option = Option>(options: T[] | undefined, inputValue: string) => Option[];
 export declare const caseInsensitiveCreateFromInputValue: <T extends Option = Option>(options: T[] | undefined, inputValue: string) => Option[];
 export declare const DEFAULT_AUTOCOMPLETE_LOCALE: Required<AutoCompleteLocale>;
-export declare const optionToString: (option: Option | null) => string;
+export declare const optionToString: (option: Option | null | undefined) => string;
 export declare function filter<T extends Option = Option>(options: T[], selectedItems: T[], itemValue: string): T[];
 export declare function inputValueFromProps<T extends Option = Option>(props: AutoCompleteProps<T>): string;

package/esm/Avatars/ApplicationAvatar.d.ts

@@ -8,6 +8,10 @@ export interface ApplicationAvatarProps {
     /** @ignore */
     className?: string;
 }
-/** The `ApplicationAvatar` is used as a visual representation of an application. */
+/**
+ * The `ApplicationAvatar` component is used as a visual representation of an application.
+ *
+ * See the [Application Avatar documentation page](https://satellite.algolia.com/components/images/application-avatar) for more information.
+ */
 export declare const ApplicationAvatar: VFC<ApplicationAvatarProps>;
 export default ApplicationAvatar;

package/esm/Avatars/ApplicationAvatar.js

@@ -8,7 +8,11 @@ var SIZE_CLASSNAMES = {
   small: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-4 h-4"]))),
   medium: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["w-8 h-8"])))
 };
-/** The `ApplicationAvatar` is used as a visual representation of an application. */
+/**
+ * The `ApplicationAvatar` component is used as a visual representation of an application.
+ *
+ * See the [Application Avatar documentation page](https://satellite.algolia.com/components/images/application-avatar) for more information.
+ */
 export var ApplicationAvatar = function ApplicationAvatar(_ref) {
   var className = _ref.className,
     application = _ref.application,

package/esm/Avatars/UserAvatar.d.ts

@@ -15,6 +15,10 @@ export interface UserAvatarProps {
     className?: string;
     locale?: UserAvatarLocale;
 }
-/** The `UserAvatar` is used as a visual representation of a user. */
+/**
+ * The `UserAvatar` component is used as a visual representation of a user.
+ *
+ * See the [User Avatar documentation page](https://satellite.algolia.com/components/images/user-avatar) for more information.
+ */
 export declare const UserAvatar: VFC<UserAvatarProps>;
 export default UserAvatar;