import { IThemeGenerator, IThemeConfig, ISpace, DefaultPageType, SimpleOnboarding } from '@flatfile/embedded-utils';
export { ISidebarConfig, ISpace, ISpaceInfo, IThemeConfig, IUserInfo } from '@flatfile/embedded-utils';
import * as React from 'react';
import React__default, { ReactNode, JSX, MutableRefObject, RefObject } from 'react';
import { Flatfile } from '@flatfile/api';
import FlatfileListener, { FlatfileEvent } from '@flatfile/listener';
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
import { TRecordDataWithLinks, TPrimitive } from '@flatfile/hooks';
import { FlatfileRecord } from '@flatfile/plugin-record-hook';

/**
 * @name makeTheme
 * @description Helper func to generate theme config to be passed to a workbook component
 *
 * @param { IThemeGenerator }
 * @returns { ThemeConfig }
 */
declare const makeTheme: (props: IThemeGenerator) => IThemeConfig;

type IReactInitSpaceProps = ISpace & {
    activated: boolean;
    error?: (error: Error | string) => React__default.ReactNode;
    loading?: React__default.ReactElement;
};

type IReactSpaceProps = ISpace & {
    error?: (error: Error | string) => React__default.ReactElement;
    loading?: React__default.ReactElement;
    sheets?: Flatfile.SheetConfig;
};

type StyleSheetOptions = {
    insertAt?: 'top';
    nonce?: string;
};

type IFrameTypes = Partial<Pick<ISpace, 'iframeStyles' | 'mountElement' | 'exitText' | 'exitTitle' | 'exitPrimaryButtonText' | 'exitSecondaryButtonText' | 'displayAsModal' | 'closeSpace' | 'spaceUrl'> & {
    preload?: boolean;
    resetOnClose?: boolean;
    styleSheetOptions?: StyleSheetOptions;
    debug?: boolean;
}>;

type Exclusive<T, U> = (T & Partial<Record<Exclude<keyof U, keyof T>, never>>) | (U & Partial<Record<Exclude<keyof T, keyof U>, never>>);
interface BaseSpace {
    children: ReactNode;
    environmentId?: string;
    apiUrl?: string;
    config?: IFrameTypes;
}
interface CreateSpaceWithPublishableKey extends BaseSpace {
    publishableKey: string;
}
interface ReusedSpace extends BaseSpace {
    accessToken: string;
}
type ExclusiveFlatfileProviderProps = Exclusive<CreateSpaceWithPublishableKey, ReusedSpace>;

type ClosePortalOptions = {
    reset?: boolean;
};

declare const EmbeddedIFrameWrapper: (props: Partial<IFrameTypes> & {
    handleCloseInstance: () => void;
}) => JSX.Element;

type CreateNewSpace = Partial<Flatfile.SpaceConfig>;
type ReUseSpace = Partial<Flatfile.SpaceConfig> & {
    id: string;
    accessToken: string;
};
declare const DEFAULT_CREATE_SPACE: {
    document: undefined;
    workbook: undefined;
    space: {
        name: string;
        labels: string[];
        namespace: string;
        metadata: {
            sidebarConfig: {
                showSidebar: boolean;
            };
        };
    };
};
interface FlatfileContextType {
    publishableKey?: string;
    environmentId?: string;
    apiUrl: string;
    open: boolean;
    onClose: MutableRefObject<null | undefined | (() => void)>;
    setOpen: (open: boolean) => void;
    space?: CreateNewSpace | ReUseSpace;
    sessionSpace?: any;
    setSessionSpace: (space: any) => void;
    listener: FlatfileListener;
    setListener: (listener: FlatfileListener) => void;
    accessToken?: string;
    setAccessToken: (accessToken?: string | null) => void;
    addSheet: (config: any) => void;
    removeSheet: (sheetSlug: string) => void;
    updateSheet: (sheetSlug: string, sheetUpdates: Partial<Flatfile.SheetConfig>) => void;
    updateWorkbook: (config: any) => void;
    updateDocument: (config: any) => void;
    createSpace: any;
    setCreateSpace: (config: any) => void;
    updateSpace: (config: any) => void;
    defaultPage: DefaultPageType | undefined;
    setDefaultPage: (object: any) => void;
    resetSpace: (options?: ClosePortalOptions) => void;
    config?: IFrameTypes;
    iframe: RefObject<HTMLIFrameElement>;
    ready: boolean;
}
declare const FlatfileContext: React.Context<FlatfileContextType>;
declare const useFlatfileInternal: () => FlatfileContextType;

