From 0ca29f248e384df1f261f24467a3b4f0f8592557 Mon Sep 17 00:00:00 2001
From: Rob Balfre <robert.balfre@travelctm.com.au>
Date: Mon, 20 Dec 2021 09:56:14 +1100
Subject: [PATCH] Moving styles back to components. Updated docs for v5

---
 CHANGELOG.md                           |   11 +-
 README.md                              |  230 ++--
 package-lock.json                      | 1602 ++----------------------
 package.json                           |   25 +-
 postcss.config.cjs                     |    7 -
 rollup.config.js                       |    6 +-
 src/lib/ChevronIcon.svelte             |    8 +
 src/lib/ClearIcon.svelte               |    2 +-
 src/lib/Item.svelte                    |   41 +-
 src/lib/List.svelte                    |   37 +-
 src/lib/LoadingIcon.svelte             |    6 +-
 src/lib/Multi.svelte                   |   35 +
 src/lib/Select.svelte                  |  212 +++-
 src/lib/Selection.svelte               |   10 +-
 src/lib/debounce.js                    |    7 -
 src/lib/default.css                    |  255 ----
 src/lib/imports.js                     |   25 -
 src/lib/tailwind.css                   |   34 +-
 src/routes/index.svelte                |   15 +-
 svelte.config.js                       |    5 -
 test/src/Select/ParentContainer.svelte |    3 +-
 test/src/Select/Select--default.svelte |    2 +-
 test/src/tests.js                      |  525 ++++----
 23 files changed, 814 insertions(+), 2289 deletions(-)
 delete mode 100644 postcss.config.cjs
 delete mode 100644 src/lib/debounce.js
 delete mode 100644 src/lib/default.css
 delete mode 100644 src/lib/imports.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a053a175..3eb74481 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,11 @@
 
 ## unreleased
 
-
+* select-container -> svelte-select
+* removed imports prop, not worth it for the annoyance
+* removed clear all from multi select
+* added justValue
 * Placeholder default change from 'Select...' to 'Please select'
-* breaking: `value` just binds to selected option value
 * updated readme
 * LoadingIcon
 * added blur and focus events
@@ -31,7 +33,7 @@
 * virtualList -> virtual-list
 * listContainer -> list
 * bye bye yarn
-* selectContainer and other CSS class names updated, selectContainer -> select-container for example
+* selectContainer and other CSS class names updated, selectContainer -> svelte-select for example
 * LoadingIcon prop added, must be imported to have a spinner/loader
 * CSS props updates. Added .icons and removed some css vars
 * ClearIcon and ChevronIcon no longer included by default
@@ -41,12 +43,11 @@
 * indicatorSvg removed, use ChevronIcon going forward
 * removed playwright and puppeteer, tests now just run in the browser with sirv
 * debounce method is now exported as a prop
-* Multi component no longer included by default, must be imported going forward
 * VirtualList null by default
 * Removed isVirtualList, will use VirtualList going forward
 * Convert repo to use SvelteKit
 * Change licence from LIL to ISC
-* Cleaned up package.json 
+
 
 ## 4.4.1
 
diff --git a/README.md b/README.md
index da885ab0..df5fdaa5 100644
--- a/README.md
+++ b/README.md
@@ -24,101 +24,102 @@
 
 ```bash
 npm install svelte-select
+npm install svelte-select
 ```
 
-## Usage
+## Migrating for v4 to v5
 
-```html
-<script>
-  import Select from 'svelte-select';
-
-  let items = [
-    {value: 'chocolate', label: 'Chocolate'},
-    {value: 'pizza', label: 'Pizza'},
-    {value: 'cake', label: 'Cake'},
-    {value: 'chips', label: 'Chips'},
-    {value: 'ice-cream', label: 'Ice Cream'},
-  ];
+v5 is a major release that that includes some ⚠️ BREAKING CHANGES ⚠️ 
 
-  let value = {value: 'cake', label: 'Cake'};
+Removed `isVirtualList` instead `npm i svelte-tiny-virtual-list -D` and
 
-  function handleSelect(event) {
-    console.log('selected item', event.detail);
-    // .. do something here 🙂
-  }
+```svelte
+<script>
+  import VirtualList from 'svelte-tiny-virtual-list';
 </script>
 
-<Select {items} {value} on:select={handleSelect}></Select>
+<Select VirtualList />
 ```
 
-## API
-
-
-| Prop             | Type      | Default         | Description                                             |
-| ---------------- | --------- | --------------- | ------------------------------------------------------- |
-| items            | `array`   | `[]`            | Array items available to display / filter               |
-| value            | `any`     | `null`          | Selected value(s)                                       |
-| justValue        | `any`     | `null`          | Selected value(s) excluding container object            |
-| optionIdentifier | `string`  | `value`         | Override default identifier                             |
-| labelIdentifier  | `string`  | `label`         | Override default identifier                             |
-| id               | `string`  | `null`          | Add an id to the filter input field                     |
-| filterText       | `string`  | `''`            | Text to filter `items` by                               |
-| placeholder      | `string`  | `Please select` | Placeholder text                                        |
-| noOptionsMessage | `string`  | `No options`    | Message displayed when no items                         |
-| hideEmptyState   | `boolean` | `false`         | When no items hide list and `noOptionsMessage`          |
-| listOpen         | `boolean` | `false`         | Open/close list                                         |
-| class            | `string`  | `''`            | container classes                                       |
-| containerStyles  | `string`  | `''`            | Add inline styles to container                          |
-| isClearable      | `boolean` | `true`          | Enable clearing of value(s)                             |
-| isCreatable      | `boolean` | `false`         | Can create new item(s) to be added to `value`           |
-| isDisabled       | `boolean` | `false`         | Disable select                                          |
-| isMulti          | `boolean` | `false`         | Enable multi-select (must include `Multi` in `imports`) |
-| imports          | `object`  | `{}`            | Optional imports                                        |
-
-
-
-### Optional imports
+CSS classes and custom properties converted from camel to kebab case. For example `selectedItem` → `selected-item` and `--borderRadius` → `--border-radius`
+
+### Other CSS class name changes:
+`selectContainer` → `svelte-select`
+`listContainer` → `list`
+`indicator` → `chevron`
+`virtual-list` removed
+
+### Prop changes:
+`containerClasses` → `class`
+`MultiSelection` → `Multi`
+`indicatorSvg` → `ChevronIcon`
+`selectedValue` removed (was already deprecated in v4 in favour of `value`)
+`loadOptionsInterval` → `debounceWait`
+
+
+## Props
+
+
+| Prop                    | Type      | Default         | Description                                        |
+| ----------------------- | --------- | --------------- | -------------------------------------------------- |
+| items                   | `array`   | `[]`            | Array items available to display / filter          |
+| value                   | `any`     | `null`          | Selected value(s)                                  |
+| justValue               | `any`     | `null`          | Selected value(s) excluding container object       |
+| optionIdentifier        | `string`  | `value`         | Override default identifier                        |
+| labelIdentifier         | `string`  | `label`         | Override default identifier                        |
+| id                      | `string`  | `null`          | Add an id to the filter input field                |
+| filterText              | `string`  | `''`            | Text to filter `items` by                          |
+| placeholder             | `string`  | `Please select` | Placeholder text                                   |
+| noOptionsMessage        | `string`  | `No options`    | Message displayed when no items                    |
+| hideEmptyState          | `boolean` | `false`         | When no items hide list and `noOptionsMessage`     |
+| listOpen                | `boolean` | `false`         | Open/close list                                    |
+| class                   | `string`  | `''`            | container classes                                  |
+| containerStyles         | `string`  | `''`            | Add inline styles to container                     |
+| isClearable             | `boolean` | `true`          | Enable clearing of value(s)                        |
+| isCreatable             | `boolean` | `false`         | Can create new item(s) to be added to `value`      |
+| isDisabled              | `boolean` | `false`         | Disable select                                     |
+| isMulti                 | `boolean` | `false`         | Enable multi-select                                |
+| isSearchable            | `boolean` | `true`          | If `false` search/filtering is disabled            |
+| isGroupHeaderSelectable | `boolean` | `false`         | Enable selectable group headers                    |
+| listPlacement           | `string`  | `auto`          | Display list `'auto'`, `'top'` or `'bottom'`       |
+| hasError                | `boolean` | `false`         | Show error styles around select input              |
+| listAutoWidth           | `boolean` | `true`          | If `false` will ignore width of select             |
+| showChevron             | `boolean` | `false`         | Show chevron at all times                          |
+| inputAttributes         | `object`  | `{}`            | Pass in HTML attributes to Select's input          |
+| iconProps               | `object`  | `{}`            | Icon props                                         |
+| filteredItems           | `array`   | `[]`            | List of items after filtering (read only)          |
+| placeholderAlwaysShow   | `boolean` | `false`         | When `isMulti` placeholder text will always show   |
+| isWaiting               | `boolean` | `false`         | Show LoadingIcon. `loadOptions` will override this |
+| listOffset              | `number`  | `5`             | `px` space between select and list                 |
+| debounceWait            | `number`  | `300`           | `milliseconds` debounce wait                       |
+| suggestions             | `boolean` | `false`         | Show search suggestions before user input          |
+
+
+### Replaceable components
+
+| Import      | Type        | Description           |
+| ----------- | ----------- | --------------------- |
+| Item        | `component` | Item component        |
+| Selection   | `component` | Selection component   |
+| Multi       | `component` | Multi select support  |
+| ChevronIcon | `component` | Chevron Icon          |
+| ClearIcon   | `component` | Clear Icon            |
+| LoadingIcon | `component` | Spinning Loading Icon |
+
+
+### Optional component imports
 
 | Import      | Type        | Description                                            |
 | ----------- | ----------- | ------------------------------------------------------ |
 | VirtualList | `component` | Virtual list support (uses `svelte-tiny-virtual-list`) |
-| Multi       | `component` | Multi select support                                   |
-| ChevronIcon | `component` | Chevron Icon                                           |
-| ClearIcon   | `component` | Clear Icon                                             |
-| LoadingIcon | `component` | Spinning Loading Icon                                  |
-| debounce    | `function`  | Debounce function                                      |
-| filter      | `function`  | Filter options function                                |
-| getItems    | `function`  | Async get items function                               |
-
-
-
-- `isMulti: Boolean` Default: `false`. Enable multi-select, `value` becomes an array of selected items.
-- `isSearchable: Boolean` Default: `true`. Enable search/filtering of `items` via `filterText`.
-- `isGroupHeaderSelectable: Boolean` Default: `false`. Enable selectable group headers in `items` (see adv demo).
-- `listPlacement: String` Default: `'auto'`. When `'auto'` displays either `'top'` or `'bottom'` depending on viewport.
-- `hasError: Boolean` Default: `false`. Show/hide error styles around select input (red border by default).
-- `listAutoWidth: Boolean` Default: `true`. List width will grow wider than the Select container (depending on list item content length).
-- `showChevron: Boolean` Default: `false`. If true, the chevron indicator is always shown.
-- `inputAttributes: Object` Default: `{}`. Pass in HTML attributes to the Select input.
-- `Item: Component` Default: `Item`. Item component.
-- `Selection: Component` Default: `Selection`. Selection component.
-- `Multi: Component` Default: `Multi`. Multi selection component.
-- `Icon: Component` Default: `Icon`. Icon component.
-- `iconProps: Object` Default: `{}`. Icon props.
-- `ClearIcon` Default: `ClearIcon`. ClearIcon component.
-- `filteredItems: Array` Default: `[]`. List of items that are filtered by `filterText`
-- `placeholderAlwaysShow: Boolean` Default: `false`. When `isMulti` then placeholder text will always still show.
-- `isWaiting: Boolean` Default: `false`. If true then loader shows. `loadOptions` will automatically set this as true until promise resolves.
-- `listOffset: Number` Default: `5`. Controls the spacing offset between the list and the input.
-- `debounceWait`
-- `suggestions`
+| Icon        | `component` | Icon component                                         |
 
 
 ### Items
 
 `items` can be simple arrays or collections.
 
-```html
+```svelte
 <script>
   import Select from 'svelte-select';
 
@@ -138,7 +139,7 @@ npm install svelte-select
 
 They can also be grouped and include non-selectable items.
 
-```html
+```svelte
 <script>
   import Select from 'svelte-select';
 
@@ -154,12 +155,11 @@ They can also be grouped and include non-selectable items.
 </script>
 
 <Select {items} {groupBy} />
-
 ```
 
 You can also use custom collections.
 
-```html
+```svelte
 <script>
   import Select from 'svelte-select';
 
@@ -179,7 +179,7 @@ You can also use custom collections.
 
 To load items asynchronously then `loadOptions` is the simplest solution. Supply a function that returns a `Promise` that resolves with a list of items. `loadOptions` has debounce baked in and fires each time `filterText` is updated.
 
-```html
+```svelte
 <script>
   import Select from 'svelte-select';
 
@@ -268,6 +268,21 @@ export const getFilteredItems = () => {
 };
 ```
 
+```js
+export function debounce(fn, wait = 1) {
+    let timeout;
+    return function (...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => fn.apply(this, ...args), wait);
+    };
+}
+```
+
+| debounce    | `function`  | Debounce function                                   |
+| filter      | `function`  | Filter options function                             |
+| loadOptions | `function`  | Return a `Promise` that resolves with items         |
+| getItems    | `function`  | Take full control of async and loadOptions defaults |
+
 ## A11y (Accessibility)
 
 Override these methods to change the `aria-context` and `aria-selection` text.
@@ -288,32 +303,19 @@ export let ariaFocused = () => {
 
 ## Styling
 
-You can style a component by overriding [the available CSS variables](/docs/theming_variables.md).
+You can style a component by overriding [the available CSS custom properties](/docs/theming_variables.md).
 
-```html
+```svelte
 <script>
   import Select from 'svelte-select';
-
-  const items = ['One', 'Two', 'Three'];
 </script>
 
-<style>
-  .themed {
-    --border: 3px solid blue;
-    --borderRadius: 10px;
-    --placeholderColor: blue;
-  }
-</style>
-
-<div class="themed">
-  <h2>Theming</h2>
-  <Select {items}></Select>
-</div>
+<Select --border-radius= "10px" --placeholder-color="blue" />
 ```
 
 You can also use the `inputStyles` prop to write in any override styles needed for the input.
 
-```html
+```svelte
 <script>
   import Select from 'svelte-select';
 
@@ -328,38 +330,21 @@ You can also use the `inputStyles` prop to write in any override styles needed f
 | Event Name | Callback          | Description                                                                    |
 | ---------- | ----------------- | ------------------------------------------------------------------------------ |
 | select     | { detail }        | fires when value changes                                                       |
+| focus      | { detail }        | fires when select > input on:focus                                             |
+| blur       | { detail }        | fires when select > input on:blur                                              |
 | clear      | { detail }        | fires when clear all is invoked or item is removed (by user) from multi select |
 | loaded     | { options }       | fires when `loadOptions` resolves                                              |
 | error      | { type, details } | fires when error is caught                                                     |
 
-```html
-<script>
-  import Select from 'svelte-select';
-
-  let items = [...];
-  function handleSelect(event) {
-    // event.detail will contain the selected value
-    ...
-  }
-  function handleClear(event) {
-    // event.detail will be null unless isMulti is true and user has removed a single item
-    ...
-  }
-</script>
-
-<Select {items} on:select={handleSelect} on:clear={handleClear}></Select>
-```
-
 ## Development
 
 ```bash
-yarn global add serve@8
-yarn
-yarn dev
+npm i
+npm run dev-tests
 yarn test:browser
 ```
 
-In your favourite browser go to http://localhost:3000 and open devtools and see the console for the test output. When developing its handy to see the component on the page; comment out the `select.$destroy();` on the last test in /test/src/index.js or use the `test.only()` to target just one test.
+In your browser go to http://localhost:3000 and open devtools and see the console output. When developing it's useful to see the component on the page; comment out the `select.$destroy();` on the last test in /test/src/index.js or use the `test.only()` to target just one test.
 
 For example:
 
