diff --git a/.changeset/config.json b/.changeset/config.json
index d419bf26a..57290c622 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -9,5 +9,8 @@
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true
+  },
   "ignore": ["@fixtures/*", "test-helpers", "vanilla-extract-webpack-react"]
 }
diff --git a/.changeset/gold-wombats-thank.md b/.changeset/gold-wombats-thank.md
new file mode 100644
index 000000000..ec7103b7d
--- /dev/null
+++ b/.changeset/gold-wombats-thank.md
@@ -0,0 +1,21 @@
+---
+'@vanilla-extract/snowpack-plugin': major
+---
+
+Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the `identifiers` option which accepts either `short` or `debug`.
+
+- `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`
+- `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `somefile_mystyle_hnw5tz3`
+
+```js
+import { vanillaExtractPlugin } from '@vanilla-extract/snowpack-plugin';
+
+const snowpackConfig = { 
+    plugins: [['@vanilla-extract/snowpack-plugin', { identifiers: 'short' }]] 
+}
+```
+
+BREAKING CHANGE
+
+Previously identifiers were formatted as `short` when `process.env.NODE_ENV` was set to "production". By default, they will now be formatted according to Snowpacks's [mode config](https://www.snowpack.dev/reference/configuration#mode).
+
diff --git a/.changeset/hip-icons-destroy.md b/.changeset/hip-icons-destroy.md
new file mode 100644
index 000000000..3207d9041
--- /dev/null
+++ b/.changeset/hip-icons-destroy.md
@@ -0,0 +1,19 @@
+---
+'@vanilla-extract/webpack-plugin': major
+---
+
+Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the `identifiers` option which accepts either `short` or `debug`.
+
+- `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`
+- `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `somefile_mystyle_hnw5tz3`
+
+```js
+import { vanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
+
+vanillaExtractPlugin({ identifiers: 'short' })
+```
+
+BREAKING CHANGE
+
+Previously identifiers were formatted as `short` when `process.env.NODE_ENV` was set to "production". By default, they will now be formatted according to webpack's [mode config](https://webpack.js.org/configuration/mode/).
+
diff --git a/.changeset/olive-zoos-roll.md b/.changeset/olive-zoos-roll.md
new file mode 100644
index 000000000..33d9cdee3
--- /dev/null
+++ b/.changeset/olive-zoos-roll.md
@@ -0,0 +1,18 @@
+---
+'@vanilla-extract/vite-plugin': major
+---
+
+Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the `identifiers` option which accepts either `short` or `debug`.
+
+- `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`
+- `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `somefile_mystyle_hnw5tz3`
+
+```js
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+
+vanillaExtractPlugin({ identifiers: 'short' });
+```
+
+BREAKING CHANGE
+
+Previously identifiers were formatted as `short` when `process.env.NODE_ENV` was set to "production". By default, they will now be formatted according to Vite's [mode config](https://vitejs.dev/config/#mode).
\ No newline at end of file
diff --git a/.changeset/sharp-dingos-smell.md b/.changeset/sharp-dingos-smell.md
new file mode 100644
index 000000000..93b81847c
--- /dev/null
+++ b/.changeset/sharp-dingos-smell.md
@@ -0,0 +1,18 @@
+---
+'@vanilla-extract/esbuild-plugin': major
+---
+
+Formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can now be configured via the `identifiers` option which accepts either `short` or `debug`.
+
+- `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`
+- `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `somefile_mystyle_hnw5tz3`
+
+```js
+import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
+
+vanillaExtractPlugin({ identifiers: 'short' });
+```
+
+BREAKING CHANGE
+
+Previously identifiers were formatted as `short` when `process.env.NODE_ENV` was set to "production". By default, they will now be formatted according to esbuild's [minify config](https://esbuild.github.io/api/#minify).
diff --git a/.changeset/twenty-cougars-visit.md b/.changeset/twenty-cougars-visit.md
new file mode 100644
index 000000000..7583d1077
--- /dev/null
+++ b/.changeset/twenty-cougars-visit.md
@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/css': minor
+'@vanilla-extract/integration': minor
+---
+
+Support configurable identifier types 
\ No newline at end of file
diff --git a/README.md b/README.md
index dd973ffcb..79792ce7a 100644
--- a/README.md
+++ b/README.md
@@ -85,6 +85,8 @@ Want to work at a higher level while maximising style re-use? Check out  🍨 [S
   - [Snowpack](#snowpack)
   - [Gatsby](#gatsby)
   - [Test environments](#test-environments)
+  - [Configuration](#configuration)
+    - [identifiers](#identifiers)
 - [Styling API](#styling-api)
   - [style](#style)
   - [styleVariants](#stylevariants)
@@ -132,6 +134,8 @@ npm install @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extract/
 
 3. Add the [webpack](https://webpack.js.org) plugin.
 
+> 💡 This plugin accepts an optional [configuration object](#configuration).
+
 ```js
 const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
 
@@ -185,6 +189,8 @@ npm install @vanilla-extract/css @vanilla-extract/esbuild-plugin
 
 2. Add the [esbuild](https://esbuild.github.io/) plugin to your build script.
 
+> 💡 This plugin accepts an optional [configuration object](#configuration).
+
 ```js
 const { vanillaExtractPlugin } = require('@vanilla-extract/esbuild-plugin');
 
@@ -246,6 +252,8 @@ npm install @vanilla-extract/css @vanilla-extract/vite-plugin
 
 2. Add the [Vite](https://vitejs.dev/) plugin to your Vite config.
 
+> 💡 This plugin accepts an optional [configuration object](#configuration).
+
 ```js
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
@@ -267,6 +275,8 @@ npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin
 
 2. Add the [Snowpack](https://www.snowpack.dev/) plugin to your snowpack config.
 
+> 💡 This plugin accepts an optional [configuration object](#configuration).
+
 ```js
 // snowpack.config.json
 {
@@ -305,6 +315,16 @@ In testing environments (like `jsdom`) vanilla-extract will create and insert st
 import '@vanilla-extract/css/disableRuntimeStyles';
 ```
 
+### Configuration
+
+#### identifiers
+
+Different formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can be configured by selecting from the following options:
+
+- `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`
+- `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `myfile_mystyle_hnw5tz3`
+
+Each integration will set a default value based on the configuration options passed to the bundler.
 
 ---
 
diff --git a/package.json b/package.json
index 7b851800b..8d8936879 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,8 @@
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@changesets/changelog-github": "^0.3.0",
-    "@changesets/cli": "^2.14.1",
+    "@changesets/changelog-github": "^0.4.0",
+    "@changesets/cli": "^2.16.0",
     "@manypkg/cli": "^0.17.0",
     "@preconstruct/cli": "^2.0.1",
     "@testing-library/dom": "^7.30.0",
diff --git a/packages/css/src/adapter.ts b/packages/css/src/adapter.ts
index 89431a415..5143eb96e 100644
--- a/packages/css/src/adapter.ts
+++ b/packages/css/src/adapter.ts
@@ -6,6 +6,7 @@ export const mockAdapter: Adapter = {
   onEndFileScope: () => {},
   registerComposition: () => {},
   markCompositionUsed: () => {},
+  getIdentOption: () => 'debug',
 };
 
 let adapter: Adapter = mockAdapter;
@@ -46,3 +47,12 @@ export const markCompositionUsed: Adapter['markCompositionUsed'] = (
 export const onEndFileScope: Adapter['onEndFileScope'] = (...props) => {
   return adapter.onEndFileScope(...props);
 };
+
+export const getIdentOption: Adapter['getIdentOption'] = (...props) => {
+  // Backwards compatibility with old versions of the integration package
+  if (!('getIdentOption' in adapter)) {
+    return process.env.NODE_ENV === 'production' ? 'short' : 'debug';
+  }
+
+  return adapter.getIdentOption(...props);
+};
diff --git a/packages/css/src/identifier.ts b/packages/css/src/identifier.ts
index e5baf006d..9b8b4b20d 100644
--- a/packages/css/src/identifier.ts
+++ b/packages/css/src/identifier.ts
@@ -1,5 +1,6 @@
 import hash from '@emotion/hash';
 
+import { getIdentOption } from './adapter';
 import { getAndIncrementRefCounter, getFileScope } from './fileScope';
 
 function getDevPrefix(debugId: string | undefined) {
@@ -29,7 +30,7 @@ export function generateIdentifier(debugId: string | undefined) {
 
   let identifier = `${fileScopeHash}${refCount}`;
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (getIdentOption() === 'debug') {
     const devPrefix = getDevPrefix(debugId);
 
     if (devPrefix) {
diff --git a/packages/css/src/runtimeAdapter.ts b/packages/css/src/runtimeAdapter.ts
index 3971e3c91..7e0b93878 100644
--- a/packages/css/src/runtimeAdapter.ts
+++ b/packages/css/src/runtimeAdapter.ts
@@ -67,6 +67,8 @@ const browserRuntimeAdapter: Adapter = {
 
     bufferedCSSObjs = [];
   },
+  getIdentOption: () =>
+    process.env.NODE_ENV === 'production' ? 'short' : 'debug',
 };
 
 if (typeof window !== 'undefined') {
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index ef4517234..040e597b8 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -102,12 +102,15 @@ export interface Composition {
   identifier: string;
   classList: string;
 }
+
+type IdentOption = 'short' | 'debug';
 export interface Adapter {
   appendCss: (css: CSS, fileScope: FileScope) => void;
   registerClassName: (className: string) => void;
   registerComposition: (composition: Composition) => void;
   markCompositionUsed: (identifier: string) => void;
   onEndFileScope: (fileScope: FileScope) => void;
+  getIdentOption: () => IdentOption;
 }
 
 export type NullableTokens = {
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
index 40d682a33..12ca5d857 100644
--- a/packages/css/src/vars.ts
+++ b/packages/css/src/vars.ts
@@ -11,6 +11,7 @@ import cssesc from 'cssesc';
 import { Tokens, NullableTokens, ThemeVars } from './types';
 import { getAndIncrementRefCounter, getFileScope } from './fileScope';
 import { validateContract } from './validateContract';
+import { getIdentOption } from './adapter';
 
 export function createVar(debugId?: string): CSSVarFunction {
   // Convert ref count to base 36 for optimal hash lengths
@@ -20,7 +21,7 @@ export function createVar(debugId?: string): CSSVarFunction {
     packageName ? `${packageName}${filePath}` : filePath,
   );
   const varName =
-    process.env.NODE_ENV !== 'production' && debugId
+    getIdentOption() === 'debug' && debugId
       ? `${debugId}__${fileScopeHash}${refCount}`
       : `${fileScopeHash}${refCount}`;
 
diff --git a/packages/esbuild-plugin/src/index.ts b/packages/esbuild-plugin/src/index.ts
index 1874b5dbd..bf33fda18 100644
--- a/packages/esbuild-plugin/src/index.ts
+++ b/packages/esbuild-plugin/src/index.ts
@@ -5,6 +5,7 @@ import {
   getSourceFromVirtualCssFile,
   compile,
   vanillaExtractFilescopePlugin,
+  IdentifierOption,
 } from '@vanilla-extract/integration';
 import type { Plugin } from 'esbuild';
 
@@ -15,12 +16,14 @@ interface VanillaExtractPluginOptions {
   externals?: Array<string>;
   runtime?: boolean;
   processCss?: (css: string) => Promise<string>;
+  identifiers?: IdentifierOption;
 }
 export function vanillaExtractPlugin({
   outputCss,
   externals = [],
   runtime = false,
   processCss,
+  identifiers,
 }: VanillaExtractPluginOptions = {}): Plugin {
   if (runtime) {
     // If using runtime CSS then just apply fileScopes to code
@@ -64,6 +67,8 @@ export function vanillaExtractPlugin({
           source,
           filePath: path,
           outputCss,
+          identOption:
+            identifiers ?? (build.initialOptions.minify ? 'short' : 'debug'),
         });
 
         return {
diff --git a/packages/integration/src/index.ts b/packages/integration/src/index.ts
index 6decd1f78..831f3e113 100644
--- a/packages/integration/src/index.ts
+++ b/packages/integration/src/index.ts
@@ -4,3 +4,5 @@ export { getPackageInfo } from './packageInfo';
 export { compile, vanillaExtractFilescopePlugin } from './compile';
 export { hash } from './hash';
 export * from './filters';
+
+export type { IdentifierOption } from './processVanillaFile';
diff --git a/packages/integration/src/processVanillaFile.ts b/packages/integration/src/processVanillaFile.ts
index d07879de4..6be072375 100644
--- a/packages/integration/src/processVanillaFile.ts
+++ b/packages/integration/src/processVanillaFile.ts
@@ -23,10 +23,13 @@ function parseFileScope(serialisedFileScope: string): FileScope {
   };
 }
 
+export type IdentifierOption = ReturnType<Adapter['getIdentOption']>;
+
 interface ProcessVanillaFileOptions {
   source: string;
   filePath: string;
   outputCss?: boolean;
+  identOption?: IdentifierOption;
   serializeVirtualCssPath?: (file: {
     fileName: string;
     base64Source: string;
@@ -37,6 +40,7 @@ export function processVanillaFile({
   source,
   filePath,
   outputCss = true,
+  identOption = process.env.NODE_ENV === 'production' ? 'short' : 'debug',
   serializeVirtualCssPath,
 }: ProcessVanillaFileOptions) {
   type Css = Parameters<Adapter['appendCss']>[0];
@@ -68,6 +72,7 @@ export function processVanillaFile({
       usedCompositions.add(identifier);
     },
     onEndFileScope: () => {},
+    getIdentOption: () => identOption,
   };
 
   setAdapter(cssAdapter);
diff --git a/packages/snowpack-plugin/src/index.ts b/packages/snowpack-plugin/src/index.ts
index b123f24f3..b5dc6cc4c 100644
--- a/packages/snowpack-plugin/src/index.ts
+++ b/packages/snowpack-plugin/src/index.ts
@@ -4,10 +4,15 @@ import {
   processVanillaFile,
   compile,
   getSourceFromVirtualCssFile,
+  IdentifierOption,
 } from '@vanilla-extract/integration';
 
+interface Options {
+  identifiers?: IdentifierOption;
+}
 export default function vanillaExtractPlugin(
   snowpackConfig: SnowpackConfig,
+  { identifiers }: Options = {},
 ): SnowpackPlugin {
   const importedByMap = new Map();
 
@@ -53,6 +58,9 @@ export default function vanillaExtractPlugin(
         source,
         filePath,
         outputCss: !isSSR,
+        identOption:
+          identifiers ??
+          (snowpackConfig.mode === 'production' ? 'short' : 'debug'),
         serializeVirtualCssPath({ base64Source, fileScope }) {
           const cssUrl = `${path.join(cwd, fileScope.filePath)}.css`;
 
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index 5c206c9f3..9b087897d 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -9,9 +9,13 @@ import {
   compile,
   hash,
   getPackageInfo,
+  IdentifierOption,
 } from '@vanilla-extract/integration';
 
-export function vanillaExtractPlugin(): Plugin {
+interface Options {
+  identifiers?: IdentifierOption;
+}
+export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
   let config: ResolvedConfig;
   let packageInfo: ReturnType<typeof getPackageInfo>;
   const cssMap = new Map<string, string>();
@@ -83,6 +87,8 @@ export function vanillaExtractPlugin(): Plugin {
         source,
         filePath: id,
         outputCss: !ssr,
+        identOption:
+          identifiers ?? (config.mode === 'production' ? 'short' : 'debug'),
       });
     },
   };
diff --git a/packages/webpack-plugin/src/index.ts b/packages/webpack-plugin/src/index.ts
index 182c1e9b1..2fd7fbe4c 100644
--- a/packages/webpack-plugin/src/index.ts
+++ b/packages/webpack-plugin/src/index.ts
@@ -1,4 +1,4 @@
-import { cssFileFilter } from '@vanilla-extract/integration';
+import { cssFileFilter, IdentifierOption } from '@vanilla-extract/integration';
 import path from 'path';
 import type { Compiler, RuleSetRule } from 'webpack';
 import chalk from 'chalk';
@@ -56,6 +56,7 @@ function markCSSFilesAsSideEffects(compiler: Compiler, compat: WebpackCompat) {
 
 interface PluginOptions {
   test?: RuleSetRule['test'];
+  identifiers?: IdentifierOption;
   outputCss?: boolean;
   externals?: any;
   /** @deprecated */
@@ -66,6 +67,7 @@ export class VanillaExtractPlugin {
   outputCss: boolean;
   allowRuntime: boolean;
   childCompiler: ChildCompiler;
+  identifiers?: IdentifierOption;
 
   constructor(options: PluginOptions = {}) {
     const {
@@ -73,6 +75,7 @@ export class VanillaExtractPlugin {
       outputCss = true,
       externals,
       allowRuntime,
+      identifiers,
     } = options;
 
     if (allowRuntime !== undefined) {
@@ -83,6 +86,7 @@ export class VanillaExtractPlugin {
     this.outputCss = outputCss;
     this.allowRuntime = allowRuntime ?? false;
     this.childCompiler = new ChildCompiler(externals);
+    this.identifiers = identifiers;
   }
 
   apply(compiler: Compiler) {
@@ -144,6 +148,7 @@ export class VanillaExtractPlugin {
           options: {
             outputCss: this.outputCss,
             childCompiler: this.childCompiler,
+            identifiers: this.identifiers,
           },
         },
       ],
diff --git a/packages/webpack-plugin/src/loader.ts b/packages/webpack-plugin/src/loader.ts
index 1c5e9f6fa..e68e1f0fd 100644
--- a/packages/webpack-plugin/src/loader.ts
+++ b/packages/webpack-plugin/src/loader.ts
@@ -1,7 +1,10 @@
 import path from 'path';
 // @ts-expect-error
 import loaderUtils from 'loader-utils';
-import { processVanillaFile } from '@vanilla-extract/integration';
+import {
+  IdentifierOption,
+  processVanillaFile,
+} from '@vanilla-extract/integration';
 
 import type { LoaderContext } from './types';
 import { debug, formatResourcePath } from './logger';
@@ -18,6 +21,7 @@ const emptyCssExtractionFile = require.resolve(
 
 interface LoaderOptions {
   outputCss: boolean;
+  identifiers?: IdentifierOption;
 }
 
 interface InternalLoaderOptions extends LoaderOptions {
@@ -31,7 +35,7 @@ export default function (this: LoaderContext, source: string) {
 
 export function pitch(this: LoaderContext) {
   this.cacheable(true);
-  const { childCompiler, outputCss } = loaderUtils.getOptions(
+  const { childCompiler, outputCss, identifiers } = loaderUtils.getOptions(
     this,
   ) as InternalLoaderOptions;
 
@@ -62,6 +66,8 @@ export function pitch(this: LoaderContext) {
         source,
         outputCss,
         filePath: this.resourcePath,
+        identOption:
+          identifiers ?? (this.mode === 'production' ? 'short' : 'debug'),
         serializeVirtualCssPath: ({ fileName, base64Source }) => {
           const virtualResourceLoader = `${require.resolve(
             'virtual-resource-loader',
diff --git a/packages/webpack-plugin/src/types.ts b/packages/webpack-plugin/src/types.ts
index 98433fb7c..49a7e079c 100644
--- a/packages/webpack-plugin/src/types.ts
+++ b/packages/webpack-plugin/src/types.ts
@@ -14,4 +14,5 @@ export interface LoaderContext {
   emitError: (error: Error) => void;
   _compiler: Compiler;
   _compilation: Compilation;
+  mode: 'production' | 'development' | 'none';
 }
diff --git a/site/docs/setup.md b/site/docs/setup.md
index b5ea95b55..8cea2110a 100644
--- a/site/docs/setup.md
+++ b/site/docs/setup.md
@@ -24,6 +24,8 @@ $ npm install @vanilla-extract/css @vanilla-extract/babel-plugin @vanilla-extrac
 
 3/ Add the [webpack](https://webpack.js.org) plugin.
 
+> 💡 This plugin accepts an optional [configuration object](#configuration).
+
 ```js
 // webpack.config.js
 
@@ -82,6 +84,8 @@ $ npm install @vanilla-extract/css @vanilla-extract/esbuild-plugin
 
 2/ Add the [esbuild](https://esbuild.github.io/) plugin to your build script.
 
+> 💡 This plugin accepts an optional [configuration object](#configuration).
+
 ```js
 // bundle.js
 
@@ -151,6 +155,8 @@ $ npm install @vanilla-extract/css @vanilla-extract/vite-plugin
 
 2/ Add the [Vite](https://vitejs.dev/) plugin to your Vite config.
 
+> 💡 This plugin accepts an optional [configuration object](#configuration).
+
 ```js
 // vite.config.js
 
@@ -173,6 +179,8 @@ $ npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin
 
 2/ Add the [Snowpack](https://www.snowpack.dev/) plugin to your snowpack config.
 
+> 💡 This plugin accepts an optional [configuration object](#configuration).
+
 ```js
 // snowpack.config.json
 {
@@ -210,3 +218,14 @@ In testing environments (like `jsdom`) vanilla-extract will create and insert st
 // setupTests.ts
 import '@vanilla-extract/css/disableRuntimeStyles';
 ```
+
+## Configuration
+
+### identifiers
+
+Different formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can be configured by selecting from the following options:
+
+- `short` identifiers are a 7+ character hash. e.g. `hnw5tz3`
+- `debug` identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. `myfile_mystyle_hnw5tz3`
+
+Each integration will set a default value based on the configuration options passed to the bundler.
diff --git a/test-helpers/src/startFixture/esbuild.ts b/test-helpers/src/startFixture/esbuild.ts
index 45249df9d..e93f7ac13 100644
--- a/test-helpers/src/startFixture/esbuild.ts
+++ b/test-helpers/src/startFixture/esbuild.ts
@@ -42,9 +42,6 @@ export const startEsbuildFixture = async (
       ],
       absWorkingDir,
       outdir,
-      define: {
-        'process.env.NODE_ENV': JSON.stringify(mode),
-      },
     },
   );
 
diff --git a/tests/E2E/__snapshots__/stylesheets.test.ts.snap b/tests/E2E/__snapshots__/stylesheets.test.ts.snap
index 94d945af4..644ab55d6 100644
--- a/tests/E2E/__snapshots__/stylesheets.test.ts.snap
+++ b/tests/E2E/__snapshots__/stylesheets.test.ts.snap
@@ -1,153 +1,153 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Stylesheet sprinkles - esbuild should create valid stylesheet 1`] = `
-".styles_display_flex_mobile__1j5zl922{display:flex}.styles_display_none_mobile__1j5zl926{display:none}.styles_display_block_mobile__1j5zl92a{display:block}.styles_paddingTop_small_mobile__1j5zl92e{padding-top:10px}.styles_paddingTop_medium_mobile__1j5zl92i{padding-top:20px}.styles_background_red_mobile__1j5zl92m{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_mobile__1j5zl92q{--_1j5zl920: 1}.styles_backgroundOpacity_0\\\\.1_mobile__1j5zl92u{--_1j5zl920: .1}.styles_backgroundOpacity_0\\\\.2_mobile__1j5zl92y{--_1j5zl920: .2}.styles_backgroundOpacity_0\\\\.3_mobile__1j5zl9212{--_1j5zl920: .3}.styles_color_red__1j5zl9216{--_1j5zl921: 1;color:rgba(255,0,0,var(--_1j5zl921))}.styles_textOpacity_1__1j5zl9217{--_1j5zl921: 1}.styles_textOpacity_0\\\\.8__1j5zl9218{--_1j5zl921: .8}body>.styles__1j5zl921a{background:red}@media screen and (min-width: 768px){.styles_display_flex_tablet__1j5zl923{display:flex}.styles_display_none_tablet__1j5zl927{display:none}.styles_display_block_tablet__1j5zl92b{display:block}.styles_paddingTop_small_tablet__1j5zl92f{padding-top:10px}.styles_paddingTop_medium_tablet__1j5zl92j{padding-top:20px}.styles_background_red_tablet__1j5zl92n{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_tablet__1j5zl92r{--_1j5zl920: 1}.styles_backgroundOpacity_0\\\\.1_tablet__1j5zl92v{--_1j5zl920: .1}.styles_backgroundOpacity_0\\\\.2_tablet__1j5zl92z{--_1j5zl920: .2}.styles_backgroundOpacity_0\\\\.3_tablet__1j5zl9213{--_1j5zl920: .3}}@media screen and (min-width: 1024px){.styles_display_flex_desktop__1j5zl924{display:flex}.styles_display_none_desktop__1j5zl928{display:none}.styles_display_block_desktop__1j5zl92c{display:block}.styles_paddingTop_small_desktop__1j5zl92g{padding-top:10px}.styles_paddingTop_medium_desktop__1j5zl92k{padding-top:20px}.styles_background_red_desktop__1j5zl92o{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_desktop__1j5zl92s{--_1j5zl920: 1}.styles_backgroundOpacity_0\\\\.1_desktop__1j5zl92w{--_1j5zl920: .1}.styles_backgroundOpacity_0\\\\.2_desktop__1j5zl9210{--_1j5zl920: .2}.styles_backgroundOpacity_0\\\\.3_desktop__1j5zl9214{--_1j5zl920: .3}@supports not (display: grid){[data-dark-mode] .styles_display_flex_darkDesktop__1j5zl925{display:flex}[data-dark-mode] .styles_display_none_darkDesktop__1j5zl929{display:none}[data-dark-mode] .styles_display_block_darkDesktop__1j5zl92d{display:block}[data-dark-mode] .styles_paddingTop_small_darkDesktop__1j5zl92h{padding-top:10px}[data-dark-mode] .styles_paddingTop_medium_darkDesktop__1j5zl92l{padding-top:20px}[data-dark-mode] .styles_background_red_darkDesktop__1j5zl92p{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}[data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__1j5zl92t{--_1j5zl920: 1}[data-dark-mode] .styles_backgroundOpacity_0\\\\.1_darkDesktop__1j5zl92x{--_1j5zl920: .1}[data-dark-mode] .styles_backgroundOpacity_0\\\\.2_darkDesktop__1j5zl9211{--_1j5zl920: .2}[data-dark-mode] .styles_backgroundOpacity_0\\\\.3_darkDesktop__1j5zl9215{--_1j5zl920: .3}}}
+"._1j5zl922{display:flex}._1j5zl926{display:none}._1j5zl92a{display:block}._1j5zl92e{padding-top:10px}._1j5zl92i{padding-top:20px}._1j5zl92m{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}._1j5zl92q{--_1j5zl920: 1}._1j5zl92u{--_1j5zl920: .1}._1j5zl92y{--_1j5zl920: .2}._1j5zl9212{--_1j5zl920: .3}._1j5zl9216{--_1j5zl921: 1;color:rgba(255,0,0,var(--_1j5zl921))}._1j5zl9217{--_1j5zl921: 1}._1j5zl9218{--_1j5zl921: .8}body>._1j5zl921a{background:red}@media screen and (min-width: 768px){._1j5zl923{display:flex}._1j5zl927{display:none}._1j5zl92b{display:block}._1j5zl92f{padding-top:10px}._1j5zl92j{padding-top:20px}._1j5zl92n{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}._1j5zl92r{--_1j5zl920: 1}._1j5zl92v{--_1j5zl920: .1}._1j5zl92z{--_1j5zl920: .2}._1j5zl9213{--_1j5zl920: .3}}@media screen and (min-width: 1024px){._1j5zl924{display:flex}._1j5zl928{display:none}._1j5zl92c{display:block}._1j5zl92g{padding-top:10px}._1j5zl92k{padding-top:20px}._1j5zl92o{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}._1j5zl92s{--_1j5zl920: 1}._1j5zl92w{--_1j5zl920: .1}._1j5zl9210{--_1j5zl920: .2}._1j5zl9214{--_1j5zl920: .3}@supports not (display: grid){[data-dark-mode] ._1j5zl925{display:flex}[data-dark-mode] ._1j5zl929{display:none}[data-dark-mode] ._1j5zl92d{display:block}[data-dark-mode] ._1j5zl92h{padding-top:10px}[data-dark-mode] ._1j5zl92l{padding-top:20px}[data-dark-mode] ._1j5zl92p{--_1j5zl920: 1;background:rgba(255,0,0,var(--_1j5zl920))}[data-dark-mode] ._1j5zl92t{--_1j5zl920: 1}[data-dark-mode] ._1j5zl92x{--_1j5zl920: .1}[data-dark-mode] ._1j5zl9211{--_1j5zl920: .2}[data-dark-mode] ._1j5zl9215{--_1j5zl920: .3}}}
 "
 `;
 
-exports[`Stylesheet sprinkles - vite should create valid stylesheet 1`] = `".styles_display_flex_mobile__1j5zl922{display:flex}.styles_display_none_mobile__1j5zl926{display:none}.styles_display_block_mobile__1j5zl92a{display:block}.styles_paddingTop_small_mobile__1j5zl92e{padding-top:10px}.styles_paddingTop_medium_mobile__1j5zl92i{padding-top:20px}.styles_background_red_mobile__1j5zl92m{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_mobile__1j5zl92q{--_1j5zl920:1}.styles_backgroundOpacity_0\\\\.1_mobile__1j5zl92u{--_1j5zl920:0.1}.styles_backgroundOpacity_0\\\\.2_mobile__1j5zl92y{--_1j5zl920:0.2}.styles_backgroundOpacity_0\\\\.3_mobile__1j5zl9212{--_1j5zl920:0.3}.styles_color_red__1j5zl9216{--_1j5zl921:1;color:rgba(255,0,0,var(--_1j5zl921))}.styles_textOpacity_1__1j5zl9217{--_1j5zl921:1}.styles_textOpacity_0\\\\.8__1j5zl9218{--_1j5zl921:0.8}body>.styles__1j5zl921a{background:red}@media screen and (min-width:768px){.styles_display_flex_tablet__1j5zl923{display:flex}.styles_display_none_tablet__1j5zl927{display:none}.styles_display_block_tablet__1j5zl92b{display:block}.styles_paddingTop_small_tablet__1j5zl92f{padding-top:10px}.styles_paddingTop_medium_tablet__1j5zl92j{padding-top:20px}.styles_background_red_tablet__1j5zl92n{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_tablet__1j5zl92r{--_1j5zl920:1}.styles_backgroundOpacity_0\\\\.1_tablet__1j5zl92v{--_1j5zl920:0.1}.styles_backgroundOpacity_0\\\\.2_tablet__1j5zl92z{--_1j5zl920:0.2}.styles_backgroundOpacity_0\\\\.3_tablet__1j5zl9213{--_1j5zl920:0.3}}@media screen and (min-width:1024px){.styles_display_flex_desktop__1j5zl924{display:flex}.styles_display_none_desktop__1j5zl928{display:none}.styles_display_block_desktop__1j5zl92c{display:block}.styles_paddingTop_small_desktop__1j5zl92g{padding-top:10px}.styles_paddingTop_medium_desktop__1j5zl92k{padding-top:20px}.styles_background_red_desktop__1j5zl92o{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}.styles_backgroundOpacity_1_desktop__1j5zl92s{--_1j5zl920:1}.styles_backgroundOpacity_0\\\\.1_desktop__1j5zl92w{--_1j5zl920:0.1}.styles_backgroundOpacity_0\\\\.2_desktop__1j5zl9210{--_1j5zl920:0.2}.styles_backgroundOpacity_0\\\\.3_desktop__1j5zl9214{--_1j5zl920:0.3}@supports not (display:grid){[data-dark-mode] .styles_display_flex_darkDesktop__1j5zl925{display:flex}[data-dark-mode] .styles_display_none_darkDesktop__1j5zl929{display:none}[data-dark-mode] .styles_display_block_darkDesktop__1j5zl92d{display:block}[data-dark-mode] .styles_paddingTop_small_darkDesktop__1j5zl92h{padding-top:10px}[data-dark-mode] .styles_paddingTop_medium_darkDesktop__1j5zl92l{padding-top:20px}[data-dark-mode] .styles_background_red_darkDesktop__1j5zl92p{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}[data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__1j5zl92t{--_1j5zl920:1}[data-dark-mode] .styles_backgroundOpacity_0\\\\.1_darkDesktop__1j5zl92x{--_1j5zl920:0.1}[data-dark-mode] .styles_backgroundOpacity_0\\\\.2_darkDesktop__1j5zl9211{--_1j5zl920:0.2}[data-dark-mode] .styles_backgroundOpacity_0\\\\.3_darkDesktop__1j5zl9215{--_1j5zl920:0.3}}}"`;
+exports[`Stylesheet sprinkles - vite should create valid stylesheet 1`] = `"._1j5zl922{display:flex}._1j5zl926{display:none}._1j5zl92a{display:block}._1j5zl92e{padding-top:10px}._1j5zl92i{padding-top:20px}._1j5zl92m{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}._1j5zl92q{--_1j5zl920:1}._1j5zl92u{--_1j5zl920:0.1}._1j5zl92y{--_1j5zl920:0.2}._1j5zl9212{--_1j5zl920:0.3}._1j5zl9216{--_1j5zl921:1;color:rgba(255,0,0,var(--_1j5zl921))}._1j5zl9217{--_1j5zl921:1}._1j5zl9218{--_1j5zl921:0.8}body>._1j5zl921a{background:red}@media screen and (min-width:768px){._1j5zl923{display:flex}._1j5zl927{display:none}._1j5zl92b{display:block}._1j5zl92f{padding-top:10px}._1j5zl92j{padding-top:20px}._1j5zl92n{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}._1j5zl92r{--_1j5zl920:1}._1j5zl92v{--_1j5zl920:0.1}._1j5zl92z{--_1j5zl920:0.2}._1j5zl9213{--_1j5zl920:0.3}}@media screen and (min-width:1024px){._1j5zl924{display:flex}._1j5zl928{display:none}._1j5zl92c{display:block}._1j5zl92g{padding-top:10px}._1j5zl92k{padding-top:20px}._1j5zl92o{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}._1j5zl92s{--_1j5zl920:1}._1j5zl92w{--_1j5zl920:0.1}._1j5zl9210{--_1j5zl920:0.2}._1j5zl9214{--_1j5zl920:0.3}@supports not (display:grid){[data-dark-mode] ._1j5zl925{display:flex}[data-dark-mode] ._1j5zl929{display:none}[data-dark-mode] ._1j5zl92d{display:block}[data-dark-mode] ._1j5zl92h{padding-top:10px}[data-dark-mode] ._1j5zl92l{padding-top:20px}[data-dark-mode] ._1j5zl92p{--_1j5zl920:1;background:rgba(255,0,0,var(--_1j5zl920))}[data-dark-mode] ._1j5zl92t{--_1j5zl920:1}[data-dark-mode] ._1j5zl92x{--_1j5zl920:0.1}[data-dark-mode] ._1j5zl9211{--_1j5zl920:0.2}[data-dark-mode] ._1j5zl9215{--_1j5zl920:0.3}}}"`;
 
 exports[`Stylesheet sprinkles - webpack should create valid stylesheet 1`] = `
-".styles_display_flex_mobile__3nw5tz2 {
+"._3nw5tz2 {
   display: flex;
 }
-.styles_display_none_mobile__3nw5tz6 {
+._3nw5tz6 {
   display: none;
 }
-.styles_display_block_mobile__3nw5tza {
+._3nw5tza {
   display: block;
 }
-.styles_paddingTop_small_mobile__3nw5tze {
+._3nw5tze {
   padding-top: 10px;
 }
-.styles_paddingTop_medium_mobile__3nw5tzi {
+._3nw5tzi {
   padding-top: 20px;
 }
-.styles_background_red_mobile__3nw5tzm {
-  --alpha__3nw5tz0: 1;
-  background: rgba(255, 0, 0, var(--alpha__3nw5tz0));
+._3nw5tzm {
+  --_3nw5tz0: 1;
+  background: rgba(255, 0, 0, var(--_3nw5tz0));
 }
-.styles_backgroundOpacity_1_mobile__3nw5tzq {
-  --alpha__3nw5tz0: 1;
+._3nw5tzq {
+  --_3nw5tz0: 1;
 }
-.styles_backgroundOpacity_0\\\\.1_mobile__3nw5tzu {
-  --alpha__3nw5tz0: 0.1;
+._3nw5tzu {
+  --_3nw5tz0: 0.1;
 }
-.styles_backgroundOpacity_0\\\\.2_mobile__3nw5tzy {
-  --alpha__3nw5tz0: 0.2;
+._3nw5tzy {
+  --_3nw5tz0: 0.2;
 }
-.styles_backgroundOpacity_0\\\\.3_mobile__3nw5tz12 {
-  --alpha__3nw5tz0: 0.3;
+._3nw5tz12 {
+  --_3nw5tz0: 0.3;
 }
-.styles_color_red__3nw5tz16 {
-  --textAlpha__3nw5tz1: 1;
-  color: rgba(255, 0, 0, var(--textAlpha__3nw5tz1));
+._3nw5tz16 {
+  --_3nw5tz1: 1;
+  color: rgba(255, 0, 0, var(--_3nw5tz1));
 }
-.styles_textOpacity_1__3nw5tz17 {
-  --textAlpha__3nw5tz1: 1;
+._3nw5tz17 {
+  --_3nw5tz1: 1;
 }
-.styles_textOpacity_0\\\\.8__3nw5tz18 {
-  --textAlpha__3nw5tz1: 0.8;
+._3nw5tz18 {
+  --_3nw5tz1: 0.8;
 }
-body > .styles__3nw5tz1a {
+body > ._3nw5tz1a {
   background: red;
 }
 @media screen and (min-width: 768px) {
-  .styles_display_flex_tablet__3nw5tz3 {
+  ._3nw5tz3 {
     display: flex;
   }
-  .styles_display_none_tablet__3nw5tz7 {
+  ._3nw5tz7 {
     display: none;
   }
-  .styles_display_block_tablet__3nw5tzb {
+  ._3nw5tzb {
     display: block;
   }
-  .styles_paddingTop_small_tablet__3nw5tzf {
+  ._3nw5tzf {
     padding-top: 10px;
   }
-  .styles_paddingTop_medium_tablet__3nw5tzj {
+  ._3nw5tzj {
     padding-top: 20px;
   }
-  .styles_background_red_tablet__3nw5tzn {
-    --alpha__3nw5tz0: 1;
-    background: rgba(255, 0, 0, var(--alpha__3nw5tz0));
+  ._3nw5tzn {
+    --_3nw5tz0: 1;
+    background: rgba(255, 0, 0, var(--_3nw5tz0));
   }
-  .styles_backgroundOpacity_1_tablet__3nw5tzr {
-    --alpha__3nw5tz0: 1;
+  ._3nw5tzr {
+    --_3nw5tz0: 1;
   }
-  .styles_backgroundOpacity_0\\\\.1_tablet__3nw5tzv {
-    --alpha__3nw5tz0: 0.1;
+  ._3nw5tzv {
+    --_3nw5tz0: 0.1;
   }
-  .styles_backgroundOpacity_0\\\\.2_tablet__3nw5tzz {
-    --alpha__3nw5tz0: 0.2;
+  ._3nw5tzz {
+    --_3nw5tz0: 0.2;
   }
-  .styles_backgroundOpacity_0\\\\.3_tablet__3nw5tz13 {
-    --alpha__3nw5tz0: 0.3;
+  ._3nw5tz13 {
+    --_3nw5tz0: 0.3;
   }
 }
 @media screen and (min-width: 1024px) {
-  .styles_display_flex_desktop__3nw5tz4 {
+  ._3nw5tz4 {
     display: flex;
   }
-  .styles_display_none_desktop__3nw5tz8 {
+  ._3nw5tz8 {
     display: none;
   }
-  .styles_display_block_desktop__3nw5tzc {
+  ._3nw5tzc {
     display: block;
   }
-  .styles_paddingTop_small_desktop__3nw5tzg {
+  ._3nw5tzg {
     padding-top: 10px;
   }
-  .styles_paddingTop_medium_desktop__3nw5tzk {
+  ._3nw5tzk {
     padding-top: 20px;
   }
-  .styles_background_red_desktop__3nw5tzo {
-    --alpha__3nw5tz0: 1;
-    background: rgba(255, 0, 0, var(--alpha__3nw5tz0));
+  ._3nw5tzo {
+    --_3nw5tz0: 1;
+    background: rgba(255, 0, 0, var(--_3nw5tz0));
   }
-  .styles_backgroundOpacity_1_desktop__3nw5tzs {
-    --alpha__3nw5tz0: 1;
+  ._3nw5tzs {
+    --_3nw5tz0: 1;
   }
-  .styles_backgroundOpacity_0\\\\.1_desktop__3nw5tzw {
-    --alpha__3nw5tz0: 0.1;
+  ._3nw5tzw {
+    --_3nw5tz0: 0.1;
   }
-  .styles_backgroundOpacity_0\\\\.2_desktop__3nw5tz10 {
-    --alpha__3nw5tz0: 0.2;
+  ._3nw5tz10 {
+    --_3nw5tz0: 0.2;
   }
-  .styles_backgroundOpacity_0\\\\.3_desktop__3nw5tz14 {
-    --alpha__3nw5tz0: 0.3;
+  ._3nw5tz14 {
+    --_3nw5tz0: 0.3;
   }
   @supports not (display: grid) {
-    [data-dark-mode] .styles_display_flex_darkDesktop__3nw5tz5 {
+    [data-dark-mode] ._3nw5tz5 {
       display: flex;
     }
-    [data-dark-mode] .styles_display_none_darkDesktop__3nw5tz9 {
+    [data-dark-mode] ._3nw5tz9 {
       display: none;
     }
-    [data-dark-mode] .styles_display_block_darkDesktop__3nw5tzd {
+    [data-dark-mode] ._3nw5tzd {
       display: block;
     }
-    [data-dark-mode] .styles_paddingTop_small_darkDesktop__3nw5tzh {
+    [data-dark-mode] ._3nw5tzh {
       padding-top: 10px;
     }
-    [data-dark-mode] .styles_paddingTop_medium_darkDesktop__3nw5tzl {
+    [data-dark-mode] ._3nw5tzl {
       padding-top: 20px;
     }
-    [data-dark-mode] .styles_background_red_darkDesktop__3nw5tzp {
-      --alpha__3nw5tz0: 1;
-      background: rgba(255, 0, 0, var(--alpha__3nw5tz0));
+    [data-dark-mode] ._3nw5tzp {
+      --_3nw5tz0: 1;
+      background: rgba(255, 0, 0, var(--_3nw5tz0));
     }
-    [data-dark-mode] .styles_backgroundOpacity_1_darkDesktop__3nw5tzt {
-      --alpha__3nw5tz0: 1;
+    [data-dark-mode] ._3nw5tzt {
+      --_3nw5tz0: 1;
     }
-    [data-dark-mode] .styles_backgroundOpacity_0\\\\.1_darkDesktop__3nw5tzx {
-      --alpha__3nw5tz0: 0.1;
+    [data-dark-mode] ._3nw5tzx {
+      --_3nw5tz0: 0.1;
     }
-    [data-dark-mode] .styles_backgroundOpacity_0\\\\.2_darkDesktop__3nw5tz11 {
-      --alpha__3nw5tz0: 0.2;
+    [data-dark-mode] ._3nw5tz11 {
+      --_3nw5tz0: 0.2;
     }
-    [data-dark-mode] .styles_backgroundOpacity_0\\\\.3_darkDesktop__3nw5tz15 {
-      --alpha__3nw5tz0: 0.3;
+    [data-dark-mode] ._3nw5tz15 {
+      --_3nw5tz0: 0.3;
     }
   }
 }
@@ -156,41 +156,41 @@ body > .styles__3nw5tz1a {
 `;
 
 exports[`Stylesheet themed - esbuild should create valid stylesheet 1`] = `
-":root,.themes__cvta170{--colors-backgroundColor__cvta171: blue;--colors-text__cvta172: white;--space-1__cvta173: 4px;--space-2__cvta174: 8px;--space-3__cvta175: 12px}.themes__cvta176{--colors-backgroundColor__cvta171: green;--colors-text__cvta172: white;--space-1__cvta173: 8px;--space-2__cvta174: 12px;--space-3__cvta175: 16px}.themes__cvta177{--colors-backgroundColor__cvta171: pink;--colors-text__cvta172: purple;--space-1__cvta173: 6px;--space-2__cvta174: 12px;--space-3__cvta175: 18px}@media screen and (min-width: 768px){.themes__cvta177{--colors-backgroundColor__cvta171: purple;--colors-text__cvta172: pink}}.shared__4dtfen0{box-shadow:0 0 5px red}body{background-color:#87ceeb}@font-face{src:local(\\"Impact\\");font-family:\\"styles__jteyb10\\"}@font-face{src:local(\\"Comic Sans MS\\");font-family:MyGlobalComicSans}@keyframes styles__jteyb11{0%{transform:translateY(-4px)}to{transform:translateY(4px)}}@keyframes globalSlide{0%{transform:translateY(-4px)}to{transform:translateY(4px)}}.styles__jteyb12{animation:3s infinite alternate globalSlide ease-in-out;display:flex;flex-direction:column;gap:var(--space-2__cvta174);padding:var(--space-3__cvta175)}.styles__jteyb13{z-index:1}.styles__jteyb14{position:relative}.styles__jteyb16{font-family:\\"styles__jteyb10\\";background-color:var(--colors-backgroundColor__cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\");color:var(--colors-text__cvta172);border-radius:9999px}.themes__cvta176 .themes__cvta170 .styles__jteyb12 .styles__jteyb16{font-family:MyGlobalComicSans;outline:5px solid red}body .styles__jteyb15{animation:3s infinite alternate styles__jteyb11 ease-in-out}html .styles_1\\\\/2__jteyb1a{opacity:var(--jteyb18, .5)}html .styles_1\\\\/4__jteyb1b{opacity:var(--jteyb18, var(--jteyb19, .25))}@media only screen and (min-width: 500px){.styles__jteyb12{border:1px solid var(--colors-backgroundColor__cvta171)}.styles__jteyb16{padding:var(--space-1__cvta173)}}@media only screen and (min-width: 1000px){.styles__jteyb16{padding:var(--space-2__cvta174)}}
+":root,.cvta170{--cvta171: blue;--cvta172: white;--cvta173: 4px;--cvta174: 8px;--cvta175: 12px}.cvta176{--cvta171: green;--cvta172: white;--cvta173: 8px;--cvta174: 12px;--cvta175: 16px}.cvta177{--cvta171: pink;--cvta172: purple;--cvta173: 6px;--cvta174: 12px;--cvta175: 18px}@media screen and (min-width: 768px){.cvta177{--cvta171: purple;--cvta172: pink}}._4dtfen0{box-shadow:0 0 5px red}body{background-color:#87ceeb}@font-face{src:local(\\"Impact\\");font-family:\\"jteyb10\\"}@font-face{src:local(\\"Comic Sans MS\\");font-family:MyGlobalComicSans}@keyframes jteyb11{0%{transform:translateY(-4px)}to{transform:translateY(4px)}}@keyframes globalSlide{0%{transform:translateY(-4px)}to{transform:translateY(4px)}}.jteyb12{animation:3s infinite alternate globalSlide ease-in-out;display:flex;flex-direction:column;gap:var(--cvta174);padding:var(--cvta175)}.jteyb13{z-index:1}.jteyb14{position:relative}.jteyb16{font-family:\\"jteyb10\\";background-color:var(--cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\");color:var(--cvta172);border-radius:9999px}.cvta176 .cvta170 .jteyb12 .jteyb16{font-family:MyGlobalComicSans;outline:5px solid red}body .jteyb15{animation:3s infinite alternate jteyb11 ease-in-out}html .jteyb1a{opacity:var(--jteyb18, .5)}html .jteyb1b{opacity:var(--jteyb18, var(--jteyb19, .25))}@media only screen and (min-width: 500px){.jteyb12{border:1px solid var(--cvta171)}.jteyb16{padding:var(--cvta173)}}@media only screen and (min-width: 1000px){.jteyb16{padding:var(--cvta174)}}
 "
 `;
 
-exports[`Stylesheet themed - vite should create valid stylesheet 1`] = `".themes__cvta170,:root{--colors-backgroundColor__cvta171:blue;--colors-text__cvta172:white;--space-1__cvta173:4px;--space-2__cvta174:8px;--space-3__cvta175:12px}.themes__cvta176{--colors-backgroundColor__cvta171:green;--colors-text__cvta172:white;--space-1__cvta173:8px;--space-2__cvta174:12px;--space-3__cvta175:16px}.themes__cvta177{--colors-backgroundColor__cvta171:pink;--colors-text__cvta172:purple;--space-1__cvta173:6px;--space-2__cvta174:12px;--space-3__cvta175:18px}@media screen and (min-width:768px){.themes__cvta177{--colors-backgroundColor__cvta171:purple;--colors-text__cvta172:pink}}.shared__4dtfen0{box-shadow:0 0 5px red}body{background-color:#87ceeb}@font-face{src:local(\\"Impact\\");font-family:styles__jteyb10}@font-face{src:local(\\"Comic Sans MS\\");font-family:MyGlobalComicSans}@keyframes styles__jteyb11{0%{transform:translateY(-4px)}100%{transform:translateY(4px)}}@keyframes globalSlide{0%{transform:translateY(-4px)}100%{transform:translateY(4px)}}.styles__jteyb12{animation:3s infinite alternate globalSlide ease-in-out;display:flex;flex-direction:column;gap:var(--space-2__cvta174);padding:var(--space-3__cvta175)}.styles__jteyb13{z-index:1}.styles__jteyb14{position:relative}.styles__jteyb16{font-family:styles__jteyb10;background-color:var(--colors-backgroundColor__cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\");color:var(--colors-text__cvta172);border-radius:9999px}.themes__cvta176 .themes__cvta170 .styles__jteyb12 .styles__jteyb16{font-family:MyGlobalComicSans;outline:5px solid red}body .styles__jteyb15{animation:3s infinite alternate styles__jteyb11 ease-in-out}html .styles_1\\\\/2__jteyb1a{opacity:var(--jteyb18,.5)}html .styles_1\\\\/4__jteyb1b{opacity:var(--jteyb18,var(--jteyb19,.25))}@media only screen and (min-width:500px){.styles__jteyb12{border:1px solid var(--colors-backgroundColor__cvta171)}.styles__jteyb16{padding:var(--space-1__cvta173)}}@media only screen and (min-width:1000px){.styles__jteyb16{padding:var(--space-2__cvta174)}}"`;
+exports[`Stylesheet themed - vite should create valid stylesheet 1`] = `".cvta170,:root{--cvta171:blue;--cvta172:white;--cvta173:4px;--cvta174:8px;--cvta175:12px}.cvta176{--cvta171:green;--cvta172:white;--cvta173:8px;--cvta174:12px;--cvta175:16px}.cvta177{--cvta171:pink;--cvta172:purple;--cvta173:6px;--cvta174:12px;--cvta175:18px}@media screen and (min-width:768px){.cvta177{--cvta171:purple;--cvta172:pink}}._4dtfen0{box-shadow:0 0 5px red}body{background-color:#87ceeb}@font-face{src:local(\\"Impact\\");font-family:jteyb10}@font-face{src:local(\\"Comic Sans MS\\");font-family:MyGlobalComicSans}@keyframes jteyb11{0%{transform:translateY(-4px)}100%{transform:translateY(4px)}}@keyframes globalSlide{0%{transform:translateY(-4px)}100%{transform:translateY(4px)}}.jteyb12{animation:3s infinite alternate globalSlide ease-in-out;display:flex;flex-direction:column;gap:var(--cvta174);padding:var(--cvta175)}.jteyb13{z-index:1}.jteyb14{position:relative}.jteyb16{font-family:jteyb10;background-color:var(--cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\");color:var(--cvta172);border-radius:9999px}.cvta176 .cvta170 .jteyb12 .jteyb16{font-family:MyGlobalComicSans;outline:5px solid red}body .jteyb15{animation:3s infinite alternate jteyb11 ease-in-out}html .jteyb1a{opacity:var(--jteyb18,.5)}html .jteyb1b{opacity:var(--jteyb18,var(--jteyb19,.25))}@media only screen and (min-width:500px){.jteyb12{border:1px solid var(--cvta171)}.jteyb16{padding:var(--cvta173)}}@media only screen and (min-width:1000px){.jteyb16{padding:var(--cvta174)}}"`;
 
 exports[`Stylesheet themed - webpack should create valid stylesheet 1`] = `
-":root, .themes_theme__cdwe0v0 {
-  --colors-backgroundColor__cdwe0v1: blue;
-  --colors-text__cdwe0v2: white;
-  --space-1__cdwe0v3: 4px;
-  --space-2__cdwe0v4: 8px;
-  --space-3__cdwe0v5: 12px;
-}
-.themes_altTheme__cdwe0v6 {
-  --colors-backgroundColor__cdwe0v1: green;
-  --colors-text__cdwe0v2: white;
-  --space-1__cdwe0v3: 8px;
-  --space-2__cdwe0v4: 12px;
-  --space-3__cdwe0v5: 16px;
-}
-.themes_responsiveTheme__cdwe0v7 {
-  --colors-backgroundColor__cdwe0v1: pink;
-  --colors-text__cdwe0v2: purple;
-  --space-1__cdwe0v3: 6px;
-  --space-2__cdwe0v4: 12px;
-  --space-3__cdwe0v5: 18px;
+":root, .cdwe0v0 {
+  --cdwe0v1: blue;
+  --cdwe0v2: white;
+  --cdwe0v3: 4px;
+  --cdwe0v4: 8px;
+  --cdwe0v5: 12px;
+}
+.cdwe0v6 {
+  --cdwe0v1: green;
+  --cdwe0v2: white;
+  --cdwe0v3: 8px;
+  --cdwe0v4: 12px;
+  --cdwe0v5: 16px;
+}
+.cdwe0v7 {
+  --cdwe0v1: pink;
+  --cdwe0v2: purple;
+  --cdwe0v3: 6px;
+  --cdwe0v4: 12px;
+  --cdwe0v5: 18px;
 }
 @media screen and (min-width: 768px) {
-  .themes_responsiveTheme__cdwe0v7 {
-    --colors-backgroundColor__cdwe0v1: purple;
-    --colors-text__cdwe0v2: pink;
+  .cdwe0v7 {
+    --cdwe0v1: purple;
+    --cdwe0v2: pink;
   }
 }
-.shared_shadow__5iqv0q0 {
+._5iqv0q0 {
   box-shadow: 0 0 5px red;
 }
 body {
@@ -198,13 +198,13 @@ body {
 }
 @font-face {
   src: local(\\"Impact\\");
-  font-family: \\"styles_impact__blj6yb0\\";
+  font-family: \\"blj6yb0\\";
 }
 @font-face {
   src: local(\\"Comic Sans MS\\");
   font-family: MyGlobalComicSans;
 }
-@keyframes styles_slide__blj6yb1 {
+@keyframes blj6yb1 {
   0% {
     transform: translateY(-4px);
   }
@@ -220,49 +220,49 @@ body {
     transform: translateY(4px);
   }
 }
-.styles_container__blj6yb2 {
+.blj6yb2 {
   animation: 3s infinite alternate globalSlide ease-in-out;
   display: flex;
   flex-direction: column;
-  gap: var(--space-2__cdwe0v4);
-  padding: var(--space-3__cdwe0v5);
+  gap: var(--cdwe0v4);
+  padding: var(--cdwe0v5);
 }
-.styles_iDunno__blj6yb3 {
+.blj6yb3 {
   z-index: 1;
 }
-.styles_iDunno__blj6yb4 {
+.blj6yb4 {
   position: relative;
 }
-.styles_button__blj6yb6 {
-  font-family: \\"styles_impact__blj6yb0\\";
-  background-color: var(--colors-backgroundColor__cdwe0v1, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\");
-  color: var(--colors-text__cdwe0v2);
+.blj6yb6 {
+  font-family: \\"blj6yb0\\";
+  background-color: var(--cdwe0v1, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\");
+  color: var(--cdwe0v2);
   border-radius: 9999px;
 }
-.themes_altTheme__cdwe0v6 .themes_theme__cdwe0v0 .styles_container__blj6yb2 .styles_button__blj6yb6 {
+.cdwe0v6 .cdwe0v0 .blj6yb2 .blj6yb6 {
   font-family: MyGlobalComicSans;
   outline: 5px solid red;
 }
-body .styles__blj6yb5 {
-  animation: 3s infinite alternate styles_slide__blj6yb1 ease-in-out;
+body .blj6yb5 {
+  animation: 3s infinite alternate blj6yb1 ease-in-out;
 }
-html .styles_opacity_1\\\\/2__blj6yba {
-  opacity: var(--blankVar1__blj6yb8, 0.5);
+html .blj6yba {
+  opacity: var(--blj6yb8, 0.5);
 }
-html .styles_opacity_1\\\\/4__blj6ybb {
-  opacity: var(--blankVar1__blj6yb8, var(--blankVar2__blj6yb9, 0.25));
+html .blj6ybb {
+  opacity: var(--blj6yb8, var(--blj6yb9, 0.25));
 }
 @media only screen and (min-width: 500px) {
-  .styles_container__blj6yb2 {
-    border: 1px solid var(--colors-backgroundColor__cdwe0v1);
+  .blj6yb2 {
+    border: 1px solid var(--cdwe0v1);
   }
-  .styles_button__blj6yb6 {
-    padding: var(--space-1__cdwe0v3);
+  .blj6yb6 {
+    padding: var(--cdwe0v3);
   }
 }
 @media only screen and (min-width: 1000px) {
-  .styles_button__blj6yb6 {
-    padding: var(--space-2__cdwe0v4);
+  .blj6yb6 {
+    padding: var(--cdwe0v4);
   }
 }
 
@@ -270,26 +270,26 @@ html .styles_opacity_1\\\\/4__blj6ybb {
 `;
 
 exports[`Stylesheet unused-modules - esbuild should create valid stylesheet 1`] = `
-"body{background-color:#e6e6fa}body{border:5px solid black}.shared__fbihc60{display:flex}.used__36o3zb0{height:100px;width:100px;background:green}.reset__1j78ztq0{box-sizing:border-box}
+"body{background-color:#e6e6fa}body{border:5px solid black}.fbihc60{display:flex}._36o3zb0{height:100px;width:100px;background:green}._1j78ztq0{box-sizing:border-box}
 "
 `;
 
-exports[`Stylesheet unused-modules - vite should create valid stylesheet 1`] = `"body{background-color:#e6e6fa}body{border:5px solid #000}.shared__fbihc60{display:flex}.unused__g6ndup0{color:red;background-color:#00f}.used__36o3zb0{height:100px;width:100px;background:green}.reset__1j78ztq0{box-sizing:border-box}"`;
+exports[`Stylesheet unused-modules - vite should create valid stylesheet 1`] = `"body{background-color:#e6e6fa}body{border:5px solid #000}.fbihc60{display:flex}.g6ndup0{color:red;background-color:#00f}._36o3zb0{height:100px;width:100px;background:green}._1j78ztq0{box-sizing:border-box}"`;
 
 exports[`Stylesheet unused-modules - webpack should create valid stylesheet 1`] = `
 "body {
   background-color: lavender;
 }
-.reset_default__13dn9qt0 {
+._13dn9qt0 {
   box-sizing: border-box;
 }
 body {
   border: 5px solid black;
 }
-.shared_default__1mtonhh0 {
+._1mtonhh0 {
   display: flex;
 }
-.used_className__plqi3i0 {
+.plqi3i0 {
   height: 100px;
   width: 100px;
   background: green;
diff --git a/yarn.lock b/yarn.lock
index 7cb4e3717..d3cdb9812 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1390,7 +1390,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.7, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.7, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.13.10
   resolution: "@babel/runtime@npm:7.13.10"
   dependencies:
@@ -1481,15 +1481,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@changesets/apply-release-plan@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "@changesets/apply-release-plan@npm:4.2.0"
+"@changesets/apply-release-plan@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@changesets/apply-release-plan@npm:5.0.0"
   dependencies:
     "@babel/runtime": ^7.10.4
-    "@changesets/config": ^1.5.0
+    "@changesets/config": ^1.6.0
     "@changesets/get-version-range-type": ^0.3.2
-    "@changesets/git": ^1.0.5
-    "@changesets/types": ^3.3.0
+    "@changesets/git": ^1.1.1
+    "@changesets/types": ^4.0.0
     "@manypkg/get-packages": ^1.0.1
     detect-indent: ^6.0.0
     fs-extra: ^7.0.1
@@ -1498,52 +1498,52 @@ __metadata:
     prettier: ^1.19.1
     resolve-from: ^5.0.0
     semver: ^5.4.1
-  checksum: 0da89af1000cdbc13a3ad21bec6f318f64be8f07bb079721ce8ee5cf3038202ff8cf8d21c94d6212fca288630f030be3c23d7771141c8fe5905182fb215e03cc
+  checksum: d43561e83192d183084d3837dd63fe618a173c056895784674ff14e4ebe4061bf2e3362642e65b4b23f129ecdac9e276222b5dfbbe0b0965a62a7878154a5cce
   languageName: node
   linkType: hard
 
-"@changesets/assemble-release-plan@npm:^4.0.0, @changesets/assemble-release-plan@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "@changesets/assemble-release-plan@npm:4.1.0"
+"@changesets/assemble-release-plan@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@changesets/assemble-release-plan@npm:5.0.0"
   dependencies:
     "@babel/runtime": ^7.10.4
     "@changesets/errors": ^0.1.4
-    "@changesets/get-dependents-graph": ^1.2.0
-    "@changesets/types": ^3.3.0
+    "@changesets/get-dependents-graph": ^1.2.1
+    "@changesets/types": ^4.0.0
     "@manypkg/get-packages": ^1.0.1
     semver: ^5.4.1
-  checksum: 36f037caa97a873fe7f03c68bd26445f9b5a001db67863920d0982c5b72dedddb09865b23c1a251db9d208f204e3ecfc083bd6f1ef7b224f1bd3de76ce085b7e
+  checksum: 44878d43bbeaf08a8bd633190831be3c8e6293af7174b27233982be7291a642b2bf97579f59fd0994743f62533c5a99c4d0ced661c8b8b6b9e1ba487e2fdf513
   languageName: node
   linkType: hard
 
-"@changesets/changelog-github@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "@changesets/changelog-github@npm:0.3.0"
+"@changesets/changelog-github@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "@changesets/changelog-github@npm:0.4.0"
   dependencies:
     "@changesets/get-github-info": ^0.5.0
-    "@changesets/types": ^3.0.0
+    "@changesets/types": ^4.0.0
     dotenv: ^8.1.0
-  checksum: b68d242b0e0259adb6cd55730c795094fada17d467b55db424eb2e5534a0ec50468cb8b69ff2eea03e423c4f78eb9da00a20e3ea3675154df485fe5ab9536513
+  checksum: 2c5dbdbcb07b753dd083d3d34edd167729650d28c3cd5c041fc496d6dbbd77400efa8442cc304299903b9420dbf3a716151aad15ebf102050abe09a219731c7d
   languageName: node
   linkType: hard
 
-"@changesets/cli@npm:^2.14.1":
-  version: 2.14.1
-  resolution: "@changesets/cli@npm:2.14.1"
+"@changesets/cli@npm:^2.16.0":
+  version: 2.16.0
+  resolution: "@changesets/cli@npm:2.16.0"
   dependencies:
     "@babel/runtime": ^7.10.4
-    "@changesets/apply-release-plan": ^4.2.0
-    "@changesets/assemble-release-plan": ^4.1.0
-    "@changesets/config": ^1.5.0
+    "@changesets/apply-release-plan": ^5.0.0
+    "@changesets/assemble-release-plan": ^5.0.0
+    "@changesets/config": ^1.6.0
     "@changesets/errors": ^0.1.4
-    "@changesets/get-dependents-graph": ^1.2.0
-    "@changesets/get-release-plan": ^2.0.1
-    "@changesets/git": ^1.1.0
+    "@changesets/get-dependents-graph": ^1.2.1
+    "@changesets/get-release-plan": ^3.0.0
+    "@changesets/git": ^1.1.1
     "@changesets/logger": ^0.0.5
-    "@changesets/pre": ^1.0.4
-    "@changesets/read": ^0.4.6
-    "@changesets/types": ^3.3.0
-    "@changesets/write": ^0.1.3
+    "@changesets/pre": ^1.0.6
+    "@changesets/read": ^0.4.7
+    "@changesets/types": ^4.0.0
+    "@changesets/write": ^0.1.4
     "@manypkg/get-packages": ^1.0.1
     "@types/semver": ^6.0.0
     boxen: ^1.3.0
@@ -1563,22 +1563,22 @@ __metadata:
     tty-table: ^2.8.10
   bin:
     changeset: bin.js
-  checksum: 319f1f6532ed58ea3b6464418e1f0334539c6e843c8cb69ffc08126775edd82abd0c8e6b5e1bdae8d6560f3cfff7b9591ebb035adf5178eacf3ed9f3ac1c2917
+  checksum: aea003304788a211b709d7c0de418e0056df3e923b50d3beb93ff20d911bf6082a2f70c7d4484e3c18b21e7a63f677005ae67b7798706cfebdcaecafe25d8edb
   languageName: node
   linkType: hard
 
-"@changesets/config@npm:^1.2.0, @changesets/config@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "@changesets/config@npm:1.5.0"
+"@changesets/config@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "@changesets/config@npm:1.6.0"
   dependencies:
     "@changesets/errors": ^0.1.4
-    "@changesets/get-dependents-graph": ^1.2.0
+    "@changesets/get-dependents-graph": ^1.2.1
     "@changesets/logger": ^0.0.5
-    "@changesets/types": ^3.3.0
+    "@changesets/types": ^4.0.0
     "@manypkg/get-packages": ^1.0.1
     fs-extra: ^7.0.1
     micromatch: ^4.0.2
-  checksum: 6d7f1416914135469f755cf1fd36d7d57bd0a2c7c293ea2e8843493128f06a62a8fdfe3f37f9837bcf4b41a03a3bc2e9661b30037c6fc23e35356390b3015a5c
+  checksum: 99a08add7e48294c5825021bada7dccbc2c0edc22c723bcc936854a666a83570a6e4e178631aaa7a512577eab1d527105020f5acd50b6b8fa526c0262bcd5cf5
   languageName: node
   linkType: hard
 
@@ -1591,16 +1591,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@changesets/get-dependents-graph@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "@changesets/get-dependents-graph@npm:1.2.0"
+"@changesets/get-dependents-graph@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@changesets/get-dependents-graph@npm:1.2.1"
   dependencies:
-    "@changesets/types": ^3.3.0
+    "@changesets/types": ^4.0.0
     "@manypkg/get-packages": ^1.0.1
     chalk: ^2.1.0
     fs-extra: ^7.0.1
     semver: ^5.4.1
-  checksum: 8f99496616664d59e76d96e83abcd6d2df1f387fe806a192feaac06201b7097adbde9220c8372889704e6966e597b406e54431d326a2f747dceaec4b9b1fc21a
+  checksum: 13aef0b05d6d49cf777eed53e24d856890d6e209932466ddf6e4717af6b9286de717f2798d6821339404dc962b0d712fe68c484f3a3a324e1c183da1dce23e0f
   languageName: node
   linkType: hard
 
@@ -1614,18 +1614,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@changesets/get-release-plan@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "@changesets/get-release-plan@npm:2.0.1"
+"@changesets/get-release-plan@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@changesets/get-release-plan@npm:3.0.0"
   dependencies:
     "@babel/runtime": ^7.10.4
-    "@changesets/assemble-release-plan": ^4.0.0
-    "@changesets/config": ^1.2.0
-    "@changesets/pre": ^1.0.4
-    "@changesets/read": ^0.4.6
-    "@changesets/types": ^3.1.0
+    "@changesets/assemble-release-plan": ^5.0.0
+    "@changesets/config": ^1.6.0
+    "@changesets/pre": ^1.0.6
+    "@changesets/read": ^0.4.7
+    "@changesets/types": ^4.0.0
     "@manypkg/get-packages": ^1.0.1
-  checksum: ed256b1386aa41d96fe6e5ce3688f9a320878df810fc124c58fe326e41c7b3ac96bd737e2900009113f72011f4481cdfccc54d621293f7dcfa5dac948844dc29
+  checksum: eac0c98fc8ab72d7a048788da0f0f946c11a0e22cff674544b517094cfff00664d456d9d78a0bdc708f6d5e9c118cc1bce7c18e13af7927a808111294b4c6ed2
   languageName: node
   linkType: hard
 
@@ -1636,17 +1636,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@changesets/git@npm:^1.0.5, @changesets/git@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@changesets/git@npm:1.1.0"
+"@changesets/git@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@changesets/git@npm:1.1.1"
   dependencies:
     "@babel/runtime": ^7.10.4
     "@changesets/errors": ^0.1.4
-    "@changesets/types": ^3.1.1
+    "@changesets/types": ^4.0.0
     "@manypkg/get-packages": ^1.0.1
     is-subdir: ^1.1.1
     spawndamnit: ^2.0.0
-  checksum: c37715f7f0ab50009d7d369eb9043f9ed8686b2e6b4c49fb3a0990153c136ebc95aada220b7478fd507adb94738b4c96bcc8a0f69e03bb59e1cc667eb55eef72
+  checksum: 6610b29401948cd6961e503743f8f25c90c0b55a4fc8a2c6773373ef2a153790c55d191db6a6507b36a88f5428617657a45297083ca4565444a32f09357bb928
   languageName: node
   linkType: hard
 
@@ -1659,42 +1659,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@changesets/parse@npm:^0.3.6":
-  version: 0.3.7
-  resolution: "@changesets/parse@npm:0.3.7"
+"@changesets/parse@npm:^0.3.8":
+  version: 0.3.8
+  resolution: "@changesets/parse@npm:0.3.8"
   dependencies:
-    "@changesets/types": ^3.0.0
+    "@changesets/types": ^4.0.0
     js-yaml: ^3.13.1
-  checksum: 1c0710489c69a4d7e2311fc95d53fcf3cdbb3599085e346dc8a57c9d32a30ed4f7f15d9274ebabab71b16c870fb92f57e5ab529645d290d8e6483698ba3a2d05
+  checksum: bb01209d96fa6657df8c601f037436de0c502b012a0e0a71c7152fd1f4f4a05ce694765fac1411b7293a4a30b99ef418c8afd3018528c26be118b3b3f580ffec
   languageName: node
   linkType: hard
 
-"@changesets/pre@npm:^1.0.4":
-  version: 1.0.5
-  resolution: "@changesets/pre@npm:1.0.5"
+"@changesets/pre@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "@changesets/pre@npm:1.0.6"
   dependencies:
-    "@babel/runtime": ^7.4.4
+    "@babel/runtime": ^7.10.4
     "@changesets/errors": ^0.1.4
-    "@changesets/types": ^3.0.0
+    "@changesets/types": ^4.0.0
     "@manypkg/get-packages": ^1.0.1
     fs-extra: ^7.0.1
-  checksum: 29409009d0a36aeb7ba239a26a94c65268f43b709317cebc82174ae463f8913d702cbb43878ff33afd0964b15c2237d5dd3d4dc0daf736beabc66f71ef626fac
+  checksum: 175f163a5bfc9cd803aa7dcc646af75fdc85fda988bc8470bb96744a12833b818b355d5a2788a3d6e2f0e300d3c3778962a8ffafa8b6ad2e8f3ba5da5d99f861
   languageName: node
   linkType: hard
 
-"@changesets/read@npm:^0.4.6":
-  version: 0.4.6
-  resolution: "@changesets/read@npm:0.4.6"
+"@changesets/read@npm:^0.4.7":
+  version: 0.4.7
+  resolution: "@changesets/read@npm:0.4.7"
   dependencies:
-    "@babel/runtime": ^7.4.4
-    "@changesets/git": ^1.0.5
+    "@babel/runtime": ^7.10.4
+    "@changesets/git": ^1.1.1
     "@changesets/logger": ^0.0.5
-    "@changesets/parse": ^0.3.6
-    "@changesets/types": ^3.0.0
+    "@changesets/parse": ^0.3.8
+    "@changesets/types": ^4.0.0
     chalk: ^2.1.0
     fs-extra: ^7.0.1
     p-filter: ^2.1.0
-  checksum: 4db6b96082ac84f08bf71e13882d27f39d23f69275629c3f4dd3bc9cabce70095658d2b0100a100e15030674d3362a889bad193d9d408312fa8f338ee09604f7
+  checksum: d5417e606b86ca64458af864bbb225997ce232376ee4496a61099e989a7dcc40176e8372676134d22457881922dfa314324da45b84aeb3564c3f181bb639a9cd
   languageName: node
   linkType: hard
 
@@ -1705,23 +1705,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@changesets/types@npm:^3.0.0, @changesets/types@npm:^3.1.0, @changesets/types@npm:^3.1.1, @changesets/types@npm:^3.3.0":
-  version: 3.3.0
-  resolution: "@changesets/types@npm:3.3.0"
-  checksum: 54dd2e12d6bfa0d73fe979acac5f7391348d2beae6c6ef4967082fdbfae284768ff371acea1911a1627f580f22e9f288dc77c394159b1c1a3920dd6f4b6d1333
+"@changesets/types@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@changesets/types@npm:4.0.0"
+  checksum: 7597a8520e6e8bfb324ac6d490d8849b8fe8b064f4cb6a4207044cb56a7db8ad1c8a79f2f07e5056782d53f9a4b0e33553c4e84e2b417a61739d83ddd5e6314f
   languageName: node
   linkType: hard
 
-"@changesets/write@npm:^0.1.3":
-  version: 0.1.3
-  resolution: "@changesets/write@npm:0.1.3"
+"@changesets/write@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "@changesets/write@npm:0.1.4"
   dependencies:
-    "@babel/runtime": ^7.4.4
-    "@changesets/types": ^3.0.0
+    "@babel/runtime": ^7.10.4
+    "@changesets/types": ^4.0.0
     fs-extra: ^7.0.1
     human-id: ^1.0.2
-    prettier: ^1.18.2
-  checksum: 0fb9c94718bf226becbc62967a9cb8e514e4f7f867973a1acf6f1722f8163704ca16d2c6ec3cb78d25ec4221591c74e2b68d50321048f9c1346e0fd6c54a1432
+    prettier: ^1.19.1
+  checksum: 3d5432599b30baa94f02c30b273ffa06217fffc1eac0382ee01fe9a30203a774d1b3111fc8b5fe0e1d723daa062fb48e5b85a37e9d29265c4dfb9cc868622310
   languageName: node
   linkType: hard
 
@@ -11651,7 +11651,7 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
-"prettier@npm:^1.18.2, prettier@npm:^1.19.1":
+"prettier@npm:^1.19.1":
   version: 1.19.1
   resolution: "prettier@npm:1.19.1"
   bin:
@@ -15019,8 +15019,8 @@ typescript@^4.1.3:
     "@babel/preset-env": ^7.13.15
     "@babel/preset-react": ^7.13.13
     "@babel/preset-typescript": ^7.13.0
-    "@changesets/changelog-github": ^0.3.0
-    "@changesets/cli": ^2.14.1
+    "@changesets/changelog-github": ^0.4.0
+    "@changesets/cli": ^2.16.0
     "@manypkg/cli": ^0.17.0
     "@preconstruct/cli": ^2.0.1
     "@testing-library/dom": ^7.30.0