@useloops/design-system/dist/index.d.ts

The official React based Loops design system

import * as react from 'react';
import react__default, { FunctionComponent, Dispatch, SetStateAction, ReactNode, ReactElement, PropsWithChildren, ChangeEvent, FC } from 'react';
import * as _mui_material from '@mui/material';
import { SxProps, Theme, CSSObject, AvatarProps as AvatarProps$1, AvatarGroupProps as AvatarGroupProps$1, LinkProps as LinkProps$1, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, TypographyProps as TypographyProps$1, BoxProps, FormControlLabelProps as FormControlLabelProps$1, Breakpoint, IconButtonProps as IconButtonProps$1, TooltipProps as TooltipProps$1, ButtonGroupProps, TextFieldProps as TextFieldProps$1, PaperProps, PopperProps as PopperProps$1, ClickAwayListenerProps, FadeProps, LinearProgressProps, SelectProps as SelectProps$1, SelectChangeEvent, SkeletonProps as SkeletonProps$1, SwitchProps as SwitchProps$1, ChipProps as ChipProps$1, PaletteMode, Direction } from '@mui/material';
import { PopupState } from 'material-ui-popup-state/hooks';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { ChipProps } from '@mui/material/Chip';
import { SubmitHandler } from 'react-hook-form';
import { Theme as Theme$1 } from '@mui/material/styles';
import { NumericFormatProps } from 'react-number-format';
import * as _emotion_styled from '@emotion/styled';
import * as _mui_system from '@mui/system';
import { UniqueIdentifier } from '@dnd-kit/core';
import { Mark } from '@mui/material/Slider/useSlider.types';
import { LazyLoadImageProps } from 'react-lazy-load-image-component';

interface ColorRange$1 {
    0: string;
    50?: string;
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    800: string;
    900: string;
    950?: string;
    1000: string;
    1100?: string;
}
interface ColorRangeAlpha$1 {
    0: string;
    0.01: string;
    1: string;
    2: string;
    3: string;
    4: string;
    5: string;
}
declare enum FontWeight {
    DEFAULT = 400,
    BOLD = 500
}
interface SemanticColor {
    light: {
        surface: {
            sunken: string | undefined;
            default: string | undefined;
            raised: string | undefined;
            overlay: string | undefined;
            scrim: string | undefined;
            transparent: string | undefined;
        };
        interaction: {
            none: string | undefined;
            hover: string | undefined;
            press: string | undefined;
            hoverOnDark: string | undefined;
            pressOnDark: string | undefined;
            disabled: string | undefined;
        };
        stroke: {
            default: string | undefined;
            light: string | undefined;
            focus: string | undefined;
            disabled: string | undefined;
        };
        text: {
            primary: string | undefined;
            secondary: string | undefined;
            placeholder: string | undefined;
            disabled: string | undefined;
            link: string | undefined;
            linkHover: string | undefined;
            primaryInverted: string | undefined;
            secondaryInverted: string | undefined;
            placeholderInverted: string | undefined;
            disabledInverted: string | undefined;
            positive: string | undefined;
            negative: string | undefined;
            lockedWhite: string | undefined;
        };
        icon: {
            primary: string | undefined;
            secondary: string | undefined;
            disabled: string | undefined;
            primaryInverted: string | undefined;
            secondaryInverted: string | undefined;
            disabledInverted: string | undefined;
            positive: string | undefined;
            negative: string | undefined;
            lockedWhite: string | undefined;
            link: string | undefined;
            linkHover: string | undefined;
        };
        input: {
            default: string | undefined;
            disabled: string | undefined;
        };
    };
    dark: {
        surface: {
            sunken: string | undefined;
            default: string | undefined;
            raised: string | undefined;
            overlay: string | undefined;
            scrim: string | undefined;
            transparent: string | undefined;
        };
        interaction: {
            none: string | undefined;
            hover: string | undefined;
            press: string | undefined;
            hoverOnDark: string | undefined;
            pressOnDark: string | undefined;
            disabled: string | undefined;
        };
        stroke: {
            default: string | undefined;
            light: string | undefined;
            focus: string | undefined;
            disabled: string | undefined;
        };
        text: {
            primary: string | undefined;
            secondary: string | undefined;
            placeholder: string | undefined;
            disabled: string | undefined;
            link: string | undefined;
            linkHover: string | undefined;
            primaryInverted: string | undefined;
            secondaryInverted: string | undefined;
            placeholderInverted: string | undefined;
            disabledInverted: string | undefined;
            positive: string | undefined;
            negative: string | undefined;
            lockedWhite: string | undefined;
        };
        icon: {
            primary: string | undefined;
            secondary: string | undefined;
            disabled: string | undefined;
            primaryInverted: string | undefined;
            secondaryInverted: string | undefined;
            disabledInverted: string | undefined;
            positive: string | undefined;
            negative: string | undefined;
            lockedWhite: string | undefined;
            link: string | undefined;
            linkHover: string | undefined;
        };
        input: {
            default: string | undefined;
            disabled: string | undefined;
        };
    };
}

declare const neutralRamp: {
    light: {
        0: string;
        50: string | undefined;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        950: string | undefined;
        1000: string;
        1100: string | undefined;
    };
    dark: {
        0: string;
        50: string | undefined;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        950: string | undefined;
        1000: string;
        1100: string | undefined;
    };
};
declare const generateRamp: (color: ColorRange$1) => {
    light: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
    dark: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
};
declare const purpleRamp: {
    light: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
    dark: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
};
declare const redRamp: {
    light: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
    dark: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
};
declare const peachRamp: {
    light: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
    dark: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
};
declare const yellowRamp: {
    light: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
    dark: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
};
declare const blueRamp: {
    light: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
    dark: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
};
declare const greenRamp: {
    light: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
    dark: {
        0: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        1000: string;
    };
};

