Reactive audit (#449)

* refactor(search): resolve svelte file paths

* docs(Search): add reactive example

* refactor(tag): use class name directive for tag types, resolve svelte icon path

* chore(button-skeleton): deprecate small prop

* fix(breadcrumb-item): type default slot

* refactor(breadcrumb-skeleton): omit unused index

* refactor(aspect-ratio): use class name directive

* refactor(accordion): use the class name directive, resolve svelte icon paths

* refactor(code-snippet): use class name directive, resolve svelte icon paths

* fix(code-snippet-skeleton): CodeSnippetSkeleton can only be single or multi

* refactor(content-switcher): use class name directive

* docs(content-switcher): add reactive example

* docs(content-switcher): remove unused import

* docs(toggle): add reactive example

* refactor(tooltip-definition): use class name directive

* refactor(tooltip-icon): use class name directive

* refactor(tooltip): resolve svelte icon import

* fix(select): type dispatched change event

* refactor(select): resolve svelte icon import

* feat(select-item): spread rest props, avoid $ variable name

* fix(pagination-nav): type dispatched events

* refactor(pagination): resolve svelte imports

* fix(pagination): type dispatched update event

* fix(overflow-menu): type dispatched close event

* fix(number-input): type dispatched change event

* refactor(modal): use class name directive, resolve svelte imports

* refactor(inline-loading): use class name directive, resolve svelte imports

* refactor(composed-modal): resolve svelte icon imports

* refactor(combo-box): resolve svelte imports

* fix(fluid-form): rest props should not override Form class

* refactor(progress-step): resolve svelte icon imports

src/Tag/Tag.svelte

@@ -1,11 +1,9 @@
 <script>
-  /**
-   * @restProps {div | span}
-   */
+  /** @restProps {div | span} */
 
   /**
    * Specify the type of tag
-   * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"} [type]
+   * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"}
    */
   export let type = undefined;
 
@@ -24,7 +22,7 @@
   /** Set an id for the filterable tag */
   export let id = "ccs-" + Math.random().toString(36);
 
-  import Close16 from "carbon-icons-svelte/lib/Close16";
+  import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
   import TagSkeleton from "./TagSkeleton.svelte";
 </script>
 
@@ -44,8 +42,17 @@
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
       class:bx--tag--filter="{filter}"
-      {...$$restProps}
-      class="{type && `bx--tag--${type}`} {$$restProps.class}"
+      class:bx--tag--red="{type === 'red'}"
+      class:bx--tag--magenta="{type === 'magenta'}"
+      class:bx--tag--purple="{type === 'purple'}"
+      class:bx--tag--blue="{type === 'blue'}"
+      class:bx--tag--cyan="{type === 'cyan'}"
+      class:bx--tag--teal="{type === 'teal'}"
+      class:bx--tag--green="{type === 'green'}"
+      class:bx--tag--gray="{type === 'gray'}"
+      class:bx--tag--cool-gray="{type === 'cool-gray'}"
+      class:bx--tag--warm-gray="{type === 'warm-gray'}"
+      class:bx--tag--high-contrast="{type === 'high-contrast'}"
     >
       <slot props="{{ class: 'bx--tag__label' }}">
         <span class:bx--tag__label="{true}">{type}</span>
@@ -67,8 +74,17 @@
     <span
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
-      {...$$restProps}
-      class="{type && `bx--tag--${type}`} {$$restProps.class}"
+      class:bx--tag--red="{type === 'red'}"
+      class:bx--tag--magenta="{type === 'magenta'}"
+      class:bx--tag--purple="{type === 'purple'}"
+      class:bx--tag--blue="{type === 'blue'}"
+      class:bx--tag--cyan="{type === 'cyan'}"
+      class:bx--tag--teal="{type === 'teal'}"
+      class:bx--tag--green="{type === 'green'}"
+      class:bx--tag--gray="{type === 'gray'}"
+      class:bx--tag--cool-gray="{type === 'cool-gray'}"
+      class:bx--tag--warm-gray="{type === 'warm-gray'}"
+      class:bx--tag--high-contrast="{type === 'high-contrast'}"
       on:click
       on:mouseover
       on:mouseenter