@@ -381,13 +366,6 @@ test.only('when getSelectionLabel contains HTML then render the HTML', async (t)
 ```
 
 
-## Configuring webpack
-
-If you're using webpack with [svelte-loader](https://github.com/sveltejs/svelte-loader), make sure that you add `"svelte"` to [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config. This ensures that webpack imports the uncompiled component — this is more efficient.
-
-If you're using Rollup with [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte), this will happen automatically.
-
-
 ## License
 
 [LIL](LICENSE)
diff --git a/package-lock.json b/package-lock.json
index 126bce86..c9ec3d58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,31 +8,26 @@
       "version": "5.0.0-alpha.5",
       "license": "ISC",
       "devDependencies": {
-        "@sveltejs/kit": "1.0.0-next.196",
+        "@sveltejs/kit": "1.0.0-next.202",
         "autoprefixer": "^10.4.0",
         "cross-env": "^7.0.3",
-        "dotenv-cli": "^4.1.1",
         "find-in-files": "^0.5.0",
-        "postcss": "^8.3.11",
-        "postcss-cli": "^9.0.2",
-        "postcss-import": "^14.0.2",
-        "prettier": "~2.4.1",
-        "prettier-plugin-svelte": "^2.5.0",
+        "prettier": "~2.5.1",
+        "prettier-plugin-svelte": "^2.5.1",
         "release-it": "^14.11.8",
-        "rollup": "^2.60.0",
+        "rollup": "^2.61.1",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-css-only": "^3.1.0",
         "rollup-plugin-node-resolve": "^5.2.0",
-        "rollup-plugin-postcss": "^4.0.1",
+        "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-svelte": "^7.1.0",
         "sirv-cli": "^1.0.14",
-        "svelte": "^3.44.1",
-        "svelte-preprocess": "^4.9.8",
+        "svelte": "^3.44.3",
+        "svelte-preprocess": "^4.10.1",
         "svelte-tiny-virtual-list": "^1.1.7",
-        "svelte2tsx": "^0.4.8",
-        "tailwindcss": "^2.2.19",
+        "svelte2tsx": "^0.4.12",
         "tape-modern": "^1.1.2",
-        "typescript": "^4.4.4"
+        "typescript": "^4.5.4"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -344,15 +339,15 @@
       }
     },
     "node_modules/@sveltejs/kit": {
-      "version": "1.0.0-next.196",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.196.tgz",
-      "integrity": "sha512-z7sA/2/3Il5biibjPXCYXJC11TyFhgCvMaJvvbtMnu2l3EmOmJBMS+r2djGptzfFsugSVNwGQFn8+ldWQWq3jA==",
+      "version": "1.0.0-next.202",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.202.tgz",
+      "integrity": "sha512-rXmJ0FplkWvD1CaeCfejRYhOJYrlmeUm5Fkw7gIKDdWPQev5rqOhd9B9ZvRpq35oMqCAwaOfK+e5S6k+83feEQ==",
       "dev": true,
       "dependencies": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
         "cheap-watch": "^1.0.4",
         "sade": "^1.7.4",
-        "vite": "^2.6.12"
+        "vite": "^2.7.2"
       },
       "bin": {
         "svelte-kit": "svelte-kit.js"
@@ -486,38 +481,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      }
-    },
-    "node_modules/acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/alphanum-sort": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
@@ -572,37 +535,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-      "dev": true,
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
-      "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
-      "dev": true
-    },
-    "node_modules/array-union": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz",
-      "integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/async-retry": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.3.3.tgz",
@@ -687,15 +619,6 @@
         "node": "*"
       }
     },
-    "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -839,15 +762,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/cacheable-lookup": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
@@ -924,15 +838,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -998,27 +903,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
-      "dev": true,
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
     "node_modules/ci-info": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
@@ -1070,17 +954,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/cliui": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^7.0.0"
-      }
-    },
     "node_modules/clone": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
@@ -1099,16 +972,6 @@
         "mimic-response": "^1.0.0"
       }
     },
-    "node_modules/color": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.0.1.tgz",
-      "integrity": "sha512-rpZjOKN5O7naJxkH2Rx1sZzzBgaiWECc6BYXjeCE6kF0kcASJYbUq02u7JqIHwCb/j3NhV+QhRL2683aICeGZA==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.6.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1127,16 +990,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "node_modules/color-string": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
-      "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/colord": {
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.1.tgz",
@@ -1155,15 +1008,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/commander": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1263,15 +1107,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/css-color-names": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/css-declaration-sorter": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz",
@@ -1316,12 +1151,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/css-unit-converter": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
-      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
-      "dev": true
-    },
     "node_modules/css-what": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
@@ -1521,12 +1350,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
-      "dev": true
-    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1536,15 +1359,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/dependency-graph": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
-      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/deprecated-obj": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/deprecated-obj/-/deprecated-obj-2.0.0.tgz",
@@ -1573,29 +1387,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/detective": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
-      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
-      "dev": true,
-      "dependencies": {
-        "acorn-node": "^1.6.1",
-        "defined": "^1.0.0",
-        "minimist": "^1.1.1"
-      },
-      "bin": {
-        "detective": "bin/detective.js"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
-    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -1608,12 +1399,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
-    },
     "node_modules/dom-serializer": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -1681,36 +1466,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dotenv": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
-      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/dotenv-cli": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-4.1.1.tgz",
-      "integrity": "sha512-XvKv1pa+UBrsr3CtLGBsR6NdsoS7znqaHUf4Knj0eZO+gOI/hjj9KgWDP+KjpfEbj6wAba1UpbhaP9VezNkWhg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.1",
-        "dotenv": "^8.1.0",
-        "dotenv-expand": "^5.1.0",
-        "minimist": "^1.1.3"
-      },
-      "bin": {
-        "dotenv": "cli.js"
-      }
-    },
-    "node_modules/dotenv-expand": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
-      "dev": true
-    },
     "node_modules/duplexer3": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
@@ -2227,20 +1982,6 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
-    "node_modules/fs-extra": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
-      "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2278,15 +2019,6 @@
         "loader-utils": "^1.1.0"
       }
     },
-    "node_modules/get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
-      "engines": {
-        "node": "6.* || 8.* || >= 10.*"
-      }
-    },
     "node_modules/get-intrinsic": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
@@ -2310,18 +2042,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/get-stdin": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
-      "integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -2401,26 +2121,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/globby": {
-      "version": "12.0.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-12.0.2.tgz",
-      "integrity": "sha512-lAsmb/5Lww4r7MM9nCCliDZVIKbZTavrsunAsHLr9oHthrZP1qi7/gAnHOsUs9bLvEt2vKVJhHmxuL7QbDuPdQ==",
-      "dev": true,
-      "dependencies": {
-        "array-union": "^3.0.1",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.7",
-        "ignore": "^5.1.8",
-        "merge2": "^1.4.1",
-        "slash": "^4.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/got": {
       "version": "11.8.3",
       "resolved": "https://registry.npmjs.org/got/-/got-11.8.3.tgz",
@@ -2495,33 +2195,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/hex-color-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
-    },
-    "node_modules/hsl-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
-      "dev": true
-    },
-    "node_modules/hsla-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
-      "dev": true
-    },
-    "node_modules/html-tags": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
-      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -2751,18 +2424,6 @@
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
       "dev": true
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-ci": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
@@ -2775,20 +2436,6 @@
         "is-ci": "bin.js"
       }
     },
-    "node_modules/is-color-stop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
-      "dev": true,
-      "dependencies": {
-        "css-color-names": "^0.0.4",
-        "hex-color-regex": "^1.1.0",
-        "hsl-regex": "^1.0.0",
-        "hsla-regex": "^1.0.0",
-        "rgb-regex": "^1.0.1",
-        "rgba-regex": "^1.0.0"
-      }
-    },
     "node_modules/is-core-module": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
@@ -3026,18 +2673,6 @@
         "json5": "lib/cli.js"
       }
     },
-    "node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
     "node_modules/keyv": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.4.tgz",
@@ -3118,48 +2753,12 @@
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
-    "node_modules/lodash.difference": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-      "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=",
-      "dev": true
-    },
-    "node_modules/lodash.forown": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.forown/-/lodash.forown-4.4.0.tgz",
-      "integrity": "sha1-hRFc8E9z75ZuztUlEdOJPMRmg68=",
-      "dev": true
-    },
-    "node_modules/lodash.get": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
-      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
-      "dev": true
-    },
-    "node_modules/lodash.groupby": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.groupby/-/lodash.groupby-4.6.0.tgz",
-      "integrity": "sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=",
-      "dev": true
-    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
-    "node_modules/lodash.sortby": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
-      "dev": true
-    },
-    "node_modules/lodash.topath": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
-      "dev": true
-    },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -3383,18 +2982,6 @@
         "mkdirp": "bin/cmd.js"
       }
     },
-    "node_modules/modern-normalize": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
-      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/mri": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
@@ -3465,15 +3052,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/node-emoji": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
-      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.17.21"
-      }
-    },
     "node_modules/node-fetch": {
       "version": "2.6.6",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
@@ -3492,15 +3070,6 @@
       "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
       "dev": true
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -3546,15 +3115,6 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
-    "node_modules/object-hash": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
-      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
@@ -4005,15 +3565,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.3.11",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz",
@@ -4045,69 +3596,22 @@
         "postcss": "^8.2.2"
       }
     },
-    "node_modules/postcss-cli": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-9.0.2.tgz",
-      "integrity": "sha512-08Wujoy7YGhKCFrGsT9OXqWjtHlGQ+JmyaD/4McjCiwor2IUTRVzXiJd+xmLTGdSWjceS6/TePaJQwBlkVWHiw==",
+    "node_modules/postcss-colormin": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.0.tgz",
+      "integrity": "sha512-+HC6GfWU3upe5/mqmxuqYZ9B2Wl4lcoUUNkoaX59nEWV4EtADCMiBqui111Bu8R8IvaZTmqmxrqOAqjbHIwXPw==",
       "dev": true,
       "dependencies": {
-        "chokidar": "^3.3.0",
-        "dependency-graph": "^0.11.0",
-        "fs-extra": "^10.0.0",
-        "get-stdin": "^9.0.0",
-        "globby": "^12.0.0",
-        "picocolors": "^1.0.0",
-        "postcss-load-config": "^3.0.0",
-        "postcss-reporter": "^7.0.0",
-        "pretty-hrtime": "^1.0.3",
-        "read-cache": "^1.0.0",
-        "slash": "^4.0.0",
-        "yargs": "^17.0.0"
-      },
-      "bin": {
-        "postcss": "index.js"
+        "browserslist": "^4.16.6",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.0.1",
+        "postcss-value-parser": "^4.1.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": "^10 || ^12 || >=14.0"
       },
       "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-cli/node_modules/yargs": {
-      "version": "17.2.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.2.1.tgz",
-      "integrity": "sha512-XfR8du6ua4K6uLGm5S6fA+FIJom/MdJcFNVY8geLlp2v8GYbOXD4EB1tPNZsRn4vBzKGMgb5DRZMeWuFc2GO8Q==",
-      "dev": true,
-      "dependencies": {
-        "cliui": "^7.0.2",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.0",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^20.2.2"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/postcss-colormin": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.0.tgz",
-      "integrity": "sha512-+HC6GfWU3upe5/mqmxuqYZ9B2Wl4lcoUUNkoaX59nEWV4EtADCMiBqui111Bu8R8IvaZTmqmxrqOAqjbHIwXPw==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.6",
-        "caniuse-api": "^3.0.0",
-        "colord": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
+        "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-convert-values": {
@@ -4173,40 +3677,6 @@
         "postcss": "^8.2.15"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "14.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.0.2.tgz",
-      "integrity": "sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
-      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
-      "dev": true,
-      "dependencies": {
-        "camelcase-css": "^2.0.1",
-        "postcss": "^8.1.6"
-      },
-      "engines": {
-        "node": ">=10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      }
-    },
     "node_modules/postcss-load-config": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
@@ -4423,25 +3893,6 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/postcss-nested": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
-      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
-      "dev": true,
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.6"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
     "node_modules/postcss-normalize-charset": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
@@ -4628,36 +4079,6 @@
         "postcss": "^8.2.15"
       }
     },
-    "node_modules/postcss-reporter": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.3.tgz",
-      "integrity": "sha512-WoYHwtStmiR74UQDO3vZMbkhOBXSXyteWnhMCVbAK6KRRKLTS0EnTZxOxvbUEnQiMZ+3xRG04x41HhHnLBtQfA==",
-      "dev": true,
-      "dependencies": {
-        "lodash.difference": "^4.5.0",
-        "lodash.forown": "^4.4.0",
-        "lodash.get": "^4.4.2",
-        "lodash.groupby": "^4.6.0",
-        "lodash.sortby": "^4.7.0",
-        "nanocolors": "^0.2.6"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/postcss-reporter/node_modules/nanocolors": {
-      "version": "0.2.13",
-      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.13.tgz",
-      "integrity": "sha512-0n3mSAQLPpGLV9ORXT5+C/D4mwew7Ebws69Hx4E2sgz2ZA5+32Q80B9tL8PbL7XHnRDiAxH/pnrUJ9a4fkTNTA==",
-      "dev": true
-    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
@@ -4720,9 +4141,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
-      "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
+      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -4732,24 +4153,15 @@
       }
     },
     "node_modules/prettier-plugin-svelte": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.5.0.tgz",
-      "integrity": "sha512-+iHY2uGChOngrgKielJUnqo74gIL/EO5oeWm8MftFWjEi213lq9QYTOwm1pv4lI1nA61tdgf80CF2i5zMcu1kw==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.5.1.tgz",
+      "integrity": "sha512-IhZUcqr7Bg4LY15d87t9lDr7EyC0IPehkzH5ya5igG8zYwf3UYaYDFnVW2mckREaZyLREcH9YOouesmt4f5Ozg==",
       "dev": true,
       "peerDependencies": {
         "prettier": "^1.16.4 || ^2.0.0",
         "svelte": "^3.2.0"
       }
     },
-    "node_modules/pretty-hrtime": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/promise.series": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/promise.series/-/promise.series-0.2.0.tgz",
@@ -4787,21 +4199,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/purgecss": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
-      "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
-      "dev": true,
-      "dependencies": {
-        "commander": "^6.0.0",
-        "glob": "^7.0.0",
-        "postcss": "^8.2.1",
-        "postcss-selector-parser": "^6.0.2"
-      },
-      "bin": {
-        "purgecss": "bin/purgecss.js"
-      }
-    },
     "node_modules/q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -4899,15 +4296,6 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
-      "dev": true,
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -4922,18 +4310,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/rechoir": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
@@ -4946,22 +4322,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/reduce-css-calc": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
-      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
-      "dev": true,
-      "dependencies": {
-        "css-unit-converter": "^1.1.1",
-        "postcss-value-parser": "^3.3.0"
-      }
-    },
-    "node_modules/reduce-css-calc/node_modules/postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-      "dev": true
-    },
     "node_modules/registry-auth-token": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
@@ -5067,15 +4427,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/require-relative": {
       "version": "0.8.7",
       "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
@@ -5153,37 +4504,10 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/rgb-regex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
-      "dev": true
-    },
-    "node_modules/rgba-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
-      "dev": true
-    },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/rollup": {
-      "version": "2.60.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.60.0.tgz",
-      "integrity": "sha512-cHdv9GWd58v58rdseC8e8XIaPUo8a9cgZpnCMMDGZFDZKEODOiPPEQFXLriWr/TjXzhPPmG5bkAztPsOARIcGQ==",
+      "version": "2.61.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.61.1.tgz",
+      "integrity": "sha512-BbTXlEvB8d+XFbK/7E5doIcRtxWPRiqr0eb5vQ0+2paMM04Ye4PZY5nHOQef2ix24l/L0SpLd5hwcH15QHPdvA==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -5258,9 +4582,9 @@
       }
     },
     "node_modules/rollup-plugin-postcss": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.1.tgz",
-      "integrity": "sha512-kUJHlpDGl9+kDfdUUbnerW0Mx1R0PL/6dgciUE/w19swYDBjug7RQfxIRvRGtO/cvCkynYyU8e/YFMI544vskA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz",
+      "integrity": "sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.1.0",
@@ -5542,21 +4866,6 @@
       "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==",
       "dev": true
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-      "dev": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
-    "node_modules/simple-swizzle/node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "dev": true
-    },
     "node_modules/sirv": {
       "version": "1.0.17",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.17.tgz",
@@ -5602,18 +4911,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/slash": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/sorcery": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
@@ -5771,9 +5068,9 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.44.1",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.44.1.tgz",
-      "integrity": "sha512-4DrCEJoBvdR689efHNSxIQn2pnFwB7E7j2yLEJtHE/P8hxwZWIphCtJ8are7bjl/iVMlcEf5uh5pJ68IwR09vQ==",
+      "version": "3.44.3",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.44.3.tgz",
+      "integrity": "sha512-aGgrNCip5PQFNfq9e9tmm7EYxWLVHoFsEsmKrtOeRD8dmoGDdyTQ+21xd7qgFd8MNdKGSYvg7F9dr+Tc0yDymg==",
       "dev": true,
       "engines": {
         "node": ">= 8"
@@ -5789,9 +5086,9 @@
       }
     },
     "node_modules/svelte-preprocess": {
-      "version": "4.9.8",
-      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.9.8.tgz",
-      "integrity": "sha512-EQS/oRZzMtYdAprppZxY3HcysKh11w54MgA63ybtL+TAZ4hVqYOnhw41JVJjWN9dhPnNjjLzvbZ2tMhTsla1Og==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.1.tgz",
+      "integrity": "sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -5816,7 +5113,7 @@
         "stylus": "^0.54.7",
         "sugarss": "^2.0.0",
         "svelte": "^3.23.0",
-        "typescript": "^3.9.5 || ^4.0.0"
+        "typescript": "^4.5.2"
       },
       "peerDependenciesMeta": {
         "@babel/core": {
@@ -5861,9 +5158,9 @@
       "dev": true
     },
     "node_modules/svelte2tsx": {
-      "version": "0.4.8",
-      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.4.8.tgz",
-      "integrity": "sha512-FSaJW/PW40XIV3zrHsW4aX6fBDPUu19gl1+zupCqOeT7wRip2RBxxt5ENDsPx/U5EuQC5+ultlYDGhSi6276wQ==",
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.4.12.tgz",
+      "integrity": "sha512-aTKg+W95w16RqOPFi01icd4jlwnMzgvTlewvqrJJTLAs0kjpQ/DMhhd+iDDhDBkhKT4nDkVzEfe/LZTz1Xf6AQ==",
       "dev": true,
       "dependencies": {
         "dedent-js": "^1.0.1",
@@ -5904,69 +5201,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/tailwindcss": {
-      "version": "2.2.19",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz",
-      "integrity": "sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==",
-      "dev": true,
-      "dependencies": {
-        "arg": "^5.0.1",
-        "bytes": "^3.0.0",
-        "chalk": "^4.1.2",
-        "chokidar": "^3.5.2",
-        "color": "^4.0.1",
-        "cosmiconfig": "^7.0.1",
-        "detective": "^5.2.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.2.7",
-        "fs-extra": "^10.0.0",
-        "glob-parent": "^6.0.1",
-        "html-tags": "^3.1.0",
-        "is-color-stop": "^1.1.0",
-        "is-glob": "^4.0.1",
-        "lodash": "^4.17.21",
-        "lodash.topath": "^4.5.2",
-        "modern-normalize": "^1.1.0",
-        "node-emoji": "^1.11.0",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^2.2.0",
-        "postcss-js": "^3.0.3",
-        "postcss-load-config": "^3.1.0",
-        "postcss-nested": "5.0.6",
-        "postcss-selector-parser": "^6.0.6",
-        "postcss-value-parser": "^4.1.0",
-        "pretty-hrtime": "^1.0.3",
-        "purgecss": "^4.0.3",
-        "quick-lru": "^5.1.1",
-        "reduce-css-calc": "^2.1.8",
-        "resolve": "^1.20.0",
-        "tmp": "^0.2.1"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=12.13.0"
-      },
-      "peerDependencies": {
-        "autoprefixer": "^10.0.2",
-        "postcss": "^8.0.9"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/tape-modern": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/tape-modern/-/tape-modern-1.1.2.tgz",
@@ -5994,18 +5228,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/tmp": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
-      "dev": true,
-      "dependencies": {
-        "rimraf": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8.17.0"
-      }
-    },
     "node_modules/to-readable-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
@@ -6077,9 +5299,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
-      "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
+      "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -6113,15 +5335,6 @@
       "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==",
       "dev": true
     },
-    "node_modules/universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/update-notifier": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz",
@@ -6212,15 +5425,15 @@
       }
     },
     "node_modules/vite": {
-      "version": "2.6.13",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.6.13.tgz",
-      "integrity": "sha512-+tGZ1OxozRirTudl4M3N3UTNJOlxdVo/qBl2IlDEy/ZpTFcskp+k5ncNjayR3bRYTCbqSOFz2JWGN1UmuDMScA==",
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.7.3.tgz",
+      "integrity": "sha512-GAY1P+9fLJOju1SRm8+hykVnEXog+E+KXuqqyMBQDriKCUIKzWnPn142yNNhSdf/ixYGYdUa5ce3A8WaEajzGw==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.13.2",
-        "postcss": "^8.3.8",
+        "esbuild": "^0.13.12",
+        "postcss": "^8.3.11",
         "resolve": "^1.20.0",
-        "rollup": "^2.57.0"
+        "rollup": "^2.59.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -6407,24 +5620,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
-    "node_modules/y18n": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -6716,15 +5911,15 @@
       "dev": true
     },
     "@sveltejs/kit": {
-      "version": "1.0.0-next.196",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.196.tgz",
-      "integrity": "sha512-z7sA/2/3Il5biibjPXCYXJC11TyFhgCvMaJvvbtMnu2l3EmOmJBMS+r2djGptzfFsugSVNwGQFn8+ldWQWq3jA==",
+      "version": "1.0.0-next.202",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.202.tgz",
+      "integrity": "sha512-rXmJ0FplkWvD1CaeCfejRYhOJYrlmeUm5Fkw7gIKDdWPQev5rqOhd9B9ZvRpq35oMqCAwaOfK+e5S6k+83feEQ==",
       "dev": true,
       "requires": {
         "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
         "cheap-watch": "^1.0.4",
         "sade": "^1.7.4",
-        "vite": "^2.6.12"
+        "vite": "^2.7.2"
       }
     },
     "@sveltejs/vite-plugin-svelte": {
@@ -6828,29 +6023,6 @@
         "@types/node": "*"
       }
     },
-    "acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true
-    },
-    "acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
-      "requires": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      }
-    },
-    "acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true
-    },
     "alphanum-sort": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
@@ -6890,28 +6062,6 @@
         "color-convert": "^2.0.1"
       }
     },
-    "anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-      "dev": true,
-      "requires": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      }
-    },
-    "arg": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
-      "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
-      "dev": true
-    },
-    "array-union": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz",
-      "integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==",
-      "dev": true
-    },
     "async-retry": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.3.3.tgz",
@@ -6965,12 +6115,6 @@
       "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
       "dev": true
     },
-    "binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true
-    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -7066,12 +6210,6 @@
       "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
       "dev": true
     },
-    "bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
-      "dev": true
-    },
     "cacheable-lookup": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
@@ -7126,12 +6264,6 @@
       "integrity": "sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA==",
       "dev": true
     },
-    "camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true
-    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -7183,22 +6315,6 @@
       "integrity": "sha512-QR/9FrtRL5fjfUJBhAKCdi0lSRQ3rVRRum3GF9wDKp2TJbEIMGhUEr2yU8lORzm9Isdjx7/k9S0DFDx+z5VGtw==",
       "dev": true
     },
-    "chokidar": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
-      "dev": true,
-      "requires": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      }
-    },
     "ci-info": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
@@ -7232,17 +6348,6 @@
       "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
       "dev": true
     },
-    "cliui": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-      "dev": true,
-      "requires": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^7.0.0"
-      }
-    },
     "clone": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
@@ -7258,16 +6363,6 @@
         "mimic-response": "^1.0.0"
       }
     },
-    "color": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.0.1.tgz",
-      "integrity": "sha512-rpZjOKN5O7naJxkH2Rx1sZzzBgaiWECc6BYXjeCE6kF0kcASJYbUq02u7JqIHwCb/j3NhV+QhRL2683aICeGZA==",
-      "dev": true,
-      "requires": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.6.0"
-      }
-    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -7283,16 +6378,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "color-string": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
-      "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
-      "dev": true,
-      "requires": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "colord": {
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.1.tgz",
@@ -7308,12 +6393,6 @@
         "delayed-stream": "~1.0.0"
       }
     },
-    "commander": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
-      "dev": true
-    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -7388,12 +6467,6 @@
       "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
       "dev": true
     },
-    "css-color-names": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
-      "dev": true
-    },
     "css-declaration-sorter": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz",
@@ -7426,12 +6499,6 @@
         "source-map": "^0.6.1"
       }
     },
-    "css-unit-converter": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
-      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
-      "dev": true
-    },
     "css-what": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
@@ -7568,24 +6635,12 @@
       "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
       "dev": true
     },
-    "defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
-      "dev": true
-    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
-    "dependency-graph": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
-      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
-      "dev": true
-    },
     "deprecated-obj": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/deprecated-obj/-/deprecated-obj-2.0.0.tgz",
@@ -7608,23 +6663,6 @@
       "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
       "dev": true
     },
-    "detective": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
-      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
-      "dev": true,
-      "requires": {
-        "acorn-node": "^1.6.1",
-        "defined": "^1.0.0",
-        "minimist": "^1.1.1"
-      }
-    },
-    "didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
-    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -7634,12 +6672,6 @@
         "path-type": "^4.0.0"
       }
     },
-    "dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
-    },
     "dom-serializer": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -7686,30 +6718,6 @@
         "is-obj": "^2.0.0"
       }
     },
-    "dotenv": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
-      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
-      "dev": true
-    },
-    "dotenv-cli": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/dotenv-cli/-/dotenv-cli-4.1.1.tgz",
-      "integrity": "sha512-XvKv1pa+UBrsr3CtLGBsR6NdsoS7znqaHUf4Knj0eZO+gOI/hjj9KgWDP+KjpfEbj6wAba1UpbhaP9VezNkWhg==",
-      "dev": true,
-      "requires": {
-        "cross-spawn": "^7.0.1",
-        "dotenv": "^8.1.0",
-        "dotenv-expand": "^5.1.0",
-        "minimist": "^1.1.3"
-      }
-    },
-    "dotenv-expand": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
-      "dev": true
-    },
     "duplexer3": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
@@ -8065,17 +7073,6 @@
       "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
       "dev": true
     },
-    "fs-extra": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
-      "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      }
-    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -8104,12 +7101,6 @@
         "loader-utils": "^1.1.0"
       }
     },
-    "get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true
-    },
     "get-intrinsic": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
@@ -8127,12 +7118,6 @@
       "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=",
       "dev": true
     },
-    "get-stdin": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
-      "integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==",
-      "dev": true
-    },
     "get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -8190,20 +7175,6 @@
         "ini": "2.0.0"
       }
     },
-    "globby": {
-      "version": "12.0.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-12.0.2.tgz",
-      "integrity": "sha512-lAsmb/5Lww4r7MM9nCCliDZVIKbZTavrsunAsHLr9oHthrZP1qi7/gAnHOsUs9bLvEt2vKVJhHmxuL7QbDuPdQ==",
-      "dev": true,
-      "requires": {
-        "array-union": "^3.0.1",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.7",
-        "ignore": "^5.1.8",
-        "merge2": "^1.4.1",
-        "slash": "^4.0.0"
-      }
-    },
     "got": {
       "version": "11.8.3",
       "resolved": "https://registry.npmjs.org/got/-/got-11.8.3.tgz",
@@ -8256,30 +7227,6 @@
       "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
       "dev": true
     },
-    "hex-color-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
-    },
-    "hsl-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
-      "dev": true
-    },
-    "hsla-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
-      "dev": true
-    },
-    "html-tags": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
-      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
-      "dev": true
-    },
     "http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -8446,15 +7393,6 @@
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
       "dev": true
     },
-    "is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "requires": {
-        "binary-extensions": "^2.0.0"
-      }
-    },
     "is-ci": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
@@ -8464,20 +7402,6 @@
         "ci-info": "^3.2.0"
       }
     },
-    "is-color-stop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
-      "dev": true,
-      "requires": {
-        "css-color-names": "^0.0.4",
-        "hex-color-regex": "^1.1.0",
-        "hsl-regex": "^1.0.0",
-        "hsla-regex": "^1.0.0",
-        "rgb-regex": "^1.0.1",
-        "rgba-regex": "^1.0.0"
-      }
-    },
     "is-core-module": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
@@ -8647,16 +7571,6 @@
         "minimist": "^1.2.0"
       }
     },
-    "jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.6",
-        "universalify": "^2.0.0"
-      }
-    },
     "keyv": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.4.tgz",
@@ -8722,48 +7636,12 @@
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
-    "lodash.difference": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-      "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=",
-      "dev": true
-    },
-    "lodash.forown": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.forown/-/lodash.forown-4.4.0.tgz",
-      "integrity": "sha1-hRFc8E9z75ZuztUlEdOJPMRmg68=",
-      "dev": true
-    },
-    "lodash.get": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
-      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
-      "dev": true
-    },
-    "lodash.groupby": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.groupby/-/lodash.groupby-4.6.0.tgz",
-      "integrity": "sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=",
-      "dev": true
-    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
-    "lodash.sortby": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
-      "dev": true
-    },
-    "lodash.topath": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
-      "dev": true
-    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -8927,12 +7805,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "modern-normalize": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
-      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
-      "dev": true
-    },
     "mri": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
@@ -8990,15 +7862,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node-emoji": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
-      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.21"
-      }
-    },
     "node-fetch": {
       "version": "2.6.6",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.6.tgz",
@@ -9014,12 +7877,6 @@
       "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==",
       "dev": true
     },
-    "normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
-    },
     "normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -9050,12 +7907,6 @@
         "boolbase": "^1.0.0"
       }
     },
-    "object-hash": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
-      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
-      "dev": true
-    },
     "object-inspect": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
@@ -9401,12 +8252,6 @@
       "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
       "dev": true
     },
-    "pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-      "dev": true
-    },
     "postcss": {
       "version": "8.3.11",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz",
@@ -9428,43 +8273,6 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
-    "postcss-cli": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-9.0.2.tgz",
-      "integrity": "sha512-08Wujoy7YGhKCFrGsT9OXqWjtHlGQ+JmyaD/4McjCiwor2IUTRVzXiJd+xmLTGdSWjceS6/TePaJQwBlkVWHiw==",
-      "dev": true,
-      "requires": {
-        "chokidar": "^3.3.0",
-        "dependency-graph": "^0.11.0",
-        "fs-extra": "^10.0.0",
-        "get-stdin": "^9.0.0",
-        "globby": "^12.0.0",
-        "picocolors": "^1.0.0",
-        "postcss-load-config": "^3.0.0",
-        "postcss-reporter": "^7.0.0",
-        "pretty-hrtime": "^1.0.3",
-        "read-cache": "^1.0.0",
-        "slash": "^4.0.0",
-        "yargs": "^17.0.0"
-      },
-      "dependencies": {
-        "yargs": {
-          "version": "17.2.1",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.2.1.tgz",
-          "integrity": "sha512-XfR8du6ua4K6uLGm5S6fA+FIJom/MdJcFNVY8geLlp2v8GYbOXD4EB1tPNZsRn4vBzKGMgb5DRZMeWuFc2GO8Q==",
-          "dev": true,
-          "requires": {
-            "cliui": "^7.0.2",
-            "escalade": "^3.1.1",
-            "get-caller-file": "^2.0.5",
-            "require-directory": "^2.1.1",
-            "string-width": "^4.2.0",
-            "y18n": "^5.0.5",
-            "yargs-parser": "^20.2.2"
-          }
-        }
-      }
-    },
     "postcss-colormin": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.0.tgz",
@@ -9514,27 +8322,6 @@
       "dev": true,
       "requires": {}
     },
-    "postcss-import": {
-      "version": "14.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.0.2.tgz",
-      "integrity": "sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      }
-    },
-    "postcss-js": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
-      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
-      "dev": true,
-      "requires": {
-        "camelcase-css": "^2.0.1",
-        "postcss": "^8.1.6"
-      }
-    },
     "postcss-load-config": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
@@ -9673,15 +8460,6 @@
         "icss-utils": "^5.0.0"
       }
     },
-    "postcss-nested": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
-      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
-      "dev": true,
-      "requires": {
-        "postcss-selector-parser": "^6.0.6"
-      }
-    },
     "postcss-normalize-charset": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
@@ -9797,28 +8575,6 @@
         "postcss-value-parser": "^4.1.0"
       }
     },
-    "postcss-reporter": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.0.3.tgz",
-      "integrity": "sha512-WoYHwtStmiR74UQDO3vZMbkhOBXSXyteWnhMCVbAK6KRRKLTS0EnTZxOxvbUEnQiMZ+3xRG04x41HhHnLBtQfA==",
-      "dev": true,
-      "requires": {
-        "lodash.difference": "^4.5.0",
-        "lodash.forown": "^4.4.0",
-        "lodash.get": "^4.4.2",
-        "lodash.groupby": "^4.6.0",
-        "lodash.sortby": "^4.7.0",
-        "nanocolors": "^0.2.6"
-      },
-      "dependencies": {
-        "nanocolors": {
-          "version": "0.2.13",
-          "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.13.tgz",
-          "integrity": "sha512-0n3mSAQLPpGLV9ORXT5+C/D4mwew7Ebws69Hx4E2sgz2ZA5+32Q80B9tL8PbL7XHnRDiAxH/pnrUJ9a4fkTNTA==",
-          "dev": true
-        }
-      }
-    },
     "postcss-selector-parser": {
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
@@ -9863,24 +8619,18 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz",
-      "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
+      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
       "dev": true
     },
     "prettier-plugin-svelte": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.5.0.tgz",
-      "integrity": "sha512-+iHY2uGChOngrgKielJUnqo74gIL/EO5oeWm8MftFWjEi213lq9QYTOwm1pv4lI1nA61tdgf80CF2i5zMcu1kw==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.5.1.tgz",
+      "integrity": "sha512-IhZUcqr7Bg4LY15d87t9lDr7EyC0IPehkzH5ya5igG8zYwf3UYaYDFnVW2mckREaZyLREcH9YOouesmt4f5Ozg==",
       "dev": true,
       "requires": {}
     },
-    "pretty-hrtime": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
-      "dev": true
-    },
     "promise.series": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/promise.series/-/promise.series-0.2.0.tgz",
@@ -9912,18 +8662,6 @@
         "escape-goat": "^2.0.0"
       }
     },
-    "purgecss": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
-      "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
-      "dev": true,
-      "requires": {
-        "commander": "^6.0.0",
-        "glob": "^7.0.0",
-        "postcss": "^8.2.1",
-        "postcss-selector-parser": "^6.0.2"
-      }
-    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -9983,15 +8721,6 @@
         }
       }
     },
-    "read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
-      "dev": true,
-      "requires": {
-        "pify": "^2.3.0"
-      }
-    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -10003,15 +8732,6 @@
         "util-deprecate": "^1.0.1"
       }
     },
-    "readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "requires": {
-        "picomatch": "^2.2.1"
-      }
-    },
     "rechoir": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
@@ -10021,24 +8741,6 @@
         "resolve": "^1.1.6"
       }
     },
-    "reduce-css-calc": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
-      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
-      "dev": true,
-      "requires": {
-        "css-unit-converter": "^1.1.1",
-        "postcss-value-parser": "^3.3.0"
-      },
-      "dependencies": {
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
     "registry-auth-token": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
@@ -10122,12 +8824,6 @@
         }
       }
     },
-    "require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true
-    },
     "require-relative": {
       "version": "0.8.7",
       "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
@@ -10187,31 +8883,10 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true
     },
-    "rgb-regex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
-      "dev": true
-    },
-    "rgba-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
-      "dev": true
-    },
-    "rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
-      "requires": {
-        "glob": "^7.1.3"
-      }
-    },
     "rollup": {
-      "version": "2.60.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.60.0.tgz",
-      "integrity": "sha512-cHdv9GWd58v58rdseC8e8XIaPUo8a9cgZpnCMMDGZFDZKEODOiPPEQFXLriWr/TjXzhPPmG5bkAztPsOARIcGQ==",
+      "version": "2.61.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.61.1.tgz",
+      "integrity": "sha512-BbTXlEvB8d+XFbK/7E5doIcRtxWPRiqr0eb5vQ0+2paMM04Ye4PZY5nHOQef2ix24l/L0SpLd5hwcH15QHPdvA==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -10260,9 +8935,9 @@
       }
     },
     "rollup-plugin-postcss": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.1.tgz",
-      "integrity": "sha512-kUJHlpDGl9+kDfdUUbnerW0Mx1R0PL/6dgciUE/w19swYDBjug7RQfxIRvRGtO/cvCkynYyU8e/YFMI544vskA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz",
+      "integrity": "sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==",
       "dev": true,
       "requires": {
         "chalk": "^4.1.0",
@@ -10464,23 +9139,6 @@
       "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==",
       "dev": true
     },
-    "simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-      "dev": true,
-      "requires": {
-        "is-arrayish": "^0.3.1"
-      },
-      "dependencies": {
-        "is-arrayish": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-          "dev": true
-        }
-      }
-    },
     "sirv": {
       "version": "1.0.17",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.17.tgz",
@@ -10516,12 +9174,6 @@
         }
       }
     },
-    "slash": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-      "dev": true
-    },
     "sorcery": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
@@ -10643,9 +9295,9 @@
       }
     },
     "svelte": {
-      "version": "3.44.1",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.44.1.tgz",
-      "integrity": "sha512-4DrCEJoBvdR689efHNSxIQn2pnFwB7E7j2yLEJtHE/P8hxwZWIphCtJ8are7bjl/iVMlcEf5uh5pJ68IwR09vQ==",
+      "version": "3.44.3",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.44.3.tgz",
+      "integrity": "sha512-aGgrNCip5PQFNfq9e9tmm7EYxWLVHoFsEsmKrtOeRD8dmoGDdyTQ+21xd7qgFd8MNdKGSYvg7F9dr+Tc0yDymg==",
       "dev": true
     },
     "svelte-hmr": {
@@ -10656,9 +9308,9 @@
       "requires": {}
     },
     "svelte-preprocess": {
-      "version": "4.9.8",
-      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.9.8.tgz",
-      "integrity": "sha512-EQS/oRZzMtYdAprppZxY3HcysKh11w54MgA63ybtL+TAZ4hVqYOnhw41JVJjWN9dhPnNjjLzvbZ2tMhTsla1Og==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.1.tgz",
+      "integrity": "sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==",
       "dev": true,
       "requires": {
         "@types/pug": "^2.0.4",
@@ -10676,9 +9328,9 @@
       "dev": true
     },
     "svelte2tsx": {
-      "version": "0.4.8",
-      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.4.8.tgz",
-      "integrity": "sha512-FSaJW/PW40XIV3zrHsW4aX6fBDPUu19gl1+zupCqOeT7wRip2RBxxt5ENDsPx/U5EuQC5+ultlYDGhSi6276wQ==",
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.4.12.tgz",
+      "integrity": "sha512-aTKg+W95w16RqOPFi01icd4jlwnMzgvTlewvqrJJTLAs0kjpQ/DMhhd+iDDhDBkhKT4nDkVzEfe/LZTz1Xf6AQ==",
       "dev": true,
       "requires": {
         "dedent-js": "^1.0.1",
@@ -10708,57 +9360,6 @@
         }
       }
     },
-    "tailwindcss": {
-      "version": "2.2.19",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz",
-      "integrity": "sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==",
-      "dev": true,
-      "requires": {
-        "arg": "^5.0.1",
-        "bytes": "^3.0.0",
-        "chalk": "^4.1.2",
-        "chokidar": "^3.5.2",
-        "color": "^4.0.1",
-        "cosmiconfig": "^7.0.1",
-        "detective": "^5.2.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.2.7",
-        "fs-extra": "^10.0.0",
-        "glob-parent": "^6.0.1",
-        "html-tags": "^3.1.0",
-        "is-color-stop": "^1.1.0",
-        "is-glob": "^4.0.1",
-        "lodash": "^4.17.21",
-        "lodash.topath": "^4.5.2",
-        "modern-normalize": "^1.1.0",
-        "node-emoji": "^1.11.0",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^2.2.0",
-        "postcss-js": "^3.0.3",
-        "postcss-load-config": "^3.1.0",
-        "postcss-nested": "5.0.6",
-        "postcss-selector-parser": "^6.0.6",
-        "postcss-value-parser": "^4.1.0",
-        "pretty-hrtime": "^1.0.3",
-        "purgecss": "^4.0.3",
-        "quick-lru": "^5.1.1",
-        "reduce-css-calc": "^2.1.8",
-        "resolve": "^1.20.0",
-        "tmp": "^0.2.1"
-      },
-      "dependencies": {
-        "glob-parent": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.3"
-          }
-        }
-      }
-    },
     "tape-modern": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/tape-modern/-/tape-modern-1.1.2.tgz",
@@ -10783,15 +9384,6 @@
       "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==",
       "dev": true
     },
-    "tmp": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
-      "dev": true,
-      "requires": {
-        "rimraf": "^3.0.0"
-      }
-    },
     "to-readable-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
@@ -10847,9 +9439,9 @@
       }
     },
     "typescript": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
-      "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
+      "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==",
       "dev": true
     },
     "uniqs": {
@@ -10873,12 +9465,6 @@
       "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==",
       "dev": true
     },
-    "universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true
-    },
     "update-notifier": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-5.1.0.tgz",
@@ -10952,16 +9538,16 @@
       "dev": true
     },
     "vite": {
-      "version": "2.6.13",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.6.13.tgz",
-      "integrity": "sha512-+tGZ1OxozRirTudl4M3N3UTNJOlxdVo/qBl2IlDEy/ZpTFcskp+k5ncNjayR3bRYTCbqSOFz2JWGN1UmuDMScA==",
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.7.3.tgz",
+      "integrity": "sha512-GAY1P+9fLJOju1SRm8+hykVnEXog+E+KXuqqyMBQDriKCUIKzWnPn142yNNhSdf/ixYGYdUa5ce3A8WaEajzGw==",
       "dev": true,
       "requires": {
-        "esbuild": "^0.13.2",
+        "esbuild": "^0.13.12",
         "fsevents": "~2.3.2",
-        "postcss": "^8.3.8",
+        "postcss": "^8.3.11",
         "resolve": "^1.20.0",
-        "rollup": "^2.57.0"
+        "rollup": "^2.59.0"
       }
     },
     "wcwidth": {
@@ -11085,18 +9671,6 @@
       "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
       "dev": true
     },
-    "xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
-    },
-    "y18n": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "dev": true
-    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index 7ce25ff5..871ed306 100644
--- a/package.json
+++ b/package.json
@@ -11,34 +11,29 @@
     "test:browser": "sirv test/public -p 3000 --dev",
     "gen:docs": "node docs/generate_theming_variables_md.cjs",
     "prepare": "svelte-kit package",
-    "release": "dotenv release-it --dry-run"
+    "release": "release-it --dry-run"
   },
   "devDependencies": {
-    "@sveltejs/kit": "1.0.0-next.196",
+    "@sveltejs/kit": "1.0.0-next.202",
     "autoprefixer": "^10.4.0",
     "cross-env": "^7.0.3",
-    "dotenv-cli": "^4.1.1",
     "find-in-files": "^0.5.0",
-    "postcss": "^8.3.11",
-    "postcss-cli": "^9.0.2",
-    "postcss-import": "^14.0.2",
-    "prettier": "~2.4.1",
-    "prettier-plugin-svelte": "^2.5.0",
+    "prettier": "~2.5.1",
+    "prettier-plugin-svelte": "^2.5.1",
     "release-it": "^14.11.8",
-    "rollup": "^2.60.0",
+    "rollup": "^2.61.1",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-postcss": "^4.0.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svelte": "^7.1.0",
     "sirv-cli": "^1.0.14",
-    "svelte": "^3.44.1",
-    "svelte-preprocess": "^4.9.8",
+    "svelte": "^3.44.3",
+    "svelte-preprocess": "^4.10.1",
     "svelte-tiny-virtual-list": "^1.1.7",
-    "svelte2tsx": "^0.4.8",
-    "tailwindcss": "^2.2.19",
+    "svelte2tsx": "^0.4.12",
     "tape-modern": "^1.1.2",
-    "typescript": "^4.4.4"
+    "typescript": "^4.5.4"
   },
   "author": "Robert Balfré <rob.balfre@gmail.com> (https://github.com/rob-balfre)",
   "license": "ISC",
diff --git a/postcss.config.cjs b/postcss.config.cjs
deleted file mode 100644
index 54d66bf1..00000000
--- a/postcss.config.cjs
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-    plugins: [
-        require('postcss-import'),
-        require('tailwindcss'),
-        require('autoprefixer'),
-    ],
-};
diff --git a/rollup.config.js b/rollup.config.js
index e2899086..4db32362 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,7 +1,6 @@
 import svelte from 'rollup-plugin-svelte';
 import resolve from 'rollup-plugin-node-resolve';
 import css from 'rollup-plugin-css-only';
-import postcss from 'rollup-plugin-postcss'
 
 
 export default [
@@ -19,10 +18,7 @@ export default [
                     dev: true,
                 },
             }),
-            postcss({
-                extract: true
-            }),
-            // css(),
+            css(),
             resolve(),
         ],
     },
diff --git a/src/lib/ChevronIcon.svelte b/src/lib/ChevronIcon.svelte
index f2badc30..c1edccdb 100644
--- a/src/lib/ChevronIcon.svelte
+++ b/src/lib/ChevronIcon.svelte
@@ -12,3 +12,11 @@
           0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0
           0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z" />
 </svg>
+
+<style>
+  svg {
+      width: var(--chevron-icon-width, 20px);
+      height: var(--chevron-icon-width, 20px);
+      color: var(--chevron-icon-colour, currentColor);
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/ClearIcon.svelte b/src/lib/ClearIcon.svelte
index 18e07fea..75163453 100644
--- a/src/lib/ClearIcon.svelte
+++ b/src/lib/ClearIcon.svelte
@@ -17,6 +17,6 @@
     svg {
         width: var(--clear-icon-width, 20px);
         height: var(--clear-icon-width, 20px);
-        color: var(--clear-icon-colour, #c5cacf);
+        color: var(--clear-icon-colour, currentColor);
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/Item.svelte b/src/lib/Item.svelte
index 6de13cc2..dda78924 100644
--- a/src/lib/Item.svelte
+++ b/src/lib/Item.svelte
@@ -16,4 +16,43 @@
     class:group-item={item.isGroupItem}
     class:not-selectable={!isSelectable}>
     {@html getOptionLabel(item, filterText)}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+    .item {
+        cursor: default;
+        height: var(--height, 42px);
+        line-height: var(--height, 42px);
+        padding: var(--item-padding, 0 20px);
+        color: var(--item-color, inherit);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .item.group-item {
+        padding-left: var(--group-item-padding-left, 40px);
+    }
+
+    .item:active {
+        background: var(--item-active-background, #b9daff);
+    }
+
+    .item.active {
+        background: var(--item-is-active-bg, #007aff);
+        color: var(--item-is-active-color, #fff);
+    }
+
+    .item.not-selectable {
+        color: var(--item-is-not-selectable-color, #999);
+    }
+
+    .item.first {
+        border-radius: var(--item-first-border-radius, 4px 4px 0 0);
+    }
+
+    .item.hover:not(.active) {
+        background: var(--item-hover-bg, #e7f2ff);
+        color: var(--item-hover-color, inherit);
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/List.svelte b/src/lib/List.svelte
index fbee471b..9132ed79 100644
--- a/src/lib/List.svelte
+++ b/src/lib/List.svelte
@@ -190,7 +190,7 @@
         let styles;
 
         const base = `position:fixed;left:${left}px;min-width:${width}px;width:${
-            listAutoWidth ? width + 'px' : '100%'
+            listAutoWidth ? width + 'px' : 'auto'
         };`;
 
         const _top = `bottom:${window.innerHeight - bottom + height + listOffset}px;`;
@@ -275,3 +275,38 @@
         <div class="empty">{noOptionsMessage}</div>
     {/if}
 </div>
+
+
+<style>
+    .list {
+        box-shadow: var(--list-shadow, 0 2px 3px 0 rgba(44, 62, 80, 0.24));
+        border-radius: var(--list-border-radius, 4px);
+        max-height: var(--list-max-height, 250px);
+        overflow-y: auto;
+        background: var(--list-background, #fff);
+        position: var(--list-position, absolute);
+        z-index: var(--list-z-index, 2);
+        border: var(--list-border);
+        box-sizing: border-box;
+    }
+
+    .list .list-group-title {
+        color: var(--group-title-color, #8f8f8f);
+        cursor: default;
+        font-size: var(--group-title-font-size, 12px);
+        font-weight: var(--group-title-font-weight, 600);
+        height: var(--height, 42px);
+        line-height: var(--height, 42px);
+        padding: var(--group-title-padding, 0 20px);
+        text-overflow: ellipsis;
+        overflow-x: hidden;
+        white-space: nowrap;
+        text-transform: var(--group-title-text-transform, uppercase);
+    }
+
+    .list .empty {
+        text-align: var(--list-empty-text-align, center);
+        padding: var(--list-empty-padding, 20px 0);
+        color: var(--list-empty-color, #78848f);
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/LoadingIcon.svelte b/src/lib/LoadingIcon.svelte
index 14816ff6..1acd210b 100644
--- a/src/lib/LoadingIcon.svelte
+++ b/src/lib/LoadingIcon.svelte
@@ -13,9 +13,9 @@
 <style>
     .loading {
         padding: 0 5px;
-        width: var(--spinnerWidth, 35px);
-        height: var(--spinnerHeight, 20px);
-        color: var(--spinnerColor, #51ce6c);
+        width: var(--spinner-width, 35px);
+        height: var(--spinner-height, 20px);
+        color: var(--spinner-color, #51ce6c);
         animation: rotate 0.75s linear infinite;
         transform-origin: center center;
         margin: auto;
diff --git a/src/lib/Multi.svelte b/src/lib/Multi.svelte
index a468a5c6..5c452ed3 100644
--- a/src/lib/Multi.svelte
+++ b/src/lib/Multi.svelte
@@ -30,3 +30,38 @@
         {/if}
     </div>
 {/each}
+
+
+<style>
+    .multi-item {
+        background: var(--multi-item-bg, #ebedef);
+        margin: var(--multi-item-margin, 4px 5px 0 0);
+        border: var(--multi-item-border, 1px solid #ddd);
+        border-radius: var(--multi-item-border-radius, 4px);
+        height: var(--multi-item-height, 32px);
+        line-height: var(--multi-item-height, 32px);
+        display: flex;
+        cursor: default;
+        padding: var(--multi-item-padding, 0 6px 0 6px);
+        max-width: 100%;
+    }
+
+    .multi-item_label {
+        margin: var(--multi-label-margin, 0 5px 0 0);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .multi-item.disabled:hover {
+        background: var(--multi-item-disabled-hover-bg, #ebedef);
+        color: var(--multi-item-disabled-hover-color, #c1c6cc);
+    }
+
+    .multi-item_clear {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        --clear-icon-colour: var(--multi-item-clear-icon-color, #000);
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/Select.svelte b/src/lib/Select.svelte
index d0f6e831..94c85b2c 100644
--- a/src/lib/Select.svelte
+++ b/src/lib/Select.svelte
@@ -1,24 +1,30 @@
 <script>
     import { beforeUpdate, createEventDispatcher, onMount } from 'svelte';
-
-    export let imports = {};
-
-    const {
-        Item,
-        List,
-        Selection,
-        Multi,
-        VirtualList,
-        ChevronIcon,
-        ClearIcon,
-        LoadingIcon,
-        debounce,
-        filter,
-        getItems,
-    } = imports;
-
     const dispatch = createEventDispatcher();
 
+    import _Item from './Item.svelte';
+    import _List from './List.svelte';
+    import _Selection from './Selection.svelte';
+    import _ClearIcon from './ClearIcon.svelte';
+    import _Multi from './Multi.svelte';
+    import _ChevronIcon from './ChevronIcon.svelte';
+    import _LoadingIcon from './LoadingIcon.svelte';
+    import _filter from './filter';
+    import _getItems from './getItems';
+
+    export let Item = _Item;
+    export let List = _List;
+    export let Selection = _Selection;
+    export let filter = _filter;
+    export let getItems = _getItems;
+
+    export let Multi = _Multi;
+    export let ChevronIcon = _ChevronIcon;
+    export let ClearIcon = _ClearIcon;
+    export let LoadingIcon = _LoadingIcon;
+    export let VirtualList = null;
+    export let Icon = undefined;
+
     export let id = null;
     export let container = undefined;
     export let input = undefined;
@@ -77,13 +83,19 @@
     export let isWaiting = false;
     export let listPlacement = 'auto';
     export let listOpen = false;
+    export function debounce(fn, wait = 1) {
+        let timeout;
+        return function (...args) {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => fn.apply(this, ...args), wait);
+        };
+    }
     export let debounceWait = 300;
     export let noOptionsMessage = 'No options';
     export let hideEmptyState = false;
     export let inputAttributes = {};
     export let listAutoWidth = true;
     export let itemHeight = 40;
-    export let Icon = undefined;
     export let iconProps = {};
     export let showChevron = false;
     export let listOffset = 5;
@@ -99,7 +111,7 @@
         return [..._items, itemToCreate];
     }
 
-    let containerClasses = 'select-container';
+    let containerClasses = '';
     let activeValue;
     let prev_value;
     let prev_filterText;
@@ -281,7 +293,7 @@
     $: hasValue = isMulti ? value && value.length > 1 : value;
     $: _showChevron = showChevron && ChevronIcon;
     $: showSelectedItem = hasValue && filterText.length === 0;
-    $: showClear = !isMulti && showSelectedItem && isClearable && !isDisabled && !isWaiting;
+    $: showClear = showSelectedItem && isClearable && !isDisabled && !isWaiting;
     $: placeholderText = placeholderAlwaysShow && isMulti ? placeholder : value ? '' : placeholder;
     $: showMultiSelect = isMulti && value && value.length > 0;
     $: suggestionMode = suggestions && filterText.length === 0;
@@ -561,12 +573,14 @@
 </script>
 
 <div
-    class={containerClasses}
+    class="svelte-select {containerClasses}"
     class:error={hasError}
     class:multi={isMulti}
     class:disabled={isDisabled}
     class:focused={isFocused}
     class:list-open={listOpen}
+    class:two-icons={_showChevron && showClear}
+    class:show-chevron={_showChevron}
     style={containerStyles}
     on:click={handleClick}
     bind:this={container}>
@@ -653,3 +667,159 @@
         on:itemCreated={itemCreated}
         on:closeList={closeList} />
 {/if}
+
+<style>
+    .svelte-select {
+        --internal-padding: 0 16px;
+        border: var(--border, 1px solid #d8dbdf);
+        border-radius: var(--border-radius, 3px);
+        box-sizing: border-box;
+        height: var(--height, 42px);
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: var(--padding, var(--internal-padding));
+        background: var(--background, #fff);
+        margin: var(--margin, 0);
+        width: var(--width, 100%);
+    }
+
+    .svelte-select input {
+        cursor: default;
+        border: none;
+        color: var(--input-color, #3f4f5f);
+        height: var(--height, 42px);
+        line-height: var(--height, 42px);
+        padding: var(--input-padding, var(--padding, var(--internal-padding)));
+        width: 100%;
+        background: transparent;
+        font-size: var(--input-font-size, 14px);
+        letter-spacing: var(--input-letter-spacing, inherit);
+        position: absolute;
+        left: var(--input-left, 0);
+        margin: var(--input-margin, 0);
+        box-sizing: border-box;
+    }
+
+    .svelte-select input::placeholder {
+        color: var(--placeholder-color, #78848f);
+        opacity: var(--placeholder-opacity, 1);
+    }
+
+    .svelte-select input:focus {
+        outline: none;
+    }
+
+    .svelte-select:hover {
+        border-color: var(--border-hover-color, #b2b8bf);
+    }
+
+    .svelte-select.focused {
+        border-color: var(--border-focus-color, #006fe8);
+    }
+
+    .svelte-select.disabled {
+        background: var(--disabled-background, #ebedef);
+        border-color: var(--disabled-border-color, #ebedef);
+        color: var(--disabled-color, #c1c6cc);
+    }
+
+    .svelte-select.disabled input::placeholder {
+        color: var(--disabled-placeholder-color, #c1c6cc);
+        opacity: var(--disabled-placeholder-opacity, 1);
+    }
+
+    .svelte-select .selected-item {
+        line-height: var(--height, 42px);
+        height: var(--height, 42px);
+        overflow-x: hidden;
+        padding: var(--selected-item-padding, 0 20px 0 0);
+    }
+
+    .svelte-select .selected-item:focus {
+        outline: none;
+    }
+
+    .svelte-select .icons {
+        pointer-events: none;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-items: center;
+        right: var(--icons-right, 0);
+        top: var(--icons-top, 11px);
+        bottom: var(--icons-bottom, 11px);
+        color: var(--icons-color, #c5cacf);
+    }
+
+    .svelte-select.focused .icons,
+    .svelte-select .icons svg:hover {
+        color: var(--icons-color-focused, #2c3e50);
+    }
+
+    .svelte-select .clear-select {
+        display: flex;
+        align-items: center;
+        width: var(--clear-select-width, 30px);
+        color: var(--clear-select-color, --icons-color);
+        pointer-events: all;
+    }
+
+    .svelte-select .chevron {
+        display: flex;
+        box-shadow: -1px 0 0 0 #c5cacf;
+        width: var(--indicator-width, 35px);
+        height: var(--indicator-height, 20px);
+        color: var(--indicator-color, --icons-color);
+        pointer-events: all;
+    }
+
+    .svelte-select.list-open .chevron {
+        pointer-events: none;
+    }
+
+    .svelte-select.multi.two-icons {
+        padding-right: 60px;
+    }
+
+    .svelte-select.show-chevron,
+    .svelte-select.show-chevron input {
+        padding-right: 40px;
+    }
+
+    .svelte-select.multi {
+        padding: var(--multi-select-padding, 0 35px 0 16px);
+        min-height: 38px;
+        flex-wrap: wrap;
+        align-items: stretch;
+        display: flex;
+        height: auto;
+    }
+
+    .svelte-select.multi input {
+        padding: var(--multi-select-input-padding, 0);
+        position: relative;
+        margin: var(--multi-select-input-margin, 0);
+    }
+
+    .svelte-select.error {
+        border: var(--error-border, 1px solid #ff2d55);
+        background: var(--error-background, #fff);
+    }
+
+    .a11y-text {
+        z-index: 9999;
+        border: 0px;
+        clip: rect(1px, 1px, 1px, 1px);
+        height: 1px;
+        width: 1px;
+        position: absolute;
+        overflow: hidden;
+        padding: 0px;
+        white-space: nowrap;
+    }
+
+    .multi input {
+        flex: 1 1 40px;
+    }    
+</style>
diff --git a/src/lib/Selection.svelte b/src/lib/Selection.svelte
index 0091da9a..e4109f90 100644
--- a/src/lib/Selection.svelte
+++ b/src/lib/Selection.svelte
@@ -5,4 +5,12 @@
 
 <div class="selection">
     {@html getSelectionLabel(item)}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+    .selection {
+        text-overflow: ellipsis;
+        overflow-x: hidden;
+        white-space: nowrap;
+    }
+</style>
diff --git a/src/lib/debounce.js b/src/lib/debounce.js
deleted file mode 100644
index fc125ad1..00000000
--- a/src/lib/debounce.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function debounce(fn, wait = 1) {
-    let timeout;
-    return function (...args) {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => fn.apply(this, ...args), wait);
-    };
-}
diff --git a/src/lib/default.css b/src/lib/default.css
deleted file mode 100644
index 2c3539a5..00000000
--- a/src/lib/default.css
+++ /dev/null
@@ -1,255 +0,0 @@
-:root {
-    --border: 1px solid #d8dbdf;
-}
-
-.select-container {
-    --internal-padding: 0 16px;
-    border: var(--border);
-    border-radius: var(--border-radius, 3px);
-    box-sizing: border-box;
-    height: var(--height, 42px);
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: var(--padding, var(--internal-padding));
-    background: var(--background, #fff);
-    margin: var(--margin, 0);
-    width: var(--width, 100%);
-}
-
-.select-container input {
-    cursor: default;
-    border: none;
-    color: var(--input-color, #3f4f5f);
-    height: var(--height, 42px);
-    line-height: var(--height, 42px);
-    padding: var(--input-padding, var(--padding, var(--internal-padding)));
-    width: 100%;
-    background: transparent;
-    font-size: var(--input-font-size, 14px);
-    letter-spacing: var(--input-letter-spacing, inherit);
-    position: absolute;
-    left: var(--input-left, 0);
-    margin: var(--input-margin, 0);
-    box-sizing: border-box;
-}
-
-.select-container input::placeholder {
-    color: var(--placeholder-color, #78848f);
-    opacity: var(--placeholder-opacity, 1);
-}
-
-.select-container input:focus {
-    outline: none;
-}
-
-.select-container:hover {
-    border-color: var(--border-hover-color, #b2b8bf);
-}
-
-.select-container.focused {
-    border-color: var(--border-focus-color, #006fe8);
-}
-
-.select-container.disabled {
-    background: var(--disabled-background, #ebedef);
-    border-color: var(--disabled-border-color, #ebedef);
-    color: var(--disabled-color, #c1c6cc);
-}
-
-.select-container.disabled input::placeholder {
-    color: var(--disabled-placeholder-color, #c1c6cc);
-    opacity: var(--disabled-placeholder-opacity, 1);
-}
-
-.select-container .selected-item {
-    line-height: var(--height, 42px);
-    height: var(--height, 42px);
-    overflow-x: hidden;
-    padding: var(--selected-item-padding, 0 20px 0 0);
-}
-
-.select-container .selected-item:focus {
-    outline: none;
-}
-
-.select-container .icons {
-    pointer-events: none;
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-items: center;
-    right: var(--icons-right, 0);
-    top: var(--icons-top, 11px);
-    bottom: var(--icons-bottom, 11px);
-    color: var(--icons-color, #c5cacf);
-}
-
-.select-container.focused .icons,
-.select-container .icons svg:hover {
-    color: var(--icons-color-focused, #2c3e50);
-}
-
-.select-container .clear-select {
-    display: flex;
-    align-items: center;
-    width: var(--clear-select-width, 30px);
-    color: var(--clear-select-color, --icons-color);
-    pointer-events: all;
-}
-
-.select-container .chevron {
-    display: flex;
-    box-shadow: -1px 0 0 0 #c5cacf;
-    width: var(--indicator-width, 35px);
-    height: var(--indicator-height, 20px);
-    color: var(--indicator-color, --icons-color);
-    pointer-events: all;
-}
-
-.select-container.list-open .chevron {
-	pointer-events: none;
-    
-}
-
-.select-container.multi {
-    padding: var(--multi-select-padding, 0 35px 0 16px);
-    min-height: 38px;
-    flex-wrap: wrap;
-    align-items: stretch;
-    display: flex;
-    height: auto;
-}
-
-.select-container.multi input {
-    padding: var(--multi-select-input-padding, 0);
-    position: relative;
-    margin: var(--multi-select-input-margin, 0);
-}
-
-.select-container.error {
-    border: var(--error-border, 1px solid #ff2d55);
-    background: var(--error-background, #fff);
-}
-
-.a11y-text {
-    z-index: 9999;
-    border: 0px;
-    clip: rect(1px, 1px, 1px, 1px);
-    height: 1px;
-    width: 1px;
-    position: absolute;
-    overflow: hidden;
-    padding: 0px;
-    white-space: nowrap;
-}
-
-.list {
-    box-shadow: var(--list-shadow, 0 2px 3px 0 rgba(44, 62, 80, 0.24));
-    border-radius: var(--list-border-radius, 4px);
-    max-height: var(--list-max-height, 250px);
-    overflow-y: auto;
-    background: var(--list-background, #fff);
-    position: var(--list-position, absolute);
-    z-index: var(--list-z-index, 2);
-    border: var(--list-border, --border);
-}
-
-.list .list-group-title {
-    color: var(--group-title-color, #8f8f8f);
-    cursor: default;
-    font-size: var(--group-title-font-size, 12px);
-    font-weight: var(--group-title-font-weight, 600);
-    height: var(--height, 42px);
-    line-height: var(--height, 42px);
-    padding: var(--group-title-padding, 0 20px);
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-    white-space: nowrap;
-    text-transform: var(--group-title-text-transform, uppercase);
-}
-
-.list .empty {
-    text-align: var(--list-empty-text-align, center);
-    padding: var(--list-empty-padding, 20px 0);
-    color: var(--list-empty-color, #78848f);
-}
-
-.item {
-    cursor: default;
-    height: var(--height, 42px);
-    line-height: var(--height, 42px);
-    padding: var(--item-padding, 0 20px);
-    color: var(--item-color, inherit);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.item.group-item {
-    padding-left: var(--group-item-padding-left, 40px);
-}
-
-.item:active {
-    background: var(--item-active-background, #b9daff);
-}
-
-.item.active {
-    background: var(--item-is-active-bg, #007aff);
-    color: var(--item-is-active-color, #fff);
-}
-
-.item.not-selectable {
-    color: var(--item-is-not-selectable-color, #999);
-}
-
-.item.first {
-    border-radius: var(--item-first-border-radius, 4px 4px 0 0);
-}
-
-.item.hover:not(.active) {
-    background: var(--item-hover-bg, #e7f2ff);
-    color: var(--item-hover-color, inherit);
-}
-
-.selection {
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-    white-space: nowrap;
-}
-
-.multi input {
-    flex: 1 1 40px;
-}
-
-.multi-item {
-    background: var(--multi-item-bg, #ebedef);
-    margin: var(--multi-item-margin, 4px 5px 0 0);
-    border: var(--multi-item-border, 1px solid #ddd);
-    border-radius: var(--multi-item-border-radius, 4px);
-    height: var(--multi-item-height, 32px);
-    line-height: var(--multi-item-height, 32px);
-    display: flex;
-    cursor: default;
-    padding: var(--multi-item-padding, 0 6px 0 6px);
-    max-width: 100%;
-}
-
-.multi-item_label {
-    margin: var(--multi-label-margin, 0 5px 0 0);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.multi-item.disabled:hover {
-    background: var(--multi-item-disabled-hover-bg, #ebedef);
-    color: var(--multi-item-disabled-hover-color, #c1c6cc);
-}
-
-.multi-item_clear {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    --clear-icon-colour: var(--multi-item-clear-icon-color, #000);
-}
diff --git a/src/lib/imports.js b/src/lib/imports.js
deleted file mode 100644
index 744fb2f5..00000000
--- a/src/lib/imports.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import theme from './default.css';
-import List from './List.svelte';
-import Item from './Item.svelte';
-import Selection from './Selection.svelte';
-import Multi from './Multi.svelte';
-import LoadingIcon from './LoadingIcon.svelte';
-import ClearIcon from './ClearIcon.svelte';
-import ChevronIcon from './ChevronIcon.svelte';
-import debounce from './debounce';
-import filter from './filter';
-import getItems from './getItems';
-
-export default {
-    theme,
-    List,
-    Item,
-    Selection,
-    Multi,
-    LoadingIcon,
-    ClearIcon,
-    ChevronIcon,
-    debounce,
-    filter,
-    getItems,
-}
\ No newline at end of file
diff --git a/src/lib/tailwind.css b/src/lib/tailwind.css
index 6278adcb..258d2694 100644
--- a/src/lib/tailwind.css
+++ b/src/lib/tailwind.css
@@ -1,67 +1,67 @@
 @import 'tailwindcss/base';
 
-.select-container {
+.svelte-select {
     @apply border rounded box-border h-10 relative flex items-center px-4 py-0 bg-white m-0	w-full
         hover:border-gray-400;
 }
 
-.select-container input {
+.svelte-select input {
     @apply cursor-default border-none text-gray-600 h-10 leading-10 px-4 py-0 bg-transparent text-sm absolute left-0 m-0 w-full 
         focus:outline-none hover:border-gray-400;
 }
 
-.select-container.focused {
+.svelte-select.focused {
     @apply border-blue-600;
 }
 
-.select-container.disabled {
+.svelte-select.disabled {
     @apply bg-gray-200 border-gray-200 text-gray-600;
 }
 
-.select-container.disabled input::placeholder {
+.svelte-select.disabled input::placeholder {
     @apply text-gray-400 opacity-100;
 }
 
-.select-container .selected-item {
+.svelte-select .selected-item {
     @apply leading-10 h-10 overflow-x-hidden pr-5
         focus:outline-none;
 }
 
-.select-container .icons {
+.svelte-select .icons {
     @apply absolute flex right-0 translate-y-0 text-gray-200 pointer-events-none top-3 bottom-3;
 }
 
-.select-container .icons > * {
+.svelte-select .icons > * {
     @apply transition-colors ease-in-out duration-200;
 }
 
-.select-container .clear-select {
+.svelte-select .clear-select {
     @apply pointer-events-auto;
 }
 
-.select-container.focused .icons,
-.select-container .chevron:hover,
-.select-container .clear-select:hover {
+.svelte-select.focused .icons,
+.svelte-select .chevron:hover,
+.svelte-select .clear-select:hover {
     @apply text-gray-600;
 }
 
-.select-container .clear-select {
+.svelte-select .clear-select {
     @apply px-2 h-5 text-gray-300 flex-none w-9;
 }
 
-.select-container .chevron {
+.svelte-select .chevron {
     @apply flex pt-0 pr-2 pl-2 border-l-2 w-9 h-5 text-gray-300;
 }
 
-.select-container.multi {
+.svelte-select.multi {
     @apply pr-9 pl-4 h-auto flex-wrap items-stretch;
 }
 
-.select-container.multi input {
+.svelte-select.multi input {
     @apply p-0 relative m-0;
 }
 
-.select-container.error {
+.svelte-select.error {
     @apply border-red-500 bg-white;
 }
 
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index d2c1f28e..dc4d16f0 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,10 +1,8 @@
 <script>
     import Select from '$lib/Select.svelte';
 
-    import imports from '$lib/imports';
-
     const itemsWithGroup = [
-        { value: 'pizza', label: 'Pizza', group: 'Savory' },
+        { value: 'pizza', label: 'Pizza Pizza Pizza Pizza Pizza Pizza Pizza Pizza Pizza ', group: 'Savory' },
         { value: 'cake', label: 'Cake', group: 'Sweet' },
         { value: 'chips', label: 'Chips', group: 'Savory' },
         { value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' },
@@ -29,14 +27,15 @@
     //     { value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' },
     // ];
 
-    let value = 
-        { value: 'pizza', label: 'Pizza', group: 'Savory' }
-       
-    ;
+    let value;
+
+    let justValue;
+    $: console.log('justValue :>> ', justValue);
+    $: console.log('value :>> ', value);
 </script>
 
 <form>
-    <Select {imports} items={itemsWithGroup} bind:value showChevron />
+    <Select bind:justValue items={itemsWithGroup} listOpen bind:value showChevron listAutoWidth={false}/>
 </form>
 
 <style>
diff --git a/svelte.config.js b/svelte.config.js
index a5aa9a46..8178ee3b 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,14 +1,9 @@
-import preprocess from 'svelte-preprocess';
-
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
 		// hydrate the <div id="svelte"> element in src/app.html
 		target: '#svelte'
 	},
-	preprocess: preprocess({
-		postcss: true
-	}),
 };
 
 export default config;
diff --git a/test/src/Select/ParentContainer.svelte b/test/src/Select/ParentContainer.svelte
index 35f47216..b6883fcb 100644
--- a/test/src/Select/ParentContainer.svelte
+++ b/test/src/Select/ParentContainer.svelte
@@ -3,11 +3,10 @@
 
   export let value;
   export let items;
-  export let imports;
 </script>
 
 <div class="container">
-  <Select bind:value {items} {imports}></Select>
+  <Select bind:value {items}></Select>
 
   <p class="result">{value.label}</p>
 </div>
diff --git a/test/src/Select/Select--default.svelte b/test/src/Select/Select--default.svelte
index 0cf74610..3b500c40 100644
--- a/test/src/Select/Select--default.svelte
+++ b/test/src/Select/Select--default.svelte
@@ -1,4 +1,4 @@
-<div class="select-container">
+<div class="svelte-select">
     <span
         aria-live="polite"
         aria-atomic="false"
diff --git a/test/src/tests.js b/test/src/tests.js
index 6a3836bd..212f2f16 100644
--- a/test/src/tests.js
+++ b/test/src/tests.js
@@ -10,10 +10,7 @@ import ParentContainer from './Select/ParentContainer.svelte'
 import {assert, test} from 'tape-modern';
 import VirtualList from 'svelte-tiny-virtual-list';
 import getName from '../utils/nameGen';
-import imports from '../../src/lib/imports';
 
-import "../../src/lib/default.css";
-// import "../../src/lib/tailwind.css";
 
 function querySelectorClick(selector) {
   document.querySelector(selector).click();
@@ -164,9 +161,6 @@ test('with no data creates default elements', async (t) => {
 
   const select = new Select({
     target,
-    props: {
-      imports
-    }
   });
 
   t.htmlEqual(target.innerHTML, testTarget.innerHTML);
@@ -179,7 +173,7 @@ test('when isFocused true container adds focused class', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       isFocused: true
     }
   });
@@ -193,7 +187,7 @@ test('when isFocused changes to true input should focus', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       isFocused: false
     }
   });
@@ -202,7 +196,7 @@ test('when isFocused changes to true input should focus', async (t) => {
     select.$set({isFocused: true});
   };
 
-  const hasFocused = await focus(target.querySelector('.select-container input'), setFocus);
+  const hasFocused = await focus(target.querySelector('.svelte-select input'), setFocus);
   t.ok(hasFocused);
   select.$destroy();
 });
@@ -211,7 +205,7 @@ test('default empty list', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true
     }
   });
@@ -225,7 +219,7 @@ test('default list with five items', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithIndex
     }
@@ -240,7 +234,7 @@ test('should highlight active list item', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithIndex,
       value: {value: 'pizza', label: 'Pizza', index: 1}
@@ -262,7 +256,7 @@ test('list scrolls to active item', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithIndex.concat(extras),
       value: {value: 'sunday-roast', label: 'Sunday Roast'},
@@ -290,7 +284,7 @@ test('list scrolls to hovered item when navigating with keys', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithIndex.concat(extras)
     }
@@ -321,7 +315,7 @@ test('hover item updates on keyUp or keyDown', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: items
     }
@@ -337,7 +331,7 @@ test('on enter active item fires a itemSelected event', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithIndex
     }
@@ -361,7 +355,7 @@ test('on tab active item fires a itemSelected event', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithIndex
     }
@@ -384,7 +378,7 @@ test('on selected of current active item does not fire a itemSelected event', as
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithIndex,
       value: { value: 'chocolate', label: 'Chocolate', index: 0 }
@@ -407,7 +401,7 @@ test('selected item\'s default view', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       value: {value: 'chips', label: 'Chips'},
     }
   });
@@ -418,10 +412,7 @@ test('selected item\'s default view', async (t) => {
 
 test('select view updates with value updates', async (t) => {
   const select = new Select({
-    target,
-    props: {
-      imports
-    }
+    target
   });
 
   await handleSet(select, {value: {value: 'chips', label: 'Chips'}});
@@ -434,7 +425,7 @@ test('clear wipes value and updates view', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       value: {value: 'chips', label: 'Chips'},
     }
   });
@@ -450,11 +441,11 @@ test('clicking on Select opens List', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
     }
   });
 
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   const listContainer = document.querySelector('.list');
   t.ok(listContainer);
 
@@ -465,12 +456,12 @@ test('Select opens List populated with items', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   t.ok(target.querySelector('.list-item'));
 
   select.$destroy();
@@ -480,12 +471,12 @@ test('List starts with first item in hover state', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   t.ok(target.querySelector('.list-item .hover').innerHTML === 'Chocolate');
 
   select.$destroy();
@@ -495,12 +486,12 @@ test('select item from list', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
     }
   });
 
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   await handleKeyboard('ArrowDown');
   await handleKeyboard('ArrowDown');
   await handleKeyboard('Enter');
@@ -513,7 +504,7 @@ test('when listPosition is set to top list should be above the input', async (t)
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listOpen: true,
       listPlacement: 'top'
@@ -521,7 +512,7 @@ test('when listPosition is set to top list should be above the input', async (t)
   });
 
   const distanceOfListBottomFromViewportTop = document.querySelector('.list').getBoundingClientRect().bottom;
-  const distanceOfInputTopFromViewportTop = document.querySelector('.select-container').getBoundingClientRect().top;
+  const distanceOfInputTopFromViewportTop = document.querySelector('.svelte-select').getBoundingClientRect().top;
 
   t.ok(distanceOfListBottomFromViewportTop <= distanceOfInputTopFromViewportTop);
 
@@ -532,7 +523,7 @@ test('when listPlacement is set to bottom the list should be below the input', a
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listOpen: true,
       listPlacement: 'bottom'
@@ -541,7 +532,7 @@ test('when listPlacement is set to bottom the list should be below the input', a
 
   await wait(0);
   const distanceOfListTopFromViewportTop = document.querySelector('.list').getBoundingClientRect().top;
-  const distanceOfInputBottomFromViewportTop = document.querySelector('.select-container').getBoundingClientRect().bottom;
+  const distanceOfInputBottomFromViewportTop = document.querySelector('.svelte-select').getBoundingClientRect().bottom;
 
   t.ok(distanceOfListTopFromViewportTop >= distanceOfInputBottomFromViewportTop);
 
@@ -555,7 +546,7 @@ test('blur should close list and remove focus from select', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
@@ -564,7 +555,7 @@ test('blur should close list and remove focus from select', async (t) => {
   div.click();
   div.remove();
   t.ok(!document.querySelector('.list'));
-  t.ok(document.querySelector('.select-container input') !== document.activeElement);
+  t.ok(document.querySelector('.svelte-select input') !== document.activeElement);
   select.$destroy();
 });
 
@@ -572,17 +563,17 @@ test('selecting item should close list but keep focus on select', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  document.querySelector('.select-container').click();
+  document.querySelector('.svelte-select').click();
   await wait(0);
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'}));
   await wait(0);
   t.ok(!document.querySelector('.list'));
-  t.ok(document.querySelector('.select-container.focused'));
+  t.ok(document.querySelector('.svelte-select.focused'));
   select.$destroy();
 });
 
@@ -590,18 +581,18 @@ test('clicking Select with selected item should open list with item listed as ac
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  document.querySelector('.select-container').click();
+  document.querySelector('.svelte-select').click();
   await wait(0);
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'}));
   await wait(0);
-  document.querySelector('.select-container').click();
+  document.querySelector('.svelte-select').click();
   await wait(0);
   t.ok(document.querySelector('.list-item .hover').innerHTML === 'Cake');
   select.$destroy();
@@ -611,12 +602,12 @@ test('focus on Select input updates focus state', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
   
-  document.querySelector('.select-container input').focus();
+  document.querySelector('.svelte-select input').focus();
 
   t.ok(select.isFocused);
   select.$destroy();
@@ -626,12 +617,12 @@ test('key up and down when Select focused opens list', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  const input = document.querySelector('.select-container input');
+  const input = document.querySelector('.svelte-select input');
   input.focus();
   await wait(0);
   t.ok(select.isFocused);
@@ -646,17 +637,17 @@ test('List should keep width of parent Select', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isFocused: true
     }
   });
 
-  const input = document.querySelector('.select-container input');
+  const input = document.querySelector('.svelte-select input');
   input.focus();
   input.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   await wait(0);
-  const selectContainer = document.querySelector('.select-container');
+  const selectContainer = document.querySelector('.svelte-select');
   const listContainer = document.querySelector('.list');
   t.equal(selectContainer.offsetWidth, listContainer.offsetWidth);
 
@@ -670,15 +661,15 @@ test('Placeholder text should reappear when List is closed', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  document.querySelector('.select-container').click();
+  document.querySelector('.svelte-select').click();
   div.click();
   div.remove();
-  const selectInput = document.querySelector('.select-container input');
+  const selectInput = document.querySelector('.svelte-select input');
   t.equal(selectInput.attributes.placeholder.value, 'Please select');
 
   select.$destroy();
@@ -688,17 +679,17 @@ test('typing in Select filter will hide selected Item', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  document.querySelector('.select-container').click();
+  document.querySelector('.svelte-select').click();
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'}));
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   select.$set({filterText: 'potato'});
-  t.ok(!document.querySelector('.select-container .value'));
+  t.ok(!document.querySelector('.svelte-select .value'));
 
   select.$destroy();
 });
@@ -707,12 +698,12 @@ test('clearing selected item closes List if open', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  document.querySelector('.select-container').click();
+  document.querySelector('.svelte-select').click();
   await wait(0);
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   await wait(0);
@@ -732,17 +723,17 @@ test('closing List clears Select filter text', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  document.querySelector('.select-container').click();
+  document.querySelector('.svelte-select').click();
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   select.$set({filterText: 'potato'});
   div.click();
   div.remove();
-  const selectInput = document.querySelector('.select-container input');
+  const selectInput = document.querySelector('.svelte-select input');
   t.equal(selectInput.attributes.placeholder.value, 'Please select');
 
   select.$destroy();
@@ -755,17 +746,17 @@ test('closing List clears Select filter text', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  document.querySelector('.select-container').click();
+  document.querySelector('.svelte-select').click();
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   select.$set({filterText: 'potato'});
   div.click();
   div.remove();
-  const selectInput = document.querySelector('.select-container input');
+  const selectInput = document.querySelector('.svelte-select input');
   t.equal(selectInput.attributes.placeholder.value, 'Please select');
 
   select.$destroy();
@@ -778,17 +769,17 @@ test('closing List item clears Select filter text', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  document.querySelector('.select-container').click();
+  document.querySelector('.svelte-select').click();
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   select.$set({filterText: 'potato'});
   div.click();
   div.remove();
-  const selectInput = document.querySelector('.select-container input');
+  const selectInput = document.querySelector('.svelte-select input');
   t.equal(selectInput.attributes.placeholder.value, 'Please select');
 
   select.$destroy();
@@ -798,13 +789,13 @@ test('typing while Select is focused populates Select filter text', async (t) =>
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
   select.$set({isFocused: true});
-  document.querySelector('.select-container input').blur();
+  document.querySelector('.svelte-select input').blur();
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 't'}));
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'e'}));
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 's'}));
@@ -818,13 +809,13 @@ test('Select input placeholder wipes while item is selected', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       value: {name: 'Item #2'},
     }
   });
 
-  const selectInput = document.querySelector('.select-container input');
+  const selectInput = document.querySelector('.svelte-select input');
   t.equal(selectInput.attributes.placeholder.value, '');
 
   select.$destroy();
@@ -834,7 +825,7 @@ test('Select listOpen state controls List', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listOpen: true
     }
@@ -852,15 +843,15 @@ test('clicking Select toggles List open state', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
   t.ok(!document.querySelector('.list'));
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   t.ok(document.querySelector('.list'));
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   t.ok(!document.querySelector('.list'));
 
   select.$destroy();
@@ -870,7 +861,7 @@ test('Select filter text filters list', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
@@ -886,7 +877,7 @@ test('Select filter text filters list with itemFilter', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       itemFilter: (label, filterText, option) => label === 'Ice Cream'
     }
@@ -903,7 +894,7 @@ test('Typing in the Select filter opens List', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isFocused: true
     }
@@ -918,7 +909,7 @@ test('While filtering, the first item in List should receive hover class', async
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isFocused: true
     }
@@ -934,14 +925,14 @@ test('Select container styles can be overridden', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       value: {name: 'Item #2'},
       containerStyles: `padding-left: 40px;`
     }
   });
 
-  t.equal(document.querySelector('.select-container').style.cssText, `padding-left: 40px;`);
+  t.equal(document.querySelector('.svelte-select').style.cssText, `padding-left: 40px;`);
   select.$destroy();
 });
 
@@ -949,13 +940,13 @@ test('Select can be disabled', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isDisabled: true,
     }
   });
 
-  t.ok(document.querySelector('.select-container.disabled'));
+  t.ok(document.querySelector('.svelte-select.disabled'));
 
   select.$destroy();
 });
@@ -964,7 +955,7 @@ test('Select List closes when you click enter', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isFocused: true
     }
@@ -982,7 +973,7 @@ test('tabbing should move between tabIndexes and others Selects', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isFocused: false
     }
@@ -991,7 +982,7 @@ test('tabbing should move between tabIndexes and others Selects', async (t) => {
   const other = new Select({
     target: extraTarget,
     props: {
-      imports,
+      
       items,
       isFocused: false
     }
@@ -1008,7 +999,7 @@ test(`shouldn't be able to clear a disabled Select`, async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isDisabled: true,
       value: {name: 'Item #4'}
@@ -1025,7 +1016,7 @@ test(`two way binding between Select and it's parent component`, async (t) => {
   const parent = new ParentContainer({
     target,
     props: {
-      imports,
+      
       items,
       value: {value: 'chips', label: 'Chips'},
     }
@@ -1038,7 +1029,7 @@ test(`two way binding between Select and it's parent component`, async (t) => {
   });
 
   t.equal(document.querySelector('.selection').innerHTML, document.querySelector('.result').innerHTML);
-  document.querySelector('.select-container').click();
+  document.querySelector('.svelte-select').click();
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'}));
@@ -1056,7 +1047,7 @@ test(`show ellipsis for overflowing text in a List item`, async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: [
         {
@@ -1088,13 +1079,13 @@ test('focusing in an external textarea should close and blur it', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
 
     }
   });
 
-  const input = document.querySelector('.select-container input');
+  const input = document.querySelector('.svelte-select input');
   input.focus();
   input.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   t.ok(select.listOpen);  
@@ -1109,7 +1100,7 @@ test('clicking between Selects should close and blur other Select', async (t) =>
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isFocused: false
     }
@@ -1118,19 +1109,19 @@ test('clicking between Selects should close and blur other Select', async (t) =>
   const other = new Select({
     target: extraTarget,
     props: {
-      imports,
+      
       items,
       isFocused: false
     }
   });
 
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   t.ok(select.listOpen);
   t.ok(select.isFocused);
   t.ok(!other.isFocused);
   t.ok(!other.isFocused);
 
-  await querySelectorClick('#extra .select-container');
+  await querySelectorClick('#extra .svelte-select');
   t.ok(!select.listOpen);
   t.ok(!select.isFocused);
   t.ok(other.listOpen);
@@ -1144,7 +1135,7 @@ test('if only one item in list it should have hover state', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: [{
         index: 0,
@@ -1162,7 +1153,7 @@ test(`hovered item in a filtered list shows hover state`, async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
@@ -1181,12 +1172,12 @@ test(`data shouldn't be stripped from item - currently only saves name`, async (
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
 
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   await querySelectorClick('.list-item');
   t.equal(JSON.stringify(select.value), JSON.stringify({value: 'chocolate', label: 'Chocolate'}));
 
@@ -1197,13 +1188,13 @@ test('should not be able to clear when clearing is disabled', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isClearable: false
     }
   });
 
-  document.querySelector('.select-container').click();
+  document.querySelector('.svelte-select').click();
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'}));
 
@@ -1216,13 +1207,13 @@ test('should not be able to search when searching is disabled', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isSearchable: false
     }
   });
 
-  const selectInput = document.querySelector('.select-container input');
+  const selectInput = document.querySelector('.svelte-select input');
   t.ok(selectInput.attributes.readonly);
 
   select.$destroy();
@@ -1237,13 +1228,13 @@ test('placeholder should be prop value', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: itemsWithGroup,
       placeholder
     }
   });
 
-  const selectInput = document.querySelector('.select-container input');
+  const selectInput = document.querySelector('.svelte-select input');
   t.equal(selectInput.attributes.placeholder.value, placeholder);
 
   select.$destroy();
@@ -1256,7 +1247,7 @@ test('should display loading icon when waiting is enabled', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isWaiting: true
     }
@@ -1271,14 +1262,14 @@ test('inputStyles prop applies css to select input', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       value: {value: 'pizza', label: 'Pizza'},
       inputStyles: `padding-left: 40px;`
     }
   });
 
-  t.equal(document.querySelector('.select-container input').style.cssText, `padding-left: 40px;`);
+  t.equal(document.querySelector('.svelte-select input').style.cssText, `padding-left: 40px;`);
   select.$destroy();
 });
 
@@ -1286,7 +1277,7 @@ test('items should be grouped by groupBy expression', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithGroup,
       groupBy
@@ -1309,7 +1300,7 @@ test('clicking group header should not make a selected', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithGroup,
       groupBy: (item) => item.group
@@ -1328,7 +1319,7 @@ test('clicking an item with selectable: false should not make a selected', async
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithSelectable
     }
@@ -1348,7 +1339,7 @@ test('clicking an item with selectable not specified should make a selected', as
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithSelectable
     }
@@ -1367,7 +1358,7 @@ test('clicking an item with selectable: true should make a selected', async (t)
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithSelectable
     }
@@ -1383,7 +1374,7 @@ test('when groupBy, no active item and keydown enter is fired then list should c
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithGroup,
       groupBy: (item) => item.group
@@ -1391,7 +1382,7 @@ test('when groupBy, no active item and keydown enter is fired then list should c
   });
 
   await wait(0);
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'}));
   t.ok(!select.value);
 
@@ -1402,7 +1393,7 @@ test('when isGroupHeaderSelectable clicking group header should select createGro
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithGroup,
       isGroupHeaderSelectable: true,
@@ -1440,7 +1431,7 @@ test('group headers label should be created by getGroupHeaderLabel(item)', async
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithGroup,
       groupBy,
@@ -1469,7 +1460,7 @@ test('groups should be sorted by expression', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       items: itemsWithGroup,
       groupBy: (item) => item.group,
@@ -1489,7 +1480,7 @@ test('when isMulti is true show each item in value', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [
@@ -1510,7 +1501,7 @@ test('when isMulti is true and value is undefined show placeholder text', async
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: undefined
@@ -1526,14 +1517,14 @@ test('when isMulti is true clicking item in List will populate value', async (t)
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: undefined
     }
   });
 
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   await querySelectorClick('.list-item');
 
   t.equal(JSON.stringify(select.value), JSON.stringify([{value: 'chocolate', label: 'Chocolate'}]));
@@ -1545,7 +1536,7 @@ test('when isMulti is true items in value will not appear in List', async (t) =>
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [{value: 'chocolate', label: 'Chocolate'}]
@@ -1568,7 +1559,7 @@ test('when isMulti is true both value and filterText filters List', async (t) =>
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       listOpen: true,
       isMulti: true,
       items,
@@ -1589,7 +1580,7 @@ test('when isMulti is true clicking X on a selected item will remove it from val
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}]
@@ -1606,7 +1597,7 @@ test('when isMulti is true and all selected items have been removed then placeho
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [{value: 'chocolate', label: 'Chocolate'}]
@@ -1622,7 +1613,7 @@ test('when isMulti is true and items are selected then clear all should wipe all
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}]
@@ -1639,7 +1630,7 @@ test('when isMulti and groupBy is active then items should be selectable', async
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items: itemsWithGroup,
       groupBy: (item) => item.group
@@ -1647,7 +1638,7 @@ test('when isMulti and groupBy is active then items should be selectable', async
   });
 
   target.style.maxWidth = '400px';
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   await querySelectorClick('.list-item');
   t.equal(JSON.stringify(select.value), JSON.stringify([{"isGroupItem":true,"value":"chocolate","label":"Chocolate","group":"Sweet"}]));
 
@@ -1658,16 +1649,16 @@ test('when isMulti and selected items reach edge of container then Select height
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items
     }
   });
 
   target.style.maxWidth = '250px';
-  t.ok(document.querySelector('.select-container').scrollHeight === 42);
+  t.ok(document.querySelector('.svelte-select').scrollHeight === 42);
   await handleSet(select, {value: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}]});
-  t.ok(document.querySelector('.select-container').scrollHeight > 44);
+  t.ok(document.querySelector('.svelte-select').scrollHeight > 44);
   select.$destroy();
 });
 
@@ -1675,7 +1666,7 @@ test('when isMulti and value is populated then navigating with LeftArrow updates
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}, {value: 'chips', label: 'Chips'},],
@@ -1685,7 +1676,7 @@ test('when isMulti and value is populated then navigating with LeftArrow updates
 
   target.style.maxWidth = '100%';
 
-  const input = document.querySelector('.select-container input');
+  const input = document.querySelector('.svelte-select input');
   input.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowLeft'}));
   input.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowLeft'}));
 
@@ -1698,7 +1689,7 @@ test('when isMulti and value is populated then navigating with ArrowRight update
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}, {value: 'chips', label: 'Chips'},],
@@ -1706,7 +1697,7 @@ test('when isMulti and value is populated then navigating with ArrowRight update
     }
   });
 
-  const input = document.querySelector('.select-container input');
+  const input = document.querySelector('.svelte-select input');
   input.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowLeft'}));
   input.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowLeft'}));
   input.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowLeft'}));
@@ -1720,17 +1711,17 @@ test('when isMulti and value has items and list opens then first item in list sh
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       isFocused: true
     }
   });
 
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   await querySelectorClick('.list-item');
 
