@thunderid/react 0.1.0 → 0.2.0

package/dist/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInOptionFactory.js","names":["hasParams: any","UsernamePassword","IdentifierFirst","GoogleButton","GitHubButton","MicrosoftButton","FacebookButton","LinkedInButton","SignInWithEthereumButton","EmailOtp","MultiOptionButton","Totp","SmsOtp","SocialButton"],"sources":["../../../../../../../src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.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 {\n  EmbeddedSignInFlowAuthenticator,\n  EmbeddedSignInFlowAuthenticatorKnownIdPType,\n  ApplicationNativeAuthenticationConstants,\n  WithPreferences,\n} from '@thunderid/browser';\nimport {ReactElement} from 'react';\n// eslint-disable-next-line import/no-cycle, import/no-named-as-default\nimport EmailOtp from './EmailOtp';\n// eslint-disable-next-line import/no-cycle, import/no-named-as-default\nimport IdentifierFirst from './IdentifierFirst';\n// eslint-disable-next-line import/no-cycle\nimport MultiOptionButton from './MultiOptionButton';\n// eslint-disable-next-line import/no-cycle, import/no-named-as-default\nimport SmsOtp from './SmsOtp';\n// eslint-disable-next-line import/no-cycle\nimport SocialButton from './SocialButton';\n// eslint-disable-next-line import/no-cycle, import/no-named-as-default\nimport Totp from './Totp';\n// eslint-disable-next-line import/no-cycle, import/no-named-as-default\nimport UsernamePassword from './UsernamePassword';\nimport FacebookButton from '../../../../../adapters/FacebookButton';\nimport GitHubButton from '../../../../../adapters/GitHubButton';\nimport GoogleButton from '../../../../../adapters/GoogleButton';\nimport LinkedInButton from '../../../../../adapters/LinkedInButton';\nimport MicrosoftButton from '../../../../../adapters/MicrosoftButton';\nimport SignInWithEthereumButton from '../../../../../adapters/SignInWithEthereumButton';\n\n/**\n * Base props that all sign-in option components share.\n */\nexport interface BaseSignInOptionProps extends WithPreferences {\n  /**\n   * The authenticator configuration.\n   */\n  authenticator?: EmbeddedSignInFlowAuthenticator;\n\n  /**\n   * Custom CSS class name for the submit button.\n   */\n  buttonClassName?: string;\n\n  /**\n   * Error message to display.\n   */\n  error?: string | null;\n\n  /**\n   * Current form values.\n   */\n  formValues: Record<string, string>;\n\n  /**\n   * Custom CSS class name for form inputs.\n   */\n  inputClassName?: string;\n\n  /**\n   * Whether the component is in loading state.\n   */\n  isLoading: boolean;\n\n  /**\n   * Callback function called when input values change.\n   */\n  onInputChange: (param: string, value: string) => void;\n\n  /**\n   * Callback function called when the option is submitted.\n   */\n  onSubmit?: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void;\n\n  /**\n   * Text for the submit button.\n   */\n  submitButtonText?: string;\n\n  /**\n   * Touched state for form fields.\n   */\n  touchedFields: Record<string, boolean>;\n}\n\n/**\n * Creates the appropriate sign-in option component based on the authenticator's ID.\n */\nexport const createSignInOption = ({\n  authenticator,\n  onSubmit,\n  buttonClassName,\n  preferences,\n  ...rest\n}: BaseSignInOptionProps): ReactElement => {\n  // Check if this authenticator has params (indicating it needs user input)\n  const hasParams: any = authenticator!.metadata?.params && authenticator!.metadata.params.length > 0;\n\n  // Use authenticatorId to determine the component type\n  switch (authenticator!.authenticatorId) {\n    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.UsernamePassword:\n      return <UsernamePassword authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />;\n\n    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.IdentifierFirst:\n      return <IdentifierFirst authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />;\n\n    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Google:\n      return (\n        <GoogleButton\n          className={buttonClassName}\n          onClick={(): any => onSubmit!(authenticator!)}\n          preferences={preferences}\n          {...rest}\n        />\n      );\n\n    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.GitHub:\n      return (\n        <GitHubButton\n          preferences={preferences}\n          className={buttonClassName}\n          onClick={(): any => onSubmit!(authenticator!)}\n          {...rest}\n        />\n      );\n\n    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Microsoft:\n      return (\n        <MicrosoftButton\n          preferences={preferences}\n          className={buttonClassName}\n          onClick={(): any => onSubmit!(authenticator!)}\n          {...rest}\n        />\n      );\n\n    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Facebook:\n      return (\n        <FacebookButton\n          preferences={preferences}\n          className={buttonClassName}\n          onClick={(): any => onSubmit!(authenticator!)}\n          {...rest}\n        />\n      );\n\n    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.LinkedIn:\n      return (\n        <LinkedInButton\n          preferences={preferences}\n          className={buttonClassName}\n          onClick={(): any => onSubmit!(authenticator!)}\n          {...rest}\n        />\n      );\n\n    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SignInWithEthereum:\n      return (\n        <SignInWithEthereumButton\n          preferences={preferences}\n          className={buttonClassName}\n          onClick={(): any => onSubmit!(authenticator!)}\n          {...rest}\n        />\n      );\n\n    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.EmailOtp:\n      // If it has params, render as input form, otherwise as selection button\n      return hasParams ? (\n        <EmailOtp authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />\n      ) : (\n        <MultiOptionButton authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />\n      );\n\n    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Totp:\n      // If it has params, render as input form, otherwise as selection button\n      return hasParams ? (\n        <Totp authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />\n      ) : (\n        <MultiOptionButton authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />\n      );\n\n    case ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SmsOtp:\n      // If it has params, render as input form, otherwise as selection button\n      return hasParams ? (\n        <SmsOtp authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />\n      ) : (\n        <MultiOptionButton authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />\n      );\n\n    default:\n      // Check if it's a federated authenticator (non-LOCAL idp)\n      if (authenticator!.idp !== EmbeddedSignInFlowAuthenticatorKnownIdPType.Local) {\n        // For unknown federated authenticators, use generic social login\n        return (\n          <SocialButton\n            authenticator={authenticator}\n            preferences={preferences}\n            className={buttonClassName}\n            onClick={(): any => onSubmit!(authenticator!)}\n            {...rest}\n          >\n            {authenticator!.idp}\n          </SocialButton>\n        );\n      }\n\n      // For LOCAL authenticators, decide based on whether they have params\n      if (hasParams) {\n        // Fallback to username/password for unknown local authenticators with params\n        return (\n          <UsernamePassword authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />\n        );\n      }\n      // Use multi-option button for LOCAL authenticators without params\n      return (\n        <MultiOptionButton authenticator={authenticator} preferences={preferences} onSubmit={onSubmit} {...rest} />\n      );\n  }\n};\n\n/**\n * Convenience function that creates the appropriate sign-in option component from an authenticator.\n */\nexport const createSignInOptionFromAuthenticator = (\n  authenticator: EmbeddedSignInFlowAuthenticator,\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  isLoading: boolean,\n  onInputChange: (param: string, value: string) => void,\n  onSubmit: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void,\n  options?: {\n    buttonClassName?: string;\n    error?: string | null;\n    inputClassName?: string;\n  },\n): ReactElement =>\n  createSignInOption({\n    authenticator,\n    formValues,\n    isLoading,\n    onInputChange,\n    onSubmit,\n    touchedFields,\n    ...options,\n  });\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwGA,MAAa,sBAAsB,EACjC,eACA,UACA,iBACA,YACA,GAAG,WACsC;CAEzC,MAAMA,YAAiB,cAAe,UAAU,UAAU,cAAe,SAAS,OAAO,SAAS;AAGlG,SAAQ,cAAe,iBAAvB;EACE,KAAK,yCAAyC,wBAAwB,iBACpE,QAAO,oBAACC;GAAgC;GAA4B;GAAuB;GAAU,GAAI;IAAQ;EAEnH,KAAK,yCAAyC,wBAAwB,gBACpE,QAAO,oBAACC;GAA+B;GAA4B;GAAuB;GAAU,GAAI;IAAQ;EAElH,KAAK,yCAAyC,wBAAwB,OACpE,QACE,oBAACC;GACC,WAAW;GACX,eAAoB,SAAU,cAAe;GAChC;GACb,GAAI;IACJ;EAGN,KAAK,yCAAyC,wBAAwB,OACpE,QACE,oBAACC;GACc;GACb,WAAW;GACX,eAAoB,SAAU,cAAe;GAC7C,GAAI;IACJ;EAGN,KAAK,yCAAyC,wBAAwB,UACpE,QACE,oBAACC;GACc;GACb,WAAW;GACX,eAAoB,SAAU,cAAe;GAC7C,GAAI;IACJ;EAGN,KAAK,yCAAyC,wBAAwB,SACpE,QACE,oBAACC;GACc;GACb,WAAW;GACX,eAAoB,SAAU,cAAe;GAC7C,GAAI;IACJ;EAGN,KAAK,yCAAyC,wBAAwB,SACpE,QACE,oBAACC;GACc;GACb,WAAW;GACX,eAAoB,SAAU,cAAe;GAC7C,GAAI;IACJ;EAGN,KAAK,yCAAyC,wBAAwB,mBACpE,QACE,oBAACC;GACc;GACb,WAAW;GACX,eAAoB,SAAU,cAAe;GAC7C,GAAI;IACJ;EAGN,KAAK,yCAAyC,wBAAwB,SAEpE,QAAO,YACL,oBAACC;GAAwB;GAA4B;GAAuB;GAAU,GAAI;IAAQ,GAElG,oBAACC;GAAiC;GAA4B;GAAuB;GAAU,GAAI;IAAQ;EAG/G,KAAK,yCAAyC,wBAAwB,KAEpE,QAAO,YACL,oBAACC;GAAoB;GAA4B;GAAuB;GAAU,GAAI;IAAQ,GAE9F,oBAACD;GAAiC;GAA4B;GAAuB;GAAU,GAAI;IAAQ;EAG/G,KAAK,yCAAyC,wBAAwB,OAEpE,QAAO,YACL,oBAACE;GAAsB;GAA4B;GAAuB;GAAU,GAAI;IAAQ,GAEhG,oBAACF;GAAiC;GAA4B;GAAuB;GAAU,GAAI;IAAQ;EAG/G;AAEE,OAAI,cAAe,QAAQ,4CAA4C,MAErE,QACE,oBAACG;IACgB;IACF;IACb,WAAW;IACX,eAAoB,SAAU,cAAe;IAC7C,GAAI;cAEH,cAAe;KACH;AAKnB,OAAI,UAEF,QACE,oBAACZ;IAAgC;IAA4B;IAAuB;IAAU,GAAI;KAAQ;AAI9G,UACE,oBAACS;IAAiC;IAA4B;IAAuB;IAAU,GAAI;KAAQ;;;;;;AAQnH,MAAa,uCACX,eACA,YACA,eACA,WACA,eACA,UACA,YAMA,mBAAmB;CACjB;CACA;CACA;CACA;CACA;CACA;CACA,GAAG;CACJ,CAAC"}

