Update dependency tss-react to ^4.3.3

README.md

@@ -49,6 +49,12 @@
 
 # Changelog highlights
 
+## 6.4.0
+
+-   You can now optionally pass a `doFetchDefaultThemeResources: boolean` prop to every page component and the default `<KcApp />`
+    This enables you to prevent the default CSS and JS that comes with the builtin Keycloak theme to be downloaded.  
+    You'll get [a black slate](https://user-images.githubusercontent.com/6702424/192619083-4baa5df4-4a21-4ec7-8e28-d200d1208299.png).
+
 ## 6.0.0
 
 -   Bundle size drastically reduced, locals and component dynamically loaded.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "6.3.5",
+    "version": "6.4.3",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -77,16 +77,16 @@
         "@octokit/rest": "^18.12.0",
         "cheerio": "^1.0.0-rc.5",
         "cli-select": "^1.1.2",
-        "evt": "^2.4.1",
+        "evt": "^2.4.4",
         "memoizee": "^0.4.15",
         "minimal-polyfills": "^2.2.2",
         "minimist": "^1.2.6",
         "path-browserify": "^1.0.1",
-        "powerhooks": "^0.20.16",
+        "powerhooks": "^0.20.20",
         "react-markdown": "^5.0.3",
         "scripting-tools": "^0.19.13",
-        "tsafe": "^1.0.1",
+        "tsafe": "^1.1.1",
-        "tss-react": "^4.1.3",
+        "tss-react": "^4.3.3",
         "zod": "^3.17.10"
     }
 }

src/lib/components/Error.tsx

@@ -4,15 +4,20 @@ import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-const Error = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Error; i18n: I18n } & KcProps) => {
+const Error = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.Error; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { message, client } = kcContext;
 
         const { msg } = i18n;
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 displayMessage={false}
                 headerNode={msg("errorTitle")}
                 formNode={
@@ -29,6 +34,7 @@ const Error = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Er
                 }
             />
         );
-});
+    }
+);
 
 export default Error;

src/lib/components/IdpReviewUserProfile.tsx

@@ -6,7 +6,13 @@ import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
 
-const IdpReviewUserProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.IdpReviewUserProfile; i18n: I18n } & KcProps) => {
+const IdpReviewUserProfile = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.IdpReviewUserProfile; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { cx } = useCssAndCx();
 
         const { msg, msgStr } = i18n;
@@ -17,8 +23,7 @@ const IdpReviewUserProfile = memo(({ kcContext, i18n, ...props }: { kcContext: K
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 headerNode={msg("loginIdpReviewProfileTitle")}
                 formNode={
                     <form id="kc-idp-review-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
@@ -30,7 +35,12 @@ const IdpReviewUserProfile = memo(({ kcContext, i18n, ...props }: { kcContext: K
                             </div>
                             <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
                                 <input
-                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass
+                                    )}
                                     type="submit"
                                     value={msgStr("doSubmit")}
                                     disabled={!isFomSubmittable}
@@ -41,6 +51,7 @@ const IdpReviewUserProfile = memo(({ kcContext, i18n, ...props }: { kcContext: K
                 }
             />
         );
-});
+    }
+);
 
 export default IdpReviewUserProfile;

src/lib/components/Info.tsx

@@ -5,7 +5,13 @@ import { assert } from "../tools/assert";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-const Info = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Info; i18n: I18n } & KcProps) => {
+const Info = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.Info; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { msgStr, msg } = i18n;
 
         assert(kcContext.message !== undefined);
@@ -14,8 +20,7 @@ const Info = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Inf
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 displayMessage={false}
                 headerNode={messageHeader !== undefined ? <>{messageHeader}</> : <>{message.summary}</>}
                 formNode={
@@ -46,6 +51,7 @@ const Info = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Inf
                 }
             />
         );
-});
+    }
+);
 
 export default Info;

src/lib/components/KcApp.tsx

@@ -23,7 +23,12 @@ const LogoutConfirm = lazy(() => import("./LogoutConfirm"));
 const UpdateUserProfile = lazy(() => import("./UpdateUserProfile"));
 const IdpReviewUserProfile = lazy(() => import("./IdpReviewUserProfile"));
 
