widenarrow-ui 2.1.3 → 2.3.0

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { CSSProperties, MouseEvent, RefObject, ReactNode, ChangeEvent, KeyboardEvent, FocusEvent, FC } from 'react';
+import react__default, { CSSProperties, MouseEvent, RefObject, ReactNode, ChangeEvent, KeyboardEvent, FocusEvent, FC, AriaAttributes } from 'react';
 import { Placement, PositioningStrategy } from '@popperjs/core';
 
 declare enum IconTypes {
@@ -66,7 +66,6 @@ declare enum IconTypes {
     CROSS = "iconCross",
     CROSS_CIRCLE_200 = "iconCrossCircle200",
     CROSS_CIRCLE_300 = "iconCrossCircle300",
-    DOCUMENT = "iconDocument",
     DASHBOARD_200 = "iconDashboard200",
     DASHBOARD_300 = "iconDashboard300",
     DASHBOARD_FILLED = "iconDashboardFilled",
@@ -281,6 +280,15 @@ declare enum HierarchyTypes {
     TERTIARY = "tertiary",
     QUATERNARY = "quaternary"
 }
+declare enum LinkTypes {
+    PRIMARY = "colorPrimary",
+    SECONDARY = "colorSecondary",
+    WHITE = "colorWhite"
+}
+declare enum TableTypes {
+    RULED = "ruled",
+    CARDS = "cards"
+}
 declare enum AspectRatioTypes {
     ar4_1 = "ar4_1",// 25 %
     ar3_1 = "ar3_1",// 33 %
@@ -453,10 +461,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;
@@ -473,7 +483,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;
@@ -481,30 +493,41 @@ 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;
+    /** ARIA role for the rendered button, when it stands for something other than a plain button. */
+    role?: string;
+    /** Selected state, for roles that carry one such as 'tab'. */
+    ariaSelected?: boolean;
+    /** Id of the element this button controls, for roles such as 'tab' that own a panel. */
+    ariaControls?: string;
     children?: ReactNode;
     toolTip?: string;
     toolTipComponent?: ReactNode;
     tabIndex?: number;
 }
 
-declare const Button: react.MemoExoticComponent<({ className, id, style, type, size, sizeMd, sizeLg, sizeXl, text, toolTip, toolTipComponent, icon, buttonRef, iconSize, iconColor, leftIcon, rightIcon, withIconRight, rotateIconByDegree, withEllipsis, onClickCallback, loading, disabled, children, autoFocus, ariaLabel, tabIndex }: ButtonProps) => JSX.Element>;
+declare const Button: react.MemoExoticComponent<({ className, id, style, type, size, sizeMd, sizeLg, sizeXl, text, toolTip, toolTipComponent, icon, buttonRef, iconSize, iconColor, leftIcon, rightIcon, withIconRight, rotateIconByDegree, withEllipsis, onClickCallback, loading, disabled, children, autoFocus, ariaLabel, role, ariaSelected, ariaControls, tabIndex }: ButtonProps) => JSX.Element>;
 
 interface CheckboxProps {
     label: string;
-    id?: string | number;
+    id?: string;
     value?: string;
     name?: string;
     onChange?: (val: string, event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => void;
@@ -515,28 +538,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;
@@ -549,21 +584,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;
@@ -579,29 +618,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;
@@ -616,14 +667,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>;
@@ -633,21 +730,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;
     };
@@ -657,11 +757,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>;
@@ -690,13 +793,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;
@@ -718,17 +828,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
      */
@@ -753,12 +866,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;
     /**
@@ -769,6 +879,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;
@@ -778,9 +892,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;
@@ -794,19 +917,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;
@@ -827,26 +955,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;
@@ -863,6 +1001,7 @@ declare const Input: {
 };
 
 interface ImageProps {
+    id?: string;
     src: string;
     alt?: string;
     className?: string;
@@ -870,6 +1009,7 @@ interface ImageProps {
     customCellComponent?: ReactNode;
     aspectRatio?: Partial<AspectRatioTypes>;
     hoverOverlayColor?: Partial<ColorTypes>;
+    /** @default false */
     bgImage?: boolean;
     bgImageProps?: {
         size: 'cover' | 'contain';
@@ -877,17 +1017,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;
@@ -895,25 +1037,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;
@@ -921,6 +1074,51 @@ interface InlineButtonProps {
 
 declare const InlineButton: react.MemoExoticComponent<({ className, id, loading, ariaLabel, text, buttonRef, style, size, sizeMd, sizeLg, sizeXl, type, textClassName, children, icon, withIconRight, withoutHoverEffect, withPrimaryHoverEffect, withSecondaryHoverEffect, withTertiaryHoverEffect, iconSize, autoFocus, iconClassName, tabIndex, rotateIcon, rotateIconByDegree, onClickCallback, withEllipsis, disabled, toolTip, toolTipComponent }: InlineButtonProps) => JSX.Element>;
 
+interface LinkProps {
+    href?: string;
+    /** Renders a react-router Link instead of an anchor. Requires a surrounding Router. */
+    to?: string;
+    text?: string;
+    icon?: Partial<IconTypes>;
+    /** @default ColorTypes.CURRENT */
+    iconColor?: Partial<ColorTypes>;
+    /** @default '_blank' */
+    target?: '_blank' | '_self';
+    children?: ReactNode;
+    onClickCallback?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** The link leads to a site outside the domain */
+    external?: boolean;
+    /** @default LinkTypes.SECONDARY */
+    color?: LinkTypes.SECONDARY | LinkTypes.PRIMARY | LinkTypes.WHITE;
+    /** @default '600' */
+    fontWeight?: '300' | '400' | '600' | '700';
+    /** @default 'm' */
+    fontSize?: 's' | 'm' | 'l';
+    className?: string;
+    iconClassName?: string;
+    /** Applied to the element wrapping the link's text, for callers that need to style the label itself. */
+    textClassName?: string;
+    ariaLabel?: string;
+    /**
+     * Marks this link as the one matching the current view, e.g. 'page' for the open item in a
+     * navigation list. Set it yourself rather than relying on route matching, so callers that decide
+     * "current" their own way stay authoritative.
+     */
+    ariaCurrent?: AriaAttributes['aria-current'];
+    /** @default false */
+    disabled?: boolean;
+    /** @default true */
+    withIconRight?: boolean;
+    /** @default false */
+    displayAsButton?: boolean;
+    /** @default false */
+    withEllipsis?: boolean;
+    /** @default false */
+    withWordBreak?: boolean;
+}
+
+declare const Link: FC<LinkProps>;
+
 interface IconInterface {
     loading?: boolean;
     disabled?: boolean;
@@ -938,10 +1136,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;
@@ -950,11 +1151,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,19 +1168,86 @@ declare const TextAreaInput: {
     displayName: string;
 };
 
+interface ListButtonProps {
+    /** Label of the row. Fades out under a gradient when it is too long to fit. */
+    text: string;
+    /**
+     * Renders the row as a react-router link rather than a button, so that middle click and
+     * open-in-new-tab keep working. Requires a surrounding Router.
+     */
+    to?: string;
+    /** Applied to the row, for spacing and for restyling the row itself. */
+    className?: string;
+    /** Applied to the clickable area holding the icon and the label. */
+    buttonClassName?: string;
+    /**
+     * Applied to the label. A caller that gives the row its own background needs this to match the
+     * fadeout to it, since the gradient has to end in the colour behind the text.
+     */
+    labelClassName?: string;
+    iconClassName?: string;
+    icon?: Partial<IconTypes>;
+    /** Shown at the end of the row at all times, for badges, spinners or status dots. */
+    rightComponent?: ReactNode;
+    /**
+     * Shown at the end of the row on hover and on keyboard focus. Replaces `rightComponent` while
+     * visible; neither reserves space while hidden, so the label keeps the full width until then.
+     */
+    hoverComponent?: ReactNode;
+    /** Renders the row in its selected colours. */
+    selected?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** @default SizeTypes.SMALL */
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM;
+    id?: string;
+    /** Use when `text` alone does not describe the action. */
+    ariaLabel?: string;
+    /** Button variant only. */
+    toolTip?: string;
+    /** Button variant only. */
+    tabIndex?: number;
+    /** Button variant only. @default false */
+    autoFocus?: boolean;
+    /** Button variant only. */
+    buttonRef?: RefObject<HTMLButtonElement>;
+    onClickCallback?: () => void;
+}
+
+/**
+ * A full width row that reads as a single button: an optional icon, a label that fades out rather
+ * than ellipsises when it overflows, and an end slot whose contents swap on hover.
+ *
+ * The row and the clickable area are separate elements so that `rightComponent` and `hoverComponent`
+ * can hold their own buttons without nesting them inside this one. Without `to` the clickable area
+ * is an InlineButton and its props carry through; with `to` it is a link.
+ */
+declare const ListButton: {
+    ({ text, to, className, buttonClassName, labelClassName, iconClassName, icon, rightComponent, hoverComponent, selected, disabled, size, id, ariaLabel, toolTip, tabIndex, autoFocus, buttonRef, onClickCallback }: ListButtonProps): JSX.Element;
+    displayName: string;
+};
+
 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';
@@ -988,34 +1260,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;
 };
 
@@ -1023,7 +1306,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;
@@ -1035,16 +1320,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;
@@ -1057,79 +1347,113 @@ 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;
 };
 
-interface CellInterface {
+interface SortableTableCellInterface {
+    /** Key on each `data` row whose value fills this column. Also the key handed to `onSortCallback` and matched against `sortBy`. */
     key: string;
+    /** Visible column heading. */
     title: string;
+    /** Column width, as a percentage (`'25%'`) or a fixed value (`'120px'`). Applied inline to both the header and body cells. */
     width: string;
-    icon?: Partial<IconTypes>;
+    /** Renders the heading as static text with no sort button. @default false */
     disableSort?: boolean;
+    /** Right-aligns the cell contents, and moves the sort chevron to the left of the heading. @default false */
     alignRight?: boolean;
+    /** Centres the cell contents. @default false */
     alignCenter?: boolean;
+    /** Truncates overflowing cell content with an ellipsis instead of wrapping. @default false */
     withEllipsis?: boolean;
+    /** Tooltip on the heading. Falls back to `title` when omitted. */
     toolTip?: string;
+    /** Applied to the content span inside every body cell of this column, not to the cell itself. */
     className?: string;
-    customHeaderCellComponent?: (cell: CellInterface) => ReactNode | JSX.Element;
+    /** Replaces the whole heading, including the sort button. Receives the cell config. */
+    customHeaderCellComponent?: (cell: SortableTableCellInterface) => ReactNode | JSX.Element;
+    /** Replaces the cell value. Receives the whole row, so it can read keys other than `key`. */
     customCellComponent?: (row: any) => ReactNode | JSX.Element;
 }
 interface SortableTableProps {
-    cells: Array<{
-        key: string;
-        title: string;
-        width: string;
-        icon?: Partial<IconTypes>;
-        disableSort?: boolean;
-        alignRight?: boolean;
-        alignCenter?: boolean;
-        withEllipsis?: boolean;
-        toolTip?: string;
-        className?: string;
-        customHeaderCellComponent?: (cell: CellInterface) => ReactNode | JSX.Element;
-        customCellComponent?: (row: any) => ReactNode | JSX.Element;
-    }>;
+    /** Applied to the outer container element. */
+    id?: string;
+    /**
+     * Visual treatment. `RULED` separates rows with a hairline. `CARDS` gives each row a white
+     * background, rounded corners and a gap, which only reads as separate rows against a tinted
+     * page — put it on `$application-background`, not inside a white card.
+     * @default TableTypes.RULED
+     */
+    type?: TableTypes.RULED | TableTypes.CARDS;
+    /** Column configuration, in render order. */
+    cells: Array<SortableTableCellInterface>;
+    /** Row objects. Each is passed to `customCellComponent`, and indexed by `cell.key` otherwise. */
     data: Array<any>;
+    /**
+     * Active sort. Without `onSortCallback` the table sorts `data` itself and treats this as the initial
+     * state only; with `onSortCallback` the table is controlled and this must reflect the current sort.
+     * @default [{ keyName: 'name', ascending: true }]
+     */
     sortBy: Array<{
         keyName: string;
         ascending: boolean;
     }>;
+    /** Applied to the outer container element. */
     className?: string;
+    /** Applied to every body row. */
     rowClassName?: string;
+    /** Applied to the header row. */
     headerClassName?: string;
+    /** Applied to the `tbody`. */
     bodyClassName?: string;
+    /** Applied to the loading spinner. */
     spinnerClassName?: string;
+    /** Accessible table description. Visually hidden, so it is for screen readers only. */
     caption?: string;
+    /** Replaces rows with skeleton placeholders and shows a spinner. Sorting is disabled while true. @default false */
     loading?: boolean;
+    /** Number of skeleton rows to render while `loading`. @default 6 */
     skeletonRows?: number;
+    /** Pins the header to the top of the nearest scroll container. @default false */
     withStickyHeader?: boolean;
+    /** Defers rendering each row until it scrolls into view. For long lists. @default false */
     withIntersectionObserver?: boolean;
+    /** Minimum table width, e.g. `'900px'`. Makes the container scroll horizontally below it. */
     minWidth?: string;
+    /** Takes over sorting. When given, the table stops sorting `data` and becomes controlled by `sortBy`. */
     onSortCallback?: (keyName: string, ascending: boolean) => void;
-    pagination?: SearchResultInterface;
+    /** Shown in place of the rows when `data` is empty and `loading` is false. */
     noDataMessage?: {
         title?: string;
         icon?: Partial<IconTypes>;
@@ -1138,23 +1462,110 @@ 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, type }: SortableTableProps): JSX.Element;
     displayName: string;
 };
 
+interface TableAction {
+    icon: Partial<IconTypes>;
+    /** Tooltip, and the accessible name of the button. Required, because the button has no visible text. */
+    toolTip: string;
+    onClickCallback: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** @default false */
+    disabled?: boolean;
+    id?: string;
+}
+interface TableActionsCellProps {
+    /** Buttons to render, in order. */
+    actions: Array<TableAction>;
+    /** Size of every button in the group. @default SizeTypes.SMALL */
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** Text shown before the buttons. For bulk headers, e.g. "3 selected". */
+    label?: string;
+    className?: string;
+}
+
+declare const TableActionsCell: FC<TableActionsCellProps>;
+
+interface TableSelectionCellProps {
+    /** Whether this row is selected. */
+    checked: boolean;
+    /** Fired with the next selected state. */
+    onChangeCallback: (checked: boolean) => void;
+    /** Accessible name for the checkbox, e.g. `Select ${row.name}`. Never rendered visibly. */
+    label: string;
+    /** @default false */
+    disabled?: boolean;
+    className?: string;
+}
+
+declare const TableSelectionCell: FC<TableSelectionCellProps>;
+
+interface TableSelectionHeaderCellProps {
+    /** How many rows are currently selected. Drives both the checked and indeterminate states. */
+    selectedCount: number;
+    /** How many rows are selectable in total. Usually the full result count, not just the loaded page. */
+    totalCount: number;
+    /** Fired with the next selected state: true to select every row, false to clear the selection. */
+    onChangeCallback: (selectAll: boolean) => void;
+    /** Accessible name for the checkbox. Never rendered visibly. */
+    label: string;
+    /**
+     * Bulk actions revealed once at least one row is selected. Supply already-translated tooltips.
+     * Omit to keep the header as a plain select-all checkbox.
+     */
+    actions?: Array<TableAction>;
+    /** Text beside the bulk actions, e.g. `${selectedCount} selected`. Only shown when `actions` are present. */
+    selectedLabel?: string;
+    /** @default false */
+    disabled?: boolean;
+    className?: string;
+}
+
+declare const TableSelectionHeaderCell: FC<TableSelectionHeaderCellProps>;
+
+interface TableTextCellProps {
+    /** Primary value. */
+    text: string | number;
+    /** Second line below `text`, rendered smaller and muted. For the common "name over email" cell. */
+    secondaryText?: string | number;
+    /** Colour of the primary line. Use for status values such as an inactive row. */
+    color?: Partial<ColorTypes>;
+    /** Weight of the primary line. @default '400' */
+    fontWeight?: TypographyFontWeight;
+    /**
+     * Truncates both lines with an ellipsis. A tooltip carrying the full text is added automatically,
+     * so truncated values stay readable.
+     * @default false
+     */
+    withEllipsis?: boolean;
+    /** Overrides the tooltip that `withEllipsis` derives from `text`. Set on its own to add a tooltip without truncating. */
+    toolTip?: string;
+    className?: string;
+}
+
+declare const TableTextCell: FC<TableTextCellProps>;
+
 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;
@@ -1167,6 +1578,115 @@ declare const SwitchButton: {
     displayName: string;
 };
 
+/**
+ * Identifies a tab within its group. Numbers and strings are both supported so a group can be driven
+ * by an index, an id or a route segment.
+ */
+type TabValue = string | number;
+interface TabProps {
+    /**
+     * Identifies the tab. Defaults to the tab's position within its TabGroup, so it only needs to be
+     * set when the group is driven by something other than an index.
+     */
+    value?: TabValue;
+    /** Label of the tab. Rendered after `children`. */
+    text?: string;
+    /** Rendered before `text`, for badges, avatars or icon lists alongside the label. */
+    children?: ReactNode;
+    className?: string;
+    id?: string;
+    /** @default false */
+    disabled?: boolean;
+    /** @default false */
+    autoFocus?: boolean;
+    /** @default SizeTypes.MEDIUM */
+    tabSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** Share the group's width equally with its siblings. Normally set by TabGroup. @default false */
+    fullWidth?: boolean;
+    /** Remove the tab's horizontal padding. Normally set by TabGroup. @default false */
+    noPadding?: boolean;
+    /**
+     * Ellipsis the label instead of wrapping it, shrinking the tab to fit rather than letting the group
+     * scroll. Normally set by TabGroup.
+     * @default false
+     */
+    truncateText?: boolean;
+    /** Normally set by TabGroup from its `value`. @default false */
+    selected?: boolean;
+    /** Render a chevron before the tab. Normally set by TabGroup's `withArrows`. @default false */
+    withArrow?: boolean;
+    /** Accessible name for the chevron rendered by `withArrow`. @default 'Arrow' */
+    arrowAriaLabel?: string;
+    /**
+     * Id of the panel this tab controls. Set it, give that panel `role="tabpanel"`, and point the
+     * panel's `aria-labelledby` back at this tab's `id`, and the two are announced as a pair.
+     */
+    ariaControls?: string;
+    /**
+     * Whether this tab is the one reachable with the Tab key. A tab list is a single stop in the tab
+     * order and the arrow keys move within it, so only one tab carries it. Set by TabGroup.
+     * @default false
+     */
+    tabbable?: boolean;
+    toolTip?: string;
+    /** Called with the tab's `value` when it is activated. Normally set by TabGroup. */
+    onChange?: (value: TabValue) => void;
+    /** Called with the tab's `value` when it is activated, after `onChange`. */
+    onClickCallback?: (value: TabValue) => void;
+}
+
+declare const Tab: {
+    ({ children, className, id, disabled, fullWidth, noPadding, truncateText, autoFocus, selected, withArrow, arrowAriaLabel, ariaControls, tabbable, text, toolTip, onChange, onClickCallback, value, tabSize }: TabProps): JSX.Element;
+    displayName: string;
+};
+
+interface TabIndicatorProps {
+    className?: string;
+    /** Renders the indicator in the disabled colour. @default false */
+    disabled?: boolean;
+    style?: CSSProperties;
+}
+interface TabGroupProps {
+    /**
+     * Value of the selected Tab, matched against each Tab's `value`. Pass `false` for no selection at
+     * all, which hides the indicator rather than animating it away.
+     */
+    value: TabValue | false;
+    /** Tab elements. Falsy entries are skipped, so tabs can be rendered conditionally. */
+    children: ReactNode;
+    /** Called with the selected Tab's `value`. Tabs may also carry their own `onClickCallback`. */
+    onChange?: (value: TabValue) => void;
+    className?: string;
+    id?: string;
+    /** Accessible name for the tab list. */
+    ariaLabel?: string;
+    /** Centre the tabs within the group. @default false */
+    centered?: boolean;
+    /** Let the tabs share the group's width equally. @default false */
+    fullWidth?: boolean;
+    /** Remove the tabs' horizontal padding. @default false */
+    noPadding?: boolean;
+    /**
+     * Ellipsis tab labels instead of wrapping them, shrinking the tabs to fit rather than letting the
+     * group scroll.
+     * @default false
+     */
+    truncateText?: boolean;
+    /** Render a chevron before every tab except the first, for wizard style navigation. @default false */
+    withArrows?: boolean;
+    /** Accessible name for the chevrons rendered by `withArrows`. @default 'Arrow' */
+    arrowAriaLabel?: string;
+    /** Applied to every Tab. @default SizeTypes.MEDIUM */
+    tabSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    /** Styling overrides for the underline that tracks the selected tab. */
+    tabIndicatorProps?: TabIndicatorProps;
+}
+
+declare const TabGroup: {
+    ({ children: childrenProp, className, id, ariaLabel, onChange, tabIndicatorProps, value, tabSize, noPadding, truncateText, centered, fullWidth, withArrows, arrowAriaLabel }: TabGroupProps): JSX.Element;
+    displayName: string;
+};
+
 interface OptionItem {
     text: string;
     value: string | number;
@@ -1174,21 +1694,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;
@@ -1196,6 +1722,7 @@ interface SelectInputProps {
     onChange: (value: string | number) => void;
     options: Array<OptionItem>;
     value: string | number;
+    /** @default true */
     nativeHtmlComponent?: boolean;
 }
 
@@ -1231,38 +1758,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;
@@ -1271,52 +1768,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?: {
@@ -1327,8 +1834,8 @@ 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;
 };
 
-export { AppColors, AspectRatioTypes, BorderInterface, Box, Button, Card, Checkbox, ColorStyleInterface, ColorTypes, DropDown, DropDownItem, DropDownRef, FacetButton, FlexStylingInterface, FontFamilyTypes, FormSkeleton, Grid, Heading, HierarchyInterface, HierarchyTypes, Icon, IconButton, IconStyleInterface, IconTypes, Image, InlineButton, Input, Label, ListItem, ListSkeleton, MarginInterface, MultiActionButton, NoDataMessage, PaddingInterface, Pagination, Paragraph, RadioButton, SelectInput, Separator, SizeStyleInterface, SizeTypes, SkeletonItem, SolidSpinner, SortableTable, Span, SwitchButton, TextAreaInput, ToolTip, borderClassNames, flexClassNames, marginClassNames, paddingClassNames };
+export { AppColors, AspectRatioTypes, BorderInterface, Box, Button, Card, Checkbox, ColorStyleInterface, ColorTypes, DropDown, DropDownItem, DropDownRef, FacetButton, FlexStylingInterface, FontFamilyTypes, FormSkeleton, Grid, Heading, HierarchyInterface, HierarchyTypes, Icon, IconButton, IconStyleInterface, IconTypes, Image, InlineButton, Input, Label, Link, LinkTypes, ListButton, ListButtonProps, ListItem, ListSkeleton, MarginInterface, MultiActionButton, NoDataMessage, PaddingInterface, Pagination, Paragraph, RadioButton, SelectInput, Separator, SizeStyleInterface, SizeTypes, SkeletonItem, SolidSpinner, SortableTable, SortableTableCellInterface, SortableTableProps, Span, SwitchButton, Tab, TabGroup, TabGroupProps, TabIndicatorProps, TabProps, TabValue, TableAction, TableActionsCell, TableActionsCellProps, TableSelectionCell, TableSelectionCellProps, TableSelectionHeaderCell, TableSelectionHeaderCellProps, TableTextCell, TableTextCellProps, TableTypes, TextAreaInput, ToolTip, borderClassNames, flexClassNames, marginClassNames, paddingClassNames };