diff --git a/README.md b/README.md
index cc9e309e..eebdba1a 100644
--- a/README.md
+++ b/README.md
@@ -155,7 +155,8 @@ Using JavaScript:
   $: document.documentElement.setAttribute("theme", theme);
 </script>
 
-<button on:click="{() => theme = 'g90'}">Update theme</button>
+<button on:click="{() => (theme = 'g90')}">Update theme</button>
+
 ```
 
 ### TypeScript support
diff --git a/docs/src/App.svelte b/docs/src/App.svelte
index c3e84643..32b6194b 100644
--- a/docs/src/App.svelte
+++ b/docs/src/App.svelte
@@ -3,6 +3,8 @@
   import { routes } from "../.routify/routes";
 </script>
 
+<Router routes="{routes}" />
+
 <style lang="scss" global>
   @import "@carbon/themes/scss/themes";
 
@@ -42,5 +44,3 @@
   @import "carbon-components/scss/globals/grid/_grid.scss";
   @import "carbon-components/scss/globals/scss/styles.scss";
 </style>
-
-<Router routes="{routes}" />
diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
index 75356c97..a6d25ef5 100644
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@@ -39,29 +39,6 @@
   );
 </script>
 
-<style>
-  .description {
-    margin-bottom: var(--cds-spacing-04);
-  }
-
-  .cell {
-    position: relative;
-    z-index: 9;
-    min-height: 1.25rem;
-    margin-bottom: var(--cds-spacing-02);
-  }
-
-  .overflow {
-    overflow-x: auto;
-  }
-
-  :global(.my-layout-01-03),
-  :global(.overflow .bx--structured-list) {
-    margin-top: var(--cds-layout-01);
-    margin-bottom: var(--cds-layout-04);
-  }
-</style>
-
 <p style="margin-bottom: var(--cds-layout-02)">
   Component source code:
   <Link inline size="lg" href="{source}" target="_blank">
@@ -101,12 +78,12 @@
               {/if}
             </StructuredListCell>
             <StructuredListCell>
-              {#each prop.type.split(' | ') as type, i (type)}
+              {#each prop.type.split(" | ") as type, i (type)}
                 <div
                   class="cell"
                   style="z-index: {prop.type.split(' | ').length - i}"
                 >
-                  {#if type.startsWith('typeof')}
+                  {#if type.startsWith("typeof")}
                     <TooltipDefinition
                       direction="top"
                       align="start"
@@ -114,7 +91,7 @@
                     >
                       Carbon Svelte icon
                     </TooltipDefinition>
-                  {:else if type.startsWith('HTML')}
+                  {:else if type.startsWith("HTML")}
                     <Link
                       href="{mdn_api}{type}"
                       target="_blank"
@@ -125,7 +102,7 @@
                     </Link>
                   {:else if type in typeMap}
                     <code>{typeMap[type]}</code>
-                  {:else if type.startsWith('(')}
+                  {:else if type.startsWith("(")}
                     <code>{type}</code>
                   {:else}
                     <InlineSnippet code="{type}" />
@@ -136,12 +113,12 @@
             <StructuredListCell><code>{prop.value}</code></StructuredListCell>
             <StructuredListCell>
               {#if prop.description}
-                {#each prop.description.split('\n') as line}
+                {#each prop.description.split("\n") as line}
                   <div class="description">
                     {@html line
-                      .replace(/\</g, '&lt;')
-                      .replace(/\>/g, '&gt;')
-                      .replace(/`(.*?)`/g, '<code>$1</code>')}.
+                      .replace(/\</g, "&lt;")
+                      .replace(/\>/g, "&gt;")
+                      .replace(/`(.*?)`/g, "<code>$1</code>")}.
                   </div>
                 {/each}
               {:else}
@@ -160,7 +137,7 @@
 {#if component.slots.length > 0}
   <UnorderedList class="my-layout-01-03">
     {#each component.slots as slot (slot.name)}
-      <ListItem>{slot.default ? 'default' : slot.name}</ListItem>
+      <ListItem>{slot.default ? "default" : slot.name}</ListItem>
     {/each}
   </UnorderedList>
 {:else}
@@ -198,9 +175,32 @@
     spreads
     <code>$$restProps</code>
     to the
-    {#if component.rest_props.type === 'Element'}
+    {#if component.rest_props.type === "Element"}
       <code>{component.rest_props.name}</code>
       element.
     {:else}<code>{component.rest_props.name}</code> component.{/if}
   {:else}This component does not spread <code>restProps</code>{/if}
 </div>
+
+<style>
+  .description {
+    margin-bottom: var(--cds-spacing-04);
+  }
+
+  .cell {
+    position: relative;
+    z-index: 9;
+    min-height: 1.25rem;
+    margin-bottom: var(--cds-spacing-02);
+  }
+
+  .overflow {
+    overflow-x: auto;
+  }
+
+  :global(.my-layout-01-03),
+  :global(.overflow .bx--structured-list) {
+    margin-top: var(--cds-layout-01);
+    margin-bottom: var(--cds-layout-04);
+  }
+</style>
diff --git a/docs/src/components/Footer.svelte b/docs/src/components/Footer.svelte
index 4233f1ce..b2b8e391 100644
--- a/docs/src/components/Footer.svelte
+++ b/docs/src/components/Footer.svelte
@@ -2,12 +2,6 @@
   import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
 </script>
 
-<style>
-  footer {
-    background: var(--cds-ui-01);
-  }
-</style>
-
 <footer class="bx--content">
   <Grid>
     <Row>
@@ -26,3 +20,9 @@
     </Row>
   </Grid>
 </footer>
+
+<style>
+  footer {
+    background: var(--cds-ui-01);
+  }
+</style>
diff --git a/docs/src/components/InlineSnippet.svelte b/docs/src/components/InlineSnippet.svelte
index de3f4d50..a36636d2 100644
--- a/docs/src/components/InlineSnippet.svelte
+++ b/docs/src/components/InlineSnippet.svelte
@@ -5,12 +5,6 @@
   import copy from "clipboard-copy";
 </script>
 
-<style>
-  div {
-    margin-bottom: var(--cds-spacing-04);
-  }
-</style>
-
 <div>
   <CodeSnippet
     code="{code}"
@@ -20,3 +14,9 @@
     }}"
   />
 </div>
+
+<style>
+  div {
+    margin-bottom: var(--cds-spacing-04);
+  }
+</style>
diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index 280f10ec..f9fc8d16 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -13,6 +13,40 @@
   $: themedSrcUrl = $url(`${src}?theme=${$theme}`);
 </script>
 
+<div class="preview">
+  {#if framed}
+    <div class="framed-header">
+      <div
+        style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
+      >
+        Content loaded in an iframe
+      </div>
+      <Button
+        style="margin-left: auto;"
+        kind="ghost"
+        target="_blank"
+        size="field"
+        href="{themedSrcUrl}"
+        icon="{Launch16}"
+      >
+        Open in new tab
+      </Button>
+    </div>
+  {/if}
+  <div class="preview-viewer" class:framed>
+    {#if framed}
+      <iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
+    {:else}
+      <slot />
+    {/if}
+  </div>
+  <div class="code-override">
+    <CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
+      {@html code}
+    </CodeSnippet>
+  </div>
+</div>
+
 <style global>
   .preview {
     margin-bottom: var(--cds-layout-04);
@@ -130,37 +164,3 @@
     height: 100%;
   }
 </style>
-
-<div class="preview">
-  {#if framed}
-    <div class="framed-header">
-      <div
-        style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
-      >
-        Content loaded in an iframe
-      </div>
-      <Button
-        style="margin-left: auto;"
-        kind="ghost"
-        target="_blank"
-        size="field"
-        href="{themedSrcUrl}"
-        icon="{Launch16}"
-      >
-        Open in new tab
-      </Button>
-    </div>
-  {/if}
-  <div class="preview-viewer" class:framed>
-    {#if framed}
-      <iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
-    {:else}
-      <slot />
-    {/if}
-  </div>
-  <div class="code-override">
-    <CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
-      {@html code}
-    </CodeSnippet>
-  </div>
-</div>
diff --git a/docs/src/components/TileCard.svelte b/docs/src/components/TileCard.svelte
index eadaae87..1e938b1c 100644
--- a/docs/src/components/TileCard.svelte
+++ b/docs/src/components/TileCard.svelte
@@ -12,6 +12,33 @@
   $: tileComponent = href ? ClickableTile : Tile;
 </script>
 
+<div class="card-wrapper" class:borderRight class:borderBottom>
+  <AspectRatio>
+    <svelte:component
+      this="{tileComponent}"
+      href="{href}"
+      {...$$restProps}
+      style="height: 100%;"
+    >
+      <div class="card">
+        <div>
+          <h5 class="title">{title}</h5>
+          {#if subtitle}
+            <div class="subtitle">{subtitle}</div>
+          {/if}
+        </div>
+        <div class="card-footer">
+          <svelte:component
+            this="{LogoGithub32}"
+            style="fill: var(--cds-icon-01)"
+          />
+          <Launch20 style="fill: var(--cds-icon-01)" />
+        </div>
+      </div>
+    </svelte:component>
+  </AspectRatio>
+</div>
+
 <style>
   .card-wrapper {
     border-right: 1px solid transparent;
@@ -56,30 +83,3 @@
     }
   }
 </style>
-
-<div class="card-wrapper" class:borderRight class:borderBottom>
-  <AspectRatio>
-    <svelte:component
-      this="{tileComponent}"
-      href="{href}"
-      {...$$restProps}
-      style="height: 100%;"
-    >
-      <div class="card">
-        <div>
-          <h5 class="title">{title}</h5>
-          {#if subtitle}
-            <div class="subtitle">{subtitle}</div>
-          {/if}
-        </div>
-        <div class="card-footer">
-          <svelte:component
-            this="{LogoGithub32}"
-            style="fill: var(--cds-icon-01)"
-          />
-          <Launch20 style="fill: var(--cds-icon-01)" />
-        </div>
-      </div>
-    </svelte:component>
-  </AspectRatio>
-</div>
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 82640c3f..dc836fea 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -48,71 +48,6 @@
   }`;
 </script>
 
