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

package/esm/EmptyState/EmptyState.d.ts

@@ -1,28 +1,9 @@
 import type { VFC } from "react";
 import type { EmptyStateProps } from "./types";
 /**
- * Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
+ * The `EmptyState` component informs users when there's no content or data, providing clear actions and guidance to help them proceed or populate the area.
  *
- * #### Features empty state
- * - Use when the CTA will unlock a key feature in the dashboard. The copy and the illustration need to sell the feature and be clear on the value for the user
- *
- * #### Cards empty state
- * - Use when the CTA will unlock a new set of features inside an already activated feature. Use the context of the interface to help users understand the value of these features and the copy to give further informations
- *
- * #### Results/Data empty states
- * - Use when the query lead to no result or when there is no data to show based on the user filters. Always make sure to give the user suggestions to fix it in the copy
- *
- * ## Best practices
- *
- * Empty states should:
- *
- * - Orient users by clearly explaining the benefit and utility of a product or feature
- * - Simplify a complicated experience by focusing on a few key features and benefits
- * - Use simple and clear language that empowers users to move their business forward
- * - Be encouraging and never make users feel unsuccessful or guilty because they haven't used a product or feature
- * - Explain the steps users need to take to activate a product or feature
- * - Use illustrations thoughtfully
- * - Use only one primary call-to-action button
+ * See the [Empty State documentation page](https://satellite.algolia.com/layouts/empty-state) for more information.
  */
 export declare const EmptyState: VFC<EmptyStateProps>;
 export default EmptyState;

package/esm/EmptyState/EmptyState.js

