@thunderid/react 0.3.7 → 0.5.0

package/dist/cjs/components/presentation/auth/AuthOptionFactory.cjs

@@ -147,8 +147,9 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			const error = touchedFields[identifier] || false ? formErrors[identifier] : void 0;
 			const fieldType = getFieldType(component.type);
 			return (0, react.cloneElement)(require_FieldFactory.createField({
-				className: options.inputClassName,
+				className: (0, __emotion_css.cx)(options.inputClassName, component.classes),
 				error,
+				id: component.id,
 				label: resolve(component.label) || "",
 				name: identifier,
 				onBlur: () => options.onInputBlur?.(identifier),
@@ -164,8 +165,9 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			const value = formValues[identifier] || "";
 			const error = touchedFields[identifier] || false ? formErrors[identifier] : void 0;
 			return (0, react.cloneElement)(require_FieldFactory.createField({
-				className: options.inputClassName,
+				className: (0, __emotion_css.cx)(options.inputClassName, component.classes),
 				error,
+				id: component.id,
 				label: resolve(component.label) || "",
 				name: identifier,
 				onBlur: () => options.onInputBlur?.(identifier),
@@ -207,33 +209,41 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 					options.onSubmit(component, formData, shouldSkipValidation);
 				}
 			};
+			const socialButtonClassName = (0, __emotion_css.cx)(options.buttonClassName, component.classes);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "google", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GoogleButton.default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "github", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GitHubButton.default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "facebook", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FacebookButton.default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MicrosoftButton.default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "linkedin", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LinkedInButton.default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "ethereum", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SignInWithEthereumButton.default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (actionId === "prompt_mobile" || eventType === "prompt_mobile") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SmsOtpButton.default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			const startIconEl = component.startIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 				src: component.startIcon,
@@ -257,9 +267,10 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			}) : null;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
 				fullWidth: true,
+				id: component.id,
 				onClick: handleClick,
 				disabled: isLoading || !isFormValid && !shouldSkipValidation || options.isTimeoutDisabled || component.config?.disabled,
-				className: options.buttonClassName,
+				className: (0, __emotion_css.cx)(options.buttonClassName, component.classes),
 				"data-testid": "thunderid-signin-submit",
 				variant: component.variant?.toLowerCase() === "primary" ? "solid" : "outline",
 				color: component.variant?.toLowerCase() === "primary" ? "primary" : "secondary",
@@ -268,14 +279,19 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				children: buttonText || "Submit"
 			}, key);
 		}
-		case __thunderid_browser.EmbeddedFlowComponentType.Text: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
-			variant: getTypographyVariant(component.variant),
-			style: {
-				marginBottom: 2,
-				textAlign: typeof component?.align === "string" ? component.align : "left"
-			},
-			children: resolve(component.label)
-		}, key);
+		case __thunderid_browser.EmbeddedFlowComponentType.Text: {
+			const variant = getTypographyVariant(component.variant);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+				id: component.id,
+				className: component.classes,
+				variant,
+				style: {
+					marginBottom: 2,
+					textAlign: typeof component?.align === "string" ? component.align : "left"
+				},
+				children: resolve(component.label)
+			}, key);
+		}
 		case __thunderid_browser.EmbeddedFlowComponentType.Divider: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Divider.default, { children: resolve(component.label) || "" }, key);
 		case __thunderid_browser.EmbeddedFlowComponentType.Select: {
 			const identifier = component.ref;
@@ -286,6 +302,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				value: typeof opt === "string" ? opt : String(opt.value ?? "")
 			}));
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.default, {
+				id: component.id,
 				name: identifier,
 				label: resolve(component.label) || "",
 				placeholder: resolve(component.placeholder),
@@ -295,7 +312,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				error,
 				onChange: (e) => onInputChange(identifier, e.target.value),
 				onBlur: () => options.onInputBlur?.(identifier),
-				className: options.inputClassName
+				className: (0, __emotion_css.cx)(options.inputClassName, component.classes)
 			}, key);
 		}
 		case __thunderid_browser.EmbeddedFlowComponentType.DateInput: {
@@ -303,6 +320,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			const value = formValues[identifier] || "";
 			const error = touchedFields[identifier] || false ? formErrors[identifier] : void 0;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DatePicker.default, {
+				id: component.id,
 				name: identifier,
 				label: resolve(component.label) || "",
 				placeholder: resolve(component.placeholder),
@@ -312,7 +330,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				error,
 				onChange: (e) => onInputChange(identifier, e.target.value),
 				onBlur: () => options.onInputBlur?.(identifier),
-				className: options.inputClassName
+				className: (0, __emotion_css.cx)(options.inputClassName, component.classes)
 			}, key);
 		}
 		case __thunderid_browser.EmbeddedFlowComponentType.OuSelect:
@@ -331,6 +349,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				})).filter(Boolean);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
 					id: component.id,
+					className: component.classes,
 					style: formStyles,
 					children: blockComponents
 				}, key);
@@ -410,20 +429,24 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			const gap = component.gap ?? 2;
 			const align = component.align || "center";
 			const justify = component.justify || "flex-start";
