@thunderid/react 1.5.0 → 1.6.0

package/dist/cjs/components/auth/InviteUser/BaseInviteUser.styles.cjs

@@ -0,0 +1,65 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/components/auth/InviteUser/BaseInviteUser.styles.ts
+/**
+* Creates styles for the BaseInviteUser component
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
+	const card = require_emotion.css`
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+      gap: calc(${theme.vars.spacing.unit} * 2);
+      min-width: 420px;
+      font-family: ${theme.vars.typography.fontFamily};
+    `;
+	const header = require_emotion.css`
+      gap: 0;
+      align-items: center;
+    `;
+	const title = require_emotion.css`
+      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
+      color: ${theme.vars.colors.text.primary};
+    `;
+	const subtitle = require_emotion.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
+      color: ${theme.vars.colors.text.secondary};
+    `;
+	return {
+		card,
+		centeredSpinnerContainer: require_emotion.css`
+      display: flex;
+      justify-content: center;
+      padding: 2rem;
+    `,
+		centeredSpinnerContainerSmall: require_emotion.css`
+      display: flex;
+      justify-content: center;
+      padding: 1rem;
+    `,
+		errorContainer: require_emotion.css`
+      margin-bottom: 1rem;
+    `,
+		header,
+		subtitle,
+		title
+	};
+}, [
+	theme.vars.colors.background.surface,
+	theme.vars.colors.text.primary,
+	theme.vars.colors.text.secondary,
+	theme.vars.borderRadius.large,
+	theme.vars.spacing.unit,
+	theme.vars.typography.fontFamily,
+	colorScheme
+]);
+var BaseInviteUser_styles_default = useStyles;
+
+//#endregion
+exports.default = BaseInviteUser_styles_default;
+//# sourceMappingURL=BaseInviteUser.styles.cjs.map

package/dist/cjs/components/auth/InviteUser/BaseInviteUser.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInviteUser.styles.cjs","names":["card: string","header: string","title: string","subtitle: string"],"sources":["../../../../../src/components/auth/InviteUser/BaseInviteUser.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the BaseInviteUser component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      min-width: 420px;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const header: string = css`\n      gap: 0;\n      align-items: center;\n    `;\n\n    const title: string = css`\n      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const subtitle: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const centeredSpinnerContainer: string = css`\n      display: flex;\n      justify-content: center;\n      padding: 2rem;\n    `;\n\n    const centeredSpinnerContainerSmall: string = css`\n      display: flex;\n      justify-content: center;\n      padding: 1rem;\n    `;\n\n    const errorContainer: string = css`\n      margin-bottom: 1rem;\n    `;\n\n    return {\n      card,\n      centeredSpinnerContainer,\n      centeredSpinnerContainerSmall,\n      errorContainer,\n      header,\n      subtitle,\n      title,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.borderRadius.large,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,OAAe,mBAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;kBACnC,MAAM,KAAK,QAAQ,KAAK;;qBAErB,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,SAAiB,mBAAG;;;;CAK1B,MAAMC,QAAgB,mBAAG;yBACJ,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAG1C,MAAMC,WAAmB,mBAAG;4BACJ,MAAM,KAAK,QAAQ,KAAK;eACrC,MAAM,KAAK,OAAO,KAAK,UAAU;;AAmB5C,QAAO;EACL;EACA,0BAlBuC,mBAAG;;;;;EAmB1C,+BAb4C,mBAAG;;;;;EAc/C,gBAR6B,mBAAG;;;EAShC;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,oCAAe"}

package/dist/cjs/components/auth/InviteUser/InviteUser.cjs

@@ -0,0 +1,125 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useThunderID = require('../../../contexts/ThunderID/useThunderID.cjs');
+const require_useFetchUsers = require('../../../hooks/management/useFetchUsers.cjs');
+const require_useFetchAuthFlows = require('../../../hooks/auth/useFetchAuthFlows.cjs');
+const require_useFetchUserTypes = require('../../../hooks/management/useFetchUserTypes.cjs');
+const require_BaseInviteUser = require('./BaseInviteUser.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/auth/InviteUser/InviteUser.tsx
+/**
+* InviteUser component for initiating invite user flow.
+*
+* This component is designed for admin users in the thunder-develop app to:
+* 1. Select a user type (if multiple available)
+* 2. Enter user details (username, email)
+* 3. Generate an invite link for the end user
+*
+* The component uses the authenticated ThunderID SDK context to make API calls
+* with the admin's access token (requires 'system' scope).
+*
+* @example
+* ```tsx
+* import { InviteUser } from '@thunderid/react';
+*
+* const InviteUserPage = () => {
+*   const [inviteLink, setInviteLink] = useState<string>();
+*
+*   return (
+*     <InviteUser
+*       onInviteLinkGenerated={(link, executionId) => setInviteLink(link)}
+*       onError={(error) => console.error(error)}
+*     >
+*       {({ values, components, isLoading, handleInputChange, handleSubmit, inviteLink, isInviteGenerated }) => (
+*         <div>
+*           {isInviteGenerated ? (
+*             <div>
+*               <h2>Invite Link Generated!</h2>
+*               <p>{inviteLink}</p>
+*             </div>
+*           ) : (
+*             // Render form based on components
+*           )}
+*         </div>
+*       )}
+*     </InviteUser>
+*   );
+* };
+* ```
+*/
+const InviteUser = ({ onError, onFlowChange, className, children, size = "medium", variant = "outlined", showTitle = true, showSubtitle = true }) => {
+	const { http, baseUrl, endpoints, getAccessToken, isInitialized } = require_useThunderID.default();
+	const flowExecuteUrl = (0, __thunderid_browser.resolveResourceEndpoint)("flowExecute", { endpoints }) ?? `${baseUrl}/flow/execute`;
+	/**
+	* Initialize the invite user flow.
+	* Makes an authenticated request to /flow/execute with flowType: USER_ONBOARDING.
+	*/
+	const handleInitialize = async (payload) => {
+		return (await http.request({
+			data: {
+				...payload,
+				flowType: __thunderid_browser.EmbeddedFlowType.UserOnboarding,
+				verbose: true
+			},
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json"
+			},
+			method: "POST",
+			url: flowExecuteUrl
+		})).data;
+	};
+	/**
+	* Submit flow step data.
+	* Makes an authenticated request to /flow/execute with the step data.
+	*/
+	const handleSubmit = async (payload) => {
+		return (await http.request({
+			data: {
+				...payload,
+				verbose: true
+			},
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json"
+			},
+			method: "POST",
+			url: flowExecuteUrl
+		})).data;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseInviteUser.default, {
+		onInitialize: handleInitialize,
+		onSubmit: handleSubmit,
+		onError,
+		onFlowChange,
+		className,
+		fetchOrganizationUnitChildren: (0, react.useCallback)(async (parentId, limit, offset) => {
+			return (0, __thunderid_browser.getOrganizationUnitChildren)({
+				baseUrl,
+				headers: { Authorization: `Bearer ${await getAccessToken()}` },
+				limit,
+				offset,
+				organizationUnitId: parentId
+			});
+		}, [baseUrl, getAccessToken]),
+		fetchAuthFlows: require_useFetchAuthFlows.default(),
+		fetchUsers: require_useFetchUsers.default(),
+		fetchUserTypes: require_useFetchUserTypes.default(),
+		isInitialized,
+		size,
+		variant,
+		showTitle,
+		showSubtitle,
+		children
+	});
+};
+var InviteUser_default = InviteUser;
+
+//#endregion
+exports.default = InviteUser_default;
+//# sourceMappingURL=InviteUser.cjs.map

