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

package/esm/Button/ButtonGroup.d.ts

@@ -10,9 +10,9 @@ export interface ButtonGroupProps {
     children: ReactNode;
 }
 /**
- * - Use grouped buttons when there is a close relationship between a number of buttons.
- * - Group buttons logically into sets based on usage and importance.
- * - Common placement of grouped buttons is the view switch (e.g. list vs grid view)
+ * The `ButtonGroup` component is used to group buttons together.
+ *
+ * See the [Button Group documentation page](https://satellite.algolia.com/components/actions/button-group) for more information.
  */
 export declare const ButtonGroup: VFC<ButtonGroupProps>;
 export default ButtonGroup;

package/esm/Button/ButtonGroup.js

@@ -4,9 +4,9 @@ import cx from "clsx";
 import stl from "../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * - Use grouped buttons when there is a close relationship between a number of buttons.
- * - Group buttons logically into sets based on usage and importance.
- * - Common placement of grouped buttons is the view switch (e.g. list vs grid view)
+ * The `ButtonGroup` component is used to group buttons together.
+ *
+ * See the [Button Group documentation page](https://satellite.algolia.com/components/actions/button-group) for more information.
  */
 export var ButtonGroup = function ButtonGroup(_ref) {
   var className = _ref.className,

package/esm/Button/IconButton.d.ts

@@ -2,9 +2,9 @@
 import { type PolymorphicIconButtonProps } from "./PolymorphicIconButton";
 export declare type IconButtonProps = Omit<PolymorphicIconButtonProps<"button">, "as" | "ref">;
 /**
- * IconButtons are useful in situations where you are limited on space or the action is self-explanatory with just an icon.
+ * The `IconButton` component is used to trigger user actions (like "Add", "Close" or "Save"). It can only contain an icon.
  *
- * Please refer to the `Button` guidelines.
+ * See the [Icon Button documentation page](https://satellite.algolia.com/components/actions/icon-button) for more information.
  */
 export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/esm/Button/IconButton.js

@@ -5,9 +5,9 @@ import { forwardRef } from "react";
 import { PolymorphicIconButton } from "./PolymorphicIconButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * IconButtons are useful in situations where you are limited on space or the action is self-explanatory with just an icon.
+ * The `IconButton` component is used to trigger user actions (like "Add", "Close" or "Save"). It can only contain an icon.
  *
- * Please refer to the `Button` guidelines.
+ * See the [Icon Button documentation page](https://satellite.algolia.com/components/actions/icon-button) for more information.
  */
 export var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/_jsx(PolymorphicIconButton, _objectSpread(_objectSpread({}, props), {}, {

package/esm/Card/Card.d.ts

@@ -27,6 +27,10 @@ export interface CardType extends ForwardRefExoticComponent<PropsWithoutRef<Card
     Header: typeof CardHeader;
     Title: typeof CardTitle;
 }
-/** The `Card` is a useful component for containing content within a page. */
+/**
+ * The `Card` component is a useful for containing content within a page.
+ *
+ * See the [Card documentation page](https://satellite.algolia.com/layouts/card) for more information.
+ */
 export declare const Card: CardType;
 export default Card;

package/esm/Card/Card.js

@@ -17,7 +17,11 @@ var ELEVATION_CLASSNAMES = {
   "400": stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["card-z400"]))),
   "500": stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["card-z500"])))
 };
-/** The `Card` is a useful component for containing content within a page. */
+/**
+ * The `Card` component is a useful for containing content within a page.
+ *
+ * See the [Card documentation page](https://satellite.algolia.com/layouts/card) for more information.
+ */
 export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$as = _ref.as,

package/esm/Checkbox/Checkbox.d.ts

