diff --git a/dist/test.html b/dist/test.html
index 777a99a87..01aedb608 100644
--- a/dist/test.html
+++ b/dist/test.html
@@ -9,7 +9,15 @@
       style="display: inline-block; border: 1px solid red;"
       class="itk-vtk-viewer"
       data-url="test-data/first_instar_brain_zyxc.zarr"
-      data-viewport="1000x1000"
+      data-viewport="600x600"
+      data-background-color="008800"
+      data-rotate="false"
+    ></div>
+
+    <div
+      style="display: inline-block; border: 1px solid red;"
+      class="itk-vtk-viewer"
+      data-url="test-data/astronaut.zarr"
       data-background-color="008800"
       data-rotate="false"
     ></div>
diff --git a/package-lock.json b/package-lock.json
index b6d29bd8f..4f2772d3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,9 @@
       "version": "0.0.0-semantically-release",
       "license": "BSD-3-Clause",
       "dependencies": {
+        "@babel/plugin-transform-runtime": "^7.13.6",
         "@kitware/vtk.js": "^25.8.2",
+        "@material/web": "^0.1.0-alpha.0",
         "@thewtex/iconselect.js": "^2.1.2",
         "@xstate/inspect": "^0.4.1",
         "axios": "^0.21.1",
@@ -40,12 +42,12 @@
         "itk-vtk-viewer": "bin/itk-vtk-viewer-cli.js"
       },
       "devDependencies": {
-        "@babel/plugin-transform-runtime": "^7.13.6",
         "@babel/preset-env": "^7.13.5",
         "@babel/runtime": "^7.13.6",
         "@rollup/plugin-babel": "^5.3.0",
         "@rollup/plugin-commonjs": "^21.0.2",
         "@rollup/plugin-node-resolve": "^13.0.0",
+        "@rollup/plugin-typescript": "^9.0.2",
         "@web3-storage/w3": "^2.6.0",
         "autoprefixer": "^10.2.6",
         "babel-loader": "^8.2.2",
@@ -113,7 +115,6 @@
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
       "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.10.4"
       }
@@ -121,14 +122,12 @@
     "node_modules/@babel/compat-data": {
       "version": "7.13.6",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.13.6.tgz",
-      "integrity": "sha512-VhgqKOWYVm7lQXlvbJnWOzwfAQATd2nV52koT0HZ/LdDH0m4DUDwkKYsH+IwpXb+bKPyBJzawA4I6nBKqZcpQw==",
-      "dev": true
+      "integrity": "sha512-VhgqKOWYVm7lQXlvbJnWOzwfAQATd2nV52koT0HZ/LdDH0m4DUDwkKYsH+IwpXb+bKPyBJzawA4I6nBKqZcpQw=="
     },
     "node_modules/@babel/core": {
       "version": "7.12.10",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.10.tgz",
       "integrity": "sha512-eTAlQKq65zHfkHZV0sIVODCPGVgoo1HdBlbSLi9CqOzuZanMv2ihzY+4paiKr1mH+XmYESMAmJ/dpZ68eN6d8w==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/generator": "^7.12.10",
@@ -158,7 +157,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
       "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -175,7 +173,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
       "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-      "dev": true,
       "dependencies": {
         "minimist": "^1.2.5"
       },
@@ -189,14 +186,12 @@
     "node_modules/@babel/core/node_modules/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=="
     },
     "node_modules/@babel/generator": {
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz",
       "integrity": "sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.12.11",
         "jsesc": "^2.5.1",
@@ -237,7 +232,6 @@
       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.0.tgz",
       "integrity": "sha512-SOWD0JK9+MMIhTQiUVd4ng8f3NXhPVQvTv7D3UN4wbp/6cAHnB2EmMaU1zZA2Hh1gwme+THBrVSqTFxHczTh0Q==",
-      "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.13.0",
         "@babel/helper-validator-option": "^7.12.17",
@@ -252,7 +246,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
       "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -321,7 +314,6 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.2.tgz",
       "integrity": "sha512-hWeolZJivTNGHXHzJjQz/NwDaG4mGXf22ZroOP8bQYgvHNzaQ5tylsVbAcAS2oDjXBwpu8qH2I/654QFS2rDpw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.13.0",
         "@babel/helper-module-imports": "^7.12.13",
@@ -340,7 +332,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
       "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.12.13"
       }
@@ -349,7 +340,6 @@
       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.0.tgz",
       "integrity": "sha512-zBZfgvBB/ywjx0Rgc2+BwoH/3H+lDtlgD4hBOpEv5LxRnYsm/753iRuLepqnYlynpjC3AdQxtxsoeHJoEEwOAw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.13.0",
         "jsesc": "^2.5.1",
@@ -360,7 +350,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
       "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-get-function-arity": "^7.12.13",
         "@babel/template": "^7.12.13",
@@ -371,7 +360,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
       "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.12.13"
       }
@@ -380,7 +368,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
       "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.12.13"
       }
@@ -388,14 +375,12 @@
     "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-plugin-utils": {
       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz",
-      "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==",
-      "dev": true
+      "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ=="
     },
     "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-split-export-declaration": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
       "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.12.13"
       }
@@ -404,7 +389,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
       "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.12.11",
         "chalk": "^2.0.0",
@@ -415,7 +399,6 @@
       "version": "7.13.4",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.4.tgz",
       "integrity": "sha512-uvoOulWHhI+0+1f9L4BoozY7U5cIkZ9PgJqvb041d6vypgUmtVPG4vmGm4pSggjl8BELzvHyUeJSUyEMY6b+qA==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -427,7 +410,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
       "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.12.13",
         "@babel/parser": "^7.12.13",
@@ -438,7 +420,6 @@
       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz",
       "integrity": "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.12.13",
         "@babel/generator": "^7.13.0",
@@ -455,7 +436,6 @@
       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
       "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.12.11",
         "lodash": "^4.17.19",
@@ -466,7 +446,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
       "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -482,14 +461,12 @@
     "node_modules/@babel/helper-define-polyfill-provider/node_modules/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=="
     },
     "node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -518,7 +495,6 @@
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
       "integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-get-function-arity": "^7.12.10",
         "@babel/template": "^7.12.7",
@@ -529,7 +505,6 @@
       "version": "7.12.10",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
       "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.12.10"
       }
@@ -682,7 +657,6 @@
       "version": "7.12.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz",
       "integrity": "sha512-DCsuPyeWxeHgh1Dus7APn7iza42i/qXqiFPWyBDdOFtvS581JQePsc1F/nD+fHrcswhLlRc2UpYS1NwERxZhHw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.12.7"
       }
@@ -691,7 +665,6 @@
       "version": "7.12.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz",
       "integrity": "sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.12.5"
       }
@@ -700,7 +673,6 @@
       "version": "7.12.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz",
       "integrity": "sha512-QQzehgFAZ2bbISiCpmVGfiGux8YVFXQ0abBic2Envhej22DVXV9nCFaS5hIQbkyo1AdGb+gNME2TSh3hYJVV/w==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.12.1",
         "@babel/helper-replace-supers": "^7.12.1",
@@ -717,7 +689,6 @@
       "version": "7.12.10",
       "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.10.tgz",
       "integrity": "sha512-4tpbU0SrSTjjt65UMWSrUOPZTsgvPgGG4S8QSTNHacKzpS51IVWGDj0yCwyeZND/i+LSN2g/O63jEXEWm49sYQ==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.12.10"
       }
@@ -763,7 +734,6 @@
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.11.tgz",
       "integrity": "sha512-q+w1cqmhL7R0FNzth/PLLp2N+scXEK/L2AHbXUyydxp828F4FEa5WcVoqui9vFRiHDQErj9Zof8azP32uGVTRA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-member-expression-to-functions": "^7.12.7",
         "@babel/helper-optimise-call-expression": "^7.12.10",
@@ -775,7 +745,6 @@
       "version": "7.12.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.1.tgz",
       "integrity": "sha512-OxBp7pMrjVewSSC8fXDFrHrBcJATOOFssZwv16F3/6Xtc138GHybBfPbm9kfiqQHKhYQrlamWILwlDCeyMFEaA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.12.1"
       }
@@ -793,7 +762,6 @@
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz",
       "integrity": "sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.12.11"
       }
@@ -801,14 +769,12 @@
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
-      "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
-      "dev": true
+      "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
     },
     "node_modules/@babel/helper-validator-option": {
       "version": "7.12.17",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz",
-      "integrity": "sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==",
-      "dev": true
+      "integrity": "sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw=="
     },
     "node_modules/@babel/helper-wrap-function": {
       "version": "7.13.0",
@@ -960,7 +926,6 @@
       "version": "7.12.5",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.12.5.tgz",
       "integrity": "sha512-lgKGMQlKqA8meJqKsW6rUnc4MdUk35Ln0ATDqdM1a/UpARODdI4j5Y5lVfUScnSNkJcdCRAaWkspykNoFg9sJA==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.10.4",
         "@babel/traverse": "^7.12.5",
@@ -971,7 +936,6 @@
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
       "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.10.4",
         "chalk": "^2.0.0",
@@ -982,7 +946,6 @@
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
       "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -3112,7 +3075,6 @@
       "version": "7.13.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.13.6.tgz",
       "integrity": "sha512-QsTomUTIeOdYrNsOMJRSp2QzGvB1KYD4ePCC8Mei2SuoHScncYS3h1E9PR5gDL7buJmcqIHrWyH6B5GZMgDrRg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-module-imports": "^7.12.13",
         "@babel/helper-plugin-utils": "^7.13.0",
@@ -3129,7 +3091,6 @@
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
       "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.12.13"
       }
@@ -3137,14 +3098,12 @@
     "node_modules/@babel/plugin-transform-runtime/node_modules/@babel/helper-plugin-utils": {
       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz",
-      "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==",
-      "dev": true
+      "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ=="
     },
     "node_modules/@babel/plugin-transform-runtime/node_modules/@babel/types": {
       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
       "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.12.11",
         "lodash": "^4.17.19",
@@ -3155,7 +3114,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
       "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -3645,7 +3603,6 @@
       "version": "7.12.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
       "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/parser": "^7.12.7",
@@ -3656,7 +3613,6 @@
       "version": "7.12.12",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.12.tgz",
       "integrity": "sha512-s88i0X0lPy45RrLM8b9mz8RPH5FqO9G9p7ti59cToE44xFm1Q+Pjh5Gq4SXBbtb88X7Uy7pexeqRIQDDMNkL0w==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.12.11",
         "@babel/generator": "^7.12.11",
@@ -3673,7 +3629,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
       "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -3689,14 +3644,12 @@
     "node_modules/@babel/traverse/node_modules/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=="
     },
     "node_modules/@babel/types": {
       "version": "7.12.12",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
       "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.12.11",
         "lodash": "^4.17.19",
@@ -4034,6 +3987,20 @@
       "resolved": "https://registry.npmjs.org/webworker-promise/-/webworker-promise-0.5.0.tgz",
       "integrity": "sha512-14iR79jHAV7ozwvbfif+3wCaApT3I1g8Lo0rJZrwAu6wxZGx/08Y8KXz6as6ZLNUEEufeiEBBYrqyDBClXOsEw=="
     },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz",
+      "integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw=="
+    },
+    "node_modules/@material/web": {
+      "version": "0.1.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-0.1.0-alpha.0.tgz",
+      "integrity": "sha512-GNsNyWOtYKezXwvrD1ZBfnOHClVya31ZEQH1O83+PsPqlVZK6cBfnf1cwJmEFQ6FezB6q6q+cHGGqx0lb90Jug==",
+      "dependencies": {
+        "lit": "^2.3.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@multiformats/murmur3": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@multiformats/murmur3/-/murmur3-1.1.3.tgz",
@@ -4444,6 +4411,66 @@
         "rollup": "^1.20.0 || ^2.0.0"
       }
     },
+    "node_modules/@rollup/plugin-typescript": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-9.0.2.tgz",
+      "integrity": "sha512-/sS93vmHUMjzDUsl5scNQr1mUlNE1QjBBvOhmRwJCH8k2RRhDIm3c977B3wdu3t3Ap17W6dDeXP3hj1P1Un1bA==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.14.0||^3.0.0",
+        "tslib": "*",
+        "typescript": ">=3.7.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        },
+        "tslib": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-typescript/node_modules/@rollup/pluginutils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-typescript/node_modules/@types/estree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+      "dev": true
+    },
+    "node_modules/@rollup/plugin-typescript/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -5113,8 +5140,7 @@
     "node_modules/@types/trusted-types": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
-      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
-      "dev": true
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
     "node_modules/@types/ws": {
       "version": "8.5.3",
@@ -5595,7 +5621,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,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -5926,7 +5951,6 @@
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.1.5.tgz",
       "integrity": "sha512-5IzdFIjYWqlOFVr/hMYUpc+5fbfuvJTAISwIY58jhH++ZtawtNlcJnxAixlk8ahVwHCz1ipW/kpXYliEBp66wg==",
-      "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.13.0",
         "@babel/helper-define-polyfill-provider": "^0.1.2",
@@ -5940,7 +5964,6 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -5949,7 +5972,6 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.1.4.tgz",
       "integrity": "sha512-ysSzFn/qM8bvcDAn4mC7pKk85Y5dVaoa9h4u0mHxOEpDzabsseONhUpR7kHxpUinfj1bjU7mUZqD23rMZBoeSg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.1.2",
         "core-js-compat": "^3.8.1"
@@ -5962,7 +5984,6 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.1.3.tgz",
       "integrity": "sha512-hRjTJQiOYt/wBKEc+8V8p9OJ9799blAJcuKzn1JXh3pApHoWl1Emxh2BHc6MC7Qt6bbr3uDpNxaYQnATLIudEg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.1.2"
       },
@@ -6488,7 +6509,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,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -6736,7 +6756,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,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -6744,8 +6763,7 @@
     "node_modules/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="
     },
     "node_modules/colord": {
       "version": "2.9.2",
@@ -7160,7 +7178,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
       "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
-      "dev": true,
       "dependencies": {
         "safe-buffer": "~5.1.1"
       }
@@ -7253,7 +7270,6 @@
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.9.0.tgz",
       "integrity": "sha512-YK6fwFjCOKWwGnjFUR3c544YsnA/7DoLL0ysncuOJ4pwbriAtOpvM2bygdlcXbvQCQZ7bBU9CL4t7tGl7ETRpQ==",
-      "dev": true,
       "dependencies": {
         "browserslist": "^4.16.3",
         "semver": "7.0.0"
@@ -7267,7 +7283,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
       "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -8735,7 +8750,6 @@
       "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,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -9370,18 +9384,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/fast-glob/node_modules/picomatch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -9837,7 +9839,6 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -10091,7 +10092,6 @@
       "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,
       "engines": {
         "node": ">=4"
       }
@@ -10291,7 +10291,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -11643,9 +11642,9 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
-      "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -12612,8 +12611,7 @@
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
       "version": "3.14.1",
@@ -12638,7 +12636,6 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -13306,6 +13303,33 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/lit": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.4.0.tgz",
+      "integrity": "sha512-fdgzxEtLrZFQU/BqTtxFQCLwlZd9bdat+ltzSFjvWkZrs7eBmeX0L5MHUMb3kYIkuS8Xlfnii/iI5klirF8/Xg==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.4.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.4.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz",
+      "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.4.0.tgz",
+      "integrity": "sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -13370,8 +13394,7 @@
     "node_modules/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=="
     },
     "node_modules/lodash.assign": {
       "version": "4.2.0",
@@ -13394,8 +13417,7 @@
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
     "node_modules/lodash.endswith": {
       "version": "4.2.1",
@@ -14336,19 +14358,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/normalize-package-data/node_modules/resolve": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-      "dev": true,
-      "dependencies": {
-        "is-core-module": "^2.2.0",
-        "path-parse": "^1.0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/normalize-package-data/node_modules/semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -17704,9 +17713,9 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
-      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
       "engines": {
         "node": ">=8.6"
@@ -19560,12 +19569,16 @@
       }
     },
     "node_modules/resolve": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
-      "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
       "dependencies": {
-        "is-core-module": "^2.1.0",
-        "path-parse": "^1.0.6"
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -20115,7 +20128,6 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver"
       }
@@ -20611,7 +20623,6 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -21347,7 +21358,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -21389,6 +21399,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/svgo": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
@@ -21924,7 +21945,6 @@
       "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,
       "engines": {
         "node": ">=4"
       }
@@ -22005,10 +22025,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
@@ -23900,7 +23919,6 @@
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
       "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
-      "dev": true,
       "requires": {
         "@babel/highlight": "^7.10.4"
       }
@@ -23908,14 +23926,12 @@
     "@babel/compat-data": {
       "version": "7.13.6",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.13.6.tgz",
-      "integrity": "sha512-VhgqKOWYVm7lQXlvbJnWOzwfAQATd2nV52koT0HZ/LdDH0m4DUDwkKYsH+IwpXb+bKPyBJzawA4I6nBKqZcpQw==",
-      "dev": true
+      "integrity": "sha512-VhgqKOWYVm7lQXlvbJnWOzwfAQATd2nV52koT0HZ/LdDH0m4DUDwkKYsH+IwpXb+bKPyBJzawA4I6nBKqZcpQw=="
     },
     "@babel/core": {
       "version": "7.12.10",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.10.tgz",
       "integrity": "sha512-eTAlQKq65zHfkHZV0sIVODCPGVgoo1HdBlbSLi9CqOzuZanMv2ihzY+4paiKr1mH+XmYESMAmJ/dpZ68eN6d8w==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
         "@babel/generator": "^7.12.10",
@@ -23938,7 +23954,6 @@
           "version": "4.3.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
           "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-          "dev": true,
           "requires": {
             "ms": "2.1.2"
           }
@@ -23947,7 +23962,6 @@
           "version": "2.1.3",
           "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
           "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-          "dev": true,
           "requires": {
             "minimist": "^1.2.5"
           }
@@ -23955,8 +23969,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=="
         }
       }
     },
@@ -23964,7 +23977,6 @@
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz",
       "integrity": "sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.12.11",
         "jsesc": "^2.5.1",
@@ -24007,7 +24019,6 @@
       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.0.tgz",
       "integrity": "sha512-SOWD0JK9+MMIhTQiUVd4ng8f3NXhPVQvTv7D3UN4wbp/6cAHnB2EmMaU1zZA2Hh1gwme+THBrVSqTFxHczTh0Q==",
-      "dev": true,
       "requires": {
         "@babel/compat-data": "^7.13.0",
         "@babel/helper-validator-option": "^7.12.17",
@@ -24018,8 +24029,7 @@
         "semver": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
-          "dev": true
+          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A=="
         }
       }
     },
@@ -24083,7 +24093,6 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.2.tgz",
       "integrity": "sha512-hWeolZJivTNGHXHzJjQz/NwDaG4mGXf22ZroOP8bQYgvHNzaQ5tylsVbAcAS2oDjXBwpu8qH2I/654QFS2rDpw==",
-      "dev": true,
       "requires": {
         "@babel/helper-compilation-targets": "^7.13.0",
         "@babel/helper-module-imports": "^7.12.13",
@@ -24099,7 +24108,6 @@
           "version": "7.12.13",
           "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
           "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
-          "dev": true,
           "requires": {
             "@babel/highlight": "^7.12.13"
           }
@@ -24108,7 +24116,6 @@
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.0.tgz",
           "integrity": "sha512-zBZfgvBB/ywjx0Rgc2+BwoH/3H+lDtlgD4hBOpEv5LxRnYsm/753iRuLepqnYlynpjC3AdQxtxsoeHJoEEwOAw==",
-          "dev": true,
           "requires": {
             "@babel/types": "^7.13.0",
             "jsesc": "^2.5.1",
@@ -24119,7 +24126,6 @@
           "version": "7.12.13",
           "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
           "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
-          "dev": true,
           "requires": {
             "@babel/helper-get-function-arity": "^7.12.13",
             "@babel/template": "^7.12.13",
@@ -24130,7 +24136,6 @@
           "version": "7.12.13",
           "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
           "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
-          "dev": true,
           "requires": {
             "@babel/types": "^7.12.13"
           }
@@ -24139,7 +24144,6 @@
           "version": "7.12.13",
           "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
           "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
-          "dev": true,
           "requires": {
             "@babel/types": "^7.12.13"
           }
@@ -24147,14 +24151,12 @@
         "@babel/helper-plugin-utils": {
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz",
-          "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==",
-          "dev": true
+          "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ=="
         },
         "@babel/helper-split-export-declaration": {
           "version": "7.12.13",
           "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
           "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
-          "dev": true,
           "requires": {
             "@babel/types": "^7.12.13"
           }
@@ -24163,7 +24165,6 @@
           "version": "7.12.13",
           "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
           "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.12.11",
             "chalk": "^2.0.0",
@@ -24173,14 +24174,12 @@
         "@babel/parser": {
           "version": "7.13.4",
           "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.4.tgz",
-          "integrity": "sha512-uvoOulWHhI+0+1f9L4BoozY7U5cIkZ9PgJqvb041d6vypgUmtVPG4vmGm4pSggjl8BELzvHyUeJSUyEMY6b+qA==",
-          "dev": true
+          "integrity": "sha512-uvoOulWHhI+0+1f9L4BoozY7U5cIkZ9PgJqvb041d6vypgUmtVPG4vmGm4pSggjl8BELzvHyUeJSUyEMY6b+qA=="
         },
         "@babel/template": {
           "version": "7.12.13",
           "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
           "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
-          "dev": true,
           "requires": {
             "@babel/code-frame": "^7.12.13",
             "@babel/parser": "^7.12.13",
@@ -24191,7 +24190,6 @@
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz",
           "integrity": "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==",
-          "dev": true,
           "requires": {
             "@babel/code-frame": "^7.12.13",
             "@babel/generator": "^7.13.0",
@@ -24208,7 +24206,6 @@
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
           "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
@@ -24219,7 +24216,6 @@
           "version": "4.3.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
           "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-          "dev": true,
           "requires": {
             "ms": "2.1.2"
           }
@@ -24227,14 +24223,12 @@
         "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=="
         },
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -24264,7 +24258,6 @@
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
       "integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
-      "dev": true,
       "requires": {
         "@babel/helper-get-function-arity": "^7.12.10",
         "@babel/template": "^7.12.7",
@@ -24275,7 +24268,6 @@
       "version": "7.12.10",
       "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
       "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.12.10"
       }
@@ -24416,7 +24408,6 @@
       "version": "7.12.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz",
       "integrity": "sha512-DCsuPyeWxeHgh1Dus7APn7iza42i/qXqiFPWyBDdOFtvS581JQePsc1F/nD+fHrcswhLlRc2UpYS1NwERxZhHw==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.12.7"
       }
@@ -24425,7 +24416,6 @@
       "version": "7.12.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz",
       "integrity": "sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.12.5"
       }
@@ -24434,7 +24424,6 @@
       "version": "7.12.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz",
       "integrity": "sha512-QQzehgFAZ2bbISiCpmVGfiGux8YVFXQ0abBic2Envhej22DVXV9nCFaS5hIQbkyo1AdGb+gNME2TSh3hYJVV/w==",
-      "dev": true,
       "requires": {
         "@babel/helper-module-imports": "^7.12.1",
         "@babel/helper-replace-supers": "^7.12.1",
@@ -24451,7 +24440,6 @@
       "version": "7.12.10",
       "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.10.tgz",
       "integrity": "sha512-4tpbU0SrSTjjt65UMWSrUOPZTsgvPgGG4S8QSTNHacKzpS51IVWGDj0yCwyeZND/i+LSN2g/O63jEXEWm49sYQ==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.12.10"
       }
@@ -24499,7 +24487,6 @@
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.11.tgz",
       "integrity": "sha512-q+w1cqmhL7R0FNzth/PLLp2N+scXEK/L2AHbXUyydxp828F4FEa5WcVoqui9vFRiHDQErj9Zof8azP32uGVTRA==",
-      "dev": true,
       "requires": {
         "@babel/helper-member-expression-to-functions": "^7.12.7",
         "@babel/helper-optimise-call-expression": "^7.12.10",
@@ -24511,7 +24498,6 @@
       "version": "7.12.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.1.tgz",
       "integrity": "sha512-OxBp7pMrjVewSSC8fXDFrHrBcJATOOFssZwv16F3/6Xtc138GHybBfPbm9kfiqQHKhYQrlamWILwlDCeyMFEaA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.12.1"
       }
@@ -24529,7 +24515,6 @@
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz",
       "integrity": "sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.12.11"
       }
@@ -24537,14 +24522,12 @@
     "@babel/helper-validator-identifier": {
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
-      "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
-      "dev": true
+      "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
     },
     "@babel/helper-validator-option": {
       "version": "7.12.17",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz",
-      "integrity": "sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==",
-      "dev": true
+      "integrity": "sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw=="
     },
     "@babel/helper-wrap-function": {
       "version": "7.13.0",
@@ -24684,7 +24667,6 @@
       "version": "7.12.5",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.12.5.tgz",
       "integrity": "sha512-lgKGMQlKqA8meJqKsW6rUnc4MdUk35Ln0ATDqdM1a/UpARODdI4j5Y5lVfUScnSNkJcdCRAaWkspykNoFg9sJA==",
-      "dev": true,
       "requires": {
         "@babel/template": "^7.10.4",
         "@babel/traverse": "^7.12.5",
@@ -24695,7 +24677,6 @@
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
       "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
-      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.10.4",
         "chalk": "^2.0.0",
@@ -24705,8 +24686,7 @@
     "@babel/parser": {
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
-      "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==",
-      "dev": true
+      "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
     },
     "@babel/plugin-proposal-async-generator-functions": {
       "version": "7.13.5",
@@ -26650,7 +26630,6 @@
       "version": "7.13.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.13.6.tgz",
       "integrity": "sha512-QsTomUTIeOdYrNsOMJRSp2QzGvB1KYD4ePCC8Mei2SuoHScncYS3h1E9PR5gDL7buJmcqIHrWyH6B5GZMgDrRg==",
-      "dev": true,
       "requires": {
         "@babel/helper-module-imports": "^7.12.13",
         "@babel/helper-plugin-utils": "^7.13.0",
@@ -26664,7 +26643,6 @@
           "version": "7.12.13",
           "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
           "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
-          "dev": true,
           "requires": {
             "@babel/types": "^7.12.13"
           }
@@ -26672,14 +26650,12 @@
         "@babel/helper-plugin-utils": {
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz",
-          "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==",
-          "dev": true
+          "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ=="
         },
         "@babel/types": {
           "version": "7.13.0",
           "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
           "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
-          "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.12.11",
             "lodash": "^4.17.19",
@@ -26689,8 +26665,7 @@
         "semver": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
-          "dev": true
+          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A=="
         }
       }
     },
@@ -27136,7 +27111,6 @@
       "version": "7.12.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
       "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
         "@babel/parser": "^7.12.7",
@@ -27147,7 +27121,6 @@
       "version": "7.12.12",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.12.tgz",
       "integrity": "sha512-s88i0X0lPy45RrLM8b9mz8RPH5FqO9G9p7ti59cToE44xFm1Q+Pjh5Gq4SXBbtb88X7Uy7pexeqRIQDDMNkL0w==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.11",
         "@babel/generator": "^7.12.11",
@@ -27164,7 +27137,6 @@
           "version": "4.3.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
           "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-          "dev": true,
           "requires": {
             "ms": "2.1.2"
           }
@@ -27172,8 +27144,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=="
         }
       }
     },
@@ -27181,7 +27152,6 @@
       "version": "7.12.12",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
       "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
-      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.12.11",
         "lodash": "^4.17.19",
@@ -27445,6 +27415,20 @@
         }
       }
     },
