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

package/cjs/AnnouncementBadge/AnnouncementBadge.d.ts

@@ -17,5 +17,10 @@ export interface AnnouncementBadgeProps extends HTMLAttributes<HTMLSpanElement>
     locale?: AnnouncementBadgeLocale;
     children?: never;
 }
+/**
+ * The `AnnouncementBadge` component is used to display a small badge with a text on it.
+ *
+ * See the [Announcement Badge documentation page](https://satellite.algolia.com/components/feedback/announcement-badge) for more information.
+ */
 export declare const AnnouncementBadge: import("react").ForwardRefExoticComponent<AnnouncementBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default AnnouncementBadge;

package/cjs/AnnouncementBadge/AnnouncementBadge.js

@@ -28,6 +28,12 @@ var SIZE_CLASSNAMES = {
   "default": (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["display-body h-6 leading-md px-2"]))),
   small: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["display-caption px-1"])))
 };
+
+/**
+ * The `AnnouncementBadge` component is used to display a small badge with a text on it.
+ *
+ * See the [Announcement Badge documentation page](https://satellite.algolia.com/components/feedback/announcement-badge) for more information.
+ */
 var AnnouncementBadge = exports.AnnouncementBadge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "default" : _ref$size,

package/cjs/AutoComplete/AutoComplete.d.ts

@@ -1,20 +1,9 @@
 /// <reference types="react" />
 import type { AutoCompleteProps, Option } from "./types";
 /**
- * Autocomplete is a search-as-you-type function that matches what a person types, usually the beginning of a word, or a prefix, with a word list. Not to be confused with auto-suggestion that predicts the end of a query.
+ * The `Autocomplete` component enables users to search and select from a list using real-time input matching.
  *
- * Use this component when the user needs to search through a long list of results.
- *
- * ## Menu Size Variations
- * - **Medium (default)**: the standard dropdown menu height for most use cases
- * - **Large**: when numerous results should be displayed in the dropdown to ease selection
- *
- * ## Best practices
- *
- * - Provide an empty state if there is no result
- * - Highlight letters in results matching the query
- * - Provide matching results quickly
- * - Style different data
+ * See the [Autocomplete documentation page](https://satellite.algolia.com/components/forms/autocomplete) for more information.
  */
 export declare const AutoComplete: <O extends Option = Option>({ locale: localeProp, id, labelId, "aria-label": ariaLabel, name, placeholder, autoFocus, inputValue: inputValueProp, onTextChange, onFocus, onBlur, disabled, clearable, renderValueTemplate, noWrap, separatorKeys, multiple, value, selectOnBlur, onChange, options, optionItemComponent, creatable, createFromInputValue, emptyState, maxResults: maxItems, menuFooter, menuSize, variant, icon: Icon, endItem, className, menuClassName, valuesClassName, internalsRef, }: AutoCompleteProps<O>) => JSX.Element;
 export default AutoComplete;

package/cjs/AutoComplete/AutoComplete.js

@@ -15,6 +15,7 @@ var _react = require("react");
 var _reactFeather = require("react-feather");
 var _reactPopper = require("react-popper");
 var _useMeasure3 = _interopRequireDefault(require("react-use/lib/useMeasure"));
+var _usePrevious = _interopRequireDefault(require("react-use/lib/usePrevious"));
 var _Card = require("../Card");
 var _ClickAwayContainer = require("../ClickAwayContainer");
 var _Field = require("../Field");
@@ -51,20 +52,9 @@ var updateRef = function updateRef(ref, value) {
 };
 
 /**
- * Autocomplete is a search-as-you-type function that matches what a person types, usually the beginning of a word, or a prefix, with a word list. Not to be confused with auto-suggestion that predicts the end of a query.
+ * The `Autocomplete` component enables users to search and select from a list using real-time input matching.
  *
- * Use this component when the user needs to search through a long list of results.
- *
- * ## Menu Size Variations
- * - **Medium (default)**: the standard dropdown menu height for most use cases
- * - **Large**: when numerous results should be displayed in the dropdown to ease selection
- *
- * ## Best practices
- *
- * - Provide an empty state if there is no result
- * - Highlight letters in results matching the query
- * - Provide matching results quickly
- * - Style different data
+ * See the [Autocomplete documentation page](https://satellite.algolia.com/components/forms/autocomplete) for more information.
  */
 var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
   var localeProp = _ref.locale,
