@frigade/react 2.1.19 → 2.1.21

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { Flow as Flow$1, FlowStep, PropertyPayload, StatefulFlow } from '@frigad
 export { _frigade_js as FrigadeJS };
 import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import * as Collapsible$1 from '@radix-ui/react-collapsible';
-import { ControllerFieldState, Message, ValidationRule } from 'react-hook-form';
+import { UseFormReturn, ControllerFieldState, Message, ValidationRule } from 'react-hook-form';
 import * as Popover from '@radix-ui/react-popover';
 
 type DeepPartial<T> = {
@@ -209,11 +209,7 @@ declare const tokens: {
         black: string;
         white: string;
     };
-    borders: {
-        md: string;
-    };
     borderWidths: {
-        0: string;
         md: string;
     };
 };
@@ -397,11 +393,7 @@ declare const theme: DeepPartial<{
         black: string;
         white: string;
     };
-    borders: {
-        md: string;
-    };
     borderWidths: {
-        0: string;
         md: string;
     };
 }>;
@@ -415,16 +407,206 @@ declare const themedStyleProps: {
     readonly color: Record<ColorName, string>;
     readonly backgroundColor: Record<ColorName, string>;
     readonly borderColor: Record<ColorName, string>;
-    readonly border: DeepPartial<{
-        md: 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<{
-        0: string;
         md: string;
     }>;
     readonly boxShadow: DeepPartial<{
@@ -1035,6 +1217,7 @@ 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;
@@ -1188,6 +1371,11 @@ interface FlowPropsWithoutChildren extends BoxPropsWithoutChildren {
      * 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>;
+    /**
+     * Optional component type to wrap the child components in. Use the`as={Box}` component for inline placement or the `as={Dialog}` component for modal placement.
+     * If you want to wrap the Flow in a custom component (such as your own modal), you can pass the custom component here.
+     */
+    as?: React$1.ElementType;
 }
 interface FlowProps extends FlowPropsWithoutChildren {
     /**
@@ -1251,11 +1439,11 @@ interface AnnouncementProps extends FlowPropsWithoutChildren, DialogProps {
      */
     defaultOpen?: boolean;
 }
-declare function Announcement({ flowId, ...props }: AnnouncementProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function Announcement({ flowId, part, ...props }: AnnouncementProps): _emotion_react_jsx_runtime.JSX.Element;
 
 interface BannerProps extends FlowPropsWithoutChildren {
 }
-declare function Banner({ dismissible, flowId, ...props }: BannerProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function Banner({ dismissible, flowId, part, ...props }: BannerProps): _emotion_react_jsx_runtime.JSX.Element;
 
 interface CardHeaderProps extends BoxProps {
     dismissible?: boolean;
@@ -1299,7 +1487,7 @@ interface CollapsibleProps extends FlowPropsWithoutChildren {
      */
     stepTypes?: StepTypes;
 }
-declare function Collapsible({ dismissible, flowId, onPrimary, onSecondary, stepTypes, ...props }: CollapsibleProps): EmotionJSX.Element;
+declare function Collapsible({ dismissible, flowId, onPrimary, onSecondary, part, stepTypes, ...props }: CollapsibleProps): EmotionJSX.Element;
 
 declare function Content({ children }: {
     children: any;
@@ -1368,7 +1556,7 @@ interface FormFieldData extends ValidationRules {
 interface FormFieldProps {
     field: any;
     fieldData: FormFieldData;
-    formState: any;
+    formContext: UseFormReturn;
     fieldState: ControllerFieldState;
     /**
      * Function for submitting the current step of the form.
@@ -1383,7 +1571,24 @@ interface FormProps extends FlowPropsWithoutChildren {
      */
     fieldTypes?: FieldTypes;
 }
-declare function Form({ fieldTypes, flowId, ...props }: FormProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function Form({ fieldTypes, flowId, part, ...props }: FormProps): _emotion_react_jsx_runtime.JSX.Element;
+
+declare function SelectField(props: FormFieldProps): _emotion_react_jsx_runtime.JSX.Element;
+
+declare function TextField(props: FormFieldProps): _emotion_react_jsx_runtime.JSX.Element;
+
+declare function RadioField(props: FormFieldProps): _emotion_react_jsx_runtime.JSX.Element;
+
+declare function Label({ children, id, required }: {
+    children: any;
+    id: any;
+    required?: boolean;
+}): _emotion_react_jsx_runtime.JSX.Element;
+
+interface BaseFieldProps extends FormFieldProps {
+    children: (fieldProps?: any) => React.ReactNode;
+}
+declare function BaseField({ children, field, fieldData, fieldState }: BaseFieldProps): _emotion_react_jsx_runtime.JSX.Element;
 
 interface ProgressProps extends BoxProps {
     current: number;
@@ -1420,6 +1625,15 @@ interface ProviderProps {
      */
     apiUrl?: string;
     children?: React.ReactNode;
+    /**
+     * Global CSS properties to attach to the :root element.
+     * @see https://emotion.sh/docs/css-prop#object-styles
+     */
+    css?: Record<string, unknown>;
+    /**
+     * The group ID to use for this context (optional).
+     */
+    groupId?: string;
     /**
      * A function to handle navigation. By default, Frigade will use `window.open` if not provided.
      * https://docs.frigade.com/v2/sdk/navigation
@@ -1433,10 +1647,6 @@ interface ProviderProps {
      * The user ID of the user who is interacting with Frigade. If not provided, Frigade will generate a random guest ID and persist it in local storage.
      */
     userId?: string;
-    /**
-     * The group ID to use for this context (optional).
-     */
-    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.
@@ -1448,9 +1658,9 @@ interface ProviderProps {
      */
     __flowStateOverrides?: Record<string, StatefulFlow>;
 }
-declare function Provider({ children, navigate, theme, ...props }: ProviderProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function Provider({ children, css, navigate, theme, ...props }: ProviderProps): _emotion_react_jsx_runtime.JSX.Element;
 
-declare function NPS({ as, flowId, fieldTypes, ...props }: FormProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function NPS({ as, flowId, fieldTypes, part, ...props }: FormProps): _emotion_react_jsx_runtime.JSX.Element;
 
 declare const index_NPS: typeof NPS;
 declare namespace index {
@@ -1506,7 +1716,7 @@ interface TourProps extends TooltipProps, FlowPropsWithoutChildren {
      */
     modal?: boolean;
 }
-declare function Tour({ flowId, onComplete, variables, ...props }: TourProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function Tour({ flowId, onComplete, variables, part, ...props }: TourProps): _emotion_react_jsx_runtime.JSX.Element;
 
 declare function useBoundingClientRect(): {
     node: any;
@@ -1544,4 +1754,4 @@ declare function useGroup(): {
     track: (eventName: string, properties?: Record<string, unknown>) => Promise<void>;
 };
 
-export { Announcement, AnnouncementProps, Banner, BannerProps, Box, BoxProps, Button, ButtonProps, Card, CardHeaderProps, CardProps, index$2 as Checklist, CollapsibleProps, CollapsibleStepProps, Dialog, DialogProps, DismissHandler, Flex, Flow, FlowChildrenProps, FlowConfig, FlowHandlerProp, FlowHandlerProps, FlowProps, FlowPropsWithoutChildren, Form, index$1 as Progress, Provider, ProviderProps, StepHandler, StepHandlerProp, StepHandlerProps, index as Survey, Text, TextProps, Theme, Tokens, Tooltip, TooltipProps, Tour, TourProps, themeVariables, tokens, useBoundingClientRect, useFlow, useFlowHandlers, useFrigade, useGroup, useModal, useStepHandlers, useUser };
+export { Announcement, AnnouncementProps, Banner, BannerProps, BaseField, Box, BoxProps, Button, ButtonProps, Card, CardHeaderProps, CardProps, index$2 as Checklist, CollapsibleProps, CollapsibleStepProps, Dialog, DialogProps, DismissHandler, FieldTypes, Flex, Flow, FlowChildrenProps, FlowConfig, FlowHandlerProp, FlowHandlerProps, FlowProps, FlowPropsWithoutChildren, Form, FormFieldData, FormFieldProps, FormProps, Label, index$1 as Progress, Provider, ProviderProps, RadioField, SelectField, StepHandler, StepHandlerProp, StepHandlerProps, index as Survey, Text, TextField, TextProps, Theme, Tokens, Tooltip, TooltipProps, Tour, TourProps, themeVariables, tokens, useBoundingClientRect, useFlow, useFlowHandlers, useFrigade, useGroup, useModal, useStepHandlers, useUser };