@thunderid/react 1.4.1 → 1.6.0

package/dist/cjs/components/auth/flow/FieldFactory.cjs

@@ -0,0 +1,146 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_Checkbox = require('../../primitives/Checkbox/Checkbox.cjs');
+const require_DatePicker = require('../../primitives/DatePicker/DatePicker.cjs');
+const require_OtpField = require('../../primitives/OtpField/OtpField.cjs');
+const require_TextField = require('../../primitives/TextField/TextField.cjs');
+const require_PasswordField = require('../../primitives/PasswordField/PasswordField.cjs');
+const require_Select = require('../../primitives/Select/Select.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/auth/flow/FieldFactory.tsx
+/**
+* Utility function to validate field values based on type
+*/
+const validateFieldValue = (value, type, required = false, touched = false) => {
+	if (required && touched && (!value || value.trim() === "")) return "This field is required";
+	if (!value || value.trim() === "") return null;
+	switch (type) {
+		case __thunderid_browser.FieldType.Number: {
+			const numValue = parseInt(value, 10);
+			if (Number.isNaN(numValue)) return "Please enter a valid number";
+			break;
+		}
+		default: break;
+	}
+	return null;
+};
+/**
+* Factory function to create form fields based on field type.
+*
+* @param config - The field configuration
+* @returns The appropriate React component for the field type
+*
+* @example
+* ```tsx
+* const field = createField({
+*   param: 'username',
+*   type: FieldType.Text,
+*   label: 'Username',
+*   confidential: false,
+*   required: true,
+*   value: '',
+*   onChange: (value) => console.log(value)
+* });
+* ```
+*/
+const createField = (config) => {
+	const { name, type, label, required, value, onChange, onBlur, disabled = false, error, className, id, options = [], touched = false, placeholder, length, numericOnly = true } = config;
+	const validationError = error || validateFieldValue(value, type, required, touched);
+	const commonProps = {
+		className,
+		"data-testid": `thunderid-signin-${name}`,
+		disabled,
+		error: validationError,
+		id,
+		label,
+		name,
+		onBlur,
+		placeholder,
+		required,
+		value
+	};
+	switch (type) {
+		case __thunderid_browser.FieldType.Password: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PasswordField.default, {
+			...commonProps,
+			onChange
+		});
+		case __thunderid_browser.FieldType.Text: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+			...commonProps,
+			type: "text",
+			onChange: (e) => onChange(e.target.value),
+			autoComplete: "off"
+		});
+		case __thunderid_browser.FieldType.Email: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+			...commonProps,
+			type: "email",
+			onChange: (e) => onChange(e.target.value),
+			autoComplete: "email"
+		});
+		case __thunderid_browser.FieldType.Tel: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+			...commonProps,
+			type: "tel",
+			onChange: (e) => onChange(e.target.value),
+			autoComplete: "tel"
+		});
+		case __thunderid_browser.FieldType.Date: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DatePicker.default, {
+			...commonProps,
+			onChange: (e) => onChange(e.target.value)
+		});
+		case __thunderid_browser.FieldType.Checkbox: {
+			const isChecked = value === "true" || value === true;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.default, {
+				...commonProps,
+				checked: isChecked,
+				onChange: (e) => onChange(e.target.checked.toString())
+			});
+		}
+		case __thunderid_browser.FieldType.Otp: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OtpField.default, {
+			...commonProps,
+			length,
+			type: numericOnly ? "number" : "text",
+			uppercase: !numericOnly,
+			onChange: (e) => onChange(e.target.value)
+		});
+		case __thunderid_browser.FieldType.Number: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+			...commonProps,
+			type: "number",
+			onChange: (e) => onChange(e.target.value),
+			helperText: "Enter a numeric value"
+		});
+		case __thunderid_browser.FieldType.Select: {
+			const fieldOptions = options.length > 0 ? options : [];
+			if (fieldOptions.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.default, {
+				...commonProps,
+				options: fieldOptions,
+				onChange: (e) => onChange(e.target.value),
+				helperText: "Select from available options"
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+				...commonProps,
+				type: "text",
+				onChange: (e) => onChange(e.target.value),
+				helperText: "Enter multiple values separated by commas (e.g., value1, value2, value3)",
+				placeholder: "value1, value2, value3"
+			});
+		}
+		default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+			...commonProps,
+			type: "text",
+			onChange: (e) => onChange(e.target.value),
+			helperText: "Unknown field type, treating as text"
+		});
+	}
+};
+/**
+* React component wrapper for the field factory.
+*/
+const FieldFactory = (props) => createField(props);
+
+//#endregion
+exports.FieldFactory = FieldFactory;
+exports.createField = createField;
+exports.validateFieldValue = validateFieldValue;
+//# sourceMappingURL=FieldFactory.cjs.map