@@ -15,10 +15,9 @@ declare type CheckboxCustomProps = {
 declare type CheckboxInputProps = Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "onChange" | "required" | "autoFocus" | "disabled" | "checked" | "defaultChecked">;
 export declare type CheckboxProps = CheckboxInputProps & CheckboxCustomProps;
 /**
- * When users need to make a range of selections (none, one, or several), checkboxes are a good input control.
+ * The `Checkbox` component is a control that allows single or multiple selections from a set of options.
  *
- * - A checkbox control has two primary states: selected and unselected. If required, there's an additional visual state for indeterminate (usually for a parent checkbox, when some children checkboxes are selected, but not all of them)
- * - Checkboxes require the use of a button to apply the settings once they are selected
+ * See the [Checkbox documentation page](https://satellite.algolia.com/components/controls/checkbox) for more information.
  */
 export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "onChange"> & Pick<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "onChange" | "autoFocus" | "disabled" | "checked" | "required"> & CheckboxCustomProps & import("react").RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/esm/Checkbox/Checkbox.js

@@ -24,10 +24,9 @@ var STATUS_CLASSNAMES = {
 };
 
 /**
- * When users need to make a range of selections (none, one, or several), checkboxes are a good input control.
+ * The `Checkbox` component is a control that allows single or multiple selections from a set of options.
  *
- * - A checkbox control has two primary states: selected and unselected. If required, there's an additional visual state for indeterminate (usually for a parent checkbox, when some children checkboxes are selected, but not all of them)
- * - Checkboxes require the use of a button to apply the settings once they are selected
+ * See the [Checkbox documentation page](https://satellite.algolia.com/components/controls/checkbox) for more information.
  */
 export var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/esm/DatePicker/DatePicker/DatePicker.d.ts

@@ -30,5 +30,10 @@ export declare type DatePickerProps = {
     initialValue?: Date | null;
     buttonSize?: DisplayProps["size"];
 } & SharedDatePickerProps;
+/**
+ * The `DatePicker` component allows users to easily select a date, featuring a calendar view, month/year navigation, and custom options.
+ *
+ * See the [Date Picker documentation page](https://satellite.algolia.com/layouts/date-picker) for more information.
+ */
 export declare const DatePicker: VFC<DatePickerProps>;
 export default DatePicker;

package/esm/DatePicker/DatePicker/DatePicker.js

@@ -18,6 +18,11 @@ import { DatePickerActionTypes, datePickerReducer, initDatePickerReducer } from
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The `DatePicker` component allows users to easily select a date, featuring a calendar view, month/year navigation, and custom options.
+ *
+ * See the [Date Picker documentation page](https://satellite.algolia.com/layouts/date-picker) for more information.
+ */
 export var DatePicker = function DatePicker(props) {
   var _props$initialValue, _props$validate, _props$calendarProps;
   var contextLocale = useLocale("datePicker");

package/esm/DatePicker/DateRangePicker/DateRangePicker.d.ts

@@ -31,5 +31,10 @@ export declare type DateRangePickerProps = {
     renderRightPanel?: (args: RightSidePanelComponentArgs) => ReactNode;
     buttonSize?: DateRangePickerDisplayProps["buttonSize"];
 } & SharedDatePickerProps;
+/**
+ * The `DateRangePicker` component allows selection of start and end dates using two calendars, ideal for planning and scheduling.
+ *
+ * See the [Date Range Picker documentation page](https://satellite.algolia.com/layouts/date-range-picker) for more information.
+ */
 export declare const DateRangePicker: VFC<DateRangePickerProps>;
 export default DateRangePicker;

package/esm/DatePicker/DateRangePicker/DateRangePicker.js

@@ -28,6 +28,12 @@ var defaultValidator = function defaultValidator(_ref) {
 var DEFAULT_DATE_RANGE_PICKER_LOCALE = _objectSpread(_objectSpread({}, DEFAULT_DATE_PICKER_LOCALE), {}, {
   openButton: "Enter a date period..."
 });
+
+/**
+ * The `DateRangePicker` component allows selection of start and end dates using two calendars, ideal for planning and scheduling.
+ *
+ * See the [Date Range Picker documentation page](https://satellite.algolia.com/layouts/date-range-picker) for more information.
+ */
 export var DateRangePicker = function DateRangePicker(_ref2) {
   var _validate, _displayedRange$start, _initialRange$start;
   var id = _ref2.id,

package/esm/Dropdown/Dropdown.d.ts

@@ -36,14 +36,9 @@ declare type DropdownSubComponents = {
 };
 export declare const DEFAULT_DROPDOWN_POPPER_MODIFIERS: StrictModifier[];
 /**
- * ## Best practices
- * - Sort list of options in a way that will make the most sense to the user. You can order:
- *   - alphabetically
- *   - numerically
- *   - by most commonly selected option
- * - Write in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option
- * - Clearly label options based on what each one will do
- * - Make sure the most common options are listed. These can be grouped into sub-categories under headings
+ * The `Dropdown` component helps users select an item from a list of available options.
+ *
+ * See the [Dropdown documentation page](https://satellite.algolia.com/components/actions/dropdown) for more information.
  */
 export declare const Dropdown: VFC<DropdownProps> & DropdownSubComponents;
 export default Dropdown;

package/esm/Dropdown/Dropdown.js

@@ -31,14 +31,9 @@ export var DEFAULT_DROPDOWN_POPPER_MODIFIERS = [{
 }];
 
 /**
- * ## Best practices
- * - Sort list of options in a way that will make the most sense to the user. You can order:
- *   - alphabetically
- *   - numerically
- *   - by most commonly selected option
- * - Write in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option
- * - Clearly label options based on what each one will do
- * - Make sure the most common options are listed. These can be grouped into sub-categories under headings
+ * The `Dropdown` component helps users select an item from a list of available options.
+ *
+ * See the [Dropdown documentation page](https://satellite.algolia.com/components/actions/dropdown) for more information.
  */
 export var Dropdown = function Dropdown(_ref) {
   var _renderFooter;

package/esm/Dropzone/Dropzone.d.ts

@@ -17,5 +17,10 @@ export interface DropzoneBaseProps {
     locale?: DropzoneLocale;
 }
 export declare type DropzoneProps = DropzoneBaseProps & Omit<ReactDropZoneProps, "onDrop" | "onDropAccepted" | "onDropRejected" | "multiple">;
+/**
+ * The `Dropzone` component is used to upload files.
+ *
+ * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
+ */
 export declare const Dropzone: VFC<DropzoneProps>;
 export default Dropzone;

package/esm/Dropzone/Dropzone.js

@@ -42,6 +42,12 @@ var ValidatedIcon = function ValidatedIcon() {
     className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["mr-4 h-4 w-4 text-white bg-accent-600 p-px rounded-full"])))
   });
 };
+
+/**
+ * The `Dropzone` component is used to upload files.
+ *
+ * See the [Dropzone documentation page](https://satellite.algolia.com/components/forms/dropzone) for more information.
+ */
 export var Dropzone = function Dropzone(_ref2) {
   var id = _ref2.id,
     placeholder = _ref2.placeholder,

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,