@thunderid/react 0.3.0 → 0.3.4

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

@@ -1 +0,0 @@
-{"version":3,"file":"InviteUser.cjs","names":["InviteUser: FC<InviteUserProps>","useThunderID","EmbeddedFlowType","BaseInviteUser"],"sources":["../../../../../../../src/components/presentation/auth/InviteUser/v2/InviteUser.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {EmbeddedFlowType, getOrganizationUnitChildren, OrganizationUnitListResponse} 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';\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.\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, getAccessToken, isInitialized} = useThunderID();\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: `${baseUrl}/flow/execute`,\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: `${baseUrl}/flow/execute`,\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  return (\n    <BaseInviteUser\n      onInitialize={handleInitialize}\n      onSubmit={handleSubmit}\n      onError={onError}\n      onFlowChange={onFlowChange}\n      className={className}\n      fetchOrganizationUnitChildren={fetchOrganizationUnitChildren}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,MAAMA,cAAmC,EACvC,SACA,cACA,WACA,UACA,OAAO,UACP,UAAU,YACV,YAAY,MACZ,eAAe,WACoB;CACnC,MAAM,EAAC,MAAM,SAAS,gBAAgB,kBAAiBC,8BAAc;;;;;CAMrE,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,GAAG,QAAQ;GACjB,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,GAAG,QAAQ;GACjB,CAAQ,EAEO;;AAsBlB,QACE,2CAACC;EACC,cAAc;EACd,UAAU;EACD;EACK;EACH;EACX,sDArBF,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;EAUkB;EACT;EACG;EACE;EACG;EAEb;GACc;;AAIrB,yBAAe"}

package/dist/cjs/components/presentation/auth/OrganizationUnitPicker/v2/OrganizationUnitPicker.cjs

@@ -1,183 +0,0 @@
-const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
-const require_useTheme = require('../../../../../contexts/Theme/useTheme.cjs');
-const require_OrganizationUnitPicker_styles = require('./OrganizationUnitPicker.styles.cjs');
-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);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
-
-//#region src/components/presentation/auth/OrganizationUnitPicker/v2/OrganizationUnitPicker.tsx
-const OrganizationUnitPicker = ({ rootOuId, selectedOuId, onSelect, fetchChildren, pageSize = 10, className }) => {
-	const { theme } = require_useTheme.default();
-	const styles = require_OrganizationUnitPicker_styles.default(theme);
-	const [nodeStates, setNodeStates] = (0, react.useState)({});
-	const loadChildren = (0, react.useCallback)(async (parentId, offset = 0) => {
-		setNodeStates((prev) => ({
-			...prev,
-			[parentId]: {
-				...prev[parentId] || {
-					children: [],
-					expanded: true,
-					hasMore: false,
-					offset: 0,
-					totalResults: 0
-				},
-				loading: true
-			}
-		}));
-		try {
-			const response = await fetchChildren(parentId, pageSize, offset);
-			const newChildren = response.organizationUnits || [];
-			setNodeStates((prev) => {
-				const existing = prev[parentId] || {
-					children: [],
-					expanded: true,
-					hasMore: false,
-					loading: false,
-					offset: 0,
-					totalResults: 0
-				};
-				const mergedChildren = offset === 0 ? newChildren : [...existing.children, ...newChildren];
-				const newOffset = offset + newChildren.length;
-				return {
-					...prev,
-					[parentId]: {
-						children: mergedChildren,
-						expanded: true,
-						hasMore: newOffset < response.totalResults,
-						loading: false,
-						offset: newOffset,
-						totalResults: response.totalResults
-					}
-				};
-			});
-		} catch {
-			setNodeStates((prev) => ({
-				...prev,
-				[parentId]: {
-					...prev[parentId] || {
-						children: [],
-						expanded: true,
-						hasMore: false,
-						offset: 0,
-						totalResults: 0
-					},
-					loading: false
-				}
-			}));
-		}
-	}, [fetchChildren, pageSize]);
-	(0, react.useEffect)(() => {
-		if (rootOuId && !nodeStates[rootOuId]) loadChildren(rootOuId);
-	}, [
-		rootOuId,
-		loadChildren,
-		nodeStates
-	]);
-	const handleToggle = (0, react.useCallback)((ouId) => {
-		const state = nodeStates[ouId];
-		if (state?.expanded) setNodeStates((prev) => ({
-			...prev,
-			[ouId]: {
-				...prev[ouId],
-				expanded: false
-			}
-		}));
-		else if (state?.children.length) setNodeStates((prev) => ({
-			...prev,
-			[ouId]: {
-				...prev[ouId],
-				expanded: true
-			}
-		}));
-		else loadChildren(ouId);
-	}, [nodeStates, loadChildren]);
-	const handleLoadMore = (0, react.useCallback)((parentId) => {
-		const state = nodeStates[parentId];
-		if (state) loadChildren(parentId, state.offset);
-	}, [nodeStates, loadChildren]);
-	const renderLoadingPlaceholders = (depth) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: [
-		0,
-		1,
-		2
-	].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: styles["loadingPlaceholder"],
-		style: { paddingLeft: `${(depth + 1) * 20}px` },
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: styles["skeleton"],
-			style: { width: `${100 - i * 20}px` }
-		})
-	}, `skeleton-${i}`)) });
-	const renderNode = (ou, depth = 0) => {
-		const state = nodeStates[ou.id];
-		const isSelected = selectedOuId === ou.id;
-		const isExpanded = state?.expanded || false;
-		const isLoading = state?.loading || false;
-		const hasChildren = !state || state.totalResults > 0 || state.children.length > 0;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.default.Fragment, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, __emotion_css.cx)(styles["node"], isSelected && styles["nodeSelected"]),
-				style: { paddingLeft: `${depth * 20 + 12}px` },
-				role: "treeitem",
-				"aria-selected": isSelected,
-				"aria-expanded": hasChildren ? isExpanded : void 0,
-				onClick: () => onSelect(ou.id),
-				onKeyDown: (e) => {
-					if (e.key === "Enter" || e.key === " ") {
-						e.preventDefault();
-						onSelect(ou.id);
-					}
-				},
-				tabIndex: 0,
-				children: [hasChildren ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					className: styles["toggleButton"],
-					onClick: (e) => {
-						e.stopPropagation();
-						handleToggle(ou.id);
-					},
-					"aria-label": isExpanded ? "Collapse" : "Expand",
-					type: "button",
-					children: isExpanded ? "▾" : "▸"
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: styles["togglePlaceholder"] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: styles["nodeName"],
-					children: ou.name
-				})]
-			}),
-			isExpanded && isLoading && !state?.children.length && renderLoadingPlaceholders(depth),
-			isExpanded && state?.children.map((child) => renderNode(child, depth + 1)),
-			isExpanded && state?.hasMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				className: styles["loadMoreButton"],
-				style: { paddingLeft: `${(depth + 1) * 20 + 12}px` },
-				onClick: () => handleLoadMore(ou.id),
-				disabled: isLoading,
-				type: "button",
-				children: isLoading ? "Loading..." : "Load more"
-			})
-		] }, ou.id);
-	};
-	const rootState = nodeStates[rootOuId];
-	const isRootLoading = rootState?.loading && !rootState?.children.length;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __emotion_css.cx)(styles["container"], className),
-		role: "tree",
-		"aria-label": "Organization unit picker",
-		children: [
-			isRootLoading && renderLoadingPlaceholders(0),
-			rootState?.children.map((ou) => renderNode(ou, 0)),
-			rootState?.hasMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				className: styles["loadMoreButton"],
-				onClick: () => handleLoadMore(rootOuId),
-				disabled: rootState?.loading,
-				type: "button",
-				children: rootState?.loading ? "Loading..." : "Load more"
-			})
-		]
-	});
-};
-var OrganizationUnitPicker_default = OrganizationUnitPicker;
-
-//#endregion
-exports.default = OrganizationUnitPicker_default;
-//# sourceMappingURL=OrganizationUnitPicker.cjs.map