package/dist/cjs/components/auth/flow/FieldFactory.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldFactory.cjs","names":["FieldType","numValue: number","validationError: string | null","commonProps: Record<string, any>","PasswordField","TextField","DatePicker","isChecked: boolean","Checkbox","OtpField","fieldOptions: SelectOption[]","Select","FieldFactory: FC<FieldConfig>"],"sources":["../../../../../src/components/auth/flow/FieldFactory.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FieldType} from '@thunderid/browser';\nimport {ChangeEvent, FC, ReactElement} from 'react';\nimport Checkbox from '../../primitives/Checkbox/Checkbox';\nimport DatePicker from '../../primitives/DatePicker/DatePicker';\nimport OtpField from '../../primitives/OtpField/OtpField';\nimport PasswordField from '../../primitives/PasswordField/PasswordField';\nimport Select, {SelectOption} from '../../primitives/Select/Select';\nimport TextField from '../../primitives/TextField/TextField';\n\n/**\n * Interface for field configuration.\n */\nexport interface FieldConfig {\n  /**\n   * Additional CSS class name.\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display.\n   */\n  error?: string;\n  /**\n   * HTML id to apply to the rendered field.\n   */\n  id?: string;\n  /**\n   * Display name for the field.\n   */\n  label: string;\n  /**\n   * Number of characters for OTP fields.\n   */\n  length?: number;\n  /**\n   * The name of the field.\n   */\n  name: string;\n  /**\n   * Whether an OTP field accepts digits only. Defaults to true.\n   */\n  numericOnly?: boolean;\n  /**\n   * Callback function when the field loses focus.\n   */\n  onBlur?: () => void;\n  /**\n   * Callback function when the field value changes.\n   */\n  onChange: (value: string) => void;\n  /**\n   * Additional options for multi-valued fields.\n   */\n  options?: SelectOption[];\n  /**\n   * Placeholder text for the field.\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required.\n   */\n  required: boolean;\n  /**\n   * Whether the field has been touched/interacted with by the user.\n   */\n  touched?: boolean;\n  /**\n   * The field type.\n   */\n  type: FieldType;\n  /**\n   * Current value of the field.\n   */\n  value: string;\n}\n\n/**\n * Utility function to validate field values based on type\n */\nexport const validateFieldValue = (\n  value: string,\n  type: FieldType,\n  required = false,\n  touched = false,\n): string | null => {\n  if (required && touched && (!value || value.trim() === '')) {\n    return 'This field is required';\n  }\n\n  if (!value || value.trim() === '') {\n    return null;\n  }\n\n  switch (type) {\n    case FieldType.Number: {\n      const numValue: number = parseInt(value, 10);\n      if (Number.isNaN(numValue)) {\n        return 'Please enter a valid number';\n      }\n      break;\n    }\n    default:\n      break;\n  }\n\n  return null;\n};\n\n/**\n * Factory function to create form fields based on field type.\n *\n * @param config - The field configuration\n * @returns The appropriate React component for the field type\n *\n * @example\n * ```tsx\n * const field = createField({\n *   param: 'username',\n *   type: FieldType.Text,\n *   label: 'Username',\n *   confidential: false,\n *   required: true,\n *   value: '',\n *   onChange: (value) => console.log(value)\n * });\n * ```\n */\nexport const createField = (config: FieldConfig): ReactElement => {\n  const {\n    name,\n    type,\n    label,\n    required,\n    value,\n    onChange,\n    onBlur,\n    disabled = false,\n    error,\n    className,\n    id,\n    options = [],\n    touched = false,\n    placeholder,\n    length,\n    numericOnly = true,\n  } = config;\n\n  const validationError: string | null = error || validateFieldValue(value, type, required, touched);\n\n  const commonProps: Record<string, any> = {\n    className,\n    'data-testid': `thunderid-signin-${name}`,\n    disabled,\n    error: validationError,\n    id,\n    label,\n    name,\n    onBlur,\n    placeholder,\n    required,\n    value,\n  };\n\n  switch (type) {\n    case FieldType.Password:\n      return <PasswordField {...commonProps} onChange={onChange} />;\n    case FieldType.Text:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"text\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          autoComplete=\"off\"\n        />\n      );\n    case FieldType.Email:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"email\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          autoComplete=\"email\"\n        />\n      );\n    case FieldType.Tel:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"tel\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          autoComplete=\"tel\"\n        />\n      );\n    case FieldType.Date:\n      return (\n        <DatePicker {...commonProps} onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)} />\n      );\n    case FieldType.Checkbox: {\n      const isChecked: boolean = value === 'true' || (value as any) === true;\n      return (\n        <Checkbox\n          {...commonProps}\n          checked={isChecked}\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.checked.toString())}\n        />\n      );\n    }\n    case FieldType.Otp:\n      return (\n        <OtpField\n          {...commonProps}\n          length={length}\n          type={numericOnly ? 'number' : 'text'}\n          uppercase={!numericOnly}\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n        />\n      );\n    case FieldType.Number:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"number\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          helperText=\"Enter a numeric value\"\n        />\n      );\n    case FieldType.Select: {\n      const fieldOptions: SelectOption[] = options.length > 0 ? options : [];\n\n      if (fieldOptions.length > 0) {\n        return (\n          <Select\n            {...commonProps}\n            options={fieldOptions}\n            onChange={(e: ChangeEvent<HTMLSelectElement>): void => onChange(e.target.value)}\n            helperText=\"Select from available options\"\n          />\n        );\n      }\n\n      return (\n        <TextField\n          {...commonProps}\n          type=\"text\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          helperText=\"Enter multiple values separated by commas (e.g., value1, value2, value3)\"\n          placeholder=\"value1, value2, value3\"\n        />\n      );\n    }\n    default:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"text\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          helperText=\"Unknown field type, treating as text\"\n        />\n      );\n  }\n};\n\n/**\n * React component wrapper for the field factory.\n */\nexport const FieldFactory: FC<FieldConfig> = (props: FieldConfig): ReactElement => createField(props);\n\nexport default FieldFactory;\n"],"mappings":";;;;;;;;;;;;;;;;AAqFA,MAAa,sBACX,OACA,MACA,WAAW,OACX,UAAU,UACQ;AAClB,KAAI,YAAY,YAAY,CAAC,SAAS,MAAM,MAAM,KAAK,IACrD,QAAO;AAGT,KAAI,CAAC,SAAS,MAAM,MAAM,KAAK,GAC7B,QAAO;AAGT,SAAQ,MAAR;EACE,KAAKA,8BAAU,QAAQ;GACrB,MAAMC,WAAmB,SAAS,OAAO,GAAG;AAC5C,OAAI,OAAO,MAAM,SAAS,CACxB,QAAO;AAET;;EAEF,QACE;;AAGJ,QAAO;;;;;;;;;;;;;;;;;;;;;AAsBT,MAAa,eAAe,WAAsC;CAChE,MAAM,EACJ,MACA,MACA,OACA,UACA,OACA,UACA,QACA,WAAW,OACX,OACA,WACA,IACA,UAAU,EAAE,EACZ,UAAU,OACV,aACA,QACA,cAAc,SACZ;CAEJ,MAAMC,kBAAiC,SAAS,mBAAmB,OAAO,MAAM,UAAU,QAAQ;CAElG,MAAMC,cAAmC;EACvC;EACA,eAAe,oBAAoB;EACnC;EACA,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,SAAQ,MAAR;EACE,KAAKH,8BAAU,SACb,QAAO,2CAACI;GAAc,GAAI;GAAuB;IAAY;EAC/D,KAAKJ,8BAAU,KACb,QACE,2CAACK;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAKL,8BAAU,MACb,QACE,2CAACK;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAKL,8BAAU,IACb,QACE,2CAACK;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAKL,8BAAU,KACb,QACE,2CAACM;GAAW,GAAI;GAAa,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAAI;EAEnH,KAAKN,8BAAU,UAAU;GACvB,MAAMO,YAAqB,UAAU,UAAW,UAAkB;AAClE,UACE,2CAACC;IACC,GAAI;IACJ,SAAS;IACT,WAAW,MAA2C,SAAS,EAAE,OAAO,QAAQ,UAAU,CAAC;KAC3F;;EAGN,KAAKR,8BAAU,IACb,QACE,2CAACS;GACC,GAAI;GACI;GACR,MAAM,cAAc,WAAW;GAC/B,WAAW,CAAC;GACZ,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAC9E;EAEN,KAAKT,8BAAU,OACb,QACE,2CAACK;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,YAAW;IACX;EAEN,KAAKL,8BAAU,QAAQ;GACrB,MAAMU,eAA+B,QAAQ,SAAS,IAAI,UAAU,EAAE;AAEtE,OAAI,aAAa,SAAS,EACxB,QACE,2CAACC;IACC,GAAI;IACJ,SAAS;IACT,WAAW,MAA4C,SAAS,EAAE,OAAO,MAAM;IAC/E,YAAW;KACX;AAIN,UACE,2CAACN;IACC,GAAI;IACJ,MAAK;IACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAC9E,YAAW;IACX,aAAY;KACZ;;EAGN,QACE,QACE,2CAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,YAAW;IACX;;;;;;AAQV,MAAaO,gBAAiC,UAAqC,YAAY,MAAM"}

