npm - @thunderid/react - Versions diffs - 0.3.6 → 0.4.0 - Mend

@thunderid/react 0.3.6 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/dist/cjs/components/primitives/Typography/Typography.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Typography.cjs","names":["variantMapping: Record<TypographyVariant, ElementType>","Typography: FC<TypographyProps>","useTheme","styles: Record<string, string>","useStyles","Component: ElementType"],"sources":["../../../../../src/components/primitives/Typography/Typography.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 {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {CSSProperties, FC, ReactNode, ElementType} from 'react';\nimport useStyles, {TypographyVariant, TypographyAlign, TypographyColor} from './Typography.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface TypographyProps {\n /\n Text alignment\n /\n align?: TypographyAlign;\n /\n The content to be rendered\n /\n children: ReactNode;\n /\n Additional CSS class names\n /\n className?: string;\n /\n Color variant\n /\n color?: TypographyColor;\n /\n The HTML element or React component to render\n /\n component?: ElementType;\n /\n Custom font size (overrides variant sizing)\n /\n fontSize?: string \| number;\n /\n Custom font weight\n /\n fontWeight?: 'normal' \| 'medium' \| 'semibold' \| 'bold' \| number;\n /\n Whether to disable gutters (margin bottom)\n /\n gutterBottom?: boolean;\n /\n Whether the text should be displayed inline\n /\n inline?: boolean;\n /\n Line height\n /\n lineHeight?: string \| number;\n /\n Whether the text should be clipped with ellipsis when it overflows\n /\n noWrap?: boolean;\n /\n Custom styles\n /\n style?: CSSProperties;\n /\n The typography variant to apply\n /\n variant?: TypographyVariant;\n}\n\n// Default component mapping for variants\nconst variantMapping: Record<TypographyVariant, ElementType> = {\n body1: 'p',\n body2: 'p',\n button: 'span',\n caption: 'span',\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n h6: 'h6',\n overline: 'span',\n subtitle1: 'h6',\n subtitle2: 'h6',\n};\n\n/\n Typography component for consistent text rendering throughout the application.\n * Integrates with the theme system and provides semantic HTML elements.\n */\nconst Typography: FC<TypographyProps> = ({\n children,\n variant = 'body1',\n component,\n align = 'left',\n color = 'textPrimary',\n noWrap = false,\n className,\n style = {},\n inline = false,\n fontWeight,\n fontSize,\n lineHeight,\n gutterBottom = false,\n ...rest\n}: TypographyProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(\n theme,\n colorScheme,\n variant,\n align,\n color,\n noWrap,\n inline,\n gutterBottom,\n fontWeight,\n fontSize,\n lineHeight,\n );\n\n const Component: ElementType = component \|\| variantMapping[variant] \|\| 'span';\n\n const getVariantClass = (variantName: TypographyVariant): string => {\n switch (variantName) {\n case 'h1':\n return styles['typographyH1'];\n case 'h2':\n return styles['typographyH2'];\n case 'h3':\n return styles['typographyH3'];\n case 'h4':\n return styles['typographyH4'];\n case 'h5':\n return styles['typographyH5'];\n case 'h6':\n return styles['typographyH6'];\n case 'subtitle1':\n return styles['typographySubtitle1'];\n case 'subtitle2':\n return styles['typographySubtitle2'];\n case 'body1':\n return styles['typographyBody1'];\n case 'body2':\n return styles['typographyBody2'];\n case 'caption':\n return styles['typographyCaption'];\n case 'overline':\n return styles['typographyOverline'];\n case 'button':\n return styles['typographyButton'];\n default:\n return '';\n }\n };\n\n const typographyClassName: string = cx(\n withVendorCSSClassPrefix(bem('typography')),\n withVendorCSSClassPrefix(bem('typography', variant)),\n styles['typography'],\n getVariantClass(variant),\n noWrap && styles['typographyNoWrap'],\n inline && styles['typographyInline'],\n gutterBottom && styles['typographyGutterBottom'],\n className,\n );\n\n return (\n <Component className={typographyClassName} style={style} {...rest}>\n {children}\n </Component>\n );\n};\n\nexport default Typography;\n"],"mappings":";;;;;;;;;;;~~AAgFA~~,MAAMA,iBAAyD;CAC7D,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,UAAU;CACV,WAAW;CACX,WAAW;CACZ;;;;;AAMD,MAAMC,cAAmC,EACvC,UACA,UAAU,SACV,WACA,QAAQ,QACR,QAAQ,eACR,SAAS,OACT,WACA,QAAQ,EAAE,EACV,SAAS,OACT,YACA,UACA,YACA,eAAe,MACf,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,kCACrC,OACA,aACA,SACA,OACA,OACA,QACA,QACA,cACA,YACA,UACA,WACD;CAED,MAAMC,YAAyB,aAAa,eAAe,YAAY;CAEvE,MAAM,mBAAmB,gBAA2C;AAClE,UAAQ,aAAR;GACE,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,YACH,QAAO,OAAO;GAChB,KAAK,YACH,QAAO,OAAO;GAChB,KAAK,QACH,QAAO,OAAO;GAChB,KAAK,QACH,QAAO,OAAO;GAChB,KAAK,UACH,QAAO,OAAO;GAChB,KAAK,WACH,QAAO,OAAO;GAChB,KAAK,SACH,QAAO,OAAO;GAChB,QACE,QAAO;;;AAeb,QACE,2CAAC;EAAU,gHAXkB,aAAa,CAAC,iFACd,cAAc,QAAQ,CAAC,EACpD,OAAO,eACP,gBAAgB,QAAQ,EACxB,UAAU,OAAO,qBACjB,UAAU,OAAO,qBACjB,gBAAgB,OAAO,2BACvB,UACD;EAGmD;EAAO,GAAI;EAC1D;GACS;;AAIhB,yBAAe"}
1	+ {"version":3,"file":"Typography.cjs","names":["variantMapping: Record<TypographyVariant, ElementType>","Typography: FC<TypographyProps>","useTheme","styles: Record<string, string>","useStyles","Component: ElementType"],"sources":["../../../../../src/components/primitives/Typography/Typography.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 {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {CSSProperties, FC, ReactNode, ElementType} from 'react';\nimport useStyles, {TypographyVariant, TypographyAlign, TypographyColor} from './Typography.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface TypographyProps {\n /\n Text alignment\n /\n align?: TypographyAlign;\n /\n The content to be rendered\n /\n children: ReactNode;\n /\n Additional CSS class names\n /\n className?: string;\n /\n Color variant\n /\n color?: TypographyColor;\n /\n The HTML element or React component to render\n /\n component?: ElementType;\n /\n Custom font size (overrides variant sizing)\n /\n fontSize?: string \| number;\n /\n Custom font weight\n /\n fontWeight?: 'normal' \| 'medium' \| 'semibold' \| 'bold' \| number;\n /\n Whether to disable gutters (margin bottom)\n /\n gutterBottom?: boolean;\n /\n HTML id attribute\n /\n id?: string;\n /\n Whether the text should be displayed inline\n /\n inline?: boolean;\n /\n Line height\n /\n lineHeight?: string \| number;\n /\n Whether the text should be clipped with ellipsis when it overflows\n /\n noWrap?: boolean;\n /\n Custom styles\n /\n style?: CSSProperties;\n /\n The typography variant to apply\n /\n variant?: TypographyVariant;\n}\n\n// Default component mapping for variants\nconst variantMapping: Record<TypographyVariant, ElementType> = {\n body1: 'p',\n body2: 'p',\n button: 'span',\n caption: 'span',\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n h6: 'h6',\n overline: 'span',\n subtitle1: 'h6',\n subtitle2: 'h6',\n};\n\n/\n Typography component for consistent text rendering throughout the application.\n * Integrates with the theme system and provides semantic HTML elements.\n */\nconst Typography: FC<TypographyProps> = ({\n children,\n variant = 'body1',\n component,\n align = 'left',\n color = 'textPrimary',\n noWrap = false,\n className,\n style = {},\n inline = false,\n fontWeight,\n fontSize,\n lineHeight,\n gutterBottom = false,\n ...rest\n}: TypographyProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(\n theme,\n colorScheme,\n variant,\n align,\n color,\n noWrap,\n inline,\n gutterBottom,\n fontWeight,\n fontSize,\n lineHeight,\n );\n\n const Component: ElementType = component \|\| variantMapping[variant] \|\| 'span';\n\n const getVariantClass = (variantName: TypographyVariant): string => {\n switch (variantName) {\n case 'h1':\n return styles['typographyH1'];\n case 'h2':\n return styles['typographyH2'];\n case 'h3':\n return styles['typographyH3'];\n case 'h4':\n return styles['typographyH4'];\n case 'h5':\n return styles['typographyH5'];\n case 'h6':\n return styles['typographyH6'];\n case 'subtitle1':\n return styles['typographySubtitle1'];\n case 'subtitle2':\n return styles['typographySubtitle2'];\n case 'body1':\n return styles['typographyBody1'];\n case 'body2':\n return styles['typographyBody2'];\n case 'caption':\n return styles['typographyCaption'];\n case 'overline':\n return styles['typographyOverline'];\n case 'button':\n return styles['typographyButton'];\n default:\n return '';\n }\n };\n\n const typographyClassName: string = cx(\n withVendorCSSClassPrefix(bem('typography')),\n withVendorCSSClassPrefix(bem('typography', variant)),\n styles['typography'],\n getVariantClass(variant),\n noWrap && styles['typographyNoWrap'],\n inline && styles['typographyInline'],\n gutterBottom && styles['typographyGutterBottom'],\n className,\n );\n\n return (\n <Component className={typographyClassName} style={style} {...rest}>\n {children}\n </Component>\n );\n};\n\nexport default Typography;\n"],"mappings":";;;;;;;;;;;AAoFA,MAAMA,iBAAyD;CAC7D,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,UAAU;CACV,WAAW;CACX,WAAW;CACZ;;;;;AAMD,MAAMC,cAAmC,EACvC,UACA,UAAU,SACV,WACA,QAAQ,QACR,QAAQ,eACR,SAAS,OACT,WACA,QAAQ,EAAE,EACV,SAAS,OACT,YACA,UACA,YACA,eAAe,MACf,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,kCACrC,OACA,aACA,SACA,OACA,OACA,QACA,QACA,cACA,YACA,UACA,WACD;CAED,MAAMC,YAAyB,aAAa,eAAe,YAAY;CAEvE,MAAM,mBAAmB,gBAA2C;AAClE,UAAQ,aAAR;GACE,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,YACH,QAAO,OAAO;GAChB,KAAK,YACH,QAAO,OAAO;GAChB,KAAK,QACH,QAAO,OAAO;GAChB,KAAK,QACH,QAAO,OAAO;GAChB,KAAK,UACH,QAAO,OAAO;GAChB,KAAK,WACH,QAAO,OAAO;GAChB,KAAK,SACH,QAAO,OAAO;GAChB,QACE,QAAO;;;AAeb,QACE,2CAAC;EAAU,gHAXkB,aAAa,CAAC,iFACd,cAAc,QAAQ,CAAC,EACpD,OAAO,eACP,gBAAgB,QAAQ,EACxB,UAAU,OAAO,qBACjB,UAAU,OAAO,qBACjB,gBAAgB,OAAO,2BACvB,UACD;EAGmD;EAAO,GAAI;EAC1D;GACS;;AAIhB,yBAAe"}

package/dist/cjs/contexts/FlowMeta/FlowMetaProvider.cjs CHANGED Viewed

@@ -33,14 +33,15 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 * </FlowMetaProvider>
 * ```
 */
-const FlowMetaProvider = ({ children, enabled = true }) => {
+const FlowMetaProvider = ({ children, enabled = true, initialMeta = null }) => {
 	const { baseUrl, applicationId, isInitialized } = require_useThunderID.default();
 	const i18nContext = require_useI18n.default();
-	const [meta, setMeta] = (0, react.useState)(null);
-	const [isLoading, setIsLoading] = (0, react.useState)(true);
+	const [meta, setMeta] = (0, react.useState)(initialMeta);
+	const [isLoading, setIsLoading] = (0, react.useState)(!initialMeta);
 	const [error, setError] = (0, react.useState)(null);
 	const [pendingLanguage, setPendingLanguage] = (0, react.useState)(null);
 	const lastFetchedRef = (0, react.useRef)(null);
+	const initialMetaConsumedRef = (0, react.useRef)(false);
 	const fetchFlowMeta = (0, react.useCallback)(async () => {
 		if (!enabled) {
 			setMeta(null);
@@ -114,6 +115,13 @@ const FlowMetaProvider = ({ children, enabled = true }) => {
 		}
 	}, [pendingLanguage, i18nContext?.setLanguage]);
 	(0, react.useEffect)(() => {
+		if (!initialMetaConsumedRef.current) {
+			initialMetaConsumedRef.current = true;
+			if (initialMeta) {
+				lastFetchedRef.current = fetchFlowMeta;
+				return;
+			}
+		}
 		if (lastFetchedRef.current === fetchFlowMeta) return;
 		lastFetchedRef.current = fetchFlowMeta;
 		fetchFlowMeta();

package/dist/cjs/contexts/FlowMeta/FlowMetaProvider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowMetaProvider.cjs","names":["FlowMetaProvider: FC<PropsWithChildren<FlowMetaProviderProps>>","useThunderID","i18nContext: I18nContextValue","useI18n","lastFetchedRef: RefObject<(() => Promise<void>) \| null>","fetchFlowMeta: () => Promise<void>","FlowMetaType","err: unknown","switchLanguage: (language: string) => Promise<void>","result: FlowMetadataResponse","flatTranslations: Record<string, string>","value","bundle: I18nBundle","metaLanguage: string","TranslationBundleConstants","bundlesToInject: Record<string, I18nBundle>","value: any","FlowMetaContext"],"sources":["../../../../src/contexts/FlowMeta/FlowMetaProvider.tsx"],"sourcesContent":["/*\n Copyright (c) 2026, 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 {\n FlowMetadataResponse,\n FlowMetaType,\n getFlowMeta,\n I18nBundle,\n TranslationBundleConstants,\n} from '@thunderid/browser';\nimport {FC, PropsWithChildren, ReactElement, RefObject, useCallback, useEffect, useRef, useState} from 'react';\nimport FlowMetaContext from './FlowMetaContext';\nimport {I18nContextValue} from '../I18n/I18nContext';\nimport useI18n from '../I18n/useI18n';\nimport useThunderID from '../ThunderID/useThunderID';\n\nexport interface FlowMetaProviderProps {\n /\n When false the provider skips fetching and provides null meta.\n * @default true\n /\n enabled?: boolean;\n}\n\n/\n FlowMetaProvider fetches flow metadata from the `GET /flow/meta` endpoint\n * (v2 API) and makes it available to child components through `FlowMetaContext`.\n \n It is designed to be used in v2 embedded-flow scenarios and integrates with\n * `ThemeProvider` so that theme settings (colors, direction, typography, …)\n * from the server-side design configuration are applied automatically.\n \n @example\n * ```tsx\n * <FlowMetaProvider\n * config={{\n * baseUrl: 'https://localhost:8090',\n * type: FlowMetaType.App,\n * id: 'your-app-id',\n * }}\n * >\n * <ThemeProvider>\n * <App />\n * </ThemeProvider>\n * </FlowMetaProvider>\n * ```\n */\nconst FlowMetaProvider: FC<PropsWithChildren<FlowMetaProviderProps>> = ({\n children,\n enabled = true,\n}: PropsWithChildren<FlowMetaProviderProps>): ReactElement => {\n const {baseUrl, applicationId, isInitialized} = useThunderID();\n const i18nContext: I18nContextValue = useI18n();\n\n const [meta, setMeta] = useState<FlowMetadataResponse \| null>(null);\n const [isLoading, setIsLoading] = useState<boolean>(true);\n const [error, setError] = useState<Error \| null>(null);\n const [pendingLanguage, setPendingLanguage] = useState<string \| null>(null);\n\n // Track the last fetchFlowMeta reference that was actually dispatched.\n // This prevents two classes of double-fetch:\n // 1. React StrictMode simulates unmount+remount — the re-mount fires the\n // effect again with the same fetchFlowMeta reference; without this guard\n // the else-branch would issue a redundant second network request.\n // 2. Rapid dependency changes (e.g. baseUrl stabilising) that produce two\n // effect firings before the first fetch completes.\n const lastFetchedRef: RefObject<(() => Promise<void>) \| null> = useRef<(() => Promise<void>) \| null>(null);\n const fetchFlowMeta: () => Promise<void> = useCallback(async (): Promise<void> => {\n if (!enabled) {\n setMeta(null);\n setIsLoading(false);\n return;\n }\n\n // Defer until ThunderID finishes initializing (e.g. loading applicationId\n // from storage on refresh). Once initialized, proceed even if applicationId\n // is absent — some flows (e.g. AcceptInvite) have no applicationId by design.\n if (!isInitialized && !applicationId) {\n return;\n }\n\n setIsLoading(true);\n setError(null);\n\n try {\n const result: FlowMetadataResponse = await getFlowMeta({\n baseUrl,\n ...(applicationId ? {id: applicationId, type: FlowMetaType.App} : {}),\n language: i18nContext?.currentLanguage,\n });\n setMeta(result);\n } catch (err: unknown) {\n setError(err instanceof Error ? err : new Error(String(err)));\n } finally {\n setIsLoading(false);\n }\n }, [enabled, baseUrl, applicationId, isInitialized, i18nContext?.currentLanguage]);\n\n const switchLanguage: (language: string) => Promise<void> = useCallback(\n async (language: string): Promise<void> => {\n if (!enabled) return;\n\n setIsLoading(true);\n setError(null);\n\n try {\n const result: FlowMetadataResponse = await getFlowMeta({\n baseUrl,\n ...(applicationId ? {id: applicationId, type: FlowMetaType.App} : {}),\n language,\n });\n\n // Inject translations for the new language before switching\n if (result.i18n?.translations && i18nContext?.injectBundles) {\n const flatTranslations: Record<string, string> = {};\n Object.entries(result.i18n.translations).forEach(([namespace, keys]: [string, Record<string, string>]) => {\n Object.entries(keys).forEach(([key, value]: [string, string]) => {\n flatTranslations[`${namespace}.${key}`] = value;\n });\n });\n const bundle: I18nBundle = {translations: flatTranslations} as unknown as I18nBundle;\n i18nContext.injectBundles({[language]: bundle});\n }\n\n // Defer setLanguage to the next effect cycle so injectBundles state\n // is committed before I18nProvider's setLanguage checks mergedBundles.\n setPendingLanguage(language);\n setMeta(result);\n } catch (err: unknown) {\n setError(err instanceof Error ? err : new Error(String(err)));\n } finally {\n setIsLoading(false);\n }\n },\n [enabled, baseUrl, applicationId, i18nContext],\n );\n\n // After injectBundles + setPendingLanguage are batched and committed, this\n // effect fires with the updated i18nContext (mergedBundles now includes the\n // new language), so setLanguage succeeds on the first switch.\n useEffect(() => {\n if (pendingLanguage && i18nContext?.setLanguage) {\n i18nContext.setLanguage(pendingLanguage);\n setPendingLanguage(null);\n }\n }, [pendingLanguage, i18nContext?.setLanguage]);\n\n useEffect(() => {\n if (lastFetchedRef.current === fetchFlowMeta) {\n // Same reference as the last dispatch — this is a StrictMode re-mount\n // or an effect re-fire with unchanged deps. Skip to avoid a duplicate fetch.\n return;\n }\n\n lastFetchedRef.current = fetchFlowMeta;\n fetchFlowMeta();\n }, [fetchFlowMeta]);\n\n // When meta loads with i18n translations, inject them into the i18n system.\n // Meta translations act as the base layer — prop-provided bundles still take precedence.\n useEffect(() => {\n if (!meta?.i18n?.translations \|\| !i18nContext?.injectBundles) {\n return;\n }\n\n const metaLanguage: string = meta.i18n.language \|\| TranslationBundleConstants.FALLBACK_LOCALE;\n\n // Flatten namespace-keyed translations to dot-path keys:\n // { \"signin\": { \"heading\": \"Sign In\" } } → { \"signin.heading\": \"Sign In\" }\n const flatTranslations: Record<string, string> = {};\n Object.entries(meta.i18n.translations).forEach(([namespace, keys]: [string, Record<string, string>]) => {\n Object.entries(keys).forEach(([key, value]: [string, string]) => {\n flatTranslations[`${namespace}.${key}`] = value;\n });\n });\n\n const bundle: I18nBundle = {translations: flatTranslations} as unknown as I18nBundle;\n\n // Inject under the meta language code and the i18n current language so\n // lookups succeed regardless of whether the system uses \"en\" or \"en-US\".\n const bundlesToInject: Record<string, I18nBundle> = {[metaLanguage]: bundle};\n if (i18nContext.currentLanguage && i18nContext.currentLanguage !== metaLanguage) {\n bundlesToInject[i18nContext.currentLanguage] = bundle;\n }\n if (i18nContext.fallbackLanguage && i18nContext.fallbackLanguage !== metaLanguage) {\n bundlesToInject[i18nContext.fallbackLanguage] = bundle;\n }\n\n i18nContext.injectBundles(bundlesToInject);\n }, [meta?.i18n?.translations, i18nContext?.injectBundles]);\n\n const value: any = {\n error,\n fetchFlowMeta,\n isLoading,\n meta,\n switchLanguage,\n };\n\n return <FlowMetaContext.Provider value={value}>{children}</FlowMetaContext.Provider>;\n};\n\nexport default FlowMetaProvider;\n"],"mappings":"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"}
1	+ {"version":3,"file":"FlowMetaProvider.cjs","names":["FlowMetaProvider: FC<PropsWithChildren<FlowMetaProviderProps>>","useThunderID","i18nContext: I18nContextValue","useI18n","lastFetchedRef: RefObject<(() => Promise<void>) \| null>","initialMetaConsumedRef: RefObject<boolean>","fetchFlowMeta: () => Promise<void>","FlowMetaType","err: unknown","switchLanguage: (language: string) => Promise<void>","result: FlowMetadataResponse","flatTranslations: Record<string, string>","value","bundle: I18nBundle","metaLanguage: string","TranslationBundleConstants","bundlesToInject: Record<string, I18nBundle>","value: any","FlowMetaContext"],"sources":["../../../../src/contexts/FlowMeta/FlowMetaProvider.tsx"],"sourcesContent":["/*\n Copyright (c) 2026, 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 {\n FlowMetadataResponse,\n FlowMetaType,\n getFlowMeta,\n I18nBundle,\n TranslationBundleConstants,\n} from '@thunderid/browser';\nimport {FC, PropsWithChildren, ReactElement, RefObject, useCallback, useEffect, useRef, useState} from 'react';\nimport FlowMetaContext from './FlowMetaContext';\nimport {I18nContextValue} from '../I18n/I18nContext';\nimport useI18n from '../I18n/useI18n';\nimport useThunderID from '../ThunderID/useThunderID';\n\nexport interface FlowMetaProviderProps {\n /\n When false the provider skips fetching and provides null meta.\n * @default true\n /\n enabled?: boolean;\n\n /\n Flow metadata resolved ahead of time (e.g. fetched server-side during SSR) and used to seed\n * the provider's state. When present, the provider skips its own initial client-side fetch —\n * avoiding a redundant request and the flash of untranslated i18n keys while that fetch is in\n * flight — but still fetches normally on subsequent changes (e.g. an explicit language switch).\n /\n initialMeta?: FlowMetadataResponse \| null;\n}\n\n/\n FlowMetaProvider fetches flow metadata from the `GET /flow/meta` endpoint\n * (v2 API) and makes it available to child components through `FlowMetaContext`.\n \n It is designed to be used in v2 embedded-flow scenarios and integrates with\n * `ThemeProvider` so that theme settings (colors, direction, typography, …)\n * from the server-side design configuration are applied automatically.\n \n @example\n * ```tsx\n * <FlowMetaProvider\n * config={{\n * baseUrl: 'https://localhost:8090',\n * type: FlowMetaType.App,\n * id: 'your-app-id',\n * }}\n * >\n * <ThemeProvider>\n * <App />\n * </ThemeProvider>\n * </FlowMetaProvider>\n * ```\n */\nconst FlowMetaProvider: FC<PropsWithChildren<FlowMetaProviderProps>> = ({\n children,\n enabled = true,\n initialMeta = null,\n}: PropsWithChildren<FlowMetaProviderProps>): ReactElement => {\n const {baseUrl, applicationId, isInitialized} = useThunderID();\n const i18nContext: I18nContextValue = useI18n();\n\n const [meta, setMeta] = useState<FlowMetadataResponse \| null>(initialMeta);\n const [isLoading, setIsLoading] = useState<boolean>(!initialMeta);\n const [error, setError] = useState<Error \| null>(null);\n const [pendingLanguage, setPendingLanguage] = useState<string \| null>(null);\n\n // Track the last fetchFlowMeta reference that was actually dispatched.\n // This prevents two classes of double-fetch:\n // 1. React StrictMode simulates unmount+remount — the re-mount fires the\n // effect again with the same fetchFlowMeta reference; without this guard\n // the else-branch would issue a redundant second network request.\n // 2. Rapid dependency changes (e.g. baseUrl stabilising) that produce two\n // effect firings before the first fetch completes.\n const lastFetchedRef: RefObject<(() => Promise<void>) \| null> = useRef<(() => Promise<void>) \| null>(null);\n const initialMetaConsumedRef: RefObject<boolean> = useRef(false);\n const fetchFlowMeta: () => Promise<void> = useCallback(async (): Promise<void> => {\n if (!enabled) {\n setMeta(null);\n setIsLoading(false);\n return;\n }\n\n // Defer until ThunderID finishes initializing (e.g. loading applicationId\n // from storage on refresh). Once initialized, proceed even if applicationId\n // is absent — some flows (e.g. AcceptInvite) have no applicationId by design.\n if (!isInitialized && !applicationId) {\n return;\n }\n\n setIsLoading(true);\n setError(null);\n\n try {\n const result: FlowMetadataResponse = await getFlowMeta({\n baseUrl,\n ...(applicationId ? {id: applicationId, type: FlowMetaType.App} : {}),\n language: i18nContext?.currentLanguage,\n });\n setMeta(result);\n } catch (err: unknown) {\n setError(err instanceof Error ? err : new Error(String(err)));\n } finally {\n setIsLoading(false);\n }\n }, [enabled, baseUrl, applicationId, isInitialized, i18nContext?.currentLanguage]);\n\n const switchLanguage: (language: string) => Promise<void> = useCallback(\n async (language: string): Promise<void> => {\n if (!enabled) return;\n\n setIsLoading(true);\n setError(null);\n\n try {\n const result: FlowMetadataResponse = await getFlowMeta({\n baseUrl,\n ...(applicationId ? {id: applicationId, type: FlowMetaType.App} : {}),\n language,\n });\n\n // Inject translations for the new language before switching\n if (result.i18n?.translations && i18nContext?.injectBundles) {\n const flatTranslations: Record<string, string> = {};\n Object.entries(result.i18n.translations).forEach(([namespace, keys]: [string, Record<string, string>]) => {\n Object.entries(keys).forEach(([key, value]: [string, string]) => {\n flatTranslations[`${namespace}.${key}`] = value;\n });\n });\n const bundle: I18nBundle = {translations: flatTranslations} as unknown as I18nBundle;\n i18nContext.injectBundles({[language]: bundle});\n }\n\n // Defer setLanguage to the next effect cycle so injectBundles state\n // is committed before I18nProvider's setLanguage checks mergedBundles.\n setPendingLanguage(language);\n setMeta(result);\n } catch (err: unknown) {\n setError(err instanceof Error ? err : new Error(String(err)));\n } finally {\n setIsLoading(false);\n }\n },\n [enabled, baseUrl, applicationId, i18nContext],\n );\n\n // After injectBundles + setPendingLanguage are batched and committed, this\n // effect fires with the updated i18nContext (mergedBundles now includes the\n // new language), so setLanguage succeeds on the first switch.\n useEffect(() => {\n if (pendingLanguage && i18nContext?.setLanguage) {\n i18nContext.setLanguage(pendingLanguage);\n setPendingLanguage(null);\n }\n }, [pendingLanguage, i18nContext?.setLanguage]);\n\n useEffect(() => {\n if (!initialMetaConsumedRef.current) {\n initialMetaConsumedRef.current = true;\n\n if (initialMeta) {\n // Seeded from SSR (or another caller) — skip the redundant first client-side fetch.\n // Later dependency changes (e.g. an explicit language switch) still fetch normally.\n lastFetchedRef.current = fetchFlowMeta;\n return;\n }\n }\n\n if (lastFetchedRef.current === fetchFlowMeta) {\n // Same reference as the last dispatch — this is a StrictMode re-mount\n // or an effect re-fire with unchanged deps. Skip to avoid a duplicate fetch.\n return;\n }\n\n lastFetchedRef.current = fetchFlowMeta;\n fetchFlowMeta();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [fetchFlowMeta]);\n\n // When meta loads with i18n translations, inject them into the i18n system.\n // Meta translations act as the base layer — prop-provided bundles still take precedence.\n useEffect(() => {\n if (!meta?.i18n?.translations \|\| !i18nContext?.injectBundles) {\n return;\n }\n\n const metaLanguage: string = meta.i18n.language \|\| TranslationBundleConstants.FALLBACK_LOCALE;\n\n // Flatten namespace-keyed translations to dot-path keys:\n // { \"signin\": { \"heading\": \"Sign In\" } } → { \"signin.heading\": \"Sign In\" }\n const flatTranslations: Record<string, string> = {};\n Object.entries(meta.i18n.translations).forEach(([namespace, keys]: [string, Record<string, string>]) => {\n Object.entries(keys).forEach(([key, value]: [string, string]) => {\n flatTranslations[`${namespace}.${key}`] = value;\n });\n });\n\n const bundle: I18nBundle = {translations: flatTranslations} as unknown as I18nBundle;\n\n // Inject under the meta language code and the i18n current language so\n // lookups succeed regardless of whether the system uses \"en\" or \"en-US\".\n const bundlesToInject: Record<string, I18nBundle> = {[metaLanguage]: bundle};\n if (i18nContext.currentLanguage && i18nContext.currentLanguage !== metaLanguage) {\n bundlesToInject[i18nContext.currentLanguage] = bundle;\n }\n if (i18nContext.fallbackLanguage && i18nContext.fallbackLanguage !== metaLanguage) {\n bundlesToInject[i18nContext.fallbackLanguage] = bundle;\n }\n\n i18nContext.injectBundles(bundlesToInject);\n }, [meta?.i18n?.translations, i18nContext?.injectBundles]);\n\n const value: any = {\n error,\n fetchFlowMeta,\n isLoading,\n meta,\n switchLanguage,\n };\n\n return <FlowMetaContext.Provider value={value}>{children}</FlowMetaContext.Provider>;\n};\n\nexport default FlowMetaProvider;\n"],"mappings":"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"}

package/dist/cjs/index.cjs CHANGED Viewed

@@ -17,6 +17,7 @@ const require_useUser = require('./contexts/User/useUser.cjs');
 const require_useFlow = require('./contexts/Flow/useFlow.cjs');
 const require_useTheme = require('./contexts/Theme/useTheme.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('./components/primitives/Spinner/Spinner.cjs');
 const require_Button = require('./components/primitives/Button/Button.cjs');
@@ -258,6 +259,7 @@ Object.defineProperty(exports, 'extractEmojiFromUri', {
     return __thunderid_browser.extractEmojiFromUri;
   }
 });
+exports.extractErrorMessage = require_flowTransformer.extractErrorMessage;
 Object.defineProperty(exports, 'getActiveTheme', {
   enumerable: true,
   get: function () {
@@ -284,6 +286,7 @@ Object.defineProperty(exports, 'navigate', {
     return __thunderid_browser.navigate;
   }
 });
+exports.normalizeFlowResponse = require_flowTransformer.normalizeFlowResponse;
 Object.defineProperty(exports, 'resolveEmojiUrisInHtml', {
   enumerable: true,
   get: function () {

package/dist/components/factories/FieldFactory.d.ts CHANGED Viewed

@@ -34,6 +34,10 @@ export interface FieldConfig {
      * Error message to display.
      */
     error?: string;
+    /**
+     * HTML id to apply to the rendered field.
+     */
+    id?: string;
     /**
      * Display name for the field.
      */

package/dist/components/factories/FieldFactory.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldFactory.d.ts","sourceRoot":"","sources":["../../../src/components/factories/FieldFactory.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAc,EAAE,EAAE,YAAY,EAAC,MAAM,OAAO,CAAC;AAKpD,OAAe,EAAC,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAGjE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,MAAM,EACb,MAAM,SAAS,EACf,kBAAgB,EAChB,iBAAe,KACd,MAAM,GAAG,IAsBX,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,WAAW,GAAI,QAAQ,WAAW,KAAG,~~YA2HjD~~,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,WAAW,CAA4D,CAAC;AAEtG,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"FieldFactory.d.ts","sourceRoot":"","sources":["../../../src/components/factories/FieldFactory.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAc,EAAE,EAAE,YAAY,EAAC,MAAM,OAAO,CAAC;AAKpD,OAAe,EAAC,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAGjE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,MAAM,EACb,MAAM,SAAS,EACf,kBAAgB,EAChB,iBAAe,KACd,MAAM,GAAG,IAsBX,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,WAAW,GAAI,QAAQ,WAAW,KAAG,YA6HjD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,WAAW,CAA4D,CAAC;AAEtG,eAAe,YAAY,CAAC"}

package/dist/components/factories/FieldFactory.js CHANGED Viewed

@@ -44,13 +44,14 @@ const validateFieldValue = (value, type, required = false, touched = false) => {
 * ```
 */
 const createField = (config) => {
-	const { name, type, label, required, value, onChange, onBlur, disabled = false, error, className, options = [], touched = false, placeholder } = config;
+	const { name, type, label, required, value, onChange, onBlur, disabled = false, error, className, id, options = [], touched = false, placeholder } = config;
 	const validationError = error || validateFieldValue(value, type, required, touched);
 	const commonProps = {
 		className,
 		"data-testid": `thunderid-signin-${name}`,
 		disabled,
 		error: validationError,
+		id,
 		label,
 		name,
 		onBlur,

package/dist/components/factories/FieldFactory.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldFactory.js","names":["numValue: number","validationError: string \| null","commonProps: Record<string, any>","PasswordField","TextField","DatePicker","isChecked: boolean","Checkbox","OtpField","fieldOptions: SelectOption[]","Select","FieldFactory: FC<FieldConfig>"],"sources":["../../../src/components/factories/FieldFactory.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 {FieldType} from '@thunderid/browser';\nimport {ChangeEvent, FC, ReactElement} from 'react';\nimport Checkbox from '../primitives/Checkbox/Checkbox';\nimport DatePicker from '../primitives/DatePicker/DatePicker';\nimport OtpField from '../primitives/OtpField/OtpField';\nimport PasswordField from '../primitives/PasswordField/PasswordField';\nimport Select, {SelectOption} from '../primitives/Select/Select';\nimport TextField from '../primitives/TextField/TextField';\n\n/\n Interface for field configuration.\n /\nexport interface FieldConfig {\n /\n Additional CSS class name.\n /\n className?: string;\n /\n Whether the field is disabled.\n /\n disabled?: boolean;\n /\n Error message to display.\n /\n error?: string;\n /\n Display name for the field.\n /\n label: string;\n /\n The name of the field.\n /\n name: string;\n /\n Callback function when the field loses focus.\n /\n onBlur?: () => void;\n /\n Callback function when the field value changes.\n /\n onChange: (value: string) => void;\n /\n Additional options for multi-valued fields.\n /\n options?: SelectOption[];\n /\n Placeholder text for the field.\n /\n placeholder?: string;\n /\n Whether the field is required.\n /\n required: boolean;\n /\n Whether the field has been touched/interacted with by the user.\n /\n touched?: boolean;\n /\n The field type.\n /\n type: FieldType;\n /\n Current value of the field.\n /\n value: string;\n}\n\n/\n Utility function to validate field values based on type\n /\nexport const validateFieldValue = (\n value: string,\n type: FieldType,\n required = false,\n touched = false,\n): string \| null => {\n if (required && touched && (!value \|\| value.trim() === '')) {\n return 'This field is required';\n }\n\n if (!value \|\| value.trim() === '') {\n return null;\n }\n\n switch (type) {\n case FieldType.Number: {\n const numValue: number = parseInt(value, 10);\n if (Number.isNaN(numValue)) {\n return 'Please enter a valid number';\n }\n break;\n }\n default:\n break;\n }\n\n return null;\n};\n\n/\n Factory function to create form fields based on field type.\n \n @param config - The field configuration\n * @returns The appropriate React component for the field type\n \n @example\n * ```tsx\n * const field = createField({\n * param: 'username',\n * type: FieldType.Text,\n * label: 'Username',\n * confidential: false,\n * required: true,\n * value: '',\n * onChange: (value) => console.log(value)\n * });\n * ```\n /\nexport const createField = (config: FieldConfig): ReactElement => {\n const {\n name,\n type,\n label,\n required,\n value,\n onChange,\n onBlur,\n disabled = false,\n error,\n className,\n options = [],\n touched = false,\n placeholder,\n } = config;\n\n const validationError: string \| null = error \|\| validateFieldValue(value, type, required, touched);\n\n const commonProps: Record<string, any> = {\n className,\n 'data-testid': `thunderid-signin-${name}`,\n disabled,\n error: validationError,\n label,\n name,\n onBlur,\n placeholder,\n required,\n value,\n };\n\n switch (type) {\n case FieldType.Password:\n return <PasswordField {...commonProps} onChange={onChange} />;\n case FieldType.Text:\n return (\n <TextField\n {...commonProps}\n type=\"text\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n autoComplete=\"off\"\n />\n );\n case FieldType.Email:\n return (\n <TextField\n {...commonProps}\n type=\"email\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n autoComplete=\"email\"\n />\n );\n case FieldType.Tel:\n return (\n <TextField\n {...commonProps}\n type=\"tel\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n autoComplete=\"tel\"\n />\n );\n case FieldType.Date:\n return (\n <DatePicker {...commonProps} onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)} />\n );\n case FieldType.Checkbox: {\n const isChecked: boolean = value === 'true' \|\| (value as any) === true;\n return (\n <Checkbox\n {...commonProps}\n checked={isChecked}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.checked.toString())}\n />\n );\n }\n case FieldType.Otp:\n return (\n <OtpField {...commonProps} onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)} />\n );\n case FieldType.Number:\n return (\n <TextField\n {...commonProps}\n type=\"number\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n helperText=\"Enter a numeric value\"\n />\n );\n case FieldType.Select: {\n const fieldOptions: SelectOption[] = options.length > 0 ? options : [];\n\n if (fieldOptions.length > 0) {\n return (\n <Select\n {...commonProps}\n options={fieldOptions}\n onChange={(e: ChangeEvent<HTMLSelectElement>): void => onChange(e.target.value)}\n helperText=\"Select from available options\"\n />\n );\n }\n\n return (\n <TextField\n {...commonProps}\n type=\"text\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n helperText=\"Enter multiple values separated by commas (e.g., value1, value2, value3)\"\n placeholder=\"value1, value2, value3\"\n />\n );\n }\n default:\n return (\n <TextField\n {...commonProps}\n type=\"text\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n helperText=\"Unknown field type, treating as text\"\n />\n );\n }\n};\n\n/\n React component wrapper for the field factory.\n */\nexport const FieldFactory: FC<FieldConfig> = (props: FieldConfig): ReactElement => createField(props);\n\nexport default FieldFactory;\n"],"mappings":";;;;;;;;;;;;;~~AAwFA~~,MAAa,sBACX,OACA,MACA,WAAW,OACX,UAAU,UACQ;AAClB,KAAI,YAAY,YAAY,CAAC,SAAS,MAAM,MAAM,KAAK,IACrD,QAAO;AAGT,KAAI,CAAC,SAAS,MAAM,MAAM,KAAK,GAC7B,QAAO;AAGT,SAAQ,MAAR;EACE,KAAK,UAAU,QAAQ;GACrB,MAAMA,WAAmB,SAAS,OAAO,GAAG;AAC5C,OAAI,OAAO,MAAM,SAAS,CACxB,QAAO;AAET;;EAEF,QACE;;AAGJ,QAAO;;;;;;;;;;;;;;;;;;;;;AAsBT,MAAa,eAAe,WAAsC;CAChE,MAAM,EACJ,MACA,MACA,OACA,UACA,OACA,UACA,QACA,WAAW,OACX,OACA,WACA,UAAU,EAAE,EACZ,UAAU,OACV,gBACE;CAEJ,MAAMC,kBAAiC,SAAS,mBAAmB,OAAO,MAAM,UAAU,QAAQ;CAElG,MAAMC,cAAmC;EACvC;EACA,eAAe,oBAAoB;EACnC;EACA,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACD;AAED,SAAQ,MAAR;EACE,KAAK,UAAU,SACb,QAAO,oBAACC;GAAc,GAAI;GAAuB;IAAY;EAC/D,KAAK,UAAU,KACb,QACE,oBAACC;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,MACb,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,IACb,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,KACb,QACE,oBAACC;GAAW,GAAI;GAAa,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAAI;EAEnH,KAAK,UAAU,UAAU;GACvB,MAAMC,YAAqB,UAAU,UAAW,UAAkB;AAClE,UACE,oBAACC;IACC,GAAI;IACJ,SAAS;IACT,WAAW,MAA2C,SAAS,EAAE,OAAO,QAAQ,UAAU,CAAC;KAC3F;;EAGN,KAAK,UAAU,IACb,QACE,oBAACC;GAAS,GAAI;GAAa,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAAI;EAEjH,KAAK,UAAU,OACb,QACE,oBAACJ;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,YAAW;IACX;EAEN,KAAK,UAAU,QAAQ;GACrB,MAAMK,eAA+B,QAAQ,SAAS,IAAI,UAAU,EAAE;AAEtE,OAAI,aAAa,SAAS,EACxB,QACE,oBAACC;IACC,GAAI;IACJ,SAAS;IACT,WAAW,MAA4C,SAAS,EAAE,OAAO,MAAM;IAC/E,YAAW;KACX;AAIN,UACE,oBAACN;IACC,GAAI;IACJ,MAAK;IACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAC9E,YAAW;IACX,aAAY;KACZ;;EAGN,QACE,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,YAAW;IACX;;;;;;AAQV,MAAaO,gBAAiC,UAAqC,YAAY,MAAM"}
1	+ {"version":3,"file":"FieldFactory.js","names":["numValue: number","validationError: string \| null","commonProps: Record<string, any>","PasswordField","TextField","DatePicker","isChecked: boolean","Checkbox","OtpField","fieldOptions: SelectOption[]","Select","FieldFactory: FC<FieldConfig>"],"sources":["../../../src/components/factories/FieldFactory.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 {FieldType} from '@thunderid/browser';\nimport {ChangeEvent, FC, ReactElement} from 'react';\nimport Checkbox from '../primitives/Checkbox/Checkbox';\nimport DatePicker from '../primitives/DatePicker/DatePicker';\nimport OtpField from '../primitives/OtpField/OtpField';\nimport PasswordField from '../primitives/PasswordField/PasswordField';\nimport Select, {SelectOption} from '../primitives/Select/Select';\nimport TextField from '../primitives/TextField/TextField';\n\n/\n Interface for field configuration.\n /\nexport interface FieldConfig {\n /\n Additional CSS class name.\n /\n className?: string;\n /\n Whether the field is disabled.\n /\n disabled?: boolean;\n /\n Error message to display.\n /\n error?: string;\n /\n HTML id to apply to the rendered field.\n /\n id?: string;\n /\n Display name for the field.\n /\n label: string;\n /\n The name of the field.\n /\n name: string;\n /\n Callback function when the field loses focus.\n /\n onBlur?: () => void;\n /\n Callback function when the field value changes.\n /\n onChange: (value: string) => void;\n /\n Additional options for multi-valued fields.\n /\n options?: SelectOption[];\n /\n Placeholder text for the field.\n /\n placeholder?: string;\n /\n Whether the field is required.\n /\n required: boolean;\n /\n Whether the field has been touched/interacted with by the user.\n /\n touched?: boolean;\n /\n The field type.\n /\n type: FieldType;\n /\n Current value of the field.\n /\n value: string;\n}\n\n/\n Utility function to validate field values based on type\n /\nexport const validateFieldValue = (\n value: string,\n type: FieldType,\n required = false,\n touched = false,\n): string \| null => {\n if (required && touched && (!value \|\| value.trim() === '')) {\n return 'This field is required';\n }\n\n if (!value \|\| value.trim() === '') {\n return null;\n }\n\n switch (type) {\n case FieldType.Number: {\n const numValue: number = parseInt(value, 10);\n if (Number.isNaN(numValue)) {\n return 'Please enter a valid number';\n }\n break;\n }\n default:\n break;\n }\n\n return null;\n};\n\n/\n Factory function to create form fields based on field type.\n \n @param config - The field configuration\n * @returns The appropriate React component for the field type\n \n @example\n * ```tsx\n * const field = createField({\n * param: 'username',\n * type: FieldType.Text,\n * label: 'Username',\n * confidential: false,\n * required: true,\n * value: '',\n * onChange: (value) => console.log(value)\n * });\n * ```\n /\nexport const createField = (config: FieldConfig): ReactElement => {\n const {\n name,\n type,\n label,\n required,\n value,\n onChange,\n onBlur,\n disabled = false,\n error,\n className,\n id,\n options = [],\n touched = false,\n placeholder,\n } = config;\n\n const validationError: string \| null = error \|\| validateFieldValue(value, type, required, touched);\n\n const commonProps: Record<string, any> = {\n className,\n 'data-testid': `thunderid-signin-${name}`,\n disabled,\n error: validationError,\n id,\n label,\n name,\n onBlur,\n placeholder,\n required,\n value,\n };\n\n switch (type) {\n case FieldType.Password:\n return <PasswordField {...commonProps} onChange={onChange} />;\n case FieldType.Text:\n return (\n <TextField\n {...commonProps}\n type=\"text\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n autoComplete=\"off\"\n />\n );\n case FieldType.Email:\n return (\n <TextField\n {...commonProps}\n type=\"email\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n autoComplete=\"email\"\n />\n );\n case FieldType.Tel:\n return (\n <TextField\n {...commonProps}\n type=\"tel\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n autoComplete=\"tel\"\n />\n );\n case FieldType.Date:\n return (\n <DatePicker {...commonProps} onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)} />\n );\n case FieldType.Checkbox: {\n const isChecked: boolean = value === 'true' \|\| (value as any) === true;\n return (\n <Checkbox\n {...commonProps}\n checked={isChecked}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.checked.toString())}\n />\n );\n }\n case FieldType.Otp:\n return (\n <OtpField {...commonProps} onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)} />\n );\n case FieldType.Number:\n return (\n <TextField\n {...commonProps}\n type=\"number\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n helperText=\"Enter a numeric value\"\n />\n );\n case FieldType.Select: {\n const fieldOptions: SelectOption[] = options.length > 0 ? options : [];\n\n if (fieldOptions.length > 0) {\n return (\n <Select\n {...commonProps}\n options={fieldOptions}\n onChange={(e: ChangeEvent<HTMLSelectElement>): void => onChange(e.target.value)}\n helperText=\"Select from available options\"\n />\n );\n }\n\n return (\n <TextField\n {...commonProps}\n type=\"text\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n helperText=\"Enter multiple values separated by commas (e.g., value1, value2, value3)\"\n placeholder=\"value1, value2, value3\"\n />\n );\n }\n default:\n return (\n <TextField\n {...commonProps}\n type=\"text\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n helperText=\"Unknown field type, treating as text\"\n />\n );\n }\n};\n\n/\n React component wrapper for the field factory.\n */\nexport const FieldFactory: FC<FieldConfig> = (props: FieldConfig): ReactElement => createField(props);\n\nexport default FieldFactory;\n"],"mappings":";;;;;;;;;;;;;AA4FA,MAAa,sBACX,OACA,MACA,WAAW,OACX,UAAU,UACQ;AAClB,KAAI,YAAY,YAAY,CAAC,SAAS,MAAM,MAAM,KAAK,IACrD,QAAO;AAGT,KAAI,CAAC,SAAS,MAAM,MAAM,KAAK,GAC7B,QAAO;AAGT,SAAQ,MAAR;EACE,KAAK,UAAU,QAAQ;GACrB,MAAMA,WAAmB,SAAS,OAAO,GAAG;AAC5C,OAAI,OAAO,MAAM,SAAS,CACxB,QAAO;AAET;;EAEF,QACE;;AAGJ,QAAO;;;;;;;;;;;;;;;;;;;;;AAsBT,MAAa,eAAe,WAAsC;CAChE,MAAM,EACJ,MACA,MACA,OACA,UACA,OACA,UACA,QACA,WAAW,OACX,OACA,WACA,IACA,UAAU,EAAE,EACZ,UAAU,OACV,gBACE;CAEJ,MAAMC,kBAAiC,SAAS,mBAAmB,OAAO,MAAM,UAAU,QAAQ;CAElG,MAAMC,cAAmC;EACvC;EACA,eAAe,oBAAoB;EACnC;EACA,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,SAAQ,MAAR;EACE,KAAK,UAAU,SACb,QAAO,oBAACC;GAAc,GAAI;GAAuB;IAAY;EAC/D,KAAK,UAAU,KACb,QACE,oBAACC;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,MACb,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,IACb,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,KACb,QACE,oBAACC;GAAW,GAAI;GAAa,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAAI;EAEnH,KAAK,UAAU,UAAU;GACvB,MAAMC,YAAqB,UAAU,UAAW,UAAkB;AAClE,UACE,oBAACC;IACC,GAAI;IACJ,SAAS;IACT,WAAW,MAA2C,SAAS,EAAE,OAAO,QAAQ,UAAU,CAAC;KAC3F;;EAGN,KAAK,UAAU,IACb,QACE,oBAACC;GAAS,GAAI;GAAa,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAAI;EAEjH,KAAK,UAAU,OACb,QACE,oBAACJ;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,YAAW;IACX;EAEN,KAAK,UAAU,QAAQ;GACrB,MAAMK,eAA+B,QAAQ,SAAS,IAAI,UAAU,EAAE;AAEtE,OAAI,aAAa,SAAS,EACxB,QACE,oBAACC;IACC,GAAI;IACJ,SAAS;IACT,WAAW,MAA4C,SAAS,EAAE,OAAO,MAAM;IAC/E,YAAW;KACX;AAIN,UACE,oBAACN;IACC,GAAI;IACJ,MAAK;IACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAC9E,YAAW;IACX,aAAY;KACZ;;EAGN,QACE,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,YAAW;IACX;;;;;;AAQV,MAAaO,gBAAiC,UAAqC,YAAY,MAAM"}

package/dist/components/presentation/auth/AcceptInvite/BaseAcceptInvite.js CHANGED Viewed

@@ -2,9 +2,9 @@ import ComponentRendererContext_default from "../../../../contexts/ComponentRend
 import useThunderID_default from "../../../../contexts/ThunderID/useThunderID.js";
 import useTheme_default from "../../../../contexts/Theme/useTheme.js";
 import useTranslation_default from "../../../../hooks/useTranslation.js";
+import { extractErrorMessage, normalizeFlowResponse } from "../../../../utils/flowTransformer.js";
 import Spinner_default from "../../../primitives/Spinner/Spinner.js";
 import Button_default from "../../../primitives/Button/Button.js";
-import { extractErrorMessage, normalizeFlowResponse } from "../../../../utils/flowTransformer.js";
 import Typography_default from "../../../primitives/Typography/Typography.js";
 import Alert_default from "../../../primitives/Alert/Alert.js";
 import Card_default from "../../../primitives/Card/Card.js";

package/dist/components/presentation/auth/AuthOptionFactory.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AuthOptionFactory.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/auth/AuthOptionFactory.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAEL,oBAAoB,EACpB,qBAAqB,EAarB,4BAA4B,EAC7B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAA8B,YAAY,EAAC,MAAM,OAAO,CAAC;AAChE,OAAO,EAGL,oBAAoB,EACrB,MAAM,8DAA8D,CAAC;AACtE,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAgE7D,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;~~AA4lBxD~~;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,YAAY,qBAAqB,EAAE,EACnC,YAAY,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAClC,eAAe,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtC,YAAY,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAClC,WAAW,OAAO,EAClB,aAAa,OAAO,EACpB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,EACpD,UAAU;IACR,gBAAgB;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,gBAAgB;IAChB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,qBAAqB,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,cAAc,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5G,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,+EAA+E;IAC/E,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IACxB,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,KACA,YAAY,EAkBkC,CAAC;AAElD;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,YAAY,qBAAqB,EAAE,EACnC,YAAY,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAClC,eAAe,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtC,YAAY,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAClC,WAAW,OAAO,EAClB,aAAa,OAAO,EACpB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,EACpD,UAAU;IACR,gBAAgB;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,gBAAgB;IAChB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,qBAAqB,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,cAAc,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5G,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,+EAA+E;IAC/E,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IACxB,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,KACA,YAAY,EAkBkC,CAAC;AAElD;;GAEG;AACH,eAAO,MAAM,wBAAwB,GACnC,YAAY,qBAAqB,EAAE,EACnC,YAAY,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAClC,eAAe,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtC,YAAY,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAClC,WAAW,OAAO,EAClB,aAAa,OAAO,EACpB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,EACpD,UAAU;IACR,gBAAgB;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,gBAAgB;IAChB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,qBAAqB,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,cAAc,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5G,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,+EAA+E;IAC/E,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IACxB,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,KACA,YAAY,EAkBkC,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GACrC,YAAY,qBAAqB,EAAE,EACnC,YAAY,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAClC,eAAe,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtC,YAAY,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAClC,WAAW,OAAO,EAClB,aAAa,OAAO,EACpB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,EACpD,UAAU;IACR,gBAAgB;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,gBAAgB;IAChB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2EAA2E;IAC3E,6BAA6B,CAAC,EAAE,CAC9B,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,KACX,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,qBAAqB,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,cAAc,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5G,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,+EAA+E;IAC/E,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IACxB,OAAO,CAAC,EAAE,GAAG,CAAC;CACf,KACA,YAAY,EAkBkC,CAAC"}
1	+ {"version":3,"file":"AuthOptionFactory.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/auth/AuthOptionFactory.tsx"],"names":[],"mappings":"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"}

package/dist/components/presentation/auth/AuthOptionFactory.js CHANGED Viewed

@@ -20,7 +20,7 @@ import flowIconRegistry_default from "../../primitives/Icons/flowIconRegistry.js
 import { EmbeddedFlowComponentType, EmbeddedFlowEventType, FieldType, createPackageComponentLogger, resolveEmojiUrisInHtml, resolveFlowTemplateLiterals } from "@thunderid/browser";
 import { cloneElement } from "react";
 import { jsx } from "react/jsx-runtime";
-import { css } from "@emotion/css";
+import { css, cx } from "@emotion/css";
 import DOMPurify from "dompurify";
 //#region src/components/presentation/auth/AuthOptionFactory.tsx
@@ -141,8 +141,9 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			const error = touchedFields[identifier] || false ? formErrors[identifier] : void 0;
 			const fieldType = getFieldType(component.type);
 			return cloneElement(createField({
-				className: options.inputClassName,
+				className: cx(options.inputClassName, component.classes),
 				error,
+				id: component.id,
 				label: resolve(component.label) || "",
 				name: identifier,
 				onBlur: () => options.onInputBlur?.(identifier),
@@ -158,8 +159,9 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			const value = formValues[identifier] || "";
 			const error = touchedFields[identifier] || false ? formErrors[identifier] : void 0;
 			return cloneElement(createField({
-				className: options.inputClassName,
+				className: cx(options.inputClassName, component.classes),
 				error,
+				id: component.id,
 				label: resolve(component.label) || "",
 				name: identifier,
 				onBlur: () => options.onInputBlur?.(identifier),
@@ -201,33 +203,41 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 					options.onSubmit(component, formData, shouldSkipValidation);
 				}
 			};
+			const socialButtonClassName = cx(options.buttonClassName, component.classes);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "google", authType, componentVariant)) return /* @__PURE__ */ jsx(GoogleButton_default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "github", authType, componentVariant)) return /* @__PURE__ */ jsx(GitHubButton_default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "facebook", authType, componentVariant)) return /* @__PURE__ */ jsx(FacebookButton_default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft", authType, componentVariant)) return /* @__PURE__ */ jsx(MicrosoftButton_default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "linkedin", authType, componentVariant)) return /* @__PURE__ */ jsx(LinkedInButton_default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (matchesSocialProvider(actionId, eventType, buttonText, "ethereum", authType, componentVariant)) return /* @__PURE__ */ jsx(SignInWithEthereumButton_default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			if (actionId === "prompt_mobile" || eventType === "prompt_mobile") return /* @__PURE__ */ jsx(SmsOtpButton_default, {
+				id: component.id,
 				onClick: handleClick,
-				className: options.buttonClassName
+				className: socialButtonClassName
 			}, key);
 			const startIconEl = component.startIcon ? /* @__PURE__ */ jsx("img", {
 				src: component.startIcon,
@@ -251,9 +261,10 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			}) : null;
 			return /* @__PURE__ */ jsx(Button_default, {
 				fullWidth: true,
+				id: component.id,
 				onClick: handleClick,
 				disabled: isLoading || !isFormValid && !shouldSkipValidation || options.isTimeoutDisabled || component.config?.disabled,
-				className: options.buttonClassName,
+				className: cx(options.buttonClassName, component.classes),
 				"data-testid": "thunderid-signin-submit",
 				variant: component.variant?.toLowerCase() === "primary" ? "solid" : "outline",
 				color: component.variant?.toLowerCase() === "primary" ? "primary" : "secondary",
@@ -262,14 +273,19 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				children: buttonText || "Submit"
 			}, key);
 		}
-		case EmbeddedFlowComponentType.Text: return /* @__PURE__ */ jsx(Typography_default, {
-			variant: getTypographyVariant(component.variant),
-			style: {
-				marginBottom: 2,
-				textAlign: typeof component?.align === "string" ? component.align : "left"
-			},
-			children: resolve(component.label)
-		}, key);
+		case EmbeddedFlowComponentType.Text: {
+			const variant = getTypographyVariant(component.variant);
+			return /* @__PURE__ */ jsx(Typography_default, {
+				id: component.id,
+				className: component.classes,
+				variant,
+				style: {
+					marginBottom: 2,
+					textAlign: typeof component?.align === "string" ? component.align : "left"
+				},
+				children: resolve(component.label)
+			}, key);
+		}
 		case EmbeddedFlowComponentType.Divider: return /* @__PURE__ */ jsx(Divider_default, { children: resolve(component.label) || "" }, key);
 		case EmbeddedFlowComponentType.Select: {
 			const identifier = component.ref;
@@ -280,6 +296,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				value: typeof opt === "string" ? opt : String(opt.value ?? "")
 			}));
 			return /* @__PURE__ */ jsx(Select_default, {
+				id: component.id,
 				name: identifier,
 				label: resolve(component.label) || "",
 				placeholder: resolve(component.placeholder),
@@ -289,7 +306,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				error,
 				onChange: (e) => onInputChange(identifier, e.target.value),
 				onBlur: () => options.onInputBlur?.(identifier),
-				className: options.inputClassName
+				className: cx(options.inputClassName, component.classes)
 			}, key);
 		}
 		case EmbeddedFlowComponentType.DateInput: {
@@ -297,6 +314,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			const value = formValues[identifier] || "";
 			const error = touchedFields[identifier] || false ? formErrors[identifier] : void 0;
 			return /* @__PURE__ */ jsx(DatePicker_default, {
+				id: component.id,
 				name: identifier,
 				label: resolve(component.label) || "",
 				placeholder: resolve(component.placeholder),
@@ -306,7 +324,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				error,
 				onChange: (e) => onInputChange(identifier, e.target.value),
 				onBlur: () => options.onInputBlur?.(identifier),
-				className: options.inputClassName
+				className: cx(options.inputClassName, component.classes)
 			}, key);
 		}
 		case EmbeddedFlowComponentType.OuSelect:
