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

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.
  */

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,