package/dist/cjs/components/auth/flow/FlowTimer.cjs

@@ -0,0 +1,52 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../../primitives/Typography/Typography.cjs');
+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/auth/flow/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] = (0, react.useState)(expiresIn > 0 ? expiresIn : 0);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children({
+		formattedTime,
+		isExpired,
+		remaining
+	}) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+		variant: "body2",
+		children: isExpired ? "Timed out" : textTemplate.replace("{time}", formattedTime)
+	});
+};
+var FlowTimer_default = FlowTimer;
+
+//#endregion
+exports.default = FlowTimer_default;
+//# sourceMappingURL=FlowTimer.cjs.map

package/dist/cjs/components/auth/flow/FlowTimer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowTimer.cjs","names":["FlowTimer: FC<FlowTimerProps>","interval: NodeJS.Timeout","isExpired: boolean","formattedTime: string","Typography"],"sources":["../../../../../src/components/auth/flow/FlowTimer.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\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":";;;;;;;;;;;;;;AAkDA,MAAMA,aAAiC,EACrC,YAAY,GACZ,eAAe,0BACf,eACoB;CACpB,MAAM,CAAC,WAAW,oCAAiC,YAAY,IAAI,YAAY,EAAE;AAEjF,4BAAgB;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,mFAAG,SAAS;EAAC;EAAe;EAAW;EAAU,CAAC,GAAI;AAK/D,QAAO,2CAACC;EAAW,SAAQ;YAFC,YAAY,cAAc,aAAa,QAAQ,UAAU,cAAc;GAEtC;;AAG/D,wBAAe"}

package/dist/cjs/components/auth/flow/ImageComponent.cjs

@@ -0,0 +1,82 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/auth/flow/ImageComponent.tsx
+const DEFAULT_EMOJI_CONTAINER_HEIGHT = "4em";
+/**
+* Image component for sign-up forms.
+*/
+const ImageComponent = ({ component }) => {
+	const { theme } = require_useTheme.default();
+	const centerClass = require_emotion.css({ textAlign: "center" });
+	const emojiGlyphClass = require_emotion.css({
+		fontSize: "100cqmin",
+		lineHeight: 1
+	});
+	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"
+	};
+	const imageClass = require_emotion.css(imageStyle);
+	if (!src) return null;
+	const resolvedIcon = (0, __thunderid_browser.resolveLogoUri)(src, alt);
+	if (resolvedIcon.kind === "emoji") {
+		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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: centerClass,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: require_emotion.css({
+					...imageStyle,
+					containerType: "size",
+					display: "inline-grid",
+					height: containerHeight,
+					placeItems: "center",
+					width: cssWidth
+				}),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-label": alt,
+					role: "img",
+					className: emojiGlyphClass,
+					children: resolvedIcon.glyph
+				})
+			})
+		}, component.id);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: centerClass,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src: resolvedIcon.imgSrc,
+			alt,
+			height,
+			width,
+			className: imageClass,
+			onError: (e) => {
+				e.currentTarget.style.display = "none";
+			}
+		})
+	}, component.id);
+};
+var ImageComponent_default = ImageComponent;
+
+//#endregion
+exports.default = ImageComponent_default;
+//# sourceMappingURL=ImageComponent.cjs.map

