Chore tweak dynamicdatabanner UI (#980)

* update stories

* update font and gap + act bierror

* add individual item style

* fix divider height not showing

* fix error message

* migrate from storybook-addon-mock to msw-storybook-addon

* add loading state story

* add loading state

* update homepage to use msw + move banner above hero

* update preview-tw.css

* prettier fix

* replace with children

* refactor: guard clause

* make props optional

apps/studio/public/assets/css/preview-tw.css

@@ -1584,6 +1584,10 @@ video {
   min-height: 4rem;
 }
 
+.min-h-4 {
+  min-height: 1rem;
+}
+
 .min-h-40 {
   min-height: 10rem;
 }
@@ -1621,6 +1625,10 @@ video {
   width: 2.5rem;
 }
 
+.w-11 {
+  width: 2.75rem;
+}
+
 .w-12 {
   width: 3rem;
 }
@@ -1682,6 +1690,10 @@ video {
   min-width: 0px;
 }
 
+.min-w-4 {
+  min-width: 1rem;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -1846,6 +1858,16 @@ video {
     scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1912,6 +1934,10 @@ video {
   grid-template-columns: 1fr min-content;
 }
 
+.grid-cols-\[repeat\(3\2c minmax\(10rem\2c 1fr\)\)\] {
+  grid-template-columns: repeat(3, minmax(10rem, 1fr));
+}
+
 .grid-rows-\[1fr_min-content\] {
   grid-template-rows: 1fr min-content;
 }
@@ -2068,10 +2094,6 @@ video {
   column-gap: 2rem;
 }
 
-.gap-y-1 {
-  row-gap: 0.25rem;
-}
-
 .gap-y-10 {
   row-gap: 2.5rem;
 }
@@ -2194,6 +2216,10 @@ video {
   border-radius: 0px;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -2326,6 +2352,15 @@ video {
   border-top-color: rgb(208 208 208 / var(--tw-border-opacity));
 }
 
+.bg-\[\#0000001a\] {
+  background-color: #0000001a;
+}
+
+.bg-\[\#9CA3AF\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#f0f0f0\] {
   --tw-bg-opacity: 1;
   background-color: rgb(240 240 240 / var(--tw-bg-opacity));
@@ -4828,6 +4863,10 @@ video {
     display: none;
   }
 
+  .md\:h-4 {
+    height: 1rem;
+  }
+
   .md\:h-52 {
     height: 13rem;
   }
@@ -4892,8 +4931,8 @@ video {
     justify-content: space-between;
   }
 
-  .md\:justify-items-center {
-    justify-items: center;
+  .md\:justify-items-end {
+    justify-items: end;
   }
 
   .md\:gap-1 {
@@ -4908,10 +4947,6 @@ video {
     gap: 0.75rem;
   }
 
-  .md\:gap-4 {
-    gap: 1rem;
-  }
-
   .md\:gap-5 {
     gap: 1.25rem;
   }
@@ -4929,6 +4964,10 @@ video {
     row-gap: 3rem;
   }
 
+  .md\:gap-y-2 {
+    row-gap: 0.5rem;
+  }
+
   .md\:p-16 {
     padding: 4rem;
   }
@@ -4948,16 +4987,6 @@ video {
     padding-bottom: 4rem;
   }
 
-  .md\:py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  .md\:py-3 {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-
   .md\:py-6 {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
@@ -4967,10 +4996,6 @@ video {
     padding-bottom: 5rem;
   }
 
-  .md\:pb-3 {
-    padding-bottom: 0.75rem;
-  }
-
   .md\:pt-0 {
     padding-top: 0px;
   }
@@ -5007,18 +5032,10 @@ video {
     grid-column: span 3 / span 3;
   }
 
-  .lg\:col-span-8 {
-    grid-column: span 8 / span 8;
-  }
-
   .lg\:col-span-9 {
     grid-column: span 9 / span 9;
   }
 
-  .lg\:col-start-5 {
-    grid-column-start: 5;
-  }
-
   .lg\:mx-0 {
     margin-left: 0px;
     margin-right: 0px;
@@ -5153,10 +5170,6 @@ video {
     max-width: none;
   }
 
-  .lg\:grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
   .lg\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -5173,46 +5186,18 @@ video {
     flex-direction: row;
   }
 
-  .lg\:flex-col {
-    flex-direction: column;
-  }
-
   .lg\:content-center {
     align-content: center;
   }
 
-  .lg\:items-start {
-    align-items: flex-start;
-  }
-
-  .lg\:items-end {
-    align-items: flex-end;
-  }
-
-  .lg\:justify-start {
-    justify-content: flex-start;
+  .lg\:items-center {
+    align-items: center;
   }
 
   .lg\:justify-end {
     justify-content: flex-end;
   }
 
-  .lg\:justify-center {
-    justify-content: center;
-  }
-
-  .lg\:justify-between {
-    justify-content: space-between;
-  }
-
-  .lg\:justify-items-stretch {
-    justify-items: stretch;
-  }
-
-  .lg\:gap-0 {
-    gap: 0px;
-  }
-
   .lg\:gap-10 {
     gap: 2.5rem;
   }
@@ -5233,6 +5218,10 @@ video {
     gap: 10rem;
   }
 
+  .lg\:gap-5 {
+    gap: 1.25rem;
+  }
+
   .lg\:gap-6 {
     gap: 1.5rem;
   }
@@ -5273,11 +5262,6 @@ video {
     padding-right: 2rem;
   }
 
-  .lg\:py-0 {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
   .lg\:py-16 {
     padding-top: 4rem;
     padding-bottom: 4rem;