package/dist/cjs/components/presentation/auth/OrganizationUnitPicker/v2/OrganizationUnitPicker.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"OrganizationUnitPicker.cjs","names":["useTheme","styles: Record<string, string>","useStyles","loadChildren: (parentId: string, offset?: number) => Promise<void>","response: OrganizationUnitListResponse","newChildren: OrganizationUnit[]","existing: NodeState","mergedChildren: OrganizationUnit[]","newOffset: number","handleToggle: (ouId: string) => void","state: NodeState | undefined","handleLoadMore: (parentId: string) => void","isSelected: boolean","isExpanded: boolean","isLoading: boolean","hasChildren: boolean","React","rootState: NodeState | undefined","isRootLoading: boolean"],"sources":["../../../../../../../src/components/presentation/auth/OrganizationUnitPicker/v2/OrganizationUnitPicker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {OrganizationUnit, OrganizationUnitListResponse} from '@thunderid/browser';\nimport React, {useCallback, useEffect, useState} from 'react';\nimport useStyles from './OrganizationUnitPicker.styles';\nimport useTheme from '../../../../../contexts/Theme/useTheme';\n\ninterface NodeState {\n  children: OrganizationUnit[];\n  expanded: boolean;\n  hasMore: boolean;\n  loading: boolean;\n  offset: number;\n  totalResults: number;\n}\n\nexport interface OrganizationUnitPickerProps {\n  className?: string;\n  fetchChildren: (parentId: string, limit: number, offset: number) => Promise<OrganizationUnitListResponse>;\n  onSelect: (ouId: string) => void;\n  pageSize?: number;\n  rootOuId: string;\n  selectedOuId?: string | null;\n}\n\nconst OrganizationUnitPicker = ({\n  rootOuId,\n  selectedOuId,\n  onSelect,\n  fetchChildren,\n  pageSize = 10,\n  className,\n}: OrganizationUnitPickerProps): React.ReactElement => {\n  const {theme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme);\n\n  const [nodeStates, setNodeStates] = useState<Record<string, NodeState>>({});\n\n  const loadChildren: (parentId: string, offset?: number) => Promise<void> = useCallback(\n    async (parentId: string, offset = 0) => {\n      setNodeStates((prev: Record<string, NodeState>) => ({\n        ...prev,\n        [parentId]: {\n          ...(prev[parentId] || {children: [], expanded: true, hasMore: false, offset: 0, totalResults: 0}),\n          loading: true,\n        },\n      }));\n\n      try {\n        const response: OrganizationUnitListResponse = await fetchChildren(parentId, pageSize, offset);\n        const newChildren: OrganizationUnit[] = response.organizationUnits || [];\n\n        setNodeStates((prev: Record<string, NodeState>) => {\n          const existing: NodeState = prev[parentId] || {\n            children: [],\n            expanded: true,\n            hasMore: false,\n            loading: false,\n            offset: 0,\n            totalResults: 0,\n          };\n          const mergedChildren: OrganizationUnit[] =\n            offset === 0 ? newChildren : [...existing.children, ...newChildren];\n          const newOffset: number = offset + newChildren.length;\n\n          return {\n            ...prev,\n            [parentId]: {\n              children: mergedChildren,\n              expanded: true,\n              hasMore: newOffset < response.totalResults,\n              loading: false,\n              offset: newOffset,\n              totalResults: response.totalResults,\n            },\n          };\n        });\n      } catch {\n        setNodeStates((prev: Record<string, NodeState>) => ({\n          ...prev,\n          [parentId]: {\n            ...(prev[parentId] || {children: [], expanded: true, hasMore: false, offset: 0, totalResults: 0}),\n            loading: false,\n          },\n        }));\n      }\n    },\n    [fetchChildren, pageSize],\n  );\n\n  // Auto-load root children on mount\n  useEffect(() => {\n    if (rootOuId && !nodeStates[rootOuId]) {\n      loadChildren(rootOuId);\n    }\n  }, [rootOuId, loadChildren, nodeStates]);\n\n  const handleToggle: (ouId: string) => void = useCallback(\n    (ouId: string) => {\n      const state: NodeState | undefined = nodeStates[ouId];\n\n      if (state?.expanded) {\n        setNodeStates((prev: Record<string, NodeState>) => ({\n          ...prev,\n          [ouId]: {...prev[ouId], expanded: false},\n        }));\n      } else if (state?.children.length) {\n        setNodeStates((prev: Record<string, NodeState>) => ({\n          ...prev,\n          [ouId]: {...prev[ouId], expanded: true},\n        }));\n      } else {\n        loadChildren(ouId);\n      }\n    },\n    [nodeStates, loadChildren],\n  );\n\n  const handleLoadMore: (parentId: string) => void = useCallback(\n    (parentId: string) => {\n      const state: NodeState | undefined = nodeStates[parentId];\n\n      if (state) {\n        loadChildren(parentId, state.offset);\n      }\n    },\n    [nodeStates, loadChildren],\n  );\n\n  const renderLoadingPlaceholders = (depth: number): React.ReactElement => (\n    <>\n      {[0, 1, 2].map((i: number) => (\n        <div\n          key={`skeleton-${i}`}\n          className={styles['loadingPlaceholder']}\n          style={{paddingLeft: `${(depth + 1) * 20}px`}}\n        >\n          <div className={styles['skeleton']} style={{width: `${100 - i * 20}px`}} />\n        </div>\n      ))}\n    </>\n  );\n\n  const renderNode = (ou: OrganizationUnit, depth = 0): React.ReactElement => {\n    const state: NodeState | undefined = nodeStates[ou.id];\n    const isSelected: boolean = selectedOuId === ou.id;\n    const isExpanded: boolean = state?.expanded || false;\n    const isLoading: boolean = state?.loading || false;\n    const hasChildren: boolean = !state || state.totalResults > 0 || state.children.length > 0;\n\n    return (\n      <React.Fragment key={ou.id}>\n        <div\n          className={cx(styles['node'], isSelected && styles['nodeSelected'])}\n          style={{paddingLeft: `${depth * 20 + 12}px`}}\n          role=\"treeitem\"\n          aria-selected={isSelected}\n          aria-expanded={hasChildren ? isExpanded : undefined}\n          onClick={() => onSelect(ou.id)}\n          onKeyDown={(e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              onSelect(ou.id);\n            }\n          }}\n          tabIndex={0}\n        >\n          {hasChildren ? (\n            <button\n              className={styles['toggleButton']}\n              onClick={(e: React.MouseEvent) => {\n                e.stopPropagation();\n                handleToggle(ou.id);\n              }}\n              aria-label={isExpanded ? 'Collapse' : 'Expand'}\n              type=\"button\"\n            >\n              {isExpanded ? '\\u25BE' : '\\u25B8'}\n            </button>\n          ) : (\n            <span className={styles['togglePlaceholder']} />\n          )}\n          <span className={styles['nodeName']}>{ou.name}</span>\n        </div>\n\n        {isExpanded && isLoading && !state?.children.length && renderLoadingPlaceholders(depth)}\n\n        {isExpanded && state?.children.map((child: OrganizationUnit) => renderNode(child, depth + 1))}\n\n        {isExpanded && state?.hasMore && (\n          <button\n            className={styles['loadMoreButton']}\n            style={{paddingLeft: `${(depth + 1) * 20 + 12}px`}}\n            onClick={() => handleLoadMore(ou.id)}\n            disabled={isLoading}\n            type=\"button\"\n          >\n            {isLoading ? 'Loading...' : 'Load more'}\n          </button>\n        )}\n      </React.Fragment>\n    );\n  };\n\n  const rootState: NodeState | undefined = nodeStates[rootOuId];\n  const isRootLoading: boolean = rootState?.loading && !rootState?.children.length;\n\n  return (\n    <div className={cx(styles['container'], className)} role=\"tree\" aria-label=\"Organization unit picker\">\n      {isRootLoading && renderLoadingPlaceholders(0)}\n\n      {rootState?.children.map((ou: OrganizationUnit) => renderNode(ou, 0))}\n\n      {rootState?.hasMore && (\n        <button\n          className={styles['loadMoreButton']}\n          onClick={() => handleLoadMore(rootOuId)}\n          disabled={rootState?.loading}\n          type=\"button\"\n        >\n          {rootState?.loading ? 'Loading...' : 'Load more'}\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default OrganizationUnitPicker;\n"],"mappings":"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"}

