keycloakify 10.0.0-rc.8 → 10.0.0-rc.80

package/src/login/i18n/i18n.tsx

@@ -1,11 +1,8 @@
-import "minimal-polyfills/Object.fromEntries";
-//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
-import { useEffect, useState, useRef } from "react";
-import fallbackMessages from "./baseMessages/en";
-import { getMessages } from "./baseMessages";
+import "keycloakify/tools/Object.fromEntries";
 import { assert } from "tsafe/assert";
-import type { KcContext } from "../kcContext/KcContext";
-import { Markdown } from "keycloakify/tools/Markdown";
+import messages_fallbackLanguage from "./baseMessages/en";
+import { getMessages } from "./baseMessages";
+import type { KcContext } from "../KcContext";
 
 export const fallbackLanguageTag = "en";
 
@@ -14,11 +11,15 @@ export type KcContextLike = {
         currentLanguageTag: string;
         supported: { languageTag: string; url: string; label: string }[];
     };
+    "x-keycloakify": {
+        realmMessageBundleUserProfile: Record<string, string> | undefined;
+        realmMessageBundleTermsText: string | undefined;
+    };
 };
 
 assert<KcContext extends KcContextLike ? true : false>();
 
-export type MessageKey = keyof typeof fallbackMessages | keyof (typeof keycloakifyExtraMessages)[typeof fallbackLanguageTag];
+export type MessageKey = keyof typeof messages_fallbackLanguage;
 
 export type GenericI18n<MessageKey extends string> = {
     /**
@@ -31,7 +32,7 @@ export type GenericI18n<MessageKey extends string> = {
      * Redirect to this url to change the language.
      * After reload currentLanguageTag === newLanguageTag
      */
-    getChangeLocalUrl: (newLanguageTag: string) => string;
+    getChangeLocaleUrl: (newLanguageTag: string) => string;
     /**
      * e.g. "en" => "English", "fr" => "Français", ...
      *
@@ -53,180 +54,267 @@ export type GenericI18n<MessageKey extends string> = {
      */
     msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
     /**
+     * This is meant to be used when the key argument is variable, something that might have been configured by the user
+     * in the Keycloak admin for example.
+     *
      * Examples assuming currentLanguageTag === "en"
-     * advancedMsg("${access-denied} foo bar") === <span>${msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "foo": "Foo {0} {1}",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * advancedMsg("${access-denied} foo bar") === <span>{msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
      * advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied") === <span>Access denied</span>
      * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === <span>not-a-message-key</span>
+     * advancedMsg("${bar}", "<strong>c</strong>")
+     *    === <span>{msgStr("bar", "<strong>XXX</strong>")}<span>
+     *    === <span>Bar &lt;strong&gt;XXX&lt;/strong&gt;</span> (The html in the arg is partially escaped for security reasons, it might be untrusted)
+     * advancedMsg("${foo} xx ${bar}", "a", "b", "c")
+     *    === <span>{msgStr("foo", "a", "b")} xx {msgStr("bar")}<span>
+     *    === <span>Foo a b xx Bar {0}</span> (The substitution are only applied in the first message)
      */
     advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
     /**
-     * Examples assuming currentLanguageTag === "en"
-     * advancedMsg("${access-denied} foo bar") === msg("access-denied") + " foo bar" === "Access denied foo bar"
-     * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === "not-a-message-key"
+     * See advancedMsg() but instead of returning a JSX.Element it returns a string.
      */
     advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
-};
 
-export type I18n = GenericI18n<MessageKey>;
+    /**
+     * Initially the messages are in english (fallback language).
+     * The translations in the current language are being fetched dynamically.
+     * This property is true while the translations are being fetched.
+     */
+    isFetchingTranslations: boolean;
+};
 
