From 4fde04476ea1ea6911ae40b926b4a51f891d1d26 Mon Sep 17 00:00:00 2001
From: Sonika <kumari.sonika@seryfertsoft.com>
Date: Mon, 19 Feb 2024 08:20:23 +0530
Subject: [PATCH] poc changes

---
 README.md         |   2 +
 package-lock.json | 727 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   2 +
 src/App.svelte    | 260 +++++++----------
 4 files changed, 842 insertions(+), 149 deletions(-)

diff --git a/README.md b/README.md
index 20a244c..339350d 100644
--- a/README.md
+++ b/README.md
@@ -2,3 +2,5 @@
 npm install
 
 npm run dev
+
+<!-- npm cache clean --force -->
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a2b3145..7b126b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,13 @@
       "name": "svelte-app",
       "version": "1.0.0",
       "dependencies": {
+        "@smui/common": "^7.0.0-beta.16",
         "sirv-cli": "^0.4.4"
       },
       "devDependencies": {
         "@rollup/plugin-commonjs": "11.0.2",
         "@rollup/plugin-node-resolve": "^7.0.0",
+        "@smui/button": "^7.0.0-beta.16",
         "rollup": "^1.20.0",
         "rollup-plugin-livereload": "^1.0.0",
         "rollup-plugin-svelte": "^5.0.3",
@@ -20,6 +22,19 @@
         "svelte": "^3.0.0"
       }
     },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
@@ -46,6 +61,223 @@
         "js-tokens": "^4.0.0"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "peer": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.22",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
