@frontify/fondue/dist/index.d.ts

Design system of Frontify

import { Active } from '@dnd-kit/core';
import { AriaAttributes } from 'react';
import { AriaDialogProps } from '@react-types/dialog';
import { AriaListBoxOptions } from '@react-aria/listbox';
import { AriaOverlayProps } from '@react-aria/overlays';
import { ButtonHTMLAttributes } from 'react';
import { Collision } from '@dnd-kit/core';
import { Context } from 'react';
import { createLinkPlugin } from '@udecode/plate-link';
import { createParagraphPlugin } from '@udecode/plate-paragraph';
import { createPluginFactory } from '@udecode/plate-core';
import { createStore } from '@udecode/zustood';
import { CSSProperties } from 'react';
import { default as default_2 } from 'react-datepicker';
import { DetailedHTMLProps } from 'react';
import { Dispatch } from 'react';
import { ELEMENT_LINK } from '@udecode/plate-link';
import { EText } from '@udecode/slate';
import { findNode } from '@udecode/slate';
import { flip } from '@udecode/plate-floating';
import { floatingLinkActions } from '@udecode/plate-link';
import { floatingLinkSelectors } from '@udecode/plate-link';
import { focusEditor } from '@udecode/slate-react';
import { FocusEvent as FocusEvent_2 } from 'react';
import { FocusStrategy } from '@react-types/shared';
import { ForwardedRef } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { getAboveNode } from '@udecode/slate';
import { getDefaultBoundingClientRect } from '@udecode/plate-floating';
import { getEditorString } from '@udecode/slate';
import { getEndPoint } from '@udecode/slate';
import { getNextNodeStartPoint } from '@udecode/slate-utils';
import { getNodeLeaf } from '@udecode/slate';
import { getNodeProps } from '@udecode/slate';
import { getPluginOptions } from '@udecode/plate-core';
import { getPluginType } from '@udecode/plate-core';
import { getPreviousNodeEndPoint } from '@udecode/slate-utils';
import { getRangeBoundingClientRect } from '@udecode/plate-floating';
import { getSelectionBoundingClientRect } from '@udecode/plate-floating';
import { getStartPoint } from '@udecode/slate';
import { HTMLAttributes } from 'react';
import { InputHTMLAttributes } from 'react';
import { insertNodes } from '@udecode/slate';
import { InsertNodesOptions } from '@udecode/slate';
import { isCollapsed } from '@udecode/slate';
import { isDefined } from '@udecode/utils';
import { isElement } from '@udecode/slate';
import { isEndPoint } from '@udecode/slate';
import { isExpanded } from '@udecode/slate';
import { isRangeAcrossBlocks } from '@udecode/slate-utils';
import { isRangeInSameBlock } from '@udecode/slate-utils';
import { isStartPoint } from '@udecode/slate';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { JSXElementConstructor } from 'react';
import { Key } from 'react';
import { KeyboardEvent as KeyboardEvent_2 } from 'react';
import { LinkFloatingToolbarState } from '@udecode/plate-link';
import { ListState } from '@react-stately/list';
import { MemoExoticComponent } from 'react';
import { mockPlugin } from '@udecode/plate-core';
import { ModalBodyProps as ModalBodyProps_2 } from './types';
import { ModalFooterProps as ModalFooterProps_2 } from './types';
import { ModalHeaderProps as ModalHeaderProps_2 } from './types';
import { MouseEvent as MouseEvent_2 } from 'react';
import { MutableRefObject } from 'react';
import { Node as Node_2 } from '@react-types/shared';
import { offset } from '@udecode/plate-floating';
import { Over } from '@dnd-kit/core';
import { Path } from 'slate';
import { PlateEditor } from '@udecode/plate-core';
import { PlatePlugin } from '@udecode/plate-core';
import { PlatePluginComponent } from '@udecode/plate-core';
import { PlatePluginKey } from '@udecode/plate-core';
import { PlateRenderElementProps } from '@udecode/plate-core';
import { PlateRenderLeafProps } from '@udecode/plate-core';
import { Point } from 'slate';
import { PositioningStrategy } from '@popperjs/core/lib/types';
import { PressEvent } from '@react-types/shared';
import { Projection as Projection_2 } from '..';
import { Range as Range_2 } from 'slate';
import { RangeBeforeOptions } from '@udecode/slate-utils';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { ReactPortal } from 'react';
import { Ref } from 'react';
import { RefAttributes } from 'react';
import { RefCallback } from 'react';
import { RefObject } from 'react';
import { removeNodes } from '@udecode/slate';
import { replaceNodeChildren } from '@udecode/slate-utils';
import { select } from '@udecode/slate';
import { setNodes } from '@udecode/slate';
import { SetNodesOptions } from '@udecode/slate';
import { SetStateAction } from 'react';
import { someNode } from '@udecode/slate';
import { splitNodes } from '@udecode/slate';
import { submitFloatingLink } from '@udecode/plate-link';
import { TComboboxItemWithData } from '@udecode/plate-combobox';
import { TDescendant } from '@udecode/slate';
import { TElement } from '@udecode/slate';
import { TextareaAutosizeProps } from 'react-textarea-autosize';
import { TextareaHTMLAttributes } from 'react';
import { TLinkElement } from '@udecode/plate-link';
import { TLocation } from '@udecode/slate';
import { TNode } from '@udecode/slate';
import { TNodeEntry } from '@udecode/slate';
import { ToggleMarkPlugin } from '@udecode/plate-core';
import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
import { Translate } from '@dnd-kit/core';
import { TreeState as TreeState_2 } from '@react-stately/tree';
import { TText } from '@udecode/slate';
import { unwrapNodes } from '@udecode/slate';
import { UnwrapNodesOptions } from '@udecode/slate';
import { useComposedRef } from '@udecode/react-utils';
import { useEditorRef } from '@udecode/plate-core';
import { useEditorState } from '@udecode/plate-core';
import { useEditorVersion } from '@udecode/plate-core';
import { useEventPlateId } from '@udecode/plate-core';
import { useFloatingLinkEdit } from '@udecode/plate-link';
import { useFloatingLinkEditState } from '@udecode/plate-link';
import { useFloatingLinkInsert } from '@udecode/plate-link';
import { useFloatingLinkInsertState } from '@udecode/plate-link';
import { useFocused } from 'slate-react';
import { useHotkeys } from '@udecode/plate-core';
import { useLinkOpenButtonState } from '@udecode/plate-link';
import { useLinkToolbarButton } from '@udecode/plate-link';
import { useLinkToolbarButtonState } from '@udecode/plate-link';
import { useSortable } from '@dnd-kit/sortable';
import { useVirtualFloating } from '@udecode/plate-floating';
import { UseVirtualFloatingOptions } from '@udecode/plate-floating';
import { Value } from '@udecode/slate';
import { withoutNormalizing } from '@udecode/slate';
import { WithOverride } from '@udecode/plate-core';
import { withRemoveEmptyNodes } from '@udecode/plate-normalizers';
import { wrapNodes } from '@udecode/slate';
import { WrapNodesOptions } from '@udecode/slate';