package/dist/cjs/components/auth/InviteUser/InviteUser.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InviteUser.cjs","names":["InviteUser: FC<InviteUserProps>","useThunderID","flowExecuteUrl: string","EmbeddedFlowType","BaseInviteUser","useFetchAuthFlows","useFetchUsers","useFetchUserTypes"],"sources":["../../../../../src/components/auth/InviteUser/InviteUser.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  EmbeddedFlowType,\n  FetchAuthFlows,\n  FetchUsers,\n  FetchUserTypes,\n  getOrganizationUnitChildren,\n  OrganizationUnitListResponse,\n  resolveResourceEndpoint,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useCallback} from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport BaseInviteUser, {BaseInviteUserRenderProps, InviteUserFlowResponse} from './BaseInviteUser';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useFetchAuthFlows from '../../../hooks/auth/useFetchAuthFlows';\nimport useFetchUsers from '../../../hooks/management/useFetchUsers';\nimport useFetchUserTypes from '../../../hooks/management/useFetchUserTypes';\n\n/**\n * Render props for InviteUser (re-exported for convenience).\n */\nexport type InviteUserRenderProps = BaseInviteUserRenderProps;\n\n/**\n * Props for the InviteUser component.\n */\nexport interface InviteUserProps {\n  /**\n   * Render props function for custom UI.\n   * If not provided, default UI will be rendered by the SDK.\n   */\n  children?: (props: InviteUserRenderProps) => ReactNode;\n\n  /**\n   * Custom CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Callback when an error occurs. It also receives the errors of failed user, flow and user type picker loads,\n   * which the form itself does not show.\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Callback when the flow state changes.\n   */\n  onFlowChange?: (response: InviteUserFlowResponse) => void;\n\n  /**\n   * Whether to show the subtitle.\n   */\n  showSubtitle?: boolean;\n\n  /**\n   * Whether to show the title.\n   */\n  showTitle?: boolean;\n\n  /**\n   * Size variant for the component.\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Theme variant for the component card.\n   */\n  variant?: 'outlined' | 'elevated';\n}\n\n/**\n * InviteUser component for initiating invite user flow.\n *\n * This component is designed for admin users in the thunder-develop app to:\n * 1. Select a user type (if multiple available)\n * 2. Enter user details (username, email)\n * 3. Generate an invite link for the end user\n *\n * The component uses the authenticated ThunderID SDK context to make API calls\n * with the admin's access token (requires 'system' scope).\n *\n * @example\n * ```tsx\n * import { InviteUser } from '@thunderid/react';\n *\n * const InviteUserPage = () => {\n *   const [inviteLink, setInviteLink] = useState<string>();\n *\n *   return (\n *     <InviteUser\n *       onInviteLinkGenerated={(link, executionId) => setInviteLink(link)}\n *       onError={(error) => console.error(error)}\n *     >\n *       {({ values, components, isLoading, handleInputChange, handleSubmit, inviteLink, isInviteGenerated }) => (\n *         <div>\n *           {isInviteGenerated ? (\n *             <div>\n *               <h2>Invite Link Generated!</h2>\n *               <p>{inviteLink}</p>\n *             </div>\n *           ) : (\n *             // Render form based on components\n *           )}\n *         </div>\n *       )}\n *     </InviteUser>\n *   );\n * };\n * ```\n */\nconst InviteUser: FC<InviteUserProps> = ({\n  onError,\n  onFlowChange,\n  className,\n  children,\n  size = 'medium',\n  variant = 'outlined',\n  showTitle = true,\n  showSubtitle = true,\n}: InviteUserProps): ReactElement => {\n  const {http, baseUrl, endpoints, getAccessToken, isInitialized} = useThunderID();\n\n  // The user-onboarding flow runs on the resource server, which may differ from `baseUrl` (the\n  // authorization server) in a trusted-issuer setup. Honor the `flowExecute` endpoint override.\n  const flowExecuteUrl: string = resolveResourceEndpoint('flowExecute', {endpoints}) ?? `${baseUrl}/flow/execute`;\n\n  /**\n   * Initialize the invite user flow.\n   * Makes an authenticated request to /flow/execute with flowType: USER_ONBOARDING.\n   */\n  const handleInitialize = async (payload: Record<string, any>): Promise<InviteUserFlowResponse> => {\n    const response: any = await http.request({\n      data: {\n        ...payload,\n        flowType: EmbeddedFlowType.UserOnboarding,\n        verbose: true,\n      },\n      headers: {\n        Accept: 'application/json',\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n      url: flowExecuteUrl,\n    } as any);\n\n    return response.data as InviteUserFlowResponse;\n  };\n\n  /**\n   * Submit flow step data.\n   * Makes an authenticated request to /flow/execute with the step data.\n   */\n  const handleSubmit = async (payload: Record<string, any>): Promise<InviteUserFlowResponse> => {\n    const response: any = await http.request({\n      data: {\n        ...payload,\n        verbose: true,\n      },\n      headers: {\n        Accept: 'application/json',\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n      url: flowExecuteUrl,\n    } as any);\n\n    return response.data as InviteUserFlowResponse;\n  };\n\n  const fetchOrganizationUnitChildren: (\n    parentId: string,\n    limit: number,\n    offset: number,\n  ) => Promise<OrganizationUnitListResponse> = useCallback(\n    async (parentId: string, limit: number, offset: number): Promise<OrganizationUnitListResponse> => {\n      const accessToken: string = await getAccessToken();\n\n      return getOrganizationUnitChildren({\n        baseUrl,\n        headers: {Authorization: `Bearer ${accessToken}`},\n        limit,\n        offset,\n        organizationUnitId: parentId,\n      });\n    },\n    [baseUrl, getAccessToken],\n  );\n\n  const fetchAuthFlows: FetchAuthFlows = useFetchAuthFlows();\n  const fetchUsers: FetchUsers = useFetchUsers();\n  const fetchUserTypes: FetchUserTypes = useFetchUserTypes();\n\n  return (\n    <BaseInviteUser\n      onInitialize={handleInitialize}\n      onSubmit={handleSubmit}\n      onError={onError}\n      onFlowChange={onFlowChange}\n      className={className}\n      fetchOrganizationUnitChildren={fetchOrganizationUnitChildren}\n      fetchAuthFlows={fetchAuthFlows}\n      fetchUsers={fetchUsers}\n      fetchUserTypes={fetchUserTypes}\n      isInitialized={isInitialized}\n      size={size}\n      variant={variant}\n      showTitle={showTitle}\n      showSubtitle={showSubtitle}\n    >\n      {children}\n    </BaseInviteUser>\n  );\n};\n\nexport default InviteUser;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAMA,cAAmC,EACvC,SACA,cACA,WACA,UACA,OAAO,UACP,UAAU,YACV,YAAY,MACZ,eAAe,WACoB;CACnC,MAAM,EAAC,MAAM,SAAS,WAAW,gBAAgB,kBAAiBC,8BAAc;CAIhF,MAAMC,kEAAiD,eAAe,EAAC,WAAU,CAAC,IAAI,GAAG,QAAQ;;;;;CAMjG,MAAM,mBAAmB,OAAO,YAAkE;AAehG,UAdsB,MAAM,KAAK,QAAQ;GACvC,MAAM;IACJ,GAAG;IACH,UAAUC,qCAAiB;IAC3B,SAAS;IACV;GACD,SAAS;IACP,QAAQ;IACR,gBAAgB;IACjB;GACD,QAAQ;GACR,KAAK;GACN,CAAQ,EAEO;;;;;;CAOlB,MAAM,eAAe,OAAO,YAAkE;AAc5F,UAbsB,MAAM,KAAK,QAAQ;GACvC,MAAM;IACJ,GAAG;IACH,SAAS;IACV;GACD,SAAS;IACP,QAAQ;IACR,gBAAgB;IACjB;GACD,QAAQ;GACR,KAAK;GACN,CAAQ,EAEO;;AA0BlB,QACE,2CAACC;EACC,cAAc;EACd,UAAU;EACD;EACK;EACH;EACX,sDAzBF,OAAO,UAAkB,OAAe,WAA0D;AAGhG,+DAAmC;IACjC;IACA,SAAS,EAAC,eAAe,UAJC,MAAM,gBAAgB,IAIC;IACjD;IACA;IACA,oBAAoB;IACrB,CAAC;KAEJ,CAAC,SAAS,eAAe,CAC1B;EAcG,gBAZmCC,mCAAmB;EAatD,YAZ2BC,+BAAe;EAa1C,gBAZmCC,mCAAmB;EAavC;EACT;EACG;EACE;EACG;EAEb;GACc;;AAIrB,yBAAe"}

package/dist/cjs/components/auth/Recovery/BaseRecovery.cjs

@@ -0,0 +1,405 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+const require_ComponentRendererContext = require('../../../contexts/ComponentRenderer/ComponentRendererContext.cjs');
+const require_FlowProvider = require('../../../contexts/Flow/FlowProvider.cjs');
+const require_useThunderID = require('../../../contexts/ThunderID/useThunderID.cjs');
+const require_useFlow = require('../../../contexts/Flow/useFlow.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_ComponentPreferencesContext = require('../../../contexts/I18n/ComponentPreferencesContext.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_flowTransformer = require('../../../utils/flowTransformer.cjs');
+const require_useForm = require('../../../hooks/useForm.cjs');
+const require_Spinner = require('../../primitives/Spinner/Spinner.cjs');
+const require_composeAffixedInputs = require('../../../utils/composeAffixedInputs.cjs');
+const require_Typography = require('../../primitives/Typography/Typography.cjs');
+const require_Alert = require('../../primitives/Alert/Alert.cjs');
+const require_Card = require('../../primitives/Card/Card.cjs');
+const require_AuthOptionFactory = require('../flow/AuthOptionFactory.cjs');
+const require_BaseSignUp_styles = require('../SignUp/BaseSignUp.styles.cjs');
+const require_getAuthComponentHeadings = require('../../../utils/getAuthComponentHeadings.cjs');
+const require_Logo = require('../../primitives/Logo/Logo.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/auth/Recovery/BaseRecovery.tsx
+/**
+* Internal component that renders the V2 recovery UI and manages flow state.
+*
+* @internal
+*/
+const BaseRecoveryContent = ({ onInitialize, onSubmit, onError, onFlowChange, onComplete, error: externalError, className = "", inputClassName = "", buttonClassName = "", errorClassName = "", messageClassName = "", size = "medium", variant = "outlined", isInitialized, children, showTitle = true, showSubtitle = true, revalidateOnChangeAfterBlur = false }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const customRenderers = (0, react.useContext)(require_ComponentRendererContext.default);
+	const { t } = require_useTranslation.default();
+	const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = require_useFlow.default();
+	const { meta, vendor } = require_useThunderID.default();
+	const styles = require_BaseSignUp_styles.default(theme, colorScheme);
+	const [isLoading, setIsLoading] = (0, react.useState)(false);
+	const [isFlowInitialized, setIsFlowInitialized] = (0, react.useState)(false);
+	const [currentFlow, setCurrentFlow] = (0, react.useState)(null);
+	const [apiError, setApiError] = (0, react.useState)(null);
+	const initializationAttemptedRef = (0, react.useRef)(false);
+	const challengeTokenRef = (0, react.useRef)(null);
+	const handleError = (0, react.useCallback)((error) => {
+		const errorMessage = require_flowTransformer.extractErrorMessage(error, t);
+		setApiError(error instanceof Error ? error : new Error(errorMessage));
+		clearMessages();
+		addMessage({
+			message: errorMessage,
+			type: "error"
+		});
+	}, [
+		t,
+		addMessage,
+		clearMessages
+	]);
+	const normalizeFlowResponseLocal = (0, react.useCallback)((response) => {
+		if (response?.data?.components && Array.isArray(response.data.components)) return response;
+		if (response?.data) {
+			const { components } = require_flowTransformer.normalizeFlowResponse(response, t, {
+				defaultErrorKey: "components.recovery.errors.generic",
+				resolveTranslations: false
+			}, meta);
+			return {
+				...response,
+				data: {
+					...response.data,
+					components
+				}
+			};
+		}
+		return response;
+	}, [t, meta]);
+	const extractFormFields = (0, react.useCallback)((components) => {
+		const fields = [];
+		const processComponents = (comps) => {
+			comps.forEach((component) => {
+				if (component.type === __thunderid_browser.EmbeddedFlowComponentType.TextInput || component.type === __thunderid_browser.EmbeddedFlowComponentType.PasswordInput || component.type === __thunderid_browser.EmbeddedFlowComponentType.EmailInput || component.type === __thunderid_browser.EmbeddedFlowComponentType.Select || component.type === __thunderid_browser.EmbeddedFlowComponentType.DateInput) {
+					const fieldName = component.ref || component.id;
+					const ruleValidator = (0, __thunderid_browser.buildValidatorFromRules)(component.validation);
+					fields.push({
+						initialValue: "",
+						name: fieldName,
+						required: component.required || false,
+						validator: (value) => {
+							if (component.required && (!value || value.trim() === "")) return t("validations.required.field.error");
+							if (ruleValidator && value) {
+								const ruleMessage = ruleValidator(value);
+								if (ruleMessage) return t(ruleMessage);
+							}
+							if ((component.type === __thunderid_browser.EmbeddedFlowComponentType.EmailInput || component.variant === "EMAIL") && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return t("field.email.invalid");
+							return null;
+						}
+					});
+				}
+				if (component.components && Array.isArray(component.components)) processComponents(component.components);
+			});
+		};
+		processComponents(components);
+		return fields;
+	}, [t]);
+	const { values: formValues, touched: touchedFields, errors: formErrors, isValid: isFormValid, setValue: setFormValue, setTouched: setFormTouched, setTouchedFields, setErrors: setFormErrors, clearErrors: clearFormErrors, validateForm, touchAllFields, reset: resetForm } = require_useForm.useForm({
+		fields: (0, react.useMemo)(() => currentFlow?.data?.components ? extractFormFields(currentFlow.data.components) : [], [currentFlow, extractFormFields]),
+		initialValues: {},
+		requiredMessage: t("validations.required.field.error"),
+		revalidateOnChangeAfterBlur,
+		validateOnBlur: true,
+		validateOnChange: false
+	});
+	(0, react.useEffect)(() => {
+		clearFormErrors();
+		const responseFieldErrors = (currentFlow?.data)?.fieldErrors;
+		if (!responseFieldErrors || responseFieldErrors.length === 0) return;
+		const errors = {};
+		const touched = {};
+		for (const fe of responseFieldErrors) if (!(fe.identifier in errors)) {
+			errors[fe.identifier] = fe.message;
+			touched[fe.identifier] = true;
+		}
+		setTouchedFields(touched);
+		setFormErrors(errors);
+	}, [
+		currentFlow,
+		setFormErrors,
+		setTouchedFields,
+		clearFormErrors
+	]);
+	const setupFormFields = (0, react.useCallback)((flowResponse) => {
+		const fields = extractFormFields(flowResponse.data?.components || []);
+		const initialValues = {};
+		fields.forEach((field) => {
+			initialValues[field.name] = field.initialValue || "";
+		});
+		resetForm();
+		Object.keys(initialValues).forEach((key) => setFormValue(key, initialValues[key]));
+	}, [
+		extractFormFields,
+		resetForm,
+		setFormValue
+	]);
+	const handleInputChange = (name, value) => {
+		setFormValue(name, value);
+	};
+	const handleInputBlur = (name) => {
+		setFormTouched(name, true);
+	};
+	const handleSubmit = async (component, data, skipValidation) => {
+		if (!currentFlow) return;
+		if (!skipValidation) {
+			touchAllFields();
+			if (!validateForm().isValid) return;
+		}
+		setIsLoading(true);
+		setApiError(null);
+		clearMessages();
+		try {
+			const composedData = data ? require_composeAffixedInputs.default(data, vendor) : void 0;
+			const filteredInputs = {};
+			if (composedData) Object.entries(composedData).forEach(([key, value]) => {
+				if (value !== null && value !== void 0 && value !== "") filteredInputs[key] = value;
+			});
+			const payload = {
+				...currentFlow.executionId && { executionId: currentFlow.executionId },
+				...component.id && { action: component.id },
+				...challengeTokenRef.current ? { challengeToken: challengeTokenRef.current } : {},
+				inputs: filteredInputs
+			};
+			const rawResponse = await onSubmit?.(payload);
+			if (!rawResponse) return;
+			const response = normalizeFlowResponseLocal(rawResponse);
+			onFlowChange?.(response);
+			if (response.challengeToken !== void 0) challengeTokenRef.current = response.challengeToken ?? null;
+			if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Error) {
+				handleError(response);
+				onError?.(new Error(require_flowTransformer.extractErrorMessage(response, t)));
+				return;
+			}
+			if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Complete) {
+				onComplete?.(response);
+				return;
+			}
+			if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Incomplete) {
+				setCurrentFlow(response);
+				setupFormFields(response);
+				if (response?.error) handleError(response);
+			}
+		} catch (err) {
+			handleError(err);
+			onError?.(err);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	const containerClasses = require_emotion.cx([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery"),
+		(0, __thunderid_browser.withVendorCSSClassPrefix)(`recovery--${size}`),
+		(0, __thunderid_browser.withVendorCSSClassPrefix)(`recovery--${variant}`)
+	], className);
+	const inputClasses = require_emotion.cx([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__input"),
+		size === "small" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__input--small"),
+		size === "large" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__input--large")
+	], inputClassName);
+	const buttonClasses = require_emotion.cx([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__button"),
+		size === "small" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__button--small"),
+		size === "large" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__button--large")
+	], buttonClassName);
+	const errorClasses = require_emotion.cx([(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__error")], errorClassName);
+	const messageClasses = require_emotion.cx([(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__messages")], messageClassName);
+	const renderComponents = (0, react.useCallback)((components) => require_AuthOptionFactory.renderRecoveryComponents(components, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, handleInputChange, {
+		_customRenderers: customRenderers,
+		_theme: theme,
+		buttonClassName: buttonClasses,
+		inputClassName: inputClasses,
+		meta,
+		onInputBlur: handleInputBlur,
+		onSubmit: handleSubmit,
+		size,
+		variant,
+		vendor
+	}), [
+		customRenderers,
+		buttonClasses,
+		formErrors,
+		formValues,
+		handleInputBlur,
+		handleSubmit,
+		inputClasses,
+		isFormValid,
+		meta,
+		isLoading,
+		size,
+		theme,
+		touchedFields,
+		variant,
+		vendor
+	]);
+	(0, react.useEffect)(() => {
+		if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
+			initializationAttemptedRef.current = true;
+			(async () => {
+				setIsLoading(true);
+				setApiError(null);
+				clearMessages();
+				try {
+					const rawResponse = await onInitialize?.();
+					if (!rawResponse) return;
+					const response = normalizeFlowResponseLocal(rawResponse);
+					if (response.challengeToken !== void 0) challengeTokenRef.current = response.challengeToken ?? null;
+					if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Error) {
+						handleError(response);
+						onError?.(new Error(require_flowTransformer.extractErrorMessage(response, t)));
+					}
+					setCurrentFlow(response);
+					setIsFlowInitialized(true);
+					onFlowChange?.(response);
+					if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Complete) {
+						onComplete?.(response);
+						return;
+					}
+					if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Incomplete) {
+						setupFormFields(response);
+						if (response?.error) handleError(response);
+					}
+				} catch (err) {
+					handleError(err);
+					onError?.(err);
+				} finally {
+					setIsLoading(false);
+				}
+			})();
+		}
+	}, [
+		isFlowInitialized,
+		isInitialized,
+		normalizeFlowResponseLocal,
+		onComplete,
+		onError,
+		onFlowChange,
+		onInitialize,
+		setupFormFields,
+		t
+	]);
+	if (children) {
+		if (typeof children === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: containerClasses,
+			children: children({
+				components: currentFlow?.data?.components || [],
+				error: apiError,
+				fieldErrors: formErrors,
+				handleInputChange,
+				handleSubmit,
+				isLoading,
+				isValid: isFormValid,
+				messages: flowMessages || [],
+				meta,
+				subtitle: flowSubtitle || t("recovery.subheading"),
+				title: flowTitle || t("recovery.heading"),
+				touched: touchedFields,
+				validateForm: () => {
+					const result = validateForm();
+					return {
+						fieldErrors: result.errors,
+						isValid: result.isValid
+					};
+				},
+				values: formValues
+			})
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: containerClasses,
+			children
+		});
+	}
+	if (!isFlowInitialized && isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		className: require_emotion.cx(containerClasses, styles.card),
+		variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: styles.loadingContainer,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, { size: "medium" })
+		}) })
+	});
+	if (!currentFlow) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		className: require_emotion.cx(containerClasses, styles.card),
+		variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Alert.default, {
+			variant: "error",
+			className: errorClasses,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Title, { children: t("errors.heading") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: t("errors.recovery.flow.initialization.failure") })]
+		}) })
+	});
+	const { title, subtitle, componentsWithoutHeadings } = require_getAuthComponentHeadings.default(currentFlow.data?.components || [], flowTitle, flowSubtitle, t("recovery.heading"), t("recovery.subheading"));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default, {
+		className: require_emotion.cx(containerClasses, styles.card),
+		variant,
+		children: [(showTitle || showSubtitle) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default.Header, {
+			className: styles.header,
+			children: [showTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default.Title, {
+				level: 2,
+				className: styles.title,
+				children: title
+			}), showSubtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+				variant: "body1",
+				className: styles.subtitle,
+				children: subtitle
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default.Content, { children: [
+			externalError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.flowMessagesContainer,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+					variant: "error",
+					className: require_emotion.cx(styles.flowMessageItem, messageClasses),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: externalError.message })
+				})
+			}),
+			flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.flowMessagesContainer,
+				children: flowMessages.map((message, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+					variant: message.type?.toLowerCase() === "error" ? "error" : "info",
+					className: require_emotion.cx(styles.flowMessageItem, messageClasses),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: message.message })
+				}, message.id || index))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.contentContainer,
+				children: componentsWithoutHeadings && componentsWithoutHeadings.length > 0 ? renderComponents(componentsWithoutHeadings) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+					variant: "warning",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+						variant: "body1",
+						children: t("errors.recovery.components.not.available")
+					})
+				})
+			})
+		] })]
+	});
+};
+/**
+* BaseRecovery component for ThunderIDV2 that provides an embedded account/password recovery flow.
+* Accepts API functions as props to maintain framework independence.
+*/
+const BaseRecovery = ({ preferences, showLogo = true,...rest }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_BaseSignUp_styles.default(theme, colorScheme);
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [showLogo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: styles.logoContainer,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Logo.default, { size: "large" })
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FlowProvider.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseRecoveryContent, {
+		showLogo,
+		...rest
+	}) })] });
+	if (!preferences) return content;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentPreferencesContext.default.Provider, {
+		value: preferences,
+		children: content
+	});
+};
+var BaseRecovery_default = BaseRecovery;
+
+//#endregion
+exports.default = BaseRecovery_default;
+//# sourceMappingURL=BaseRecovery.cjs.map