Update changelog v2.0.14

fix(mvn): scoped packages compatibility

CHANGELOG.md

@@ -1,3 +1,28 @@
+### **2.0.14** (2021-08-20)  
+  
+- Update tss-react    
+  
+### **2.0.13** (2021-08-04)  
+  
+- Merge pull request #28 from marcmrf/main
+
+fix(mvn): scoped packages compatibility  
+- fix(mvn): scoped packages compatibility    
+  
+### **2.0.12** (2021-07-28)  
+  
+- Merge pull request #27 from jchn-codes/patch-1
+
+add maven to requirements  
+- add maven to requirements  
+- Add #bluehats in the keyworks    
+  
+### **2.0.11** (2021-07-21)  
+  
+- Spaces in file path #22  
+- uptdate dependnecies  
+- Inport specific powerhooks files to reduce bundle size    
+  
 ### **2.0.10** (2021-07-16)  
   
 - Update dependencies    

README.md

@@ -91,6 +91,14 @@ This tool assumes you are bundling your app with Webpack (tested with 4.44.2) .
 It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
 and a `build/static/` directory generated by webpack. 
 For more information see [this issue](https://github.com/InseeFrLab/keycloakify/issues/5#issuecomment-832296432)
+
+**All this is defaults with [`create-react-app`](https://create-react-app.dev)** (tested with 4.0.3)
+
+- `mvn` ([Maven](https://maven.apache.org/)), `rm`, `mkdir`, `wget`, `unzip` are assumed to be available.
+- `docker` must be up and running when running `yarn keycloak`.
+
+On Windows you'll have to use [WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10).
+
 ## My framework doesn’t seem to be supported, what can I do?  
 
 Currently Keycloakify is only compatible with `create-react-app` apps.
@@ -136,7 +144,7 @@ import {
   defaultKcProps, 
   getKcContext
 } from "keycloakify";
-import { css } from "tss-react";
+import { css } from "tss-react/@emotion/css";
 
 const { kcContext } = getKcContext();
 
@@ -165,7 +173,7 @@ import {
   defaultKcProps, 
   getKcContext
 } from "keycloakify";
-import { css } from "tss-react";
+import { css } from "tss-react/@emotion/css";
 
 const { kcContext } = getKcContext();
 
@@ -299,13 +307,6 @@ If you need to customize pages that are not supported yet or if you need to impl
 
 [Here is a demo repo](https://github.com/garronej/keycloakify-demo-app) to show how to automate
 the building and publishing of the theme (the .jar file).
-
-
-**All this is defaults with [`create-react-app`](https://create-react-app.dev)** (tested with 4.0.3)
-
-- For building the theme: `mvn` (Maven) must be installed (but you can build the theme in the CI)
-- For testing the theme in a local Keycloak container (which is not mandatory for development): 
-  `rm`, `mkdir`, `wget`, `unzip` are assumed to be available and `docker` up and running.
 # Limitations
 ## `process.env.PUBLIC_URL` not supported.
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "2.0.10",
+    "version": "2.0.14",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -30,6 +30,7 @@
         "!dist/tsconfig.tsbuildinfo"
     ],
     "keywords": [
+        "bluehats",
         "keycloak",
         "react",
         "theme",
@@ -51,13 +52,14 @@
     },
     "dependencies": {
         "cheerio": "^1.0.0-rc.5",
-        "evt": "2.0.0-beta.21",
+        "evt": "2.0.0-beta.27",
         "minimal-polyfills": "^2.2.1",
         "path": "^0.12.7",
-        "powerhooks": "^0.5.0",
+        "powerhooks": "^0.7.1",
         "react-markdown": "^5.0.3",
         "scripting-tools": "^0.19.13",
-        "tss-react": "^0.3.3",
+        "tss-react": "^0.7.3",
+        "@emotion/react": "^11.4.1",
         "tsafe": "^0.4.1"
     }
 }

src/bin/build-keycloak-theme/build-keycloak-theme.ts

@@ -1,11 +1,16 @@
 import { generateKeycloakThemeResources } from "./generateKeycloakThemeResources";
 import { generateJavaStackFiles } from "./generateJavaStackFiles";
-import type { ParsedPackageJson } from "./generateJavaStackFiles";
 import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
 import * as child_process from "child_process";
 import { generateDebugFiles, containerLaunchScriptBasename } from "./generateDebugFiles";
 import { URL } from "url";
 
+type ParsedPackageJson = {
+    name: string;
+    version: string;
+    homepage?: string;
+};
+
 const reactProjectDirPath = process.cwd();
 
 const doUseExternalAssets = process.argv[2]?.toLowerCase() === "--external-assets";
@@ -14,17 +19,21 @@ const parsedPackageJson: ParsedPackageJson = require(pathJoin(reactProjectDirPat
 
 export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
 
-export function main() {
+function sanitizeThemeName(name: string) {
+    return name.replace(/^@(.*)/, '$1').split('/').join('-');
+}
 
+export function main() {
     console.log("🔏 Building the keycloak theme...⌚");
 
     const extraPagesId: string[] = (parsedPackageJson as any)["keycloakify"]?.["extraPages"] ?? [];
     const extraThemeProperties: string[] = (parsedPackageJson as any)["keycloakify"]?.["extraThemeProperties"] ?? [];
+    const themeName = sanitizeThemeName(parsedPackageJson.name);
 
     generateKeycloakThemeResources({
         keycloakThemeBuildingDirPath,
         "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
-        "themeName": parsedPackageJson.name,
+        themeName,
         ...(() => {
 
             const url = (() => {
@@ -61,7 +70,9 @@ export function main() {
     });
 
     const { jarFilePath } = generateJavaStackFiles({
-        parsedPackageJson,
+        version: parsedPackageJson.version,
+        themeName,
+        homepage: parsedPackageJson.homepage,
         keycloakThemeBuildingDirPath
     });
 
@@ -72,7 +83,7 @@ export function main() {
 
     generateDebugFiles({
         keycloakThemeBuildingDirPath,
-        "packageJsonName": parsedPackageJson.name
+        themeName
     });
 
     console.log([
@@ -106,7 +117,7 @@ export function main() {
         `👉 $ ./${pathRelative(reactProjectDirPath, pathJoin(keycloakThemeBuildingDirPath, containerLaunchScriptBasename))} 👈`,
         '',
         'To enable the theme within keycloak log into the admin console ( 👉 http://localhost:8080 username: admin, password: admin 👈), create a realm (called "myrealm" for example),',
-        `go to your realm settings, click on the theme tab then select ${parsedPackageJson.name}.`,
+        `go to your realm settings, click on the theme tab then select ${themeName}.`,
         `More details: https://www.keycloak.org/getting-started/getting-started-docker`,
         '',
         'Once your container is up and configured 👉 http://localhost:8080/auth/realms/myrealm/account 👈',

src/bin/build-keycloak-theme/generateDebugFiles/generateDebugFiles.ts

@@ -7,12 +7,12 @@ export const containerLaunchScriptBasename = "start_keycloak_testing_container.s
 /** Files for being able to run a hot reload keycloak container */
 export function generateDebugFiles(
     params: {
-        packageJsonName: string;
+        themeName: string;
         keycloakThemeBuildingDirPath: string;
     }
 ) {
 
-    const { packageJsonName, keycloakThemeBuildingDirPath } = params;
+    const { themeName, keycloakThemeBuildingDirPath } = params;
 
     fs.writeFileSync(
         pathJoin(keycloakThemeBuildingDirPath, "Dockerfile"),
@@ -32,7 +32,7 @@ export function generateDebugFiles(
         )
     );
 
-    const dockerImage = `${packageJsonName}/keycloak-hot-reload`;
+    const dockerImage = `${themeName}/keycloak-hot-reload`;
     const containerName = "keycloak-testing-container";
 
     fs.writeFileSync(
@@ -52,8 +52,8 @@ export function generateDebugFiles(
                 `	--name ${containerName} \\`,
                 "	-e KEYCLOAK_USER=admin \\",
                 "	-e KEYCLOAK_PASSWORD=admin \\",
-                `	-v ${pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", packageJsonName)
-                }:/opt/jboss/keycloak/themes/${packageJsonName}:rw \\`,
+                `	-v ${pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName)
+                }:/opt/jboss/keycloak/themes/${themeName}:rw \\`,
                 `	-it ${dockerImage}:latest`,
                 ""
             ].join("\n"),

src/bin/build-keycloak-theme/generateJavaStackFiles.ts

@@ -3,21 +3,20 @@ import * as url from "url";
 import * as fs from "fs";
 import { join as pathJoin, dirname as pathDirname } from "path";
 
-export type ParsedPackageJson = {
-    name: string;
-    version: string;
-    homepage?: string;
-};
 
 export function generateJavaStackFiles(
     params: {
-        parsedPackageJson: ParsedPackageJson;
+        version: string;
+        themeName: string;
+        homepage?: string;
         keycloakThemeBuildingDirPath: string;
     }
 ): { jarFilePath: string; } {
 
     const {
-        parsedPackageJson: { name, version, homepage },
+        themeName,
+        version,
+        homepage,
         keycloakThemeBuildingDirPath
     } = params;
 
@@ -28,7 +27,7 @@ export function generateJavaStackFiles(
 
             const groupId = (() => {
 
-                const fallbackGroupId = `there.was.no.homepage.field.in.the.package.json.${name}`;
+                const fallbackGroupId = `there.was.no.homepage.field.in.the.package.json.${themeName}`;
 
                 return (!homepage ?
                     fallbackGroupId :
@@ -37,7 +36,7 @@ export function generateJavaStackFiles(
 
             })();
 
-            const artefactId = `${name}-keycloak-theme`;
+            const artefactId = `${themeName}-keycloak-theme`;
 
             const pomFileCode = [
                 `<?xml version="1.0"?>`,
@@ -83,7 +82,7 @@ export function generateJavaStackFiles(
                 JSON.stringify({
                     "themes": [
                         {
-                            "name": name,
+                            "name": themeName,
                             "types": ["login"]
                         }
                     ]
@@ -94,7 +93,7 @@ export function generateJavaStackFiles(
 
     }
 
-    return { "jarFilePath": pathJoin(keycloakThemeBuildingDirPath, "target", `${name}-${version}.jar`) };
+    return { "jarFilePath": pathJoin(keycloakThemeBuildingDirPath, "target", `${themeName}-${version}.jar`) };
 
 }
 

src/bin/generate-i18n-messages.ts

@@ -5,14 +5,14 @@ import { crawl } from "./tools/crawl";
 import { downloadAndUnzip } from "./tools/downloadAndUnzip";
 import { builtinThemesUrl } from "./install-builtin-keycloak-themes";
 import { getProjectRoot } from "./tools/getProjectRoot";
-import * as child_process from "child_process";
+import { rm_rf, rm_r } from "./tools/rm";
 
 //@ts-ignore
 const propertiesParser = require("properties-parser");
 
 const tmpDirPath = pathJoin(getProjectRoot(), "tmp_xImOef9dOd44");
 
-child_process.execSync(`rm -rf ${tmpDirPath}`);
+rm_rf(tmpDirPath);
 
 downloadAndUnzip({
     "destDirPath": tmpDirPath,
@@ -47,7 +47,7 @@ crawl(".").forEach(filePath => {
 
 });
 
-child_process.execSync(`rm -r ${tmpDirPath}`);
+rm_r(tmpDirPath);
 
 const targetDirPath = pathJoin(getProjectRoot(), "src", "lib", "i18n", "generated_kcMessages");
 

src/bin/tools/downloadAndUnzip.ts

@@ -3,6 +3,7 @@ import { basename as pathBasename, join as pathJoin } from "path";
 import { execSync } from "child_process";
 import fs from "fs";
 import { transformCodebase } from "../tools/transformCodebase";
+import { rm_rf, rm, rm_r } from "./rm";
 
 /** assert url ends with .zip */
 export function downloadAndUnzip(
@@ -16,19 +17,19 @@ export function downloadAndUnzip(
 
     const tmpDirPath = pathJoin(destDirPath, "..", "tmp_xxKdOxnEdx");
 
-    execSync(`rm -rf ${tmpDirPath}`);
+    rm_rf(tmpDirPath);
 
     fs.mkdirSync(tmpDirPath, { "recursive": true });
 
     execSync(`wget ${url}`, { "cwd": tmpDirPath })
     execSync(`unzip ${pathBasename(url)}`, { "cwd": tmpDirPath });
-    execSync(`rm ${pathBasename(url)}`, { "cwd": tmpDirPath });
+    rm(pathBasename(url), { "cwd": tmpDirPath });
 
     transformCodebase({
         "srcDirPath": tmpDirPath,
         "destDirPath": destDirPath,
     });
 
-    execSync(`rm -r ${tmpDirPath}`);
+    rm_r(tmpDirPath);
 
 }

src/bin/tools/rm.ts

@@ -0,0 +1,42 @@
+
+import { execSync } from "child_process";
+
+function rmInternal(
+	params: {
+		pathToRemove: string;
+		args: string | undefined;
+		cwd: string | undefined;
+	}
+) {
+
+	const { pathToRemove, args, cwd } = params;
+
+	execSync(
+		`rm ${args ? `-${args} ` : ""}${pathToRemove.replace(/\ /g, "\\ ")}`,
+		cwd !== undefined ? { cwd } : undefined
+	);
+}
+
+export function rm(pathToRemove: string, options?: { cwd: string; }) {
+	rmInternal({
+		pathToRemove,
+		"args": undefined,
+		"cwd": options?.cwd,
+	});
+}
+
+export function rm_r(pathToRemove: string, options?: { cwd: string; }) {
+	rmInternal({
+		pathToRemove,
+		"args": "r",
+		"cwd": options?.cwd,
+	});
+}
+
+export function rm_rf(pathToRemove: string, options?: { cwd: string; }) {
+	rmInternal({
+		pathToRemove,
+		"args": "rf",
+		"cwd": options?.cwd,
+	});
+}

src/lib/components/Login.tsx

@@ -4,19 +4,21 @@ import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
-import { cx } from "tss-react";
-import { useConstCallback } from "powerhooks";
+import { useCssAndCx } from "tss-react";
+import { useConstCallback } from "powerhooks/useConstCallback";
 
 export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login; } & KcProps) => {
 
-    const { msg, msgStr } = useKcMessage();
-
     const {
         social, realm, url,
         usernameEditDisabled, login,
         auth, registrationDisabled
     } = kcContext;
 
+    const { msg, msgStr } = useKcMessage();
+
+    const { cx } = useCssAndCx();
+
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
     const onSubmit = useConstCallback(() =>

src/lib/components/LoginIdpLinkConfirm.tsx

@@ -4,13 +4,15 @@ import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
-import { cx } from "tss-react";
+import { useCssAndCx } from "tss-react";
 
 export const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm; } & KcProps) => {
 
+	const { url, idpAlias } = kcContext;
+
 	const { msg } = useKcMessage();
 
-	const { url, idpAlias } = kcContext;
+	const { cx } = useCssAndCx();
 
 	return (
 		<Template

src/lib/components/LoginOtp.tsx

@@ -7,12 +7,14 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
 import { appendHead } from "../tools/appendHead";
 import { join as pathJoin } from "path";
-import { cx } from "tss-react";
+import { useCssAndCx } from "tss-react";
 
 export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginOtp; } & KcProps) => {
 
     const { otpLogin, url } = kcContext;
 
+    const { cx } = useCssAndCx();
+
     const { msg, msgStr } = useKcMessage();
 
     useEffect(

src/lib/components/LoginResetPassword.tsx

@@ -4,18 +4,20 @@ import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
-import { cx } from "tss-react";
+import { useCssAndCx } from "tss-react";
 
 export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginResetPassword; } & KcProps) => {
 
-    const { msg, msgStr } = useKcMessage();
-
     const {
         url,
         realm,
         auth
     } = kcContext;
 
+    const { msg, msgStr } = useKcMessage();
+
+    const { cx } = useCssAndCx();
+
     return (
         <Template
             {...{ kcContext, ...props }}

src/lib/components/LoginUpdateProfile.tsx

@@ -3,10 +3,12 @@ import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
-import { cx } from "tss-react";
+import { useCssAndCx } from "tss-react";
 
 export const LoginUpdateProfile = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdateProfile; } & KcProps) => {
 
+	const { cx } = useCssAndCx();
+
 	const { msg, msgStr } = useKcMessage();
 
 	const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;

src/lib/components/Register.tsx

@@ -3,12 +3,10 @@ import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
-import { cx } from "tss-react";
+import { useCssAndCx } from "tss-react";
 
 export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Register; } & KcProps) => {
 
-    const { msg, msgStr } = useKcMessage();
-
     const {
         url,
         messagesPerField,
@@ -19,6 +17,10 @@ export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBas
         recaptchaSiteKey
     } = kcContext;
 
+    const { msg, msgStr } = useKcMessage();
+
+    const { cx } = useCssAndCx();
+
     return (
         <Template
             {...{ kcContext, ...props }}

src/lib/components/Template.tsx

@@ -5,15 +5,15 @@ import { useKcMessage } from "../i18n/useKcMessage";
 import { useKcLanguageTag } from "../i18n/useKcLanguageTag";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { assert } from "../tools/assert";
-import { cx } from "tss-react";
 import type { KcLanguageTag } from "../i18n/KcLanguageTag";
 import { getBestMatchAmongKcLanguageTag } from "../i18n/KcLanguageTag";
 import { getKcLanguageTagLabel } from "../i18n/KcLanguageTag";
-import { useCallbackFactory } from "powerhooks";
+import { useCallbackFactory } from "powerhooks/useCallbackFactory";
 import { appendHead } from "../tools/appendHead";
 import { join as pathJoin } from "path";
-import { useConstCallback } from "powerhooks";
+import { useConstCallback } from "powerhooks/useConstCallback";
 import type { KcTemplateProps } from "./KcProps";
+import { useCssAndCx } from "tss-react";
 
 export type TemplateProps = {
     displayInfo?: boolean;
@@ -47,6 +47,8 @@ export const Template = memo((props: TemplateProps) => {
         doFetchDefaultThemeResources
     } = props;
 
+    const { cx } = useCssAndCx();
+
     useEffect(() => { console.log("Rendering this page with react using keycloakify") }, []);
 
     const { msg } = useKcMessage();
@@ -279,9 +281,9 @@ export const Template = memo((props: TemplateProps) => {
                                 {message.type === "warning" && <span className={cx(props.kcFeedbackWarningIcon)}></span>}
                                 {message.type === "error" && <span className={cx(props.kcFeedbackErrorIcon)}></span>}
                                 {message.type === "info" && <span className={cx(props.kcFeedbackInfoIcon)}></span>}
-                                <span 
-                                    className="kc-feedback-text" 
-                                    dangerouslySetInnerHTML={{ "__html": message.summary }} 
+                                <span
+                                    className="kc-feedback-text"
+                                    dangerouslySetInnerHTML={{ "__html": message.summary }}
                                 />
                             </div>
                         }

src/lib/components/Terms.tsx

@@ -3,12 +3,14 @@ import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useKcMessage } from "../i18n/useKcMessage";
-import { cx } from "tss-react";
+import { useCssAndCx } from "tss-react";
 
 export const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Terms; } & KcProps) => {
 
     const { msg, msgStr } = useKcMessage();
 
+    const { cx } = useCssAndCx();
+
     const { url } = kcContext;
 
     return (

src/lib/i18n/useKcLanguageTag.ts

@@ -1,5 +1,5 @@
 
-import { createUseGlobalState } from "powerhooks";
+import { createUseGlobalState } from "powerhooks/useGlobalState";
 import { getKcContext } from "../getKcContext";
 import { getBestMatchAmongKcLanguageTag } from "./KcLanguageTag";
 import type { StatefulEvt } from "powerhooks";

yarn.lock

@@ -3,13 +3,13 @@
 
 
 "@babel/runtime@^7.13.10":
-  version "7.14.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
-  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+  version "7.15.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
+  integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@emotion/cache@^11.0.0", "@emotion/cache@^11.4.0":
+"@emotion/cache@^11.4.0":
   version "11.4.0"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"
   integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==
@@ -30,20 +30,20 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
-"@emotion/react@^11.0.0":
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.0.tgz#2465ad7b073a691409b88dfd96dc17097ddad9b7"
-  integrity sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==
+"@emotion/react@^11.4.1":
+  version "11.4.1"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.1.tgz#a1b0b767b5bad57515ffb0cad9349614d27f4d57"
+  integrity sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==
   dependencies:
     "@babel/runtime" "^7.13.10"
     "@emotion/cache" "^11.4.0"
     "@emotion/serialize" "^1.0.2"
-    "@emotion/sheet" "^1.0.1"
+    "@emotion/sheet" "^1.0.2"
     "@emotion/utils" "^1.0.0"
     "@emotion/weak-memoize" "^0.2.5"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/serialize@^1.0.0", "@emotion/serialize@^1.0.2":
+"@emotion/serialize@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
   integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
@@ -64,10 +64,10 @@
     multipipe "^1.0.2"
     through "^2.3.8"
 
-"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"
-  integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
+"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.2.tgz#1d9ffde531714ba28e62dac6a996a8b1089719d0"
+  integrity sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw==
 
 "@emotion/unitless@^0.7.5":
   version "0.7.5"
@@ -85,9 +85,9 @@
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
 "@types/mdast@^3.0.0", "@types/mdast@^3.0.3":
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.6.tgz#d03647a76e6c94b47c319d526826e391cde6e86d"
-  integrity sha512-1a/QZGYe7cavCvv4OwByerPbCoIwSL3XHH+ajE4SlqWXqwSeGTMbML5we5PpYV2uLmpKPTGOacmcMt5R+w2l0w==
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.8.tgz#73f050ebebf70a8a6586fe98b0008a7286aa6c4b"
+  integrity sha512-HdUXWDNtDenuVJFrV2xBCLEMiw1Vn7FMuJxqJC5oBvC2adA3pgtp6CPCIMQdz3pmWxGuJjT+hOp6FnOXy6dXoQ==
   dependencies:
     "@types/unist" "*"
 
@@ -102,9 +102,9 @@
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
 "@types/react@^17.0.0":
-  version "17.0.14"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.14.tgz#f0629761ca02945c4e8fea99b8177f4c5c61fb0f"
-  integrity sha512-0WwKHUbWuQWOce61UexYuWTGuGY/8JvtUe/dtQ6lR4sZ3UiylHotJeWpf3ArP9+DSGUoLY3wbU59VyMrJps5VQ==
+  version "17.0.19"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.19.tgz#8f2a85e8180a43b57966b237d26a29481dacc991"
+  integrity sha512-sX1HisdB1/ZESixMTGnMxH9TDe8Sk709734fEQZzCV/4lSu9kJCPbo2PbTRoZM+53Pp0P10hYVyReUueGwUi4A==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -382,14 +382,23 @@ event-emitter@^0.3.5:
     d "1"
     es5-ext "~0.10.14"
 
-evt@2.0.0-beta.21:
-  version "2.0.0-beta.21"
-  resolved "https://registry.yarnpkg.com/evt/-/evt-2.0.0-beta.21.tgz#3be2592566c2a99f9a4bc2b7f5d05d960463407d"
-  integrity sha512-8mBIrjyzOowmHfWKjaHBm9BBCs3s2iDD0gusmbBZAXmD0XL1g7gQ+wYt8kaSWSq9EVT9liX4H8Mx54jdk1cbRw==
+evt@2.0.0-beta.27:
+  version "2.0.0-beta.27"
+  resolved "https://registry.yarnpkg.com/evt/-/evt-2.0.0-beta.27.tgz#b9f59026f706487dd87a5ac4c91211d9ddb068b5"
+  integrity sha512-v9hFipQFn3qIo3dwawS1DOQKf/CYZYRn4QR+1FoASGePRgKVQ/YB0dDpI6v5/PFb8z6Kobz6JBrOaYKnltaz6A==
   dependencies:
     minimal-polyfills "^2.2.1"
     run-exclusive "^2.2.14"
-    tsafe "^0.2.2"
+    tsafe "^0.4.1"
+
+evt@2.0.0-beta.29:
+  version "2.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/evt/-/evt-2.0.0-beta.29.tgz#2cc940a4202d63bdcde21b282269d8b41829ec93"
+  integrity sha512-NgkSE9GV/aiXFqKYsMRZpOc2XihuPc4z5/OV6gxwwxJEZE1NURZ/GaAmHSEPuICHIQFwjI5xMOujhGIStHxgJg==
+  dependencies:
+    minimal-polyfills "^2.2.1"
+    run-exclusive "^2.2.14"
+    tsafe "^0.4.1"
 
 ext@^1.1.2:
   version "1.4.0"
@@ -441,9 +450,9 @@ html-dom-parser@1.0.1:
     htmlparser2 "6.1.0"
 
 html-react-parser@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-1.2.7.tgz#1674ed4b96b3440ad922962a3ff000e7f3325293"
-  integrity sha512-gUUEgrZV0YaCxtZO2XuJDUnHSq7gOqKu1krye97cxgiZ+ipaIzspGMhATeq9lhy9gwYmwBF2YCHe/accrMMo8Q==
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-1.2.8.tgz#6806984a5056417de38fc4b52145bd56b1b32d73"
+  integrity sha512-fPPbnMNbVuceyJARZTCu2/Ai7XbVsfncwVUl3IFpgV8BG7lv6hm+Z8NWXRgc2r1DXTf1wRnLaPDL4unbln/r+g==
   dependencies:
     domhandler "4.2.0"
     html-dom-parser "1.0.1"
@@ -750,12 +759,12 @@ path@^0.12.7:
     process "^0.11.1"
     util "^0.10.3"
 
-powerhooks@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.5.0.tgz#9b1b112bfebeef5a69e986a39efc89ba6abf1736"
-  integrity sha512-YCXPKd5z0nP7ZY/NLDYWPlkMhlqzcWjg6BIwLtHolKIOnwrRAtBmpDzlDwaA/g0q5MJIM9qItUzRvgl+4KUrTA==
+powerhooks@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.7.1.tgz#79d46521740dbcef98ba9456a151b0152b475304"
+  integrity sha512-0cGyufXN92g0ToF4rWBnCgHWvwN7B668UrnfuRIoekIX1cuAjpnv+1XDFqlXY0SuP+pNcWSJzvMTSTT2U/wh3w==
   dependencies:
-    evt "2.0.0-beta.21"
+    evt "2.0.0-beta.29"
     memoizee "^0.4.15"
     resize-observer-polyfill "^1.5.1"
     tsafe "^0.4.1"
@@ -849,9 +858,9 @@ readable-stream@~1.0.17, readable-stream@~1.0.27-1, readable-stream@~1.0.31:
     string_decoder "~0.10.x"
 
 regenerator-runtime@^0.13.4:
-  version "0.13.7"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
-  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
 remark-parse@^9.0.0:
   version "9.0.0"
@@ -985,29 +994,23 @@ ts-toolbelt@^9.6.0:
   resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz#50a25426cfed500d4a09bd1b3afb6f28879edfd5"
   integrity sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w==
 
-tsafe@^0.2.2:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-0.2.4.tgz#f2cffb9b33e4d20c6f9800aa1c45bee02d917aa1"
-  integrity sha512-oS/0wJKgEv/iDow/6U51xjAascJVtUQfZQMCDdoOS+VnMlWZFdXGMKuoH47JYs6hEWHpO+Z5pC5oAFFHiPfTLg==
-
 tsafe@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-0.4.1.tgz#00af1be2db82abb4be531209b90232d7954e1a03"
   integrity sha512-+OZ0gdgmwcru+MOSheCx+ymAvQz+1/ui+KFJRuaq0t2m8RNrlf7eSzEieptoPQXPY67Mdkqgkdjknn8azoD5sw==
 
 tslib@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
-  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
-tss-react@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-0.3.3.tgz#21e5bd8f31d059291c7bee6f9a5767604f42a1b5"
-  integrity sha512-D3dKsFWUpGW9zayHgO4iaHLpd13enS/cvxJM7WcQ3elP1pN1MS0kq7iR/QHHm1VxB9l1vuADNYK2znGnR14CjQ==
+tss-react@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-0.7.3.tgz#27d3b7bcd256773ea481839e6a0315d658f0c65e"
+  integrity sha512-nQ9THA3mfpW8hM55GRw+g/Dzt/v+3zd8WqacUcdDUPSTg8QLT0jPCOCzWNlP4/0J3iEhSC2V9k7WhdmEeQlopQ==
   dependencies:
-    "@emotion/cache" "^11.0.0"
-    "@emotion/react" "^11.0.0"
-    "@emotion/serialize" "^1.0.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/serialize" "^1.0.2"
     "@emotion/server" "^11.4.0"
     "@emotion/utils" "^1.0.0"
     html-react-parser "^1.2.7"