@thunderid/react 1.3.2 → 1.4.0

package/dist/components/presentation/auth/InviteUser/BaseInviteUser.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInviteUser.js","names":["BaseInviteUser: FC<BaseInviteUserProps>","useThunderID","useTranslation","useTheme","customRenderers: ComponentRendererMap","ComponentRendererContext","styles: any","useStyles","challengeTokenRef: any","responseFieldErrors: FieldError[] | undefined","errors: Record<string, string>","touched: Record<string, boolean>","initializationAttemptedRef: any","tempData: any","storageManager: any","handleError: any","errorMessage: string","normalizeFlowResponseLocal: any","components","handleInputChange: any","newErrors: any","handleInputBlur: any","validateForm: any","value: any","handleSubmit: any","validation: any","inputs: any","payload: Record<string, any>","response: any","resetFlow: any","components: any","extractHeadings: any","title: string | undefined","subtitle: string | undefined","title","subtitle","filterHeadings: any","renderComponents: any","componentsWithoutHeadings: any","renderProps: BaseInviteUserRenderProps","CardPrimitive","Spinner","AlertPrimitive","Typography"],"sources":["../../../../../src/components/presentation/auth/InviteUser/BaseInviteUser.tsx"],"sourcesContent":["// Copyright 2025-2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  EmbeddedFlowType,\n  FieldError,\n  FlowExecutionError,\n  FlowMetadataResponse,\n  buildValidatorFromRules,\n  logger,\n  OrganizationUnitListResponse,\n  Preferences,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport useStyles from './BaseInviteUser.styles';\nimport ComponentRendererContext, {\n  ComponentRendererMap,\n} from '../../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport useTheme from '../../../../contexts/Theme/useTheme';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../../hooks/useTranslation';\nimport {cx} from '../../../../styles/emotion';\nimport {normalizeFlowResponse, extractErrorMessage} from '../../../../utils/flowTransformer';\nimport AlertPrimitive from '../../../primitives/Alert/Alert';\n// eslint-disable-next-line import/no-named-as-default\nimport CardPrimitive, {CardProps} from '../../../primitives/Card/Card';\nimport Spinner from '../../../primitives/Spinner/Spinner';\nimport Typography from '../../../primitives/Typography/Typography';\nimport {renderInviteUserComponents} from '../AuthOptionFactory';\n\n/**\n * Flow response structure from the backend.\n */\nexport interface InviteUserFlowResponse {\n  challengeToken?: string;\n  data?: {\n    additionalData?: Record<string, any>;\n    components?: any[];\n    fieldErrors?: FieldError[];\n    meta?: {\n      components?: any[];\n    };\n  };\n  error?: FlowExecutionError;\n  executionId: string;\n  flowStatus: 'INCOMPLETE' | 'COMPLETE' | 'ERROR';\n  type?: 'VIEW' | 'REDIRECTION';\n}\n\n/**\n * Render props for custom UI rendering of InviteUser.\n */\nexport interface BaseInviteUserRenderProps {\n  /**\n   * Additional data from the current flow response (e.g. rootOuId, inviteLink).\n   */\n  additionalData?: Record<string, any>;\n\n  /**\n   * Flow components from the current step.\n   */\n  components: any[];\n\n  /**\n   * API error (if any).\n   */\n  error?: Error | null;\n\n  /**\n   * Current flow execution ID.\n   */\n  executionId?: string;\n\n  /**\n   * Field validation errors.\n   */\n  fieldErrors: Record<string, string>;\n\n  /**\n   * Current flow execution ID.\n   */\n  flowExecId?: string;\n\n  /**\n   * Function to handle input blur.\n   */\n  handleInputBlur: (name: string) => void;\n\n  /**\n   * Function to handle input changes.\n   */\n  handleInputChange: (name: string, value: string) => void;\n\n  /**\n   * Function to handle form submission.\n   */\n  handleSubmit: (component: any, data?: Record<string, any>) => Promise<void>;\n\n  /**\n   * Loading state.\n   */\n  isLoading: boolean;\n\n  /**\n   * Whether the form is valid.\n   */\n  isValid: boolean;\n\n  /**\n   * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n   */\n  meta: FlowMetadataResponse | null;\n\n  /**\n   * Reset the flow to invite another user.\n   */\n  resetFlow: () => void;\n\n  /**\n   * Subtitle for the current step.\n   */\n  subtitle?: string;\n\n  /**\n   * Title for the current step.\n   */\n  title?: string;\n\n  /**\n   * Touched fields.\n   */\n  touched: Record<string, boolean>;\n\n  /**\n   * Form values for the current step.\n   */\n  values: Record<string, string>;\n}\n\n/**\n * Props for the BaseInviteUser component.\n */\nexport interface BaseInviteUserProps {\n  /**\n   * Render props function for custom UI.\n   * If not provided, default UI will be rendered.\n   */\n  children?: (props: BaseInviteUserRenderProps) => ReactNode;\n\n  /**\n   * Custom CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Function to fetch child organization units.\n   * When provided, enables the OU tree picker for OU_SELECT components.\n   */\n  fetchOrganizationUnitChildren?: (\n    parentId: string,\n    limit: number,\n    offset: number,\n  ) => Promise<OrganizationUnitListResponse>;\n\n  /**\n   * Whether the SDK is initialized.\n   */\n  isInitialized?: boolean;\n\n  /**\n   * Callback when an error occurs.\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Callback when the flow state changes.\n   */\n  onFlowChange?: (response: InviteUserFlowResponse) => void;\n\n  /**\n   * Function to initialize the invite user flow.\n   * This should make an authenticated request to the flow/execute endpoint.\n   */\n  onInitialize: (payload: Record<string, any>) => Promise<InviteUserFlowResponse>;\n\n  /**\n   * Function to submit flow step data.\n   * This should make an authenticated request to the flow/execute endpoint.\n   */\n  onSubmit: (payload: Record<string, any>) => Promise<InviteUserFlowResponse>;\n\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n\n  /**\n   * Whether to show the subtitle.\n   */\n  showSubtitle?: boolean;\n\n  /**\n   * Whether to show the title.\n   */\n  showTitle?: boolean;\n\n  /**\n   * Size variant for the component.\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Theme variant for the component.\n   */\n  variant?: CardProps['variant'];\n}\n\n/**\n * Base component for invite user flow.\n * Handles the flow logic for creating a user and generating an invite link.\n *\n * When no children are provided, renders a default UI with:\n * - Loading spinner during initialization\n * - Error alerts for failures\n * - Flow components (user type selection, user details form)\n * - Invite link display with copy functionality\n *\n * Flow steps handled:\n * 1. User type selection (if multiple types available)\n * 2. User details input (username, email)\n * 3. Invite link generation\n */\nconst BaseInviteUser: FC<BaseInviteUserProps> = ({\n  onInitialize,\n  onSubmit,\n  onError,\n  onFlowChange,\n  className = '',\n  children,\n  fetchOrganizationUnitChildren,\n  isInitialized = true,\n  preferences,\n  size = 'medium',\n  variant = 'outlined',\n  showTitle = true,\n  showSubtitle = true,\n}: BaseInviteUserProps): ReactElement => {\n  const {meta, isInitialized: isSdkInitialized, getStorageManager} = useThunderID();\n  const {t} = useTranslation(preferences?.i18n);\n  const {theme} = useTheme();\n  const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);\n  const styles: any = useStyles(theme, theme.vars.colors.text.primary);\n  const [isLoading, setIsLoading] = useState(false);\n  const [isFlowInitialized, setIsFlowInitialized] = useState(false);\n  const [currentFlow, setCurrentFlow] = useState<InviteUserFlowResponse | null>(null);\n  const [apiError, setApiError] = useState<Error | null>(null);\n  const [formValues, setFormValues] = useState<Record<string, string>>({});\n  const [formErrors, setFormErrors] = useState<Record<string, string>>({});\n  const [touchedFields, setTouchedFields] = useState<Record<string, boolean>>({});\n  const [isFormValid, setIsFormValid] = useState(true);\n  const challengeTokenRef: any = useRef<string | null>(null);\n\n  /**\n   * Project server-side validation errors from the most recent flow response into the\n   * local formErrors state so they render alongside client-side errors. First error\n   * per field wins, matching the SDK's single-string-per-field render-prop shape.\n   */\n  useEffect(() => {\n    const responseFieldErrors: FieldError[] | undefined = (currentFlow?.data as any)?.fieldErrors;\n    if (!responseFieldErrors || responseFieldErrors.length === 0) {\n      return;\n    }\n    const errors: Record<string, string> = {};\n    const touched: Record<string, boolean> = {};\n    for (const fe of responseFieldErrors) {\n      if (!(fe.identifier in errors)) {\n        errors[fe.identifier] = fe.message;\n        touched[fe.identifier] = true;\n      }\n    }\n    setFormErrors(errors);\n    setTouchedFields((prev: Record<string, boolean>) => ({...prev, ...touched}));\n  }, [currentFlow]);\n\n  const initializationAttemptedRef: any = useRef(false);\n\n  /**\n   * Restore any challenge token persisted before an OAuth redirect.\n   */\n  useEffect(() => {\n    if (!isSdkInitialized) return;\n\n    (async (): Promise<void> => {\n      try {\n        const storageManager: any = await getStorageManager();\n        const tempData: any = await storageManager?.getTemporaryData();\n        if (tempData?.challengeToken) {\n          challengeTokenRef.current = tempData.challengeToken as string;\n        }\n      } catch {\n        // StorageManager unavailable — continue without persisted token\n      }\n    })();\n  }, [isSdkInitialized]);\n\n  /**\n   * Updates challengeTokenRef immediately (stale-closure safe) and persists via\n   * the provider's StorageManager so the token survives OAuth redirects.\n   */\n  const setChallengeToken = async (challengeToken: string | null): Promise<void> => {\n    challengeTokenRef.current = challengeToken;\n    try {\n      const storageManager: any = await getStorageManager();\n      if (storageManager) {\n        if (challengeToken) {\n          await storageManager.setTemporaryDataParameter('challengeToken', challengeToken);\n        } else {\n          await storageManager.removeTemporaryDataParameter('challengeToken');\n        }\n      }\n    } catch {\n      logger.warn('Failed to persist challenge token in storage.');\n    }\n  };\n\n  /**\n   * Handle error responses and extract meaningful error messages.\n   * Uses the transformer's extractErrorMessage function for consistency.\n   */\n  const handleError: any = useCallback(\n    (error: any) => {\n      const errorMessage: string = extractErrorMessage(error, t, 'components.inviteUser.errors.generic');\n\n      // Set the API error state\n      setApiError(error instanceof Error ? error : new Error(errorMessage));\n\n      // Call the onError callback if provided\n      onError?.(error instanceof Error ? error : new Error(errorMessage));\n    },\n    [t, onError],\n  );\n\n  /**\n   * Normalize flow response to ensure component-driven format.\n   * Transforms data.meta.components to data.components.\n   */\n  const normalizeFlowResponseLocal: any = useCallback(\n    (response: InviteUserFlowResponse): InviteUserFlowResponse => {\n      if (!response?.data?.meta?.components) {\n        return response;\n      }\n\n      try {\n        const {components} = normalizeFlowResponse(\n          response,\n          t,\n          {\n            defaultErrorKey: 'components.inviteUser.errors.generic',\n            resolveTranslations: false,\n          },\n          meta,\n        );\n\n        return {\n          ...response,\n          data: {\n            ...response.data,\n            components: components as any,\n          },\n        };\n      } catch {\n        // If transformer throws (e.g., error response), return as-is\n        return response;\n      }\n    },\n    [t, children],\n  );\n\n  /**\n   * Handle input value changes.\n   */\n  const handleInputChange: any = useCallback((name: string, value: string) => {\n    setFormValues((prev: any) => ({...prev, [name]: value}));\n    // Clear error when user starts typing\n    setFormErrors((prev: any) => {\n      const newErrors: any = {...prev};\n      delete newErrors[name];\n      return newErrors;\n    });\n  }, []);\n\n  /**\n   * Handle input blur.\n   */\n  const handleInputBlur: any = useCallback((name: string) => {\n    setTouchedFields((prev: any) => ({...prev, [name]: true}));\n  }, []);\n\n  /**\n   * Validate required fields based on components.\n   */\n  const validateForm: any = useCallback(\n    (components: any[]): {errors: Record<string, string>; isValid: boolean} => {\n      const errors: Record<string, string> = {};\n\n      const validateComponents = (comps: any[]): any => {\n        comps.forEach((comp: any) => {\n          if (\n            (comp.type === 'TEXT_INPUT' ||\n              comp.type === 'EMAIL_INPUT' ||\n              comp.type === 'SELECT' ||\n              comp.type === 'PHONE_INPUT' ||\n              comp.type === 'OTP_INPUT' ||\n              comp.type === 'DATE_INPUT') &&\n            comp.ref\n          ) {\n            const value: any = formValues[comp.ref];\n            if (comp.required && (!value || value.trim() === '')) {\n              errors[comp.ref] = `${comp.label || comp.ref} is required`;\n            } else {\n              // Email validation\n              if (comp.type === 'EMAIL_INPUT' && value && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {\n                errors[comp.ref] = 'Please enter a valid email address';\n              }\n              // Evaluate declarative validation rules from meta.components[].validation.\n              if (value && !errors[comp.ref]) {\n                const ruleValidator = buildValidatorFromRules(comp.validation);\n                if (ruleValidator) {\n                  const message = ruleValidator(value);\n                  if (message) {\n                    errors[comp.ref] = t(message);\n                  }\n                }\n              }\n            }\n          }\n          if (comp.components && Array.isArray(comp.components)) {\n            validateComponents(comp.components);\n          }\n        });\n      };\n\n      validateComponents(components);\n\n      return {errors, isValid: Object.keys(errors).length === 0};\n    },\n    [formValues],\n  );\n\n  /**\n   * Handle form submission.\n   */\n  const handleSubmit: any = useCallback(\n    async (component: any, data?: Record<string, any>) => {\n      if (!currentFlow) {\n        return;\n      }\n\n      // Validate form before submission\n      const components: any = currentFlow.data?.components || [];\n      const validation: any = validateForm(components);\n\n      if (!validation.isValid) {\n        setFormErrors(validation.errors);\n        setIsFormValid(false);\n        // Mark all fields as touched\n        const touched: Record<string, boolean> = {};\n        Object.keys(validation.errors).forEach((key: any) => {\n          touched[key] = true;\n        });\n        setTouchedFields((prev: any) => ({...prev, ...touched}));\n        return;\n      }\n\n      setIsLoading(true);\n      setApiError(null);\n      setIsFormValid(true);\n\n      try {\n        // Build payload with form values\n        const inputs: any = data || formValues;\n\n        const payload: Record<string, any> = {\n          executionId: currentFlow.executionId,\n          inputs,\n          verbose: true,\n          ...(challengeTokenRef.current ? {challengeToken: challengeTokenRef.current} : {}),\n        };\n\n        // Add action ID if component has one\n        if (component?.id) {\n          payload['action'] = component.id;\n        }\n\n        const rawResponse: any = await onSubmit(payload);\n        const response: any = normalizeFlowResponseLocal(rawResponse);\n        onFlowChange?.(response);\n\n        await setChallengeToken(response.challengeToken ?? null);\n\n        // Check for error status\n        if (response.flowStatus === 'ERROR') {\n          handleError(response);\n          return;\n        }\n\n        // Update current flow and reset form for next step\n        setCurrentFlow(response);\n        setFormValues({});\n        setFormErrors({});\n        setTouchedFields({});\n\n        // Display error from INCOMPLETE response\n        if (response?.error) {\n          handleError(response);\n        }\n      } catch (err) {\n        handleError(err);\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    [currentFlow, formValues, validateForm, onSubmit, onFlowChange, handleError, normalizeFlowResponseLocal],\n  );\n\n  /**\n   * Reset the flow to invite another user.\n   */\n  const resetFlow: any = useCallback(() => {\n    setIsFlowInitialized(false);\n    setCurrentFlow(null);\n    setApiError(null);\n    setFormValues({});\n    setFormErrors({});\n    setTouchedFields({});\n    initializationAttemptedRef.current = false;\n  }, []);\n\n  /**\n   * reset form values, errors, and touched fields to initial state\n   */\n  const resetForm = useCallback(() => {\n    setFormValues({});\n    setFormErrors({});\n    setTouchedFields({});\n    setApiError(null);\n    setIsFormValid(true);\n  }, []);\n\n  /**\n   * Initialize the flow on component mount.\n   */\n  useEffect(() => {\n    if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {\n      initializationAttemptedRef.current = true;\n\n      (async (): Promise<void> => {\n        setIsLoading(true);\n        setApiError(null);\n\n        try {\n          const payload: any = {\n            flowType: EmbeddedFlowType.UserOnboarding,\n            verbose: true,\n          };\n\n          const rawResponse: any = await onInitialize(payload);\n          const response: any = normalizeFlowResponseLocal(rawResponse);\n          await setChallengeToken(response.challengeToken ?? null);\n          setCurrentFlow(response);\n          setIsFlowInitialized(true);\n          onFlowChange?.(response);\n\n          // Check for immediate error\n          if (response.flowStatus === 'ERROR') {\n            handleError(response);\n          }\n        } catch (err) {\n          handleError(err);\n        } finally {\n          setIsLoading(false);\n        }\n      })();\n    }\n  }, [isInitialized, isFlowInitialized, onInitialize, onFlowChange, handleError, normalizeFlowResponseLocal]);\n\n  /**\n   * Recalculate form validity whenever form values or components change.\n   * This ensures the submit button is enabled/disabled correctly as the user types.\n   */\n  useEffect(() => {\n    if (currentFlow && isFlowInitialized) {\n      const components: any = currentFlow.data?.components || [];\n      if (components.length > 0) {\n        const validation: any = validateForm(components);\n        setIsFormValid(validation.isValid);\n      }\n    }\n  }, [formValues, currentFlow, isFlowInitialized, validateForm]);\n\n  /**\n   * Extract title and subtitle from components.\n   */\n  const extractHeadings: any = useCallback((components: any[]): {subtitle?: string; title?: string} => {\n    let title: string | undefined;\n    let subtitle: string | undefined;\n\n    components.forEach((comp: any) => {\n      if (comp.type === 'TEXT') {\n        if (comp.variant === 'HEADING_1' && !title) {\n          title = comp.label;\n        } else if ((comp.variant === 'HEADING_2' || comp.variant === 'SUBTITLE_1') && !subtitle) {\n          subtitle = comp.label;\n        }\n      }\n    });\n\n    return {subtitle, title};\n  }, []);\n\n  /**\n   * Filter out heading components for default rendering.\n   */\n  const filterHeadings: any = useCallback(\n    (components: any[]): any[] =>\n      components.filter(\n        (comp: any) => !(comp.type === 'TEXT' && (comp.variant === 'HEADING_1' || comp.variant === 'HEADING_2')),\n      ),\n    [],\n  );\n\n  /**\n   * Render form components using the factory.\n   */\n  const renderComponents: any = useCallback(\n    (components: any[]): ReactElement[] =>\n      renderInviteUserComponents(\n        components,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        resetForm,\n        handleInputChange,\n        {\n          _customRenderers: customRenderers,\n          _theme: theme,\n          additionalData: currentFlow?.data?.additionalData,\n          fetchOrganizationUnitChildren,\n          onInputBlur: handleInputBlur,\n          onSubmit: handleSubmit,\n          size,\n          variant,\n        },\n      ),\n    [\n      customRenderers,\n      currentFlow?.data?.additionalData,\n      fetchOrganizationUnitChildren,\n      formValues,\n      touchedFields,\n      formErrors,\n      isLoading,\n      isFormValid,\n      handleInputChange,\n      handleInputBlur,\n      handleSubmit,\n      size,\n      theme,\n      variant,\n    ],\n  );\n\n  // Get components from normalized response, with fallback to meta.components\n  const components: any = currentFlow?.data?.components || currentFlow?.data?.meta?.components || [];\n  const {title, subtitle} = extractHeadings(components);\n  const componentsWithoutHeadings: any = filterHeadings(components);\n\n  // Render props\n  const renderProps: BaseInviteUserRenderProps = {\n    additionalData: currentFlow?.data?.additionalData,\n    components,\n    error: apiError,\n    executionId: currentFlow?.executionId,\n    fieldErrors: formErrors,\n    handleInputBlur,\n    handleInputChange,\n    handleSubmit,\n    isLoading,\n    isValid: isFormValid,\n    meta,\n    resetFlow,\n    subtitle,\n    title,\n    touched: touchedFields,\n    values: formValues,\n  };\n\n  // If children render prop is provided, use it for custom UI\n  if (children) {\n    return <div className={className}>{children(renderProps)}</div>;\n  }\n\n  // Default rendering\n\n  // Waiting for SDK initialization\n  if (!isInitialized) {\n    return (\n      <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n        <CardPrimitive.Content>\n          <div className={(styles as Record<string, string>)['centeredSpinnerContainer']}>\n            <Spinner size=\"medium\" />\n          </div>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  // Loading state during initialization\n  if (!isFlowInitialized && isLoading) {\n    return (\n      <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n        <CardPrimitive.Content>\n          <div className={(styles as Record<string, string>)['centeredSpinnerContainer']}>\n            <Spinner size=\"medium\" />\n          </div>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  // Error state during initialization\n  if (!currentFlow && apiError) {\n    return (\n      <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n        <CardPrimitive.Content>\n          <AlertPrimitive variant=\"error\">\n            <AlertPrimitive.Title>Error</AlertPrimitive.Title>\n            <AlertPrimitive.Description>{apiError.message}</AlertPrimitive.Description>\n          </AlertPrimitive>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  // Flow components\n  return (\n    <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n      {(showTitle || showSubtitle) && (title || subtitle) && (\n        <CardPrimitive.Header className={styles.header}>\n          {showTitle && title && (\n            <CardPrimitive.Title level={2} className={styles.title}>\n              {title}\n            </CardPrimitive.Title>\n          )}\n          {showSubtitle && subtitle && (\n            <Typography variant=\"body1\" className={styles.subtitle}>\n              {subtitle}\n            </Typography>\n          )}\n        </CardPrimitive.Header>\n      )}\n      <CardPrimitive.Content>\n        {apiError && (\n          <div className={(styles as Record<string, string>)['errorContainer']}>\n            <AlertPrimitive variant=\"error\">\n              <AlertPrimitive.Description>{apiError.message}</AlertPrimitive.Description>\n            </AlertPrimitive>\n          </div>\n        )}\n        <div>\n          {componentsWithoutHeadings && componentsWithoutHeadings.length > 0\n            ? renderComponents(componentsWithoutHeadings)\n            : !isLoading && (\n                <AlertPrimitive variant=\"warning\">\n                  <Typography variant=\"body1\">No form components available</Typography>\n                </AlertPrimitive>\n              )}\n          {isLoading && (\n            <div className={(styles as Record<string, string>)['centeredSpinnerContainerSmall']}>\n              <Spinner size=\"small\" />\n            </div>\n          )}\n        </div>\n      </CardPrimitive.Content>\n    </CardPrimitive>\n  );\n};\n\nexport default BaseInviteUser;\n"],"mappings":"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"}
+{"version":3,"file":"BaseInviteUser.js","names":["BaseInviteUser: FC<BaseInviteUserProps>","useThunderID","useTranslation","useTheme","customRenderers: ComponentRendererMap","ComponentRendererContext","styles: any","useStyles","challengeTokenRef: any","responseFieldErrors: FieldError[] | undefined","errors: Record<string, string>","touched: Record<string, boolean>","initializationAttemptedRef: any","tempData: any","storageManager: any","handleError: any","errorMessage: string","normalizeFlowResponseLocal: any","components","handleInputChange: any","newErrors: any","handleInputBlur: any","validateForm: any","value: any","handleSubmit: any","validation: any","inputs: any","payload: Record<string, any>","response: any","resetFlow: any","components: any","extractHeadings: any","title: string | undefined","subtitle: string | undefined","title","subtitle","filterHeadings: any","renderComponents: any","componentsWithoutHeadings: any","renderProps: BaseInviteUserRenderProps","CardPrimitive","Spinner","AlertPrimitive","Typography"],"sources":["../../../../../src/components/presentation/auth/InviteUser/BaseInviteUser.tsx"],"sourcesContent":["// Copyright 2025-2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  EmbeddedFlowType,\n  FieldError,\n  FlowExecutionError,\n  FlowMetadataResponse,\n  buildValidatorFromRules,\n  FetchAuthFlows,\n  FetchUsers,\n  FetchUserTypes,\n  logger,\n  OrganizationUnitListResponse,\n  Preferences,\n  resolveFlowTemplateLiterals,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport useStyles from './BaseInviteUser.styles';\nimport ComponentRendererContext, {\n  ComponentRendererMap,\n} from '../../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport useTheme from '../../../../contexts/Theme/useTheme';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../../hooks/useTranslation';\nimport {cx} from '../../../../styles/emotion';\nimport {normalizeFlowResponse, extractErrorMessage} from '../../../../utils/flowTransformer';\nimport AlertPrimitive from '../../../primitives/Alert/Alert';\n// eslint-disable-next-line import/no-named-as-default\nimport CardPrimitive, {CardProps} from '../../../primitives/Card/Card';\nimport Spinner from '../../../primitives/Spinner/Spinner';\nimport Typography from '../../../primitives/Typography/Typography';\nimport {renderInviteUserComponents} from '../AuthOptionFactory';\n\n/**\n * Flow response structure from the backend.\n */\nexport interface InviteUserFlowResponse {\n  challengeToken?: string;\n  data?: {\n    additionalData?: Record<string, any>;\n    components?: any[];\n    fieldErrors?: FieldError[];\n    meta?: {\n      components?: any[];\n    };\n  };\n  error?: FlowExecutionError;\n  executionId: string;\n  flowStatus: 'INCOMPLETE' | 'COMPLETE' | 'ERROR';\n  type?: 'VIEW' | 'REDIRECTION';\n}\n\n/**\n * Render props for custom UI rendering of InviteUser.\n */\nexport interface BaseInviteUserRenderProps {\n  /**\n   * Additional data from the current flow response (e.g. rootOuId, inviteLink).\n   */\n  additionalData?: Record<string, any>;\n\n  /**\n   * Flow components from the current step.\n   */\n  components: any[];\n\n  /**\n   * API error (if any).\n   */\n  error?: Error | null;\n\n  /**\n   * Current flow execution ID.\n   */\n  executionId?: string;\n\n  /**\n   * Field validation errors.\n   */\n  fieldErrors: Record<string, string>;\n\n  /**\n   * Current flow execution ID.\n   */\n  flowExecId?: string;\n\n  /**\n   * Function to handle input blur.\n   */\n  handleInputBlur: (name: string) => void;\n\n  /**\n   * Function to handle input changes.\n   */\n  handleInputChange: (name: string, value: string) => void;\n\n  /**\n   * Function to handle form submission.\n   */\n  handleSubmit: (component: any, data?: Record<string, any>) => Promise<void>;\n\n  /**\n   * Loading state.\n   */\n  isLoading: boolean;\n\n  /**\n   * Whether the form is valid.\n   */\n  isValid: boolean;\n\n  /**\n   * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n   */\n  meta: FlowMetadataResponse | null;\n\n  /**\n   * Reset the flow to invite another user.\n   */\n  resetFlow: () => void;\n\n  /**\n   * Subtitle for the current step.\n   */\n  subtitle?: string;\n\n  /**\n   * Title for the current step.\n   */\n  title?: string;\n\n  /**\n   * Touched fields.\n   */\n  touched: Record<string, boolean>;\n\n  /**\n   * Form values for the current step.\n   */\n  values: Record<string, string>;\n}\n\n/**\n * Props for the BaseInviteUser component.\n */\nexport interface BaseInviteUserProps {\n  /**\n   * Render props function for custom UI.\n   * If not provided, default UI will be rendered.\n   */\n  children?: (props: BaseInviteUserRenderProps) => ReactNode;\n\n  /**\n   * Custom CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Function to fetch child organization units.\n   * When provided, enables the OU tree picker for OU_SELECT components.\n   */\n  fetchOrganizationUnitChildren?: (\n    parentId: string,\n    limit: number,\n    offset: number,\n  ) => Promise<OrganizationUnitListResponse>;\n\n  /**\n   * Function to load one page of authentication flows.\n   * When provided, enables the flow picker for AUTH_FLOW_SELECT components.\n   */\n  fetchAuthFlows?: FetchAuthFlows;\n  /**\n   * Function to load one page of users.\n   * When provided, enables the user picker for USER_SELECT components.\n   */\n  fetchUsers?: FetchUsers;\n  /**\n   * Function to load one page of user types.\n   * When provided, enables the user type picker for USER_TYPE_SELECT components.\n   */\n  fetchUserTypes?: FetchUserTypes;\n\n  /**\n   * Whether the SDK is initialized.\n   */\n  isInitialized?: boolean;\n\n  /**\n   * Callback when an error occurs. It also receives the errors of failed user, flow and user type picker loads,\n   * which the form itself does not show.\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Callback when the flow state changes.\n   */\n  onFlowChange?: (response: InviteUserFlowResponse) => void;\n\n  /**\n   * Function to initialize the invite user flow.\n   * This should make an authenticated request to the flow/execute endpoint.\n   */\n  onInitialize: (payload: Record<string, any>) => Promise<InviteUserFlowResponse>;\n\n  /**\n   * Function to submit flow step data.\n   * This should make an authenticated request to the flow/execute endpoint.\n   */\n  onSubmit: (payload: Record<string, any>) => Promise<InviteUserFlowResponse>;\n\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n\n  /**\n   * Whether to show the subtitle.\n   */\n  showSubtitle?: boolean;\n\n  /**\n   * Whether to show the title.\n   */\n  showTitle?: boolean;\n\n  /**\n   * Size variant for the component.\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Theme variant for the component.\n   */\n  variant?: CardProps['variant'];\n}\n\n/**\n * Base component for invite user flow.\n * Handles the flow logic for creating a user and generating an invite link.\n *\n * When no children are provided, renders a default UI with:\n * - Loading spinner during initialization\n * - Error alerts for failures\n * - Flow components (user type selection, user details form)\n * - Invite link display with copy functionality\n *\n * Flow steps handled:\n * 1. User type selection (if multiple types available)\n * 2. User details input (username, email)\n * 3. Invite link generation\n */\nconst BaseInviteUser: FC<BaseInviteUserProps> = ({\n  onInitialize,\n  onSubmit,\n  onError,\n  onFlowChange,\n  className = '',\n  children,\n  fetchAuthFlows,\n  fetchOrganizationUnitChildren,\n  fetchUsers,\n  fetchUserTypes,\n  isInitialized = true,\n  preferences,\n  size = 'medium',\n  variant = 'outlined',\n  showTitle = true,\n  showSubtitle = true,\n}: BaseInviteUserProps): ReactElement => {\n  const {meta, isInitialized: isSdkInitialized, getStorageManager} = useThunderID();\n  const {t} = useTranslation(preferences?.i18n);\n  const {theme} = useTheme();\n  const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);\n  const styles: any = useStyles(theme, theme.vars.colors.text.primary);\n  const [isLoading, setIsLoading] = useState(false);\n  const [isFlowInitialized, setIsFlowInitialized] = useState(false);\n  const [currentFlow, setCurrentFlow] = useState<InviteUserFlowResponse | null>(null);\n  const [apiError, setApiError] = useState<Error | null>(null);\n  const [formValues, setFormValues] = useState<Record<string, string>>({});\n  const [formErrors, setFormErrors] = useState<Record<string, string>>({});\n  const [touchedFields, setTouchedFields] = useState<Record<string, boolean>>({});\n  const [isFormValid, setIsFormValid] = useState(true);\n  const challengeTokenRef: any = useRef<string | null>(null);\n\n  /**\n   * Project server-side validation errors from the most recent flow response into the\n   * local formErrors state so they render alongside client-side errors. First error\n   * per field wins, matching the SDK's single-string-per-field render-prop shape.\n   */\n  useEffect(() => {\n    const responseFieldErrors: FieldError[] | undefined = (currentFlow?.data as any)?.fieldErrors;\n    if (!responseFieldErrors || responseFieldErrors.length === 0) {\n      return;\n    }\n    const errors: Record<string, string> = {};\n    const touched: Record<string, boolean> = {};\n    for (const fe of responseFieldErrors) {\n      if (!(fe.identifier in errors)) {\n        errors[fe.identifier] = fe.message;\n        touched[fe.identifier] = true;\n      }\n    }\n    setFormErrors(errors);\n    setTouchedFields((prev: Record<string, boolean>) => ({...prev, ...touched}));\n  }, [currentFlow]);\n\n  const initializationAttemptedRef: any = useRef(false);\n\n  /**\n   * Restore any challenge token persisted before an OAuth redirect.\n   */\n  useEffect(() => {\n    if (!isSdkInitialized) return;\n\n    (async (): Promise<void> => {\n      try {\n        const storageManager: any = await getStorageManager();\n        const tempData: any = await storageManager?.getTemporaryData();\n        if (tempData?.challengeToken) {\n          challengeTokenRef.current = tempData.challengeToken as string;\n        }\n      } catch {\n        // StorageManager unavailable — continue without persisted token\n      }\n    })();\n  }, [isSdkInitialized]);\n\n  /**\n   * Updates challengeTokenRef immediately (stale-closure safe) and persists via\n   * the provider's StorageManager so the token survives OAuth redirects.\n   */\n  const setChallengeToken = async (challengeToken: string | null): Promise<void> => {\n    challengeTokenRef.current = challengeToken;\n    try {\n      const storageManager: any = await getStorageManager();\n      if (storageManager) {\n        if (challengeToken) {\n          await storageManager.setTemporaryDataParameter('challengeToken', challengeToken);\n        } else {\n          await storageManager.removeTemporaryDataParameter('challengeToken');\n        }\n      }\n    } catch {\n      logger.warn('Failed to persist challenge token in storage.');\n    }\n  };\n\n  /**\n   * Handle error responses and extract meaningful error messages.\n   * Uses the transformer's extractErrorMessage function for consistency.\n   */\n  const handleError: any = useCallback(\n    (error: any) => {\n      const errorMessage: string = extractErrorMessage(error, t, 'components.inviteUser.errors.generic');\n\n      // Set the API error state\n      setApiError(error instanceof Error ? error : new Error(errorMessage));\n\n      // Call the onError callback if provided\n      onError?.(error instanceof Error ? error : new Error(errorMessage));\n    },\n    [t, onError],\n  );\n\n  /**\n   * Normalize flow response to ensure component-driven format.\n   * Transforms data.meta.components to data.components.\n   */\n  const normalizeFlowResponseLocal: any = useCallback(\n    (response: InviteUserFlowResponse): InviteUserFlowResponse => {\n      if (!response?.data?.meta?.components) {\n        return response;\n      }\n\n      try {\n        const {components} = normalizeFlowResponse(\n          response,\n          t,\n          {\n            defaultErrorKey: 'components.inviteUser.errors.generic',\n            resolveTranslations: false,\n          },\n          meta,\n        );\n\n        return {\n          ...response,\n          data: {\n            ...response.data,\n            components: components as any,\n          },\n        };\n      } catch {\n        // If transformer throws (e.g., error response), return as-is\n        return response;\n      }\n    },\n    [t, children],\n  );\n\n  /**\n   * Handle input value changes.\n   */\n  const handleInputChange: any = useCallback((name: string, value: string) => {\n    setFormValues((prev: any) => ({...prev, [name]: value}));\n    // Clear error when user starts typing\n    setFormErrors((prev: any) => {\n      const newErrors: any = {...prev};\n      delete newErrors[name];\n      return newErrors;\n    });\n  }, []);\n\n  /**\n   * Handle input blur.\n   */\n  const handleInputBlur: any = useCallback((name: string) => {\n    setTouchedFields((prev: any) => ({...prev, [name]: true}));\n  }, []);\n\n  /**\n   * Validate required fields based on components.\n   */\n  const validateForm: any = useCallback(\n    (components: any[]): {errors: Record<string, string>; isValid: boolean} => {\n      const errors: Record<string, string> = {};\n\n      const validateComponents = (comps: any[]): any => {\n        comps.forEach((comp: any) => {\n          if (\n            (comp.type === 'TEXT_INPUT' ||\n              comp.type === 'EMAIL_INPUT' ||\n              comp.type === 'SELECT' ||\n              comp.type === 'PHONE_INPUT' ||\n              comp.type === 'OTP_INPUT' ||\n              comp.type === 'DATE_INPUT' ||\n              comp.type === 'USER_SELECT' ||\n              comp.type === 'AUTH_FLOW_SELECT' ||\n              comp.type === 'USER_TYPE_SELECT') &&\n            comp.ref\n          ) {\n            const value: any = formValues[comp.ref];\n            if (comp.required && (!value || value.trim() === '')) {\n              errors[comp.ref] = `${comp.label || comp.ref} is required`;\n            } else {\n              // Email validation\n              if (comp.type === 'EMAIL_INPUT' && value && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {\n                errors[comp.ref] = 'Please enter a valid email address';\n              }\n              // Evaluate declarative validation rules from meta.components[].validation.\n              if (value && !errors[comp.ref]) {\n                const ruleValidator = buildValidatorFromRules(comp.validation);\n                if (ruleValidator) {\n                  const message = ruleValidator(value);\n                  if (message) {\n                    errors[comp.ref] = t(message);\n                  }\n                }\n              }\n            }\n          }\n          if (comp.components && Array.isArray(comp.components)) {\n            validateComponents(comp.components);\n          }\n        });\n      };\n\n      validateComponents(components);\n\n      return {errors, isValid: Object.keys(errors).length === 0};\n    },\n    [formValues],\n  );\n\n  /**\n   * Handle form submission.\n   */\n  const handleSubmit: any = useCallback(\n    async (component: any, data?: Record<string, any>) => {\n      if (!currentFlow) {\n        return;\n      }\n\n      // Validate form before submission\n      const components: any = currentFlow.data?.components || [];\n      const validation: any = validateForm(components);\n\n      if (!validation.isValid) {\n        setFormErrors(validation.errors);\n        setIsFormValid(false);\n        // Mark all fields as touched\n        const touched: Record<string, boolean> = {};\n        Object.keys(validation.errors).forEach((key: any) => {\n          touched[key] = true;\n        });\n        setTouchedFields((prev: any) => ({...prev, ...touched}));\n        return;\n      }\n\n      setIsLoading(true);\n      setApiError(null);\n      setIsFormValid(true);\n\n      try {\n        // Build payload with form values\n        const inputs: any = data || formValues;\n\n        const payload: Record<string, any> = {\n          executionId: currentFlow.executionId,\n          inputs,\n          verbose: true,\n          ...(challengeTokenRef.current ? {challengeToken: challengeTokenRef.current} : {}),\n        };\n\n        // Add action ID if component has one\n        if (component?.id) {\n          payload['action'] = component.id;\n        }\n\n        const rawResponse: any = await onSubmit(payload);\n        const response: any = normalizeFlowResponseLocal(rawResponse);\n        onFlowChange?.(response);\n\n        await setChallengeToken(response.challengeToken ?? null);\n\n        // Check for error status\n        if (response.flowStatus === 'ERROR') {\n          handleError(response);\n          return;\n        }\n\n        // Update current flow and reset form for next step\n        setCurrentFlow(response);\n        setFormValues({});\n        setFormErrors({});\n        setTouchedFields({});\n\n        // Display error from INCOMPLETE response\n        if (response?.error) {\n          handleError(response);\n        }\n      } catch (err) {\n        handleError(err);\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    [currentFlow, formValues, validateForm, onSubmit, onFlowChange, handleError, normalizeFlowResponseLocal],\n  );\n\n  /**\n   * Reset the flow to invite another user.\n   */\n  const resetFlow: any = useCallback(() => {\n    setIsFlowInitialized(false);\n    setCurrentFlow(null);\n    setApiError(null);\n    setFormValues({});\n    setFormErrors({});\n    setTouchedFields({});\n    initializationAttemptedRef.current = false;\n  }, []);\n\n  /**\n   * reset form values, errors, and touched fields to initial state\n   */\n  const resetForm = useCallback(() => {\n    setFormValues({});\n    setFormErrors({});\n    setTouchedFields({});\n    setApiError(null);\n    setIsFormValid(true);\n  }, []);\n\n  /**\n   * Initialize the flow on component mount.\n   */\n  useEffect(() => {\n    if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {\n      initializationAttemptedRef.current = true;\n\n      (async (): Promise<void> => {\n        setIsLoading(true);\n        setApiError(null);\n\n        try {\n          const payload: any = {\n            flowType: EmbeddedFlowType.UserOnboarding,\n            verbose: true,\n          };\n\n          const rawResponse: any = await onInitialize(payload);\n          const response: any = normalizeFlowResponseLocal(rawResponse);\n          await setChallengeToken(response.challengeToken ?? null);\n          setCurrentFlow(response);\n          setIsFlowInitialized(true);\n          onFlowChange?.(response);\n\n          // Check for immediate error\n          if (response.flowStatus === 'ERROR') {\n            handleError(response);\n          }\n        } catch (err) {\n          handleError(err);\n        } finally {\n          setIsLoading(false);\n        }\n      })();\n    }\n  }, [isInitialized, isFlowInitialized, onInitialize, onFlowChange, handleError, normalizeFlowResponseLocal]);\n\n  /**\n   * Recalculate form validity whenever form values or components change.\n   * This ensures the submit button is enabled/disabled correctly as the user types.\n   */\n  useEffect(() => {\n    if (currentFlow && isFlowInitialized) {\n      const components: any = currentFlow.data?.components || [];\n      if (components.length > 0) {\n        const validation: any = validateForm(components);\n        setIsFormValid(validation.isValid);\n      }\n    }\n  }, [formValues, currentFlow, isFlowInitialized, validateForm]);\n\n  /**\n   * Extract title and subtitle from components.\n   */\n  const extractHeadings: any = useCallback(\n    (components: any[]): {subtitle?: string; title?: string} => {\n      // The flow writes its texts as translation templates, so resolve them here as the field labels are.\n      const resolve = (text: string): string => resolveFlowTemplateLiterals(text, {meta, t});\n      let title: string | undefined;\n      let subtitle: string | undefined;\n\n      components.forEach((comp: any) => {\n        if (comp.type === 'TEXT') {\n          if (comp.variant === 'HEADING_1' && !title) {\n            title = comp.label && resolve(comp.label);\n          } else if ((comp.variant === 'HEADING_2' || comp.variant === 'SUBTITLE_1') && !subtitle) {\n            subtitle = comp.label && resolve(comp.label);\n          }\n        }\n      });\n\n      return {subtitle, title};\n    },\n    [meta, t],\n  );\n\n  /**\n   * Filter out heading components for default rendering.\n   */\n  const filterHeadings: any = useCallback(\n    (components: any[]): any[] =>\n      components.filter(\n        (comp: any) => !(comp.type === 'TEXT' && (comp.variant === 'HEADING_1' || comp.variant === 'HEADING_2')),\n      ),\n    [],\n  );\n\n  /**\n   * Render form components using the factory.\n   */\n  const renderComponents: any = useCallback(\n    (components: any[]): ReactElement[] =>\n      renderInviteUserComponents(\n        components,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        resetForm,\n        handleInputChange,\n        {\n          _customRenderers: customRenderers,\n          _theme: theme,\n          additionalData: currentFlow?.data?.additionalData,\n          fetchAuthFlows,\n          fetchOrganizationUnitChildren,\n          fetchUsers,\n          fetchUserTypes,\n          meta,\n          onInputBlur: handleInputBlur,\n          onPickerError: onError,\n          onSubmit: handleSubmit,\n          size,\n          t,\n          variant,\n        },\n      ),\n    [\n      customRenderers,\n      currentFlow?.data?.additionalData,\n      fetchAuthFlows,\n      fetchOrganizationUnitChildren,\n      fetchUsers,\n      fetchUserTypes,\n      meta,\n      onError,\n      t,\n      formValues,\n      touchedFields,\n      formErrors,\n      isLoading,\n      isFormValid,\n      handleInputChange,\n      handleInputBlur,\n      handleSubmit,\n      size,\n      theme,\n      variant,\n    ],\n  );\n\n  // Get components from normalized response, with fallback to meta.components\n  const components: any = currentFlow?.data?.components || currentFlow?.data?.meta?.components || [];\n  const {title, subtitle} = extractHeadings(components);\n  const componentsWithoutHeadings: any = filterHeadings(components);\n\n  // Render props\n  const renderProps: BaseInviteUserRenderProps = {\n    additionalData: currentFlow?.data?.additionalData,\n    components,\n    error: apiError,\n    executionId: currentFlow?.executionId,\n    fieldErrors: formErrors,\n    handleInputBlur,\n    handleInputChange,\n    handleSubmit,\n    isLoading,\n    isValid: isFormValid,\n    meta,\n    resetFlow,\n    subtitle,\n    title,\n    touched: touchedFields,\n    values: formValues,\n  };\n\n  // If children render prop is provided, use it for custom UI\n  if (children) {\n    return <div className={className}>{children(renderProps)}</div>;\n  }\n\n  // Default rendering\n\n  // Waiting for SDK initialization\n  if (!isInitialized) {\n    return (\n      <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n        <CardPrimitive.Content>\n          <div className={(styles as Record<string, string>)['centeredSpinnerContainer']}>\n            <Spinner size=\"medium\" />\n          </div>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  // Loading state during initialization\n  if (!isFlowInitialized && isLoading) {\n    return (\n      <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n        <CardPrimitive.Content>\n          <div className={(styles as Record<string, string>)['centeredSpinnerContainer']}>\n            <Spinner size=\"medium\" />\n          </div>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  // Error state during initialization\n  if (!currentFlow && apiError) {\n    return (\n      <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n        <CardPrimitive.Content>\n          <AlertPrimitive variant=\"error\">\n            <AlertPrimitive.Title>Error</AlertPrimitive.Title>\n            <AlertPrimitive.Description>{apiError.message}</AlertPrimitive.Description>\n          </AlertPrimitive>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  // Flow components\n  return (\n    <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n      {(showTitle || showSubtitle) && (title || subtitle) && (\n        <CardPrimitive.Header className={styles.header}>\n          {showTitle && title && (\n            <CardPrimitive.Title level={2} className={styles.title}>\n              {title}\n            </CardPrimitive.Title>\n          )}\n          {showSubtitle && subtitle && (\n            <Typography variant=\"body1\" className={styles.subtitle}>\n              {subtitle}\n            </Typography>\n          )}\n        </CardPrimitive.Header>\n      )}\n      <CardPrimitive.Content>\n        {apiError && (\n          <div className={(styles as Record<string, string>)['errorContainer']}>\n            <AlertPrimitive variant=\"error\">\n              <AlertPrimitive.Description>{apiError.message}</AlertPrimitive.Description>\n            </AlertPrimitive>\n          </div>\n        )}\n        <div>\n          {componentsWithoutHeadings && componentsWithoutHeadings.length > 0\n            ? renderComponents(componentsWithoutHeadings)\n            : !isLoading && (\n                <AlertPrimitive variant=\"warning\">\n                  <Typography variant=\"body1\">No form components available</Typography>\n                </AlertPrimitive>\n              )}\n          {isLoading && (\n            <div className={(styles as Record<string, string>)['centeredSpinnerContainerSmall']}>\n              <Spinner size=\"small\" />\n            </div>\n          )}\n        </div>\n      </CardPrimitive.Content>\n    </CardPrimitive>\n  );\n};\n\nexport default BaseInviteUser;\n"],"mappings":"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"}

