Update examples, update README documentation (#772)

* chore(examples): update example set-ups * chore: update readme docs
2025-09-14 18:01:06 +00:00 · 2021-07-29 15:51:34 -07:00 · 2021-07-29 15:51:34 -07:00 · 0315a17d4a
commit 0315a17d4a
parent d24c60856f
97 changed files with 6778 additions and 15821 deletions
--- a/README.md
+++ b/README.md
@ -46,53 +46,9 @@ npm i -D carbon-components-svelte

 ## Usage

-The quickest way to get started is to customize a template from the [examples](examples/) folder.
+### Styling

-Example set-ups demonstrate usage with popular application bundlers and frameworks. They include a mix of client-side rendering (CSR) and server-side rendering (SSR) approaches.
-
- **[examples/rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup)
- **[examples/rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support
- **[examples/routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify)
- **[examples/sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper)
- **[examples/svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup)
- **[examples/webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack)
-
-### Scaffolding
-
-Each example is published in a dedicated branch of the same name.
-
-Use [degit](https://github.com/Rich-Harris/degit) to scaffold a new project:
-
-For example, to use the `svite` template, run the following commands:
-
-```sh
-npx degit ibm/carbon-components-svelte#svite svelte-app
-cd svelte-app
-yarn install
-```
-
-### Importing components
-
-Import components from `carbon-components-svelte` in the `script` tag of your Svelte file.
-
-```html
-<!-- App.svelte -->
-<script>
-  import { Accordion, AccordionItem } from "carbon-components-svelte";
-</script>
-
-<Accordion>
-  <AccordionItem title="Section 1" open> Content 1 </AccordionItem>
-  <AccordionItem title="Section 2"> Content 2 </AccordionItem>
-  <AccordionItem title="Section 3"> Content 3 </AccordionItem>
-</Accordion>
-```
-
-**Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
-
-### Pre-compiled CSS StyleSheets
-
-`carbon-components-svelte` includes pre-compiled CSS StyleSheets for each Carbon theme:
+Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).

 - **white.css**: Default Carbon theme (light)
 - **g10.css**: Gray 10 theme (light)
@ -112,45 +68,73 @@ The compiled CSS is generated from the following `.scss` files:
 - [css/g100.scss](css/g100.scss)
 - [css/all.scss](css/all.scss)

-#### Usage
-
-##### `svelte-preprocess`
-
-The easiest way to import a StyleSheet is with [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess).
+#### CSS StyleSheet

 ```js
-const svelteOptions = {
-  preprocess: require("svelte-preprocess")(),
-};
+// White theme
+import "carbon-components-svelte/css/white.css";
+
+// Gray 10 theme
+import "carbon-components-svelte/css/g10.css";
+
+// Gray 80 theme
+import "carbon-components-svelte/css/g80.css";
+
+// Gray 90 theme
+import "carbon-components-svelte/css/g90.css";
+
+// Gray 100 theme
+import "carbon-components-svelte/css/g100.css";
+
+// All themes
+import "carbon-components-svelte/css/all.css";
 ```

+#### CDN
+
+An alternative to loading styles is to link an external StyleSheet from a Content Delivery Network (CDN) like [unpkg.com](https://unpkg.com/).
+
+This is best suited for rapid prototyping.
+
+##### HTML
+
 ```html
-<!-- App.svelte -->
-<style lang="scss" global>
-  /** Gray 10 theme **/
-  @import "carbon-components-svelte/css/g10";
-</style>
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/carbon-components-svelte/css/white.css"
+    />
+  </head>
+</html>
 ```

-##### JavaScript import
+##### `svelte:head`

-Importing a CSS file in a JavaScript file will require the appropriate file loader(s).
+```html
+<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/carbon-components-svelte/css/white.css"
+  />
+</svelte:head>
+```
+
+### SCSS
+
+The most performant method to load styles is to import SCSS directly from carbon-components. Although it requires more set up, you can reduce the size of the bundle CSS by importing individual component styles instead of a pre-compiled CSS StyleSheet.
+
+Refer to the [official Carbon guide on SASS](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/sass.md) for documentation.
+
+### Dynamic theming
+
+Use the "all.css" StyleSheet for dynamic, client-side theming.

 ```js
 import "carbon-components-svelte/css/all.css";
-import App from "./App.svelte";
-
-const app = new App({ target: document.body });
-
-export default app;
 ```

-See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack).
-
-#### Dynamic theming
-
-Use `carbon-components-svelte/css/all.css` for dynamic, client-side styling.
-
 Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.

 ```html
@ -162,89 +146,91 @@ Update the theme by setting the `theme` attribute on the `html` element. The def
 </html>
 ```

-Using JavaScript:
+Programmatically switch between each of the five Carbon themes by setting the "theme" attribute on the HTML element.

-```svelte
+```html
 <script>
-  /** @type {"white" | "g10" | "g80" | "g90" | "g100"} */
-  let theme = "white";
+  let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"

  $: document.documentElement.setAttribute("theme", theme);
 </script>
-
-<button on:click="{() => (theme = 'g90')}">Update theme</button>
 ```

+### Importing components
+
+Import components from `carbon-components-svelte` in the `script` tag of your Svelte file. Visit the [documentation site](http://ibm.biz/carbon-svelte) for examples.
+
+```html
+<!-- App.svelte -->
+<script>
+  import { Accordion, AccordionItem } from "carbon-components-svelte";
+</script>
+
+<Accordion>
+  <AccordionItem title="Section 1" open> Content 1 </AccordionItem>
+  <AccordionItem title="Section 2"> Content 2 </AccordionItem>
+  <AccordionItem title="Section 3"> Content 3 </AccordionItem>
+</Accordion>
+```
+
+**Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
+
 ## Preprocessors

-### optimizeCarbonImports
+[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.

-`optimizeCarbonImports` is a Svelte preprocessor that optimizes base imports inside the `script` block of a Svelte file from the following libraries:
+**Yarn**

- carbon-components-svelte
- carbon-icons-svelte
- carbon-pictograms-svelte
-
-The preprocessor rewrites base imports to directly import the source Svelte file. This may lead to faster complile times **during development**.
-
-Example:
-
-**Before**
-
-```js
-import { Button, Header } from "carbon-components-svelte";
-import { Notification20 } from "carbon-icons-svelte";
-import { Airplane } from "carbon-pictograms-svelte";
+```sh
+yarn add -D carbon-preprocess-svelte
 ```

-**After**
+**NPM**

-```js
-import Button from "carbon-components-svelte/Button/Button.svelte";
-import Header from "carbon-components-svelte/UIShell/GlobalHeader/Header.svelte";
-import Notification20 from "carbon-icons-svelte/lib/Notification20/Notification20.svelte";
-import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
+```sh
+npm i -D carbon-preprocess-svelte
 ```

-#### svelte.config.js
+### `optimizeImports`
+
+`optimizeImports` is a script preprocessor that rewrites base imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can greatly speed up compile times during development while preserving typeahead and autocompletion hinting offered by integrated development environments (IDE) like VSCode.
+
+The preprocessor optimizes imports from the following packages:
+
+- [carbon-components-svelte](https://github.com/IBM/carbon-components-svelte)
+- [carbon-icons-svelte](https://github.com/IBM/carbon-icons-svelte)
+- [carbon-pictograms-svelte](https://github.com/IBM/carbon-pictograms-svelte)
+
+**Example**
+
+```diff
+- import { Button } from "carbon-components-svelte";
+- import { Add16 } from "carbon-icons-svelte";
+- import { Airplane } from "carbon-pictograms-svelte";
+ import Button from "carbon-components-svelte/Button/Button.svelte";
+ import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte";
+ import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
+```
+
+#### Usage

 ```js
 // svelte.config.js
-const {
-  optimizeCarbonImports,
-} = require("carbon-components-svelte/preprocess");
+import { optimizeImports } from "carbon-preprocess-svelte";

-module.exports = {
-  preprocess: [optimizeCarbonImports()],
+export default {
+  preprocess: [optimizeImports()],
 };
 ```

-#### svelte-loader
+## Examples

-```js
-// webpack.config.js
-const {
-  optimizeCarbonImports,
-} = require("carbon-components-svelte/preprocess");
-
-module.exports = {
-  // ...
-  module: {
-    rules: [
-      {
-        test: /\.svelte$/,
-        use: {
-          loader: "svelte-loader",
-          options: {
-            hotReload: true,
-            preprocess: [optimizeCarbonImports()],
-          },
-        },
-      },
-    ],
-  },
-};
-```
+- [examples/rollup](examples/rollup/)
+- [examples/sapper](examples/sapper/)
+- [examples/snowpack](examples/snowpack/)
+- [examples/sveltekit](examples/sveltekit/)
+- [examples/vite](examples/vite/)
+- [examples/webpack](examples/webpack/)

 ## TypeScript support

--- a/examples/rollup-typescript/.gitignore
+++ b/examples/rollup-typescript/.gitignore
@ -1,4 +0,0 @@
-/node_modules/
-/public/build/
-.vscode
-.DS_Store
--- a/examples/rollup-typescript/README.md
+++ b/examples/rollup-typescript/README.md
@ -1,23 +0,0 @@
-# rollup-typescript
-
-> Example Rollup/TypeScript set-up scaffolded from the official [Svelte template](https://github.com/sveltejs/template).
-
-## Getting started
-
-Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
-
-```sh
-npx degit ibm/carbon-components-svelte#rollup-typescript svelte-app
-cd svelte-app
-yarn install
-```
-
-## Available scripts
-
-### `yarn dev`
-
-Starts the app in development mode.
-
-### `yarn build`
-
-Builds the app for production.
--- a/examples/rollup-typescript/package.json
+++ b/examples/rollup-typescript/package.json
@ -1,29 +0,0 @@
-{
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "rollup -cw",
-    "build": "rollup -c",
-    "start": "sirv public",
-    "validate": "svelte-check"
-  },
-  "dependencies": {
-    "sirv-cli": "^1.0.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^8.0.0",
-    "@rollup/plugin-typescript": "^6.0.0",
-    "@tsconfig/svelte": "^1.0.0",
-    "carbon-components-svelte": "^0.12.0",
-    "rollup": "^2.3.4",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^6.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.0.0",
-    "svelte-check": "^1.0.0",
-    "svelte-preprocess": "^4.3.2",
-    "tslib": "^2.0.0",
-    "typescript": "^3.9.3"
-  }
-}
--- a/examples/rollup-typescript/public/favicon.ico
+++ b/examples/rollup-typescript/public/favicon.ico
--- a/examples/rollup-typescript/public/index.html
+++ b/examples/rollup-typescript/public/index.html
@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>rollup-typescript</title>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/carbon-components-svelte@0.14.0/css/all.css"
-    />
-    <link rel="stylesheet" href="/build/bundle.css" />
-    <script defer src="/build/bundle.js"></script>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-  </body>
-</html>
--- a/examples/rollup-typescript/rollup.config.js
+++ b/examples/rollup-typescript/rollup.config.js
@ -1,60 +0,0 @@
-import svelte from "rollup-plugin-svelte";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import livereload from "rollup-plugin-livereload";
-import { terser } from "rollup-plugin-terser";
-import sveltePreprocess from "svelte-preprocess";
-import typescript from "@rollup/plugin-typescript";
-
-const production = !process.env.ROLLUP_WATCH;
-
-function serve() {
-  let server;
-
-  function toExit() {
-    if (server) server.kill(0);
-  }
-
-  return {
-    writeBundle() {
-      if (server) return;
-      server = require("child_process").spawn(
-        "npm",
-        ["run", "start", "--", "--dev"],
-        {
-          stdio: ["ignore", "inherit", "inherit"],
-          shell: true,
-        }
-      );
-
-      process.on("SIGTERM", toExit);
-      process.on("exit", toExit);
-    },
-  };
-}
-
-export default {
-  input: "src/index.ts",
-  output: {
-    sourcemap: true,
-    format: "iife",
-    name: "app",
-    file: "public/build/bundle.js",
-  },
-  plugins: [
-    svelte({
-      dev: !production,
-      preprocess: sveltePreprocess(),
-      css: (css) => {
-        css.write("bundle.css");
-      },
-    }),
-    resolve({ browser: true, dedupe: ["svelte"] }),
-    commonjs(),
-    typescript({ sourceMap: !production, inlineSources: !production }),
-    !production && serve(),
-    !production && livereload("public"),
-    production && terser(),
-  ],
-  watch: { clearScreen: false },
-};
--- a/examples/rollup-typescript/src/App.svelte
+++ b/examples/rollup-typescript/src/App.svelte
@ -1,93 +0,0 @@
-<script lang="ts">
-  import {
-    Content,
-    Breadcrumb,
-    BreadcrumbItem,
-    Grid,
-    Row,
-    Column,
-    Tabs,
-    TabContent,
-    Tab,
-    Select,
-    SelectItem,
-  } from "carbon-components-svelte";
-  import Header from "./components/Header.svelte";
-  import Theme from "./components/Theme.svelte";
-
-  let theme: "g10" = "g10";
-</script>
-
-<Theme persist bind:theme>
-  <Header />
-  <Content style="background: none; padding: 1rem">
-    <Grid>
-      <Row>
-        <Column lg="{16}">
-          <Breadcrumb noTrailingSlash aria-label="Page navigation">
-            <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
-          </Breadcrumb>
-          <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
-        </Column>
-      </Row>
-
-      <Row>
-        <Column noGutter>
-          <Tabs aria-label="Tab navigation">
-            <Tab label="About" />
-            <Tab label="Design" />
-            <Tab label="Develop" />
-            <div slot="content" class="tabbed-content">
-              <Grid as fullWidth let:props>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <Select
-                        labelText="Carbon theme"
-                        bind:selected="{theme}"
-                        style="margin-bottom: 1rem"
-                      >
-                        <SelectItem value="white" text="White" />
-                        <SelectItem value="g10" text="Gray 10" />
-                        <SelectItem value="g90" text="Gray 90" />
-                        <SelectItem value="g100" text="Gray 100" />
-                      </Select>
-                      <p>
-                        Carbon is IBM’s open-source design system for digital
-                        products and experiences. With the IBM Design Language
-                        as its foundation, the system consists of working code,
-                        design tools and resources, human interface guidelines,
-                        and a vibrant community of contributors.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <p>
-                        Rapidly build beautiful and accessible experiences. The
-                        Carbon kit contains all resources you need to get
-                        started.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <p>
-                        Carbon provides styles and components in Vanilla, React,
-                        Angular, Vue and Svelte for anyone building on the web.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-              </Grid>
-            </div>
-          </Tabs>
-        </Column>
-      </Row>
-    </Grid>
-  </Content>
-</Theme>
--- a/examples/rollup-typescript/src/components/Header.svelte
+++ b/examples/rollup-typescript/src/components/Header.svelte
@ -1,35 +0,0 @@
-<script lang="ts">
-  import {
-    SkipToContent,
-    Header,
-    HeaderUtilities,
-    HeaderGlobalAction,
-  } from "carbon-components-svelte";
-  import Notification20 from "carbon-icons-svelte/lib/Notification20";
-  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
-  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
-  import { getContext } from "svelte";
-
-  const ctx: { dark: any; light: any; updateVar: any } = getContext("Theme");
-
-  $: if (ctx) {
-    ctx.dark.subscribe((value) => {
-      console.log("dark mode?", value);
-    });
-    ctx.light.subscribe((value) => {
-      console.log("light mode?", value);
-    });
-    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
-  }
-</script>
-
-<Header company="IBM" platformName="Carbon Components Svelte" href="/">
-  <div slot="skip-to-content">
-    <SkipToContent />
-  </div>
-  <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
-    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
-    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
-  </HeaderUtilities>
-</Header>
--- a/examples/rollup-typescript/src/components/Theme.svelte
+++ b/examples/rollup-typescript/src/components/Theme.svelte
@ -1,57 +0,0 @@
-<script lang="ts">
-  type Theme = "white" | "g10" | "g90" | "g100";
-
-  export let persist: boolean = false;
-  export let persistKey: string = "theme";
-  export let theme: Theme = "white";
-  export const themes: Theme[] = ["white", "g10", "g90", "g100"];
-
-  import { onMount, afterUpdate, setContext } from "svelte";
-  import { writable, derived } from "svelte/store";
-
-  const isValidTheme = (value) => themes.includes(value);
-  const isDark = (value) =>
-    isValidTheme(value) && (value === "g90" || value === "g100");
-
-  const dark = writable(isDark(theme));
-  const light = derived(dark, (_) => !_);
-
-  setContext("Theme", {
-    updateVar: (name: string, value: string) => {
-      document.documentElement.style.setProperty(name, value);
-    },
-    dark,
-    light,
-  });
-
-  onMount(() => {
-    try {
-      const persisted_theme = localStorage.getItem(persistKey);
-
-      if (isValidTheme(persisted_theme)) {
-        theme = persisted_theme as Theme;
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  });
-
-  afterUpdate(() => {
-    if (isValidTheme(theme)) {
-      document.documentElement.setAttribute("theme", theme);
-      if (persist) {
-        localStorage.setItem(persistKey, theme);
-      }
-    } else {
-      console.warn(
-        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
-          themes
-        )}`
-      );
-    }
-  });
-
-  $: dark.set(isDark(theme));
-</script>
-
-<slot />
--- a/examples/rollup-typescript/src/index.ts
+++ b/examples/rollup-typescript/src/index.ts
@ -1,5 +0,0 @@
-import App from "./App.svelte";
-
-const app = new App({ target: document.body });
-
-export default app;
--- a/examples/rollup-typescript/tsconfig.json
+++ b/examples/rollup-typescript/tsconfig.json
@ -1,5 +0,0 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}
--- a/examples/rollup-typescript/yarn.lock
+++ b/examples/rollup-typescript/yarn.lock
--- a/examples/rollup/.gitignore
+++ b/examples/rollup/.gitignore
@ -1,4 +1,5 @@
+.DS_Store
+/.vscode
+/build
 /node_modules
 /public/build