-<style global>
-  .override-tabs a.bx--tabs__nav-link,
-  .override-tabs a.bx--tabs__nav-link:focus,
-  .override-tabs a.bx--tabs__nav-link:active {
-    width: auto !important;
-  }
-
-  #select-theme {
-    width: auto;
-  }
-
-  .prose > p > .bx--link {
-    font-size: inherit;
-  }
-
-  .prose .toc {
-    margin-bottom: var(--cds-layout-01);
-  }
-
-  .table {
-    position: sticky;
-    max-height: calc(100vh - 3rem);
-    top: 3rem;
-    padding-top: var(--cds-spacing-05);
-    padding-bottom: var(--cds-spacing-05);
-    padding-left: var(--cds-spacing-08);
-    overflow-y: auto;
-  }
-
-  .bar {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: var(--cds-layout-02);
-    border-bottom: 1px solid var(--cds-ui-03);
-  }
-
-  [data-components] {
-    z-index: 2;
-    position: relative;
-    display: flex;
-  }
-
-  [data-components] .bx--grid {
-    width: 100%;
-  }
-
-  .toc h5 {
-    margin-bottom: var(--cds-spacing-03);
-  }
-
-  .toc.mobile {
-    display: none;
-  }
-
-  @media (max-width: 1056px) {
-    .table {
-      display: none;
-    }
-
-    .toc.mobile {
-      display: block;
-    }
-  }
-</style>
-
 <Content data-components>
   <Grid>
     <Row>
@@ -208,3 +143,68 @@
     </div>
   </Column>
 </Content>
+
+<style global>
+  .override-tabs a.bx--tabs__nav-link,
+  .override-tabs a.bx--tabs__nav-link:focus,
+  .override-tabs a.bx--tabs__nav-link:active {
+    width: auto !important;
+  }
+
+  #select-theme {
+    width: auto;
+  }
+
+  .prose > p > .bx--link {
+    font-size: inherit;
+  }
+
+  .prose .toc {
+    margin-bottom: var(--cds-layout-01);
+  }
+
+  .table {
+    position: sticky;
+    max-height: calc(100vh - 3rem);
+    top: 3rem;
+    padding-top: var(--cds-spacing-05);
+    padding-bottom: var(--cds-spacing-05);
+    padding-left: var(--cds-spacing-08);
+    overflow-y: auto;
+  }
+
+  .bar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--cds-layout-02);
+    border-bottom: 1px solid var(--cds-ui-03);
+  }
+
+  [data-components] {
+    z-index: 2;
+    position: relative;
+    display: flex;
+  }
+
+  [data-components] .bx--grid {
+    width: 100%;
+  }
+
+  .toc h5 {
+    margin-bottom: var(--cds-spacing-03);
+  }
+
+  .toc.mobile {
+    display: none;
+  }
+
+  @media (max-width: 1056px) {
+    .table {
+      display: none;
+    }
+
+    .toc.mobile {
+      display: block;
+    }
+  }
+</style>
diff --git a/docs/src/layouts/Recipe.svelte b/docs/src/layouts/Recipe.svelte
index 5b0ac79a..bb47af2d 100644
--- a/docs/src/layouts/Recipe.svelte
+++ b/docs/src/layouts/Recipe.svelte
@@ -24,6 +24,46 @@
   });
 </script>
 
+<Content data-components>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>{component}</h1>
+        <div class="bar">
+          <Select
+            id="select-theme"
+            inline
+            labelText="Theme"
+            bind:selected="{$theme}"
+          >
+            <SelectItem value="white" text="White" />
+            <SelectItem value="g10" text="Gray 10" />
+            <SelectItem value="g90" text="Gray 90" />
+            <SelectItem value="g100" text="Gray 100" />
+          </Select>
+        </div>
+      </Column>
+    </Row>
+
+    <Row>
+      <Column class="prose">
+        <div class="toc mobile">
+          <h5>Table of Contents</h5>
+          <slot name="aside" />
+        </div>
+        <slot />
+      </Column>
+    </Row>
+  </Grid>
+
+  <Column class="table" xlg="{4}" lg="{5}">
+    <div class="toc">
+      <h5>Table of Contents</h5>
+      <slot name="aside" />
+    </div>
+  </Column>
+</Content>
+
 <style global>
   #select-theme {
     width: auto;
@@ -82,43 +122,3 @@
     }
   }
 </style>
-
-<Content data-components>
-  <Grid>
-    <Row>
-      <Column>
-        <h1>{component}</h1>
-        <div class="bar">
-          <Select
-            id="select-theme"
-            inline
-            labelText="Theme"
-            bind:selected="{$theme}"
-          >
-            <SelectItem value="white" text="White" />
-            <SelectItem value="g10" text="Gray 10" />
-            <SelectItem value="g90" text="Gray 90" />
-            <SelectItem value="g100" text="Gray 100" />
-          </Select>
-        </div>
-      </Column>
-    </Row>
-
-    <Row>
-      <Column class="prose">
-        <div class="toc mobile">
-          <h5>Table of Contents</h5>
-          <slot name="aside" />
-        </div>
-        <slot />
-      </Column>
-    </Row>
-  </Grid>
-
-  <Column class="table" xlg="{4}" lg="{5}">
-    <div class="toc">
-      <h5>Table of Contents</h5>
-      <slot name="aside" />
-    </div>
-  </Column>
-</Content>
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index e2131aee..1d3e0340 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -34,6 +34,88 @@
   });
 </script>
 
