@thunderid/react 0.10.0 → 0.11.0

package/dist/hooks/useForm.js

@@ -2,6 +2,19 @@ import { useCallback, useState } from "react";
 
 //#region src/hooks/useForm.ts
 /**
+* Pure per-field validator. Kept outside `useForm` so `setValue` can validate against
+* the value it just wrote — inline validation via the closure-based `validateField`
+* inside the hook would read stale `values` (state is committed asynchronously).
+*/
+const computeFieldError = (value, fieldConfig, requiredMessage) => {
+	if (fieldConfig?.required && (!value || value.trim() === "")) return requiredMessage;
+	if (fieldConfig?.validator) {
+		const fieldError = fieldConfig.validator(value);
+		if (fieldError) return fieldError;
+	}
+	return null;
+};
+/**
 * Generic form hook that provides comprehensive form state management and validation.
 *
 * @template T - The type of form values (must extend Record<string, string>)
@@ -45,21 +58,14 @@ import { useCallback, useState } from "react";
 * ```
 */
 const useForm = (config = {}) => {
-	const { initialValues = {}, fields = [], validator, validateOnChange = false, validateOnBlur = true, requiredMessage = "This field is required" } = config;
+	const { initialValues = {}, fields = [], validator, validateOnChange = false, validateOnBlur = true, revalidateOnChangeAfterBlur = false, requiredMessage = "This field is required" } = config;
 	const [values, setFormValues] = useState({ ...initialValues });
 	const [touched, setFormTouched] = useState({});
 	const [errors, setFormErrors] = useState({});
 	const [isSubmitted, setIsSubmitted] = useState(false);
 	const getFieldConfig = useCallback((name) => fields.find((field) => field.name === name), [fields]);
 	const validateField = useCallback((name) => {
-		const value = values[name] || "";
-		const fieldConfig = getFieldConfig(name);
-		if (fieldConfig?.required && (!value || value.trim() === "")) return requiredMessage;
-		if (fieldConfig?.validator) {
-			const fieldError = fieldConfig.validator(value);
-			if (fieldError) return fieldError;
-		}
-		return null;
+		return computeFieldError(values[name] || "", getFieldConfig(name), requiredMessage);
 	}, [
 		values,
 		getFieldConfig,
@@ -93,16 +99,21 @@ const useForm = (config = {}) => {
 			...prev,
 			[name]: value
 		}));
-		if (validateOnChange) {
-			const error = validateField(name);
-			setFormErrors((prev) => {
-				const newErrors = { ...prev };
-				if (error) newErrors[name] = error;
-				else delete newErrors[name];
-				return newErrors;
-			});
-		}
-	}, [validateField, validateOnChange]);
+		if (!(validateOnChange || revalidateOnChangeAfterBlur && touched[name] === true)) return;
+		const error = computeFieldError(value, getFieldConfig(name), requiredMessage);
+		setFormErrors((prev) => {
+			const newErrors = { ...prev };
+			if (error) newErrors[name] = error;
+			else delete newErrors[name];
+			return newErrors;
+		});
+	}, [
+		validateOnChange,
+		revalidateOnChangeAfterBlur,
+		touched,
+		getFieldConfig,
+		requiredMessage
+	]);
 	const setValues = useCallback((newValues) => {
 		setFormValues((prev) => ({
 			...prev,

package/dist/hooks/useForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.js","names":["getFieldConfig: (name: keyof T) => FormField | undefined","validateField: (name: keyof T) => string | null","value: string","fieldConfig: FormField | undefined","fieldError: string | null","validateForm: () => ValidationResult","newErrors: Record<keyof T, string>","error: string | null","globalErrors: Record<string, string>","isValid: boolean","setValue: (name: keyof T, value: string) => void","setValues: (newValues: Partial<T>) => void","setTouched: (name: keyof T, isTouched?: boolean) => void","setTouchedFields: (touchedFields: Partial<Record<keyof T, boolean>>) => void","touchAllFields: () => void","setError: (name: keyof T, error: string) => void","setErrors: (newErrors: Partial<Record<keyof T, string>>) => void","clearErrors: () => void","reset: () => void","handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: FormEvent) => Promise<void>"],"sources":["../../src/hooks/useForm.ts"],"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 {useState, useCallback, FormEvent} from 'react';\n\n/**\n * Generic form field configuration\n */\nexport interface FormField {\n  initialValue?: string;\n  name: string;\n  required?: boolean;\n  validator?: (value: string) => string | null;\n}\n\n/**\n * Form validation result\n */\nexport interface ValidationResult {\n  errors: Record<string, string>;\n  isValid: boolean;\n}\n\n/**\n * Configuration for the useForm hook\n */\nexport interface UseFormConfig<T extends Record<string, string>> {\n  /**\n   * Form field definitions\n   */\n  fields?: FormField[];\n  /**\n   * Initial form values\n   */\n  initialValues?: Partial<T>;\n  /**\n   * Custom required field validation message\n   */\n  requiredMessage?: string;\n  /**\n   * Whether to validate on blur (default: true)\n   */\n  validateOnBlur?: boolean;\n  /**\n   * Whether to validate on change (default: false)\n   */\n  validateOnChange?: boolean;\n  /**\n   * Global form validator function\n   */\n  validator?: (values: T) => Record<string, string>;\n}\n\n/**\n * Return type for the useForm hook\n */\nexport interface UseFormReturn<T extends Record<string, string>> {\n  /**\n   * Clear all errors\n   */\n  clearErrors: () => void;\n  /**\n   * Current validation errors\n   */\n  errors: Record<keyof T, string>;\n  /**\n   * Get field props for easy integration with form components\n   */\n  getFieldProps: (name: keyof T) => {\n    error: string | undefined;\n    name: keyof T;\n    onBlur: () => void;\n    onChange: (value: string) => void;\n    required: boolean;\n    touched: boolean;\n    value: string;\n  };\n  /**\n   * Handle form submission\n   */\n  handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: FormEvent) => Promise<void>;\n  /**\n   * Whether the form has been submitted\n   */\n  isSubmitted: boolean;\n  /**\n   * Whether the form is currently valid\n   */\n  isValid: boolean;\n  /**\n   * Reset the form to initial values\n   */\n  reset: () => void;\n  /**\n   * Set a field error\n   */\n  setError: (name: keyof T, error: string) => void;\n  /**\n   * Set multiple field errors\n   */\n  setErrors: (errors: Partial<Record<keyof T, string>>) => void;\n  /**\n   * Mark a field as touched\n   */\n  setTouched: (name: keyof T, touched?: boolean) => void;\n  /**\n   * Mark multiple fields as touched\n   */\n  setTouchedFields: (touched: Partial<Record<keyof T, boolean>>) => void;\n  /**\n   * Set a single field value\n   */\n  setValue: (name: keyof T, value: string) => void;\n  /**\n   * Set multiple field values\n   */\n  setValues: (values: Partial<T>) => void;\n  /**\n   * Mark all fields as touched\n   */\n  touchAllFields: () => void;\n  /**\n   * Fields that have been touched by the user\n   */\n  touched: Record<keyof T, boolean>;\n  /**\n   * Validate a single field\n   */\n  validateField: (name: keyof T) => string | null;\n  /**\n   * Validate all fields\n   */\n  validateForm: () => ValidationResult;\n  /**\n   * Current form values\n   */\n  values: T;\n}\n\n/**\n * Generic form hook that provides comprehensive form state management and validation.\n *\n * @template T - The type of form values (must extend Record<string, string>)\n * @param config - Configuration options for the form\n * @returns Form state and methods\n *\n * @example\n * ```tsx\n * interface LoginForm {\n *   username: string;\n *   password: string;\n * }\n *\n * const {\n *   values,\n *   touched,\n *   errors,\n *   isValid,\n *   setValue,\n *   handleSubmit,\n *   getFieldProps\n * } = useForm<LoginForm>({\n *   initialValues: { username: '', password: '' },\n *   fields: [\n *     { name: 'username', required: true },\n *     { name: 'password', required: true }\n *   ]\n * });\n *\n * const onSubmit = handleSubmit((values) => {\n *   console.log('Form submitted:', values);\n * });\n *\n * return (\n *   <form onSubmit={onSubmit}>\n *     <input {...getFieldProps('username')} />\n *     <input {...getFieldProps('password')} type=\"password\" />\n *     <button type=\"submit\" disabled={!isValid}>Submit</button>\n *   </form>\n * );\n * ```\n */\nexport const useForm = <T extends Record<string, string>>(config: UseFormConfig<T> = {}): UseFormReturn<T> => {\n  const {\n    initialValues = {} as T,\n    fields = [],\n    validator,\n    validateOnChange = false,\n    validateOnBlur = true,\n    requiredMessage = 'This field is required',\n  } = config;\n\n  // Initialize form state\n  const [values, setFormValues] = useState<T>({...initialValues} as T);\n  const [touched, setFormTouched] = useState<Record<keyof T, boolean>>({} as Record<keyof T, boolean>);\n  const [errors, setFormErrors] = useState<Record<keyof T, string>>({} as Record<keyof T, string>);\n  const [isSubmitted, setIsSubmitted] = useState(false);\n\n  // Get field configuration by name\n  const getFieldConfig: (name: keyof T) => FormField | undefined = useCallback(\n    (name: keyof T): FormField | undefined => fields.find((field: FormField) => field.name === name),\n    [fields],\n  );\n\n  // Validate a single field\n  const validateField: (name: keyof T) => string | null = useCallback(\n    (name: keyof T): string | null => {\n      const value: string = values[name] || '';\n      const fieldConfig: FormField | undefined = getFieldConfig(name);\n\n      // Check required validation\n      if (fieldConfig?.required && (!value || value.trim() === '')) {\n        return requiredMessage;\n      }\n\n      // Run custom field validator\n      if (fieldConfig?.validator) {\n        const fieldError: string | null = fieldConfig.validator(value);\n        if (fieldError) return fieldError;\n      }\n\n      return null;\n    },\n    [values, getFieldConfig, requiredMessage],\n  );\n\n  // Validate the entire form\n  const validateForm: () => ValidationResult = useCallback((): ValidationResult => {\n    const newErrors: Record<keyof T, string> = {} as Record<keyof T, string>;\n\n    // Validate individual fields\n    fields.forEach((field: FormField) => {\n      const error: string | null = validateField(field.name as keyof T);\n      if (error) {\n        newErrors[field.name as keyof T] = error;\n      }\n    });\n\n    // Run global validator if provided\n    if (validator) {\n      const globalErrors: Record<string, string> = validator(values);\n      Object.keys(globalErrors).forEach((key: string) => {\n        if (globalErrors[key]) {\n          newErrors[key as keyof T] = globalErrors[key];\n        }\n      });\n    }\n\n    return {\n      errors: newErrors,\n      isValid: Object.keys(newErrors).length === 0,\n    };\n  }, [fields, validateField, validator, values]);\n\n  // Check if form is currently valid\n  const isValid: boolean = Object.keys(errors).length === 0;\n\n  // Set a single field value\n  const setValue: (name: keyof T, value: string) => void = useCallback(\n    (name: keyof T, value: string): void => {\n      setFormValues((prev: T) => ({\n        ...prev,\n        [name]: value,\n      }));\n\n      // Validate on change if enabled\n      if (validateOnChange) {\n        const error: string | null = validateField(name);\n        setFormErrors((prev: Record<keyof T, string>) => {\n          const newErrors: Record<keyof T, string> = {...prev};\n          if (error) {\n            newErrors[name] = error;\n          } else {\n            delete newErrors[name];\n          }\n          return newErrors;\n        });\n      }\n    },\n    [validateField, validateOnChange],\n  );\n\n  // Set multiple field values\n  const setValues: (newValues: Partial<T>) => void = useCallback((newValues: Partial<T>): void => {\n    setFormValues((prev: T) => ({\n      ...prev,\n      ...newValues,\n    }));\n  }, []);\n\n  // Mark a field as touched\n  const setTouched: (name: keyof T, isTouched?: boolean) => void = useCallback(\n    (name: keyof T, isTouched = true): void => {\n      setFormTouched((prev: Record<keyof T, boolean>) => ({\n        ...prev,\n        [name]: isTouched,\n      }));\n\n      // Validate on blur if enabled and field is touched\n      if (validateOnBlur && isTouched) {\n        const error: string | null = validateField(name);\n        setFormErrors((prev: Record<keyof T, string>) => {\n          const newErrors: Record<keyof T, string> = {...prev};\n          if (error) {\n            newErrors[name] = error;\n          } else {\n            delete newErrors[name];\n          }\n          return newErrors;\n        });\n      }\n    },\n    [validateField, validateOnBlur],\n  );\n\n  // Set multiple touched fields\n  const setTouchedFields: (touchedFields: Partial<Record<keyof T, boolean>>) => void = useCallback(\n    (touchedFields: Partial<Record<keyof T, boolean>>): void => {\n      setFormTouched((prev: Record<keyof T, boolean>) => ({\n        ...prev,\n        ...touchedFields,\n      }));\n    },\n    [],\n  );\n\n  // Mark all fields as touched\n  const touchAllFields: () => void = useCallback((): void => {\n    const allTouched: Record<keyof T, boolean> = fields.reduce(\n      (acc: Record<keyof T, boolean>, field: FormField) => {\n        acc[field.name as keyof T] = true;\n        return acc;\n      },\n      {} as Record<keyof T, boolean>,\n    );\n\n    setFormTouched(allTouched);\n\n    // Validate all fields\n    const validation: ValidationResult = validateForm();\n    setFormErrors(validation.errors as Record<keyof T, string>);\n  }, [fields, validateForm]);\n\n  // Set a field error\n  const setError: (name: keyof T, error: string) => void = useCallback((name: keyof T, error: string): void => {\n    setFormErrors((prev: Record<keyof T, string>) => ({\n      ...prev,\n      [name]: error,\n    }));\n  }, []);\n\n  // Set multiple field errors\n  const setErrors: (newErrors: Partial<Record<keyof T, string>>) => void = useCallback(\n    (newErrors: Partial<Record<keyof T, string>>): void => {\n      setFormErrors((prev: Record<keyof T, string>) => ({\n        ...prev,\n        ...newErrors,\n      }));\n    },\n    [],\n  );\n\n  // Clear all errors\n  const clearErrors: () => void = useCallback((): void => {\n    setFormErrors({} as Record<keyof T, string>);\n  }, []);\n\n  // Reset form to initial state\n  const reset: () => void = useCallback((): void => {\n    setFormValues({...initialValues} as T);\n    setFormTouched({} as Record<keyof T, boolean>);\n    setFormErrors({} as Record<keyof T, string>);\n    setIsSubmitted(false);\n  }, [initialValues]);\n\n  // Handle form submission\n  const handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: FormEvent) => Promise<void> = useCallback(\n    (onSubmit: (values: T) => void | Promise<void>) =>\n      async (e?: FormEvent): Promise<void> => {\n        if (e) {\n          e.preventDefault();\n        }\n\n        setIsSubmitted(true);\n        touchAllFields();\n\n        const validation: ValidationResult = validateForm();\n\n        if (validation.isValid) {\n          await onSubmit(values);\n        }\n      },\n    [values, touchAllFields, validateForm],\n  );\n\n  // Get field props for easy integration\n  const getFieldProps: (name: keyof T) => any = useCallback(\n    (name: keyof T) => {\n      const fieldConfig: FormField | undefined = getFieldConfig(name);\n\n      return {\n        error: touched[name] ? errors[name] : undefined,\n        name,\n        onBlur: (): void => setTouched(name, true),\n        onChange: (value: string): void => setValue(name, value),\n        required: fieldConfig?.required || false,\n        touched: touched[name] || false,\n        value: values[name] || '',\n      };\n    },\n    [values, errors, touched, setValue, setTouched, getFieldConfig],\n  );\n\n  return {\n    clearErrors,\n    errors,\n    getFieldProps,\n    handleSubmit,\n    isSubmitted,\n    isValid,\n    reset,\n    setError,\n    setErrors,\n    setTouched,\n    setTouchedFields,\n    setValue,\n    setValues,\n    touchAllFields,\n    touched,\n    validateField,\n    validateForm,\n    values,\n  };\n};\n\nexport default useForm;\n"],"mappings":"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"}
+{"version":3,"file":"useForm.js","names":["fieldError: string | null","getFieldConfig: (name: keyof T) => FormField | undefined","validateField: (name: keyof T) => string | null","validateForm: () => ValidationResult","newErrors: Record<keyof T, string>","error: string | null","globalErrors: Record<string, string>","isValid: boolean","setValue: (name: keyof T, value: string) => void","setValues: (newValues: Partial<T>) => void","setTouched: (name: keyof T, isTouched?: boolean) => void","setTouchedFields: (touchedFields: Partial<Record<keyof T, boolean>>) => void","touchAllFields: () => void","setError: (name: keyof T, error: string) => void","setErrors: (newErrors: Partial<Record<keyof T, string>>) => void","clearErrors: () => void","reset: () => void","handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: FormEvent) => Promise<void>","fieldConfig: FormField | undefined"],"sources":["../../src/hooks/useForm.ts"],"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 {useState, useCallback, FormEvent} from 'react';\n\n/**\n * Generic form field configuration\n */\nexport interface FormField {\n  initialValue?: string;\n  name: string;\n  required?: boolean;\n  validator?: (value: string) => string | null;\n}\n\n/**\n * Form validation result\n */\nexport interface ValidationResult {\n  errors: Record<string, string>;\n  isValid: boolean;\n}\n\n/**\n * Configuration for the useForm hook\n */\nexport interface UseFormConfig<T extends Record<string, string>> {\n  /**\n   * Form field definitions\n   */\n  fields?: FormField[];\n  /**\n   * Initial form values\n   */\n  initialValues?: Partial<T>;\n  /**\n   * Custom required field validation message\n   */\n  requiredMessage?: string;\n  /**\n   * When a field has been touched (blurred at least once), re-run validation on every\n   * subsequent change so a rendered error clears the moment the value becomes valid.\n   *\n   * Independent of `validateOnChange`: this only affects fields that have already been\n   * blurred, so users don't see errors while initially typing. Default `false` to\n   * preserve prior behavior; enable per-form for a \"correct-as-you-type\" UX.\n   */\n  revalidateOnChangeAfterBlur?: boolean;\n  /**\n   * Whether to validate on blur (default: true)\n   */\n  validateOnBlur?: boolean;\n  /**\n   * Whether to validate on change (default: false). When true, every keystroke\n   * triggers validation — including the first, which surfaces errors before the user\n   * has had a chance to finish typing. Prefer `revalidateOnChangeAfterBlur` for the\n   * common \"clear the error as the user corrects\" UX.\n   */\n  validateOnChange?: boolean;\n  /**\n   * Global form validator function\n   */\n  validator?: (values: T) => Record<string, string>;\n}\n\n/**\n * Pure per-field validator. Kept outside `useForm` so `setValue` can validate against\n * the value it just wrote — inline validation via the closure-based `validateField`\n * inside the hook would read stale `values` (state is committed asynchronously).\n */\nconst computeFieldError = (\n  value: string,\n  fieldConfig: FormField | undefined,\n  requiredMessage: string,\n): string | null => {\n  if (fieldConfig?.required && (!value || value.trim() === '')) {\n    return requiredMessage;\n  }\n  if (fieldConfig?.validator) {\n    const fieldError: string | null = fieldConfig.validator(value);\n    if (fieldError) return fieldError;\n  }\n  return null;\n};\n\n/**\n * Return type for the useForm hook\n */\nexport interface UseFormReturn<T extends Record<string, string>> {\n  /**\n   * Clear all errors\n   */\n  clearErrors: () => void;\n  /**\n   * Current validation errors\n   */\n  errors: Record<keyof T, string>;\n  /**\n   * Get field props for easy integration with form components\n   */\n  getFieldProps: (name: keyof T) => {\n    error: string | undefined;\n    name: keyof T;\n    onBlur: () => void;\n    onChange: (value: string) => void;\n    required: boolean;\n    touched: boolean;\n    value: string;\n  };\n  /**\n   * Handle form submission\n   */\n  handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: FormEvent) => Promise<void>;\n  /**\n   * Whether the form has been submitted\n   */\n  isSubmitted: boolean;\n  /**\n   * Whether the form is currently valid\n   */\n  isValid: boolean;\n  /**\n   * Reset the form to initial values\n   */\n  reset: () => void;\n  /**\n   * Set a field error\n   */\n  setError: (name: keyof T, error: string) => void;\n  /**\n   * Set multiple field errors\n   */\n  setErrors: (errors: Partial<Record<keyof T, string>>) => void;\n  /**\n   * Mark a field as touched\n   */\n  setTouched: (name: keyof T, touched?: boolean) => void;\n  /**\n   * Mark multiple fields as touched\n   */\n  setTouchedFields: (touched: Partial<Record<keyof T, boolean>>) => void;\n  /**\n   * Set a single field value\n   */\n  setValue: (name: keyof T, value: string) => void;\n  /**\n   * Set multiple field values\n   */\n  setValues: (values: Partial<T>) => void;\n  /**\n   * Mark all fields as touched\n   */\n  touchAllFields: () => void;\n  /**\n   * Fields that have been touched by the user\n   */\n  touched: Record<keyof T, boolean>;\n  /**\n   * Validate a single field\n   */\n  validateField: (name: keyof T) => string | null;\n  /**\n   * Validate all fields\n   */\n  validateForm: () => ValidationResult;\n  /**\n   * Current form values\n   */\n  values: T;\n}\n\n/**\n * Generic form hook that provides comprehensive form state management and validation.\n *\n * @template T - The type of form values (must extend Record<string, string>)\n * @param config - Configuration options for the form\n * @returns Form state and methods\n *\n * @example\n * ```tsx\n * interface LoginForm {\n *   username: string;\n *   password: string;\n * }\n *\n * const {\n *   values,\n *   touched,\n *   errors,\n *   isValid,\n *   setValue,\n *   handleSubmit,\n *   getFieldProps\n * } = useForm<LoginForm>({\n *   initialValues: { username: '', password: '' },\n *   fields: [\n *     { name: 'username', required: true },\n *     { name: 'password', required: true }\n *   ]\n * });\n *\n * const onSubmit = handleSubmit((values) => {\n *   console.log('Form submitted:', values);\n * });\n *\n * return (\n *   <form onSubmit={onSubmit}>\n *     <input {...getFieldProps('username')} />\n *     <input {...getFieldProps('password')} type=\"password\" />\n *     <button type=\"submit\" disabled={!isValid}>Submit</button>\n *   </form>\n * );\n * ```\n */\nexport const useForm = <T extends Record<string, string>>(config: UseFormConfig<T> = {}): UseFormReturn<T> => {\n  const {\n    initialValues = {} as T,\n    fields = [],\n    validator,\n    validateOnChange = false,\n    validateOnBlur = true,\n    revalidateOnChangeAfterBlur = false,\n    requiredMessage = 'This field is required',\n  } = config;\n\n  // Initialize form state\n  const [values, setFormValues] = useState<T>({...initialValues} as T);\n  const [touched, setFormTouched] = useState<Record<keyof T, boolean>>({} as Record<keyof T, boolean>);\n  const [errors, setFormErrors] = useState<Record<keyof T, string>>({} as Record<keyof T, string>);\n  const [isSubmitted, setIsSubmitted] = useState(false);\n\n  // Get field configuration by name\n  const getFieldConfig: (name: keyof T) => FormField | undefined = useCallback(\n    (name: keyof T): FormField | undefined => fields.find((field: FormField) => field.name === name),\n    [fields],\n  );\n\n  // Validate a single field against currently-committed state. Used by the blur path\n  // (where `values` is already up-to-date) and by `validateForm`.\n  const validateField: (name: keyof T) => string | null = useCallback(\n    (name: keyof T): string | null => {\n      const value: string = values[name] || '';\n      const fieldConfig: FormField | undefined = getFieldConfig(name);\n      return computeFieldError(value, fieldConfig, requiredMessage);\n    },\n    [values, getFieldConfig, requiredMessage],\n  );\n\n  // Validate the entire form\n  const validateForm: () => ValidationResult = useCallback((): ValidationResult => {\n    const newErrors: Record<keyof T, string> = {} as Record<keyof T, string>;\n\n    // Validate individual fields\n    fields.forEach((field: FormField) => {\n      const error: string | null = validateField(field.name as keyof T);\n      if (error) {\n        newErrors[field.name as keyof T] = error;\n      }\n    });\n\n    // Run global validator if provided\n    if (validator) {\n      const globalErrors: Record<string, string> = validator(values);\n      Object.keys(globalErrors).forEach((key: string) => {\n        if (globalErrors[key]) {\n          newErrors[key as keyof T] = globalErrors[key];\n        }\n      });\n    }\n\n    return {\n      errors: newErrors,\n      isValid: Object.keys(newErrors).length === 0,\n    };\n  }, [fields, validateField, validator, values]);\n\n  // Check if form is currently valid\n  const isValid: boolean = Object.keys(errors).length === 0;\n\n  // Set a single field value.\n  //\n  // Validation policy:\n  //  - `validateOnChange: true`               → validate on every keystroke.\n  //  - `revalidateOnChangeAfterBlur: true`    → validate only if the field has\n  //                                             already been touched (blurred once),\n  //                                             so errors clear as the user corrects\n  //                                             without appearing while first typing.\n  //  - both false                             → no on-change validation.\n  //\n  // Validation runs against the NEXT value (the string being written) rather than\n  // going through `validateField` which reads the stale closed-over `values`. This\n  // prevents the one-keystroke-lag bug where the error clears one character late.\n  const setValue: (name: keyof T, value: string) => void = useCallback(\n    (name: keyof T, value: string): void => {\n      setFormValues((prev: T) => ({\n        ...prev,\n        [name]: value,\n      }));\n\n      const shouldValidate: boolean = validateOnChange || (revalidateOnChangeAfterBlur && touched[name] === true);\n      if (!shouldValidate) {\n        return;\n      }\n\n      const error: string | null = computeFieldError(value, getFieldConfig(name), requiredMessage);\n      setFormErrors((prev: Record<keyof T, string>) => {\n        const newErrors: Record<keyof T, string> = {...prev};\n        if (error) {\n          newErrors[name] = error;\n        } else {\n          delete newErrors[name];\n        }\n        return newErrors;\n      });\n    },\n    [validateOnChange, revalidateOnChangeAfterBlur, touched, getFieldConfig, requiredMessage],\n  );\n\n  // Set multiple field values\n  const setValues: (newValues: Partial<T>) => void = useCallback((newValues: Partial<T>): void => {\n    setFormValues((prev: T) => ({\n      ...prev,\n      ...newValues,\n    }));\n  }, []);\n\n  // Mark a field as touched\n  const setTouched: (name: keyof T, isTouched?: boolean) => void = useCallback(\n    (name: keyof T, isTouched = true): void => {\n      setFormTouched((prev: Record<keyof T, boolean>) => ({\n        ...prev,\n        [name]: isTouched,\n      }));\n\n      // Validate on blur if enabled and field is touched\n      if (validateOnBlur && isTouched) {\n        const error: string | null = validateField(name);\n        setFormErrors((prev: Record<keyof T, string>) => {\n          const newErrors: Record<keyof T, string> = {...prev};\n          if (error) {\n            newErrors[name] = error;\n          } else {\n            delete newErrors[name];\n          }\n          return newErrors;\n        });\n      }\n    },\n    [validateField, validateOnBlur],\n  );\n\n  // Set multiple touched fields\n  const setTouchedFields: (touchedFields: Partial<Record<keyof T, boolean>>) => void = useCallback(\n    (touchedFields: Partial<Record<keyof T, boolean>>): void => {\n      setFormTouched((prev: Record<keyof T, boolean>) => ({\n        ...prev,\n        ...touchedFields,\n      }));\n    },\n    [],\n  );\n\n  // Mark all fields as touched\n  const touchAllFields: () => void = useCallback((): void => {\n    const allTouched: Record<keyof T, boolean> = fields.reduce(\n      (acc: Record<keyof T, boolean>, field: FormField) => {\n        acc[field.name as keyof T] = true;\n        return acc;\n      },\n      {} as Record<keyof T, boolean>,\n    );\n\n    setFormTouched(allTouched);\n\n    // Validate all fields\n    const validation: ValidationResult = validateForm();\n    setFormErrors(validation.errors as Record<keyof T, string>);\n  }, [fields, validateForm]);\n\n  // Set a field error\n  const setError: (name: keyof T, error: string) => void = useCallback((name: keyof T, error: string): void => {\n    setFormErrors((prev: Record<keyof T, string>) => ({\n      ...prev,\n      [name]: error,\n    }));\n  }, []);\n\n  // Set multiple field errors\n  const setErrors: (newErrors: Partial<Record<keyof T, string>>) => void = useCallback(\n    (newErrors: Partial<Record<keyof T, string>>): void => {\n      setFormErrors((prev: Record<keyof T, string>) => ({\n        ...prev,\n        ...newErrors,\n      }));\n    },\n    [],\n  );\n\n  // Clear all errors\n  const clearErrors: () => void = useCallback((): void => {\n    setFormErrors({} as Record<keyof T, string>);\n  }, []);\n\n  // Reset form to initial state\n  const reset: () => void = useCallback((): void => {\n    setFormValues({...initialValues} as T);\n    setFormTouched({} as Record<keyof T, boolean>);\n    setFormErrors({} as Record<keyof T, string>);\n    setIsSubmitted(false);\n  }, [initialValues]);\n\n  // Handle form submission\n  const handleSubmit: (onSubmit: (values: T) => void | Promise<void>) => (e?: FormEvent) => Promise<void> = useCallback(\n    (onSubmit: (values: T) => void | Promise<void>) =>\n      async (e?: FormEvent): Promise<void> => {\n        if (e) {\n          e.preventDefault();\n        }\n\n        setIsSubmitted(true);\n        touchAllFields();\n\n        const validation: ValidationResult = validateForm();\n\n        if (validation.isValid) {\n          await onSubmit(values);\n        }\n      },\n    [values, touchAllFields, validateForm],\n  );\n\n  // Get field props for easy integration\n  const getFieldProps: (name: keyof T) => any = useCallback(\n    (name: keyof T) => {\n      const fieldConfig: FormField | undefined = getFieldConfig(name);\n\n      return {\n        error: touched[name] ? errors[name] : undefined,\n        name,\n        onBlur: (): void => setTouched(name, true),\n        onChange: (value: string): void => setValue(name, value),\n        required: fieldConfig?.required || false,\n        touched: touched[name] || false,\n        value: values[name] || '',\n      };\n    },\n    [values, errors, touched, setValue, setTouched, getFieldConfig],\n  );\n\n  return {\n    clearErrors,\n    errors,\n    getFieldProps,\n    handleSubmit,\n    isSubmitted,\n    isValid,\n    reset,\n    setError,\n    setErrors,\n    setTouched,\n    setTouchedFields,\n    setValue,\n    setValues,\n    touchAllFields,\n    touched,\n    validateField,\n    validateForm,\n    values,\n  };\n};\n\nexport default useForm;\n"],"mappings":"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"}

package/dist/index.js

@@ -37,11 +37,14 @@ import TriangleAlert_default from "./components/primitives/Icons/TriangleAlert.j
 import Typography_default from "./components/primitives/Typography/Typography.js";
 import Alert_default from "./components/primitives/Alert/Alert.js";
 import Card_default from "./components/primitives/Card/Card.js";
-import Divider_default from "./components/primitives/Divider/Divider.js";
 import FormControl_default from "./components/primitives/FormControl/FormControl.js";
 import InputLabel_default from "./components/primitives/InputLabel/InputLabel.js";
 import Toggle_default from "./components/primitives/Toggle/Toggle.js";
 import ConsentCheckboxList_default, { getConsentOptionalKey } from "./components/adapters/ConsentCheckboxList.js";
+import Eye_default from "./components/primitives/Icons/Eye.js";
+import EyeOff_default from "./components/primitives/Icons/EyeOff.js";
+import LogOut_default from "./components/primitives/Icons/LogOut.js";
+import User_default$1 from "./components/primitives/Icons/User.js";
 import Consent_default from "./components/adapters/Consent.js";
 import FacebookButton_default from "./components/adapters/FacebookButton.js";
 import FlowTimer_default from "./components/adapters/FlowTimer.js";
@@ -53,12 +56,11 @@ import SignInWithEthereumButton_default from "./components/adapters/SignInWithEt
 import Checkbox_default from "./components/primitives/Checkbox/Checkbox.js";
 import DatePicker_default from "./components/primitives/DatePicker/DatePicker.js";
 import OtpField_default from "./components/primitives/OtpField/OtpField.js";
-import Eye_default from "./components/primitives/Icons/Eye.js";
-import EyeOff_default from "./components/primitives/Icons/EyeOff.js";
 import TextField_default from "./components/primitives/TextField/TextField.js";
 import PasswordField_default from "./components/primitives/PasswordField/PasswordField.js";
 import Select_default from "./components/primitives/Select/Select.js";
 import { FieldFactory, createField, validateFieldValue } from "./components/factories/FieldFactory.js";
+import Divider_default from "./components/primitives/Divider/Divider.js";
 import BaseSignIn_default from "./components/presentation/auth/SignIn/BaseSignIn.js";
 import { useOAuthCallback } from "./hooks/useOAuthCallback.js";
 import SignIn_default from "./components/presentation/auth/SignIn/SignIn.js";
@@ -76,8 +78,6 @@ import { TokenCallback } from "./components/auth/Callback/TokenCallback.js";
 import { Callback } from "./components/auth/Callback/Callback.js";
 import BaseUser_default from "./components/presentation/User/BaseUser.js";
 import User_default from "./components/presentation/User/User.js";
-import LogOut_default from "./components/primitives/Icons/LogOut.js";
-import User_default$1 from "./components/primitives/Icons/User.js";
 import MultiInput_default from "./components/primitives/MultiInput/MultiInput.js";
 import BaseUserProfile_default from "./components/presentation/UserProfile/BaseUserProfile.js";
 import updateMeProfile_default from "./api/updateMeProfile.js";

package/dist/utils/buildThemeConfigFromFlowMeta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildThemeConfigFromFlowMeta.d.ts","sourceRoot":"","sources":["../../src/utils/buildThemeConfigFromFlowMeta.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,aAAa,EAA4B,gBAAgB,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAE1G;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,4BAA4B,GAChC,eAAe,aAAa,EAC5B,aAAa,OAAO,GAAG,MAAM,KAC5B,gBAAgB,CAAC,WAAW,CAuD9B,CAAC;AAEF,eAAe,4BAA4B,CAAC"}
+{"version":3,"file":"buildThemeConfigFromFlowMeta.d.ts","sourceRoot":"","sources":["../../src/utils/buildThemeConfigFromFlowMeta.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EACL,aAAa,EAEb,gBAAgB,EAChB,WAAW,EAEZ,MAAM,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,4BAA4B,GAChC,eAAe,aAAa,EAC5B,aAAa,OAAO,GAAG,MAAM,KAC5B,gBAAgB,CAAC,WAAW,CA+C9B,CAAC;AAEF,eAAe,4BAA4B,CAAC"}

package/dist/utils/buildThemeConfigFromFlowMeta.js

@@ -1,3 +1,5 @@
+import { normalizeBorderRadius } from "@thunderid/browser";
+
 //#region src/utils/buildThemeConfigFromFlowMeta.ts
 /**
 * Converts a v2 `FlowMetaTheme` into a `RecursivePartial<ThemeConfig>` that
@@ -14,8 +16,7 @@
 */
 const buildThemeConfigFromFlowMeta = (flowMetaTheme, colorScheme) => {
 	const scheme = flowMetaTheme.colorSchemes?.[colorScheme];
-	const borderRadius = flowMetaTheme.shape?.borderRadius;
-	const borderRadiusStr = borderRadius !== void 0 ? `${borderRadius}px` : void 0;
+	const borderRadiusConfig = normalizeBorderRadius(flowMetaTheme.shape?.borderRadius);
 	let colors;
 	if (scheme?.palette) {
 		colors = {};
@@ -30,12 +31,9 @@ const buildThemeConfigFromFlowMeta = (flowMetaTheme, colorScheme) => {
 		}
 	}
 	return {
+		...flowMetaTheme,
 		...flowMetaTheme.direction ? { direction: flowMetaTheme.direction } : {},
-		...borderRadiusStr ? { borderRadius: {
-			large: borderRadiusStr,
-			medium: borderRadiusStr,
-			small: borderRadiusStr
-		} } : {},
+		...borderRadiusConfig ? { borderRadius: borderRadiusConfig } : {},
 		...colors && Object.keys(colors).length > 0 ? { colors } : {},
 		...flowMetaTheme.typography?.fontFamily ? { typography: { fontFamily: flowMetaTheme.typography.fontFamily } } : {}
 	};

package/dist/utils/buildThemeConfigFromFlowMeta.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildThemeConfigFromFlowMeta.js","names":["scheme: FlowMetaThemeColorScheme | undefined","borderRadius: number | undefined","borderRadiusStr: string | undefined","colors: RecursivePartial<ThemeConfig['colors']> | undefined","bg: RecursivePartial<ThemeConfig['colors']['background']>"],"sources":["../../src/utils/buildThemeConfigFromFlowMeta.ts"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {FlowMetaTheme, FlowMetaThemeColorScheme, RecursivePartial, ThemeConfig} from '@thunderid/browser';\n\n/**\n * Converts a v2 `FlowMetaTheme` into a `RecursivePartial<ThemeConfig>` that\n * `createTheme` can consume.\n *\n * Only fields explicitly present in the FlowMeta response are included so that\n * `createTheme` can deep-merge them onto its base (light/dark) defaults without\n * accidentally dropping sibling keys that were not returned by the server.\n *\n * For example, when FlowMeta returns only `background.default` and\n * `background.paper`, only `body.main` and `surface` are set — the base\n * theme's `background.disabled` and `background.dark` are **not** overridden\n * and therefore keep their default CSS variable values.\n */\nconst buildThemeConfigFromFlowMeta = (\n  flowMetaTheme: FlowMetaTheme,\n  colorScheme: 'light' | 'dark',\n): RecursivePartial<ThemeConfig> => {\n  const scheme: FlowMetaThemeColorScheme | undefined = flowMetaTheme.colorSchemes?.[colorScheme];\n  const borderRadius: number | undefined = flowMetaTheme.shape?.borderRadius;\n  const borderRadiusStr: string | undefined = borderRadius !== undefined ? `${borderRadius}px` : undefined;\n\n  // Build only the colors that the server actually provided.\n  // Each nested object is constructed incrementally so that absent fields are\n  // simply omitted rather than set to `undefined`, which would shadow the\n  // base-theme defaults inside `createTheme`.\n  let colors: RecursivePartial<ThemeConfig['colors']> | undefined;\n\n  if (scheme?.palette) {\n    colors = {};\n\n    if (scheme.palette.primary) {\n      colors.primary = scheme.palette.primary;\n    }\n    if (scheme.palette.secondary) {\n      colors.secondary = scheme.palette.secondary;\n    }\n    if (scheme.palette.text) {\n      colors.text = scheme.palette.text;\n    }\n\n    // Build background incrementally to avoid replacing the full base object.\n    if (scheme.palette.background) {\n      const bg: RecursivePartial<ThemeConfig['colors']['background']> = {};\n\n      if (scheme.palette.background.default) {\n        bg.body = {main: scheme.palette.background.default};\n      }\n      if (scheme.palette.background.paper) {\n        bg.surface = scheme.palette.background.paper;\n      }\n\n      if (Object.keys(bg).length > 0) {\n        colors.background = bg;\n      }\n    }\n  }\n\n  return {\n    ...(flowMetaTheme.direction ? {direction: flowMetaTheme.direction} : {}),\n    ...(borderRadiusStr\n      ? {\n          borderRadius: {\n            large: borderRadiusStr,\n            medium: borderRadiusStr,\n            small: borderRadiusStr,\n          },\n        }\n      : {}),\n    ...(colors && Object.keys(colors).length > 0 ? {colors} : {}),\n    ...(flowMetaTheme.typography?.fontFamily ? {typography: {fontFamily: flowMetaTheme.typography.fontFamily}} : {}),\n  };\n};\n\nexport default buildThemeConfigFromFlowMeta;\n"],"mappings":";;;;;;;;;;;;;;AAiCA,MAAM,gCACJ,eACA,gBACkC;CAClC,MAAMA,SAA+C,cAAc,eAAe;CAClF,MAAMC,eAAmC,cAAc,OAAO;CAC9D,MAAMC,kBAAsC,iBAAiB,SAAY,GAAG,aAAa,MAAM;CAM/F,IAAIC;AAEJ,KAAI,QAAQ,SAAS;AACnB,WAAS,EAAE;AAEX,MAAI,OAAO,QAAQ,QACjB,QAAO,UAAU,OAAO,QAAQ;AAElC,MAAI,OAAO,QAAQ,UACjB,QAAO,YAAY,OAAO,QAAQ;AAEpC,MAAI,OAAO,QAAQ,KACjB,QAAO,OAAO,OAAO,QAAQ;AAI/B,MAAI,OAAO,QAAQ,YAAY;GAC7B,MAAMC,KAA4D,EAAE;AAEpE,OAAI,OAAO,QAAQ,WAAW,QAC5B,IAAG,OAAO,EAAC,MAAM,OAAO,QAAQ,WAAW,SAAQ;AAErD,OAAI,OAAO,QAAQ,WAAW,MAC5B,IAAG,UAAU,OAAO,QAAQ,WAAW;AAGzC,OAAI,OAAO,KAAK,GAAG,CAAC,SAAS,EAC3B,QAAO,aAAa;;;AAK1B,QAAO;EACL,GAAI,cAAc,YAAY,EAAC,WAAW,cAAc,WAAU,GAAG,EAAE;EACvE,GAAI,kBACA,EACE,cAAc;GACZ,OAAO;GACP,QAAQ;GACR,OAAO;GACR,EACF,GACD,EAAE;EACN,GAAI,UAAU,OAAO,KAAK,OAAO,CAAC,SAAS,IAAI,EAAC,QAAO,GAAG,EAAE;EAC5D,GAAI,cAAc,YAAY,aAAa,EAAC,YAAY,EAAC,YAAY,cAAc,WAAW,YAAW,EAAC,GAAG,EAAE;EAChH;;AAGH,2CAAe"}
+{"version":3,"file":"buildThemeConfigFromFlowMeta.js","names":["scheme: FlowMetaThemeColorScheme | undefined","colors: RecursivePartial<ThemeConfig['colors']> | undefined","bg: RecursivePartial<ThemeConfig['colors']['background']>"],"sources":["../../src/utils/buildThemeConfigFromFlowMeta.ts"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {\n  FlowMetaTheme,\n  FlowMetaThemeColorScheme,\n  RecursivePartial,\n  ThemeConfig,\n  normalizeBorderRadius,\n} from '@thunderid/browser';\n\n/**\n * Converts a v2 `FlowMetaTheme` into a `RecursivePartial<ThemeConfig>` that\n * `createTheme` can consume.\n *\n * Only fields explicitly present in the FlowMeta response are included so that\n * `createTheme` can deep-merge them onto its base (light/dark) defaults without\n * accidentally dropping sibling keys that were not returned by the server.\n *\n * For example, when FlowMeta returns only `background.default` and\n * `background.paper`, only `body.main` and `surface` are set — the base\n * theme's `background.disabled` and `background.dark` are **not** overridden\n * and therefore keep their default CSS variable values.\n */\nconst buildThemeConfigFromFlowMeta = (\n  flowMetaTheme: FlowMetaTheme,\n  colorScheme: 'light' | 'dark',\n): RecursivePartial<ThemeConfig> => {\n  const scheme: FlowMetaThemeColorScheme | undefined = flowMetaTheme.colorSchemes?.[colorScheme];\n  const borderRadiusConfig = normalizeBorderRadius(flowMetaTheme.shape?.borderRadius);\n\n  // Build only the colors that the server actually provided.\n  // Each nested object is constructed incrementally so that absent fields are\n  // simply omitted rather than set to `undefined`, which would shadow the\n  // base-theme defaults inside `createTheme`.\n  let colors: RecursivePartial<ThemeConfig['colors']> | undefined;\n\n  if (scheme?.palette) {\n    colors = {};\n\n    if (scheme.palette.primary) {\n      colors.primary = scheme.palette.primary;\n    }\n    if (scheme.palette.secondary) {\n      colors.secondary = scheme.palette.secondary;\n    }\n    if (scheme.palette.text) {\n      colors.text = scheme.palette.text;\n    }\n\n    // Build background incrementally to avoid replacing the full base object.\n    if (scheme.palette.background) {\n      const bg: RecursivePartial<ThemeConfig['colors']['background']> = {};\n\n      if (scheme.palette.background.default) {\n        bg.body = {main: scheme.palette.background.default};\n      }\n      if (scheme.palette.background.paper) {\n        bg.surface = scheme.palette.background.paper;\n      }\n\n      if (Object.keys(bg).length > 0) {\n        colors.background = bg;\n      }\n    }\n  }\n\n  return {\n    ...flowMetaTheme,\n    ...(flowMetaTheme.direction ? {direction: flowMetaTheme.direction} : {}),\n    ...(borderRadiusConfig ? {borderRadius: borderRadiusConfig} : {}),\n    ...(colors && Object.keys(colors).length > 0 ? {colors} : {}),\n    ...(flowMetaTheme.typography?.fontFamily ? {typography: {fontFamily: flowMetaTheme.typography.fontFamily}} : {}),\n  };\n};\n\nexport default buildThemeConfigFromFlowMeta;\n"],"mappings":";;;;;;;;;;;;;;;;AAuCA,MAAM,gCACJ,eACA,gBACkC;CAClC,MAAMA,SAA+C,cAAc,eAAe;CAClF,MAAM,qBAAqB,sBAAsB,cAAc,OAAO,aAAa;CAMnF,IAAIC;AAEJ,KAAI,QAAQ,SAAS;AACnB,WAAS,EAAE;AAEX,MAAI,OAAO,QAAQ,QACjB,QAAO,UAAU,OAAO,QAAQ;AAElC,MAAI,OAAO,QAAQ,UACjB,QAAO,YAAY,OAAO,QAAQ;AAEpC,MAAI,OAAO,QAAQ,KACjB,QAAO,OAAO,OAAO,QAAQ;AAI/B,MAAI,OAAO,QAAQ,YAAY;GAC7B,MAAMC,KAA4D,EAAE;AAEpE,OAAI,OAAO,QAAQ,WAAW,QAC5B,IAAG,OAAO,EAAC,MAAM,OAAO,QAAQ,WAAW,SAAQ;AAErD,OAAI,OAAO,QAAQ,WAAW,MAC5B,IAAG,UAAU,OAAO,QAAQ,WAAW;AAGzC,OAAI,OAAO,KAAK,GAAG,CAAC,SAAS,EAC3B,QAAO,aAAa;;;AAK1B,QAAO;EACL,GAAG;EACH,GAAI,cAAc,YAAY,EAAC,WAAW,cAAc,WAAU,GAAG,EAAE;EACvE,GAAI,qBAAqB,EAAC,cAAc,oBAAmB,GAAG,EAAE;EAChE,GAAI,UAAU,OAAO,KAAK,OAAO,CAAC,SAAS,IAAI,EAAC,QAAO,GAAG,EAAE;EAC5D,GAAI,cAAc,YAAY,aAAa,EAAC,YAAY,EAAC,YAAY,cAAc,WAAW,YAAW,EAAC,GAAG,EAAE;EAChH;;AAGH,2CAAe"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thunderid/react",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "React SDK for ThunderID",
   "keywords": [
     "thunderid",
@@ -62,7 +62,7 @@
     "@floating-ui/react": "0.27.12",
     "dompurify": "3.4.11",
     "tslib": "2.8.1",
-    "@thunderid/browser": "^0.10.0"
+    "@thunderid/browser": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"