package/dist/cjs/components/auth/flow/ImageComponent.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageComponent.cjs","names":["ImageComponent: FC<AdapterProps>","useTheme","centerClass: string","css","emojiGlyphClass: string","config: Record<string, unknown>","src: string","alt: string","width: string","height: string","variant: string","imageClass: string","resolvedIcon: ResolvedLogo","cssWidth: string","cssHeight: string","containerHeight: string"],"sources":["../../../../../src/components/auth/flow/ImageComponent.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC, SyntheticEvent} from 'react';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {AdapterProps} from '../../../models/adapters';\nimport {css} from '../../../styles/emotion';\n\nconst DEFAULT_EMOJI_CONTAINER_HEIGHT = '4em';\n\n/**\n * Image component for sign-up forms.\n */\nconst ImageComponent: FC<AdapterProps> = ({component}: AdapterProps) => {\n  const {theme} = useTheme();\n  // Computed per render (not at module scope): a CSP nonce configured on <ThunderIDProvider>\n  // isn't known until the provider renders, and Emotion needs it applied before any style\n  // insertion happens. These are static, so Emotion's own cache dedupes the repeat calls to a\n  // no-op after the first render — this isn't a real per-render cost.\n  const centerClass: string = css({textAlign: 'center'});\n  const emojiGlyphClass: string = css({fontSize: '100cqmin', lineHeight: 1});\n  const config: Record<string, unknown> = component.config || {};\n  const src: string = (config['src'] as string) || '';\n  const alt: string = (config['alt'] as string) || (config['label'] as string) || 'Image';\n  const width: string = (config['width'] as string) || '100%';\n  const height: string = (config['height'] as string) || 'auto';\n  const variant: string = component.variant?.toLowerCase() || 'image_block';\n\n  const imageStyle = {\n    borderRadius: theme.vars.borderRadius.small,\n    display: 'block',\n    margin: variant === 'image_block' ? '1rem auto' : '0',\n  };\n\n  const imageClass: string = css(imageStyle);\n\n  if (!src) {\n    return null;\n  }\n\n  const resolvedIcon: ResolvedLogo = resolveLogoUri(src, alt);\n\n  if (resolvedIcon.kind === 'emoji') {\n    // Bare numbers (e.g. \"48\") are valid for <img> width/height attributes but\n    // are unit-less and ignored as CSS properties — normalize them to px.\n    const toCSSLength = (value: string): string => (/^\\d+(\\.\\d+)?$/.test(value) ? `${value}px` : value);\n    const cssWidth: string = toCSSLength(width);\n    const cssHeight: string = toCSSLength(height);\n\n    // container-type: size needs a concrete block dimension — percentage and\n    // 'auto' values both collapse to 0 when the parent has no defined height.\n    // Priority: explicit height → explicit width (square) → fallback constant.\n    const isConcrete = (v: string): boolean => v !== 'auto' && !v.endsWith('%');\n    let containerHeight: string;\n    if (isConcrete(cssHeight)) {\n      containerHeight = cssHeight;\n    } else if (isConcrete(cssWidth)) {\n      containerHeight = cssWidth;\n    } else {\n      containerHeight = DEFAULT_EMOJI_CONTAINER_HEIGHT;\n    }\n\n    const emojiContainerClass: string = css({\n      ...imageStyle,\n      containerType: 'size',\n      display: 'inline-grid',\n      height: containerHeight,\n      placeItems: 'center',\n      width: cssWidth,\n    });\n\n    return (\n      <div key={component.id} className={centerClass}>\n        {/*\n         * container-type: size lets the inner span use cqmin (= min(cqw, cqh))\n         * so the emoji font-size tracks the rendered container dimensions\n         * rather than the parent's font-size.\n         */}\n        <span className={emojiContainerClass}>\n          <span aria-label={alt} role=\"img\" className={emojiGlyphClass}>\n            {resolvedIcon.glyph}\n          </span>\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div key={component.id} className={centerClass}>\n      <img\n        src={resolvedIcon.imgSrc}\n        alt={alt}\n        height={height}\n        width={width}\n        className={imageClass}\n        onError={(e: SyntheticEvent<HTMLImageElement>): void => {\n          // Hide broken images\n          e.currentTarget.style.display = 'none';\n        }}\n      />\n    </div>\n  );\n};\n\nexport default ImageComponent;\n"],"mappings":";;;;;;;;;AASA,MAAM,iCAAiC;;;;AAKvC,MAAMA,kBAAoC,EAAC,gBAA6B;CACtE,MAAM,EAAC,UAASC,0BAAU;CAK1B,MAAMC,cAAsBC,oBAAI,EAAC,WAAW,UAAS,CAAC;CACtD,MAAMC,kBAA0BD,oBAAI;EAAC,UAAU;EAAY,YAAY;EAAE,CAAC;CAC1E,MAAME,SAAkC,UAAU,UAAU,EAAE;CAC9D,MAAMC,MAAe,OAAO,UAAqB;CACjD,MAAMC,MAAe,OAAO,UAAsB,OAAO,YAAuB;CAChF,MAAMC,QAAiB,OAAO,YAAuB;CACrD,MAAMC,SAAkB,OAAO,aAAwB;CACvD,MAAMC,UAAkB,UAAU,SAAS,aAAa,IAAI;CAE5D,MAAM,aAAa;EACjB,cAAc,MAAM,KAAK,aAAa;EACtC,SAAS;EACT,QAAQ,YAAY,gBAAgB,cAAc;EACnD;CAED,MAAMC,aAAqBR,oBAAI,WAAW;AAE1C,KAAI,CAAC,IACH,QAAO;CAGT,MAAMS,uDAA4C,KAAK,IAAI;AAE3D,KAAI,aAAa,SAAS,SAAS;EAGjC,MAAM,eAAe,UAA2B,gBAAgB,KAAK,MAAM,GAAG,GAAG,MAAM,MAAM;EAC7F,MAAMC,WAAmB,YAAY,MAAM;EAC3C,MAAMC,YAAoB,YAAY,OAAO;EAK7C,MAAM,cAAc,MAAuB,MAAM,UAAU,CAAC,EAAE,SAAS,IAAI;EAC3E,IAAIC;AACJ,MAAI,WAAW,UAAU,CACvB,mBAAkB;WACT,WAAW,SAAS,CAC7B,mBAAkB;MAElB,mBAAkB;AAYpB,SACE,2CAAC;GAAuB,WAAW;aAMjC,2CAAC;IAAK,WAhB0BZ,oBAAI;KACtC,GAAG;KACH,eAAe;KACf,SAAS;KACT,QAAQ;KACR,YAAY;KACZ,OAAO;KACR,CAAC;cAUI,2CAAC;KAAK,cAAY;KAAK,MAAK;KAAM,WAAW;eAC1C,aAAa;MACT;KACF;KAVC,UAAU,GAWd;;AAIV,QACE,2CAAC;EAAuB,WAAW;YACjC,2CAAC;GACC,KAAK,aAAa;GACb;GACG;GACD;GACP,WAAW;GACX,UAAU,MAA8C;AAEtD,MAAE,cAAc,MAAM,UAAU;;IAElC;IAXM,UAAU,GAYd;;AAIV,6BAAe"}

package/dist/cjs/components/auth/guards/Loading.cjs

@@ -0,0 +1,35 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useThunderID = require('../../../contexts/ThunderID/useThunderID.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/auth/guards/Loading.tsx
+/**
+* A component that only renders its children when the ThunderID is loading.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example
+* ```tsx
+* import { Loading } from '@thunderid/auth-react';
+*
+* const App = () => {
+*   return (
+*     <Loading fallback={<p>Finished Loading...</p>}>
+*       <p>Loading...</p>
+*     </Loading>
+*   );
+* }
+* ```
+*/
+const Loading = ({ children, fallback = null }) => {
+	const { isLoading } = require_useThunderID.default();
+	if (!isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+};
+Loading.displayName = "Loading";
+var Loading_default = Loading;
+
+//#endregion
+exports.default = Loading_default;
+//# sourceMappingURL=Loading.cjs.map

package/dist/cjs/components/auth/guards/Loading.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.cjs","names":["Loading: FC<PropsWithChildren<LoadingProps>>","useThunderID"],"sources":["../../../../../src/components/auth/guards/Loading.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, PropsWithChildren, ReactNode} from 'react';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\n\n/**\n * Props for the Loading component.\n */\nexport interface LoadingProps {\n  /**\n   * Content to show when the user is not signed in.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * A component that only renders its children when the ThunderID is loading.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example\n * ```tsx\n * import { Loading } from '@thunderid/auth-react';\n *\n * const App = () => {\n *   return (\n *     <Loading fallback={<p>Finished Loading...</p>}>\n *       <p>Loading...</p>\n *     </Loading>\n *   );\n * }\n * ```\n */\nconst Loading: FC<PropsWithChildren<LoadingProps>> = ({children, fallback = null}: PropsWithChildren<LoadingProps>) => {\n  const {isLoading} = useThunderID();\n\n  if (!isLoading) {\n    return <>{fallback}</>;\n  }\n\n  return <>{children}</>;\n};\n\nLoading.displayName = 'Loading';\n\nexport default Loading;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,WAAgD,EAAC,UAAU,WAAW,WAA2C;CACrH,MAAM,EAAC,cAAaC,8BAAc;AAElC,KAAI,CAAC,UACH,QAAO,mFAAG,WAAY;AAGxB,QAAO,yEAAG,WAAY;;AAGxB,QAAQ,cAAc;AAEtB,sBAAe"}

package/dist/cjs/components/auth/guards/SignedIn.cjs

@@ -0,0 +1,35 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useThunderID = require('../../../contexts/ThunderID/useThunderID.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/auth/guards/SignedIn.tsx
+/**
+* A component that only renders its children when the user is signed in.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example
+* ```tsx
+* import { SignedIn } from '@thunderid/auth-react';
+*
+* const App = () => {
+*   return (
+*     <SignedIn fallback={<p>Please sign in to continue</p>}>
+*       <p>Welcome! You are signed in.</p>
+*     </SignedIn>
+*   );
+* }
+* ```
+*/
+const SignedIn = ({ children, fallback = null }) => {
+	const { isSignedIn } = require_useThunderID.default();
+	if (!isSignedIn) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+};
+SignedIn.displayName = "SignedIn";
+var SignedIn_default = SignedIn;
+
+//#endregion
+exports.default = SignedIn_default;
+//# sourceMappingURL=SignedIn.cjs.map

package/dist/cjs/components/auth/guards/SignedIn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedIn.cjs","names":["SignedIn: FC<PropsWithChildren<SignedInProps>>","useThunderID"],"sources":["../../../../../src/components/auth/guards/SignedIn.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, PropsWithChildren, ReactNode} from 'react';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\n\n/**\n * Props for the SignedIn component.\n */\nexport interface SignedInProps {\n  /**\n   * Content to show when the user is not signed in.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * A component that only renders its children when the user is signed in.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example\n * ```tsx\n * import { SignedIn } from '@thunderid/auth-react';\n *\n * const App = () => {\n *   return (\n *     <SignedIn fallback={<p>Please sign in to continue</p>}>\n *       <p>Welcome! You are signed in.</p>\n *     </SignedIn>\n *   );\n * }\n * ```\n */\nconst SignedIn: FC<PropsWithChildren<SignedInProps>> = ({\n  children,\n  fallback = null,\n}: PropsWithChildren<SignedInProps>) => {\n  const {isSignedIn} = useThunderID();\n\n  if (!isSignedIn) {\n    return <>{fallback}</>;\n  }\n\n  return <>{children}</>;\n};\n\nSignedIn.displayName = 'SignedIn';\n\nexport default SignedIn;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,YAAkD,EACtD,UACA,WAAW,WAC2B;CACtC,MAAM,EAAC,eAAcC,8BAAc;AAEnC,KAAI,CAAC,WACH,QAAO,mFAAG,WAAY;AAGxB,QAAO,yEAAG,WAAY;;AAGxB,SAAS,cAAc;AAEvB,uBAAe"}

package/dist/cjs/components/auth/guards/SignedOut.cjs

@@ -0,0 +1,35 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useThunderID = require('../../../contexts/ThunderID/useThunderID.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/auth/guards/SignedOut.tsx
+/**
+* A component that only renders its children when the user is signed out.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example
+* ```tsx
+* import { SignedOut } from '@thunderid/auth-react';
+*
+* const App = () => {
+*   return (
+*     <SignedOut fallback={<p>You are already signed in</p>}>
+*       <p>Please sign in to continue</p>
+*     </SignedOut>
+*   );
+* }
+* ```
+*/
+const SignedOut = ({ children, fallback = null }) => {
+	const { isSignedIn } = require_useThunderID.default();
+	if (!isSignedIn) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+};
+SignedOut.displayName = "SignedOut";
+var SignedOut_default = SignedOut;
+
+//#endregion
+exports.default = SignedOut_default;
+//# sourceMappingURL=SignedOut.cjs.map

package/dist/cjs/components/auth/guards/SignedOut.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedOut.cjs","names":["SignedOut: FC<PropsWithChildren<SignedOutProps>>","useThunderID"],"sources":["../../../../../src/components/auth/guards/SignedOut.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, PropsWithChildren, ReactNode} from 'react';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\n\n/**\n * Props for the SignedOut component.\n */\nexport interface SignedOutProps {\n  /**\n   * Content to show when the user is signed in.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * A component that only renders its children when the user is signed out.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example\n * ```tsx\n * import { SignedOut } from '@thunderid/auth-react';\n *\n * const App = () => {\n *   return (\n *     <SignedOut fallback={<p>You are already signed in</p>}>\n *       <p>Please sign in to continue</p>\n *     </SignedOut>\n *   );\n * }\n * ```\n */\nconst SignedOut: FC<PropsWithChildren<SignedOutProps>> = ({\n  children,\n  fallback = null,\n}: PropsWithChildren<SignedOutProps>) => {\n  const {isSignedIn} = useThunderID();\n\n  if (!isSignedIn) {\n    return <>{children}</>;\n  }\n\n  return <>{fallback}</>;\n};\n\nSignedOut.displayName = 'SignedOut';\n\nexport default SignedOut;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,aAAoD,EACxD,UACA,WAAW,WAC4B;CACvC,MAAM,EAAC,eAAcC,8BAAc;AAEnC,KAAI,CAAC,WACH,QAAO,yEAAG,WAAY;AAGxB,QAAO,mFAAG,WAAY;;AAGxB,UAAU,cAAc;AAExB,wBAAe"}

package/dist/cjs/components/common/Attribution/Attribution.cjs

@@ -0,0 +1,66 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_Attribution_styles = require('./Attribution.styles.cjs');
+const require_ThunderIDWordmark = require('./ThunderIDWordmark.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/common/Attribution/Attribution.tsx
+/**
+* A small "Secured by ThunderID" credit: a line of text for the footer of an app, or a ribbon on the
+* edge of a sign-in card. The inline credit follows the theme's text colors, so it reads on light and
+* dark surfaces.
+*
+* @example
+* ```tsx
+* <Attribution />
+* <Attribution variant="powered" />
+* <Attribution appearance="ribbon" variant="powered" />
+* ```
+*/
+const Attribution = ({ appearance = "inline", className, href, preferences, variant = "secured" }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const styles = require_Attribution_styles.default(theme, colorScheme);
+	const label = t(variant === "powered" ? "attribution.powered_by" : "attribution.secured_by");
+	const isRibbon = appearance === "ribbon";
+	const rootClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("attribution")), isRibbon ? (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("attribution", null, "ribbon")) : void 0, isRibbon ? styles["ribbon"] : styles["root"], className);
+	const content = isRibbon ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: styles["ribbonContent"],
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: styles["ribbonLabel"],
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ThunderIDWordmark.default, {
+			className: styles["ribbonWordmark"],
+			role: "img",
+			"aria-label": "ThunderID"
+		})]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: styles["label"],
+		children: label
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ThunderIDWordmark.default, {
+		className: styles["wordmark"],
+		role: "img",
+		"aria-label": "ThunderID"
+	})] });
+	if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		className: require_emotion.cx(rootClassName, isRibbon ? void 0 : styles["link"]),
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: rootClassName,
+		children: content
+	});
+};
+var Attribution_default = Attribution;
+
+//#endregion
+exports.default = Attribution_default;
+//# sourceMappingURL=Attribution.cjs.map

