npm - @thunderid/react - Versions diffs - 0.12.0 → 0.13.0 - Mend

@thunderid/react 0.12.0 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (356) hide show

package/dist/cjs/components/actions/SignInButton/BaseSignInButton.cjs CHANGED Viewed

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 const require_Button = require('../../primitives/Button/Button.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
@@ -6,8 +7,6 @@ let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 //#region src/components/actions/SignInButton/BaseSignInButton.tsx
 /**
@@ -37,7 +36,7 @@ const BaseSignInButton = (0, react.forwardRef)(({ children, className, style, si
 	}) });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
 		ref,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("sign-in-button"), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("sign-in-button"), className),
 		style,
 		disabled: isLoading,
 		loading: isLoading,

package/dist/cjs/components/actions/SignInButton/BaseSignInButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseSignInButton.cjs","names":["BaseSignInButton: ForwardRefExoticComponent<BaseSignInButtonProps & RefAttributes<HTMLButtonElement>>","Button"],"sources":["../../../../../src/components/actions/SignInButton/BaseSignInButton.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {~~cx} from '@emotion/css';\nimport {~~FlowMetadataResponse, WithPreferences, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {\n ButtonHTMLAttributes,\n forwardRef,\n ForwardRefExoticComponent,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from 'react';\nimport Button from '../../primitives/Button/Button';\n\n/*\n Common props shared by all {@link BaseSignInButton} components.\n /\nexport interface CommonBaseSignInButtonProps {\n /\n Loading state during sign-in process\n /\n isLoading?: boolean;\n /\n Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n /\n meta?: FlowMetadataResponse \| null;\n /\n Function to initiate the sign-in process\n /\n signIn: () => Promise<void>;\n}\n\n/\n Props passed to the render function of {@link BaseSignInButton}\n /\nexport type BaseSignInButtonRenderProps = CommonBaseSignInButtonProps;\n\n/\n Props interface of {@link BaseSignInButton}\n /\nexport interface BaseSignInButtonProps\n extends Partial<CommonBaseSignInButtonProps>,\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n WithPreferences {\n /\n Render prop function that receives sign-in props, or traditional ReactNode children\n /\n children?: ((props: BaseSignInButtonRenderProps) => ReactNode) \| ReactNode;\n}\n\n/\n Base SignInButton component that supports both render props and traditional props patterns.\n \n @example Using render props\n * ```tsx\n * <BaseSignInButton>\n * {({signIn, isLoading}) => (\n * <button onClick={signIn} disabled={isLoading}>\n * {isLoading ? 'Signing in...' : 'Sign In'}\n * </button>\n * )}\n * </BaseSignInButton>\n * ```\n \n @example Using traditional props\n * ```tsx\n * <BaseSignInButton className=\"custom-button\">Sign In</BaseSignInButton>\n * ```\n */\nconst BaseSignInButton: ForwardRefExoticComponent<BaseSignInButtonProps & RefAttributes<HTMLButtonElement>> =\n forwardRef<HTMLButtonElement, BaseSignInButtonProps>(\n (\n {children, className, style, signIn, isLoading, meta, preferences, ...rest}: BaseSignInButtonProps,\n ref: Ref<HTMLButtonElement>,\n ): ReactElement => {\n if (typeof children === 'function') {\n return <>{children({isLoading, meta, signIn: signIn!})}</>;\n }\n\n return (\n <Button\n ref={ref}\n className={cx(withVendorCSSClassPrefix('sign-in-button'), className)}\n style={style}\n disabled={isLoading}\n loading={isLoading}\n type=\"button\"\n {...rest}\n >\n {children}\n </Button>\n );\n },\n );\n\nBaseSignInButton.displayName = 'BaseSignInButton';\n\nexport default BaseSignInButton;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAuEA,MAAMA,0CAGA,EAAC,UAAU,WAAW,OAAO,QAAQ,WAAW,MAAM,YAAa,GAAG,QACtE,QACiB;AACjB,KAAI,OAAO,aAAa,WACtB,QAAO,mFAAG,SAAS;EAAC;EAAW;EAAc;EAAQ,CAAC,GAAI;AAG5D,QACE,2CAACC;EACM;EACL,~~mFAAuC~~,iBAAiB,EAAE,UAAU;EAC7D;EACP,UAAU;EACV,SAAS;EACT,MAAK;EACL,GAAI;EAEH;GACM;EAGd;AAEH,iBAAiB,cAAc;AAE/B,+BAAe"}
1	+ {"version":3,"file":"BaseSignInButton.cjs","names":["BaseSignInButton: ForwardRefExoticComponent<BaseSignInButtonProps & RefAttributes<HTMLButtonElement>>","Button","cx"],"sources":["../../../../../src/components/actions/SignInButton/BaseSignInButton.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FlowMetadataResponse, WithPreferences, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {\n ButtonHTMLAttributes,\n forwardRef,\n ForwardRefExoticComponent,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from 'react';\nimport {cx} from '../../../styles/emotion';\nimport Button from '../../primitives/Button/Button';\n\n/*\n Common props shared by all {@link BaseSignInButton} components.\n /\nexport interface CommonBaseSignInButtonProps {\n /\n Loading state during sign-in process\n /\n isLoading?: boolean;\n /\n Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n /\n meta?: FlowMetadataResponse \| null;\n /\n Function to initiate the sign-in process\n /\n signIn: () => Promise<void>;\n}\n\n/\n Props passed to the render function of {@link BaseSignInButton}\n /\nexport type BaseSignInButtonRenderProps = CommonBaseSignInButtonProps;\n\n/\n Props interface of {@link BaseSignInButton}\n /\nexport interface BaseSignInButtonProps\n extends Partial<CommonBaseSignInButtonProps>,\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n WithPreferences {\n /\n Render prop function that receives sign-in props, or traditional ReactNode children\n /\n children?: ((props: BaseSignInButtonRenderProps) => ReactNode) \| ReactNode;\n}\n\n/\n Base SignInButton component that supports both render props and traditional props patterns.\n \n @example Using render props\n * ```tsx\n * <BaseSignInButton>\n * {({signIn, isLoading}) => (\n * <button onClick={signIn} disabled={isLoading}>\n * {isLoading ? 'Signing in...' : 'Sign In'}\n * </button>\n * )}\n * </BaseSignInButton>\n * ```\n \n @example Using traditional props\n * ```tsx\n * <BaseSignInButton className=\"custom-button\">Sign In</BaseSignInButton>\n * ```\n */\nconst BaseSignInButton: ForwardRefExoticComponent<BaseSignInButtonProps & RefAttributes<HTMLButtonElement>> =\n forwardRef<HTMLButtonElement, BaseSignInButtonProps>(\n (\n {children, className, style, signIn, isLoading, meta, preferences, ...rest}: BaseSignInButtonProps,\n ref: Ref<HTMLButtonElement>,\n ): ReactElement => {\n if (typeof children === 'function') {\n return <>{children({isLoading, meta, signIn: signIn!})}</>;\n }\n\n return (\n <Button\n ref={ref}\n className={cx(withVendorCSSClassPrefix('sign-in-button'), className)}\n style={style}\n disabled={isLoading}\n loading={isLoading}\n type=\"button\"\n {...rest}\n >\n {children}\n </Button>\n );\n },\n );\n\nBaseSignInButton.displayName = 'BaseSignInButton';\n\nexport default BaseSignInButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,MAAMA,0CAGA,EAAC,UAAU,WAAW,OAAO,QAAQ,WAAW,MAAM,YAAa,GAAG,QACtE,QACiB;AACjB,KAAI,OAAO,aAAa,WACtB,QAAO,mFAAG,SAAS;EAAC;EAAW;EAAc;EAAQ,CAAC,GAAI;AAG5D,QACE,2CAACC;EACM;EACL,WAAWC,qEAA4B,iBAAiB,EAAE,UAAU;EAC7D;EACP,UAAU;EACV,SAAS;EACT,MAAK;EACL,GAAI;EAEH;GACM;EAGd;AAEH,iBAAiB,cAAc;AAE/B,+BAAe"}

package/dist/cjs/components/actions/SignOutButton/BaseSignOutButton.cjs CHANGED Viewed

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 const require_Button = require('../../primitives/Button/Button.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
@@ -6,8 +7,6 @@ let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 //#region src/components/actions/SignOutButton/BaseSignOutButton.tsx
 /**
@@ -37,7 +36,7 @@ const BaseSignOutButton = (0, react.forwardRef)(({ children, className, style, s
 	}) });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
 		ref,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("sign-out-button"), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("sign-out-button"), className),
 		style,
 		disabled: isLoading,
 		loading: isLoading,

package/dist/cjs/components/actions/SignOutButton/BaseSignOutButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseSignOutButton.cjs","names":["BaseSignOutButton: ForwardRefExoticComponent<BaseSignOutButtonProps & RefAttributes<HTMLButtonElement>>","Button"],"sources":["../../../../../src/components/actions/SignOutButton/BaseSignOutButton.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {~~cx} from '@emotion/css';\nimport {~~FlowMetadataResponse, WithPreferences, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {\n forwardRef,\n ForwardRefExoticComponent,\n ButtonHTMLAttributes,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from 'react';\nimport Button from '../../primitives/Button/Button';\n\n/*\n Common props shared by all {@link BaseSignOutButton} components.\n /\nexport interface CommonBaseSignOutButtonProps {\n /\n Loading state during sign-out process\n /\n isLoading?: boolean;\n /\n Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n /\n meta?: FlowMetadataResponse \| null;\n /\n Function to initiate the sign-out process\n /\n signOut: () => Promise<void>;\n}\n\n/\n Props passed to the render function of {@link BaseSignOutButton}\n /\nexport type BaseSignOutButtonRenderProps = CommonBaseSignOutButtonProps;\n\n/\n Props interface of {@link BaseSignOutButton}\n /\nexport interface BaseSignOutButtonProps\n extends Partial<CommonBaseSignOutButtonProps>,\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n WithPreferences {\n /\n Render prop function that receives sign-out props, or traditional ReactNode children\n /\n children?: ((props: BaseSignOutButtonRenderProps) => ReactNode) \| ReactNode;\n}\n\n/\n Base SignOutButton component that supports both render props and traditional props patterns.\n \n @example Using render props\n * ```tsx\n * <BaseSignOutButton>\n * {({signOut, isLoading}) => (\n * <button onClick={signOut} disabled={isLoading}>\n * {isLoading ? 'Signing out...' : 'Sign Out'}\n * </button>\n * )}\n * </BaseSignOutButton>\n * ```\n \n @example Using traditional props\n * ```tsx\n * <BaseSignOutButton className=\"custom-button\">Sign Out</BaseSignOutButton>\n * ```\n */\nconst BaseSignOutButton: ForwardRefExoticComponent<BaseSignOutButtonProps & RefAttributes<HTMLButtonElement>> =\n forwardRef<HTMLButtonElement, BaseSignOutButtonProps>(\n (\n {children, className, style, signOut, isLoading, meta, preferences, ...rest}: BaseSignOutButtonProps,\n ref: Ref<HTMLButtonElement>,\n ): ReactElement => {\n if (typeof children === 'function') {\n return <>{children({isLoading, meta, signOut: signOut!})}</>;\n }\n\n return (\n <Button\n ref={ref}\n className={cx(withVendorCSSClassPrefix('sign-out-button'), className)}\n style={style}\n disabled={isLoading}\n loading={isLoading}\n type=\"button\"\n {...rest}\n >\n {children}\n </Button>\n );\n },\n );\n\nBaseSignOutButton.displayName = 'BaseSignOutButton';\n\nexport default BaseSignOutButton;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAuEA,MAAMA,2CAGA,EAAC,UAAU,WAAW,OAAO,SAAS,WAAW,MAAM,YAAa,GAAG,QACvE,QACiB;AACjB,KAAI,OAAO,aAAa,WACtB,QAAO,mFAAG,SAAS;EAAC;EAAW;EAAe;EAAS,CAAC,GAAI;AAG9D,QACE,2CAACC;EACM;EACL,~~mFAAuC~~,kBAAkB,EAAE,UAAU;EAC9D;EACP,UAAU;EACV,SAAS;EACT,MAAK;EACL,GAAI;EAEH;GACM;EAGd;AAEH,kBAAkB,cAAc;AAEhC,gCAAe"}
1	+ {"version":3,"file":"BaseSignOutButton.cjs","names":["BaseSignOutButton: ForwardRefExoticComponent<BaseSignOutButtonProps & RefAttributes<HTMLButtonElement>>","Button","cx"],"sources":["../../../../../src/components/actions/SignOutButton/BaseSignOutButton.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FlowMetadataResponse, WithPreferences, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {\n forwardRef,\n ForwardRefExoticComponent,\n ButtonHTMLAttributes,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from 'react';\nimport {cx} from '../../../styles/emotion';\nimport Button from '../../primitives/Button/Button';\n\n/*\n Common props shared by all {@link BaseSignOutButton} components.\n /\nexport interface CommonBaseSignOutButtonProps {\n /\n Loading state during sign-out process\n /\n isLoading?: boolean;\n /\n Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n /\n meta?: FlowMetadataResponse \| null;\n /\n Function to initiate the sign-out process\n /\n signOut: () => Promise<void>;\n}\n\n/\n Props passed to the render function of {@link BaseSignOutButton}\n /\nexport type BaseSignOutButtonRenderProps = CommonBaseSignOutButtonProps;\n\n/\n Props interface of {@link BaseSignOutButton}\n /\nexport interface BaseSignOutButtonProps\n extends Partial<CommonBaseSignOutButtonProps>,\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n WithPreferences {\n /\n Render prop function that receives sign-out props, or traditional ReactNode children\n /\n children?: ((props: BaseSignOutButtonRenderProps) => ReactNode) \| ReactNode;\n}\n\n/\n Base SignOutButton component that supports both render props and traditional props patterns.\n \n @example Using render props\n * ```tsx\n * <BaseSignOutButton>\n * {({signOut, isLoading}) => (\n * <button onClick={signOut} disabled={isLoading}>\n * {isLoading ? 'Signing out...' : 'Sign Out'}\n * </button>\n * )}\n * </BaseSignOutButton>\n * ```\n \n @example Using traditional props\n * ```tsx\n * <BaseSignOutButton className=\"custom-button\">Sign Out</BaseSignOutButton>\n * ```\n */\nconst BaseSignOutButton: ForwardRefExoticComponent<BaseSignOutButtonProps & RefAttributes<HTMLButtonElement>> =\n forwardRef<HTMLButtonElement, BaseSignOutButtonProps>(\n (\n {children, className, style, signOut, isLoading, meta, preferences, ...rest}: BaseSignOutButtonProps,\n ref: Ref<HTMLButtonElement>,\n ): ReactElement => {\n if (typeof children === 'function') {\n return <>{children({isLoading, meta, signOut: signOut!})}</>;\n }\n\n return (\n <Button\n ref={ref}\n className={cx(withVendorCSSClassPrefix('sign-out-button'), className)}\n style={style}\n disabled={isLoading}\n loading={isLoading}\n type=\"button\"\n {...rest}\n >\n {children}\n </Button>\n );\n },\n );\n\nBaseSignOutButton.displayName = 'BaseSignOutButton';\n\nexport default BaseSignOutButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,MAAMA,2CAGA,EAAC,UAAU,WAAW,OAAO,SAAS,WAAW,MAAM,YAAa,GAAG,QACvE,QACiB;AACjB,KAAI,OAAO,aAAa,WACtB,QAAO,mFAAG,SAAS;EAAC;EAAW;EAAe;EAAS,CAAC,GAAI;AAG9D,QACE,2CAACC;EACM;EACL,WAAWC,qEAA4B,kBAAkB,EAAE,UAAU;EAC9D;EACP,UAAU;EACV,SAAS;EACT,MAAK;EACL,GAAI;EAEH;GACM;EAGd;AAEH,kBAAkB,cAAc;AAEhC,gCAAe"}

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

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 const require_Button = require('../../primitives/Button/Button.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
@@ -6,8 +7,6 @@ let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 //#region src/components/actions/SignUpButton/BaseSignUpButton.tsx
 /**
@@ -37,7 +36,7 @@ const BaseSignUpButton = (0, react.forwardRef)(({ children, className, style, si
 	}) });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
 		ref,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)("sign-up-button"), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)("sign-up-button"), className),
 		style,
 		disabled: isLoading,
 		loading: isLoading,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseSignUpButton.cjs","names":["BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAttributes<HTMLButtonElement>>","Button"],"sources":["../../../../../src/components/actions/SignUpButton/BaseSignUpButton.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {~~cx} from '@emotion/css';\nimport {~~FlowMetadataResponse, WithPreferences, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {\n forwardRef,\n ForwardRefExoticComponent,\n ButtonHTMLAttributes,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from 'react';\nimport Button from '../../primitives/Button/Button';\n\n/*\n Common props shared by all {@link BaseSignUpButton} components.\n /\nexport interface CommonBaseSignUpButtonProps {\n /\n Loading state during sign-up process\n /\n isLoading?: boolean;\n /\n Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n /\n meta?: FlowMetadataResponse \| null;\n /\n Function to initiate the sign-up process\n /\n signUp?: () => Promise<void>;\n}\n\n/\n Props passed to the render function of {@link BaseSignUpButton}\n /\nexport type BaseSignUpButtonRenderProps = CommonBaseSignUpButtonProps;\n\n/\n Props interface of {@link BaseSignUpButton}\n /\nexport interface BaseSignUpButtonProps\n extends CommonBaseSignUpButtonProps,\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n WithPreferences {\n /\n Render prop function that receives sign-up props, or traditional ReactNode children\n /\n children?: ((props: BaseSignUpButtonRenderProps) => ReactNode) \| ReactNode;\n}\n\n/\n Base SignUpButton component that supports both render props and traditional props patterns.\n \n @example Using render props\n * ```tsx\n * <BaseSignUpButton>\n * {({ signUp, isLoading }) => (\n * <button onClick={signUp} disabled={isLoading}>\n * {isLoading ? 'Creating account...' : 'Create Account'}\n * </button>\n * )}\n * </BaseSignUpButton>\n * ```\n \n @example Using traditional props\n * ```tsx\n * <BaseSignUpButton className=\"custom-button\">Create Account</BaseSignUpButton>\n * ```\n */\nconst BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAttributes<HTMLButtonElement>> =\n forwardRef<HTMLButtonElement, BaseSignUpButtonProps>(\n (\n {children, className, style, signUp, isLoading, meta, preferences, ...rest}: BaseSignUpButtonProps,\n ref: Ref<HTMLButtonElement>,\n ): ReactElement => {\n if (typeof children === 'function') {\n return <>{children({isLoading, meta, signUp})}</>;\n }\n\n return (\n <Button\n ref={ref}\n className={cx(withVendorCSSClassPrefix('sign-up-button'), className)}\n style={style}\n disabled={isLoading}\n loading={isLoading}\n type=\"button\"\n color=\"primary\"\n variant=\"solid\"\n {...rest}\n >\n {children}\n </Button>\n );\n },\n );\n\nBaseSignUpButton.displayName = 'BaseSignUpButton';\n\nexport default BaseSignUpButton;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAuEA,MAAMA,0CAGA,EAAC,UAAU,WAAW,OAAO,QAAQ,WAAW,MAAM,YAAa,GAAG,QACtE,QACiB;AACjB,KAAI,OAAO,aAAa,WACtB,QAAO,mFAAG,SAAS;EAAC;EAAW;EAAM;EAAO,CAAC,GAAI;AAGnD,QACE,2CAACC;EACM;EACL,~~mFAAuC~~,iBAAiB,EAAE,UAAU;EAC7D;EACP,UAAU;EACV,SAAS;EACT,MAAK;EACL,OAAM;EACN,SAAQ;EACR,GAAI;EAEH;GACM;EAGd;AAEH,iBAAiB,cAAc;AAE/B,+BAAe"}
1	+ {"version":3,"file":"BaseSignUpButton.cjs","names":["BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAttributes<HTMLButtonElement>>","Button","cx"],"sources":["../../../../../src/components/actions/SignUpButton/BaseSignUpButton.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FlowMetadataResponse, WithPreferences, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {\n forwardRef,\n ForwardRefExoticComponent,\n ButtonHTMLAttributes,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from 'react';\nimport {cx} from '../../../styles/emotion';\nimport Button from '../../primitives/Button/Button';\n\n/*\n Common props shared by all {@link BaseSignUpButton} components.\n /\nexport interface CommonBaseSignUpButtonProps {\n /\n Loading state during sign-up process\n /\n isLoading?: boolean;\n /\n Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n /\n meta?: FlowMetadataResponse \| null;\n /\n Function to initiate the sign-up process\n /\n signUp?: () => Promise<void>;\n}\n\n/\n Props passed to the render function of {@link BaseSignUpButton}\n /\nexport type BaseSignUpButtonRenderProps = CommonBaseSignUpButtonProps;\n\n/\n Props interface of {@link BaseSignUpButton}\n /\nexport interface BaseSignUpButtonProps\n extends CommonBaseSignUpButtonProps,\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>,\n WithPreferences {\n /\n Render prop function that receives sign-up props, or traditional ReactNode children\n /\n children?: ((props: BaseSignUpButtonRenderProps) => ReactNode) \| ReactNode;\n}\n\n/\n Base SignUpButton component that supports both render props and traditional props patterns.\n \n @example Using render props\n * ```tsx\n * <BaseSignUpButton>\n * {({ signUp, isLoading }) => (\n * <button onClick={signUp} disabled={isLoading}>\n * {isLoading ? 'Creating account...' : 'Create Account'}\n * </button>\n * )}\n * </BaseSignUpButton>\n * ```\n \n @example Using traditional props\n * ```tsx\n * <BaseSignUpButton className=\"custom-button\">Create Account</BaseSignUpButton>\n * ```\n */\nconst BaseSignUpButton: ForwardRefExoticComponent<BaseSignUpButtonProps & RefAttributes<HTMLButtonElement>> =\n forwardRef<HTMLButtonElement, BaseSignUpButtonProps>(\n (\n {children, className, style, signUp, isLoading, meta, preferences, ...rest}: BaseSignUpButtonProps,\n ref: Ref<HTMLButtonElement>,\n ): ReactElement => {\n if (typeof children === 'function') {\n return <>{children({isLoading, meta, signUp})}</>;\n }\n\n return (\n <Button\n ref={ref}\n className={cx(withVendorCSSClassPrefix('sign-up-button'), className)}\n style={style}\n disabled={isLoading}\n loading={isLoading}\n type=\"button\"\n color=\"primary\"\n variant=\"solid\"\n {...rest}\n >\n {children}\n </Button>\n );\n },\n );\n\nBaseSignUpButton.displayName = 'BaseSignUpButton';\n\nexport default BaseSignUpButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,MAAMA,0CAGA,EAAC,UAAU,WAAW,OAAO,QAAQ,WAAW,MAAM,YAAa,GAAG,QACtE,QACiB;AACjB,KAAI,OAAO,aAAa,WACtB,QAAO,mFAAG,SAAS;EAAC;EAAW;EAAM;EAAO,CAAC,GAAI;AAGnD,QACE,2CAACC;EACM;EACL,WAAWC,qEAA4B,iBAAiB,EAAE,UAAU;EAC7D;EACP,UAAU;EACV,SAAS;EACT,MAAK;EACL,OAAM;EACN,SAAQ;EACR,GAAI;EAEH;GACM;EAGd;AAEH,iBAAiB,cAAc;AAE/B,+BAAe"}

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

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../styles/emotion.cjs');
 const require_Info = require('../primitives/Icons/Info.cjs');
 const require_Typography = require('../primitives/Typography/Typography.cjs');
 const require_Toggle = require('../primitives/Toggle/Toggle.cjs');
@@ -20,6 +21,32 @@ const defaultConfig = {
 * attributes are displayed as read-only.
 */
 const Consent = ({ consentData, formValues, config: suppliedConfig = {}, onInputChange, children, meta, t }) => {
+	const purposesContainerClass = require_emotion.css({
+		display: "flex",
+		flexDirection: "column",
+		gap: "1rem",
+		marginTop: "0.25rem"
+	});
+	const purposeItemClass = require_emotion.css({ paddingBottom: "1rem" });
+	const sectionClass = require_emotion.css({ marginTop: "0.5rem" });
+	const sectionHeaderClass = require_emotion.css({
+		alignItems: "center",
+		display: "flex",
+		gap: "4px",
+		marginBottom: "10px"
+	});
+	const optionalSectionHeaderClass = require_emotion.css({
+		alignItems: "center",
+		display: "flex",
+		justifyContent: "space-between",
+		marginBottom: "10px",
+		paddingRight: "4px"
+	});
+	const optionalSectionLabelClass = require_emotion.css({
+		alignItems: "center",
+		display: "flex",
+		gap: "4px"
+	});
 	/** Resolve any remaining {{t()}} or {{meta()}} template expressions in a string at render time. */
 	const resolve = (text) => {
 		if (!text || !t && !meta) return text || "";
@@ -72,23 +99,13 @@ const Consent = ({ consentData, formValues, config: suppliedConfig = {}, onInput
 		purposes
 	}) });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		style: {
-			display: "flex",
-			flexDirection: "column",
-			gap: "1rem",
-			marginTop: "0.25rem"
-		},
+		className: purposesContainerClass,
 		children: purposes.map((purpose, purposeIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			style: { paddingBottom: "1rem" },
+			className: purposeItemClass,
 			children: [purpose.essential && purpose.essential.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: { marginTop: "0.5rem" },
+				className: sectionClass,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					style: {
-						display: "flex",
-						alignItems: "center",
-						gap: "4px",
-						marginBottom: "10px"
-					},
+					className: sectionHeaderClass,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
 						variant: "subtitle2",
 						fontWeight: "bold",
@@ -107,21 +124,11 @@ const Consent = ({ consentData, formValues, config: suppliedConfig = {}, onInput
 					onInputChange
 				})]
 			}), purpose.optional && purpose.optional.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: { marginTop: "0.5rem" },
+				className: sectionClass,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					style: {
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "space-between",
-						paddingRight: "4px",
-						marginBottom: "10px"
-					},
+					className: optionalSectionHeaderClass,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: "4px"
-						},
+						className: optionalSectionLabelClass,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
 							variant: "subtitle2",
 							fontWeight: "bold",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Consent.cjs","names":["defaultConfig: Required<Pick<ConsentConfig, 'essential' \| 'optional'>>","Consent: FC<ConsentProps>","config: ConsentConfig","getConsentOptionalKey","purposes: ConsentPurposeData[]","parsed: ConsentPurposeData[] \| {purposes: ConsentPurposeData[]}","Typography","Tooltip","Info","ConsentCheckboxList","Toggle"],"sources":["../../../../src/components/adapters/Consent.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n type ConsentPurposeData,\n FlowMetadataResponse,\n PromptElement,\n resolveFlowTemplateLiterals,\n} from '@thunderid/browser';\nimport {type ChangeEvent, FC, ReactNode} from 'react';\nimport ConsentCheckboxList, {getConsentOptionalKey} from './ConsentCheckboxList';\nimport Typography from '../primitives/Typography/Typography';\nimport Toggle from '../primitives/Toggle/Toggle';\nimport {Info} from '../primitives/Icons';\nimport Tooltip from '../primitives/Tooltip/Tooltip';\nimport {UseTranslation} from '../../hooks/useTranslation';\n\n/*\n Backward-compatible consent purpose type exported by @thunderid/react.\n \n Some consumers import this name directly; keep it as an alias to the v2 model.\n /\nexport type ConsentPurpose = ConsentPurposeData;\n\n/\n Render props exposed by Consent when using the render-prop pattern.\n /\nexport interface ConsentRenderProps {\n /* Current form values - used to read optional checkbox state. /\n formValues: Record<string, string>;\n /* Callback invoked when a user toggles an optional attribute. /\n onInputChange: (name: string, value: string) => void;\n /* The resolved list of consent purposes parsed from `consentData`. /\n purposes: ConsentPurposeData[];\n}\n\n/\n Interface for consent configuration\n /\nexport interface ConsentConfig {\n essential?: string;\n optional?: string;\n essentialInfo?: string;\n optionalInfo?: string;\n}\n\n/\n Props for the Consent component.\n /\nexport interface ConsentProps {\n /\n Render-props callback. When provided, the default consent UI is replaced with\n * whatever JSX the callback returns. The parsed `purposes` list is injected so\n * consumers do not need to re-parse `consentData` themselves.\n \n @example\n * ```tsx\n * <Consent consentData={raw} formValues={formInputs} onInputChange={onChange} t={t}>\n * {({ purposes, formValues, onInputChange, t }) => (\n * <div>\n * {purposes.map(p => <MyConsentSection key={p.purposeId} purpose={p} />)}\n * </div>\n * )}\n * </Consent>\n * ```\n /\n children?: (props: ConsentRenderProps) => ReactNode;\n /\n The raw JSON string returned by the backend in `additionalData.consentPrompt`.\n /\n consentData?: string \| ConsentPurposeData[] \| {purposes: ConsentPurposeData[]};\n /\n Current form values - used to read optional checkbox state.\n /\n formValues: Record<string, string>;\n /\n Callback invoked when a user toggles an optional attribute.\n /\n onInputChange: (name: string, value: string) => void;\n /\n Config to modified detail in consent page\n /\n config?: Record<string, unknown>;\n\n /\n Config of meta response\n /\n meta?: FlowMetadataResponse \| null;\n\n /\n translation data\n /\n t?: UseTranslation['t'];\n}\n\nconst defaultConfig: Required<Pick<ConsentConfig, 'essential' \| 'optional'>> = {\n essential: 'Essential Attributtes',\n optional: 'Optional Attributes',\n};\n\n/\n Consent component renders the list of purposes and their associated attributes (essential and optional)\n * based on the data provided by the backend. It allows users to toggle optional attributes while essential\n * attributes are displayed as read-only.\n /\nconst Consent: FC<ConsentProps> = ({\n consentData,\n formValues,\n config: suppliedConfig = {},\n onInputChange,\n children,\n meta,\n t,\n}: ConsentProps) => {\n /* Resolve any remaining {{t()}} or {{meta()}} template expressions in a string at render time. /\n const resolve = (text: string \| undefined): string => {\n if (!text \|\| (!t && !meta)) {\n return text \|\| '';\n }\n return resolveFlowTemplateLiterals(text, {meta, t: t \|\| ((k: string): string => k)});\n };\n\n const config: ConsentConfig = {...defaultConfig, ...suppliedConfig};\n const essentialInfo = typeof config.essentialInfo === 'string' ? resolve(config.essentialInfo.trim()) : '';\n const optionalInfo = typeof config.optionalInfo === 'string' ? resolve(config.optionalInfo.trim()) : '';\n const essentialLabel = resolve(config['essential']);\n const optionalLabel = resolve(config['optional']);\n\n /\n Method to check whether master toggle button is checked or not\n * @param purpose Purpose object\n * @param checked boolean variable to check, whether toggle is checked or unchecked\n /\n const handleChange = (purpose: ConsentPurposeData, checked: boolean): void => {\n const checkValue = checked ? 'true' : 'false';\n purpose.optional.map((opt: PromptElement) => {\n const key: string = getConsentOptionalKey(purpose.purposeId, opt.name);\n onInputChange(key, checkValue);\n });\n };\n\n /\n Check all optional claims are selected or not\n * @param purpose Purpose object\n * @returns boolean value to denote all optional claims are selected\n /\n const checkOptValue = (purpose: ConsentPurposeData): boolean => {\n return purpose.optional.every((opt: PromptElement) => {\n const key: string = getConsentOptionalKey(purpose.purposeId, opt.name);\n return formValues[key] === 'true';\n });\n };\n\n if (!consentData) return null;\n\n let purposes: ConsentPurposeData[] = [];\n\n try {\n const parsed: ConsentPurposeData[] \| {purposes: ConsentPurposeData[]} =\n typeof consentData === 'string' ? JSON.parse(consentData) : consentData;\n\n purposes = Array.isArray(parsed) ? parsed : parsed.purposes \|\| [];\n } catch (e) {\n // Failed to parse consent prompt data\n return null;\n }\n\n if (purposes.length === 0) return null;\n\n if (children) {\n return <>{children({formValues, onInputChange, purposes: purposes})}</>;\n }\n\n return (\n <div style={{display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '0.25rem'}}>\n {purposes.map((purpose: ConsentPurposeData, purposeIndex: number) => (\n <div key={purpose.purposeId \|\| purposeIndex} style={{paddingBottom: '1rem'}}>\n {/ TODO: Uncomment when the backend supports multiple purposes for a application /}\n {/ <Typography variant=\"h6\" fontWeight={600} gutterBottom color=\"inherit\">\n {purpose.purposeName}\n </Typography>\n <Typography variant=\"body2\" color=\"inherit\" style={{marginBottom: '1rem', opacity: 0.85}}>\n {purpose.description}\n </Typography> */}\n\n {purpose.essential && purpose.essential.length > 0 && (\n <div style={{marginTop: '0.5rem'}}>\n <div style={{display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '10px'}}>\n <Typography variant=\"subtitle2\" fontWeight=\"bold\">\n {essentialLabel}\n </Typography>\n {essentialInfo !== '' && (\n <Tooltip helperText={essentialInfo}>\n <Info width=\"1rem\" height=\"1rem\" />\n </Tooltip>\n )}\n </div>\n <ConsentCheckboxList\n variant=\"ESSENTIAL\"\n purpose={purpose}\n formValues={formValues}\n onInputChange={onInputChange}\n />\n </div>\n )}\n\n {purpose.optional && purpose.optional.length > 0 && (\n <div style={{marginTop: '0.5rem'}}>\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n paddingRight: '4px',\n marginBottom: '10px',\n }}\n >\n <div style={{display: 'flex', alignItems: 'center', gap: '4px'}}>\n <Typography variant=\"subtitle2\" fontWeight=\"bold\">\n {purpose.type === 'permissions' ? 'Permissions' : optionalLabel}\n </Typography>\n {optionalInfo !== '' && (\n <Tooltip helperText={optionalInfo}>\n <Info width=\"1rem\" height=\"1rem\" />\n </Tooltip>\n )}\n </div>\n <Toggle\n id={`consent_opt_${purpose.purposeId}_all`}\n checked={checkOptValue(purpose)}\n aria-label=\"Toggle all optional attributes\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => handleChange(purpose, e.target.checked)}\n />\n </div>\n <ConsentCheckboxList\n variant=\"OPTIONAL\"\n purpose={purpose}\n formValues={formValues}\n onInputChange={onInputChange}\n />\n </div>\n )}\n </div>\n ))}\n </div>\n );\n};\n\nexport default Consent;\n"],"mappings":";;;;;;;;;;;;AA+FA,MAAMA,gBAAyE;CAC7E,WAAW;CACX,UAAU;CACX;;;;;;AAOD,MAAMC,WAA6B,EACjC,aACA,YACA,QAAQ,iBAAiB,EAAE,EAC3B,eACA,UACA,MACA,QACkB;;CAElB,MAAM,WAAW,SAAqC;AACpD,MAAI,CAAC,QAAS,CAAC,KAAK,CAAC,KACnB,QAAO,QAAQ;AAEjB,8DAAmC,MAAM;GAAC;GAAM,GAAG,OAAO,MAAsB;GAAG,CAAC;;CAGtF,MAAMC,SAAwB;EAAC,GAAG;EAAe,GAAG;EAAe;CACnE,MAAM,gBAAgB,OAAO,OAAO,kBAAkB,WAAW,QAAQ,OAAO,cAAc,MAAM,CAAC,GAAG;CACxG,MAAM,eAAe,OAAO,OAAO,iBAAiB,WAAW,QAAQ,OAAO,aAAa,MAAM,CAAC,GAAG;CACrG,MAAM,iBAAiB,QAAQ,OAAO,aAAa;CACnD,MAAM,gBAAgB,QAAQ,OAAO,YAAY;;;;;;CAOjD,MAAM,gBAAgB,SAA6B,YAA2B;EAC5E,MAAM,aAAa,UAAU,SAAS;AACtC,UAAQ,SAAS,KAAK,QAAuB;AAE3C,iBADoBC,kDAAsB,QAAQ,WAAW,IAAI,KAAK,EACnD,WAAW;IAC9B;;;;;;;CAQJ,MAAM,iBAAiB,YAAyC;AAC9D,SAAO,QAAQ,SAAS,OAAO,QAAuB;AAEpD,UAAO,WADaA,kDAAsB,QAAQ,WAAW,IAAI,KAAK,MAC3C;IAC3B;;AAGJ,KAAI,CAAC,YAAa,QAAO;CAEzB,IAAIC,WAAiC,EAAE;AAEvC,KAAI;EACF,MAAMC,SACJ,OAAO,gBAAgB,WAAW,KAAK,MAAM,YAAY,GAAG;AAE9D,aAAW,MAAM,QAAQ,OAAO,GAAG,SAAS,OAAO,YAAY,EAAE;UAC1D,GAAG;AAEV,SAAO;;AAGT,KAAI,SAAS,WAAW,EAAG,QAAO;AAElC,KAAI,SACF,QAAO,mFAAG,SAAS;EAAC;EAAY;EAAyB;EAAS,CAAC,GAAI;AAGzE,QACE,2CAAC;EAAI,OAAO;GAAC,SAAS;GAAQ,eAAe;GAAU,KAAK;GAAQ,WAAW;GAAU;YACtF,SAAS,KAAK,SAA6B,iBAC1C,4CAAC;GAA4C,OAAO,EAAC,eAAe,QAAO;cASxE,QAAQ,aAAa,QAAQ,UAAU,SAAS,KAC/C,4CAAC;IAAI,OAAO,EAAC,WAAW,UAAS;eAC/B,4CAAC;KAAI,OAAO;MAAC,SAAS;MAAQ,YAAY;MAAU,KAAK;MAAO,cAAc;MAAO;gBACnF,2CAACC;MAAW,SAAQ;MAAY,YAAW;gBACxC;OACU,EACZ,kBAAkB,MACjB,2CAACC;MAAQ,YAAY;gBACnB,2CAACC;OAAK,OAAM;OAAO,QAAO;QAAS;OAC3B;MAER,EACN,2CAACC;KACC,SAAQ;KACC;KACG;KACG;MACf;KACE,EAGP,QAAQ,YAAY,QAAQ,SAAS,SAAS,KAC7C,4CAAC;IAAI,OAAO,EAAC,WAAW,UAAS;eAC/B,4CAAC;KACC,OAAO;MACL,SAAS;MACT,YAAY;MACZ,gBAAgB;MAChB,cAAc;MACd,cAAc;MACf;gBAED,4CAAC;MAAI,OAAO;OAAC,SAAS;OAAQ,YAAY;OAAU,KAAK;OAAM;iBAC7D,2CAACH;OAAW,SAAQ;OAAY,YAAW;iBACxC,QAAQ,SAAS,gBAAgB,gBAAgB;QACvC,EACZ,iBAAiB,MAChB,2CAACC;OAAQ,YAAY;iBACnB,2CAACC;QAAK,OAAM;QAAO,QAAO;SAAS;QAC3B;OAER,EACN,2CAACE;MACC,IAAI,eAAe,QAAQ,UAAU;MACrC,SAAS,cAAc,QAAQ;MAC/B,cAAW;MACX,WAAW,MAA2C,aAAa,SAAS,EAAE,OAAO,QAAQ;OAC7F;MACE,EACN,2CAACD;KACC,SAAQ;KACC;KACG;KACG;MACf;KACE;KAhEA,QAAQ,aAAa,aAkEzB,CACN;GACE;;AAIV,sBAAe"}
1	+ {"version":3,"file":"Consent.cjs","names":["defaultConfig: Required<Pick<ConsentConfig, 'essential' \| 'optional'>>","Consent: FC<ConsentProps>","purposesContainerClass: string","css","purposeItemClass: string","sectionClass: string","sectionHeaderClass: string","optionalSectionHeaderClass: string","optionalSectionLabelClass: string","config: ConsentConfig","getConsentOptionalKey","purposes: ConsentPurposeData[]","parsed: ConsentPurposeData[] \| {purposes: ConsentPurposeData[]}","Typography","Tooltip","Info","ConsentCheckboxList","Toggle"],"sources":["../../../../src/components/adapters/Consent.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n type ConsentPurposeData,\n FlowMetadataResponse,\n PromptElement,\n resolveFlowTemplateLiterals,\n} from '@thunderid/browser';\nimport {type ChangeEvent, FC, ReactNode} from 'react';\nimport ConsentCheckboxList, {getConsentOptionalKey} from './ConsentCheckboxList';\nimport Typography from '../primitives/Typography/Typography';\nimport Toggle from '../primitives/Toggle/Toggle';\nimport {Info} from '../primitives/Icons';\nimport Tooltip from '../primitives/Tooltip/Tooltip';\nimport {UseTranslation} from '../../hooks/useTranslation';\nimport {css} from '../../styles/emotion';\n\n/*\n Backward-compatible consent purpose type exported by @thunderid/react.\n \n Some consumers import this name directly; keep it as an alias to the v2 model.\n /\nexport type ConsentPurpose = ConsentPurposeData;\n\n/\n Render props exposed by Consent when using the render-prop pattern.\n /\nexport interface ConsentRenderProps {\n /* Current form values - used to read optional checkbox state. /\n formValues: Record<string, string>;\n /* Callback invoked when a user toggles an optional attribute. /\n onInputChange: (name: string, value: string) => void;\n /* The resolved list of consent purposes parsed from `consentData`. /\n purposes: ConsentPurposeData[];\n}\n\n/\n Interface for consent configuration\n /\nexport interface ConsentConfig {\n essential?: string;\n optional?: string;\n essentialInfo?: string;\n optionalInfo?: string;\n}\n\n/\n Props for the Consent component.\n /\nexport interface ConsentProps {\n /\n Render-props callback. When provided, the default consent UI is replaced with\n * whatever JSX the callback returns. The parsed `purposes` list is injected so\n * consumers do not need to re-parse `consentData` themselves.\n \n @example\n * ```tsx\n * <Consent consentData={raw} formValues={formInputs} onInputChange={onChange} t={t}>\n * {({ purposes, formValues, onInputChange, t }) => (\n * <div>\n * {purposes.map(p => <MyConsentSection key={p.purposeId} purpose={p} />)}\n * </div>\n * )}\n * </Consent>\n * ```\n /\n children?: (props: ConsentRenderProps) => ReactNode;\n /\n The raw JSON string returned by the backend in `additionalData.consentPrompt`.\n /\n consentData?: string \| ConsentPurposeData[] \| {purposes: ConsentPurposeData[]};\n /\n Current form values - used to read optional checkbox state.\n /\n formValues: Record<string, string>;\n /\n Callback invoked when a user toggles an optional attribute.\n /\n onInputChange: (name: string, value: string) => void;\n /\n Config to modified detail in consent page\n /\n config?: Record<string, unknown>;\n\n /\n Config of meta response\n /\n meta?: FlowMetadataResponse \| null;\n\n /\n translation data\n /\n t?: UseTranslation['t'];\n}\n\nconst defaultConfig: Required<Pick<ConsentConfig, 'essential' \| 'optional'>> = {\n essential: 'Essential Attributtes',\n optional: 'Optional Attributes',\n};\n\n/\n Consent component renders the list of purposes and their associated attributes (essential and optional)\n * based on the data provided by the backend. It allows users to toggle optional attributes while essential\n * attributes are displayed as read-only.\n /\nconst Consent: FC<ConsentProps> = ({\n consentData,\n formValues,\n config: suppliedConfig = {},\n onInputChange,\n children,\n meta,\n t,\n}: ConsentProps) => {\n // 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 purposesContainerClass: string = css({\n display: 'flex',\n flexDirection: 'column',\n gap: '1rem',\n marginTop: '0.25rem',\n });\n const purposeItemClass: string = css({paddingBottom: '1rem'});\n const sectionClass: string = css({marginTop: '0.5rem'});\n const sectionHeaderClass: string = css({alignItems: 'center', display: 'flex', gap: '4px', marginBottom: '10px'});\n const optionalSectionHeaderClass: string = css({\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'space-between',\n marginBottom: '10px',\n paddingRight: '4px',\n });\n const optionalSectionLabelClass: string = css({alignItems: 'center', display: 'flex', gap: '4px'});\n\n /* Resolve any remaining {{t()}} or {{meta()}} template expressions in a string at render time. /\n const resolve = (text: string \| undefined): string => {\n if (!text \|\| (!t && !meta)) {\n return text \|\| '';\n }\n return resolveFlowTemplateLiterals(text, {meta, t: t \|\| ((k: string): string => k)});\n };\n\n const config: ConsentConfig = {...defaultConfig, ...suppliedConfig};\n const essentialInfo = typeof config.essentialInfo === 'string' ? resolve(config.essentialInfo.trim()) : '';\n const optionalInfo = typeof config.optionalInfo === 'string' ? resolve(config.optionalInfo.trim()) : '';\n const essentialLabel = resolve(config['essential']);\n const optionalLabel = resolve(config['optional']);\n\n /\n Method to check whether master toggle button is checked or not\n * @param purpose Purpose object\n * @param checked boolean variable to check, whether toggle is checked or unchecked\n /\n const handleChange = (purpose: ConsentPurposeData, checked: boolean): void => {\n const checkValue = checked ? 'true' : 'false';\n purpose.optional.map((opt: PromptElement) => {\n const key: string = getConsentOptionalKey(purpose.purposeId, opt.name);\n onInputChange(key, checkValue);\n });\n };\n\n /\n Check all optional claims are selected or not\n * @param purpose Purpose object\n * @returns boolean value to denote all optional claims are selected\n /\n const checkOptValue = (purpose: ConsentPurposeData): boolean => {\n return purpose.optional.every((opt: PromptElement) => {\n const key: string = getConsentOptionalKey(purpose.purposeId, opt.name);\n return formValues[key] === 'true';\n });\n };\n\n if (!consentData) return null;\n\n let purposes: ConsentPurposeData[] = [];\n\n try {\n const parsed: ConsentPurposeData[] \| {purposes: ConsentPurposeData[]} =\n typeof consentData === 'string' ? JSON.parse(consentData) : consentData;\n\n purposes = Array.isArray(parsed) ? parsed : parsed.purposes \|\| [];\n } catch (e) {\n // Failed to parse consent prompt data\n return null;\n }\n\n if (purposes.length === 0) return null;\n\n if (children) {\n return <>{children({formValues, onInputChange, purposes: purposes})}</>;\n }\n\n return (\n <div className={purposesContainerClass}>\n {purposes.map((purpose: ConsentPurposeData, purposeIndex: number) => (\n <div key={purpose.purposeId \|\| purposeIndex} className={purposeItemClass}>\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 className={sectionClass}>\n <div className={sectionHeaderClass}>\n <Typography variant=\"subtitle2\" fontWeight=\"bold\">\n {essentialLabel}\n </Typography>\n {essentialInfo !== '' && (\n <Tooltip helperText={essentialInfo}>\n <Info width=\"1rem\" height=\"1rem\" />\n </Tooltip>\n )}\n </div>\n <ConsentCheckboxList\n variant=\"ESSENTIAL\"\n purpose={purpose}\n formValues={formValues}\n onInputChange={onInputChange}\n />\n </div>\n )}\n\n {purpose.optional && purpose.optional.length > 0 && (\n <div className={sectionClass}>\n <div className={optionalSectionHeaderClass}>\n <div className={optionalSectionLabelClass}>\n <Typography variant=\"subtitle2\" fontWeight=\"bold\">\n {purpose.type === 'permissions' ? 'Permissions' : optionalLabel}\n </Typography>\n {optionalInfo !== '' && (\n <Tooltip helperText={optionalInfo}>\n <Info width=\"1rem\" height=\"1rem\" />\n </Tooltip>\n )}\n </div>\n <Toggle\n id={`consent_opt_${purpose.purposeId}_all`}\n checked={checkOptValue(purpose)}\n aria-label=\"Toggle all optional attributes\"\n onChange={(e: ChangeEvent<HTMLInputElement>): void => handleChange(purpose, e.target.checked)}\n />\n </div>\n <ConsentCheckboxList\n variant=\"OPTIONAL\"\n purpose={purpose}\n formValues={formValues}\n onInputChange={onInputChange}\n />\n </div>\n )}\n </div>\n ))}\n </div>\n );\n};\n\nexport default Consent;\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 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_Typography = require('../primitives/Typography/Typography.cjs');
 const require_ConsentCheckboxList_styles = require('./ConsentCheckboxList.styles.cjs');
@@ -7,8 +8,6 @@ let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 //#region src/components/adapters/ConsentCheckboxList.tsx
 /**
@@ -46,19 +45,19 @@ const ConsentCheckboxList = ({ variant, purpose, formValues, onInputChange, chil
 		variant
 	}) });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list")), styles["listContainer"]),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list")), styles["listContainer"]),
 		children: attributes.map((attr) => {
 			const inputId = `consent_${isEssential ? "ess" : "opt"}_${purpose.purposeId}_${attr}`;
 			const checked = isChecked(attr);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "item")), styles["listItem"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "item")), styles["listItem"]),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "row")), styles["listRow"]),
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "row")), styles["listRow"]),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "label-container")), styles["labelContainer"]),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "bullet")), styles["bullet"]) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+						className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "label-container")), styles["labelContainer"]),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "bullet")), styles["bullet"]) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
 							variant: "body2",
-							className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "typography")), styles["typography"]),
+							className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("consent-checkbox-list", "typography")), styles["typography"]),
 							children: attr
 						})]
 					}), isEssential ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ConsentCheckboxList.cjs","names":["ConsentCheckboxList: FC<ConsentCheckboxListProps>","useTheme","styles: Record<string, string>","useStyles","attributes: string[]","isEssential: boolean","checked: boolean","Typography","Toggle"],"sources":["../../../../src/components/adapters/ConsentCheckboxList.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {~~cx} from '@emotion/css';\nimport {~~type ConsentPurposeData, withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {type ChangeEvent, FC, ReactNode} from 'react';\nimport useStyles from './ConsentCheckboxList.styles';\nimport useTheme from '../../contexts/Theme/useTheme';\nimport Toggle from '../primitives/Toggle/Toggle';\nimport Typography from '../primitives/Typography/Typography';\n\n/*\n Computes the form value key for tracking an optional attribute's consent state.\n \n @param purposeId - The ID of the consent purpose.\n * @param attrName - The name of the attribute.\n * @returns A stable form key string.\n /\nexport const getConsentOptionalKey = (purposeId: string, attrName: string): string =>\n `__consent_opt__${purposeId}__${attrName}`;\n\n/\n ConsentInputVariant defines whether the ConsentCheckboxList is rendering essential (read-only) or\n * optional (toggleable) attributes.\n /\nexport type ConsentInputVariant = 'ESSENTIAL' \| 'OPTIONAL';\n\n/\n Render props exposed by ConsentCheckboxList when using the render-prop pattern.\n /\nexport interface ConsentCheckboxListRenderProps {\n /* The list of attribute names to render. /\n attributes: string[];\n /\n Call this when an optional attribute checkbox is toggled.\n * No-op for ESSENTIAL attributes (they cannot be changed).\n /\n handleChange: (attrName: string, checked: boolean) => void;\n /\n Returns the current checked state for the given attribute name.\n * Always returns true for ESSENTIAL attributes.\n /\n isChecked: (attrName: string) => boolean;\n /* Whether the list is rendering essential or optional attributes. /\n variant: ConsentInputVariant;\n}\n\n/\n Props for the ConsentCheckboxList component.\n /\nexport interface ConsentCheckboxListProps {\n /\n Render-props callback. When provided, the default checkbox list UI is replaced\n * with whatever JSX the callback returns.\n \n @example\n * ```tsx\n * <ConsentCheckboxList variant=\"OPTIONAL\" purpose={purpose} formValues={formValues} onInputChange={onChange}>\n * {({ attributes, isChecked, handleChange }) => (\n * <ul>\n * {attributes.map(attr => (\n * <li key={attr}>\n * <Checkbox checked={isChecked(attr)} onChange={e => handleChange(attr, e.target.checked)} />\n * {attr}\n * </li>\n * ))}\n * </ul>\n * )}\n * </ConsentCheckboxList>\n * ```\n /\n children?: (props: ConsentCheckboxListRenderProps) => ReactNode;\n /* Current form values - used to read optional checkbox state /\n formValues: Record<string, string>;\n /* Callback invoked when an optional attribute checkbox is toggled /\n onInputChange: (name: string, value: string) => void;\n /* The consent purpose data containing attribute lists /\n purpose: ConsentPurposeData;\n /* Whether to render essential (disabled) or optional (toggleable) attributes /\n variant: ConsentInputVariant;\n}\n\n/\n Renders a list of consent attribute checkboxes.\n \n - ESSENTIAL variant: renders read-only checked checkboxes for required attributes.\n * - OPTIONAL variant: renders toggleable checkboxes for optional attributes.\n * Opt-in is the default when no prior form value exists.\n */\nconst ConsentCheckboxList: FC<ConsentCheckboxListProps> = ({\n variant,\n purpose,\n formValues,\n onInputChange,\n children,\n}: ConsentCheckboxListProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n\n const attributes: string[] = (variant === 'ESSENTIAL' ? purpose.essential : purpose.optional).map(\n (e): string => e.name,\n );\n\n if (!attributes \|\| attributes.length === 0) {\n return null;\n }\n\n const isEssential: boolean = variant === 'ESSENTIAL';\n\n const isChecked = (attrName: string): boolean => {\n if (isEssential) {\n return true;\n }\n const key: string = getConsentOptionalKey(purpose.purposeId, attrName);\n // Default to be false when there's no explicit form value\n return formValues[key] === 'true';\n };\n\n const handleChange = (attrName: string, checked: boolean): void => {\n const key: string = getConsentOptionalKey(purpose.purposeId, attrName);\n onInputChange(key, checked ? 'true' : 'false');\n };\n\n if (children) {\n return <>{children({attributes, handleChange, isChecked, variant})}</>;\n }\n\n return (\n <div className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list')), styles['listContainer'])}>\n {attributes.map((attr: string) => {\n const inputId = `consent_${isEssential ? 'ess' : 'opt'}_${purpose.purposeId}_${attr}`;\n const checked: boolean = isChecked(attr);\n\n return (\n <div\n key={attr}\n className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'item')), styles['listItem'])}\n >\n <div className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'row')), styles['listRow'])}>\n <div\n className={cx(\n withVendorCSSClassPrefix(bem('consent-checkbox-list', 'label-container')),\n styles['labelContainer'],\n )}\n >\n <div\n className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'bullet')), styles['bullet'])}\n />\n <Typography\n variant=\"body2\"\n className={cx(\n withVendorCSSClassPrefix(bem('consent-checkbox-list', 'typography')),\n styles['typography'],\n )}\n >\n {attr}\n </Typography>\n </div>\n {isEssential ? (\n <Typography variant=\"body2\">Required</Typography>\n ) : (\n <Toggle\n id={inputId}\n checked={checked}\n disabled={isEssential}\n onChange={\n isEssential\n ? undefined\n : (e: ChangeEvent<HTMLInputElement>): void => handleChange(attr, e.target.checked)\n }\n />\n )}\n </div>\n </div>\n );\n })}\n </div>\n );\n};\n\nexport default ConsentCheckboxList;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;~~AAkBA,MAAa,yBAAyB,WAAmB,aACvD,kBAAkB,UAAU,IAAI;;;;;;;;AAsElC,MAAMA,uBAAqD,EACzD,SACA,SACA,YACA,eACA,eAC8B;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,2CAAU,OAAO,YAAY;CAEpE,MAAMC,cAAwB,YAAY,cAAc,QAAQ,YAAY,QAAQ,UAAU,KAC3F,MAAc,EAAE,KAClB;AAED,KAAI,CAAC,cAAc,WAAW,WAAW,EACvC,QAAO;CAGT,MAAMC,cAAuB,YAAY;CAEzC,MAAM,aAAa,aAA8B;AAC/C,MAAI,YACF,QAAO;AAIT,SAAO,WAFa,sBAAsB,QAAQ,WAAW,SAAS,MAE3C;;CAG7B,MAAM,gBAAgB,UAAkB,YAA2B;AAEjE,gBADoB,sBAAsB,QAAQ,WAAW,SAAS,EACnD,UAAU,SAAS,QAAQ;;AAGhD,KAAI,SACF,QAAO,mFAAG,SAAS;EAAC;EAAY;EAAc;EAAW;EAAQ,CAAC,GAAI;AAGxE,QACE,2CAAC;EAAI,~~gHAA2C~~,wBAAwB,CAAC,EAAE,OAAO,iBAAiB;YAChG,WAAW,KAAK,SAAiB;GAChC,MAAM,UAAU,WAAW,cAAc,QAAQ,MAAM,GAAG,QAAQ,UAAU,GAAG;GAC/E,MAAMC,UAAmB,UAAU,KAAK;AAExC,UACE,2CAAC;IAEC,~~gHAA2C~~,yBAAyB,OAAO,CAAC,EAAE,OAAO,YAAY;cAEjG,4CAAC;KAAI,~~gHAA2C~~,yBAAyB,MAAM,CAAC,EAAE,OAAO,WAAW;gBAClG,4CAAC;MACC,~~gHAC+B~~,yBAAyB,kBAAkB,CAAC,EACzE,OAAO,kBACR;iBAED,2CAAC,SACC,~~gHAA2C~~,yBAAyB,SAAS,CAAC,EAAE,OAAO,UAAU,GACjG,EACF,~~2CAACC~~;OACC,SAAQ;OACR,~~gHAC+B~~,yBAAyB,aAAa,CAAC,EACpE,OAAO,cACR;iBAEA;QACU;OACT,EACL,cACC,~~2CAACA~~;MAAW,SAAQ;gBAAQ;OAAqB,GAEjD,2CAACC;MACC,IAAI;MACK;MACT,UAAU;MACV,UACE,cACI,UACC,MAA2C,aAAa,MAAM,EAAE,OAAO,QAAQ;OAEtF;MAEA;MArCD,KAsCD;IAER;GACE;;AAIV,kCAAe"}
1	+ {"version":3,"file":"ConsentCheckboxList.cjs","names":["ConsentCheckboxList: FC<ConsentCheckboxListProps>","useTheme","styles: Record<string, string>","useStyles","attributes: string[]","isEssential: boolean","cx","checked: boolean","Typography","Toggle"],"sources":["../../../../src/components/adapters/ConsentCheckboxList.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {type ConsentPurposeData, withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {type ChangeEvent, FC, ReactNode} from 'react';\nimport useStyles from './ConsentCheckboxList.styles';\nimport useTheme from '../../contexts/Theme/useTheme';\nimport {cx} from '../../styles/emotion';\nimport Toggle from '../primitives/Toggle/Toggle';\nimport Typography from '../primitives/Typography/Typography';\n\n/*\n Computes the form value key for tracking an optional attribute's consent state.\n \n @param purposeId - The ID of the consent purpose.\n * @param attrName - The name of the attribute.\n * @returns A stable form key string.\n /\nexport const getConsentOptionalKey = (purposeId: string, attrName: string): string =>\n `__consent_opt__${purposeId}__${attrName}`;\n\n/\n ConsentInputVariant defines whether the ConsentCheckboxList is rendering essential (read-only) or\n * optional (toggleable) attributes.\n /\nexport type ConsentInputVariant = 'ESSENTIAL' \| 'OPTIONAL';\n\n/\n Render props exposed by ConsentCheckboxList when using the render-prop pattern.\n /\nexport interface ConsentCheckboxListRenderProps {\n /* The list of attribute names to render. /\n attributes: string[];\n /\n Call this when an optional attribute checkbox is toggled.\n * No-op for ESSENTIAL attributes (they cannot be changed).\n /\n handleChange: (attrName: string, checked: boolean) => void;\n /\n Returns the current checked state for the given attribute name.\n * Always returns true for ESSENTIAL attributes.\n /\n isChecked: (attrName: string) => boolean;\n /* Whether the list is rendering essential or optional attributes. /\n variant: ConsentInputVariant;\n}\n\n/\n Props for the ConsentCheckboxList component.\n /\nexport interface ConsentCheckboxListProps {\n /\n Render-props callback. When provided, the default checkbox list UI is replaced\n * with whatever JSX the callback returns.\n \n @example\n * ```tsx\n * <ConsentCheckboxList variant=\"OPTIONAL\" purpose={purpose} formValues={formValues} onInputChange={onChange}>\n * {({ attributes, isChecked, handleChange }) => (\n * <ul>\n * {attributes.map(attr => (\n * <li key={attr}>\n * <Checkbox checked={isChecked(attr)} onChange={e => handleChange(attr, e.target.checked)} />\n * {attr}\n * </li>\n * ))}\n * </ul>\n * )}\n * </ConsentCheckboxList>\n * ```\n /\n children?: (props: ConsentCheckboxListRenderProps) => ReactNode;\n /* Current form values - used to read optional checkbox state /\n formValues: Record<string, string>;\n /* Callback invoked when an optional attribute checkbox is toggled /\n onInputChange: (name: string, value: string) => void;\n /* The consent purpose data containing attribute lists /\n purpose: ConsentPurposeData;\n /* Whether to render essential (disabled) or optional (toggleable) attributes /\n variant: ConsentInputVariant;\n}\n\n/\n Renders a list of consent attribute checkboxes.\n \n - ESSENTIAL variant: renders read-only checked checkboxes for required attributes.\n * - OPTIONAL variant: renders toggleable checkboxes for optional attributes.\n * Opt-in is the default when no prior form value exists.\n */\nconst ConsentCheckboxList: FC<ConsentCheckboxListProps> = ({\n variant,\n purpose,\n formValues,\n onInputChange,\n children,\n}: ConsentCheckboxListProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n\n const attributes: string[] = (variant === 'ESSENTIAL' ? purpose.essential : purpose.optional).map(\n (e): string => e.name,\n );\n\n if (!attributes \|\| attributes.length === 0) {\n return null;\n }\n\n const isEssential: boolean = variant === 'ESSENTIAL';\n\n const isChecked = (attrName: string): boolean => {\n if (isEssential) {\n return true;\n }\n const key: string = getConsentOptionalKey(purpose.purposeId, attrName);\n // Default to be false when there's no explicit form value\n return formValues[key] === 'true';\n };\n\n const handleChange = (attrName: string, checked: boolean): void => {\n const key: string = getConsentOptionalKey(purpose.purposeId, attrName);\n onInputChange(key, checked ? 'true' : 'false');\n };\n\n if (children) {\n return <>{children({attributes, handleChange, isChecked, variant})}</>;\n }\n\n return (\n <div className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list')), styles['listContainer'])}>\n {attributes.map((attr: string) => {\n const inputId = `consent_${isEssential ? 'ess' : 'opt'}_${purpose.purposeId}_${attr}`;\n const checked: boolean = isChecked(attr);\n\n return (\n <div\n key={attr}\n className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'item')), styles['listItem'])}\n >\n <div className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'row')), styles['listRow'])}>\n <div\n className={cx(\n withVendorCSSClassPrefix(bem('consent-checkbox-list', 'label-container')),\n styles['labelContainer'],\n )}\n >\n <div\n className={cx(withVendorCSSClassPrefix(bem('consent-checkbox-list', 'bullet')), styles['bullet'])}\n />\n <Typography\n variant=\"body2\"\n className={cx(\n withVendorCSSClassPrefix(bem('consent-checkbox-list', 'typography')),\n styles['typography'],\n )}\n >\n {attr}\n </Typography>\n </div>\n {isEssential ? (\n <Typography variant=\"body2\">Required</Typography>\n ) : (\n <Toggle\n id={inputId}\n checked={checked}\n disabled={isEssential}\n onChange={\n isEssential\n ? undefined\n : (e: ChangeEvent<HTMLInputElement>): void => handleChange(attr, e.target.checked)\n }\n />\n )}\n </div>\n </div>\n );\n })}\n </div>\n );\n};\n\nexport default ConsentCheckboxList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAa,yBAAyB,WAAmB,aACvD,kBAAkB,UAAU,IAAI;;;;;;;;AAsElC,MAAMA,uBAAqD,EACzD,SACA,SACA,YACA,eACA,eAC8B;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,2CAAU,OAAO,YAAY;CAEpE,MAAMC,cAAwB,YAAY,cAAc,QAAQ,YAAY,QAAQ,UAAU,KAC3F,MAAc,EAAE,KAClB;AAED,KAAI,CAAC,cAAc,WAAW,WAAW,EACvC,QAAO;CAGT,MAAMC,cAAuB,YAAY;CAEzC,MAAM,aAAa,aAA8B;AAC/C,MAAI,YACF,QAAO;AAIT,SAAO,WAFa,sBAAsB,QAAQ,WAAW,SAAS,MAE3C;;CAG7B,MAAM,gBAAgB,UAAkB,YAA2B;AAEjE,gBADoB,sBAAsB,QAAQ,WAAW,SAAS,EACnD,UAAU,SAAS,QAAQ;;AAGhD,KAAI,SACF,QAAO,mFAAG,SAAS;EAAC;EAAY;EAAc;EAAW;EAAQ,CAAC,GAAI;AAGxE,QACE,2CAAC;EAAI,WAAWC,kGAAgC,wBAAwB,CAAC,EAAE,OAAO,iBAAiB;YAChG,WAAW,KAAK,SAAiB;GAChC,MAAM,UAAU,WAAW,cAAc,QAAQ,MAAM,GAAG,QAAQ,UAAU,GAAG;GAC/E,MAAMC,UAAmB,UAAU,KAAK;AAExC,UACE,2CAAC;IAEC,WAAWD,kGAAgC,yBAAyB,OAAO,CAAC,EAAE,OAAO,YAAY;cAEjG,4CAAC;KAAI,WAAWA,kGAAgC,yBAAyB,MAAM,CAAC,EAAE,OAAO,WAAW;gBAClG,4CAAC;MACC,WAAWA,kGACoB,yBAAyB,kBAAkB,CAAC,EACzE,OAAO,kBACR;iBAED,2CAAC,SACC,WAAWA,kGAAgC,yBAAyB,SAAS,CAAC,EAAE,OAAO,UAAU,GACjG,EACF,2CAACE;OACC,SAAQ;OACR,WAAWF,kGACoB,yBAAyB,aAAa,CAAC,EACpE,OAAO,cACR;iBAEA;QACU;OACT,EACL,cACC,2CAACE;MAAW,SAAQ;gBAAQ;OAAqB,GAEjD,2CAACC;MACC,IAAI;MACK;MACT,UAAU;MACV,UACE,cACI,UACC,MAA2C,aAAa,MAAM,EAAE,OAAO,QAAQ;OAEtF;MAEA;MArCD,KAsCD;IAER;GACE;;AAIV,kCAAe"}

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

@@ -1,42 +1,41 @@
 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);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 //#region src/components/adapters/ConsentCheckboxList.styles.ts
 const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => ({
-	bullet: __emotion_css.css`
+	bullet: require_emotion.css`
         width: 5px;
         height: 5px;
         border-radius: 50%;
         background-color: #9e9e9e;
         flex-shrink: 0;
       `,
-	divider: __emotion_css.css`
+	divider: require_emotion.css`
         opacity: 0.5;
         margin: 0.25rem 0;
       `,
-	labelContainer: __emotion_css.css`
+	labelContainer: require_emotion.css`
         display: flex;
         align-items: center;
         gap: 0.4rem;
       `,
-	listContainer: __emotion_css.css`
+	listContainer: require_emotion.css`
         display: flex;
         flex-direction: column;
       `,
-	listItem: __emotion_css.css`
+	listItem: require_emotion.css`
         padding: 0 0.25rem;
         margin-bottom: 4px;
       `,
-	listRow: __emotion_css.css`
+	listRow: require_emotion.css`
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0.125rem 0;
       `,
-	typography: __emotion_css.css`
+	typography: require_emotion.css`
         margin: 0;
       `
 }), [theme, colorScheme]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ConsentCheckboxList.styles.cjs","names":[],"sources":["../../../../src/components/adapters/ConsentCheckboxList.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {~~css~~} from '@~~emotion~~/~~css~~';\nimport {~~Theme~~} from '~~@thunderid/browser~~';\nimport {~~useMemo~~} from '~~react~~';\n\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n useMemo(\n () => ({\n bullet: css`\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: #9e9e9e;\n flex-shrink: 0;\n `,\n divider: css`\n opacity: 0.5;\n margin: 0.25rem 0;\n `,\n labelContainer: css`\n display: flex;\n align-items: center;\n gap: 0.4rem;\n `,\n listContainer: css`\n display: flex;\n flex-direction: column;\n `,\n listItem: css`\n padding: 0 0.25rem;\n margin-bottom: 4px;\n `,\n listRow: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.125rem 0;\n `,\n typography: css`\n margin: 0;\n `,\n }),\n [theme, colorScheme],\n );\n\nexport default useStyles;\n"],"mappings":"~~;;;;;;;~~AAOA,MAAM,aAAa,OAAc,0CAEtB;CACL,QAAQ,~~iBAAG~~;;;;;;;CAOX,SAAS,~~iBAAG~~;;;;CAIZ,gBAAgB,~~iBAAG~~;;;;;CAKnB,eAAe,~~iBAAG~~;;;;CAIlB,UAAU,~~iBAAG~~;;;;CAIb,SAAS,~~iBAAG~~;;;;;;CAMZ,YAAY,~~iBAAG~~;;;CAGhB,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,yCAAe"}
1	+ {"version":3,"file":"ConsentCheckboxList.styles.cjs","names":[],"sources":["../../../../src/components/adapters/ConsentCheckboxList.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\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n useMemo(\n () => ({\n bullet: css`\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: #9e9e9e;\n flex-shrink: 0;\n `,\n divider: css`\n opacity: 0.5;\n margin: 0.25rem 0;\n `,\n labelContainer: css`\n display: flex;\n align-items: center;\n gap: 0.4rem;\n `,\n listContainer: css`\n display: flex;\n flex-direction: column;\n `,\n listItem: css`\n padding: 0 0.25rem;\n margin-bottom: 4px;\n `,\n listRow: css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.125rem 0;\n `,\n typography: css`\n margin: 0;\n `,\n }),\n [theme, colorScheme],\n );\n\nexport default useStyles;\n"],"mappings":";;;;;;AAOA,MAAM,aAAa,OAAc,0CAEtB;CACL,QAAQ,mBAAG;;;;;;;CAOX,SAAS,mBAAG;;;;CAIZ,gBAAgB,mBAAG;;;;;CAKnB,eAAe,mBAAG;;;;CAIlB,UAAU,mBAAG;;;;CAIb,SAAS,mBAAG;;;;;;CAMZ,YAAY,mBAAG;;;CAGhB,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,yCAAe"}

package/dist/cjs/components/adapters/ImageComponent.cjs CHANGED Viewed

@@ -1,4 +1,5 @@
 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);
@@ -12,6 +13,11 @@ const DEFAULT_EMOJI_CONTAINER_HEIGHT = "4em";
 */
 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";
@@ -23,6 +29,7 @@ const ImageComponent = ({ component }) => {
 		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") {
@@ -35,36 +42,33 @@ const ImageComponent = ({ component }) => {
 		else if (isConcrete(cssWidth)) containerHeight = cssWidth;
 		else containerHeight = DEFAULT_EMOJI_CONTAINER_HEIGHT;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style: { textAlign: "center" },
+			className: centerClass,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				style: {
+				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",
-					style: {
-						fontSize: "100cqmin",
-						lineHeight: 1
-					},
+					className: emojiGlyphClass,
 					children: resolvedIcon.glyph
 				})
 			})
 		}, component.id);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		style: { textAlign: "center" },
+		className: centerClass,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 			src: resolvedIcon.imgSrc,
 			alt,
 			height,
 			width,
-			style: imageStyle,
+			className: imageClass,
 			onError: (e) => {
 				e.currentTarget.style.display = "none";
 			}

package/dist/cjs/components/adapters/ImageComponent.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageComponent.cjs","names":["ImageComponent: FC<AdapterProps>","useTheme","config: Record<string, unknown>","src: string","alt: string","width: string","height: string","variant: string","~~imageStyle~~: ~~CSSProperties~~","resolvedIcon: ResolvedLogo","cssWidth: string","cssHeight: string","containerHeight: string"],"sources":["../../../../src/components/adapters/ImageComponent.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {~~CSSProperties,~~ FC, SyntheticEvent} from 'react';\nimport useTheme from '../../contexts/Theme/useTheme';\nimport {AdapterProps} from '../../models/adapters';\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 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: ~~CSSProperties~~ = {\n borderRadius: theme.vars.borderRadius.small,\n display: 'block',\n margin: variant === 'image_block' ? '1rem auto' : '0',\n };\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 return (\n <div key={component.id} ~~style~~={~~{textAlign: 'center'~~}}>\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~~\n style~~={{\n ...imageStyle,\n containerType: 'size',\n display: 'inline-grid',\n height: containerHeight,\n placeItems: 'center',\n width: cssWidth,\n }~~}\n~~ >\n <span aria-label={alt} role=\"img\" ~~style~~={~~{fontSize: '100cqmin', lineHeight: 1~~}}>\n {resolvedIcon.glyph}\n </span>\n </span>\n </div>\n );\n }\n\n return (\n <div key={component.id} ~~style~~={~~{textAlign: 'center'~~}}>\n <img\n src={resolvedIcon.imgSrc}\n alt={alt}\n height={height}\n width={width}\n ~~style~~={~~imageStyle~~}\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":"~~;;;;;;;;AAQA~~,MAAM,iCAAiC;;;;AAKvC,MAAMA,kBAAoC,EAAC,gBAA6B;CACtE,MAAM,EAAC,UAASC,0BAAU;~~CAC1B~~,MAAMC,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,~~MAAMC~~,~~aAA4B~~;~~EAChC~~,cAAc,MAAM,KAAK,aAAa;EACtC,SAAS;EACT,QAAQ,YAAY,gBAAgB,cAAc;EACnD;~~AAED~~,KAAI,CAAC,IACH,QAAO;CAGT,~~MAAMC~~,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;~~AAGpB~~,SACE,2CAAC;GAAuB,~~OAAO,EAAC,~~WAAW~~,UAAS~~;~~aAMlD~~,2CAAC;~~IACC~~,~~OAAO~~;~~KACL~~,GAAG;KACH,eAAe;KACf,SAAS;KACT,QAAQ;KACR,YAAY;KACZ,OAAO;KACR;~~cAED~~,2CAAC;KAAK,cAAY;KAAK,MAAK;KAAM,~~OAAO~~;~~MAAC~~,~~UAAU;MAAY,YAAY;MAAE;eAC3E,~~aAAa;MACT;KACF;~~KAnBC~~,UAAU,~~GAoBd~~;;AAIV,QACE,2CAAC;EAAuB,~~OAAO,EAAC,~~WAAW~~,UAAS~~;~~YAClD~~,2CAAC;GACC,KAAK,aAAa;GACb;GACG;GACD;GACP,~~OAAO~~;~~GACP~~,UAAU,MAA8C;AAEtD,MAAE,cAAc,MAAM,UAAU;;IAElC;IAXM,UAAU,GAYd;;AAIV,6BAAe"}
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/adapters/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/presentation/LanguageSwitcher/BaseLanguageSwitcher.cjs CHANGED Viewed

@@ -1,4 +1,5 @@
 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_BaseLanguageSwitcher_styles = require('./BaseLanguageSwitcher.styles.cjs');
 const require_Check = require('../../primitives/Icons/Check.cjs');
@@ -7,8 +8,6 @@ let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 let __floating_ui_react = require("@floating-ui/react");
 __floating_ui_react = require_rolldown_runtime.__toESM(__floating_ui_react);
@@ -54,7 +53,7 @@ const BaseLanguageSwitcher = ({ children, className, currentLanguage, isLoading
 		onLanguageChange
 	}) });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __emotion_css.cx)(styles["root"], className),
+		className: require_emotion.cx(styles["root"], className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			ref: refs.setReference,
 			type: "button",
@@ -87,7 +86,7 @@ const BaseLanguageSwitcher = ({ children, className, currentLanguage, isLoading
 					type: "button",
 					role: "option",
 					"aria-selected": lang.code === currentLanguage,
-					className: (0, __emotion_css.cx)(styles["option"], lang.code === currentLanguage && styles["optionActive"]),
+					className: require_emotion.cx(styles["option"], lang.code === currentLanguage && styles["optionActive"]),
 					onClick: () => {
 						onLanguageChange(lang.code);
 						setIsOpen(false);