@@ -123,17 +113,12 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     internalInputValue = _useState4[0],
     setInternalInputValue = _useState4[1];
-
-  // See https://github.com/downshift-js/downshift/issues/1108
-  // as to why we manage the input value ourselves completely
-  var updateInputValue = function updateInputValue(value) {
-    setInternalInputValue(value);
-    onTextChange === null || onTextChange === void 0 || onTextChange(value);
-  };
+  var previousValue = (0, _usePrevious["default"])(value);
   (0, _react.useEffect)(function () {
     if (multiple || typeof inputValueProp !== "undefined") return;
-    setInternalInputValue((0, _utils.optionToString)(value !== null && value !== void 0 ? value : null));
-  }, [multiple, inputValueProp, value]);
+    if (!Array.isArray(previousValue) && (0, _utils.optionToString)(previousValue) === (0, _utils.optionToString)(value)) return;
+    setInternalInputValue((0, _utils.optionToString)(value));
+  }, [multiple, inputValueProp, previousValue, value]);
   var inputValue = inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : internalInputValue;
   var _useState5 = (0, _react.useState)(null),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
@@ -232,11 +217,11 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
               combobox.setHighlightedIndex(maxItems);
             } else if (multiple) {
               multipleSelection.addSelectedItem(selectedItem);
-              updateInputValue("");
+              setInternalInputValue("");
               setShowAllItems(false);
             } else {
               multipleSelection.setSelectedItems([selectedItem]);
-              updateInputValue((0, _utils.optionToString)(selectedItem));
+              setInternalInputValue((0, _utils.optionToString)(selectedItem));
               setShowAllItems(false);
             }
             break;
@@ -244,7 +229,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
         case _downshift.useCombobox.stateChangeTypes.InputKeyDownEscape:
           {
             if (!combobox.isOpen) {
-              updateInputValue("");
+              setInternalInputValue("");
               multipleSelection.setSelectedItems([]);
             }
             break;
@@ -261,10 +246,13 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
     ref: inputRef,
     autoFocus: autoFocus,
     disabled: disabled,
+    // See https://github.com/downshift-js/downshift/issues/1108
+    // as to why we manage the input value ourselves completely
     onChange: function onChange(evt) {
       var _value, _menuPopper$update;
       var newInputValue = (_value = evt.currentTarget.value) !== null && _value !== void 0 ? _value : "";
-      updateInputValue(newInputValue);
+      setInternalInputValue(newInputValue);
+      onTextChange === null || onTextChange === void 0 || onTextChange(newInputValue);
       if (!multiple && value && !newInputValue) {
         multipleSelection.setSelectedItems([]);
       }
@@ -294,7 +282,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
           newOption = _createFromInputValue2[0];
         if (newOption && !newOption.disabled) {
           multipleSelection.addSelectedItem(newOption);
-          updateInputValue("");
+          setInternalInputValue("");
         }
       }
     }
@@ -386,9 +374,8 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
           }), showClearButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
             type: "button",
             className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