package/dist/cjs/components/presentation/auth/OrganizationUnitPicker/v2/OrganizationUnitPicker.styles.cjs

@@ -1,128 +0,0 @@
-const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
-
-//#region src/components/presentation/auth/OrganizationUnitPicker/v2/OrganizationUnitPicker.styles.ts
-const useStyles = (theme) => (0, react.useMemo)(() => {
-	const container = __emotion_css.css`
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      max-height: 320px;
-      overflow-y: auto;
-      border: 1px solid ${theme.vars.colors.border};
-      border-radius: ${theme.vars.borderRadius.medium};
-      font-family: ${theme.vars.typography.fontFamily};
-    `;
-	const node = __emotion_css.css`
-      display: flex;
-      align-items: center;
-      padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 1.5);
-      cursor: pointer;
-      user-select: none;
-      transition: background-color 0.15s ease;
-
-      &:hover {
-        background-color: ${theme.vars.colors.action.hover};
-      }
-    `;
-	const nodeSelected = __emotion_css.css`
-      background-color: ${theme.vars.colors.action.selected};
-
-      &:hover {
-        background-color: ${theme.vars.colors.action.selected};
-      }
-    `;
-	const toggleButton = __emotion_css.css`
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 20px;
-      height: 20px;
-      border: none;
-      background: none;
-      cursor: pointer;
-      padding: 0;
-      margin-right: calc(${theme.vars.spacing.unit} * 0.5);
-      color: ${theme.vars.colors.text.secondary};
-      font-size: 12px;
-      flex-shrink: 0;
-    `;
-	const togglePlaceholder = __emotion_css.css`
-      width: 20px;
-      height: 20px;
-      margin-right: calc(${theme.vars.spacing.unit} * 0.5);
-      flex-shrink: 0;
-    `;
-	const nodeName = __emotion_css.css`
-      font-size: 14px;
-      color: ${theme.vars.colors.text.primary};
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    `;
-	return {
-		container,
-		loadMoreButton: __emotion_css.css`
-      display: flex;
-      align-items: center;
-      padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1.5);
-      border: none;
-      background: none;
-      cursor: pointer;
-      color: ${theme.vars.colors.primary.main};
-      font-size: 13px;
-      font-family: ${theme.vars.typography.fontFamily};
-
-      &:hover {
-        text-decoration: underline;
-      }
-    `,
-		loadingPlaceholder: __emotion_css.css`
-      display: flex;
-      align-items: center;
-      padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 1.5);
-      gap: calc(${theme.vars.spacing.unit} * 1);
-    `,
-		node,
-		nodeName,
-		nodeSelected,
-		skeleton: __emotion_css.css`
-      height: 14px;
-      border-radius: ${theme.vars.borderRadius.small};
-      background-color: ${theme.vars.colors.background.disabled};
-      animation: pulse 1.5s ease-in-out infinite;
-
-      @keyframes pulse {
-        0%,
-        100% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.4;
-        }
-      }
-    `,
-		toggleButton,
-		togglePlaceholder
-	};
-}, [
-	theme.vars.colors.action.hover,
-	theme.vars.colors.action.selected,
-	theme.vars.colors.background.disabled,
-	theme.vars.colors.border,
-	theme.vars.colors.primary.main,
-	theme.vars.colors.text.primary,
-	theme.vars.colors.text.secondary,
-	theme.vars.borderRadius.medium,
-	theme.vars.borderRadius.small,
-	theme.vars.spacing.unit,
-	theme.vars.typography.fontFamily
-]);
-var OrganizationUnitPicker_styles_default = useStyles;
-
-//#endregion
-exports.default = OrganizationUnitPicker_styles_default;
-//# sourceMappingURL=OrganizationUnitPicker.styles.cjs.map

