@frigade/react

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>; declare function useStepHandlers(step: FlowStep, { onPrimary, onSecondary }?: StepHandlerProps): { handlePrimary: StepHandler; handleSecondary: 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; 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.