+<!-- routify:options bundle=true -->
+<svelte:window bind:innerWidth />
+
+<Theme persist>
+  <Header
+    aria-label="Navigation"
+    href="{$url('/')}"
+    expandedByDefault="{true}"
+    bind:isSideNavOpen
+  >
+    <div slot="skip-to-content">
+      <SkipToContent />
+    </div>
+
+    <span slot="platform" class="platform-name">
+      Carbon Components Svelte
+      <code>v{process.env.VERSION || ""}</code>
+    </span>
+
+    <HeaderUtilities>
+      <HeaderActionLink
+        icon="{LogoGithub20}"
+        href="https://github.com/IBM/carbon-components-svelte"
+        target="_blank"
+      />
+      <HeaderAction transition="{false}" bind:isOpen>
+        <HeaderPanelLinks>
+          <HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
+          <HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
+            Carbon Icons Svelte
+          </HeaderPanelLink>
+          <HeaderPanelLink
+            href="https://github.com/IBM/carbon-pictograms-svelte"
+          >
+            Carbon Pictograms Svelte
+          </HeaderPanelLink>
+          <HeaderPanelLink
+            href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
+          >
+            Carbon Charts Svelte
+          </HeaderPanelLink>
+          <HeaderPanelDivider>Resources</HeaderPanelDivider>
+          <HeaderPanelLink href="https://www.carbondesignsystem.com/">
+            Carbon Design System
+          </HeaderPanelLink>
+          <HeaderPanelLink href="https://www.ibm.com/design/language/">
+            IBM Design Language
+          </HeaderPanelLink>
+        </HeaderPanelLinks>
+      </HeaderAction>
+    </HeaderUtilities>
+  </Header>
+
+  <SideNav bind:isOpen="{isSideNavOpen}">
+    <SideNavItems>
+      <SideNavMenu
+        expanded="{$isActive($url('')) || $isActive($url('/components'))}"
+        text="Components"
+      >
+        {#each components.children as child, i (child.path)}
+          <SideNavMenuItem
+            text="{child.title}"
+            href="{$url(child.path)}"
+            isSelected="{$isActive($url(child.path))}"
+          />
+        {/each}
+      </SideNavMenu>
+      <SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
+        {#each recipes.children as child, i (child.path)}
+          <SideNavMenuItem
+            text="{child.title}"
+            href="{$url(child.path)}"
+            isSelected="{$isActive($url(child.path))}"
+          />
+        {/each}
+      </SideNavMenu>
+    </SideNavItems>
+  </SideNav>
+  <slot />
+  <Footer />
+</Theme>
+
 <style global>
   .body-short-01 {
     font-size: var(--cds-body-short-01-font-size);
@@ -160,85 +242,3 @@
     max-height: 120rem;
   }
 </style>
-
-<!-- routify:options bundle=true -->
-<svelte:window bind:innerWidth />
-
-<Theme persist>
-  <Header
-    aria-label="Navigation"
-    href="{$url('/')}"
-    expandedByDefault="{true}"
-    bind:isSideNavOpen
-  >
-    <div slot="skip-to-content">
-      <SkipToContent />
-    </div>
-
-    <span slot="platform" class="platform-name">
-      Carbon Components Svelte
-      <code>v{process.env.VERSION || ''}</code>
-    </span>
-
-    <HeaderUtilities>
-      <HeaderActionLink
-        icon="{LogoGithub20}"
-        href="https://github.com/IBM/carbon-components-svelte"
-        target="_blank"
-      />
-      <HeaderAction transition="{false}" bind:isOpen>
-        <HeaderPanelLinks>
-          <HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
-          <HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
-            Carbon Icons Svelte
-          </HeaderPanelLink>
-          <HeaderPanelLink
-            href="https://github.com/IBM/carbon-pictograms-svelte"
-          >
-            Carbon Pictograms Svelte
-          </HeaderPanelLink>
-          <HeaderPanelLink
-            href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
-          >
-            Carbon Charts Svelte
-          </HeaderPanelLink>
-          <HeaderPanelDivider>Resources</HeaderPanelDivider>
-          <HeaderPanelLink href="https://www.carbondesignsystem.com/">
-            Carbon Design System
-          </HeaderPanelLink>
-          <HeaderPanelLink href="https://www.ibm.com/design/language/">
-            IBM Design Language
-          </HeaderPanelLink>
-        </HeaderPanelLinks>
-      </HeaderAction>
-    </HeaderUtilities>
-  </Header>
-
-  <SideNav bind:isOpen="{isSideNavOpen}">
-    <SideNavItems>
-      <SideNavMenu
-        expanded="{$isActive($url('')) || $isActive($url('/components'))}"
-        text="Components"
-      >
-        {#each components.children as child, i (child.path)}
-          <SideNavMenuItem
-            text="{child.title}"
-            href="{$url(child.path)}"
-            isSelected="{$isActive($url(child.path))}"
-          />
-        {/each}
-      </SideNavMenu>
-      <SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
-        {#each recipes.children as child, i (child.path)}
-          <SideNavMenuItem
-            text="{child.title}"
-            href="{$url(child.path)}"
-            isSelected="{$isActive($url(child.path))}"
-          />
-        {/each}
-      </SideNavMenu>
-    </SideNavItems>
-  </SideNav>
-  <slot />
-  <Footer />
-</Theme>
diff --git a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
index 93737986..ec03614d 100644
--- a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
+++ b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
@@ -29,7 +29,7 @@
     open = !open;
   }}"
 >
-  {open ? 'Collapse' : 'Expand'}
+  {open ? "Collapse" : "Expand"}
   all
 </Button>
 
diff --git a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
index 93251d83..49584496 100644
--- a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
+++ b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
@@ -6,12 +6,6 @@
   const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
 </script>
 
-<style>
-  .hidden {
-    display: none;
-  }
-</style>
-
 <ToggleSmall
   style="margin-bottom: var(--cds-spacing-05)"
   labelText="Show code snippets"
@@ -19,7 +13,8 @@
 />
 
 {#if toggled}
-  <h5>"Show more" will not render</h5><br />
+  <h5>"Show more" will not render</h5>
+  <br />
 {/if}
 <div class:hidden="{!toggled}">
   <CodeSnippet type="multi" code="{code}" />
@@ -27,8 +22,15 @@
 
 {#if toggled}
   <br /><br />
-  <h5>"Show more" will render</h5><br />
+  <h5>"Show more" will render</h5>
+  <br />
   <div class:hidden="{!toggled}">
     <CodeSnippet type="multi" code="{code}" />
   </div>
 {/if}
+
+<style>
+  .hidden {
+    display: none;
+  }
+</style>
diff --git a/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte b/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
index 80dbf5e8..38d408ba 100644
--- a/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
@@ -10,6 +10,10 @@
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
   shouldFilterItem="{shouldFilterItem}"
 />
diff --git a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
index 1bdd7a3b..0cd9d56f 100644
--- a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
@@ -16,12 +16,6 @@
   $: secondary = formatSelected(comboBox2_selectedIndex);
 </script>
 
-<style>
-  div {
-    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
-  }
-</style>
-
 <ComboBox
   bind:selectedIndex="{comboBox1_selectedIndex}"
   titleText="Primary contact"
@@ -39,3 +33,9 @@
 />
 
 <div>Secondary: {secondary}</div>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
diff --git a/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte b/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
index 3b33900e..517c25c2 100644
--- a/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
+++ b/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
@@ -4,12 +4,6 @@
   let selectedIndex = 1;
 </script>
 
-<style>
-  div {
-    margin-top: var(--cds-spacing-05);
-  }
-</style>
-
 <ContentSwitcher bind:selectedIndex>
   <Switch text="Latest news" />
   <Switch text="Trending" />
@@ -27,3 +21,9 @@
 </div>
 
 <div>Selected index: {selectedIndex}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
index 624b3260..c013365d 100644
--- a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
@@ -24,7 +24,7 @@
 
 <DataTable sortable headers="{headers}" rows="{rows}">
   <span slot="cell" let:cell>
-    {#if cell.key === 'overflow'}
+    {#if cell.key === "overflow"}
       <OverflowMenu flipped>
         <OverflowMenuItem text="Restart" />
         <OverflowMenuItem
diff --git a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
index 3f42d959..4ebb7fcb 100644
--- a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
+++ b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
@@ -16,12 +16,6 @@
   $: secondary = formatSelected(dropdown2_selectedIndex);
 </script>
 
-<style>
-  div {
-    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
-  }
-</style>
-
 <Dropdown
   titleText="Primary contact"
   bind:selectedIndex="{dropdown1_selectedIndex}"
@@ -39,3 +33,9 @@
 />
 
 <div>Secondary: {secondary}</div>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
diff --git a/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte b/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
index fdaeb6bc..7eac3445 100644
--- a/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
+++ b/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
@@ -42,7 +42,7 @@
   >
     Cancel
   </Button>
-  {#if state !== 'dormant'}
+  {#if state !== "dormant"}
     <InlineLoading status="{state}" description="{descriptionMap[state]}" />
   {:else}
     <Button on:click="{() => (state = 'active')}">Submit</Button>
diff --git a/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte b/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
index e98ce84a..b1c8c3b3 100644
--- a/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
+++ b/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
@@ -19,12 +19,6 @@
   $: secondary = formatSelected(multiselect2_selectedIds);
 </script>
 
-<style>
-  div {
-    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
-  }
-</style>
-
 <MultiSelect
   titleText="Primary contact"
   bind:selectedIds="{multiselect1_selectedIds}"
@@ -42,3 +36,9 @@
 />
 
 <div>Secondary: {secondary}</div>
+
+<style>
+  div {
+    margin: var(--cds-layout-01) 0 var(--cds-layout-03);
+  }
+</style>
diff --git a/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte b/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
index ef014adb..f0cffa46 100644
--- a/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
+++ b/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
@@ -19,7 +19,7 @@
 </FormGroup>
 
 <ButtonSet>
-  {#each ['free', 'standard', 'pro'] as value}
+  {#each ["free", "standard", "pro"] as value}
     <Button
       on:click="{() => {
         plan = value;
diff --git a/docs/src/pages/framed/Search/SearchReactive.svelte b/docs/src/pages/framed/Search/SearchReactive.svelte
index 08fb1cc1..23dee3dc 100644
--- a/docs/src/pages/framed/Search/SearchReactive.svelte
+++ b/docs/src/pages/framed/Search/SearchReactive.svelte
@@ -4,12 +4,6 @@
   let value = "";
 </script>
 
-<style>
-  div {
-    margin-top: var(--cds-spacing-05);
-  }
-</style>
-
 <Search bind:value />
 
 <div>
@@ -33,3 +27,9 @@
 </div>
 
 <div>Value: {value}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/Toggle/ToggleReactive.svelte b/docs/src/pages/framed/Toggle/ToggleReactive.svelte
index e1f5549f..4b88ef14 100644
--- a/docs/src/pages/framed/Toggle/ToggleReactive.svelte
+++ b/docs/src/pages/framed/Toggle/ToggleReactive.svelte
@@ -4,19 +4,19 @@
   let toggled = true;
 </script>
 
-<style>
-  div {
-    margin-top: var(--cds-spacing-05);
-  }
-</style>
-
 <Toggle labelText="Push notifications" bind:toggled />
 
 <div>
   <Button size="small" on:click="{() => (toggled = !toggled)}">
     Toggle
-    {toggled ? 'off' : 'on'}
+    {toggled ? "off" : "on"}
   </Button>
 </div>
 
 <div>Toggled: {toggled}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/Tooltip/TooltipReactive.svelte b/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
index 8d131ae1..70fa73e3 100644
--- a/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
+++ b/docs/src/pages/framed/Tooltip/TooltipReactive.svelte
@@ -4,20 +4,20 @@
   let open = true;
 </script>
 
-<style>
-  div {
-    margin-top: var(--cds-spacing-05);
-  }
-</style>
-
 <Tooltip bind:open triggerText="Resource list" align="start">
   <p>Resources are provisioned based on your account's organization.</p>
 </Tooltip>
 
 <div style="margin-top: var(--cds-spacing-12);">
   <Button size="small" on:click="{() => (open = !open)}">
-    {open ? 'Close tooltip' : 'Open tooltip'}
+    {open ? "Close tooltip" : "Open tooltip"}
   </Button>
 </div>
 
 <div>Open: {open}</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte
index 19716f73..200411bb 100644
--- a/docs/src/pages/framed/_reset.svelte
+++ b/docs/src/pages/framed/_reset.svelte
@@ -13,6 +13,8 @@
   $: document.documentElement.setAttribute("theme", currentTheme);
 </script>
 
+<slot />
+
 <style>
   :global(body.framed) {
     min-height: 100vh;
@@ -20,5 +22,3 @@
     padding: var(--cds-spacing-06) var(--cds-spacing-05);
   }
 </style>
-
-<slot />
diff --git a/examples/sapper/src/components/Nav.svelte b/examples/sapper/src/components/Nav.svelte
index d670b940..6e09e3e4 100644
--- a/examples/sapper/src/components/Nav.svelte
+++ b/examples/sapper/src/components/Nav.svelte
@@ -2,6 +2,31 @@
   export let segment;
 </script>
 
+<nav>
+  <ul>
+    <li>
+      <a aria-current="{segment === undefined ? 'page' : undefined}" href="."
+        >home</a
+      >
+    </li>
+    <li>
+      <a aria-current="{segment === 'about' ? 'page' : undefined}" href="about"
+        >about</a
+      >
+    </li>
+
+    <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+		     the blog data when we hover over the link or tap it on a touchscreen -->
+    <li>
+      <a
+        rel="prefetch"
+        aria-current="{segment === 'blog' ? 'page' : undefined}"
+        href="blog">blog</a
+      >
+    </li>
+  </ul>
+</nav>
+
 <style>
   nav {
     border-bottom: 1px solid rgba(255, 62, 0, 0.1);
@@ -47,30 +72,3 @@
     display: block;
   }
 </style>
-
-<nav>
-  <ul>
-    <li>
-      <a
-        aria-current="{segment === undefined ? 'page' : undefined}"
-        href="."
-      >home</a>
-    </li>
-    <li>
-      <a
-        aria-current="{segment === 'about' ? 'page' : undefined}"
-        href="about"
-      >about</a>
-    </li>
-
-    <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
-		     the blog data when we hover over the link or tap it on a touchscreen -->
-    <li>
-      <a
-        rel="prefetch"
-        aria-current="{segment === 'blog' ? 'page' : undefined}"
-        href="blog"
-      >blog</a>
-    </li>
-  </ul>
-</nav>
diff --git a/examples/svite/src/App.svelte b/examples/svite/src/App.svelte
index e989e2b8..59dff254 100644
--- a/examples/svite/src/App.svelte
+++ b/examples/svite/src/App.svelte
@@ -13,10 +13,6 @@
   let theme = "g10";
 </script>
 
-<style lang="scss" global>
-  @import "carbon-components-svelte/css/all";
-</style>
-
 <Theme persist bind:theme>
   <Header />
   <Content style="background: none; padding: 1rem">
@@ -90,3 +86,7 @@
     </Grid>
   </Content>
 </Theme>
+
+<style lang="scss" global>
+  @import "carbon-components-svelte/css/all";
+</style>
diff --git a/package.json b/package.json
index 3692cfa9..1f122ea1 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,8 @@
     "lint-staged": "^10.5.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.4",
-    "prettier": "^2.2.0",
-    "prettier-plugin-svelte": "^1.4.1",
+    "prettier": "^2.2.1",
+    "prettier-plugin-svelte": "^2.1.1",
     "rollup": "^2.38.0",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
diff --git a/src/Breadcrumb/BreadcrumbItem.svelte b/src/Breadcrumb/BreadcrumbItem.svelte
index 1f884af5..e421cea3 100644
--- a/src/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/Breadcrumb/BreadcrumbItem.svelte
@@ -17,7 +17,8 @@
 
 <li
   class:bx--breadcrumb-item="{true}"
-  class:bx--breadcrumb-item--current="{isCurrentPage && $$restProps['aria-current'] !== 'page'}"
+  class:bx--breadcrumb-item--current="{isCurrentPage &&
+    $$restProps['aria-current'] !== 'page'}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -30,7 +31,10 @@
     </Link>
   {:else}
     <slot
-      props="{{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }}"
+      props="{{
+        'aria-current': $$restProps['aria-current'],
+        class: 'bx--link',
+      }}"
     />
   {/if}
 </li>
diff --git a/src/Button/ButtonSkeleton.svelte b/src/Button/ButtonSkeleton.svelte
index 976c9ad3..321bf047 100644
--- a/src/Button/ButtonSkeleton.svelte
+++ b/src/Button/ButtonSkeleton.svelte
@@ -33,7 +33,7 @@
     on:mouseenter
     on:mouseleave
   >
-    {''}
+    {""}
   </a>
 {:else}
   <div
diff --git a/src/Checkbox/CheckboxSkeleton.svelte b/src/Checkbox/CheckboxSkeleton.svelte
index 61572da5..99dbf58f 100644
--- a/src/Checkbox/CheckboxSkeleton.svelte
+++ b/src/Checkbox/CheckboxSkeleton.svelte
@@ -8,8 +8,6 @@
   on:mouseenter
   on:mouseleave
 >
-  <span
-    class:bx--checkbox-label-text="{true}"
-    class:bx--skeleton="{true}"
+  <span class:bx--checkbox-label-text="{true}" class:bx--skeleton="{true}"
   ></span>
 </div>
diff --git a/src/Checkbox/InlineCheckbox.svelte b/src/Checkbox/InlineCheckbox.svelte
index 7e21badd..76f5fe72 100644
--- a/src/Checkbox/InlineCheckbox.svelte
+++ b/src/Checkbox/InlineCheckbox.svelte
@@ -34,5 +34,4 @@
   for="{id}"
   title="{title}"
   aria-label="{$$props['aria-label']}"
-  class:bx--checkbox-label="{true}"
-></label>
+  class:bx--checkbox-label="{true}"></label>
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 5be6fe11..7eee44fc 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -104,7 +104,7 @@
     on:mouseleave
   />
 {:else}
-  {#if type === 'inline'}
+  {#if type === "inline"}
     {#if hideCopyButton}
       <span
         class:bx--snippet="{true}"
@@ -128,11 +128,16 @@
         feedback="{feedback}"
         feedbackTimeout="{feedbackTimeout}"
         class="bx--snippet {type && `bx--snippet--${type}`}
-          {type === 'inline' && 'bx--btn--copy'}
-          {expanded && 'bx--snippet--expand'}
-          {light && 'bx--snippet--light'}
-          {hideCopyButton && 'bx--snippet--no-copy'}
-          {wrapText && 'bx--snippet--wraptext'}"
+          {type ===
+          'inline' && 'bx--btn--copy'}
+          {expanded &&
+          'bx--snippet--expand'}
+          {light &&
+          'bx--snippet--light'}
+          {hideCopyButton &&
+          'bx--snippet--no-copy'}
+          {wrapText &&
+          'bx--snippet--wraptext'}"
         {...$$restProps}
         on:click
         on:mouseover
diff --git a/src/CodeSnippet/CodeSnippetSkeleton.svelte b/src/CodeSnippet/CodeSnippetSkeleton.svelte
index 70d550bb..a3af51ef 100644
--- a/src/CodeSnippet/CodeSnippetSkeleton.svelte
+++ b/src/CodeSnippet/CodeSnippetSkeleton.svelte
@@ -18,8 +18,8 @@
   on:mouseleave
 >
   <div class:bx--snippet-container="{true}">
-    {#if type === 'single'}
+    {#if type === "single"}
       <span></span>
-    {:else if type === 'multi'}<span></span> <span></span> <span></span>{/if}
+    {:else if type === "multi"}<span></span> <span></span> <span></span>{/if}
   </div>
 </div>
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 6f67adb2..15f64dc4 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -221,7 +221,10 @@
         on:blur
         on:blur="{({ relatedTarget }) => {
           if (!open || !relatedTarget) return;
-          if (relatedTarget.getAttribute('role') !== 'button' && relatedTarget.getAttribute('role') !== 'searchbox') {
+          if (
+            relatedTarget.getAttribute('role') !== 'button' &&
+            relatedTarget.getAttribute('role') !== 'searchbox'
+          ) {
             ref.focus();
           }
         }}"
diff --git a/src/Copy/Copy.svelte b/src/Copy/Copy.svelte
index 9217446e..ca176d1e 100644
--- a/src/Copy/Copy.svelte
+++ b/src/Copy/Copy.svelte
@@ -45,7 +45,7 @@
   }}"
 >
   <slot>
-    {#if animation}{feedback || $$restProps['aria-label']}{/if}
+    {#if animation}{feedback || $$restProps["aria-label"]}{/if}
   </slot>
   <span
     aria-hidden="true"
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index a932d26f..e34a0b07 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -252,7 +252,9 @@
               on:click="{() => {
                 dispatch('click', { header });
                 let active = header.key === $sortHeader.key;
-                let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
+                let currentSortDirection = active
+                  ? $sortHeader.sortDirection
+                  : 'none';
                 let sortDirection = sortDirectionMap[currentSortDirection];
                 dispatch('click:header', { header, sortDirection });
                 sortHeader.set({
@@ -273,7 +275,13 @@
       {#each sorting ? sortedRows : rows as row, i (row.id)}
         <TableRow
           id="row-{row.id}"
-          class="{selectedRowIds.includes(row.id) ? 'bx--data-table--selected' : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable ? 'bx--parent-row' : ''} {expandable && parentRowId === row.id ? 'bx--expandable-row--hover' : ''}"
+          class="{selectedRowIds.includes(row.id)
+            ? 'bx--data-table--selected'
+            : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
+            ? 'bx--parent-row'
+            : ''} {expandable && parentRowId === row.id
+            ? 'bx--expandable-row--hover'
+            : ''}"
           on:click="{() => {
             dispatch('click', { row });
             dispatch('click:row', row);
@@ -289,16 +297,22 @@
             <TableCell
               class="bx--table-expand"
               headers="expand"
-              data-previous-value="{expandedRows[row.id] ? 'collapsed' : undefined}"
+              data-previous-value="{expandedRows[row.id]
+                ? 'collapsed'
+                : undefined}"
             >
               <button
                 type="button"
                 class:bx--table-expand__button="{true}"
-                aria-label="{expandedRows[row.id] ? 'Collapse current row' : 'Expand current row'}"
+                aria-label="{expandedRows[row.id]
+                  ? 'Collapse current row'
+                  : 'Expand current row'}"
                 on:click="{() => {
                   const rowExpanded = !!expandedRows[row.id];
 
-                  expandedRowIds = rowExpanded ? expandedRowIds.filter((id) => id !== row.id) : [...expandedRowIds, row.id];
+                  expandedRowIds = rowExpanded
+                    ? expandedRowIds.filter((id) => id !== row.id)
+                    : [...expandedRowIds, row.id];
 
                   dispatch('click:row--expand', {
                     row,
@@ -329,7 +343,9 @@
                   checked="{selectedRowIds.includes(row.id)}"
                   on:change="{() => {
                     if (selectedRowIds.includes(row.id)) {
-                      selectedRowIds = selectedRowIds.filter((id) => id !== row.id);
+                      selectedRowIds = selectedRowIds.filter(
+                        (id) => id !== row.id
+                      );
                     } else {
                       selectedRowIds = [...selectedRowIds, row.id];
                     }
@@ -342,7 +358,9 @@
             {#if headers[j].empty}
               <td class:bx--table-column-menu="{headers[j].columnMenu}">
                 <slot name="cell" row="{row}" cell="{cell}">
-                  {headers[j].display ? headers[j].display(cell.value) : cell.value}
+                  {headers[j].display
+                    ? headers[j].display(cell.value)
+                    : cell.value}
                 </slot>
               </td>
             {:else}
@@ -353,7 +371,9 @@
                 }}"
               >
                 <slot name="cell" row="{row}" cell="{cell}">
-                  {headers[j].display ? headers[j].display(cell.value) : cell.value}
+                  {headers[j].display
+                    ? headers[j].display(cell.value)
+                    : cell.value}
                 </slot>
               </TableCell>
             {/if}
diff --git a/src/DataTable/DataTableSkeleton.svelte b/src/DataTable/DataTableSkeleton.svelte
index 981e42f9..eb7de2e0 100644
--- a/src/DataTable/DataTableSkeleton.svelte
+++ b/src/DataTable/DataTableSkeleton.svelte
@@ -58,8 +58,7 @@
         <span
           class:bx--skeleton="{true}"
           class:bx--btn="{true}"
-          class:bx--btn--sm="{true}"
-        ></span>
+          class:bx--btn--sm="{true}"></span>
       </div>
     </section>
   {/if}
@@ -78,7 +77,7 @@
     <thead>
       <tr>
         {#each cols as col (col)}
-          <th>{values[col] || ''}</th>
+          <th>{values[col] || ""}</th>
         {/each}
       </tr>
     </thead>
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index 88926c54..0a56d48b 100644
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@@ -37,7 +37,8 @@
     <button
       class:bx--table-sort="{true}"
       class:bx--table-sort--active="{active}"
-      class:bx--table-sort--ascending="{active && $sortHeader.sortDirection === 'descending'}"
+      class:bx--table-sort--ascending="{active &&
+        $sortHeader.sortDirection === 'descending'}"
       on:click
     >
       <div class:bx--table-header-label="{true}">
diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte
index 3e93c152..ab6d42af 100644
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@@ -188,8 +188,11 @@
     class:bx--date-picker="{true}"
     class:bx--date-picker--short="{short}"
     class:bx--date-picker--light="{light}"
-    class="{datePickerType && `bx--date-picker--${datePickerType}`}
-      {datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}"
+    class="{datePickerType &&
+      `bx--date-picker--${datePickerType}`}
+      {datePickerType === 'range' &&
+      $labelTextEmpty &&
+      'bx--date-picker--nolabel'}"
   >
     <slot />
   </div>
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 7c57eaa9..afaa6a6b 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -155,11 +155,17 @@
     id="{id}"
     name="{name}"
     aria-label="{$$props['aria-label']}"
-    class="bx--dropdown {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'}
+    class="bx--dropdown {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 }) => {
       open = ref.contains(target) ? !open : false;
diff --git a/src/FileUploader/Filename.svelte b/src/FileUploader/Filename.svelte
index d8d913a7..6128daa6 100644
--- a/src/FileUploader/Filename.svelte
+++ b/src/FileUploader/Filename.svelte
@@ -17,7 +17,7 @@
   import { Loading } from "../Loading";
 </script>
 
-{#if status === 'uploading'}
+{#if status === "uploading"}
   <Loading
     description="{iconDescription}"
     {...$$restProps}
@@ -26,7 +26,7 @@
   />
 {/if}
 
-{#if status === 'edit'}
+{#if status === "edit"}
   {#if invalid}
     <WarningFilled16 class="bx--file-invalid" />
   {/if}
@@ -40,7 +40,7 @@
   />
 {/if}
 
-{#if status === 'complete'}
+{#if status === "complete"}
   <CheckmarkFilled16
     aria-label="{iconDescription}"
     title="{iconDescription}"
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index d3a64489..4be7d9dc 100644
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@@ -54,11 +54,11 @@
   on:mouseleave
 >
   <div class:bx--inline-loading__animation="{true}">
-    {#if status === 'error'}
+    {#if status === "error"}
       <Error20 class="bx--inline-loading--error" />
-    {:else if status === 'finished'}
+    {:else if status === "finished"}
       <CheckmarkFilled16 class="bx--inline-loading__checkmark-container" />
-    {:else if status === 'inactive' || status === 'active'}
+    {:else if status === "inactive" || status === "active"}
       <Loading
         small
         description="{iconDescription}"
diff --git a/src/ListBox/ListBoxField.svelte b/src/ListBox/ListBoxField.svelte
index 5341a42e..37e25755 100644
--- a/src/ListBox/ListBoxField.svelte
+++ b/src/ListBox/ListBoxField.svelte
@@ -50,7 +50,9 @@
   aria-owns="{(ariaExpanded && menuId) || undefined}"
   aria-controls="{(ariaExpanded && menuId) || undefined}"
   aria-disabled="{disabled}"
-  aria-label="{ariaExpanded ? translateWithId('close') : translateWithId('open')}"
+  aria-label="{ariaExpanded
+    ? translateWithId('close')
+    : translateWithId('open')}"
   tabindex="{disabled ? '-1' : tabindex}"
   class:bx--list-box__field="{true}"
   {...$$restProps}
diff --git a/src/Loading/Loading.svelte b/src/Loading/Loading.svelte
index f91b605f..19ada638 100644
--- a/src/Loading/Loading.svelte
+++ b/src/Loading/Loading.svelte
@@ -40,15 +40,13 @@
             class:bx--loading__background="{true}"
             cx="50%"
             cy="50%"
-            r="{spinnerRadius}"
-          ></circle>
+            r="{spinnerRadius}"></circle>
         {/if}
         <circle
           class:bx--loading__stroke="{true}"
           cx="50%"
           cy="50%"
-          r="{spinnerRadius}"
-        ></circle>
+          r="{spinnerRadius}"></circle>
       </svg>
     </div>
   </div>
@@ -71,15 +69,13 @@
           class:bx--loading__background="{true}"
           cx="50%"
           cy="50%"
-          r="{spinnerRadius}"
-        ></circle>
+          r="{spinnerRadius}"></circle>
       {/if}
       <circle
         class:bx--loading__stroke="{true}"
         cx="50%"
         cy="50%"
-        r="{spinnerRadius}"
-      ></circle>
+        r="{spinnerRadius}"></circle>
     </svg>
   </div>
 {/if}
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index f2c3ae16..65154034 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -253,10 +253,14 @@
     warn="{warn}"
     warnText="{warnText}"
     class="bx--multi-select {filterable && 'bx--combo-box'}
-      {filterable && 'bx--multi-select--filterable'}
-      {invalid && 'bx--multi-select--invalid'}
-      {inline && 'bx--multi-select--inline'}
-      {checked.length > 0 && 'bx--multi-select--selected'}"
+      {filterable &&
+      'bx--multi-select--filterable'}
+      {invalid &&
+      'bx--multi-select--invalid'}
+      {inline &&
+      'bx--multi-select--inline'}
+      {checked.length > 0 &&
+      'bx--multi-select--selected'}"
   >
     {#if invalid}
       <WarningFilled16 class="bx--list-box__invalid-icon" />
@@ -298,7 +302,9 @@
           change(-1);
         } else if (key === 'Enter') {
           if (highlightedIndex > -1) {
-            sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
+            sortedItems[highlightedIndex].checked = !sortedItems[
+              highlightedIndex
+            ].checked;
           }
         }
       }}"
@@ -347,7 +353,9 @@
           on:keydown|stopPropagation="{({ key }) => {
             if (key === 'Enter') {
               if (highlightedIndex > -1) {
-                sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
+                sortedItems[highlightedIndex].checked = !sortedItems[
+                  highlightedIndex
+                ].checked;
               }
             } else if (key === 'Tab') {
               open = false;
@@ -360,7 +368,10 @@
           on:focus
           on:blur
           on:blur="{({ relatedTarget }) => {
-            if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
+            if (
+              relatedTarget &&
+              relatedTarget.getAttribute('role') !== 'button'
+            ) {
               inputRef.focus();
             }
           }}"
diff --git a/src/Notification/NotificationTextDetails.svelte b/src/Notification/NotificationTextDetails.svelte
index dbee670a..c73a5e37 100644
--- a/src/Notification/NotificationTextDetails.svelte
+++ b/src/Notification/NotificationTextDetails.svelte
@@ -15,7 +15,7 @@
   export let caption = "Caption";
 </script>
 
-{#if notificationType === 'toast'}
+{#if notificationType === "toast"}
   <div class:bx--toast-notification__details="{true}">
     <h3 class:bx--toast-notification__title="{true}">{title}</h3>
     <div class:bx--toast-notification__subtitle="{true}">{subtitle}</div>
@@ -24,7 +24,7 @@
   </div>
 {/if}
 
-{#if notificationType === 'inline'}
+{#if notificationType === "inline"}
   <div class:bx--inline-notification__text-wrapper="{true}">
     <p class:bx--inline-notification__title="{true}">{title}</p>
     <div class:bx--inline-notification__subtitle="{true}">{subtitle}</div>
diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index efb9f5d6..c03dc02f 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -121,7 +121,11 @@
       {#if pagesUnknown}
         {itemText(pageSize * (page - 1) + 1, page * pageSize)}
       {:else}
-        {itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems)}
+        {itemRangeText(
+          Math.min(pageSize * (page - 1) + 1, totalItems),
+          Math.min(page * pageSize, totalItems),
+          totalItems
+        )}
       {/if}
     </span>
   </div>
@@ -153,7 +157,9 @@
       icon="{CaretLeft16}"
       iconDescription="{backwardText}"
       disabled="{backButtonDisabled}"
-      class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
+      class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
+        ? 'bx--pagination__button--no-index'
+        : ''}"
       on:click="{() => {
         page--;
       }}"
@@ -166,7 +172,9 @@
       icon="{CaretRight16}"
       iconDescription="{forwardText}"
       disabled="{forwardButtonDisabled}"
-      class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
+      class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled
+        ? 'bx--pagination__button--no-index'
+        : ''}"
       on:click="{() => {
         page++;
       }}"
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
index 9d76a61b..d8fe9d3d 100644
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@@ -94,7 +94,7 @@
         active="{page === 0}"
         on:click="{() => (page = 0)}"
       >
-        {page === 0 ? 'Active, Page' : 'Page'}
+        {page === 0 ? "Active, Page" : "Page"}
       </PaginationItem>
     {/if}
     <PaginationOverflow
@@ -108,7 +108,7 @@
         active="{page === item}"
         on:click="{() => (page = item)}"
       >
-        {page === item ? 'Active, Page' : 'Page'}
+        {page === item ? "Active, Page" : "Page"}
       </PaginationItem>
     {/each}
     <PaginationOverflow
@@ -124,7 +124,7 @@
         active="{page === total - 1}"
         on:click="{() => (page = total - 1)}"
       >
-        {page === total - 1 ? 'Active, Page' : 'Page'}
+        {page === total - 1 ? "Active, Page" : "Page"}
       </PaginationItem>
     {/if}
     <li class:bx--pagination-nav__list-item="{true}">
diff --git a/src/RadioButton/RadioButtonSkeleton.svelte b/src/RadioButton/RadioButtonSkeleton.svelte
index 1ed919d4..057a5a79 100644
--- a/src/RadioButton/RadioButtonSkeleton.svelte
+++ b/src/RadioButton/RadioButtonSkeleton.svelte
@@ -7,8 +7,6 @@
   on:mouseleave
 >
   <div class:bx--radio-button="{true}" class:bx--skeleton="{true}"></div>
-  <span
-    class:bx--radio-button__label="{true}"
-    class:bx--skeleton="{true}"
+  <span class:bx--radio-button__label="{true}" class:bx--skeleton="{true}"
   ></span>
 </div>
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index 091ea54a..fd327af4 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -151,9 +151,15 @@
       on:mousedown="{startHolding}"
       on:touchstart="{startHolding}"
       on:keydown="{({ shiftKey, key }) => {
-        const keys = { ArrowDown: -1, ArrowLeft: -1, ArrowRight: 1, ArrowUp: 1 };
+        const keys = {
+          ArrowDown: -1,
+          ArrowLeft: -1,
+          ArrowRight: 1,
+          ArrowUp: 1,
+        };
         if (keys[key]) {
-          value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
+          value +=
+            step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
         }
       }}"
     >
diff --git a/src/Tag/TagSkeleton.svelte b/src/Tag/TagSkeleton.svelte
index 5b8248b2..8071cd53 100644
--- a/src/Tag/TagSkeleton.svelte
+++ b/src/Tag/TagSkeleton.svelte
@@ -5,5 +5,4 @@
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-></span>
+  on:mouseleave></span>
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index fa338b41..a623efef 100644
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@@ -94,8 +94,7 @@
         value = target.value;
       }}"
       on:focus
-      on:blur
-    ></textarea>
+      on:blur></textarea>
   </div>
   {#if !invalid && helperText}
     <div
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index c2fdf7a5..a5c0ef4f 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -143,20 +143,22 @@
       class:bx--btn--disabled="{disabled}"
       class:bx--tooltip__trigger="{true}"
       class:bx--tooltip--a11y="{true}"
-      class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
-        {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
+      class="{tooltipPosition &&
+        `bx--tooltip--${tooltipPosition}`}
+        {tooltipAlignment &&
+        `bx--tooltip--align-${tooltipAlignment}`}"
       on:click="{() => {
         type = type === 'password' ? 'text' : 'password';
       }}"
     >
       {#if !disabled}
         <span class:bx--assistive-text="{true}">
-          {#if type === 'text'}
+          {#if type === "text"}
             {hidePasswordLabel}
           {:else}{showPasswordLabel}{/if}
         </span>
       {/if}
-      {#if type === 'text'}
+      {#if type === "text"}
         <ViewOff16 class="bx--icon-visibility-off" />
       {:else}
         <View16 class="bx--icon-visibility-on" />
diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
index ca514a10..08d8cbe4 100644
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@@ -63,7 +63,9 @@
   class:bx--tile--is-expanded="{expanded}"
   class:bx--tile--light="{light}"
   {...$$restProps}
-  style="{expanded ? $$restProps.style : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
+  style="{expanded
+    ? $$restProps.style
+    : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
   on:click
   on:click="{() => {
     expanded = !expanded;
diff --git a/src/Toggle/Toggle.svelte b/src/Toggle/Toggle.svelte
index 7bd0a829..97b3e3b6 100644
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@@ -70,10 +70,9 @@
       <span aria-hidden="true" class:bx--toggle__text--off="{true}">
         {labelA}
       </span>
-      <span
-        aria-hidden="true"
-        class:bx--toggle__text--on="{true}"
-      >{labelB}</span>
+      <span aria-hidden="true" class:bx--toggle__text--on="{true}"
+        >{labelB}</span
+      >
     </span>
   </label>
 </div>
diff --git a/src/Toggle/ToggleSkeleton.svelte b/src/Toggle/ToggleSkeleton.svelte
index ea0e61a9..3a0887ca 100644
--- a/src/Toggle/ToggleSkeleton.svelte
+++ b/src/Toggle/ToggleSkeleton.svelte
@@ -28,7 +28,9 @@
     class:bx--skeleton="{true}"
   />
   <label
-    aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}"
+    aria-label="{labelText
+      ? undefined
+      : $$props['aria-label'] || 'Toggle is loading'}"
     for="{id}"
     class:bx--toggle__label="{true}"
     class:bx--skeleton="{true}"
diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte
index d2c0849d..657f8f5d 100644
--- a/src/ToggleSmall/ToggleSmall.svelte
+++ b/src/ToggleSmall/ToggleSmall.svelte
@@ -78,10 +78,9 @@
       <span aria-hidden="true" class:bx--toggle__text--off="{true}">
         {labelA}
       </span>
-      <span
-        aria-hidden="true"
-        class:bx--toggle__text--on="{true}"
-      >{labelB}</span>
+      <span aria-hidden="true" class:bx--toggle__text--on="{true}"
+        >{labelB}</span
+      >
     </span>
   </label>
 </div>
diff --git a/src/ToggleSmall/ToggleSmallSkeleton.svelte b/src/ToggleSmall/ToggleSmallSkeleton.svelte
index e7d7b1f8..d04d74c0 100644
--- a/src/ToggleSmall/ToggleSmallSkeleton.svelte
+++ b/src/ToggleSmall/ToggleSmallSkeleton.svelte
@@ -28,7 +28,9 @@
     class:bx--skeleton="{true}"
   />
   <label
-    aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}"
+    aria-label="{labelText
+      ? undefined
+      : $$props['aria-label'] || 'Toggle is loading'}"
     class:bx--toggle__label="{true}"
     class:bx--skeleton="{true}"
     for="{id}"
diff --git a/src/UIShell/GlobalHeader/HeaderAction.svelte b/src/UIShell/GlobalHeader/HeaderAction.svelte
index 34473322..4989ce9c 100644
--- a/src/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/UIShell/GlobalHeader/HeaderAction.svelte
@@ -40,22 +40,6 @@
   let refPanel = null;
 </script>
 
-<style>
-  .action-text {
-    font-size: 16px;
-    line-height: 20px;
-    text-decoration: none;
-    color: #fff;
-    width: 100%;
-    padding: 0 1rem;
-  }
-
-  .action-text > span {
-    margin-left: 0.75rem;
-    vertical-align: top;
-  }
-</style>
-
 <svelte:window
   on:click="{({ target }) => {
     if (isOpen && !ref.contains(target) && !refPanel.contains(target)) {
@@ -89,9 +73,28 @@
       bind:this="{refPanel}"
       class:bx--header-panel="{true}"
       class:bx--header-panel--expanded="{true}"
-      transition:slide="{{ ...transition, duration: transition === false ? 0 : transition.duration }}"
+      transition:slide="{{
+        ...transition,
+        duration: transition === false ? 0 : transition.duration,
+      }}"
     >
       <slot />
     </div>
   {/if}
 </div>
+
+<style>
+  .action-text {
+    font-size: 16px;
+    line-height: 20px;
+    text-decoration: none;
+    color: #fff;
+    width: 100%;
+    padding: 0 1rem;
+  }
+
+  .action-text > span {
+    margin-left: 0.75rem;
+    vertical-align: top;
+  }
+</style>
diff --git a/src/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
index 01cedbea..d4530519 100644
--- a/src/UIShell/GlobalHeader/HeaderActionLink.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
@@ -20,16 +20,6 @@
   import Icon from "../../Icon/Icon.svelte";
 </script>
 
-<style>
-  .action-link {
-    text-align: center;
-    align-items: center;
-    vertical-align: middle;
-    justify-content: center;
-    padding-top: 10px;
-  }
-</style>
-
 <a
   bind:this="{ref}"
   class:bx--header__action="{true}"
@@ -41,3 +31,13 @@
 >
   <Icon render="{icon}" />
 </a>
+
+<style>
+  .action-link {
+    text-align: center;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    padding-top: 10px;
+  }
+</style>
diff --git a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
index 8ed2a15c..b296cb13 100644
--- a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
@@ -54,6 +54,87 @@
   $: showResults = $searchStore ? true : false;
 </script>
 
+<svelte:window
+  on:mouseup="{({ target }) => {
+    if (target && elTypeSearch) {
+      if (!elTypeSearch.contains(target)) {
+        searchIsActive = false;
+        isSearchFocus = false;
+      }
+    }
+  }}"
+/>
+
+<div
+  bind:this="{elTypeSearch}"
+  role="search"
+  class="search-wrapper"
+  class:search-wrapper-hidden="{!searchIsActive}"
+  class:search-focus="{isSearchFocus || searchIsActive}"
+>
+  <div
+    id="right-panel-action-search"
+    class="search-wrapper-2"
+    role="combobox"
+    aria-expanded="{searchIsActive}"
+  >
+    <button
+      tabindex="{searchTabIndex}"
+      aria-label="Search"
+      class:bx--header__action="{true}"
+      class:btn-search="{true}"
+      class:btn-search-disabled="{searchIsActive}"
+      on:click="{() => {
+        isSearchFocus = true;
+        searchIsActive = true;
+        dispatch('focusInputSearch');
+      }}"
+      type="button"
+      on:keydown="{({ key }) => {
+        if (key === 'Enter') {
+          searchIsActive = !searchIsActive;
+        }
+      }}"
+    >
+      <Icon title="Search" tabindex="0" render="{Search20}" />
+    </button>
+    <input
+      bind:this="{elInput}"
+      id="input-search-field"
+      type="text"
+      autocomplete="off"
+      tabindex="{closeTabIndex}"
+      class="input-search"
+      class:input-hidden="{!searchIsActive}"
+      placeholder="Search"
+      on:focus="{() => dispatch('focusInputSearch')}"
+      on:focusout="{() => dispatch('focusOutInputSearch')}"
+      on:input="{dispatchInputs}"
+    />
+    <button
+      id="right-panel-close-search"
+      tabindex="{closeTabIndex}"
+      class:bx--header__action="{true}"
+      class:btn-clear="{true}"
+      class:btn-clear-hidden="{!searchIsActive}"
+      type="button"
+      aria-label="Clear search"
+      on:click="{() => {
+        isSearchFocus = false;
+        searchIsActive = false;
+        searchStore.clear();
+      }}"
+      on:keydown="{({ key }) => {
+        if (key === 'Enter') {
+          searchIsActive = !searchIsActive;
+        }
+      }}"
+    >
+      <Icon title="Close" tabindex="0" render="{Close20}" />
+    </button>
+  </div>
+</div>
+
 <style>
   .search-wrapper {
     position: relative;
@@ -140,84 +221,3 @@
     display: none;
   }
 </style>
