diff --git a/package-lock.json b/package-lock.json
index 203a0db..6de5c96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "bluelib",
-  "version": "0.11.2",
+  "version": "0.12.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1158,40 +1158,40 @@
       }
     },
     "@fortawesome/fontawesome-common-types": {
-      "version": "0.2.28",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
-      "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
+      "version": "0.2.29",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.29.tgz",
+      "integrity": "sha512-cY+QfDTbZ7XVxzx7jxbC98Oxr/zc7R2QpTLqTxqlfyXDrAJjzi/xUIqAUsygELB62JIrbsWxtSRhayKFkGI7MA=="
     },
     "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.28",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
-      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
+      "version": "1.2.29",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.29.tgz",
+      "integrity": "sha512-xmPmP2t8qrdo8RyKihTkGb09RnZoc+7HFBCnr0/6ZhStdGDSLeEd7ajV181+2W29NWIFfylO13rU+s3fpy3cnA==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.28"
+        "@fortawesome/fontawesome-common-types": "^0.2.29"
       }
     },
     "@fortawesome/free-brands-svg-icons": {
-      "version": "5.13.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz",
-      "integrity": "sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.1.tgz",
+      "integrity": "sha512-dKwF+NpIV2LVCNBA7hibH53k+ChF4Wu59P2z35gu3zwRBZpmpLVhS9k1/RiSqUqkyXUQvA2rSv48GY6wp5axZQ==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.28"
+        "@fortawesome/fontawesome-common-types": "^0.2.29"
       }
     },
     "@fortawesome/free-regular-svg-icons": {
-      "version": "5.13.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.0.tgz",
-      "integrity": "sha512-70FAyiS5j+ANYD4dh9NGowTorNDnyvQHHpCM7FpnF7GxtDjBUCKdrFqCPzesEIpNDFNd+La3vex+jDk4nnUfpA==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.1.tgz",
+      "integrity": "sha512-sSeaqqmv2ovA5LKcrbh3VnEDZHVhaxijWKm4R0AdT0eG21pgxNsJbStD8lW9z6bgSuWXRNHhbhOmARuRCLS8tw==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.28"
+        "@fortawesome/fontawesome-common-types": "^0.2.29"
       }
     },
     "@fortawesome/free-solid-svg-icons": {
-      "version": "5.13.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
-      "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
+      "version": "5.13.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.1.tgz",
+      "integrity": "sha512-LQH/0L1p4+rqtoSHa9qFYR84hpuRZKqaQ41cfBQx8b68p21zoWSekTAeA54I/2x9VlCHDLFlG74Nmdg4iTPQOg==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.28"
+        "@fortawesome/fontawesome-common-types": "^0.2.29"
       }
     },
     "@fortawesome/react-fontawesome": {
@@ -1291,9 +1291,9 @@
       }
     },
     "@rollup/plugin-babel": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.0.3.tgz",
-      "integrity": "sha512-NlaPf4E6YFxeOCbqc+A2PTkB1BSy3rfKu6EJuQ1MGhMHpTVvMqKi6Rf0DlwtnEsTNK9LueUgsGEgp5Occ4KDVA==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.0.4.tgz",
+      "integrity": "sha512-MBtNoi5gqBEbqy1gE9jZBfPsi10kbuK2CEu9bx53nk1Z3ATRvBOoZ/GsbhXOeVbS76xXi/DeYM+vYX6EGIDv9A==",
       "dev": true,
       "requires": {
         "@babel/helper-module-imports": "^7.7.4",
@@ -1301,9 +1301,9 @@
       }
     },
     "@rollup/plugin-commonjs": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz",
-      "integrity": "sha512-Ycr12N3ZPN96Fw2STurD21jMqzKwL9QuFhms3SD7KKRK7oaXUsBU9Zt0jL/rOPHiPYisI21/rXGO3jr9BnLHUA==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-13.0.0.tgz",
+      "integrity": "sha512-Anxc3qgkAi7peAyesTqGYidG5GRim9jtg8xhmykNaZkImtvjA7Wsqep08D2mYsqw1IF7rA3lYfciLgzUSgRoqw==",
       "dev": true,
       "requires": {
         "@rollup/pluginutils": "^3.0.8",
@@ -6189,9 +6189,9 @@
       }
     },
     "interpret": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
