Merge branch 'main' into remove-unnecesary-directory

.storybook/preview-head.html

@@ -58,6 +58,17 @@
     color: #35376a !important;
     font-weight: 700 !important;
   }
+
+  #experimental-banner {
+    position: sticky;
+    top: 0;
+    padding: var(--spacing-sm) var(--spacing-xl);
+    z-index: var(--z-index-sticky);
+    font-size: 1rem !important;
+    font-weight: 600;
+    background-color: rgb(var(--colors-alert));
+    color: rgb(var(--colors-on-alert));
+  }
 </style>
 
 <link href="/normalize.css" rel="stylesheet" />

.storybook/preview.jsx

@@ -8,9 +8,24 @@ import './sb-theming.css'
 import { ToC } from '@docs/helpers/ToC'
 
 const ExampleContainer = ({ children, ...props }) => {
+  const shouldDisplayExperimentalBanner = (() => {
+    const docsPrepared = props.context.channel.data.docsPrepared
+    if (!docsPrepared) return false
+
+    return docsPrepared.some(doc => {
+      if (!doc.id) return false
+      return doc.id.includes('experimental-')
+    })
+  })()
+
   return (
     <DocsContainer {...props}>
-      <div id="spark-doc-container">{children}</div>
+      <div id="spark-doc-container">
+        {shouldDisplayExperimentalBanner && <p id="experimental-banner">
+          This component is still experimental. Avoid usage in production features
+        </p>}
+        {children}
+      </div>
       <ToC />
     </DocsContainer>
   )