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

package/esm/ProgressSpinner/ProgressSpinner.d.ts

@@ -5,5 +5,10 @@ export interface ProgressSpinnerProps extends SVGAttributes<SVGSVGElement> {
     thickness?: number;
     align?: ProgressSpinnerAlign;
 }
+/**
+ * The `ProgressSpinner` component is used for loading data or performing actions without an instant effect. Spinners reassure we're processing their actions without revealing what's going on behind-the-scenes.
+ *
+ * See the [Progress Spinner documentation page](https://satellite.algolia.com/components/feedback/progress-spinner) for more information.
+ */
 export declare const ProgressSpinner: VFC<ProgressSpinnerProps>;
 export default ProgressSpinner;

package/esm/ProgressSpinner/ProgressSpinner.js

@@ -15,7 +15,11 @@ var ALIGN_CLASSNAMES = {
   right: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-auto"])))
 };
 
-// Took heavy inspiration from https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CircularProgress/CircularProgress.js
+/**
+ * The `ProgressSpinner` component is used for loading data or performing actions without an instant effect. Spinners reassure we're processing their actions without revealing what's going on behind-the-scenes.
+ *
+ * See the [Progress Spinner documentation page](https://satellite.algolia.com/components/feedback/progress-spinner) for more information.
+ */
 export var ProgressSpinner = function ProgressSpinner(_ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
@@ -24,23 +28,27 @@ export var ProgressSpinner = function ProgressSpinner(_ref) {
     thickness = _ref$thickness === void 0 ? 2 : _ref$thickness,
     align = _ref.align,
     svgProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
-    className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["progress-spinner"]))), align && ALIGN_CLASSNAMES[align], className),
-    viewBox: "".concat(size / 2, " ").concat(size / 2, " ").concat(size, " ").concat(size),
-    width: size,
-    height: size,
-    role: "status",
-    "aria-busy": true,
-    "aria-live": "polite",
-    children: [/*#__PURE__*/_jsx("title", {
-      children: "Loading spinner"
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: size,
-      cy: size,
-      r: (size - thickness) / 2,
-      fill: "none",
-      strokeWidth: thickness
-    })]
-  }));
+  return (
+    /*#__PURE__*/
+    // Took heavy inspiration from https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CircularProgress/CircularProgress.js
+    _jsxs("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
+      className: cx(stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["progress-spinner"]))), align && ALIGN_CLASSNAMES[align], className),
+      viewBox: "".concat(size / 2, " ").concat(size / 2, " ").concat(size, " ").concat(size),
+      width: size,
+      height: size,
+      role: "status",
+      "aria-busy": true,
+      "aria-live": "polite",
+      children: [/*#__PURE__*/_jsx("title", {
+        children: "Loading spinner"
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: size,
+        cy: size,
+        r: (size - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness
+      })]
+    }))
+  );
 };
 export default ProgressSpinner;

package/esm/RadioGroup/RadioGroup.d.ts

@@ -23,19 +23,9 @@ declare type RadioGroupSubComponents = {
 };
 export declare const RadioGroupItem: VFC<RadioGroupItemProps>;
 /**
- * Use radio buttons when users have to make a single selection from a list of options.
+ * The `RadioGroup` component presents mutually exclusive options, allowing users to make a single selection from a list.
  *
- * - Use radio buttons when a user has to choose from at least 2 options.
- * - Whenever possible, provide a default, preselected option.
- * - Choices provided in the list of options should be mutually exclusive so that a user doesn't struggle between two values. Provide a clear distinction.
- * - Radio groups are always stacked vertically.
- * - List options in a radio group in a logical order, for example:
- *   - Most likely to least likely to be selected.
- *   - Simplest to most complex operation.
- *   - Least to most risk.
- *   - etc.
- * - If you need to have an unselected state, just add a radio button with a *None* option.
- * - Sometimes, you might want to include an *Other* option (Usually followed by a text input if a user needs to provide a specific answer)
+ * See the [Radio Group documentation page](https://satellite.algolia.com/components/controls/radio-group) for more information.
  */
 export declare const RadioGroup: VFC<RadioGroupProps> & RadioGroupSubComponents;
 export default RadioGroup;

package/esm/RadioGroup/RadioGroup.js