+      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@material/animation": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/animation/-/animation-14.0.0.tgz",
+      "integrity": "sha512-VlYSfUaIj/BBVtRZI8Gv0VvzikFf+XgK0Zdgsok5c1v5DDnNz5tpB8mnGrveWz0rHbp1X4+CWLKrTwNmjrw3Xw==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/base": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/base/-/base-14.0.0.tgz",
+      "integrity": "sha512-Ou7vS7n1H4Y10MUZyYAbt6H0t67c6urxoCgeVT7M38aQlaNUwFMODp7KT/myjYz2YULfhu3PtfSV3Sltgac9mA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/button": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/button/-/button-14.0.0.tgz",
+      "integrity": "sha512-dqqHaJq0peyXBZupFzCjmvScrfljyVU66ZCS3oldsaaj5iz8sn33I/45Z4zPzdR5F5z8ExToHkRcXhakj1UEAA==",
+      "dev": true,
+      "dependencies": {
+        "@material/density": "^14.0.0",
+        "@material/dom": "^14.0.0",
+        "@material/elevation": "^14.0.0",
+        "@material/feature-targeting": "^14.0.0",
+        "@material/focus-ring": "^14.0.0",
+        "@material/ripple": "^14.0.0",
+        "@material/rtl": "^14.0.0",
+        "@material/shape": "^14.0.0",
+        "@material/theme": "^14.0.0",
+        "@material/tokens": "^14.0.0",
+        "@material/touch-target": "^14.0.0",
+        "@material/typography": "^14.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/density": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/density/-/density-14.0.0.tgz",
+      "integrity": "sha512-NlxXBV5XjNsKd8UXF4K/+fOXLxoFNecKbsaQO6O2u+iG8QBfFreKRmkhEBb2hPPwC3w8nrODwXX0lHV+toICQw==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/dom": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/dom/-/dom-14.0.0.tgz",
+      "integrity": "sha512-8t88XyacclTj8qsIw9q0vEj4PI2KVncLoIsIMzwuMx49P2FZg6TsLjor262MI3Qs00UWAifuLMrhnOnfyrbe7Q==",
+      "dependencies": {
+        "@material/feature-targeting": "^14.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/elevation": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-14.0.0.tgz",
+      "integrity": "sha512-Di3tkxTpXwvf1GJUmaC8rd+zVh5dB2SWMBGagL4+kT8UmjSISif/OPRGuGnXs3QhF6nmEjkdC0ijdZLcYQkepw==",
+      "dev": true,
+      "dependencies": {
+        "@material/animation": "^14.0.0",
+        "@material/base": "^14.0.0",
+        "@material/feature-targeting": "^14.0.0",
+        "@material/rtl": "^14.0.0",
+        "@material/theme": "^14.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/feature-targeting": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-14.0.0.tgz",
+      "integrity": "sha512-a5WGgHEq5lJeeNL5yevtgoZjBjXWy6+klfVWQEh8oyix/rMJygGgO7gEc52uv8fB8uAIoYEB3iBMOv8jRq8FeA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/focus-ring": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/focus-ring/-/focus-ring-14.0.0.tgz",
+      "integrity": "sha512-fqqka6iSfQGJG3Le48RxPCtnOiaLGPDPikhktGbxlyW9srBVMgeCiONfHM7IT/1eu80O0Y67Lh/4ohu5+C+VAQ==",
+      "dev": true,
+      "dependencies": {
+        "@material/dom": "^14.0.0",
+        "@material/feature-targeting": "^14.0.0",
+        "@material/rtl": "^14.0.0"
+      }
+    },
+    "node_modules/@material/ripple": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-14.0.0.tgz",
+      "integrity": "sha512-9XoGBFd5JhFgELgW7pqtiLy+CnCIcV2s9cQ2BWbOQeA8faX9UZIDUx/g76nHLZ7UzKFtsULJxZTwORmsEt2zvw==",
+      "dev": true,
+      "dependencies": {
+        "@material/animation": "^14.0.0",
+        "@material/base": "^14.0.0",
+        "@material/dom": "^14.0.0",
+        "@material/feature-targeting": "^14.0.0",
+        "@material/rtl": "^14.0.0",
+        "@material/theme": "^14.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/rtl": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-14.0.0.tgz",
+      "integrity": "sha512-xl6OZYyRjuiW2hmbjV2omMV8sQtfmKAjeWnD1RMiAPLCTyOW9Lh/PYYnXjxUrNa0cRwIIbOn5J7OYXokja8puA==",
+      "dev": true,
+      "dependencies": {
+        "@material/theme": "^14.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/shape": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/shape/-/shape-14.0.0.tgz",
+      "integrity": "sha512-o0mJB0+feOv473KckI8gFnUo8IQAaEA6ynXzw3VIYFjPi48pJwrxa0mZcJP/OoTXrCbDzDeFJfDPXEmRioBb9A==",
+      "dev": true,
+      "dependencies": {
+        "@material/feature-targeting": "^14.0.0",
+        "@material/rtl": "^14.0.0",
+        "@material/theme": "^14.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/theme": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/theme/-/theme-14.0.0.tgz",
+      "integrity": "sha512-6/SENWNIFuXzeHMPHrYwbsXKgkvCtWuzzQ3cUu4UEt3KcQ5YpViazIM6h8ByYKZP8A9d8QpkJ0WGX5btGDcVoA==",
+      "dev": true,
+      "dependencies": {
+        "@material/feature-targeting": "^14.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/tokens": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/tokens/-/tokens-14.0.0.tgz",
+      "integrity": "sha512-SXgB9VwsKW4DFkHmJfDIS0x0cGdMWC1D06m6z/WQQ5P5j6/m0pKrbHVlrLzXcRjau+mFhXGvj/KyPo9Pp/Rc8Q==",
+      "dev": true,
+      "dependencies": {
+        "@material/elevation": "^14.0.0"
+      }
+    },
+    "node_modules/@material/touch-target": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-14.0.0.tgz",
+      "integrity": "sha512-o3kvxmS4HkmZoQTvtzLJrqSG+ezYXkyINm3Uiwio1PTg67pDgK5FRwInkz0VNaWPcw9+5jqjUQGjuZMtjQMq8w==",
+      "dev": true,
+      "dependencies": {
+        "@material/base": "^14.0.0",
+        "@material/feature-targeting": "^14.0.0",
+        "@material/rtl": "^14.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/typography": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@material/typography/-/typography-14.0.0.tgz",
+      "integrity": "sha512-/QtHBYiTR+TPMryM/CT386B2WlAQf/Ae32V324Z7P40gHLKY/YBXx7FDutAWZFeOerq/two4Nd2aAHBcMM2wMw==",
+      "dev": true,
+      "dependencies": {
+        "@material/feature-targeting": "^14.0.0",
+        "@material/theme": "^14.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz",
@@ -106,6 +338,316 @@
         "rollup": "^1.20.0||^2.0.0"
       }
     },
+    "node_modules/@smui/button": {
+      "version": "7.0.0-beta.16",
+      "resolved": "https://registry.npmjs.org/@smui/button/-/button-7.0.0-beta.16.tgz",
+      "integrity": "sha512-Zci9DIcXhzqjjXXtoowLyUY5+c0way3PtO3MjWsr+BnVjMwItehuGowQZqsBqpsg1PzQ+E8JoSXSKUT+3oAZVg==",
+      "dev": true,
+      "dependencies": {
+        "@material/button": "^14.0.0",
+        "@material/elevation": "^14.0.0",
+        "@material/feature-targeting": "^14.0.0",
+        "@material/ripple": "^14.0.0",
+        "@material/shape": "^14.0.0",
+        "@material/theme": "^14.0.0",
+        "@smui/common": "^7.0.0-beta.16",
+        "@smui/ripple": "^7.0.0-beta.16",
+        "svelte2tsx": "^0.6.27"
+      }
+    },
+    "node_modules/@smui/button/node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@smui/button/node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/@smui/button/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@smui/button/node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@smui/button/node_modules/magic-string": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+      "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@smui/button/node_modules/svelte": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.11.tgz",
+      "integrity": "sha512-YIQk3J4X89wOLhjsqIW8tqY3JHPuBdtdOIkASP2PZeAMcSW9RsIjQzMesCrxOF3gdWYC0mKknlKF7OqmLM+Zqg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^4.0.0",
+        "code-red": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.1",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.4",
+        "periscopic": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@smui/button/node_modules/svelte2tsx": {
+      "version": "0.6.27",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.27.tgz",
+      "integrity": "sha512-E1uPW1o6VsbRz+nUk3fznZ2lSmCITAJoNu8AYefWSvIwE2pSB01i5sId4RMbWNzfcwCQl1DcgGShCPcldl4rvg==",
+      "dev": true,
+      "dependencies": {
+        "dedent-js": "^1.0.1",
+        "pascal-case": "^3.1.1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
+        "typescript": "^4.9.4 || ^5.0.0"
+      }
+    },
+    "node_modules/@smui/common": {
+      "version": "7.0.0-beta.16",
+      "resolved": "https://registry.npmjs.org/@smui/common/-/common-7.0.0-beta.16.tgz",
+      "integrity": "sha512-PpqhIAWtE6ZZ6XyIkzHGXdMk+iE4QLFdzYXf20cG13O/0bFjOV5ySk2g+Vq2ZWRJawIjMaPcekbCkkowna4vgg==",
+      "dependencies": {
+        "@material/dom": "^14.0.0",
+        "svelte2tsx": "^0.6.27"
+      }
+    },
+    "node_modules/@smui/common/node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "peer": true
+    },
+    "node_modules/@smui/common/node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/@smui/common/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@smui/common/node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@smui/common/node_modules/magic-string": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+      "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@smui/common/node_modules/svelte": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.11.tgz",
+      "integrity": "sha512-YIQk3J4X89wOLhjsqIW8tqY3JHPuBdtdOIkASP2PZeAMcSW9RsIjQzMesCrxOF3gdWYC0mKknlKF7OqmLM+Zqg==",
+      "peer": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^4.0.0",
+        "code-red": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.1",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.4",
+        "periscopic": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@smui/common/node_modules/svelte2tsx": {
+      "version": "0.6.27",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.27.tgz",
+      "integrity": "sha512-E1uPW1o6VsbRz+nUk3fznZ2lSmCITAJoNu8AYefWSvIwE2pSB01i5sId4RMbWNzfcwCQl1DcgGShCPcldl4rvg==",
+      "dependencies": {
+        "dedent-js": "^1.0.1",
+        "pascal-case": "^3.1.1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
+        "typescript": "^4.9.4 || ^5.0.0"
+      }
+    },
+    "node_modules/@smui/ripple": {
+      "version": "7.0.0-beta.16",
+      "resolved": "https://registry.npmjs.org/@smui/ripple/-/ripple-7.0.0-beta.16.tgz",
+      "integrity": "sha512-HULlv8zdEOvexw9Ob7senmk8cAuHZ3usaCruWclOSVBesKHDIODRpIusFCnoFv2Gk4PVjsDRCIvk1lzRWRjEUQ==",
+      "dev": true,
+      "dependencies": {
+        "@material/dom": "^14.0.0",
+        "@material/ripple": "^14.0.0",
+        "@smui/common": "^7.0.0-beta.16",
+        "svelte2tsx": "^0.6.27"
+      }
+    },
+    "node_modules/@smui/ripple/node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@smui/ripple/node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/@smui/ripple/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@smui/ripple/node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@smui/ripple/node_modules/magic-string": {
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+      "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@smui/ripple/node_modules/svelte": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.11.tgz",
+      "integrity": "sha512-YIQk3J4X89wOLhjsqIW8tqY3JHPuBdtdOIkASP2PZeAMcSW9RsIjQzMesCrxOF3gdWYC0mKknlKF7OqmLM+Zqg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.9.0",
+        "aria-query": "^5.3.0",
+        "axobject-query": "^4.0.0",
+        "code-red": "^1.0.3",
+        "css-tree": "^2.3.1",
+        "estree-walker": "^3.0.3",
+        "is-reference": "^3.0.1",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.4",
+        "periscopic": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@smui/ripple/node_modules/svelte2tsx": {
+      "version": "0.6.27",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.27.tgz",
+      "integrity": "sha512-E1uPW1o6VsbRz+nUk3fznZ2lSmCITAJoNu8AYefWSvIwE2pSB01i5sId4RMbWNzfcwCQl1DcgGShCPcldl4rvg==",
+      "dev": true,
+      "dependencies": {
+        "dedent-js": "^1.0.1",
+        "pascal-case": "^3.1.1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
+        "typescript": "^4.9.4 || ^5.0.0"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@@ -164,12 +706,30 @@
         "node": ">= 8"
       }
     },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
     "node_modules/async-limiter": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
+    "node_modules/axobject-query": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
+      "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
@@ -241,6 +801,46 @@
         "fsevents": "~2.1.2"
       }
     },
