@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

package/dist/index.d.ts

@@ -0,0 +1,1190 @@
+/// <reference types="react" />
+
+import { AppBridgeBlock } from '@frontify/app-bridge';
+import type { AppBridgeTheme } from '@frontify/app-bridge';
+import { Asset } from '@frontify/app-bridge';
+import type { AssetInputBlock as AssetInputBlock_2 } from '@frontify/sidebar-settings';
+import type { BaseBlock as BaseBlock_2 } from '@frontify/sidebar-settings';
+import { BlockContext } from '@frontify/app-bridge';
+import { BlockState } from '@frontify/app-bridge';
+import type { Bundle as Bundle_2 } from '@frontify/sidebar-settings';
+import { ButtonSize } from '@frontify/fondue';
+import { CheckboxState } from '@frontify/fondue';
+import type { ChecklistBlock as ChecklistBlock_2 } from '@frontify/sidebar-settings';
+import type { ChoicesType as ChoicesType_2 } from '@frontify/sidebar-settings';
+import { Color } from '@frontify/fondue';
+import { Color as Color_2 } from '@frontify/sidebar-settings';
+import type { ColorInputBlock as ColorInputBlock_2 } from '@frontify/sidebar-settings';
+import { ColorPalette } from '@frontify/app-bridge';
+import { CSSProperties } from 'react';
+import { Dispatch } from 'react';
+import type { Document as Document_2 } from '@frontify/app-bridge';
+import type { DocumentPage } from '@frontify/app-bridge';
+import type { DocumentSection } from '@frontify/app-bridge';
+import type { DropdownBlock as DropdownBlock_2 } from '@frontify/sidebar-settings';
+import type { DynamicSettingBlock as DynamicSettingBlock_2 } from '@frontify/sidebar-settings';
+import type { DynamicSupportedBlock as DynamicSupportedBlock_2 } from '@frontify/sidebar-settings';
+import type { FC } from 'react';
+import type { FileType } from '@frontify/app-bridge';
+import type { FontInputBlock as FontInputBlock_2 } from '@frontify/sidebar-settings';
+import { HTMLAttributes } from 'react';
+import type { InputBlock as InputBlock_2 } from '@frontify/sidebar-settings';
+import { InsertNodesOptions } from '@frontify/fondue';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { KeyboardCoordinateGetter } from '@dnd-kit/core';
+import type { LegacyAssetInputBlock as LegacyAssetInputBlock_2 } from '@frontify/sidebar-settings';
+import type { LinkBlock as LinkBlock_2 } from '@frontify/sidebar-settings';
+import type { LinkChooserBlock as LinkChooserBlock_2 } from '@frontify/sidebar-settings';
+import { MarkupElement } from '@frontify/fondue';
+import { MenuItemStyle } from '@frontify/fondue';
+import type { MultiInputBlock as MultiInputBlock_2 } from '@frontify/sidebar-settings';
+import { MutableRefObject } from 'react';
+import type { NotificationBlock as NotificationBlock_2 } from '@frontify/sidebar-settings';
+import { Palette } from '@frontify/fondue';
+import { PlateEditor } from '@frontify/fondue';
+import { PlatePlugin } from '@frontify/fondue';
+import { Plugin as Plugin_2 } from '@frontify/fondue';
+import { PluginComposer } from '@frontify/fondue';
+import { PluginProps } from '@frontify/fondue';
+import { RangeBeforeOptions } from '@frontify/fondue';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import type { SectionHeadingBlock as SectionHeadingBlock_2 } from '@frontify/sidebar-settings';
+import type { SegmentedControlsBlock as SegmentedControlsBlock_2 } from '@frontify/sidebar-settings';
+import { SensorDescriptor } from '@dnd-kit/core';
+import { SensorOptions } from '@dnd-kit/core';
+import { SetStateAction } from 'react';
+import type { SettingBlock as SettingBlock_2 } from '@frontify/sidebar-settings';
+import type { SimpleSettingBlock as SimpleSettingBlock_2 } from '@frontify/sidebar-settings';
+import type { SwitchBlock as SwitchBlock_2 } from '@frontify/sidebar-settings';
+import type { TemplateInputBlock as TemplateInputBlock_2 } from '@frontify/sidebar-settings';
+import { TemplateLegacy } from '@frontify/app-bridge';
+import type { TextareaBlock as TextareaBlock_2 } from '@frontify/sidebar-settings';
+import { TextStyleRenderElementProps } from '@frontify/fondue';
+import { TLinkElement } from '@frontify/fondue';
+import { TText } from '@frontify/fondue';
+import { UnwrapNodesOptions } from '@frontify/fondue';
+import { Value } from '@frontify/fondue';
+import type { ValueOrPromisedValue as ValueOrPromisedValue_2 } from '@frontify/sidebar-settings';
+import { WithOverride } from '@frontify/fondue';
+import { WrapNodesOptions } from '@frontify/fondue';
+
+export declare const addHttps: (url: string) => string;
+
+export declare const AllTextStylePlugins: (Custom1Plugin | Custom2Plugin | Custom3Plugin | Heading1Plugin | Heading2Plugin | Heading3Plugin | Heading4Plugin | ImageCaptionPlugin | ImageTitlePlugin | ParagraphPlugin | QuotePlugin)[];
+
+export declare const AllTextStyles: TextStyles[];
+
+export declare type AssetInputBlock = AssetInputBlock_2<AppBridgeBlock>;
+
+export declare type AttachmentItemProps = SortableAttachmentItemProps & {
+    isDragging?: boolean;
+    transformStyle?: Record<string, unknown>;
+    draggableProps?: Record<string, unknown>;
+    isOverlay?: boolean;
+};
+
+export declare const Attachments: ({ items, onDelete, onReplaceWithBrowse, onReplaceWithUpload, onBrowse, onUpload, onSorted, appBridge, triggerComponent: TriggerComponent, isOpen, onOpenChange, }: AttachmentsProps) => JSX_2.Element | null;
+
+export declare type AttachmentsProps = {
+    items?: Asset[];
+    appBridge: AppBridgeBlock;
+    onReplaceWithUpload: (attachmentToReplace: Asset, newAsset: Asset) => Promise<void>;
+    onReplaceWithBrowse: (attachmentToReplace: Asset, newAsset: Asset) => Promise<void>;
+    onDelete: (attachmentToDelete: Asset) => void;
+    onUpload: (uploadedAttachments: Asset[]) => Promise<void>;
+    onBrowse: (browserAttachments: Asset[]) => void;
+    onSorted: (sortedAttachments: Asset[]) => void;
+    triggerComponent?: (props: AttachmentsTriggerProps) => ReactElement;
+} & ({
+    isOpen?: never;
+    onOpenChange?: never;
+} | {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+});
+
+export declare const AttachmentsProvider: ({ appBridge, children, assetId, }: {
+    appBridge: AppBridgeBlock;
+    children: ReactNode;
+    assetId: string;
+}) => JSX_2.Element;
+
+export declare const AttachmentsToolbarButton: ({ flyoutId, }: AttachmentsToolbarButtonProps) => JSX_2.Element;
+
+declare type AttachmentsToolbarButtonProps = {
+    flyoutId?: string;
+};
+
+export declare type AttachmentsTriggerProps = {
+    children: ReactNode;
+    isFlyoutOpen: boolean;
+    triggerProps: HTMLAttributes<HTMLButtonElement>;
+    triggerRef: MutableRefObject<HTMLButtonElement>;
+};
+
+declare type BackgroundSettingsType = {
+    id?: string;
+    defaultValue?: boolean;
+    defaultColor?: Color;
+    preventDefaultColor?: boolean;
+    switchLabel?: string;
+    label?: string;
+};
+
+export declare type BaseBlock<T = undefined> = BaseBlock_2<AppBridgeBlock, T>;
+
+export declare const BlockButtonStyles: Record<string, CSSProperties & {
+    hover?: CSSProperties;
+}>;
+
+export declare type BlockConfigExport = {
+    /**
+     * Block component to render.
+     * {@link https://developer.frontify.com/d/XFPCrGNrXQQM/content-blocks#/details-concepts-1/content-blocks}
+     */
+    block: FC<BlockProps>;
+    /**
+     * Contains the block settings and its structure.
+     * {@link https://developer.frontify.com/d/XFPCrGNrXQQM/content-blocks#/details-concepts-1/block-settings-1}
+     */
+    settings: ReturnType<typeof defineSettings>;
+    /**
+     * Block lifecycle hook ran before the block gets added in the Guideline.
+     * The hook support both synchronous or asynchronous execution.
+     * {@link https://developer.frontify.com/d/XFPCrGNrXQQM/content-blocks#/details-concepts-1/block-lifecycle/on-block-creation}
+     */
+    onBlockCreated?: (({ appBridge }: {
+        appBridge: AppBridgeBlock;
+    }) => void) | (({ appBridge }: {
+        appBridge: AppBridgeBlock;
+    }) => Promise<void>);
+    /**
+     * Block lifecycle hook ran before the block gets deleted from the Guideline.
+     * The hook support both synchronous or asynchronous execution.
+     * {@link https://developer.frontify.com/d/XFPCrGNrXQQM/content-blocks#/details-concepts-1/block-lifecycle/on-block-deletion}
+     */
+    onBlockDeleted?: (({ appBridge }: {
+        appBridge: AppBridgeBlock;
+    }) => void) | (({ appBridge }: {
+        appBridge: AppBridgeBlock;
+    }) => Promise<void>);
+};
+
+export declare const BlockInjectButton: ({ onDrop, label, icon, secondaryLabel, isLoading, fillParentContainer, onAssetChooseClick, onUploadClick, withMenu, onClick, validFileType, verticalLayout, }: BlockInjectButtonProps) => JSX_2.Element;
+
+export declare type BlockInjectButtonProps = {
+    isLoading?: boolean;
+    label?: string;
+    validFileType?: keyof typeof FileType;
+    secondaryLabel?: string;
+    icon?: JSX.Element;
+    onDrop?: (files: FileList) => void;
+    fillParentContainer?: boolean;
+    onUploadClick?: () => void;
+    onAssetChooseClick?: () => void;
+    withMenu?: boolean;
+    onClick?: () => void;
+    verticalLayout?: boolean;
+};
+
+export declare const BlockItemWrapper: ({ children, toolbarItems, shouldHideWrapper, shouldHideComponent, isDragging, shouldFillContainer, outlineOffset, shouldBeShown, showAttachments, }: BlockItemWrapperProps) => ReactElement;
+
+export declare type BlockItemWrapperProps = {
+    children: ReactNode;
+    shouldHideWrapper?: boolean;
+    shouldHideComponent?: boolean;
+    toolbarItems: (ToolbarItem | undefined)[];
+    isDragging?: boolean;
+    shouldFillContainer?: boolean;
+    outlineOffset?: number;
+    shouldBeShown?: boolean;
+    /**
+     * When set to true the BlockItemWrapper must be a child of a {@link AttachmentsProvider} component,
+     *  or the block must be wrapped with a {@link withAttachmentsProvider} HOC.
+     * @default false
+     */
+    showAttachments?: boolean;
+};
+
+export declare type BlockProps = {
+    /**
+     * The Frontify App Bridge provides an interface to the Frontify app internals.
+     * {@link https://developer.frontify.com/d/XFPCrGNrXQQM/content-blocks#/details-concepts-1/content-blocks/introducing-the-app-bridge}
+     */
+    appBridge: AppBridgeBlock;
+};
+
+export declare type BlockSettingsStructureExport = {
+    [Sections.Main]?: SettingBlock[];
+    [Sections.Basics]?: SettingBlock[];
+    [Sections.Layout]?: SettingBlock[];
+    [Sections.Style]?: SettingBlock[];
+    [Sections.Security]?: SettingBlock[];
+} & {
+    [customSectionName: string]: SettingBlock[];
+};
+
+export declare const BlockStyles: Record<string, CSSProperties & {
+    hover?: CSSProperties;
+}>;
+
+/**
+ * Returns border radius settings: border radius switch, radius slider, custom radius input
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @param options.dependentSettingId Id of setting which the border radius is dependent on
+ * @returns {SettingBlock} Returns border settings
+ */
+declare type BorderRadiusSettingsType = {
+    id?: string;
+    dependentSettingId?: string;
+    radiusStyleMap?: Record<Radius, string>;
+    defaultRadius?: Radius;
+};
+
+/**
+ * Returns border radius settings: border radius switch, radius slider, custom radius inputs for every corner
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @param options.dependentSettingId Id of setting which the border radius is dependent on
+ * @returns {SettingBlock} Returns border settings
+ */
+declare type BorderRadiusSettingsType_2 = {
+    id?: string;
+    dependentSettingId?: string;
+    defaultValue?: Radius;
+};
+
+export declare type BorderSettings = {
+    hasBorder: boolean;
+    borderStyle: BorderStyle;
+    borderWidth: string;
+    borderColor: Color_2;
+};
+
+/**
+ * Returns border settings: border switch, border style, border width, border color
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @param options.switchLabel Label for the border switch
+ * @param options.defaultValue Default value for the border switch
+ * @returns {SettingBlock} Returns border settings
+ */
+declare type BorderSettingsType = {
+    id?: string;
+    defaultValue?: boolean;
+    defaultColor?: Color_2;
+    switchLabel?: string;
+};
+
+export declare enum BorderStyle {
+    Solid = "Solid",
+    Dashed = "Dashed",
+    Dotted = "Dotted"
+}
+
+export declare const borderStyleMap: Record<BorderStyle, string>;
+
+export declare type Bundle = Bundle_2<AppBridgeBlock>;
+
+export declare const BUTTON_PLUGIN = "button-plugin";
+
+export declare interface ButtonPlugin {
+    forceSubmit?: boolean;
+    /**
+     * Allow custom config for rangeBeforeOptions.
+     * @example default
+     * {
+     *   matchString: ' ',
+     *   skipInvalid: true,
+     *   afterMatch: true,
+     * }
+     */
+    rangeBeforeOptions?: RangeBeforeOptions;
+    /**
+     * Hotkeys to trigger floating button.
+     * @default 'command+k, ctrl+k'
+     */
+    triggerFloatingButtonHotkeys: string;
+    /**
+     * Callback to validate an url.
+     * @default isUrl
+     */
+    isUrl: (text: string) => boolean;
+    /**
+     * Callback to optionally get the href for a url
+     * @returns href: an optional link to be used that is different from the text content (example https://google.com for google.com)
+     */
+    getUrlHref?: (url: string) => string | undefined;
+    /**
+     * On keyboard shortcut or toolbar mousedown, get the link url by calling this promise. The
+     * default behavior is to use the browser's native `prompt`.
+     */
+    getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;
+}
+
+export declare class ButtonPlugin extends Plugin_2 {
+    styles: CSSProperties;
+    private appBridge;
+    constructor({ styles, ...props }: ButtonPluginProps);
+    plugins(): PlatePlugin[];
+}
+
+export declare type ButtonPluginProps = Omit<PluginProps, 'styles'> & {
+    styles?: Record<string, CSSProperties & {
+        hover?: CSSProperties;
+    }>;
+} & {
+    appBridge: AppBridgeBlock;
+};
+
+export declare type ButtonToolbarItem = {
+    type: 'button';
+} & ToolbarButtonProps;
+
+export declare type ChecklistBlock = ChecklistBlock_2<AppBridgeBlock>;
+
+export declare type ChoicesType = ChoicesType_2<AppBridgeBlock>;
+
+export declare type ColorInputBlock = ColorInputBlock_2<AppBridgeBlock>;
+
+export declare const convertToRteValue: (textStyle?: string, text?: string, align?: 'center' | 'right' | 'left' | 'justify') => string;
+
+export declare const createButtonNode: <V extends Value>(editor: PlateEditor<V>, { url, text, buttonStyle, target, children }: CreateButtonNodeOptions) => TButtonElement;
+
+export declare interface CreateButtonNodeOptions {
+    url: string;
+    text?: string;
+    buttonStyle?: RichTextButtonStyle;
+    target?: string;
+    children?: TText[];
+}
+
+/**
+ * Enables support for hyperlinks.
+ */
+export declare const createButtonPlugin: (appBridge: AppBridgeBlock) => PlatePlugin;
+
+export declare const createLinkPlugin: (appBridge: AppBridgeBlock) => PlatePlugin;
+
+export declare const createParagraphPlugin: (styles: CSSProperties) => PlatePlugin;
+
+export declare const createQuotePlugin: (styles: CSSProperties) => PlatePlugin;
+
+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 customCoordinatesGetterFactory: (columnGap: number, rowGap: number) => KeyboardCoordinateGetter;
+
+export declare const DEFAULT_ATTACHMENTS_BUTTON_ID = "attachments";
+
+export declare const DEFAULT_DRAG_TOOLTIP = "Drag or press \u21B5 to move";
+
+export declare const DEFAULT_DRAGGING_TOOLTIP = "Move with \u2191\u2193\u2190\u2192 and confirm with \u21B5";
+
+export declare const DEFAULT_MENU_BUTTON_ID = "menu";
+
+/**
+ * Type helper to make it easier to export a theme, accepts a direct {@link BlockConfigExport} object.
+ */
+export declare const defineBlock: (config: BlockConfigExport) => BlockConfigExport;
+
+/**
+ * Type helper to make it easier to export block's settings structure, accepts a direct {@link BlockSettingsStructureExport} object
+ * or a function return a direct {@link BlockSettingsStructureExport} or a function returning a Promise of {@link BlockSettingsStructureExport}.
+ */
+export declare const defineSettings: <T extends BlockSettingsStructureExport | (() => Promise<BlockSettingsStructureExport>) | (() => BlockSettingsStructureExport)>(settingsStructure: T) => T;
+
+export declare const DownloadButton: ({ onDownload }: DownloadButtonProps) => JSX_2.Element;
+
+declare type DownloadButtonProps = {
+    onDownload: () => void;
+};
+
+export declare const DragHandleToolbarButton: ({ tooltip, icon, setActivatorNodeRef, draggableProps, }: DragHandleToolbarButtonProps) => JSX_2.Element;
+
+export declare type DragHandleToolbarButtonProps = {
+    icon?: ReactNode;
+    tooltip?: string;
+    draggableProps: Record<string, unknown>;
+    setActivatorNodeRef?: (node: HTMLElement | null) => void;
+};
+
+export declare type DragHandleToolbarItem = {
+    type: 'dragHandle';
+} & DragHandleToolbarButtonProps;
+
+export declare const DragPreviewContextProvider: ({ children, isDragPreview, }: {
+    children: ReactNode;
+    isDragPreview: boolean;
+}) => JSX_2.Element;
+
+export declare type DropdownBlock = DropdownBlock_2<AppBridgeBlock>;
+
+export declare type DynamicSettingBlock<Block extends DynamicSupportedBlock = DynamicSupportedBlock> = DynamicSettingBlock_2<AppBridgeBlock, Block>;
+
+export declare type DynamicSupportedBlock = DynamicSupportedBlock_2<AppBridgeBlock>;
+
+export declare const ELEMENT_BUTTON = "button";
+
+export declare const FlyoutToolbarButton: ({ content, icon, tooltip, flyoutId, flyoutFooter, flyoutHeader, }: FlyoutToolbarButtonProps) => JSX_2.Element;
+
+export declare type FlyoutToolbarButtonProps = {
+    content: ReactNode;
+    icon: ReactNode;
+    tooltip: ReactNode;
+    flyoutId: string;
+    flyoutFooter?: ReactNode;
+    flyoutHeader?: ReactNode;
+};
+
+export declare type FlyoutToolbarItem = {
+    type: 'flyout';
+} & FlyoutToolbarButtonProps;
+
+export declare type FontInputBlock = FontInputBlock_2<AppBridgeBlock>;
+
+export declare const getBackgroundColorStyles: (backgroundColor: Color) => CSSProperties;
+
+/**
+ * Returns background settings: background switch, background color
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @param options.defaultValue Default value for the background switch
+ * @param options.defaultColor Default value for the background color
+ * @param options.preventDefaultColor Whether the background color should be empty by default
+ * @param options.label Label for the background input
+ * @param options.switchLabel Label for the background switch
+ * @returns {SettingBlock} Returns background settings
+ */
+export declare const getBackgroundSettings: (options?: BackgroundSettingsType) => SettingBlock;
+
+export declare const getBorderRadiusSettings: (options?: BorderRadiusSettingsType) => SettingBlock;
+
+export declare const getBorderRadiusSlider: (id: string, defaultValue?: Radius) => SettingBlock;
+
+export declare const getBorderSettings: (options?: BorderSettingsType) => SettingBlock;
+
+export declare const getBorderStyles: (style?: BorderStyle, borderWidth?: string, color?: Color) => CSSProperties;
+
+export declare const getDefaultPluginsWithLinkChooser: (appBridge: AppBridgeBlock) => PluginComposer;
+
+export declare const getExtendedBorderRadiusSettings: (options?: BorderRadiusSettingsType_2) => SettingBlock;
+
+export declare const getGutterSettings: (options?: GutterSettingsType) => SettingBlock;
+
+export declare const getLegacyUrl: (editor: PlateEditor) => string;
+
+export declare const getLinkFromEditor: (editor: PlateEditor) => string;
+
+/**
+ * Returns margin settings: margin switch, margin slider, custom margin input for every direction
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @returns {SettingBlock} Returns margin settings
+ */
+export declare const getMarginExtendedSettings: (options?: MarginSettingsType_2) => SettingBlock;
+
+export declare const getMarginSettings: (options?: MarginSettingsType) => SettingBlock;
+
+/**
+ * Returns margin settings: margin switch, margin slider, custom margin input
+ *
+ * @param {string} id Custom suffix for the setting ids
+ * @returns {SettingBlock} Returns margin settings
+ */
+export declare const getMarginSlider: (id: string) => SettingBlock;
+
+/**
+ * Returns padding settings: padding switch, padding slider, custom padding input for every direction
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @returns {SettingBlock} Returns padding settings
+ */
+export declare const getPaddingExtendedSettings: (options?: PaddingSettingsType_2) => SettingBlock;
+
+export declare const getPaddingSettings: (options?: PaddingSettingsType) => SettingBlock;
+
+/**
+ * Returns padding settings: padding switch, padding slider, custom padding input
+ *
+ * @param options Options for the settings
+ * @param options.id Custom suffix for the setting ids
+ * @returns {SettingBlock} Returns padding settings
+ */
+export declare const getPaddingSlider: (id: string) => SettingBlock;
+
+export declare const getRadiusStyles: (radiusChoice: Radius, hasRadius?: boolean, radiusValue?: number) => CSSProperties;
+
+export declare const getReadableColor: (textColor: unknown, backgroundColor: unknown) => string;
+
+export declare const getSecurityDownloadableSetting: (options?: SecurityDownloadableSettingType) => SettingBlock;
+
+export declare const getSecurityGlobalControlId: (id?: string) => string;
+
+/**
+ * Returns segment controls for global security settings.
+ *
+ * @param {string} id custom id for the setting block
+ *
+ * @returns {SettingBlock} Returns
+ */
+export declare const getSecurityGlobalControlSetting: (id?: string) => SettingBlock[];
+
+export declare const getUrl: (editor: PlateEditor) => string;
+
+export declare const getUrlFromEditor: (editor: PlateEditor) => string;
+
+export declare const getUrlFromLinkOrLegacyLink: (link: TLinkElement_2) => string;
+
+/**
+ * Returns gutter settings: gutter switch, gutter choices or gutter custom input
+ *
+ * @param options Options for the settings
+ * @param options.id Custom id for the gutters switch
+ * @param options.dependentSettingId Id of the dependent setting
+ * @param options.spacingChoiceId Id of the spacing choice
+ * @param options.defaultValueChoices Default value for the spacing choice
+ * @returns {SettingBlock} Returns the gutter settings
+ */
+declare type GutterSettingsType = {
+    id?: string;
+    dependentSettingId?: string;
+    spacingChoiceId?: string;
+    spacingCustomId?: string;
+    defaultValueChoices?: GutterSpacing;
+};
+
+export declare enum GutterSpacing {
+    Auto = "Auto",
+    S = "S",
+    M = "M",
+    L = "L"
+}
+
+export declare const gutterSpacingStyleMap: Record<GutterSpacing, string>;
+
+export declare const hasRichTextValue: (string?: string) => boolean;
+
+export declare class Heading1Plugin extends Plugin_2 {
+    styles: CSSProperties;
+    constructor({ styles, ...props }?: PluginProps);
+    plugins(): PlatePlugin[];
+}
+
+export declare class Heading2Plugin extends Plugin_2 {
+    styles: CSSProperties;
+    constructor({ styles, ...props }?: PluginProps);
+    plugins(): PlatePlugin[];
+}
+
+export declare class Heading3Plugin extends Plugin_2 {
+    styles: CSSProperties;
+    constructor({ styles, ...props }?: PluginProps);
+    plugins(): PlatePlugin[];
+}
+
+export declare class Heading4Plugin extends Plugin_2 {
+    styles: CSSProperties;
+    constructor({ styles, ...props }?: PluginProps);
+    plugins(): PlatePlugin[];
+}
+
+export declare class ImageCaptionPlugin extends Plugin_2 {
+    styles: CSSProperties;
+    constructor({ styles, ...props }?: PluginProps);
+    plugins(): PlatePlugin[];
+}
+
+export declare class ImageTitlePlugin extends Plugin_2 {
+    styles: CSSProperties;
+    constructor({ styles, ...props }?: PluginProps);
+    plugins(): PlatePlugin[];
+}
+
+export declare type InitiallyExpandedItems = {
+    documentId?: number;
+    pageId?: number;
+};
+
+export declare type InputBlock = InputBlock_2<AppBridgeBlock>;
+
+export declare const insertButton: <V extends Value>(editor: PlateEditor<V>, createButtonNodeOptions: CreateButtonNodeOptions, options?: InsertNodesOptions<V> | undefined) => void;
+
+export declare const isDark: (color: unknown, threshold?: number) => boolean;
+
+export declare const isDownloadable: (security: Security, downloadable: boolean, globalAssetDownloadEnabled: boolean) => boolean;
+
+export declare const isValidUrl: (url: string) => boolean;
+
+export declare const isValidUrlOrEmpty: (url: string) => boolean;
+
+/**
+ * Cleans and joins an array of inputs with possible undefined or boolean values.
+ *
+ * @param {Array} classNames Array of class names
+ * @returns Clean string to be used for class name.
+ */
+export declare const joinClassNames: (classNames: (string | undefined | boolean)[]) => string;
+
+export declare type LegacyAssetInputBlock = LegacyAssetInputBlock_2<AppBridgeBlock>;
+
+export declare type LinkBlock = LinkBlock_2<AppBridgeBlock>;
+
+export declare type LinkChooserBlock = LinkChooserBlock_2<AppBridgeBlock>;
+
+export declare const LinkInput: ({ onUrlChange, onToggleTab, isValidUrlOrEmpty, appBridge, clearable, placeholder, newTab, openInNewTab, url, required, info, label, buttonSize, hideInternalLinkButton, }: LinkInputProps) => JSX_2.Element;
+
+declare type LinkInputProps = {
+    url?: string;
+    info?: string;
+    label?: string;
+    required?: boolean;
+    newTab?: CheckboxState;
+    openInNewTab?: boolean;
+    onUrlChange?: (value: string) => void;
+    onToggleTab?: (checked: boolean) => void;
+    isValidUrlOrEmpty?: (url: string) => boolean;
+    appBridge: AppBridgeBlock | AppBridgeTheme;
+    clearable?: boolean;
+    placeholder?: string;
+    buttonSize?: ButtonSize;
+    hideInternalLinkButton?: boolean;
+};
+
+export declare class LinkPlugin extends Plugin_2 {
+    styles: CSSProperties;
+    private appBridge;
+    constructor({ styles, ...props }: LinkPluginProps);
+    plugins(): PlatePlugin[];
+}
+
+export declare type LinkPluginProps = PluginProps & {
+    appBridge: AppBridgeBlock;
+};
+
+export declare const LinkSelector: ({ url, onUrlChange, buttonSize, getAllDocuments, getDocumentPagesByDocumentId, getDocumentSectionsByDocumentPageId, }: LinkSelectorProps) => ReactElement;
+
+declare type LinkSelectorProps = {
+    url: string;
+    onUrlChange?: (value: string) => void;
+    buttonSize?: ButtonSize;
+    getAllDocuments: () => Promise<Document_2[]>;
+    getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;
+    getDocumentPagesByDocumentId: (documentId: number) => Promise<DocumentPage[]>;
+};
+
+export declare const mapAppBridgeColorPalettesToFonduePalettes: (colorPalettes: ColorPalette[]) => Palette[];
+
+export declare const mapAppBridgeColorPaletteToFonduePalette: (colorPalette: ColorPalette) => Palette;
+
+export declare enum Margin {
+    None = "None",
+    Small = "Small",
+    Medium = "Medium",
+    Large = "Large"
+}
+
+export declare type MarginExtendedSettings = {
+    hasExtendedCustomMargin: boolean;
+    extendedMarginChoice: Margin;
+    extendedMarginTop: string;
+    extendedMarginRight: string;
+    extendedMarginBottom: string;
+    extendedMarginLeft: string;
+};
+
+export declare type MarginSettings = {
+    marginChoice: Margin;
+    hasCustomMarginValue: boolean;
+    marginValue: string;
+};
+
+declare type MarginSettingsType = {
+    id?: string;
+    marginStyleMap?: Record<Margin, string>;
+};
+
+declare type MarginSettingsType_2 = {
+    id?: string;
+};
+
+export declare const marginStyleMap: Record<Margin, string>;
+
+export declare const MenuToolbarButton: ({ items, flyoutId, tooltip, }: MenuToolbarButtonProps) => JSX_2.Element;
+
+export declare type MenuToolbarButtonProps = {
+    items: ToolbarFlyoutMenuItem[][];
+    flyoutId?: string;
+    tooltip?: string;
+};
+
+export declare type MenuToolbarItem = {
+    type: 'menu';
+} & MenuToolbarButtonProps;
+
+/**
+ * Moves an item from the 'from' position to the 'to' position and updates the array
+ *
+ * @param {Array} array Array of items
+ * @param {Number} from Initial index of the item
+ * @param {Number} to New index of the item
+ * @returns {Array} New array with the item moved to the new position
+ */
+export declare const moveItemInArray: <T>(array: T[], from: number, to: number) => T[];
+
+export declare const MultiFlyoutContextProvider: ({ children, openFlyoutIds, setOpenFlyoutIds, }: {
+    children: ReactNode;
+} & MultiFlyoutContextType) => JSX_2.Element;
+
+export declare type MultiFlyoutContextType = {
+    openFlyoutIds: string[];
+    setOpenFlyoutIds: Dispatch<SetStateAction<string[]>>;
+};
+
+export declare type MultiInputBlock = MultiInputBlock_2<AppBridgeBlock>;
+
+export declare type NotificationBlock = NotificationBlock_2<AppBridgeBlock>;
+
+export declare enum Padding {
+    None = "None",
+    Small = "Small",
+    Medium = "Medium",
+    Large = "Large"
+}
+
+export declare type PaddingExtendedSettings = {
+    hasExtendedCustomPadding: boolean;
+    extendedPaddingChoice: Padding;
+    extendedPaddingTop: string;
+    extendedPaddingRight: string;
+    extendedPaddingBottom: string;
+    extendedPaddingLeft: string;
+};
+
+export declare type PaddingSettings = {
+    paddingChoice: Padding;
+    hasCustomPaddingValue: boolean;
+    paddingValue: string;
+};
+
+declare type PaddingSettingsType = {
+    id?: string;
+    paddingStyleMap?: Record<Padding, string>;
+};
+
+declare type PaddingSettingsType_2 = {
+    id?: string;
+};
+
+export declare const paddingStyleMap: Record<Padding, string>;
+
+export declare const PARAGRAPH_CLASSES = "tw-m-0 tw-px-0 tw-py-0";
+
+export declare class ParagraphMarkupElement extends MarkupElement {
+    constructor(id?: TextStyles, node?: ({ element, attributes, children, styles }: TextStyleRenderElementProps) => JSX_2.Element);
+}
+
+export declare const ParagraphMarkupElementNode: ({ element, attributes, children, styles }: TextStyleRenderElementProps) => JSX_2.Element;
+
+export declare class ParagraphPlugin extends Plugin_2 {
+    styles: {};
+    constructor({ styles, ...props }?: PluginProps);
+    plugins(): PlatePlugin[];
+}
+
+export declare const QuoteMarkupElementNode: ({ element, attributes, children, styles }: TextStyleRenderElementProps) => JSX_2.Element;
+
+export declare class QuotePlugin extends Plugin_2 {
+    styles: CSSProperties;
+    constructor({ styles, ...props }?: PluginProps);
+    plugins(): PlatePlugin[];
+}
+
+export declare enum Radius {
+    None = "None",
+    Small = "Small",
+    Medium = "Medium",
+    Large = "Large"
+}
+
+export declare type RadiusExtendedSettings = {
+    hasExtendedCustomRadius: boolean;
+    extendedRadiusChoice: Radius;
+    extendedRadiusTopLeft: string;
+    extendedRadiusTopRight: string;
+    extendedRadiusBottomLeft: string;
+    extendedRadiusBottomRight: string;
+};
+
+export declare type RadiusSettings = {
+    hasRadius: boolean;
+    radiusValue: string;
+    radiusChoice: Radius;
+};
+
+export declare const radiusStyleMap: Record<Radius, string>;
+
+export declare const relativeUrlRegex: RegExp;
+
+export declare type RichTextButtonStyle = 'primary' | 'secondary' | 'tertiary';
+
+export declare const RichTextEditor: ({ id, isEditing, value, columns, gap, placeholder, plugins, onTextChange, showSerializedText, }: RichTextEditorProps) => JSX_2.Element;
+
+declare type RichTextEditorProps = {
+    id?: string;
+    isEditing: boolean;
+    value?: string;
+    placeholder?: string;
+    columns?: number;
+    gap?: string;
+    plugins?: PluginComposer;
+    showSerializedText?: boolean;
+    onTextChange?: (value: string) => void;
+};
+
+export declare type SectionHeadingBlock = SectionHeadingBlock_2<AppBridgeBlock>;
+
+export declare enum Sections {
+    Main = "main",
+    Basics = "basics",
+    Layout = "layout",
+    Style = "style",
+    Security = "security",
+    Targets = "targets"
+}
+
+export declare enum Security {
+    Global = "Global",
+    Custom = "Custom"
+}
+
+/**
+ * Returns the downloadable security settings.
+ *
+ * @param {string} id custom id for the setting block
+ * @param {string} globalControlId custom id for the global control setting block
+ *
+ * @returns {SettingBlock} Returns downloadable security settings.
+ */
+declare type SecurityDownloadableSettingType = {
+    id?: string;
+    globalControlId?: string;
+};
+
+export declare type SegmentedControlsBlock = SegmentedControlsBlock_2<AppBridgeBlock>;
+
+/**
+ * Sets alpha value and returns rgba string.
+ *
+ * @param {string} color Rgb or hex string.
+ * @returns {String} To be used as css value.
+ */
+export declare const setAlpha: (alpha: number, color?: string) => string;
+
+export declare type SettingBlock = SettingBlock_2<AppBridgeBlock>;
+
+declare type ShortNotationColor = {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+};
+
+export declare type SimpleSettingBlock = SimpleSettingBlock_2<AppBridgeBlock>;
+
+export declare type SortableAttachmentItemProps = {
+    item: Asset;
+    isEditing: boolean;
+    onDelete: () => void;
+    isLoading?: boolean;
+    onReplaceWithBrowse: () => void;
+    onReplaceWithUpload: (uploadedAsset: Asset) => void;
+    onDownload?: () => Promise<void>;
+};
+
+export declare const submitFloatingButton: <V extends Value>(editor: PlateEditor<V>) => true | undefined;
+
+export declare type SwitchBlock = SwitchBlock_2<AppBridgeBlock>;
+
+export declare type TButtonElement = TLinkElement & {
+    chosenLink?: {
+        searchResult?: {
+            link?: string;
+        };
+    };
+};
+
+export declare type TemplateInputBlock = TemplateInputBlock_2<AppBridgeBlock>;
+
+export declare type TextareaBlock = TextareaBlock_2<AppBridgeBlock>;
+
+export declare const TextStylePluginsWithoutImage: (Custom1Plugin | Custom2Plugin | Custom3Plugin | Heading1Plugin | Heading2Plugin | Heading3Plugin | Heading4Plugin | ParagraphPlugin | QuotePlugin)[];
+
+export declare enum TextStyles {
+    heading1 = "heading1",
+    heading2 = "heading2",
+    heading3 = "heading3",
+    heading4 = "heading4",
+    custom1 = "custom1",
+    custom2 = "custom2",
+    custom3 = "custom3",
+    quote = "quote",
+    imageCaption = "imageCaption",
+    imageTitle = "imageTitle",
+    p = "p"
+}
+
+export declare const TextStylesWithoutImage: TextStyles[];
+
+export declare const THEME_PREFIX = "--f-theme-settings-";
+
+declare type TLinkElement_2 = TLinkElement & {
+    chosenLink?: {
+        searchResult?: {
+            link?: string;
+        };
+        openInNewTab?: boolean;
+    };
+};
+
+/**
+ * Maps color strings to color objects.
+ *
+ * @param {String} String representing color
+ * @returns {Color} Color object
+ */
+export declare const toColorObject: (colorString: string) => Color;
+
+/**
+ * Maps color object of rgba values to hex alpha string.
+ *
+ * @param {Object} Color object
+ * @returns {String} To be used as css value.
+ */
+export declare const toHex8String: (color: Color) => string;
+
+/**
+ * Maps color object of rgba values to hex alpha string.
+ */
+export declare const toHexString: (color: Color) => string;
+
+export declare const Toolbar: ({ items, attachments }: ToolbarProps) => JSX_2.Element;
+
+declare type ToolbarButtonProps = {
+    icon: JSX_2.Element;
+    tooltip?: string;
+    onClick: () => void;
+};
+
+export declare const ToolbarFlyoutMenu: ({ items, flyoutId }: ToolbarFlyoutMenuProps) => JSX_2.Element;
+
+export declare type ToolbarFlyoutMenuItem = {
+    title: string;
+    onClick: () => void;
+    icon: JSX_2.Element;
+    style?: MenuItemStyle;
+};
+
+export declare type ToolbarFlyoutMenuProps = {
+    items: ToolbarFlyoutMenuItem[][];
+    flyoutId: string;
+};
+
+export declare type ToolbarItem = DragHandleToolbarItem | ButtonToolbarItem | FlyoutToolbarItem | MenuToolbarItem;
+
+export declare type ToolbarProps = {
+    items: ToolbarItem[];
+    attachments: {
+        isEnabled: boolean;
+    };
+};
+
+/**
+ * Maps color object of rgba values to rgba string.
+ *
+ * @param {Object} Color object
+ * @returns {String} To be used as css value.
+ */
+export declare const toRgbaString: (color: Color) => string;
+
+/**
+ * Maps color object from long to short rgba notation.
+ *
+ * @param {Object} Color object
+ * @returns {Object} ShortNotationColor object
+ */
+export declare const toShortRgba: (color: unknown) => ShortNotationColor;
+
+export declare const triggerFloatingButton: <V extends Value>(editor: PlateEditor<V>, { focused, }?: {
+    focused?: boolean | undefined;
+}) => void;
+
+export declare const triggerFloatingButtonEdit: <V extends Value>(editor: PlateEditor<V>) => void;
+
+/**
+ * Trigger floating button.
+ *
+ * Do not trigger when:
+ * - selection is across blocks
+ * - selection has more than one leaf node
+ * - lowest selection is not text
+ * - selection has a button node
+ */
+export declare const triggerFloatingButtonInsert: <V extends Value>(editor: PlateEditor<V>, { focused, }?: {
+    focused?: boolean | undefined;
+}) => void;
+
+/**
+ * Unwrap button node.
+ */
+export declare const unwrapButton: <V extends Value>(editor: PlateEditor<V>, options?: UnwrapNodesOptions & {
+    split?: boolean;
+}) => boolean;
+
+/**
+ * If selection in a button or is not url:
+ * - insert text with url, exit
+ * If selection is expanded or `update` in a button:
+ * - remove button node, get button text
+ * Then:
+ * - insert button node
+ */
+export declare const upsertButton: <V extends Value>(editor: PlateEditor<V>, { url, text, buttonStyle, target, insertTextInButton, insertNodesOptions, isUrl, }: UpsertButtonOptions<V>) => true | undefined;
+
+export declare type UpsertButtonOptions<V extends Value = Value> = CreateButtonNodeOptions & {
+    /**
+     * If true, insert text when selection is in url.
+     */
+    insertTextInButton?: boolean;
+    insertNodesOptions?: InsertNodesOptions<V>;
+    unwrapNodesOptions?: UnwrapNodesOptions<V>;
+    wrapNodesOptions?: WrapNodesOptions<V>;
+    isUrl?: (url: string) => boolean;
+};
+
+/**
+ * If the text is different than the button above text, replace button children by a new text.
+ * The new text has the same marks than the first text replaced.
+ */
+export declare const upsertButtonText: <V extends Value>(editor: PlateEditor<V>, { text }: UpsertButtonOptions<V>) => void;
+
+export declare const useAttachments: (appBridge: AppBridgeBlock, attachmentKey: string) => {
+    onAttachmentsAdd: (newAssets: Asset[]) => Promise<void>;
+    onAttachmentDelete: (assetToDelete: Asset) => Promise<void>;
+    onAttachmentReplace: (attachmentToReplace: Asset, newAsset: Asset) => Promise<void>;
+    onAttachmentsSorted: (assets: Asset[]) => Promise<void>;
+    attachments: Asset[];
+    appBridge: AppBridgeBlock<BlockState, BlockContext, {
+        assetsChosen: {
+            assets: Asset[];
+        };
+        templateChosen: {
+            template: TemplateLegacy;
+        };
+        "State.settings": [Record<string, unknown>, Record<string, unknown>];
+        "State.assets": [Record<string, unknown>, Record<string, unknown>];
+        "State.templates": [Record<string, unknown>, Record<string, unknown>];
+        "State.*": [BlockState, BlockState];
+        "Context.portalId": [number, number];
+        "Context.blockId": [number, number];
+        "Context.sectionId"?: [number | undefined, number | undefined] | undefined;
+        "Context.*": [BlockContext, BlockContext];
+    }>;
+};
+
+export declare const useAttachmentsContext: () => {
+    onAttachmentsAdd: (newAssets: Asset[]) => Promise<void>;
+    onAttachmentDelete: (assetToDelete: Asset) => Promise<void>;
+    onAttachmentReplace: (attachmentToReplace: Asset, newAsset: Asset) => Promise<void>;
+    onAttachmentsSorted: (assets: Asset[]) => Promise<void>;
+    attachments: Asset[];
+    appBridge: AppBridgeBlock<BlockState, BlockContext, {
+        assetsChosen: {
+            assets: Asset[];
+        };
+        templateChosen: {
+            template: TemplateLegacy;
+        };
+        "State.settings": [Record<string, unknown>, Record<string, unknown>];
+        "State.assets": [Record<string, unknown>, Record<string, unknown>];
+        "State.templates": [Record<string, unknown>, Record<string, unknown>];
+        "State.*": [BlockState, BlockState];
+        "Context.portalId": [number, number];
+        "Context.blockId": [number, number];
+        "Context.sectionId"?: [number | undefined, number | undefined] | undefined;
+        "Context.*": [BlockContext, BlockContext];
+    }>;
+};
+
+export declare const useDndSensors: (columnGap?: number, rowGap?: number) => SensorDescriptor<SensorOptions>[];
+
+export declare const useDragPreviewContext: () => boolean;
+
+export declare const useMultiFlyoutContext: () => MultiFlyoutContextType;
+
+export declare const useMultiFlyoutState: (flyoutId: string) => {
+    isOpen: boolean;
+    onOpenChange: (isFlyoutOpen: boolean) => void;
+};
+
+export declare type ValueOrPromisedValue<T> = ValueOrPromisedValue_2<AppBridgeBlock, T>;
+
+/**
+ * Block-level HOC for cases when there is only one attachment asset field related to the block.
+ * Recommended for most cases.
+ * If finer control is required over attachments, use {@link AttachmentsProvider} component.
+ */
+export declare const withAttachmentsProvider: <T extends BlockProps>(Component: (props: T) => ReactNode, assetId: string) => {
+    (props: T): JSX_2.Element;
+    displayName: string;
+};
+
+/**
+ * Insert space after a url to wrap a button.
+ * Lookup from the block start to the cursor to check if there is an url.
+ * If not found, lookup before the cursor for a space character to check the url.
+ *
+ * On insert data:
+ * Paste a string inside a button element will edit its children text but not its url.
+ *
+ */
+export declare const withButton: WithOverride;
+
+/**
+ * Wrap a button node with split.
+ */
+export declare const wrapButton: <V extends Value>(editor: PlateEditor<V>, { url, buttonStyle, target, ...options }: WrapButtonOptions<V>) => void;
+
+export declare interface WrapButtonOptions<V extends Value = Value> extends WrapNodesOptions<V> {
+    url: string;
+    buttonStyle?: RichTextButtonStyle;
+    target?: string;
+}
+
+
+export * from "@frontify/sidebar-settings";
+
+export { }