/**
 * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.
 */
export declare const Accordion: {
    (props: AccordionProps): ReactElement;
    displayName: string;
};

/**
 * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.
 */
export declare const ACCORDION_HEADER_ICON_ID = "fondue-accordion-header-icon";

/**
 * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.
 */
export declare const ACCORDION_HEADER_TEST_ID = "fondue-accordion-header";

export declare const ACCORDION_ICON_CONTAINER_ID = "accordion-icon-container";

/**
 * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.
 */
export declare const AccordionHeader: {
    ({ isOpen, decorator, disabled, children, "data-test-id": dataTestId, }: AccordionHeaderProps): JSX_2.Element;
    displayName: string;
};

/**
 * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.
 */
export declare const AccordionHeaderIcon: {
    ({ size, isOpen, "data-test-id": dataTestId, }: AccordionHeaderIconProps): ReactElement;
    displayName: string;
};

export declare type AccordionHeaderIconProps = {
    isOpen: boolean;
    size?: AccordionHeaderIconSize;
    'data-test-id'?: string;
};

export declare type AccordionHeaderIconSize = 'small' | 'medium' | 'large';

export declare type AccordionHeaderProps = {
    decorator?: ReactNode;
    children: string;
    disabled?: boolean;
    isOpen: boolean;
    'data-test-id'?: string;
};

/**
 * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}.
 */
export declare const AccordionItem: {
    ({ children }: AccordionItemProps): ReactElement;
    displayName: string;
};

export declare type AccordionItemProps = {
    header: Omit<AccordionHeaderProps, 'isOpen'> & {
        active?: boolean;
        onClick?: () => void;
    };
    padding?: boolean;
    divider?: boolean;
    headerComponent?: (props: AccordionHeaderProps) => ReactElement;
    'data-test-id'?: string;
    children?: ReactNode;
};

export declare type AccordionProps = {
    children?: ReactNode;
    divider?: boolean;
    border?: boolean;
    'data-test-id'?: string;
};

/**
 * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}.
 */
export declare const ActionMenu: {
    ({ menuBlocks, ariaLabel, focus, border, scrollable, onClick, }: ActionMenuProps): ReactElement<ActionMenuProps>;
    displayName: string;
};

export declare type ActionMenuBlock = {
    id: string;
    menuItems: (ActionMenuItemType | ActionMenuSwitchItemType)[];
    ariaLabel?: string;
};

export declare type ActionMenuItemType = MenuItemType & {
    onClick: () => void;
};

export declare type ActionMenuProps = {
    ariaLabel?: string;
    menuBlocks: ActionMenuBlock[];
    focus?: FocusStrategy;
    border?: boolean;
    scrollable?: boolean;
    /**
     * @deprecated Use the onClick method available on each `menuItem` in the `menuBlocks` instead.
     * @example
     *  <ActionMenu
     menuBlocks={[
     {
     id: 'menu-block-1',
     menuItems: [
     {
     id: 'menu-item-1',
     label: 'Item 1',
     onClick: () => console.log('Item 1 clicked');
     },
     ],
     },
     ]}
     />
     *  */
    onClick?: () => void;
};

export declare type ActionMenuSwitchItemType = MenuItemType & {
    onClick: (switchValue: boolean) => void;
    type: 'switch';
    initialValue: boolean;
};

export declare const ACTIVE_COLUMN_BREAK_CLASS_NAMES = "tw-border-b tw-border-dashed tw-border-line-x-strong tw-pb-5 tw-break-after-column tw-break-inside-avoid-column";

export declare const AddBlockButton: {
    ({ onClick, title, direction, orientation, "data-test-id": dataTestId, }: AddBlockButtonProps): ReactElement;
    displayName: string;
};

export declare enum AddBlockButtonDirection {
    Horizontal = "Horizontal",
    Vertical = "Vertical"
}

export declare type AddBlockButtonProps = {
    onClick: () => void;
    title?: string;
    /** @deprecated use direction with ButtonDirection */
    orientation?: AddBlockButtonDirection;
    direction?: ButtonDirection;
    'data-test-id'?: string;
};

export declare const ADDREMOVE_ICON_CONTAINER_ID = "addremove-icon-container";

export declare const addSelectedIds: (ids: string[], idsToAdd: string[], partial: boolean) => string[];

export declare const addSelectedItemsFromSelection: (treeItems: TreeItemMultiselectWithNodes[], id: string, newSelectedItems: string[]) => string[];

export declare class AlignCenterPlugin extends AlignPlugin {
    constructor(props?: AlignPluginProps);
}

export declare class AlignJustifyPlugin extends AlignPlugin {
    constructor(props?: AlignPluginProps);
}

export declare class AlignLeftPlugin extends AlignPlugin {
    constructor(props?: AlignPluginProps);
}

export declare const alignmentClassnames: Record<string, string>;

declare class AlignPlugin extends Plugin_2<AlignPluginProps> {
    protected validTypes: string[];
    constructor({ validTypes, ...pluginProps }?: Partial<AlignPluginProps>);
    plugins(): PlatePlugin[];
}

declare type AlignPluginProps = PluginProps & {
    validTypes?: string[];
};

export declare class AlignRightPlugin extends AlignPlugin {
    constructor(props?: AlignPluginProps);
}