-      "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
       "dev": true
     },
     "invariant": {
@@ -6203,12 +6203,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "invert-kv": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
-      "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
-      "dev": true
-    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -6811,15 +6805,6 @@
         "package-json": "^6.3.0"
       }
     },
-    "lcid": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
-      "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
-      "dev": true,
-      "requires": {
-        "invert-kv": "^2.0.0"
-      }
-    },
     "less": {
       "version": "3.11.3",
       "resolved": "https://registry.npmjs.org/less/-/less-3.11.3.tgz",
@@ -7047,15 +7032,6 @@
         }
       }
     },
-    "map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-      "dev": true,
-      "requires": {
-        "p-defer": "^1.0.0"
-      }
-    },
     "map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
@@ -7163,17 +7139,6 @@
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
-    "mem": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
-      "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
-      "dev": true,
-      "requires": {
-        "map-age-cleaner": "^0.1.1",
-        "mimic-fn": "^2.0.0",
-        "p-is-promise": "^2.0.0"
-      }
-    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -7202,35 +7167,35 @@
       "dev": true
     },
     "microbundle": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/microbundle/-/microbundle-0.12.1.tgz",
-      "integrity": "sha512-SEMJhQeubFOJ1N4KqcgpqeynjIT3I7T9Mi1NrbjvkrZuPx6OnKMUIuYiGRDeWpq2RZ+Hu6qdmDb06WA5iu4Jtw==",
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/microbundle/-/microbundle-0.12.2.tgz",
+      "integrity": "sha512-6/48HlmDPq/Q1HyS5liFFSvcU0v8n8NROH3K1Z/saU+TRaxCe38eNNqZwjitOyTKilXqnp1yHEEjZGYWVvr7WQ==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.8.7",
+        "@babel/core": "^7.10.2",
         "@babel/plugin-proposal-class-properties": "7.7.4",
-        "@babel/plugin-syntax-import-meta": "^7.8.3",
-        "@babel/plugin-syntax-jsx": "^7.7.4",
-        "@babel/plugin-transform-flow-strip-types": "^7.7.4",
-        "@babel/plugin-transform-react-jsx": "^7.7.7",
-        "@babel/plugin-transform-regenerator": "^7.8.7",
-        "@babel/preset-env": "^7.8.7",
-        "@babel/preset-flow": "^7.7.4",
+        "@babel/plugin-syntax-import-meta": "^7.10.1",
+        "@babel/plugin-syntax-jsx": "^7.10.1",
+        "@babel/plugin-transform-flow-strip-types": "^7.10.1",
+        "@babel/plugin-transform-react-jsx": "^7.10.1",
+        "@babel/plugin-transform-regenerator": "^7.10.1",
+        "@babel/preset-env": "^7.10.2",
+        "@babel/preset-flow": "^7.10.1",
         "@babel/preset-modules": "^0.1.3",
-        "@rollup/plugin-alias": "^3.0.1",
-        "@rollup/plugin-babel": "^5.0.0",
-        "@rollup/plugin-commonjs": "^11.0.2",
-        "@rollup/plugin-json": "^4.0.2",
+        "@rollup/plugin-alias": "^3.1.1",
+        "@rollup/plugin-babel": "^5.0.3",
+        "@rollup/plugin-commonjs": "^13.0.0",
+        "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^6.1.0",
         "asyncro": "^3.0.0",
-        "autoprefixer": "^9.7.3",
+        "autoprefixer": "^9.8.0",
         "babel-plugin-macros": "^2.8.0",
         "babel-plugin-transform-async-to-promises": "^0.8.15",
         "babel-plugin-transform-replace-expressions": "^0.2.0",
         "brotli-size": "^4.0.0",
         "camelcase": "^5.3.1",
         "cssnano": "^4.1.10",
-        "es6-promisify": "^6.0.1",
+        "es6-promisify": "^6.1.1",
         "escape-string-regexp": "^4.0.0",
         "filesize": "^6.1.0",
         "gzip-size": "^5.1.1",
@@ -7241,13 +7206,13 @@
         "rollup": "^1.32.1",
         "rollup-plugin-bundle-size": "^1.0.1",
         "rollup-plugin-es3": "^1.1.0",