declare const neutral: ColorRange$1;
declare const darkNeutral: ColorRange$1;
declare const neutralAlpha: ColorRangeAlpha$1;
declare const darkNeutralAlpha: ColorRangeAlpha$1;
declare const purple: ColorRange$1;
declare const red: ColorRange$1;
declare const peach: ColorRange$1;
declare const yellow: ColorRange$1;
declare const blue: ColorRange$1;
declare const green: ColorRange$1;

type GenericSizeMap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
declare const breakpoints: {
    sm: number;
    md: number;
    lg: number;
    lgNav: number;
    xl: number;
    xxl: number;
};
declare const space: {
    0: number;
    25: number;
    50: number;
    100: number;
    150: number;
    200: number;
    300: number;
    350: number;
    400: number;
    500: number;
    600: number;
    800: number;
    1000: number;
    2000: number;
};
declare const base: number;
declare const margin: {
    none: number;
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
    xxl: number;
    xxxl: number;
};
declare const padding: {
    none: number;
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
};
declare const radius: {
    none: number;
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
    round: number;
};
declare const elevation: {
    raised: string;
    overlay: string;
};
declare const elevationFilter: {
    raised: string;
    overlay: string;
};
declare const boxShadow: {
    input: {
        focus: string;
    };
};
declare const easing: {
    default: string;
    input: string;
};

declare const semantic: SemanticColor;

declare const fonts: {
    Domaine: {
        name: string;
        default: {
            fileName: string;
            weight: FontWeight;
        };
        bold: {
            fileName: string;
            weight: FontWeight;
        };
    };
    FoundersGrotesk: {
        name: string;
        default: {
            fileName: string;
            weight: FontWeight;
        };
        bold: {
            fileName: string;
            weight: FontWeight;
        };
    };
    FontStack: {
        Serif: string;
        SansSerif: string;
    };
};

declare const iconSizeMap: Record<string, number>;
interface IconProps {
    color?: string;
    name: IconName;
    size?: number;
    sx?: SxProps<Theme>;
}
declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;

type IconName = 'brand-wordmark' | 'brand-logomark' | 'payment-card-visa' | 'payment-card-mastercard' | 'payment-card-amex' | 'menu' | 'menu-open' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'arrow-left' | 'arrow-right' | 'search' | 'close' | 'more-horizontal' | 'more-vertical' | 'home' | 'home-filled' | 'settings' | 'controls' | 'help' | 'filter-list' | 'open-in-new' | 'nav-toggle' | 'nav-collapse' | 'nav-expand' | 'expand-window' | 'reduce-window' | 'redo' | 'hand' | 'play-circle' | 'play-video' | 'email' | 'document' | 'folder' | 'attach-file' | 'save' | 'image' | 'image-add' | 'image-search' | 'image-no' | 'upload' | 'upload-cloud' | 'upload-cloud-filled' | 'time' | 'time-filled' | 'zoom-in' | 'zoom-out' | 'add' | 'remove' | 'dashboard' | 'list-view' | 'grid-view' | 'grid-view-filled' | 'grid-view-small' | 'grid-view-large' | 'eye' | 'eye-off' | 'notification' | 'pound' | 'euro' | 'dollar' | 'play' | 'pause' | 'stop' | 'shuffle' | 'replay' | 'volume-mute' | 'volume-high' | 'volume-low' | 'test' | 'test-pending' | 'test-edit' | 'data-bar' | 'send' | 'comment' | 'comment-filled' | 'chat' | 'microphone' | 'keyboard' | 'error' | 'warning' | 'lightbulb' | 'thumb-up' | 'info' | 'info-filled' | 'cancel' | 'compress' | 'expand' | 'unfold' | 'drag-handle' | 'focus' | 'drag-select' | 'lock' | 'copy' | 'edit' | 'delete' | 'check' | 'check-circle' | 'check-circle-filled' | 'alert-dot' | 'pin' | 'pin-filled' | 'link' | 'star' | 'star-half' | 'star-filled' | 'thumbs-up-down' | 'emoticon' | 'linear-scale' | 'check-double' | 'rank' | 'ai' | 'work' | 'gift' | 'social-medium-single-colour' | 'social-linkedin-single-colour' | 'social-youtube-single-colour' | 'social-linkedin-full-colour' | 'social-google-full-colour' | 'badge-tick' | 'badge-tick-in-circle' | 'badge-cross' | 'badge-cross-in-circle' | 'badge-hyphen' | 'badge-hyphen-in-circle' | 'badge-question' | 'badge-question-in-circle';

interface CustomTheme {
    palette: {
        black: string;
        white: string;
        neutral: ColorRange;
        neutralAlpha: ColorRangeAlpha;
        purple: ColorRange;
        red: ColorRange;
        peach: ColorRange;
        yellow: ColorRange;
        blue: ColorRange;
        green: ColorRange;
        icon: {
            primary: string;
            secondary: string;
            disabled: string;
            primaryInverted: string;
            secondaryInverted: string;
            disabledInverted: string;
            lockedWhite: string;
            link: string;
            linkHover: string;
        };
        interaction: {
            none: string;
            hover: string;
            press: string;
            hoverOnDark: string;
            pressOnDark: string;
            disabled: string;
        };
        stroke: {
            default: string;
            light: string;
            focus: string;
            disabled: string;
        };
        surface: {
            default: string;
            sunken: string;
            raised: string;
            overlay: string;
            scrim: string;
            transparent: string;
        };
        text: {
            primary: string;
            secondary: string;
            placeholder: string;
            disabled: string;
            link: string;
            linkHover: string;
            primaryInverted: string;
            secondaryInverted: string;
            placeholderInverted: string;
            disabledInverted: string;
            positive: string;
            negative: string;
            lockedWhite: string;
        };
        input: {
            default: string;
            disabled: string;
        };
        body: string;
    };
    margin: {
        none: number;
        xs: number;
        sm: number;
        md: number;
        lg: number;
        xl: number;
        xxl: number;
        xxxl: number;
    };
    padding: {
        none: number;
        xs: number;
        sm: number;
        md: number;
        lg: number;
        xl: number;
    };
    radius: {
        none: number;
        xs: number;
        sm: number;
        md: number;
        lg: number;
        xl: number;
        round: number;
    };
    elevation: {
        raised: string;
        overlay: string;
    };
    elevationFilter: {
        raised: string;
        overlay: string;
    };
    easing: {
        default: string;
        input: string;
    };
    boxShadow: {
        input: {
            focus: string;
            handle: string;
        };
    };
    shape: {
        borderRadius: number;
        hotspot: {
            active: number;
            default: number;
        };
    };
    typography: {
        headline: {
            xxs: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            xxl: string;
            xxxl: string;
        };
        body: {
            xxs: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            xxl: string;
            xxxl: string;
        };
    };
}

