Ŝanĝu al styled-components

kliento/package-lock.json

@@ -8,7 +8,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
       "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==",
-      "dev": true,
       "requires": {
         "@babel/highlight": "^7.16.0"
       }
@@ -60,7 +59,6 @@
       "version": "7.16.5",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.5.tgz",
       "integrity": "sha512-kIvCdjZqcdKqoDbVVdt5R99icaRtrtYhYK/xux5qiWCBmfdvEYMFZ68QCrpE5cbFM1JsuArUNs1ZkuKtTtUcZA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.0",
         "jsesc": "^2.5.1",
@@ -70,11 +68,18 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-          "dev": true
         }
       }
     },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz",
+      "integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==",
+      "requires": {
+        "@babel/types": "^7.16.0"
+      }
+    },
     "@babel/helper-compilation-targets": {
       "version": "7.16.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.3.tgz",
@@ -99,7 +104,6 @@
       "version": "7.16.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.5.tgz",
       "integrity": "sha512-ODQyc5AnxmZWm/R2W7fzhamOk1ey8gSguo5SGvF0zcB3uUzRpTRmM/jmLSm9bDMyPlvbyJ+PwPEK0BWIoZ9wjg==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.0"
       }
@@ -108,7 +112,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz",
       "integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==",
-      "dev": true,
       "requires": {
         "@babel/helper-get-function-arity": "^7.16.0",
         "@babel/template": "^7.16.0",
@@ -119,7 +122,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz",
       "integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.0"
       }
@@ -128,7 +130,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz",
       "integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.0"
       }
@@ -137,7 +138,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
       "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.0"
       }
@@ -177,7 +177,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz",
       "integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.16.0"
       }
@@ -185,8 +184,7 @@
     "@babel/helper-validator-identifier": {
       "version": "7.15.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz",
-      "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==",
+      "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w=="
-      "dev": true
     },
     "@babel/helper-validator-option": {
       "version": "7.14.5",
@@ -209,7 +207,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz",
       "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==",
-      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.15.7",
         "chalk": "^2.0.0",
@@ -220,7 +217,6 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -229,7 +225,6 @@
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
@@ -240,7 +235,6 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -248,26 +242,22 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-          "dev": true
         },
         "escape-string-regexp": {
           "version": "1.0.5",
           "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
-          "dev": true
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-          "dev": true
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -277,8 +267,7 @@
     "@babel/parser": {
       "version": "7.16.6",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.6.tgz",
-      "integrity": "sha512-Gr86ujcNuPDnNOY8mi383Hvi8IYrJVJYuf3XcuBM/Dgd+bINn/7tHqsj+tKkoreMbmGsFLsltI/JJd8fOFWGDQ==",
+      "integrity": "sha512-Gr86ujcNuPDnNOY8mi383Hvi8IYrJVJYuf3XcuBM/Dgd+bINn/7tHqsj+tKkoreMbmGsFLsltI/JJd8fOFWGDQ=="
-      "dev": true
     },
     "@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
@@ -409,7 +398,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz",
       "integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.0",
         "@babel/parser": "^7.16.0",
@@ -420,7 +408,6 @@
       "version": "7.16.5",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.5.tgz",
       "integrity": "sha512-FOCODAzqUMROikDYLYxl4nmwiLlu85rNqBML/A5hKRVXG2LV8d0iMqgPzdYTcIpjZEBB7D6UDU9vxRZiriASdQ==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.0",
         "@babel/generator": "^7.16.5",
@@ -437,8 +424,7 @@
         "globals": {
           "version": "11.12.0",
           "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
-          "dev": true
         }
       }
     },
@@ -446,7 +432,6 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
       "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
-      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.15.7",
         "to-fast-properties": "^2.0.0"
@@ -458,6 +443,29 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@eslint/eslintrc": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.4.tgz",
@@ -1330,6 +1338,16 @@
         "@types/node": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/http-cache-semantics": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz",