-
-<svelte:window
-  on:mouseup="{({ target }) => {
-    if (target && elTypeSearch) {
-      if (!elTypeSearch.contains(target)) {
-        searchIsActive = false;
-        isSearchFocus = false;
-      }
-    }
-  }}"
-/>
-
-<div
-  bind:this="{elTypeSearch}"
-  role="search"
-  class="search-wrapper"
-  class:search-wrapper-hidden="{!searchIsActive}"
-  class:search-focus="{isSearchFocus || searchIsActive}"
->
-  <div
-    id="right-panel-action-search"
-    class="search-wrapper-2"
-    role="combobox"
-    aria-expanded="{searchIsActive}"
-  >
-    <button
-      tabindex="{searchTabIndex}"
-      aria-label="Search"
-      class:bx--header__action="{true}"
-      class:btn-search="{true}"
-      class:btn-search-disabled="{searchIsActive}"
-      on:click="{() => {
-        isSearchFocus = true;
-        searchIsActive = true;
-        dispatch('focusInputSearch');
-      }}"
-      type="button"
-      on:keydown="{({ key }) => {
-        if (key === 'Enter') {
-          searchIsActive = !searchIsActive;
-        }
-      }}"
-    >
-      <Icon title="Search" tabindex="0" render="{Search20}" />
-    </button>
-    <input
-      bind:this="{elInput}"
-      id="input-search-field"
-      type="text"
-      autocomplete="off"
-      tabindex="{closeTabIndex}"
-      class="input-search"
-      class:input-hidden="{!searchIsActive}"
-      placeholder="Search"
-      on:focus="{() => dispatch('focusInputSearch')}"
-      on:focusout="{() => dispatch('focusOutInputSearch')}"
-      on:input="{dispatchInputs}"
-    />
-    <button
-      id="right-panel-close-search"
-      tabindex="{closeTabIndex}"
-      class:bx--header__action="{true}"
-      class:btn-clear="{true}"
-      class:btn-clear-hidden="{!searchIsActive}"
-      type="button"
-      aria-label="Clear search"
-      on:click="{() => {
-        isSearchFocus = false;
-        searchIsActive = false;
-        searchStore.clear();
-      }}"
-      on:keydown="{({ key }) => {
-        if (key === 'Enter') {
-          searchIsActive = !searchIsActive;
-        }
-      }}"
-    >
-      <Icon title="Close" tabindex="0" render="{Close20}" />
-    </button>
-  </div>
-</div>
diff --git a/src/UIShell/GlobalHeader/HeaderPanelDivider.svelte b/src/UIShell/GlobalHeader/HeaderPanelDivider.svelte
index 90aa3cc6..c6a0c0d2 100644
--- a/src/UIShell/GlobalHeader/HeaderPanelDivider.svelte
+++ b/src/UIShell/GlobalHeader/HeaderPanelDivider.svelte
@@ -1,3 +1,9 @@
+<li class="subject-divider">
+  <span>
+    <slot />
+  </span>
+</li>
+
 <style>
   .subject-divider {
     color: #525252;
@@ -14,9 +20,3 @@
     color: #c6c6c6;
   }
 </style>