-const KcApp = memo(({ kcContext, i18n: userProvidedI18n, ...kcProps }: { kcContext: KcContextBase; i18n?: I18n } & KcProps) => {
+const KcApp = memo(
+    ({
+        kcContext,
+        i18n: userProvidedI18n,
+        ...kcProps
+    }: { kcContext: KcContextBase; i18n?: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const i18n = (function useClosure() {
             const i18n = useI18n({
                 kcContext,
@@ -84,6 +89,7 @@ const KcApp = memo(({ kcContext, i18n: userProvidedI18n, ...kcProps }: { kcConte
                 })()}
             </Suspense>
         );
-});
+    }
+);
 
 export default KcApp;

src/lib/components/Login.tsx

@@ -7,7 +7,13 @@ import { useConstCallback } from "powerhooks/useConstCallback";
 import type { FormEventHandler } from "react";
 import type { I18n } from "../i18n";
 
-const Login = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Login; i18n: I18n } & KcProps) => {
+const Login = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.Login; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext;
 
         const { msg, msgStr } = i18n;
@@ -32,8 +38,7 @@ const Login = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Lo
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 displayInfo={social.displayInfo}
                 displayWide={realm.password && social.providers !== undefined}
                 headerNode={msg("doLogIn")}
@@ -41,7 +46,9 @@ const Login = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Lo
                     <div id="kc-form" className={cx(realm.password && social.providers !== undefined && props.kcContentWrapperClass)}>
                         <div
                             id="kc-form-wrapper"
-                        className={cx(realm.password && social.providers && [props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass])}
+                            className={cx(
+                                realm.password && social.providers && [props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass]
+                            )}
                         >
                             {realm.password && (
                                 <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
@@ -190,6 +197,7 @@ const Login = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Lo
                 }
             />
         );
-});
+    }
+);
 
 export default Login;

src/lib/components/LoginConfigTotp.tsx

@@ -5,7 +5,13 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const LoginConfigTotp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginConfigTotp; i18n: I18n } & KcProps) => {
+const LoginConfigTotp = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginConfigTotp; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
 
         const { cx } = useCssAndCx();
@@ -20,8 +26,7 @@ const LoginConfigTotp = memo(({ kcContext, i18n, ...props }: { kcContext: KcCont
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 headerNode={msg("loginTotpTitle")}
                 formNode={
                     <>
@@ -181,6 +186,7 @@ const LoginConfigTotp = memo(({ kcContext, i18n, ...props }: { kcContext: KcCont
                 }
             />
         );
-});
+    }
+);
 
 export default LoginConfigTotp;

src/lib/components/LoginIdpLinkConfirm.tsx

@@ -5,7 +5,13 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const LoginIdpLinkConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm; i18n: I18n } & KcProps) => {
+const LoginIdpLinkConfirm = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginIdpLinkConfirm; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { url, idpAlias } = kcContext;
 
         const { msg } = i18n;
@@ -14,8 +20,7 @@ const LoginIdpLinkConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: Kc
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 headerNode={msg("confirmLinkIdpTitle")}
                 formNode={
                     <form id="kc-register-form" action={url.loginAction} method="post">
@@ -43,6 +48,7 @@ const LoginIdpLinkConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: Kc
                 }
             />
         );
-});
+    }
+);
 
 export default LoginIdpLinkConfirm;

src/lib/components/LoginIdpLinkEmail.tsx

@@ -4,15 +4,20 @@ import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-const LoginIdpLinkEmail = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginIdpLinkEmail; i18n: I18n } & KcProps) => {
+const LoginIdpLinkEmail = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginIdpLinkEmail; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { url, realm, brokerContext, idpAlias } = kcContext;
 
         const { msg } = i18n;
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 headerNode={msg("emailLinkIdpTitle", idpAlias)}
                 formNode={
                     <>
@@ -29,6 +34,7 @@ const LoginIdpLinkEmail = memo(({ kcContext, i18n, ...props }: { kcContext: KcCo
                 }
             />
         );
-});
+    }
+);
 
 export default LoginIdpLinkEmail;

src/lib/components/LoginOtp.tsx

@@ -7,7 +7,13 @@ import { pathJoin } from "../../bin/tools/pathJoin";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const LoginOtp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginOtp; i18n: I18n } & KcProps) => {
+const LoginOtp = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginOtp; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { otpLogin, url } = kcContext;
 
         const { cx } = useCssAndCx();
@@ -33,8 +39,7 @@ const LoginOtp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 headerNode={msg("doLogIn")}
                 formNode={
                     <form id="kc-otp-login-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
@@ -72,7 +77,12 @@ const LoginOtp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase
 
                             <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
                                 <input
-                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass
+                                    )}
                                     name="login"
                                     id="kc-login"
                                     type="submit"