+			const stackStyle = {
+				alignItems: align,
+				display: "flex",
+				flexDirection: direction,
+				flexWrap: "wrap",
+				gap: `${gap * .5}rem`,
+				justifyContent: justify
+			};
+			const stackChildren = component.components ? component.components.map((childComponent, index) => createAuthComponentFromFlow(childComponent, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, authType, {
+				...options,
+				inStack: true,
+				key: childComponent.id || `${component.id}_${index}`
+			})) : [];
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: {
-					alignItems: align,
-					display: "flex",
-					flexDirection: direction,
-					flexWrap: "wrap",
-					gap: `${gap * .5}rem`,
-					justifyContent: justify
-				},
-				children: component.components ? component.components.map((childComponent, index) => createAuthComponentFromFlow(childComponent, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, authType, {
-					...options,
-					inStack: true,
-					key: childComponent.id || `${component.id}_${index}`
-				})) : []
+				id: component.id,
+				className: component.classes,
+				style: stackStyle,
+				children: stackChildren
 			}, key);
 		}
 		case __thunderid_browser.EmbeddedFlowComponentType.Consent: {

package/dist/cjs/components/presentation/auth/AuthOptionFactory.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthOptionFactory.cjs","names":["logger: ReturnType<typeof createPackageComponentLogger>","richTextClass: string","EmbeddedFlowComponentType","FieldType","providerId: any","providerMatches: any","theme: any","customRenderers: ComponentRendererMap","key: string | number","customRenderer: ComponentRenderer | undefined","identifier: string","value: string","error: string","fieldType: string","createField","actionId: string","eventType: string","buttonText: string","componentVariant: string","shouldSkipValidation: boolean","EmbeddedFlowEventType","formData: Record<string, any>","consentPrompt: ConsentPromptData | undefined","isDeny: boolean","decisions: ConsentDecisions","getConsentOptionalKey","GoogleButton","GitHubButton","FacebookButton","MicrosoftButton","LinkedInButton","SignInWithEthereumButton","SmsOtpButton","startIconEl: ReactElement | null","endIconEl: ReactElement | null","Button","Typography","Divider","selectOptions: any","Select","DatePicker","formStyles: CSSProperties","blockComponents: any","richTextAction: EmbeddedFlowComponentAction | undefined","syntheticAction: EmbeddedFlowComponent","formData: Record<string, string>","anchor: HTMLAnchorElement | null","DOMPurify","explicitHeight: string","explicitWidth: string","ImageComponent","iconName: string","IconComponent: any","flowIconRegistry","direction: string","gap: number","align: string","justify: string","consentPromptRawData: ConsentPromptData | string | undefined","Consent","textTemplate: string","timeoutMs: number","FlowTimer","sourceKey: string | undefined","CopyableText"],"sources":["../../../../../src/components/presentation/auth/AuthOptionFactory.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 {css} from '@emotion/css';\nimport {\n  FieldType,\n  FlowMetadataResponse,\n  EmbeddedFlowComponent,\n  EmbeddedFlowComponentAction,\n  EmbeddedFlowComponentType,\n  EmbeddedFlowTextVariant,\n  EmbeddedFlowEventType,\n  createPackageComponentLogger,\n  resolveFlowTemplateLiterals,\n  resolveEmojiUrisInHtml,\n  ConsentPurposeData,\n  ConsentPromptData,\n  ConsentDecisions,\n  ConsentPurposeDecision,\n  ConsentAttributeElement,\n  OrganizationUnitListResponse,\n} from '@thunderid/browser';\nimport DOMPurify from 'dompurify';\nimport {cloneElement, CSSProperties, ReactElement} from 'react';\nimport {\n  ComponentRenderer,\n  ComponentRenderContext,\n  ComponentRendererMap,\n} from '../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport {UseTranslation} from '../../../hooks/useTranslation';\nimport Consent from '../../adapters/Consent';\nimport {getConsentOptionalKey} from '../../adapters/ConsentCheckboxList';\nimport FacebookButton from '../../adapters/FacebookButton';\nimport FlowTimer from '../../adapters/FlowTimer';\nimport GitHubButton from '../../adapters/GitHubButton';\nimport GoogleButton from '../../adapters/GoogleButton';\nimport ImageComponent from '../../adapters/ImageComponent';\nimport LinkedInButton from '../../adapters/LinkedInButton';\nimport MicrosoftButton from '../../adapters/MicrosoftButton';\nimport SignInWithEthereumButton from '../../adapters/SignInWithEthereumButton';\nimport SmsOtpButton from '../../adapters/SmsOtpButton';\nimport {createField} from '../../factories/FieldFactory';\nimport Button from '../../primitives/Button/Button';\nimport CopyableText from '../../primitives/CopyableText/CopyableText';\nimport DatePicker from '../../primitives/DatePicker/DatePicker';\nimport Divider from '../../primitives/Divider/Divider';\nimport flowIconRegistry from '../../primitives/Icons/flowIconRegistry';\nimport Select from '../../primitives/Select/Select';\nimport Typography from '../../primitives/Typography/Typography';\nimport {TypographyVariant} from '../../primitives/Typography/Typography.styles';\n\nconst logger: ReturnType<typeof createPackageComponentLogger> = createPackageComponentLogger(\n  '@thunderid/react',\n  'AuthOptionFactory',\n);\n\n/**\n * Replaces `emoji:` URIs embedded in HTML before DOMPurify sanitization.\n *\n * DOMPurify strips unknown URI schemes from attributes (e.g. `src=\"emoji:🦊\"` → `src=\"\"`).\n * This function converts:\n *   - `<img src=\"emoji:X\" alt=\"Y\">` → `<span role=\"img\" aria-label=\"Y\">X</span>`\n *   - Any remaining `emoji:X` text occurrences → `X`\n */\n\n/** Ensures rich-text content (including all inner elements from the server) always word-wraps. */\nconst richTextClass: string = css`\n  overflow-wrap: anywhere;\n  & * {\n    overflow-wrap: anywhere;\n    word-break: break-word;\n  }\n  & .rich-text-align-left {\n    text-align: left;\n  }\n  & .rich-text-align-center {\n    text-align: center;\n  }\n  & .rich-text-align-right {\n    text-align: right;\n  }\n  & .rich-text-align-justify {\n    text-align: justify;\n  }\n  & a,\n  & .rich-text-link {\n    text-decoration: underline;\n  }\n  & span[role='img'] {\n    display: inline-block;\n  }\n`;\n\nexport type AuthType = 'signin' | 'signup' | 'recovery';\n\n/**\n * Get the appropriate FieldType for an input component.\n */\nconst getFieldType = (variant: EmbeddedFlowComponentType): FieldType => {\n  switch (variant) {\n    case EmbeddedFlowComponentType.EmailInput:\n      return FieldType.Email;\n    case EmbeddedFlowComponentType.PhoneInput:\n      return FieldType.Tel;\n    case EmbeddedFlowComponentType.PasswordInput:\n      return FieldType.Password;\n    case EmbeddedFlowComponentType.TextInput:\n    default:\n      return FieldType.Text;\n  }\n};\n\n/**\n * Get typography variant from component variant.\n */\nconst getTypographyVariant = (variant: string): any => {\n  const variantMap: Record<EmbeddedFlowTextVariant, TypographyVariant> = {\n    BODY_1: 'body1',\n    BODY_2: 'body2',\n    BUTTON_TEXT: 'button',\n    CAPTION: 'caption',\n    HEADING_1: 'h1',\n    HEADING_2: 'h2',\n    HEADING_3: 'h3',\n    HEADING_4: 'h4',\n    HEADING_5: 'h5',\n    HEADING_6: 'h6',\n    OVERLINE: 'overline',\n    SUBTITLE_1: 'subtitle1',\n    SUBTITLE_2: 'subtitle2',\n  };\n\n  return variantMap[variant] || 'h3';\n};\n\n/**\n * Check if a button text or action matches a social provider.\n */\nconst matchesSocialProvider = (\n  actionId: string,\n  eventType: string,\n  buttonText: string,\n  provider: string,\n  authType: AuthType,\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */\n  _componentVariant?: string,\n): boolean => {\n  const providerId: any = `${provider}_auth`;\n  const providerMatches: any = actionId === providerId || eventType === providerId;\n\n  // Social buttons usually have \"Sign in with X\" or \"Continue with X\" text,\n  // so also check button text for the provider name to increase chances of correct detection (especially for signup flows where action IDs are less standardized)\n  if (buttonText.toLowerCase().includes(provider)) {\n    return true;\n  }\n\n  // For signup, also check button text\n  if (authType === 'signup') {\n    return providerMatches || buttonText.toLowerCase().includes(provider);\n  }\n\n  return providerMatches;\n};\n\n/**\n * Create an auth component from flow component configuration.\n */\nconst createAuthComponentFromFlow = (\n  component: EmbeddedFlowComponent,\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  authType: AuthType,\n  options: {\n    /** @internal Passed from the host React component so hooks aren't called inside a loop. */\n    _customRenderers?: ComponentRendererMap;\n    /** @internal Passed from the host React component so hooks aren't called inside a loop. */\n    _theme?: any;\n    /** Additional data from the flow response, used for different dynamic data */\n    additionalData?: Record<string, any>;\n    buttonClassName?: string;\n    /** Current consent purpose being rendered. Set by CONSENT_PURPOSE block iteration. */\n    currentConsentPurpose?: ConsentPurposeData;\n    inStack?: boolean;\n    inputClassName?: string;\n    /** Flag to determine if the step timeline has expired */\n    isTimeoutDisabled?: boolean;\n    key?: string | number;\n    /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n    meta?: FlowMetadataResponse | null;\n    onInputBlur?: (name: string) => void;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n    size?: 'small' | 'medium' | 'large';\n    /** Translation function for resolving {{t(...)}} expressions at render time */\n    t?: UseTranslation['t'];\n    variant?: any;\n  } = {},\n): ReactElement | null => {\n  const theme: any = options._theme;\n  const customRenderers: ComponentRendererMap = options._customRenderers ?? {};\n\n  const key: string | number = options.key || component.id;\n\n  const customRenderer: ComponentRenderer | undefined =\n    customRenderers[component.id] ?? customRenderers[component.type];\n  if (customRenderer) {\n    const renderCtx: ComponentRenderContext = {\n      additionalData: options.additionalData,\n      authType,\n      formErrors,\n      formValues,\n      isFormValid,\n      isLoading,\n      meta: options.meta,\n      onInputBlur: options.onInputBlur,\n      onInputChange,\n      onSubmit: options.onSubmit,\n      touchedFields,\n    };\n    return customRenderer(component, renderCtx);\n  }\n\n  /** Resolve any remaining {{t()}} or {{meta()}} template expressions in a string at render time. */\n  const resolve = (text: string | undefined): string => {\n    if (!text || (!options.t && !options.meta)) {\n      return text || '';\n    }\n    return resolveFlowTemplateLiterals(text, {meta: options.meta, t: options.t || ((k: string): string => k)});\n  };\n\n  switch (component.type) {\n    case EmbeddedFlowComponentType.TextInput:\n    case EmbeddedFlowComponentType.PasswordInput:\n    case EmbeddedFlowComponentType.EmailInput:\n    case EmbeddedFlowComponentType.PhoneInput: {\n      const identifier: string = component.ref!;\n      const value: string = formValues[identifier] || '';\n      const isTouched: boolean = touchedFields[identifier] || false;\n      const error: string = isTouched ? formErrors[identifier] : undefined!;\n      const fieldType: string = getFieldType(component.type);\n\n      const field: any = createField({\n        className: options.inputClassName,\n        error,\n        label: resolve(component.label) || '',\n        name: identifier,\n        onBlur: () => options.onInputBlur?.(identifier),\n        onChange: (newValue: string) => onInputChange(identifier, newValue),\n        placeholder: resolve(component.placeholder) || '',\n        required: component.required || false,\n        type: fieldType as FieldType,\n        value,\n      });\n\n      return cloneElement(field, {key});\n    }\n\n    case EmbeddedFlowComponentType.OtpInput: {\n      const identifier: string = component.ref!;\n      const value: string = formValues[identifier] || '';\n      const isTouched: boolean = touchedFields[identifier] || false;\n      const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n      const field: any = createField({\n        className: options.inputClassName,\n        error,\n        label: resolve(component.label) || '',\n        name: identifier,\n        onBlur: () => options.onInputBlur?.(identifier),\n        onChange: (newValue: string) => onInputChange(identifier, newValue),\n        placeholder: resolve(component.placeholder) || '',\n        required: component.required || false,\n        type: FieldType.Otp,\n        value,\n      });\n\n      return cloneElement(field, {key});\n    }\n\n    case EmbeddedFlowComponentType.Action: {\n      const actionId: string = component.id;\n      const eventType: string = component.eventType || '';\n      const buttonText: string = resolve(component.label);\n      const componentVariant: string = component.variant || '';\n\n      // Only validate on submit type events.\n      const shouldSkipValidation: boolean = eventType.toUpperCase() === EmbeddedFlowEventType.Trigger;\n\n      const handleClick = (): any => {\n        if (options.onSubmit) {\n          const formData: Record<string, any> = {};\n          Object.keys(formValues).forEach((field: any) => {\n            // Include all values, even empty strings, to ensure proper submission\n            formData[field] = formValues[field];\n          });\n\n          // For consent actions, build the consent_decisions JSON from the form values.\n          // The allow action captures per-attribute choices; the deny action sends\n          // all purposes as rejected so the backend ConsentExecutor can fail the flow.\n          const consentPrompt: ConsentPromptData | undefined = options.additionalData?.['consentPrompt'] as\n            | ConsentPromptData\n            | undefined;\n          if (consentPrompt && eventType.toUpperCase() === EmbeddedFlowEventType.Submit) {\n            const isDeny: boolean = componentVariant.toLowerCase() !== 'primary';\n            const decisions: ConsentDecisions = {\n              purposes: consentPrompt.purposes.map(\n                (p: ConsentPurposeData): ConsentPurposeDecision => ({\n                  approved: !isDeny,\n                  elements: [\n                    ...p.essential.map((e): ConsentAttributeElement => ({approved: !isDeny, name: e.name})),\n                    ...p.optional.map(\n                      (e): ConsentAttributeElement => ({\n                        approved: isDeny ? false : formValues[getConsentOptionalKey(p.purposeId, e.name)] !== 'false',\n                        name: e.name,\n                      }),\n                    ),\n                  ],\n                  purposeName: p.purposeName!,\n                }),\n              ),\n            };\n            formData['consent_decisions'] = JSON.stringify(decisions);\n          }\n\n          options.onSubmit(component, formData, shouldSkipValidation);\n        }\n      };\n\n      // Render branded social login buttons for known action IDs\n\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'google', authType, componentVariant)) {\n        return <GoogleButton key={key} onClick={handleClick} className={options.buttonClassName} />;\n      }\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'github', authType, componentVariant)) {\n        return <GitHubButton key={key} onClick={handleClick} className={options.buttonClassName} />;\n      }\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'facebook', authType, componentVariant)) {\n        return <FacebookButton key={key} onClick={handleClick} className={options.buttonClassName} />;\n      }\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'microsoft', authType, componentVariant)) {\n        return <MicrosoftButton key={key} onClick={handleClick} className={options.buttonClassName} />;\n      }\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'linkedin', authType, componentVariant)) {\n        return <LinkedInButton key={key} onClick={handleClick} className={options.buttonClassName} />;\n      }\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'ethereum', authType, componentVariant)) {\n        return <SignInWithEthereumButton key={key} onClick={handleClick} className={options.buttonClassName} />;\n      }\n      if (actionId === 'prompt_mobile' || eventType === 'prompt_mobile') {\n        return <SmsOtpButton key={key} onClick={handleClick} className={options.buttonClassName} />;\n      }\n\n      const startIconEl: ReactElement | null = component.startIcon ? (\n        <img\n          src={component.startIcon}\n          alt=\"\"\n          aria-hidden=\"true\"\n          style={{height: '1.25em', objectFit: 'contain', width: '1.25em'}}\n        />\n      ) : null;\n\n      const endIconEl: ReactElement | null = component.endIcon ? (\n        <img\n          src={component.endIcon}\n          alt=\"\"\n          aria-hidden=\"true\"\n          style={{height: '1.25em', objectFit: 'contain', width: '1.25em'}}\n        />\n      ) : null;\n\n      return (\n        <Button\n          fullWidth\n          key={key}\n          onClick={handleClick}\n          disabled={\n            isLoading ||\n            (!isFormValid && !shouldSkipValidation) ||\n            options.isTimeoutDisabled ||\n            (component as any).config?.disabled\n          }\n          className={options.buttonClassName}\n          data-testid=\"thunderid-signin-submit\"\n          variant={component.variant?.toLowerCase() === 'primary' ? 'solid' : 'outline'}\n          color={component.variant?.toLowerCase() === 'primary' ? 'primary' : 'secondary'}\n          startIcon={startIconEl}\n          endIcon={endIconEl}\n        >\n          {buttonText || 'Submit'}\n        </Button>\n      );\n    }\n\n    case EmbeddedFlowComponentType.Text: {\n      const variant: any = getTypographyVariant(component.variant!);\n      return (\n        <Typography\n          key={key}\n          variant={variant}\n          style={{\n            marginBottom: 2,\n            textAlign:\n              typeof component?.align === 'string' ? (component.align as React.CSSProperties['textAlign']) : 'left',\n          }}\n        >\n          {resolve(component.label)}\n        </Typography>\n      );\n    }\n\n    case EmbeddedFlowComponentType.Divider: {\n      return <Divider key={key}>{resolve(component.label) || ''}</Divider>;\n    }\n\n    case EmbeddedFlowComponentType.Select: {\n      const identifier: string = component.ref!;\n      const value: string = formValues[identifier] || '';\n      const isTouched: boolean = touchedFields[identifier] || false;\n      const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n      // Options are pre-sanitized by flowTransformer to {value: string, label: string} format\n      const selectOptions: any = (component.options || []).map((opt: any) => ({\n        label: typeof opt === 'string' ? opt : String(opt.label ?? opt.value ?? ''),\n        value: typeof opt === 'string' ? opt : String(opt.value ?? ''),\n      }));\n\n      return (\n        <Select\n          key={key}\n          name={identifier}\n          label={resolve(component.label) || ''}\n          placeholder={resolve(component.placeholder)}\n          required={component.required}\n          options={selectOptions}\n          value={value}\n          error={error}\n          onChange={(e: any): void => onInputChange(identifier, e.target.value)}\n          onBlur={(): any => options.onInputBlur?.(identifier)}\n          className={options.inputClassName}\n        />\n      );\n    }\n\n    case EmbeddedFlowComponentType.DateInput: {\n      const identifier: string = component.ref!;\n      const value: string = formValues[identifier] || '';\n      const isTouched: boolean = touchedFields[identifier] || false;\n      const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n      return (\n        <DatePicker\n          key={key}\n          name={identifier}\n          label={resolve(component.label) || ''}\n          placeholder={resolve(component.placeholder)}\n          required={component.required}\n          dateFormat={component.dateFormat}\n          value={value}\n          error={error}\n          onChange={(e: any): void => onInputChange(identifier, e.target.value)}\n          onBlur={(): any => options.onInputBlur?.(identifier)}\n          className={options.inputClassName}\n        />\n      );\n    }\n\n    case EmbeddedFlowComponentType.OuSelect: {\n      logger.warn('OU_SELECT component type is not supported. Skipping render.');\n      return null;\n    }\n\n    case EmbeddedFlowComponentType.Block: {\n      if (component.components && component.components.length > 0) {\n        const formStyles: CSSProperties = {\n          display: 'flex',\n          flexDirection: 'column',\n          gap: `calc(${theme?.vars?.spacing?.unit ?? '4px'} * 2)`,\n        };\n\n        const blockComponents: any = component.components\n          .map((childComponent: any, index: any) =>\n            createAuthComponentFromFlow(\n              childComponent,\n              formValues,\n              touchedFields,\n              formErrors,\n              isLoading,\n              isFormValid,\n              onInputChange,\n              authType,\n              {\n                ...options,\n                key: childComponent.id || `${component.id}_${index}`,\n              },\n            ),\n          )\n          .filter(Boolean);\n\n        return (\n          <form id={component.id} key={key} style={formStyles}>\n            {blockComponents}\n          </form>\n        );\n      }\n      return null;\n    }\n\n    case EmbeddedFlowComponentType.RichText: {\n      const richTextAction: EmbeddedFlowComponentAction | undefined = component.action;\n\n      const dispatchRichTextAction = (): void => {\n        if (!richTextAction || !options.onSubmit) {\n          return;\n        }\n        const eventTypeValue = String(richTextAction.eventType ?? EmbeddedFlowEventType.Submit);\n        const shouldSkipValidation: boolean = eventTypeValue.toUpperCase() === String(EmbeddedFlowEventType.Trigger);\n        const syntheticAction: EmbeddedFlowComponent = {\n          eventType: eventTypeValue,\n          id: `${component.id}_action`,\n          ref: richTextAction.ref,\n          type: EmbeddedFlowComponentType.Action,\n        };\n        const formData: Record<string, string> = {};\n        Object.keys(formValues).forEach((field: string) => {\n          formData[field] = formValues[field];\n        });\n        options.onSubmit(syntheticAction, formData, shouldSkipValidation);\n      };\n\n      // Sentinel-anchor contract: only anchors carrying `data-action-ref` equal to\n      // richTextAction.ref dispatch the action. Anchors without the sentinel (or with\n      // a non-matching one) are treated as ordinary links and are ignored here.\n      const isMatchingSentinelAnchor = (anchor: HTMLAnchorElement): boolean =>\n        anchor.getAttribute('data-action-ref') === richTextAction?.ref;\n\n      const handleRichTextClick: React.MouseEventHandler<HTMLDivElement> | undefined = richTextAction\n        ? (event: React.MouseEvent<HTMLDivElement>): void => {\n            const anchor: HTMLAnchorElement | null = (event.target as HTMLElement).closest('a');\n            if (!anchor || !isMatchingSentinelAnchor(anchor)) {\n              return;\n            }\n            event.preventDefault();\n            dispatchRichTextAction();\n          }\n        : undefined;\n\n      const handleRichTextKeyDown: React.KeyboardEventHandler<HTMLDivElement> | undefined = richTextAction\n        ? (event: React.KeyboardEvent<HTMLDivElement>): void => {\n            if (event.key !== 'Enter' && event.key !== ' ') {\n              return;\n            }\n            const anchor: HTMLAnchorElement | null = (event.target as HTMLElement).closest('a');\n            if (!anchor || !isMatchingSentinelAnchor(anchor)) {\n              return;\n            }\n            event.preventDefault();\n            dispatchRichTextAction();\n          }\n        : undefined;\n\n      return (\n        // Sentinel anchors are made keyboard-operable via the container's onKeyDown\n        // (Enter/Space activate the matching anchor). Authors should ensure the anchor\n        // is focusable (`href` or `tabIndex`); the click+keydown delegation covers both\n        // pointer and keyboard activation once focus lands on the anchor.\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div\n          key={key}\n          className={richTextClass}\n          onClick={handleRichTextClick}\n          onKeyDown={handleRichTextKeyDown}\n          // Manually sanitizes with `DOMPurify`.\n          // IMPORTANT: DO NOT REMOVE OR MODIFY THIS SANITIZATION STEP.\n          dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(resolveEmojiUrisInHtml(resolve(component.label)))}}\n        />\n      );\n    }\n\n    case EmbeddedFlowComponentType.Image: {\n      const explicitHeight: string = resolve(component.height?.toString());\n      const explicitWidth: string = resolve(component.width?.toString());\n      return (\n        <ImageComponent\n          key={key}\n          component={\n            {\n              config: {\n                alt: resolve(component.alt) || resolve(component.label) || 'Image',\n                height: explicitHeight || (options.inStack ? '50' : 'auto'),\n                src: resolve(component.src),\n                width: explicitWidth || (options.inStack ? '50' : '100%'),\n              },\n            } as any\n          }\n          formErrors={undefined!}\n          formValues={undefined!}\n          isFormValid={false}\n          isLoading={false}\n          onInputChange={(): void => {\n            throw new Error('Function not implemented.');\n          }}\n          touchedFields={undefined!}\n        />\n      );\n    }\n\n    case EmbeddedFlowComponentType.Icon: {\n      const iconName: string = component.name || '';\n      const IconComponent: any = flowIconRegistry[iconName];\n      if (!IconComponent) {\n        logger.warn(`Unknown icon name: \"${iconName}\". Skipping render.`);\n        return null;\n      }\n      return <IconComponent key={key} size={component.size || 24} color={component.color || 'currentColor'} />;\n    }\n\n    case EmbeddedFlowComponentType.Stack: {\n      const direction: string = (component as any).direction || 'row';\n      const gap: number = (component as any).gap ?? 2;\n      const align: string = (component as any).align || 'center';\n      const justify: string = (component as any).justify || 'flex-start';\n\n      const stackStyle: CSSProperties = {\n        alignItems: align,\n        display: 'flex',\n        flexDirection: direction as CSSProperties['flexDirection'],\n        flexWrap: 'wrap',\n        gap: `${gap * 0.5}rem`,\n        justifyContent: justify,\n      };\n\n      const stackChildren: (ReactElement | null)[] = component.components\n        ? component.components.map((childComponent: any, index: number) =>\n            createAuthComponentFromFlow(\n              childComponent,\n              formValues,\n              touchedFields,\n              formErrors,\n              isLoading,\n              isFormValid,\n              onInputChange,\n              authType,\n              {\n                ...options,\n                inStack: true,\n                key: childComponent.id || `${component.id}_${index}`,\n              },\n            ),\n          )\n        : [];\n\n      return (\n        <div key={key} style={stackStyle}>\n          {stackChildren}\n        </div>\n      );\n    }\n\n    case EmbeddedFlowComponentType.Consent: {\n      const consentPromptRawData: ConsentPromptData | string | undefined = options.additionalData?.['consentPrompt'];\n\n      return (\n        <Consent\n          key={key}\n          consentData={consentPromptRawData as any}\n          formValues={formValues}\n          onInputChange={onInputChange}\n        />\n      );\n    }\n\n    case EmbeddedFlowComponentType.Timer: {\n      const textTemplate: string = resolve((component as any).label) || 'Time remaining: {time}';\n      const timeoutMs: number = Number(options.additionalData?.['stepTimeout']) || 0;\n      const expiresIn: number = timeoutMs > 0 ? Math.max(0, Math.floor((timeoutMs - Date.now()) / 1000)) : 0;\n\n      return <FlowTimer key={key} expiresIn={expiresIn} textTemplate={textTemplate} />;\n    }\n\n    case EmbeddedFlowComponentType.CopyableText: {\n      const sourceKey: string | undefined = (component as any).source;\n      const value: string = sourceKey && options.additionalData ? String(options.additionalData[sourceKey] ?? '') : '';\n      const labelText: string | undefined = resolve((component as any).label) || undefined;\n\n      return <CopyableText key={key} label={labelText} value={value} />;\n    }\n\n    default:\n      // Gracefully handle unsupported component types by returning null\n      logger.warn(`Unsupported component type: ${component.type}. Skipping render.`);\n      return null;\n  }\n};\n\n/**\n * Processes an array of components and renders them as React elements for sign-in.\n */\nexport const renderSignInComponents = (\n  components: EmbeddedFlowComponent[],\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    /** @internal */\n    _customRenderers?: ComponentRendererMap;\n    /** @internal */\n    _theme?: any;\n    /** Additional data from the flow response */\n    additionalData?: Record<string, any>;\n    buttonClassName?: string;\n    inputClassName?: string;\n    /** Flag to determine if the step timeline has expired */\n    isTimeoutDisabled?: boolean;\n    /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n    meta?: FlowMetadataResponse | null;\n    onInputBlur?: (name: string) => void;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n    size?: 'small' | 'medium' | 'large';\n    /** Translation function for resolving {{t(...)}} expressions at render time */\n    t?: UseTranslation['t'];\n    variant?: any;\n  },\n): ReactElement[] =>\n  components\n    .map((component: any, index: any) =>\n      createAuthComponentFromFlow(\n        component,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        onInputChange,\n        'signin',\n        {\n          ...options,\n          key: component.id || index,\n        },\n      ),\n    )\n    .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for sign-up.\n */\nexport const renderSignUpComponents = (\n  components: EmbeddedFlowComponent[],\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    /** @internal */\n    _customRenderers?: ComponentRendererMap;\n    /** @internal */\n    _theme?: any;\n    /** Additional data from the flow response */\n    additionalData?: Record<string, any>;\n    buttonClassName?: string;\n    inputClassName?: string;\n    /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n    meta?: FlowMetadataResponse | null;\n    onInputBlur?: (name: string) => void;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n    size?: 'small' | 'medium' | 'large';\n    /** Translation function for resolving {{t(...)}} expressions at render time */\n    t?: UseTranslation['t'];\n    variant?: any;\n  },\n): ReactElement[] =>\n  components\n    .map((component: any, index: any) =>\n      createAuthComponentFromFlow(\n        component,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        onInputChange,\n        'signup',\n        {\n          ...options,\n          key: component.id || index,\n        },\n      ),\n    )\n    .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for recovery flow.\n */\nexport const renderRecoveryComponents = (\n  components: EmbeddedFlowComponent[],\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    /** @internal */\n    _customRenderers?: ComponentRendererMap;\n    /** @internal */\n    _theme?: any;\n    /** Additional data from the flow response */\n    additionalData?: Record<string, any>;\n    buttonClassName?: string;\n    inputClassName?: string;\n    /** Flag to determine if the step timeline has expired */\n    isTimeoutDisabled?: boolean;\n    /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n    meta?: FlowMetadataResponse | null;\n    onInputBlur?: (name: string) => void;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n    size?: 'small' | 'medium' | 'large';\n    /** Translation function for resolving {{t(...)}} expressions at render time */\n    t?: UseTranslation['t'];\n    variant?: any;\n  },\n): ReactElement[] =>\n  components\n    .map((component: any, index: any) =>\n      createAuthComponentFromFlow(\n        component,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        onInputChange,\n        'recovery',\n        {\n          ...options,\n          key: component.id || index,\n        },\n      ),\n    )\n    .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for invite user.\n * This is used by both InviteUser and AcceptInvite components.\n */\nexport const renderInviteUserComponents = (\n  components: EmbeddedFlowComponent[],\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    /** @internal */\n    _customRenderers?: ComponentRendererMap;\n    /** @internal */\n    _theme?: any;\n    /** Additional data from the flow response */\n    additionalData?: Record<string, any>;\n    buttonClassName?: string;\n    /** Function to fetch child organization units for OU_SELECT components. */\n    fetchOrganizationUnitChildren?: (\n      parentId: string,\n      limit: number,\n      offset: number,\n    ) => Promise<OrganizationUnitListResponse>;\n    inputClassName?: string;\n    /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n    meta?: FlowMetadataResponse | null;\n    onInputBlur?: (name: string) => void;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n    size?: 'small' | 'medium' | 'large';\n    /** Translation function for resolving {{t(...)}} expressions at render time */\n    t?: UseTranslation['t'];\n    variant?: any;\n  },\n): ReactElement[] =>\n  components\n    .map((component: any, index: any) =>\n      createAuthComponentFromFlow(\n        component,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        onInputChange,\n        'signup',\n        {\n          ...options,\n          key: component.id || index,\n        },\n      ),\n    )\n    .filter((x): x is ReactElement => x !== null);\n"],"mappings":"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"}
+{"version":3,"file":"AuthOptionFactory.cjs","names":["logger: ReturnType<typeof createPackageComponentLogger>","richTextClass: string","EmbeddedFlowComponentType","FieldType","providerId: any","providerMatches: any","theme: any","customRenderers: ComponentRendererMap","key: string | number","customRenderer: ComponentRenderer | undefined","identifier: string","value: string","error: string","fieldType: string","createField","actionId: string","eventType: string","buttonText: string","componentVariant: string","shouldSkipValidation: boolean","EmbeddedFlowEventType","formData: Record<string, any>","consentPrompt: ConsentPromptData | undefined","isDeny: boolean","decisions: ConsentDecisions","getConsentOptionalKey","socialButtonClassName: string","GoogleButton","GitHubButton","FacebookButton","MicrosoftButton","LinkedInButton","SignInWithEthereumButton","SmsOtpButton","startIconEl: ReactElement | null","endIconEl: ReactElement | null","Button","variant: any","Typography","Divider","selectOptions: any","Select","DatePicker","formStyles: CSSProperties","blockComponents: any","richTextAction: EmbeddedFlowComponentAction | undefined","syntheticAction: EmbeddedFlowComponent","formData: Record<string, string>","anchor: HTMLAnchorElement | null","DOMPurify","explicitHeight: string","explicitWidth: string","ImageComponent","iconName: string","IconComponent: any","flowIconRegistry","direction: string","gap: number","align: string","justify: string","stackStyle: CSSProperties","stackChildren: (ReactElement | null)[]","consentPromptRawData: ConsentPromptData | string | undefined","Consent","textTemplate: string","timeoutMs: number","FlowTimer","sourceKey: string | undefined","CopyableText"],"sources":["../../../../../src/components/presentation/auth/AuthOptionFactory.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 {css, cx} from '@emotion/css';\nimport {\n  FieldType,\n  FlowMetadataResponse,\n  EmbeddedFlowComponent,\n  EmbeddedFlowComponentAction,\n  EmbeddedFlowComponentType,\n  EmbeddedFlowTextVariant,\n  EmbeddedFlowEventType,\n  createPackageComponentLogger,\n  resolveFlowTemplateLiterals,\n  resolveEmojiUrisInHtml,\n  ConsentPurposeData,\n  ConsentPromptData,\n  ConsentDecisions,\n  ConsentPurposeDecision,\n  ConsentAttributeElement,\n  OrganizationUnitListResponse,\n} from '@thunderid/browser';\nimport DOMPurify from 'dompurify';\nimport {cloneElement, CSSProperties, ReactElement} from 'react';\nimport {\n  ComponentRenderer,\n  ComponentRenderContext,\n  ComponentRendererMap,\n} from '../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport {UseTranslation} from '../../../hooks/useTranslation';\nimport Consent from '../../adapters/Consent';\nimport {getConsentOptionalKey} from '../../adapters/ConsentCheckboxList';\nimport FacebookButton from '../../adapters/FacebookButton';\nimport FlowTimer from '../../adapters/FlowTimer';\nimport GitHubButton from '../../adapters/GitHubButton';\nimport GoogleButton from '../../adapters/GoogleButton';\nimport ImageComponent from '../../adapters/ImageComponent';\nimport LinkedInButton from '../../adapters/LinkedInButton';\nimport MicrosoftButton from '../../adapters/MicrosoftButton';\nimport SignInWithEthereumButton from '../../adapters/SignInWithEthereumButton';\nimport SmsOtpButton from '../../adapters/SmsOtpButton';\nimport {createField} from '../../factories/FieldFactory';\nimport Button from '../../primitives/Button/Button';\nimport CopyableText from '../../primitives/CopyableText/CopyableText';\nimport DatePicker from '../../primitives/DatePicker/DatePicker';\nimport Divider from '../../primitives/Divider/Divider';\nimport flowIconRegistry from '../../primitives/Icons/flowIconRegistry';\nimport Select from '../../primitives/Select/Select';\nimport Typography from '../../primitives/Typography/Typography';\nimport {TypographyVariant} from '../../primitives/Typography/Typography.styles';\n\nconst logger: ReturnType<typeof createPackageComponentLogger> = createPackageComponentLogger(\n  '@thunderid/react',\n  'AuthOptionFactory',\n);\n\n/**\n * Replaces `emoji:` URIs embedded in HTML before DOMPurify sanitization.\n *\n * DOMPurify strips unknown URI schemes from attributes (e.g. `src=\"emoji:🦊\"` → `src=\"\"`).\n * This function converts:\n *   - `<img src=\"emoji:X\" alt=\"Y\">` → `<span role=\"img\" aria-label=\"Y\">X</span>`\n *   - Any remaining `emoji:X` text occurrences → `X`\n */\n\n/** Ensures rich-text content (including all inner elements from the server) always word-wraps. */\nconst richTextClass: string = css`\n  overflow-wrap: anywhere;\n  & * {\n    overflow-wrap: anywhere;\n    word-break: break-word;\n  }\n  & .rich-text-align-left {\n    text-align: left;\n  }\n  & .rich-text-align-center {\n    text-align: center;\n  }\n  & .rich-text-align-right {\n    text-align: right;\n  }\n  & .rich-text-align-justify {\n    text-align: justify;\n  }\n  & a,\n  & .rich-text-link {\n    text-decoration: underline;\n  }\n  & span[role='img'] {\n    display: inline-block;\n  }\n`;\n\nexport type AuthType = 'signin' | 'signup' | 'recovery';\n\n/**\n * Get the appropriate FieldType for an input component.\n */\nconst getFieldType = (variant: EmbeddedFlowComponentType): FieldType => {\n  switch (variant) {\n    case EmbeddedFlowComponentType.EmailInput:\n      return FieldType.Email;\n    case EmbeddedFlowComponentType.PhoneInput:\n      return FieldType.Tel;\n    case EmbeddedFlowComponentType.PasswordInput:\n      return FieldType.Password;\n    case EmbeddedFlowComponentType.TextInput:\n    default:\n      return FieldType.Text;\n  }\n};\n\n/**\n * Get typography variant from component variant.\n */\nconst getTypographyVariant = (variant: string): any => {\n  const variantMap: Record<EmbeddedFlowTextVariant, TypographyVariant> = {\n    BODY_1: 'body1',\n    BODY_2: 'body2',\n    BUTTON_TEXT: 'button',\n    CAPTION: 'caption',\n    HEADING_1: 'h1',\n    HEADING_2: 'h2',\n    HEADING_3: 'h3',\n    HEADING_4: 'h4',\n    HEADING_5: 'h5',\n    HEADING_6: 'h6',\n    OVERLINE: 'overline',\n    SUBTITLE_1: 'subtitle1',\n    SUBTITLE_2: 'subtitle2',\n  };\n\n  return variantMap[variant] || 'h3';\n};\n\n/**\n * Check if a button text or action matches a social provider.\n */\nconst matchesSocialProvider = (\n  actionId: string,\n  eventType: string,\n  buttonText: string,\n  provider: string,\n  authType: AuthType,\n  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */\n  _componentVariant?: string,\n): boolean => {\n  const providerId: any = `${provider}_auth`;\n  const providerMatches: any = actionId === providerId || eventType === providerId;\n\n  // Social buttons usually have \"Sign in with X\" or \"Continue with X\" text,\n  // so also check button text for the provider name to increase chances of correct detection (especially for signup flows where action IDs are less standardized)\n  if (buttonText.toLowerCase().includes(provider)) {\n    return true;\n  }\n\n  // For signup, also check button text\n  if (authType === 'signup') {\n    return providerMatches || buttonText.toLowerCase().includes(provider);\n  }\n\n  return providerMatches;\n};\n\n/**\n * Create an auth component from flow component configuration.\n */\nconst createAuthComponentFromFlow = (\n  component: EmbeddedFlowComponent,\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  authType: AuthType,\n  options: {\n    /** @internal Passed from the host React component so hooks aren't called inside a loop. */\n    _customRenderers?: ComponentRendererMap;\n    /** @internal Passed from the host React component so hooks aren't called inside a loop. */\n    _theme?: any;\n    /** Additional data from the flow response, used for different dynamic data */\n    additionalData?: Record<string, any>;\n    buttonClassName?: string;\n    /** Current consent purpose being rendered. Set by CONSENT_PURPOSE block iteration. */\n    currentConsentPurpose?: ConsentPurposeData;\n    inStack?: boolean;\n    inputClassName?: string;\n    /** Flag to determine if the step timeline has expired */\n    isTimeoutDisabled?: boolean;\n    key?: string | number;\n    /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n    meta?: FlowMetadataResponse | null;\n    onInputBlur?: (name: string) => void;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n    size?: 'small' | 'medium' | 'large';\n    /** Translation function for resolving {{t(...)}} expressions at render time */\n    t?: UseTranslation['t'];\n    variant?: any;\n  } = {},\n): ReactElement | null => {\n  const theme: any = options._theme;\n  const customRenderers: ComponentRendererMap = options._customRenderers ?? {};\n\n  const key: string | number = options.key || component.id;\n\n  const customRenderer: ComponentRenderer | undefined =\n    customRenderers[component.id] ?? customRenderers[component.type];\n  if (customRenderer) {\n    const renderCtx: ComponentRenderContext = {\n      additionalData: options.additionalData,\n      authType,\n      formErrors,\n      formValues,\n      isFormValid,\n      isLoading,\n      meta: options.meta,\n      onInputBlur: options.onInputBlur,\n      onInputChange,\n      onSubmit: options.onSubmit,\n      touchedFields,\n    };\n    return customRenderer(component, renderCtx);\n  }\n\n  /** Resolve any remaining {{t()}} or {{meta()}} template expressions in a string at render time. */\n  const resolve = (text: string | undefined): string => {\n    if (!text || (!options.t && !options.meta)) {\n      return text || '';\n    }\n    return resolveFlowTemplateLiterals(text, {meta: options.meta, t: options.t || ((k: string): string => k)});\n  };\n\n  switch (component.type) {\n    case EmbeddedFlowComponentType.TextInput:\n    case EmbeddedFlowComponentType.PasswordInput:\n    case EmbeddedFlowComponentType.EmailInput:\n    case EmbeddedFlowComponentType.PhoneInput: {\n      const identifier: string = component.ref!;\n      const value: string = formValues[identifier] || '';\n      const isTouched: boolean = touchedFields[identifier] || false;\n      const error: string = isTouched ? formErrors[identifier] : undefined!;\n      const fieldType: string = getFieldType(component.type);\n\n      const field: any = createField({\n        className: cx(options.inputClassName, component.classes),\n        error,\n        id: component.id,\n        label: resolve(component.label) || '',\n        name: identifier,\n        onBlur: () => options.onInputBlur?.(identifier),\n        onChange: (newValue: string) => onInputChange(identifier, newValue),\n        placeholder: resolve(component.placeholder) || '',\n        required: component.required || false,\n        type: fieldType as FieldType,\n        value,\n      });\n\n      return cloneElement(field, {key});\n    }\n\n    case EmbeddedFlowComponentType.OtpInput: {\n      const identifier: string = component.ref!;\n      const value: string = formValues[identifier] || '';\n      const isTouched: boolean = touchedFields[identifier] || false;\n      const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n      const field: any = createField({\n        className: cx(options.inputClassName, component.classes),\n        error,\n        id: component.id,\n        label: resolve(component.label) || '',\n        name: identifier,\n        onBlur: () => options.onInputBlur?.(identifier),\n        onChange: (newValue: string) => onInputChange(identifier, newValue),\n        placeholder: resolve(component.placeholder) || '',\n        required: component.required || false,\n        type: FieldType.Otp,\n        value,\n      });\n\n      return cloneElement(field, {key});\n    }\n\n    case EmbeddedFlowComponentType.Action: {\n      const actionId: string = component.id;\n      const eventType: string = component.eventType || '';\n      const buttonText: string = resolve(component.label);\n      const componentVariant: string = component.variant || '';\n\n      // Only validate on submit type events.\n      const shouldSkipValidation: boolean = eventType.toUpperCase() === EmbeddedFlowEventType.Trigger;\n\n      const handleClick = (): any => {\n        if (options.onSubmit) {\n          const formData: Record<string, any> = {};\n          Object.keys(formValues).forEach((field: any) => {\n            // Include all values, even empty strings, to ensure proper submission\n            formData[field] = formValues[field];\n          });\n\n          // For consent actions, build the consent_decisions JSON from the form values.\n          // The allow action captures per-attribute choices; the deny action sends\n          // all purposes as rejected so the backend ConsentExecutor can fail the flow.\n          const consentPrompt: ConsentPromptData | undefined = options.additionalData?.['consentPrompt'] as\n            | ConsentPromptData\n            | undefined;\n          if (consentPrompt && eventType.toUpperCase() === EmbeddedFlowEventType.Submit) {\n            const isDeny: boolean = componentVariant.toLowerCase() !== 'primary';\n            const decisions: ConsentDecisions = {\n              purposes: consentPrompt.purposes.map(\n                (p: ConsentPurposeData): ConsentPurposeDecision => ({\n                  approved: !isDeny,\n                  elements: [\n                    ...p.essential.map((e): ConsentAttributeElement => ({approved: !isDeny, name: e.name})),\n                    ...p.optional.map(\n                      (e): ConsentAttributeElement => ({\n                        approved: isDeny ? false : formValues[getConsentOptionalKey(p.purposeId, e.name)] !== 'false',\n                        name: e.name,\n                      }),\n                    ),\n                  ],\n                  purposeName: p.purposeName!,\n                }),\n              ),\n            };\n            formData['consent_decisions'] = JSON.stringify(decisions);\n          }\n\n          options.onSubmit(component, formData, shouldSkipValidation);\n        }\n      };\n\n      // Render branded social login buttons for known action IDs\n\n      const socialButtonClassName: string = cx(options.buttonClassName, component.classes);\n\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'google', authType, componentVariant)) {\n        return <GoogleButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n      }\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'github', authType, componentVariant)) {\n        return <GitHubButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n      }\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'facebook', authType, componentVariant)) {\n        return <FacebookButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n      }\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'microsoft', authType, componentVariant)) {\n        return <MicrosoftButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n      }\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'linkedin', authType, componentVariant)) {\n        return <LinkedInButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n      }\n      if (matchesSocialProvider(actionId, eventType, buttonText, 'ethereum', authType, componentVariant)) {\n        return (\n          <SignInWithEthereumButton\n            key={key}\n            id={component.id}\n            onClick={handleClick}\n            className={socialButtonClassName}\n          />\n        );\n      }\n      if (actionId === 'prompt_mobile' || eventType === 'prompt_mobile') {\n        return <SmsOtpButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n      }\n\n      const startIconEl: ReactElement | null = component.startIcon ? (\n        <img\n          src={component.startIcon}\n          alt=\"\"\n          aria-hidden=\"true\"\n          style={{height: '1.25em', objectFit: 'contain', width: '1.25em'}}\n        />\n      ) : null;\n\n      const endIconEl: ReactElement | null = component.endIcon ? (\n        <img\n          src={component.endIcon}\n          alt=\"\"\n          aria-hidden=\"true\"\n          style={{height: '1.25em', objectFit: 'contain', width: '1.25em'}}\n        />\n      ) : null;\n\n      return (\n        <Button\n          fullWidth\n          key={key}\n          id={component.id}\n          onClick={handleClick}\n          disabled={\n            isLoading ||\n            (!isFormValid && !shouldSkipValidation) ||\n            options.isTimeoutDisabled ||\n            (component as any).config?.disabled\n          }\n          className={cx(options.buttonClassName, component.classes)}\n          data-testid=\"thunderid-signin-submit\"\n          variant={component.variant?.toLowerCase() === 'primary' ? 'solid' : 'outline'}\n          color={component.variant?.toLowerCase() === 'primary' ? 'primary' : 'secondary'}\n          startIcon={startIconEl}\n          endIcon={endIconEl}\n        >\n          {buttonText || 'Submit'}\n        </Button>\n      );\n    }\n\n    case EmbeddedFlowComponentType.Text: {\n      const variant: any = getTypographyVariant(component.variant!);\n      return (\n        <Typography\n          key={key}\n          id={component.id}\n          className={component.classes}\n          variant={variant}\n          style={{\n            marginBottom: 2,\n            textAlign:\n              typeof component?.align === 'string' ? (component.align as React.CSSProperties['textAlign']) : 'left',\n          }}\n        >\n          {resolve(component.label)}\n        </Typography>\n      );\n    }\n\n    case EmbeddedFlowComponentType.Divider: {\n      return <Divider key={key}>{resolve(component.label) || ''}</Divider>;\n    }\n\n    case EmbeddedFlowComponentType.Select: {\n      const identifier: string = component.ref!;\n      const value: string = formValues[identifier] || '';\n      const isTouched: boolean = touchedFields[identifier] || false;\n      const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n      // Options are pre-sanitized by flowTransformer to {value: string, label: string} format\n      const selectOptions: any = (component.options || []).map((opt: any) => ({\n        label: typeof opt === 'string' ? opt : String(opt.label ?? opt.value ?? ''),\n        value: typeof opt === 'string' ? opt : String(opt.value ?? ''),\n      }));\n\n      return (\n        <Select\n          key={key}\n          id={component.id}\n          name={identifier}\n          label={resolve(component.label) || ''}\n          placeholder={resolve(component.placeholder)}\n          required={component.required}\n          options={selectOptions}\n          value={value}\n          error={error}\n          onChange={(e: any): void => onInputChange(identifier, e.target.value)}\n          onBlur={(): any => options.onInputBlur?.(identifier)}\n          className={cx(options.inputClassName, component.classes)}\n        />\n      );\n    }\n\n    case EmbeddedFlowComponentType.DateInput: {\n      const identifier: string = component.ref!;\n      const value: string = formValues[identifier] || '';\n      const isTouched: boolean = touchedFields[identifier] || false;\n      const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n      return (\n        <DatePicker\n          key={key}\n          id={component.id}\n          name={identifier}\n          label={resolve(component.label) || ''}\n          placeholder={resolve(component.placeholder)}\n          required={component.required}\n          dateFormat={component.dateFormat}\n          value={value}\n          error={error}\n          onChange={(e: any): void => onInputChange(identifier, e.target.value)}\n          onBlur={(): any => options.onInputBlur?.(identifier)}\n          className={cx(options.inputClassName, component.classes)}\n        />\n      );\n    }\n\n    case EmbeddedFlowComponentType.OuSelect: {\n      logger.warn('OU_SELECT component type is not supported. Skipping render.');\n      return null;\n    }\n\n    case EmbeddedFlowComponentType.Block: {\n      if (component.components && component.components.length > 0) {\n        const formStyles: CSSProperties = {\n          display: 'flex',\n          flexDirection: 'column',\n          gap: `calc(${theme?.vars?.spacing?.unit ?? '4px'} * 2)`,\n        };\n\n        const blockComponents: any = component.components\n          .map((childComponent: any, index: any) =>\n            createAuthComponentFromFlow(\n              childComponent,\n              formValues,\n              touchedFields,\n              formErrors,\n              isLoading,\n              isFormValid,\n              onInputChange,\n              authType,\n              {\n                ...options,\n                key: childComponent.id || `${component.id}_${index}`,\n              },\n            ),\n          )\n          .filter(Boolean);\n\n        return (\n          <form id={component.id} key={key} className={component.classes} style={formStyles}>\n            {blockComponents}\n          </form>\n        );\n      }\n      return null;\n    }\n\n    case EmbeddedFlowComponentType.RichText: {\n      const richTextAction: EmbeddedFlowComponentAction | undefined = component.action;\n\n      const dispatchRichTextAction = (): void => {\n        if (!richTextAction || !options.onSubmit) {\n          return;\n        }\n        const eventTypeValue = String(richTextAction.eventType ?? EmbeddedFlowEventType.Submit);\n        const shouldSkipValidation: boolean = eventTypeValue.toUpperCase() === String(EmbeddedFlowEventType.Trigger);\n        const syntheticAction: EmbeddedFlowComponent = {\n          eventType: eventTypeValue,\n          id: `${component.id}_action`,\n          ref: richTextAction.ref,\n          type: EmbeddedFlowComponentType.Action,\n        };\n        const formData: Record<string, string> = {};\n        Object.keys(formValues).forEach((field: string) => {\n          formData[field] = formValues[field];\n        });\n        options.onSubmit(syntheticAction, formData, shouldSkipValidation);\n      };\n\n      // Sentinel-anchor contract: only anchors carrying `data-action-ref` equal to\n      // richTextAction.ref dispatch the action. Anchors without the sentinel (or with\n      // a non-matching one) are treated as ordinary links and are ignored here.\n      const isMatchingSentinelAnchor = (anchor: HTMLAnchorElement): boolean =>\n        anchor.getAttribute('data-action-ref') === richTextAction?.ref;\n\n      const handleRichTextClick: React.MouseEventHandler<HTMLDivElement> | undefined = richTextAction\n        ? (event: React.MouseEvent<HTMLDivElement>): void => {\n            const anchor: HTMLAnchorElement | null = (event.target as HTMLElement).closest('a');\n            if (!anchor || !isMatchingSentinelAnchor(anchor)) {\n              return;\n            }\n            event.preventDefault();\n            dispatchRichTextAction();\n          }\n        : undefined;\n\n      const handleRichTextKeyDown: React.KeyboardEventHandler<HTMLDivElement> | undefined = richTextAction\n        ? (event: React.KeyboardEvent<HTMLDivElement>): void => {\n            if (event.key !== 'Enter' && event.key !== ' ') {\n              return;\n            }\n            const anchor: HTMLAnchorElement | null = (event.target as HTMLElement).closest('a');\n            if (!anchor || !isMatchingSentinelAnchor(anchor)) {\n              return;\n            }\n            event.preventDefault();\n            dispatchRichTextAction();\n          }\n        : undefined;\n\n      return (\n        // Sentinel anchors are made keyboard-operable via the container's onKeyDown\n        // (Enter/Space activate the matching anchor). Authors should ensure the anchor\n        // is focusable (`href` or `tabIndex`); the click+keydown delegation covers both\n        // pointer and keyboard activation once focus lands on the anchor.\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div\n          key={key}\n          className={richTextClass}\n          onClick={handleRichTextClick}\n          onKeyDown={handleRichTextKeyDown}\n          // Manually sanitizes with `DOMPurify`.\n          // IMPORTANT: DO NOT REMOVE OR MODIFY THIS SANITIZATION STEP.\n          dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(resolveEmojiUrisInHtml(resolve(component.label)))}}\n        />\n      );\n    }\n\n    case EmbeddedFlowComponentType.Image: {\n      const explicitHeight: string = resolve(component.height?.toString());\n      const explicitWidth: string = resolve(component.width?.toString());\n      return (\n        <ImageComponent\n          key={key}\n          component={\n            {\n              config: {\n                alt: resolve(component.alt) || resolve(component.label) || 'Image',\n                height: explicitHeight || (options.inStack ? '50' : 'auto'),\n                src: resolve(component.src),\n                width: explicitWidth || (options.inStack ? '50' : '100%'),\n              },\n            } as any\n          }\n          formErrors={undefined!}\n          formValues={undefined!}\n          isFormValid={false}\n          isLoading={false}\n          onInputChange={(): void => {\n            throw new Error('Function not implemented.');\n          }}\n          touchedFields={undefined!}\n        />\n      );\n    }\n\n    case EmbeddedFlowComponentType.Icon: {\n      const iconName: string = component.name || '';\n      const IconComponent: any = flowIconRegistry[iconName];\n      if (!IconComponent) {\n        logger.warn(`Unknown icon name: \"${iconName}\". Skipping render.`);\n        return null;\n      }\n      return <IconComponent key={key} size={component.size || 24} color={component.color || 'currentColor'} />;\n    }\n\n    case EmbeddedFlowComponentType.Stack: {\n      const direction: string = (component as any).direction || 'row';\n      const gap: number = (component as any).gap ?? 2;\n      const align: string = (component as any).align || 'center';\n      const justify: string = (component as any).justify || 'flex-start';\n\n      const stackStyle: CSSProperties = {\n        alignItems: align,\n        display: 'flex',\n        flexDirection: direction as CSSProperties['flexDirection'],\n        flexWrap: 'wrap',\n        gap: `${gap * 0.5}rem`,\n        justifyContent: justify,\n      };\n\n      const stackChildren: (ReactElement | null)[] = component.components\n        ? component.components.map((childComponent: any, index: number) =>\n            createAuthComponentFromFlow(\n              childComponent,\n              formValues,\n              touchedFields,\n              formErrors,\n              isLoading,\n              isFormValid,\n              onInputChange,\n              authType,\n              {\n                ...options,\n                inStack: true,\n                key: childComponent.id || `${component.id}_${index}`,\n              },\n            ),\n          )\n        : [];\n\n      return (\n        <div key={key} id={component.id} className={component.classes} style={stackStyle}>\n          {stackChildren}\n        </div>\n      );\n    }\n\n    case EmbeddedFlowComponentType.Consent: {\n      const consentPromptRawData: ConsentPromptData | string | undefined = options.additionalData?.['consentPrompt'];\n\n      return (\n        <Consent\n          key={key}\n          consentData={consentPromptRawData as any}\n          formValues={formValues}\n          onInputChange={onInputChange}\n        />\n      );\n    }\n\n    case EmbeddedFlowComponentType.Timer: {\n      const textTemplate: string = resolve((component as any).label) || 'Time remaining: {time}';\n      const timeoutMs: number = Number(options.additionalData?.['stepTimeout']) || 0;\n      const expiresIn: number = timeoutMs > 0 ? Math.max(0, Math.floor((timeoutMs - Date.now()) / 1000)) : 0;\n\n      return <FlowTimer key={key} expiresIn={expiresIn} textTemplate={textTemplate} />;\n    }\n\n    case EmbeddedFlowComponentType.CopyableText: {\n      const sourceKey: string | undefined = (component as any).source;\n      const value: string = sourceKey && options.additionalData ? String(options.additionalData[sourceKey] ?? '') : '';\n      const labelText: string | undefined = resolve((component as any).label) || undefined;\n\n      return <CopyableText key={key} label={labelText} value={value} />;\n    }\n\n    default:\n      // Gracefully handle unsupported component types by returning null\n      logger.warn(`Unsupported component type: ${component.type}. Skipping render.`);\n      return null;\n  }\n};\n\n/**\n * Processes an array of components and renders them as React elements for sign-in.\n */\nexport const renderSignInComponents = (\n  components: EmbeddedFlowComponent[],\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    /** @internal */\n    _customRenderers?: ComponentRendererMap;\n    /** @internal */\n    _theme?: any;\n    /** Additional data from the flow response */\n    additionalData?: Record<string, any>;\n    buttonClassName?: string;\n    inputClassName?: string;\n    /** Flag to determine if the step timeline has expired */\n    isTimeoutDisabled?: boolean;\n    /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n    meta?: FlowMetadataResponse | null;\n    onInputBlur?: (name: string) => void;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n    size?: 'small' | 'medium' | 'large';\n    /** Translation function for resolving {{t(...)}} expressions at render time */\n    t?: UseTranslation['t'];\n    variant?: any;\n  },\n): ReactElement[] =>\n  components\n    .map((component: any, index: any) =>\n      createAuthComponentFromFlow(\n        component,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        onInputChange,\n        'signin',\n        {\n          ...options,\n          key: component.id || index,\n        },\n      ),\n    )\n    .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for sign-up.\n */\nexport const renderSignUpComponents = (\n  components: EmbeddedFlowComponent[],\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    /** @internal */\n    _customRenderers?: ComponentRendererMap;\n    /** @internal */\n    _theme?: any;\n    /** Additional data from the flow response */\n    additionalData?: Record<string, any>;\n    buttonClassName?: string;\n    inputClassName?: string;\n    /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n    meta?: FlowMetadataResponse | null;\n    onInputBlur?: (name: string) => void;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n    size?: 'small' | 'medium' | 'large';\n    /** Translation function for resolving {{t(...)}} expressions at render time */\n    t?: UseTranslation['t'];\n    variant?: any;\n  },\n): ReactElement[] =>\n  components\n    .map((component: any, index: any) =>\n      createAuthComponentFromFlow(\n        component,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        onInputChange,\n        'signup',\n        {\n          ...options,\n          key: component.id || index,\n        },\n      ),\n    )\n    .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for recovery flow.\n */\nexport const renderRecoveryComponents = (\n  components: EmbeddedFlowComponent[],\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    /** @internal */\n    _customRenderers?: ComponentRendererMap;\n    /** @internal */\n    _theme?: any;\n    /** Additional data from the flow response */\n    additionalData?: Record<string, any>;\n    buttonClassName?: string;\n    inputClassName?: string;\n    /** Flag to determine if the step timeline has expired */\n    isTimeoutDisabled?: boolean;\n    /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n    meta?: FlowMetadataResponse | null;\n    onInputBlur?: (name: string) => void;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n    size?: 'small' | 'medium' | 'large';\n    /** Translation function for resolving {{t(...)}} expressions at render time */\n    t?: UseTranslation['t'];\n    variant?: any;\n  },\n): ReactElement[] =>\n  components\n    .map((component: any, index: any) =>\n      createAuthComponentFromFlow(\n        component,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        onInputChange,\n        'recovery',\n        {\n          ...options,\n          key: component.id || index,\n        },\n      ),\n    )\n    .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for invite user.\n * This is used by both InviteUser and AcceptInvite components.\n */\nexport const renderInviteUserComponents = (\n  components: EmbeddedFlowComponent[],\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    /** @internal */\n    _customRenderers?: ComponentRendererMap;\n    /** @internal */\n    _theme?: any;\n    /** Additional data from the flow response */\n    additionalData?: Record<string, any>;\n    buttonClassName?: string;\n    /** Function to fetch child organization units for OU_SELECT components. */\n    fetchOrganizationUnitChildren?: (\n      parentId: string,\n      limit: number,\n      offset: number,\n    ) => Promise<OrganizationUnitListResponse>;\n    inputClassName?: string;\n    /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n    meta?: FlowMetadataResponse | null;\n    onInputBlur?: (name: string) => void;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n    size?: 'small' | 'medium' | 'large';\n    /** Translation function for resolving {{t(...)}} expressions at render time */\n    t?: UseTranslation['t'];\n    variant?: any;\n  },\n): ReactElement[] =>\n  components\n    .map((component: any, index: any) =>\n      createAuthComponentFromFlow(\n        component,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        onInputChange,\n        'signup',\n        {\n          ...options,\n          key: component.id || index,\n        },\n      ),\n    )\n    .filter((x): x is ReactElement => x !== null);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAMA,+DACJ,oBACA,oBACD;;;;;;;;;;AAYD,MAAMC,gBAAwB,iBAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCjC,MAAM,gBAAgB,YAAkD;AACtE,SAAQ,SAAR;EACE,KAAKC,8CAA0B,WAC7B,QAAOC,8BAAU;EACnB,KAAKD,8CAA0B,WAC7B,QAAOC,8BAAU;EACnB,KAAKD,8CAA0B,cAC7B,QAAOC,8BAAU;EACnB,KAAKD,8CAA0B;EAC/B,QACE,QAAOC,8BAAU;;;;;;AAOvB,MAAM,wBAAwB,YAAyB;AAiBrD,QAhBuE;EACrE,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,SAAS;EACT,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,UAAU;EACV,YAAY;EACZ,YAAY;EACb,CAEiB,YAAY;;;;;AAMhC,MAAM,yBACJ,UACA,WACA,YACA,UACA,UAEA,sBACY;CACZ,MAAMC,aAAkB,GAAG,SAAS;CACpC,MAAMC,kBAAuB,aAAa,cAAc,cAAc;AAItE,KAAI,WAAW,aAAa,CAAC,SAAS,SAAS,CAC7C,QAAO;AAIT,KAAI,aAAa,SACf,QAAO,mBAAmB,WAAW,aAAa,CAAC,SAAS,SAAS;AAGvE,QAAO;;;;;AAMT,MAAM,+BACJ,WACA,YACA,eACA,YACA,WACA,aACA,eACA,UACA,UAuBI,EAAE,KACkB;CACxB,MAAMC,QAAa,QAAQ;CAC3B,MAAMC,kBAAwC,QAAQ,oBAAoB,EAAE;CAE5E,MAAMC,MAAuB,QAAQ,OAAO,UAAU;CAEtD,MAAMC,iBACJ,gBAAgB,UAAU,OAAO,gBAAgB,UAAU;AAC7D,KAAI,eAcF,QAAO,eAAe,WAboB;EACxC,gBAAgB,QAAQ;EACxB;EACA;EACA;EACA;EACA;EACA,MAAM,QAAQ;EACd,aAAa,QAAQ;EACrB;EACA,UAAU,QAAQ;EAClB;EACD,CAC0C;;CAI7C,MAAM,WAAW,SAAqC;AACpD,MAAI,CAAC,QAAS,CAAC,QAAQ,KAAK,CAAC,QAAQ,KACnC,QAAO,QAAQ;AAEjB,8DAAmC,MAAM;GAAC,MAAM,QAAQ;GAAM,GAAG,QAAQ,OAAO,MAAsB;GAAG,CAAC;;AAG5G,SAAQ,UAAU,MAAlB;EACE,KAAKP,8CAA0B;EAC/B,KAAKA,8CAA0B;EAC/B,KAAKA,8CAA0B;EAC/B,KAAKA,8CAA0B,YAAY;GACzC,MAAMQ,aAAqB,UAAU;GACrC,MAAMC,QAAgB,WAAW,eAAe;GAEhD,MAAMC,QADqB,cAAc,eAAe,QACtB,WAAW,cAAc;GAC3D,MAAMC,YAAoB,aAAa,UAAU,KAAK;AAgBtD,kCAdmBC,iCAAY;IAC7B,iCAAc,QAAQ,gBAAgB,UAAU,QAAQ;IACxD;IACA,IAAI,UAAU;IACd,OAAO,QAAQ,UAAU,MAAM,IAAI;IACnC,MAAM;IACN,cAAc,QAAQ,cAAc,WAAW;IAC/C,WAAW,aAAqB,cAAc,YAAY,SAAS;IACnE,aAAa,QAAQ,UAAU,YAAY,IAAI;IAC/C,UAAU,UAAU,YAAY;IAChC,MAAM;IACN;IACD,CAAC,EAEyB,EAAC,KAAI,CAAC;;EAGnC,KAAKZ,8CAA0B,UAAU;GACvC,MAAMQ,aAAqB,UAAU;GACrC,MAAMC,QAAgB,WAAW,eAAe;GAEhD,MAAMC,QADqB,cAAc,eAAe,QACtB,WAAW,cAAc;AAgB3D,kCAdmBE,iCAAY;IAC7B,iCAAc,QAAQ,gBAAgB,UAAU,QAAQ;IACxD;IACA,IAAI,UAAU;IACd,OAAO,QAAQ,UAAU,MAAM,IAAI;IACnC,MAAM;IACN,cAAc,QAAQ,cAAc,WAAW;IAC/C,WAAW,aAAqB,cAAc,YAAY,SAAS;IACnE,aAAa,QAAQ,UAAU,YAAY,IAAI;IAC/C,UAAU,UAAU,YAAY;IAChC,MAAMX,8BAAU;IAChB;IACD,CAAC,EAEyB,EAAC,KAAI,CAAC;;EAGnC,KAAKD,8CAA0B,QAAQ;GACrC,MAAMa,WAAmB,UAAU;GACnC,MAAMC,YAAoB,UAAU,aAAa;GACjD,MAAMC,aAAqB,QAAQ,UAAU,MAAM;GACnD,MAAMC,mBAA2B,UAAU,WAAW;GAGtD,MAAMC,uBAAgC,UAAU,aAAa,KAAKC,0CAAsB;GAExF,MAAM,oBAAyB;AAC7B,QAAI,QAAQ,UAAU;KACpB,MAAMC,WAAgC,EAAE;AACxC,YAAO,KAAK,WAAW,CAAC,SAAS,UAAe;AAE9C,eAAS,SAAS,WAAW;OAC7B;KAKF,MAAMC,gBAA+C,QAAQ,iBAAiB;AAG9E,SAAI,iBAAiB,UAAU,aAAa,KAAKF,0CAAsB,QAAQ;MAC7E,MAAMG,SAAkB,iBAAiB,aAAa,KAAK;MAC3D,MAAMC,YAA8B,EAClC,UAAU,cAAc,SAAS,KAC9B,OAAmD;OAClD,UAAU,CAAC;OACX,UAAU,CACR,GAAG,EAAE,UAAU,KAAK,OAAgC;QAAC,UAAU,CAAC;QAAQ,MAAM,EAAE;QAAK,EAAE,EACvF,GAAG,EAAE,SAAS,KACX,OAAgC;QAC/B,UAAU,SAAS,QAAQ,WAAWC,kDAAsB,EAAE,WAAW,EAAE,KAAK,MAAM;QACtF,MAAM,EAAE;QACT,EACF,CACF;OACD,aAAa,EAAE;OAChB,EACF,EACF;AACD,eAAS,uBAAuB,KAAK,UAAU,UAAU;;AAG3D,aAAQ,SAAS,WAAW,UAAU,qBAAqB;;;GAM/D,MAAMC,8CAAmC,QAAQ,iBAAiB,UAAU,QAAQ;AAEpF,OAAI,sBAAsB,UAAU,WAAW,YAAY,UAAU,UAAU,iBAAiB,CAC9F,QAAO,2CAACC;IAAuB,IAAI,UAAU;IAAI,SAAS;IAAa,WAAW;MAAxD,IAAiF;AAE7G,OAAI,sBAAsB,UAAU,WAAW,YAAY,UAAU,UAAU,iBAAiB,CAC9F,QAAO,2CAACC;IAAuB,IAAI,UAAU;IAAI,SAAS;IAAa,WAAW;MAAxD,IAAiF;AAE7G,OAAI,sBAAsB,UAAU,WAAW,YAAY,YAAY,UAAU,iBAAiB,CAChG,QAAO,2CAACC;IAAyB,IAAI,UAAU;IAAI,SAAS;IAAa,WAAW;MAAxD,IAAiF;AAE/G,OAAI,sBAAsB,UAAU,WAAW,YAAY,aAAa,UAAU,iBAAiB,CACjG,QAAO,2CAACC;IAA0B,IAAI,UAAU;IAAI,SAAS;IAAa,WAAW;MAAxD,IAAiF;AAEhH,OAAI,sBAAsB,UAAU,WAAW,YAAY,YAAY,UAAU,iBAAiB,CAChG,QAAO,2CAACC;IAAyB,IAAI,UAAU;IAAI,SAAS;IAAa,WAAW;MAAxD,IAAiF;AAE/G,OAAI,sBAAsB,UAAU,WAAW,YAAY,YAAY,UAAU,iBAAiB,CAChG,QACE,2CAACC;IAEC,IAAI,UAAU;IACd,SAAS;IACT,WAAW;MAHN,IAIL;AAGN,OAAI,aAAa,mBAAmB,cAAc,gBAChD,QAAO,2CAACC;IAAuB,IAAI,UAAU;IAAI,SAAS;IAAa,WAAW;MAAxD,IAAiF;GAG7G,MAAMC,cAAmC,UAAU,YACjD,2CAAC;IACC,KAAK,UAAU;IACf,KAAI;IACJ,eAAY;IACZ,OAAO;KAAC,QAAQ;KAAU,WAAW;KAAW,OAAO;KAAS;KAChE,GACA;GAEJ,MAAMC,YAAiC,UAAU,UAC/C,2CAAC;IACC,KAAK,UAAU;IACf,KAAI;IACJ,eAAY;IACZ,OAAO;KAAC,QAAQ;KAAU,WAAW;KAAW,OAAO;KAAS;KAChE,GACA;AAEJ,UACE,2CAACC;IACC;IAEA,IAAI,UAAU;IACd,SAAS;IACT,UACE,aACC,CAAC,eAAe,CAAC,wBAClB,QAAQ,qBACP,UAAkB,QAAQ;IAE7B,iCAAc,QAAQ,iBAAiB,UAAU,QAAQ;IACzD,eAAY;IACZ,SAAS,UAAU,SAAS,aAAa,KAAK,YAAY,UAAU;IACpE,OAAO,UAAU,SAAS,aAAa,KAAK,YAAY,YAAY;IACpE,WAAW;IACX,SAAS;cAER,cAAc;MAhBV,IAiBE;;EAIb,KAAKlC,8CAA0B,MAAM;GACnC,MAAMmC,UAAe,qBAAqB,UAAU,QAAS;AAC7D,UACE,2CAACC;IAEC,IAAI,UAAU;IACd,WAAW,UAAU;IACZ;IACT,OAAO;KACL,cAAc;KACd,WACE,OAAO,WAAW,UAAU,WAAY,UAAU,QAA6C;KAClG;cAEA,QAAQ,UAAU,MAAM;MAVpB,IAWM;;EAIjB,KAAKpC,8CAA0B,QAC7B,QAAO,2CAACqC,qCAAmB,QAAQ,UAAU,MAAM,IAAI,MAAlC,IAA+C;EAGtE,KAAKrC,8CAA0B,QAAQ;GACrC,MAAMQ,aAAqB,UAAU;GACrC,MAAMC,QAAgB,WAAW,eAAe;GAEhD,MAAMC,QADqB,cAAc,eAAe,QACtB,WAAW,cAAc;GAG3D,MAAM4B,iBAAsB,UAAU,WAAW,EAAE,EAAE,KAAK,SAAc;IACtE,OAAO,OAAO,QAAQ,WAAW,MAAM,OAAO,IAAI,SAAS,IAAI,SAAS,GAAG;IAC3E,OAAO,OAAO,QAAQ,WAAW,MAAM,OAAO,IAAI,SAAS,GAAG;IAC/D,EAAE;AAEH,UACE,2CAACC;IAEC,IAAI,UAAU;IACd,MAAM;IACN,OAAO,QAAQ,UAAU,MAAM,IAAI;IACnC,aAAa,QAAQ,UAAU,YAAY;IAC3C,UAAU,UAAU;IACpB,SAAS;IACF;IACA;IACP,WAAW,MAAiB,cAAc,YAAY,EAAE,OAAO,MAAM;IACrE,cAAmB,QAAQ,cAAc,WAAW;IACpD,iCAAc,QAAQ,gBAAgB,UAAU,QAAQ;MAXnD,IAYL;;EAIN,KAAKvC,8CAA0B,WAAW;GACxC,MAAMQ,aAAqB,UAAU;GACrC,MAAMC,QAAgB,WAAW,eAAe;GAEhD,MAAMC,QADqB,cAAc,eAAe,QACtB,WAAW,cAAc;AAE3D,UACE,2CAAC8B;IAEC,IAAI,UAAU;IACd,MAAM;IACN,OAAO,QAAQ,UAAU,MAAM,IAAI;IACnC,aAAa,QAAQ,UAAU,YAAY;IAC3C,UAAU,UAAU;IACpB,YAAY,UAAU;IACf;IACA;IACP,WAAW,MAAiB,cAAc,YAAY,EAAE,OAAO,MAAM;IACrE,cAAmB,QAAQ,cAAc,WAAW;IACpD,iCAAc,QAAQ,gBAAgB,UAAU,QAAQ;MAXnD,IAYL;;EAIN,KAAKxC,8CAA0B;AAC7B,UAAO,KAAK,8DAA8D;AAC1E,UAAO;EAGT,KAAKA,8CAA0B;AAC7B,OAAI,UAAU,cAAc,UAAU,WAAW,SAAS,GAAG;IAC3D,MAAMyC,aAA4B;KAChC,SAAS;KACT,eAAe;KACf,KAAK,QAAQ,OAAO,MAAM,SAAS,QAAQ,MAAM;KAClD;IAED,MAAMC,kBAAuB,UAAU,WACpC,KAAK,gBAAqB,UACzB,4BACE,gBACA,YACA,eACA,YACA,WACA,aACA,eACA,UACA;KACE,GAAG;KACH,KAAK,eAAe,MAAM,GAAG,UAAU,GAAG,GAAG;KAC9C,CACF,CACF,CACA,OAAO,QAAQ;AAElB,WACE,2CAAC;KAAK,IAAI,UAAU;KAAc,WAAW,UAAU;KAAS,OAAO;eACpE;OAD0B,IAEtB;;AAGX,UAAO;EAGT,KAAK1C,8CAA0B,UAAU;GACvC,MAAM2C,iBAA0D,UAAU;GAE1E,MAAM,+BAAqC;AACzC,QAAI,CAAC,kBAAkB,CAAC,QAAQ,SAC9B;IAEF,MAAM,iBAAiB,OAAO,eAAe,aAAazB,0CAAsB,OAAO;IACvF,MAAMD,uBAAgC,eAAe,aAAa,KAAK,OAAOC,0CAAsB,QAAQ;IAC5G,MAAM0B,kBAAyC;KAC7C,WAAW;KACX,IAAI,GAAG,UAAU,GAAG;KACpB,KAAK,eAAe;KACpB,MAAM5C,8CAA0B;KACjC;IACD,MAAM6C,WAAmC,EAAE;AAC3C,WAAO,KAAK,WAAW,CAAC,SAAS,UAAkB;AACjD,cAAS,SAAS,WAAW;MAC7B;AACF,YAAQ,SAAS,iBAAiB,UAAU,qBAAqB;;GAMnE,MAAM,4BAA4B,WAChC,OAAO,aAAa,kBAAkB,KAAK,gBAAgB;AA2B7D,UAME,2CAAC;IAEC,WAAW;IACX,SAlC6E,kBAC5E,UAAkD;KACjD,MAAMC,SAAoC,MAAM,OAAuB,QAAQ,IAAI;AACnF,SAAI,CAAC,UAAU,CAAC,yBAAyB,OAAO,CAC9C;AAEF,WAAM,gBAAgB;AACtB,6BAAwB;QAE1B;IA0BA,WAxBkF,kBACjF,UAAqD;AACpD,SAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC;KAEF,MAAMA,SAAoC,MAAM,OAAuB,QAAQ,IAAI;AACnF,SAAI,CAAC,UAAU,CAAC,yBAAyB,OAAO,CAC9C;AAEF,WAAM,gBAAgB;AACtB,6BAAwB;QAE1B;IAeA,yBAAyB,EAAC,QAAQC,kBAAU,yDAAgC,QAAQ,UAAU,MAAM,CAAC,CAAC,EAAC;MANlG,IAOL;;EAIN,KAAK/C,8CAA0B,OAAO;GACpC,MAAMgD,iBAAyB,QAAQ,UAAU,QAAQ,UAAU,CAAC;GACpE,MAAMC,gBAAwB,QAAQ,UAAU,OAAO,UAAU,CAAC;AAClE,UACE,2CAACC;IAEC,WACE,EACE,QAAQ;KACN,KAAK,QAAQ,UAAU,IAAI,IAAI,QAAQ,UAAU,MAAM,IAAI;KAC3D,QAAQ,mBAAmB,QAAQ,UAAU,OAAO;KACpD,KAAK,QAAQ,UAAU,IAAI;KAC3B,OAAO,kBAAkB,QAAQ,UAAU,OAAO;KACnD,EACF;IAEH,YAAY;IACZ,YAAY;IACZ,aAAa;IACb,WAAW;IACX,qBAA2B;AACzB,WAAM,IAAI,MAAM,4BAA4B;;IAE9C,eAAe;MAlBV,IAmBL;;EAIN,KAAKlD,8CAA0B,MAAM;GACnC,MAAMmD,WAAmB,UAAU,QAAQ;GAC3C,MAAMC,gBAAqBC,iCAAiB;AAC5C,OAAI,CAAC,eAAe;AAClB,WAAO,KAAK,uBAAuB,SAAS,qBAAqB;AACjE,WAAO;;AAET,UAAO,2CAAC;IAAwB,MAAM,UAAU,QAAQ;IAAI,OAAO,UAAU,SAAS;MAA3D,IAA6E;;EAG1G,KAAKrD,8CAA0B,OAAO;GACpC,MAAMsD,YAAqB,UAAkB,aAAa;GAC1D,MAAMC,MAAe,UAAkB,OAAO;GAC9C,MAAMC,QAAiB,UAAkB,SAAS;GAClD,MAAMC,UAAmB,UAAkB,WAAW;GAEtD,MAAMC,aAA4B;IAChC,YAAY;IACZ,SAAS;IACT,eAAe;IACf,UAAU;IACV,KAAK,GAAG,MAAM,GAAI;IAClB,gBAAgB;IACjB;GAED,MAAMC,gBAAyC,UAAU,aACrD,UAAU,WAAW,KAAK,gBAAqB,UAC7C,4BACE,gBACA,YACA,eACA,YACA,WACA,aACA,eACA,UACA;IACE,GAAG;IACH,SAAS;IACT,KAAK,eAAe,MAAM,GAAG,UAAU,GAAG,GAAG;IAC9C,CACF,CACF,GACD,EAAE;AAEN,UACE,2CAAC;IAAc,IAAI,UAAU;IAAI,WAAW,UAAU;IAAS,OAAO;cACnE;MADO,IAEJ;;EAIV,KAAK3D,8CAA0B,SAAS;GACtC,MAAM4D,uBAA+D,QAAQ,iBAAiB;AAE9F,UACE,2CAACC;IAEC,aAAa;IACD;IACG;MAHV,IAIL;;EAIN,KAAK7D,8CAA0B,OAAO;GACpC,MAAM8D,eAAuB,QAAS,UAAkB,MAAM,IAAI;GAClE,MAAMC,YAAoB,OAAO,QAAQ,iBAAiB,eAAe,IAAI;AAG7E,UAAO,2CAACC;IAAoB,WAFF,YAAY,IAAI,KAAK,IAAI,GAAG,KAAK,OAAO,YAAY,KAAK,KAAK,IAAI,IAAK,CAAC,GAAG;IAErC;MAAzC,IAAyD;;EAGlF,KAAKhE,8CAA0B,cAAc;GAC3C,MAAMiE,YAAiC,UAAkB;GACzD,MAAMxD,QAAgB,aAAa,QAAQ,iBAAiB,OAAO,QAAQ,eAAe,cAAc,GAAG,GAAG;AAG9G,UAAO,2CAACyD;IAAuB,OAFO,QAAS,UAAkB,MAAM,IAAI;IAEnB;MAA9B,IAAuC;;EAGnE;AAEE,UAAO,KAAK,+BAA+B,UAAU,KAAK,oBAAoB;AAC9E,UAAO;;;;;;AAOb,MAAa,0BACX,YACA,YACA,eACA,YACA,WACA,aACA,eACA,YAqBA,WACG,KAAK,WAAgB,UACpB,4BACE,WACA,YACA,eACA,YACA,WACA,aACA,eACA,UACA;CACE,GAAG;CACH,KAAK,UAAU,MAAM;CACtB,CACF,CACF,CACA,QAAQ,MAAyB,MAAM,KAAK;;;;AAKjD,MAAa,0BACX,YACA,YACA,eACA,YACA,WACA,aACA,eACA,YAmBA,WACG,KAAK,WAAgB,UACpB,4BACE,WACA,YACA,eACA,YACA,WACA,aACA,eACA,UACA;CACE,GAAG;CACH,KAAK,UAAU,MAAM;CACtB,CACF,CACF,CACA,QAAQ,MAAyB,MAAM,KAAK;;;;AAKjD,MAAa,4BACX,YACA,YACA,eACA,YACA,WACA,aACA,eACA,YAqBA,WACG,KAAK,WAAgB,UACpB,4BACE,WACA,YACA,eACA,YACA,WACA,aACA,eACA,YACA;CACE,GAAG;CACH,KAAK,UAAU,MAAM;CACtB,CACF,CACF,CACA,QAAQ,MAAyB,MAAM,KAAK;;;;;AAMjD,MAAa,8BACX,YACA,YACA,eACA,YACA,WACA,aACA,eACA,YAyBA,WACG,KAAK,WAAgB,UACpB,4BACE,WACA,YACA,eACA,YACA,WACA,aACA,eACA,UACA;CACE,GAAG;CACH,KAAK,UAAU,MAAM;CACtB,CACF,CACF,CACA,QAAQ,MAAyB,MAAM,KAAK"}

package/dist/cjs/components/presentation/auth/SignIn/BaseSignIn.cjs

@@ -27,7 +27,7 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 /**
 * Internal component that consumes FlowContext and renders the sign-in UI.
 */
-const BaseSignInContent = ({ components = [], onSubmit, onError, error: externalError, className = "", inputClassName = "", buttonClassName = "", messageClassName = "", size = "medium", variant = "outlined", isLoading: externalIsLoading, children, additionalData = {}, isTimeoutDisabled = false }) => {
+const BaseSignInContent = ({ components = [], onSubmit, onError, error: externalError, id, className = "", inputClassName = "", buttonClassName = "", messageClassName = "", size = "medium", variant = "outlined", isLoading: externalIsLoading, children, additionalData = {}, isTimeoutDisabled = false }) => {
 	const { meta } = require_useThunderID.default();
 	const { theme } = require_useTheme.default();
 	const customRenderers = (0, react.useContext)(require_ComponentRendererContext.default);
@@ -208,12 +208,14 @@ const BaseSignInContent = ({ components = [], onSubmit, onError, error: external
 			values: formValues
 		};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id,
 			className: containerClasses,
 			"data-testid": "thunderid-signin",
 			children: children(renderProps)
 		});
 	}
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		id,
 		className: (0, __emotion_css.cx)(containerClasses, styles.card),
 		"data-testid": "thunderid-signin",
 		variant,
@@ -227,6 +229,7 @@ const BaseSignInContent = ({ components = [], onSubmit, onError, error: external
 		}) })
 	});
 	if (!components || components.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		id,
 		className: (0, __emotion_css.cx)(containerClasses, styles.card),
 		"data-testid": "thunderid-signin",
 		variant,
@@ -239,6 +242,7 @@ const BaseSignInContent = ({ components = [], onSubmit, onError, error: external
 		}) })
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		id,
 		className: (0, __emotion_css.cx)(containerClasses, styles.card),
 		"data-testid": "thunderid-signin",
 		variant,