declare const FlatfileProvider: React__default.FC<ExclusiveFlatfileProviderProps>;

var css_248z = ":root {\n  --ff-brand-font-sans-serif: \"Proxima Nova\", \"Helvetica\", sans-serif;\n  --color-electric-800: #3b2fc9;\n  --color-electric-700: #4c48ef;\n  --color-pigeon-900: #303744;\n  --color-pigeon-800: #404857;\n  --color-pigeon-700: #616a7d;\n  --color-pigeon-600: #8b93a4;\n  --color-pigeon-500: #b4bccc;\n  --color-pigeon-400: #cad0dc;\n  --color-pigeon-300: #d7dee8;\n  --color-pigeon-200: #e8edf4;\n  --color-pigeon-100: #f6f8fc;\n  --color-pigeon-primary: var(--color-pigeon-800);\n  --ff-text-color: var(--color-pigeon-primary);\n  --ff-text-font: var(--ff-brand-font-sans-serif);\n  --ff-primary-color: #4c48ef;\n  --ff-secondary-color: #616a7d;\n  --ff-dialog-border-radius: 4px;\n  --ff-border-radius: 5px;\n  --ff-bg-fade: rgba(0, 0, 0, 0.2);\n  --size-base: 15px;\n}\n\n@font-face {\n  font-family: \"Proxima Nova\";\n  src: local(\"Proxima Nova\"), url(\"../fonts/proxima-nova/Proxima-Nova_Regular.otf\") format(\"truetype\");\n  font-weight: 400;\n  font-style: normal;\n}\n@font-face {\n  font-family: \"Proxima Nova\";\n  src: local(\"Proxima Nova\"), url(\"../fonts/proxima-nova/Proxima-Nova_Semibold.otf\") format(\"truetype\");\n  font-weight: 600;\n  font-style: normal;\n}\n.flatfile_iframe-wrapper {\n  box-sizing: border-box;\n  color: var(--ff-text-color);\n  font-family: var(--ff-text-font);\n  font-size: var(--size-base);\n  line-height: 1.5;\n  margin: 0;\n  transition: opacity 0.25s ease-in-out;\n}\n\n.flatfile_iframe-wrapper.flatfile_displayAsModal {\n  height: 100%;\n  height: 100vh;\n  width: 100%;\n  width: 100vw;\n}\n\n.flatfile-close-button svg {\n  fill: lightgray;\n  width: 10px;\n}\n\n.flatfile-close-button {\n  position: relative;\n  top: 20px;\n  right: -20px;\n  width: 25px;\n  height: 25px;\n  border-radius: 100%;\n  cursor: pointer;\n  border: none;\n  background: rgb(29, 31, 74);\n  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);\n  transition: 0.25s ease-in-out;\n}\n.flatfile-close-button:hover {\n  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);\n}\n\n.flatfile_button-group {\n  display: flex;\n  justify-content: flex-end;\n}\n.flatfile_button-group > div,\n.flatfile_button-group > button {\n  align-items: center;\n  appearance: button;\n  border-radius: 2px;\n  column-gap: 8px;\n  cursor: pointer;\n  display: flex;\n  font-size: 13.3333px;\n  font-weight: 400;\n  justify-content: center;\n  letter-spacing: normal;\n  line-height: normal;\n  margin-left: 15px;\n  padding: 8px 12px;\n  row-gap: 8px;\n  tab-size: 4;\n  text-align: center;\n  transition: background-color 0.2s ease 0s;\n  word-spacing: 0px;\n  border: none;\n  -webkit-box-align: center;\n  -webkit-box-pack: center;\n}\n.flatfile_button-group > div > div {\n  cursor: pointer;\n  display: block;\n  font-family: var(--text-font);\n  font-feature-settings: normal;\n  font-size: 14px;\n  font-weight: 600;\n  height: 24px;\n  letter-spacing: 0.14px;\n  line-height: 24px;\n  margin: 0 8px;\n  tab-size: 4;\n  text-align: center;\n}\n\n.flatfile_primary {\n  background-color: var(--color-electric-700, #4c48ef);\n  color: #fff;\n}\n.flatfile_primary:hover {\n  background-color: var(--color-electric-800, #3b2fc9);\n}\n\n.flatfile_secondary {\n  border: 1px solid var(--color-pigeon-300, #d7dee8);\n  color: var(--ff-text-color, #404857);\n}\n.flatfile_secondary:hover {\n  background-color: var(--color-pigeon-200, #e8edf4);\n}\n\n.flatfile_modal-text {\n  display: flex;\n  flex-direction: column;\n  gap: 1.75em;\n  font-size: 14px;\n  line-height: 1.25em;\n  margin-bottom: 2em;\n  color: var(--color-pigeon-600);\n}\n\n.flatfile_modal-heading {\n  font-size: 1.225em;\n  font-weight: 600;\n  margin-bottom: 0.4em;\n  color: var(--ff-text-color);\n}\n\n.flatfile_inner-shell {\n  box-sizing: border-box;\n  display: block;\n  padding: 1.5em;\n  tab-size: 4;\n  text-align: left;\n  background: #fff;\n  min-width: 500px;\n  max-width: 500px;\n}\n\n.flatfile_close-confirm-modal-inner {\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  min-height: 100%;\n  padding: 0px;\n  tab-size: 4;\n  text-align: left;\n}\n\n.flatfile_outer-shell {\n  background-color: rgba(64, 72, 87, 0.2);\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow-y: auto;\n  position: absolute;\n  tab-size: 4;\n  top: 0;\n  width: 100%;\n  z-index: 1200;\n}\n\n.ff_error_container {\n  display: flex;\n  flex-direction: column;\n  margin: 16px;\n}\n\n.ff_error_heading {\n  display: flex;\n  margin-bottom: 0;\n}\n\n.ff_spinner {\n  border: 4px solid rgba(255, 255, 255, 0.7);\n  border-top: 4px solid var(--ff-primary-color);\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  animation: spin 1s linear infinite;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 999;\n}\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}";
styleInject(css_248z);

