@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.13

package/dist/Accordion/AccordionMenu.d.ts

@@ -1,21 +1,36 @@
 import * as React from 'react';
 import { Size } from "../types";
 export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** List of items that will be rendered */
     items: AccordionItemProps[];
+    /** List of items that are currently expanded */
     selectedItems?: string[];
+    /** Callback used to set/save list of expanded items */
     setSelectedItems?: (a: string[]) => void;
+    /** Callback triggered when user clicks/selects one of the sections */
     onSelect?: (id: string) => void;
+    /** Flag that allows keeping more than one item expanded */
     multipleActive?: boolean;
+    /** Property that allows setting custom padding for items body container. */
     padding?: string;
     size?: Size.Small | Size.Medium | Size.Large;
 }
 export interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'aria-expanded' | 'onSelect' | 'tabIndex' | 'onKeyDown' | 'onClick' | 'onMouseDown'> {
+    /** Id of the item */
     id: string;
+    /** User will not be able to expand the item if it is disabled. */
     disabled?: boolean;
+    /** Title of the item that will be shown in the item header. */
     title: string;
+    /** Icon that will be shown on the left of the title */
     icon?: React.ReactNode;
+    /** Size of the item. */
     size?: Size.Small | Size.Medium | Size.Large;
+    /** Actual content of the item. */
     children: React.ReactNode;
 }
+/**
+ * AccordionMenu component that is capable of displaying multiple collapsable sections.
+ */
 declare const AccordionMenu: React.FunctionComponent<AccordionProps>;
 export default AccordionMenu;

package/dist/Accordion/ContentAccordion.d.ts

@@ -10,19 +10,33 @@ export declare const ContentAccordionItemContentFooter: import("styled-component
 export declare const ContentAccordionItem: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentAccordionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {
+    /** Id of the section. Should be unique. */
     id: string;
+    /** Title of the section. */
     title: string;
+    /** Header that will be shown in the content area of the item.  */
     header?: string;
+    /** Body that will be shown in the content area of the item */
     body: any;
+    /** Footer that will be shown in the content area of the item */
     footer?: any;
+    /** User can not expand the section if it is disabled */
     disabled?: boolean;
+    /** Initial state of the item (expanded/collapsed) */
     active?: boolean;
 }
 export interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** List of the content items */
     items: ContentAccordionItem[];
+    /** Allow keeping multiple content sections open */
     multi?: boolean;
+    /** Size of the whole component */
     size?: Size.Small | Size.Medium | Size.Large;
+    /** Callback that is called when section is collapsed/expanded. */
     onItemStateChanged?: (opened: string[]) => void;
 }
+/**
+ * ContentAccordion component that is capable of displaying multiple collapsable sections with content.
+ */
 export declare const ContentAccordion: React.FunctionComponent<ContentAccordionProps>;
 export default ContentAccordion;

