keycloakify 10.0.0-rc.37 → 10.0.0-rc.39

package/src/login/pages/Terms.tsx

@@ -1,20 +1,19 @@
-import { clsx } from "keycloakify/tools/clsx";
 import { Markdown } from "keycloakify/tools/Markdown";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import { useTermsMarkdown } from "keycloakify/login/lib/useDownloadTerms";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr } = useI18n({ kcContext });
 
     const { locale, url } = kcContext;
 
@@ -25,26 +24,20 @@ export default function Terms(props: PageProps<Extract<KcContext, { pageId: "ter
     }
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("termsTitle")}>
+        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} displayMessage={false} headerNode={msg("termsTitle")}>
             <div id="kc-terms-text" lang={termsLanguageTag !== locale?.currentLanguageTag ? termsLanguageTag : undefined}>
                 <Markdown>{termsMarkdown}</Markdown>
             </div>
             <form className="form-actions" action={url.loginAction} method="POST">
                 <input
-                    className={clsx(
-                        getClassName("kcButtonClass"),
-                        getClassName("kcButtonClass"),
-                        getClassName("kcButtonClass"),
-                        getClassName("kcButtonPrimaryClass"),
-                        getClassName("kcButtonLargeClass")
-                    )}
+                    className={kcClsx("kcButtonClass", "kcButtonClass", "kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                     name="accept"
                     id="kc-accept"
                     type="submit"
                     value={msgStr("doAccept")}
                 />
                 <input
-                    className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonDefaultClass"), getClassName("kcButtonLargeClass"))}
+                    className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
                     name="cancel"
                     id="kc-decline"
                     type="submit"

package/src/login/pages/UpdateEmail.tsx

@@ -1,24 +1,25 @@
 import { useState } from "react";
-import { clsx } from "keycloakify/tools/clsx";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n, type I18n } from "../i18n";
 
-type UpdateEmailProps = PageProps<Extract<KcContext, { pageId: "update-email.ftl" }>, I18n> & {
+type UpdateEmailProps = PageProps<Extract<KcContext, { pageId: "update-email.ftl" }>> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+    doMakeUserConfirmPassword: boolean;
 };
 
 export default function UpdateEmail(props: UpdateEmailProps) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields } = props;
