AutoComplete component

2025-09-20 04:13:02 +00:00 · 2022-04-20 20:36:38 +02:00 · 2022-04-20 20:36:38 +02:00 · 2f406f0328
commit 2f406f0328
parent 099fcbcda8 4805b8e862
23 changed files with 23879 additions and 2327 deletions
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@ -8,6 +8,8 @@
 - [`AccordionItem`](#accordionitem)
 - [`AccordionSkeleton`](#accordionskeleton)
 - [`AspectRatio`](#aspectratio)
+- [`AutoComplete`](#autocomplete)
+- [`AutoCompleteSkeleton`](#autocompleteskeleton)
 - [`Breadcrumb`](#breadcrumb)
 - [`BreadcrumbItem`](#breadcrumbitem)
 - [`BreadcrumbSkeleton`](#breadcrumbskeleton)
@ -269,6 +271,86 @@ None.

 None.

+## `AutoComplete`
+
+### Types
+
+```ts
+export type AutoCompleteItemId = any;
+
+export type AutoCompleteItemText = string;
+
+export interface AutoCompleteItem {
+  id: AutoCompleteItemId;
+  text: AutoCompleteItemText;
+}
+```
+
+### Props
+
+| Prop name     | Kind             | Reactive | Type                                            | Default value                                         | Description                                   |
+| :------------ | :--------------- | :------- | :---------------------------------------------- | ----------------------------------------------------- | --------------------------------------------- |
+| ref           | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>       | <code>null</code>                                     | Obtain a reference to the button HTML element |
+| inline        | <code>let</code> | Yes      | <code>boolean</code>                            | <code>false</code>                                    | Set to `true` to use the inline variant       |
+| open          | <code>let</code> | Yes      | <code>boolean</code>                            | <code>false</code>                                    | Set to `true` to open the dropdown            |
+| selectedId    | <code>let</code> | Yes      | <code>AutoCompleteItemId</code>                 | <code>undefined</code>                                | Specify the selected item id                  |
+| filteredItems | <code>let</code> | Yes      | <code>[]</code>                                 | <code>[]</code>                                       | --                                            |
+| items         | <code>let</code> | No       | <code>AutoCompleteItem[]</code>                 | <code>[]</code>                                       | Set the dropdown items                        |
+| itemToString  | <code>let</code> | No       | <code>(item: AutoCompleteItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item       |
+| type          | <code>let</code> | No       | <code>"default" &#124; "inline"</code>          | <code>"default"</code>                                | Specify the type of dropdown                  |
+| direction     | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>              | <code>"bottom"</code>                                 | Specify the direction of the dropdown menu    |
+| size          | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>       | <code>undefined</code>                                | Specify the size of the dropdown field        |
+| light         | <code>let</code> | No       | <code>boolean</code>                            | <code>false</code>                                    | Set to `true` to enable the light variant     |
+| disabled      | <code>let</code> | No       | <code>boolean</code>                            | <code>false</code>                                    | Set to `true` to disable the dropdown         |
+| titleText     | <code>let</code> | No       | <code>string</code>                             | <code>""</code>                                       | Specify the title text                        |
+| invalid       | <code>let</code> | No       | <code>boolean</code>                            | <code>false</code>                                    | Set to `true` to indicate an invalid state    |
+| invalidText   | <code>let</code> | No       | <code>string</code>                             | <code>""</code>                                       | Specify the invalid state text                |
+| warn          | <code>let</code> | No       | <code>boolean</code>                            | <code>false</code>                                    | Set to `true` to indicate an warning state    |
+| warnText      | <code>let</code> | No       | <code>string</code>                             | <code>""</code>                                       | Specify the warning state text                |
+| helperText    | <code>let</code> | No       | <code>string</code>                             | <code>""</code>                                       | Specify the helper text                       |
+| hideLabel     | <code>let</code> | No       | <code>boolean</code>                            | <code>false</code>                                    | Set to `true` to visually hide the label text |
+| id            | <code>let</code> | No       | <code>string</code>                             | <code>"ccs-" + Math.random().toString(36)</code>      | Set an id for the list box component          |
+| name          | <code>let</code> | No       | <code>string</code>                             | <code>undefined</code>                                | Specify a name attribute for the list box     |
+| placeholder   | <code>let</code> | No       | --                                              | <code>null</code>                                     | Specify the placeholder text                  |
+
+### Slots
+
+| Slot name | Default | Props                                                    | Fallback                          |
+| :-------- | :------ | :------------------------------------------------------- | :-------------------------------- |
+| --        | Yes     | <code>{ item: AutoCompleteItem; index: number; } </code> | <code>{itemToString(item)}</code> |
+
+### Events
+
+| Event name | Type       | Detail                                                                          |
+| :--------- | :--------- | :------------------------------------------------------------------------------ |
+| select     | dispatched | <code>{ selectedId: AutoCompleteItemId, selectedItem: AutoCompleteItem }</code> |
+| change     | forwarded  | --                                                                              |
+| focus      | forwarded  | --                                                                              |
+| blur       | forwarded  | --                                                                              |
+| input      | forwarded  | --                                                                              |
+| clear      | dispatched | --                                                                              |
+
+## `AutoCompleteSkeleton`
+
+### Props
+
+| Prop name | Kind             | Reactive | Type                 | Default value      | Description                          |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
+| hideLabel | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text |
+
+### Slots
+
+None.
+
+### Events
+
+| Event name | Type      | Detail |
+| :--------- | :-------- | :----- |
+| click      | forwarded | --     |
+| mouseover  | forwarded | --     |
+| mouseenter | forwarded | --     |
+| mouseleave | forwarded | --     |
+
 ## `Breadcrumb`

 ### Props
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -19,7 +19,7 @@ cd carbon-components-svelte
 Set the original repository as the upstream:

 ```sh
-git remote add upstream git@github.com:IBM/carbon-components-svelte.git
+git remote add upstream git@github.com:carbon-design-system/carbon-components-svelte.git
 # verify that the upstream is added
 git remote -v
 ```
@ -121,6 +121,21 @@ export {
 } from "./ComposedModal";
 ```

+Then fork [carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte).
+
+```sh
+cd carbon-preprocess-svelte
+```
+
+Link `"carbon-components-svelte"`:
+
+```sh
+yarn link "carbon-components-svelte"
+yarn install
+```
+
+Add it to `src/carbon-components-svelte.js`
+
 ### Run `yarn build:docs`

 Run the following command to re-generate TypeScript definitions and documentation.
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@ -1,5 +1,5 @@
 {
-  "total": 165,
+  "total": 167,
  "components": [
    {
      "moduleName": "Accordion",
@ -231,6 +231,325 @@
      "typedefs": [],
      "rest_props": { "type": "Element", "name": "div" }
    },
+    {
+      "moduleName": "AutoComplete",
+      "filePath": "src/AutoComplete/AutoComplete.svelte",
+      "props": [
+        {
+          "name": "items",
+          "kind": "let",
+          "description": "Set full list of items",
+          "type": "AutoCompleteItem[]",
+          "value": "[]",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "itemToString",
+          "kind": "let",
+          "description": "Override the display of a dropdown item",
+          "type": "(item: AutoCompleteItem) => string",
+          "value": "(item) => item.text || item.id",
+          "isFunction": true,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "selectedId",
+          "kind": "let",
+          "description": "Specify the selected item id",
+          "type": "AutoCompleteItemId",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "selectedItem",
+          "kind": "let",
+          "description": "Specify the selected item",
+          "type": "AutoCompleteItem",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "type",
+          "kind": "let",
+          "description": "Specify the type of dropdown",
+          "type": "\"default\" | \"inline\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "direction",
+          "kind": "let",
+          "description": "Specify the direction of the dropdown menu",
+          "type": "\"bottom\" | \"top\"",
+          "value": "\"bottom\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "size",
+          "kind": "let",
+          "description": "Specify the size of the dropdown field",
+          "type": "\"sm\" | \"lg\" | \"xl\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "open",
+          "kind": "let",
+          "description": "Set to `true` to open the dropdown",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "inline",
+          "kind": "let",
+          "description": "Set to `true` to use the inline variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "light",
+          "kind": "let",
+          "description": "Set to `true` to enable the light variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the dropdown",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "titleText",
+          "kind": "let",
+          "description": "Specify the title text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "translateWithId",
+          "kind": "let",
+          "description": "Override the default translation ids",
+          "type": "(id: any) => string",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "invalid",
+          "kind": "let",
+          "description": "Set to `true` to indicate an invalid state",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "invalidText",
+          "kind": "let",
+          "description": "Specify the invalid state text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "warn",
+          "kind": "let",
+          "description": "Set to `true` to indicate an warning state",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "warnText",
+          "kind": "let",
+          "description": "Specify the warning state text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "helperText",
+          "kind": "let",
+          "description": "Specify the helper text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "hideLabel",
+          "kind": "let",
+          "description": "Set to `true` to visually hide the label text",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "id",
+          "kind": "let",
+          "description": "Set an id for the list box component",
+          "type": "string",
+          "value": "\"ccs-\" + Math.random().toString(36)",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "name",
+          "kind": "let",
+          "description": "Specify a name attribute for the list box",
+          "type": "string",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "ref",
+          "kind": "let",
+          "description": "Obtain a reference to the button HTML element",
+          "type": "null | HTMLInputElement",
+          "value": "null",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "placeholder",
+          "kind": "let",
+          "description": "Specify the placeholder text",
+          "value": "null",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "moduleExports": [],
+      "slots": [
+        {
+          "name": "__default__",
+          "default": true,
+          "fallback": "{itemToString(item)}",
+          "slot_props": "{ item: AutoCompleteItem; index: number; }"
+        }
+      ],
+      "events": [
+        {
+          "type": "dispatched",
+          "name": "select",
+          "detail": "{ selectedId: AutoCompleteItemId, selectedItem: AutoCompleteItem }"
+        },
+        { "type": "forwarded", "name": "change", "element": "input" },
+        { "type": "forwarded", "name": "focus", "element": "input" },
+        { "type": "forwarded", "name": "blur", "element": "input" },
+        { "type": "forwarded", "name": "input", "element": "input" },
+        { "type": "dispatched", "name": "clear" }
+      ],
+      "typedefs": [
+        {
+          "type": "any",
+          "name": "AutoCompleteItemId",
+          "ts": "type AutoCompleteItemId = any"
+        },
+        {
+          "type": "string",
+          "name": "AutoCompleteItemText",
+          "ts": "type AutoCompleteItemText = string"
+        },
+        {
+          "type": "{ id: AutoCompleteItemId; text: AutoCompleteItemText; }",
+          "name": "AutoCompleteItem",
+          "ts": "interface AutoCompleteItem { id: AutoCompleteItemId; text: AutoCompleteItemText; }"
+        }
+      ],
+      "rest_props": { "type": "Element", "name": "div" }
+    },
+    {
+      "moduleName": "AutoCompleteSkeleton",
+      "filePath": "src/AutoComplete/AutoCompleteSkeleton.svelte",
+      "props": [
+        {
+          "name": "hideLabel",
+          "kind": "let",
+          "description": "Set to `true` to hide the label text",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "moduleExports": [],
+      "slots": [],
+      "events": [
+        { "type": "forwarded", "name": "click", "element": "div" },
+        { "type": "forwarded", "name": "mouseover", "element": "div" },
+        { "type": "forwarded", "name": "mouseenter", "element": "div" },
+        { "type": "forwarded", "name": "mouseleave", "element": "div" }
+      ],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "div" }
+    },
    {
      "moduleName": "Breadcrumb",
      "filePath": "src/Breadcrumb/Breadcrumb.svelte",
--- a/docs/src/pages/components/AutoComplete.svx
+++ b/docs/src/pages/components/AutoComplete.svx
@ -0,0 +1,101 @@
+---
+components: ["AutoComplete", "AutoCompleteSkeleton"]
+---
+
+<script>
+  import { AutoComplete, AutoCompleteSkeleton, InlineNotification } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+`AutoComplete` is keyed for performance reasons.
+
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
+</InlineNotification>
+
+### Default
+
+<AutoComplete titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+  {id: "11", text: "Email1"},
+  {id: "12", text: "Email2"},
+  {id: "2", text: "Fax"}]}" />
+
+### Custom slot
+
+Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
+
+<FileSource src="/framed/AutoComplete/AutoCompleteSlot" />
+
+### Hidden label
+
+<AutoComplete hideLabel titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Format item display text
+
+Use the `itemToString` prop to format the display of individual items.
+
+<AutoComplete itemToString={item => {
+  return item.text + ' (' + item.id +')'
+}} titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Multiple dropdowns
+
+<FileSource src="/framed/AutoComplete/MultipleAutoComplete" />
+
+### Top direction
+
+Set `direction` to `"top"` for the dropdown menu to appear above the input.
+
+<AutoComplete direction="top" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Light variant
+
+<AutoComplete light titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Inline variant
+
+<AutoComplete type="inline" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Extra-large size
+
+<AutoComplete size="xl" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Small size
+
+<AutoComplete size="sm" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Invalid state
+
+<AutoComplete invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Warning state
+
+<AutoComplete warn warnText="This contact method is not associated with your account" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Disabled state
+
+<AutoComplete disabled titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
+  {id: "1", text: "Email"},
+  {id: "2", text: "Fax"}]}" />
+
+### Skeleton
+
+<AutoCompleteSkeleton />
--- a/docs/src/pages/framed/AutoComplete/AutoCompleteSlot.svelte
+++ b/docs/src/pages/framed/AutoComplete/AutoCompleteSlot.svelte
@ -0,0 +1,29 @@
+<script>
+  import { AutoComplete } from "carbon-components-svelte";
+</script>
+
+<AutoComplete
+  titleText="Contact"
+  selectedId="0"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+  let:item
+  let:index
+>
+  <div>
+    <strong>{item.text}</strong>
+  </div>
+  <div>
+    id: {item.id} - index:
+    {index}
+  </div>
+</AutoComplete>
+
+<style>
+  :global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
+    height: auto;
+  }
+</style>
--- a/docs/src/pages/framed/AutoComplete/MultipleAutoComplete.svelte
+++ b/docs/src/pages/framed/AutoComplete/MultipleAutoComplete.svelte
@ -0,0 +1,42 @@
+<script>
+  import { AutoComplete } from "carbon-components-svelte";
+
+  const items = [
+    { id: "0", text: "Slack" },
+    { id: "1", text: "Email" },
+    { id: "2", text: "Fax" },
+  ];
+
+  let auto_complete1_selectedId = "0";
+  let auto_complete2_selectedId = "1";
+
+  const formatSelected = (id) =>
+    items.find((item) => item.id === id)?.text ?? "N/A";
+
+  $: primary = formatSelected(auto_complete1_selectedId);
+  $: secondary = formatSelected(auto_complete2_selectedId);
+</script>
+
+<AutoComplete
+  titleText="Primary contact"
+  bind:selectedId="{auto_complete1_selectedId}"
+  items="{items}"
+/>
+
+<div>Primary: {primary}</div>
+
+<AutoComplete
+  invalid="{auto_complete1_selectedId === auto_complete2_selectedId}"
+  invalidText="Secondary contact method must be different from the primary contact"
+  titleText="Secondary contact"
+  bind:selectedId="{auto_complete2_selectedId}"
+  items="{items}"
+/>
+
+<div>Secondary: {secondary}</div>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
--- a/examples/sapper/package-lock.json
+++ b/examples/sapper/package-lock.json
--- a/examples/sapper/src/routes/index.svelte
+++ b/examples/sapper/src/routes/index.svelte
@ -1,5 +1,16 @@
 <script>
-  import { Button } from "carbon-components-svelte";
+  import { AutoComplete, Button } from "carbon-components-svelte";
 </script>

+<AutoComplete
+  titleText="Contact"
+  selectedId="0"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '11', text: 'Email1' },
+    { id: '12', text: 'Email2' },
+    { id: '2', text: 'Fax' },
+  ]}"
+/>
+
 <Button>Primary button</Button>
--- a/examples/sapper/yarn.lock
+++ b/examples/sapper/yarn.lock
--- a/examples/sveltekit/package-lock.json
+++ b/examples/sveltekit/package-lock.json
--- a/examples/sveltekit/src/routes/index.svelte
+++ b/examples/sveltekit/src/routes/index.svelte
@ -1,6 +1,11 @@
 <script>
  import { Button, truncate, breakpoints } from "carbon-components-svelte";
  import { Airplane } from "carbon-pictograms-svelte";
+
+  import { AutoComplete } from "carbon-components-svelte";
+
+  let selectedId = 0;
+    let selectedItem = undefined;
 </script>

 <Button>Primary button</Button>
@ -10,3 +15,18 @@
 <div use:truncate>Text...</div>

 {JSON.stringify(breakpoints)}
+
+<AutoComplete
+titleText="Contact"
+bind:selectedId
+bind:selectedItem
+placeholder="Placeholder"
+items="{[
+  { id: '0', text: 'Slack' },
+  { id: '11', text: 'Email1' },
+  { id: '12', text: 'Email2' },
+  { id: '2', text: 'Fax' },
+]}"
+/>
+
+Selected: {selectedItem?.text} ({selectedId})
--- a/examples/sveltekit/yarn.lock
+++ b/examples/sveltekit/yarn.lock
@ -3,12 +3,12 @@


 "@rollup/pluginutils@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.0.tgz#a14bbd058fdbba0a5647143b16ed0d86fb60bd08"
-  integrity sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA==
+  "integrity" "sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA=="
+  "resolved" "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.0.tgz"
+  "version" "4.2.0"
  dependencies:
-    estree-walker "^2.0.1"
-    picomatch "^2.2.2"
+    "estree-walker" "^2.0.1"
+    "picomatch" "^2.2.2"

 "@sveltejs/kit@1.0.0-next.314":
  version "1.0.0-next.314"
@ -20,57 +20,57 @@
    vite "^2.9.0"

 "@sveltejs/vite-plugin-svelte@^1.0.0-next.32":
-  version "1.0.0-next.40"
-  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.40.tgz#8f39cd5fa5400697bef1cefe112e77f08b90c23e"
-  integrity sha512-DtXF01fYGEJkbC7GntU/7jaq9M1SwyyNCkbDA+cfQSXRpm3H7zbu0M80wSQBSpntdd+hgSdxKCxv4GgX6/zI6w==
+  "integrity" "sha512-DtXF01fYGEJkbC7GntU/7jaq9M1SwyyNCkbDA+cfQSXRpm3H7zbu0M80wSQBSpntdd+hgSdxKCxv4GgX6/zI6w=="
+  "resolved" "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.40.tgz"
+  "version" "1.0.0-next.40"
  dependencies:
    "@rollup/pluginutils" "^4.2.0"
-    debug "^4.3.3"
-    kleur "^4.1.4"
-    magic-string "^0.26.1"
-    svelte-hmr "^0.14.11"
+    "debug" "^4.3.3"
+    "kleur" "^4.1.4"
+    "magic-string" "^0.26.1"
+    "svelte-hmr" "^0.14.11"

 "@types/node@*":
-  version "17.0.23"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.23.tgz#3b41a6e643589ac6442bdbd7a4a3ded62f33f7da"
-  integrity sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==
+  "integrity" "sha512-aveCYRQbgTH9Pssp1voEP7HiuWlD2jW2BO56w+bVrJn04i61yh6mRfoKO6hEYQD9vF+W8Chkwc6j1M36uPkx4g=="
+  "resolved" "https://registry.npmjs.org/@types/node/-/node-17.0.24.tgz"
+  "version" "17.0.24"

 "@types/pug@^2.0.4":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.6.tgz#f830323c88172e66826d0bde413498b61054b5a6"
-  integrity sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==
+  "integrity" "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg=="
+  "resolved" "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz"
+  "version" "2.0.6"

 "@types/sass@^1.16.0":
-  version "1.43.1"
-  resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.43.1.tgz#86bb0168e9e881d7dade6eba16c9ed6d25dc2f68"
-  integrity sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==
+  "integrity" "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g=="
+  "resolved" "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz"
+  "version" "1.43.1"
  dependencies:
    "@types/node" "*"

-balanced-match@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
-  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+"balanced-match@^1.0.0":
+  "integrity" "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+  "resolved" "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
+  "version" "1.0.2"

-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+"brace-expansion@^1.1.7":
+  "integrity" "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="
+  "resolved" "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
+  "version" "1.1.11"
  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
+    "balanced-match" "^1.0.0"
+    "concat-map" "0.0.1"

-buffer-crc32@^0.2.5:
-  version "0.2.13"
-  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
-  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
+"buffer-crc32@^0.2.5":
+  "integrity" "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI="
+  "resolved" "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz"
+  "version" "0.2.13"

 carbon-components-svelte@^0.63.0:
  version "0.63.0"
  resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.63.0.tgz#ab46b431b66a4e458ff3647c51d6789214c13fad"
  integrity sha512-oG5pW1/Tzuc/2MW5ekRLp6oGmIZjvIoY8y/Dg7M8Bj35hB6ofgs5BQPLa/UjsnVOEC3YqNVu18vXnvFqkjAA8A==
  dependencies:
-    flatpickr "4.6.9"
+    "flatpickr" "4.6.9"

 carbon-pictograms-svelte@^12.0.2:
  version "12.0.2"
@ -86,37 +86,37 @@ carbon-preprocess-svelte@^0.9.0:
    svelte-preprocess "^4.10.5"
    typescript "^4.6.3"

-commander@^8.0.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
-  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+"commander@^8.0.0":
+  "integrity" "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
+  "resolved" "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz"
+  "version" "8.3.0"

-concat-map@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+"concat-map@0.0.1":
+  "integrity" "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+  "resolved" "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+  "version" "0.0.1"

-cssesc@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
-  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+"cssesc@^3.0.0":
+  "integrity" "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
+  "resolved" "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
+  "version" "3.0.0"

-debug@^4.3.3:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
-  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+"debug@^4.3.3":
+  "integrity" "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ=="
+  "resolved" "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
+  "version" "4.3.4"
  dependencies:
-    ms "2.1.2"
+    "ms" "2.1.2"

-detect-indent@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
-  integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
+"detect-indent@^6.0.0":
+  "integrity" "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA=="
+  "resolved" "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz"
+  "version" "6.1.0"

-es6-promise@^3.1.2:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
-  integrity sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=
+"es6-promise@^3.1.2":
+  "integrity" "sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM="
+  "resolved" "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz"
+  "version" "3.3.1"

 esbuild-android-64@0.14.36:
  version "0.14.36"
@ -244,263 +244,258 @@ esbuild@^0.14.27:
    esbuild-windows-64 "0.14.36"
    esbuild-windows-arm64 "0.14.36"

-estree-walker@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
-  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+"estree-walker@^2.0.1":
+  "integrity" "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+  "resolved" "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
+  "version" "2.0.2"

-flatpickr@4.6.9:
-  version "4.6.9"
-  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.9.tgz#9a13383e8a6814bda5d232eae3fcdccb97dc1499"
-  integrity sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==
+"fs.realpath@^1.0.0":
+  "integrity" "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+  "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
+  "version" "1.0.0"

-fs.realpath@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+"fsevents@~2.3.2":
+  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
+  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  "version" "2.3.2"

-fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+"function-bind@^1.1.1":
+  "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+  "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
+  "version" "1.1.1"

-function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-
-glob@^7.1.3, glob@^7.1.7:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
-  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+"glob@^7.1.3", "glob@^7.1.7":
+  "integrity" "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q=="
+  "resolved" "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz"
+  "version" "7.2.0"
  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
+    "fs.realpath" "^1.0.0"
+    "inflight" "^1.0.4"
+    "inherits" "2"
+    "minimatch" "^3.0.4"
+    "once" "^1.3.0"
+    "path-is-absolute" "^1.0.0"

-graceful-fs@^4.1.3:
-  version "4.2.9"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
-  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
+"graceful-fs@^4.1.3":
+  "integrity" "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+  "resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
+  "version" "4.2.10"

-has@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
-  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+"has@^1.0.3":
+  "integrity" "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw=="
+  "resolved" "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
+  "version" "1.0.3"
  dependencies:
-    function-bind "^1.1.1"
+    "function-bind" "^1.1.1"

-inflight@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+"inflight@^1.0.4":
+  "integrity" "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk="
+  "resolved" "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
+  "version" "1.0.6"
  dependencies:
-    once "^1.3.0"
-    wrappy "1"
+    "once" "^1.3.0"
+    "wrappy" "1"

-inherits@2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+"inherits@2":
+  "integrity" "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+  "resolved" "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+  "version" "2.0.4"

-is-core-module@^2.8.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
-  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
+"is-core-module@^2.8.1":
+  "integrity" "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA=="
+  "resolved" "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz"
+  "version" "2.8.1"
  dependencies:
-    has "^1.0.3"
+    "has" "^1.0.3"

-kleur@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.4.tgz#8c202987d7e577766d039a8cd461934c01cda04d"
-  integrity sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==
+"kleur@^4.1.4":
+  "integrity" "sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA=="
+  "resolved" "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz"
+  "version" "4.1.4"

-magic-string@^0.25.7:
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
-  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+"magic-string@^0.25.7":
+  "integrity" "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ=="
+  "resolved" "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz"
+  "version" "0.25.9"
  dependencies:
-    sourcemap-codec "^1.4.8"
+    "sourcemap-codec" "^1.4.8"

-magic-string@^0.26.1:
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.1.tgz#ba9b651354fa9512474199acecf9c6dbe93f97fd"
-  integrity sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg==
+"magic-string@^0.26.1":
+  "integrity" "sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg=="
+  "resolved" "https://registry.npmjs.org/magic-string/-/magic-string-0.26.1.tgz"
+  "version" "0.26.1"
  dependencies:
-    sourcemap-codec "^1.4.8"
+    "sourcemap-codec" "^1.4.8"

-min-indent@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
-  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+"min-indent@^1.0.0":
+  "integrity" "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
+  "resolved" "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz"
+  "version" "1.0.1"

-minimatch@^3.0.4:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
-  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+"minimatch@^3.0.4":
+  "integrity" "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="
+  "resolved" "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
+  "version" "3.1.2"
  dependencies:
-    brace-expansion "^1.1.7"
+    "brace-expansion" "^1.1.7"

-minimist@^1.2.0, minimist@^1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
-  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+"minimist@^1.2.0", "minimist@^1.2.6":
+  "integrity" "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+  "resolved" "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz"
+  "version" "1.2.6"

-mkdirp@^0.5.1:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
-  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+"mkdirp@^0.5.1":
+  "integrity" "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw=="
+  "resolved" "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz"
+  "version" "0.5.6"
  dependencies:
-    minimist "^1.2.6"
+    "minimist" "^1.2.6"

-mri@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
-  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+"mri@^1.1.0":
+  "integrity" "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="
+  "resolved" "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz"
+  "version" "1.2.0"

-ms@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+"ms@2.1.2":
+  "integrity" "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+  "resolved" "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
+  "version" "2.1.2"

-nanoid@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
-  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
+"nanoid@^3.3.1":
+  "integrity" "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw=="
+  "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz"
+  "version" "3.3.1"

-once@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+"once@^1.3.0":
+  "integrity" "sha1-WDsap3WWHUsROsF9nFC6753Xa9E="
+  "resolved" "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
+  "version" "1.4.0"
  dependencies:
-    wrappy "1"
+    "wrappy" "1"

-path-is-absolute@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+"path-is-absolute@^1.0.0":
+  "integrity" "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+  "resolved" "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
+  "version" "1.0.1"

-path-parse@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
-  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+"path-parse@^1.0.7":
+  "integrity" "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+  "resolved" "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
+  "version" "1.0.7"

-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+"picocolors@^1.0.0":
+  "integrity" "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+  "resolved" "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
+  "version" "1.0.0"

-picomatch@^2.2.2:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
-  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+"picomatch@^2.2.2":
+  "integrity" "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+  "resolved" "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
+  "version" "2.3.1"

-postcss-selector-parser@^6.0.6:
-  version "6.0.9"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
-  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
+"postcss-selector-parser@^6.0.6":
+  "integrity" "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ=="
+  "resolved" "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz"
+  "version" "6.0.9"
  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
+    "cssesc" "^3.0.0"
+    "util-deprecate" "^1.0.2"

 postcss@^8.3.5, postcss@^8.4.12:
  version "8.4.12"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
  integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
  dependencies:
-    nanoid "^3.3.1"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
+    "nanoid" "^3.3.1"
+    "picocolors" "^1.0.0"
+    "source-map-js" "^1.0.2"

 purgecss@^4.1.3:
  version "4.1.3"
  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.1.3.tgz#683f6a133c8c4de7aa82fe2746d1393b214918f7"
  integrity sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==
  dependencies:
-    commander "^8.0.0"
-    glob "^7.1.7"
-    postcss "^8.3.5"
-    postcss-selector-parser "^6.0.6"
+    "commander" "^8.0.0"
+    "glob" "^7.1.7"
+    "postcss" "^8.3.5"
+    "postcss-selector-parser" "^6.0.6"

-resolve@^1.22.0:
-  version "1.22.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
-  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+"resolve@^1.22.0":
+  "integrity" "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw=="
+  "resolved" "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz"
+  "version" "1.22.0"
  dependencies:
-    is-core-module "^2.8.1"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
+    "is-core-module" "^2.8.1"
+    "path-parse" "^1.0.7"
+    "supports-preserve-symlinks-flag" "^1.0.0"

-rimraf@^2.5.2:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+"rimraf@^2.5.2":
+  "integrity" "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w=="
+  "resolved" "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz"
+  "version" "2.7.1"
  dependencies:
-    glob "^7.1.3"
+    "glob" "^7.1.3"

-rollup@^2.59.0:
-  version "2.70.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.1.tgz#824b1f1f879ea396db30b0fc3ae8d2fead93523e"
-  integrity sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA==
+"rollup@^2.59.0":
+  "integrity" "sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA=="
+  "resolved" "https://registry.npmjs.org/rollup/-/rollup-2.70.1.tgz"
+  "version" "2.70.1"
  optionalDependencies:
-    fsevents "~2.3.2"
+    "fsevents" "~2.3.2"

-sade@^1.7.4:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
-  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+"sade@^1.7.4":
+  "integrity" "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A=="
+  "resolved" "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz"
+  "version" "1.8.1"
  dependencies:
-    mri "^1.1.0"
+    "mri" "^1.1.0"

-sander@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/sander/-/sander-0.5.1.tgz#741e245e231f07cafb6fdf0f133adfa216a502ad"
-  integrity sha1-dB4kXiMfB8r7b98PEzrfohalAq0=
+"sander@^0.5.0":
+  "integrity" "sha1-dB4kXiMfB8r7b98PEzrfohalAq0="
+  "resolved" "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz"
+  "version" "0.5.1"
  dependencies:
-    es6-promise "^3.1.2"
-    graceful-fs "^4.1.3"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.2"
+    "es6-promise" "^3.1.2"
+    "graceful-fs" "^4.1.3"
+    "mkdirp" "^0.5.1"
+    "rimraf" "^2.5.2"

-sorcery@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/sorcery/-/sorcery-0.10.0.tgz#8ae90ad7d7cb05fc59f1ab0c637845d5c15a52b7"
-  integrity sha1-iukK19fLBfxZ8asMY3hF1cFaUrc=
+"sorcery@^0.10.0":
+  "integrity" "sha1-iukK19fLBfxZ8asMY3hF1cFaUrc="
+  "resolved" "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz"
+  "version" "0.10.0"
  dependencies:
-    buffer-crc32 "^0.2.5"
-    minimist "^1.2.0"
-    sander "^0.5.0"
-    sourcemap-codec "^1.3.0"
+    "buffer-crc32" "^0.2.5"
+    "minimist" "^1.2.0"
+    "sander" "^0.5.0"
+    "sourcemap-codec" "^1.3.0"

-source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+"source-map-js@^1.0.2":
+  "integrity" "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+  "resolved" "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
+  "version" "1.0.2"

-sourcemap-codec@^1.3.0, sourcemap-codec@^1.4.8:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
-  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+"sourcemap-codec@^1.3.0", "sourcemap-codec@^1.4.8":
+  "integrity" "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+  "resolved" "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
+  "version" "1.4.8"

-strip-indent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
-  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+"strip-indent@^3.0.0":
+  "integrity" "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ=="
+  "resolved" "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz"
+  "version" "3.0.0"
  dependencies:
-    min-indent "^1.0.0"
+    "min-indent" "^1.0.0"

-supports-preserve-symlinks-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
-  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+"supports-preserve-symlinks-flag@^1.0.0":
+  "integrity" "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
+  "resolved" "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  "version" "1.0.0"

-svelte-hmr@^0.14.11:
-  version "0.14.11"
-  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.11.tgz#63d532dc9c2c849ab708592f034765fa2502e568"
-  integrity sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==
+"svelte-hmr@^0.14.11":
+  "integrity" "sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ=="
+  "resolved" "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.11.tgz"
+  "version" "0.14.11"

 svelte-preprocess@^4.10.5:
  version "4.10.6"
@ -509,10 +504,10 @@ svelte-preprocess@^4.10.5:
  dependencies:
    "@types/pug" "^2.0.4"
    "@types/sass" "^1.16.0"
-    detect-indent "^6.0.0"
-    magic-string "^0.25.7"
-    sorcery "^0.10.0"
-    strip-indent "^3.0.0"
+    "detect-indent" "^6.0.0"
+    "magic-string" "^0.25.7"
+    "sorcery" "^0.10.0"
+    "strip-indent" "^3.0.0"

 svelte@^3.47.0:
  version "3.47.0"
@ -524,10 +519,10 @@ typescript@^4.6.3:
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"
  integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==

-util-deprecate@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+"util-deprecate@^1.0.2":
+  "integrity" "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+  "resolved" "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  "version" "1.0.2"

 vite@^2.9.0:
  version "2.9.5"
@ -539,9 +534,9 @@ vite@^2.9.0:
    resolve "^1.22.0"
    rollup "^2.59.0"
  optionalDependencies:
-    fsevents "~2.3.2"
+    "fsevents" "~2.3.2"

-wrappy@1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+"wrappy@1":
+  "integrity" "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+  "resolved" "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+  "version" "1.0.2"
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/AutoComplete/AutoComplete.svelte
+++ b/src/AutoComplete/AutoComplete.svelte
@ -0,0 +1,340 @@
+<script>
+  /**
+   * @typedef {any} AutoCompleteItemId
+   * @typedef {string} AutoCompleteItemText
+   * @typedef {{ id: AutoCompleteItemId; text: AutoCompleteItemText; }} AutoCompleteItem
+   * @event {{ selectedId: AutoCompleteItemId, selectedItem: AutoCompleteItem }} select
+   * @slot {{ item: AutoCompleteItem; index: number; }}
+   */
+
+  /**
+   * Set the dropdown items
+   * @type {AutoCompleteItem[]}
+   */
+  export let items = [];
+
+  export let filteredItems = [];
+
+  /**
+   * Override the display of a dropdown item
+   * @type {(item: AutoCompleteItem) => string}
+   */
+  export let itemToString = (item) => item.text || item.id;
+
+  /**
+   * Specify the selected item id
+   * @type {AutoCompleteItemId}
+   */
+  export let selectedId = undefined;
+
+  /**
+   * Specify the selected item
+   * @type {AutoCompleteItem}
+   */
+  export let selectedItem = undefined;
+
+  /**
+   * Specify the type of dropdown
+   * @type {"default" | "inline"}
+   */
+  export let type = "default";
+
+  /**
+   * Specify the direction of the dropdown menu
+   * @type {"bottom" | "top"}
+   */
+  export let direction = "bottom";
+
+  /**
+   * Specify the size of the dropdown field
+   * @type {"sm" | "lg" | "xl"}
+   */
+  export let size = undefined;
+
+  /** Set to `true` to open the dropdown */
+  export let open = false;
+
+  /** Set to `true` to use the inline variant */
+  export let inline = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to disable the dropdown */
+  export let disabled = false;
+
+  /** Specify the title text */
+  export let titleText = "";
+
+  /** Set to `true` to indicate an invalid state */
+  export let invalid = false;
+
+  /** Specify the invalid state text */
+  export let invalidText = "";
+
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
+  /** Specify the helper text */
+  export let helperText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /**
+   * Override the default translation ids
+   * @type {(id: any) => string}
+   */
+  export let translateWithId = undefined;
+
+  /** Set an id for the list box component */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the list box
+   * @type {string}
+   */
+  export let name = undefined;
+
+  /** Obtain a reference to the button HTML element */
+  export let ref = null;
+
+  /** Specify the placeholder text */
+  export let placeholder = null;
+
+  import { createEventDispatcher } from "svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+  import { ListBox, ListBoxMenu, ListBoxMenuItem } from "../ListBox";
+
+  const dispatch = createEventDispatcher();
+
+  let highlightedIndex = -1;
+
+  let innerValue = undefined;
+
+  function change(dir) {
+    let index = highlightedIndex + dir;
+
+    if (index < 0) {
+      index = filteredItems.length - 1;
+    } else if (index >= filteredItems.length) {
+      index = 0;
+    }
+
+    highlightedIndex = index;
+  }
+
+  function onKeydown(event) {
+    let key = event.key;
+
+    if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) {
+      event.preventDefault();
+    }
+
+    if (key === "Enter") {
+      open = !open;
+      if (
+        highlightedIndex > -1 &&
+        filteredItems[highlightedIndex].id !== selectedId
+      ) {
+        selectedItem = filteredItems[highlightedIndex];
+        selectedId = selectedItem.id;
+        innerValue = selectedItem.text;
+        open = false;
+      }
+    } else if (key === "Backspace") {
+      selectedItem = undefined;
+      selectedId = undefined;
+      open = innerValue.length > 0 && filteredItems.length > 0;
+    } else if (key === "Tab") {
+      open = false;
+      ref.blur();
+    } else if (key === "ArrowDown") {
+      change(1);
+    } else if (key === "ArrowUp") {
+      change(-1);
+    } else if (key === "Escape") {
+      innerValue = "";
+      dispatch("clear");
+      open = false;
+    } else {
+      if (!open) open = filteredItems.length > 0;
+    }
+  }
+
+  $: if (selectedId !== undefined) {
+    dispatch("select", { selectedId, selectedItem });
+  }
+
+  $: filteredItems = items.filter(
+    (item) => innerValue?.length > 0 && item.text.startsWith(innerValue)
+  );
+  $: inline = type === "inline";
+  $: if (!open) {
+    highlightedIndex = -1;
+  }
+</script>
+
+<svelte:window
+  on:click="{({ target }) => {
+    if (open && ref && !ref.contains(target)) {
+      open = false;
+    }
+  }}"
+/>
+
+<div {...$$restProps}>
+  {#if titleText}
+    <label
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--label--disabled="{disabled}"
+      class:bx--visually-hidden="{hideLabel}"
+    >
+      {titleText}
+    </label>
+  {/if}
+  <ListBox
+    type="{type}"
+    size="{size}"
+    id="{id}"
+    name="{name}"
+    aria-label="{$$props['aria-label']}"
+    class="bx--dropdown {direction === 'top' && 'bx--list-box--up'} {invalid &&
+      'bx--dropdown--invalid'} {!invalid &&
+      warn &&
+      'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
+      {size === 'sm' && 'bx--dropdown--sm'}
+      {size === 'xl' && 'bx--dropdown--xl'}
+      {inline && 'bx--dropdown--inline'}
+      {disabled && 'bx--dropdown--disabled'}
+      {light && 'bx--dropdown--light'}"
+    on:click="{({ target }) => {
+      if (disabled) return;
+      open = ref.contains(target) ? !open : false;
+    }}"
+    disabled="{disabled}"
+    open="{open}"
+    invalid="{invalid}"
+    invalidText="{invalidText}"
+    light="{light}"
+    warn="{warn}"
+    warnText="{warnText}"
+  >
+    {#if invalid}
+      <WarningFilled class="bx--text-input__invalid-icon" />
+    {/if}
+    {#if !invalid && warn}
+      <WarningAltFilled
+        class="bx--text-input__invalid-icon
+          bx--text-input__invalid-icon--warning"
+      />
+    {/if}
+    <input
+      bind:this="{ref}"
+      bind:value="{innerValue}"
+      type="text"
+      role="searchbox"
+      class="
+        auto-complete__input
+        {size === 'sm' && 'auto-complete__input--sm'}
+        {size === 'xl' && 'auto-complete__input--xl'}
+      "
+      autocomplete="false"
+      disabled="{disabled}"
+      id="{id}"
+      name="{name}"
+      placeholder="{placeholder}"
+      translateWithId="{translateWithId}"
+      {...$$restProps}
+      on:change
+      on:focus
+      on:blur
+      on:input
+      on:keydown="{onKeydown}"
+    />
+    {#if open}
+      <ListBoxMenu aria-labelledby="{id}" id="{id}">
+        {#each filteredItems as item, i (item.id)}
+          <ListBoxMenuItem
+            id="{item.id}"
+            active="{selectedId === item.id}"
+            highlighted="{highlightedIndex === i || selectedId === item.id}"
+            on:click="{() => {
+              selectedItem = item;
+              selectedId = item.id;
+              innerValue = item.text;
+              ref.focus();
+            }}"
+            on:mouseenter="{() => {
+              highlightedIndex = i;
+            }}"
+          >
+            <slot item="{item}" index="{i}">
+              {itemToString(item)}
+            </slot>
+          </ListBoxMenuItem>
+        {/each}
+      </ListBoxMenu>
+    {/if}
+  </ListBox>
+  {#if !inline && !invalid && !warn && helperText}
+    <div
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}"
+    >
+      {helperText}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .auto-complete__input {
+    font-size: var(--cds-body-short-01-font-size, 0.875rem);
+    font-weight: var(--cds-body-short-01-font-weight, 400);
+    line-height: var(--cds-body-short-01-line-height, 1.28572);
+    letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    width: 100%;
+    height: 2.5rem;
+    padding: 0 1rem;
+    border: none;
+    border-bottom-color: currentcolor;
+    border-bottom-style: none;
+    border-bottom-width: medium;
+    border-bottom: 1px solid var(--cds-ui-04, #8d8d8d);
+    background-color: var(--cds-field-01, #f4f4f4);
+    color: var(--cds-text-01, #161616);
+    transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
+      outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  }
+
+  .auto-complete__input:focus {
+    outline: 2px solid var(--cds-focus, #0f62fe);
+    outline-offset: -2px;
+  }
+
+  .auto-complete__input--sm {
+    height: 2rem;
+  }
+
+  .auto-complete__input--xl,
+  .auto-complete__input--lg {
+    height: 3rem;
+  }
+
+  .auto-complete__input:disabled {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    border-bottom: 1px solid transparent;
+    background-color: var(--cds-field, #f4f4f4);
+    color: var(--cds-text-disabled, #c6c6c6);
+    cursor: not-allowed;
+    -webkit-text-fill-color: var(--cds-disabled-02, #c6c6c6);
+  }
+</style>
--- a/src/AutoComplete/AutoCompleteSkeleton.svelte
+++ b/src/AutoComplete/AutoCompleteSkeleton.svelte
@ -0,0 +1,19 @@
+<script>
+  /** Set to `true` to hide the label text */
+  export let hideLabel = false;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<div
+  class:bx--form-item="{true}"
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#if !hideLabel}
+    <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
+  {/if}
+  <div class:bx--skeleton="{true}" class:bx--text-input="{true}"></div>
+</div>
--- a/src/AutoComplete/index.js
+++ b/src/AutoComplete/index.js
@ -0,0 +1,2 @@
+export { default as AutoComplete } from "./AutoComplete.svelte";
+export { default as AutoCompleteSkeleton } from "./AutoCompleteSkeleton.svelte";
--- a/src/index.js
+++ b/src/index.js
@ -1,5 +1,6 @@
 export { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion";
 export { AspectRatio } from "./AspectRatio";
+export { AutoComplete, AutoCompleteSkeleton } from "./AutoComplete";
 export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
 export { Breakpoint } from "./Breakpoint";
 export { default as breakpointObserver } from "./Breakpoint/breakpointObserver";
--- a/tests/AutoComplete.svelte
+++ b/tests/AutoComplete.svelte
@ -0,0 +1,92 @@
+<script lang="ts">
+  import { AutoComplete, AutoCompleteSkeleton } from "../types";
+</script>
+
+<AutoComplete
+  direction="top"
+  titleText="Contact"
+  selectedId="0"
+  items="{[
+    { id: 0, text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+  on:select="{(e) => {
+    console.log(e.detail.selectedId);
+  }}"
+  let:item
+  let:index
+>
+  {item.id}
+  {index}
+</AutoComplete>
+
+<AutoComplete
+  itemToString="{(item) => {
+    return item.text + ' (' + item.id + ')';
+  }}"
+  titleText="Contact"
+  selectedId="0"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+/>
+
+<AutoComplete
+  light
+  titleText="Contact"
+  selectedId="0"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+/>
+
+<AutoComplete
+  type="inline"
+  titleText="Contact"
+  selectedId="0"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+/>
+
+<AutoComplete
+  size="xl"
+  titleText="Contact"
+  selectedId="0"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+/>
+
+<AutoComplete
+  size="sm"
+  titleText="Contact"
+  selectedId="0"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+/>
+
+<AutoComplete
+  disabled
+  titleText="Contact"
+  selectedId="0"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
+/>
+
+<AutoCompleteSkeleton />
--- a/types/AutoComplete/AutoComplete.svelte.d.ts
+++ b/types/AutoComplete/AutoComplete.svelte.d.ts
@ -0,0 +1,161 @@
+/// <reference types="svelte" />
+import type { SvelteComponentTyped } from "svelte";
+
+export type AutoCompleteItemId = any;
+
+export type AutoCompleteItemText = string;
+
+export interface AutoCompleteItem {
+  id: AutoCompleteItemId;
+  text: AutoCompleteItemText;
+}
+
+export interface AutoCompleteProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the dropdown items
+   * @default []
+   */
+  items?: AutoCompleteItem[];
+
+  /**
+   * @default []
+   */
+  filteredItems?: [];
+
+  /**
+   * Override the display of a dropdown item
+   * @default (item) => item.text || item.id
+   */
+  itemToString?: (item: AutoCompleteItem) => string;
+
+  /**
+   * Specify the selected item id
+   * @default undefined
+   */
+  selectedId?: AutoCompleteItemId;
+
+  /**
+   * Specify the type of dropdown
+   * @default "default"
+   */
+  type?: "default" | "inline";
+
+  /**
+   * Specify the direction of the dropdown menu
+   * @default "bottom"
+   */
+  direction?: "bottom" | "top";
+
+  /**
+   * Specify the size of the dropdown field
+   * @default undefined
+   */
+  size?: "sm" | "lg" | "xl";
+
+  /**
+   * Set to `true` to open the dropdown
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to use the inline variant
+   * @default false
+   */
+  inline?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to disable the dropdown
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the title text
+   * @default ""
+   */
+  titleText?: string;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: string;
+
+  /**
+   * Set to `true` to indicate an warning state
+   * @default false
+   */
+  warn?: boolean;
+
+  /**
+   * Specify the warning state text
+   * @default ""
+   */
+  warnText?: string;
+
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Set an id for the list box component
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the list box
+   * @default undefined
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the button HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+
+  /**
+   * Specify the placeholder text
+   * @default null
+   */
+  placeholder?: undefined;
+}
+
+export default class AutoComplete extends SvelteComponentTyped<
+  AutoCompleteProps,
+  {
+    select: CustomEvent<{
+      selectedId: AutoCompleteItemId;
+      selectedItem: AutoCompleteItem;
+    }>;
+    change: WindowEventMap["change"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    input: WindowEventMap["input"];
+    clear: CustomEvent<any>;
+  },
+  { default: { item: AutoCompleteItem; index: number } }
+> {}
--- a/types/AutoComplete/AutoCompleteSkeleton.svelte.d.ts
+++ b/types/AutoComplete/AutoCompleteSkeleton.svelte.d.ts
@ -0,0 +1,22 @@
+/// <reference types="svelte" />
+import type { SvelteComponentTyped } from "svelte";
+
+export interface AutoCompleteSkeletonProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+}
+
+export default class AutoCompleteSkeleton extends SvelteComponentTyped<
+  AutoCompleteSkeletonProps,
+  {
+    click: WindowEventMap["click"];
+    mouseover: WindowEventMap["mouseover"];
+    mouseenter: WindowEventMap["mouseenter"];
+    mouseleave: WindowEventMap["mouseleave"];
+  },
+  {}
+> {}
--- a/types/index.d.ts
+++ b/types/index.d.ts
@ -2,6 +2,8 @@ export { default as Accordion } from "./Accordion/Accordion.svelte";
 export { default as AccordionItem } from "./Accordion/AccordionItem.svelte";
 export { default as AccordionSkeleton } from "./Accordion/AccordionSkeleton.svelte";
 export { default as AspectRatio } from "./AspectRatio/AspectRatio.svelte";
+export { default as AutoComplete } from "./AutoComplete/AutoComplete.svelte";
+export { default as AutoCompleteSkeleton } from "./AutoComplete/AutoCompleteSkeleton.svelte";
 export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb.svelte";
 export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem.svelte";
 export { default as BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton.svelte";
--- a/yarn.lock
+++ b/yarn.lock