-yarn-debug.log*
-yarn-error.log*
--- a/examples/rollup/README.md
+++ b/examples/rollup/README.md
@ -1,23 +0,0 @@
-# rollup
-
-> Example set-up using [Rollup](https://github.com/rollup/rollup).
-
-## Getting started
-
-Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
-
-```sh
-npx degit ibm/carbon-components-svelte#rollup svelte-app
-cd svelte-app
-yarn install
-```
-
-## Available scripts
-
-### `yarn dev`
-
-Starts the app in development mode.
-
-### `yarn build`
-
-Builds the app for production.
--- a/examples/rollup/package.json
+++ b/examples/rollup/package.json
@ -1,20 +1,18 @@
 {
-  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "rollup -cw",
-    "build": "rimraf public/build && rollup -c"
+    "build": "rollup -c"
  },
  "devDependencies": {
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "carbon-components-svelte": "^0.12.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.23.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-serve": "^1.0.3",
-    "rollup-plugin-svelte": "^6.0.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "carbon-components-svelte": "^0.41.0",
+    "carbon-preprocess-svelte": "^0.6.0",
+    "rollup": "^2.53.2",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.24.0"
+    "svelte": "^3.38.3"
  }
 }
--- a/examples/rollup/public/favicon.ico
+++ b/examples/rollup/public/favicon.ico
--- a/examples/rollup/public/index.html
+++ b/examples/rollup/public/index.html
@ -1,21 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
  <head>
    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
    <title>rollup</title>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/carbon-components-svelte@0.14.0/css/all.css"
-    />
-    <link rel="stylesheet" href="/build/bundle.css" />
-    <script defer src="/build/bundle.js"></script>
+    <link rel="stylesheet" href="build/bundle.css" />
  </head>
  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script src="build/bundle.js"></script>
  </body>
 </html>
--- a/examples/rollup/rollup.config.js
+++ b/examples/rollup/rollup.config.js
@ -1,30 +1,28 @@
-import { terser } from "rollup-plugin-terser";
-import commonjs from "@rollup/plugin-commonjs";
-import resolve from "@rollup/plugin-node-resolve";
-import serve from "rollup-plugin-serve";
 import svelte from "rollup-plugin-svelte";
-import livereload from "rollup-plugin-livereload";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import css from "rollup-plugin-css-only";
+import { terser } from "rollup-plugin-terser";
+import { optimizeImports } from "carbon-preprocess-svelte";

-const PORT = process.env.PORT || 3000;
-const PROD = !process.env.ROLLUP_WATCH;
+const production = !process.env.ROLLUP_WATCH;

 export default {
  input: "src/index.js",
  output: {
-    sourcemap: !PROD,
+    sourcemap: !production,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js",
  },
  plugins: [
    svelte({
-      dev: !PROD,
-      css: (css) => css.write("bundle.css", !PROD),
+      preprocess: [optimizeImports()],
+      compilerOptions: { dev: !production },
    }),
    resolve({ browser: true, dedupe: ["svelte"] }),
    commonjs(),
-    !PROD && serve({ contentBase: ["public"], port: PORT }),
-    !PROD && livereload("public"),
-    PROD && terser(),
+    css({ output: "bundle.css" }),
+    production && terser(),
  ],
 };
--- a/examples/rollup/src/App.svelte
+++ b/examples/rollup/src/App.svelte
@ -1,93 +1,6 @@
 <script>
-  import {
-    Content,
-    Breadcrumb,
-    BreadcrumbItem,
-    Grid,
-    Row,
-    Column,
-    Tabs,
-    TabContent,
-    Tab,
-    Select,
-    SelectItem,
-  } from "carbon-components-svelte";
-  import Header from "./components/Header.svelte";
-  import Theme from "./components/Theme.svelte";
-
-  let theme = "g10";
+  import "carbon-components-svelte/css/white.css";
+  import { Button } from "carbon-components-svelte";
 </script>

