/**
 * Deskpro UI Library
 * @packageDocumentation
 */

import type { AnchorHTMLAttributes } from 'react';
import type { AriaAttributes } from 'react';
import type { ButtonHTMLAttributes } from 'react';
import type { ChangeEvent } from 'react';
import type { ComponentProps } from 'react';
import type { ComponentType } from 'react';
import type { CSSProp } from 'styled-components';
import { CSSProperties } from 'react';
import type { CSSProperties as CSSProperties_2 } from 'styled-components';
import { DefaultTheme } from 'styled-components';
import { Dispatch } from 'react';
import type { ElementType } from 'react';
import type { ErrorMessageProps } from 'formik';
import type { FieldHelperProps } from 'formik';
import type { FieldHookConfig } from 'formik';
import type { FieldInputProps } from 'formik';
import type { FieldMetaProps } from 'formik';
import { FlattenInterpolation } from 'styled-components';
import { FlattenSimpleInterpolation } from 'styled-components';
import { ForwardRefComponent } from 'framer-motion';
import { ForwardRefExoticComponent } from 'react';
import { GlobalStyleComponent } from 'styled-components';
import type { HierarchyNode } from 'd3-hierarchy';
import type { HTMLAttributes } from 'react';
import { HTMLMotionProps } from 'framer-motion';
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import type { InputHTMLAttributes } from 'react';
import { JSX as JSX_2 } from 'react';
import type { KeyboardEvent as KeyboardEvent_2 } from 'react';
import type { LabelHTMLAttributes } from 'react';
import type { MotionStyle } from 'framer-motion';
import type { MouseEvent as MouseEvent_2 } from 'react';
import type { MouseEventHandler } from 'react';
import type { MutableRefObject } from 'react';
import type { OptgroupHTMLAttributes } from 'react';
import type { OptionHTMLAttributes } from 'react';
import type { Placement } from '@popperjs/core';
import type { Props } from 'simplebar-react';
import * as React_2 from 'react';
import { ReactNode } from 'react';
import type { ReactPortal } from 'react';
import type { Ref } from 'react';
import { RefAttributes } from 'react';
import type { RefObject } from 'react';
import type { SelectHTMLAttributes } from 'react';
import { SetStateAction } from 'react';
import { default as SimpleBar_2 } from 'simplebar-react';
import type { StrictModifiers } from '@popperjs/core';
import { StyledComponent } from 'styled-components';
import type { TextareaHTMLAttributes } from 'react';
import { ThemeProps } from 'styled-components';
import { TippyProps } from '@tippyjs/react';

export declare type AccessibleIcon = IconDefinition | DpCustomIconsId;

export declare type AccessibleIconButton = {
    icon: AccessibleIcon | AccessibleIconProps;
};

export declare interface AccessibleIconProps extends IconPropsBase {
    icon: AccessibleIcon;
}

/**
 * @public
 */
export declare type ActiveItem<T> = DrilldownValueType<T> | DrilldownCreateNew | null;

export declare type AllButtonIntents = "primary" | "secondary" | "tertiary" | "minimal" | "minimalUnderline" | "minimalBlock";

/**
 * Anchor component styled like a button
 * @public
 */
export declare const AnchorButton: StyledComponent<React_2.ForwardRefExoticComponent<HTMLAnchorButtonProps & CommonButtonProps & {
disabled?: boolean;
} & React_2.RefAttributes<HTMLAnchorElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare type AnchorButtonProps = HTMLAnchorButtonProps & CommonButtonProps & {
    disabled?: boolean;
};

/**
 * @public
 */
export declare type AnyIcon = IconDefinition | DpCustomIconsId | SVGRIconType | JSX.Element | DazzleIconType;

/**
 * @public
 */
export declare function AppCard({ children, backgroundColor, hasCheckBox, onChange, checked, topRightHoverElement, }: AppCardProps): React_2.JSX.Element;

/**
 * @public
 */
export declare const AppCardComponents: {
    IdTitle: StyledComponent<"span", DefaultTheme, {}, never>;
    AppCardInfo: StyledComponent<"span", DefaultTheme, TProps & {
    as: string;
    type: string;
    overflow: string;
    }, "type" | "overflow" | "as">;
    SubjectLine: StyledComponent<"span", DefaultTheme, TProps & {
    as: string;
    type: string;
    overflow: string;
    }, "type" | "overflow" | "as">;
    ProfileDetailsEmail: StyledComponent<"span", DefaultTheme, TProps & {
    as: string;
    type: string;
    overflow: string;
    }, "type" | "overflow" | "as">;
    ProfileDetailsName: StyledComponent<"span", DefaultTheme, TProps & {
    as: string;
    type: string;
    overflow: string;
    }, "type" | "overflow" | "as">;
    ProfileDetailsWrapper: StyledComponent<"div", DefaultTheme, StackProps, never>;
};

/**
 * @public
 */
export declare interface AppCardProps {
    children: ReactNode;
    backgroundColor?: string;
    hasCheckBox?: boolean;
    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
    checked?: boolean;
    topRightHoverElement?: ReactNode;
}

/**
 * @public
 */
export declare function AppCardSimple({ children, noBorder, noHover, ...props }: AppCardSimpleProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface AppCardSimpleProps {
    children: ReactNode;
    noBorder?: boolean;
    onMouseOver?: () => void;
    onMouseOut?: () => void;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
    onClick?: (e: MouseEvent_2) => void;
    onContextMenu?: (e: MouseEvent_2) => void;
    noHover?: boolean;
    padding?: number | string;
    className?: string;
}

/**
 * @public
 */
export declare const AppSidebar: {
    Container: ForwardRefExoticComponent<AppSidebarContainerProps & RefAttributes<HTMLElement>>;
    Header: ({ title, titleControls, controls, containerStyles, titleLevel, }: AppSidebarHeaderProps) => JSX_2.Element;
    SubHeader: ({ title, controls, }: {
        title: string | ReactNode;
        controls?: ReactNode;
    }) => JSX_2.Element;
    InputWrapper: ({ noBorder, children }: AppSidebarInputWrapperProps) => JSX_2.Element;
    Body: ({ children, borderRight, isScrollEnabled, }: {
        children?: ReactNode;
        borderRight?: boolean;
        isScrollEnabled?: boolean;
    }) => JSX_2.Element;
    Footer: ({ children, padding }: {
        children?: ReactNode;
        padding?: string;
    }) => JSX_2.Element;
};

/**
 * @public
 */
export declare interface AppSidebarContainerProps {
    children: ReactNode;
    styles?: CSSProperties;
    /** Accessible label for the navigation landmark. Defaults to "Sidebar". */
    navigationLabel?: string;
}

/**
 * @public
 */
export declare interface AppSidebarHeaderProps {
    title: string | ReactNode;
    titleControls?: ReactNode;
    controls?: ReactNode;
    containerStyles?: CSSProperties;
    /** HTML heading level for the title. Defaults to "h2". */
    titleLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
}

/**
 * @public
 */
export declare interface AppSidebarInputWrapperProps {
    children?: ReactNode;
    noBorder?: boolean;
}

/**
 * @public
 */
export declare const AttachmentTag: React_2.ForwardRefExoticComponent<AttachmentTagProps & React_2.RefAttributes<HTMLAnchorElement>>;

/**
 * @public
 */
export declare interface AttachmentTagProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
    filename: string;
    fileSize: number;
    icon: AnyIcon;
    onClose?: (e: MouseEvent_2<HTMLButtonElement>) => void;
    withClose?: boolean;
    maxWidth?: string;
    variant?: "default" | "light";
    isLoading?: boolean;
    /** Accessible label for the remove button. Defaults to `Remove {filename}`. */
    removeLabel?: string;
    /** Accessible label for the upload spinner. Defaults to "Uploading attachment". */
    uploadingLabel?: string;
    /** Visually-hidden hint that the link opens in a new tab. Defaults to "(opens in new tab)". */
    newTabLabel?: string;
}

/**
 * @public
 */
export declare type AttachQuickActions<T extends Record<string, unknown>> = (QuickActionProps & T) | (WithoutQuickActionProps & T);

/**
 * @public
 */
export declare const Avatar: React_2.MemoExoticComponent<({ imageStyles, backupIcon, name, size, themeColor, onlineStatus, showOnlineBadge, showTooltip, rounded, liteAgent, ...props }: AvatarProps) => React_2.JSX.Element>;

/**
 * @public
 */
export declare const AvatarButton: StyledComponent<React_2.ForwardRefExoticComponent<AvatarButtonProps & React_2.RefAttributes<HTMLButtonElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare type AvatarButtonProps = IconButtonProps & {
    avatarSize: AvatarSize;
};

/**
 * @public
 */
