@thunderid/react 1.5.0 → 1.7.0

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

@@ -1,373 +0,0 @@
-const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
-const require_emotion = require('../../../../styles/emotion.cjs');
-const require_ComponentRendererContext = require('../../../../contexts/ComponentRenderer/ComponentRendererContext.cjs');
-const require_FlowProvider = require('../../../../contexts/Flow/FlowProvider.cjs');
-const require_useThunderID = require('../../../../contexts/ThunderID/useThunderID.cjs');
-const require_useFlow = require('../../../../contexts/Flow/useFlow.cjs');
-const require_useTheme = require('../../../../contexts/Theme/useTheme.cjs');
-const require_ComponentPreferencesContext = require('../../../../contexts/I18n/ComponentPreferencesContext.cjs');
-const require_useTranslation = require('../../../../hooks/useTranslation.cjs');
-const require_flowTransformer = require('../../../../utils/flowTransformer.cjs');
-const require_useForm = require('../../../../hooks/useForm.cjs');
-const require_Spinner = require('../../../primitives/Spinner/Spinner.cjs');
-const require_BaseSignIn_styles = require('./BaseSignIn.styles.cjs');
-const require_composeAffixedInputs = require('../../../../utils/composeAffixedInputs.cjs');
-const require_Typography = require('../../../primitives/Typography/Typography.cjs');
-const require_Alert = require('../../../primitives/Alert/Alert.cjs');
-const require_Card = require('../../../primitives/Card/Card.cjs');
-const require_AuthOptionFactory = require('../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);
-
-//#region src/components/presentation/auth/SignIn/BaseSignIn.tsx
-/**
-* Internal component that consumes FlowContext and renders the sign-in UI.
-*/
-const BaseSignInContent = ({ components = [], onSubmit, onError, error: externalError, id, className = "", inputClassName = "", buttonClassName = "", messageClassName = "", size = "medium", variant = "outlined", isLoading: externalIsLoading, children, additionalData = {}, isTimeoutDisabled = false, serverFieldErrors = null, revalidateOnChangeAfterBlur = false }) => {
-	const { meta, vendor } = require_useThunderID.default();
-	const { theme } = require_useTheme.default();
-	const customRenderers = (0, react.useContext)(require_ComponentRendererContext.default);
-	const { t, currentLanguage } = 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;
-	/**
-	* Component type for which forms validation will be applicable
-	*/
-	const acceptableType = [
-		"TEXT_INPUT",
-		"PASSWORD_INPUT",
-		"EMAIL_INPUT",
-		"PHONE_INPUT",
-		"OTP_INPUT",
-		"SELECT",
-		"DATE_INPUT",
-		"CUSTOM"
-	];
-	/**
-	* 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 (acceptableType.includes(component.type)) {
-					const identifier = component.ref;
-					const ruleValidator = (0, __thunderid_browser.buildValidatorFromRules)(component.validation);
-					fields.push({
-						initialValue: "",
-						name: identifier,
-						required: component.required || false,
-						validator: (value) => {
-							if (component.required && (!value || value.trim() === "")) return t("validations.required.field.error");
-							if (ruleValidator && value) {
-								const ruleMessage = ruleValidator(value);
-								if (ruleMessage) return t(ruleMessage);
-							}
-							if ((component.type === "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, setTouchedFields, setErrors: setFormErrors, clearErrors: clearFormErrors, validateForm, touchAllFields, reset: resetForm, revalidateTouchedFields } = require_useForm.useForm({
-		fields: (0, react.useMemo)(() => components ? extractFormFields(components) : [], [components, extractFormFields]),
-		initialValues: {},
-		requiredMessage: t("validations.required.field.error"),
-		revalidateOnChangeAfterBlur,
-		validateOnBlur: true,
-		validateOnChange: false
-	});
-	(0, react.useEffect)(() => {
-		clearFormErrors();
-		if (!serverFieldErrors || serverFieldErrors.length === 0) return;
-		const errors = {};
-		const touched = {};
-		for (const fe of serverFieldErrors) if (!(fe.identifier in errors)) {
-			errors[fe.identifier] = fe.message;
-			touched[fe.identifier] = true;
-		}
-		setTouchedFields(touched);
-		setFormErrors(errors);
-	}, [
-		serverFieldErrors,
-		setFormErrors,
-		setTouchedFields,
-		clearFormErrors
-	]);
-	(0, react.useEffect)(() => {
-		revalidateTouchedFields();
-	}, [currentLanguage, revalidateTouchedFields]);
-	/**
-	* 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 composedData = data ? require_composeAffixedInputs.default(data, vendor) : void 0;
-			const filteredInputs = {};
-			if (composedData) Object.keys(composedData).forEach((key) => {
-				if (composedData[key] !== void 0 && composedData[key] !== null && composedData[key] !== "") filteredInputs[key] = composedData[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 = require_emotion.cx([
-		(0, __thunderid_browser.withVendorCSSClassPrefix)("signin"),
-		(0, __thunderid_browser.withVendorCSSClassPrefix)(`signin--${size}`),
-		(0, __thunderid_browser.withVendorCSSClassPrefix)(`signin--${variant}`)
-	], className);
-	const inputClasses = require_emotion.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 = require_emotion.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 = require_emotion.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, resetForm, handleInputChange, {
-		_customRenderers: customRenderers,
-		_theme: theme,
-		additionalData,
-		buttonClassName: buttonClasses,
-		inputClassName: inputClasses,
-		isTimeoutDisabled,
-		meta,
-		onInputBlur: handleInputBlur,
-		onSubmit: handleSubmit,
-		size,
-		t,
-		variant,
-		vendor
-	}), [
-		additionalData,
-		customRenderers,
-		formValues,
-		touchedFields,
-		formErrors,
-		isFormValid,
-		meta,
-		t,
-		theme,
-		isLoading,
-		size,
-		variant,
-		vendor,
-		inputClasses,
-		buttonClasses,
-		handleInputBlur,
-		handleSubmit,
-		isTimeoutDisabled
-	]);
-	if (children) {
-		const renderProps = {
-			additionalData,
-			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", {
-			id,
-			className: containerClasses,
-			"data-testid": "thunderid-signin",
-			children: children(renderProps)
-		});
-	}
-	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
-		id,
-		className: require_emotion.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", {
-			className: styles["centeredSpinnerContainer"],
-			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, {
-		id,
-		className: require_emotion.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, {
-		id,
-		className: require_emotion.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: require_emotion.cx(styles.flowMessageItem, messageClasses),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: externalError.message })
-				})
-			}),
-			flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: styles.flowMessagesContainer,
-				children: flowMessages.map((message, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
-					variant: message.type === "error" ? "error" : "info",
-					className: require_emotion.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

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

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

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

@@ -1,159 +0,0 @@
-const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
-const require_emotion = require('../../../../styles/emotion.cjs');
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-
-//#region src/components/presentation/auth/SignIn/BaseSignIn.styles.ts
-/**
-* Creates styles for the BaseSignIn component
-* @param theme - The theme object containing design tokens
-* @param colorScheme - The current color scheme (used for memoization)
-* @returns Object containing CSS class names for component styling
-*/
-const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
-	const signIn = require_emotion.css`
-      min-width: 420px;
-      margin: 0 auto;
-      font-family: ${theme.vars.typography.fontFamily};
-    `;
-	const card = require_emotion.css`
-      background: ${theme.vars.colors.background.surface};
-      border-radius: ${theme.vars.borderRadius.large};
-      gap: calc(${theme.vars.spacing.unit} * 2);
-      min-width: 420px;
-    `;
-	const logoContainer = require_emotion.css`
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
-    `;
-	const header = require_emotion.css`
-      gap: 0;
-      align-items: center;
-    `;
-	const title = require_emotion.css`
-      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
-      color: ${theme.vars.colors.text.primary};
-    `;
-	const subtitle = require_emotion.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
-      color: ${theme.vars.colors.text.secondary};
-    `;
-	const messagesContainer = require_emotion.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
-    `;
-	const messageItem = require_emotion.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
-    `;
-	const errorContainer = require_emotion.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
-    `;
-	const contentContainer = require_emotion.css`
-      display: flex;
-      flex-direction: column;
-      gap: calc(${theme.vars.spacing.unit} * 2);
-    `;
-	const loadingContainer = require_emotion.css`
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: calc(${theme.vars.spacing.unit} * 4);
-    `;
-	const centeredSpinnerContainer = require_emotion.css`
-      display: flex;
-      justify-content: center;
-      padding: 2rem;
-    `;
-	const loadingText = require_emotion.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 2);
-      color: ${theme.vars.colors.text.secondary};
-    `;
-	const divider = require_emotion.css`
-      margin: calc(${theme.vars.spacing.unit} * 1) 0;
-    `;
-	const centeredContainer = require_emotion.css`
-      text-align: center;
-      padding: calc(${theme.vars.spacing.unit} * 4);
-    `;
-	const passkeyContainer = require_emotion.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
-    `;
-	const passkeyText = require_emotion.css`
-      margin-top: calc(${theme.vars.spacing.unit} * 1);
-      color: ${theme.vars.colors.text.secondary};
-    `;
-	const form = require_emotion.css`
-      display: flex;
-      flex-direction: column;
-      gap: calc(${theme.vars.spacing.unit} * 2);
-    `;
-	const formDivider = require_emotion.css`
-      margin: calc(${theme.vars.spacing.unit} * 1) 0;
-    `;
-	const authenticatorSection = require_emotion.css`
-      display: flex;
-      flex-direction: column;
-      gap: calc(${theme.vars.spacing.unit} * 1);
-    `;
-	const authenticatorItem = require_emotion.css`
-      width: 100%;
-    `;
-	const noAuthenticatorCard = require_emotion.css`
-      background: ${theme.vars.colors.background.surface};
-      border-radius: ${theme.vars.borderRadius.large};
-      padding: calc(${theme.vars.spacing.unit} * 2);
-    `;
-	const errorAlert = require_emotion.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
-    `;
-	const messagesAlert = require_emotion.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
-    `;
-	const flowMessagesContainer = require_emotion.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
-    `;
-	return {
-		authenticatorItem,
-		authenticatorSection,
-		card,
-		centeredContainer,
-		centeredSpinnerContainer,
-		contentContainer,
-		divider,
-		errorAlert,
-		errorContainer,
-		flowMessageItem: require_emotion.css`
-      margin-bottom: calc(${theme.vars.spacing.unit} * 1);
-    `,
-		flowMessagesContainer,
-		form,
-		formDivider,
-		header,
-		loadingContainer,
-		loadingText,
-		logoContainer,
-		messageItem,
-		messagesAlert,
-		messagesContainer,
-		noAuthenticatorCard,
-		passkeyContainer,
-		passkeyText,
-		signIn,
-		subtitle,
-		title
-	};
-}, [
-	theme.vars.colors.background.surface,
-	theme.vars.colors.text.primary,
-	theme.vars.colors.text.secondary,
-	theme.vars.borderRadius.large,
-	theme.vars.spacing.unit,
-	theme.vars.typography.fontFamily,
-	colorScheme
-]);
-var BaseSignIn_styles_default = useStyles;
-
-//#endregion
-exports.default = BaseSignIn_styles_default;
-//# sourceMappingURL=BaseSignIn.styles.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"BaseSignIn.styles.cjs","names":["signIn: string","card: string","logoContainer: string","header: string","title: string","subtitle: string","messagesContainer: string","messageItem: string","errorContainer: string","contentContainer: string","loadingContainer: string","centeredSpinnerContainer: string","loadingText: string","divider: string","centeredContainer: string","passkeyContainer: string","passkeyText: string","form: string","formDivider: string","authenticatorSection: string","authenticatorItem: string","noAuthenticatorCard: string","errorAlert: string","messagesAlert: string","flowMessagesContainer: string"],"sources":["../../../../../../src/components/presentation/auth/SignIn/BaseSignIn.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../../styles/emotion';\n\n/**\n * Creates styles for the BaseSignIn component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const signIn: string = css`\n      min-width: 420px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      min-width: 420px;\n    `;\n\n    const logoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const header: string = css`\n      gap: 0;\n      align-items: center;\n    `;\n\n    const title: string = css`\n      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const subtitle: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const messagesContainer: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const messageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const errorContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const contentContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const loadingContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const centeredSpinnerContainer: string = css`\n      display: flex;\n      justify-content: center;\n      padding: 2rem;\n    `;\n\n    const loadingText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const divider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const centeredContainer: string = css`\n      text-align: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const passkeyContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const passkeyText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const form: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const formDivider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const authenticatorSection: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const authenticatorItem: string = css`\n      width: 100%;\n    `;\n\n    const noAuthenticatorCard: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const errorAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const messagesAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const flowMessagesContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const flowMessageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    return {\n      authenticatorItem,\n      authenticatorSection,\n      card,\n      centeredContainer,\n      centeredSpinnerContainer,\n      contentContainer,\n      divider,\n      errorAlert,\n      errorContainer,\n      flowMessageItem,\n      flowMessagesContainer,\n      form,\n      formDivider,\n      header,\n      loadingContainer,\n      loadingText,\n      logoContainer,\n      messageItem,\n      messagesAlert,\n      messagesContainer,\n      noAuthenticatorCard,\n      passkeyContainer,\n      passkeyText,\n      signIn,\n      subtitle,\n      title,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.borderRadius.large,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,SAAiB,mBAAG;;;qBAGT,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,OAAe,mBAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;kBACnC,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,gBAAwB,mBAAG;;;;4BAIT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,SAAiB,mBAAG;;;;CAK1B,MAAMC,QAAgB,mBAAG;yBACJ,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAG1C,MAAMC,WAAmB,mBAAG;4BACJ,MAAM,KAAK,QAAQ,KAAK;eACrC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,oBAA4B,mBAAG;yBAChB,MAAM,KAAK,QAAQ,KAAK;;CAG7C,MAAMC,cAAsB,mBAAG;4BACP,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,iBAAyB,mBAAG;4BACV,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,mBAA2B,mBAAG;;;kBAGtB,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,mBAA2B,mBAAG;;;;sBAIlB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,2BAAmC,mBAAG;;;;;CAM5C,MAAMC,cAAsB,mBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,UAAkB,mBAAG;qBACV,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,oBAA4B,mBAAG;;sBAEnB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,mBAA2B,mBAAG;4BACZ,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,cAAsB,mBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,OAAe,mBAAG;;;kBAGV,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,cAAsB,mBAAG;qBACd,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,uBAA+B,mBAAG;;;kBAG1B,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,oBAA4B,mBAAG;;;CAIrC,MAAMC,sBAA8B,mBAAG;oBACvB,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,aAAqB,mBAAG;4BACN,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,gBAAwB,mBAAG;4BACT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,wBAAgC,mBAAG;4BACjB,MAAM,KAAK,QAAQ,KAAK;;AAOhD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,iBAd8B,mBAAG;4BACX,MAAM,KAAK,QAAQ,KAAK;;EAc9C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,gCAAe"}