interface PlanHeading {
    heading: string;
    pricing: string;
}
interface PlanRow {
    heading: string;
    description: string;
    tier1: string;
    tier2: string;
    tier3: string;
    tier4: string;
}
interface PlanFeatureTableData {
    headings: {
        '01-tier1': PlanHeading;
        '02-tier2': PlanHeading;
        '03-tier3': PlanHeading;
        '04-tier4': PlanHeading;
    };
    rows: {
        '01-servicing': PlanRow;
        '02-respondents': PlanRow;
        '03-questions': PlanRow;
        '04-ai': PlanRow;
        '05-demographics': PlanRow;
        '06-training': PlanRow;
        '07-invite': PlanRow;
        '08-email': PlanRow;
        '09-beta': PlanRow;
        '10-sso': PlanRow;
        '11-minimum': PlanRow;
    };
}

interface PlanFeatureTableProps {
    currencySymbol: string;
    data?: PlanFeatureTableData;
    loading?: boolean;
    tier1MinimumTerm: string;
    tier1Price: number | string;
    tier1QuestionLimit: number | string;
    tier1RespondentPrice: number | string;
    tier2MinimumTerm: string;
    tier2Price: number | string;
    tier2QuestionLimit: number | string;
    tier2RespondentPrice: number | string;
    tier3MinimumTerm: string;
    tier3Price: number | string;
    tier3QuestionLimit: number | string;
    tier3RespondentPrice: number | string;
    tier4MinimumTerm: string;
    tier4Price: number | string;
    tier4QuestionLimit: number | string;
    tier4RespondentPrice: number | string;
    variation?: 'default' | 'platform';
}
declare const PlanFeatureTable: FunctionComponent<PlanFeatureTableProps>;

type Section = 'headerHeight' | 'bodyHeight' | 'respondentCardHeight' | 'bottomHeight';
interface PlanTierCardProps {
    amount: string;
    billingType?: string;
    body: string;
    ctaEvent?: (heading: string) => void;
    ctaLink?: string;
    ctaTarget?: string;
    ctaText: string;
    ctaVariation?: 'primary' | 'secondary' | 'outlined';
    currencySymbol: string;
    currentPlan?: boolean;
    features?: string[];
    heading: string;
    label?: string;
    loading?: boolean;
    perMonth: string;
    respondentsTitle?: string;
    respondentsFeatures?: string[];
    saving?: string;
    sectionHeights: Record<Section, number>;
    updateSectionHeight?: (section: Section, height: number) => void;
}
declare const PlanTierCard: FunctionComponent<PlanTierCardProps>;

interface TickGroupProps {
    heading: string;
    ticks: string[];
}
declare const TickGroup: FunctionComponent<TickGroupProps>;

declare const emailValidation: {
    pattern: {
        value: RegExp;
        message: string;
    };
};

declare const chooseArticle: (word: string) => string;
declare const defaultInputValidation: (inputName?: string, isRequired?: boolean, maxLength?: number) => {
    required?: string | undefined;
    maxLength: {
        value: number;
        message: string;
    };
};
declare const DEFAULT_MAX_INPUT_LENGTH: number;

declare const passwordValidation: (min?: number) => {
    minLength: {
        value: number;
        message: string;
    };
    equal: {
        value: string;
        message: string;
    };
};

declare const subtle: (theme: Theme) => {
    backgroundColor: string;
    fontWeight: number;
    '&:focus:before': {
        boxShadow: string;
    };
    '&:focus-visible': {
        boxShadow: string;
    };
};
declare const outlined$1: (theme: Theme) => {
    backgroundColor: string;
    border: string;
    '&:focus:before': {
        boxShadow: string;
    };
    '&:hover': {
        backgroundColor: string;
    };
    '&:focus-visible': {
        boxShadow: string;
    };
    '&:active': {
        backgroundColor: string;
    };
    '&:disabled': {
        border: string;
    };
};
declare const secondary: (theme: Theme) => {
    backgroundColor: ColorRange;
    '&:focus:before': {
        boxShadow: string;
    };
    '&:hover': {
        backgroundColor: ColorRange;
    };
    '&:focus-visible': {
        boxShadow: string;
    };
    '&:active': {
        backgroundColor: ColorRange;
    };
};
declare const primary: (theme: Theme) => {
    backgroundColor: ColorRange;
    color: string;
    '&:focus:before': {
        boxShadow: string;
    };
    '&:hover': {
        backgroundColor: ColorRange;
        color: string;
        '&::before': {
            backgroundColor: string;
        };
    };
    '&:focus-visible': {
        boxShadow: string;
        '&::before': {
            backgroundColor: string;
        };
    };
    '&:active': {
        backgroundColor: ColorRange;
        color: string;
        '&::before': {
            backgroundColor: string;
        };
    };
};
declare const buttonInteraction: (theme: Theme, active?: boolean) => {
    backgroundColor: string;
    fontWeight: number;
    '&:focus:before': {
        boxShadow: string;
    };
    '&:focus-visible': {
        boxShadow: string;
    };
    '&:hover': {
        backgroundColor: string;
    };
    '&:focus': {
        backgroundColor: string;
    };
    '&:active': {
        backgroundColor: string;
    };
    cursor: string;
    '&:disabled': {
        backgroundColor: string;
        color: string;
    };
};
type ButtonSizing = Exclude<GenericSizeMap, 'none'>;
declare const getIconSizing$1: (sizing: ButtonSizing) => CSSObject;
declare const getButtonTypography: (sizing: ButtonSizing) => CSSObject;
declare const getButtonSizing: (sizing: ButtonSizing) => CSSObject;