@@ -1443,6 +1461,17 @@
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "@types/styled-components": {
+      "version": "5.1.19",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.19.tgz",
+      "integrity": "sha512-hNj14Oamk7Jhb/fMMQG7TUkd3e8uMMgxsCTH+ueJNGdFo/PuhlGDQTPChqyilpZP0WttgBHkc2YyT5UG+yc6Yw==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/yargs": {
       "version": "16.0.4",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
@@ -1750,6 +1779,22 @@
         "@types/babel__traverse": "^7.0.6"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.2.tgz",
+      "integrity": "sha512-7eG5NE8rChnNTDxa6LQfynwgHTVOYYaHJbUYSlOhk8QBXIQiMBKq4gyfHBBKPrxUcVBXVJL61ihduCpCQbuNbw==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
@@ -2001,6 +2046,11 @@
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-lite": {
       "version": "1.0.30001292",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001292.tgz",
@@ -2276,6 +2326,11 @@
         "which": "^2.0.1"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-select": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
@@ -2289,6 +2344,16 @@
         "nth-check": "^2.0.0"
       }
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-what": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
@@ -2354,7 +2419,6 @@
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
       "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -3328,6 +3392,21 @@
         "@babel/runtime": "^7.7.6"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hosted-git-info": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz",
@@ -4771,8 +4850,7 @@
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
-      "dev": true
     },
     "json-buffer": {
       "version": "3.0.1",
@@ -4932,8 +5010,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -5202,8 +5279,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-      "dev": true
     },
     "nanoid": {
       "version": "3.1.30",
@@ -5765,8 +5841,7 @@
     "postcss-value-parser": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
-      "dev": true
     },
     "prelude-ls": {
       "version": "1.2.1",
@@ -6202,6 +6277,11 @@
       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
       "dev": true
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6521,6 +6601,38 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "styled-components": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
+      "integrity": "sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6602,8 +6714,7 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
-      "dev": true
     },
     "to-regex-range": {
       "version": "5.0.1",

kliento/package.json

@@ -14,7 +14,8 @@
     "history": "^5.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^6.2.1"
+    "react-router-dom": "^6.2.1",
+    "styled-components": "^5.3.3"
   },
   "devDependencies": {
     "@snowpack/plugin-react-refresh": "^2.5.0",
@@ -22,6 +23,7 @@
     "@snowpack/plugin-typescript": "^1.2.1",
     "@types/react": "^17.0.35",
     "@types/react-dom": "^17.0.11",
+    "@types/styled-components": "^5.1.19",
     "eslint": "^8.2.0",
     "jest": "^27.4.5",
     "plugin-typescript": "^8.0.0",

kliento/public/index.html

@@ -2,9 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <style type="text/css">
+body {
+  background-color: rgb(200, 190, 180);
+  }
+    </style>
   </head>
   <body>
-    <div id="root">Placeholder data</div>
+    <div id="root"></div>
     <script type="module" src="/dist/index.js"></script>
   </body>
 </html>

kliento/snowpack.config.js

@@ -11,7 +11,6 @@ module.exports = {
     { match: 'routes', src: '/.*', dest: '/' },
   ],
   plugins: [
-    '@snowpack/plugin-sass',
     '@snowpack/plugin-typescript',
   ],
   packageOptions: {

kliento/src/AppPage.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, useState } from "react"
+import ReactDOM from "react-dom"
+import { BrowserRouter, Route, Routes, useParams } from "react-router-dom"
+import styled from "styled-components"
+
+import AppProvider from "./appContext"
+import Menu from "./components/Menu"
+import PlayerListView from "./views/PlayerListView"
+
+const render = () => (<AppProvider>
+  <h1>Numenera Datasphere</h1>
+  <div className="columns">
+    <Menu />
+    <Routes>
+      <Route path="/" element={<div>root</div>} />
+      <Route path="campaign" element={<div>campaign</div>} />
+      <Route path="players" element={<PlayerListView />}>
+        <Route path=":name" element={<PlayerListView />} />
+      </Route>
+      <Route path="cyphers" element={<div>cyphers</div>} />
+      <Route path="battles" element={<div>battles</div>} />
+    </Routes>
+  </div>
+</AppProvider>
+)
+
+export default render

kliento/src/appContext.tsx

@@ -6,9 +6,9 @@ export type AppState = {
   playerCharacters: { [name: string]: PlayerCharacter };
 }
 
-export const AppContext = React.createContext<AppState>({
+export const AppContext = React.createContext<{ state: AppState }>({state: {
   playerCharacters: {}
-})
+}})
 
 const AppProvider = ({ children }: { children: ReactNode }) => {
   const [state, setState] = React.useState<AppState>({playerCharacters: {

kliento/src/components/Menu/index.tsx

@@ -1,8 +1,6 @@
 import React from "react"
 import { Link } from "react-router-dom"
 
-import "./styles.css"
-
 const MainMenu = () => (<nav>
   <ul className="menu">
     <li> <Link to="/campaign">Campaign Settings</Link> </li>

kliento/src/components/StatPool/index.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import styled from "styled-components"
 
 interface StatPoolProps {
   name: string;
@@ -8,8 +9,12 @@ interface StatPoolProps {
   edge: number;
 }
 
-const StatPool = ({ name, value, max, edge }: StatPoolProps) => (<div>
+const StatPool = styled.div`
-  <div>{value} / {max}</div> <div>{edge}</div>
+  border: 1px solid black;
-</div>)
+`
 
-export default StatPool
+const render = ({ name, value, max, edge }: StatPoolProps) => (<StatPool>
+  <div>{value} / {max}</div> <div>{edge}</div>
+</StatPool>)
+
+export default render

kliento/src/index.tsx

@@ -1,35 +1,14 @@
 import React, { createContext, useState } from "react"
 import ReactDOM from "react-dom"
-import { BrowserRouter, Route, Routes, useParams } from "react-router-dom";
+import { BrowserRouter, Route, Routes, useParams } from "react-router-dom"
+import styled from "styled-components"
 
-import Menu from "./components/Menu"
+import AppPage from "./AppPage"
-import PlayerListView from "./views/PlayerListView"
-import "./styles.scss"
-import { PlayerCharacter } from "./types"
-import AppProvider from "./appContext"
-
-const App = () => {
-  return (<AppProvider>
-    <h1>Numenera Datasphere</h1>
-    <div className="columns">
-      <Menu />
-      <Routes>
-        <Route path="/" element={<div>root</div>} />
-        <Route path="campaign" element={<div>campaign</div>} />
-        <Route path="players" element={<PlayerListView />}>
-          <Route path=":name" element={<PlayerListView />} />
-        </Route>
-        <Route path="cyphers" element={<div>cyphers</div>} />
-        <Route path="battles" element={<div>battles</div>} />
-      </Routes>
-    </div>
-  </AppProvider>)
-}
 
 const main = () => {
   ReactDOM.render(
     <BrowserRouter>
-      <App />
+      <AppPage />
     </BrowserRouter>
     , document.getElementById('root')
   )