@thunderid/react 0.1.0 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Consent.js","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,0CAAG,SAAS;EAAC;EAAY;EAAyB;EAAS,CAAC,GAAI;AAGzE,QACE,oBAAC;EAAI,OAAO;GAAC,SAAS;GAAQ,eAAe;GAAU,KAAK;GAAQ,WAAW;GAAU;YACtF,SAAS,KAAK,SAA6B,iBAC1C,qBAAC;GAA4C,OAAO,EAAC,eAAe,QAAO;cASxE,QAAQ,aAAa,QAAQ,UAAU,SAAS,KAC/C,qBAAC;IAAI,OAAO,EAAC,WAAW,UAAS;eAC/B,oBAACC;KAAW,SAAQ;KAAY,YAAW;eAAO;MAErC,EACb,oBAACC;KACC,SAAQ;KACC;KACG;KACG;MACf;KACE,EAGP,QAAQ,YAAY,QAAQ,SAAS,SAAS,KAC7C,qBAAC;IAAI,OAAO,EAAC,WAAW,UAAS;eAC/B,oBAACD;KAAW,SAAQ;KAAY,YAAW;eACxC,QAAQ,SAAS,gBAAgB,gBAAgB;MACvC,EACb,oBAACC;KACC,SAAQ;KACC;KACG;KACG;MACf;KACE;KAlCA,QAAQ,aAAa,aAoCzB,CACN;GACE;;AAIV,sBAAe"}

package/dist/components/adapters/ConsentCheckboxList.js

@@ -0,0 +1,76 @@
+import useTheme_default from "../../contexts/Theme/useTheme.js";
+import Typography_default from "../primitives/Typography/Typography.js";
+import Divider_default from "../primitives/Divider/Divider.js";
+import ConsentCheckboxList_styles_default from "./ConsentCheckboxList.styles.js";
+import Toggle_default from "../primitives/Toggle/Toggle.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@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 } = useTheme_default();
+	const styles = 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__ */ jsx(Fragment, { children: children({
+		attributes,
+		handleChange,
+		isChecked,
+		variant
+	}) });
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(withVendorCSSClassPrefix(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__ */ jsxs("div", {
+				className: cx(withVendorCSSClassPrefix(bem("consent-checkbox-list", "item")), styles["listItem"]),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cx(withVendorCSSClassPrefix(bem("consent-checkbox-list", "row")), styles["listRow"]),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cx(withVendorCSSClassPrefix(bem("consent-checkbox-list", "label-container")), styles["labelContainer"]),
+						children: [/* @__PURE__ */ jsx("div", { className: cx(withVendorCSSClassPrefix(bem("consent-checkbox-list", "bullet")), styles["bullet"]) }), /* @__PURE__ */ jsx(Typography_default, {
+							variant: "body2",
+							className: cx(withVendorCSSClassPrefix(bem("consent-checkbox-list", "typography")), styles["typography"]),
+							children: attr
+						})]
+					}), /* @__PURE__ */ jsx(Toggle_default, {
+						id: inputId,
+						checked,
+						disabled: isEssential,
+						onChange: isEssential ? void 0 : (e) => handleChange(attr, e.target.checked)
+					})]
+				}), /* @__PURE__ */ jsx(Divider_default, { className: cx(withVendorCSSClassPrefix(bem("consent-checkbox-list", "divider")), styles["divider"]) })]
+			}, attr);
+		})
+	});
+};
+var ConsentCheckboxList_default = ConsentCheckboxList;
+
+//#endregion
+export { ConsentCheckboxList_default as default, getConsentOptionalKey };
+//# sourceMappingURL=ConsentCheckboxList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentCheckboxList.js","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,kBAAU;CACpE,MAAMC,SAAiCC,mCAAU,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,0CAAG,SAAS;EAAC;EAAY;EAAc;EAAW;EAAQ,CAAC,GAAI;AAGxE,QACE,oBAAC;EAAI,WAAW,GAAG,yBAAyB,IAAI,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,qBAAC;IAEC,WAAW,GAAG,yBAAyB,IAAI,yBAAyB,OAAO,CAAC,EAAE,OAAO,YAAY;eAEjG,qBAAC;KAAI,WAAW,GAAG,yBAAyB,IAAI,yBAAyB,MAAM,CAAC,EAAE,OAAO,WAAW;gBAClG,qBAAC;MACC,WAAW,GACT,yBAAyB,IAAI,yBAAyB,kBAAkB,CAAC,EACzE,OAAO,kBACR;iBAED,oBAAC,SACC,WAAW,GAAG,yBAAyB,IAAI,yBAAyB,SAAS,CAAC,EAAE,OAAO,UAAU,GACjG,EACF,oBAACC;OACC,SAAQ;OACR,WAAW,GACT,yBAAyB,IAAI,yBAAyB,aAAa,CAAC,EACpE,OAAO,cACR;iBAEA;QACU;OACT,EACN,oBAACC;MACC,IAAI;MACK;MACT,UAAU;MACV,UACE,cACI,UACC,MAA2C,aAAa,MAAM,EAAE,OAAO,QAAQ;OAEtF;MACE,EACN,oBAACC,mBACC,WAAW,GAAG,yBAAyB,IAAI,yBAAyB,UAAU,CAAC,EAAE,OAAO,WAAW,GACnG;MApCG,KAqCD;IAER;GACE;;AAIV,kCAAe"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentCheckboxList.styles.js","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,gBAC/B,eACS;CACL,QAAQ,GAAG;;;;;;;CAOX,SAAS,GAAG;;;;CAIZ,gBAAgB,GAAG;;;;;CAKnB,eAAe,GAAG;;;;CAIlB,UAAU,GAAG;;;CAGb,SAAS,GAAG;;;;;;CAMZ,YAAY,GAAG;;;CAGhB,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,yCAAe"}