export declare const AvatarGroup: ({ avatarArray, displayNumber, size }: AvatarGroupProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare type AvatarGroupArray = Extract<AvatarProps, {
    imageUrl?: string | null;
}>[];

/**
 * @public
 */
export declare const AvatarGroupButton: StyledComponent<React_2.ForwardRefExoticComponent<IconButtonProps & React_2.RefAttributes<HTMLButtonElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare const AvatarGroupOverLap: ({ avatarArray, displayNumber, size, overlapBackgroundColor, withTooltip, overflowPadding, }: AvatarGroupProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare interface AvatarGroupProps {
    avatarArray: AvatarGroupArray;
    displayNumber?: number;
    size?: AvatarSize;
    overlapBackgroundColor?: ThemeColorKey;
    withTooltip?: boolean;
    overflowPadding?: string;
}

/**
 * @public
 */
export declare type AvatarOnlineStatus = "online" | "offline" | "busy" | "archived";

/**
 * @public
 */
export declare type AvatarProps = (EmojiAvatarProps | FaIconAvatarProps | ImageAvatarProps) & BaseAvatarProps;

/**
 * @public
 */
export declare type AvatarSize = 14 | 15 | 18 | 20 | 22 | 24 | 26 | 28 | 32 | 34 | 40 | 48 | 56 | 72 | 100 | 120;

/**
 * @public
 */
export declare function Badge({ children, count, showZero, color, max, textColor, className, badgeLabel, }: BadgeProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface BadgeProps {
    children: ReactNode;
    count?: number;
    color?: ThemeColorKey;
    max?: number;
    showZero?: boolean;
    textColor?: ThemeColorKey;
    className?: string;
    /**
     * Accessible label for the count badge. When provided, the badge is exposed
     * as a meaningful element with this string as its accessible name.
     *
     * When omitted, the badge defaults to a label of the form
     * `"{count} notifications"` (or `"{max}+ notifications"` when the count
     * exceeds `max`).
     *
     * Pass `null` to suppress the label entirely (aria-hidden). Use this only
     * when the count is already announced via adjacent text.
     */
    badgeLabel?: string | null;
}

/**
 * @public
 */
export declare interface BaseAvatarProps {
    backupIcon?: AnyIcon;
    name?: string;
    size?: AvatarSize;
    imageStyles?: CSSProperties;
    themeColor?: LabelColorKeys;
    showOnlineBadge?: boolean;
    onlineStatus?: AvatarOnlineStatus;
    showTooltip?: boolean;
    liteAgent?: boolean;
    /**
     * Sets border radius to 50% - defaults to true
     */
    rounded?: boolean;
}

/**
 * @public
 */
export declare const brandColors: {
    facebook: string;
    linkedIn: string;
    twitter: string;
    whatsapp: string;
    skype: string;
    telegram: string;
    signal: string;
    snapChat: string;
    viber: string;
    line: string;
    weChat: string;
};

/**
 * Button
 * @public
 */
export declare const Button: StyledComponent<React_2.ForwardRefExoticComponent<AttachQuickActions<ButtonProps> & React_2.RefAttributes<HTMLButtonElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare const ButtonGroup: StyledComponent<"div", DefaultTheme, ButtonGroupProps, never>;

/**
 * @public
 */
export declare type ButtonGroupProps = {
    quickActions?: boolean;
};

/**
 * @public
 */
export declare type ButtonIntent = Exclude<AllButtonIntents, "minimalBlock">;

/**
 * @public
 */
export declare type ButtonProps = HTMLButtonProps & Omit<CommonButtonProps, "intent"> & {
    intent?: ButtonIntent;
};

/**
 * @public
 */
export declare type ButtonSize = "tiny" | "small" | "normal" | "large" | "xlarge";

/**
 * @public
 */
export declare function CardKanban({ children, size, isSelected, isNew, isLoading, onChange, }: CardKanbanProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface CardKanbanProps {
    children: ReactNode;
    size: CardSizes;
    isSelected?: boolean;
    isNew?: boolean;
    isLoading?: boolean;
    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
}

/**
 * @public
 */
export declare type CardSizes = "small" | "medium" | "large";

/**
 *
 * @public
 */
export declare function CCUserTag({ displayName, avatar, email, onClose, closeIcon, avatarBackupIcon, removeLabel, }: CCUserTagProps): React_2.JSX.Element;

/**
 *
 * @public
 */
export declare interface CCUserTagProps {
    displayName: string | null | undefined;
    email?: string | null;
    avatar?: Partial<AvatarProps>;
    onClose?: () => void;
    closeIcon: AnyIcon;
    avatarBackupIcon: AnyIcon;
    /** Accessible label for the remove button. Provide a translated string for
     * i18n. Defaults to `Remove {displayName | email | "user"}`. */
    removeLabel?: string;
}

/**
 * @public
 */
export declare const Checkbox: ({ label, labelIsPrefix, id, size, checked, containerStyle, labelStyle, indeterminate, labelProps, disabled, isDisplayOnly, error, withSelection, ...rest }: CheckboxProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
    size?: number;
    containerStyle?: CSSProperties;
    labelStyle?: CSSProperties;
    indeterminate?: boolean;
    error?: boolean;
    label?: ReactNode;
    labelIsPrefix?: boolean;
    labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
    /** Don't render the hidden input (which blocks click events).
     * Useful when rendering a "fake" checkbox eg. as a Dropdown item */
    isDisplayOnly?: boolean;
    withSelection?: boolean;
}

/**
 * @public
 */
export declare const Code: StyledComponent<"code", DefaultTheme, {}, never>;

/**
 * @public
 * ### A helper function for getting a color in styled-components
 * Example
 * ```
 * css`
 *     background: $(color("red100")};
 *`
 *```
 *
 * A function can be passed in which will use the styled components props to calculate the color
 *
 * Example
 * ```
 * css<{test:boolean}>`
 *     background: ${color(({test})=> test ? "red100": "grey100")};
 * `
 * ```
 *
 * A second param can be passed to give a default value incase the first param is `undefined | null | void | false`
 *
 * Example
 * ```
 * css<{test?:boolean; colorKey?:ThemeColorKey}>`
 *     background: $(color(colorKey, "red100")};
 *     border-color: ${color(({test})=> test && "red100", "grey100")};
 * `
 * ```
 */
export declare const color: <T extends ThemeProps<DefaultTheme>>(colorPicker: keyof ThemeColors | ((props: T) => ThemeColorKey | undefined | null | void | false) | null | undefined, defaultColor?: keyof ThemeColors | undefined) => (props: T) => ((string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen" | "ActiveBorder" | "ActiveCaption" | "AppWorkspace" | "Background" | "ButtonFace" | "ButtonHighlight" | "ButtonShadow" | "ButtonText" | "CaptionText" | "GrayText" | "Highlight" | "HighlightText" | "InactiveBorder" | "InactiveCaption" | "InactiveCaptionText" | "InfoBackground" | "InfoText" | "Menu" | "MenuText" | "Scrollbar" | "ThreeDDarkShadow" | "ThreeDFace" | "ThreeDHighlight" | "ThreeDLightShadow" | "ThreeDShadow" | "Window" | "WindowFrame" | "WindowText" | "currentcolor") | undefined;

/**
 * @public
 */
export declare type ColorProps<T extends ThemeProps<DefaultTheme>> = [
colorPicker: ThemeColorKey | undefined | null | ((props: T) => ThemeColorKey | undefined | null | void | false),
defaultColor?: ThemeColorKey
];

/**
 * @public
 */
export declare interface CommonButtonProps {
    /** default "primary" */
    intent?: AllButtonIntents;
    /** take up the full width of a container - default false */
    fill?: boolean;
    /** default false */
    danger?: boolean;
    /** default "left" */
    alignText?: React.CSSProperties["textAlign"];
    /** the label node */
    text?: ReactNode;
    /** default "normal" */
    size?: ButtonSize;
    /** An icon that will appear on the left, or the middle for icon buttons */
    icon?: AnyIcon | IconProps | JSX.Element | null;
    /** An icon that will appear on the right */
    rightIcon?: AnyIcon | IconProps | JSX.Element | null;
    /** Render a loading spinner without change the size of the button */
    loading?: boolean;
    /** Show active style - same style as when pressing down on a button */
    active?: boolean;
    /**
     * @deprecated use intent prop / For buttons with no styling eg Add+ text buttons and icon buttons
     */
    minimal?: boolean;
    /**
     * @deprecated use intent prop / Remove the underline styling that minimal button has
     */
    noMinimalUnderline?: boolean;
    /** Set size of icon 10px */
    iconSubsection?: boolean;
}

/**
 * @public
 */
export declare const CreateNewOption: ({ text, icon, onClick, onMouseEnter, resetButton, iconColor, active, }: CreateNewOptionProps) => JSX.Element;

/**
 * @public
 */
export declare interface CreateNewOptionProps {
    text?: ReactNode;
    icon: AnyIcon;
    onClick: () => void;
    onMouseEnter?: (e: React_2.MouseEvent) => void;
    resetButton?: boolean;
    iconColor?: ThemeColorKey;
    active: boolean;
}

declare type CssColor = Exclude<React.CSSProperties["color"], undefined>;

/**
 * @public
 */
export declare const DatePickerInputWithDisplay: StyledComponent<React_2.ForwardRefExoticComponent<DatePickerInputWithDisplayProps & React_2.RefAttributes<HTMLInputElement>>, DefaultTheme, {
isVisibleRightIcon?: boolean;
error?: boolean;
}, never>;

/**
 * @public
 */
export declare interface DatePickerInputWithDisplayProps extends Omit<InputProps, "variant"> {
    onClickInputGroup?: MouseEventHandler<HTMLDivElement>;
    isDatePickerOpen: boolean;
}

/**
 * @public
 */
export declare const dazzleIcons: {
    "address-card": string;
    "align-justify": string;
    "align-left": string;
    "align-right": string;
    "arrow-circle-down": string;
    "arrow-circle-left": string;
    "arrow-circle-right": string;
    "arrow-circle-up": string;
    "arrow-down-to-square": string;
    "arrow-down": string;
    "arrow-left": string;
    "arrow-narrow-bottom-alignment": string;
    "arrow-narrow-down": string;
    "arrow-narrow-left-alignment": string;
    "arrow-narrow-right-move": string;
    "arrow-narrow-up-move": string;
    "arrow-narrow-up": string;
    "arrow-right": string;
    "arrow-sm-down": string;
    "arrow-sm-left": string;
    "arrow-sm-right": string;
    "arrow-sm-up": string;
    "arrow-up": string;
    backward: string;
    "badge-check": string;
    "bag-shopping": string;
    ban: string;
    bank: string;
    bell: string;
    bolt: string;
    "book-open": string;
    bookmark: string;
    "box-archive": string;
    "briefcase-alt-4": string;
    building: string;
    "cake-christmas": string;
    calculator: string;
    calendar: string;
    camera: string;
    "cart-shopping": string;
    "chart-line-down": string;
    "chart-line-up": string;
    "chart-pie-simple": string;
    "chart-simple": string;
    check: string;
    "chevron-down-double": string;
    "chevron-down": string;
    "chevron-left-double": string;
    "chevron-left": string;
    "chevron-right-double": string;
    "chevron-right": string;
    "chevron-selector-vertical": string;
    "chevron-up-double": string;
    "chevron-up": string;
    "circle-check": string;
    "circle-dollar": string;
    "circle-dots-horizontal": string;
    "circle-exclamation": string;
    "circle-information": string;
    "circle-minus": string;
    "circle-pause": string;
    "circle-play": string;
    "circle-plus": string;
    "circle-question": string;
    "circle-stop": string;
    "circle-user": string;
    "circle-xmark": string;
    "circle-yen": string;
    "clipboard-list-alt": string;
    clipboard: string;
    clock: string;
    clone: string;
    "cloud-arrow-down": string;
    "cloud-up-arrow": string;
    cloud: string;
    code: string;
    "credit-card": string;
    "cube-alt-1": string;
    cube: string;
    cursor: string;
    "delete-left": string;
    "desktop-computer": string;
    "dots-horizontal": string;
    "dots-vertical": string;
    "english-to-chinese": string;
    "euro-circle": string;
    "expand-alt": string;
    "eye-slash": string;
    eye: string;
    "face-frown": string;
    "face-smile": string;
    "file-alt": string;
    "file-arrow-down": string;
    "file-arrow-left": string;
    "file-chart-column": string;
    "file-copy": string;
    "file-minus": string;
    "file-plus": string;
    "file-search-alt-1": string;
    file: string;
    film: string;
    filter: string;
    fingerprint: string;
    flag: string;
    "flask-round-potion": string;
    "folder-arrow-down": string;
    "folder-minus": string;
    "folder-plus": string;
    folder: string;
    "gear-alt": string;
    gift: string;
    "globe-alt": string;
    "graduation-hat": string;
    "grid-plus": string;
    grid: string;
    "grip-lines": string;
    hashtag: string;
    "heart-alt": string;
    "house-floor": string;
    "image-square": string;
    "inbox-arrow-down": string;
    inbox: string;
    "key-alt": string;
    "life-ring": string;
    "lightbulb-alt": string;
    "link-alt-1": string;
    "location-pin": string;
    "lock-alt": string;
    "mail-open": string;
    mail: string;
    map: string;
    "menu-alt-1": string;
    menu: string;
    "message-circle-dots": string;
    "message-square-chat": string;
    "message-square-dots": string;
    "message-square-lines-alt": string;
    microchip: string;
    "microphone-alt-1": string;
    minus: string;
    mobile: string;
    "money-bill": string;
    "money-stack": string;
    moon: string;
    music: string;
    paperclip: string;
    "pen-square": string;
    pen: string;
    percent: string;
    "phone-alt": string;
    "phone-incoming-alt": string;
    "phone-outgoing-alt": string;
    "phone-xmark-alt": string;
    "plus-large": string;
    plus: string;
    "pound-circle": string;
    "presentation-chart-alt": string;
    "presentation-line": string;
    printer: string;
    "rectangle-terminal": string;
    "refresh-ccw-alt": string;
    reply: string;
    rss: string;
    "rupee-sign": string;
    "scale-balanced": string;
    scissors: string;
    "screen-users": string;
    "search-minus": string;
    "search-plus": string;
    search: string;
    "send-alt": string;
    server: string;
    "shield-check": string;
    "shield-exclamation": string;
    "sliders-up": string;
    "sort-amount-down": string;
    "sort-amount-up": string;
    star: string;
    stars: string;
    sun: string;
    swatchbook: string;
    "switch-horizontal": string;
    "switch-vertical": string;
    table: string;
    tablet: string;
    tag: string;
    "ticket-simple": string;
    trash: string;
    "triangle-exclamation": string;
    truck: string;
    "unlock-alt": string;
    "user-minus": string;
    "user-plus-alt-1": string;
    user: string;
    users: string;
    video: string;
    "volume-max": string;
    "volume-xmark": string;
    wifi: string;
    xmark: string;
};

/**
 * @public
 */
export declare type DazzleIconType = `outline-dazzle-${keyof typeof dazzleIcons}` | `solid-dazzle-${keyof typeof dazzleIcons}`;

/**
 * @public
 */
export declare interface DeskproTheme {
    type: "light" | "dark";
    colors: ThemeColors;
    urgencyColors: UrgencyColors;
    standardLabelColors: StandardLabelColors;
    standardLabelColorsKeys: LabelColorKeys[];
    fonts: ThemeFonts;
    layers: Layers;
    dev: {
        placeholderBgColor: React.CSSProperties["backgroundColor"];
    };
}

/**
 * Dialog component
 * @public
 * ```tsx
 * <Dialog isOpen={isOpen} onRequestClose={() => setIsOpen(false)}>
 *  <DialogHeader color="brandShade" title="Hello" icon={faHourglass} />
 *  <div>Content</div>
 * </Dialog>
 * ```
 */
export declare function Dialog({ isOpen, canClickOutsideClose, canEscClose, children, hasBackdrop, onRequestClose, autofocus, size, zIndex, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: DialogProps): JSX.Element;

/**
 * @public
 */
export declare const DialogFooter: StyledComponent<"div", DefaultTheme, StackProps & {
align: string;
justify: string;
gap: number;
}, "align" | "justify" | "gap">;

/**
 * @public
 */
export declare function DialogHeader({ title, icon, color }: DialogHeaderProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface DialogHeaderProps {
    title: ReactNode;
    icon?: AnyIcon;
    color?: LabelColorKeys;
}

/**
 * @public
 */
export declare interface DialogProps extends Omit<OverlayProps, "scrollable"> {
    size?: DialogSize;
    /** Accessible name for the dialog. Provide this (or `aria-labelledby`) so
     * screen readers announce what the dialog is. */
    "aria-label"?: string;
    /** Id of the element (e.g. the dialog title) that labels the dialog. */
    "aria-labelledby"?: string;
    /** Id of the element that describes the dialog. */
    "aria-describedby"?: string;
}

export declare type DialogSize = "small" | "medium" | "large" | "xLarge" | "xxLarge" | "fullPage" | "overlay";

export declare type DisplayItem = "perPageText" | "perPageSelect" | "pageSelect" | "total" | "uniqueItems" | "navArrows";

/**
 * @public
 */
export declare const DivAsInput: StyledComponent<React_2.ForwardRefExoticComponent<DivAsInputProps & React_2.RefAttributes<HTMLDivElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface DivAsInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "placeholder"> {
    leftIcon?: AnyIcon | IconProps | JSX.Element | null;
    rightIcon?: AnyIcon | IconProps | JSX.Element | null;
    variant?: InputVariant;
    value?: ReactNode;
    placeholder?: ReactNode;
    required?: boolean;
    /** default medium */
    inputsize?: InputSize;
    error?: boolean;
    onClickInputGroup?: MouseEventHandler<HTMLDivElement>;
    disabled?: boolean;
    readOnly?: boolean;
    hideBorder?: boolean;
}

/**
 * @public
 */
export declare const DivAsInputWithDisplay: StyledComponent<React_2.ForwardRefExoticComponent<DivAsInputWithDisplayProps & React_2.RefAttributes<HTMLDivElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface DivAsInputWithDisplayProps extends HTMLAttributes<HTMLDivElement> {
    leftIcon?: AnyIcon | IconProps | JSX.Element | null;
    rightIcon?: AnyIcon | IconProps | JSX.Element | null;
    variant?: InputVariant;
    value?: ReactNode;
    placeholder?: string;
    /** default medium */
    inputsize?: InputSize;
    error?: boolean;
    onClickInputGroup?: MouseEventHandler<HTMLDivElement>;
    leftAlignLeftIcon?: boolean;
    isVisibleRightIcon?: boolean;
    disabled?: boolean;
    readOnly?: boolean;
    required?: boolean;
}

/**
 * @public
 */
export declare const Divider: StyledComponent<"div", DefaultTheme, DividerProps, never>;

/**
 * @public
 */
export declare interface DividerProps {
    vertical?: boolean;
    themeColor?: ThemeColorKey;
}

export declare type DpCustomIconsId = "active-call" | "admin" | "advanced-filter" | "agent" | "api" | "approval" | "apps-zapier" | "archived" | "arrow" | "awaiting-user" | "check" | "column-width" | "community" | "crown" | "deskpro" | "dot" | "drag" | "dual-card" | "dual-table" | "dual-view" | "email-primary" | "enter" | "export-alt" | "export" | "follow-up-new" | "follow-up" | "glossary" | "google-analytics" | "grip" | "hang-up" | "helping-hand" | "history" | "im-outline" | "im-send" | "im" | "inbound-call" | "kanban-view" | "level-down" | "linked-ticket-new" | "linked-ticket" | "live" | "location-arrow" | "merge" | "merge2" | "missed-call" | "mobile-rotate" | "organization-circle" | "outbound-call" | "read" | "record" | "sent" | "sip-address" | "sort" | "transfer-queue" | "triangle" | "user-edit" | "version-history" | "warm-add" | "warm-transfer" | "webhook" | "workspaces";

/**
 * Wraps around any child to upgrade it to a drilldown component. If used in the
 * render props style you get access to some of the internal state of the drilldown
 * including the input props used for search
 * @public
 * @example
 * ```
 * const options = [
 *  {type: "header", label: "Header"},
 *  {type: "value", key: "1", label: "Value"}
 * ];
 *
 * function handleOnSelect(value: DrilldownValueType) {}
 *
 * // as children
 * <Drilldown options={options} onSelectOption={handleOnSelect}>
 *  <button>click here</button>
 * </Drilldown>
 *
 * // as render props with controlled input
 * <Drilldown options={options} onSelectOption={handleOnSelect}>
 *  {({searchInputProps}) =>
 *    <input {...searchInputProps}/>
 *  }
 * </Drilldown>
 * ```
 */
export declare function Drilldown<T, TargetRef extends HTMLElement>({ type, children, options, inputValue, searchPlaceholder, placement, showInternalSearch, isLoading, usePortal, closeOnSelect, isOpen: isOpenProp, renderCreateNewOption, onCreateNewOption, hideIcons, hidePaths, iconColumnWidth, containerWidth, containerHeight, onSelectOption, onInputChange, onFetchMore, onClear, onClose, onOpen, onInputReturn, tabProps, disabled, fetchMoreText, autoscrollText, emptySearchResultsText, externalLinkIcon, selectedIcon, layer, animationDuration, onDrilldown, onDrilldownAnimationEnd, onDrillupAnimationEnd, backText, backLabel, clearLabel, expandLabel, filterPredicate, includeParentsInSearch, }: DrilldownProps<T, TargetRef>): JSX.Element;

export declare interface DrilldownBaseProps<T, TargetRef extends HTMLElement> {
    /** Event handler for when an option is selected */
    onSelectOption?: (item: DrilldownValueType<T>, keyPathToSelectedItem: string[]) => void;
    /** Event handler that it called when triggering a drilldown, before animation is run */
    onDrilldown?: (item: DrilldownValueType<T>, pathToSelectedItem: PathToSelectedItem) => Promise<void>;
    /** Control over whether the drilldown is open - default uncontrolled */
    isOpen?: boolean;
    /** PopperJS placement option. Defaults to "bottom-start" */
    placement?: Placement;
    /** Wether to render the drilldown in a portal. Default true */
    usePortal?: boolean;
    /** The input value to render in the search box */
    inputValue?: string;
    /** Show a loading indicator */
    isLoading?: boolean;
    /** Show an internal search input for filtering options. The Drilldown does not
     * do any filtering itself
     */
    showInternalSearch?: boolean;
    /** Whether to disable the drilldown */
    disabled?: boolean;
    /** Whether subitems are rendered in an expanding or non-expanding style */
    expandingDrillDown?: boolean;
    /** Placeholder for search input box */
    searchPlaceholder?: string;
    /** Whether the drilldown should close on selections. default true */
    closeOnSelect?: boolean;
    /** Whether to hide item's icon for the whole list */
    hideIcons?: boolean;
    /** Whether to hide item's path when searching - useful when the parent is a special value */
    hidePaths?: boolean;
    /** The width of the column in which icons are rendered */
    iconColumnWidth?: number;
    /** Add in custom width to the drilldown options container */
    containerWidth?: number;
    /** Add in custom height to the drilldown options container */
    containerHeight?: number;
    /** Event handler for when the user requests more options.
     *  For use with paginated options. Passes the path as an argument, which can be used to distinguish which level of the drilldown needs to fetchMore */
    onFetchMore?: (path: PathToSelectedItem) => void;
    /** Event handler for when the drilldown closes */
    onClose?: () => void;
    /** Event handler for when the drilldown opens */
    onOpen?: () => void;
    /** The target for the drilldown. Either a normal ReactNode or a render
     * prop with additional state from the drilldown */
    children: ((props: DrilldownTargetProps<TargetRef>) => JSX.Element) | JSX.Element;
    /** Render the create new option - no default implementation and renders as a
     * sticky footer above the normal sticky footer
     */
    onCreateNewOption?: () => void;
    renderCreateNewOption?: (active: boolean, onSelect: () => void) => ReactNode;
    /** Props for rendering tabs within the drilldown */
    tabProps?: DrilldownTabProps;
    /** The text to show for the fetch more button */
    fetchMoreText: ReactNode;
    /** The text to show for the autoscroll button */
    autoscrollText: ReactNode;
    /** The text to show for the autoscroll button */
    emptySearchResultsText: ReactNode;
    externalLinkIcon: AnyIcon;
    selectedIcon: AnyIcon;
    /** Event handler that returns input value after enter has been pressed */
    onInputReturn?: (inputValue: string) => void;
    /** The zIndex Layer that the drilldown will be rendered at. Defaults to: popover */
    layer?: keyof Layers;
    /** the time it takes to animate sliding between lists. Defaults to 0.3s */
    animationDuration?: number;
    /** Event handler that it called when triggering a drillup, after animation was run */
    onDrillupAnimationEnd?: (pathToSelectedItem: PathToSelectedItem) => Promise<void>;
    /** The text to show for the back button */
    backText: ReactNode;
    /** Accessible label for the back button. Defaults to `backText` (when it is a
     * string), then "Go back". Provide a translated string for i18n. */
    backLabel?: string;
    /** Accessible label for the search "clear" button. Provide a translated
     * string for i18n. Defaults to "Clear". */
    clearLabel?: string;
    /** Accessible label for an item's "expand subitems" button. Provide a
     * translated string for i18n. Defaults to "Expand". */
    expandLabel?: string;
    includeParentsInSearch?: boolean;
}

/**
 * @public
 */
export declare const DrilldownContainer: StyledComponent<ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>, DefaultTheme, {
"data-dp-name": string;
"data-dp-ident"?: string;
} & {
containerWidth?: number;
containerHeight?: number;
layer: keyof Layers;
}, keyof {
"data-dp-name": string;
"data-dp-ident"?: string;
}>;

/**
 * @public
 * Placeholder for the CreateNew option
 */
export declare interface DrilldownCreateNew {
    type: "createNew";
}

/**
 * @public
 */
export declare const DrilldownCreateNewOption: ({ text, icon, onClick, resetButton, iconColor, active, }: DrilldownCreateNewOptionProps) => JSX.Element;

/**
 * @public
 */
export declare interface DrilldownCreateNewOptionProps {
    text?: ReactNode;
    icon: AnyIcon;
    onClick: () => void;
    resetButton?: boolean;
    iconColor?: ThemeColorKey;
    active: boolean;
}

/**
 * @public
 */
export declare interface DrilldownDivider {
    type: "divider";
}

/**
 * @public
 */
export declare interface DrilldownDividerFlat extends DrilldownDivider {
    /** Unique identifier for the parent option */
    parentKey: string | undefined;
}

/**
 * @public
 */
export declare const DrilldownDividerItem: StyledComponent<"div", DefaultTheme, {}, never>;

/**
 * @public
 * Pass in a component to render if the list is empty.
 * This will usually be a NonIdeal state, see storybook examples
 */
export declare interface DrilldownEmptyList {
    type: "emptyList";
    component: ReactNode;
}

/**
 * @public
 */
export declare interface DrilldownEmptyListFlat extends DrilldownEmptyList {
    /** Unique identifier for the parent option */
    parentKey: string | undefined;
}

/**
 * @public
 */
export declare interface DrilldownFlatProps<T, TargetRef extends HTMLElement> extends DrilldownBaseProps<T, TargetRef> {
    /** Expects options to be a flat array of type DrilldownItemFlatType<T>[]. This is easier to work with if your response data is also returned as a flat array  */
    type: "flat";
    /** List of options to render */
    options: DrilldownItemFlatType<T>[];
    /** Event handler for when the "active" item changes via keyboard events */
    onActiveOptionChange?: (item: DrilldownValueFlatType<T> | null) => void;
    /** Event handler for when the "clear" event is triggered for the search input */
    onClear?: () => void;
    /** Event handler for when an option is selected */
    /** Event handler for when the search input value changes */
    onInputChange?: (input: string, pathToSelectedItem: PathToSelectedItem) => void;
    /** Predicate for filtering items */
    filterPredicate?: (item: DrilldownItemTreeType<T>, input: string) => boolean;
    /** Event handler that it called when triggering a drilldown, after animation was run */
    onDrilldownAnimationEnd?: (item: DrilldownValueFlatType<T> | undefined, pathToSelectedItem: PathToSelectedItem) => Promise<void>;
}

/**
 * @public
 */
export declare interface DrilldownHeaderFlatType extends DrilldownHeaderType {
    /** Unique identifier for the parent option */
    parentKey: string | undefined;
}

/**
 * @public
 */
export declare const DrilldownHeaderItem: StyledComponent<"div", DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface DrilldownHeaderType {
    type: "header";
    label: ReactNode;
    childLabels?: string[];
}

/**
 * @public
 */
export declare const DrilldownIcon: StyledComponent<"div", DefaultTheme, {
iconColumnWidth?: number;
}, never>;

/**
 * @public
 */
export declare const DrilldownInternalSearchInputContainer: StyledComponent<"div", DefaultTheme, {}, never>;

/**
 * @public
 */
export declare function DrilldownItem<T = unknown>({ value, active, onSelect, onSelectIcon, onClickSubItem, hideIcons, iconColumnWidth, selectedIcon, externalLinkIcon, handleDrilldown, dataKey, subItems, isSearchResult, inputValue, flatItemTree, hidePaths, hasSelectedItems, hasExpandableItems, hasItemsWithIcons, setActiveItem, expandLabel, }: DrilldownItemProps<T>): JSX.Element;

/**
 * @public
 */
export declare type DrilldownItemFlatType<T = unknown> = DrilldownValueFlatType<T> | DrilldownHeaderFlatType | DrilldownDividerFlat | DrilldownStickyHeaderFlat<T> | DrilldownStickyFooterFlat<T> | DrilldownEmptyListFlat | DrilldownLoadingFlat;

/**
 * @public
 */
export declare const DrilldownItemLayout: StyledComponent<"a", DefaultTheme, DrilldownItemLayoutProps, never>;

export declare interface DrilldownItemLayoutProps {
    disabled?: boolean;
    active?: boolean;
    paddingLeft?: boolean;
}

/**
 * @public
 */
export declare interface DrilldownItemMeta {
    /** Whether to render as an "active" element */
    active: boolean;
    /** The current search input */
    input: string;
}

/**
 * @public
 */
export declare interface DrilldownItemProps<T = unknown> {
    onSelect?: (value: DrilldownValueType<T>) => void;
    onSelectIcon?: (value: T) => void;
    onClickSubItem?: (value: DrilldownValueType<T>) => void;
    value: DrilldownValueType<T>;
    meta: DrilldownItemMeta;
    customLabelRender?: ReactNode;
    active?: boolean;
    hideIcons?: boolean;
    iconColumnWidth?: number;
    externalLinkIcon: AnyIcon;
    selectedIcon: AnyIcon;
    handleDrilldown: (item: DrilldownValueType<T>) => Promise<void>;
    dataKey: string;
    subItems: DrilldownItemType<T>[] | undefined;
    isSearchResult?: boolean;
    inputValue?: string;
    flatItemTree?: HierarchyNode<DrilldownValueFlatType<T>>;
    hidePaths?: boolean;
    hasSelectedItems: boolean;
    hasExpandableItems: boolean;
    hasItemsWithIcons: boolean;
    setActiveItem?: (item: ActiveItem<T>) => void;
    /** Accessible label for the "expand subitems" button. Defaults to "Expand". */
    expandLabel?: string;
}

/**
 * @public
 */
export declare type DrilldownItemTreeType<T = unknown> = DrilldownValueTreeType<T> | DrilldownHeaderType | DrilldownDivider | DrilldownStickyHeader<T> | DrilldownStickyFooter<T> | DrilldownEmptyList | DrilldownLoading;

/**
 * @public
 */
export declare type DrilldownItemType<T = unknown> = DrilldownItemTreeType<T> | DrilldownItemFlatType<T>;

/**
 * @public
 */
export declare const DrilldownLabel: StyledComponent<"div", DefaultTheme, {
selected?: boolean;
}, never>;

/**
 * @public
 * Pass in a component to render if the list is loading.
 * This will usually be a <Spinner />, see storybook examples
 */
export declare interface DrilldownLoading {
    type: "loading";
    component?: ReactNode;
}

/**
 * @public
 */
export declare interface DrilldownLoadingFlat extends DrilldownLoading {
    /** Unique identifier for the parent option */
    parentKey: string | undefined;
}

/**
 * @public
 */
export declare type DrilldownProps<T, TargetRef extends HTMLElement> = DrilldownTreeProps<T, TargetRef> | DrilldownFlatProps<T, TargetRef>;

/**
 * @public
 */
export declare function drilldownRenderOptions<T = string>({ options, handleSelectOption, handleDrilldown, activeItem, selectedIcon, externalLinkIcon, hideIcons, iconColumnWidth, hasSelectedItems, hasExpandableItems, hasItemsWithIcons, setActiveItem, expandLabel, }: DrilldownRenderOptionsProps<T>): (value: DrilldownItemType<T>, index: number, array: DrilldownItemType<T>[]) => ReactNode;

/**
 * @public
 */
export declare type DrilldownRenderOptionsProps<T> = {
    options: DrilldownItemType<T>[];
    handleSelectOption: (value: DrilldownValueType<T>) => void;
    handleDrilldown: (item: DrilldownValueType<T>) => Promise<void>;
    activeItem: ActiveItem<T>;
    selectedIcon: AnyIcon;
    externalLinkIcon: AnyIcon;
    hideIcons?: boolean;
    iconColumnWidth?: number;
    hasSelectedItems: boolean;
    hasExpandableItems: boolean;
    hasItemsWithIcons: boolean;
    setActiveItem?: (item: ActiveItem<T>) => void;
    /** Accessible label for each item's "expand subitems" button. */
    expandLabel?: string;
};

/**
 * @public
 */
export declare const DrilldownResetButton: ({ onClick, buttonText, undoIcon, }: DrilldownResetButtonProps) => JSX.Element;

/**
 * @public
 */
export declare interface DrilldownResetButtonProps {
    onClick: () => void;
    buttonText: string;
    undoIcon: AnyIcon;
}

/**
 * @public
 * List of options to render as sticky options at the foot of any of the normal options
 */
export declare interface DrilldownStickyFooter<T> {
    type: "stickyFooter";
    options: DrilldownItemType<T>[];
}

/**
 * @public
 * List of options to render as sticky options at the foot of any of the normal options
 */
export declare interface DrilldownStickyFooterFlat<T> {
    type: "stickyFooter";
    options: DrilldownItemFlatType<T>[];
    /** Unique identifier for the parent option */
    parentKey: string | undefined;
}

/**
 * @public
 * List of options to render as sticky options at the foot of any of the normal options
 */
export declare interface DrilldownStickyFooterTree<T> {
    type: "stickyFooter";
    options: DrilldownItemTreeType<T>[];
}

/**
 * @public
 * List of options to render as sticky options at the head of any of the normal options
 */
export declare interface DrilldownStickyHeader<T> {
    type: "stickyHeader";
    options: DrilldownItemType<T>[];
}

/**
 * @public
 * List of options to render as sticky options at the head of any of the normal options
 */
export declare interface DrilldownStickyHeaderFlat<T> {
    type: "stickyHeader";
    options: DrilldownItemFlatType<T>[];
    /** Unique identifier for the parent option */
    parentKey: string | undefined;
}

/**
 * @public
 * List of options to render as sticky options at the head of any of the normal options
 */
export declare interface DrilldownStickyHeaderTree<T> {
    type: "stickyHeader";
    options: DrilldownItemTreeType<T>[];
}

/**
 * @public
 */
export declare interface DrilldownTabProps {
    tabs: TabBarItemType[];
    activeTabIndex: number;
    onTabChange: (index: number) => void;
}

/**
 * @public
 */
export declare interface DrilldownTargetProps<TargetRef extends HTMLElement> {
    targetProps: HTMLAttributes<HTMLElement>;
    targetRef: Ref<TargetRef>;
    inputProps: InputHTMLAttributes<HTMLInputElement>;
    inputRef: Ref<HTMLInputElement>;
    handleOnClear?: () => void;
    active: boolean;
}

/**
 * @public
 */
export declare interface DrilldownTreeProps<T, TargetRef extends HTMLElement> extends DrilldownBaseProps<T, TargetRef> {
    /** Expects options to be a flat array of type DrilldownItemTreeType<T>[] */
    type: "tree";
    /** List of options to render */
    options: DrilldownItemTreeType<T>[];
    /** Event handler for when the "active" item changes via keyboard events */
    onActiveOptionChange?: (item: DrilldownValueTreeType<T> | null) => void;
    /** Event handler for when the "clear" event is triggered for the search input */
    onClear?: () => void;
    /** Event handler for when an option is selected */
    /** Event handler for when the search input value changes */
    onInputChange?: (input: string, pathToSelectedItem: PathToSelectedItem) => void;
    /** Predicate for filtering items */
    filterPredicate?: (item: DrilldownItemTreeType<T>, input: string) => boolean;
    /** Event handler that it called when triggering a drilldown, after animation was run */
    onDrilldownAnimationEnd?: (item: DrilldownValueTreeType<T> | undefined, pathToSelectedItem: PathToSelectedItem) => Promise<void>;
}

/**
 * @public
 */
export declare const DrilldownTrigger: StyledComponent<"div", DefaultTheme, {}, never>;

/**
 * @public
 */
export declare type DrilldownType = "tree" | "flat";

export declare interface DrilldownValueBaseType<OriginalValue> {
    /** Unique identifier for the option */
    key: string;
    /** Text label for the option*/
    label: React_2.ReactNode;
    /** Discriminated union literal */
    type: "value";
    /** Show option as disabled*/
    disabled?: boolean;
    /** Description to render */
    description?: string;
    /** Icon to render */
    icon?: AnyIcon | IconProps | JSX.Element | null;
    /** Show option as selected  */
    selected?: boolean;
    /** Link to render - changes behavior to open link in new browser tab */
    href?: string;
    onClickIcon?: (value: unknown) => void;
    /** Callback fired on clicking the sub menu arrow icon **/
    onClickSubItem?: (value: unknown) => void;
    /** The underlying data related to the option, for the convenience of the user */
    value: OriginalValue;
    /** The default behaviour will only open submenu on clicking th right arrow icon, this will make the whole item
     * clickable, overriding the onSelect behaviour
     */
    openSubmenuOnSelect?: boolean;
    /** Callback fired to handle fetch more scrolling for sub items  */
    onFetchMoreSubItems?: () => void;
    /** Whether to show icon when a href is provided default is true */
    showHrefIcon?: boolean;
}

/**
 * @public
 */
export declare interface DrilldownValueFlatType<OriginalValue> extends DrilldownValueBaseType<OriginalValue> {
    /** Unique identifier for the parent option */
    parentKey: string | undefined;
}

/**
 * @public
 */
export declare interface DrilldownValueTreeType<OriginalValue> extends DrilldownValueBaseType<OriginalValue> {
    /** Sub options to render */
    subItems?: DrilldownItemTreeType<OriginalValue>[];
}

/**
 * @public
 */
export declare type DrilldownValueType<OriginalValue> = DrilldownValueTreeType<OriginalValue> | DrilldownValueFlatType<OriginalValue>;

/**
 * Wraps around any child to upgrade it to a dropdown component. If used in the
 * render props style you get access to some of the internal state of the dropdown
 * including the input props used for search
 * @public
 * @example
 * ```
 * const options = [
 *  {type: "header", label: "Header"},
 *  {type: "value", key: "1", label: "Value"}
 * ];
 *
 * function handleOnSelect(value: DropdownValueType) {}
 *
 * // as children
 * <Dropdown options={options} onSelectOption={handleOnSelect}>
 *  <button>click here</button>
 * </Dropdown>
 *
 * // as render props with controlled input
 * <Dropdown options={options} onSelectOption={handleOnSelect}>
 *  {({searchInputProps}) =>
 *    <input {...searchInputProps}/>
 *  }
 * </Dropdown>
 * ```
 */
export declare function Dropdown<T, TargetRef extends HTMLElement = any>({ children, options, stickyHeaderOptions, stickyFooterOptions, inputValue, searchPlaceholder, clearLabel, expandLabel, placement, showInternalSearch, isLoading, usePortal, closeOnSelect, isOpen: isOpenProp, renderCreateNewOption, onCreateNewOption, hideIcons, iconColumnWidth, containerWidth, containerHeight, containerRef, onSelectOption, onInputChange, onFetchMore, onClear, onClose, onOpen, optionsRenderer, onInputReturn, tabProps, disabled, fetchMoreText, autoscrollText, externalLinkIcon, selectedIcon, layer, containerMaxHeight, openChildrenOnMouseOver, isSubItemDropdown, openSubmenuOnButtonHover, }: DropdownProps<T, TargetRef>): JSX.Element;

/**
 * @public
 */
export declare const DropdownContainer: StyledComponent<ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>, DefaultTheme, {
"data-dp-name": string;
"data-dp-ident"?: string;
} & {
containerWidth?: number;
containerHeight?: number;
layer: keyof Layers;
containerMaxHeight?: string | number;
}, keyof {
"data-dp-name": string;
"data-dp-ident"?: string;
}>;

/**
 * @public
 */
export declare interface DropdownDivider {
    type: "divider";
}

/**
 * @public
 */
export declare const DropdownDividerItem: StyledComponent<"div", DefaultTheme, {}, never>;

/**
 * @public
 */
export declare const DropdownHeaderItem: StyledComponent<"div", DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface DropdownHeaderType {
    type: "header";
    label: React_2.ReactNode;
    childLabels?: string[];
}

/**
 * @public
 */
export declare const DropdownInternalSearchInputContainer: StyledComponent<"div", DefaultTheme, {}, never>;

export declare const DropdownItem: <T>(p: DropdownItemProps<T>) => JSX.Element;

/**
 * @public
 */
export declare interface DropdownItemMeta {
    /** Whether to render as an "active" element */
    active: boolean;
    /** The current search input */
    input: string;
}

/**
 * @public
 */
export declare interface DropdownItemProps<T = unknown> {
    onSelect?: (value: DropdownValueType<T>) => void;
    onSelectIcon?: (value: T) => void;
    onClickSubItem?: (value: DropdownValueType<T>) => void;
    value: DropdownValueType<T>;
    meta: DropdownItemMeta;
    customLabelRender?: ReactNode;
    active?: boolean;
    activeSubItem?: string | null;
    setActiveSubItem?: (item: string | null) => void;
    hideIcons?: boolean;
    iconColumnWidth?: number;
    externalLinkIcon: AnyIcon;
    selectedIcon: AnyIcon;
    fetchMoreText: ReactNode;
    autoscrollText: ReactNode;
    openChildrenOnMouseOver?: boolean;
    hasSelectedItems: boolean;
    hasExpandableItems: boolean;
    layer?: keyof Layers;
    setActiveValueIndex: (value: number | "createNew") => void;
    valueOptions: DropdownValueType<T>[];
    openSubmenuOnButtonHover?: boolean;
    /** Stable id for the option element, used for aria-activedescendant */
    optionId?: string;
    /** Accessible label for the "expand subitems" button. */
    expandLabel?: string;
}

/**
 * @public
 */
export declare type DropdownItemType<T = unknown> = DropdownValueType<T> | DropdownHeaderType | DropdownDivider;

/**
 * @public
 */
export declare interface DropdownProps<T, TargetRef extends HTMLElement> {
    /** List of options to render */
    options: DropdownItemType<T>[];
    /** Control over whether the dropdown is open - default uncontrolled */
    isOpen?: boolean;
    /** List of options to render as sticky options at the head of any of the normal
     * options
     */
    stickyHeaderOptions?: DropdownItemType<T>[];
    /** List of options to render as sticky options at the foot of any of the normal
     * options
     */
    stickyFooterOptions?: DropdownItemType<T>[];
    /** PoppperJS placement option. Defaults to "bottom-start" */
    placement?: Placement;
    /** Wether to render the dropdown in a portal. Default true */
    usePortal?: boolean;
    /** The input value to render in the search box */
    inputValue?: string;
    /** Show a loading indicator */
    isLoading?: boolean;
    /** Show an internal search input for filtering options. The Dropdown does not
     * do any filtering itself
     */
    showInternalSearch?: boolean;
    /** Whether to disable the dropdown */
    disabled?: boolean;
    /** Whether subitems are rendered in an expanding or non-expanding style */
    expandingDrillDown?: boolean;
    /** Placeholder for search input box */
    searchPlaceholder?: string;
    /** Accessible label for the search "clear" button. Provide a translated
     * string for i18n. Defaults to "Clear". */
    clearLabel?: string;
    /** Accessible label for an item's "expand subitems" button. Provide a
     * translated string for i18n. Defaults to "Expand". */
    expandLabel?: string;
    /** Whether the dropdown should close on selections. default true */
    closeOnSelect?: boolean;
    /** Whether to hide item's icon for the whole list */
    hideIcons?: boolean;
    /** The width of the column in which icons are rendered */
    iconColumnWidth?: number;
    /** Add in custom width to the dropdown options container */
    containerWidth?: number;
    /** Add in custom height to the dropdown options container */
    containerHeight?: number;
    /** Add in custom max height to the dropdown options container */
    containerMaxHeight?: string | number;
    /** A ref to the container element */
    containerRef?: React_2.RefObject<HTMLElement>;
    /** Event handler for when the "active" item changes via keyboard events */
    onActiveOptionChange?: (item: DropdownValueType<T> | null) => void;
    /** Event handler for when the "clear" event is triggered for the search input */
    onClear?: () => void;
    /** Event handler for when an option is selected */
    onSelectOption?: (item: DropdownValueType<T>) => void;
    /** Event handler for when the search input value changes */
    onInputChange?: (input: string) => void;
    /** Event handler for when the user requests more options.
     *  For use with paginated options */
    onFetchMore?: () => void;
    /** Event handler for when the dropdown closes */
    onClose?: () => void;
    /** Event handler for when the dropdown opens */
    onOpen?: () => void;
    /** The target for the dropdown. Either a normal ReactNode or a render
     * prop with additional state from the dropdown */
    children: ((props: DropdownTargetProps<TargetRef>) => JSX.Element) | JSX.Element;
    /** Tag to use for the wrapper element, default div */
    renderItem?: (item: DropdownValueType<T>, meta: DropdownItemMeta) => JSX.Element;
    /** Override the rendering of dropdown labels within dropdown options */
    renderLabel?: (item: DropdownValueType<T>, meta: DropdownItemMeta) => JSX.Element;
    /** Override the rendering of menu container */
    renderMenu?: () => JSX.Element;
    /** Override the rendering of divider elements in the list of options*/
    renderDivider?: () => JSX.Element;
    /** Override the rendering of header elements in the list of options */
    renderHeader?: (item: DropdownHeaderType) => JSX.Element;
    /** Override the rendering of the sticky header in the list of options */
    renderStickyHeader?: ReactNode;
    /** Override the rendering of the sticky footer in the list of options */
    renderStickyFooter?: ReactNode;
    /** Override the rendering of the internal search input*/
    renderInternalSearch?: (props: InputHTMLAttributes<HTMLInputElement>) => JSX.Element;
    /** Render the create new option - no default implementation and renders as a
     * sticky footer above the normal sticky footer
     */
    onCreateNewOption?: () => void;
    renderCreateNewOption?: (active: boolean, onSelect: () => void, handleCreateNewMouseEnter: (e: React_2.MouseEvent) => void) => ReactNode;
    /** Override the rendering of the contents of the dropdown container */
    optionsRenderer?: (options: DropdownItemType<T>[], handleSelectOption: (value: DropdownValueType<T>) => void, activeItem: DropdownValueType<T> | null, activeSubItem: string | null, setActiveSubItem: React_2.Dispatch<React_2.SetStateAction<string | null>>, hideIcons: boolean | undefined) => ReactNode;
    /** Props for rendering tabs within the dropdown */
    tabProps?: DropdownTabProps;
    /** The text to show for the fetch more button */
    fetchMoreText: ReactNode;
    /** The text to show for the autoscroll button */
    autoscrollText: ReactNode;
    externalLinkIcon: AnyIcon;
    selectedIcon: AnyIcon;
    /** Event handler that returns input value after enter has been pressed */
    onInputReturn?: (inputValue: string) => void;
    /** The zIndex Layer that the dropdown will be rendered at. Defaults to: popover */
    layer?: keyof Layers;
    /** Display items children on hover */
    openChildrenOnMouseOver?: boolean;
    /** When a Dropdown has subitems it renders a Dropdown for each DropdownItem. We need to distinguish if this is a root or sub item Dropdown to allow conditional logic for things like offset */
    isSubItemDropdown?: boolean;
    openSubmenuOnButtonHover?: boolean;
}

/**
 * @public
 */
export declare function dropdownRenderOptions<T = string>({ handleSelectOption, activeItem, activeSubItem, setActiveSubItem, fetchMoreText, autoscrollText, selectedIcon, externalLinkIcon, hasSelectedItems, hasExpandableItems, hideIcons, iconColumnWidth, openChildrenOnMouseOver, layer, setActiveValueIndex, valueOptions, openSubmenuOnButtonHover, listboxId, optionIndexOffset, expandLabel, }: DropdownRenderOptionsProps<T>): (value: DropdownItemType<T>, index: number, array: DropdownItemType<T>[]) => JSX.Element | null;

/**
 * @public
 */
export declare type DropdownRenderOptionsProps<T = string> = {
    handleSelectOption: (value: DropdownValueType<T>) => void;
    activeItem: DropdownValueType<T> | null;
    activeSubItem: string | null;
    setActiveSubItem: (item: string | null) => void;
    fetchMoreText: ReactNode;
    autoscrollText: ReactNode;
    selectedIcon: AnyIcon;
    externalLinkIcon: AnyIcon;
    hasSelectedItems: boolean;
    hasExpandableItems: boolean;
    hideIcons?: boolean;
    iconColumnWidth?: number;
    openChildrenOnMouseOver?: boolean;
    layer?: keyof Layers;
    setActiveValueIndex: (value: number | "createNew") => void;
    valueOptions: DropdownValueType<T>[];
    openSubmenuOnButtonHover?: boolean;
    /** Listbox element id, used to derive stable option ids */
    listboxId?: string;
    /** Index offset within allValueOptions for the first value item in this batch */
    optionIndexOffset?: number;
    /** Accessible label for an item's "expand subitems" button. */
    expandLabel?: string;
};

/**
 * @public
 */
export declare const DropdownResetButton: ({ onClick, buttonText, undoIcon, }: DropdownResetButtonProps) => JSX.Element;

export declare interface DropdownResetButtonProps {
    onClick: () => void;
    buttonText: string;
    undoIcon: AnyIcon;
}

/**
 * @public
 */
export declare interface DropdownTabProps {
    tabs: TabBarItemType[];
    activeTabIndex: number;
    onTabChange: (index: number) => void;
}

/**
 * @public
 */
export declare interface DropdownTargetProps<TargetRef extends HTMLElement> {
    targetProps: HTMLAttributes<HTMLElement>;
    targetRef: Ref<TargetRef>;
    inputProps: InputHTMLAttributes<HTMLInputElement>;
    inputRef: Ref<HTMLInputElement>;
    handleOnClear?: () => void;
    active: boolean;
}

/**
 * @public
 */
export declare const DropdownTrigger: StyledComponent<"div", DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface DropdownValueType<OriginalValue> {
    /** Unique identifier for the option */
    key: string;
    /** Text label for the option*/
    label: React_2.ReactNode;
    /** Discriminated union literal */
    type: "value";
    /** Show option as disabled*/
    disabled?: boolean;
    /** Description to render */
    description?: string;
    /** Icon to render */
    icon?: AnyIcon | IconProps | JSX.Element | null;
    /** Show option as selected  */
    selected?: boolean;
    /** Link to render - changes behavior to open link in new browser tab */
    href?: string;
    /** Sub options to render */
    subItems?: DropdownItemType<OriginalValue>[];
    /** Options for the sub items dropdown */
    subItemsDropdownOptions?: Partial<Omit<DropdownProps<OriginalValue, HTMLElement>, "options" | "children">>;
    onClickIcon?: (value: unknown) => void;
    /** Callback fired on clicking the sub menu arrow icon **/
    onClickSubItem?: (value: unknown) => void;
    /** The underlying data related to the option, for the convenience of the user */
    value: OriginalValue;
    /** The default behaviour will only open submenu on clicking th right arrow icon, this will make the whole item
     * clickable, overriding the onSelect behaviour
     */
    openSubmenuOnSelect?: boolean;
    /** Callback fired to handle fetch more scrolling for sub items  */
    onFetchMoreSubItems?: () => void;
    /** Whether to show icon when a href is provided default is true */
    showHrefIcon?: boolean;
}

/**
 * @public
 */
export declare const EllipsesTippyTooltip: ({ disabled, ...props }: Parameters<typeof TippyTooltip>[0]) => React_2.JSX.Element;

/**
 * @public
 */
export declare const EllipsesTooltip: ({ disabled, ...props }: TooltipProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare const EmailSpan: StyledComponent<"span", DefaultTheme, TProps, never>;

/**
 * @public
 */
export declare interface EmojiAvatarProps {
    emojiStyles?: CSSProperties;
}

/**
 * @public
 */
export declare interface FaIconAvatarProps {
    faIconClassName?: string;
    faIconName?: string;
    iconStyles?: CSSProperties;
}

/**
 * Wrapper around Formik's useField hook and ErrorMessage component
 * @public
 * @deprecated Support for this formik ultity will be dropped
 * @example
 * ```
 * // You can pass generic type param to get some type hints about the value
 * <FormikField<string> name="title">
 *   {([field]) => <input {...field}></input>}
 * </FormikField>
 * ```
 */
export declare function FormikFastField<T = any>({ name, type, children }: FormikFieldProps<T>): React_2.JSX.Element;

/**
 * Wrapper around Formik's useField hook and ErrorMessage component
 * @public
 * @deprecated Support for this formik ultity will be dropped
 * @example
 * ```
 * // You can pass generic type param to get some type hints about the value
 * <FormikField<string> name="title">
 *   {([field]) => <input {...field}></input>}
 * </FormikField>
 * ```
 */
export declare function FormikField<T = any>({ name, type, children }: FormikFieldProps<T>): React_2.JSX.Element;

/**
 * @public
 * @deprecated Support for this formik ultity will be dropped
 */
export declare type FormikFieldProps<T = any> = {
    /** name of field in formik form */
    name: string;
    /** optional hint to formik about the input type */
    type?: "textarea" | "input" | "select";
    /** children render props from formik's useField hook */
    children?: (formikFieldProps: [FieldInputProps<T>, FieldMetaProps<T>, FieldHelperProps<T>], componentProps: {
        /** Returns the fieldname as the ID. Use *uid* for safe ID names */
        id: string;
        /** Unique id combining a uuid and the fieldname: *uuid-fieldname*
         *
         * When passing an ID to an input or label's id attribute this avoids browsers flagging duplicate id warnings for non-unique field names  */
        uid: string;
        error: boolean;
        ErrorMessage: ComponentType<ErrorMessageProps>;
        errorMsgComponent?: ReactNode;
    }) => ReactNode;
};

/**
 * @public
 */
export declare const getTextareaNumberOfLines: (element: HTMLTextAreaElement | HTMLDivElement) => number;

/**
 * @public
 */
export declare const GlobalStyles: GlobalStyleComponent<    {}, DefaultTheme>;

export declare const GroupByButton: React_2.ForwardRefExoticComponent<HTMLButtonProps & Omit<CommonButtonProps, "intent"> & {
    intent?: ButtonIntent;
} & GroupByProps & React_2.RefAttributes<HTMLButtonElement>>;

/**
 * @public
 */
export declare type GroupByButtonProps = ButtonProps & GroupByProps;

/**
 * @public
 */
export declare type GroupByProps = {
    side?: "left" | "right";
    selected?: boolean;
    intent?: ButtonProps["intent"];
    size?: ButtonProps["size"];
    fill?: boolean;
};

/**
 * @public
 */
export declare const H0: StyledComponent<"h1", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const H1: StyledComponent<"h1", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const H10: StyledComponent<"h1", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const H11: StyledComponent<"h1", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const H2: StyledComponent<"h2", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const H3: StyledComponent<"h3", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const H4: StyledComponent<"h4", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const H5: StyledComponent<"h5", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const H6: StyledComponent<"h6", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const H7: StyledComponent<"h6", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const H8: StyledComponent<"h6", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const H9: StyledComponent<"h1", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare type HeaderSize = "small" | "medium" | "large" | "xlarge" | "overlay";

/**
 * @public
 * @deprecated Don't use outside this file, use the styled typography components instead eg <TSpan type="h_h1" /> or <HH1 />
 */
export declare const headingStyles: {
    h_h1: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h1_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h2: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h2_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h3: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h3_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h4: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h4_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h5: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h5_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h6: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h6_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h6_kerning: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h0: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h1: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h2: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h3: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h4: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h5: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h6: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h7: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h8: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h9: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h10: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h11: FlattenInterpolation<ThemeProps<DefaultTheme>>;
};

/**
 * @public
 */
export declare const HH1: StyledComponent<"h1", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH1Paragraph: StyledComponent<"h1", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH2: StyledComponent<"h2", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH2Paragraph: StyledComponent<"h2", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH3: StyledComponent<"h1", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH3Paragraph: StyledComponent<"h3", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH4: StyledComponent<"h4", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH4Paragraph: StyledComponent<"h4", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH5: StyledComponent<"h5", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH5Paragraph: StyledComponent<"h5", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH6: StyledComponent<"h6", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH6Kerning: StyledComponent<"h6", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const HH6Paragraph: StyledComponent<"h6", DefaultTheme, {
type: string;
}, "type">;

export declare type HTMLAnchorButtonProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children">;

export declare type HTMLButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;

export declare type HTMLLabelButtonProps = LabelHTMLAttributes<HTMLLabelElement>;

/**
 * @public
 */
export declare interface HTMLOptgroupAttributes extends OptgroupHTMLAttributes<HTMLOptGroupElement> {
    options?: HTMLOptionAttributes[];
}

/**
 * @public
 */
export declare type HTMLOptionAttributes = OptionHTMLAttributes<HTMLOptionElement>;

/**
 * @public
 */
export declare type HTMLSelectAttributes = SelectHTMLAttributes<HTMLSelectElement>;

/**
 * @deprecated Use the new IconV2 component instead.
 *
 * Renders icons. Supports font awesome objects, ISO 3166 codes for flags, and a range of custom icons
 *
 * By default will inherit color and font size, but you can pass in a `themeColor` prop to specify a
 * theme colour. It is a styled component, so you can use it as a styled component selector or
 * extend it with `styled(Icon)`.
 * @public
 * @example
 * ```
 * <Icon icon="agent" themeColor="green100" />;
 * ```
 */
export declare const Icon: StyledComponent<({ icon, themeColor, size, ...rest }: IconProps) => JSX.Element, DefaultTheme, {}, never>;

/**
 * Icon Button
 * @public
 */
export declare const IconButton: StyledComponent<React_2.ForwardRefExoticComponent<IconButtonProps & React_2.RefAttributes<HTMLButtonElement>>, DefaultTheme, {}, never>;

export declare type IconButtonGuard = AccessibleIconButton | InaccessibleIconButton;

/**
 * @public
 */
export declare type IconButtonIntent = Exclude<AllButtonIntents, "minimalUnderline">;

/**
 * @public
 */
export declare type IconButtonProps = HTMLButtonProps & Omit<CommonButtonProps, "text" | "fill" | "alignText" | "icon" | "intent"> & IconButtonGuard & {
    themeColor?: ThemeColorKey;
    intent?: IconButtonIntent;
};

/**
 * @public
 */
export declare interface IconProps extends IconPropsBase {
    icon: AnyIcon;
}

export declare type IconPropsBase = {
    /** optionally specify icon color - default inherits from css color */
    themeColor?: ThemeColorKey;
    className?: string;
    /** optionally specify the icon size (height) in pixels - default inherits from css font-size */
    size?: number;
    spin?: boolean;
};

/**
 * @public
 */
export declare const ICONS: ("dp-custom-im" | "dp-custom-linear-drag-drop" | "dp-custom-linear-emoji-meh" | "dp-custom-linear-level-down" | "dp-custom-linear-linked-tickets" | "dp-custom-linear-read" | "dp-custom-linear-unlink" | "dp-custom-solid-im" | "dp-custom-solid-agent" | "dp-custom-solid-api" | "dp-custom-solid-check-circle" | "dp-custom-solid-circle-user-slash" | "dp-custom-solid-clock-1" | "dp-custom-solid-clock" | "dp-custom-solid-dollar" | "dp-custom-solid-dot" | "dp-custom-solid-exclamation-circle" | "dp-custom-solid-exclamation-triangle-1" | "dp-custom-solid-exclamation-triangle" | "dp-custom-solid-grip-vertical" | "dp-custom-solid-information-1" | "dp-custom-solid-information" | "dp-custom-solid-linked-tickets" | "dp-custom-solid-manager" | "dp-custom-solid-message-circle-slash" | "dp-custom-solid-pause" | "dp-custom-solid-phone-hangup" | "dp-custom-solid-question-circle" | "dp-custom-solid-record" | "dp-custom-solid-robot" | "dp-custom-solid-sip" | "dp-custom-solid-slack" | "dp-custom-solid-user-clock" | "dp-custom-solid-user-slash" | "dp-custom-solid-view-dual-card" | "dp-custom-solid-view-dual-table" | "dp-custom-solid-view-kanban" | "dp-custom-solid-view-list-table" | "dp-custom-solid-webhook" | "dazzle-linear-align-center" | "dazzle-linear-align-justify" | "dazzle-linear-align-left" | "dazzle-linear-align-right" | "dazzle-linear-arrow-down-left" | "dazzle-linear-arrow-down" | "dazzle-linear-arrow-left" | "dazzle-linear-arrow-narrow-left-alignment" | "dazzle-linear-arrow-right-from-bracket" | "dazzle-linear-arrow-right-to-bracket" | "dazzle-linear-arrow-right" | "dazzle-linear-arrow-square-down-left" | "dazzle-linear-arrow-square-down-right" | "dazzle-linear-arrow-up-right" | "dazzle-linear-arrow-up" | "dazzle-linear-badge-check" | "dazzle-linear-ban" | "dazzle-linear-bold" | "dazzle-linear-brackets-curly" | "dazzle-linear-branch" | "dazzle-linear-check" | "dazzle-linear-chevron-down-double" | "dazzle-linear-chevron-right-double" | "dazzle-linear-code" | "dazzle-linear-column-width" | "dazzle-linear-compress" | "dazzle-linear-edit" | "dazzle-linear-enter" | "dazzle-linear-exclamation-alt" | "dazzle-linear-expand" | "dazzle-linear-export-1" | "dazzle-linear-export" | "dazzle-linear-filter-list" | "dazzle-linear-follow-up" | "dazzle-linear-font" | "dazzle-linear-history" | "dazzle-linear-import" | "dazzle-linear-infinity" | "dazzle-linear-italic" | "dazzle-linear-live" | "dazzle-linear-loop" | "dazzle-linear-merge" | "dazzle-linear-message-square-chat-1" | "dazzle-linear-message-square-chat" | "dazzle-linear-note" | "dazzle-linear-question" | "dazzle-linear-refresh-alt" | "dazzle-linear-refresh" | "dazzle-linear-ruler" | "dazzle-linear-search" | "dazzle-linear-send-im" | "dazzle-linear-sent" | "dazzle-linear-switch" | "dazzle-linear-tag" | "dazzle-linear-task-1" | "dazzle-linear-task" | "dazzle-linear-text-height" | "dazzle-linear-text-size" | "dazzle-linear-text" | "dazzle-linear-triangle" | "dazzle-linear-underline" | "dazzle-linear-undo" | "dazzle-linear-user-check" | "dazzle-linear-xmark" | "dazzle-monochrome-sort-down" | "dazzle-monochrome-sort-up" | "dazzle-solid-archive" | "dazzle-solid-arrow-narrow-left-alignment" | "dazzle-solid-article" | "dazzle-solid-audio" | "dazzle-solid-auto-attendant" | "dazzle-solid-backward-step" | "dazzle-solid-badge-check" | "dazzle-solid-bank" | "dazzle-solid-bolt" | "dazzle-solid-book" | "dazzle-solid-branding" | "dazzle-solid-browser" | "dazzle-solid-calendar-day" | "dazzle-solid-calendar" | "dazzle-solid-caret-down" | "dazzle-solid-caret-left" | "dazzle-solid-caret-right" | "dazzle-solid-caret-up" | "dazzle-solid-cc" | "dazzle-solid-chart-bar" | "dazzle-solid-chart-column" | "dazzle-solid-chart-pie" | "dazzle-solid-circle-play" | "dazzle-solid-circle-user" | "dazzle-solid-clone" | "dazzle-solid-code-alt" | "dazzle-solid-code-branch" | "dazzle-solid-credit-card" | "dazzle-solid-crown" | "dazzle-solid-debug-file" | "dazzle-solid-dialpad-circle" | "dazzle-solid-dollar-to-slot" | "dazzle-solid-download" | "dazzle-solid-edit" | "dazzle-solid-eye-slash" | "dazzle-solid-eye" | "dazzle-solid-file-alt" | "dazzle-solid-file-code" | "dazzle-solid-flag" | "dazzle-solid-folder" | "dazzle-solid-follow-up" | "dazzle-solid-forward-step" | "dazzle-solid-gear" | "dazzle-solid-glossary" | "dazzle-solid-grid-plus" | "dazzle-solid-grid" | "dazzle-solid-grip-lines" | "dazzle-solid-guide" | "dazzle-solid-heart" | "dazzle-solid-image-square" | "dazzle-solid-indent" | "dazzle-solid-key" | "dazzle-solid-knowledgebase" | "dazzle-solid-layer-group" | "dazzle-solid-list-dots" | "dazzle-solid-list-number" | "dazzle-solid-location-pin" | "dazzle-solid-lock" | "dazzle-solid-mail" | "dazzle-solid-menu" | "dazzle-solid-message-circle-chat" | "dazzle-solid-message-circle-dots" | "dazzle-solid-message-square-chat-1" | "dazzle-solid-message-square-chat" | "dazzle-solid-message-square-check" | "dazzle-solid-message-square-dots" | "dazzle-solid-microphone-alt-1" | "dazzle-solid-microphone-slash-alt-1" | "dazzle-solid-note" | "dazzle-solid-organisation" | "dazzle-solid-outbound-email" | "dazzle-solid-outdent" | "dazzle-solid-phone-alt" | "dazzle-solid-phone-call-alt" | "dazzle-solid-phone-flip-alt" | "dazzle-solid-phone-missed" | "dazzle-solid-phone-outgoing" | "dazzle-solid-phone-slash-alt" | "dazzle-solid-pin" | "dazzle-solid-play" | "dazzle-solid-portrait-user" | "dazzle-solid-printer" | "dazzle-solid-problem-open" | "dazzle-solid-rectangle-terminal" | "dazzle-solid-ruler" | "dazzle-solid-save" | "dazzle-solid-screen-users" | "dazzle-solid-shield" | "dazzle-solid-shopping-cart" | "dazzle-solid-sitemap" | "dazzle-solid-snippet" | "dazzle-solid-sort" | "dazzle-solid-star" | "dazzle-solid-tag" | "dazzle-solid-task-1" | "dazzle-solid-task" | "dazzle-solid-ticket" | "dazzle-solid-track" | "dazzle-solid-truck" | "dazzle-solid-unlock" | "dazzle-solid-upload" | "dazzle-solid-user-check-1" | "dazzle-solid-user-check" | "dazzle-solid-user-edit" | "dazzle-solid-user-gear" | "dazzle-solid-user-lock" | "dazzle-solid-user-plus" | "dazzle-solid-user" | "dazzle-solid-users" | "dazzle-solid-version-history" | "dazzle-solid-video" | "dazzle-solid-voicemail" | "dazzle-solid-volume-max" | "dazzle-solid-wand-magic-sparkles" | "dazzle-duotone-arrow-square-down-left" | "dazzle-duotone-arrow-square-down-right" | "flowbite-info" | "fontawesomev6-classic-solid-forward" | "fontawesomev6-classic-solid-highlight-colour" | "fontawesomev6-classic-solid-macro" | "fontawesomev6-classic-solid-paragraph" | "fontawesomev6-classic-solid-quote" | "fontawesomev6-classic-solid-remove-format" | "fontawesomev6-classic-solid-reply" | "fontawesomev6-classic-solid-strikethrough" | "heroicons-linear-bell" | "heroicons-linear-chevron-down" | "heroicons-linear-chevron-left" | "heroicons-linear-chevron-right" | "heroicons-linear-chevron-up" | "heroicons-linear-clock" | "heroicons-linear-dollar" | "heroicons-linear-emoji-happy" | "heroicons-linear-emoji-sad" | "heroicons-linear-exclamation-triangle" | "heroicons-linear-external-link" | "heroicons-linear-filter" | "heroicons-linear-information" | "heroicons-linear-latest-news" | "heroicons-linear-link" | "heroicons-linear-paper-clip" | "heroicons-linear-thumb-down" | "heroicons-linear-thumb-up" | "heroicons-solid-identification" | "heroicons-solid-badge-check" | "heroicons-solid-bell-1" | "heroicons-solid-bell" | "heroicons-solid-briefcase" | "heroicons-solid-broadcast" | "heroicons-solid-chevron-small-down" | "heroicons-solid-chevron-small-up" | "heroicons-solid-chip" | "heroicons-solid-collection" | "heroicons-solid-copy" | "heroicons-solid-dollar" | "heroicons-solid-dots-horizontal" | "heroicons-solid-dots-vertical" | "heroicons-solid-filter-1" | "heroicons-solid-filter" | "heroicons-solid-folder-open" | "heroicons-solid-folder" | "heroicons-solid-globe" | "heroicons-solid-inbox-in" | "heroicons-solid-integration" | "heroicons-solid-light-bulb" | "heroicons-solid-minus" | "heroicons-solid-mobile" | "heroicons-solid-news" | "heroicons-solid-plus" | "heroicons-solid-qr-code" | "heroicons-solid-queue" | "heroicons-solid-server" | "heroicons-solid-setting" | "heroicons-solid-site" | "heroicons-solid-social" | "heroicons-solid-table" | "heroicons-solid-thumb-down" | "heroicons-solid-thumb-up" | "heroicons-solid-translate" | "heroicons-solid-trash" | "heroicons-solid-view-calendar")[];

/**
 * @public
 */
export declare type IconType = (typeof ICONS)[number];

/**
 * @public
 */
export declare const IconV2: StyledComponent<({ icon, className, size, ...rest }: IconV2Props) => React_2.JSX.Element, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface IconV2Props extends HTMLAttributes<HTMLElement> {
    icon: IconType;
    className?: string;
    /** optionally specify the icon size (height) in pixels - default inherits from css font-size */
    size?: number;
    /** optionally specify icon color - default inherits from css color */
    themeColor?: ThemeColorKey;
}

/**
 * @public
 */
export declare const IdHashSpan: StyledComponent<"span", DefaultTheme, TProps, never>;

/**
 * @public
 */
export declare interface ImageAvatarProps {
    imageUrl?: string | null;
}

export declare type InaccessibleIconButton = {
    icon: AnyIcon | IconProps;
    "aria-label": string;
};

/**
 * Will render a scrollbar container that uses an intersection observer to watch for when
 * the container has scrolled to the top or bottom.
 * @public
 */
export declare function Infinite({ children, reverse, anchor, onFetchMore, onFetchMoreStart, status, startStatus, maxHeight, scrollSideEffect, width, fetchMoreText, autoscrollText, scrollRef: _scrollRef, justify, onResize, onJumpToStart, spinnerSize, loadingLabel, }: InfiniteProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface InfiniteProps {
    children?: ReactNode;
    /** Control this list direction. Effects scrolling, vertical alignment and the trigger position for fetching more items  */
    reverse?: boolean;
    /** Whether to render the Scroll To Start button */
    anchor?: boolean;
    onFetchMore?: () => void;
    onFetchMoreStart?: () => void;
    /** The status of the query that loads more items at the END of the page */
    status?: InfiniteScrollStatus;
    /** The status of the query that loads more items at the START of the page */
    startStatus?: InfiniteScrollStatus;
    maxHeight?: React_2.CSSProperties["maxHeight"];
    /** Used in <Dropdown /> to hide suboptions on scroll */
    scrollSideEffect?: (event: React_2.UIEvent<HTMLElement, UIEvent>) => void;
    width?: string;
    /** Align the list, you probably want flex-end if the list is reversed so it aligns to the bottom of the viewport */
    justify?: StackProps["justify"];
    fetchMoreText: ReactNode;
    autoscrollText: ReactNode;
    scrollRef?: Ref<HTMLDivElement>;
    onResize?: () => void;
    onJumpToStart?: () => void;
    spinnerSize?: SpinnerSize;
    /** Accessible label for the "loading more items" live region. Provide a
     * translated string for i18n. Defaults to "Loading more". */
    loadingLabel?: string;
}

/**
 * @public
 */
export declare type InfiniteScrollStatus = "loading" | "hasNextPage" | "end" | "end-with-force";

/**
 * Will render a scrollbar container that uses an intersection observer to watch for when
 * the container has scrolled to the top or bottom.
 * @public
 */
export declare function InfiniteTopBottom({ children, reverse, anchor, onFetchMoreTop, onFetchMoreBottom, topStatus, bottomStatus, maxHeight, scrollSideEffect, onReAttach, newElements, newElementsText, autoscrollText, width, loadingLabel, }: InfiniteTopBottomProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface InfiniteTopBottomProps {
    children?: ReactNode;
    /** default false */
    reverse?: boolean;
    /** default false */
    anchor?: boolean;
    onFetchMoreTop?: () => void;
    onFetchMoreBottom?: () => void;
    topStatus?: "loading" | "hasPreviousPage" | "start";
    bottomStatus?: "loading" | "hasNextPage" | "end" | "end-with-force";
    maxHeight?: React_2.CSSProperties["maxHeight"];
    /** Used in <Dropdown /> to hide suboptions on scroll */
    onReAttach?: () => void;
    newElements?: boolean;
    newElementsText: ReactNode;
    autoscrollText: ReactNode;
    scrollSideEffect?: () => void;
    width?: string;
    /** Accessible label for the "loading more items" live regions. Provide a
     * translated string for i18n. Defaults to "Loading more". */
    loadingLabel?: string;
}

/**
 * @public
 */
export declare const Input: StyledComponent<React_2.ForwardRefExoticComponent<InputProps & React_2.RefAttributes<HTMLInputElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
    leftIcon?: AnyIcon | IconProps | JSX.Element | null;
    rightIcon?: AnyIcon | IconProps | JSX.Element | null;
    variant?: InputVariant;
    /** default medium */
    inputsize?: InputSize;
    error?: boolean;
    required?: boolean;
    leftAlignLeftIcon?: boolean;
    isVisibleRightIconOnFocus?: boolean;
    hasLabel?: boolean;
    hideBorder?: boolean;
}

/**
 * @public
 */
export declare type InputSize = "xSmall" | "small" | "medium" | "large" | "xLarge";

/**
 * @public
 */
export declare type InputVariant = "normal" | "inline";

/**
 * @public
 */
export declare const InputWithDisplay: StyledComponent<React_2.ForwardRefExoticComponent<InputWithDisplayProps & React_2.RefAttributes<HTMLInputElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface InputWithDisplayProps extends Omit<InputProps, "variant"> {
    onDisplayClick?: (e: MouseEvent_2<HTMLSpanElement>) => void;
    isAlwaysVisibleRightIcon?: boolean;
    isVisibleRightIcon?: boolean;
    onClickInputGroup?: MouseEventHandler<HTMLDivElement>;
    isVisibleInput?: boolean;
    enterKeyConfirmation?: boolean;
    hideBorder?: boolean;
    hideAsterisk?: boolean;
    typographyType?: TProps["type"];
}

export declare type InteractionType = "click" | "contextMenu" | "hover";

/**
 * @public
 */
export declare function isAnyIcon(icon: unknown): icon is AnyIcon;

/**
 * @public
 */
export declare const isDpCustomIconId: (icon: unknown) => icon is DpCustomIconsId;

/**
 * @public
 */
export declare function isFaIcon(icon: unknown): icon is IconDefinition;

/**
 * @public
 */
export declare function isIconProps(props: unknown): props is IconProps;

/**
 * @public
 */
export declare const isV2Icon: (icon: unknown) => icon is IconType;

/**
 * @public
 */
export declare const Label: StyledComponent<React_2.ForwardRefExoticComponent<LabelProps & React_2.RefAttributes<HTMLLabelElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare const Label1: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const Label1Medium: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const Label1Semibold: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const Label2: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * Label component styled like a button - useful for wrapping around file input for example
 * @public
 */
export declare const LabelButton: StyledComponent<React_2.ForwardRefExoticComponent<HTMLLabelButtonProps & CommonButtonProps & {
disabled?: boolean;
} & React_2.RefAttributes<HTMLLabelElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare const LabelButtonFileInput: StyledComponent<"input", DefaultTheme, {
type: "file";
}, "type">;

/**
 * @public
 */
export declare type LabelButtonProps = HTMLLabelButtonProps & CommonButtonProps & {
    disabled?: boolean;
};

/**
 * @public
 */
export declare type LabelColorKeys = keyof StandardLabelColors;

/**
 * @public
 * @deprecated Prefer `LabelColors`
 * @see LabelColors
 */
export declare type LabelColorPair = LabelColors;

/**
 * @public
 */
export declare type LabelColors = {
    backgroundColor: Exclude<React.CSSProperties["backgroundColor"], undefined>;
    borderColor: Exclude<React.CSSProperties["borderColor"], undefined>;
    textColor: Exclude<React.CSSProperties["color"], undefined>;
};

/**
 * @public
 */
export declare const LabelGroup: StyledComponent<React_2.ForwardRefExoticComponent<LabelGroupProps & React_2.RefAttributes<HTMLDivElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface LabelGroupProps {
    className?: string;
    label?: ReactNode;
    labelInfo?: ReactNode;
    labelInfoMultiLine?: boolean;
    labelAction?: ReactNode;
    variant?: LabelVariant;
    description?: ReactNode;
    error?: boolean;
    errorMsg?: ReactNode;
    disabled?: boolean;
    children?: ReactNode;
    required?: boolean;
}

/**
 * @public
 */
export declare interface LabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, "as"> {
    className?: string;
    label?: ReactNode;
    labelInfo?: ReactNode;
    labelInfoMultiLine?: boolean;
    /** default "agent" */
    variant?: LabelVariant;
    labelAction?: ReactNode;
    description?: ReactNode;
    error?: boolean;
    errorMsg?: ReactNode;
    disabled?: boolean;
    required?: boolean;
    labelInfoFullWidth?: boolean;
    renderAs?: "label" | "div";
}

/**
 * @public
 */
export declare type LabelVariant = "agent" | "admin";

/**
 * @public
 */
export declare type Layers = {
    popover: number;
    modal: number;
    modalPopover: number;
};

/**
 * @public
 */
export declare const lightTheme: DeskproTheme;

/**
 * An accessible anchor wrapper around StyledA/UnstyledA that automatically:
 * - ensures `rel` includes "noopener noreferrer" when `target="_blank"`
 * - appends a visually-hidden "(opens in new tab)" hint for screen readers
 *
 * @public
 */
export declare const Link: React_2.ForwardRefExoticComponent<LinkProps & React_2.RefAttributes<HTMLAnchorElement>>;

/**
 * Props for the accessible Link component.
 * @public
 */
export declare interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
    /** When true the link text style is underlined. */
    underline?: boolean;
    /** Use "unstyled" to render without the cyan colour treatment. */
    variant?: "default" | "unstyled";
    /** Visually-hidden hint appended for `target="_blank"` links so screen readers
     * announce that the link opens in a new tab. Provide a translated string for
     * i18n. Defaults to "(opens in new tab)". */
    newTabLabel?: string;
}

/**
 * @public
 */
export declare function ListCard({ children, size, rows, loadingRows, isSelected, isNew, isLoading, onChange, onClick, height, isOpening, hideCheckbox, isGreyed, }: ListCardProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface ListCardProps {
    children?: ReactNode;
    size?: ListCardSizes;
    rows?: number;
    loadingRows?: number;
    isSelected?: boolean;
    isNew?: boolean;
    isLoading?: boolean;
    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
    onClick?: (e: MouseEvent_2) => void;
    onContextMenu?: (e: MouseEvent_2) => void;
    height?: number;
    isOpening?: boolean;
    hideCheckbox?: boolean;
    isGreyed?: boolean;
}

/**
 * @public
 */
export declare type ListCardSizes = "small" | "medium" | "large" | "auto";

/**
 * @public
 */
export declare const LoadingAttachment: ({ label }: LoadingAttachmentProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare interface LoadingAttachmentProps {
    label: string;
}

/**
 * A skeleton placeholder block. Decorative — hidden from assistive technology.
 * Wrap one or more LoadingBlocks in {@link LoadingState} to announce loading to screen readers.
 * @public
 */
export declare const LoadingBlock: StyledComponent<"div", DefaultTheme, {
"aria-hidden": boolean | "true";
"data-dp-name": string;
"data-dp-ident"?: string;
} & {
height?: number;
width?: number | string | "stretch";
round?: boolean;
animate?: boolean;
}, "aria-hidden" | "data-dp-ident" | "data-dp-name">;

/**
 * A live region that wraps skeleton {@link LoadingBlock} placeholders and
 * announces a loading state to assistive technology exactly once — instead of
 * reading every individual skeleton shape.
 *
 * ```tsx
 * <LoadingState>
 *   <LoadingBlock width="stretch" />
 *   <LoadingBlock width={200} />
 * </LoadingState>
 * ```
 *
 * @public
 */
export declare function LoadingState({ children, label }: LoadingStateProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface LoadingStateProps {
    children: ReactNode;
    /** Accessible label announced to screen readers. Defaults to "Loading". */
    label?: string;
}

/**
 * Menu container implementing the WAI-ARIA menu pattern.
 * Handles roving tabindex keyboard navigation (ArrowUp/Down/Home/End).
 * @public
 */
export declare function Menu({ fill, hasElevation, children, type, onKeyDown, ...props }: MenuProps): React_2.JSX.Element;

/**
 * @public
 */
export declare function MenuDivider({ title, type, ...props }: MenuDividerProps): React_2.JSX.Element;

/**
 * @public
 */
export declare type MenuDividerProps = HTMLAttributes<HTMLLIElement> & {
    title?: ReactNode;
    type?: MenuType;
};

/**
 * Menu item implementing the WAI-ARIA menuitem role with keyboard support.
 * When `children` are provided the item acts as a submenu trigger.
 * @public
 */
export declare const MenuItem: React_2.ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & React_2.RefAttributes<HTMLAnchorElement>>;

/**
 * @public
 */
export declare interface MenuItemProps extends React_2.ComponentPropsWithRef<"a"> {
    active?: boolean;
    children?: ReactNode;
    disabled?: boolean;
    icon?: AnyIcon | IconProps | JSX.Element | null;
    rightIcon?: AnyIcon | IconProps | JSX.Element | null;
    label?: ReactNode;
    htmlTitle?: string;
    iconColor?: string;
    type?: MenuType;
    useHoverState?: boolean;
}

/**
 * @public
 */
export declare interface MenuProps extends HTMLAttributes<HTMLUListElement> {
    /** default true */
    hasElevation?: boolean;
    /** default false */
    fill?: boolean;
    type?: MenuType;
}

/** @public */
export declare type MenuType = "normal" | "nav";

/**
 * @public
 */
export declare const MessageCard: StyledComponent<"div", DefaultTheme, MessageCardProps, never>;

/**
 * @public
 */
export declare interface MessageCardProps {
    messageType?: MessageCardType;
    isOfficialResponse?: boolean;
}

/**
 * @public
 */
export declare type MessageCardType = "pending" | "agent" | "user";

/**
 * @public
 */
export declare function Modal({ isOpen, canClickOutsideClose, canEscClose, children, hasBackdrop, onRequestClose, closeIcon, closeLabel, autofocus, height, width, hideClose, top, bottom, left, right, zIndex, size, header, content, footer, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: ModalProps): React_2.JSX.Element;

/**
 * @public
 */
export declare function ModalHeader({ title, backgroundColor, color, children, size, titleId, }: ModalHeaderProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface ModalHeaderProps {
    title?: ReactNode;
    backgroundColor?: ThemeColorKey;
    color?: ThemeColorKey;
    children?: ReactNode;
    size?: HeaderSize;
    /** Id applied to the title, so a Modal can reference it via aria-labelledby. */
    titleId?: string;
}

/**
 * @public
 */
export declare interface ModalProps extends Omit<OverlayProps, "scrollable"> {
    /** @deprecated Use the size prop to choose a size for the modal */
    width?: string;
    /** @deprecated Use the size prop to choose a size for the modal  */
    height?: string;
    hideClose?: boolean;
    top?: string;
    bottom?: string;
    left?: string;
    right?: string;
    closeIcon: AnyIcon;
    size?: ModalSize;
    header?: React_2.ReactNode;
    content?: React_2.ReactNode;
    footer?: React_2.ReactNode;
    /** Accessible label for the close button. Provide a translated string for
     * i18n. Defaults to "Close". */
    closeLabel?: string;
    /** Accessible name for the modal. Provide this (or `aria-labelledby`) when no
     * `header` is rendered, so screen readers announce what the modal is. */
    "aria-label"?: string;
    /** Id of the element that labels the modal. Defaults to the rendered header. */
    "aria-labelledby"?: string;
    /** Id of the element that describes the modal. */
    "aria-describedby"?: string;
}

/**
 * @public
 */
export declare type ModalSize = "small" | "medium" | "large" | "xlarge" | "overlay";

/**
 * @public
 */
export declare type ModalStyleTypes = "extraDark" | "dark" | "light" | "lightBox" | "lightBoxModal" | "unstyled";

/**
 * @public
 */
export declare const Monospace: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const MonospaceMedium: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const MonospaceSemibold: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const NavButton: StyledComponent<React_2.ForwardRefExoticComponent<HTMLButtonProps & Omit<CommonButtonProps, "fill" | "loading" | "size" | "icon" | "danger" | "rightIcon" | "minimal"> & {
icon: AnyIcon | IconProps | JSX.Element | null;
size?: "small" | "normal";
reverse?: boolean;
} & React_2.RefAttributes<HTMLButtonElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare type NavButtonProps = HTMLButtonProps & Omit<CommonButtonProps, "rightIcon" | "fill" | "danger" | "loading" | "size" | "icon" | "minimal"> & {
    icon: AnyIcon | IconProps | JSX.Element | null;
    size?: "small" | "normal";
    reverse?: boolean;
};

/**
 * @public
 */
export declare const NonIdealContainer: StyledComponent<"div", DefaultTheme, {}, never>;

/**
 * @public
 */
export declare const NonIdealContainerTop: StyledComponent<"div", DefaultTheme, {}, never>;

/**
 * @public
 */
export declare function NonIdealState({ title, description, icon, action, vertical, children, titleAs, }: NonIdealStateProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface NonIdealStateProps {
    icon?: AnyIcon | IconProps | JSX.Element | null;
    title?: ReactNode;
    description?: ReactNode;
    action?: ReactNode;
    children?: ReactNode;
    vertical?: boolean;
    /**
     * HTML element to render the title as. Defaults to "h1" (matching the
     * existing `type="h0"` behaviour). Pass "h2", "h3", etc. when this
     * component is not at the top of the document outline.
     */
    titleAs?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
}

/**
 * @public
 */
export declare const OptionTag: ({ icon, displayName, withClose, onClose, removeLabel, ...rest }: OptionTagProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare interface OptionTagProps extends HTMLAttributes<HTMLDivElement> {
    icon?: AnyIcon;
    displayName: string;
    withClose?: boolean;
    onClose?: (e: MouseEvent_2<HTMLButtonElement>) => void;
    /** Accessible label for the remove button. Provide a translated string for
     * i18n. Defaults to `Remove {displayName}`. */
    removeLabel?: string;
}

/**
 * Renders an overlay with a backdrop and places children within an absolutely positioned
 * container at the top of the viewport
 * @public
 */
export declare function Overlay({ isOpen, onRequestClose, hasBackdrop, canClickOutsideClose, canEscClose, scrollable, autofocus, children, zIndex, }: OverlayProps): React_2.JSX.Element;

/**
 * OverlayButton requires `position: relative` wrapper to overlay unless position set to relative
 * @public
 */
export declare const OverlayButton: StyledComponent<React_2.ForwardRefExoticComponent<HTMLButtonProps & Omit<CommonButtonProps, "fill" | "size" | "icon" | "rightIcon" | "minimal"> & {
icon?: AnyIcon | IconProps | JSX.Element | null;
placement?: OverlayButtonPlacement;
rightIcon?: AnyIcon | IconProps | JSX.Element | null;
} & React_2.RefAttributes<HTMLButtonElement>>, DefaultTheme, {
position?: "relative" | "absolute";
}, never>;

/**
 * @public
 */
export declare type OverlayButtonPlacement = `${"right" | "left" | "middle"}-${"top" | "bottom"}`;

/**
 * @public
 */
export declare type OverlayButtonProps = HTMLButtonProps & Omit<CommonButtonProps, "rightIcon" | "fill" | "icon" | "size" | "minimal"> & {
    icon?: AnyIcon | IconProps | JSX.Element | null;
    placement?: OverlayButtonPlacement;
    rightIcon?: AnyIcon | IconProps | JSX.Element | null;
};

/**
 * @public
 */
export declare interface OverlayProps {
    /** controls whether the overlay is active */
    isOpen: boolean;
    /** callback for when the user action is meant to cause the overlay to close  */
    onRequestClose?: () => void;
    /** Whether the overlay backdrop should be visable. Default `true` */
    hasBackdrop?: boolean;
    /** Whether the user pressing escape should trigger the overlay to close. Default `true`  */
    canEscClose?: boolean;
    /** Whether the user clicking on the backdrop should trigger the overlay to close. Default `true`  */
    canClickOutsideClose?: boolean;
    /** Whether the outer overlay container should be scrollable. Default `false`  */
    scrollable?: boolean;
    /** Whether the overlay should capture focus on mount if the focus is outside of the overlay. Default `true`  */
    autofocus?: boolean;
    children?: ReactNode;
    zIndex?: keyof Layers;
}

/**
 * @public
 */
export declare const P1: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P10: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P11: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P12: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P13: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P14: StyledComponent<"code", DefaultTheme, {}, never>;

/**
 * @public
 */
export declare const P15: StyledComponent<"code", DefaultTheme, {}, never>;

/**
 * @public
 */
export declare const P16: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P17: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P18: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P2: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P3: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P4: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P5: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P6: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P7: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P8: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const P9: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare function Pagination({ perPage, currentPage, totalItems, uniqueItems, onPageChange, onPerPageChange, displayItems, itemsPerPageText, ofTotalText, uniqueItemsText, navigationLabel, previousPageLabel, nextPageLabel, itemsPerPageLabel, pageLabel, }: PaginationProps): JSX.Element;

/**
 * @public
 */
export declare interface PaginationProps {
    perPage: RowsPerPage;
    currentPage: number;
    totalItems: number;
    uniqueItems?: number;
    onPageChange: (page: number) => void;
    onPerPageChange?: (rowsPerPage: RowsPerPage) => void;
    displayItems: DisplayItem[];
    itemsPerPageText: string;
    /** A string which includes \{total\}, which internally will be replaced by a number e.g. "of \{total\}" */
    ofTotalText: string;
    /** A string which includes \{unique\}, which internally will be replaced by a number e.g. \"(\{unique\} Unique items)\" */
    uniqueItemsText: string;
    /** Accessible labels for the pagination controls. Provide translated strings
     * for i18n; each defaults to its English equivalent. */
    navigationLabel?: string;
    previousPageLabel?: string;
    nextPageLabel?: string;
    itemsPerPageLabel?: string;
    pageLabel?: string;
}

/**
 * @public
 * @deprecated Don't use outside this file, use the styled typography components instead eg <TSpan type="h_h1" /> or <HH1 />
 */
export declare const paragraphStyled: {
    p_p1: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p1_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p1_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p1_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p1_paragraph_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p1_paragraph_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2_paragraph_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2_paragraph_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3_paragraph_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3_paragraph_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4_paragraph_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4_paragraph_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p1: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p2: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p3: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p4: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p5: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p6: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p7: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p8: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p9: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p10: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p11: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p12: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p13: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p14: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p15: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p16: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p17: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p18: FlattenInterpolation<ThemeProps<DefaultTheme>>;
};

/**
 * @public
 */
export declare type PathToSelectedItem = {
    key: string;
    searchTerm?: string;
}[];

/**
 * @public
 */
export declare function Pill({ label, icon, subStatus, backgroundColor, textColor, subStatusBackgroudcolor, isCompact, border, themeColor, type, ...rest }: PillProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface PillProps {
    textColor: string;
    backgroundColor: string;
    subStatusBackgroudcolor?: string;
    label?: ReactNode;
    icon?: AnyIcon;
    subStatus?: string;
    isCompact?: boolean;
    border?: string;
    className?: string;
    themeColor?: ThemeColorKey;
    type?: TProps["type"];
}

export { Placement }

/** Display content relative to the target element using popper.js and react
 * portal
 * @public
 */
export declare function Popover(props: PopoverProps): JSX.Element;

/**
 * Props passed to the render-prop children of Popover.
 * @public
 */
export declare interface PopoverChildrenProps {
    /** Whether the Popper is open */
    isOpen: boolean;
    onContextMenu?: MouseEventHandler;
    onClick?: MouseEventHandler;
    onMouseEnter?: MouseEventHandler;
    onMouseLeave?: MouseEventHandler;
    /** Ref to the target element  */
    ref: Ref<any>;
    /**
     * The id applied to the popover content container.
     * Spread `triggerProps` onto your trigger element to wire ARIA automatically,
     * or use this id directly with your own `aria-controls`.
     */
    contentId: string;
    /**
     * Ready-made ARIA props for the trigger element.
     * Contains `aria-controls`, `aria-expanded`, and optionally `aria-haspopup`
     * (when you pass `contentRole` to Popover). Spread onto the trigger:
     *
     * ```tsx
     * <Popover contentRole="menu" ...>
     *   {({ ref, triggerProps, ...handlers }) => (
     *     <button ref={ref} {...triggerProps} {...handlers}>Open</button>
     *   )}
     * </Popover>
     * ```
     */
    triggerProps: {
        "aria-controls": string;
        "aria-expanded": boolean;
        "aria-haspopup"?: AriaAttributes["aria-haspopup"];
    };
}

/**
 * @public
 */
export declare interface PopoverProps {
    /** Popover target - either wrapped with a span container or a render props interface */
    children?: JSX.Element | null | ((props: PopoverChildrenProps) => ReactNode);
    /** The content to be positioned relative to the target children */
    content: ReactNode;
    /** How popper should attempt to position its content relative to the target */
    placement?: Placement;
    /** Optionally control the open state of the content */
    isOpen?: boolean;
    /** Optionally get events for when Popper would like to close */
    onRequestClose?: () => void;
    /** The interaction type for popover events - default `"click"` */
    interactionType?: InteractionType;
    /** A value in milliseconds that will delay the interaction event from triggering */
    interactionDelay?: number | [number, number];
    /** Disable the popover */
    clickable?: boolean;
    disabled?: boolean;
    /** This is rendered by default in a portal within the `<body/>`,
     * but as a last resort you can set the z-index */
    setIndex?: number;
    /** Whether the popper component should render an arrow - default `false` */
    arrow?: boolean;
    /** Whether to render the popover in a portal - default true */
    usePortal?: boolean;
    /**  Modifiers, i.e for offset: */
    modifiers?: StrictModifiers[] | undefined;
    onOpenStateChange?: (isOpen: boolean) => void;
    style?: MotionStyle;
    /**
     * When set, populates `aria-haspopup` on the trigger via `triggerProps`.
     * Typically `"menu"` when the popover contains a Menu. Opt-in only — omit
     * to leave `aria-haspopup` off the trigger (preserving existing behaviour
     * for plain popovers / tooltips).
     */
    contentRole?: AriaAttributes["aria-haspopup"];
    /**
     * An explicit id to apply to the popover content container.
     * A stable generated id is used when omitted.
     */
    contentId?: string;
}

/**
 * Component that renders its children in a react `createPortal` in a container
 * absolutely positioned to the top of the viewport. You are probably looking for
 * `Overlay` or `Dialog` instead of this.
 * @public
 */
export declare function Portal({ children }: PortalProps): ReactPortal | null;

/**
 * @public
 */
export declare interface PortalProps {
    children: ReactNode;
}

/**
 * @public
 */
export declare type Position = {
    x: number;
    y: number;
};

/**
 * @public
 */
export declare const PP1: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP1Medium: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP1Paragraph: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP1ParagraphMedium: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP1ParagraphSemibold: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP1Semibold: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP2: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP2Medium: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP2Paragraph: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP2ParagraphMedium: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP2ParagraphSemibold: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP2Semibold: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP3: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP3Medium: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP3Paragraph: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP3ParagraphMedium: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP3ParagraphSemibold: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP3Semibold: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP4: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP4Medium: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP4Paragraph: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP4ParagraphMedium: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP4ParagraphSemibold: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare const PP4Semibold: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

/**
 * @public
 */
export declare type QuickActionProps = {
    quickAction: true;
    intent?: ButtonIntent;
    borderColor?: ThemeColorKey;
    backgroundColor?: ThemeColorKey;
    round?: true | "left" | "right";
    withoutShadow?: boolean;
    withBorder?: boolean;
    active?: boolean;
    padded?: boolean;
};

/**
 * @public
 */
export declare function Radio({ label, labelIsPrefix, checked, id, isDisplayOnly, style, disabled, error, size, ...rest }: RadioProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
    size?: number;
    label?: string;
    labelIsPrefix?: boolean;
    isDisplayOnly?: boolean;
    error?: boolean;
}

/**
 * @public
 */
export declare const RoundedLabelTag: ({ label, withClose, onCloseClick, onLabelClick, closeIcon, capitalize, className, addMargin, icon, size, backgroundColor, borderColor, textColor, removeLabel, }: RoundedLabelTagProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare interface RoundedLabelTagProps {
    backgroundColor: ThemeColorKey | React_2.CSSProperties["backgroundColor"];
    borderColor?: ThemeColorKey | React_2.CSSProperties["borderColor"];
    textColor?: ThemeColorKey | React_2.CSSProperties["color"];
    label: ReactNode;
    withClose?: boolean;
    onCloseClick?: (e: MouseEvent_2<HTMLButtonElement>) => void;
    onLabelClick?: (e: MouseEvent_2<HTMLButtonElement>) => void;
    closeIcon?: AnyIcon;
    capitalize?: boolean;
    className?: string;
    addMargin?: boolean;
    icon?: AnyIcon;
    size?: "small" | "medium" | "large";
    /** Accessible label for the remove button. Provide a translated string for
     * i18n. Defaults to `Remove {label}`. */
    removeLabel?: string;
}

/**
 * @public
 */
export declare function RowCard({ children, isSelected, isNew, isLoading, isPending, onChange, }: RowCardProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface RowCardProps {
    children: ReactNode;
    isSelected?: boolean;
    isNew?: boolean;
    isLoading?: boolean;
    isPending?: boolean;
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
}

export declare type RowsPerPage = 10 | 20 | 50;

/**
 *  @public
 */
export declare const SafePolygon: ({ onMouseEnterTooltip, onMouseLeaveTooltip, placement, tooltipRef, tooltipPosition, tooltipTriggerMousePosition, triggerRef, debug, ...props }: {
    onMouseEnterTooltip: () => void;
    onMouseLeaveTooltip: () => void;
    placement: TooltipPlacement;
    tooltipRef: RefObject<HTMLDivElement>;
    tooltipPosition: Position;
    tooltipTriggerMousePosition?: Position;
    triggerRef: RefObject<HTMLDivElement>;
    debug?: string;
} & React_2.HTMLAttributes<HTMLDivElement>) => React_2.JSX.Element | null;

/**
 * @public
 */
export declare const Scrollbar: React_2.ForwardRefExoticComponent<ScrollbarProps & React_2.RefAttributes<SimpleBar_2>>;

/**
 * @public
 */
export declare interface ScrollbarProps extends Props {
    height?: string;
    width?: string;
    style?: CSSProperties | undefined;
    autoHide?: boolean;
}

/**
 * @public
 */
export declare const secondsToTime: (value: number) => {
    hrs: number;
    mins: number;
    secs: number;
};

/**
 * @public
 */
export declare function Select({ options, optGroup, fillWidth, placeholder, onChange, defaultValue, error, inline, required, ...rest }: SelectProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface SelectProps extends HTMLSelectAttributes {
    options?: HTMLOptionAttributes[];
    optGroup?: HTMLOptgroupAttributes[];
    fillWidth?: boolean;
    error?: boolean;
    inline?: boolean;
    placeholder?: string;
}

/**
 * @public
 */
export declare const Shortcode: StyledComponent<"p", DefaultTheme, {
type: string;
}, "type">;

export declare type SizeTypes = "small" | "medium";

/**
 * @public
 */
export declare function SPA({ children }: {
    children?: ReactNode;
}): React_2.JSX.Element;

/**
 * @public
 */
export declare const Spacer: ({ width }: SpacerProps) => React_2.JSX.Element;

export declare type SpacerProps = {
    width?: string | number;
};

/**
 * @public
 */
export declare function Spinner({ size, color, "aria-label": ariaLabel, "aria-hidden": ariaHidden, }: SpinnerProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface SpinnerProps {
    size?: SpinnerSize;
    color?: ThemeColorKey;
    /** Accessible label announced to screen readers. Defaults to "Loading". */
    "aria-label"?: string;
    /**
     * Set to "true" when the spinner is nested inside a parent live region that
     * already announces the loading state, so it is not read out twice.
     */
    "aria-hidden"?: React_2.AriaAttributes["aria-hidden"];
}

/**
 * @public
 */
export declare type SpinnerSize = "extra-small" | "small" | "medium" | "large" | "extra-large";

/**
 * A Stack is a container that helps you define the layout of children components.
 * This is basically a wrapper around flexbox.
 * @public
 */
export declare const Stack: StyledComponent<"div", DefaultTheme, StackProps, never>;

/**
 * @public
 */
export declare const StackItem: StyledComponent<"div", DefaultTheme, StackItemProps, never>;

/**
 * @public
 */
export declare interface StackItemProps {
    basis?: number | string;
    grow?: boolean | number;
    shrink?: boolean | number;
    padding?: number | string;
    gap?: number | string;
    fixedHeight?: number | string;
    justifySelf?: React.CSSProperties["justifySelf"];
    alignSelf?: React.CSSProperties["alignSelf"];
    flex?: React.CSSProperties["flex"];
}

/**
 * @public
 */
export declare interface StackProps {
    /**
     * The max width of the container
     */
    maxWidth?: number | string;
    /**
     * The max height of the container
     */
    maxHeight?: number | string;
    /**
     * Inner padding to apply to the stack container element
     */
    padding?: number | string;
    /**
     * The margin to apply to items
     */
    gap?: number | string;
    /**
     * The height to apply to items
     */
    fixedHeight?: number | string;
    /**
     * How to align the items within the container
     */
    align?: "start" | "end" | "center" | "baseline" | "stretch";
    /**
     * Specify if to use inline-flex, defaults to false
     */
    inline?: boolean;
    /**
     * Define a border bottom
     */
    borderBottom?: boolean;
    /**
     * How to justify the items within the container
     */
    justify?: React.CSSProperties["justifyContent"] | "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "baseline";
    /**
     * Specify if the stack itself should grow
     * (i.e. if the stack is a child of some other flex element)
     */
    grow?: boolean | number | "inherit" | "initial" | "unset";
    /**
     * Specify if the stack itself should shrink
     * (i.e. if the stack is a child of some other flex element)
     */
    shrink?: boolean | number | "inherit" | "initial" | "unset";
    /**
     * Specify if the flex items are forced onto one lone or can
     * wrap onto multiple line. "wrap" can be useful for expanding a
     * StackItem to full width of it's parent StackContainer
     */
    wrap?: "wrap" | "reverse" | "nowrap" | "inherit" | "initial" | "unset";
    /**
     * Layout items vertically (flex column instead of row)
     */
    vertical?: boolean;
    /**
     * Layout items in reverse of their order
     */
    reverse?: boolean;
    /**
     * if 0 grow not relative to size - it's relative to space
     */
    basis?: string;
    overflow?: React.CSSProperties["overflow"];
}

/**
 * @public
 */
export declare interface StandardLabelColors {
    brandShade: LabelColors;
    amber: LabelColors;
    beige: LabelColors;
    brown: LabelColors;
    burgundy: LabelColors;
    coral: LabelColors;
    cyan: LabelColors;
    cyan_light: LabelColors;
    green: LabelColors;
    grey: LabelColors;
    grey_black: LabelColors;
    lavender: LabelColors;
    lemon: LabelColors;
    lime: LabelColors;
    magenta: LabelColors;
    myrtle: LabelColors;
    olive: LabelColors;
    orange: LabelColors;
    pink: LabelColors;
    pink_light: LabelColors;
    purple: LabelColors;
    purple_light: LabelColors;
    red: LabelColors;
    rose_dawn: LabelColors;
    sage: LabelColors;
    sky_blue: LabelColors;
    turquoise: LabelColors;
    turquoise_light: LabelColors;
    vermilion: LabelColors;
    violet: LabelColors;
    yellow: LabelColors;
    jasper: LabelColors;
    ochre: LabelColors;
}

/**
 * @public
 */
export declare const StyledA: StyledComponent<"a", DefaultTheme, {
underline?: boolean;
}, never>;

export declare type SVGRIconType = (props: ComponentProps<"svg">) => JSX.Element;

/**
 * @public
 */
export declare const Tab: React_2.ForwardRefExoticComponent<TabProps & React_2.RefAttributes<HTMLAnchorElement>>;

/**
 * @public
 */
export declare const TabBar: ({ tabs, activeIndex, onClickTab, type, isTicketHistory, tooltipStyle, tooltipPlacement, containerStyles, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id: providedId, ...rest }: TabBarProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare type TabBarItemType = {
    label: ReactNode;
    icon?: AnyIcon;
    disabled?: boolean;
    tooltip?: ReactNode;
};

/**
 * @public
 */
export declare interface TabBarProps extends HTMLAttributes<HTMLDivElement> {
    tabs: TabBarItemType[];
    activeIndex?: number;
    onClickTab: (activeIndex: number) => void;
    type?: TabType;
    isTicketHistory?: boolean;
    tooltipStyle?: ModalStyleTypes;
    tooltipPlacement?: TooltipPlacement;
    containerStyles?: CSSProperties_2;
    className?: string;
    /** Accessible label for the tablist */
    "aria-label"?: string;
    /** Id of the element that labels this tablist */
    "aria-labelledby"?: string;
    id?: string;
}

/**
 * @public
 */
export declare interface TabBarTabProps {
    icon?: AnyIcon;
    label: ReactNode;
    active: boolean;
    onClick: () => void;
    onKeyDown?: (event: KeyboardEvent_2<HTMLDivElement>) => void;
    type: TabType;
    disabled?: boolean;
    isTicketHistory?: boolean;
    tooltip?: ReactNode;
    tooltipStyle?: ModalStyleTypes;
    tooltipPlacement?: TooltipPlacement;
}

/**
 * @public
 */
export declare const TabbedSectionBody: StyledComponent<"div", DefaultTheme, StackProps & {
vertical: boolean;
}, "vertical">;

/**
 * @public
 */
export declare const TabbedSectionContainer: StyledComponent<"div", DefaultTheme, StackProps, never>;

/**
 * @public
 */
export declare interface TabbedSectionProps<TabId> {
    children?: ReactNode;
    tabs: TabbedSectionTabType<TabId>[];
    activeTab?: TabId;
    onTabChange: (value: TabbedSectionTabType<TabId>) => void;
    tabsWrapperStyles?: React_2.CSSProperties;
    rightElement?: React_2.ReactNode;
    isTicketHistory?: boolean;
    tabType?: "button" | "tab";
    className?: string;
    /** Explicit id for the tablist element */
    id?: string;
    /** Accessible label for the tablist */
    "aria-label"?: string;
    /** Id of the element that labels this tablist */
    "aria-labelledby"?: string;
}

/**
 * @public
 */
export declare function TabbedSectionTabs<TabId = string>({ tabs, activeTab, onTabChange, children, tabsWrapperStyles, rightElement, tabType, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id: providedId, }: TabbedSectionProps<TabId>): React_2.JSX.Element;

/**
 * @public
 */
export declare interface TabbedSectionTabType<TabId = string> {
    id: TabId;
    title: string;
    disabled?: boolean;
    /** used to set the aria-controls prop of tab */
    controls?: string;
}

/**
 * @public
 */
export declare const TabbedSectionTitleBar: StyledComponent<"div", DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface TabProps extends HTMLAttributes<HTMLAnchorElement> {
    active?: boolean;
    fill?: boolean;
    hasOptions?: boolean;
    /** Provide a stable id for aria-controls / aria-labelledby wiring */
    id?: string;
    /** Id of the tabpanel this tab controls */
    "aria-controls"?: string;
}

/**
 * @public
 */
export declare function Tabs({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-orientation": ariaOrientation, id: providedId, }: TabsProps): React_2.JSX.Element;

/**
 * Props for the Tabs container (tablist).
 * @public
 */
export declare interface TabsProps {
    children: ReactNode;
    /** Accessible label for the tablist — provide when the context does not supply a visible heading */
    "aria-label"?: string;
    /** Id of the element that labels this tablist */
    "aria-labelledby"?: string;
    /** Set to "vertical" when the tablist is laid out vertically */
    "aria-orientation"?: "horizontal" | "vertical";
    id?: string;
}

export declare type TabStyleDef = {
    container?: () => FlattenInterpolation<ThemeProps<DefaultTheme>>;
    TabContainer?: (props: {
        active?: boolean;
        disabled?: boolean;
        isTicketHistory?: boolean;
    }) => FlattenInterpolation<ThemeProps<DefaultTheme>>;
    TabInner?: (props: {
        active?: boolean;
        disabled?: boolean;
        isTicketHistory?: boolean;
    }) => FlattenInterpolation<ThemeProps<DefaultTheme>>;
    label?: () => FlattenInterpolation<ThemeProps<DefaultTheme>>;
};

export declare type TabStyles = {
    bar: TabStyleDef;
    button: TabStyleDef;
    nav: TabStyleDef;
    tab: TabStyleDef;
};

/**
 * @public
 */
export declare type TabType = keyof TabStyles;

/**
 * @public
 */
export declare const Tag: ({ color, label, withClose, onCloseClick, onLabelClick, closeIcon, capitalize, className, addMargin, icon, size, maxWidth, removeLabel, }: TagProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare const TagCircleIcon: ({ color, icon, size, iconSize, isVisible, name, showTooltip, liteAgent, }: TagCircleIconProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare interface TagCircleIconProps {
    color: LabelColorKeys;
    icon: AnyIcon;
    size: AvatarSize;
    iconSize?: number;
    isVisible?: boolean;
    name?: string;
    showTooltip?: boolean;
    liteAgent?: boolean;
}

/**
 * @public
 */
export declare const TagCircleLetter: ({ color, name, size, className, showTooltip, liteAgent, }: TagLetterCircleProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare interface TagLetterCircleProps {
    color?: LabelColorKeys;
    name: string;
    size: AvatarSize;
    className?: string;
    showTooltip?: boolean;
    liteAgent?: boolean;
}

/**
 * @public
 */
export declare const TagLoading: ({ children, width, addMargin }: TagLoadingProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare interface TagLoadingProps {
    children?: ReactNode;
    width?: string;
    addMargin?: boolean;
}

/**
 * @public
 */
export declare const TagNumber: ({ number, icon, color }: TagNumberProps) => JSX.Element;

/**
 * @public
 */
export declare interface TagNumberProps {
    color: LabelColorKeys;
    number: number;
    icon?: AnyIcon;
}

/**
 * @public
 */
export declare interface TagProps {
    color: LabelColors;
    label: ReactNode;
    withClose?: boolean;
    onCloseClick?: () => void;
    onLabelClick?: () => void;
    closeIcon?: AnyIcon;
    capitalize?: boolean;
    className?: string;
    addMargin?: boolean;
    icon?: AnyIcon;
    size?: "small" | "large";
    maxWidth?: number;
    /** Accessible label for the remove button. Provide a translated string for
     * i18n. Defaults to `Remove {label}`. */
    removeLabel?: string;
}

/**
 * @public
 */
export declare const TextArea: StyledComponent<React_2.ForwardRefExoticComponent<TextAreaProps & React_2.RefAttributes<HTMLTextAreaElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
    error?: boolean;
    required?: boolean;
    variant?: InputVariant;
    calcRow?: boolean;
    rightIcon?: JSX.Element | null;
}

/**
 * @public
 */
export declare const TextAreaWithDisplay: StyledComponent<React_2.ForwardRefExoticComponent<TextAreaWithDisplayProps & React_2.RefAttributes<HTMLTextAreaElement>>, DefaultTheme, {}, never>;

/**
 * @public
 */
export declare interface TextAreaWithDisplayProps extends TextAreaProps {
    onClickInputGroup?: MouseEventHandler<HTMLSpanElement>;
    /** allows parent to control switching between input and div */
    isVisibleInput?: boolean;
    maxRows?: number;
    removeHoverStyle?: boolean;
    /** prevents switching from div to input by clicking on div (use with isVisibleInput) */
    disableEditOnClick?: boolean;
    /** for search highlighting */
    highlightWord?: string;
}

/**
 * @public
 */
export declare type ThemeColorKey = keyof ThemeColors;

/**
 * @public
 */
export declare interface ThemeColors {
    brandPrimary: CssColor;
    brandSecondary: CssColor;
    white: CssColor;
    systemShade100: CssColor;
    systemShade80: CssColor;
    systemShade40: CssColor;
    systemShade30: CssColor;
    systemShade20: CssColor;
    systemShade10: CssColor;
    grey500: CssColor;
    grey100: CssColor;
    grey80: CssColor;
    grey60: CssColor;
    grey40: CssColor;
    grey30: CssColor;
    grey20: CssColor;
    grey10: CssColor;
    grey5: CssColor;
    grey3: CssColor;
    brandShade100: CssColor;
    brandShade80: CssColor;
    brandShade60: CssColor;
    brandShade50: CssColor;
    brandShade40: CssColor;
    brandShade20: CssColor;
    brandShade10: CssColor;
    cyan120: CssColor;
    cyan100: CssColor;
    cyan90: CssColor;
    cyan80: CssColor;
    cyan40: CssColor;
    cyan20: CssColor;
    cyan10: CssColor;
    red100: CssColor;
    red80: CssColor;
    red60: CssColor;
    red40: CssColor;
    red20: CssColor;
    red10: CssColor;
    pink100: CssColor;
    pink80: CssColor;
    pink40: CssColor;
    pink20: CssColor;
    pink10: CssColor;
    orange100: CssColor;
    orange80: CssColor;
    orange40: CssColor;
    orange20: CssColor;
    orange10: CssColor;
    yellow100: CssColor;
    yellow80: CssColor;
    yellow40: CssColor;
    yellow20: CssColor;
    yellow10: CssColor;
    purple100: CssColor;
    purple80: CssColor;
    purple40: CssColor;
    purple20: CssColor;
    purple10: CssColor;
    amethyst100: CssColor;
    amethyst80: CssColor;
    amethyst40: CssColor;
    amethyst20: CssColor;
    amethyst10: CssColor;
    turquoise100: CssColor;
    turquoise80: CssColor;
    turquoise40: CssColor;
    turquoise20: CssColor;
    turquoise10: CssColor;
    green100: CssColor;
    green80: CssColor;
    green40: CssColor;
    green20: CssColor;
    green10: CssColor;
    jasper100: CssColor;
    jasper80: CssColor;
    jasper40: CssColor;
    jasper20: CssColor;
    jasper10: CssColor;
    ochre100: CssColor;
    ochre80: CssColor;
    ochre40: CssColor;
    ochre20: CssColor;
    ochre10: CssColor;
    scarlett100: CssColor;
    scarlett80: CssColor;
    scarlett40: CssColor;
    scarlett20: CssColor;
    scarlett10: CssColor;
    dark100: CssColor;
    dark80: CssColor;
    dark40: CssColor;
    amber100: CssColor;
    amber10: CssColor;
    beige100: CssColor;
    beige10: CssColor;
    brown100: CssColor;
    brown10: CssColor;
    burgundy100: CssColor;
    burgundy10: CssColor;
    coral100: CssColor;
    coral10: CssColor;
    grey_black100: CssColor;
    grey_black10: CssColor;
    lavender100: CssColor;
    lavender10: CssColor;
    lemon100: CssColor;
    lemon10: CssColor;
    lime100: CssColor;
    lime10: CssColor;
    magenta100: CssColor;
    magenta10: CssColor;
    myrtle100: CssColor;
    myrtle10: CssColor;
    olive100: CssColor;
    olive10: CssColor;
    pink_light100: CssColor;
    pink_light10: CssColor;
    purple_light100: CssColor;
    purple_light10: CssColor;
    rose_dawn100: CssColor;
    rose_dawn10: CssColor;
    sage100: CssColor;
    sage20: CssColor;
    sage10: CssColor;
    sky_blue100: CssColor;
    sky_blue10: CssColor;
    turquoise_light100: CssColor;
    turquoise_light10: CssColor;
    vermilion100: CssColor;
    vermilion10: CssColor;
    violet100: CssColor;
    violet10: CssColor;
    navy100: CssColor;
    neonNavy100: CssColor;
    ultramarine100: CssColor;
    ultramarine10: CssColor;
    emerald100: CssColor;
    emerald10: CssColor;
}

/**
 * @public
 */
export declare interface ThemeFonts {
    primary: React.CSSProperties["fontFamily"];
    headingPrimary: React.CSSProperties["fontFamily"];
    monospace: React.CSSProperties["fontFamily"];
    baseSize: React.CSSProperties["fontFamily"];
    inter: React.CSSProperties["fontFamily"];
}

/**
 * @public
 */
export declare const ThemeProvider: (props: ThemeProviderProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare interface ThemeProviderProps {
    children: ReactNode;
    theme: DeskproTheme;
}

/**
 * @public
 */
export declare const TimeDisplay: ({ time, hoursText, minutesText, secondsText }: TimeInputProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare function TimeInput({ time, setTime, controlTime, hoursText, minutesText, secondsText, }: TimeInputProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface TimeInputProps {
    time: number;
    setTime?: (value: number) => void;
    /** Used to control the displayed time when not using as a input field IE timer in NewTimeCharge.tsx  */
    controlTime?: boolean;
    hoursText: ReactNode;
    minutesText: ReactNode;
    secondsText: ReactNode;
}

/**
 * @public
 */
export declare type TippyModalStyleTypes = "extraDark" | "dark" | "light" | "lightBox" | "lightBoxModal";

/**
 * @public
 * @deprecated Due to Tippy causing memory leaks. Use {@link Tooltip} instead.
 */
export declare const TippyTooltip: StyledComponent<({ suppressClassNameWarning, styleType, arrow, width, offsetTop, styledCss, customComponent, arrowColor, offsetLeft, borderRadius, onPresEsc, enableOnTouchDevices, ...props }: TippyTooltipProps) => React_2.JSX.Element, DefaultTheme, {
suppressClassNameWarning: true;
}, "suppressClassNameWarning">;

/**
 * @public
 */
export declare function TippyTooltipCommonIcon({ content, styleType, placement, iconSize, }: TippyTooltipCommonIconProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface TippyTooltipCommonIconProps {
    styleType?: "dark" | "light" | "lightBox";
    content: string;
    placement?: "top" | "bottom" | "left" | "right";
    iconSize?: number;
}

/**
 * @public
 */
export declare type TippyTooltipPlacement = TippyProps["placement"];

/**
 * @public
 * @deprecated Due to Tippy causing memory leaks. Use {@link Tooltip} instead.
 */
export declare interface TippyTooltipProps extends TippyProps {
    styleType?: TippyModalStyleTypes;
    suppressClassNameWarning?: boolean;
    width?: number | string;
    offsetTop?: number | string;
    offsetLeft?: number;
    styledCss?: FlattenSimpleInterpolation | CSSProp;
    customComponent?: boolean;
    arrowColor?: ThemeColorKey;
    borderRadius?: number;
    onPresEsc?: () => void;
    enableOnTouchDevices?: boolean;
}

/**
 * @public
 */
export declare function Toggle({ id, checked, className, style, disabled, size, isLoading, isLocked, indeterminate, label, customLabel, labelIsPrefix, ...rest }: ToggleProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "ref" | "type" | "style" | "className"> {
    checked?: boolean;
    size?: SizeTypes;
    isLoading?: boolean;
    isLocked?: boolean;
    indeterminate?: boolean;
    style?: CSSProperties;
    className?: string;
    label?: ReactNode;
    customLabel?: ReactNode;
    labelIsPrefix?: boolean;
}

/**
 * A toolbar is a wrapper around Stack that helps you lay
 * things out in a way that is pretty common for toolbars.
 * @public
 */
export declare const Toolbar: ToolBarType;

export declare type ToolbarItemType = StyledComponent<"div", DefaultTheme, StackItemProps>;

export declare type ToolbarStackType = StyledComponent<"div", DefaultTheme, StackProps>;

export declare type ToolBarType = ToolbarStackType & {
    Item: ToolbarItemType;
    Spacer: () => JSX.Element;
};

/**
 * @public
 */
export declare const Tooltip: ({ styleType, width, maxWidth, offsetTop, offsetLeft, offset, visible, interactive, safePolygon, styledCss, customComponent, borderRadius, onPressEsc, enableOnTouchDevices, placement, disabled, content, alwaysRenderContent, className, delay, hideOnClick, onClickOutside, onShow, onHide, duration, arrow, arrowColor, children, preventOverflow, allowReposition, flip, debug, zIndex, triggerRef: outerTriggerRef, }: TooltipProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare const TooltipBox: StyledComponent<"div", DefaultTheme, {
padding?: string;
styleType?: ModalStyleTypes;
borderRadius?: number;
offset: [number, number];
duration?: number;
}, never>;

/**
 * @public
 */
export declare function TooltipCommonIcon({ content, styleType, placement, iconSize, icon, }: TooltipCommonIconProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface TooltipCommonIconProps {
    styleType?: "dark" | "light" | "lightBox";
    content: string;
    placement?: "top" | "bottom" | "left" | "right";
    iconSize?: number;
    icon?: AnyIcon;
}

/**
 * @public
 */
export declare type TooltipPlacement = "auto" | "auto-start" | "auto-end" | "top" | "left" | "bottom" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";

/**
 * @public
 */
export declare interface TooltipProps {
    styleType?: ModalStyleTypes;
    width?: number | string;
    maxWidth?: number | string;
    offsetTop?: number;
    offsetLeft?: number;
    offset?: [number, number];
    styledCss?: FlattenSimpleInterpolation | CSSProp;
    customComponent?: boolean;
    borderRadius?: number;
    onPressEsc?: () => void;
    enableOnTouchDevices?: boolean;
    children?: React_2.ReactNode;
    content?: React_2.ReactNode;
    alwaysRenderContent?: boolean;
    visible?: boolean;
    disabled?: boolean;
    className?: string;
    delay?: number | [number, number];
    duration?: number;
    hideOnClick?: boolean;
    interactive?: boolean;
    placement?: TooltipPlacement;
    onClickOutside?: () => void;
    onShow?: () => void;
    onHide?: () => void;
    arrow?: boolean;
    arrowColor?: keyof ThemeColors;
    preventOverflow?: boolean;
    allowReposition?: boolean;
    /**
     * Default `true`. If the tooltip doesn't fit in `placement` position, cycle through placementMap positions until a fit is found.
     * If `false` then use `placement` position - consider using in combination with `preventOverflow` or `allowReposition` to avoid overflowing the page bounds.
     */
    flip?: boolean;
    debug?: string;
    safePolygon?: boolean;
    triggerRef?: React_2.RefObject<HTMLDivElement>;
    zIndex?: keyof Layers;
}

/**
 * @public
 */
export declare const TooltipTrigger: ({ triggerRef, isOpen, tooltipId, interactive, visible, handleClose, handleOpen, openDelay, closeDelay, delayOpenRef, delayCloseRef, setTooltipTriggerMousePosition, safePolygon, dpName, children, }: TooltipTriggerProps) => React_2.JSX.Element;

/**
 * @public
 */
export declare type TooltipTriggerProps = {
    triggerRef: Ref<HTMLDivElement>;
    isOpen: boolean;
    /** Id of the tooltip content, linked via aria-describedby while open. */
    tooltipId?: string;
    interactive?: boolean;
    visible?: boolean;
    openDelay?: number;
    closeDelay?: number;
    delayOpenRef: MutableRefObject<number | undefined>;
    delayCloseRef: MutableRefObject<number | undefined>;
    handleOpen: () => void;
    handleClose: () => void;
    setTooltipTriggerMousePosition: Dispatch<SetStateAction<{
        x: number;
        y: number;
    } | undefined>>;
    safePolygon?: boolean;
    dpName?: string;
    children: ReactNode;
};

/**
 * @public
 */
export declare interface TProps {
    type: TypesV1 | TypesV2;
    overflow?: React.CSSProperties["textOverflow"];
    flex?: React.CSSProperties["flex"];
    $fill?: boolean;
    themeColor?: ThemeColorKey;
    font?: keyof ThemeFonts;
    textAlign?: React.CSSProperties["textAlign"];
    transform?: React.CSSProperties["textTransform"];
    as?: string | ComponentType<unknown> | undefined;
}

/**
 * @public
 */
export declare const TSpan: StyledComponent<"span", DefaultTheme, TProps, never>;

/**
 * @public
 * @deprecated Use v2Styles instead
 */
export declare type TypesV1 = keyof typeof v1Styles;

/**
 * @public
 */
export declare type TypesV2 = keyof typeof v2Styles;

/**
 * @public
 */
export declare const UnstyledA: StyledComponent<"a", DefaultTheme, {
underline?: boolean;
}, never>;

/**
 * @public
 */
export declare type UpdateItemsTreeCb<T> = (items: DrilldownItemTreeType<T>[]) => DrilldownItemTreeType<T>[];

/**
 * @public
 */
export declare type UpdateItemTreeCb<T> = (item: DrilldownValueTreeType<T>, isSelected: boolean) => DrilldownValueTreeType<T>;

/**
 * @public
 */
export declare function UrgencyCircle({ urgency, size, className, strikethrough, }: UrgencyCircleProps): React_2.JSX.Element;

/**
 * @public
 */
export declare interface UrgencyCircleProps {
    urgency: number;
    size?: AvatarSize;
    className?: string;
    strikethrough?: boolean;
}

/**
 * @public
 */
export declare type UrgencyColor = {
    background: string;
    textColor: string;
    subStatusBackgroundColor: string;
};

/**
 * @public
 */
export declare type UrgencyColors = {
    [id: string]: UrgencyColor;
};

/**
 * @public
 */
export declare function UrgencyPill({ intent, label, icon, subStatus, isCompact }: UrgencyPillProps): React_2.JSX.Element;

/**
 * @public
 */
export declare type UrgencyPillIntent = "urgency1" | "urgency2" | "urgency3" | "urgency4" | "urgency5" | "urgency6" | "urgency7" | "urgency8" | "urgency9" | "urgency10";

/**
 * @public
 */
export declare interface UrgencyPillProps {
    intent: UrgencyPillIntent;
    label?: ReactNode;
    icon?: AnyIcon;
    subStatus?: string;
    isCompact?: boolean;
}

/**
 * @public
 */
export declare const UrgencyStatus: StyledComponent<typeof UrgencyCircle, DefaultTheme, {}, never>;

/**
 * @public
 * @deprecated Support for this formik ultity will be dropped
 */
export declare function useFastField<Val = any>(propsOrFieldName: string | FieldHookConfig<Val>): [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>];

/**
 * Returns a stable, unique id suitable for wiring ARIA relationships
 * (`aria-labelledby`, `aria-describedby`, `aria-controls`, `htmlFor`, the
 * `tab` ↔ `tabpanel` pairing, etc).
 *
 * Wraps React 18's `useId` and lets a caller-supplied id take precedence, so a
 * component can accept an explicit `id` prop while falling back to a generated
 * one. An optional prefix makes ids more readable in the DOM/tests.
 *
 * ```tsx
 * const errorId = useId(props.id ? `${props.id}-error` : undefined, "dp-error");
 * <input aria-describedby={hasError ? errorId : undefined} />
 * {hasError && <span id={errorId}>{errorMessage}</span>}
 * ```
 *
 * @param providedId An explicit id to use instead of a generated one.
 * @param prefix Optional human-readable prefix for the generated id.
 * @public
 */
export declare function useId(providedId?: string, prefix?: string): string;

export declare const useOnLocationChange: (callback?: () => void) => void;

/**
 * @public
 */
export declare const usePosition: ({ offset, offsetLeft, offsetTop, placement, isOpen, disabled, enableOnTouchDevices, triggerRef, tooltipRef, preventOverflow, allowReposition, arrow, flip, }: {
    offset?: [number, number];
    offsetLeft?: number;
    offsetTop?: number;
    placement: TooltipPlacement;
    isOpen: boolean;
    disabled?: boolean;
    enableOnTouchDevices?: boolean;
    triggerRef: RefObject<HTMLDivElement>;
    tooltipRef: RefObject<HTMLDivElement>;
    preventOverflow?: boolean;
    /** @see `getNoOverflowPosition` */
    allowReposition: boolean;
    arrow?: boolean;
    flip?: boolean;
    debug?: string;
}) => {
    position: {
        x: number;
        y: number;
    };
    maxDimensions: {
        width: number;
        height: number;
    } | undefined;
    calculatedPlacement: TooltipPlacement;
    calculatedOffset: [number, number];
    positionTooltip: () => void;
    arrowPosition: {
        x: number;
        y: number;
    };
    isDisabled: boolean;
    tooltipTriggerMousePosition: Position | undefined;
    setTooltipTriggerMousePosition: Dispatch<SetStateAction<Position | undefined>>;
};

/**
 * @public
 */
export declare const useTheme: () => DeskproTheme;

/**
 * @public
 */
export declare const useTooltip: ({ delayOpenRef, delayCloseRef, closeDelay, interactive, visible, handleOpen, handleClose, }: {
    delayOpenRef: React.MutableRefObject<number | undefined>;
    delayCloseRef: React.MutableRefObject<number | undefined>;
    closeDelay?: number;
    interactive?: boolean;
    visible?: boolean;
    handleOpen: () => void;
    handleClose: () => void;
}) => {
    onMouseEnterTooltip: () => void;
    onMouseLeaveTooltip: () => void;
};

/**
 * @public
 * @deprecated Use v2Styles instead
 */
export declare const v1Styles: {
    p1: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p2: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p3: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p4: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p5: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p6: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p7: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p8: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p9: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p10: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p11: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p12: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p13: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p14: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p15: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p16: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p17: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p18: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h0: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h1: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h2: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h3: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h4: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h5: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h6: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h7: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h8: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h9: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h10: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h11: FlattenInterpolation<ThemeProps<DefaultTheme>>;
};

/**
 * @public
 */
export declare const v2Styles: {
    label1: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    label1_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    label1_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    label2: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    monospace: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    monospace_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    monospace_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    shortcode: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p1: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p1_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p1_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p1_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p1_paragraph_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p1_paragraph_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2_paragraph_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p2_paragraph_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3_paragraph_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p3_paragraph_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4_paragraph_medium: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    p_p4_paragraph_semibold: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h1: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h1_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h2: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h2_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h3: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h3_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h4: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h4_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h5: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h5_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h6: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h6_paragraph: FlattenInterpolation<ThemeProps<DefaultTheme>>;
    h_h6_kerning: FlattenInterpolation<ThemeProps<DefaultTheme>>;
};

/**
 * Renders content that is available to screen readers but hidden visually.
 *
 * ```tsx
 * <button>
 *   <Icon icon={faTrash} aria-hidden />
 *   <VisuallyHidden>Delete item</VisuallyHidden>
 * </button>
 * ```
 *
 * @public
 */
export declare const VisuallyHidden: StyledComponent<"span", DefaultTheme, {
"data-dp-name": string;
"data-dp-ident"?: string;
} & VisuallyHiddenProps, keyof {
"data-dp-name": string;
"data-dp-ident"?: string;
}>;

/**
 * The canonical "visually hidden" CSS recipe. Removes an element from the
 * visual layout while keeping it in the accessibility tree **and** the tab
 * order — unlike `display: none` or `visibility: hidden`, which remove the
 * element from both.
 *
 * Use this for:
 * - Real form controls that are visually replaced by a custom-styled element
 *   (e.g. the `<input>` behind a styled Checkbox/Radio/Toggle), so screen
 *   readers and keyboard users can still reach the real control.
 * - Text that should be announced to assistive technology but not shown
 *   (via the {@link VisuallyHidden} component below).
 *
 * @public
 */
export declare const visuallyHidden: FlattenSimpleInterpolation;

/**
 * @public
 */
export declare interface VisuallyHiddenProps {
    /** The element to render. Defaults to `span`. */
    as?: ElementType;
}

/**
 * @public
 */
export declare type WithoutQuickActionProps = {
    quickAction?: never | false;
    intent?: ButtonIntent;
    active?: boolean;
    borderColor?: never;
    backgroundColor?: never;
    round?: never;
    padded?: never;
    withoutShadow?: never;
    withBorder?: never;
};

export { }