@iota/apps-ui-kit 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -0,0 +1,1636 @@
+import { ComponentProps } from 'react';
+import { Config } from 'tailwindcss';
+import { ForwardRefExoticComponent } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { NavbarItemProps as NavbarItemProps_2 } from '../../../../components/molecules/navbar-item/NavbarItem';
+import { NumericFormat } from 'react-number-format';
+import { PropsWithChildren } from 'react';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import * as React_2 from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SearchBarType as SearchBarType_2 } from '../../../../components';
+
+export declare function Accordion({ children, hideBorder, }: {
+    children: React.ReactNode;
+    hideBorder?: boolean;
+}): React.JSX.Element;
+
+export declare function AccordionContent({ isExpanded, children, }: PropsWithChildren<AccordionContentProps>): JSX_2.Element;
+
+declare interface AccordionContentProps {
+    /**
+     * Flag for show/hide content
+     */
+    isExpanded: boolean;
+}
+
+export declare function AccordionHeader({ onToggle, children, isExpanded, hideArrow, }: PropsWithChildren<AccordionHeaderProps>): JSX_2.Element;
+
+export declare interface AccordionHeaderProps {
+    /**
+     * Flag for show/hide content
+     */
+    isExpanded: boolean;
+    /**
+     * Action on toggle show/hide content
+     */
+    onToggle: () => void;
+    /**
+     * The type of the badge.
+     */
+    badge?: React.ReactNode;
+    /**
+     * Flag for hiding arrow.
+     */
+    hideArrow?: boolean;
+    /**
+     * Flag for hiding border.
+     */
+    hideBorder?: boolean;
+}
+
+export declare function Account({ title, subtitle, badgeType, badgeText, isLocked, avatarContent, onOptionsClick, onLockAccountClick, onUnlockAccountClick, onCopy, copyText, onOpen, isCopyable, isExternal, isSelected, isActive, showSelected, }: AccountProps): React.JSX.Element;
+
+declare interface AccountProps {
+    /**
+     * The title of the account.
+     */
+    title: string;
+    /**
+     * The subtitle of the account.
+     */
+    subtitle: string;
+    /**
+     * Whether the account is unlocked.
+     */
+    isLocked?: boolean;
+    /**
+     * Handler for more options click.
+     */
+    onOptionsClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handler for the lock account icon click.
+     */
+    onLockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Handle for the unlock account icon click.
+     */
+    onUnlockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Function to render avatar content.
+     */
+    avatarContent: ({ isLocked }: {
+        isLocked?: boolean;
+    }) => React.JSX.Element;
+    /**
+     * The onCopy event of the Address  (optional).
+     */
+    onCopy?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Text that need to be copied (optional).
+     */
+    copyText?: string;
+    /**
+     * The onOpen event of the Address  (optional).
+     */
+    onOpen?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Has copy icon (optional).
+     */
+    isCopyable?: boolean;
+    /**
+     * Has open icon  (optional).
+     */
+    isExternal?: boolean;
+    /**
+     * The account is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Show the selected checkbox.
+     */
+    showSelected?: boolean;
+    /**
+     * Show background if account active (optional).
+     */
+    isActive?: boolean;
+    /**
+     * The type of the badge.
+     */
+    badgeType?: BadgeType;
+    /**
+     * The text of the badge.
+     */
+    badgeText?: string;
+}
+
+export declare function Address({ text, isCopyable, isExternal, externalLink, copyText, onCopySuccess, onCopyError, onOpen, }: AddressProps): React.JSX.Element;
+
+declare interface AddressProps {
+    /**
+     * The text of the address.
+     */
+    text: string;
+    /**
+     * Has copy icon (optional).
+     */
+    isCopyable?: boolean;
+    /**
+     * Has open icon  (optional).
+     */
+    isExternal?: boolean;
+    /**
+     * The link for external resource (optional).
+     */
+    externalLink?: string;
+    /**
+     * Text that need to be copied (optional).
+     */
+    copyText?: string;
+    /**
+     * The onCopySuccess event of the Address  (optional).
+     */
+    onCopySuccess?: (e: React.MouseEvent<HTMLButtonElement>, text: string) => void;
+    /**
+     * The onCopyError event of the Address  (optional).
+     */
+    onCopyError?: (e: unknown, text: string) => void;
+    /**
+     * The onOpen event of the Address  (optional).
+     */
+    onOpen?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export declare function Badge({ type, label }: BadgeProps): React.JSX.Element;
+
+declare interface BadgeProps {
+    /**
+     * The type of the badge.
+     */
+    type: BadgeType;
+    /**
+     * The label of the badge.
+     */
+    label?: string;
+}
+
+export declare enum BadgeType {
+    Neutral = "neutral",
+    PrimarySolid = "primary-solid",
+    PrimarySoft = "primary-fill"
+}
+
+export declare interface BaseInputProps extends InputWrapperProps {
+    /**
+     * A leading icon that is shown before the input
+     */
+    leadingIcon?: React.JSX.Element;
+    /**
+     * Supporting text that is shown at the end of the input component.
+     */
+    supportingText?: string;
+    /**
+     * Amount counter that is shown at the side of the caption text.
+     */
+    amountCounter?: string | number;
+    /**
+     * Trailing element that is shown after the input
+     */
+    trailingElement?: React.JSX.Element;
+    /**
+     * Is the content of the input visible
+     */
+    isContentVisible?: boolean;
+    /**
+     * Value of the input
+     */
+    value?: string | number;
+    /**
+     * Default value of the input
+     */
+    defaultValue?: string | number;
+    /**
+     * onClearInput function that is called when the clear button is clicked
+     */
+    onClearInput?: () => void;
+    /**
+     * Shows toggle button to show/hide the content of the input field
+     */
+    isVisibilityToggleEnabled?: boolean;
+}
+
+export declare function Button({ icon, text, disabled, onClick, fullWidth, htmlType, size, type, iconAfterText, tabIndex, testId, }: ButtonProps): React.JSX.Element;
+
+export declare enum ButtonHtmlType {
+    Button = "button",
+    Submit = "submit",
+    Reset = "reset"
+}
+
+declare type ButtonPickedProps = Pick<ButtonProps, 'htmlType' | 'testId'>;
+
+export declare function ButtonPill({ htmlType, children, tabIndex, ...buttonProps }: Omit<ButtonVariantProps, 'className'>): JSX_2.Element;
+
+export declare interface ButtonProps {
+    /**
+     * The size of the button.
+     */
+    size?: ButtonSize;
+    /**
+     * The type of the button
+     */
+    type?: ButtonType;
+    /**
+     * The text of the button.
+     */
+    text?: string;
+    /**
+     The icon of the button
+     */
+    icon?: React.ReactNode;
+    /**
+     * Should the icon be after the text.
+     */
+    iconAfterText?: boolean;
+    /**
+     * The button is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * The onClick event of the button.
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Whether the button should have the full width.
+     */
+    fullWidth?: boolean;
+    /**
+     * The type of the button. Available options are 'button', 'submit', 'reset'.
+     */
+    htmlType?: ButtonHtmlType;
+    /**
+     * The tab index of the button.
+     */
+    tabIndex?: number;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export declare function ButtonSegment({ icon, label, selected, disabled, onClick, type, }: ButtonSegmentProps): React.JSX.Element;
+
+declare interface ButtonSegmentProps {
+    /**
+     * The label of the button.
+     */
+    label: string;
+    /**
+     The icon of the button
+     */
+    icon?: React.ReactNode;
+    /**
+     The selected flag of the button
+     */
+    selected?: boolean;
+    /**
+     * The button is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * The onClick event of the button.
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The type of the button.
+     */
+    type?: ButtonSegmentType;
+}
+
+export declare enum ButtonSegmentType {
+    Rounded = "rounded",
+    Underlined = "underlined"
+}
+
+export declare enum ButtonSize {
+    Small = "small",
+    Medium = "medium"
+}
+
+export declare enum ButtonType {
+    Primary = "primary",
+    Secondary = "secondary",
+    Ghost = "ghost",
+    Outlined = "outlined",
+    Destructive = "destructive"
+}
+
+export declare function ButtonUnstyled({ htmlType, children, className, tabIndex, testId, ...buttonProps }: ButtonVariantProps): React.JSX.Element;
+
+declare interface ButtonVariantProps extends ButtonPickedProps, PropsFromButtonElement {
+    children: React.ReactNode;
+}
+
+export declare function Card({ isDisabled, type, isHoverable, onClick, children, testId, }: CardProps): JSX_2.Element;
+
+export declare function CardAction({ type, onClick, subtitle, title, icon, iconAfterText, buttonType, buttonDisabled, }: CardActionProps): JSX_2.Element | null;
+
+export declare type CardActionProps = {
+    title?: string;
+    subtitle?: string;
+    type: CardActionType;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    iconAfterText?: boolean;
+    buttonType?: ButtonType;
+    buttonDisabled?: boolean;
+};
+
+export declare enum CardActionType {
+    Link = "link",
+    SupportingText = "supporting-text",
+    Button = "button"
+}
+
+export declare function CardBody({ title, subtitle, clickableAction, icon, isTextTruncated, }: CardBodyProps): JSX_2.Element;
+
+export declare type CardBodyProps = {
+    title: string;
+    subtitle?: string | ReactNode;
+    clickableAction?: React.ReactNode;
+    icon?: React.ReactNode;
+    isTextTruncated?: boolean;
+};
+
+export declare function CardImage({ type, shape, url, children, }: CardImageProps): JSX_2.Element;
+
+export declare interface CardImageProps {
+    type?: ImageType;
+    shape?: ImageShape;
+    url?: string;
+    children?: React.ReactNode;
+}
+
+export declare interface CardProps {
+    /**
+     * If `true`, the card will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Handler on click to the card.
+     */
+    onClick?: () => void;
+    /**
+     * UI variant of the card.
+     */
+    type?: CardType;
+    /**
+     * Passing composable Card components like: CardImage, CardText, CardAction.
+     */
+    children?: React.ReactNode;
+    /**
+     * Indicates whether the state-layer should be shown on the card anyway.
+     * Use case: When the card is wrapped with a Link component
+     */
+    isHoverable?: boolean;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export declare enum CardType {
+    Default = "default",
+    Outlined = "outlined",
+    Filled = "filled"
+}
+
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+
+declare interface CheckboxProps {
+    /**
+     * The label of the checkbox.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The state of the checkbox.
+     */
+    isChecked?: boolean;
+    /**
+     * If true the checkbox will override the styles to show an indeterminate state.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Whether the label should be placed before the checkbox.
+     */
+    isLabelFirst?: boolean;
+    /**
+     * If true the checkbox will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the checkbox is clicked.
+     */
+    onCheckedChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The name of the checkbox.
+     */
+    name?: string;
+}
+
+export declare function Chip({ label, showClose, selected, onClose, onClick, avatar, leadingElement, trailingElement, disabled, }: ChipProps): JSX_2.Element;
+
+declare interface ChipProps {
+    /**
+     * The label of the chip
+     */
+    label: string;
+    /**
+     * Whether to show the close icon
+     */
+    showClose?: boolean;
+    /**
+     * Whether the chip is selected
+     */
+    selected?: boolean;
+    /**
+     * Callback when the close icon is clicked
+     */
+    onClose?: () => void;
+    /**
+     * On Click handler for the chip
+     */
+    onClick?: () => void;
+    /**
+     * Avatar to show in the chip.
+     */
+    avatar?: React.JSX.Element;
+    /**
+     * Leading element to show in the chip.
+     */
+    leadingElement?: React.JSX.Element;
+    /**
+     * Trailing element to show in the chip.
+     */
+    trailingElement?: React.JSX.Element;
+    /**
+     * The button is disabled or not.
+     */
+    disabled?: boolean;
+}
+
+export declare const Dialog: React_2.FC<RadixDialog.DialogProps>;
+
+export declare const DialogBody: React_2.ForwardRefExoticComponent<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const DialogClose: React_2.ForwardRefExoticComponent<RadixDialog.DialogCloseProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare const DialogContent: React_2.ForwardRefExoticComponent<Omit<RadixDialog.DialogContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
+    containerId?: string;
+    showCloseOnOverlay?: boolean;
+    position?: DialogPosition;
+    customWidth?: string;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare enum DialogPosition {
+    Center = "center",
+    Right = "right"
+}
+
+export declare const DialogTitle: React_2.ForwardRefExoticComponent<Omit<RadixDialog.DialogTitleProps & React_2.RefAttributes<HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
+
+export declare const DialogTrigger: React_2.ForwardRefExoticComponent<RadixDialog.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare function DisplayStats({ label, tooltipPosition, tooltipText, value, supportingLabel, type, size, icon, }: DisplayStatsProps): React.JSX.Element;
+
+declare interface DisplayStatsProps {
+    /**
+     * The label of the stats.
+     */
+    label: ReactNode;
+    /**
+     * The tooltip position.
+     */
+    tooltipPosition?: TooltipPosition;
+    /**
+     * The tooltip text.
+     */
+    tooltipText?: string;
+    /**
+     * The value of the stats.
+     */
+    value: ReactNode;
+    /**
+     * The supporting label of the stats (optional).
+     */
+    supportingLabel?: string;
+    /**
+     * The background color of the stats.
+     */
+    type?: DisplayStatsType;
+    /**
+     * The size of the stats.
+     */
+    size?: DisplayStatsSize;
+    /**
+     * Add icon to the right of the label.
+     */
+    icon?: React.ReactNode;
+}
+
+export declare enum DisplayStatsSize {
+    Default = "default",
+    Large = "large"
+}
+
+export declare enum DisplayStatsType {
+    Default = "default",
+    Highlight = "highlight",
+    Secondary = "secondary"
+}
+
+export declare function Divider({ type, width, height, lineHeight, }: DividerProps): React.JSX.Element;
+
+declare interface DividerProps {
+    /**
+     * The type of the divider
+     */
+    type?: DividerType;
+    /**
+     * The width of the divider.
+     */
+    width?: string;
+    /**
+     * The height of the divider.
+     */
+    height?: string;
+    /**
+     * The line height of the divider.
+     */
+    lineHeight?: string;
+}
+
+export declare enum DividerType {
+    Vertical = "vertical",
+    Horizontal = "horizontal"
+}
+
+export declare function Dropdown({ children }: React.PropsWithChildren): React.JSX.Element;
+
+export declare enum DropdownPosition {
+    Top = "top",
+    Bottom = "bottom"
+}
+
+declare type GenericInputProps = {
+    type: InputType.Text | InputType.Password | InputType.Number;
+};
+
+export declare function Header({ title, titleCentered, onBack, onClose, testId, }: HeaderProps): JSX.Element;
+
+declare interface HeaderProps {
+    /**
+     * Header title.
+     */
+    title: string;
+    /**
+     * Title alignment (optional).
+     */
+    titleCentered?: boolean;
+    /**
+     * On back click handler (optional). If provided, a back button will be displayed.
+     */
+    onBack?: () => void;
+    /**
+     * On close click handler (optional). If provided, a close button will be displayed.
+     */
+    onClose?: (() => void) | ((e: React.MouseEvent<HTMLElement>) => void);
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export declare enum ImageShape {
+    Rounded = "rounded",
+    SquareRounded = "square-rounded"
+}
+
+export declare enum ImageType {
+    Placeholder = "placeholder",
+    BgSolid = "bg-solid",
+    BgTransparent = "bg-transparent"
+}
+
+export declare function InfoBox({ icon, title, supportingText, type, style, }: InfoBoxProps): React.JSX.Element;
+
+export declare interface InfoBoxProps {
+    /**
+     * The icon of the info box (optional).
+     */
+    icon?: React.ReactNode;
+    /**
+     * The title of the info box (optional).
+     */
+    title?: string;
+    /**
+     * The supporting text of the info box (optional).
+     */
+    supportingText?: string;
+    /**
+     * The type of the info box.
+     */
+    type: InfoBoxType;
+    /**
+     * The style of the info box.
+     */
+    style?: InfoBoxStyle;
+}
+
+export declare enum InfoBoxStyle {
+    Default = "default",
+    Elevated = "elevated"
+}
+
+export declare enum InfoBoxType {
+    Default = "default",
+    Error = "error",
+    Success = "success",
+    Warning = "warning"
+}
+
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
+declare type InputElementProps = Omit<React.ComponentProps<'input'>, 'type' | 'className' | 'ref' | 'value' | 'defaultValue'>;
+
+export declare type InputProps = BaseInputProps & InputPropsByType;
+
+export declare type InputPropsByType = InputElementProps & (NumericFormatInputProps | GenericInputProps);
+
+export declare enum InputType {
+    Text = "text",
+    Password = "password",
+    Number = "number",
+    NumericFormat = "numericFormat"
+}
+
+declare interface InputWrapperProps {
+    /**
+     * Shows a label with the text above the input.
+     */
+    label?: string;
+    /**
+     * Shows a caption with the text below the input.
+     */
+    caption?: string;
+    /**
+     * Error Message. Overrides the caption.
+     */
+    errorMessage?: string;
+    /**
+     * Amount counter that is shown at the side of the caption text.
+     */
+    amountCounter?: string | number;
+    /**
+     * Is the input required
+     */
+    required?: boolean;
+    /**
+     * Is the input disabled
+     */
+    disabled?: boolean;
+    /**
+     * Use a div as a label instead of a label element
+     */
+    labelHtmlTag?: LabelHtmlTag;
+}
+
+export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
+    primary: {
+        '0': string;
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '100': string;
+    };
+    secondary: {
+        '0': string;
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '100': string;
+    };
+    tertiary: {
+        '0': string;
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '100': string;
+    };
+    error: {
+        '0': string;
+        '10': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '100': string;
+    };
+    neutral: {
+        '0': string;
+        '4': string;
+        '6': string;
+        '10': string;
+        '12': string;
+        '20': string;
+        '30': string;
+        '40': string;
+        '50': string;
+        '60': string;
+        '70': string;
+        '80': string;
+        '90': string;
+        '92': string;
+        '96': string;
+        '98': string;
+        '100': string;
+    };
+    warning: {
+        '10': string;
+        '20': string;
+        '90': string;
+    };
+};
+
+export declare function KeyValueInfo({ keyText, value, tooltipPosition, tooltipText, supportingLabel, size, isTruncated, copyText, onCopySuccess, onCopyError, fullwidth, isReverse, valueHoverTitle, }: KeyValueProps): React.JSX.Element;
+
+declare interface KeyValueProps {
+    /**
+     * The key of the KeyValue.
+     */
+    keyText: string;
+    /**
+     * The value of the KeyValue.
+     */
+    value: ReactNode;
+    /**
+     * The tooltip position.
+     */
+    tooltipPosition?: TooltipPosition;
+    /**
+     * The tooltip text.
+     */
+    tooltipText?: string;
+    /**
+     * The supporting label of the KeyValue (optional).
+     */
+    supportingLabel?: string;
+    /**
+     * The size of the value (optional).
+     */
+    size?: ValueSize;
+    /**
+     * The flag to truncate the value text.
+     */
+    isTruncated?: boolean;
+    /**
+     * Text that need to be copied (optional).
+     */
+    copyText?: string;
+    /**
+     * The onCopySuccess event of the KeyValue  (optional).
+     */
+    onCopySuccess?: (e: React.MouseEvent<HTMLButtonElement>, text: string) => void;
+    /**
+     * The onCopyError event of the KeyValue  (optional).
+     */
+    onCopyError?: (e: unknown, text: string) => void;
+    /**
+     * Full width KeyValue (optional).
+     */
+    fullwidth?: boolean;
+    /**
+     * Reverse the KeyValue (optional).
+     */
+    isReverse?: boolean;
+    /**
+     * Text shown on value hover.
+     */
+    valueHoverTitle?: string;
+}
+
+declare enum LabelHtmlTag {
+    Label = "label",
+    Div = "div"
+}
+
+export declare function LabelText({ size, isCentered, supportingLabel, label, text, tooltipPosition, tooltipText, }: LabelTextProps): React.JSX.Element;
+
+declare interface LabelTextProps {
+    /**
+     * The size of the LabelText.
+     */
+    size?: LabelTextSize;
+    /**
+     * The position of the LabelText.
+     */
+    isCentered?: boolean;
+    /**
+     * The supporting label of the LabelText.
+     */
+    supportingLabel?: string;
+    /**
+     * The text of the LabelText.
+     */
+    label: string;
+    /**
+     * The text of the LabelText.
+     */
+    text: string;
+    /**
+     * The tooltip position.
+     */
+    tooltipPosition?: TooltipPosition;
+    /**
+     * The tooltip text.
+     */
+    tooltipText?: string;
+}
+
+export declare enum LabelTextSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+
+export declare function ListItem({ showRightIcon, hideBottomBorder, onClick, isDisabled, children, isHighlighted, }: PropsWithChildren<ListItemProps>): React.JSX.Element;
+
+export declare interface ListItemProps {
+    /**
+     * Has right icon (optional).
+     */
+    showRightIcon?: boolean;
+    /**
+     * Hide bottom border (optional).
+     */
+    hideBottomBorder?: boolean;
+    /**
+     * On click handler (optional).
+     */
+    onClick?: () => void;
+    /**
+     * The list item is disabled or not.
+     */
+    isDisabled?: boolean;
+    /**
+     * The list item is highlighted.
+     */
+    isHighlighted?: boolean;
+}
+
+export declare function LoadingIndicator({ color, size, text, testId, }: LoadingIndicatorProps): React.JSX.Element;
+
+export declare interface LoadingIndicatorProps {
+    /**
+     * The color of the loading indicator.
+     */
+    color?: string;
+    /**
+     * The size of the loading indicator.
+     */
+    size?: string;
+    /**
+     * The text to display next to the loading indicator.
+     */
+    text?: string;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export declare function Navbar({ items, activeId, onClickItem, isCollapsible, onToggleNavbar, }: NavbarProps): JSX_2.Element;
+
+export declare function NavbarItem(props: NavbarItemProps): React.JSX.Element;
+
+export declare interface NavbarItemProps {
+    /**
+     * The type of the navbar item.
+     */
+    type?: NavbarItemType;
+    /**
+     * The icon of the navbar item.
+     */
+    icon: React.ReactNode;
+    /**
+     * The text of the navbar item.
+     */
+    text?: string;
+    /**
+     * Indicates if the navbar item is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Indicates if the navbar item has a badge.
+     */
+    hasBadge?: boolean;
+    /**
+     * The onClick event of the navbar item.
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Indicates if the navbar item is disabled.
+     */
+    isDisabled?: boolean;
+}
+
+export declare enum NavbarItemType {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+
+export declare type NavbarItemWithId = NavbarItemProps_2 & {
+    id: string;
+};
+
+export declare interface NavbarProps {
+    /**
+     * If this flag is true we need to leave only the icon and collapsible button
+     */
+    isCollapsible?: boolean;
+    /**
+     * List of elements to be displayed in the navbar.
+     */
+    items: NavbarItemWithId[];
+    /**
+     * The id of the active element.
+     */
+    activeId: string;
+    /**
+     * Callback when an element is clicked.
+     */
+    onClickItem: (id: string) => void;
+    /**
+     * If the navbar is collapsible, this flag indicates if it is open or not.
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when the navbar is toggled.
+     */
+    onToggleNavbar?: () => void;
+}
+
+export declare function NavbarSlideout({ items, activeId, onClickItem, isOpen, onToggleNavbar, }: NavbarProps): JSX_2.Element;
+
+export declare type NumericFormatInputProps = {
+    type: InputType.NumericFormat;
+    suffix?: NumericFormatProps['suffix'];
+    prefix?: NumericFormatProps['prefix'];
+    decimalScale?: NumericFormatProps['decimalScale'];
+    allowNegative?: NumericFormatProps['allowNegative'];
+    thousandSeparator?: NumericFormatProps['thousandSeparator'];
+    onValueChange?: NumericFormatProps['onValueChange'];
+};
+
+declare type NumericFormatProps = ComponentProps<typeof NumericFormat>;
+
+export declare function Panel({ children, hasBorder, bgColor, }: React.PropsWithChildren<PanelProps>): React.JSX.Element;
+
+declare interface PanelProps {
+    /**
+     * Show or hide border around the panel.
+     */
+    hasBorder?: boolean;
+    /**
+     * Background color of the panel.
+     */
+    bgColor?: string;
+}
+
+export declare function Placeholder({ width, height }: PlaceholderProps): JSX_2.Element;
+
+declare interface PlaceholderProps {
+    /**
+     * The width of the placeholder.
+     */
+    width?: string;
+    /**
+     * The height of the placeholder.
+     */
+    height?: string;
+}
+
+declare type PropsFromButtonElement = Omit<React.HTMLProps<HTMLButtonElement>, 'type'>;
+
+export declare function RadioButton({ label, isChecked, isDisabled, onChange, }: RadioButtonProps): React.JSX.Element;
+
+declare interface RadioButtonProps {
+    /**
+     * The label of the radio button.
+     */
+    label: string;
+    /**
+     * The state of the radio button.
+     */
+    isChecked?: boolean;
+    /**
+     * If radio button disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the radio button is clicked.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+declare type Renderable = JSX.Element | string | null;
+
+export declare enum Resize {
+    None = "none",
+    Vertical = "vertical"
+}
+
+export declare enum ScreenSize {
+    Sm = "sm",
+    Md = "md",
+    Lg = "lg",
+    Xl = "xl"
+}
+
+export declare function Search({ searchValue, suggestions, onSearchValueChange, onSuggestionClick, placeholder, isLoading, onKeyDown, type, renderSuggestion, }: SearchProps): React.JSX.Element;
+
+export declare enum SearchBarType {
+    Outlined = "outlined",
+    Filled = "filled"
+}
+
+export declare interface SearchProps {
+    /**
+     * The value of the search input.
+     */
+    searchValue: string;
+    /**
+     * Callback when the search input value changes.
+     */
+    onSearchValueChange: (value: string) => void;
+    /**
+     * List of suggestions to display (optional).
+     */
+    suggestions?: Suggestion[];
+    /**
+     * Callback when a suggestion is clicked.
+     */
+    onSuggestionClick?: (suggestion: Suggestion) => void;
+    /**
+     * Placeholder text for the search input.
+     */
+    placeholder: string;
+    /**
+     * Are the suggestions loading.
+     */
+    isLoading: boolean;
+    /**
+     * Callback when a key is pressed.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * The type of the search bar. Can be 'outlined' or 'filled'.
+     */
+    type?: SearchBarType_2;
+    /**
+     * Render suggestion.
+     */
+    renderSuggestion: (suggestion: Suggestion, index: number) => React.ReactNode;
+}
+
+export declare function SegmentedButton({ type, children, shape, }: PropsWithChildren<SegmentedButtonProps>): React.JSX.Element;
+
+declare interface SegmentedButtonProps {
+    /**
+     * The type of the button
+     */
+    type?: SegmentedButtonType;
+    /**
+     * The shape of the button
+     */
+    shape?: ButtonSegmentType;
+}
+
+export declare enum SegmentedButtonType {
+    Outlined = "outlined",
+    Filled = "filled",
+    Transparent = "transparent"
+}
+
+export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLButtonElement>>;
+
+export declare type SelectOption = string | {
+    id: string;
+    renderLabel: () => React.JSX.Element;
+} | {
+    id: string;
+    label: React.ReactNode;
+};
+
+declare interface SelectProps extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'> {
+    /**
+     * The selected option value.
+     */
+    value?: string;
+    /**
+     * The field label.
+     */
+    label?: string;
+    /**
+     * The field caption.
+     */
+    caption?: string;
+    /**
+     * The dropdown elements to render.
+     */
+    options: SelectOption[];
+    /**
+     * The icon to show on the left of the field.
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * The supporting text to shown at the end of the selector.
+     */
+    supportingText?: string;
+    /**
+     * The error message to show under the field.
+     */
+    errorMessage?: string;
+    /**
+     * Placeholder for the selector
+     */
+    placeholder?: SelectOption;
+    /**
+     * The callback to call when the value changes.
+     */
+    onValueChange?: (id: string) => void;
+    /**
+     * The callback to call when the option is clicked.
+     */
+    onOptionClick?: (id: string) => void;
+    /**
+     * The dropdown position
+     */
+    dropdownPosition?: DropdownPosition;
+    /**
+     * The size of the select.
+     */
+    size?: SelectSize;
+}
+
+export declare enum SelectSize {
+    Small = "small",
+    Default = "default"
+}
+
+export declare const SHADER_COLOR_PALETTE: {
+    'shader-primary-dark': {
+        '0': string;
+        '8': string;
+        '12': string;
+        '16': string;
+        '48': string;
+        '72': string;
+    };
+    'shader-inverted-dark': {
+        '0': string;
+        '8': string;
+        '12': string;
+        '16': string;
+        '48': string;
+        '72': string;
+    };
+    'shader-neutral-dark': {
+        '0': string;
+        '8': string;
+        '12': string;
+        '16': string;
+        '48': string;
+        '72': string;
+    };
+    'shader-primary-light': {
+        0: string;
+        8: string;
+        12: string;
+        16: string;
+        48: string;
+        72: string;
+    };
+    'shader-inverted-light': {
+        0: string;
+        8: string;
+        12: string;
+        16: string;
+        48: string;
+        72: string;
+    };
+    'shader-neutral-light': {
+        0: string;
+        8: string;
+        12: string;
+        16: string;
+        48: string;
+        72: string;
+    };
+};
+
+export declare function Skeleton({ children, widthClass, heightClass, hasSecondaryColors, isRounded, }: React.PropsWithChildren<SkeletonLoaderProps>): React.JSX.Element;
+
+declare interface SkeletonLoaderProps {
+    /**
+     * Width class for the skeleton div.
+     */
+    widthClass?: string;
+    /**
+     * Height class for the skeleton div.
+     */
+    heightClass?: string;
+    /**
+     * If true, the skeleton will use darker neutral colors.
+     */
+    hasSecondaryColors?: boolean;
+    /**
+     * Whether the class `rounded-full` should be applied. Defaults to true.
+     */
+    isRounded?: boolean;
+}
+
+export declare function Snackbar({ text, duration, onClose, showClose, type, }: SnackbarProps): JSX_2.Element;
+
+export declare interface SnackbarProps {
+    /**
+     * The message to display in the snackbar.
+     */
+    text: Renderable;
+    /**
+     * Type of the snackbar.
+     */
+    type: SnackbarType;
+    /**
+     * Duration in milliseconds for the snackbar to auto close. `0` will make the component not close automatically.
+     */
+    duration?: number;
+    /**
+     * Callback to close the snackbar.
+     */
+    onClose: () => void;
+    /**
+     * Show the close button.
+     */
+    showClose?: boolean;
+}
+
+export declare enum SnackbarType {
+    Default = "default",
+    Error = "error",
+    Warning = "warning",
+    Success = "success"
+}
+
+export declare interface Suggestion {
+    id: string;
+    label: string;
+    supportingText?: string;
+    type?: string;
+}
+
+export declare function Table({ paginationOptions, action, supportingLabel, selectedRowIndexes, rowIndexes, children, pageSizeSelector, }: PropsWithChildren<TableProps>): JSX.Element;
+
+export declare function TableActionButton(props: PropsWithChildren<ButtonProps>): JSX_2.Element;
+
+export declare function TableBody({ children }: PropsWithChildren): JSX.Element;
+
+export declare function TableCellBase({ children, hasLastBorderNoneClass, isContentCentered, }: PropsWithChildren<TableCellBaseProps>): JSX_2.Element;
+
+declare interface TableCellBaseProps {
+    /**
+     * The label of the cell.
+     */
+    label?: string;
+    /**
+     * If the cell is the last in the row and should not have a border.
+     */
+    hasLastBorderNoneClass?: boolean;
+    /**
+     * Whether the cell content should be centered.
+     */
+    isContentCentered?: boolean;
+}
+
+export declare function TableCellPlaceholder(): JSX_2.Element;
+
+export declare function TableCellText({ children, supportingLabel, }: PropsWithChildren<TableCellTextProps>): JSX_2.Element;
+
+export declare interface TableCellTextProps {
+    supportingLabel?: string;
+}
+
+export declare function TableHeader({ children }: PropsWithChildren): JSX.Element;
+
+export declare function TableHeaderCell({ label, columnKey, hasSort, hasCheckbox, isChecked, isIndeterminate, isContentCentered, onSortClick, onCheckboxChange, sortOrder, }: TableHeaderCellProps): JSX.Element;
+
+export declare interface TableHeaderCellProps {
+    /**
+     * The column key.
+     */
+    columnKey: string | number;
+    /**
+     * The label of the Header cell.
+     */
+    label?: string;
+    /**
+     * Action component to be rendered on the left side.
+     */
+    actionLeft?: React.ReactNode;
+    /**
+     * Action component to be rendered on the right side.
+     */
+    actionRight?: React.ReactNode;
+    /**
+     * Has Sort icon.
+     */
+    hasSort?: boolean;
+    /**
+     * On Sort icon click.
+     */
+    onSortClick?: (columnKey: string | number, sortOrder: TableHeaderCellSortOrder) => void;
+    /**
+     * Has Checkbox.
+     */
+    hasCheckbox?: boolean;
+    /**
+     * Is Checkbox checked.
+     */
+    isChecked?: boolean;
+    /**
+     * Is Checkbox indeterminate.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * On Checkbox change.
+     */
+    onCheckboxChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Whether the cell content should be centered.
+     */
+    isContentCentered?: boolean;
+    /**
+     * Sort order when cell is initialized
+     */
+    sortOrder?: TableHeaderCellSortOrder;
+}
+
+export declare enum TableHeaderCellSortOrder {
+    Asc = "asc",
+    Desc = "desc"
+}
+
+export declare function TableHeaderCheckbox({ onCheckboxChange }: TableHeaderCheckboxProps): JSX.Element;
+
+export declare interface TableHeaderCheckboxProps {
+    onCheckboxChange: (checked: boolean) => void;
+}
+
+export declare interface TablePaginationOptions {
+    /**
+     * On Next page button click.
+     */
+    onNext?: () => void;
+    /**
+     * On Previous page button click.
+     */
+    onPrev?: () => void;
+    /**
+     * On First page button click.
+     */
+    onFirst?: () => void;
+    /**
+     * On Last page button click.
+     */
+    onLast?: () => void;
+    /**
+     * Has Next button.
+     */
+    hasNext?: boolean;
+    /**
+     * Has Previous button.
+     */
+    hasPrev?: boolean;
+    /**
+     * Has First button.
+     */
+    hasFirst?: boolean;
+    /**
+     * Has Last button.
+     */
+    hasLast?: boolean;
+}
+
+export declare type TableProps = {
+    /**
+     * Options for the table pagination.
+     */
+    paginationOptions?: TablePaginationOptions;
+    /**
+     * The action component.
+     */
+    action?: ReactNode;
+    /**
+     * The supporting label of the table.
+     */
+    supportingLabel?: string;
+    /**
+     * Numeric indexes of the selected rows.
+     */
+    selectedRowIndexes?: Set<number>;
+    /**
+     * Numeric indexes of all the rows.
+     */
+    rowIndexes: number[];
+    /**
+     * The page size selector component.
+     */
+    pageSizeSelector?: ReactNode;
+};
+
+export declare function TableRow({ children, leading, }: PropsWithChildren<{
+    leading?: React.ReactNode;
+}>): JSX.Element;
+
+export declare function TableRowCheckbox({ rowIndex, onCheckboxChange, }: TableRowCheckboxProps): React.JSX.Element;
+
+export declare interface TableRowCheckboxProps {
+    rowIndex: number;
+    onCheckboxChange: (checked: boolean) => void;
+}
+
+export declare const TextArea: ForwardRefExoticComponent<TextFieldBaseProps & RefAttributes<HTMLTextAreaElement>>;
+
+declare type TextAreaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'cols' | 'resize' | 'className'>;
+
+declare interface TextFieldBaseProps extends TextAreaProps, InputWrapperProps {
+    /**
+     * Shows a label with the text above the input field.
+     */
+    label?: string;
+    /**
+     * Shows a caption with the text below the input field.
+     */
+    caption?: string;
+    /**
+     * Error Message. Overrides the caption.
+     */
+    errorMessage?: string;
+    /**
+     * Amount counter that is shown at the side of the caption text.
+     */
+    amountCounter?: string | number;
+    /**
+     * Shows toggle button to show/hide the content of the input field
+     */
+    isVisibilityToggleEnabled?: boolean;
+    /**
+     * Is the content of the input visible
+     */
+    isContentVisible?: boolean;
+    /**
+     * If true the textarea is resizable vertically
+     */
+    isResizeEnabled?: boolean;
+}
+
+export declare function Title({ title, subtitle, trailingElement, tooltipText, supportingElement, tooltipPosition, size, }: TitleProps): JSX_2.Element;
+
+declare interface TitleProps {
+    /**
+     * The title of the component.
+     */
+    title: string;
+    /**
+     * The subtitle of the component.
+     */
+    subtitle?: string;
+    /**
+     * The trailing element.
+     */
+    trailingElement?: React.ReactNode;
+    /**
+     * The tooltip position.
+     */
+    tooltipPosition?: TooltipPosition;
+    /**
+     * The tooltip text.
+     */
+    tooltipText?: string;
+    /**
+     * Supporting Element
+     */
+    supportingElement?: React.ReactNode;
+    /**
+     * The size of the component
+     */
+    size?: TitleSize;
+}
+
+export declare enum TitleSize {
+    Small = "small",
+    Medium = "medium"
+}
+
+export declare function Tooltip({ text, position, maxWidth, children, }: PropsWithChildren<TooltipProps>): React.JSX.Element;
+
+export declare enum TooltipPosition {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}
+
+declare interface TooltipProps {
+    text: string;
+    position?: TooltipPosition;
+    maxWidth?: string;
+}
+
+export declare function truncate(value: string, startLength?: number, endLength?: number): string;
+
+export declare const uiKitResponsivePreset: Config;
+
+export declare const uiKitStaticPreset: Config;
+
+export declare enum ValueSize {
+    Small = "small",
+    Medium = "medium"
+}
+
+export declare function VisualAssetCard({ assetType, assetSrc, altText, onIconClick, onClick, icon, assetTitle, isHoverable, }: VisualAssetCardProps): React.JSX.Element;
+
+export declare interface VisualAssetCardProps {
+    /**
+     * The type of the asset to be displayed.
+     */
+    assetType?: VisualAssetType;
+    /**
+     * The source of the image to be displayed.
+     */
+    assetSrc: string;
+    /**
+     * Alt text for the image.
+     */
+    altText: string;
+    /**
+     * The onClick event for the icon.
+     */
+    onIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The onClick event for the card.
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * The icon to be displayed.
+     */
+    icon?: React.ReactNode;
+    /**
+     * The title text to be displayed on hover.
+     */
+    assetTitle?: string;
+    /**
+     * Whether the card is hoverable.
+     */
+    isHoverable?: boolean;
+}
+
+export declare enum VisualAssetType {
+    Image = "image",
+    Video = "video"
+}
+
+export { }