@thunderid/react 0.1.0 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignInOptionFactory.cjs","names":["hasParams: any","ApplicationNativeAuthenticationConstants","UsernamePassword","IdentifierFirst","GoogleButton","GitHubButton","MicrosoftButton","FacebookButton","LinkedInButton","SignInWithEthereumButton","EmailOtp","MultiOptionButton","Totp","SmsOtp","EmbeddedSignInFlowAuthenticatorKnownIdPType","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,KAAKC,6DAAyC,wBAAwB,iBACpE,QAAO,2CAACC;GAAgC;GAA4B;GAAuB;GAAU,GAAI;IAAQ;EAEnH,KAAKD,6DAAyC,wBAAwB,gBACpE,QAAO,2CAACE;GAA+B;GAA4B;GAAuB;GAAU,GAAI;IAAQ;EAElH,KAAKF,6DAAyC,wBAAwB,OACpE,QACE,2CAACG;GACC,WAAW;GACX,eAAoB,SAAU,cAAe;GAChC;GACb,GAAI;IACJ;EAGN,KAAKH,6DAAyC,wBAAwB,OACpE,QACE,2CAACI;GACc;GACb,WAAW;GACX,eAAoB,SAAU,cAAe;GAC7C,GAAI;IACJ;EAGN,KAAKJ,6DAAyC,wBAAwB,UACpE,QACE,2CAACK;GACc;GACb,WAAW;GACX,eAAoB,SAAU,cAAe;GAC7C,GAAI;IACJ;EAGN,KAAKL,6DAAyC,wBAAwB,SACpE,QACE,2CAACM;GACc;GACb,WAAW;GACX,eAAoB,SAAU,cAAe;GAC7C,GAAI;IACJ;EAGN,KAAKN,6DAAyC,wBAAwB,SACpE,QACE,2CAACO;GACc;GACb,WAAW;GACX,eAAoB,SAAU,cAAe;GAC7C,GAAI;IACJ;EAGN,KAAKP,6DAAyC,wBAAwB,mBACpE,QACE,2CAACQ;GACc;GACb,WAAW;GACX,eAAoB,SAAU,cAAe;GAC7C,GAAI;IACJ;EAGN,KAAKR,6DAAyC,wBAAwB,SAEpE,QAAO,YACL,2CAACS;GAAwB;GAA4B;GAAuB;GAAU,GAAI;IAAQ,GAElG,2CAACC;GAAiC;GAA4B;GAAuB;GAAU,GAAI;IAAQ;EAG/G,KAAKV,6DAAyC,wBAAwB,KAEpE,QAAO,YACL,2CAACW;GAAoB;GAA4B;GAAuB;GAAU,GAAI;IAAQ,GAE9F,2CAACD;GAAiC;GAA4B;GAAuB;GAAU,GAAI;IAAQ;EAG/G,KAAKV,6DAAyC,wBAAwB,OAEpE,QAAO,YACL,2CAACY;GAAsB;GAA4B;GAAuB;GAAU,GAAI;IAAQ,GAEhG,2CAACF;GAAiC;GAA4B;GAAuB;GAAU,GAAI;IAAQ;EAG/G;AAEE,OAAI,cAAe,QAAQG,gEAA4C,MAErE,QACE,2CAACC;IACgB;IACF;IACb,WAAW;IACX,eAAoB,SAAU,cAAe;IAC7C,GAAI;cAEH,cAAe;KACH;AAKnB,OAAI,UAEF,QACE,2CAACb;IAAgC;IAA4B;IAAuB;IAAU,GAAI;KAAQ;AAI9G,UACE,2CAACS;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/cjs/components/presentation/auth/SignIn/v1/options/SmsOtp.cjs