-            onClick: function onClick(evt) {
-              evt.stopPropagation();
-              updateInputValue("");
+            onClick: function onClick() {
+              setInternalInputValue("");
               multipleSelection.setSelectedItems([]);
             },
             "aria-label": locale.clearInputButton,

package/cjs/AutoComplete/utils.d.ts

@@ -3,6 +3,6 @@ export declare function isAutoCompleteMultiProps<T extends Option = Option>(prop
 export declare const defaultCreateFromInputValue: <T extends Option = Option>(options: T[] | undefined, inputValue: string) => Option[];
 export declare const caseInsensitiveCreateFromInputValue: <T extends Option = Option>(options: T[] | undefined, inputValue: string) => Option[];
 export declare const DEFAULT_AUTOCOMPLETE_LOCALE: Required<AutoCompleteLocale>;
-export declare const optionToString: (option: Option | null) => string;
+export declare const optionToString: (option: Option | null | undefined) => string;
 export declare function filter<T extends Option = Option>(options: T[], selectedItems: T[], itemValue: string): T[];
 export declare function inputValueFromProps<T extends Option = Option>(props: AutoCompleteProps<T>): string;

package/cjs/Avatars/ApplicationAvatar.d.ts

@@ -8,6 +8,10 @@ export interface ApplicationAvatarProps {
     /** @ignore */
     className?: string;
 }
-/** The `ApplicationAvatar` is used as a visual representation of an application. */
+/**
+ * The `ApplicationAvatar` component is used as a visual representation of an application.
+ *
+ * See the [Application Avatar documentation page](https://satellite.algolia.com/components/images/application-avatar) for more information.
+ */
 export declare const ApplicationAvatar: VFC<ApplicationAvatarProps>;
 export default ApplicationAvatar;

package/cjs/Avatars/ApplicationAvatar.js

@@ -15,7 +15,11 @@ var SIZE_CLASSNAMES = {
   small: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-4 h-4"]))),
   medium: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["w-8 h-8"])))
 };