-export function createUseI18n<ExtraMessageKey extends string = never>(extraMessages: {
+export function createGetI18n<ExtraMessageKey extends string = never>(messageBundle: {
     [languageTag: string]: { [key in ExtraMessageKey]: string };
 }) {
-    function useI18n(params: { kcContext: KcContextLike }): GenericI18n<MessageKey | ExtraMessageKey> | null {
-        const { kcContext } = params;
+    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
 
-        const [i18n, setI18n] = useState<GenericI18n<ExtraMessageKey | MessageKey> | undefined>(undefined);
+    type Result = { i18n: I18n; prI18n_currentLanguage: Promise<I18n> | undefined };
+
+    const cachedResultByKcContext = new WeakMap<KcContextLike, Result>();
+
+    function getI18n(params: { kcContext: KcContextLike }): Result {
+        const { kcContext } = params;
 
-        const refHasStartedFetching = useRef(false);
+        use_cache: {
+            const cachedResult = cachedResultByKcContext.get(kcContext);
 
-        useEffect(() => {
-            if (refHasStartedFetching.current) {
-                return;
+            if (cachedResult === undefined) {
+                break use_cache;
             }
 
-            refHasStartedFetching.current = true;
-
-            (async () => {
-                const { currentLanguageTag = fallbackLanguageTag } = kcContext.locale ?? {};
-
-                setI18n({
-                    ...createI18nTranslationFunctions({
-                        "fallbackMessages": {
-                            ...fallbackMessages,
-                            ...(keycloakifyExtraMessages[fallbackLanguageTag] ?? {}),
-                            ...(extraMessages[fallbackLanguageTag] ?? {})
-                        } as any,
-                        "messages": {
-                            ...(await getMessages(currentLanguageTag)),
-                            ...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
-                            ...(extraMessages[currentLanguageTag] ?? {})
-                        } as any
-                    }),
-                    currentLanguageTag,
-                    "getChangeLocalUrl": newLanguageTag => {
-                        const { locale } = kcContext;
-
-                        assert(locale !== undefined, "Internationalization not enabled");
-
-                        const targetSupportedLocale = locale.supported.find(({ languageTag }) => languageTag === newLanguageTag);
-
-                        assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
-
-                        return targetSupportedLocale.url;
-                    },
-                    "labelBySupportedLanguageTag": Object.fromEntries(
-                        (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
-                    )
-                });
-            })();
-        }, []);
+            return cachedResult;
+        }
+
+        const partialI18n: Pick<I18n, "currentLanguageTag" | "getChangeLocaleUrl" | "labelBySupportedLanguageTag"> = {
+            currentLanguageTag: kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag,
+            getChangeLocaleUrl: newLanguageTag => {
+                const { locale } = kcContext;
+
+                assert(locale !== undefined, "Internationalization not enabled");
+
+                const targetSupportedLocale = locale.supported.find(({ languageTag }) => languageTag === newLanguageTag);
+
+                assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
 
-        return i18n ?? null;
+                return targetSupportedLocale.url;
+            },
+            labelBySupportedLanguageTag: Object.fromEntries((kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label]))
+        };
+
+        const { createI18nTranslationFunctions } = createI18nTranslationFunctionsFactory<MessageKey, ExtraMessageKey>({
+            messages_fallbackLanguage,
+            messageBundle_fallbackLanguage: messageBundle[fallbackLanguageTag],
+            messageBundle_currentLanguage: messageBundle[partialI18n.currentLanguageTag],
+            realmMessageBundleUserProfile: kcContext["x-keycloakify"].realmMessageBundleUserProfile,
+            realmMessageBundleTermsText: kcContext["x-keycloakify"].realmMessageBundleTermsText
+        });
+
+        const isCurrentLanguageFallbackLanguage = partialI18n.currentLanguageTag === fallbackLanguageTag;
+
+        const result: Result = {
+            i18n: {
+                ...partialI18n,
+                ...createI18nTranslationFunctions({
+                    messages_currentLanguage: isCurrentLanguageFallbackLanguage ? messages_fallbackLanguage : undefined
+                }),
+                isFetchingTranslations: !isCurrentLanguageFallbackLanguage
+            },
+            prI18n_currentLanguage: isCurrentLanguageFallbackLanguage
+                ? undefined
+                : (async () => {
+                      const messages_currentLanguage = await getMessages(partialI18n.currentLanguageTag);
+
+                      const i18n_currentLanguage: I18n = {
+                          ...partialI18n,
+                          ...createI18nTranslationFunctions({ messages_currentLanguage }),
+                          isFetchingTranslations: false
+                      };
+
+                      // NOTE: This promise.resolve is just because without it we TypeScript
+                      // gives a Variable 'result' is used before being assigned. error
+                      await Promise.resolve().then(() => {
+                          result.i18n = i18n_currentLanguage;
+                          result.prI18n_currentLanguage = undefined;
+                      });
+
+                      return i18n_currentLanguage;
+                  })()
+        };
+
+        cachedResultByKcContext.set(kcContext, result);
+
+        return result;
     }
 
-    return { useI18n };
+    return { getI18n };
 }
 
-function createI18nTranslationFunctions<MessageKey extends string>(params: {
-    fallbackMessages: Record<MessageKey, string>;
-    messages: Record<MessageKey, string>;
-}): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
-    const { fallbackMessages, messages } = params;
+function createI18nTranslationFunctionsFactory<MessageKey extends string, ExtraMessageKey extends string>(params: {
+    messages_fallbackLanguage: Record<MessageKey, string>;
+    messageBundle_fallbackLanguage: Record<ExtraMessageKey, string> | undefined;
+    messageBundle_currentLanguage: Partial<Record<ExtraMessageKey, string>> | undefined;
+    realmMessageBundleUserProfile: Record<string, string> | undefined;
+    realmMessageBundleTermsText: string | undefined;
+}) {
+    const { messageBundle_currentLanguage, realmMessageBundleUserProfile, realmMessageBundleTermsText } = params;
 
-    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): string | JSX.Element | undefined {
-        const { key, args, doRenderMarkdown } = props;
+    const messages_fallbackLanguage = {
+        ...params.messages_fallbackLanguage,
+        ...params.messageBundle_fallbackLanguage
+    };
 
-        const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
+    function createI18nTranslationFunctions(params: {
+        messages_currentLanguage: Partial<Record<MessageKey, string>> | undefined;
+    }): Pick<GenericI18n<MessageKey | ExtraMessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
+        const messages_currentLanguage = {
+            ...params.messages_currentLanguage,
+            ...messageBundle_currentLanguage
+        };
 
-        if (messageOrUndefined === undefined) {
-            return undefined;
-        }
+        function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
+            const { key, args, doRenderAsHtml } = props;
 
-        const message = messageOrUndefined;
+            const messageOrUndefined: string | undefined = (() => {
+                const messageOrUndefined = (messages_currentLanguage as any)[key] ?? (messages_fallbackLanguage as any)[key];
 
-        const messageWithArgsInjectedIfAny = (() => {
-            const startIndex = message
-                .match(/{[0-9]+}/g)
-                ?.map(g => g.match(/{([0-9]+)}/)![1])
-                .map(indexStr => parseInt(indexStr))
-                .sort((a, b) => a - b)[0];
+                if (key === "termsText") {
+                    return realmMessageBundleTermsText;
+                }
+
+                return messageOrUndefined;
+            })();
 
-            if (startIndex === undefined) {
-                // No {0} in message (no arguments expected)
-                return message;
+            if (messageOrUndefined === undefined) {
+                return undefined;
             }
 
-            let messageWithArgsInjected = message;
+            const message = messageOrUndefined;
+
+            const messageWithArgsInjectedIfAny = (() => {
+                const startIndex = message
+                    .match(/{[0-9]+}/g)
+                    ?.map(g => g.match(/{([0-9]+)}/)![1])
+                    .map(indexStr => parseInt(indexStr))
+                    .sort((a, b) => a - b)[0];
 
-            args.forEach((arg, i) => {
-                if (arg === undefined) {
-                    return;
+                if (startIndex === undefined) {
+                    // No {0} in message (no arguments expected)
+                    return message;
                 }
 
-                messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
-            });
+                let messageWithArgsInjected = message;
 
-            return messageWithArgsInjected;
-        })();
+                args.forEach((arg, i) => {
+                    if (arg === undefined) {
+                        return;
+                    }
 
-        return doRenderMarkdown ? (
-            <Markdown allowDangerousHtml renderers={{ "paragraph": "span" }}>
-                {messageWithArgsInjectedIfAny}
-            </Markdown>
-        ) : (
-            messageWithArgsInjectedIfAny
-        );
-    }
+                    messageWithArgsInjected = messageWithArgsInjected.replace(
+                        new RegExp(`\\{${i + startIndex}\\}`, "g"),
+                        arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                    );
+                });
 
-    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): JSX.Element | string {
-        const { key, args, doRenderMarkdown } = props;
+                return messageWithArgsInjected;
+            })();
 
-        const match = key.match(/^\$\{([^{]+)\}$/);
+            return doRenderAsHtml ? (
+                <span
+                    // NOTE: The message is trusted. The arguments are not but are escaped.
+                    dangerouslySetInnerHTML={{
+                        __html: messageWithArgsInjectedIfAny
+                    }}
+                />
+            ) : (
+                messageWithArgsInjectedIfAny
+            );
+        }
 
-        const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
+        function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
+            const { key, args, doRenderAsHtml } = props;
+
+            if (realmMessageBundleUserProfile !== undefined && key in realmMessageBundleUserProfile) {
+                const resolvedMessage = realmMessageBundleUserProfile[key];
+
+                return doRenderAsHtml ? (
+                    <span
+                        // NOTE: The message is trusted. The arguments are not but are escaped.
+                        dangerouslySetInnerHTML={{
+                            __html: resolvedMessage
+                        }}
+                    />
+                ) : (
+                    resolvedMessage
+                );
+            }
 
-        const out = resolveMsg({
-            "key": keyUnwrappedFromCurlyBraces,
-            args,
-            doRenderMarkdown
-        });
+            if (!/\$\{[^}]+\}/.test(key)) {
+                const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
 
-        return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
-    }
+                if (resolvedMessage === undefined) {
+                    return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
+                }
 
-    return {
-        "msgStr": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": false }) as string,
-        "msg": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": true }) as JSX.Element,
-        "advancedMsg": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": true }) as JSX.Element,
-        "advancedMsgStr": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": false }) as string
-    };
-}
+                return resolvedMessage;
+            }
+
+            let isFirstMatch = true;
 
-const keycloakifyExtraMessages = {
-    "en": {
-        "shouldBeEqual": "{0} should be equal to {1}",
-        "shouldBeDifferent": "{0} should be different to {1}",
-        "shouldMatchPattern": "Pattern should match: `/{0}/`",
-        "mustBeAnInteger": "Must be an integer",
-        "notAValidOption": "Not a valid option",
-        "selectAnOption": "Select an option",
-        "remove": "Remove",
-        "addValue": "Add value"
-    },
-    "fr": {
-        /* spell-checker: disable */
-        "shouldBeEqual": "{0} doit être égal à {1}",
-        "shouldBeDifferent": "{0} doit être différent de {1}",
-        "shouldMatchPattern": "Dois respecter le schéma: `/{0}/`",
-        "mustBeAnInteger": "Doit être un nombre entier",
-        "notAValidOption": "N'est pas une option valide",
-
-        "logoutConfirmTitle": "Déconnexion",
-        "logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
-        "doLogout": "Se déconnecter",
-        "selectAnOption": "Sélectionner une option",
-        "remove": "Supprimer",
-        "addValue": "Ajouter une valeur"
-        /* spell-checker: enable */
+            const resolvedComplexMessage = key.replace(/\$\{([^}]+)\}/g, (...[, key_i]) => {
+                const replaceBy = resolveMsg({ key: key_i, args: isFirstMatch ? args : [], doRenderAsHtml: false }) ?? key_i;
+
+                isFirstMatch = false;
+
+                return replaceBy;
+            });
+
+            return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
+        }
+
+        return {
+            msgStr: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: false }) as string,
+            msg: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: true }) as JSX.Element,
+            advancedMsg: (key, ...args) =>
+                resolveMsgAdvanced({
+                    key,
+                    args,
+                    doRenderAsHtml: true
+                }) as JSX.Element,
+            advancedMsgStr: (key, ...args) =>
+                resolveMsgAdvanced({
+                    key,
+                    args,
+                    doRenderAsHtml: false
+                }) as string
+        };
     }