declare const InitSpace: (props: IReactInitSpaceProps) => JSX.Element;

declare const SpaceContents: (props: ISpace & {
    spaceId: string;
    spaceUrl: string;
    accessToken: string;
    handleCloseInstance: () => void;
}) => JSX.Element;

type SheetProps = {
    config: Flatfile.SheetConfig;
    onSubmit?: SimpleOnboarding['onSubmit'];
    submitSettings?: SimpleOnboarding['submitSettings'];
    onRecordHook?: SimpleOnboarding['onRecordHook'];
    defaultPage?: boolean;
};
/**
 * `Sheet` component for Flatfile integration.
 *
 * This component allows you to integrate Flatfile's data import capabilities into your React application.
 * It provides a way to configure and handle the import process, including submitting data and handling records.
 *
 * @component
 * @example
 * const config = {
 *   name: 'Contacts',
 *   slug: 'contacts',
 *   fields: [
 *     { label: 'First Name', key: 'firstName', type: 'string', },
 *     { label: 'Last Name', key: 'lastName', type: 'string', },
 *     { label: 'Email', key: 'email', type: 'string', contraints: [{ type: 'unique' }] }
 *   ]
 * }
 *
 * const onSubmit = async (results) => {
 *   console.log('Data submitted:', results.data)
 * }
 *
 * const onRecordHook = async (record, event) => {
 *   if (!record.email.includes('@example.com')) {
 *     return {
 *       email: {
 *         value: record.email,
 *         info: `Only "@example.com" emails are allowed`,
 *         level: 'error'
 *       }
 *     }
 *   }
 * }
 *
 * <Sheet config={config} onSubmit={onSubmit} onRecordHook={onRecordHook} />
 *
 * @param {Object} props - Component props
 * @param {Flatfile.SheetConfig} props.config - Configuration for the Flatfile import
 * @param {Function} [props.onSubmit] - Callback function to handle data submission
 * @param {Object} [props.submitSettings] - Settings for data submission
 * @param {Function} [props.onRecordHook] - Callback function to handle record manipulation
 * @param {Boolean} [props.defaultPage] - Sets this as the default Page that the Space opens up to
 */