-
-<li class="subject-divider">
-  <span>
-    <slot />
-  </span>
-</li>
diff --git a/src/UIShell/HeaderSearch.svelte b/src/UIShell/HeaderSearch.svelte
index eb464498..9306e3aa 100644
--- a/src/UIShell/HeaderSearch.svelte
+++ b/src/UIShell/HeaderSearch.svelte
@@ -53,6 +53,109 @@
     : undefined;
 </script>
 
+<svelte:window
+  on:mouseup="{({ target }) => {
+    if (active && !refSearch.contains(target)) active = false;
+  }}"
+/>
+
+<div bind:this="{refSearch}" role="search" class:active>
+  <label for="search-input" id="search-label">Search</label>
+  <div role="combobox" aria-expanded="{active}">
+    <button
+      type="button"
+      aria-label="Search"
+      tabindex="{active ? '-1' : '0'}"
+      class:bx--header__action="{true}"
+      class:disabled="{active}"
+      on:click="{() => {
+        active = true;
+      }}"
+    >
+      <Search20 title="Search" />
+    </button>
+    <input
+      bind:this="{ref}"
+      type="text"
+      autocomplete="off"
+      placeholder="Search..."
+      tabindex="{active ? '0' : '-1'}"
+      class:active
+      {...$$restProps}
+      id="search-input"
+      aria-activedescendant="{selectedId}"
+      bind:value
+      on:change
+      on:input
+      on:focus
+      on:blur
+      on:keydown
+      on:keydown="{(e) => {
+        switch (e.key) {
+          case 'Enter':
+            selectResult();
+            break;
+          case 'ArrowDown':
+            e.preventDefault();
+            if (selectedResultIndex === results.length - 1) {
+              selectedResultIndex = 0;
+            } else {
+              selectedResultIndex += 1;
+            }
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            if (selectedResultIndex === 0) {
+              selectedResultIndex = results.length - 1;
+            } else {
+              selectedResultIndex -= 1;
+            }
+            break;
+        }
+      }}"
+    />
+    <button
+      type="button"
+      aria-label="Clear search"
+      tabindex="{active ? '0' : '-1'}"
+      class:bx--header__action="{true}"
+      class:hidden="{!active}"
+      on:click="{() => {
+        reset();
+        dispatch('clear');
+      }}"
+    >
+      <Close20 title="Close" />
+    </button>
+  </div>
+
+  {#if active && results.length > 0}
+    <ul aria-labelledby="search-label" role="menu" id="search-menu">
+      {#each results as result, i}
+        <li>
+          <a
+            tabindex="-1"
+            id="search-menuitem-{i}"
+            role="menuitem"
+            href="{result.href}"
+            class:selected="{selectedId === `search-menuitem-${i}`}"
+            on:click|preventDefault="{async () => {
+              selectedResultIndex = i;
+              await tick();
+              selectResult();
+            }}"
+          >
+            <slot result="{result}" index="{i}">
+              {result.text}
+              {#if result.description}<span>– {result.description}</span>{/if}
+            </slot>
+          </a>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
 <style>
   label {
     position: absolute;
@@ -185,106 +288,3 @@
     color: #c6c6c6;
   }
 </style>
-
-<svelte:window
-  on:mouseup="{({ target }) => {
-    if (active && !refSearch.contains(target)) active = false;
-  }}"
-/>
-
-<div bind:this="{refSearch}" role="search" class:active>
-  <label for="search-input" id="search-label">Search</label>
-  <div role="combobox" aria-expanded="{active}">
-    <button
-      type="button"
-      aria-label="Search"
-      tabindex="{active ? '-1' : '0'}"
-      class:bx--header__action="{true}"
-      class:disabled="{active}"
-      on:click="{() => {
-        active = true;
-      }}"
-    >
-      <Search20 title="Search" />
-    </button>
-    <input
-      bind:this="{ref}"
-      type="text"
-      autocomplete="off"
-      placeholder="Search..."
-      tabindex="{active ? '0' : '-1'}"
-      class:active
-      {...$$restProps}
-      id="search-input"
-      aria-activedescendant="{selectedId}"
-      bind:value
-      on:change
-      on:input
-      on:focus
-      on:blur
-      on:keydown
-      on:keydown="{(e) => {
-        switch (e.key) {
-          case 'Enter':
-            selectResult();
-            break;
-          case 'ArrowDown':
-            e.preventDefault();
-            if (selectedResultIndex === results.length - 1) {
-              selectedResultIndex = 0;
-            } else {
-              selectedResultIndex += 1;
-            }
-            break;
-          case 'ArrowUp':
-            e.preventDefault();
-            if (selectedResultIndex === 0) {
-              selectedResultIndex = results.length - 1;
-            } else {
-              selectedResultIndex -= 1;
-            }
-            break;
-        }
-      }}"
-    />
-    <button
-      type="button"
-      aria-label="Clear search"
-      tabindex="{active ? '0' : '-1'}"
-      class:bx--header__action="{true}"
-      class:hidden="{!active}"
-      on:click="{() => {
-        reset();
-        dispatch('clear');
-      }}"
-    >
-      <Close20 title="Close" />
-    </button>
-  </div>
-
-  {#if active && results.length > 0}
-    <ul aria-labelledby="search-label" role="menu" id="search-menu">
-      {#each results as result, i}
-        <li>
-          <a
-            tabindex="-1"
-            id="search-menuitem-{i}"
-            role="menuitem"
-            href="{result.href}"
-            class:selected="{selectedId === `search-menuitem-${i}`}"
-            on:click|preventDefault="{async () => {
-              selectedResultIndex = i;
-              await tick();
-              selectResult();
-            }}"
-          >
-            <slot result="{result}" index="{i}">
-              {result.text}
-              {#if result.description}<span>– {result.description}</span>{/if}
-            </slot>
-          </a>
-        </li>
-      {/each}
-    </ul>
-  {/if}
-</div>
diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte
index 4e0cba5b..c42e09d5 100644
--- a/tests/DataTable.test.svelte
+++ b/tests/DataTable.test.svelte
@@ -73,13 +73,13 @@
 
 <DataTable headers="{headers}" rows="{rows}">
   <span slot="cell-header" let:header>
-    {#if header.key === 'port'}
+    {#if header.key === "port"}
       {header.value}
       (network)
     {:else}{header.value}{/if}
   </span>
   <span slot="cell" let:cell>
-    {#if cell.key === 'rule' && cell.value === 'Round robin'}
+    {#if cell.key === "rule" && cell.value === "Round robin"}
       <Link
         inline
         href="https://en.wikipedia.org/wiki/Round-robin_DNS"
@@ -156,8 +156,68 @@
   sortable
   title="Load balancers"
   description="Your organization's active load balancers."
-  headers="{[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'cost', value: 'Cost', display: (cost) => cost + ' €' }, { key: 'expireDate', value: 'Expire date', display: (date) => new Date(date).toLocaleString(), sort }]}"
-  rows="{[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, cost: 100, expireDate: '2020-10-21' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, cost: 200, expireDate: '2020-09-10' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, cost: 150, expireDate: '2020-11-24' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, cost: 250, expireDate: '2020-12-01' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, cost: 550, expireDate: '2021-03-21' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, cost: 400, expireDate: '2020-11-14' }]}"
+  headers="{[
+    { key: 'name', value: 'Name' },
+    { key: 'protocol', value: 'Protocol' },
+    { key: 'port', value: 'Port' },
+    { key: 'cost', value: 'Cost', display: (cost) => cost + ' €' },
+    {
+      key: 'expireDate',
+      value: 'Expire date',
+      display: (date) => new Date(date).toLocaleString(),
+      sort,
+    },
+  ]}"
+  rows="{[
+    {
+      id: 'a',
+      name: 'Load Balancer 3',
+      protocol: 'HTTP',
+      port: 3000,
+      cost: 100,
+      expireDate: '2020-10-21',
+    },
+    {
+      id: 'b',
+      name: 'Load Balancer 1',
+      protocol: 'HTTP',
+      port: 443,
+      cost: 200,
+      expireDate: '2020-09-10',
+    },
+    {
+      id: 'c',
+      name: 'Load Balancer 2',
+      protocol: 'HTTP',
+      port: 80,
+      cost: 150,
+      expireDate: '2020-11-24',
+    },
+    {
+      id: 'd',
+      name: 'Load Balancer 6',
+      protocol: 'HTTP',
+      port: 3000,
+      cost: 250,
+      expireDate: '2020-12-01',
+    },
+    {
+      id: 'e',
+      name: 'Load Balancer 4',
+      protocol: 'HTTP',
+      port: 443,
+      cost: 550,
+      expireDate: '2021-03-21',
+    },
+    {
+      id: 'f',
+      name: 'Load Balancer 5',
+      protocol: 'HTTP',
+      port: 80,
+      cost: 400,
+      expireDate: '2020-11-14',
+    },
+  ]}"
 />
 
 <DataTable expandable headers="{headers}" rows="{rows}">
@@ -184,7 +244,12 @@
 />
 
 <DataTableSkeleton
-  headers="{[{ value: 'Name' }, { value: 'Protocol' }, { value: 'Port' }, { value: 'Rule' }]}"
+  headers="{[
+    { value: 'Name' },
+    { value: 'Protocol' },
+    { value: 'Port' },
+    { value: 'Rule' },
+  ]}"
   rows="{10}"
 />
 
