@thunderid/react 0.10.0 → 0.11.0

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

@@ -1,16 +1,62 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Info = require('../primitives/Icons/Info.cjs');
 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, onInputChange, children }) => {
+const Consent = ({ consentData, formValues, config: suppliedConfig = {}, onInputChange, children, meta, t }) => {
+	/** Resolve any remaining {{t()}} or {{meta()}} template expressions in a string at render time. */
+	const resolve = (text) => {
+		if (!text || !t && !meta) return text || "";
+		return (0, __thunderid_browser.resolveFlowTemplateLiterals)(text, {
+			meta,
+			t: t || ((k) => k)
+		});
+	};
+	const config = {
+		...defaultConfig,
+		...suppliedConfig
+	};
+	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"]);
+	/**
+	* Method to check whether master toggle button is checked or not
+	* @param purpose Purpose object
+	* @param checked boolean variable to check, whether toggle is checked or unchecked
+	*/
+	const handleChange = (purpose, checked) => {
+		const checkValue = checked ? "true" : "false";
+		purpose.optional.map((opt) => {
+			onInputChange(require_ConsentCheckboxList.getConsentOptionalKey(purpose.purposeId, opt.name), checkValue);
+		});
+	};
+	/**
+	* Check all optional claims are selected or not
+	* @param purpose Purpose object
+	* @returns boolean value to denote all optional claims are selected
+	*/
+	const checkOptValue = (purpose) => {
+		return purpose.optional.every((opt) => {
+			return formValues[require_ConsentCheckboxList.getConsentOptionalKey(purpose.purposeId, opt.name)] === "true";
+		});
+	};
 	if (!consentData) return null;
 	let purposes = [];
 	try {
@@ -36,10 +82,24 @@ const Consent = ({ consentData, formValues, onInputChange, children }) => {
 			style: { paddingBottom: "1rem" },
 			children: [purpose.essential && purpose.essential.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				style: { marginTop: "0.5rem" },
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
-					variant: "subtitle2",
-					fontWeight: "bold",
-					children: "Essential Attributes"
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "4px",
+						marginBottom: "10px"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+						variant: "subtitle2",
+						fontWeight: "bold",
+						children: essentialLabel
+					}), essentialInfo !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.default, {
+						helperText: essentialInfo,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Info.default, {
+							width: "1rem",
+							height: "1rem"
+						})
+					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConsentCheckboxList.default, {
 					variant: "ESSENTIAL",
 					purpose,
@@ -48,10 +108,37 @@ const Consent = ({ consentData, formValues, onInputChange, children }) => {
 				})]
 			}), purpose.optional && purpose.optional.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				style: { marginTop: "0.5rem" },
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
-					variant: "subtitle2",
-					fontWeight: "bold",
-					children: purpose.type === "permissions" ? "Permissions" : "Optional Attributes"
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						paddingRight: "4px",
+						marginBottom: "10px"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "4px"
+						},
+						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: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Info.default, {
+								width: "1rem",
+								height: "1rem"
+							})
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Toggle.default, {
+						id: `consent_opt_${purpose.purposeId}_all`,
+						checked: checkOptValue(purpose),
+						"aria-label": "Toggle all optional attributes",
+						onChange: (e) => handleChange(purpose, e.target.checked)
+					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConsentCheckboxList.default, {
 					variant: "OPTIONAL",
 					purpose,

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

@@ -1 +1 @@
-{"version":3,"file":"Consent.cjs","names":["Consent: FC<ConsentProps>","purposes: ConsentPurposeData[]","parsed: ConsentPurposeData[] | {purposes: ConsentPurposeData[]}","Typography","ConsentCheckboxList"],"sources":["../../../../src/components/adapters/Consent.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {type ConsentPurposeData} from '@thunderid/browser';\nimport {FC, ReactNode} from 'react';\nimport ConsentCheckboxList from './ConsentCheckboxList';\nimport Typography from '../primitives/Typography/Typography';\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/**\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}: ConsentProps) => {\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 style={{display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '0.25rem'}}>\n      {purposes.map((purpose: ConsentPurposeData, purposeIndex: number) => (\n        <div key={purpose.purposeId || purposeIndex} style={{paddingBottom: '1rem'}}>\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 style={{marginTop: '0.5rem'}}>\n              <Typography variant=\"subtitle2\" fontWeight=\"bold\">\n                Essential Attributes\n              </Typography>\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 style={{marginTop: '0.5rem'}}>\n              <Typography variant=\"subtitle2\" fontWeight=\"bold\">\n                {purpose.type === 'permissions' ? 'Permissions' : 'Optional Attributes'}\n              </Typography>\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":";;;;;;;;;;;;AAkFA,MAAMA,WAA6B,EAAC,aAAa,YAAY,eAAe,eAA4B;AACtG,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,OAAO;GAAC,SAAS;GAAQ,eAAe;GAAU,KAAK;GAAQ,WAAW;GAAU;YACtF,SAAS,KAAK,SAA6B,iBAC1C,4CAAC;GAA4C,OAAO,EAAC,eAAe,QAAO;cASxE,QAAQ,aAAa,QAAQ,UAAU,SAAS,KAC/C,4CAAC;IAAI,OAAO,EAAC,WAAW,UAAS;eAC/B,2CAACC;KAAW,SAAQ;KAAY,YAAW;eAAO;MAErC,EACb,2CAACC;KACC,SAAQ;KACC;KACG;KACG;MACf;KACE,EAGP,QAAQ,YAAY,QAAQ,SAAS,SAAS,KAC7C,4CAAC;IAAI,OAAO,EAAC,WAAW,UAAS;eAC/B,2CAACD;KAAW,SAAQ;KAAY,YAAW;eACxC,QAAQ,SAAS,gBAAgB,gBAAgB;MACvC,EACb,2CAACC;KACC,SAAQ;KACC;KACG;KACG;MACf;KACE;KAlCA,QAAQ,aAAa,aAoCzB,CACN;GACE;;AAIV,sBAAe"}
+{"version":3,"file":"Consent.cjs","names":["defaultConfig: Required<Pick<ConsentConfig, 'essential' | 'optional'>>","Consent: FC<ConsentProps>","config: ConsentConfig","getConsentOptionalKey","purposes: ConsentPurposeData[]","parsed: ConsentPurposeData[] | {purposes: ConsentPurposeData[]}","Typography","Tooltip","Info","ConsentCheckboxList","Toggle"],"sources":["../../../../src/components/adapters/Consent.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {\n  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';\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  /** 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 style={{display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '0.25rem'}}>\n      {purposes.map((purpose: ConsentPurposeData, purposeIndex: number) => (\n        <div key={purpose.purposeId || purposeIndex} style={{paddingBottom: '1rem'}}>\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 style={{marginTop: '0.5rem'}}>\n              <div style={{display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '10px'}}>\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 style={{marginTop: '0.5rem'}}>\n              <div\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  paddingRight: '4px',\n                  marginBottom: '10px',\n                }}\n              >\n                <div style={{display: 'flex', alignItems: 'center', gap: '4px'}}>\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":";;;;;;;;;;;;AA8GA,MAAMA,gBAAyE;CAC7E,WAAW;CACX,UAAU;CACX;;;;;;AAOD,MAAMC,WAA6B,EACjC,aACA,YACA,QAAQ,iBAAiB,EAAE,EAC3B,eACA,UACA,MACA,QACkB;;CAElB,MAAM,WAAW,SAAqC;AACpD,MAAI,CAAC,QAAS,CAAC,KAAK,CAAC,KACnB,QAAO,QAAQ;AAEjB,8DAAmC,MAAM;GAAC;GAAM,GAAG,OAAO,MAAsB;GAAG,CAAC;;CAGtF,MAAMC,SAAwB;EAAC,GAAG;EAAe,GAAG;EAAe;CACnE,MAAM,gBAAgB,OAAO,OAAO,kBAAkB,WAAW,QAAQ,OAAO,cAAc,MAAM,CAAC,GAAG;CACxG,MAAM,eAAe,OAAO,OAAO,iBAAiB,WAAW,QAAQ,OAAO,aAAa,MAAM,CAAC,GAAG;CACrG,MAAM,iBAAiB,QAAQ,OAAO,aAAa;CACnD,MAAM,gBAAgB,QAAQ,OAAO,YAAY;;;;;;CAOjD,MAAM,gBAAgB,SAA6B,YAA2B;EAC5E,MAAM,aAAa,UAAU,SAAS;AACtC,UAAQ,SAAS,KAAK,QAAuB;AAE3C,iBADoBC,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,OAAO;GAAC,SAAS;GAAQ,eAAe;GAAU,KAAK;GAAQ,WAAW;GAAU;YACtF,SAAS,KAAK,SAA6B,iBAC1C,4CAAC;GAA4C,OAAO,EAAC,eAAe,QAAO;cASxE,QAAQ,aAAa,QAAQ,UAAU,SAAS,KAC/C,4CAAC;IAAI,OAAO,EAAC,WAAW,UAAS;eAC/B,4CAAC;KAAI,OAAO;MAAC,SAAS;MAAQ,YAAY;MAAU,KAAK;MAAO,cAAc;MAAO;gBACnF,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;MACf;KACE,EAGP,QAAQ,YAAY,QAAQ,SAAS,SAAS,KAC7C,4CAAC;IAAI,OAAO,EAAC,WAAW,UAAS;eAC/B,4CAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,gBAAgB;MAChB,cAAc;MACd,cAAc;MACf;gBAED,4CAAC;MAAI,OAAO;OAAC,SAAS;OAAQ,YAAY;OAAU,KAAK;OAAM;iBAC7D,2CAACH;OAAW,SAAQ;OAAY,YAAW;iBACxC,QAAQ,SAAS,gBAAgB,gBAAgB;QACvC,EACZ,iBAAiB,MAChB,2CAACC;OAAQ,YAAY;iBACnB,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;MACf;KACE;KAhEA,QAAQ,aAAa,aAkEzB,CACN;GACE;;AAIV,sBAAe"}

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

@@ -2,7 +2,6 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_useTheme = require('../../contexts/Theme/useTheme.cjs');
 const require_Typography = require('../primitives/Typography/Typography.cjs');
 const require_ConsentCheckboxList_styles = require('./ConsentCheckboxList.styles.cjs');
-const require_Divider = require('../primitives/Divider/Divider.cjs');
 const require_Toggle = require('../primitives/Toggle/Toggle.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
@@ -35,7 +34,7 @@ const ConsentCheckboxList = ({ variant, purpose, formValues, onInputChange, chil
 	const isEssential = variant === "ESSENTIAL";
 	const isChecked = (attrName) => {
 		if (isEssential) return true;
-		return formValues[getConsentOptionalKey(purpose.purposeId, attrName)] !== "false";
+		return formValues[getConsentOptionalKey(purpose.purposeId, attrName)] === "true";
 	};
 	const handleChange = (attrName, checked) => {
 		onInputChange(getConsentOptionalKey(purpose.purposeId, attrName), checked ? "true" : "false");
@@ -51,9 +50,9 @@ const ConsentCheckboxList = ({ variant, purpose, formValues, onInputChange, chil
 		children: attributes.map((attr) => {
 			const inputId = `consent_${isEssential ? "ess" : "opt"}_${purpose.purposeId}_${attr}`;
 			const checked = isChecked(attr);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "item")), styles["listItem"]),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "row")), styles["listRow"]),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "label-container")), styles["labelContainer"]),
@@ -62,13 +61,16 @@ const ConsentCheckboxList = ({ variant, purpose, formValues, onInputChange, chil
 							className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "typography")), styles["typography"]),
 							children: attr
 						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Toggle.default, {
+					}), isEssential ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+						variant: "body2",
+						children: "Required"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Toggle.default, {
 						id: inputId,
 						checked,
 						disabled: isEssential,
 						onChange: isEssential ? void 0 : (e) => handleChange(attr, e.target.checked)
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Divider.default, { className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "divider")), styles["divider"]) })]
+				})
 			}, attr);
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"ConsentCheckboxList.cjs","names":["ConsentCheckboxList: FC<ConsentCheckboxListProps>","useTheme","styles: Record<string, string>","useStyles","attributes: string[]","isEssential: boolean","checked: boolean","Typography","Toggle","Divider"],"sources":["../../../../src/components/adapters/ConsentCheckboxList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\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 Divider from '../primitives/Divider/Divider';\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 opted-in (true) when there's no explicit form value\n    return formValues[key] !== 'false';\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              <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            </div>\n            <Divider\n              className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'divider')), styles['divider'])}\n            />\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default ConsentCheckboxList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkCA,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,gHAA2C,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,4CAAC;IAEC,gHAA2C,yBAAyB,OAAO,CAAC,EAAE,OAAO,YAAY;eAEjG,4CAAC;KAAI,gHAA2C,yBAAyB,MAAM,CAAC,EAAE,OAAO,WAAW;gBAClG,4CAAC;MACC,gHAC+B,yBAAyB,kBAAkB,CAAC,EACzE,OAAO,kBACR;iBAED,2CAAC,SACC,gHAA2C,yBAAyB,SAAS,CAAC,EAAE,OAAO,UAAU,GACjG,EACF,2CAACC;OACC,SAAQ;OACR,gHAC+B,yBAAyB,aAAa,CAAC,EACpE,OAAO,cACR;iBAEA;QACU;OACT,EACN,2CAACC;MACC,IAAI;MACK;MACT,UAAU;MACV,UACE,cACI,UACC,MAA2C,aAAa,MAAM,EAAE,OAAO,QAAQ;OAEtF;MACE,EACN,2CAACC,2BACC,gHAA2C,yBAAyB,UAAU,CAAC,EAAE,OAAO,WAAW,GACnG;MApCG,KAqCD;IAER;GACE;;AAIV,kCAAe"}
+{"version":3,"file":"ConsentCheckboxList.cjs","names":["ConsentCheckboxList: FC<ConsentCheckboxListProps>","useTheme","styles: Record<string, string>","useStyles","attributes: string[]","isEssential: boolean","checked: boolean","Typography","Toggle"],"sources":["../../../../src/components/adapters/ConsentCheckboxList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\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 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":";;;;;;;;;;;;;;;;;;;;AAiCA,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,gHAA2C,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,gHAA2C,yBAAyB,OAAO,CAAC,EAAE,OAAO,YAAY;cAEjG,4CAAC;KAAI,gHAA2C,yBAAyB,MAAM,CAAC,EAAE,OAAO,WAAW;gBAClG,4CAAC;MACC,gHAC+B,yBAAyB,kBAAkB,CAAC,EACzE,OAAO,kBACR;iBAED,2CAAC,SACC,gHAA2C,yBAAyB,SAAS,CAAC,EAAE,OAAO,UAAU,GACjG,EACF,2CAACC;OACC,SAAQ;OACR,gHAC+B,yBAAyB,aAAa,CAAC,EACpE,OAAO,cACR;iBAEA;QACU;OACT,EACL,cACC,2CAACA;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"}

package/dist/cjs/components/adapters/ConsentCheckboxList.styles.cjs

@@ -28,6 +28,7 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => ({
       `,
 	listItem: __emotion_css.css`
         padding: 0 0.25rem;
+        margin-bottom: 4px;
       `,
 	listRow: __emotion_css.css`
         display: flex;

package/dist/cjs/components/adapters/ConsentCheckboxList.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ConsentCheckboxList.styles.cjs","names":[],"sources":["../../../../src/components/adapters/ConsentCheckboxList.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(\n    () => ({\n      bullet: css`\n        width: 5px;\n        height: 5px;\n        border-radius: 50%;\n        background-color: #9e9e9e;\n        flex-shrink: 0;\n      `,\n      divider: css`\n        opacity: 0.5;\n        margin: 0.25rem 0;\n      `,\n      labelContainer: css`\n        display: flex;\n        align-items: center;\n        gap: 0.4rem;\n      `,\n      listContainer: css`\n        display: flex;\n        flex-direction: column;\n      `,\n      listItem: css`\n        padding: 0 0.25rem;\n      `,\n      listRow: css`\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0.125rem 0;\n      `,\n      typography: css`\n        margin: 0;\n      `,\n    }),\n    [theme, colorScheme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;;AAsBA,MAAM,aAAa,OAAc,0CAEtB;CACL,QAAQ,iBAAG;;;;;;;CAOX,SAAS,iBAAG;;;;CAIZ,gBAAgB,iBAAG;;;;;CAKnB,eAAe,iBAAG;;;;CAIlB,UAAU,iBAAG;;;CAGb,SAAS,iBAAG;;;;;;CAMZ,YAAY,iBAAG;;;CAGhB,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,yCAAe"}
+{"version":3,"file":"ConsentCheckboxList.styles.cjs","names":[],"sources":["../../../../src/components/adapters/ConsentCheckboxList.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(\n    () => ({\n      bullet: css`\n        width: 5px;\n        height: 5px;\n        border-radius: 50%;\n        background-color: #9e9e9e;\n        flex-shrink: 0;\n      `,\n      divider: css`\n        opacity: 0.5;\n        margin: 0.25rem 0;\n      `,\n      labelContainer: css`\n        display: flex;\n        align-items: center;\n        gap: 0.4rem;\n      `,\n      listContainer: css`\n        display: flex;\n        flex-direction: column;\n      `,\n      listItem: css`\n        padding: 0 0.25rem;\n        margin-bottom: 4px;\n      `,\n      listRow: css`\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0.125rem 0;\n      `,\n      typography: css`\n        margin: 0;\n      `,\n    }),\n    [theme, colorScheme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;;AAsBA,MAAM,aAAa,OAAc,0CAEtB;CACL,QAAQ,iBAAG;;;;;;;CAOX,SAAS,iBAAG;;;;CAIZ,gBAAgB,iBAAG;;;;;CAKnB,eAAe,iBAAG;;;;CAIlB,UAAU,iBAAG;;;;CAIb,SAAS,iBAAG;;;;;;CAMZ,YAAY,iBAAG;;;CAGhB,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,yCAAe"}

package/dist/cjs/components/presentation/UserDropdown/BaseUserDropdown.cjs

@@ -2,11 +2,11 @@ const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
 const require_Button = require('../../primitives/Button/Button.cjs');
 const require_Typography = require('../../primitives/Typography/Typography.cjs');
+const require_LogOut = require('../../primitives/Icons/LogOut.cjs');
+const require_User = require('../../primitives/Icons/User.cjs');
 const require_getMappedUserProfileValue = require('../../../utils/getMappedUserProfileValue.cjs');
 const require_getDisplayName = require('../../../utils/getDisplayName.cjs');
 const require_Avatar = require('../../primitives/Avatar/Avatar.cjs');
-const require_LogOut = require('../../primitives/Icons/LogOut.cjs');
-const require_User = require('../../primitives/Icons/User.cjs');
 const require_BaseUserDropdown_styles = require('./BaseUserDropdown.styles.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);

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

@@ -5,10 +5,10 @@ const require_Button = require('../../primitives/Button/Button.cjs');
 const require_Typography = require('../../primitives/Typography/Typography.cjs');
 const require_Alert = require('../../primitives/Alert/Alert.cjs');
 const require_Card = require('../../primitives/Card/Card.cjs');
-const require_Divider = require('../../primitives/Divider/Divider.cjs');
 const require_Checkbox = require('../../primitives/Checkbox/Checkbox.cjs');
 const require_DatePicker = require('../../primitives/DatePicker/DatePicker.cjs');
 const require_TextField = require('../../primitives/TextField/TextField.cjs');
+const require_Divider = require('../../primitives/Divider/Divider.cjs');
 const require_BaseUserProfile_styles = require('./BaseUserProfile.styles.cjs');
 const require_getMappedUserProfileValue = require('../../../utils/getMappedUserProfileValue.cjs');
 const require_getDisplayName = require('../../../utils/getDisplayName.cjs');

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

@@ -2,7 +2,6 @@ const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs
 const require_Button = require('../../primitives/Button/Button.cjs');
 const require_composeAffixedInputs = require('../../../utils/composeAffixedInputs.cjs');
 const require_Typography = require('../../primitives/Typography/Typography.cjs');
-const require_Divider = require('../../primitives/Divider/Divider.cjs');
 const require_ConsentCheckboxList = require('../../adapters/ConsentCheckboxList.cjs');
 const require_Consent = require('../../adapters/Consent.cjs');
 const require_FacebookButton = require('../../adapters/FacebookButton.cjs');
@@ -18,6 +17,7 @@ const require_DatePicker = require('../../primitives/DatePicker/DatePicker.cjs')
 const require_Select = require('../../primitives/Select/Select.cjs');
 const require_FieldFactory = require('../../factories/FieldFactory.cjs');
 const require_CopyableText = require('../../primitives/CopyableText/CopyableText.cjs');
+const require_Divider = require('../../primitives/Divider/Divider.cjs');
 const require_flowIconRegistry = require('../../primitives/Icons/flowIconRegistry.cjs');
 const require_AffixedField = require('../../primitives/AffixedField/AffixedField.cjs');
 let __thunderid_browser = require("@thunderid/browser");
@@ -71,6 +71,8 @@ const richTextClass = __emotion_css.css`
 /**
 * Get the appropriate FieldType for an input component.
 */
+/** Upper bound on STACK grid slots, so a mistyped `items` cannot render thousands of cells. */
+const MAX_STACK_ITEMS = 12;
 const getFieldType = (variant) => {
 	switch (variant) {
 		case __thunderid_browser.EmbeddedFlowComponentType.EmailInput: return __thunderid_browser.FieldType.Email;
@@ -237,7 +239,7 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 								approved: !isDeny,
 								name: e.name
 							})), ...p.optional.map((e) => ({
-								approved: isDeny ? false : formValues[require_ConsentCheckboxList.getConsentOptionalKey(p.purposeId, e.name)] !== "false",
+								approved: !isDeny && formValues[require_ConsentCheckboxList.getConsentOptionalKey(p.purposeId, e.name)] === "true",
 								name: e.name
 							}))],
 							purposeName: p.purposeName
@@ -472,7 +474,21 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			const gap = component.gap ?? 2;
 			const align = component.align || "center";
 			const justify = component.justify || "flex-start";
-			const stackStyle = {
+			const rawItems = component.items;
+			const parsedItems = typeof rawItems === "string" ? Number(rawItems) : typeof rawItems === "number" ? rawItems : NaN;
+			const items = Number.isFinite(parsedItems) && Math.floor(parsedItems) >= 2 ? Math.min(Math.floor(parsedItems), MAX_STACK_ITEMS) : null;
+			const isColumn = direction.startsWith("column");
+			const gridJustify = component.justify ?? "stretch";
+			const track = gridJustify === "stretch" ? "1fr" : "auto";
+			const stackStyle = items !== null ? {
+				alignItems: component.align ?? "stretch",
+				display: "grid",
+				gap: `${gap * .5}rem`,
+				gridAutoFlow: isColumn ? "column" : "row",
+				justifyContent: gridJustify,
+				width: "100%",
+				...isColumn ? { gridTemplateRows: `repeat(${items}, ${track})` } : { gridTemplateColumns: `repeat(${items}, ${track})` }
+			} : {
 				alignItems: align,
 				display: "flex",
 				flexDirection: direction,
@@ -497,7 +513,10 @@ const createAuthComponentFromFlow = (component, formValues, touchedFields, formE
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Consent.default, {
 				consentData: consentPromptRawData,
 				formValues,
-				onInputChange
+				onInputChange,
+				config: component.config,
+				meta: options.meta,
+				t: options.t
 			}, key);
 		}
 		case __thunderid_browser.EmbeddedFlowComponentType.Timer: {