-<Theme persist bind:theme>
-  <Header />
-  <Content style="background: none; padding: 1rem">
-    <Grid>
-      <Row>
-        <Column lg="{16}">
-          <Breadcrumb noTrailingSlash aria-label="Page navigation">
-            <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
-          </Breadcrumb>
-          <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
-        </Column>
-      </Row>
-
-      <Row>
-        <Column noGutter>
-          <Tabs aria-label="Tab navigation">
-            <Tab label="About" />
-            <Tab label="Design" />
-            <Tab label="Develop" />
-            <div slot="content" class="tabbed-content">
-              <Grid as fullWidth let:props>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <Select
-                        labelText="Carbon theme"
-                        bind:selected="{theme}"
-                        style="margin-bottom: 1rem"
-                      >
-                        <SelectItem value="white" text="White" />
-                        <SelectItem value="g10" text="Gray 10" />
-                        <SelectItem value="g90" text="Gray 90" />
-                        <SelectItem value="g100" text="Gray 100" />
-                      </Select>
-                      <p>
-                        Carbon is IBM’s open-source design system for digital
-                        products and experiences. With the IBM Design Language
-                        as its foundation, the system consists of working code,
-                        design tools and resources, human interface guidelines,
-                        and a vibrant community of contributors.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <p>
-                        Rapidly build beautiful and accessible experiences. The
-                        Carbon kit contains all resources you need to get
-                        started.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <p>
-                        Carbon provides styles and components in Vanilla, React,
-                        Angular, Vue and Svelte for anyone building on the web.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-              </Grid>
-            </div>
-          </Tabs>
-        </Column>
-      </Row>
-    </Grid>
-  </Content>
-</Theme>
+<Button>Primary button</Button>
--- a/examples/rollup/src/components/Header.svelte
+++ b/examples/rollup/src/components/Header.svelte
@ -1,35 +0,0 @@
-<script>
-  import {
-    SkipToContent,
-    Header,
-    HeaderUtilities,
-    HeaderGlobalAction,
-  } from "carbon-components-svelte";
-  import Notification20 from "carbon-icons-svelte/lib/Notification20";
-  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
-  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
-  import { getContext } from "svelte";
-
-  const ctx = getContext("Theme");
-
-  $: if (ctx) {
-    ctx.dark.subscribe((value) => {
-      console.log("dark mode?", value);
-    });
-    ctx.light.subscribe((value) => {
-      console.log("light mode?", value);
-    });
-    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
-  }
-</script>
-
-<Header company="IBM" platformName="Carbon Components Svelte" href="/">
-  <div slot="skip-to-content">
-    <SkipToContent />
-  </div>
-  <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
-    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
-    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
-  </HeaderUtilities>
-</Header>
--- a/examples/rollup/src/components/Theme.svelte
+++ b/examples/rollup/src/components/Theme.svelte
@ -1,55 +0,0 @@
-<script>
-  export let persist = false;
-  export let persistKey = "theme";
-  export let theme = "white";
-  export const themes = ["white", "g10", "g90", "g100"];
-
-  import { onMount, afterUpdate, setContext } from "svelte";
-  import { writable, derived } from "svelte/store";
-
-  const isValidTheme = (value) => themes.includes(value);
-  const isDark = (value) =>
-    isValidTheme(value) && (value === "g90" || value === "g100");
-
-  const dark = writable(isDark(theme));
-  const light = derived(dark, (_) => !_);
-
-  setContext("Theme", {
-    updateVar: (name, value) => {
-      document.documentElement.style.setProperty(name, value);
-    },
-    dark,
-    light,
-  });
-
-  onMount(() => {
-    try {
-      const persisted_theme = localStorage.getItem(persistKey);
-
-      if (isValidTheme(persisted_theme)) {
-        theme = persisted_theme;
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  });
-
-  afterUpdate(() => {
-    if (isValidTheme(theme)) {
-      document.documentElement.setAttribute("theme", theme);
-      if (persist) {
-        localStorage.setItem(persistKey, theme);
-      }
-    } else {
-      console.warn(
-        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
-          themes
-        )}`
-      );
-    }
-  });
-
-  $: dark.set(isDark(theme));
-</script>
-
-<slot />
--- a/examples/rollup/yarn.lock
+++ b/examples/rollup/yarn.lock
@ -3,30 +3,30 @@


 "@babel/code-frame@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
-  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
+  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
  dependencies:
-    "@babel/highlight" "^7.10.4"
+    "@babel/highlight" "^7.14.5"

-"@babel/helper-validator-identifier@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
-  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+"@babel/helper-validator-identifier@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
+  integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==

-"@babel/highlight@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
-  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+"@babel/highlight@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
+  integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
  dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
+    "@babel/helper-validator-identifier" "^7.14.5"
    chalk "^2.0.0"
    js-tokens "^4.0.0"

-"@rollup/plugin-commonjs@^15.0.0":
-  version "15.0.0"
-  resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-15.0.0.tgz#690d15a9d54ba829db93555bff9b98ff34e08574"
-  integrity sha512-8uAdikHqVyrT32w1zB9VhW6uGwGjhKgnDNP4pQJsjdnyF4FgCj6/bmv24c7v2CuKhq32CcyCwRzMPEElaKkn0w==
+"@rollup/plugin-commonjs@^19.0.0":
+  version "19.0.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-19.0.1.tgz#94a2c103d675523d3ab1c60bfbec567b3eb70410"
+  integrity sha512-bRrPTIAsWw2LmEspEMvV9f+7N7CEQgZCj2Zi1F0e0P3+/tbjQaSNNVVRSRWVhuDagp8yjK5kbIut8KTPsseRhg==
  dependencies:
    "@rollup/pluginutils" "^3.1.0"
    commondir "^1.0.1"
@ -36,21 +36,29 @@
    magic-string "^0.25.7"
    resolve "^1.17.0"

-"@rollup/plugin-node-resolve@^9.0.0":
-  version "9.0.0"
-  resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-9.0.0.tgz#39bd0034ce9126b39c1699695f440b4b7d2b62e6"
-  integrity sha512-gPz+utFHLRrd41WMP13Jq5mqqzHL3OXrfj3/MkSyB6UBIcuNt9j60GCbarzMzdf1VHFpOxfQh/ez7wyadLMqkg==
+"@rollup/plugin-node-resolve@^13.0.0":
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.0.2.tgz#bfe58e9bfc7284ee0fabc6da7fabcb268f04e0a4"
+  integrity sha512-hv+eAMcA2hQ7qvPVcXbtIyc0dtue4jMyA2sCW4IMkrmh+SeDDEHg1MXTv65VPpKdtjvWzN3+4mHAEl4rT+zgzQ==
  dependencies:
    "@rollup/pluginutils" "^3.1.0"
    "@types/resolve" "1.17.1"
    builtin-modules "^3.1.0"
    deepmerge "^4.2.2"
    is-module "^1.0.0"
-    resolve "^1.17.0"
+    resolve "^1.19.0"
+
+"@rollup/pluginutils@4":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
+  integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"

 "@rollup/pluginutils@^3.1.0":
  version "3.1.0"
-  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
  integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==
  dependencies:
    "@types/estree" "0.0.39"
@ -58,204 +66,196 @@
    picomatch "^2.2.2"

 "@types/estree@*":
-  version "0.0.45"
-  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
-  integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==
+  version "0.0.50"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
+  integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==

 "@types/estree@0.0.39":
  version "0.0.39"
-  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==

 "@types/node@*":
-  version "14.6.4"
-  resolved "https://registry.npmjs.org/@types/node/-/node-14.6.4.tgz#a145cc0bb14ef9c4777361b7bbafa5cf8e3acb5a"
-  integrity sha512-Wk7nG1JSaMfMpoMJDKUsWYugliB2Vy55pdjLpmLixeyMi7HizW2I/9QoxsPCkXl3dO+ZOVqPumKaDUv5zJu2uQ==
+  version "16.3.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.3.tgz#0c30adff37bbbc7a50eb9b58fae2a504d0d88038"
+  integrity sha512-8h7k1YgQKxKXWckzFCMfsIwn0Y61UK6tlD6y2lOb3hTOIMlK3t9/QwHOhc81TwU+RMf0As5fj7NPjroERCnejQ==
+
+"@types/pug@^2.0.4":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.5.tgz#69bc700934dd473c7ab97270bd2dbacefe562231"
+  integrity sha512-LOnASQoeNZMkzexRuyqcBBDZ6rS+rQxUMkmj5A0PkhhiSZivLIuz6Hxyr1mkGoEZEkk66faROmpMi4fFkrKsBA==

 "@types/resolve@1.17.1":
  version "1.17.1"
-  resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
  integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==
  dependencies:
    "@types/node" "*"

+"@types/sass@^1.16.0":
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.16.1.tgz#cf465bd1fea486d0331f760db023de14daf4980d"
+  integrity sha512-iZUcRrGuz/Tbg3loODpW7vrQJkUtpY2fFSf4ELqqkApcS2TkZ1msk7ie8iZPB86lDOP8QOTTmuvWjc5S0R9OjQ==
+  dependencies:
+    "@types/node" "*"
+
 ansi-styles@^3.2.1:
  version "3.2.1"
-  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
  dependencies:
    color-convert "^1.9.0"

-anymatch@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
-  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
-  dependencies:
-    normalize-path "^3.0.0"
-    picomatch "^2.0.4"
-
-async-limiter@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
-  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
-
 balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
-
-binary-extensions@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
-  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==

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

-braces@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
-  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
-  dependencies:
-    fill-range "^7.0.1"
-
 buffer-from@^1.0.0:
  version "1.1.1"
-  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==

 builtin-modules@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
-  integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887"
+  integrity sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==

-carbon-components-svelte@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.npmjs.org/carbon-components-svelte/-/carbon-components-svelte-0.12.0.tgz#d35e9b4f573dba324a134aabbd53dd93805c7c28"
-  integrity sha512-VLDzz3Kqq7bxBrPM6ogLbYSnYl3m1PYzehy3lwiH2vSqT1+1FqvBG4z/rt00TV2IXgdNxbbrnOu6QOYsqaOdqg==
+carbon-components-svelte@^0.41.0:
+  version "0.41.0"
+  resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.41.0.tgz#55e19b4623ececcc88bd6a7c0c3b78a2b727a9fe"
+  integrity sha512-cfj3Vla2ovR5ed2kO1qEYEm5D46I9o4GmFJkPO7A4800w8qY3ETGDpL1d6R9gGhGStmqYPHza/uvUjxN9pcczA==
  dependencies:
-    carbon-icons-svelte "^10.15.0"
-    flatpickr "4.6.3"
+    carbon-icons-svelte "^10.27.0"
+    flatpickr "4.6.9"

-carbon-icons-svelte@^10.15.0:
-  version "10.17.0"
-  resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.17.0.tgz#f7559f58be9c789097ea4035e52dbc4c12691d45"
-  integrity sha512-as1RN87YLvF7iepGAGWQOk2oleyb4w17BoHSYyQgE3MceOla04YdSWASK5c22XZZnmMJbbrT17Z34Cl70niz0Q==
+carbon-icons-svelte@^10.27.0:
+  version "10.35.0"
+  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.35.0.tgz#b154243902b3ca26c563e4d2ebcfceb8cc03be34"
+  integrity sha512-GGh6tCWOUL7UjObSECpLfQ83k2xKfJRJTy6uy4v/R1BKj/Nk3bPc1vNyEwygHYI0JjPRNMbPCc53qisBPb1JGA==
+
+carbon-preprocess-svelte@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/carbon-preprocess-svelte/-/carbon-preprocess-svelte-0.6.0.tgz#a2a2a7f7a23185bc38956a5b5250e97c5737c788"
+  integrity sha512-z/SOcB1jqrodshM87YPWdTcLdQzCKKLiWueM4RPfTIz9EIo7DgJSn0gbnVtEOk8Vy/xOZ0EnnAu5fY8ualzngQ==
+  dependencies:
+    purgecss "^4.0.3"
+    svelte-preprocess "^4.7.3"
+    typescript "^4.2.4"

 chalk@^2.0.0:
  version "2.4.2"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
  dependencies:
    ansi-styles "^3.2.1"
    escape-string-regexp "^1.0.5"
    supports-color "^5.3.0"

-chokidar@^3.3.0:
-  version "3.4.2"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d"
-  integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==
-  dependencies:
-    anymatch "~3.1.1"
-    braces "~3.0.2"
-    glob-parent "~5.1.0"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.4.0"
-  optionalDependencies:
-    fsevents "~2.1.2"
-
 color-convert@^1.9.0:
  version "1.9.3"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
  dependencies:
    color-name "1.1.3"

 color-name@1.1.3:
  version "1.1.3"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=

+colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
+
 commander@^2.20.0:
  version "2.20.3"
-  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==

+commander@^6.0.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
 commondir@^1.0.1:
  version "1.0.1"
-  resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=

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

+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==
+
 deepmerge@^4.2.2:
  version "4.2.2"
-  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==

+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==
+
 escape-string-regexp@^1.0.5:
  version "1.0.5"
-  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=

 estree-walker@^0.6.1:
  version "0.6.1"
-  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==

 estree-walker@^1.0.1:
  version "1.0.1"
-  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==

 estree-walker@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz#f8e030fb21cefa183b44b7ad516b747434e7a3e0"
-  integrity sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==
+  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==

-fill-range@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
-  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
-  dependencies:
-    to-regex-range "^5.0.1"
-
-flatpickr@4.6.3:
-  version "4.6.3"
-  resolved "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.3.tgz#15a8b76b6e34e3a072861250503a5995b9d3bc60"
-  integrity sha512-007VucCkqNOMMb9ggRLNuJowwaJcyOh4sKAFcdGfahfGc7JQbf94zSzjdBq/wVyHWUEs5o3+idhFZ0wbZMRmVQ==
+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:
  version "1.0.0"
-  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=

-fsevents@~2.1.2:
-  version "2.1.3"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
-  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+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==

-glob-parent@~5.1.0:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
-  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
-  dependencies:
-    is-glob "^4.0.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.6:
-  version "7.1.6"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+glob@^7.0.0, glob@^7.1.6:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
  dependencies:
    fs.realpath "^1.0.0"
    inflight "^1.0.4"
@ -266,17 +266,24 @@ glob@^7.1.3, glob@^7.1.6:

 has-flag@^3.0.0:
  version "3.0.0"
-  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=

 has-flag@^4.0.0:
  version "4.0.0"
-  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==

+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==
+  dependencies:
+    function-bind "^1.1.1"
+
 inflight@^1.0.4:
  version "1.0.6"
-  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
  dependencies:
    once "^1.3.0"
@ -284,49 +291,32 @@ inflight@^1.0.4:

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

-is-binary-path@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
-  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+is-core-module@^2.2.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491"
+  integrity sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg==
  dependencies:
-    binary-extensions "^2.0.0"
-
-is-extglob@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
-
-is-glob@^4.0.1, is-glob@~4.0.1:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
-  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
-  dependencies:
-    is-extglob "^2.1.1"
+    has "^1.0.3"

 is-module@^1.0.0:
  version "1.0.0"
-  resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
  integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=

-is-number@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
-  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-
 is-reference@^1.2.1:
  version "1.2.1"
-  resolved "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
+  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
  integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
  dependencies:
    "@types/estree" "*"

 jest-worker@^26.2.1:
-  version "26.3.0"
-  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.3.0.tgz#7c8a97e4f4364b4f05ed8bca8ca0c24de091871f"
-  integrity sha512-Vmpn2F6IASefL+DVBhPzI2J9/GJUsqzomdeN+P+dK8/jKxbh8R3BtFnx3FIta7wYlPU62cpJMJQo4kuOowcMnw==
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
+  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
  dependencies:
    "@types/node" "*"
    merge-stream "^2.0.0"
@ -334,145 +324,125 @@ jest-worker@^26.2.1:

 js-tokens@^4.0.0:
  version "4.0.0"
-  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==

-livereload-js@^3.1.0:
-  version "3.3.1"
-  resolved "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.1.tgz#61f887468086762e61fb2987412cf9d1dda99202"
-  integrity sha512-CBu1gTEfzVhlOK1WASKAAJ9Qx1fHECTq0SUB67sfxwQssopTyvzqTlgl+c0h9pZ6V+Fzd2rc510ppuNusg9teQ==
-
-livereload@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz#65125dabdf2db4fd3f1169e953fe56e3bcc6f477"
-  integrity sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==
-  dependencies:
-    chokidar "^3.3.0"
-    livereload-js "^3.1.0"
-    opts ">= 1.2.0"
-    ws "^6.2.1"
-
 magic-string@^0.25.7:
  version "0.25.7"
-  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
  dependencies:
    sourcemap-codec "^1.4.4"

 merge-stream@^2.0.0:
  version "2.0.0"
-  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==

-mime@>=2.4.6:
-  version "2.4.6"
-  resolved "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
-  integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
+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==

 minimatch@^3.0.4:
  version "3.0.4"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
  dependencies:
    brace-expansion "^1.1.7"

-normalize-path@^3.0.0, normalize-path@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
-  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+nanoid@^3.1.23:
+  version "3.1.23"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
+  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==

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

-opener@1:
-  version "1.5.2"
-  resolved "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
-  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
-
-"opts@>= 1.2.0":
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/opts/-/opts-2.0.2.tgz#a17e189fbbfee171da559edd8a42423bc5993ce1"
-  integrity sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==
-
 path-is-absolute@^1.0.0:
  version "1.0.1"
-  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=

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

-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
-  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+picomatch@^2.2.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+
+postcss-selector-parser@^6.0.2:
+  version "6.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
+  integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss@^8.2.1:
+  version "8.3.5"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
+  integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==
+  dependencies:
+    colorette "^1.2.2"
+    nanoid "^3.1.23"
+    source-map-js "^0.6.2"
+
+purgecss@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"
+  integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==
+  dependencies:
+    commander "^6.0.0"
+    glob "^7.0.0"
+    postcss "^8.2.1"
+    postcss-selector-parser "^6.0.2"

 randombytes@^2.1.0:
  version "2.1.0"
-  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
  dependencies:
    safe-buffer "^5.1.0"

-readdirp@~3.4.0:
-  version "3.4.0"
-  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
-  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
-  dependencies:
-    picomatch "^2.2.1"
-
 require-relative@^0.8.7:
  version "0.8.7"
-  resolved "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
+  resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
  integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=

-resolve@^1.17.0:
-  version "1.17.0"
-  resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
-  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
+resolve@^1.17.0, resolve@^1.19.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
  dependencies:
+    is-core-module "^2.2.0"
    path-parse "^1.0.6"

-rimraf@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+rollup-plugin-css-only@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-css-only/-/rollup-plugin-css-only-3.1.0.tgz#6a701cc5b051c6b3f0961e69b108a9a118e1b1df"
+  integrity sha512-TYMOE5uoD76vpj+RTkQLzC9cQtbnJNktHPB507FzRWBVaofg7KhIqq1kGbcVOadARSozWF883Ho9KpSPKH8gqA==
  dependencies:
-    glob "^7.1.3"
+    "@rollup/pluginutils" "4"

-rollup-plugin-livereload@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz#d3928d74e8cf2ae4286c5dd46b770fd3f3b82313"
-  integrity sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==
-  dependencies:
-    livereload "^0.9.1"
-
-rollup-plugin-serve@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/rollup-plugin-serve/-/rollup-plugin-serve-1.0.4.tgz#17665974185f9007ecaeb0835c4e89612e04d234"
-  integrity sha512-74Gh47+dGKhmy04MIu9deXwn8VGlWsk93HcGIbO+NCdZ9roRXVO7y4l/9MLAAujuYpzsWCopHHZT8/6PSRzGLg==
-  dependencies:
-    mime ">=2.4.6"
-    opener "1"
-
-rollup-plugin-svelte@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-6.0.0.tgz#a5b15354371ec17fe67bd4def4d4ea1b915f74cb"
-  integrity sha512-y9qtWa+iNYwXdOZqaEqz3i6k3gzofC9JXzv+WVKDOt0DLiJxJaSrlKKf4YkKG91RzTK5Lo+0fW8in9QH/DxEhA==
+rollup-plugin-svelte@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.0.tgz#d45f2b92b1014be4eb46b55aa033fb9a9c65f04d"
+  integrity sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==
  dependencies:
    require-relative "^0.8.7"
    rollup-pluginutils "^2.8.2"
-    sourcemap-codec "^1.4.8"

 rollup-plugin-terser@^7.0.2:
  version "7.0.2"
-  resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
  dependencies:
    "@babel/code-frame" "^7.10.4"
@ -482,91 +452,114 @@ rollup-plugin-terser@^7.0.2:

 rollup-pluginutils@^2.8.2:
  version "2.8.2"
-  resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
  dependencies:
    estree-walker "^0.6.1"

-rollup@^2.23.0:
-  version "2.26.10"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-2.26.10.tgz#0ffe0390d35f07af850382f22f1b8525c7f57f07"
-  integrity sha512-dUnjCWOA0h9qNX6qtcHidyatz8FAFZxVxt1dbcGtKdlJkpSxGK3G9+DLCYvtZr9v94D129ij9zUhG+xbRoqepw==
+rollup@^2.53.2:
+  version "2.53.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.53.2.tgz#3279f9bfba1fe446585560802e418c5fbcaefa51"
+  integrity sha512-1CtEYuS5CRCzFZ7SNW5528SlDlk4VDXIRGwbm/2POQxA/G4+7/crIqJwkmnj8Q/74hGx4oVlNvh4E1CJQ5hZ6w==
  optionalDependencies:
-    fsevents "~2.1.2"
+    fsevents "~2.3.2"

 safe-buffer@^5.1.0:
  version "5.2.1"
-  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==

 serialize-javascript@^4.0.0:
  version "4.0.0"
-  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
  dependencies:
    randombytes "^2.1.0"

-source-map-support@~0.5.12:
+source-map-js@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
+  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+
+source-map-support@~0.5.19:
  version "0.5.19"
-  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
  dependencies:
    buffer-from "^1.0.0"
    source-map "^0.6.0"

-source-map@^0.6.0, source-map@~0.6.1:
+source-map@^0.6.0:
  version "0.6.1"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==

-sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
+source-map@~0.7.2:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
+sourcemap-codec@^1.4.4:
  version "1.4.8"
-  resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==

+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==
+  dependencies:
+    min-indent "^1.0.0"
+
 supports-color@^5.3.0:
  version "5.5.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
  dependencies:
    has-flag "^3.0.0"

 supports-color@^7.0.0:
  version "7.2.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
  dependencies:
    has-flag "^4.0.0"

-svelte@^3.24.0:
-  version "3.24.1"
-  resolved "https://registry.npmjs.org/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
-  integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==
+svelte-preprocess@^4.7.3:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.7.4.tgz#e4d5208ab25c2aaaf19e837f7d7bbf7930e61d2b"
+  integrity sha512-mDAmaltQl6e5zU2VEtoWEf7eLTfuOTGr9zt+BpA3AGHo8MIhKiNSPE9OLTCTOMgj0vj/uL9QBbaNmpG4G1CgIA==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    strip-indent "^3.0.0"
+
+svelte@^3.38.3:
+  version "3.38.3"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.3.tgz#e15a1da98ee4b10162a6c8cb4c80aa86b2b589ed"
+  integrity sha512-N7bBZJH0iF24wsalFZF+fVYMUOigaAUQMIcEKHO3jstK/iL8VmP9xE+P0/a76+FkNcWt+TDv2Gx1taUoUscrvw==

 terser@^5.0.0:
-  version "5.3.0"
-  resolved "https://registry.npmjs.org/terser/-/terser-5.3.0.tgz#c481f4afecdcc182d5e2bdd2ff2dc61555161e81"
-  integrity sha512-XTT3D3AwxC54KywJijmY2mxZ8nJiEjBHVYzq8l9OaYuRFWeQNBwvipuzzYEP4e+/AVcd1hqG/CqgsdIRyT45Fg==
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.1.tgz#2dc7a61009b66bb638305cb2a824763b116bf784"
+  integrity sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg==
  dependencies:
    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
+    source-map "~0.7.2"
+    source-map-support "~0.5.19"

-to-regex-range@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
-  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-  dependencies:
-    is-number "^7.0.0"
+typescript@^4.2.4:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+
+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=

 wrappy@1:
  version "1.0.2"
-  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-ws@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
-  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
-  dependencies:
-    async-limiter "~1.0.0"
--- a/examples/routify/.gitignore
+++ b/examples/routify/.gitignore
@ -1,6 +0,0 @@
-/node_modules
-/dist
-.DS_Store
-.routify
-yarn-debug.log*
-yarn-error.log*
--- a/examples/routify/README.md
+++ b/examples/routify/README.md
@ -1,23 +0,0 @@
-# routify
-
-> Example set-up using [Routify](https://github.com/roxiness/routify).
-
-## Getting started
-
-Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
-
-```sh
-npx degit ibm/carbon-components-svelte#routify svelte-app
-cd svelte-app
-yarn install
-```
-
-## Available scripts
-
-### `yarn dev`
-
-Starts the app in development mode.
-
-### `yarn build`
-
-Builds the app for production.
--- a/examples/routify/package.json
+++ b/examples/routify/package.json
@ -1,40 +0,0 @@
-{
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "run-p dev:*",
-    "dev:rollup": "rollup -cw",
-    "dev:routify": "routify",
-    "build": "routify -b && rollup -c && routify export"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^13.0.0",
-    "@rollup/plugin-node-resolve": "^8.1.0",
-    "@rollup/plugin-replace": "^2.3.3",
-    "@sveltech/routify": "^1.9.1",
-    "carbon-components-svelte": "^0.12.0",
-    "marked": "^1.1.1",
-    "mdsvex": "^0.8.2",
-    "node-sass": "^4.14.1",
-    "npm-run-all": "^4.1.5",
-    "remark-slug": "^6.0.0",
-    "rollup": "^2.18.1",
-    "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-postcss": "^3.1.8",
-    "rollup-plugin-svelte": "^5.2.3",
-    "rollup-plugin-svelte-hot": "^0.9.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "routify-plugin-frontmatter": "^1.0.1",
-    "spassr": "^1.1.2",
-    "svelte": "^3.23.2"
-  },
-  "routify": {
-    "extensions": "svelte,md",
-    "routifyDir": ".routify",
-    "dynamicImports": true,
-    "plugins": {
-      "routify-plugin-frontmatter": {}
-    }
-  }
-}
--- a/examples/routify/rollup.config.js
+++ b/examples/routify/rollup.config.js
@ -1,24 +0,0 @@
-import { createRollupConfigs } from "./scripts/base.config.js";
-import slug from "remark-slug";
-import { mdsvex } from "mdsvex";
-
-const production = !process.env.ROLLUP_WATCH;
-
-export const config = {
-  staticDir: "static",
-  distDir: "dist",
-  buildDir: "dist/build",
-  serve: !production,
-  production,
-  rollupWrapper: (cfg) => cfg,
-  svelteWrapper: (svelte) => {
-    svelte.preprocess = [mdsvex({ remarkPlugins: [slug], extension: "md" })];
-    svelte.extensions = [".svelte", ".md"];
-    return svelte;
-  },
-  swWrapper: (cfg) => cfg,
-};
-
-const configs = createRollupConfigs(config);
-
-export default configs;
--- a/examples/routify/scripts/base.config.js
+++ b/examples/routify/scripts/base.config.js
@ -1,98 +0,0 @@
-import svelte from "rollup-plugin-svelte-hot";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import livereload from "rollup-plugin-livereload";
-import { terser } from "rollup-plugin-terser";
-import copy from "rollup-plugin-copy";
-import fs from "fs";
-import replace from "@rollup/plugin-replace";
-import postcss from "rollup-plugin-postcss";
-import { spassr } from "spassr";
-import { version } from "../package.json";
-
-export function createRollupConfigs(config) {
-  const { production, serve, distDir } = config;
-  const useDynamicImports = process.env.BUNDLING === "dynamic" || !!production;
-
-  fs.rmdirSync(distDir, { recursive: true });
-
-  if (serve) spassr({ serveSpa: true, serveSsr: true, silent: false });
-
-  return [
-    baseConfig(config, { dynamicImports: false }),
-    useDynamicImports && baseConfig(config, { dynamicImports: true }),
-  ].filter(Boolean);
-}
-
-function baseConfig(config, ctx) {
-  const { dynamicImports } = ctx;
-  const {
-    staticDir,
-    distDir,
-    production,
-    buildDir,
-    svelteWrapper,
-    rollupWrapper,
-  } = config;
-
-  const outputConfig = !!dynamicImports
-    ? { format: "esm", dir: buildDir }
-    : { format: "iife", file: `${buildDir}/bundle.js` };
-
-  const svelteConfig = {
-    dev: !production,
-    css: (css) => css.write(`${buildDir}/bundle.css`, !production),
-    hot: false,
-  };
-
-  const rollupConfig = {
-    inlineDynamicImports: !dynamicImports,
-    input: "src/main.js",
-    output: { name: "routify_app", sourcemap: !production, ...outputConfig },
-    plugins: [
-      copy({
-        targets: [
-          { src: [`${staticDir}/*`, "!*/(__index.html)"], dest: distDir },
-          {
-            src: [`${staticDir}/__index.html`],
-            dest: distDir,
-            rename: "__app.html",
-            transform,
-          },
-        ],
-        copyOnce: true,
-        flatten: false,
-      }),
-      replace({ "process.env.VERSION": JSON.stringify(version) }),
-      postcss({
-        extract: "bundle.css",
-        extensions: [".css"],
-      }),
-      svelte(svelteWrapper(svelteConfig, ctx)),
-      resolve({
-        browser: true,
-        dedupe: (importee) => !!importee.match(/svelte(\/|$)/),
-      }),
-      commonjs(),
-      production && terser(),
-      !production && livereload(distDir),
-    ],
-    watch: {
-      clearScreen: false,
-      buildDelay: 100,
-    },
-  };
-
-  return rollupWrapper(rollupConfig, ctx);
-
-  function transform(contents) {
-    const scriptTag =
-      typeof config.scriptTag != "undefined"
-        ? config.scriptTag
-        : '<script type="module" defer src="/build/main.js"></script>';
-    const bundleTag = '<script defer src="/build/bundle.js"></script>';
-    return contents
-      .toString()
-      .replace("__SCRIPT__", dynamicImports ? scriptTag : bundleTag);
-  }
-}
--- a/examples/routify/src/App.svelte
+++ b/examples/routify/src/App.svelte
@ -1,6 +0,0 @@
-<script>
-  import { Router } from "@sveltech/routify";
-  import { routes } from "../.routify/routes";
-</script>
-
-<Router routes="{routes}" />
--- a/examples/routify/src/components/Theme.svelte
+++ b/examples/routify/src/components/Theme.svelte
@ -1,66 +0,0 @@
-<script>
-  export let persist = false;
-  export let persistKey = "theme";
-  export let theme = "white";
-  export const themes = ["white", "g10", "g90", "g100"];
-
-  import { onMount, afterUpdate, setContext } from "svelte";
-  import { writable, derived } from "svelte/store";
-
-  const isValidTheme = (value) => themes.includes(value);
-  const isDark = (value) =>
-    isValidTheme(value) && (value === "g90" || value === "g100");
-
-  const carbon_theme = writable(theme);
-  const dark = writable(isDark(theme));
-  const light = derived(dark, (_) => !_);
-
-  const unsubscribe = carbon_theme.subscribe((value) => {
-    theme = value;
-  });
-
-  setContext("Theme", {
-    updateVar: (name, value) => {
-      document.documentElement.style.setProperty(name, value);
-    },
-    carbon_theme,
-    dark,
-    light,
-  });
-
-  onMount(() => {
-    try {
-      const persisted_theme = localStorage.getItem(persistKey);
-
-      if (isValidTheme(persisted_theme)) {
-        carbon_theme.set(persisted_theme);
-      }
-    } catch (error) {
-      console.error(error);
-    }
-
-    return () => {
-      unsubscribe();
-    };
-  });
-
-  afterUpdate(() => {
-    if (isValidTheme(theme)) {
-      document.documentElement.setAttribute("theme", theme);
-
-      if (persist) {
-        localStorage.setItem(persistKey, theme);
-      }
-    } else {
-      console.warn(
-        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
-          themes
-        )}`
-      );
-    }
-  });
-
-  $: dark.set(isDark(theme));
-</script>
-
-<slot />
--- a/examples/routify/src/main.js
+++ b/examples/routify/src/main.js
@ -1,7 +0,0 @@
-import "carbon-components-svelte/css/all.css";
-import HMR from "@sveltech/routify/hmr";
-import App from "./App.svelte";
-
-const app = HMR(App, { target: document.body }, "routify-app");
-
-export default app;
--- a/examples/routify/src/pages/_fallback.svelte
+++ b/examples/routify/src/pages/_fallback.svelte
@ -1,14 +0,0 @@
-<script>
-  import { url } from "@sveltech/routify";
-  import { Row, Column, Link } from "carbon-components-svelte";
-</script>
-
-<Row>
-  <Column lg="{16}">
-    <h1>404</h1>
-    <div>
-      Page not found.
-      <Link inline href="{$url('..')}">Return home</Link>
-    </div>
-  </Column>
-</Row>
--- a/examples/routify/src/pages/_layout.svelte
+++ b/examples/routify/src/pages/_layout.svelte
@ -1,15 +0,0 @@
-<script>
-  import { metatags, page } from "@sveltech/routify";
-  import { Content, Grid } from "carbon-components-svelte";
-  import Navigation from "./_navigation.svelte";
-  import Theme from "../components/Theme.svelte";
-</script>
-
-<Theme persist theme="g10">
-  <Navigation />
-  <Content style="background: none; padding: 1rem">
-    <Grid>
-      <slot />
-    </Grid>
-  </Content>
-</Theme>
--- a/examples/routify/src/pages/_navigation.svelte
+++ b/examples/routify/src/pages/_navigation.svelte
@ -1,35 +0,0 @@
-<script>
-  import {
-    SkipToContent,
-    Header,
-    HeaderUtilities,
-    HeaderGlobalAction,
-  } from "carbon-components-svelte";
-  import Notification20 from "carbon-icons-svelte/lib/Notification20";
-  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
-  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
-  import { getContext } from "svelte";
-
-  const ctx = getContext("Theme");
-
-  $: if (ctx) {
-    ctx.dark.subscribe((value) => {
-      console.log("dark mode?", value);
-    });
-    ctx.light.subscribe((value) => {
-      console.log("light mode?", value);
-    });
-    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
-  }
-</script>
-
-<Header company="IBM" platformName="Carbon Components Svelte" href="/">
-  <div slot="skip-to-content">
-    <SkipToContent />
-  </div>
-  <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
-    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
-    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
-  </HeaderUtilities>
-</Header>
--- a/examples/routify/src/pages/index.svelte
+++ b/examples/routify/src/pages/index.svelte
@ -1,84 +0,0 @@
-<script>
-  import {
-    Breadcrumb,
-    BreadcrumbItem,
-    Grid,
-    Row,
-    Column,
-    Tabs,
-    TabContent,
-    Tab,
-    Select,
-    SelectItem,
-  } from "carbon-components-svelte";
-
-  import { getContext } from "svelte";
-
-  const { carbon_theme } = getContext("Theme");
-</script>
-
-<Row>
-  <Column lg="{16}">
-    <Breadcrumb noTrailingSlash aria-label="Page navigation">
-      <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
-    </Breadcrumb>
-    <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
-  </Column>
-</Row>
-
-<Row>
-  <Column noGutter>
-    <Tabs aria-label="Tab navigation">
-      <Tab label="About" />
-      <Tab label="Design" />
-      <Tab label="Develop" />
-      <div slot="content" class="tabbed-content">
-        <Grid as fullWidth let:props>
-          <TabContent {...props}>
-            <Row>
-              <Column md="{4}" lg="{7}">
-                <Select
-                  labelText="Carbon theme"
-                  bind:selected="{$carbon_theme}"
-                  style="margin-bottom: 1rem"
-                >
-                  <SelectItem value="white" text="White" />
-                  <SelectItem value="g10" text="Gray 10" />
-                  <SelectItem value="g90" text="Gray 90" />
-                  <SelectItem value="g100" text="Gray 100" />
-                </Select>
-                <p>
-                  Carbon is IBM’s open-source design system for digital products
-                  and experiences. With the IBM Design Language as its
-                  foundation, the system consists of working code, design tools
-                  and resources, human interface guidelines, and a vibrant
-                  community of contributors.
-                </p>
-              </Column>
-            </Row>
-          </TabContent>
-          <TabContent {...props}>
-            <Row>
-              <Column md="{4}" lg="{7}">
-                <p>
-                  Rapidly build beautiful and accessible experiences. The Carbon
-                  kit contains all resources you need to get started.
-                </p>
-              </Column>
-            </Row>
-          </TabContent>
-          <TabContent {...props}>
-            <Row>
-              <Column md="{4}" lg="{7}">
-                <p>
-                  Carbon provides styles and components in Vanilla, React,
-                  Angular, Vue and Svelte for anyone building on the web.
-                </p>
-              </Column>
-            </Row>
-          </TabContent>
-        </Grid>
-      </div>
-    </Tabs>
-  </Column>
-</Row>
--- a/examples/routify/static/__index.html
+++ b/examples/routify/static/__index.html
@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>routify</title>
-    <link rel="stylesheet" href="/build/bundle.css" />
-    __SCRIPT__
-  </head>
-  <body></body>
-</html>
--- a/examples/routify/static/favicon.ico
+++ b/examples/routify/static/favicon.ico
--- a/examples/routify/static/robots.txt
+++ b/examples/routify/static/robots.txt
@ -1,2 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
--- a/examples/routify/yarn.lock
+++ b/examples/routify/yarn.lock
--- a/examples/sapper/.gitignore
+++ b/examples/sapper/.gitignore
@ -1,5 +1,4 @@
 .DS_Store
 /node_modules/
-/src/node_modules/@sapper/
-yarn-error.log
+/src/node_modules/
 /__sapper__/
--- a/examples/sapper/README.md
+++ b/examples/sapper/README.md
@ -1,31 +0,0 @@
-# svite
-
-> Example set-up using [Sapper](https://github.com/sveltejs/sapper).
-
-## Getting started
-
-Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
-
-```sh
-npx degit ibm/carbon-components-svelte#sapper svelte-app
-cd svelte-app
-yarn install
-```
-
-## Available scripts
-
-### `yarn dev`
-
-Runs the app in development mode.
-
-### `yarn build`
-
-Builds the app for production (SSR).
-
-### `yarn export`
-
-Builds the app for production and statically exports the app.
-
-### `yarn start`
-
-Runs the app in production (`yarn build` must be run first).
--- a/examples/sapper/package.json
+++ b/examples/sapper/package.json
@ -1,33 +1,32 @@
 {
-  "version": "0.1.0",
+  "version": "0.0.1",
  "private": true,
  "scripts": {
+    "start": "node __sapper__/build",
    "dev": "sapper dev",
    "build": "sapper build --legacy",
-    "export": "sapper export --legacy",
-    "start": "node __sapper__/build"
+    "export": "sapper export --legacy"
  },
  "dependencies": {
-    "compression": "^1.7.1",
-    "polka": "next",
-    "sirv": "^1.0.0"
+    "polka": "next"
  },
  "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.14.5",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/runtime": "^7.0.0",
-    "@rollup/plugin-babel": "^5.0.0",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.5",
+    "@babel/runtime": "^7.14.5",
+    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
-    "@rollup/plugin-replace": "^2.2.0",
-    "carbon-components-svelte": "^0.12.0",
-    "npm-run-all": "^4.1.5",
-    "rollup": "^2.3.4",
-    "rollup-plugin-svelte": "^6.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@rollup/plugin-url": "^5.0.0",
+    "carbon-components-svelte": "^0.41.0",
+    "carbon-preprocess-svelte": "^0.6.0",
+    "rollup": "^2.51.2",
+    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.0",
-    "sapper": "^0.28.0",
-    "svelte": "^3.17.3"
+    "sapper": "^0.29.1",
+    "svelte": "^3.38.2"
  }
 }
--- a/examples/sapper/rollup.config.js
+++ b/examples/sapper/rollup.config.js
@ -1,9 +1,12 @@
+import path from "path";
 import resolve from "@rollup/plugin-node-resolve";
 import replace from "@rollup/plugin-replace";
 import commonjs from "@rollup/plugin-commonjs";
+import url from "@rollup/plugin-url";
 import svelte from "rollup-plugin-svelte";
 import babel from "@rollup/plugin-babel";
 import { terser } from "rollup-plugin-terser";
+import { optimizeImports } from "carbon-preprocess-svelte";
 import config from "sapper/config/rollup.js";
 import pkg from "./package.json";

@ -23,13 +26,20 @@ export default {
    output: config.client.output(),
    plugins: [
      replace({
+        preventAssignment: true,
        "process.browser": true,
        "process.env.NODE_ENV": JSON.stringify(mode),
      }),
      svelte({
+        preprocess: [optimizeImports()],
+        compilerOptions: {
          dev,
          hydratable: true,
-        emitCss: true,
+        },
+      }),
+      url({
+        sourceDir: path.resolve(__dirname, "src/node_modules/images"),
+        publicPath: "/client/",
      }),
      resolve({
        browser: true,
@ -42,75 +52,47 @@ export default {
          extensions: [".js", ".mjs", ".html", ".svelte"],
          babelHelpers: "runtime",
          exclude: ["node_modules/@babel/**"],
-          presets: [
-            [
-              "@babel/preset-env",
-              {
-                targets: "> 0.25%, not dead",
-              },
-            ],
-          ],
+          presets: [["@babel/preset-env", { targets: "> 0.25%, not dead" }]],
          plugins: [
            "@babel/plugin-syntax-dynamic-import",
-            [
-              "@babel/plugin-transform-runtime",
-              {
-                useESModules: true,
-              },
-            ],
+            ["@babel/plugin-transform-runtime", { useESModules: true }],
          ],
        }),
-
-      !dev &&
-        terser({
-          module: true,
-        }),
+      !dev && terser({ module: true }),
    ],
-
    preserveEntrySignatures: false,
    onwarn,
  },
-
  server: {
    input: config.server.input(),
    output: config.server.output(),
    plugins: [
      replace({
+        preventAssignment: true,
        "process.browser": false,
        "process.env.NODE_ENV": JSON.stringify(mode),
      }),
      svelte({
+        preprocess: [optimizeImports()],
+        compilerOptions: {
+          dev,
          generate: "ssr",
          hydratable: true,
-        dev,
+        },
+        emitCss: false,
      }),
-      resolve({
-        dedupe: ["svelte"],
+      url({
+        sourceDir: path.resolve(__dirname, "src/node_modules/images"),
+        publicPath: "/client/",
+        emitFiles: false, // already emitted by client build
      }),
+      resolve({ dedupe: ["svelte"] }),
      commonjs(),
    ],
    external: Object.keys(pkg.dependencies).concat(
      require("module").builtinModules
    ),
-
    preserveEntrySignatures: "strict",
    onwarn,
  },
-
-  serviceworker: {
-    input: config.serviceworker.input(),
-    output: config.serviceworker.output(),
-    plugins: [
-      resolve(),
-      replace({
-        "process.browser": true,
-        "process.env.NODE_ENV": JSON.stringify(mode),
-      }),
-      commonjs(),
-      !dev && terser(),
-    ],
-
-    preserveEntrySignatures: false,
-    onwarn,
-  },
 };
--- a/examples/sapper/src/client.js
+++ b/examples/sapper/src/client.js
@ -1,4 +1,3 @@
-import "carbon-components-svelte/css/all.css";
 import * as sapper from "@sapper/app";

 sapper.start({ target: document.querySelector("#sapper") });
--- a/examples/sapper/src/components/Header.svelte
+++ b/examples/sapper/src/components/Header.svelte
@ -1,37 +0,0 @@
-<script>
-  export let segment = undefined;
-
-  import {
-    SkipToContent,
-    Header,
-    HeaderUtilities,
-    HeaderGlobalAction,
-  } from "carbon-components-svelte";
-  import Notification20 from "carbon-icons-svelte/lib/Notification20";
-  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
-  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
-  import { getContext } from "svelte";
-
-  const ctx = getContext("Theme");
-
-  $: if (ctx) {
-    ctx.dark.subscribe((value) => {
-      console.log("dark mode?", value);
-    });
-    ctx.light.subscribe((value) => {
-      console.log("light mode?", value);
-    });
-    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
-  }
-</script>
-
-<Header company="IBM" platformName="Carbon Components Svelte" href="/">
-  <div slot="skip-to-content">
-    <SkipToContent />
-  </div>
-  <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
-    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
-    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
-  </HeaderUtilities>
-</Header>
--- a/examples/sapper/src/components/Nav.svelte
+++ b/examples/sapper/src/components/Nav.svelte
@ -1,74 +0,0 @@
-<script>
-  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);
-    font-weight: 300;
-    padding: 0 1em;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-  }
-
-  /* clearfix */
-  ul::after {
-    content: "";
-    display: block;
-    clear: both;
-  }
-
-  li {
-    display: block;
-    float: left;
-  }
-
-  [aria-current] {
-    position: relative;
-    display: inline-block;
-  }
-
-  [aria-current]::after {
-    position: absolute;
-    content: "";
-    width: calc(100% - 1em);
-    height: 2px;
-    background-color: rgb(255, 62, 0);
-    display: block;
-    bottom: -1px;
-  }
-
-  a {
-    text-decoration: none;
-    padding: 1em 0.5em;
-    display: block;
-  }
-</style>
--- a/examples/sapper/src/components/Theme.svelte
+++ b/examples/sapper/src/components/Theme.svelte
@ -1,74 +0,0 @@
-<script>
-  export let persist = false;
-  export let persistKey = "theme";
-  export let theme = "white";
-  export const themes = ["white", "g10", "g90", "g100"];
-
-  import { onMount, afterUpdate, setContext } from "svelte";
-  import { writable, derived } from "svelte/store";
-
-  const isValidTheme = (value) => themes.includes(value);
-  const isDark = (value) =>
-    isValidTheme(value) && (value === "g90" || value === "g100");
-
-  const carbon_theme = writable(theme);
-  const dark = writable(isDark(theme));
-  const light = derived(dark, (_) => !_);
-
-  const unsubscribe = carbon_theme.subscribe((value) => {
-    theme = value;
-  });
-
-  let _document = null;
-
-  setContext("Theme", {
-    updateVar: (name, value) => {
-      if (_document != null) {
-        _document.documentElement.style.setProperty(name, value);
-      }
-    },
-    carbon_theme,
-    dark,
-    light,
-  });
-
-  onMount(() => {
-    _document = window.document;
-
-    try {
-      const persisted_theme = localStorage.getItem(persistKey);
-
-      if (isValidTheme(persisted_theme)) {
-        carbon_theme.set(persisted_theme);
-      }
-    } catch (error) {
-      console.error(error);
-    }
-
-    return () => {
-      unsubscribe();
-    };
-  });
-
-  afterUpdate(() => {
-    if (isValidTheme(theme)) {
-      if (_document != null) {
-        _document.documentElement.setAttribute("theme", theme);
-      }
-
-      if (persist) {
-        localStorage.setItem(persistKey, theme);
-      }
-    } else {
-      console.warn(
-        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
-          themes
-        )}`
-      );
-    }
-  });
-
-  $: dark.set(isDark(theme));
-</script>
-
-<slot />
--- a/examples/sapper/src/routes/_error.svelte
+++ b/examples/sapper/src/routes/_error.svelte
@ -2,22 +2,17 @@
  export let status;
  export let error;

