@thunderid/react 1.13.0 → 1.15.0

package/dist/cjs/components/account/UserProfile/BaseUserProfile.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserProfile.styles.cjs","names":["valuePlaceholder: string","editButton: string","fieldInner: string","fieldActions: string","complexTextarea: string","objectKey: string","objectValue: string","root: string","card: string","header: string","profileInfo: string","name: string","profileSummary: string","sectionRow: string","sectionLabel: string","sectionValue: string","infoContainer: string","info: string","field: string","lastField: string","label: string","value: string","popup: string"],"sources":["../../../../../src/components/account/UserProfile/BaseUserProfile.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the BaseUserProfile component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> => {\n  const valuePlaceholder: string = css`\n    font-style: italic;\n    opacity: 0.7;\n  `;\n\n  const editButton: string = css`\n    font-style: italic;\n    text-decoration: underline;\n    opacity: 0.7;\n    padding: 0;\n    min-height: auto;\n\n    &:hover:not(:disabled) {\n      background-color: transparent;\n    }\n  `;\n\n  const fieldInner: string = css`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: ${theme.vars.spacing.unit};\n    min-width: 0;\n  `;\n\n  const fieldActions: string = css`\n    display: flex;\n    gap: calc(${theme.vars.spacing.unit} / 2);\n    align-items: center;\n    margin-inline-start: calc(${theme.vars.spacing.unit} * 4);\n  `;\n\n  const complexTextarea: string = css`\n    min-height: 60px;\n    width: 100%;\n    padding: 8px;\n    border: 1px solid ${theme.vars.colors.border};\n    border-radius: ${theme.vars.borderRadius.small};\n    resize: vertical;\n  `;\n\n  const objectKey: string = css`\n    padding: ${theme.vars.spacing.unit};\n    vertical-align: top;\n  `;\n\n  const objectValue: string = css`\n    padding: ${theme.vars.spacing.unit};\n    vertical-align: top;\n  `;\n\n  return useMemo(() => {\n    const root: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      min-width: 600px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n    `;\n\n    const header: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);\n    `;\n\n    const profileInfo: string = css`\n      flex: 1;\n    `;\n\n    const name: string = css`\n      font-size: 1.5rem;\n      font-weight: 600;\n      margin: 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const profileSummary: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    `;\n\n    const sectionRow: string = css`\n      display: flex;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const sectionLabel: string = css`\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: ${theme.vars.colors.text.primary};\n      width: 160px;\n      flex-shrink: 0;\n    `;\n\n    const sectionValue: string = css`\n      flex: 1;\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      font-size: 0.875rem;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const infoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n    `;\n\n    const info: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 1.5) 0;\n      border-bottom: 1px solid ${theme.vars.colors.border};\n    `;\n\n    const field: string = css`\n      display: flex;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} / 2) 0;\n      min-height: 28px;\n    `;\n\n    const lastField: string = css`\n      border-bottom: none;\n    `;\n\n    const label: string = css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${theme.vars.colors.text.secondary};\n      width: 120px;\n      flex-shrink: 0;\n      line-height: 28px;\n      text-align: start;\n    `;\n\n    const value: string = css`\n      color: ${theme.vars.colors.text.primary};\n      flex: 1;\n      display: inline-block;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      overflow: hidden;\n      min-width: 0;\n      min-height: 28px;\n      line-height: 28px;\n      word-break: break-word;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 350px;\n      text-align: start;\n\n      .${withVendorCSSClassPrefix('form-control')} {\n        margin-bottom: 0;\n      }\n\n      input {\n        margin: 0;\n      }\n\n      table {\n        background-color: ${theme.vars.colors.background.surface};\n        border-radius: ${theme.vars.borderRadius.medium};\n        white-space: normal;\n      }\n\n      td {\n        border-color: ${theme.vars.colors.border};\n      }\n    `;\n\n    const popup: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const alert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 3);\n    `;\n\n    return {\n      alert,\n      card,\n      complexTextarea,\n      editButton,\n      field,\n      fieldActions,\n      fieldInner,\n      header,\n      info,\n      infoContainer,\n      label,\n      lastField,\n      name,\n      objectKey,\n      objectValue,\n      popup,\n      profileInfo,\n      profileSummary,\n      root,\n      sectionLabel,\n      sectionRow,\n      sectionValue,\n      value,\n      valuePlaceholder,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.colors.border,\n    theme.vars.borderRadius.large,\n    theme.vars.borderRadius.medium,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n};\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,gBAAgD;CAC/E,MAAMA,mBAA2B,mBAAG;;;;CAKpC,MAAMC,aAAqB,mBAAG;;;;;;;;;;;CAY9B,MAAMC,aAAqB,mBAAG;;;;WAIrB,MAAM,KAAK,QAAQ,KAAK;;;CAIjC,MAAMC,eAAuB,mBAAG;;gBAElB,MAAM,KAAK,QAAQ,KAAK;;gCAER,MAAM,KAAK,QAAQ,KAAK;;CAGtD,MAAMC,kBAA0B,mBAAG;;;;wBAIb,MAAM,KAAK,OAAO,OAAO;qBAC5B,MAAM,KAAK,aAAa,MAAM;;;CAIjD,MAAMC,YAAoB,mBAAG;eAChB,MAAM,KAAK,QAAQ,KAAK;;;CAIrC,MAAMC,cAAsB,mBAAG;eAClB,MAAM,KAAK,QAAQ,KAAK;;;AAIrC,iCAAqB;EACnB,MAAMC,OAAe,mBAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;;;qBAGzB,MAAM,KAAK,WAAW,WAAW;;EAGlD,MAAMC,OAAe,mBAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;;EAGjD,MAAMC,SAAiB,mBAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;4BACd,MAAM,KAAK,QAAQ,KAAK;;EAGhD,MAAMC,cAAsB,mBAAG;;;EAI/B,MAAMC,OAAe,mBAAG;;;;eAIb,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,iBAAyB,mBAAG;;;;;EAMlC,MAAMC,aAAqB,mBAAG;;;sBAGZ,MAAM,KAAK,QAAQ,KAAK;;EAG1C,MAAMC,eAAuB,mBAAG;;;eAGrB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;EAK1C,MAAMC,eAAuB,mBAAG;;;;kBAIlB,MAAM,KAAK,QAAQ,KAAK;;eAE3B,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,gBAAwB,mBAAG;;;;EAKjC,MAAMC,OAAe,mBAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;iCACb,MAAM,KAAK,OAAO,OAAO;;EAGtD,MAAMC,QAAgB,mBAAG;;;sBAGP,MAAM,KAAK,QAAQ,KAAK;;;EAI1C,MAAMC,YAAoB,mBAAG;;;EAI7B,MAAMC,QAAgB,mBAAG;;;eAGd,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;EAO5C,MAAMC,QAAgB,mBAAG;eACd,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;aAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;;;;;;;2DAWH,eAAe,CAAC;;;;;;;;;4BAStB,MAAM,KAAK,OAAO,WAAW,QAAQ;yBACxC,MAAM,KAAK,aAAa,OAAO;;;;;wBAKhC,MAAM,KAAK,OAAO,OAAO;;;EAI7C,MAAMC,QAAgB,mBAAG;sBACP,MAAM,KAAK,QAAQ,KAAK;;AAO1C,SAAO;GACL,OALoB,mBAAG;4BACD,MAAM,KAAK,QAAQ,KAAK;;GAK9C;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;IACA;EACD,MAAM,KAAK,OAAO,WAAW;EAC7B,MAAM,KAAK,OAAO,KAAK;EACvB,MAAM,KAAK,OAAO,KAAK;EACvB,MAAM,KAAK,OAAO;EAClB,MAAM,KAAK,aAAa;EACxB,MAAM,KAAK,aAAa;EACxB,MAAM,KAAK,QAAQ;EACnB,MAAM,KAAK,WAAW;EACtB;EACD,CAAC;;AAGJ,qCAAe"}
+{"version":3,"file":"BaseUserProfile.styles.cjs","names":["valuePlaceholder: string","editButton: string","fieldInner: string","fieldActions: string","complexTextarea: string","objectKey: string","objectValue: string","root: string","card: string","header: string","profileInfo: string","name: string","profileSummary: string","sectionRow: string","sectionLabel: string","sectionValue: string","infoContainer: string","info: string","field: string","lastField: string","label: string","value: string","popup: string","alert: string","verificationStatus: string","verified: string","unverified: string","verification: string","verificationInline: string"],"sources":["../../../../../src/components/account/UserProfile/BaseUserProfile.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the BaseUserProfile component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> => {\n  const valuePlaceholder: string = css`\n    font-style: italic;\n    opacity: 0.7;\n  `;\n\n  const editButton: string = css`\n    font-style: italic;\n    text-decoration: underline;\n    opacity: 0.7;\n    padding: 0;\n    min-height: auto;\n\n    &:hover:not(:disabled) {\n      background-color: transparent;\n    }\n  `;\n\n  const fieldInner: string = css`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: ${theme.vars.spacing.unit};\n    min-width: 0;\n  `;\n\n  const fieldActions: string = css`\n    display: flex;\n    gap: calc(${theme.vars.spacing.unit} / 2);\n    align-items: center;\n    margin-inline-start: calc(${theme.vars.spacing.unit} * 4);\n  `;\n\n  const complexTextarea: string = css`\n    min-height: 60px;\n    width: 100%;\n    padding: 8px;\n    border: 1px solid ${theme.vars.colors.border};\n    border-radius: ${theme.vars.borderRadius.small};\n    resize: vertical;\n  `;\n\n  const objectKey: string = css`\n    padding: ${theme.vars.spacing.unit};\n    vertical-align: top;\n  `;\n\n  const objectValue: string = css`\n    padding: ${theme.vars.spacing.unit};\n    vertical-align: top;\n  `;\n\n  return useMemo(() => {\n    const root: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      min-width: 600px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n    `;\n\n    const header: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);\n    `;\n\n    const profileInfo: string = css`\n      flex: 1;\n    `;\n\n    const name: string = css`\n      font-size: 1.5rem;\n      font-weight: 600;\n      margin: 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const profileSummary: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    `;\n\n    const sectionRow: string = css`\n      display: flex;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const sectionLabel: string = css`\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: ${theme.vars.colors.text.primary};\n      width: 160px;\n      flex-shrink: 0;\n    `;\n\n    const sectionValue: string = css`\n      flex: 1;\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      font-size: 0.875rem;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const infoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n    `;\n\n    const info: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 1.5) 0;\n      border-bottom: 1px solid ${theme.vars.colors.border};\n    `;\n\n    const field: string = css`\n      display: flex;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} / 2) 0;\n      min-height: 28px;\n    `;\n\n    const lastField: string = css`\n      border-bottom: none;\n    `;\n\n    const label: string = css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${theme.vars.colors.text.secondary};\n      width: 120px;\n      flex-shrink: 0;\n      line-height: 28px;\n      text-align: start;\n    `;\n\n    const value: string = css`\n      color: ${theme.vars.colors.text.primary};\n      flex: 1;\n      display: inline-block;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      overflow: hidden;\n      min-width: 0;\n      min-height: 28px;\n      line-height: 28px;\n      word-break: break-word;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 350px;\n      text-align: start;\n\n      .${withVendorCSSClassPrefix('form-control')} {\n        margin-bottom: 0;\n      }\n\n      input {\n        margin: 0;\n      }\n\n      table {\n        background-color: ${theme.vars.colors.background.surface};\n        border-radius: ${theme.vars.borderRadius.medium};\n        white-space: normal;\n      }\n\n      td {\n        border-color: ${theme.vars.colors.border};\n      }\n    `;\n\n    const popup: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const alert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 3);\n    `;\n\n    const verificationStatus: string = css`\n      display: inline-flex;\n      flex-shrink: 0;\n      gap: calc(${theme.vars.spacing.unit} / 2);\n      align-items: center;\n      padding: 0 ${theme.vars.spacing.unit};\n      border-radius: 999px;\n      font-size: 0.75rem;\n      font-weight: 500;\n      line-height: 22px;\n      white-space: nowrap;\n    `;\n\n    const verified: string = css`\n      color: ${theme.vars.colors.success.dark ?? theme.vars.colors.success.main};\n      background: color-mix(in srgb, ${theme.vars.colors.success.main} 12%, transparent);\n    `;\n\n    // Amber marks an action the user can take.\n    const unverified: string = css`\n      color: ${theme.vars.colors.warning.contrastText};\n      background: color-mix(in srgb, ${theme.vars.colors.warning.main} 14%, transparent);\n    `;\n\n    const verification: string = css`\n      padding: ${theme.vars.spacing.unit} 0;\n    `;\n\n    // Starts where the value column starts: the label's width plus the row gap.\n    const verificationInline: string = css`\n      margin-inline-start: calc(120px + ${theme.vars.spacing.unit});\n    `;\n\n    const verificationDialog: string = css`\n      box-sizing: border-box;\n      width: min(448px, calc(100vw - calc(${theme.vars.spacing.unit} * 4)));\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    // Hidden from sight, read by assistive technology.\n    const visuallyHidden: string = css`\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    `;\n\n    return {\n      alert,\n      card,\n      complexTextarea,\n      editButton,\n      field,\n      fieldActions,\n      fieldInner,\n      header,\n      info,\n      infoContainer,\n      label,\n      lastField,\n      name,\n      objectKey,\n      objectValue,\n      popup,\n      profileInfo,\n      profileSummary,\n      root,\n      sectionLabel,\n      sectionRow,\n      sectionValue,\n      unverified,\n      value,\n      valuePlaceholder,\n      verification,\n      verificationDialog,\n      verificationInline,\n      verificationStatus,\n      verified,\n      visuallyHidden,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.colors.border,\n    theme.vars.colors.success.main,\n    theme.vars.colors.success.dark,\n    theme.vars.colors.warning.contrastText,\n    theme.vars.colors.warning.main,\n    theme.vars.borderRadius.large,\n    theme.vars.borderRadius.small,\n    theme.vars.borderRadius.medium,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n};\n\nexport default useStyles;\n"],"mappings":"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"}

package/dist/cjs/components/account/UserProfile/UserProfile.cjs

@@ -4,6 +4,7 @@ const require_useUser = require('../../../contexts/User/useUser.cjs');
 const require_useTranslation = require('../../../hooks/useTranslation.cjs');
 const require_BaseUserProfile = require('./BaseUserProfile.cjs');
 const require_updateMeProfile = require('../../../api/account/updateMeProfile.cjs');
+const require_VerifyAttribute = require('../VerifyAttribute/VerifyAttribute.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
 let react = require("react");
@@ -45,7 +46,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 * />
 * ```
 */
-const UserProfile = ({ preferences, editable = true,...rest }) => {
+const UserProfile = ({ preferences, editable = true, verificationFlowHandle = __thunderid_browser.AttributeVerificationConstants.DEFAULT_FLOW_HANDLE,...rest }) => {
 	const { baseUrl, endpoints, instanceId, preferences: contextPreferences } = require_useThunderID.default();
 	const { profile, flattenedProfile, onUpdateProfile, userSchema } = require_useUser.default();
 	const resolvedPreferences = {
@@ -78,7 +79,18 @@ const UserProfile = ({ preferences, editable = true,...rest }) => {
 			setError(message);
 		}
 	};
+	const renderVerification = ({ attribute, attributeDisplayName, onCancel, onComplete }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VerifyAttribute.default, {
+		attribute,
+		attributeDisplayName,
+		flowHandle: verificationFlowHandle,
+		preferences: resolvedPreferences,
+		variant: rest.mode === "popup" ? "outlined" : "flat",
+		onCancel,
+		onComplete,
+		onDone: onCancel
+	}, attribute);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseUserProfile.default, {
+		renderVerification: isEditableProfile ? renderVerification : void 0,
 		profile: profile ?? void 0,
 		flattenedProfile: flattenedProfile ?? void 0,
 		userSchema: userSchema ?? void 0,

package/dist/cjs/components/account/UserProfile/UserProfile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UserProfile.cjs","names":["UserProfile: FC<UserProfileProps>","useThunderID","useUser","useTranslation","isEditableProfile: boolean","updatedAttributes: Record<string, unknown>","updateMeProfile","caughtError: unknown","message: string","ThunderIDError","BaseUserProfile"],"sources":["../../../../../src/components/account/UserProfile/UserProfile.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {ThunderIDError, User, deepMerge, resolveResourceEndpoint} from '@thunderid/browser';\nimport {FC, ReactElement, useState} from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport BaseUserProfile, {BaseUserProfileProps} from './BaseUserProfile';\nimport updateMeProfile from '../../../api/account/updateMeProfile';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useUser from '../../../contexts/User/useUser';\nimport useTranslation from '../../../hooks/useTranslation';\n\n/**\n * Props for the UserProfile component.\n * Extends BaseUserProfileProps but makes the user prop optional since it will be obtained from useThunderID\n */\nexport type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | 'flattenedProfile'>;\n\n/**\n * UserProfile component displays the authenticated user's profile information in a\n * structured and styled format. It shows user details such as display name, email,\n * username, and other available profile information from ThunderID.\n *\n * This component is the React-specific implementation that uses the BaseUserProfile\n * and automatically retrieves the user data from ThunderID context if not provided.\n *\n * @example\n * ```tsx\n * // Basic usage - will use user from ThunderID context\n * <UserProfile />\n *\n * // With explicit user data\n * <UserProfile user={specificUser} />\n *\n * // With card layout and custom fallback\n * <UserProfile\n *   cardLayout={true}\n *   fallback={<div>Please sign in to view your profile</div>}\n * />\n *\n * // With field filtering - only show specific fields\n * <UserProfile\n *   showFields={['name.givenName', 'name.familyName', 'emails']}\n * />\n *\n * // With field hiding - hide specific fields\n * <UserProfile\n *   hideFields={['phoneNumbers', 'addresses']}\n * />\n * ```\n */\nconst UserProfile: FC<UserProfileProps> = ({preferences, editable = true, ...rest}: UserProfileProps): ReactElement => {\n  const {baseUrl, endpoints, instanceId, preferences: contextPreferences} = useThunderID();\n  const {profile, flattenedProfile, onUpdateProfile, userSchema} = useUser();\n  const resolvedPreferences = {\n    ...contextPreferences,\n    ...preferences,\n    user: {\n      ...contextPreferences?.user,\n      ...preferences?.user,\n    },\n  };\n  const {t} = useTranslation(resolvedPreferences?.i18n);\n  const isEditableProfile: boolean = resolvedPreferences?.user?.fetchUserProfile === false ? false : editable;\n\n  const [error, setError] = useState<string | null>(null);\n\n  const handleProfileUpdate = async (payload: Record<string, unknown>): Promise<void> => {\n    setError(null);\n\n    try {\n      const updatedAttributes: Record<string, unknown> = deepMerge(\n        (profile?.['attributes'] as Record<string, unknown>) ?? {},\n        payload,\n      );\n\n      Object.keys(updatedAttributes).forEach((key) => {\n        if (updatedAttributes[key] === undefined || updatedAttributes[key] === null) {\n          delete updatedAttributes[key];\n        }\n      });\n\n      const response: User = await updateMeProfile({\n        baseUrl,\n        url: resolveResourceEndpoint('usersMe', {endpoints}),\n        instanceId,\n        payload: updatedAttributes,\n      });\n      onUpdateProfile(response);\n    } catch (caughtError: unknown) {\n      let message: string = t('user.profile.update.generic.error');\n\n      if (caughtError instanceof ThunderIDError) {\n        message = caughtError?.message;\n      }\n\n      setError(message);\n    }\n  };\n\n  return (\n    <BaseUserProfile\n      profile={profile ?? undefined}\n      flattenedProfile={flattenedProfile ?? undefined}\n      userSchema={userSchema ?? undefined}\n      editable={isEditableProfile}\n      onUpdate={isEditableProfile ? handleProfileUpdate : undefined}\n      error={error}\n      preferences={resolvedPreferences}\n      {...rest}\n    />\n  );\n};\n\nexport default UserProfile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAMA,eAAqC,EAAC,aAAa,WAAW,KAAM,GAAG,WAA0C;CACrH,MAAM,EAAC,SAAS,WAAW,YAAY,aAAa,uBAAsBC,8BAAc;CACxF,MAAM,EAAC,SAAS,kBAAkB,iBAAiB,eAAcC,yBAAS;CAC1E,MAAM,sBAAsB;EAC1B,GAAG;EACH,GAAG;EACH,MAAM;GACJ,GAAG,oBAAoB;GACvB,GAAG,aAAa;GACjB;EACF;CACD,MAAM,EAAC,MAAKC,+BAAe,qBAAqB,KAAK;CACrD,MAAMC,oBAA6B,qBAAqB,MAAM,qBAAqB,QAAQ,QAAQ;CAEnG,MAAM,CAAC,OAAO,gCAAoC,KAAK;CAEvD,MAAM,sBAAsB,OAAO,YAAoD;AACrF,WAAS,KAAK;AAEd,MAAI;GACF,MAAMC,uDACH,UAAU,iBAA6C,EAAE,EAC1D,QACD;AAED,UAAO,KAAK,kBAAkB,CAAC,SAAS,QAAQ;AAC9C,QAAI,kBAAkB,SAAS,UAAa,kBAAkB,SAAS,KACrE,QAAO,kBAAkB;KAE3B;AAQF,mBANuB,MAAMC,gCAAgB;IAC3C;IACA,sDAA6B,WAAW,EAAC,WAAU,CAAC;IACpD;IACA,SAAS;IACV,CAAC,CACuB;WAClBC,aAAsB;GAC7B,IAAIC,UAAkB,EAAE,oCAAoC;AAE5D,OAAI,uBAAuBC,mCACzB,WAAU,aAAa;AAGzB,YAAS,QAAQ;;;AAIrB,QACE,2CAACC;EACC,SAAS,WAAW;EACpB,kBAAkB,oBAAoB;EACtC,YAAY,cAAc;EAC1B,UAAU;EACV,UAAU,oBAAoB,sBAAsB;EAC7C;EACP,aAAa;EACb,GAAI;GACJ;;AAIN,0BAAe"}
+{"version":3,"file":"UserProfile.cjs","names":["UserProfile: FC<UserProfileProps>","AttributeVerificationConstants","useThunderID","useUser","useTranslation","isEditableProfile: boolean","updatedAttributes: Record<string, unknown>","updateMeProfile","caughtError: unknown","message: string","ThunderIDError","VerifyAttribute","BaseUserProfile"],"sources":["../../../../../src/components/account/UserProfile/UserProfile.tsx"],"sourcesContent":["// Copyright 2025-2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  AttributeVerificationConstants,\n  ThunderIDError,\n  User,\n  deepMerge,\n  resolveResourceEndpoint,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useState} from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport BaseUserProfile, {BaseUserProfileProps, BaseUserProfileVerificationRenderProps} from './BaseUserProfile';\nimport updateMeProfile from '../../../api/account/updateMeProfile';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useUser from '../../../contexts/User/useUser';\nimport useTranslation from '../../../hooks/useTranslation';\nimport VerifyAttribute from '../VerifyAttribute/VerifyAttribute';\n\n/**\n * Props for the UserProfile component.\n * Extends BaseUserProfileProps but makes the user prop optional since it will be obtained from useThunderID\n */\nexport type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | 'flattenedProfile'> & {\n  /**\n   * Handle of the `SELF` flow that verifies an attribute. Defaults to the server's shipped\n   * `default-self-attribute-verification-flow`.\n   */\n  verificationFlowHandle?: string;\n};\n\n/**\n * UserProfile component displays the authenticated user's profile information in a\n * structured and styled format. It shows user details such as display name, email,\n * username, and other available profile information from ThunderID.\n *\n * This component is the React-specific implementation that uses the BaseUserProfile\n * and automatically retrieves the user data from ThunderID context if not provided.\n *\n * @example\n * ```tsx\n * // Basic usage - will use user from ThunderID context\n * <UserProfile />\n *\n * // With explicit user data\n * <UserProfile user={specificUser} />\n *\n * // With card layout and custom fallback\n * <UserProfile\n *   cardLayout={true}\n *   fallback={<div>Please sign in to view your profile</div>}\n * />\n *\n * // With field filtering - only show specific fields\n * <UserProfile\n *   showFields={['name.givenName', 'name.familyName', 'emails']}\n * />\n *\n * // With field hiding - hide specific fields\n * <UserProfile\n *   hideFields={['phoneNumbers', 'addresses']}\n * />\n * ```\n */\nconst UserProfile: FC<UserProfileProps> = ({\n  preferences,\n  editable = true,\n  verificationFlowHandle = AttributeVerificationConstants.DEFAULT_FLOW_HANDLE,\n  ...rest\n}: UserProfileProps): ReactElement => {\n  const {baseUrl, endpoints, instanceId, preferences: contextPreferences} = useThunderID();\n  const {profile, flattenedProfile, onUpdateProfile, userSchema} = useUser();\n  const resolvedPreferences = {\n    ...contextPreferences,\n    ...preferences,\n    user: {\n      ...contextPreferences?.user,\n      ...preferences?.user,\n    },\n  };\n  const {t} = useTranslation(resolvedPreferences?.i18n);\n  const isEditableProfile: boolean = resolvedPreferences?.user?.fetchUserProfile === false ? false : editable;\n\n  const [error, setError] = useState<string | null>(null);\n\n  const handleProfileUpdate = async (payload: Record<string, unknown>): Promise<void> => {\n    setError(null);\n\n    try {\n      const updatedAttributes: Record<string, unknown> = deepMerge(\n        (profile?.['attributes'] as Record<string, unknown>) ?? {},\n        payload,\n      );\n\n      Object.keys(updatedAttributes).forEach((key) => {\n        if (updatedAttributes[key] === undefined || updatedAttributes[key] === null) {\n          delete updatedAttributes[key];\n        }\n      });\n\n      const response: User = await updateMeProfile({\n        baseUrl,\n        url: resolveResourceEndpoint('usersMe', {endpoints}),\n        instanceId,\n        payload: updatedAttributes,\n      });\n      onUpdateProfile(response);\n    } catch (caughtError: unknown) {\n      let message: string = t('user.profile.update.generic.error');\n\n      if (caughtError instanceof ThunderIDError) {\n        message = caughtError?.message;\n      }\n\n      setError(message);\n    }\n  };\n\n  const renderVerification = ({\n    attribute,\n    attributeDisplayName,\n    onCancel,\n    onComplete,\n  }: BaseUserProfileVerificationRenderProps): ReactNode => (\n    <VerifyAttribute\n      key={attribute}\n      attribute={attribute}\n      attributeDisplayName={attributeDisplayName}\n      flowHandle={verificationFlowHandle}\n      preferences={resolvedPreferences}\n      // Popup mode shows the panel under the row as a card; inline mode shows it in a dialog.\n      variant={rest.mode === 'popup' ? 'outlined' : 'flat'}\n      onCancel={onCancel}\n      onComplete={onComplete}\n      onDone={onCancel}\n    />\n  );\n\n  return (\n    <BaseUserProfile\n      renderVerification={isEditableProfile ? renderVerification : undefined}\n      profile={profile ?? undefined}\n      flattenedProfile={flattenedProfile ?? undefined}\n      userSchema={userSchema ?? undefined}\n      editable={isEditableProfile}\n      onUpdate={isEditableProfile ? handleProfileUpdate : undefined}\n      error={error}\n      preferences={resolvedPreferences}\n      {...rest}\n    />\n  );\n};\n\nexport default UserProfile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAMA,eAAqC,EACzC,aACA,WAAW,MACX,yBAAyBC,mDAA+B,oBACxD,GAAG,WACiC;CACpC,MAAM,EAAC,SAAS,WAAW,YAAY,aAAa,uBAAsBC,8BAAc;CACxF,MAAM,EAAC,SAAS,kBAAkB,iBAAiB,eAAcC,yBAAS;CAC1E,MAAM,sBAAsB;EAC1B,GAAG;EACH,GAAG;EACH,MAAM;GACJ,GAAG,oBAAoB;GACvB,GAAG,aAAa;GACjB;EACF;CACD,MAAM,EAAC,MAAKC,+BAAe,qBAAqB,KAAK;CACrD,MAAMC,oBAA6B,qBAAqB,MAAM,qBAAqB,QAAQ,QAAQ;CAEnG,MAAM,CAAC,OAAO,gCAAoC,KAAK;CAEvD,MAAM,sBAAsB,OAAO,YAAoD;AACrF,WAAS,KAAK;AAEd,MAAI;GACF,MAAMC,uDACH,UAAU,iBAA6C,EAAE,EAC1D,QACD;AAED,UAAO,KAAK,kBAAkB,CAAC,SAAS,QAAQ;AAC9C,QAAI,kBAAkB,SAAS,UAAa,kBAAkB,SAAS,KACrE,QAAO,kBAAkB;KAE3B;AAQF,mBANuB,MAAMC,gCAAgB;IAC3C;IACA,sDAA6B,WAAW,EAAC,WAAU,CAAC;IACpD;IACA,SAAS;IACV,CAAC,CACuB;WAClBC,aAAsB;GAC7B,IAAIC,UAAkB,EAAE,oCAAoC;AAE5D,OAAI,uBAAuBC,mCACzB,WAAU,aAAa;AAGzB,YAAS,QAAQ;;;CAIrB,MAAM,sBAAsB,EAC1B,WACA,sBACA,UACA,iBAEA,2CAACC;EAEY;EACW;EACtB,YAAY;EACZ,aAAa;EAEb,SAAS,KAAK,SAAS,UAAU,aAAa;EACpC;EACE;EACZ,QAAQ;IATH,UAUL;AAGJ,QACE,2CAACC;EACC,oBAAoB,oBAAoB,qBAAqB;EAC7D,SAAS,WAAW;EACpB,kBAAkB,oBAAoB;EACtC,YAAY,cAAc;EAC1B,UAAU;EACV,UAAU,oBAAoB,sBAAsB;EAC7C;EACP,aAAa;EACb,GAAI;GACJ;;AAIN,0BAAe"}

package/dist/cjs/components/account/VerifyAttribute/BaseVerifyAttribute.cjs

@@ -0,0 +1,358 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+const require_ComponentRendererContext = require('../../../contexts/ComponentRenderer/ComponentRendererContext.cjs');
+const require_useThunderID = require('../../../contexts/ThunderID/useThunderID.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_ComponentPreferencesContext = require('../../../contexts/I18n/ComponentPreferencesContext.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_flowTransformer = require('../../../utils/flowTransformer.cjs');
+const require_useForm = require('../../../hooks/useForm.cjs');
+const require_Spinner = require('../../primitives/Spinner/Spinner.cjs');
+const require_Button = require('../../primitives/Button/Button.cjs');
+const require_Typography = require('../../primitives/Typography/Typography.cjs');
+const require_composeAffixedInputs = require('../../../utils/composeAffixedInputs.cjs');
+const require_Alert = require('../../primitives/Alert/Alert.cjs');
+const require_AuthOptionFactory = require('../../auth/flow/AuthOptionFactory.cjs');
+const require_getAuthComponentHeadings = require('../../../utils/getAuthComponentHeadings.cjs');
+const require_BaseVerifyAttribute_styles = require('./BaseVerifyAttribute.styles.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/account/VerifyAttribute/BaseVerifyAttribute.tsx
+const collectFlowIds = ({ actions, inputs }) => ({
+	actions: new Set(actions.map((component) => component.id)),
+	fields: new Map(inputs.map((component) => [component.ref ?? component.id, component.type]))
+});
+const withFlowTestIds = (node, ids) => {
+	if (Array.isArray(node)) return node.map((child) => withFlowTestIds(child, ids));
+	if (!(0, react.isValidElement)(node)) return node;
+	const props = node.props;
+	if (typeof props.name === "string" && ids.fields.has(props.name)) {
+		const testId$1 = `thunderid-field-${props.name}`;
+		if (ids.fields.get(props.name) === __thunderid_browser.EmbeddedFlowComponentType.OtpInput) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": testId$1,
+			children: node
+		}, node.key);
+		return (0, react.cloneElement)(node, { "data-testid": testId$1 });
+	}
+	const testId = node.key !== null && ids.actions.has(String(node.key)) ? `thunderid-action-${String(node.key)}` : void 0;
+	const children = props.children === void 0 ? void 0 : withFlowTestIds(props.children, ids);
+	if (!testId && children === props.children) return node;
+	return (0, react.cloneElement)(node, {
+		...testId && { "data-testid": testId },
+		...props.children !== void 0 && { children }
+	});
+};
+/**
+* Internal component that renders the verification steps and manages flow state.
+*
+* @internal
+*/
+const BaseVerifyAttributeContent = ({ attributeDisplayName = "", buttonClassName = "", children = void 0, className = "", inputClassName = "", isInitialized = true, onCancel = void 0, onComplete = void 0, onDone = void 0, onError = void 0, onFlowChange = void 0, onInitialize = void 0, onSubmit = void 0, showSubtitle = true, showTitle = true, size = "medium", variant = "outlined" }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const customRenderers = (0, react.useContext)(require_ComponentRendererContext.default);
+	const { t } = require_useTranslation.default();
+	const { meta, vendor } = require_useThunderID.default();
+	const styles = require_BaseVerifyAttribute_styles.default(theme, colorScheme);
+	const [state, setState] = (0, react.useState)("loading");
+	const [isSubmitting, setIsSubmitting] = (0, react.useState)(false);
+	const [currentFlow, setCurrentFlow] = (0, react.useState)(null);
+	const [error, setError] = (0, react.useState)(null);
+	const isSubmittingRef = (0, react.useRef)(false);
+	const initializationAttemptedRef = (0, react.useRef)(false);
+	const challengeTokenRef = (0, react.useRef)(null);
+	const labelParams = { attribute: attributeDisplayName };
+	const normalize = (0, react.useCallback)((response) => {
+		if (!response?.data || Array.isArray(response.data.components)) return response;
+		const { components } = require_flowTransformer.normalizeFlowResponse(response, t, {
+			defaultErrorKey: "user.verification.error",
+			resolveTranslations: false,
+			throwOnError: false
+		}, meta);
+		return {
+			...response,
+			data: {
+				...response.data,
+				components
+			}
+		};
+	}, [t, meta]);
+	const extractFormFields = (0, react.useCallback)((components) => (0, __thunderid_browser.getFlowStepComponents)(components).inputs.map((component) => {
+		const ruleValidator = (0, __thunderid_browser.buildValidatorFromRules)(component.validation);
+		return {
+			initialValue: "",
+			name: component.ref ?? component.id,
+			required: component.required ?? false,
+			validator: (value) => {
+				if (component.required && (!value || value.trim() === "")) return t("validations.required.field.error");
+				if (ruleValidator && value) {
+					const ruleMessage = ruleValidator(value);
+					if (ruleMessage) return t(ruleMessage);
+				}
+				return null;
+			}
+		};
+	}), [t]);
+	const formFields = (0, react.useMemo)(() => extractFormFields(currentFlow?.data?.components ?? []), [currentFlow, extractFormFields]);
+	const { values: formValues, touched: touchedFields, errors: formErrors, isValid: isFormValid, setValue: setFormValue, setTouched: setFormTouched, setTouchedFields, setErrors: setFormErrors, clearErrors: clearFormErrors, validateForm, touchAllFields, reset: resetForm } = require_useForm.useForm({
+		fields: formFields,
+		initialValues: {},
+		requiredMessage: t("validations.required.field.error"),
+		validateOnBlur: true,
+		validateOnChange: false
+	});
+	(0, react.useEffect)(() => {
+		clearFormErrors();
+		const responseFieldErrors = currentFlow?.data?.fieldErrors;
+		if (!responseFieldErrors || responseFieldErrors.length === 0) return;
+		const errors = {};
+		const touched = {};
+		responseFieldErrors.forEach((fe) => {
+			if (!(fe.identifier in errors)) {
+				errors[fe.identifier] = fe.message;
+				touched[fe.identifier] = true;
+			}
+		});
+		setTouchedFields(touched);
+		setFormErrors(errors);
+	}, [
+		currentFlow,
+		setFormErrors,
+		setTouchedFields,
+		clearFormErrors
+	]);
+	const handleResponse = (0, react.useCallback)((rawResponse) => {
+		const response = normalize(rawResponse);
+		onFlowChange?.(response);
+		if (response.challengeToken !== void 0) challengeTokenRef.current = response.challengeToken ?? null;
+		if (response.flowStatus === __thunderid_browser.EmbeddedSelfFlowStatus.Error) {
+			const message = require_flowTransformer.extractErrorMessage(response, t, "user.verification.error");
+			setError(message);
+			setState("failed");
+			onError?.(new Error(message));
+			return;
+		}
+		if (response.flowStatus === __thunderid_browser.EmbeddedSelfFlowStatus.Complete) {
+			setError(null);
+			setState("complete");
+			onComplete?.(response);
+			return;
+		}
+		setCurrentFlow((previous) => response.data?.additionalData || !previous?.data?.additionalData ? response : {
+			...response,
+			data: {
+				...response.data,
+				additionalData: previous.data.additionalData
+			}
+		});
+		resetForm();
+		setError(response.error ? require_flowTransformer.extractErrorMessage(response, t, "user.verification.error") : null);
+		setState("active");
+	}, [
+		normalize,
+		onFlowChange,
+		onError,
+		onComplete,
+		resetForm,
+		t
+	]);
+	const handleFailure = (0, react.useCallback)((caughtError) => {
+		setError(t("user.verification.error"));
+		setState("failed");
+		onError?.(caughtError instanceof Error ? caughtError : new Error(String(caughtError)));
+	}, [onError, t]);
+	(0, react.useEffect)(() => {
+		if (!isInitialized || initializationAttemptedRef.current) return;
+		initializationAttemptedRef.current = true;
+		(async () => {
+			try {
+				const response = await onInitialize?.();
+				if (response) handleResponse(response);
+			} catch (caughtError) {
+				handleFailure(caughtError);
+			}
+		})();
+	}, [
+		isInitialized,
+		onInitialize,
+		handleResponse,
+		handleFailure
+	]);
+	const handleInputChange = (name, value) => {
+		setFormValue(name, value);
+	};
+	const handleInputBlur = (name) => {
+		setFormTouched(name, true);
+	};
+	const handleSubmit = async (component, data, skipValidation) => {
+		if (!currentFlow || isSubmittingRef.current) return;
+		if (!skipValidation) {
+			touchAllFields();
+			if (!validateForm().isValid) return;
+		}
+		isSubmittingRef.current = true;
+		setIsSubmitting(true);
+		setError(null);
+		try {
+			const composedData = data ? require_composeAffixedInputs.default(data, vendor) : {};
+			const inputs = Object.fromEntries(Object.entries(composedData).filter(([, value]) => value !== null && value !== void 0 && value !== ""));
+			const response = await onSubmit?.({
+				executionId: currentFlow.executionId,
+				...component.id && { action: component.id },
+				...challengeTokenRef.current ? { challengeToken: challengeTokenRef.current } : {},
+				inputs
+			});
+			if (response) handleResponse(response);
+		} catch (caughtError) {
+			handleFailure(caughtError);
+		} finally {
+			isSubmittingRef.current = false;
+			setIsSubmitting(false);
+		}
+	};
+	const additionalData = currentFlow?.data?.additionalData ?? {};
+	const maskedDestination = additionalData[__thunderid_browser.AttributeVerificationConstants.MASKED_DESTINATION_KEY];
+	const destination = typeof maskedDestination === "string" && maskedDestination ? maskedDestination : null;
+	const headings = require_getAuthComponentHeadings.default(currentFlow?.data?.components ?? [], void 0, void 0, t("user.verification.heading", labelParams), t("user.verification.subheading.generic"));
+	const { componentsWithoutHeadings } = headings;
+	const step = (0, __thunderid_browser.getFlowStepComponents)(componentsWithoutHeadings ?? []);
+	const isAwaitingLink = state === "active" && formFields.length === 0 && step.actions.length === 0;
+	const title = (0, __thunderid_browser.resolveFlowTemplateLiterals)(headings.title, {
+		meta,
+		t
+	});
+	const hasFlowSubtitle = !!headings.headingComponents.subheading;
+	let subtitle = (0, __thunderid_browser.resolveFlowTemplateLiterals)(headings.subtitle, {
+		meta,
+		t
+	});
+	let destinationText = null;
+	if (destination && hasFlowSubtitle) destinationText = t("user.verification.destination", { destination });
+	else if (destination) subtitle = t(isAwaitingLink ? "user.verification.subheading.link" : "user.verification.subheading", { destination });
+	const isLoading = state === "loading" || isSubmitting;
+	const containerClasses = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("verify-attribute"), (0, __thunderid_browser.withVendorCSSClassPrefix)(`verify-attribute--${size}`), (0, __thunderid_browser.withVendorCSSClassPrefix)(`verify-attribute--${variant}`), styles["root"], variant === "outlined" ? styles["card"] : "", className);
+	if (children) {
+		const resend = state === "active" ? step.resend : void 0;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: containerClasses,
+			children: children({
+				additionalData,
+				components: componentsWithoutHeadings ?? [],
+				destination,
+				destinationText,
+				error,
+				fieldErrors: formErrors,
+				handleInputChange,
+				handleResend: resend ? () => handleSubmit(resend, void 0, true) : void 0,
+				handleSubmit,
+				isAwaitingLink,
+				isComplete: state === "complete",
+				isFailed: state === "failed",
+				isLoading,
+				isValid: isFormValid,
+				onCancel,
+				onDone: isAwaitingLink ? onDone : void 0,
+				subtitle,
+				successMessage: t("user.verification.success", labelParams),
+				title,
+				touched: touchedFields,
+				values: formValues
+			})
+		});
+	}
+	const alertClasses = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("verify-attribute", "alert")), styles["alert"]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClasses,
+		"aria-busy": isLoading,
+		children: [
+			state === "active" && (showTitle || showSubtitle) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("verify-attribute", "header")), styles["header"]),
+				children: [showTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+					variant: "h5",
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("verify-attribute", "heading")), styles["heading"]),
+					children: title
+				}), showSubtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.default, {
+					variant: "body2",
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("verify-attribute", "subheading")), styles["subheading"]),
+					children: [subtitle, destinationText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("verify-attribute", "destination")),
+						children: ` ${destinationText}`
+					})]
+				})]
+			}),
+			state === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("verify-attribute", "loading")), styles["loading"]),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, { size: "medium" })
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+				variant: "error",
+				className: alertClasses,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: error })
+			}),
+			state === "complete" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+				variant: "success",
+				className: alertClasses,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: t("user.verification.success", labelParams) })
+			}),
+			state === "active" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("verify-attribute", "content")), styles["content"]),
+				children: withFlowTestIds(require_AuthOptionFactory.renderVerificationComponents(componentsWithoutHeadings ?? [], formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, handleInputChange, {
+					_customRenderers: customRenderers,
+					_theme: theme,
+					additionalData,
+					buttonClassName: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("verify-attribute", "button")), buttonClassName),
+					inputClassName: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("verify-attribute", "input")), inputClassName),
+					meta,
+					onInputBlur: handleInputBlur,
+					onSubmit: (component, data, skip) => {
+						handleSubmit(component, data, skip);
+					},
+					size,
+					t,
+					variant,
+					vendor
+				}), collectFlowIds(step))
+			}),
+			(!!onCancel || isAwaitingLink && !!onDone) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("verify-attribute", "actions")), styles["actions"]),
+				children: [isAwaitingLink && onDone && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					size: "small",
+					color: "primary",
+					variant: "solid",
+					onClick: onDone,
+					"data-testid": "thunderid-action-verificationDone",
+					children: t("user.verification.buttons.done.text")
+				}), onCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					size: "small",
+					color: "secondary",
+					variant: "outline",
+					onClick: onCancel,
+					disabled: isSubmitting,
+					"data-testid": "thunderid-action-verificationCancel",
+					children: state === "active" || state === "loading" ? t("user.verification.buttons.cancel.text") : t("user.verification.buttons.close.text")
+				})]
+			})
+		]
+	});
+};
+/**
+* BaseVerifyAttribute renders the server-described steps of a self attribute verification flow.
+* Accepts API functions as props to stay framework independent.
+*/
+const BaseVerifyAttribute = ({ preferences = void 0,...rest }) => {
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseVerifyAttributeContent, { ...rest });
+	if (!preferences) return content;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentPreferencesContext.default.Provider, {
+		value: preferences,
+		children: content
+	});
+};
+var BaseVerifyAttribute_default = BaseVerifyAttribute;
+
+//#endregion
+exports.default = BaseVerifyAttribute_default;
+//# sourceMappingURL=BaseVerifyAttribute.cjs.map

