@thunderid/react 0.13.0 → 1.0.0

package/dist/cjs/components/presentation/auth/AuthOptionFactory.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AuthOptionFactory.cjs","names":["logger: ReturnType<typeof createPackageComponentLogger>","richTextClassCache: string | undefined","authOptionIconClassCache: string | undefined","css","EmbeddedFlowComponentType","FieldType","providerId: any","providerMatches: any","theme: any","customRenderers: ComponentRendererMap","key: string | number","customRenderer: ComponentRenderer | undefined","identifier: string","value: string","error: string","fieldType: string","hasPrefixes: boolean","hasPostfix: boolean","prefixStateKey: string","affixPrefixKey","postfixStateKey: string","affixPostfixKey","defaultPrefixValue: string","selectedPrefix: string","AffixedField","cx","createField","actionId: string","eventType: string","buttonText: string","componentVariant: string","shouldSkipValidation: boolean","EmbeddedFlowEventType","buttonType: HTMLButtonElement['type']","formData: Record<string, any>","consentPrompt: ConsentPromptData | undefined","isDeny: boolean","decisions: ConsentDecisions","ConsentConstants","getConsentOptionalKey","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","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","DOMPurify","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"],"sources":["../../../../../src/components/presentation/auth/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} from '@thunderid/browser';\nimport DOMPurify from 'dompurify';\nimport {ChangeEvent, cloneElement, CSSProperties, ReactElement} from 'react';\nimport {\n  ComponentRenderer,\n  ComponentRenderContext,\n  ComponentRendererMap,\n} from '../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport {UseTranslation} from '../../../hooks/useTranslation';\nimport {css, cx} from '../../../styles/emotion';\nimport Consent from '../../adapters/Consent';\nimport {getConsentOptionalKey} from '../../adapters/ConsentCheckboxList';\nimport FacebookButton from '../../adapters/FacebookButton';\nimport FlowTimer from '../../adapters/FlowTimer';\nimport GitHubButton from '../../adapters/GitHubButton';\nimport GoogleButton from '../../adapters/GoogleButton';\nimport ImageComponent from '../../adapters/ImageComponent';\nimport LinkedInButton from '../../adapters/LinkedInButton';\nimport MicrosoftButton from '../../adapters/MicrosoftButton';\nimport SignInWithEthereumButton from '../../adapters/SignInWithEthereumButton';\nimport SmsOtpButton from '../../adapters/SmsOtpButton';\nimport {createField} from '../../factories/FieldFactory';\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 AffixedField from '../../primitives/AffixedField/AffixedField';\nimport Select from '../../primitives/Select/Select';\nimport {affixPostfixKey, affixPrefixKey} from '../../../utils/composeAffixedInputs';\nimport Typography from '../../primitives/Typography/Typography';\nimport {TypographyVariant} from '../../primitives/Typography/Typography.styles';\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    /** 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 | 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    return customRenderer(component, renderCtx);\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  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      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.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      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                        approved: !isDeny && formValues[getConsentOptionalKey(p.purposeId, e.name)] === 'true',\n                        name: e.name,\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            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      logger.warn('OU_SELECT component type is not supported. Skipping render.');\n      return null;\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        return (\n          <form id={component.id} key={key} className={cx(component.classes, formClass)}>\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          config={component.config}\n          meta={options.meta}\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} value={value} />;\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    /** 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"],"mappings":"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"}
+{"version":3,"file":"AuthOptionFactory.cjs","names":["logger: ReturnType<typeof createPackageComponentLogger>","richTextClassCache: string | undefined","authOptionIconClassCache: string | undefined","css","EmbeddedFlowComponentType","FieldType","providerId: any","providerMatches: any","theme: any","customRenderers: ComponentRendererMap","key: string | number","customRenderer: ComponentRenderer | undefined","identifier: string","value: string","error: string","fieldType: string","hasPrefixes: boolean","hasPostfix: boolean","prefixStateKey: string","affixPrefixKey","postfixStateKey: string","affixPostfixKey","defaultPrefixValue: string","selectedPrefix: string","AffixedField","cx","createField","reportedLength: number","otpLength: number | undefined","numericOnly: boolean","actionId: string","eventType: string","buttonText: string","componentVariant: string","shouldSkipValidation: boolean","EmbeddedFlowEventType","buttonType: HTMLButtonElement['type']","formData: Record<string, any>","consentPrompt: ConsentPromptData | undefined","isDeny: boolean","decisions: ConsentDecisions","ConsentConstants","getConsentOptionalKey","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","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","DOMPurify","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"],"sources":["../../../../../src/components/presentation/auth/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} from '@thunderid/browser';\nimport DOMPurify from 'dompurify';\nimport {ChangeEvent, cloneElement, CSSProperties, ReactElement} from 'react';\nimport {\n  ComponentRenderer,\n  ComponentRenderContext,\n  ComponentRendererMap,\n} from '../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport {UseTranslation} from '../../../hooks/useTranslation';\nimport {css, cx} from '../../../styles/emotion';\nimport Consent from '../../adapters/Consent';\nimport {getConsentOptionalKey} from '../../adapters/ConsentCheckboxList';\nimport FacebookButton from '../../adapters/FacebookButton';\nimport FlowTimer from '../../adapters/FlowTimer';\nimport GitHubButton from '../../adapters/GitHubButton';\nimport GoogleButton from '../../adapters/GoogleButton';\nimport ImageComponent from '../../adapters/ImageComponent';\nimport LinkedInButton from '../../adapters/LinkedInButton';\nimport MicrosoftButton from '../../adapters/MicrosoftButton';\nimport SignInWithEthereumButton from '../../adapters/SignInWithEthereumButton';\nimport SmsOtpButton from '../../adapters/SmsOtpButton';\nimport {createField} from '../../factories/FieldFactory';\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 AffixedField from '../../primitives/AffixedField/AffixedField';\nimport Select from '../../primitives/Select/Select';\nimport {affixPostfixKey, affixPrefixKey} from '../../../utils/composeAffixedInputs';\nimport Typography from '../../primitives/Typography/Typography';\nimport {TypographyVariant} from '../../primitives/Typography/Typography.styles';\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    /** 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 | 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    return customRenderer(component, renderCtx);\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  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      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                        approved: !isDeny && formValues[getConsentOptionalKey(p.purposeId, e.name)] === 'true',\n                        name: e.name,\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            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      logger.warn('OU_SELECT component type is not supported. Skipping render.');\n      return null;\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        return (\n          <form id={component.id} key={key} className={cx(component.classes, formClass)}>\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          config={component.config}\n          meta={options.meta}\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} value={value} />;\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    /** 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"],"mappings":"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ACA,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,YA2BA,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"}

package/dist/cjs/components/primitives/OtpField/OtpField.cjs

