diff --git a/jest.config.js b/jest.config.js
index a1c232f..8d551de 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -16,7 +16,7 @@ const styleFiles = fs
   .map((file) => path.join(__dirname, 'src', file, 'styles.ts'));
 
 const config = {
-  preset: 'ts-jest',
+  // preset: 'ts-jest',
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!**/index.ts', '!**/*.stories.tsx'],
   testPathIgnorePatterns: ['/node_modules/', '/build/'],
   setupFilesAfterEnv: ['<rootDir>/jestSetup.ts', ...styleFiles],
diff --git a/jestSetup.ts b/jestSetup.ts
index 03b2292..cb5a798 100644
--- a/jestSetup.ts
+++ b/jestSetup.ts
@@ -1,3 +1,4 @@
+import 'regenerator-runtime/runtime';
 import 'jest-styled-components';
 import '@testing-library/jest-dom';
 import 'jest-extended';
diff --git a/package.json b/package.json
index e6572c4..81bd92b 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "@typescript-eslint/parser": "4.10.0",
     "babel-loader": "^8.2.2",
     "babel-node": "^0.0.1-security",
+    "babel-plugin-styled-components": "^2.1.4",
     "cross-env": "^7.0.3",
     "docz": "^2.3.1",
     "eslint": "7.16.0",
diff --git a/src/Avatar/__snapshots__/Avatar.spec.tsx.snap b/src/Avatar/__snapshots__/Avatar.spec.tsx.snap
index d988d00..2796e26 100644
--- a/src/Avatar/__snapshots__/Avatar.spec.tsx.snap
+++ b/src/Avatar/__snapshots__/Avatar.spec.tsx.snap
@@ -15,7 +15,6 @@ exports[`circle variant Render size large 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="64"
     variant="circle"
@@ -39,7 +38,6 @@ exports[`circle variant Render size medium 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="40"
     variant="circle"
@@ -63,7 +61,6 @@ exports[`circle variant Render size small 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="32"
     variant="circle"
@@ -87,7 +84,6 @@ exports[`circle variant Render size tiny 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="24"
     variant="circle"
@@ -111,7 +107,6 @@ exports[`circle variant Render size undefined 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="40"
     variant="circle"
@@ -135,7 +130,6 @@ exports[`square variant Render size large 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="64"
     variant="square"
@@ -159,7 +153,6 @@ exports[`square variant Render size medium 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="40"
     variant="square"
@@ -183,7 +176,6 @@ exports[`square variant Render size small 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="32"
     variant="square"
@@ -207,7 +199,6 @@ exports[`square variant Render size tiny 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="24"
     variant="square"
@@ -231,7 +222,6 @@ exports[`square variant Render size undefined 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="40"
     variant="square"
@@ -255,7 +245,6 @@ exports[`undefined variant Render size large 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="64"
     variant="square"
@@ -279,7 +268,6 @@ exports[`undefined variant Render size medium 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="40"
     variant="square"
@@ -303,7 +291,6 @@ exports[`undefined variant Render size small 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="32"
     variant="square"
@@ -327,7 +314,6 @@ exports[`undefined variant Render size tiny 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="24"
     variant="square"
@@ -351,7 +337,6 @@ exports[`undefined variant Render size undefined 1`] = `
 <div>
   <img
     class="c0 c1"
-    css=","
     data-testid="pbl-avatar"
     height="40"
     variant="square"
diff --git a/src/IconButton/__snapshots__/IconButton.spec.tsx.snap b/src/IconButton/__snapshots__/IconButton.spec.tsx.snap
index 8248f4f..21336e5 100644
--- a/src/IconButton/__snapshots__/IconButton.spec.tsx.snap
+++ b/src/IconButton/__snapshots__/IconButton.spec.tsx.snap
@@ -23,7 +23,7 @@ exports[`Render large icon button with correct styles 1`] = `
   width: 36px;
   height: 36px;
   transition: transform 0.2s;
-  transform: scale(       1     );
+  transform: scale( 1 );
 }
 
 .c0:enabled {
@@ -79,7 +79,7 @@ exports[`Render medium icon button with correct styles 1`] = `
   width: 28px;
   height: 28px;
   transition: transform 0.2s;
-  transform: scale(       1     );
+  transform: scale( 1 );
 }
 
 .c0:enabled {
@@ -135,7 +135,7 @@ exports[`Render small icon button with correct styles 1`] = `
   width: 20px;
   height: 20px;
   transition: transform 0.2s;
-  transform: scale(       1     );
+  transform: scale( 1 );
 }
 
 .c0:enabled {
diff --git a/src/Input/__snapshots__/Input.spec.tsx.snap b/src/Input/__snapshots__/Input.spec.tsx.snap
index 0f1067e..9a650f4 100644
--- a/src/Input/__snapshots__/Input.spec.tsx.snap
+++ b/src/Input/__snapshots__/Input.spec.tsx.snap
@@ -29,7 +29,6 @@ exports[`Render without value 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <div
       class="c1"
@@ -98,7 +97,6 @@ exports[`Show error when an error message is given 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <div
       class="c1"
@@ -181,7 +179,6 @@ exports[`Show infotext when available 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <div
       class="c1"
@@ -263,7 +260,6 @@ exports[`Show label when available 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <label
       data-testid="pbl-input-label"
diff --git a/src/Modal/__snapshots__/Modal.spec.tsx.snap b/src/Modal/__snapshots__/Modal.spec.tsx.snap
index c2c468b..21c0b6d 100644
--- a/src/Modal/__snapshots__/Modal.spec.tsx.snap
+++ b/src/Modal/__snapshots__/Modal.spec.tsx.snap
@@ -54,19 +54,16 @@ exports[`Render closed modal with just a content element 1`] = `
   >
     <div
       class="c0"
-      css=","
       data-testid="pbl-modal-backdrop"
     >
       <div
         class="c1"
-        css=","
         data-testid="pbl-modal-area"
         maxwidth="medium"
       >
         <div
           aria-modal="true"
           class="c2"
-          css=","
           data-testid="pbl-modal-box"
         >
           <div>
@@ -104,7 +101,6 @@ exports[`Render with additional panes 1`] = `
 
 <div
   class="c0"
-  css=","
   data-testid="pbl-modal-area"
   maxwidth="medium"
   open=""
@@ -112,7 +108,6 @@ exports[`Render with additional panes 1`] = `
   <div
     aria-modal="true"
     class="c1"
-    css=","
     data-testid="pbl-modal-box"
   >
     <div>
@@ -121,12 +116,10 @@ exports[`Render with additional panes 1`] = `
   </div>
   <div
     class="c2"
-    css=","
     data-testid="pbl-modal-pane"
   >
     <div
       class="c1"
-      css=","
       data-testid="pbl-modal-pane-box"
     >
       <div>
@@ -136,12 +129,10 @@ exports[`Render with additional panes 1`] = `
   </div>
   <div
     class="c2"
-    css=","
     data-testid="pbl-modal-pane"
   >
     <div
       class="c1"
-      css=","
       data-testid="pbl-modal-pane-box"
     >
       <div>
@@ -151,12 +142,10 @@ exports[`Render with additional panes 1`] = `
   </div>
   <div
     class="c2"
-    css=","
     data-testid="pbl-modal-pane"
   >
     <div
       class="c1"
-      css=","
       data-testid="pbl-modal-pane-box"
     >
       <div>
@@ -196,7 +185,6 @@ exports[`Render with title 1`] = `
 <div
   aria-modal="true"
   class="c0"
-  css=","
   data-testid="pbl-modal-box"
 >
   <div
@@ -248,7 +236,6 @@ exports[`Render with title and topRightItem 1`] = `
 <div
   aria-modal="true"
   class="c0"
-  css=","
   data-testid="pbl-modal-box"
 >
   <div
@@ -292,7 +279,6 @@ exports[`Render with topRightItem 1`] = `
 <div
   aria-modal="true"
   class="c0"
-  css=","
   data-testid="pbl-modal-box"
 >
   <div
diff --git a/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap b/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap
index 4b75435..15fed30 100644
--- a/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap
+++ b/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap
@@ -49,7 +49,6 @@ exports[`Render without value 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <div
       class="c1"
@@ -158,7 +157,6 @@ exports[`Show error when an error message is given 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <div
       class="c1"
@@ -280,7 +278,6 @@ exports[`Show infotext when available 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <div
       class="c1"
@@ -401,7 +398,6 @@ exports[`Show label when available 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <label
       data-testid="pbl-nativeSelect-label"
diff --git a/src/Switch/__snapshots__/Switch.spec.tsx.snap b/src/Switch/__snapshots__/Switch.spec.tsx.snap
index 261afca..6f79afa 100644
--- a/src/Switch/__snapshots__/Switch.spec.tsx.snap
+++ b/src/Switch/__snapshots__/Switch.spec.tsx.snap
@@ -26,7 +26,7 @@ exports[`Render switch checked 1`] = `
   position: relative;
   width: calc(2 * 18px + 2 * (2px + 1px));
   height: calc(1 * 18px + 2 * (2px + 1px));
-  border-radius: calc(     (         18px + 2 *           2px + 2 *           1px       ) * 0.5   );
+  border-radius: calc( ( 18px + 2 * 2px + 2 * 1px ) * 0.5 );
   padding: 2px;
   background-color: var(--pbl-theme-colors-common-white);
   border: 1px solid var(--pbl-theme-colors-borders-main);
@@ -38,7 +38,7 @@ exports[`Render switch checked 1`] = `
   box-sizing: border-box;
   width: 18px;
   height: 18px;
-  transform: translateX(     18px   );
+  transform: translateX( 18px );
   border-radius: 50%;
   transition: background-color 0.15s ease-in-out,transform 0.15s ease-in-out;
   background-color: var(--pbl-theme-colors-brand-main);
@@ -96,7 +96,7 @@ exports[`Render switch unchecked 1`] = `
   position: relative;
   width: calc(2 * 18px + 2 * (2px + 1px));
   height: calc(1 * 18px + 2 * (2px + 1px));
-  border-radius: calc(     (         18px + 2 *           2px + 2 *           1px       ) * 0.5   );
+  border-radius: calc( ( 18px + 2 * 2px + 2 * 1px ) * 0.5 );
   padding: 2px;
   background-color: var(--pbl-theme-colors-common-white);
   border: 1px solid var(--pbl-theme-colors-borders-main);
@@ -108,7 +108,7 @@ exports[`Render switch unchecked 1`] = `
   box-sizing: border-box;
   width: 18px;
   height: 18px;
-  transform: translateX(     0   );
+  transform: translateX( 0 );
   border-radius: 50%;
   transition: background-color 0.15s ease-in-out,transform 0.15s ease-in-out;
   background-color: var(--pbl-theme-colors-gray-500);
diff --git a/src/Tabs/__snapshots__/Tabs.spec.tsx.snap b/src/Tabs/__snapshots__/Tabs.spec.tsx.snap
index 2992883..03f3ba2 100644
--- a/src/Tabs/__snapshots__/Tabs.spec.tsx.snap
+++ b/src/Tabs/__snapshots__/Tabs.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`Render first selected 1`] = `
   flex-wrap: wrap;
 }
 
-.c2 {
+.c3 {
   box-sizing: border-box;
   font-family: var(--pbl-theme-typography-base-fontFamily);
   font-style: normal;
@@ -20,7 +20,7 @@ exports[`Render first selected 1`] = `
   margin-bottom: var(--pbl-theme-typography-button-marginBottom);
 }
 
-.c1 {
+.c2 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -43,28 +43,28 @@ exports[`Render first selected 1`] = `
   margin: 0;
 }
 
-.c1:enabled {
+.c2:enabled {
   cursor: pointer;
 }
 
-.c1:disabled {
+.c2:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c1:focus {
+.c2:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c1:active {
+.c2:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c1:after {
+.c2:after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -76,7 +76,7 @@ exports[`Render first selected 1`] = `
   background-color: var(--pbl-theme-colors-brand-main);
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -96,28 +96,28 @@ exports[`Render first selected 1`] = `
   white-space: nowrap;
 }
 
-.c3:enabled {
+.c4:enabled {
   cursor: pointer;
 }
 
-.c3:disabled {
+.c4:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c3:hover {
+.c4:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c3:focus {
+.c4:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c3:active {
+.c4:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c4 {
+.c5 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -136,28 +136,28 @@ exports[`Render first selected 1`] = `
   white-space: nowrap;
 }
 
-.c4:enabled {
+.c5:enabled {
   cursor: pointer;
 }
 
-.c4:disabled {
+.c5:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c4:focus {
+.c5:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c4:active {
+.c5:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c6 {
+.c8 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -175,28 +175,28 @@ exports[`Render first selected 1`] = `
   white-space: nowrap;
 }
 
-.c6:enabled {
+.c8:enabled {
   cursor: pointer;
 }
 
-.c6:disabled {
+.c8:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c6:hover {
+.c8:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c6:focus {
+.c8:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c6:active {
+.c8:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c7 {
+.c9 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -217,28 +217,28 @@ exports[`Render first selected 1`] = `
   margin: 0;
 }
 
-.c7:enabled {
+.c9:enabled {
   cursor: pointer;
 }
 
-.c7:disabled {
+.c9:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c7:hover {
+.c9:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c7:focus {
+.c9:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c7:active {
+.c9:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c7:after {
+.c9:after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -250,24 +250,30 @@ exports[`Render first selected 1`] = `
   background-color: var(--pbl-theme-colors-brand-main);
 }
 
-.c5 {
+.c7 {
   box-sizing: border-box;
   display: flex;
   width: 20px;
   height: 20px;
 }
 
-.c5>* {
+.c7>* {
   width: 20px;
   height: 20px;
 }
 
+.c1 {
+  opacity: 0;
+}
+
+.c6 {
+  opacity: 0;
+  pointer-events: none;
+}
+
 <div>
   <div
-    class="c0"
-    css="
-                  opacity: 0;
-                "
+    class="c0 c1"
     data-testid="pbl-tabs"
     flexwrap="wrap"
     mx="-4px"
@@ -275,42 +281,42 @@ exports[`Render first selected 1`] = `
   >
     <button
       aria-selected="true"
-      class="c1"
+      class="c2"
       data-testid="pbl-tab"
       mx="4px"
       name="hello"
       role="tab"
     >
       <span
-        class="c2"
+        class="c3"
       >
         Hello
       </span>
     </button>
     <button
       aria-selected="false"
-      class="c3"
+      class="c4"
       data-testid="pbl-tab"
       mx="4px"
       name="world"
       role="tab"
     >
       <span
-        class="c2"
+        class="c3"
       >
         World
       </span>
     </button>
     <button
       aria-selected="false"
-      class="c3"
+      class="c4"
       data-testid="pbl-tab"
       mx="4px"
       name="bye"
       role="tab"
     >
       <span
-        class="c2"
+        class="c3"
       >
         Bye
       </span>
@@ -318,17 +324,13 @@ exports[`Render first selected 1`] = `
     <button
       aria-haspopup="menu"
       aria-selected="false"
-      class="c4"
-      css="
-                      opacity: 0;
-                      pointer-events: none;
-                    "
+      class="c5 c6"
       data-testid="pbl-tab"
       ml="4"
       role="tab"
     >
       <div
-        class="c5"
+        class="c7"
       >
         <svg
           height="24"
@@ -353,39 +355,39 @@ exports[`Render first selected 1`] = `
   >
     <button
       aria-selected="false"
-      class="c6"
+      class="c8"
       data-testid="pbl-tab"
       name="hello"
       role="tab"
     >
       <span
-        class="c2"
+        class="c3"
       >
         Hello
       </span>
     </button>
     <button
       aria-selected="true"
-      class="c7"
+      class="c9"
       data-testid="pbl-tab"
       name="world"
       role="tab"
     >
       <span
-        class="c2"
+        class="c3"
       >
         World
       </span>
     </button>
     <button
       aria-selected="false"
-      class="c6"
+      class="c8"
       data-testid="pbl-tab"
       name="bye"
       role="tab"
     >
       <span
-        class="c2"
+        class="c3"
       >
         Bye
       </span>
@@ -403,7 +405,7 @@ exports[`Render tabs with icons 1`] = `
   flex-wrap: wrap;
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   font-family: var(--pbl-theme-typography-base-fontFamily);
   font-style: normal;
@@ -414,7 +416,7 @@ exports[`Render tabs with icons 1`] = `
   margin-bottom: var(--pbl-theme-typography-button-marginBottom);
 }
 
-.c1 {
+.c2 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -434,28 +436,28 @@ exports[`Render tabs with icons 1`] = `
   white-space: nowrap;
 }
 
-.c1:enabled {
+.c2:enabled {
   cursor: pointer;
 }
 
-.c1:disabled {
+.c2:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c1:focus {
+.c2:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c1:active {
+.c2:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c4 {
+.c5 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -478,28 +480,28 @@ exports[`Render tabs with icons 1`] = `
   margin: 0;
 }
 
-.c4:enabled {
+.c5:enabled {
   cursor: pointer;
 }
 
-.c4:disabled {
+.c5:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c4:hover {
+.c5:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c4:focus {
+.c5:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c4:active {
+.c5:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c4:after {
+.c5:after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -511,7 +513,7 @@ exports[`Render tabs with icons 1`] = `
   background-color: var(--pbl-theme-colors-brand-main);
 }
 
-.c5 {
+.c6 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -530,28 +532,28 @@ exports[`Render tabs with icons 1`] = `
   white-space: nowrap;
 }
 
-.c5:enabled {
+.c6:enabled {
   cursor: pointer;
 }
 
-.c5:disabled {
+.c6:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c5:hover {
+.c6:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c5:focus {
+.c6:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c5:active {
+.c6:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c7 {
+.c9 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -569,28 +571,28 @@ exports[`Render tabs with icons 1`] = `
   white-space: nowrap;
 }
 
-.c7:enabled {
+.c9:enabled {
   cursor: pointer;
 }
 
-.c7:disabled {
+.c9:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c7:hover {
+.c9:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c7:focus {
+.c9:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c7:active {
+.c9:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c2 {
+.c3 {
   box-sizing: border-box;
   display: flex;
   margin-right: 8px;
@@ -598,29 +600,35 @@ exports[`Render tabs with icons 1`] = `
   height: 20px;
 }
 
-.c2>* {
+.c3>* {
   width: 20px;
   height: 20px;
 }
 
-.c6 {
+.c8 {
   box-sizing: border-box;
   display: flex;
   width: 20px;
   height: 20px;
 }
 
-.c6>* {
+.c8>* {
   width: 20px;
   height: 20px;
 }
 
+.c1 {
+  opacity: 0;
+}
+
+.c7 {
+  opacity: 0;
+  pointer-events: none;
+}
+
 <div>
   <div
-    class="c0"
-    css="
-                  opacity: 0;
-                "
+    class="c0 c1"
     data-testid="pbl-tabs"
     flexwrap="wrap"
     mx="-4px"
@@ -628,14 +636,14 @@ exports[`Render tabs with icons 1`] = `
   >
     <button
       aria-selected="false"
-      class="c1"
+      class="c2"
       data-testid="pbl-tab"
       mx="4px"
       name="first"
       role="tab"
     >
       <div
-        class="c2"
+        class="c3"
       >
         <div
           data-testid="icon1"
@@ -644,21 +652,21 @@ exports[`Render tabs with icons 1`] = `
         </div>
       </div>
       <span
-        class="c3"
+        class="c4"
       >
         First tab
       </span>
     </button>
     <button
       aria-selected="true"
-      class="c4"
+      class="c5"
       data-testid="pbl-tab"
       mx="4px"
       name="second"
       role="tab"
     >
       <div
-        class="c2"
+        class="c3"
       >
         <div
           data-testid="icon2"
@@ -667,21 +675,21 @@ exports[`Render tabs with icons 1`] = `
         </div>
       </div>
       <span
-        class="c3"
+        class="c4"
       >
         Second tab
       </span>
     </button>
     <button
       aria-selected="false"
-      class="c1"
+      class="c2"
       data-testid="pbl-tab"
       mx="4px"
       name="third"
       role="tab"
     >
       <div
-        class="c2"
+        class="c3"
       >
         <div
           data-testid="icon3"
@@ -690,7 +698,7 @@ exports[`Render tabs with icons 1`] = `
         </div>
       </div>
       <span
-        class="c3"
+        class="c4"
       >
         Third tab
       </span>
@@ -698,17 +706,13 @@ exports[`Render tabs with icons 1`] = `
     <button
       aria-haspopup="menu"
       aria-selected="false"
-      class="c5"
-      css="
-                      opacity: 0;
-                      pointer-events: none;
-                    "
+      class="c6 c7"
       data-testid="pbl-tab"
       ml="4"
       role="tab"
     >
       <div
-        class="c6"
+        class="c8"
       >
         <svg
           height="24"
@@ -733,13 +737,13 @@ exports[`Render tabs with icons 1`] = `
   >
     <button
       aria-selected="false"
-      class="c7"
+      class="c9"
       data-testid="pbl-tab"
       name="first"
       role="tab"
     >
       <div
-        class="c2"
+        class="c3"
       >
         <div
           data-testid="icon1"
@@ -748,20 +752,20 @@ exports[`Render tabs with icons 1`] = `
         </div>
       </div>
       <span
-        class="c3"
+        class="c4"
       >
         First tab
       </span>
     </button>
     <button
       aria-selected="false"
-      class="c7"
+      class="c9"
       data-testid="pbl-tab"
       name="second"
       role="tab"
     >
       <div
-        class="c2"
+        class="c3"
       >
         <div
           data-testid="icon2"
@@ -770,20 +774,20 @@ exports[`Render tabs with icons 1`] = `
         </div>
       </div>
       <span
-        class="c3"
+        class="c4"
       >
         Second tab
       </span>
     </button>
     <button
       aria-selected="false"
-      class="c7"
+      class="c9"
       data-testid="pbl-tab"
       name="third"
       role="tab"
     >
       <div
-        class="c2"
+        class="c3"
       >
         <div
           data-testid="icon3"
@@ -792,7 +796,7 @@ exports[`Render tabs with icons 1`] = `
         </div>
       </div>
       <span
-        class="c3"
+        class="c4"
       >
         Third tab
       </span>
@@ -971,7 +975,6 @@ exports[`Show "more" tab when there are too many tabs to fit the content 1`] = `
 <div>
   <div
     class="c0"
-    css=","
     data-testid="pbl-tabs"
     fake-width="100"
     flexwrap="wrap"
@@ -996,7 +999,7 @@ exports[`Show "more" tab when there are too many tabs to fit the content 1`] = `
     <button
       aria-haspopup="menu"
       aria-selected="false"
-      class="c3"
+      class="c3 "
       data-testid="pbl-tab"
       fake-width="50"
       ml="4"
@@ -1095,7 +1098,7 @@ exports[`Work with one tab 1`] = `
   flex-wrap: wrap;
 }
 
-.c2 {
+.c3 {
   box-sizing: border-box;
   font-family: var(--pbl-theme-typography-base-fontFamily);
   font-style: normal;
@@ -1106,7 +1109,7 @@ exports[`Work with one tab 1`] = `
   margin-bottom: var(--pbl-theme-typography-button-marginBottom);
 }
 
-.c1 {
+.c2 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -1129,28 +1132,28 @@ exports[`Work with one tab 1`] = `
   margin: 0;
 }
 
-.c1:enabled {
+.c2:enabled {
   cursor: pointer;
 }
 
-.c1:disabled {
+.c2:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c1:hover {
+.c2:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c1:focus {
+.c2:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c1:active {
+.c2:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c1:after {
+.c2:after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -1162,7 +1165,7 @@ exports[`Work with one tab 1`] = `
   background-color: var(--pbl-theme-colors-brand-main);
 }
 
-.c3 {
+.c4 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -1181,28 +1184,28 @@ exports[`Work with one tab 1`] = `
   white-space: nowrap;
 }
 
-.c3:enabled {
+.c4:enabled {
   cursor: pointer;
 }
 
-.c3:disabled {
+.c4:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c3:hover {
+.c4:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c3:focus {
+.c4:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c3:active {
+.c4:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c5 {
+.c7 {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
@@ -1220,45 +1223,51 @@ exports[`Work with one tab 1`] = `
   white-space: nowrap;
 }
 
-.c5:enabled {
+.c7:enabled {
   cursor: pointer;
 }
 
-.c5:disabled {
+.c7:disabled {
   opacity: 0.4;
   cursor: normal;
 }
 
-.c5:hover {
+.c7:hover {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c5:focus {
+.c7:focus {
   box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest);
 }
 
-.c5:active {
+.c7:active {
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
 
-.c4 {
+.c6 {
   box-sizing: border-box;
   display: flex;
   width: 20px;
   height: 20px;
 }
 
-.c4>* {
+.c6>* {
   width: 20px;
   height: 20px;
 }
 
+.c1 {
+  opacity: 0;
+}
+
+.c5 {
+  opacity: 0;
+  pointer-events: none;
+}
+
 <div>
   <div
-    class="c0"
-    css="
-                  opacity: 0;
-                "
+    class="c0 c1"
     data-testid="pbl-tabs"
     flexwrap="wrap"
     mx="-4px"
@@ -1266,14 +1275,14 @@ exports[`Work with one tab 1`] = `
   >
     <button
       aria-selected="true"
-      class="c1"
+      class="c2"
       data-testid="pbl-tab"
       mx="4px"
       name="hello"
       role="tab"
     >
       <span
-        class="c2"
+        class="c3"
       >
         Hello
       </span>
@@ -1281,17 +1290,13 @@ exports[`Work with one tab 1`] = `
     <button
       aria-haspopup="menu"
       aria-selected="false"
-      class="c3"
-      css="
-                      opacity: 0;
-                      pointer-events: none;
-                    "
+      class="c4 c5"
       data-testid="pbl-tab"
       ml="4"
       role="tab"
     >
       <div
-        class="c4"
+        class="c6"
       >
         <svg
           height="24"
@@ -1316,13 +1321,13 @@ exports[`Work with one tab 1`] = `
   >
     <button
       aria-selected="false"
-      class="c5"
+      class="c7"
       data-testid="pbl-tab"
       name="hello"
       role="tab"
     >
       <span
-        class="c2"
+        class="c3"
       >
         Hello
       </span>
diff --git a/src/TextArea/__snapshots__/TextArea.spec.tsx.snap b/src/TextArea/__snapshots__/TextArea.spec.tsx.snap
index 1bbe1be..5ce7baa 100644
--- a/src/TextArea/__snapshots__/TextArea.spec.tsx.snap
+++ b/src/TextArea/__snapshots__/TextArea.spec.tsx.snap
@@ -30,7 +30,6 @@ exports[`Render without value 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <div
       class="c1"
@@ -102,7 +101,6 @@ exports[`Show error when an error message is given 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <div
       class="c1"
@@ -189,7 +187,6 @@ exports[`Show infotext when available 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <div
       class="c1"
@@ -275,7 +272,6 @@ exports[`Show label when available 1`] = `
 <div>
   <div
     class="c0"
-    css=","
   >
     <label
       data-testid="pbl-textArea-label"
diff --git a/src/ToastCard/__snapshots__/ToastCard.spec.tsx.snap b/src/ToastCard/__snapshots__/ToastCard.spec.tsx.snap
index 5d2a0dd..785a2ac 100644
--- a/src/ToastCard/__snapshots__/ToastCard.spec.tsx.snap
+++ b/src/ToastCard/__snapshots__/ToastCard.spec.tsx.snap
@@ -79,17 +79,12 @@ exports[`type error Render toast card with custom icon 1`] = `
   margin-right: 12px;
 }
 
-.c0>* {
+.c1>* {
   display: block;
 }
 
 <div
-  class="c0"
-  css="
-  & > * {
-    display: block;
-  }
-,,"
+  class="c0 c1"
   data-testid="pbl-toastcard-iconbox"
   fillcolor="negative.main"
   mr="5"
@@ -107,11 +102,7 @@ exports[`type error Render toast card with only title 1`] = `
   margin-right: 12px;
 }
 
-.c2>* {
-  display: block;
-}
-
-.c3 {
+.c4 {
   box-sizing: border-box;
   flex-grow: 1;
 }
@@ -122,12 +113,12 @@ exports[`type error Render toast card with only title 1`] = `
   align-items: center;
 }
 
-.c4 {
+.c5 {
   box-sizing: border-box;
   display: flex;
 }
 
-.c5 {
+.c6 {
   box-sizing: border-box;
   font-family: var(--pbl-theme-typography-base-fontFamily);
   font-style: normal;
@@ -149,6 +140,10 @@ exports[`type error Render toast card with only title 1`] = `
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
 }
 
+.c3>* {
+  display: block;
+}
+
 <div
   aria-aria-describedby=":rb:-title"
   aria-aria-labelledby=":rb:-title"
@@ -161,12 +156,7 @@ exports[`type error Render toast card with only title 1`] = `
     class="c1"
   >
     <div
-      class="c2"
-      css="
-  & > * {
-    display: block;
-  }
-,,"
+      class="c2 c3"
       data-testid="pbl-toastcard-iconbox"
       fillcolor="negative.main"
       mr="5"
@@ -187,14 +177,14 @@ exports[`type error Render toast card with only title 1`] = `
       </svg>
     </div>
     <div
-      class="c3"
+      class="c4"
       flexgrow="1"
     >
       <div
-        class="c4"
+        class="c5"
       >
         <h4
-          class="c5"
+          class="c6"
           customstyles="[object Object]"
           data-testid="pbl-toastcard-title"
           flexgrow="1"
@@ -215,17 +205,12 @@ exports[`type info Render toast card with custom icon 1`] = `
   margin-right: 12px;
 }
 
-.c0>* {
+.c1>* {
   display: block;
 }
 
 <div
-  class="c0"
-  css="
-  & > * {
-    display: block;
-  }
-,,"
+  class="c0 c1"
   data-testid="pbl-toastcard-iconbox"
   fillcolor="common.white"
   mr="5"
@@ -243,11 +228,7 @@ exports[`type info Render toast card with only title 1`] = `
   margin-right: 12px;
 }
 
-.c2>* {
-  display: block;
-}
-
-.c3 {
+.c4 {
   box-sizing: border-box;
   flex-grow: 1;
 }
@@ -258,12 +239,12 @@ exports[`type info Render toast card with only title 1`] = `
   align-items: center;
 }
 
-.c4 {
+.c5 {
   box-sizing: border-box;
   display: flex;
 }
 
-.c5 {
+.c6 {
   box-sizing: border-box;
   font-family: var(--pbl-theme-typography-base-fontFamily);
   font-style: normal;
@@ -285,6 +266,10 @@ exports[`type info Render toast card with only title 1`] = `
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
 }
 
+.c3>* {
+  display: block;
+}
+
 <div
   aria-aria-describedby=":r5:-title"
   aria-aria-labelledby=":r5:-title"
@@ -297,12 +282,7 @@ exports[`type info Render toast card with only title 1`] = `
     class="c1"
   >
     <div
-      class="c2"
-      css="
-  & > * {
-    display: block;
-  }
-,,"
+      class="c2 c3"
       data-testid="pbl-toastcard-iconbox"
       fillcolor="common.white"
       mr="5"
@@ -323,14 +303,14 @@ exports[`type info Render toast card with only title 1`] = `
       </svg>
     </div>
     <div
-      class="c3"
+      class="c4"
       flexgrow="1"
     >
       <div
-        class="c4"
+        class="c5"
       >
         <h4
-          class="c5"
+          class="c6"
           customstyles="[object Object]"
           data-testid="pbl-toastcard-title"
           flexgrow="1"
@@ -351,17 +331,12 @@ exports[`type success Render toast card with custom icon 1`] = `
   margin-right: 12px;
 }
 
-.c0>* {
+.c1>* {
   display: block;
 }
 
 <div
-  class="c0"
-  css="
-  & > * {
-    display: block;
-  }
-,,"
+  class="c0 c1"
   data-testid="pbl-toastcard-iconbox"
   fillcolor="positive.main"
   mr="5"
@@ -379,11 +354,7 @@ exports[`type success Render toast card with only title 1`] = `
   margin-right: 12px;
 }
 
-.c2>* {
-  display: block;
-}
-
-.c3 {
+.c4 {
   box-sizing: border-box;
   flex-grow: 1;
 }
@@ -394,12 +365,12 @@ exports[`type success Render toast card with only title 1`] = `
   align-items: center;
 }
 
-.c4 {
+.c5 {
   box-sizing: border-box;
   display: flex;
 }
 
-.c5 {
+.c6 {
   box-sizing: border-box;
   font-family: var(--pbl-theme-typography-base-fontFamily);
   font-style: normal;
@@ -421,6 +392,10 @@ exports[`type success Render toast card with only title 1`] = `
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
 }
 
+.c3>* {
+  display: block;
+}
+
 <div
   aria-aria-describedby=":r7:-title"
   aria-aria-labelledby=":r7:-title"
@@ -433,12 +408,7 @@ exports[`type success Render toast card with only title 1`] = `
     class="c1"
   >
     <div
-      class="c2"
-      css="
-  & > * {
-    display: block;
-  }
-,,"
+      class="c2 c3"
       data-testid="pbl-toastcard-iconbox"
       fillcolor="positive.main"
       mr="5"
@@ -459,14 +429,14 @@ exports[`type success Render toast card with only title 1`] = `
       </svg>
     </div>
     <div
-      class="c3"
+      class="c4"
       flexgrow="1"
     >
       <div
-        class="c4"
+        class="c5"
       >
         <h4
-          class="c5"
+          class="c6"
           customstyles="[object Object]"
           data-testid="pbl-toastcard-title"
           flexgrow="1"
@@ -487,17 +457,12 @@ exports[`type undefined Render toast card with custom icon 1`] = `
   margin-right: 12px;
 }
 
-.c0>* {
+.c1>* {
   display: block;
 }
 
 <div
-  class="c0"
-  css="
-  & > * {
-    display: block;
-  }
-,,"
+  class="c0 c1"
   data-testid="pbl-toastcard-iconbox"
   fillcolor="common.white"
   mr="5"
@@ -515,11 +480,7 @@ exports[`type undefined Render toast card with only title 1`] = `
   margin-right: 12px;
 }
 
-.c2>* {
-  display: block;
-}
-
-.c3 {
+.c4 {
   box-sizing: border-box;
   flex-grow: 1;
 }
@@ -530,12 +491,12 @@ exports[`type undefined Render toast card with only title 1`] = `
   align-items: center;
 }
 
-.c4 {
+.c5 {
   box-sizing: border-box;
   display: flex;
 }
 
-.c5 {
+.c6 {
   box-sizing: border-box;
   font-family: var(--pbl-theme-typography-base-fontFamily);
   font-style: normal;
@@ -557,6 +518,10 @@ exports[`type undefined Render toast card with only title 1`] = `
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
 }
 
+.c3>* {
+  display: block;
+}
+
 <div
   aria-aria-describedby=":r3:-title"
   aria-aria-labelledby=":r3:-title"
@@ -569,12 +534,7 @@ exports[`type undefined Render toast card with only title 1`] = `
     class="c1"
   >
     <div
-      class="c2"
-      css="
-  & > * {
-    display: block;
-  }
-,,"
+      class="c2 c3"
       data-testid="pbl-toastcard-iconbox"
       fillcolor="common.white"
       mr="5"
@@ -584,14 +544,14 @@ exports[`type undefined Render toast card with only title 1`] = `
       </div>
     </div>
     <div
-      class="c3"
+      class="c4"
       flexgrow="1"
     >
       <div
-        class="c4"
+        class="c5"
       >
         <h4
-          class="c5"
+          class="c6"
           customstyles="[object Object]"
           data-testid="pbl-toastcard-title"
           flexgrow="1"
@@ -612,17 +572,12 @@ exports[`type unknown Render toast card with custom icon 1`] = `
   margin-right: 12px;
 }
 
-.c0>* {
+.c1>* {
   display: block;
 }
 
 <div
-  class="c0"
-  css="
-  & > * {
-    display: block;
-  }
-,,"
+  class="c0 c1"
   data-testid="pbl-toastcard-iconbox"
   fillcolor="common.white"
   mr="5"
@@ -640,11 +595,7 @@ exports[`type unknown Render toast card with only title 1`] = `
   margin-right: 12px;
 }
 
-.c2>* {
-  display: block;
-}
-
-.c3 {
+.c4 {
   box-sizing: border-box;
   flex-grow: 1;
 }
@@ -655,12 +606,12 @@ exports[`type unknown Render toast card with only title 1`] = `
   align-items: center;
 }
 
-.c4 {
+.c5 {
   box-sizing: border-box;
   display: flex;
 }
 
-.c5 {
+.c6 {
   box-sizing: border-box;
   font-family: var(--pbl-theme-typography-base-fontFamily);
   font-style: normal;
@@ -682,6 +633,10 @@ exports[`type unknown Render toast card with only title 1`] = `
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
 }
 
+.c3>* {
+  display: block;
+}
+
 <div
   aria-aria-describedby=":rd:-title"
   aria-aria-labelledby=":rd:-title"
@@ -694,12 +649,7 @@ exports[`type unknown Render toast card with only title 1`] = `
     class="c1"
   >
     <div
-      class="c2"
-      css="
-  & > * {
-    display: block;
-  }
-,,"
+      class="c2 c3"
       data-testid="pbl-toastcard-iconbox"
       fillcolor="common.white"
       mr="5"
@@ -709,14 +659,14 @@ exports[`type unknown Render toast card with only title 1`] = `
       </div>
     </div>
     <div
-      class="c3"
+      class="c4"
       flexgrow="1"
     >
       <div
-        class="c4"
+        class="c5"
       >
         <h4
-          class="c5"
+          class="c6"
           customstyles="[object Object]"
           data-testid="pbl-toastcard-title"
           flexgrow="1"
@@ -737,17 +687,12 @@ exports[`type warning Render toast card with custom icon 1`] = `
   margin-right: 12px;
 }
 
-.c0>* {
+.c1>* {
   display: block;
 }
 
 <div
-  class="c0"
-  css="
-  & > * {
-    display: block;
-  }
-,,"
+  class="c0 c1"
   data-testid="pbl-toastcard-iconbox"
   fillcolor="neutral.main"
   mr="5"
@@ -765,11 +710,7 @@ exports[`type warning Render toast card with only title 1`] = `
   margin-right: 12px;
 }
 
-.c2>* {
-  display: block;
-}
-
-.c3 {
+.c4 {
   box-sizing: border-box;
   flex-grow: 1;
 }
@@ -780,12 +721,12 @@ exports[`type warning Render toast card with only title 1`] = `
   align-items: center;
 }
 
-.c4 {
+.c5 {
   box-sizing: border-box;
   display: flex;
 }
 
-.c5 {
+.c6 {
   box-sizing: border-box;
   font-family: var(--pbl-theme-typography-base-fontFamily);
   font-style: normal;
@@ -807,6 +748,10 @@ exports[`type warning Render toast card with only title 1`] = `
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
 }
 
+.c3>* {
+  display: block;
+}
+
 <div
   aria-aria-describedby=":r9:-title"
   aria-aria-labelledby=":r9:-title"
@@ -819,12 +764,7 @@ exports[`type warning Render toast card with only title 1`] = `
     class="c1"
   >
     <div
-      class="c2"
-      css="
-  & > * {
-    display: block;
-  }
-,,"
+      class="c2 c3"
       data-testid="pbl-toastcard-iconbox"
       fillcolor="neutral.main"
       mr="5"
@@ -845,14 +785,14 @@ exports[`type warning Render toast card with only title 1`] = `
       </svg>
     </div>
     <div
-      class="c3"
+      class="c4"
       flexgrow="1"
     >
       <div
-        class="c4"
+        class="c5"
       >
         <h4
-          class="c5"
+          class="c6"
           customstyles="[object Object]"
           data-testid="pbl-toastcard-title"
           flexgrow="1"
diff --git a/src/Toolbar/__snapshots__/Toolbar.spec.tsx.snap b/src/Toolbar/__snapshots__/Toolbar.spec.tsx.snap
index 8cadcec..9c80043 100644
--- a/src/Toolbar/__snapshots__/Toolbar.spec.tsx.snap
+++ b/src/Toolbar/__snapshots__/Toolbar.spec.tsx.snap
@@ -25,7 +25,7 @@ exports[`Render toolbar 1`] = `
   width: 20px;
   height: 20px;
   transition: transform 0.2s;
-  transform: scale(       1     );
+  transform: scale( 1 );
 }
 
 .c1:enabled {
diff --git a/src/styleHelpers/breakpoint.spec.ts b/src/styleHelpers/breakpoint.spec.ts
index 52f2578..f678927 100644
--- a/src/styleHelpers/breakpoint.spec.ts
+++ b/src/styleHelpers/breakpoint.spec.ts
@@ -20,7 +20,7 @@ test('Get media query with styles when media query was found', () => {
     },
   } as any) as any;
   expect(output.map((s) => s.trim()).join(' ')).toEqual(
-    '@media only screen and (min-width: var(--pbl-theme-breakpoints-md)) { background-color: red; }'
+    '@media only screen and (min-width: var(--pbl-theme-breakpoints-md)) { background-color:red; }'
   );
 });
 
@@ -43,7 +43,7 @@ test('Get media below query with styles when media query was found', () => {
     },
   } as any) as any;
   expect(output.map((s) => s.trim()).join(' ')).toEqual(
-    '@media only screen and (max-width: calc(var(--pbl-theme-breakpoints-md) - 1px)) { background-color: red; }'
+    '@media only screen and (max-width: calc(var(--pbl-theme-breakpoints-md) - 1px)) { background-color:red; }'
   );
 });
 
diff --git a/yarn.lock b/yarn.lock
index a7049df..b5c455a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -68,6 +68,15 @@
   dependencies:
     "@babel/highlight" "^7.14.5"
 
+"@babel/code-frame@^7.25.9":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
 "@babel/compat-data@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.13.tgz#27e19e0ed3726ccf54067ced4109501765e7e2e8"
@@ -203,6 +212,17 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.25.9":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f"
+  integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==
+  dependencies:
+    "@babel/parser" "^7.26.2"
+    "@babel/types" "^7.26.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
 "@babel/helper-annotate-as-pure@^7.10.4", "@babel/helper-annotate-as-pure@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz#0f58e86dfc4bb3b1fcd7db806570e177d439b6ab"
@@ -217,6 +237,13 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
+"@babel/helper-annotate-as-pure@^7.22.5":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
+  integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.12.13.tgz#6bc20361c88b0a74d05137a65cac8d3cbf6f61fc"
@@ -394,6 +421,14 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
+"@babel/helper-module-imports@^7.22.5":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
 "@babel/helper-module-transforms@^7.10.5", "@babel/helper-module-transforms@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz#7de42f10d789b423eb902ebd24031ca77cb1e10e"
@@ -452,6 +487,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
   integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
 
+"@babel/helper-plugin-utils@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz#9cbdd63a9443a2c92a725cca7ebca12cc8dd9f46"
+  integrity sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==
+
 "@babel/helper-remap-async-to-generator@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.12.13.tgz#170365f4140e2d20e5c88f8ba23c24468c296878"
@@ -532,6 +572,11 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
 "@babel/helper-validator-identifier@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
@@ -542,6 +587,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
   integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==
 
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
 "@babel/helper-validator-option@^7.12.16":
   version "7.12.16"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.16.tgz#f73cbd3bbba51915216c5dea908e9b206bb10051"
@@ -636,6 +686,13 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.16.tgz#cc31257419d2c3189d394081635703f549fc1ed4"
   integrity sha512-c/+u9cqV6F0+4Hpq01jnJO+GLp2DdT63ppz9Xa+6cHaajM9VFzK/iDXiKK65YtpeVwu+ctfS6iqlMqRgQRzeCw==
 
+"@babel/parser@^7.25.9", "@babel/parser@^7.26.2":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11"
+  integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==
+  dependencies:
+    "@babel/types" "^7.26.0"
+
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.14.5.tgz#4b467302e1548ed3b1be43beae2cc9cf45e0bb7e"
@@ -1027,6 +1084,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-syntax-jsx@^7.22.5":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290"
+  integrity sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -1964,6 +2028,15 @@
     "@babel/parser" "^7.12.13"
     "@babel/types" "^7.12.13"
 
+"@babel/template@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
+  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
 "@babel/template@^7.3.3":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
@@ -2018,6 +2091,19 @@
     globals "^11.1.0"
     lodash "^4.17.19"
 
+"@babel/traverse@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
+  integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/generator" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.25.9"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.11.tgz#a86e4d71e30a9b6ee102590446c98662589283ce"
@@ -2044,6 +2130,14 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.25.9", "@babel/types@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
+  integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
 "@base2/pretty-print-object@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047"
@@ -2683,6 +2777,38 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@juggle/resize-observer@^3.3.1":
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
@@ -5676,6 +5802,17 @@ babel-plugin-remove-graphql-queries@^2.16.1:
   resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz#bacfcd87eabdfffe025072c11602a9586cd0285a"
   integrity sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==
 
+babel-plugin-styled-components@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092"
+  integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/plugin-syntax-jsx" "^7.22.5"
+    lodash "^4.17.21"
+    picomatch "^2.3.1"
+
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -13357,6 +13494,11 @@ jsesc@^2.5.1:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
+jsesc@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
+  integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
+
 jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
@@ -13856,7 +13998,7 @@ lodash.without@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
   integrity sha1-PNRXSgC2e643OpS3SHcmQFB7eqw=
 
-lodash@4.17.21, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.3.0:
+lodash@4.17.21, lodash@^4.17.10, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.3.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -15866,6 +16008,11 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"