-        "rollup-plugin-postcss": "^2.4.1",
+        "rollup-plugin-postcss": "^2.9.0",
         "rollup-plugin-terser": "^5.3.0",
         "rollup-plugin-typescript2": "^0.25.3",
         "sade": "^1.7.3",
         "tiny-glob": "^0.2.6",
-        "tslib": "^1.11.1",
-        "typescript": "^3.8.3"
+        "tslib": "^1.13.0",
+        "typescript": "^3.9.5"
       },
       "dependencies": {
         "@babel/plugin-proposal-class-properties": {
@@ -7290,6 +7255,12 @@
           "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",
           "integrity": "sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==",
           "dev": true
+        },
+        "typescript": {
+          "version": "3.9.5",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz",
+          "integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==",
+          "dev": true
         }
       }
     },
@@ -8095,41 +8066,18 @@
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
       "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
     },
-    "os-locale": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
-      "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
-      "dev": true,
-      "requires": {
-        "execa": "^1.0.0",
-        "lcid": "^2.0.0",
-        "mem": "^4.0.0"
-      }
-    },
     "p-cancelable": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
       "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
       "dev": true
     },
-    "p-defer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
-      "dev": true
-    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
       "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
       "dev": true
     },
-    "p-is-promise": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
-      "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==",
-      "dev": true
-    },
     "p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -12197,9 +12145,9 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
     },
     "v8-compile-cache": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz",
-      "integrity": "sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz",
+      "integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==",
       "dev": true
     },
     "validate-npm-package-name": {
@@ -12510,22 +12458,22 @@
       }
     },
     "webpack-cli": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.11.tgz",
-      "integrity": "sha512-dXlfuml7xvAFwYUPsrtQAA9e4DOe58gnzSxhgrO/ZM/gyXTBowrsYeubyN4mqGhYdpXMFNyQ6emjJS9M7OBd4g==",
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.12.tgz",
+      "integrity": "sha512-NVWBaz9k839ZH/sinurM+HcDvJOTXwSjYp1ku+5XKeOC03z8v5QitnK/x+lAxGXFyhdayoIf/GOpv85z3/xPag==",
       "dev": true,
       "requires": {
-        "chalk": "2.4.2",
-        "cross-spawn": "6.0.5",
-        "enhanced-resolve": "4.1.0",
-        "findup-sync": "3.0.0",
-        "global-modules": "2.0.0",
-        "import-local": "2.0.0",
-        "interpret": "1.2.0",
-        "loader-utils": "1.2.3",
-        "supports-color": "6.1.0",
-        "v8-compile-cache": "2.0.3",
-        "yargs": "13.2.4"
+        "chalk": "^2.4.2",
+        "cross-spawn": "^6.0.5",
+        "enhanced-resolve": "^4.1.1",
+        "findup-sync": "^3.0.0",
+        "global-modules": "^2.0.0",
+        "import-local": "^2.0.0",
+        "interpret": "^1.4.0",
+        "loader-utils": "^1.4.0",
+        "supports-color": "^6.1.0",
+        "v8-compile-cache": "^2.1.1",
+        "yargs": "^13.3.2"
       },
       "dependencies": {
         "cross-spawn": {
@@ -12541,34 +12489,6 @@
             "which": "^1.2.9"
           }
         },
-        "emojis-list": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-          "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
-          "dev": true
-        },
-        "enhanced-resolve": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz",
-          "integrity": "sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "memory-fs": "^0.4.0",
-            "tapable": "^1.0.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
-          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^2.0.0",
-            "json5": "^1.0.1"
-          }
-        },
         "path-key": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