-  import { Row, Column, Link } from "carbon-components-svelte";
-
  const dev = process.env.NODE_ENV === "development";
 </script>

-<Row>
-  <Column lg="{16}">
+<svelte:head>
+  <title>{status}</title>
+</svelte:head>
+
 <h1>{status}</h1>
-    <div>
-      {error.message}
-      <Link inline href="/">Return home</Link>
-    </div>
+
+<p>{error.message}</p>
+
 {#if dev && error.stack}
-      <div>
  <pre>{error.stack}</pre>
-      </div>
 {/if}
-  </Column>
-</Row>
--- a/examples/sapper/src/routes/_layout.svelte
+++ b/examples/sapper/src/routes/_layout.svelte
@ -1,28 +1,5 @@
 <script>
-  export let segment = undefined;
-
-  import {
-    Content,
-    Breadcrumb,
-    BreadcrumbItem,
-    Grid,
-    Row,
-    Column,
-    Tabs,
-    TabContent,
-    Tab,
-    Select,
-    SelectItem,
-  } from "carbon-components-svelte";
-  import Header from "../components/Header.svelte";
-  import Theme from "../components/Theme.svelte";
+  import "carbon-components-svelte/css/white.css";
 </script>

-<Theme persist theme="g10">
-  <Header segment="{segment}" />
-  <Content style="background: none; padding: 1rem">
-    <Grid>
 <slot />
-    </Grid>
-  </Content>
-</Theme>
--- a/examples/sapper/src/routes/index.svelte
+++ b/examples/sapper/src/routes/index.svelte
@ -1,85 +1,5 @@
 <script>
-  import {
-    Content,
-    Breadcrumb,
-    BreadcrumbItem,
-    Grid,
-    Row,
-    Column,
-    Tabs,
-    TabContent,
-    Tab,
-    Select,
-    SelectItem,
-  } from "carbon-components-svelte";
-
-  import { getContext } from "svelte";
-
-  const { carbon_theme } = getContext("Theme");
+  import { Button } from "carbon-components-svelte";
 </script>

-<Row>
-  <Column lg="{16}">
-    <Breadcrumb noTrailingSlash aria-label="Page navigation">
-      <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
-    </Breadcrumb>
-    <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
-  </Column>
-</Row>
-
-<Row>
-  <Column noGutter>
-    <Tabs aria-label="Tab navigation">
-      <Tab label="About" />
-      <Tab label="Design" />
-      <Tab label="Develop" />
-      <div slot="content" class="tabbed-content">
-        <Grid as fullWidth let:props>
-          <TabContent {...props}>
-            <Row>
-              <Column md="{4}" lg="{7}">
-                <Select
-                  labelText="Carbon theme"
-                  bind:selected="{$carbon_theme}"
-                  style="margin-bottom: 1rem"
-                >
-                  <SelectItem value="white" text="White" />
-                  <SelectItem value="g10" text="Gray 10" />
-                  <SelectItem value="g90" text="Gray 90" />
-                  <SelectItem value="g100" text="Gray 100" />
-                </Select>
-                <p>
-                  Carbon is IBM’s open-source design system for digital products
-                  and experiences. With the IBM Design Language as its
-                  foundation, the system consists of working code, design tools
-                  and resources, human interface guidelines, and a vibrant
-                  community of contributors.
-                </p>
-              </Column>
-            </Row>
-          </TabContent>
-          <TabContent {...props}>
-            <Row>
-              <Column md="{4}" lg="{7}">
-                <p>
-                  Rapidly build beautiful and accessible experiences. The Carbon
-                  kit contains all resources you need to get started.
-                </p>
-              </Column>
-            </Row>
-          </TabContent>
-          <TabContent {...props}>
-            <Row>
-              <Column md="{4}" lg="{7}">
-                <p>
-                  Carbon provides styles and components in Vanilla, React,
-                  Angular, Vue and Svelte for anyone building on the web.
-                </p>
-              </Column>
-            </Row>
-          </TabContent>
-        </Grid>
-      </div>
-    </Tabs>
-  </Column>
-</Row>
+<Button>Primary button</Button>
--- a/examples/sapper/src/server.js
+++ b/examples/sapper/src/server.js
@ -1,16 +1,11 @@
-import sirv from "sirv";
 import polka from "polka";
-import compression from "compression";
 import * as sapper from "@sapper/server";

 const { PORT, NODE_ENV } = process.env;
+const dev = NODE_ENV === "development";

 polka()
-  .use(
-    compression({ threshold: 0 }),
-    sirv("static", { dev: NODE_ENV === "development" }),
-    sapper.middleware()
-  )
+  .use(sapper.middleware())
  .listen(PORT, (err) => {
    if (err) console.log("error", err);
  });
--- a/examples/sapper/src/service-worker.js
+++ b/examples/sapper/src/service-worker.js
@ -1,85 +0,0 @@
-import { timestamp, files, shell, routes } from "@sapper/service-worker";
-
-const ASSETS = `cache${timestamp}`;
-
-// `shell` is an array of all the files generated by the bundler,
-// `files` is an array of everything in the `static` directory
-const to_cache = shell.concat(files);
-const cached = new Set(to_cache);
-
-self.addEventListener("install", (event) => {
-  event.waitUntil(
-    caches
-      .open(ASSETS)
-      .then((cache) => cache.addAll(to_cache))
-      .then(() => {
-        self.skipWaiting();
-      })
-  );
-});
-
-self.addEventListener("activate", (event) => {
-  event.waitUntil(
-    caches.keys().then(async (keys) => {
-      // delete old caches
-      for (const key of keys) {
-        if (key !== ASSETS) await caches.delete(key);
-      }
-
-      self.clients.claim();
-    })
-  );
-});
-
-self.addEventListener("fetch", (event) => {
-  if (event.request.method !== "GET" || event.request.headers.has("range"))
-    return;
-
-  const url = new URL(event.request.url);
-
-  // don't try to handle e.g. data: URIs
-  if (!url.protocol.startsWith("http")) return;
-
-  // ignore dev server requests
-  if (
-    url.hostname === self.location.hostname &&
-    url.port !== self.location.port
-  )
-    return;
-
-  // always serve static files and bundler-generated assets from cache
-  if (url.host === self.location.host && cached.has(url.pathname)) {
-    event.respondWith(caches.match(event.request));
-    return;
-  }
-
-  // for pages, you might want to serve a shell `service-worker-index.html` file,
-  // which Sapper has generated for you. It's not right for every
-  // app, but if it's right for yours then uncomment this section
-  /*
-	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
-		event.respondWith(caches.match('/service-worker-index.html'));
-		return;
-	}
-	*/
-
-  if (event.request.cache === "only-if-cached") return;
-
-  // for everything else, try the network first, falling back to
-  // cache if the user is offline. (If the pages never change, you
-  // might prefer a cache-first approach to a network-first one.)
-  event.respondWith(
-    caches.open(`offline${timestamp}`).then(async (cache) => {
-      try {
-        const response = await fetch(event.request);
-        cache.put(event.request, response.clone());
-        return response;
-      } catch (err) {
-        const response = await cache.match(event.request);
-        if (response) return response;
-
-        throw err;
-      }
-    })
-  );
-});
--- a/examples/sapper/src/template.html
+++ b/examples/sapper/src/template.html
@ -2,32 +2,10 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>sapper</title>
-
-    %sapper.base%
-
-    <!-- Sapper creates a <script> tag containing `src/client.js`
-	     and anything else it needs to hydrate the app and
-	     initialise the router -->
-    %sapper.scripts%
-
-    <!-- Sapper generates a <style> tag containing critical CSS
-	     for the current page. CSS for the rest of the app is
-	     lazily loaded when it precaches secondary pages -->
-    %sapper.styles%
-
-    <!-- This contains the contents of the <svelte:head> component, if
-	     the current page has one -->
-    %sapper.head%
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    %sapper.base% %sapper.scripts% %sapper.styles% %sapper.head%
  </head>
  <body>
-    <!-- The application will be rendered inside this element,
-	     because `src/client.js` references it -->
    <div id="sapper">%sapper.html%</div>
  </body>
 </html>
--- a/examples/sapper/static/favicon.ico
+++ b/examples/sapper/static/favicon.ico
--- a/examples/sapper/yarn.lock
+++ b/examples/sapper/yarn.lock
--- a/examples/snowpack/.gitignore
+++ b/examples/snowpack/.gitignore
@ -0,0 +1,3 @@
+/.snowpack
+/build
+/node_modules
--- a/examples/snowpack/App.svelte
+++ b/examples/snowpack/App.svelte
@ -0,0 +1,6 @@
+<script>
+  import "carbon-components-svelte/css/white.css";
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button>Primary button</Button>
--- a/examples/snowpack/index.html
+++ b/examples/snowpack/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Snowpack App" />
+    <title>snowpack</title>
+  </head>
+  <body>
+    <script type="module" src="/index.js"></script>
+  </body>
+</html>
--- a/examples/svite/src/index.js
+++ b/examples/svite/src/index.js
--- a/examples/snowpack/package.json
+++ b/examples/snowpack/package.json
@ -0,0 +1,16 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "snowpack dev",
+    "build": "snowpack build"
+  },
+  "dependencies": {
+    "svelte": "^3.38.3"
+  },
+  "devDependencies": {
+    "@snowpack/plugin-svelte": "^3.7.0",
+    "carbon-components-svelte": "^0.41.0",
+    "carbon-preprocess-svelte": "^0.6.0",
+    "snowpack": "^3.8.2"
+  }
+}
--- a/examples/snowpack/snowpack.config.js
+++ b/examples/snowpack/snowpack.config.js
@ -0,0 +1,4 @@
+/** @type {import("snowpack").SnowpackUserConfig } */
+module.exports = {
+  plugins: ["@snowpack/plugin-svelte"],
+};
--- a/examples/snowpack/yarn.lock
+++ b/examples/snowpack/yarn.lock
--- a/examples/sveltekit/.gitignore
+++ b/examples/sveltekit/.gitignore
@ -0,0 +1,4 @@
+.DS_Store
+/node_modules
+/.svelte-kit
+/build
--- a/examples/sveltekit/jsconfig.json
+++ b/examples/sveltekit/jsconfig.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "$lib/*": ["src/lib/*"]
+    }
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
--- a/examples/sveltekit/package.json
+++ b/examples/sveltekit/package.json
@ -0,0 +1,15 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "preview": "svelte-kit preview"
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "next",
+    "carbon-components-svelte": "^0.41.0",
+    "carbon-preprocess-svelte": "^0.6.0",
+    "svelte": "^3.38.2"
+  }
+}
--- a/examples/sveltekit/src/app.html
+++ b/examples/sveltekit/src/app.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %svelte.head%
+  </head>
+  <body>
+    <div id="svelte">%svelte.body%</div>
+  </body>
+</html>
--- a/examples/sveltekit/src/global.d.ts
+++ b/examples/sveltekit/src/global.d.ts
@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />
--- a/examples/sveltekit/src/routes/index.svelte
+++ b/examples/sveltekit/src/routes/index.svelte
@ -0,0 +1,6 @@
+<script>
+  import "carbon-components-svelte/css/white.css";
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button>Primary button</Button>
--- a/examples/sveltekit/svelte.config.js
+++ b/examples/sveltekit/svelte.config.js
@ -0,0 +1,11 @@
+import { optimizeImports } from "carbon-preprocess-svelte";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: [optimizeImports()],
+  kit: {
+    target: "#svelte",
+  },
+};
+
+export default config;
--- a/examples/sveltekit/yarn.lock
+++ b/examples/sveltekit/yarn.lock
@ -0,0 +1,376 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@rollup/pluginutils@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
+  integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
+"@sveltejs/kit@next":
+  version "1.0.0-next.132"
+  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.132.tgz#b041ce59a7972a341063422495031a8563e3f8ca"
+  integrity sha512-mX3ihuyTQr3302ZpihG3gXfTBcDPODlJ6ZoYu6f7TGo8+1OdpuDdozgi1CKLkrUBHYGnPO4E75XOVKlgJLjBQw==
+  dependencies:
+    "@sveltejs/vite-plugin-svelte" "^1.0.0-next.12"
+    cheap-watch "^1.0.3"
+    sade "^1.7.4"
+    vite "^2.4.1"
+
+"@sveltejs/vite-plugin-svelte@^1.0.0-next.12":
+  version "1.0.0-next.13"
+  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.13.tgz#2f47d825e170eaa7e173064e7577f543bea9501f"
+  integrity sha512-hzacNmIOR55aE+yQj750R90+BbQERRVGjlu6TQLgy+Aw2bPmRJMLKvS/NmwO+I66DEiWQdFFHR+lxtwH4bbbXw==
+  dependencies:
+    "@rollup/pluginutils" "^4.1.1"
+    debug "^4.3.2"
+    diff-match-patch "^1.0.5"
+    kleur "^4.1.4"
+    magic-string "^0.25.7"
+    require-relative "^0.8.7"
+    svelte-hmr "^0.14.6"
+
+"@types/node@*":
+  version "16.3.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.3.tgz#0c30adff37bbbc7a50eb9b58fae2a504d0d88038"
+  integrity sha512-8h7k1YgQKxKXWckzFCMfsIwn0Y61UK6tlD6y2lOb3hTOIMlK3t9/QwHOhc81TwU+RMf0As5fj7NPjroERCnejQ==
+
+"@types/pug@^2.0.4":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.5.tgz#69bc700934dd473c7ab97270bd2dbacefe562231"
+  integrity sha512-LOnASQoeNZMkzexRuyqcBBDZ6rS+rQxUMkmj5A0PkhhiSZivLIuz6Hxyr1mkGoEZEkk66faROmpMi4fFkrKsBA==
+
+"@types/sass@^1.16.0":
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.16.1.tgz#cf465bd1fea486d0331f760db023de14daf4980d"
+  integrity sha512-iZUcRrGuz/Tbg3loODpW7vrQJkUtpY2fFSf4ELqqkApcS2TkZ1msk7ie8iZPB86lDOP8QOTTmuvWjc5S0R9OjQ==
+  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==
+
+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==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+carbon-components-svelte@^0.41.0:
+  version "0.41.0"
+  resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.41.0.tgz#55e19b4623ececcc88bd6a7c0c3b78a2b727a9fe"
+  integrity sha512-cfj3Vla2ovR5ed2kO1qEYEm5D46I9o4GmFJkPO7A4800w8qY3ETGDpL1d6R9gGhGStmqYPHza/uvUjxN9pcczA==
+  dependencies:
+    carbon-icons-svelte "^10.27.0"
+    flatpickr "4.6.9"
+
+carbon-icons-svelte@^10.27.0:
+  version "10.35.0"
+  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.35.0.tgz#b154243902b3ca26c563e4d2ebcfceb8cc03be34"
+  integrity sha512-GGh6tCWOUL7UjObSECpLfQ83k2xKfJRJTy6uy4v/R1BKj/Nk3bPc1vNyEwygHYI0JjPRNMbPCc53qisBPb1JGA==
+
+carbon-preprocess-svelte@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/carbon-preprocess-svelte/-/carbon-preprocess-svelte-0.6.0.tgz#a2a2a7f7a23185bc38956a5b5250e97c5737c788"
+  integrity sha512-z/SOcB1jqrodshM87YPWdTcLdQzCKKLiWueM4RPfTIz9EIo7DgJSn0gbnVtEOk8Vy/xOZ0EnnAu5fY8ualzngQ==
+  dependencies:
+    purgecss "^4.0.3"
+    svelte-preprocess "^4.7.3"
+    typescript "^4.2.4"
+
+cheap-watch@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/cheap-watch/-/cheap-watch-1.0.3.tgz#3c4265718bcf8f1ae08f5e450f9f4693432e028e"
+  integrity sha512-xC5CruMhLzjPwJ5ecUxGu1uGmwJQykUhqd2QrCrYbwvsFYdRyviu6jG9+pccwDXJR/OpmOTOJ9yLFunVgQu9wg==
+
+colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
+
+commander@^6.0.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
+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=
+
+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==
+
+debug@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  dependencies:
+    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==
+
+diff-match-patch@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
+  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
+
+esbuild@^0.12.8:
+  version "0.12.15"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.15.tgz#9d99cf39aeb2188265c5983e983e236829f08af0"
+  integrity sha512-72V4JNd2+48eOVCXx49xoSWHgC3/cCy96e7mbXKY+WOWghN00cCmlGnwVLRhRHorvv0dgCyuMYBZlM2xDM5OQw==
+
+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==
+
+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:
+  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:
+  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:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+glob@^7.0.0:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  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"
+
+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==
+  dependencies:
+    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=
+  dependencies:
+    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==
+
+is-core-module@^2.2.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491"
+  integrity sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg==
+  dependencies:
+    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==
+
+magic-string@^0.25.7:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
+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==
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+mri@^1.1.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
+  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
+
+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==
+
+nanoid@^3.1.23:
+  version "3.1.23"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
+  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    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-parse@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picomatch@^2.2.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+
+postcss-selector-parser@^6.0.2:
+  version "6.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
+  integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss@^8.2.1, postcss@^8.3.5:
+  version "8.3.5"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
+  integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==
+  dependencies:
+    colorette "^1.2.2"
+    nanoid "^3.1.23"
+    source-map-js "^0.6.2"
+
+purgecss@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"
+  integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==
+  dependencies:
+    commander "^6.0.0"
+    glob "^7.0.0"
+    postcss "^8.2.1"
+    postcss-selector-parser "^6.0.2"
+
+require-relative@^0.8.7:
+  version "0.8.7"
+  resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
+  integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
+
+resolve@^1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
+rollup@^2.38.5:
+  version "2.53.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.53.2.tgz#3279f9bfba1fe446585560802e418c5fbcaefa51"
+  integrity sha512-1CtEYuS5CRCzFZ7SNW5528SlDlk4VDXIRGwbm/2POQxA/G4+7/crIqJwkmnj8Q/74hGx4oVlNvh4E1CJQ5hZ6w==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+sade@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.7.4.tgz#ea681e0c65d248d2095c90578c03ca0bb1b54691"
+  integrity sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==
+  dependencies:
+    mri "^1.1.0"
+
+source-map-js@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
+  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+
+sourcemap-codec@^1.4.4:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+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==
+  dependencies:
+    min-indent "^1.0.0"
+
+svelte-hmr@^0.14.6:
+  version "0.14.6"
+  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.6.tgz#d3f3be88bebb50ef2fb1ed4ebfb8ba4f03874098"
+  integrity sha512-0oXQmRiEh3uNjyVQiGmIE7imbKO4dYc1WL6XRXTC0X9XbSacJgj9MOLguqqbZygPsNnlglhlk4eB0pCmM6nQAA==
+
+svelte-preprocess@^4.7.3:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.7.4.tgz#e4d5208ab25c2aaaf19e837f7d7bbf7930e61d2b"
+  integrity sha512-mDAmaltQl6e5zU2VEtoWEf7eLTfuOTGr9zt+BpA3AGHo8MIhKiNSPE9OLTCTOMgj0vj/uL9QBbaNmpG4G1CgIA==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    strip-indent "^3.0.0"
+
+svelte@^3.38.2:
+  version "3.38.3"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.3.tgz#e15a1da98ee4b10162a6c8cb4c80aa86b2b589ed"
+  integrity sha512-N7bBZJH0iF24wsalFZF+fVYMUOigaAUQMIcEKHO3jstK/iL8VmP9xE+P0/a76+FkNcWt+TDv2Gx1taUoUscrvw==
+
+typescript@^4.2.4:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+
+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=
+
+vite@^2.4.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.4.2.tgz#07d00615775c808530bc9f65641062b349b67929"
+  integrity sha512-2MifxD2I9fjyDmmEzbULOo3kOUoqX90A58cT6mECxoVQlMYFuijZsPQBuA14mqSwvV3ydUsqnq+BRWXyO9Qa+w==
+  dependencies:
+    esbuild "^0.12.8"
+    postcss "^8.3.5"
+    resolve "^1.20.0"
+    rollup "^2.38.5"
+  optionalDependencies:
+    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=
--- a/examples/svite/.gitignore
+++ b/examples/svite/.gitignore
@ -1,2 +0,0 @@
-/dist
-/node_modules
--- a/examples/svite/README.md
+++ b/examples/svite/README.md
@ -1,23 +0,0 @@
-# svite
-
-> Example set-up using [svite](https://github.com/dominikg/svite).
-
-## Getting started
-
-Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
-
-```sh
-npx degit ibm/carbon-components-svelte#svite svelte-app
-cd svelte-app
-yarn install
-```
-
-## Available scripts
-
-### `yarn dev`
-
-Runs the app in development mode.
-
-### `yarn build`
-
-Builds the app for production.
--- a/examples/svite/index.html
+++ b/examples/svite/index.html
@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>svite</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script type="module" src="/src/index.js"></script>
-  </body>
-</html>
--- a/examples/svite/package.json
+++ b/examples/svite/package.json
@ -1,16 +0,0 @@
-{
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "svite",
-    "build": "svite build"
-  },
-  "devDependencies": {
-    "carbon-components-svelte": "^0.12.0",
-    "node-sass": "^4.14.1",
-    "svelte": "^3.24.1",
-    "svelte-hmr": "^0.10.2",
-    "svelte-preprocess": "^4.2.1",
-    "svite": "^0.6.0"
-  }
-}
--- a/examples/svite/public/favicon.ico
+++ b/examples/svite/public/favicon.ico
--- a/examples/svite/src/App.svelte
+++ b/examples/svite/src/App.svelte
@ -1,92 +0,0 @@
-<script>
-  import { Content } from "carbon-components-svelte/src/UIShell";
-  import {
-    Breadcrumb,
-    BreadcrumbItem,
-  } from "carbon-components-svelte/src/Breadcrumb";
-  import { Grid, Row, Column } from "carbon-components-svelte/src/Grid";
-  import { Tabs, TabContent, Tab } from "carbon-components-svelte/src/Tabs";
-  import { Select, SelectItem } from "carbon-components-svelte/src/Select";
-  import Header from "./components/Header.svelte";
-  import Theme from "./components/Theme.svelte";
-
-  let theme = "g10";
-</script>
-
-<Theme persist bind:theme>
-  <Header />
-  <Content style="background: none; padding: 1rem">
-    <Grid>
-      <Row>
-        <Column lg="{16}">
-          <Breadcrumb noTrailingSlash aria-label="Page navigation">
-            <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
-          </Breadcrumb>
-          <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
-        </Column>
-      </Row>
-
-      <Row>
-        <Column noGutter>
-          <Tabs aria-label="Tab navigation">
-            <Tab label="About" />
-            <Tab label="Design" />
-            <Tab label="Develop" />
-            <div slot="content" class="tabbed-content">
-              <Grid as fullWidth let:props>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <Select
-                        labelText="Carbon theme"
-                        bind:selected="{theme}"
-                        style="margin-bottom: 1rem"
-                      >
-                        <SelectItem value="white" text="White" />
-                        <SelectItem value="g10" text="Gray 10" />
-                        <SelectItem value="g90" text="Gray 90" />
-                        <SelectItem value="g100" text="Gray 100" />
-                      </Select>
-                      <p>
-                        Carbon is IBM’s open-source design system for digital
-                        products and experiences. With the IBM Design Language
-                        as its foundation, the system consists of working code,
-                        design tools and resources, human interface guidelines,
-                        and a vibrant community of contributors.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <p>
-                        Rapidly build beautiful and accessible experiences. The
-                        Carbon kit contains all resources you need to get
-                        started.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <p>
-                        Carbon provides styles and components in Vanilla, React,
-                        Angular, Vue and Svelte for anyone building on the web.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-              </Grid>
-            </div>
-          </Tabs>
-        </Column>
-      </Row>
-    </Grid>
-  </Content>
-</Theme>
-
-<style lang="scss" global>
-  @import "carbon-components-svelte/css/all";
-</style>
--- a/examples/svite/src/components/Header.svelte
+++ b/examples/svite/src/components/Header.svelte
@ -1,35 +0,0 @@
-<script>
-  import {
-    SkipToContent,
-    Header,
-    HeaderUtilities,
-    HeaderGlobalAction,
-  } from "carbon-components-svelte/src/UIShell";
-  import Notification20 from "carbon-icons-svelte/lib/Notification20";
-  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
-  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
-  import { getContext } from "svelte";
-
-  const ctx = getContext("Theme");
-
-  $: if (ctx) {
-    ctx.dark.subscribe((value) => {
-      console.log("dark mode?", value);
-    });
-    ctx.light.subscribe((value) => {
-      console.log("light mode?", value);
-    });
-    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
-  }
-</script>
-
-<Header company="IBM" platformName="Carbon Components Svelte" href="/">
-  <div slot="skip-to-content">
-    <SkipToContent />
-  </div>
-  <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
-    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
-    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
-  </HeaderUtilities>
-</Header>
--- a/examples/svite/src/components/Theme.svelte
+++ b/examples/svite/src/components/Theme.svelte
@ -1,55 +0,0 @@
-<script>
-  export let persist = false;
-  export let persistKey = "theme";
-  export let theme = "white";
-  export const themes = ["white", "g10", "g90", "g100"];
-
-  import { onMount, afterUpdate, setContext } from "svelte";
-  import { writable, derived } from "svelte/store";
-
-  const isValidTheme = (value) => themes.includes(value);
-  const isDark = (value) =>
-    isValidTheme(value) && (value === "g90" || value === "g100");
-
-  const dark = writable(isDark(theme));
-  const light = derived(dark, (_) => !_);
-
-  setContext("Theme", {
-    updateVar: (name, value) => {
-      document.documentElement.style.setProperty(name, value);
-    },
-    dark,
-    light,
-  });
-
-  onMount(() => {
-    try {
-      const persisted_theme = localStorage.getItem(persistKey);
-
-      if (isValidTheme(persisted_theme)) {
-        theme = persisted_theme;
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  });
-
-  afterUpdate(() => {
-    if (isValidTheme(theme)) {
-      document.documentElement.setAttribute("theme", theme);
-      if (persist) {
-        localStorage.setItem(persistKey, theme);
-      }
-    } else {
-      console.warn(
-        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
-          themes
-        )}`
-      );
-    }
-  });
-
-  $: dark.set(isDark(theme));
-</script>
-
-<slot />
--- a/examples/svite/svelte.config.js
+++ b/examples/svite/svelte.config.js
@ -1 +0,0 @@
-module.exports = { preprocess: [require("svelte-preprocess")()] };
--- a/examples/svite/yarn.lock
+++ b/examples/svite/yarn.lock
--- a/examples/vite/.gitignore
+++ b/examples/vite/.gitignore
@ -0,0 +1,4 @@
+.DS_Store
+.vscode
+node_modules/
+dist/
--- a/examples/vite/index.html
+++ b/examples/vite/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <script type="module">
+      import App from "/src/App.svelte";
+
+      const app = new App({ target: document.body });
+
+      export default app;
+    </script>
+  </body>
+</html>
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@ -0,0 +1,15 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "next",
+    "carbon-components-svelte": "^0.41.0",
+    "carbon-preprocess-svelte": "^0.6.0",
+    "svelte": "^3.38.2",
+    "svelte-hmr": "^0.14.4",
+    "vite": "^2.3.7"
+  }
+}
--- a/examples/vite/src/App.svelte
+++ b/examples/vite/src/App.svelte
@ -0,0 +1,6 @@
+<script>
+  import "carbon-components-svelte/css/white.css";
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button>Primary button</Button>
--- a/examples/vite/vite.config.js
+++ b/examples/vite/vite.config.js
@ -0,0 +1,10 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { defineConfig } from "vite";
+import { optimizeImports } from "carbon-preprocess-svelte";
+
+export default defineConfig(({ mode }) => {
+  return {
+    plugins: [svelte({ preprocess: [optimizeImports()] })],
+    build: { minify: mode === "production" },
+  };
+});
--- a/examples/vite/yarn.lock
+++ b/examples/vite/yarn.lock
@ -0,0 +1,343 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@rollup/pluginutils@^4.1.0":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
+  integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
+"@sveltejs/vite-plugin-svelte@next":
+  version "1.0.0-next.12"
+  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.12.tgz#5ab9cc2bc361d2d6fc9abbbd73fcd2803bf8f00c"
+  integrity sha512-cuyNkJ6leptfv+7qL/fWQ7EpGWdguosFOUI0z93oQUmFTcX7QxJ5h+QI3NQyktBzlKL/761L8BbG2hHNkVbLIQ==
+  dependencies:
+    "@rollup/pluginutils" "^4.1.0"
+    debug "^4.3.2"
+    kleur "^4.1.4"
+    magic-string "^0.25.7"
+    require-relative "^0.8.7"
+    svelte-hmr "^0.14.5"
+
+"@types/node@*":
+  version "16.3.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.3.tgz#0c30adff37bbbc7a50eb9b58fae2a504d0d88038"
+  integrity sha512-8h7k1YgQKxKXWckzFCMfsIwn0Y61UK6tlD6y2lOb3hTOIMlK3t9/QwHOhc81TwU+RMf0As5fj7NPjroERCnejQ==
+
+"@types/pug@^2.0.4":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.5.tgz#69bc700934dd473c7ab97270bd2dbacefe562231"
+  integrity sha512-LOnASQoeNZMkzexRuyqcBBDZ6rS+rQxUMkmj5A0PkhhiSZivLIuz6Hxyr1mkGoEZEkk66faROmpMi4fFkrKsBA==
+
+"@types/sass@^1.16.0":
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/@types/sass/-/sass-1.16.1.tgz#cf465bd1fea486d0331f760db023de14daf4980d"
+  integrity sha512-iZUcRrGuz/Tbg3loODpW7vrQJkUtpY2fFSf4ELqqkApcS2TkZ1msk7ie8iZPB86lDOP8QOTTmuvWjc5S0R9OjQ==
+  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==
+
+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==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+carbon-components-svelte@^0.41.0:
+  version "0.41.0"
+  resolved "https://registry.yarnpkg.com/carbon-components-svelte/-/carbon-components-svelte-0.41.0.tgz#55e19b4623ececcc88bd6a7c0c3b78a2b727a9fe"
+  integrity sha512-cfj3Vla2ovR5ed2kO1qEYEm5D46I9o4GmFJkPO7A4800w8qY3ETGDpL1d6R9gGhGStmqYPHza/uvUjxN9pcczA==
+  dependencies:
+    carbon-icons-svelte "^10.27.0"
+    flatpickr "4.6.9"
+
+carbon-icons-svelte@^10.27.0:
+  version "10.35.0"
+  resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.35.0.tgz#b154243902b3ca26c563e4d2ebcfceb8cc03be34"
+  integrity sha512-GGh6tCWOUL7UjObSECpLfQ83k2xKfJRJTy6uy4v/R1BKj/Nk3bPc1vNyEwygHYI0JjPRNMbPCc53qisBPb1JGA==
+
+carbon-preprocess-svelte@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/carbon-preprocess-svelte/-/carbon-preprocess-svelte-0.6.0.tgz#a2a2a7f7a23185bc38956a5b5250e97c5737c788"
+  integrity sha512-z/SOcB1jqrodshM87YPWdTcLdQzCKKLiWueM4RPfTIz9EIo7DgJSn0gbnVtEOk8Vy/xOZ0EnnAu5fY8ualzngQ==
+  dependencies:
+    purgecss "^4.0.3"
+    svelte-preprocess "^4.7.3"
+    typescript "^4.2.4"
+
+colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
+
+commander@^6.0.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
+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=
+
+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==
+
+debug@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  dependencies:
+    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==
+
+esbuild@^0.12.8:
+  version "0.12.15"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.15.tgz#9d99cf39aeb2188265c5983e983e236829f08af0"
+  integrity sha512-72V4JNd2+48eOVCXx49xoSWHgC3/cCy96e7mbXKY+WOWghN00cCmlGnwVLRhRHorvv0dgCyuMYBZlM2xDM5OQw==
+
+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==
+
+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:
+  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:
+  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:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+glob@^7.0.0:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  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"
+
+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==
+  dependencies:
+    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=
+  dependencies:
+    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==
+
+is-core-module@^2.2.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491"
+  integrity sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg==
+  dependencies:
+    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==
+
+magic-string@^0.25.7:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
+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==
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+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==
+
+nanoid@^3.1.23:
+  version "3.1.23"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
+  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    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-parse@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picomatch@^2.2.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+
+postcss-selector-parser@^6.0.2:
+  version "6.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
+  integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss@^8.2.1, postcss@^8.3.5:
+  version "8.3.5"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
+  integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==
+  dependencies:
+    colorette "^1.2.2"
+    nanoid "^3.1.23"
+    source-map-js "^0.6.2"
+
+purgecss@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"
+  integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==
+  dependencies:
+    commander "^6.0.0"
+    glob "^7.0.0"
+    postcss "^8.2.1"
+    postcss-selector-parser "^6.0.2"
+
+require-relative@^0.8.7:
+  version "0.8.7"
+  resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
+  integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
+
+resolve@^1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
+  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
+rollup@^2.38.5:
+  version "2.53.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.53.2.tgz#3279f9bfba1fe446585560802e418c5fbcaefa51"
+  integrity sha512-1CtEYuS5CRCzFZ7SNW5528SlDlk4VDXIRGwbm/2POQxA/G4+7/crIqJwkmnj8Q/74hGx4oVlNvh4E1CJQ5hZ6w==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+source-map-js@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
+  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+
+sourcemap-codec@^1.4.4:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
+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==
+  dependencies:
+    min-indent "^1.0.0"
+
+svelte-hmr@^0.14.4, svelte-hmr@^0.14.5:
+  version "0.14.6"
+  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.6.tgz#d3f3be88bebb50ef2fb1ed4ebfb8ba4f03874098"
+  integrity sha512-0oXQmRiEh3uNjyVQiGmIE7imbKO4dYc1WL6XRXTC0X9XbSacJgj9MOLguqqbZygPsNnlglhlk4eB0pCmM6nQAA==
+
+svelte-preprocess@^4.7.3:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.7.4.tgz#e4d5208ab25c2aaaf19e837f7d7bbf7930e61d2b"
+  integrity sha512-mDAmaltQl6e5zU2VEtoWEf7eLTfuOTGr9zt+BpA3AGHo8MIhKiNSPE9OLTCTOMgj0vj/uL9QBbaNmpG4G1CgIA==
+  dependencies:
+    "@types/pug" "^2.0.4"
+    "@types/sass" "^1.16.0"
+    detect-indent "^6.0.0"
+    strip-indent "^3.0.0"
+
+svelte@^3.38.2:
+  version "3.38.3"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.38.3.tgz#e15a1da98ee4b10162a6c8cb4c80aa86b2b589ed"
+  integrity sha512-N7bBZJH0iF24wsalFZF+fVYMUOigaAUQMIcEKHO3jstK/iL8VmP9xE+P0/a76+FkNcWt+TDv2Gx1taUoUscrvw==
+
+typescript@^4.2.4:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+
+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=
+
+vite@^2.3.7:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.4.2.tgz#07d00615775c808530bc9f65641062b349b67929"
+  integrity sha512-2MifxD2I9fjyDmmEzbULOo3kOUoqX90A58cT6mECxoVQlMYFuijZsPQBuA14mqSwvV3ydUsqnq+BRWXyO9Qa+w==
+  dependencies:
+    esbuild "^0.12.8"
+    postcss "^8.3.5"
+    resolve "^1.20.0"
+    rollup "^2.38.5"
+  optionalDependencies:
+    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=
--- a/examples/webpack/.gitignore
+++ b/examples/webpack/.gitignore
@ -1,5 +1,3 @@
 .DS_Store
-/build
 /node_modules
-yarn-debug.log*
-yarn-error.log*
+public
--- a/examples/webpack/README.md
+++ b/examples/webpack/README.md
@ -1,23 +0,0 @@
-# webpack
-
-> Example set-up using [webpack](https://github.com/webpack/webpack).
-
-## Getting started
-
-Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
-
-```sh
-npx degit ibm/carbon-components-svelte#webpack svelte-app
-cd svelte-app
-yarn install
-```
-
-## Available scripts
-
-### `yarn dev`
-
-Starts the app in development mode.
-
-### `yarn build`
-
-Builds the app for production.
--- a/examples/webpack/package.json
+++ b/examples/webpack/package.json
@ -1,22 +1,20 @@
 {
-  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "dev": "webpack-dev-server",
-    "build": "NODE_ENV=production webpack"
+    "dev": "webpack serve",
+    "build": "rm -rf public && NODE_ENV=production webpack"
  },
  "devDependencies": {
-    "carbon-components-svelte": "^0.12.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.1.0",
-    "css-loader": "^4.2.2",
-    "html-webpack-plugin": "^4.4.1",
-    "mini-css-extract-plugin": "~0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "svelte": "^3.24.1",
-    "svelte-loader": "^2.13.6",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
+    "carbon-components-svelte": "^0.41.0",
+    "carbon-preprocess-svelte": "^0.6.0",
+    "css-loader": "^6.2.0",
+    "esbuild-loader": "^2.11.0",
+    "html-webpack-plugin": "5.3.1",
+    "mini-css-extract-plugin": "^2.1.0",
+    "svelte": "^3.35.0",
+    "svelte-loader": "^3.0.0",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
  }
 }
--- a/examples/webpack/public/favicon.ico
+++ b/examples/webpack/public/favicon.ico
--- a/examples/webpack/public/index.html
+++ b/examples/webpack/public/index.html
@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>webpack</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-  </body>
-</html>
--- a/examples/webpack/src/App.svelte
+++ b/examples/webpack/src/App.svelte
@ -1,93 +1,6 @@
 <script>
-  import {
-    Content,
-    Breadcrumb,
-    BreadcrumbItem,
-    Grid,
-    Row,
-    Column,
-    Tabs,
-    TabContent,
-    Tab,
-    Select,
-    SelectItem,
-  } from "carbon-components-svelte";
-  import Header from "./components/Header.svelte";
-  import Theme from "./components/Theme.svelte";
-
-  let theme = "g10";
+  import "carbon-components-svelte/css/white.css";
+  import { Button } from "carbon-components-svelte";
 </script>

-<Theme persist bind:theme>
-  <Header />
-  <Content style="background: none; padding: 1rem">
-    <Grid>
-      <Row>
-        <Column lg="{16}">
-          <Breadcrumb noTrailingSlash aria-label="Page navigation">
-            <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
-          </Breadcrumb>
-          <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
-        </Column>
-      </Row>
-
-      <Row>
-        <Column noGutter>
-          <Tabs aria-label="Tab navigation">
-            <Tab label="About" />
-            <Tab label="Design" />
-            <Tab label="Develop" />
-            <div slot="content" class="tabbed-content">
-              <Grid as fullWidth let:props>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <Select
-                        labelText="Carbon theme"
-                        bind:selected="{theme}"
-                        style="margin-bottom: 1rem"
-                      >
-                        <SelectItem value="white" text="White" />
-                        <SelectItem value="g10" text="Gray 10" />
-                        <SelectItem value="g90" text="Gray 90" />
-                        <SelectItem value="g100" text="Gray 100" />
-                      </Select>
-                      <p>
-                        Carbon is IBM’s open-source design system for digital
-                        products and experiences. With the IBM Design Language
-                        as its foundation, the system consists of working code,
-                        design tools and resources, human interface guidelines,
-                        and a vibrant community of contributors.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <p>
-                        Rapidly build beautiful and accessible experiences. The
-                        Carbon kit contains all resources you need to get
-                        started.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-                <TabContent {...props}>
-                  <Row>
-                    <Column md="{4}" lg="{7}">
-                      <p>
-                        Carbon provides styles and components in Vanilla, React,
-                        Angular, Vue and Svelte for anyone building on the web.
-                      </p>
-                    </Column>
-                  </Row>
-                </TabContent>
-              </Grid>
-            </div>
-          </Tabs>
-        </Column>
-      </Row>
-    </Grid>
-  </Content>
-</Theme>
+<Button>Primary button</Button>
--- a/examples/webpack/src/components/Header.svelte
+++ b/examples/webpack/src/components/Header.svelte
@ -1,35 +0,0 @@
-<script>
-  import {
-    SkipToContent,
-    Header,
-    HeaderUtilities,
-    HeaderGlobalAction,
-  } from "carbon-components-svelte";
-  import Notification20 from "carbon-icons-svelte/lib/Notification20";
-  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
-  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
-  import { getContext } from "svelte";
-
-  const ctx = getContext("Theme");
-
-  $: if (ctx) {
-    ctx.dark.subscribe((value) => {
-      console.log("dark mode?", value);
-    });
-    ctx.light.subscribe((value) => {
-      console.log("light mode?", value);
-    });
-    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
-  }
-</script>
-
-<Header company="IBM" platformName="Carbon Components Svelte" href="/">
-  <div slot="skip-to-content">
-    <SkipToContent />
-  </div>
-  <HeaderUtilities>
-    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
-    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
-    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
-  </HeaderUtilities>
-</Header>
--- a/examples/webpack/src/components/Theme.svelte
+++ b/examples/webpack/src/components/Theme.svelte
@ -1,55 +0,0 @@
-<script>
-  export let persist = false;
-  export let persistKey = "theme";
-  export let theme = "white";
-  export const themes = ["white", "g10", "g90", "g100"];
-
-  import { onMount, afterUpdate, setContext } from "svelte";
-  import { writable, derived } from "svelte/store";
-
-  const isValidTheme = (value) => themes.includes(value);
-  const isDark = (value) =>
-    isValidTheme(value) && (value === "g90" || value === "g100");
-
-  const dark = writable(isDark(theme));
-  const light = derived(dark, (_) => !_);
-
-  setContext("Theme", {
-    updateVar: (name, value) => {
-      document.documentElement.style.setProperty(name, value);
-    },
-    dark,
-    light,
-  });
-
-  onMount(() => {
-    try {
-      const persisted_theme = localStorage.getItem(persistKey);
-
-      if (isValidTheme(persisted_theme)) {
-        theme = persisted_theme;
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  });
-
-  afterUpdate(() => {
-    if (isValidTheme(theme)) {
-      document.documentElement.setAttribute("theme", theme);
-      if (persist) {
-        localStorage.setItem(persistKey, theme);
-      }
-    } else {
-      console.warn(
-        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
-          themes
-        )}`
-      );
-    }
-  });
-
-  $: dark.set(isDark(theme));
-</script>
-
-<slot />
--- a/examples/webpack/src/index.js
+++ b/examples/webpack/src/index.js
@ -1,4 +1,3 @@
-import "carbon-components-svelte/css/all.css";
 import App from "./App.svelte";

 const app = new App({ target: document.body });
