Add input style and emojis (#17)

packages/react-chat-example/package.json

@@ -41,6 +41,7 @@
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
     "chai": "^4.3.4",
+    "css-loader": "^6.3.0",
     "esbuild-loader": "^2.15.1",
     "eslint": "^7.32.0",
     "eslint-plugin-hooks": "^0.2.0",
@@ -55,6 +56,7 @@
     "prettier": "^2.3.2",
     "rimraf": "^3.0.2",
     "source-map-loader": "^3.0.0",
+    "style-loader": "^3.3.0",
     "ts-loader": "^9.2.5",
     "ts-node": "^10.1.0",
     "typescript": "^4.3.5",

packages/react-chat-example/webpack.config.js

@@ -1,82 +1,86 @@
-const path = require('path')
+const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const webpack = require('webpack')
+const webpack = require('webpack');
-const { ESBuildMinifyPlugin } = require('esbuild-loader')
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
 
-module.exports = (env) => {
+module.exports = env => {
-    let environment = 'development'
+  let environment = 'development';
-    if (env.ENV) {
+  if (env.ENV) {
-        environment = env.ENV
+    environment = env.ENV;
-    }
+  }
 
-    return {
+  return {
-        entry: './src/index.tsx',
+    entry: './src/index.tsx',
-        output: {
+    output: {
-            filename: 'index.[fullhash].js',
+      filename: 'index.[fullhash].js',
-            path: path.join(__dirname, 'dist'),
+      path: path.join(__dirname, 'dist'),
-            publicPath: "/",
+      publicPath: '/',
-        },
+    },
-        devtool: 'source-map',
+    devtool: 'source-map',
-        resolve: {
+    resolve: {
-            extensions: ['.ts', '.tsx', '.js', '.json'],
+      extensions: ['.ts', '.tsx', '.js', '.json'],
-            fallback: {
+      fallback: {
-                "buffer": require.resolve("buffer/"),
+        buffer: require.resolve('buffer/'),
-                "crypto": require.resolve("crypto-browserify"),
+        crypto: require.resolve('crypto-browserify'),
-                "stream": require.resolve("stream-browserify"),
+        stream: require.resolve('stream-browserify'),
-                "assert": require.resolve("assert")
+        assert: require.resolve('assert'),
-            }
+      },
-        },
+    },
-        module: {
+    module: {
-            rules: [
+      rules: [
-                {
+        {
-                    test: /\.tsx?$/,
+          test: /\.tsx?$/,
-                    loader: 'esbuild-loader',
+          loader: 'esbuild-loader',
-                    exclude: /node_modules/,
+          exclude: /node_modules/,
-                    options: {
+          options: {
-                        loader: 'tsx',
+            loader: 'tsx',
-                        target: 'es2018',
+            target: 'es2018',
-                    },
-                },
-                {
-                    enforce: 'pre',
-                    test: /\.js$/,
-                    exclude: /node_modules/,
-                    loader: 'source-map-loader'
-                },
-                {
-                    test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf|ico)$/,
-                    use: ['file-loader'],
-                },
-            ],
-        },
-        optimization: {
-            minimizer: [
-              new ESBuildMinifyPlugin({
-                target: 'es2018',
-              }),
-            ],
           },
-        plugins: [
-            new ForkTsCheckerWebpackPlugin(),
-            new HtmlWebpackPlugin({
-                template: 'src/index.html',
-            }),
-            new webpack.DefinePlugin({
-                'process.env.ENV': JSON.stringify(environment),
-            }),
-            new webpack.ProvidePlugin({
-                process: 'process/browser.js',
-                Buffer: ['buffer', 'Buffer'],
-            }),
-        ],
-        devServer: {
-            historyApiFallback: true,
-            host: '0.0.0.0',
-            stats: 'errors-only',
-            overlay: true,
-            hot: true,
         },
-        stats: 'minimal'
+        {
-    }
+          enforce: 'pre',
-}
+          test: /\.js$/,
+          exclude: /node_modules/,
+          loader: 'source-map-loader',
+        },
+        {
+          test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf|ico)$/,
+          use: ['file-loader'],
+        },
+        {
+          test: /\.css$/i,
+          use: ['style-loader', 'css-loader'],
+        },
+      ],
+    },
+    optimization: {
+      minimizer: [
+        new ESBuildMinifyPlugin({
+          target: 'es2018',
+        }),
+      ],
+    },
+    plugins: [
+      new ForkTsCheckerWebpackPlugin(),
+      new HtmlWebpackPlugin({
+        template: 'src/index.html',
+      }),
+      new webpack.DefinePlugin({
+        'process.env.ENV': JSON.stringify(environment),
+      }),
+      new webpack.ProvidePlugin({
+        process: 'process/browser.js',
+        Buffer: ['buffer', 'Buffer'],
+      }),
+    ],
+    devServer: {
+      historyApiFallback: true,
+      host: '0.0.0.0',
+      stats: 'errors-only',
+      overlay: true,
+      hot: true,
+    },
+    stats: 'minimal',
+  };
+};

packages/react-chat/package.json

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@types/chai": "^4.2.21",
+    "@types/emoji-mart": "^3.0.6",
     "@types/mocha": "^9.0.0",
     "@types/node": "^16.9.6",
     "@types/react": "^17.0.16",
@@ -43,6 +44,7 @@
     "typescript": "^4.3.5"
   },
   "dependencies": {
+    "emoji-mart": "^3.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -1,7 +1,13 @@
+import { Picker } from "emoji-mart";
 import React, { useState } from "react";
 import styled from "styled-components";
 
-import { Theme } from "../../styles/themes";
+import { lightTheme, Theme } from "../../styles/themes";
+import { EmojiIcon } from "../Icons/EmojiIcon";
+import { GifIcon } from "../Icons/GifIcon";
+import { PictureIcon } from "../Icons/PictureIcon";
+import { StickerIcon } from "../Icons/StickerIcon";
+import "emoji-mart/css/emoji-mart.css";
 
 type ChatInputProps = {
   theme: Theme;
@@ -10,10 +16,49 @@ type ChatInputProps = {
 
 export function ChatInput({ theme, addMessage }: ChatInputProps) {
   const [content, setContent] = useState("");
+  const [showEmoji, setShowEmoji] = useState(false);
+
+  const addEmoji = (e: any) => {
+    const sym = e.unified.split("-");
+    const codesArray: any[] = [];
+    sym.forEach((el: string) => codesArray.push("0x" + el));
+    const emoji = String.fromCodePoint(...codesArray);
+    setContent(content + emoji);
+  };
 
   return (
     <InputWrapper>
+      {showEmoji && (
+        <div>
+          <Picker
+            onSelect={addEmoji}
+            theme={theme === lightTheme ? "light" : "dark"}
+            set="apple"
+            color={theme.memberNameColor}
+            emojiSize={26}
+            style={{
+              position: "absolute",
+              bottom: "100%",
+              right: "0",
+              color: theme.textSecondaryColor,
+            }}
+            showPreview={false}
+            showSkinTones={false}
+            title={""}
+          />
+        </div>
+      )}
+
+      <AddPictureBtn>
+        <PictureIcon theme={theme} />
+        <AddPictureInput
+          type="file"
+          multiple={true}
+          accept="image/png, image/jpeg"
+        />
+      </AddPictureBtn>
       <Input
+        type="text"
         theme={theme}
         placeholder={"Message"}
         value={content}
@@ -25,6 +70,15 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
           }
         }}
       />
+      <AddEmojiBtn onClick={() => setShowEmoji(!showEmoji)}>
+        <EmojiIcon theme={theme} isActive={showEmoji} />
+      </AddEmojiBtn>
+      <AddStickerBtn>
+        <StickerIcon theme={theme} />
+      </AddStickerBtn>
+      <AddGifBtn>
+        <GifIcon theme={theme} />
+      </AddGifBtn>
     </InputWrapper>
   );
 }