package/dist/cjs/components/common/Attribution/Attribution.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attribution.cjs","names":["Attribution: FC<AttributionProps>","useTheme","useTranslation","styles: Record<string, string>","useStyles","label: string","isRibbon: boolean","rootClassName: string","cx","content: ReactElement","ThunderIDWordmark"],"sources":["../../../../../src/components/common/Attribution/Attribution.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Preferences, bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {FC, ReactElement} from 'react';\nimport useStyles from './Attribution.styles';\nimport ThunderIDWordmark from './ThunderIDWordmark';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\n\nexport interface AttributionProps {\n  /**\n   * How the credit is shown: a line of text, or a ribbon that hangs off the right edge of a card such\n   * as a sign-in box. The card the ribbon sits on must be `position: relative`.\n   * @default 'inline'\n   */\n  appearance?: 'inline' | 'ribbon';\n  className?: string;\n  /**\n   * Makes the attribution a link, for example to a page about how the app keeps accounts safe. It\n   * opens in a new tab.\n   */\n  href?: string;\n  preferences?: Preferences;\n  /**\n   * The words before the wordmark.\n   * @default 'secured'\n   */\n  variant?: 'powered' | 'secured';\n}\n\n/**\n * A small \"Secured by ThunderID\" credit: a line of text for the footer of an app, or a ribbon on the\n * edge of a sign-in card. The inline credit follows the theme's text colors, so it reads on light and\n * dark surfaces.\n *\n * @example\n * ```tsx\n * <Attribution />\n * <Attribution variant=\"powered\" />\n * <Attribution appearance=\"ribbon\" variant=\"powered\" />\n * ```\n */\nconst Attribution: FC<AttributionProps> = ({\n  appearance = 'inline',\n  className,\n  href,\n  preferences,\n  variant = 'secured',\n}: AttributionProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const {t} = useTranslation(preferences?.i18n);\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const label: string = t(variant === 'powered' ? 'attribution.powered_by' : 'attribution.secured_by');\n  const isRibbon: boolean = appearance === 'ribbon';\n  const rootClassName: string = cx(\n    withVendorCSSClassPrefix(bem('attribution')),\n    isRibbon ? withVendorCSSClassPrefix(bem('attribution', null, 'ribbon')) : undefined,\n    isRibbon ? styles['ribbon'] : styles['root'],\n    className,\n  );\n  const content: ReactElement = isRibbon ? (\n    <span className={styles['ribbonContent']}>\n      <span className={styles['ribbonLabel']}>{label}</span>\n      <ThunderIDWordmark className={styles['ribbonWordmark']} role=\"img\" aria-label=\"ThunderID\" />\n    </span>\n  ) : (\n    <>\n      <span className={styles['label']}>{label}</span>\n      <ThunderIDWordmark className={styles['wordmark']} role=\"img\" aria-label=\"ThunderID\" />\n    </>\n  );\n\n  if (href) {\n    return (\n      <a\n        className={cx(rootClassName, isRibbon ? undefined : styles['link'])}\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        {content}\n      </a>\n    );\n  }\n\n  return <span className={rootClassName}>{content}</span>;\n};\n\nexport default Attribution;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAMA,eAAqC,EACzC,aAAa,UACb,WACA,MACA,aACA,UAAU,gBAC0B;CACpC,MAAM,EAAC,OAAO,gBAAeC,0BAAU;CACvC,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAC7C,MAAMC,SAAiCC,mCAAU,OAAO,YAAY;CACpE,MAAMC,QAAgB,EAAE,YAAY,YAAY,2BAA2B,yBAAyB;CACpG,MAAMC,WAAoB,eAAe;CACzC,MAAMC,gBAAwBC,kGACC,cAAc,CAAC,EAC5C,0FAAwC,eAAe,MAAM,SAAS,CAAC,GAAG,QAC1E,WAAW,OAAO,YAAY,OAAO,SACrC,UACD;CACD,MAAMC,UAAwB,WAC5B,4CAAC;EAAK,WAAW,OAAO;aACtB,2CAAC;GAAK,WAAW,OAAO;aAAiB;IAAa,EACtD,2CAACC;GAAkB,WAAW,OAAO;GAAmB,MAAK;GAAM,cAAW;IAAc;GACvF,GAEP,qFACE,2CAAC;EAAK,WAAW,OAAO;YAAW;GAAa,EAChD,2CAACA;EAAkB,WAAW,OAAO;EAAa,MAAK;EAAM,cAAW;GAAc,IACrF;AAGL,KAAI,KACF,QACE,2CAAC;EACC,WAAWF,mBAAG,eAAe,WAAW,SAAY,OAAO,QAAQ;EAC7D;EACN,QAAO;EACP,KAAI;YAEH;GACC;AAIR,QAAO,2CAAC;EAAK,WAAW;YAAgB;GAAe;;AAGzD,0BAAe"}

package/dist/cjs/components/common/Attribution/Attribution.styles.cjs

@@ -0,0 +1,88 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/components/common/Attribution/Attribution.styles.ts
+/**
+* Creates the styles for the Attribution component.
+*
+* @param theme - The theme object containing design tokens.
+* @param colorScheme - The current color scheme, used for memoization.
+* @returns The CSS class names for each part of the attribution.
+*/
+const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => ({
+	label: require_emotion.css`
+        white-space: nowrap;
+      `,
+	root: require_emotion.css`
+        display: inline-flex;
+        align-items: center;
+        gap: calc(${theme.vars.spacing.unit} * 0.75);
+        font-family: ${theme.vars.typography.fontFamily};
+        font-size: ${theme.vars.typography.fontSizes.xs};
+        color: ${theme.vars.colors.text.secondary};
+        text-decoration: none;
+        line-height: 1;
+      `,
+	link: require_emotion.css`
+        &:hover,
+        &:focus-visible {
+          color: ${theme.vars.colors.text.primary};
+        }
+      `,
+	ribbon: require_emotion.css`
+        position: absolute;
+        top: 36px;
+        right: -1px;
+        transform: translateX(100%);
+        width: 34px;
+        height: 128px;
+        overflow: hidden;
+        background: #12172a;
+        border: 1px solid ${theme.vars.colors.border};
+        border-left: none;
+        border-radius: 0 10px 10px 0;
+        box-shadow: ${theme.vars.shadows.medium};
+        text-decoration: none;
+      `,
+	ribbonContent: require_emotion.css`
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 112px;
+        height: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        white-space: nowrap;
+        transform: translate(-50%, -50%) rotate(90deg);
+        font-family: ${theme.vars.typography.fontFamily};
+      `,
+	ribbonLabel: require_emotion.css`
+        font-size: 9px;
+        font-weight: 500;
+        letter-spacing: 0.04em;
+        color: #8bf9fa;
+        opacity: 0.65;
+      `,
+	ribbonWordmark: require_emotion.css`
+        height: 11px;
+        width: auto;
+        display: block;
+        color: #ffffff;
+        opacity: 0.95;
+      `,
+	wordmark: require_emotion.css`
+        height: 1.15em;
+        width: auto;
+        display: block;
+        color: ${theme.vars.colors.text.primary};
+      `
+}), [theme, colorScheme]);
+var Attribution_styles_default = useStyles;
+
+//#endregion
+exports.default = Attribution_styles_default;
+//# sourceMappingURL=Attribution.styles.cjs.map

package/dist/cjs/components/common/Attribution/Attribution.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attribution.styles.cjs","names":[],"sources":["../../../../../src/components/common/Attribution/Attribution.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates the styles for the Attribution component.\n *\n * @param theme - The theme object containing design tokens.\n * @param colorScheme - The current color scheme, used for memoization.\n * @returns The CSS class names for each part of the attribution.\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(\n    () => ({\n      label: css`\n        white-space: nowrap;\n      `,\n      root: css`\n        display: inline-flex;\n        align-items: center;\n        gap: calc(${theme.vars.spacing.unit} * 0.75);\n        font-family: ${theme.vars.typography.fontFamily};\n        font-size: ${theme.vars.typography.fontSizes.xs};\n        color: ${theme.vars.colors.text.secondary};\n        text-decoration: none;\n        line-height: 1;\n      `,\n      link: css`\n        &:hover,\n        &:focus-visible {\n          color: ${theme.vars.colors.text.primary};\n        }\n      `,\n      // The ribbon: a slim tab that hangs off the right edge of a card. The card must be\n      // `position: relative`.\n      ribbon: css`\n        position: absolute;\n        top: 36px;\n        right: -1px;\n        transform: translateX(100%);\n        width: 34px;\n        height: 128px;\n        overflow: hidden;\n        background: #12172a;\n        border: 1px solid ${theme.vars.colors.border};\n        border-left: none;\n        border-radius: 0 10px 10px 0;\n        box-shadow: ${theme.vars.shadows.medium};\n        text-decoration: none;\n      `,\n      ribbonContent: css`\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 112px;\n        height: 14px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        white-space: nowrap;\n        transform: translate(-50%, -50%) rotate(90deg);\n        font-family: ${theme.vars.typography.fontFamily};\n      `,\n      ribbonLabel: css`\n        font-size: 9px;\n        font-weight: 500;\n        letter-spacing: 0.04em;\n        color: #8bf9fa;\n        opacity: 0.65;\n      `,\n      ribbonWordmark: css`\n        height: 11px;\n        width: auto;\n        display: block;\n        color: #ffffff;\n        opacity: 0.95;\n      `,\n      wordmark: css`\n        height: 1.15em;\n        width: auto;\n        display: block;\n        color: ${theme.vars.colors.text.primary};\n      `,\n    }),\n    [theme, colorScheme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,aAAa,OAAc,0CAEtB;CACL,OAAO,mBAAG;;;CAGV,MAAM,mBAAG;;;oBAGK,MAAM,KAAK,QAAQ,KAAK;uBACrB,MAAM,KAAK,WAAW,WAAW;qBACnC,MAAM,KAAK,WAAW,UAAU,GAAG;iBACvC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,MAAM,mBAAG;;;mBAGI,MAAM,KAAK,OAAO,KAAK,QAAQ;;;CAK5C,QAAQ,mBAAG;;;;;;;;;4BASW,MAAM,KAAK,OAAO,OAAO;;;sBAG/B,MAAM,KAAK,QAAQ,OAAO;;;CAG1C,eAAe,mBAAG;;;;;;;;;;;;uBAYD,MAAM,KAAK,WAAW,WAAW;;CAElD,aAAa,mBAAG;;;;;;;CAOhB,gBAAgB,mBAAG;;;;;;;CAOnB,UAAU,mBAAG;;;;iBAIF,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAE3C,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,iCAAe"}