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

package/cjs/Tables/DataTable/DataTable.d.ts

@@ -47,23 +47,9 @@ declare type DataTableWithoutSelectMode = {
 };
 export declare type DataTableProps<Item> = BaseDataTableProps<Item> & (DataTableWithSelectMode<Item> | DataTableWithoutSelectMode);
 /**
- * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ * The `DataTable` component displays tabular data in a grid layout. It allows users to view, sort, filter, and interact with data in a structured way.
  *
- * #### Do
- *
- * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
- * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
- * - Indicate sorting capabilities of a column with a chevron in the cell header
- * - Start by columns with highest value to the user, and continue with less important ones
- *
- * #### Do not
- *
- * - Center align text in cells
- *
- * ## Best practices
- *
- * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
- * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
+ * See the [Data Table documentation page](https://satellite.algolia.com/layouts/data-table) for more information.
  */
 export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, sortMode, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, locale: propsLocale, }: DataTableProps<Item>) => JSX.Element;
 export default DataTable;

package/cjs/Tables/DataTable/DataTable.js

@@ -44,23 +44,9 @@ var DEFAULT_GET_ITEM_ID = function DEFAULT_GET_ITEM_ID(_, idx) {
 };
 
 /**
- * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ * The `DataTable` component displays tabular data in a grid layout. It allows users to view, sort, filter, and interact with data in a structured way.
  *
- * #### Do
- *
- * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
- * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
- * - Indicate sorting capabilities of a column with a chevron in the cell header
- * - Start by columns with highest value to the user, and continue with less important ones
- *
- * #### Do not
- *
- * - Center align text in cells
- *
- * ## Best practices
- *
- * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
- * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
+ * See the [Data Table documentation page](https://satellite.algolia.com/layouts/data-table) for more information.
  */
 var DataTable = exports.DataTable = function DataTable(_ref) {
   var data = _ref.data,

package/cjs/Tables/Table/Table.d.ts

@@ -6,23 +6,9 @@ export interface TableProps extends DetailedHTMLProps<TableHTMLAttributes<HTMLTa
     highlight?: boolean;
 }
 /**
- * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ * The `Table` component is used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
  *
- * #### Do
- *
- * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
- * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
- * - Indicate sorting capabilities of a column with a chevron in the cell header
- * - Start by columns with highest value to the user, and continue with less important ones
- *
- * #### Do not
- *
- * - Center align text in cells
- *
- * ## Best practices
- *
- * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
- * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
+ * See the [Table documentation page](https://satellite.algolia.com/layouts/table) for more information.
  */
 export declare const Table: VFC<TableProps>;
 export default Table;

package/cjs/Tables/Table/Table.js

@@ -17,23 +17,9 @@ var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"
 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; }
 /**
- * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ * The `Table` component is used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
  *
- * #### Do
- *
- * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
- * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
- * - Indicate sorting capabilities of a column with a chevron in the cell header
- * - Start by columns with highest value to the user, and continue with less important ones
- *
- * #### Do not
- *
- * - Center align text in cells
- *
- * ## Best practices
- *
- * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
- * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
+ * See the [Table documentation page](https://satellite.algolia.com/layouts/table) for more information.
  */
 var Table = exports.Table = function Table(_ref) {
   var className = _ref.className,

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/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;