@thunderid/react 1.8.0 → 1.9.1

package/dist/components/auth/flow/ConsentAuthorizationDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentAuthorizationDetail.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/ConsentAuthorizationDetail.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,gBAAgB,EAAE,KAAK,aAAa,EAA2B,MAAM,oBAAoB,CAAC;AAC5G,OAAO,EAAmB,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAOjE,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAM7D;;GAEG;AACH,MAAM,WAAW,qCAAqC;IACpD,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,OAAO,EAAE,aAAa,CAAC;IACvB,0EAA0E;IAC1E,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB,8FAA8F;IAC9F,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,kGAAkG;IAClG,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C;;;;;;;;;;;;;;;;;;OAkBG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qCAAqC,KAAK,SAAS,CAAC;IACvE,+DAA+D;IAC/D,OAAO,EAAE,aAAa,CAAC;IACvB,gGAAgG;IAChG,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,kEAAkE;IAClE,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,iFAAiF;IACjF,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;CACzB;AAED;;;;;;GAMG;AACH,QAAA,MAAM,0BAA0B,EAAE,EAAE,CAAC,+BAA+B,CAgGnE,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/dist/components/auth/flow/ConsentAuthorizationDetail.js

@@ -0,0 +1,100 @@
+import { cx } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Typography_default from "../../primitives/Typography/Typography.js";
+import ConsentAuthorizationDetail_styles_default from "./ConsentAuthorizationDetail.styles.js";
+import Toggle_default from "../../primitives/Toggle/Toggle.js";
+import { getConsentOptionalKey } from "./ConsentCheckboxList.js";
+import resolveConsentText_default from "./resolveConsentText.js";
+import ConsentDetailText_default from "./ConsentDetailText.js";
+import getConsentDetailLayout_default, { CONSENT_DETAIL_DISPLAY_LIMITS } from "../../../utils/getConsentDetailLayout.js";
+import ConsentDetailField_default from "./ConsentDetailField.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/auth/flow/ConsentAuthorizationDetail.tsx
+/**
+* Renders one RFC 9396 authorization detail element: the server-rendered summary, the detail's fields,
+* which are read-only unless the user may modify them, and a single toggle that approves or declines the
+* detail as a whole. The summary and labels come from the server and are not translated again.
+* Authorization details reach the consent step only on a sign-in started from an authorization request, so
+* this renders in an authorization server UI (hosted login); an app-native sign-in flow cannot carry them.
+*/
+const ConsentAuthorizationDetail = ({ children = void 0, element, formValues, onInputChange, purposeId, t = void 0 }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = ConsentAuthorizationDetail_styles_default(theme, colorScheme);
+	const key = getConsentOptionalKey(purposeId, element.name);
+	const isApproved = formValues[key] !== "false";
+	const rows = element.rows ?? [];
+	const summary = element.summary ?? element.detailType ?? element.name;
+	const handleChange = (checked) => {
+		onInputChange(key, checked ? "true" : "false");
+	};
+	useEffect(() => {
+		if (formValues[key] === void 0) onInputChange(key, "true");
+	}, [
+		formValues,
+		key,
+		onInputChange
+	]);
+	if (children) return /* @__PURE__ */ jsx(Fragment$1, { children: children({
+		detailType: element.detailType,
+		element,
+		handleChange,
+		isApproved,
+		rows,
+		summary
+	}) });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(withVendorCSSClassPrefix(bem("consent-authorization-detail")), styles["card"]),
+		children: [
+			/* @__PURE__ */ jsx(ConsentDetailText_default, {
+				id: `consent_authz_detail_${purposeId}_${element.name}_summary`,
+				className: withVendorCSSClassPrefix(bem("consent-authorization-detail", "summary")),
+				variant: "subtitle2",
+				fontWeight: "bold",
+				maxChars: CONSENT_DETAIL_DISPLAY_LIMITS.summaryChars,
+				maxLines: CONSENT_DETAIL_DISPLAY_LIMITS.summaryLines,
+				t,
+				text: summary
+			}),
+			rows.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: cx(withVendorCSSClassPrefix(bem("consent-authorization-detail", "rows")), styles["rows"]),
+				children: rows.map((row) => {
+					const stacked = getConsentDetailLayout_default(row) === "stacked";
+					return /* @__PURE__ */ jsxs("div", {
+						className: cx(withVendorCSSClassPrefix(bem("consent-authorization-detail", "row")), stacked && withVendorCSSClassPrefix(bem("consent-authorization-detail", "row", "stacked")), stacked ? styles["stackedRow"] : styles["row"]),
+						children: [/* @__PURE__ */ jsx(Typography_default, {
+							variant: "body2",
+							className: cx(withVendorCSSClassPrefix(bem("consent-authorization-detail", "label")), styles["label"]),
+							children: row.label || row.path
+						}), /* @__PURE__ */ jsx("div", {
+							className: cx(withVendorCSSClassPrefix(bem("consent-authorization-detail", "value")), stacked ? styles["stackedValue"] : styles["value"]),
+							children: /* @__PURE__ */ jsx(ConsentDetailField_default, {
+								align: stacked ? "start" : "end",
+								detailId: element.name,
+								purposeId,
+								row,
+								formValues,
+								onInputChange,
+								t
+							})
+						})]
+					}, row.path);
+				})
+			}),
+			/* @__PURE__ */ jsx(Toggle_default, {
+				id: `consent_opt_${purposeId}_${element.name}`,
+				className: withVendorCSSClassPrefix(bem("consent-authorization-detail", "approve")),
+				label: resolveConsentText_default(t, "consent.authorization_details.approve"),
+				checked: isApproved,
+				onChange: (e) => handleChange(e.target.checked)
+			})
+		]
+	});
+};
+var ConsentAuthorizationDetail_default = ConsentAuthorizationDetail;
+
+//#endregion
+export { ConsentAuthorizationDetail_default as default };
+//# sourceMappingURL=ConsentAuthorizationDetail.js.map