package/dist/cjs/components/account/VerifyAttribute/BaseVerifyAttribute.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVerifyAttribute.cjs","names":["props: {children?: ReactNode; name?: unknown}","testId","EmbeddedFlowComponentType","testId: string | undefined","children: ReactNode","BaseVerifyAttributeContent: FC<Omit<BaseVerifyAttributeProps, 'preferences'>>","useTheme","customRenderers: ComponentRendererMap","ComponentRendererContext","useTranslation","useThunderID","styles: Record<string, string>","useStyles","isSubmittingRef: MutableRefObject<boolean>","initializationAttemptedRef: MutableRefObject<boolean>","challengeTokenRef: MutableRefObject<string | null>","labelParams: Record<string, string>","normalizeFlowResponse","formFields: FormField[]","useForm","responseFieldErrors: FieldError[] | undefined","errors: Record<string, string>","touched: Record<string, boolean>","response: EmbeddedSelfFlowResponse","EmbeddedSelfFlowStatus","message: string","extractErrorMessage","response: EmbeddedSelfFlowResponse | undefined","composedData: Record<string, string>","composeAffixedInputs","inputs: Record<string, string>","additionalData: Record<string, unknown>","maskedDestination: unknown","AttributeVerificationConstants","destination: string | null","headings: ReturnType<typeof getAuthComponentHeadings>","getAuthComponentHeadings","step: FlowStepComponents","isAwaitingLink: boolean","title: string","subtitle: string","destinationText: string | null","isLoading: boolean","containerClasses: string","cx","resend: EmbeddedFlowComponent | undefined","alertClasses: string","Typography","Spinner","AlertPrimitive","renderVerificationComponents","Button","BaseVerifyAttribute: FC<BaseVerifyAttributeProps>","content: ReactElement","ComponentPreferencesContext"],"sources":["../../../../../src/components/account/VerifyAttribute/BaseVerifyAttribute.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  AttributeVerificationConstants,\n  EmbeddedFlowComponent,\n  EmbeddedFlowComponentType,\n  EmbeddedSelfFlowRequest,\n  EmbeddedSelfFlowResponse,\n  EmbeddedSelfFlowStatus,\n  FieldError,\n  FlowStepComponents,\n  Preferences,\n  bem,\n  buildValidatorFromRules,\n  getFlowStepComponents,\n  resolveFlowTemplateLiterals,\n  withVendorCSSClassPrefix,\n} from '@thunderid/browser';\nimport {\n  FC,\n  MutableRefObject,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useStyles from './BaseVerifyAttribute.styles';\nimport ComponentRendererContext, {\n  ComponentRendererMap,\n} from '../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport ComponentPreferencesContext from '../../../contexts/I18n/ComponentPreferencesContext';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport {FormField, useForm} from '../../../hooks/useForm';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\nimport composeAffixedInputs from '../../../utils/composeAffixedInputs';\nimport {extractErrorMessage, normalizeFlowResponse} from '../../../utils/flowTransformer';\nimport getAuthComponentHeadings from '../../../utils/getAuthComponentHeadings';\nimport {renderVerificationComponents} from '../../auth/flow/AuthOptionFactory';\nimport AlertPrimitive from '../../primitives/Alert/Alert';\nimport Button from '../../primitives/Button/Button';\nimport Spinner from '../../primitives/Spinner/Spinner';\nimport Typography from '../../primitives/Typography/Typography';\n\ntype VerificationState = 'loading' | 'active' | 'complete' | 'failed';\n\ninterface FlowIds {\n  actions: Set<string>;\n  // Input name (`ref`, else `id`) to component type.\n  fields: Map<string, string>;\n}\n\n// Flow identifiers of the step's inputs and actions.\nconst collectFlowIds = ({actions, inputs}: FlowStepComponents): FlowIds => ({\n  actions: new Set(actions.map((component: EmbeddedFlowComponent) => component.id)),\n  fields: new Map(inputs.map((component: EmbeddedFlowComponent) => [component.ref ?? component.id, component.type])),\n});\n\n// Tags the elements rendered from the flow with `thunderid-field-<ref>` and `thunderid-action-<id>`.\n// The shared factory keys an element by its component id and names an input by its ref.\nconst withFlowTestIds = (node: ReactNode, ids: FlowIds): ReactNode => {\n  if (Array.isArray(node)) return node.map((child: ReactNode) => withFlowTestIds(child, ids));\n  if (!isValidElement(node)) return node;\n\n  const props: {children?: ReactNode; name?: unknown} = node.props as {children?: ReactNode; name?: unknown};\n  if (typeof props.name === 'string' && ids.fields.has(props.name)) {\n    const testId = `thunderid-field-${props.name}`;\n\n    // The OTP field renders one input per character and takes no test identifier, so wrap it.\n    if (ids.fields.get(props.name) === EmbeddedFlowComponentType.OtpInput) {\n      return (\n        <div key={node.key} data-testid={testId}>\n          {node}\n        </div>\n      );\n    }\n\n    return cloneElement(node as ReactElement<Record<string, unknown>>, {'data-testid': testId});\n  }\n\n  const testId: string | undefined =\n    node.key !== null && ids.actions.has(String(node.key)) ? `thunderid-action-${String(node.key)}` : undefined;\n  const children: ReactNode = props.children === undefined ? undefined : withFlowTestIds(props.children, ids);\n  if (!testId && children === props.children) return node;\n\n  return cloneElement(node as ReactElement<Record<string, unknown>>, {\n    ...(testId && {'data-testid': testId}),\n    ...(props.children !== undefined && {children}),\n  });\n};\n\n/**\n * What {@link BaseVerifyAttribute} hands its `children` render function, so the steps can be drawn\n * with any UI.\n */\nexport interface BaseVerifyAttributeRenderProps {\n  additionalData: Record<string, unknown>;\n  /**\n   * The step's components, without its headings.\n   */\n  components: EmbeddedFlowComponent[];\n  /**\n   * Masked destination the code or link was sent to, when the flow reports it.\n   */\n  destination: string | null;\n  /**\n   * Translated \"Sent to …\" line, set when the flow has its own prompt in `subtitle`.\n   */\n  destinationText: string | null;\n  /**\n   * Translated error of the last request, or the refusal.\n   */\n  error: string | null;\n  fieldErrors: Record<string, string>;\n  handleInputChange: (name: string, value: string) => void;\n  /**\n   * Sends a new code. Set only while the step has a resend action.\n   */\n  handleResend?: () => Promise<void>;\n  /**\n   * Submits a step. Pass `skipValidation` for an action, such as a resend, that sends no inputs.\n   */\n  handleSubmit: (\n    component: EmbeddedFlowComponent,\n    data?: Record<string, string>,\n    skipValidation?: boolean,\n  ) => Promise<void>;\n  isAwaitingLink: boolean;\n  isComplete: boolean;\n  /**\n   * Whether the server refused the verification or the request failed; the flow cannot continue.\n   */\n  isFailed: boolean;\n  isLoading: boolean;\n  isValid: boolean;\n  /**\n   * Closes the panel. Set only when the app passes `onCancel`.\n   */\n  onCancel?: () => void;\n  /**\n   * Confirms a link the user opened outside the app. Set only while the step waits for a link and\n   * the app passes `onDone`.\n   */\n  onDone?: () => void;\n  subtitle: string;\n  /**\n   * Translated message for a recorded verification.\n   */\n  successMessage: string;\n  title: string;\n  touched: Record<string, boolean>;\n  values: Record<string, string>;\n}\n\n/**\n * Props for the BaseVerifyAttribute component.\n */\nexport interface BaseVerifyAttributeProps {\n  /**\n   * Label of the attribute being verified, used in the default heading and success message.\n   */\n  attributeDisplayName?: string;\n  buttonClassName?: string;\n  /**\n   * Renders custom UI in place of the default steps. Receives the step, the values and their setters,\n   * submit, resend, cancel, the destination, and the loading, error and completed state.\n   */\n  children?: (props: BaseVerifyAttributeRenderProps) => ReactNode;\n  className?: string;\n  inputClassName?: string;\n  isInitialized?: boolean;\n  /**\n   * Called when the user closes the panel. The close action is shown only when this is set.\n   */\n  onCancel?: () => void;\n  /**\n   * Called once the server has recorded the verification.\n   */\n  onComplete?: (response: EmbeddedSelfFlowResponse) => void;\n  /**\n   * Called when the user selects Done after the flow sent a link, which they confirm outside the app.\n   * The Done action is shown only when this is set.\n   */\n  onDone?: () => void;\n  /**\n   * Called when the server refuses the verification or the request fails.\n   */\n  onError?: (error: Error) => void;\n  onFlowChange?: (response: EmbeddedSelfFlowResponse) => void;\n  onInitialize?: () => Promise<EmbeddedSelfFlowResponse>;\n  onSubmit?: (payload: EmbeddedSelfFlowRequest) => Promise<EmbeddedSelfFlowResponse>;\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   */\n  preferences?: Preferences;\n  showSubtitle?: boolean;\n  showTitle?: boolean;\n  size?: 'small' | 'medium' | 'large';\n  variant?: 'outlined' | 'flat';\n}\n\n/**\n * Internal component that renders the verification steps and manages flow state.\n *\n * @internal\n */\nconst BaseVerifyAttributeContent: FC<Omit<BaseVerifyAttributeProps, 'preferences'>> = ({\n  attributeDisplayName = '',\n  buttonClassName = '',\n  children = undefined,\n  className = '',\n  inputClassName = '',\n  isInitialized = true,\n  onCancel = undefined,\n  onComplete = undefined,\n  onDone = undefined,\n  onError = undefined,\n  onFlowChange = undefined,\n  onInitialize = undefined,\n  onSubmit = undefined,\n  showSubtitle = true,\n  showTitle = true,\n  size = 'medium',\n  variant = 'outlined',\n}: Omit<BaseVerifyAttributeProps, 'preferences'>): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);\n  const {t} = useTranslation();\n  const {meta, vendor} = useThunderID();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n\n  const [state, setState] = useState<VerificationState>('loading');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [currentFlow, setCurrentFlow] = useState<EmbeddedSelfFlowResponse | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  // Set before the first await, so a second call from a custom render cannot send a second code.\n  const isSubmittingRef: MutableRefObject<boolean> = useRef(false);\n\n  // Guards against a second initiation, which would send a second code.\n  const initializationAttemptedRef: MutableRefObject<boolean> = useRef(false);\n  const challengeTokenRef: MutableRefObject<string | null> = useRef<string | null>(null);\n\n  const labelParams: Record<string, string> = {attribute: attributeDisplayName};\n\n  const normalize = useCallback(\n    (response: EmbeddedSelfFlowResponse): EmbeddedSelfFlowResponse => {\n      if (!response?.data || Array.isArray(response.data.components)) {\n        return response;\n      }\n\n      const {components} = normalizeFlowResponse(\n        response,\n        t,\n        {defaultErrorKey: 'user.verification.error', resolveTranslations: false, throwOnError: false},\n        meta,\n      );\n\n      return {...response, data: {...response.data, components}};\n    },\n    [t, meta],\n  );\n\n  const extractFormFields = useCallback(\n    (components: EmbeddedFlowComponent[]): FormField[] =>\n      getFlowStepComponents(components).inputs.map((component: EmbeddedFlowComponent) => {\n        const ruleValidator = buildValidatorFromRules(component.validation);\n        return {\n          initialValue: '',\n          name: component.ref ?? component.id,\n          required: component.required ?? false,\n          validator: (value: string) => {\n            if (component.required && (!value || value.trim() === '')) {\n              return t('validations.required.field.error');\n            }\n            if (ruleValidator && value) {\n              const ruleMessage = ruleValidator(value);\n              if (ruleMessage) {\n                return t(ruleMessage);\n              }\n            }\n            return null;\n          },\n        };\n      }),\n    [t],\n  );\n\n  const formFields: FormField[] = useMemo(\n    () => extractFormFields(currentFlow?.data?.components ?? []),\n    [currentFlow, extractFormFields],\n  );\n\n  const {\n    values: formValues,\n    touched: touchedFields,\n    errors: formErrors,\n    isValid: isFormValid,\n    setValue: setFormValue,\n    setTouched: setFormTouched,\n    setTouchedFields,\n    setErrors: setFormErrors,\n    clearErrors: clearFormErrors,\n    validateForm,\n    touchAllFields,\n    reset: resetForm,\n  } = useForm<Record<string, string>>({\n    fields: formFields,\n    initialValues: {},\n    requiredMessage: t('validations.required.field.error'),\n    validateOnBlur: true,\n    validateOnChange: false,\n  });\n\n  // Project server-side field errors into form state.\n  useEffect(() => {\n    clearFormErrors();\n    const responseFieldErrors: FieldError[] | undefined = currentFlow?.data?.fieldErrors;\n    if (!responseFieldErrors || responseFieldErrors.length === 0) {\n      return;\n    }\n    const errors: Record<string, string> = {};\n    const touched: Record<string, boolean> = {};\n    responseFieldErrors.forEach((fe: FieldError) => {\n      if (!(fe.identifier in errors)) {\n        errors[fe.identifier] = fe.message;\n        touched[fe.identifier] = true;\n      }\n    });\n    setTouchedFields(touched);\n    setFormErrors(errors);\n  }, [currentFlow, setFormErrors, setTouchedFields, clearFormErrors]);\n\n  const handleResponse = useCallback(\n    (rawResponse: EmbeddedSelfFlowResponse): void => {\n      const response: EmbeddedSelfFlowResponse = normalize(rawResponse);\n      onFlowChange?.(response);\n\n      if (response.challengeToken !== undefined) {\n        challengeTokenRef.current = response.challengeToken ?? null;\n      }\n\n      if (response.flowStatus === EmbeddedSelfFlowStatus.Error) {\n        const message: string = extractErrorMessage(response, t, 'user.verification.error');\n        setError(message);\n        setState('failed');\n        onError?.(new Error(message));\n        return;\n      }\n\n      if (response.flowStatus === EmbeddedSelfFlowStatus.Complete) {\n        setError(null);\n        setState('complete');\n        onComplete?.(response);\n        return;\n      }\n\n      // INCOMPLETE: render the step; a rejected code comes back with an error and without\n      // additionalData, so keep the destination and code length of the step that sent the code.\n      setCurrentFlow(\n        (previous: EmbeddedSelfFlowResponse | null): EmbeddedSelfFlowResponse =>\n          response.data?.additionalData || !previous?.data?.additionalData\n            ? response\n            : {...response, data: {...response.data, additionalData: previous.data.additionalData}},\n      );\n      resetForm();\n      setError(response.error ? extractErrorMessage(response, t, 'user.verification.error') : null);\n      setState('active');\n    },\n    [normalize, onFlowChange, onError, onComplete, resetForm, t],\n  );\n\n  const handleFailure = useCallback(\n    (caughtError: unknown): void => {\n      // Show a generic message; an API error body is not meant for the user.\n      setError(t('user.verification.error'));\n      setState('failed');\n      onError?.(caughtError instanceof Error ? caughtError : new Error(String(caughtError)));\n    },\n    [onError, t],\n  );\n\n  useEffect(() => {\n    if (!isInitialized || initializationAttemptedRef.current) {\n      return;\n    }\n    initializationAttemptedRef.current = true;\n\n    void (async (): Promise<void> => {\n      try {\n        const response: EmbeddedSelfFlowResponse | undefined = await onInitialize?.();\n        if (response) {\n          handleResponse(response);\n        }\n      } catch (caughtError) {\n        handleFailure(caughtError);\n      }\n    })();\n  }, [isInitialized, onInitialize, handleResponse, handleFailure]);\n\n  const handleInputChange = (name: string, value: string): void => {\n    setFormValue(name, value);\n  };\n\n  const handleInputBlur = (name: string): void => {\n    setFormTouched(name, true);\n  };\n\n  const handleSubmit = async (\n    component: EmbeddedFlowComponent,\n    data?: Record<string, string>,\n    skipValidation?: boolean,\n  ): Promise<void> => {\n    if (!currentFlow || isSubmittingRef.current) return;\n\n    if (!skipValidation) {\n      touchAllFields();\n      if (!validateForm().isValid) return;\n    }\n\n    isSubmittingRef.current = true;\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      const composedData: Record<string, string> = data ? composeAffixedInputs(data, vendor) : {};\n      const inputs: Record<string, string> = Object.fromEntries(\n        Object.entries(composedData).filter(\n          ([, value]: [string, string]) => value !== null && value !== undefined && value !== '',\n        ),\n      );\n\n      const response: EmbeddedSelfFlowResponse | undefined = await onSubmit?.({\n        executionId: currentFlow.executionId,\n        ...(component.id && {action: component.id}),\n        ...(challengeTokenRef.current ? {challengeToken: challengeTokenRef.current} : {}),\n        inputs,\n      });\n\n      if (response) {\n        handleResponse(response);\n      }\n    } catch (caughtError) {\n      handleFailure(caughtError);\n    } finally {\n      isSubmittingRef.current = false;\n      setIsSubmitting(false);\n    }\n  };\n\n  const additionalData: Record<string, unknown> = currentFlow?.data?.additionalData ?? {};\n  const maskedDestination: unknown = additionalData[AttributeVerificationConstants.MASKED_DESTINATION_KEY];\n  const destination: string | null =\n    typeof maskedDestination === 'string' && maskedDestination ? maskedDestination : null;\n  const headings: ReturnType<typeof getAuthComponentHeadings> = getAuthComponentHeadings(\n    currentFlow?.data?.components ?? [],\n    undefined,\n    undefined,\n    t('user.verification.heading', labelParams),\n    t('user.verification.subheading.generic'),\n  );\n  const {componentsWithoutHeadings} = headings;\n  const step: FlowStepComponents = getFlowStepComponents(componentsWithoutHeadings ?? []);\n  // A step with nothing to enter or submit waits for the user to open a link sent to them.\n  const isAwaitingLink: boolean = state === 'active' && formFields.length === 0 && step.actions.length === 0;\n  const title: string = resolveFlowTemplateLiterals(headings.title, {meta, t});\n  // The flow's own prompt wins; the destination is added beside it, or fills in when the flow has none.\n  const hasFlowSubtitle = !!headings.headingComponents.subheading;\n  let subtitle: string = resolveFlowTemplateLiterals(headings.subtitle, {meta, t});\n  let destinationText: string | null = null;\n  if (destination && hasFlowSubtitle) {\n    destinationText = t('user.verification.destination', {destination});\n  } else if (destination) {\n    subtitle = t(isAwaitingLink ? 'user.verification.subheading.link' : 'user.verification.subheading', {destination});\n  }\n\n  const isLoading: boolean = state === 'loading' || isSubmitting;\n\n  const containerClasses: string = cx(\n    withVendorCSSClassPrefix('verify-attribute'),\n    withVendorCSSClassPrefix(`verify-attribute--${size}`),\n    withVendorCSSClassPrefix(`verify-attribute--${variant}`),\n    styles['root'],\n    variant === 'outlined' ? styles['card'] : '',\n    className,\n  );\n\n  if (children) {\n    const resend: EmbeddedFlowComponent | undefined = state === 'active' ? step.resend : undefined;\n\n    return (\n      <div className={containerClasses}>\n        {children({\n          additionalData,\n          components: componentsWithoutHeadings ?? [],\n          destination,\n          destinationText,\n          error,\n          fieldErrors: formErrors,\n          handleInputChange,\n          handleResend: resend ? (): Promise<void> => handleSubmit(resend, undefined, true) : undefined,\n          handleSubmit,\n          isAwaitingLink,\n          isComplete: state === 'complete',\n          isFailed: state === 'failed',\n          isLoading,\n          isValid: isFormValid,\n          onCancel,\n          onDone: isAwaitingLink ? onDone : undefined,\n          subtitle,\n          successMessage: t('user.verification.success', labelParams),\n          title,\n          touched: touchedFields,\n          values: formValues,\n        })}\n      </div>\n    );\n  }\n\n  const alertClasses: string = cx(withVendorCSSClassPrefix(bem('verify-attribute', 'alert')), styles['alert']);\n\n  return (\n    <div className={containerClasses} aria-busy={isLoading}>\n      {state === 'active' && (showTitle || showSubtitle) && (\n        <div className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'header')), styles['header'])}>\n          {showTitle && (\n            <Typography\n              variant=\"h5\"\n              className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'heading')), styles['heading'])}\n            >\n              {title}\n            </Typography>\n          )}\n          {showSubtitle && (\n            <Typography\n              variant=\"body2\"\n              className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'subheading')), styles['subheading'])}\n            >\n              {subtitle}\n              {destinationText && (\n                <span className={withVendorCSSClassPrefix(bem('verify-attribute', 'destination'))}>\n                  {` ${destinationText}`}\n                </span>\n              )}\n            </Typography>\n          )}\n        </div>\n      )}\n\n      {state === 'loading' && (\n        <div className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'loading')), styles['loading'])}>\n          <Spinner size=\"medium\" />\n        </div>\n      )}\n\n      {error && (\n        <AlertPrimitive variant=\"error\" className={alertClasses}>\n          <AlertPrimitive.Description>{error}</AlertPrimitive.Description>\n        </AlertPrimitive>\n      )}\n\n      {state === 'complete' && (\n        <AlertPrimitive variant=\"success\" className={alertClasses}>\n          <AlertPrimitive.Description>{t('user.verification.success', labelParams)}</AlertPrimitive.Description>\n        </AlertPrimitive>\n      )}\n\n      {state === 'active' && (\n        <div className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'content')), styles['content'])}>\n          {withFlowTestIds(\n            renderVerificationComponents(\n              componentsWithoutHeadings ?? [],\n              formValues,\n              touchedFields,\n              formErrors,\n              isLoading,\n              isFormValid,\n              resetForm,\n              handleInputChange,\n              {\n                _customRenderers: customRenderers,\n                _theme: theme,\n                additionalData,\n                buttonClassName: cx(withVendorCSSClassPrefix(bem('verify-attribute', 'button')), buttonClassName),\n                inputClassName: cx(withVendorCSSClassPrefix(bem('verify-attribute', 'input')), inputClassName),\n                meta,\n                onInputBlur: handleInputBlur,\n                onSubmit: (component: EmbeddedFlowComponent, data?: Record<string, string>, skip?: boolean): void => {\n                  void handleSubmit(component, data, skip);\n                },\n                size,\n                t,\n                variant,\n                vendor,\n              },\n            ),\n            collectFlowIds(step),\n          )}\n        </div>\n      )}\n\n      {(!!onCancel || (isAwaitingLink && !!onDone)) && (\n        <div className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'actions')), styles['actions'])}>\n          {isAwaitingLink && onDone && (\n            <Button\n              size=\"small\"\n              color=\"primary\"\n              variant=\"solid\"\n              onClick={onDone}\n              data-testid=\"thunderid-action-verificationDone\"\n            >\n              {t('user.verification.buttons.done.text')}\n            </Button>\n          )}\n          {onCancel && (\n            <Button\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"outline\"\n              onClick={onCancel}\n              disabled={isSubmitting}\n              data-testid=\"thunderid-action-verificationCancel\"\n            >\n              {state === 'active' || state === 'loading'\n                ? t('user.verification.buttons.cancel.text')\n                : t('user.verification.buttons.close.text')}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * BaseVerifyAttribute renders the server-described steps of a self attribute verification flow.\n * Accepts API functions as props to stay framework independent.\n */\nconst BaseVerifyAttribute: FC<BaseVerifyAttributeProps> = ({\n  preferences = undefined,\n  ...rest\n}: BaseVerifyAttributeProps): ReactElement => {\n  const content: ReactElement = <BaseVerifyAttributeContent {...rest} />;\n\n  if (!preferences) return content;\n\n  return <ComponentPreferencesContext.Provider value={preferences}>{content}</ComponentPreferencesContext.Provider>;\n};\n\nexport default BaseVerifyAttribute;\n"],"mappings":"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"}

package/dist/cjs/components/account/VerifyAttribute/BaseVerifyAttribute.styles.cjs

@@ -0,0 +1,84 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+
+//#region src/components/account/VerifyAttribute/BaseVerifyAttribute.styles.ts
+/**
+* Creates styles for the BaseVerifyAttribute component
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => {
+	const root = require_emotion.css`
+    display: flex;
+    flex-direction: column;
+    gap: calc(${theme.vars.spacing.unit} * 2);
+    width: 100%;
+    font-family: ${theme.vars.typography.fontFamily};
+  `;
+	const card = require_emotion.css`
+    padding: calc(${theme.vars.spacing.unit} * 2);
+    border: 1px solid ${theme.vars.colors.border};
+    border-radius: ${theme.vars.borderRadius.medium};
+  `;
+	const header = require_emotion.css`
+    display: flex;
+    flex-direction: column;
+    gap: calc(${theme.vars.spacing.unit} / 2);
+  `;
+	const heading = require_emotion.css`
+    margin: 0;
+  `;
+	const subheading = require_emotion.css`
+    margin: 0;
+    color: ${theme.vars.colors.text.secondary};
+  `;
+	const content = require_emotion.css`
+    display: flex;
+    flex-direction: column;
+    gap: calc(${theme.vars.spacing.unit} * 1.5);
+
+    .${(0, __thunderid_browser.withVendorCSSClassPrefix)("otp-field__input-container")} {
+      justify-content: flex-start;
+
+      > input {
+        box-sizing: border-box;
+        flex: 1 1 calc(${theme.vars.spacing.unit} * 4);
+        max-width: calc(${theme.vars.spacing.unit} * 6);
+        min-width: 0;
+      }
+    }
+  `;
+	const alert = require_emotion.css`
+    width: 100%;
+  `;
+	const loading = require_emotion.css`
+    display: flex;
+    justify-content: center;
+    padding: calc(${theme.vars.spacing.unit} * 2);
+  `;
+	return {
+		actions: require_emotion.css`
+    display: flex;
+    gap: ${theme.vars.spacing.unit};
+    align-items: center;
+    justify-content: flex-end;
+  `,
+		alert,
+		card,
+		colorScheme,
+		content,
+		header,
+		heading,
+		loading,
+		root,
+		subheading
+	};
+};
+var BaseVerifyAttribute_styles_default = useStyles;
+
+//#endregion
+exports.default = BaseVerifyAttribute_styles_default;
+//# sourceMappingURL=BaseVerifyAttribute.styles.cjs.map