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

package/cjs/Insert/Insert.js

@@ -12,35 +12,9 @@ var _onlyText = _interopRequireDefault(require("../utils/onlyText"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /**
-* 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.
  */
 var Insert = exports.Insert = function Insert(_ref) {
   var title = _ref.title,

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

@@ -20,6 +20,11 @@ var KEY_MAPPINGS = {
   enter: _reactFeather.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.
+ */
 var KeyboardKey = exports.KeyboardKey = function KeyboardKey(_ref) {
   var className = _ref.className,
     value = _ref.value;

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

@@ -15,6 +15,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["endIcon", "href", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * The `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.
+ */
 var ButtonLink = exports.ButtonLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var EndIcon = _ref.endIcon,
     href = _ref.href,

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

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

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

@@ -18,6 +18,11 @@ var _templateObject, _templateObject2, _templateObject3;
 var _excluded = ["className", "children", "startIcon", "endIcon", "href", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * The `Link` component is used to display a link.
+ *
+ * See the [Link documentation page](https://satellite.algolia.com/components/navigation/link) for more information.
+ */
 var Link = exports.Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
     children = _ref.children,

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

@@ -21,6 +21,12 @@ var VARIANT_CLASSNAMES = {
   // eslint-disable-next-line @algolia/satellite/prefer-accent -- here we're definitely refering to the color itself
   white: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["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.
+ */
 var Medallion = exports.Medallion = function Medallion(_ref) {
   var Icon = _ref.icon,
     _ref$variant = _ref.variant,

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

@@ -33,6 +33,12 @@ var SIZE_CLASSNAMES = {
   medium: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["modal-dialog-medium"]))),
   large: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["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.
+ */
 var Modal = exports.Modal = function Modal(_ref) {
   var title = _ref.title,
     className = _ref.className,

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

@@ -33,6 +33,12 @@ var isDeterminateCompactPaginationProps = exports.isDeterminateCompactPagination
 var isIndeterminateCompactPaginationProps = exports.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.
+ */
 var CompactPagination = exports.CompactPagination = function CompactPagination(props) {
   var _props$label;
   var contextLocale = (0, _Satellite.useLocale)("compactPagination");

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

@@ -18,6 +18,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.
+ */
 var DotPagination = exports.DotPagination = function DotPagination(_ref) {
   var currentPage = _ref.currentPage,
     onChange = _ref.onChange,

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

@@ -55,11 +55,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.
  */
 var Pagination = exports.Pagination = function Pagination(_ref2) {
   var currentPage = _ref2.currentPage,

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

@@ -28,6 +28,12 @@ var DEFAULT_POPOVER_LOCALE = {
   dismissText: "Dismiss"
 };
 var POPOVER_ARROW_TEST_ID = exports.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.
+ */
 var Popover = exports.Popover = function Popover(_ref) {
   var children = _ref.children,
     title = _ref.title,

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

@@ -23,7 +23,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * 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/cjs/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/cjs/ProgressSpinner/ProgressSpinner.js

@@ -21,7 +21,11 @@ var ALIGN_CLASSNAMES = {
   right: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["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.
+ */
 var ProgressSpinner = exports.ProgressSpinner = function ProgressSpinner(_ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
@@ -30,23 +34,27 @@ var ProgressSpinner = exports.ProgressSpinner = function ProgressSpinner(_ref) {
     thickness = _ref$thickness === void 0 ? 2 : _ref$thickness,
     align = _ref.align,
     svgProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
-    className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsx)("title", {
-      children: "Loading spinner"
-    }), /*#__PURE__*/(0, _jsxRuntime.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
+    (0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, svgProps), {}, {
+      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["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__*/(0, _jsxRuntime.jsx)("title", {
+        children: "Loading spinner"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        cx: size,
+        cy: size,
+        r: (size - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness
+      })]
+    }))
+  );
 };
 var _default = exports["default"] = ProgressSpinner;

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

@@ -49,19 +49,9 @@ var RadioGroupItem = exports.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.
  */
 var RadioGroup = exports.RadioGroup = function RadioGroup(_ref2) {
   var className = _ref2.className,

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

@@ -94,11 +94,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.
  */
 var RangeSlider = exports.RangeSlider = /*#__PURE__*/(0, _react.forwardRef)(RangeSliderInternal);
 RangeSlider.displayName = "RangeSlider";

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

@@ -60,6 +60,12 @@ var VARIANT_CLASSNAMES = {
   light: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["scroll-indicator"]))),
   dark: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["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.
+ */
 var ScrollIndicator = exports.ScrollIndicator = function ScrollIndicator(_ref) {
   var _ref$tagName = _ref.tagName,
     tagName = _ref$tagName === void 0 ? "div" : _ref$tagName,

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

@@ -23,12 +23,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.
  */
 var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$variant = _ref.variant,

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

@@ -17,6 +17,11 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * The `Separator` component is used to visually separate content.
+ *
+ * See the [Separator documentation page](https://satellite.algolia.com/components/misc/separator) for more information.
+ */
 var Separator = exports.Separator = function Separator(_ref) {
   var className = _ref.className,
     interactive = _ref.interactive,

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

@@ -22,6 +22,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.
+ */
 var Sidebar = exports.Sidebar = function Sidebar(_ref) {
   var id = _ref.id,
     className = _ref.className,

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

@@ -17,6 +17,11 @@ var _uniqueId = _interopRequireDefault(require("../utils/uniqueId"));
 var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
+/**
+ * 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.
+ */
 var Switch = exports.Switch = function Switch(_ref) {
   var className = _ref.className,
     children = _ref.children,