fix: decouple modern-normalize from the SDK

examples/vite/src/index.scss

@@ -1,9 +1,10 @@
-@layer stream-new, stream-new-plugins, stream-overrides, stream-app-overrides;
+@layer modern-normalize, stream-new, stream-new-plugins, stream-overrides, stream-app-overrides;
 
 // Geist font is preloaded in index.html to avoid layout shift on mount.
 //@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
 
 // v3 CSS import
+@import url('modern-normalize') layer(modern-normalize);
 @import url('stream-chat-react/dist/css/index.css') layer(stream-new);
 @import url('./AppSettings/AppSettings.scss') layer(stream-app-overrides);
 @import url('./CustomMessageActions/CustomMessageActions.scss')

src/components/MessageComposer/styling/MessageComposer.scss

@@ -202,12 +202,12 @@
       textarea {
         background: transparent;
         color: var(--str-chat__input-text-default);
+        font: var(--str-chat__font-body-default);
         resize: none;
         border: none;
         box-shadow: none;
         outline: none;
         width: 100%;
-        font-size: var(--str-chat__typography-font-size-md);
         scrollbar-width: none;
       }
     }

src/components/Search/styling/Search.scss

@@ -38,8 +38,7 @@
       border: none;
       background: none;
       width: 100%;
-      font-size: inherit;
-      line-height: inherit;
+      font: inherit;
 
       &:focus {
         outline: none;

src/styling/base.scss

@@ -1,3 +1,5 @@
+@use './css-normalize/minimal';
+
 .str-chat {
   --str-chat__focus-outline-color: var(--str-chat__border-utility-focused);
   --str-chat__focus-outline: 2px solid var(--str-chat__focus-outline-color);

src/styling/css-normalize/minimal.scss

@@ -0,0 +1,20 @@
+@layer minimal-normalize {
+  .str-chat {
+    *,
+    ::before,
+    ::after {
+      box-sizing: border-box;
+    }
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+      font-family: inherit;
+      font-size: 100%;
+      line-height: 1.15;
+      margin: 0;
+    }
+  }
+}

src/styling/index.scss

@@ -55,6 +55,3 @@
 @use '../components/Tooltip/styling' as Tooltip;
 @use '../components/TypingIndicator/styling' as TypingIndicator;
 @use '../components/VideoPlayer/styling' as VideoPlayer;
-
-// Layers have to be kept the last
-@import 'modern-normalize' layer(css-reset);