docs: add notes about new build pipeline to migration guide (#2443)

1. Adds a section about the new build pipeline to the v12 migration
guide
2. Fixes a couple of typos

Author: myandrienko

docusaurus/docs/React/release-guides/upgrade-to-v12.mdx

@@ -29,10 +29,10 @@ The `Avatar` styles are applied through CSS from the version 12 upwards. Therefo
 5. As a consequence of the `Avatar` props changes, the `TypingIndicator` prop `avatarSize` have been removed as well.
 
 :::important
-**Action required**<br/>
-1 Migrate CSS applied to `.str-chat__avatar--${shape}` or re-apply the class through `Avatar` `className` prop.<br/>
-2 Migrate CSS applied to `.str-chat__avatar-image--loaded` to `.str-chat__avatar-image` class.<br/>
-3 If needed, apply custom styles to newly added classes based on the component that renders the `Avatar`.<br/>
+**Action required**  
+1\. Migrate CSS applied to `.str-chat__avatar--${shape}` or re-apply the class through `Avatar` `className` prop.  
+2\. Migrate CSS applied to `.str-chat__avatar-image--loaded` to `.str-chat__avatar-image` class.  
+3\. If needed, apply custom styles to newly added classes based on the component that renders the `Avatar`.
 :::
 
 ## Removal of deprecated components
@@ -42,7 +42,7 @@ The `Avatar` styles are applied through CSS from the version 12 upwards. Therefo
 The attachment rendering functions were replaced with their component equivalents:
 
 :::important
-**Action required**<br/>
+**Action required**  
 Replace the render functions in your custom components with container components alternatives.
 :::
 
@@ -61,7 +61,7 @@ Replace the render functions in your custom components with container components
 Until now, it was possible to import two stylesheets as follows:
 
 ```
-import 'stream-chat-react/dist/css/v2/index.css';
+import 'stream-chat-react/dist/css/v1/index.css';
 ```
 
 The legacy stylesheet has been removed from the SDK bundle, and therefore it is only possible to import one stylesheet from now on:
@@ -71,7 +71,7 @@ import 'stream-chat-react/dist/css/v2/index.css';
 ```
 
 :::important
-**Action required**<br/>
+**Action required**  
 Make sure you are importing the default styles correctly as `import 'stream-chat-react/dist/css/v2/index.css';`
 :::
 
@@ -80,7 +80,7 @@ Make sure you are importing the default styles correctly as `import 'stream-chat
 With the version 10 of `stream-chat-react` new stylesheet has been introduced. The stylesheet used previously became a legacy stylesheet. Legacy stylesheet had often times CSS classes and SDK components, that were not supported with the new stylesheet. Now, the legacy stylesheet and corresponding CSS classes and SDK component are being removed.
 
 :::caution
-These changes will impact you only, if you have imported the CSS as one of the following (you have used the legacy styles):
+These changes will impact you only if you have imported the CSS as one of the following (you have used the legacy styles):
 
 ```
 import 'stream-chat-react/css/index.css';
@@ -97,8 +97,8 @@ import '@stream-io/stream-chat-css/dist/css/index.css';
 Supporting two stylesheet lead to introduction of a flag `themeVersion` into the `ChatContext`. This flag is no more necessary and has been removed from the context value.
 
 :::important
-**Action required**<br/>
-Make sure you are not using `themeVersion in your custom components.
+**Action required**  
+Make sure you are not using `themeVersion` in your custom components.
 :::
 
 ### Removal of styles related Chat props
@@ -114,17 +114,17 @@ Also associated parts of code were removed:
 - `useCustomStyles` hook
 
 :::important
-**Action required**<br/>
-1 The styles applied through `customStyles` should be applied through custom CSS.
-2 Theme (not only dark theme) can be through `Chat` prop `theme` instead of `darkMode`
+**Action required**  
+1\. The styles applied through `customStyles` should be applied through custom CSS.  
+2\. Theme (not only dark theme) can be through `Chat` prop `theme` instead of `darkMode`
 :::
 
 ### Removal from ComponentContext
 
 - `AutocompleteSuggestionHeader` - the up-to-date SDK markup does not count with a header in the `ChatAutoComplete` suggestion list
 
 :::important
-**Action required**<br/>
+**Action required**  
 Make sure you are passing these custom components to the `Channel` component.
 :::
 
@@ -133,10 +133,10 @@ Make sure you are passing these custom components to the `Channel` component.
 The following components are not available anymore as they were related to legacy stylesheet and are not used by the latest SDK components.
 
 :::important
-**Action required**<br/>
-1 Remove imports of these components from `stream-chat-react` in your custom components.<br/>
-2 If importing `SendIconV2` rename it to `SendIcon`.<br/>
-3 Remove the listed classes if used in your CSS.
+**Action required**  
+1\. Remove imports of these components from `stream-chat-react` in your custom components.  
+2\. If importing `SendIconV2` rename it to `SendIcon`.  
+3\. Remove the listed classes if used in your CSS.
 :::
 
 | Component                                                          | Details                                                                                                                                                                                 | Removed CSS classes                                           |
@@ -161,7 +161,7 @@ The following components are not available anymore as they were related to legac
 The `FileIcon` component does not accept argument `version` anymore. This parameter used to determine the file icon set. There were two sets - version `'1'` and `'2'`. The icons of version `'1'` have been rendered with legacy stylesheets in the SDK components. The icons displayed under the version `'1'` have been removed now.
 
 :::important
-**Action required**<br/>
+**Action required**  
 Remove prop `version` if the `FileIcon` is used in your custom components.
 :::
 
@@ -170,7 +170,7 @@ Remove prop `version` if the `FileIcon` is used in your custom components.
 We have removed classes that were used in the legacy CSS stylesheet only and thus are redundant. We recommend to use classes that were already available previously and are used by the SDK stylesheet:
 
 :::important
-**Action required**<br/>
+**Action required**  
 Replace the removed classes with their alternatives in the custom CSS.
 :::
 
@@ -222,7 +222,7 @@ Replace the removed classes with their alternatives in the custom CSS.
 Migration to non-legacy styles leads to rendering of markup with the following classes:
 
 :::important
-**Action required**<br/>
+**Action required**  
 Verify your app layout is not broken and adjust the CSS if necessary.
 :::
 
@@ -233,7 +233,7 @@ Verify your app layout is not broken and adjust the CSS if necessary.
 ### Removed types
 
 :::important
-**Action required**<br/>
+**Action required**  
 Import type alternatives if necessary.
 :::
 
@@ -246,6 +246,25 @@ Import type alternatives if necessary.
 The `TypingIndicator` component does not render avatars as it used to with legacy stylesheet. Therefore, its prop `Avatar` has been removed.
 
 :::important
-**Action optional**<br/>
+**Action optional**  
 Provide custom `TypingIndicator` through the `Channel` prop.
 :::
+
+## Updated browser target
+
+Version 12 targets browsers that support ES2020. In particular, the code includes `async` functions, optional chaining (`?.`), and nullish coalescing (`??`). These features have been supported by all major desktop and mobile browsers for years, so it made sense for us to raise the baseline.
+
+If you need to support older browsers, you should transpile your bundle using `babel` or a similar tool.
+
+:::important
+**Action optional**  
+If you're targeting browsers that don't support ES2020, use a transpilation tool like `babel` to process your bundle.
+:::
+
+## Browser bundle removed from the package
+
+Prior to version 12, we included the browser bundle in the package, which could be added to the page using the `<script>` tag. We no longer ship the browser bundle.
+
+Using the browser bundle was never recommended, and it was mostly for testing purposes. If you still want to quickly add the SDK using the `<script>` tag, you can use services such as [https://esm.sh/](esm.sh) or [https://www.unpkg.com/](unpkg.com).
+
+Installing the package from NPM and then bundling it with your application is still the best way to use the SDK.