package/dist/components/auth/flow/ConsentAuthorizationDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentAuthorizationDetail.js","names":["ConsentAuthorizationDetail: FC<ConsentAuthorizationDetailProps>","useTheme","styles: Record<string, string>","useStyles","key: string","isApproved: boolean","rows: ConsentDetailRow[]","summary: string","ConsentDetailText","stacked: boolean","getConsentDetailLayout","Typography","ConsentDetailField","Toggle","resolveConsentText"],"sources":["../../../../src/components/auth/flow/ConsentAuthorizationDetail.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, type ConsentDetailRow, type PromptElement, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {type ChangeEvent, FC, ReactNode, useEffect} from 'react';\nimport useStyles from './ConsentAuthorizationDetail.styles';\nimport {getConsentOptionalKey} from './ConsentCheckboxList';\nimport ConsentDetailField from './ConsentDetailField';\nimport ConsentDetailText from './ConsentDetailText';\nimport resolveConsentText from './resolveConsentText';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {UseTranslation} from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\nimport getConsentDetailLayout, {CONSENT_DETAIL_DISPLAY_LIMITS} from '../../../utils/getConsentDetailLayout';\nimport Toggle from '../../primitives/Toggle/Toggle';\nimport Typography from '../../primitives/Typography/Typography';\n\n/**\n * Render props exposed by ConsentAuthorizationDetail when using the render-prop pattern.\n */\nexport interface ConsentAuthorizationDetailRenderProps {\n  /** RFC 9396 authorization details type of the detail. */\n  detailType?: string;\n  /** The detail's consent element. */\n  element: PromptElement;\n  /** Call this when the user approves or declines the detail as a whole. */\n  handleChange: (checked: boolean) => void;\n  /**\n   * Whether the detail is approved. A detail is the transaction the user is asked to allow, so it counts as\n   * approved until the user declines it.\n   */\n  isApproved: boolean;\n  /** Fields of the detail; render each with `ConsentDetailField` or `useConsentDetailField`. */\n  rows: ConsentDetailRow[];\n  /** Server-rendered sentence describing the detail, or its type or identifier when it has none. */\n  summary: string;\n}\n\n/**\n * Props for the ConsentAuthorizationDetail component.\n */\nexport interface ConsentAuthorizationDetailProps {\n  /**\n   * Render-props callback. When provided, the default detail UI is replaced with whatever JSX the\n   * callback returns.\n   *\n   * @example\n   * ```tsx\n   * <ConsentAuthorizationDetail purposeId={purpose.purposeId} element={element} formValues={formValues} onInputChange={onChange}>\n   *   {({summary, rows, isApproved, handleChange}) => (\n   *     <section>\n   *       <h3>{summary}</h3>\n   *       {rows.map(row => (\n   *         <ConsentDetailField key={row.path} purposeId={purpose.purposeId} detailId={element.name} row={row} formValues={formValues} onInputChange={onChange} />\n   *       ))}\n   *       <Switch checked={isApproved} onChange={e => handleChange(e.target.checked)} />\n   *     </section>\n   *   )}\n   * </ConsentAuthorizationDetail>\n   * ```\n   */\n  children?: (props: ConsentAuthorizationDetailRenderProps) => ReactNode;\n  /** The authorization detail element of the consent purpose. */\n  element: PromptElement;\n  /** Current form values, holding the approval of the detail and the values the user modified. */\n  formValues: Record<string, string>;\n  /** Callback invoked with a consent form key and its new value. */\n  onInputChange: (name: string, value: string) => void;\n  /** The identifier of the authorization details purpose the detail belongs to. */\n  purposeId: string;\n  /** translation data */\n  t?: UseTranslation['t'];\n}\n\n/**\n * Renders one RFC 9396 authorization detail element: the server-rendered summary, the detail's fields,\n * which are read-only unless the user may modify them, and a single toggle that approves or declines the\n * detail as a whole. The summary and labels come from the server and are not translated again.\n * Authorization details reach the consent step only on a sign-in started from an authorization request, so\n * this renders in an authorization server UI (hosted login); an app-native sign-in flow cannot carry them.\n */\nconst ConsentAuthorizationDetail: FC<ConsentAuthorizationDetailProps> = ({\n  children = undefined,\n  element,\n  formValues,\n  onInputChange,\n  purposeId,\n  t = undefined,\n}: ConsentAuthorizationDetailProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n\n  const key: string = getConsentOptionalKey(purposeId, element.name);\n  const isApproved: boolean = formValues[key] !== 'false';\n  const rows: ConsentDetailRow[] = element.rows ?? [];\n  const summary: string = element.summary ?? element.detailType ?? element.name;\n\n  const handleChange = (checked: boolean): void => {\n    onInputChange(key, checked ? 'true' : 'false');\n  };\n\n  // The detail starts approved. The value is seeded into the form so the submitted decision matches the\n  // toggle when the detail is rendered outside Consent, which seeds it the same way.\n  useEffect(() => {\n    if (formValues[key] === undefined) {\n      onInputChange(key, 'true');\n    }\n  }, [formValues, key, onInputChange]);\n\n  if (children) {\n    return <>{children({detailType: element.detailType, element, handleChange, isApproved, rows, summary})}</>;\n  }\n\n  return (\n    <div className={cx(withVendorCSSClassPrefix(bem('consent-authorization-detail')), styles['card'])}>\n      <ConsentDetailText\n        id={`consent_authz_detail_${purposeId}_${element.name}_summary`}\n        className={withVendorCSSClassPrefix(bem('consent-authorization-detail', 'summary'))}\n        variant=\"subtitle2\"\n        fontWeight=\"bold\"\n        maxChars={CONSENT_DETAIL_DISPLAY_LIMITS.summaryChars}\n        maxLines={CONSENT_DETAIL_DISPLAY_LIMITS.summaryLines}\n        t={t}\n        text={summary}\n      />\n      {rows.length > 0 && (\n        <div className={cx(withVendorCSSClassPrefix(bem('consent-authorization-detail', 'rows')), styles['rows'])}>\n          {rows.map((row: ConsentDetailRow) => {\n            const stacked: boolean = getConsentDetailLayout(row) === 'stacked';\n            return (\n              <div\n                key={row.path}\n                className={cx(\n                  withVendorCSSClassPrefix(bem('consent-authorization-detail', 'row')),\n                  stacked && withVendorCSSClassPrefix(bem('consent-authorization-detail', 'row', 'stacked')),\n                  stacked ? styles['stackedRow'] : styles['row'],\n                )}\n              >\n                <Typography\n                  variant=\"body2\"\n                  className={cx(\n                    withVendorCSSClassPrefix(bem('consent-authorization-detail', 'label')),\n                    styles['label'],\n                  )}\n                >\n                  {row.label || row.path}\n                </Typography>\n                <div\n                  className={cx(\n                    withVendorCSSClassPrefix(bem('consent-authorization-detail', 'value')),\n                    stacked ? styles['stackedValue'] : styles['value'],\n                  )}\n                >\n                  <ConsentDetailField\n                    align={stacked ? 'start' : 'end'}\n                    detailId={element.name}\n                    purposeId={purposeId}\n                    row={row}\n                    formValues={formValues}\n                    onInputChange={onInputChange}\n                    t={t}\n                  />\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n      <Toggle\n        id={`consent_opt_${purposeId}_${element.name}`}\n        className={withVendorCSSClassPrefix(bem('consent-authorization-detail', 'approve'))}\n        label={resolveConsentText(t, 'consent.authorization_details.approve')}\n        checked={isApproved}\n        onChange={(e: ChangeEvent<HTMLInputElement>): void => handleChange(e.target.checked)}\n      />\n    </div>\n  );\n};\n\nexport default ConsentAuthorizationDetail;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiFA,MAAMA,8BAAmE,EACvE,WAAW,QACX,SACA,YACA,eACA,WACA,IAAI,aACiC;CACrC,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,0CAAU,OAAO,YAAY;CAEpE,MAAMC,MAAc,sBAAsB,WAAW,QAAQ,KAAK;CAClE,MAAMC,aAAsB,WAAW,SAAS;CAChD,MAAMC,OAA2B,QAAQ,QAAQ,EAAE;CACnD,MAAMC,UAAkB,QAAQ,WAAW,QAAQ,cAAc,QAAQ;CAEzE,MAAM,gBAAgB,YAA2B;AAC/C,gBAAc,KAAK,UAAU,SAAS,QAAQ;;AAKhD,iBAAgB;AACd,MAAI,WAAW,SAAS,OACtB,eAAc,KAAK,OAAO;IAE3B;EAAC;EAAY;EAAK;EAAc,CAAC;AAEpC,KAAI,SACF,QAAO,4CAAG,SAAS;EAAC,YAAY,QAAQ;EAAY;EAAS;EAAc;EAAY;EAAM;EAAQ,CAAC,GAAI;AAG5G,QACE,qBAAC;EAAI,WAAW,GAAG,yBAAyB,IAAI,+BAA+B,CAAC,EAAE,OAAO,QAAQ;;GAC/F,oBAACC;IACC,IAAI,wBAAwB,UAAU,GAAG,QAAQ,KAAK;IACtD,WAAW,yBAAyB,IAAI,gCAAgC,UAAU,CAAC;IACnF,SAAQ;IACR,YAAW;IACX,UAAU,8BAA8B;IACxC,UAAU,8BAA8B;IACrC;IACH,MAAM;KACN;GACD,KAAK,SAAS,KACb,oBAAC;IAAI,WAAW,GAAG,yBAAyB,IAAI,gCAAgC,OAAO,CAAC,EAAE,OAAO,QAAQ;cACtG,KAAK,KAAK,QAA0B;KACnC,MAAMC,UAAmBC,+BAAuB,IAAI,KAAK;AACzD,YACE,qBAAC;MAEC,WAAW,GACT,yBAAyB,IAAI,gCAAgC,MAAM,CAAC,EACpE,WAAW,yBAAyB,IAAI,gCAAgC,OAAO,UAAU,CAAC,EAC1F,UAAU,OAAO,gBAAgB,OAAO,OACzC;iBAED,oBAACC;OACC,SAAQ;OACR,WAAW,GACT,yBAAyB,IAAI,gCAAgC,QAAQ,CAAC,EACtE,OAAO,SACR;iBAEA,IAAI,SAAS,IAAI;QACP,EACb,oBAAC;OACC,WAAW,GACT,yBAAyB,IAAI,gCAAgC,QAAQ,CAAC,EACtE,UAAU,OAAO,kBAAkB,OAAO,SAC3C;iBAED,oBAACC;QACC,OAAO,UAAU,UAAU;QAC3B,UAAU,QAAQ;QACP;QACN;QACO;QACG;QACZ;SACH;QACE;QA/BD,IAAI,KAgCL;MAER;KACE;GAER,oBAACC;IACC,IAAI,eAAe,UAAU,GAAG,QAAQ;IACxC,WAAW,yBAAyB,IAAI,gCAAgC,UAAU,CAAC;IACnF,OAAOC,2BAAmB,GAAG,wCAAwC;IACrE,SAAS;IACT,WAAW,MAA2C,aAAa,EAAE,OAAO,QAAQ;KACpF;;GACE;;AAIV,yCAAe"}

package/dist/components/auth/flow/ConsentAuthorizationDetail.styles.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@thunderid/browser';
+/**
+ * Creates styles for the ConsentAuthorizationDetail component.
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => Record<string, string>;
+export default useStyles;
+//# sourceMappingURL=ConsentAuthorizationDetail.styles.d.ts.map

package/dist/components/auth/flow/ConsentAuthorizationDetail.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentAuthorizationDetail.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/ConsentAuthorizationDetail.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;GAKG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA6BzE,CAAC;AAEJ,eAAe,SAAS,CAAC"}

package/dist/components/auth/flow/ConsentAuthorizationDetail.styles.js

@@ -0,0 +1,57 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+
+//#region src/components/auth/flow/ConsentAuthorizationDetail.styles.ts
+/**
+* Creates styles for the ConsentAuthorizationDetail component.
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => useMemo(() => ({
+	card: css({ marginTop: "0.5rem" }),
+	label: css({
+		flex: "1 1 auto",
+		lineHeight: 1.45,
+		minWidth: 0,
+		overflowWrap: "anywhere"
+	}),
+	row: css({
+		alignItems: "center",
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "4px 1rem",
+		justifyContent: "space-between"
+	}),
+	rows: css({
+		display: "flex",
+		flexDirection: "column",
+		gap: "8px",
+		margin: "0.5rem 0"
+	}),
+	stackedRow: css({
+		display: "flex",
+		flexDirection: "column",
+		gap: "4px"
+	}),
+	stackedValue: css({
+		display: "flex",
+		maxWidth: "100%",
+		minWidth: 0
+	}),
+	value: css({
+		alignItems: "center",
+		display: "flex",
+		gap: "6px",
+		justifyContent: "flex-end",
+		marginLeft: "auto",
+		maxWidth: "100%",
+		minWidth: 0,
+		textAlign: "right"
+	})
+}), [theme, colorScheme]);
+var ConsentAuthorizationDetail_styles_default = useStyles;
+
+//#endregion
+export { ConsentAuthorizationDetail_styles_default as default };
+//# sourceMappingURL=ConsentAuthorizationDetail.styles.js.map

package/dist/components/auth/flow/ConsentAuthorizationDetail.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentAuthorizationDetail.styles.js","names":[],"sources":["../../../../src/components/auth/flow/ConsentAuthorizationDetail.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the ConsentAuthorizationDetail component.\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(\n    () => ({\n      card: css({marginTop: '0.5rem'}),\n      label: css({flex: '1 1 auto', lineHeight: 1.45, minWidth: 0, overflowWrap: 'anywhere'}),\n      // A short field sits beside its label and drops below it when the two do not fit; a long one is\n      // stacked, the label above the value, so neither squeezes the other.\n      row: css({\n        alignItems: 'center',\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: '4px 1rem',\n        justifyContent: 'space-between',\n      }),\n      rows: css({display: 'flex', flexDirection: 'column', gap: '8px', margin: '0.5rem 0'}),\n      stackedRow: css({display: 'flex', flexDirection: 'column', gap: '4px'}),\n      stackedValue: css({display: 'flex', maxWidth: '100%', minWidth: 0}),\n      value: css({\n        alignItems: 'center',\n        display: 'flex',\n        gap: '6px',\n        justifyContent: 'flex-end',\n        marginLeft: 'auto',\n        maxWidth: '100%',\n        minWidth: 0,\n        textAlign: 'right',\n      }),\n    }),\n    [theme, colorScheme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,aAAa,OAAc,gBAC/B,eACS;CACL,MAAM,IAAI,EAAC,WAAW,UAAS,CAAC;CAChC,OAAO,IAAI;EAAC,MAAM;EAAY,YAAY;EAAM,UAAU;EAAG,cAAc;EAAW,CAAC;CAGvF,KAAK,IAAI;EACP,YAAY;EACZ,SAAS;EACT,UAAU;EACV,KAAK;EACL,gBAAgB;EACjB,CAAC;CACF,MAAM,IAAI;EAAC,SAAS;EAAQ,eAAe;EAAU,KAAK;EAAO,QAAQ;EAAW,CAAC;CACrF,YAAY,IAAI;EAAC,SAAS;EAAQ,eAAe;EAAU,KAAK;EAAM,CAAC;CACvE,cAAc,IAAI;EAAC,SAAS;EAAQ,UAAU;EAAQ,UAAU;EAAE,CAAC;CACnE,OAAO,IAAI;EACT,YAAY;EACZ,SAAS;EACT,KAAK;EACL,gBAAgB;EAChB,YAAY;EACZ,UAAU;EACV,UAAU;EACV,WAAW;EACZ,CAAC;CACH,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,gDAAe"}

package/dist/components/auth/flow/ConsentDetailField.d.ts

@@ -0,0 +1,39 @@
+import { type ConsentDetailRow } from '@thunderid/browser';
+import { FC, ReactNode } from 'react';
+import { type UseConsentDetailFieldResult } from '../../../hooks/auth/useConsentDetailField';
+import { UseTranslation } from '../../../hooks/useTranslation';
+/**
+ * Props for the ConsentDetailField component.
+ */
+export interface ConsentDetailFieldProps {
+    /** Side the value is aligned to: `end` beside its label, `start` when stacked below it. Defaults to `end`. */
+    align?: 'start' | 'end';
+    /**
+     * Render-props callback. When provided, the default field UI is replaced with whatever it returns, given
+     * the field's headless state from `useConsentDetailField`.
+     */
+    children?: (field: UseConsentDetailFieldResult) => ReactNode;
+    /** Current form values, holding the JSON text of each field the user changed. */
+    formValues: Record<string, string>;
+    /** Callback invoked with a consent form key and its new value. */
+    onInputChange: (name: string, value: string) => void;
+    /** The identifier of the authorization detail the field belongs to. */
+    detailId: string;
+    /** The identifier of the consent purpose the authorization detail belongs to. */
+    purposeId: string;
+    /** The field to render. */
+    row: ConsentDetailRow;
+    /** translation data */
+    t?: UseTranslation['t'];
+}
+/**
+ * Renders one field of an authorization detail. A field the user may modify before
+ * approving is editable, bounded by the value that was shown: a number or a date can only move in
+ * the allowed direction, and items can only be removed from, or added to, a list as its rule allows. Every other field is read-only.
+ * A number or a date the user enters outside its bound, or that is not a value at all, is shown with an error and
+ * is not submitted: the field's modification is cleared and the field is marked invalid, which blocks approval
+ * until the user corrects it. The server checks whatever is submitted.
+ */
+declare const ConsentDetailField: FC<ConsentDetailFieldProps>;
+export default ConsentDetailField;
+//# sourceMappingURL=ConsentDetailField.d.ts.map

package/dist/components/auth/flow/ConsentDetailField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentDetailField.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/ConsentDetailField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,gBAAgB,EAA2B,MAAM,oBAAoB,CAAC;AACxF,OAAO,EAAmB,EAAE,EAAoC,SAAS,EAAC,MAAM,OAAO,CAAC;AAKxF,OAA8B,EAE5B,KAAK,2BAA2B,EACjC,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAQ7D;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,8GAA8G;IAC9G,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,SAAS,CAAC;IAC7D,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,kEAAkE;IAClE,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,uEAAuE;IACvE,QAAQ,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,SAAS,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,GAAG,EAAE,gBAAgB,CAAC;IACtB,uBAAuB;IACvB,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAyNnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/auth/flow/ConsentDetailField.js

@@ -0,0 +1,168 @@
+import { cx } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import ConsentDetailField_styles_default from "./ConsentDetailField.styles.js";
+import resolveConsentText_default from "./resolveConsentText.js";
+import ConsentDetailText_default, { ConsentDetailToggle } from "./ConsentDetailText.js";
+import formatConsentDetailValue_default from "../../../utils/formatConsentDetailValue.js";
+import isConsentDetailStructured_default from "../../../utils/isConsentDetailStructured.js";
+import { CONSENT_DETAIL_DISPLAY_LIMITS } from "../../../utils/getConsentDetailLayout.js";
+import isConsentDetailPlainList_default from "../../../utils/isConsentDetailPlainList.js";
+import useConsentDetailField_default from "../../../hooks/auth/useConsentDetailField.js";
+import TextField_default from "../../primitives/TextField/TextField.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/auth/flow/ConsentDetailField.tsx
+/**
+* Renders one field of an authorization detail. A field the user may modify before
+* approving is editable, bounded by the value that was shown: a number or a date can only move in
+* the allowed direction, and items can only be removed from, or added to, a list as its rule allows. Every other field is read-only.
+* A number or a date the user enters outside its bound, or that is not a value at all, is shown with an error and
+* is not submitted: the field's modification is cleared and the field is marked invalid, which blocks approval
+* until the user corrects it. The server checks whatever is submitted.
+*/
+const ConsentDetailField = ({ align = "end", children = void 0, formValues, onInputChange, detailId, purposeId, row, t = void 0 }) => {
+	const field = useConsentDetailField_default({
+		detailId,
+		formValues,
+		onInputChange,
+		purposeId,
+		row,
+		t
+	});
+	const { inputId, label, listDisplay } = field;
+	const { theme, colorScheme } = useTheme_default();
+	const styles = ConsentDetailField_styles_default(theme, colorScheme, align);
+	const fieldClass = withVendorCSSClassPrefix(bem("consent-detail-field"));
+	const collapse = (items) => items.slice(0, listDisplay.visibleCount);
+	const listToggle = listDisplay.isCollapsible && /* @__PURE__ */ jsx(ConsentDetailToggle, {
+		expanded: field.isListExpanded,
+		hiddenCount: listDisplay.hiddenCount,
+		onToggle: field.handleListToggle,
+		t
+	});
+	const chipClass = (modifier) => cx(withVendorCSSClassPrefix(bem("consent-detail-field", "chip")), withVendorCSSClassPrefix(bem("consent-detail-field", "chip", modifier)), styles[`${modifier}Chip`]);
+	const chipLabelClass = cx(withVendorCSSClassPrefix(bem("consent-detail-field", "chip-label")), styles["chipLabel"]);
+	const chipsClass = cx(fieldClass, withVendorCSSClassPrefix(bem("consent-detail-field", "chips")), styles["chips"]);
+	const inputClass = cx(fieldClass, withVendorCSSClassPrefix(bem("consent-detail-field", "input")), styles["input"]);
+	const valueClass = cx(fieldClass, withVendorCSSClassPrefix(bem("consent-detail-field", "value")));
+	if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(field) });
+	if (field.kind === "number" || field.kind === "date") return /* @__PURE__ */ jsx(TextField_default, {
+		id: inputId,
+		className: inputClass,
+		type: field.kind,
+		step: field.kind === "number" ? "any" : void 0,
+		"aria-label": label,
+		max: field.max,
+		min: field.min,
+		value: field.text,
+		error: field.error?.message,
+		onChange: (e) => field.handleChange(e.target.value),
+		onBlur: field.handleBlur
+	});
+	if (field.kind === "removeItems") return /* @__PURE__ */ jsxs("div", {
+		className: chipsClass,
+		role: "group",
+		"aria-label": label,
+		children: [collapse(field.items.map(({ selected, toggleable, value }, index) => /* @__PURE__ */ jsxs("button", {
+			id: `${inputId}_${index}`,
+			type: "button",
+			className: chipClass(selected ? "kept" : "removed"),
+			title: String(value),
+			"aria-pressed": selected,
+			"aria-label": resolveConsentText_default(t, selected ? "consent.authorization_details.remove_item" : "consent.authorization_details.add_back_item", { item: String(value) }),
+			disabled: !toggleable,
+			onClick: () => field.handleToggle(value),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: chipLabelClass,
+				children: String(value)
+			}), selected && toggleable && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "×"
+			})]
+		}, String(value)))), listToggle]
+	});
+	if (field.kind === "addItems") return /* @__PURE__ */ jsxs("div", {
+		className: chipsClass,
+		role: "group",
+		"aria-label": label,
+		children: [
+			collapse(field.items.map(({ origin, value }, index) => {
+				if (origin === "shown") return /* @__PURE__ */ jsx("span", {
+					id: `${inputId}_${index}`,
+					className: chipClass("kept"),
+					title: String(value),
+					children: /* @__PURE__ */ jsx("span", {
+						className: chipLabelClass,
+						children: String(value)
+					})
+				}, String(value));
+				return /* @__PURE__ */ jsxs("button", {
+					id: `${inputId}_${origin}_${String(value)}`,
+					type: "button",
+					className: chipClass(origin === "added" ? "kept" : "offered"),
+					title: String(value),
+					"aria-label": resolveConsentText_default(t, origin === "added" ? "consent.authorization_details.remove_item" : "consent.authorization_details.add_item", { item: String(value) }),
+					onClick: () => field.handleToggle(value),
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: chipLabelClass,
+						children: [origin === "offered" && "+ ", String(value)]
+					}), origin === "added" && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "×"
+					})]
+				}, `${origin}-${String(value)}`);
+			})),
+			listToggle,
+			field.isTypedItemAllowed && /* @__PURE__ */ jsx(TextField_default, {
+				id: `${inputId}_new`,
+				className: inputClass,
+				"aria-label": resolveConsentText_default(t, "consent.authorization_details.new_item", { label }),
+				value: field.text,
+				onChange: (e) => field.handleChange(e.target.value),
+				onKeyDown: (e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						field.handleAdd(e.currentTarget.value);
+					}
+				}
+			})
+		]
+	});
+	const textAlign = align === "end" ? "right" : "left";
+	if (isConsentDetailPlainList_default(row.value) && listDisplay.isCollapsible) {
+		const items = row.value.slice(0, listDisplay.visibleCount);
+		return /* @__PURE__ */ jsxs("div", {
+			className: cx(fieldClass, withVendorCSSClassPrefix(bem("consent-detail-field", "list")), styles["listText"]),
+			children: [/* @__PURE__ */ jsx(ConsentDetailText_default, {
+				align: textAlign,
+				fontWeight: "bold",
+				maxChars: Number.POSITIVE_INFINITY,
+				maxLines: Number.POSITIVE_INFINITY,
+				text: formatConsentDetailValue_default(items)
+			}), listToggle]
+		});
+	}
+	if (isConsentDetailStructured_default(row.value)) return /* @__PURE__ */ jsx(ConsentDetailText_default, {
+		className: valueClass,
+		monospace: true,
+		maxChars: Number.POSITIVE_INFINITY,
+		maxLines: CONSENT_DETAIL_DISPLAY_LIMITS.structuredLines,
+		t,
+		text: formatConsentDetailValue_default(row.value, 2)
+	});
+	return /* @__PURE__ */ jsx(ConsentDetailText_default, {
+		className: valueClass,
+		align: textAlign,
+		fontWeight: "bold",
+		maxChars: CONSENT_DETAIL_DISPLAY_LIMITS.valueChars,
+		maxLines: CONSENT_DETAIL_DISPLAY_LIMITS.valueLines,
+		t,
+		text: formatConsentDetailValue_default(row.value)
+	});
+};
+var ConsentDetailField_default = ConsentDetailField;
+
+//#endregion
+export { ConsentDetailField_default as default };
+//# sourceMappingURL=ConsentDetailField.js.map