package/dist/components/presentation/auth/InviteUser/InviteUser.d.ts

@@ -18,7 +18,8 @@ export interface InviteUserProps {
      */
     className?: string;
     /**
-     * Callback when an error occurs.
+     * Callback when an error occurs. It also receives the errors of failed user, flow and user type picker loads,
+     * which the form itself does not show.
      */
     onError?: (error: Error) => void;
     /**

package/dist/components/presentation/auth/InviteUser/InviteUser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InviteUser.d.ts","sourceRoot":"","sources":["../../../../../src/components/presentation/auth/InviteUser/InviteUser.tsx"],"names":[],"mappings":"AASA,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE/D,OAAuB,EAAC,yBAAyB,EAAE,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAGnG;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,CAAC;IAEvD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAE1D;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA+FnC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InviteUser.d.ts","sourceRoot":"","sources":["../../../../../src/components/presentation/auth/InviteUser/InviteUser.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE/D,OAAuB,EAAC,yBAAyB,EAAE,sBAAsB,EAAC,MAAM,kBAAkB,CAAC;AAMnG;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,CAAC;IAEvD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAE1D;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAsGnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/presentation/auth/InviteUser/InviteUser.js

@@ -1,4 +1,7 @@
 import useThunderID_default from "../../../../contexts/ThunderID/useThunderID.js";
+import useFetchUsers_default from "../../../../hooks/useFetchUsers.js";
+import useFetchAuthFlows_default from "../../../../hooks/useFetchAuthFlows.js";
+import useFetchUserTypes_default from "../../../../hooks/useFetchUserTypes.js";
 import BaseInviteUser_default from "./BaseInviteUser.js";
 import { EmbeddedFlowType, getOrganizationUnitChildren, resolveResourceEndpoint } from "@thunderid/browser";
 import { useCallback } from "react";
@@ -100,6 +103,9 @@ const InviteUser = ({ onError, onFlowChange, className, children, size = "medium
 				organizationUnitId: parentId
 			});
 		}, [baseUrl, getAccessToken]),
+		fetchAuthFlows: useFetchAuthFlows_default(),
+		fetchUsers: useFetchUsers_default(),
+		fetchUserTypes: useFetchUserTypes_default(),
 		isInitialized,
 		size,
 		variant,

package/dist/components/presentation/auth/InviteUser/InviteUser.js.map

@@ -1 +1 @@
-{"version":3,"file":"InviteUser.js","names":["InviteUser: FC<InviteUserProps>","useThunderID","flowExecuteUrl: string","BaseInviteUser"],"sources":["../../../../../src/components/presentation/auth/InviteUser/InviteUser.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  EmbeddedFlowType,\n  getOrganizationUnitChildren,\n  OrganizationUnitListResponse,\n  resolveResourceEndpoint,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useCallback} from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport BaseInviteUser, {BaseInviteUserRenderProps, InviteUserFlowResponse} from './BaseInviteUser';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\n\n/**\n * Render props for InviteUser (re-exported for convenience).\n */\nexport type InviteUserRenderProps = BaseInviteUserRenderProps;\n\n/**\n * Props for the InviteUser component.\n */\nexport interface InviteUserProps {\n  /**\n   * Render props function for custom UI.\n   * If not provided, default UI will be rendered by the SDK.\n   */\n  children?: (props: InviteUserRenderProps) => ReactNode;\n\n  /**\n   * Custom CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Callback when an error occurs.\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Callback when the flow state changes.\n   */\n  onFlowChange?: (response: InviteUserFlowResponse) => void;\n\n  /**\n   * Whether to show the subtitle.\n   */\n  showSubtitle?: boolean;\n\n  /**\n   * Whether to show the title.\n   */\n  showTitle?: boolean;\n\n  /**\n   * Size variant for the component.\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Theme variant for the component card.\n   */\n  variant?: 'outlined' | 'elevated';\n}\n\n/**\n * InviteUser component for initiating invite user flow.\n *\n * This component is designed for admin users in the thunder-develop app to:\n * 1. Select a user type (if multiple available)\n * 2. Enter user details (username, email)\n * 3. Generate an invite link for the end user\n *\n * The component uses the authenticated ThunderID SDK context to make API calls\n * with the admin's access token (requires 'system' scope).\n *\n * @example\n * ```tsx\n * import { InviteUser } from '@thunderid/react';\n *\n * const InviteUserPage = () => {\n *   const [inviteLink, setInviteLink] = useState<string>();\n *\n *   return (\n *     <InviteUser\n *       onInviteLinkGenerated={(link, executionId) => setInviteLink(link)}\n *       onError={(error) => console.error(error)}\n *     >\n *       {({ values, components, isLoading, handleInputChange, handleSubmit, inviteLink, isInviteGenerated }) => (\n *         <div>\n *           {isInviteGenerated ? (\n *             <div>\n *               <h2>Invite Link Generated!</h2>\n *               <p>{inviteLink}</p>\n *             </div>\n *           ) : (\n *             // Render form based on components\n *           )}\n *         </div>\n *       )}\n *     </InviteUser>\n *   );\n * };\n * ```\n */\nconst InviteUser: FC<InviteUserProps> = ({\n  onError,\n  onFlowChange,\n  className,\n  children,\n  size = 'medium',\n  variant = 'outlined',\n  showTitle = true,\n  showSubtitle = true,\n}: InviteUserProps): ReactElement => {\n  const {http, baseUrl, endpoints, getAccessToken, isInitialized} = useThunderID();\n\n  // The user-onboarding flow runs on the resource server, which may differ from `baseUrl` (the\n  // authorization server) in a trusted-issuer setup. Honor the `flowExecute` endpoint override.\n  const flowExecuteUrl: string = resolveResourceEndpoint('flowExecute', {endpoints}) ?? `${baseUrl}/flow/execute`;\n\n  /**\n   * Initialize the invite user flow.\n   * Makes an authenticated request to /flow/execute with flowType: USER_ONBOARDING.\n   */\n  const handleInitialize = async (payload: Record<string, any>): Promise<InviteUserFlowResponse> => {\n    const response: any = await http.request({\n      data: {\n        ...payload,\n        flowType: EmbeddedFlowType.UserOnboarding,\n        verbose: true,\n      },\n      headers: {\n        Accept: 'application/json',\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n      url: flowExecuteUrl,\n    } as any);\n\n    return response.data as InviteUserFlowResponse;\n  };\n\n  /**\n   * Submit flow step data.\n   * Makes an authenticated request to /flow/execute with the step data.\n   */\n  const handleSubmit = async (payload: Record<string, any>): Promise<InviteUserFlowResponse> => {\n    const response: any = await http.request({\n      data: {\n        ...payload,\n        verbose: true,\n      },\n      headers: {\n        Accept: 'application/json',\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n      url: flowExecuteUrl,\n    } as any);\n\n    return response.data as InviteUserFlowResponse;\n  };\n\n  const fetchOrganizationUnitChildren: (\n    parentId: string,\n    limit: number,\n    offset: number,\n  ) => Promise<OrganizationUnitListResponse> = useCallback(\n    async (parentId: string, limit: number, offset: number): Promise<OrganizationUnitListResponse> => {\n      const accessToken: string = await getAccessToken();\n\n      return getOrganizationUnitChildren({\n        baseUrl,\n        headers: {Authorization: `Bearer ${accessToken}`},\n        limit,\n        offset,\n        organizationUnitId: parentId,\n      });\n    },\n    [baseUrl, getAccessToken],\n  );\n\n  return (\n    <BaseInviteUser\n      onInitialize={handleInitialize}\n      onSubmit={handleSubmit}\n      onError={onError}\n      onFlowChange={onFlowChange}\n      className={className}\n      fetchOrganizationUnitChildren={fetchOrganizationUnitChildren}\n      isInitialized={isInitialized}\n      size={size}\n      variant={variant}\n      showTitle={showTitle}\n      showSubtitle={showSubtitle}\n    >\n      {children}\n    </BaseInviteUser>\n  );\n};\n\nexport default InviteUser;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGA,MAAMA,cAAmC,EACvC,SACA,cACA,WACA,UACA,OAAO,UACP,UAAU,YACV,YAAY,MACZ,eAAe,WACoB;CACnC,MAAM,EAAC,MAAM,SAAS,WAAW,gBAAgB,kBAAiBC,sBAAc;CAIhF,MAAMC,iBAAyB,wBAAwB,eAAe,EAAC,WAAU,CAAC,IAAI,GAAG,QAAQ;;;;;CAMjG,MAAM,mBAAmB,OAAO,YAAkE;AAehG,UAdsB,MAAM,KAAK,QAAQ;GACvC,MAAM;IACJ,GAAG;IACH,UAAU,iBAAiB;IAC3B,SAAS;IACV;GACD,SAAS;IACP,QAAQ;IACR,gBAAgB;IACjB;GACD,QAAQ;GACR,KAAK;GACN,CAAQ,EAEO;;;;;;CAOlB,MAAM,eAAe,OAAO,YAAkE;AAc5F,UAbsB,MAAM,KAAK,QAAQ;GACvC,MAAM;IACJ,GAAG;IACH,SAAS;IACV;GACD,SAAS;IACP,QAAQ;IACR,gBAAgB;IACjB;GACD,QAAQ;GACR,KAAK;GACN,CAAQ,EAEO;;AAsBlB,QACE,oBAACC;EACC,cAAc;EACd,UAAU;EACD;EACK;EACH;EACX,+BAtByC,YAC3C,OAAO,UAAkB,OAAe,WAA0D;AAGhG,UAAO,4BAA4B;IACjC;IACA,SAAS,EAAC,eAAe,UAJC,MAAM,gBAAgB,IAIC;IACjD;IACA;IACA,oBAAoB;IACrB,CAAC;KAEJ,CAAC,SAAS,eAAe,CAC1B;EAUkB;EACT;EACG;EACE;EACG;EAEb;GACc;;AAIrB,yBAAe"}
+{"version":3,"file":"InviteUser.js","names":["InviteUser: FC<InviteUserProps>","useThunderID","flowExecuteUrl: string","BaseInviteUser","useFetchAuthFlows","useFetchUsers","useFetchUserTypes"],"sources":["../../../../../src/components/presentation/auth/InviteUser/InviteUser.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  EmbeddedFlowType,\n  FetchAuthFlows,\n  FetchUsers,\n  FetchUserTypes,\n  getOrganizationUnitChildren,\n  OrganizationUnitListResponse,\n  resolveResourceEndpoint,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useCallback} from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport BaseInviteUser, {BaseInviteUserRenderProps, InviteUserFlowResponse} from './BaseInviteUser';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\nimport useFetchAuthFlows from '../../../../hooks/useFetchAuthFlows';\nimport useFetchUsers from '../../../../hooks/useFetchUsers';\nimport useFetchUserTypes from '../../../../hooks/useFetchUserTypes';\n\n/**\n * Render props for InviteUser (re-exported for convenience).\n */\nexport type InviteUserRenderProps = BaseInviteUserRenderProps;\n\n/**\n * Props for the InviteUser component.\n */\nexport interface InviteUserProps {\n  /**\n   * Render props function for custom UI.\n   * If not provided, default UI will be rendered by the SDK.\n   */\n  children?: (props: InviteUserRenderProps) => ReactNode;\n\n  /**\n   * Custom CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Callback when an error occurs. It also receives the errors of failed user, flow and user type picker loads,\n   * which the form itself does not show.\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Callback when the flow state changes.\n   */\n  onFlowChange?: (response: InviteUserFlowResponse) => void;\n\n  /**\n   * Whether to show the subtitle.\n   */\n  showSubtitle?: boolean;\n\n  /**\n   * Whether to show the title.\n   */\n  showTitle?: boolean;\n\n  /**\n   * Size variant for the component.\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Theme variant for the component card.\n   */\n  variant?: 'outlined' | 'elevated';\n}\n\n/**\n * InviteUser component for initiating invite user flow.\n *\n * This component is designed for admin users in the thunder-develop app to:\n * 1. Select a user type (if multiple available)\n * 2. Enter user details (username, email)\n * 3. Generate an invite link for the end user\n *\n * The component uses the authenticated ThunderID SDK context to make API calls\n * with the admin's access token (requires 'system' scope).\n *\n * @example\n * ```tsx\n * import { InviteUser } from '@thunderid/react';\n *\n * const InviteUserPage = () => {\n *   const [inviteLink, setInviteLink] = useState<string>();\n *\n *   return (\n *     <InviteUser\n *       onInviteLinkGenerated={(link, executionId) => setInviteLink(link)}\n *       onError={(error) => console.error(error)}\n *     >\n *       {({ values, components, isLoading, handleInputChange, handleSubmit, inviteLink, isInviteGenerated }) => (\n *         <div>\n *           {isInviteGenerated ? (\n *             <div>\n *               <h2>Invite Link Generated!</h2>\n *               <p>{inviteLink}</p>\n *             </div>\n *           ) : (\n *             // Render form based on components\n *           )}\n *         </div>\n *       )}\n *     </InviteUser>\n *   );\n * };\n * ```\n */\nconst InviteUser: FC<InviteUserProps> = ({\n  onError,\n  onFlowChange,\n  className,\n  children,\n  size = 'medium',\n  variant = 'outlined',\n  showTitle = true,\n  showSubtitle = true,\n}: InviteUserProps): ReactElement => {\n  const {http, baseUrl, endpoints, getAccessToken, isInitialized} = useThunderID();\n\n  // The user-onboarding flow runs on the resource server, which may differ from `baseUrl` (the\n  // authorization server) in a trusted-issuer setup. Honor the `flowExecute` endpoint override.\n  const flowExecuteUrl: string = resolveResourceEndpoint('flowExecute', {endpoints}) ?? `${baseUrl}/flow/execute`;\n\n  /**\n   * Initialize the invite user flow.\n   * Makes an authenticated request to /flow/execute with flowType: USER_ONBOARDING.\n   */\n  const handleInitialize = async (payload: Record<string, any>): Promise<InviteUserFlowResponse> => {\n    const response: any = await http.request({\n      data: {\n        ...payload,\n        flowType: EmbeddedFlowType.UserOnboarding,\n        verbose: true,\n      },\n      headers: {\n        Accept: 'application/json',\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n      url: flowExecuteUrl,\n    } as any);\n\n    return response.data as InviteUserFlowResponse;\n  };\n\n  /**\n   * Submit flow step data.\n   * Makes an authenticated request to /flow/execute with the step data.\n   */\n  const handleSubmit = async (payload: Record<string, any>): Promise<InviteUserFlowResponse> => {\n    const response: any = await http.request({\n      data: {\n        ...payload,\n        verbose: true,\n      },\n      headers: {\n        Accept: 'application/json',\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n      url: flowExecuteUrl,\n    } as any);\n\n    return response.data as InviteUserFlowResponse;\n  };\n\n  const fetchOrganizationUnitChildren: (\n    parentId: string,\n    limit: number,\n    offset: number,\n  ) => Promise<OrganizationUnitListResponse> = useCallback(\n    async (parentId: string, limit: number, offset: number): Promise<OrganizationUnitListResponse> => {\n      const accessToken: string = await getAccessToken();\n\n      return getOrganizationUnitChildren({\n        baseUrl,\n        headers: {Authorization: `Bearer ${accessToken}`},\n        limit,\n        offset,\n        organizationUnitId: parentId,\n      });\n    },\n    [baseUrl, getAccessToken],\n  );\n\n  const fetchAuthFlows: FetchAuthFlows = useFetchAuthFlows();\n  const fetchUsers: FetchUsers = useFetchUsers();\n  const fetchUserTypes: FetchUserTypes = useFetchUserTypes();\n\n  return (\n    <BaseInviteUser\n      onInitialize={handleInitialize}\n      onSubmit={handleSubmit}\n      onError={onError}\n      onFlowChange={onFlowChange}\n      className={className}\n      fetchOrganizationUnitChildren={fetchOrganizationUnitChildren}\n      fetchAuthFlows={fetchAuthFlows}\n      fetchUsers={fetchUsers}\n      fetchUserTypes={fetchUserTypes}\n      isInitialized={isInitialized}\n      size={size}\n      variant={variant}\n      showTitle={showTitle}\n      showSubtitle={showSubtitle}\n    >\n      {children}\n    </BaseInviteUser>\n  );\n};\n\nexport default InviteUser;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAMA,cAAmC,EACvC,SACA,cACA,WACA,UACA,OAAO,UACP,UAAU,YACV,YAAY,MACZ,eAAe,WACoB;CACnC,MAAM,EAAC,MAAM,SAAS,WAAW,gBAAgB,kBAAiBC,sBAAc;CAIhF,MAAMC,iBAAyB,wBAAwB,eAAe,EAAC,WAAU,CAAC,IAAI,GAAG,QAAQ;;;;;CAMjG,MAAM,mBAAmB,OAAO,YAAkE;AAehG,UAdsB,MAAM,KAAK,QAAQ;GACvC,MAAM;IACJ,GAAG;IACH,UAAU,iBAAiB;IAC3B,SAAS;IACV;GACD,SAAS;IACP,QAAQ;IACR,gBAAgB;IACjB;GACD,QAAQ;GACR,KAAK;GACN,CAAQ,EAEO;;;;;;CAOlB,MAAM,eAAe,OAAO,YAAkE;AAc5F,UAbsB,MAAM,KAAK,QAAQ;GACvC,MAAM;IACJ,GAAG;IACH,SAAS;IACV;GACD,SAAS;IACP,QAAQ;IACR,gBAAgB;IACjB;GACD,QAAQ;GACR,KAAK;GACN,CAAQ,EAEO;;AA0BlB,QACE,oBAACC;EACC,cAAc;EACd,UAAU;EACD;EACK;EACH;EACX,+BA1ByC,YAC3C,OAAO,UAAkB,OAAe,WAA0D;AAGhG,UAAO,4BAA4B;IACjC;IACA,SAAS,EAAC,eAAe,UAJC,MAAM,gBAAgB,IAIC;IACjD;IACA;IACA,oBAAoB;IACrB,CAAC;KAEJ,CAAC,SAAS,eAAe,CAC1B;EAcG,gBAZmCC,2BAAmB;EAatD,YAZ2BC,uBAAe;EAa1C,gBAZmCC,2BAAmB;EAavC;EACT;EACG;EACE;EACG;EAEb;GACc;;AAIrB,yBAAe"}

package/dist/components/primitives/AuthFlowSelect/AuthFlowSelect.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { BaseAuthFlowSelectProps } from './BaseAuthFlowSelect';
+export type AuthFlowSelectProps = Omit<BaseAuthFlowSelectProps, 'fetchAuthFlows'>;
+/**
+ * Authentication-flow picker for signed-in screens. It loads the authentication flows itself with the
+ * signed-in user's access token and submits the chosen flow's ID, so it takes no data source. For any
+ * other data source use `Select` with `useInfiniteOptions`.
+ */
+declare const AuthFlowSelect: FC<AuthFlowSelectProps>;
+export default AuthFlowSelect;
+//# sourceMappingURL=AuthFlowSelect.d.ts.map

package/dist/components/primitives/AuthFlowSelect/AuthFlowSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthFlowSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/AuthFlowSelect/AuthFlowSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAA2B,EAAC,uBAAuB,EAAC,MAAM,sBAAsB,CAAC;AAGjF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,CAAC;AAElF;;;;GAIG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAE3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/primitives/AuthFlowSelect/AuthFlowSelect.js

@@ -0,0 +1,19 @@
+import useFetchAuthFlows_default from "../../../hooks/useFetchAuthFlows.js";
+import BaseAuthFlowSelect_default from "./BaseAuthFlowSelect.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/AuthFlowSelect/AuthFlowSelect.tsx
+/**
+* Authentication-flow picker for signed-in screens. It loads the authentication flows itself with the
+* signed-in user's access token and submits the chosen flow's ID, so it takes no data source. For any
+* other data source use `Select` with `useInfiniteOptions`.
+*/
+const AuthFlowSelect = (props) => /* @__PURE__ */ jsx(BaseAuthFlowSelect_default, {
+	...props,
+	fetchAuthFlows: useFetchAuthFlows_default()
+});
+var AuthFlowSelect_default = AuthFlowSelect;
+
+//#endregion
+export { AuthFlowSelect_default as default };
+//# sourceMappingURL=AuthFlowSelect.js.map

package/dist/components/primitives/AuthFlowSelect/AuthFlowSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthFlowSelect.js","names":["AuthFlowSelect: FC<AuthFlowSelectProps>","BaseAuthFlowSelect","useFetchAuthFlows"],"sources":["../../../../src/components/primitives/AuthFlowSelect/AuthFlowSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC} from 'react';\nimport BaseAuthFlowSelect, {BaseAuthFlowSelectProps} from './BaseAuthFlowSelect';\nimport useFetchAuthFlows from '../../../hooks/useFetchAuthFlows';\n\nexport type AuthFlowSelectProps = Omit<BaseAuthFlowSelectProps, 'fetchAuthFlows'>;\n\n/**\n * Authentication-flow picker for signed-in screens. It loads the authentication flows itself with the\n * signed-in user's access token and submits the chosen flow's ID, so it takes no data source. For any\n * other data source use `Select` with `useInfiniteOptions`.\n */\nconst AuthFlowSelect: FC<AuthFlowSelectProps> = (props: AuthFlowSelectProps) => (\n  <BaseAuthFlowSelect {...props} fetchAuthFlows={useFetchAuthFlows()} />\n);\n\nexport default AuthFlowSelect;\n"],"mappings":";;;;;;;;;;AAcA,MAAMA,kBAA2C,UAC/C,oBAACC;CAAmB,GAAI;CAAO,gBAAgBC,2BAAmB;EAAI;AAGxE,6BAAe"}

package/dist/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.d.ts

@@ -0,0 +1,14 @@
+import type { FetchAuthFlows } from '@thunderid/browser';
+import { FC } from 'react';
+import { ResourceSelectProps } from '../Select/ResourceSelect';
+export interface BaseAuthFlowSelectProps extends Omit<ResourceSelectProps, 'bemBlock' | 'defaults' | 'fallbackMessages' | 'fetchPage' | 'mapping' | 'messageKey' | 'resource' | 'type'> {
+    fetchAuthFlows?: FetchAuthFlows;
+}
+/**
+ * Authentication-flow picker: a `Select` that loads from the given `fetchAuthFlows`, showing each
+ * flow by its name and submitting its ID. Building block for {@link AuthFlowSelect}; for a custom
+ * data source use `Select` with `useInfiniteOptions`.
+ */
+declare const BaseAuthFlowSelect: FC<BaseAuthFlowSelectProps>;
+export default BaseAuthFlowSelect;
+//# sourceMappingURL=BaseAuthFlowSelect.d.ts.map

package/dist/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseAuthFlowSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,cAAc,EAAuB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAAuB,EAAC,mBAAmB,EAAC,MAAM,0BAA0B,CAAC;AAE7E,MAAM,WAAW,uBACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,kBAAkB,GAAG,WAAW,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAC5G;IACD,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAID;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAcnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.js

@@ -0,0 +1,29 @@
+import ResourceSelect_default from "../Select/ResourceSelect.js";
+import { AuthFlowSelectConstants, EmbeddedFlowComponentType } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.tsx
+const AUTH_FLOW_DEFAULTS = { labelAttributes: AuthFlowSelectConstants.LABEL_ATTRIBUTES };
+/**
+* Authentication-flow picker: a `Select` that loads from the given `fetchAuthFlows`, showing each
+* flow by its name and submitting its ID. Building block for {@link AuthFlowSelect}; for a custom
+* data source use `Select` with `useInfiniteOptions`.
+*/
+const BaseAuthFlowSelect = ({ fetchAuthFlows,...rest }) => /* @__PURE__ */ jsx(ResourceSelect_default, {
+	...rest,
+	bemBlock: "auth-flow-select",
+	defaults: AUTH_FLOW_DEFAULTS,
+	fallbackMessages: {
+		ariaLabel: "Select a login flow",
+		empty: "No login flows found."
+	},
+	fetchPage: fetchAuthFlows,
+	messageKey: "auth_flow_select",
+	resource: "auth flows",
+	type: EmbeddedFlowComponentType.AuthFlowSelect
+});
+var BaseAuthFlowSelect_default = BaseAuthFlowSelect;
+
+//#endregion
+export { BaseAuthFlowSelect_default as default };
+//# sourceMappingURL=BaseAuthFlowSelect.js.map

package/dist/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseAuthFlowSelect.js","names":["AUTH_FLOW_DEFAULTS: SelectOptionDefaults","BaseAuthFlowSelect: FC<BaseAuthFlowSelectProps>","ResourceSelect"],"sources":["../../../../src/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {AuthFlowSelectConstants, EmbeddedFlowComponentType} from '@thunderid/browser';\nimport type {FetchAuthFlows, SelectOptionDefaults} from '@thunderid/browser';\nimport {FC} from 'react';\nimport ResourceSelect, {ResourceSelectProps} from '../Select/ResourceSelect';\n\nexport interface BaseAuthFlowSelectProps\n  extends Omit<\n    ResourceSelectProps,\n    'bemBlock' | 'defaults' | 'fallbackMessages' | 'fetchPage' | 'mapping' | 'messageKey' | 'resource' | 'type'\n  > {\n  fetchAuthFlows?: FetchAuthFlows;\n}\n\nconst AUTH_FLOW_DEFAULTS: SelectOptionDefaults = {labelAttributes: AuthFlowSelectConstants.LABEL_ATTRIBUTES};\n\n/**\n * Authentication-flow picker: a `Select` that loads from the given `fetchAuthFlows`, showing each\n * flow by its name and submitting its ID. Building block for {@link AuthFlowSelect}; for a custom\n * data source use `Select` with `useInfiniteOptions`.\n */\nconst BaseAuthFlowSelect: FC<BaseAuthFlowSelectProps> = ({fetchAuthFlows, ...rest}: BaseAuthFlowSelectProps) => (\n  <ResourceSelect\n    {...rest}\n    bemBlock=\"auth-flow-select\"\n    defaults={AUTH_FLOW_DEFAULTS}\n    fallbackMessages={{\n      ariaLabel: 'Select a login flow',\n      empty: 'No login flows found.',\n    }}\n    fetchPage={fetchAuthFlows}\n    messageKey=\"auth_flow_select\"\n    resource=\"auth flows\"\n    type={EmbeddedFlowComponentType.AuthFlowSelect}\n  />\n);\n\nexport default BaseAuthFlowSelect;\n"],"mappings":";;;;;AAgBA,MAAMA,qBAA2C,EAAC,iBAAiB,wBAAwB,kBAAiB;;;;;;AAO5G,MAAMC,sBAAmD,EAAC,eAAgB,GAAG,WAC3E,oBAACC;CACC,GAAI;CACJ,UAAS;CACT,UAAU;CACV,kBAAkB;EAChB,WAAW;EACX,OAAO;EACR;CACD,WAAW;CACX,YAAW;CACX,UAAS;CACT,MAAM,0BAA0B;EAChC;AAGJ,iCAAe"}

package/dist/components/primitives/CopyableText/CopyableText.d.ts

@@ -4,6 +4,11 @@ export interface CopyableTextProps {
      * Optional label displayed above the value box.
      */
     label?: string;
+    /**
+     * Hides the value in a read-only password field until the user chooses to show it, as for a secret. Copying always
+     * copies the real value.
+     */
+    masked?: boolean;
     /**
      * The text value to display and copy.
      */
@@ -14,6 +19,10 @@ export interface CopyableTextProps {
  * the clipboard. When the button is clicked, it attempts to copy the value using the Clipboard API, and
  * falls back to a textarea method if the API is not supported.
  * After copying, it shows a "Copied!" message for 3 seconds before resetting.
+ *
+ * The copy control is an icon button inside the box in both layouts. With `masked`, the value sits in a read-only
+ * password field with the same show and hide control as `PasswordField`. A browser does not copy out of a password
+ * field, which is why copying is a button of its own.
  */
 declare const CopyableText: FC<CopyableTextProps>;
 export default CopyableText;

package/dist/components/primitives/CopyableText/CopyableText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/CopyableText/CopyableText.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAsC,MAAM,OAAO,CAAC;AAM9D,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAuCvC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CopyableText.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/CopyableText/CopyableText.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAsC,MAAM,OAAO,CAAC;AAS9D,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAID;;;;;;;;;GASG;AACH,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAqDvC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/primitives/CopyableText/CopyableText.js

@@ -1,55 +1,74 @@
 import useTheme_default from "../../../contexts/Theme/useTheme.js";
 import useTranslation_default from "../../../hooks/useTranslation.js";
 import Button_default from "../Button/Button.js";
+import PasswordField_default from "../PasswordField/PasswordField.js";
 import CopyableText_styles_default from "./CopyableText.styles.js";
+import Check_default from "../Icons/Check.js";
+import Copy_default from "../Icons/Copy.js";
+import { copyTextToClipboard } from "@thunderid/browser";
 import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/primitives/CopyableText/CopyableText.tsx
+const ignoreChange = () => void 0;
 /**
 * A React component that displays a text value with an optional label and a button to copy the value to
 * the clipboard. When the button is clicked, it attempts to copy the value using the Clipboard API, and
 * falls back to a textarea method if the API is not supported.
 * After copying, it shows a "Copied!" message for 3 seconds before resetting.
+*
+* The copy control is an icon button inside the box in both layouts. With `masked`, the value sits in a read-only
+* password field with the same show and hide control as `PasswordField`. A browser does not copy out of a password
+* field, which is why copying is a button of its own.
 */
-const CopyableText = ({ label, value }) => {
+const CopyableText = ({ label, masked = false, value }) => {
 	const { theme } = useTheme_default();
 	const styles = CopyableText_styles_default(theme);
 	const { t } = useTranslation_default();
 	const [copied, setCopied] = useState(false);
 	const handleCopy = useCallback(async () => {
-		try {
-			await navigator.clipboard.writeText(value);
-		} catch {
-			const textArea = document.createElement("textarea");
-			textArea.value = value;
-			document.body.appendChild(textArea);
-			textArea.select();
-			document.execCommand("copy");
-			document.body.removeChild(textArea);
-		}
+		await copyTextToClipboard(value);
 		setCopied(true);
 		setTimeout(() => setCopied(false), 3e3);
 	}, [value]);
+	const copyLabel = copied ? t("elements.display.copyable_text.copied") : t("elements.display.copyable_text.copy");
+	const copyButton = /* @__PURE__ */ jsx(Button_default, {
+		variant: "icon",
+		size: "small",
+		className: styles["copyButton"],
+		"aria-label": copyLabel,
+		title: copyLabel,
+		onClick: () => {
+			handleCopy().catch(() => void 0);
+		},
+		children: copied ? /* @__PURE__ */ jsx(Check_default, {
+			width: 16,
+			height: 16
+		}) : /* @__PURE__ */ jsx(Copy_default, {
+			width: 16,
+			height: 16
+		})
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: styles["container"],
 		children: [label && /* @__PURE__ */ jsx("span", {
 			className: styles["label"],
 			children: label
-		}), /* @__PURE__ */ jsxs("div", {
+		}), masked ? /* @__PURE__ */ jsx(PasswordField_default, {
+			"aria-label": label,
+			autoComplete: "off",
+			endAdornment: copyButton,
+			hideLabel: t("elements.display.copyable_text.hide"),
+			onChange: ignoreChange,
+			readOnly: true,
+			showLabel: t("elements.display.copyable_text.show"),
+			value
+		}) : /* @__PURE__ */ jsxs("div", {
 			className: styles["valueBox"],
 			children: [/* @__PURE__ */ jsx("span", {
 				className: styles["valueText"],
 				children: value
-			}), /* @__PURE__ */ jsx(Button_default, {
-				variant: "outline",
-				size: "small",
-				className: styles["copyButton"],
-				onClick: () => {
-					handleCopy().catch(() => void 0);
-				},
-				children: copied ? t("elements.display.copyable_text.copied") : t("elements.display.copyable_text.copy")
-			})]
+			}), copyButton]
 		})]
 	});
 };

package/dist/components/primitives/CopyableText/CopyableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.js","names":["CopyableText: FC<CopyableTextProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","handleCopy: ReturnType<typeof useCallback>","textArea: HTMLTextAreaElement","Button"],"sources":["../../../../src/components/primitives/CopyableText/CopyableText.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, ReactElement, useCallback, useState} from 'react';\nimport useStyles from './CopyableText.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Button from '../Button/Button';\n\nexport interface CopyableTextProps {\n  /**\n   * Optional label displayed above the value box.\n   */\n  label?: string;\n  /**\n   * The text value to display and copy.\n   */\n  value: string;\n}\n\n/**\n * A React component that displays a text value with an optional label and a button to copy the value to\n * the clipboard. When the button is clicked, it attempts to copy the value using the Clipboard API, and\n * falls back to a textarea method if the API is not supported.\n * After copying, it shows a \"Copied!\" message for 3 seconds before resetting.\n */\nconst CopyableText: FC<CopyableTextProps> = ({label, value}: CopyableTextProps): ReactElement => {\n  const {theme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme);\n  const {t} = useTranslation();\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy: ReturnType<typeof useCallback> = useCallback(async (): Promise<void> => {\n    try {\n      await navigator.clipboard.writeText(value);\n    } catch {\n      const textArea: HTMLTextAreaElement = document.createElement('textarea');\n      textArea.value = value;\n      document.body.appendChild(textArea);\n      textArea.select();\n      document.execCommand('copy');\n      document.body.removeChild(textArea);\n    }\n    setCopied(true);\n    setTimeout(() => setCopied(false), 3000);\n  }, [value]);\n\n  return (\n    <div className={styles['container']}>\n      {label && <span className={styles['label']}>{label}</span>}\n      <div className={styles['valueBox']}>\n        <span className={styles['valueText']}>{value}</span>\n        <Button\n          variant=\"outline\"\n          size=\"small\"\n          className={styles['copyButton']}\n          onClick={() => {\n            handleCopy().catch(() => undefined);\n          }}\n        >\n          {copied ? t('elements.display.copyable_text.copied') : t('elements.display.copyable_text.copy')}\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport default CopyableText;\n"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAMA,gBAAuC,EAAC,OAAO,YAA4C;CAC/F,MAAM,EAAC,UAASC,kBAAU;CAC1B,MAAMC,SAAiCC,4BAAU,MAAM;CACvD,MAAM,EAAC,MAAKC,wBAAgB;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAE3C,MAAMC,aAA6C,YAAY,YAA2B;AACxF,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,MAAM;UACpC;GACN,MAAMC,WAAgC,SAAS,cAAc,WAAW;AACxE,YAAS,QAAQ;AACjB,YAAS,KAAK,YAAY,SAAS;AACnC,YAAS,QAAQ;AACjB,YAAS,YAAY,OAAO;AAC5B,YAAS,KAAK,YAAY,SAAS;;AAErC,YAAU,KAAK;AACf,mBAAiB,UAAU,MAAM,EAAE,IAAK;IACvC,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC;EAAI,WAAW,OAAO;aACpB,SAAS,oBAAC;GAAK,WAAW,OAAO;aAAW;IAAa,EAC1D,qBAAC;GAAI,WAAW,OAAO;cACrB,oBAAC;IAAK,WAAW,OAAO;cAAe;KAAa,EACpD,oBAACC;IACC,SAAQ;IACR,MAAK;IACL,WAAW,OAAO;IAClB,eAAe;AACb,iBAAY,CAAC,YAAY,OAAU;;cAGpC,SAAS,EAAE,wCAAwC,GAAG,EAAE,sCAAsC;KACxF;IACL;GACF;;AAIV,2BAAe"}
+{"version":3,"file":"CopyableText.js","names":["CopyableText: FC<CopyableTextProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","handleCopy: ReturnType<typeof useCallback>","copyLabel: string","copyButton: ReactElement","Button","Check","Copy","PasswordField"],"sources":["../../../../src/components/primitives/CopyableText/CopyableText.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {copyTextToClipboard} from '@thunderid/browser';\nimport {FC, ReactElement, useCallback, useState} from 'react';\nimport useStyles from './CopyableText.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Button from '../Button/Button';\nimport Check from '../Icons/Check';\nimport Copy from '../Icons/Copy';\nimport PasswordField from '../PasswordField/PasswordField';\n\nexport interface CopyableTextProps {\n  /**\n   * Optional label displayed above the value box.\n   */\n  label?: string;\n  /**\n   * Hides the value in a read-only password field until the user chooses to show it, as for a secret. Copying always\n   * copies the real value.\n   */\n  masked?: boolean;\n  /**\n   * The text value to display and copy.\n   */\n  value: string;\n}\n\nconst ignoreChange = (): void => undefined;\n\n/**\n * A React component that displays a text value with an optional label and a button to copy the value to\n * the clipboard. When the button is clicked, it attempts to copy the value using the Clipboard API, and\n * falls back to a textarea method if the API is not supported.\n * After copying, it shows a \"Copied!\" message for 3 seconds before resetting.\n *\n * The copy control is an icon button inside the box in both layouts. With `masked`, the value sits in a read-only\n * password field with the same show and hide control as `PasswordField`. A browser does not copy out of a password\n * field, which is why copying is a button of its own.\n */\nconst CopyableText: FC<CopyableTextProps> = ({label, masked = false, value}: CopyableTextProps): ReactElement => {\n  const {theme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme);\n  const {t} = useTranslation();\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy: ReturnType<typeof useCallback> = useCallback(async (): Promise<void> => {\n    await copyTextToClipboard(value);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 3000);\n  }, [value]);\n\n  const copyLabel: string = copied\n    ? t('elements.display.copyable_text.copied')\n    : t('elements.display.copyable_text.copy');\n\n  const copyButton: ReactElement = (\n    <Button\n      variant=\"icon\"\n      size=\"small\"\n      className={styles['copyButton']}\n      aria-label={copyLabel}\n      title={copyLabel}\n      onClick={() => {\n        handleCopy().catch(() => undefined);\n      }}\n    >\n      {copied ? <Check width={16} height={16} /> : <Copy width={16} height={16} />}\n    </Button>\n  );\n\n  return (\n    <div className={styles['container']}>\n      {label && <span className={styles['label']}>{label}</span>}\n      {masked ? (\n        <PasswordField\n          aria-label={label}\n          autoComplete=\"off\"\n          endAdornment={copyButton}\n          hideLabel={t('elements.display.copyable_text.hide')}\n          onChange={ignoreChange}\n          readOnly\n          showLabel={t('elements.display.copyable_text.show')}\n          value={value}\n        />\n      ) : (\n        <div className={styles['valueBox']}>\n          <span className={styles['valueText']}>{value}</span>\n          {copyButton}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default CopyableText;\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,qBAA2B;;;;;;;;;;;AAYjC,MAAMA,gBAAuC,EAAC,OAAO,SAAS,OAAO,YAA4C;CAC/G,MAAM,EAAC,UAASC,kBAAU;CAC1B,MAAMC,SAAiCC,4BAAU,MAAM;CACvD,MAAM,EAAC,MAAKC,wBAAgB;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAE3C,MAAMC,aAA6C,YAAY,YAA2B;AACxF,QAAM,oBAAoB,MAAM;AAChC,YAAU,KAAK;AACf,mBAAiB,UAAU,MAAM,EAAE,IAAK;IACvC,CAAC,MAAM,CAAC;CAEX,MAAMC,YAAoB,SACtB,EAAE,wCAAwC,GAC1C,EAAE,sCAAsC;CAE5C,MAAMC,aACJ,oBAACC;EACC,SAAQ;EACR,MAAK;EACL,WAAW,OAAO;EAClB,cAAY;EACZ,OAAO;EACP,eAAe;AACb,eAAY,CAAC,YAAY,OAAU;;YAGpC,SAAS,oBAACC;GAAM,OAAO;GAAI,QAAQ;IAAM,GAAG,oBAACC;GAAK,OAAO;GAAI,QAAQ;IAAM;GACrE;AAGX,QACE,qBAAC;EAAI,WAAW,OAAO;aACpB,SAAS,oBAAC;GAAK,WAAW,OAAO;aAAW;IAAa,EACzD,SACC,oBAACC;GACC,cAAY;GACZ,cAAa;GACb,cAAc;GACd,WAAW,EAAE,sCAAsC;GACnD,UAAU;GACV;GACA,WAAW,EAAE,sCAAsC;GAC5C;IACP,GAEF,qBAAC;GAAI,WAAW,OAAO;cACrB,oBAAC;IAAK,WAAW,OAAO;cAAe;KAAa,EACnD;IACG;GAEJ;;AAIV,2BAAe"}

package/dist/components/primitives/CopyableText/CopyableText.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/CopyableText/CopyableText.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAuCpD,CAAC;AAEJ,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CopyableText.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/CopyableText/CopyableText.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA0CpD,CAAC;AAEJ,eAAe,SAAS,CAAC"}

package/dist/components/primitives/CopyableText/CopyableText.styles.js

@@ -10,8 +10,11 @@ const useStyles = (theme) => useMemo(() => ({
         width: 100%;
       `,
 	copyButton: css`
-        flex-shrink: 0;
-        white-space: nowrap;
+        color: ${theme.vars.colors.text.secondary};
+
+        &:hover:not(:disabled) {
+          color: ${theme.vars.colors.text.primary};
+        }
       `,
 	label: css`
         color: ${theme.vars.colors.text.secondary};

package/dist/components/primitives/CopyableText/CopyableText.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.styles.js","names":[],"sources":["../../../../src/components/primitives/CopyableText/CopyableText.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\nconst useStyles = (theme: Theme): Record<string, string> =>\n  useMemo(\n    () => ({\n      container: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${theme.vars.spacing.unit} * 0.5);\n        width: 100%;\n      `,\n      copyButton: css`\n        flex-shrink: 0;\n        white-space: nowrap;\n      `,\n      label: css`\n        color: ${theme.vars.colors.text.secondary};\n        font-size: 0.875rem;\n        font-weight: 500;\n      `,\n      valueBox: css`\n        align-items: center;\n        background-color: ${theme.vars.colors.background.surface};\n        border: 1px solid ${theme.vars.colors.border};\n        border-radius: ${theme.vars.borderRadius.small};\n        display: flex;\n        gap: calc(${theme.vars.spacing.unit} * 1);\n        padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1);\n      `,\n      valueText: css`\n        color: ${theme.vars.colors.text.primary};\n        flex: 1;\n        font-family: monospace;\n        font-size: 0.85rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        word-break: break-all;\n      `,\n    }),\n    [theme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;AAOA,MAAM,aAAa,UACjB,eACS;CACL,WAAW,GAAG;;;oBAGA,MAAM,KAAK,QAAQ,KAAK;;;CAGtC,YAAY,GAAG;;;;CAIf,OAAO,GAAG;iBACC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,UAAU,GAAG;;4BAES,MAAM,KAAK,OAAO,WAAW,QAAQ;4BACrC,MAAM,KAAK,OAAO,OAAO;yBAC5B,MAAM,KAAK,aAAa,MAAM;;oBAEnC,MAAM,KAAK,QAAQ,KAAK;wBACpB,MAAM,KAAK,QAAQ,KAAK,gBAAgB,MAAM,KAAK,QAAQ,KAAK;;CAElF,WAAW,GAAG;iBACH,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;;CAS3C,GACD,CAAC,MAAM,CACR;AAEH,kCAAe"}
+{"version":3,"file":"CopyableText.styles.js","names":[],"sources":["../../../../src/components/primitives/CopyableText/CopyableText.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\nconst useStyles = (theme: Theme): Record<string, string> =>\n  useMemo(\n    () => ({\n      container: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${theme.vars.spacing.unit} * 0.5);\n        width: 100%;\n      `,\n      copyButton: css`\n        color: ${theme.vars.colors.text.secondary};\n\n        &:hover:not(:disabled) {\n          color: ${theme.vars.colors.text.primary};\n        }\n      `,\n      label: css`\n        color: ${theme.vars.colors.text.secondary};\n        font-size: 0.875rem;\n        font-weight: 500;\n      `,\n      valueBox: css`\n        align-items: center;\n        background-color: ${theme.vars.colors.background.surface};\n        border: 1px solid ${theme.vars.colors.border};\n        border-radius: ${theme.vars.borderRadius.small};\n        display: flex;\n        gap: calc(${theme.vars.spacing.unit} * 1);\n        padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1);\n      `,\n      valueText: css`\n        color: ${theme.vars.colors.text.primary};\n        flex: 1;\n        font-family: monospace;\n        font-size: 0.85rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        word-break: break-all;\n      `,\n    }),\n    [theme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;AAOA,MAAM,aAAa,UACjB,eACS;CACL,WAAW,GAAG;;;oBAGA,MAAM,KAAK,QAAQ,KAAK;;;CAGtC,YAAY,GAAG;iBACJ,MAAM,KAAK,OAAO,KAAK,UAAU;;;mBAG/B,MAAM,KAAK,OAAO,KAAK,QAAQ;;;CAG5C,OAAO,GAAG;iBACC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,UAAU,GAAG;;4BAES,MAAM,KAAK,OAAO,WAAW,QAAQ;4BACrC,MAAM,KAAK,OAAO,OAAO;yBAC5B,MAAM,KAAK,aAAa,MAAM;;oBAEnC,MAAM,KAAK,QAAQ,KAAK;wBACpB,MAAM,KAAK,QAAQ,KAAK,gBAAgB,MAAM,KAAK,QAAQ,KAAK;;CAElF,WAAW,GAAG;iBACH,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;;CAS3C,GACD,CAAC,MAAM,CACR;AAEH,kCAAe"}

package/dist/components/primitives/Icons/Copy.d.ts

@@ -0,0 +1,7 @@
+import { FC, SVGProps } from 'react';
+/**
+ * Copy icon component.
+ */
+declare const Copy: FC<SVGProps<SVGSVGElement>>;
+export default Copy;
+//# sourceMappingURL=Copy.d.ts.map

package/dist/components/primitives/Icons/Copy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Copy.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Icons/Copy.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEnC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,CAgBrC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/primitives/Icons/Copy.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/primitives/Icons/Copy.tsx
+/**
+* Copy icon component.
+*/
+const Copy = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	...props,
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: "14",
+		height: "14",
+		x: "8",
+		y: "8",
+		rx: "2",
+		ry: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })]
+});
+var Copy_default = Copy;
+
+//#endregion
+export { Copy_default as default };
+//# sourceMappingURL=Copy.js.map

package/dist/components/primitives/Icons/Copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Copy.js","names":["Copy: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../src/components/primitives/Icons/Copy.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, SVGProps} from 'react';\n\n/**\n * Copy icon component.\n */\nconst Copy: FC<SVGProps<SVGSVGElement>> = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n    <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n  </svg>\n);\n\nexport default Copy;\n"],"mappings":";;;;;;AAQA,MAAMA,QAAqC,UACzC,qBAAC;CACC,OAAM;CACN,OAAM;CACN,QAAO;CACP,SAAQ;CACR,MAAK;CACL,QAAO;CACP,aAAY;CACZ,eAAc;CACd,gBAAe;CACf,GAAI;YAEJ,oBAAC;EAAK,OAAM;EAAK,QAAO;EAAK,GAAE;EAAI,GAAE;EAAI,IAAG;EAAI,IAAG;GAAM,EACzD,oBAAC,UAAK,GAAE,4DAA4D;EAChE;AAGR,mBAAe"}