package/dist/components/presentation/auth/SignIn/v1/options/SmsOtp.js

@@ -0,0 +1,64 @@
+import useFlow_default from "../../../../../../contexts/Flow/useFlow.js";
+import useTheme_default from "../../../../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../../../../hooks/useTranslation.js";
+import Button_default from "../../../../../primitives/Button/Button.js";
+import OtpField_default from "../../../../../primitives/OtpField/OtpField.js";
+import { createField } from "../../../../../factories/FieldFactory.js";
+import { EmbeddedSignInFlowAuthenticatorParamType, FieldType } from "@thunderid/browser";
+import { useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/presentation/auth/SignIn/v1/options/SmsOtp.tsx
+/**
+* SMS OTP Sign-In Option Component.
+* Handles SMS-based OTP authentication.
+*/
+const SmsOtp = ({ authenticator, formValues, touchedFields, isLoading, onInputChange, inputClassName = "", buttonClassName = "", preferences }) => {
+	const { theme } = useTheme_default();
+	const { t } = useTranslation_default(preferences?.i18n);
+	const { setTitle, setSubtitle } = useFlow_default();
+	const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
+	useEffect(() => {
+		setTitle(t("sms.otp.heading"));
+		setSubtitle(t("sms.otp.subheading"));
+	}, [
+		setTitle,
+		setSubtitle,
+		t
+	]);
+	const hasOtpField = formFields.some((param) => param.param.toLowerCase().includes("otp") || param.param.toLowerCase().includes("code"));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [formFields.map((param) => {
+		return /* @__PURE__ */ jsx("div", { children: (param.param.toLowerCase().includes("otp") || param.param.toLowerCase().includes("code")) && hasOtpField ? /* @__PURE__ */ jsx(OtpField_default, {
+			length: 6,
+			value: formValues[param.param] || "",
+			onChange: (event) => onInputChange(param.param, event.target.value),
+			disabled: isLoading,
+			className: inputClassName
+		}) : createField({
+			className: inputClassName,
+			disabled: isLoading,
+			label: param.displayName,
+			name: param.param,
+			onChange: (value) => onInputChange(param.param, value),
+			required: authenticator.requiredParams.includes(param.param),
+			touched: touchedFields[param.param] || false,
+			type: param.type === EmbeddedSignInFlowAuthenticatorParamType.String && param.confidential ? FieldType.Password : FieldType.Text,
+			value: formValues[param.param] || ""
+		}) }, param.param);
+	}), /* @__PURE__ */ jsx(Button_default, {
+		fullWidth: true,
+		type: "submit",
+		color: "primary",
+		variant: "solid",
+		disabled: isLoading,
+		loading: isLoading,
+		className: buttonClassName,
+		style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
+		children: t("sms.otp.buttons.submit.text")
+	})] });
+};
+var SmsOtp_default = SmsOtp;
+
+//#endregion
+export { SmsOtp_default as default };
+//# sourceMappingURL=SmsOtp.js.map