declare type AnnouncementArgs = {
    eventName: string;
    activeId: string;
    activeTitle: string;
    overId?: string;
    overTitle?: string;
    treeState: TreeState;
    currentPosition: Nullable<{
        overId: string;
        parentId: Nullable<string>;
    }>;
    setCurrentPosition: Dispatch<SetStateAction<Nullable<{
        overId: string;
        parentId: Nullable<string>;
    }>>>;
};

export declare const ARIA_LABEL_DEFAULT_VALUE = "Slider text input";

export declare type AriaAccordionItemProps = {
    item: Node_2<AccordionItemProps>;
    state: TreeState_2<AccordionItemProps>;
    header: Omit<AccordionHeaderProps, 'isOpen'> & {
        active?: boolean;
        onClick?: () => void;
    };
    padding?: boolean;
    divider?: boolean;
    headerComponent?: (props: AccordionHeaderProps) => ReactElement;
    'data-test-id'?: string;
};

export declare const AriaList: ForwardRefExoticComponent<AriaListProps & RefAttributes<HTMLUListElement | null>>;

export declare type AriaListProps = {
    ariaProps: HTMLAttributes<HTMLElement>;
    border?: boolean;
    children: ReactNode;
    scrollable?: boolean;
};

export declare const AriaMenuItem: {
    ({ menuItem, node, state, isSelected, onClick }: AriaOptionProps): ReactElement;
    displayName: string;
};

export declare type AriaOptionProps = {
    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType;
    node: Node_2<object>;
    isSelected?: boolean;
    state: TreeState_2<object>;
    /**
     *  @deprecated Use `menuItem.onClick` instead
     *  */
    onClick?: () => void;
};

export declare const AriaSection: {
    ({ ariaLabel, children }: AriaSectionProps): ReactElement;
    displayName: string;
};

export declare type AriaSectionProps = {
    ariaLabel?: string;
    children: ReactNode;
};

export declare const AssetInput: {
    ({ assets, numberOfLocations, actions, size, isLoading, hideSize, hideExtension, onLibraryClick, onUploadClick, onMultiAssetClick, acceptFileType, }: AssetInputProps): ReactElement;
    displayName: string;
};

export declare type AssetInputProps = {
    assets?: AssetType[];
    size: AssetInputSize;
    numberOfLocations?: number;
    actions?: ActionMenuProps['menuBlocks'];
    isLoading?: boolean;
    hideSize?: boolean;
    hideExtension?: boolean;
    onUploadClick?: (files: FileList) => void;
    onLibraryClick?: () => void;
    onMultiAssetClick?: () => void;
    acceptFileType?: string;
};

export declare enum AssetInputSize {
    Small = "Small",
    Large = "Large"
}

export declare type AssetType = (ImageAsset & UploadSource) | (ImageAsset & LibrarySource) | (IconAsset & UploadSource) | (IconAsset & LibrarySource) | (OtherAsset & UploadSource) | (OtherAsset & LibrarySource);

export declare class AutoformatPlugin extends Plugin_2 {
    constructor(props?: PluginProps);
    plugins(): PlatePlugin[];
}

export declare const Badge: {
    ({ children, status, icon, style, size, emphasis, disabled, onClick, onDismiss, "data-test-id": dataTestId, withTitleAttribute, }: BadgeProps): Nullable<ReactElement>;
    displayName: string;
};

export declare enum BadgeEmphasis {
    Strong = "Strong",
    None = "None"
}

export declare type BadgeProps = {
    style?: BadgeStyle;
    icon?: ReactElement<IconProps>;
    status?: BadgeStatusIconProps['status'];
    onClick?: () => void;
    onDismiss?: () => void;
    disabled?: boolean;
    emphasis?: BadgeEmphasis;
    size?: BadgeSize;
    children?: ReactNode;
    'data-test-id'?: string;
    /** @description withTitle could be disabled only in the case another overlay is present, ex Tooltip */
    withTitleAttribute?: boolean;
};

export declare type BadgeSize = 'small' | 'medium';

export declare enum BadgeStatus {
    Positive = "Positive",
    Progress = "Progress",
    Warning = "Warning",
    Danger = "Danger"
}

export declare type BadgeStatusIconProps = {
    status: BadgeStatus | Color | string;
    disabled: boolean;
    'data-test-id'?: string;
};

export declare enum BadgeStyle {
    Primary = "Primary",
    Positive = "Positive",
    Progress = "Progress",
    Warning = "Warning",
    Danger = "Danger"
}

declare type BaseAsset = {
    name: string;
};

export declare type BaseDialogProps = {
    modality?: Modality;
    maxWidth?: string | number;
    maxHeight?: string | number;
    minWidth?: string | number;
    minHeight?: string | number;
    /** @description This property enable a full screen gray underlay only for modal and blocking-modal options. */
    darkUnderlay?: boolean;
    /** @description If enabled, any value assigned to the maxHeight property won't have any effect.
     * autoHeight will set the maxHeight of the dialog Component automatically calculating the available space in the viewport. */
    autoHeight?: boolean;
    roundedCorners?: boolean;
    width?: string | number;
};

declare type BaseSliderProps = {
    id?: string;
    label?: string;
    value?: number;
    min?: number;
    max?: number;
    showMinMax?: boolean;
    step?: number;
    stepMultiplier?: number;
    onError?: (errorCode: SliderError) => void;
    onChange: (value: SliderValue) => void;
    valueSuffix?: string;
    disabled?: boolean;
    'data-test-id'?: string;
};

declare type BlockType = {
    type: string;
    children: NodeType[];
    parentType?: string;
    caption?: string;
    language?: string;
    break?: boolean;
    link?: string;
    url?: string;
    id?: string;
    category?: string;
    target?: TargetValue;
};

declare interface BlurOnBreakPlatePlugin<V extends Value = Value> {
    onBreak?: (value: V) => void;
}

export declare class BlurOnBreakPlugin extends Plugin_2 {
    protected onBreak: ((value: Value) => void) | undefined;
    constructor(props?: BlurOnBreakPluginProps);
    plugins(): PlatePlugin[];
}

export declare type BlurOnBreakPluginProps = PluginProps & BlurOnBreakPlatePlugin;

