@useloops/design-system 1.4.244 → 1.4.246

package/dist/index.d.ts

@@ -0,0 +1,2075 @@
+import * as _mui_material from '@mui/material';
+import { SxProps, Theme, PaperProps, PopperProps as PopperProps$1, CSSObject, AvatarGroupProps as AvatarGroupProps$1, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, FormControlLabelProps as FormControlLabelProps$1, Breakpoint, TypographyProps as TypographyProps$1, IconButtonProps as IconButtonProps$1, TooltipProps as TooltipProps$1, ButtonGroupProps, TextFieldProps as TextFieldProps$1, LinkProps as LinkProps$1, ClickAwayListenerProps, FadeProps, LinearProgressProps, SelectProps as SelectProps$1, SelectChangeEvent, SkeletonProps as SkeletonProps$1, SwitchProps as SwitchProps$1, PaletteMode, Direction } from '@mui/material';
+import * as react from 'react';
+import react__default, { FunctionComponent, PropsWithChildren, FC, ReactNode, Dispatch, SetStateAction, ReactElement, ChangeEvent } from 'react';
+import { PopupState } from 'material-ui-popup-state/hooks';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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';
+import { ChipProps } from '@mui/material/Chip';
+
+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;
+            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;
+            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;
+}
+declare const Icon: FunctionComponent<IconProps>;
+
+type IconName = 'brand-wordmark' | 'brand-logomark' | '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' | 'play-circle' | 'play-video' | 'email' | 'document' | 'folder' | 'attach-file' | 'save' | 'image-add' | 'image-search' | 'upload' | 'upload-cloud' | 'time' | 'time-filled' | 'zoom-in' | 'zoom-out' | 'add' | 'remove' | 'test' | 'dashboard' | 'list-view' | 'grid-view' | 'grid-view-filled' | 'eye' | 'eye-off' | 'notification' | 'pound' | 'euro' | 'dollar' | 'play' | 'pause' | 'stop' | 'shuffle' | 'send' | 'comment' | 'comment-filled' | 'chat' | 'microphone' | 'keyboard' | 'error' | 'warning' | 'lightbulb' | 'check-circle' | 'thumb-up' | 'info' | 'info-filled' | 'cancel' | 'compress' | 'expand' | 'unfold' | 'drag-handle' | 'focus' | 'drag-select' | 'lock' | 'copy' | 'edit' | 'delete' | 'check' | 'alert-dot' | '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;
+            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;
+        };
+    };
+    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;
+        };
+    };
+}
+
+type SurfaceVariation = 'default' | 'sunken' | 'raised' | 'overlay';
+type BorderRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+interface SurfaceProps extends PropsWithChildren {
+    variation?: SurfaceVariation;
+    borderradius?: BorderRadius;
+    sx?: SxProps<Theme>;
+    ref?: PaperProps['ref'];
+    component?: PaperProps['component'];
+}
+declare const Surface: FC<SurfaceProps>;
+
+interface AuthContainerSurfaceProps extends SurfaceProps {
+    headContent?: ReactNode;
+    sx?: SxProps<Theme>;
+    children: ReactNode;
+}
+declare const AuthContainerSurface: FunctionComponent<AuthContainerSurfaceProps>;
+
+interface BreadcrumbLink {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbProps {
+    links?: BreadcrumbLink[];
+}
+declare const Breadcrumb: FunctionComponent<BreadcrumbProps>;
+
+interface HeaderProps {
+    backHref?: string;
+    breadcrumbLinks?: BreadcrumbLink[];
+    buttons?: ReactNode;
+    controlBar?: ReactNode;
+    title?: string;
+}
+declare const Header: FunctionComponent<HeaderProps>;
+
+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 MenuItemProps {
+    active?: boolean;
+    children?: MenuItemProps[];
+    baseState?: PopupState;
+    closeOnClick?: boolean;
+    danger?: boolean;
+    divider?: boolean;
+    heading?: boolean;
+    label?: string;
+    onClick?: () => void;
+    selected?: boolean;
+    selectOne?: boolean;
+    width?: number;
+}
+
+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 OnboardingItem = {
+    complete: boolean;
+    title: string;
+    description?: string;
+    onClick?: () => void;
+};
+interface OnboardingCardProps {
+    cardTitle: string;
+    cardSubtitle: string;
+    welcomeImageUrl: string;
+    welcomeImageAltDescription?: string;
+    items: OnboardingItem[];
+}
+declare const OnboardingCard: FunctionComponent<OnboardingCardProps>;
+
+interface ProjectItemViewType {
+    viewType?: 'grid' | 'list';
+}
+interface UserProps {
+    id: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    country: string | null;
+    city: string | null;
+    profileImage: string | null;
+    jobTitle: string | null;
+    role: string | null;
+}
+interface ProjectItemDataProps {
+    id: string;
+    postId: string;
+    versionId: string;
+    thumbnail: string;
+    demoSurveyId: string;
+    title: string;
+    description: string | null;
+    demoProjectSummary?: string | null;
+    demoSurveySummary?: string | null;
+    name: string;
+    user: UserProps;
+    isAuthor: boolean;
+    isDemo: boolean;
+    loopCount: number | null;
+    testCount: number | null;
+    draftCount: number | null;
+    updatedAt?: string;
+    tags?: string[] | null;
+    onClick?: () => void;
+    loading?: boolean;
+    moreActions?: React.ReactNode;
+}
+interface ProjectItemProps extends ProjectItemDataProps, ProjectItemViewType {
+}
+interface ProjectItemEmptyProps {
+    onClick?: () => void;
+    viewType?: 'grid' | 'list';
+    title: string;
+}
+
+declare const ProjectItem: FunctionComponent<ProjectItemProps>;
+
+declare const ProjectItemEmpty: FunctionComponent<ProjectItemEmptyProps>;
+
+interface ProjectsProps {
+}
+declare const Projects: FunctionComponent<ProjectsProps>;
+
+interface SectionHeaderProps {
+    buttons?: ReactNode;
+    loading?: boolean;
+    subtitle?: string;
+    title?: string;
+}
+declare const SectionHeader: FunctionComponent<SectionHeaderProps>;
+
+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-visible': {
+        boxShadow: string;
+    };
+};
+declare const outlined$1: (theme: Theme) => {
+    backgroundColor: string;
+    border: string;
+    '&:hover': {
+        backgroundColor: string;
+    };
+    '&:focus-visible': {
+        boxShadow: string;
+    };
+    '&:active': {
+        backgroundColor: string;
+    };
+    '&:disabled': {
+        border: string;
+    };
+};
+declare const secondary: (theme: Theme) => {
+    backgroundColor: ColorRange;
+    '&:hover': {
+        backgroundColor: ColorRange;
+    };
+    '&:focus-visible': {
+        boxShadow: string;
+    };
+    '&:active': {
+        backgroundColor: ColorRange;
+    };
+};
+declare const primary: (theme: Theme) => {
+    backgroundColor: ColorRange;
+    color: 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-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' | 'annual';
+interface AnnualControllerProps {
+    body: string;
+    currency: string;
+    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 AuthFormHeaderProps {
+    logo?: ReactElement | false | undefined;
+    headerText?: string;
+    subText?: ReactElement | string;
+}
+declare const AuthFormHeader: FunctionComponent<AuthFormHeaderProps>;
+
+interface AvatarProps {
+    alt?: string;
+    children?: ReactElement;
+    className?: string;
+    sizing?: 'sm' | 'lg';
+    src?: string;
+}
+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 ButtonBaseProps extends ButtonProps$1 {
+    loading?: boolean;
+    sizing: any;
+}
+declare const ButtonBase: ({ children, loading, sizing, ...rest }: ButtonBaseProps) => react_jsx_runtime.JSX.Element;
+
+interface ButtonProps {
+    loading?: boolean;
+    variation?: 'primary' | 'secondary' | 'outlined' | 'subtle';
+    sizing?: ButtonSizing;
+    fullWidth?: boolean;
+    className?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    href?: string;
+    endIcon?: ReactElement;
+    startIcon?: ReactElement;
+    children: ButtonBaseProps['children'];
+    onClick?: ButtonBaseProps['onClick'];
+    onMouseDown?: ButtonBaseProps['onMouseDown'];
+    onMouseUp?: ButtonBaseProps['onMouseUp'];
+    type?: 'button' | 'submit' | 'reset';
+}
+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 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>;
+
+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: FunctionComponent<TypographyProps>;
+
+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 PropsWithChildren {
+    message: TooltipProps$1['title'];
+    variation?: 'primary';
+    placement?: TooltipProps$1['placement'];
+}
+declare const Tooltip: FunctionComponent<TooltipProps>;
+
+interface IconButtonProps extends IconButtonBaseProps {
+    icon: ReactElement;
+    loading?: boolean;
+    tooltipMessage?: TooltipProps['message'];
+    slotProps?: {
+        tooltip?: Omit<TooltipProps, 'message'>;
+    };
+}
+declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+interface IconButtonGroupProps extends PropsWithChildren {
+    ButtonGroupProps?: ButtonGroupProps;
+    variation?: 'default' | 'toggle';
+    orientation: ButtonGroupProps['orientation'];
+    sizing?: IconButtonProps['sizing'];
+    iconColor?: string;
+    groupRaised?: boolean;
+    className?: string;
+    onClick?: (e: any) => void;
+    onMouseDown?: (e: any) => void;
+    sx?: SxProps<Theme>;
+}
+declare const IconButtonGroup: FunctionComponent<IconButtonGroupProps>;
+
+interface ImageProps extends LazyLoadImageProps {
+}
+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 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>;
+
+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 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 MenuProps extends PropsWithChildren {
+    menuItems?: MenuItemProps[];
+    offset?: number[];
+    placement?: PopperProps$1['placement'];
+    state?: PopupState;
+    bindOn?: PopperProps['bindOn'];
+    trigger: ReactElement;
+    width?: number;
+}
+declare const Menu: FunctionComponent<MenuProps>;
+
+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: FunctionComponent<PillProps>;
+
+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'];
+    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 SliderProps {
+    labelLeft: string;
+    labelRight: string;
+    labelMiddle?: string;
+    min?: number;
+    max?: number;
+    labelRightProps?: InputLabelHelpProps;
+    labelLeftProps?: InputLabelHelpProps;
+    marks?: Mark[];
+    marksStep?: number;
+    internalChange?: () => void;
+    disabled?: boolean;
+    onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
+    step?: number;
+    value?: number | number[];
+}
+declare const Slider: FunctionComponent<SliderProps>;
+
+interface StarRatingProps {
+    disabled?: boolean;
+    readOnly?: boolean;
+    onChange?: (event: React.ChangeEvent<{}>, value: number | null) => void;
+    precision?: number;
+    name: string;
+    IconContainerComponent?: any;
+    value?: number | null;
+    internalChange?: () => void;
+}
+declare const StarRating: FunctionComponent<StarRatingProps>;
+
+interface StyledSwitchProps extends SwitchProps$1 {
+    sizing?: 'sm' | 'lg';
+}
+
+interface SwitchProps extends Omit<StyledSwitchProps, 'inputProps'> {
+    sizing?: 'sm' | 'lg';
+    value?: boolean;
+    label?: string | ReactElement;
+    labelPlacement?: Exclude<FormControlLabelProps['labelPlacement'], 'top' | 'bottom'>;
+    fullWidth?: boolean;
+    onChange?: (event: React.SyntheticEvent<Element, Event>, checked: boolean) => void;
+    internalChange?: () => void;
+}
+declare const Switch: FunctionComponent<SwitchProps>;
+
+type TextareaProps = InputFieldBaseProps & {
+    startAdornment?: ReactElement;
+    endAdornment?: ReactElement;
+    internalChange?: () => void;
+};
+declare const Textarea: FunctionComponent<TextareaProps>;
+
+interface TextBarDividerProps {
+    sx?: SxProps<Theme>;
+    typographyProps?: Partial<TypographyProps>;
+    text: string;
+}
+declare const TextBarDivider: FunctionComponent<TextBarDividerProps>;
+
+type TextFieldProps = InputFieldBaseProps & {
+    startAdornment?: ReactElement;
+    endAdornment?: ReactElement;
+    internalChange?: () => void;
+};
+declare const TextField: FunctionComponent<TextFieldProps>;
+
+type ToastStatus = 'neutral' | 'success' | 'warning' | 'danger' | 'discover';
+type ToastVariation = 'sm' | 'lg';
+interface ToastProps {
+    buttons?: ReactElement;
+    message: string | ReactElement;
+    status?: ToastStatus;
+    variation?: ToastVariation;
+}
+declare const Toast: FunctionComponent<ToastProps>;
+
+type TrialCardProps = {
+    promoHeadline: string;
+    promoDescription: string;
+    ctaText: string;
+    ctaFn: () => void;
+};
+declare const TrialCard: FunctionComponent<TrialCardProps>;
+
+interface VideoModalProps {
+    modalVisible: boolean;
+    showModal: (visible: boolean) => void;
+    video: string;
+}
+declare const VideoModal: FunctionComponent<VideoModalProps>;
+
+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 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 PlanHeading {
+    heading: string;
+    pricing: string;
+}
+interface PlanRow {
+    heading: string;
+    description: string;
+    starter: string;
+    team: string;
+    plus: string;
+    scale: string;
+}
+interface PlanFeatureTableData {
+    headings: {
+        '01-starter': PlanHeading;
+        '02-team': PlanHeading;
+        '03-plus': PlanHeading;
+        '04-scale': PlanHeading;
+    };
+    rows: {
+        '01-seats': PlanRow;
+        '02-servicing': PlanRow;
+        '03-respondents': PlanRow;
+        '04-questions': PlanRow;
+        '05-ai': PlanRow;
+        '06-demographics': PlanRow;
+        '07-training': PlanRow;
+        '08-invite': PlanRow;
+        '09-email': PlanRow;
+        '10-beta': PlanRow;
+        '11-sso': PlanRow;
+        '12-minimum': PlanRow;
+    };
+}
+
+interface PlanFeatureTableProps {
+    currencySymbol: string;
+    data: PlanFeatureTableData;
+    starterPrice: string;
+    starterRespondentPrice: string;
+    teamPrice: string;
+    teamRespondentPrice: string;
+    plusPrice: string;
+    plusRespondentPrice: string;
+    scalePrice: string;
+    scaleRespondentPrice: 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;
+    perMonth: string;
+    respondentsTitle?: string;
+    respondentsFeatures?: string[];
+    saving?: string;
+    sectionHeights: Record<Section, number>;
+    updateSectionHeight?: (section: Section, height: number) => void;
+}
+declare const PlanTierCard: FunctionComponent<PlanTierCardProps>;
+
+interface PlanTierCardScaleProps {
+    amount: string;
+    body: string;
+    ctaEvent?: (heading: string) => void;
+    ctaLink?: string;
+    ctaTarget?: string;
+    ctaText: string;
+    currencySymbol: string;
+    heading: string;
+    preText: string;
+    postText: string;
+}
+declare const PlanTierCardScale: FunctionComponent<PlanTierCardScaleProps>;
+
+interface TickGroupProps {
+    heading: string;
+    ticks: string[];
+}
+declare const TickGroup: FunctionComponent<TickGroupProps>;
+
+type BreakpointOrNull = Breakpoint | null;
+declare const useBreakpoint: () => Breakpoint;
+
+declare function compareArrayMembers(arr1: string[], arr2: string[]): boolean;
+
+declare const useScreenSize: () => {
+    width: number | undefined;
+    height: number | undefined;
+};
+
+declare const usePrevious: <TValue>(value: TValue) => TValue | undefined;
+
+type ScreenSize = 'sm' | 'lg';
+
+declare const customTheme: (mode: PaletteMode, size: ScreenSize, direction?: Direction) => Theme;
+
+interface ThemeCtx {
+    breakpoint: string;
+    gridOverlayVisible: boolean;
+    mode: PaletteMode;
+    theme: Theme;
+    toggleGridOverlay: () => void;
+    toggleMode: (mode?: PaletteMode) => void;
+}
+declare const ThemeContext: react.Context<Nullable<ThemeCtx>>;
+
+declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
+    breakpoint: "" | "sm" | "md" | "lg" | "xl";
+    gridOverlayVisible: boolean;
+    mode: PaletteMode;
+    theme: _mui_material.Theme;
+    toggleGridOverlay: () => void;
+    toggleMode: (mode?: PaletteMode) => void;
+};
+declare const useTheme: () => ThemeCtx;
+
+interface Props extends PropsWithChildren {
+    mode?: PaletteMode;
+    screenSize?: ScreenSize;
+    direction?: Direction;
+    ignoreCacheProvider?: boolean;
+}
+declare const ThemeProvider: FunctionComponent<Props>;
+
+declare module '@mui/material/styles' {
+    interface BreakpointOverrides {
+        xs: false;
+        sm: true;
+        md: true;
+        lg: true;
+        lgNav: true;
+        xl: true;
+        xxl: true;
+    }
+    interface TypographyVariants {
+        xxxl: React.CSSProperties;
+        xxl: React.CSSProperties;
+        xl: React.CSSProperties;
+        lg: React.CSSProperties;
+        md: React.CSSProperties;
+        sm: React.CSSProperties;
+        xs: React.CSSProperties;
+        xxs: React.CSSProperties;
+    }
+    interface TypographyVariantsOptions {
+        xxxl?: React.CSSProperties;
+        xxl?: React.CSSProperties;
+        xl?: React.CSSProperties;
+        lg?: React.CSSProperties;
+        md?: React.CSSProperties;
+        sm?: React.CSSProperties;
+        xs?: React.CSSProperties;
+        xxs?: React.CSSProperties;
+    }
+    interface ThemeOptions {
+        custom?: {
+            palette?: {
+                black?: string;
+                white?: string;
+                neutral?: ColorRange$1;
+                neutralAlpha?: ColorRangeAlpha$1;
+                purple?: ColorRange$1;
+                red?: ColorRange$1;
+                peach?: ColorRange$1;
+                yellow?: ColorRange$1;
+                blue?: ColorRange$1;
+                green?: ColorRange$1;
+                icon?: {
+                    primary?: string;
+                    secondary?: string;
+                    disabled?: string;
+                    primaryInverted?: string;
+                    secondaryInverted?: string;
+                    disabledInverted?: string;
+                };
+                interaction?: {
+                    none?: string;
+                    hover?: string;
+                    press?: string;
+                };
+                stroke?: {
+                    default?: string;
+                    focus?: string;
+                    disabled?: string;
+                };
+                surface?: {
+                    default?: string;
+                    sunken?: string;
+                    raised?: string;
+                    overlay?: string;
+                    scrim?: string;
+                };
+                text?: {
+                    primary?: string;
+                    secondary?: string;
+                    placeholder?: string;
+                    disabled?: string;
+                    primaryInverted?: string;
+                    secondaryInverted?: string;
+                    placeholderInverted?: string;
+                    disabledInverted?: string;
+                    success?: string;
+                    error?: string;
+                };
+                input?: {
+                    default?: string;
+                    disabled?: 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;
+            };
+            boxShadow?: {
+                input?: {
+                    focus?: string;
+                    handle?: string;
+                };
+            };
+            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 Theme {
+        custom: CustomTheme;
+        margin: {
+            0: number;
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            xxl: number;
+            xxxl: number;
+        };
+        padding: {
+            0: number;
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+        };
+        radius: {
+            0: number;
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            round: number;
+        };
+    }
+}
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        xxxl: true;
+        xxl: true;
+        xl: true;
+        lg: true;
+        md: true;
+        sm: true;
+        xs: true;
+        xxs: true;
+    }
+}
+declare module '@mui/system' {
+    interface Shape {
+        hotspot: {
+            active: number;
+            default: number;
+        };
+    }
+}
+
+export { AnnualController, type AnnualControllerProps, AuthContainerSurface, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BrandBadge, type BrandBadgeProps, Breadcrumb, type BreadcrumbProps, type BreakpointOrNull, BulletGraphic, type BulletGraphicProps, Button, ButtonBase, type ButtonBaseProps, type ButtonProps, type ButtonSizing, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ColorBackgroundContainer, type ColorBackgroundContainerProps, type ColorRange$1 as ColorRange, type ColorRangeAlpha$1 as ColorRangeAlpha, CustomField, type CustomFieldProps, DEFAULT_MAX_INPUT_LENGTH, Differential, type DifferentialProps, DropdownMenu, type FieldType, type FieldTypes, FontWeight, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, type GenericSizeMap, GridOverlay, type GridOverlayProps, type GroupSelectOption, Header, type HeaderProps, Html, HtmlParser, type HtmlParserProps, type HtmlProps, Icon, IconButton, IconButtonBase, type IconButtonBaseProps, IconButtonGroup, type IconButtonProps, type IconName, Image, type ImageProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, LoopsAiButton, type LoopsAiButtonProps, Markdown, type MarkdownProps, Menu, type MenuProps, Navigation, NavigationButton, type NavigationButtonProps, type NavigationProps, type NavigationSizing, Nudge, type NudgeProps, NumberField, type NumberFieldProps, OnboardingCard, type OnboardingCardProps, type OnboardingItem, Pill, type PillProps, PlanFeatureTable, type PlanFeatureTableData, type PlanFeatureTableProps, PlanTierCard, type PlanTierCardProps, PlanTierCardScale, type PlanTierCardScaleProps, Popper, type PopperProps, PoweredByWatermarkLogo, Progress, ProgressBar, type ProgressBarProps, type ProgressProps, ProjectItem, ProjectItemEmpty, type ProjectItemEmptyProps, type ProjectItemProps, Projects, type ProjectsProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, type Section, SectionHeader, type SectionHeaderProps, Select, type SelectOption, type SelectProps, type SemanticColor, Skeleton, type SkeletonProps, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeContext, type ThemeCtx, ThemeProvider, TickGroup, type TickGroupProps, Toast, type ToastProps, Tooltip, type TooltipProps, TrialCard, type TrialCardProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, VideoModal, type VideoModalProps, backgroundCreator, base, blue, blueRamp, boxShadow, breakpoints, buttonInteraction, chooseArticle, compareArrayMembers, customTheme, darkNeutral, darkNeutralAlpha, defaultInputValidation, easing, elevation, elevationFilter, emailValidation, fonts, generateRamp, getButtonSizing, getButtonTypography, getIconSizing$1 as getIconSizing, green, greenRamp, IconButton_variantHelpers as iconButtonHelpers, iconSizeMap, margin, neutral, neutralAlpha, neutralRamp, outlined$1 as outlined, padding, passwordValidation, peach, peachRamp, primary, purple, purpleRamp, radius, red, redRamp, secondary, semantic, space, subtle, useBreakpoint, useDropdownMenu, usePrevious, useScreenSize, useTheme, useThemeBuilder, yellow, yellowRamp };