package/dist/AuthPage/AuthPage.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { PanelProps } from "../Panel";
 export declare const AuthPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export type AuthPageProps = {
@@ -6,5 +6,5 @@ export type AuthPageProps = {
     order?: 'default' | 'reverse';
     screenSetsContainerId: string;
 };
-declare const AuthPage: ({ screenSetsContainerId, panel, order }: AuthPageProps) => JSX.Element;
+declare const AuthPage: ({ screenSetsContainerId, panel, order }: AuthPageProps) => React.JSX.Element;
 export default AuthPage;

package/dist/Banners/Banner.d.ts

@@ -9,17 +9,27 @@ export type StyleBannerProps = BannerProps & {
     linkFocused: string;
 };
 export declare const BannerContainerStyles: import("styled-components").StyledComponent<"div", any, React.HTMLAttributes<HTMLDivElement> & {
+    /** Size of the banner. */
     size?: Size.Small | Size.Medium | Size.Large | undefined;
-    type?: "positive" | "critical" | "warning" | "neutral" | undefined;
+    /** Type of the banner. Different types have different color schemes. */
+    type?: "warning" | "critical" | "positive" | "neutral" | undefined;
+    /** Link that will be shown after the children of the component. */
     link?: string | undefined;
+    /** Text of the link */
     linkText?: string | undefined;
+    /** If provided, then after user clicks on the link instead of following the link this method will be executed. */
     linkAction?: ((ev: React.MouseEvent) => void) | undefined;
-    hover?: string | undefined;
+    /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */
     bottom?: boolean | undefined;
+    /** For testing purposes. Will be set on top level container. */
     testId?: string | undefined;
+    /** Icon to be shown instead of default icon on the left side of the Banner. */
     icon?: React.ReactNode;
+    /** Callback event to be executed when user clicks on Close button. */
     onClose?: (() => void) | undefined;
+    /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */
     noIcon?: boolean | undefined;
+    /** Modifies margin of the banner for the cases when Banner stretches to full page width. */
     fullWidth?: boolean | undefined;
 } & {
     $type: string;
@@ -33,18 +43,29 @@ export declare const BannerCloseButtonContainerStyles: import("styled-components
 }, never>;
 export declare const BannerContentWrapperStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
 export type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Size of the banner. */
     size?: Size.Small | Size.Medium | Size.Large;
+    /** Type of the banner. Different types have different color schemes. */
     type?: 'warning' | 'critical' | 'positive' | 'neutral';
+    /** Link that will be shown after the children of the component. */
     link?: string;
+    /** Text of the link */
     linkText?: string;
+    /** If provided, then after user clicks on the link instead of following the link this method will be executed. */
     linkAction?: (ev: React.MouseEvent) => void;
-    hover?: string;
+    /** If set to true, then Banner will have 'margin-top' set to auto, and will render it at the bottom of the parent. */
     bottom?: boolean;
+    /** For testing purposes. Will be set on top level container. */
     testId?: string;
+    /** Icon to be shown instead of default icon on the left side of the Banner. */
     icon?: React.ReactNode;
+    /** Callback event to be executed when user clicks on Close button. */
     onClose?: () => void;
+    /** By default different banner types have different icons shown. If this flag is set, then no icon will be shown */
     noIcon?: boolean;
+    /** Modifies margin of the banner for the cases when Banner stretches to full page width. */
     fullWidth?: boolean;
 };
+/** Banner component is used as a middle-interrupting message to the user with zero to one actions. */
 declare const Banner: React.FunctionComponent<BannerProps>;
 export default Banner;

package/dist/Banners/OverviewBanner.d.ts

@@ -9,5 +9,5 @@ export type OverviewBannerProps = {
     children: any;
     testId?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
-declare const OverviewBanner: ({ children, testId, ...rest }: OverviewBannerProps) => JSX.Element;
+declare const OverviewBanner: ({ children, testId, ...rest }: OverviewBannerProps) => React.JSX.Element;
 export default OverviewBanner;

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -2,12 +2,19 @@ import * as React from 'react';
 import { Size } from '..';
 import { BreadcrumbItem } from './BreadcrumbItem';
 export type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** If set to false, then instead of 'Home' icon, link will be shown. Defaults to 'true' */
     homeIcon?: boolean;
+    /** Label of the home link. Will be shown only if homeIcon is set to false. Defaults to 'Home' */
     homeLabel?: string;
+    /** URL of the home link. Defaults to '/' */
     homeUrl?: string;
+    /** Array of items to show. */
     items?: BreadcrumbItem[];
-    size?: Size;
+    /** Size of Breadcrumb component and items. Can be Small, Medium or XSmall. Defaults to 'Small' */
+    size?: Size.Small | Size.Medium | Size.XSmall;
+    /** Displays last item as label, and not as a link by default. */
     lastItemAsLabel?: boolean;
 };
+/** Breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors. */
 declare const Breadcrumb: React.FunctionComponent<BreadcrumbProps>;
 export default Breadcrumb;

package/dist/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,4 +1,6 @@
 export interface BreadcrumbItem {
+    /** Label of the item */
     label: string;
+    /** URL of the item link */
     url: string;
 }

package/dist/Button/BackButton.d.ts

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { Size, Testable } from '../types';
+export declare const BackButtonContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+   * Required. The size of the back button. Can be 'Small' or 'XSmall'.
+   */
     size: Size.Small | Size.XSmall;
+    /**
+   * Optional. A boolean indicating whether the back button is disabled.
+   */
     disabled?: boolean;
 }
 declare const BackButton: React.FunctionComponent<BackButtonProps>;

package/dist/Button/Button.d.ts

@@ -1,24 +1,43 @@
 import * as React from 'react';
 import { Size } from '../types';
-export declare const ButtonPrimaryStyled: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
-export declare const ButtonSecondaryStyled: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
-export declare const ButtonTertiaryStyled: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
-export declare const ButtonPositiveStyled: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
-export declare const ButtonCriticalStyled: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
+export declare const ButtonContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ButtonPrimaryStyled: import("styled-components").StyledComponent<"button", any, ButtonProps & {
+    iconOnly: boolean;
+}, never>;
+export declare const ButtonSecondaryStyled: import("styled-components").StyledComponent<"button", any, ButtonProps & {
+    iconOnly: boolean;
+}, never>;
+export declare const ButtonTertiaryStyled: import("styled-components").StyledComponent<"button", any, ButtonProps & {
+    iconOnly: boolean;
+}, never>;
+export declare const ButtonPositiveStyled: import("styled-components").StyledComponent<"button", any, ButtonProps & {
+    iconOnly: boolean;
+}, never>;
+export declare const ButtonCriticalStyled: import("styled-components").StyledComponent<"button", any, ButtonProps & {
+    iconOnly: boolean;
+}, never>;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Look and feel variant of the component. Defaults to 'primary'. */
     variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';