package/dist/components/presentation/auth/SignIn/v1/options/SmsOtp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmsOtp.js","names":["SmsOtp: FC<BaseSignInOptionProps>","useTheme","useTranslation","useFlow","formFields: any","hasOtpField: any","OtpField","Button"],"sources":["../../../../../../../src/components/presentation/auth/SignIn/v1/options/SmsOtp.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 {EmbeddedSignInFlowAuthenticatorParamType, FieldType} from '@thunderid/browser';\nimport {FC, ReactElement, useEffect} from 'react';\n// eslint-disable-next-line import/no-cycle\nimport {BaseSignInOptionProps} from './SignInOptionFactory';\nimport useFlow from '../../../../../../contexts/Flow/useFlow';\nimport useTheme from '../../../../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../../../../hooks/useTranslation';\nimport {createField} from '../../../../../factories/FieldFactory';\nimport Button from '../../../../../primitives/Button/Button';\nimport OtpField from '../../../../../primitives/OtpField/OtpField';\n\n/**\n * SMS OTP Sign-In Option Component.\n * Handles SMS-based OTP authentication.\n */\nconst SmsOtp: FC<BaseSignInOptionProps> = ({\n  authenticator,\n  formValues,\n  touchedFields,\n  isLoading,\n  onInputChange,\n  inputClassName = '',\n  buttonClassName = '',\n  preferences,\n}: BaseSignInOptionProps): ReactElement => {\n  const {theme} = useTheme();\n  const {t} = useTranslation(preferences?.i18n);\n  const {setTitle, setSubtitle} = useFlow();\n\n  const formFields: any = authenticator!.metadata?.params?.sort((a: any, b: any) => a.order - b.order) || [];\n\n  useEffect(() => {\n    setTitle(t('sms.otp.heading'));\n    setSubtitle(t('sms.otp.subheading'));\n  }, [setTitle, setSubtitle, t]);\n\n  const hasOtpField: any = formFields.some(\n    (param: any) => param.param.toLowerCase().includes('otp') || param.param.toLowerCase().includes('code'),\n  );\n\n  return (\n    <>\n      {formFields.map((param: any) => {\n        const isOtpParam: any = param.param.toLowerCase().includes('otp') || param.param.toLowerCase().includes('code');\n\n        return (\n          <div key={param.param}>\n            {isOtpParam && hasOtpField ? (\n              <OtpField\n                length={6}\n                value={formValues[param.param] || ''}\n                onChange={(event: any): void => onInputChange(param.param, event.target.value)}\n                disabled={isLoading}\n                className={inputClassName}\n              />\n            ) : (\n              createField({\n                className: inputClassName,\n                disabled: isLoading,\n                label: param.displayName,\n                name: param.param,\n                onChange: (value: any) => onInputChange(param.param, value),\n                required: authenticator!.requiredParams.includes(param.param),\n                touched: touchedFields[param.param] || false,\n                type:\n                  param.type === EmbeddedSignInFlowAuthenticatorParamType.String && param.confidential\n                    ? FieldType.Password\n                    : FieldType.Text,\n                value: formValues[param.param] || '',\n              })\n            )}\n          </div>\n        );\n      })}\n\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"solid\"\n        disabled={isLoading}\n        loading={isLoading}\n        className={buttonClassName}\n        style={{marginBottom: `calc(${theme.vars.spacing.unit} * 2)`}}\n      >\n        {t('sms.otp.buttons.submit.text')}\n      </Button>\n    </>\n  );\n};\n\nexport default SmsOtp;\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,MAAMA,UAAqC,EACzC,eACA,YACA,eACA,WACA,eACA,iBAAiB,IACjB,kBAAkB,IAClB,kBACyC;CACzC,MAAM,EAAC,UAASC,kBAAU;CAC1B,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAM,EAAC,UAAU,gBAAeC,iBAAS;CAEzC,MAAMC,aAAkB,cAAe,UAAU,QAAQ,MAAM,GAAQ,MAAW,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE;AAE1G,iBAAgB;AACd,WAAS,EAAE,kBAAkB,CAAC;AAC9B,cAAY,EAAE,qBAAqB,CAAC;IACnC;EAAC;EAAU;EAAa;EAAE,CAAC;CAE9B,MAAMC,cAAmB,WAAW,MACjC,UAAe,MAAM,MAAM,aAAa,CAAC,SAAS,MAAM,IAAI,MAAM,MAAM,aAAa,CAAC,SAAS,OAAO,CACxG;AAED,QACE,4CACG,WAAW,KAAK,UAAe;AAG9B,SACE,oBAAC,oBAHqB,MAAM,MAAM,aAAa,CAAC,SAAS,MAAM,IAAI,MAAM,MAAM,aAAa,CAAC,SAAS,OAAO,KAI5F,cACb,oBAACC;GACC,QAAQ;GACR,OAAO,WAAW,MAAM,UAAU;GAClC,WAAW,UAAqB,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM;GAC9E,UAAU;GACV,WAAW;IACX,GAEF,YAAY;GACV,WAAW;GACX,UAAU;GACV,OAAO,MAAM;GACb,MAAM,MAAM;GACZ,WAAW,UAAe,cAAc,MAAM,OAAO,MAAM;GAC3D,UAAU,cAAe,eAAe,SAAS,MAAM,MAAM;GAC7D,SAAS,cAAc,MAAM,UAAU;GACvC,MACE,MAAM,SAAS,yCAAyC,UAAU,MAAM,eACpE,UAAU,WACV,UAAU;GAChB,OAAO,WAAW,MAAM,UAAU;GACnC,CAAC,IAvBI,MAAM,MAyBV;GAER,EAEF,oBAACC;EACC;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,UAAU;EACV,SAAS;EACT,WAAW;EACX,OAAO,EAAC,cAAc,QAAQ,MAAM,KAAK,QAAQ,KAAK,QAAO;YAE5D,EAAE,8BAA8B;GAC1B,IACR;;AAIP,qBAAe"}

