@frigade/react 2.0.0-alpha.8 → 2.0.0

package/dist/index.d.ts

@@ -1,33 +1,77 @@
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { MouseEvent } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Interpolation } from '@emotion/react';
-import * as Popover from '@radix-ui/react-popover';
+import React__default, { SyntheticEvent, CSSProperties, ForwardRefExoticComponent, RefAttributes } from 'react';
+import * as _frigade_js from '@frigade/js';
 import { Flow, FlowStep } from '@frigade/js';
+export { Flow, Frigade } from '@frigade/js';
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
+import { ControllerFieldState, Message, ValidationRule } from 'react-hook-form';
+import * as Popover from '@radix-ui/react-popover';
 
-type BoxProps<T extends React$1.ElementType = React$1.ElementType> = {
-    as?: T;
-    part?: string | string[];
-} & React$1.ComponentPropsWithRef<T>;
-declare const Box: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<React$1.ElementType<any>>>;
+type FlowHandlerProp = (flow: Flow, event?: React.MouseEvent<unknown>) => Promise<boolean | void> | (boolean | void);
+interface FlowHandlerProps {
+    onComplete?: FlowHandlerProp;
+    onDismiss?: FlowHandlerProp;
+}
+type DismissHandler = (e: React.MouseEvent<unknown>) => Promise<boolean | void>;
+declare function useFlowHandlers(flow: Flow, { onComplete, onDismiss }?: FlowHandlerProps): {
+    handleDismiss: DismissHandler;
+};
 