interface BackgroundOptions {
    texture?: 'none' | 'noise1';
    gradient?: 'tone1' | 'tone2' | 'tone3' | 'tone4';
}
declare const backgroundCreator: (theme: Theme, options: BackgroundOptions) => string;

type SupportedCurrency = 'gbp' | 'eur' | 'usd';
type SupportedFrequency = 'monthly' | 'annually';
interface AnnualControllerProps {
    body: string;
    currency: string;
    hideCurrency?: boolean;
    changeCurrencyEvent?: (value: string) => void;
    frequency: string;
    heading: string;
    setCurrency?: Dispatch<SetStateAction<SupportedCurrency>>;
    setFrequency?: Dispatch<SetStateAction<SupportedFrequency>>;
    togglePayAnnuallyEvent?: () => void;
    selections?: {
        value: SupportedCurrency;
        label: string;
    }[];
}
declare const AnnualController: FunctionComponent<AnnualControllerProps>;

interface AccordionProps {
    heading?: string;
    items?: {
        heading: string;
        body: ReactNode;
    }[];
}
declare const Accordion: FunctionComponent<AccordionProps>;

interface AuthFormHeaderProps {
    logo?: ReactElement | false | undefined;
    headerText?: string;
    subText?: ReactElement | string;
}
declare const AuthFormHeader: FunctionComponent<AuthFormHeaderProps>;

interface AvatarProps extends AvatarProps$1 {
    sizing?: 'xs' | 'sm' | 'lg';
}
declare const Avatar: FunctionComponent<AvatarProps>;

interface AvatarGroupProps extends AvatarGroupProps$1 {
    variation?: 'primary';
    max?: number;
    sx: SxProps<Theme>;
}
declare const AvatarGroup: FunctionComponent<AvatarGroupProps>;

interface BadgeProps extends PropsWithChildren {
}
declare const Badge: FunctionComponent<BadgeProps>;

interface BrandBadgeProps {
    color?: 'purple' | 'peach' | 'red' | 'default';
    name: 'emotion-meh' | 'emotion-good' | 'emotion-great' | 'understanding-unknown' | 'understanding-low' | 'understanding-good' | 'understanding-great' | 'property-secure' | 'property-private';
    size?: number;
    sx?: SxProps;
}
declare const BrandBadge: FunctionComponent<BrandBadgeProps>;

interface StyledLinkProps extends LinkProps$1 {
    disabled?: boolean | undefined;
}

interface LinkProps {
    children: React.ReactNode;
    href?: string;
    target?: string;
    onClick?: StyledLinkProps['onClick'];
    disabled?: boolean;
    sx?: SxProps<Theme>;
    underline?: 'none' | 'hover' | 'always' | undefined;
    noWrap?: boolean;
    component?: any;
    rel?: any;
    title?: string;
}
declare const Link: FunctionComponent<LinkProps>;

type BreadcrumbLink = {
    label: string;
} & ({
    href?: LinkProps['href'];
    onClick?: never;
} | {
    href?: never;
    onClick?: LinkProps['onClick'];
});
interface BreadcrumbProps {
    links?: BreadcrumbLink[];
}
declare const Breadcrumb: FunctionComponent<BreadcrumbProps>;

interface BulletGraphicProps {
    name: 'placeholder' | 'variant-test' | 'worldwide' | 'celebrate-collaborate' | 'ai' | 'many-media' | 'qual-and-quant' | 'alert' | 'comment';
    size?: number;
    sx?: SxProps;
}
declare const BulletGraphic: FunctionComponent<BulletGraphicProps>;

interface ButtonBaseProps extends ButtonProps$1 {
    loading?: boolean;
    sizing: ButtonSizing;
}
declare const ButtonBase: ({ children, loading, sizing, ...rest }: ButtonBaseProps) => react_jsx_runtime.JSX.Element;

interface ButtonProps extends Partial<ButtonBaseProps> {
    variation?: 'primary' | 'secondary' | 'outlined' | 'subtle';
    href?: string;
    fullWidth?: boolean;
    endIcon?: ReactElement;
    startIcon?: ReactElement;
}
declare const Button: FunctionComponent<ButtonProps>;

interface StyledCheckboxProps extends CheckboxProps$1 {
    sizing?: 'default' | 'lg';
}

interface CheckboxProps {
    sizing?: StyledCheckboxProps['sizing'];
    checked?: boolean;
    indeterminate?: StyledCheckboxProps['indeterminate'];
    checkboxLabel?: string | ReactElement;
    internalChange?: () => void;
    onChange?: (event: React.SyntheticEvent<Element, Event>, checked: boolean) => void;
    inputRef?: React.RefObject<HTMLInputElement>;
    defaultChecked?: boolean;
    disabled?: boolean;
    id?: string;
    required?: boolean;
    value?: boolean;
}
declare const Checkbox: FunctionComponent<CheckboxProps>;

interface CheckboxGroupOption {
    label: string;
    value: string;
    exclusive?: boolean;
}
interface CheckboxGroupOther {
    label?: string;
    enabled?: boolean;
    placeholder?: string;
    name?: string;
    defaultValue?: string;
}
interface CheckboxGroupProps {
    options: CheckboxGroupOption[];
    value: string[];
    sizing?: CheckboxProps['sizing'];
    onChange: (arrayIds: string[]) => void;
    id: string;
    inputRef?: any;
    other?: CheckboxGroupOther;
    internalChange?: () => void;
}
declare const CheckboxGroup: FunctionComponent<CheckboxGroupProps>;