export declare const BOLD_CLASSES = "tw-font-bold";

export declare class BoldMarkupElement extends MarkupElement {
    constructor(id?: string, node?: ({ attributes, children }: PlateRenderLeafProps) => JSX_2.Element);
}

export declare const BoldMarkupElementNode: ({ attributes, children }: PlateRenderLeafProps) => JSX_2.Element;

export declare class BoldPlugin extends Plugin_2 {
    constructor(props?: PluginProps);
    plugins(): PlatePlugin[];
}

/**
 * @deprecated Use `Box` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#layout-components the migration guide}.
 */
export declare const Box: {
    ({ padding, paddingX, paddingY, margin, marginX, marginY, children, "data-test-id": dataTestId, as: ContainerElement, ...props }: BoxProps): JSX_2.Element;
    displayName: string;
};

export declare const BOX_BG_ALIAS_TOKENS_CLASSES: string[];

export declare const BOX_TEST_ID = "fondue-box";

export declare const BOX_TEXT_ALIAS_TOKENS_CLASSES: string[];

declare type BoxColor = 'neutral' | 'selected' | 'disabled' | 'positive' | 'negative' | 'warning';

export declare type BoxProps = {
    'data-test-id'?: string;
    padding?: SpacingValue;
    paddingX?: SpacingValue;
    paddingY?: SpacingValue;
    margin?: SpacingValue;
    marginX?: SpacingValue;
    marginY?: SpacingValue;
    as?: ContainerHTMLElement;
} & HTMLAttributes<HTMLDivElement | HTMLSpanElement>;

export declare const BrandColorPicker: {
    ({ palettes: defaultPalettes, currentColor, onSelect }: Props_2): ReactElement;
    displayName: string;
};

export declare type Breadcrumb = {
    label: string;
    link?: string;
    onClick?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent_2<T>) => void;
    decorator?: ReactElement<IconProps>;
    bold?: boolean;
    badges?: BadgeProps[];
    'data-test-id'?: string;
} & Pick<BreadcrumbsProps, 'activeInline'>;

export declare enum BreadcrumbGap {
    None = "None",
    Small = "Small",
    Medium = "Medium"
}

export declare const BreadcrumbItem: {
    ({ decorator, label, link, onClick, showSeparator, children, "data-test-id": dataTestId, }: BreadcrumbItemProps): ReactElement;
    displayName: string;
};

declare type BreadcrumbItemProps = Pick<Breadcrumb, 'label' | 'link' | 'onClick' | 'decorator'> & {
    showSeparator: boolean;
    children?: ReactElement;
    'data-test-id'?: string;
};

export declare const Breadcrumbs: {
    ({ items, keepRoot, truncate, activeInline, "data-test-id": dataTestId, verticalGap, }: BreadcrumbsProps): ReactElement;
    displayName: string;
};

export declare type BreadcrumbsProps = {
    items: Breadcrumb[];
    keepRoot?: boolean;
    activeInline?: boolean;
    truncate?: boolean;
    'data-test-id'?: string;
    verticalGap?: BreadcrumbGap;
};

export declare class BreakAfterPlugin extends Plugin_2 {
    private columns;
    private gap;
    private customClass;
    constructor(props?: BreakAfterPluginProps);
    plugins(): PlatePlugin[];
}

declare type BreakAfterPluginProps = PluginProps & {
    columns?: number;
    gap?: string | number;
    /**
     * If provided the `columns` property will be ignored
     */
    customClass?: string;
};

export declare const BrightHeader: {
    ({ headerStyle }: BrightHeaderProps): ReactElement;
    displayName: string;
};

export declare const brightHeaderArrowBackgroundColors: Record<BrightHeaderStyle, string>;

export declare const brightHeaderBackgroundColors: Record<BrightHeaderStyle, string>;

declare type BrightHeaderProps = {
    headerStyle: BrightHeaderStyle;
};

export declare enum BrightHeaderStyle {
    Information = "Information",
    Warning = "Warning",
    Tip = "Tip",
    Note = "Note"
}

/**
 * @deprecated Please use updated button component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#button the migration guide}.
 */
export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement | null>>;

declare type Button_2 = {
    id: string;
    button: PluginButton;
};

export declare enum ButtonDirection {
    Left = "Left",
    Top = "Top",
    Bottom = "Bottom",
    Right = "Right"
}

export declare type ButtonElements = {
    button: string;
    icon: string;
    text: string;
};

export declare enum ButtonEmphasis {
    Default = "Default",
    Weak = "Weak",
    Strong = "Strong"
}

/**
 * @deprecated Please use updated the `Flex` layout component from `@frontify/fondue/components` as a wrapper arount the `Button` component instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#button the migration guide}.
 */
export declare const ButtonGroup: {
    ({ children, size, "data-test-id": dataTestId, }: ButtonGroupProps): ReactElement;
    displayName: string;
};

export declare type ButtonGroupProps = {
    size: ButtonSize;
    children?: ReactNode;
    'data-test-id'?: string;
};

declare type ButtonGroupsPerRow = ButtonGroupWidths[];

declare type ButtonGroupWidths = {
    group: Button_2[];
    buttonGroupWidth: number;
    index: number;
}[];

export declare type ButtonProps = {
    type?: ButtonType;
    title?: string;
    style?: ButtonStyle;
    emphasis?: ButtonEmphasis;
    hideLabel?: boolean;
    size?: ButtonSize;
    rounding?: ButtonRounding;
    disabled?: boolean;
    icon?: ReactElement;
    children?: ReactNode;
    onClick?: (event?: MouseEvent_2<HTMLButtonElement>) => void;
    hugWidth?: boolean;
    'aria-label'?: string;
    'aria-describedby'?: string;
    formId?: string;
    /** @deprecated use emphasis with ButtonEmphasis.Weak */
    solid?: boolean;
    /** @deprecated inverted can be done by wrapping the component in a className="tw-dark" */
    inverted?: boolean;
    'data-test-id'?: string;
};

export declare enum ButtonRounding {
    Medium = "Medium",
    Full = "Full"
}

declare type Buttons = Button_2[][];

export declare enum ButtonSize {
    Small = "Small",
    Medium = "Medium",
    Large = "Large"
}