@@ -12,7 +12,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/components/primitives/OtpField/OtpField.tsx
-const OtpField = ({ label, error, className, required, disabled, helperText, length = 6, value = "", onChange, onComplete, type = "text", placeholder = "", style = {}, autoFocus = false, pattern }) => {
+const OtpField = ({ label, error, className, required, disabled, helperText, length = 6, value = "", onChange, onComplete, type = "text", placeholder = "", style = {}, autoFocus = false, pattern, uppercase = false }) => {
 	const { theme, colorScheme } = require_useTheme.default();
 	const styles = require_OtpField_styles.default(theme, colorScheme, !!disabled, !!error, length);
 	const [otp, setOtp] = (0, react.useState)(Array(length).fill(""));
@@ -31,7 +31,7 @@ const OtpField = ({ label, error, className, required, disabled, helperText, len
 		if (autoFocus && inputRefs.current[0]) inputRefs.current[0].focus();
 	}, [autoFocus]);
 	const handleChange = (index, event) => {
-		const newValue = event.target.value;
+		const newValue = uppercase ? event.target.value.toUpperCase() : event.target.value;
 		if (newValue.length > 1) return;
 		if (type === "number" && newValue && !/^\d$/.test(newValue)) return;
 		if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;
@@ -66,7 +66,8 @@ const OtpField = ({ label, error, className, required, disabled, helperText, len
 	};
 	const handlePaste = (event) => {
 		event.preventDefault();
-		const pastedData = event.clipboardData.getData("text").slice(0, length);
+		const rawData = event.clipboardData.getData("text");
+		const pastedData = uppercase ? rawData.toUpperCase() : rawData;
 		let validData = "";
 		Array.from(pastedData).forEach((char) => {
 			if (type === "number" && !/^\d$/.test(char)) return;

package/dist/cjs/components/primitives/OtpField/OtpField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OtpField.cjs","names":["OtpField: FC<OtpInputProps>","useTheme","styles: Record<string, string>","useStyles","inputRefs: MutableRefObject<HTMLInputElement[]>","newOtp: string[]","newValue: string","otpValue: string","pastedData: string","nextEmptyIndex: number","focusIndex: number","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  ClipboardEvent,\n  FC,\n  KeyboardEvent,\n  ChangeEvent,\n  MutableRefObject,\n  useRef,\n  useEffect,\n  useState,\n  CSSProperties,\n} from 'react';\nimport useStyles from './OtpField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport type OtpFieldType = 'text' | 'number' | 'password';\n\nexport interface OtpInputProps {\n  /**\n   * Auto focus the first input on mount\n   */\n  autoFocus?: boolean;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the OTP input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the OTP input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the OTP input\n   */\n  label?: string;\n  /**\n   * Number of OTP input fields\n   */\n  length?: number;\n  /**\n   * Callback function called when OTP value changes\n   */\n  onChange?: (event: {target: {value: string}}) => void;\n  /**\n   * Callback function called when OTP input is complete\n   */\n  onComplete?: (value: string) => void;\n  /**\n   * Pattern for numeric input validation\n   */\n  pattern?: string;\n  /**\n   * Placeholder character for each input field\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n  /**\n   * Type of input (text, number, password)\n   */\n  type?: OtpFieldType;\n  /**\n   * Current OTP value\n   */\n  value?: string;\n}\n\nconst OtpField: FC<OtpInputProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  length = 6,\n  value = '',\n  onChange,\n  onComplete,\n  type = 'text',\n  placeholder = '',\n  style = {},\n  autoFocus = false,\n  pattern,\n}: OtpInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, length);\n  const [otp, setOtp] = useState<string[]>(Array(length).fill(''));\n  const inputRefs: MutableRefObject<HTMLInputElement[]> = useRef<HTMLInputElement[]>([]);\n\n  useEffect(() => {\n    inputRefs.current = inputRefs.current.slice(0, length);\n  }, [length]);\n\n  useEffect(() => {\n    if (value) {\n      const newOtp: string[] = value.split('').slice(0, length);\n      while (newOtp.length < length) {\n        newOtp.push('');\n      }\n      setOtp(newOtp);\n    } else {\n      setOtp(Array(length).fill(''));\n    }\n  }, [value, length]);\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0]) {\n      inputRefs.current[0].focus();\n    }\n  }, [autoFocus]);\n\n  const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>): void => {\n    const newValue: string = event.target.value;\n\n    if (newValue.length > 1) return;\n\n    if (type === 'number' && newValue && !/^\\d$/.test(newValue)) return;\n\n    if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;\n\n    const newOtp: string[] = [...otp];\n    newOtp[index] = newValue;\n    setOtp(newOtp);\n\n    const otpValue: string = newOtp.join('');\n\n    onChange?.({target: {value: otpValue}});\n\n    if (newValue && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    }\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(otpValue);\n    }\n  };\n\n  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>): void => {\n    if (event.key === 'Backspace') {\n      if (!otp[index] && index > 0) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index - 1] = '';\n        setOtp(newOtp);\n        inputRefs.current[index - 1]?.focus();\n        onChange?.({target: {value: newOtp.join('')}});\n      } else if (otp[index]) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index] = '';\n        setOtp(newOtp);\n        onChange?.({target: {value: newOtp.join('')}});\n      }\n    } else if (event.key === 'ArrowLeft' && index > 0) {\n      inputRefs.current[index - 1]?.focus();\n    } else if (event.key === 'ArrowRight' && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n\n      if (otp.every((digit: string) => digit !== '') && onComplete) {\n        onComplete(otp.join(''));\n      }\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n    event.preventDefault();\n\n    const pastedData: string = event.clipboardData.getData('text').slice(0, length);\n\n    let validData = '';\n\n    Array.from(pastedData).forEach((char: string) => {\n      if (type === 'number' && !/^\\d$/.test(char)) return;\n      if (pattern && !new RegExp(pattern).test(char)) return;\n      validData += char;\n    });\n\n    const newOtp: string[] = Array(length).fill('');\n\n    for (let i = 0; i < Math.min(validData.length, length); i += 1) {\n      newOtp[i] = validData[i];\n    }\n\n    setOtp(newOtp);\n    onChange?.({target: {value: newOtp.join('')}});\n\n    const nextEmptyIndex: number = newOtp.findIndex((digit: string) => digit === '');\n    const focusIndex: number = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;\n\n    inputRefs.current[focusIndex]?.focus();\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(newOtp.join(''));\n    }\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('otp-field')), className)}\n      helperTextAlign=\"center\"\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input-container')), styles['inputContainer'])}>\n        {Array.from({length}, (_: unknown, index: number) => (\n          <input\n            key={index}\n            ref={(el: HTMLInputElement | null): void => {\n              if (el) inputRefs.current[index] = el;\n            }}\n            type={type === 'password' ? 'password' : 'text'}\n            inputMode={type === 'number' ? 'numeric' : 'text'}\n            value={otp[index] || ''}\n            onChange={(event: ChangeEvent<HTMLInputElement>): void => handleChange(index, event)}\n            onKeyDown={(event: KeyboardEvent<HTMLInputElement>): void => handleKeyDown(index, event)}\n            onPaste={handlePaste}\n            className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input')), styles['input'], {\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'error'))]: !!error,\n              [styles['inputError']]: !!error,\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'disabled'))]: !!disabled,\n              [styles['inputDisabled']]: !!disabled,\n            })}\n            maxLength={1}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-label={`${label || 'OTP'} digit ${index + 1}`}\n            aria-invalid={!!error}\n            aria-required={required}\n            autoComplete=\"one-time-code\"\n          />\n        ))}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default OtpField;\n"],"mappings":";;;;;;;;;;;;;;AAsFA,MAAMA,YAA+B,EACnC,OACA,OACA,WACA,UACA,UACA,YACA,SAAS,GACT,QAAQ,IACR,UACA,YACA,OAAO,QACP,cAAc,IACd,QAAQ,EAAE,EACV,YAAY,OACZ,cACmB;CACnB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,gCAAU,OAAO,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,OAAO;CACjG,MAAM,CAAC,KAAK,8BAA6B,MAAM,OAAO,CAAC,KAAK,GAAG,CAAC;CAChE,MAAMC,8BAA6E,EAAE,CAAC;AAEtF,4BAAgB;AACd,YAAU,UAAU,UAAU,QAAQ,MAAM,GAAG,OAAO;IACrD,CAAC,OAAO,CAAC;AAEZ,4BAAgB;AACd,MAAI,OAAO;GACT,MAAMC,SAAmB,MAAM,MAAM,GAAG,CAAC,MAAM,GAAG,OAAO;AACzD,UAAO,OAAO,SAAS,OACrB,QAAO,KAAK,GAAG;AAEjB,UAAO,OAAO;QAEd,QAAO,MAAM,OAAO,CAAC,KAAK,GAAG,CAAC;IAE/B,CAAC,OAAO,OAAO,CAAC;AAEnB,4BAAgB;AACd,MAAI,aAAa,UAAU,QAAQ,GACjC,WAAU,QAAQ,GAAG,OAAO;IAE7B,CAAC,UAAU,CAAC;CAEf,MAAM,gBAAgB,OAAe,UAA+C;EAClF,MAAMC,WAAmB,MAAM,OAAO;AAEtC,MAAI,SAAS,SAAS,EAAG;AAEzB,MAAI,SAAS,YAAY,YAAY,CAAC,OAAO,KAAK,SAAS,CAAE;AAE7D,MAAI,WAAW,YAAY,CAAC,IAAI,OAAO,QAAQ,CAAC,KAAK,SAAS,CAAE;EAEhE,MAAMD,SAAmB,CAAC,GAAG,IAAI;AACjC,SAAO,SAAS;AAChB,SAAO,OAAO;EAEd,MAAME,WAAmB,OAAO,KAAK,GAAG;AAExC,aAAW,EAAC,QAAQ,EAAC,OAAO,UAAS,EAAC,CAAC;AAEvC,MAAI,YAAY,QAAQ,SAAS,EAC/B,WAAU,QAAQ,QAAQ,IAAI,OAAO;AAGvC,MAAI,OAAO,OAAO,UAAkB,UAAU,GAAG,IAAI,WACnD,YAAW,SAAS;;CAIxB,MAAM,iBAAiB,OAAe,UAAiD;AACrF,MAAI,MAAM,QAAQ,aAChB;OAAI,CAAC,IAAI,UAAU,QAAQ,GAAG;IAC5B,MAAMF,SAAmB,CAAC,GAAG,IAAI;AAEjC,WAAO,QAAQ,KAAK;AACpB,WAAO,OAAO;AACd,cAAU,QAAQ,QAAQ,IAAI,OAAO;AACrC,eAAW,EAAC,QAAQ,EAAC,OAAO,OAAO,KAAK,GAAG,EAAC,EAAC,CAAC;cACrC,IAAI,QAAQ;IACrB,MAAMA,SAAmB,CAAC,GAAG,IAAI;AAEjC,WAAO,SAAS;AAChB,WAAO,OAAO;AACd,eAAW,EAAC,QAAQ,EAAC,OAAO,OAAO,KAAK,GAAG,EAAC,EAAC,CAAC;;aAEvC,MAAM,QAAQ,eAAe,QAAQ,EAC9C,WAAU,QAAQ,QAAQ,IAAI,OAAO;WAC5B,MAAM,QAAQ,gBAAgB,QAAQ,SAAS,EACxD,WAAU,QAAQ,QAAQ,IAAI,OAAO;WAC5B,MAAM,QAAQ,SAAS;AAChC,SAAM,gBAAgB;AAEtB,OAAI,IAAI,OAAO,UAAkB,UAAU,GAAG,IAAI,WAChD,YAAW,IAAI,KAAK,GAAG,CAAC;;;CAK9B,MAAM,eAAe,UAAkD;AACrE,QAAM,gBAAgB;EAEtB,MAAMG,aAAqB,MAAM,cAAc,QAAQ,OAAO,CAAC,MAAM,GAAG,OAAO;EAE/E,IAAI,YAAY;AAEhB,QAAM,KAAK,WAAW,CAAC,SAAS,SAAiB;AAC/C,OAAI,SAAS,YAAY,CAAC,OAAO,KAAK,KAAK,CAAE;AAC7C,OAAI,WAAW,CAAC,IAAI,OAAO,QAAQ,CAAC,KAAK,KAAK,CAAE;AAChD,gBAAa;IACb;EAEF,MAAMH,SAAmB,MAAM,OAAO,CAAC,KAAK,GAAG;AAE/C,OAAK,IAAI,IAAI,GAAG,IAAI,KAAK,IAAI,UAAU,QAAQ,OAAO,EAAE,KAAK,EAC3D,QAAO,KAAK,UAAU;AAGxB,SAAO,OAAO;AACd,aAAW,EAAC,QAAQ,EAAC,OAAO,OAAO,KAAK,GAAG,EAAC,EAAC,CAAC;EAE9C,MAAMI,iBAAyB,OAAO,WAAW,UAAkB,UAAU,GAAG;EAChF,MAAMC,aAAqB,mBAAmB,KAAK,iBAAiB,SAAS;AAE7E,YAAU,QAAQ,aAAa,OAAO;AAEtC,MAAI,OAAO,OAAO,UAAkB,UAAU,GAAG,IAAI,WACnD,YAAW,OAAO,KAAK,GAAG,CAAC;;AAI/B,QACE,4CAACC;EACQ;EACK;EACZ,WAAWC,kGAAgC,YAAY,CAAC,EAAE,UAAU;EACpE,iBAAgB;EACT;aAEN,SACC,2CAACC;GAAqB;GAAU,OAAO,CAAC,CAAC;aACtC;IACU,EAEf,2CAAC;GAAI,WAAWD,kGAAgC,aAAa,kBAAkB,CAAC,EAAE,OAAO,kBAAkB;aACxG,MAAM,KAAK,EAAC,QAAO,GAAG,GAAY,UACjC,2CAAC;IAEC,MAAM,OAAsC;AAC1C,SAAI,GAAI,WAAU,QAAQ,SAAS;;IAErC,MAAM,SAAS,aAAa,aAAa;IACzC,WAAW,SAAS,WAAW,YAAY;IAC3C,OAAO,IAAI,UAAU;IACrB,WAAW,UAA+C,aAAa,OAAO,MAAM;IACpF,YAAY,UAAiD,cAAc,OAAO,MAAM;IACxF,SAAS;IACT,WAAWA,kGAAgC,aAAa,QAAQ,CAAC,EAAE,OAAO,UAAU;qFACpD,aAAa,SAAS,QAAQ,CAAC,GAAG,CAAC,CAAC;MACjE,OAAO,gBAAgB,CAAC,CAAC;qFACI,aAAa,SAAS,WAAW,CAAC,GAAG,CAAC,CAAC;MACpE,OAAO,mBAAmB,CAAC,CAAC;KAC9B,CAAC;IACF,WAAW;IACE;IACH;IACV,cAAY,GAAG,SAAS,MAAM,SAAS,QAAQ;IAC/C,gBAAc,CAAC,CAAC;IAChB,iBAAe;IACf,cAAa;MAtBR,MAuBL,CACF;IACE;GACM;;AAIlB,uBAAe"}
+{"version":3,"file":"OtpField.cjs","names":["OtpField: FC<OtpInputProps>","useTheme","styles: Record<string, string>","useStyles","inputRefs: MutableRefObject<HTMLInputElement[]>","newOtp: string[]","newValue: string","otpValue: string","rawData: string","pastedData: string","nextEmptyIndex: number","focusIndex: number","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  ClipboardEvent,\n  FC,\n  KeyboardEvent,\n  ChangeEvent,\n  MutableRefObject,\n  useRef,\n  useEffect,\n  useState,\n  CSSProperties,\n} from 'react';\nimport useStyles from './OtpField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport type OtpFieldType = 'text' | 'number' | 'password';\n\nexport interface OtpInputProps {\n  /**\n   * Auto focus the first input on mount\n   */\n  autoFocus?: boolean;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the OTP input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the OTP input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the OTP input\n   */\n  label?: string;\n  /**\n   * Number of OTP input fields\n   */\n  length?: number;\n  /**\n   * Callback function called when OTP value changes\n   */\n  onChange?: (event: {target: {value: string}}) => void;\n  /**\n   * Callback function called when OTP input is complete\n   */\n  onComplete?: (value: string) => void;\n  /**\n   * Pattern for numeric input validation\n   */\n  pattern?: string;\n  /**\n   * Placeholder character for each input field\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n  /**\n   * Type of input (text, number, password)\n   */\n  type?: OtpFieldType;\n  /**\n   * Upper-case entered characters before emitting them\n   */\n  uppercase?: boolean;\n  /**\n   * Current OTP value\n   */\n  value?: string;\n}\n\nconst OtpField: FC<OtpInputProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  length = 6,\n  value = '',\n  onChange,\n  onComplete,\n  type = 'text',\n  placeholder = '',\n  style = {},\n  autoFocus = false,\n  pattern,\n  uppercase = false,\n}: OtpInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, length);\n  const [otp, setOtp] = useState<string[]>(Array(length).fill(''));\n  const inputRefs: MutableRefObject<HTMLInputElement[]> = useRef<HTMLInputElement[]>([]);\n\n  useEffect(() => {\n    inputRefs.current = inputRefs.current.slice(0, length);\n  }, [length]);\n\n  useEffect(() => {\n    if (value) {\n      const newOtp: string[] = value.split('').slice(0, length);\n      while (newOtp.length < length) {\n        newOtp.push('');\n      }\n      setOtp(newOtp);\n    } else {\n      setOtp(Array(length).fill(''));\n    }\n  }, [value, length]);\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0]) {\n      inputRefs.current[0].focus();\n    }\n  }, [autoFocus]);\n\n  const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>): void => {\n    const newValue: string = uppercase ? event.target.value.toUpperCase() : event.target.value;\n\n    if (newValue.length > 1) return;\n\n    if (type === 'number' && newValue && !/^\\d$/.test(newValue)) return;\n\n    if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;\n\n    const newOtp: string[] = [...otp];\n    newOtp[index] = newValue;\n    setOtp(newOtp);\n\n    const otpValue: string = newOtp.join('');\n\n    onChange?.({target: {value: otpValue}});\n\n    if (newValue && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    }\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(otpValue);\n    }\n  };\n\n  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>): void => {\n    if (event.key === 'Backspace') {\n      if (!otp[index] && index > 0) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index - 1] = '';\n        setOtp(newOtp);\n        inputRefs.current[index - 1]?.focus();\n        onChange?.({target: {value: newOtp.join('')}});\n      } else if (otp[index]) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index] = '';\n        setOtp(newOtp);\n        onChange?.({target: {value: newOtp.join('')}});\n      }\n    } else if (event.key === 'ArrowLeft' && index > 0) {\n      inputRefs.current[index - 1]?.focus();\n    } else if (event.key === 'ArrowRight' && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n\n      if (otp.every((digit: string) => digit !== '') && onComplete) {\n        onComplete(otp.join(''));\n      }\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n    event.preventDefault();\n\n    const rawData: string = event.clipboardData.getData('text');\n    // Filter first and let the copy loop below bound the result, so surrounding text such as\n    // \"Your code is 123456\" does not push the code itself past the cut-off.\n    const pastedData: string = uppercase ? rawData.toUpperCase() : rawData;\n\n    let validData = '';\n\n    Array.from(pastedData).forEach((char: string) => {\n      if (type === 'number' && !/^\\d$/.test(char)) return;\n      if (pattern && !new RegExp(pattern).test(char)) return;\n      validData += char;\n    });\n\n    const newOtp: string[] = Array(length).fill('');\n\n    for (let i = 0; i < Math.min(validData.length, length); i += 1) {\n      newOtp[i] = validData[i];\n    }\n\n    setOtp(newOtp);\n    onChange?.({target: {value: newOtp.join('')}});\n\n    const nextEmptyIndex: number = newOtp.findIndex((digit: string) => digit === '');\n    const focusIndex: number = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;\n\n    inputRefs.current[focusIndex]?.focus();\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(newOtp.join(''));\n    }\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('otp-field')), className)}\n      helperTextAlign=\"center\"\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input-container')), styles['inputContainer'])}>\n        {Array.from({length}, (_: unknown, index: number) => (\n          <input\n            key={index}\n            ref={(el: HTMLInputElement | null): void => {\n              if (el) inputRefs.current[index] = el;\n            }}\n            type={type === 'password' ? 'password' : 'text'}\n            inputMode={type === 'number' ? 'numeric' : 'text'}\n            value={otp[index] || ''}\n            onChange={(event: ChangeEvent<HTMLInputElement>): void => handleChange(index, event)}\n            onKeyDown={(event: KeyboardEvent<HTMLInputElement>): void => handleKeyDown(index, event)}\n            onPaste={handlePaste}\n            className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input')), styles['input'], {\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'error'))]: !!error,\n              [styles['inputError']]: !!error,\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'disabled'))]: !!disabled,\n              [styles['inputDisabled']]: !!disabled,\n            })}\n            maxLength={1}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-label={`${label || 'OTP'} digit ${index + 1}`}\n            aria-invalid={!!error}\n            aria-required={required}\n            autoComplete=\"one-time-code\"\n          />\n        ))}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default OtpField;\n"],"mappings":"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"}

package/dist/cjs/contexts/ThunderID/ThunderIDContext.cjs

@@ -43,6 +43,7 @@ const ThunderIDContext = (0, react.createContext)({
 	signUp: () => Promise.resolve({}),
 	signUpUrl: void 0,
 	user: null,
+	userSchema: null,
 	vendor: __thunderid_browser.VendorConstants.VENDOR_PREFIX
 });
 ThunderIDContext.displayName = "ThunderIDContext";

package/dist/cjs/contexts/ThunderID/ThunderIDContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThunderIDContext.cjs","names":["ThunderIDContext: Context<ThunderIDContextProps | null>","VendorConstants"],"sources":["../../../../src/contexts/ThunderID/ThunderIDContext.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  FlowMetadataResponse,\n  HttpRequestConfig,\n  HttpResponse,\n  IdToken,\n  OIDCDiscoveryApiResponse,\n  SignInOptions,\n  TokenExchangeRequestConfig,\n  TokenResponse,\n  VendorConstants,\n} from '@thunderid/browser';\nimport {Context, createContext} from 'react';\nimport {ThunderIDReactConfig} from '../../models/config';\nimport ThunderIDReactClient from '../../ThunderIDReactClient';\n\n/**\n * Props interface of {@link ThunderIDContext}\n */\nexport type ThunderIDContextProps = {\n  afterSignInUrl: string | undefined;\n  applicationId: string | undefined;\n  baseUrl: string | undefined;\n  clientId: string | undefined;\n  /**\n   * Optional endpoint URL overrides from the client config. Used to resolve resource-server\n   * endpoints (e.g. flow/user-management) independently of `baseUrl` — see `resolveResourceEndpoint`.\n   */\n  endpoints?: ThunderIDReactConfig['endpoints'];\n  preferences?: ThunderIDReactConfig['preferences'];\n  scopes: string | string[] | undefined;\n  /**\n   * OIDC discovery data.\n   */\n  discovery: {\n    /**\n     * The response from the `.well-known/openid-configuration` endpoint.\n     * Contains server capabilities, supported endpoints, and metadata.\n     * `null` while loading or when discovery has not been fetched.\n     */\n    wellKnown: OIDCDiscoveryApiResponse | null;\n  };\n  /**\n   * Swaps the current access token with a new one based on the provided configuration (with a grant type).\n   * @param config - Configuration for the token exchange request.\n   * @returns A promise that resolves to the token response or the raw response.\n   */\n  exchangeToken: (config: TokenExchangeRequestConfig) => Promise<TokenResponse | Response>;\n  /**\n   * Retrieves the access token stored in the storage.\n   * This function retrieves the access token and returns it.\n   * @remarks This does not work in the `webWorker` or any other worker environment.\n   * @returns A promise that resolves to the access token.\n   */\n  getAccessToken: () => Promise<string>;\n  /**\n   * Function to retrieve the decoded ID token.\n   * This function decodes the ID token and returns its payload.\n   * It can be used to access user claims and other information contained in the ID token.\n   *\n   * @returns A promise that resolves to the decoded ID token payload.\n   */\n  getDecodedIdToken: () => Promise<IdToken>;\n  /**\n   * Function to retrieve the ID token.\n   * This function retrieves the ID token and returns it.\n   *\n   * @returns A promise that resolves to the ID token.\n   */\n  getIdToken: () => Promise<string>;\n  /**\n   * Returns the underlying StorageManager instance for reading and writing SDK-managed storage.\n   */\n  getStorageManager: () => Promise<any>;\n  /**\n   * HTTP request function to make API calls.\n   * @param requestConfig - Configuration for the HTTP request.\n   * @returns A promise that resolves to the HTTP response.\n   */\n  http: {\n    /**\n     * Makes an HTTP request using the provided configuration.\n     * @param requestConfig - Configuration for the HTTP request.\n     * @returns A promise that resolves to the HTTP response.\n     */\n    request: (requestConfig?: HttpRequestConfig) => Promise<HttpResponse<any>>;\n    /**\n     * Makes multiple HTTP requests based on the provided configuration.\n     * @param requestConfigs - Set of configurations for the HTTP requests.\n     * @returns A promise that resolves to an array of HTTP responses.\n     */\n    requestAll: (requestConfigs?: HttpRequestConfig[]) => Promise<HttpResponse<any>[]>;\n  };\n  /**\n   * Instance ID for multi-instance support.\n   */\n  instanceId: number;\n  isInitialized: boolean;\n  /**\n   * Flag indicating whether the SDK is working in the background.\n   */\n  isLoading: boolean;\n  /**\n   * Flag indicating whether flow metadata is currently being fetched.\n   */\n  isMetaLoading: boolean;\n  /**\n   * Flag indicating whether the user is signed in or not.\n   */\n  isSignedIn: boolean;\n\n  /**\n   * Flow metadata returned by `GET /flow/meta` (v2 platform only).\n   * `null` while loading or when `resolveFromMeta` is disabled.\n   */\n  meta: FlowMetadataResponse | null;\n\n  organizationHandle: string | undefined;\n\n  /**\n   * Re-initializes the client with a new configuration.\n   *\n   * @remarks\n   * This can be partial configuration to update only specific fields.\n   *\n   * @param config - New configuration to re-initialize the client with.\n   * @returns Promise resolving to boolean indicating success.\n   */\n  reInitialize: (config: Partial<ThunderIDReactConfig>) => Promise<boolean>;\n\n  /**\n   * Recovery function to initiate the account/password recovery flow.\n   */\n  recover: (...args: any[]) => Promise<any>;\n\n  /**\n   * Resolves `{{ t(key) }}` and `{{ meta(path) }}` template expressions in a string,\n   * using the current i18n translation function and flow metadata from context.\n   *\n   * Useful in render-props patterns where consumers need to expand template strings\n   * that come from the server (e.g. component labels, placeholders, headings).\n   *\n   * @example\n   * const {resolveFlowTemplateLiterals} = useThunderID();\n   * resolveFlowTemplateLiterals('{{ t(signin.heading.label) }}') // → 'Sign In'\n   * resolveFlowTemplateLiterals('Login to {{ meta(application.name) }}') // → 'Login to My App'\n   */\n  resolveFlowTemplateLiterals: (text: string | undefined) => string;\n\n  /**\n   * Sign-in function to initiate the authentication process.\n   * @remark This is the programmatic version of the `SignInButton` component.\n   * TODO: Fix the types.\n   */\n  signIn: (...args: any) => Promise<any>;\n\n  /**\n   * Optional additional parameters to be sent in the sign-in request.\n   * This can include custom parameters that your authorization server supports.\n   * These parameters will be included in the authorization request sent to the server.\n   * If not provided, no additional parameters will be sent.\n   *\n   * @example\n   * signInOptions: { prompt: \"login\", fidp: \"OrganizationSSO\" }\n   */\n  signInOptions?: SignInOptions;\n\n  /**\n   * Optional token request configuration. params are appended to the token endpoint POST body.\n   *\n   * @example\n   * tokenRequest: { params: { resource: \"https://api.example.com\" } }\n   */\n  tokenRequest?: {\n    params?: Record<string, unknown>;\n  };\n\n  /**\n   * Silent sign-in function to re-authenticate the user without user interaction.\n   * @remark This is the programmatic version of the `SilentSignIn` component.\n   */\n  signInSilently: ThunderIDReactClient['signInSilently'];\n\n  signInUrl: string | undefined;\n  /**\n   * Sign-out function to terminate the authentication session.\n   * @remark This is the programmatic version of the `SignOutButton` component.\n   * FIXME: Fix the types.\n   */\n  signOut: any;\n\n  /**\n   * Sign-up function to initiate the registration process.\n   * @remark This is the programmatic version of the `SignUpButton` component.\n   */\n  signUp: (...args: any[]) => Promise<any>;\n\n  signUpUrl: string | undefined;\n\n  user: any;\n\n  /**\n   * Vendor/brand namespace used to prefix storage keys, cookie names, and CSS class names.\n   * Resolved from the `vendor` config option, defaulting to `'thunderid'`.\n   */\n  vendor: string;\n} & Pick<ThunderIDReactClient, 'clearSession'>;\n\n/**\n * Context object for managing the Authentication flow builder core context.\n */\nconst ThunderIDContext: Context<ThunderIDContextProps | null> = createContext<null | ThunderIDContextProps>({\n  afterSignInUrl: undefined,\n  applicationId: undefined,\n  baseUrl: undefined,\n  clearSession: () => {},\n  clientId: undefined,\n  preferences: undefined,\n  scopes: undefined,\n  discovery: {\n    wellKnown: null,\n  },\n  exchangeToken: null as unknown as ThunderIDContextProps['exchangeToken'],\n  getAccessToken: null as unknown as ThunderIDContextProps['getAccessToken'],\n  getDecodedIdToken: null as unknown as ThunderIDContextProps['getDecodedIdToken'],\n  getIdToken: null as unknown as ThunderIDContextProps['getIdToken'],\n  getStorageManager: () => Promise.resolve(null),\n  http: {\n    request: () => null as unknown as Promise<HttpResponse<any>>,\n    requestAll: () => null as unknown as Promise<HttpResponse<any>[]>,\n  },\n  instanceId: 0,\n  isInitialized: false,\n  isLoading: true,\n  isMetaLoading: false,\n  isSignedIn: false,\n  meta: null,\n  organizationHandle: undefined,\n  reInitialize: null as unknown as ThunderIDContextProps['reInitialize'],\n  recover: () => Promise.resolve({} as any),\n  resolveFlowTemplateLiterals: (text: string | undefined) => text ?? '',\n  signIn: () => Promise.resolve({} as any),\n  signInSilently: () => Promise.resolve({} as any),\n  signInUrl: undefined,\n  signOut: () => Promise.resolve({} as any),\n  signUp: () => Promise.resolve({} as any),\n  signUpUrl: undefined,\n  user: null,\n  vendor: VendorConstants.VENDOR_PREFIX,\n});\n\nThunderIDContext.displayName = 'ThunderIDContext';\n\nexport default ThunderIDContext;\n"],"mappings":";;;;;;;;;;AAqNA,MAAMA,4CAAsG;CAC1G,gBAAgB;CAChB,eAAe;CACf,SAAS;CACT,oBAAoB;CACpB,UAAU;CACV,aAAa;CACb,QAAQ;CACR,WAAW,EACT,WAAW,MACZ;CACD,eAAe;CACf,gBAAgB;CAChB,mBAAmB;CACnB,YAAY;CACZ,yBAAyB,QAAQ,QAAQ,KAAK;CAC9C,MAAM;EACJ,eAAe;EACf,kBAAkB;EACnB;CACD,YAAY;CACZ,eAAe;CACf,WAAW;CACX,eAAe;CACf,YAAY;CACZ,MAAM;CACN,oBAAoB;CACpB,cAAc;CACd,eAAe,QAAQ,QAAQ,EAAE,CAAQ;CACzC,8BAA8B,SAA6B,QAAQ;CACnE,cAAc,QAAQ,QAAQ,EAAE,CAAQ;CACxC,sBAAsB,QAAQ,QAAQ,EAAE,CAAQ;CAChD,WAAW;CACX,eAAe,QAAQ,QAAQ,EAAE,CAAQ;CACzC,cAAc,QAAQ,QAAQ,EAAE,CAAQ;CACxC,WAAW;CACX,MAAM;CACN,QAAQC,oCAAgB;CACzB,CAAC;AAEF,iBAAiB,cAAc;AAE/B,+BAAe"}
+{"version":3,"file":"ThunderIDContext.cjs","names":["ThunderIDContext: Context<ThunderIDContextProps | null>","VendorConstants"],"sources":["../../../../src/contexts/ThunderID/ThunderIDContext.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  FlowMetadataResponse,\n  HttpRequestConfig,\n  HttpResponse,\n  IdToken,\n  OIDCDiscoveryApiResponse,\n  SignInOptions,\n  TokenExchangeRequestConfig,\n  TokenResponse,\n  VendorConstants,\n  AttributeSchema,\n} from '@thunderid/browser';\nimport {Context, createContext} from 'react';\nimport {ThunderIDReactConfig} from '../../models/config';\nimport ThunderIDReactClient from '../../ThunderIDReactClient';\n\n/**\n * Props interface of {@link ThunderIDContext}\n */\nexport type ThunderIDContextProps = {\n  afterSignInUrl: string | undefined;\n  applicationId: string | undefined;\n  baseUrl: string | undefined;\n  clientId: string | undefined;\n  /**\n   * Optional endpoint URL overrides from the client config. Used to resolve resource-server\n   * endpoints (e.g. flow/user-management) independently of `baseUrl` — see `resolveResourceEndpoint`.\n   */\n  endpoints?: ThunderIDReactConfig['endpoints'];\n  preferences?: ThunderIDReactConfig['preferences'];\n  scopes: string | string[] | undefined;\n  /**\n   * OIDC discovery data.\n   */\n  discovery: {\n    /**\n     * The response from the `.well-known/openid-configuration` endpoint.\n     * Contains server capabilities, supported endpoints, and metadata.\n     * `null` while loading or when discovery has not been fetched.\n     */\n    wellKnown: OIDCDiscoveryApiResponse | null;\n  };\n  /**\n   * Swaps the current access token with a new one based on the provided configuration (with a grant type).\n   * @param config - Configuration for the token exchange request.\n   * @returns A promise that resolves to the token response or the raw response.\n   */\n  exchangeToken: (config: TokenExchangeRequestConfig) => Promise<TokenResponse | Response>;\n  /**\n   * Retrieves the access token stored in the storage.\n   * This function retrieves the access token and returns it.\n   * @remarks This does not work in the `webWorker` or any other worker environment.\n   * @returns A promise that resolves to the access token.\n   */\n  getAccessToken: () => Promise<string>;\n  /**\n   * Function to retrieve the decoded ID token.\n   * This function decodes the ID token and returns its payload.\n   * It can be used to access user claims and other information contained in the ID token.\n   *\n   * @returns A promise that resolves to the decoded ID token payload.\n   */\n  getDecodedIdToken: () => Promise<IdToken>;\n  /**\n   * Function to retrieve the ID token.\n   * This function retrieves the ID token and returns it.\n   *\n   * @returns A promise that resolves to the ID token.\n   */\n  getIdToken: () => Promise<string>;\n  /**\n   * Returns the underlying StorageManager instance for reading and writing SDK-managed storage.\n   */\n  getStorageManager: () => Promise<any>;\n  /**\n   * HTTP request function to make API calls.\n   * @param requestConfig - Configuration for the HTTP request.\n   * @returns A promise that resolves to the HTTP response.\n   */\n  http: {\n    /**\n     * Makes an HTTP request using the provided configuration.\n     * @param requestConfig - Configuration for the HTTP request.\n     * @returns A promise that resolves to the HTTP response.\n     */\n    request: (requestConfig?: HttpRequestConfig) => Promise<HttpResponse<any>>;\n    /**\n     * Makes multiple HTTP requests based on the provided configuration.\n     * @param requestConfigs - Set of configurations for the HTTP requests.\n     * @returns A promise that resolves to an array of HTTP responses.\n     */\n    requestAll: (requestConfigs?: HttpRequestConfig[]) => Promise<HttpResponse<any>[]>;\n  };\n  /**\n   * Instance ID for multi-instance support.\n   */\n  instanceId: number;\n  isInitialized: boolean;\n  /**\n   * Flag indicating whether the SDK is working in the background.\n   */\n  isLoading: boolean;\n  /**\n   * Flag indicating whether flow metadata is currently being fetched.\n   */\n  isMetaLoading: boolean;\n  /**\n   * Flag indicating whether the user is signed in or not.\n   */\n  isSignedIn: boolean;\n\n  /**\n   * Flow metadata returned by `GET /flow/meta` (v2 platform only).\n   * `null` while loading or when `resolveFromMeta` is disabled.\n   */\n  meta: FlowMetadataResponse | null;\n\n  organizationHandle: string | undefined;\n\n  /**\n   * Re-initializes the client with a new configuration.\n   *\n   * @remarks\n   * This can be partial configuration to update only specific fields.\n   *\n   * @param config - New configuration to re-initialize the client with.\n   * @returns Promise resolving to boolean indicating success.\n   */\n  reInitialize: (config: Partial<ThunderIDReactConfig>) => Promise<boolean>;\n\n  /**\n   * Recovery function to initiate the account/password recovery flow.\n   */\n  recover: (...args: any[]) => Promise<any>;\n\n  /**\n   * Resolves `{{ t(key) }}` and `{{ meta(path) }}` template expressions in a string,\n   * using the current i18n translation function and flow metadata from context.\n   *\n   * Useful in render-props patterns where consumers need to expand template strings\n   * that come from the server (e.g. component labels, placeholders, headings).\n   *\n   * @example\n   * const {resolveFlowTemplateLiterals} = useThunderID();\n   * resolveFlowTemplateLiterals('{{ t(signin.heading.label) }}') // → 'Sign In'\n   * resolveFlowTemplateLiterals('Login to {{ meta(application.name) }}') // → 'Login to My App'\n   */\n  resolveFlowTemplateLiterals: (text: string | undefined) => string;\n\n  /**\n   * Sign-in function to initiate the authentication process.\n   * @remark This is the programmatic version of the `SignInButton` component.\n   * TODO: Fix the types.\n   */\n  signIn: (...args: any) => Promise<any>;\n\n  /**\n   * Optional additional parameters to be sent in the sign-in request.\n   * This can include custom parameters that your authorization server supports.\n   * These parameters will be included in the authorization request sent to the server.\n   * If not provided, no additional parameters will be sent.\n   *\n   * @example\n   * signInOptions: { prompt: \"login\", fidp: \"OrganizationSSO\" }\n   */\n  signInOptions?: SignInOptions;\n\n  /**\n   * Optional token request configuration. params are appended to the token endpoint POST body.\n   *\n   * @example\n   * tokenRequest: { params: { resource: \"https://api.example.com\" } }\n   */\n  tokenRequest?: {\n    params?: Record<string, unknown>;\n  };\n\n  /**\n   * Silent sign-in function to re-authenticate the user without user interaction.\n   * @remark This is the programmatic version of the `SilentSignIn` component.\n   */\n  signInSilently: ThunderIDReactClient['signInSilently'];\n\n  signInUrl: string | undefined;\n  /**\n   * Sign-out function to terminate the authentication session.\n   * @remark This is the programmatic version of the `SignOutButton` component.\n   * FIXME: Fix the types.\n   */\n  signOut: any;\n\n  /**\n   * Sign-up function to initiate the registration process.\n   * @remark This is the programmatic version of the `SignUpButton` component.\n   */\n  signUp: (...args: any[]) => Promise<any>;\n\n  signUpUrl: string | undefined;\n\n  user: any;\n\n  /**\n   * Schema metadata for the user type returned by GET /users/me/meta.\n   */\n  userSchema: Record<string, AttributeSchema> | null;\n\n  /**\n   * Vendor/brand namespace used to prefix storage keys, cookie names, and CSS class names.\n   * Resolved from the `vendor` config option, defaulting to `'thunderid'`.\n   */\n  vendor: string;\n} & Pick<ThunderIDReactClient, 'clearSession'>;\n\n/**\n * Context object for managing the Authentication flow builder core context.\n */\nconst ThunderIDContext: Context<ThunderIDContextProps | null> = createContext<null | ThunderIDContextProps>({\n  afterSignInUrl: undefined,\n  applicationId: undefined,\n  baseUrl: undefined,\n  clearSession: () => {},\n  clientId: undefined,\n  preferences: undefined,\n  scopes: undefined,\n  discovery: {\n    wellKnown: null,\n  },\n  exchangeToken: null as unknown as ThunderIDContextProps['exchangeToken'],\n  getAccessToken: null as unknown as ThunderIDContextProps['getAccessToken'],\n  getDecodedIdToken: null as unknown as ThunderIDContextProps['getDecodedIdToken'],\n  getIdToken: null as unknown as ThunderIDContextProps['getIdToken'],\n  getStorageManager: () => Promise.resolve(null),\n  http: {\n    request: () => null as unknown as Promise<HttpResponse<any>>,\n    requestAll: () => null as unknown as Promise<HttpResponse<any>[]>,\n  },\n  instanceId: 0,\n  isInitialized: false,\n  isLoading: true,\n  isMetaLoading: false,\n  isSignedIn: false,\n  meta: null,\n  organizationHandle: undefined,\n  reInitialize: null as unknown as ThunderIDContextProps['reInitialize'],\n  recover: () => Promise.resolve({} as any),\n  resolveFlowTemplateLiterals: (text: string | undefined) => text ?? '',\n  signIn: () => Promise.resolve({} as any),\n  signInSilently: () => Promise.resolve({} as any),\n  signInUrl: undefined,\n  signOut: () => Promise.resolve({} as any),\n  signUp: () => Promise.resolve({} as any),\n  signUpUrl: undefined,\n  user: null,\n  userSchema: null,\n  vendor: VendorConstants.VENDOR_PREFIX,\n});\n\nThunderIDContext.displayName = 'ThunderIDContext';\n\nexport default ThunderIDContext;\n"],"mappings":";;;;;;;;;;AA2NA,MAAMA,4CAAsG;CAC1G,gBAAgB;CAChB,eAAe;CACf,SAAS;CACT,oBAAoB;CACpB,UAAU;CACV,aAAa;CACb,QAAQ;CACR,WAAW,EACT,WAAW,MACZ;CACD,eAAe;CACf,gBAAgB;CAChB,mBAAmB;CACnB,YAAY;CACZ,yBAAyB,QAAQ,QAAQ,KAAK;CAC9C,MAAM;EACJ,eAAe;EACf,kBAAkB;EACnB;CACD,YAAY;CACZ,eAAe;CACf,WAAW;CACX,eAAe;CACf,YAAY;CACZ,MAAM;CACN,oBAAoB;CACpB,cAAc;CACd,eAAe,QAAQ,QAAQ,EAAE,CAAQ;CACzC,8BAA8B,SAA6B,QAAQ;CACnE,cAAc,QAAQ,QAAQ,EAAE,CAAQ;CACxC,sBAAsB,QAAQ,QAAQ,EAAE,CAAQ;CAChD,WAAW;CACX,eAAe,QAAQ,QAAQ,EAAE,CAAQ;CACzC,cAAc,QAAQ,QAAQ,EAAE,CAAQ;CACxC,WAAW;CACX,MAAM;CACN,YAAY;CACZ,QAAQC,oCAAgB;CACzB,CAAC;AAEF,iBAAiB,cAAc;AAE/B,+BAAe"}

package/dist/cjs/contexts/ThunderID/ThunderIDProvider.cjs

@@ -10,6 +10,7 @@ const require_I18nProvider = require('../I18n/I18nProvider.cjs');
 const require_ThemeProvider = require('../Theme/ThemeProvider.cjs');
 const require_UserProvider = require('../User/UserProvider.cjs');
 const require_getUsersMe = require('../../api/getUsersMe.cjs');
+const require_getUsersMeMeta = require('../../api/getUsersMeMeta.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
 let react = require("react");
@@ -30,6 +31,7 @@ const ThunderIDProvider = ({ afterSignInUrl, afterSignOutUrl, baseUrl: initialBa
 	const [isInitializedSync, setIsInitializedSync] = (0, react.useState)(false);
 	const [isLoadingSync, setIsLoadingSync] = (0, react.useState)(true);
 	const [userProfile, setUserProfile] = (0, react.useState)(null);
+	const [userSchema, setUserSchema] = (0, react.useState)(null);
 	const [baseUrl, setBaseUrl] = (0, react.useState)(initialBaseUrl ?? "");
 	const [config, setConfig] = (0, react.useState)({
 		afterSignInUrl: afterSignInUrl ?? window.location.origin,
@@ -75,19 +77,33 @@ const ThunderIDProvider = ({ afterSignInUrl, afterSignOutUrl, baseUrl: initialBa
 			const claims = (0, __thunderid_browser.extractUserClaimsFromIdToken)(decodedToken);
 			let profileData = claims;
 			const currentSignInStatus = await client.isSignedIn();
-			if (currentSignInStatus && shouldFetchProfile) try {
-				const fetchedProfile = await require_getUsersMe.default({
-					baseUrl: resolvedBaseUrl,
-					url: (0, __thunderid_browser.resolveResourceEndpoint)("usersMe", config),
-					instanceId
-				});
-				profileData = {
-					...claims,
-					...fetchedProfile
-				};
-			} catch (err) {
-				logger.warn("Failed to fetch user profile from /users/me:", err);
-			}
+			if (currentSignInStatus && shouldFetchProfile) {
+				try {
+					const fetchedProfile = await require_getUsersMe.default({
+						baseUrl: resolvedBaseUrl,
+						url: (0, __thunderid_browser.resolveResourceEndpoint)("usersMe", config),
+						instanceId
+					});
+					profileData = {
+						...claims,
+						...fetchedProfile
+					};
+				} catch (err) {
+					logger.warn("Failed to fetch user profile from /users/me:", err);
+				}
+				try {
+					const metaRes = await require_getUsersMeMeta.default({
+						baseUrl: resolvedBaseUrl,
+						url: (0, __thunderid_browser.resolveResourceEndpoint)("usersMeMeta", config),
+						instanceId
+					});
+					if (metaRes?.schema) setUserSchema(metaRes.schema);
+					else setUserSchema(null);
+				} catch (err) {
+					setUserSchema(null);
+					logger.warn("Failed to fetch user schema metadata from /users/me/meta:", err);
+				}
+			} else setUserSchema(null);
 			setUser(profileData);
 			setUserProfile({
 				flattenedProfile: (0, __thunderid_browser.generateFlattenedUserProfile)(profileData, []),
@@ -296,6 +312,7 @@ const ThunderIDProvider = ({ afterSignInUrl, afterSignOutUrl, baseUrl: initialBa
 		signUpUrl,
 		syncSession,
 		user,
+		userSchema,
 		vendor: (0, __thunderid_browser.getVendorPrefix)(config.vendor)
 	}), [
 		applicationId,
@@ -315,6 +332,7 @@ const ThunderIDProvider = ({ afterSignInUrl, afterSignOutUrl, baseUrl: initialBa
 		signIn,
 		signInSilently,
 		user,
+		userSchema,
 		client,
 		signInOptions,
 		tokenRequest,
@@ -348,6 +366,7 @@ const ThunderIDProvider = ({ afterSignInUrl, afterSignOutUrl, baseUrl: initialBa
 					},
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FlowProvider.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UserProvider.default, {
 						profile: userProfile,
+						userSchema,
 						onUpdateProfile: handleProfileUpdate,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentRendererProvider.default, {
 							renderers: extensions?.components?.renderers ?? {},