@@ -43,19 +43,9 @@ export var RadioGroupItem = function RadioGroupItem(_ref) {
 };
 
 /**
- * Use radio buttons when users have to make a single selection from a list of options.
+ * The `RadioGroup` component presents mutually exclusive options, allowing users to make a single selection from a list.
  *
- * - Use radio buttons when a user has to choose from at least 2 options.
- * - Whenever possible, provide a default, preselected option.
- * - Choices provided in the list of options should be mutually exclusive so that a user doesn't struggle between two values. Provide a clear distinction.
- * - Radio groups are always stacked vertically.
- * - List options in a radio group in a logical order, for example:
- *   - Most likely to least likely to be selected.
- *   - Simplest to most complex operation.
- *   - Least to most risk.
- *   - etc.
- * - If you need to have an unselected state, just add a radio button with a *None* option.
- * - Sometimes, you might want to include an *Other* option (Usually followed by a text input if a user needs to provide a specific answer)
+ * See the [Radio Group documentation page](https://satellite.algolia.com/components/controls/radio-group) for more information.
  */
 export var RadioGroup = function RadioGroup(_ref2) {
   var className = _ref2.className,

package/esm/RangeSlider/RangeSlider.d.ts

@@ -24,11 +24,9 @@ export interface RangeSliderProps<Value extends RangeSliderValue = number> {
 }
 declare const RangeSliderInternal: <Value extends RangeSliderValue = number>({ className, value, defaultValue, onChange, onCommit, disabled, min, max, track1Color, track2Color, ...otherProps }: RangeSliderProps<Value>, ref: ForwardedRef<HTMLSpanElement>) => JSX.Element;
 /**
- * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
+ * The `RangeSlider` component is an input field where users select one or two numeric values within a given range (minimum and maximum values).
  *
- * - Range sliders should always be used with a label
- * - Provide min and max value whenever possible
- * - Provide text input for better accessibility
+ * See the [Range Slider documentation page](https://satellite.algolia.com/components/controls/range-slider) for more information.
  */
 export declare const RangeSlider: (<Value extends RangeSliderValue>(props: RangeSliderProps<Value> & {
     ref?: ForwardedRef<HTMLSpanElement> | undefined;

package/esm/RangeSlider/RangeSlider.js

@@ -90,11 +90,9 @@ var RangeSliderInternal = function RangeSliderInternal(_ref2, ref) {
 };
 
 /**
- * A range slider is an input field where users select one or two numeric values within a given range (minimum and maximum values).
+ * The `RangeSlider` component is an input field where users select one or two numeric values within a given range (minimum and maximum values).
  *
- * - Range sliders should always be used with a label
- * - Provide min and max value whenever possible
- * - Provide text input for better accessibility
+ * See the [Range Slider documentation page](https://satellite.algolia.com/components/controls/range-slider) for more information.
  */
 export var RangeSlider = /*#__PURE__*/forwardRef(RangeSliderInternal);
 RangeSlider.displayName = "RangeSlider";

package/esm/ScrollIndicator/ScrollIndicator.d.ts

@@ -10,5 +10,10 @@ export interface ScrollIndicatorProps {
     variant?: ScrollIndicatorVariant;
     children: ReactNode;
 }
+/**
+ * The `ScrollIndicator` component is used to display a top and bottom color gradient depending on the scroll position.
+ *
+ * See the [Scroll Indicator documentation page](https://satellite.algolia.com/layouts/scroll-indicator) for more information.
+ */
 export declare const ScrollIndicator: VFC<ScrollIndicatorProps>;
 export default ScrollIndicator;

package/esm/ScrollIndicator/ScrollIndicator.js

@@ -53,6 +53,12 @@ var VARIANT_CLASSNAMES = {
   light: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["scroll-indicator"]))),
   dark: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["scroll-indicator scroll-indicator-dark"])))
 };
+
+/**
+ * The `ScrollIndicator` component is used to display a top and bottom color gradient depending on the scroll position.
+ *
+ * See the [Scroll Indicator documentation page](https://satellite.algolia.com/layouts/scroll-indicator) for more information.
+ */
 export var ScrollIndicator = function ScrollIndicator(_ref) {
   var _ref$tagName = _ref.tagName,
     tagName = _ref$tagName === void 0 ? "div" : _ref$tagName,

package/esm/Select/Select.d.ts

@@ -4,12 +4,9 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
     variant?: SelectVariants;
 }
 /**
- * Select lets users choose one option from an options menu. Consider select when you have 3 or more options, to avoid cluttering the interface.
+ * The `Select` component provides a dropdown menu, allowing users to choose one option from a list.
  *
- * ## Usability best practices
- * - Use for selecting between 3 or more predefined options (consider radio buttons for less than 3 options)
- * - Have a default option selected whenever possible
- * - Use `Select` as a placeholder option only if there's no logical default option
+ * See the [Select documentation page](https://satellite.algolia.com/components/forms/select) for more information.
  */
 export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
 export default Select;