package/dist/cjs/components/presentation/auth/SignIn/BaseSignIn.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSignIn.cjs","names":["BaseSignInContent: FC<BaseSignInProps>","useThunderID","useTheme","customRenderers: ComponentRendererMap","ComponentRendererContext","useTranslation","useFlow","styles: any","useStyles","isLoading: boolean","handleError: any","errorMessage: string","extractErrorMessage","extractFormFields: (components: EmbeddedFlowComponent[]) => FormField[]","fields: FormField[]","identifier: string","useForm","filteredInputs: Record<string, any>","payload: EmbeddedSignInFlowRequest","containerClasses: any","inputClasses: any","buttonClasses: any","messageClasses: any","renderComponents: any","renderSignInComponents","renderProps: BaseSignInRenderProps","result: any","CardPrimitive","Spinner","AlertPrimitive","Typography","BaseSignIn: FC<BaseSignInProps>","content: ReactElement","FlowProvider","ComponentPreferencesContext"],"sources":["../../../../../../src/components/presentation/auth/SignIn/BaseSignIn.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 {\n  withVendorCSSClassPrefix,\n  EmbeddedSignInFlowRequest,\n  EmbeddedFlowComponent,\n  FieldError,\n  FlowMetadataResponse,\n  Preferences,\n} from '@thunderid/browser';\nimport {FC, useState, useCallback, useContext, ReactElement, ReactNode} from 'react';\nimport useStyles from './BaseSignIn.styles';\nimport ComponentRendererContext, {\n  ComponentRendererMap,\n} from '../../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport FlowProvider from '../../../../contexts/Flow/FlowProvider';\nimport useFlow from '../../../../contexts/Flow/useFlow';\nimport ComponentPreferencesContext from '../../../../contexts/I18n/ComponentPreferencesContext';\nimport useTheme from '../../../../contexts/Theme/useTheme';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\nimport {FormField, useForm} from '../../../../hooks/useForm';\nimport useTranslation from '../../../../hooks/useTranslation';\nimport {extractErrorMessage} from '../../../../utils/flowTransformer';\nimport AlertPrimitive from '../../../primitives/Alert/Alert';\n// eslint-disable-next-line import/no-named-as-default\nimport CardPrimitive, {CardProps} from '../../../primitives/Card/Card';\nimport Spinner from '../../../primitives/Spinner/Spinner';\nimport Typography from '../../../primitives/Typography/Typography';\nimport {renderSignInComponents} from '../AuthOptionFactory';\n\n/**\n * Render props for custom UI rendering\n */\nexport interface BaseSignInRenderProps {\n  /**\n   * Flow components\n   */\n  components: EmbeddedFlowComponent[];\n\n  /**\n   * API error (if any)\n   */\n  error?: Error | null;\n\n  /**\n   * Field validation errors\n   */\n  fieldErrors: Record<string, string>;\n\n  /**\n   * Function to handle input changes\n   */\n  handleInputChange: (name: string, value: string) => void;\n\n  /**\n   * Function to handle form submission\n   */\n  handleSubmit: (component: EmbeddedFlowComponent, data?: Record<string, any>) => Promise<void>;\n\n  /**\n   * Loading state\n   */\n  isLoading: boolean;\n\n  /**\n   * Flag indicating if the step timer has reached zero\n   */\n  isTimeoutDisabled?: boolean;\n\n  /**\n   * Whether the form is valid\n   */\n  isValid: boolean;\n\n  /**\n   * Flow messages\n   */\n  messages: {message: string; type: string}[];\n\n  /**\n   * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n   */\n  meta: FlowMetadataResponse | null;\n\n  /**\n   * Flow subtitle\n   */\n  subtitle: string;\n\n  /**\n   * Flow title\n   */\n  title: string;\n\n  /**\n   * Touched fields\n   */\n  touched: Record<string, boolean>;\n\n  /**\n   * Function to validate the form\n   */\n  validateForm: () => {fieldErrors: Record<string, string>; isValid: boolean};\n\n  /**\n   * Form values\n   */\n  values: Record<string, string>;\n}\n\n/**\n * Props for the BaseSignIn component.\n */\nexport interface BaseSignInProps {\n  /**\n   * Additional data from the flow response.\n   */\n  additionalData?: Record<string, any>;\n\n  /**\n   * Custom CSS class name for the submit button.\n   */\n  buttonClassName?: string;\n\n  /**\n   * Render props function for custom UI\n   */\n  children?: (props: BaseSignInRenderProps) => ReactNode;\n\n  /**\n   * Custom CSS class name for the form container.\n   */\n  className?: string;\n\n  /**\n   * Array of flow components to render.\n   */\n  components?: EmbeddedFlowComponent[];\n\n  /**\n   * Error object to display\n   */\n  error?: Error | null;\n\n  /**\n   * Custom CSS class name for error messages.\n   */\n  errorClassName?: string;\n\n  /**\n   * Custom CSS class name for form inputs.\n   */\n  inputClassName?: string;\n\n  /**\n   * Flag to determine if the component is ready to be rendered.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Timer flag disabling actions\n   */\n  isTimeoutDisabled?: boolean;\n\n  /**\n   * Custom CSS class name for info messages.\n   */\n  messageClassName?: string;\n\n  /**\n   * Callback function called when authentication fails.\n   * @param error - The error that occurred during authentication.\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Function to handle form submission.\n   * @param payload - The form data to submit.\n   * @param component - The component that triggered the submission.\n   */\n  onSubmit?: (payload: EmbeddedSignInFlowRequest, component: EmbeddedFlowComponent) => Promise<void>;\n\n  /**\n   * Callback function called when authentication is successful.\n   * @param authData - The authentication data returned upon successful completion.\n   */\n  onSuccess?: (authData: Record<string, any>) => void;\n\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n\n  /**\n   * Field-level validation errors returned by the server in `data.fieldErrors` on the\n   * most recent flow response. The component collapses these into the form's\n   * `fieldErrors` state (first error per field wins), surfacing them through the same\n   * render-prop / UI path as client-side validation errors. The full array is preserved\n   * here for advanced consumers that want every failing rule per field.\n   */\n  serverFieldErrors?: FieldError[] | null;\n\n  /**\n   * Size variant for the component.\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Theme variant for the component.\n   */\n  variant?: CardProps['variant'];\n}\n\n/**\n * Internal component that consumes FlowContext and renders the sign-in UI.\n */\nconst BaseSignInContent: FC<BaseSignInProps> = ({\n  components = [],\n  onSubmit,\n  onError,\n  error: externalError,\n  className = '',\n  inputClassName = '',\n  buttonClassName = '',\n  messageClassName = '',\n  size = 'medium',\n  variant = 'outlined',\n  isLoading: externalIsLoading,\n  children,\n  additionalData = {},\n  isTimeoutDisabled = false,\n}: BaseSignInProps): ReactElement => {\n  const {meta} = useThunderID();\n  const {theme} = useTheme();\n  const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);\n  const {t} = useTranslation();\n  const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages} = useFlow();\n  const styles: any = useStyles(theme, theme.vars.colors.text.primary);\n\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [apiError, setApiError] = useState<Error | null>(null);\n\n  const isLoading: boolean = externalIsLoading || isSubmitting;\n\n  /**\n   * Handle error responses and extract meaningful error messages\n   * Uses the transformer's extractErrorMessage function for consistency\n   */\n  const handleError: any = useCallback(\n    (error: any) => {\n      const errorMessage: string = extractErrorMessage(error, t);\n\n      // Set the API error state\n      setApiError(error instanceof Error ? error : new Error(errorMessage));\n\n      // Clear existing messages and add the error message\n      clearMessages();\n      addMessage({\n        message: errorMessage,\n        type: 'error',\n      });\n    },\n    [t, addMessage, clearMessages],\n  );\n\n  /**\n   * Extract form fields from flow components\n   */\n  const extractFormFields: (components: EmbeddedFlowComponent[]) => FormField[] = useCallback(\n    (flowComponents: EmbeddedFlowComponent[]): FormField[] => {\n      const fields: FormField[] = [];\n\n      const processComponents = (comps: EmbeddedFlowComponent[]): any => {\n        comps.forEach((component: any) => {\n          if (\n            component.type === 'TEXT_INPUT' ||\n            component.type === 'PASSWORD_INPUT' ||\n            component.type === 'EMAIL_INPUT' ||\n            component.type === 'PHONE_INPUT' ||\n            component.type === 'OTP_INPUT'\n          ) {\n            const identifier: string = component.ref;\n            fields.push({\n              initialValue: '',\n              name: identifier,\n              required: component.required || false,\n              validator: (value: string) => {\n                if (component.required && (!value || value.trim() === '')) {\n                  return t('validations.required.field.error');\n                }\n                // Add email validation if it's an email field\n                if (\n                  (component.type === 'EMAIL_INPUT' || component.variant === 'EMAIL') &&\n                  value &&\n                  !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)\n                ) {\n                  return t('field.email.invalid');\n                }\n\n                return null;\n              },\n            });\n          }\n          if (component.components) {\n            processComponents(component.components);\n          }\n        });\n      };\n\n      processComponents(flowComponents);\n      return fields;\n    },\n    [t],\n  );\n\n  const formFields: FormField[] = components ? extractFormFields(components) : [];\n\n  const form: ReturnType<typeof useForm> = useForm<Record<string, string>>({\n    fields: formFields,\n    initialValues: {},\n    requiredMessage: t('validations.required.field.error'),\n    validateOnBlur: true,\n    validateOnChange: false,\n  });\n\n  const {\n    values: formValues,\n    touched: touchedFields,\n    errors: formErrors,\n    isValid: isFormValid,\n    setValue: setFormValue,\n    setTouched: setFormTouched,\n    validateForm,\n    touchAllFields,\n  } = form;\n\n  /**\n   * Handle input value changes.\n   * Only updates the value without marking as touched.\n   * Touched state is set on blur to avoid premature validation.\n   */\n  const handleInputChange = (name: string, value: string): void => {\n    setFormValue(name, value);\n  };\n\n  /**\n   * Handle input blur event.\n   * Marks the field as touched, which triggers validation.\n   */\n  const handleInputBlur = (name: string): void => {\n    setFormTouched(name, true);\n  };\n\n  /**\n   * Handle component submission (for buttons and actions).\n   */\n  const handleSubmit = async (\n    component: EmbeddedFlowComponent,\n    data?: Record<string, any>,\n    skipValidation?: boolean,\n  ): Promise<void> => {\n    // Only validate for form submit actions, skip for social/trigger actions\n    if (!skipValidation) {\n      // Mark all fields as touched before validation\n      touchAllFields();\n\n      const validation: ReturnType<typeof validateForm> = validateForm();\n\n      if (!validation.isValid) {\n        return;\n      }\n    }\n\n    setIsSubmitting(true);\n    setApiError(null);\n    clearMessages();\n\n    try {\n      // Filter out empty or undefined input values\n      const filteredInputs: Record<string, any> = {};\n      if (data) {\n        Object.keys(data).forEach((key: any) => {\n          if (data[key] !== undefined && data[key] !== null && data[key] !== '') {\n            filteredInputs[key] = data[key];\n          }\n        });\n      }\n\n      let payload: EmbeddedSignInFlowRequest = {};\n\n      // For V2, we always send inputs and action\n      payload = {\n        ...payload,\n        ...(component.id && {action: component.id}),\n        inputs: filteredInputs,\n      };\n\n      await onSubmit?.(payload, component);\n    } catch (err) {\n      handleError(err);\n      onError?.(err as Error);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  // Generate CSS classes\n  const containerClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('signin'),\n      withVendorCSSClassPrefix(`signin--${size}`),\n      withVendorCSSClassPrefix(`signin--${variant}`),\n    ],\n    className,\n  );\n\n  const inputClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('signin__input'),\n      size === 'small' && withVendorCSSClassPrefix('signin__input--small'),\n      size === 'large' && withVendorCSSClassPrefix('signin__input--large'),\n    ],\n    inputClassName,\n  );\n\n  const buttonClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('signin__button'),\n      size === 'small' && withVendorCSSClassPrefix('signin__button--small'),\n      size === 'large' && withVendorCSSClassPrefix('signin__button--large'),\n    ],\n    buttonClassName,\n  );\n\n  const messageClasses: any = cx([withVendorCSSClassPrefix('signin__messages')], messageClassName);\n\n  /**\n   * Render components based on flow data using the factory\n   */\n  const renderComponents: any = useCallback(\n    (flowComponents: EmbeddedFlowComponent[]): ReactElement[] =>\n      renderSignInComponents(\n        flowComponents,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        handleInputChange,\n        {\n          _customRenderers: customRenderers,\n          _theme: theme,\n          additionalData,\n          buttonClassName: buttonClasses,\n          inputClassName: inputClasses,\n          isTimeoutDisabled,\n          meta,\n          onInputBlur: handleInputBlur,\n          onSubmit: handleSubmit,\n          size,\n          t,\n          variant,\n        },\n      ),\n    [\n      additionalData,\n      customRenderers,\n      formValues,\n      touchedFields,\n      formErrors,\n      isFormValid,\n      meta,\n      t,\n      theme,\n      isLoading,\n      size,\n      variant,\n      inputClasses,\n      buttonClasses,\n      handleInputBlur,\n      handleSubmit,\n      isTimeoutDisabled,\n    ],\n  );\n\n  // If render props are provided, use them\n  if (children) {\n    const renderProps: BaseSignInRenderProps = {\n      components,\n      error: apiError,\n      fieldErrors: formErrors,\n      handleInputChange,\n      handleSubmit,\n      isLoading,\n      isTimeoutDisabled,\n      isValid: isFormValid,\n      messages: flowMessages || [],\n      meta,\n      subtitle: flowSubtitle ?? '',\n      title: flowTitle || t('signin.heading'),\n      touched: touchedFields,\n      validateForm: () => {\n        const result: any = validateForm();\n        return {fieldErrors: result.errors, isValid: result.isValid};\n      },\n      values: formValues,\n    };\n\n    return (\n      <div className={containerClasses} data-testid=\"thunderid-signin\">\n        {children(renderProps)}\n      </div>\n    );\n  }\n\n  // Default UI rendering\n  if (isLoading) {\n    return (\n      <CardPrimitive className={cx(containerClasses, styles.card)} data-testid=\"thunderid-signin\" variant={variant}>\n        <CardPrimitive.Content>\n          <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>\n            <Spinner />\n          </div>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  if (!components || components.length === 0) {\n    return (\n      <CardPrimitive className={cx(containerClasses, styles.card)} data-testid=\"thunderid-signin\" variant={variant}>\n        <CardPrimitive.Content>\n          <AlertPrimitive variant=\"warning\">\n            <Typography variant=\"body1\">{t('errors.signin.components.not.available')}</Typography>\n          </AlertPrimitive>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  return (\n    <CardPrimitive className={cx(containerClasses, styles.card)} data-testid=\"thunderid-signin\" variant={variant}>\n      <CardPrimitive.Content>\n        {externalError && (\n          <div className={styles.flowMessagesContainer}>\n            <AlertPrimitive variant=\"error\" className={cx(styles.flowMessageItem, messageClasses)}>\n              <AlertPrimitive.Description>{externalError.message}</AlertPrimitive.Description>\n            </AlertPrimitive>\n          </div>\n        )}\n        {flowMessages && flowMessages.length > 0 && (\n          <div className={styles.flowMessagesContainer}>\n            {flowMessages.map((message: any, index: any) => (\n              <AlertPrimitive\n                key={index}\n                variant={message.type === 'error' ? 'error' : 'info'}\n                className={cx(styles.flowMessageItem, messageClasses)}\n              >\n                <AlertPrimitive.Description>{message.message}</AlertPrimitive.Description>\n              </AlertPrimitive>\n            ))}\n          </div>\n        )}\n        <div className={styles.contentContainer}>{renderComponents(components)}</div>\n      </CardPrimitive.Content>\n    </CardPrimitive>\n  );\n};\n\n/**\n * Base SignIn component that provides generic authentication flow.\n * This component handles component-driven UI rendering and can transform input\n * structure to component-driven format automatically.\n *\n * @example\n * // Default UI\n * ```tsx\n * import { BaseSignIn } from '@thunderid/react';\n *\n * const MySignIn = () => {\n *   return (\n *     <BaseSignIn\n *       components={components}\n *       onSubmit={async (payload) => {\n *         return await handleAuth(payload);\n *       }}\n *       onSuccess={(authData) => {\n *         console.log('Success:', authData);\n *       }}\n *       className=\"max-w-md mx-auto\"\n *     />\n *   );\n * };\n * ```\n *\n * @example\n * // Custom UI with render props\n * ```tsx\n * <BaseSignIn components={components} onSubmit={handleSubmit}>\n *   {({values, errors, handleInputChange, handleSubmit, isLoading, components}) => (\n *     <div className=\"custom-form\">\n *       <input\n *         name=\"username\"\n *         value={values.username || ''}\n *         onChange={(e) => handleInputChange('username', e.target.value)}\n *       />\n *       {errors.username && <span>{errors.username}</span>}\n *       <button\n *         onClick={() => handleSubmit(components[0], values)}\n *         disabled={isLoading}\n *       >\n *         Sign In\n *       </button>\n *     </div>\n *   )}\n * </BaseSignIn>\n * ```\n */\nconst BaseSignIn: FC<BaseSignInProps> = ({preferences, ...rest}: BaseSignInProps): ReactElement => {\n  const content: ReactElement = (\n    <FlowProvider>\n      <BaseSignInContent {...rest} />\n    </FlowProvider>\n  );\n\n  if (!preferences) return content;\n\n  return <ComponentPreferencesContext.Provider value={preferences}>{content}</ComponentPreferencesContext.Provider>;\n};\n\nexport default BaseSignIn;\n"],"mappings":"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"}
+{"version":3,"file":"BaseSignIn.cjs","names":["BaseSignInContent: FC<BaseSignInProps>","useThunderID","useTheme","customRenderers: ComponentRendererMap","ComponentRendererContext","useTranslation","useFlow","styles: any","useStyles","isLoading: boolean","handleError: any","errorMessage: string","extractErrorMessage","extractFormFields: (components: EmbeddedFlowComponent[]) => FormField[]","fields: FormField[]","identifier: string","useForm","filteredInputs: Record<string, any>","payload: EmbeddedSignInFlowRequest","containerClasses: any","inputClasses: any","buttonClasses: any","messageClasses: any","renderComponents: any","renderSignInComponents","renderProps: BaseSignInRenderProps","result: any","CardPrimitive","Spinner","AlertPrimitive","Typography","BaseSignIn: FC<BaseSignInProps>","content: ReactElement","FlowProvider","ComponentPreferencesContext"],"sources":["../../../../../../src/components/presentation/auth/SignIn/BaseSignIn.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 {\n  withVendorCSSClassPrefix,\n  EmbeddedSignInFlowRequest,\n  EmbeddedFlowComponent,\n  FieldError,\n  FlowMetadataResponse,\n  Preferences,\n} from '@thunderid/browser';\nimport {FC, useState, useCallback, useContext, ReactElement, ReactNode} from 'react';\nimport useStyles from './BaseSignIn.styles';\nimport ComponentRendererContext, {\n  ComponentRendererMap,\n} from '../../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport FlowProvider from '../../../../contexts/Flow/FlowProvider';\nimport useFlow from '../../../../contexts/Flow/useFlow';\nimport ComponentPreferencesContext from '../../../../contexts/I18n/ComponentPreferencesContext';\nimport useTheme from '../../../../contexts/Theme/useTheme';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\nimport {FormField, useForm} from '../../../../hooks/useForm';\nimport useTranslation from '../../../../hooks/useTranslation';\nimport {extractErrorMessage} from '../../../../utils/flowTransformer';\nimport AlertPrimitive from '../../../primitives/Alert/Alert';\n// eslint-disable-next-line import/no-named-as-default\nimport CardPrimitive, {CardProps} from '../../../primitives/Card/Card';\nimport Spinner from '../../../primitives/Spinner/Spinner';\nimport Typography from '../../../primitives/Typography/Typography';\nimport {renderSignInComponents} from '../AuthOptionFactory';\n\n/**\n * Render props for custom UI rendering\n */\nexport interface BaseSignInRenderProps {\n  /**\n   * Flow components\n   */\n  components: EmbeddedFlowComponent[];\n\n  /**\n   * API error (if any)\n   */\n  error?: Error | null;\n\n  /**\n   * Field validation errors\n   */\n  fieldErrors: Record<string, string>;\n\n  /**\n   * Function to handle input changes\n   */\n  handleInputChange: (name: string, value: string) => void;\n\n  /**\n   * Function to handle form submission\n   */\n  handleSubmit: (component: EmbeddedFlowComponent, data?: Record<string, any>) => Promise<void>;\n\n  /**\n   * Loading state\n   */\n  isLoading: boolean;\n\n  /**\n   * Flag indicating if the step timer has reached zero\n   */\n  isTimeoutDisabled?: boolean;\n\n  /**\n   * Whether the form is valid\n   */\n  isValid: boolean;\n\n  /**\n   * Flow messages\n   */\n  messages: {message: string; type: string}[];\n\n  /**\n   * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n   */\n  meta: FlowMetadataResponse | null;\n\n  /**\n   * Flow subtitle\n   */\n  subtitle: string;\n\n  /**\n   * Flow title\n   */\n  title: string;\n\n  /**\n   * Touched fields\n   */\n  touched: Record<string, boolean>;\n\n  /**\n   * Function to validate the form\n   */\n  validateForm: () => {fieldErrors: Record<string, string>; isValid: boolean};\n\n  /**\n   * Form values\n   */\n  values: Record<string, string>;\n}\n\n/**\n * Props for the BaseSignIn component.\n */\nexport interface BaseSignInProps {\n  /**\n   * Additional data from the flow response.\n   */\n  additionalData?: Record<string, any>;\n\n  /**\n   * Custom CSS class name for the submit button.\n   */\n  buttonClassName?: string;\n\n  /**\n   * Render props function for custom UI\n   */\n  children?: (props: BaseSignInRenderProps) => ReactNode;\n\n  /**\n   * Custom CSS class name for the form container.\n   */\n  className?: string;\n\n  /**\n   * Array of flow components to render.\n   */\n  components?: EmbeddedFlowComponent[];\n\n  /**\n   * Error object to display\n   */\n  error?: Error | null;\n\n  /**\n   * Custom CSS class name for error messages.\n   */\n  errorClassName?: string;\n\n  /**\n   * Custom CSS class name for form inputs.\n   */\n  inputClassName?: string;\n\n  /**\n   * Flag to determine if the component is ready to be rendered.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Timer flag disabling actions\n   */\n  isTimeoutDisabled?: boolean;\n\n  /**\n   * Custom CSS class name for info messages.\n   */\n  messageClassName?: string;\n\n  /**\n   * Callback function called when authentication fails.\n   * @param error - The error that occurred during authentication.\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Function to handle form submission.\n   * @param payload - The form data to submit.\n   * @param component - The component that triggered the submission.\n   */\n  onSubmit?: (payload: EmbeddedSignInFlowRequest, component: EmbeddedFlowComponent) => Promise<void>;\n\n  /**\n   * Callback function called when authentication is successful.\n   * @param authData - The authentication data returned upon successful completion.\n   */\n  onSuccess?: (authData: Record<string, any>) => void;\n\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n\n  /**\n   * HTML id attribute for the form container.\n   */\n  id?: string;\n\n  /**\n   * Field-level validation errors returned by the server in `data.fieldErrors` on the\n   * most recent flow response. The component collapses these into the form's\n   * `fieldErrors` state (first error per field wins), surfacing them through the same\n   * render-prop / UI path as client-side validation errors. The full array is preserved\n   * here for advanced consumers that want every failing rule per field.\n   */\n  serverFieldErrors?: FieldError[] | null;\n\n  /**\n   * Size variant for the component.\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Theme variant for the component.\n   */\n  variant?: CardProps['variant'];\n}\n\n/**\n * Internal component that consumes FlowContext and renders the sign-in UI.\n */\nconst BaseSignInContent: FC<BaseSignInProps> = ({\n  components = [],\n  onSubmit,\n  onError,\n  error: externalError,\n  id,\n  className = '',\n  inputClassName = '',\n  buttonClassName = '',\n  messageClassName = '',\n  size = 'medium',\n  variant = 'outlined',\n  isLoading: externalIsLoading,\n  children,\n  additionalData = {},\n  isTimeoutDisabled = false,\n}: BaseSignInProps): ReactElement => {\n  const {meta} = useThunderID();\n  const {theme} = useTheme();\n  const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);\n  const {t} = useTranslation();\n  const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages} = useFlow();\n  const styles: any = useStyles(theme, theme.vars.colors.text.primary);\n\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [apiError, setApiError] = useState<Error | null>(null);\n\n  const isLoading: boolean = externalIsLoading || isSubmitting;\n\n  /**\n   * Handle error responses and extract meaningful error messages\n   * Uses the transformer's extractErrorMessage function for consistency\n   */\n  const handleError: any = useCallback(\n    (error: any) => {\n      const errorMessage: string = extractErrorMessage(error, t);\n\n      // Set the API error state\n      setApiError(error instanceof Error ? error : new Error(errorMessage));\n\n      // Clear existing messages and add the error message\n      clearMessages();\n      addMessage({\n        message: errorMessage,\n        type: 'error',\n      });\n    },\n    [t, addMessage, clearMessages],\n  );\n\n  /**\n   * Extract form fields from flow components\n   */\n  const extractFormFields: (components: EmbeddedFlowComponent[]) => FormField[] = useCallback(\n    (flowComponents: EmbeddedFlowComponent[]): FormField[] => {\n      const fields: FormField[] = [];\n\n      const processComponents = (comps: EmbeddedFlowComponent[]): any => {\n        comps.forEach((component: any) => {\n          if (\n            component.type === 'TEXT_INPUT' ||\n            component.type === 'PASSWORD_INPUT' ||\n            component.type === 'EMAIL_INPUT' ||\n            component.type === 'PHONE_INPUT' ||\n            component.type === 'OTP_INPUT'\n          ) {\n            const identifier: string = component.ref;\n            fields.push({\n              initialValue: '',\n              name: identifier,\n              required: component.required || false,\n              validator: (value: string) => {\n                if (component.required && (!value || value.trim() === '')) {\n                  return t('validations.required.field.error');\n                }\n                // Add email validation if it's an email field\n                if (\n                  (component.type === 'EMAIL_INPUT' || component.variant === 'EMAIL') &&\n                  value &&\n                  !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)\n                ) {\n                  return t('field.email.invalid');\n                }\n\n                return null;\n              },\n            });\n          }\n          if (component.components) {\n            processComponents(component.components);\n          }\n        });\n      };\n\n      processComponents(flowComponents);\n      return fields;\n    },\n    [t],\n  );\n\n  const formFields: FormField[] = components ? extractFormFields(components) : [];\n\n  const form: ReturnType<typeof useForm> = useForm<Record<string, string>>({\n    fields: formFields,\n    initialValues: {},\n    requiredMessage: t('validations.required.field.error'),\n    validateOnBlur: true,\n    validateOnChange: false,\n  });\n\n  const {\n    values: formValues,\n    touched: touchedFields,\n    errors: formErrors,\n    isValid: isFormValid,\n    setValue: setFormValue,\n    setTouched: setFormTouched,\n    validateForm,\n    touchAllFields,\n  } = form;\n\n  /**\n   * Handle input value changes.\n   * Only updates the value without marking as touched.\n   * Touched state is set on blur to avoid premature validation.\n   */\n  const handleInputChange = (name: string, value: string): void => {\n    setFormValue(name, value);\n  };\n\n  /**\n   * Handle input blur event.\n   * Marks the field as touched, which triggers validation.\n   */\n  const handleInputBlur = (name: string): void => {\n    setFormTouched(name, true);\n  };\n\n  /**\n   * Handle component submission (for buttons and actions).\n   */\n  const handleSubmit = async (\n    component: EmbeddedFlowComponent,\n    data?: Record<string, any>,\n    skipValidation?: boolean,\n  ): Promise<void> => {\n    // Only validate for form submit actions, skip for social/trigger actions\n    if (!skipValidation) {\n      // Mark all fields as touched before validation\n      touchAllFields();\n\n      const validation: ReturnType<typeof validateForm> = validateForm();\n\n      if (!validation.isValid) {\n        return;\n      }\n    }\n\n    setIsSubmitting(true);\n    setApiError(null);\n    clearMessages();\n\n    try {\n      // Filter out empty or undefined input values\n      const filteredInputs: Record<string, any> = {};\n      if (data) {\n        Object.keys(data).forEach((key: any) => {\n          if (data[key] !== undefined && data[key] !== null && data[key] !== '') {\n            filteredInputs[key] = data[key];\n          }\n        });\n      }\n\n      let payload: EmbeddedSignInFlowRequest = {};\n\n      // For V2, we always send inputs and action\n      payload = {\n        ...payload,\n        ...(component.id && {action: component.id}),\n        inputs: filteredInputs,\n      };\n\n      await onSubmit?.(payload, component);\n    } catch (err) {\n      handleError(err);\n      onError?.(err as Error);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  // Generate CSS classes\n  const containerClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('signin'),\n      withVendorCSSClassPrefix(`signin--${size}`),\n      withVendorCSSClassPrefix(`signin--${variant}`),\n    ],\n    className,\n  );\n\n  const inputClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('signin__input'),\n      size === 'small' && withVendorCSSClassPrefix('signin__input--small'),\n      size === 'large' && withVendorCSSClassPrefix('signin__input--large'),\n    ],\n    inputClassName,\n  );\n\n  const buttonClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('signin__button'),\n      size === 'small' && withVendorCSSClassPrefix('signin__button--small'),\n      size === 'large' && withVendorCSSClassPrefix('signin__button--large'),\n    ],\n    buttonClassName,\n  );\n\n  const messageClasses: any = cx([withVendorCSSClassPrefix('signin__messages')], messageClassName);\n\n  /**\n   * Render components based on flow data using the factory\n   */\n  const renderComponents: any = useCallback(\n    (flowComponents: EmbeddedFlowComponent[]): ReactElement[] =>\n      renderSignInComponents(\n        flowComponents,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        handleInputChange,\n        {\n          _customRenderers: customRenderers,\n          _theme: theme,\n          additionalData,\n          buttonClassName: buttonClasses,\n          inputClassName: inputClasses,\n          isTimeoutDisabled,\n          meta,\n          onInputBlur: handleInputBlur,\n          onSubmit: handleSubmit,\n          size,\n          t,\n          variant,\n        },\n      ),\n    [\n      additionalData,\n      customRenderers,\n      formValues,\n      touchedFields,\n      formErrors,\n      isFormValid,\n      meta,\n      t,\n      theme,\n      isLoading,\n      size,\n      variant,\n      inputClasses,\n      buttonClasses,\n      handleInputBlur,\n      handleSubmit,\n      isTimeoutDisabled,\n    ],\n  );\n\n  // If render props are provided, use them\n  if (children) {\n    const renderProps: BaseSignInRenderProps = {\n      components,\n      error: apiError,\n      fieldErrors: formErrors,\n      handleInputChange,\n      handleSubmit,\n      isLoading,\n      isTimeoutDisabled,\n      isValid: isFormValid,\n      messages: flowMessages || [],\n      meta,\n      subtitle: flowSubtitle ?? '',\n      title: flowTitle || t('signin.heading'),\n      touched: touchedFields,\n      validateForm: () => {\n        const result: any = validateForm();\n        return {fieldErrors: result.errors, isValid: result.isValid};\n      },\n      values: formValues,\n    };\n\n    return (\n      <div id={id} className={containerClasses} data-testid=\"thunderid-signin\">\n        {children(renderProps)}\n      </div>\n    );\n  }\n\n  // Default UI rendering\n  if (isLoading) {\n    return (\n      <CardPrimitive\n        id={id}\n        className={cx(containerClasses, styles.card)}\n        data-testid=\"thunderid-signin\"\n        variant={variant}\n      >\n        <CardPrimitive.Content>\n          <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>\n            <Spinner />\n          </div>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  if (!components || components.length === 0) {\n    return (\n      <CardPrimitive\n        id={id}\n        className={cx(containerClasses, styles.card)}\n        data-testid=\"thunderid-signin\"\n        variant={variant}\n      >\n        <CardPrimitive.Content>\n          <AlertPrimitive variant=\"warning\">\n            <Typography variant=\"body1\">{t('errors.signin.components.not.available')}</Typography>\n          </AlertPrimitive>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  return (\n    <CardPrimitive\n      id={id}\n      className={cx(containerClasses, styles.card)}\n      data-testid=\"thunderid-signin\"\n      variant={variant}\n    >\n      <CardPrimitive.Content>\n        {externalError && (\n          <div className={styles.flowMessagesContainer}>\n            <AlertPrimitive variant=\"error\" className={cx(styles.flowMessageItem, messageClasses)}>\n              <AlertPrimitive.Description>{externalError.message}</AlertPrimitive.Description>\n            </AlertPrimitive>\n          </div>\n        )}\n        {flowMessages && flowMessages.length > 0 && (\n          <div className={styles.flowMessagesContainer}>\n            {flowMessages.map((message: any, index: any) => (\n              <AlertPrimitive\n                key={index}\n                variant={message.type === 'error' ? 'error' : 'info'}\n                className={cx(styles.flowMessageItem, messageClasses)}\n              >\n                <AlertPrimitive.Description>{message.message}</AlertPrimitive.Description>\n              </AlertPrimitive>\n            ))}\n          </div>\n        )}\n        <div className={styles.contentContainer}>{renderComponents(components)}</div>\n      </CardPrimitive.Content>\n    </CardPrimitive>\n  );\n};\n\n/**\n * Base SignIn component that provides generic authentication flow.\n * This component handles component-driven UI rendering and can transform input\n * structure to component-driven format automatically.\n *\n * @example\n * // Default UI\n * ```tsx\n * import { BaseSignIn } from '@thunderid/react';\n *\n * const MySignIn = () => {\n *   return (\n *     <BaseSignIn\n *       components={components}\n *       onSubmit={async (payload) => {\n *         return await handleAuth(payload);\n *       }}\n *       onSuccess={(authData) => {\n *         console.log('Success:', authData);\n *       }}\n *       className=\"max-w-md mx-auto\"\n *     />\n *   );\n * };\n * ```\n *\n * @example\n * // Custom UI with render props\n * ```tsx\n * <BaseSignIn components={components} onSubmit={handleSubmit}>\n *   {({values, errors, handleInputChange, handleSubmit, isLoading, components}) => (\n *     <div className=\"custom-form\">\n *       <input\n *         name=\"username\"\n *         value={values.username || ''}\n *         onChange={(e) => handleInputChange('username', e.target.value)}\n *       />\n *       {errors.username && <span>{errors.username}</span>}\n *       <button\n *         onClick={() => handleSubmit(components[0], values)}\n *         disabled={isLoading}\n *       >\n *         Sign In\n *       </button>\n *     </div>\n *   )}\n * </BaseSignIn>\n * ```\n */\nconst BaseSignIn: FC<BaseSignInProps> = ({preferences, ...rest}: BaseSignInProps): ReactElement => {\n  const content: ReactElement = (\n    <FlowProvider>\n      <BaseSignInContent {...rest} />\n    </FlowProvider>\n  );\n\n  if (!preferences) return content;\n\n  return <ComponentPreferencesContext.Provider value={preferences}>{content}</ComponentPreferencesContext.Provider>;\n};\n\nexport default BaseSignIn;\n"],"mappings":"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"}