diff --git a/.babelrc.js b/.babelrc.js
index 5af9a9046c5d..b00deb2d4c20 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -55,7 +55,7 @@ module.exports = {
     '@babel/plugin-syntax-dynamic-import',
     ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
     'babel-plugin-macros',
-    ['emotion', { sourceMap: true, autoLabel: true }],
+    ['@emotion', { sourceMap: true, autoLabel: 'always' }],
   ],
   env: {
     test: withTests,
@@ -90,7 +90,7 @@ module.exports = {
         ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
         ['@babel/plugin-proposal-class-properties', { loose: true }],
         'babel-plugin-macros',
-        ['emotion', { sourceMap: true, autoLabel: true }],
+        ['@emotion', { sourceMap: true, autoLabel: 'always' }],
         'babel-plugin-add-react-displayname',
       ],
       env: {
@@ -125,7 +125,7 @@ module.exports = {
         ],
       ],
       plugins: [
-        'emotion',
+        '@emotion',
         'babel-plugin-macros',
         '@babel/plugin-transform-arrow-functions',
         '@babel/plugin-transform-shorthand-properties',
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index e3d404058275..a237503d47ac 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -69,6 +69,7 @@
   "devDependencies": {
     "@angular/core": "^11.2.0",
     "@angular/platform-browser-dynamic": "^11.2.0",
+    "@emotion/jest": "^11.8.0",
     "@storybook/addon-docs": "6.5.0-alpha.58",
     "@storybook/angular": "6.5.0-alpha.58",
     "@storybook/react": "6.5.0-alpha.58",
@@ -77,7 +78,6 @@
     "babel-loader": "^8.0.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
-    "jest-emotion": "^10.0.32",
     "jest-preset-angular": "^8.3.2",
     "jest-vue-preprocessor": "^1.7.1",
     "rxjs": "^6.6.3",
diff --git a/addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js b/addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js
index ef3fb2f198cb..96e285722d44 100644
--- a/addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js
+++ b/addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js
@@ -1,12 +1,9 @@
 import path from 'path';
 import { mount } from 'enzyme';
-import { createSerializer as enzymeSerializer } from 'enzyme-to-json';
-import { createSerializer as emotionSerializer } from 'jest-emotion';
 import initStoryshots from '../dist/ts3.9';
 
 initStoryshots({
   framework: 'react',
   configPath: path.join(__dirname, '..', '.storybook'),
   renderer: mount,
-  snapshotSerializers: [enzymeSerializer(), emotionSerializer()],
 });
diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts
index 235ddead5e0a..b5e1b86eee2b 100644
--- a/app/angular/src/server/framework-preset-angular-cli.test.ts
+++ b/app/angular/src/server/framework-preset-angular-cli.test.ts
@@ -797,9 +797,6 @@ const newWebpackConfiguration = (
       modules: ['node_modules'],
       mainFields: ['browser', 'main'],
       alias: {
-        '@emotion/core': '/Users/joe/storybook/node_modules/@emotion/core',
-        '@emotion/styled': '/Users/joe/storybook/node_modules/@emotion/styled',
-        'emotion-theming': '/Users/joe/storybook/node_modules/emotion-theming',
         '@storybook/addons': '/Users/joe/storybook/lib/addons',
         '@storybook/api': '/Users/joe/storybook/lib/api',
         '@storybook/channels': '/Users/joe/storybook/lib/channels',
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 2253cab23721..8cc402ee6b41 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -11,6 +11,7 @@
     "storyshots-puppeteer": "yarn run build-storybook && yarn run do-storyshots-puppeteer"
   },
   "devDependencies": {
+    "@emotion/jest": "^11.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@storybook/addon-a11y": "6.5.0-alpha.58",
     "@storybook/addon-actions": "6.5.0-alpha.58",
@@ -47,7 +48,6 @@
     "express": "^4.17.1",
     "format-json": "^1.0.3",
     "global": "^4.4.0",
-    "jest-emotion": "^10.0.32",
     "lodash": "^4.17.21",
     "paths.macro": "^3.0.1",
     "prop-types": "^15.7.2",
diff --git a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
index e667fd935d97..c7c7e0bda05e 100644
--- a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
+++ b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Demo/AccountForm Standard 1`] = `
-.emotion-15 {
+.emotion-0 {
   font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
@@ -20,7 +20,7 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
   border-radius: 7px;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -30,30 +30,30 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0 {
+.emotion-2 {
   height: 40px;
   z-index: 10;
   margin-left: 32px;
 }
 
-.emotion-1 {
+.emotion-3 {
   height: 40px;
   z-index: 1;
   left: -32px;
   position: relative;
 }
 
-.emotion-3 {
+.emotion-4 {
   margin-top: 20px;
   text-align: center;
 }
 
-.emotion-14 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -63,26 +63,26 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
   -ms-flex-align: flex-start;
   align-items: flex-start;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
   width: 350px;
   min-height: 189px;
   margin-top: 8px;
 }
 
-.emotion-13 {
+.emotion-6 {
   width: 100%;
   -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
+  -ms-flex-item-align: flex-start;
   align-self: flex-start;
 }
 
-.emotion-13[aria-disabled="true"] {
+.emotion-6[aria-disabled="true"] {
   opacity: 0.6;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -91,44 +91,45 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
   -ms-flex-pack: stretch;
+  -webkit-justify-content: stretch;
   justify-content: stretch;
   margin-bottom: 10px;
 }
 
-.emotion-4 {
+.emotion-8 {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px;
 }
 
-.emotion-5 {
+.emotion-9 {
   font-size: 14px;
   color: #333333;
   padding: 10px 15px;
   border-radius: 4px;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   outline: none;
   border: 0 none;
   box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:focus {
+.emotion-9:focus {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:active {
+.emotion-9:active {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5[aria-invalid="true"] {
+.emotion-9[aria-invalid="true"] {
   box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -138,17 +139,17 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 24px;
 }
 
-.emotion-10 {
+.emotion-14 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -166,28 +167,29 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
   box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset;
 }
 
-.emotion-10:focus {
+.emotion-14:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10:active {
+.emotion-14:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10[aria-disabled="true"] {
+.emotion-14[aria-disabled="true"] {
   cursor: default;
 }
 
-.emotion-11 {
+.emotion-15 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -203,31 +205,31 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
   color: #1EA7FD;
 }
 
-.emotion-11:focus {
+.emotion-15:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11:active {
+.emotion-15:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11[aria-disabled="true"] {
+.emotion-15[aria-disabled="true"] {
   cursor: default;
 }
 
 <section
-  className="emotion-15"
+  className="emotion-0"
 >
   <div
-    className="emotion-2"
+    className="emotion-1"
   >
     <svg
       aria-label="Storybook Logo"
-      className="emotion-0"
+      className="emotion-2"
       role="img"
       viewBox="0 0 64 64"
     >
@@ -262,7 +264,7 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
     </svg>
     <svg
       aria-label="Storybook"
-      className="emotion-1"
+      className="emotion-3"
       role="img"
       viewBox="0 0 200 40"
     >
@@ -281,26 +283,26 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
     </svg>
   </div>
   <p
-    className="emotion-3"
+    className="emotion-4"
   >
     Create an account to join the Storybook community
   </p>
   <div
-    className="emotion-14"
+    className="emotion-5"
   >
     <form
       action="#"
       aria-disabled="false"
-      className="emotion-13"
+      className="emotion-6"
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
     >
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="email"
         >
           Email
@@ -309,7 +311,7 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="email"
           disabled={false}
           name="email"
@@ -320,10 +322,10 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="password"
         >
           Password
@@ -332,7 +334,7 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password1"
           disabled={false}
           name="password"
@@ -343,11 +345,11 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
         />
       </div>
       <div
-        className="emotion-12"
+        className="emotion-13"
       >
         <button
           aria-disabled="true"
-          className="emotion-10"
+          className="emotion-14"
           data-testid="submit"
           disabled={true}
           type="submit"
@@ -356,7 +358,7 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
         </button>
         <button
           aria-disabled="false"
-          className="emotion-11"
+          className="emotion-15"
           disabled={false}
           type="reset"
         >
@@ -369,7 +371,7 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `
 `;
 
 exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
-.emotion-15 {
+.emotion-0 {
   font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
@@ -388,7 +390,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
   border-radius: 7px;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -398,30 +400,30 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0 {
+.emotion-2 {
   height: 40px;
   z-index: 10;
   margin-left: 32px;
 }
 
-.emotion-1 {
+.emotion-3 {
   height: 40px;
   z-index: 1;
   left: -32px;
   position: relative;
 }
 
-.emotion-3 {
+.emotion-4 {
   margin-top: 20px;
   text-align: center;
 }
 
-.emotion-14 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -431,26 +433,26 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
   -ms-flex-align: flex-start;
   align-items: flex-start;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
   width: 350px;
   min-height: 189px;
   margin-top: 8px;
 }
 
-.emotion-13 {
+.emotion-6 {
   width: 100%;
   -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
+  -ms-flex-item-align: flex-start;
   align-self: flex-start;
 }
 
-.emotion-13[aria-disabled="true"] {
+.emotion-6[aria-disabled="true"] {
   opacity: 0.6;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -459,44 +461,45 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
   -ms-flex-pack: stretch;
+  -webkit-justify-content: stretch;
   justify-content: stretch;
   margin-bottom: 10px;
 }
 
-.emotion-4 {
+.emotion-8 {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px;
 }
 
-.emotion-5 {
+.emotion-9 {
   font-size: 14px;
   color: #333333;
   padding: 10px 15px;
   border-radius: 4px;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   outline: none;
   border: 0 none;
   box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:focus {
+.emotion-9:focus {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:active {
+.emotion-9:active {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5[aria-invalid="true"] {
+.emotion-9[aria-invalid="true"] {
   box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -506,17 +509,17 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 24px;
 }
 
-.emotion-10 {
+.emotion-14 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -534,28 +537,29 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
   box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset;
 }
 
-.emotion-10:focus {
+.emotion-14:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10:active {
+.emotion-14:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10[aria-disabled="true"] {
+.emotion-14[aria-disabled="true"] {
   cursor: default;
 }
 
-.emotion-11 {
+.emotion-15 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -571,31 +575,31 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
   color: #1EA7FD;
 }
 
-.emotion-11:focus {
+.emotion-15:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11:active {
+.emotion-15:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11[aria-disabled="true"] {
+.emotion-15[aria-disabled="true"] {
   cursor: default;
 }
 
 <section
-  className="emotion-15"
+  className="emotion-0"
 >
   <div
-    className="emotion-2"
+    className="emotion-1"
   >
     <svg
       aria-label="Storybook Logo"
-      className="emotion-0"
+      className="emotion-2"
       role="img"
       viewBox="0 0 64 64"
     >
@@ -630,7 +634,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
     </svg>
     <svg
       aria-label="Storybook"
-      className="emotion-1"
+      className="emotion-3"
       role="img"
       viewBox="0 0 200 40"
     >
@@ -649,26 +653,26 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
     </svg>
   </div>
   <p
-    className="emotion-3"
+    className="emotion-4"
   >
     Create an account to join the Storybook community
   </p>
   <div
-    className="emotion-14"
+    className="emotion-5"
   >
     <form
       action="#"
       aria-disabled="false"
-      className="emotion-13"
+      className="emotion-6"
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
     >
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="email"
         >
           Email
@@ -677,7 +681,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="email"
           disabled={false}
           name="email"
@@ -688,10 +692,10 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="password"
         >
           Password
@@ -700,7 +704,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password1"
           disabled={false}
           name="password"
@@ -711,11 +715,11 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
         />
       </div>
       <div
-        className="emotion-12"
+        className="emotion-13"
       >
         <button
           aria-disabled="true"
-          className="emotion-10"
+          className="emotion-14"
           data-testid="submit"
           disabled={true}
           type="submit"
@@ -724,7 +728,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
         </button>
         <button
           aria-disabled="false"
-          className="emotion-11"
+          className="emotion-15"
           disabled={false}
           type="reset"
         >
@@ -737,7 +741,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Failed 1`] = `
 `;
 
 exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
-.emotion-15 {
+.emotion-0 {
   font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
@@ -756,7 +760,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
   border-radius: 7px;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -766,30 +770,30 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0 {
+.emotion-2 {
   height: 40px;
   z-index: 10;
   margin-left: 32px;
 }
 
-.emotion-1 {
+.emotion-3 {
   height: 40px;
   z-index: 1;
   left: -32px;
   position: relative;
 }
 
-.emotion-3 {
+.emotion-4 {
   margin-top: 20px;
   text-align: center;
 }
 
-.emotion-14 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -799,26 +803,26 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
   -ms-flex-align: flex-start;
   align-items: flex-start;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
   width: 350px;
   min-height: 189px;
   margin-top: 8px;
 }
 
-.emotion-13 {
+.emotion-6 {
   width: 100%;
   -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
+  -ms-flex-item-align: flex-start;
   align-self: flex-start;
 }
 
-.emotion-13[aria-disabled="true"] {
+.emotion-6[aria-disabled="true"] {
   opacity: 0.6;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -827,44 +831,45 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
   -ms-flex-pack: stretch;
+  -webkit-justify-content: stretch;
   justify-content: stretch;
   margin-bottom: 10px;
 }
 
-.emotion-4 {
+.emotion-8 {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px;
 }
 
-.emotion-5 {
+.emotion-9 {
   font-size: 14px;
   color: #333333;
   padding: 10px 15px;
   border-radius: 4px;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   outline: none;
   border: 0 none;
   box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:focus {
+.emotion-9:focus {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:active {
+.emotion-9:active {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5[aria-invalid="true"] {
+.emotion-9[aria-invalid="true"] {
   box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -874,17 +879,17 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 24px;
 }
 
-.emotion-10 {
+.emotion-14 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -902,28 +907,29 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
   box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset;
 }
 
-.emotion-10:focus {
+.emotion-14:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10:active {
+.emotion-14:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10[aria-disabled="true"] {
+.emotion-14[aria-disabled="true"] {
   cursor: default;
 }
 
-.emotion-11 {
+.emotion-15 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -939,31 +945,31 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
   color: #1EA7FD;
 }
 
-.emotion-11:focus {
+.emotion-15:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11:active {
+.emotion-15:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11[aria-disabled="true"] {
+.emotion-15[aria-disabled="true"] {
   cursor: default;
 }
 
 <section
-  className="emotion-15"
+  className="emotion-0"
 >
   <div
-    className="emotion-2"
+    className="emotion-1"
   >
     <svg
       aria-label="Storybook Logo"
-      className="emotion-0"
+      className="emotion-2"
       role="img"
       viewBox="0 0 64 64"
     >
@@ -998,7 +1004,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
     </svg>
     <svg
       aria-label="Storybook"
-      className="emotion-1"
+      className="emotion-3"
       role="img"
       viewBox="0 0 200 40"
     >
@@ -1017,26 +1023,26 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
     </svg>
   </div>
   <p
-    className="emotion-3"
+    className="emotion-4"
   >
     Create an account to join the Storybook community
   </p>
   <div
-    className="emotion-14"
+    className="emotion-5"
   >
     <form
       action="#"
       aria-disabled="false"
-      className="emotion-13"
+      className="emotion-6"
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
     >
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="email"
         >
           Email
@@ -1045,7 +1051,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="email"
           disabled={false}
           name="email"
@@ -1056,10 +1062,10 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="password"
         >
           Password
@@ -1068,7 +1074,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password1"
           disabled={false}
           name="password"
@@ -1079,11 +1085,11 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
         />
       </div>
       <div
-        className="emotion-12"
+        className="emotion-13"
       >
         <button
           aria-disabled="true"
-          className="emotion-10"
+          className="emotion-14"
           data-testid="submit"
           disabled={true}
           type="submit"
@@ -1092,7 +1098,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
         </button>
         <button
           aria-disabled="false"
-          className="emotion-11"
+          className="emotion-15"
           disabled={false}
           type="reset"
         >
@@ -1105,7 +1111,7 @@ exports[`Storyshots Demo/AccountForm Standard Email Filled 1`] = `
 `;
 
 exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
-.emotion-15 {
+.emotion-0 {
   font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1124,7 +1130,7 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
   border-radius: 7px;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1134,30 +1140,30 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0 {
+.emotion-2 {
   height: 40px;
   z-index: 10;
   margin-left: 32px;
 }
 
-.emotion-1 {
+.emotion-3 {
   height: 40px;
   z-index: 1;
   left: -32px;
   position: relative;
 }
 
-.emotion-3 {
+.emotion-4 {
   margin-top: 20px;
   text-align: center;
 }
 
-.emotion-14 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1167,26 +1173,26 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
   -ms-flex-align: flex-start;
   align-items: flex-start;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
   width: 350px;
   min-height: 189px;
   margin-top: 8px;
 }
 
-.emotion-13 {
+.emotion-6 {
   width: 100%;
   -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
+  -ms-flex-item-align: flex-start;
   align-self: flex-start;
 }
 
-.emotion-13[aria-disabled="true"] {
+.emotion-6[aria-disabled="true"] {
   opacity: 0.6;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1195,44 +1201,45 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
   -ms-flex-pack: stretch;
+  -webkit-justify-content: stretch;
   justify-content: stretch;
   margin-bottom: 10px;
 }
 
-.emotion-4 {
+.emotion-8 {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px;
 }
 
-.emotion-5 {
+.emotion-9 {
   font-size: 14px;
   color: #333333;
   padding: 10px 15px;
   border-radius: 4px;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   outline: none;
   border: 0 none;
   box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:focus {
+.emotion-9:focus {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:active {
+.emotion-9:active {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5[aria-invalid="true"] {
+.emotion-9[aria-invalid="true"] {
   box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -1242,17 +1249,17 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 24px;
 }
 
-.emotion-10 {
+.emotion-14 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -1270,28 +1277,29 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
   box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset;
 }
 
-.emotion-10:focus {
+.emotion-14:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10:active {
+.emotion-14:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10[aria-disabled="true"] {
+.emotion-14[aria-disabled="true"] {
   cursor: default;
 }
 
-.emotion-11 {
+.emotion-15 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -1307,31 +1315,31 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
   color: #1EA7FD;
 }
 
-.emotion-11:focus {
+.emotion-15:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11:active {
+.emotion-15:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11[aria-disabled="true"] {
+.emotion-15[aria-disabled="true"] {
   cursor: default;
 }
 
 <section
-  className="emotion-15"
+  className="emotion-0"
 >
   <div
-    className="emotion-2"
+    className="emotion-1"
   >
     <svg
       aria-label="Storybook Logo"
-      className="emotion-0"
+      className="emotion-2"
       role="img"
       viewBox="0 0 64 64"
     >
@@ -1366,7 +1374,7 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
     </svg>
     <svg
       aria-label="Storybook"
-      className="emotion-1"
+      className="emotion-3"
       role="img"
       viewBox="0 0 200 40"
     >
@@ -1385,26 +1393,26 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
     </svg>
   </div>
   <p
-    className="emotion-3"
+    className="emotion-4"
   >
     Create an account to join the Storybook community
   </p>
   <div
-    className="emotion-14"
+    className="emotion-5"
   >
     <form
       action="#"
       aria-disabled="false"
-      className="emotion-13"
+      className="emotion-6"
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
     >
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="email"
         >
           Email
@@ -1413,7 +1421,7 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="email"
           disabled={false}
           name="email"
@@ -1424,10 +1432,10 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="password"
         >
           Password
@@ -1436,7 +1444,7 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password1"
           disabled={false}
           name="password"
@@ -1447,11 +1455,11 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
         />
       </div>
       <div
-        className="emotion-12"
+        className="emotion-13"
       >
         <button
           aria-disabled="true"
-          className="emotion-10"
+          className="emotion-14"
           data-testid="submit"
           disabled={true}
           type="submit"
@@ -1460,7 +1468,7 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
         </button>
         <button
           aria-disabled="false"
-          className="emotion-11"
+          className="emotion-15"
           disabled={false}
           type="reset"
         >
@@ -1473,7 +1481,7 @@ exports[`Storyshots Demo/AccountForm Standard Fail Hover 1`] = `
 `;
 
 exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
-.emotion-15 {
+.emotion-0 {
   font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1492,7 +1500,7 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
   border-radius: 7px;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1502,30 +1510,30 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0 {
+.emotion-2 {
   height: 40px;
   z-index: 10;
   margin-left: 32px;
 }
 
-.emotion-1 {
+.emotion-3 {
   height: 40px;
   z-index: 1;
   left: -32px;
   position: relative;
 }
 
-.emotion-3 {
+.emotion-4 {
   margin-top: 20px;
   text-align: center;
 }
 
-.emotion-14 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1535,26 +1543,26 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
   -ms-flex-align: flex-start;
   align-items: flex-start;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
   width: 350px;
   min-height: 189px;
   margin-top: 8px;
 }
 
-.emotion-13 {
+.emotion-6 {
   width: 100%;
   -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
+  -ms-flex-item-align: flex-start;
   align-self: flex-start;
 }
 
-.emotion-13[aria-disabled="true"] {
+.emotion-6[aria-disabled="true"] {
   opacity: 0.6;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1563,44 +1571,45 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
   -ms-flex-pack: stretch;
+  -webkit-justify-content: stretch;
   justify-content: stretch;
   margin-bottom: 10px;
 }
 
-.emotion-4 {
+.emotion-8 {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px;
 }
 
-.emotion-5 {
+.emotion-9 {
   font-size: 14px;
   color: #333333;
   padding: 10px 15px;
   border-radius: 4px;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   outline: none;
   border: 0 none;
   box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:focus {
+.emotion-9:focus {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:active {
+.emotion-9:active {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5[aria-invalid="true"] {
+.emotion-9[aria-invalid="true"] {
   box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -1610,17 +1619,17 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 24px;
 }
 
-.emotion-10 {
+.emotion-14 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -1638,28 +1647,29 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
   box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset;
 }
 
-.emotion-10:focus {
+.emotion-14:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10:active {
+.emotion-14:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10[aria-disabled="true"] {
+.emotion-14[aria-disabled="true"] {
   cursor: default;
 }
 
-.emotion-11 {
+.emotion-15 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -1675,31 +1685,31 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
   color: #1EA7FD;
 }
 
-.emotion-11:focus {
+.emotion-15:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11:active {
+.emotion-15:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11[aria-disabled="true"] {
+.emotion-15[aria-disabled="true"] {
   cursor: default;
 }
 
 <section
-  className="emotion-15"
+  className="emotion-0"
 >
   <div
-    className="emotion-2"
+    className="emotion-1"
   >
     <svg
       aria-label="Storybook Logo"
-      className="emotion-0"
+      className="emotion-2"
       role="img"
       viewBox="0 0 64 64"
     >
@@ -1734,7 +1744,7 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
     </svg>
     <svg
       aria-label="Storybook"
-      className="emotion-1"
+      className="emotion-3"
       role="img"
       viewBox="0 0 200 40"
     >
@@ -1753,26 +1763,26 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
     </svg>
   </div>
   <p
-    className="emotion-3"
+    className="emotion-4"
   >
     Create an account to join the Storybook community
   </p>
   <div
-    className="emotion-14"
+    className="emotion-5"
   >
     <form
       action="#"
       aria-disabled="false"
-      className="emotion-13"
+      className="emotion-6"
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
     >
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="email"
         >
           Email
@@ -1781,7 +1791,7 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="email"
           disabled={false}
           name="email"
@@ -1792,10 +1802,10 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="password"
         >
           Password
@@ -1804,7 +1814,7 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password1"
           disabled={false}
           name="password"
@@ -1815,11 +1825,11 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
         />
       </div>
       <div
-        className="emotion-12"
+        className="emotion-13"
       >
         <button
           aria-disabled="true"
-          className="emotion-10"
+          className="emotion-14"
           data-testid="submit"
           disabled={true}
           type="submit"
@@ -1828,7 +1838,7 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
         </button>
         <button
           aria-disabled="false"
-          className="emotion-11"
+          className="emotion-15"
           disabled={false}
           type="reset"
         >
@@ -1841,7 +1851,7 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = `
 `;
 
 exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
-.emotion-15 {
+.emotion-0 {
   font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1860,7 +1870,7 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
   border-radius: 7px;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1870,30 +1880,30 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0 {
+.emotion-2 {
   height: 40px;
   z-index: 10;
   margin-left: 32px;
 }
 
-.emotion-1 {
+.emotion-3 {
   height: 40px;
   z-index: 1;
   left: -32px;
   position: relative;
 }
 
-.emotion-3 {
+.emotion-4 {
   margin-top: 20px;
   text-align: center;
 }
 
-.emotion-14 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1903,26 +1913,26 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
   -ms-flex-align: flex-start;
   align-items: flex-start;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
   width: 350px;
   min-height: 189px;
   margin-top: 8px;
 }
 
-.emotion-13 {
+.emotion-6 {
   width: 100%;
   -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
+  -ms-flex-item-align: flex-start;
   align-self: flex-start;
 }
 
-.emotion-13[aria-disabled="true"] {
+.emotion-6[aria-disabled="true"] {
   opacity: 0.6;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1931,44 +1941,45 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
   -ms-flex-pack: stretch;
+  -webkit-justify-content: stretch;
   justify-content: stretch;
   margin-bottom: 10px;
 }
 
-.emotion-4 {
+.emotion-8 {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px;
 }
 
-.emotion-5 {
+.emotion-9 {
   font-size: 14px;
   color: #333333;
   padding: 10px 15px;
   border-radius: 4px;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   outline: none;
   border: 0 none;
   box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:focus {
+.emotion-9:focus {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:active {
+.emotion-9:active {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5[aria-invalid="true"] {
+.emotion-9[aria-invalid="true"] {
   box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -1978,17 +1989,17 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 24px;
 }
 
-.emotion-10 {
+.emotion-14 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -2006,28 +2017,29 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
   box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset;
 }
 
-.emotion-10:focus {
+.emotion-14:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10:active {
+.emotion-14:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-10[aria-disabled="true"] {
+.emotion-14[aria-disabled="true"] {
   cursor: default;
 }
 
-.emotion-11 {
+.emotion-15 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -2043,19 +2055,19 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
   color: #1EA7FD;
 }
 
-.emotion-11:focus {
+.emotion-15:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11:active {
+.emotion-15:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-11[aria-disabled="true"] {
+.emotion-15[aria-disabled="true"] {
   cursor: default;
 }
 
@@ -2064,14 +2076,14 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
     This uses a custom render
   </p>
   <section
-    className="emotion-15"
+    className="emotion-0"
   >
     <div
-      className="emotion-2"
+      className="emotion-1"
     >
       <svg
         aria-label="Storybook Logo"
-        className="emotion-0"
+        className="emotion-2"
         role="img"
         viewBox="0 0 64 64"
       >
@@ -2106,7 +2118,7 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
       </svg>
       <svg
         aria-label="Storybook"
-        className="emotion-1"
+        className="emotion-3"
         role="img"
         viewBox="0 0 200 40"
       >
@@ -2125,26 +2137,26 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
       </svg>
     </div>
     <p
-      className="emotion-3"
+      className="emotion-4"
     >
       Create an account to join the Storybook community
     </p>
     <div
-      className="emotion-14"
+      className="emotion-5"
     >
       <form
         action="#"
         aria-disabled="false"
-        className="emotion-13"
+        className="emotion-6"
         noValidate={true}
         onReset={[Function]}
         onSubmit={[Function]}
       >
         <div
-          className="emotion-6"
+          className="emotion-7"
         >
           <label
-            className="emotion-4"
+            className="emotion-8"
             htmlFor="email"
           >
             Email
@@ -2153,7 +2165,7 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
             aria-disabled="false"
             aria-invalid="false"
             aria-required="true"
-            className="emotion-5"
+            className="emotion-9"
             data-testid="email"
             disabled={false}
             name="email"
@@ -2164,10 +2176,10 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
           />
         </div>
         <div
-          className="emotion-6"
+          className="emotion-7"
         >
           <label
-            className="emotion-4"
+            className="emotion-8"
             htmlFor="password"
           >
             Password
@@ -2176,7 +2188,7 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
             aria-disabled="false"
             aria-invalid="false"
             aria-required="true"
-            className="emotion-5"
+            className="emotion-9"
             data-testid="password1"
             disabled={false}
             name="password"
@@ -2187,11 +2199,11 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
           />
         </div>
         <div
-          className="emotion-12"
+          className="emotion-13"
         >
           <button
             aria-disabled="true"
-            className="emotion-10"
+            className="emotion-14"
             data-testid="submit"
             disabled={true}
             type="submit"
@@ -2200,7 +2212,7 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
           </button>
           <button
             aria-disabled="false"
-            className="emotion-11"
+            className="emotion-15"
             disabled={false}
             type="reset"
           >
@@ -2214,7 +2226,7 @@ exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = `
 `;
 
 exports[`Storyshots Demo/AccountForm Verification 1`] = `
-.emotion-18 {
+.emotion-0 {
   font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2233,7 +2245,7 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
   border-radius: 7px;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2243,30 +2255,30 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0 {
+.emotion-2 {
   height: 40px;
   z-index: 10;
   margin-left: 32px;
 }
 
-.emotion-1 {
+.emotion-3 {
   height: 40px;
   z-index: 1;
   left: -32px;
   position: relative;
 }
 
-.emotion-3 {
+.emotion-4 {
   margin-top: 20px;
   text-align: center;
 }
 
-.emotion-17 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2276,26 +2288,26 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
   -ms-flex-align: flex-start;
   align-items: flex-start;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
   width: 350px;
   min-height: 189px;
   margin-top: 8px;
 }
 
-.emotion-16 {
+.emotion-6 {
   width: 100%;
   -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
+  -ms-flex-item-align: flex-start;
   align-self: flex-start;
 }
 
-.emotion-16[aria-disabled="true"] {
+.emotion-6[aria-disabled="true"] {
   opacity: 0.6;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2304,44 +2316,45 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
   -ms-flex-pack: stretch;
+  -webkit-justify-content: stretch;
   justify-content: stretch;
   margin-bottom: 10px;
 }
 
-.emotion-4 {
+.emotion-8 {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px;
 }
 
-.emotion-5 {
+.emotion-9 {
   font-size: 14px;
   color: #333333;
   padding: 10px 15px;
   border-radius: 4px;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   outline: none;
   border: 0 none;
   box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:focus {
+.emotion-9:focus {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:active {
+.emotion-9:active {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5[aria-invalid="true"] {
+.emotion-9[aria-invalid="true"] {
   box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset;
 }
 
-.emotion-15 {
+.emotion-16 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -2351,17 +2364,17 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 24px;
 }
 
-.emotion-13 {
+.emotion-17 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -2379,28 +2392,29 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
   box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset;
 }
 
-.emotion-13:focus {
+.emotion-17:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-13:active {
+.emotion-17:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-13[aria-disabled="true"] {
+.emotion-17[aria-disabled="true"] {
   cursor: default;
 }
 
-.emotion-14 {
+.emotion-18 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -2416,31 +2430,31 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
   color: #1EA7FD;
 }
 
-.emotion-14:focus {
+.emotion-18:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-14:active {
+.emotion-18:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-14[aria-disabled="true"] {
+.emotion-18[aria-disabled="true"] {
   cursor: default;
 }
 
 <section
-  className="emotion-18"
+  className="emotion-0"
 >
   <div
-    className="emotion-2"
+    className="emotion-1"
   >
     <svg
       aria-label="Storybook Logo"
-      className="emotion-0"
+      className="emotion-2"
       role="img"
       viewBox="0 0 64 64"
     >
@@ -2475,7 +2489,7 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
     </svg>
     <svg
       aria-label="Storybook"
-      className="emotion-1"
+      className="emotion-3"
       role="img"
       viewBox="0 0 200 40"
     >
@@ -2494,26 +2508,26 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
     </svg>
   </div>
   <p
-    className="emotion-3"
+    className="emotion-4"
   >
     Create an account to join the Storybook community
   </p>
   <div
-    className="emotion-17"
+    className="emotion-5"
   >
     <form
       action="#"
       aria-disabled="false"
-      className="emotion-16"
+      className="emotion-6"
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
     >
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="email"
         >
           Email
@@ -2522,7 +2536,7 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="email"
           disabled={false}
           name="email"
@@ -2533,10 +2547,10 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="password"
         >
           Password
@@ -2545,7 +2559,7 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password1"
           disabled={false}
           name="password"
@@ -2556,10 +2570,10 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="verifiedPassword"
         >
           Verify Password
@@ -2568,7 +2582,7 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password2"
           disabled={false}
           name="verifiedPassword"
@@ -2579,11 +2593,11 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
         />
       </div>
       <div
-        className="emotion-15"
+        className="emotion-16"
       >
         <button
           aria-disabled="true"
-          className="emotion-13"
+          className="emotion-17"
           data-testid="submit"
           disabled={true}
           type="submit"
@@ -2592,7 +2606,7 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
         </button>
         <button
           aria-disabled="false"
-          className="emotion-14"
+          className="emotion-18"
           disabled={false}
           type="reset"
         >
@@ -2605,7 +2619,7 @@ exports[`Storyshots Demo/AccountForm Verification 1`] = `
 `;
 
 exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
-.emotion-18 {
+.emotion-0 {
   font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2624,7 +2638,7 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
   border-radius: 7px;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2634,30 +2648,30 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0 {
+.emotion-2 {
   height: 40px;
   z-index: 10;
   margin-left: 32px;
 }
 
-.emotion-1 {
+.emotion-3 {
   height: 40px;
   z-index: 1;
   left: -32px;
   position: relative;
 }
 
-.emotion-3 {
+.emotion-4 {
   margin-top: 20px;
   text-align: center;
 }
 
-.emotion-17 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2667,26 +2681,26 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
   -ms-flex-align: flex-start;
   align-items: flex-start;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
   width: 350px;
   min-height: 189px;
   margin-top: 8px;
 }
 
-.emotion-16 {
+.emotion-6 {
   width: 100%;
   -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
+  -ms-flex-item-align: flex-start;
   align-self: flex-start;
 }
 
-.emotion-16[aria-disabled="true"] {
+.emotion-6[aria-disabled="true"] {
   opacity: 0.6;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2695,44 +2709,45 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
   -ms-flex-pack: stretch;
+  -webkit-justify-content: stretch;
   justify-content: stretch;
   margin-bottom: 10px;
 }
 
-.emotion-4 {
+.emotion-8 {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px;
 }
 
-.emotion-5 {
+.emotion-9 {
   font-size: 14px;
   color: #333333;
   padding: 10px 15px;
   border-radius: 4px;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   outline: none;
   border: 0 none;
   box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:focus {
+.emotion-9:focus {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:active {
+.emotion-9:active {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5[aria-invalid="true"] {
+.emotion-9[aria-invalid="true"] {
   box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset;
 }
 
-.emotion-15 {
+.emotion-16 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -2742,17 +2757,17 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 24px;
 }
 
-.emotion-13 {
+.emotion-17 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -2770,28 +2785,29 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
   box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset;
 }
 
-.emotion-13:focus {
+.emotion-17:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-13:active {
+.emotion-17:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-13[aria-disabled="true"] {
+.emotion-17[aria-disabled="true"] {
   cursor: default;
 }
 
-.emotion-14 {
+.emotion-18 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -2807,31 +2823,31 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
   color: #1EA7FD;
 }
 
-.emotion-14:focus {
+.emotion-18:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-14:active {
+.emotion-18:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-14[aria-disabled="true"] {
+.emotion-18[aria-disabled="true"] {
   cursor: default;
 }
 
 <section
-  className="emotion-18"
+  className="emotion-0"
 >
   <div
-    className="emotion-2"
+    className="emotion-1"
   >
     <svg
       aria-label="Storybook Logo"
-      className="emotion-0"
+      className="emotion-2"
       role="img"
       viewBox="0 0 64 64"
     >
@@ -2866,7 +2882,7 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
     </svg>
     <svg
       aria-label="Storybook"
-      className="emotion-1"
+      className="emotion-3"
       role="img"
       viewBox="0 0 200 40"
     >
@@ -2885,26 +2901,26 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
     </svg>
   </div>
   <p
-    className="emotion-3"
+    className="emotion-4"
   >
     Create an account to join the Storybook community
   </p>
   <div
-    className="emotion-17"
+    className="emotion-5"
   >
     <form
       action="#"
       aria-disabled="false"
-      className="emotion-16"
+      className="emotion-6"
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
     >
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="email"
         >
           Email
@@ -2913,7 +2929,7 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="email"
           disabled={false}
           name="email"
@@ -2924,10 +2940,10 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="password"
         >
           Password
@@ -2936,7 +2952,7 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password1"
           disabled={false}
           name="password"
@@ -2947,10 +2963,10 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="verifiedPassword"
         >
           Verify Password
@@ -2959,7 +2975,7 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password2"
           disabled={false}
           name="verifiedPassword"
@@ -2970,11 +2986,11 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
         />
       </div>
       <div
-        className="emotion-15"
+        className="emotion-16"
       >
         <button
           aria-disabled="true"
-          className="emotion-13"
+          className="emotion-17"
           data-testid="submit"
           disabled={true}
           type="submit"
@@ -2983,7 +2999,7 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
         </button>
         <button
           aria-disabled="false"
-          className="emotion-14"
+          className="emotion-18"
           disabled={false}
           type="reset"
         >
@@ -2996,7 +3012,7 @@ exports[`Storyshots Demo/AccountForm Verification Passsword 1 1`] = `
 `;
 
 exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
-.emotion-18 {
+.emotion-0 {
   font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3015,7 +3031,7 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
   border-radius: 7px;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3025,30 +3041,30 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0 {
+.emotion-2 {
   height: 40px;
   z-index: 10;
   margin-left: 32px;
 }
 
-.emotion-1 {
+.emotion-3 {
   height: 40px;
   z-index: 1;
   left: -32px;
   position: relative;
 }
 
-.emotion-3 {
+.emotion-4 {
   margin-top: 20px;
   text-align: center;
 }
 
-.emotion-17 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3058,26 +3074,26 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
   -ms-flex-align: flex-start;
   align-items: flex-start;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
   width: 350px;
   min-height: 189px;
   margin-top: 8px;
 }
 
-.emotion-16 {
+.emotion-6 {
   width: 100%;
   -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
+  -ms-flex-item-align: flex-start;
   align-self: flex-start;
 }
 
-.emotion-16[aria-disabled="true"] {
+.emotion-6[aria-disabled="true"] {
   opacity: 0.6;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3086,44 +3102,45 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
   -ms-flex-pack: stretch;
+  -webkit-justify-content: stretch;
   justify-content: stretch;
   margin-bottom: 10px;
 }
 
-.emotion-4 {
+.emotion-8 {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px;
 }
 
-.emotion-5 {
+.emotion-9 {
   font-size: 14px;
   color: #333333;
   padding: 10px 15px;
   border-radius: 4px;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   outline: none;
   border: 0 none;
   box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:focus {
+.emotion-9:focus {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:active {
+.emotion-9:active {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5[aria-invalid="true"] {
+.emotion-9[aria-invalid="true"] {
   box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset;
 }
 
-.emotion-15 {
+.emotion-16 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -3133,17 +3150,17 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 24px;
 }
 
-.emotion-13 {
+.emotion-17 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -3161,28 +3178,29 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
   box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset;
 }
 
-.emotion-13:focus {
+.emotion-17:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-13:active {
+.emotion-17:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-13[aria-disabled="true"] {
+.emotion-17[aria-disabled="true"] {
   cursor: default;
 }
 
-.emotion-14 {
+.emotion-18 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -3198,31 +3216,31 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
   color: #1EA7FD;
 }
 
-.emotion-14:focus {
+.emotion-18:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-14:active {
+.emotion-18:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-14[aria-disabled="true"] {
+.emotion-18[aria-disabled="true"] {
   cursor: default;
 }
 
 <section
-  className="emotion-18"
+  className="emotion-0"
 >
   <div
-    className="emotion-2"
+    className="emotion-1"
   >
     <svg
       aria-label="Storybook Logo"
-      className="emotion-0"
+      className="emotion-2"
       role="img"
       viewBox="0 0 64 64"
     >
@@ -3257,7 +3275,7 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
     </svg>
     <svg
       aria-label="Storybook"
-      className="emotion-1"
+      className="emotion-3"
       role="img"
       viewBox="0 0 200 40"
     >
@@ -3276,26 +3294,26 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
     </svg>
   </div>
   <p
-    className="emotion-3"
+    className="emotion-4"
   >
     Create an account to join the Storybook community
   </p>
   <div
-    className="emotion-17"
+    className="emotion-5"
   >
     <form
       action="#"
       aria-disabled="false"
-      className="emotion-16"
+      className="emotion-6"
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
     >
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="email"
         >
           Email
@@ -3304,7 +3322,7 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="email"
           disabled={false}
           name="email"
@@ -3315,10 +3333,10 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="password"
         >
           Password
@@ -3327,7 +3345,7 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password1"
           disabled={false}
           name="password"
@@ -3338,10 +3356,10 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="verifiedPassword"
         >
           Verify Password
@@ -3350,7 +3368,7 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password2"
           disabled={false}
           name="verifiedPassword"
@@ -3361,11 +3379,11 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
         />
       </div>
       <div
-        className="emotion-15"
+        className="emotion-16"
       >
         <button
           aria-disabled="true"
-          className="emotion-13"
+          className="emotion-17"
           data-testid="submit"
           disabled={true}
           type="submit"
@@ -3374,7 +3392,7 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
         </button>
         <button
           aria-disabled="false"
-          className="emotion-14"
+          className="emotion-18"
           disabled={false}
           type="reset"
         >
@@ -3387,7 +3405,7 @@ exports[`Storyshots Demo/AccountForm Verification Password Mismatch 1`] = `
 `;
 
 exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
-.emotion-18 {
+.emotion-0 {
   font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3406,7 +3424,7 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
   border-radius: 7px;
 }
 
-.emotion-2 {
+.emotion-1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3416,30 +3434,30 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0 {
+.emotion-2 {
   height: 40px;
   z-index: 10;
   margin-left: 32px;
 }
 
-.emotion-1 {
+.emotion-3 {
   height: 40px;
   z-index: 1;
   left: -32px;
   position: relative;
 }
 
-.emotion-3 {
+.emotion-4 {
   margin-top: 20px;
   text-align: center;
 }
 
-.emotion-17 {
+.emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3449,26 +3467,26 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
   -ms-flex-align: flex-start;
   align-items: flex-start;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
   width: 350px;
   min-height: 189px;
   margin-top: 8px;
 }
 
-.emotion-16 {
+.emotion-6 {
   width: 100%;
   -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
+  -ms-flex-item-align: flex-start;
   align-self: flex-start;
 }
 
-.emotion-16[aria-disabled="true"] {
+.emotion-6[aria-disabled="true"] {
   opacity: 0.6;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3477,44 +3495,45 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
   -ms-flex-pack: stretch;
+  -webkit-justify-content: stretch;
   justify-content: stretch;
   margin-bottom: 10px;
 }
 
-.emotion-4 {
+.emotion-8 {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px;
 }
 
-.emotion-5 {
+.emotion-9 {
   font-size: 14px;
   color: #333333;
   padding: 10px 15px;
   border-radius: 4px;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   outline: none;
   border: 0 none;
   box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:focus {
+.emotion-9:focus {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5:active {
+.emotion-9:active {
   box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset;
 }
 
-.emotion-5[aria-invalid="true"] {
+.emotion-9[aria-invalid="true"] {
   box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset;
 }
 
-.emotion-15 {
+.emotion-16 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -3524,17 +3543,17 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: 24px;
 }
 
-.emotion-13 {
+.emotion-17 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -3552,28 +3571,29 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
   box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset;
 }
 
-.emotion-13:focus {
+.emotion-17:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-13:active {
+.emotion-17:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-13[aria-disabled="true"] {
+.emotion-17[aria-disabled="true"] {
   cursor: default;
 }
 
-.emotion-14 {
+.emotion-18 {
   background-color: transparent;
   border: 0 none;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
+  -ms-appearance: none;
   appearance: none;
   font-weight: 500;
   font-size: 12px;
@@ -3589,31 +3609,31 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
   color: #1EA7FD;
 }
 
-.emotion-14:focus {
+.emotion-18:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-14:active {
+.emotion-18:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   font-weight: 700;
 }
 
-.emotion-14[aria-disabled="true"] {
+.emotion-18[aria-disabled="true"] {
   cursor: default;
 }
 
 <section
-  className="emotion-18"
+  className="emotion-0"
 >
   <div
-    className="emotion-2"
+    className="emotion-1"
   >
     <svg
       aria-label="Storybook Logo"
-      className="emotion-0"
+      className="emotion-2"
       role="img"
       viewBox="0 0 64 64"
     >
@@ -3648,7 +3668,7 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
     </svg>
     <svg
       aria-label="Storybook"
-      className="emotion-1"
+      className="emotion-3"
       role="img"
       viewBox="0 0 200 40"
     >
@@ -3667,26 +3687,26 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
     </svg>
   </div>
   <p
-    className="emotion-3"
+    className="emotion-4"
   >
     Create an account to join the Storybook community
   </p>
   <div
-    className="emotion-17"
+    className="emotion-5"
   >
     <form
       action="#"
       aria-disabled="false"
-      className="emotion-16"
+      className="emotion-6"
       noValidate={true}
       onReset={[Function]}
       onSubmit={[Function]}
     >
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="email"
         >
           Email
@@ -3695,7 +3715,7 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="email"
           disabled={false}
           name="email"
@@ -3706,10 +3726,10 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="password"
         >
           Password
@@ -3718,7 +3738,7 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password1"
           disabled={false}
           name="password"
@@ -3729,10 +3749,10 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
         />
       </div>
       <div
-        className="emotion-6"
+        className="emotion-7"
       >
         <label
-          className="emotion-4"
+          className="emotion-8"
           htmlFor="verifiedPassword"
         >
           Verify Password
@@ -3741,7 +3761,7 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
           aria-disabled="false"
           aria-invalid="false"
           aria-required="true"
-          className="emotion-5"
+          className="emotion-9"
           data-testid="password2"
           disabled={false}
           name="verifiedPassword"
@@ -3752,11 +3772,11 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
         />
       </div>
       <div
-        className="emotion-15"
+        className="emotion-16"
       >
         <button
           aria-disabled="true"
-          className="emotion-13"
+          className="emotion-17"
           data-testid="submit"
           disabled={true}
           type="submit"
@@ -3765,7 +3785,7 @@ exports[`Storyshots Demo/AccountForm Verification Success 1`] = `
         </button>
         <button
           aria-disabled="false"
-          className="emotion-14"
+          className="emotion-18"
           disabled={false}
           type="reset"
         >
diff --git a/jest.config.js b/jest.config.js
index 37908eba2454..e19970266d6c 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -87,7 +87,11 @@ module.exports = {
     PREVIEW_URL: undefined,
     SNAPSHOT_OS: os.platform() === 'win32' ? 'windows' : 'posix',
   },
-  snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer', 'jest-serializer-html'],
+  snapshotSerializers: [
+    '@emotion/jest/serializer',
+    'enzyme-to-json/serializer',
+    'jest-serializer-html',
+  ],
   coverageDirectory: 'coverage',
   setupFilesAfterEnv: ['./scripts/jest.init.ts'],
   coverageReporters: ['lcov'],
diff --git a/lib/cli/src/versions.ts b/lib/cli/src/versions.ts
index 35b535384de2..7fb54650d2c6 100644
--- a/lib/cli/src/versions.ts
+++ b/lib/cli/src/versions.ts
@@ -1,59 +1,59 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '6.5.0-alpha.58',
-  '@storybook/addon-actions': '6.5.0-alpha.58',
-  '@storybook/addon-backgrounds': '6.5.0-alpha.58',
-  '@storybook/addon-controls': '6.5.0-alpha.58',
-  '@storybook/addon-docs': '6.5.0-alpha.58',
-  '@storybook/addon-essentials': '6.5.0-alpha.58',
-  '@storybook/addon-interactions': '6.5.0-alpha.58',
-  '@storybook/addon-jest': '6.5.0-alpha.58',
-  '@storybook/addon-links': '6.5.0-alpha.58',
-  '@storybook/addon-measure': '6.5.0-alpha.58',
-  '@storybook/addon-outline': '6.5.0-alpha.58',
-  '@storybook/addon-storyshots': '6.5.0-alpha.58',
-  '@storybook/addon-storyshots-puppeteer': '6.5.0-alpha.58',
-  '@storybook/addon-storysource': '6.5.0-alpha.58',
-  '@storybook/addon-toolbars': '6.5.0-alpha.58',
-  '@storybook/addon-viewport': '6.5.0-alpha.58',
-  '@storybook/addons': '6.5.0-alpha.58',
-  '@storybook/angular': '6.5.0-alpha.58',
-  '@storybook/api': '6.5.0-alpha.58',
-  '@storybook/builder-webpack4': '6.5.0-alpha.58',
-  '@storybook/builder-webpack5': '6.5.0-alpha.58',
-  '@storybook/channel-postmessage': '6.5.0-alpha.58',
-  '@storybook/channel-websocket': '6.5.0-alpha.58',
-  '@storybook/channels': '6.5.0-alpha.58',
-  '@storybook/cli': '6.5.0-alpha.58',
-  '@storybook/client-api': '6.5.0-alpha.58',
-  '@storybook/client-logger': '6.5.0-alpha.58',
-  '@storybook/codemod': '6.5.0-alpha.58',
-  '@storybook/components': '6.5.0-alpha.58',
-  '@storybook/core': '6.5.0-alpha.58',
-  '@storybook/core-client': '6.5.0-alpha.58',
-  '@storybook/core-common': '6.5.0-alpha.58',
-  '@storybook/core-events': '6.5.0-alpha.58',
-  '@storybook/core-server': '6.5.0-alpha.58',
-  '@storybook/csf-tools': '6.5.0-alpha.58',
-  '@storybook/docs-tools': '6.5.0-alpha.58',
-  '@storybook/ember': '6.5.0-alpha.58',
-  '@storybook/html': '6.5.0-alpha.58',
-  '@storybook/instrumenter': '6.5.0-alpha.58',
-  '@storybook/manager-webpack4': '6.5.0-alpha.58',
-  '@storybook/manager-webpack5': '6.5.0-alpha.58',
-  '@storybook/node-logger': '6.5.0-alpha.58',
-  '@storybook/postinstall': '6.5.0-alpha.58',
-  '@storybook/preact': '6.5.0-alpha.58',
-  '@storybook/preview-web': '6.5.0-alpha.58',
-  '@storybook/react': '6.5.0-alpha.58',
-  '@storybook/router': '6.5.0-alpha.58',
-  '@storybook/server': '6.5.0-alpha.58',
-  '@storybook/source-loader': '6.5.0-alpha.58',
-  '@storybook/store': '6.5.0-alpha.58',
-  '@storybook/svelte': '6.5.0-alpha.58',
-  '@storybook/theming': '6.5.0-alpha.58',
-  '@storybook/ui': '6.5.0-alpha.58',
-  '@storybook/vue': '6.5.0-alpha.58',
-  '@storybook/vue3': '6.5.0-alpha.58',
-  '@storybook/web-components': '6.5.0-alpha.58',
-};
+  "@storybook/addon-a11y": "6.5.0-alpha.58",
+  "@storybook/addon-actions": "6.5.0-alpha.58",
+  "@storybook/addon-backgrounds": "6.5.0-alpha.58",
+  "@storybook/addon-controls": "6.5.0-alpha.58",
+  "@storybook/addon-docs": "6.5.0-alpha.58",
+  "@storybook/addon-essentials": "6.5.0-alpha.58",
+  "@storybook/addon-interactions": "6.5.0-alpha.58",
+  "@storybook/addon-jest": "6.5.0-alpha.58",
+  "@storybook/addon-links": "6.5.0-alpha.58",
+  "@storybook/addon-measure": "6.5.0-alpha.58",
+  "@storybook/addon-outline": "6.5.0-alpha.58",
+  "@storybook/addon-storyshots": "6.5.0-alpha.58",
+  "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.58",
+  "@storybook/addon-storysource": "6.5.0-alpha.58",
+  "@storybook/addon-toolbars": "6.5.0-alpha.58",
+  "@storybook/addon-viewport": "6.5.0-alpha.58",
+  "@storybook/addons": "6.5.0-alpha.58",
+  "@storybook/angular": "6.5.0-alpha.58",
+  "@storybook/api": "6.5.0-alpha.58",
+  "@storybook/builder-webpack4": "6.5.0-alpha.58",
+  "@storybook/builder-webpack5": "6.5.0-alpha.58",
+  "@storybook/channel-postmessage": "6.5.0-alpha.58",
+  "@storybook/channel-websocket": "6.5.0-alpha.58",
+  "@storybook/channels": "6.5.0-alpha.58",
+  "@storybook/cli": "6.5.0-alpha.58",
+  "@storybook/client-api": "6.5.0-alpha.58",
+  "@storybook/client-logger": "6.5.0-alpha.58",
+  "@storybook/codemod": "6.5.0-alpha.58",
+  "@storybook/components": "6.5.0-alpha.58",
+  "@storybook/core": "6.5.0-alpha.58",
+  "@storybook/core-client": "6.5.0-alpha.58",
+  "@storybook/core-common": "6.5.0-alpha.58",
+  "@storybook/core-events": "6.5.0-alpha.58",
+  "@storybook/core-server": "6.5.0-alpha.58",
+  "@storybook/csf-tools": "6.5.0-alpha.58",
+  "@storybook/docs-tools": "6.5.0-alpha.58",
+  "@storybook/ember": "6.5.0-alpha.58",
+  "@storybook/html": "6.5.0-alpha.58",
+  "@storybook/instrumenter": "6.5.0-alpha.58",
+  "@storybook/manager-webpack4": "6.5.0-alpha.58",
+  "@storybook/manager-webpack5": "6.5.0-alpha.58",
+  "@storybook/node-logger": "6.5.0-alpha.58",
+  "@storybook/postinstall": "6.5.0-alpha.58",
+  "@storybook/preact": "6.5.0-alpha.58",
+  "@storybook/preview-web": "6.5.0-alpha.58",
+  "@storybook/react": "6.5.0-alpha.58",
+  "@storybook/router": "6.5.0-alpha.58",
+  "@storybook/server": "6.5.0-alpha.58",
+  "@storybook/source-loader": "6.5.0-alpha.58",
+  "@storybook/store": "6.5.0-alpha.58",
+  "@storybook/svelte": "6.5.0-alpha.58",
+  "@storybook/theming": "6.5.0-alpha.58",
+  "@storybook/ui": "6.5.0-alpha.58",
+  "@storybook/vue": "6.5.0-alpha.58",
+  "@storybook/vue3": "6.5.0-alpha.58",
+  "@storybook/web-components": "6.5.0-alpha.58"
+}
diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx
index efbd4030a1b9..499a13fe6cb2 100644
--- a/lib/components/src/blocks/DocsPage.stories.tsx
+++ b/lib/components/src/blocks/DocsPage.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Global, css } from '@emotion/core';
+import { Global, css } from '@emotion/react';
 
 import { Title, Subtitle, DocsPageWrapper } from './DocsPage';
 import { ArgsTable, Source, Description } from './index';
diff --git a/lib/components/src/controls/Object.tsx b/lib/components/src/controls/Object.tsx
index ff57f8ae79e6..b8c18b0c0155 100644
--- a/lib/components/src/controls/Object.tsx
+++ b/lib/components/src/controls/Object.tsx
@@ -244,7 +244,7 @@ const getCustomStyleFunction: (theme: Theme) => JsonTreeProps['getStyle'] = (the
 });
 
 export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
-  const theme = useTheme<Theme>();
+  const theme = useTheme();
   const data = useMemo(() => value && cloneDeep(value), [value]);
   const hasData = data !== null && data !== undefined;
 
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-windows b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-windows
index a9553da08453..11110ca9cd1d 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-windows
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-windows
@@ -466,8 +466,6 @@ Object {
         "options": Object {
           "docgenOptions": Object {
             "alias": Object {
-              "@emotion/core": "NODE_MODULES\\\\@emotion\\\\core",
-              "@emotion/styled": "NODE_MODULES\\\\@emotion\\\\styled",
               "@storybook/addons": "ROOT\\\\lib\\\\addons",
               "@storybook/api": "ROOT\\\\lib\\\\api",
               "@storybook/channel-postmessage": "ROOT\\\\lib\\\\channel-postmessage",
@@ -481,7 +479,6 @@ Object {
               "@storybook/semver": "NODE_MODULES\\\\@storybook\\\\semver",
               "@storybook/store": "ROOT\\\\lib\\\\store",
               "@storybook/theming": "ROOT\\\\lib\\\\theming",
-              "emotion-theming": "NODE_MODULES\\\\emotion-theming",
               "react": "NODE_MODULES\\\\react",
               "react-dom": "NODE_MODULES\\\\react-dom",
               "vue$": "NODE_MODULES\\\\vue\\\\dist\\\\vue.esm-bundler.js",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-windows b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-windows
index 7dccbcf7871c..4b68a8843b48 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-windows
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-windows
@@ -465,8 +465,6 @@ Object {
         "options": Object {
           "docgenOptions": Object {
             "alias": Object {
-              "@emotion/core": "NODE_MODULES\\\\@emotion\\\\core",
-              "@emotion/styled": "NODE_MODULES\\\\@emotion\\\\styled",
               "@storybook/addons": "ROOT\\\\lib\\\\addons",
               "@storybook/api": "ROOT\\\\lib\\\\api",
               "@storybook/channel-postmessage": "ROOT\\\\lib\\\\channel-postmessage",
@@ -480,7 +478,6 @@ Object {
               "@storybook/semver": "NODE_MODULES\\\\@storybook\\\\semver",
               "@storybook/store": "ROOT\\\\lib\\\\store",
               "@storybook/theming": "ROOT\\\\lib\\\\theming",
-              "emotion-theming": "NODE_MODULES\\\\emotion-theming",
               "react": "NODE_MODULES\\\\react",
               "react-dom": "NODE_MODULES\\\\react-dom",
               "vue$": "NODE_MODULES\\\\vue\\\\dist\\\\vue.esm-bundler.js",
diff --git a/lib/theming/package.json b/lib/theming/package.json
index f1e787538567..06f222b136ed 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -45,12 +45,11 @@
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
-    "@emotion/core": "^10.3.1",
-    "@emotion/is-prop-valid": "^0.8.6",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/is-prop-valid": "^1.1.2",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "@types/node": "^14.14.20 || ^16.0.0",
     "deep-object-diff": "^1.1.0",
-    "emotion-theming": "^10.0.27",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.0.5",
diff --git a/lib/theming/src/animation.ts b/lib/theming/src/animation.ts
index 800d274d26db..1eca9ab084ad 100644
--- a/lib/theming/src/animation.ts
+++ b/lib/theming/src/animation.ts
@@ -1,4 +1,4 @@
-import { css, keyframes, Keyframes, SerializedStyles } from '@emotion/core';
+import { css, keyframes, Keyframes, SerializedStyles } from '@emotion/react';
 
 export const easing = {
   rubber: 'cubic-bezier(0.175, 0.885, 0.335, 1.05)',
diff --git a/lib/theming/src/emotion10types.ts b/lib/theming/src/emotion10types.ts
new file mode 100644
index 000000000000..6bb35d91fb51
--- /dev/null
+++ b/lib/theming/src/emotion10types.ts
@@ -0,0 +1,266 @@
+import { Interpolation } from '@emotion/react';
+
+export type PropsOf<C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> =
+  JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>;
+
+export type AddOptionalTo<T, U> = DistributiveOmit<T, U> & Partial<Pick<T, Extract<keyof T, U>>>;
+
+type DistributiveOmit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never;
+type Overwrapped<T, U> = Pick<T, Extract<keyof T, keyof U>>;
+
+type JSXInEl = JSX.IntrinsicElements;
+type ReactClassPropKeys = keyof React.ClassAttributes<any>;
+
+type WithTheme<P, T> = P extends { theme: infer Theme }
+  ? P & { theme: Exclude<Theme, undefined> }
+  : P & { theme: T };
+
+interface StyledOptions {
+  label?: string;
+  shouldForwardProp?(propName: string): boolean;
+  target?: string;
+}
+
+interface ComponentSelector {
+  __emotion_styles: any;
+}
+
+export interface StyledComponent<InnerProps, StyleProps, Theme extends object>
+  extends React.FC<InnerProps & DistributiveOmit<StyleProps, 'theme'> & { theme?: Theme }>,
+    ComponentSelector {
+  /**
+   * @desc this method is type-unsafe
+   */
+  withComponent<NewTag extends keyof JSXInEl>(
+    tag: NewTag
+  ): StyledComponent<JSXInEl[NewTag], StyleProps, Theme>;
+  withComponent<Tag extends React.ComponentType<any>>(
+    tag: Tag
+  ): StyledComponent<PropsOf<Tag>, StyleProps, Theme>;
+}
+
+interface CreateStyledComponentBaseThemeless<InnerProps, ExtraProps> {
+  <
+    StyleProps extends DistributiveOmit<
+      Overwrapped<InnerProps, StyleProps>,
+      ReactClassPropKeys
+    > = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>,
+    Theme extends object = object
+  >(
+    ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
+  ): StyledComponent<InnerProps, StyleProps, Theme>;
+  <
+    StyleProps extends DistributiveOmit<
+      Overwrapped<InnerProps, StyleProps>,
+      ReactClassPropKeys
+    > = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>,
+    Theme extends object = object
+  >(
+    template: TemplateStringsArray,
+    ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
+  ): StyledComponent<InnerProps, StyleProps, Theme>;
+}
+
+interface CreateStyledComponentBaseThemed<
+  InnerProps,
+  ExtraProps,
+  StyledInstanceTheme extends object
+> {
+  <
+    StyleProps extends DistributiveOmit<
+      Overwrapped<InnerProps, StyleProps>,
+      ReactClassPropKeys
+    > = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>
+  >(
+    ...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>
+  ): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>;
+  <
+    StyleProps extends DistributiveOmit<
+      Overwrapped<InnerProps, StyleProps>,
+      ReactClassPropKeys
+    > = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>
+  >(
+    template: TemplateStringsArray,
+    ...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>
+  ): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>;
+}
+
+type CreateStyledComponentBase<InnerProps, ExtraProps, StyledInstanceTheme extends object> =
+  // this "reversed" condition checks if StyledInstanceTheme was already parametrized when using CreateStyled
+  object extends StyledInstanceTheme
+    ? CreateStyledComponentBaseThemeless<InnerProps, ExtraProps>
+    : CreateStyledComponentBaseThemed<InnerProps, ExtraProps, StyledInstanceTheme>;
+
+type CreateStyledComponentIntrinsic<Tag extends keyof JSXInEl, ExtraProps, Theme extends object> =
+  CreateStyledComponentBase<JSXInEl[Tag], ExtraProps, Theme>;
+type CreateStyledComponentExtrinsic<
+  Tag extends React.ComponentType<any>,
+  ExtraProps,
+  Theme extends object
+> = CreateStyledComponentBase<PropsOf<Tag>, ExtraProps, Theme>;
+
+interface StyledTags<Theme extends object> {
+  /**
+   * @desc
+   * HTML tags
+   */
+  a: CreateStyledComponentIntrinsic<'a', {}, Theme>;
+  abbr: CreateStyledComponentIntrinsic<'abbr', {}, Theme>;
+  address: CreateStyledComponentIntrinsic<'address', {}, Theme>;
+  area: CreateStyledComponentIntrinsic<'area', {}, Theme>;
+  article: CreateStyledComponentIntrinsic<'article', {}, Theme>;
+  aside: CreateStyledComponentIntrinsic<'aside', {}, Theme>;
+  audio: CreateStyledComponentIntrinsic<'audio', {}, Theme>;
+  b: CreateStyledComponentIntrinsic<'b', {}, Theme>;
+  base: CreateStyledComponentIntrinsic<'base', {}, Theme>;
+  bdi: CreateStyledComponentIntrinsic<'bdi', {}, Theme>;
+  bdo: CreateStyledComponentIntrinsic<'bdo', {}, Theme>;
+  big: CreateStyledComponentIntrinsic<'big', {}, Theme>;
+  blockquote: CreateStyledComponentIntrinsic<'blockquote', {}, Theme>;
+  body: CreateStyledComponentIntrinsic<'body', {}, Theme>;
+  br: CreateStyledComponentIntrinsic<'br', {}, Theme>;
+  button: CreateStyledComponentIntrinsic<'button', {}, Theme>;
+  canvas: CreateStyledComponentIntrinsic<'canvas', {}, Theme>;
+  caption: CreateStyledComponentIntrinsic<'caption', {}, Theme>;
+  cite: CreateStyledComponentIntrinsic<'cite', {}, Theme>;
+  code: CreateStyledComponentIntrinsic<'code', {}, Theme>;
+  col: CreateStyledComponentIntrinsic<'col', {}, Theme>;
+  colgroup: CreateStyledComponentIntrinsic<'colgroup', {}, Theme>;
+  data: CreateStyledComponentIntrinsic<'data', {}, Theme>;
+  datalist: CreateStyledComponentIntrinsic<'datalist', {}, Theme>;
+  dd: CreateStyledComponentIntrinsic<'dd', {}, Theme>;
+  del: CreateStyledComponentIntrinsic<'del', {}, Theme>;
+  details: CreateStyledComponentIntrinsic<'details', {}, Theme>;
+  dfn: CreateStyledComponentIntrinsic<'dfn', {}, Theme>;
+  dialog: CreateStyledComponentIntrinsic<'dialog', {}, Theme>;
+  div: CreateStyledComponentIntrinsic<'div', {}, Theme>;
+  dl: CreateStyledComponentIntrinsic<'dl', {}, Theme>;
+  dt: CreateStyledComponentIntrinsic<'dt', {}, Theme>;
+  em: CreateStyledComponentIntrinsic<'em', {}, Theme>;
+  embed: CreateStyledComponentIntrinsic<'embed', {}, Theme>;
+  fieldset: CreateStyledComponentIntrinsic<'fieldset', {}, Theme>;
+  figcaption: CreateStyledComponentIntrinsic<'figcaption', {}, Theme>;
+  figure: CreateStyledComponentIntrinsic<'figure', {}, Theme>;
+  footer: CreateStyledComponentIntrinsic<'footer', {}, Theme>;
+  form: CreateStyledComponentIntrinsic<'form', {}, Theme>;
+  h1: CreateStyledComponentIntrinsic<'h1', {}, Theme>;
+  h2: CreateStyledComponentIntrinsic<'h2', {}, Theme>;
+  h3: CreateStyledComponentIntrinsic<'h3', {}, Theme>;
+  h4: CreateStyledComponentIntrinsic<'h4', {}, Theme>;
+  h5: CreateStyledComponentIntrinsic<'h5', {}, Theme>;
+  h6: CreateStyledComponentIntrinsic<'h6', {}, Theme>;
+  head: CreateStyledComponentIntrinsic<'head', {}, Theme>;
+  header: CreateStyledComponentIntrinsic<'header', {}, Theme>;
+  hgroup: CreateStyledComponentIntrinsic<'hgroup', {}, Theme>;
+  hr: CreateStyledComponentIntrinsic<'hr', {}, Theme>;
+  html: CreateStyledComponentIntrinsic<'html', {}, Theme>;
+  i: CreateStyledComponentIntrinsic<'i', {}, Theme>;
+  iframe: CreateStyledComponentIntrinsic<'iframe', {}, Theme>;
+  img: CreateStyledComponentIntrinsic<'img', {}, Theme>;
+  input: CreateStyledComponentIntrinsic<'input', {}, Theme>;
+  ins: CreateStyledComponentIntrinsic<'ins', {}, Theme>;
+  kbd: CreateStyledComponentIntrinsic<'kbd', {}, Theme>;
+  keygen: CreateStyledComponentIntrinsic<'keygen', {}, Theme>;
+  label: CreateStyledComponentIntrinsic<'label', {}, Theme>;
+  legend: CreateStyledComponentIntrinsic<'legend', {}, Theme>;
+  li: CreateStyledComponentIntrinsic<'li', {}, Theme>;
+  link: CreateStyledComponentIntrinsic<'link', {}, Theme>;
+  main: CreateStyledComponentIntrinsic<'main', {}, Theme>;
+  map: CreateStyledComponentIntrinsic<'map', {}, Theme>;
+  mark: CreateStyledComponentIntrinsic<'mark', {}, Theme>;
+  /**
+   * @desc
+   * marquee tag is not supported by @types/react
+   */
+  // 'marquee': CreateStyledComponentIntrinsic<'marquee', {}, Theme>;
+  menu: CreateStyledComponentIntrinsic<'menu', {}, Theme>;
+  menuitem: CreateStyledComponentIntrinsic<'menuitem', {}, Theme>;
+  meta: CreateStyledComponentIntrinsic<'meta', {}, Theme>;
+  meter: CreateStyledComponentIntrinsic<'meter', {}, Theme>;
+  nav: CreateStyledComponentIntrinsic<'nav', {}, Theme>;
+  noscript: CreateStyledComponentIntrinsic<'noscript', {}, Theme>;
+  object: CreateStyledComponentIntrinsic<'object', {}, Theme>;
+  ol: CreateStyledComponentIntrinsic<'ol', {}, Theme>;
+  optgroup: CreateStyledComponentIntrinsic<'optgroup', {}, Theme>;
+  option: CreateStyledComponentIntrinsic<'option', {}, Theme>;
+  output: CreateStyledComponentIntrinsic<'output', {}, Theme>;
+  p: CreateStyledComponentIntrinsic<'p', {}, Theme>;
+  param: CreateStyledComponentIntrinsic<'param', {}, Theme>;
+  picture: CreateStyledComponentIntrinsic<'picture', {}, Theme>;
+  pre: CreateStyledComponentIntrinsic<'pre', {}, Theme>;
+  progress: CreateStyledComponentIntrinsic<'progress', {}, Theme>;
+  q: CreateStyledComponentIntrinsic<'q', {}, Theme>;
+  rp: CreateStyledComponentIntrinsic<'rp', {}, Theme>;
+  rt: CreateStyledComponentIntrinsic<'rt', {}, Theme>;
+  ruby: CreateStyledComponentIntrinsic<'ruby', {}, Theme>;
+  s: CreateStyledComponentIntrinsic<'s', {}, Theme>;
+  samp: CreateStyledComponentIntrinsic<'samp', {}, Theme>;
+  script: CreateStyledComponentIntrinsic<'script', {}, Theme>;
+  section: CreateStyledComponentIntrinsic<'section', {}, Theme>;
+  select: CreateStyledComponentIntrinsic<'select', {}, Theme>;
+  small: CreateStyledComponentIntrinsic<'small', {}, Theme>;
+  source: CreateStyledComponentIntrinsic<'source', {}, Theme>;
+  span: CreateStyledComponentIntrinsic<'span', {}, Theme>;
+  strong: CreateStyledComponentIntrinsic<'strong', {}, Theme>;
+  style: CreateStyledComponentIntrinsic<'style', {}, Theme>;
+  sub: CreateStyledComponentIntrinsic<'sub', {}, Theme>;
+  summary: CreateStyledComponentIntrinsic<'summary', {}, Theme>;
+  sup: CreateStyledComponentIntrinsic<'sup', {}, Theme>;
+  table: CreateStyledComponentIntrinsic<'table', {}, Theme>;
+  tbody: CreateStyledComponentIntrinsic<'tbody', {}, Theme>;
+  td: CreateStyledComponentIntrinsic<'td', {}, Theme>;
+  textarea: CreateStyledComponentIntrinsic<'textarea', {}, Theme>;
+  tfoot: CreateStyledComponentIntrinsic<'tfoot', {}, Theme>;
+  th: CreateStyledComponentIntrinsic<'th', {}, Theme>;
+  thead: CreateStyledComponentIntrinsic<'thead', {}, Theme>;
+  time: CreateStyledComponentIntrinsic<'time', {}, Theme>;
+  title: CreateStyledComponentIntrinsic<'title', {}, Theme>;
+  tr: CreateStyledComponentIntrinsic<'tr', {}, Theme>;
+  track: CreateStyledComponentIntrinsic<'track', {}, Theme>;
+  u: CreateStyledComponentIntrinsic<'u', {}, Theme>;
+  ul: CreateStyledComponentIntrinsic<'ul', {}, Theme>;
+  var: CreateStyledComponentIntrinsic<'var', {}, Theme>;
+  video: CreateStyledComponentIntrinsic<'video', {}, Theme>;
+  wbr: CreateStyledComponentIntrinsic<'wbr', {}, Theme>;
+
+  /**
+   * @desc
+   * SVG tags
+   */
+  circle: CreateStyledComponentIntrinsic<'circle', {}, Theme>;
+  clipPath: CreateStyledComponentIntrinsic<'clipPath', {}, Theme>;
+  defs: CreateStyledComponentIntrinsic<'defs', {}, Theme>;
+  ellipse: CreateStyledComponentIntrinsic<'ellipse', {}, Theme>;
+  foreignObject: CreateStyledComponentIntrinsic<'foreignObject', {}, Theme>;
+  g: CreateStyledComponentIntrinsic<'g', {}, Theme>;
+  image: CreateStyledComponentIntrinsic<'image', {}, Theme>;
+  line: CreateStyledComponentIntrinsic<'line', {}, Theme>;
+  linearGradient: CreateStyledComponentIntrinsic<'linearGradient', {}, Theme>;
+  mask: CreateStyledComponentIntrinsic<'mask', {}, Theme>;
+  path: CreateStyledComponentIntrinsic<'path', {}, Theme>;
+  pattern: CreateStyledComponentIntrinsic<'pattern', {}, Theme>;
+  polygon: CreateStyledComponentIntrinsic<'polygon', {}, Theme>;
+  polyline: CreateStyledComponentIntrinsic<'polyline', {}, Theme>;
+  radialGradient: CreateStyledComponentIntrinsic<'radialGradient', {}, Theme>;
+  rect: CreateStyledComponentIntrinsic<'rect', {}, Theme>;
+  stop: CreateStyledComponentIntrinsic<'stop', {}, Theme>;
+  svg: CreateStyledComponentIntrinsic<'svg', {}, Theme>;
+  text: CreateStyledComponentIntrinsic<'text', {}, Theme>;
+  tspan: CreateStyledComponentIntrinsic<'tspan', {}, Theme>;
+}
+
+interface BaseCreateStyled<Theme extends object = any> {
+  <Tag extends React.ComponentType<any>, ExtraProps = {}>(
+    tag: Tag,
+    options?: StyledOptions
+  ): CreateStyledComponentExtrinsic<Tag, ExtraProps, Theme>;
+
+  <Tag extends keyof JSXInEl, ExtraProps = {}>(
+    tag: Tag,
+    options?: StyledOptions
+  ): CreateStyledComponentIntrinsic<Tag, ExtraProps, Theme>;
+}
+
+export interface CreateStyled<Theme extends object = any>
+  extends BaseCreateStyled<Theme>,
+    StyledTags<Theme> {}
diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts
index 4d4bc022bf26..bc3ad78cb04b 100644
--- a/lib/theming/src/index.ts
+++ b/lib/theming/src/index.ts
@@ -1,23 +1,32 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="./typings.d.ts" />
 
-import { CacheProvider } from '@emotion/core';
-import emotionStyled, { CreateStyled } from '@emotion/styled';
+import emotionStyled from '@emotion/styled';
+import * as emotionReact from '@emotion/react';
+// TODO: when releasing 7.0 this should be removed and code should be upgraded to use Emotion 11 types
+import type { CreateStyled, PropsOf, AddOptionalTo } from './emotion10types';
 
 import { Theme } from './types';
 
-export { CacheProvider };
+export type { StyledComponent } from './emotion10types';
 
-export type { StyledComponent } from '@emotion/styled';
-export { Global, keyframes, css, jsx, ClassNames } from '@emotion/core';
-export type { CSSObject, Keyframes } from '@emotion/core';
+export { keyframes, css, jsx, ClassNames, ThemeProvider, CacheProvider } from '@emotion/react';
+export type { CSSObject, Keyframes } from '@emotion/react';
+
+export const useTheme = emotionReact.useTheme as <TTheme = Theme>() => TTheme;
+export const withTheme = emotionReact.withTheme as <C extends React.ComponentType<any>>(
+  component: C
+) => React.FC<AddOptionalTo<PropsOf<C>, 'theme'>>;
+
+export const Global = emotionReact.Global as (props: {
+  styles: emotionReact.Interpolation<Theme>;
+}) => React.ReactElement;
 
 export const styled = emotionStyled as CreateStyled<Theme>;
 
 export * from './base';
 export * from './types';
 
-export { withTheme, useTheme, ThemeProvider } from 'emotion-theming';
 export { default as isPropValid } from '@emotion/is-prop-valid';
 
 export { createGlobal, createReset } from './global';
diff --git a/lib/ui/src/containers/menu.tsx b/lib/ui/src/containers/menu.tsx
index f83857be5373..48c08c399695 100644
--- a/lib/ui/src/containers/menu.tsx
+++ b/lib/ui/src/containers/menu.tsx
@@ -2,7 +2,6 @@ import React, { useMemo, FunctionComponent } from 'react';
 
 import { Badge } from '@storybook/components';
 import type { API } from '@storybook/api';
-import type { Theme } from '@storybook/theming';
 import { styled, useTheme } from '@storybook/theming';
 
 import { shortcutToHumanString } from '@storybook/api/shortcut';
@@ -47,7 +46,7 @@ export const useMenu = (
   showNav: boolean,
   enableShortcuts: boolean
 ) => {
-  const theme = useTheme<Theme>();
+  const theme = useTheme();
   const shortcutKeys = api.getShortcutKeys();
 
   const about = useMemo(
diff --git a/package.json b/package.json
index cb67062d29a0..7eb9bcb61d03 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,8 @@
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.17.2",
     "@compodoc/compodoc": "^1.1.18",
-    "@emotion/snapshot-serializer": "^0.8.2",
+    "@emotion/babel-plugin": "^11.7.2",
+    "@emotion/jest": "^11.8.0",
     "@linear/sdk": "^1.21.0",
     "@nicolo-ribaudo/chokidar-2": "^2.1.8",
     "@nrwl/cli": "12.3.4",
@@ -217,7 +218,6 @@
     "babel-loader": "^8.0.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-emotion": "^10.0.33",
     "babel-plugin-macros": "^3.0.1",
     "chalk": "^4.1.0",
     "chromatic": "^6.0.2",
@@ -247,7 +247,6 @@
     "http-server": "^0.12.3",
     "husky": "^4.3.7",
     "jest": "^26.6.3",
-    "jest-emotion": "^10.0.32",
     "jest-environment-jsdom": "^26.6.2",
     "jest-environment-jsdom-thirteen": "^1.0.1",
     "jest-enzyme": "^7.1.2",
diff --git a/yarn.lock b/yarn.lock
index dbb1c3b6aca2..f153e43ea16a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1375,7 +1375,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.16.7, @babel/plugin-syntax-jsx@npm:^7.2.0, @babel/plugin-syntax-jsx@npm:^7.8.3":
+"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.12.13, @babel/plugin-syntax-jsx@npm:^7.16.7, @babel/plugin-syntax-jsx@npm:^7.2.0, @babel/plugin-syntax-jsx@npm:^7.8.3":
   version: 7.16.7
   resolution: "@babel/plugin-syntax-jsx@npm:7.16.7"
   dependencies:
@@ -2449,7 +2449,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.0, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.3.4, @babel/runtime@npm:^7.4.5, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.0, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.3.4, @babel/runtime@npm:^7.4.5, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.17.2
   resolution: "@babel/runtime@npm:7.17.2"
   dependencies:
@@ -2768,6 +2768,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/babel-plugin@npm:^11.7.1, @emotion/babel-plugin@npm:^11.7.2":
+  version: 11.7.2
+  resolution: "@emotion/babel-plugin@npm:11.7.2"
+  dependencies:
+    "@babel/helper-module-imports": ^7.12.13
+    "@babel/plugin-syntax-jsx": ^7.12.13
+    "@babel/runtime": ^7.13.10
+    "@emotion/hash": ^0.8.0
+    "@emotion/memoize": ^0.7.5
+    "@emotion/serialize": ^1.0.2
+    babel-plugin-macros: ^2.6.1
+    convert-source-map: ^1.5.0
+    escape-string-regexp: ^4.0.0
+    find-root: ^1.1.0
+    source-map: ^0.5.7
+    stylis: 4.0.13
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: b22354b2880006144f32b0e753d7c1c969b9da03b769bed84b11d415f11fe75568f378c8aff67121896f9eab5cd41318b5b09d3bd7cfbc1b7f3a71172948c161
+  languageName: node
+  linkType: hard
+
 "@emotion/cache@npm:^10.0.27":
   version: 10.0.29
   resolution: "@emotion/cache@npm:10.0.29"
@@ -2780,7 +2802,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/core@npm:^10.1.1, @emotion/core@npm:^10.3.1":
+"@emotion/cache@npm:^11.7.1":
+  version: 11.7.1
+  resolution: "@emotion/cache@npm:11.7.1"
+  dependencies:
+    "@emotion/memoize": ^0.7.4
+    "@emotion/sheet": ^1.1.0
+    "@emotion/utils": ^1.0.0
+    "@emotion/weak-memoize": ^0.2.5
+    stylis: 4.0.13
+  checksum: d7bf7827e683ba773a503fc9718effc66b1a0a069bd1c16546da178bc0e72e49706d66459e8d3ef13370f4a82e3078b9cf21991ceef6aecc1095e0afdfd737c6
+  languageName: node
+  linkType: hard
+
+"@emotion/core@npm:^10.1.1":
   version: 10.3.1
   resolution: "@emotion/core@npm:10.3.1"
   dependencies:
@@ -2796,6 +2831,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/css-prettifier@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@emotion/css-prettifier@npm:1.0.1"
+  dependencies:
+    "@emotion/memoize": ^0.7.4
+    stylis: 4.0.13
+  checksum: bb5490433ede97e344ec7b374308cbb793d271d9044565bb735e1adf8ad28e2376e837bb020d7d58772ffeaee3360bced225c8bbc92f8c64b5b91bc9a56490c4
+  languageName: node
+  linkType: hard
+
 "@emotion/css@npm:^10.0.27":
   version: 10.0.27
   resolution: "@emotion/css@npm:10.0.27"
@@ -2807,7 +2852,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/hash@npm:0.8.0":
+"@emotion/hash@npm:0.8.0, @emotion/hash@npm:^0.8.0":
   version: 0.8.0
   resolution: "@emotion/hash@npm:0.8.0"
   checksum: 706303d35d416217cd7eb0d36dbda4627bb8bdf4a32ea387e8dd99be11b8e0a998e10af21216e8a5fade518ad955ff06aa8890f20e694ce3a038ae7fc1000556
@@ -2823,6 +2868,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/is-prop-valid@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@emotion/is-prop-valid@npm:1.1.2"
+  dependencies:
+    "@emotion/memoize": ^0.7.4
+  checksum: 3e658290a9ece7f6149b84e13144e414d5d0535773f78dd15ffabb28ea4aa37346afbf9be178289ecb2a39ec49890a0199da1b86388393de7644f80598a12da6
+  languageName: node
+  linkType: hard
+
+"@emotion/jest@npm:^11.8.0":
+  version: 11.8.0
+  resolution: "@emotion/jest@npm:11.8.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@emotion/css-prettifier": ^1.0.1
+    chalk: ^4.1.0
+    specificity: ^0.4.1
+    stylis: 4.0.13
+  peerDependencies:
+    "@types/jest": ^26.0.14 || ^27.0.0
+    enzyme-to-json: ^3.2.1
+  peerDependenciesMeta:
+    "@types/jest":
+      optional: true
+    enzyme-to-json:
+      optional: true
+  checksum: 7d4190c86ce3ebe430f50b12ad3a699ceef848038754067475d00a1d6ef0cddd340b05edde60d20db85305b02ad07f931e4230644efbafafe34e2f83405463cb
+  languageName: node
+  linkType: hard
+
 "@emotion/memoize@npm:0.7.4":
   version: 0.7.4
   resolution: "@emotion/memoize@npm:0.7.4"
@@ -2830,6 +2905,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/memoize@npm:^0.7.4, @emotion/memoize@npm:^0.7.5":
+  version: 0.7.5
+  resolution: "@emotion/memoize@npm:0.7.5"
+  checksum: 28d061ec9fb9b8c495d58b4e2dcc62207d75d4e8d8f4e6a0b42342d6e7c649d41461e807363d1a0a2c33d2235f6ee59dd6394fbec88b7da65e3d5852fc34387e
+  languageName: node
+  linkType: hard
+
+"@emotion/react@npm:^11.8.1":
+  version: 11.8.1
+  resolution: "@emotion/react@npm:11.8.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@emotion/babel-plugin": ^11.7.1
+    "@emotion/cache": ^11.7.1
+    "@emotion/serialize": ^1.0.2
+    "@emotion/sheet": ^1.1.0
+    "@emotion/utils": ^1.1.0
+    "@emotion/weak-memoize": ^0.2.5
+    hoist-non-react-statics: ^3.3.1
+  peerDependencies:
+    "@babel/core": ^7.0.0
+    react: ">=16.8.0"
+  peerDependenciesMeta:
+    "@babel/core":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: aa85bfae3ac14bb6e6f48de7f48d0daa449b83be0907f6e3df1fd22dfd6c9405d0ff39dbf508351b6b48020fe7e311e8ac4addc475f1a66373c71178d2013174
+  languageName: node
+  linkType: hard
+
 "@emotion/serialize@npm:^0.11.15, @emotion/serialize@npm:^0.11.16":
   version: 0.11.16
   resolution: "@emotion/serialize@npm:0.11.16"
@@ -2843,6 +2949,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/serialize@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@emotion/serialize@npm:1.0.2"
+  dependencies:
+    "@emotion/hash": ^0.8.0
+    "@emotion/memoize": ^0.7.4
+    "@emotion/unitless": ^0.7.5
+    "@emotion/utils": ^1.0.0
+    csstype: ^3.0.2
+  checksum: b29dbf33c1801d2aa039d355fa87bb921a8dd4dcecd9ef8cea0c1d7796d39ea137c913824b3173c7d3acd65ff2bb8bc6912095690a266c79696f5528c1a1c509
+  languageName: node
+  linkType: hard
+
 "@emotion/sheet@npm:0.9.4":
   version: 0.9.4
   resolution: "@emotion/sheet@npm:0.9.4"
@@ -2850,13 +2969,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/snapshot-serializer@npm:^0.8.2":
-  version: 0.8.2
-  resolution: "@emotion/snapshot-serializer@npm:0.8.2"
-  dependencies:
-    chalk: ^2.4.1
-    css: ^2.2.1
-  checksum: 26f5086c9d71e4754fe0a02dab25fd7486f43d4474240324032f4b551e2149899398f06046ed02df7970d5d121a5df42a2fc633861531dae98dc3fc420d444ad
+"@emotion/sheet@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@emotion/sheet@npm:1.1.0"
+  checksum: 5b13035550a08b5c94e24289eed44f1157cfbdc3465e6fe40c492dd113cc10270241f2d5e28b2ed95d4a6fd7b28e31b2d556a1f0fcd632f9e57fbb429870f2d1
   languageName: node
   linkType: hard
 
@@ -2888,6 +3004,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/styled@npm:^11.8.1":
+  version: 11.8.1
+  resolution: "@emotion/styled@npm:11.8.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@emotion/babel-plugin": ^11.7.1
+    "@emotion/is-prop-valid": ^1.1.2
+    "@emotion/serialize": ^1.0.2
+    "@emotion/utils": ^1.1.0
+  peerDependencies:
+    "@babel/core": ^7.0.0
+    "@emotion/react": ^11.0.0-rc.0
+    react: ">=16.8.0"
+  peerDependenciesMeta:
+    "@babel/core":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: b8c9e917ac54454b6816b35c031b9368729393f62792e7498a26605c9349c6c16143ecfc0f99bd5eb0c503896811e39d12bc6c068061cd6b71db0992098b3589
+  languageName: node
+  linkType: hard
+
 "@emotion/stylis@npm:0.8.5":
   version: 0.8.5
   resolution: "@emotion/stylis@npm:0.8.5"
@@ -2895,7 +3033,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:0.7.5, @emotion/unitless@npm:^0.7.0":
+"@emotion/unitless@npm:0.7.5, @emotion/unitless@npm:^0.7.0, @emotion/unitless@npm:^0.7.5":
   version: 0.7.5
   resolution: "@emotion/unitless@npm:0.7.5"
   checksum: 4d0d94f53cb97b4481bbfa394953e1899a0b877644642ba9dd7247c27eb8c48e14e22aeb11411d7d9874685ad85dd5fb5b50eb78c6d8840eb56a84b92dcef2f4
@@ -2909,7 +3047,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/weak-memoize@npm:0.2.5":
+"@emotion/utils@npm:^1.0.0, @emotion/utils@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@emotion/utils@npm:1.1.0"
+  checksum: 4659bb4c447fa8c5303fae5cae829c22ce29ba0d9e0a8fb1f3f33b8bfd9304a435af327abccbf133040eeb1771a572fad3e68decd267e26459b8ea6ea1f2ba68
+  languageName: node
+  linkType: hard
+
+"@emotion/weak-memoize@npm:0.2.5, @emotion/weak-memoize@npm:^0.2.5":
   version: 0.2.5
   resolution: "@emotion/weak-memoize@npm:0.2.5"
   checksum: cabfaaecabbb407d323098afc0bb2dd2ec9aaea0672f8f2c54b84b99d5f8cc680356cf166583fd5593330ceef29f2c26554c2c65dff06c0a8f5f8c7da69d89f1
@@ -6606,6 +6751,7 @@ __metadata:
   dependencies:
     "@angular/core": ^11.2.0
     "@angular/platform-browser-dynamic": ^11.2.0
+    "@emotion/jest": ^11.8.0
     "@jest/transform": ^26.6.2
     "@storybook/addon-docs": 6.5.0-alpha.58
     "@storybook/addons": 6.5.0-alpha.58
@@ -6628,7 +6774,6 @@ __metadata:
     enzyme-to-json: ^3.6.1
     glob: ^7.1.6
     global: ^4.4.0
-    jest-emotion: ^10.0.32
     jest-preset-angular: ^8.3.2
     jest-specific-snapshot: ^4.0.0
     jest-vue-preprocessor: ^1.7.1
@@ -8193,7 +8338,8 @@ __metadata:
     "@compodoc/compodoc": ^1.1.18
     "@cypress/skip-test": ^2.6.1
     "@cypress/webpack-preprocessor": ^5.9.1
-    "@emotion/snapshot-serializer": ^0.8.2
+    "@emotion/babel-plugin": ^11.7.2
+    "@emotion/jest": ^11.8.0
     "@linear/sdk": ^1.21.0
     "@nicolo-ribaudo/chokidar-2": ^2.1.8
     "@nrwl/cli": 12.3.4
@@ -8289,7 +8435,6 @@ __metadata:
     babel-loader: ^8.0.0
     babel-plugin-add-react-displayname: ^0.0.5
     babel-plugin-dynamic-import-node: ^2.3.3
-    babel-plugin-emotion: ^10.0.33
     babel-plugin-macros: ^3.0.1
     chalk: ^4.1.0
     chromatic: ^6.0.2
@@ -8320,7 +8465,6 @@ __metadata:
     http-server: ^0.12.3
     husky: ^4.3.7
     jest: ^26.6.3
-    jest-emotion: ^10.0.32
     jest-environment-jsdom: ^26.6.2
     jest-environment-jsdom-thirteen: ^1.0.1
     jest-enzyme: ^7.1.2
@@ -8620,14 +8764,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/theming@workspace:lib/theming"
   dependencies:
-    "@emotion/core": ^10.3.1
-    "@emotion/is-prop-valid": ^0.8.6
-    "@emotion/styled": ^10.0.27
+    "@emotion/is-prop-valid": ^1.1.2
+    "@emotion/react": ^11.8.1
+    "@emotion/styled": ^11.8.1
     "@storybook/client-logger": 6.5.0-alpha.58
     "@types/node": ^14.14.20 || ^16.0.0
     core-js: ^3.8.2
     deep-object-diff: ^1.1.0
-    emotion-theming: ^10.0.27
     global: ^4.4.0
     memoizerific: ^1.11.3
     polished: ^4.0.5
@@ -9806,13 +9949,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jest@npm:^23.0.2":
-  version: 23.3.14
-  resolution: "@types/jest@npm:23.3.14"
-  checksum: 174691a3e838e96a3fbda641c9c9ca811b3cc8d65f21a913eddf6aa75596f66758224ffe6cc95cf113d7d09c278130f08b5600036e218d8457ca9e0ffdc8bde0
-  languageName: node
-  linkType: hard
-
 "@types/jest@npm:^26.0.16":
   version: 26.0.24
   resolution: "@types/jest@npm:26.0.24"
@@ -13884,7 +14020,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-emotion@npm:^10.0.27, babel-plugin-emotion@npm:^10.0.33":
+"babel-plugin-emotion@npm:^10.0.27":
   version: 10.2.2
   resolution: "babel-plugin-emotion@npm:10.2.2"
   dependencies:
@@ -13974,7 +14110,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-macros@npm:2.8.0, babel-plugin-macros@npm:^2.0.0, babel-plugin-macros@npm:^2.8.0":
+"babel-plugin-macros@npm:2.8.0, babel-plugin-macros@npm:^2.0.0, babel-plugin-macros@npm:^2.6.1, babel-plugin-macros@npm:^2.8.0":
   version: 2.8.0
   resolution: "babel-plugin-macros@npm:2.8.0"
   dependencies:
@@ -18314,7 +18450,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css@npm:^2.0.0, css@npm:^2.1.0, css@npm:^2.2.1":
+"css@npm:^2.0.0, css@npm:^2.1.0":
   version: 2.2.4
   resolution: "css@npm:2.2.4"
   dependencies:
@@ -24805,7 +24941,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.3.0":
+"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -27545,18 +27681,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-emotion@npm:^10.0.32":
-  version: 10.0.32
-  resolution: "jest-emotion@npm:10.0.32"
-  dependencies:
-    "@babel/runtime": ^7.5.5
-    "@types/jest": ^23.0.2
-    chalk: ^2.4.1
-    css: ^2.2.1
-  checksum: 45a133e48dbda6f6462e8e3c715398fdbf847eccfc08dcccb2e9decd7b8fa66b7404e56b0bc46e6d833d13fb0d75e0721745956693d854538d066e8de30fc850
-  languageName: node
-  linkType: hard
-
 "jest-environment-enzyme@npm:^7.1.2":
   version: 7.1.2
   resolution: "jest-environment-enzyme@npm:7.1.2"
@@ -33637,6 +33761,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "official-storybook@workspace:examples/official-storybook"
   dependencies:
+    "@emotion/jest": ^11.8.0
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3
     "@storybook/addon-a11y": 6.5.0-alpha.58
     "@storybook/addon-actions": 6.5.0-alpha.58
@@ -33673,7 +33798,6 @@ __metadata:
     express: ^4.17.1
     format-json: ^1.0.3
     global: ^4.4.0
-    jest-emotion: ^10.0.32
     lodash: ^4.17.21
     paths.macro: ^3.0.1
     prop-types: ^15.7.2
@@ -41541,6 +41665,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"specificity@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "specificity@npm:0.4.1"
+  bin:
+    specificity: ./bin/specificity
+  checksum: 5da85a05052b55e344cb0f5bce5d07cbabbbe8945da176a481589db5a13e9fbcfa879ceb075cf564b94e680fae0a2ab14ea55cc87496b86a6d5122545946d7c2
+  languageName: node
+  linkType: hard
+
 "speed-measure-webpack-plugin@npm:1.4.2":
   version: 1.4.2
   resolution: "speed-measure-webpack-plugin@npm:1.4.2"
@@ -42398,6 +42531,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.0.13":
+  version: 4.0.13
+  resolution: "stylis@npm:4.0.13"
+  checksum: bd567c440b4f1acf8962b1b3aa7985c4e04d7badfe1e0f1c7ee2a60912de2718973850c524001a3d52f5fc9a0e3dcd204b8bd7e2d47d4934462e9f749fd9c7bc
+  languageName: node
+  linkType: hard
+
 "stylis@npm:^3.5.0":
   version: 3.5.4
   resolution: "stylis@npm:3.5.4"