import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
import { JSX } from '@emotion/react/jsx-runtime';
import * as RadixDialog from '@radix-ui/react-dialog';
import * as React$1 from 'react';
import React__default, { CSSProperties, SyntheticEvent, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
import * as _frigade_js from '@frigade/js';
import { Flow as Flow$1, FlowStep, PropertyPayload, StatefulFlow } from '@frigade/js';
export { _frigade_js as FrigadeJS };
import * as Collapsible$1 from '@radix-ui/react-collapsible';
import { UseFloatingOptions } from '@floating-ui/react';
import * as react from '@floating-ui/react';
export { react as FloatingUI };
import { UseFormReturn, ControllerFieldState, Message, ValidationRule } from 'react-hook-form';
import * as Popover from '@radix-ui/react-popover';

type DeepPartial<T> = {
    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

declare const colorScaleDegrees: readonly ["100", "200", "300", "400", "500", "600", "700", "800", "900"];
type ColorScaleDegrees = (typeof colorScaleDegrees)[number];

interface SemanticColorUsage {
    background: string;
    border: string;
    foreground: string;
    surface: string;
}
type SemanticColorScale = {
    [Degree in ColorScaleDegrees]: string;
};
type SemanticColorState = 'active' | 'focus' | 'hover';
type SemanticColor = SemanticColorScale & SemanticColorUsage & {
    [State in SemanticColorState]: {
        [Usage in keyof SemanticColorUsage]: string;
    };
};

declare const tokens: {
    radii: {
        md: string;
        lg: string;
        round: string;
    };
    shadows: {
        md: string;
    };
    space: {
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    };
    fontFamilies: {
        default: string;
    };
    fontSizes: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
        '3xl': string;
        '4xl': string;
        '5xl': string;
    };
    fontWeights: {
        thin: string;
        extralight: string;
        light: string;
        regular: string;
        medium: string;
        demibold: string;
        bold: string;
        extrabold: string;
        black: string;
    };
    letterSpacings: {
        md: string;
    };
    lineHeights: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
        '3xl': string;
        '4xl': string;
    };
    colors: {
        negative: SemanticColor;
        neutral: SemanticColor;
        positive: SemanticColor;
        primary: SemanticColor;
        secondary: SemanticColor;
        gray100: string;
        gray200: string;
        gray300: string;
        gray400: string;
        gray500: string;
        gray600: string;
        gray700: string;
        gray800: string;
        gray900: string;
        blue400: string;
        blue500: string;
        blue800: string;
        blue900: string;
        green400: string;
        green500: string;
        green800: string;
        red500: string;
        transparent: string;
        inherit: string;
        blue: {
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        gray: {
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        green: {
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        red: {
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        yellow: {
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        black: string;
        white: string;
    };
    borderWidths: {
        md: string;
    };
};
type Tokens = typeof tokens;

type Theme = DeepPartial<Tokens>;
declare const themeVariables: {};
declare const theme: DeepPartial<{
    radii: {
        md: string;
        lg: string;
        round: string;
    };
    shadows: {
        md: string;
    };
    space: {
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    };
    fontFamilies: {
        default: string;
    };
    fontSizes: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
        '3xl': string;
        '4xl': string;
        '5xl': string;
    };
    fontWeights: {
        thin: string;
        extralight: string;
        light: string;
        regular: string;
        medium: string;
        demibold: string;
        bold: string;
        extrabold: string;
        black: string;
    };
    letterSpacings: {
        md: string;
    };
    lineHeights: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
        '3xl': string;
        '4xl': string;
    };
    colors: {
        negative: SemanticColor;
        neutral: SemanticColor;
        positive: SemanticColor;
        primary: SemanticColor;
        secondary: SemanticColor;
        gray100: string;
        gray200: string;
        gray300: string;
        gray400: string;
        gray500: string;
        gray600: string;
        gray700: string;
        gray800: string;
        gray900: string;
        blue400: string;
        blue500: string;
        blue800: string;
        blue900: string;
        green400: string;
        green500: string;
        green800: string;
        red500: string;
        transparent: string;
        inherit: string;
        blue: {
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        gray: {
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        green: {
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        red: {
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        yellow: {
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
        };
        black: string;
        white: string;
    };
    borderWidths: {
        md: string;
    };
}>;

type PathsToStringProps<T> = T extends string ? [] : {
    [K in Extract<keyof T, string>]: [K, ...PathsToStringProps<T[K]>];
}[Extract<keyof T, string>];
type Join<T extends string[], D extends string> = T extends [] ? never : T extends [infer F] ? F : T extends [infer F, ...infer R] ? F extends string ? `${F}${D}${Join<Extract<R, string[]>, D>}` : never : string;
type ColorName = Join<PathsToStringProps<typeof theme.colors>, '.'>;
declare const themedStyleProps: {
    readonly color: Record<ColorName, string>;
    readonly backgroundColor: Record<ColorName, string>;
    readonly borderColor: Record<ColorName, string>;
    readonly border: {
        readonly inherit: string;
        readonly white: string;
        readonly black: string;
        readonly gray100: string;
        readonly gray200: string;
        readonly gray300: string;
        readonly gray400: string;
        readonly gray500: string;
        readonly gray600: string;
        readonly gray700: string;
        readonly gray800: string;
        readonly gray900: string;
        readonly blue400: string;
        readonly blue500: string;
        readonly blue800: string;
        readonly blue900: string;
        readonly green400: string;
        readonly green500: string;
        readonly green800: string;
        readonly red500: string;
        readonly transparent: string;
        readonly "blue.100": string;
        readonly "blue.200": string;
        readonly "blue.300": string;
        readonly "blue.400": string;
        readonly "blue.500": string;
        readonly "blue.600": string;
        readonly "blue.700": string;
        readonly "blue.800": string;
        readonly "blue.900": string;
        readonly "gray.100": string;
        readonly "gray.200": string;
        readonly "gray.300": string;
        readonly "gray.400": string;
        readonly "gray.500": string;
        readonly "gray.600": string;
        readonly "gray.700": string;
        readonly "gray.800": string;
        readonly "gray.900": string;
        readonly "green.100": string;
        readonly "green.200": string;
        readonly "green.300": string;
        readonly "green.400": string;
        readonly "green.500": string;
        readonly "green.600": string;
        readonly "green.700": string;
        readonly "green.800": string;
        readonly "green.900": string;
        readonly "red.100": string;
        readonly "red.200": string;
        readonly "red.300": string;
        readonly "red.400": string;
        readonly "red.500": string;
        readonly "red.600": string;
        readonly "red.700": string;
        readonly "red.800": string;
        readonly "red.900": string;
        readonly "yellow.100": string;
        readonly "yellow.200": string;
        readonly "yellow.300": string;
        readonly "yellow.400": string;
        readonly "yellow.500": string;
        readonly "yellow.600": string;
        readonly "yellow.700": string;
        readonly "yellow.800": string;
        readonly "yellow.900": string;
        readonly "negative.100": string;
        readonly "negative.200": string;
        readonly "negative.300": string;
        readonly "negative.400": string;
        readonly "negative.500": string;
        readonly "negative.600": string;
        readonly "negative.700": string;
        readonly "negative.800": string;
        readonly "negative.900": string;
        readonly "negative.background": string;
        readonly "negative.border": string;
        readonly "negative.foreground": string;
        readonly "negative.surface": string;
        readonly "negative.active.background": string;
        readonly "negative.active.border": string;
        readonly "negative.active.foreground": string;
        readonly "negative.active.surface": string;
        readonly "negative.focus.background": string;
        readonly "negative.focus.border": string;
        readonly "negative.focus.foreground": string;
        readonly "negative.focus.surface": string;
        readonly "negative.hover.background": string;
        readonly "negative.hover.border": string;
        readonly "negative.hover.foreground": string;
        readonly "negative.hover.surface": string;
        readonly "neutral.100": string;
        readonly "neutral.200": string;
        readonly "neutral.300": string;
        readonly "neutral.400": string;
        readonly "neutral.500": string;
        readonly "neutral.600": string;
        readonly "neutral.700": string;
        readonly "neutral.800": string;
        readonly "neutral.900": string;
        readonly "neutral.background": string;
        readonly "neutral.border": string;
        readonly "neutral.foreground": string;
        readonly "neutral.surface": string;
        readonly "neutral.active.background": string;
        readonly "neutral.active.border": string;
        readonly "neutral.active.foreground": string;
        readonly "neutral.active.surface": string;
        readonly "neutral.focus.background": string;
        readonly "neutral.focus.border": string;
        readonly "neutral.focus.foreground": string;
        readonly "neutral.focus.surface": string;
        readonly "neutral.hover.background": string;
        readonly "neutral.hover.border": string;
        readonly "neutral.hover.foreground": string;
        readonly "neutral.hover.surface": string;
        readonly "positive.100": string;
        readonly "positive.200": string;
        readonly "positive.300": string;
        readonly "positive.400": string;
        readonly "positive.500": string;
        readonly "positive.600": string;
        readonly "positive.700": string;
        readonly "positive.800": string;
        readonly "positive.900": string;
        readonly "positive.background": string;
        readonly "positive.border": string;
        readonly "positive.foreground": string;
        readonly "positive.surface": string;
        readonly "positive.active.background": string;
        readonly "positive.active.border": string;
        readonly "positive.active.foreground": string;
        readonly "positive.active.surface": string;
        readonly "positive.focus.background": string;
        readonly "positive.focus.border": string;
        readonly "positive.focus.foreground": string;
        readonly "positive.focus.surface": string;
        readonly "positive.hover.background": string;
        readonly "positive.hover.border": string;
        readonly "positive.hover.foreground": string;
        readonly "positive.hover.surface": string;
        readonly "primary.100": string;
        readonly "primary.200": string;
        readonly "primary.300": string;
        readonly "primary.400": string;
        readonly "primary.500": string;
        readonly "primary.600": string;
        readonly "primary.700": string;
        readonly "primary.800": string;
        readonly "primary.900": string;
        readonly "primary.background": string;
        readonly "primary.border": string;
        readonly "primary.foreground": string;
        readonly "primary.surface": string;
        readonly "primary.active.background": string;
        readonly "primary.active.border": string;
        readonly "primary.active.foreground": string;
        readonly "primary.active.surface": string;
        readonly "primary.focus.background": string;
        readonly "primary.focus.border": string;
        readonly "primary.focus.foreground": string;
        readonly "primary.focus.surface": string;
        readonly "primary.hover.background": string;
        readonly "primary.hover.border": string;
        readonly "primary.hover.foreground": string;
        readonly "primary.hover.surface": string;
        readonly "secondary.100": string;
        readonly "secondary.200": string;
        readonly "secondary.300": string;
        readonly "secondary.400": string;
        readonly "secondary.500": string;
        readonly "secondary.600": string;
        readonly "secondary.700": string;
        readonly "secondary.800": string;
        readonly "secondary.900": string;
        readonly "secondary.background": string;
        readonly "secondary.border": string;
        readonly "secondary.foreground": string;
        readonly "secondary.surface": string;
        readonly "secondary.active.background": string;
        readonly "secondary.active.border": string;
        readonly "secondary.active.foreground": string;
        readonly "secondary.active.surface": string;
        readonly "secondary.focus.background": string;
        readonly "secondary.focus.border": string;
        readonly "secondary.focus.foreground": string;
        readonly "secondary.focus.surface": string;
        readonly "secondary.hover.background": string;
        readonly "secondary.hover.border": string;
        readonly "secondary.hover.foreground": string;
        readonly "secondary.hover.surface": string;
        readonly md?: string;
    };
    readonly borderRadius: DeepPartial<{
        md: string;
        lg: string;
        round: string;
    }>;
    readonly borderWidth: DeepPartial<{
        md: string;
    }>;
    readonly boxShadow: DeepPartial<{
        md: string;
    }>;
    readonly fontFamily: DeepPartial<{
        default: string;
    }>;
    readonly fontSize: DeepPartial<{
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
        '3xl': string;
        '4xl': string;
        '5xl': string;
    }>;
    readonly fontWeight: DeepPartial<{
        thin: string;
        extralight: string;
        light: string;
        regular: string;
        medium: string;
        demibold: string;
        bold: string;
        extrabold: string;
        black: string;
    }>;
    readonly gap: DeepPartial<{
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    }>;
    readonly lineHeight: DeepPartial<{
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
        '3xl': string;
        '4xl': string;
    }>;
    readonly margin: DeepPartial<{
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    }>;
    readonly marginBottom: DeepPartial<{
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    }>;
    readonly marginLeft: DeepPartial<{
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    }>;
    readonly marginRight: DeepPartial<{
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    }>;
    readonly marginTop: DeepPartial<{
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    }>;
    readonly padding: DeepPartial<{
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    }>;
    readonly paddingBottom: DeepPartial<{
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    }>;
    readonly paddingLeft: DeepPartial<{
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    }>;
    readonly paddingRight: DeepPartial<{
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    }>;
    readonly paddingTop: DeepPartial<{
        0: string;
        2: string;
        1: string;
        auto: string;
        5: string;
        10: string;
        20: string;
        4: string;
        9: string;
        [-20]: string;
        19: string;
        [-19]: string;
        18: string;
        [-18]: string;
        17: string;
        [-17]: string;
        16: string;
        [-16]: string;
        15: string;
        [-15]: string;
        14: string;
        [-14]: string;
        13: string;
        [-13]: string;
        12: string;
        [-12]: string;
        11: string;
        [-11]: string;
        [-10]: string;
        [-9]: string;
        8: string;
        [-8]: string;
        7: string;
        [-7]: string;
        6: string;
        [-6]: string;
        [-5]: string;
        [-4]: string;
        3: string;
        [-3]: string;
        [-2]: string;
        [-1]: string;
        0.5: string;
        [-0.5]: string;
    }>;
};
declare const stylePropShorthands: {
    readonly bg: readonly ["backgroundColor"];
    readonly m: readonly ["margin"];
    readonly mt: readonly ["marginTop"];
    readonly mr: readonly ["marginRight"];
    readonly mb: readonly ["marginBottom"];
    readonly ml: readonly ["marginLeft"];
    readonly mx: readonly ["marginLeft", "marginRight"];
    readonly my: readonly ["marginTop", "marginBottom"];
    readonly p: readonly ["padding"];
    readonly pt: readonly ["paddingTop"];
    readonly pr: readonly ["paddingRight"];
    readonly pb: readonly ["paddingBottom"];
    readonly pl: readonly ["paddingLeft"];
    readonly px: readonly ["paddingLeft", "paddingRight"];
    readonly py: readonly ["paddingTop", "paddingBottom"];
};
type ThemedStyleProps = {
    [K in keyof typeof themedStyleProps]: keyof (typeof themedStyleProps)[K];
};
type FilteredCSSProps = Omit<{
    [key in keyof CSSProperties]: CSSProperties[key];
}, `-${string}` | `Moz${string}` | `ms${string}` | `Webkit${string}` | `Khtml${string}` | `O${string}`>;
type ThemedStyleProp<K extends keyof ThemedStyleProps> = ThemedStyleProps[K] | (string & {});
type StylePropShorthands = {
    [K in keyof typeof stylePropShorthands]?: ThemedStyleProp<(typeof stylePropShorthands)[K][0]>;
};
interface StyleProps extends FilteredCSSProps, StylePropShorthands {
    backgroundColor?: ThemedStyleProp<'backgroundColor'>;
    border?: ThemedStyleProp<'border'>;
    borderColor?: ThemedStyleProp<'borderColor'>;
    borderRadius?: ThemedStyleProp<'borderRadius'>;
    borderWidth?: ThemedStyleProp<'borderWidth'>;
    boxShadow?: ThemedStyleProp<'boxShadow'>;
    color?: ThemedStyleProp<'color'>;
    fontFamily?: ThemedStyleProp<'fontFamily'>;
    fontSize?: ThemedStyleProp<'fontSize'>;
    fontWeight?: ThemedStyleProp<'fontWeight'>;
    gap?: ThemedStyleProp<'gap'>;
    lineHeight?: ThemedStyleProp<'lineHeight'>;
    margin?: ThemedStyleProp<'margin'>;
    marginBottom?: ThemedStyleProp<'marginBottom'>;
    marginLeft?: ThemedStyleProp<'marginLeft'>;
    marginRight?: ThemedStyleProp<'marginRight'>;
    marginTop?: ThemedStyleProp<'marginTop'>;
    padding?: ThemedStyleProp<'padding'>;
    paddingBottom?: ThemedStyleProp<'paddingBottom'>;
    paddingLeft?: ThemedStyleProp<'paddingLeft'>;
    paddingRight?: ThemedStyleProp<'paddingRight'>;
    paddingTop?: ThemedStyleProp<'paddingTop'>;
}

type Part = string | Part[];
type BoxProps<T extends React$1.ElementType = React$1.ElementType> = {
    as?: T;
    part?: Part;
} & StyleProps & React$1.ComponentPropsWithoutRef<T>;
declare const Box: <T extends React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements> = React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>(props: BoxProps<T>) => React$1.ReactElement;

type ButtonVariant = 'Primary' | 'Secondary' | 'Link' | 'Plain';
interface ButtonProps extends BoxProps {
    title?: string;
    variant?: ButtonVariant;
    loading?: boolean;
}
declare function Primary({ children, ...props }: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
declare function Secondary({ children, ...props }: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
declare function Link({ children, ...props }: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
declare function Plain({ children, ...props }: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;

type Button_ButtonProps = ButtonProps;
type Button_ButtonVariant = ButtonVariant;
declare const Button_Link: typeof Link;
declare const Button_Plain: typeof Plain;
declare const Button_Primary: typeof Primary;
declare const Button_Secondary: typeof Secondary;
declare namespace Button {
  export {
    Button_ButtonProps as ButtonProps,
    Button_ButtonVariant as ButtonVariant,
    Button_Link as Link,
    Button_Plain as Plain,
    Button_Primary as Primary,
    Button_Secondary as Secondary,
  };
}

interface ImageProps extends BoxProps {
    src: string;
}
declare function Image({ part, src, ...props }: ImageProps): _emotion_react_jsx_runtime.JSX.Element;

declare const VIDEO_PROP_NAMES: readonly ["autoPlay", "controls", "controlsList", "crossOrigin", "disablePictureInPicture", "disableRemotePlayback", "loop", "muted", "playsInline", "poster", "preload", "src"];
type VideoPropName = (typeof VIDEO_PROP_NAMES)[number];

interface VideoProps extends BoxProps, Pick<React$1.VideoHTMLAttributes<HTMLVideoElement>, VideoPropName> {
}
declare function Video({ autoPlay, controls, controlsList, crossOrigin, disablePictureInPicture, disableRemotePlayback, loop, muted, playsInline, poster, preload, part, src, ...props }: VideoProps): _emotion_react_jsx_runtime.JSX.Element;

interface MediaProps extends VideoProps {
    type?: 'image' | 'video';
}
declare function Media({ src, type, ...props }: MediaProps): _emotion_react_jsx_runtime.JSX.Element;

interface TextProps extends BoxProps {
}
declare const Display1: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>>;
declare const Display2: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>>;
declare const H1: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>>;
declare const H2: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>>;
declare const H3: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>>;
declare const H4: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>>;
declare const Body1: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>>;
declare const Body2: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>>;
declare const Caption: React$1.ForwardRefExoticComponent<BoxProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>>;

declare const Text_Body1: typeof Body1;
declare const Text_Body2: typeof Body2;
declare const Text_Caption: typeof Caption;
declare const Text_Display1: typeof Display1;
declare const Text_Display2: typeof Display2;
declare const Text_H1: typeof H1;
declare const Text_H2: typeof H2;
declare const Text_H3: typeof H3;
declare const Text_H4: typeof H4;
type Text_TextProps = TextProps;
declare namespace Text {
  export {
    Text_Body1 as Body1,
    Text_Body2 as Body2,
    Text_Caption as Caption,
    Text_Display1 as Display1,
    Text_Display2 as Display2,
    Text_H1 as H1,
    Text_H2 as H2,
    Text_H3 as H3,
    Text_H4 as H4,
    Text_TextProps as TextProps,
  };
}

/**
 * A function that handles a Flow event.
 * If the function returns a promise that evaluates to `false`, the Flow's state will not be updated for the current user (e.g. a Flow will not be marked as completed or dismissed).
 */
type FlowHandlerProp = (
/**
 * The Flow that the handler is being called on
 */
flow: Flow$1, 
/**
 * The event that triggered the handler
 */
event?: MouseEvent | KeyboardEvent) => Promise<boolean | void> | (boolean | void);
interface FlowHandlerProps {
    onComplete?: FlowHandlerProp;
    onDismiss?: FlowHandlerProp;
}
type DismissHandler = (e: MouseEvent | KeyboardEvent) => Promise<boolean | void>;
declare function useFlowHandlers(flow: Flow$1, { onComplete, onDismiss }?: FlowHandlerProps): {
    handleDismiss: DismissHandler;
};

type StepHandlerProp = (step: FlowStep, event?: SyntheticEvent<object, unknown>, properties?: PropertyPayload) => Promise<boolean | void> | (boolean | void);
interface StepHandlerProps {
    onPrimary?: StepHandlerProp;
    onSecondary?: StepHandlerProp;
}
type StepHandler = (
/**
 * The native event that triggered this handler.
 */
event: SyntheticEvent<object, unknown>, 
/**
 * Additional properties to pass to the step.
 */
properties?: PropertyPayload, 
/**
 * If true, the step will be marked as completed without waiting for the API and validation of any targeting rules.
 * @default true
 */
optimistic?: boolean) => Promise<boolean>;
interface ButtonLinkProps {
    as?: 'a';
    href?: string;
    target?: string;
    rel?: string;
}
declare function useStepHandlers(step: FlowStep, { onPrimary, onSecondary }?: StepHandlerProps): {
    handlePrimary: StepHandler;
    handleSecondary: StepHandler;
    primaryButtonProps: {
        as?: "a";
        href?: string;
        target?: string;
        rel?: string;
        onClick: StepHandler;
    };
    secondaryButtonProps: {
        as?: "a";
        href?: string;
        target?: string;
        rel?: string;
        onClick: StepHandler;
    };
};

interface BoxPropsWithoutChildren extends Omit<BoxProps, 'children'> {
}
interface FlowPropsWithoutChildren extends BoxPropsWithoutChildren {
    /**
     * Whether to automatically mark the Flow started (i.e. in progress) when the Flow is eligible to be shown.
     * You will need to call `flow.start()` or `step.start()` from the parent component if you set this to `false`. Most components should not need to override this behavior.
     *
     * Defaults to `true`.
     */
    autoStart?: boolean;
    /**
     * Optional component to wrap the child components in, e.g. `as={Dialog}` will render the Flow in a modal Dialog. Defaults to `Box`.
     */
    as?: React$1.ElementType;
    /**
     * Emotion CSS prop to apply to the component. See [Theming documentation](https://docs.frigade.com/v2/sdk/styling/css-overrides) for more information.
     *
     * Example usage:
     * ```
     * <Frigade.Checklist css={{ backgroundColor: "pink", ".fr-button-primary": { backgroundColor: "fuchsia" } }} />
     * ```
     */
    css?: React$1.Attributes['css'];
    /**
     * Whether the Flow is dismissible or not
     *
     */
    dismissible?: boolean;
    /**
     * The Flow ID to render. You can find the Flow ID in the Frigade dashboard.
     */
    flowId: string;
    /**
     * If true, the Flow will be mounted even if it has already been completed or dismissed.
     * However, if the user does not match the Flow's targeting, the Flow will not be mounted.
     */
    forceMount?: boolean;
    /**
     * Register the Flow as a modal to prevent popup collisions (only one modal Flow will render at a time).
     */
    modal?: boolean;
    /**
     * Handler for when the Flow is completed. This is event is fired immediately after the user completes the Flow.
     */
    onComplete?: FlowHandlerProp;
    /**
     * Handler for when the Flow is dismissed (skipped). This is event is fired immediately after the user dismisses the Flow.
     */
    onDismiss?: FlowHandlerProp;
    /**
     * Handler for when primary button is clicked.
     * If this function returns false or a promise that resolves to `false`, the step will not be automatically completed when clicked.
     */
    onPrimary?: StepHandlerProp;
    /**
     * Handler for when secondary button is clicked.
     * If this function returns false or a promise that resolves to `false`, the step will not be automatically completed when clicked.
     */
    onSecondary?: StepHandlerProp;
    /**
     * Variables to pass to the Flow. You can use variables in the Flow configuration to customize copy.
     * For instance, you can use `title: Hello, ${name}!` in the Flow configuration and pass `variables={{name: 'John'}}` to customize the copy.
     */
    variables?: Record<string, unknown>;
}
interface FlowProps extends FlowPropsWithoutChildren {
    /**
     * Flow accepts a render function as its only child, whose props are described in FlowChildrenProps
     */
    children?: (props: FlowChildrenProps) => ReactNode;
}
type ParentProps = {
    as: FlowPropsWithoutChildren['as'];
    containerProps: Record<string, unknown>;
    dismissible: boolean;
    flowId: string;
    variables: Record<string, unknown>;
};
interface FlowChildrenProps {
    flow: Flow$1;
    handleDismiss: DismissHandler;
    handlePrimary: StepHandler;
    handleSecondary: StepHandler;
    /**
     * Props to spread on the primary button component. When the step exposes a
     * URI and the consumer hasn't overridden `navigate`, these include
     * `as="a" href target rel` so the rendered element is a native anchor —
     * native anchor clicks are not subject to mobile popup blocking.
     */
    primaryButtonProps: {
        onClick: StepHandler;
    } & ButtonLinkProps;
    /**
     * Props to spread on the secondary button component. See `primaryButtonProps`.
     */
    secondaryButtonProps: {
        onClick: StepHandler;
    } & ButtonLinkProps;
    parentProps: ParentProps;
    step: FlowStep;
}

interface DialogContentProps extends Pick<RadixDialog.DialogContentProps, 'onOpenAutoFocus' | 'onCloseAutoFocus' | 'onEscapeKeyDown' | 'onPointerDownOutside' | 'onInteractOutside'> {
}
interface DialogRootProps extends RadixDialog.DialogProps {
}
interface DialogProps extends BoxPropsWithoutChildren, DialogRootProps, DialogContentProps {
    /**
     * The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
     */
    modal?: boolean;
}
declare function Dialog({ children, className, modal, ...props }: DialogProps): _emotion_react_jsx_runtime.JSX.Element;
declare namespace Dialog {
    var Dismiss: (props: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
    var Subtitle: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
    var Media: ({ src, ...props }: MediaProps) => _emotion_react_jsx_runtime.JSX.Element;
    var Primary: ({ onClick, title, ...props }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
    var ProgressDots: ({ current, total }: {
        current: number;
        total: number;
    }) => _emotion_react_jsx_runtime.JSX.Element;
    var Secondary: ({ onClick, title, ...props }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
    var Title: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
    var displayName: string;
}

declare function Flow({ as, autoStart, children, flowId, onComplete, onDismiss, onPrimary, onSecondary, variables, ...props }: FlowProps): _emotion_react_jsx_runtime.JSX.Element;

interface AnnouncementProps extends FlowPropsWithoutChildren, DialogProps {
    /**
     * @ignore
     */
    children?: React.ReactNode;
    /**
     * @ignore
     */
    open?: boolean;
    /**
     * @ignore
     */
    defaultOpen?: boolean;
}
declare function Announcement({ flowId, ...props }: AnnouncementProps): _emotion_react_jsx_runtime.JSX.Element;

interface BannerProps extends FlowPropsWithoutChildren {
}
declare function Banner({ flowId, ...props }: BannerProps): _emotion_react_jsx_runtime.JSX.Element;

interface CardHeaderProps extends BoxProps {
    dismissible?: boolean;
    handleDismiss?: DismissHandler;
    subtitle?: string;
    title?: string;
}
interface CardComponent extends ForwardRefExoticComponent<Omit<FlowPropsWithoutChildren, 'ref'> & RefAttributes<unknown>> {
    Dismiss: (props: ButtonProps) => JSX.Element;
    Header: (props: CardHeaderProps) => JSX.Element;
    Footer: (props: BoxProps) => JSX.Element;
    Media: (props: MediaProps) => JSX.Element;
    Primary: (props: ButtonProps) => JSX.Element;
    Secondary: (props: ButtonProps) => JSX.Element;
    Subtitle: (props: TextProps) => JSX.Element;
    Title: (props: TextProps) => JSX.Element;
}
interface CardProps extends FlowPropsWithoutChildren {
    children: React$1.ReactNode;
}
declare const Card: CardComponent;

interface CarouselProps extends FlowPropsWithoutChildren {
    /**
     * @ignore
     */
    children?: React.ReactNode;
    /**
     * How to sort the default the completed steps of the carousel.
     * - `completed-last` will sort the completed/skips steps to the end of the carousel.
     * - `default` will keep the order of the steps as they are in the flow.
     */
    sort?: 'completed-last' | 'default';
}
declare function Carousel({ ...props }: CarouselProps): _emotion_react_jsx_runtime.JSX.Element;

interface CollapsibleStepProps extends FlowChildrenProps {
    onOpenChange: (isOpening: boolean) => void;
    open: boolean;
}
type StepTypes = Record<string, (props: CollapsibleStepProps) => JSX.Element>;
interface CollapsibleProps extends FlowPropsWithoutChildren {
    /**
     * Map of step types to their respective components.
     * Use this to build custom step components. The `type` defined on the step in the Flow YAML config should match the key in this object.
     * For instance, if you have a step with `type: 'custom'`, you should provide a component for it like so:
     * ```
     * <Checklist.Collapsible stepTypes={{ custom: CustomStepComponent }} />
     * ```
     * The corresponding YAML config would look like:
     * ```
     * steps:
     *  - id: custom-step
     *    type: custom
     * ```
     */
    stepTypes?: StepTypes;
}
declare function Collapsible({ flowId, onPrimary, onSecondary, part, stepTypes, ...props }: CollapsibleProps): JSX.Element;

declare function Content$1({ children }: {
    children: any;
}): _emotion_react_jsx_runtime.JSX.Element;
declare function Root$1({ children, disabled, onOpenChange, open, ...props }: Collapsible$1.CollapsibleProps & BoxProps): _emotion_react_jsx_runtime.JSX.Element;
declare function Trigger$1({ isCompleted, isBlocked, title }: {
    isCompleted: any;
    isBlocked: any;
    title: any;
}): _emotion_react_jsx_runtime.JSX.Element;

declare namespace CollapsibleStep {
  export {
    Content$1 as Content,
    Root$1 as Root,
    Trigger$1 as Trigger,
  };
}

type AlignValue$1 = 'after' | 'before' | 'center' | 'end' | 'start';
type SideValue$1 = 'bottom' | 'left' | 'right' | 'top';
interface FloatingProps extends UseFloatingOptions {
    align?: AlignValue$1;
    alignOffset?: number;
    anchor?: string;
    side?: SideValue$1;
    sideOffset?: number;
}

interface PopoverRootProps extends FloatingProps {
    autoScroll?: ScrollIntoViewOptions | boolean;
    children?: React.ReactNode;
    defaultOpen?: boolean;
    modal?: boolean;
    spotlight?: boolean;
}
declare function Root({ align, alignOffset, anchor, autoScroll, children, defaultOpen, modal, onOpenChange, open, side, sideOffset, spotlight, ...floatingProps }: PopoverRootProps): _emotion_react_jsx_runtime.JSX.Element;

interface PopoverContentProps extends BoxProps {
}
declare function Content({ children, css, part, style, ...props }: BoxProps): _emotion_react_jsx_runtime.JSX.Element;

interface PopoverTriggerProps extends BoxProps {
}
declare function Trigger({ children, part, ...props }: BoxProps): _emotion_react_jsx_runtime.JSX.Element;

declare const index$3_Content: typeof Content;
type index$3_PopoverContentProps = PopoverContentProps;
type index$3_PopoverRootProps = PopoverRootProps;
type index$3_PopoverTriggerProps = PopoverTriggerProps;
declare const index$3_Root: typeof Root;
declare const index$3_Trigger: typeof Trigger;
declare namespace index$3 {
  export {
    index$3_Content as Content,
    index$3_PopoverContentProps as PopoverContentProps,
    index$3_PopoverRootProps as PopoverRootProps,
    index$3_PopoverTriggerProps as PopoverTriggerProps,
    index$3_Root as Root,
    index$3_Trigger as Trigger,
  };
}

interface FloatingChecklistProps extends PopoverRootProps, FlowPropsWithoutChildren {
}
declare function Floating({ children, flowId, onPrimary, onSecondary, part, ...props }: FloatingChecklistProps): _emotion_react_jsx_runtime.JSX.Element;

declare const index$2_Carousel: typeof Carousel;
declare const index$2_Collapsible: typeof Collapsible;
type index$2_CollapsibleProps = CollapsibleProps;
declare const index$2_CollapsibleStep: typeof CollapsibleStep;
type index$2_CollapsibleStepProps = CollapsibleStepProps;
declare const index$2_Floating: typeof Floating;
declare namespace index$2 {
  export {
    index$2_Carousel as Carousel,
    index$2_Collapsible as Collapsible,
    index$2_CollapsibleProps as CollapsibleProps,
    index$2_CollapsibleStep as CollapsibleStep,
    index$2_CollapsibleStepProps as CollapsibleStepProps,
    index$2_Floating as Floating,
  };
}

declare function useClientPortal(children: React.ReactNode, container: Element | DocumentFragment | string, key?: null | string): React$1.ReactPortal;

interface ClientPortalProps {
    children?: React.ReactNode;
    container?: Parameters<typeof useClientPortal>[1];
}
declare function ClientPortal({ children, container }: ClientPortalProps): React$1.ReactPortal;

interface CollectionProps extends BoxProps {
    /**
     * The unique ID of the Collection to render. You can find the Collection ID in the Frigade dashboard.
     */
    collectionId: string;
    /**
     * A map of variables to pass to Flows in this Collection.
     * Example:
     * ```tsx
     * variables={{
     *   name: "Bobby Nerves",
     *   occupation: "Vocalist",
     * }}
     * ```
     */
    variables?: FlowProps['variables'];
}
declare function Collection({ collectionId, part, variables, ...props }: CollectionProps): JSX.Element;

declare const Row: React$1.ForwardRefExoticComponent<Omit<BoxProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>, "ref"> & React$1.RefAttributes<unknown>>;
declare const Column: React$1.ForwardRefExoticComponent<Omit<BoxProps<React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>>, "ref"> & React$1.RefAttributes<unknown>>;

declare const Flex_Column: typeof Column;
declare const Flex_Row: typeof Row;
declare namespace Flex {
  export {
    Flex_Column as Column,
    Flex_Row as Row,
  };
}

type FieldTypes = Record<string, React.ComponentType<FormFieldProps>>;
interface ValidationRules {
    required?: Message | ValidationRule<boolean>;
    min?: ValidationRule<number | string>;
    max?: ValidationRule<number | string>;
    maxLength?: ValidationRule<number>;
    minLength?: ValidationRule<number>;
    pattern?: ValidationRule<RegExp>;
}
interface FormFieldData extends ValidationRules {
    id: string;
    options?: {
        label: string;
        value: string;
    }[];
    placeholder?: string;
    label?: string;
    type: string;
    value?: string;
    multiple?: boolean;
    props?: Record<string, string | number | boolean | undefined>;
    [key: string]: unknown;
}
interface FormFieldProps {
    /**
     * React Hook Form's controller for the field. Use field.onChange() to update the field value.
     * See https://react-hook-form.com/api/usecontroller for more.
     */
    field: any;
    /**
     * Form-specific data for decorating the field.
     */
    fieldData: FormFieldData;
    /**
     * React Hook Form's form context. See https://react-hook-form.com/api/useformcontext for more.
     */
    formContext: UseFormReturn;
    /**
     * Function for submitting the current field.
     * @ignore
     */
    fieldState: ControllerFieldState;
    /**
     * Function for submitting the current step of the form.
     * @ignore
     */
    submit: () => void;
}
interface FormProps extends FlowPropsWithoutChildren {
    /**
     * Custom field types to be used in the Form.
     * You can use this to build your own custom form fields in a `Form`.
     *
     * For example, if you want to use a custom field type called `calendar`:
     *
     * ```tsx
     * import { Form, FormFieldProps } from '@frigade/react'
     *
     * function CalendarField({ field, submit }: FormFieldProps) {
     *   return (
     *    <div>
     *      <input type="date" onChange={field.onChange} value={field.value} />
     *    </div>
     *   )
     * }
     *
     *  // ...
     *
     *  <Form flowId="my-flow-id" fieldTypes={{ calendar: CalendarField }} />
     *
     *  ```
     *
     */
    fieldTypes?: FieldTypes;
}
declare function Form({ fieldTypes, flowId, part, ...props }: FormProps): _emotion_react_jsx_runtime.JSX.Element;

type AlignValue = 'after' | 'before' | 'center' | 'end' | 'start';
type SideValue = 'bottom' | 'left' | 'right' | 'top';
interface HintProps extends BoxProps {
    align?: AlignValue;
    alignOffset?: number;
    anchor: string;
    autoScroll?: ScrollIntoViewOptions | boolean;
    children?: React.ReactNode;
    defaultOpen?: boolean;
    lockScroll?: boolean;
    modal?: boolean;
    onMount?: () => void;
    onOpenChange?: (open: boolean) => void;
    open?: boolean;
    side?: SideValue;
    sideOffset?: number;
    spotlight?: boolean;
}
declare function Hint({ align, alignOffset, anchor, autoScroll, children, css, defaultOpen, lockScroll, modal, onMount, onOpenChange, open, part, side, sideOffset, spotlight, style, ...props }: HintProps): _emotion_react_jsx_runtime.JSX.Element;

declare function SelectField(props: FormFieldProps): _emotion_react_jsx_runtime.JSX.Element;

declare function TextareaField(props: FormFieldProps): _emotion_react_jsx_runtime.JSX.Element;

declare function TextField(props: FormFieldProps): _emotion_react_jsx_runtime.JSX.Element;

declare function RadioField(props: FormFieldProps): _emotion_react_jsx_runtime.JSX.Element;

declare function Label({ children, id, required }: {
    children: any;
    id: any;
    required?: boolean;
}): _emotion_react_jsx_runtime.JSX.Element;

interface FieldProps {
    value: string;
    onChange: (value: string) => void;
    [key: string]: unknown;
}
interface BaseFieldProps extends FormFieldProps {
    children: (fieldProps?: FieldProps) => React.ReactNode;
}
declare function BaseField({ children, field, fieldData, fieldState }: BaseFieldProps): _emotion_react_jsx_runtime.JSX.Element;

type NPSOptions = {
    label: string;
    value: string;
}[];
interface NPSProps extends FormProps {
    /**
     * The options to display in the NPS field.
     * If not provided, the default NPS numbers from 0 to 10 will be used.
     */
    options?: NPSOptions;
    /**
     * The label to display for the positive end of the NPS scale.
     * If not provided, the default label "Extremely likely" will be used.
     */
    positiveLabel?: string;
    /**
     * The label to display for the negative end of the NPS scale.
     * If not provided, the default label "Not likely at all" will be used.
     */
    negativeLabel?: string;
}
declare function NPS({ as, flowId, fieldTypes, part, options, positiveLabel, negativeLabel, ...props }: NPSProps): _emotion_react_jsx_runtime.JSX.Element;

interface PingProps extends BoxProps {
    clickable?: boolean;
}
declare function Ping({ clickable, part, style, ...props }: PingProps): _emotion_react_jsx_runtime.JSX.Element;

interface ProgressProps extends BoxProps {
    current: number;
    total: number;
}

declare function Bar({ current, total, ...props }: ProgressProps): _emotion_react_jsx_runtime.JSX.Element;

declare function Dots({ current, total, ...props }: ProgressProps): _emotion_react_jsx_runtime.JSX.Element;

declare function Fraction({ current, total, ...props }: ProgressProps): _emotion_react_jsx_runtime.JSX.Element;

declare function Ring({ css, current, height, showLabel, strokeWidth, total, width, ...props }: ProgressProps): _emotion_react_jsx_runtime.JSX.Element;

declare function Segments({ current, total, ...props }: ProgressProps): _emotion_react_jsx_runtime.JSX.Element;

declare const index$1_Bar: typeof Bar;
declare const index$1_Dots: typeof Dots;
declare const index$1_Fraction: typeof Fraction;
type index$1_ProgressProps = ProgressProps;
declare const index$1_Ring: typeof Ring;
declare const index$1_Segments: typeof Segments;
declare namespace index$1 {
  export {
    index$1_Bar as Bar,
    index$1_Dots as Dots,
    index$1_Fraction as Fraction,
    index$1_ProgressProps as ProgressProps,
    index$1_Ring as Ring,
    index$1_Segments as Segments,
  };
}

interface ProgressBadgeProps extends FlowPropsWithoutChildren {
    /**
     * Override the title displayed on the ProgressBadge. Defaults to the title of the associated Flow, or the title of that Flow's first Step.
     */
    title?: string;
}
declare function ProgressBadge({ title, ...props }: ProgressBadgeProps): _emotion_react_jsx_runtime.JSX.Element;

type NavigateHandler = (url: string, target?: string) => void;
interface ProviderProps {
    /**
     * Your public API key from the Frigade dashboard. Do not ever use your private API key here.
     */
    apiKey: string;
    /**
     * The URL prefix of the API to use. By default, Frigade will use the production API: https://api.frigade.com/v1/public
     */
    apiUrl?: string;
    children?: React.ReactNode;
    /**
     * Global CSS properties to attach to the :root element.
     * @see https://emotion.sh/docs/css-prop#object-styles
     */
    css?: Record<string, unknown>;
    /**
     * By default, Frigade.Provider will render a built-in Collection to allow no-code deploys of Announcements and other floating Components. Set this to `false` if you want to manually control the rendering of the default Collection.
     */
    defaultCollection?: boolean;
    /**
     * Whether to generate a Guest ID and session if no userId is provided at render time.
     * If set to false, Frigade will not initialize or render any Flows until a userId is provided.
     * Defaults to true.
     */
    generateGuestId?: boolean;
    /**
     * Whether to sync state with Frigade on URL or focus change. Defaults to true.
     */
    syncOnWindowUpdates?: boolean;
    /**
     * The group ID to use for this context (optional).
     */
    groupId?: string;
    /**
     * Optional group properties to attach to the groupId on initialization.
     */
    groupProperties?: PropertyPayload;
    /**
     * A function to handle navigation. By default, Frigade will use `window.open` if not provided.
     * https://docs.frigade.com/v2/sdk/navigation
     */
    navigate?: NavigateHandler;
    /**
     * The global theme to use across components. See docs on styling: https://docs.frigade.com/v2/sdk/styling/theming
     */
    theme?: Theme;
    /**
     * CSS selector to scope Frigade CSS variables into. Defaults to `:root`.
     */
    themeSelector?: string;
    /**
     * The user ID of the user who is interacting with Frigade. If not provided, Frigade will generate a random guest ID and persist it in local storage.
     */
    userId?: string;
    /**
     * Optional user properties to attach to the userId on initialization.
     */
    userProperties?: PropertyPayload;
    /**
     * Whether to preload images in Flows. Defaults to true.
     */
    preloadImages?: boolean;
    /**
     * Global variables to apply to all Flows, including Collections.
     * If the individual Collection or Flow has its own variables, the two objects will be merged, with the Flow/Collection having high priority.
     * Example:
     * ```tsx
     * variables={{
     *   name: "Bobby Nerves",
     *   occupation: "Vocalist",
     * }}
     * ```
     * This prop can conveniently be used to pass entire i18n objects as well, which will allow all Flows to access i18n strings as needed.
     */
    variables?: Record<string, unknown>;
    /**
     * @ignore Internal use only.
     * If enabled, Frigade will not send any data to the API. A user's state will be reset on page refresh.
     */
    __readOnly?: boolean;
    /**
     * @ignore Internal use only.
     * Map of Flow ID to Flow State for all flows in the app that should be mocked.
     */
    __flowStateOverrides?: Record<string, StatefulFlow>;
}
declare function Provider({ children, css, defaultCollection, navigate, theme, themeSelector, ...props }: ProviderProps): _emotion_react_jsx_runtime.JSX.Element;

interface OverlayProps extends BoxProps {
    lockScroll?: boolean;
}

interface SpotlightProps extends OverlayProps {
    anchor: string;
    lockScroll?: boolean;
}
declare function Spotlight({ anchor, lockScroll, part, style, ...props }: SpotlightProps): _emotion_react_jsx_runtime.JSX.Element;

declare const index_NPS: typeof NPS;
type index_NPSProps = NPSProps;
declare namespace index {
  export {
    index_NPS as NPS,
    index_NPSProps as NPSProps,
  };
}

interface MergedRadixPopoverProps extends Pick<Popover.PopoverProps, 'defaultOpen' | 'modal' | 'onOpenChange' | 'open'>, Omit<Popover.PopoverContentProps, 'align' | 'asChild' | 'color' | 'content' | 'translate' | 'forceMount'> {
}
interface TooltipProps extends BoxPropsWithoutChildren, Omit<MergedRadixPopoverProps, 'children'> {
    /**
     * How to align the Tooltip relative to the anchor.
     * Uses the same notation as the `align` property in [Radix Popover](https://www.radix-ui.com/primitives/docs/components/popover).
     */
    align?: Popover.PopoverContentProps['align'] | 'before' | 'after';
    /**
     * @ignore
     */
    anchor?: string;
    /**
     * Whether to show a spotlight behind the anchor. This will darken the rest of the page and highlight the anchor.
     */
    spotlight?: boolean;
    /**
     * The Z-index of the tooltip. Defaults to auto.
     */
    zIndex?: number | string;
    style?: React__default.CSSProperties;
}
declare function Tooltip({ anchor, children, className, defaultOpen, open, part, spotlight, style, ...props }: TooltipProps): _emotion_react_jsx_runtime.JSX.Element;
declare namespace Tooltip {
    var Close: (props: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
    var Media: ({ src, ...props }: MediaProps) => _emotion_react_jsx_runtime.JSX.Element;
    var Primary: ({ onClick, title, ...props }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
    var Progress: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
    var Secondary: ({ onClick, title, ...props }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
    var Subtitle: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
    var Title: ({ children, ...props }: TextProps) => _emotion_react_jsx_runtime.JSX.Element;
}

interface TourProps extends FlowPropsWithoutChildren, Omit<HintProps, 'anchor'> {
    /**
     * The alignment of the tooltip relative to the anchor.
     * Possible values: `after`, `before`, `center`, `end`, `start`.
     */
    align?: AlignValue;
    /**
     * The offset of the tooltip relative to the anchor along the alignment axis.
     */
    alignOffset?: number;
    /**
     * Automatically scroll to the anchor element of the current Step
     */
    autoScroll?: boolean;
    /**
     * Specify a container in the DOM render the Tour into.
     * Use this to render the Tour into a different container/scrollable ancestor.
     */
    container?: ClientPortalProps['container'];
    /**
     * Whether the tooltip should be open by default.
     */
    defaultOpen?: boolean;
    /**
     * Whether to lock the scroll of the container when the Spotlight is enabled.
     * Defaults to `true`.
     */
    lockScroll?: boolean;
    /**
     * Whether to render a modal overlay behind the tooltip.
     */
    modal?: boolean;
    /**
     * Callback function triggered when the open state of the tooltip changes.
     */
    onOpenChange?: (open: boolean) => void;
    /**
     * Controls the open state of the tooltip. Use this for controlled components.
     */
    open?: boolean;
    /**
     * Whether the Tour should be completed by the end-user in sequential order.
     * If `false`, all steps will be rendered at once.
     * Defaults to `true`, which means only one step will be rendered at a time in sequential order.
     */
    sequential?: boolean;
    /**
     * The preferred side of the anchor to render the tooltip.
     * Possible values: `top`, `right`, `bottom`, `left`.
     */
    side?: SideValue;
    /**
     * The distance in pixels from the tooltip to the anchor element.
     */
    sideOffset?: number;
    /**
     * Whether to highlight the anchor element with a spotlight/scrim effect.
     */
    spotlight?: boolean;
}
declare function Tour({ as, flowId, ...props }: TourProps): _emotion_react_jsx_runtime.JSX.Element;

declare function useAutoScroll(element: Element | null | undefined, enabled?: boolean | ScrollIntoViewOptions): void;

declare function useBoundingClientRect(): {
    node: any;
    rect: DOMRect;
    ref: (node: Element) => void;
};

interface FlowConfig {
    variables?: Record<string, unknown>;
}
declare function useFlow(flowId: string | null, config?: FlowConfig): {
    flow: Flow$1 | undefined;
    isLoading: boolean;
};

declare function useFrigade(): {
    frigade: _frigade_js.Frigade;
    isLoading: boolean;
};

declare function useUser(): {
    userId: string;
    addProperties: (properties: Record<string, unknown>) => Promise<void>;
    track: (eventName: string, properties?: Record<string, unknown>) => Promise<void>;
    isLoading: boolean;
};

declare function useGroup(): {
    groupId: string;
    setGroupId: (groupId: string, properties?: Record<string, unknown>) => Promise<void>;
    addProperties: (properties: Record<string, unknown>) => Promise<void>;
    track: (eventName: string, properties?: Record<string, unknown>) => Promise<void>;
    isLoading: boolean;
};

export { Announcement, AnnouncementProps, Banner, BannerProps, BaseField, Box, BoxProps, Button, ButtonProps, Card, CardHeaderProps, CardProps, index$2 as Checklist, ClientPortal, ClientPortalProps, CollapsibleProps, CollapsibleStepProps, Collection, Dialog, DialogProps, DismissHandler, FieldTypes, Flex, Flow, FlowChildrenProps, FlowConfig, FlowHandlerProp, FlowHandlerProps, FlowProps, FlowPropsWithoutChildren, Form, FormFieldData, FormFieldProps, FormProps, Hint, Image, Label, Media, NPSProps, Ping, index$3 as Popover, index$1 as Progress, ProgressBadge, ProgressBadgeProps, Provider, ProviderProps, RadioField, SelectField, Spotlight, StepHandler, StepHandlerProp, StepHandlerProps, index as Survey, Text, TextField, TextProps, TextareaField, Theme, Tokens, Tooltip, TooltipProps, Tour, TourProps, Video, themeVariables, tokens, useAutoScroll, useBoundingClientRect, useFlow, useFlowHandlers, useFrigade, useGroup, useStepHandlers, useUser };