@@ -88,28 +88,9 @@ var renderEmptyState = function renderEmptyState(_ref) {
 };
 
 /**
- * Empty states are used when a list, table, chart or page has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. This can also be shown when a features hasn't been enable.
+ * The `EmptyState` component informs users when there's no content or data, providing clear actions and guidance to help them proceed or populate the area.
  *
- * #### Features empty state
- * - Use when the CTA will unlock a key feature in the dashboard. The copy and the illustration need to sell the feature and be clear on the value for the user
- *
- * #### Cards empty state
- * - Use when the CTA will unlock a new set of features inside an already activated feature. Use the context of the interface to help users understand the value of these features and the copy to give further informations
- *
- * #### Results/Data empty states
- * - Use when the query lead to no result or when there is no data to show based on the user filters. Always make sure to give the user suggestions to fix it in the copy
- *
- * ## Best practices
- *
- * Empty states should:
- *
- * - Orient users by clearly explaining the benefit and utility of a product or feature
- * - Simplify a complicated experience by focusing on a few key features and benefits
- * - Use simple and clear language that empowers users to move their business forward
- * - Be encouraging and never make users feel unsuccessful or guilty because they haven't used a product or feature
- * - Explain the steps users need to take to activate a product or feature
- * - Use illustrations thoughtfully
- * - Use only one primary call-to-action button
+ * See the [Empty State documentation page](https://satellite.algolia.com/layouts/empty-state) for more information.
  */
 export var EmptyState = function EmptyState(props) {
   return renderEmptyState(props);

package/esm/Field/Field.d.ts

@@ -17,38 +17,9 @@ export interface FieldProps {
     children: ReactNode;
 }
 /**
- * Use text fields to help users enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card
+ * The `Field` component is a helper that wraps inputs to streamline labeling, validation, integration into a form.
  *
- * ## Structure
- * - **Label**: Use the label to provide instructions critical to using the text field. Labels should indicate what sort of information the field requires, be concise and actionable. Consider starting with action verbs (e.g. enter; fill; select). Put labels directly above their input and align them to the left
- * - **Placeholder text**: Use to provide additional, non-critical instructions around how they should use the field. Try using examples over instructions whenever possible
- * - **Helper text**: Use to give additional context or extra guidance. Only use this where clarification is required, and try not to overuse it
- *   - When you provide help text via the helpText prop or an inline error message via the error prop, the help or error content is conveyed to screen reader users with the aria-describedby attribute. This attribute causes the content to be read along with the label, either immediately or after a short delay
- *
- * ## Validation behavior
- * - **Validation icon**: helps indicate what state the field has. This can manifest as validation (error, success) or utility (show/hide password, clear)
- * - **Error text**: is activated after the input is deselected and communicates more information signified by the input icon. This typically displays an error message related to the field. Keep this text as short as possible and make sure it helps the user to recover from an error
- *
- * ## Content guidelines
- * #### Field label
- * - Place above the form field
- * - Keep it short and succinct (1–3 words)
- * - Write in sentence case (the first word capitalized, the rest lowercase)
- *
- * #### Field placeholder
- * - Mandatory to use, however is supplementary in terms of information importance (because the text has low contrast and is not visible when text is entered)
- * - Use examples instead of instructions whenever possible
- * - Include “E.g.:” before an example
- *
- * #### Help / error text
- * - Clearly explain what  is expected (help) or what went wrong and how to fix it (error)
- * - Be short and concise, no more than a single sentence
- * - Use passive voice so users don't feel like they're being blamed for the error
- *
- * #### Designating optional fields
- * - Try to only ask for information that's required
- * - If you need to ask users to provide optional information, mark the field optional by placing the text “(optional)” at the end of the field's label
- * - Don't mark required fields with asterisks
+ * See the [Field documentation page](https://satellite.algolia.com/components/forms/field) for more information.
  */
 export declare const Field: VFC<FieldProps>;
 export default Field;

package/esm/Field/Field.js

@@ -9,38 +9,9 @@ import { DEFAULT_FIELD_STATE, FieldContext } from "./FieldContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Use text fields to help users enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card
+ * The `Field` component is a helper that wraps inputs to streamline labeling, validation, integration into a form.
  *
- * ## Structure
- * - **Label**: Use the label to provide instructions critical to using the text field. Labels should indicate what sort of information the field requires, be concise and actionable. Consider starting with action verbs (e.g. enter; fill; select). Put labels directly above their input and align them to the left
- * - **Placeholder text**: Use to provide additional, non-critical instructions around how they should use the field. Try using examples over instructions whenever possible
- * - **Helper text**: Use to give additional context or extra guidance. Only use this where clarification is required, and try not to overuse it
- *   - When you provide help text via the helpText prop or an inline error message via the error prop, the help or error content is conveyed to screen reader users with the aria-describedby attribute. This attribute causes the content to be read along with the label, either immediately or after a short delay
- *
- * ## Validation behavior
- * - **Validation icon**: helps indicate what state the field has. This can manifest as validation (error, success) or utility (show/hide password, clear)
- * - **Error text**: is activated after the input is deselected and communicates more information signified by the input icon. This typically displays an error message related to the field. Keep this text as short as possible and make sure it helps the user to recover from an error
- *
- * ## Content guidelines
- * #### Field label
- * - Place above the form field
- * - Keep it short and succinct (1–3 words)
- * - Write in sentence case (the first word capitalized, the rest lowercase)
- *
- * #### Field placeholder
- * - Mandatory to use, however is supplementary in terms of information importance (because the text has low contrast and is not visible when text is entered)
- * - Use examples instead of instructions whenever possible
- * - Include “E.g.:” before an example
- *
- * #### Help / error text
- * - Clearly explain what  is expected (help) or what went wrong and how to fix it (error)
- * - Be short and concise, no more than a single sentence
- * - Use passive voice so users don't feel like they're being blamed for the error
- *
- * #### Designating optional fields
- * - Try to only ask for information that's required
- * - If you need to ask users to provide optional information, mark the field optional by placing the text “(optional)” at the end of the field's label
- * - Don't mark required fields with asterisks
+ * See the [Field documentation page](https://satellite.algolia.com/components/forms/field) for more information.
  */
 export var Field = function Field(_ref) {
   var className = _ref.className,

package/esm/Flag/Flag.d.ts

@@ -2,5 +2,10 @@ import type { VFC } from "react";
 import type { Notification } from "./types";
 export declare type FlagLocale = Notification["locale"];
 export declare type FlagProps = Omit<Notification, "id" | "content">;
+/**
+ * The `Toast` component is a brief notification that providing timely feedback to users before vanishing after a short duration.
+ *
+ * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
+ */
 export declare const Flag: VFC<FlagProps>;
 export default Flag;

package/esm/Flag/Flag.js

@@ -34,6 +34,12 @@ var VARIANT_SPINNER_CLASSNAMES = {
   orange: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-orange-500"]))),
   red: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["border-red-500"])))
 };
