Merge pull request #17 from jhalitaksoy/feature/styled-jsx

Feature/styled jsx

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["styled-jsx/babel"]
+}

.vscode/.snippet.code-snippets

@@ -0,0 +1,19 @@
+{
+	// Place your mancala-frontend workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	"styled jsx": {
+		"scope": "typescriptreact",
+		"prefix": "styledjsx",
+		"body": [
+			"<style jsx>{`",
+			"\t$1",
+			"`}</style>"
+		],
+		"description": "Log output to console"
+	}
+}

package.json

@@ -16,13 +16,16 @@
   "dependencies": {
     "@szhsin/react-menu": "^3.0.2",
     "@types/": "szhsin/react-menu",
+    "@types/styled-jsx": "^3.4.4",
     "@types/uuid": "^8.3.4",
     "mancala.js": "^0.0.2-beta.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "styled-jsx": "^5.0.2",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.18.6",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.8",
     "parcel-bundler": "^1.12.5",

src/components/Button.tsx

@@ -20,12 +20,16 @@ const Button: FunctionComponent<{
       style={{
         background: color,
         color: textColor,
-        margin: "5px",
-        padding: "10px",
-        border: "none",
-        borderRadius: "4vw",
       }}
     >
+      <style jsx>{`
+        button {
+          margin: 5px;
+          padding: 10px;
+          border: none;
+          border-radius: 4vw;
+        }
+      `}</style>
       {text}
     </button>
   );

src/components/FloatingPanel.tsx

@@ -10,15 +10,19 @@ const FloatingPanel: FunctionComponent<{
   if(!props.visible) return <></>
   return (
     <div style={{
-      position: "absolute",
-      bottom: "0px",
-      left: "0px",
-      padding: "15px",
-      borderTopRightRadius: "1vw",
-      minWidth: "10vw",
-      minHeight: "1vw",
       backgroundColor: props.color,
     }}>
+      <style jsx>{`
+        div {
+          position: absolute;
+          bottom: 0px;
+          left: 0px;
+          padding: 15px;
+          border-top-right-radius: 1vw;
+          min-width: 10vw;
+          min-height: 1vw;
+        }
+      `}</style>
       {props.children}
     </div>
   )

src/components/HeaderBar.tsx

@@ -9,8 +9,8 @@ import "@szhsin/react-menu/dist/index.css";
 import "@szhsin/react-menu/dist/transitions/slide.css";
 
 function renderNewGameButton(
-    context: Context, game:
+    context: Context,
-        MancalaGame | undefined,
+    game: MancalaGame | undefined,
     onNewGameClick: () => void,
     userKeyWhoLeave: string | undefined,
     crashMessage: string | undefined): JSX.Element {
@@ -51,31 +51,12 @@ const HeaderBar: FunctionComponent<{
         context.themeManager.theme.textLightColor
     );
     return (
-        <div style={{
+        <div style={{ background: context.themeManager.theme.appBarBgColor }} className="header-bar">
-            padding: "0px 4vw",
+            <h1 style={{ color: textColor }} className="header-bar-title">
-            background: context.themeManager.theme.appBarBgColor,
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-            alignSelf: "stretch",
-        }}>
-            <h1 style={{ color: textColor, margin: "10px 0px" }}>
                 {context.texts.Mancala}
             </h1>
-            <div style={{
+            <div className="header-bar-right-panel">
-                display: "flex",
+                <ThemeSwitchMenu context={context} textColor={textColor} />
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "space-between",
-            }} >
-                <div style={{
-                    marginRight: "1vw",
-                    display: "flex",
-                    alignItems: "center",
-                }}>
-                    <ThemeSwitchMenu context={context} textColor={textColor} />
-                </div>
                 {renderNewGameButton(context, game, onNewGameClick, userKeyWhoLeave, crashMessage)}
                 {game &&
                     !userKeyWhoLeave &&
@@ -88,6 +69,25 @@ const HeaderBar: FunctionComponent<{
                             onClick={onLeaveGameClick} />
                     )}
             </div>
+            <style jsx>{`
+            .header-bar {
+                padding: 0px 4vw;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                align-self: stretch;
+            }
+            .header-bar-title {
+                margin: 10px 0px;
+            }
+            .header-bar-right-panel {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+            }
+        `}</style>
         </div>)
 }
 export default HeaderBar;
@@ -100,33 +100,46 @@ const ThemeSwitchMenu: FunctionComponent<{ context: Context, textColor: string }
         light_mode
     </span>;
     const menuItems = context.themeManager.themes.map((theme, index) => {
-        return (<MenuItem
+        const themeBackground = context.themeManager.theme.background;
-            key={index}
+        return (
-            style={{ color: textColor }}
+            <MenuItem
-            //@ts-ignore
+                key={index}
-            onMouseOver={(event) => (event.target.style.background =
+                style={{ color: textColor }}
-                context.themeManager.theme.background)}
+                //@ts-ignore
-            //@ts-ignore
+                onMouseOver={(event) => (event.target.style.background = themeBackground)}
-            onMouseOut={(event) => (event.target.style.background = "transparent")}
+                //@ts-ignore
-            onClick={() => (context.themeManager.theme = theme)}>
+                onMouseOut={(event) => (event.target.style.background = "transparent")}
-            <div style={{
+                onClick={() => (context.themeManager.theme = theme)}>
-                borderRadius: "5vw",
+                <div style={{ background: theme.boardColor }} className="theme-color-circle" />
-                background: theme.boardColor,
+                {theme.name}
-                width: "1vw",
+                <style jsx>{`
-                height: "1vw",
+                .theme-color-circle {
-                marginRight: "1vw",
+                    border-radius: 5vw;
-            }} />
+                    width: 1vw;
-            {theme.name}
+                    height: 1vw;
-        </MenuItem>);
+                    margin-right: 1vw;
+                }
+                `}</style>
+            </MenuItem>
+        );
     })
-    return (<Menu
+    return (
-        menuStyle={{
+        <div className="menu-container">
-            background: context.themeManager.theme.appBarBgColor,
+            <Menu
-        }}
+                menuStyle={{ background: context.themeManager.theme.appBarBgColor }}
-        menuButton={menuButton}
+                menuButton={menuButton}
-        transition
+                transition
-        align="end">
+                align="end">
-        {menuItems}
+                {menuItems}
-    </Menu>);
+            </Menu>
+            <style jsx>{`
+                .menu-container {
+                    margin: 0 1vh;
+                    display: flex;
+                    align-items: center;
+                }
+            `}</style>
+        </div>
+    );
 }
 

src/components/InfoPanel.tsx

@@ -57,12 +57,17 @@ const InfoPanelContainer: FunctionComponent<{
   return (
     <div
       style={{
-        background: props.color,
+        background: props.color
-        padding: "1vw 2vw",
-        marginTop: "1vw",
-        borderRadius: "10vw",
       }}
     >
+      <style jsx>{`
+        div {
+          padding: 1vw 2vw;
+          margin-top: 1vw;
+          border-radius: 10vw;
+        }
+      `}
+      </style>
       {props.children}
     </div>
   );

src/components/PageContainer.tsx

@@ -2,16 +2,20 @@ import * as React from "react";
 import { FunctionComponent } from "react";
 import { Theme } from "../theme/Theme";
 
-const PageContainer: FunctionComponent<{theme: Theme}> = (props) => {
+const PageContainer: FunctionComponent<{ theme: Theme }> = (props) => {
     return (
         <div style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
             background: props.theme?.background,
-            flex: "1",
-            minHeight: "400px"
         }}>
+            <style jsx>{`
+                div {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    flex: 1;
+                    min-height: 400px;
+                }
+            `}</style>
             {props.children}
         </div>
     );

src/components/board/BoardView.tsx

@@ -39,18 +39,7 @@ const BoardView: FunctionComponent<{
     boardViewModel.pits[game.board.player2BankIndex()];
   const isPlayer2 = userKey === game?.player2Id;
   return (
-    <div
+    <div className="board" style={{ background: theme.boardColor }}>
-      style={{
-        margin: "1vw",
-        padding: "2vw",
-        display: "grid",
-        gridTemplateColumns: "repeat(8, 11vw)",
-        gridTemplateRows: "repeat(2, 11vw)",
-        borderRadius: "3vw",
-        transition: "background-color 0.5s",
-        background: theme.boardColor,
-      }}
-    >
       <StoreView
         context={context}
         pitViewModel={isPlayer2 ? player2BankViewModel : player1BankViewModel}
@@ -65,6 +54,17 @@ const BoardView: FunctionComponent<{
       />
       {isPlayer2 ? player1Pits?.reverse() : player2Pits?.reverse()}
       {isPlayer2 ? player2Pits : player1Pits}
+      <style jsx>{`
+        .board {
+          margin: 1vw;
+          padding: 2vw;
+          display: grid;
+          grid-template-columns: repeat(8, 11vw);
+          grid-template-rows: repeat(2, 11vw);
+          border-radius: 3vw;
+          transition: background-color 0.5s;
+        }
+      `}</style>
     </div>
   );
 };

src/components/board/PitView.tsx

@@ -4,7 +4,6 @@ import Util from "../../util/Util";
 import PitViewModel from "../../viewmodel/PitViewModel";
 import StoneView from "./StoneView";
 
-
 const PitView: FunctionComponent<{
     pitViewModel: PitViewModel;
     onClick: () => void;
@@ -14,23 +13,22 @@ const PitView: FunctionComponent<{
     ));
 
     return (
-        <div
+        <div className="pit" onClick={onClick} style={{ background: pitViewModel.pitColor }}>
-            onClick={onClick}
-            style={{
-                background: pitViewModel.pitColor,
-                margin: "5px",
-                padding: "5px",
-                borderRadius: "10vw",
-                transition: "background-color 0.5s",
-                display: "flex",
-                alignItems: "center",
-                alignContent: "center",
-                justifyContent: "center",
-                justifyItems: "center",
-                flexWrap: "wrap",
-            }}
-        >
             {stones}
+            <style jsx>{`
+                .pit {
+                    margin: 5px;
+                    padding: 5px;
+                    border-radius: 10vw;
+                    transition: background-color 0.5s;
+                    display: flex;
+                    align-items: center;
+                    align-content: center;
+                    justify-content: center;
+                    justify-items: center;
+                    flex-wrap: wrap;
+                }
+            `}</style>
         </div>
     );
 };

src/components/board/StoneView.tsx

@@ -2,18 +2,19 @@ import * as React from "react";
 import { FunctionComponent } from "react";
 
 const StoneView: FunctionComponent<{ color: string }> = ({ color }) => {
-    return (
+  return (
-      <div
+    <div className="stone" style={{ background: color }}>
-        style={{
+      <style jsx>{`
-          background: color,
+          .stone {
-          margin: "1px",
+            margin: 1px;
-          width: "1vw",
+            width: 1vw;
-          height: "1vw",
+            height: 1vw;
-          borderRadius: "10vw",
+            border-radius: 10vw;
-          transition: "background-color 0.5s",
+            transition: background-color 0.5s;
-        }}
+          }
-      />
+        `}</style>
-    );
+    </div>
-  };
+  );
+};
 
-  export default StoneView;
+export default StoneView;

src/components/board/StoreView.tsx

@@ -7,50 +7,52 @@ import PitViewModel from "../../viewmodel/PitViewModel";
 import StoneView from "./StoneView";
 
 const StoreView: FunctionComponent<{
-    context: Context;
+  context: Context;
-    pitViewModel: PitViewModel;
+  pitViewModel: PitViewModel;
-    gridColumn: string;
+  gridColumn: string;
-    gridRow: string;
+  gridRow: string;
-  }> = ({ context, pitViewModel, gridColumn, gridRow }) => {
+}> = ({ context, pitViewModel, gridColumn, gridRow }) => {
-    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
+  const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
-      <StoneView key={index} color={pitViewModel.stoneColor} />
+    <StoneView key={index} color={pitViewModel.stoneColor} />
-    ));
+  ));
-    const textColor = getColorByBrightness(
+  const textColor = getColorByBrightness(
-      pitViewModel.pitColor,
+    pitViewModel.pitColor,
-      context.themeManager.theme.textColor,
+    context.themeManager.theme.textColor,
-      context.themeManager.theme.textLightColor
+    context.themeManager.theme.textLightColor
-    );
+  );
-    return (
+  return (
-      <div
+    <div
-        style={{
+      className="store"
-          gridColumn: gridColumn,
+      style={{
-          gridRow: gridRow,
+        background: pitViewModel.pitColor,
-          background: pitViewModel.pitColor,
+        gridColumn: gridColumn,
-          margin: "5px",
+        gridRow: gridRow
-          borderRadius: "10vw",
+      }}>
-          display: "flex",
+      {stones}
-          alignItems: "center",
+      <span className="store-stone-count-text" style={{ color: textColor }}>
-          justifyContent: "center",
+        {stones.length}
-          alignContent: "center",
+      </span>
-          flexWrap: "wrap",
+      <style jsx>{`
-          position: "relative",
+          .store {
-        }}
+            margin: 5px;
-      >
+            border-radius: 10vw;
-        {stones}
+            display: flex;
-        <span
+            align-items: center;
-          style={{
+            justify-content: center;
-            position: "absolute",
+            align-content: center;
-            bottom: "2vw",
+            flex-wrap: wrap;
-            fontFamily: "monospace",
+            position: relative;
-            fontWeight: "bold",
+          }
-            fontSize: "2vw",
+          .store-stone-count-text {
-            color: textColor,
+            position: absolute;
-          }}
+            bottom: 2vw;
-        >
+            font-family: monospace;
-          {stones.length}
+            font-weight: bold;
-        </span>
+            font-size: 2vw;
-      </div>
+          }
-    );
+        `}</style>
-  };
+    </div>
+  );
+};
 
-  export default StoreView;
+export default StoreView;

src/types/custom.d.ts

@@ -0,0 +1,8 @@
+import 'react';
+
+declare module 'react' {
+  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
+    jsx?: boolean;
+    global?: boolean;
+  }
+}

yarn.lock

@@ -17,11 +17,44 @@
   dependencies:
     "@babel/highlight" "^7.16.7"
 
+"@babel/code-frame@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.10":
   version "7.17.10"
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.10.tgz"
   integrity sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==
 
+"@babel/compat-data@^7.18.6":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
+  integrity sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==
+
+"@babel/core@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.6.tgz#54a107a3c298aee3fe5e1947a6464b9b6faca03d"
+  integrity sha512-cQbWBpxcbbs/IUredIPkHiAGULLV8iwgNRMFzvbhEXISp4f3rUUXE5+TIw6KwUWUR3DwyI6gmBRnmAtYaWehwQ==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.6"
+    "@babel/helper-compilation-targets" "^7.18.6"
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helpers" "^7.18.6"
+    "@babel/parser" "^7.18.6"
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.6"
+    "@babel/types" "^7.18.6"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
 "@babel/core@^7.4.4":
   version "7.17.10"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.17.10.tgz"
@@ -52,6 +85,15 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.18.6", "@babel/generator@^7.18.7":
+  version "7.18.7"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.7.tgz#2aa78da3c05aadfc82dbac16c99552fc802284bd"
+  integrity sha512-shck+7VLlY72a2w9c3zYWuE1pwOKEiQHV7GTUbSnhyl5eu3i04t30tBY82ZRWrDfo3gkakCFtevExnxbkf2a3A==
+  dependencies:
+    "@babel/types" "^7.18.7"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz"
@@ -77,6 +119,16 @@
     browserslist "^4.20.2"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.6.tgz#18d35bfb9f83b1293c22c55b3d576c1315b6ed96"
+  integrity sha512-vFjbfhNCzqdeAtZflUFrG5YIFqGTqsctrtkZ1D/NB0mDW9TwW3GmmUepYY4G9wCET5rY5ugz4OGTcLd614IzQg==
+  dependencies:
+    "@babel/compat-data" "^7.18.6"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6":
   version "7.17.9"
   resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz"
@@ -119,6 +171,11 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-environment-visitor@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.6.tgz#b7eee2b5b9d70602e59d1a6cad7dd24de7ca6cd7"
+  integrity sha512-8n6gSfn2baOY+qlp+VSzsosjCVGFqWKmDF0cCWOybh52Dw3SEyoWR1KrhMJASjLwIEkkAufZ0xvr+SxLHSpy2Q==
+
 "@babel/helper-explode-assignable-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz"
@@ -134,6 +191,14 @@
     "@babel/template" "^7.16.7"
     "@babel/types" "^7.17.0"
 
+"@babel/helper-function-name@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.6.tgz#8334fecb0afba66e6d87a7e8c6bb7fed79926b83"
+  integrity sha512-0mWMxV1aC97dhjCah5U5Ua7668r5ZmSC2DLfH2EZnf9c3/dHZKiFa5pRLMH5tjSl471tY6496ZWk/kjNONBxhw==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-hoist-variables@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz"
@@ -141,6 +206,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-member-expression-to-functions@^7.16.7", "@babel/helper-member-expression-to-functions@^7.17.7":
   version "7.17.7"
   resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz"
@@ -155,6 +227,13 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-module-imports@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-module-transforms@^7.16.7", "@babel/helper-module-transforms@^7.17.7":
   version "7.17.7"
   resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz"
@@ -169,6 +248,20 @@
     "@babel/traverse" "^7.17.3"
     "@babel/types" "^7.17.0"
 
+"@babel/helper-module-transforms@^7.18.6":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.8.tgz#4f8408afead0188cfa48672f9d0e5787b61778c8"
+  integrity sha512-che3jvZwIcZxrwh63VfnFTUzcAM9v/lznYkkRxIBGMPt1SudOKHAEec0SIRCfiuIzTcF7VGj/CaTT6gY4eWxvA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.6"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.8"
+    "@babel/types" "^7.18.8"
+
 "@babel/helper-optimise-call-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz"
@@ -208,6 +301,13 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
+"@babel/helper-simple-access@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz#d6d8f51f4ac2978068df934b569f08f29788c7ea"
+  integrity sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
   version "7.16.0"
   resolved "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz"
@@ -222,16 +322,33 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz"
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
+"@babel/helper-validator-identifier@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
+  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+
 "@babel/helper-validator-option@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz"
   integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
 
+"@babel/helper-validator-option@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
+  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+
 "@babel/helper-wrap-function@^7.16.8":
   version "7.16.8"
   resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz"
@@ -251,6 +368,15 @@
     "@babel/traverse" "^7.17.9"
     "@babel/types" "^7.17.0"
 
+"@babel/helpers@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.6.tgz#4c966140eaa1fcaa3d5a8c09d7db61077d4debfd"
+  integrity sha512-vzSiiqbQOghPngUYt/zWGvK3LAsPhz55vc9XNN0xAl2gV4ieShI2OQli5duxWHD+72PZPTKAcfcZDE1Cwc5zsQ==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.6"
+    "@babel/types" "^7.18.6"
+
 "@babel/highlight@^7.16.7":
   version "7.17.9"
   resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz"
@@ -260,11 +386,25 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.16.7", "@babel/parser@^7.17.10", "@babel/parser@^7.4.4":
   version "7.17.10"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.17.10.tgz"
   integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==
 
+"@babel/parser@^7.18.6", "@babel/parser@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.8.tgz#822146080ac9c62dac0823bb3489622e0bc1cbdf"
+  integrity sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz"
@@ -897,6 +1037,15 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/template@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31"
+  integrity sha512-JoDWzPe+wgBsTTgdnIma3iHNFC7YVJoPssVBDjiHfNlyt4YcunDtcDOUmfVDfCK5MfdsaIoX9PkijPhjH3nYUw==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.6"
+    "@babel/types" "^7.18.6"
+
 "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.10", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9", "@babel/traverse@^7.4.4":
   version "7.17.10"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.10.tgz"
@@ -913,6 +1062,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.18.6", "@babel/traverse@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.8.tgz#f095e62ab46abf1da35e5a2011f43aee72d8d5b0"
+  integrity sha512-UNg/AcSySJYR/+mIcJQDCv00T+AqRO7j/ZEJLzpaYtgM48rMg5MnkJgyNqkzo88+p4tfRvZJCEiwwfG6h4jkRg==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.7"
+    "@babel/helper-environment-visitor" "^7.18.6"
+    "@babel/helper-function-name" "^7.18.6"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.18.8"
+    "@babel/types" "^7.18.8"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.17.10", "@babel/types@^7.4.4":
   version "7.17.10"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.17.10.tgz"
@@ -921,6 +1086,14 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.18.6", "@babel/types@^7.18.7", "@babel/types@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.8.tgz#c5af199951bf41ba4a6a9a6d0d8ad722b30cd42f"
+  integrity sha512-qwpdsmraq0aJ3osLJRApsc2ouSJCdnMeZwB0DhbtHAtRpZNZCdlbRnHIgcRKzdE1g0iOGg644fzjOBcdOz9cPw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    to-fast-properties "^2.0.0"
+
 "@iarna/toml@^2.2.0":
   version "2.2.5"
   resolved "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz"
@@ -934,6 +1107,15 @@
     "@jridgewell/set-array" "^1.0.0"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.6"
   resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.6.tgz"
@@ -944,6 +1126,11 @@
   resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.0.tgz"
   integrity sha512-SfJxIxNVYLTsKwzB3MoOQ1yxf4w/E6MdkvTgrgAt1bfxjSrLUoHMKrDOykwN14q65waezZIdqDneUIPh4/sKxg==
 
+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
 "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.12"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.12.tgz"
@@ -1057,6 +1244,13 @@
   resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/styled-jsx@^3.4.4":
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-3.4.4.tgz#643b49a892f596ee8d8e588e0270d6c05947048d"
+  integrity sha512-PRRa7gU7ske4Vs7sKWrqfKnuIIS6E/Yj5oKyxuM11AwOKhH9HlbQ7cKGLluXkOXzpEoDJE+6kQMj3AE34/JooQ==
+  dependencies:
+    styled-jsx "*"
+
 "@types/uuid@^8.3.4":
   version "8.3.4"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
@@ -5061,6 +5255,11 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+styled-jsx@*, styled-jsx@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.2.tgz#ff230fd593b737e9e68b630a694d460425478729"
+  integrity sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz"