Ŝanĝu al styled-components

2021-12-29 11:31:14 -05:00 · 2021-12-29 11:31:14 -05:00 · bf9b9570fb
parent 5738ff61e5
commit bf9b9570fb
9 changed files with 203 additions and 77 deletions
--- a/kliento/package-lock.json
+++ b/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=",
-          "dev": true
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
        }
      }
    },
+    "@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==",
-      "dev": true
+      "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w=="
    },
    "@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=",
-          "dev": true
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
        },
        "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=",
-          "dev": true
+          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
        },
        "has-flag": {
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
+          "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==",
-          "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==",
-      "dev": true
+      "integrity": "sha512-Gr86ujcNuPDnNOY8mi383Hvi8IYrJVJYuf3XcuBM/Dgd+bINn/7tHqsj+tKkoreMbmGsFLsltI/JJd8fOFWGDQ=="
    },
    "@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==",
-          "dev": true
+          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
        }
      }
    },
@ -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==",
-      "dev": true
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
    },
    "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=",
-      "dev": true
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
    },
    "to-regex-range": {
      "version": "5.0.1",
--- a/kliento/package.json
+++ b/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",
--- a/kliento/public/index.html
+++ b/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>
--- a/kliento/snowpack.config.js
+++ b/kliento/snowpack.config.js
@ -11,7 +11,6 @@ module.exports = {
    { match: 'routes', src: '/.*', dest: '/' },
  ],
  plugins: [
-    '@snowpack/plugin-sass',
    '@snowpack/plugin-typescript',
  ],
  packageOptions: {
--- a/kliento/src/AppPage.tsx
+++ b/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
--- a/kliento/src/appContext.tsx
+++ b/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: {
--- a/kliento/src/components/Menu/index.tsx
+++ b/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>
--- a/kliento/src/components/StatPool/index.tsx
+++ b/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>
-  <div>{value} / {max}</div> <div>{edge}</div>
-</div>)
+const StatPool = styled.div`
+  border: 1px solid black;
+`

-export default StatPool
+const render = ({ name, value, max, edge }: StatPoolProps) => (<StatPool>
+  <div>{value} / {max}</div> <div>{edge}</div>
+</StatPool>)
+
+export default render
--- a/kliento/src/index.tsx
+++ b/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 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>)
-}
+import AppPage from "./AppPage"

 const main = () => {
  ReactDOM.render(
    <BrowserRouter>
-      <App />
+      <AppPage />
    </BrowserRouter>
    , document.getElementById('root')
  )