-};
+
+    return { createI18nTranslationFunctions };
+}

package/src/login/i18n/index.ts

@@ -1 +1,5 @@
-export type { I18n } from "./i18n";
+import type { GenericI18n, MessageKey, KcContextLike } from "./i18n";
+export type { MessageKey, KcContextLike };
+export type I18n = GenericI18n<MessageKey>;
+export { createUseI18n } from "./useI18n";
+export { fallbackLanguageTag } from "./i18n";

package/src/login/i18n/useI18n.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import {
+    createGetI18n,
+    type GenericI18n,
+    type MessageKey,
+    type KcContextLike
+} from "./i18n";
+import { Reflect } from "tsafe/Reflect";
+
+export function createUseI18n<ExtraMessageKey extends string = never>(extraMessages: {
+    [languageTag: string]: { [key in ExtraMessageKey]: string };
+}) {
+    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
+
+    const { getI18n } = createGetI18n(extraMessages);
+
+    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
+        const { kcContext } = params;
+
+        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+
+        const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(i18n);
+
+        useEffect(() => {
+            let isActive = true;
+
+            prI18n_currentLanguage?.then(i18n => {
+                if (!isActive) {
+                    return;
+                }
+
+                setI18n_toReturn(i18n);
+            });
+
+            return () => {
+                isActive = false;
+            };
+        }, []);
+
+        return { i18n: i18n_toReturn };
+    }
+
+    return { useI18n, ofTypeI18n: Reflect<I18n>() };
+}

