1036622: Resolved ej2 common conflicts

Jenkinsfile

@@ -74,7 +74,7 @@ if(currentBuild.result != 'FAILURE')
 
 	stage 'Delete Workspace'
 
-		def files = findFiles(glob: '**/cireports/*.*')      
+		def files = findFiles(glob: '**/cireports/spellcheck/*.*')      
 
     if(files.size() > 0) 		
     { 		

ej2-react-toc.html

@@ -22,7 +22,7 @@
   <li><a href="/ej2-react/skills">Skills</a></li>
   <li><a href="/ej2-react/agentic-ui-builder">Agentic UI Builder</a></li>
   <li><a href="/ej2-react/ai-tools/release-notes">Release Notes</a></li>
-</ul>
+  </ul>
 </li>
 <li>
 Getting Started
@@ -97,6 +97,7 @@
     <li><a href="/ej2-react/appearance/styled-component">Styled Component Support</a></li>
     <li><a href="/ej2-react/appearance/css-variables">CSS Variables</a></li>
     <li><a href="/ej2-react/appearance/figma">Figma UI Kits</a></li>
+    <li><a href="/ej2-react/appearance/migration-styles">Migration to Theme Packages</a></li>
   </ul>
 </li>
 <li>
@@ -267,6 +268,8 @@
         <li><a href="/ej2-react/ai-assistview/toolbar-items">Toolbar items</a></li>
         <li><a href="/ej2-react/ai-assistview/custom-view">Custom views</a></li>
         <li><a href="/ej2-react/ai-assistview/file-attachments">File attachments</a></li>
+        <li><a href="/ej2-react/ai-assistview/chain-of-thoughts">Chain of Thoughts</a></li>
+        <li><a href="/ej2-react/ai-assistview/generative-ui">Generative UI</a></li>
         <li><a href="/ej2-react/ai-assistview/templates">Templates</a></li>
         <li>Speech
             <ul>
@@ -1267,11 +1270,12 @@
                 <li><a href="/ej2-react/gantt/loading-animation">Loading Animation</a></li>
             </ul>
         </li>
-		<li>Connecting to Adaptors
+        <li>Connecting to Adaptors
           <ul>
             <li><a href="/ej2-react/gantt/connecting-to-adaptors/odatav4-adaptor">ODataV4 Adaptor</a></li>
             <li><a href="/ej2-react/gantt/connecting-to-adaptors/web-method-adaptor">Web Method Adaptor</a></li>
             <li><a href="/ej2-react/gantt/connecting-to-adaptors/remote-save-adaptor">Remote Save Adaptor</a></li>
+            <li><a href="/ej2-react/gantt/connecting-to-adaptors/custom-adaptor">Custom Adaptor</a></li>
 			<li><a href="/ej2-react/gantt/connecting-to-adaptors/graphql-adaptor">GraphQL Adaptor</a></li>
           </ul>
         </li>
@@ -3185,6 +3189,7 @@
 </ul>
 </li> <li>Release Notes
      <ul>
+		<li>2026 Volume 2 - 34.*<ul><li><a href="/ej2-react/release-notes/34.1.29">34.1.29 Main Release</a></li></ul></li>
 		<li>2026 Volume 1 - 33.*
 			<ul>
 				<li>Weekly Release

ej2-react/Release-notes/29.2.4.md

@@ -31,7 +31,7 @@ documentation: ug
 | ButtonGroup | 120 | 120 | 0 | All Passed |
 | calendar | 177 | 177 | 0 | All Passed |
 | Carousel | 61 | 61 | 0 | All Passed |
-| Chart | 3666 | 3666 | 0 | All Passed |
+| Chart | 4490 | 4490 | 0 | All Passed |
 | Chat UI | 184 | 184 | 0 | All Passed |
 | Checkbox | 216 | 216 | 0 | All Passed |
 | CircularGauge | 283 | 283 | 0 | All Passed |

ej2-react/appearance/icons.md

@@ -8,7 +8,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Predefined icons library in Syncfusion<sup style="font-size:70%">&reg;</sup> React components
+# Predefined icons library in Syncfusion® React components
 
 Syncfusion's icon library provides an extensive collection of pre-designed, font-based icons (embedded as base64 in themes) to enhance user interfaces in React applications. These icons ensure visual consistency across Syncfusion components and are available via npm or CDN with minimal setup.
 
@@ -21,29 +21,56 @@ Icons can be included in a React application using the following methods:
 
 ### The npm package
 
-Syncfusion theme icons are distributed in the [@syncfusion/ej2-icons](https://www.npmjs.com/package/@syncfusion/ej2-icons) package on npm. The package includes CSS/SCSS files for all supported themes.
+Syncfusion theme icons are distributed in the [@syncfusion/ej2-icons](https://www.npmjs.com/package/@syncfusion/ej2-icons) package and as well as through all theme packages such as [@syncfusion/ej2-tailwind3-theme](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) available on npm. These packages include CSS/SCSS files for all supported themes.
 
 Install the package:
 
-```bash
-npm install @syncfusion/ej2-icons
-```
+{% tabs %}
+{% highlight bash tabtitle="Theme Package" %}
+
+npm install @syncfusion/ej2-tailwind3-theme --save
+
+{% endhighlight %}
+{% highlight bash tabtitle="Icon Package" %}
+
+npm install @syncfusion/ej2-icons --save
+
+{% endhighlight %}
+{% endtabs %}
 
 Then import the desired theme’s icon stylesheet in your application:
 
 `[src/App.css]`
 
-```css
+{% tabs %}
+{% highlight css tabtitle="Theme Package" %}
+
+@import "../node_modules/@syncfusion/ej2-<theme-name>-theme/styles/icons/<theme_name>.css";
+
+{% endhighlight %}
+{% highlight css tabtitle="Icon Package" %}
+
 @import "../node_modules/@syncfusion/ej2-icons/styles/<theme_name>.css";
-```
 
-> To apply these styles, ensure you import `App.css` in your `src/App.tsx` (or equivalent entry file).
+{% endhighlight %}
+{% endtabs %}
+
+> To apply these styles, ensure you import `App.css` in your `src/App.tsx` (or equivalent entry file).`
 
 **Example:**
 
-```css
+{% tabs %}
+{% highlight css tabtitle="Theme Package" %}
+
+@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/icons/tailwind3.css";
+
+{% endhighlight %}
+{% highlight css tabtitle="Component Package" %}
+
 @import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ### CDN reference
 

ej2-react/appearance/theme.md

@@ -1,14 +1,14 @@
 ---
 layout: post
 title: Theme in React Appearance component | Syncfusion
-description: Learn all about built-in themes including Tailwind 3.4, Material 3, Fluent 2, Bootstrap 5.3 in Syncfusion React (Essential JS 2) components, optimized CSS, and customization options.
+description: Explore Syncfusion React built-in themes including Tailwind 3.4, Material 3, Fluent 2, and Bootstrap 5.3 with optimized CSS and customization options.
 control: Theme 
 platform: ej2-react
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# React Themes in Syncfusion<sup style="font-size:70%">&reg;</sup> Components
+# React Themes in Syncfusion® Components
 
 Syncfusion<sup style="font-size:70%">&reg;</sup> React UI components provide a comprehensive set of built-in themes to deliver a consistent, modern, and visually appealing appearance across applications. The following table lists all currently supported themes in the Syncfusion<sup style="font-size:70%">&reg;</sup> React components library:
 
@@ -39,13 +39,32 @@ Syncfusion<sup style="font-size:70%">&reg;</sup> React UI components provide a c
 
 > The Syncfusion<sup style="font-size:70%">&reg;</sup> React Bootstrap theme is based on Bootstrap v3, while the Bootstrap 4, Bootstrap 5, and Bootstrap 5.3 themes are aligned with their respective Bootstrap framework versions. In addition to these built-in themes, the [ThemeStudio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio) supports the Fusion theme, which can be customized and downloaded exclusively from [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=fusion).
 
+## Theme packages
+
+Syncfusion built-in themes are distributed as theme packages available on npm. These packages include CSS/SCSS files for all components. The following table lists all available theme packages:
+
+| Theme | Light Package | Dark Package |
+|-------|---------------|---------------|
+| Tailwind 3 | [`@syncfusion/ej2-tailwind3-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) | [`@syncfusion/ej2-tailwind3-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-dark-theme) |
+| Bootstrap 5.3 | [`@syncfusion/ej2-bootstrap5.3-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-theme) | [`@syncfusion/ej2-bootstrap5.3-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-dark-theme) |
+| Fluent 2 | [`@syncfusion/ej2-fluent2-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [`@syncfusion/ej2-fluent2-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) |
+| Material 3 | [`@syncfusion/ej2-material3-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [`@syncfusion/ej2-material3-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
+| Bootstrap 5 | [`@syncfusion/ej2-bootstrap5-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5-theme) | [`@syncfusion/ej2-bootstrap5-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5-dark-theme) |
+| Bootstrap 4 | [`@syncfusion/ej2-bootstrap4-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap4-theme) | - |
+| Bootstrap | [`@syncfusion/ej2-bootstrap-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap-theme) | [`@syncfusion/ej2-bootstrap-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap-dark-theme) |
+| Material | [`@syncfusion/ej2-material-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material-theme) | [`@syncfusion/ej2-material-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material-dark-theme) |
+| Tailwind | [`@syncfusion/ej2-tailwind-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind-theme) | [`@syncfusion/ej2-tailwind-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind-dark-theme) |
+| Fluent | [`@syncfusion/ej2-fluent-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent-theme) | [`@syncfusion/ej2-fluent-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent-dark-theme) |
+| Fabric | [`@syncfusion/ej2-fabric-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fabric-theme) | [`@syncfusion/ej2-fabric-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fabric-dark-theme) |
+| High Contrast | [`@syncfusion/ej2-highcontrast-theme`](https://www.npmjs.com/package/@syncfusion/ej2-highcontrast-theme) | - |
+
 ## Optimized CSS files
 
 Syncfusion<sup style="font-size:70%">&reg;</sup> components support two size modes in each theme: **normal** (default) and **bigger**. The normal size mode provides the standard appearance suitable for most devices and scenarios. The bigger size mode increases the size of UI elements to enhance readability, touch interaction, and accessibility — particularly useful for high-resolution displays or touch-based applications.
 
 Below is a comparison of the Button component in normal and bigger size modes:
 
-![Button component displayed in normal size mode (left) and bigger size mode (right)](./images/bigger-theme-button.png)
+![Button component displayed in normal size mode and bigger size mode](./images/bigger-theme-button.png)
 
 Each complete theme stylesheet includes styles for both size modes, which increases the file size. To optimize performance in applications that do not need the bigger size mode, Syncfusion provides optimized (lite) theme variants that include only normal size styles. These lite files significantly reduce CSS size and improve application load times.
 
@@ -68,94 +87,86 @@ For better maintainability, customization, and bundle optimization, prefer the *
 
 ## Refer themes through npm packages
 
-Themes are shipped as both combined and individual CSS/SCSS files. Combined files are available in the `@syncfusion/ej2` package, while component-specific files are located in each component package’s `styles` folder. Both CSS and SCSS formats are provided.
+Themes are shipped as both combined and individual CSS/SCSS files. Each theme package includes Combined and component-specific styles in both CSS and SCSS formats. For a list of available theme packages, refer to the [available theme packages](#theme-packages) section.
 
-To use the combined CSS files, install the `ej2` package:
+To use the combined SCSS/CSS files, install the required theme package. 
 
 ```bash
- npm install @syncfusion/ej2
+npm install @syncfusion/ej2-material3-theme
 ```
 
 **Referring all components CSS**
 
 ```css
-@import "./node_modules/@syncfusion/ej2/<theme_name>.css";
+@import "@syncfusion/ej2-<theme-name>-theme/styles/<theme-name>.css";
 ```
 
-**Referring all components SCSS**
+**Example:**
 
 ```css
-@import "./node_modules/@syncfusion/ej2/<theme_name>.scss";
+@import "@syncfusion/ej2-material3-theme/styles/material3.css";
 ```
 
-### Referring to individual component theme
-
-You can reference individual component themes either from dedicated component packages or from the unified `@syncfusion/ej2` package.
-
-**From individual package** (recommended for smallest possible bundle):
+**Referring all components SCSS**
 
-```css
-@import "<dependent-package>/styles/<theme_name>.scss";
-@import "ej2-react-buttons/styles/button/<theme_name>.scss";
+```scss
+@use "@syncfusion/ej2-<theme-name>-theme/styles/<theme-name>.scss" as *;
 ```
 
 **Example:**
 
-```css
-@import "ej2-base/styles/tailwind3.scss";
-@import "ej2-react-buttons/styles/button/tailwind3.scss";
+```scss
+@use "@syncfusion/ej2-material3-theme/styles/material3.scss" as *;
 ```
 
-> The `ej2-base` package contains shared styles required by all Syncfusion<sup style="font-size:70%">&reg;</sup> React components and must be imported first.
+### Referring to individual component theme
 
-**From `@syncfusion/ej2` package:**
+You can reference individual component themes from the unified theme package. In this package, each component includes an `index.css/index.scss` files that automatically loads all the required dependency styles.
 
 ```css
-@import "ej2/<dependent-component>/<theme_name>.scss";
-@import "ej2/button/<theme_name>.scss";
+@import "@syncfusion/ej2-<theme-name>-theme/styles/<component-name>/index.css";
 ```
 
 **Example:**
 
 ```css
-@import "ej2/base/tailwind3.scss";
-@import "ej2/button/tailwind3.scss";
+@import "@syncfusion/ej2-material3-theme/styles/grid/index.css";
 ```
 
 ### Referring all components optimized CSS file
 
-To reference optimized (lite) versions of all components from the `@syncfusion/ej2` package:
+To reference optimized (lite) versions of all component styles using theme packages.
 
 ```css
-@import "@syncfusion/ej2/<theme_name>-lite.css";
+@import "@syncfusion/ej2-<theme-name>-theme/styles/<theme-name>-lite.css";
 /* or */
-@import "@syncfusion/ej2/<theme_name>-lite.scss";
+@use "@syncfusion/ej2-<theme-name>-theme/styles/<theme-name>-lite.scss" as *;
 ```
 
 **Example:**
 
 ```css
-@import "@syncfusion/ej2/fluent2-lite.css";
+@import "@syncfusion/ej2-fluent2-theme/styles/fluent2-lite.css";
 /* or */
-@import "@syncfusion/ej2/fluent2-lite.scss";
+@use "@syncfusion/ej2-fluent2-theme/styles/fluent2-lite.scss" as *;
 ```
 
 ### Referring individual component optimized CSS file
 
-From individual component packages:
+From individual component styles:
 
 ```css
-@import "<dependent-package>/styles/<theme_name>-lite.css";
+@import "@syncfusion/ej2-<theme-name>-theme/styles/<component-name>/index-lite.css";
 /* or */
-@import "<dependent-package>/styles/<theme_name>-lite.scss";
+@use "@syncfusion/ej2-<theme-name>-theme/styles/<component-name>/index-lite.scss" as *;
 ```
 
 **Example:**
 
 ```css
-@import "@syncfusion/ej2-buttons/styles/fluent2-lite.css";
+@import "@syncfusion/ej2-fluent2-theme/styles/grid/index-lite.css";
 /* or */
-@import "@syncfusion/ej2-buttons/styles/fluent2-lite.scss";
+@use "@syncfusion/ej2-fluent2-theme/styles/grid/index-lite.scss" as *;
 ```
 
 ### Advantages of individual components theme

ej2-react/common/material-UI.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Integration of Material-UI Components with Syncfusion React Grid | Syncfusion
+title: Integration of MUI Components with Syncfusion React Grid | Syncfusion
 description: Learn how to integrate Material-UI components with Syncfusion React Grid using column templates for a consistent Material-themed user interface.
 control: MaterialUI
 platform: ej2-react
@@ -37,7 +37,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
 import { Button } from '@mui/material';
-import '@syncfusion/ej2-react-grids/styles/material.css';
+import '@syncfusion/ej2-material-theme/styles/grid/index.css';
 
 const dataSource = [
   {

ej2-react/common/redux-form.md

@@ -8,7 +8,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Integration of Syncfusion<sup style="font-size:70%">&reg;</sup> React Components in Redux Form
+# Integration of Syncfusion® React Components in Redux Form
 
 [Redux Form](https://redux-form.com/) is a library for managing form state in React applications. It integrates with the Redux state management library ([Redux Store](https://redux.js.org/api/store)) and provides a straightforward way to handle form inputs, validation, submission, and synchronization with Redux.
 
@@ -119,10 +119,10 @@ export default LoginForm = reduxForm({
 
 To incorporate Syncfusion<sup style="font-size:70%">&reg;</sup> React components (DatePicker, TextBox, Button) into the login form, follow these steps:
 
-1. Install the required Syncfusion packages:
+1. Install the required Syncfusion components packages and needed theme package:
 
 ```bash
-npm install @syncfusion/ej2-react-calendars @syncfusion/ej2-react-inputs @syncfusion/ej2-react-buttons --save
+npm install @syncfusion/ej2-react-calendars @syncfusion/ej2-react-inputs @syncfusion/ej2-react-buttons @syncfusion/ej2-tailwind3-theme --save
 ```
 
 2. Import the Syncfusion theme stylesheet in **App.js** to ensure proper component styling:
@@ -131,10 +131,8 @@ npm install @syncfusion/ej2-react-calendars @syncfusion/ej2-react-inputs @syncfu
 {% highlight js tabtitle="App.js" %}
 
 import './App.css';
-import '@syncfusion/ej2-base/styles/tailwind3.css';
-import '@syncfusion/ej2-react-inputs/styles/tailwind3.css';
-import '@syncfusion/ej2-react-calendars/styles/tailwind3.css';
-import '@syncfusion/ej2-react-buttons/styles/tailwind3.css';
+import '@syncfusion/ej2-tailwind3-theme/styles/textbox/index.css';
+import '@syncfusion/ej2-tailwind3-theme/styles/datepicker/index.css';
 import LoginForm from "./LoginForm";
 
 {% endhighlight %}