interface ColorBackgroundContainerProps {
    sx?: SxProps<Theme>;
    children: ContainerProps['children'];
    texture?: 'none' | 'noise1';
    gradient?: 'tone1' | 'tone2' | 'tone3' | 'tone4';
}
declare const ColorBackgroundContainer: FunctionComponent<ColorBackgroundContainerProps>;

type CustomFieldProps = {
    inputField: react__default.FC<{
        onChange: (data: unknown) => void;
    }>;
    onChange?: (data: unknown) => void;
    defaultValue?: unknown;
    value?: unknown;
    placeholder?: string;
    transformValue?: (value?: unknown) => void;
    internalChange?: () => void;
};
declare const CustomField: FunctionComponent<CustomFieldProps>;

interface DifferentialProps {
    labelLeft: string;
    labelRight: string;
    labelCenter?: string;
    disabled?: boolean;
    value?: string;
    onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
    internalChange?: () => void;
}
declare const Differential: FunctionComponent<DifferentialProps>;

interface DropdownMenuItemProps {
    icon?: ReactElement;
    label: string;
    onClick: () => void;
    menuItemProps?: MenuItemProps$1;
}
interface DropdownMenuProps extends MenuProps$1 {
    open: boolean;
    anchorEl: HTMLElement | null;
    handleClose: () => void;
    handleClick?: (event: React.MouseEvent<HTMLElement>) => void;
    items?: DropdownMenuItemProps[];
}
declare const DropdownMenu: FunctionComponent<DropdownMenuProps>;

declare const useDropdownMenu: () => {
    open: boolean;
    handleClick: (event: react__default.MouseEvent<HTMLButtonElement>) => void;
    handleClose: () => void;
    anchorEl: HTMLElement | null;
};

interface TypographyProps extends Omit<TypographyProps$1, 'ref'> {
    clamp?: number;
    component: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
    type?: 'default' | 'button';
    variation?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
    weight?: 'default' | 'bold';
    sx?: SxProps<Theme>;
}
declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLHeadingElement | HTMLParagraphElement>>;

interface ExpandableTypographyClampProps extends Partial<TypographyProps> {
    onShowMoreClick?: ButtonProps['onClick'];
    slotProps?: {
        gradientBox?: {
            background?: string | ((theme: Theme) => string);
        } & BoxProps;
        showMoreButton?: ButtonProps;
    };
}
declare const ExpandableTypographyClamp: react__default.FC<ExpandableTypographyClampProps>;

interface FormControlLabelProps {
    control: FormControlLabelProps$1['control'];
    checked?: boolean;
    disabled?: boolean;
    label?: string | ReactElement;
    labelPlacement?: FormControlLabelProps$1['labelPlacement'];
    sx?: SxProps<Theme>;
    onChange?: FormControlLabelProps$1['onChange'];
    value?: unknown;
    required?: boolean;
    error?: boolean;
    name?: string;
    id?: string;
    inputRef?: FormControlLabelProps$1['inputRef'];
}
declare const FormControlLabel: FunctionComponent<FormControlLabelProps>;

/**
 * Form Generator Core Types
 */
interface FormGeneratorHandler {
    set: () => void;
    reset: () => void;
    submit: () => void;
    values: () => void;
    valid: () => void;
    errors: () => void;
    triggerFormValidation: () => Promise<unknown>;
}
type FormGeneratorProps = FunctionComponent<{
    ref?: any;
    formConfig: FormGeneratorConfig;
    onFormSubmit?: SubmitHandler<any>;
    onFormChange?: (formData: any) => void;
    submitButton?: ReactElement;
    secondaryButton?: ReactElement;
}>;
interface FormGeneratorConfig {
    fields: FieldTypes[];
    autoComplete?: 'off';
    mode?: 'onSubmit' | 'onBlur' | 'onChange';
    formId?: string;
    reValidateMode?: 'onSubmit' | 'onBlur' | 'onChange';
    validateOnInit?: boolean;
    styleOverrides?: {
        sxForm?: SxProps<Theme>;
        sxButtons?: SxProps<Theme>;
        sxStack?: SxProps<Theme>;
    };
}
/**
 * Field Types
 */
type FieldTypes = CheckboxType | CheckboxGroupType | SwitchType | TextareaType | SelectType | TextFieldType | SliderType | DifferentialType | RichTextFieldType | LikertType | RadioGroupType | DragAndDropRankingType | NumberFieldType | StarRatingType | HTMLType | CustomFieldType;
type TextFieldType = CreateFieldType<'textfield', TextFieldProps, string>;
type NumberFieldType = CreateFieldType<'numberfield', NumberFieldProps, number>;
type TextareaType = CreateFieldType<'textarea', TextareaProps, string>;
type SelectType = CreateFieldType<'select', SelectProps, SelectProps['value']>;
type CheckboxType = CreateFieldType<'checkbox', CheckboxProps, NonNullable<CheckboxProps['value']>>;
type CheckboxGroupType = CreateFieldType<'checkboxGroup', CheckboxGroupProps, string[]>;
type SwitchType = CreateFieldType<'switch', SwitchProps, NonNullable<SwitchProps['checked']>>;
type SliderType = CreateFieldType<'slider', SliderProps, NonNullable<SliderProps['value']>>;
type DifferentialType = CreateFieldType<'differential', DifferentialProps, NonNullable<DifferentialProps['value']>>;
type LikertType = CreateFieldType<'likert', LikertProps, LikertProps['value']>;
type RadioGroupType = CreateFieldType<'radioGroup', RadioGroupProps, RadioGroupProps['value']>;
type DragAndDropRankingType = CreateFieldType<'ranking', RankProps, NonNullable<RankProps['value']>>;
type RichTextFieldType = CreateFieldType<'richTextfield', RichTextFieldProps, RichTextFieldProps['value']>;
type StarRatingType = CreateFieldType<'starRating', StarRatingProps, NonNullable<StarRatingProps['value']>>;
type HTMLType = {
    fieldType: 'html';
    content: HtmlProps['children'];
    defaultValue?: never;
} & BaseField;
type CustomFieldType = {
    fieldType: 'customfield';
    defaultValue?: CustomFieldProps['value'];
} & BaseField & CustomFieldProps;
/**
 * Field Type Utilities
 */