-  const input = document.querySelector('.select-container input');
+  const input = document.querySelector('.svelte-select input');
   input.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   await wait(0);
   t.ok(document.querySelector('.list-item .hover'));
@@ -1741,7 +1732,7 @@ test('when isMulti, isDisabled, and value has items then items should be locked'
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       isDisabled: true,
@@ -1758,7 +1749,7 @@ test('when isMulti is true show each item in value if simple arrays are used', a
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items: ['pizza', 'chips', 'chocolate'],
       value: ['pizza', 'chocolate']
@@ -1777,7 +1768,7 @@ test('when labelIdentifier is set you can pass a string and see the right label'
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: [{id: 0, name: 'ONE'}, {id: 1, name: 'TWO'}],
       value: {id: 0, name: 'ONE'},
       optionIdentifier: 'id',
@@ -1795,7 +1786,7 @@ test('when getValue method is set should use that key to update value', async (t
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: [{id: 0, label: 'ONE'}, {id: 1, label: 'TWO'}],
       value: {id: 0, label: 'ONE'},
       optionIdentifier: 'id'
@@ -1803,7 +1794,7 @@ test('when getValue method is set should use that key to update value', async (t
   });
 
   t.ok(select.value.id === 0);
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'}));
   window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'}));
   t.ok(select.value.id === 1);
@@ -1815,7 +1806,8 @@ test('when loadOptions method is supplied and filterText has length then items s
   const select = new Select({
     target,
     props: {
-      imports: { ...imports, Item: CustomItem, Selection: CustomItem },
+      Item: CustomItem, 
+      Selection: CustomItem,
       getOptionLabel: (option) => option.name,
       loadOptions: getPosts,
       optionIdentifier: 'id',
@@ -1835,7 +1827,7 @@ test('when noOptionsMessage is set and there are no items then show message', as
   const select = new Select({
     target,
     props: {
-      imports,
+      
       noOptionsMessage: 'SO SO SO SCANDALOUS',
       listOpen: true
     }
@@ -1850,7 +1842,7 @@ test('when getSelectionLabel method is supplied and value are no items then disp
  const select = new Select({
     target,
     props: {
-      imports,
+      
       getSelectionLabel: (option) => option.notLabel,
       value: {notLabel: 'This is not a label', value: 'not important'},
     }
@@ -1866,7 +1858,7 @@ test('when getOptionLabel method and items is supplied then display result of ge
   const select = new Select({
     target,
     props: {
-      imports,
+      
       getOptionLabel: (option) => option.notLabel,
       isFocused: true,
       items: [{notLabel: 'This is not a label', value: 'not important #1'}, {notLabel: 'This is not also not a label', value: 'not important #2'}],
@@ -1883,7 +1875,7 @@ test('when getOptionLabel method and items is supplied then display result of ge
   const select = new Select({
     target,
     props: {
-      imports,
+      
       getOptionLabel: (option) => option.notLabel,
       isFocused: true,
       items: [{notLabel: 'This is not a label', value: 'not important #1'}, {notLabel: 'This is not also not a label', value: 'not important #2'}],
@@ -1901,7 +1893,7 @@ test('when a custom Item component is supplied then use to display each item', a
   const select = new Select({
     target,
     props: {
-      imports: { ...imports, Item: CustomItem},
+      Item: CustomItem,
       getOptionLabel: (option) => option.name,
       isFocused: true,
       items: [{
@@ -1920,10 +1912,8 @@ test('when a custom Selection component is supplied then use to display selectio
   const select = new Select({
     target,
     props: {
-      imports: { ...imports, 
-        Item: CustomItem,
-        Selection: CustomItem
-      },
+      Item: CustomItem,
+      Selection: CustomItem,
       getOptionLabel: (option) => option.name,
       isFocused: true,
       items: [{
@@ -1944,7 +1934,8 @@ test('when loadOptions method is supplied, isMulti is true and filterText has le
   const select = new Select({
     target,
     props: {
-      imports: { ...imports, Item: CustomItem, Multi},
+      Item: CustomItem,
+      Multi,
       getOptionLabel: (option) => option.name,
       getSelectionLabel: (option) => option.name,
       loadOptions: getPosts,
@@ -1966,7 +1957,7 @@ test('when getSelectionLabel contains HTML then render the HTML', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       value: items[0],
       getSelectionLabel: (option) => `<p>${option.label}</p>`,
     }
@@ -1981,7 +1972,7 @@ test('when getOptionLabel contains HTML then render the HTML', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       getOptionLabel: (option) => `<p>${option.label}</p>`,
       isFocused: true
@@ -1998,7 +1989,7 @@ test('when isMulti is true, value populated and arrowLeft is pressed then no ite
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [
@@ -2019,7 +2010,7 @@ test('when hideEmptyState true then do not show "no items" div ', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listOpen: true,
       filterText: 'x',
@@ -2038,7 +2029,7 @@ test('when value changes then select event should fire', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
     }
   });
@@ -2062,7 +2053,7 @@ test('when value is cleared the clear event is fired', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       value: items[0],
     }
@@ -2085,7 +2076,7 @@ test('when multi item is cleared the clear event is fired with removed item', as
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [itemToRemove]
@@ -2108,7 +2099,7 @@ test('when items in list filter or update then first item in list should highlig
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isFocused: true
     }
@@ -2129,7 +2120,7 @@ test('when item is selected or state changes then check value[optionIdentifier]
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       value: {value: 'cake', label: 'Cake'}
     }
@@ -2151,7 +2142,7 @@ test('when isMulti and item is selected or state changes then check value[option
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [
@@ -2180,7 +2171,7 @@ test('when isFocused turns to false then check Select is no longer in focus', as
   const select = new Select({
     target,
     props: {
-      imports,
+      
       isFocused: true,
       items,
     }
@@ -2189,7 +2180,7 @@ test('when isFocused turns to false then check Select is no longer in focus', as
   const selectSecond = new Select({
     target: extraTarget,
     props: {
-      imports,
+      
       isFocused: false,
       items,
     }
@@ -2225,7 +2216,7 @@ test('when items and loadOptions method are both supplied then fallback to items
   const select = new Select({
     target,
     props: {
-      imports,
+      
       getOptionLabel: (option) => option.name,
       getSelectionLabel: (option) => option.name,
       loadOptions: getPosts,
@@ -2251,7 +2242,7 @@ test('when items is just an array of strings then render list', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listOpen: true
     }
@@ -2269,7 +2260,7 @@ test('when items are just strings then value should render', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       value: {value: 'one', label: 'one', index: 0}
     }
@@ -2292,7 +2283,7 @@ test('when VirtualList then render list', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports: { ...imports, VirtualList },
+      VirtualList,
       items,
       listOpen: true
     }
@@ -2308,7 +2299,7 @@ test('when isMulti and value has items then check each item is unique', async (t
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [
@@ -2328,7 +2319,7 @@ test('when isMulti and textFilter has length then enter should select item', asy
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       isFocused: true,
@@ -2348,7 +2339,7 @@ test('when isMulti and textFilter has length and no items in list then enter sho
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       isFocused: true,
@@ -2367,7 +2358,7 @@ test('When isMulti and no selected item then delete should do nothing', async (t
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       isFocused: true,
@@ -2386,7 +2377,7 @@ test('When list is open, filterText applied and Enter/Tab key pressed should sel
   const select = new Select({
     target,
     props: {
-      imports,
+      
       listOpen: true,
       isFocused: true,
       filterText: 'A5',
@@ -2409,7 +2400,7 @@ test('When inputAttributes is supplied each attribute is placed on the Select in
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       inputAttributes: {
         id: 'testId',
@@ -2430,7 +2421,7 @@ test('when items and value supplied as just strings then value should render cor
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: ['Pizza', 'Chocolate', 'Crisps'],
       value: 'Pizza'
     }
@@ -2445,7 +2436,7 @@ test('when isMulti with items and value supplied as just strings then value shou
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items: ['Pizza', 'Chocolate', 'Crisps'],
       value: ['Pizza']
@@ -2469,7 +2460,7 @@ test('when isMulti, groupBy and value are supplied then list should be filtered'
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items: _items,
       groupBy: (item) => item.group,
@@ -2492,7 +2483,7 @@ test('When isCreatable disabled, creator is not displayed', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isFocused: true,
       listOpen: true
@@ -2520,7 +2511,7 @@ test('When isCreatable enabled, creator displays getOptionLabel for isCreator',
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isCreatable: true,
       isFocused: true,
@@ -2548,7 +2539,7 @@ test('When isCreatable enabled, creator is not displayed when duplicate item val
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: [item],
       isCreatable: true,
       listOpen: true
@@ -2571,7 +2562,7 @@ test('When creator selected, selected item is set to created item', async (t) =>
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isCreatable: true,
       isFocused: true,
@@ -2597,7 +2588,7 @@ test('When creator is selected, created item it added to multi selection', async
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isCreatable: true,
       isFocused: true,
@@ -2625,7 +2616,7 @@ test('When creator is selected multiple times, items are all added to multi sele
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isCreatable: true,
       isFocused: true,
@@ -2654,7 +2645,7 @@ test('When isMulti and an items remove icon is clicked then item should be remov
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       items,
       isCreatable: true,
       value: [
@@ -2693,7 +2684,7 @@ test('When isCreatable with non-default item structure, item creator displays ge
   const select = new Select({
     target,
     props: {
-      imports,
+      
       optionIdentifier: 'food',
       getOptionLabel: itemDisplay,
       getSelectionLabel: itemDisplay,
@@ -2727,7 +2718,7 @@ test('When isCreatable and isMulti and optionIdentifier is supplied creator disp
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       optionIdentifier: 'foo',
       isMulti: true,
       items: _items,
@@ -2764,7 +2755,7 @@ test('When isCreatable and isMulti and optionIdentifier is supplied multiple cre
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       optionIdentifier,
       isMulti: true,
       items: _items,
@@ -2804,7 +2795,7 @@ test('When isCreatable and item is created then createItem method should only ru
   const select = new Select({
     target,
     props: {
-      imports,
+      
       isCreatable: true,
       items,
       createItem
@@ -2825,7 +2816,7 @@ test('When items are collection and value a string then lookup item using option
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       value: 'cake'
     }
@@ -2839,11 +2830,11 @@ test('When items are collection and value a string then lookup item using option
   select.$destroy();
 });
 
-test('When listAutoWidth is set to false list container should have style of width:100%', async (t) => {
+test('When listAutoWidth is set to false list container should have style of width:auto', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listAutoWidth: false,
       listOpen: true
@@ -2852,7 +2843,7 @@ test('When listAutoWidth is set to false list container should have style of wid
 
   await wait(0);
   const listWidth = document.querySelectorAll('.list')[0].style.width;
-  t.ok(listWidth === '100%');
+  t.ok(listWidth === 'auto');
   select.$destroy();
 });
 
@@ -2861,7 +2852,7 @@ test('When item is already active and is selected from list then close list', as
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listOpen: true,
       value: 'pizza'
@@ -2880,7 +2871,7 @@ test('When Icon prop is supplied then render on Select', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       Icon: TestIcon
     }
@@ -2895,7 +2886,7 @@ test('When showChevron prop is true only show chevron when there is no value on
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       value: {value: 'chocolate', label: 'Chocolate'},
       showChevron: true
@@ -2911,7 +2902,7 @@ test('When showChevron prop is true and no value show chevron on Select', async
   const select = new Select({
     target,
     props: {
-      imports: {...imports, ChevronIcon},
+      ChevronIcon,
       items,
       showChevron: true
     }
@@ -2926,7 +2917,7 @@ test('When showChevron and isClearable is true always show chevron on Select', a
   const select = new Select({
     target,
     props: {
-      imports: {...imports, ChevronIcon},
+      ChevronIcon,
       items,
       value: {value: 'chocolate', label: 'Chocolate'},
       showChevron: true,
@@ -2943,7 +2934,7 @@ test('When items and loadItems then listOpen should be false', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       getSelectionLabel: (option) => option.name,
       getOptionLabel: (option) => option.name,
       loadOptions: getPosts,
@@ -2965,15 +2956,15 @@ test('Select container classes can be injected', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       value: {value: 'cake', label: 'Cake'},
-      class: 'select-container testclass',
+      class: 'svelte-select testclass',
     },
   });
 
   t.ok(
-    document.querySelector('.select-container').classList.contains('testclass')
+    document.querySelector('.svelte-select').classList.contains('testclass')
   );
   select.$destroy();
 });
@@ -2983,7 +2974,7 @@ test('When noOptionsMessage is changed after List component has been created the
   const select = new Select({
     target,
     props: {
-      imports,
+      
       getOptionLabel: (option) => option.name,
       loadOptions: getPosts,
       optionIdentifier: 'id',
@@ -3013,7 +3004,7 @@ test('When loadOptions promise is resolved then dispatch loaded', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       loadOptions: resolvePromise,
     },
   });
@@ -3045,7 +3036,7 @@ test('When loadOptions promise is rejected then dispatch error', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       loadOptions: rejectPromise,
     },
   });
@@ -3077,7 +3068,7 @@ test('When items change then value should also update', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       value: {value: 'chips', label: 'Chips'},
     },
@@ -3105,7 +3096,7 @@ test('When items change then value should also update', async (t) => {
   const multiSelect = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [{value: 'chips', label: 'Chips'}, {value: 'pizza', label: 'Pizza'}],
@@ -3134,7 +3125,7 @@ test('When items change then value should also update but only if found in items
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       value: {value: 'chips', label: 'Chips'},
     },
@@ -3162,7 +3153,7 @@ test('When isMulti and multiFullItemClearable then clicking anywhere on the item
   const multiSelect = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       multiFullItemClearable: true,
@@ -3182,7 +3173,7 @@ test('When isMulti and filterText then items should filter out already selected
   const multiSelect = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items,
       value: [{value: 'chips', label: 'Chips'}, {value: 'pizza', label: 'Pizza'}],
@@ -3207,7 +3198,7 @@ test('when loadOptions and items is supplied then list should close on blur', as
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       loadOptions,
     }
@@ -3228,7 +3219,7 @@ test('when isCreatable and item created then event "itemCreated" should dispatch
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isCreatable: true,
       isFocused: true,
@@ -3259,7 +3250,7 @@ test('when loadOptions response returns cancelled true then dont end loading sta
   const select = new Select({
     target,
     props: {
-      imports,
+      
       loadOptions: getCancelledRes,
     }
   });
@@ -3275,7 +3266,7 @@ test('when ClearIcon replace clear icon', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports: {...imports, ClearIcon: TestClearIcon},
+      ClearIcon: TestClearIcon,
       items,
       value: {value: 'chips', label: 'Chips'}
     }
@@ -3290,14 +3281,14 @@ test('losing focus of Select should close list', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
     }
   });
 
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   t.ok(select.listOpen);
-  document.querySelector('.select-container input').blur();
+  document.querySelector('.svelte-select input').blur();
   t.ok(!select.listOpen);
 
   select.$destroy();
@@ -3309,12 +3300,12 @@ test('clicking on an external textarea should close and blur it', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
     }
   });
 
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   t.ok(select.listOpen);
   document.querySelector('textarea').focus();
   t.ok(!select.listOpen);
@@ -3327,7 +3318,7 @@ test('when switching between isMulti true/false ensure Select continues working'
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listOpen: true,
       value: {value: 'chips', label: 'Chips'}
@@ -3353,13 +3344,13 @@ test('when isSearchable is false then input should be readonly', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       isSearchable: false
     }
   });
 
-  let elem = target.querySelector('.select-container input');
+  let elem = target.querySelector('.svelte-select input');
   t.ok(elem.hasAttribute('readonly'));
 
   select.$destroy();
@@ -3370,7 +3361,7 @@ test('when esc key pressed should close list', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listOpen: true
     }
@@ -3389,7 +3380,7 @@ test('when isMulti and placeholderAlwaysShow then always show placeholder text',
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       items,
       value: [{value: 'chocolate', label: 'Chocolate'},
       {value: 'pizza', label: 'Pizza'},],
@@ -3400,7 +3391,7 @@ test('when isMulti and placeholderAlwaysShow then always show placeholder text',
   });
 
   await wait(0);
-  let elem = target.querySelector('.select-container input[type="text"]');
+  let elem = target.querySelector('.svelte-select input[type="text"]');
   t.ok(elem.placeholder === 'foo bar');
 
   select.$destroy();
@@ -3419,7 +3410,7 @@ test('when loadOptions and value then items should show on promise resolve',asyn
   const select = new Select({
     target,
     props: {
-      imports,
+      
       value: {
         value: 'chocolate', label: 'Chocolate'
       },
@@ -3447,7 +3438,7 @@ test('when loadOptions, isMulti and value then filterText should remain on promi
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       value: {
         value: 'chocolate', label: 'Chocolate'
@@ -3468,7 +3459,7 @@ test('When listOffset is set list position offset changes', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listOffset: 0,
       listOpen: true
@@ -3485,7 +3476,7 @@ test('When items are updated post onMount ensure filtering still works', async (
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: null
     },
   });
@@ -3506,7 +3497,7 @@ test('When grouped items are updated post onMount ensure filtering still works',
   const select = new Select({
     target,
     props: {
-      imports,
+      
       groupBy: item => item.group
     },
   });
@@ -3530,7 +3521,7 @@ test('When groupBy and value selected ensure filtering still works', async (t) =
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: itemsWithGroup,
       groupBy: (item) => item.group,
       
@@ -3549,7 +3540,7 @@ test('When value selected and filterText then ensure selecting the active value
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
     },
   });
@@ -3571,7 +3562,7 @@ test('When groupBy, optionIdentifier and labelIdentifier then ensure list displa
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: itemsWithGroupIds,
       optionIdentifier: '_id',
       labelIdentifier: 'name',
@@ -3595,7 +3586,7 @@ test('When groupBy, optionIdentifier, labelIdentifier and createGroupHeaderItem
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: itemsWithGroupIds,
       optionIdentifier: '_id',
       labelIdentifier: 'name',
@@ -3625,7 +3616,7 @@ test('When isMulti on:select events should fire on each item removal (including
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       items,
       isMulti: true,
       value: ['Cake', 'Chips']
@@ -3652,7 +3643,7 @@ test('When loadOptions and isCreatable then create new item is active when promi
   const select = new Select({
     target,
     props: {
-      imports,
+      
       loadOptions: itemsPromiseEmpty,
       isCreatable: true,
     },
@@ -3670,7 +3661,7 @@ test('When loadOptions and isCreatable then create new item show at bottom of re
   const select = new Select({
     target,
     props: {
-      imports,
+      
       loadOptions: itemsPromise,
       isCreatable: true,
     },
@@ -3689,7 +3680,7 @@ test('When inputAttributes.name supplied, add to hidden input', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       inputAttributes: { name: 'Foods' },
       items: items,
       showChevron: true,
@@ -3706,7 +3697,7 @@ test('When no value then hidden field should also have no value', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       inputAttributes: { name: 'Foods' },
       items: items,
       
@@ -3723,7 +3714,7 @@ test('When value then hidden field should have value.label', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: items,
       value: {value: 'cake', label: 'Cake'},
     },
@@ -3739,7 +3730,7 @@ test('When isMulti and no value then hidden field should no value', async (t) =>
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items: items,
     },
@@ -3755,7 +3746,7 @@ test('When isMulti and value then hidden fields should list value items', async
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items: items,
       value: [{value: 'cake', label: 'Cake'},  {value: 'pizza', label: 'Pizza'},]
@@ -3774,7 +3765,7 @@ test('When listOpen then aria-context describes highlighted item', async (t) =>
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: items,
       listOpen: true
     },
@@ -3792,7 +3783,7 @@ test('When listOpen and value then aria-selection describes value', async (t) =>
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: items,
       value: {value: 'cake', label: 'Cake'},
       isFocused: true
@@ -3809,7 +3800,7 @@ test('When listOpen, value and isMulti then aria-selection describes value', asy
   const select = new Select({
     target,
     props: {
-      imports: {...imports, Multi},
+      Multi,
       isMulti: true,
       items: items,
       value: [{value: 'cake', label: 'Cake'},  {value: 'pizza', label: 'Pizza'},],
@@ -3828,7 +3819,7 @@ test('When ariaValues and value supplied, then aria-selection uses default updat
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: items,
       value: {value: 'pizza', label: 'Pizza'},
       isFocused: true,
@@ -3846,7 +3837,7 @@ test('When ariaListOpen, listOpen, then aria-context uses default updated', asyn
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: items,
       listOpen: true,
       ariaListOpen: (label, count) => `label: ${label}, count: ${count}`
@@ -3863,7 +3854,7 @@ test('When ariaFocused, focused value supplied, then aria-context uses default u
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items: items,
       isFocused: true,
       ariaFocused: () => `nothing to see here.`
@@ -3881,7 +3872,7 @@ test('When id supplied then add to input', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       id: 'foods',
       items: items,
     },
@@ -3902,12 +3893,12 @@ test('allows the user to select an item by clicking with a focusable ancestor',
   const select = new Select({
     target: ancestor,
     props: {
-      imports,
+      
       items,
     },
   });
 
-  await querySelectorClick('.select-container');
+  await querySelectorClick('.svelte-select');
   await querySelectorClick('.list-item');
   t.equal(select.value.label, 'Chocolate');
 
@@ -3919,7 +3910,7 @@ test('when listOpen true on page load then list should show onMount', async (t)
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listOpen: true,
     },
@@ -3936,7 +3927,7 @@ test('when listOpen true on page load then list should show onMount', async (t)
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items,
       listOpen: true,
     },
@@ -3954,7 +3945,7 @@ test('when suggestions and no filterText then list should show suggestions', asy
   const select = new Select({
     target,
     props: {
-      imports,
+      
       loadOptions: () => {
         return Promise.resolve(['foo'])
       },
@@ -3973,7 +3964,7 @@ test('when suggestions items is selected, list should stay open and filterText s
   const select = new Select({
     target,
     props: {
-      imports,
+      
       loadOptions: () => {
         return Promise.resolve(['foo'])
       },
@@ -4006,7 +3997,7 @@ test('when VirtualList and no results then show noOptionsMessage', async (t) =>
   const select = new Select({
     target,
     props: {
-      imports: { ...imports, VirtualList },
+      VirtualList,
       items,
       listOpen: true,
       filterText: 'zzzzz'
@@ -4024,7 +4015,6 @@ test('when value is set check from item and show correct label', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports: { ...imports },
       items,
       listOpen: true,
       
@@ -4040,11 +4030,9 @@ test('if ChevronIcon and showChevron show chevron and allow click', async (t) =>
   const select = new Select({
     target,
     props: {
-      imports: { ...imports, ChevronIcon},
+      ChevronIcon,
       items,
-      
       showChevron: true
-      
     }
   });
 
@@ -4059,7 +4047,7 @@ test('when component focuses fire on:focus event', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
+      
       items
     }
   });
@@ -4069,7 +4057,7 @@ test('when component focuses fire on:focus event', async (t) => {
     f = true;
   });
 
-  let ele = document.querySelector('.select-container input');
+  let ele = document.querySelector('.svelte-select input');
   ele.focus();
 
   t.ok(f);
@@ -4082,7 +4070,6 @@ test('when component blurs fire on:blur event', async (t) => {
   const select = new Select({
     target,
     props: {
-      imports,
       items,
       isFocused: true
     }
@@ -4093,7 +4080,7 @@ test('when component blurs fire on:blur event', async (t) => {
     b = true;
   });
 
-  let ele = document.querySelector('.select-container input');
+  let ele = document.querySelector('.svelte-select input');
   ele.blur();
 
   t.ok(b);
@@ -4101,4 +4088,4 @@ test('when component blurs fire on:blur event', async (t) => {
   select.$destroy();
 });
 
- // suggestions tests here...
\ No newline at end of file
+ // TODO: suggestions tests
\ No newline at end of file