+
+/**
+ * The `Toast` component is a brief notification that providing timely feedback to users before vanishing after a short duration.
+ *
+ * See the [Toast documentation page](https://satellite.algolia.com/components/feedback/toast) for more information.
+ */
 export var Flag = function Flag(_ref) {
   var onDismiss = _ref.onDismiss,
     title = _ref.title,

package/esm/FlexGrid/FlexGrid.d.ts

@@ -36,5 +36,10 @@ export interface FlexGridProps {
     spacing?: FlexGridSpacing;
     children: ReactNode;
 }
+/**
+ * The `FlexGrid` component is a wrapper component that allows you to easily create a flexbox layout.
+ *
+ * See the [Flex Grid documentation page](https://satellite.algolia.com/layouts/flex-grid) for more information.
+ */
 export declare const FlexGrid: VFC<FlexGridProps>;
 export default FlexGrid;

package/esm/FlexGrid/FlexGrid.js

@@ -32,6 +32,12 @@ var DISTRIBUTION_CLASSNAMES = {
   fill: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["flex-grid-d-fill"]))),
   fillEvenly: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["flex-grid-d-fill-even"])))
 };
+
+/**
+ * The `FlexGrid` component is a wrapper component that allows you to easily create a flexbox layout.
+ *
+ * See the [Flex Grid documentation page](https://satellite.algolia.com/layouts/flex-grid) for more information.
+ */
 export var FlexGrid = function FlexGrid(_ref) {
   var className = _ref.className,
     _ref$direction = _ref.direction,

package/esm/HelpUnderline/HelpUnderline.d.ts

@@ -7,5 +7,10 @@ export declare type HelpUnderlineProps = {
     tooltipContent: TooltipWrapperProps["content"];
     children: string;
 } & Omit<TooltipWrapperBaseProps, "children">;
+/**
+ * The `HelpUnderline` component is used to display a help underline with a tooltip.
+ *
+ * See the [Help Underline documentation page](https://satellite.algolia.com/components/misc/help-underline) for more information.
+ */
 export declare const HelpUnderline: VFC<HelpUnderlineProps>;
 export default HelpUnderline;

package/esm/HelpUnderline/HelpUnderline.js

@@ -9,6 +9,11 @@ import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { TooltipWrapper } from "../Tooltip";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The `HelpUnderline` component is used to display a help underline with a tooltip.
+ *
+ * See the [Help Underline documentation page](https://satellite.algolia.com/components/misc/help-underline) for more information.
+ */
 export var HelpUnderline = function HelpUnderline(_ref) {
   var className = _ref.className,
     children = _ref.children,

package/esm/Input/Input.d.ts

@@ -20,11 +20,9 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     locale?: InputPropsLocale;
 }
 /**
- * Use text fields to help users enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card
+ * The `Input` component is a flexible, user-friendly component for efficient text and number entry across forms and applications.
  *
- * ## Variations
- * #### Number input
- * - **Stepper (optional)**: consider using a stepper (number control) to let users increase or decrease the value of the input. This is an optional part of the number field so only use based on what you think will help the user
+ * See the [Input documentation page](https://satellite.algolia.com/components/forms/input) for more information.
  */
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/esm/Input/Input.js

@@ -51,11 +51,9 @@ var ValidatedIcon = function ValidatedIcon() {
 };
 
 /**
- * Use text fields to help users enter, select, and search for text. Text fields are normally found within a form but can also be part of a modal, search, or card
+ * The `Input` component is a flexible, user-friendly component for efficient text and number entry across forms and applications.
  *
- * ## Variations
- * #### Number input
- * - **Stepper (optional)**: consider using a stepper (number control) to let users increase or decrease the value of the input. This is an optional part of the number field so only use based on what you think will help the user
+ * See the [Input documentation page](https://satellite.algolia.com/components/forms/input) for more information.
  */
 export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
   var className = _ref.className,

package/esm/Insert/Insert.d.ts

@@ -11,35 +11,9 @@ export interface InsertProps {
     children: ReactNode;
 }
 /**
-* Put more emphasis on side content.
-
-* ## Examples
-* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279499)
-
-* ## Current Status
-* - [x] Figma
-* - [x] React
-* - [ ] Documentation
-
-* ## Component structure
-* The component is a simple and flexible container. It should include a Title and a short text. To give more context you can use optional badges and an optional link to forward users in the right direction.
-
-* ## Guidelines
-
-* ### How to use it?
-* Use the `Insert` if you want to give extra information to the user about the flow they are in or to highlight and define some terms used. This component can be use on the side of existing content or as a block.
-
-* ### How to NOT use it?
-* - Don't use this component to display temporary and/or critical information, use an Alert instead.
-
-* ### Variants
-* - Grey background
-
-* ### Do's and Don't
-* TODO
-
-* ## Accessibility
-* TODO
+ * The `Insert` component is used to give extra information to the user about the flow they are in or to highlight and define some terms used.
+ *
+ * See the [Insert documentation page](https://satellite.algolia.com/layouts/insert) for more information.
  */
 export declare const Insert: VFC<InsertProps>;
 export default Insert;

package/esm/Insert/Insert.js

@@ -6,35 +6,9 @@ import onlyText from "../utils/onlyText";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
-* Put more emphasis on side content.
-
-* ## Examples
-* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279499)
-
-* ## Current Status
-* - [x] Figma
-* - [x] React
-* - [ ] Documentation
-
-* ## Component structure
-* The component is a simple and flexible container. It should include a Title and a short text. To give more context you can use optional badges and an optional link to forward users in the right direction.
-
-* ## Guidelines
-
-* ### How to use it?
-* Use the `Insert` if you want to give extra information to the user about the flow they are in or to highlight and define some terms used. This component can be use on the side of existing content or as a block.
-
-* ### How to NOT use it?
-* - Don't use this component to display temporary and/or critical information, use an Alert instead.
-
-* ### Variants
-* - Grey background
-
-* ### Do's and Don't
-* TODO
-
-* ## Accessibility
-* TODO
+ * The `Insert` component is used to give extra information to the user about the flow they are in or to highlight and define some terms used.
+ *
+ * See the [Insert documentation page](https://satellite.algolia.com/layouts/insert) for more information.
  */
 export var Insert = function Insert(_ref) {
   var title = _ref.title,

package/esm/KeyboardKey/KeyboardKey.d.ts

@@ -4,4 +4,9 @@ export interface KeyboardKeyProps {
     className?: string;
     value: string;
 }
+/**
+ * The `KeyboardKey` component is used to display a keyboard key.
+ *
+ * See the [Keyboard Key documentation page](https://satellite.algolia.com/components/misc/keyboard-key) for more information.
+ */
 export declare const KeyboardKey: VFC<KeyboardKeyProps>;

package/esm/KeyboardKey/KeyboardKey.js

@@ -13,6 +13,11 @@ var KEY_MAPPINGS = {
   enter: CornerDownLeft,
   escape: "esc"
 };
+/**
+ * The `KeyboardKey` component is used to display a keyboard key.
+ *
+ * See the [Keyboard Key documentation page](https://satellite.algolia.com/components/misc/keyboard-key) for more information.
+ */
 export var KeyboardKey = function KeyboardKey(_ref) {
   var className = _ref.className,
     value = _ref.value;

package/esm/Link/ButtonLink.d.ts

@@ -3,6 +3,11 @@ import { type PolymorphicButtonProps } from "../Button/PolymorphicButton";
 export declare type ButtonLinkProps = Omit<PolymorphicButtonProps<"a">, "as" | "ref"> & {
     href: string;
 };
+/**
+ * The `ButtonLink` component is used to display a link as a button.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
 export declare const ButtonLink: import("react").ForwardRefExoticComponent<Omit<PolymorphicButtonProps<"a">, "ref" | "as"> & {
     href: string;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/esm/Link/ButtonLink.js

@@ -8,6 +8,11 @@ import { ExternalLink } from "react-feather";
 import { PolymorphicButton } from "../Button/PolymorphicButton";
 import useLinkProps from "../utils/useLinkProps";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The `ButtonLink` component is used to display a link as a button.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
 export var ButtonLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var EndIcon = _ref.endIcon,
     href = _ref.href,

package/esm/Link/IconButtonLink.d.ts

@@ -3,6 +3,11 @@ import { type PolymorphicIconButtonProps } from "../Button/PolymorphicIconButton
 export declare type IconButtonLinkProps = Omit<PolymorphicIconButtonProps<"a">, "as" | "ref"> & {
     href: string;
 };
+/**
+ * The `ButtonLink` component is used to display a link as an icon button.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
 export declare const IconButtonLink: import("react").ForwardRefExoticComponent<Omit<PolymorphicIconButtonProps<"a">, "ref" | "as"> & {
     href: string;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/esm/Link/IconButtonLink.js

@@ -7,6 +7,11 @@ import { forwardRef } from "react";
 import { PolymorphicIconButton } from "../Button/PolymorphicIconButton";
 import useLinkProps from "../utils/useLinkProps";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The `ButtonLink` component is used to display a link as an icon button.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
 export var IconButtonLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var href = _ref.href,
     onClick = _ref.onClick,

package/esm/Link/Link.d.ts

@@ -5,6 +5,11 @@ export declare type LinkProps = {
     startIcon?: IconComponentType;
     endIcon?: IconComponentType;
 } & AnchorHTMLAttributes<HTMLAnchorElement>;
+/**
+ * The `Link` component is used to display a link.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
 export declare const Link: import("react").ForwardRefExoticComponent<{
     href: string;
     startIcon?: IconComponentType | undefined;

package/esm/Link/Link.js

@@ -12,6 +12,11 @@ import stl from "../styles/helpers/satellitePrefixer";
 import useLinkProps from "../utils/useLinkProps";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The `Link` component is used to display a link.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
 export var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     children = _ref.children,

package/esm/Medallion/Medallion.d.ts

@@ -8,5 +8,10 @@ export interface MedallionProps {
     /** @ignore */
     className?: string;
 }
+/**
+ * The `Medallion` component is used to display a medallion.
+ *
+ * See the [Medallion documentation page](https://satellite.algolia.com/components/images/medallion) for more information.
+ */
 export declare const Medallion: VFC<MedallionProps>;
 export default Medallion;

package/esm/Medallion/Medallion.js

@@ -14,6 +14,12 @@ var VARIANT_CLASSNAMES = {
   // eslint-disable-next-line @algolia/satellite/prefer-accent -- here we're definitely refering to the color itself
   white: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["medallion-white text-nebula-500"])))
 };