-type ButtonVariant = 'Primary' | 'Secondary' | 'Link' | 'Plain';
-interface ButtonProps extends BoxProps {
-    title?: string;
-    variant?: ButtonVariant;
+type StepHandlerProp = (step: FlowStep, event?: SyntheticEvent<object, unknown>) => Promise<boolean | void> | (boolean | void);
+interface StepHandlerProps {
+    onPrimary?: StepHandlerProp;
+    onSecondary?: StepHandlerProp;
 }
-declare function BaseButton({ as, children, title, variant, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
-declare const Button: typeof BaseButton & {
-    [k: string]: {
-        ({ part, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
+type StepHandler = (event: SyntheticEvent<object, unknown>, properties?: Record<string | number, unknown>) => Promise<boolean>;
+declare function useStepHandlers(step: FlowStep, { onPrimary, onSecondary }?: StepHandlerProps): {
+    handlePrimary: StepHandler;
+    handleSecondary: StepHandler;
 };
 
-declare const Flex: {
-    Column: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<unknown>>;
-    Row: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<unknown>>;
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
 };
+interface FlowComponentProps extends Omit<BoxProps, 'container'> {
+    /**
+     * The type of container to render the Flow in. `dialog` will spawn a modal with the component in it.
+     * `none` will render the component in the current context/inline.
+     *
+     * Defaults to 'none'.
+     */
+    container?: 'dialog' | 'none';
+    /**
+     * Whether the container is dismissible by clicking outside of it or pressing escape.
+     *
+     * Defaults to `true`.
+     */
+    dismissible?: boolean;
+    /**
+     * The Flow ID to render. You can find the Flow ID in the Frigade dashboard.
+     */
+    flowId: string;
+    /**
+     * Handler for when the Flow is completed.
+     */
+    onComplete?: FlowHandlerProp;
+    /**
+     * Handler for when the Flow is dismissed.
+     */
+    onDismiss?: FlowHandlerProp;
+    /**
+     * Handler for when primary button is clicked.
+     */
+    onPrimary?: StepHandlerProp;
+    /**
+     * Handler for when secondary button is 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>;
+}
 
 declare const tokens: {
     radii: {
@@ -227,67 +271,1040 @@ declare const tokens: {
 };
 type Tokens = typeof tokens;
 
-type Theme = Partial<Tokens>;
-
-type NavigateHandler = (url: string, target?: string) => void;
-interface ProviderProps {
-    apiKey: string;
-    apiUrl?: string;
-    children?: React.ReactNode;
-    navigate?: NavigateHandler;
-    theme?: Theme;
-    userId?: string;
-}
-declare function Provider({ children, navigate, theme, ...props }: ProviderProps): react_jsx_runtime.JSX.Element;
-
-type TextVariant = 'Display1' | 'Display2' | 'H1' | 'H2' | 'H3' | 'H4' | 'Body1' | 'Body2' | 'Caption';
-interface TextProps extends BoxProps {
-    variant?: TextVariant;
-}
-declare function BaseText({ as, children, variant, ...props }: TextProps): react_jsx_runtime.JSX.Element;
-declare const Text: typeof BaseText & {
-    [k: string]: {
-        (props: TextProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
+type Theme = DeepPartial<Tokens>;
+declare const theme: DeepPartial<{
+    radii: {
+        md: string;
+        lg: string;
+        round: string;
     };
-};
-
-interface MediaProps extends BoxProps {
-    src: string;
-    type: 'image' | 'video';
-}
-
-interface MergedRadixPopoverProps extends Pick<Popover.PopoverProps, 'defaultOpen' | 'modal' | 'onOpenChange' | 'open'>, Omit<Popover.PopoverContentProps, 'align' | 'asChild'> {
-}
-interface TooltipProps extends MergedRadixPopoverProps {
-    align?: Popover.PopoverContentProps['align'] | 'before' | 'after';
-    anchor?: string;
-    css?: Interpolation<Record<any, any>>;
-    spotlight?: boolean;
-    style?: React__default.CSSProperties;
-}
-declare function Tooltip({ anchor, children, className, spotlight, style, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
-declare namespace Tooltip {
-    var Close: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
-    var Media: ({ src, ...props }: MediaProps) => react_jsx_runtime.JSX.Element;
-    var Primary: ({ onClick, title, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
-    var Progress: ({ children, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
-    var Secondary: ({ onClick, title, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
-    var Subtitle: ({ children, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
-    var Title: ({ children, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
-}
-
-type FlowHandler = (flow: Flow, event?: MouseEvent<unknown>) => boolean | void;
-
-type StepHandler = (step: FlowStep, event?: MouseEvent<unknown>) => boolean | void;
+    shadows: {
+        md: string;
+    };
+    space: {
+        0: string;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: 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: {
+        neutral: {
+            background: string;
+            border: string;
+            foreground: string;
+            surface: string;
+            active: {
+                background: string;
+                border: string;
+                foreground: string;
+                surface: string;
+            };
+            focus: {
+                background: string;
+                border: string;
+                foreground: string;
+                surface: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+                foreground: string;
+                surface: string;
+            };
+        };
+        primary: {
+            background: string;
+            border: string;
+            foreground: string;
+            surface: string;
+            active: {
+                background: string;
+                border: string;
+                foreground: string;
+                surface: string;
+            };
+            focus: {
+                background: string;
+                border: string;
+                foreground: string;
+                surface: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+                foreground: string;
+                surface: string;
+            };
+        };
+        secondary: {
+            background: string;
+            border: string;
+            foreground: string;
+            surface: string;
+            active: {
+                background: string;
+                border: string;
+                foreground: string;
+                surface: string;
+            };
+            focus: {
+                background: string;
+                border: string;
+                foreground: string;
+                surface: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+                foreground: string;
+                surface: string;
+            };
+        };
+        black: string;
+        gray100: string;
+        gray200: string;
+        gray300: string;
+        gray400: string;
+        gray500: string;
+        gray600: string;
+        gray700: string;
+        gray800: string;
+        gray900: string;
+        white: string;
+        blue400: string;
+        blue500: string;
+        blue800: string;
+        blue900: string;
+        green400: string;
+        green500: string;
+        green800: string;
+        transparent: string;
+        inherit: string;
+        red500: string;
+    };
+    borders: {
+        md: string;
+    };
+    borderWidths: {
+        0: string;
+        md: string;
+    };
+}>;
 
-interface TourProps extends TooltipProps {
-    flowId: string;
-    onComplete?: FlowHandler;
-    onDismiss?: FlowHandler;
-    onPrimary?: StepHandler;
-    onSecondary?: StepHandler;
-}
-declare function Tour({ flowId, onComplete, ...props }: TourProps): react_jsx_runtime.JSX.Element;
+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: DeepPartial<{
+        md: string;
+    }>;
+    readonly borderRadius: DeepPartial<{
+        md: string;
+        lg: string;
+        round: string;
+    }>;
+    readonly borderWidth: DeepPartial<{
+        0: string;
+        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;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: 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;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: string;
+    }>;
+    readonly marginBottom: DeepPartial<{
+        0: string;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: string;
+    }>;
+    readonly marginLeft: DeepPartial<{
+        0: string;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: string;
+    }>;
+    readonly marginRight: DeepPartial<{
+        0: string;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: string;
+    }>;
+    readonly marginTop: DeepPartial<{
+        0: string;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: string;
+    }>;
+    readonly padding: DeepPartial<{
+        0: string;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: string;
+    }>;
+    readonly paddingBottom: DeepPartial<{
+        0: string;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: string;
+    }>;
+    readonly paddingLeft: DeepPartial<{
+        0: string;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: string;
+    }>;
+    readonly paddingRight: DeepPartial<{
+        0: string;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: string;
+    }>;
+    readonly paddingTop: DeepPartial<{
+        0: string;
+        4: string;
+        20: 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;
+        [-10]: string;
+        9: string;
+        [-9]: string;
+        8: string;
+        [-8]: string;
+        7: string;
+        [-7]: string;
+        6: string;
+        [-6]: string;
+        5: string;
+        [-5]: string;
+        [-4]: string;
+        3: string;
+        [-3]: string;
+        2: string;
+        [-2]: string;
+        1: string;
+        [-1]: string;
+        0.5: string;
+        [-0.5]: string;
+        auto: 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;
+}
+declare function BaseButton({ as, children, part, title, variant, ...props }: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
+declare const Button: typeof BaseButton & {
+    [k: string]: {
+        (props: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+};
+
+interface MediaProps extends BoxProps {
+    src: string;
+    type?: 'image' | 'video';
+}
+
+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,
+  };
+}
+
+interface DialogProps extends BoxProps {
+}
+
+interface AnnouncementProps extends FlowComponentProps, Omit<DialogProps, 'container'> {
+}
+declare function Announcement(props: AnnouncementProps): _emotion_react_jsx_runtime.JSX.Element;
+
+interface BannerProps extends FlowComponentProps {
+}
+declare function Banner(props: BannerProps): _emotion_react_jsx_runtime.JSX.Element;
+
+interface CardComponent extends ForwardRefExoticComponent<Omit<FlowComponentProps, 'ref'> & RefAttributes<unknown>> {
+    Dismiss: (props: ButtonProps) => EmotionJSX.Element;
+    Media: (props: MediaProps) => EmotionJSX.Element;
+    Primary: (props: ButtonProps) => EmotionJSX.Element;
+    Secondary: (props: ButtonProps) => EmotionJSX.Element;
+    Subtitle: (props: TextProps) => EmotionJSX.Element;
+    Title: (props: TextProps) => EmotionJSX.Element;
+}
+declare const Card: CardComponent;
+
+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;
+}
+interface FormFieldProps {
+    field: any;
+    fieldData: FormFieldData;
+    formState: any;
+    fieldState: ControllerFieldState;
+}
+interface FormProps extends FlowComponentProps {
+    /**
+     * Custom field types to be used in the Form.
+     * You can use this to build your own custom form fields in a `Form`.
+     */
+    fieldTypes?: FieldTypes;
+}
+declare function Form({ fieldTypes, ...props }: FormProps): _emotion_react_jsx_runtime.JSX.Element;
+
+type NavigateHandler = (url: string, target?: string) => void;
+interface ProviderProps {
+    apiKey: string;
+    apiUrl?: string;
+    children?: React.ReactNode;
+    navigate?: NavigateHandler;
+    theme?: Theme;
+    userId?: string;
+    groupId?: string;
+    /**
+     * @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 Config for all flows in the app.
+     * Configs will have to be provided in serialized JSON format rather than YAML.
+     */
+    __flowConfigOverrides?: Record<string, string>;
+}
+declare function Provider({ children, navigate, theme, ...props }: ProviderProps): _emotion_react_jsx_runtime.JSX.Element;
+
+interface MergedRadixPopoverProps extends Pick<Popover.PopoverProps, 'defaultOpen' | 'modal' | 'onOpenChange' | 'open'>, Omit<Popover.PopoverContentProps, 'align' | 'asChild'> {
+}
+interface TooltipProps {
+    /**
+     * 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;
+    style?: React__default.CSSProperties;
+}
+declare function Tooltip({ anchor, children, className, spotlight, style, ...props }: TooltipProps & MergedRadixPopoverProps): _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 TooltipProps, FlowComponentProps {
+}
+declare function Tour({ flowId, onComplete, variables, ...props }: TourProps): _emotion_react_jsx_runtime.JSX.Element;
+
+declare function useBoundingClientRect(): {
+    node: any;
+    rect: DOMRect;
+    ref: (node: Element) => void;
+};
+
+interface FlowConfig {
+    variables?: Record<string, unknown>;
+}
+declare function useFlow(flowId: string, config?: FlowConfig): {
+    flow: Flow;
+};
+
+declare function useModal(flow: Flow): {
+    isCurrentModal: boolean;
+    removeModal: () => void;
+};
+
+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>;
+};
+
+declare function useGroup(): {
+    groupId: string;
+    addProperties: (properties: Record<string, unknown>) => Promise<void>;
+    track: (eventName: string, properties?: Record<string, unknown>) => Promise<void>;
+};
 
-export { Box, BoxProps, Button, ButtonProps, Flex, Provider, ProviderProps, Text, TextProps, Tooltip, TooltipProps, Tour, TourProps };
+export { Announcement, AnnouncementProps, Banner, Box, BoxProps, Button, ButtonProps, Card, Flex, FlowConfig, Form, Provider, ProviderProps, Text, TextProps, Tooltip, TooltipProps, Tour, TourProps, useBoundingClientRect, useFlow, useFlowHandlers, useFrigade, useGroup, useModal, useStepHandlers, useUser };