export declare enum ButtonStyle {
    Default = "Default",
    Positive = "Positive",
    Negative = "Negative",
    Danger = "Danger",
    Loud = "Loud",
    /** @deprecated use ButtonStyle.Default and ButtonEmphasis.Strong */
    Primary = "Primary",
    /** @deprecated use ButtonStyle.Default and ButtonEmphasis.Default */
    Secondary = "Secondary"
}

export declare enum ButtonType {
    Button = "Button",
    Submit = "Submit",
    Reset = "Reset"
}

export declare const ButtonWrapper: ({ children, id }: {
    children: ReactNode;
    id: string;
}) => JSX_2.Element;

export declare const calculateToolbarWidth: (toolbarButtonGroups: ButtonGroupsPerRow) => number;

export declare const Card: {
    ({ hoverable, children, onClick, "data-test-id": dataTestId, }: CardProps): ReactElement;
    displayName: string;
};

export declare type CardProps = {
    children: ReactNode | ReactNode[];
    hoverable?: boolean;
    onClick?: (event: PressEvent) => void;
    'data-test-id'?: string;
};

export declare type Cell = {
    sortId: string | number;
    value: ReactNode;
    ariaLabel?: string;
    align?: ColumnAlign;
};

/**
 * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.
 */
export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;

export declare const CHECKBOX_DIV_CLASSES = "tw-flex tw-flex-row tw-pb-2 tw-gap-1.5 tw-items-center";

export declare const CHECKBOX_LIST_PLUGIN = "checkbox-list-plugin";

export declare const CHECKBOX_SPAN_CLASSES = "focus:tw-outline-none tw-w-auto tw-min-w-[10px]";

export declare enum CheckboxEmphasis {
    Default = "Default",
    Weak = "Weak",
    Strong = "Strong"
}

export declare class CheckboxListElement extends MarkupElement {
    constructor(id?: string, node?: (props: PlateRenderElementProps & {
        style: CSSProperties;
    }) => JSX.Element);
}

export declare const CheckboxListElementNode: (props: PlateRenderElementProps & {
    style: CSSProperties;
}) => JSX_2.Element;

export declare class CheckboxListPlugin extends Plugin_2 {
    constructor(props?: PluginProps);
    plugins(): PlatePlugin[];
}

export declare type CheckboxProps = {
    id?: string;
    state?: CheckboxState;
    emphasis?: CheckboxEmphasis;
    size?: CheckboxSize;
    disabled?: boolean;
    required?: boolean;
    value?: string;
    onChange?: (isChecked: boolean) => void;
    label?: string;
    hideLabel?: boolean;
    tooltip?: InputLabelTooltipProps;
    helperText?: string;
    'aria-label'?: string;
    groupInputProps?: HTMLAttributes<HTMLElement>;
    'data-test-id'?: string;
};

export declare enum CheckboxSize {
    Default = "Default",
    Large = "Large",
    XLarge = "XLarge"
}

export declare enum CheckboxState {
    Checked = "Checked",
    Unchecked = "Unchecked",
    Mixed = "Mixed"
}

export declare type CheckboxValue = Omit<CheckboxProps, 'onChange' | 'groupInputProps' | 'value'> & {
    value: string;
};

export declare const checkIfContainInteractiveElements: (node: HTMLElement | null) => boolean;

export declare const Checklist: {
    ({ checkboxes, setActiveValues, ariaLabel, activeValues, direction, "data-test-id": dataTestId, ...props }: ChecklistProps): JSX_2.Element;
    /**
     * @deprecated Use multiple `Checkbox` components from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checklist the migration guide}.
     */
    displayName: string;
};

export declare type ChecklistBase = {
    checkboxes: CheckboxValue[];
    setActiveValues: (value: string[]) => void;
    activeValues?: string[];
    ariaLabel?: string;
    'data-test-id'?: string;
};

export declare enum ChecklistDirection {
    Horizontal = "Horizontal",
    Vertical = "Vertical"
}

export declare type ChecklistProps = ChecklistBase & {
    direction: ChecklistDirection.Vertical | ChecklistDirection.Horizontal;
    columns?: Columns;
};

export declare const clamp: (value: number, min: number, max: number) => number;

export declare const cleanOrphanSelectedIds: (selectIds: string[]) => string[];

export declare const Code: {
    ({ children, as: Tag, weight, size, color, }: CodeProps): ReactElement;
    displayName: string;
};

export declare const CODE_CLASSES = "tw-rounded tw-bg-box-neutral tw-text-violet-90 tw-m-0 tw-px-[0.2em] tw-font-mono tw-text-[85%]";

declare type CodeColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';

export declare class CodeMarkupElement extends MarkupElement {
    constructor(id?: string, node?: ({ attributes, children }: PlateRenderLeafProps) => JSX_2.Element);
}

export declare const CodeMarkupElementNode: ({ attributes, children }: PlateRenderLeafProps) => JSX_2.Element;

export declare class CodePlugin extends Plugin_2 {
    constructor(props?: PluginProps);
    plugins(): PlatePlugin[];
}

export declare type CodeProps = {
    size?: CodeSize;
    weight?: CodeWeight;
    as?: 'code' | 'pre' | 'span';
    color?: CodeColor;
    children?: ReactNode;
};

declare type CodeSize = 'small' | 'medium' | 'large';

declare type CodeWeight = 'default' | 'strong';

export declare const CollapsibleWrap: {
    ({ children, isOpen, preventInitialAnimation, animateOpacity, "data-test-id": dataTestId, }: CollapsibleWrapProps): ReactElement;
    displayName: string;
};

declare type CollapsibleWrapProps = {
    isOpen: boolean;
    preventInitialAnimation?: boolean;
    animateOpacity?: boolean;
    children?: ReactNode;
    'data-test-id'?: string;
};

export declare type CollisionPosition = Nullable<'before' | 'within' | 'after'>;

export declare type Color = {
    red: number;
    green: number;
    blue: number;
    alpha?: number;
    name?: string;
};

export declare enum ColorFormat {
    Hex = "Hex",
    Rgba = "Rgba"
}