interface BaseField {
    id?: string;
    name: string;
    ref?: any;
    multiline?: boolean;
    content?: ReactElement;
    label?: string;
    labelProps?: InputLabelProps;
    helperText?: string;
    hidden?: boolean;
    type?: string;
    helpTextProps?: InputLabelHelpProps;
    validation?: any;
    valueTransformer?: (valueToTransform: string) => string;
    disabled?: boolean;
    strengthIndicator?: boolean;
    styleOverrides?: {
        sxInputWrapper?: SxProps<Theme>;
        sxInputBase?: SxProps<Theme>;
        sxInputStack?: SxProps<Theme>;
    };
}
type CreateFieldType<TFieldType extends string, TProps, TDefaultValue extends any = void> = {
    fieldType: TFieldType;
} & BaseField & Omit<TProps, 'id' | 'name' | 'value' | 'defaultValue' | 'onChange'> & (TDefaultValue extends void ? unknown : {
    defaultValue?: TDefaultValue;
});
type FieldType = FieldTypes['fieldType'];

declare const FormGenerator: FormGeneratorProps;

interface GridOverlayProps {
    breakpoint?: Breakpoint;
    position?: 'fixed' | 'absolute';
}
declare const GridOverlay: FunctionComponent<GridOverlayProps>;

interface HtmlProps {
    children: ReactElement;
}
declare const Html: FunctionComponent<HtmlProps>;

type HtmlParserProps = {
    children: string;
    typographyProps?: Partial<TypographyProps>;
};
declare const HtmlParser: FC<HtmlParserProps>;

type IconButtonSizing = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type IconButtonShapeMap = 'default' | 'round';
type IconButtonVariation = 'default' | 'toggle' | 'outlined' | 'raised';

declare const defaultStyle: (theme: Theme) => CSSObject;
declare const toggle: (theme: Theme) => CSSObject;
declare const outlined: (theme: Theme) => CSSObject;
declare const raised: (theme: Theme) => CSSObject;
declare const getIconButtonRadius: (shape: IconButtonShapeMap, theme: Theme) => CSSObject;
declare const buttonSizeMap: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
};
declare const getIconButtonSizing: (sizing: IconButtonSizing) => CSSObject;
declare const IconSizeMap: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
};
declare const getIconSizing: (sizing: IconButtonSizing) => CSSObject;

declare const IconButton_variantHelpers_IconSizeMap: typeof IconSizeMap;
declare const IconButton_variantHelpers_buttonSizeMap: typeof buttonSizeMap;
declare const IconButton_variantHelpers_defaultStyle: typeof defaultStyle;
declare const IconButton_variantHelpers_getIconButtonRadius: typeof getIconButtonRadius;
declare const IconButton_variantHelpers_getIconButtonSizing: typeof getIconButtonSizing;
declare const IconButton_variantHelpers_getIconSizing: typeof getIconSizing;
declare const IconButton_variantHelpers_outlined: typeof outlined;
declare const IconButton_variantHelpers_raised: typeof raised;
declare const IconButton_variantHelpers_toggle: typeof toggle;
declare namespace IconButton_variantHelpers {
  export { IconButton_variantHelpers_IconSizeMap as IconSizeMap, IconButton_variantHelpers_buttonSizeMap as buttonSizeMap, IconButton_variantHelpers_defaultStyle as defaultStyle, IconButton_variantHelpers_getIconButtonRadius as getIconButtonRadius, IconButton_variantHelpers_getIconButtonSizing as getIconButtonSizing, IconButton_variantHelpers_getIconSizing as getIconSizing, IconButton_variantHelpers_outlined as outlined, IconButton_variantHelpers_raised as raised, IconButton_variantHelpers_toggle as toggle };
}

interface IconButtonBaseProps extends IconButtonProps$1 {
    variation?: IconButtonVariation;
    shape?: IconButtonShapeMap;
    sizing?: IconButtonSizing;
}
declare const IconButtonBase: ({ children, ...rest }: IconButtonBaseProps) => react_jsx_runtime.JSX.Element;

interface TooltipProps extends Omit<Partial<TooltipProps$1>, 'title' | 'slotProps'> {
    message: TooltipProps$1['title'];
    variation?: 'primary';
    slotProps?: TooltipProps$1['slotProps'] & {
        wrapper?: BoxProps;
    };
}
declare const Tooltip: FunctionComponent<TooltipProps>;

interface IconButtonProps extends IconButtonBaseProps {
    icon: ReactElement;
    loading?: boolean;
    tooltipMessage?: TooltipProps['message'];
    slotProps?: {
        tooltip?: Omit<TooltipProps, 'message'>;
    };
    emojiMode?: boolean;
}
declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;

interface IconButtonGroupProps {
    ButtonGroupProps?: ButtonGroupProps;
    variation?: Exclude<IconButtonVariation, 'outlined'>;
    orientation: ButtonGroupProps['orientation'];
    sizing?: IconButtonProps['sizing'];
    iconColor?: string;
    groupRaised?: boolean;
    className?: string;
    onClick?: (e: any) => void;
    onMouseDown?: (e: any) => void;
    sx?: SxProps<Theme>;
    children: ButtonGroupProps['children'] | any;
}
declare const IconButtonGroup: FunctionComponent<IconButtonGroupProps>;