@@ -84,7 +94,8 @@ const LoginOtp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase
                 }
             />
         );
-});
+    }
+);
 
 declare const $: any;
 

src/lib/components/LoginPageExpired.tsx

@@ -4,15 +4,20 @@ import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-const LoginPageExpired = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginPageExpired; i18n: I18n } & KcProps) => {
+const LoginPageExpired = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginPageExpired; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { url } = kcContext;
 
         const { msg } = i18n;
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 displayMessage={false}
                 headerNode={msg("pageExpiredTitle")}
                 formNode={
@@ -33,6 +38,7 @@ const LoginPageExpired = memo(({ kcContext, i18n, ...props }: { kcContext: KcCon
                 }
             />
         );
-});
+    }
+);
 
 export default LoginPageExpired;

src/lib/components/LoginResetPassword.tsx

@@ -5,7 +5,13 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const LoginResetPassword = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginResetPassword; i18n: I18n } & KcProps) => {
+const LoginResetPassword = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginResetPassword; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { url, realm, auth } = kcContext;
 
         const { msg, msgStr } = i18n;
@@ -14,8 +20,7 @@ const LoginResetPassword = memo(({ kcContext, i18n, ...props }: { kcContext: KcC
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 displayMessage={false}
                 headerNode={msg("emailForgotTitle")}
                 formNode={
@@ -52,7 +57,12 @@ const LoginResetPassword = memo(({ kcContext, i18n, ...props }: { kcContext: KcC
 
                             <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
                                 <input
-                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass
+                                    )}
                                     type="submit"
                                     value={msgStr("doSubmit")}
                                 />
@@ -63,6 +73,7 @@ const LoginResetPassword = memo(({ kcContext, i18n, ...props }: { kcContext: KcC
                 infoNode={msg("emailInstruction")}
             />
         );
-});
+    }
+);
 
 export default LoginResetPassword;

src/lib/components/LoginUpdatePassword.tsx

@@ -5,7 +5,13 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const LoginUpdatePassword = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginUpdatePassword; i18n: I18n } & KcProps) => {
+const LoginUpdatePassword = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginUpdatePassword; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { cx } = useCssAndCx();
 
         const { msg, msgStr } = i18n;
@@ -14,8 +20,7 @@ const LoginUpdatePassword = memo(({ kcContext, i18n, ...props }: { kcContext: Kc
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 headerNode={msg("updatePasswordTitle")}
                 formNode={
                     <form id="kc-passwd-update-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
@@ -114,6 +119,7 @@ const LoginUpdatePassword = memo(({ kcContext, i18n, ...props }: { kcContext: Kc
                 }
             />
         );
-});
+    }
+);
 
 export default LoginUpdatePassword;

src/lib/components/LoginUpdateProfile.tsx

@@ -5,7 +5,13 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const LoginUpdateProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginUpdateProfile; i18n: I18n } & KcProps) => {
+const LoginUpdateProfile = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginUpdateProfile; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { cx } = useCssAndCx();
 
         const { msg, msgStr } = i18n;
@@ -14,8 +20,7 @@ const LoginUpdateProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcC
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 headerNode={msg("loginProfileTitle")}
                 formNode={
                     <form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
@@ -73,7 +78,13 @@ const LoginUpdateProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcC
                                 </label>
                             </div>
                             <div className={cx(props.kcInputWrapperClass)}>
-                            <input type="text" id="lastName" name="lastName" defaultValue={user.lastName ?? ""} className={cx(props.kcInputClass)} />
+                                <input
+                                    type="text"
+                                    id="lastName"
+                                    name="lastName"
+                                    defaultValue={user.lastName ?? ""}
+                                    className={cx(props.kcInputClass)}
+                                />
                             </div>
                         </div>
 
@@ -117,6 +128,7 @@ const LoginUpdateProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcC
                 }
             />
         );
-});
+    }
+);
 
 export default LoginUpdateProfile;

src/lib/components/LoginVerifyEmail.tsx