package/dist/components/adapters/DateInput.js

@@ -0,0 +1,28 @@
+import { createField } from "../factories/FieldFactory.js";
+import { FieldType } from "@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 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: FieldType.Date,
+		value
+	});
+};
+var DateInput_default = DateInput;
+
+//#endregion
+export { DateInput_default as default };
+//# sourceMappingURL=DateInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","names":["DateInput: FC<AdapterProps>","config: Record<string, unknown>","fieldName: string","value: string"],"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,QAAO,YAAY;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,MAAM,UAAU;EAChB;EACD,CAAC;;AAGJ,wBAAe"}

package/dist/components/adapters/DividerComponent.js

@@ -0,0 +1,22 @@
+import useTheme_default from "../../contexts/Theme/useTheme.js";
+import Divider_default from "../primitives/Divider/Divider.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/adapters/DividerComponent.tsx
+/**
+* Divider component for sign-up forms.
+*/
+const DividerComponent = ({ component }) => {
+	const { theme } = useTheme_default();
+	const text = (component.config || {})["text"] || "";
+	return /* @__PURE__ */ jsx(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
+export { DividerComponent_default as default };
+//# sourceMappingURL=DividerComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DividerComponent.js","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,kBAAU;CAE1B,MAAMC,QADkC,UAAU,UAAU,EAAE,EACjC,WAAsB;AAGnD,QACE,oBAACC;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/components/adapters/EmailInput.js

@@ -0,0 +1,28 @@
+import { createField } from "../factories/FieldFactory.js";
+import { FieldType } from "@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 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: FieldType.Email,
+		value
+	});
+};
+var EmailInput_default = EmailInput;
+
+//#endregion
+export { EmailInput_default as default };
+//# sourceMappingURL=EmailInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.js","names":["EmailInput: FC<AdapterProps>","config: Record<string, unknown>","fieldName: string","value: string"],"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,QAAO,YAAY;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,MAAM,UAAU;EAChB;EACD,CAAC;;AAGJ,yBAAe"}

package/dist/components/adapters/FacebookButton.js