@@ -325,6 +343,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				})).filter(Boolean);
 				return /* @__PURE__ */ jsx("form", {
 					id: component.id,
+					className: component.classes,
 					style: formStyles,
 					children: blockComponents
 				}, key);
@@ -404,20 +423,24 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			const gap = component.gap ?? 2;
 			const align = component.align || "center";
 			const justify = component.justify || "flex-start";
+			const stackStyle = {
+				alignItems: align,
+				display: "flex",
+				flexDirection: direction,
+				flexWrap: "wrap",
+				gap: `${gap * .5}rem`,
+				justifyContent: justify
+			};
+			const stackChildren = component.components ? component.components.map((childComponent, index) => createAuthComponentFromFlow(childComponent, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, authType, {
+				...options,
+				inStack: true,
+				key: childComponent.id || `${component.id}_${index}`
+			})) : [];
 			return /* @__PURE__ */ jsx("div", {
-				style: {
-					alignItems: align,
-					display: "flex",
-					flexDirection: direction,
-					flexWrap: "wrap",
-					gap: `${gap * .5}rem`,
-					justifyContent: justify
-				},
-				children: component.components ? component.components.map((childComponent, index) => createAuthComponentFromFlow(childComponent, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, authType, {
-					...options,
-					inStack: true,
-					key: childComponent.id || `${component.id}_${index}`
-				})) : []
+				id: component.id,
+				className: component.classes,
+				style: stackStyle,
+				children: stackChildren
 			}, key);
 		}
 		case EmbeddedFlowComponentType.Consent: {