--- a/examples/webpack/webpack.config.js
+++ b/examples/webpack/webpack.config.js
@ -1,52 +1,73 @@
-const webpack = require("webpack");
-const path = require("path");
-const CopyPlugin = require("copy-webpack-plugin");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const { ESBuildMinifyPlugin } = require("esbuild-loader");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+const { optimizeImports } = require("carbon-preprocess-svelte");

 const NODE_ENV = process.env.NODE_ENV || "development";
 const PROD = NODE_ENV === "production";

 module.exports = {
-  stats: "errors-only",
-  mode: NODE_ENV,
-  devtool: PROD ? false : "cheap-eval-source-map",
-  devServer: { historyApiFallback: true },
-  entry: { bundle: ["./src/index.js"] },
+  entry: { "build/bundle": ["./src/index.js"] },
  resolve: {
-    alias: { svelte: path.resolve("node_modules", "svelte") },
+    alias: { svelte: path.dirname(require.resolve("svelte/package.json")) },
    extensions: [".mjs", ".js", ".svelte"],
    mainFields: ["svelte", "browser", "module", "main"],
  },
-  output: { path: `${__dirname}/build`, filename: "[name].[chunkhash].js" },
+  output: {
+    publicPath: "/",
+    path: path.join(__dirname, "/public"),
+    filename: PROD ? "[name].[contenthash].js" : "[name].js",
+    chunkFilename: "[name].[id].js",
+  },
  module: {
    rules: [
      {
-        test: /\.(svelte)$/,
+        test: /\.svelte$/,
        use: {
          loader: "svelte-loader",
-          options: { emitCss: true, hotReload: true },
+          options: {
+            preprocess: [optimizeImports()],
+            hotReload: !PROD,
+            compilerOptions: { dev: !PROD },
+          },
        },
      },
      {
        test: /\.css$/,
-        sideEffects: true,
-        use: [
-          { loader: MiniCssExtractPlugin.loader, options: { hmr: !PROD } },
-          "css-loader",
-        ],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+      {
+        test: /node_modules\/svelte\/.*\.mjs$/,
+        resolve: { fullySpecified: false },
      },
    ],
  },
+  mode: NODE_ENV,
  plugins: [
-    new CleanWebpackPlugin(),
-    new CopyPlugin({ patterns: [{ from: "public" }] }),
    new MiniCssExtractPlugin({
      filename: PROD ? "[name].[chunkhash].css" : "[name].css",
    }),
-    new OptimizeCssAssetsPlugin({}),
-    new HtmlWebpackPlugin({ template: "public/index.html" }),
+    new HtmlWebpackPlugin({
+      templateContent: `
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+          />
+        </head>
+        <body></body>
+      </html>
+      `,
+    }),
  ],
+  stats: "errors-only",
+  devtool: PROD ? false : "source-map",
+  devServer: { hot: true, historyApiFallback: true },
+  optimization: {
+    minimizer: [new ESBuildMinifyPlugin({ target: "es2015" })],
+  },
 };
--- a/examples/webpack/yarn.lock
+++ b/examples/webpack/yarn.lock
				`@ -1 +0,0 @@`
				`module.exports = { preprocess: [require("svelte-preprocess")()] };`