@@ -12606,22 +12526,21 @@
           }
         },
         "yargs": {
-          "version": "13.2.4",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.2.4.tgz",
-          "integrity": "sha512-HG/DWAJa1PAnHT9JAhNa8AbAv3FPaiLzioSjCcmuXXhP8MlpHO5vwls4g4j6n30Z74GVQj8Xa62dWVx1QCGklg==",
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
           "dev": true,
           "requires": {
             "cliui": "^5.0.0",
             "find-up": "^3.0.0",
             "get-caller-file": "^2.0.1",
-            "os-locale": "^3.1.0",
             "require-directory": "^2.1.1",
             "require-main-filename": "^2.0.0",
             "set-blocking": "^2.0.0",
             "string-width": "^3.0.0",
             "which-module": "^2.0.0",
             "y18n": "^4.0.0",
-            "yargs-parser": "^13.1.0"
+            "yargs-parser": "^13.1.2"
           }
         },
         "yargs-parser": {
diff --git a/package.json b/package.json
index 92f737e..22addd1 100644
--- a/package.json
+++ b/package.json
@@ -16,15 +16,15 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.2",
+    "microbundle": "^0.12.2",
     "preact-cli": "^3.0.0-rc.14",
-    "webpack-cli": "^3.3.11",
-    "microbundle": "^0.12.1"
+    "webpack-cli": "^3.3.12"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-brands-svg-icons": "^5.13.0",
-    "@fortawesome/free-regular-svg-icons": "^5.13.0",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.29",
+    "@fortawesome/free-brands-svg-icons": "^5.13.1",
+    "@fortawesome/free-regular-svg-icons": "^5.13.1",
+    "@fortawesome/free-solid-svg-icons": "^5.13.1",
     "@fortawesome/react-fontawesome": "^0.1.11",
     "css-loader": "^3.6.0",
     "file-loader": "^5.0.2",
diff --git a/preact.config.js b/preact.config.js
index 9e9bf08..9a9d729 100644
--- a/preact.config.js
+++ b/preact.config.js
@@ -1,4 +1,7 @@
 export default function (config, env, helpers) {
+    config.module.rules[4].include = [env.source(".")]
+    config.module.rules[5].exclude = [env.source(".")]
+
     // noinspection JSUnresolvedVariable
     config.resolve.alias["react"] = "preact/compat";
     // noinspection JSUnresolvedVariable
diff --git a/src/components/Enums/ValidityStatus.js b/src/components/Enums/ValidityStatus.js
new file mode 100644
index 0000000..677a1a8
--- /dev/null
+++ b/src/components/Enums/ValidityStatus.js
@@ -0,0 +1,8 @@
+export default Object.freeze({
+    NONE: "none",
+    CHECKING: "checking",
+    OK: "ok",
+    WARNING: "warning",
+    ERROR: "error",
+    DISABLED: "disabled",
+})
diff --git a/src/components/Layout/HButton.js b/src/components/Layout/HButton.js
index 19c9df1..036c49b 100644
--- a/src/components/Layout/HButton.js
+++ b/src/components/Layout/HButton.js
@@ -1,26 +1,24 @@
 import style from './HButton.less';
 import {concatClass} from "../../index";
+import ValidityStatus from "../Enums/ValidityStatus";
 
 export default function (props) {
-	let validityClass = null;
-	if(props.validity === true) {
-		validityClass = style.valid;
-	}
-	else if(props.validity === false) {
-		validityClass = style.invalid;
-	}
-
-
 	return (
-		<label className={style.label}>
-			<div className={style.text}>{props.label}</div>
-			<button
-				onClick={props.disabled ? null : props.onClick}
-				className={concatClass(style.button, validityClass)}
-				disabled={props.disabled}
-			>
-				{props.children}
-			</button>
+		<label class={concatClass(style.label, style[props.validity ? props.validity.validity : ValidityStatus.NONE])}>
+			<div class={style.grid}>
+				<div class={style.text}>{props.label}</div>
+				<div class={style.icon}>{props.icon}</div>
+				<button
+					onClick={(props.disabled && props.validity.validity === ValidityStatus.DISABLED) ? null : props.onClick}
+					class={style.button}
+					disabled={props.validity ? props.validity.validity === ValidityStatus.DISABLED : false}
+				>
+					{props.children}
+				</button>
+				<div className={style.message}>
+					{props.validity ? props.validity.message : ""}
+				</div>
+			</div>
 		</label>
 	);
 }
diff --git a/src/components/Layout/HButton.less b/src/components/Layout/HButton.less
index 21abc6a..f9a1ff1 100644
--- a/src/components/Layout/HButton.less
+++ b/src/components/Layout/HButton.less
@@ -2,28 +2,80 @@
 
 .label {
     width: 100%;
-    display: flex;
-    align-items: center;
+}
+
+.grid {
     margin-top: 2px;
     margin-bottom: 2px;
+
+    display: grid;
+    align-items: center;
+    grid-template-columns: 120px 24px auto;
+    grid-column-gap: 2px;
 }
 
 .text {
-    flex-grow: 1;
-    max-width: 160px;
     text-align: right;
-    margin-right: 4px;
+
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.icon {
+    text-align: center;
+
+    grid-column: 2;
+    grid-row: 1;
 }
 
 .button {
-    margin-left: 4px;
-    flex-grow: 2;
+    grid-column: 3;
+    grid-row: 1;
 }
 
-.valid {
-    border: 1px solid @lime !important;
+.message {
+    font-size: x-small;
+
+    grid-column: 3;
+    grid-row: 2;
 }
 
-.invalid {
-    border: 1px solid @red !important;
+.ok {
+    color: @validfg;
+
+    input[type="text"], input[type="password"] {
+        color: @validfg !important;
+        border-color: fade(@validfg, 10%) !important;
+        background-color: @validbg !important;
+    }
+}
+
+.warning {
+    color: @warningfg;
+
+    input[type="text"], input[type="password"] {
+        color: @warningfg !important;
+        border-color: fade(@warningfg, 10%) !important;
+        background-color: @warningbg !important;
+    }
+}
+
+.error {
+    color: @invalidfg;
+
+    input[type="text"], input[type="password"] {
+        color: @invalidfg !important;
+        border-color: fade(@invalidfg, 10%) !important;
+        background-color: @invalidbg !important;
+    }
+}
+
+.disabled {
+    color: @disabledfg;
+
+    input[type="text"], input[type="password"] {
+        color: @disabledfg !important;
+        border-color: fade(@disabledfg, 10%) !important;
+        background-color: @disabledbg !important;
+    }
 }
diff --git a/src/components/Layout/HInput.js b/src/components/Layout/HInput.js
index d5164e3..2357ef3 100644
--- a/src/components/Layout/HInput.js
+++ b/src/components/Layout/HInput.js
@@ -1,20 +1,21 @@
 import style from './HInput.less';
 import {concatClass} from "../../index";
+import ValidityStatus from "../Enums/ValidityStatus";
 
 export default function (props) {
-	let validityClass = null;
-	if(props.validity === true) {
-		validityClass = style.valid;
-	}
-	else if(props.validity === false) {
-		validityClass = style.invalid;
-	}
-
 	return (
-		<label className={style.label}>
-			<div className={style.text}>{props.label}</div>
-			<input className={concatClass(style.input, validityClass)} type={props.type} value={props.value}
-				   onChange={props.onChange} disabled={props.disabled} name={props.name}/>
+		<label class={concatClass(style.label, style[props.validity ? props.validity.validity : ValidityStatus.NONE])}>
+			<div class={style.grid}>
+				<div className={style.text}>{props.label}</div>
+				<div className={style.icon}>{props.icon}</div>
+				<input
+					className={style.input}
+					type={props.type} value={props.value}
+					onChange={props.onChange} disabled={props.validity ? props.validity.validity === ValidityStatus.DISABLED : false} name={props.name}/>
+				<div className={style.message}>
+					{props.validity ? props.validity.message : ""}
+				</div>
+			</div>
 		</label>
 	);
 }
diff --git a/src/components/Layout/HInput.less b/src/components/Layout/HInput.less
index b593893..869296e 100644
--- a/src/components/Layout/HInput.less
+++ b/src/components/Layout/HInput.less
@@ -2,28 +2,80 @@
 
 .label {
     width: 100%;
-    display: flex;
-    align-items: center;
+}
+
+.grid {
     margin-top: 2px;
     margin-bottom: 2px;
+
+    display: grid;
+    align-items: center;
+    grid-template-columns: 120px 24px auto;
+    grid-column-gap: 2px;
 }
 
 .text {
-    flex-grow: 1;
-    max-width: 160px;
     text-align: right;
-    margin-right: 4px;
+
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.icon {
+    text-align: center;
+
+    grid-column: 2;
+    grid-row: 1;
 }
 
 .input {
-    margin-left: 4px;
-    flex-grow: 2;
+    grid-column: 3;
+    grid-row: 1;
 }
 
-.valid {
-    border: 1px solid @lime !important;
+.message {
+    font-size: x-small;
+
+    grid-column: 3;
+    grid-row: 2;
 }
 
-.invalid {
-    border: 1px solid @red !important;
+.ok {
+    color: @validfg;
+
+    input[type="text"], input[type="password"] {
+        color: @validfg !important;
+        border-color: fade(@validfg, 10%) !important;
+        background-color: @validbg !important;
+    }
+}
+
+.warning {
+    color: @warningfg;
+
+    input[type="text"], input[type="password"] {
+        color: @warningfg !important;
+        border-color: fade(@warningfg, 10%) !important;
+        background-color: @warningbg !important;
+    }
+}
+
+.error {
+    color: @invalidfg;
+
+    input[type="text"], input[type="password"] {
+        color: @invalidfg !important;
+        border-color: fade(@invalidfg, 10%) !important;
+        background-color: @invalidbg !important;
+    }
+}
+
+.disabled {
+    color: @disabledfg;
+
+    input[type="text"], input[type="password"] {
+        color: @disabledfg !important;
+        border-color: fade(@disabledfg, 10%) !important;
+        background-color: @disabledbg !important;
+    }
 }
diff --git a/src/components/Elements/Box.js b/src/components/Panels/Box.js
similarity index 100%
rename from src/components/Elements/Box.js
rename to src/components/Panels/Box.js
diff --git a/src/components/Elements/Box.less b/src/components/Panels/Box.less
similarity index 100%
rename from src/components/Elements/Box.less
rename to src/components/Panels/Box.less
diff --git a/src/components/Elements/Panel.js b/src/components/Panels/Panel.js
similarity index 100%
rename from src/components/Elements/Panel.js
rename to src/components/Panels/Panel.js
diff --git a/src/components/Elements/Panel.less b/src/components/Panels/Panel.less
similarity index 100%
rename from src/components/Elements/Panel.less
rename to src/components/Panels/Panel.less
diff --git a/src/components/Elements/Section.js b/src/components/Panels/Section.js
similarity index 100%
rename from src/components/Elements/Section.js
rename to src/components/Panels/Section.js
diff --git a/src/components/Elements/TablePanel.js b/src/components/Panels/TablePanel.js
similarity index 100%
rename from src/components/Elements/TablePanel.js
rename to src/components/Panels/TablePanel.js
diff --git a/src/components/Elements/TablePanel.less b/src/components/Panels/TablePanel.less
similarity index 100%
rename from src/components/Elements/TablePanel.less
rename to src/components/Panels/TablePanel.less
diff --git a/src/hooks/useFormValidator.js b/src/hooks/useFormValidator.js
index dbde452..e5c6e3a 100644
--- a/src/hooks/useFormValidator.js
+++ b/src/hooks/useFormValidator.js
@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'preact/hooks';
+import ValidityStatus from "../components/Enums/ValidityStatus";
 
 export default function(value, validator) {
     const [status, setStatus] = useState({
-        validity: null,
+        validity: ValidityStatus.NONE,
         message: ""
     });
 
diff --git a/src/hooks/useRoyalnetInstanceValidator.js b/src/hooks/useRoyalnetInstanceValidator.js
index 4d948e0..b1c64fd 100644
--- a/src/hooks/useRoyalnetInstanceValidator.js
+++ b/src/hooks/useRoyalnetInstanceValidator.js
@@ -2,6 +2,7 @@ import { useContext, useState } from 'preact/hooks';
 import RoyalnetInstanceUrl from '../contexts/RoyalnetInstanceUrl';
 import useFormValidator from "./useFormValidator";
 import {royalnetApiRequest} from '../utils/royalnetApiRequest';
+import ValidityStatus from "../components/Enums/ValidityStatus";
 
 const instanceUrlRegex = /^https?:\/\/.*?[^/]$/;
 
@@ -13,7 +14,7 @@ export default function() {
     const instanceUrlStatus = useFormValidator(instanceUrl, (value, setStatus) => {
         if(value.length === 0) {
             setStatus({
-                validity: null,
+                validity: ValidityStatus.NONE,
                 message: ""
             });
             return;
@@ -21,7 +22,7 @@ export default function() {
 
         if(!Boolean(instanceUrlRegex.test(value))) {
             setStatus({
-                validity: false,
+                validity: ValidityStatus.ERROR,
                 message: "Invalid URL"
             });
             return;
@@ -36,7 +37,7 @@ export default function() {
         royalnetApiRequest(value, "GET", "/api/royalnet/version/v1", undefined, abort.signal).then((data) => {
             if(value === instanceUrl) {
                 setStatus({
-                    validity: true,
+                    validity: ValidityStatus.OK,
                     message: `Royalnet ${data["semantic"]}`
                 });
             }
@@ -46,14 +47,14 @@ export default function() {
         }).catch((err) => {
             if(value === instanceUrl) {
                 setStatus({
-                    validity: false,
+                    validity: ValidityStatus.ERROR,
                     message: "Royalnet not found"
                 });
             }
         });
         setStatus({
-            validity: null,
-            message: ""
+            validity: ValidityStatus.CHECKING,
+            message: "Checking..."
         });
     });
 
diff --git a/src/index.js b/src/index.js
index 10ef207..8591718 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,9 @@
-import Box from "./components/Elements/Box";
-import {BoxColors} from "./components/Elements/Box";
+import Box from "./components/Panels/Box";
+import {BoxColors} from "./components/Panels/Box";
 import Image from "./components/Elements/Image";
-import Panel from "./components/Elements/Panel";
-import Section from "./components/Elements/Section";
-import TablePanel from "./components/Elements/TablePanel";
+import Panel from "./components/Panels/Panel";
+import Section from "./components/Panels/Section";
+import TablePanel from "./components/Panels/TablePanel";
 import Timer from "./components/Elements/Timer";
 import Todo from "./components/Elements/Todo";
 
@@ -39,6 +39,10 @@ import isValidDate from "./utils/isValidDate";
 import stripTabs from "./utils/stripTabs";
 import {royalnetApiRequest, RoyalnetApiError} from "./utils/royalnetApiRequest";
 
+import Sample from "./routes/Sample";
+export default function(props) {
+    return <Sample/>
+}
 
 export {
     Box,
diff --git a/src/routes/Sample.js b/src/routes/Sample.js
new file mode 100644
index 0000000..3a43c92
--- /dev/null
+++ b/src/routes/Sample.js
@@ -0,0 +1,118 @@
+import theme from "../styles/theme.less";
+import HInput from "../components/Layout/HInput";
+import Box, {BoxColors} from "../components/Panels/Box";
+import {faYoutube} from "@fortawesome/free-brands-svg-icons";
+import {Code, Panel, Split} from "../index";
+import Section from "../components/Panels/Section";
+import Image from "../components/Elements/Image";
+import HButton from "../components/Layout/HButton";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faCheck, faCircle, faCross, faExclamationTriangle, faSpinner} from "@fortawesome/free-solid-svg-icons";
+import ValidityStatus from "../components/Enums/ValidityStatus";
+
+
+export default function (props) {
+    return (
+        <div class={theme.bluelib}>
+            <h1>
+                bluelib
+            </h1>
+            <Section title={"Panels"}>
+                <Panel title={"Default"}>
+                    This is a default panel.
+                </Panel>
+                <Panel title={"Red"} color={BoxColors.RED}>
+                    This is a red panel.
+                </Panel>
+                <Panel title={"Orange"} color={BoxColors.ORANGE}>
+                    This is a orange panel.
+                </Panel>
+                <Panel title={"Yellow"} color={BoxColors.YELLOW}>
+                    This is a yellow panel.
+                </Panel>
+                <Panel title={"Lime"} color={BoxColors.LIME}>
+                    This is a lime panel.
+                </Panel>
+                <Panel title={"Cyan"} color={BoxColors.CYAN}>
+                    This is a cyan panel.
+                </Panel>
+                <Panel title={"Blue"} color={BoxColors.BLUE}>
+                    This is a blue panel.
+                </Panel>
+                <Panel title={"Magenta"} color={BoxColors.MAGENTA}>
+                    This is a magenta panel.
+                </Panel>
+            </Section>
+            <Section title={"Code"}>
+                <Panel title={"Python"}>
+                    <Code language={"python"}>{`
+                        def echo(arg):
+                            return arg
+                        
+                    `}</Code>
+                </Panel>
+                <Panel title={"Javascript"}>
+                    <Code language={"js"}>{`
+                        function echo(arg) {
+                            return arg;
+                        }
+                    `}</Code>
+                </Panel>
+                <Panel title={"C#"}>
+                    <Code language={"cs"}>{`
+                        public string echo(string arg) {
+                            return arg;
+                        }
+                    `}</Code>
+                </Panel>
+            </Section>
+            <Section title={"Image"}>
+                <Panel title={"Royal Games Logo"}>
+                    <Image src={"https://combo.steffo.eu/open/ryg/LogoRoyalGames.svg"} alt={""}/>
+                </Panel>
+                <Panel title={"Generic User"}>
+                    <Image src={"https://combo.steffo.eu/open/ryg/GenericUser.png"} alt={""}/>
+                </Panel>
+                <Panel title={"Markov Logo"}>
+                    <Image src={"https://combo.steffo.eu/open/ryg/Markov.png"} alt={""}/>
+                </Panel>
+                <Panel title={"Royal Knights"}>
+                    <Image src={"https://combo.steffo.eu/open/ryg/SpiralKnights.png"} alt={""}/>
+                </Panel>
+            </Section>
+            <Section title={"Forms"}>
+                <Panel title={"HInputs"}>
+                    <HInput type={"text"} label={"Username"}/>
+                    <HInput type={"password"} label={"Password"}/>
+                    <HInput type={"text"} label={"Caricamento"} icon={<FontAwesomeIcon icon={faSpinner} pulse={true}/>} validity={{
+                        validity: ValidityStatus.DISABLED,
+                        message: "Take your time..."
+                    }}/>
+                    <HInput type={"text"} label={"OK!"} icon={<FontAwesomeIcon icon={faCheck}/>} validity={{
+                        validity: ValidityStatus.OK,
+                        message: "",
+                    }}/>
+                    <HInput type={"text"} label={"È un angelo!"} icon={<FontAwesomeIcon icon={faExclamationTriangle}/>} validity={{
+                        validity: ValidityStatus.WARNING,
+                        message: "",
+                    }}/>
+                    <HInput type={"text"} label={"Spinning Jesus"} icon={<FontAwesomeIcon icon={faCross} spin={true}/>} validity={{
+                        validity: ValidityStatus.ERROR,
+                        message: "",
+                    }}/>
+                    <HInput type={"text"} label={"Ur mom"} icon={<FontAwesomeIcon icon={faCircle}/>} validity={{
+                        validity: ValidityStatus.ERROR,
+                        message: "ERROR: she is too fat for this input",
+                    }}/>
+                </Panel>
+                <Panel title={"HButtons"}>
+                    Ma quindi era tutto...
+                    <HButton label={"...un bottone?"}>Lo è sempre stato.</HButton>
+                    <HButton label={"...un Armageddon?"} validity={{
+                        message: "ciaone"
+                    }}>Lo è sempre stato.</HButton>
+                </Panel>
+            </Section>
+        </div>
+    );
+}
diff --git a/src/styles/constants.less b/src/styles/constants.less
index 6e022c9..032fb2b 100644
--- a/src/styles/constants.less
+++ b/src/styles/constants.less
@@ -25,6 +25,15 @@
 @disabledfg: #808080;
 @disabledbg: #1f1f1f;
 
+@invalidfg: @red;
+@invalidbg: #330e00;
+
+@validfg: @lime;
+@validbg: #00220c;
+
+@warningfg: @yellow;
+@warningbg: #231c00;
+
 @sans: "Arial", sans-serif;
 @text: "Calibri", sans-serif;
 @title: "Verdana", sans-serif;
diff --git a/src/styles/theme.less b/src/styles/theme.less
index 0502688..ce36c0f 100644
--- a/src/styles/theme.less
+++ b/src/styles/theme.less
@@ -64,9 +64,6 @@
         font-size: medium;
 
         &:disabled, &.disabled {
-            color: @disabledfg;
-            background-color: @disabledbg;
-            border-style: dotted;
             cursor: not-allowed;
         }
     }
diff --git a/src/template.html b/src/template.html
new file mode 100644
index 0000000..1ab9730
--- /dev/null
+++ b/src/template.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="it">
+    <head>
+        <meta charset="utf-8">
+        <title><% preact.title %></title>
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <style>
+            body {
+                background-color: #0d193b;
+                color: #a0ccff;
+            }
+        </style>
+        <% preact.headEnd %>
+    </head>
+    <body>
+        <% preact.bodyEnd %>
+    </body>
+</html>