diff --git a/core/components/package.json b/core/components/package.json
index 9f0b39991..0f4656768 100644
--- a/core/components/package.json
+++ b/core/components/package.json
@@ -18,7 +18,7 @@
     "react-popper": "1.3.2",
     "react-select": "2.3.0",
     "react-sortable-hoc": "^0.8.3",
-    "styled-components": "5.0.0"
+    "styled-components": "5.2.0"
   },
   "peerDependencies": {
     "react": ">= 16.8.6",
diff --git a/core/components/styled.ts b/core/components/styled.ts
index 98762b4fb..57598c737 100644
--- a/core/components/styled.ts
+++ b/core/components/styled.ts
@@ -1,4 +1,4 @@
-import styled, { createGlobalStyle, css, keyframes, ThemeProvider } from "styled-components";
+import styled, { createGlobalStyle, css, keyframes, ServerStyleSheet, ThemeProvider } from "styled-components";
 
 import domElements from "./_helpers/dom-elements";
 /* import cosmos specific helpers */
@@ -34,4 +34,4 @@ domElements.forEach((domElement) => {
 });
 
 export default styledWithHelpers;
-export { keyframes, css, createGlobalStyle, ThemeProvider };
+export { keyframes, css, createGlobalStyle, ThemeProvider, ServerStyleSheet };
diff --git a/internal/test/unit/__snapshots__/select.test.tsx.snap b/internal/test/unit/__snapshots__/select.test.tsx.snap
index 5e7fc1791..2c1743f0c 100644
--- a/internal/test/unit/__snapshots__/select.test.tsx.snap
+++ b/internal/test/unit/__snapshots__/select.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Select async variant renders ReactSelect 1`] = `
 <div
-  class="sc-fzXfNS eRkzCO"
+  class="sc-jNnnWF"
   data-cosmos-key="select.wrapper"
 >
   <div
@@ -49,14 +49,14 @@ exports[`Select async variant renders ReactSelect 1`] = `
       >
         <i
           aria-hidden="true"
-          class="sc-AykKG cDHlYS sc-fzXfNM hOMxOk"
+          class="sc-eCApGN bEFYQX sc-jcwofb igzzSo"
           color="default"
           data-cosmos-key="icon"
           name="dropdown-fill"
           size="14"
         >
           <svg
-            class="sc-AykKH fyfrZH"
+            class="sc-jSFkmK iKoGjl"
             color="#333"
             height="14"
             viewBox="0 0 20 20"
@@ -75,7 +75,7 @@ exports[`Select async variant renders ReactSelect 1`] = `
 
 exports[`Select customOptionRenderer variant renders ReactSelect 1`] = `
 <div
-  class="sc-fzXfNS eRkzCO"
+  class="sc-jNnnWF"
   data-cosmos-key="select.wrapper"
 >
   <div
@@ -105,14 +105,14 @@ exports[`Select customOptionRenderer variant renders ReactSelect 1`] = `
       >
         <i
           aria-hidden="true"
-          class="sc-AykKG cDHlYS sc-fzXfNM hOMxOk"
+          class="sc-eCApGN bEFYQX sc-jcwofb igzzSo"
           color="default"
           data-cosmos-key="icon"
           name="dropdown-fill"
           size="14"
         >
           <svg
-            class="sc-AykKH fyfrZH"
+            class="sc-jSFkmK iKoGjl"
             color="#333"
             height="14"
             viewBox="0 0 20 20"
@@ -131,7 +131,7 @@ exports[`Select customOptionRenderer variant renders ReactSelect 1`] = `
 
 exports[`Select multiple variant renders ReactSelect 1`] = `
 <div
-  class="sc-fzXfNS eRkzCO"
+  class="sc-jNnnWF"
   data-cosmos-key="select.wrapper"
 >
   <div
@@ -161,14 +161,14 @@ exports[`Select multiple variant renders ReactSelect 1`] = `
       >
         <i
           aria-hidden="true"
-          class="sc-AykKG cDHlYS sc-fzXfNM hOMxOk"
+          class="sc-eCApGN bEFYQX sc-jcwofb igzzSo"
           color="default"
           data-cosmos-key="icon"
           name="dropdown-fill"
           size="14"
         >
           <svg
-            class="sc-AykKH fyfrZH"
+            class="sc-jSFkmK iKoGjl"
             color="#333"
             height="14"
             viewBox="0 0 20 20"
@@ -187,7 +187,7 @@ exports[`Select multiple variant renders ReactSelect 1`] = `
 
 exports[`Select searchable variant renders ReactSelect 1`] = `
 <div
-  class="sc-fzXfNS eRkzCO"
+  class="sc-jNnnWF"
   data-cosmos-key="select.wrapper"
 >
   <div
@@ -234,14 +234,14 @@ exports[`Select searchable variant renders ReactSelect 1`] = `
       >
         <i
           aria-hidden="true"
-          class="sc-AykKG cDHlYS sc-fzXfNM hOMxOk"
+          class="sc-eCApGN bEFYQX sc-jcwofb igzzSo"
           color="default"
           data-cosmos-key="icon"
           name="dropdown-fill"
           size="14"
         >
           <svg
-            class="sc-AykKH fyfrZH"
+            class="sc-jSFkmK iKoGjl"
             color="#333"
             height="14"
             viewBox="0 0 20 20"
@@ -260,17 +260,17 @@ exports[`Select searchable variant renders ReactSelect 1`] = `
 
 exports[`Select simple variant renders SimpleSelect 1`] = `
 <div
-  class="sc-fzXfNh dqVlVQ"
+  class="sc-bYwzba gBeoyx"
 >
   <i
-    class="sc-AykKG cDHlYS sc-fzXfNi oXrmB"
+    class="sc-eCApGN bEFYQX sc-kLokih dYREUu"
     color="default"
     data-cosmos-key="icon"
     name="dropdown-fill"
     size="14"
   >
     <svg
-      class="sc-AykKH fyfrZH"
+      class="sc-jSFkmK iKoGjl"
       color="#333"
       height="14"
       viewBox="0 0 20 20"
@@ -282,7 +282,7 @@ exports[`Select simple variant renders SimpleSelect 1`] = `
     </svg>
   </i>
   <select
-    class="sc-fzXfMD sc-fzXfNg gnEaJI"
+    class="sc-bCwgka sc-ezzayL cdDQkD gySXpF"
     data-cosmos-key="select"
     placeholder="Something"
   >
diff --git a/yarn.lock b/yarn.lock
index d2b33eb0a..ccfbeb02d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1076,10 +1076,10 @@
   dependencies:
     "@emotion/memoize" "^0.6.6"
 
-"@emotion/is-prop-valid@^0.8.3":
-  version "0.8.6"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz#4757646f0a58e9dec614c47c838e7147d88c263c"
-  integrity sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==
+"@emotion/is-prop-valid@^0.8.8":
+  version "0.8.8"
+  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
   dependencies:
     "@emotion/memoize" "0.7.4"
 
@@ -14033,14 +14033,14 @@ style-loader@^0.23.1:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
-styled-components@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.0.tgz#fc59932c9b574571fa3cd462c862af1956114ff2"
-  integrity sha512-F7VhIXIbUXJ8KO3pU9wap2Hxdtqa6PZ1uHrx+YXTgRjyxGlwvBHb8LULXPabmDA+uEliTXRJM5WcZntJnKNn3g==
+styled-components@5.2:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.2.0.tgz#6dcb5aa8a629c84b8d5ab34b7167e3e0c6f7ed74"
+  integrity sha512-9qE8Vgp8C5cpGAIdFaQVAl89Zgx1TDM4Yf4tlHbO9cPijtpSXTMLHy9lmP0lb+yImhgPFb1AmZ1qMUubmg3HLg==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^0.8.3"
+    "@emotion/is-prop-valid" "^0.8.8"
     "@emotion/stylis" "^0.8.4"
     "@emotion/unitless" "^0.7.4"
     babel-plugin-styled-components ">= 1"