package/dist/cjs/components/presentation/auth/OrganizationUnitPicker/v2/OrganizationUnitPicker.styles.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"OrganizationUnitPicker.styles.cjs","names":["container: string","node: string","nodeSelected: string","toggleButton: string","togglePlaceholder: string","nodeName: string"],"sources":["../../../../../../../src/components/presentation/auth/OrganizationUnitPicker/v2/OrganizationUnitPicker.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nconst useStyles = (theme: Theme): Record<string, string> =>\n  useMemo(() => {\n    const container: string = css`\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      max-height: 320px;\n      overflow-y: auto;\n      border: 1px solid ${theme.vars.colors.border};\n      border-radius: ${theme.vars.borderRadius.medium};\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const node: string = css`\n      display: flex;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 1.5);\n      cursor: pointer;\n      user-select: none;\n      transition: background-color 0.15s ease;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n    `;\n\n    const nodeSelected: string = css`\n      background-color: ${theme.vars.colors.action.selected};\n\n      &:hover {\n        background-color: ${theme.vars.colors.action.selected};\n      }\n    `;\n\n    const toggleButton: string = css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 20px;\n      height: 20px;\n      border: none;\n      background: none;\n      cursor: pointer;\n      padding: 0;\n      margin-right: calc(${theme.vars.spacing.unit} * 0.5);\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 12px;\n      flex-shrink: 0;\n    `;\n\n    const togglePlaceholder: string = css`\n      width: 20px;\n      height: 20px;\n      margin-right: calc(${theme.vars.spacing.unit} * 0.5);\n      flex-shrink: 0;\n    `;\n\n    const nodeName: string = css`\n      font-size: 14px;\n      color: ${theme.vars.colors.text.primary};\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `;\n\n    const loadMoreButton: string = css`\n      display: flex;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1.5);\n      border: none;\n      background: none;\n      cursor: pointer;\n      color: ${theme.vars.colors.primary.main};\n      font-size: 13px;\n      font-family: ${theme.vars.typography.fontFamily};\n\n      &:hover {\n        text-decoration: underline;\n      }\n    `;\n\n    const loadingPlaceholder: string = css`\n      display: flex;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 1.5);\n      gap: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const skeleton: string = css`\n      height: 14px;\n      border-radius: ${theme.vars.borderRadius.small};\n      background-color: ${theme.vars.colors.background.disabled};\n      animation: pulse 1.5s ease-in-out infinite;\n\n      @keyframes pulse {\n        0%,\n        100% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.4;\n        }\n      }\n    `;\n\n    return {\n      container,\n      loadMoreButton,\n      loadingPlaceholder,\n      node,\n      nodeName,\n      nodeSelected,\n      skeleton,\n      toggleButton,\n      togglePlaceholder,\n    };\n  }, [\n    theme.vars.colors.action.hover,\n    theme.vars.colors.action.selected,\n    theme.vars.colors.background.disabled,\n    theme.vars.colors.border,\n    theme.vars.colors.primary.main,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.borderRadius.medium,\n    theme.vars.borderRadius.small,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;AAsBA,MAAM,aAAa,mCACH;CACZ,MAAMA,YAAoB,iBAAG;;;;;;0BAMP,MAAM,KAAK,OAAO,OAAO;uBAC5B,MAAM,KAAK,aAAa,OAAO;qBACjC,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,OAAe,iBAAG;;;sBAGN,MAAM,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAK,QAAQ,KAAK;;;;;;4BAMvD,MAAM,KAAK,OAAO,OAAO,MAAM;;;CAIvD,MAAMC,eAAuB,iBAAG;0BACV,MAAM,KAAK,OAAO,OAAO,SAAS;;;4BAGhC,MAAM,KAAK,OAAO,OAAO,SAAS;;;CAI1D,MAAMC,eAAuB,iBAAG;;;;;;;;;;2BAUT,MAAM,KAAK,QAAQ,KAAK;eACpC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK5C,MAAMC,oBAA4B,iBAAG;;;2BAGd,MAAM,KAAK,QAAQ,KAAK;;;CAI/C,MAAMC,WAAmB,iBAAG;;eAEjB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;AA8C1C,QAAO;EACL;EACA,gBA1C6B,iBAAG;;;sBAGhB,MAAM,KAAK,QAAQ,KAAK,gBAAgB,MAAM,KAAK,QAAQ,KAAK;;;;eAIvE,MAAM,KAAK,OAAO,QAAQ,KAAK;;qBAEzB,MAAM,KAAK,WAAW,WAAW;;;;;;EAkChD,oBA3BiC,iBAAG;;;sBAGpB,MAAM,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAK,QAAQ,KAAK;kBACjE,MAAM,KAAK,QAAQ,KAAK;;EAwBpC;EACA;EACA;EACA,UAxBuB,iBAAG;;uBAET,MAAM,KAAK,aAAa,MAAM;0BAC3B,MAAM,KAAK,OAAO,WAAW,SAAS;;;;;;;;;;;;;EAsB1D;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,OAAO;CACzB,MAAM,KAAK,OAAO,OAAO;CACzB,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,OAAO,QAAQ;CAC1B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,WAAW;CACvB,CAAC;AAEJ,4CAAe"}

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