diff --git a/tests/DataTableAppendColumns.test.svelte b/tests/DataTableAppendColumns.test.svelte
index 0197ad78..34913c63 100644
--- a/tests/DataTableAppendColumns.test.svelte
+++ b/tests/DataTableAppendColumns.test.svelte
@@ -20,7 +20,7 @@
 
 <DataTable sortable headers="{headers}" rows="{rows}">
   <span slot="cell" let:cell>
-    {#if cell.key === 'overflow'}
+    {#if cell.key === "overflow"}
       <OverflowMenu flipped>
         <OverflowMenuItem text="Restart" />
         <OverflowMenuItem
diff --git a/tests/Dropdown.test.svelte b/tests/Dropdown.test.svelte
index 609be35d..58e57139 100644
--- a/tests/Dropdown.test.svelte
+++ b/tests/Dropdown.test.svelte
@@ -5,7 +5,11 @@
 <Dropdown
   titleText="Contact"
   selectedIndex="{0}"
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <Dropdown
@@ -14,42 +18,66 @@
   }}"
   titleText="Contact"
   selectedIndex="{0}"
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <Dropdown
   light
   titleText="Contact"
   selectedIndex="{0}"
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <Dropdown
   type="inline"
   titleText="Contact"
   selectedIndex="{0}"
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <Dropdown
   size="xl"
   titleText="Contact"
   selectedIndex="{0}"
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <Dropdown
   size="sm"
   titleText="Contact"
   selectedIndex="{0}"
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <Dropdown
   disabled
   titleText="Contact"
   selectedIndex="{0}"
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <DropdownSkeleton />
diff --git a/tests/FilterableComboBox.test.svelte b/tests/FilterableComboBox.test.svelte
index 3fde3de7..5efbbd3f 100644
--- a/tests/FilterableComboBox.test.svelte
+++ b/tests/FilterableComboBox.test.svelte
@@ -10,6 +10,10 @@
 <ComboBox
   titleText="Contact"
   placeholder="Select contact method"
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
   shouldFilterItem="{shouldFilterItem}"
 />