@@ -0,0 +1,68 @@
+const require_rolldown_runtime = require('../../../../../../_virtual/rolldown_runtime.cjs');
+const require_useFlow = require('../../../../../../contexts/Flow/useFlow.cjs');
+const require_useTheme = require('../../../../../../contexts/Theme/useTheme.cjs');
+const require_useTranslation = require('../../../../../../hooks/useTranslation.cjs');
+const require_Button = require('../../../../../primitives/Button/Button.cjs');
+const require_OtpField = require('../../../../../primitives/OtpField/OtpField.cjs');
+const require_FieldFactory = require('../../../../../factories/FieldFactory.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/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 } = require_useTheme.default();
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const { setTitle, setSubtitle } = require_useFlow.default();
+	const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [formFields.map((param) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: (param.param.toLowerCase().includes("otp") || param.param.toLowerCase().includes("code")) && hasOtpField ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OtpField.default, {
+			length: 6,
+			value: formValues[param.param] || "",
+			onChange: (event) => onInputChange(param.param, event.target.value),
+			disabled: isLoading,
+			className: inputClassName
+		}) : require_FieldFactory.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 === __thunderid_browser.EmbeddedSignInFlowAuthenticatorParamType.String && param.confidential ? __thunderid_browser.FieldType.Password : __thunderid_browser.FieldType.Text,
+			value: formValues[param.param] || ""
+		}) }, param.param);
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_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
+exports.default = SmsOtp_default;
+//# sourceMappingURL=SmsOtp.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SmsOtp.cjs","names":["SmsOtp: FC<BaseSignInOptionProps>","useTheme","useTranslation","useFlow","formFields: any","hasOtpField: any","OtpField","createField","EmbeddedSignInFlowAuthenticatorParamType","FieldType","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,0BAAU;CAC1B,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAC7C,MAAM,EAAC,UAAU,gBAAeC,yBAAS;CAEzC,MAAMC,aAAkB,cAAe,UAAU,QAAQ,MAAM,GAAQ,MAAW,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE;AAE1G,4BAAgB;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,qFACG,WAAW,KAAK,UAAe;AAG9B,SACE,2CAAC,oBAHqB,MAAM,MAAM,aAAa,CAAC,SAAS,MAAM,IAAI,MAAM,MAAM,aAAa,CAAC,SAAS,OAAO,KAI5F,cACb,2CAACC;GACC,QAAQ;GACR,OAAO,WAAW,MAAM,UAAU;GAClC,WAAW,UAAqB,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM;GAC9E,UAAU;GACV,WAAW;IACX,GAEFC,iCAAY;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,SAASC,6DAAyC,UAAU,MAAM,eACpEC,8BAAU,WACVA,8BAAU;GAChB,OAAO,WAAW,MAAM,UAAU;GACnC,CAAC,IAvBI,MAAM,MAyBV;GAER,EAEF,2CAACC;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/cjs/components/presentation/auth/SignIn/v1/options/SocialButton.cjs

@@ -0,0 +1,38 @@
+const require_rolldown_runtime = require('../../../../../../_virtual/rolldown_runtime.cjs');
+const require_useTranslation = require('../../../../../../hooks/useTranslation.cjs');
+const require_Button = require('../../../../../primitives/Button/Button.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(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 } = require_useTranslation.default(preferences?.i18n);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+		...rest,
+		fullWidth: true,
+		type: "button",
+		color: "secondary",
+		variant: "outline",
+		disabled: isLoading,
+		startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			width: "18",
+			height: "18",
+			viewBox: "0 0 24 24",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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
+exports.default = SocialButton_default;
+//# sourceMappingURL=SocialButton.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SocialButton.cjs","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,+BAAe,aAAa,KAAK;AAC7C,QACE,2CAACC;EACC,GAAI;EACJ;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,UAAU;EACV,WACE,2CAAC;GAAI,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAY,OAAM;aACpD,2CAAC;IACC,MAAK;IACL,GAAE;KACF;IACE;YAGP,EAAE,gCAAgC,EAAC,YAAY,UAAmB,CAAC;GAC7D;;AAIb,2BAAe"}

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

@@ -0,0 +1,68 @@
+const require_rolldown_runtime = require('../../../../../../_virtual/rolldown_runtime.cjs');
+const require_useFlow = require('../../../../../../contexts/Flow/useFlow.cjs');
+const require_useTheme = require('../../../../../../contexts/Theme/useTheme.cjs');
+const require_useTranslation = require('../../../../../../hooks/useTranslation.cjs');
+const require_Button = require('../../../../../primitives/Button/Button.cjs');
+const require_OtpField = require('../../../../../primitives/OtpField/OtpField.cjs');
+const require_FieldFactory = require('../../../../../factories/FieldFactory.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/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 } = require_useTheme.default();
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const { setTitle, setSubtitle } = require_useFlow.default();
+	const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [formFields.map((param) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: (param.param.toLowerCase().includes("totp") || param.param.toLowerCase().includes("token")) && hasTotpField ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OtpField.default, {
+			length: 6,
+			value: formValues[param.param] || "",
+			onChange: (event) => onInputChange(param.param, event.target.value),
+			disabled: isLoading,
+			className: inputClassName
+		}) : require_FieldFactory.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 === __thunderid_browser.EmbeddedSignInFlowAuthenticatorParamType.String && param.confidential ? __thunderid_browser.FieldType.Password : __thunderid_browser.FieldType.Text,
+			value: formValues[param.param] || ""
+		}) }, param.param);
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_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
+exports.default = Totp_default;
+//# sourceMappingURL=Totp.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Totp.cjs","names":["Totp: FC<BaseSignInOptionProps>","useTheme","useTranslation","useFlow","formFields: any","hasTotpField: any","OtpField","createField","EmbeddedSignInFlowAuthenticatorParamType","FieldType","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,0BAAU;CAC1B,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAC7C,MAAM,EAAC,UAAU,gBAAeC,yBAAS;CAEzC,MAAMC,aAAkB,cAAe,UAAU,QAAQ,MAAM,GAAQ,MAAW,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE;AAE1G,4BAAgB;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,qFACG,WAAW,KAAK,UAAe;AAI9B,SACE,2CAAC,oBAHD,MAAM,MAAM,aAAa,CAAC,SAAS,OAAO,IAAI,MAAM,MAAM,aAAa,CAAC,SAAS,QAAQ,KAIvE,eACd,2CAACC;GACC,QAAQ;GACR,OAAO,WAAW,MAAM,UAAU;GAClC,WAAW,UAAqB,cAAc,MAAM,OAAO,MAAM,OAAO,MAAM;GAC9E,UAAU;GACV,WAAW;IACX,GAEFC,iCAAY;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,SAASC,6DAAyC,UAAU,MAAM,eACpEC,8BAAU,WACVA,8BAAU;GAChB,OAAO,WAAW,MAAM,UAAU;GACnC,CAAC,IAvBI,MAAM,MAyBV;GAER,EAEF,2CAACC;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/cjs/components/presentation/auth/SignIn/v1/options/UsernamePassword.cjs