package/dist/components/auth/flow/ConsentDetailField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentDetailField.js","names":["ConsentDetailField: FC<ConsentDetailFieldProps>","field: UseConsentDetailFieldResult","useConsentDetailField","useTheme","styles: Record<string, string>","useStyles","fieldClass: string","listToggle: ReactNode","chipLabelClass: string","chipsClass: string","inputClass: string","valueClass: string","TextField","resolveConsentText","textAlign: 'left' | 'right'","isConsentDetailPlainList","items: (string | number | boolean)[]","ConsentDetailText","formatConsentDetailValue","isConsentDetailStructured"],"sources":["../../../../src/components/auth/flow/ConsentDetailField.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, type ConsentDetailRow, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {type ChangeEvent, FC, type KeyboardEvent, ReactElement, ReactNode} from 'react';\nimport useStyles from './ConsentDetailField.styles';\nimport ConsentDetailText, {ConsentDetailToggle} from './ConsentDetailText';\nimport resolveConsentText from './resolveConsentText';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useConsentDetailField, {\n  type ConsentDetailListItem,\n  type UseConsentDetailFieldResult,\n} from '../../../hooks/auth/useConsentDetailField';\nimport {UseTranslation} from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\nimport formatConsentDetailValue from '../../../utils/formatConsentDetailValue';\nimport {CONSENT_DETAIL_DISPLAY_LIMITS} from '../../../utils/getConsentDetailLayout';\nimport isConsentDetailPlainList from '../../../utils/isConsentDetailPlainList';\nimport isConsentDetailStructured from '../../../utils/isConsentDetailStructured';\nimport TextField from '../../primitives/TextField/TextField';\n\n/**\n * Props for the ConsentDetailField component.\n */\nexport interface ConsentDetailFieldProps {\n  /** Side the value is aligned to: `end` beside its label, `start` when stacked below it. Defaults to `end`. */\n  align?: 'start' | 'end';\n  /**\n   * Render-props callback. When provided, the default field UI is replaced with whatever it returns, given\n   * the field's headless state from `useConsentDetailField`.\n   */\n  children?: (field: UseConsentDetailFieldResult) => ReactNode;\n  /** Current form values, holding the JSON text of each field the user changed. */\n  formValues: Record<string, string>;\n  /** Callback invoked with a consent form key and its new value. */\n  onInputChange: (name: string, value: string) => void;\n  /** The identifier of the authorization detail the field belongs to. */\n  detailId: string;\n  /** The identifier of the consent purpose the authorization detail belongs to. */\n  purposeId: string;\n  /** The field to render. */\n  row: ConsentDetailRow;\n  /** translation data */\n  t?: UseTranslation['t'];\n}\n\n/**\n * Renders one field of an authorization detail. A field the user may modify before\n * approving is editable, bounded by the value that was shown: a number or a date can only move in\n * the allowed direction, and items can only be removed from, or added to, a list as its rule allows. Every other field is read-only.\n * A number or a date the user enters outside its bound, or that is not a value at all, is shown with an error and\n * is not submitted: the field's modification is cleared and the field is marked invalid, which blocks approval\n * until the user corrects it. The server checks whatever is submitted.\n */\nconst ConsentDetailField: FC<ConsentDetailFieldProps> = ({\n  align = 'end',\n  children = undefined,\n  formValues,\n  onInputChange,\n  detailId,\n  purposeId,\n  row,\n  t = undefined,\n}: ConsentDetailFieldProps): ReactElement => {\n  const field: UseConsentDetailFieldResult = useConsentDetailField({\n    detailId,\n    formValues,\n    onInputChange,\n    purposeId,\n    row,\n    t,\n  });\n  const {inputId, label, listDisplay} = field;\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, align);\n  const fieldClass: string = withVendorCSSClassPrefix(bem('consent-detail-field'));\n  const collapse = (items: ReactNode[]): ReactNode[] => items.slice(0, listDisplay.visibleCount);\n  const listToggle: ReactNode = listDisplay.isCollapsible && (\n    <ConsentDetailToggle\n      expanded={field.isListExpanded}\n      hiddenCount={listDisplay.hiddenCount}\n      onToggle={field.handleListToggle}\n      t={t}\n    />\n  );\n  const chipClass = (modifier: 'kept' | 'removed' | 'offered'): string =>\n    cx(\n      withVendorCSSClassPrefix(bem('consent-detail-field', 'chip')),\n      withVendorCSSClassPrefix(bem('consent-detail-field', 'chip', modifier)),\n      styles[`${modifier}Chip`],\n    );\n  const chipLabelClass: string = cx(\n    withVendorCSSClassPrefix(bem('consent-detail-field', 'chip-label')),\n    styles['chipLabel'],\n  );\n  const chipsClass: string = cx(\n    fieldClass,\n    withVendorCSSClassPrefix(bem('consent-detail-field', 'chips')),\n    styles['chips'],\n  );\n  const inputClass: string = cx(\n    fieldClass,\n    withVendorCSSClassPrefix(bem('consent-detail-field', 'input')),\n    styles['input'],\n  );\n  const valueClass: string = cx(fieldClass, withVendorCSSClassPrefix(bem('consent-detail-field', 'value')));\n\n  if (children) {\n    return <>{children(field)}</>;\n  }\n\n  if (field.kind === 'number' || field.kind === 'date') {\n    return (\n      <TextField\n        id={inputId}\n        className={inputClass}\n        type={field.kind}\n        step={field.kind === 'number' ? 'any' : undefined}\n        aria-label={label}\n        max={field.max}\n        min={field.min}\n        value={field.text}\n        error={field.error?.message}\n        onChange={(e: ChangeEvent<HTMLInputElement>): void => field.handleChange(e.target.value)}\n        onBlur={field.handleBlur}\n      />\n    );\n  }\n\n  if (field.kind === 'removeItems') {\n    // A kept item can be removed, except the last one: to grant none of them the user declines the\n    // detail instead. A removed item stays visible so the user can add it back.\n    return (\n      <div className={chipsClass} role=\"group\" aria-label={label}>\n        {collapse(\n          field.items.map(({selected, toggleable, value}: ConsentDetailListItem, index: number) => (\n            <button\n              key={String(value)}\n              id={`${inputId}_${index}`}\n              type=\"button\"\n              className={chipClass(selected ? 'kept' : 'removed')}\n              title={String(value)}\n              aria-pressed={selected}\n              aria-label={resolveConsentText(\n                t,\n                selected ? 'consent.authorization_details.remove_item' : 'consent.authorization_details.add_back_item',\n                {item: String(value)},\n              )}\n              disabled={!toggleable}\n              onClick={(): void => field.handleToggle(value)}\n            >\n              <span className={chipLabelClass}>{String(value)}</span>\n              {selected && toggleable && <span aria-hidden=\"true\">×</span>}\n            </button>\n          )),\n        )}\n        {listToggle}\n      </div>\n    );\n  }\n\n  if (field.kind === 'addItems') {\n    // The items shown cannot be removed, since removing one would grant more. Items the user adds can be\n    // taken out again before approving.\n    return (\n      <div className={chipsClass} role=\"group\" aria-label={label}>\n        {collapse(\n          field.items.map(({origin, value}: ConsentDetailListItem, index: number) => {\n            if (origin === 'shown') {\n              return (\n                <span\n                  key={String(value)}\n                  id={`${inputId}_${index}`}\n                  className={chipClass('kept')}\n                  title={String(value)}\n                >\n                  <span className={chipLabelClass}>{String(value)}</span>\n                </span>\n              );\n            }\n            return (\n              <button\n                key={`${origin}-${String(value)}`}\n                id={`${inputId}_${origin}_${String(value)}`}\n                type=\"button\"\n                className={chipClass(origin === 'added' ? 'kept' : 'offered')}\n                title={String(value)}\n                aria-label={resolveConsentText(\n                  t,\n                  origin === 'added'\n                    ? 'consent.authorization_details.remove_item'\n                    : 'consent.authorization_details.add_item',\n                  {item: String(value)},\n                )}\n                onClick={(): void => field.handleToggle(value)}\n              >\n                <span className={chipLabelClass}>\n                  {origin === 'offered' && '+ '}\n                  {String(value)}\n                </span>\n                {origin === 'added' && <span aria-hidden=\"true\">×</span>}\n              </button>\n            );\n          }),\n        )}\n        {listToggle}\n        {field.isTypedItemAllowed && (\n          <TextField\n            id={`${inputId}_new`}\n            className={inputClass}\n            aria-label={resolveConsentText(t, 'consent.authorization_details.new_item', {label})}\n            value={field.text}\n            onChange={(e: ChangeEvent<HTMLInputElement>): void => field.handleChange(e.target.value)}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>): void => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                field.handleAdd(e.currentTarget.value);\n              }\n            }}\n          />\n        )}\n      </div>\n    );\n  }\n\n  const textAlign: 'left' | 'right' = align === 'end' ? 'right' : 'left';\n\n  // A long list of plain values shows its first items, the rest behind a toggle.\n  if (isConsentDetailPlainList(row.value) && listDisplay.isCollapsible) {\n    const items: (string | number | boolean)[] = row.value.slice(0, listDisplay.visibleCount);\n    return (\n      <div\n        className={cx(fieldClass, withVendorCSSClassPrefix(bem('consent-detail-field', 'list')), styles['listText'])}\n      >\n        <ConsentDetailText\n          align={textAlign}\n          fontWeight=\"bold\"\n          maxChars={Number.POSITIVE_INFINITY}\n          maxLines={Number.POSITIVE_INFINITY}\n          text={formatConsentDetailValue(items)}\n        />\n        {listToggle}\n      </div>\n    );\n  }\n\n  // Structured JSON reads as an indented block rather than one long line.\n  if (isConsentDetailStructured(row.value)) {\n    return (\n      <ConsentDetailText\n        className={valueClass}\n        monospace\n        maxChars={Number.POSITIVE_INFINITY}\n        maxLines={CONSENT_DETAIL_DISPLAY_LIMITS.structuredLines}\n        t={t}\n        text={formatConsentDetailValue(row.value, 2)}\n      />\n    );\n  }\n\n  return (\n    <ConsentDetailText\n      className={valueClass}\n      align={textAlign}\n      fontWeight=\"bold\"\n      maxChars={CONSENT_DETAIL_DISPLAY_LIMITS.valueChars}\n      maxLines={CONSENT_DETAIL_DISPLAY_LIMITS.valueLines}\n      t={t}\n      text={formatConsentDetailValue(row.value)}\n    />\n  );\n};\n\nexport default ConsentDetailField;\n"],"mappings":"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"}

package/dist/components/auth/flow/ConsentDetailField.styles.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@thunderid/browser';
+/**
+ * Creates styles for the ConsentDetailField component.
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @param align - Side the value is aligned to: `end` beside its label, `start` when stacked below it
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string, align: "start" | "end") => Record<string, string>;
+export default useStyles;
+//# sourceMappingURL=ConsentDetailField.styles.d.ts.map

package/dist/components/auth/flow/ConsentDetailField.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentDetailField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/ConsentDetailField.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;GAMG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,EAAE,OAAO,OAAO,GAAG,KAAK,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA2DnE,CAAC;AAElC,eAAe,SAAS,CAAC"}

package/dist/components/auth/flow/ConsentDetailField.styles.js

@@ -0,0 +1,83 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+
+//#region src/components/auth/flow/ConsentDetailField.styles.ts
+/**
+* Creates styles for the ConsentDetailField component.
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param align - Side the value is aligned to: `end` beside its label, `start` when stacked below it
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, align) => useMemo(() => {
+	const chip = css({
+		alignItems: "center",
+		borderRadius: "9999px",
+		boxSizing: "border-box",
+		cursor: "pointer",
+		display: "inline-flex",
+		font: "inherit",
+		fontSize: "0.8125rem",
+		gap: "6px",
+		maxWidth: "100%",
+		minWidth: 0,
+		padding: "2px 10px",
+		"&:disabled": { cursor: "default" }
+	});
+	return {
+		chipLabel: css({
+			minWidth: 0,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		}),
+		chips: css({
+			alignItems: "center",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: "6px",
+			justifyContent: align === "end" ? "flex-end" : "flex-start",
+			maxWidth: "100%",
+			minWidth: 0,
+			...align === "start" && {
+				contain: "inline-size",
+				width: "100%"
+			}
+		}),
+		input: css({ maxWidth: "10rem" }),
+		keptChip: css(chip, {
+			background: "transparent",
+			border: `1px solid ${theme.vars.colors.primary.main}`,
+			color: theme.vars.colors.primary.main
+		}),
+		listText: css({
+			alignItems: "baseline",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: "2px 6px",
+			justifyContent: align === "end" ? "flex-end" : "flex-start",
+			maxWidth: "100%",
+			minWidth: 0
+		}),
+		offeredChip: css(chip, {
+			background: "transparent",
+			border: `1px dashed ${theme.vars.colors.border}`,
+			color: theme.vars.colors.text.secondary
+		}),
+		removedChip: css(chip, {
+			background: "transparent",
+			border: `1px solid ${theme.vars.colors.border}`,
+			color: theme.vars.colors.text.secondary,
+			textDecoration: "line-through"
+		})
+	};
+}, [
+	theme,
+	colorScheme,
+	align
+]);
+var ConsentDetailField_styles_default = useStyles;
+
+//#endregion
+export { ConsentDetailField_styles_default as default };
+//# sourceMappingURL=ConsentDetailField.styles.js.map

package/dist/components/auth/flow/ConsentDetailField.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentDetailField.styles.js","names":["chip: string"],"sources":["../../../../src/components/auth/flow/ConsentDetailField.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the ConsentDetailField component.\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param align - Side the value is aligned to: `end` beside its label, `start` when stacked below it\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, align: 'start' | 'end'): Record<string, string> =>\n  useMemo(() => {\n    const chip: string = css({\n      alignItems: 'center',\n      borderRadius: '9999px',\n      boxSizing: 'border-box',\n      cursor: 'pointer',\n      display: 'inline-flex',\n      font: 'inherit',\n      fontSize: '0.8125rem',\n      gap: '6px',\n      maxWidth: '100%',\n      minWidth: 0,\n      padding: '2px 10px',\n      '&:disabled': {cursor: 'default'},\n    });\n\n    return {\n      // A chip keeps to one line; a long item is cut short with an ellipsis and shown in full on hover.\n      chipLabel: css({minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}),\n      chips: css({\n        alignItems: 'center',\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: '6px',\n        justifyContent: align === 'end' ? 'flex-end' : 'flex-start',\n        maxWidth: '100%',\n        minWidth: 0,\n        // Stacked below its label, the list takes the row's width and wraps within it; a chip's one-line\n        // label must not widen the screen it sits in.\n        ...(align === 'start' && {contain: 'inline-size', width: '100%'}),\n      }),\n      input: css({maxWidth: '10rem'}),\n      keptChip: css(chip, {\n        background: 'transparent',\n        border: `1px solid ${theme.vars.colors.primary.main}`,\n        color: theme.vars.colors.primary.main,\n      }),\n      listText: css({\n        alignItems: 'baseline',\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: '2px 6px',\n        justifyContent: align === 'end' ? 'flex-end' : 'flex-start',\n        maxWidth: '100%',\n        minWidth: 0,\n      }),\n      offeredChip: css(chip, {\n        background: 'transparent',\n        border: `1px dashed ${theme.vars.colors.border}`,\n        color: theme.vars.colors.text.secondary,\n      }),\n      removedChip: css(chip, {\n        background: 'transparent',\n        border: `1px solid ${theme.vars.colors.border}`,\n        color: theme.vars.colors.text.secondary,\n        textDecoration: 'line-through',\n      }),\n    };\n  }, [theme, colorScheme, align]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAa,OAAc,aAAqB,UACpD,cAAc;CACZ,MAAMA,OAAe,IAAI;EACvB,YAAY;EACZ,cAAc;EACd,WAAW;EACX,QAAQ;EACR,SAAS;EACT,MAAM;EACN,UAAU;EACV,KAAK;EACL,UAAU;EACV,UAAU;EACV,SAAS;EACT,cAAc,EAAC,QAAQ,WAAU;EAClC,CAAC;AAEF,QAAO;EAEL,WAAW,IAAI;GAAC,UAAU;GAAG,UAAU;GAAU,cAAc;GAAY,YAAY;GAAS,CAAC;EACjG,OAAO,IAAI;GACT,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,gBAAgB,UAAU,QAAQ,aAAa;GAC/C,UAAU;GACV,UAAU;GAGV,GAAI,UAAU,WAAW;IAAC,SAAS;IAAe,OAAO;IAAO;GACjE,CAAC;EACF,OAAO,IAAI,EAAC,UAAU,SAAQ,CAAC;EAC/B,UAAU,IAAI,MAAM;GAClB,YAAY;GACZ,QAAQ,aAAa,MAAM,KAAK,OAAO,QAAQ;GAC/C,OAAO,MAAM,KAAK,OAAO,QAAQ;GAClC,CAAC;EACF,UAAU,IAAI;GACZ,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,gBAAgB,UAAU,QAAQ,aAAa;GAC/C,UAAU;GACV,UAAU;GACX,CAAC;EACF,aAAa,IAAI,MAAM;GACrB,YAAY;GACZ,QAAQ,cAAc,MAAM,KAAK,OAAO;GACxC,OAAO,MAAM,KAAK,OAAO,KAAK;GAC/B,CAAC;EACF,aAAa,IAAI,MAAM;GACrB,YAAY;GACZ,QAAQ,aAAa,MAAM,KAAK,OAAO;GACvC,OAAO,MAAM,KAAK,OAAO,KAAK;GAC9B,gBAAgB;GACjB,CAAC;EACH;GACA;CAAC;CAAO;CAAa;CAAM,CAAC;AAEjC,wCAAe"}

package/dist/components/auth/flow/ConsentDetailText.d.ts

@@ -0,0 +1,53 @@
+import { FC } from 'react';
+import { UseTranslation } from '../../../hooks/useTranslation';
+/**
+ * Props for the ConsentDetailToggle component.
+ */
+export interface ConsentDetailToggleProps {
+    /** Id of the element the toggle shows more or less of. */
+    controls?: string;
+    /** Whether everything is shown. */
+    expanded: boolean;
+    /** Number of items hidden while collapsed. When given, the collapsed label counts them. */
+    hiddenCount?: number;
+    /** Callback invoked with the next expanded state. */
+    onToggle: (expanded: boolean) => void;
+    /** translation data */
+    t?: UseTranslation['t'];
+}
+/**
+ * Button that expands or collapses long authorization detail content.
+ */
+export declare const ConsentDetailToggle: FC<ConsentDetailToggleProps>;
+/**
+ * Props for the ConsentDetailText component.
+ */
+export interface ConsentDetailTextProps {
+    /** Alignment of the text. */
+    align?: 'left' | 'right';
+    /** Class name applied to the text. */
+    className?: string;
+    /** Weight of the text. */
+    fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    /** Id of the text element. */
+    id?: string;
+    /** Number of characters above which the text is clamped. */
+    maxChars: number;
+    /** Number of lines the text is clamped to. */
+    maxLines: number;
+    /** Shows the text as a preformatted monospace block, for structured JSON. */
+    monospace?: boolean;
+    /** translation data */
+    t?: UseTranslation['t'];
+    /** Text to show. */
+    text: string;
+    /** Typography variant of the text. */
+    variant?: 'body2' | 'subtitle2';
+}
+/**
+ * Shows authorization detail text that wraps anywhere, so a long unbroken token such as an IBAN or a
+ * URL never overflows. Text longer than its limit is clamped behind a toggle.
+ */
+declare const ConsentDetailText: FC<ConsentDetailTextProps>;
+export default ConsentDetailText;
+//# sourceMappingURL=ConsentDetailText.d.ts.map

package/dist/components/auth/flow/ConsentDetailText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentDetailText.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/ConsentDetailText.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAyB,MAAM,OAAO,CAAC;AAIjD,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAK7D;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,uBAAuB;IACvB,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA6B5D,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACvD,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4DAA4D;IAC5D,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,CAAC,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IACxB,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;CACjC;AAED;;;GAGG;AACH,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAqCjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}