diff --git a/tests/HiddenCodeSnippet.test.svelte b/tests/HiddenCodeSnippet.test.svelte
index 3298f472..f9d7dd85 100644
--- a/tests/HiddenCodeSnippet.test.svelte
+++ b/tests/HiddenCodeSnippet.test.svelte
@@ -6,12 +6,6 @@
   const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
 </script>
 
-<style>
-  .hidden {
-    display: none;
-  }
-</style>
-
 <ToggleSmall
   style="margin-bottom: var(--cds-spacing-05)"
   labelText="Show code snippets"
@@ -19,7 +13,8 @@
 />
 
 {#if toggled}
-  <h5>"Show more" will not render</h5><br />
+  <h5>"Show more" will not render</h5>
+  <br />
 {/if}
 <div class:hidden="{!toggled}">
   <CodeSnippet type="multi" code="{code}" />
@@ -27,8 +22,15 @@
 
 {#if toggled}
   <br /><br />
-  <h5>"Show more" will render</h5><br />
+  <h5>"Show more" will render</h5>
+  <br />
   <div class:hidden="{!toggled}">
     <CodeSnippet type="multi" code="{code}" />
   </div>
 {/if}
+
+<style>
+  .hidden {
+    display: none;
+  }
+</style>
diff --git a/tests/InlineLoadingUx.test.svelte b/tests/InlineLoadingUx.test.svelte
index c8443eed..4192857e 100644
--- a/tests/InlineLoadingUx.test.svelte
+++ b/tests/InlineLoadingUx.test.svelte
@@ -44,7 +44,7 @@
   >
     Cancel
   </Button>
-  {#if state !== 'dormant'}
+  {#if state !== "dormant"}
     <InlineLoading status="{state}" description="{descriptionMap[state]}" />
   {:else}
     <Button on:click="{() => (state = 'active')}">Submit</Button>
diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte
index 1e67f675..1b3f18c9 100644
--- a/tests/MultiSelect.test.svelte
+++ b/tests/MultiSelect.test.svelte
@@ -5,13 +5,21 @@
 <MultiSelect
   titleText="Contact"
   label="Select contact methods..."
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <MultiSelect
   titleText="Contact"
   label="Select contact methods..."
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
   sortItem="{() => {}}"
 />
 
@@ -19,7 +27,11 @@
   selectedIds="{['0', '1']}"
   titleText="Contact"
   label="Select contact methods..."
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <MultiSelect
@@ -28,7 +40,11 @@
   }}"
   titleText="Contact"
   label="Select contact methods..."
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
   sortItem="{() => {}}"
 />
 
@@ -36,33 +52,53 @@
   light
   titleText="Contact"
   label="Select contact methods..."
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <MultiSelect
   type="inline"
   titleText="Contact"
   label="Select contact methods..."
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <MultiSelect
   size="xl"
   titleText="Contact"
   label="Select contact methods..."
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <MultiSelect
   size="sm"
   titleText="Contact"
   label="Select contact methods..."
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
 
 <MultiSelect
   filterable
   titleText="Contact"
   placeholder="Filter contact methods..."
-  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  items="{[
+    { id: '0', text: 'Slack' },
+    { id: '1', text: 'Email' },
+    { id: '2', text: 'Fax' },
+  ]}"
 />
