widenarrow-ui 2.1.2 → 2.2.0

package/lib/index.d.ts

@@ -452,10 +452,12 @@ declare const borderClassNames: ({ borderColor, border, borderTop, borderLeft, b
 
 interface BoxProps extends MarginInterface, PaddingInterface, BorderInterface, FlexStylingInterface {
     children?: react__default.ReactNode;
+    id?: string;
     className?: string;
     position?: string;
     backgroundColor?: Partial<ColorTypes>;
     showOnBreakpoint?: string;
+    /** @default false */
     withBorderRadius?: boolean;
     width?: string;
     minWidth?: string;
@@ -472,7 +474,9 @@ declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttribute
 interface ButtonProps {
     text?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** @default HierarchyTypes.PRIMARY */
     type?: Partial<HierarchyTypes>;
+    /** @default SizeTypes.MEDIUM */
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     sizeMd?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     sizeLg?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
@@ -480,17 +484,22 @@ interface ButtonProps {
     icon?: Partial<IconTypes>;
     iconColor?: Partial<ColorTypes>;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE | SizeTypes.AUTO;
+    /** @default false */
     withIconRight?: boolean;
     leftIcon?: Partial<IconTypes>;
     rightIcon?: Partial<IconTypes>;
+    /** @default false */
     disabled?: boolean;
     className?: string;
     style?: CSSProperties;
+    /** @default false */
     withEllipsis?: boolean;
     buttonRef?: RefObject<HTMLButtonElement>;
     rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
-    id?: string | number;
+    id?: string;
+    /** @default false */
     loading?: boolean;
+    /** @default false */
     autoFocus?: boolean;
     ariaLabel?: string;
     children?: ReactNode;
@@ -503,7 +512,7 @@ declare const Button: react.MemoExoticComponent<({ className, id, style, type, s
 
 interface CheckboxProps {
     label: string;
-    id?: string | number;
+    id?: string;
     value?: string;
     name?: string;
     onChange?: (val: string, event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => void;
@@ -514,28 +523,40 @@ interface CheckboxProps {
     ariaLabel?: string;
     inputRef?: RefObject<HTMLInputElement>;
     helperText?: string;
+    /** @default false */
     checked?: boolean;
+    /** @default false */
     blocked?: boolean;
+    /** @default false */
     autoFocus?: boolean;
+    /** @default false */
     withEllipsis?: boolean;
+    /** @default true */
     withLabel?: boolean;
+    /** @default false */
     indeterminate?: boolean;
+    /** @default false */
     disabled?: boolean;
+    /** @default false */
     isFake?: boolean;
 }
 
 declare const Checkbox: FC<CheckboxProps>;
 
 interface CardProps extends PaddingInterface, MarginInterface, FlexStylingInterface {
+    id?: string;
     onClickCallback?: () => void;
+    /** @default AspectRatioTypes.ar16_9 */
     imageAspectRatio?: Partial<AspectRatioTypes>;
     imageIcon?: Partial<IconTypes>;
     imageIconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE | SizeTypes.AUTO | undefined;
+    /** @default false */
     withEllipsis?: boolean;
     imageSrc?: string;
     imageAlt?: string;
     description?: string;
     wrapperElement?: 'div' | 'li' | 'section' | 'link';
+    /** @default false */
     withHoverEffect?: boolean;
     className?: string;
     title?: string;
@@ -548,21 +569,25 @@ interface CardProps extends PaddingInterface, MarginInterface, FlexStylingInterf
 }
 
 declare const Card: {
-    ({ className, onClickCallback, withHoverEffect, imageSrc, imageAlt, imageIcon, imageIconSize, imageAspectRatio, title, withEllipsis, description, children, topCustomComponent, imageCustomComponent, descriptionComponent, leftFooterComponent, rightFooterComponent, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingRight, paddingLeft, displayFlex, displayFlexCenter, displayFlexCenterSpaceBetween, alignSelf, justifyContent, flexDirection, flexGrow, flexWrap, alignItems }: CardProps): JSX.Element;
+    ({ id, className, onClickCallback, withHoverEffect, imageSrc, imageAlt, imageIcon, imageIconSize, imageAspectRatio, title, withEllipsis, description, children, topCustomComponent, imageCustomComponent, descriptionComponent, leftFooterComponent, rightFooterComponent, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingRight, paddingLeft, displayFlex, displayFlexCenter, displayFlexCenterSpaceBetween, alignSelf, justifyContent, flexDirection, flexGrow, flexWrap, alignItems }: CardProps): JSX.Element;
     displayName: string;
 };
 
 interface RadioButtonProps {
     className?: string;
     name?: string;
-    id?: string | number;
+    id?: string;
     label: string;
+    /** @default true */
     withLabel?: boolean;
     ariaLabel?: string;
     value?: string | number;
+    /** @default false */
     disabled?: boolean;
     helperText?: string;
+    /** @default false */
     withEllipsis?: boolean;
+    /** @default false */
     autoFocus?: boolean;
     checked: boolean;
     toolTip?: string;
@@ -578,29 +603,41 @@ declare const RadioButton: {
 };
 
 interface DropDownProps {
+    id?: string;
     children: ReactNode[] | ReactNode;
     buttonComponent?: ReactNode;
     triggerComponent?: ReactNode;
+    /** @default 'onClickCallback' */
     buttonCallbackName?: string;
     footerComponent?: ReactNode;
     title?: string;
     className?: string;
     dropDownClassName?: string;
     childrenClassName?: string;
+    /** @default true */
     withArrow?: boolean;
+    /** @default false */
     loading?: boolean;
+    /** @default true */
     childrenIsList?: boolean;
+    /** @default true */
     closeOnEscape?: boolean;
     isOpen?: boolean;
+    /** @default false */
     withVisibleOverflow?: boolean;
     rotateIconByDegree?: number;
     rotateLeftIconByDegree?: number;
     rotateMiddleIconByDegree?: number;
     rotateRightIconByDegree?: number;
+    /** @default false */
     withPortal?: boolean;
+    /** @default true */
     withShadow?: boolean;
+    /** @default 'auto' */
     placement?: Placement;
+    /** @default 'absolute' */
     strategy?: PositioningStrategy;
+    /** @default { horizontal: 8, vertical: 12 } */
     offset?: {
         horizontal: number;
         vertical: number;
@@ -615,14 +652,60 @@ interface DropDownRef {
 
 declare const DropDown: react.ForwardRefExoticComponent<DropDownProps & react.RefAttributes<DropDownRef>>;
 
+type TypographyFontWeight = '300' | '400' | '600' | '700';
+type TypographyFontSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
+type TypographyFontStyle = 'italic';
+type TypographyTextAlign = 'left' | 'center' | 'right';
+interface TypographyBaseProps extends ColorStyleInterface, MarginInterface, PaddingInterface {
+    id?: string;
+    className?: string;
+    textAlign?: TypographyTextAlign;
+    fontWeight?: TypographyFontWeight;
+    fontSize?: TypographyFontSize;
+    fontStyle?: TypographyFontStyle;
+    /** @default false */
+    meta?: boolean;
+    /** @default false */
+    withBorderBottom?: boolean;
+    /** @default false */
+    withEllipsis?: boolean;
+    /** @default false */
+    withNoWordBreak?: boolean;
+    /** @default false */
+    withWordBreak?: boolean;
+    /** @default false */
+    disabled?: boolean;
+}
+interface HeadingProps extends TypographyBaseProps {
+    children: ReactNode;
+    type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    style?: CSSProperties;
+}
+interface LabelProps extends TypographyBaseProps {
+    children: ReactNode | string;
+    htmlFor?: string;
+    style?: CSSProperties;
+}
+interface ParagraphProps extends TypographyBaseProps {
+    children: ReactNode;
+}
+interface SpanProps extends TypographyBaseProps {
+    children: ReactNode;
+}
+
 interface DropDownItemProps {
+    id?: string;
     text?: string;
     description?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** @default SizeTypes.MEDIUM */
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     active?: boolean;
+    /** @default false */
     withEllipsis?: boolean;
+    /** @default false */
     disabled?: boolean;
+    /** @default 'li' */
     wrapperElement?: 'div' | 'li';
     className?: string;
     leftIcon?: Partial<IconTypes>;
@@ -632,21 +715,24 @@ interface DropDownItemProps {
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     iconColor?: Partial<ColorTypes>;
     textColor?: Partial<ColorTypes>;
-    fontSize?: string;
-    textAlign?: string;
-    fontWeight?: string;
+    /** @default 'm' */
+    fontSize?: TypographyFontSize;
+    /** @default 'left' */
+    textAlign?: TypographyTextAlign;
+    fontWeight?: TypographyFontWeight;
     iconClassName?: string;
+    /** @default true */
     closeDropDownOnClick?: boolean;
     descriptionColor?: Partial<ColorTypes>;
-    descriptionTextAlign?: string;
-    descriptionFontSize?: string;
-    descriptionFontWeight?: string;
+    descriptionTextAlign?: TypographyTextAlign;
+    descriptionFontSize?: TypographyFontSize;
+    descriptionFontWeight?: TypographyFontWeight;
     descriptionClassName?: string;
     descriptionContainerClassName?: string;
 }
 
 declare const DropDownItem: {
-    ({ text, description, onClickCallback, size, textAlign, fontSize, fontWeight, descriptionClassName, descriptionContainerClassName, textColor, active, disabled, className, iconColor, leftIcon, rightIcon, rightComponent, children, iconSize, withEllipsis, iconClassName, wrapperElement, closeDropDownOnClick }: DropDownItemProps): JSX.Element;
+    ({ id, text, description, onClickCallback, size, textAlign, fontSize, fontWeight, descriptionClassName, descriptionContainerClassName, textColor, active, disabled, className, iconColor, leftIcon, rightIcon, rightComponent, children, iconSize, withEllipsis, iconClassName, wrapperElement, closeDropDownOnClick }: DropDownItemProps): JSX.Element;
     defaultProps: {
         closeDropDownOnClick: boolean;
     };
@@ -656,11 +742,14 @@ declare const DropDownItem: {
 interface FacetButtonProps {
     text?: string;
     component?: ReactNode;
-    id?: string | number;
+    id?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
     onRightClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** @default false */
     disabled?: boolean;
+    /** @default false */
     selected?: boolean;
+    /** @default false */
     blocked?: boolean;
     icon?: Partial<IconTypes>;
     rightIcon?: Partial<IconTypes>;
@@ -689,13 +778,20 @@ interface SearchResultInterface {
 }
 
 interface PaginationProps {
+    id?: string;
     pagination: SearchResultInterface;
     onChange: (searchResult: SearchResultInterface) => void;
+    /** @default false */
     slim?: boolean;
+    /** @default false */
     withPageSizeChange?: boolean;
+    /** @default false */
     withTablePagination?: boolean;
+    /** @default false */
     withFastForwardButtons?: boolean;
+    /** @default [10, 20, 30, 40, 50, 80, 100] */
     pageSizeOptions?: Array<number>;
+    /** @default HierarchyTypes.SECONDARY */
     buttonType?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
     className?: string;
     nextPageTitle?: string;
@@ -717,17 +813,20 @@ interface Block {
     col: number;
 }
 interface FormSkeletonProps {
+    id?: string;
     className?: string;
     blocks: Array<Block>;
+    /** @default ColorTypes.GREY_2 */
     color?: Partial<ColorTypes>;
 }
 
 declare const FormSkeleton: {
-    ({ className, blocks, color }: FormSkeletonProps): JSX.Element;
+    ({ id, className, blocks, color }: FormSkeletonProps): JSX.Element;
     displayName: string;
 };
 
 interface GridProps extends MarginInterface, PaddingInterface, FlexStylingInterface {
+    id?: string;
     /**
      * Number of columns on viewports < 576px
      */
@@ -752,12 +851,9 @@ interface GridProps extends MarginInterface, PaddingInterface, FlexStylingInterf
      * Number of columns on viewports < 2000px
      */
     xxl?: number;
-    /**
-     * Optionally provide the number of columns in the grid.
-     * @default 12
-     */
     /**
      * If the component is a grid container
+     * @default false
      */
     container?: boolean;
     /**
@@ -768,6 +864,10 @@ interface GridProps extends MarginInterface, PaddingInterface, FlexStylingInterf
      * @default '4'
      */
     spacing?: string | Array<string> | Record<never, string | string[]>;
+    /**
+     * Optionally provide the number of columns in the grid.
+     * @default 12
+     */
     columns?: number;
     className?: string;
     children?: ReactNode;
@@ -777,9 +877,18 @@ interface GridProps extends MarginInterface, PaddingInterface, FlexStylingInterf
 declare const Grid: FC<GridProps>;
 
 interface IconProps extends ColorStyleInterface, IconStyleInterface {
+    /** @default SizeTypes.MEDIUM */
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE | SizeTypes.AUTO | undefined;
+    /**
+     * Set to true to rotate the icon 180 deg
+     * @default false
+     */
     rotateIcon?: boolean | undefined;
     rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315 | undefined;
+    /**
+     * Set to true to set disabled state ($disabled color)
+     * @default false
+     */
     disabled?: boolean | undefined;
     className?: string | undefined;
     toolTip?: string | undefined;
@@ -793,19 +902,24 @@ declare const Icon: {
 interface IconButtonProps extends IconStyleInterface {
     className?: string;
     text?: string;
+    /** @default false */
     rotateIcon?: boolean;
-    id?: string | number;
+    id?: string;
     rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     iconClassName?: string;
+    /** @default HierarchyTypes.SECONDARY */
     type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY | HierarchyTypes.TERTIARY;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
     style?: CSSProperties;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** @default SizeTypes.MEDIUM */
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     iconColor?: Partial<ColorTypes>;
     href?: string;
+    /** @default false */
     disabled?: boolean;
     buttonRef?: RefObject<HTMLButtonElement>;
+    /** @default false */
     autoFocus?: boolean;
     tabIndex?: number;
     toolTip?: string;
@@ -826,26 +940,36 @@ interface IconInterface$1 {
 }
 interface InputProps {
     value: string | number;
+    /** @default 'off' */
     autoComplete?: string;
+    /** @default false */
     autoFocus?: boolean;
     className?: string;
     name?: string;
+    /** @default false */
     disabled?: boolean;
+    /** @default false */
     readOnly?: boolean;
     error?: string;
-    id?: string | number;
+    id?: string;
     iconClassName?: string;
     inputClassName?: string;
     label?: string;
     ariaLabel?: string;
+    /** @default false */
     required?: boolean;
+    /** @default true */
     withLabel?: boolean;
+    /** @default false */
     marginBottom?: boolean;
+    /** @default '' */
     placeholder?: string;
     inputRef?: RefObject<HTMLInputElement>;
+    /** @default SizeTypes.MEDIUM */
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     helperText?: string;
     characterLimit?: number;
+    /** @default 'text' */
     type?: 'text' | 'number' | 'password' | 'time' | 'email';
     iconRight?: IconInterface$1;
     iconLeft?: IconInterface$1;
@@ -862,6 +986,7 @@ declare const Input: {
 };
 
 interface ImageProps {
+    id?: string;
     src: string;
     alt?: string;
     className?: string;
@@ -869,6 +994,7 @@ interface ImageProps {
     customCellComponent?: ReactNode;
     aspectRatio?: Partial<AspectRatioTypes>;
     hoverOverlayColor?: Partial<ColorTypes>;
+    /** @default false */
     bgImage?: boolean;
     bgImageProps?: {
         size: 'cover' | 'contain';
@@ -876,17 +1002,19 @@ interface ImageProps {
     };
     placeHolderColor?: string;
     customComponent?: ReactNode;
+    /** @default false */
     withContainer?: boolean;
 }
 
 declare const Image: {
-    ({ src, alt, className, imageClassName, withContainer, placeHolderColor, hoverOverlayColor, bgImage, bgImageProps, aspectRatio, customComponent }: ImageProps): JSX.Element;
+    ({ id, src, alt, className, imageClassName, withContainer, placeHolderColor, hoverOverlayColor, bgImage, bgImageProps, aspectRatio, customComponent }: ImageProps): JSX.Element;
     displayName: string;
 };
 
 interface InlineButtonProps {
     text: string;
-    id?: string | number;
+    id?: string;
+    /** @default false */
     loading?: boolean;
     ariaLabel?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
@@ -894,25 +1022,36 @@ interface InlineButtonProps {
     children?: ReactNode;
     icon?: Partial<IconTypes>;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** @default false */
     rotateIcon?: boolean;
     rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     iconClassName?: string;
+    /** @default false */
     withIconRight?: boolean;
+    /** @default HierarchyTypes.PRIMARY */
     type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY | HierarchyTypes.TERTIARY;
+    /** @default SizeTypes.MEDIUM */
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM;
     sizeMd?: SizeTypes.SMALL | SizeTypes.MEDIUM;
     sizeLg?: SizeTypes.SMALL | SizeTypes.MEDIUM;
     sizeXl?: SizeTypes.SMALL | SizeTypes.MEDIUM;
     textClassName?: string;
+    /** @default false */
     withEllipsis?: boolean;
+    /** @default false */
     withoutHoverEffect?: boolean;
+    /** @default false */
     withPrimaryHoverEffect?: boolean;
+    /** @default false */
     withSecondaryHoverEffect?: boolean;
+    /** @default false */
     withTertiaryHoverEffect?: boolean;
+    /** @default false */
     disabled?: boolean | undefined;
     style?: CSSProperties;
     buttonRef?: RefObject<HTMLButtonElement>;
     tabIndex?: number;
+    /** @default false */
     autoFocus?: boolean;
     toolTip?: string;
     toolTipComponent?: ReactNode;
@@ -937,10 +1076,13 @@ interface TextAreaInputProps {
     onBlur?: () => void;
     iconRight?: IconInterface;
     iconLeft?: IconInterface;
+    /** @default 5 */
     rows?: number;
+    /** @default '' */
     placeholder?: string;
-    id?: number | string;
+    id?: string;
     label?: string;
+    /** @default true */
     withLabel?: boolean;
     name?: string;
     ariaLabel?: string;
@@ -949,11 +1091,15 @@ interface TextAreaInputProps {
     inputClassName?: string;
     iconClassName?: string;
     className?: string;
+    /** @default false */
     disabled?: boolean;
+    /** @default false */
     marginBottom?: boolean;
+    /** @default false */
     autoFocus?: boolean;
     inputRef?: RefObject<HTMLTextAreaElement>;
     style?: CSSProperties;
+    /** @default false */
     readonly?: boolean;
 }
 
@@ -963,18 +1109,26 @@ declare const TextAreaInput: {
 };
 
 interface ListItemProps extends MarginInterface, PaddingInterface {
+    id?: string;
     buttonsComponent?: ReactNode;
     contentComponent?: ReactNode;
     className?: string;
     imageSrc?: string;
+    /** @default true */
     withBorderRadius?: boolean;
+    /** @default false */
     withHoverEffect?: boolean;
+    /** @default true */
     withEllipsis?: boolean;
     imageIcon?: Partial<IconTypes>;
+    /** @default SizeTypes.MEDIUM */
     size: Partial<SizeTypes>;
+    /** @default AspectRatioTypes.ar1_1 */
     imageAspectRatio?: Partial<AspectRatioTypes>;
     borderColor?: Partial<ColorTypes>;
+    /** @default ColorTypes.WHITE */
     backgroundColor?: Partial<ColorTypes>;
+    /** @default 'li' */
     wrapperElement?: 'div' | 'li' | 'section' | 'link';
     border?: '1' | '2' | '3';
     borderTop?: '1' | '2' | '3';
@@ -987,34 +1141,45 @@ interface ListItemProps extends MarginInterface, PaddingInterface {
 }
 
 declare const ListItem: {
-    ({ wrapperElement, backgroundColor, size, padding, imageAspectRatio, withBorderRadius, withEllipsis, withHoverEffect, onClickCallback, linkTo, borderColor, border, title, imageContainerClassName, imageIcon, imageSrc, description, borderTop, borderBottom, marginBottom, paddingX, paddingY, paddingTop, paddingBottom, paddingRight, paddingLeft, className, buttonsComponent, contentComponent }: ListItemProps): JSX.Element;
+    ({ id, wrapperElement, backgroundColor, size, padding, imageAspectRatio, withBorderRadius, withEllipsis, withHoverEffect, onClickCallback, linkTo, borderColor, border, title, imageContainerClassName, imageIcon, imageSrc, description, borderTop, borderBottom, marginBottom, paddingX, paddingY, paddingTop, paddingBottom, paddingRight, paddingLeft, className, buttonsComponent, contentComponent }: ListItemProps): JSX.Element;
     displayName: string;
 };
 
 interface ListSkeletonProps extends MarginInterface, PaddingInterface {
+    id?: string;
     items: number;
+    /** @default '60px' */
     itemHeight?: string;
     className?: string;
     itemClassName?: string;
+    /** @default false */
     withBorderRadius?: boolean;
+    /** @default false */
     withContent?: boolean;
+    /** @default false */
     withImage?: boolean;
+    /** @default false */
     withImageRadius?: boolean;
+    /** @default false */
     withLoadingAnimation?: boolean;
+    /** @default 2 */
     itemContentRows?: number;
+    /** @default ColorTypes.WHITE */
     backgroundColor?: Partial<ColorTypes>;
     borderColor?: Partial<ColorTypes>;
+    /** @default ColorTypes.GREY_1 */
     imageColor?: Partial<ColorTypes>;
     border?: '1' | '2' | '3';
     borderTop?: '1' | '2' | '3';
     borderBottom?: '1' | '2' | '3';
     borderRight?: '1' | '2' | '3';
     borderLeft?: '1' | '2' | '3';
+    /** @default ColorTypes.GREY_1 */
     contentColor?: Partial<ColorTypes>;
 }
 
 declare const ListSkeleton: {
-    ({ items, className, itemClassName, backgroundColor, contentColor, imageColor, withImage, withImageRadius, withLoadingAnimation, itemContentRows, itemHeight, marginBottom, padding, borderColor, border, borderTop, borderLeft, borderBottom, borderRight, withBorderRadius }: ListSkeletonProps): JSX.Element;
+    ({ id, items, className, itemClassName, backgroundColor, contentColor, imageColor, withImage, withImageRadius, withLoadingAnimation, itemContentRows, itemHeight, marginBottom, padding, borderColor, border, borderTop, borderLeft, borderBottom, borderRight, withBorderRadius }: ListSkeletonProps): JSX.Element;
     displayName: string;
 };
 
@@ -1022,7 +1187,9 @@ interface MultiActionButtonProps {
     text?: string;
     onLeftClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
     onRightClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** @default HierarchyTypes.PRIMARY */
     type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY | HierarchyTypes.TERTIARY | HierarchyTypes.QUATERNARY;
+    /** @default SizeTypes.MEDIUM */
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     sizeMd?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     sizeLg?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
@@ -1034,16 +1201,21 @@ interface MultiActionButtonProps {
     rotateLeftIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     rotateMiddleIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     rotateRightIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
+    /** @default false */
     disabled?: boolean;
     className?: string;
     innerClassName?: string;
     iconClassName?: string;
     toolTip?: string;
     toolTipComponent?: ReactNode;
-    id?: string | number;
+    id?: string;
+    /** @default false */
     loading?: boolean;
+    /** @default false */
     withEllipsis?: boolean;
+    /** @default 'left' */
     textPosition?: 'center' | 'left' | 'right';
+    /** @default false */
     autoFocus?: boolean;
     leftAriaLabel?: string;
     rightAriaLabel?: string;
@@ -1056,29 +1228,38 @@ declare const MultiActionButton: {
 };
 
 interface SeparatorProps extends MarginInterface, PaddingInterface {
+    id?: string;
     className?: string;
+    /** @default ColorTypes.GREY_3 */
     color?: Partial<ColorTypes>;
+    /** @default 'vertical' */
     orientation?: 'vertical' | 'horizontal';
+    /** @default SizeTypes.MEDIUM */
     size?: SizeTypes.AUTO | SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
 }
 
 declare const Separator: {
-    ({ className, margin, marginY, marginBottom, marginTop, marginLeft, marginRight, marginX, padding, paddingY, paddingRight, paddingTop, paddingBottom, paddingLeft, paddingX, orientation, size, color }: SeparatorProps): JSX.Element;
+    ({ id, className, margin, marginY, marginBottom, marginTop, marginLeft, marginRight, marginX, padding, paddingY, paddingRight, paddingTop, paddingBottom, paddingLeft, paddingX, orientation, size, color }: SeparatorProps): JSX.Element;
     displayName: string;
 };
 
 interface SolidSpinnerProps {
+    id?: string;
+    /** @default HierarchyTypes.PRIMARY */
     type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY | HierarchyTypes.TERTIARY | HierarchyTypes.QUATERNARY;
+    /** @default SizeTypes.MEDIUM */
     size?: SizeTypes.EXTRA_SMALL | SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** @default false */
     disabled?: boolean;
     className?: string;
     label?: string;
     labelClassName?: string;
+    /** @default false */
     absoluteCenter?: boolean;
 }
 
 declare const SolidSpinner: {
-    ({ className, disabled, type, size, label, labelClassName, absoluteCenter }: SolidSpinnerProps): JSX.Element;
+    ({ id, className, disabled, type, size, label, labelClassName, absoluteCenter }: SolidSpinnerProps): JSX.Element;
     displayName: string;
 };
 
@@ -1097,6 +1278,7 @@ interface CellInterface {
     customCellComponent?: (row: any) => ReactNode | JSX.Element;
 }
 interface SortableTableProps {
+    id?: string;
     cells: Array<{
         key: string;
         title: string;
@@ -1122,9 +1304,13 @@ interface SortableTableProps {
     bodyClassName?: string;
     spinnerClassName?: string;
     caption?: string;
+    /** @default false */
     loading?: boolean;
+    /** @default 6 */
     skeletonRows?: number;
+    /** @default false */
     withStickyHeader?: boolean;
+    /** @default false */
     withIntersectionObserver?: boolean;
     minWidth?: string;
     onSortCallback?: (keyName: string, ascending: boolean) => void;
@@ -1137,23 +1323,30 @@ interface SortableTableProps {
 }
 
 declare const SortableTable: {
-    ({ cells, data, sortBy, skeletonRows, loading, caption, className, headerClassName, rowClassName, bodyClassName, spinnerClassName, withStickyHeader, withIntersectionObserver, noDataMessage, minWidth, onSortCallback }: SortableTableProps): JSX.Element;
+    ({ id, cells, data, sortBy, skeletonRows, loading, caption, className, headerClassName, rowClassName, bodyClassName, spinnerClassName, withStickyHeader, withIntersectionObserver, noDataMessage, minWidth, onSortCallback }: SortableTableProps): JSX.Element;
     displayName: string;
 };
 
 interface SwitchButtonProps {
     checked: boolean;
-    id?: string | number;
+    id?: string;
     label?: string;
     name?: string;
+    /** @default false */
     withLabel?: boolean;
+    /** @default false */
     withInlineLabel?: boolean;
+    /** @default false */
     withEllipsis?: boolean;
     ariaLabel?: string;
+    /** @default false */
     disabled?: boolean;
+    /** @default false */
     autoFocus?: boolean;
+    /** @default false */
     alignCenter?: boolean;
     className?: string;
+    /** @default false */
     marginBottom?: boolean;
     buttonRef?: RefObject<HTMLInputElement>;
     onClickCallback: () => void;
@@ -1173,21 +1366,27 @@ interface OptionItem {
 }
 interface SelectInputProps {
     inputRef?: RefObject<HTMLSelectElement>;
-    id?: string | number;
+    id?: string;
     className?: string;
     inputClassName?: string;
     defaultOption?: string;
+    /** @default SizeTypes.MEDIUM */
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     sizeMd?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     sizeLg?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     sizeXl?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** @default false */
     disabled?: boolean;
+    /** @default true */
     withLabel?: boolean;
     error?: string;
     helperText?: string;
     text?: string;
+    /** @default false */
     marginBottom?: boolean;
+    /** @default false */
     autoFocus?: boolean;
+    /** @default false */
     loading?: boolean;
     ariaLabel?: string;
     label?: string;
@@ -1195,6 +1394,7 @@ interface SelectInputProps {
     onChange: (value: string | number) => void;
     options: Array<OptionItem>;
     value: string | number;
+    /** @default true */
     nativeHtmlComponent?: boolean;
 }
 
@@ -1230,38 +1430,8 @@ declare const ToolTip: {
     displayName: string;
 };
 
-interface TypographyBaseProps extends ColorStyleInterface, MarginInterface, PaddingInterface {
-    className?: string;
-    textAlign?: string;
-    fontWeight?: string;
-    fontSize?: string;
-    fontStyle?: string;
-    meta?: boolean;
-    withBorderBottom?: boolean;
-    withEllipsis?: boolean;
-    withNoWordBreak?: boolean;
-    withWordBreak?: boolean;
-    disabled?: boolean;
-}
-interface HeadingProps extends TypographyBaseProps {
-    children: ReactNode;
-    type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    style?: CSSProperties;
-}
-interface LabelProps extends TypographyBaseProps {
-    children: ReactNode | string;
-    htmlFor?: string;
-    style?: CSSProperties;
-}
-interface ParagraphProps extends TypographyBaseProps {
-    children: ReactNode;
-}
-interface SpanProps extends TypographyBaseProps {
-    children: ReactNode;
-}
-
 declare const Heading: {
-    ({ children, type, style, ...props }: HeadingProps): JSX.Element;
+    ({ children, type, style, id, ...props }: HeadingProps): JSX.Element;
     displayName: string;
     defaultProps: {
         marginTop: string;
@@ -1270,52 +1440,62 @@ declare const Heading: {
     };
 };
 declare const Label: {
-    ({ children, htmlFor, style, ...props }: LabelProps): JSX.Element;
+    ({ children, htmlFor, style, id, ...props }: LabelProps): JSX.Element;
     displayName: string;
     defaultProps: {
         marginBottom: string;
     };
 };
 declare const Paragraph: {
-    ({ children, ...props }: ParagraphProps): JSX.Element;
+    ({ children, id, ...props }: ParagraphProps): JSX.Element;
     displayName: string;
 };
 declare const Span: {
-    ({ children, ...props }: SpanProps): JSX.Element;
+    ({ children, id, ...props }: SpanProps): JSX.Element;
     displayName: string;
 };
 
 interface SkeletonItemProps extends MarginInterface, PaddingInterface {
+    id?: string;
     className?: string;
+    /** @default true */
     withBorderRadius?: boolean;
+    /** @default 'div' */
     wrapperElement?: 'div' | 'li';
     height: string;
     width: string;
     contentRows?: number;
+    /** @default ColorTypes.WHITE */
     backgroundColor?: Partial<ColorTypes>;
     borderColor?: Partial<ColorTypes>;
     imageColor?: Partial<ColorTypes>;
+    /** @default ColorTypes.GREY_1 */
     contentColor?: Partial<ColorTypes>;
     border?: '1' | '2' | '3';
     borderTop?: '1' | '2' | '3';
     borderBottom?: '1' | '2' | '3';
     borderRight?: '1' | '2' | '3';
     borderLeft?: '1' | '2' | '3';
+    /** @default false */
     withImage?: boolean;
+    /** @default false */
     withImageRadius?: boolean;
+    /** @default false */
     withLoadingAnimation?: boolean;
 }
 
 declare const SkeletonItem: {
-    ({ className, margin, marginY, marginTop, marginLeft, marginBottom, marginRight, marginX, paddingY, paddingBottom, paddingTop, paddingRight, paddingLeft, paddingX, height, width, contentRows, withImage, withImageRadius, withLoadingAnimation, imageColor, borderColor, border, borderTop, borderLeft, borderBottom, borderRight, contentColor, wrapperElement, padding, backgroundColor, withBorderRadius }: SkeletonItemProps): JSX.Element;
+    ({ id, className, margin, marginY, marginTop, marginLeft, marginBottom, marginRight, marginX, paddingY, paddingBottom, paddingTop, paddingRight, paddingLeft, paddingX, height, width, contentRows, withImage, withImageRadius, withLoadingAnimation, imageColor, borderColor, border, borderTop, borderLeft, borderBottom, borderRight, contentColor, wrapperElement, padding, backgroundColor, withBorderRadius }: SkeletonItemProps): JSX.Element;
     displayName: string;
 };
 
 interface NoDataMessageProps {
+    id?: string;
     className?: string;
     icon?: Partial<IconTypes>;
     title?: string;
     message?: string;
+    /** @default false */
     absoluteCenter?: boolean;
     customLink?: ReactNode;
     button?: {
@@ -1326,7 +1506,7 @@ interface NoDataMessageProps {
 }
 
 declare const NoDataMessage: {
-    ({ icon, title, message, className, absoluteCenter, customLink, button }: NoDataMessageProps): JSX.Element;
+    ({ id, icon, title, message, className, absoluteCenter, customLink, button }: NoDataMessageProps): JSX.Element;
     displayName: string;
 };