interface ImageProps extends LazyLoadImageProps {
    containerSx?: SxProps<Theme>;
    src?: LazyLoadImageProps['src'];
    style?: LazyLoadImageProps['style'];
    loading?: LazyLoadImageProps['loading'];
}
declare const Image: FunctionComponent<ImageProps>;

type InputFieldBaseProps = TextFieldProps$1;
declare const InputFieldBase: _emotion_styled.StyledComponent<{
    variant?: _mui_material.TextFieldVariants | undefined;
} & Omit<_mui_material.FilledTextFieldProps | _mui_material.OutlinedTextFieldProps | _mui_material.StandardTextFieldProps, "variant"> & (_mui_system.MUIStyledCommonProps<_mui_material.Theme> & InputFieldBaseProps), {}, {}>;

type InputVariation = 'default' | 'help';

interface InputLabelProps {
    variation?: InputVariation;
    align?: 'left' | 'center' | 'right' | undefined;
    sx?: SxProps<Theme$1>;
    children?: ReactElement | string;
    disabled?: boolean;
    error?: boolean;
    required?: boolean;
}
declare const InputLabel: FunctionComponent<InputLabelProps>;

interface InputLabelHelpProps {
    state?: 'default' | 'positive' | 'negative' | 'disabled';
    showicon?: boolean;
    icon?: ReactNode;
    align?: 'left' | 'center' | 'right';
    children?: ReactNode;
    disabled?: boolean;
    required?: boolean;
}
declare const InputLabelHelp: FunctionComponent<InputLabelHelpProps>;

interface LikertOption {
    label: string;
    value: string;
}
interface LikertProps {
    options: LikertOption[];
    disabled?: boolean;
    onChange: (value: LikertOption['value']) => void;
    value: string;
    sizing?: 'default' | 'lg';
    internalChange?: () => void;
}
declare const Likert: FunctionComponent<LikertProps>;

interface LoaderProps {
}
declare const Loader: FunctionComponent<LoaderProps>;

declare const Logo: FunctionComponent<React.SVGProps<SVGSVGElement>>;

interface LoopsAiButtonProps {
    disabled?: boolean;
    onClick?: () => void;
}
declare const LoopsAiButton: FunctionComponent<LoopsAiButtonProps>;

type MarkdownProps = {
    typographyProps?: Partial<TypographyProps>;
    children?: string;
};
declare const Markdown: FC<MarkdownProps>;

type SurfaceVariation = 'default' | 'sunken' | 'raised' | 'overlay';
type BorderRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

interface SurfaceProps extends PaperProps {
    variation?: SurfaceVariation;
    borderradius?: BorderRadius;
}
declare const Surface: react.ForwardRefExoticComponent<Omit<SurfaceProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

type BindOn = 'trigger' | 'contextMenu' | 'toggle' | 'hover' | 'focus' | 'doubleClick';
interface PopperProps {
    popperProps?: Partial<PopperProps$1>;
    clickAwayListenerProps?: Partial<Omit<ClickAwayListenerProps, 'onClickAway'> & {
        onClickAway?: (event: MouseEvent | TouchEvent, state: PopupState) => void;
    }>;
    transitionFadeProps?: Pick<FadeProps, 'easing' | 'timeout' | 'appear' | 'enter' | 'exit'>;
    surfaceProps?: SurfaceProps;
    bindOn?: BindOn[];
    trigger: ReactElement;
    children: ReactElement;
    state?: PopupState;
}
declare const Popper: ({ bindOn, trigger, children, state, ...props }: PopperProps) => react_jsx_runtime.JSX.Element;

interface MenuItemProps {
    baseState?: PopupState;
    label?: string;
    active?: boolean;
    danger?: boolean;
    divider?: boolean;
    heading?: boolean;
    selected?: boolean;
    disabled?: boolean;
    closeOnClick?: boolean;
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
    children?: MenuItemProps[];
    width?: number;
}

interface MenuProps extends PropsWithChildren {
    menuItems?: MenuItemProps[];
    offset?: number[];
    placement?: PopperProps$1['placement'];
    state?: PopupState;
    parentState?: PopupState;
    bindOn?: PopperProps['bindOn'];
    trigger: ReactElement;
    width?: number;
    slotProps?: {
        popper?: PopperProps['popperProps'];
        surface?: SurfaceProps;
    };
}
declare const Menu: FunctionComponent<MenuProps>;

interface UserMenuProps extends PropsWithChildren {
    avatar?: string;
    email: string;
    menuItems?: MenuItemProps[];
    name: string;
    offset?: number[];
    placement?: PopperProps$1['placement'];
    rounded?: boolean;
    width?: number;
}
declare const UserMenu: FunctionComponent<UserMenuProps>;

type NavigationSizing = 'sm' | 'lg';
interface NavigationProps {
    isMobile?: boolean;
    logoLink?: () => void;
    nudgeProps?: NudgeProps$1;
    primaryMenuItemProps?: NavigationButtonProps[];
    secondaryMenuItemProps?: NavigationButtonProps[];
    sizing?: NavigationSizing;
    tertiaryMenuItemProps?: NavigationButtonProps[];
    toggleMenuOnClick?: () => void;
    userMenuProps: UserMenuProps;
}
interface NudgeProps$1 extends PropsWithChildren {
    description: string;
    notification: boolean;
    title: string;
}
declare const Navigation: FunctionComponent<NavigationProps>;

type NavigationButtonSizing = 'sm' | 'md' | 'lg';
interface NavigationButtonProps {
    active?: boolean;
    danger?: boolean;
    fullWidth?: boolean;
    href?: string;
    target?: '_blank' | '_self' | '_parent' | '_top';
    external?: boolean;
    icon?: IconName;
    label?: string;
    navigationSizing?: NavigationSizing;
    onClick?: () => void;
    sizing?: NavigationButtonSizing;
}
declare const NavigationButton: FunctionComponent<NavigationButtonProps>;