export declare const ColorInput: {
    ({ min, max, decorator, onChange, onEnterPressed, size, onBlur, value, decoratorPosition, type, "aria-label": ariaLabel, }: ColorInputProps): ReactElement;
    displayName: string;
};

export declare type ColorInputProps = {
    min?: number;
    max?: number;
    decoratorPosition?: DecoratorPosition;
    'aria-label'?: string;
} & Pick<TextInputBaseProps, 'decorator' | 'value' | 'onChange' | 'type' | 'size' | 'onBlur' | 'onEnterPressed'>;

export declare const ColorInputTitle: {
    ({ currentColor, format }: Props): ReactElement;
    displayName: string;
};

export declare const ColorInputTrigger: {
    ({ id, currentColor, format, isOpen, disabled, clearable, onClear, onDelete, }: ColorInputTriggerProps): ReactElement;
    displayName: string;
};

declare type ColorInputTriggerProps = Pick<ColorPickerFlyoutProps, 'id' | 'currentColor' | 'disabled'> & {
    isOpen?: boolean;
    format: ColorFormat;
    clearable?: boolean;
    onClear?: () => void;
    onDelete?: () => void;
};

/**
 * @deprecated Use the new `Color Picker` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#color-picker the migration guide}.
 */
export declare const ColorPicker: {
    ({ currentColor, palettes, onSelect, setFormat, showPreview, currentFormat, allowCustomColor, }: ColorPickerProps): JSX_2.Element;
    displayName: string;
};

/**
 * @deprecated Use the `Flyout` together with the new `Color Picker` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#color-picker the migration guide}.
 */
export declare const ColorPickerFlyout: {
    ({ id, onClick, onClose, onSelect, currentColor, palettes, disabled, clearable, onClear, onDelete, }: ColorPickerFlyoutProps): ReactElement;
    displayName: string;
};

export declare type ColorPickerFlyoutProps = Pick<ColorPickerProps, 'palettes' | 'onSelect'> & {
    id?: string;
    disabled?: boolean;
    onClick?: () => void;
    onClose?: () => void;
    currentColor: Color | null;
    clearable?: boolean;
    onClear?: () => void;
    onDelete?: () => void;
};

export declare type ColorPickerProps = {
    palettes?: Palette[];
    currentColor: Color;
    currentFormat: ColorFormat;
    setFormat: (id: ColorFormat) => void;
    onSelect: (color: Color) => void;
    showPreview?: boolean;
    allowCustomColor?: boolean;
};

export declare const ColorPreview: {
    ({ color }: ColorPreviewProps): ReactElement;
    displayName: string;
};

declare type ColorPreviewProps = {
    color: Color;
};

export declare type ColorRgb = {
    r: number;
    g: number;
    b: number;
    a?: number;
};

export declare type Column = {
    name: string;
    titleNode?: ReactNode;
    key: string;
    sortable?: boolean;
    align?: ColumnAlign;
};

export declare type ColumnAlign = 'left' | 'right';

export declare const ColumnBreakButton: ({ id }: PluginButtonProps) => JSX_2.Element;

export declare type ColumnBreakValue = 'active' | 'inactive' | undefined;

export declare type Columns = 1 | 2 | 3 | 4;

export declare const combineMentionableKeyWith: (category: MentionableCategory, id: string) => string;

export declare const COMMON_INSET_BORDER = "before:tw-pointer-events-none before:tw-block before:tw-rounded before:tw-top-0 before:tw-left-0 before:tw-bg-transparent before:tw-absolute before:tw-w-full before:tw-h-full";

export declare enum ComponentEnum {
    "Fondue - Accordion" = "Accordion",
    "Fondue - AccordionHeader" = "AccordionHeader",
    "Fondue - AccordionHeaderIcon" = "AccordionHeaderIcon",
    "Fondue - AddBlockButton" = "AddBlockButton",
    "Fondue - AssetInput" = "AssetInput",
    "Fondue - AssetThumbnail" = "AssetThumbnail",
    "Fondue - Badge" = "Badge",
    "Fondue - BadgeStatusIcon" = "BadgeStatusIcon",
    "Fondue - Box" = "Box",
    "Fondue - BreadcrumbItem" = "BreadcrumbItem",
    "Fondue - Breadcrumbs" = "Breadcrumbs",
    "Fondue - CurrentBreadcrumbItem" = "CurrentBreadcrumbItem",
    "Fondue - FormattedBreadcrumbs" = "FormattedBreadcrumbs",
    "Fondue - Button" = "Button",
    "Fondue - ButtonGroup" = "ButtonGroup",
    "Fondue - Card" = "Card",
    "Fondue - Checkbox" = "Checkbox",
    "Fondue - Checklist" = "Checklist",
    "Fondue - CollapsibleWrap" = "CollapsibleWrap",
    "Fondue - ColorInputTitle" = "ColorInputTitle",
    "Fondue - ColorPickerFlyout" = "ColorPickerFlyout",
    "Fondue - ColorPickerTrigger" = "ColorPickerTrigger",
    "Fondue - BrandColorPicker" = "BrandColorPicker",
    "Fondue - ColorInput" = "ColorInput",
    "Fondue - ColorPicker" = "ColorPicker",
    "Fondue - ColorPreview" = "ColorPreview",
    "Fondue - CustomColorPicker" = "CustomColorPicker",
    "Fondue - Container" = "Container",
    "Fondue - DatePicker" = "DatePicker",
    "Fondue - DatePickerTrigger" = "DatePickerTrigger",
    "Fondue - Dialog" = "Dialog",
    "Fondue - DialogBody" = "DialogBody",
    "Fondue - DialogFooter" = "DialogFooter",
    "Fondue - DialogHeader" = "DialogHeader",
    "Fondue - Divider" = "Divider",
    "Fondue - DropZone" = "DropZone",
    "Fondue - Dropdown" = "Dropdown",
    "Fondue - EditableText" = "EditableText",
    "Fondue - FieldsetHeader" = "FieldsetHeader",
    "Fondue - FilterableMultiSelect" = "FilterableMultiSelect",
    "Fondue - Flex" = "Flex",
    "Fondue - Flyout" = "Flyout",
    "Fondue - FlyoutFooter" = "FlyoutFooter",
    "Fondue - Overlay" = "Overlay",
    "Fondue - Form" = "Form",
    "Fondue - FormControl" = "FormControl",
    "Fondue - FormField" = "FormField",
    "Fondue - FrontifyPattern" = "FrontifyPattern",
    "Fondue - Grid" = "Grid",
    "Fondue - InlineDialog" = "InlineDialog",
    "Fondue - InputLabel" = "InputLabel",
    "Fondue - LegacyCollectionItem" = "LegacyCollectionItem",
    "Fondue - LegacyOrderableList" = "LegacyOrderableList",
    "Fondue - LegacyTextarea" = "LegacyTextarea",
    "Fondue - BrightHeader" = "BrightHeader",
    "Fondue - LegacyTooltip" = "LegacyTooltip",
    "Fondue - LoadingBar" = "LoadingBar",
    "Fondue - LoadingCircle" = "LoadingCircle",
    "Fondue - Menu" = "Menu",
    "Fondue - MenuItem" = "MenuItem",
    "Fondue - MenuItemContent" = "MenuItemContent",
    "Fondue - Modal" = "Modal",
    "Fondue - ModalBody" = "ModalBody",
    "Fondue - ModalFooter" = "ModalFooter",
    "Fondue - ModalHeader" = "ModalHeader",
    "Fondue - ModalVisual" = "ModalVisual",
    "Fondue - MultiInput" = "MultiInput",
    "Fondue - MultiSelect" = "MultiSelect",
    "Fondue - NumberInput" = "NumberInput",
    "Fondue - OrderableList" = "OrderableList",
    "Fondue - OverflowMenu" = "OverflowMenu",
    "Fondue - PasswordInput" = "PasswordInput",
    "Fondue - Popover" = "Popover",
    "Fondue - Popper" = "Popper",
    "Fondue - Portal" = "Portal",
    "Fondue - RadioButton" = "RadioButton",
    "Fondue - RadioList" = "RadioList",
    "Fondue - RadioPill" = "RadioPill",
    "Fondue - RichTextEditor" = "RichTextEditor",
    "Fondue - ScrollWrapper" = "ScrollWrapper",
    "Fondue - SegmentedControls" = "SegmentedControls",
    "Fondue - Slider" = "Slider",
    "Fondue - Stack" = "Stack",
    "Fondue - Switch" = "Switch",
    "Fondue - Table" = "Table",
    "Fondue - TableCell" = "TableCell",
    "Fondue - TableColumnHeader" = "TableColumnHeader",
    "Fondue - TableHeaderRow" = "TableHeaderRow",
    "Fondue - TableRow" = "TableRow",
    "Fondue - TabItem" = "TabItem",
    "Fondue - Tabs" = "Tabs",
    "Fondue - Tag" = "Tag",
    "Fondue - TextInput" = "TextInput",
    "Fondue - Textarea" = "Textarea",
    "Fondue - Toast" = "Toast",
    "Fondue - types" = "types",
    "Fondue - Tooltip" = "Tooltip",
    "Fondue - TooltipIcon" = "TooltipIcon",
    "Fondue - Tree" = "Tree",
    "Fondue - Trigger" = "Trigger"
}

export declare const compose: <T extends any[], R>(fn1: (...args: T) => R, ...fns: Array<(a: R) => R>) => ((...args: T) => R);

/**
 * @deprecated Use `Box` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#layout-components the migration guide}.
 */
export declare const Container: {
    ({ children, "data-test-id": dataTestId, minWidth, maxWidth, maxHeight, minHeight, bg, color, margin, marginX, marginY, padding, paddingX, paddingY, as: ContainerElement, }: ContainerProps): JSX_2.Element;
    displayName: string;
};

export declare const CONTAINER_TEST_ID = "fondue-container";

declare type ContainerHTMLElement = 'div' | 'span';

export declare type ContainerProps = {
    children?: ReactNode | ReactNode[];
    minWidth?: `${number}${DimensionUnity}`;
    maxWidth?: `${number}${DimensionUnity}`;
    minHeight?: `${number}${DimensionUnity}`;
    maxHeight?: `${number}${DimensionUnity}`;
    padding?: SpacingValue;
    paddingX?: SpacingValue;
    paddingY?: SpacingValue;
    margin?: SpacingValue;
    marginX?: SpacingValue;
    marginY?: SpacingValue;
    bg?: string;
    color?: string;
    'data-test-id'?: string;
    as?: ContainerHTMLElement;
};

export declare const convertToPartialSelectedId: (ids: string[]) => string[];

export declare const createCheckboxListPlugin: ReturnType<typeof createPluginFactory<NonNullable<unknown>>>;

export declare const createColumnBreakPlugin: (columns: number, gap: CSSProperties["gap"], customClass: string | undefined) => PlatePlugin;

export declare const createLicStylePlugin: ReturnType<typeof createPluginFactory<ToggleMarkPlugin>>;

export { createLinkPlugin }

export { createParagraphPlugin }

export declare const createPlatePlugins: (pluginComposer: PluginComposer) => PlatePlugin[];

export { createPluginFactory }

export declare const createQuotePlugin: (styles: CSSProperties) => PlatePlugin;

export declare const createResetFormattingPlugin: ReturnType<typeof createPluginFactory<NonNullable<unknown>>>;

export { createStore }

declare type CSSPropertiesHover = CSSProperties & {
    hover?: CSSProperties;
};

export declare const CurrentBreadcrumbItem: {
    ({ label, badges, bold, decorator, link, onClick, activeInline, "data-test-id": dataTestId, }: CurrentBreadcrumbItemProps): ReactElement;
    displayName: string;
};

declare type CurrentBreadcrumbItemProps = Breadcrumb;

export declare const currentNodesChanged: (currentChildrenIds: string[], currentNodes: ReactElement<InternalTreeItemProps>[], newNodes: ReactElement<InternalTreeItemProps>[]) => boolean;

export declare class Custom1Plugin extends Plugin_2 {
    styles: CSSProperties;
    constructor({ styles, ...props }?: PluginProps);
    plugins(): PlatePlugin[];
}

export declare class Custom2Plugin extends Plugin_2 {
    styles: CSSProperties;
    constructor({ styles, ...props }?: PluginProps);
    plugins(): PlatePlugin[];
}

