@thunderid/react 0.1.0 → 0.2.0

package/dist/cjs/components/presentation/UserProfile/BaseUserProfile.styles.cjs

@@ -0,0 +1,217 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.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 __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/presentation/UserProfile/BaseUserProfile.styles.ts
+/**
+* Creates styles for the BaseUserProfile 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 valuePlaceholder = __emotion_css.css`
+    font-style: italic;
+    opacity: 0.7;
+  `;
+	const editButton = __emotion_css.css`
+    font-style: italic;
+    text-decoration: underline;
+    opacity: 0.7;
+    padding: 0;
+    min-height: auto;
+
+    &:hover:not(:disabled) {
+      background-color: transparent;
+    }
+  `;
+	const fieldInner = __emotion_css.css`
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: ${theme.vars.spacing.unit};
+  `;
+	const fieldActions = __emotion_css.css`
+    display: flex;
+    gap: calc(${theme.vars.spacing.unit} / 2);
+    align-items: center;
+    margin-inline-start: calc(${theme.vars.spacing.unit} * 4);
+  `;
+	const complexTextarea = __emotion_css.css`
+    min-height: 60px;
+    width: 100%;
+    padding: 8px;
+    border: 1px solid ${theme.vars.colors.border};
+    border-radius: ${theme.vars.borderRadius.small};
+    resize: vertical;
+  `;
+	const objectKey = __emotion_css.css`
+    padding: ${theme.vars.spacing.unit};
+    vertical-align: top;
+  `;
+	const objectValue = __emotion_css.css`
+    padding: ${theme.vars.spacing.unit};
+    vertical-align: top;
+  `;
+	return (0, react.useMemo)(() => {
+		const root = __emotion_css.css`
+      padding: calc(${theme.vars.spacing.unit} * 4);
+      min-width: 600px;
+      margin: 0 auto;
+      font-family: ${theme.vars.typography.fontFamily};
+    `;
+		const card = __emotion_css.css`
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+    `;
+		const header = __emotion_css.css`
+      display: flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 1.5);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);
+    `;
+		const profileInfo = __emotion_css.css`
+      flex: 1;
+    `;
+		const name = __emotion_css.css`
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin: 0;
+      color: ${theme.vars.colors.text.primary};
+    `;
+		const profileSummary = __emotion_css.css`
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    `;
+		const sectionRow = __emotion_css.css`
+      display: flex;
+      align-items: center;
+      padding: calc(${theme.vars.spacing.unit} * 1) 0;
+    `;
+		const sectionLabel = __emotion_css.css`
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: ${theme.vars.colors.text.primary};
+      width: 160px;
+      flex-shrink: 0;
+    `;
+		const sectionValue = __emotion_css.css`
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 1.5);
+      font-size: 0.875rem;
+      color: ${theme.vars.colors.text.primary};
+    `;
+		const infoContainer = __emotion_css.css`
+      display: flex;
+      flex-direction: column;
+    `;
+		const info = __emotion_css.css`
+      padding: calc(${theme.vars.spacing.unit} * 1.5) 0;
+      border-bottom: 1px solid ${theme.vars.colors.border};
+    `;
+		const field = __emotion_css.css`
+      display: flex;
+      align-items: center;
+      padding: calc(${theme.vars.spacing.unit} / 2) 0;
+      min-height: 28px;
+    `;
+		const lastField = __emotion_css.css`
+      border-bottom: none;
+    `;
+		const label = __emotion_css.css`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${theme.vars.colors.text.secondary};
+      width: 120px;
+      flex-shrink: 0;
+      line-height: 28px;
+      text-align: start;
+    `;
+		const value = __emotion_css.css`
+      color: ${theme.vars.colors.text.primary};
+      flex: 1;
+      display: inline-block;
+      align-items: center;
+      gap: ${theme.vars.spacing.unit};
+      overflow: hidden;
+      min-height: 28px;
+      line-height: 28px;
+      word-break: break-word;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 350px;
+      text-align: start;
+
+      .${(0, __thunderid_browser.withVendorCSSClassPrefix)("form-control")} {
+        margin-bottom: 0;
+      }
+
+      input {
+        margin: 0;
+      }
+
+      table {
+        background-color: ${theme.vars.colors.background.surface};
+        border-radius: ${theme.vars.borderRadius.medium};
+        white-space: normal;
+      }
+
+      td {
+        border-color: ${theme.vars.colors.border};
+      }
+    `;
+		const popup = __emotion_css.css`
+      padding: calc(${theme.vars.spacing.unit} * 2);
+    `;
+		return {
+			alert: __emotion_css.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+    `,
+			card,
+			complexTextarea,
+			editButton,
+			field,
+			fieldActions,
+			fieldInner,
+			header,
+			info,
+			infoContainer,
+			label,
+			lastField,
+			name,
+			objectKey,
+			objectValue,
+			popup,
+			profileInfo,
+			profileSummary,
+			root,
+			sectionLabel,
+			sectionRow,
+			sectionValue,
+			value,
+			valuePlaceholder
+		};
+	}, [
+		theme.vars.colors.background.surface,
+		theme.vars.colors.text.primary,
+		theme.vars.colors.text.secondary,
+		theme.vars.colors.border,
+		theme.vars.borderRadius.large,
+		theme.vars.borderRadius.medium,
+		theme.vars.spacing.unit,
+		theme.vars.typography.fontFamily,
+		colorScheme
+	]);
+};
+var BaseUserProfile_styles_default = useStyles;
+
+//#endregion
+exports.default = BaseUserProfile_styles_default;
+//# sourceMappingURL=BaseUserProfile.styles.cjs.map

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

@@ -0,0 +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/presentation/UserProfile/BaseUserProfile.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {useMemo} from 'react';\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  `;\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-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":";;;;;;;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,gBAAgD;CAC/E,MAAMA,mBAA2B,iBAAG;;;;CAKpC,MAAMC,aAAqB,iBAAG;;;;;;;;;;;CAY9B,MAAMC,aAAqB,iBAAG;;;;WAIrB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,eAAuB,iBAAG;;gBAElB,MAAM,KAAK,QAAQ,KAAK;;gCAER,MAAM,KAAK,QAAQ,KAAK;;CAGtD,MAAMC,kBAA0B,iBAAG;;;;wBAIb,MAAM,KAAK,OAAO,OAAO;qBAC5B,MAAM,KAAK,aAAa,MAAM;;;CAIjD,MAAMC,YAAoB,iBAAG;eAChB,MAAM,KAAK,QAAQ,KAAK;;;CAIrC,MAAMC,cAAsB,iBAAG;eAClB,MAAM,KAAK,QAAQ,KAAK;;;AAIrC,iCAAqB;EACnB,MAAMC,OAAe,iBAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;;;qBAGzB,MAAM,KAAK,WAAW,WAAW;;EAGlD,MAAMC,OAAe,iBAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;;EAGjD,MAAMC,SAAiB,iBAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;4BACd,MAAM,KAAK,QAAQ,KAAK;;EAGhD,MAAMC,cAAsB,iBAAG;;;EAI/B,MAAMC,OAAe,iBAAG;;;;eAIb,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,iBAAyB,iBAAG;;;;;EAMlC,MAAMC,aAAqB,iBAAG;;;sBAGZ,MAAM,KAAK,QAAQ,KAAK;;EAG1C,MAAMC,eAAuB,iBAAG;;;eAGrB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;EAK1C,MAAMC,eAAuB,iBAAG;;;;kBAIlB,MAAM,KAAK,QAAQ,KAAK;;eAE3B,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAG1C,MAAMC,gBAAwB,iBAAG;;;;EAKjC,MAAMC,OAAe,iBAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;iCACb,MAAM,KAAK,OAAO,OAAO;;EAGtD,MAAMC,QAAgB,iBAAG;;;sBAGP,MAAM,KAAK,QAAQ,KAAK;;;EAI1C,MAAMC,YAAoB,iBAAG;;;EAI7B,MAAMC,QAAgB,iBAAG;;;eAGd,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;EAO5C,MAAMC,QAAgB,iBAAG;eACd,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;aAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;;;;;;2DAUH,eAAe,CAAC;;;;;;;;;4BAStB,MAAM,KAAK,OAAO,WAAW,QAAQ;yBACxC,MAAM,KAAK,aAAa,OAAO;;;;;wBAKhC,MAAM,KAAK,OAAO,OAAO;;;EAI7C,MAAMC,QAAgB,iBAAG;sBACP,MAAM,KAAK,QAAQ,KAAK;;AAO1C,SAAO;GACL,OALoB,iBAAG;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"}

package/dist/cjs/components/presentation/UserProfile/UserProfile.cjs

@@ -0,0 +1,81 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useThunderID = require('../../../contexts/ThunderID/useThunderID.cjs');
+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/updateMeProfile.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/presentation/UserProfile/UserProfile.tsx
+/**
+* UserProfile component displays the authenticated user's profile information in a
+* structured and styled format. It shows user details such as display name, email,
+* username, and other available profile information from ThunderID.
+*
+* This component is the React-specific implementation that uses the BaseUserProfile
+* and automatically retrieves the user data from ThunderID context if not provided.
+*
+* @example
+* ```tsx
+* // Basic usage - will use user from ThunderID context
+* <UserProfile />
+*
+* // With explicit user data
+* <UserProfile user={specificUser} />
+*
+* // With card layout and custom fallback
+* <UserProfile
+*   cardLayout={true}
+*   fallback={<div>Please sign in to view your profile</div>}
+* />
+*
+* // With field filtering - only show specific fields
+* <UserProfile
+*   showFields={['name.givenName', 'name.familyName', 'emails']}
+* />
+*
+* // With field hiding - hide specific fields
+* <UserProfile
+*   hideFields={['phoneNumbers', 'addresses']}
+* />
+* ```
+*/
+const UserProfile = ({ preferences,...rest }) => {
+	const { baseUrl, instanceId } = require_useThunderID.default();
+	const { profile, flattenedProfile, schemas, onUpdateProfile } = require_useUser.default();
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const [error, setError] = (0, react.useState)(null);
+	const handleProfileUpdate = async (payload) => {
+		setError(null);
+		try {
+			onUpdateProfile(await require_updateMeProfile.default({
+				baseUrl,
+				instanceId,
+				payload
+			}));
+		} catch (caughtError) {
+			let message = t("user.profile.update.generic.error");
+			if (caughtError instanceof __thunderid_browser.ThunderIDError) message = caughtError?.message;
+			setError(message);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseUserProfile.default, {
+		profile: profile ?? void 0,
+		flattenedProfile: flattenedProfile ?? void 0,
+		schemas: schemas ?? void 0,
+		onUpdate: handleProfileUpdate,
+		error,
+		preferences,
+		...rest
+	});
+};
+var UserProfile_default = UserProfile;
+
+//#endregion
+exports.default = UserProfile_default;
+//# sourceMappingURL=UserProfile.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfile.cjs","names":["UserProfile: FC<UserProfileProps>","useThunderID","useUser","useTranslation","updateMeProfile","caughtError: unknown","message: string","ThunderIDError","BaseUserProfile"],"sources":["../../../../../src/components/presentation/UserProfile/UserProfile.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {ThunderIDError, User} 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/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' | 'schemas'>;\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, ...rest}: UserProfileProps): ReactElement => {\n  const {baseUrl, instanceId} = useThunderID();\n  const {profile, flattenedProfile, schemas, onUpdateProfile} = useUser();\n  const {t} = useTranslation(preferences?.i18n);\n\n  const [error, setError] = useState<string | null>(null);\n\n  const handleProfileUpdate = async (payload: any): Promise<void> => {\n    setError(null);\n\n    try {\n      const response: User = await updateMeProfile({baseUrl, instanceId, payload});\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      schemas={schemas ?? undefined}\n      onUpdate={handleProfileUpdate}\n      error={error}\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default UserProfile;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAMA,eAAqC,EAAC,YAAa,GAAG,WAA0C;CACpG,MAAM,EAAC,SAAS,eAAcC,8BAAc;CAC5C,MAAM,EAAC,SAAS,kBAAkB,SAAS,oBAAmBC,yBAAS;CACvE,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAE7C,MAAM,CAAC,OAAO,gCAAoC,KAAK;CAEvD,MAAM,sBAAsB,OAAO,YAAgC;AACjE,WAAS,KAAK;AAEd,MAAI;AAEF,mBADuB,MAAMC,gCAAgB;IAAC;IAAS;IAAY;IAAQ,CAAC,CACnD;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,SAAS,WAAW;EACpB,UAAU;EACH;EACM;EACb,GAAI;GACJ;;AAIN,0BAAe"}

package/dist/cjs/components/presentation/auth/AcceptInvite/v2/AcceptInvite.cjs

@@ -0,0 +1,109 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_BaseAcceptInvite = require('./BaseAcceptInvite.cjs');
+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/presentation/auth/AcceptInvite/v2/AcceptInvite.tsx
+/**
+* Helper to extract query parameters from URL.
+*/
+const getUrlParams = () => {
+	if (typeof window === "undefined") return {};
+	const params = new URLSearchParams(window.location.search);
+	return {
+		executionId: params.get("executionId") || void 0,
+		inviteToken: params.get("inviteToken") || void 0
+	};
+};
+/**
+* AcceptInvite component for end-users to accept an invite and set their password.
+*
+* This component is designed for end users accessing the thunder-gate app via an invite link.
+* It automatically:
+* 1. Extracts executionId and inviteToken from URL query parameters
+* 2. Validates the invite token with the backend
+* 3. Displays the password form if token is valid
+* 4. Completes the accept invite when password is set
+*
+* @example
+* ```tsx
+* import { AcceptInvite } from '@thunderid/react';
+*
+* // URL: /invite?executionId=xxx&inviteToken=yyy
+*
+* const AcceptInvitePage = () => {
+*   return (
+*     <AcceptInvite
+*       baseUrl="https://api.thunder.io"
+*       onComplete={() => navigate('/signin')}
+*       onError={(error) => console.error(error)}
+*     >
+*       {({ values, components, isLoading, isComplete, isValidatingToken, isTokenInvalid, error, handleInputChange, handleSubmit }) => (
+*         <div>
+*           {isValidatingToken && <p>Validating your invite...</p>}
+*           {isTokenInvalid && <p>Invalid or expired invite link</p>}
+*           {isComplete && <p>Registration complete! You can now sign in.</p>}
+*           {!isComplete && !isValidatingToken && !isTokenInvalid && (
+*             // Render password form based on components
+*           )}
+*         </div>
+*       )}
+*     </AcceptInvite>
+*   );
+* };
+* ```
+*/
+const AcceptInvite = ({ baseUrl, executionId: executionIdProp, inviteToken: inviteTokenProp, onComplete, onError, onFlowChange, onGoToSignIn, className, children, size = "medium", variant = "outlined", showTitle = true, showSubtitle = true }) => {
+	const { executionId: urlExecutionId, inviteToken: urlInviteToken } = (0, react.useMemo)(() => getUrlParams(), []);
+	const executionId = executionIdProp || urlExecutionId;
+	const inviteToken = inviteTokenProp || urlInviteToken;
+	const apiBaseUrl = (0, react.useMemo)(() => {
+		if (baseUrl) return baseUrl;
+		if (typeof window !== "undefined") return window.location.origin;
+		return "";
+	}, [baseUrl]);
+	/**
+	* Submit flow step data.
+	* Makes an unauthenticated request to /flow/execute endpoint.
+	*/
+	const handleSubmit = async (payload) => {
+		const response = await fetch(`${apiBaseUrl}/flow/execute`, {
+			body: JSON.stringify({
+				...payload,
+				verbose: true
+			}),
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json"
+			},
+			method: "POST"
+		});
+		if (!response.ok) {
+			const errorText = await response.text();
+			throw new Error(`Request failed: ${errorText}`);
+		}
+		return response.json();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseAcceptInvite.default, {
+		executionId,
+		inviteToken,
+		onSubmit: handleSubmit,
+		onComplete,
+		onError,
+		onFlowChange,
+		onGoToSignIn,
+		className,
+		size,
+		variant,
+		showTitle,
+		showSubtitle,
+		children
+	});
+};
+var AcceptInvite_default = AcceptInvite;
+
+//#endregion
+exports.default = AcceptInvite_default;
+//# sourceMappingURL=AcceptInvite.cjs.map

