diff --git a/lib/core-common/src/templates/base-preview-body.html b/lib/core-common/src/templates/base-preview-body.html
index c5aa7330ee7b..67250e8c88a2 100644
--- a/lib/core-common/src/templates/base-preview-body.html
+++ b/lib/core-common/src/templates/base-preview-body.html
@@ -1,5 +1,5 @@
 <style>
-  @-webkit-keyframes rotate360 {
+  @-webkit-keyframes sb-rotate360 {
     from {
       transform: rotate(0deg);
     }
@@ -7,7 +7,7 @@
       transform: rotate(360deg);
     }
   }
-  @keyframes rotate360 {
+  @keyframes sb-rotate360 {
     from {
       transform: rotate(0deg);
     }
@@ -15,7 +15,7 @@
       transform: rotate(360deg);
     }
   }
-  @-webkit-keyframes glow {
+  @-webkit-keyframes sb-glow {
     0%,
     100% {
       opacity: 1;
@@ -24,7 +24,7 @@
       opacity: 0.4;
     }
   }
-  @keyframes glow {
+  @keyframes sb-glow {
     0%,
     100% {
       opacity: 1;
@@ -33,13 +33,10 @@
       opacity: 0.4;
     }
   }
-  .isLoading {
-    cursor: progress;
-  }
 
-  .loader {
-    -webkit-animation: rotate360 0.7s linear infinite;
-    animation: rotate360 0.7s linear infinite;
+  .sb-loader {
+    -webkit-animation: sb-rotate360 0.7s linear infinite;
+    animation: sb-rotate360 0.7s linear infinite;
     border-color: rgba(97, 97, 97, 0.29);
     border-radius: 50%;
     border-style: solid;
@@ -60,7 +57,7 @@
     z-index: 4;
   }
 
-  .previewBlock {
+  .sb-previewBlock {
     background: #fff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 4px;
@@ -69,7 +66,7 @@
     max-width: 600px;
   }
 
-  .previewBlock_header {
+  .sb-previewBlock_header {
     align-items: center;
     box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
     display: flex;
@@ -78,25 +75,25 @@
     padding: 0 12px;
   }
 
-  .previewBlock_icon {
-    -webkit-animation: glow 1.5s ease-in-out infinite;
-    animation: glow 1.5s ease-in-out infinite;
+  .sb-previewBlock_icon {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
     background: #e6e6e6;
     height: 14px;
     width: 14px;
   }
-  .previewBlock_icon:last-child {
+  .sb-previewBlock_icon:last-child {
     margin-left: auto;
   }
 
-  .previewBlock_body {
-    -webkit-animation: glow 1.5s ease-in-out infinite;
-    animation: glow 1.5s ease-in-out infinite;
+  .sb-previewBlock_body {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
     height: 182px;
     position: relative;
   }
 
-  .argstableBlock {
+  .sb-argstableBlock {
     border-collapse: collapse;
     border-spacing: 0;
     font-size: 13px;
@@ -106,72 +103,72 @@
     text-align: left;
     width: 100%;
   }
-  .argstableBlock th:first-of-type,
-  .argstableBlock td:first-of-type {
+  .sb-argstableBlock th:first-of-type,
+  .sb-argstableBlock td:first-of-type {
     padding-left: 20px;
   }
-  .argstableBlock th:nth-of-type(2),
-  .argstableBlock td:nth-of-type(2) {
+  .sb-argstableBlock th:nth-of-type(2),
+  .sb-argstableBlock td:nth-of-type(2) {
     width: 35%;
   }
-  .argstableBlock th:nth-of-type(3),
-  .argstableBlock td:nth-of-type(3) {
+  .sb-argstableBlock th:nth-of-type(3),
+  .sb-argstableBlock td:nth-of-type(3) {
     width: 15%;
   }
-  .argstableBlock th:laste-of-type,
-  .argstableBlock td:laste-of-type {
+  .sb-argstableBlock th:laste-of-type,
+  .sb-argstableBlock td:laste-of-type {
     width: 25%;
     padding-right: 20px;
   }
-  .argstableBlock th span,
-  .argstableBlock td span {
-    -webkit-animation: glow 1.5s ease-in-out infinite;
-    animation: glow 1.5s ease-in-out infinite;
+  .sb-argstableBlock th span,
+  .sb-argstableBlock td span {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
     background-color: rgba(0, 0, 0, 0.1);
     border-radius: 0;
     box-shadow: none;
     color: transparent;
   }
-  .argstableBlock th {
+  .sb-argstableBlock th {
     padding: 10px 15px;
   }
 
-  .argstableBlock-body {
+  .sb-argstableBlock-body {
     border-radius: 4px;
     box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
   }
-  .argstableBlock-body tr {
+  .sb-argstableBlock-body tr {
     background: transparent;
     overflow: hidden;
   }
-  .argstableBlock-body tr:not(:first-child) {
+  .sb-argstableBlock-body tr:not(:first-child) {
     border-top: 1px solid #e6e6e6;
   }
-  .argstableBlock-body tr:first-child td:first-child {
+  .sb-argstableBlock-body tr:first-child td:first-child {
     border-top-left-radius: 4px;
   }
-  .argstableBlock-body tr:first-child td:last-child {
+  .sb-argstableBlock-body tr:first-child td:last-child {
     border-top-right-radius: 4px;
   }
-  .argstableBlock-body tr:last-child td:first-child {
+  .sb-argstableBlock-body tr:last-child td:first-child {
     border-bottom-left-radius: 4px;
   }
-  .argstableBlock-body tr:last-child td:last-child {
+  .sb-argstableBlock-body tr:last-child td:last-child {
     border-bottom-right-radius: 4px;
   }
-  .argstableBlock-body td {
+  .sb-argstableBlock-body td {
     background: #fff;
     padding-bottom: 10px;
     padding-top: 10px;
     vertical-align: top;
   }
-  .argstableBlock-body td:not(:first-of-type) {
+  .sb-argstableBlock-body td:not(:first-of-type) {
     padding-left: 15px;
     padding-right: 15px;
   }
-  .argstableBlock-body button {
-    -webkit-animation: glow 1.5s ease-in-out infinite;
-    animation: glow 1.5s ease-in-out infinite;
+  .sb-argstableBlock-body button {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
     background-color: rgba(0, 0, 0, 0.1);
     border: 0;
     border-radius: 0;
@@ -183,11 +180,11 @@
     padding: 10px 16px;
   }
 
-  .argstableBlock-summary {
+  .sb-argstableBlock-summary {
     margin-top: 4px;
   }
 
-  .argstableBlock-code {
+  .sb-argstableBlock-code {
     margin-right: 4px;
     margin-bottom: 4px;
     padding: 2px 5px;
@@ -195,23 +192,23 @@
 </style>
 
 <div class="sb-preparing-story sb-wrapper">
-  <div class="loader"></div>
+  <div class="sb-loader"></div>
 </div>
 
 <div class="sb-preparing-docs sb-wrapper">
-  <div class="previewBlock">
-    <div class="previewBlock_header">
-      <div class="previewBlock_icon"></div>
-      <div class="previewBlock_icon"></div>
-      <div class="previewBlock_icon"></div>
-      <div class="previewBlock_icon"></div>
+  <div class="sb-previewBlock">
+    <div class="sb-previewBlock_header">
+      <div class="sb-previewBlock_icon"></div>
+      <div class="sb-previewBlock_icon"></div>
+      <div class="sb-previewBlock_icon"></div>
+      <div class="sb-previewBlock_icon"></div>
     </div>
-    <div class="previewBlock_body">
-      <div class="loader"></div>
+    <div class="sb-previewBlock_body">
+      <div class="sb-loader"></div>
     </div>
   </div>
-  <table aria-hidden="true" class="argstableBlock">
-    <thead class="argstableBlock-head">
+  <table aria-hidden="true" class="sb-argstableBlock">
+    <thead class="sb-argstableBlock-head">
       <tr>
         <th><span>Name</span></th>
         <th><span>Description</span></th>
@@ -219,17 +216,17 @@
         <th><span>Control </span></th>
       </tr>
     </thead>
-    <tbody class="argstableBlock-body">
+    <tbody class="sb-argstableBlock-body">
       <tr>
         <td><span>propertyName</span><span title="Required">*</span></td>
         <td>
           <div><span>This is a short description</span></div>
-          <div class="argstableBlock-summary">
-            <div><span class="argstableBlock-code">summary</span></div>
+          <div class="sb-argstableBlock-summary">
+            <div><span class="sb-argstableBlock-code">summary</span></div>
           </div>
         </td>
         <td>
-          <div><span class="argstableBlock-code">defaultValue</span></div>
+          <div><span class="sb-argstableBlock-code">defaultValue</span></div>
         </td>
         <td><button>Set string</button></td>
       </tr>
@@ -237,12 +234,12 @@
         <td><span>propertyName</span><span>*</span></td>
         <td>
           <div><span>This is a short description</span></div>
-          <div class="argstableBlock-summary">
-            <div><span class="argstableBlock-code">summary</span></div>
+          <div class="sb-argstableBlock-summary">
+            <div><span class="sb-argstableBlock-code">summary</span></div>
           </div>
         </td>
         <td>
-          <div><span class="argstableBlock-code">defaultValue</span></div>
+          <div><span class="sb-argstableBlock-code">defaultValue</span></div>
         </td>
         <td><button>Set string</button></td>
       </tr>
@@ -250,12 +247,12 @@
         <td><span>propertyName</span><span>*</span></td>
         <td>
           <div><span>This is a short description</span></div>
-          <div class="argstableBlock-summary">
-            <div><span class="argstableBlock-code">summary</span></div>
+          <div class="sb-argstableBlock-summary">
+            <div><span class="sb-argstableBlock-code">summary</span></div>
           </div>
         </td>
         <td>
-          <div><span class="argstableBlock-code">defaultValue</span></div>
+          <div><span class="sb-argstableBlock-code">defaultValue</span></div>
         </td>
         <td><button>Set string</button></td>
       </tr>