@@ -35,16 +89,21 @@ interface ThemeProps {
 
 const InputWrapper = styled.div`
   display: flex;
+  align-items: center;
   padding: 6px 8px 6px 10px;
+  position: relative;
 `;
+
 const Input = styled.input<ThemeProps>`
   width: 100%;
-  margin-left: 10px;
   height: 40px;
   background: ${({ theme }) => theme.inputColor};
   border-radius: 36px 16px 4px 36px;
   border: 1px solid ${({ theme }) => theme.inputColor};
+  color: ${({ theme }) => theme.textPrimaryColor};
+  margin-left: 10px;
   padding-left: 12px;
+  padding-right: 112px;
   outline: none;
   font-size: 15px;
   line-height: 22px;
@@ -54,3 +113,37 @@ const Input = styled.input<ThemeProps>`
     caret-color: ${({ theme }) => theme.notificationColor};
   }
 `;
+
+const AddPictureBtn = styled.label`
+  cursor: pointer;
+`;
+
+const AddPictureInput = styled.input`
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+`;
+
+const AddEmojiBtn = styled.label`
+  cursor: pointer;
+  position: absolute;
+  bottom: 10px;
+  right: 94px;
+  transform: translateX(-50%);
+`;
+
+const AddStickerBtn = styled.label`
+  cursor: pointer;
+  position: absolute;
+  bottom: 10px;
+  right: 58px;
+  transform: translateX(-50%);
+`;
+
+const AddGifBtn = styled.label`
+  cursor: pointer;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+  transform: translateX(-50%);
+`;

packages/react-chat/src/components/Icons/EmojiIcon.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Theme } from "../../styles/themes";
+
+interface ThemeProps {
+  theme: Theme;
+  isActive?: boolean;
+}
+
+export const EmojiIcon = ({ theme, isActive }: ThemeProps) => {
+  return (
+    <Icon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      theme={theme}
+    >
+      <path
+        className={isActive ? "active" : ""}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 18.5C14.6944 18.5 18.5 14.6944 18.5 10C18.5 5.30558 14.6944 1.5 10 1.5C5.30558 1.5 1.5 5.30558 1.5 10C1.5 14.6944 5.30558 18.5 10 18.5ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z"
+      />
+      <path
+        className={isActive ? "active" : ""}
+        d="M7.56858 13.1746C7.22903 12.9373 6.75712 12.9308 6.46422 13.2237C6.17133 13.5166 6.16876 13.996 6.49708 14.2485C7.46695 14.9946 8.68155 15.4381 9.99976 15.4381C11.318 15.4381 12.5326 14.9946 13.5024 14.2485C13.8308 13.996 13.8282 13.5166 13.5353 13.2237C13.2424 12.9308 12.7705 12.9373 12.4309 13.1746C11.742 13.6558 10.9039 13.9381 9.99976 13.9381C9.09565 13.9381 8.25747 13.6558 7.56858 13.1746Z"
+      />
+      <path
+        className={isActive ? "active" : ""}
+        d="M15 8.5C15 9.32843 14.3284 10 13.5 10C12.6716 10 12 9.32843 12 8.5C12 7.67157 12.6716 7 13.5 7C14.3284 7 15 7.67157 15 8.5Z"
+      />
+      <path
+        className={isActive ? "active" : ""}
+        d="M8 8.5C8 9.32843 7.32843 10 6.5 10C5.67157 10 5 9.32843 5 8.5C5 7.67157 5.67157 7 6.5 7C7.32843 7 8 7.67157 8 8.5Z"
+      />
+    </Icon>
+  );
+};
+
+const Icon = styled.svg<ThemeProps>`
+  & > path {
+    fill: ${({ theme }) => theme.textSecondaryColor};
+  }
+
+  & > path.active {
+    fill: ${({ theme }) => theme.memberNameColor};
+  }
+`;

packages/react-chat/src/components/Icons/GifIcon.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Theme } from "../../styles/themes";
+
+interface ThemeProps {
+  theme: Theme;
+  isActive?: boolean;
+}
+
+export const GifIcon = ({ theme, isActive }: ThemeProps) => {
+  return (
+    <Icon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      theme={theme}
+    >
+      <path
+        className={isActive ? "active" : ""}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V16C1.5 17.3807 2.61929 18.5 4 18.5H16C17.3807 18.5 18.5 17.3807 18.5 16V4C18.5 2.61929 17.3807 1.5 16 1.5ZM4 0C1.79086 0 0 1.79086 0 4V16C0 18.2091 1.79086 20 4 20H16C18.2091 20 20 18.2091 20 16V4C20 1.79086 18.2091 0 16 0H4Z"
+      />
+      <path
+        className={isActive ? "active" : ""}
+        d="M8.72261 11.4868V10.4133C8.72261 9.99528 8.38061 9.65328 7.96261 9.65328H6.22411C5.90111 9.65328 5.64461 9.90978 5.64461 10.2328C5.64461 10.5748 5.90111 10.8313 6.22411 10.8313H7.37361V11.5913C7.11711 11.8288 6.58511 12.0758 6.02461 12.0758C4.87511 12.0758 4.03911 11.1923 4.03911 9.99528C4.03911 8.79828 4.87511 7.91478 6.02461 7.91478C6.50911 7.91478 6.98411 8.12378 7.34511 8.47528C7.46861 8.59878 7.63961 8.66528 7.80111 8.66528C8.13361 8.66528 8.43761 8.38978 8.43761 8.05728C8.43761 7.91478 8.38061 7.76278 8.27611 7.64878C7.78211 7.11678 7.05061 6.71778 6.02461 6.71778C4.17211 6.71778 2.65211 7.99078 2.65211 9.99528C2.65211 11.9903 4.17211 13.2823 6.02461 13.2823C7.30711 13.2823 8.72261 12.6363 8.72261 11.4868Z"
+      />
+      <path
+        className={isActive ? "active" : ""}
+        d="M11.4392 12.5603V7.43978C11.4392 7.07878 11.1352 6.77478 10.7742 6.77478C10.3942 6.77478 10.0902 7.07878 10.0902 7.43978V12.5603C10.0902 12.9213 10.3942 13.2253 10.7552 13.2253C11.1352 13.2253 11.4392 12.9213 11.4392 12.5603Z"
+      />
+      <path
+        className={isActive ? "active" : ""}
+        d="M17.3479 7.43029C17.3479 7.09778 17.0819 6.83179 16.7684 6.83179H13.5669C13.1489 6.83179 12.8069 7.17379 12.8069 7.59179V12.5603C12.8069 12.9213 13.1109 13.2253 13.4719 13.2253C13.8519 13.2253 14.1559 12.9213 14.1559 12.5603V11.0463C14.1559 10.7701 14.3797 10.5463 14.6559 10.5463H16.2425C16.556 10.5463 16.822 10.2803 16.822 9.95728C16.822 9.62478 16.556 9.35879 16.2425 9.35879H14.6559C14.3797 9.35879 14.1559 9.13493 14.1559 8.85879V8.51929C14.1559 8.24314 14.3797 8.01929 14.6559 8.01929H16.7684C17.0819 8.01929 17.3479 7.75329 17.3479 7.43029Z"
+      />
+    </Icon>
+  );
+};
+
+const Icon = styled.svg<ThemeProps>`
+  & > path {
+    fill: ${({ theme }) => theme.textSecondaryColor};
+  }
+
+  & > path.active {
+    fill: ${({ theme }) => theme.memberNameColor};
+  }
+`;

packages/react-chat/src/components/Icons/PictureIcon.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Theme } from "../../styles/themes";
+
+interface ThemeProps {
+  theme: Theme;
+}
+
+export const PictureIcon = ({ theme }: ThemeProps) => {
+  return (
+    <Icon
+      width="20"
+      height="18"
+      viewBox="0 0 20 18"
+      xmlns="http://www.w3.org/2000/svg"
+      theme={theme}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.5 6.5C16.5 8.15685 15.1569 9.5 13.5 9.5C11.8431 9.5 10.5 8.15685 10.5 6.5C10.5 4.84315 11.8431 3.5 13.5 3.5C15.1569 3.5 16.5 4.84315 16.5 6.5ZM15 6.5C15 7.32843 14.3284 8 13.5 8C12.6716 8 12 7.32843 12 6.5C12 5.67157 12.6716 5 13.5 5C14.3284 5 15 5.67157 15 6.5Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H16C18.2091 18 20 16.2091 20 14V4C20 1.79086 18.2091 0 16 0H4ZM16 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V7.23223C1.5 7.67768 2.03857 7.90077 2.35355 7.58579L3.76256 6.17678C4.44598 5.49336 5.55402 5.49336 6.23744 6.17678L16.3181 16.2575C16.4372 16.3765 16.6094 16.4311 16.7695 16.3793C17.7737 16.0548 18.5 15.1122 18.5 14V4C18.5 2.61929 17.3807 1.5 16 1.5ZM1.53033 10.5303C1.51153 10.5491 1.5 10.5742 1.5 10.6008V14C1.5 15.3807 2.61929 16.5 4 16.5H13.2322C13.6777 16.5 13.9008 15.9614 13.5858 15.6464L5.17678 7.23744C5.07914 7.1398 4.92085 7.13981 4.82322 7.23744L1.53033 10.5303Z"
+      />
+    </Icon>
+  );
+};
+
+const Icon = styled.svg<ThemeProps>`
+  & > path {
+    fill: ${({ theme }) => theme.textSecondaryColor};
+  }
+`;

packages/react-chat/src/components/Icons/StickerIcon.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Theme } from "../../styles/themes";
+
+interface ThemeProps {
+  theme: Theme;
+  isActive?: boolean;
+}
+
+export const StickerIcon = ({ theme, isActive }: ThemeProps) => {
+  return (
+    <Icon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      theme={theme}
+    >
+      <path
+        className={isActive ? "active" : ""}
+        d="M7.56858 13.4863C7.22903 13.2491 6.75712 13.2426 6.46422 13.5354C6.17133 13.8283 6.16876 14.3077 6.49708 14.5603C7.46695 15.3063 8.68155 15.7499 9.99976 15.7499C11.318 15.7499 12.5326 15.3063 13.5024 14.5603C13.8308 14.3077 13.8282 13.8283 13.5353 13.5354C13.2424 13.2426 12.7705 13.2491 12.4309 13.4863C11.742 13.9676 10.9039 14.2499 9.99976 14.2499C9.09565 14.2499 8.25747 13.9676 7.56858 13.4863Z"
+      />
+      <path
+        className={isActive ? "active" : ""}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.8645 11.6499C19.9401 11.1946 19.8959 10.7435 19.7602 10.3174C19.5838 9.76409 19.253 9.25286 18.8292 8.82907L11.1708 1.17069C10.747 0.746897 10.2358 0.416048 9.68247 0.239716C9.62921 0.222742 9.57555 0.2072 9.52155 0.193144C9.14354 0.0947561 8.7484 0.0692148 8.35001 0.135358C8.28899 0.145488 8.22816 0.156171 8.16753 0.1674C3.51984 1.02813 0 5.10295 0 9.99988C0 15.5227 4.47715 19.9999 10 19.9999C14.8969 19.9999 18.9717 16.48 19.8325 11.8324C19.8437 11.7717 19.8544 11.7109 19.8645 11.6499ZM1.5 9.99988C1.5 6.08625 4.14622 2.78816 7.74701 1.8013C7.87574 1.76602 8 1.8664 8 1.99988C8 7.52272 12.4772 11.9999 18 11.9999C18.1335 11.9999 18.2339 12.1241 18.1986 12.2529C17.2117 15.8537 13.9136 18.4999 10 18.4999C5.30558 18.4999 1.5 14.6943 1.5 9.99988ZM18 10.4999C18.1011 10.4999 18.1641 10.3935 18.1094 10.3085C18.0185 10.1673 17.9054 10.0266 17.7685 9.88973L10.1101 2.23135C9.97328 2.09448 9.83259 1.98135 9.69142 1.89052C9.60642 1.83582 9.5 1.89879 9.5 1.99988C9.5 6.6943 13.3056 10.4999 18 10.4999Z"
+      />
+    </Icon>
+  );
+};
+
+const Icon = styled.svg<ThemeProps>`
+  & > path {
+    fill: ${({ theme }) => theme.textSecondaryColor};
+  }
+
+  & > path.active {
+    fill: ${({ theme }) => theme.memberNameColor};
+  }
+`;

yarn.lock

@@ -124,7 +124,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5":
   version: 7.15.4
   resolution: "@babel/runtime@npm:7.15.4"
   dependencies:
@@ -229,6 +229,7 @@ __metadata:
     buffer: ^6.0.3
     chai: ^4.3.4
     crypto-browserify: ^3.12.0
+    css-loader: ^6.3.0
     esbuild-loader: ^2.15.1
     eslint: ^7.32.0
     eslint-plugin-hooks: ^0.2.0
@@ -248,6 +249,7 @@ __metadata:
     rimraf: ^3.0.2
     source-map-loader: ^3.0.0
     stream-browserify: ^3.0.0
+    style-loader: ^3.3.0
     ts-loader: ^9.2.5
     ts-node: ^10.1.0
     typescript: ^4.3.5
@@ -262,6 +264,7 @@ __metadata:
   resolution: "@dappconnect/react-chat@workspace:packages/react-chat"
   dependencies:
     "@types/chai": ^4.2.21
+    "@types/emoji-mart": ^3.0.6
     "@types/mocha": ^9.0.0
     "@types/node": ^16.9.6
     "@types/react": ^17.0.16
@@ -270,6 +273,7 @@ __metadata:
     "@typescript-eslint/parser": ^4.29.0
     chai: ^4.3.4
     copyfiles: ^2.4.1
+    emoji-mart: ^3.0.1
     eslint: ^7.32.0
     jsdom: ^16.7.0
     jsdom-global: ^3.0.2
@@ -749,6 +753,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/emoji-mart@npm:^3.0.6":
+  version: 3.0.6
+  resolution: "@types/emoji-mart@npm:3.0.6"
+  dependencies:
+    "@types/react": "*"
+  checksum: 715db503626f7af278ce4c62ffef8c393884649f474f5da0bafa3faef95bb5c47b65ec3c817535ebab4e3433db7c1b18e3d9dde26e2c0b91c00450ea1b252466
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.0":
   version: 3.7.1
   resolution: "@types/eslint-scope@npm:3.7.1"
@@ -3050,6 +3063,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-loader@npm:^6.3.0":
+  version: 6.3.0
+  resolution: "css-loader@npm:6.3.0"
+  dependencies:
+    icss-utils: ^5.1.0
+    postcss: ^8.2.15
+    postcss-modules-extract-imports: ^3.0.0
+    postcss-modules-local-by-default: ^4.0.0
+    postcss-modules-scope: ^3.0.0
+    postcss-modules-values: ^4.0.0
+    postcss-value-parser: ^4.1.0
+    semver: ^7.3.5
+  peerDependencies:
+    webpack: ^5.0.0
+  checksum: af23ad314c69b278da476a65b4912f11b2f9402496dad109b8fa7fe987666889c2f67f3996441d4fc485cae3b4349cdb4e0ec7c8b1d79344eac3d19664bb6a32
+  languageName: node
+  linkType: hard
+
 "css-select@npm:^4.1.3":
   version: 4.1.3
   resolution: "css-select@npm:4.1.3"
@@ -3081,6 +3112,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssesc@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "cssesc@npm:3.0.0"
+  bin:
+    cssesc: bin/cssesc
+  checksum: f8c4ababffbc5e2ddf2fa9957dda1ee4af6048e22aeda1869d0d00843223c1b13ad3f5d88b51caa46c994225eacb636b764eb807a8883e2fb6f99b4f4e8c48b2
+  languageName: node
+  linkType: hard
+
 "cssom@npm:^0.4.4":
   version: 0.4.4
   resolution: "cssom@npm:0.4.4"
@@ -3630,6 +3670,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emoji-mart@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "emoji-mart@npm:3.0.1"
+  dependencies:
+    "@babel/runtime": ^7.0.0
+    prop-types: ^15.6.0
+  peerDependencies:
+    react: ^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0
+  checksum: 6282c6bfea0b183941c63bf20aee53a317503465266cf634819fd5aab84c42c867ee8b412dca8628dd8a74acdf5bd2006dbac6ac024f8f6a07596471f7bbd35d
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^7.0.1":
   version: 7.0.3
   resolution: "emoji-regex@npm:7.0.3"
@@ -5435,6 +5487,15 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"icss-utils@npm:^5.0.0, icss-utils@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "icss-utils@npm:5.1.0"
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 5c324d283552b1269cfc13a503aaaa172a280f914e5b81544f3803bc6f06a3b585fb79f66f7c771a2c052db7982c18bf92d001e3b47282e3abbbb4c4cc488d68
+  languageName: node
+  linkType: hard
+
 "ieee754@npm:^1.2.1":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"
@@ -7679,6 +7740,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"nanocolors@npm:^0.2.2":
+  version: 0.2.12
+  resolution: "nanocolors@npm:0.2.12"
+  checksum: a34a63dcca29eede3db41afd1421f130423fc99e73f6c89166f57815bbf0441f02a6112651b068acfd309707215f48eec15dd38e790a8225d6762503a7c175c6
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:3.1.23":
   version: 3.1.23
   resolution: "nanoid@npm:3.1.23"
@@ -7697,6 +7765,15 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.1.25":
+  version: 3.1.28
+  resolution: "nanoid@npm:3.1.28"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: ae2fa9f3ce7a690ec62fc2fdf92345f023b20db760024f767c25ad392bde6414dc0b44a8e66dc1209426f36e4771e63b09ad2b49d8f1b04063b37e21b46af8d0
+  languageName: node
+  linkType: hard
+
 "nanomatch@npm:^1.2.9":
   version: 1.2.13
   resolution: "nanomatch@npm:1.2.13"
@@ -8789,13 +8866,78 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"postcss-value-parser@npm:^4.0.2":
+"postcss-modules-extract-imports@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "postcss-modules-extract-imports@npm:3.0.0"
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 4b65f2f1382d89c4bc3c0a1bdc5942f52f3cb19c110c57bd591ffab3a5fee03fcf831604168205b0c1b631a3dce2255c70b61aaae3ef39d69cd7eb450c2552d2
+  languageName: node
+  linkType: hard
+
+"postcss-modules-local-by-default@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "postcss-modules-local-by-default@npm:4.0.0"
+  dependencies:
+    icss-utils: ^5.0.0
+    postcss-selector-parser: ^6.0.2
+    postcss-value-parser: ^4.1.0
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 6cf570badc7bc26c265e073f3ff9596b69bb954bc6ac9c5c1b8cba2995b80834226b60e0a3cbb87d5f399dbb52e6466bba8aa1d244f6218f99d834aec431a69d
+  languageName: node
+  linkType: hard
+
+"postcss-modules-scope@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "postcss-modules-scope@npm:3.0.0"
+  dependencies:
+    postcss-selector-parser: ^6.0.4
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 330b9398dbd44c992c92b0dc612c0626135e2cc840fee41841eb61247a6cfed95af2bd6f67ead9dd9d0bb41f5b0367129d93c6e434fa3e9c58ade391d9a5a138
+  languageName: node
+  linkType: hard
+
+"postcss-modules-values@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "postcss-modules-values@npm:4.0.0"
+  dependencies:
+    icss-utils: ^5.0.0
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: f7f2cdf14a575b60e919ad5ea52fed48da46fe80db2733318d71d523fc87db66c835814940d7d05b5746b0426e44661c707f09bdb83592c16aea06e859409db6
+  languageName: node
+  linkType: hard
+
+"postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4":
+  version: 6.0.6
+  resolution: "postcss-selector-parser@npm:6.0.6"
+  dependencies:
+    cssesc: ^3.0.0
+    util-deprecate: ^1.0.2
+  checksum: 3602758798048bffbd6a97d6f009b32a993d6fd2cc70775bb59593e803d7fa8738822ecffb2fafc745edf7fad297dad53c30d2cfe78446a7d3f4a4a258cb15b2
+  languageName: node
+  linkType: hard
+
+"postcss-value-parser@npm:^4.0.2, postcss-value-parser@npm:^4.1.0":
   version: 4.1.0
   resolution: "postcss-value-parser@npm:4.1.0"
   checksum: 68a9ea27c780fa3cc350be37b47cc46385c61dd9627990909230e0e9c3debf6d5beb49006bd743a2e506cdd6fa7d07637f2d9504a394f67cc3011d1ff0134886
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.2.15":
+  version: 8.3.8
+  resolution: "postcss@npm:8.3.8"
+  dependencies:
+    nanocolors: ^0.2.2
+    nanoid: ^3.1.25
+    source-map-js: ^0.6.2
+  checksum: 20073f3f70487e9fa8d40e930d02595c4d96b7db8b2142ee4efe8e0c9a54c844c720370e178aef57c12d2d5bf65592cfdd1d020a74bf2840bc58650590713a35
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -8893,7 +9035,7 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
+"prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
   version: 15.7.2
   resolution: "prop-types@npm:15.7.2"
   dependencies:
@@ -10566,6 +10708,15 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"style-loader@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "style-loader@npm:3.3.0"
+  peerDependencies:
+    webpack: ^5.0.0
+  checksum: edad553a1ae74af9afb4dd582774d484e8e4e5f8c9593a921b0f3f0e2cdb3a58c4b44a3afb43021956804042eaffd68d5dc4f956d4c5f633e7e67eda6a750042
+  languageName: node
+  linkType: hard
+
 "styled-components@npm:^5.3.1":
   version: 5.3.1
   resolution: "styled-components@npm:5.3.1"
@@ -11345,7 +11496,7 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
+"util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
   checksum: 474acf1146cb2701fe3b074892217553dfcf9a031280919ba1b8d651a068c9b15d863b7303cb15bd00a862b498e6cf4ad7b4a08fb134edd5a6f7641681cb54a2