@@ -0,0 +1,39 @@
+import useTranslation_default from "../../hooks/useTranslation.js";
+import Button_default from "../primitives/Button/Button.js";
+import { jsx, jsxs } from "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 } = useTranslation_default(preferences?.i18n);
+	return /* @__PURE__ */ jsx(Button_default, {
+		...rest,
+		fullWidth: true,
+		type: "button",
+		color: "primary",
+		variant: "solid",
+		disabled: isLoading,
+		startIcon: /* @__PURE__ */ jsxs("svg", {
+			width: "18",
+			height: "18",
+			viewBox: "0 0 512 512",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ 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__ */ 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
+export { FacebookButton_default as default };
+//# sourceMappingURL=FacebookButton.js.map

package/dist/components/adapters/FacebookButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacebookButton.js","names":["FacebookButton: FC<FacebookButtonProps & HTMLAttributes<HTMLButtonElement>>","useTranslation","Button"],"sources":["../../../src/components/adapters/FacebookButton.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 {WithPreferences} from '@thunderid/browser';\nimport {FC, HTMLAttributes} from 'react';\nimport useTranslation from '../../hooks/useTranslation';\nimport Button from '../primitives/Button/Button';\n\nexport interface FacebookButtonProps extends WithPreferences {\n  /**\n   * Whether the component is in loading state.\n   */\n  isLoading?: boolean;\n}\n\n/**\n * Facebook Sign-In Button Component.\n * Handles authentication with Facebook identity provider.\n */\nconst FacebookButton: FC<FacebookButtonProps & HTMLAttributes<HTMLButtonElement>> = ({\n  isLoading,\n  preferences,\n  children,\n  ...rest\n}: FacebookButtonProps & HTMLAttributes<HTMLButtonElement>) => {\n  const {t} = useTranslation(preferences?.i18n);\n\n  return (\n    <Button\n      {...rest}\n      fullWidth\n      type=\"button\"\n      color=\"primary\"\n      variant=\"solid\"\n      disabled={isLoading}\n      startIcon={\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            fill=\"#1976D2\"\n            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\"\n          />\n          <path\n            fill=\"#FAFAFA\"\n            d=\"M432,256h-80v-64c0-17.664,14.336-16,32-16h32V96h-64l0,0c-53.024,0-96,42.976-96,96v64h-64v80h64v176h96V336h48L432,256z\"\n          />\n        </svg>\n      }\n    >\n      {children ?? t('elements.buttons.facebook.text')}\n    </Button>\n  );\n};\n\nexport default FacebookButton;\n"],"mappings":";;;;;;;;;AAkCA,MAAMA,kBAA+E,EACnF,WACA,aACA,SACA,GAAG,WAC0D;CAC7D,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;AAE7C,QACE,oBAACC;EACC,GAAI;EACJ;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,UAAU;EACV,WACE,qBAAC;GAAI,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAc,OAAM;cACtD,oBAAC;IACC,MAAK;IACL,GAAE;KACF,EACF,oBAAC;IACC,MAAK;IACL,GAAE;KACF;IACE;YAGP,YAAY,EAAE,iCAAiC;GACzC;;AAIb,6BAAe"}

package/dist/components/adapters/FlowTimer.js

@@ -0,0 +1,49 @@
+import Typography_default from "../primitives/Typography/Typography.js";
+import { useEffect, useState } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/adapters/FlowTimer.tsx
+/**
+* Flow countdown timer component.
+*
+* Displays a countdown from the given number of seconds. When the time expires,
+* shows "Timed out". Returns null if expiresIn <= 0.
+*/
+const FlowTimer = ({ expiresIn = 0, textTemplate = "Time remaining: {time}", children }) => {
+	const [remaining, setRemaining] = useState(expiresIn > 0 ? expiresIn : 0);
+	useEffect(() => {
+		if (expiresIn <= 0) return;
+		setRemaining(expiresIn);
+		const interval = setInterval(() => {
+			setRemaining((prev) => {
+				if (prev <= 1) {
+					clearInterval(interval);
+					return 0;
+				}
+				return prev - 1;
+			});
+		}, 1e3);
+		return () => clearInterval(interval);
+	}, [expiresIn]);
+	if (expiresIn <= 0) return null;
+	const formatTime = (seconds) => {
+		if (seconds <= 0) return "Timed out";
+		return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, "0")}`;
+	};
+	const isExpired = remaining <= 0;
+	const formattedTime = formatTime(remaining);
+	if (children) return /* @__PURE__ */ jsx(Fragment, { children: children({
+		formattedTime,
+		isExpired,
+		remaining
+	}) });
+	return /* @__PURE__ */ jsx(Typography_default, {
+		variant: "body2",
+		children: isExpired ? "Timed out" : textTemplate.replace("{time}", formattedTime)
+	});
+};
+var FlowTimer_default = FlowTimer;
+
+//#endregion
+export { FlowTimer_default as default };
+//# sourceMappingURL=FlowTimer.js.map

package/dist/components/adapters/FlowTimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowTimer.js","names":["FlowTimer: FC<FlowTimerProps>","interval: NodeJS.Timeout","isExpired: boolean","formattedTime: string","Typography"],"sources":["../../../src/components/adapters/FlowTimer.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 {FC, ReactNode, useEffect, useState} from 'react';\nimport Typography from '../primitives/Typography/Typography';\n\n/**\n * Render props exposed by FlowTimer when using the render-prop pattern.\n */\nexport interface FlowTimerRenderProps {\n  /** Human-readable formatted time string (e.g. \"2:30\" or \"Timed out\"). */\n  formattedTime: string;\n  /** Whether the timer has expired. */\n  isExpired: boolean;\n  /** Remaining time in seconds. 0 when expired. */\n  remaining: number;\n}\n\n/**\n * Props for the FlowTimer component.\n */\nexport interface FlowTimerProps {\n  /**\n   * Render-props callback. When provided, the default countdown display is replaced\n   * with whatever JSX the callback returns.\n   *\n   * @example\n   * ```tsx\n   * <FlowTimer expiresIn={300}>\n   *   {({ remaining, isExpired, formattedTime }) => (\n   *     <span style={{ color: isExpired ? 'red' : 'inherit' }}>\n   *       {isExpired ? 'Session expired' : `Time left: ${formattedTime}`}\n   *     </span>\n   *   )}\n   * </FlowTimer>\n   * ```\n   */\n  children?: (props: FlowTimerRenderProps) => ReactNode;\n  /** Initial number of seconds for the countdown. 0 or negative means no timer. */\n  expiresIn?: number;\n  /** Text template for the countdown display. Use {time} as a placeholder. */\n  textTemplate?: string;\n}\n\n/**\n * Flow countdown timer component.\n *\n * Displays a countdown from the given number of seconds. When the time expires,\n * shows \"Timed out\". Returns null if expiresIn <= 0.\n */\nconst FlowTimer: FC<FlowTimerProps> = ({\n  expiresIn = 0,\n  textTemplate = 'Time remaining: {time}',\n  children,\n}: FlowTimerProps) => {\n  const [remaining, setRemaining] = useState<number>(expiresIn > 0 ? expiresIn : 0);\n\n  useEffect(() => {\n    if (expiresIn <= 0) {\n      return undefined;\n    }\n\n    setRemaining(expiresIn);\n\n    const interval: NodeJS.Timeout = setInterval(() => {\n      setRemaining((prev: number) => {\n        if (prev <= 1) {\n          clearInterval(interval);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [expiresIn]);\n\n  if (expiresIn <= 0) {\n    return null;\n  }\n\n  const formatTime = (seconds: number): string => {\n    if (seconds <= 0) {\n      return 'Timed out';\n    }\n    const m: number = Math.floor(seconds / 60);\n    const s: number = seconds % 60;\n    return `${m}:${s.toString().padStart(2, '0')}`;\n  };\n\n  const isExpired: boolean = remaining <= 0;\n  const formattedTime: string = formatTime(remaining);\n\n  if (children) {\n    return <>{children({formattedTime, isExpired, remaining})}</>;\n  }\n\n  const displayText: string = isExpired ? 'Timed out' : textTemplate.replace('{time}', formattedTime);\n\n  return <Typography variant=\"body2\">{displayText}</Typography>;\n};\n\nexport default FlowTimer;\n"],"mappings":";;;;;;;;;;;AAiEA,MAAMA,aAAiC,EACrC,YAAY,GACZ,eAAe,0BACf,eACoB;CACpB,MAAM,CAAC,WAAW,gBAAgB,SAAiB,YAAY,IAAI,YAAY,EAAE;AAEjF,iBAAgB;AACd,MAAI,aAAa,EACf;AAGF,eAAa,UAAU;EAEvB,MAAMC,WAA2B,kBAAkB;AACjD,iBAAc,SAAiB;AAC7B,QAAI,QAAQ,GAAG;AACb,mBAAc,SAAS;AACvB,YAAO;;AAET,WAAO,OAAO;KACd;KACD,IAAK;AAER,eAAa,cAAc,SAAS;IACnC,CAAC,UAAU,CAAC;AAEf,KAAI,aAAa,EACf,QAAO;CAGT,MAAM,cAAc,YAA4B;AAC9C,MAAI,WAAW,EACb,QAAO;AAIT,SAAO,GAFW,KAAK,MAAM,UAAU,GAAG,CAE9B,IADM,UAAU,IACX,UAAU,CAAC,SAAS,GAAG,IAAI;;CAG9C,MAAMC,YAAqB,aAAa;CACxC,MAAMC,gBAAwB,WAAW,UAAU;AAEnD,KAAI,SACF,QAAO,0CAAG,SAAS;EAAC;EAAe;EAAW;EAAU,CAAC,GAAI;AAK/D,QAAO,oBAACC;EAAW,SAAQ;YAFC,YAAY,cAAc,aAAa,QAAQ,UAAU,cAAc;GAEtC;;AAG/D,wBAAe"}

package/dist/components/adapters/FormContainer.js

@@ -0,0 +1,34 @@
+import { createSignUpComponent } from "../presentation/auth/SignUp/v1/SignUpOptionFactory.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/adapters/FormContainer.tsx
+/**
+* Form container component that renders child components.
+*/
+const FormContainer = (props) => {
+	const { component } = props;
+	if (component.components && component.components.length > 0) {
+		const handleFormSubmit = (e) => {
+			e.preventDefault();
+			const submitButton = component.components?.find((child) => child.type === "BUTTON" && (child.variant === "PRIMARY" || child.variant === "SECONDARY" || child.config?.type === "submit"));
+			if (submitButton && props.onSubmit) props.onSubmit(submitButton, props.formValues);
+		};
+		return /* @__PURE__ */ jsx("form", {
+			onSubmit: handleFormSubmit,
+			style: {
+				display: "flex",
+				flexDirection: "column"
+			},
+			children: component.components.map((childComponent) => createSignUpComponent({
+				...props,
+				component: childComponent
+			}))
+		}, component.id);
+	}
+	return /* @__PURE__ */ jsx("div", {}, component.id);
+};
+var FormContainer_default = FormContainer;
+
+//#endregion
+export { FormContainer_default as default };
+//# sourceMappingURL=FormContainer.js.map

package/dist/components/adapters/FormContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormContainer.js","names":["FormContainer: FC<AdapterProps>","handleFormSubmit: (e: FormEvent) => void","submitButton: any"],"sources":["../../../src/components/adapters/FormContainer.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, FormEvent} from 'react';\nimport {AdapterProps} from '../../models/adapters';\n// eslint-disable-next-line import/no-cycle\nimport {createSignUpComponent} from '../presentation/auth/SignUp/v1/SignUpOptionFactory';\n\n/**\n * Form container component that renders child components.\n */\nconst FormContainer: FC<AdapterProps> = (props: AdapterProps) => {\n  const {component} = props;\n\n  // If the form has child components, render them wrapped in a form element\n  if (component.components && component.components.length > 0) {\n    const handleFormSubmit: (e: FormEvent) => void = (e: FormEvent): void => {\n      e.preventDefault();\n\n      // Find submit button in child components and trigger its submission\n      const submitButton: any = component.components?.find(\n        (child: any) =>\n          child.type === 'BUTTON' &&\n          (child.variant === 'PRIMARY' || child.variant === 'SECONDARY' || child.config?.type === 'submit'),\n      );\n\n      if (submitButton && props.onSubmit) {\n        props.onSubmit(submitButton, props.formValues);\n      }\n    };\n\n    return (\n      <form key={component.id} onSubmit={handleFormSubmit} style={{display: 'flex', flexDirection: 'column'}}>\n        {component.components.map((childComponent: any) =>\n          createSignUpComponent({\n            ...props,\n            component: childComponent,\n          }),\n        )}\n      </form>\n    );\n  }\n\n  // Empty form container\n  return <div key={component.id} />;\n};\n\nexport default FormContainer;\n"],"mappings":";;;;;;;AA0BA,MAAMA,iBAAmC,UAAwB;CAC/D,MAAM,EAAC,cAAa;AAGpB,KAAI,UAAU,cAAc,UAAU,WAAW,SAAS,GAAG;EAC3D,MAAMC,oBAA4C,MAAuB;AACvE,KAAE,gBAAgB;GAGlB,MAAMC,eAAoB,UAAU,YAAY,MAC7C,UACC,MAAM,SAAS,aACd,MAAM,YAAY,aAAa,MAAM,YAAY,eAAe,MAAM,QAAQ,SAAS,UAC3F;AAED,OAAI,gBAAgB,MAAM,SACxB,OAAM,SAAS,cAAc,MAAM,WAAW;;AAIlD,SACE,oBAAC;GAAwB,UAAU;GAAkB,OAAO;IAAC,SAAS;IAAQ,eAAe;IAAS;aACnG,UAAU,WAAW,KAAK,mBACzB,sBAAsB;IACpB,GAAG;IACH,WAAW;IACZ,CAAC,CACH;KANQ,UAAU,GAOd;;AAKX,QAAO,oBAAC,WAAS,UAAU,GAAM;;AAGnC,4BAAe"}

package/dist/components/adapters/GitHubButton.js

@@ -0,0 +1,39 @@
+import useTranslation_default from "../../hooks/useTranslation.js";
+import Button_default from "../primitives/Button/Button.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/adapters/GitHubButton.tsx
+/**
+* GitHub Sign-In Button Component.
+* Handles authentication with GitHub identity provider.
+*/
+const GitHubButton = ({ isLoading, preferences, children,...rest }) => {
+	const { t } = useTranslation_default(preferences?.i18n);
+	return /* @__PURE__ */ jsx(Button_default, {
+		...rest,
+		fullWidth: true,
+		type: "button",
+		color: "secondary",
+		variant: "solid",
+		disabled: isLoading,
+		startIcon: /* @__PURE__ */ jsx("svg", {
+			width: "18",
+			height: "18",
+			viewBox: "0 0 67.91 66.233",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: /* @__PURE__ */ jsx("g", {
+				transform: "translate(-386.96 658.072)",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M420.915-658.072a33.956,33.956,0,0,0-33.955,33.955,33.963,33.963,0,0,0,23.221,32.22c1.7.314,2.32-.737,2.32-1.633,0-.81-.031-3.484-.046-6.322-9.446,2.054-11.44-4.006-11.44-4.006-1.545-3.925-3.77-4.968-3.77-4.968-3.081-2.107.232-2.064.232-2.064,3.41.239,5.205,3.5,5.205,3.5,3.028,5.19,7.943,3.69,9.881,2.822a7.23,7.23,0,0,1,2.156-4.54c-7.542-.859-15.47-3.77-15.47-16.781a13.141,13.141,0,0,1,3.5-9.114,12.2,12.2,0,0,1,.329-8.986s2.851-.913,9.34,3.48a32.545,32.545,0,0,1,8.5-1.143,32.629,32.629,0,0,1,8.506,1.143c6.481-4.393,9.328-3.48,9.328-3.48a12.185,12.185,0,0,1,.333,8.986,13.115,13.115,0,0,1,3.495,9.114c0,13.042-7.943,15.913-15.5,16.754,1.218,1.054,2.3,3.12,2.3,6.288,0,4.543-.039,8.2-.039,9.318,0,.9.611,1.962,2.332,1.629a33.959,33.959,0,0,0,23.2-32.215,33.955,33.955,0,0,0-33.955-33.955",
+					fill: "#ffffff"
+				})
+			})
+		}),
+		children: children ?? t("elements.buttons.github.text")
+	});
+};
+var GitHubButton_default = GitHubButton;
+
+//#endregion
+export { GitHubButton_default as default };
+//# sourceMappingURL=GitHubButton.js.map

package/dist/components/adapters/GitHubButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GitHubButton.js","names":["GitHubButton: FC<GithubButtonProps & HTMLAttributes<HTMLButtonElement>>","useTranslation","Button"],"sources":["../../../src/components/adapters/GitHubButton.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 {WithPreferences} from '@thunderid/browser';\nimport {FC, HTMLAttributes} from 'react';\nimport useTranslation from '../../hooks/useTranslation';\nimport Button from '../primitives/Button/Button';\n\nexport interface GithubButtonProps extends WithPreferences {\n  /**\n   * Whether the component is in loading state.\n   */\n  isLoading?: boolean;\n}\n\n/**\n * GitHub Sign-In Button Component.\n * Handles authentication with GitHub identity provider.\n */\nconst GitHubButton: FC<GithubButtonProps & HTMLAttributes<HTMLButtonElement>> = ({\n  isLoading,\n  preferences,\n  children,\n  ...rest\n}: GithubButtonProps & HTMLAttributes<HTMLButtonElement>) => {\n  const {t} = useTranslation(preferences?.i18n);\n\n  return (\n    <Button\n      {...rest}\n      fullWidth\n      type=\"button\"\n      color=\"secondary\"\n      variant=\"solid\"\n      disabled={isLoading}\n      startIcon={\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 67.91 66.233\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g transform=\"translate(-386.96 658.072)\">\n            <path\n              d=\"M420.915-658.072a33.956,33.956,0,0,0-33.955,33.955,33.963,33.963,0,0,0,23.221,32.22c1.7.314,2.32-.737,2.32-1.633,0-.81-.031-3.484-.046-6.322-9.446,2.054-11.44-4.006-11.44-4.006-1.545-3.925-3.77-4.968-3.77-4.968-3.081-2.107.232-2.064.232-2.064,3.41.239,5.205,3.5,5.205,3.5,3.028,5.19,7.943,3.69,9.881,2.822a7.23,7.23,0,0,1,2.156-4.54c-7.542-.859-15.47-3.77-15.47-16.781a13.141,13.141,0,0,1,3.5-9.114,12.2,12.2,0,0,1,.329-8.986s2.851-.913,9.34,3.48a32.545,32.545,0,0,1,8.5-1.143,32.629,32.629,0,0,1,8.506,1.143c6.481-4.393,9.328-3.48,9.328-3.48a12.185,12.185,0,0,1,.333,8.986,13.115,13.115,0,0,1,3.495,9.114c0,13.042-7.943,15.913-15.5,16.754,1.218,1.054,2.3,3.12,2.3,6.288,0,4.543-.039,8.2-.039,9.318,0,.9.611,1.962,2.332,1.629a33.959,33.959,0,0,0,23.2-32.215,33.955,33.955,0,0,0-33.955-33.955\"\n              fill=\"#ffffff\"\n            />\n          </g>\n        </svg>\n      }\n    >\n      {children ?? t('elements.buttons.github.text')}\n    </Button>\n  );\n};\n\nexport default GitHubButton;\n"],"mappings":";;;;;;;;;AAkCA,MAAMA,gBAA2E,EAC/E,WACA,aACA,SACA,GAAG,WACwD;CAC3D,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;AAE7C,QACE,oBAACC;EACC,GAAI;EACJ;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,UAAU;EACV,WACE,oBAAC;GAAI,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAmB,OAAM;aAC3D,oBAAC;IAAE,WAAU;cACX,oBAAC;KACC,GAAE;KACF,MAAK;MACL;KACA;IACA;YAGP,YAAY,EAAE,+BAA+B;GACvC;;AAIb,2BAAe"}

package/dist/components/adapters/GoogleButton.js

@@ -0,0 +1,57 @@
+import useTranslation_default from "../../hooks/useTranslation.js";
+import Button_default from "../primitives/Button/Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/adapters/GoogleButton.tsx
+/**
+* Google Sign-In Button Component.
+* Handles authentication with Google identity provider.
+*/
+const GoogleButton = ({ isLoading, preferences, children,...rest }) => {
+	const { t } = useTranslation_default(preferences?.i18n);
+	return /* @__PURE__ */ jsx(Button_default, {
+		...rest,
+		fullWidth: true,
+		type: "button",
+		color: "secondary",
+		variant: "solid",
+		disabled: isLoading,
+		startIcon: /* @__PURE__ */ jsx("svg", {
+			width: "18",
+			height: "18",
+			viewBox: "0 0 67.91 67.901",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: /* @__PURE__ */ jsxs("g", {
+				transform: "translate(-0.001 -0.001)",
+				children: [
+					/* @__PURE__ */ jsx("path", {
+						d: "M15.049,160.965l-2.364,8.824-8.639.183a34.011,34.011,0,0,1-.25-31.7h0l7.691,1.41,3.369,7.645a20.262,20.262,0,0,0,.19,13.642Z",
+						transform: "translate(0 -119.93)",
+						fill: "#fbbb00"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M294.24,208.176A33.939,33.939,0,0,1,282.137,241h0l-9.687-.494-1.371-8.559a20.235,20.235,0,0,0,8.706-10.333H261.628V208.176Z",
+						transform: "translate(-226.93 -180.567)",
+						fill: "#518ef8"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M81.668,328.8h0a33.962,33.962,0,0,1-51.161-10.387l11-9.006a20.192,20.192,0,0,0,29.1,10.338Z",
+						transform: "translate(-26.463 -268.374)",
+						fill: "#28b446"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M80.451,7.816l-11,9A20.19,20.19,0,0,0,39.686,27.393l-11.06-9.055h0A33.959,33.959,0,0,1,80.451,7.816Z",
+						transform: "translate(-24.828)",
+						fill: "#f14336"
+					})
+				]
+			})
+		}),
+		children: children ?? t("elements.buttons.google.text")
+	});
+};
+var GoogleButton_default = GoogleButton;
+
+//#endregion
+export { GoogleButton_default as default };
+//# sourceMappingURL=GoogleButton.js.map

package/dist/components/adapters/GoogleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoogleButton.js","names":["GoogleButton: FC<GoogleButtonProps & HTMLAttributes<HTMLButtonElement>>","useTranslation","Button"],"sources":["../../../src/components/adapters/GoogleButton.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 {WithPreferences} from '@thunderid/browser';\nimport {FC, HTMLAttributes} from 'react';\nimport useTranslation from '../../hooks/useTranslation';\nimport Button from '../primitives/Button/Button';\n\nexport interface GoogleButtonProps extends WithPreferences {\n  /**\n   * Whether the component is in loading state.\n   */\n  isLoading?: boolean;\n}\n\n/**\n * Google Sign-In Button Component.\n * Handles authentication with Google identity provider.\n */\nconst GoogleButton: FC<GoogleButtonProps & HTMLAttributes<HTMLButtonElement>> = ({\n  isLoading,\n  preferences,\n  children,\n  ...rest\n}: GoogleButtonProps & HTMLAttributes<HTMLButtonElement>) => {\n  const {t} = useTranslation(preferences?.i18n);\n\n  return (\n    <Button\n      {...rest}\n      fullWidth\n      type=\"button\"\n      color=\"secondary\"\n      variant=\"solid\"\n      disabled={isLoading}\n      startIcon={\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 67.91 67.901\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g transform=\"translate(-0.001 -0.001)\">\n            <path\n              d=\"M15.049,160.965l-2.364,8.824-8.639.183a34.011,34.011,0,0,1-.25-31.7h0l7.691,1.41,3.369,7.645a20.262,20.262,0,0,0,.19,13.642Z\"\n              transform=\"translate(0 -119.93)\"\n              fill=\"#fbbb00\"\n            />\n            <path\n              d=\"M294.24,208.176A33.939,33.939,0,0,1,282.137,241h0l-9.687-.494-1.371-8.559a20.235,20.235,0,0,0,8.706-10.333H261.628V208.176Z\"\n              transform=\"translate(-226.93 -180.567)\"\n              fill=\"#518ef8\"\n            />\n            <path\n              d=\"M81.668,328.8h0a33.962,33.962,0,0,1-51.161-10.387l11-9.006a20.192,20.192,0,0,0,29.1,10.338Z\"\n              transform=\"translate(-26.463 -268.374)\"\n              fill=\"#28b446\"\n            />\n            <path\n              d=\"M80.451,7.816l-11,9A20.19,20.19,0,0,0,39.686,27.393l-11.06-9.055h0A33.959,33.959,0,0,1,80.451,7.816Z\"\n              transform=\"translate(-24.828)\"\n              fill=\"#f14336\"\n            />\n          </g>\n        </svg>\n      }\n    >\n      {children ?? t('elements.buttons.google.text')}\n    </Button>\n  );\n};\n\nexport default GoogleButton;\n"],"mappings":";;;;;;;;;AAkCA,MAAMA,gBAA2E,EAC/E,WACA,aACA,SACA,GAAG,WACwD;CAC3D,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;AAE7C,QACE,oBAACC;EACC,GAAI;EACJ;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,UAAU;EACV,WACE,oBAAC;GAAI,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAmB,OAAM;aAC3D,qBAAC;IAAE,WAAU;;KACX,oBAAC;MACC,GAAE;MACF,WAAU;MACV,MAAK;OACL;KACF,oBAAC;MACC,GAAE;MACF,WAAU;MACV,MAAK;OACL;KACF,oBAAC;MACC,GAAE;MACF,WAAU;MACV,MAAK;OACL;KACF,oBAAC;MACC,GAAE;MACF,WAAU;MACV,MAAK;OACL;;KACA;IACA;YAGP,YAAY,EAAE,+BAA+B;GACvC;;AAIb,2BAAe"}

package/dist/components/adapters/ImageComponent.js

@@ -0,0 +1,74 @@
+import useTheme_default from "../../contexts/Theme/useTheme.js";
+import { extractEmojiFromUri, isEmojiUri } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/adapters/ImageComponent.tsx
+const DEFAULT_EMOJI_CONTAINER_HEIGHT = "4em";
+/**
+* Image component for sign-up forms.
+*/
+const ImageComponent = ({ component }) => {
+	const { theme } = useTheme_default();
+	const config = component.config || {};
+	const src = config["src"] || "";
+	const alt = config["alt"] || config["label"] || "Image";
+	const width = config["width"] || "100%";
+	const height = config["height"] || "auto";
+	const variant = component.variant?.toLowerCase() || "image_block";
+	const imageStyle = {
+		borderRadius: theme.vars.borderRadius.small,
+		display: "block",
+		margin: variant === "image_block" ? "1rem auto" : "0"
+	};
+	if (!src) return null;
+	if (isEmojiUri(src)) {
+		const toCSSLength = (value) => /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value;
+		const cssWidth = toCSSLength(width);
+		const cssHeight = toCSSLength(height);
+		const isConcrete = (v) => v !== "auto" && !v.endsWith("%");
+		let containerHeight;
+		if (isConcrete(cssHeight)) containerHeight = cssHeight;
+		else if (isConcrete(cssWidth)) containerHeight = cssWidth;
+		else containerHeight = DEFAULT_EMOJI_CONTAINER_HEIGHT;
+		return /* @__PURE__ */ jsx("div", {
+			style: { textAlign: "center" },
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					...imageStyle,
+					containerType: "size",
+					display: "inline-grid",
+					height: containerHeight,
+					placeItems: "center",
+					width: cssWidth
+				},
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-label": alt,
+					role: "img",
+					style: {
+						fontSize: "100cqmin",
+						lineHeight: 1
+					},
+					children: extractEmojiFromUri(src)
+				})
+			})
+		}, component.id);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		style: { textAlign: "center" },
+		children: /* @__PURE__ */ jsx("img", {
+			src,
+			alt,
+			height,
+			width,
+			style: imageStyle,
+			onError: (e) => {
+				e.currentTarget.style.display = "none";
+			}
+		})
+	}, component.id);
+};
+var ImageComponent_default = ImageComponent;
+
+//#endregion
+export { ImageComponent_default as default };
+//# sourceMappingURL=ImageComponent.js.map