@@ -4,15 +4,20 @@ import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-const LoginVerifyEmail = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginVerifyEmail; i18n: I18n } & KcProps) => {
+const LoginVerifyEmail = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginVerifyEmail; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { msg } = i18n;
 
         const { url, user } = kcContext;
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 displayMessage={false}
                 headerNode={msg("emailVerifyTitle")}
                 formNode={
@@ -29,6 +34,7 @@ const LoginVerifyEmail = memo(({ kcContext, i18n, ...props }: { kcContext: KcCon
                 }
             />
         );
-});
+    }
+);
 
 export default LoginVerifyEmail;

src/lib/components/LogoutConfirm.tsx

@@ -5,7 +5,13 @@ import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-const LogoutConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LogoutConfirm; i18n: I18n } & KcProps) => {
+const LogoutConfirm = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LogoutConfirm; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { url, client, logoutConfirm } = kcContext;
 
         const { cx } = useCssAndCx();
@@ -14,8 +20,7 @@ const LogoutConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: KcContex
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 displayMessage={false}
                 headerNode={msg("logoutConfirmTitle")}
                 formNode={
@@ -57,6 +62,7 @@ const LogoutConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: KcContex
                 }
             />
         );
-});
+    }
+);
 
 export default LogoutConfirm;

src/lib/components/Register.tsx

@@ -5,7 +5,13 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const Register = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Register; i18n: I18n } & KcProps) => {
+const Register = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.Register; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
         const { msg, msgStr } = i18n;
@@ -14,8 +20,7 @@ const Register = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 headerNode={msg("registerTitle")}
                 formNode={
                     <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
@@ -143,7 +148,12 @@ const Register = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase
 
                             <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
                                 <input
-                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass
+                                    )}
                                     type="submit"
                                     value={msgStr("doRegister")}
                                 />
@@ -153,6 +163,7 @@ const Register = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase
                 }
             />
         );
-});
+    }
+);
 
 export default Register;

src/lib/components/RegisterUserProfile.tsx

@@ -6,7 +6,13 @@ import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
 
-const RegisterUserProfile = memo(({ kcContext, i18n, ...props_ }: { kcContext: KcContextBase.RegisterUserProfile; i18n: I18n } & KcProps) => {
+const RegisterUserProfile = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props_
+    }: { kcContext: KcContextBase.RegisterUserProfile; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
         const { msg, msgStr } = i18n;
@@ -25,10 +31,9 @@ const RegisterUserProfile = memo(({ kcContext, i18n, ...props_ }: { kcContext: K
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
                 displayMessage={messagesPerField.exists("global")}
                 displayRequiredFields={true}
-            doFetchDefaultThemeResources={true}
                 headerNode={msg("registerTitle")}
                 formNode={
                     <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
@@ -51,7 +56,12 @@ const RegisterUserProfile = memo(({ kcContext, i18n, ...props_ }: { kcContext: K
 
                             <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
                                 <input
-                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass
+                                    )}
                                     type="submit"
                                     value={msgStr("doRegister")}
                                     disabled={!isFomSubmittable}
@@ -62,6 +72,7 @@ const RegisterUserProfile = memo(({ kcContext, i18n, ...props_ }: { kcContext: K
                 }
             />
         );
-});
+    }
+);
 
 export default RegisterUserProfile;

src/lib/components/Terms.tsx

@@ -54,7 +54,13 @@ export function useDownloadTerms(params: {
     }, []);
 }
 
-const Terms = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Terms; i18n: I18n } & KcProps) => {
+const Terms = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.Terms; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { msg, msgStr } = i18n;
 
         useRerenderOnStateChange(evtTermMarkdown);
@@ -69,8 +75,7 @@ const Terms = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Te
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 displayMessage={false}
                 headerNode={msg("termsTitle")}
                 formNode={
@@ -103,6 +108,7 @@ const Terms = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Te
                 }
             />
         );
-});
+    }
+);
 
 export default Terms;

src/lib/components/UpdateUserProfile.tsx

@@ -6,7 +6,13 @@ import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
 
-const UpdateUserProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.UpdateUserProfile; i18n: I18n } & KcProps) => {
+const UpdateUserProfile = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.UpdateUserProfile; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
         const { cx } = useCssAndCx();
 
         const { msg, msgStr } = i18n;
@@ -17,8 +23,7 @@ const UpdateUserProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcCo
 
         return (
             <Template
-            {...{ kcContext, i18n, ...props }}
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-            doFetchDefaultThemeResources={true}
                 headerNode={msg("loginProfileTitle")}
                 formNode={
                     <form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
@@ -66,6 +71,7 @@ const UpdateUserProfile = memo(({ kcContext, i18n, ...props }: { kcContext: KcCo
                 }
             />
         );
-});
+    }
+);
 
 export default UpdateUserProfile;

