@frigade/react 1.38.11 → 2.0.0-alpha

package/dist/index.d.ts

@@ -1,1065 +1,83 @@
-import * as React from 'react';
-import React__default, { CSSProperties, FC, ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
-import { BorderProps, ColorProps, LayoutProps, ShadowProps, SpaceProps, TypographyProps, FontProps } from 'styled-system';
+import * as React$1 from 'react';
+import React__default from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as Popover from '@radix-ui/react-popover';
 
-type StepActionType = 'STARTED_STEP' | 'COMPLETED_STEP' | 'NOT_STARTED_STEP';
+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>>>;
 
-interface StepData {
-    /**
-     * Unique identifier for the step.
-     */
-    id: string;
-    /**
-     * Name of the step when shown in a list view
-     */
-    stepName?: string;
-    /**
-     * Title of the step
-     */
+type ButtonVariant = 'Primary' | 'Secondary' | 'Link' | 'Plain';
+interface ButtonProps extends BoxProps {
     title?: string;
-    /**
-     * Subtitle of the step
-     */
-    subtitle?: string;
-    /**
-     * Primary button title. If omitted, the primary button will not be shown.
-     */
-    primaryButtonTitle?: string;
-    /**
-     * Primary button URI.
-     */
-    primaryButtonUri?: string;
-    /**
-     * Primary button URI target (either _blank or _self)
-     */
-    primaryButtonUriTarget?: string;
-    /**
-     * Secondary button title. If omitted, the secondary button will not be shown.
-     */
-    secondaryButtonTitle?: string;
-    /**
-     * Secondary button URI.
-     */
-    secondaryButtonUri?: string;
-    /**
-     * Secondary button URI target (either _blank or _self)
-     */
-    secondaryButtonUriTarget?: string;
-    /**
-     * Text on button if a back button is present
-     */
-    backButtonTitle?: string;
-    /**
-     * If true, the step will be marked as completed when the secondary button is clicked.
-     */
-    skippable?: boolean;
-    /**
-     * @deprecated use primaryButtonUri instead
-     */
-    url?: string;
-    /**
-     * @deprecated use primaryButtonUriTarget instead
-     */
-    urlTarget?: string;
-    type?: string;
-    /**
-     * Video url to be shown for components supporting video.
-     */
-    videoUri?: string;
-    /**
-     * Image url to be shown for components supporting image.
-     */
-    imageUri?: string | null;
-    /**
-     * Automatically mark the step as completed when the primary button is clicked. Default is false.
-     */
-    autoMarkCompleted?: boolean;
-    /**
-     * Whether the step is completed.
-     */
-    complete: boolean;
-    /**
-     * Whether the step has been started by the user. True if either the step was marked started or completed.
-     */
-    started: boolean;
-    /**
-     * Whether the step is currently active/the flow is currently on this step. Can only be true for on step at a time.
-     */
-    currentlyActive: boolean;
-    /**
-     * Whether the step is blocked (can't be accessed yet)
-     */
-    blocked?: boolean;
-    /**
-     * Whether the step is hidden (not shown in the list view)
-     */
-    hidden?: boolean;
-    StepContent?: React__default.ReactNode;
-    /**
-     * Handler for when the primary button is clicked.
-     */
-    handlePrimaryButtonClick?: () => void;
-    /**
-     * Handler for when the secondary button is clicked.
-     */
-    handleSecondaryButtonClick?: () => void;
-    ctaActionType?: 'complete';
-    props?: any;
-    /**
-     * Criteria that needs to be met for the step to complete
-     */
-    completionCriteria?: string;
-    /**
-     * Criteria that needs to be met for the step to start
-     */
-    startCriteria?: string;
-    progress?: number;
-    /**
-     * Whether the step is dismissible (for instance, tooltips or other non-essential steps)
-     */
-    dismissible?: boolean;
-    /**
-     * Whether to show a highlight in the page where the step is shown. Typically used in tooltips for creating small pings.
-     */
-    showHighlight?: boolean;
-    /**
-     * Any other additional props defined in config.yml
-     */
-    [x: string | number | symbol]: unknown;
-}
-interface DefaultFrigadeFlowProps {
-    flowId: string;
-    style?: CSSProperties;
-    className?: string;
-    /**
-     * The appearance of the flow. See https://docs.frigade.com/sdk/styling
-     */
-    appearance?: Appearance;
-    /**
-     * Dynamic variables to use in config.yml. See https://docs.frigade.com/flows/dynamic-variables
-     */
-    customVariables?: {
-        [key: string]: string | number | boolean;
-    };
-    hideOnFlowCompletion?: boolean;
-    /**
-     * Handler for when a step is completed.
-     * @param step
-     * @param index
-     * @param nextStep
-     * @param allFormData All form data collected so far (only applicable to FrigadeForms)
-     * @param stepSpecificFormData Form data collected for the finished step (only applicable to FrigadeForms)
-     */
-    onStepCompletion?: (step: StepData, index: number, nextStep?: StepData, allFormData?: any, stepSpecificFormData?: any) => boolean;
-    /**
-     * Handler for when a primary or secondary CTA is clicked (regardless if step is completed or not).
-     * Return true if your app performs an action (e.g. open other modal or page transition).
-     * @param step
-     * @param index
-     * @param cta
-     */
-    onButtonClick?: (step: StepData, index?: number, cta?: 'primary' | 'secondary' | 'link' | 'back' | 'collapse' | 'expand', nextStep?: StepData) => boolean;
-    onDismiss?: () => void;
-    onComplete?: () => void;
-}
-interface Appearance {
-    /**
-     * Overrides of individual components and classes.
-     * This map can either be className(s) or CSSProperties.
-     */
-    styleOverrides?: {
-        [key: string]: CSSProperties | string;
-    };
-    /**
-     * The base theme to use with Frigade components.
-     */
-    theme?: BaseTheme;
-}
-interface BaseTheme {
-    /**
-     * The base theme color used on CTAs and other primary elements.
-     */
-    colorPrimary?: string;
-    /**
-     * Secondary color, used for CTAs and other secondary elements.
-     */
-    colorSecondary?: string;
-    colorBackground?: string;
-    colorBackgroundSecondary?: string;
-    colorText?: string;
-    colorTextOnPrimaryBackground?: string;
-    colorTextSecondary?: string;
-    colorTextDisabled?: string;
-    colorTextError?: string;
-    colorTextSuccess?: string;
-    colorBorder?: string;
-    fontSize?: string | number;
-    fontSmoothing?: string;
-    fontWeight?: string | number;
-    borderRadius?: number;
-    modalContainer?: CSSProperties;
+    variant?: ButtonVariant;
 }
-declare const DefaultAppearance: Appearance;
-
-interface Flow {
-    id: number;
-    name: string;
-    description: string;
-    data: string;
-    createdAt: string;
-    modifiedAt: string;
-    slug: string;
-    type: FlowType;
-    triggerType: TriggerType;
-    targetingLogic?: string;
-    active: boolean;
-}
-declare enum FlowType {
-    CHECKLIST = "CHECKLIST",
-    FORM = "FORM",
-    TOUR = "TOUR",
-    SUPPORT = "SUPPORT",
-    CUSTOM = "CUSTOM",
-    BANNER = "BANNER",
-    EMBEDDED_TIP = "EMBEDDED_TIP",
-    NPS_SURVEY = "NPS_SURVEY",
-    ANNOUNCEMENT = "ANNOUNCEMENT"
-}
-declare enum TriggerType {
-    MANUAL = "MANUAL",
-    AUTOMATIC = "AUTOMATIC"
-}
-declare function useFlows(): {
-    getAllFlows: () => Flow[];
-    getFlow: (flowId: string) => Flow;
-    getFlowData: <T>(flowId: string) => T;
-    isLoading: boolean;
-    getStepStatus: (flowId: string, stepId: string) => StepActionType | null;
-    getFlowSteps: (flowId: string) => StepData[];
-    getCurrentStepIndex: (flowId: string) => number;
-    markStepStarted: (flowId: string, stepId: string, data?: any) => Promise<void>;
-    markStepCompleted: (flowId: string, stepId: string, data?: any) => Promise<void>;
-    markFlowNotStarted: (flowId: string, data?: any) => Promise<void>;
-    markFlowStarted: (flowId: string, data?: any) => Promise<void>;
-    markFlowCompleted: (flowId: string, data?: any) => Promise<void>;
-    markFlowSkipped: (flowId: string, data?: any) => Promise<void>;
-    markStepNotStarted: (flowId: string, stepId: string, data?: any) => Promise<void>;
-    getFlowStatus: (flowId: string) => "COMPLETED_FLOW" | "STARTED_FLOW" | "NOT_STARTED_FLOW";
-    getNumberOfStepsCompleted: (flowId: string) => number;
-    getNumberOfSteps: (flowId: string) => number;
-    targetingLogicShouldHideFlow: (flow: Flow) => boolean;
-    setCustomVariable: (key: string, value: string | number | boolean) => void;
-    updateCustomVariables: (newCustomVariables?: {
-        [key: string]: string | number | boolean;
-    }) => void;
-    customVariables: {
-        [key: string]: string | number | boolean;
+declare function BaseButton({ as, children, css, 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;
     };
-    getStepOptionalProgress: (step: StepData) => number;
-    getFlowMetadata: (slug: string) => any;
-    isStepBlocked: (flowId: string, stepId: string) => boolean;
-    isStepHidden: (flowId: string, stepId: string) => boolean;
-    hasActiveFullPageFlow: boolean;
-    setHasActiveFullPageFlow: React.Dispatch<React.SetStateAction<boolean>>;
-    isFlowAvailableToUser: (flowId: string) => boolean;
-    refresh: () => void;
 };
 
-interface FlowResponse {
-    foreignUserId: string;
-    foreignUserGroupId?: string;
-    flowSlug: string;
-    stepId: string;
-    actionType: string;
-    data: object;
-    createdAt: Date;
-    blocked: boolean;
-    hidden: boolean;
-}
-interface PublicStepState {
-    stepId: string;
-    actionType: 'COMPLETED_STEP' | 'STARTED_STEP' | 'NOT_STARTED_STEP';
-    blocked: boolean;
-    hidden: boolean;
-    createdAt: Date;
-}
-declare function useFlowResponses(): {
-    addResponse: (flowResponse: FlowResponse) => Promise<void>;
-    setFlowResponses: React.Dispatch<React.SetStateAction<FlowResponse[]>>;
-    getFlowResponses: () => FlowResponse[];
+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>>;
 };
 
-interface FrigadeProviderProps {
-    publicApiKey: string;
-    /**
-     * The user id of the user that is currently logged in.
-     */
-    userId?: string;
-    /**
-     * The organization id of the organization that is currently logged in.
-     */
-    organizationId?: string;
-    config?: FrigadeConfig;
-    children?: React__default.ReactNode;
+interface ProviderProps {
+    apiKey: string;
+    children?: React.ReactNode;
+    config?: ProviderConfig;
+    theme?: Record<any, any>;
 }
-interface FrigadeConfig {
-    /**
-     * Override the default router used by Frigade.
-     * This is useful if you are using a router and want to avoid doing a full page refresh on navigation.
-     * @param url The url to navigate to.
-     */
-    navigate?: (url: string, target: string) => void;
-    /**
-     * Default Appearance for all flows.
-     */
-    defaultAppearance?: Appearance;
-    /**
-     * API url to use for all requests. Defaults to https://api.frigade.com
-     */
+interface ProviderConfig {
     apiUrl?: string;
-    /**
-     * When true, Frigade will be in read-only mode and state will not be updated. Default false.
-     * Used mostly for demo purposes.
-     */
-    readonly?: boolean;
-    theme?: Record<string, any>;
-    /**
-     * Flag to turn on debug mode which will log all events to the console. Default false.
-     * Default false.
-     */
-    debug?: boolean;
-    /**
-     * @ignore
-     */
-    __internal__?: {
-        [key: string]: string;
-    };
-}
-declare const FrigadeProvider: FC<FrigadeProviderProps>;
-
-interface FrigadeChecklistProps extends HeroChecklistProps {
-    flowId: string;
-    title?: string;
-    subtitle?: string;
-    style?: CSSProperties;
-    /** @ignore */
-    initialSelectedStep?: number;
-    className?: string;
-    type?: 'inline' | 'modal';
-    checklistStyle?: 'with-guide' | 'default' | 'condensed' | 'carousel';
-    visible?: boolean;
-    setVisible?: (visible: boolean) => void;
-    onDismiss?: () => void;
-    /**
-     * See https://docs.frigade.com/flows/dynamic-variables
-     */
-    customVariables?: {
-        [key: string]: string | number | boolean;
-    };
-    /** @ignore */
-    guideFlowId?: string;
-    /** @ignore */
-    guideTitle?: string;
-    autoExpandFirstIncompleteStep?: boolean;
-    autoExpandNextStep?: boolean;
-}
-declare const FrigadeChecklist: React__default.FC<FrigadeChecklistProps>;
-
-interface HeroChecklistProps extends Omit<DefaultFrigadeFlowProps, 'flowId'> {
-    title?: string;
-    subtitle?: string;
-    /**
-     * @deprecated Use `appearance` instead
-     * @ignore
-     */
-    primaryColor?: string;
-    /** @ignore */
-    steps?: StepData[];
-    /** @ignore */
-    selectedStep?: number;
-    /** @ignore */
-    setSelectedStep?: (index: number) => void;
-    /**
-     * Map of custom step types that the checklist supports. To use a custom steps in your checklist, see [Component Customization](/component/customization#customizing-frigade-components)
-     */
-    customStepTypes?: Record<string, ((stepData: StepData, appearance: Appearance) => React__default.ReactNode) | React__default.ReactNode>;
-}
-
-interface FrigadeHeroChecklistProps extends HeroChecklistProps {
-    flowId: string;
-    title?: string;
-    subtitle?: string;
-    primaryColor?: string;
-    onCompleteStep?: (index: number, stepData: StepData) => void;
-    style?: CSSProperties;
-    initialSelectedStep?: number;
-    className?: string;
-}
-declare const FrigadeHeroChecklist: React__default.FC<FrigadeHeroChecklistProps>;
-
-type ProgressBadgeType = 'condensed' | 'default' | 'full-width';
-
-interface FrigadeProgressBadgeProps extends DefaultFrigadeFlowProps {
-    title: string;
-    subtitle?: string;
-    icon?: React__default.ReactNode;
-    textStyle?: CSSProperties;
-    onClick?: () => void;
-    hideOnFlowCompletion?: boolean;
-    type?: ProgressBadgeType;
-}
-declare const FrigadeProgressBadge: React__default.FC<FrigadeProgressBadgeProps>;
-
-interface FormInputType {
-    id: string;
-    title?: string;
-    subtitle?: string;
-    type: string;
-    required?: boolean;
-    validation?: InputValidation;
-}
-interface InputValidation {
-    type: 'number' | 'string' | 'email' | 'phone' | 'date' | 'time' | 'datetime' | 'url' | 'custom' | 'password';
-    requiredError?: string;
-    invalidTypeError?: string;
-    props?: InputValidationRuleProps[];
-}
-interface InputValidationRuleProps {
-    requirement: string;
-    value?: string | number;
-    message?: string;
-}
-interface FormInputProps {
-    formInput: FormInputType;
-    customFormTypeProps: CustomFormTypeProps;
-    inputData: any;
-    onSaveInputData: (data: any) => void;
-    setFormValidationErrors: (errors: FormValidationError[]) => void;
-}
-interface FormValidationError {
-    message: string;
-    id: string;
-    hidden?: boolean;
-}
-interface CustomFormTypeProps {
-    flowId: string;
-    stepData: StepData;
-    canContinue: boolean;
-    setCanContinue: (canContinue: boolean) => void;
-    onSaveData: (data: object) => void;
-    appearance?: Appearance;
-    prefillData?: Record<string, any>;
-    customFormElements?: {
-        [key: string]: (params: FormInputProps) => React__default.ReactNode;
-    };
-}
-interface StepContentProps {
-    stepData: StepData;
-    appearance?: Appearance;
-}
-type EntityProperties = Record<string, string | boolean | number | null>;
-
-type FrigadeFormType = 'inline' | 'modal' | 'large-modal' | 'corner-modal';
-interface FrigadeFormProps extends DefaultFrigadeFlowProps {
-    /**
-     * @ignore
-     */
-    title?: string;
-    /**
-     * @ignore
-     */
-    subtitle?: string;
-    type?: FrigadeFormType;
-    /**
-     * Map of custom components. The key must match the `type` property of the step defined in `config.yml`
-     */
-    customStepTypes?: {
-        [key: string]: ((params: {
-            flowId: string;
-            stepData: StepData;
-            canContinue: boolean;
-            setCanContinue: (canContinue: boolean) => void;
-            onSaveData: (data: object) => void;
-            appearance?: Appearance;
-            prefillData?: Record<string, any>;
-            customFormElements?: {
-                [key: string]: (params: FormInputProps) => React__default.ReactNode;
-            };
-        }) => React__default.ReactNode) | React__default.ReactNode;
-    };
-    /**
-     * Map of custom form components. Can only be used with a step of type `multiInput` (defined in `config.yml`).
-     * The key must match the `type` property of the input defined in `config.yml`
-     */
-    customFormElements?: {
-        [key: string]: (params: FormInputProps) => React__default.ReactNode;
-    };
-    visible?: boolean;
-    setVisible?: (visible: boolean) => void;
-    onComplete?: () => void;
-    /**
-     * Whether to show a dismiss button to exit out of the form. Applicable only for modal forms.
-     */
-    dismissible?: boolean;
-    /**
-     * If true, the form can be repeated multiple times. Default is false. Useful for e.g. contact/support forms.
-     */
-    repeatable?: boolean;
-    /**
-     * If true, the user will be excited from the flow when the form is dismissed. Default is false.
-     */
-    endFlowOnDismiss?: boolean;
-    /**
-     * Indicates the position of the modal if the form type is a modal. Default is center.
-     */
-    modalPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
-    /**
-     * Show a pagination indicator at the bottom of the form. Default is false.
-     */
-    showPagination?: boolean;
-    /**
-     * Whether to allow the user to navigate back to previous steps. Default is false.
-     * The title of the button can be controlled by the `backButtonTitle` prop on the step.
-     */
-    allowBackNavigation?: boolean;
-    /**
-     * @ignore
-     */
-    showFrigadeBranding?: boolean;
-    /**
-     * Async function resolved when the user submits data in a step.
-     * If the promise evaluates to a string or `false`, the flow will not proceed to the next step. The string will be displayed as an error message if passed.
-     * If the promise evaluates to `true`, the flow will proceed to the next step.
-     */
-    validationHandler?: (step: StepData, index: number, nextStep?: StepData, allFormData?: any, stepSpecificFormData?: any) => Promise<string | null | boolean | undefined>;
-    /**
-     * Handler that is called when the form data changes.
-     */
-    onFormDataChange?: (allFormData: any, stepSpecificFormData: any, step: StepData, index: number) => void;
-    /**
-     * Show or hide the form footer
-     */
-    showFooter?: boolean;
-    /**
-     * Data to use for prefilling forms with data.
-     * Useful when you want to prefill a form with data from another source.
-     * The format of the data maps a step id to the prefill data. Depending on the implementation of the given step type,
-     * the value of the data will follow a different structure.
-     *
-     * For `type` multiInputStep, the value contains another map similar to the structure returned from `onFormDataChange`
-     */
-    prefillData?: Record<string, any>;
-    /**
-     * Whether to update the url when the page changes in multi-page forms. If enabled, the current url will be updated with the
-     * current step id in the following format: <my_url>?p=<current_step_id>
-     *
-     * This is useful when wanting to capture URL changes with third-party tracking tools.
-     *
-     * Default is false.
-     */
-    updateUrlOnPageChange?: boolean;
-}
-declare const FrigadeForm: FC<FrigadeFormProps>;
-
-interface FrigadeGuideProps extends DefaultFrigadeFlowProps {
-    title: string;
-    primaryColor?: string;
-}
-declare const FrigadeGuide: FC<FrigadeGuideProps>;
-
-type ToolTipPosition = 'left' | 'right' | 'auto';
-interface ToolTipData extends StepData {
-    selector?: string;
-    subtitleStyle?: CSSProperties;
-    titleStyle?: CSSProperties;
-    buttonStyle?: CSSProperties;
-}
-
-interface FrigadeTourProps extends Omit<DefaultFrigadeFlowProps, 'flowId'> {
-    /**
-     * @ignore
-     */
-    steps?: ToolTipData[];
-    onDismiss?: () => void;
-    onComplete?: () => void;
-    tooltipPosition?: ToolTipPosition;
-    /**
-     * Whether to show the highlight (the small circle/ping) or not. Defaults to true.
-     */
-    showHighlight?: boolean;
-    /**
-     * Whether to show more than one tooltip at a time. Defaults to false.
-     */
-    showTooltipsSimultaneously?: boolean;
-    /**
-     * @ignore
-     */
-    buttonStyle?: CSSProperties;
-    /**
-     * Offset to apply to all tooltips. If you only wish to apply an offset to a single tooltip you can use `props.offset` in the config.yml instead.
-     */
-    offset?: {
-        x: number;
-        y: number;
-    };
-    visible?: boolean;
-    /**
-     * @ignore
-     */
-    containerStyle?: CSSProperties;
-    customVariables?: {
-        [key: string]: string | number | boolean;
-    };
-    /**
-     * @ignore
-     */
-    selectedStep?: number;
-    customStepTypes?: Record<string, (props: {
-        stepData: StepData;
-        primaryColor: string;
-    }) => React__default.ReactNode>;
-    appearance?: Appearance;
-    /**
-     * Shows a close button in the top right corner of the tooltip. Depending on dismissBehavior, it will either end the entire flow or just the current step.
-     */
-    dismissible?: boolean;
-    primaryColor?: string;
-    /**
-     * If true, the tooltip will only show the highlight and not the tooltip itself.
-     * Clicking the highlight will reveal it.
-     */
-    showHighlightOnly?: boolean;
-    /**
-     * If true, a step counter will show up in the tooltip.
-     */
-    showStepCount?: boolean;
-    /**
-     * `skip-flow` (default): Completes the entire flow/tour when a single tooltip is dismissed.
-     * `complete-step`: Completes the current step when a tooltip is dismissed. The user can continue in the tour.
-     */
-    dismissBehavior?: 'skip-flow' | 'complete-step';
-    /**
-     * @ignore
-     */
-    showFrigadeBranding?: boolean;
-    /**
-     * If true, the tour will go to the next existing step/tip if the current selector element is not found on the page.
-     * Be careful with this, as it can lead to unexpected behavior of tooltip ordering if the selector is slow to load on the page.
-     * Defaults to false.
-     */
-    skipIfNotFound?: boolean;
-    /**
-     * How to position the tooltips with CSS. Defaults to `absolute`.
-     * @ignore
-     */
-    cssPosition?: 'fixed' | 'absolute' | 'static';
-}
-declare const FrigadeTour: FC<FrigadeTourProps & {
-    flowId: string;
-    initialSelectedStep?: number;
-}>;
-
-interface FrigadeSupportWidgetProps extends DefaultFrigadeFlowProps {
-    type?: 'floating' | 'inline';
-    visible?: boolean;
-    title?: string;
-}
-declare const FrigadeSupportWidget: FC<FrigadeSupportWidgetProps>;
-
-interface FrigadeEmbeddedTipProps extends DefaultFrigadeFlowProps {
-    dismissible?: boolean;
-    /**
-     * Handler for when the container is clicked
-     */
-    onClick?: () => void;
-}
-declare const FrigadeEmbeddedTip: React__default.FC<FrigadeEmbeddedTipProps>;
-
-type FrigadeBannerType = 'full-width' | 'square';
-interface FrigadeBannerProps extends DefaultFrigadeFlowProps {
-    /**
-     * full-width: Full width banner, useful in top of the page.
-     *
-     * square: Square sized banner, useful in sidebars
-     */
-    type?: FrigadeBannerType;
-    title?: string;
-    subtitle?: string;
-    onDismiss?: () => void;
-    /**
-     * Icon to use in the banner
-     */
-    icon?: React__default.ReactNode;
-    /**
-     * Handler for when the banner container is clicked
-     */
-    onClick?: () => void;
-}
-declare const FrigadeBanner: React__default.FC<FrigadeBannerProps>;
-
-interface FrigadeNPSSurveyProps extends DefaultFrigadeFlowProps {
-    dismissible?: boolean;
-    type?: 'inline' | 'modal';
-}
-declare const FrigadeNPSSurvey: React__default.FC<FrigadeNPSSurveyProps>;
-
-interface FrigadeAnnouncementProps extends DefaultFrigadeFlowProps {
-    dismissible?: boolean;
-    /**
-     * Indicates the position of the modal if the form type is a modal. Default is center.
-     */
-    modalPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center' | 'inline';
-    /**
-     * Show a pagination indicator at the bottom of the announcement when using more than 1 page. Default is true.
-     */
-    showPagination?: boolean;
-    /**
-     * Whether to allow the user to navigate back to previous steps. Default is false.
-     * The title of the button can be controlled by the `backButtonTitle` prop on the step.
-     */
-    allowBackNavigation?: boolean;
-}
-declare const FrigadeAnnouncement: React__default.FC<FrigadeAnnouncementProps>;
-
-declare function useFlowOpens(): {
-    getOpenFlowState: (flowId: string, defaultValue?: boolean) => boolean;
-    setOpenFlowState: (flowId: string, isOpen: boolean) => void;
-    resetOpenFlowState: (flowId: string) => void;
-    hasOpenModals: (currentFlowId?: string) => boolean;
-    setKeepCompletedFlowOpenDuringSession: (flowId: string) => void;
-    shouldKeepCompletedFlowOpenDuringSession: (flowId: string) => boolean;
-};
-
-declare function useUser(): {
-    readonly userId: string | null;
-    readonly setUserId: React__default.Dispatch<React__default.SetStateAction<string | null>>;
-    readonly setUserIdWithProperties: (userId: string, properties?: EntityProperties) => Promise<void>;
-    readonly addPropertiesToUser: (properties: EntityProperties) => Promise<void>;
-    readonly trackEventForUser: (event: string, properties?: EntityProperties) => Promise<void>;
-    readonly linkExistingGuestSessionToUser: (userId: string) => Promise<void>;
-};
-
-declare function useOrganization(): {
-    readonly organizationId: string | null;
-    readonly setOrganizationId: React__default.Dispatch<React__default.SetStateAction<string | null>>;
-    readonly setOrganizationIdWithProperties: (organizationId: string, properties?: EntityProperties) => Promise<void>;
-    readonly addPropertiesToOrganization: (properties: EntityProperties) => Promise<void>;
-    readonly trackEventForOrganization: (event: string, properties?: EntityProperties) => Promise<void>;
-};
-
-interface PublicUserFlowState {
-    flowId: string;
-    flowState: 'COMPLETED_FLOW' | 'STARTED_FLOW' | 'NOT_STARTED_FLOW';
-    lastStepId: string;
-    userId: string;
-    foreignUserId: string;
-    stepStates: object;
-    shouldTrigger: boolean;
-}
-declare function useUserFlowStates(): {
-    userFlowStatesData: PublicUserFlowState[];
-    isLoadingUserFlowStateData: boolean;
-    mutateUserFlowState: () => any;
-    optimisticallyMarkFlowCompleted: (flowId: string) => void;
-    optimisticallyMarkFlowSkipped: (flowId: string) => void;
-    optimisticallyMarkFlowNotStarted: (flowId: string) => void;
-    optimisticallyMarkStepCompleted: (flowId: string, stepId: string, flowResponse: FlowResponse) => void;
-    optimisticallyMarkStepNotStarted: (flowId: string, stepId: string, flowResponse: FlowResponse) => void;
-    optimisticallyMarkStepStarted: (flowId: string, stepId: string, flowResponse: FlowResponse) => void;
-    error: any;
-};
-
-declare function Label({ title, required, appearance, }: {
-    title?: string;
-    required: boolean;
-    appearance?: Appearance;
-}): React__default.JSX.Element;
-
-declare function TextField({ formInput, customFormTypeProps, onSaveInputData, setFormValidationErrors, inputData, }: FormInputProps): React__default.JSX.Element;
-
-interface Overrides extends Record<string, Overrides | CSSProperties> {
+    userId?: string;
 }
-type BoxProps<T extends ElementType = 'div'> = {
-    as?: T;
-    css?: Record<string, any>;
-    children?: ReactNode;
-    overrides?: Overrides;
-} & BorderProps & ColorProps & Exclude<LayoutProps, 'size'> & ShadowProps & SpaceProps & TypographyProps & ComponentPropsWithoutRef<T>;
-declare const Box: <T extends React__default.ElementType<any> = "div">({ as, children, overrides, ...rest }: any) => React__default.JSX.Element;
+declare function Provider({ apiKey, children, config, theme }: ProviderProps): react_jsx_runtime.JSX.Element;
 
-interface ButtonProps extends BoxProps {
-    title: string;
+type TextVariant = 'Display1' | 'Display2' | 'H1' | 'H2' | 'H3' | 'H4' | 'Body1' | 'Body2' | 'Caption';
+interface TextProps extends BoxProps {
+    variant?: TextVariant;
 }
-declare const Button: React.FC<ButtonProps> & {
+declare function BaseText({ as, children, css, variant, ...props }: TextProps): react_jsx_runtime.JSX.Element;
+declare const Text: typeof BaseText & {
     [k: string]: {
-        (props: ButtonProps): React.JSX.Element;
+        (props: TextProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 };
 
-type CheckBoxType = 'square' | 'round';
-interface CheckBoxProps {
-    value: boolean;
-    type?: CheckBoxType;
-    primaryColor?: string;
-    progress?: number;
-    appearance?: Appearance;
-    className?: string;
-    style?: React__default.CSSProperties;
+interface MediaProps extends BoxProps {
+    src: string;
+    type: 'image' | 'video';
 }
-declare const CheckBox: FC<CheckBoxProps>;
 
-interface ProgressRingProps {
-    fillColor: string;
-    size: number;
-    bgColor?: string;
-    percentage: number;
-    className?: string;
+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;
+    spotlight?: boolean;
     style?: React__default.CSSProperties;
-    children?: React__default.ReactNode;
 }
-declare const ProgressRing: FC<ProgressRingProps>;
-
-declare const textVariants: {
-    readonly Display1: {
-        readonly fontSize: "5xl";
-        readonly fontWeight: "bold";
-        readonly letterSpacing: "md";
-        readonly lineHeight: "4xl";
-    };
-    readonly Display2: {
-        readonly fontSize: "4xl";
-        readonly fontWeight: "bold";
-        readonly letterSpacing: "md";
-        readonly lineHeight: "3xl";
-    };
-    readonly H1: {
-        readonly fontSize: "3xl";
-        readonly fontWeight: "bold";
-        readonly letterSpacing: "md";
-        readonly lineHeight: "2xl";
-    };
-    readonly H2: {
-        readonly fontSize: "2xl";
-        readonly fontWeight: "bold";
-        readonly letterSpacing: "md";
-        readonly lineHeight: "xl";
-    };
-    readonly H3: {
-        readonly fontSize: "xl";
-        readonly fontWeight: "bold";
-        readonly letterSpacing: "md";
-        readonly lineHeight: "lg";
-    };
-    readonly H4: {
-        readonly fontSize: "lg";
-        readonly fontWeight: "bold";
-        readonly letterSpacing: "md";
-        readonly lineHeight: "md";
-    };
-    readonly Body1: {
-        readonly fontSize: "md";
-        readonly fontWeight: "regular";
-        readonly letterSpacing: "md";
-        readonly lineHeight: "md";
-    };
-    readonly Body2: {
-        readonly fontSize: "sm";
-        readonly fontWeight: "regular";
-        readonly letterSpacing: "md";
-        readonly lineHeight: "md";
-    };
-    readonly Caption: {
-        readonly fontSize: "xs";
-        readonly fontWeight: "regular";
-        readonly letterSpacing: "md";
-        readonly lineHeight: "sm";
-    };
-};
-
-type TextVariant = keyof typeof textVariants;
-interface BaseTextProps extends BoxProps, Partial<Pick<FontProps, 'fontWeight'>> {
-    variant?: TextVariant;
+declare function Tooltip({ anchor, children, css, spotlight, style, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare namespace Tooltip {
+    var Close: ({ css, ...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;
 }
-declare const Text: React__default.FC<BaseTextProps> & {
-    [k: string]: {
-        (props: BaseTextProps): React__default.JSX.Element;
-        displayName: string;
-    };
-};
-
-declare const ProgressBar: ({ count, total, display, textLocation, style, textStyle, appearance, }: {
-    count: number;
-    total: number;
-    bgColor?: string;
-    display?: 'count' | 'percent' | 'compact';
-    textLocation?: 'top' | 'left';
-    style?: CSSProperties;
-    textStyle?: CSSProperties;
-    appearance?: Appearance;
-}) => React__default.JSX.Element;
 
-declare const tokens: {
-    colors: {
-        neutral: {
-            foreground: string;
-        };
-        primary: {
-            background: string;
-            foreground: string;
-            inverted: string;
-        };
-        negative: {
-            foreground: 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;
-        red500: string;
-    };
-    fonts: {
-        default: string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        '4xl': string;
-        '5xl': string;
-    };
-    fontWeights: {
-        regular: number;
-        semibold: number;
-        bold: number;
-    };
-    letterSpacings: {
-        md: string;
-    };
-    lineHeights: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        '4xl': string;
-    };
-    radii: {
-        md: string;
-        lg: string;
-        round: string;
-    };
-    shadows: {
-        md: string;
-    };
-    space: {
-        [k: string]: string;
-    };
-    components: {
-        Button: {
-            readonly Primary: {
-                readonly backgroundColor: "primary.background";
-                readonly color: "primary.foreground";
-                readonly '&:hover': {
-                    readonly backgroundColor: "blue400";
-                };
-            };
-            readonly Secondary: {
-                readonly backgroundColor: "white";
-                readonly border: "1px solid";
-                readonly borderColor: "gray800";
-                readonly color: "neutral.foreground";
-                readonly '&:hover': {
-                    readonly backgroundColor: "blue900";
-                };
-            };
-            readonly Link: {
-                readonly backgroundColor: "transparent";
-                readonly color: "primary.inverted";
-            };
-            readonly Plain: {
-                readonly backgroundColor: "transparent";
-                readonly color: "neutral.foreground";
-            };
-        };
-        Text: {
-            readonly Display1: {
-                readonly fontSize: "5xl";
-                readonly fontWeight: "bold";
-                readonly letterSpacing: "md";
-                readonly lineHeight: "4xl";
-            };
-            readonly Display2: {
-                readonly fontSize: "4xl";
-                readonly fontWeight: "bold";
-                readonly letterSpacing: "md";
-                readonly lineHeight: "3xl";
-            };
-            readonly H1: {
-                readonly fontSize: "3xl";
-                readonly fontWeight: "bold";
-                readonly letterSpacing: "md";
-                readonly lineHeight: "2xl";
-            };
-            readonly H2: {
-                readonly fontSize: "2xl";
-                readonly fontWeight: "bold";
-                readonly letterSpacing: "md";
-                readonly lineHeight: "xl";
-            };
-            readonly H3: {
-                readonly fontSize: "xl";
-                readonly fontWeight: "bold";
-                readonly letterSpacing: "md";
-                readonly lineHeight: "lg";
-            };
-            readonly H4: {
-                readonly fontSize: "lg";
-                readonly fontWeight: "bold";
-                readonly letterSpacing: "md";
-                readonly lineHeight: "md";
-            };
-            readonly Body1: {
-                readonly fontSize: "md";
-                readonly fontWeight: "regular";
-                readonly letterSpacing: "md";
-                readonly lineHeight: "md";
-            };
-            readonly Body2: {
-                readonly fontSize: "sm";
-                readonly fontWeight: "regular";
-                readonly letterSpacing: "md";
-                readonly lineHeight: "md";
-            };
-            readonly Caption: {
-                readonly fontSize: "xs";
-                readonly fontWeight: "regular";
-                readonly letterSpacing: "md";
-                readonly lineHeight: "sm";
-            };
-        };
-    };
-};
+interface TourProps extends TooltipProps {
+    flowId: string;
+}
+declare function Tour({ flowId, ...props }: TourProps): react_jsx_runtime.JSX.Element;
 
-export { Appearance, Box, Button, CheckBox, CustomFormTypeProps, EntityProperties, Flow, FlowResponse, FlowType, FormInputProps, FormInputType, Label as FormLabel, TextField as FormTextField, FormValidationError, FrigadeAnnouncement, FrigadeAnnouncementProps, FrigadeBanner, FrigadeBannerProps, FrigadeChecklist, FrigadeChecklistProps, DefaultAppearance as FrigadeDefaultAppearance, FrigadeEmbeddedTip, FrigadeEmbeddedTipProps, FrigadeForm, FrigadeFormProps, FrigadeGuide, FrigadeHeroChecklist, FrigadeNPSSurvey, FrigadeNPSSurveyProps, FrigadeProgressBadge, FrigadeProgressBadgeProps, FrigadeProvider, FrigadeSupportWidget, BaseTheme as FrigadeTheme, FrigadeTour, FrigadeTourProps, ProgressBar, ProgressRing, PublicStepState, StepContentProps, StepData, Text, tokens, useFlowOpens, useFlowResponses, useFlows, useOrganization, useUser, useUserFlowStates };
+export { Box, BoxProps, Button, ButtonProps, Flex, Provider, ProviderProps, Text, TextProps, Tooltip, TooltipProps, Tour, TourProps };