@frigade/react 2.0.0-alpha.26 → 2.0.0-alpha.27

package/dist/index.d.ts

@@ -1,92 +1,10 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { MouseEvent } from 'react';
+import React__default, { CSSProperties, MouseEvent } from 'react';
 import * as _frigade_js from '@frigade/js';
 import { Flow, FlowStep } from '@frigade/js';
 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 ButtonVariant = 'Primary' | 'Secondary' | 'Link' | 'Plain';
-interface ButtonProps extends BoxProps {
-    title?: string;
-    variant?: ButtonVariant;
-}
-declare function BaseButton({ as, children, title, variant, ...props }: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
-declare const Button: typeof BaseButton & {
-    [k: string]: {
-        ({ part, ...props }: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-};
-
-interface MediaProps extends BoxProps {
-    src: string;
-    type?: 'image' | 'video';
-}
-
-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): _emotion_react_jsx_runtime.JSX.Element;
-declare const Text: typeof BaseText & {
-    [k: string]: {
-        (props: TextProps): _emotion_react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-};
-
-interface DialogProps extends BoxProps {
-}
-
-type FlowHandler = (flow: Flow, event?: MouseEvent<unknown>) => Promise<boolean | void> | (boolean | void);
-interface StepHandlers$1 {
-    onComplete?: FlowHandler;
-    onDismiss?: FlowHandler;
-}
-declare function useFlowHandlers(flow: Flow, { onComplete, onDismiss }?: StepHandlers$1): {
-    handleDismiss: (e: MouseEvent<unknown>) => Promise<boolean>;
-};
-
-type StepHandler = (step: FlowStep, event?: MouseEvent<unknown>) => Promise<boolean | void> | (boolean | void);
-interface StepHandlers {
-    onPrimary?: StepHandler;
-    onSecondary?: StepHandler;
-}
-declare function useStepHandlers(step: FlowStep, { onPrimary, onSecondary }?: StepHandlers): {
-    handlePrimary: (e: MouseEvent<unknown>) => Promise<boolean>;
-    handleSecondary: (e: MouseEvent<unknown>) => Promise<boolean>;
-};
-
-interface FlowComponentProps {
-    flowId: string;
-    onComplete?: FlowHandler;
-    onDismiss?: FlowHandler;
-    onPrimary?: StepHandler;
-    onSecondary?: StepHandler;
-    variables?: Record<string, any>;
-}
-
-interface AnncouncementProps extends DialogProps, FlowComponentProps {
-}
-declare function Announcement({ flowId, onComplete, onDismiss, onPrimary, onSecondary, variables, }: AnncouncementProps): _emotion_react_jsx_runtime.JSX.Element;
-
-interface BannerProps extends BoxProps, FlowComponentProps {
-}
-declare function Banner({ flowId, onComplete, onDismiss, onPrimary, onSecondary, ...props }: BannerProps): _emotion_react_jsx_runtime.JSX.Element;
-
-declare const Card: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<unknown>>;
-
-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>>;
-};
-
 declare const tokens: {
     radii: {
         md: string;
@@ -286,6 +204,883 @@ declare const tokens: {
 type Tokens = typeof tokens;
 
 type Theme = Partial<Tokens>;
+declare const theme: Partial<{
+    radii: {
+        md: string;
+        lg: string;
+        round: string;
+    };
+    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;
+    };
+}>;
+
+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: {
+        md: string;
+    };
+    readonly borderRadius: {
+        md: string;
+        lg: string;
+        round: string;
+    };
+    readonly borderWidth: {
+        0: string;
+        md: string;
+    };
+    readonly boxShadow: {
+        md: string;
+    };
+    readonly fontFamily: {
+        default: string;
+    };
+    readonly fontSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+    };
+    readonly fontWeight: {
+        thin: string;
+        extralight: string;
+        light: string;
+        regular: string;
+        medium: string;
+        demibold: string;
+        bold: string;
+        extrabold: string;
+        black: string;
+    };
+    readonly gap: {
+        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: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    readonly margin: {
+        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: {
+        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: {
+        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: {
+        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: {
+        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: {
+        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: {
+        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: {
+        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: {
+        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: {
+        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;
+    };
+};
+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 & {});
+interface StyleProps extends FilteredCSSProps {
+    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> = React$1.ElementType<any>>(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';
+}
+
+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): _emotion_react_jsx_runtime.JSX.Element;
+declare const Text: typeof BaseText & {
+    [k: string]: {
+        (props: TextProps): _emotion_react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+};
+
+interface DialogProps extends BoxProps {
+}
+
+type FlowHandler = (flow: Flow, event?: MouseEvent<unknown>) => Promise<boolean | void> | (boolean | void);
+interface StepHandlers$1 {
+    onComplete?: FlowHandler;
+    onDismiss?: FlowHandler;
+}
+declare function useFlowHandlers(flow: Flow, { onComplete, onDismiss }?: StepHandlers$1): {
+    handleDismiss: (e: MouseEvent<unknown>) => Promise<boolean>;
+};
+
+type StepHandler = (step: FlowStep, event?: MouseEvent<unknown>) => Promise<boolean | void> | (boolean | void);
+interface StepHandlers {
+    onPrimary?: StepHandler;
+    onSecondary?: StepHandler;
+}
+declare function useStepHandlers(step: FlowStep, { onPrimary, onSecondary }?: StepHandlers): {
+    handlePrimary: (e: MouseEvent<unknown>) => Promise<boolean>;
+    handleSecondary: (e: MouseEvent<unknown>) => Promise<boolean>;
+};
+
+interface FlowComponentProps {
+    flowId: string;
+    onComplete?: FlowHandler;
+    onDismiss?: FlowHandler;
+    onPrimary?: StepHandler;
+    onSecondary?: StepHandler;
+    variables?: Record<string, any>;
+}
+
+interface AnncouncementProps extends DialogProps, FlowComponentProps {
+}
+declare function Announcement({ flowId, onComplete, onDismiss, onPrimary, onSecondary, variables, }: AnncouncementProps): _emotion_react_jsx_runtime.JSX.Element;
+
+interface BannerProps extends BoxProps, FlowComponentProps {
+}
+declare function Banner({ flowId, onComplete, onDismiss, onPrimary, onSecondary, ...props }: BannerProps): _emotion_react_jsx_runtime.JSX.Element;
+
+declare const Card: React$1.ForwardRefExoticComponent<Omit<BoxProps<React$1.ElementType<any>>, "ref"> & React$1.RefAttributes<unknown>>;
+
+declare const Flex: {
+    Column: React$1.ForwardRefExoticComponent<Omit<BoxProps<React$1.ElementType<any>>, "ref"> & React$1.RefAttributes<unknown>>;
+    Row: React$1.ForwardRefExoticComponent<Omit<BoxProps<React$1.ElementType<any>>, "ref"> & React$1.RefAttributes<unknown>>;
+};
 
 type NavigateHandler = (url: string, target?: string) => void;
 interface ProviderProps {