+    "node_modules/code-red": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
+      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.10.0",
+        "estree-walker": "^3.0.3",
+        "periscopic": "^3.1.0"
+      }
+    },
+    "node_modules/code-red/node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "peer": true
+    },
+    "node_modules/code-red/node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/code-red/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -270,6 +870,33 @@
         "node": ">=4"
       }
     },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/dedent-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
+      "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ=="
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -469,6 +1096,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "peer": true
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -478,6 +1119,12 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "peer": true
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -503,6 +1150,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -518,12 +1174,56 @@
       "integrity": "sha512-hwZhzGGG/GQ7igxAVFOEun2N4fWul31qE9nfBdCnZGQCB5+L7tN9xZ+94B4aUpLOJx/of3zZs5XsuubayQYQjA==",
       "dev": true
     },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
       "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
       "dev": true
     },
+    "node_modules/periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "node_modules/periscopic/node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "peer": true
+    },
+    "node_modules/periscopic/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/periscopic/node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/picomatch": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
@@ -694,6 +1394,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.19",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
@@ -769,6 +1478,24 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "node_modules/typescript": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/ws": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
diff --git a/package.json b/package.json
index 267b670..dd0fd9c 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "11.0.2",
     "@rollup/plugin-node-resolve": "^7.0.0",
+    "@smui/button": "^7.0.0-beta.16",
     "rollup": "^1.20.0",
     "rollup-plugin-livereload": "^1.0.0",
     "rollup-plugin-svelte": "^5.0.3",
