@thunderid/react 1.10.1 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/account/UserProfile/BaseUserProfile.cjs +1 -1
- package/dist/cjs/components/auth/AcceptInvite/BaseAcceptInvite.cjs +1 -1
- package/dist/cjs/components/auth/DeviceGrant/BaseDeviceGrant.cjs +61 -0
- package/dist/cjs/components/auth/DeviceGrant/BaseDeviceGrant.cjs.map +1 -0
- package/dist/cjs/components/auth/DeviceGrant/BaseDeviceGrant.styles.cjs +26 -0
- package/dist/cjs/components/auth/DeviceGrant/BaseDeviceGrant.styles.cjs.map +1 -0
- package/dist/cjs/components/auth/DeviceGrant/DeviceGrant.cjs +192 -0
- package/dist/cjs/components/auth/DeviceGrant/DeviceGrant.cjs.map +1 -0
- package/dist/cjs/components/auth/InviteUser/BaseInviteUser.cjs +1 -1
- package/dist/cjs/components/auth/Recovery/BaseRecovery.cjs +2 -2
- package/dist/cjs/components/auth/SignIn/BaseSignIn.cjs +15 -4
- package/dist/cjs/components/auth/SignIn/BaseSignIn.cjs.map +1 -1
- package/dist/cjs/components/auth/SignUp/BaseSignUp.cjs +2 -2
- package/dist/cjs/components/auth/flow/AuthOptionFactory.cjs +17 -2
- package/dist/cjs/components/auth/flow/AuthOptionFactory.cjs.map +1 -1
- package/dist/cjs/components/auth/flow/Consent.cjs +1 -1
- package/dist/cjs/components/primitives/Alert/Alert.cjs +1 -1
- package/dist/cjs/components/primitives/Card/Card.cjs +1 -1
- package/dist/cjs/components/primitives/Typography/Typography.styles.cjs +3 -0
- package/dist/cjs/components/primitives/Typography/Typography.styles.cjs.map +1 -1
- package/dist/cjs/index.cjs +6 -2
- package/dist/components/account/UserProfile/BaseUserProfile.js +1 -1
- package/dist/components/auth/AcceptInvite/BaseAcceptInvite.js +1 -1
- package/dist/components/auth/DeviceGrant/BaseDeviceGrant.d.ts +17 -0
- package/dist/components/auth/DeviceGrant/BaseDeviceGrant.d.ts.map +1 -0
- package/dist/components/auth/DeviceGrant/BaseDeviceGrant.js +58 -0
- package/dist/components/auth/DeviceGrant/BaseDeviceGrant.js.map +1 -0
- package/dist/components/auth/DeviceGrant/BaseDeviceGrant.styles.d.ts +4 -0
- package/dist/components/auth/DeviceGrant/BaseDeviceGrant.styles.d.ts.map +1 -0
- package/dist/components/auth/DeviceGrant/BaseDeviceGrant.styles.js +24 -0
- package/dist/components/auth/DeviceGrant/BaseDeviceGrant.styles.js.map +1 -0
- package/dist/components/auth/DeviceGrant/DeviceGrant.d.ts +37 -0
- package/dist/components/auth/DeviceGrant/DeviceGrant.d.ts.map +1 -0
- package/dist/components/auth/DeviceGrant/DeviceGrant.js +188 -0
- package/dist/components/auth/DeviceGrant/DeviceGrant.js.map +1 -0
- package/dist/components/auth/InviteUser/BaseInviteUser.js +1 -1
- package/dist/components/auth/Recovery/BaseRecovery.js +2 -2
- package/dist/components/auth/SignIn/BaseSignIn.d.ts +4 -0
- package/dist/components/auth/SignIn/BaseSignIn.d.ts.map +1 -1
- package/dist/components/auth/SignIn/BaseSignIn.js +16 -5
- package/dist/components/auth/SignIn/BaseSignIn.js.map +1 -1
- package/dist/components/auth/SignUp/BaseSignUp.js +2 -2
- package/dist/components/auth/flow/AuthOptionFactory.d.ts.map +1 -1
- package/dist/components/auth/flow/AuthOptionFactory.js +17 -2
- package/dist/components/auth/flow/AuthOptionFactory.js.map +1 -1
- package/dist/components/auth/flow/Consent.js +1 -1
- package/dist/components/primitives/Alert/Alert.js +1 -1
- package/dist/components/primitives/Card/Card.js +1 -1
- package/dist/components/primitives/Typography/Typography.styles.d.ts.map +1 -1
- package/dist/components/primitives/Typography/Typography.styles.js +3 -0
- package/dist/components/primitives/Typography/Typography.styles.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -3
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseSignIn.js","names":["BaseSignInContent: FC<BaseSignInProps>","useThunderID","useTheme","customRenderers: ComponentRendererMap","ComponentRendererContext","useTranslation","useFlow","styles: any","useStyles","isLoading: boolean","handleError: any","errorMessage: string","extractFormFields: (components: EmbeddedFlowComponent[]) => FormField[]","fields: FormField[]","identifier: string","errors: Record<string, string>","touched: Record<string, boolean>","composedData: Record<string, any> | undefined","composeAffixedInputs","filteredInputs: Record<string, any>","payload: EmbeddedSignInFlowRequest","containerClasses: any","inputClasses: any","buttonClasses: any","messageClasses: any","renderComponents: any","renderProps: BaseSignInRenderProps","result: any","CardPrimitive","Spinner","AlertPrimitive","Typography","BaseSignIn: FC<BaseSignInProps>","content: ReactElement","FlowProvider","ComponentPreferencesContext"],"sources":["../../../../src/components/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 '../flow/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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"}
|
|
1
|
+
{"version":3,"file":"BaseSignIn.js","names":["BaseSignInContent: FC<BaseSignInProps>","useThunderID","useTheme","customRenderers: ComponentRendererMap","ComponentRendererContext","useTranslation","useFlow","styles: any","useStyles","isLoading: boolean","handleError: any","errorMessage: string","extractFormFields: (components: EmbeddedFlowComponent[]) => FormField[]","fields: FormField[]","identifier: string","initialValuesKey: string","errors: Record<string, string>","touched: Record<string, boolean>","composedData: Record<string, any> | undefined","composeAffixedInputs","filteredInputs: Record<string, any>","payload: EmbeddedSignInFlowRequest","containerClasses: any","inputClasses: any","buttonClasses: any","messageClasses: any","renderComponents: any","renderProps: BaseSignInRenderProps","result: any","CardPrimitive","Spinner","AlertPrimitive","Typography","BaseSignIn: FC<BaseSignInProps>","content: ReactElement","FlowProvider","ComponentPreferencesContext"],"sources":["../../../../src/components/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, useRef, 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 '../flow/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 * Values to seed form fields with, such as a value supplied by a verification URI.\n */\n initialValues?: Record<string, string>;\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 initialValues,\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 setValues: setFormValues,\n setTouched: setFormTouched,\n setTouchedFields,\n setErrors: setFormErrors,\n clearErrors: clearFormErrors,\n validateForm,\n touchAllFields,\n reset: resetForm,\n revalidateTouchedFields,\n } = form;\n\n const initialValuesKey: string = useMemo(\n () => JSON.stringify(Object.entries(initialValues ?? {}).sort(([left], [right]) => left.localeCompare(right))),\n [initialValues],\n );\n const appliedInitialValuesKeyRef = useRef<string | null>(null);\n\n useEffect(() => {\n if (\n !initialValues ||\n Object.keys(initialValues).length === 0 ||\n appliedInitialValuesKeyRef.current === initialValuesKey\n ) {\n return;\n }\n\n appliedInitialValuesKeyRef.current = initialValuesKey;\n setFormValues(initialValues);\n }, [initialValues, initialValuesKey, setFormValues]);\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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"}
|
|
@@ -9,10 +9,10 @@ import useTranslation_default from "../../../hooks/useTranslation.js";
|
|
|
9
9
|
import { extractErrorMessage, normalizeFlowResponse } from "../../../utils/flowTransformer.js";
|
|
10
10
|
import { useForm } from "../../../hooks/useForm.js";
|
|
11
11
|
import Spinner_default from "../../primitives/Spinner/Spinner.js";
|
|
12
|
-
import composeAffixedInputs_default from "../../../utils/composeAffixedInputs.js";
|
|
13
12
|
import Typography_default from "../../primitives/Typography/Typography.js";
|
|
14
|
-
import Alert_default from "../../primitives/Alert/Alert.js";
|
|
15
13
|
import Card_default from "../../primitives/Card/Card.js";
|
|
14
|
+
import composeAffixedInputs_default from "../../../utils/composeAffixedInputs.js";
|
|
15
|
+
import Alert_default from "../../primitives/Alert/Alert.js";
|
|
16
16
|
import { renderSignUpComponents } from "../flow/AuthOptionFactory.js";
|
|
17
17
|
import { handlePasskeyRegistration } from "../../../utils/passkey.js";
|
|
18
18
|
import BaseSignUp_styles_default from "./BaseSignUp.styles.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthOptionFactory.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/AuthOptionFactory.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,oBAAoB,EACpB,qBAAqB,EAarB,4BAA4B,EAI5B,cAAc,EACd,cAAc,EACd,UAAU,EAEX,MAAM,oBAAoB,CAAC;AAE5B,OAAO,
|
|
1
|
+
{"version":3,"file":"AuthOptionFactory.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/AuthOptionFactory.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css, cx } from "../../../styles/emotion.js";
|
|
2
2
|
import Button_default from "../../primitives/Button/Button.js";
|
|
3
|
-
import { affixPostfixKey, affixPrefixKey } from "../../../utils/composeAffixedInputs.js";
|
|
4
3
|
import Typography_default from "../../primitives/Typography/Typography.js";
|
|
4
|
+
import { affixPostfixKey, affixPrefixKey } from "../../../utils/composeAffixedInputs.js";
|
|
5
5
|
import { getConsentOptionalKey } from "./ConsentCheckboxList.js";
|
|
6
6
|
import isConsentApprovalBlocked_default from "../../../utils/isConsentApprovalBlocked.js";
|
|
7
7
|
import Consent_default from "./Consent.js";
|
|
@@ -114,6 +114,18 @@ const getTypographyVariant = (variant) => {
|
|
|
114
114
|
SUBTITLE_2: "subtitle2"
|
|
115
115
|
}[variant] || "h3";
|
|
116
116
|
};
|
|
117
|
+
/** Maps flow text color values to SDK typography color variants. */
|
|
118
|
+
const getTypographyColor = (color) => {
|
|
119
|
+
switch (color?.toUpperCase()) {
|
|
120
|
+
case "ERROR": return "error";
|
|
121
|
+
case "WARNING": return "warning";
|
|
122
|
+
case "SUCCESS": return "success";
|
|
123
|
+
case "INFO": return "info";
|
|
124
|
+
case "PRIMARY": return "primary";
|
|
125
|
+
case "SECONDARY": return "secondary";
|
|
126
|
+
default: return;
|
|
127
|
+
}
|
|
128
|
+
};
|
|
117
129
|
/**
|
|
118
130
|
* Check if a button text or action matches a social provider.
|
|
119
131
|
*/
|
|
@@ -267,7 +279,8 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
|
|
|
267
279
|
[EmbeddedFlowEventType.Back]: "button"
|
|
268
280
|
}[eventType.toUpperCase()] ?? "submit";
|
|
269
281
|
const hasInvalidConsentApproval = !shouldSkipValidation && componentVariant.toLowerCase() === "primary" && isConsentApprovalBlocked_default((options.additionalData?.["consentPrompt"])?.purposes ?? [], formValues);
|
|
270
|
-
const handleClick = () => {
|
|
282
|
+
const handleClick = (event) => {
|
|
283
|
+
event.preventDefault();
|
|
271
284
|
if (options.onSubmit) {
|
|
272
285
|
const formData = {};
|
|
273
286
|
Object.keys(formValues).forEach((field) => {
|
|
@@ -362,6 +375,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
|
|
|
362
375
|
}
|
|
363
376
|
case EmbeddedFlowComponentType.Text: {
|
|
364
377
|
const variant = getTypographyVariant(component.variant);
|
|
378
|
+
const color = getTypographyColor(component.color);
|
|
365
379
|
const textAlignClass = css({
|
|
366
380
|
marginBottom: 2,
|
|
367
381
|
textAlign: typeof component?.align === "string" ? component.align : "left"
|
|
@@ -370,6 +384,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
|
|
|
370
384
|
id: component.id,
|
|
371
385
|
className: cx(component.classes, textAlignClass),
|
|
372
386
|
variant,
|
|
387
|
+
color,
|
|
373
388
|
children: resolve(component.label)
|
|
374
389
|
}, key);
|
|
375
390
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthOptionFactory.js","names":["logger: ReturnType<typeof createPackageComponentLogger>","richTextClassCache: string | undefined","authOptionIconClassCache: string | undefined","providerId: any","providerMatches: any","theme: any","customRenderers: ComponentRendererMap","key: string | number","customRenderer: ComponentRenderer | undefined","rendered: ReactElement | null","identifier: string","isTouched: boolean","value: string","error: string","fieldType: string","hasPrefixes: boolean","hasPostfix: boolean","prefixStateKey: string","postfixStateKey: string","defaultPrefixValue: string","selectedPrefix: string","AffixedField","reportedLength: number","otpLength: number | undefined","numericOnly: boolean","actionId: string","eventType: string","buttonText: string","componentVariant: string","shouldSkipValidation: boolean","buttonType: HTMLButtonElement['type']","hasInvalidConsentApproval: boolean","isConsentApprovalBlocked","formData: Record<string, any>","consentPrompt: ConsentPromptData | undefined","isDeny: boolean","decisions: ConsentDecisions","socialButtonClassName: string","GoogleButton","GitHubButton","FacebookButton","MicrosoftButton","LinkedInButton","SignInWithEthereumButton","SmsOtpButton","startIconEl: ReactElement | null","endIconEl: ReactElement | null","Button","variant: any","textAlignClass: string","Typography","Divider","selectOptions: any","Select","DatePicker","BaseUserSelect","BaseAuthFlowSelect","BaseUserTypeSelect","formClass: string","blockComponents: any","richTextAction: EmbeddedFlowComponentAction | undefined","syntheticAction: EmbeddedFlowComponent","formData: Record<string, string>","handleRichTextClick: React.MouseEventHandler<HTMLDivElement> | undefined","anchor: HTMLAnchorElement | null","handleRichTextKeyDown: React.KeyboardEventHandler<HTMLDivElement> | undefined","explicitHeight: string","explicitWidth: string","ImageComponent","iconName: string","IconComponent: any","flowIconRegistry","direction: string","gap: number","align: string","justify: string","rawItems: string | number | undefined","parsedItems: number","items: number | null","isColumn: boolean","gridJustify: string","track: string","stackClass: string","stackChildren: (ReactElement | null)[]","consentPromptRawData: ConsentPromptData | string | undefined","Consent","textTemplate: string","timeoutMs: number","FlowTimer","sourceKey: string | undefined","CopyableText","pairs: KeyValuePair[]","KeyValueList"],"sources":["../../../../src/components/auth/flow/AuthOptionFactory.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {CSSInterpolation} from '@emotion/css/create-instance';\nimport {\n ConsentConstants,\n FieldType,\n FlowMetadataResponse,\n EmbeddedFlowComponent,\n EmbeddedFlowComponentAction,\n EmbeddedFlowComponentType,\n EmbeddedFlowTextVariant,\n EmbeddedFlowEventType,\n createPackageComponentLogger,\n resolveFlowTemplateLiterals,\n resolveEmojiUrisInHtml,\n ConsentPurposeData,\n ConsentPromptData,\n ConsentDecisions,\n ConsentPurposeDecision,\n ConsentAttributeElement,\n OrganizationUnitListResponse,\n PrefixOption,\n KeyValuePair,\n parseKeyValuePairs,\n FetchAuthFlows,\n FetchUserTypes,\n FetchUsers,\n getConsentElementDecision,\n} from '@thunderid/browser';\nimport DOMPurify from 'dompurify';\nimport {ChangeEvent, cloneElement, CSSProperties, FormEvent, ReactElement} from 'react';\nimport Consent from './Consent';\nimport {getConsentOptionalKey} from './ConsentCheckboxList';\nimport {createField} from './FieldFactory';\nimport FlowTimer from './FlowTimer';\nimport ImageComponent from './ImageComponent';\nimport {\n ComponentRenderer,\n ComponentRenderContext,\n ComponentRendererMap,\n} from '../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport {UseTranslation} from '../../../hooks/useTranslation';\nimport {css, cx} from '../../../styles/emotion';\nimport {affixPostfixKey, affixPrefixKey} from '../../../utils/composeAffixedInputs';\nimport isConsentApprovalBlocked from '../../../utils/isConsentApprovalBlocked';\nimport AffixedField from '../../primitives/AffixedField/AffixedField';\nimport BaseAuthFlowSelect from '../../primitives/AuthFlowSelect/BaseAuthFlowSelect';\nimport Button from '../../primitives/Button/Button';\nimport CopyableText from '../../primitives/CopyableText/CopyableText';\nimport DatePicker from '../../primitives/DatePicker/DatePicker';\nimport Divider from '../../primitives/Divider/Divider';\nimport flowIconRegistry from '../../primitives/Icons/flowIconRegistry';\nimport KeyValueList from '../../primitives/KeyValueList/KeyValueList';\nimport Select from '../../primitives/Select/Select';\nimport Typography from '../../primitives/Typography/Typography';\nimport {TypographyVariant} from '../../primitives/Typography/Typography.styles';\nimport BaseUserSelect, {BaseUserSelectProps} from '../../primitives/UserSelect/BaseUserSelect';\nimport BaseUserTypeSelect from '../../primitives/UserTypeSelect/BaseUserTypeSelect';\nimport FacebookButton from '../buttons/FacebookButton';\nimport GitHubButton from '../buttons/GitHubButton';\nimport GoogleButton from '../buttons/GoogleButton';\nimport LinkedInButton from '../buttons/LinkedInButton';\nimport MicrosoftButton from '../buttons/MicrosoftButton';\nimport SignInWithEthereumButton from '../buttons/SignInWithEthereumButton';\nimport SmsOtpButton from '../buttons/SmsOtpButton';\n\nconst logger: ReturnType<typeof createPackageComponentLogger> = createPackageComponentLogger(\n '@thunderid/react',\n 'AuthOptionFactory',\n);\n\n/**\n * Replaces `emoji:` URIs embedded in HTML before DOMPurify sanitization.\n *\n * DOMPurify strips unknown URI schemes from attributes (e.g. `src=\"emoji:🦊\"` → `src=\"\"`).\n * This function converts:\n * - `<img src=\"emoji:X\" alt=\"Y\">` → `<span role=\"img\" aria-label=\"Y\">X</span>`\n * - Any remaining `emoji:X` text occurrences → `X`\n */\n\n// This module's functions (renderSignInComponents, etc.) are called imperatively from a\n// component's render, not React components/hooks themselves — so these classes can't be computed\n// at module scope: that runs at import time, before <ThunderIDProvider> has had a chance to\n// configure Emotion's CSP nonce, which would insert them into an un-nonced <style> tag. Instead\n// they're computed lazily, on first actual use (still just once — Emotion's own cache dedupes any\n// further calls to a no-op after that).\nlet richTextClassCache: string | undefined;\n\n/** Ensures rich-text content (including all inner elements from the server) always word-wraps. */\nfunction getRichTextClass(): string {\n richTextClassCache ??= css`\n overflow-wrap: anywhere;\n & * {\n overflow-wrap: anywhere;\n word-break: break-word;\n }\n & .rich-text-align-left {\n text-align: left;\n }\n & .rich-text-align-center {\n text-align: center;\n }\n & .rich-text-align-right {\n text-align: right;\n }\n & .rich-text-align-justify {\n text-align: justify;\n }\n & a,\n & .rich-text-link {\n text-decoration: underline;\n }\n & span[role='img'] {\n display: inline-block;\n }\n `;\n return richTextClassCache;\n}\n\nlet authOptionIconClassCache: string | undefined;\n\nfunction getAuthOptionIconClass(): string {\n authOptionIconClassCache ??= css({height: '1.25em', objectFit: 'contain', width: '1.25em'});\n return authOptionIconClassCache;\n}\n\nexport type AuthType = 'signin' | 'signup' | 'recovery';\n\n/**\n * Get the appropriate FieldType for an input component.\n */\n/** Upper bound on STACK grid slots, so a mistyped `items` cannot render thousands of cells. */\nconst MAX_STACK_ITEMS = 12;\n\nconst getFieldType = (variant: EmbeddedFlowComponentType): FieldType => {\n switch (variant) {\n case EmbeddedFlowComponentType.EmailInput:\n return FieldType.Email;\n case EmbeddedFlowComponentType.PhoneInput:\n return FieldType.Tel;\n case EmbeddedFlowComponentType.PasswordInput:\n return FieldType.Password;\n case EmbeddedFlowComponentType.TextInput:\n default:\n return FieldType.Text;\n }\n};\n\n/**\n * Get typography variant from component variant.\n */\nconst getTypographyVariant = (variant: string): any => {\n const variantMap: Record<EmbeddedFlowTextVariant, TypographyVariant> = {\n BODY_1: 'body1',\n BODY_2: 'body2',\n BUTTON_TEXT: 'button',\n CAPTION: 'caption',\n HEADING_1: 'h1',\n HEADING_2: 'h2',\n HEADING_3: 'h3',\n HEADING_4: 'h4',\n HEADING_5: 'h5',\n HEADING_6: 'h6',\n OVERLINE: 'overline',\n SUBTITLE_1: 'subtitle1',\n SUBTITLE_2: 'subtitle2',\n };\n\n return variantMap[variant] || 'h3';\n};\n\n/**\n * Check if a button text or action matches a social provider.\n */\nconst matchesSocialProvider = (\n actionId: string,\n eventType: string,\n buttonText: string,\n provider: string,\n authType: AuthType,\n /* eslint-disable-next-line @typescript-eslint/no-unused-vars */\n _componentVariant?: string,\n): boolean => {\n const providerId: any = `${provider}_auth`;\n const providerMatches: any = actionId === providerId || eventType === providerId;\n\n // Social buttons usually have \"Sign in with X\" or \"Continue with X\" text,\n // so also check button text for the provider name to increase chances of correct detection (especially for signup flows where action IDs are less standardized)\n if (buttonText.toLowerCase().includes(provider)) {\n return true;\n }\n\n // For signup, also check button text\n if (authType === 'signup') {\n return providerMatches || buttonText.toLowerCase().includes(provider);\n }\n\n return providerMatches;\n};\n\n/**\n * Create an auth component from flow component configuration.\n */\nconst createAuthComponentFromFlow = (\n component: EmbeddedFlowComponent,\n formValues: Record<string, string>,\n touchedFields: Record<string, boolean>,\n formErrors: Record<string, string>,\n isLoading: boolean,\n isFormValid: boolean,\n resetForm: () => void,\n onInputChange: (name: string, value: string) => void,\n authType: AuthType,\n options: {\n /** @internal Passed from the host React component so hooks aren't called inside a loop. */\n _customRenderers?: ComponentRendererMap;\n /** @internal Passed from the host React component so hooks aren't called inside a loop. */\n _theme?: any;\n /** Additional data from the flow response, used for different dynamic data */\n additionalData?: Record<string, any>;\n buttonClassName?: string;\n /** Current consent purpose being rendered. Set by CONSENT_PURPOSE block iteration. */\n currentConsentPurpose?: ConsentPurposeData;\n inStack?: boolean;\n inputClassName?: string;\n /** Flag to determine if the step timeline has expired */\n isTimeoutDisabled?: boolean;\n key?: string | number;\n /** Data source for AUTH_FLOW_SELECT fields. */\n fetchAuthFlows?: FetchAuthFlows;\n /** Data source for USER_SELECT fields. */\n fetchUsers?: FetchUsers;\n /** Data source for USER_TYPE_SELECT fields. */\n fetchUserTypes?: FetchUserTypes;\n /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n meta?: FlowMetadataResponse | null;\n onInputBlur?: (name: string) => void;\n /** Called with the error of a failed picker load. The form itself shows no error for it. */\n onPickerError?: (error: Error) => void;\n onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n size?: 'small' | 'medium' | 'large';\n /** Translation function for resolving {{t(...)}} expressions at render time */\n t?: UseTranslation['t'];\n variant?: any;\n /** Vendor namespace used to derive affix sentinel keys for prefix/postfix-bearing inputs. */\n vendor?: string;\n } = {},\n): ReactElement | null => {\n const theme: any = options._theme;\n const customRenderers: ComponentRendererMap = options._customRenderers ?? {};\n\n const key: string | number = options.key || component.id;\n\n const customRenderer: ComponentRenderer | undefined =\n customRenderers[component.id] ?? customRenderers[component.type];\n if (customRenderer) {\n const renderCtx: ComponentRenderContext = {\n additionalData: options.additionalData,\n authType,\n formErrors,\n formValues,\n isFormValid,\n isLoading,\n meta: options.meta,\n resetForm,\n onInputBlur: options.onInputBlur,\n onInputChange,\n onSubmit: options.onSubmit,\n touchedFields,\n };\n // Key the element here so a renderer does not have to, as the built-in cases below do.\n const rendered: ReactElement | null = customRenderer(component, renderCtx);\n\n return rendered ? cloneElement(rendered, {key}) : null;\n }\n\n /** Resolve any remaining {{t()}} or {{meta()}} template expressions in a string at render time. */\n const resolve = (text: string | undefined): string => {\n if (!text || (!options.t && !options.meta)) {\n return text || '';\n }\n return resolveFlowTemplateLiterals(text, {meta: options.meta, t: options.t || ((k: string): string => k)});\n };\n\n // The props a flow gives each of the resource pickers (USER_SELECT, AUTH_FLOW_SELECT, USER_TYPE_SELECT).\n const resourceSelectProps = (): Omit<BaseUserSelectProps, 'fetchUsers' | 'mapping'> => {\n const identifier: string = component.ref!;\n const isTouched: boolean = touchedFields[identifier] || false;\n\n return {\n className: cx(options.inputClassName, component.classes),\n component,\n error: isTouched ? formErrors[identifier] : undefined,\n id: component.id,\n label: resolve(component.label) || '',\n name: identifier,\n onBlur: (): void => options.onInputBlur?.(identifier),\n onChange: (event: ChangeEvent<HTMLSelectElement>): void => onInputChange(identifier, event.target.value),\n onError: options.onPickerError,\n placeholder: resolve(component.placeholder),\n required: component.required,\n value: formValues[identifier] || '',\n };\n };\n\n // A component type this render cannot draw is logged and left out.\n const skipUnsupported = (typeName: string): null => {\n logger.warn(`${typeName} component type is not supported. Skipping render.`);\n\n return null;\n };\n\n switch (component.type) {\n case EmbeddedFlowComponentType.TextInput:\n case EmbeddedFlowComponentType.PasswordInput:\n case EmbeddedFlowComponentType.EmailInput:\n case EmbeddedFlowComponentType.PhoneInput: {\n const identifier: string = component.ref!;\n const value: string = formValues[identifier] || '';\n const isTouched: boolean = touchedFields[identifier] || false;\n const error: string = isTouched ? formErrors[identifier] : undefined!;\n const fieldType: string = getFieldType(component.type);\n\n // Prefix/postfix are accepted on any text-family input. When either is present,\n // route to AffixedField so the leading affix renders and submit-time composition\n // is picked up by composeAffixedInputs via the sentinel keys.\n // Both string.length and Array.length are defined, so a single truthy+length\n // check covers `prefixes?: string | PrefixOption[]`.\n const hasPrefixes: boolean = !!component.prefixes && component.prefixes.length > 0;\n const hasPostfix: boolean = typeof component.postfix === 'string' && component.postfix.length > 0;\n\n if (hasPrefixes || hasPostfix) {\n const prefixStateKey: string = affixPrefixKey(identifier, options.vendor);\n const postfixStateKey: string = affixPostfixKey(identifier, options.vendor);\n const defaultPrefixValue: string = hasPrefixes\n ? typeof component.prefixes === 'string'\n ? component.prefixes\n : (component.prefixes as PrefixOption[])[0].value\n : '';\n const selectedPrefix: string = formValues[prefixStateKey] ?? defaultPrefixValue;\n\n return (\n <AffixedField\n key={key}\n className={cx(options.inputClassName, component.classes)}\n id={component.id}\n label={resolve(component.label) || ''}\n name={identifier}\n placeholder={resolve(component.placeholder) || ''}\n required={component.required || false}\n error={error}\n value={value}\n type={fieldType}\n prefixes={component.prefixes}\n prefixValue={selectedPrefix}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onInputChange(identifier, e.target.value)}\n onBlur={(): void => options.onInputBlur?.(identifier)}\n onPrefixChange={(newPrefix: string): void => onInputChange(prefixStateKey, newPrefix)}\n onFocus={(): void => {\n if (hasPrefixes && formValues[prefixStateKey] === undefined) {\n onInputChange(prefixStateKey, defaultPrefixValue);\n }\n if (hasPostfix && formValues[postfixStateKey] === undefined) {\n onInputChange(postfixStateKey, component.postfix!);\n }\n }}\n />\n );\n }\n\n const field: any = createField({\n className: cx(options.inputClassName, component.classes),\n error,\n id: component.id,\n label: resolve(component.label) || '',\n name: identifier,\n onBlur: () => options.onInputBlur?.(identifier),\n onChange: (newValue: string) => onInputChange(identifier, newValue),\n placeholder: resolve(component.placeholder) || '',\n required: component.required || false,\n type: fieldType as FieldType,\n value,\n });\n\n return cloneElement(field, {key});\n }\n\n case EmbeddedFlowComponentType.OtpInput: {\n const identifier: string = component.ref!;\n const value: string = formValues[identifier] || '';\n const isTouched: boolean = touchedFields[identifier] || false;\n const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n // The server reports the length and character set of the code it generated, so the field\n // matches the OTP the user received. An older server omits both and the defaults apply.\n const reportedLength: number = Number(options.additionalData?.['otpLength']);\n const otpLength: number | undefined =\n Number.isInteger(reportedLength) && reportedLength > 0 ? reportedLength : undefined;\n const numericOnly: boolean = options.additionalData?.['otpNumericOnly'] !== 'false';\n\n const field: any = createField({\n className: cx(options.inputClassName, component.classes),\n error,\n id: component.id,\n label: resolve(component.label) || '',\n length: otpLength,\n name: identifier,\n numericOnly,\n onBlur: () => options.onInputBlur?.(identifier),\n onChange: (newValue: string) => onInputChange(identifier, newValue),\n placeholder: resolve(component.placeholder) || '',\n required: component.required || false,\n type: FieldType.Otp,\n value,\n });\n\n return cloneElement(field, {key});\n }\n\n case EmbeddedFlowComponentType.Action: {\n const actionId: string = component.id;\n const eventType: string = component.eventType || '';\n const buttonText: string = resolve(component.label);\n const componentVariant: string = component.variant || '';\n\n // Only validate on submit type events.\n const shouldSkipValidation: boolean = eventType.toUpperCase() !== EmbeddedFlowEventType.Submit;\n\n // Determine the button type based on the event type. Default to 'submit' if not recognized.\n const buttonTypeEnum = {\n [EmbeddedFlowEventType.Submit]: 'submit',\n [EmbeddedFlowEventType.Reset]: 'reset',\n [EmbeddedFlowEventType.Cancel]: 'button',\n [EmbeddedFlowEventType.Trigger]: 'button',\n [EmbeddedFlowEventType.Back]: 'button',\n };\n const buttonType: HTMLButtonElement['type'] = buttonTypeEnum[eventType.toUpperCase()] ?? 'submit';\n\n // Approval waits while an approved authorization detail shows a modified value that cannot be submitted.\n const hasInvalidConsentApproval: boolean =\n !shouldSkipValidation &&\n componentVariant.toLowerCase() === 'primary' &&\n isConsentApprovalBlocked(\n (options.additionalData?.['consentPrompt'] as ConsentPromptData | undefined)?.purposes ?? [],\n formValues,\n );\n\n const handleClick = (): any => {\n if (options.onSubmit) {\n const formData: Record<string, any> = {};\n Object.keys(formValues).forEach((field: any) => {\n // Include all values, even empty strings, to ensure proper submission\n formData[field] = formValues[field];\n });\n\n // For consent actions, build the consent_decisions JSON from the form values.\n // The allow action captures per-attribute choices; the deny action sends\n // all purposes as rejected so the backend ConsentExecutor can fail the flow.\n const consentPrompt: ConsentPromptData | undefined = options.additionalData?.['consentPrompt'] as\n | ConsentPromptData\n | undefined;\n if (consentPrompt && eventType.toUpperCase() === EmbeddedFlowEventType.Submit) {\n const isDeny: boolean = componentVariant.toLowerCase() !== 'primary';\n const decisions: ConsentDecisions = {\n approved: !isDeny,\n ...(isDeny ? {reason: ConsentConstants.REASON_USER_DENIED} : {}),\n purposes: consentPrompt.purposes.map(\n (p: ConsentPurposeData): ConsentPurposeDecision => ({\n approved: !isDeny,\n elements: [\n // Permission purposes carry no essential elements, so the server sends null here\n ...(p.essential ?? []).map((e): ConsentAttributeElement => ({approved: !isDeny, name: e.name})),\n ...(p.optional ?? []).map(\n (e): ConsentAttributeElement =>\n getConsentElementDecision(\n p.purposeId,\n e,\n !isDeny && formValues[getConsentOptionalKey(p.purposeId, e.name)] === 'true',\n formValues,\n ),\n ),\n ],\n purposeName: p.purposeName!,\n }),\n ),\n };\n formData['consent_decisions'] = JSON.stringify(decisions);\n }\n\n // For submit events, pass the form data to the onSubmit callback. For other event types, reset the form and call onSubmit with an empty data object.\n if (eventType.toUpperCase() === EmbeddedFlowEventType.Submit) {\n options.onSubmit(component, formData, shouldSkipValidation);\n } else {\n resetForm();\n options.onSubmit(component, {}, shouldSkipValidation);\n }\n }\n };\n\n // Render branded social login buttons for known action IDs\n\n const socialButtonClassName: string = cx(options.buttonClassName, component.classes);\n\n if (matchesSocialProvider(actionId, eventType, buttonText, 'google', authType, componentVariant)) {\n return <GoogleButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n if (matchesSocialProvider(actionId, eventType, buttonText, 'github', authType, componentVariant)) {\n return <GitHubButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n if (matchesSocialProvider(actionId, eventType, buttonText, 'facebook', authType, componentVariant)) {\n return <FacebookButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n if (matchesSocialProvider(actionId, eventType, buttonText, 'microsoft', authType, componentVariant)) {\n return <MicrosoftButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n if (matchesSocialProvider(actionId, eventType, buttonText, 'linkedin', authType, componentVariant)) {\n return <LinkedInButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n if (matchesSocialProvider(actionId, eventType, buttonText, 'ethereum', authType, componentVariant)) {\n return (\n <SignInWithEthereumButton\n key={key}\n id={component.id}\n onClick={handleClick}\n className={socialButtonClassName}\n />\n );\n }\n if (actionId === 'prompt_mobile' || eventType === 'prompt_mobile') {\n return <SmsOtpButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n\n const startIconEl: ReactElement | null = component.startIcon ? (\n <img src={component.startIcon} alt=\"\" aria-hidden=\"true\" className={getAuthOptionIconClass()} />\n ) : null;\n\n const endIconEl: ReactElement | null = component.endIcon ? (\n <img src={component.endIcon} alt=\"\" aria-hidden=\"true\" className={getAuthOptionIconClass()} />\n ) : null;\n\n return (\n <Button\n fullWidth\n key={key}\n id={component.id}\n onClick={handleClick}\n disabled={\n isLoading ||\n (!isFormValid && !shouldSkipValidation) ||\n hasInvalidConsentApproval ||\n options.isTimeoutDisabled ||\n (component as any).config?.disabled\n }\n className={cx(options.buttonClassName, component.classes)}\n data-testid=\"thunderid-signin-submit\"\n variant={component.variant?.toLowerCase() === 'primary' ? 'solid' : 'outline'}\n color={component.variant?.toLowerCase() === 'primary' ? 'primary' : 'secondary'}\n startIcon={startIconEl}\n endIcon={endIconEl}\n type={buttonType}\n >\n {buttonText || 'Submit'}\n </Button>\n );\n }\n\n case EmbeddedFlowComponentType.Text: {\n const variant: any = getTypographyVariant(component.variant!);\n const textAlignClass: string = css({\n marginBottom: 2,\n textAlign:\n typeof component?.align === 'string' ? (component.align as React.CSSProperties['textAlign']) : 'left',\n });\n return (\n <Typography key={key} id={component.id} className={cx(component.classes, textAlignClass)} variant={variant}>\n {resolve(component.label)}\n </Typography>\n );\n }\n\n case EmbeddedFlowComponentType.Divider: {\n return <Divider key={key}>{resolve(component.label) || ''}</Divider>;\n }\n\n case EmbeddedFlowComponentType.Select: {\n const identifier: string = component.ref!;\n const value: string = formValues[identifier] || '';\n const isTouched: boolean = touchedFields[identifier] || false;\n const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n // Options are pre-sanitized by flowTransformer to {value: string, label: string} format\n const selectOptions: any = (component.options || []).map((opt: any) => ({\n label: typeof opt === 'string' ? opt : String(opt.label ?? opt.value ?? ''),\n value: typeof opt === 'string' ? opt : String(opt.value ?? ''),\n }));\n\n return (\n <Select\n key={key}\n id={component.id}\n name={identifier}\n label={resolve(component.label) || ''}\n placeholder={resolve(component.placeholder)}\n required={component.required}\n options={selectOptions}\n value={value}\n error={error}\n onChange={(e: any): void => onInputChange(identifier, e.target.value)}\n onBlur={(): any => options.onInputBlur?.(identifier)}\n className={cx(options.inputClassName, component.classes)}\n />\n );\n }\n\n case EmbeddedFlowComponentType.DateInput: {\n const identifier: string = component.ref!;\n const value: string = formValues[identifier] || '';\n const isTouched: boolean = touchedFields[identifier] || false;\n const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n return (\n <DatePicker\n key={key}\n id={component.id}\n name={identifier}\n label={resolve(component.label) || ''}\n placeholder={resolve(component.placeholder)}\n required={component.required}\n dateFormat={component.dateFormat}\n value={value}\n error={error}\n onChange={(e: any): void => onInputChange(identifier, e.target.value)}\n onBlur={(): any => options.onInputBlur?.(identifier)}\n className={cx(options.inputClassName, component.classes)}\n />\n );\n }\n\n case EmbeddedFlowComponentType.OuSelect:\n return skipUnsupported('OU_SELECT');\n\n // The resource pickers load with a signed-in user's access token, so without a data source, which is every flow\n // except InviteUser, they are not drawn.\n case EmbeddedFlowComponentType.UserSelect:\n return options.fetchUsers ? (\n <BaseUserSelect key={key} {...resourceSelectProps()} fetchUsers={options.fetchUsers} />\n ) : (\n skipUnsupported('USER_SELECT')\n );\n\n case EmbeddedFlowComponentType.AuthFlowSelect:\n return options.fetchAuthFlows ? (\n <BaseAuthFlowSelect key={key} {...resourceSelectProps()} fetchAuthFlows={options.fetchAuthFlows} />\n ) : (\n skipUnsupported('AUTH_FLOW_SELECT')\n );\n\n case EmbeddedFlowComponentType.UserTypeSelect:\n return options.fetchUserTypes ? (\n <BaseUserTypeSelect key={key} {...resourceSelectProps()} fetchUserTypes={options.fetchUserTypes} />\n ) : (\n skipUnsupported('USER_TYPE_SELECT')\n );\n\n case EmbeddedFlowComponentType.Block: {\n if (component.components && component.components.length > 0) {\n const formClass: string = css({\n display: 'flex',\n flexDirection: 'column',\n gap: `calc(${theme?.vars?.spacing?.unit ?? '4px'} * 2)`,\n });\n\n const blockComponents: any = component.components\n .map((childComponent: any, index: any) =>\n createAuthComponentFromFlow(\n childComponent,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n authType,\n {\n ...options,\n key: childComponent.id || `${component.id}_${index}`,\n },\n ),\n )\n .filter(Boolean);\n\n // The submit button's `type=\"submit\"` (and pressing Enter in a field) would\n // otherwise trigger the browser's native form submission — a GET request to\n // the current URL with all field values (including passwords) as query params.\n // Actual submission is handled entirely via `onClick`/`onSubmit` above.\n return (\n <form\n id={component.id}\n key={key}\n className={cx(component.classes, formClass)}\n onSubmit={(event: FormEvent<HTMLFormElement>): void => event.preventDefault()}\n >\n {blockComponents}\n </form>\n );\n }\n return null;\n }\n\n case EmbeddedFlowComponentType.RichText: {\n const richTextAction: EmbeddedFlowComponentAction | undefined = component.action;\n\n const dispatchRichTextAction = (): void => {\n if (!richTextAction || !options.onSubmit) {\n return;\n }\n const eventTypeValue = String(richTextAction.eventType ?? EmbeddedFlowEventType.Submit);\n const shouldSkipValidation: boolean = eventTypeValue.toUpperCase() === String(EmbeddedFlowEventType.Trigger);\n const syntheticAction: EmbeddedFlowComponent = {\n eventType: eventTypeValue,\n id: `${component.id}_action`,\n ref: richTextAction.ref,\n type: EmbeddedFlowComponentType.Action,\n };\n const formData: Record<string, string> = {};\n Object.keys(formValues).forEach((field: string) => {\n formData[field] = formValues[field];\n });\n options.onSubmit(syntheticAction, formData, shouldSkipValidation);\n };\n\n // Sentinel-anchor contract: only anchors carrying `data-action-ref` equal to\n // richTextAction.ref dispatch the action. Anchors without the sentinel (or with\n // a non-matching one) are treated as ordinary links and are ignored here.\n const isMatchingSentinelAnchor = (anchor: HTMLAnchorElement): boolean =>\n anchor.getAttribute('data-action-ref') === richTextAction?.ref;\n\n const handleRichTextClick: React.MouseEventHandler<HTMLDivElement> | undefined = richTextAction\n ? (event: React.MouseEvent<HTMLDivElement>): void => {\n const anchor: HTMLAnchorElement | null = (event.target as HTMLElement).closest('a');\n if (!anchor || !isMatchingSentinelAnchor(anchor)) {\n return;\n }\n event.preventDefault();\n dispatchRichTextAction();\n }\n : undefined;\n\n const handleRichTextKeyDown: React.KeyboardEventHandler<HTMLDivElement> | undefined = richTextAction\n ? (event: React.KeyboardEvent<HTMLDivElement>): void => {\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n const anchor: HTMLAnchorElement | null = (event.target as HTMLElement).closest('a');\n if (!anchor || !isMatchingSentinelAnchor(anchor)) {\n return;\n }\n event.preventDefault();\n dispatchRichTextAction();\n }\n : undefined;\n\n return (\n // Sentinel anchors are made keyboard-operable via the container's onKeyDown\n // (Enter/Space activate the matching anchor). Authors should ensure the anchor\n // is focusable (`href` or `tabIndex`); the click+keydown delegation covers both\n // pointer and keyboard activation once focus lands on the anchor.\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n key={key}\n className={getRichTextClass()}\n onClick={handleRichTextClick}\n onKeyDown={handleRichTextKeyDown}\n // Manually sanitizes with `DOMPurify`.\n // IMPORTANT: DO NOT REMOVE OR MODIFY THIS SANITIZATION STEP.\n dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(resolveEmojiUrisInHtml(resolve(component.label)))}}\n />\n );\n }\n\n case EmbeddedFlowComponentType.Image: {\n const explicitHeight: string = resolve(component.height?.toString());\n const explicitWidth: string = resolve(component.width?.toString());\n return (\n <ImageComponent\n key={key}\n component={\n {\n config: {\n alt: resolve(component.alt) || resolve(component.label) || 'Image',\n height: explicitHeight || (options.inStack ? '50' : 'auto'),\n src: resolve(component.src),\n width: explicitWidth || (options.inStack ? '50' : '100%'),\n },\n } as any\n }\n formErrors={undefined!}\n formValues={undefined!}\n isFormValid={false}\n isLoading={false}\n onInputChange={(): void => {\n throw new Error('Function not implemented.');\n }}\n touchedFields={undefined!}\n />\n );\n }\n\n case EmbeddedFlowComponentType.Icon: {\n const iconName: string = component.name || '';\n const IconComponent: any = flowIconRegistry[iconName];\n if (!IconComponent) {\n logger.warn(`Unknown icon name: \"${iconName}\". Skipping render.`);\n return null;\n }\n return <IconComponent key={key} size={component.size || 24} color={component.color || 'currentColor'} />;\n }\n\n case EmbeddedFlowComponentType.Stack: {\n const direction: string = (component as any).direction || 'row';\n const gap: number = (component as any).gap ?? 2;\n const align: string = (component as any).align || 'center';\n const justify: string = (component as any).justify || 'flex-start';\n\n // `items` is the number of slots across the main axis and `direction` picks\n // that axis: with `row` it is the column count (items: 2 with four buttons\n // renders a 2 x 2 grid), and with `column` it is the row count and children\n // flow into further columns. Fewer than two slots keeps the flex layout, so\n // stacks authored before grid support are unaffected.\n const rawItems: string | number | undefined = component.items;\n const parsedItems: number =\n typeof rawItems === 'string' ? Number(rawItems) : typeof rawItems === 'number' ? rawItems : NaN;\n const items: number | null =\n Number.isFinite(parsedItems) && Math.floor(parsedItems) >= 2\n ? Math.min(Math.floor(parsedItems), MAX_STACK_ITEMS)\n : null;\n // CSS Grid has no reverse auto-flow, so the reverse variants fall back to\n // their base axis rather than silently becoming a row.\n const isColumn: boolean = direction.startsWith('column');\n const gridJustify: string = component.justify ?? 'stretch';\n // Equal `1fr` tracks fill the container, leaving `justify-content` no free\n // space to distribute. Content-sized tracks restore it, so every justify\n // value has a visible effect while the default stays an even split.\n const track: string = gridJustify === 'stretch' ? '1fr' : 'auto';\n\n const stackStyle: CSSProperties =\n items !== null\n ? {\n alignItems: component.align ?? 'stretch',\n display: 'grid',\n gap: `${gap * 0.5}rem`,\n gridAutoFlow: isColumn ? 'column' : 'row',\n justifyContent: gridJustify,\n width: '100%',\n ...(isColumn\n ? {gridTemplateRows: `repeat(${items}, ${track})`}\n : {gridTemplateColumns: `repeat(${items}, ${track})`}),\n }\n : {\n alignItems: align,\n display: 'flex',\n flexDirection: direction as CSSProperties['flexDirection'],\n flexWrap: 'wrap',\n gap: `${gap * 0.5}rem`,\n justifyContent: justify,\n };\n\n const stackClass: string = css(stackStyle as CSSInterpolation);\n\n const stackChildren: (ReactElement | null)[] = component.components\n ? component.components.map((childComponent: any, index: number) =>\n createAuthComponentFromFlow(\n childComponent,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n authType,\n {\n ...options,\n inStack: true,\n key: childComponent.id || `${component.id}_${index}`,\n },\n ),\n )\n : [];\n\n return (\n <div key={key} id={component.id} className={cx(component.classes, stackClass)}>\n {stackChildren}\n </div>\n );\n }\n\n case EmbeddedFlowComponentType.Consent: {\n const consentPromptRawData: ConsentPromptData | string | undefined = options.additionalData?.['consentPrompt'];\n\n return (\n <Consent\n key={key}\n consentData={consentPromptRawData as any}\n formValues={formValues}\n onInputChange={onInputChange}\n t={options.t}\n />\n );\n }\n\n case EmbeddedFlowComponentType.Timer: {\n const textTemplate: string = resolve((component as any).label) || 'Time remaining: {time}';\n const timeoutMs: number = Number(options.additionalData?.['stepTimeout']) || 0;\n const expiresIn: number = timeoutMs > 0 ? Math.max(0, Math.floor((timeoutMs - Date.now()) / 1000)) : 0;\n\n return <FlowTimer key={key} expiresIn={expiresIn} textTemplate={textTemplate} />;\n }\n\n case EmbeddedFlowComponentType.CopyableText: {\n const sourceKey: string | undefined = (component as any).source;\n const value: string = sourceKey && options.additionalData ? String(options.additionalData[sourceKey] ?? '') : '';\n const labelText: string | undefined = resolve((component as any).label) || undefined;\n\n return <CopyableText key={key} label={labelText} masked={Boolean(component.masked)} value={value} />;\n }\n\n case EmbeddedFlowComponentType.KeyValueList: {\n const sourceKey: string | undefined = component.source;\n const pairs: KeyValuePair[] = parseKeyValuePairs(\n sourceKey && options.additionalData ? options.additionalData[sourceKey] : undefined,\n ).map((pair: KeyValuePair) => ({...pair, label: resolve(pair.label)}));\n\n // An empty panel tells the user nothing, so a list with no pairs renders nothing at all.\n if (pairs.length === 0) {\n return null;\n }\n\n return <KeyValueList key={key} label={resolve(component.label) || undefined} pairs={pairs} />;\n }\n\n default:\n // Gracefully handle unsupported component types by returning null\n logger.warn(`Unsupported component type: ${component.type}. Skipping render.`);\n return null;\n }\n};\n\n/**\n * Processes an array of components and renders them as React elements for sign-in.\n */\nexport const renderSignInComponents = (\n components: EmbeddedFlowComponent[],\n formValues: Record<string, string>,\n touchedFields: Record<string, boolean>,\n formErrors: Record<string, string>,\n isLoading: boolean,\n isFormValid: boolean,\n resetForm: () => void,\n onInputChange: (name: string, value: string) => void,\n options?: {\n /** @internal */\n _customRenderers?: ComponentRendererMap;\n /** @internal */\n _theme?: any;\n /** Additional data from the flow response */\n additionalData?: Record<string, any>;\n buttonClassName?: string;\n inputClassName?: string;\n /** Flag to determine if the step timeline has expired */\n isTimeoutDisabled?: boolean;\n /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n meta?: FlowMetadataResponse | null;\n onInputBlur?: (name: string) => void;\n onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n size?: 'small' | 'medium' | 'large';\n /** Translation function for resolving {{t(...)}} expressions at render time */\n t?: UseTranslation['t'];\n variant?: any;\n /** Vendor namespace used to derive affix sentinel keys for prefix/postfix-bearing inputs. */\n vendor?: string;\n },\n): ReactElement[] =>\n components\n .map((component: any, index: any) =>\n createAuthComponentFromFlow(\n component,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n 'signin',\n {\n ...options,\n key: component.id || index,\n },\n ),\n )\n .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for sign-up.\n */\nexport const renderSignUpComponents = (\n components: EmbeddedFlowComponent[],\n formValues: Record<string, string>,\n touchedFields: Record<string, boolean>,\n formErrors: Record<string, string>,\n isLoading: boolean,\n isFormValid: boolean,\n resetForm: () => void,\n onInputChange: (name: string, value: string) => void,\n options?: {\n /** @internal */\n _customRenderers?: ComponentRendererMap;\n /** @internal */\n _theme?: any;\n /** Additional data from the flow response */\n additionalData?: Record<string, any>;\n buttonClassName?: string;\n inputClassName?: string;\n /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n meta?: FlowMetadataResponse | null;\n onInputBlur?: (name: string) => void;\n onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n size?: 'small' | 'medium' | 'large';\n /** Translation function for resolving {{t(...)}} expressions at render time */\n t?: UseTranslation['t'];\n variant?: any;\n /** Vendor namespace used to derive affix sentinel keys for prefix/postfix-bearing inputs. */\n vendor?: string;\n },\n): ReactElement[] =>\n components\n .map((component: any, index: any) =>\n createAuthComponentFromFlow(\n component,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n 'signup',\n {\n ...options,\n key: component.id || index,\n },\n ),\n )\n .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for recovery flow.\n */\nexport const renderRecoveryComponents = (\n components: EmbeddedFlowComponent[],\n formValues: Record<string, string>,\n touchedFields: Record<string, boolean>,\n formErrors: Record<string, string>,\n isLoading: boolean,\n isFormValid: boolean,\n resetForm: () => void,\n onInputChange: (name: string, value: string) => void,\n options?: {\n /** @internal */\n _customRenderers?: ComponentRendererMap;\n /** @internal */\n _theme?: any;\n /** Additional data from the flow response */\n additionalData?: Record<string, any>;\n buttonClassName?: string;\n inputClassName?: string;\n /** Flag to determine if the step timeline has expired */\n isTimeoutDisabled?: boolean;\n /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n meta?: FlowMetadataResponse | null;\n onInputBlur?: (name: string) => void;\n onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n size?: 'small' | 'medium' | 'large';\n /** Translation function for resolving {{t(...)}} expressions at render time */\n t?: UseTranslation['t'];\n variant?: any;\n /** Vendor namespace used to derive affix sentinel keys for prefix/postfix-bearing inputs. */\n vendor?: string;\n },\n): ReactElement[] =>\n components\n .map((component: any, index: any) =>\n createAuthComponentFromFlow(\n component,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n 'recovery',\n {\n ...options,\n key: component.id || index,\n },\n ),\n )\n .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for invite user.\n * This is used by both InviteUser and AcceptInvite components.\n */\nexport const renderInviteUserComponents = (\n components: EmbeddedFlowComponent[],\n formValues: Record<string, string>,\n touchedFields: Record<string, boolean>,\n formErrors: Record<string, string>,\n isLoading: boolean,\n isFormValid: boolean,\n resetForm: () => void,\n onInputChange: (name: string, value: string) => void,\n options?: {\n /** @internal */\n _customRenderers?: ComponentRendererMap;\n /** @internal */\n _theme?: any;\n /** Additional data from the flow response */\n additionalData?: Record<string, any>;\n buttonClassName?: string;\n /** Function to fetch child organization units for OU_SELECT components. */\n fetchOrganizationUnitChildren?: (\n parentId: string,\n limit: number,\n offset: number,\n ) => Promise<OrganizationUnitListResponse>;\n inputClassName?: string;\n /** Data source for AUTH_FLOW_SELECT fields. */\n fetchAuthFlows?: FetchAuthFlows;\n /** Data source for USER_SELECT fields. */\n fetchUsers?: FetchUsers;\n /** Data source for USER_TYPE_SELECT fields. */\n fetchUserTypes?: FetchUserTypes;\n /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n meta?: FlowMetadataResponse | null;\n onInputBlur?: (name: string) => void;\n /** Called with the error of a failed picker load. The form itself shows no error for it. */\n onPickerError?: (error: Error) => void;\n onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n size?: 'small' | 'medium' | 'large';\n /** Translation function for resolving {{t(...)}} expressions at render time */\n t?: UseTranslation['t'];\n variant?: any;\n /** Vendor namespace used to derive affix sentinel keys for prefix/postfix-bearing inputs. */\n vendor?: string;\n },\n): ReactElement[] =>\n components\n .map((component: any, index: any) =>\n createAuthComponentFromFlow(\n component,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n 'signup',\n {\n ...options,\n key: component.id || index,\n },\n ),\n )\n .filter((x): x is ReactElement => x !== null);\n"],"mappings":"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Aa,0BACX,YACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,YAqBA,WACG,KAAK,WAAgB,UACpB,4BACE,WACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,UACA;CACE,GAAG;CACH,KAAK,UAAU,MAAM;CACtB,CACF,CACF,CACA,QAAQ,MAAyB,MAAM,KAAK;;;;AAKjD,MAAa,4BACX,YACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,YAuBA,WACG,KAAK,WAAgB,UACpB,4BACE,WACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,YACA;CACE,GAAG;CACH,KAAK,UAAU,MAAM;CACtB,CACF,CACF,CACA,QAAQ,MAAyB,MAAM,KAAK;;;;;AAMjD,MAAa,8BACX,YACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,YAmCA,WACG,KAAK,WAAgB,UACpB,4BACE,WACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,UACA;CACE,GAAG;CACH,KAAK,UAAU,MAAM;CACtB,CACF,CACF,CACA,QAAQ,MAAyB,MAAM,KAAK"}
|
|
1
|
+
{"version":3,"file":"AuthOptionFactory.js","names":["logger: ReturnType<typeof createPackageComponentLogger>","richTextClassCache: string | undefined","authOptionIconClassCache: string | undefined","providerId: any","providerMatches: any","theme: any","customRenderers: ComponentRendererMap","key: string | number","customRenderer: ComponentRenderer | undefined","rendered: ReactElement | null","identifier: string","isTouched: boolean","value: string","error: string","fieldType: string","hasPrefixes: boolean","hasPostfix: boolean","prefixStateKey: string","postfixStateKey: string","defaultPrefixValue: string","selectedPrefix: string","AffixedField","reportedLength: number","otpLength: number | undefined","numericOnly: boolean","actionId: string","eventType: string","buttonText: string","componentVariant: string","shouldSkipValidation: boolean","buttonType: HTMLButtonElement['type']","hasInvalidConsentApproval: boolean","isConsentApprovalBlocked","formData: Record<string, any>","consentPrompt: ConsentPromptData | undefined","isDeny: boolean","decisions: ConsentDecisions","socialButtonClassName: string","GoogleButton","GitHubButton","FacebookButton","MicrosoftButton","LinkedInButton","SignInWithEthereumButton","SmsOtpButton","startIconEl: ReactElement | null","endIconEl: ReactElement | null","Button","variant: any","color: TypographyColor | undefined","textAlignClass: string","Typography","Divider","selectOptions: any","Select","DatePicker","BaseUserSelect","BaseAuthFlowSelect","BaseUserTypeSelect","formClass: string","blockComponents: any","richTextAction: EmbeddedFlowComponentAction | undefined","syntheticAction: EmbeddedFlowComponent","formData: Record<string, string>","handleRichTextClick: React.MouseEventHandler<HTMLDivElement> | undefined","anchor: HTMLAnchorElement | null","handleRichTextKeyDown: React.KeyboardEventHandler<HTMLDivElement> | undefined","explicitHeight: string","explicitWidth: string","ImageComponent","iconName: string","IconComponent: any","flowIconRegistry","direction: string","gap: number","align: string","justify: string","rawItems: string | number | undefined","parsedItems: number","items: number | null","isColumn: boolean","gridJustify: string","track: string","stackClass: string","stackChildren: (ReactElement | null)[]","consentPromptRawData: ConsentPromptData | string | undefined","Consent","textTemplate: string","timeoutMs: number","FlowTimer","sourceKey: string | undefined","CopyableText","pairs: KeyValuePair[]","KeyValueList"],"sources":["../../../../src/components/auth/flow/AuthOptionFactory.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {CSSInterpolation} from '@emotion/css/create-instance';\nimport {\n ConsentConstants,\n FieldType,\n FlowMetadataResponse,\n EmbeddedFlowComponent,\n EmbeddedFlowComponentAction,\n EmbeddedFlowComponentType,\n EmbeddedFlowTextVariant,\n EmbeddedFlowEventType,\n createPackageComponentLogger,\n resolveFlowTemplateLiterals,\n resolveEmojiUrisInHtml,\n ConsentPurposeData,\n ConsentPromptData,\n ConsentDecisions,\n ConsentPurposeDecision,\n ConsentAttributeElement,\n OrganizationUnitListResponse,\n PrefixOption,\n KeyValuePair,\n parseKeyValuePairs,\n FetchAuthFlows,\n FetchUserTypes,\n FetchUsers,\n getConsentElementDecision,\n} from '@thunderid/browser';\nimport DOMPurify from 'dompurify';\nimport {ChangeEvent, cloneElement, CSSProperties, FormEvent, MouseEvent, ReactElement} from 'react';\nimport Consent from './Consent';\nimport {getConsentOptionalKey} from './ConsentCheckboxList';\nimport {createField} from './FieldFactory';\nimport FlowTimer from './FlowTimer';\nimport ImageComponent from './ImageComponent';\nimport {\n ComponentRenderer,\n ComponentRenderContext,\n ComponentRendererMap,\n} from '../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport {UseTranslation} from '../../../hooks/useTranslation';\nimport {css, cx} from '../../../styles/emotion';\nimport {affixPostfixKey, affixPrefixKey} from '../../../utils/composeAffixedInputs';\nimport isConsentApprovalBlocked from '../../../utils/isConsentApprovalBlocked';\nimport AffixedField from '../../primitives/AffixedField/AffixedField';\nimport BaseAuthFlowSelect from '../../primitives/AuthFlowSelect/BaseAuthFlowSelect';\nimport Button from '../../primitives/Button/Button';\nimport CopyableText from '../../primitives/CopyableText/CopyableText';\nimport DatePicker from '../../primitives/DatePicker/DatePicker';\nimport Divider from '../../primitives/Divider/Divider';\nimport flowIconRegistry from '../../primitives/Icons/flowIconRegistry';\nimport KeyValueList from '../../primitives/KeyValueList/KeyValueList';\nimport Select from '../../primitives/Select/Select';\nimport Typography from '../../primitives/Typography/Typography';\nimport {TypographyColor, TypographyVariant} from '../../primitives/Typography/Typography.styles';\nimport BaseUserSelect, {BaseUserSelectProps} from '../../primitives/UserSelect/BaseUserSelect';\nimport BaseUserTypeSelect from '../../primitives/UserTypeSelect/BaseUserTypeSelect';\nimport FacebookButton from '../buttons/FacebookButton';\nimport GitHubButton from '../buttons/GitHubButton';\nimport GoogleButton from '../buttons/GoogleButton';\nimport LinkedInButton from '../buttons/LinkedInButton';\nimport MicrosoftButton from '../buttons/MicrosoftButton';\nimport SignInWithEthereumButton from '../buttons/SignInWithEthereumButton';\nimport SmsOtpButton from '../buttons/SmsOtpButton';\n\nconst logger: ReturnType<typeof createPackageComponentLogger> = createPackageComponentLogger(\n '@thunderid/react',\n 'AuthOptionFactory',\n);\n\n/**\n * Replaces `emoji:` URIs embedded in HTML before DOMPurify sanitization.\n *\n * DOMPurify strips unknown URI schemes from attributes (e.g. `src=\"emoji:🦊\"` → `src=\"\"`).\n * This function converts:\n * - `<img src=\"emoji:X\" alt=\"Y\">` → `<span role=\"img\" aria-label=\"Y\">X</span>`\n * - Any remaining `emoji:X` text occurrences → `X`\n */\n\n// This module's functions (renderSignInComponents, etc.) are called imperatively from a\n// component's render, not React components/hooks themselves — so these classes can't be computed\n// at module scope: that runs at import time, before <ThunderIDProvider> has had a chance to\n// configure Emotion's CSP nonce, which would insert them into an un-nonced <style> tag. Instead\n// they're computed lazily, on first actual use (still just once — Emotion's own cache dedupes any\n// further calls to a no-op after that).\nlet richTextClassCache: string | undefined;\n\n/** Ensures rich-text content (including all inner elements from the server) always word-wraps. */\nfunction getRichTextClass(): string {\n richTextClassCache ??= css`\n overflow-wrap: anywhere;\n & * {\n overflow-wrap: anywhere;\n word-break: break-word;\n }\n & .rich-text-align-left {\n text-align: left;\n }\n & .rich-text-align-center {\n text-align: center;\n }\n & .rich-text-align-right {\n text-align: right;\n }\n & .rich-text-align-justify {\n text-align: justify;\n }\n & a,\n & .rich-text-link {\n text-decoration: underline;\n }\n & span[role='img'] {\n display: inline-block;\n }\n `;\n return richTextClassCache;\n}\n\nlet authOptionIconClassCache: string | undefined;\n\nfunction getAuthOptionIconClass(): string {\n authOptionIconClassCache ??= css({height: '1.25em', objectFit: 'contain', width: '1.25em'});\n return authOptionIconClassCache;\n}\n\nexport type AuthType = 'signin' | 'signup' | 'recovery';\n\n/**\n * Get the appropriate FieldType for an input component.\n */\n/** Upper bound on STACK grid slots, so a mistyped `items` cannot render thousands of cells. */\nconst MAX_STACK_ITEMS = 12;\n\nconst getFieldType = (variant: EmbeddedFlowComponentType): FieldType => {\n switch (variant) {\n case EmbeddedFlowComponentType.EmailInput:\n return FieldType.Email;\n case EmbeddedFlowComponentType.PhoneInput:\n return FieldType.Tel;\n case EmbeddedFlowComponentType.PasswordInput:\n return FieldType.Password;\n case EmbeddedFlowComponentType.TextInput:\n default:\n return FieldType.Text;\n }\n};\n\n/**\n * Get typography variant from component variant.\n */\nconst getTypographyVariant = (variant: string): any => {\n const variantMap: Record<EmbeddedFlowTextVariant, TypographyVariant> = {\n BODY_1: 'body1',\n BODY_2: 'body2',\n BUTTON_TEXT: 'button',\n CAPTION: 'caption',\n HEADING_1: 'h1',\n HEADING_2: 'h2',\n HEADING_3: 'h3',\n HEADING_4: 'h4',\n HEADING_5: 'h5',\n HEADING_6: 'h6',\n OVERLINE: 'overline',\n SUBTITLE_1: 'subtitle1',\n SUBTITLE_2: 'subtitle2',\n };\n\n return variantMap[variant] || 'h3';\n};\n\n/** Maps flow text color values to SDK typography color variants. */\nconst getTypographyColor = (color?: string): TypographyColor | undefined => {\n switch (color?.toUpperCase()) {\n case 'ERROR':\n return 'error';\n case 'WARNING':\n return 'warning';\n case 'SUCCESS':\n return 'success';\n case 'INFO':\n return 'info';\n case 'PRIMARY':\n return 'primary';\n case 'SECONDARY':\n return 'secondary';\n default:\n return undefined;\n }\n};\n\n/**\n * Check if a button text or action matches a social provider.\n */\nconst matchesSocialProvider = (\n actionId: string,\n eventType: string,\n buttonText: string,\n provider: string,\n authType: AuthType,\n /* eslint-disable-next-line @typescript-eslint/no-unused-vars */\n _componentVariant?: string,\n): boolean => {\n const providerId: any = `${provider}_auth`;\n const providerMatches: any = actionId === providerId || eventType === providerId;\n\n // Social buttons usually have \"Sign in with X\" or \"Continue with X\" text,\n // so also check button text for the provider name to increase chances of correct detection (especially for signup flows where action IDs are less standardized)\n if (buttonText.toLowerCase().includes(provider)) {\n return true;\n }\n\n // For signup, also check button text\n if (authType === 'signup') {\n return providerMatches || buttonText.toLowerCase().includes(provider);\n }\n\n return providerMatches;\n};\n\n/**\n * Create an auth component from flow component configuration.\n */\nconst createAuthComponentFromFlow = (\n component: EmbeddedFlowComponent,\n formValues: Record<string, string>,\n touchedFields: Record<string, boolean>,\n formErrors: Record<string, string>,\n isLoading: boolean,\n isFormValid: boolean,\n resetForm: () => void,\n onInputChange: (name: string, value: string) => void,\n authType: AuthType,\n options: {\n /** @internal Passed from the host React component so hooks aren't called inside a loop. */\n _customRenderers?: ComponentRendererMap;\n /** @internal Passed from the host React component so hooks aren't called inside a loop. */\n _theme?: any;\n /** Additional data from the flow response, used for different dynamic data */\n additionalData?: Record<string, any>;\n buttonClassName?: string;\n /** Current consent purpose being rendered. Set by CONSENT_PURPOSE block iteration. */\n currentConsentPurpose?: ConsentPurposeData;\n inStack?: boolean;\n inputClassName?: string;\n /** Flag to determine if the step timeline has expired */\n isTimeoutDisabled?: boolean;\n key?: string | number;\n /** Data source for AUTH_FLOW_SELECT fields. */\n fetchAuthFlows?: FetchAuthFlows;\n /** Data source for USER_SELECT fields. */\n fetchUsers?: FetchUsers;\n /** Data source for USER_TYPE_SELECT fields. */\n fetchUserTypes?: FetchUserTypes;\n /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n meta?: FlowMetadataResponse | null;\n onInputBlur?: (name: string) => void;\n /** Called with the error of a failed picker load. The form itself shows no error for it. */\n onPickerError?: (error: Error) => void;\n onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n size?: 'small' | 'medium' | 'large';\n /** Translation function for resolving {{t(...)}} expressions at render time */\n t?: UseTranslation['t'];\n variant?: any;\n /** Vendor namespace used to derive affix sentinel keys for prefix/postfix-bearing inputs. */\n vendor?: string;\n } = {},\n): ReactElement | null => {\n const theme: any = options._theme;\n const customRenderers: ComponentRendererMap = options._customRenderers ?? {};\n\n const key: string | number = options.key || component.id;\n\n const customRenderer: ComponentRenderer | undefined =\n customRenderers[component.id] ?? customRenderers[component.type];\n if (customRenderer) {\n const renderCtx: ComponentRenderContext = {\n additionalData: options.additionalData,\n authType,\n formErrors,\n formValues,\n isFormValid,\n isLoading,\n meta: options.meta,\n resetForm,\n onInputBlur: options.onInputBlur,\n onInputChange,\n onSubmit: options.onSubmit,\n touchedFields,\n };\n // Key the element here so a renderer does not have to, as the built-in cases below do.\n const rendered: ReactElement | null = customRenderer(component, renderCtx);\n\n return rendered ? cloneElement(rendered, {key}) : null;\n }\n\n /** Resolve any remaining {{t()}} or {{meta()}} template expressions in a string at render time. */\n const resolve = (text: string | undefined): string => {\n if (!text || (!options.t && !options.meta)) {\n return text || '';\n }\n return resolveFlowTemplateLiterals(text, {meta: options.meta, t: options.t || ((k: string): string => k)});\n };\n\n // The props a flow gives each of the resource pickers (USER_SELECT, AUTH_FLOW_SELECT, USER_TYPE_SELECT).\n const resourceSelectProps = (): Omit<BaseUserSelectProps, 'fetchUsers' | 'mapping'> => {\n const identifier: string = component.ref!;\n const isTouched: boolean = touchedFields[identifier] || false;\n\n return {\n className: cx(options.inputClassName, component.classes),\n component,\n error: isTouched ? formErrors[identifier] : undefined,\n id: component.id,\n label: resolve(component.label) || '',\n name: identifier,\n onBlur: (): void => options.onInputBlur?.(identifier),\n onChange: (event: ChangeEvent<HTMLSelectElement>): void => onInputChange(identifier, event.target.value),\n onError: options.onPickerError,\n placeholder: resolve(component.placeholder),\n required: component.required,\n value: formValues[identifier] || '',\n };\n };\n\n // A component type this render cannot draw is logged and left out.\n const skipUnsupported = (typeName: string): null => {\n logger.warn(`${typeName} component type is not supported. Skipping render.`);\n\n return null;\n };\n\n switch (component.type) {\n case EmbeddedFlowComponentType.TextInput:\n case EmbeddedFlowComponentType.PasswordInput:\n case EmbeddedFlowComponentType.EmailInput:\n case EmbeddedFlowComponentType.PhoneInput: {\n const identifier: string = component.ref!;\n const value: string = formValues[identifier] || '';\n const isTouched: boolean = touchedFields[identifier] || false;\n const error: string = isTouched ? formErrors[identifier] : undefined!;\n const fieldType: string = getFieldType(component.type);\n\n // Prefix/postfix are accepted on any text-family input. When either is present,\n // route to AffixedField so the leading affix renders and submit-time composition\n // is picked up by composeAffixedInputs via the sentinel keys.\n // Both string.length and Array.length are defined, so a single truthy+length\n // check covers `prefixes?: string | PrefixOption[]`.\n const hasPrefixes: boolean = !!component.prefixes && component.prefixes.length > 0;\n const hasPostfix: boolean = typeof component.postfix === 'string' && component.postfix.length > 0;\n\n if (hasPrefixes || hasPostfix) {\n const prefixStateKey: string = affixPrefixKey(identifier, options.vendor);\n const postfixStateKey: string = affixPostfixKey(identifier, options.vendor);\n const defaultPrefixValue: string = hasPrefixes\n ? typeof component.prefixes === 'string'\n ? component.prefixes\n : (component.prefixes as PrefixOption[])[0].value\n : '';\n const selectedPrefix: string = formValues[prefixStateKey] ?? defaultPrefixValue;\n\n return (\n <AffixedField\n key={key}\n className={cx(options.inputClassName, component.classes)}\n id={component.id}\n label={resolve(component.label) || ''}\n name={identifier}\n placeholder={resolve(component.placeholder) || ''}\n required={component.required || false}\n error={error}\n value={value}\n type={fieldType}\n prefixes={component.prefixes}\n prefixValue={selectedPrefix}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onInputChange(identifier, e.target.value)}\n onBlur={(): void => options.onInputBlur?.(identifier)}\n onPrefixChange={(newPrefix: string): void => onInputChange(prefixStateKey, newPrefix)}\n onFocus={(): void => {\n if (hasPrefixes && formValues[prefixStateKey] === undefined) {\n onInputChange(prefixStateKey, defaultPrefixValue);\n }\n if (hasPostfix && formValues[postfixStateKey] === undefined) {\n onInputChange(postfixStateKey, component.postfix!);\n }\n }}\n />\n );\n }\n\n const field: any = createField({\n className: cx(options.inputClassName, component.classes),\n error,\n id: component.id,\n label: resolve(component.label) || '',\n name: identifier,\n onBlur: () => options.onInputBlur?.(identifier),\n onChange: (newValue: string) => onInputChange(identifier, newValue),\n placeholder: resolve(component.placeholder) || '',\n required: component.required || false,\n type: fieldType as FieldType,\n value,\n });\n\n return cloneElement(field, {key});\n }\n\n case EmbeddedFlowComponentType.OtpInput: {\n const identifier: string = component.ref!;\n const value: string = formValues[identifier] || '';\n const isTouched: boolean = touchedFields[identifier] || false;\n const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n // The server reports the length and character set of the code it generated, so the field\n // matches the OTP the user received. An older server omits both and the defaults apply.\n const reportedLength: number = Number(options.additionalData?.['otpLength']);\n const otpLength: number | undefined =\n Number.isInteger(reportedLength) && reportedLength > 0 ? reportedLength : undefined;\n const numericOnly: boolean = options.additionalData?.['otpNumericOnly'] !== 'false';\n\n const field: any = createField({\n className: cx(options.inputClassName, component.classes),\n error,\n id: component.id,\n label: resolve(component.label) || '',\n length: otpLength,\n name: identifier,\n numericOnly,\n onBlur: () => options.onInputBlur?.(identifier),\n onChange: (newValue: string) => onInputChange(identifier, newValue),\n placeholder: resolve(component.placeholder) || '',\n required: component.required || false,\n type: FieldType.Otp,\n value,\n });\n\n return cloneElement(field, {key});\n }\n\n case EmbeddedFlowComponentType.Action: {\n const actionId: string = component.id;\n const eventType: string = component.eventType || '';\n const buttonText: string = resolve(component.label);\n const componentVariant: string = component.variant || '';\n\n // Only validate on submit type events.\n const shouldSkipValidation: boolean = eventType.toUpperCase() !== EmbeddedFlowEventType.Submit;\n\n // Determine the button type based on the event type. Default to 'submit' if not recognized.\n const buttonTypeEnum = {\n [EmbeddedFlowEventType.Submit]: 'submit',\n [EmbeddedFlowEventType.Reset]: 'reset',\n [EmbeddedFlowEventType.Cancel]: 'button',\n [EmbeddedFlowEventType.Trigger]: 'button',\n [EmbeddedFlowEventType.Back]: 'button',\n };\n const buttonType: HTMLButtonElement['type'] = buttonTypeEnum[eventType.toUpperCase()] ?? 'submit';\n\n // Approval waits while an approved authorization detail shows a modified value that cannot be submitted.\n const hasInvalidConsentApproval: boolean =\n !shouldSkipValidation &&\n componentVariant.toLowerCase() === 'primary' &&\n isConsentApprovalBlocked(\n (options.additionalData?.['consentPrompt'] as ConsentPromptData | undefined)?.purposes ?? [],\n formValues,\n );\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {\n // Flow actions are handled by the SDK. Cancel the native button action before\n // onSubmit can switch steps or replace the form; otherwise the browser tries to\n // submit a form that React has already disconnected from the document.\n event.preventDefault();\n\n if (options.onSubmit) {\n const formData: Record<string, any> = {};\n Object.keys(formValues).forEach((field: any) => {\n // Include all values, even empty strings, to ensure proper submission\n formData[field] = formValues[field];\n });\n\n // For consent actions, build the consent_decisions JSON from the form values.\n // The allow action captures per-attribute choices; the deny action sends\n // all purposes as rejected so the backend ConsentExecutor can fail the flow.\n const consentPrompt: ConsentPromptData | undefined = options.additionalData?.['consentPrompt'] as\n | ConsentPromptData\n | undefined;\n if (consentPrompt && eventType.toUpperCase() === EmbeddedFlowEventType.Submit) {\n const isDeny: boolean = componentVariant.toLowerCase() !== 'primary';\n const decisions: ConsentDecisions = {\n approved: !isDeny,\n ...(isDeny ? {reason: ConsentConstants.REASON_USER_DENIED} : {}),\n purposes: consentPrompt.purposes.map(\n (p: ConsentPurposeData): ConsentPurposeDecision => ({\n approved: !isDeny,\n elements: [\n // Permission purposes carry no essential elements, so the server sends null here\n ...(p.essential ?? []).map((e): ConsentAttributeElement => ({approved: !isDeny, name: e.name})),\n ...(p.optional ?? []).map(\n (e): ConsentAttributeElement =>\n getConsentElementDecision(\n p.purposeId,\n e,\n !isDeny && formValues[getConsentOptionalKey(p.purposeId, e.name)] === 'true',\n formValues,\n ),\n ),\n ],\n purposeName: p.purposeName!,\n }),\n ),\n };\n formData['consent_decisions'] = JSON.stringify(decisions);\n }\n\n // For submit events, pass the form data to the onSubmit callback. For other event types, reset the form and call onSubmit with an empty data object.\n if (eventType.toUpperCase() === EmbeddedFlowEventType.Submit) {\n options.onSubmit(component, formData, shouldSkipValidation);\n } else {\n resetForm();\n options.onSubmit(component, {}, shouldSkipValidation);\n }\n }\n };\n\n // Render branded social login buttons for known action IDs\n\n const socialButtonClassName: string = cx(options.buttonClassName, component.classes);\n\n if (matchesSocialProvider(actionId, eventType, buttonText, 'google', authType, componentVariant)) {\n return <GoogleButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n if (matchesSocialProvider(actionId, eventType, buttonText, 'github', authType, componentVariant)) {\n return <GitHubButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n if (matchesSocialProvider(actionId, eventType, buttonText, 'facebook', authType, componentVariant)) {\n return <FacebookButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n if (matchesSocialProvider(actionId, eventType, buttonText, 'microsoft', authType, componentVariant)) {\n return <MicrosoftButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n if (matchesSocialProvider(actionId, eventType, buttonText, 'linkedin', authType, componentVariant)) {\n return <LinkedInButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n if (matchesSocialProvider(actionId, eventType, buttonText, 'ethereum', authType, componentVariant)) {\n return (\n <SignInWithEthereumButton\n key={key}\n id={component.id}\n onClick={handleClick}\n className={socialButtonClassName}\n />\n );\n }\n if (actionId === 'prompt_mobile' || eventType === 'prompt_mobile') {\n return <SmsOtpButton key={key} id={component.id} onClick={handleClick} className={socialButtonClassName} />;\n }\n\n const startIconEl: ReactElement | null = component.startIcon ? (\n <img src={component.startIcon} alt=\"\" aria-hidden=\"true\" className={getAuthOptionIconClass()} />\n ) : null;\n\n const endIconEl: ReactElement | null = component.endIcon ? (\n <img src={component.endIcon} alt=\"\" aria-hidden=\"true\" className={getAuthOptionIconClass()} />\n ) : null;\n\n return (\n <Button\n fullWidth\n key={key}\n id={component.id}\n onClick={handleClick}\n disabled={\n isLoading ||\n (!isFormValid && !shouldSkipValidation) ||\n hasInvalidConsentApproval ||\n options.isTimeoutDisabled ||\n (component as any).config?.disabled\n }\n className={cx(options.buttonClassName, component.classes)}\n data-testid=\"thunderid-signin-submit\"\n variant={component.variant?.toLowerCase() === 'primary' ? 'solid' : 'outline'}\n color={component.variant?.toLowerCase() === 'primary' ? 'primary' : 'secondary'}\n startIcon={startIconEl}\n endIcon={endIconEl}\n type={buttonType}\n >\n {buttonText || 'Submit'}\n </Button>\n );\n }\n\n case EmbeddedFlowComponentType.Text: {\n const variant: any = getTypographyVariant(component.variant!);\n const color: TypographyColor | undefined = getTypographyColor(component.color);\n const textAlignClass: string = css({\n marginBottom: 2,\n textAlign:\n typeof component?.align === 'string' ? (component.align as React.CSSProperties['textAlign']) : 'left',\n });\n return (\n <Typography\n key={key}\n id={component.id}\n className={cx(component.classes, textAlignClass)}\n variant={variant}\n color={color}\n >\n {resolve(component.label)}\n </Typography>\n );\n }\n\n case EmbeddedFlowComponentType.Divider: {\n return <Divider key={key}>{resolve(component.label) || ''}</Divider>;\n }\n\n case EmbeddedFlowComponentType.Select: {\n const identifier: string = component.ref!;\n const value: string = formValues[identifier] || '';\n const isTouched: boolean = touchedFields[identifier] || false;\n const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n // Options are pre-sanitized by flowTransformer to {value: string, label: string} format\n const selectOptions: any = (component.options || []).map((opt: any) => ({\n label: typeof opt === 'string' ? opt : String(opt.label ?? opt.value ?? ''),\n value: typeof opt === 'string' ? opt : String(opt.value ?? ''),\n }));\n\n return (\n <Select\n key={key}\n id={component.id}\n name={identifier}\n label={resolve(component.label) || ''}\n placeholder={resolve(component.placeholder)}\n required={component.required}\n options={selectOptions}\n value={value}\n error={error}\n onChange={(e: any): void => onInputChange(identifier, e.target.value)}\n onBlur={(): any => options.onInputBlur?.(identifier)}\n className={cx(options.inputClassName, component.classes)}\n />\n );\n }\n\n case EmbeddedFlowComponentType.DateInput: {\n const identifier: string = component.ref!;\n const value: string = formValues[identifier] || '';\n const isTouched: boolean = touchedFields[identifier] || false;\n const error: string = isTouched ? formErrors[identifier] : undefined!;\n\n return (\n <DatePicker\n key={key}\n id={component.id}\n name={identifier}\n label={resolve(component.label) || ''}\n placeholder={resolve(component.placeholder)}\n required={component.required}\n dateFormat={component.dateFormat}\n value={value}\n error={error}\n onChange={(e: any): void => onInputChange(identifier, e.target.value)}\n onBlur={(): any => options.onInputBlur?.(identifier)}\n className={cx(options.inputClassName, component.classes)}\n />\n );\n }\n\n case EmbeddedFlowComponentType.OuSelect:\n return skipUnsupported('OU_SELECT');\n\n // The resource pickers load with a signed-in user's access token, so without a data source, which is every flow\n // except InviteUser, they are not drawn.\n case EmbeddedFlowComponentType.UserSelect:\n return options.fetchUsers ? (\n <BaseUserSelect key={key} {...resourceSelectProps()} fetchUsers={options.fetchUsers} />\n ) : (\n skipUnsupported('USER_SELECT')\n );\n\n case EmbeddedFlowComponentType.AuthFlowSelect:\n return options.fetchAuthFlows ? (\n <BaseAuthFlowSelect key={key} {...resourceSelectProps()} fetchAuthFlows={options.fetchAuthFlows} />\n ) : (\n skipUnsupported('AUTH_FLOW_SELECT')\n );\n\n case EmbeddedFlowComponentType.UserTypeSelect:\n return options.fetchUserTypes ? (\n <BaseUserTypeSelect key={key} {...resourceSelectProps()} fetchUserTypes={options.fetchUserTypes} />\n ) : (\n skipUnsupported('USER_TYPE_SELECT')\n );\n\n case EmbeddedFlowComponentType.Block: {\n if (component.components && component.components.length > 0) {\n const formClass: string = css({\n display: 'flex',\n flexDirection: 'column',\n gap: `calc(${theme?.vars?.spacing?.unit ?? '4px'} * 2)`,\n });\n\n const blockComponents: any = component.components\n .map((childComponent: any, index: any) =>\n createAuthComponentFromFlow(\n childComponent,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n authType,\n {\n ...options,\n key: childComponent.id || `${component.id}_${index}`,\n },\n ),\n )\n .filter(Boolean);\n\n // The submit button's `type=\"submit\"` (and pressing Enter in a field) would\n // otherwise trigger the browser's native form submission — a GET request to\n // the current URL with all field values (including passwords) as query params.\n // Actual submission is handled entirely via `onClick`/`onSubmit` above.\n return (\n <form\n id={component.id}\n key={key}\n className={cx(component.classes, formClass)}\n onSubmit={(event: FormEvent<HTMLFormElement>): void => event.preventDefault()}\n >\n {blockComponents}\n </form>\n );\n }\n return null;\n }\n\n case EmbeddedFlowComponentType.RichText: {\n const richTextAction: EmbeddedFlowComponentAction | undefined = component.action;\n\n const dispatchRichTextAction = (): void => {\n if (!richTextAction || !options.onSubmit) {\n return;\n }\n const eventTypeValue = String(richTextAction.eventType ?? EmbeddedFlowEventType.Submit);\n const shouldSkipValidation: boolean = eventTypeValue.toUpperCase() === String(EmbeddedFlowEventType.Trigger);\n const syntheticAction: EmbeddedFlowComponent = {\n eventType: eventTypeValue,\n id: `${component.id}_action`,\n ref: richTextAction.ref,\n type: EmbeddedFlowComponentType.Action,\n };\n const formData: Record<string, string> = {};\n Object.keys(formValues).forEach((field: string) => {\n formData[field] = formValues[field];\n });\n options.onSubmit(syntheticAction, formData, shouldSkipValidation);\n };\n\n // Sentinel-anchor contract: only anchors carrying `data-action-ref` equal to\n // richTextAction.ref dispatch the action. Anchors without the sentinel (or with\n // a non-matching one) are treated as ordinary links and are ignored here.\n const isMatchingSentinelAnchor = (anchor: HTMLAnchorElement): boolean =>\n anchor.getAttribute('data-action-ref') === richTextAction?.ref;\n\n const handleRichTextClick: React.MouseEventHandler<HTMLDivElement> | undefined = richTextAction\n ? (event: React.MouseEvent<HTMLDivElement>): void => {\n const anchor: HTMLAnchorElement | null = (event.target as HTMLElement).closest('a');\n if (!anchor || !isMatchingSentinelAnchor(anchor)) {\n return;\n }\n event.preventDefault();\n dispatchRichTextAction();\n }\n : undefined;\n\n const handleRichTextKeyDown: React.KeyboardEventHandler<HTMLDivElement> | undefined = richTextAction\n ? (event: React.KeyboardEvent<HTMLDivElement>): void => {\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n const anchor: HTMLAnchorElement | null = (event.target as HTMLElement).closest('a');\n if (!anchor || !isMatchingSentinelAnchor(anchor)) {\n return;\n }\n event.preventDefault();\n dispatchRichTextAction();\n }\n : undefined;\n\n return (\n // Sentinel anchors are made keyboard-operable via the container's onKeyDown\n // (Enter/Space activate the matching anchor). Authors should ensure the anchor\n // is focusable (`href` or `tabIndex`); the click+keydown delegation covers both\n // pointer and keyboard activation once focus lands on the anchor.\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n key={key}\n className={getRichTextClass()}\n onClick={handleRichTextClick}\n onKeyDown={handleRichTextKeyDown}\n // Manually sanitizes with `DOMPurify`.\n // IMPORTANT: DO NOT REMOVE OR MODIFY THIS SANITIZATION STEP.\n dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(resolveEmojiUrisInHtml(resolve(component.label)))}}\n />\n );\n }\n\n case EmbeddedFlowComponentType.Image: {\n const explicitHeight: string = resolve(component.height?.toString());\n const explicitWidth: string = resolve(component.width?.toString());\n return (\n <ImageComponent\n key={key}\n component={\n {\n config: {\n alt: resolve(component.alt) || resolve(component.label) || 'Image',\n height: explicitHeight || (options.inStack ? '50' : 'auto'),\n src: resolve(component.src),\n width: explicitWidth || (options.inStack ? '50' : '100%'),\n },\n } as any\n }\n formErrors={undefined!}\n formValues={undefined!}\n isFormValid={false}\n isLoading={false}\n onInputChange={(): void => {\n throw new Error('Function not implemented.');\n }}\n touchedFields={undefined!}\n />\n );\n }\n\n case EmbeddedFlowComponentType.Icon: {\n const iconName: string = component.name || '';\n const IconComponent: any = flowIconRegistry[iconName];\n if (!IconComponent) {\n logger.warn(`Unknown icon name: \"${iconName}\". Skipping render.`);\n return null;\n }\n return <IconComponent key={key} size={component.size || 24} color={component.color || 'currentColor'} />;\n }\n\n case EmbeddedFlowComponentType.Stack: {\n const direction: string = (component as any).direction || 'row';\n const gap: number = (component as any).gap ?? 2;\n const align: string = (component as any).align || 'center';\n const justify: string = (component as any).justify || 'flex-start';\n\n // `items` is the number of slots across the main axis and `direction` picks\n // that axis: with `row` it is the column count (items: 2 with four buttons\n // renders a 2 x 2 grid), and with `column` it is the row count and children\n // flow into further columns. Fewer than two slots keeps the flex layout, so\n // stacks authored before grid support are unaffected.\n const rawItems: string | number | undefined = component.items;\n const parsedItems: number =\n typeof rawItems === 'string' ? Number(rawItems) : typeof rawItems === 'number' ? rawItems : NaN;\n const items: number | null =\n Number.isFinite(parsedItems) && Math.floor(parsedItems) >= 2\n ? Math.min(Math.floor(parsedItems), MAX_STACK_ITEMS)\n : null;\n // CSS Grid has no reverse auto-flow, so the reverse variants fall back to\n // their base axis rather than silently becoming a row.\n const isColumn: boolean = direction.startsWith('column');\n const gridJustify: string = component.justify ?? 'stretch';\n // Equal `1fr` tracks fill the container, leaving `justify-content` no free\n // space to distribute. Content-sized tracks restore it, so every justify\n // value has a visible effect while the default stays an even split.\n const track: string = gridJustify === 'stretch' ? '1fr' : 'auto';\n\n const stackStyle: CSSProperties =\n items !== null\n ? {\n alignItems: component.align ?? 'stretch',\n display: 'grid',\n gap: `${gap * 0.5}rem`,\n gridAutoFlow: isColumn ? 'column' : 'row',\n justifyContent: gridJustify,\n width: '100%',\n ...(isColumn\n ? {gridTemplateRows: `repeat(${items}, ${track})`}\n : {gridTemplateColumns: `repeat(${items}, ${track})`}),\n }\n : {\n alignItems: align,\n display: 'flex',\n flexDirection: direction as CSSProperties['flexDirection'],\n flexWrap: 'wrap',\n gap: `${gap * 0.5}rem`,\n justifyContent: justify,\n };\n\n const stackClass: string = css(stackStyle as CSSInterpolation);\n\n const stackChildren: (ReactElement | null)[] = component.components\n ? component.components.map((childComponent: any, index: number) =>\n createAuthComponentFromFlow(\n childComponent,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n authType,\n {\n ...options,\n inStack: true,\n key: childComponent.id || `${component.id}_${index}`,\n },\n ),\n )\n : [];\n\n return (\n <div key={key} id={component.id} className={cx(component.classes, stackClass)}>\n {stackChildren}\n </div>\n );\n }\n\n case EmbeddedFlowComponentType.Consent: {\n const consentPromptRawData: ConsentPromptData | string | undefined = options.additionalData?.['consentPrompt'];\n\n return (\n <Consent\n key={key}\n consentData={consentPromptRawData as any}\n formValues={formValues}\n onInputChange={onInputChange}\n t={options.t}\n />\n );\n }\n\n case EmbeddedFlowComponentType.Timer: {\n const textTemplate: string = resolve((component as any).label) || 'Time remaining: {time}';\n const timeoutMs: number = Number(options.additionalData?.['stepTimeout']) || 0;\n const expiresIn: number = timeoutMs > 0 ? Math.max(0, Math.floor((timeoutMs - Date.now()) / 1000)) : 0;\n\n return <FlowTimer key={key} expiresIn={expiresIn} textTemplate={textTemplate} />;\n }\n\n case EmbeddedFlowComponentType.CopyableText: {\n const sourceKey: string | undefined = (component as any).source;\n const value: string = sourceKey && options.additionalData ? String(options.additionalData[sourceKey] ?? '') : '';\n const labelText: string | undefined = resolve((component as any).label) || undefined;\n\n return <CopyableText key={key} label={labelText} masked={Boolean(component.masked)} value={value} />;\n }\n\n case EmbeddedFlowComponentType.KeyValueList: {\n const sourceKey: string | undefined = component.source;\n const pairs: KeyValuePair[] = parseKeyValuePairs(\n sourceKey && options.additionalData ? options.additionalData[sourceKey] : undefined,\n ).map((pair: KeyValuePair) => ({...pair, label: resolve(pair.label)}));\n\n // An empty panel tells the user nothing, so a list with no pairs renders nothing at all.\n if (pairs.length === 0) {\n return null;\n }\n\n return <KeyValueList key={key} label={resolve(component.label) || undefined} pairs={pairs} />;\n }\n\n default:\n // Gracefully handle unsupported component types by returning null\n logger.warn(`Unsupported component type: ${component.type}. Skipping render.`);\n return null;\n }\n};\n\n/**\n * Processes an array of components and renders them as React elements for sign-in.\n */\nexport const renderSignInComponents = (\n components: EmbeddedFlowComponent[],\n formValues: Record<string, string>,\n touchedFields: Record<string, boolean>,\n formErrors: Record<string, string>,\n isLoading: boolean,\n isFormValid: boolean,\n resetForm: () => void,\n onInputChange: (name: string, value: string) => void,\n options?: {\n /** @internal */\n _customRenderers?: ComponentRendererMap;\n /** @internal */\n _theme?: any;\n /** Additional data from the flow response */\n additionalData?: Record<string, any>;\n buttonClassName?: string;\n inputClassName?: string;\n /** Flag to determine if the step timeline has expired */\n isTimeoutDisabled?: boolean;\n /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n meta?: FlowMetadataResponse | null;\n onInputBlur?: (name: string) => void;\n onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n size?: 'small' | 'medium' | 'large';\n /** Translation function for resolving {{t(...)}} expressions at render time */\n t?: UseTranslation['t'];\n variant?: any;\n /** Vendor namespace used to derive affix sentinel keys for prefix/postfix-bearing inputs. */\n vendor?: string;\n },\n): ReactElement[] =>\n components\n .map((component: any, index: any) =>\n createAuthComponentFromFlow(\n component,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n 'signin',\n {\n ...options,\n key: component.id || index,\n },\n ),\n )\n .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for sign-up.\n */\nexport const renderSignUpComponents = (\n components: EmbeddedFlowComponent[],\n formValues: Record<string, string>,\n touchedFields: Record<string, boolean>,\n formErrors: Record<string, string>,\n isLoading: boolean,\n isFormValid: boolean,\n resetForm: () => void,\n onInputChange: (name: string, value: string) => void,\n options?: {\n /** @internal */\n _customRenderers?: ComponentRendererMap;\n /** @internal */\n _theme?: any;\n /** Additional data from the flow response */\n additionalData?: Record<string, any>;\n buttonClassName?: string;\n inputClassName?: string;\n /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n meta?: FlowMetadataResponse | null;\n onInputBlur?: (name: string) => void;\n onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n size?: 'small' | 'medium' | 'large';\n /** Translation function for resolving {{t(...)}} expressions at render time */\n t?: UseTranslation['t'];\n variant?: any;\n /** Vendor namespace used to derive affix sentinel keys for prefix/postfix-bearing inputs. */\n vendor?: string;\n },\n): ReactElement[] =>\n components\n .map((component: any, index: any) =>\n createAuthComponentFromFlow(\n component,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n 'signup',\n {\n ...options,\n key: component.id || index,\n },\n ),\n )\n .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for recovery flow.\n */\nexport const renderRecoveryComponents = (\n components: EmbeddedFlowComponent[],\n formValues: Record<string, string>,\n touchedFields: Record<string, boolean>,\n formErrors: Record<string, string>,\n isLoading: boolean,\n isFormValid: boolean,\n resetForm: () => void,\n onInputChange: (name: string, value: string) => void,\n options?: {\n /** @internal */\n _customRenderers?: ComponentRendererMap;\n /** @internal */\n _theme?: any;\n /** Additional data from the flow response */\n additionalData?: Record<string, any>;\n buttonClassName?: string;\n inputClassName?: string;\n /** Flag to determine if the step timeline has expired */\n isTimeoutDisabled?: boolean;\n /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n meta?: FlowMetadataResponse | null;\n onInputBlur?: (name: string) => void;\n onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n size?: 'small' | 'medium' | 'large';\n /** Translation function for resolving {{t(...)}} expressions at render time */\n t?: UseTranslation['t'];\n variant?: any;\n /** Vendor namespace used to derive affix sentinel keys for prefix/postfix-bearing inputs. */\n vendor?: string;\n },\n): ReactElement[] =>\n components\n .map((component: any, index: any) =>\n createAuthComponentFromFlow(\n component,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n 'recovery',\n {\n ...options,\n key: component.id || index,\n },\n ),\n )\n .filter((x): x is ReactElement => x !== null);\n\n/**\n * Processes an array of components and renders them as React elements for invite user.\n * This is used by both InviteUser and AcceptInvite components.\n */\nexport const renderInviteUserComponents = (\n components: EmbeddedFlowComponent[],\n formValues: Record<string, string>,\n touchedFields: Record<string, boolean>,\n formErrors: Record<string, string>,\n isLoading: boolean,\n isFormValid: boolean,\n resetForm: () => void,\n onInputChange: (name: string, value: string) => void,\n options?: {\n /** @internal */\n _customRenderers?: ComponentRendererMap;\n /** @internal */\n _theme?: any;\n /** Additional data from the flow response */\n additionalData?: Record<string, any>;\n buttonClassName?: string;\n /** Function to fetch child organization units for OU_SELECT components. */\n fetchOrganizationUnitChildren?: (\n parentId: string,\n limit: number,\n offset: number,\n ) => Promise<OrganizationUnitListResponse>;\n inputClassName?: string;\n /** Data source for AUTH_FLOW_SELECT fields. */\n fetchAuthFlows?: FetchAuthFlows;\n /** Data source for USER_SELECT fields. */\n fetchUsers?: FetchUsers;\n /** Data source for USER_TYPE_SELECT fields. */\n fetchUserTypes?: FetchUserTypes;\n /** Flow metadata for resolving {{meta(...)}} expressions at render time */\n meta?: FlowMetadataResponse | null;\n onInputBlur?: (name: string) => void;\n /** Called with the error of a failed picker load. The form itself shows no error for it. */\n onPickerError?: (error: Error) => void;\n onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n size?: 'small' | 'medium' | 'large';\n /** Translation function for resolving {{t(...)}} expressions at render time */\n t?: UseTranslation['t'];\n variant?: any;\n /** Vendor namespace used to derive affix sentinel keys for prefix/postfix-bearing inputs. */\n vendor?: string;\n },\n): ReactElement[] =>\n components\n .map((component: any, index: any) =>\n createAuthComponentFromFlow(\n component,\n formValues,\n touchedFields,\n formErrors,\n isLoading,\n isFormValid,\n resetForm,\n onInputChange,\n 'signup',\n {\n ...options,\n key: component.id || index,\n },\n ),\n )\n .filter((x): x is ReactElement => x !== null);\n"],"mappings":"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AAK,oBAAoB;AAC9E,UAAO;;;;;;AAOb,MAAa,0BACX,YACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,YAuBA,WACG,KAAK,WAAgB,UACpB,4BACE,WACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,UACA;CACE,GAAG;CACH,KAAK,UAAU,MAAM;CACtB,CACF,CACF,CACA,QAAQ,MAAyB,MAAM,KAAK;;;;AAKjD,MAAa,0BACX,YACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,YAqBA,WACG,KAAK,WAAgB,UACpB,4BACE,WACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,UACA;CACE,GAAG;CACH,KAAK,UAAU,MAAM;CACtB,CACF,CACF,CACA,QAAQ,MAAyB,MAAM,KAAK;;;;AAKjD,MAAa,4BACX,YACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,YAuBA,WACG,KAAK,WAAgB,UACpB,4BACE,WACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,YACA;CACE,GAAG;CACH,KAAK,UAAU,MAAM;CACtB,CACF,CACF,CACA,QAAQ,MAAyB,MAAM,KAAK;;;;;AAMjD,MAAa,8BACX,YACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,YAmCA,WACG,KAAK,WAAgB,UACpB,4BACE,WACA,YACA,eACA,YACA,WACA,aACA,WACA,eACA,UACA;CACE,GAAG;CACH,KAAK,UAAU,MAAM;CACtB,CACF,CACF,CACA,QAAQ,MAAyB,MAAM,KAAK"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from "../../../styles/emotion.js";
|
|
2
|
-
import Info_default from "../../primitives/Icons/Info.js";
|
|
3
2
|
import Typography_default from "../../primitives/Typography/Typography.js";
|
|
3
|
+
import Info_default from "../../primitives/Icons/Info.js";
|
|
4
4
|
import Toggle_default from "../../primitives/Toggle/Toggle.js";
|
|
5
5
|
import ConsentCheckboxList_default, { getConsentOptionalKey } from "./ConsentCheckboxList.js";
|
|
6
6
|
import ConsentAuthorizationDetail_default from "./ConsentAuthorizationDetail.js";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { cx } from "../../../styles/emotion.js";
|
|
2
2
|
import useTheme_default from "../../../contexts/Theme/useTheme.js";
|
|
3
|
+
import Typography_default from "../Typography/Typography.js";
|
|
3
4
|
import Alert_styles_default from "./Alert.styles.js";
|
|
4
5
|
import CircleAlert_default from "../Icons/CircleAlert.js";
|
|
5
6
|
import CircleCheck_default from "../Icons/CircleCheck.js";
|
|
6
7
|
import Info_default from "../Icons/Info.js";
|
|
7
8
|
import TriangleAlert_default from "../Icons/TriangleAlert.js";
|
|
8
|
-
import Typography_default from "../Typography/Typography.js";
|
|
9
9
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
10
10
|
import { createContext, forwardRef, useContext } from "react";
|
|
11
11
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cx } from "../../../styles/emotion.js";
|
|
2
2
|
import useTheme_default from "../../../contexts/Theme/useTheme.js";
|
|
3
|
-
import Typography_default from "../Typography/Typography.js";
|
|
4
3
|
import Card_styles_default from "./Card.styles.js";
|
|
4
|
+
import Typography_default from "../Typography/Typography.js";
|
|
5
5
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
6
6
|
import { forwardRef } from "react";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|