diff --git a/tests/StructuredList.test.svelte b/tests/StructuredList.test.svelte
index 73759606..d6586019 100644
--- a/tests/StructuredList.test.svelte
+++ b/tests/StructuredList.test.svelte
@@ -59,7 +59,7 @@
       <StructuredListCell head>ColumnA</StructuredListCell>
       <StructuredListCell head>ColumnB</StructuredListCell>
       <StructuredListCell head>ColumnC</StructuredListCell>
-      <StructuredListCell head>{''}</StructuredListCell>
+      <StructuredListCell head>{""}</StructuredListCell>
     </StructuredListRow>
   </StructuredListHead>
   <StructuredListBody>
diff --git a/yarn.lock b/yarn.lock
index 341cb15e..7fc06daa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1923,16 +1923,21 @@ prepend-http@^1.0.0:
   resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
-prettier-plugin-svelte@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.1.tgz#2f0f7a149190f476dc9b4ba9da8d482bd196f1e2"
-  integrity sha512-6y0m37Xw01GRf/WIHau+Kp3uXj2JB1agtEmNVKb9opMy34A6OMOYhfneVpNIlrghQSw/jIV+t3e5Ngt4up2CMA==
+prettier-plugin-svelte@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.1.tgz#e6613cac4292b5bbda5250680565c131b0da5ced"
+  integrity sha512-U0gRsdJtveyusHd86OUPD+lEVd13bHPPF/CZD/csKjz0Y+Cv4WbUy9x8tA5vaHFtf0tsu8Yb1MrfuhN3GH2gig==
 
 prettier@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.0.tgz#8a03c7777883b29b37fb2c4348c66a78e980418b"
   integrity sha512-yYerpkvseM4iKD/BXLYUkQV5aKt4tQPqaGW6EsZjzyu0r7sVZZNPJW4Y8MyKmicp6t42XUPcBVA+H6sB3gqndw==
 
+prettier@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
+  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"