@@ -1,293 +0,0 @@
-const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.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_useTranslation = require('../../../../../hooks/useTranslation.cjs');
-const require_useForm = require('../../../../../hooks/useForm.cjs');
-const require_Spinner = require('../../../../primitives/Spinner/Spinner.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_Logo = require('../../../../primitives/Logo/Logo.cjs');
-const require_BaseSignUp_styles = require('../../SignUp/BaseSignUp.styles.cjs');
-const require_RecoveryOptionFactory = require('./RecoveryOptionFactory.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);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
-
-//#region src/components/presentation/auth/Recovery/v1/BaseRecovery.tsx
-/**
-* Internal component that renders the recovery UI and manages flow state.
-*
-* @internal
-*/
-const BaseRecoveryContent = ({ onInitialize, onSubmit, onError, onFlowChange, onComplete, className = "", inputClassName = "", buttonClassName = "", errorClassName = "", messageClassName = "", size = "medium", variant = "outlined", isInitialized, children, showTitle = true, showSubtitle = true }) => {
-	const { theme, colorScheme } = require_useTheme.default();
-	const { t } = require_useTranslation.default();
-	const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = require_useFlow.default();
-	require_useThunderID.default();
-	const styles = require_BaseSignUp_styles.default(theme, colorScheme);
-	const handleError = (0, react.useCallback)((error) => {
-		let errorMessage = t("errors.recovery.flow.failure");
-		if (error && typeof error === "object") {
-			if (error.code && (error.message || error.description)) errorMessage = error.description || error.message;
-			else if (error instanceof Error && error.name === "ThunderIDAPIError") try {
-				const errorResponse = JSON.parse(error.message);
-				errorMessage = errorResponse.description || errorResponse.message || error.message;
-			} catch {
-				errorMessage = error.message;
-			}
-			else if (error.message) errorMessage = error.message;
-		} else if (typeof error === "string") errorMessage = error;
-		clearMessages();
-		addMessage({
-			message: errorMessage,
-			type: "error"
-		});
-	}, [
-		t,
-		addMessage,
-		clearMessages
-	]);
-	const [isLoading, setIsLoading] = (0, react.useState)(false);
-	const [isFlowInitialized, setIsFlowInitialized] = (0, react.useState)(false);
-	const [currentFlow, setCurrentFlow] = (0, react.useState)(null);
-	const initializationAttemptedRef = (0, react.useRef)(false);
-	const extractFormFields = (0, react.useCallback)((components) => {
-		const fields = [];
-		const processComponents = (comps) => {
-			comps.forEach((component) => {
-				if (component.type === __thunderid_browser.EmbeddedFlowComponentType.Input) {
-					const config = component.config || {};
-					fields.push({
-						initialValue: config.defaultValue || "",
-						name: config.name || component.id,
-						required: config.required || false,
-						validator: (value) => {
-							if (config.required && (!value || value.trim() === "")) return t("validations.required.field.error");
-							if (config.type === "email" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return t("field.email.invalid");
-							if (config.type === "password" && value && value.length < 8) return t("field.password.weak");
-							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, validateForm, touchAllFields, reset: resetForm } = require_useForm.useForm({
-		fields: currentFlow?.data?.components ? extractFormFields(currentFlow.data.components) : [],
-		initialValues: {},
-		requiredMessage: t("validations.required.field.error"),
-		validateOnBlur: true,
-		validateOnChange: true
-	});
-	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 = (0, react.useCallback)((name, value) => {
-		setFormValue(name, value);
-		setFormTouched(name, true);
-	}, [setFormValue, setFormTouched]);
-	const handleSubmit = async (component, data, skipValidation) => {
-		if (!currentFlow) return;
-		if (!skipValidation) {
-			touchAllFields();
-			if (!validateForm().isValid) return;
-		}
-		setIsLoading(true);
-		clearMessages();
-		try {
-			const filteredInputs = {};
-			if (data) Object.entries(data).forEach(([key, value]) => {
-				if (value !== null && value !== void 0 && value !== "") filteredInputs[key] = value;
-			});
-			const payload = {
-				...currentFlow.flowId && { flowId: currentFlow.flowId },
-				flowType: currentFlow.flowType || "RECOVERY",
-				inputs: filteredInputs,
-				...component.id && { actionId: component.id }
-			};
-			const response = await onSubmit?.(payload);
-			if (!response) return;
-			onFlowChange?.(response);
-			if (response.flowStatus === __thunderid_browser.EmbeddedFlowStatus.Complete) {
-				onComplete?.(response);
-				return;
-			}
-			if (response.flowStatus === __thunderid_browser.EmbeddedFlowStatus.Incomplete) {
-				setCurrentFlow(response);
-				setupFormFields(response);
-			}
-		} catch (err) {
-			handleError(err);
-			onError?.(err);
-		} finally {
-			setIsLoading(false);
-		}
-	};
-	const containerClasses = (0, __emotion_css.cx)([
-		(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery"),
-		(0, __thunderid_browser.withVendorCSSClassPrefix)(`recovery--${size}`),
-		(0, __thunderid_browser.withVendorCSSClassPrefix)(`recovery--${variant}`)
-	], className);
-	const inputClasses = (0, __emotion_css.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 = (0, __emotion_css.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 = (0, __emotion_css.cx)([(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__error")], errorClassName);
-	const messageClasses = (0, __emotion_css.cx)([(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__messages")], messageClassName);
-	const renderComponents = (0, react.useCallback)((components) => require_RecoveryOptionFactory.renderRecoveryComponents(components, formValues, touchedFields, formErrors, isLoading, isFormValid, handleInputChange, {
-		buttonClassName: buttonClasses,
-		inputClassName: inputClasses,
-		onSubmit: handleSubmit,
-		size,
-		variant
-	}), [
-		buttonClasses,
-		formErrors,
-		formValues,
-		handleInputChange,
-		handleSubmit,
-		inputClasses,
-		isFormValid,
-		isLoading,
-		size,
-		touchedFields,
-		variant
-	]);
-	(0, react.useEffect)(() => {
-		if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
-			initializationAttemptedRef.current = true;
-			(async () => {
-				setIsLoading(true);
-				clearMessages();
-				try {
-					const response = await onInitialize?.();
-					setCurrentFlow(response);
-					setIsFlowInitialized(true);
-					onFlowChange?.(response);
-					if (response.flowStatus === __thunderid_browser.EmbeddedFlowStatus.Complete) {
-						onComplete?.(response);
-						return;
-					}
-					if (response.flowStatus === __thunderid_browser.EmbeddedFlowStatus.Incomplete) setupFormFields(response);
-				} catch (err) {
-					handleError(err);
-					onError?.(err);
-				} finally {
-					setIsLoading(false);
-				}
-			})();
-		}
-	}, [
-		clearMessages,
-		handleError,
-		isFlowInitialized,
-		isInitialized,
-		onComplete,
-		onError,
-		onFlowChange,
-		onInitialize,
-		setupFormFields
-	]);
-	if (children) 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: (0, __emotion_css.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: (0, __emotion_css.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") })]
-		}) })
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default, {
-		className: (0, __emotion_css.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: flowTitle || t("recovery.heading")
-			}), showSubtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
-				variant: "body1",
-				className: styles.subtitle,
-				children: flowSubtitle || t("recovery.subheading")
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default.Content, { children: [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: (0, __emotion_css.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: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__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 ThunderID V1 that provides an embedded account/password recovery flow.
-* Accepts API functions as props to maintain framework independence.
-*
-* @internal
-*/
-const BaseRecovery = ({ showLogo = true,...rest }) => {
-	const { theme, colorScheme } = require_useTheme.default();
-	const styles = require_BaseSignUp_styles.default(theme, colorScheme);
-	return /* @__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
-	}) })] });
-};
-var BaseRecovery_default = BaseRecovery;
-
-//#endregion
-exports.default = BaseRecovery_default;
-//# sourceMappingURL=BaseRecovery.cjs.map