package/esm/Select/Select.js

@@ -16,12 +16,9 @@ var VARIANT_CLASSNAMES = {
 };
 
 /**
- * Select lets users choose one option from an options menu. Consider select when you have 3 or more options, to avoid cluttering the interface.
+ * The `Select` component provides a dropdown menu, allowing users to choose one option from a list.
  *
- * ## Usability best practices
- * - Use for selecting between 3 or more predefined options (consider radio buttons for less than 3 options)
- * - Have a default option selected whenever possible
- * - Use `Select` as a placeholder option only if there's no logical default option
+ * See the [Select documentation page](https://satellite.algolia.com/components/forms/select) for more information.
  */
 export var Select = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,

package/esm/Separator/Separator.d.ts

@@ -5,5 +5,10 @@ export interface SeparatorProps {
     interactive?: boolean;
     orientation?: RadixSeparator.SeparatorProps["orientation"];
 }
+/**
+ * The `Separator` component is used to visually separate content.
+ *
+ * See the [Separator documentation page](https://satellite.algolia.com/components/misc/separator) for more information.
+ */
 export declare const Separator: VFC<SeparatorProps>;
 export default Separator;

package/esm/Separator/Separator.js

@@ -7,6 +7,11 @@ import * as RadixSeparator from "@radix-ui/react-separator";
 import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The `Separator` component is used to visually separate content.
+ *
+ * See the [Separator documentation page](https://satellite.algolia.com/components/misc/separator) for more information.
+ */
 export var Separator = function Separator(_ref) {
   var className = _ref.className,
     interactive = _ref.interactive,

package/esm/Sidebar/Sidebar.d.ts

@@ -33,4 +33,9 @@ export interface SidebarProps {
     location: SidebarLocation;
     children?: ReactNode;
 }
+/**
+ * The `Sidebar` component is used to display a sidebar of links.
+ *
+ * See the [Sidebar documentation page](https://satellite.algolia.com/layouts/sidebar) for more information.
+ */
 export declare const Sidebar: VFC<SidebarProps>;

package/esm/Sidebar/Sidebar.js

@@ -15,6 +15,12 @@ var DEFAULT_SIDEBAR_LOCALE = {
   primarySidebarLabel: "Primary Navigation Sidebar",
   secondarySidebarLabel: "Secondary Navigation Sidebar"
 };
+
+/**
+ * The `Sidebar` component is used to display a sidebar of links.
+ *
+ * See the [Sidebar documentation page](https://satellite.algolia.com/layouts/sidebar) for more information.
+ */
 export var Sidebar = function Sidebar(_ref) {
   var id = _ref.id,
     className = _ref.className,

package/esm/Switch/Switch.d.ts

@@ -10,5 +10,10 @@ export interface SwitchProps {
     size?: SwitchSize;
     name?: string;
 }
+/**
+ * The `Switch` component is used to select one option among a list of options.
+ *
+ * See the [Switch documentation page](https://satellite.algolia.com/components/controls/switch) for more information.
+ */
 export declare const Switch: VFC<SwitchProps>;
 export default Switch;

package/esm/Switch/Switch.js

@@ -11,6 +11,11 @@ import uniqueId from "../utils/uniqueId";
 import { buildAnimationKeySelector } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The `Switch` component is used to select one option among a list of options.
+ *
+ * See the [Switch documentation page](https://satellite.algolia.com/components/controls/switch) for more information.
+ */
 export var Switch = function Switch(_ref) {
   var className = _ref.className,
     children = _ref.children,

package/esm/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/esm/Tables/DataTable/DataTable.js

@@ -38,23 +38,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.
  */
 export var DataTable = function DataTable(_ref) {
   var data = _ref.data,

package/esm/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/esm/Tables/Table/Table.js

@@ -11,23 +11,9 @@ import TableFooter from "./components/TableFooter";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * 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 var Table = function Table(_ref) {
   var className = _ref.className,

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,