package/src/login/index.ts

@@ -1,11 +1,4 @@
-import Fallback from "keycloakify/login/Fallback";
-
-export default Fallback;
-
+export type { ExtendKcContext, Attribute } from "keycloakify/login/KcContext";
+export type { ClassKey } from "keycloakify/login/TemplateProps";
 export { useDownloadTerms } from "keycloakify/login/lib/useDownloadTerms";
-export { getKcContext } from "keycloakify/login/kcContext/getKcContext";
-export { createGetKcContext } from "keycloakify/login/kcContext/createGetKcContext";
-export type { LoginThemePageId as PageId } from "keycloakify/bin/shared/constants";
-export { createUseI18n } from "keycloakify/login/i18n/i18n";
-
-export type { PageProps } from "keycloakify/login/pages/PageProps";
+export { createUseI18n } from "keycloakify/login/i18n";

package/src/login/lib/kcClsx.ts

@@ -0,0 +1,143 @@
+import { createGetKcClsx } from "keycloakify/lib/getKcClsx";
+import type { ClassKey } from "keycloakify/login/TemplateProps";
+
+export const { getKcClsx } = createGetKcClsx<ClassKey>({
+    defaultClasses: {
+        kcHtmlClass: "login-pf",
+        kcBodyClass: undefined,
+        kcHeaderWrapperClass: undefined,
+        kcLocaleWrapperClass: undefined,
+        kcInfoAreaWrapperClass: undefined,
+        kcFormButtonsWrapperClass: undefined,
+        kcFormOptionsWrapperClass: undefined,
+        kcLocaleDropDownClass: undefined,
+        kcLocaleListItemClass: undefined,
+        kcContentWrapperClass: undefined,
+        kcCheckboxInputClass: undefined,
+
+        "kcLogoIdP-facebook": "fa fa-facebook",
+        kcAuthenticatorOTPClass: "fa fa-mobile list-view-pf-icon-lg",
+        "kcLogoIdP-bitbucket": "fa fa-bitbucket",
+        kcAuthenticatorWebAuthnClass: "fa fa-key list-view-pf-icon-lg",
+        kcWebAuthnDefaultIcon: "pficon pficon-key",
+        "kcLogoIdP-stackoverflow": "fa fa-stack-overflow",
+        kcSelectAuthListItemClass: "pf-l-stack__item select-auth-box-parent pf-l-split",
+        "kcLogoIdP-microsoft": "fa fa-windows",
+        kcLoginOTPListItemHeaderClass: "pf-c-tile__header",
+        kcLocaleItemClass: "pf-c-dropdown__menu-item",
+        kcLoginOTPListItemIconBodyClass: "pf-c-tile__icon",
+        kcInputHelperTextAfterClass:
+            "pf-c-form__helper-text pf-c-form__helper-text-after",
+        kcFormClass: "form-horizontal",
+        kcSelectAuthListClass: "pf-l-stack select-auth-container",
+        kcInputClassRadioCheckboxLabelDisabled: "pf-m-disabled",
+        kcSelectAuthListItemIconClass: "pf-l-split__item select-auth-box-icon",
+        kcRecoveryCodesWarning: "kc-recovery-codes-warning",
+        kcFormSettingClass: "login-pf-settings",
+        kcWebAuthnBLE: "fa fa-bluetooth-b",
+        kcInputWrapperClass: "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        kcSelectAuthListItemArrowIconClass: "fa fa-angle-right fa-lg",
+        kcFeedbackAreaClass: "col-md-12",
+        kcFormPasswordVisibilityButtonClass: "pf-c-button pf-m-control",
+        "kcLogoIdP-google": "fa fa-google",
+        kcCheckLabelClass: "pf-c-check__label",
+        kcSelectAuthListItemFillClass: "pf-l-split__item pf-m-fill",
+        kcAuthenticatorDefaultClass: "fa fa-list list-view-pf-icon-lg",
+        "kcLogoIdP-gitlab": "fa fa-gitlab",
+        kcFormAreaClass:
+            "col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2",
+        kcFormButtonsClass: "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        kcInputClassRadioLabel: "pf-c-radio__label",
+        kcAuthenticatorWebAuthnPasswordlessClass: "fa fa-key list-view-pf-icon-lg",
+        kcSelectAuthListItemHeadingClass:
+            "pf-l-stack__item select-auth-box-headline pf-c-title",
+        kcInfoAreaClass: "col-xs-12 col-sm-4 col-md-4 col-lg-5 details",
+        kcLogoLink: "http://www.keycloak.org",
+        kcContainerClass: "container-fluid",
+        kcSelectAuthListItemTitle: "select-auth-box-paragraph",
+        kcLoginOTPListItemTitleClass: "pf-c-tile__title",
+        "kcLogoIdP-openshift-v4": "pf-icon pf-icon-openshift",
+        kcWebAuthnUnknownIcon: "pficon pficon-key unknown-transport-class",
+        kcFormSocialAccountNameClass: "kc-social-provider-name",
+        "kcLogoIdP-openshift-v3": "pf-icon pf-icon-openshift",
+        kcLoginOTPListInputClass: "pf-c-tile__input",
+        kcWebAuthnUSB: "fa fa-usb",
+        kcInputClassRadio: "pf-c-radio",
+        kcWebAuthnKeyIcon: "pficon pficon-key",
+        kcFeedbackInfoIcon: "fa fa-fw fa-info-circle",
+        kcCommonLogoIdP: "kc-social-provider-logo kc-social-gray",
+        kcRecoveryCodesActions: "kc-recovery-codes-actions",
+        kcFormGroupHeader: "pf-c-form__group",
+        kcFormSocialAccountSectionClass: "kc-social-section kc-social-gray",
+        "kcLogoIdP-instagram": "fa fa-instagram",
+        kcAlertClass: "pf-c-alert pf-m-inline",
+        kcHeaderClass: "login-pf-page-header",
+        kcLabelWrapperClass: "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        kcFormPasswordVisibilityIconShow: "fa fa-eye",
+        kcFormSocialAccountLinkClass: "pf-c-login__main-footer-links-item-link",
+        kcLocaleMainClass: "pf-c-dropdown",
+        kcInputGroup: "pf-c-input-group",
+        kcTextareaClass: "form-control",
+        kcButtonBlockClass: "pf-m-block",
+        kcButtonClass: "pf-c-button",
+        kcWebAuthnNFC: "fa fa-wifi",
+        kcLocaleClass: "col-xs-12 col-sm-1",
+        kcInputClassCheckboxInput: "pf-c-check__input",
+        kcFeedbackErrorIcon: "fa fa-fw fa-exclamation-circle",
+        kcInputLargeClass: "input-lg",
+        kcInputErrorMessageClass:
+            "pf-c-form__helper-text pf-m-error required kc-feedback-text",
+        kcRecoveryCodesList: "kc-recovery-codes-list",
+        kcFormSocialAccountListClass: "pf-c-login__main-footer-links kc-social-links",
+        kcAlertTitleClass: "pf-c-alert__title kc-feedback-text",
+        kcAuthenticatorPasswordClass: "fa fa-unlock list-view-pf-icon-lg",
+        kcCheckInputClass: "pf-c-check__input",
+        "kcLogoIdP-linkedin": "fa fa-linkedin",
+        "kcLogoIdP-twitter": "fa fa-twitter",
+        kcFeedbackWarningIcon: "fa fa-fw fa-exclamation-triangle",
+        kcResetFlowIcon: "pficon pficon-arrow fa",
+        kcSelectAuthListItemIconPropertyClass: "fa-2x select-auth-box-icon-properties",
+        kcFeedbackSuccessIcon: "fa fa-fw fa-check-circle",
+        kcLoginOTPListClass: "pf-c-tile",
+        kcSrOnlyClass: "sr-only",
+        kcFormSocialAccountListGridClass: "pf-l-grid kc-social-grid",
+        kcButtonDefaultClass: "btn-default",
+        kcFormGroupErrorClass: "has-error",
+        kcSelectAuthListItemDescriptionClass: "pf-l-stack__item select-auth-box-desc",
+        kcSelectAuthListItemBodyClass: "pf-l-split__item pf-l-stack",
+        kcWebAuthnInternal: "pficon pficon-key",
+        kcSelectAuthListItemArrowClass: "pf-l-split__item select-auth-box-arrow",
+        kcCheckClass: "pf-c-check",
+        kcContentClass:
+            "col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3",
+        kcLogoClass: "login-pf-brand",
+        kcLoginOTPListItemIconClass: "fa fa-mobile",
+        kcLoginClass: "login-pf-page",
+        kcSignUpClass: "login-pf-signup",
+        kcButtonLargeClass: "btn-lg",
+        kcFormCardClass: "card-pf",
+        kcLocaleListClass: "pf-c-dropdown__menu pf-m-align-right",
+        kcInputClass: "pf-c-form-control",
+        kcFormGroupClass: "form-group",
+        "kcLogoIdP-paypal": "fa fa-paypal",
+        kcInputClassCheckbox: "pf-c-check",
+        kcRecoveryCodesConfirmation: "kc-recovery-codes-confirmation",
+        kcFormPasswordVisibilityIconHide: "fa fa-eye-slash",
+        kcInputClassRadioInput: "pf-c-radio__input",
+        kcFormSocialAccountListButtonClass:
+            "pf-c-button pf-m-control pf-m-block kc-social-item kc-social-gray",
+        kcInputClassCheckboxLabel: "pf-c-check__label",
+        kcFormOptionsClass: "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        kcFormHeaderClass: "login-pf-header",
+        kcFormSocialAccountGridItem: "pf-l-grid__item",
+        kcButtonPrimaryClass: "pf-m-primary",
+        kcInputHelperTextBeforeClass:
+            "pf-c-form__helper-text pf-c-form__helper-text-before",
+        "kcLogoIdP-github": "fa fa-github",
+        kcLabelClass: "pf-c-form__label pf-c-form__label-text"
+    }
+});
+
+export type { ClassKey };
+
+export type KcClsx = ReturnType<typeof getKcClsx>["kcClsx"];