@ultraviolet/ui 1.13.1 → 1.15.0

package/README.md

@@ -1,6 +1,6 @@
 # Ultraviolet UI
 
-[![npm version](https://badge.fury.io/js/%40scaleway%2Fui.svg)](https://badge.fury.io/js/%40scaleway%2Fui)
+[![npm version](https://badge.fury.io/js/%40ultraviolet%2Fui.svg)](https://badge.fury.io/js/%40ultraviolet%2Fui)
 
 Ultraviolet UI is a set of React components and utilities to build fast application.
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, HTMLAttributes, ElementType, KeyboardEventHandler, TextareaHTMLAttributes } from 'react';
+import react__default, { ReactNode, ComponentProps, ButtonHTMLAttributes, AriaRole, MouseEventHandler, JSX, MouseEvent, InputHTMLAttributes, HTMLAttributeAnchorTarget, AnchorHTMLAttributes, ReactElement, Ref, RefObject, KeyboardEventHandler, HTMLAttributes, CSSProperties, ChangeEventHandler, FocusEventHandler, ForwardRefExoticComponent, ForwardedRef, ElementType, TextareaHTMLAttributes } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
@@ -27,6 +27,13 @@ type ActionBarProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * The ActionBar is a floating bar that appears at the bottom of a page.
+ * It can be used to display important actions or information to the user, and can be configured to display a variety of different content types.
+ *
+ * **Note:** ActionBar is added into a portal at the end of the body element. This means that it will always be on top of other elements without `z-index`,
+ * and will not be affected by the layout of the page it is on.
+ */
 declare const ActionBar: ({ children, role, rank, className, "data-testid": dataTestId, }: ActionBarProps) => react.ReactPortal;
 
 type ScreenSize = keyof typeof consoleLightTheme.screens;
@@ -554,15 +561,15 @@ declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
         menu: string;
         modal: string;
         popover: string;
+        tabBar: {
+            active: string;
+            off: string;
+        };
         tooltip: string;
     };
     space: {
         '0': string;
-        '0.25': string;
-        '0.5': string;
         '1': string;
-        '1.5': string;
-        '10': string;
         '2': string;
         '3': string;
         '4': string;
@@ -571,6 +578,10 @@ declare const extendTheme: (extendedTheme: RecursivePartial<SCWUITheme>) => {
         '7': string;
         '8': string;
         '9': string;
+        '10': string;
+        '0.25': string;
+        '0.5': string;
+        '1.5': string;
     };
     theme: string;
     typography: {
@@ -773,6 +784,7 @@ declare const VARIANTS_COMPONENTS: {
 type ButtonVariant = keyof typeof VARIANTS_COMPONENTS;
 type CommonProps = {
     type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    autoFocus?: ButtonHTMLAttributes<HTMLButtonElement>['autoFocus'];
     variant?: ButtonVariant;
     role?: AriaRole;
     size?: ButtonSize;
@@ -821,6 +833,10 @@ type FinalProps = CommonProps & ({
     target?: string;
     download?: string;
 });
+/**
+ * Button component is used to trigger an action or event, such as submitting a form, opening a dialog,
+ * canceling an action, or performing a delete operation.
+ */
 declare const Button: react.ForwardRefExoticComponent<FinalProps & react.RefAttributes<Element>>;
 
 declare const ALERT_SENTIMENTS: readonly ["danger", "info", "success", "warning"];
@@ -843,6 +859,9 @@ type AlertProps = {
      */
     disabled?: boolean;
 };
+/**
+ * Alert component is used to display a short, important message in a way that attracts the user's attention without interrupting the user's task.
+ */
 declare const Alert: ({ children, title, sentiment, buttonText, onClickButton, closable, onClose, className, disabled, "data-testid": dataTestId, }: AlertProps) => _emotion_react_jsx_runtime.JSX.Element | null;
 
 type Without<T, U> = {
@@ -888,6 +907,9 @@ type AvatarProps = {
         text: string;
     }
 ]>;
+/**
+ * Avatar component is used to display a user's profile picture or initials.
+ */
 declare const Avatar: ({ image, size, text, textBgColor, textColor, textSize, lock, className, "data-testid": dataTestId, }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type IconName$1 = ComponentProps<typeof Icon>['name'];
@@ -913,6 +935,9 @@ type BadgeProps = {
     children: ReactNode;
     'data-testid'?: string;
 };
+/**
+ * Badge component is used to display a status or a label in a small container.
+ */
 declare const Badge: ({ sentiment, size, prominence, icon, disabled, className, children, "data-testid": dataTestId, }: BadgeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Variant$1 = 'intro' | 'promotional';
@@ -930,6 +955,9 @@ type BannerProps = {
     image?: ReactNode;
     className?: string;
 };
+/**
+ * Banner component is used to display an informative message to the user with style.
+ */
 declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, }: BannerProps) => _emotion_react_jsx_runtime.JSX.Element | null;
 
 type BarChartToolTipProps = {
@@ -957,6 +985,8 @@ type BarChartProps = {
     'data-testid'?: string;
 };
 /**
+ * BarChart component is used to display data in a bar chart format. It uses the Nivo library under the hood.
+ * See https://nivo.rocks/bar/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, }: BarChartProps) => _emotion_react_jsx_runtime.JSX.Element;
@@ -991,6 +1021,9 @@ type BarStackProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * BarStack is a graphic component that is used to show data in one dimension.
+ */
 declare const BarStack: ({ data, total, className, "data-testid": dataTestId, }: BarStackProps) => JSX.Element;
 
 type ItemProps$1 = {
@@ -1017,6 +1050,9 @@ type BreadcrumbsProps = {
 type BreadcrumbsType = ((props: BreadcrumbsProps) => JSX.Element) & {
     Item: typeof Item;
 };
+/**
+ * Breadcrumbs component is used to display a navigation path with links to the parent pages.
+ */
 declare const Breadcrumbs: BreadcrumbsType;
 
 declare const PROMINENCES$2: {
@@ -1048,6 +1084,9 @@ type BulletProps = {
     'data-testid'?: string;
     prominence?: ProminenceType;
 } & ContentProps$1;
+/**
+ * Bullet component is used to display a small icon or text with a colored background in a circle.
+ */
 declare const Bullet: ({ className, sentiment, size, icon, text, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, }: BulletProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type CardProps = {
@@ -1064,6 +1103,9 @@ type CardProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * Card component is a simple component to display content in a box with a border.
+ */
 declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
 
 type CarouselItemProps = {
@@ -1074,6 +1116,9 @@ type CarouselProps = {
     children?: ReactNode;
     'data-testid'?: string;
 };
+/**
+ * Carousel component allows you to scroll horizontally through a list of items.
+ */
 declare const Carousel: {
     ({ children, className, "data-testid": dataTestId, }: CarouselProps): JSX.Element;
     Item: ({ children }: CarouselItemProps) => JSX.Element;
@@ -1108,6 +1153,9 @@ type CheckboxProps = {
         children: ReactNode;
     }
 ]>;
+/**
+ * Checkbox is an input component used to select or deselect an option.
+ */
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
 type CopyButtonProps = {
@@ -1120,6 +1168,9 @@ type CopyButtonProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * CopyButton is a button that copies a given value to the clipboard.
+ */
 declare const CopyButton: ({ size, value, copyText, copiedText, sentiment, noBorder, className, "data-testid": dataTestId, }: CopyButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type DateInputProps = Pick<ReactDatePickerProps<string>, 'autoFocus' | 'disabled' | 'locale' | 'maxDate' | 'minDate' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'required'> & {
@@ -1133,6 +1184,10 @@ type DateInputProps = Pick<ReactDatePickerProps<string>, 'autoFocus' | 'disabled
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * DateInput is a wrapper around react-datepicker that provides a consistent look and feel with the rest of the Ultraviolet UI.
+ * See https://reactdatepicker.com/ for more information.
+ */
 declare const DateInput: ({ autoFocus, disabled, error, format, label, locale, maxDate, minDate, name, onBlur, onChange, onFocus, required, value, className, "data-testid": dataTestId, }: DateInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const CONTAINER_SIZES: {
@@ -1167,6 +1222,9 @@ type EmptyStateProps = {
     children?: ReactNode;
     'data-testid'?: string;
 };
+/**
+ * EmptyState component is used to display a message when there is no data to show.
+ */
 declare const EmptyState: ({ image, title, size, description, primaryButton, secondaryButton, learnMore, className, bordered, children, "data-testid": dataTestId, }: EmptyStateProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ExpandableProps = {
@@ -1185,6 +1243,11 @@ type ExpandableProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * The Expandable component is a dynamic React component that allows for the expansion of its children content
+ * based on its height. The component comes with a sleek and smooth animation, providing a visually pleasing
+ * user experience.
+ */
 declare const Expandable: ({ children, opened, minHeight, className, "data-testid": dataTestId, }: ExpandableProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Transformer = (value: DatumValue) => string;
@@ -1212,6 +1275,8 @@ type LineChartProps = {
     'data-testid'?: string;
 };
 /**
+ * LineChart component is a wrapper around Nivo's ResponsiveLine component used to display data in a line chart.
+ * See https://nivo.rocks/line/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 declare const LineChart: ({ height, margin, xScale, yScale, data, withLegend, axisFormatters, pointFormatters, tickValues, chartProps, "data-testid": dataTestId, }: LineChartProps) => _emotion_react_jsx_runtime.JSX.Element;
@@ -1240,6 +1305,9 @@ type LinkProps = {
     oneLine?: boolean;
     'data-testid'?: string;
 };
+/**
+ * Link is a component used to navigate between pages or to external websites.
+ */
 declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
 type HeaderCellProps$1 = {
@@ -1284,6 +1352,9 @@ type ListProps = {
      * */
     autoCollapse?: boolean;
 };
+/**
+ * List is a component that displays a list of items based on the columns you provide and the data you pass.
+ */
 declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttributes<HTMLDivElement>> & {
     Row: react.ForwardRefExoticComponent<{
         children: ReactNode;
@@ -1338,6 +1409,9 @@ type LoaderProps = {
      */
     label?: string;
 };
+/**
+ * Loader is a circular progress indicator that can be used to indicate that an action is being performed.
+ */
 declare const Loader: ({ percentage, text, size, strokeWidth, color, trailColor, active, label, }: LoaderProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type DisclosureElement = ((popover: Partial<PopoverStateReturn>) => ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>) | (ReactElement<ButtonHTMLAttributes<HTMLButtonElement>> & {
@@ -1363,6 +1437,12 @@ type MenuProps = {
     visible?: boolean;
     'data-testid'?: string;
 };
+/**
+ * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
+ * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
+ * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
+ * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
+ */
 declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLButtonElement>> & {
     Item: react.ForwardRefExoticComponent<{
         href?: string | undefined;
@@ -1398,6 +1478,9 @@ type PasswordStrengthMeterProps$1 = {
     'data-testid'?: string;
     id?: string;
 };
+/**
+ * Show strength of a password based on different criteria.
+ */
 declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, id, }: PasswordStrengthMeterProps$1) => JSX.Element;
 
 type ModalSize = 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
@@ -1444,6 +1527,10 @@ type ModalProps = {
      */
     customDialogStyles?: react__default.JSX.IntrinsicAttributes['css'];
 };
+/**
+ * Modal is a component that allows you to display content on top of other content.
+ * It is often used to display a dialog with additional information or to ask for a confirmation.
+ */
 declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, opened, placement, preventBodyScroll, size, className, "data-testid": dataTestId, backdropClassName, width, customDialogStyles, customDialogBackdropStyles, }: ModalProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type NoticeProps = {
@@ -1451,6 +1538,9 @@ type NoticeProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * A Notice is used to display a short message to the user.
+ */
 declare const Notice: ({ children, className, "data-testid": dataTestId, }: NoticeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type CheckboxGroupCheckboxProps = Omit<ComponentProps<typeof Checkbox>, 'onChange' | 'checked' | 'required'> & {
@@ -1467,6 +1557,9 @@ type CheckboxGroupProps = {
     children: ReactNode;
     required?: boolean;
 } & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>;
+/**
+ * CheckboxGroup is a component that groups a set of checkboxes together with a legend and helper/error text.
+ */
 declare const CheckboxGroup: {
     ({ legend, value, className, helper, error, direction, children, onChange, name, required, }: CheckboxGroupProps): _emotion_react_jsx_runtime.JSX.Element;
     Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, }: CheckboxGroupCheckboxProps) => _emotion_react_jsx_runtime.JSX.Element;
@@ -1507,6 +1600,10 @@ type NumberInputProps = {
     placeholder?: string;
     error?: string | boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'defaultValue'>;
+/**
+ * NumberInput component is used to increment / decrement a number value by clicking on + / - buttons or
+ * by typing into input.
+ */
 declare const NumberInput: ({ disabled, maxValue, minValue, name, onChange, onFocus, onBlur, onMaxCrossed, onMinCrossed, size, step, text, defaultValue, value, disabledTooltip, className, label, id, placeholder, error, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "data-testid": dataTestId, }: NumberInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type PaginationProps = {
@@ -1534,7 +1631,8 @@ type PaginationProps = {
     'data-testid'?: string;
 };
 /**
- * Display multiple buttons to allow navigation between a paginated resource
+ * Pagination is a component to navigate between pages, it is composed of 2 buttons to go to the previous and next page,
+ * and a list of buttons to go to a specific page.
  */
 declare const Pagination: ({ disabled, page, pageCount, onChange, pageTabCount, className, "data-testid": dataTestId, }: PaginationProps) => JSX.Element;
 
@@ -1552,6 +1650,10 @@ type PasswordCheckProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * PasswordCheck is a component that display a list of password rules with a check or a cross depending on the validity
+ * of the rule.
+ */
 declare const PasswordCheck: ({ rules, className, "data-testid": dataTestId, }: PasswordCheckProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Strength = {
@@ -1588,6 +1690,7 @@ type PasswordStrengthMeterProps = {
     'data-testid'?: string;
 };
 /**
+ * PasswordStrengthMeter is a component that displays a password strength meter.
  * @deprecated use Meter component instead
  */
 declare const PasswordStrengthMeter: ({ password, onChange, strength, title, estimate, forbiddenInputs, className, "data-testid": dataTestId, }: PasswordStrengthMeterProps) => JSX.Element;
@@ -1611,6 +1714,8 @@ type PieChartProps = {
     margin?: Box;
 };
 /**
+ * PieChart component is a wrapper around the Nivo Pie component to display a pie chart.
+ * See https://nivo.rocks/pie/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 declare const PieChart: ({ height, width, data, emptyLegend, content, withLegend, margin, chartProps, }: PieChartProps) => _emotion_react_jsx_runtime.JSX.Element;
@@ -1652,6 +1757,9 @@ type TooltipProps$1 = {
     role?: string;
     'data-testid'?: string;
     hasArrow?: boolean;
+    onClose?: () => void;
+    onKeyDown?: KeyboardEventHandler;
+    'aria-haspopup'?: HTMLAttributes<HTMLDivElement>['aria-haspopup'];
 };
 declare const Popup: react.ForwardRefExoticComponent<TooltipProps$1 & react.RefAttributes<HTMLDivElement>>;
 
@@ -1668,10 +1776,14 @@ type PopoverProps = {
     sentiment?: SentimentType;
     visible?: boolean;
     size?: keyof typeof SIZES_WIDTH;
-    onClose: () => void;
+    onClose?: () => void;
     className?: string;
     'data-testid'?: string;
 } & Pick<ComponentProps<typeof Popup>, 'placement'>;
+/**
+ * Popover component is used to display additional information or actions on top of the main content of the page.
+ * It is usually triggered by clicking on a button. It includes a title, a close button and a content area.
+ */
 declare const Popover: ({ visible, children, placement, content, title, sentiment, size, onClose, className, "data-testid": dataTestId, }: PopoverProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const progressBarSentiments: readonly ["primary", "success", "warning", "info"];
@@ -1683,6 +1795,9 @@ type ProgressBarProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * Progress bar component to display progress of a task. Can be used to display progress of a form or a loading state.
+ */
 declare const ProgressBar: ({ progress, value, sentiment, className, "data-testid": dataTestId, }: ProgressBarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type RadioProps = {
@@ -1700,6 +1815,9 @@ type RadioProps = {
     'aria-label'?: never;
     label: ReactNode;
 });
+/**
+ * Radio component is used to select a single option from a list of options. It is a type of input component.
+ */
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
 type RowProps = {
@@ -1711,6 +1829,10 @@ type RowProps = {
     alignItems?: CSSProperties['alignItems'];
     justifyContent?: CSSProperties['justifyContent'];
 };
+/**
+ * Row component is a wrapper for grid layout.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
 declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, }: RowProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SelectableCardProps = {
@@ -1731,6 +1853,10 @@ type SelectableCardProps = {
     label?: ReactNode;
     'data-testid'?: string;
 };
+/**
+ * SelectableCard is a component that can be used to create a radio or checkbox card.
+ * It can be used to create a list of selectable items or a single selectable item.
+ */
 declare const SelectableCard: react.ForwardRefExoticComponent<SelectableCardProps & react.RefAttributes<HTMLDivElement>>;
 
 type SelectOption = {
@@ -1794,6 +1920,10 @@ type SelectInputProps = SelectProps & SelectStyleProps & {
     'data-testid'?: string;
 };
 type OptionComponent = (props: Partial<OptionProps<SelectOption> & SelectOption>) => JSX.Element;
+/**
+ * SelectInput component is a wrapper around [react-select](https://react-select.com) component.
+ * It provides a styled select input with a label and an error message.
+ */
 declare const SelectInput: ForwardRefExoticComponent<Partial<SelectInputProps>> & {
     Option: OptionComponent;
 };
@@ -1807,6 +1937,9 @@ type SeparatorProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * Separator component used to separate content with a horizontal or vertical line.
+ */
 declare const Separator: ({ direction, thickness, color, icon, className, "data-testid": dataTestId, }: SeparatorProps) => JSX.Element;
 
 declare const variants$1: {
@@ -1841,6 +1974,11 @@ type SkeletonProps = {
     col?: number;
     className?: string;
 };
+/**
+ * Skeleton component is used to indicate that the data is loading.
+ * It is used to provide a better user experience by showing a temporary placeholder reflecting the dimensions of the
+ * content that will eventually be loaded on the screen.
+ */
 declare const Skeleton: ({ variant, length, col, className, }: SkeletonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type Prefixes = 'lines' | 'command';
@@ -1857,6 +1995,10 @@ type SnippetProps = {
     hideText?: string;
     'data-testid'?: string;
 } & Pick<ComponentProps<typeof CopyButton>, 'copyText' | 'copiedText'>;
+/**
+ * Snippet component is used to display code snippets with the ability to copy the code.
+ * It also has the ability to show/hide the code snippet if it has more than 4 lines.
+ */
 declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, }: SnippetProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type StackProps = {
@@ -1871,6 +2013,10 @@ type StackProps = {
     children: ReactNode;
     'data-testid'?: string;
 };
+/**
+ * A Stack is a widget that organize children in a vertical or horizontal layout based on css Flex,
+ * it accepts few props to deal with spacing and align.
+ */
 declare const Stack: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: react.ElementType<any> | undefined;
@@ -1901,6 +2047,9 @@ type StatusProps = {
     tooltip?: string;
     'data-testid'?: string;
 };
+/**
+ * Status component used to display a colored circle with a tooltip for additional information.
+ */
 declare const Status: ({ animated, className, tooltip, sentiment, "data-testid": dataTestId, }: StatusProps) => JSX.Element;
 
 type Sizes = 'small' | 'medium';
@@ -1924,6 +2073,7 @@ type StepListProps = {
     'data-testid'?: string;
 };
 /**
+ * StepList component is used to display a list of steps.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 declare const StepList: {
@@ -1938,6 +2088,9 @@ type StepperProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * Stepper component to show the progress of a process in a linear way.
+ */
 declare const Stepper: ({ children, selected, animated, className, "data-testid": dataTestId, }: StepperProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SwitchButtonProps = {
@@ -1960,6 +2113,9 @@ type SwitchButtonProps = {
     className?: string;
     'data-testid'?: string;
 };
+/**
+ * SwitchButton is a component that allows the user to select between two options.
+ */
 declare const SwitchButton: ({ value, onChange, onFocus, onBlur, name, leftButton, rightButton, tooltip, className, "data-testid": dataTestId, }: SwitchButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type HeaderCellProps = {
@@ -2007,6 +2163,9 @@ type TableProps = {
     bordered?: boolean;
     stripped?: boolean;
 };
+/**
+ * Table is a component that displays data in a tabular format.
+ */
 declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>> & {
     Body: ({ children }: {
         children: ReactNode;
@@ -2048,6 +2207,9 @@ type TabsProps = {
     className?: string;
     'data-testid'?: string;
 } & Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'role'>;
+/**
+ * Tabs component is used to display a set of tabs with a single tab selected at a time.
+ */
 declare const Tabs: {
     ({ children, onChange, moreDisclosure, selected, className, "data-testid": dataTestId, ...props }: TabsProps): _emotion_react_jsx_runtime.JSX.Element;
     Tab: react.ForwardRefExoticComponent<Omit<{
@@ -2102,6 +2264,10 @@ type TagProps = {
     children: ReactNode;
     'data-testid'?: string;
 };
+/**
+ * Tag component is used to display a short text description of an item. It can be used to display a category
+ * or any other metadata.
+ */
 declare const Tag: ({ children, isLoading, onClose, icon, copiable, copyText, copiedText, disabled, sentiment, className, "data-testid": dataTestId, }: TagProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const variants: {
@@ -2134,6 +2300,7 @@ type TagInputProps = {
     'data-testid'?: string;
 };
 /**
+ * TagInput is a component that allows users to input tags.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 declare const TagInput: ({ disabled, id, manualInput, name, onChange, onChangeError, placeholder, tags, variant, className, "data-testid": dataTestId, }: TagInputProps) => JSX.Element;
@@ -2162,6 +2329,9 @@ type TagListProps = {
     className?: string;
     'data-testid'?: string;
 } & Pick<ComponentProps<typeof Tag>, 'copiable' | 'copyText' | 'copiedText'>;
+/**
+ * This component is used to display a list of tags with a threshold and a popover when there are too many tags.
+ */
 declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, copiable, copyText, copiedText, className, "data-testid": dataTestId, }: TagListProps) => JSX.Element | null;
 
 declare const PROMINENCES: {
@@ -2179,7 +2349,7 @@ type TextProps = {
     placement?: PlacementProps;
     variant: TextVariant;
     /**
-     * @deprecated: use `sentiment` property instead
+     * @deprecated use `sentiment` property instead
      */
     color?: Color;
     sentiment?: Color;
@@ -2194,6 +2364,9 @@ type TextProps = {
     htmlFor?: string;
     'data-testid'?: string;
 };
+/**
+ * Text component is used to display text with different variants and sentiments.
+ */
 declare const Text: ({ variant, children, as, color, sentiment, oneLine, placement, prominence, className, disabled, italic, underline, id, dir, htmlFor, "data-testid": dataTestId, }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const inputSizes: {
@@ -2261,6 +2434,10 @@ type TextInputProps = {
     max?: InputHTMLAttributes<HTMLInputElement>['max'];
     min?: InputHTMLAttributes<HTMLInputElement>['min'];
 } & (Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> | Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>);
+/**
+ * TextInput component allows users to input text, with options for customization and validation.
+ * It supports various input types and should be appropriately sized with clear labeling.
+ */
 declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
 
 declare const schedules: {
@@ -2280,6 +2457,8 @@ type TimeInputType = ((props: TimeInputProps) => JSX.Element) & {
     options: typeof options;
 };
 /**
+ * A time input component that allows users to select a time from a dropdown. The component is built on top of the
+ * `SelectInput` component.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 declare const TimeInput: TimeInputType;
@@ -2305,8 +2484,19 @@ type ToastContainerProps = {
     position?: ToastOptions['position'];
     'data-testid'?: string;
 };
+/**
+ * Display short information about an event that happen in the interface in a floating alert.
+ * Toaster is based on **react-tostify**, you can find a complete documentation
+ * [here](https://fkhadra.github.io/react-toastify/introduction/).
+ *
+ * Toaster is separated in two parts, first the `ToastContainer` which is where the div of the toast will be rendered,
+ * and second the `toast()` function which is used to display the toast.
+ */
 declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, }: ToastContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+/**
+ * Toggle component is used to toggle between two states (on/off, true/false, etc.).
+ */
 declare const Toggle: react.ForwardRefExoticComponent<{
     id?: string | undefined;
     checked?: boolean | undefined;
@@ -2345,6 +2535,10 @@ declare const ToggleGroup: {
 };
 
 type TooltipProps = Pick<ComponentProps<typeof Popup>, 'id' | 'children' | 'maxWidth' | 'placement' | 'text' | 'className' | 'visible' | 'innerRef' | 'role' | 'data-testid' | 'containerFullWidth'>;
+/**
+ * Tooltip component is used to display additional information on hover or focus.
+ * It is used to explain the purpose of the element it is attached to.
+ */
 declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
 
 type VerificationCodeProps = {
@@ -2375,6 +2569,9 @@ type VerificationCodeProps = {
     'data-testid'?: string;
     'aria-label'?: string;
 };
+/**
+ * Verification code allows you to enter a code in multiple fields (4 by default).
+ */
 declare const VerificationCode: ({ disabled, className, error, fields, initialValue, inputId, inputStyle, onChange, onComplete, placeholder, required, type, "data-testid": dataTestId, "aria-label": ariaLabel, }: VerificationCodeProps) => JSX.Element;
 
 type RadioGroupRadioProps = Omit<ComponentProps<typeof Radio>, 'onChange' | 'checked' | 'required'>;
@@ -2387,6 +2584,9 @@ type RadioGroupProps = {
     direction?: 'row' | 'column';
     children: ReactNode;
 } & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'required'>;
+/**
+ * RadioGroup is a component that allows users to select one option from a list of options using radio.
+ */
 declare const RadioGroup: {
     ({ legend, value, className, helper, error, direction, children, onChange, name, required, }: RadioGroupProps): _emotion_react_jsx_runtime.JSX.Element;
     Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: RadioGroupRadioProps) => _emotion_react_jsx_runtime.JSX.Element;