interface NudgeProps extends PropsWithChildren {
    description: string;
    notification?: boolean;
    title: string;
    navigationSizing: NavigationSizing;
}
declare const Nudge: FunctionComponent<NudgeProps>;

type NumberFieldProps = InputFieldBaseProps & {
    hideActionButtons?: boolean;
    max?: number;
    min?: number;
    startAdornment?: ReactElement | string;
    endAdornment?: ReactElement | string;
    numericFormatProps?: NumericFormatProps;
    onChange?: (value: number | null) => void;
    step?: number;
    internalChange?: () => void;
    value?: number | null;
};
declare const NumberField: FunctionComponent<NumberFieldProps>;

interface StyledChipProps extends ChipProps {
    variation?: 'default' | 'peach' | 'peachDark' | 'purple';
    weight?: 'heavy' | 'light';
}

interface PillProps extends Omit<StyledChipProps, 'size' | 'color' | 'label' | 'children'> {
    body: string;
}
declare const Pill: react.ForwardRefExoticComponent<Omit<PillProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

declare const PoweredByWatermarkLogo: () => react_jsx_runtime.JSX.Element;

type ProgressSizing = Exclude<GenericSizeMap, 'none'>;
interface ProgressProps {
    sizing?: ProgressSizing;
}
declare const Progress: FunctionComponent<ProgressProps>;

interface ProgressBarProps {
    variation: LinearProgressProps['variant'];
    value: LinearProgressProps['value'];
}
declare const ProgressBar: FunctionComponent<ProgressBarProps>;

interface RadioProps {
    sizing?: 'default' | 'lg';
    disabled?: boolean;
    name?: string;
    value?: unknown;
    autoFocus?: boolean;
    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void) | undefined;
    checked?: boolean;
    readOnly?: boolean;
    required?: boolean;
    'aria-label'?: string;
}
declare const Radio: FunctionComponent<RadioProps>;

interface RadioGroupOption {
    label: string;
    value: string;
}
interface RadioGroupOther {
    label?: string;
    enabled?: boolean;
    placeholder?: string;
    name?: string;
}
interface RadioGroupProps {
    options: RadioGroupOption[];
    children?: ReactNode;
    other?: RadioGroupOther;
    onChange: (value: string) => void;
    internalChange?: () => void;
    name: string;
    value: string;
}
declare const RadioGroup: FunctionComponent<RadioGroupProps>;

type SelectOption = {
    label: string;
    value: string;
};
type GroupSelectOption = SelectOption & {
    group: string;
};

type SelectOnChange = (event: SelectChangeEvent<any>, child: React.ReactNode) => void;
type AutocompleteOnChange = (value: string | string[]) => void;
type SelectProps = {
    selections: SelectOption[];
    autoComplete?: boolean;
    autoFocus?: boolean;
    disabled?: boolean;
    disablePortal?: boolean;
    error?: boolean;
    fullWidth?: boolean;
    grouped?: boolean;
    id?: string;
    inputRef?: SelectProps$1['inputRef'];
    internalChange?: () => void;
    MenuProps?: SelectProps$1['MenuProps'];
    multi?: boolean;
    name: string;
    onBlur?: SelectProps$1['onBlur'];
    onChange?: SelectOnChange | AutocompleteOnChange;
    placeholder?: string | undefined;
    readOnly?: boolean;
    ref?: SelectProps$1['ref'];
    required?: boolean;
    selectOptionProps?: MenuItemProps$1;
    sizing?: 'xs' | 'md' | 'lg';
    sx?: SelectProps$1['sx'];
    onOpen?: SelectProps$1['onOpen'];
    value?: SelectProps$1['value'];
    renderListItem?: (value: string, label: string) => ReactElement;
};
declare const Select: FunctionComponent<SelectProps>;

interface Option {
    label: string;
    value: string;
}

interface Props$1 {
    id: UniqueIdentifier;
    top?: JSX.Element;
    bottom?: JSX.Element;
}
declare function SortableItem({ children, top, bottom, id }: PropsWithChildren<Props$1>): react_jsx_runtime.JSX.Element;
declare function DragHandle(): react_jsx_runtime.JSX.Element;

interface BaseItem {
    id: UniqueIdentifier;
}
interface SortableListProps<T extends BaseItem> {
    items: T[];
    onChange(items: T[]): void;
    renderItem(item: T, isOverlay?: boolean, isDragActive?: boolean): ReactNode;
    disabled?: boolean;
    direction?: 'horizontal' | 'vertical';
}
declare function SortableList<T extends BaseItem>({ items, onChange, renderItem, disabled, direction }: SortableListProps<T>): react_jsx_runtime.JSX.Element | undefined;
declare namespace SortableList {
    var Item: typeof SortableItem;
    var DragHandle: typeof DragHandle;
}

interface RankProps extends Omit<SortableListProps<any>, 'renderItem' | 'items'> {
    labelTop: string;
    labelBottom: string;
    fullWidth?: boolean;
    options: (Option & {
        id: string;
    })[];
    internalChange?: () => void;
    value?: (Option & {
        id: string;
    })[];
}
declare const Rank: FunctionComponent<RankProps>;

type RichTextFieldProps = Omit<InputFieldBaseProps, 'value' | 'onChange'> & {
    onChange?: (content: string) => void;
    internalChange?: () => void;
    minHeight?: number;
    minWidth?: number;
    maxHeight?: number;
    value: string;
};
declare const RichTextField: FunctionComponent<RichTextFieldProps>;

interface SkeletonProps {
    animation?: SkeletonProps$1['animation'];
    children?: SkeletonProps$1['children'];
    height?: SkeletonProps$1['height'];
    sx?: SkeletonProps$1['sx'];
    variant?: SkeletonProps$1['variant'];
    width?: SkeletonProps$1['width'];
    component?: SkeletonProps$1['component'];
    ref?: SkeletonProps$1['ref'];
}
declare const Skeleton: FunctionComponent<SkeletonProps>;

interface Slide