+    "@lit/reactive-element": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz",
+      "integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw=="
+    },
+    "@material/web": {
+      "version": "0.1.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-0.1.0-alpha.0.tgz",
+      "integrity": "sha512-GNsNyWOtYKezXwvrD1ZBfnOHClVya31ZEQH1O83+PsPqlVZK6cBfnf1cwJmEFQ6FezB6q6q+cHGGqx0lb90Jug==",
+      "requires": {
+        "lit": "^2.3.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "@multiformats/murmur3": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@multiformats/murmur3/-/murmur3-1.1.3.tgz",
@@ -27786,6 +27770,41 @@
         "magic-string": "^0.25.7"
       }
     },
+    "@rollup/plugin-typescript": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-9.0.2.tgz",
+      "integrity": "sha512-/sS93vmHUMjzDUsl5scNQr1mUlNE1QjBBvOhmRwJCH8k2RRhDIm3c977B3wdu3t3Ap17W6dDeXP3hj1P1Un1bA==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^5.0.1",
+        "resolve": "^1.22.1"
+      },
+      "dependencies": {
+        "@rollup/pluginutils": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+          "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+          "dev": true,
+          "requires": {
+            "@types/estree": "^1.0.0",
+            "estree-walker": "^2.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "@types/estree": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+          "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+          "dev": true
+        },
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+          "dev": true
+        }
+      }
+    },
     "@rollup/pluginutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -28332,8 +28351,7 @@
     "@types/trusted-types": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
-      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
-      "dev": true
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
     "@types/ws": {
       "version": "8.5.3",
@@ -28736,7 +28754,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"
       }
@@ -28999,7 +29016,6 @@
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.1.5.tgz",
       "integrity": "sha512-5IzdFIjYWqlOFVr/hMYUpc+5fbfuvJTAISwIY58jhH++ZtawtNlcJnxAixlk8ahVwHCz1ipW/kpXYliEBp66wg==",
-      "dev": true,
       "requires": {
         "@babel/compat-data": "^7.13.0",
         "@babel/helper-define-polyfill-provider": "^0.1.2",
@@ -29009,8 +29025,7 @@
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
         }
       }
     },
@@ -29018,7 +29033,6 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.1.4.tgz",
       "integrity": "sha512-ysSzFn/qM8bvcDAn4mC7pKk85Y5dVaoa9h4u0mHxOEpDzabsseONhUpR7kHxpUinfj1bjU7mUZqD23rMZBoeSg==",
-      "dev": true,
       "requires": {
         "@babel/helper-define-polyfill-provider": "^0.1.2",
         "core-js-compat": "^3.8.1"
@@ -29028,7 +29042,6 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.1.3.tgz",
       "integrity": "sha512-hRjTJQiOYt/wBKEc+8V8p9OJ9799blAJcuKzn1JXh3pApHoWl1Emxh2BHc6MC7Qt6bbr3uDpNxaYQnATLIudEg==",
-      "dev": true,
       "requires": {
         "@babel/helper-define-polyfill-provider": "^0.1.2"
       }
@@ -29453,7 +29466,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",
@@ -29636,7 +29648,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"
       }
@@ -29644,8 +29655,7 @@
     "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="
     },
     "colord": {
       "version": "2.9.2",
@@ -29990,7 +30000,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
       "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.1"
       }
@@ -30060,7 +30069,6 @@
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.9.0.tgz",
       "integrity": "sha512-YK6fwFjCOKWwGnjFUR3c544YsnA/7DoLL0ysncuOJ4pwbriAtOpvM2bygdlcXbvQCQZ7bBU9CL4t7tGl7ETRpQ==",
-      "dev": true,
       "requires": {
         "browserslist": "^4.16.3",
         "semver": "7.0.0"
@@ -30069,8 +30077,7 @@
         "semver": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
-          "dev": true
+          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A=="
         }
       }
     },
@@ -31222,8 +31229,7 @@
     "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="
     },
     "eslint": {
       "version": "8.13.0",
@@ -31684,12 +31690,6 @@
             "braces": "^3.0.1",
             "picomatch": "^2.2.3"
           }
-        },
-        "picomatch": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-          "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-          "dev": true
         }
       }
     },
@@ -32062,8 +32062,7 @@
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
     "get-caller-file": {
       "version": "2.0.5",
@@ -32267,8 +32266,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=="
     },
     "globalthis": {
       "version": "1.0.3",
@@ -32420,8 +32418,7 @@
     "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="
     },
     "has-symbols": {
       "version": "1.0.3",
@@ -33452,9 +33449,9 @@
       "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w=="
     },
     "is-core-module": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
-      "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
       "requires": {
         "has": "^1.0.3"
       }
@@ -34192,8 +34189,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
       "version": "3.14.1",
@@ -34214,8 +34210,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-parse-better-errors": {
       "version": "1.0.2",
@@ -34720,6 +34715,33 @@
         }
       }
     },
+    "lit": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.4.0.tgz",
+      "integrity": "sha512-fdgzxEtLrZFQU/BqTtxFQCLwlZd9bdat+ltzSFjvWkZrs7eBmeX0L5MHUMb3kYIkuS8Xlfnii/iI5klirF8/Xg==",
+      "requires": {
+        "@lit/reactive-element": "^1.4.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.4.0"
+      }
+    },
+    "lit-element": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz",
+      "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==",
+      "requires": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "lit-html": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.4.0.tgz",
+      "integrity": "sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==",
+      "requires": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "load-json-file": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -34771,8 +34793,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.assign": {
       "version": "4.2.0",
@@ -34795,8 +34816,7 @@
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
     "lodash.endswith": {
       "version": "4.2.1",
@@ -35527,16 +35547,6 @@
         "validate-npm-package-license": "^3.0.1"
       },
       "dependencies": {
-        "resolve": {
-          "version": "1.20.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-          "dev": true,
-          "requires": {
-            "is-core-module": "^2.2.0",
-            "path-parse": "^1.0.6"
-          }
-        },
         "semver": {
           "version": "7.3.5",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -37926,9 +37936,9 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "picomatch": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
-      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
     "pidtree": {
@@ -39280,12 +39290,13 @@
       }
     },
     "resolve": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
-      "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
       "requires": {
-        "is-core-module": "^2.1.0",
-        "path-parse": "^1.0.6"
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
       }
     },
     "resolve-cwd": {
@@ -39700,8 +39711,7 @@
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
     },
     "semver-compare": {
       "version": "1.0.0",
@@ -40130,8 +40140,7 @@
     "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="
     },
     "source-map-js": {
       "version": "0.6.2",
@@ -40730,7 +40739,6 @@
       "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"
       }
@@ -40762,6 +40770,11 @@
         }
       }
     },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
+    },
     "svgo": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
@@ -41186,8 +41199,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",
@@ -41250,10 +41262,9 @@
       }
     },
     "tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "tunnel-agent": {
       "version": "0.6.0",