+    /** Can be used in order to remove rounded corners on right or left edge of the button. Used by 'DualFunctionButton'. Defaults to 'undefined' */
     flatEdge?: 'right' | 'left' | 'none' | undefined;
-    role?: 'button' | string;
-    title?: string;
-    size?: Size;
+    /** Size of the component. Small, Medium or Large. Defaults to 'medium' */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /** Color theme altering of the component. By default there is no altering applied. */
     colorTheme?: 'teal' | 'dark';
+    /** Allows using inverted colors for outlining focus rect. Shown when component focused by keyboard. */
     invertFocus?: boolean;
+    /** Can be used to set custom value for width style. Value is set for 'ButtonContent' container. */
     width?: 'auto' | string;
+    /** If set, then 'opacity' of children container will be set to 0, and loading indicator will be shown.  */
     loading?: boolean;
+    /** TestId. Will be set to the top level button component. */
     testId?: string;
+    /** Icon that will be shown on the left of the children. */
     icon?: React.ReactNode;
-    minWidth?: string;
-    iconOnly?: boolean;
 }
+/**
+ * Button component
+ */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/Button/DualFunctionButton.d.ts

@@ -5,8 +5,18 @@ export interface ButtonOption {
     label: string;
 }
 export interface DualButtonProps extends ButtonProps {
+    /**
+    * Required. An object containing customization properties for the dropdown.
+    */
     dropdownCustomizationProps: DropdownCustomizationProps;
+    /**
+    * Optional. An array of strings representing the values in the dropdown menu.
+    */
     dropdownMenuValues?: string[];
+    /**
+     * Optional. A function to be called when the values in the dropdown menu change.
+     * It should return void, a boolean, or undefined.
+     */
     setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
 }
 declare const DualFunctionButton: React.FunctionComponent<DualButtonProps>;

package/dist/Button/Iconbutton.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Testable } from '../types';
 import { TooltipProps } from "../Tooltips/TooltipTypes";
-interface HeaderItemProps {
-    hideOnLowWidth: boolean;
+export interface HeaderItemProps {
     inMobileMenu?: boolean;
     useTransparentBackground?: boolean;
     iconColor?: string;
@@ -10,31 +9,38 @@ interface HeaderItemProps {
     borderRadius?: number;
     shape?: string;
     flatEdge?: string;
-    focusBackgroundColor?: string;
     invertFocus?: boolean;
     shouldNotInteract?: boolean;
 }
 export declare const IconButtonContentStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
-export declare const StyledPrimaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
-export declare const StyledSecondaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
+export declare const IconButtonStyled: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
+export declare const IconButtonStyledPrimary: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
+export declare const IconButtonStyledSecondary: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
 export interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {
+    /** Variant of the button. Defaults to 'primary' */
     variant?: 'primary' | 'secondary';
+    /** Shape of the button. Defaults to 'square' */
     shape?: 'square' | 'circular';
+    /** Action that will get executed when button is clicked. */
     action: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    hideOnLowWidth?: boolean;
+    /** Allows removing rounded corners on one of the edges of the button. */
     flatEdge?: 'right' | 'left' | 'none' | undefined;
-    isInMobileMenu?: boolean;
+    /** If set background filling color of the button will be transparent. */
     useTransparentBackground?: boolean;
-    shouldNotInteract?: boolean;
+    /** Custom fill color for SVG icon. */
     iconColor?: string;
+    /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */
     unsetIconSize?: boolean;
+    /** Sets border radius of the button.  */
     borderRadius?: number;
-    focusBackgroundColor?: string;
+    /** Content (icon) to show in the button. */
     children?: React.ReactNode;
+    /** Invert color scheme of focus framing. */
     invertFocus?: boolean;
+    /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */
     focusOnClick?: boolean;
+    /** Details of the tooltip to show. */
     tooltip?: Omit<TooltipProps, 'tabIndex'>;
 }
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/dist/Card/HorizontalCard/types.d.ts

@@ -28,13 +28,20 @@ export interface HorizontalCardTag {
     variant?: TagVariants;
 }
 export type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
-export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
+export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'description' | 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
+    /** 'Outline' or 'Elevated' style of container. */
     variant?: 'outline' | 'elevated';
+    /** Action that will be triggered when user clicks on card. */
     action?: () => void;
+    /** If disabled user will not be able to click on the card, also card will be greyed out. */
     disabled?: boolean;
-    title: string;
-    description?: string;
+    /** Title of the card */
+    title: string | React.ReactNode;
+    /** Description of the card */
+    description?: string | React.ReactNode;
+    /** Icon to be shown on the left side of the card. */
     icon?: React.ReactElement;
+    /** Properties of the image shown on the left side of the card. */
     image?: {
         src: string;
         fallbackSrc?: string;
@@ -43,7 +50,10 @@ export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes
         width?: string;
         loader?: boolean;
     };
+    /** Array of tags to be shown under the description. */
     tags?: HorizontalCardTag[];
+    /** Progress bar to be shown under the tags. */
     progress?: HorizontalCardLinearProgression;
+    /** Array of actions to be shown on the right side of the card. Can use IconButtons, DropdownButtons, CustomContent and Toggles */
     actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];
 }