+    const { kcContext, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
+    const i18n = useI18n({ kcContext });
     const { msg, msgStr } = i18n;
 
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
@@ -27,48 +28,43 @@ export default function UpdateEmail(props: UpdateEmailProps) {
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayMessage={messagesPerField.exists("global")}
             displayRequiredFields
             headerNode={msg("updateEmailTitle")}
         >
-            <form id="kc-update-email-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+            <form id="kc-update-email-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
                 <UserProfileFormFields
-                    {...{
-                        kcContext,
-                        i18n,
-                        getClassName,
-                        messagesPerField
-                    }}
+                    kcContext={kcContext}
+                    kcClsx={kcClsx}
                     onIsFormSubmittableValueChange={setIsFormSubmittable}
+                    doMakeUserConfirmPassword={doMakeUserConfirmPassword}
                 />
 
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")} />
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
                     </div>
 
-                    <LogoutOtherSessions {...{ getClassName, i18n }} />
+                    <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
 
-                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
                         <input
                             disabled={!isFormSubmittable}
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonPrimaryClass"),
-                                isAppInitiatedAction && getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
+                            className={kcClsx(
+                                "kcButtonClass",
+                                "kcButtonPrimaryClass",
+                                isAppInitiatedAction && "kcButtonBlockClass",
+                                "kcButtonLargeClass"
                             )}
                             type="submit"
                             value={msgStr("doSubmit")}
                         />
                         {isAppInitiatedAction && (
                             <button
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonDefaultClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
                                 type="submit"
                                 name="cancel-aia"
                                 value="true"
@@ -83,14 +79,14 @@ export default function UpdateEmail(props: UpdateEmailProps) {
     );
 }
 
-function LogoutOtherSessions(props: { getClassName: ReturnType<typeof useGetClassName>["getClassName"]; i18n: I18n }) {
-    const { getClassName, i18n } = props;
+function LogoutOtherSessions(props: { kcClsx: KcClsx; i18n: I18n }) {
+    const { kcClsx, i18n } = props;
 
     const { msg } = i18n;
 
     return (
-        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-            <div className={getClassName("kcFormOptionsWrapperClass")}>
+        <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+            <div className={kcClsx("kcFormOptionsWrapperClass")}>
                 <div className="checkbox">
                     <label>
                         <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" defaultChecked={true} />

package/src/login/pages/WebauthnAuthenticate.tsx

@@ -2,15 +2,15 @@ import { useEffect, Fragment } from "react";
 import { assert } from "tsafe/assert";
 import { clsx } from "keycloakify/tools/clsx";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
     const {
         url,
@@ -26,7 +26,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
         shouldDisplayAuthenticators
     } = kcContext;
 
-    const { msg, msgStr, advancedMsg } = i18n;
+    const { msg, msgStr, advancedMsg } = useI18n({ kcContext });
 
     const { insertScriptTags } = useInsertScriptTags({
         componentOrHookName: "WebauthnAuthenticate",
@@ -136,7 +136,9 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             displayMessage={!messagesPerField.existsError("username")}
             displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
             infoNode={
@@ -151,7 +153,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
             }
             headerNode={msg("webauthn-login-title")}
         >
-            <div id="kc-form-webauthn" className={getClassName("kcFormClass")}>
+            <div id="kc-form-webauthn" className={kcClsx("kcFormClass")}>
                 <form id="webauth" action={url.loginAction} method="post">
                     <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
                     <input type="hidden" id="authenticatorData" name="authenticatorData" />
@@ -160,10 +162,10 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                     <input type="hidden" id="userHandle" name="userHandle" />
                     <input type="hidden" id="error" name="error" />
                 </form>
-                <div className={clsx(getClassName("kcFormGroupClass"), "no-bottom-margin")}>
+                <div className={clsx(kcClsx("kcFormGroupClass"), "no-bottom-margin")}>
                     {authenticators && (
                         <>
-                            <form id="authn_select" className={getClassName("kcFormClass")}>
+                            <form id="authn_select" className={kcClsx("kcFormClass")}>
                                 {authenticators.authenticators.map(authenticator => (
                                     <input type="hidden" name="authn_use_chk" value={authenticator.credentialId} />
                                 ))}
@@ -172,36 +174,33 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                             {shouldDisplayAuthenticators && (
                                 <>
                                     {authenticators.authenticators.length > 1 && (
-                                        <p className={getClassName("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
+                                        <p className={kcClsx("kcSelectAuthListItemTitle")}>{msg("webauthn-available-authenticators")}</p>
                                     )}
-                                    <div className={getClassName("kcFormOptionsClass")}>
+                                    <div className={kcClsx("kcFormOptionsClass")}>
                                         {authenticators.authenticators.map((authenticator, i) => (
-                                            <div key={i} id="kc-webauthn-authenticator" className={getClassName("kcSelectAuthListItemClass")}>
-                                                <div className={getClassName("kcSelectAuthListItemIconClass")}>
+                                            <div key={i} id="kc-webauthn-authenticator" className={kcClsx("kcSelectAuthListItemClass")}>
+                                                <div className={kcClsx("kcSelectAuthListItemIconClass")}>
                                                     <i
                                                         className={clsx(
                                                             (() => {
-                                                                const className = getClassName(authenticator.transports.iconClass as any);
+                                                                const className = kcClsx(authenticator.transports.iconClass as any);
                                                                 if (className === authenticator.transports.iconClass) {
-                                                                    return getClassName("kcWebAuthnDefaultIcon");
+                                                                    return kcClsx("kcWebAuthnDefaultIcon");
                                                                 }
                                                                 return className;
                                                             })(),
-                                                            getClassName("kcSelectAuthListItemIconPropertyClass")
+                                                            kcClsx("kcSelectAuthListItemIconPropertyClass")
                                                         )}
                                                     />
                                                 </div>
-                                                <div className={getClassName("kcSelectAuthListItemArrowIconClass")}>
-                                                    <div
-                                                        id="kc-webauthn-authenticator-label"
-                                                        className={getClassName("kcSelectAuthListItemHeadingClass")}
-                                                    >
+                                                <div className={kcClsx("kcSelectAuthListItemArrowIconClass")}>
+                                                    <div id="kc-webauthn-authenticator-label" className={kcClsx("kcSelectAuthListItemHeadingClass")}>
                                                         {advancedMsg(authenticator.label)}
                                                     </div>
                                                     {authenticator.transports.displayNameProperties?.length && (
                                                         <div
                                                             id="kc-webauthn-authenticator-transport"
-                                                            className={getClassName("kcSelectAuthListItemDescriptionClass")}
+                                                            className={kcClsx("kcSelectAuthListItemDescriptionClass")}
                                                         >
                                                             {authenticator.transports.displayNameProperties
                                                                 .map((nameProperty, i, arr) => ({
@@ -216,11 +215,11 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                                                                 ))}
                                                         </div>
                                                     )}
-                                                    <div className={getClassName("kcSelectAuthListItemDescriptionClass")}>
+                                                    <div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>
                                                         <span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
                                                         <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
                                                     </div>
-                                                    <div className={getClassName("kcSelectAuthListItemFillClass")} />
+                                                    <div className={kcClsx("kcSelectAuthListItemFillClass")} />
                                                 </div>
                                             </div>
                                         ))}
@@ -230,7 +229,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                         </>
                     )}
 
-                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
                         <input
                             id="authenticateWebAuthnButton"
                             type="button"
@@ -241,12 +240,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                             }}
                             autoFocus
                             value={msgStr("webauthn-doAuthenticate")}
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonPrimaryClass"),
-                                getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
+                            className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                         />
                     </div>
                 </div>

package/src/login/pages/WebauthnError.tsx

@@ -1,24 +1,23 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function WebauthnError(props: PageProps<Extract<KcContext, { pageId: "webauthn-error.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function WebauthnError(props: PageProps<Extract<KcContext, { pageId: "webauthn-error.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
     const { url, isAppInitiatedAction } = kcContext;
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr } = useI18n({ kcContext });
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage headerNode={msg("webauthn-error-title")}>
-            <form id="kc-error-credential-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} displayMessage headerNode={msg("webauthn-error-title")}>
+            <form id="kc-error-credential-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
                 <input type="hidden" id="executionValue" name="authenticationExecution" />
                 <input type="hidden" id="isSetRetry" name="isSetRetry" />
             </form>
@@ -33,26 +32,16 @@ export default function WebauthnError(props: PageProps<Extract<KcContext, { page
                     document.getElementById("kc-error-credential-form").submit();
                 }}
                 type="button"
-                className={clsx(
-                    getClassName("kcButtonClass"),
-                    getClassName("kcButtonPrimaryClass"),
-                    getClassName("kcButtonBlockClass"),
-                    getClassName("kcButtonLargeClass")
-                )}
+                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                 name="try-again"
                 id="kc-try-again"
                 value={msgStr("doTryAgain")}
             />
             {isAppInitiatedAction && (
-                <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-webauthn-settings-form" method="post">
+                <form action={url.loginAction} className={kcClsx("kcFormClass")} id="kc-webauthn-settings-form" method="post">
                     <button
                         type="submit"
-                        className={clsx(
-                            getClassName("kcButtonClass"),
-                            getClassName("kcButtonDefaultClass"),
-                            getClassName("kcButtonBlockClass"),
-                            getClassName("kcButtonLargeClass")
-                        )}
+                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                         id="cancelWebAuthnAIA"
                         name="cancel-aia"
                         value="true"

package/src/login/pages/WebauthnRegister.tsx

@@ -1,16 +1,15 @@
 import { useEffect } from "react";
 import { assert } from "tsafe/assert";
-import { clsx } from "keycloakify/tools/clsx";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n, type I18n } from "../i18n";
 
-export default function WebauthnRegister(props: PageProps<Extract<KcContext, { pageId: "webauthn-register.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function WebauthnRegister(props: PageProps<Extract<KcContext, { pageId: "webauthn-register.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
     const {
         url,
@@ -30,6 +29,7 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
         isAppInitiatedAction
     } = kcContext;
 
+    const i18n = useI18n({ kcContext });
     const { msg, msgStr } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
@@ -206,33 +206,30 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             headerNode={
                 <>
-                    <span className={getClassName("kcWebAuthnKeyIcon")} />
+                    <span className={kcClsx("kcWebAuthnKeyIcon")} />
                     {msg("webauthn-registration-title")}
                 </>
             }
         >
-            <form id="register" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                <div className={getClassName("kcFormGroupClass")}>
+            <form id="register" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+                <div className={kcClsx("kcFormGroupClass")}>
                     <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
                     <input type="hidden" id="attestationObject" name="attestationObject" />
                     <input type="hidden" id="publicKeyCredentialId" name="publicKeyCredentialId" />
                     <input type="hidden" id="authenticatorLabel" name="authenticatorLabel" />
                     <input type="hidden" id="transports" name="transports" />
                     <input type="hidden" id="error" name="error" />
-                    <LogoutOtherSessions {...{ i18n, getClassName }} />
+                    <LogoutOtherSessions kcClsx={kcClsx} i18n={i18n} />
                 </div>
             </form>
             <input
                 type="submit"
-                className={clsx(
-                    getClassName("kcButtonClass"),
-                    getClassName("kcButtonPrimaryClass"),
-                    getClassName("kcButtonBlockClass"),
-                    getClassName("kcButtonLargeClass")
-                )}
+                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                 id="registerWebAuthn"
                 value={msgStr("doRegisterSecurityKey")}
                 onClick={() => {
@@ -243,15 +240,10 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
             />
 
             {!isSetRetry && isAppInitiatedAction && (
-                <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-webauthn-settings-form" method="post">
+                <form action={url.loginAction} className={kcClsx("kcFormClass")} id="kc-webauthn-settings-form" method="post">
                     <button
                         type="submit"
-                        className={clsx(
-                            getClassName("kcButtonClass"),
-                            getClassName("kcButtonDefaultClass"),
-                            getClassName("kcButtonBlockClass"),
-                            getClassName("kcButtonLargeClass")
-                        )}
+                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonBlockClass", "kcButtonLargeClass")}
                         id="cancelWebAuthnAIA"
                         name="cancel-aia"
                         value="true"
@@ -264,14 +256,14 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
     );
 }
 
-function LogoutOtherSessions(props: { i18n: I18n; getClassName: ReturnType<typeof useGetClassName>["getClassName"] }) {
-    const { getClassName, i18n } = props;
+function LogoutOtherSessions(props: { kcClsx: KcClsx; i18n: I18n }) {
+    const { kcClsx, i18n } = props;
 
     const { msg } = i18n;
 
     return (
-        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-            <div className={getClassName("kcFormOptionsWrapperClass")}>
+        <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+            <div className={kcClsx("kcFormOptionsWrapperClass")}>
                 <div className="checkbox">
                     <label>
                         <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" defaultChecked={true} />

package/src/tools/clsx.ts

@@ -1,50 +1,8 @@
-import { assert } from "tsafe/assert";
-import { typeGuard } from "tsafe/typeGuard";
+import { id } from "tsafe";
+import { clsx_withTransform, type CxArg as CxArg_generic } from "./clsx_withTransform";
 
-export type CxArg =
-    | undefined
-    | null
-    | string
-    | boolean
-    | Partial<Record<string, boolean | null | undefined>>
-    | readonly CxArg[];
+export type CxArg = CxArg_generic<string>;
 
-export const clsx = (...args: CxArg[]): string => {
-    const len = args.length;
-    let i = 0;
-    let cls = "";
-    for (; i < len; i++) {
-        const arg = args[i];
-        if (arg == null) continue;
-
-        let toAdd;
-        switch (typeof arg) {
-            case "boolean":
-                break;
-            case "object": {
-                if (Array.isArray(arg)) {
-                    toAdd = clsx(...arg);
-                } else {
-                    assert(!typeGuard<{ length: number }>(arg, false));
-
-                    toAdd = "";
-                    for (const k in arg) {
-                        if (arg[k as string] && k) {
-                            toAdd && (toAdd += " ");
-                            toAdd += k;
-                        }
-                    }
-                }
-                break;
-            }
-            default: {
-                toAdd = arg;
-            }
-        }
-        if (toAdd) {
-            cls && (cls += " ");
-            cls += toAdd;
-        }
-    }
-    return cls;
-};
+export function clsx(...args: CxArg[]): string {
+    return clsx_withTransform({ args, transform: id });
+}

package/src/tools/clsx_withTransform.ts

@@ -0,0 +1,55 @@
+import { assert } from "tsafe/assert";
+import { typeGuard } from "tsafe/typeGuard";
+
+export type CxArg<ClassName extends string = string> =
+    | undefined
+    | null
+    | ClassName
+    | boolean
+    | Partial<Record<ClassName, boolean | null | undefined>>
+    | readonly CxArg<ClassName>[];
+
+export function clsx_withTransform(params: {
+    args: CxArg[];
+    transform: (arg: string) => string;
+}): string {
+    const { args, transform } = params;
+
+    const len = args.length;
+    let i = 0;
+    let cls = "";
+    for (; i < len; i++) {
+        const arg = args[i];
+        if (arg == null) continue;
+
+        let toAdd;
+        switch (typeof arg) {
+            case "boolean":
+                break;
+            case "object": {
+                if (Array.isArray(arg)) {
+                    toAdd = clsx_withTransform({ args: arg, transform });
+                } else {
+                    assert(!typeGuard<{ length: number }>(arg, false));
+
+                    toAdd = "";
+                    for (const k in arg) {
+                        if (arg[k] && k) {
+                            toAdd && (toAdd += " ");
+                            toAdd += transform(k);
+                        }
+                    }
+                }
+                break;
+            }
+            default: {
+                toAdd = transform(arg);
+            }
+        }
+        if (toAdd) {
+            cls && (cls += " ");
+            cls += toAdd;
+        }
+    }
+    return cls;
+}