package/dist/components/presentation/auth/SignIn/v1/options/SocialButton.js

@@ -0,0 +1,36 @@
+import useTranslation_default from "../../../../../../hooks/useTranslation.js";
+import Button_default from "../../../../../primitives/Button/Button.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/presentation/auth/SignIn/v1/options/SocialButton.tsx
+/**
+* Social Login Sign-In Option Component.
+* Handles authentication with external identity providers (Google, GitHub, etc.).
+*/
+const SocialLogin = ({ isLoading, preferences, children,...rest }) => {
+	const { t } = useTranslation_default(preferences?.i18n);
+	return /* @__PURE__ */ jsx(Button_default, {
+		...rest,
+		fullWidth: true,
+		type: "button",
+		color: "secondary",
+		variant: "outline",
+		disabled: isLoading,
+		startIcon: /* @__PURE__ */ jsx("svg", {
+			width: "18",
+			height: "18",
+			viewBox: "0 0 24 24",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: /* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+			})
+		}),
+		children: t("elements.buttons.social.text", { connection: children })
+	});
+};
+var SocialButton_default = SocialLogin;
+
+//#endregion
+export { SocialButton_default as default };
+//# sourceMappingURL=SocialButton.js.map

package/dist/components/presentation/auth/SignIn/v1/options/SocialButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SocialButton.js","names":["SocialLogin: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonElement>>","useTranslation","Button"],"sources":["../../../../../../../src/components/presentation/auth/SignIn/v1/options/SocialButton.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 {FC, HTMLAttributes, ReactElement} from 'react';\n// eslint-disable-next-line import/no-cycle\nimport {BaseSignInOptionProps} from './SignInOptionFactory';\nimport useTranslation from '../../../../../../hooks/useTranslation';\nimport Button from '../../../../../primitives/Button/Button';\n\n/**\n * Social Login Sign-In Option Component.\n * Handles authentication with external identity providers (Google, GitHub, etc.).\n */\nconst SocialLogin: FC<BaseSignInOptionProps & HTMLAttributes<HTMLButtonElement>> = ({\n  isLoading,\n  preferences,\n  children,\n  ...rest\n}: BaseSignInOptionProps & HTMLAttributes<HTMLButtonElement>): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n  return (\n    <Button\n      {...rest}\n      fullWidth\n      type=\"button\"\n      color=\"secondary\"\n      variant=\"outline\"\n      disabled={isLoading}\n      startIcon={\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            fill=\"currentColor\"\n            d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n          />\n        </svg>\n      }\n    >\n      {t('elements.buttons.social.text', {connection: children as string})}\n    </Button>\n  );\n};\n\nexport default SocialLogin;\n"],"mappings":";;;;;;;;;AA4BA,MAAMA,eAA8E,EAClF,WACA,aACA,SACA,GAAG,WAC0E;CAC7E,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;AAC7C,QACE,oBAACC;EACC,GAAI;EACJ;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,UAAU;EACV,WACE,oBAAC;GAAI,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAY,OAAM;aACpD,oBAAC;IACC,MAAK;IACL,GAAE;KACF;IACE;YAGP,EAAE,gCAAgC,EAAC,YAAY,UAAmB,CAAC;GAC7D;;AAIb,2BAAe"}

package/dist/components/presentation/auth/SignIn/v1/options/Totp.js

@@ -0,0 +1,64 @@
+import useFlow_default from "../../../../../../contexts/Flow/useFlow.js";
+import useTheme_default from "../../../../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../../../../hooks/useTranslation.js";
+import Button_default from "../../../../../primitives/Button/Button.js";
+import OtpField_default from "../../../../../primitives/OtpField/OtpField.js";
+import { createField } from "../../../../../factories/FieldFactory.js";
+import { EmbeddedSignInFlowAuthenticatorParamType, FieldType } from "@thunderid/browser";
+import { useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/presentation/auth/SignIn/v1/options/Totp.tsx
+/**
+* TOTP Sign-In Option Component.
+* Handles Time-based One-Time Password (TOTP) authentication.
+*/
+const Totp = ({ authenticator, formValues, touchedFields, isLoading, onInputChange, inputClassName = "", buttonClassName = "", preferences }) => {
+	const { theme } = useTheme_default();
+	const { t } = useTranslation_default(preferences?.i18n);
+	const { setTitle, setSubtitle } = useFlow_default();
+	const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
+	useEffect(() => {
+		setTitle(t("totp.heading"));
+		setSubtitle(t("totp.subheading"));
+	}, [
+		setTitle,
+		setSubtitle,
+		t
+	]);
+	const hasTotpField = formFields.some((param) => param.param.toLowerCase().includes("totp") || param.param.toLowerCase().includes("token"));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [formFields.map((param) => {
+		return /* @__PURE__ */ jsx("div", { children: (param.param.toLowerCase().includes("totp") || param.param.toLowerCase().includes("token")) && hasTotpField ? /* @__PURE__ */ jsx(OtpField_default, {
+			length: 6,
+			value: formValues[param.param] || "",
+			onChange: (event) => onInputChange(param.param, event.target.value),
+			disabled: isLoading,
+			className: inputClassName
+		}) : createField({
+			className: inputClassName,
+			disabled: isLoading,
+			label: param.displayName,
+			name: param.param,
+			onChange: (value) => onInputChange(param.param, value),
+			required: authenticator.requiredParams.includes(param.param),
+			touched: touchedFields[param.param] || false,
+			type: param.type === EmbeddedSignInFlowAuthenticatorParamType.String && param.confidential ? FieldType.Password : FieldType.Text,
+			value: formValues[param.param] || ""
+		}) }, param.param);
+	}), /* @__PURE__ */ jsx(Button_default, {
+		fullWidth: true,
+		type: "submit",
+		color: "primary",
+		variant: "solid",
+		disabled: isLoading,
+		loading: isLoading,
+		className: buttonClassName,
+		style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
+		children: t("totp.buttons.submit.text")
+	})] });
+};
+var Totp_default = Totp;
+
+//#endregion
+export { Totp_default as default };
+//# sourceMappingURL=Totp.js.map

package/dist/components/presentation/auth/SignIn/v1/options/Totp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Totp.js","names":["Totp: FC<BaseSignInOptionProps>","useTheme","useTranslation","useFlow","formFields: any","hasTotpField: any","OtpField","Button"],"sources":["../../../../../../../src/components/presentation/auth/SignIn/v1/options/Totp.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 {EmbeddedSignInFlowAuthenticatorParamType, FieldType} from '@thunderid/browser';\nimport {FC, ReactElement, useEffect} from 'react';\n// eslint-disable-next-line import/no-cycle\nimport {BaseSignInOptionProps} from './SignInOptionFactory';\nimport useFlow from '../../../../../../contexts/Flow/useFlow';\nimport useTheme from '../../../../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../../../../hooks/useTranslation';\nimport {createField} from '../../../../../factories/FieldFactory';\nimport Button from '../../../../../primitives/Button/Button';\nimport OtpField from '../../../../../primitives/OtpField/OtpField';\n\n/**\n * TOTP Sign-In Option Component.\n * Handles Time-based One-Time Password (TOTP) authentication.\n */\nconst Totp: FC<BaseSignInOptionProps> = ({\n  authenticator,\n  formValues,\n  touchedFields,\n  isLoading,\n  onInputChange,\n  inputClassName = '',\n  buttonClassName = '',\n  preferences,\n}: BaseSignInOptionProps): ReactElement => {\n  const {theme} = useTheme();\n  const {t} = useTranslation(preferences?.i18n);\n  const {setTitle, setSubtitle} = useFlow();\n\n  const formFields: any = authenticator!.metadata?.params?.sort((a: any, b: any) => a.order - b.order) || [];\n\n  useEffect(() => {\n    setTitle(t('totp.heading'));\n    setSubtitle(t('totp.subheading'));\n  }, [setTitle, setSubtitle, t]);\n\n  const hasTotpField: any = formFields.some(\n    (param: any) => param.param.toLowerCase().includes('totp') || param.param.toLowerCase().includes('token'),\n  );\n\n  return (\n    <>\n      {formFields.map((param: any) => {\n        const isTotpParam: any =\n          param.param.toLowerCase().includes('totp') || param.param.toLowerCase().includes('token');\n\n        return (\n          <div key={param.param}>\n            {isTotpParam && hasTotpField ? (\n              <OtpField\n                length={6}\n                value={formValues[param.param] || ''}\n                onChange={(event: any): void => onInputChange(param.param, event.target.value)}\n                disabled={isLoading}\n                className={inputClassName}\n              />\n            ) : (\n              createField({\n                className: inputClassName,\n                disabled: isLoading,\n                label: param.displayName,\n                name: param.param,\n                onChange: (value: any) => onInputChange(param.param, value),\n                required: authenticator!.requiredParams.includes(param.param),\n                touched: touchedFields[param.param] || false,\n                type:\n                  param.type === EmbeddedSignInFlowAuthenticatorParamType.String && param.confidential\n                    ? FieldType.Password\n                    : FieldType.Text,\n                value: formValues[param.param] || '',\n              })\n            )}\n          </div>\n        );\n      })}\n\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"solid\"\n        disabled={isLoading}\n        loading={isLoading}\n        className={buttonClassName}\n        style={{marginBottom: `calc(${theme.vars.spacing.unit} * 2)`}}\n      >\n        {t('totp.buttons.submit.text')}\n      </Button>\n    </>\n  );\n};\n\nexport default Totp;\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,MAAMA,QAAmC,EACvC,eACA,YACA,eACA,WACA,eACA,iBAAiB,IACjB,kBAAkB,IAClB,kBACyC;CACzC,MAAM,EAAC,UAASC,kBAAU;CAC1B,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAM,EAAC,UAAU,gBAAeC,iBAAS;CAEzC,MAAMC,aAAkB,cAAe,UAAU,QAAQ,MAAM,GAAQ,MAAW,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE;AAE1G,iBAAgB;AACd,WAAS,EAAE,eAAe,CAAC;AAC3B,cAAY,EAAE,kBAAkB,CAAC;IAChC;EAAC;EAAU;EAAa;EAAE,CAAC;CAE9B,MAAMC,eAAoB,WAAW,MAClC,UAAe,MAAM,MAAM,aAAa,CAAC,SAAS,OAAO,IAAI,MAAM,MAAM,aAAa,CAAC,SAAS,QAAQ,CAC1G;AAED,QACE,4CACG,WAAW,KAAK,UAAe;AAI9B,SACE,oBAAC,oBAHD,MAAM,MAAM,aAAa,CAAC,SAAS,OAAO,IAAI,MAAM,MAAM,aAAa,CAAC,SAAS,QAAQ,KAIvE,eACd,oBAACC;GACC,QAAQ;GACR,OAAO,WAAW,MAAM,UAAU;GAClC,WAAW,UAAqB,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM;GAC9E,UAAU;GACV,WAAW;IACX,GAEF,YAAY;GACV,WAAW;GACX,UAAU;GACV,OAAO,MAAM;GACb,MAAM,MAAM;GACZ,WAAW,UAAe,cAAc,MAAM,OAAO,MAAM;GAC3D,UAAU,cAAe,eAAe,SAAS,MAAM,MAAM;GAC7D,SAAS,cAAc,MAAM,UAAU;GACvC,MACE,MAAM,SAAS,yCAAyC,UAAU,MAAM,eACpE,UAAU,WACV,UAAU;GAChB,OAAO,WAAW,MAAM,UAAU;GACnC,CAAC,IAvBI,MAAM,MAyBV;GAER,EAEF,oBAACC;EACC;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,UAAU;EACV,SAAS;EACT,WAAW;EACX,OAAO,EAAC,cAAc,QAAQ,MAAM,KAAK,QAAQ,KAAK,QAAO;YAE5D,EAAE,2BAA2B;GACvB,IACR;;AAIP,mBAAe"}

package/dist/components/presentation/auth/SignIn/v1/options/UsernamePassword.js

@@ -0,0 +1,56 @@
+import useFlow_default from "../../../../../../contexts/Flow/useFlow.js";
+import useTheme_default from "../../../../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../../../../hooks/useTranslation.js";
+import Button_default from "../../../../../primitives/Button/Button.js";
+import { createField } from "../../../../../factories/FieldFactory.js";
+import { EmbeddedSignInFlowAuthenticatorParamType, FieldType } from "@thunderid/browser";
+import { useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/presentation/auth/SignIn/v1/options/UsernamePassword.tsx
+/**
+* Username Password Sign-In Option Component.
+* Handles traditional username and password authentication.
+*/
+const UsernamePassword = ({ authenticator, formValues, touchedFields, isLoading, onInputChange, inputClassName = "", buttonClassName = "", preferences }) => {
+	const { theme } = useTheme_default();
+	const { t } = useTranslation_default(preferences?.i18n);
+	const { setTitle, setSubtitle } = useFlow_default();
+	const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order)?.filter((param) => param.param !== "totp") || [];
+	useEffect(() => {
+		setTitle(t("username.password.heading"));
+		setSubtitle(t("username.password.subheading"));
+	}, [
+		setTitle,
+		setSubtitle,
+		t
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [formFields.map((param) => /* @__PURE__ */ jsx("div", { children: createField({
+		className: inputClassName,
+		disabled: isLoading,
+		label: param.displayName,
+		name: param.param,
+		onChange: (value) => onInputChange(param.param, value),
+		placeholder: t(`elements.fields.generic.placeholder`, { field: (param.displayName || param.param).toLowerCase() }),
+		required: authenticator.requiredParams.includes(param.param),
+		touched: touchedFields[param.param] || false,
+		type: param.type === EmbeddedSignInFlowAuthenticatorParamType.String && param.confidential ? FieldType.Password : FieldType.Text,
+		value: formValues[param.param] || ""
+	}) }, param.param)), /* @__PURE__ */ jsx(Button_default, {
+		fullWidth: true,
+		type: "submit",
+		color: "primary",
+		variant: "solid",
+		disabled: isLoading,
+		loading: isLoading,
+		className: buttonClassName,
+		"data-testid": "thunderid-signin-submit",
+		style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
+		children: t("username.password.buttons.submit.text")
+	})] });
+};
+var UsernamePassword_default = UsernamePassword;
+
+//#endregion
+export { UsernamePassword_default as default };
+//# sourceMappingURL=UsernamePassword.js.map

package/dist/components/presentation/auth/SignIn/v1/options/UsernamePassword.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsernamePassword.js","names":["UsernamePassword: FC<BaseSignInOptionProps>","useTheme","useTranslation","useFlow","formFields: any","Button"],"sources":["../../../../../../../src/components/presentation/auth/SignIn/v1/options/UsernamePassword.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 {EmbeddedSignInFlowAuthenticatorParamType, FieldType} from '@thunderid/browser';\nimport {FC, ReactElement, useEffect} from 'react';\n// eslint-disable-next-line import/no-cycle\nimport {BaseSignInOptionProps} from './SignInOptionFactory';\nimport useFlow from '../../../../../../contexts/Flow/useFlow';\nimport useTheme from '../../../../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../../../../hooks/useTranslation';\nimport {createField} from '../../../../../factories/FieldFactory';\nimport Button from '../../../../../primitives/Button/Button';\n\n/**\n * Username Password Sign-In Option Component.\n * Handles traditional username and password authentication.\n */\nconst UsernamePassword: FC<BaseSignInOptionProps> = ({\n  authenticator,\n  formValues,\n  touchedFields,\n  isLoading,\n  onInputChange,\n  inputClassName = '',\n  buttonClassName = '',\n  preferences,\n}: BaseSignInOptionProps): ReactElement => {\n  const {theme} = useTheme();\n  const {t} = useTranslation(preferences?.i18n);\n  const {setTitle, setSubtitle} = useFlow();\n\n  const formFields: any =\n    authenticator!.metadata?.params\n      ?.sort((a: any, b: any) => a.order - b.order)\n      ?.filter((param: any) => param.param !== 'totp') || []; // Exclude TOTP fields for username/password\n\n  useEffect(() => {\n    setTitle(t('username.password.heading'));\n    setSubtitle(t('username.password.subheading'));\n  }, [setTitle, setSubtitle, t]);\n\n  return (\n    <>\n      {formFields.map((param: any) => (\n        <div key={param.param}>\n          {createField({\n            className: inputClassName,\n            disabled: isLoading,\n            label: param.displayName,\n            name: param.param,\n            onChange: (value: any) => onInputChange(param.param, value),\n            placeholder: t(`elements.fields.generic.placeholder`, {\n              field: (param.displayName || param.param).toLowerCase(),\n            }),\n            required: authenticator!.requiredParams.includes(param.param),\n            touched: touchedFields[param.param] || false,\n            type:\n              param.type === EmbeddedSignInFlowAuthenticatorParamType.String && param.confidential\n                ? FieldType.Password\n                : FieldType.Text,\n            value: formValues[param.param] || '',\n          })}\n        </div>\n      ))}\n\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"solid\"\n        disabled={isLoading}\n        loading={isLoading}\n        className={buttonClassName}\n        data-testid=\"thunderid-signin-submit\"\n        style={{marginBottom: `calc(${theme.vars.spacing.unit} * 2)`}}\n      >\n        {t('username.password.buttons.submit.text')}\n      </Button>\n    </>\n  );\n};\n\nexport default UsernamePassword;\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAMA,oBAA+C,EACnD,eACA,YACA,eACA,WACA,eACA,iBAAiB,IACjB,kBAAkB,IAClB,kBACyC;CACzC,MAAM,EAAC,UAASC,kBAAU;CAC1B,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAM,EAAC,UAAU,gBAAeC,iBAAS;CAEzC,MAAMC,aACJ,cAAe,UAAU,QACrB,MAAM,GAAQ,MAAW,EAAE,QAAQ,EAAE,MAAM,EAC3C,QAAQ,UAAe,MAAM,UAAU,OAAO,IAAI,EAAE;AAE1D,iBAAgB;AACd,WAAS,EAAE,4BAA4B,CAAC;AACxC,cAAY,EAAE,+BAA+B,CAAC;IAC7C;EAAC;EAAU;EAAa;EAAE,CAAC;AAE9B,QACE,4CACG,WAAW,KAAK,UACf,oBAAC,mBACE,YAAY;EACX,WAAW;EACX,UAAU;EACV,OAAO,MAAM;EACb,MAAM,MAAM;EACZ,WAAW,UAAe,cAAc,MAAM,OAAO,MAAM;EAC3D,aAAa,EAAE,uCAAuC,EACpD,QAAQ,MAAM,eAAe,MAAM,OAAO,aAAa,EACxD,CAAC;EACF,UAAU,cAAe,eAAe,SAAS,MAAM,MAAM;EAC7D,SAAS,cAAc,MAAM,UAAU;EACvC,MACE,MAAM,SAAS,yCAAyC,UAAU,MAAM,eACpE,UAAU,WACV,UAAU;EAChB,OAAO,WAAW,MAAM,UAAU;EACnC,CAAC,IAjBM,MAAM,MAkBV,CACN,EAEF,oBAACC;EACC;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,UAAU;EACV,SAAS;EACT,WAAW;EACX,eAAY;EACZ,OAAO,EAAC,cAAc,QAAQ,MAAM,KAAK,QAAQ,KAAK,QAAO;YAE5D,EAAE,wCAAwC;GACpC,IACR;;AAIP,+BAAe"}

package/dist/components/presentation/auth/SignIn/v2/BaseSignIn.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2025-2026, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except

package/dist/components/presentation/auth/SignIn/v2/BaseSignIn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSignIn.d.ts","sourceRoot":"","sources":["../../../../../../src/components/presentation/auth/SignIn/v2/BaseSignIn.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseSignIn.d.ts","sourceRoot":"","sources":["../../../../../../src/components/presentation/auth/SignIn/v2/BaseSignIn.tsx"],"names":[],"mappings":"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"}

package/dist/components/presentation/auth/SignIn/v2/BaseSignIn.js

@@ -0,0 +1,325 @@
+import ComponentRendererContext_default from "../../../../../contexts/ComponentRenderer/ComponentRendererContext.js";
+import FlowProvider_default from "../../../../../contexts/Flow/FlowProvider.js";
+import useThunderID_default from "../../../../../contexts/ThunderID/useThunderID.js";
+import useFlow_default from "../../../../../contexts/Flow/useFlow.js";
+import useTheme_default from "../../../../../contexts/Theme/useTheme.js";
+import ComponentPreferencesContext_default from "../../../../../contexts/I18n/ComponentPreferencesContext.js";
+import useTranslation_default from "../../../../../hooks/useTranslation.js";
+import { useForm } from "../../../../../hooks/useForm.js";
+import Spinner_default from "../../../../primitives/Spinner/Spinner.js";
+import Typography_default from "../../../../primitives/Typography/Typography.js";
+import Alert_default from "../../../../primitives/Alert/Alert.js";
+import Card_default from "../../../../primitives/Card/Card.js";
+import BaseSignIn_styles_default from "../BaseSignIn.styles.js";
+import { extractErrorMessage } from "../../../../../utils/v2/flowTransformer.js";
+import { renderSignInComponents } from "../../AuthOptionFactory.js";
+import { withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useCallback, useContext, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/presentation/auth/SignIn/v2/BaseSignIn.tsx
+/**
+* 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 { meta } = useThunderID_default();
+	const { theme } = useTheme_default();
+	const customRenderers = useContext(ComponentRendererContext_default);
+	const { t } = useTranslation_default();
+	const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
+	const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [apiError, setApiError] = useState(null);
+	const isLoading = externalIsLoading || isSubmitting;
+	/**
+	* Handle error responses and extract meaningful error messages
+	* Uses the transformer's extractErrorMessage function for consistency
+	*/
+	const handleError = useCallback((error) => {
+		const errorMessage = extractErrorMessage(error, t);
+		setApiError(error instanceof Error ? error : new Error(errorMessage));
+		clearMessages();
+		addMessage({
+			message: errorMessage,
+			type: "error"
+		});
+	}, [
+		t,
+		addMessage,
+		clearMessages
+	]);
+	/**
+	* Extract form fields from flow components
+	*/
+	const extractFormFields = useCallback((flowComponents) => {
+		const fields = [];
+		const processComponents = (comps) => {
+			comps.forEach((component) => {
+				if (component.type === "TEXT_INPUT" || component.type === "PASSWORD_INPUT" || component.type === "EMAIL_INPUT" || component.type === "PHONE_INPUT" || component.type === "OTP_INPUT") {
+					const identifier = component.ref;
+					fields.push({
+						initialValue: "",
+						name: identifier,
+						required: component.required || false,
+						validator: (value) => {
+							if (component.required && (!value || value.trim() === "")) return t("validations.required.field.error");
+							if ((component.type === "EMAIL_INPUT" || component.variant === "EMAIL") && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return t("field.email.invalid");
+							return null;
+						}
+					});
+				}
+				if (component.components) processComponents(component.components);
+			});
+		};
+		processComponents(flowComponents);
+		return fields;
+	}, [t]);
+	const { values: formValues, touched: touchedFields, errors: formErrors, isValid: isFormValid, setValue: setFormValue, setTouched: setFormTouched, validateForm, touchAllFields } = useForm({
+		fields: components ? extractFormFields(components) : [],
+		initialValues: {},
+		requiredMessage: t("validations.required.field.error"),
+		validateOnBlur: true,
+		validateOnChange: false
+	});
+	/**
+	* Handle input value changes.
+	* Only updates the value without marking as touched.
+	* Touched state is set on blur to avoid premature validation.
+	*/
+	const handleInputChange = (name, value) => {
+		setFormValue(name, value);
+	};
+	/**
+	* Handle input blur event.
+	* Marks the field as touched, which triggers validation.
+	*/
+	const handleInputBlur = (name) => {
+		setFormTouched(name, true);
+	};
+	/**
+	* Handle component submission (for buttons and actions).
+	*/
+	const handleSubmit = async (component, data, skipValidation) => {
+		if (!skipValidation) {
+			touchAllFields();
+			if (!validateForm().isValid) return;
+		}
+		setIsSubmitting(true);
+		setApiError(null);
+		clearMessages();
+		try {
+			const filteredInputs = {};
+			if (data) Object.keys(data).forEach((key) => {
+				if (data[key] !== void 0 && data[key] !== null && data[key] !== "") filteredInputs[key] = data[key];
+			});
+			let payload = {};
+			payload = {
+				...payload,
+				...component.id && { action: component.id },
+				inputs: filteredInputs
+			};
+			await onSubmit?.(payload, component);
+		} catch (err) {
+			handleError(err);
+			onError?.(err);
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+	const containerClasses = cx([
+		withVendorCSSClassPrefix("signin"),
+		withVendorCSSClassPrefix(`signin--${size}`),
+		withVendorCSSClassPrefix(`signin--${variant}`)
+	], className);
+	const inputClasses = cx([
+		withVendorCSSClassPrefix("signin__input"),
+		size === "small" && withVendorCSSClassPrefix("signin__input--small"),
+		size === "large" && withVendorCSSClassPrefix("signin__input--large")
+	], inputClassName);
+	const buttonClasses = cx([
+		withVendorCSSClassPrefix("signin__button"),
+		size === "small" && withVendorCSSClassPrefix("signin__button--small"),
+		size === "large" && withVendorCSSClassPrefix("signin__button--large")
+	], buttonClassName);
+	const messageClasses = cx([withVendorCSSClassPrefix("signin__messages")], messageClassName);
+	/**
+	* Render components based on flow data using the factory
+	*/
+	const renderComponents = useCallback((flowComponents) => renderSignInComponents(flowComponents, formValues, touchedFields, formErrors, isLoading, isFormValid, handleInputChange, {
+		_customRenderers: customRenderers,
+		_theme: theme,
+		additionalData,
+		buttonClassName: buttonClasses,
+		inputClassName: inputClasses,
+		isTimeoutDisabled,
+		meta,
+		onInputBlur: handleInputBlur,
+		onSubmit: handleSubmit,
+		size,
+		t,
+		variant
+	}), [
+		additionalData,
+		customRenderers,
+		formValues,
+		touchedFields,
+		formErrors,
+		isFormValid,
+		meta,
+		t,
+		theme,
+		isLoading,
+		size,
+		variant,
+		inputClasses,
+		buttonClasses,
+		handleInputBlur,
+		handleSubmit,
+		isTimeoutDisabled
+	]);
+	if (children) {
+		const renderProps = {
+			components,
+			error: apiError,
+			fieldErrors: formErrors,
+			handleInputChange,
+			handleSubmit,
+			isLoading,
+			isTimeoutDisabled,
+			isValid: isFormValid,
+			messages: flowMessages || [],
+			meta,
+			subtitle: flowSubtitle ?? "",
+			title: flowTitle || t("signin.heading"),
+			touched: touchedFields,
+			validateForm: () => {
+				const result = validateForm();
+				return {
+					fieldErrors: result.errors,
+					isValid: result.isValid
+				};
+			},
+			values: formValues
+		};
+		return /* @__PURE__ */ jsx("div", {
+			className: containerClasses,
+			"data-testid": "thunderid-signin",
+			children: children(renderProps)
+		});
+	}
+	if (isLoading) return /* @__PURE__ */ jsx(Card_default, {
+		className: cx(containerClasses, styles.card),
+		"data-testid": "thunderid-signin",
+		variant,
+		children: /* @__PURE__ */ jsx(Card_default.Content, { children: /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				justifyContent: "center",
+				padding: "2rem"
+			},
+			children: /* @__PURE__ */ jsx(Spinner_default, {})
+		}) })
+	});
+	if (!components || components.length === 0) return /* @__PURE__ */ jsx(Card_default, {
+		className: cx(containerClasses, styles.card),
+		"data-testid": "thunderid-signin",
+		variant,
+		children: /* @__PURE__ */ jsx(Card_default.Content, { children: /* @__PURE__ */ jsx(Alert_default, {
+			variant: "warning",
+			children: /* @__PURE__ */ jsx(Typography_default, {
+				variant: "body1",
+				children: t("errors.signin.components.not.available")
+			})
+		}) })
+	});
+	return /* @__PURE__ */ jsx(Card_default, {
+		className: cx(containerClasses, styles.card),
+		"data-testid": "thunderid-signin",
+		variant,
+		children: /* @__PURE__ */ jsxs(Card_default.Content, { children: [
+			externalError && /* @__PURE__ */ jsx("div", {
+				className: styles.flowMessagesContainer,
+				children: /* @__PURE__ */ jsx(Alert_default, {
+					variant: "error",
+					className: cx(styles.flowMessageItem, messageClasses),
+					children: /* @__PURE__ */ jsx(Alert_default.Description, { children: externalError.message })
+				})
+			}),
+			flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: styles.flowMessagesContainer,
+				children: flowMessages.map((message, index) => /* @__PURE__ */ jsx(Alert_default, {
+					variant: message.type === "error" ? "error" : "info",
+					className: cx(styles.flowMessageItem, messageClasses),
+					children: /* @__PURE__ */ jsx(Alert_default.Description, { children: message.message })
+				}, index))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: styles.contentContainer,
+				children: renderComponents(components)
+			})
+		] })
+	});
+};
+/**
+* Base SignIn component that provides generic authentication flow.
+* This component handles component-driven UI rendering and can transform input
+* structure to component-driven format automatically.
+*
+* @example
+* // Default UI
+* ```tsx
+* import { BaseSignIn } from '@thunderid/react';
+*
+* const MySignIn = () => {
+*   return (
+*     <BaseSignIn
+*       components={components}
+*       onSubmit={async (payload) => {
+*         return await handleAuth(payload);
+*       }}
+*       onSuccess={(authData) => {
+*         console.log('Success:', authData);
+*       }}
+*       className="max-w-md mx-auto"
+*     />
+*   );
+* };
+* ```
+*
+* @example
+* // Custom UI with render props
+* ```tsx
+* <BaseSignIn components={components} onSubmit={handleSubmit}>
+*   {({values, errors, handleInputChange, handleSubmit, isLoading, components}) => (
+*     <div className="custom-form">
+*       <input
+*         name="username"
+*         value={values.username || ''}
+*         onChange={(e) => handleInputChange('username', e.target.value)}
+*       />
+*       {errors.username && <span>{errors.username}</span>}
+*       <button
+*         onClick={() => handleSubmit(components[0], values)}
+*         disabled={isLoading}
+*       >
+*         Sign In
+*       </button>
+*     </div>
+*   )}
+* </BaseSignIn>
+* ```
+*/
+const BaseSignIn = ({ preferences,...rest }) => {
+	const content = /* @__PURE__ */ jsx(FlowProvider_default, { children: /* @__PURE__ */ jsx(BaseSignInContent, { ...rest }) });
+	if (!preferences) return content;
+	return /* @__PURE__ */ jsx(ComponentPreferencesContext_default.Provider, {
+		value: preferences,
+		children: content
+	});
+};
+var BaseSignIn_default = BaseSignIn;
+
+//#endregion
+export { BaseSignIn_default as default };
+//# sourceMappingURL=BaseSignIn.js.map