@@ -16,6 +17,7 @@
     "svelte": "^3.0.0"
   },
   "dependencies": {
+    "@smui/common": "^7.0.0-beta.16",
     "sirv-cli": "^0.4.4"
   }
 }
diff --git a/src/App.svelte b/src/App.svelte
index 6568e3e..de20ba1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,166 +1,128 @@
+
+  
 <script>
+	let people = [
+		{ first: 'Hans', last: 'Emil' },
+		{ first: 'Max', last: 'Mustermann' },
+		{ first: 'Roman', last: 'Tisch' }
+	];
 
-	let strength = 0;
-	let validations = []
+	let prefix = '';
+	let first = '';
+	let last = '';
+	let i = 0;
 
-	function validatePassword(e) {
-		const password = e.target.value
+	$: filteredPeople = prefix
+		? people.filter((person) => {
+				const name = `${person.last}, ${person.first}`;
+				return name.toLowerCase().startsWith(prefix.toLowerCase());
+		  })
+		: people;
 
-		validations = [
-			(password.length > 5),
-			(password.search(/[A-Z]/) > -1),
-			(password.search(/[0-9]/) > -1),
-			(password.search(/[&+,:;=?@#-]/) > -1)
-		]
+	$: selected = filteredPeople[i];
 
-		strength = validations.reduce((acc, cur) => acc + cur )
+	$: reset_inputs(selected);
+
+	function create() {
+		people = people.concat({ first, last });
+		i = people.length - 1;
+		first = last = '';
 	}
 
+	function update() {
+		selected.first = first;
+		selected.last = last;
+		people = people;
+	}
+
+	function remove() {
+		const index = people.indexOf(selected);
+		people = [...people.slice(0, index), ...people.slice(index + 1)];
+
+		first = last = '';
+		i = Math.min(i, filteredPeople.length - 2);
+	}
+
+	function reset_inputs(person) {
+		first = person ? person.first : '';
+		last = person ? person.last : '';
+	}
 </script>
 
+<div class="center-container">
+	<div class="container">
+
+<input placeholder="filter prefix" bind:value={prefix} />
+
+<select bind:value={i} size={5}>
+	{#each filteredPeople as person, i}
+		<option value={i}>{person.last}, {person.first}</option>
+	{/each}
+</select>
+
+<label><input bind:value={first} placeholder="first" /></label>
+<label><input bind:value={last} placeholder="last" /></label>
+
+<div class="buttons">
+	<button on:click={create} disabled={!first || !last}>create</button>
+	<button on:click={update} disabled={!first || !last || !selected}>update</button>
+	<button on:click={remove} disabled={!selected}>delete</button>
+</div>
+
+</div>
+</div>
 <style>
-	form {
-		--text-color: #afafaf;
-		max-width: 500px;
+	.center-container {
+	  display: flex;
+	  justify-content: center;
+	  align-items: center;
+	  height: 100vh;
+	  background-color: #ffffff; 
+	  margin: 0;
 	}
-
-	.field {
-		width: 100%;
-		position: relative;
-		border-bottom: 2px dashed var(--text-color);
-		margin: 4rem auto 1rem;
-		/* transition: 500ms; */
+  
+	.container {
+	  width: 500px; /* Increase width for a bigger dialog box */
+	  padding: 40px; /* Increase padding for more spacing inside the dialog box */
+	  background-color: #ffffff; /* Change background color to white */
+	  border-radius: 8px;
+	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 	}
-
-	.label {
-		color: var(--text-color);
-		font-size: 1.2rem;
+  
+	label {
+	  display: block;
+	  margin-bottom: 16px; /* Increase margin bottom for more spacing between elements */
+	  color: #333;
 	}
-
-	.input {
-		outline: none;
-		border: none;
-		overflow: hidden;
-		margin: 0;
-		width: 100%;
-		padding: 0.25rem 0;
-		background: none;
-		color: white;
-		font-size: 1.2rem;
-		font-weight: bold;
-		/* transition: border 500ms; */
+  
+	input[type="text"],
+	select {
+	  width: 100%;
+	  padding: 12px; /* Increase padding for larger input fields */
+	  border: 1px solid #ccc;
+	  border-radius: 4px;
+	  box-sizing: border-box;
+	  margin-bottom: 24px; /* Increase margin bottom for more spacing between elements */
+	  font-size: 16px;
 	}
-
-	.input:valid {
-		color: yellowgreen;
+  
+	.button-group {
+	  display: flex;
+	  justify-content: space-between;
 	}
-
-	input:invalid {
-		color: orangered;
+  
+	button {
+	  padding: 12px 24px; /* Increase padding for larger buttons */
+	  border: none;
+	  border-radius: 4px;
+	  cursor: pointer;
+	  background-color: #007bff;
+	  color: #fff;
+	  font-size: 16px;
+	  transition: background-color 0.3s ease;
 	}
-
-/* border animation */
-	.field::after {
-		content: "";
-		position: relative;
-		display: block;
-		height: 4px;
-		width: 100%;
-		background: #d16dff;
-		transform: scaleX(0);
-		transform-origin: 0%;
-		/* opacity: 0; */
-		transition: transform 500ms ease;
-		top: 2px;
+  
+	button:hover {
+	  background-color: #0056b3;
 	}
-
-	.field:focus-within {
-		border-color: transparent;
-	}
-
-	.field:focus-within::after {
-		transform: scaleX(1);
-		opacity: 1;
-	}
-
-/* label animation */
-	.label {
-		z-index: -1;
-		position: absolute;
-		transform: translateY(-2rem);
-		transform-origin: 0%;
-		transition: transform 400ms;
-	}
-
-	.field:focus-within .label,
-	.input:not(:placeholder-shown) + .label {
-		transform: scale(0.8) translateY(-5rem);
-		opacity: 1;
-	}
-
-	/* strength meter */
-
-	.strength {
-		display: flex;
-		height: 20px;
-		width: 100%;
-	}
-
-	.bar {
-		margin-right: 5px;
-		height: 100%;
-		width: 25%;
-		transition: box-shadow 500ms;
-		box-shadow: inset 0px 20px #1f1f1f;
-	}
-
-	.bar-show {
-		box-shadow: none;
-	}
-
-	.bar-1 {
-		background: linear-gradient(to right, red, orangered)
-	}
-	
-	.bar-2 {
-		background: linear-gradient(to right, orangered, yellow)
-	}
-
-	.bar-3 {
-		background: linear-gradient(to right, yellow, yellowgreen)
-	}
-
-	.bar-4 {
-		background: linear-gradient(to right, yellowgreen, green)
-	}
-
-</style>
-
-<main>
-	<form>
-	
-		<div class="field">
-			<input type="email" name="email" class="input" placeholder=""/>
-			<label for="email" class="label">Email</label>
-		</div>
-
-		<div class="field">
-			<input type="password" name="password" class="input" placeholder="" on:input={validatePassword}/> 
-			<label for="password" class="label">Password</label>
-		</div>
-
-		<div class="strength">
-			<span class="bar bar-1" class:bar-show={strength > 0}/>
-			<span class="bar bar-2" class:bar-show={strength > 1}/>
-			<span class="bar bar-3" class:bar-show={strength > 1}/>
-			<span class="bar bar-4" class:bar-show={strength > 3}/>
-		</div>
-
-		<ul>
-			<li> {validations[0] ? '✔️' : '❌'} must be at least 5 characters</li>
-			<li> {validations[1] ? '✔️' : '❌'} must contain a capital letter</li>
-			<li> {validations[2] ? '✔️' : '❌'} must contain a number</li>
-			<li> {validations[3] ? '✔️' : '❌'} must contain one of $&+,:;=?@#-</li>
-    	</ul>
-	</form>
-</main>	
\ No newline at end of file
+  </style>
\ No newline at end of file