-/** The `ApplicationAvatar` is used as a visual representation of an application. */
+/**
+ * The `ApplicationAvatar` component is used as a visual representation of an application.
+ *
+ * See the [Application Avatar documentation page](https://satellite.algolia.com/components/images/application-avatar) for more information.
+ */
 var ApplicationAvatar = exports.ApplicationAvatar = function ApplicationAvatar(_ref) {
   var className = _ref.className,
     application = _ref.application,

package/cjs/Avatars/UserAvatar.d.ts

@@ -15,6 +15,10 @@ export interface UserAvatarProps {
     className?: string;
     locale?: UserAvatarLocale;
 }
-/** The `UserAvatar` is used as a visual representation of a user. */
+/**
+ * The `UserAvatar` component is used as a visual representation of a user.
+ *
+ * See the [User Avatar documentation page](https://satellite.algolia.com/components/images/user-avatar) for more information.
+ */
 export declare const UserAvatar: VFC<UserAvatarProps>;
 export default UserAvatar;

package/cjs/Avatars/UserAvatar.js

@@ -19,7 +19,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var DEFAULT_LOCALE = {
   fallbackText: "User's avatar"
 };
-/** The `UserAvatar` is used as a visual representation of a user. */
+/**
+ * The `UserAvatar` component is used as a visual representation of a user.
+ *
+ * See the [User Avatar documentation page](https://satellite.algolia.com/components/images/user-avatar) for more information.
+ */
 var UserAvatar = exports.UserAvatar = function UserAvatar(_ref) {
   var _user$email;
   var className = _ref.className,

package/cjs/Badge/Badge.d.ts

@@ -15,19 +15,9 @@ declare type BadgeContentProps = {
 };
 export declare type BadgeProps = BaseBadgeProps & AtLeastOne<BadgeContentProps>;
 /**
- * Badges are used to inform a user about a status of an item or a process. They can also contain a numeric value. Badges come with a set of colours that are easily identified. Green colour implies success or completion, while orange suggests a warning, on hold, or a problem. Red coloured badges mean error or failure.
+ * The `Badge` component is a visual marker highlighting information or status. It enhances UI, indicates progress, and classifies data.
  *
- * - Stay consistent with badge content (text), don't vary your vocabulary
- * - Bages usually come after a textual information or explanation
- * - Don't use badges where traditional error messages (such as form validation) can be used instead
- * - Don't use badges with combination of buttons
- * - Badges are not interactive
- *
- * Do use
- *
- * - To indicate progress of an A/B test
- * - To indicate problem with an index
- * - To display numeric values for multiple items (similar to a "tag cloud")
+ * See the [Badge documentation page](https://satellite.algolia.com/components/feedback/badge) for more information.
  */
 export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Badge;

package/cjs/Badge/Badge.js

@@ -34,19 +34,9 @@ var SIZE_CLASSNAMES = {
 };
 
 /**
- * Badges are used to inform a user about a status of an item or a process. They can also contain a numeric value. Badges come with a set of colours that are easily identified. Green colour implies success or completion, while orange suggests a warning, on hold, or a problem. Red coloured badges mean error or failure.
+ * The `Badge` component is a visual marker highlighting information or status. It enhances UI, indicates progress, and classifies data.
  *
- * - Stay consistent with badge content (text), don't vary your vocabulary
- * - Bages usually come after a textual information or explanation
- * - Don't use badges where traditional error messages (such as form validation) can be used instead
- * - Don't use badges with combination of buttons
- * - Badges are not interactive
- *
- * Do use
- *
- * - To indicate progress of an A/B test
- * - To indicate problem with an index
- * - To display numeric values for multiple items (similar to a "tag cloud")
+ * See the [Badge documentation page](https://satellite.algolia.com/components/feedback/badge) for more information.
  */
 var Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,

package/cjs/Banners/Alert/Alert.d.ts

@@ -25,54 +25,9 @@ export interface AlertProps {
     children: ReactNode;
 }
 /**
-* Alerts inform users about important changes or temporally conditions. Use this component if you need to communicate something to users in a prominent way.
-
-* ## Examples
-* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A262266)
-
-* ## Current Status
-* - [x] Figma
-* - [x] React
-* - [ ] Documentation
-
-* ## Component structure
-* This component uses a common banner structure. It uses an icon that should match the intent of the message, an optional title _(Highly recommended)_, a short paragraph of text and optional buttons for follow up actions. The `Alert` is dismissible by default, to do so a cross icon is displayed on the top-right corner.
-
-* ## Guidelines
-* ### How to use it?
-* Use the `Alert` if you want to inform the user about a specific action they need to do after something happened.
-
-* ### How to NOT use it?
-* Do not use the component to give higher visibility to trivial information, use the [Insert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-insert--basic) component instead.
-* Make sure that alerts are not stacking, We highly recommend to have only one per page if possible, though we understand that sometimes this is not possible.
-* Do not use a product wide `Alert` to display features information.
-
-* ### Variants
-* This component comes with two sets of Variants:
-
-* #### Color
-* - `Grey` `Default`
-*   Use this as your default Alert if no other color matches your use-case.
-* - `Accent` `Primary`
-*   Use this to represent something that is currently happening with no level of severity.
-* - `Green` `Success`
-*   Use this to inform the user that an action has been completed in the background while the user wasn't on that page and/or needs further exploration from the user. For smaller and quick processes use the [Flag](https://algolia-satellite.netlify.app/?path=/docs/indicators-flag--basic) instead.
-* - `Orange` `Warning`
-*   Use this to show the user that something important requires their attention. The warning should be used for low to medium errors.
-* - `Red` `Failure`
-*   Use this to show the user that something requires their full attention and actions. Only use red for critical warnings that will result in a loss of data of production down time.
-
-* #### Usage Context
-* - `Page`
-*   This is for global and product wide alerts, use that with extreme caution as it's will impact every page and every feature.
-* - `Section`
-*   This alert should be inside the frame of a section and linked to the content it impacts
-
-* ### Do's and Don't
-* TODO
-
-* ## Accessibility
-* TODO
+ * The `Alert` component give users suggestions, tips, warnings, and error information without stopping them from completing the tasks they're doing.
+ *
+ * See the [Alert documentation page](https://satellite.algolia.com/components/feedback/alert) for more information.
  */
 export declare const Alert: VFC<AlertProps>;
 export default Alert;

package/cjs/Banners/Alert/Alert.js

@@ -43,54 +43,9 @@ var ICON_CLASSNAME_VARIANTS = {
 };
 
 /**
-* Alerts inform users about important changes or temporally conditions. Use this component if you need to communicate something to users in a prominent way.
-
-* ## Examples
-* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A262266)
-
-* ## Current Status
-* - [x] Figma
-* - [x] React
-* - [ ] Documentation
-
-* ## Component structure
-* This component uses a common banner structure. It uses an icon that should match the intent of the message, an optional title _(Highly recommended)_, a short paragraph of text and optional buttons for follow up actions. The `Alert` is dismissible by default, to do so a cross icon is displayed on the top-right corner.
-
-* ## Guidelines
-* ### How to use it?
-* Use the `Alert` if you want to inform the user about a specific action they need to do after something happened.
-
-* ### How to NOT use it?
-* Do not use the component to give higher visibility to trivial information, use the [Insert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-insert--basic) component instead.
-* Make sure that alerts are not stacking, We highly recommend to have only one per page if possible, though we understand that sometimes this is not possible.
-* Do not use a product wide `Alert` to display features information.
-
-* ### Variants
-* This component comes with two sets of Variants:
-
-* #### Color
-* - `Grey` `Default`
-*   Use this as your default Alert if no other color matches your use-case.
-* - `Accent` `Primary`
-*   Use this to represent something that is currently happening with no level of severity.
-* - `Green` `Success`
-*   Use this to inform the user that an action has been completed in the background while the user wasn't on that page and/or needs further exploration from the user. For smaller and quick processes use the [Flag](https://algolia-satellite.netlify.app/?path=/docs/indicators-flag--basic) instead.
-* - `Orange` `Warning`
-*   Use this to show the user that something important requires their attention. The warning should be used for low to medium errors.
-* - `Red` `Failure`
-*   Use this to show the user that something requires their full attention and actions. Only use red for critical warnings that will result in a loss of data of production down time.
-
-* #### Usage Context
-* - `Page`
-*   This is for global and product wide alerts, use that with extreme caution as it's will impact every page and every feature.
-* - `Section`
-*   This alert should be inside the frame of a section and linked to the content it impacts
-
-* ### Do's and Don't
-* TODO
-
-* ## Accessibility
-* TODO
+ * The `Alert` component give users suggestions, tips, warnings, and error information without stopping them from completing the tasks they're doing.
+ *
+ * See the [Alert documentation page](https://satellite.algolia.com/components/feedback/alert) for more information.
  */
 var Alert = exports.Alert = function Alert(_ref) {
   var title = _ref.title,

package/cjs/Banners/BigBertha/BigBertha.d.ts

@@ -5,37 +5,9 @@ export interface BigBerthaProps {
     children: ReactNode;
 }
 /**
-* Major product wide announcement from Algolia to the users.
-
-* ## Examples
-* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279476)
-
-* ## Current Status
-* - [x] Figma
-* - [x] React
-* - [ ] Documentation
-
-* ## Component structure
-* This is a simple high contrast banner. It use an icon that should match the content of the message, a short text that describe the situation and can contain "Learn more" links.
-
-* ## Guidelines
-
-* ### How to use it?
-* This component should only be used to inform the user about an on-going situation at Algolia that will impact the users' or end-users' experience with our products. The content of the message should be concise and explicit. Make sure that the tone used in the text does not generate stress.
-
-* ### How to NOT use it?
-* - Do not use this banner for any non critical announcement or any non product wide announcement.
-* - If you want to inform the user about something in your features, please use the [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants) component.
-* - If you want to promote a specific feature, please use the [Promote Banner](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-promote--basic) component.
-
-* ### Variants
-* - Blue banner : Default state of this component
-
-* ### Do's and Don't
-* TODO
-
-* ## Accessibility
-* TODO
+ * The `BigBertha` component is a top-of-page alert for critical system messages, updates, and urgent warnings.
+ *
+ * See the [Big Bertha documentation page](https://satellite.algolia.com/components/feedback/big-bertha) for more information.
  */
 export declare const BigBertha: VFC<BigBerthaProps>;
 export default BigBertha;

package/cjs/Banners/BigBertha/BigBertha.js

@@ -11,37 +11,9 @@ var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/sa
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3;
 /**
-* Major product wide announcement from Algolia to the users.
-
-* ## Examples
-* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279476)
-
-* ## Current Status
-* - [x] Figma
-* - [x] React
-* - [ ] Documentation
-
-* ## Component structure
-* This is a simple high contrast banner. It use an icon that should match the content of the message, a short text that describe the situation and can contain "Learn more" links.
-
-* ## Guidelines
-
-* ### How to use it?
-* This component should only be used to inform the user about an on-going situation at Algolia that will impact the users' or end-users' experience with our products. The content of the message should be concise and explicit. Make sure that the tone used in the text does not generate stress.
-
-* ### How to NOT use it?
-* - Do not use this banner for any non critical announcement or any non product wide announcement.
-* - If you want to inform the user about something in your features, please use the [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants) component.
-* - If you want to promote a specific feature, please use the [Promote Banner](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-promote--basic) component.
-
-* ### Variants
-* - Blue banner : Default state of this component
-
-* ### Do's and Don't
-* TODO
-
-* ## Accessibility
-* TODO
+ * The `BigBertha` component is a top-of-page alert for critical system messages, updates, and urgent warnings.
+ *
+ * See the [Big Bertha documentation page](https://satellite.algolia.com/components/feedback/big-bertha) for more information.
  */
 var BigBertha = exports.BigBertha = function BigBertha(_ref) {
   var icon = _ref.icon,

package/cjs/Banners/Promote/Promote.d.ts

@@ -20,32 +20,9 @@ export declare type PromoteProps = {
     children: ReactNode;
 } & (CompactPromoteProps | WidePromoteProps);
 /**
-* A contextual way of showing our user that a new feature / product is available to them on a higher plan or as an option.
-
-* ## Examples
-* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279945)
-
-* ## Current Status
-* - [x] Figma
-* - [x] React
-* - [ ] Documentation
-
-* ## Component structure
-* This component is a bigger banner. It include an optional image, an optional product context, a title, a short text (2 lines maximum without an image and 3 lines maximum with an image), optional CTAs (one primary and one secondary). It comes in two different variants: `large` and `compact`.
-
-* ## Guidelines
-* ### How to use it?
-* You should use this component to display to the users that a new features/product is now available for them in the current context they are in. This feature can be automatically available or locked behind higher plan tier, please make sure you adapt the content to not give false impression of availability to the user.
-
-* This component is permanently dismissible by default.
-
-* ### How to NOT use it?
-* - Do not use this banner as a regular [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants).
-* - You can only use one `large` promotion banner per context and two/four compact per context.
-
-* ### Variants
-* - `large`
-* - `compact`
+ * The `Promote` component is a contextual way of showing a user that a new feature or product is available to them on a higher plan or as an option.
+ *
+ * See the [Promote documentation page](https://satellite.algolia.com/components/feedback/promote-banner) for more information.
  */
 export declare const Promote: VFC<PromoteProps>;
 export default Promote;

package/cjs/Banners/Promote/Promote.js

@@ -27,32 +27,9 @@ var ACTIONS_VARIANT_CLASSNAMES = {
 };
 
 /**
-* A contextual way of showing our user that a new feature / product is available to them on a higher plan or as an option.
-
-* ## Examples
-* [See the component in Figma](https://www.figma.com/file/99l59il97k2n5y4n6Jucal/%5BSatellite%5D-Components?node-id=2912%3A279945)
-
-* ## Current Status
-* - [x] Figma
-* - [x] React
-* - [ ] Documentation
-
-* ## Component structure
-* This component is a bigger banner. It include an optional image, an optional product context, a title, a short text (2 lines maximum without an image and 3 lines maximum with an image), optional CTAs (one primary and one secondary). It comes in two different variants: `large` and `compact`.
-
-* ## Guidelines
-* ### How to use it?
-* You should use this component to display to the users that a new features/product is now available for them in the current context they are in. This feature can be automatically available or locked behind higher plan tier, please make sure you adapt the content to not give false impression of availability to the user.
-
-* This component is permanently dismissible by default.
-
-* ### How to NOT use it?
-* - Do not use this banner as a regular [Alert](https://algolia-satellite.netlify.app/?path=/docs/indicators-banners-alert--variants).
-* - You can only use one `large` promotion banner per context and two/four compact per context.
-
-* ### Variants
-* - `large`
-* - `compact`
+ * The `Promote` component is a contextual way of showing a user that a new feature or product is available to them on a higher plan or as an option.
+ *
+ * See the [Promote documentation page](https://satellite.algolia.com/components/feedback/promote-banner) for more information.
  */
 var Promote = exports.Promote = function Promote(_ref) {
   var context = _ref.context,

package/cjs/Button/Button.d.ts

@@ -2,18 +2,9 @@
 import { type PolymorphicButtonProps } from "./PolymorphicButton";
 export declare type ButtonProps = Omit<PolymorphicButtonProps<"button">, "as" | "ref">;
 /**
- * Buttons are used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. Buttons can contain a combination of a clear label and an icon while links are always text.
+ * The `Button` component is used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. It can contain a combination of a clear label and an icon while links are always text.
  *
- * ## Variations
- * - **Primary**: to highlight the strongest action on a page. Should only appear once per screen. Not every screen requires a primary button
- * - **Neutral (default)**: the standard button for most use cases
- * - **Destructive**: appears as a final confirmation for a destructive action (e.g. deleting an index). Should be used with care, primarily in confirmation modals
- * - **Subtle-neutral**: user with a primary button or for actionals that are less crucial (e.g. Cancel)
- *
- * ## Styles
- * - Use icons before the label in any button type to draw more attention to it, or help convey more meaning
- * - Use icon-only button for an action that is less critical and doesn't have to drag too much of user attention
- * - Buttons can take the full width to fill the parent container
+ * See the [Button documentation page](https://satellite.algolia.com/components/actions/button) for more information.
  */
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/cjs/Button/Button.js

@@ -12,18 +12,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 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; }
 /**
- * Buttons are used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. Buttons can contain a combination of a clear label and an icon while links are always text.
+ * The `Button` component is used to trigger user actions (like "Add", "Close" or "Save") or navigate users elsewhere through the links. It can contain a combination of a clear label and an icon while links are always text.
  *
- * ## Variations
- * - **Primary**: to highlight the strongest action on a page. Should only appear once per screen. Not every screen requires a primary button
- * - **Neutral (default)**: the standard button for most use cases
- * - **Destructive**: appears as a final confirmation for a destructive action (e.g. deleting an index). Should be used with care, primarily in confirmation modals
- * - **Subtle-neutral**: user with a primary button or for actionals that are less crucial (e.g. Cancel)
- *
- * ## Styles
- * - Use icons before the label in any button type to draw more attention to it, or help convey more meaning
- * - Use icon-only button for an action that is less critical and doesn't have to drag too much of user attention
- * - Buttons can take the full width to fill the parent container
+ * See the [Button documentation page](https://satellite.algolia.com/components/actions/button) for more information.
  */
 var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PolymorphicButton.PolymorphicButton, _objectSpread(_objectSpread({}, props), {}, {

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

@@ -11,9 +11,9 @@ var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satel
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 /**
- * - 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.
  */
 var ButtonGroup = exports.ButtonGroup = function ButtonGroup(_ref) {
   var className = _ref.className,