package/dist/Card/VerticalCard/Card.d.ts

@@ -5,12 +5,19 @@ import { CardBottomSectionProps } from './CardBottomSection';
 export declare const CardTopLevelContainerStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardContainerStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
-    onCardClicked?: () => {};
+    /** Action to be executed when Card is clicked. */
+    onCardClicked?: () => void;
+    /** If disabled then users can not click on the card, also styles are greyed out.*/
     disabled?: boolean;
+    /** Maximum width of the card. */
     maxWidth?: number | string;
+    /** Properties of Card top section. */
     topSectionProps?: CardTopSectionProps;
+    /** Properties of Card middle section. */
     middleSectionProps?: CardMiddleSectionProps;
+    /** Properties of Card bottom section. */
     bottomSectionProps?: CardBottomSectionProps;
+    /** Card container style variant. */
     variant?: 'outline' | 'elevated';
 }
 declare const Card: React.FunctionComponent<CardProps>;

package/dist/Card/VerticalCard/CardBottomSection.d.ts

@@ -5,16 +5,27 @@ export interface ActionItem {
     onClick: () => void;
 }
 export interface CardBottomSectionProps {
+    /** Optional. Current progress level shown in the progress bar. */
     progressLevel?: number;
+    /** Optional. Maximum level of progress in the progress bar. */
     progressMax?: number;
+    /** Optional. Type of the progress bar. */
     progressType?: LinearProgressType;
+    /** Optional. Note text shown on the left side of the section. */
     noteLeft?: string;
+    /** Optional. Note icon shown on the left side of the section. */
     noteLeftIcon?: React.ReactNode;
+    /** Optional. Note text shown on the right side of the section. */
     noteRight?: string;
+    /** Optional. Note icon shown on the right side of the section. */
     noteRightIcon?: React.ReactNode;
+    /** Author name shown at the bottom-left part of the section.  */
     authorName?: string;
+    /** Array of actions shown on the bottom-right corner of the section. */
     actions?: ActionItem[];
+    /** Logo shown on the right side of the section, in front of AuthorName. */
     logo?: React.ReactNode;
+    /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
     disabled?: boolean;
 }
 export declare const CardBottomSectionProgressStyles: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Card/VerticalCard/CardMiddleSection.d.ts

