@thunderid/react 1.13.0 → 1.15.0

package/dist/components/account/UserProfile/BaseUserProfile.styles.js

@@ -168,10 +168,37 @@ const useStyles = (theme, colorScheme) => {
 		const popup = css`
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-		return {
-			alert: css`
+		const alert = css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 3);
-    `,
+    `;
+		const verificationStatus = css`
+      display: inline-flex;
+      flex-shrink: 0;
+      gap: calc(${theme.vars.spacing.unit} / 2);
+      align-items: center;
+      padding: 0 ${theme.vars.spacing.unit};
+      border-radius: 999px;
+      font-size: 0.75rem;
+      font-weight: 500;
+      line-height: 22px;
+      white-space: nowrap;
+    `;
+		const verified = css`
+      color: ${theme.vars.colors.success.dark ?? theme.vars.colors.success.main};
+      background: color-mix(in srgb, ${theme.vars.colors.success.main} 12%, transparent);
+    `;
+		const unverified = css`
+      color: ${theme.vars.colors.warning.contrastText};
+      background: color-mix(in srgb, ${theme.vars.colors.warning.main} 14%, transparent);
+    `;
+		const verification = css`
+      padding: ${theme.vars.spacing.unit} 0;
+    `;
+		const verificationInline = css`
+      margin-inline-start: calc(120px + ${theme.vars.spacing.unit});
+    `;
+		return {
+			alert,
 			card,
 			complexTextarea,
 			editButton,
@@ -193,15 +220,41 @@ const useStyles = (theme, colorScheme) => {
 			sectionLabel,
 			sectionRow,
 			sectionValue,
+			unverified,
 			value,
-			valuePlaceholder
+			valuePlaceholder,
+			verification,
+			verificationDialog: css`
+      box-sizing: border-box;
+      width: min(448px, calc(100vw - calc(${theme.vars.spacing.unit} * 4)));
+      padding: calc(${theme.vars.spacing.unit} * 2);
+    `,
+			verificationInline,
+			verificationStatus,
+			verified,
+			visuallyHidden: css`
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    `
 		};
 	}, [
 		theme.vars.colors.background.surface,
 		theme.vars.colors.text.primary,
 		theme.vars.colors.text.secondary,
 		theme.vars.colors.border,
+		theme.vars.colors.success.main,
+		theme.vars.colors.success.dark,
+		theme.vars.colors.warning.contrastText,
+		theme.vars.colors.warning.main,
 		theme.vars.borderRadius.large,
+		theme.vars.borderRadius.small,
 		theme.vars.borderRadius.medium,
 		theme.vars.spacing.unit,
 		theme.vars.typography.fontFamily,

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

@@ -1 +1 @@
-{"version":3,"file":"BaseUserProfile.styles.js","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,GAAG;;;;CAKpC,MAAMC,aAAqB,GAAG;;;;;;;;;;;CAY9B,MAAMC,aAAqB,GAAG;;;;WAIrB,MAAM,KAAK,QAAQ,KAAK;;;CAIjC,MAAMC,eAAuB,GAAG;;gBAElB,MAAM,KAAK,QAAQ,KAAK;;gCAER,MAAM,KAAK,QAAQ,KAAK;;CAGtD,MAAMC,kBAA0B,GAAG;;;;wBAIb,MAAM,KAAK,OAAO,OAAO;qBAC5B,MAAM,KAAK,aAAa,MAAM;;;CAIjD,MAAMC,YAAoB,GAAG;eAChB,MAAM,KAAK,QAAQ,KAAK;;;CAIrC,MAAMC,cAAsB,GAAG;eAClB,MAAM,KAAK,QAAQ,KAAK;;;AAIrC,QAAO,cAAc;EACnB,MAAMC,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;;;qBAGzB,MAAM,KAAK,WAAW,WAAW;;EAGlD,MAAMC,OAAe,GAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;;EAGjD,MAAMC,SAAiB,GAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;4BACd,MAAM,KAAK,QAAQ,KAAK;;EAGhD,MAAMC,cAAsB,GAAG;;;EAI/B,MAAMC,OAAe,GAAG;;;;eAIb,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,iBAAyB,GAAG;;;;;EAMlC,MAAMC,aAAqB,GAAG;;;sBAGZ,MAAM,KAAK,QAAQ,KAAK;;EAG1C,MAAMC,eAAuB,GAAG;;;eAGrB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;EAK1C,MAAMC,eAAuB,GAAG;;;;kBAIlB,MAAM,KAAK,QAAQ,KAAK;;eAE3B,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,gBAAwB,GAAG;;;;EAKjC,MAAMC,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;iCACb,MAAM,KAAK,OAAO,OAAO;;EAGtD,MAAMC,QAAgB,GAAG;;;sBAGP,MAAM,KAAK,QAAQ,KAAK;;;EAI1C,MAAMC,YAAoB,GAAG;;;EAI7B,MAAMC,QAAgB,GAAG;;;eAGd,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;EAO5C,MAAMC,QAAgB,GAAG;eACd,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;aAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;;;;;;;SAW5B,yBAAyB,eAAe,CAAC;;;;;;;;;4BAStB,MAAM,KAAK,OAAO,WAAW,QAAQ;yBACxC,MAAM,KAAK,aAAa,OAAO;;;;;wBAKhC,MAAM,KAAK,OAAO,OAAO;;;EAI7C,MAAMC,QAAgB,GAAG;sBACP,MAAM,KAAK,QAAQ,KAAK;;AAO1C,SAAO;GACL,OALoB,GAAG;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.js","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/components/account/UserProfile/UserProfile.d.ts

@@ -4,7 +4,13 @@ import { BaseUserProfileProps } from './BaseUserProfile';
  * Props for the UserProfile component.
  * Extends BaseUserProfileProps but makes the user prop optional since it will be obtained from useThunderID
  */
-export type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | 'flattenedProfile'>;
+export type UserProfileProps = Omit<BaseUserProfileProps, 'user' | 'profile' | 'flattenedProfile'> & {
+    /**
+     * Handle of the `SELF` flow that verifies an attribute. Defaults to the server's shipped
+     * `default-self-attribute-verification-flow`.
+     */
+    verificationFlowHandle?: string;
+};
 /**
  * UserProfile component displays the authenticated user's profile information in a
  * structured and styled format. It shows user details such as display name, email,

package/dist/components/account/UserProfile/UserProfile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserProfile/UserProfile.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAyB,MAAM,OAAO,CAAC;AAEjD,OAAwB,EAAC,oBAAoB,EAAC,MAAM,mBAAmB,CAAC;AAMxE;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,GAAG,kBAAkB,CAAC,CAAC;AAEnG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA6DrC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UserProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserProfile/UserProfile.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAC,EAAE,EAAoC,MAAM,OAAO,CAAC;AAE5D,OAAwB,EAAC,oBAAoB,EAAyC,MAAM,mBAAmB,CAAC;AAOhH;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,GAAG,kBAAkB,CAAC,GAAG;IACnG;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuFrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/account/UserProfile/UserProfile.js

@@ -3,7 +3,8 @@ import useUser_default from "../../../contexts/User/useUser.js";
 import useTranslation_default from "../../../hooks/useTranslation.js";
 import BaseUserProfile_default from "./BaseUserProfile.js";
 import updateMeProfile_default from "../../../api/account/updateMeProfile.js";
-import { ThunderIDError, deepMerge, resolveResourceEndpoint } from "@thunderid/browser";
+import VerifyAttribute_default from "../VerifyAttribute/VerifyAttribute.js";
+import { AttributeVerificationConstants, ThunderIDError, deepMerge, resolveResourceEndpoint } from "@thunderid/browser";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -41,7 +42,7 @@ import { jsx } from "react/jsx-runtime";
 * />
 * ```
 */
-const UserProfile = ({ preferences, editable = true,...rest }) => {
+const UserProfile = ({ preferences, editable = true, verificationFlowHandle = AttributeVerificationConstants.DEFAULT_FLOW_HANDLE,...rest }) => {
 	const { baseUrl, endpoints, instanceId, preferences: contextPreferences } = useThunderID_default();
 	const { profile, flattenedProfile, onUpdateProfile, userSchema } = useUser_default();
 	const resolvedPreferences = {
@@ -74,7 +75,18 @@ const UserProfile = ({ preferences, editable = true,...rest }) => {
 			setError(message);
 		}
 	};
+	const renderVerification = ({ attribute, attributeDisplayName, onCancel, onComplete }) => /* @__PURE__ */ jsx(VerifyAttribute_default, {
+		attribute,
+		attributeDisplayName,
+		flowHandle: verificationFlowHandle,
+		preferences: resolvedPreferences,
+		variant: rest.mode === "popup" ? "outlined" : "flat",
+		onCancel,
+		onComplete,
+		onDone: onCancel
+	}, attribute);
 	return /* @__PURE__ */ jsx(BaseUserProfile_default, {
+		renderVerification: isEditableProfile ? renderVerification : void 0,
 		profile: profile ?? void 0,
 		flattenedProfile: flattenedProfile ?? void 0,
 		userSchema: userSchema ?? void 0,

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

@@ -1 +1 @@
-{"version":3,"file":"UserProfile.js","names":["UserProfile: FC<UserProfileProps>","useThunderID","useUser","useTranslation","isEditableProfile: boolean","updatedAttributes: Record<string, unknown>","updateMeProfile","caughtError: unknown","message: string","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,sBAAc;CACxF,MAAM,EAAC,SAAS,kBAAkB,iBAAiB,eAAcC,iBAAS;CAC1E,MAAM,sBAAsB;EAC1B,GAAG;EACH,GAAG;EACH,MAAM;GACJ,GAAG,oBAAoB;GACvB,GAAG,aAAa;GACjB;EACF;CACD,MAAM,EAAC,MAAKC,uBAAe,qBAAqB,KAAK;CACrD,MAAMC,oBAA6B,qBAAqB,MAAM,qBAAqB,QAAQ,QAAQ;CAEnG,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CAEvD,MAAM,sBAAsB,OAAO,YAAoD;AACrF,WAAS,KAAK;AAEd,MAAI;GACF,MAAMC,oBAA6C,UAChD,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,wBAAgB;IAC3C;IACA,KAAK,wBAAwB,WAAW,EAAC,WAAU,CAAC;IACpD;IACA,SAAS;IACV,CAAC,CACuB;WAClBC,aAAsB;GAC7B,IAAIC,UAAkB,EAAE,oCAAoC;AAE5D,OAAI,uBAAuB,eACzB,WAAU,aAAa;AAGzB,YAAS,QAAQ;;;AAIrB,QACE,oBAACC;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.js","names":["UserProfile: FC<UserProfileProps>","useThunderID","useUser","useTranslation","isEditableProfile: boolean","updatedAttributes: Record<string, unknown>","updateMeProfile","caughtError: unknown","message: string","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,yBAAyB,+BAA+B,oBACxD,GAAG,WACiC;CACpC,MAAM,EAAC,SAAS,WAAW,YAAY,aAAa,uBAAsBC,sBAAc;CACxF,MAAM,EAAC,SAAS,kBAAkB,iBAAiB,eAAcC,iBAAS;CAC1E,MAAM,sBAAsB;EAC1B,GAAG;EACH,GAAG;EACH,MAAM;GACJ,GAAG,oBAAoB;GACvB,GAAG,aAAa;GACjB;EACF;CACD,MAAM,EAAC,MAAKC,uBAAe,qBAAqB,KAAK;CACrD,MAAMC,oBAA6B,qBAAqB,MAAM,qBAAqB,QAAQ,QAAQ;CAEnG,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CAEvD,MAAM,sBAAsB,OAAO,YAAoD;AACrF,WAAS,KAAK;AAEd,MAAI;GACF,MAAMC,oBAA6C,UAChD,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,wBAAgB;IAC3C;IACA,KAAK,wBAAwB,WAAW,EAAC,WAAU,CAAC;IACpD;IACA,SAAS;IACV,CAAC,CACuB;WAClBC,aAAsB;GAC7B,IAAIC,UAAkB,EAAE,oCAAoC;AAE5D,OAAI,uBAAuB,eACzB,WAAU,aAAa;AAGzB,YAAS,QAAQ;;;CAIrB,MAAM,sBAAsB,EAC1B,WACA,sBACA,UACA,iBAEA,oBAACC;EAEY;EACW;EACtB,YAAY;EACZ,aAAa;EAEb,SAAS,KAAK,SAAS,UAAU,aAAa;EACpC;EACE;EACZ,QAAQ;IATH,UAUL;AAGJ,QACE,oBAACC;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/components/account/VerifyAttribute/BaseVerifyAttribute.d.ts

@@ -0,0 +1,113 @@
+import { EmbeddedFlowComponent, EmbeddedSelfFlowRequest, EmbeddedSelfFlowResponse, Preferences } from '@thunderid/browser';
+import { FC, ReactNode } from 'react';
+/**
+ * What {@link BaseVerifyAttribute} hands its `children` render function, so the steps can be drawn
+ * with any UI.
+ */
+export interface BaseVerifyAttributeRenderProps {
+    additionalData: Record<string, unknown>;
+    /**
+     * The step's components, without its headings.
+     */
+    components: EmbeddedFlowComponent[];
+    /**
+     * Masked destination the code or link was sent to, when the flow reports it.
+     */
+    destination: string | null;
+    /**
+     * Translated "Sent to …" line, set when the flow has its own prompt in `subtitle`.
+     */
+    destinationText: string | null;
+    /**
+     * Translated error of the last request, or the refusal.
+     */
+    error: string | null;
+    fieldErrors: Record<string, string>;
+    handleInputChange: (name: string, value: string) => void;
+    /**
+     * Sends a new code. Set only while the step has a resend action.
+     */
+    handleResend?: () => Promise<void>;
+    /**
+     * Submits a step. Pass `skipValidation` for an action, such as a resend, that sends no inputs.
+     */
+    handleSubmit: (component: EmbeddedFlowComponent, data?: Record<string, string>, skipValidation?: boolean) => Promise<void>;
+    isAwaitingLink: boolean;
+    isComplete: boolean;
+    /**
+     * Whether the server refused the verification or the request failed; the flow cannot continue.
+     */
+    isFailed: boolean;
+    isLoading: boolean;
+    isValid: boolean;
+    /**
+     * Closes the panel. Set only when the app passes `onCancel`.
+     */
+    onCancel?: () => void;
+    /**
+     * Confirms a link the user opened outside the app. Set only while the step waits for a link and
+     * the app passes `onDone`.
+     */
+    onDone?: () => void;
+    subtitle: string;
+    /**
+     * Translated message for a recorded verification.
+     */
+    successMessage: string;
+    title: string;
+    touched: Record<string, boolean>;
+    values: Record<string, string>;
+}
+/**
+ * Props for the BaseVerifyAttribute component.
+ */
+export interface BaseVerifyAttributeProps {
+    /**
+     * Label of the attribute being verified, used in the default heading and success message.
+     */
+    attributeDisplayName?: string;
+    buttonClassName?: string;
+    /**
+     * Renders custom UI in place of the default steps. Receives the step, the values and their setters,
+     * submit, resend, cancel, the destination, and the loading, error and completed state.
+     */
+    children?: (props: BaseVerifyAttributeRenderProps) => ReactNode;
+    className?: string;
+    inputClassName?: string;
+    isInitialized?: boolean;
+    /**
+     * Called when the user closes the panel. The close action is shown only when this is set.
+     */
+    onCancel?: () => void;
+    /**
+     * Called once the server has recorded the verification.
+     */
+    onComplete?: (response: EmbeddedSelfFlowResponse) => void;
+    /**
+     * Called when the user selects Done after the flow sent a link, which they confirm outside the app.
+     * The Done action is shown only when this is set.
+     */
+    onDone?: () => void;
+    /**
+     * Called when the server refuses the verification or the request fails.
+     */
+    onError?: (error: Error) => void;
+    onFlowChange?: (response: EmbeddedSelfFlowResponse) => void;
+    onInitialize?: () => Promise<EmbeddedSelfFlowResponse>;
+    onSubmit?: (payload: EmbeddedSelfFlowRequest) => Promise<EmbeddedSelfFlowResponse>;
+    /**
+     * Component-level preferences to override global i18n and theme settings.
+     */
+    preferences?: Preferences;
+    showSubtitle?: boolean;
+    showTitle?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    variant?: 'outlined' | 'flat';
+}
+/**
+ * BaseVerifyAttribute renders the server-described steps of a self attribute verification flow.
+ * Accepts API functions as props to stay framework independent.
+ */
+declare const BaseVerifyAttribute: FC<BaseVerifyAttributeProps>;
+export default BaseVerifyAttribute;
+//# sourceMappingURL=BaseVerifyAttribute.d.ts.map

package/dist/components/account/VerifyAttribute/BaseVerifyAttribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVerifyAttribute.d.ts","sourceRoot":"","sources":["../../../../src/components/account/VerifyAttribute/BaseVerifyAttribute.tsx"],"names":[],"mappings":"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"}