+
+/**
+ * The `Medallion` component is used to display a medallion.
+ *
+ * See the [Medallion documentation page](https://satellite.algolia.com/components/images/medallion) for more information.
+ */
 export var Medallion = function Medallion(_ref) {
   var Icon = _ref.icon,
     _ref$variant = _ref.variant,

package/esm/Modal/Modal.d.ts

@@ -52,5 +52,10 @@ declare type ModalSubComponents = {
     Footer: typeof ModalFooter;
     Section: typeof ModalSection;
 };
+/**
+ * The `Modal` component is a dialog window that is used to display content on top of an application.
+ *
+ * See the [Modal documentation page](https://satellite.algolia.com/components/overlay/modal) for more information.
+ */
 export declare const Modal: VFC<ModalProps> & ModalSubComponents;
 export default Modal;

package/esm/Modal/Modal.js

@@ -24,6 +24,12 @@ var SIZE_CLASSNAMES = {
   medium: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["modal-dialog-medium"]))),
   large: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["modal-dialog-large"])))
 };
+
+/**
+ * The `Modal` component is a dialog window that is used to display content on top of an application.
+ *
+ * See the [Modal documentation page](https://satellite.algolia.com/components/overlay/modal) for more information.
+ */
 export var Modal = function Modal(_ref) {
   var title = _ref.title,
     className = _ref.className,

package/esm/Pagination/CompactPagination/CompactPagination.d.ts

@@ -27,5 +27,10 @@ export declare type CompactPaginationProps = DeterminateCompactPaginationProps |
 export declare const isDeterminateCompactPaginationProps: (props: CompactPaginationProps) => props is DeterminateCompactPaginationProps;
 /** @ignore */
 export declare const isIndeterminateCompactPaginationProps: (props: CompactPaginationProps) => props is IndeterminateCompactPaginationProps;
+/**
+ * The `CompactPagination` component is used to help our users to move through an ordered collection of items represented by a page number and arrows.
+ *
+ * See the [Compact Pagination documentation page](https://satellite.algolia.com/components/navigation/compact-pagination) for more information.
+ */
 export declare const CompactPagination: VFC<CompactPaginationProps>;
 export default CompactPagination;

package/esm/Pagination/CompactPagination/CompactPagination.js

@@ -27,6 +27,12 @@ export var isDeterminateCompactPaginationProps = function isDeterminateCompactPa
 export var isIndeterminateCompactPaginationProps = function isIndeterminateCompactPaginationProps(props) {
   return !isDeterminateCompactPaginationProps(props);
 };
+
+/**
+ * The `CompactPagination` component is used to help our users to move through an ordered collection of items represented by a page number and arrows.
+ *
+ * See the [Compact Pagination documentation page](https://satellite.algolia.com/components/navigation/compact-pagination) for more information.
+ */
 export var CompactPagination = function CompactPagination(props) {
   var _props$label;
   var contextLocale = useLocale("compactPagination");

package/esm/Pagination/DotPagination/DotPagination.d.ts

@@ -11,5 +11,10 @@ export declare type DotPaginationProps<T extends number> = {
     size?: "small" | "medium";
     locale?: DotPaginationLocale;
 };
+/**
+ * The `DotPagination` component is used to help our users to move through an ordered collection of items represented by dots.
+ *
+ * See the [Dot Pagination documentation page](https://satellite.algolia.com/components/navigation/dot-pagination) for more information.
+ */
 export declare const DotPagination: <T extends number>({ currentPage, onChange, nbPages, size, locale: propsLocale, }: DotPaginationProps<T>) => JSX.Element;
 export default DotPagination;

package/esm/Pagination/DotPagination/DotPagination.js

@@ -11,6 +11,11 @@ var DEFAULT_DOT_PAGINATION_LOCALE = {
     return "Go to page ".concat(pageIdx);
   }
 };
+/**
+ * The `DotPagination` component is used to help our users to move through an ordered collection of items represented by dots.
+ *
+ * See the [Dot Pagination documentation page](https://satellite.algolia.com/components/navigation/dot-pagination) for more information.
+ */
 export var DotPagination = function DotPagination(_ref) {
   var currentPage = _ref.currentPage,
     onChange = _ref.onChange,

package/esm/Pagination/Pagination/Pagination.d.ts

@@ -12,11 +12,9 @@ export interface PaginationProps {
     locale?: PaginationLocale;
 }
 /**
- * Use pagination to help our users to move through an ordered collection of items.
+ * The `Pagination` component is used to help our users to move through an ordered collection of items.
  *
- * ## Best practices
- * - Don't use on list with less than 20 items
- * - Place the pagination at the bottom of the split item
+ * See the [Pagination documentation page](https://satellite.algolia.com/components/navigation/pagination) for more information.
  */
 export declare const Pagination: VFC<PaginationProps>;
 export default Pagination;

package/esm/Pagination/Pagination/Pagination.js

@@ -47,11 +47,9 @@ var Group = function Group(_ref) {
 };
 
 /**
- * Use pagination to help our users to move through an ordered collection of items.
+ * The `Pagination` component is used to help our users to move through an ordered collection of items.
  *
- * ## Best practices
- * - Don't use on list with less than 20 items
- * - Place the pagination at the bottom of the split item
+ * See the [Pagination documentation page](https://satellite.algolia.com/components/navigation/pagination) for more information.
  */
 export var Pagination = function Pagination(_ref2) {
   var currentPage = _ref2.currentPage,

package/esm/Popover/Popover.d.ts

@@ -1,5 +1,10 @@
 import type { VFC } from "react";
 import type { PopoverProps } from "./types";
 export declare const POPOVER_ARROW_TEST_ID = "arrow";
+/**
+ * The `Popover` component is an interactive contextual overlay that provides additional content or actions.
+ *
+ * See the [Popover documentation page](https://satellite.algolia.com/components/overlay/popover) for more information.
+ */
 export declare const Popover: VFC<PopoverProps>;
 export default Popover;

package/esm/Popover/Popover.js

@@ -20,6 +20,12 @@ var DEFAULT_POPOVER_LOCALE = {
   dismissText: "Dismiss"
 };
 export var POPOVER_ARROW_TEST_ID = "arrow";
+
+/**
+ * The `Popover` component is an interactive contextual overlay that provides additional content or actions.
+ *
+ * See the [Popover documentation page](https://satellite.algolia.com/components/overlay/popover) for more information.
+ */
 export var Popover = function Popover(_ref) {
   var children = _ref.children,
     title = _ref.title,

package/esm/ProgressBar/ProgressBar.d.ts

@@ -8,7 +8,7 @@ export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
     barClassName?: string;
 }
 /**
- * A progress bar visually indicates the completion status of a task, updating in real-time to guide users.
+ * The `ProgressBar` component visually indicates the completion status of a task, updating in real-time to guide users.
  *
  * See the [Progress Bar documentation page](https://satellite.algolia.com/components/feedback/progress-bar) for more information.
  */

package/esm/ProgressBar/ProgressBar.js

@@ -13,7 +13,7 @@ import { clamp } from "../utils/clamp";
 import { prefersReducedMotion } from "../utils/prefersReducedMotion";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * A progress bar visually indicates the completion status of a task, updating in real-time to guide users.
+ * The `ProgressBar` component visually indicates the completion status of a task, updating in real-time to guide users.
  *
  * See the [Progress Bar documentation page](https://satellite.algolia.com/components/feedback/progress-bar) for more information.
  */