@thunderid/react 0.1.0 → 0.3.0

package/dist/cjs/components/actions/SignOutButton/SignOutButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignOutButton.cjs","names":["SignOutButton: ForwardRefExoticComponent<SignOutButtonProps & RefAttributes<HTMLButtonElement>>","useThunderID","useTranslation","ThunderIDRuntimeError","BaseSignOutButton"],"sources":["../../../../../src/components/actions/SignOutButton/SignOutButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {ThunderIDRuntimeError} from '@thunderid/browser';\nimport {forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';\nimport BaseSignOutButton, {BaseSignOutButtonProps} from './BaseSignOutButton';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../hooks/useTranslation';\n\n/**\n * Props interface of {@link SignOutButton}\n */\nexport type SignOutButtonProps = BaseSignOutButtonProps;\n\n/**\n * SignOutButton component that supports both render props and traditional props patterns.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example Using render props pattern\n * ```tsx\n * <SignOutButton>\n *   {({signOut, isLoading}) => (\n *     <button onClick={signOut} disabled={isLoading}>\n *       {isLoading ? 'Signing out...' : 'Sign Out'}\n *     </button>\n *   )}\n * </SignOutButton>\n * ```\n *\n * @example Using traditional props pattern\n * ```tsx\n * <SignOutButton className=\"custom-button\">Sign Out</SignOutButton>\n * ```\n *\n * @example Using component-level preferences\n * ```tsx\n * <SignOutButton\n *   preferences={{\n *     i18n: {\n *       bundles: {\n *         'en-US': {\n *           translations: {\n *             'buttons.signOut': 'Custom Sign Out Text'\n *           }\n *         }\n *       }\n *     }\n *   }}\n * >\n *   Custom Sign Out\n * </SignOutButton>\n * ```\n */\nconst SignOutButton: ForwardRefExoticComponent<SignOutButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  SignOutButtonProps\n>(({children, onClick, preferences, ...rest}: SignOutButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {\n  const {signOut, meta} = useThunderID();\n  const {t} = useTranslation(preferences?.i18n);\n\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleSignOut = async (e?: MouseEvent<HTMLButtonElement>): Promise<void> => {\n    try {\n      setIsLoading(true);\n\n      await signOut();\n\n      if (onClick) {\n        onClick(e!);\n      }\n    } catch (error) {\n      throw new ThunderIDRuntimeError(\n        `Sign out failed: ${error instanceof Error ? error.message : String(error)}`,\n        'SignOutButton-handleSignOut-RuntimeError-001',\n        'react',\n        'Something went wrong while trying to sign out. Please try again later.',\n      );\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <BaseSignOutButton\n      ref={ref}\n      onClick={handleSignOut}\n      isLoading={isLoading}\n      meta={meta}\n      signOut={handleSignOut}\n      preferences={preferences}\n      {...rest}\n    >\n      {children ?? t('elements.buttons.signout.text')}\n    </BaseSignOutButton>\n  );\n});\n\nSignOutButton.displayName = 'SignOutButton';\n\nexport default SignOutButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAMA,uCAGH,EAAC,UAAU,SAAS,YAAa,GAAG,QAA2B,QAA8C;CAC9G,MAAM,EAAC,SAAS,SAAQC,8BAAc;CACtC,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAE7C,MAAM,CAAC,WAAW,oCAAyB,MAAM;CAEjD,MAAM,gBAAgB,OAAO,MAAqD;AAChF,MAAI;AACF,gBAAa,KAAK;AAElB,SAAM,SAAS;AAEf,OAAI,QACF,SAAQ,EAAG;WAEN,OAAO;AACd,SAAM,IAAIC,0CACR,oBAAoB,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,IAC1E,gDACA,SACA,yEACD;YACO;AACR,gBAAa,MAAM;;;AAIvB,QACE,2CAACC;EACM;EACL,SAAS;EACE;EACL;EACN,SAAS;EACI;EACb,GAAI;YAEH,YAAY,EAAE,gCAAgC;GAC7B;EAEtB;AAEF,cAAc,cAAc;AAE5B,4BAAe"}

package/dist/cjs/components/actions/SignUpButton/BaseSignUpButton.cjs

@@ -0,0 +1,56 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_Button = require('../../primitives/Button/Button.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/actions/SignUpButton/BaseSignUpButton.tsx
+/**
+* Base SignUpButton component that supports both render props and traditional props patterns.
+*
+* @example Using render props
+* ```tsx
+* <BaseSignUpButton>
+*   {({ signUp, isLoading }) => (
+*     <button onClick={signUp} disabled={isLoading}>
+*       {isLoading ? 'Creating account...' : 'Create Account'}
+*     </button>
+*   )}
+* </BaseSignUpButton>
+* ```
+*
+* @example Using traditional props
+* ```tsx
+* <BaseSignUpButton className="custom-button">Create Account</BaseSignUpButton>
+* ```
+*/
+const BaseSignUpButton = (0, react.forwardRef)(({ children, className, style, signUp, isLoading, meta, preferences,...rest }, ref) => {
+	if (typeof children === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
+		isLoading,
+		meta,
+		signUp
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+		ref,
+		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("sign-up-button"), className),
+		style,
+		disabled: isLoading,
+		loading: isLoading,
+		type: "button",
+		color: "primary",
+		variant: "solid",
+		...rest,
+		children
+	});
+});
+BaseSignUpButton.displayName = "BaseSignUpButton";
+var BaseSignUpButton_default = BaseSignUpButton;
+
+//#endregion
+exports.default = BaseSignUpButton_default;
+//# sourceMappingURL=BaseSignUpButton.cjs.map

package/dist/cjs/components/actions/SignUpButton/BaseSignUpButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSignUpButton.cjs","names":["BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAttributes<HTMLButtonElement>>","Button"],"sources":["../../../../../src/components/actions/SignUpButton/BaseSignUpButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {FlowMetadataResponse, WithPreferences, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {\n  forwardRef,\n  ForwardRefExoticComponent,\n  ButtonHTMLAttributes,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n} from 'react';\nimport Button from '../../primitives/Button/Button';\n\n/**\n * Common props shared by all {@link BaseSignUpButton} components.\n */\nexport interface CommonBaseSignUpButtonProps {\n  /**\n   * Loading state during sign-up process\n   */\n  isLoading?: boolean;\n  /**\n   * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n   */\n  meta?: FlowMetadataResponse | null;\n  /**\n   * Function to initiate the sign-up process\n   */\n  signUp?: () => Promise<void>;\n}\n\n/**\n * Props passed to the render function of {@link BaseSignUpButton}\n */\nexport type BaseSignUpButtonRenderProps = CommonBaseSignUpButtonProps;\n\n/**\n * Props interface of {@link BaseSignUpButton}\n */\nexport interface BaseSignUpButtonProps\n  extends CommonBaseSignUpButtonProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n    WithPreferences {\n  /**\n   * Render prop function that receives sign-up props, or traditional ReactNode children\n   */\n  children?: ((props: BaseSignUpButtonRenderProps) => ReactNode) | ReactNode;\n}\n\n/**\n * Base SignUpButton component that supports both render props and traditional props patterns.\n *\n * @example Using render props\n * ```tsx\n * <BaseSignUpButton>\n *   {({ signUp, isLoading }) => (\n *     <button onClick={signUp} disabled={isLoading}>\n *       {isLoading ? 'Creating account...' : 'Create Account'}\n *     </button>\n *   )}\n * </BaseSignUpButton>\n * ```\n *\n * @example Using traditional props\n * ```tsx\n * <BaseSignUpButton className=\"custom-button\">Create Account</BaseSignUpButton>\n * ```\n */\nconst BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAttributes<HTMLButtonElement>> =\n  forwardRef<HTMLButtonElement, BaseSignUpButtonProps>(\n    (\n      {children, className, style, signUp, isLoading, meta, preferences, ...rest}: BaseSignUpButtonProps,\n      ref: Ref<HTMLButtonElement>,\n    ): ReactElement => {\n      if (typeof children === 'function') {\n        return <>{children({isLoading, meta, signUp})}</>;\n      }\n\n      return (\n        <Button\n          ref={ref}\n          className={cx(withVendorCSSClassPrefix('sign-up-button'), className)}\n          style={style}\n          disabled={isLoading}\n          loading={isLoading}\n          type=\"button\"\n          color=\"primary\"\n          variant=\"solid\"\n          {...rest}\n        >\n          {children}\n        </Button>\n      );\n    },\n  );\n\nBaseSignUpButton.displayName = 'BaseSignUpButton';\n\nexport default BaseSignUpButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,MAAMA,0CAGA,EAAC,UAAU,WAAW,OAAO,QAAQ,WAAW,MAAM,YAAa,GAAG,QACtE,QACiB;AACjB,KAAI,OAAO,aAAa,WACtB,QAAO,mFAAG,SAAS;EAAC;EAAW;EAAM;EAAO,CAAC,GAAI;AAGnD,QACE,2CAACC;EACM;EACL,mFAAuC,iBAAiB,EAAE,UAAU;EAC7D;EACP,UAAU;EACV,SAAS;EACT,MAAK;EACL,OAAM;EACN,SAAQ;EACR,GAAI;EAEH;GACM;EAGd;AAEH,iBAAiB,cAAc;AAE/B,+BAAe"}

package/dist/cjs/components/actions/SignUpButton/SignUpButton.cjs

@@ -0,0 +1,86 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useThunderID = require('../../../contexts/ThunderID/useThunderID.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_BaseSignUpButton = require('./BaseSignUpButton.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/actions/SignUpButton/SignUpButton.tsx
+/**
+* SignUpButton component that supports both render props and traditional props patterns.
+* It redirects the user to the ThunderID sign-up page configured for the application.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example Using render props pattern
+* ```tsx
+* <SignUpButton>
+*   {({ signUp, isLoading }) => (
+*     <button onClick={signUp} disabled={isLoading}>
+*       {isLoading ? 'Creating Account...' : 'Create Account'}
+*     </button>
+*   )}
+* </SignUpButton>
+* ```
+*
+* @example Using traditional props pattern
+* ```tsx
+* <SignUpButton className="custom-button">Create Account</SignUpButton>
+* ```
+*
+* @example Using component-level preferences
+* ```tsx
+* <SignUpButton
+*   preferences={{
+*     i18n: {
+*       bundles: {
+*         'en-US': {
+*           translations: {
+*             'buttons.signUp': 'Custom Sign Up Text'
+*           }
+*         }
+*       }
+*     }
+*   }}
+* >
+*   Custom Sign Up
+* </SignUpButton>
+* ```
+*/
+const SignUpButton = (0, react.forwardRef)(({ children, onClick, preferences,...rest }, ref) => {
+	const { signUp, signUpUrl, meta } = require_useThunderID.default();
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const [isLoading, setIsLoading] = (0, react.useState)(false);
+	const handleSignUp = async (e) => {
+		try {
+			setIsLoading(true);
+			if (signUpUrl) (0, __thunderid_browser.navigate)(signUpUrl);
+			else await signUp();
+			if (onClick) onClick(e);
+		} catch (error) {
+			throw new __thunderid_browser.ThunderIDRuntimeError(`Sign up failed: ${error instanceof Error ? error.message : String(error)}`, "SignUpButton-handleSignUp-RuntimeError-001", "react", "Something went wrong while trying to sign up. Please try again later.");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseSignUpButton.default, {
+		ref,
+		onClick: handleSignUp,
+		isLoading,
+		meta,
+		signUp: handleSignUp,
+		preferences,
+		...rest,
+		children: children ?? t("elements.buttons.signup.text")
+	});
+});
+SignUpButton.displayName = "SignUpButton";
+var SignUpButton_default = SignUpButton;
+
+//#endregion
+exports.default = SignUpButton_default;
+//# sourceMappingURL=SignUpButton.cjs.map

package/dist/cjs/components/actions/SignUpButton/SignUpButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignUpButton.cjs","names":["SignUpButton: ForwardRefExoticComponent<SignUpButtonProps & RefAttributes<HTMLButtonElement>>","useThunderID","useTranslation","ThunderIDRuntimeError","BaseSignUpButton"],"sources":["../../../../../src/components/actions/SignUpButton/SignUpButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {ThunderIDRuntimeError, navigate} from '@thunderid/browser';\nimport {forwardRef, ForwardRefExoticComponent, MouseEvent, ReactElement, Ref, RefAttributes, useState} from 'react';\nimport BaseSignUpButton, {BaseSignUpButtonProps} from './BaseSignUpButton';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../hooks/useTranslation';\n\n/**\n * Props interface of {@link SignUpButton}\n */\nexport type SignUpButtonProps = BaseSignUpButtonProps;\n\n/**\n * SignUpButton component that supports both render props and traditional props patterns.\n * It redirects the user to the ThunderID sign-up page configured for the application.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example Using render props pattern\n * ```tsx\n * <SignUpButton>\n *   {({ signUp, isLoading }) => (\n *     <button onClick={signUp} disabled={isLoading}>\n *       {isLoading ? 'Creating Account...' : 'Create Account'}\n *     </button>\n *   )}\n * </SignUpButton>\n * ```\n *\n * @example Using traditional props pattern\n * ```tsx\n * <SignUpButton className=\"custom-button\">Create Account</SignUpButton>\n * ```\n *\n * @example Using component-level preferences\n * ```tsx\n * <SignUpButton\n *   preferences={{\n *     i18n: {\n *       bundles: {\n *         'en-US': {\n *           translations: {\n *             'buttons.signUp': 'Custom Sign Up Text'\n *           }\n *         }\n *       }\n *     }\n *   }}\n * >\n *   Custom Sign Up\n * </SignUpButton>\n * ```\n */\nconst SignUpButton: ForwardRefExoticComponent<SignUpButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  SignUpButtonProps\n>(({children, onClick, preferences, ...rest}: SignUpButtonProps, ref: Ref<HTMLButtonElement>): ReactElement => {\n  const {signUp, signUpUrl, meta} = useThunderID();\n  const {t} = useTranslation(preferences?.i18n);\n\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleSignUp = async (e?: MouseEvent<HTMLButtonElement>): Promise<void> => {\n    try {\n      setIsLoading(true);\n\n      // If a custom `signUpUrl` is provided, use it for navigation.\n      if (signUpUrl) {\n        navigate(signUpUrl);\n      } else {\n        await signUp();\n      }\n\n      if (onClick) {\n        onClick(e!);\n      }\n    } catch (error) {\n      throw new ThunderIDRuntimeError(\n        `Sign up failed: ${error instanceof Error ? error.message : String(error)}`,\n        'SignUpButton-handleSignUp-RuntimeError-001',\n        'react',\n        'Something went wrong while trying to sign up. Please try again later.',\n      );\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <BaseSignUpButton\n      ref={ref}\n      onClick={handleSignUp}\n      isLoading={isLoading}\n      meta={meta}\n      signUp={handleSignUp}\n      preferences={preferences}\n      {...rest}\n    >\n      {children ?? t('elements.buttons.signup.text')}\n    </BaseSignUpButton>\n  );\n});\n\nSignUpButton.displayName = 'SignUpButton';\n\nexport default SignUpButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,MAAMA,sCAGH,EAAC,UAAU,SAAS,YAAa,GAAG,QAA0B,QAA8C;CAC7G,MAAM,EAAC,QAAQ,WAAW,SAAQC,8BAAc;CAChD,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAE7C,MAAM,CAAC,WAAW,oCAAyB,MAAM;CAEjD,MAAM,eAAe,OAAO,MAAqD;AAC/E,MAAI;AACF,gBAAa,KAAK;AAGlB,OAAI,UACF,mCAAS,UAAU;OAEnB,OAAM,QAAQ;AAGhB,OAAI,QACF,SAAQ,EAAG;WAEN,OAAO;AACd,SAAM,IAAIC,0CACR,mBAAmB,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,IACzE,8CACA,SACA,wEACD;YACO;AACR,gBAAa,MAAM;;;AAIvB,QACE,2CAACC;EACM;EACL,SAAS;EACE;EACL;EACN,QAAQ;EACK;EACb,GAAI;YAEH,YAAY,EAAE,+BAA+B;GAC7B;EAErB;AAEF,aAAa,cAAc;AAE3B,2BAAe"}

package/dist/cjs/components/adapters/CheckboxInput.cjs

@@ -0,0 +1,30 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_FieldFactory = require('../factories/FieldFactory.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+
+//#region src/components/adapters/CheckboxInput.tsx
+/**
+* Checkbox input component for sign-up forms.
+*/
+const CheckboxInput = ({ component, formValues, touchedFields, formErrors, onInputChange, inputClassName }) => {
+	const config = component.config || {};
+	const fieldName = config["identifier"] || config["name"] || component.id;
+	const value = formValues[fieldName] || false;
+	return require_FieldFactory.createField({
+		className: inputClassName,
+		error: touchedFields[fieldName] ? formErrors[fieldName] : void 0,
+		label: config["label"] || "",
+		name: fieldName,
+		onChange: (newValue) => onInputChange(fieldName, newValue),
+		placeholder: config["placeholder"] || "",
+		required: config["required"] || false,
+		type: __thunderid_browser.FieldType.Checkbox,
+		value
+	});
+};
+var CheckboxInput_default = CheckboxInput;
+
+//#endregion
+exports.default = CheckboxInput_default;
+//# sourceMappingURL=CheckboxInput.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxInput.cjs","names":["CheckboxInput: FC<AdapterProps>","config: Record<string, unknown>","fieldName: string","value: string | boolean","createField","FieldType"],"sources":["../../../../src/components/adapters/CheckboxInput.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {FieldType} from '@thunderid/browser';\nimport {FC} from 'react';\nimport {AdapterProps} from '../../models/adapters';\nimport {createField} from '../factories/FieldFactory';\n\n/**\n * Checkbox input component for sign-up forms.\n */\nconst CheckboxInput: FC<AdapterProps> = ({\n  component,\n  formValues,\n  touchedFields,\n  formErrors,\n  onInputChange,\n  inputClassName,\n}: AdapterProps) => {\n  const config: Record<string, unknown> = component.config || {};\n  const fieldName: string = (config['identifier'] as string) || (config['name'] as string) || component.id;\n  const value: string | boolean = formValues[fieldName] || false;\n  const error: string | undefined = touchedFields[fieldName] ? formErrors[fieldName] : undefined;\n\n  return createField({\n    className: inputClassName,\n    error,\n    label: (config['label'] as string) || '',\n    name: fieldName,\n    onChange: (newValue: string) => onInputChange(fieldName, newValue),\n    placeholder: (config['placeholder'] as string) || '',\n    required: (config['required'] as boolean) || false,\n    type: FieldType.Checkbox,\n    value: value as string,\n  });\n};\n\nexport default CheckboxInput;\n"],"mappings":";;;;;;;;;AA0BA,MAAMA,iBAAmC,EACvC,WACA,YACA,eACA,YACA,eACA,qBACkB;CAClB,MAAMC,SAAkC,UAAU,UAAU,EAAE;CAC9D,MAAMC,YAAqB,OAAO,iBAA6B,OAAO,WAAsB,UAAU;CACtG,MAAMC,QAA0B,WAAW,cAAc;AAGzD,QAAOC,iCAAY;EACjB,WAAW;EACX,OAJgC,cAAc,aAAa,WAAW,aAAa;EAKnF,OAAQ,OAAO,YAAuB;EACtC,MAAM;EACN,WAAW,aAAqB,cAAc,WAAW,SAAS;EAClE,aAAc,OAAO,kBAA6B;EAClD,UAAW,OAAO,eAA2B;EAC7C,MAAMC,8BAAU;EACT;EACR,CAAC;;AAGJ,4BAAe"}

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

@@ -0,0 +1,69 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../primitives/Typography/Typography.cjs');
+const require_ConsentCheckboxList = require('./ConsentCheckboxList.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/adapters/Consent.tsx
+/**
+* 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 }) => {
+	if (!consentData) return null;
+	let purposes = [];
+	try {
+		const parsed = typeof consentData === "string" ? JSON.parse(consentData) : consentData;
+		purposes = Array.isArray(parsed) ? parsed : parsed.purposes || [];
+	} catch (e) {
+		return null;
+	}
+	if (purposes.length === 0) return null;
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
+		formValues,
+		onInputChange,
+		purposes
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "1rem",
+			marginTop: "0.25rem"
+		},
+		children: purposes.map((purpose, purposeIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			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"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConsentCheckboxList.default, {
+					variant: "ESSENTIAL",
+					purpose,
+					formValues,
+					onInputChange
+				})]
+			}), 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"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConsentCheckboxList.default, {
+					variant: "OPTIONAL",
+					purpose,
+					formValues,
+					onInputChange
+				})]
+			})]
+		}, purpose.purposeId || purposeIndex))
+	});
+};
+var Consent_default = Consent;
+
+//#endregion
+exports.default = Consent_default;
+//# sourceMappingURL=Consent.cjs.map

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

@@ -0,0 +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 ConsentPurposeDataV2 as 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"}

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

@@ -0,0 +1,81 @@
+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_Divider = require('../primitives/Divider/Divider.cjs');
+const require_ConsentCheckboxList_styles = require('./ConsentCheckboxList.styles.cjs');
+const require_Toggle = require('../primitives/Toggle/Toggle.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);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/adapters/ConsentCheckboxList.tsx
+/**
+* Computes the form value key for tracking an optional attribute's consent state.
+*
+* @param purposeId - The ID of the consent purpose.
+* @param attrName - The name of the attribute.
+* @returns A stable form key string.
+*/
+const getConsentOptionalKey = (purposeId, attrName) => `__consent_opt__${purposeId}__${attrName}`;
+/**
+* Renders a list of consent attribute checkboxes.
+*
+* - ESSENTIAL variant: renders read-only checked checkboxes for required attributes.
+* - OPTIONAL variant: renders toggleable checkboxes for optional attributes.
+*   Opt-in is the default when no prior form value exists.
+*/
+const ConsentCheckboxList = ({ variant, purpose, formValues, onInputChange, children }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_ConsentCheckboxList_styles.default(theme, colorScheme);
+	const attributes = (variant === "ESSENTIAL" ? purpose.essential : purpose.optional).map((e) => e.name);
+	if (!attributes || attributes.length === 0) return null;
+	const isEssential = variant === "ESSENTIAL";
+	const isChecked = (attrName) => {
+		if (isEssential) return true;
+		return formValues[getConsentOptionalKey(purpose.purposeId, attrName)] !== "false";
+	};
+	const handleChange = (attrName, checked) => {
+		onInputChange(getConsentOptionalKey(purpose.purposeId, attrName), checked ? "true" : "false");
+	};
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
+		attributes,
+		handleChange,
+		isChecked,
+		variant
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list")), styles["listContainer"]),
+		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", {
+				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", {
+					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"]),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "bullet")), styles["bullet"]) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+							variant: "body2",
+							className: (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, {
+						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);
+		})
+	});
+};
+var ConsentCheckboxList_default = ConsentCheckboxList;
+
+//#endregion
+exports.default = ConsentCheckboxList_default;
+exports.getConsentOptionalKey = getConsentOptionalKey;
+//# sourceMappingURL=ConsentCheckboxList.cjs.map

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

@@ -0,0 +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 ConsentPurposeDataV2 as 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"}

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

@@ -0,0 +1,46 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/adapters/ConsentCheckboxList.styles.ts
+const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => ({
+	bullet: __emotion_css.css`
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        background-color: #9e9e9e;
+        flex-shrink: 0;
+      `,
+	divider: __emotion_css.css`
+        opacity: 0.5;
+        margin: 0.25rem 0;
+      `,
+	labelContainer: __emotion_css.css`
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+      `,
+	listContainer: __emotion_css.css`
+        display: flex;
+        flex-direction: column;
+      `,
+	listItem: __emotion_css.css`
+        padding: 0 0.25rem;
+      `,
+	listRow: __emotion_css.css`
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.125rem 0;
+      `,
+	typography: __emotion_css.css`
+        margin: 0;
+      `
+}), [theme, colorScheme]);
+var ConsentCheckboxList_styles_default = useStyles;
+
+//#endregion
+exports.default = ConsentCheckboxList_styles_default;
+//# sourceMappingURL=ConsentCheckboxList.styles.cjs.map

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

@@ -0,0 +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"}

package/dist/cjs/components/adapters/DateInput.cjs

@@ -0,0 +1,30 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_FieldFactory = require('../factories/FieldFactory.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+
+//#region src/components/adapters/DateInput.tsx
+/**
+* Date input component for sign-up forms.
+*/
+const DateInput = ({ component, formValues, touchedFields, formErrors, onInputChange, inputClassName }) => {
+	const config = component.config || {};
+	const fieldName = config["identifier"] || config["name"] || component.id;
+	const value = formValues[fieldName] || "";
+	return require_FieldFactory.createField({
+		className: inputClassName,
+		error: touchedFields[fieldName] ? formErrors[fieldName] : void 0,
+		label: config["label"] || "",
+		name: fieldName,
+		onChange: (newValue) => onInputChange(fieldName, newValue),
+		placeholder: config["placeholder"] || "",
+		required: config["required"] || false,
+		type: __thunderid_browser.FieldType.Date,
+		value
+	});
+};
+var DateInput_default = DateInput;
+
+//#endregion
+exports.default = DateInput_default;
+//# sourceMappingURL=DateInput.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.cjs","names":["DateInput: FC<AdapterProps>","config: Record<string, unknown>","fieldName: string","value: string","createField","FieldType"],"sources":["../../../../src/components/adapters/DateInput.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {FieldType} from '@thunderid/browser';\nimport {FC} from 'react';\nimport {AdapterProps} from '../../models/adapters';\nimport {createField} from '../factories/FieldFactory';\n\n/**\n * Date input component for sign-up forms.\n */\nconst DateInput: FC<AdapterProps> = ({\n  component,\n  formValues,\n  touchedFields,\n  formErrors,\n  onInputChange,\n  inputClassName,\n}: AdapterProps) => {\n  const config: Record<string, unknown> = component.config || {};\n  const fieldName: string = (config['identifier'] as string) || (config['name'] as string) || component.id;\n  const value: string = formValues[fieldName] || '';\n  const error: string | undefined = touchedFields[fieldName] ? formErrors[fieldName] : undefined;\n\n  return createField({\n    className: inputClassName,\n    error,\n    label: (config['label'] as string) || '',\n    name: fieldName,\n    onChange: (newValue: string) => onInputChange(fieldName, newValue),\n    placeholder: (config['placeholder'] as string) || '',\n    required: (config['required'] as boolean) || false,\n    type: FieldType.Date,\n    value,\n  });\n};\n\nexport default DateInput;\n"],"mappings":";;;;;;;;;AA0BA,MAAMA,aAA+B,EACnC,WACA,YACA,eACA,YACA,eACA,qBACkB;CAClB,MAAMC,SAAkC,UAAU,UAAU,EAAE;CAC9D,MAAMC,YAAqB,OAAO,iBAA6B,OAAO,WAAsB,UAAU;CACtG,MAAMC,QAAgB,WAAW,cAAc;AAG/C,QAAOC,iCAAY;EACjB,WAAW;EACX,OAJgC,cAAc,aAAa,WAAW,aAAa;EAKnF,OAAQ,OAAO,YAAuB;EACtC,MAAM;EACN,WAAW,aAAqB,cAAc,WAAW,SAAS;EAClE,aAAc,OAAO,kBAA6B;EAClD,UAAW,OAAO,eAA2B;EAC7C,MAAMC,8BAAU;EAChB;EACD,CAAC;;AAGJ,wBAAe"}

package/dist/cjs/components/adapters/DividerComponent.cjs

@@ -0,0 +1,24 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_useTheme = require('../../contexts/Theme/useTheme.cjs');
+const require_Divider = require('../primitives/Divider/Divider.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/adapters/DividerComponent.tsx
+/**
+* Divider component for sign-up forms.
+*/
+const DividerComponent = ({ component }) => {
+	const { theme } = require_useTheme.default();
+	const text = (component.config || {})["text"] || "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Divider.default, {
+		orientation: (component.variant?.toLowerCase() || "horizontal") === "vertical" ? "vertical" : "horizontal",
+		style: { margin: `calc(${theme.vars.spacing.unit} * 2) 0` },
+		children: text
+	}, component.id);
+};
+var DividerComponent_default = DividerComponent;
+
+//#endregion
+exports.default = DividerComponent_default;
+//# sourceMappingURL=DividerComponent.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DividerComponent.cjs","names":["DividerComponent: FC<AdapterProps>","useTheme","text: string","Divider"],"sources":["../../../../src/components/adapters/DividerComponent.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {FC} from 'react';\nimport useTheme from '../../contexts/Theme/useTheme';\nimport {AdapterProps} from '../../models/adapters';\nimport Divider from '../primitives/Divider/Divider';\n\n/**\n * Divider component for sign-up forms.\n */\nconst DividerComponent: FC<AdapterProps> = ({component}: AdapterProps) => {\n  const {theme} = useTheme();\n  const config: Record<string, unknown> = component.config || {};\n  const text: string = (config['text'] as string) || '';\n  const variant: string = component.variant?.toLowerCase() || 'horizontal';\n\n  return (\n    <Divider\n      key={component.id}\n      orientation={variant === 'vertical' ? 'vertical' : 'horizontal'}\n      style={{margin: `calc(${theme.vars.spacing.unit} * 2) 0`}}\n    >\n      {text}\n    </Divider>\n  );\n};\n\nexport default DividerComponent;\n"],"mappings":";;;;;;;;;;AA0BA,MAAMA,oBAAsC,EAAC,gBAA6B;CACxE,MAAM,EAAC,UAASC,0BAAU;CAE1B,MAAMC,QADkC,UAAU,UAAU,EAAE,EACjC,WAAsB;AAGnD,QACE,2CAACC;EAEC,cALoB,UAAU,SAAS,aAAa,IAAI,kBAK/B,aAAa,aAAa;EACnD,OAAO,EAAC,QAAQ,QAAQ,MAAM,KAAK,QAAQ,KAAK,UAAS;YAExD;IAJI,UAAU,GAKP;;AAId,+BAAe"}

package/dist/cjs/components/adapters/EmailInput.cjs

@@ -0,0 +1,30 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_FieldFactory = require('../factories/FieldFactory.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+
+//#region src/components/adapters/EmailInput.tsx
+/**
+* Email input component for sign-up forms.
+*/
+const EmailInput = ({ component, formValues, touchedFields, formErrors, onInputChange, inputClassName }) => {
+	const config = component.config || {};
+	const fieldName = config["identifier"] || config["name"] || component.id;
+	const value = formValues[fieldName] || "";
+	return require_FieldFactory.createField({
+		className: inputClassName,
+		error: touchedFields[fieldName] ? formErrors[fieldName] : void 0,
+		label: config["label"] || "Email",
+		name: fieldName,
+		onChange: (newValue) => onInputChange(fieldName, newValue),
+		placeholder: config["placeholder"] || "Enter your email",
+		required: config["required"] || false,
+		type: __thunderid_browser.FieldType.Email,
+		value
+	});
+};
+var EmailInput_default = EmailInput;
+
+//#endregion
+exports.default = EmailInput_default;
+//# sourceMappingURL=EmailInput.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.cjs","names":["EmailInput: FC<AdapterProps>","config: Record<string, unknown>","fieldName: string","value: string","createField","FieldType"],"sources":["../../../../src/components/adapters/EmailInput.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {FieldType} from '@thunderid/browser';\nimport {FC} from 'react';\nimport {AdapterProps} from '../../models/adapters';\nimport {createField} from '../factories/FieldFactory';\n\n/**\n * Email input component for sign-up forms.\n */\nconst EmailInput: FC<AdapterProps> = ({\n  component,\n  formValues,\n  touchedFields,\n  formErrors,\n  onInputChange,\n  inputClassName,\n}: AdapterProps) => {\n  const config: Record<string, unknown> = component.config || {};\n  const fieldName: string = (config['identifier'] as string) || (config['name'] as string) || component.id;\n  const value: string = formValues[fieldName] || '';\n  const error: string | undefined = touchedFields[fieldName] ? formErrors[fieldName] : undefined;\n\n  return createField({\n    className: inputClassName,\n    error,\n    label: (config['label'] as string) || 'Email',\n    name: fieldName,\n    onChange: (newValue: string) => onInputChange(fieldName, newValue),\n    placeholder: (config['placeholder'] as string) || 'Enter your email',\n    required: (config['required'] as boolean) || false,\n    type: FieldType.Email,\n    value,\n  });\n};\n\nexport default EmailInput;\n"],"mappings":";;;;;;;;;AA0BA,MAAMA,cAAgC,EACpC,WACA,YACA,eACA,YACA,eACA,qBACkB;CAClB,MAAMC,SAAkC,UAAU,UAAU,EAAE;CAC9D,MAAMC,YAAqB,OAAO,iBAA6B,OAAO,WAAsB,UAAU;CACtG,MAAMC,QAAgB,WAAW,cAAc;AAG/C,QAAOC,iCAAY;EACjB,WAAW;EACX,OAJgC,cAAc,aAAa,WAAW,aAAa;EAKnF,OAAQ,OAAO,YAAuB;EACtC,MAAM;EACN,WAAW,aAAqB,cAAc,WAAW,SAAS;EAClE,aAAc,OAAO,kBAA6B;EAClD,UAAW,OAAO,eAA2B;EAC7C,MAAMC,8BAAU;EAChB;EACD,CAAC;;AAGJ,yBAAe"}

package/dist/cjs/components/adapters/FacebookButton.cjs

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_useTranslation = require('../../hooks/useTranslation.cjs');
+const require_Button = require('../primitives/Button/Button.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/adapters/FacebookButton.tsx
+/**
+* Facebook Sign-In Button Component.
+* Handles authentication with Facebook identity provider.
+*/
+const FacebookButton = ({ isLoading, preferences, children,...rest }) => {
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+		...rest,
+		fullWidth: true,
+		type: "button",
+		color: "primary",
+		variant: "solid",
+		disabled: isLoading,
+		startIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			width: "18",
+			height: "18",
+			viewBox: "0 0 512 512",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				fill: "#1976D2",
+				d: "M448,0H64C28.704,0,0,28.704,0,64v384c0,35.296,28.704,64,64,64h384c35.296,0,64-28.704,64-64V64C512,28.704,483.296,0,448,0z"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				fill: "#FAFAFA",
+				d: "M432,256h-80v-64c0-17.664,14.336-16,32-16h32V96h-64l0,0c-53.024,0-96,42.976-96,96v64h-64v80h64v176h96V336h48L432,256z"
+			})]
+		}),
+		children: children ?? t("elements.buttons.facebook.text")
+	});
+};
+var FacebookButton_default = FacebookButton;
+
+//#endregion
+exports.default = FacebookButton_default;
+//# sourceMappingURL=FacebookButton.cjs.map