declare const Sheet: React__default.FC<SheetProps>;

type onRecordHook<T> = (record: T, event?: FlatfileEvent) => FlatfileRecord;
type HookConfig<T> = [string, onRecordHook<T>] | [onRecordHook<T>];
type onRecordHooks<T> = HookConfig<T>[];
type WorkbookProps = Partial<{
    config: Flatfile.CreateWorkbookConfig;
    onSubmit: SimpleOnboarding['onSubmit'];
    submitSettings: SimpleOnboarding['submitSettings'];
    onRecordHooks: onRecordHooks<FlatfileRecord<TRecordDataWithLinks<TPrimitive>>>;
    children: React__default.ReactNode;
}>;
/**
 * `Workbook` component for integrating Flatfile's import functionality within a React application.
 * This component allows for the configuration of a Flatfile workbook, submission settings, and record hooks.
 *
 * @component
 * @example
 * const config = {
 *   name: 'Example Workbook',
 *   sheets: []
 * }
 * const onSubmit = (data) => console.log(data)
 * const submitSettings = {...}
 * const onRecordHooks = [
 *   ['slug', (record) => {
 *      record.set('key', 'foo')
 *      return record
 *   }]
 * ]
 *
 * <Workbook
 *   config={config}
 *   onSubmit={onSubmit}
 *   submitSettings={submitSettings}
 *   onRecordHooks={onRecordHooks}
 * >
 *   <Sheet config={sheetConfig} />
 * </Workbook>
 *
 * @param {WorkbookProps} props - The properties passed to the Workbook component.
 * @param {Flatfile.CreateWorkbookConfig} [props.config] - Configuration object for the Flatfile workbook.
 * @param {Function} [props.onSubmit] - Callback function to be executed upon submission of the workbook.
 * @param {Object} [props.submitSettings] - Settings object for workbook submission.
 * @param {onRecordHooks<FlatfileRecord<TRecordDataWithLinks<TPrimitive>>>} [props.onRecordHooks] - Array of hooks to be executed on each record.
 * @param {React.ReactNode} [props.children] - Child components to be rendered within the Workbook component.
 * @returns {React.ReactElement} A React component that renders the Flatfile workbook.
 */
declare const Workbook: (props: WorkbookProps) => React__default.JSX.Element;

type SpaceProps = {
    id?: string;
    config?: Flatfile.SpaceConfig;
    children?: React__default.ReactNode;
};
/**
 * `Space` component for integrating Flatfile's space functionality within a React application.
 * This component allows for the configuration of a Flatfile space and renders its children within the context of that space.
 *
 * @component
 * @example
 * const spaceConfig = {
 *   name: 'Example Space',
 *   metadata: {},
 * }
 *
 * <Space config={spaceConfig}>
 *   <Workbook config={workbookConfig}>
 *   <Document config={documentConfig}>
 * </Space>
 *
 * @param {SpaceProps} props - The properties passed to the Space component.
 * @param {string} [props.id] - Optional ID for the space component.
 * @param {Flatfile.SpaceConfig} props.config - Configuration object for the Flatfile space.
 * @param {React.ReactNode} [props.children] - Child components to be rendered within the Space component.
 * @returns {React.ReactElement} A React component that renders the Flatfile space.
 */