@@ -0,0 +1,60 @@
+const require_rolldown_runtime = require('../../../../../../_virtual/rolldown_runtime.cjs');
+const require_useFlow = require('../../../../../../contexts/Flow/useFlow.cjs');
+const require_useTheme = require('../../../../../../contexts/Theme/useTheme.cjs');
+const require_useTranslation = require('../../../../../../hooks/useTranslation.cjs');
+const require_Button = require('../../../../../primitives/Button/Button.cjs');
+const require_FieldFactory = require('../../../../../factories/FieldFactory.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/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 } = require_useTheme.default();
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const { setTitle, setSubtitle } = require_useFlow.default();
+	const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order)?.filter((param) => param.param !== "totp") || [];
+	(0, react.useEffect)(() => {
+		setTitle(t("username.password.heading"));
+		setSubtitle(t("username.password.subheading"));
+	}, [
+		setTitle,
+		setSubtitle,
+		t
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [formFields.map((param) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: require_FieldFactory.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 === __thunderid_browser.EmbeddedSignInFlowAuthenticatorParamType.String && param.confidential ? __thunderid_browser.FieldType.Password : __thunderid_browser.FieldType.Text,
+		value: formValues[param.param] || ""
+	}) }, param.param)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_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
+exports.default = UsernamePassword_default;
+//# sourceMappingURL=UsernamePassword.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UsernamePassword.cjs","names":["UsernamePassword: FC<BaseSignInOptionProps>","useTheme","useTranslation","useFlow","formFields: any","createField","EmbeddedSignInFlowAuthenticatorParamType","FieldType","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,0BAAU;CAC1B,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAC7C,MAAM,EAAC,UAAU,gBAAeC,yBAAS;CAEzC,MAAMC,aACJ,cAAe,UAAU,QACrB,MAAM,GAAQ,MAAW,EAAE,QAAQ,EAAE,MAAM,EAC3C,QAAQ,UAAe,MAAM,UAAU,OAAO,IAAI,EAAE;AAE1D,4BAAgB;AACd,WAAS,EAAE,4BAA4B,CAAC;AACxC,cAAY,EAAE,+BAA+B,CAAC;IAC7C;EAAC;EAAU;EAAa;EAAE,CAAC;AAE9B,QACE,qFACG,WAAW,KAAK,UACf,2CAAC,mBACEC,iCAAY;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,SAASC,6DAAyC,UAAU,MAAM,eACpEC,8BAAU,WACVA,8BAAU;EAChB,OAAO,WAAW,MAAM,UAAU;EACnC,CAAC,IAjBM,MAAM,MAkBV,CACN,EAEF,2CAACC;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/cjs/components/presentation/auth/SignIn/v2/BaseSignIn.cjs