diff --git a/package.json b/package.json
index 7c6128183..b57aed041 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   "types": "./src/index.d.ts",
   "dependencies": {
     "@kitware/vtk.js": "^25.8.2",
+    "@material/web": "^0.1.0-alpha.0",
     "@thewtex/iconselect.js": "^2.1.2",
     "@xstate/inspect": "^0.4.1",
     "axios": "^0.21.1",
@@ -64,6 +65,7 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-typescript": "^9.0.2",
     "@web3-storage/w3": "^2.6.0",
     "autoprefixer": "^10.2.6",
     "babel-loader": "^8.2.2",
diff --git a/src/UI/reference-ui/dist/referenceUIMachineOptions.js b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
index ed335f681..03ce2a579 100644
--- a/src/UI/reference-ui/dist/referenceUIMachineOptions.js
+++ b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
@@ -28,7 +28,7 @@ function styleInject(css, ref) {
 }
 
 var css_248z$1 =
-  ".ItkVtkViewer-module_loading__11c63 {\n  border: 16px solid #f3f3f3; /* Light grey */\n  border-top: 16px solid #3498db; /* Blue */\n  border-radius: 50%;\n  width: 120px;\n  height: 120px;\n  position: absolute;\n  left: calc(50% - 60px);\n  top: calc(50% - 60px);\n  -webkit-animation: ItkVtkViewer-module_spin__mT5S6 2s linear infinite;\n          animation: ItkVtkViewer-module_spin__mT5S6 2s linear infinite;\n  box-sizing: border-box;\n}\n\n@-webkit-keyframes ItkVtkViewer-module_spin__mT5S6 {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes ItkVtkViewer-module_spin__mT5S6 {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ItkVtkViewer-module_viewContainer__-5zNz {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  background: rgba(128, 128, 128, 0.8);\n}\n\n.ItkVtkViewer-module_viewport__BMgOt {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n}\n\n.ItkVtkViewer-module_uiContainer__CiawP {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n  overflow-x: hidden;\n  max-height: 100%;\n\n  display: flex;\n  align-items: stretch;\n  flex-direction: column;\n  padding: 6px 0 0 6px;\n  border: 0px;\n  box-sizing: border-box;\n}\n\n.ItkVtkViewer-module_uiGroup__ad-WI {\n  background: rgba(128, 128, 128, 0.5);\n  border-radius: 4px;\n  margin: 2px;\n}\n\n.ItkVtkViewer-module_uiRow__KTQa8 {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n  padding: 5px;\n}\n\n.ItkVtkViewer-module_mainUIRow__vTXih {\n  justify-content: space-around;\n  max-width: 420px;\n}\n\n.ItkVtkViewer-module_planeUIRow__D5gCh {\n  background: rgba(128, 128, 128, 0.5);\n}\n\n.ItkVtkViewer-module_layersUIRow__0LDm5 {\n  justify-content: space-around;\n  max-width: 420px;\n}\n\n.ItkVtkViewer-module_progress__WydXH {\n  color: white;\n  font-size: 200%;\n  height: 100vh;\n  width: 100vw;\n  text-align: center;\n  vertical-align: middle;\n  line-height: 100vh;\n}\n\n.ItkVtkViewer-module_piecewiseWidget__5gKl5 {\n  flex: 1;\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 3px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_logo__9ErCF {\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  height: 2em;\n  width: 2em;\n  cursor: pointer;\n  z-index: 100;\n}\n\n.ItkVtkViewer-module_fpsMonitor__bnwqr {\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  border-radius: 5px;\n  background: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  z-index: 101;\n}\n\n[itk-vtk-tooltip] {\n  position: relative;\n}\n[itk-vtk-tooltip]::before {\n  content: attr(itk-vtk-tooltip-content);\n  visibility: hidden;\n  position: absolute;\n  top: 50%;\n  right: calc(100% + 16px);\n  width: 400%;\n  padding: 4px 6px;\n  text-align: center;\n  text-transform: none;\n  font-size: 0.9em;\n  font-family: monospace;\n  border-radius: 3px;\n  background: rgba(0.9, 0.9, 0.9, 0.95);\n  color: white;\n  opacity: 0;\n  transform: translate(15px, -50%);\n  transition-property: all;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  transition-delay: 0.8s;\n  z-index: 1;\n}\n\n[itk-vtk-tooltip]:hover::before {\n  opacity: 1;\n  visibility: visible;\n  transform: translate(0, -50%);\n}\n\n[itk-vtk-tooltip-bottom]::before {\n  top: calc(100% + 16px);\n  left: 50%;\n  right: initial;\n  transform: translate(-50%, -15px);\n}\n[itk-vtk-tooltip-bottom]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-right]::before {\n  top: 50%;\n  left: calc(100% + 16px);\n  right: initial;\n  transform: translate(-15px, -50%);\n}\n[itk-vtk-tooltip-right]:hover::before {\n  transform: translate(0, -50%);\n}\n\n[itk-vtk-tooltip-top-screenshot]::before {\n  top: initial;\n  left: 260%;\n  right: initial;\n  bottom: calc(100% + 8px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-screenshot]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-annotations]::before {\n  top: initial;\n  left: 160%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-annotations]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-axes]::before {\n  top: initial;\n  left: 160%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-axes]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-fullscreen]::before {\n  top: initial;\n  left: 120%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n  width: 400%;\n}\n[itk-vtk-tooltip-top-fullscreen]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top]::before {\n  top: initial;\n  left: 60%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-fullscreen]::before {\n  top: initial;\n  left: 120%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n  width: 400%;\n}\n\n.ItkVtkViewer-module_layerEntryCommon__oIE1u {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  justify-content: space-between;\n  border-style: solid;\n  border-width: 2px;\n}\n\n.ItkVtkViewer-module_layerEntryBrightBG__qXyI2 {\n  border-color: #666;\n}\n\n.ItkVtkViewer-module_layerEntryDarkBG__BmiCj {\n  border-color: #aaa;\n}\n\n.ItkVtkViewer-module_layerLabelCommon__kTiO9 {\n  border: none;\n  background: transparent;\n  font-size: 1.2em;\n  margin-right: 10px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_layerLabelBrightBG__vAfex {\n  color: black;\n}\n\n.ItkVtkViewer-module_layerLabelDarkBG__sM6Bg {\n  color: white;\n}\n\n.ItkVtkViewer-module_visibleButton__ezrIc {\n  flex-basis: 2.5em;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_visibleButton__ezrIc img {\n  height: 1.2em;\n  width: 1.2em;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n}\n\n.ItkVtkViewer-module_layerIcon__v-rxO {\n  display: inline-block;\n}\n\n.ItkVtkViewer-module_layerIcon__v-rxO img {\n  height: 1.2em;\n  width: 1.2em;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 8px;\n  padding-right: 6px;\n}\n\n.ItkVtkViewer-module_iconGroup__qqZrW {\n  display: inline-block;\n}\n\n.ItkVtkViewer-module_ldsRing__QT1wT {\n  display: inline-block;\n  position: relative;\n  width: 20px;\n  height: 20px;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  margin: 0;\n  border: 0.15em solid #000;\n  border-radius: 50%;\n  -webkit-animation: ItkVtkViewer-module_ldsRing__QT1wT 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n          animation: ItkVtkViewer-module_ldsRing__QT1wT 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #000 transparent transparent transparent;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(1) {\n  -webkit-animation-delay: -0.45s;\n          animation-delay: -0.45s;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(2) {\n  -webkit-animation-delay: -0.3s;\n          animation-delay: -0.3s;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(3) {\n  -webkit-animation-delay: -0.15s;\n          animation-delay: -0.15s;\n}\n@-webkit-keyframes ItkVtkViewer-module_ldsRing__QT1wT {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes ItkVtkViewer-module_ldsRing__QT1wT {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ItkVtkViewer-module_tooltipButtonBrightBG__yffVf::before {\n}\n\n.ItkVtkViewer-module_tooltipButtonDarkBG__gEu0i::before {\n  filter: invert(100%);\n  -webkit-filter: invert(100%);\n}\n\n.ItkVtkViewer-module_invertibleButtonBrightBG__VmIfT {\n}\n\n.ItkVtkViewer-module_invertibleButtonDarkBG__GoKgD {\n  filter: invert(100%);\n  -webkit-filter: invert(100%);\n}\n\n.ItkVtkViewer-module_collapseUIButton__Ac6-L {\n  width: 1.5em;\n  cursor: pointer;\n}\n\n.ItkVtkViewer-module_screenshotButton__OL4Na {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_screenshotButton__OL4Na img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_annotationsButton__Msb-p {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_annotationsButton__Msb-p img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_axesButton__k2H6p {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_axesButton__k2H6p img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_fullscreenButton__en3Z5 {\n  flex: 1;\n  width: 8m;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_fullscreenButton__en3Z5 img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_interpolationButton__2P0HJ {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 2px;\n  padding-right: 4px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_interpolationButton__2P0HJ img {\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_cropButton__ljwuU {\n  flex: 1;\n  height: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_cropButton__ljwuU img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_resetCropButton__SCGTH {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_resetCropButton__SCGTH img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_distanceEntry__zXMUS {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: self-start;\n}\n\n.ItkVtkViewer-module_distanceButton__NhxBT {\n  flex: 1;\n  height: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_distanceButton__NhxBT img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_distanceLabelCommon__Ec-uc {\n  border: none;\n  background: transparent;\n  font-size: 1.2em;\n  margin-right: 10px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_distanceLabelBrightBG__aYmfG {\n  color: black;\n}\n\n.ItkVtkViewer-module_distanceLabelDarkBG__kYXvI {\n  color: white;\n}\n\n.ItkVtkViewer-module_distanceInput__gyNaU {\n  background: transparent;\n  color: white;\n  font-size: 1em;\n  width: 80px;\n}\n\n.ItkVtkViewer-module_resetCameraButton__l9FGp {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_resetCameraButton__l9FGp img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_bgColorButton__yrjOX {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_bgColorButton__yrjOX img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_viewModeButton__OtTng {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_viewModeButton__OtTng img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_shadowButton__09fEk {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 0px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_shadowButton__09fEk img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_viewPlanesButton__rSnuZ {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 0px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_viewPlanesButton__rSnuZ img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_toggleInput__jHLTo {\n  margin: 0px;\n  width: 0;\n  opacity: 0;\n  box-sizing: content-box;\n}\n\n.ItkVtkViewer-module_toggleButton__qHhHZ {\n  cursor: pointer;\n  border-radius: 0.2em;\n  opacity: 0.45;\n}\n\ninput:checked.ItkVtkViewer-module_toggleInput__jHLTo + label {\n  opacity: 1;\n}\n\n.ItkVtkViewer-module_numberInput__pDxYH {\n  color: white;\n  background: transparent;\n  font-size: 1em;\n  padding-left: 2px;\n  width: 70px;\n}\n\n.ItkVtkViewer-module_selector__yw8l- {\n  display: flex;\n  direction: row;\n  font-size: 1.2em;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.ItkVtkViewer-module_disableInterface__CGB4S {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(40, 40, 40, 0.5);\n  padding: 5px;\n  margin-right: 2px;\n  border-radius: 5px 5px 0px 0px;\n  color: #777;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF:hover + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(90, 90, 90, 0.5);\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF:checked + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(127, 127, 127, 0.5);\n  color: #fff;\n}\n\n.ItkVtkViewer-module_componentVisibility__y1rRS {\n  position: relative;\n  top: -2px;\n  margin-left: 10px;\n}\n\nselect {\n  -moz-appearance: none;\n}\n\nselect option {\n  color: black;\n}\n\nselect:focus {\n  outline: none;\n  border: none;\n}\n\n.ItkVtkViewer-module_sampleDistanceButton__NjT0o {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 6px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_sampleDistanceButton__NjT0o img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_sliderColumn__ZwISb {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  padding: 0 5px;\n}\n\n.ItkVtkViewer-module_sliderIcon__jfoL- {\n  width: 1.8em;\n  margin-right: 10px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_blendModeButton__cit1w {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 8px;\n  padding-right: 0px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_blendModeButton__cit1w img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_gradientOpacitySlider__wkEqP {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 6px;\n  padding-right: 0px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_gradientOpacitySlider__wkEqP img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_sliderEntry__3r3gO {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.ItkVtkViewer-module_slider__eT9qm {\n  flex: 1;\n  min-height: 1rem;\n}\n\n.ItkVtkViewer-module_planeLabel__E1zOk {\n  padding-left: 6px;\n  padding: 2px;\n  display: block;\n  font-size: 1.1em;\n  font-family: monospace;\n  color: black;\n  border-width: 2px;\n  border-radius: 10%;\n}\n\n.ItkVtkViewer-module_xPlaneLabel__wK4Cb {\n  background-color: #ef5350;\n}\n\n.ItkVtkViewer-module_yPlaneLabel__rIm0j {\n  background-color: #fdd835;\n}\n\n.ItkVtkViewer-module_zPlaneLabel__94NL7 {\n  background-color: #4caf50;\n}\n\n.ItkVtkViewer-module_gradientOpacityScale__NrqOZ {\n  z-index: 1100;\n  position: relative;\n}\n\n.ItkVtkViewer-module_gradientOpacityScale__NrqOZ input {\n  position: absolute;\n  bottom: 20px;\n  left: -24px;\n  width: 12px;\n  -ms-writing-mode: bt-lr;\n      writing-mode: bt-lr;\n  -webkit-appearance: slider-vertical;\n}\n\n.ItkVtkViewer-module_bigFileDrop__cZdkP {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: white;\n  background-image: url('./dropBG.jpg');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  border-radius: 10px;\n  width: 50px;\n  padding: calc(50vh - 2em) calc(50vw - 25px - 2em);\n}\n\n.ItkVtkViewer-module_fullscreenContainer__-H3c8 {\n  position: absolute;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  background: black;\n  margin: 0;\n  padding: 0;\n}\n"
+  ".ItkVtkViewer-module_loading__11c63 {\n  border: 16px solid #f3f3f3; /* Light grey */\n  border-top: 16px solid #3498db; /* Blue */\n  border-radius: 50%;\n  width: 120px;\n  height: 120px;\n  position: absolute;\n  left: calc(50% - 60px);\n  top: calc(50% - 60px);\n  -webkit-animation: ItkVtkViewer-module_spin__mT5S6 2s linear infinite;\n          animation: ItkVtkViewer-module_spin__mT5S6 2s linear infinite;\n  box-sizing: border-box;\n}\n\n@-webkit-keyframes ItkVtkViewer-module_spin__mT5S6 {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes ItkVtkViewer-module_spin__mT5S6 {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ItkVtkViewer-module_viewContainer__-5zNz {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  background: rgba(128, 128, 128, 0.8);\n}\n\n.ItkVtkViewer-module_viewport__BMgOt {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n}\n\n.ItkVtkViewer-module_uiContainer__CiawP {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n  overflow-x: hidden;\n  max-height: 100%;\n\n  display: flex;\n  align-items: stretch;\n  flex-direction: column;\n  padding: 6px 0 0 6px;\n  border: 0px;\n  box-sizing: border-box;\n}\n\n.ItkVtkViewer-module_uiGroup__ad-WI {\n  background: rgba(128, 128, 128, 0.5);\n  border-radius: 4px;\n  margin: 2px;\n}\n\n.ItkVtkViewer-module_uiRow__KTQa8 {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n  padding: 5px;\n}\n\n.ItkVtkViewer-module_mainUIRow__vTXih {\n  justify-content: space-around;\n  max-width: 420px;\n}\n\n.ItkVtkViewer-module_planeUIRow__D5gCh {\n  background: rgba(128, 128, 128, 0.5);\n}\n\n.ItkVtkViewer-module_layersUIRow__0LDm5 {\n  justify-content: space-around;\n  max-width: 420px;\n}\n\n.ItkVtkViewer-module_progress__WydXH {\n  color: white;\n  font-size: 200%;\n  height: 100vh;\n  width: 100vw;\n  text-align: center;\n  vertical-align: middle;\n  line-height: 100vh;\n}\n\n.ItkVtkViewer-module_piecewiseWidget__5gKl5 {\n  flex: 1;\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 3px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_logo__9ErCF {\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  height: 2em;\n  width: 2em;\n  cursor: pointer;\n  z-index: 100;\n}\n\n.ItkVtkViewer-module_fpsMonitor__bnwqr {\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  border-radius: 5px;\n  background: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  z-index: 101;\n}\n\n[itk-vtk-tooltip] {\n  position: relative;\n}\n[itk-vtk-tooltip]::before {\n  content: attr(itk-vtk-tooltip-content);\n  visibility: hidden;\n  position: absolute;\n  top: 50%;\n  right: calc(100% + 16px);\n  width: 400%;\n  padding: 4px 6px;\n  text-align: center;\n  text-transform: none;\n  font-size: 0.9em;\n  font-family: monospace;\n  border-radius: 3px;\n  background: rgba(0.9, 0.9, 0.9, 0.95);\n  color: white;\n  opacity: 0;\n  transform: translate(15px, -50%);\n  transition-property: all;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  transition-delay: 0.8s;\n  z-index: 1;\n}\n\n[itk-vtk-tooltip]:hover::before {\n  opacity: 1;\n  visibility: visible;\n  transform: translate(0, -50%);\n}\n\n[itk-vtk-tooltip-bottom]::before {\n  top: calc(100% + 16px);\n  left: 50%;\n  right: initial;\n  transform: translate(-50%, -15px);\n}\n[itk-vtk-tooltip-bottom]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-right]::before {\n  top: 50%;\n  left: calc(100% + 16px);\n  right: initial;\n  transform: translate(-15px, -50%);\n}\n[itk-vtk-tooltip-right]:hover::before {\n  transform: translate(0, -50%);\n}\n\n[itk-vtk-tooltip-top-screenshot]::before {\n  top: initial;\n  left: 260%;\n  right: initial;\n  bottom: calc(100% + 8px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-screenshot]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-annotations]::before {\n  top: initial;\n  left: 160%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-annotations]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-axes]::before {\n  top: initial;\n  left: 160%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-axes]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-fullscreen]::before {\n  top: initial;\n  left: 120%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n  width: 400%;\n}\n[itk-vtk-tooltip-top-fullscreen]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top]::before {\n  top: initial;\n  left: 60%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-fullscreen]::before {\n  top: initial;\n  left: 120%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n  width: 400%;\n}\n\n.ItkVtkViewer-module_layerEntryCommon__oIE1u {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  justify-content: space-between;\n  border-style: solid;\n  border-width: 2px;\n}\n\n.ItkVtkViewer-module_layerEntryBrightBG__qXyI2 {\n  border-color: #666;\n}\n\n.ItkVtkViewer-module_layerEntryDarkBG__BmiCj {\n  border-color: #aaa;\n}\n\n.ItkVtkViewer-module_layerLabelCommon__kTiO9 {\n  border: none;\n  background: transparent;\n  font-size: 1.2em;\n  margin-right: 10px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_layerLabelBrightBG__vAfex {\n  color: black;\n}\n\n.ItkVtkViewer-module_layerLabelDarkBG__sM6Bg {\n  color: white;\n}\n\n.ItkVtkViewer-module_visibleButton__ezrIc {\n  flex-basis: 2.5em;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_visibleButton__ezrIc img {\n  height: 1.2em;\n  width: 1.2em;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n}\n\n.ItkVtkViewer-module_layerIcon__v-rxO {\n  display: inline-block;\n}\n\n.ItkVtkViewer-module_layerIcon__v-rxO img {\n  height: 1.2em;\n  width: 1.2em;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 8px;\n  padding-right: 6px;\n}\n\n.ItkVtkViewer-module_iconGroup__qqZrW {\n  display: inline-block;\n}\n\n.ItkVtkViewer-module_ldsRing__QT1wT {\n  display: inline-block;\n  position: relative;\n  width: 20px;\n  height: 20px;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  margin: 0;\n  border: 0.15em solid #000;\n  border-radius: 50%;\n  -webkit-animation: ItkVtkViewer-module_ldsRing__QT1wT 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n          animation: ItkVtkViewer-module_ldsRing__QT1wT 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #000 transparent transparent transparent;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(1) {\n  -webkit-animation-delay: -0.45s;\n          animation-delay: -0.45s;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(2) {\n  -webkit-animation-delay: -0.3s;\n          animation-delay: -0.3s;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(3) {\n  -webkit-animation-delay: -0.15s;\n          animation-delay: -0.15s;\n}\n@-webkit-keyframes ItkVtkViewer-module_ldsRing__QT1wT {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n@keyframes ItkVtkViewer-module_ldsRing__QT1wT {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ItkVtkViewer-module_tooltipButtonBrightBG__yffVf::before {\n}\n\n.ItkVtkViewer-module_tooltipButtonDarkBG__gEu0i::before {\n  filter: invert(100%);\n  -webkit-filter: invert(100%);\n}\n\n.ItkVtkViewer-module_invertibleButtonBrightBG__VmIfT {\n}\n\n.ItkVtkViewer-module_invertibleButtonDarkBG__GoKgD {\n  filter: invert(100%);\n  -webkit-filter: invert(100%);\n}\n\n.ItkVtkViewer-module_screenshotButton__OL4Na {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_screenshotButton__OL4Na img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_annotationsButton__Msb-p {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_annotationsButton__Msb-p img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_axesButton__k2H6p {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_axesButton__k2H6p img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_fullscreenButton__en3Z5 {\n  flex: 1;\n  width: 8m;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_fullscreenButton__en3Z5 img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_interpolationButton__2P0HJ {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 2px;\n  padding-right: 4px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_interpolationButton__2P0HJ img {\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_cropButton__ljwuU {\n  flex: 1;\n  height: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_cropButton__ljwuU img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_resetCropButton__SCGTH {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_resetCropButton__SCGTH img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_distanceEntry__zXMUS {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: self-start;\n}\n\n.ItkVtkViewer-module_distanceButton__NhxBT {\n  flex: 1;\n  height: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_distanceButton__NhxBT img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_distanceLabelCommon__Ec-uc {\n  border: none;\n  background: transparent;\n  font-size: 1.2em;\n  margin-right: 10px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_distanceLabelBrightBG__aYmfG {\n  color: black;\n}\n\n.ItkVtkViewer-module_distanceLabelDarkBG__kYXvI {\n  color: white;\n}\n\n.ItkVtkViewer-module_distanceInput__gyNaU {\n  background: transparent;\n  color: white;\n  font-size: 1em;\n  width: 80px;\n}\n\n.ItkVtkViewer-module_resetCameraButton__l9FGp {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_resetCameraButton__l9FGp img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_bgColorButton__yrjOX {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_bgColorButton__yrjOX img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_viewModeButton__OtTng {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_viewModeButton__OtTng img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_shadowButton__09fEk {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 0px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_shadowButton__09fEk img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_viewPlanesButton__rSnuZ {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 0px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_viewPlanesButton__rSnuZ img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_toggleInput__jHLTo {\n  margin: 0px;\n  width: 0;\n  opacity: 0;\n  box-sizing: content-box;\n}\n\n.ItkVtkViewer-module_toggleButton__qHhHZ {\n  cursor: pointer;\n  border-radius: 0.2em;\n  opacity: 0.45;\n}\n\ninput:checked.ItkVtkViewer-module_toggleInput__jHLTo + label {\n  opacity: 1;\n}\n\n.ItkVtkViewer-module_numberInput__pDxYH {\n  color: white;\n  background: transparent;\n  font-size: 1em;\n  padding-left: 2px;\n  width: 70px;\n}\n\n.ItkVtkViewer-module_selector__yw8l- {\n  display: flex;\n  direction: row;\n  font-size: 1.2em;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.ItkVtkViewer-module_disableInterface__CGB4S {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(40, 40, 40, 0.5);\n  padding: 5px;\n  margin-right: 2px;\n  border-radius: 5px 5px 0px 0px;\n  color: #777;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF:hover + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(90, 90, 90, 0.5);\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF:checked + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(127, 127, 127, 0.5);\n  color: #fff;\n}\n\n.ItkVtkViewer-module_componentVisibility__y1rRS {\n  position: relative;\n  top: -2px;\n  margin-left: 10px;\n}\n\nselect {\n  -moz-appearance: none;\n}\n\nselect option {\n  color: black;\n}\n\nselect:focus {\n  outline: none;\n  border: none;\n}\n\n.ItkVtkViewer-module_sampleDistanceButton__NjT0o {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 6px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_sampleDistanceButton__NjT0o img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_sliderColumn__ZwISb {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  padding: 0 5px;\n}\n\n.ItkVtkViewer-module_sliderIcon__jfoL- {\n  width: 1.8em;\n  margin-right: 10px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_blendModeButton__cit1w {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 8px;\n  padding-right: 0px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_blendModeButton__cit1w img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_gradientOpacitySlider__wkEqP {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 6px;\n  padding-right: 0px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_gradientOpacitySlider__wkEqP img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_sliderEntry__3r3gO {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.ItkVtkViewer-module_slider__eT9qm {\n  flex: 1;\n  min-height: 1rem;\n}\n\n.ItkVtkViewer-module_planeLabel__E1zOk {\n  padding-left: 6px;\n  padding: 2px;\n  display: block;\n  font-size: 1.1em;\n  font-family: monospace;\n  color: black;\n  border-width: 2px;\n  border-radius: 10%;\n}\n\n.ItkVtkViewer-module_xPlaneLabel__wK4Cb {\n  background-color: #ef5350;\n}\n\n.ItkVtkViewer-module_yPlaneLabel__rIm0j {\n  background-color: #fdd835;\n}\n\n.ItkVtkViewer-module_zPlaneLabel__94NL7 {\n  background-color: #4caf50;\n}\n\n.ItkVtkViewer-module_gradientOpacityScale__NrqOZ {\n  z-index: 1100;\n  position: relative;\n}\n\n.ItkVtkViewer-module_gradientOpacityScale__NrqOZ input {\n  position: absolute;\n  bottom: 20px;\n  left: -24px;\n  width: 12px;\n  -ms-writing-mode: bt-lr;\n      writing-mode: bt-lr;\n  -webkit-appearance: slider-vertical;\n}\n\n.ItkVtkViewer-module_bigFileDrop__cZdkP {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: white;\n  background-image: url('./dropBG.jpg');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  border-radius: 10px;\n  width: 50px;\n  padding: calc(50vh - 2em) calc(50vw - 25px - 2em);\n}\n\n.ItkVtkViewer-module_fullscreenContainer__-H3c8 {\n  position: absolute;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  background: black;\n  margin: 0;\n  padding: 0;\n}\n"
 var style = {
   loading: 'ItkVtkViewer-module_loading__11c63',
   spin: 'ItkVtkViewer-module_spin__mT5S6',
@@ -62,7 +62,6 @@ var style = {
   invertibleButtonBrightBG:
     'ItkVtkViewer-module_invertibleButtonBrightBG__VmIfT',
   invertibleButtonDarkBG: 'ItkVtkViewer-module_invertibleButtonDarkBG__GoKgD',
-  collapseUIButton: 'ItkVtkViewer-module_collapseUIButton__Ac6-L',
   screenshotButton: 'ItkVtkViewer-module_screenshotButton__OL4Na',
   annotationsButton: 'ItkVtkViewer-module_annotationsButton__Msb-p',
   axesButton: 'ItkVtkViewer-module_axesButton__k2H6p',
@@ -243,52 +242,133 @@ function createScreenshotButton(context, mainUIRow) {
   mainUIRow.appendChild(screenshotButton)
 }
 
-function _arrayLikeToArray$3(arr, len) {
-  if (len == null || len > arr.length) len = arr.length
+var commonjsGlobal =
+  typeof globalThis !== 'undefined'
+    ? globalThis
+    : typeof window !== 'undefined'
+    ? window
+    : typeof global !== 'undefined'
+    ? global
+    : typeof self !== 'undefined'
+    ? self
+    : {}
 
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i]
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default')
+    ? x['default']
+    : x
+}
+
+var toConsumableArray$1 = { exports: {} }
+
+var arrayWithoutHoles$1 = { exports: {} }
+
+var arrayLikeToArray$1 = { exports: {} }
+
+;(function(module) {
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) {
+      arr2[i] = arr[i]
+    }
+
+    return arr2
   }
 
-  return arr2
-}
+  ;(module.exports = _arrayLikeToArray),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(arrayLikeToArray$1)
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray$3(arr)
-}
+;(function(module) {
+  var arrayLikeToArray = arrayLikeToArray$1.exports
 
-function _iterableToArray(iter) {
-  if (
-    (typeof Symbol !== 'undefined' && iter[Symbol.iterator] != null) ||
-    iter['@@iterator'] != null
-  )
-    return Array.from(iter)
-}
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return arrayLikeToArray(arr)
+  }
 
-function _unsupportedIterableToArray$3(o, minLen) {
-  if (!o) return
-  if (typeof o === 'string') return _arrayLikeToArray$3(o, minLen)
-  var n = Object.prototype.toString.call(o).slice(8, -1)
-  if (n === 'Object' && o.constructor) n = o.constructor.name
-  if (n === 'Map' || n === 'Set') return Array.from(o)
-  if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
-    return _arrayLikeToArray$3(o, minLen)
-}
+  ;(module.exports = _arrayWithoutHoles),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(arrayWithoutHoles$1)
 
-function _nonIterableSpread() {
-  throw new TypeError(
-    'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
-  )
-}
+var iterableToArray$1 = { exports: {} }
 
-function _toConsumableArray(arr) {
-  return (
-    _arrayWithoutHoles(arr) ||
-    _iterableToArray(arr) ||
-    _unsupportedIterableToArray$3(arr) ||
-    _nonIterableSpread()
-  )
-}
+;(function(module) {
+  function _iterableToArray(iter) {
+    if (
+      (typeof Symbol !== 'undefined' && iter[Symbol.iterator] != null) ||
+      iter['@@iterator'] != null
+    )
+      return Array.from(iter)
+  }
+
+  ;(module.exports = _iterableToArray),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(iterableToArray$1)
+
+var unsupportedIterableToArray$1 = { exports: {} }
+
+;(function(module) {
+  var arrayLikeToArray = arrayLikeToArray$1.exports
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return
+    if (typeof o === 'string') return arrayLikeToArray(o, minLen)
+    var n = Object.prototype.toString.call(o).slice(8, -1)
+    if (n === 'Object' && o.constructor) n = o.constructor.name
+    if (n === 'Map' || n === 'Set') return Array.from(o)
+    if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+      return arrayLikeToArray(o, minLen)
+  }
+
+  ;(module.exports = _unsupportedIterableToArray),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(unsupportedIterableToArray$1)
+
+var nonIterableSpread$1 = { exports: {} }
+
+;(function(module) {
+  function _nonIterableSpread() {
+    throw new TypeError(
+      'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
+    )
+  }
+
+  ;(module.exports = _nonIterableSpread),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(nonIterableSpread$1)
+
+;(function(module) {
+  var arrayWithoutHoles = arrayWithoutHoles$1.exports
+
+  var iterableToArray = iterableToArray$1.exports
+
+  var unsupportedIterableToArray = unsupportedIterableToArray$1.exports
+
+  var nonIterableSpread = nonIterableSpread$1.exports
+
+  function _toConsumableArray(arr) {
+    return (
+      arrayWithoutHoles(arr) ||
+      iterableToArray(arr) ||
+      unsupportedIterableToArray(arr) ||
+      nonIterableSpread()
+    )
+  }
+
+  ;(module.exports = _toConsumableArray),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(toConsumableArray$1)
+
+var _toConsumableArray = /*@__PURE__*/ getDefaultExportFromCjs(
+  toConsumableArray$1.exports
+)
 
 var fullscreenMethods = []
 window.addEventListener('load', function() {
@@ -525,16 +605,335 @@ function createViewPlanesToggle(context, volumeRow) {
   volumeRow.appendChild(viewPlanesButton)
 }
 
-var commonjsGlobal =
-  typeof globalThis !== 'undefined'
-    ? globalThis
-    : typeof window !== 'undefined'
-    ? window
-    : typeof global !== 'undefined'
-    ? global
-    : typeof self !== 'undefined'
-    ? self
-    : {}
+var slicedToArray$1 = { exports: {} }
+
+var arrayWithHoles$1 = { exports: {} }
+
+;(function(module) {
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr
+  }
+
+  ;(module.exports = _arrayWithHoles),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(arrayWithHoles$1)
+
+var iterableToArrayLimit$1 = { exports: {} }
+
+;(function(module) {
+  function _iterableToArrayLimit(arr, i) {
+    var _i =
+      arr == null
+        ? null
+        : (typeof Symbol !== 'undefined' && arr[Symbol.iterator]) ||
+          arr['@@iterator']
+
+    if (_i == null) return
+    var _arr = []
+    var _n = true
+    var _d = false
+
+    var _s, _e
+
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value)
+
+        if (i && _arr.length === i) break
+      }
+    } catch (err) {
+      _d = true
+      _e = err
+    } finally {
+      try {
+        if (!_n && _i['return'] != null) _i['return']()
+      } finally {
+        if (_d) throw _e
+      }
+    }
+
+    return _arr
+  }
+
+  ;(module.exports = _iterableToArrayLimit),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(iterableToArrayLimit$1)
+
+var unsupportedIterableToArray = { exports: {} }
+
+var arrayLikeToArray = { exports: {} }
+
+;(function(module) {
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) {
+      arr2[i] = arr[i]
+    }
+
+    return arr2
+  }
+
+  ;(module.exports = _arrayLikeToArray),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(arrayLikeToArray)
+
+;(function(module) {
+  var arrayLikeToArray$1 = arrayLikeToArray.exports
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return
+    if (typeof o === 'string') return arrayLikeToArray$1(o, minLen)
+    var n = Object.prototype.toString.call(o).slice(8, -1)
+    if (n === 'Object' && o.constructor) n = o.constructor.name
+    if (n === 'Map' || n === 'Set') return Array.from(o)
+    if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+      return arrayLikeToArray$1(o, minLen)
+  }
+
+  ;(module.exports = _unsupportedIterableToArray),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(unsupportedIterableToArray)
+
+var nonIterableRest$1 = { exports: {} }
+
+;(function(module) {
+  function _nonIterableRest() {
+    throw new TypeError(
+      'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
+    )
+  }
+
+  ;(module.exports = _nonIterableRest),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(nonIterableRest$1)
+
+;(function(module) {
+  var arrayWithHoles = arrayWithHoles$1.exports
+
+  var iterableToArrayLimit = iterableToArrayLimit$1.exports
+
+  var unsupportedIterableToArray$1 = unsupportedIterableToArray.exports
+
+  var nonIterableRest = nonIterableRest$1.exports
+
+  function _slicedToArray(arr, i) {
+    return (
+      arrayWithHoles(arr) ||
+      iterableToArrayLimit(arr, i) ||
+      unsupportedIterableToArray$1(arr, i) ||
+      nonIterableRest()
+    )
+  }
+
+  ;(module.exports = _slicedToArray),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(slicedToArray$1)
+
+var _typeof = { exports: {} }
+
+;(function(module) {
+  function _typeof(obj) {
+    '@babel/helpers - typeof'
+
+    return (
+      ((module.exports = _typeof =
+        'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
+          ? function(obj) {
+              return typeof obj
+            }
+          : function(obj) {
+              return obj &&
+                'function' == typeof Symbol &&
+                obj.constructor === Symbol &&
+                obj !== Symbol.prototype
+                ? 'symbol'
+                : typeof obj
+            }),
+      (module.exports.__esModule = true),
+      (module.exports['default'] = module.exports)),
+      _typeof(obj)
+    )
+  }
+
+  ;(module.exports = _typeof),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(_typeof)
+
+var defineProperty$2 = { exports: {} }
+
+;(function(module) {
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true,
+      })
+    } else {
+      obj[key] = value
+    }
+
+    return obj
+  }
+
+  ;(module.exports = _defineProperty),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(defineProperty$2)
+
+var toConsumableArray = { exports: {} }
+
+var arrayWithoutHoles = { exports: {} }
+
+;(function(module) {
+  var arrayLikeToArray$1 = arrayLikeToArray.exports
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return arrayLikeToArray$1(arr)
+  }
+
+  ;(module.exports = _arrayWithoutHoles),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(arrayWithoutHoles)
+
+var iterableToArray = { exports: {} }
+
+;(function(module) {
+  function _iterableToArray(iter) {
+    if (
+      (typeof Symbol !== 'undefined' && iter[Symbol.iterator] != null) ||
+      iter['@@iterator'] != null
+    )
+      return Array.from(iter)
+  }
+
+  ;(module.exports = _iterableToArray),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(iterableToArray)
+
+var nonIterableSpread = { exports: {} }
+
+;(function(module) {
+  function _nonIterableSpread() {
+    throw new TypeError(
+      'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
+    )
+  }
+
+  ;(module.exports = _nonIterableSpread),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(nonIterableSpread)
+
+;(function(module) {
+  var arrayWithoutHoles$1 = arrayWithoutHoles.exports
+
+  var iterableToArray$1 = iterableToArray.exports
+
+  var unsupportedIterableToArray$1 = unsupportedIterableToArray.exports
+
+  var nonIterableSpread$1 = nonIterableSpread.exports
+
+  function _toConsumableArray(arr) {
+    return (
+      arrayWithoutHoles$1(arr) ||
+      iterableToArray$1(arr) ||
+      unsupportedIterableToArray$1(arr) ||
+      nonIterableSpread$1()
+    )
+  }
+
+  ;(module.exports = _toConsumableArray),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(toConsumableArray)
+
+var construct = { exports: {} }
+
+var setPrototypeOf = { exports: {} }
+
+;(function(module) {
+  function _setPrototypeOf(o, p) {
+    ;(module.exports = _setPrototypeOf =
+      Object.setPrototypeOf ||
+      function _setPrototypeOf(o, p) {
+        o.__proto__ = p
+        return o
+      }),
+      (module.exports.__esModule = true),
+      (module.exports['default'] = module.exports)
+    return _setPrototypeOf(o, p)
+  }
+
+  ;(module.exports = _setPrototypeOf),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(setPrototypeOf)
+
+var isNativeReflectConstruct = { exports: {} }
+
+;(function(module) {
+  function _isNativeReflectConstruct() {
+    if (typeof Reflect === 'undefined' || !Reflect.construct) return false
+    if (Reflect.construct.sham) return false
+    if (typeof Proxy === 'function') return true
+
+    try {
+      Boolean.prototype.valueOf.call(
+        Reflect.construct(Boolean, [], function() {})
+      )
+      return true
+    } catch (e) {
+      return false
+    }
+  }
+
+  ;(module.exports = _isNativeReflectConstruct),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(isNativeReflectConstruct)
+
+;(function(module) {
+  var setPrototypeOf$1 = setPrototypeOf.exports
+
+  var isNativeReflectConstruct$1 = isNativeReflectConstruct.exports
+
+  function _construct(Parent, args, Class) {
+    if (isNativeReflectConstruct$1()) {
+      ;(module.exports = _construct = Reflect.construct),
+        (module.exports.__esModule = true),
+        (module.exports['default'] = module.exports)
+    } else {
+      ;(module.exports = _construct = function _construct(Parent, args, Class) {
+        var a = [null]
+        a.push.apply(a, args)
+        var Constructor = Function.bind.apply(Parent, a)
+        var instance = new Constructor()
+        if (Class) setPrototypeOf$1(instance, Class.prototype)
+        return instance
+      }),
+        (module.exports.__esModule = true),
+        (module.exports['default'] = module.exports)
+    }
+
+    return _construct.apply(null, arguments)
+  }
+
+  ;(module.exports = _construct),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(construct)
 
 var toStr$2 = Object.prototype.toString
 
@@ -682,7 +1081,7 @@ if (!Object.keys) {
     return theKeys
   }
 }
-var implementation$2 = keysShim$1
+var implementation$3 = keysShim$1
 
 var slice = Array.prototype.slice
 var isArgs = isArguments
@@ -692,7 +1091,7 @@ var keysShim = origKeys
   ? function keys(o) {
       return origKeys(o)
     }
-  : implementation$2
+  : implementation$3
 
 var originalKeys = Object.keys
 
@@ -750,7 +1149,7 @@ var arePropertyDescriptorsSupported = function() {
 var supportsDescriptors =
   origDefineProperty && arePropertyDescriptorsSupported()
 
-var defineProperty = function(object, name, value, predicate) {
+var defineProperty$1 = function(object, name, value, predicate) {
   if (name in object && (!isFunction(predicate) || !predicate())) {
     return
   }
@@ -773,7 +1172,7 @@ var defineProperties$1 = function(object, map) {
     props = concat.call(props, Object.getOwnPropertySymbols(map))
   }
   for (var i = 0; i < props.length; i += 1) {
-    defineProperty(object, props[i], map[props[i]], predicates[props[i]])
+    defineProperty$1(object, props[i], map[props[i]], predicates[props[i]])
   }
 }
 
@@ -781,19 +1180,9 @@ defineProperties$1.supportsDescriptors = !!supportsDescriptors
 
 var defineProperties_1 = defineProperties$1
 
-var implementation_browser = { exports: {} }
-
-/* eslint no-negated-condition: 0, no-new-func: 0 */
-
-if (typeof self !== 'undefined') {
-  implementation_browser.exports = self
-} else if (typeof window !== 'undefined') {
-  implementation_browser.exports = window
-} else {
-  implementation_browser.exports = Function('return this')()
-}
+var implementation$2 = commonjsGlobal
 
-var implementation$1 = implementation_browser.exports
+var implementation$1 = implementation$2
 
 var polyfill$1 = function getPolyfill() {
   if (
@@ -837,7 +1226,7 @@ var shim$1 = function shimGlobal() {
 
 var defineProperties = defineProperties_1
 
-var implementation = implementation_browser.exports
+var implementation = implementation$2
 var getPolyfill = polyfill$1
 var shim = shim$1
 
@@ -857,81 +1246,329 @@ var globalthis = getGlobal
 
 var vtkGlobal = globalthis() // returns native globalThis if compliant
 
-// Logging function calls
-// ----------------------------------------------------------------------------
+var classCallCheck = { exports: {} }
 
-/* eslint-disable no-prototype-builtins                                      */
+;(function(module) {
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError('Cannot call a class as a function')
+    }
+  }
 
-var fakeConsole = {}
+  ;(module.exports = _classCallCheck),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(classCallCheck)
+
+var createClass = { exports: {} }
+
+;(function(module) {
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i]
+      descriptor.enumerable = descriptor.enumerable || false
+      descriptor.configurable = true
+      if ('value' in descriptor) descriptor.writable = true
+      Object.defineProperty(target, descriptor.key, descriptor)
+    }
+  }
 
-function noOp() {}
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps)
+    if (staticProps) _defineProperties(Constructor, staticProps)
+    Object.defineProperty(Constructor, 'prototype', {
+      writable: false,
+    })
+    return Constructor
+  }
 
-var consoleMethods = [
-  'log',
-  'debug',
-  'info',
-  'warn',
-  'error',
-  'time',
-  'timeEnd',
-  'group',
-  'groupEnd',
-]
-consoleMethods.forEach(function(methodName) {
-  fakeConsole[methodName] = noOp
-})
-vtkGlobal.console = console.hasOwnProperty('log') ? console : fakeConsole
-;({
-  debug: noOp,
-  // Don't print debug by default
-  error: vtkGlobal.console.error || noOp,
-  info: vtkGlobal.console.info || noOp,
-  log: vtkGlobal.console.log || noOp,
-  warn: vtkGlobal.console.warn || noOp,
-})
-// TypedArray
-// ----------------------------------------------------------------------------
+  ;(module.exports = _createClass),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(createClass)
 
-var TYPED_ARRAYS = Object.create(null)
-TYPED_ARRAYS.Float32Array = Float32Array
-TYPED_ARRAYS.Float64Array = Float64Array
-TYPED_ARRAYS.Uint8Array = Uint8Array
-TYPED_ARRAYS.Int8Array = Int8Array
-TYPED_ARRAYS.Uint16Array = Uint16Array
-TYPED_ARRAYS.Int16Array = Int16Array
-TYPED_ARRAYS.Uint32Array = Uint32Array
-TYPED_ARRAYS.Int32Array = Int32Array
-TYPED_ARRAYS.Uint8ClampedArray = Uint8ClampedArray // TYPED_ARRAYS.BigInt64Array = BigInt64Array;
+var get = { exports: {} }
 
-function createPlaneSliders(context) {
-  var planeUIGroup = document.createElement('div')
-  planeUIGroup.setAttribute('class', style.uiGroup)
-  var viewerDOMId = context.id
-  var xPlaneRow = document.createElement('div')
-  xPlaneRow.setAttribute('class', style.planeUIRow)
-  xPlaneRow.className += ' '.concat(viewerDOMId, '-x-plane-row')
-  context.main.xPlaneRow = xPlaneRow
-  var xPlaneVisibleButton = document.createElement('div')
-  xPlaneVisibleButton.innerHTML = '<input id="'
-    .concat(context.id, '-xPlaneVisibleButton" type="checkbox" checked class="')
-    .concat(
-      style.toggleInput,
-      '"><label itk-vtk-tooltip itk-vtk-tooltip-top-annotations itk-vtk-tooltip-content="X plane visibility" class="'
-    )
-    .concat(style.visibleButton, ' ')
-    .concat(style.toggleButton, '" for="')
-    .concat(context.id, '-xPlaneVisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$3, '" alt="visible" /></label>')
-  xPlaneVisibleButton.children[0]
-  xPlaneVisibleButton.children[1]
-  xPlaneRow.appendChild(xPlaneVisibleButton)
-  context.main.xPlaneVisibleButton = xPlaneVisibleButton
-  var xPlaneInvisibleButton = document.createElement('div')
-  xPlaneVisibleButton.setAttribute('class', style.visibleButton)
-  xPlaneInvisibleButton.setAttribute('class', style.visibleButton)
-  xPlaneInvisibleButton.innerHTML = '<input id="'
-    .concat(context.id, '-invisibleButton" type="checkbox" class="')
-    .concat(
+var superPropBase = { exports: {} }
+
+var getPrototypeOf = { exports: {} }
+
+;(function(module) {
+  function _getPrototypeOf(o) {
+    ;(module.exports = _getPrototypeOf = Object.setPrototypeOf
+      ? Object.getPrototypeOf
+      : function _getPrototypeOf(o) {
+          return o.__proto__ || Object.getPrototypeOf(o)
+        }),
+      (module.exports.__esModule = true),
+      (module.exports['default'] = module.exports)
+    return _getPrototypeOf(o)
+  }
+
+  ;(module.exports = _getPrototypeOf),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(getPrototypeOf)
+
+;(function(module) {
+  var getPrototypeOf$1 = getPrototypeOf.exports
+
+  function _superPropBase(object, property) {
+    while (!Object.prototype.hasOwnProperty.call(object, property)) {
+      object = getPrototypeOf$1(object)
+      if (object === null) break
+    }
+
+    return object
+  }
+
+  ;(module.exports = _superPropBase),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(superPropBase)
+
+;(function(module) {
+  var superPropBase$1 = superPropBase.exports
+
+  function _get() {
+    if (typeof Reflect !== 'undefined' && Reflect.get) {
+      ;(module.exports = _get = Reflect.get),
+        (module.exports.__esModule = true),
+        (module.exports['default'] = module.exports)
+    } else {
+      ;(module.exports = _get = function _get(target, property, receiver) {
+        var base = superPropBase$1(target, property)
+        if (!base) return
+        var desc = Object.getOwnPropertyDescriptor(base, property)
+
+        if (desc.get) {
+          return desc.get.call(arguments.length < 3 ? target : receiver)
+        }
+
+        return desc.value
+      }),
+        (module.exports.__esModule = true),
+        (module.exports['default'] = module.exports)
+    }
+
+    return _get.apply(this, arguments)
+  }
+
+  ;(module.exports = _get),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(get)
+
+var inherits = { exports: {} }
+
+;(function(module) {
+  var setPrototypeOf$1 = setPrototypeOf.exports
+
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== 'function' && superClass !== null) {
+      throw new TypeError('Super expression must either be null or a function')
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true,
+      },
+    })
+    Object.defineProperty(subClass, 'prototype', {
+      writable: false,
+    })
+    if (superClass) setPrototypeOf$1(subClass, superClass)
+  }
+
+  ;(module.exports = _inherits),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(inherits)
+
+var possibleConstructorReturn = { exports: {} }
+
+var assertThisInitialized = { exports: {} }
+
+;(function(module) {
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError(
+        "this hasn't been initialised - super() hasn't been called"
+      )
+    }
+
+    return self
+  }
+
+  ;(module.exports = _assertThisInitialized),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(assertThisInitialized)
+
+;(function(module) {
+  var _typeof$1 = _typeof.exports['default']
+
+  var assertThisInitialized$1 = assertThisInitialized.exports
+
+  function _possibleConstructorReturn(self, call) {
+    if (call && (_typeof$1(call) === 'object' || typeof call === 'function')) {
+      return call
+    } else if (call !== void 0) {
+      throw new TypeError(
+        'Derived constructors may only return object or undefined'
+      )
+    }
+
+    return assertThisInitialized$1(self)
+  }
+
+  ;(module.exports = _possibleConstructorReturn),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(possibleConstructorReturn)
+
+var wrapNativeSuper = { exports: {} }
+
+var isNativeFunction = { exports: {} }
+
+;(function(module) {
+  function _isNativeFunction(fn) {
+    return Function.toString.call(fn).indexOf('[native code]') !== -1
+  }
+
+  ;(module.exports = _isNativeFunction),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(isNativeFunction)
+
+;(function(module) {
+  var getPrototypeOf$1 = getPrototypeOf.exports
+
+  var setPrototypeOf$1 = setPrototypeOf.exports
+
+  var isNativeFunction$1 = isNativeFunction.exports
+
+  var construct$1 = construct.exports
+
+  function _wrapNativeSuper(Class) {
+    var _cache = typeof Map === 'function' ? new Map() : undefined
+
+    ;(module.exports = _wrapNativeSuper = function _wrapNativeSuper(Class) {
+      if (Class === null || !isNativeFunction$1(Class)) return Class
+
+      if (typeof Class !== 'function') {
+        throw new TypeError(
+          'Super expression must either be null or a function'
+        )
+      }
+
+      if (typeof _cache !== 'undefined') {
+        if (_cache.has(Class)) return _cache.get(Class)
+
+        _cache.set(Class, Wrapper)
+      }
+
+      function Wrapper() {
+        return construct$1(Class, arguments, getPrototypeOf$1(this).constructor)
+      }
+
+      Wrapper.prototype = Object.create(Class.prototype, {
+        constructor: {
+          value: Wrapper,
+          enumerable: false,
+          writable: true,
+          configurable: true,
+        },
+      })
+      return setPrototypeOf$1(Wrapper, Class)
+    }),
+      (module.exports.__esModule = true),
+      (module.exports['default'] = module.exports)
+    return _wrapNativeSuper(Class)
+  }
+
+  ;(module.exports = _wrapNativeSuper),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(wrapNativeSuper)
+
+// Logging function calls
+// ----------------------------------------------------------------------------
+
+/* eslint-disable no-prototype-builtins                                      */
+
+var fakeConsole = {}
+
+function noOp() {}
+
+var consoleMethods = [
+  'log',
+  'debug',
+  'info',
+  'warn',
+  'error',
+  'time',
+  'timeEnd',
+  'group',
+  'groupEnd',
+]
+consoleMethods.forEach(function(methodName) {
+  fakeConsole[methodName] = noOp
+})
+vtkGlobal.console = console.hasOwnProperty('log') ? console : fakeConsole
+;({
+  debug: noOp,
+  // Don't print debug by default
+  error: vtkGlobal.console.error || noOp,
+  info: vtkGlobal.console.info || noOp,
+  log: vtkGlobal.console.log || noOp,
+  warn: vtkGlobal.console.warn || noOp,
+})
+// TypedArray
+// ----------------------------------------------------------------------------
+
+var TYPED_ARRAYS = Object.create(null)
+TYPED_ARRAYS.Float32Array = Float32Array
+TYPED_ARRAYS.Float64Array = Float64Array
+TYPED_ARRAYS.Uint8Array = Uint8Array
+TYPED_ARRAYS.Int8Array = Int8Array
+TYPED_ARRAYS.Uint16Array = Uint16Array
+TYPED_ARRAYS.Int16Array = Int16Array
+TYPED_ARRAYS.Uint32Array = Uint32Array
+TYPED_ARRAYS.Int32Array = Int32Array
+TYPED_ARRAYS.Uint8ClampedArray = Uint8ClampedArray // TYPED_ARRAYS.BigInt64Array = BigInt64Array;
+
+function createPlaneSliders(context) {
+  var planeUIGroup = document.createElement('div')
+  planeUIGroup.setAttribute('class', style.uiGroup)
+  var viewerDOMId = context.id
+  var xPlaneRow = document.createElement('div')
+  xPlaneRow.setAttribute('class', style.planeUIRow)
+  xPlaneRow.className += ' '.concat(viewerDOMId, '-x-plane-row')
+  context.main.xPlaneRow = xPlaneRow
+  var xPlaneVisibleButton = document.createElement('div')
+  xPlaneVisibleButton.innerHTML = '<input id="'
+    .concat(context.id, '-xPlaneVisibleButton" type="checkbox" checked class="')
+    .concat(
+      style.toggleInput,
+      '"><label itk-vtk-tooltip itk-vtk-tooltip-top-annotations itk-vtk-tooltip-content="X plane visibility" class="'
+    )
+    .concat(style.visibleButton, ' ')
+    .concat(style.toggleButton, '" for="')
+    .concat(context.id, '-xPlaneVisibleButton"><img src="')
+    .concat(optimizedSVGDataUri$3, '" alt="visible" /></label>')
+  xPlaneVisibleButton.children[0]
+  xPlaneVisibleButton.children[1]
+  xPlaneRow.appendChild(xPlaneVisibleButton)
+  context.main.xPlaneVisibleButton = xPlaneVisibleButton
+  var xPlaneInvisibleButton = document.createElement('div')
+  xPlaneVisibleButton.setAttribute('class', style.visibleButton)
+  xPlaneInvisibleButton.setAttribute('class', style.visibleButton)
+  xPlaneInvisibleButton.innerHTML = '<input id="'
+    .concat(context.id, '-invisibleButton" type="checkbox" class="')
+    .concat(
       style.toggleInput,
       '"><label itk-vtk-tooltip itk-vtk-tooltip-top-annotations itk-vtk-tooltip-content="X plane visibility" class="'
     )
@@ -2421,58 +3058,102 @@ function createInterpolationButton(context, uiRow) {
   uiRow.appendChild(interpolationButton)
 }
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr
-}
+var slicedToArray = { exports: {} }
 
-function _iterableToArrayLimit(arr, i) {
-  var _i =
-    arr == null
-      ? null
-      : (typeof Symbol !== 'undefined' && arr[Symbol.iterator]) ||
-        arr['@@iterator']
+var arrayWithHoles = { exports: {} }
 
-  if (_i == null) return
-  var _arr = []
-  var _n = true
-  var _d = false
+;(function(module) {
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr
+  }
 
-  var _s, _e
+  ;(module.exports = _arrayWithHoles),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(arrayWithHoles)
 
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value)
+var iterableToArrayLimit = { exports: {} }
+
+;(function(module) {
+  function _iterableToArrayLimit(arr, i) {
+    var _i =
+      arr == null
+        ? null
+        : (typeof Symbol !== 'undefined' && arr[Symbol.iterator]) ||
+          arr['@@iterator']
+
+    if (_i == null) return
+    var _arr = []
+    var _n = true
+    var _d = false
+
+    var _s, _e
 
-      if (i && _arr.length === i) break
-    }
-  } catch (err) {
-    _d = true
-    _e = err
-  } finally {
     try {
-      if (!_n && _i['return'] != null) _i['return']()
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value)
+
+        if (i && _arr.length === i) break
+      }
+    } catch (err) {
+      _d = true
+      _e = err
     } finally {
-      if (_d) throw _e
+      try {
+        if (!_n && _i['return'] != null) _i['return']()
+      } finally {
+        if (_d) throw _e
+      }
     }
+
+    return _arr
   }
 
-  return _arr
-}
+  ;(module.exports = _iterableToArrayLimit),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(iterableToArrayLimit)
 
-function _nonIterableRest() {
-  throw new TypeError(
-    'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
-  )
-}
+var nonIterableRest = { exports: {} }
 
-function _slicedToArray(arr, i) {
-  return (
-    _arrayWithHoles(arr) ||
-    _iterableToArrayLimit(arr, i) ||
-    _unsupportedIterableToArray$3(arr, i) ||
-    _nonIterableRest()
-  )
-}
+;(function(module) {
+  function _nonIterableRest() {
+    throw new TypeError(
+      'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
+    )
+  }
+
+  ;(module.exports = _nonIterableRest),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(nonIterableRest)
+
+;(function(module) {
+  var arrayWithHoles$1 = arrayWithHoles.exports
+
+  var iterableToArrayLimit$1 = iterableToArrayLimit.exports
+
+  var unsupportedIterableToArray = unsupportedIterableToArray$1.exports
+
+  var nonIterableRest$1 = nonIterableRest.exports
+
+  function _slicedToArray(arr, i) {
+    return (
+      arrayWithHoles$1(arr) ||
+      iterableToArrayLimit$1(arr, i) ||
+      unsupportedIterableToArray(arr, i) ||
+      nonIterableRest$1()
+    )
+  }
+
+  ;(module.exports = _slicedToArray),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(slicedToArray)
+
+var _slicedToArray = /*@__PURE__*/ getDefaultExportFromCjs(
+  slicedToArray.exports
+)
 
 var css_248z =
   '/*\nTo change this license header, choose License Headers in Project Properties.\nTo change this template file, choose Tools | Templates\nand open the template in the editor.\n*/\n/* \n    Created on : Nov 28, 2013, 7:09:35 AM\n    Author     : bugraozden\n*/\n\n.iconselect_icon-select__Sd-E3{\n    width:0px;\n    z-index: 2000;\n }\n\n .iconselect_icon-select__Sd-E3 .iconselect_selected-box__YaAz- {\n\n     position: relative;\n     margin: 0px;\n     padding: 0px;\n     width: 70px; /* sil */\n     height: 60px; /* sil */\n     border: 1px solid #999999;\n     border-radius: 3px;\n\t background-color: white;\n\t \n\t z-index: 1000;\n\n }\n\n .iconselect_icon-select__Sd-E3 .iconselect_selected-box__YaAz-:hover {\n\n     position: relative;\n     margin: 0px;\n     padding: 0px;\n     width: 70px; /* sil */\n     height: 60px; /* sil */\n     border: 1px solid #000000;\n     background-color: #FFFFFF;\n     border-radius: 3px;\n\n }\n\n .iconselect_icon-select__Sd-E3 .iconselect_selected-icon__iswfk {\n\n     position: absolute;\n     margin: 0px;\n     padding: 0px;\n     top:5px;\n     left:5px;\n     width: 48px; /* sil */\n     height: 48px; /* sil */\n     border-radius: 3px;\n\n }\n\n .iconselect_icon-select__Sd-E3 .iconselect_component-icon__AY7IZ{\n     position: absolute;\n     bottom:2px;\n     right:4px;\n }\n\n .iconselect_icon-select__Sd-E3 .iconselect_box__ITflu {\n\n     position: absolute;\n     top:0px;\n     left:71px;\n     margin: 0px;\n     padding: 0px;\n     width: 170px; /* sil */\n     height: 170px; /* sil */\n     border: 1px solid #EEEEEE;\n     background-color: #EEEEEE;\n     border-radius: 3px;\n     \n     \n     overflow:auto;\n     /*\n     -webkit-overflow-scrolling: touch;\n     */\n\n }\n\n .iconselect_icon-select__Sd-E3 .iconselect_icon__dPhWj {\n     position: relative;\n     margin: 5px 0px 0px 5px;\n     padding: 0px;\n     width: 48px; /* sil */\n     height: 48px; /* sil */\n     border: 1px solid #CCCCCC;\n     background-color: #FFFFFF;\n     border-radius: 3px;\n\n     overflow:hidden;\n     float: left;\n }\n\n .iconselect_icon-select__Sd-E3 .iconselect_icon__dPhWj:hover {\n     border: 1px solid #000000;\n }\n\n .iconselect_icon-select__Sd-E3 .iconselect_icon__dPhWj.iconselect_selected__zCJ2U {\n     position: relative;\n     margin: 5px 0px 0px 5px;\n     padding: 0px;\n     width: 48px; /* sil */\n     height: 48px; /* sil */\n     border: 1px solid #EEEEEE;\n     background-color: #EEEEEE;\n     border-radius: 3px;\n\n     overflow:hidden;\n     float: left;\n }\n'
@@ -15627,7 +16308,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== 'symbol' ? key + '' : key, value)
   return value
 }
-const PADDING = 10
+const PADDING$1 = 10
 const makeSvg = () => {
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
   svg.setAttribute(
@@ -15672,10 +16353,10 @@ const Container = parent => {
   const getSize = () => {
     const { top, left, width, height } = root.getBoundingClientRect()
     return {
-      width: width - 2 * PADDING,
-      height: height - 2 * PADDING,
-      top: top + PADDING,
-      left: left + PADDING,
+      width: width - 2 * PADDING$1,
+      height: height - 2 * PADDING$1,
+      top: top + PADDING$1,
+      left: left + PADDING$1,
     }
   }
   const domToNormalized = (x, y) => {
@@ -15690,9 +16371,9 @@ const Container = parent => {
   const normalizedToSvg = (x, y) => {
     const { width, height } = getSize()
     const valueRange = viewBox[1] - viewBox[0] || 1e-3
-    const xSvg = ((x - viewBox[0]) / valueRange) * width + PADDING
+    const xSvg = ((x - viewBox[0]) / valueRange) * width + PADDING$1
     const opacityRange = viewBox[3] - viewBox[2] || 1e-3
-    const ySvg = (1 - (y - viewBox[2]) / opacityRange) * height + PADDING
+    const ySvg = (1 - (y - viewBox[2]) / opacityRange) * height + PADDING$1
     return [xSvg, ySvg]
   }
   const borderSize = () => {
@@ -16550,20 +17231,32 @@ function createBlendModeSelector(context, uiContainer) {
   uiContainer.appendChild(blendModeSelector)
 }
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true,
-    })
-  } else {
-    obj[key] = value
+var defineProperty = { exports: {} }
+
+;(function(module) {
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true,
+      })
+    } else {
+      obj[key] = value
+    }
+
+    return obj
   }
 
-  return obj
-}
+  ;(module.exports = _defineProperty),
+    (module.exports.__esModule = true),
+    (module.exports['default'] = module.exports)
+})(defineProperty)
+
+var _defineProperty = /*@__PURE__*/ getDefaultExportFromCjs(
+  defineProperty.exports
+)
 
 var sliderMap = new Map()
 
@@ -17972,82 +18665,2489 @@ function toggleDarkMode(context) {
   applyMainContrastSensitiveStyle(context)
 }
 
-function toggleUICollapsed(context, event, actionMeta) {
-  if (!context.uiContainer) {
-    return
-  }
-
-  if (actionMeta) {
-    context.uiCollapsed =
-      actionMeta.state.value.active.uiCollapsed === 'enabled'
-  }
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __decorate(decorators, target, key, desc) {
+  var c = arguments.length,
+    r =
+      c < 3
+        ? target
+        : desc === null
+        ? (desc = Object.getOwnPropertyDescriptor(target, key))
+        : desc,
+    d
+  if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
+    r = Reflect.decorate(decorators, target, key, desc)
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if ((d = decorators[i]))
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r
+  return c > 3 && r && Object.defineProperty(target, key, r), r
+}
 
-  if (context.uiCollapsed) {
-    applyGroupVisibility(
-      context,
-      [
-        'main',
-        'layers',
-        'widgets',
-        'images',
-        'labelImages',
-        'labelImageWeights',
-      ],
-      !context.uiCollapsed
-    )
-  } else {
-    applyGroupVisibility(
-      context,
-      ['main', 'layers', 'widgets'],
-      !context.uiCollapsed
-    )
+function __metadata(metadataKey, metadataValue) {
+  if (typeof Reflect === 'object' && typeof Reflect.metadata === 'function')
+    return Reflect.metadata(metadataKey, metadataValue)
+}
 
-    if (context.images.selectedName) {
-      context.service.send({
-        type: 'SELECT_LAYER',
-        data: context.images.selectedName,
-      })
-    }
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$3 = window,
+  e$6 =
+    t$3.ShadowRoot &&
+    (void 0 === t$3.ShadyCSS || t$3.ShadyCSS.nativeShadow) &&
+    'adoptedStyleSheets' in Document.prototype &&
+    'replace' in CSSStyleSheet.prototype,
+  s$4 = Symbol(),
+  n$5 = new WeakMap()
+class o$5 {
+  constructor(t, e, n) {
+    if (((this._$cssResult$ = !0), n !== s$4))
+      throw Error(
+        'CSSResult is not constructable. Use `unsafeCSS` or `css` instead.'
+      )
+    ;(this.cssText = t), (this.t = e)
   }
-
-  if (!context.use2D && !!context.main.planeUIGroup) {
-    if (context.uiCollapsed && context.main.viewMode === 'Volume') {
-      context.main.planeUIGroup.style.display = 'none'
-    } else {
-      context.main.planeUIGroup.style.display = 'block'
+  get styleSheet() {
+    let t = this.o
+    const s = this.t
+    if (e$6 && void 0 === t) {
+      const e = void 0 !== s && 1 === s.length
+      e && (t = n$5.get(s)),
+        void 0 === t &&
+          ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText),
+          e && n$5.set(s, t))
     }
+    return t
+  }
+  toString() {
+    return this.cssText
   }
 }
-
-function createCollapseUIButton(context) {
-  var collapseUIButton = document.createElement('div')
-  collapseUIButton.className = ''.concat(style.collapseUIButton)
-  applyContrastSensitiveStyleToElement(
-    context,
-    'invertibleButton',
-    collapseUIButton
-  )
-  collapseUIButton.id = ''.concat(context.id, '-collapseUIButton')
-  collapseUIButton.innerHTML = '<img src="'.concat(
-    optimizedSVGDataUri$5,
-    '" alt="toggle"/>'
-  )
-  toggleUICollapsed(context)
-  collapseUIButton.addEventListener('click', function(event) {
-    event.preventDefault()
-    event.stopPropagation()
-    context.service.send('TOGGLE_UI_COLLAPSED')
-  })
-  context.main.collapseUIButton = collapseUIButton
-  context.uiContainer.appendChild(collapseUIButton)
-}
-
+const r$2 = t => new o$5('string' == typeof t ? t : t + '', void 0, s$4),
+  i$5 = (t, ...e) => {
+    const n =
+      1 === t.length
+        ? t[0]
+        : e.reduce(
+            (e, s, n) =>
+              e +
+              (t => {
+                if (!0 === t._$cssResult$) return t.cssText
+                if ('number' == typeof t) return t
+                throw Error(
+                  "Value passed to 'css' function must be a 'css' function result: " +
+                    t +
+                    ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security."
+                )
+              })(s) +
+              t[n + 1],
+            t[0]
+          )
+    return new o$5(n, t, s$4)
+  },
+  S$1 = (s, n) => {
+    e$6
+      ? (s.adoptedStyleSheets = n.map(t =>
+          t instanceof CSSStyleSheet ? t : t.styleSheet
+        ))
+      : n.forEach(e => {
+          const n = document.createElement('style'),
+            o = t$3.litNonce
+          void 0 !== o && n.setAttribute('nonce', o),
+            (n.textContent = e.cssText),
+            s.appendChild(n)
+        })
+  },
+  c$1 = e$6
+    ? t => t
+    : t =>
+        t instanceof CSSStyleSheet
+          ? (t => {
+              let e = ''
+              for (const s of t.cssRules) e += s.cssText
+              return r$2(e)
+            })(t)
+          : t
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ var s$3
+const e$5 = window,
+  r$1 = e$5.trustedTypes,
+  h$1 = r$1 ? r$1.emptyScript : '',
+  o$4 = e$5.reactiveElementPolyfillSupport,
+  n$4 = {
+    toAttribute(t, i) {
+      switch (i) {
+        case Boolean:
+          t = t ? h$1 : null
+          break
+        case Object:
+        case Array:
+          t = null == t ? t : JSON.stringify(t)
+      }
+      return t
+    },
+    fromAttribute(t, i) {
+      let s = t
+      switch (i) {
+        case Boolean:
+          s = null !== t
+          break
+        case Number:
+          s = null === t ? null : Number(t)
+          break
+        case Object:
+        case Array:
+          try {
+            s = JSON.parse(t)
+          } catch (t) {
+            s = null
+          }
+      }
+      return s
+    },
+  },
+  a$2 = (t, i) => i !== t && (i == i || t == t),
+  l$4 = {
+    attribute: !0,
+    type: String,
+    converter: n$4,
+    reflect: !1,
+    hasChanged: a$2,
+  }
+class d$1 extends HTMLElement {
+  constructor() {
+    super(),
+      (this._$Ei = new Map()),
+      (this.isUpdatePending = !1),
+      (this.hasUpdated = !1),
+      (this._$El = null),
+      this.u()
+  }
+  static addInitializer(t) {
+    var i
+    ;(null !== (i = this.h) && void 0 !== i) || (this.h = []), this.h.push(t)
+  }
+  static get observedAttributes() {
+    this.finalize()
+    const t = []
+    return (
+      this.elementProperties.forEach((i, s) => {
+        const e = this._$Ep(s, i)
+        void 0 !== e && (this._$Ev.set(e, s), t.push(e))
+      }),
+      t
+    )
+  }
+  static createProperty(t, i = l$4) {
+    if (
+      (i.state && (i.attribute = !1),
+      this.finalize(),
+      this.elementProperties.set(t, i),
+      !i.noAccessor && !this.prototype.hasOwnProperty(t))
+    ) {
+      const s = 'symbol' == typeof t ? Symbol() : '__' + t,
+        e = this.getPropertyDescriptor(t, s, i)
+      void 0 !== e && Object.defineProperty(this.prototype, t, e)
+    }
+  }
+  static getPropertyDescriptor(t, i, s) {
+    return {
+      get() {
+        return this[i]
+      },
+      set(e) {
+        const r = this[t]
+        ;(this[i] = e), this.requestUpdate(t, r, s)
+      },
+      configurable: !0,
+      enumerable: !0,
+    }
+  }
+  static getPropertyOptions(t) {
+    return this.elementProperties.get(t) || l$4
+  }
+  static finalize() {
+    if (this.hasOwnProperty('finalized')) return !1
+    this.finalized = !0
+    const t = Object.getPrototypeOf(this)
+    if (
+      (t.finalize(),
+      (this.elementProperties = new Map(t.elementProperties)),
+      (this._$Ev = new Map()),
+      this.hasOwnProperty('properties'))
+    ) {
+      const t = this.properties,
+        i = [
+          ...Object.getOwnPropertyNames(t),
+          ...Object.getOwnPropertySymbols(t),
+        ]
+      for (const s of i) this.createProperty(s, t[s])
+    }
+    return (this.elementStyles = this.finalizeStyles(this.styles)), !0
+  }
+  static finalizeStyles(i) {
+    const s = []
+    if (Array.isArray(i)) {
+      const e = new Set(i.flat(1 / 0).reverse())
+      for (const i of e) s.unshift(c$1(i))
+    } else void 0 !== i && s.push(c$1(i))
+    return s
+  }
+  static _$Ep(t, i) {
+    const s = i.attribute
+    return !1 === s
+      ? void 0
+      : 'string' == typeof s
+      ? s
+      : 'string' == typeof t
+      ? t.toLowerCase()
+      : void 0
+  }
+  u() {
+    var t
+    ;(this._$E_ = new Promise(t => (this.enableUpdating = t))),
+      (this._$AL = new Map()),
+      this._$Eg(),
+      this.requestUpdate(),
+      null === (t = this.constructor.h) ||
+        void 0 === t ||
+        t.forEach(t => t(this))
+  }
+  addController(t) {
+    var i, s
+    ;(null !== (i = this._$ES) && void 0 !== i ? i : (this._$ES = [])).push(t),
+      void 0 !== this.renderRoot &&
+        this.isConnected &&
+        (null === (s = t.hostConnected) || void 0 === s || s.call(t))
+  }
+  removeController(t) {
+    var i
+    null === (i = this._$ES) ||
+      void 0 === i ||
+      i.splice(this._$ES.indexOf(t) >>> 0, 1)
+  }
+  _$Eg() {
+    this.constructor.elementProperties.forEach((t, i) => {
+      this.hasOwnProperty(i) && (this._$Ei.set(i, this[i]), delete this[i])
+    })
+  }
+  createRenderRoot() {
+    var t
+    const s =
+      null !== (t = this.shadowRoot) && void 0 !== t
+        ? t
+        : this.attachShadow(this.constructor.shadowRootOptions)
+    return S$1(s, this.constructor.elementStyles), s
+  }
+  connectedCallback() {
+    var t
+    void 0 === this.renderRoot && (this.renderRoot = this.createRenderRoot()),
+      this.enableUpdating(!0),
+      null === (t = this._$ES) ||
+        void 0 === t ||
+        t.forEach(t => {
+          var i
+          return null === (i = t.hostConnected) || void 0 === i
+            ? void 0
+            : i.call(t)
+        })
+  }
+  enableUpdating(t) {}
+  disconnectedCallback() {
+    var t
+    null === (t = this._$ES) ||
+      void 0 === t ||
+      t.forEach(t => {
+        var i
+        return null === (i = t.hostDisconnected) || void 0 === i
+          ? void 0
+          : i.call(t)
+      })
+  }
+  attributeChangedCallback(t, i, s) {
+    this._$AK(t, s)
+  }
+  _$EO(t, i, s = l$4) {
+    var e
+    const r = this.constructor._$Ep(t, s)
+    if (void 0 !== r && !0 === s.reflect) {
+      const h = (void 0 !==
+      (null === (e = s.converter) || void 0 === e ? void 0 : e.toAttribute)
+        ? s.converter
+        : n$4
+      ).toAttribute(i, s.type)
+      ;(this._$El = t),
+        null == h ? this.removeAttribute(r) : this.setAttribute(r, h),
+        (this._$El = null)
+    }
+  }
+  _$AK(t, i) {
+    var s
+    const e = this.constructor,
+      r = e._$Ev.get(t)
+    if (void 0 !== r && this._$El !== r) {
+      const t = e.getPropertyOptions(r),
+        h =
+          'function' == typeof t.converter
+            ? { fromAttribute: t.converter }
+            : void 0 !==
+              (null === (s = t.converter) || void 0 === s
+                ? void 0
+                : s.fromAttribute)
+            ? t.converter
+            : n$4
+      ;(this._$El = r),
+        (this[r] = h.fromAttribute(i, t.type)),
+        (this._$El = null)
+    }
+  }
+  requestUpdate(t, i, s) {
+    let e = !0
+    void 0 !== t &&
+      (((s = s || this.constructor.getPropertyOptions(t)).hasChanged || a$2)(
+        this[t],
+        i
+      )
+        ? (this._$AL.has(t) || this._$AL.set(t, i),
+          !0 === s.reflect &&
+            this._$El !== t &&
+            (void 0 === this._$EC && (this._$EC = new Map()),
+            this._$EC.set(t, s)))
+        : (e = !1)),
+      !this.isUpdatePending && e && (this._$E_ = this._$Ej())
+  }
+  async _$Ej() {
+    this.isUpdatePending = !0
+    try {
+      await this._$E_
+    } catch (t) {
+      Promise.reject(t)
+    }
+    const t = this.scheduleUpdate()
+    return null != t && (await t), !this.isUpdatePending
+  }
+  scheduleUpdate() {
+    return this.performUpdate()
+  }
+  performUpdate() {
+    var t
+    if (!this.isUpdatePending) return
+    this.hasUpdated,
+      this._$Ei &&
+        (this._$Ei.forEach((t, i) => (this[i] = t)), (this._$Ei = void 0))
+    let i = !1
+    const s = this._$AL
+    try {
+      ;(i = this.shouldUpdate(s)),
+        i
+          ? (this.willUpdate(s),
+            null === (t = this._$ES) ||
+              void 0 === t ||
+              t.forEach(t => {
+                var i
+                return null === (i = t.hostUpdate) || void 0 === i
+                  ? void 0
+                  : i.call(t)
+              }),
+            this.update(s))
+          : this._$Ek()
+    } catch (t) {
+      throw ((i = !1), this._$Ek(), t)
+    }
+    i && this._$AE(s)
+  }
+  willUpdate(t) {}
+  _$AE(t) {
+    var i
+    null === (i = this._$ES) ||
+      void 0 === i ||
+      i.forEach(t => {
+        var i
+        return null === (i = t.hostUpdated) || void 0 === i ? void 0 : i.call(t)
+      }),
+      this.hasUpdated || ((this.hasUpdated = !0), this.firstUpdated(t)),
+      this.updated(t)
+  }
+  _$Ek() {
+    ;(this._$AL = new Map()), (this.isUpdatePending = !1)
+  }
+  get updateComplete() {
+    return this.getUpdateComplete()
+  }
+  getUpdateComplete() {
+    return this._$E_
+  }
+  shouldUpdate(t) {
+    return !0
+  }
+  update(t) {
+    void 0 !== this._$EC &&
+      (this._$EC.forEach((t, i) => this._$EO(i, this[i], t)),
+      (this._$EC = void 0)),
+      this._$Ek()
+  }
+  updated(t) {}
+  firstUpdated(t) {}
+}
+;(d$1.finalized = !0),
+  (d$1.elementProperties = new Map()),
+  (d$1.elementStyles = []),
+  (d$1.shadowRootOptions = { mode: 'open' }),
+  null == o$4 || o$4({ ReactiveElement: d$1 }),
+  (null !== (s$3 = e$5.reactiveElementVersions) && void 0 !== s$3
+    ? s$3
+    : (e$5.reactiveElementVersions = [])
+  ).push('1.4.1')
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var t$2
+const i$4 = window,
+  s$2 = i$4.trustedTypes,
+  e$4 = s$2 ? s$2.createPolicy('lit-html', { createHTML: t => t }) : void 0,
+  o$3 = `lit$${(Math.random() + '').slice(9)}$`,
+  n$3 = '?' + o$3,
+  l$3 = `<${n$3}>`,
+  h = document,
+  r = (t = '') => h.createComment(t),
+  d = t => null === t || ('object' != typeof t && 'function' != typeof t),
+  u = Array.isArray,
+  c = t =>
+    u(t) || 'function' == typeof (null == t ? void 0 : t[Symbol.iterator]),
+  v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
+  a$1 = /-->/g,
+  f = />/g,
+  _ = RegExp(
+    '>|[ \t\n\f\r](?:([^\\s"\'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r"\'`<>=]|("|\')|))|$)',
+    'g'
+  ),
+  m = /'/g,
+  p = /"/g,
+  $ = /^(?:script|style|textarea|title)$/i,
+  g = t => (i, ...s) => ({ _$litType$: t, strings: i, values: s }),
+  y = g(1),
+  x = Symbol.for('lit-noChange'),
+  b = Symbol.for('lit-nothing'),
+  T = new WeakMap(),
+  A = h.createTreeWalker(h, 129, null, !1),
+  E = (t, i) => {
+    const s = t.length - 1,
+      n = []
+    let h,
+      r = 2 === i ? '<svg>' : '',
+      d = v
+    for (let i = 0; i < s; i++) {
+      const s = t[i]
+      let e,
+        u,
+        c = -1,
+        g = 0
+      for (; g < s.length && ((d.lastIndex = g), (u = d.exec(s)), null !== u); )
+        (g = d.lastIndex),
+          d === v
+            ? '!--' === u[1]
+              ? (d = a$1)
+              : void 0 !== u[1]
+              ? (d = f)
+              : void 0 !== u[2]
+              ? ($.test(u[2]) && (h = RegExp('</' + u[2], 'g')), (d = _))
+              : void 0 !== u[3] && (d = _)
+            : d === _
+            ? '>' === u[0]
+              ? ((d = null != h ? h : v), (c = -1))
+              : void 0 === u[1]
+              ? (c = -2)
+              : ((c = d.lastIndex - u[2].length),
+                (e = u[1]),
+                (d = void 0 === u[3] ? _ : '"' === u[3] ? p : m))
+            : d === p || d === m
+            ? (d = _)
+            : d === a$1 || d === f
+            ? (d = v)
+            : ((d = _), (h = void 0))
+      const y = d === _ && t[i + 1].startsWith('/>') ? ' ' : ''
+      r +=
+        d === v
+          ? s + l$3
+          : c >= 0
+          ? (n.push(e), s.slice(0, c) + '$lit$' + s.slice(c) + o$3 + y)
+          : s + o$3 + (-2 === c ? (n.push(void 0), i) : y)
+    }
+    const u = r + (t[s] || '<?>') + (2 === i ? '</svg>' : '')
+    if (!Array.isArray(t) || !t.hasOwnProperty('raw'))
+      throw Error('invalid template strings array')
+    return [void 0 !== e$4 ? e$4.createHTML(u) : u, n]
+  }
+class C {
+  constructor({ strings: t, _$litType$: i }, e) {
+    let l
+    this.parts = []
+    let h = 0,
+      d = 0
+    const u = t.length - 1,
+      c = this.parts,
+      [v, a] = E(t, i)
+    if (
+      ((this.el = C.createElement(v, e)),
+      (A.currentNode = this.el.content),
+      2 === i)
+    ) {
+      const t = this.el.content,
+        i = t.firstChild
+      i.remove(), t.append(...i.childNodes)
+    }
+    for (; null !== (l = A.nextNode()) && c.length < u; ) {
+      if (1 === l.nodeType) {
+        if (l.hasAttributes()) {
+          const t = []
+          for (const i of l.getAttributeNames())
+            if (i.endsWith('$lit$') || i.startsWith(o$3)) {
+              const s = a[d++]
+              if ((t.push(i), void 0 !== s)) {
+                const t = l.getAttribute(s.toLowerCase() + '$lit$').split(o$3),
+                  i = /([.?@])?(.*)/.exec(s)
+                c.push({
+                  type: 1,
+                  index: h,
+                  name: i[2],
+                  strings: t,
+                  ctor:
+                    '.' === i[1] ? M : '?' === i[1] ? k : '@' === i[1] ? H : S,
+                })
+              } else c.push({ type: 6, index: h })
+            }
+          for (const i of t) l.removeAttribute(i)
+        }
+        if ($.test(l.tagName)) {
+          const t = l.textContent.split(o$3),
+            i = t.length - 1
+          if (i > 0) {
+            l.textContent = s$2 ? s$2.emptyScript : ''
+            for (let s = 0; s < i; s++)
+              l.append(t[s], r()), A.nextNode(), c.push({ type: 2, index: ++h })
+            l.append(t[i], r())
+          }
+        }
+      } else if (8 === l.nodeType)
+        if (l.data === n$3) c.push({ type: 2, index: h })
+        else {
+          let t = -1
+          for (; -1 !== (t = l.data.indexOf(o$3, t + 1)); )
+            c.push({ type: 7, index: h }), (t += o$3.length - 1)
+        }
+      h++
+    }
+  }
+  static createElement(t, i) {
+    const s = h.createElement('template')
+    return (s.innerHTML = t), s
+  }
+}
+function P(t, i, s = t, e) {
+  var o, n, l, h
+  if (i === x) return i
+  let r =
+    void 0 !== e
+      ? null === (o = s._$Co) || void 0 === o
+        ? void 0
+        : o[e]
+      : s._$Cl
+  const u = d(i) ? void 0 : i._$litDirective$
+  return (
+    (null == r ? void 0 : r.constructor) !== u &&
+      (null === (n = null == r ? void 0 : r._$AO) ||
+        void 0 === n ||
+        n.call(r, !1),
+      void 0 === u ? (r = void 0) : ((r = new u(t)), r._$AT(t, s, e)),
+      void 0 !== e
+        ? ((null !== (l = (h = s)._$Co) && void 0 !== l ? l : (h._$Co = []))[
+            e
+          ] = r)
+        : (s._$Cl = r)),
+    void 0 !== r && (i = P(t, r._$AS(t, i.values), r, e)),
+    i
+  )
+}
+class V {
+  constructor(t, i) {
+    ;(this.u = []), (this._$AN = void 0), (this._$AD = t), (this._$AM = i)
+  }
+  get parentNode() {
+    return this._$AM.parentNode
+  }
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  v(t) {
+    var i
+    const {
+        el: { content: s },
+        parts: e,
+      } = this._$AD,
+      o = (null !== (i = null == t ? void 0 : t.creationScope) && void 0 !== i
+        ? i
+        : h
+      ).importNode(s, !0)
+    A.currentNode = o
+    let n = A.nextNode(),
+      l = 0,
+      r = 0,
+      d = e[0]
+    for (; void 0 !== d; ) {
+      if (l === d.index) {
+        let i
+        2 === d.type
+          ? (i = new N(n, n.nextSibling, this, t))
+          : 1 === d.type
+          ? (i = new d.ctor(n, d.name, d.strings, this, t))
+          : 6 === d.type && (i = new I(n, this, t)),
+          this.u.push(i),
+          (d = e[++r])
+      }
+      l !== (null == d ? void 0 : d.index) && ((n = A.nextNode()), l++)
+    }
+    return o
+  }
+  p(t) {
+    let i = 0
+    for (const s of this.u)
+      void 0 !== s &&
+        (void 0 !== s.strings
+          ? (s._$AI(t, s, i), (i += s.strings.length - 2))
+          : s._$AI(t[i])),
+        i++
+  }
+}
+class N {
+  constructor(t, i, s, e) {
+    var o
+    ;(this.type = 2),
+      (this._$AH = b),
+      (this._$AN = void 0),
+      (this._$AA = t),
+      (this._$AB = i),
+      (this._$AM = s),
+      (this.options = e),
+      (this._$Cm =
+        null === (o = null == e ? void 0 : e.isConnected) || void 0 === o || o)
+  }
+  get _$AU() {
+    var t, i
+    return null !==
+      (i = null === (t = this._$AM) || void 0 === t ? void 0 : t._$AU) &&
+      void 0 !== i
+      ? i
+      : this._$Cm
+  }
+  get parentNode() {
+    let t = this._$AA.parentNode
+    const i = this._$AM
+    return void 0 !== i && 11 === t.nodeType && (t = i.parentNode), t
+  }
+  get startNode() {
+    return this._$AA
+  }
+  get endNode() {
+    return this._$AB
+  }
+  _$AI(t, i = this) {
+    ;(t = P(this, t, i)),
+      d(t)
+        ? t === b || null == t || '' === t
+          ? (this._$AH !== b && this._$AR(), (this._$AH = b))
+          : t !== this._$AH && t !== x && this.g(t)
+        : void 0 !== t._$litType$
+        ? this.$(t)
+        : void 0 !== t.nodeType
+        ? this.T(t)
+        : c(t)
+        ? this.k(t)
+        : this.g(t)
+  }
+  O(t, i = this._$AB) {
+    return this._$AA.parentNode.insertBefore(t, i)
+  }
+  T(t) {
+    this._$AH !== t && (this._$AR(), (this._$AH = this.O(t)))
+  }
+  g(t) {
+    this._$AH !== b && d(this._$AH)
+      ? (this._$AA.nextSibling.data = t)
+      : this.T(h.createTextNode(t)),
+      (this._$AH = t)
+  }
+  $(t) {
+    var i
+    const { values: s, _$litType$: e } = t,
+      o =
+        'number' == typeof e
+          ? this._$AC(t)
+          : (void 0 === e.el && (e.el = C.createElement(e.h, this.options)), e)
+    if ((null === (i = this._$AH) || void 0 === i ? void 0 : i._$AD) === o)
+      this._$AH.p(s)
+    else {
+      const t = new V(o, this),
+        i = t.v(this.options)
+      t.p(s), this.T(i), (this._$AH = t)
+    }
+  }
+  _$AC(t) {
+    let i = T.get(t.strings)
+    return void 0 === i && T.set(t.strings, (i = new C(t))), i
+  }
+  k(t) {
+    u(this._$AH) || ((this._$AH = []), this._$AR())
+    const i = this._$AH
+    let s,
+      e = 0
+    for (const o of t)
+      e === i.length
+        ? i.push((s = new N(this.O(r()), this.O(r()), this, this.options)))
+        : (s = i[e]),
+        s._$AI(o),
+        e++
+    e < i.length && (this._$AR(s && s._$AB.nextSibling, e), (i.length = e))
+  }
+  _$AR(t = this._$AA.nextSibling, i) {
+    var s
+    for (
+      null === (s = this._$AP) || void 0 === s || s.call(this, !1, !0, i);
+      t && t !== this._$AB;
+
+    ) {
+      const i = t.nextSibling
+      t.remove(), (t = i)
+    }
+  }
+  setConnected(t) {
+    var i
+    void 0 === this._$AM &&
+      ((this._$Cm = t),
+      null === (i = this._$AP) || void 0 === i || i.call(this, t))
+  }
+}
+class S {
+  constructor(t, i, s, e, o) {
+    ;(this.type = 1),
+      (this._$AH = b),
+      (this._$AN = void 0),
+      (this.element = t),
+      (this.name = i),
+      (this._$AM = e),
+      (this.options = o),
+      s.length > 2 || '' !== s[0] || '' !== s[1]
+        ? ((this._$AH = Array(s.length - 1).fill(new String())),
+          (this.strings = s))
+        : (this._$AH = b)
+  }
+  get tagName() {
+    return this.element.tagName
+  }
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  _$AI(t, i = this, s, e) {
+    const o = this.strings
+    let n = !1
+    if (void 0 === o)
+      (t = P(this, t, i, 0)),
+        (n = !d(t) || (t !== this._$AH && t !== x)),
+        n && (this._$AH = t)
+    else {
+      const e = t
+      let l, h
+      for (t = o[0], l = 0; l < o.length - 1; l++)
+        (h = P(this, e[s + l], i, l)),
+          h === x && (h = this._$AH[l]),
+          n || (n = !d(h) || h !== this._$AH[l]),
+          h === b ? (t = b) : t !== b && (t += (null != h ? h : '') + o[l + 1]),
+          (this._$AH[l] = h)
+    }
+    n && !e && this.j(t)
+  }
+  j(t) {
+    t === b
+      ? this.element.removeAttribute(this.name)
+      : this.element.setAttribute(this.name, null != t ? t : '')
+  }
+}
+class M extends S {
+  constructor() {
+    super(...arguments), (this.type = 3)
+  }
+  j(t) {
+    this.element[this.name] = t === b ? void 0 : t
+  }
+}
+const R = s$2 ? s$2.emptyScript : ''
+class k extends S {
+  constructor() {
+    super(...arguments), (this.type = 4)
+  }
+  j(t) {
+    t && t !== b
+      ? this.element.setAttribute(this.name, R)
+      : this.element.removeAttribute(this.name)
+  }
+}
+class H extends S {
+  constructor(t, i, s, e, o) {
+    super(t, i, s, e, o), (this.type = 5)
+  }
+  _$AI(t, i = this) {
+    var s
+    if ((t = null !== (s = P(this, t, i, 0)) && void 0 !== s ? s : b) === x)
+      return
+    const e = this._$AH,
+      o =
+        (t === b && e !== b) ||
+        t.capture !== e.capture ||
+        t.once !== e.once ||
+        t.passive !== e.passive,
+      n = t !== b && (e === b || o)
+    o && this.element.removeEventListener(this.name, this, e),
+      n && this.element.addEventListener(this.name, this, t),
+      (this._$AH = t)
+  }
+  handleEvent(t) {
+    var i, s
+    'function' == typeof this._$AH
+      ? this._$AH.call(
+          null !==
+            (s =
+              null === (i = this.options) || void 0 === i ? void 0 : i.host) &&
+            void 0 !== s
+            ? s
+            : this.element,
+          t
+        )
+      : this._$AH.handleEvent(t)
+  }
+}
+class I {
+  constructor(t, i, s) {
+    ;(this.element = t),
+      (this.type = 6),
+      (this._$AN = void 0),
+      (this._$AM = i),
+      (this.options = s)
+  }
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  _$AI(t) {
+    P(this, t)
+  }
+}
+const z = i$4.litHtmlPolyfillSupport
+null == z || z(C, N),
+  (null !== (t$2 = i$4.litHtmlVersions) && void 0 !== t$2
+    ? t$2
+    : (i$4.litHtmlVersions = [])
+  ).push('2.4.0')
+const Z = (t, i, s) => {
+  var e, o
+  const n =
+    null !== (e = null == s ? void 0 : s.renderBefore) && void 0 !== e ? e : i
+  let l = n._$litPart$
+  if (void 0 === l) {
+    const t =
+      null !== (o = null == s ? void 0 : s.renderBefore) && void 0 !== o
+        ? o
+        : null
+    n._$litPart$ = l = new N(
+      i.insertBefore(r(), t),
+      t,
+      void 0,
+      null != s ? s : {}
+    )
+  }
+  return l._$AI(t), l
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ var l$2, o$2
+class s$1 extends d$1 {
+  constructor() {
+    super(...arguments),
+      (this.renderOptions = { host: this }),
+      (this._$Do = void 0)
+  }
+  createRenderRoot() {
+    var t, e
+    const i = super.createRenderRoot()
+    return (
+      (null !== (t = (e = this.renderOptions).renderBefore) && void 0 !== t) ||
+        (e.renderBefore = i.firstChild),
+      i
+    )
+  }
+  update(t) {
+    const i = this.render()
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected),
+      super.update(t),
+      (this._$Do = Z(i, this.renderRoot, this.renderOptions))
+  }
+  connectedCallback() {
+    var t
+    super.connectedCallback(),
+      null === (t = this._$Do) || void 0 === t || t.setConnected(!0)
+  }
+  disconnectedCallback() {
+    var t
+    super.disconnectedCallback(),
+      null === (t = this._$Do) || void 0 === t || t.setConnected(!1)
+  }
+  render() {
+    return x
+  }
+}
+;(s$1.finalized = !0),
+  (s$1._$litElement$ = !0),
+  null === (l$2 = globalThis.litElementHydrateSupport) ||
+    void 0 === l$2 ||
+    l$2.call(globalThis, { LitElement: s$1 })
+const n$2 = globalThis.litElementPolyfillSupport
+null == n$2 || n$2({ LitElement: s$1 })
+;(null !== (o$2 = globalThis.litElementVersions) && void 0 !== o$2
+  ? o$2
+  : (globalThis.litElementVersions = [])
+).push('3.2.2')
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$3 = e => n =>
+  'function' == typeof n
+    ? ((e, n) => (customElements.define(e, n), n))(e, n)
+    : ((e, n) => {
+        const { kind: t, elements: s } = n
+        return {
+          kind: t,
+          elements: s,
+          finisher(n) {
+            customElements.define(e, n)
+          },
+        }
+      })(e, n)
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const i$3 = (i, e) =>
+  'method' === e.kind && e.descriptor && !('value' in e.descriptor)
+    ? {
+        ...e,
+        finisher(n) {
+          n.createProperty(e.key, i)
+        },
+      }
+    : {
+        kind: 'field',
+        key: Symbol(),
+        placement: 'own',
+        descriptor: {},
+        originalKey: e.key,
+        initializer() {
+          'function' == typeof e.initializer &&
+            (this[e.key] = e.initializer.call(this))
+        },
+        finisher(n) {
+          n.createProperty(e.key, i)
+        },
+      }
+function e$2(e) {
+  return (n, t) =>
+    void 0 !== t
+      ? ((i, e, n) => {
+          e.constructor.createProperty(n, i)
+        })(e, n, t)
+      : i$3(e, n)
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function t$1(t) {
+  return e$2({ ...t, state: !0 })
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const o$1 = ({ finisher: e, descriptor: t }) => (o, n) => {
+  var r
+  if (void 0 === n) {
+    const n = null !== (r = o.originalKey) && void 0 !== r ? r : o.key,
+      i =
+        null != t
+          ? {
+              kind: 'method',
+              placement: 'prototype',
+              key: n,
+              descriptor: t(o.key),
+            }
+          : { ...o, key: n }
+    return (
+      null != e &&
+        (i.finisher = function(t) {
+          e(t, n)
+        }),
+      i
+    )
+  }
+  {
+    const r = o.constructor
+    void 0 !== t && Object.defineProperty(o, n, t(n)), null == e || e(r, n)
+  }
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function i$2(i, n) {
+  return o$1({
+    descriptor: o => {
+      const t = {
+        get() {
+          var o, n
+          return null !==
+            (n =
+              null === (o = this.renderRoot) || void 0 === o
+                ? void 0
+                : o.querySelector(i)) && void 0 !== n
+            ? n
+            : null
+        },
+        enumerable: !0,
+        configurable: !0,
+      }
+      if (n) {
+        const n = 'symbol' == typeof o ? Symbol() : '__' + o
+        t.get = function() {
+          var o, t
+          return (
+            void 0 === this[n] &&
+              (this[n] =
+                null !==
+                  (t =
+                    null === (o = this.renderRoot) || void 0 === o
+                      ? void 0
+                      : o.querySelector(i)) && void 0 !== t
+                  ? t
+                  : null),
+            this[n]
+          )
+        }
+      }
+      return t
+    },
+  })
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ var n$1
+null !=
+(null === (n$1 = window.HTMLSlotElement) || void 0 === n$1
+  ? void 0
+  : n$1.prototype.assignedElements)
+  ? (o, n) => o.assignedElements(n)
+  : (o, n) => o.assignedNodes(n).filter(o => o.nodeType === Node.ELEMENT_NODE)
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/** @soyCompatible */
+class Icon extends s$1 {
+  /** @soyTemplate */
+  render() {
+    return y`<span><slot></slot></span>`
+  }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$4 = i$5`:host{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}/*# sourceMappingURL=icon-styles.css.map */
+`
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdIcon = class MdIcon extends Icon {}
+MdIcon.styles = [styles$4]
+MdIcon = __decorate([e$3('md-icon')], MdIcon)
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t = {
+    ATTRIBUTE: 1,
+    CHILD: 2,
+    PROPERTY: 3,
+    BOOLEAN_ATTRIBUTE: 4,
+    EVENT: 5,
+    ELEMENT: 6,
+  },
+  e$1 = t => (...e) => ({ _$litDirective$: t, values: e })
+class i$1 {
+  constructor(t) {}
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  _$AT(t, e, i) {
+    ;(this._$Ct = t), (this._$AM = e), (this._$Ci = i)
+  }
+  _$AS(t, e) {
+    return this.update(t, e)
+  }
+  update(t, e) {
+    return this.render(...e)
+  }
+}
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const o = e$1(
+  class extends i$1 {
+    constructor(t$1) {
+      var i
+      if (
+        (super(t$1),
+        t$1.type !== t.ATTRIBUTE ||
+          'class' !== t$1.name ||
+          (null === (i = t$1.strings) || void 0 === i ? void 0 : i.length) > 2)
+      )
+        throw Error(
+          '`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.'
+        )
+    }
+    render(t) {
+      return (
+        ' ' +
+        Object.keys(t)
+          .filter(i => t[i])
+          .join(' ') +
+        ' '
+      )
+    }
+    update(i, [s]) {
+      var r, o
+      if (void 0 === this.nt) {
+        ;(this.nt = new Set()),
+          void 0 !== i.strings &&
+            (this.st = new Set(
+              i.strings
+                .join(' ')
+                .split(/\s/)
+                .filter(t => '' !== t)
+            ))
+        for (const t in s)
+          s[t] &&
+            !(null === (r = this.st) || void 0 === r ? void 0 : r.has(t)) &&
+            this.nt.add(t)
+        return this.render(s)
+      }
+      const e = i.element.classList
+      this.nt.forEach(t => {
+        t in s || (e.remove(t), this.nt.delete(t))
+      })
+      for (const t in s) {
+        const i = !!s[t]
+        i === this.nt.has(t) ||
+          (null === (o = this.st) || void 0 === o ? void 0 : o.has(t)) ||
+          (i ? (e.add(t), this.nt.add(t)) : (e.remove(t), this.nt.delete(t)))
+      }
+      return x
+    }
+  }
+)
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/** @soyCompatible */
+class FocusRing extends s$1 {
+  constructor() {
+    super(...arguments)
+    this.visible = false
+  }
+  /** @soyTemplate */
+  render() {
+    return y`<span class="md3-focus-ring ${o(this.getRenderClasses())}"></span>`
+  }
+  /** @soyTemplate */
+  getRenderClasses() {
+    return {
+      'md3-focus-ring--visible': this.visible,
+    }
+  }
+}
+__decorate(
+  [e$2({ type: Boolean }), __metadata('design:type', Object)],
+  FocusRing.prototype,
+  'visible',
+  void 0
+)
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$3 = i$5`:host{pointer-events:none}.md3-focus-ring{display:none;position:absolute;box-sizing:border-box}.md3-focus-ring::before{inset:0;position:absolute;content:""}.md3-focus-ring--visible{display:block}.md3-focus-ring{inset:calc(-1*(var(--md-focus-ring-container-outer-padding-vertical, 2px) + var(--md-focus-ring-inner-ring-width, 2px) + var(--md-focus-ring-outer-ring-width, 2px))) calc(-1*(var(--md-focus-ring-container-outer-padding-horizontal, 2px) + var(--md-focus-ring-inner-ring-width, 2px) + var(--md-focus-ring-outer-ring-width, 2px)));border:var(--md-focus-ring-outer-ring-width, 2px) solid var(--md-focus-ring-outer-ring-color, var(--md-sys-color-tertiary-container, #ffd8e4));border-radius:var(--md-focus-ring-ring-radius, 8px)}.md3-focus-ring::before{border:var(--md-focus-ring-inner-ring-width, 2px) solid var(--md-focus-ring-inner-ring-color, var(--md-sys-color-on-tertiary-container, #31111d));border-radius:calc(var(--md-focus-ring-ring-radius, 8px) - var(--md-focus-ring-outer-ring-width, 2px))}/*# sourceMappingURL=focus-ring-styles.css.map */
+`
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdFocusRing = class MdFocusRing extends FocusRing {}
+MdFocusRing.styles = [styles$3]
+MdFocusRing = __decorate([e$3('md-focus-ring')], MdFocusRing)
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Enumeration to keep track of the lifecycle of a touch event.
+ */
+// State transition diagram:
+//     +-----------------------------+
+//     |                             v
+//     |    +------+------ WAITING_FOR_MOUSE_CLICK<----+
+//     |    |      |                ^                  |
+//     |    V      |                |                  |
+// => INACTIVE -> TOUCH_DELAY -> RELEASING          HOLDING
+//                 |                                   ^
+//                 |                                   |
+//                 +-----------------------------------+
+var Phase
+;(function(Phase) {
+  // Initial state of the control, no touch in progress.
+  // Transitions:
+  //     on touch down: transition to TOUCH_DELAY.
+  //     on mouse down: transition to WAITING_FOR_MOUSE_CLICK.
+  Phase['INACTIVE'] = 'INACTIVE'
+  // Touch down has been received, waiting to determine if it's a swipe.
+  // Transitions:
+  //     on touch up: beginPress(); transition to RELEASING.
+  //     on cancel: transition to INACTIVE.
+  //     after TOUCH_DELAY_MS: beginPress(); transition to HOLDING.
+  Phase['TOUCH_DELAY'] = 'TOUCH_DELAY'
+  // A touch has been deemed to be a press
+  // Transitions:
+  //     on pointerup: endPress(); transition to WAITING_FOR_MOUSE_CLICK.
+  Phase['HOLDING'] = 'HOLDING'
+  // The user has released the mouse / touch, but we want to delay calling
+  // endPress for a little bit to avoid double clicks.
+  // Transitions:
+  //    mouse sequence after debounceDelay: endPress(); transition to INACTIVE
+  //    when in touch sequence: transitions directly to WAITING_FOR_MOUSE_CLICK
+  Phase['RELEASING'] = 'RELEASING'
+  // The user has touched, but we want to delay endPress until synthetic mouse
+  // click event occurs. Stay in this state for a fixed amount of time before
+  // giving up and transitioning into rest state.
+  // Transitions:
+  //     on click: endPress(); transition to INACTIVE.
+  //     after WAIT_FOR_MOUSE_CLICK_MS: transition to INACTIVE.
+  Phase['WAITING_FOR_MOUSE_CLICK'] = 'WAITING_FOR_MOUSE_CLICK'
+})(Phase || (Phase = {}))
+/**
+ * Delay time from touchstart to when element#beginPress is invoked.
+ */
+const TOUCH_DELAY_MS = 150
+/**
+ * Delay time from beginning to wait for synthetic mouse events till giving up.
+ */
+const WAIT_FOR_MOUSE_CLICK_MS = 500
+/**
+ * ActionController normalizes user interaction on components and distills it
+ * into calling `beginPress` and `endPress` on the component.
+ *
+ * `beginPress` is a good hook to affect visuals for pressed state, including
+ * ripple.
+ *
+ * `endPress` is a good hook for firing events based on user interaction, and
+ * cleaning up the pressed visual state.
+ *
+ * A component using an ActionController need only implement the ActionElement
+ * interface and add the ActionController's event listeners to understand user
+ * interaction.
+ */
+class ActionController {
+  constructor(element) {
+    this.element = element
+    this.phase = Phase.INACTIVE
+    this.touchTimer = null
+    this.clickTimer = null
+    this.lastPositionEvent = null
+    this.pressed = false
+    this.checkBoundsAfterContextMenu = false
+    // event listeners
+    /**
+     * Pointer down event handler.
+     */
+    this.pointerDown = e => {
+      if (!this.shouldRespondToEvent(e) || this.phase !== Phase.INACTIVE) {
+        return
+      }
+      if (this.isTouch(e)) {
+        // after a longpress contextmenu event, an extra `pointerdown` can be
+        // dispatched to the pressed element. Check that the down is within
+        // bounds of the element in this case.
+        if (this.checkBoundsAfterContextMenu && !this.inBounds(e)) {
+          return
+        }
+        this.checkBoundsAfterContextMenu = false
+        this.lastPositionEvent = e
+        this.setPhase(Phase.TOUCH_DELAY)
+        this.touchTimer = setTimeout(() => {
+          this.touchDelayFinished()
+        }, TOUCH_DELAY_MS)
+      } else {
+        const leftButtonPressed = e.button === 0
+        if (
+          !leftButtonPressed ||
+          (this.ignoreClicksWithModifiers && this.eventHasModifiers(e))
+        ) {
+          return
+        }
+        this.setPhase(Phase.WAITING_FOR_MOUSE_CLICK)
+        this.beginPress(e)
+      }
+    }
+    /**
+     * Pointer up event handler.
+     */
+    this.pointerUp = e => {
+      if (!this.isTouch(e) || !this.shouldRespondToEvent(e)) {
+        return
+      }
+      if (this.phase === Phase.HOLDING) {
+        this.waitForClick()
+      } else if (this.phase === Phase.TOUCH_DELAY) {
+        this.setPhase(Phase.RELEASING)
+        this.beginPress()
+        this.waitForClick()
+      }
+    }
+    /**
+     * Click event handler.
+     */
+    this.click = e => {
+      if (
+        this.disabled ||
+        (this.ignoreClicksWithModifiers && this.eventHasModifiers(e))
+      ) {
+        return
+      }
+      if (this.phase === Phase.WAITING_FOR_MOUSE_CLICK) {
+        this.endPress()
+        this.setPhase(Phase.INACTIVE)
+        return
+      }
+      // keyboard synthesized click event
+      if (this.phase === Phase.INACTIVE && !this.pressed) {
+        this.press()
+      }
+    }
+    /**
+     * Pointer leave event handler.
+     */
+    this.pointerLeave = e => {
+      // cancel a held press that moves outside the element
+      if (this.shouldRespondToEvent(e) && !this.isTouch(e) && this.pressed) {
+        this.cancelPress()
+      }
+    }
+    /**
+     * Pointer cancel event handler.
+     */
+    this.pointerCancel = e => {
+      if (this.shouldRespondToEvent(e)) {
+        this.cancelPress()
+      }
+    }
+    /**
+     * Contextmenu event handler.
+     */
+    this.contextMenu = () => {
+      if (!this.disabled) {
+        this.checkBoundsAfterContextMenu = true
+        this.cancelPress()
+      }
+    }
+    this.element.addController(this)
+  }
+  get disabled() {
+    return this.element.disabled
+  }
+  get ignoreClicksWithModifiers() {
+    return this.element.ignoreClicksWithModifiers ?? false
+  }
+  setPhase(newPhase) {
+    this.phase = newPhase
+  }
+  /**
+   * Calls beginPress and then endPress. Allows us to programmatically click
+   * on the element.
+   */
+  press() {
+    this.beginPress(/* positionEvent= */ null)
+    this.setPhase(Phase.INACTIVE)
+    this.endPress()
+  }
+  /**
+   * Call `beginPress` on element with triggering event, if applicable.
+   */
+  beginPress(positionEvent = this.lastPositionEvent) {
+    this.pressed = true
+    this.element.beginPress({ positionEvent })
+  }
+  /**
+   * Call `endPress` on element, and clean up timers.
+   */
+  endPress() {
+    this.pressed = false
+    this.element.endPress({ cancelled: false })
+    this.cleanup()
+  }
+  cleanup() {
+    if (this.touchTimer) {
+      clearTimeout(this.touchTimer)
+    }
+    this.touchTimer = null
+    if (this.clickTimer) {
+      clearTimeout(this.clickTimer)
+    }
+    this.clickTimer = null
+    this.lastPositionEvent = null
+  }
+  /**
+   * Call `endPress` with cancelled state on element, and cleanup timers.
+   */
+  cancelPress() {
+    this.pressed = false
+    this.cleanup()
+    if (this.phase === Phase.TOUCH_DELAY) {
+      this.setPhase(Phase.INACTIVE)
+    } else if (this.phase !== Phase.INACTIVE) {
+      this.setPhase(Phase.INACTIVE)
+      this.element.endPress({ cancelled: true })
+    }
+  }
+  isTouch(e) {
+    return e.pointerType === 'touch'
+  }
+  touchDelayFinished() {
+    if (this.phase !== Phase.TOUCH_DELAY) {
+      return
+    }
+    this.setPhase(Phase.HOLDING)
+    this.beginPress()
+  }
+  waitForClick() {
+    this.setPhase(Phase.WAITING_FOR_MOUSE_CLICK)
+    this.clickTimer = setTimeout(() => {
+      // If a click event does not occur, clean up the interaction state.
+      if (this.phase === Phase.WAITING_FOR_MOUSE_CLICK) {
+        this.cancelPress()
+      }
+    }, WAIT_FOR_MOUSE_CLICK_MS)
+  }
+  /**
+   * Check if event should trigger actions on the element.
+   */
+  shouldRespondToEvent(e) {
+    return !this.disabled && e.isPrimary
+  }
+  /**
+   * Check if the event is within the bounds of the element.
+   *
+   * This is only needed for the "stuck" contextmenu longpress on Chrome.
+   */
+  inBounds(ev) {
+    const { top, left, bottom, right } = this.element.getBoundingClientRect()
+    const { x, y } = ev
+    return x >= left && x <= right && y >= top && y <= bottom
+  }
+  eventHasModifiers(e) {
+    return e.altKey || e.ctrlKey || e.shiftKey || e.metaKey
+  }
+  /**
+   * Cancel interactions if the element is removed from the DOM.
+   */
+  hostDisconnected() {
+    this.cancelPress()
+  }
+  /**
+   * If the element becomes disabled, cancel interactions.
+   */
+  hostUpdated() {
+    if (this.disabled) {
+      this.cancelPress()
+    }
+  }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @soyCompatible
+ *
+ * ActionElement is a base class that provides a handy starting point for using
+ * ActionController. Subclasses should add the event handlers on the interactive
+ * node in the template, and override `beginPress` and `endPress` to handle
+ * pressed state, ripple interaction, and any other "press" interaction.
+ */
+class ActionElement extends s$1 {
+  constructor() {
+    super(...arguments)
+    this.actionController = new ActionController(this)
+  }
+  /**
+   * Hook method called when we've confirmed that the gesture is intended to be
+   * a press. Subclasses should change the visual state of the control to
+   * 'active' at this point, and possibly fire an event. Subclasses should
+   * override this method if more needs to be done.
+   *
+   * @param options `positionEvent` is the Event that is considered the
+   * beginning of the press. Null if this was a keyboard interaction.
+   */
+  beginPress(options) {}
+  /**
+   * Hook method called when the control goes from a pressed to unpressed
+   * state.
+   *
+   * @param options If `cancelled` is true, means the user canceled the action.
+   *    Subclasses which trigger events on endPress() should check the value
+   *    of this flag, and modify their behavior accordingly.
+   */
+  endPress({ cancelled, actionData }) {
+    if (!cancelled) {
+      this.dispatchEvent(
+        new CustomEvent('action', {
+          detail: actionData,
+          bubbles: true,
+          composed: true,
+        })
+      )
+    }
+  }
+  /**
+   * Hook method for the ActionController.
+   * Subclasses should add this method as an event handler on the interactive
+   * template element with `@pointerdown="${this.handlePointerDown}"`
+   */
+  handlePointerDown(e) {
+    this.actionController.pointerDown(e)
+  }
+  /**
+   * Hook method for the ActionController.
+   * Subclasses should add this method as an event handler on the interactive
+   * template element with `@pointerup="${this.handlePointerUp}"`
+   */
+  handlePointerUp(e) {
+    this.actionController.pointerUp(e)
+  }
+  /**
+   * Hook method for the ActionController.
+   * Subclasses should add this method as an event handler on the interactive
+   * template element with `@pointercancel="${this.handlePointerCancel}"`
+   */
+  handlePointerCancel(e) {
+    this.actionController.pointerCancel(e)
+  }
+  /**
+   * Hook method for the ActionController.
+   * Subclasses should add this method as an event handler on the interactive
+   * template element with `@pointerleave="${this.handlePointerleave}"`
+   */
+  handlePointerLeave(e) {
+    this.actionController.pointerLeave(e)
+  }
+  /**
+   * Hook method for the ActionController.
+   * Subclasses should add this method as an event handler on the interactive
+   * template element with `@click="${this.handleClick}"`
+   */
+  handleClick(e) {
+    this.actionController.click(e)
+  }
+  /**
+   * Hook method for the ActionController.
+   * Subclasses should add this method as an event handler on the interactive
+   * template element with `@contextmenu="${this.handleContextMenu}"`
+   */
+  handleContextMenu() {
+    this.actionController.contextMenu()
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A property decorator that helps proxy an aria attribute to an internal node.
+ *
+ * This decorator is only intended for use with ARIAMixin properties,
+ * such as `ariaLabel`, to help with screen readers.
+ *
+ * This decorator will remove the host `aria-*` attribute at runtime and add it
+ * to a `data-aria-*` attribute to avoid screenreader conflicts between the
+ * host and internal node.
+ *
+ * `@ariaProperty` decorated properties should sync with LitElement to the
+ * `data-aria-*` attribute, not the native `aria-*` attribute.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement {
+ *   \@ariaProperty
+ *   // TODO(b/210730484): replace with @soyParam annotation
+ *   \@property({ type: String, attribute: 'data-aria-label', noAccessor: true})
+ *   ariaLabel!: string;
+ * }
+ * ```
+ * @category Decorator
+ * @ExportDecoratedItems
+ */
+function ariaProperty(prototype, property) {
+  // Replace the ARIAMixin property with data-* attribute syncing instead of
+  // using the native aria-* attribute reflection. This preserves the attribute
+  // for SSR and avoids screenreader conflicts after delegating the attribute
+  // to a child node.
+  Object.defineProperty(prototype, property, {
+    configurable: true,
+    enumerable: true,
+    get() {
+      return this.dataset[property] ?? ''
+    },
+    set(value) {
+      // Coerce non-string values to a string
+      const strValue = String(value ?? '')
+      if (strValue) {
+        this.dataset[property] = strValue
+      } else {
+        delete this.dataset[property]
+      }
+      // lit will call this setter whenever the data-* attribute changes.
+      // However, this.dataset[property] will automatically be updated to the
+      // current value. To avoid bugs, always request an update regardless of
+      // the old value.
+      this.requestUpdate()
+    },
+  })
+  // Define an internal property that syncs from the `aria-*` attribute with lit
+  // and delegates to the real ARIAMixin property, which renders an update.
+  // This property will immediately remove the `aria-*` attribute, which doesn't
+  // work well with SSR (which is why there's a separate synced property).
+  const internalAriaProperty = Symbol(property)
+  // "ariaLabel" -> "aria-label" / "ariaLabelledBy" -> "aria-labelledby"
+  const ariaAttribute = property.replace('aria', 'aria-').toLowerCase()
+  const constructor = prototype.constructor
+  let removingAttribute = false
+  Object.defineProperty(prototype, internalAriaProperty, {
+    get() {
+      // tslint is failing here, but the types are correct (ARIAMixin
+      // properties do not obfuscate with closure)
+      // tslint:disable-next-line:no-dict-access-on-struct-type
+      return this[property]
+    },
+    set(value) {
+      if (removingAttribute) {
+        // Ignore this update, which is triggered below
+        return
+      }
+      // Set the ARIAMixin property, which will sync the `data-*` attribute
+      // and trigger rendering if the value changed.
+      // tslint is failing here, but the types are correct (ARIAMixin
+      // properties do not obfuscate with closure)
+      // tslint:disable-next-line:no-dict-access-on-struct-type
+      this[property] = value
+      // Remove the `aria-*` attribute, which will call this setter again with
+      // the incorrect value. Ignore these updates.
+      removingAttribute = true
+      this.removeAttribute(ariaAttribute)
+      removingAttribute = false
+    },
+  })
+  // Tell lit to observe the `aria-*` attribute and set the internal property,
+  // which acts as a "aria-* attribute changed" observer.
+  constructor.createProperty(internalAriaProperty, {
+    attribute: ariaAttribute,
+    noAccessor: true,
+  })
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+class FocusGlobal {
+  constructor() {
+    this.visible = false
+  }
+  setVisible(visible) {
+    this.visible = visible
+  }
+}
+/**
+ * This object can be overwritten by the `setup()` function to use a different
+ * focus coordination object.
+ */
+let focusObject = new FocusGlobal()
+/**
+ * Set of keyboard event codes that correspond to keyboard navigation
+ */
+const KEYBOARD_NAVIGATION_KEYS = new Set([
+  'Tab',
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowDown',
+])
+const KEYDOWN_HANDLER = e => {
+  if (KEYBOARD_NAVIGATION_KEYS.has(e.key)) {
+    focusObject.setVisible(true)
+  }
+}
+/**
+ * Set up integration with alternate global focus tracking object
+ *
+ * @param focusGlobal A global focus object to coordinate between multiple
+ *     systems
+ * @param enableKeydownHandler Set to true to let StrongFocusService listen for
+ *     keyboard navigation
+ */
+function setup(focusGlobal, enableKeydownHandler = false) {
+  focusObject = focusGlobal
+  if (enableKeydownHandler) {
+    window.addEventListener('keydown', KEYDOWN_HANDLER)
+  } else {
+    window.removeEventListener('keydown', KEYDOWN_HANDLER)
+  }
+}
+/**
+ * Returns `true` if the component should show strong focus.
+ *
+ * By default, strong focus is shown only on keyboard navigation, and not on
+ * pointer interaction.
+ */
+function shouldShowStrongFocus() {
+  return focusObject.visible
+}
+/**
+ * Components should call this when a user interacts with a component with a
+ * pointing device.
+ *
+ * By default, this will prevent the strong focus from being shown.
+ */
+function pointerPress() {
+  focusObject.setVisible(false)
+}
+setup(focusObject, true)
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Easing functions to use for web animations.
+ *
+ * TODO(b/241113345): replace with tokens
+ */
+var Easing
+;(function(Easing) {
+  Easing['STANDARD'] = 'cubic-bezier(0.2, 0, 0, 1)'
+})(Easing || (Easing = {}))
+/**
+ * Creates an `AnimationSignal` that can be used to cancel a previous task.
+ *
+ * @example
+ * class MyClass {
+ *   private labelAnimationSignal = createAnimationSignal();
+ *
+ *   private async animateLabel() {
+ *     // Start of the task. Previous tasks will be canceled.
+ *     const signal = this.labelAnimationSignal.start();
+ *
+ *     // Do async work...
+ *     if (signal.aborted) {
+ *       // Use AbortSignal to check if a request was made to abort after some
+ *       // asynchronous work.
+ *       return;
+ *     }
+ *
+ *     const animation = this.animate(...);
+ *     // Add event listeners to be notified when the task should be canceled.
+ *     signal.addEventListener('abort', () => {
+ *       animation.cancel();
+ *     });
+ *
+ *     animation.addEventListener('finish', () => {
+ *       // Tell the signal that the current task is finished.
+ *       this.labelAnimationSignal.finish();
+ *     });
+ *   }
+ * }
+ *
+ * @return An `AnimationSignal`.
+ */
+function createAnimationSignal() {
+  // The current animation's AbortController
+  let animationAbortController = null
+  return {
+    start() {
+      // Tell the previous animation to cancel.
+      animationAbortController?.abort()
+      // Set up a new AbortController for the current animation.
+      animationAbortController = new AbortController()
+      // Provide the AbortSignal so that the caller can check aborted status
+      // and add listeners.
+      return animationAbortController.signal
+    },
+    finish() {
+      animationAbortController = null
+    },
+  }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const PRESS_GROW_MS = 450
+const MINIMUM_PRESS_MS = 225
+const INITIAL_ORIGIN_SCALE = 0.2
+const PADDING = 10
+const SOFT_EDGE_MINIMUM_SIZE = 75
+const SOFT_EDGE_CONTAINER_RATIO = 0.35
+const PRESS_PSEUDO = '::after'
+const ANIMATION_FILL = 'forwards'
+/** @soyCompatible */
+class Ripple extends s$1 {
+  constructor() {
+    super(...arguments)
+    this.unbounded = false
+    this.disabled = false
+    this.hovered = false
+    this.focused = false
+    this.pressed = false
+    this.rippleSize = ''
+    this.rippleScale = ''
+    this.initialSize = 0
+    this.pressAnimationSignal = createAnimationSignal()
+    this.growAnimation = null
+    this.delayedEndPressHandle = null
+  }
+  /** @soyTemplate */
+  render() {
+    return y`<div class="md3-ripple-surface ${o(
+      this.getRenderRippleClasses()
+    )}"></div>`
+  }
+  /** @soyTemplate */
+  getRenderRippleClasses() {
+    return {
+      'md3-ripple--hovered': this.hovered,
+      'md3-ripple--focused': this.focused,
+      'md3-ripple--pressed': this.pressed,
+      'md3-ripple--unbounded': this.unbounded,
+    }
+  }
+  update(changedProps) {
+    if (changedProps.has('disabled') && this.disabled) {
+      this.endHover()
+      this.endFocus()
+      this.endPress()
+    }
+    super.update(changedProps)
+  }
+  getDimensions() {
+    return (this.parentElement ?? this).getBoundingClientRect()
+  }
+  determineRippleSize() {
+    const { height, width } = this.getDimensions()
+    const maxDim = Math.max(height, width)
+    const softEdgeSize = Math.max(
+      SOFT_EDGE_CONTAINER_RATIO * maxDim,
+      SOFT_EDGE_MINIMUM_SIZE
+    )
+    let maxRadius = maxDim
+    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE)
+    const hypotenuse = Math.sqrt(width ** 2 + height ** 2)
+    maxRadius = hypotenuse + PADDING
+    // ensure `initialSize` is even for unbounded
+    if (this.unbounded) {
+      initialSize = initialSize - (initialSize % 2)
+    }
+    this.initialSize = initialSize
+    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`
+    this.rippleSize = `${this.initialSize}px`
+  }
+  getNormalizedPointerEventCoords(pointerEvent) {
+    const { scrollX, scrollY } = window
+    const { left, top } = this.getDimensions()
+    const documentX = scrollX + left
+    const documentY = scrollY + top
+    const { pageX, pageY } = pointerEvent
+    return { x: pageX - documentX, y: pageY - documentY }
+  }
+  getTranslationCoordinates(positionEvent) {
+    const { height, width } = this.getDimensions()
+    // end in the center
+    const endPoint = {
+      x: (width - this.initialSize) / 2,
+      y: (height - this.initialSize) / 2,
+    }
+    let startPoint
+    if (positionEvent instanceof PointerEvent) {
+      startPoint = this.getNormalizedPointerEventCoords(positionEvent)
+    } else {
+      startPoint = {
+        x: width / 2,
+        y: height / 2,
+      }
+    }
+    // center around start point
+    startPoint = {
+      x: startPoint.x - this.initialSize / 2,
+      y: startPoint.y - this.initialSize / 2,
+    }
+    return { startPoint, endPoint }
+  }
+  startPressAnimation(positionEvent) {
+    this.determineRippleSize()
+    const { startPoint, endPoint } = this.getTranslationCoordinates(
+      positionEvent
+    )
+    const translateStart = `${startPoint.x}px, ${startPoint.y}px`
+    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`
+    const signal = this.pressAnimationSignal.start()
+    const growAnimation = this.mdRoot.animate(
+      {
+        top: [0, 0],
+        left: [0, 0],
+        height: [this.rippleSize, this.rippleSize],
+        width: [this.rippleSize, this.rippleSize],
+        transform: [
+          `translate(${translateStart}) scale(1)`,
+          `translate(${translateEnd}) scale(${this.rippleScale})`,
+        ],
+      },
+      {
+        pseudoElement: PRESS_PSEUDO,
+        duration: PRESS_GROW_MS,
+        easing: Easing.STANDARD,
+        fill: ANIMATION_FILL,
+      }
+    )
+    growAnimation.addEventListener('finish', () => {
+      this.pressAnimationSignal.finish()
+      this.growAnimation = null
+    })
+    signal.addEventListener('abort', () => {
+      growAnimation.cancel()
+      this.growAnimation = null
+    })
+    this.growAnimation = growAnimation
+  }
+  /**
+   * @deprecated Use beginHover
+   */
+  startHover(hoverEvent) {
+    this.beginHover(hoverEvent)
+  }
+  beginHover(hoverEvent) {
+    if (hoverEvent?.pointerType !== 'touch') {
+      this.hovered = true
+    }
+  }
+  endHover() {
+    this.hovered = false
+  }
+  /**
+   * @deprecated Use beginFocus
+   */
+  startFocus() {
+    this.beginFocus()
+  }
+  beginFocus() {
+    this.focused = true
+  }
+  endFocus() {
+    this.focused = false
+  }
+  /**
+   * @deprecated Use beginPress
+   */
+  startPress(positionEvent) {
+    this.beginPress(positionEvent)
+  }
+  beginPress(positionEvent) {
+    this.pressed = true
+    if (this.delayedEndPressHandle !== null) {
+      clearTimeout(this.delayedEndPressHandle)
+      this.delayedEndPressHandle = null
+    }
+    this.startPressAnimation(positionEvent)
+  }
+  endPress() {
+    const pressAnimationPlayState = this.growAnimation?.currentTime ?? Infinity
+    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+      this.pressed = false
+    } else {
+      this.delayedEndPressHandle = setTimeout(() => {
+        this.pressed = false
+        this.delayedEndPressHandle = null
+      }, MINIMUM_PRESS_MS - pressAnimationPlayState)
+    }
+  }
+}
+__decorate(
+  [i$2('.md3-ripple-surface'), __metadata('design:type', HTMLElement)],
+  Ripple.prototype,
+  'mdRoot',
+  void 0
+)
+__decorate(
+  [e$2({ type: Boolean }), __metadata('design:type', Object)],
+  Ripple.prototype,
+  'unbounded',
+  void 0
+)
+__decorate(
+  [e$2({ type: Boolean, reflect: true }), __metadata('design:type', Object)],
+  Ripple.prototype,
+  'disabled',
+  void 0
+)
+__decorate(
+  [t$1(), __metadata('design:type', Object)],
+  Ripple.prototype,
+  'hovered',
+  void 0
+)
+__decorate(
+  [t$1(), __metadata('design:type', Object)],
+  Ripple.prototype,
+  'focused',
+  void 0
+)
+__decorate(
+  [t$1(), __metadata('design:type', Object)],
+  Ripple.prototype,
+  'pressed',
+  void 0
+)
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$2 = i$5`:host{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:flex}:host([disabled]){opacity:0}.md3-ripple-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-ripple-surface::before,.md3-ripple-surface::after{position:absolute;opacity:0;pointer-events:none;z-index:-1;content:""}.md3-ripple-surface::before{transition:opacity 15ms linear,background-color 15ms linear;inset:0}.md3-ripple-surface::after{transition:opacity 375ms linear;transform-origin:center center}.md3-ripple--focused::before{transition-duration:75ms}.md3-ripple--pressed::after{transition-duration:105ms}.md3-ripple-surface{border-radius:var(--md-ripple-state-layer-shape, 0)}.md3-ripple-surface::before{background-color:var(--md-ripple-hover-state-layer-color, black)}.md3-ripple-surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-state-layer-color, black) max(100% - 70px, 65%), transparent 100%)}.md3-ripple-surface.md3-ripple--hovered::before{opacity:var(--md-ripple-hover-state-layer-opacity, 0.08);background-color:var(--md-ripple-hover-state-layer-color, black)}.md3-ripple-surface.md3-ripple--focused::before{opacity:var(--md-ripple-focus-state-layer-opacity, 0.12);background-color:var(--md-ripple-focus-state-layer-color, black)}.md3-ripple-surface.md3-ripple--pressed::after{opacity:var(--md-ripple-pressed-state-layer-opacity, 0.12)}.md3-ripple-surface.md3-ripple--unbounded{border-radius:var(--md-ripple-state-layer-shape, 9999px)}/*# sourceMappingURL=ripple-styles.css.map */
+`
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdRipple = class MdRipple extends Ripple {}
+MdRipple.styles = [styles$2]
+MdRipple = __decorate([e$3('md-ripple')], MdRipple)
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const l$1 = l => (null != l ? l : b)
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const e = Symbol.for(''),
+  l = t => {
+    if ((null == t ? void 0 : t.r) === e)
+      return null == t ? void 0 : t._$litStatic$
+  },
+  i = (t, ...r) => ({
+    _$litStatic$: r.reduce(
+      (r, e, l) =>
+        r +
+        (t => {
+          if (void 0 !== t._$litStatic$) return t._$litStatic$
+          throw Error(
+            `Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`
+          )
+        })(e) +
+        t[l + 1],
+      t[0]
+    ),
+    r: e,
+  }),
+  s = new Map(),
+  a = t => (r, ...e) => {
+    const o = e.length
+    let i, a
+    const n = [],
+      u = []
+    let c,
+      $ = 0,
+      f = !1
+    for (; $ < o; ) {
+      for (c = r[$]; $ < o && void 0 !== ((a = e[$]), (i = l(a))); )
+        (c += i + r[++$]), (f = !0)
+      u.push(a), n.push(c), $++
+    }
+    if (($ === o && n.push(r[o]), f)) {
+      const t = n.join('$$lit$$')
+      void 0 === (r = s.get(t)) && ((n.raw = n), s.set(t, (r = n))), (e = u)
+    }
+    return t(r, ...e)
+  },
+  n = a(y)
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/** @soyCompatible */
+class IconButton extends ActionElement {
+  constructor() {
+    super(...arguments)
+    this.disabled = false
+    this.icon = ''
+    this.flipIconInRtl = false
+    this.flipIcon = false
+    this.showFocusRing = false
+    this.rippleElementTag = i`md-ripple`
+    this.focusElementTag = i`md-focus-ring`
+    this.iconElementTag = i`md-icon`
+  }
+  /** @soyTemplate */
+  renderRipple() {
+    return n`<${this.rippleElementTag} ?disabled="${this.disabled}" unbounded> </${this.rippleElementTag}>`
+  }
+  /** @soyTemplate */
+  render() {
+    return y`<button
+        class="md3-icon-button ${o(this.getRenderClasses())}"
+        aria-label="${l$1(this.ariaLabel)}"
+        aria-haspopup="${l$1(this.ariaHasPopup)}"
+        ?disabled="${this.disabled}"
+        @focus="${this.handleFocus}"
+        @blur="${this.handleBlur}"
+        @pointerdown="${this.handlePointerDown}"
+        @pointerup="${this.handlePointerUp}"
+        @pointercancel="${this.handlePointerCancel}"
+        @pointerleave="${this.handlePointerLeave}"
+        @pointerenter="${this.handlePointerEnter}"
+        @click="${this.handleClick}"
+        @contextmenu="${this.handleContextMenu}">
+        ${this.renderFocusRing()}
+        ${this.renderRipple()}
+        <span class="md3-icon-button__icon">${this.renderIcon(this.icon)}</span>
+        ${this.renderTouchTarget()}
+        <span class="md3-icon-button__icon"><slot></slot></span>
+  </button>`
+  }
+  /** @soyTemplate */
+  getRenderClasses() {
+    return {
+      'md3-icon-button--flip-icon': this.flipIcon,
+    }
+  }
+  /** @soyTemplate */
+  renderIcon(icon) {
+    return icon
+      ? n`<${this.iconElementTag}>${icon}</${this.iconElementTag}>`
+      : ''
+  }
+  /** @soyTemplate */
+  renderTouchTarget() {
+    return y`<span class="md3-icon-button__touch"></span>`
+  }
+  /** @soyTemplate */
+  renderFocusRing() {
+    return n`<${this.focusElementTag} .visible="${this.showFocusRing}"></${this.focusElementTag}>`
+  }
+  connectedCallback() {
+    this.maybeFlipIconInRtl()
+    super.connectedCallback()
+  }
+  maybeFlipIconInRtl() {
+    if (!this.flipIconInRtl) return
+    const isRtl = getComputedStyle(this).getPropertyValue('direction') === 'rtl'
+    this.flipIcon = isRtl
+  }
+  beginPress({ positionEvent }) {
+    this.ripple.beginPress(positionEvent)
+  }
+  endPress(options) {
+    this.ripple.endPress()
+    super.endPress(options)
+  }
+  handlePointerDown(e) {
+    super.handlePointerDown(e)
+    pointerPress()
+    this.showFocusRing = shouldShowStrongFocus()
+  }
+  handlePointerEnter(e) {
+    this.ripple.beginHover(e)
+  }
+  handlePointerLeave(e) {
+    super.handlePointerLeave(e)
+    this.ripple.endHover()
+  }
+  handleFocus() {
+    this.showFocusRing = shouldShowStrongFocus()
+  }
+  handleBlur() {
+    this.showFocusRing = false
+  }
+}
+__decorate(
+  [e$2({ type: Boolean, reflect: true }), __metadata('design:type', Object)],
+  IconButton.prototype,
+  'disabled',
+  void 0
+)
+__decorate(
+  [e$2({ type: String }), __metadata('design:type', Object)],
+  IconButton.prototype,
+  'icon',
+  void 0
+)
+__decorate(
+  [e$2({ type: Boolean }), __metadata('design:type', Object)],
+  IconButton.prototype,
+  'flipIconInRtl',
+  void 0
+)
+__decorate(
+  [e$2({ type: Boolean }), __metadata('design:type', Object)],
+  IconButton.prototype,
+  'flipIcon',
+  void 0
+)
+__decorate(
+  [
+    ariaProperty, // tslint:disable-line:no-new-decorators
+    e$2({ type: String, attribute: 'aria-label' }),
+    __metadata('design:type', String),
+  ],
+  IconButton.prototype,
+  'ariaLabel',
+  void 0
+)
+__decorate(
+  [
+    ariaProperty, // tslint:disable-line:no-new-decorators
+    e$2({ type: String, attribute: 'aria-haspopup' }),
+    __metadata('design:type', String),
+  ],
+  IconButton.prototype,
+  'ariaHasPopup',
+  void 0
+)
+__decorate(
+  [i$2('button'), __metadata('design:type', HTMLElement)],
+  IconButton.prototype,
+  'buttonElement',
+  void 0
+)
+__decorate(
+  [i$2('md-ripple'), __metadata('design:type', MdRipple)],
+  IconButton.prototype,
+  'ripple',
+  void 0
+)
+__decorate(
+  [t$1(), __metadata('design:type', Object)],
+  IconButton.prototype,
+  'showFocusRing',
+  void 0
+)
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$1 = i$5`:host{display:inline-flex;outline:none;--md-focus-ring-container-outer-padding-vertical:0px;--md-focus-ring-container-outer-padding-horizontal:0px}:host([disabled]){pointer-events:none}.md3-icon-button{align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:flex;fill:currentColor;justify-content:center;outline:none;position:relative;text-decoration:none;user-select:none;z-index:0}.md3-icon-button i,.md3-icon-button svg,.md3-icon-button img,.md3-icon-button ::slotted(*){display:block}.md3-icon-button--flip-icon .md3-icon-button__icon{transform:scaleX(-1)}.md3-icon-button__icon{display:inline-flex}.md3-icon-button__icon.md3-icon-button__icon--on{display:none}.md3-icon-button--on .md3-icon-button__icon{display:none}.md3-icon-button--on .md3-icon-button__icon.md3-icon-button__icon--on{display:inline-flex}.md3-icon-button__link{height:100%;outline:none;position:absolute;width:100%}.md3-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}/*# sourceMappingURL=icon-button-styles.css.map */
+`
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles = i$5`.md3-icon-button--standard{background-color:rgba(0,0,0,0)}.md3-icon-button--standard{font-size:var(--md-icon-button-icon-size, 24px);height:var(--md-icon-button-state-layer-size, 40px);width:var(--md-icon-button-state-layer-size, 40px);margin:max(0px,(48px - var(--md-icon-button-state-layer-size, 40px))/2);color:var(--md-icon-button-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-focus-state-layer-color:var(--md-icon-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-focus-state-layer-opacity:var(--md-icon-button-unselected-focus-state-layer-opacity, 0.08);--md-ripple-hover-state-layer-color:var(--md-icon-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-hover-state-layer-opacity:var(--md-icon-button-unselected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-state-layer-color:var(--md-icon-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-pressed-state-layer-opacity:var(--md-icon-button-unselected-pressed-state-layer-opacity, 0.12)}.md3-icon-button--standard i,.md3-icon-button--standard svg,.md3-icon-button--standard img{height:var(--md-icon-button-icon-size, 24px);width:var(--md-icon-button-icon-size, 24px)}.md3-icon-button--standard:disabled{color:var(--md-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--standard:focus{color:var(--md-icon-button-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--standard:hover{color:var(--md-icon-button-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--standard:not(:disabled):active{color:var(--md-icon-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--standard.md3-icon-button--on{color:var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--standard.md3-icon-button--on:disabled{color:var(--md-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--standard.md3-icon-button--on:focus{color:var(--md-icon-button-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--standard.md3-icon-button--on:hover{color:var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--standard.md3-icon-button--on:not(:disabled):active{color:var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--standard.md3-icon-button--on{--md-ripple-focus-state-layer-color:var(--md-icon-button-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-opacity:var(--md-icon-button-selected-focus-state-layer-opacity, 0.12);--md-ripple-hover-state-layer-color:var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-opacity:var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-state-layer-color:var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-opacity:var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12)}/*# sourceMappingURL=standard-styles.css.map */
+`
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/** @soyCompatible */
+let MdStandardIconButton = class MdStandardIconButton extends IconButton {
+  /** @soyTemplate */
+  getRenderClasses() {
+    return {
+      ...super.getRenderClasses(),
+      'md3-icon-button--standard': true,
+    }
+  }
+}
+MdStandardIconButton.styles = [styles$1, styles]
+MdStandardIconButton = __decorate(
+  [e$3('md-standard-icon-button')],
+  MdStandardIconButton
+)
+
+// "Inject" XState context into components with DOM events
+const setContext = (providerElement, context) => {
+  providerElement.addEventListener('request', event => {
+    const { detail } = event
+    detail.context = context
+    event.stopPropagation()
+  })
+}
+function InjectContext() {
+  return (target, name) => {
+    const property = {
+      get() {
+        const event = new CustomEvent('request', {
+          detail: {},
+          bubbles: true,
+          composed: true,
+        })
+        // @ts-ignore
+        this.dispatchEvent(event)
+        return event.detail.context
+      },
+    }
+    Object.defineProperty(target, name, property)
+    return target
+  }
+}
+
+let CollapseUi = class CollapseUi extends s$1 {
+  render() {
+    return y`
+      <md-standard-icon-button @click=${this.toggleUi}>
+        <img src="${optimizedSVGDataUri$5}" alt="toggle" class="icon" />
+      </md-standard-icon-button>
+    `
+  }
+  toggleUi() {
+    this.context.service.send('TOGGLE_UI_COLLAPSED')
+  }
+}
+CollapseUi.styles = i$5`
+    .icon {
+      width: 100%;
+    }
+  `
+__decorate([InjectContext()], CollapseUi.prototype, 'context', void 0)
+CollapseUi = __decorate([e$3('collapse-ui')], CollapseUi)
+
+var makeElement = function makeElement(htmlString) {
+  var template = document.createElement('template')
+  template.innerHTML = htmlString
+  return template.content.firstElementChild
+}
+
 function createInterface(context) {
   context.viewContainers = new Map()
   var viewContainer = document.createElement('div')
   viewContainer.className = ''.concat(style.viewContainer)
   context.viewContainers.set('volume', viewContainer)
   context.rootContainer.appendChild(viewContainer)
+  setContext(viewContainer, context)
   var viewport = document.createElement('div')
   viewContainer.appendChild(viewport)
   viewport.setAttribute('class', style.viewport)
@@ -18061,16 +21161,64 @@ function createInterface(context) {
     context.uiContainer = uiContainer
     viewport.appendChild(uiContainer)
   } else {
-    // if somehow already set (by non reference configured UI?)
+    // if somehow already set (by non reference-ui from config obj?)
     viewport.appendChild(context.uiContainer)
   }
 
   if (!context.uiGroups) {
-    // String to UI group element map
+    // String to UI group element
     context.uiGroups = new Map()
   }
 
-  createCollapseUIButton(context)
+  var collapseUIButton = makeElement('\n    <collapse-ui />\n  ')
+  context.uiContainer.appendChild(collapseUIButton)
+}
+
+function toggleUICollapsed(context, event, actionMeta) {
+  if (!context.uiContainer) {
+    return
+  }
+
+  if (actionMeta) {
+    context.uiCollapsed =
+      actionMeta.state.value.active.uiCollapsed === 'enabled'
+  }
+
+  if (context.uiCollapsed) {
+    applyGroupVisibility(
+      context,
+      [
+        'main',
+        'layers',
+        'widgets',
+        'images',
+        'labelImages',
+        'labelImageWeights',
+      ],
+      !context.uiCollapsed
+    )
+  } else {
+    applyGroupVisibility(
+      context,
+      ['main', 'layers', 'widgets'],
+      !context.uiCollapsed
+    )
+
+    if (context.images.selectedName) {
+      context.service.send({
+        type: 'SELECT_LAYER',
+        data: context.images.selectedName,
+      })
+    }
+  }
+
+  if (!context.use2D && !!context.main.planeUIGroup) {
+    if (context.uiCollapsed && context.main.viewMode === 'Volume') {
+      context.main.planeUIGroup.style.display = 'none'
+    } else {
+      context.main.planeUIGroup.style.display = 'block'
+    }
+  }
 }
 
 var referenceUIMachineOptions = {
diff --git a/src/UI/reference-ui/package-lock.json b/src/UI/reference-ui/package-lock.json
index 26864512b..007a3fa0f 100644
--- a/src/UI/reference-ui/package-lock.json
+++ b/src/UI/reference-ui/package-lock.json
@@ -10,21 +10,25 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.17.6",
+        "@material/web": "^0.1.0-alpha.0",
         "itk-viewer-color-maps": "^1.2.0",
         "itk-viewer-icons": "^11.13.0",
-        "itk-viewer-transfer-function-editor": "^1.2.2"
+        "itk-viewer-transfer-function-editor": "^1.2.2",
+        "lit": "^2.4.0"
       },
       "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.17.0",
         "@rollup/plugin-commonjs": "^21.0.2",
         "@rollup/plugin-node-resolve": "^13.0.0",
+        "@rollup/plugin-typescript": "^9.0.2",
         "autoprefixer": "^10.4.4",
         "postcss": "^8.4.12",
         "rollup": "^2.70.1",
         "rollup-plugin-ignore": "^1.0.10",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-svgo": "^2.0.0",
-        "rollup-plugin-terser": "^7.0.2"
+        "rollup-plugin-terser": "^7.0.2",
+        "typescript": "^4.8.4"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -468,6 +472,20 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz",
+      "integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw=="
+    },
+    "node_modules/@material/web": {
+      "version": "0.1.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-0.1.0-alpha.0.tgz",
+      "integrity": "sha512-GNsNyWOtYKezXwvrD1ZBfnOHClVya31ZEQH1O83+PsPqlVZK6cBfnf1cwJmEFQ6FezB6q6q+cHGGqx0lb90Jug==",
+      "dependencies": {
+        "lit": "^2.3.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@rollup/plugin-commonjs": {
       "version": "21.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-21.1.0.tgz",
@@ -509,6 +527,60 @@
         "rollup": "^2.42.0"
       }
     },
+    "node_modules/@rollup/plugin-typescript": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-9.0.2.tgz",
+      "integrity": "sha512-/sS93vmHUMjzDUsl5scNQr1mUlNE1QjBBvOhmRwJCH8k2RRhDIm3c977B3wdu3t3Ap17W6dDeXP3hj1P1Un1bA==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.1",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.14.0||^3.0.0",
+        "tslib": "*",
+        "typescript": ">=3.7.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        },
+        "tslib": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-typescript/node_modules/@rollup/pluginutils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/plugin-typescript/node_modules/@types/estree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+      "dev": true
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -562,6 +634,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+    },
     "node_modules/acorn": {
       "version": "8.7.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
@@ -1403,6 +1480,33 @@
         "node": ">=10"
       }
     },
+    "node_modules/lit": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.4.0.tgz",
+      "integrity": "sha512-fdgzxEtLrZFQU/BqTtxFQCLwlZd9bdat+ltzSFjvWkZrs7eBmeX0L5MHUMb3kYIkuS8Xlfnii/iI5klirF8/Xg==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.4.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.4.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz",
+      "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.4.0.tgz",
+      "integrity": "sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/loader-utils": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.0.tgz",
@@ -2564,6 +2668,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "node_modules/typescript": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
+      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz",
@@ -2955,6 +3077,20 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@lit/reactive-element": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz",
+      "integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw=="
+    },
+    "@material/web": {
+      "version": "0.1.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-0.1.0-alpha.0.tgz",
+      "integrity": "sha512-GNsNyWOtYKezXwvrD1ZBfnOHClVya31ZEQH1O83+PsPqlVZK6cBfnf1cwJmEFQ6FezB6q6q+cHGGqx0lb90Jug==",
+      "requires": {
+        "lit": "^2.3.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "@rollup/plugin-commonjs": {
       "version": "21.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-21.1.0.tgz",
@@ -2984,6 +3120,35 @@
         "resolve": "^1.19.0"
       }
     },
+    "@rollup/plugin-typescript": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-9.0.2.tgz",
+      "integrity": "sha512-/sS93vmHUMjzDUsl5scNQr1mUlNE1QjBBvOhmRwJCH8k2RRhDIm3c977B3wdu3t3Ap17W6dDeXP3hj1P1Un1bA==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^5.0.1",
+        "resolve": "^1.22.1"
+      },
+      "dependencies": {
+        "@rollup/pluginutils": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+          "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+          "dev": true,
+          "requires": {
+            "@types/estree": "^1.0.0",
+            "estree-walker": "^2.0.2",
+            "picomatch": "^2.3.1"
+          }
+        },
+        "@types/estree": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+          "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+          "dev": true
+        }
+      }
+    },
     "@rollup/pluginutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
@@ -3030,6 +3195,11 @@
         "@types/node": "*"
       }
     },
+    "@types/trusted-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+      "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+    },
     "acorn": {
       "version": "8.7.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
@@ -3645,6 +3815,33 @@
       "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
       "dev": true
     },
+    "lit": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.4.0.tgz",
+      "integrity": "sha512-fdgzxEtLrZFQU/BqTtxFQCLwlZd9bdat+ltzSFjvWkZrs7eBmeX0L5MHUMb3kYIkuS8Xlfnii/iI5klirF8/Xg==",
+      "requires": {
+        "@lit/reactive-element": "^1.4.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.4.0"
+      }
+    },
+    "lit-element": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz",
+      "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==",
+      "requires": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "lit-html": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.4.0.tgz",
+      "integrity": "sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==",
+      "requires": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "loader-utils": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.0.tgz",
@@ -4457,6 +4654,17 @@
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
       "dev": true
     },
+    "tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "typescript": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
+      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
+      "dev": true
+    },
     "update-browserslist-db": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz",
diff --git a/src/UI/reference-ui/package.json b/src/UI/reference-ui/package.json
index e1a59f4b3..80b982098 100644
--- a/src/UI/reference-ui/package.json
+++ b/src/UI/reference-ui/package.json
@@ -27,18 +27,22 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-typescript": "^9.0.2",
     "autoprefixer": "^10.4.4",
     "postcss": "^8.4.12",
     "rollup": "^2.70.1",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svgo": "^2.0.0",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.8.4"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.6",
+    "@material/web": "^0.1.0-alpha.0",
     "itk-viewer-color-maps": "^1.2.0",
     "itk-viewer-icons": "^11.13.0",
-    "itk-viewer-transfer-function-editor": "^1.2.2"
+    "itk-viewer-transfer-function-editor": "^1.2.2",
+    "lit": "^2.4.0"
   }
 }
diff --git a/src/UI/reference-ui/rollup.config.js b/src/UI/reference-ui/rollup.config.js
index bc95477a6..1734fc447 100644
--- a/src/UI/reference-ui/rollup.config.js
+++ b/src/UI/reference-ui/rollup.config.js
@@ -7,6 +7,7 @@ import commonjs from '@rollup/plugin-commonjs'
 import { terser } from 'rollup-plugin-terser'
 import { babel } from '@rollup/plugin-babel'
 import ignore from 'rollup-plugin-ignore'
+import typescript from '@rollup/plugin-typescript'
 
 export default {
   input: 'src/referenceUIMachineOptions.js',
@@ -24,6 +25,7 @@ export default {
     commonjs({
       transformMixedEsModules: true,
     }),
+    typescript(),
     babel({
       include: ['src/**'],
       extensions: ['.js'],
diff --git a/src/UI/reference-ui/src/ItkVtkViewer.module.css b/src/UI/reference-ui/src/ItkVtkViewer.module.css
index adf22c99b..dd5811278 100644
--- a/src/UI/reference-ui/src/ItkVtkViewer.module.css
+++ b/src/UI/reference-ui/src/ItkVtkViewer.module.css
@@ -352,11 +352,6 @@
   -webkit-filter: invert(100%);
 }
 
-.collapseUIButton {
-  width: 1.5em;
-  cursor: pointer;
-}
-
 .screenshotButton {
   flex: 1;
   width: 8mm;
diff --git a/src/UI/reference-ui/src/collapse-ui.ts b/src/UI/reference-ui/src/collapse-ui.ts
new file mode 100644
index 000000000..2fac32069
--- /dev/null
+++ b/src/UI/reference-ui/src/collapse-ui.ts
@@ -0,0 +1,29 @@
+import { LitElement, html, css } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import '@material/web/iconbutton/standard-icon-button.js'
+
+import { toggleIconDataUri } from 'itk-viewer-icons'
+import { InjectContext } from './context'
+
+@customElement('collapse-ui')
+class CollapseUi extends LitElement {
+  @InjectContext() context: any
+
+  static styles = css`
+    .icon {
+      width: 100%;
+    }
+  `
+
+  render() {
+    return html`
+      <md-standard-icon-button @click=${this.toggleUi}>
+        <img src="${toggleIconDataUri}" alt="toggle" class="icon" />
+      </md-standard-icon-button>
+    `
+  }
+
+  toggleUi() {
+    this.context.service.send('TOGGLE_UI_COLLAPSED')
+  }
+}
diff --git a/src/UI/reference-ui/src/context.ts b/src/UI/reference-ui/src/context.ts
new file mode 100644
index 000000000..022cf3959
--- /dev/null
+++ b/src/UI/reference-ui/src/context.ts
@@ -0,0 +1,36 @@
+// "Inject" XState context into components with DOM events
+
+type AppContext = unknown
+
+interface GetContextEvent extends Event {
+  detail: { context?: AppContext }
+}
+
+export const setContext = (providerElement: Element, context: AppContext) => {
+  providerElement.addEventListener('request', event => {
+    const { detail } = (event as unknown) as GetContextEvent
+    detail.context = context
+    event.stopPropagation()
+  })
+}
+
+export function InjectContext(): (target: any, name: string) => any {
+  return (target: any, name: string): any => {
+    const property = {
+      get(): any {
+        const event = new CustomEvent('request', {
+          detail: {},
+          bubbles: true,
+          composed: true,
+        }) as GetContextEvent
+        // @ts-ignore
+        this.dispatchEvent(event)
+        return event.detail.context
+      },
+    }
+
+    Object.defineProperty(target, name, property)
+
+    return target
+  }
+}
diff --git a/src/UI/reference-ui/src/createCollapseUIButton.js b/src/UI/reference-ui/src/createCollapseUIButton.js
deleted file mode 100644
index 9997e4503..000000000
--- a/src/UI/reference-ui/src/createCollapseUIButton.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import style from './ItkVtkViewer.module.css'
-
-import { toggleIconDataUri } from 'itk-viewer-icons'
-import applyContrastSensitiveStyleToElement from './applyContrastSensitiveStyleToElement'
-import toggleUICollapsed from './toggleUICollapsed'
-
-function createCollapseUIButton(context) {
-  const collapseUIButton = document.createElement('div')
-  collapseUIButton.className = `${style.collapseUIButton}`
-  applyContrastSensitiveStyleToElement(
-    context,
-    'invertibleButton',
-    collapseUIButton
-  )
-
-  collapseUIButton.id = `${context.id}-collapseUIButton`
-  collapseUIButton.innerHTML = `<img src="${toggleIconDataUri}" alt="toggle"/>`
-
-  toggleUICollapsed(context)
-
-  collapseUIButton.addEventListener('click', event => {
-    event.preventDefault()
-    event.stopPropagation()
-    context.service.send('TOGGLE_UI_COLLAPSED')
-  })
-
-  context.main.collapseUIButton = collapseUIButton
-  context.uiContainer.appendChild(collapseUIButton)
-}
-
-export default createCollapseUIButton
diff --git a/src/UI/reference-ui/src/createInterface.js b/src/UI/reference-ui/src/createInterface.js
index 0df28e7e0..8a4f2520a 100644
--- a/src/UI/reference-ui/src/createInterface.js
+++ b/src/UI/reference-ui/src/createInterface.js
@@ -1,6 +1,13 @@
 import style from './ItkVtkViewer.module.css'
 
-import createCollapseUIButton from './createCollapseUIButton'
+import './collapse-ui'
+import { setContext } from './context'
+
+const makeElement = htmlString => {
+  const template = document.createElement('template')
+  template.innerHTML = htmlString
+  return template.content.firstElementChild
+}
 
 function createInterface(context) {
   context.viewContainers = new Map()
@@ -8,6 +15,7 @@ function createInterface(context) {
   viewContainer.className = `${style.viewContainer}`
   context.viewContainers.set('volume', viewContainer)
   context.rootContainer.appendChild(viewContainer)
+  setContext(viewContainer, context)
 
   const viewport = document.createElement('div')
   viewContainer.appendChild(viewport)
@@ -23,16 +31,19 @@ function createInterface(context) {
     context.uiContainer = uiContainer
     viewport.appendChild(uiContainer)
   } else {
-    // if somehow already set (by non reference configured UI?)
+    // if somehow already set (by non reference-ui from config obj?)
     viewport.appendChild(context.uiContainer)
   }
 
   if (!context.uiGroups) {
-    // String to UI group element map
+    // String to UI group element
     context.uiGroups = new Map()
   }
 
-  createCollapseUIButton(context)
+  const collapseUIButton = makeElement(`
+    <collapse-ui />
+  `)
+  context.uiContainer.appendChild(collapseUIButton)
 }
 
 export default createInterface
diff --git a/src/UI/reference-ui/src/shims.d.ts b/src/UI/reference-ui/src/shims.d.ts
new file mode 100644
index 000000000..4c46e0c3e
--- /dev/null
+++ b/src/UI/reference-ui/src/shims.d.ts
@@ -0,0 +1 @@
+declare module '*'
diff --git a/src/UI/reference-ui/tsconfig.json b/src/UI/reference-ui/tsconfig.json
new file mode 100644
index 000000000..d442a082a
--- /dev/null
+++ b/src/UI/reference-ui/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "target": "es2019",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "lib": ["es2019", "dom"],
+    "declaration": true,
+    "declarationMap": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "strict": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/*.spec.ts"]
+}
diff --git a/test/createViewerTest.js b/test/createViewerTest.js
index 9effdc2e0..4c9843eb4 100644
--- a/test/createViewerTest.js
+++ b/test/createViewerTest.js
@@ -6,7 +6,8 @@ import testUtils from 'vtk.js/Sources/Testing/testUtils'
 import vtk from 'vtk.js/Sources/vtk'
 
 import createViewer from '../src/createViewer'
-import referenceUIMachineOptions from '../src/UI/reference-ui/src/referenceUIMachineOptions'
+import './customElementsDefineOverride.js'
+import referenceUIMachineOptions from '../src/UI/reference-ui'
 
 const testImage3DPath = 'base/test/data/input/HeadMRVolume.nrrd'
 const testLabelImage3DPath = 'base/test/data/input/HeadMRVolumeLabels.nrrd'
diff --git a/test/customElementsDefineOverride.js b/test/customElementsDefineOverride.js
new file mode 100644
index 000000000..a154642b5
--- /dev/null
+++ b/test/customElementsDefineOverride.js
@@ -0,0 +1,23 @@
+// Avoids error importing config UIs multiple times in tests
+// customElements.define will be called multiple times buy Material-Web components
+
+function safeDecorator(fn) {
+  return function(...args) {
+    try {
+      return fn.apply(this, args)
+    } catch (error) {
+      if (
+        error instanceof DOMException &&
+        [
+          'has already been used with this registry', // Chrome
+          'has already been defined as a custom element', // Firefox
+        ].some(msg => error.message.includes(msg))
+      ) {
+        return false
+      }
+      throw error
+    }
+  }
+}
+
+customElements.define = safeDecorator(customElements.define)
diff --git a/test/test-ui-rollup.config.js b/test/test-ui-rollup.config.js
index 2238ff844..185ef10aa 100644
--- a/test/test-ui-rollup.config.js
+++ b/test/test-ui-rollup.config.js
@@ -6,11 +6,19 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import { babel } from '@rollup/plugin-babel'
 import ignore from 'rollup-plugin-ignore'
+import typescript from '@rollup/plugin-typescript'
 
 export default {
   input: 'test/testUINoPlaneSliders.js',
   output: { file: 'test/testUINoPlaneSlidersBundle.js', format: 'es' },
   plugins: [
+    typescript({
+      tsconfig: 'src/UI/reference-ui/tsconfig.json',
+      compilerOptions: {
+        declaration: false,
+        declarationMap: false,
+      },
+    }),
     // ignore crypto module
     ignore(['crypto']),
     commonjs({
diff --git a/test/testUINoPlaneSliders.js b/test/testUINoPlaneSliders.js
index 7ceeff6b5..b6789f4e3 100644
--- a/test/testUINoPlaneSliders.js
+++ b/test/testUINoPlaneSliders.js
@@ -1,3 +1,4 @@
+import './customElementsDefineOverride.js'
 import referenceUIMachineOptions from '../src/UI/reference-ui/src/referenceUIMachineOptions.js'
 
 import style from '../src/UI/reference-ui/src/ItkVtkViewer.module.css'
diff --git a/tsconfig.json b/tsconfig.json
index 45e7c9e13..473c1aa86 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,5 +13,6 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true
   },
-  "include": ["src/**/*"]
+  "include": ["src/**/*"],
+  "exclude": ["src/UI/reference-ui/src/**"]
 }