@@ -2,13 +2,21 @@ import * as React from 'react';
 import { TagVariants } from '../../index';
 import { ReactNode } from 'react';
 export interface CardMiddleSectionProps {
+    /** Color of the band to be shown on the top of middle section. */
     colorBandColor?: string;
+    /** Icon to be shown on the left side of the categoryLabel. */
     categoryIcon?: React.ReactNode;
+    /** Label to be shown at the top part of the middle section. */
     categoryLabel?: string;
+    /** Main title of the Card component. */
     title: string;
+    /** Description of the Card. */
     description?: string;
+    /** Tags to be shown under the description. */
     tags?: CardTag[];
+    /** Second row of tags if needed. */
     row2Tags?: CardTag[];
+    /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
     disabled?: boolean;
 }
 export interface CardTag {

package/dist/Card/VerticalCard/CardTopSection.d.ts

@@ -1,15 +1,25 @@
 import * as React from 'react';
 import { TagVariants } from '../../Tag';
 export interface CardTopSectionProps {
+    /** Sets initial state of select Checkbox. */
     selected?: boolean;
+    /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */
     setSelected?: (arg0: boolean) => void;
+    /** Label shown in the tag in the top-left corner of the Card. */
     tagLabel?: string;
+    /** Icon shown in the tag in the top-left corner of the Card. */
     tagIcon?: React.ReactNode;
+    /** Tag variant shown in the tag in the top-left corner of the Card. */
     tagVariant?: TagVariants;
+    /** Text shown in the Ribbon, under the Image.  */
     highlightRibbonText?: string;
+    /** Icon shown in the Ribbon, under the Image.  */
     highlightRibbonIcon?: React.ReactNode;
+    /** Content color (text and image) of the Ribbon, under the Image.  */
     highlightRibbonContentColor?: string;
+    /** Background color of the Ribbon, shown under the Image.  */
     highlightRibbonBgColor?: string;
+    /** Details of the Image shown in the section. */
     image?: {
         src: string;
         fallbackSrc?: string;
@@ -18,6 +28,7 @@ export interface CardTopSectionProps {
         width?: string;
         loader?: boolean;
     };
+    /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */
     disabled?: boolean;
 }
 export declare const CardTopSectionImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Chips/ChipTypes.d.ts

@@ -4,36 +4,70 @@ import React from 'react';
  * Types for the chips.
  */
 export interface ChipProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'tabIndex'> {
-    size?: Size;
+    /** Size of the chip. */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /** If chip is disabled then user can not interact with it and styles are greyed out. */
     disabled?: boolean;
 }
 export interface InputChipProps extends ChipProps {
+    /**
+     * Required. The text to be displayed on the input chip.
+     */
     text: string;
+    /**
+     * Optional. The variant of the input chip. Can be 'Default', 'Outlined', 'Filled', etc.
+     */
     variant?: ChipVariant;
+    /**
+     * Optional. The icon to be displayed on the input chip.
+     */
     icon?: React.ReactNode;
+    /**
+     * Optional. A boolean indicating whether the remove option is disabled on the input chip.
+     */
     disableRemove?: boolean;
+    /**
+     * Required. A function to be called when the input chip is removed.
+     * It should take an event object as a parameter.
+     */
     onRemove: (e: any) => void;
+    /**
+     * Optional. A function to be called when the input chip is clicked.
+     */
     onClick?: () => void;
 }
 export interface FilterChipProps extends ChipProps {
+    /** Text shown in the Chip. */
     text: string;
+    /** Current state of the Chip. */
     selected: boolean;
+    /** Executed when user clicks on the chip. */
     onClick?: () => void;
 }
 export interface ActionChipProps extends ChipProps {
+    /** Text shown in the Chip. */
     text: string;
+    /** Icon shown on the left side of the chip. */
     icon?: React.ReactNode;
+    /** Method to execute when user clicks on the Chip. */
     onClick?: () => void;
 }
 export interface ChoiceChipProps extends Testable {
+    /** Current selected value. */
     selected: string;
+    /** Array of chips with values and descriptions. */
     values: ChipValue[];
+    /** Method to execute when user clicks on one of the chips. */
     onClick?: (value: ChipValue) => void;
+    /** If disabled then user can not interact with all chips. */
     disabled?: boolean;
 }
 export interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {
+    /** Value of the chip. */
     value: string;
+    /** Label of the chip. */
     label: string;
+    /** Size of the chip. */
     size?: Size;
 }
 export type ChipVariant = States.Default | States.Invalid;

package/dist/ChipsInput/ChipDropdownInput.d.ts

@@ -7,14 +7,22 @@ interface ListItem extends ChipItem {
     secondaryLabel?: string;
     value: string;
 }
-interface ChipDropdownInputProps extends Omit<ChipInputProps, 'autoSave'> {
+export interface ChipDropdownInputProps extends Omit<ChipInputProps, 'autoSave'> {
+    /** Array of items available. */
     list: ListItem[] | string[];
+    /** On input selected/unselected. */
     onInputChange?: (input: string) => void;
+    /** Message to show in the dropdown if none of the chips fits user input. */
     messageOnNoResults?: string;
+    /** Message to show in the dropdown if none of the chips fits user input. */
     suggestion?: ListItem;
+    /** If flag is set then loader will be shown in the input field. */
     loading?: boolean;
+    /** Max number of chips that user can select. */
     maxSelectedItems?: number;
+    /** Disable sorting of options in the dropdown. */
     disableSorting?: boolean;
+    /** Disable filtering of options depending on user input in the dropdown. */
     disableFiltering?: boolean;
 }
 export declare const ChipDropdownInput: React.ForwardRefExoticComponent<ChipDropdownInputProps & React.RefAttributes<HTMLInputElement | undefined>>;

package/dist/ChipsInput/index.d.ts

@@ -1 +1,2 @@
 export * from './ChipDropdownInput';
+export * from './ChipInputField';