@@ -0,0 +1,330 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_ComponentRendererContext = require('../../../../../contexts/ComponentRenderer/ComponentRendererContext.cjs');
+const require_FlowProvider = require('../../../../../contexts/Flow/FlowProvider.cjs');
+const require_useThunderID = require('../../../../../contexts/ThunderID/useThunderID.cjs');
+const require_useFlow = require('../../../../../contexts/Flow/useFlow.cjs');
+const require_useTheme = require('../../../../../contexts/Theme/useTheme.cjs');
+const require_ComponentPreferencesContext = require('../../../../../contexts/I18n/ComponentPreferencesContext.cjs');
+const require_useTranslation = require('../../../../../hooks/useTranslation.cjs');
+const require_useForm = require('../../../../../hooks/useForm.cjs');
+const require_Spinner = require('../../../../primitives/Spinner/Spinner.cjs');
+const require_Typography = require('../../../../primitives/Typography/Typography.cjs');
+const require_Alert = require('../../../../primitives/Alert/Alert.cjs');
+const require_Card = require('../../../../primitives/Card/Card.cjs');
+const require_BaseSignIn_styles = require('../BaseSignIn.styles.cjs');
+const require_flowTransformer = require('../../../../../utils/v2/flowTransformer.cjs');
+const require_AuthOptionFactory = require('../../AuthOptionFactory.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/presentation/auth/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 } = require_useThunderID.default();
+	const { theme } = require_useTheme.default();
+	const customRenderers = (0, react.useContext)(require_ComponentRendererContext.default);
+	const { t } = require_useTranslation.default();
+	const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = require_useFlow.default();
+	const styles = require_BaseSignIn_styles.default(theme, theme.vars.colors.text.primary);
+	const [isSubmitting, setIsSubmitting] = (0, react.useState)(false);
+	const [apiError, setApiError] = (0, react.useState)(null);
+	const isLoading = externalIsLoading || isSubmitting;
+	/**
+	* Handle error responses and extract meaningful error messages
+	* Uses the transformer's extractErrorMessage function for consistency
+	*/
+	const handleError = (0, react.useCallback)((error) => {
+		const errorMessage = require_flowTransformer.extractErrorMessage(error, t);
+		setApiError(error instanceof Error ? error : new Error(errorMessage));
+		clearMessages();
+		addMessage({
+			message: errorMessage,
+			type: "error"
+		});
+	}, [
+		t,
+		addMessage,
+		clearMessages
+	]);
+	/**
+	* Extract form fields from flow components
+	*/
+	const extractFormFields = (0, react.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 } = require_useForm.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 = (0, __emotion_css.cx)([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("signin"),
+		(0, __thunderid_browser.withVendorCSSClassPrefix)(`signin--${size}`),
+		(0, __thunderid_browser.withVendorCSSClassPrefix)(`signin--${variant}`)
+	], className);
+	const inputClasses = (0, __emotion_css.cx)([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("signin__input"),
+		size === "small" && (0, __thunderid_browser.withVendorCSSClassPrefix)("signin__input--small"),
+		size === "large" && (0, __thunderid_browser.withVendorCSSClassPrefix)("signin__input--large")
+	], inputClassName);
+	const buttonClasses = (0, __emotion_css.cx)([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("signin__button"),
+		size === "small" && (0, __thunderid_browser.withVendorCSSClassPrefix)("signin__button--small"),
+		size === "large" && (0, __thunderid_browser.withVendorCSSClassPrefix)("signin__button--large")
+	], buttonClassName);
+	const messageClasses = (0, __emotion_css.cx)([(0, __thunderid_browser.withVendorCSSClassPrefix)("signin__messages")], messageClassName);
+	/**
+	* Render components based on flow data using the factory
+	*/
+	const renderComponents = (0, react.useCallback)((flowComponents) => require_AuthOptionFactory.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: containerClasses,
+			"data-testid": "thunderid-signin",
+			children: children(renderProps)
+		});
+	}
+	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		className: (0, __emotion_css.cx)(containerClasses, styles.card),
+		"data-testid": "thunderid-signin",
+		variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				display: "flex",
+				justifyContent: "center",
+				padding: "2rem"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, {})
+		}) })
+	});
+	if (!components || components.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		className: (0, __emotion_css.cx)(containerClasses, styles.card),
+		"data-testid": "thunderid-signin",
+		variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+			variant: "warning",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+				variant: "body1",
+				children: t("errors.signin.components.not.available")
+			})
+		}) })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		className: (0, __emotion_css.cx)(containerClasses, styles.card),
+		"data-testid": "thunderid-signin",
+		variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default.Content, { children: [
+			externalError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.flowMessagesContainer,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+					variant: "error",
+					className: (0, __emotion_css.cx)(styles.flowMessageItem, messageClasses),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: externalError.message })
+				})
+			}),
+			flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.flowMessagesContainer,
+				children: flowMessages.map((message, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+					variant: message.type === "error" ? "error" : "info",
+					className: (0, __emotion_css.cx)(styles.flowMessageItem, messageClasses),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: message.message })
+				}, index))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_FlowProvider.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseSignInContent, { ...rest }) });
+	if (!preferences) return content;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentPreferencesContext.default.Provider, {
+		value: preferences,
+		children: content
+	});
+};
+var BaseSignIn_default = BaseSignIn;
+
+//#endregion
+exports.default = BaseSignIn_default;
+//# sourceMappingURL=BaseSignIn.cjs.map