export declare class Custom3Plugin extends Plugin_2 {
    styles: CSSProperties;
    constructor({ styles, ...props }?: PluginProps);
    plugins(): PlatePlugin[];
}

export declare const CustomColorPicker: {
    ({ currentColor, currentFormat, setFormat, onSelect, }: Omit<ColorPickerProps, "palette">): ReactElement;
    displayName: string;
};

export declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<ReactDatePickerRef>>;

export declare type DatePickerProps = {
    placeHolder?: string;
    isClearable?: boolean;
    shouldCloseOnSelect?: boolean;
    dateFormat?: string;
    /** @description when the variant is of type 'range', the value should be the startDate */
    value?: Date | null;
    minDate?: Date;
    maxDate?: Date;
    validation?: Validation;
    customTrigger?: ReactNode;
    customHeader?: ReactNode;
    children?: ReactNode;
    hasPopperArrow?: boolean;
    preventOpenOnFocus?: boolean;
    inline?: boolean;
    filterDate?: (date: Date) => boolean;
    onOpen?: () => void;
    onClose?: () => void;
    onBlur?: () => void;
    onKeyDown?: (event: KeyboardEvent_2<HTMLDivElement>) => void;
    'data-test-id'?: string;
} & (SingleDatePickerProps | RangeDatePickerProps);

export declare const DatePickerTrigger: ForwardRefExoticComponent<DatePickerTriggerProps & RefAttributes<HTMLDivElement>>;

declare type DatePickerTriggerProps = {
    placeHolder?: string;
    value?: string;
    isClearable?: boolean;
    isCalendarOpen?: boolean;
    onClick?: () => void;
    validation?: Validation;
    onDateChanged?: ((date: [Date | null, Date | null] | null) => void) | ((date: Date | null) => void);
    children?: ReactNode;
};

export declare const debounce: (func: (...args: any[]) => void, timeout?: number) => T;

export declare enum DecoratorPosition {
    Left = "Left",
    Right = "Right"
}

export declare const deepMerge: <T extends NestedObject = NestedObject>(target: T, source: T) => NestedObject;

export declare const DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT = 36;

export declare const DEFAULT_TEXT_STYLE_VALUE = "Mixed";

export declare const defaultPlugins: PluginComposer;

export declare const defaultStyles: Record<string, Record<string, CSSPropertiesHover> | CSSPropertiesHover>;

/**
 * @deprecated Use `Dialog` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dialog the migration guide}.
 */
export declare const Dialog: {
    ({ id, children, open, anchor, enablePortal, maxHeight, maxWidth, minHeight, minWidth, modality, handleClose, "data-test-id": dataTestId, darkUnderlay, autoHeight, verticalAlignment, roundedCorners, }: WithRequired<DialogProps, "handleClose">): JSX_2.Element;
    displayName: string;
};

export declare const DIALOG_PADDING: string[];

/**
 * @deprecated Use `Dialog` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dialog the migration guide}.
 */
export declare const DialogBody: {
    ({ children, maxHeight, padding, "data-test-id": dataTestId, }: DialogBodyProps): ReactElement;
    displayName: string;
};

export declare type DialogBodyProps = {
    children: ReactNode;
    maxHeight?: number | string;
    padding?: DialogPadding;
    'data-test-id'?: string;
};

/**
 * @deprecated Use `Dialog` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dialog the migration guide}.
 */
export declare const DialogFooter: {
    ({ actionButtons, children, backButton, padding, separator, "data-test-id": dataTestId, }: DialogFooterProps): ReactElement;
    displayName: string;
};

export declare type DialogFooterProps = {
    children?: ReactNode;
    actionButtons: ButtonProps[];
    backButton?: Omit<ButtonProps, 'emphasis' | 'icon' | 'size'>;
    padding?: DialogPadding;
    separator?: boolean;
    'data-test-id'?: string;
};

/**
 * @deprecated Use `Dialog` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dialog the migration guide}.
 */
export declare const DialogHeader: {
    ({ title, separator, padding, onClose, icon, badge, children, "data-test-id": dataTestId, }: DialogHeaderProps): JSX_2.Element;
    displayName: string;
};

export declare type DialogHeaderProps = {
    title: string;
    separator?: boolean;
    onClose?: () => void;
    icon?: ReactElement<IconProps>;
    badge?: ReactElement<BadgeProps>;
    children?: ReactNode;
    padding?: 'compact' | 'comfortable' | 'spacious';
    'data-test-id'?: string;
};

export declare const dialogHeadingMap: Record<DialogPadding, string>;

export declare type DialogPadding = 'none' | 'compact' | 'comfortable' | 'spacious';

export declare const dialogPaddingMap: Record<DialogPadding, string>;

export declare type DialogProps = Omit<OverlayProps, 'placement' | 'flip' | 'offset' | 'theme' | 'withArrow' | 'arrowCustomColors' | 'shadow' | 'isDialog'> & Omit<BaseDialogProps, 'width'>;

export declare type DimensionUnity = '%' | 'px' | 'rem' | 'em' | 'vh' | 'vw';

/**
 * @deprecated Please use updated Divider component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#divider the migration guide}.
 */
export declare const Divider: {
    ({ vertical, style, height, "data-test-id": dataTestId, color, }: DividerProps): ReactElement;
    displayName: string;
};

export declare enum DividerHeight {
    Small = "36px",
    Medium = "60px",
    Large = "96px"
}

export declare type DividerProps = {
    style?: DividerStyle;
    height?: DividerHeight | string;
    color?: string;
    vertical?: boolean;
    'data-test-id'?: string;
};

export declare enum DividerStyle {
    NoLine = "noline",
    Dashed = "dashed",
    Solid = "solid",
    Dotted = "dotted"
}

export declare type DraggableItem<T = Record<string, unknown>> = T & {
    id: string;
    sort: Nullable<number>;
    type?: string;
    parentId?: string;
};

export declare const DragHandle: ForwardRefExoticComponent<Omit<DragHandleProps, "ref"> & RefAttributes<HTMLButtonElement>>;

export declare type DragHandleProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
    active?: boolean;
    showDragHandlerOnHoverOnly?: boolean;
    activeColorSt