npm - @thunderid/react - Versions diffs - 1.0.4 → 1.0.6 - Mend

@thunderid/react 1.0.4 → 1.0.6

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 (61) hide show

package/dist/cjs/components/adapters/Consent.cjs CHANGED Viewed

@@ -5,22 +5,16 @@ const require_Typography = require('../primitives/Typography/Typography.cjs');
 const require_Toggle = require('../primitives/Toggle/Toggle.cjs');
 const require_ConsentCheckboxList = require('./ConsentCheckboxList.cjs');
 const require_Tooltip = require('../primitives/Tooltip/Tooltip.cjs');
-let __thunderid_browser = require("@thunderid/browser");
-__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/components/adapters/Consent.tsx
-const defaultConfig = {
-	essential: "Essential Attributtes",
-	optional: "Optional Attributes"
-};
 /**
 * Consent component renders the list of purposes and their associated attributes (essential and optional)
 * based on the data provided by the backend. It allows users to toggle optional attributes while essential
 * attributes are displayed as read-only.
 */
-const Consent = ({ consentData, formValues, config: suppliedConfig = {}, onInputChange, children, meta, t }) => {
+const Consent = ({ consentData, formValues, onInputChange, children, t }) => {
 	const purposesContainerClass = require_emotion.css({
 		display: "flex",
 		flexDirection: "column",
@@ -47,22 +41,21 @@ const Consent = ({ consentData, formValues, config: suppliedConfig = {}, onInput
 		display: "flex",
 		gap: "4px"
 	});
-	/** Resolve any remaining {{t()}} or {{meta()}} template expressions in a string at render time. */
+	/** Resolve i18n keys */
 	const resolve = (text) => {
-		if (!text || !t && !meta) return text || "";
-		return (0, __thunderid_browser.resolveFlowTemplateLiterals)(text, {
-			meta,
-			t: t || ((k) => k)
-		});
-	};
-	const config = {
-		...defaultConfig,
-		...suppliedConfig
+		if (!text || !t) return text || "";
+		return t(text);
 	};
-	const essentialInfo = typeof config.essentialInfo === "string" ? resolve(config.essentialInfo.trim()) : "";
-	const optionalInfo = typeof config.optionalInfo === "string" ? resolve(config.optionalInfo.trim()) : "";
-	const essentialLabel = resolve(config["essential"]);
-	const optionalLabel = resolve(config["optional"]);
+	const essentialInfo = resolve(`consent.essential_claims.info`);
+	const optionalInfo = resolve(`consent.optional_claims.info`);
+	const permissionInfo = resolve(`consent.authorize_scope.info`);
+	/**
+	* Falls back to default config values if essential/optional
+	* keys cannot be resolved via translation files .
+	*/
+	const essentialLabel = resolve(`consent.essential_claims`) || "Essential Attributes";
+	const optionalLabel = resolve(`consent.optional_claims`) || "Optional Attributes";
+	const permissionLabel = resolve(`consent.authorize_scope`) || "Permissions";
 	/**
 	* Method to check whether master toggle button is checked or not
 	* @param purpose Purpose object
@@ -121,7 +114,8 @@ const Consent = ({ consentData, formValues, config: suppliedConfig = {}, onInput
 					variant: "ESSENTIAL",
 					purpose,
 					formValues,
-					onInputChange
+					onInputChange,
+					t
 				})]
 			}), purpose.optional && purpose.optional.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: sectionClass,
@@ -132,9 +126,9 @@ const Consent = ({ consentData, formValues, config: suppliedConfig = {}, onInput
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
 							variant: "subtitle2",
 							fontWeight: "bold",
-							children: purpose.type === "permissions" ? "Permissions" : optionalLabel
-						}), optionalInfo !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.default, {
-							helperText: optionalInfo,
+							children: purpose.type === "permissions" ? permissionLabel : optionalLabel
+						}), Boolean(purpose.type === "permissions" ? permissionInfo : optionalInfo) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.default, {
+							helperText: purpose.type === "permissions" ? permissionInfo : optionalInfo,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Info.default, {
 								width: "1rem",
 								height: "1rem"
@@ -150,7 +144,8 @@ const Consent = ({ consentData, formValues, config: suppliedConfig = {}, onInput
 					variant: "OPTIONAL",
 					purpose,
 					formValues,
-					onInputChange
+					onInputChange,
+					t
 				})]
 			})]
 		}, purpose.purposeId || purposeIndex))

package/dist/cjs/components/adapters/Consent.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Consent.cjs","names":["defaultConfig: Required<Pick<ConsentConfig, 'essential' \| 'optional'>>","Consent: FC<ConsentProps>","purposesContainerClass: string","css","purposeItemClass: string","sectionClass: string","sectionHeaderClass: string","optionalSectionHeaderClass: string","optionalSectionLabelClass: string","config: ConsentConfig","getConsentOptionalKey","purposes: ConsentPurposeData[]","parsed: ConsentPurposeData[] \| {purposes: ConsentPurposeData[]}","Typography","Tooltip","Info","ConsentCheckboxList","Toggle"],"sources":["../../../../src/components/adapters/Consent.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n type ConsentPurposeData,\n FlowMetadataResponse,\n PromptElement,\n resolveFlowTemplateLiterals,\n} from '@thunderid/browser';\nimport {type ChangeEvent, FC, ReactNode} from 'react';\nimport ConsentCheckboxList, {getConsentOptionalKey} from './ConsentCheckboxList';\nimport Typography from '../primitives/Typography/Typography';\nimport Toggle from '../primitives/Toggle/Toggle';\nimport {Info} from '../primitives/Icons';\nimport Tooltip from '../primitives/Tooltip/Tooltip';\nimport {UseTranslation} from '../../hooks/useTranslation';\nimport {css} from '../../styles/emotion';\n\n/*\n Backward-compatible consent purpose type exported by @thunderid/react.\n \n Some consumers import this name directly; keep it as an alias to the v2 model.\n /\nexport type ConsentPurpose = ConsentPurposeData;\n\n/\n Render props exposed by Consent when using the render-prop pattern.\n /\nexport interface ConsentRenderProps {\n /* Current form values - used to read optional checkbox state. /\n formValues: Record<string, string>;\n /* Callback invoked when a user toggles an optional attribute. /\n onInputChange: (name: string, value: string) => void;\n /* The resolved list of consent purposes parsed from `consentData`. /\n purposes: ConsentPurposeData[];\n}\n\n/\n Interface for consent configuration\n /\nexport interface ConsentConfig {\n essential?: string;\n optional?: string;\n essentialInfo?: string;\n optionalInfo?: string;\n}\n\n/\n Props for the Consent component.\n /\nexport interface ConsentProps {\n /\n Render-props callback. When provided, the default consent UI is replaced with\n * whatever JSX the callback returns. The parsed `purposes` list is injected so\n * consumers do not need to re-parse `consentData` themselves.\n \n @example\n * ```tsx\n * <Consent consentData={raw} formValues={formInputs} onInputChange={onChange} t={t}>\n * {({ purposes, formValues, onInputChange, t }) => (\n * <div>\n * {purposes.map(p => <MyConsentSection key={p.purposeId} purpose={p} />)}\n * </div>\n * )}\n * </Consent>\n * ```\n /\n children?: (props: ConsentRenderProps) => ReactNode;\n /\n The raw JSON string returned by the backend in `additionalData.consentPrompt`.\n /\n consentData?: string \| ConsentPurposeData[] \| {purposes: ConsentPurposeData[]};\n /\n Current form values - used to read optional checkbox state.\n /\n formValues: Record<string, string>;\n /\n Callback invoked when a user toggles an optional attribute.\n /\n onInputChange: (name: string, value: string) => void;\n /\n Config to modified detail in consent page\n /\n config?: Record<string, unknown>;\n\n /\n Config of meta response\n /\n meta?: FlowMetadataResponse \| null;\n\n /\n translation data\n /\n t?: UseTranslation['t'];\n}\n\nconst defaultConfig: Required<Pick<ConsentConfig, 'essential' \| 'optional'>> = {\n essential: 'Essential Attributtes',\n optional: 'Optional Attributes',\n};\n\n/\n Consent component renders the list of purposes and their associated attributes (essential and optional)\n * based on the data provided by the backend. It allows users to toggle optional attributes while essential\n * attributes are displayed as read-only.\n /\nconst Consent: FC<ConsentProps> = ({\n consentData,\n formValues,\n config: suppliedConfig = {},\n onInputChange,\n children,\n meta,\n t,\n}: ConsentProps) => {\n // Computed per render (not at module scope): a CSP nonce configured on <ThunderIDProvider>\n // isn't known until the provider renders, and Emotion needs it applied before any style\n // insertion happens. These are static, so Emotion's own cache dedupes the repeat calls to a\n // no-op after the first render — this isn't a real per-render cost.\n const purposesContainerClass: string = css({\n display: 'flex',\n flexDirection: 'column',\n gap: '1rem',\n marginTop: '0.25rem',\n });\n const purposeItemClass: string = css({paddingBottom: '1rem'});\n const sectionClass: string = css({marginTop: '0.5rem'});\n const sectionHeaderClass: string = css({alignItems: 'center', display: 'flex', gap: '4px', marginBottom: '10px'});\n const optionalSectionHeaderClass: string = css({\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'space-between',\n marginBottom: '10px',\n paddingRight: '4px',\n });\n const optionalSectionLabelClass: string = css({alignItems: 'center', display: 'flex', gap: '4px'});\n\n /* Resolve any remaining {{t()}} or {{meta()}} template expressions in a string at render time. /\n const resolve = (text: string \| undefined): string => {\n if (!text \|\| (!t && !meta)) {\n return text \|\| '';\n }\n return resolveFlowTemplateLiterals(text, {meta, t: t \|\| ((k: string): string => k)});\n };\n\n const config: ConsentConfig = {...defaultConfig, ...suppliedConfig};\n const essentialInfo = typeof config.essentialInfo === 'string' ? resolve(config.essentialInfo.trim()) : '';\n const optionalInfo = typeof config.optionalInfo === 'string' ? resolve(config.optionalInfo.trim()) : '';\n const essentialLabel = resolve(config['essential']);\n const optionalLabel = resolve(config['optional']);\n\n /\n Method to check whether master toggle button is checked or not\n * @param purpose Purpose object\n * @param checked boolean variable to check, whether toggle is checked or unchecked\n /\n const handleChange = (purpose: ConsentPurposeData, checked: boolean): void => {\n const checkValue = checked ? 'true' : 'false';\n purpose.optional.map((opt: PromptElement) => {\n const key: string = getConsentOptionalKey(purpose.purposeId, opt.name);\n onInputChange(key, checkValue);\n });\n };\n\n /\n Check all optional claims are selected or not\n * @param purpose Purpose object\n * @returns boolean value to denote all optional claims are selected\n /\n const checkOptValue = (purpose: ConsentPurposeData): boolean => {\n return purpose.optional.every((opt: PromptElement) => {\n const key: string = getConsentOptionalKey(purpose.purposeId, opt.name);\n return formValues[key] === 'true';\n });\n };\n\n if (!consentData) return null;\n\n let purposes: ConsentPurposeData[] = [];\n\n try {\n const parsed: ConsentPurposeData[] \| {purposes: ConsentPurposeData[]} =\n typeof consentData === 'string' ? JSON.parse(consentData) : consentData;\n\n purposes = Array.isArray(parsed) ? parsed : parsed.purposes \|\| [];\n } catch (e) {\n // Failed to parse consent prompt data\n return null;\n }\n\n if (purposes.length === 0) return null;\n\n if (children) {\n return <>{children({formValues, onInputChange, purposes: purposes})}</>;\n }\n\n return (\n <div className={purposesContainerClass}>\n {purposes.map((purpose: ConsentPurposeData, purposeIndex: number) => (\n <div key={purpose.purposeId \|\| purposeIndex} className={purposeItemClass}>\n {/ TODO: Uncomment when the backend supports multiple purposes for a application /}\n {/ <Typography variant=\"h6\" fontWeight={600} gutterBottom color=\"inherit\">\n {purpose.purposeName}\n </Typography>\n <Typography variant=\"body2\" color=\"inherit\" style={{marginBottom: '1rem', opacity: 0.85}}>\n {purpose.description}\n </Typography> */}\n\n {purpose.essential && purpose.essential.length > 0 && (\n <div className={sectionClass}>\n <div className={sectionHeaderClass}>\n <Typography variant=\"subtitle2\" fontWeight=\"bold\">\n {essentialLabel}\n </Typography>\n {essentialInfo !== '' && (\n <Tooltip helperText={essentialInfo}>\n <Info width=\"1rem\" height=\"1rem\" />\n </Tooltip>\n )}\n </div>\n <ConsentCheckboxList\n variant=\"ESSENTIAL\"\n purpose={purpose}\n formValues={formValues}\n onInputChange={onInputChange}\n />\n </div>\n )}\n\n {purpose.optional && purpose.optional.length > 0 && (\n <div className={sectionClass}>\n <div className={optionalSectionHeaderClass}>\n <div className={optionalSectionLabelClass}>\n <Typography variant=\"subtitle2\" fontWeight=\"bold\">\n {purpose.type === 'permissions' ? 'Permissions' : optionalLabel}\n </Typography>\n {optionalInfo !== '' && (\n <Tooltip helperText={optionalInfo}>\n <Info width=\"1rem\" height=\"1rem\" />\n </Tooltip>\n )}\n </div>\n <Toggle\n id={`consent_opt_${purpose.purposeId}_all`}\n checked={checkOptValue(purpose)}\n aria-label=\"Toggle all optional attributes\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => handleChange(purpose, e.target.checked)}\n />\n </div>\n <ConsentCheckboxList\n variant=\"OPTIONAL\"\n purpose={purpose}\n formValues={formValues}\n onInputChange={onInputChange}\n />\n </div>\n )}\n </div>\n ))}\n </div>\n );\n};\n\nexport default Consent;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Consent.cjs","names":["Consent: FC<ConsentProps>","purposesContainerClass: string","css","purposeItemClass: string","sectionClass: string","sectionHeaderClass: string","optionalSectionHeaderClass: string","optionalSectionLabelClass: string","getConsentOptionalKey","purposes: ConsentPurposeData[]","parsed: ConsentPurposeData[] \| {purposes: ConsentPurposeData[]}","Typography","Tooltip","Info","ConsentCheckboxList","Toggle"],"sources":["../../../../src/components/adapters/Consent.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {type ConsentPurposeData, PromptElement} from '@thunderid/browser';\nimport {type ChangeEvent, FC, ReactNode} from 'react';\nimport ConsentCheckboxList, {getConsentOptionalKey} from './ConsentCheckboxList';\nimport Typography from '../primitives/Typography/Typography';\nimport Toggle from '../primitives/Toggle/Toggle';\nimport {Info} from '../primitives/Icons';\nimport Tooltip from '../primitives/Tooltip/Tooltip';\nimport {UseTranslation} from '../../hooks/useTranslation';\nimport {css} from '../../styles/emotion';\n\n/*\n Backward-compatible consent purpose type exported by @thunderid/react.\n \n Some consumers import this name directly; keep it as an alias to the v2 model.\n /\nexport type ConsentPurpose = ConsentPurposeData;\n\n/\n Render props exposed by Consent when using the render-prop pattern.\n /\nexport interface ConsentRenderProps {\n /* Current form values - used to read optional checkbox state. /\n formValues: Record<string, string>;\n /* Callback invoked when a user toggles an optional attribute. /\n onInputChange: (name: string, value: string) => void;\n /* The resolved list of consent purposes parsed from `consentData`. /\n purposes: ConsentPurposeData[];\n}\n\n/\n Props for the Consent component.\n /\nexport interface ConsentProps {\n /\n Render-props callback. When provided, the default consent UI is replaced with\n * whatever JSX the callback returns. The parsed `purposes` list is injected so\n * consumers do not need to re-parse `consentData` themselves.\n \n @example\n * ```tsx\n * <Consent consentData={raw} formValues={formInputs} onInputChange={onChange} t={t}>\n * {({ purposes, formValues, onInputChange, t }) => (\n * <div>\n * {purposes.map(p => <MyConsentSection key={p.purposeId} purpose={p} />)}\n * </div>\n * )}\n * </Consent>\n * ```\n /\n children?: (props: ConsentRenderProps) => ReactNode;\n /\n The raw JSON string returned by the backend in `additionalData.consentPrompt`.\n /\n consentData?: string \| ConsentPurposeData[] \| {purposes: ConsentPurposeData[]};\n /\n Current form values - used to read optional checkbox state.\n /\n formValues: Record<string, string>;\n /\n Callback invoked when a user toggles an optional attribute.\n /\n onInputChange: (name: string, value: string) => void;\n\n /\n translation data\n /\n t?: UseTranslation['t'];\n}\n\n/\n Consent component renders the list of purposes and their associated attributes (essential and optional)\n * based on the data provided by the backend. It allows users to toggle optional attributes while essential\n * attributes are displayed as read-only.\n /\nconst Consent: FC<ConsentProps> = ({consentData, formValues, onInputChange, children, t}: ConsentProps) => {\n // Computed per render (not at module scope): a CSP nonce configured on <ThunderIDProvider>\n // isn't known until the provider renders, and Emotion needs it applied before any style\n // insertion happens. These are static, so Emotion's own cache dedupes the repeat calls to a\n // no-op after the first render — this isn't a real per-render cost.\n const purposesContainerClass: string = css({\n display: 'flex',\n flexDirection: 'column',\n gap: '1rem',\n marginTop: '0.25rem',\n });\n const purposeItemClass: string = css({paddingBottom: '1rem'});\n const sectionClass: string = css({marginTop: '0.5rem'});\n const sectionHeaderClass: string = css({alignItems: 'center', display: 'flex', gap: '4px', marginBottom: '10px'});\n const optionalSectionHeaderClass: string = css({\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'space-between',\n marginBottom: '10px',\n paddingRight: '4px',\n });\n const optionalSectionLabelClass: string = css({alignItems: 'center', display: 'flex', gap: '4px'});\n\n /* Resolve i18n keys /\n const resolve = (text: string \| undefined): string => {\n if (!text \|\| !t) {\n return text \|\| '';\n }\n return t(text);\n };\n\n const essentialInfo = resolve(`consent.essential_claims.info`);\n const optionalInfo = resolve(`consent.optional_claims.info`);\n const permissionInfo = resolve(`consent.authorize_scope.info`);\n /\n Falls back to default config values if essential/optional\n * keys cannot be resolved via translation files .\n /\n const essentialLabel = resolve(`consent.essential_claims`) \|\| 'Essential Attributes';\n const optionalLabel = resolve(`consent.optional_claims`) \|\| 'Optional Attributes';\n const permissionLabel = resolve(`consent.authorize_scope`) \|\| 'Permissions';\n\n /\n Method to check whether master toggle button is checked or not\n * @param purpose Purpose object\n * @param checked boolean variable to check, whether toggle is checked or unchecked\n /\n const handleChange = (purpose: ConsentPurposeData, checked: boolean): void => {\n const checkValue = checked ? 'true' : 'false';\n purpose.optional.map((opt: PromptElement) => {\n const key: string = getConsentOptionalKey(purpose.purposeId, opt.name);\n onInputChange(key, checkValue);\n });\n };\n\n /\n Check all optional claims are selected or not\n * @param purpose Purpose object\n * @returns boolean value to denote all optional claims are selected\n /\n const checkOptValue = (purpose: ConsentPurposeData): boolean => {\n return purpose.optional.every((opt: PromptElement) => {\n const key: string = getConsentOptionalKey(purpose.purposeId, opt.name);\n return formValues[key] === 'true';\n });\n };\n\n if (!consentData) return null;\n\n let purposes: ConsentPurposeData[] = [];\n\n try {\n const parsed: ConsentPurposeData[] \| {purposes: ConsentPurposeData[]} =\n typeof consentData === 'string' ? JSON.parse(consentData) : consentData;\n\n purposes = Array.isArray(parsed) ? parsed : parsed.purposes \|\| [];\n } catch (e) {\n // Failed to parse consent prompt data\n return null;\n }\n\n if (purposes.length === 0) return null;\n\n if (children) {\n return <>{children({formValues, onInputChange, purposes: purposes})}</>;\n }\n\n return (\n <div className={purposesContainerClass}>\n {purposes.map((purpose: ConsentPurposeData, purposeIndex: number) => (\n <div key={purpose.purposeId \|\| purposeIndex} className={purposeItemClass}>\n {/ TODO: Uncomment when the backend supports multiple purposes for a application /}\n {/ <Typography variant=\"h6\" fontWeight={600} gutterBottom color=\"inherit\">\n {purpose.purposeName}\n </Typography>\n <Typography variant=\"body2\" color=\"inherit\" style={{marginBottom: '1rem', opacity: 0.85}}>\n {purpose.description}\n </Typography> /}\n\n {purpose.essential && purpose.essential.length > 0 && (\n <div className={sectionClass}>\n <div className={sectionHeaderClass}>\n <Typography variant=\"subtitle2\" fontWeight=\"bold\">\n {essentialLabel}\n </Typography>\n {essentialInfo !== '' && (\n <Tooltip helperText={essentialInfo}>\n <Info width=\"1rem\" height=\"1rem\" />\n </Tooltip>\n )}\n </div>\n <ConsentCheckboxList\n variant=\"ESSENTIAL\"\n purpose={purpose}\n formValues={formValues}\n onInputChange={onInputChange}\n t={t}\n />\n </div>\n )}\n\n {purpose.optional && purpose.optional.length > 0 && (\n <div className={sectionClass}>\n <div className={optionalSectionHeaderClass}>\n <div className={optionalSectionLabelClass}>\n <Typography variant=\"subtitle2\" fontWeight=\"bold\">\n {purpose.type === 'permissions' ? permissionLabel : optionalLabel}\n </Typography>\n {/ Show tooltip for optional claims/permissions according to their type */}\n {Boolean(purpose.type === 'permissions' ? permissionInfo : optionalInfo) && (\n <Tooltip helperText={purpose.type === 'permissions' ? permissionInfo : optionalInfo}>\n <Info width=\"1rem\" height=\"1rem\" />\n </Tooltip>\n )}\n </div>\n <Toggle\n id={`consent_opt_${purpose.purposeId}_all`}\n checked={checkOptValue(purpose)}\n aria-label=\"Toggle all optional attributes\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => handleChange(purpose, e.target.checked)}\n />\n </div>\n <ConsentCheckboxList\n variant=\"OPTIONAL\"\n purpose={purpose}\n formValues={formValues}\n onInputChange={onInputChange}\n t={t}\n />\n </div>\n )}\n </div>\n ))}\n </div>\n );\n};\n\nexport default Consent;\n"],"mappings":";;;;;;;;;;;;;;;;AA6EA,MAAMA,WAA6B,EAAC,aAAa,YAAY,eAAe,UAAU,QAAqB;CAKzG,MAAMC,yBAAiCC,oBAAI;EACzC,SAAS;EACT,eAAe;EACf,KAAK;EACL,WAAW;EACZ,CAAC;CACF,MAAMC,mBAA2BD,oBAAI,EAAC,eAAe,QAAO,CAAC;CAC7D,MAAME,eAAuBF,oBAAI,EAAC,WAAW,UAAS,CAAC;CACvD,MAAMG,qBAA6BH,oBAAI;EAAC,YAAY;EAAU,SAAS;EAAQ,KAAK;EAAO,cAAc;EAAO,CAAC;CACjH,MAAMI,6BAAqCJ,oBAAI;EAC7C,YAAY;EACZ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,cAAc;EACf,CAAC;CACF,MAAMK,4BAAoCL,oBAAI;EAAC,YAAY;EAAU,SAAS;EAAQ,KAAK;EAAM,CAAC;;CAGlG,MAAM,WAAW,SAAqC;AACpD,MAAI,CAAC,QAAQ,CAAC,EACZ,QAAO,QAAQ;AAEjB,SAAO,EAAE,KAAK;;CAGhB,MAAM,gBAAgB,QAAQ,gCAAgC;CAC9D,MAAM,eAAe,QAAQ,+BAA+B;CAC5D,MAAM,iBAAiB,QAAQ,+BAA+B;;;;;CAK9D,MAAM,iBAAiB,QAAQ,2BAA2B,IAAI;CAC9D,MAAM,gBAAgB,QAAQ,0BAA0B,IAAI;CAC5D,MAAM,kBAAkB,QAAQ,0BAA0B,IAAI;;;;;;CAO9D,MAAM,gBAAgB,SAA6B,YAA2B;EAC5E,MAAM,aAAa,UAAU,SAAS;AACtC,UAAQ,SAAS,KAAK,QAAuB;AAE3C,iBADoBM,kDAAsB,QAAQ,WAAW,IAAI,KAAK,EACnD,WAAW;IAC9B;;;;;;;CAQJ,MAAM,iBAAiB,YAAyC;AAC9D,SAAO,QAAQ,SAAS,OAAO,QAAuB;AAEpD,UAAO,WADaA,kDAAsB,QAAQ,WAAW,IAAI,KAAK,MAC3C;IAC3B;;AAGJ,KAAI,CAAC,YAAa,QAAO;CAEzB,IAAIC,WAAiC,EAAE;AAEvC,KAAI;EACF,MAAMC,SACJ,OAAO,gBAAgB,WAAW,KAAK,MAAM,YAAY,GAAG;AAE9D,aAAW,MAAM,QAAQ,OAAO,GAAG,SAAS,OAAO,YAAY,EAAE;UAC1D,GAAG;AAEV,SAAO;;AAGT,KAAI,SAAS,WAAW,EAAG,QAAO;AAElC,KAAI,SACF,QAAO,mFAAG,SAAS;EAAC;EAAY;EAAyB;EAAS,CAAC,GAAI;AAGzE,QACE,2CAAC;EAAI,WAAW;YACb,SAAS,KAAK,SAA6B,iBAC1C,4CAAC;GAA4C,WAAW;cASrD,QAAQ,aAAa,QAAQ,UAAU,SAAS,KAC/C,4CAAC;IAAI,WAAW;eACd,4CAAC;KAAI,WAAW;gBACd,2CAACC;MAAW,SAAQ;MAAY,YAAW;gBACxC;OACU,EACZ,kBAAkB,MACjB,2CAACC;MAAQ,YAAY;gBACnB,2CAACC;OAAK,OAAM;OAAO,QAAO;QAAS;OAC3B;MAER,EACN,2CAACC;KACC,SAAQ;KACC;KACG;KACG;KACZ;MACH;KACE,EAGP,QAAQ,YAAY,QAAQ,SAAS,SAAS,KAC7C,4CAAC;IAAI,WAAW;eACd,4CAAC;KAAI,WAAW;gBACd,4CAAC;MAAI,WAAW;iBACd,2CAACH;OAAW,SAAQ;OAAY,YAAW;iBACxC,QAAQ,SAAS,gBAAgB,kBAAkB;QACzC,EAEZ,QAAQ,QAAQ,SAAS,gBAAgB,iBAAiB,aAAa,IACtE,2CAACC;OAAQ,YAAY,QAAQ,SAAS,gBAAgB,iBAAiB;iBACrE,2CAACC;QAAK,OAAM;QAAO,QAAO;SAAS;QAC3B;OAER,EACN,2CAACE;MACC,IAAI,eAAe,QAAQ,UAAU;MACrC,SAAS,cAAc,QAAQ;MAC/B,cAAW;MACX,WAAW,MAA2C,aAAa,SAAS,EAAE,OAAO,QAAQ;OAC7F;MACE,EACN,2CAACD;KACC,SAAQ;KACC;KACG;KACG;KACZ;MACH;KACE;KA3DA,QAAQ,aAAa,aA6DzB,CACN;GACE;;AAIV,sBAAe"}

package/dist/cjs/components/adapters/ConsentCheckboxList.cjs CHANGED Viewed

@@ -25,9 +25,15 @@ const getConsentOptionalKey = (purposeId, attrName) => `__consent_opt__${purpose
 * - OPTIONAL variant: renders toggleable checkboxes for optional attributes.
 *   Opt-in is the default when no prior form value exists.
 */
-const ConsentCheckboxList = ({ variant, purpose, formValues, onInputChange, children }) => {
+const ConsentCheckboxList = ({ variant, purpose, formValues, onInputChange, children, t }) => {
 	const { theme, colorScheme } = require_useTheme.default();
 	const styles = require_ConsentCheckboxList_styles.default(theme, colorScheme);
+	const resolve = (text) => {
+		if (!text || !t) return text || "";
+		const key = `consent.${text}`;
+		const translated = t(key);
+		return translated === key ? text : translated;
+	};
 	const attributes = (variant === "ESSENTIAL" ? purpose.essential : purpose.optional).map((e) => e.name);
 	if (!attributes || attributes.length === 0) return null;
 	const isEssential = variant === "ESSENTIAL";
@@ -58,11 +64,11 @@ const ConsentCheckboxList = ({ variant, purpose, formValues, onInputChange, chil
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "bullet")), styles["bullet"]) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
 							variant: "body2",
 							className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "typography")), styles["typography"]),
-							children: attr
+							children: resolve(attr)
 						})]
 					}), isEssential ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
 						variant: "body2",
-						children: "Required"
+						children: resolve("required") || "Required"
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Toggle.default, {
 						id: inputId,
 						checked,

package/dist/cjs/components/adapters/ConsentCheckboxList.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConsentCheckboxList.cjs","names":["ConsentCheckboxList: FC<ConsentCheckboxListProps>","useTheme","styles: Record<string, string>","useStyles","attributes: string[]","isEssential: boolean","cx","checked: boolean","Typography","Toggle"],"sources":["../../../../src/components/adapters/ConsentCheckboxList.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {type ConsentPurposeData, withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {type ChangeEvent, FC, ReactNode} from 'react';\nimport useStyles from './ConsentCheckboxList.styles';\nimport useTheme from '../../contexts/Theme/useTheme';\nimport {cx} from '../../styles/emotion';\nimport Toggle from '../primitives/Toggle/Toggle';\nimport Typography from '../primitives/Typography/Typography';\n\n/*\n Computes the form value key for tracking an optional attribute's consent state.\n \n @param purposeId - The ID of the consent purpose.\n * @param attrName - The name of the attribute.\n * @returns A stable form key string.\n /\nexport const getConsentOptionalKey = (purposeId: string, attrName: string): string =>\n `__consent_opt__${purposeId}__${attrName}`;\n\n/\n ConsentInputVariant defines whether the ConsentCheckboxList is rendering essential (read-only) or\n * optional (toggleable) attributes.\n /\nexport type ConsentInputVariant = 'ESSENTIAL' \| 'OPTIONAL';\n\n/\n Render props exposed by ConsentCheckboxList when using the render-prop pattern.\n /\nexport interface ConsentCheckboxListRenderProps {\n /* The list of attribute names to render. /\n attributes: string[];\n /\n Call this when an optional attribute checkbox is toggled.\n * No-op for ESSENTIAL attributes (they cannot be changed).\n /\n handleChange: (attrName: string, checked: boolean) => void;\n /\n Returns the current checked state for the given attribute name.\n * Always returns true for ESSENTIAL attributes.\n /\n isChecked: (attrName: string) => boolean;\n /* Whether the list is rendering essential or optional attributes. /\n variant: ConsentInputVariant;\n}\n\n/\n Props for the ConsentCheckboxList component.\n /\nexport interface ConsentCheckboxListProps {\n /\n Render-props callback. When provided, the default checkbox list UI is replaced\n * with whatever JSX the callback returns.\n \n @example\n * ```tsx\n * <ConsentCheckboxList variant=\"OPTIONAL\" purpose={purpose} formValues={formValues} onInputChange={onChange}>\n * {({ attributes, isChecked, handleChange }) => (\n * <ul>\n * {attributes.map(attr => (\n * <li key={attr}>\n * <Checkbox checked={isChecked(attr)} onChange={e => handleChange(attr, e.target.checked)} />\n * {attr}\n * </li>\n * ))}\n * </ul>\n * )}\n * </ConsentCheckboxList>\n * ```\n /\n children?: (props: ConsentCheckboxListRenderProps) => ReactNode;\n /* Current form values - used to read optional checkbox state /\n formValues: Record<string, string>;\n /* Callback invoked when an optional attribute checkbox is toggled /\n onInputChange: (name: string, value: string) => void;\n /* The consent purpose data containing attribute lists /\n purpose: ConsentPurposeData;\n /* Whether to render essential (disabled) or optional (toggleable) attributes /\n variant: ConsentInputVariant;\n}\n\n/\n Renders a list of consent attribute checkboxes.\n \n - ESSENTIAL variant: renders read-only checked checkboxes for required attributes.\n * - OPTIONAL variant: renders toggleable checkboxes for optional attributes.\n * Opt-in is the default when no prior form value exists.\n */\nconst ConsentCheckboxList: FC<ConsentCheckboxListProps> = ({\n variant,\n purpose,\n formValues,\n onInputChange,\n children,\n}: ConsentCheckboxListProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n\n const attributes: string[] = (variant === 'ESSENTIAL' ? purpose.essential : purpose.optional).map(\n (e): string => e.name,\n );\n\n if (!attributes \|\| attributes.length === 0) {\n return null;\n }\n\n const isEssential: boolean = variant === 'ESSENTIAL';\n\n const isChecked = (attrName: string): boolean => {\n if (isEssential) {\n return true;\n }\n const key: string = getConsentOptionalKey(purpose.purposeId, attrName);\n // Default to be false when there's no explicit form value\n return formValues[key] === 'true';\n };\n\n const handleChange = (attrName: string, checked: boolean): void => {\n const key: string = getConsentOptionalKey(purpose.purposeId, attrName);\n onInputChange(key, checked ? 'true' : 'false');\n };\n\n if (children) {\n return <>{children({attributes, handleChange, isChecked, variant})}</>;\n }\n\n return (\n <div className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list')), styles['listContainer'])}>\n {attributes.map((attr: string) => {\n const inputId = `consent_${isEssential ? 'ess' : 'opt'}_${purpose.purposeId}_${attr}`;\n const checked: boolean = isChecked(attr);\n\n return (\n <div\n key={attr}\n className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'item')), styles['listItem'])}\n >\n <div className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'row')), styles['listRow'])}>\n <div\n className={cx(\n withVendorCSSClassPrefix(bem('consent-checkbox-list', 'label-container')),\n styles['labelContainer'],\n )}\n >\n <div\n className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'bullet')), styles['bullet'])}\n />\n <Typography\n variant=\"body2\"\n className={cx(\n withVendorCSSClassPrefix(bem('consent-checkbox-list', 'typography')),\n styles['typography'],\n )}\n >\n {attr}\n </Typography>\n </div>\n {isEssential ? (\n <Typography variant=\"body2\">Required</Typography>\n ) : (\n <Toggle\n id={inputId}\n checked={checked}\n disabled={isEssential}\n onChange={\n isEssential\n ? undefined\n : (e: ChangeEvent<HTMLInputElement>): void => handleChange(attr, e.target.checked)\n }\n />\n )}\n </div>\n </div>\n );\n })}\n </div>\n );\n};\n\nexport default ConsentCheckboxList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;~~AAkBA~~,MAAa,yBAAyB,WAAmB,aACvD,kBAAkB,UAAU,IAAI;;;;;;;;~~AAsElC~~,MAAMA,uBAAqD,EACzD,SACA,SACA,YACA,eACA,~~eAC8B~~;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,2CAAU,OAAO,YAAY;CAEpE,MAAMC,cAAwB,YAAY,cAAc,QAAQ,YAAY,QAAQ,UAAU,KAC3F,MAAc,EAAE,KAClB;AAED,KAAI,CAAC,cAAc,WAAW,WAAW,EACvC,QAAO;CAGT,MAAMC,cAAuB,YAAY;CAEzC,MAAM,aAAa,aAA8B;AAC/C,MAAI,YACF,QAAO;AAIT,SAAO,WAFa,sBAAsB,QAAQ,WAAW,SAAS,MAE3C;;CAG7B,MAAM,gBAAgB,UAAkB,YAA2B;AAEjE,gBADoB,sBAAsB,QAAQ,WAAW,SAAS,EACnD,UAAU,SAAS,QAAQ;;AAGhD,KAAI,SACF,QAAO,mFAAG,SAAS;EAAC;EAAY;EAAc;EAAW;EAAQ,CAAC,GAAI;AAGxE,QACE,2CAAC;EAAI,WAAWC,kGAAgC,wBAAwB,CAAC,EAAE,OAAO,iBAAiB;YAChG,WAAW,KAAK,SAAiB;GAChC,MAAM,UAAU,WAAW,cAAc,QAAQ,MAAM,GAAG,QAAQ,UAAU,GAAG;GAC/E,MAAMC,UAAmB,UAAU,KAAK;AAExC,UACE,2CAAC;IAEC,WAAWD,kGAAgC,yBAAyB,OAAO,CAAC,EAAE,OAAO,YAAY;cAEjG,4CAAC;KAAI,WAAWA,kGAAgC,yBAAyB,MAAM,CAAC,EAAE,OAAO,WAAW;gBAClG,4CAAC;MACC,WAAWA,kGACoB,yBAAyB,kBAAkB,CAAC,EACzE,OAAO,kBACR;iBAED,2CAAC,SACC,WAAWA,kGAAgC,yBAAyB,SAAS,CAAC,EAAE,OAAO,UAAU,GACjG,EACF,2CAACE;OACC,SAAQ;OACR,WAAWF,kGACoB,yBAAyB,aAAa,CAAC,EACpE,OAAO,cACR;iBAEA;~~QACU~~;OACT,EACL,cACC,2CAACE;MAAW,SAAQ;~~gBAAQ~~;~~OAAqB~~,~~GAEjD~~,2CAACC;MACC,IAAI;MACK;MACT,UAAU;MACV,UACE,cACI,UACC,MAA2C,aAAa,MAAM,EAAE,OAAO,QAAQ;OAEtF;MAEA;MArCD,KAsCD;IAER;GACE;;AAIV,kCAAe"}
1	+ {"version":3,"file":"ConsentCheckboxList.cjs","names":["ConsentCheckboxList: FC<ConsentCheckboxListProps>","useTheme","styles: Record<string, string>","useStyles","key: string","translated: string","attributes: string[]","isEssential: boolean","cx","checked: boolean","Typography","Toggle"],"sources":["../../../../src/components/adapters/ConsentCheckboxList.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {type ConsentPurposeData, withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {type ChangeEvent, FC, ReactNode} from 'react';\nimport useStyles from './ConsentCheckboxList.styles';\nimport useTheme from '../../contexts/Theme/useTheme';\nimport {cx} from '../../styles/emotion';\nimport Toggle from '../primitives/Toggle/Toggle';\nimport Typography from '../primitives/Typography/Typography';\nimport {UseTranslation} from '../../hooks/useTranslation';\n\n/*\n Computes the form value key for tracking an optional attribute's consent state.\n \n @param purposeId - The ID of the consent purpose.\n * @param attrName - The name of the attribute.\n * @returns A stable form key string.\n /\nexport const getConsentOptionalKey = (purposeId: string, attrName: string): string =>\n `__consent_opt__${purposeId}__${attrName}`;\n\n/\n ConsentInputVariant defines whether the ConsentCheckboxList is rendering essential (read-only) or\n * optional (toggleable) attributes.\n /\nexport type ConsentInputVariant = 'ESSENTIAL' \| 'OPTIONAL';\n\n/\n Render props exposed by ConsentCheckboxList when using the render-prop pattern.\n /\nexport interface ConsentCheckboxListRenderProps {\n /* The list of attribute names to render. /\n attributes: string[];\n /\n Call this when an optional attribute checkbox is toggled.\n * No-op for ESSENTIAL attributes (they cannot be changed).\n /\n handleChange: (attrName: string, checked: boolean) => void;\n /\n Returns the current checked state for the given attribute name.\n * Always returns true for ESSENTIAL attributes.\n /\n isChecked: (attrName: string) => boolean;\n /* Whether the list is rendering essential or optional attributes. /\n variant: ConsentInputVariant;\n}\n\n/\n Props for the ConsentCheckboxList component.\n /\nexport interface ConsentCheckboxListProps {\n /\n Render-props callback. When provided, the default checkbox list UI is replaced\n * with whatever JSX the callback returns.\n \n @example\n * ```tsx\n * <ConsentCheckboxList variant=\"OPTIONAL\" purpose={purpose} formValues={formValues} onInputChange={onChange}>\n * {({ attributes, isChecked, handleChange }) => (\n * <ul>\n * {attributes.map(attr => (\n * <li key={attr}>\n * <Checkbox checked={isChecked(attr)} onChange={e => handleChange(attr, e.target.checked)} />\n * {attr}\n * </li>\n * ))}\n * </ul>\n * )}\n * </ConsentCheckboxList>\n * ```\n /\n children?: (props: ConsentCheckboxListRenderProps) => ReactNode;\n /* Current form values - used to read optional checkbox state /\n formValues: Record<string, string>;\n /* Callback invoked when an optional attribute checkbox is toggled /\n onInputChange: (name: string, value: string) => void;\n /* The consent purpose data containing attribute lists /\n purpose: ConsentPurposeData;\n /* Whether to render essential (disabled) or optional (toggleable) attributes /\n variant: ConsentInputVariant;\n /\n translation data\n /\n t?: UseTranslation['t'];\n}\n\n/\n Renders a list of consent attribute checkboxes.\n \n - ESSENTIAL variant: renders read-only checked checkboxes for required attributes.\n * - OPTIONAL variant: renders toggleable checkboxes for optional attributes.\n * Opt-in is the default when no prior form value exists.\n */\nconst ConsentCheckboxList: FC<ConsentCheckboxListProps> = ({\n variant,\n purpose,\n formValues,\n onInputChange,\n children,\n t,\n}: ConsentCheckboxListProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n\n const resolve = (text: string \| undefined): string => {\n if (!text \|\| !t) {\n return text \|\| '';\n }\n\n const key: string = `consent.${text}`;\n const translated: string = t(key);\n return translated === key ? text : translated;\n };\n\n const attributes: string[] = (variant === 'ESSENTIAL' ? purpose.essential : purpose.optional).map(\n (e): string => e.name,\n );\n\n if (!attributes \|\| attributes.length === 0) {\n return null;\n }\n\n const isEssential: boolean = variant === 'ESSENTIAL';\n\n const isChecked = (attrName: string): boolean => {\n if (isEssential) {\n return true;\n }\n const key: string = getConsentOptionalKey(purpose.purposeId, attrName);\n // Default to be false when there's no explicit form value\n return formValues[key] === 'true';\n };\n\n const handleChange = (attrName: string, checked: boolean): void => {\n const key: string = getConsentOptionalKey(purpose.purposeId, attrName);\n onInputChange(key, checked ? 'true' : 'false');\n };\n\n if (children) {\n return <>{children({attributes, handleChange, isChecked, variant})}</>;\n }\n\n return (\n <div className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list')), styles['listContainer'])}>\n {attributes.map((attr: string) => {\n const inputId = `consent_${isEssential ? 'ess' : 'opt'}_${purpose.purposeId}_${attr}`;\n const checked: boolean = isChecked(attr);\n\n return (\n <div\n key={attr}\n className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'item')), styles['listItem'])}\n >\n <div className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'row')), styles['listRow'])}>\n <div\n className={cx(\n withVendorCSSClassPrefix(bem('consent-checkbox-list', 'label-container')),\n styles['labelContainer'],\n )}\n >\n <div\n className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'bullet')), styles['bullet'])}\n />\n <Typography\n variant=\"body2\"\n className={cx(\n withVendorCSSClassPrefix(bem('consent-checkbox-list', 'typography')),\n styles['typography'],\n )}\n >\n {resolve(attr)}\n </Typography>\n </div>\n {isEssential ? (\n <Typography variant=\"body2\">{resolve('required') \|\| 'Required'}</Typography>\n ) : (\n <Toggle\n id={inputId}\n checked={checked}\n disabled={isEssential}\n onChange={\n isEssential\n ? undefined\n : (e: ChangeEvent<HTMLInputElement>): void => handleChange(attr, e.target.checked)\n }\n />\n )}\n </div>\n </div>\n );\n })}\n </div>\n );\n};\n\nexport default ConsentCheckboxList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAa,yBAAyB,WAAmB,aACvD,kBAAkB,UAAU,IAAI;;;;;;;;AA0ElC,MAAMA,uBAAqD,EACzD,SACA,SACA,YACA,eACA,UACA,QAC8B;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,2CAAU,OAAO,YAAY;CAEpE,MAAM,WAAW,SAAqC;AACpD,MAAI,CAAC,QAAQ,CAAC,EACZ,QAAO,QAAQ;EAGjB,MAAMC,MAAc,WAAW;EAC/B,MAAMC,aAAqB,EAAE,IAAI;AACjC,SAAO,eAAe,MAAM,OAAO;;CAGrC,MAAMC,cAAwB,YAAY,cAAc,QAAQ,YAAY,QAAQ,UAAU,KAC3F,MAAc,EAAE,KAClB;AAED,KAAI,CAAC,cAAc,WAAW,WAAW,EACvC,QAAO;CAGT,MAAMC,cAAuB,YAAY;CAEzC,MAAM,aAAa,aAA8B;AAC/C,MAAI,YACF,QAAO;AAIT,SAAO,WAFa,sBAAsB,QAAQ,WAAW,SAAS,MAE3C;;CAG7B,MAAM,gBAAgB,UAAkB,YAA2B;AAEjE,gBADoB,sBAAsB,QAAQ,WAAW,SAAS,EACnD,UAAU,SAAS,QAAQ;;AAGhD,KAAI,SACF,QAAO,mFAAG,SAAS;EAAC;EAAY;EAAc;EAAW;EAAQ,CAAC,GAAI;AAGxE,QACE,2CAAC;EAAI,WAAWC,kGAAgC,wBAAwB,CAAC,EAAE,OAAO,iBAAiB;YAChG,WAAW,KAAK,SAAiB;GAChC,MAAM,UAAU,WAAW,cAAc,QAAQ,MAAM,GAAG,QAAQ,UAAU,GAAG;GAC/E,MAAMC,UAAmB,UAAU,KAAK;AAExC,UACE,2CAAC;IAEC,WAAWD,kGAAgC,yBAAyB,OAAO,CAAC,EAAE,OAAO,YAAY;cAEjG,4CAAC;KAAI,WAAWA,kGAAgC,yBAAyB,MAAM,CAAC,EAAE,OAAO,WAAW;gBAClG,4CAAC;MACC,WAAWA,kGACoB,yBAAyB,kBAAkB,CAAC,EACzE,OAAO,kBACR;iBAED,2CAAC,SACC,WAAWA,kGAAgC,yBAAyB,SAAS,CAAC,EAAE,OAAO,UAAU,GACjG,EACF,2CAACE;OACC,SAAQ;OACR,WAAWF,kGACoB,yBAAyB,aAAa,CAAC,EACpE,OAAO,cACR;iBAEA,QAAQ,KAAK;QACH;OACT,EACL,cACC,2CAACE;MAAW,SAAQ;gBAAS,QAAQ,WAAW,IAAI;OAAwB,GAE5E,2CAACC;MACC,IAAI;MACK;MACT,UAAU;MACV,UACE,cACI,UACC,MAA2C,aAAa,MAAM,EAAE,OAAO,QAAQ;OAEtF;MAEA;MArCD,KAsCD;IAER;GACE;;AAIV,kCAAe"}

package/dist/cjs/components/presentation/LanguageSwitcher/LanguageSwitcher.cjs CHANGED Viewed

@@ -51,17 +51,25 @@ const LanguageSwitcher = ({ children, className }) => {
 		emoji: (0, __thunderid_browser.resolveLocaleEmoji)(code)
 	})), [effectiveLanguageCodes]);
 	(0, react.useEffect)(() => {
-		if (availableLanguageCodes.length > 0 && !availableLanguageCodes.includes(currentLanguage)) switchLanguage(availableLanguageCodes[0]);
+		if (availableLanguageCodes.length === 0) return;
+		const currentBase = (0, __thunderid_browser.getBaseLanguage)(currentLanguage);
+		if (availableLanguageCodes.some((code) => (0, __thunderid_browser.getBaseLanguage)(code) === currentBase)) return;
+		switchLanguage(availableLanguageCodes.find((code) => (0, __thunderid_browser.getBaseLanguage)(code) === "en") ?? availableLanguageCodes[0]);
 	}, [
 		availableLanguageCodes,
 		currentLanguage,
 		switchLanguage
 	]);
+	const displayLanguage = (0, react.useMemo)(() => {
+		const exactMatch = languages.find((option) => (0, __thunderid_browser.normalizeLocaleTag)(option.code) === (0, __thunderid_browser.normalizeLocaleTag)(currentLanguage));
+		if (exactMatch) return exactMatch.code;
+		return languages.find((option) => (0, __thunderid_browser.getBaseLanguage)(option.code) === (0, __thunderid_browser.getBaseLanguage)(currentLanguage))?.code ?? currentLanguage;
+	}, [languages, currentLanguage]);
 	const handleLanguageChange = (language) => {
 		if (language !== currentLanguage) switchLanguage(language);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseLanguageSwitcher.default, {
-		currentLanguage,
+		currentLanguage: displayLanguage,
 		isLoading,
 		languages,
 		onLanguageChange: handleLanguageChange,

package/dist/cjs/components/presentation/LanguageSwitcher/LanguageSwitcher.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LanguageSwitcher.cjs","names":["LanguageSwitcher: FC<LanguageSwitcherProps>","useFlowMeta","useTranslation","availableLanguageCodes: string[]","effectiveLanguageCodes: string[]","languages: LanguageOption[]","BaseLanguageSwitcher"],"sources":["../../../../../src/components/presentation/LanguageSwitcher/LanguageSwitcher.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {resolveLocaleDisplayName, resolveLocaleEmoji} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useEffect, useMemo} from 'react';\nimport BaseLanguageSwitcher, {LanguageOption, LanguageSwitcherRenderProps} from './BaseLanguageSwitcher';\nimport useFlowMeta from '../../../contexts/FlowMeta/useFlowMeta';\nimport useTranslation from '../../../hooks/useTranslation';\n\nexport type {LanguageOption, LanguageSwitcherRenderProps};\n\nexport interface LanguageSwitcherProps {\n /*\n Render-props callback for fully custom UI.\n \n @example\n * ```tsx\n * <LanguageSwitcher>\n * {({languages, currentLanguage, onLanguageChange, isLoading}) => (\n * <select\n * value={currentLanguage}\n * disabled={isLoading}\n * onChange={e => onLanguageChange(e.target.value)}\n * >\n * {languages.map(l => (\n * <option key={l.code} value={l.code}>{l.emoji} {l.displayName}</option>\n * ))}\n * </select>\n * )}\n * </LanguageSwitcher>\n * ```\n /\n children?: (props: LanguageSwitcherRenderProps) => ReactNode;\n /* Additional CSS class for the root element (default UI only) /\n className?: string;\n}\n\n/\n A v2 LanguageSwitcher component that reads available languages from `FlowMetaContext`\n * and switches both the UI language (via `I18nContext`) and the flow metadata translations\n * (by re-fetching `GET /flow/meta` with the new language).\n \n Must be rendered inside a `FlowMetaProvider`.\n \n @example\n * ```tsx\n * // Default dropdown UI\n * <LanguageSwitcher />\n \n // Custom UI with render props\n * <LanguageSwitcher>\n * {({languages, currentLanguage, onLanguageChange}) => (\n * <div>\n * {languages.map(lang => (\n * <button\n * key={lang.code}\n * onClick={() => onLanguageChange(lang.code)}\n * style={{fontWeight: lang.code === currentLanguage ? 'bold' : 'normal'}}\n * >\n * {lang.emoji} {lang.displayName}\n * </button>\n * ))}\n * </div>\n * )}\n * </LanguageSwitcher>\n * ```\n */\nconst LanguageSwitcher: FC<LanguageSwitcherProps> = ({children, className}: LanguageSwitcherProps): ReactElement => {\n const {meta, switchLanguage, isLoading} = useFlowMeta();\n const {currentLanguage} = useTranslation();\n\n const availableLanguageCodes: string[] = meta?.i18n?.languages ?? [];\n // Only fall back to the detected browser language when the server returns no configured languages.\n // Do NOT inject currentLanguage unconditionally — a browser locale like \"en-GB\" must not appear\n // in the picker when the server only supports \"en-US\".\n const effectiveLanguageCodes: string[] = useMemo(\n () => (availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage]),\n [availableLanguageCodes, currentLanguage],\n );\n\n const languages: LanguageOption[] = useMemo(\n () =>\n effectiveLanguageCodes.map((code: string) => ({\n code,\n // Resolve each label in its own locale so option names stay stable across UI language switches.\n displayName: resolveLocaleDisplayName(code, code) \|\| code,\n emoji: resolveLocaleEmoji(code),\n })),\n [effectiveLanguageCodes],\n );\n\n // If the detected language isn't supported by the server, fall back to the first available language.\n useEffect(() => {\n if (availableLanguageCodes.length > 0 && !availableLanguageCodes.~~includes~~(~~currentLanguage~~)) {\n switchLanguage(availableLanguageCodes[0]);\n ~~}\n~~ }, [availableLanguageCodes, currentLanguage, switchLanguage]);\n\n const handleLanguageChange = (language: string): void => {\n if (language !== currentLanguage) {\n switchLanguage(language);\n }\n };\n\n return (\n <BaseLanguageSwitcher\n currentLanguage={~~currentLanguage~~}\n isLoading={isLoading}\n languages={languages}\n onLanguageChange={handleLanguageChange}\n className={className}\n >\n {children}\n </BaseLanguageSwitcher>\n );\n};\n\nexport default LanguageSwitcher;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,MAAMA,oBAA+C,EAAC,UAAU,gBAAoD;CAClH,MAAM,EAAC,MAAM,gBAAgB,cAAaC,6BAAa;CACvD,MAAM,EAAC,oBAAmBC,gCAAgB;CAE1C,MAAMC,yBAAmC,MAAM,MAAM,aAAa,EAAE;CAIpE,MAAMC,kDACG,uBAAuB,SAAS,IAAI,yBAAyB,CAAC,gBAAgB,EACrF,CAAC,wBAAwB,gBAAgB,CAC1C;CAED,MAAMC,qCAEF,uBAAuB,KAAK,UAAkB;EAC5C;EAEA,+DAAsC,MAAM,KAAK,IAAI;EACrD,mDAA0B,KAAK;EAChC,EAAE,EACL,CAAC,uBAAuB,CACzB;~~AAGD~~,4BAAgB;AACd,MAAI,uBAAuB,~~SAAS~~,KAAK,~~CAAC~~,uBAAuB,~~SAAS~~,~~gBAAgB~~,~~CACxF~~,~~gBAAe~~,uBAAuB,GAAG;~~IAE1C~~;EAAC;EAAwB;EAAiB;EAAe,CAAC;~~CAE7D~~,MAAM,wBAAwB,aAA2B;AACvD,MAAI,aAAa,gBACf,gBAAe,SAAS;;AAI5B,QACE,2CAACC;~~EACkB~~;EACN;EACA;EACX,kBAAkB;EACP;EAEV;GACoB;;AAI3B,+BAAe"}
1	+ {"version":3,"file":"LanguageSwitcher.cjs","names":["LanguageSwitcher: FC<LanguageSwitcherProps>","useFlowMeta","useTranslation","availableLanguageCodes: string[]","effectiveLanguageCodes: string[]","languages: LanguageOption[]","currentBase: string","displayLanguage: string","exactMatch: LanguageOption \| undefined","BaseLanguageSwitcher"],"sources":["../../../../../src/components/presentation/LanguageSwitcher/LanguageSwitcher.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {getBaseLanguage, normalizeLocaleTag, resolveLocaleDisplayName, resolveLocaleEmoji} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useEffect, useMemo} from 'react';\nimport BaseLanguageSwitcher, {LanguageOption, LanguageSwitcherRenderProps} from './BaseLanguageSwitcher';\nimport useFlowMeta from '../../../contexts/FlowMeta/useFlowMeta';\nimport useTranslation from '../../../hooks/useTranslation';\n\nexport type {LanguageOption, LanguageSwitcherRenderProps};\n\nexport interface LanguageSwitcherProps {\n /*\n Render-props callback for fully custom UI.\n \n @example\n * ```tsx\n * <LanguageSwitcher>\n * {({languages, currentLanguage, onLanguageChange, isLoading}) => (\n * <select\n * value={currentLanguage}\n * disabled={isLoading}\n * onChange={e => onLanguageChange(e.target.value)}\n * >\n * {languages.map(l => (\n * <option key={l.code} value={l.code}>{l.emoji} {l.displayName}</option>\n * ))}\n * </select>\n * )}\n * </LanguageSwitcher>\n * ```\n /\n children?: (props: LanguageSwitcherRenderProps) => ReactNode;\n /* Additional CSS class for the root element (default UI only) /\n className?: string;\n}\n\n/\n A v2 LanguageSwitcher component that reads available languages from `FlowMetaContext`\n * and switches both the UI language (via `I18nContext`) and the flow metadata translations\n * (by re-fetching `GET /flow/meta` with the new language).\n \n Must be rendered inside a `FlowMetaProvider`.\n \n @example\n * ```tsx\n * // Default dropdown UI\n * <LanguageSwitcher />\n \n // Custom UI with render props\n * <LanguageSwitcher>\n * {({languages, currentLanguage, onLanguageChange}) => (\n * <div>\n * {languages.map(lang => (\n * <button\n * key={lang.code}\n * onClick={() => onLanguageChange(lang.code)}\n * style={{fontWeight: lang.code === currentLanguage ? 'bold' : 'normal'}}\n * >\n * {lang.emoji} {lang.displayName}\n * </button>\n * ))}\n * </div>\n * )}\n * </LanguageSwitcher>\n * ```\n */\nconst LanguageSwitcher: FC<LanguageSwitcherProps> = ({children, className}: LanguageSwitcherProps): ReactElement => {\n const {meta, switchLanguage, isLoading} = useFlowMeta();\n const {currentLanguage} = useTranslation();\n\n const availableLanguageCodes: string[] = meta?.i18n?.languages ?? [];\n // Only fall back to the detected browser language when the server returns no configured languages.\n // Do NOT inject currentLanguage unconditionally — a browser locale like \"en-GB\" must not appear\n // in the picker when the server only supports \"en-US\".\n const effectiveLanguageCodes: string[] = useMemo(\n () => (availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage]),\n [availableLanguageCodes, currentLanguage],\n );\n\n const languages: LanguageOption[] = useMemo(\n () =>\n effectiveLanguageCodes.map((code: string) => ({\n code,\n // Resolve each label in its own locale so option names stay stable across UI language switches.\n displayName: resolveLocaleDisplayName(code, code) \|\| code,\n emoji: resolveLocaleEmoji(code),\n })),\n [effectiveLanguageCodes],\n );\n\n // If the detected language isn't supported by the server, fall back to English (matched by base\n // language, e.g. browser \"en-US\" against server \"en\"), or the first available language if the\n // server doesn't offer English either.\n useEffect(() => {\n if (availableLanguageCodes.length === 0) {\n return;\n }\n const currentBase: string = getBaseLanguage(currentLanguage);\n const isSupported: boolean = availableLanguageCodes.some(\n (code: string): boolean => getBaseLanguage(code) === currentBase,\n );\n if (isSupported) {\n return;\n }\n const englishCode: string \| undefined = availableLanguageCodes.find(\n (code: string): boolean => getBaseLanguage(code) === 'en',\n );\n switchLanguage(englishCode ?? availableLanguageCodes[0]);\n }, [availableLanguageCodes, currentLanguage, switchLanguage]);\n\n // Prefer an exact dialect match (e.g. \"en-IN\" against a supported \"en-IN\") over a base-language\n // one, so a specific regional variant isn't silently collapsed to \"en\" when it's actually offered.\n // Only fall back to a base-language match (e.g. \"en-US\" against a supported \"en\") when the exact\n // dialect isn't available, and to the raw code if neither is.\n const displayLanguage: string = useMemo(() => {\n const exactMatch: LanguageOption \| undefined = languages.find(\n (option: LanguageOption): boolean => normalizeLocaleTag(option.code) === normalizeLocaleTag(currentLanguage),\n );\n if (exactMatch) {\n return exactMatch.code;\n }\n const baseMatch: LanguageOption \| undefined = languages.find(\n (option: LanguageOption): boolean => getBaseLanguage(option.code) === getBaseLanguage(currentLanguage),\n );\n return baseMatch?.code ?? currentLanguage;\n }, [languages, currentLanguage]);\n\n const handleLanguageChange = (language: string): void => {\n if (language !== currentLanguage) {\n switchLanguage(language);\n }\n };\n\n return (\n <BaseLanguageSwitcher\n currentLanguage={displayLanguage}\n isLoading={isLoading}\n languages={languages}\n onLanguageChange={handleLanguageChange}\n className={className}\n >\n {children}\n </BaseLanguageSwitcher>\n );\n};\n\nexport default LanguageSwitcher;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,MAAMA,oBAA+C,EAAC,UAAU,gBAAoD;CAClH,MAAM,EAAC,MAAM,gBAAgB,cAAaC,6BAAa;CACvD,MAAM,EAAC,oBAAmBC,gCAAgB;CAE1C,MAAMC,yBAAmC,MAAM,MAAM,aAAa,EAAE;CAIpE,MAAMC,kDACG,uBAAuB,SAAS,IAAI,yBAAyB,CAAC,gBAAgB,EACrF,CAAC,wBAAwB,gBAAgB,CAC1C;CAED,MAAMC,qCAEF,uBAAuB,KAAK,UAAkB;EAC5C;EAEA,+DAAsC,MAAM,KAAK,IAAI;EACrD,mDAA0B,KAAK;EAChC,EAAE,EACL,CAAC,uBAAuB,CACzB;AAKD,4BAAgB;AACd,MAAI,uBAAuB,WAAW,EACpC;EAEF,MAAMC,uDAAsC,gBAAgB;AAI5D,MAH6B,uBAAuB,MACjD,kDAA0C,KAAK,KAAK,YACtD,CAEC;AAKF,iBAHwC,uBAAuB,MAC5D,kDAA0C,KAAK,KAAK,KACtD,IAC6B,uBAAuB,GAAG;IACvD;EAAC;EAAwB;EAAiB;EAAe,CAAC;CAM7D,MAAMC,2CAAwC;EAC5C,MAAMC,aAAyC,UAAU,MACtD,uDAAuD,OAAO,KAAK,iDAAwB,gBAAgB,CAC7G;AACD,MAAI,WACF,QAAO,WAAW;AAKpB,SAH8C,UAAU,MACrD,oDAAoD,OAAO,KAAK,8CAAqB,gBAAgB,CACvG,EACiB,QAAQ;IACzB,CAAC,WAAW,gBAAgB,CAAC;CAEhC,MAAM,wBAAwB,aAA2B;AACvD,MAAI,aAAa,gBACf,gBAAe,SAAS;;AAI5B,QACE,2CAACC;EACC,iBAAiB;EACN;EACA;EACX,kBAAkB;EACP;EAEV;GACoB;;AAI3B,+BAAe"}

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

@@ -408,6 +408,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
 					id: component.id,
 					className: require_emotion.cx(component.classes, formClass),
+					onSubmit: (event) => event.preventDefault(),
 					children: blockComponents
 				}, key);
 			}
@@ -527,8 +528,6 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 				consentData: consentPromptRawData,
 				formValues,
 				onInputChange,
-				config: component.config,
-				meta: options.meta,
 				t: options.t
 			}, key);
 		}