declare const Space: (props: SpaceProps) => React__default.JSX.Element;

type DocumentProps = {
    config: Flatfile.DocumentConfig;
    defaultPage?: boolean;
};
/**
 * `Document` component responsible for updating the document configuration within the Flatfile context.
 * It utilizes the `useDeepCompareEffect` hook to deeply compare the `config` prop changes and update the document accordingly.
 *
 * @component
 * @example
 * const documentConfig = {
 *   title: "Document Title",
 *   body: "Example Body",
 * }
 * return <Document config={documentConfig} />
 *
 * @param {DocumentProps} props - The props for the Document component.
 * @param {Flatfile.DocumentConfig} props.config - The configuration object for the document.
 */
declare const Document: (props: DocumentProps) => React__default.JSX.Element;

interface UseFlatfileOptions {
    onClose?: () => void;
}
declare const useFlatfile: (useFlatfileOptions?: UseFlatfileOptions) => {
    openPortal: () => void;
    closePortal: (options?: ClosePortalOptions) => void;
    open: boolean;
    setListener: (listener: any) => void;
    listener: any;
};

declare function useListener(cb: FlatfileListener | ((cb: FlatfileListener) => void), dependencies?: any[]): void;

declare function usePlugin(plugin?: (cb: FlatfileListener) => void, dependencies?: any[]): void;

declare function useEvent(eventType: string, callback: (event: FlatfileEvent) => void | Promise<void>, dependencies?: any[]): void;
declare function useEvent(eventType: string, filter: Record<string, any>, callback: (event: FlatfileEvent) => void | Promise<void>, dependencies?: any[]): void;

/**
 * @name useCreateListener
 * @description Listener
 * @param { Pick<ISpace, 'accessToken'| 'listener'> }
 */
type FlatfileListenerInstance = {
    dispatchEvent: (event: any) => void;
};
/**
 * @deprecated - use useListener, useEvent and usePlugin hooks instead
 * This hook is used to create a listener instance
 **/
declare const useCreateListener: ({ accessToken, listener, apiUrl, }: Pick<IReactSpaceProps, "listener"> & {
    accessToken: string | null;
    apiUrl?: string | undefined;
}) => FlatfileListenerInstance;

type IReactSimpleOnboarding = SimpleOnboarding & {
    error?: (error: Error | string) => React__default.ReactElement;
    loading?: React__default.ReactElement;
};

/**
 * @deprecated - use FlatfileProvider and Space components instead
 * This hook is used to initialize a space and return the Space component
 */
declare const usePortal: (props: IReactSimpleOnboarding) => JSX.Element | null;

type IUseSpace = {
    OpenEmbed: () => Promise<void>;
    Space: () => JSX.Element;
};
/**
 * @deprecated - use FlatfileProvider and Space components instead
 * This hook is used to initialize a space and return the Space component
 */
declare const initializeFlatfile: (props: IReactSpaceProps) => IUseSpace;

/**
 * @deprecated - use FlatfileProvider and Space components instead
 * This hook is used to initialize a space and return the Space component
 */
declare const useSpace: (props: IReactSpaceProps) => JSX.Element | null;

export { DEFAULT_CREATE_SPACE, Document, EmbeddedIFrameWrapper, FlatfileContext, type FlatfileContextType, FlatfileProvider, InitSpace, Sheet, Space, SpaceContents, Workbook, initializeFlatfile, makeTheme, type onRecordHook, type onRecordHooks, useCreateListener, useEvent, useFlatfile, useFlatfileInternal, useListener, usePlugin, usePortal, useSpace };