yarn.lock

@@ -748,14 +748,14 @@ event-emitter@^0.3.5:
     d "1"
     es5-ext "~0.10.14"
 
-evt@^2.4.1:
+evt@^2.4.4:
-  version "2.4.1"
+  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/evt/-/evt-2.4.1.tgz#68beca2f7bd7eb755fdda5b263a80b934100e046"
+  resolved "https://registry.yarnpkg.com/evt/-/evt-2.4.4.tgz#37d6e28ccb5b1bc91162fc3d5bcfbeb1ef3191cf"
-  integrity sha512-eo7sZcfDbiVWD5Aw6STkIEMmchYLdeGnJB6tVaM9AXZc7pViin3PmQhb6fgFIFHfl0re9zSEHtSjyu70Y7dRJg==
+  integrity sha512-w/ZYdPCRdSfslOhcQHq7DuYoaU04YZKkFPyBwF8pYmOkRizivpbI0jZ8ffY/jITzbLo7RZ0wxN2dqyi62kyGwg==
   dependencies:
     minimal-polyfills "^2.2.2"
     run-exclusive "^2.2.16"
-    tsafe "^1.0.1"
+    tsafe "^1.1.1"
 
 execa@^5.1.1:
   version "5.1.1"
@@ -1385,15 +1385,15 @@ please-upgrade-node@^3.2.0:
   dependencies:
     semver-compare "^1.0.0"
 
-powerhooks@^0.20.16:
+powerhooks@^0.20.20:
-  version "0.20.16"
+  version "0.20.20"
-  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.20.16.tgz#03aadcccb4f70ca1c768369c01b84197cfeb97aa"
+  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.20.20.tgz#f9b2549710f5166f63d80e07c46c16d6da4c6f78"
-  integrity sha512-pCDaiGe5p3NrTvtelDBjrclJtjmLQlf99EjHPpQCeQ1H1ZmwQDxV8DaSbguQq0jc1PGcJ5D6Ts3gcEr/e680fg==
+  integrity sha512-98Ymz0bjo5Ds9u273wYz1tdJ51sB1jcyjqGa08mRY5dKumewydA/+71zrFelfgkOLRRhVZ+mWynG6DZ7zOVjrQ==
   dependencies:
-    evt "^2.4.1"
+    evt "^2.4.4"
     memoizee "^0.4.15"
     resize-observer-polyfill "^1.5.1"
-    tsafe "^1.0.1"
+    tsafe "^1.1.1"
 
 prettier@^2.3.0:
   version "2.7.1"
@@ -1733,20 +1733,20 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-tsafe@^1.0.1:
+tsafe@^1.1.1:
-  version "1.0.1"
+  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.0.1.tgz#c8c4eb2d75d1478418a4941307c5dd667fd76d23"
+  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.1.1.tgz#8d6998c726f8c63c518e1d1e283bbcd282a2b9a9"
-  integrity sha512-FgJ1a4rE7YbmW5QIzpsfFl4tsAp0x74FH2bVE6qODb2U8jSrwTr5/ckIazeylme5zXndVbtgKm4BZdqmoGhiPw==
+  integrity sha512-Ogblm3uh0dVupcCcC4IT641rnSQ7CW9IO0q8yIncG8OBe4DDXEqGtUE8LWf7+0MK1qZGeWPWEqSxlLzY2xzREA==
 
 tslib@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tss-react@^4.1.3:
+tss-react@^4.3.3:
-  version "4.1.3"
+  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.1.3.tgz#170a2edd85e32ba3b752416eeb45438c35e90243"
+  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.3.3.tgz#fca93e91b93a2e52c40dc904c7067a2b1905a160"
-  integrity sha512-Ul99aVoVngHY2nwFC87jZlGP+K3LfG9ZRakimOzRwgJz77f/zXWuY2FVzwaSc+OW804twNaxZZRtLlpagex8sg==
+  integrity sha512-gXCocAaCDkLpMy0yYdr6AB9/FAetkiRsFnkoDYhjngMBni6ELyZStUwOmZ/LFdBGzKRFlrtext63J+UaaavgZg==
   dependencies:
     "@emotion/cache" "*"
     "@emotion/serialize" "*"