package/dist/cjs/components/presentation/auth/AcceptInvite/v2/AcceptInvite.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AcceptInvite.cjs","names":["params: any","AcceptInvite: FC<AcceptInviteProps>","executionId: any","inviteToken: any","apiBaseUrl: any","response: any","errorText: any","BaseAcceptInvite"],"sources":["../../../../../../../src/components/presentation/auth/AcceptInvite/v2/AcceptInvite.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {FC, ReactElement, ReactNode, useMemo} from 'react';\nimport BaseAcceptInvite, {BaseAcceptInviteRenderProps, AcceptInviteFlowResponse} from './BaseAcceptInvite';\n\n/**\n * Render props for AcceptInvite (re-exported for convenience).\n */\nexport type AcceptInviteRenderProps = BaseAcceptInviteRenderProps;\n\n/**\n * Props for the AcceptInvite component.\n */\nexport interface AcceptInviteProps {\n  /**\n   * Base URL for the Thunder API server.\n   * If not provided, will try to read from window location.\n   */\n  baseUrl?: string;\n\n  /**\n   * Render props function for custom UI.\n   * If not provided, default UI will be rendered by the SDK.\n   */\n  children?: (props: AcceptInviteRenderProps) => ReactNode;\n\n  /**\n   * Custom CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Flow ID from the invite link.\n   * If not provided, will be extracted from URL query parameters.\n   */\n  executionId?: string;\n\n  /**\n   * Invite token from the invite link.\n   * If not provided, will be extracted from URL query parameters.\n   */\n  inviteToken?: string;\n\n  /**\n   * Callback when the flow completes successfully.\n   */\n  onComplete?: () => void;\n\n  /**\n   * Callback when an error occurs.\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Callback when the flow state changes.\n   */\n  onFlowChange?: (response: AcceptInviteFlowResponse) => void;\n\n  /**\n   * Callback to navigate to sign in page.\n   */\n  onGoToSignIn?: () => void;\n\n  /**\n   * Whether to show the subtitle.\n   */\n  showSubtitle?: boolean;\n\n  /**\n   * Whether to show the title.\n   */\n  showTitle?: boolean;\n\n  /**\n   * Size variant for the component.\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Theme variant for the component card.\n   */\n  variant?: 'outlined' | 'elevated';\n}\n\n/**\n * Helper to extract query parameters from URL.\n */\nconst getUrlParams = (): {executionId?: string; inviteToken?: string} => {\n  if (typeof window === 'undefined') {\n    return {};\n  }\n\n  const params: any = new URLSearchParams(window.location.search);\n  return {\n    executionId: params.get('executionId') || undefined,\n    inviteToken: params.get('inviteToken') || undefined,\n  };\n};\n\n/**\n * AcceptInvite component for end-users to accept an invite and set their password.\n *\n * This component is designed for end users accessing the thunder-gate app via an invite link.\n * It automatically:\n * 1. Extracts executionId and inviteToken from URL query parameters\n * 2. Validates the invite token with the backend\n * 3. Displays the password form if token is valid\n * 4. Completes the accept invite when password is set\n *\n * @example\n * ```tsx\n * import { AcceptInvite } from '@thunderid/react';\n *\n * // URL: /invite?executionId=xxx&inviteToken=yyy\n *\n * const AcceptInvitePage = () => {\n *   return (\n *     <AcceptInvite\n *       baseUrl=\"https://api.thunder.io\"\n *       onComplete={() => navigate('/signin')}\n *       onError={(error) => console.error(error)}\n *     >\n *       {({ values, components, isLoading, isComplete, isValidatingToken, isTokenInvalid, error, handleInputChange, handleSubmit }) => (\n *         <div>\n *           {isValidatingToken && <p>Validating your invite...</p>}\n *           {isTokenInvalid && <p>Invalid or expired invite link</p>}\n *           {isComplete && <p>Registration complete! You can now sign in.</p>}\n *           {!isComplete && !isValidatingToken && !isTokenInvalid && (\n *             // Render password form based on components\n *           )}\n *         </div>\n *       )}\n *     </AcceptInvite>\n *   );\n * };\n * ```\n */\nconst AcceptInvite: FC<AcceptInviteProps> = ({\n  baseUrl,\n  executionId: executionIdProp,\n  inviteToken: inviteTokenProp,\n  onComplete,\n  onError,\n  onFlowChange,\n  onGoToSignIn,\n  className,\n  children,\n  size = 'medium',\n  variant = 'outlined',\n  showTitle = true,\n  showSubtitle = true,\n}: AcceptInviteProps): ReactElement => {\n  // Extract from URL if not provided as props\n  const {executionId: urlExecutionId, inviteToken: urlInviteToken} = useMemo(() => getUrlParams(), []);\n\n  const executionId: any = executionIdProp || urlExecutionId;\n  const inviteToken: any = inviteTokenProp || urlInviteToken;\n\n  // Determine base URL\n  const apiBaseUrl: any = useMemo(() => {\n    if (baseUrl) {\n      return baseUrl;\n    }\n    // Try to construct from current location (assuming same origin)\n    if (typeof window !== 'undefined') {\n      return window.location.origin;\n    }\n    return '';\n  }, [baseUrl]);\n\n  /**\n   * Submit flow step data.\n   * Makes an unauthenticated request to /flow/execute endpoint.\n   */\n  const handleSubmit = async (payload: Record<string, any>): Promise<AcceptInviteFlowResponse> => {\n    const response: any = await fetch(`${apiBaseUrl}/flow/execute`, {\n      body: JSON.stringify({\n        ...payload,\n        verbose: true,\n      }),\n      headers: {\n        Accept: 'application/json',\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    });\n\n    if (!response.ok) {\n      const errorText: any = await response.text();\n      throw new Error(`Request failed: ${errorText}`);\n    }\n\n    return response.json();\n  };\n\n  return (\n    <BaseAcceptInvite\n      executionId={executionId}\n      inviteToken={inviteToken}\n      onSubmit={handleSubmit}\n      onComplete={onComplete}\n      onError={onError}\n      onFlowChange={onFlowChange}\n      onGoToSignIn={onGoToSignIn}\n      className={className}\n      size={size}\n      variant={variant}\n      showTitle={showTitle}\n      showSubtitle={showSubtitle}\n    >\n      {children}\n    </BaseAcceptInvite>\n  );\n};\n\nexport default AcceptInvite;\n"],"mappings":";;;;;;;;;;;AAuGA,MAAM,qBAAmE;AACvE,KAAI,OAAO,WAAW,YACpB,QAAO,EAAE;CAGX,MAAMA,SAAc,IAAI,gBAAgB,OAAO,SAAS,OAAO;AAC/D,QAAO;EACL,aAAa,OAAO,IAAI,cAAc,IAAI;EAC1C,aAAa,OAAO,IAAI,cAAc,IAAI;EAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCH,MAAMC,gBAAuC,EAC3C,SACA,aAAa,iBACb,aAAa,iBACb,YACA,SACA,cACA,cACA,WACA,UACA,OAAO,UACP,UAAU,YACV,YAAY,MACZ,eAAe,WACsB;CAErC,MAAM,EAAC,aAAa,gBAAgB,aAAa,4CAAgC,cAAc,EAAE,EAAE,CAAC;CAEpG,MAAMC,cAAmB,mBAAmB;CAC5C,MAAMC,cAAmB,mBAAmB;CAG5C,MAAMC,sCAAgC;AACpC,MAAI,QACF,QAAO;AAGT,MAAI,OAAO,WAAW,YACpB,QAAO,OAAO,SAAS;AAEzB,SAAO;IACN,CAAC,QAAQ,CAAC;;;;;CAMb,MAAM,eAAe,OAAO,YAAoE;EAC9F,MAAMC,WAAgB,MAAM,MAAM,GAAG,WAAW,gBAAgB;GAC9D,MAAM,KAAK,UAAU;IACnB,GAAG;IACH,SAAS;IACV,CAAC;GACF,SAAS;IACP,QAAQ;IACR,gBAAgB;IACjB;GACD,QAAQ;GACT,CAAC;AAEF,MAAI,CAAC,SAAS,IAAI;GAChB,MAAMC,YAAiB,MAAM,SAAS,MAAM;AAC5C,SAAM,IAAI,MAAM,mBAAmB,YAAY;;AAGjD,SAAO,SAAS,MAAM;;AAGxB,QACE,2CAACC;EACc;EACA;EACb,UAAU;EACE;EACH;EACK;EACA;EACH;EACL;EACG;EACE;EACG;EAEb;GACgB;;AAIvB,2BAAe"}