diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 008fe17e..c58db0f6 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -5,8 +5,6 @@ on:
   push:
     branches-ignore:
       - master
-    paths-ignore:
-      - 'knowledge-base/**'
 
 env:
   NODE_OPTIONS: --max_old_space_size=6144
@@ -55,6 +53,8 @@ jobs:
               - 'examples/react-coffee-warehouse/**'
             react-grid-live-data:
               - 'examples/react-grid-live-data/**'
+            knowledge-base:
+                - 'docs/knowledge-base/examples/**'
 
       - name: Build Coffee warehouse nextjs app
         working-directory: ./examples/coffee-warehouse-nextjs
@@ -146,6 +146,13 @@ jobs:
       - name: Build React Grid Live Data app
         working-directory: ./examples/react-grid-live-data
         if: steps.changes.outputs.react-grid-live-data == 'true'
+        run: |
+          npm ci
+          npm run build
+          
+      - name: Build Knowledge Base Vite app
+        working-directory: ./docs/knowledge-base
+        if: steps.changes.outputs.knowledge-base == 'true'
         run: |
           npm ci
           npm run build
\ No newline at end of file
diff --git a/knowledge-base/examples/.eslintrc.cjs b/docs/.eslintrc.cjs
similarity index 100%
rename from knowledge-base/examples/.eslintrc.cjs
rename to docs/.eslintrc.cjs
diff --git a/knowledge-base/examples/.gitignore b/docs/.gitignore
similarity index 100%
rename from knowledge-base/examples/.gitignore
rename to docs/.gitignore
diff --git a/docs/_app.tsx b/docs/_app.tsx
new file mode 100644
index 00000000..8fbe20fb
--- /dev/null
+++ b/docs/_app.tsx
@@ -0,0 +1,139 @@
+import {
+    TreeList, TreeListCellProps, TreeListColumnProps, TreeListExpandChangeEvent,
+    TreeListToolbar,
+    extendDataItem, mapTree, mapTreeItem
+} from '@progress/kendo-react-treelist';
+import React from 'react';
+import { useMemo, useState } from 'react';
+import { RouteObject } from 'react-router-dom';
+
+interface RootProps {
+    routes: RouteObject[];
+}
+
+interface Entry {
+    id: any;
+    name: string;
+    items?: Entry[];
+    route?: RouteObject;
+}
+
+function createTree(routes: RouteObject[]) {
+    const tree: any = { name: "", items: [] };
+    let id = 0;
+    for (const route of routes) {
+        let currentNode = tree;
+        const routeNodes = route.path?.split('/') || [];
+        for (const node of routeNodes) {
+            const idx = currentNode.items.findIndex((item: any) => item.name === node);
+            if (idx === -1) {
+                const item: Entry = { id: id++, name: node, items: [] };
+                currentNode.items.push(item);
+                currentNode = item;
+            } else {
+                currentNode = currentNode.items[idx];
+            };
+        }
+        currentNode.route = route;
+
+    }
+
+    return tree.items;
+}
+
+const subItemsField = 'items';
+const expandField = 'expanded';
+const MIN_AUTOEXPAND_FILTER_LENGTH = 3;
+
+export default function Index({ routes }: RootProps) {
+    const initialTreeData = useMemo(() => createTree(routes), [routes]);
+    const [treeData, setTreeData] = useState(initialTreeData);
+
+    const [filter, setFilter] = useState('');
+    const allItemKeys = useMemo(() => Array.from(Array(routes.length).keys()), [routes]);
+    const [expandedItems, setExpandedItems] = useState([] as number[]);
+
+    const columns: TreeListColumnProps[] = [{
+        expandable: true,
+        title: 'Path',
+        field: 'name',
+        width: '30%'
+    }, {
+        title: 'Example',
+        cell: (props: TreeListCellProps) => (
+            <td>
+                {props.dataItem.route ?
+                    <a href={props.dataItem.route.path} target="_blank">{props.dataItem.route.path}</a> :
+                    null
+                }
+            </td>
+        )
+    }];
+
+    const onExpandChange = (e: TreeListExpandChangeEvent) => {
+        const expanded = !e.value;
+        const nextTreeData = [...treeData];
+
+        mapTreeItem(nextTreeData, e.level, subItemsField, item =>
+            extendDataItem(item, subItemsField, { [expandField]: expanded })
+        );
+
+        const nextExpandedItems = e.value ?
+            expandedItems.filter(id => id !== (e.dataItem as Entry).id) :
+            [...expandedItems, e.dataItem.id];
+
+        setTreeData(nextTreeData);
+        setExpandedItems(nextExpandedItems);
+    };
+
+    const onFilter = (e: any) => {
+        const value = (e.target as HTMLInputElement).value;
+        setFilter(value);
+        applyFilter(value);
+    };
+
+    const applyFilter = (value) => {
+        if (!value) {
+            setTreeData(initialTreeData);
+            setExpandedItems([]);
+            return;
+        }
+
+        const autoExpand = value.length > MIN_AUTOEXPAND_FILTER_LENGTH;
+        setExpandedItems(autoExpand ? allItemKeys : []);
+
+        try {
+            const regexp = new RegExp(value);
+            setTreeData(createTree(routes.filter(({ path }) => path?.match(regexp))));
+        } catch (e) {
+            /* noop */
+        }
+    };
+
+    const callback = item => expandedItems.includes(item.id) ?
+        extendDataItem(item, subItemsField, { [expandField]: true }) : item;
+
+    return (
+        <div className="examples-list">
+            <TreeList
+                data={mapTree(treeData, subItemsField, callback)} 
+                expandField={expandField}
+                subItemsField={subItemsField}
+                onExpandChange={onExpandChange}
+                sortable={true}
+                columns={columns}
+                toolbar={
+                    <TreeListToolbar>
+                        <label>
+                            <input style={{ margin: '0 1em' }}
+                                autoFocus={true}
+                                value={filter}
+                                onInput={onFilter} />
+                            <span>Filter examples (<code>RegExp</code>)</span>
+                        </label>
+                    </TreeListToolbar>
+                }
+            />
+        </div>
+    );
+}
diff --git a/docs/_error.tsx b/docs/_error.tsx
new file mode 100644
index 00000000..2906e087
--- /dev/null
+++ b/docs/_error.tsx
@@ -0,0 +1,15 @@
+import { useRouteError } from 'react-router-dom';
+
+export default function ErrorPage() {
+    const error = useRouteError() as { statusText: string; message: string };
+    console.error(error);
+
+    return (
+        <div id="error-page">
+            <h1>Error</h1>
+            <p>
+                <code>{error.statusText || error.message}</code>
+            </p>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..f2adb18f
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React</title>
+  <base href="/" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  <link rel="stylesheet" href="./styles.scss" />
+</head>
+
+<body>
+  <my-app>
+    <script type="module" src="./main.tsx"></script>
+  </my-app>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/knowledge-base/add-custom-event-to-the-editor.md b/docs/knowledge-base/add-custom-event-to-the-editor.md
similarity index 94%
rename from knowledge-base/add-custom-event-to-the-editor.md
rename to docs/knowledge-base/add-custom-event-to-the-editor.md
index 655101e1..cf195484 100644
--- a/knowledge-base/add-custom-event-to-the-editor.md
+++ b/docs/knowledge-base/add-custom-event-to-the-editor.md
@@ -36,5 +36,5 @@ This is an example showcasing how to attach the onColumnMenu, onBlur and onClick
 
 {% meta height:340 %}
 {% embed_file editor/attach-events/app.jsx preview %}
-{% embed_file editor/attach-events/main.jsx preview %}
+{% embed_file editor/attach-events/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/add-custom-tools-to-the-editor-and-customize-built-in-tools.md b/docs/knowledge-base/add-custom-tools-to-the-editor-and-customize-built-in-tools.md
similarity index 85%
rename from knowledge-base/add-custom-tools-to-the-editor-and-customize-built-in-tools.md
rename to docs/knowledge-base/add-custom-tools-to-the-editor-and-customize-built-in-tools.md
index d10e6399..5ad307d6 100644
--- a/knowledge-base/add-custom-tools-to-the-editor-and-customize-built-in-tools.md
+++ b/docs/knowledge-base/add-custom-tools-to-the-editor-and-customize-built-in-tools.md
@@ -40,7 +40,8 @@ We need to create a tool, that will insert text content and add the built-in sty
 This is an example showcasing how to achieve this:
 
 {% meta height:420 %}
-{% embed_file editor/add-span-with-class/main.jsx preview %}
+{% embed_file editor/add-span-with-class/app.jsx preview %}
+{% embed_file editor/add-span-with-class/main.jsx %}
 {% endmeta %}
 
 ## Insert Non Editable Node
@@ -52,7 +53,8 @@ How to insert non editable predefined node in the Editor?
 This can be achieved by creating a tool that will insert a non editable [Node](https://prosemirror.net/docs/ref/#model.Node). This Node will function as a single element and will be removed with a single key press.
 
 {% meta height:420 %}
-{% embed_file editor/add-non-editable-element/main.jsx preview %}
+{% embed_file editor/add-non-editable-element/app.jsx preview %}
+{% embed_file editor/add-non-editable-element/main.jsx %}
 {% embed_file editor/add-non-editable-element/InsertShortcodeTool.jsx %}
 {% endmeta %}
 
@@ -65,7 +67,8 @@ How to make a tool that will apply custom font size to the selected content.
 This can be achieved with a custom [DropDownList tool]({% slug api_editor_EditorTools_createstyledropdownlist %}) that will apply the custom font-size based on array of font-size values.
 
 {% meta height:420 %}
-{% embed_file editor/custom-font-size-tool/main.jsx preview %}
+{% embed_file editor/custom-font-size-tool/app.jsx preview %}
+{% embed_file editor/custom-font-size-tool/main.jsx %}
 {% embed_file editor/custom-font-size-tool/customFontSize.jsx %}
 {% endmeta %}
 
@@ -86,7 +89,8 @@ How to create a tool that clears the inline formatting?
 This example show how to add the background color, font color and clear format tools:
 
 {% meta height:420 %}
-{% embed_file editor/custom-tools/main.jsx preview %}
+{% embed_file editor/custom-tools/app.jsx preview %}
+{% embed_file editor/custom-tools/main.jsx %}
 {% embed_file editor/custom-tools/backgroundColorTool.jsx %}
 {% embed_file editor/custom-tools/clearAll.jsx %}
 {% embed_file editor/custom-tools/myColorTool.jsx %}
diff --git a/knowledge-base/auto-imports.js b/docs/knowledge-base/auto-imports.js
similarity index 100%
rename from knowledge-base/auto-imports.js
rename to docs/knowledge-base/auto-imports.js
diff --git a/knowledge-base/bottomnavigation-change-content.md b/docs/knowledge-base/bottomnavigation-change-content.md
similarity index 87%
rename from knowledge-base/bottomnavigation-change-content.md
rename to docs/knowledge-base/bottomnavigation-change-content.md
index 4ff38288..181d1f37 100644
--- a/knowledge-base/bottomnavigation-change-content.md
+++ b/docs/knowledge-base/bottomnavigation-change-content.md
@@ -32,5 +32,6 @@ I want to change the main content when the BottomNavigation selection changes
 For achieving the desired result the onSelect event of the BottomNavigation can be used for determining which item was selected. Based on that selection the main rendered content (component) can be changed
 
 {% meta id height:360 %}
-{% embed_file layout/bottomnavigation-change-content/main.jsx preview %}
+{% embed_file layout/bottomnavigation-change-content/app.jsx preview %}
+{% embed_file layout/bottomnavigation-change-content/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/chart-color-by-category.md b/docs/knowledge-base/chart-color-by-category.md
similarity index 85%
rename from knowledge-base/chart-color-by-category.md
rename to docs/knowledge-base/chart-color-by-category.md
index 197f6ce0..925a702c 100644
--- a/knowledge-base/chart-color-by-category.md
+++ b/docs/knowledge-base/chart-color-by-category.md
@@ -35,6 +35,7 @@ The color property of the ChartSeriesItem accepts function where the dataItem is
 This is an example showcasing how to limit the value:
 
 {% meta id:index height:760 %}
-{% embed_file charts/chart-color-by-category/main.jsx preview %}
-{% embed_file charts/chart-color-by-category/bubble-data.json preview %}
+{% embed_file charts/chart-color-by-category/app.jsx preview %}
+{% embed_file charts/chart-color-by-category/main.jsx %}
+{% embed_file charts/chart-color-by-category/bubble-data.json %}
 {% endmeta %}
diff --git a/knowledge-base/chart-heatmap-custom-series-item.md b/docs/knowledge-base/chart-heatmap-custom-series-item.md
similarity index 87%
rename from knowledge-base/chart-heatmap-custom-series-item.md
rename to docs/knowledge-base/chart-heatmap-custom-series-item.md
index 2f67f1a1..ba267508 100644
--- a/knowledge-base/chart-heatmap-custom-series-item.md
+++ b/docs/knowledge-base/chart-heatmap-custom-series-item.md
@@ -35,5 +35,6 @@ Set custom visual for ChartSeriesItem and draw custom shape with border radius.
 This is an example demonstrating the above approach:
 
 {% meta id height:660 %}
-{% embed_file charts/heatmap-custom-series-item/main.jsx preview %}
+{% embed_file charts/heatmap-custom-series-item/app.jsx preview %}
+{% embed_file charts/heatmap-custom-series-item/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/chart-limiting-axis-labels-count.md b/docs/knowledge-base/chart-limiting-axis-labels-count.md
similarity index 89%
rename from knowledge-base/chart-limiting-axis-labels-count.md
rename to docs/knowledge-base/chart-limiting-axis-labels-count.md
index c952c607..27b786b4 100644
--- a/knowledge-base/chart-limiting-axis-labels-count.md
+++ b/docs/knowledge-base/chart-limiting-axis-labels-count.md
@@ -35,6 +35,7 @@ Limiting the number of the axis labels can be achieved by setting the "ChartCate
 Here is an example with the described approach:
 
 {% meta id height:340 %}
-{% embed_file charts/limiting-axis-labels-count/main.jsx preview %}
+{% embed_file charts/limiting-axis-labels-count/app.jsx preview %}
+{% embed_file charts/limiting-axis-labels-count/main.jsx %}
 {% endmeta %}
 
diff --git a/knowledge-base/chart-rounded-bar-corners.md b/docs/knowledge-base/chart-rounded-bar-corners.md
similarity index 87%
rename from knowledge-base/chart-rounded-bar-corners.md
rename to docs/knowledge-base/chart-rounded-bar-corners.md
index ed110508..f59381f7 100644
--- a/knowledge-base/chart-rounded-bar-corners.md
+++ b/docs/knowledge-base/chart-rounded-bar-corners.md
@@ -35,5 +35,6 @@ Changing the rendering of the Chart elements can be achieved by defining custom
 This is an example showcasing how to limit the value:
 
 {% meta id height:540 %}
-{% embed_file charts/chart-rounded-bar-corners/main.jsx preview %}
+{% embed_file charts/chart-rounded-bar-corners/app.jsx preview %}
+{% embed_file charts/chart-rounded-bar-corners/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/chart-set-multiple-x-axes.md b/docs/knowledge-base/chart-set-multiple-x-axes.md
similarity index 87%
rename from knowledge-base/chart-set-multiple-x-axes.md
rename to docs/knowledge-base/chart-set-multiple-x-axes.md
index db8acbeb..6e3bb75d 100644
--- a/knowledge-base/chart-set-multiple-x-axes.md
+++ b/docs/knowledge-base/chart-set-multiple-x-axes.md
@@ -35,5 +35,6 @@ How can I set multiple x-axes for a chart?
 Use the [axisCrossingValue](https://www.telerik.com/kendo-react-ui/components/charts/api/ChartCategoryAxisItemProps/#toc-axiscrossingvalue) in order to pass the values for the overlapping axes:
 
 {% meta id:index height:600 %}
-{% embed_file charts/set-multiple-x-axes/main.jsx preview %}
+{% embed_file charts/set-multiple-x-axes/app.jsx preview %}
+{% embed_file charts/set-multiple-x-axes/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/chart-set-plotbands-on-plot-click.md b/docs/knowledge-base/chart-set-plotbands-on-plot-click.md
similarity index 90%
rename from knowledge-base/chart-set-plotbands-on-plot-click.md
rename to docs/knowledge-base/chart-set-plotbands-on-plot-click.md
index 418172a9..e8b1020b 100644
--- a/knowledge-base/chart-set-plotbands-on-plot-click.md
+++ b/docs/knowledge-base/chart-set-plotbands-on-plot-click.md
@@ -41,5 +41,6 @@ Optional: In order to avoid the Chart to play animations each time the PlotBands
 
 
 {% meta id height:520 %}
-{% embed_file charts/set-plotbands-on-plot-area-click/main.jsx preview %}
+{% embed_file charts/set-plotbands-on-plot-area-click/app.jsx preview %}
+{% embed_file charts/set-plotbands-on-plot-area-click/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/chat-croll-to-bottom.md b/docs/knowledge-base/chat-croll-to-bottom.md
similarity index 88%
rename from knowledge-base/chat-croll-to-bottom.md
rename to docs/knowledge-base/chat-croll-to-bottom.md
index d9e58f8a..2a1b8ccd 100644
--- a/knowledge-base/chat-croll-to-bottom.md
+++ b/docs/knowledge-base/chat-croll-to-bottom.md
@@ -34,5 +34,6 @@ When the user sends the first message, the Conversational UI scrolls to the bott
 This can be achieved by adjusting the scrollTop of the `.k-message-list` container on the [onMessageSend](https://www.telerik.com/kendo-react-ui/components/conversationalui/api/ChatProps/#toc-onmessagesend) event:
 
 {% meta id:index height:900 %}
-{% embed_file conversational-ui/chat-scroll-to-bottom/main.jsx preview %}
+{% embed_file conversational-ui/chat-scroll-to-bottom/app.jsx preview %}
+{% embed_file conversational-ui/chat-scroll-to-bottom/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/chat-maxlength-char-count.md b/docs/knowledge-base/chat-maxlength-char-count.md
similarity index 93%
rename from knowledge-base/chat-maxlength-char-count.md
rename to docs/knowledge-base/chat-maxlength-char-count.md
index 1cf95141..af08e955 100644
--- a/knowledge-base/chat-maxlength-char-count.md
+++ b/docs/knowledge-base/chat-maxlength-char-count.md
@@ -33,5 +33,6 @@ How to show the number of characters as the user types and set a maxLength for t
 To set a `maxLength` render a custom [`Input`]({% slug overview_textbox %}) component and set the value for the [`maxLength`]({% slug api_inputs_input %}#toc-maxLength) prop to the preferred value. To see the character count as the user types, display the [`value`]({% slug api_inputs_input %}#toc-value) variable in the custom component markup. For more information on how to customize the Chat component refer to the [`customization`]({% slug custom-rendering_chat %})
 
 {% meta id:index height:900 %}
-{% embed_file conversational-ui/chat-maxlength-char-count/main.tsx preview %}
+{% embed_file conversational-ui/chat-maxlength-char-count/app.tsx preview %}
+{% embed_file conversational-ui/chat-maxlength-char-count/main.tsx %}
 {% endmeta %}
diff --git a/knowledge-base/combobox-open-on-focus-and-tab.md b/docs/knowledge-base/combobox-open-on-focus-and-tab.md
similarity index 92%
rename from knowledge-base/combobox-open-on-focus-and-tab.md
rename to docs/knowledge-base/combobox-open-on-focus-and-tab.md
index 693a4e4b..49689e8d 100644
--- a/knowledge-base/combobox-open-on-focus-and-tab.md
+++ b/docs/knowledge-base/combobox-open-on-focus-and-tab.md
@@ -35,5 +35,6 @@ Handle the onFocus event of the ComboBox and within a setTimeout function check
 Here is an example demonstrating this approach:
 
 {% meta id height:560 %}
-{% embed_file dropdowns/combobox-open-on-focus-and-tab/main.jsx preview %}
+{% embed_file dropdowns/combobox-open-on-focus-and-tab/app.jsx preview %}
+{% embed_file dropdowns/combobox-open-on-focus-and-tab/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/combobox-open-popup-initially.md b/docs/knowledge-base/combobox-open-popup-initially.md
similarity index 87%
rename from knowledge-base/combobox-open-popup-initially.md
rename to docs/knowledge-base/combobox-open-popup-initially.md
index c4de9888..bc8cdd27 100644
--- a/knowledge-base/combobox-open-popup-initially.md
+++ b/docs/knowledge-base/combobox-open-popup-initially.md
@@ -35,5 +35,6 @@ For manually opening the popup of the ComboBox after the initialization we can u
 Here is an example demonstrating this approach:
 
 {% meta id height:480 %}
-{% embed_file dropdowns/combobox-open-popup-initially/main.jsx preview %}
+{% embed_file dropdowns/combobox-open-popup-initially/app.jsx preview %}
+{% embed_file dropdowns/combobox-open-popup-initially/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/custom-colors-in-chart-series.md b/docs/knowledge-base/custom-colors-in-chart-series.md
similarity index 89%
rename from knowledge-base/custom-colors-in-chart-series.md
rename to docs/knowledge-base/custom-colors-in-chart-series.md
index f6c9baec..326dea61 100644
--- a/knowledge-base/custom-colors-in-chart-series.md
+++ b/docs/knowledge-base/custom-colors-in-chart-series.md
@@ -31,5 +31,6 @@ How can I use the API for implementations such as using assigned customized colo
 Use the [`color`]({% slug api_charts_chartseriesitemprops %}#toc-color) or the [`colorField`]({% slug api_charts_chartseriesitemprops %}#toc-colorfield) props of the `ChartSeriesItem`.
 
 {% meta id height:500 %}
-{% embed_file charts/set-colors/main.jsx preview %}
+{% embed_file charts/set-colors/app.jsx preview %}
+{% embed_file charts/set-colors/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/custom-expand-collapse-column.md b/docs/knowledge-base/custom-expand-collapse-column.md
similarity index 88%
rename from knowledge-base/custom-expand-collapse-column.md
rename to docs/knowledge-base/custom-expand-collapse-column.md
index 92fb7b52..de766aa8 100644
--- a/knowledge-base/custom-expand-collapse-column.md
+++ b/docs/knowledge-base/custom-expand-collapse-column.md
@@ -40,6 +40,7 @@ To modify the expand/collapse column of the Grid:
 Following is an example demonstrating this approach:
 
 {% meta id height:540 %}
-{% embed_file grid/custom-expand-collapse-column/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/custom-expand-collapse-column/app.jsx preview %}
+{% embed_file grid/custom-expand-collapse-column/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/daterangepicker-error-message-invalid-date.md b/docs/knowledge-base/daterangepicker-error-message-invalid-date.md
similarity index 91%
rename from knowledge-base/daterangepicker-error-message-invalid-date.md
rename to docs/knowledge-base/daterangepicker-error-message-invalid-date.md
index ae42fccc..1d77f0e6 100644
--- a/knowledge-base/daterangepicker-error-message-invalid-date.md
+++ b/docs/knowledge-base/daterangepicker-error-message-invalid-date.md
@@ -35,7 +35,8 @@ You can achieve this by custom rendering the date inputs which allows you to get
 Here is an example demonstrating this approach:
 
 {% meta id height:480 %}
-{% embed_file dropdowns/daterangepicker-validation/main.jsx preview %}
+{% embed_file dropdowns/daterangepicker-validation/app.jsx preview %}
+{% embed_file dropdowns/daterangepicker-validation/main.jsx %}
 {% embed_file dropdowns/daterangepicker-validation/customStartDateInput.jsx %}
 {% embed_file dropdowns/daterangepicker-validation/customEndDateInput.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/daterangepicker-predefined-ranges.md b/docs/knowledge-base/daterangepicker-predefined-ranges.md
similarity index 93%
rename from knowledge-base/daterangepicker-predefined-ranges.md
rename to docs/knowledge-base/daterangepicker-predefined-ranges.md
index dc06a1cb..b9c9e1ba 100644
--- a/knowledge-base/daterangepicker-predefined-ranges.md
+++ b/docs/knowledge-base/daterangepicker-predefined-ranges.md
@@ -35,6 +35,7 @@ For achieving the desired result a custom Popup must be defined for the DateRang
 This is an example showcasing how to limit the value:
 
 {% meta id:index height:560 %}
-{% embed_file dateinputs/daterangepicker-predefined-ranges/main.jsx preview %}
+{% embed_file dateinputs/daterangepicker-predefined-ranges/app.jsx preview %}
+{% embed_file dateinputs/daterangepicker-predefined-ranges/main.jsx %}
 {% embed_file dateinputs/daterangepicker-predefined-ranges/styles.css %}
 {% endmeta %}
diff --git a/knowledge-base/daterangepicker-validate-range.md b/docs/knowledge-base/daterangepicker-validate-range.md
similarity index 93%
rename from knowledge-base/daterangepicker-validate-range.md
rename to docs/knowledge-base/daterangepicker-validate-range.md
index 770b0470..9ef09e2e 100644
--- a/knowledge-base/daterangepicker-validate-range.md
+++ b/docs/knowledge-base/daterangepicker-validate-range.md
@@ -35,5 +35,6 @@ Set the "valid" property of the DateRangePicker to a state variable that can be
 This is an example showcasing the approach:
 
 {% meta id height:560 %}
-{% embed_file dateinputs/daterangepicker-validate-range/main.jsx preview %}
+{% embed_file dateinputs/daterangepicker-validate-range/app.jsx preview %}
+{% embed_file dateinputs/daterangepicker-validate-range/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/datetimepicker-conditional-set-button.md b/docs/knowledge-base/datetimepicker-conditional-set-button.md
similarity index 96%
rename from knowledge-base/datetimepicker-conditional-set-button.md
rename to docs/knowledge-base/datetimepicker-conditional-set-button.md
index bcf1623e..f9c6a459 100644
--- a/knowledge-base/datetimepicker-conditional-set-button.md
+++ b/docs/knowledge-base/datetimepicker-conditional-set-button.md
@@ -51,7 +51,8 @@ if (date1 <= date2) {
 This is an example that demonstrates this approach.
 
 {% meta id height:560 %}
-{% embed_file dateinputs/datetimepicker-conditional-set-button/main.jsx preview %}
+{% embed_file dateinputs/datetimepicker-conditional-set-button/app.jsx preview %}
+{% embed_file dateinputs/datetimepicker-conditional-set-button/main.jsx %}
 {% endmeta %}
 
 For more information on customizing the Calendar of the DateTimePicker, and using its `valid` prop, check the following article respectively:
diff --git a/knowledge-base/drag-and-drop-between-grids.md b/docs/knowledge-base/drag-and-drop-between-grids.md
similarity index 85%
rename from knowledge-base/drag-and-drop-between-grids.md
rename to docs/knowledge-base/drag-and-drop-between-grids.md
index 54878cd5..d7cf8794 100644
--- a/knowledge-base/drag-and-drop-between-grids.md
+++ b/docs/knowledge-base/drag-and-drop-between-grids.md
@@ -35,6 +35,7 @@ I need to be able to drag and drop rows from one Grid to another.
 Use the [`rowRender`]({% slug api_grid_gridprops %}#toc-rowrender) prop of the Grid to attach the [onDragStart](https://developer.mozilla.org/en-US/docs/Web/API/Document/dragstart_event) and onDrop(https://developer.mozilla.org/en-US/docs/Web/API/Document/drop_event) events to the row.
 
 {% meta id height:760 %}
-{% embed_file grid/drag-drop-between-grids/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/drag-drop-between-grids/app.jsx preview %}
+{% embed_file grid/drag-drop-between-grids/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/drawer-close-on-click.md b/docs/knowledge-base/drawer-close-on-click.md
similarity index 89%
rename from knowledge-base/drawer-close-on-click.md
rename to docs/knowledge-base/drawer-close-on-click.md
index 821c0e8a..12df4f54 100644
--- a/knowledge-base/drawer-close-on-click.md
+++ b/docs/knowledge-base/drawer-close-on-click.md
@@ -34,6 +34,7 @@ To handle the click event, add event listener to the document for the "mousedown
 The following example demonstrates this approach:
 
 {% meta id height:460 %}
-{% embed_file layout/drawer-close-on-click/main.jsx preview%}
+{% embed_file layout/drawer-close-on-click/app.jsx preview %}
+{% embed_file layout/drawer-close-on-click/main.jsx %}
 {% embed_file layout/drawer-close-on-click/styles.css %}
 {% endmeta %}
diff --git a/knowledge-base/drawer-router-v6.md b/docs/knowledge-base/drawer-router-v6.md
similarity index 91%
rename from knowledge-base/drawer-router-v6.md
rename to docs/knowledge-base/drawer-router-v6.md
index fc6ff4f8..b9bea944 100644
--- a/knowledge-base/drawer-router-v6.md
+++ b/docs/knowledge-base/drawer-router-v6.md
@@ -32,7 +32,8 @@ I want to use KendoReact Drawer with React Router version 6
 The following example demonstrates how to use React Router version 6.0.1 with KendoReact Drawer:
 
 {% meta id height:760 %}
-{% embed_file layout/drawer-router-v6/main.jsx preview %}
+{% embed_file layout/drawer-router-v6/app.jsx preview %}
+{% embed_file layout/drawer-router-v6/main.jsx %}
 {% embed_file layout/drawer-router-v6/styles.css %}
 {% embed_file layout/drawer-router-v6/About.jsx %}
 {% embed_file layout/drawer-router-v6/DrawerContainer.jsx %}
diff --git a/knowledge-base/dropdownlist-clear-value.md b/docs/knowledge-base/dropdownlist-clear-value.md
similarity index 85%
rename from knowledge-base/dropdownlist-clear-value.md
rename to docs/knowledge-base/dropdownlist-clear-value.md
index 07d8810c..fec5b65c 100644
--- a/knowledge-base/dropdownlist-clear-value.md
+++ b/docs/knowledge-base/dropdownlist-clear-value.md
@@ -36,5 +36,6 @@ A custom clear button can be added by inserting children elements and passing th
 
 
 {% meta id height:460 %}
-{% embed_file dropdownlist/dropdownlist-clear-value/main.tsx preview %}
+{% embed_file dropdownlist/dropdownlist-clear-value/app.tsx preview %}
+{% embed_file dropdownlist/dropdownlist-clear-value/main.tsx %}
 {% endmeta %}
diff --git a/knowledge-base/editor-change-cell-background.md b/docs/knowledge-base/editor-change-cell-background.md
similarity index 88%
rename from knowledge-base/editor-change-cell-background.md
rename to docs/knowledge-base/editor-change-cell-background.md
index 9395f91c..8b5dd815 100644
--- a/knowledge-base/editor-change-cell-background.md
+++ b/docs/knowledge-base/editor-change-cell-background.md
@@ -38,7 +38,8 @@ Create a custom tool that changes the background color of the cell:
 
 
 {% meta id:index height:460 %}
-{% embed_file editor/change-background-color-of-cell/main.tsx preview %}
+{% embed_file editor/change-background-color-of-cell/app.tsx preview %}
+{% embed_file editor/change-background-color-of-cell/main.tsx %}
 {% embed_file editor/change-background-color-of-cell/CellBackColorTool.tsx preview %}
 {% embed_file editor/change-background-color-of-cell/content-overview.ts preview %}
 {% endmeta %}
diff --git a/knowledge-base/editor-error-on-enter-press.md b/docs/knowledge-base/editor-error-on-enter-press.md
similarity index 100%
rename from knowledge-base/editor-error-on-enter-press.md
rename to docs/knowledge-base/editor-error-on-enter-press.md
diff --git a/knowledge-base/editor-proseMirror-mentions.md b/docs/knowledge-base/editor-proseMirror-mentions.md
similarity index 83%
rename from knowledge-base/editor-proseMirror-mentions.md
rename to docs/knowledge-base/editor-proseMirror-mentions.md
index 68f1b489..db9c9475 100644
--- a/knowledge-base/editor-proseMirror-mentions.md
+++ b/docs/knowledge-base/editor-proseMirror-mentions.md
@@ -31,6 +31,7 @@ How can I use @mentions and #hashtags inside the KendoReact Editor?
 You can use the [`proseMirror-mentions`](https://github.com/joelewis/prosemirror-mentions) plugin to provide a `@mentions` and `#hashtags` functionality for the KendoReact Editor.
 
 {% meta id:index height:330 %}
-{% embed_file editor/prose-mirror-mentions/main.jsx preview %}
-{% embed_file editor/prose-mirror-mentions/style.css preview %}
+{% embed_file editor/prose-mirror-mentions/app.jsx preview %}
+{% embed_file editor/prose-mirror-mentions/main.jsx %}
+{% embed_file editor/prose-mirror-mentions/style.css %}
 {% endmeta %}
diff --git a/knowledge-base/editor-set-maxwidth.md b/docs/knowledge-base/editor-set-maxwidth.md
similarity index 88%
rename from knowledge-base/editor-set-maxwidth.md
rename to docs/knowledge-base/editor-set-maxwidth.md
index 905b1907..fd86384b 100644
--- a/knowledge-base/editor-set-maxwidth.md
+++ b/docs/knowledge-base/editor-set-maxwidth.md
@@ -35,6 +35,7 @@ I want to set margins/max width inside of the Kendo text editor.
 This can be achieved by adding a `style` element to the iframe content element.
 
 {% meta id:index height:500 %}
-{% embed_file editor/set-maxwidth/main.jsx preview %}
+{% embed_file editor/set-maxwidth/app.jsx preview %}
+{% embed_file editor/set-maxwidth/main.jsx %}
 {% embed_file editor/set-maxwidth/content.js %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/examples/charts/chart-color-by-category/main.jsx b/docs/knowledge-base/examples/charts/chart-color-by-category/app.jsx
similarity index 93%
rename from knowledge-base/examples/charts/chart-color-by-category/main.jsx
rename to docs/knowledge-base/examples/charts/chart-color-by-category/app.jsx
index 5d6667d4..24f01f9c 100644
--- a/knowledge-base/examples/charts/chart-color-by-category/main.jsx
+++ b/docs/knowledge-base/examples/charts/chart-color-by-category/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 
 import {
   Chart,
@@ -69,4 +68,4 @@ const ChartContainer = () => (
   </Chart>
 );
 
-ReactDOM.render(<ChartContainer />, document.querySelector('my-app'));
+export default ChartContainer;
diff --git a/knowledge-base/examples/charts/chart-color-by-category/bubble-data.json b/docs/knowledge-base/examples/charts/chart-color-by-category/bubble-data.json
similarity index 100%
rename from knowledge-base/examples/charts/chart-color-by-category/bubble-data.json
rename to docs/knowledge-base/examples/charts/chart-color-by-category/bubble-data.json
diff --git a/docs/knowledge-base/examples/charts/chart-color-by-category/main.jsx b/docs/knowledge-base/examples/charts/chart-color-by-category/main.jsx
new file mode 100644
index 00000000..be93b206
--- /dev/null
+++ b/docs/knowledge-base/examples/charts/chart-color-by-category/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import ChartContainer from './app';
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<ChartContainer />);
\ No newline at end of file
diff --git a/knowledge-base/examples/charts/chart-rounded-bar-corners/main.jsx b/docs/knowledge-base/examples/charts/chart-rounded-bar-corners/app.jsx
similarity index 94%
rename from knowledge-base/examples/charts/chart-rounded-bar-corners/main.jsx
rename to docs/knowledge-base/examples/charts/chart-rounded-bar-corners/app.jsx
index 441194e3..b10b8ec4 100644
--- a/knowledge-base/examples/charts/chart-rounded-bar-corners/main.jsx
+++ b/docs/knowledge-base/examples/charts/chart-rounded-bar-corners/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Chart,
   ChartSeries,
@@ -88,4 +87,4 @@ const ChartContainer = () => (
   </Chart>
 );
 
-ReactDOM.render(<ChartContainer />, document.querySelector('my-app'));
+export default ChartContainer;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/charts/chart-rounded-bar-corners/main.jsx b/docs/knowledge-base/examples/charts/chart-rounded-bar-corners/main.jsx
new file mode 100644
index 00000000..be93b206
--- /dev/null
+++ b/docs/knowledge-base/examples/charts/chart-rounded-bar-corners/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import ChartContainer from './app';
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<ChartContainer />);
\ No newline at end of file
diff --git a/knowledge-base/examples/charts/heatmap-custom-series-item/main.jsx b/docs/knowledge-base/examples/charts/heatmap-custom-series-item/app.jsx
similarity index 93%
rename from knowledge-base/examples/charts/heatmap-custom-series-item/main.jsx
rename to docs/knowledge-base/examples/charts/heatmap-custom-series-item/app.jsx
index 7bbef4e8..ca73d86f 100644
--- a/knowledge-base/examples/charts/heatmap-custom-series-item/main.jsx
+++ b/docs/knowledge-base/examples/charts/heatmap-custom-series-item/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import 'hammerjs';
 import {
   Chart,
@@ -11,7 +10,7 @@ import {
   ChartXAxisItem,
 } from '@progress/kendo-react-charts';
 
-import { Point, Path } from '@progress/kendo-drawing';
+import { Path } from '@progress/kendo-drawing';
 //Data generator
 function makeDataObjects(rows, cols) {
   const data = [];
@@ -92,4 +91,4 @@ const ChartContainer = () => {
   );
 };
 
-ReactDOM.render(<ChartContainer />, document.querySelector('my-app'));
+export default ChartContainer;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/charts/heatmap-custom-series-item/main.jsx b/docs/knowledge-base/examples/charts/heatmap-custom-series-item/main.jsx
new file mode 100644
index 00000000..b85100e7
--- /dev/null
+++ b/docs/knowledge-base/examples/charts/heatmap-custom-series-item/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import ChartContainer from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<ChartContainer />);
\ No newline at end of file
diff --git a/knowledge-base/examples/charts/limiting-axis-labels-count/main.jsx b/docs/knowledge-base/examples/charts/limiting-axis-labels-count/app.jsx
similarity index 88%
rename from knowledge-base/examples/charts/limiting-axis-labels-count/main.jsx
rename to docs/knowledge-base/examples/charts/limiting-axis-labels-count/app.jsx
index 355f52d8..1b03202c 100644
--- a/knowledge-base/examples/charts/limiting-axis-labels-count/main.jsx
+++ b/docs/knowledge-base/examples/charts/limiting-axis-labels-count/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Chart,
   ChartTooltip,
@@ -42,4 +41,4 @@ const ChartContainer = () => (
   </Chart>
 );
 
-ReactDOM.render(<ChartContainer />, document.querySelector('my-app'));
+export default ChartContainer;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/charts/limiting-axis-labels-count/main.jsx b/docs/knowledge-base/examples/charts/limiting-axis-labels-count/main.jsx
new file mode 100644
index 00000000..b85100e7
--- /dev/null
+++ b/docs/knowledge-base/examples/charts/limiting-axis-labels-count/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import ChartContainer from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<ChartContainer />);
\ No newline at end of file
diff --git a/knowledge-base/examples/charts/set-colors/main.jsx b/docs/knowledge-base/examples/charts/set-colors/app.jsx
similarity index 89%
rename from knowledge-base/examples/charts/set-colors/main.jsx
rename to docs/knowledge-base/examples/charts/set-colors/app.jsx
index c70f53ab..259e04e6 100644
--- a/knowledge-base/examples/charts/set-colors/main.jsx
+++ b/docs/knowledge-base/examples/charts/set-colors/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 
 import {
     Chart,
@@ -50,8 +49,5 @@ const ChartContainer = () => (
     </Chart>
 );
 
-ReactDOM.render(
-    <ChartContainer />,
-    document.querySelector('my-app')
-);
+export default ChartContainer;
 
diff --git a/docs/knowledge-base/examples/charts/set-colors/main.jsx b/docs/knowledge-base/examples/charts/set-colors/main.jsx
new file mode 100644
index 00000000..b85100e7
--- /dev/null
+++ b/docs/knowledge-base/examples/charts/set-colors/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import ChartContainer from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<ChartContainer />);
\ No newline at end of file
diff --git a/knowledge-base/examples/charts/set-multiple-x-axes/main.jsx b/docs/knowledge-base/examples/charts/set-multiple-x-axes/app.jsx
similarity index 96%
rename from knowledge-base/examples/charts/set-multiple-x-axes/main.jsx
rename to docs/knowledge-base/examples/charts/set-multiple-x-axes/app.jsx
index cd4914e8..af5bed71 100644
--- a/knowledge-base/examples/charts/set-multiple-x-axes/main.jsx
+++ b/docs/knowledge-base/examples/charts/set-multiple-x-axes/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Chart,
   ChartSeries,
@@ -148,4 +147,4 @@ const ChartContainer = () => (
   </Chart>
 );
 
-ReactDOM.render(<ChartContainer />, document.querySelector('my-app'));
+export default ChartContainer;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/charts/set-multiple-x-axes/main.jsx b/docs/knowledge-base/examples/charts/set-multiple-x-axes/main.jsx
new file mode 100644
index 00000000..b85100e7
--- /dev/null
+++ b/docs/knowledge-base/examples/charts/set-multiple-x-axes/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import ChartContainer from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<ChartContainer />);
\ No newline at end of file
diff --git a/knowledge-base/examples/charts/set-plotbands-on-plot-area-click/main.jsx b/docs/knowledge-base/examples/charts/set-plotbands-on-plot-area-click/app.jsx
similarity index 93%
rename from knowledge-base/examples/charts/set-plotbands-on-plot-area-click/main.jsx
rename to docs/knowledge-base/examples/charts/set-plotbands-on-plot-area-click/app.jsx
index 5c1ecab0..ca8b18e8 100644
--- a/knowledge-base/examples/charts/set-plotbands-on-plot-area-click/main.jsx
+++ b/docs/knowledge-base/examples/charts/set-plotbands-on-plot-area-click/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 
 import {
     Chart,
@@ -83,7 +82,4 @@ const ChartContainer = () => {
   )
 }
 
-ReactDOM.render(
-    <ChartContainer />,
-    document.querySelector('my-app')
-);
\ No newline at end of file
+export default ChartContainer;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/charts/set-plotbands-on-plot-area-click/main.jsx b/docs/knowledge-base/examples/charts/set-plotbands-on-plot-area-click/main.jsx
new file mode 100644
index 00000000..b85100e7
--- /dev/null
+++ b/docs/knowledge-base/examples/charts/set-plotbands-on-plot-area-click/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import ChartContainer from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<ChartContainer />);
\ No newline at end of file
diff --git a/knowledge-base/examples/conversational-ui/chat-maxlength-char-count/main.tsx b/docs/knowledge-base/examples/conversational-ui/chat-maxlength-char-count/app.tsx
similarity index 95%
rename from knowledge-base/examples/conversational-ui/chat-maxlength-char-count/main.tsx
rename to docs/knowledge-base/examples/conversational-ui/chat-maxlength-char-count/app.tsx
index 8c3ad8b4..7123fdea 100644
--- a/knowledge-base/examples/conversational-ui/chat-maxlength-char-count/main.tsx
+++ b/docs/knowledge-base/examples/conversational-ui/chat-maxlength-char-count/app.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Chat,
   Message,
@@ -95,4 +94,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/knowledge-base/examples/app.jsx b/docs/knowledge-base/examples/conversational-ui/chat-maxlength-char-count/main.tsx
similarity index 69%
rename from knowledge-base/examples/app.jsx
rename to docs/knowledge-base/examples/conversational-ui/chat-maxlength-char-count/main.tsx
index cd83f743..36d8526e 100644
--- a/knowledge-base/examples/app.jsx
+++ b/docs/knowledge-base/examples/conversational-ui/chat-maxlength-char-count/main.tsx
@@ -1,5 +1,6 @@
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './editor/attach-events/app.jsx'
+import App from './app'
 
 const root = createRoot(document.querySelector('my-app'));
 root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/conversational-ui/chat-scroll-to-bottom/main.jsx b/docs/knowledge-base/examples/conversational-ui/chat-scroll-to-bottom/app.jsx
similarity index 93%
rename from knowledge-base/examples/conversational-ui/chat-scroll-to-bottom/main.jsx
rename to docs/knowledge-base/examples/conversational-ui/chat-scroll-to-bottom/app.jsx
index 4c913ab1..8d62ad94 100644
--- a/knowledge-base/examples/conversational-ui/chat-scroll-to-bottom/main.jsx
+++ b/docs/knowledge-base/examples/conversational-ui/chat-scroll-to-bottom/app.jsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import { Chat } from "@progress/kendo-react-conversational-ui";
 const user = {
   id: 1,
@@ -55,4 +54,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/attach-events/main.jsx b/docs/knowledge-base/examples/conversational-ui/chat-scroll-to-bottom/main.jsx
similarity index 85%
rename from knowledge-base/examples/editor/attach-events/main.jsx
rename to docs/knowledge-base/examples/conversational-ui/chat-scroll-to-bottom/main.jsx
index d1e7c760..36d8526e 100644
--- a/knowledge-base/examples/editor/attach-events/main.jsx
+++ b/docs/knowledge-base/examples/conversational-ui/chat-scroll-to-bottom/main.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './app.jsx'
+import App from './app'
 
 const root = createRoot(document.querySelector('my-app'));
 root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/main.jsx b/docs/knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/app.jsx
similarity index 94%
rename from knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/main.jsx
rename to docs/knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/app.jsx
index f57bc592..7e6b815f 100644
--- a/knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/main.jsx
+++ b/docs/knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/app.jsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { DateRangePicker } from '@progress/kendo-react-dateinputs';
-import { CustomPopup } from './customPopup';
 import { Popup } from '@progress/kendo-react-popup';
 import './styles.css';
 
@@ -100,4 +98,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/main.jsx b/docs/knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/styles.css b/docs/knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/styles.css
similarity index 100%
rename from knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/styles.css
rename to docs/knowledge-base/examples/dateinputs/daterangepicker-predefined-ranges/styles.css
diff --git a/knowledge-base/examples/dateinputs/daterangepicker-validate-range/main.jsx b/docs/knowledge-base/examples/dateinputs/daterangepicker-validate-range/app.jsx
similarity index 89%
rename from knowledge-base/examples/dateinputs/daterangepicker-validate-range/main.jsx
rename to docs/knowledge-base/examples/dateinputs/daterangepicker-validate-range/app.jsx
index 5345cd22..cae5d80e 100644
--- a/knowledge-base/examples/dateinputs/daterangepicker-validate-range/main.jsx
+++ b/docs/knowledge-base/examples/dateinputs/daterangepicker-validate-range/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 
 import { DateRangePicker } from '@progress/kendo-react-dateinputs';
 
@@ -30,4 +29,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/dateinputs/daterangepicker-validate-range/main.jsx b/docs/knowledge-base/examples/dateinputs/daterangepicker-validate-range/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/dateinputs/daterangepicker-validate-range/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/dateinputs/datetimepicker-conditional-set-button/main.jsx b/docs/knowledge-base/examples/dateinputs/datetimepicker-conditional-set-button/app.jsx
similarity index 92%
rename from knowledge-base/examples/dateinputs/datetimepicker-conditional-set-button/main.jsx
rename to docs/knowledge-base/examples/dateinputs/datetimepicker-conditional-set-button/app.jsx
index e6690ae2..ca3eb4ab 100644
--- a/knowledge-base/examples/dateinputs/datetimepicker-conditional-set-button/main.jsx
+++ b/docs/knowledge-base/examples/dateinputs/datetimepicker-conditional-set-button/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 
 import { DateTimePicker } from '@progress/kendo-react-dateinputs';
 import { Calendar } from '@progress/kendo-react-dateinputs';
@@ -56,4 +55,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/dateinputs/datetimepicker-conditional-set-button/main.jsx b/docs/knowledge-base/examples/dateinputs/datetimepicker-conditional-set-button/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/dateinputs/datetimepicker-conditional-set-button/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/dateinputs/multiviewcalendar-control-focus-date/main.jsx b/docs/knowledge-base/examples/dateinputs/multiviewcalendar-control-focus-date/app.jsx
similarity index 93%
rename from knowledge-base/examples/dateinputs/multiviewcalendar-control-focus-date/main.jsx
rename to docs/knowledge-base/examples/dateinputs/multiviewcalendar-control-focus-date/app.jsx
index 22569b05..6c80e6aa 100644
--- a/knowledge-base/examples/dateinputs/multiviewcalendar-control-focus-date/main.jsx
+++ b/docs/knowledge-base/examples/dateinputs/multiviewcalendar-control-focus-date/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { MultiViewCalendar } from '@progress/kendo-react-dateinputs';
 import { cloneDate, addDays } from '@progress/kendo-date-math';
 const EMPTY_SELECTIONRANGE = {
@@ -115,4 +114,4 @@ const App = () => {
     </div>;
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/dateinputs/multiviewcalendar-control-focus-date/main.jsx b/docs/knowledge-base/examples/dateinputs/multiviewcalendar-control-focus-date/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/dateinputs/multiviewcalendar-control-focus-date/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/dropdownlist/dropdownlist-clear-value/main.tsx b/docs/knowledge-base/examples/dropdownlist/dropdownlist-clear-value/app.tsx
similarity index 92%
rename from knowledge-base/examples/dropdownlist/dropdownlist-clear-value/main.tsx
rename to docs/knowledge-base/examples/dropdownlist/dropdownlist-clear-value/app.tsx
index e9b9d3de..9c403c63 100644
--- a/knowledge-base/examples/dropdownlist/dropdownlist-clear-value/main.tsx
+++ b/docs/knowledge-base/examples/dropdownlist/dropdownlist-clear-value/app.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import { DropDownList } from '@progress/kendo-react-dropdowns';
 
@@ -67,4 +66,4 @@ class AppComponent extends React.Component {
   }
 }
 
-ReactDOM.render(<AppComponent />, document.querySelector('my-app'));
+export default AppComponent;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/dropdownlist/dropdownlist-clear-value/main.tsx b/docs/knowledge-base/examples/dropdownlist/dropdownlist-clear-value/main.tsx
new file mode 100644
index 00000000..80a0d7bf
--- /dev/null
+++ b/docs/knowledge-base/examples/dropdownlist/dropdownlist-clear-value/main.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import AppComponent from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<AppComponent />);
\ No newline at end of file
diff --git a/knowledge-base/examples/dropdownlist/request-every-ten-items/main.jsx b/docs/knowledge-base/examples/dropdownlist/request-every-ten-items/app.jsx
similarity index 97%
rename from knowledge-base/examples/dropdownlist/request-every-ten-items/main.jsx
rename to docs/knowledge-base/examples/dropdownlist/request-every-ten-items/app.jsx
index 376b83d2..94560751 100644
--- a/knowledge-base/examples/dropdownlist/request-every-ten-items/main.jsx
+++ b/docs/knowledge-base/examples/dropdownlist/request-every-ten-items/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { DropDownList } from '@progress/kendo-react-dropdowns';
 const textField = 'ContactName';
 const keyField = 'CustomerID';
@@ -161,4 +160,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/dropdownlist/request-every-ten-items/main.jsx b/docs/knowledge-base/examples/dropdownlist/request-every-ten-items/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/dropdownlist/request-every-ten-items/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/dropdowns/combobox-open-on-focus-and-tab/main.jsx b/docs/knowledge-base/examples/dropdowns/combobox-open-on-focus-and-tab/app.jsx
similarity index 86%
rename from knowledge-base/examples/dropdowns/combobox-open-on-focus-and-tab/main.jsx
rename to docs/knowledge-base/examples/dropdowns/combobox-open-on-focus-and-tab/app.jsx
index c27d755a..ceb03a37 100644
--- a/knowledge-base/examples/dropdowns/combobox-open-on-focus-and-tab/main.jsx
+++ b/docs/knowledge-base/examples/dropdowns/combobox-open-on-focus-and-tab/app.jsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { ComboBox, ComboBoxChangeEvent } from '@progress/kendo-react-dropdowns';
+import { ComboBox } from '@progress/kendo-react-dropdowns';
 
 const sports = [
   { text: 'Basketball', id: 1 },
@@ -55,4 +54,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/dropdowns/combobox-open-on-focus-and-tab/main.jsx b/docs/knowledge-base/examples/dropdowns/combobox-open-on-focus-and-tab/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/dropdowns/combobox-open-on-focus-and-tab/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/dropdowns/combobox-open-popup-initially/main.jsx b/docs/knowledge-base/examples/dropdowns/combobox-open-popup-initially/app.jsx
similarity index 82%
rename from knowledge-base/examples/dropdowns/combobox-open-popup-initially/main.jsx
rename to docs/knowledge-base/examples/dropdowns/combobox-open-popup-initially/app.jsx
index d0328ee1..8d594049 100644
--- a/knowledge-base/examples/dropdowns/combobox-open-popup-initially/main.jsx
+++ b/docs/knowledge-base/examples/dropdowns/combobox-open-popup-initially/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { ComboBox } from '@progress/kendo-react-dropdowns';
 const allData = [
   {
@@ -29,5 +28,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
- 
\ No newline at end of file
+export default App; 
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/dropdowns/combobox-open-popup-initially/main.jsx b/docs/knowledge-base/examples/dropdowns/combobox-open-popup-initially/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/dropdowns/combobox-open-popup-initially/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/dropdowns/daterangepicker-validation/main.jsx b/docs/knowledge-base/examples/dropdowns/daterangepicker-validation/app.jsx
similarity index 85%
rename from knowledge-base/examples/dropdowns/daterangepicker-validation/main.jsx
rename to docs/knowledge-base/examples/dropdowns/daterangepicker-validation/app.jsx
index af5fb410..c5f79ae8 100644
--- a/knowledge-base/examples/dropdowns/daterangepicker-validation/main.jsx
+++ b/docs/knowledge-base/examples/dropdowns/daterangepicker-validation/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { DateRangePicker } from '@progress/kendo-react-dateinputs';
 import CustomStartDateInput from './customStartDateInput';
 import CustomEndDateInput from './customEndDateInput';
@@ -20,4 +19,4 @@ const App = () => {
     />
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/knowledge-base/examples/dropdowns/daterangepicker-validation/customEndDateInput.jsx b/docs/knowledge-base/examples/dropdowns/daterangepicker-validation/customEndDateInput.jsx
similarity index 100%
rename from knowledge-base/examples/dropdowns/daterangepicker-validation/customEndDateInput.jsx
rename to docs/knowledge-base/examples/dropdowns/daterangepicker-validation/customEndDateInput.jsx
diff --git a/knowledge-base/examples/dropdowns/daterangepicker-validation/customStartDateInput.jsx b/docs/knowledge-base/examples/dropdowns/daterangepicker-validation/customStartDateInput.jsx
similarity index 100%
rename from knowledge-base/examples/dropdowns/daterangepicker-validation/customStartDateInput.jsx
rename to docs/knowledge-base/examples/dropdowns/daterangepicker-validation/customStartDateInput.jsx
diff --git a/docs/knowledge-base/examples/dropdowns/daterangepicker-validation/main.jsx b/docs/knowledge-base/examples/dropdowns/daterangepicker-validation/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/dropdowns/daterangepicker-validation/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/add-non-editable-element/InsertShortcodeTool.jsx b/docs/knowledge-base/examples/editor/add-non-editable-element/InsertShortcodeTool.jsx
similarity index 100%
rename from knowledge-base/examples/editor/add-non-editable-element/InsertShortcodeTool.jsx
rename to docs/knowledge-base/examples/editor/add-non-editable-element/InsertShortcodeTool.jsx
diff --git a/knowledge-base/examples/editor/add-non-editable-element/main.jsx b/docs/knowledge-base/examples/editor/add-non-editable-element/app.jsx
similarity index 91%
rename from knowledge-base/examples/editor/add-non-editable-element/main.jsx
rename to docs/knowledge-base/examples/editor/add-non-editable-element/app.jsx
index abe7fe1b..133a8570 100644
--- a/knowledge-base/examples/editor/add-non-editable-element/main.jsx
+++ b/docs/knowledge-base/examples/editor/add-non-editable-element/app.jsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import {
   Editor,
   EditorTools,
@@ -74,4 +73,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/editor/add-non-editable-element/main.jsx b/docs/knowledge-base/examples/editor/add-non-editable-element/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/editor/add-non-editable-element/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/add-span-with-class/main.jsx b/docs/knowledge-base/examples/editor/add-span-with-class/app.jsx
similarity index 92%
rename from knowledge-base/examples/editor/add-span-with-class/main.jsx
rename to docs/knowledge-base/examples/editor/add-span-with-class/app.jsx
index f45c7c0e..8999f563 100644
--- a/knowledge-base/examples/editor/add-span-with-class/main.jsx
+++ b/docs/knowledge-base/examples/editor/add-span-with-class/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Button } from '@progress/kendo-react-buttons';
 import { Editor, EditorTools, EditorUtils } from '@progress/kendo-react-editor';
 
@@ -57,8 +56,5 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(
-    <App />,
-    document.querySelector('my-app')
-);
+export default App;
 
diff --git a/docs/knowledge-base/examples/editor/add-span-with-class/main.jsx b/docs/knowledge-base/examples/editor/add-span-with-class/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/editor/add-span-with-class/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/attach-events/app.jsx b/docs/knowledge-base/examples/editor/attach-events/app.jsx
similarity index 100%
rename from knowledge-base/examples/editor/attach-events/app.jsx
rename to docs/knowledge-base/examples/editor/attach-events/app.jsx
diff --git a/docs/knowledge-base/examples/editor/attach-events/main.jsx b/docs/knowledge-base/examples/editor/attach-events/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/editor/attach-events/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/change-background-color-of-cell/CellBackColorTool.tsx b/docs/knowledge-base/examples/editor/change-background-color-of-cell/CellBackColorTool.tsx
similarity index 100%
rename from knowledge-base/examples/editor/change-background-color-of-cell/CellBackColorTool.tsx
rename to docs/knowledge-base/examples/editor/change-background-color-of-cell/CellBackColorTool.tsx
diff --git a/knowledge-base/examples/editor/change-background-color-of-cell/main.tsx b/docs/knowledge-base/examples/editor/change-background-color-of-cell/app.tsx
similarity index 87%
rename from knowledge-base/examples/editor/change-background-color-of-cell/main.tsx
rename to docs/knowledge-base/examples/editor/change-background-color-of-cell/app.tsx
index 835818d5..9f3c559f 100644
--- a/knowledge-base/examples/editor/change-background-color-of-cell/main.tsx
+++ b/docs/knowledge-base/examples/editor/change-background-color-of-cell/app.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Editor, EditorTools } from '@progress/kendo-react-editor';
 
 import content from './content-overview';
@@ -35,4 +34,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/change-background-color-of-cell/content-overview.ts b/docs/knowledge-base/examples/editor/change-background-color-of-cell/content-overview.ts
similarity index 100%
rename from knowledge-base/examples/editor/change-background-color-of-cell/content-overview.ts
rename to docs/knowledge-base/examples/editor/change-background-color-of-cell/content-overview.ts
diff --git a/knowledge-base/examples/editor/change-background-color-of-cell/editor-cell-color.gif b/docs/knowledge-base/examples/editor/change-background-color-of-cell/editor-cell-color.gif
similarity index 100%
rename from knowledge-base/examples/editor/change-background-color-of-cell/editor-cell-color.gif
rename to docs/knowledge-base/examples/editor/change-background-color-of-cell/editor-cell-color.gif
diff --git a/docs/knowledge-base/examples/editor/change-background-color-of-cell/main.tsx b/docs/knowledge-base/examples/editor/change-background-color-of-cell/main.tsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/editor/change-background-color-of-cell/main.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/custom-font-size-tool/main.jsx b/docs/knowledge-base/examples/editor/custom-font-size-tool/app.jsx
similarity index 85%
rename from knowledge-base/examples/editor/custom-font-size-tool/main.jsx
rename to docs/knowledge-base/examples/editor/custom-font-size-tool/app.jsx
index 94972c92..c997a058 100644
--- a/knowledge-base/examples/editor/custom-font-size-tool/main.jsx
+++ b/docs/knowledge-base/examples/editor/custom-font-size-tool/app.jsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 
 import { Editor } from "@progress/kendo-react-editor";
 
@@ -19,4 +18,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/custom-font-size-tool/customFontSize.jsx b/docs/knowledge-base/examples/editor/custom-font-size-tool/customFontSize.jsx
similarity index 100%
rename from knowledge-base/examples/editor/custom-font-size-tool/customFontSize.jsx
rename to docs/knowledge-base/examples/editor/custom-font-size-tool/customFontSize.jsx
diff --git a/docs/knowledge-base/examples/editor/custom-font-size-tool/main.jsx b/docs/knowledge-base/examples/editor/custom-font-size-tool/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/editor/custom-font-size-tool/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/custom-tools/main.jsx b/docs/knowledge-base/examples/editor/custom-tools/app.jsx
similarity index 87%
rename from knowledge-base/examples/editor/custom-tools/main.jsx
rename to docs/knowledge-base/examples/editor/custom-tools/app.jsx
index 3e996ce2..c3e3d41b 100644
--- a/knowledge-base/examples/editor/custom-tools/main.jsx
+++ b/docs/knowledge-base/examples/editor/custom-tools/app.jsx
@@ -1,6 +1,5 @@
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 
 import { Editor } from '@progress/kendo-react-editor';
 
@@ -24,8 +23,5 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(
-    <App />,
-    document.querySelector('my-app')
-);
+export default App;
 
diff --git a/knowledge-base/examples/editor/custom-tools/backgroundColorTool.jsx b/docs/knowledge-base/examples/editor/custom-tools/backgroundColorTool.jsx
similarity index 100%
rename from knowledge-base/examples/editor/custom-tools/backgroundColorTool.jsx
rename to docs/knowledge-base/examples/editor/custom-tools/backgroundColorTool.jsx
diff --git a/knowledge-base/examples/editor/custom-tools/clearAll.jsx b/docs/knowledge-base/examples/editor/custom-tools/clearAll.jsx
similarity index 100%
rename from knowledge-base/examples/editor/custom-tools/clearAll.jsx
rename to docs/knowledge-base/examples/editor/custom-tools/clearAll.jsx
diff --git a/docs/knowledge-base/examples/editor/custom-tools/main.jsx b/docs/knowledge-base/examples/editor/custom-tools/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/editor/custom-tools/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/custom-tools/myColorTool.jsx b/docs/knowledge-base/examples/editor/custom-tools/myColorTool.jsx
similarity index 100%
rename from knowledge-base/examples/editor/custom-tools/myColorTool.jsx
rename to docs/knowledge-base/examples/editor/custom-tools/myColorTool.jsx
diff --git a/knowledge-base/examples/editor/prose-mirror-mentions/main.jsx b/docs/knowledge-base/examples/editor/prose-mirror-mentions/app.jsx
similarity index 96%
rename from knowledge-base/examples/editor/prose-mirror-mentions/main.jsx
rename to docs/knowledge-base/examples/editor/prose-mirror-mentions/app.jsx
index fb60b9cb..a534e6cc 100644
--- a/knowledge-base/examples/editor/prose-mirror-mentions/main.jsx
+++ b/docs/knowledge-base/examples/editor/prose-mirror-mentions/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 
 import { Editor, ProseMirror, EditorUtils } from '@progress/kendo-react-editor';
 import { addMentionNodes, addTagNodes, getMentionsPlugin } from 'prosemirror-mentions';
@@ -92,7 +91,4 @@ const App = () => {
     );
 };
 
-ReactDOM.render(
-    <App />,
-    document.querySelector('my-app')
-);
+export default App;
diff --git a/docs/knowledge-base/examples/editor/prose-mirror-mentions/main.jsx b/docs/knowledge-base/examples/editor/prose-mirror-mentions/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/editor/prose-mirror-mentions/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/prose-mirror-mentions/style.css b/docs/knowledge-base/examples/editor/prose-mirror-mentions/style.css
similarity index 100%
rename from knowledge-base/examples/editor/prose-mirror-mentions/style.css
rename to docs/knowledge-base/examples/editor/prose-mirror-mentions/style.css
diff --git a/knowledge-base/examples/editor/set-maxwidth/main.jsx b/docs/knowledge-base/examples/editor/set-maxwidth/app.jsx
similarity index 92%
rename from knowledge-base/examples/editor/set-maxwidth/main.jsx
rename to docs/knowledge-base/examples/editor/set-maxwidth/app.jsx
index 28595f14..d4f91c7e 100644
--- a/knowledge-base/examples/editor/set-maxwidth/main.jsx
+++ b/docs/knowledge-base/examples/editor/set-maxwidth/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import content from './content';
 import { Editor, EditorTools } from '@progress/kendo-react-editor';
 
@@ -47,4 +46,4 @@ const App = () => {
     />
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/knowledge-base/examples/editor/set-maxwidth/content.js b/docs/knowledge-base/examples/editor/set-maxwidth/content.js
similarity index 100%
rename from knowledge-base/examples/editor/set-maxwidth/content.js
rename to docs/knowledge-base/examples/editor/set-maxwidth/content.js
diff --git a/docs/knowledge-base/examples/editor/set-maxwidth/main.jsx b/docs/knowledge-base/examples/editor/set-maxwidth/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/editor/set-maxwidth/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/excel/excel-conditional-styling/main.jsx b/docs/knowledge-base/examples/excel/excel-conditional-styling/app.tsx
similarity index 90%
rename from knowledge-base/examples/excel/excel-conditional-styling/main.jsx
rename to docs/knowledge-base/examples/excel/excel-conditional-styling/app.tsx
index 2f441b02..05e72882 100644
--- a/knowledge-base/examples/excel/excel-conditional-styling/main.jsx
+++ b/docs/knowledge-base/examples/excel/excel-conditional-styling/app.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   ExcelExport,
   ExcelExportColumn,
   WorkbookOptions,
 } from '@progress/kendo-react-excel-export';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 const data = products;
 const modifiedData = data.map((item) => ({
@@ -56,4 +55,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/excel/excel-conditional-styling/main.jsx b/docs/knowledge-base/examples/excel/excel-conditional-styling/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/excel/excel-conditional-styling/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/form/file-upload/main.jsx b/docs/knowledge-base/examples/form/file-upload/app.jsx
similarity index 95%
rename from knowledge-base/examples/form/file-upload/main.jsx
rename to docs/knowledge-base/examples/form/file-upload/app.jsx
index 441e903c..e68898ce 100644
--- a/knowledge-base/examples/form/file-upload/main.jsx
+++ b/docs/knowledge-base/examples/form/file-upload/app.jsx
@@ -1,7 +1,4 @@
-
-
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Form, Field } from '@progress/kendo-react-form';
 import { Input } from '@progress/kendo-react-inputs';
 import { Upload } from '@progress/kendo-react-upload';
@@ -64,8 +61,6 @@ const App = () => {
         />
     );
 };
-ReactDOM.render(
-    <App />,
-    document.querySelector('my-app')
-);
+
+export default App;
 
diff --git a/docs/knowledge-base/examples/form/file-upload/main.jsx b/docs/knowledge-base/examples/form/file-upload/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/form/file-upload/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/form/form-reset-and-change-initial-values/main.jsx b/docs/knowledge-base/examples/form/form-reset-and-change-initial-values/app.jsx
similarity index 96%
rename from knowledge-base/examples/form/form-reset-and-change-initial-values/main.jsx
rename to docs/knowledge-base/examples/form/form-reset-and-change-initial-values/app.jsx
index cdfbc0f7..0ccd0bfd 100644
--- a/knowledge-base/examples/form/form-reset-and-change-initial-values/main.jsx
+++ b/docs/knowledge-base/examples/form/form-reset-and-change-initial-values/app.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Form, Field, FormElement } from '@progress/kendo-react-form';
 import { Input } from '@progress/kendo-react-inputs';
 import { Button } from '@progress/kendo-react-buttons';
@@ -84,4 +83,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/form/form-reset-and-change-initial-values/main.jsx b/docs/knowledge-base/examples/form/form-reset-and-change-initial-values/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/form/form-reset-and-change-initial-values/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/form/getting-editor-ref-and-keydown/main.jsx b/docs/knowledge-base/examples/form/getting-editor-ref-and-keydown/app.jsx
similarity index 96%
rename from knowledge-base/examples/form/getting-editor-ref-and-keydown/main.jsx
rename to docs/knowledge-base/examples/form/getting-editor-ref-and-keydown/app.jsx
index ffc1e014..7fe5d871 100644
--- a/knowledge-base/examples/form/getting-editor-ref-and-keydown/main.jsx
+++ b/docs/knowledge-base/examples/form/getting-editor-ref-and-keydown/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Form,
   Field,
@@ -99,4 +98,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/form/getting-editor-ref-and-keydown/main.jsx b/docs/knowledge-base/examples/form/getting-editor-ref-and-keydown/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/form/getting-editor-ref-and-keydown/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/form/spinner-inside-submit-button/main.jsx b/docs/knowledge-base/examples/form/spinner-inside-submit-button/app.jsx
similarity index 96%
rename from knowledge-base/examples/form/spinner-inside-submit-button/main.jsx
rename to docs/knowledge-base/examples/form/spinner-inside-submit-button/app.jsx
index 05eb260a..904be1e0 100644
--- a/knowledge-base/examples/form/spinner-inside-submit-button/main.jsx
+++ b/docs/knowledge-base/examples/form/spinner-inside-submit-button/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Form, Field, FormElement } from '@progress/kendo-react-form';
 import { Error } from '@progress/kendo-react-labels';
 import { Input } from '@progress/kendo-react-inputs';
@@ -101,4 +100,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/form/spinner-inside-submit-button/main.jsx b/docs/knowledge-base/examples/form/spinner-inside-submit-button/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/form/spinner-inside-submit-button/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/form/spinner-inside-submit-button/spinner-inside-submit-button.gif b/docs/knowledge-base/examples/form/spinner-inside-submit-button/spinner-inside-submit-button.gif
similarity index 100%
rename from knowledge-base/examples/form/spinner-inside-submit-button/spinner-inside-submit-button.gif
rename to docs/knowledge-base/examples/form/spinner-inside-submit-button/spinner-inside-submit-button.gif
diff --git a/knowledge-base/examples/gantt/scroll-to-today/main.jsx b/docs/knowledge-base/examples/gantt/scroll-to-today/app.jsx
similarity index 97%
rename from knowledge-base/examples/gantt/scroll-to-today/main.jsx
rename to docs/knowledge-base/examples/gantt/scroll-to-today/app.jsx
index 03faf241..dbf395d3 100644
--- a/knowledge-base/examples/gantt/scroll-to-today/main.jsx
+++ b/docs/knowledge-base/examples/gantt/scroll-to-today/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Gantt,
   GanttWeekView,
@@ -174,4 +173,5 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
\ No newline at end of file
diff --git a/knowledge-base/examples/gantt/scroll-to-today/data.js b/docs/knowledge-base/examples/gantt/scroll-to-today/data.js
similarity index 100%
rename from knowledge-base/examples/gantt/scroll-to-today/data.js
rename to docs/knowledge-base/examples/gantt/scroll-to-today/data.js
diff --git a/docs/knowledge-base/examples/gantt/scroll-to-today/main.jsx b/docs/knowledge-base/examples/gantt/scroll-to-today/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/gantt/scroll-to-today/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/add-new-column/ColumnForm.jsx b/docs/knowledge-base/examples/grid/add-new-column/ColumnForm.jsx
similarity index 96%
rename from knowledge-base/examples/grid/add-new-column/ColumnForm.jsx
rename to docs/knowledge-base/examples/grid/add-new-column/ColumnForm.jsx
index cbc16cc8..fce1e5a2 100644
--- a/knowledge-base/examples/grid/add-new-column/ColumnForm.jsx
+++ b/docs/knowledge-base/examples/grid/add-new-column/ColumnForm.jsx
@@ -2,7 +2,6 @@ import * as React from "react";
 import { Dialog } from "@progress/kendo-react-dialogs";
 import { Form, Field, FormElement } from "@progress/kendo-react-form";
 import { Input } from "@progress/kendo-react-inputs";
-import { Dialog } from "@progress/kendo-react-dialogs";
 import { Button } from '@progress/kendo-react-buttons';
 
 const ColumnForm = props => {
diff --git a/knowledge-base/examples/grid/add-new-column/main.jsx b/docs/knowledge-base/examples/grid/add-new-column/app.jsx
similarity index 96%
rename from knowledge-base/examples/grid/add-new-column/main.jsx
rename to docs/knowledge-base/examples/grid/add-new-column/app.jsx
index 9113e775..5ae0be0d 100644
--- a/knowledge-base/examples/grid/add-new-column/main.jsx
+++ b/docs/knowledge-base/examples/grid/add-new-column/app.jsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Grid,
   GridColumn as Column,
@@ -8,7 +7,7 @@ import {
 import { Button } from '@progress/kendo-react-buttons';
 import ColumnForm from './ColumnForm.jsx';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 const App = () => {
   const columns = Object.keys(products[0]);
@@ -159,4 +158,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/add-new-column/main.jsx b/docs/knowledge-base/examples/grid/add-new-column/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/add-new-column/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/main.jsx b/docs/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/app.jsx
similarity index 91%
rename from knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/main.jsx
rename to docs/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/app.jsx
index 9b3f4031..66b0cd89 100644
--- a/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/main.jsx
+++ b/docs/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { filterBy } from '@progress/kendo-data-query';
 import { InputFilterCell } from './inputFilterCell';
@@ -41,4 +40,5 @@ const App = () => {
     </Grid>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/inputFilterCell.jsx b/docs/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/inputFilterCell.jsx
similarity index 100%
rename from knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/inputFilterCell.jsx
rename to docs/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/inputFilterCell.jsx
diff --git a/docs/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/main.jsx b/docs/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/sample-products.jsx b/docs/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/sample-products.jsx
similarity index 100%
rename from knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/sample-products.jsx
rename to docs/knowledge-base/examples/grid/add-operators-dropdown-for-custom-filtercell/sample-products.jsx
diff --git a/knowledge-base/examples/grid/auto-width/calculate-size/main.jsx b/docs/knowledge-base/examples/grid/auto-width/calculate-size/app.jsx
similarity index 90%
rename from knowledge-base/examples/grid/auto-width/calculate-size/main.jsx
rename to docs/knowledge-base/examples/grid/auto-width/calculate-size/app.jsx
index 1fab8893..0d7a648e 100644
--- a/knowledge-base/examples/grid/auto-width/calculate-size/main.jsx
+++ b/docs/knowledge-base/examples/grid/auto-width/calculate-size/app.jsx
@@ -1,10 +1,9 @@
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import calculateSize from 'calculate-size';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 class App extends React.Component {
   state = {
@@ -49,7 +48,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('my-app')
-);
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/auto-width/calculate-size/main.jsx b/docs/knowledge-base/examples/grid/auto-width/calculate-size/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/auto-width/calculate-size/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/auto-width/canvas/main.jsx b/docs/knowledge-base/examples/grid/auto-width/canvas/app.jsx
similarity index 89%
rename from knowledge-base/examples/grid/auto-width/canvas/main.jsx
rename to docs/knowledge-base/examples/grid/auto-width/canvas/app.jsx
index ba8a7529..785345a9 100644
--- a/knowledge-base/examples/grid/auto-width/canvas/main.jsx
+++ b/docs/knowledge-base/examples/grid/auto-width/canvas/app.jsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 const App = () => {
   const calculateWidth = (field) => {
@@ -46,4 +45,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/auto-width/canvas/main.jsx b/docs/knowledge-base/examples/grid/auto-width/canvas/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/auto-width/canvas/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/cell-edit-on-enter-press/main.jsx b/docs/knowledge-base/examples/grid/cell-edit-on-enter-press/app.jsx
similarity index 96%
rename from knowledge-base/examples/grid/cell-edit-on-enter-press/main.jsx
rename to docs/knowledge-base/examples/grid/cell-edit-on-enter-press/app.jsx
index e7cb8e6b..ccbe2af3 100644
--- a/knowledge-base/examples/grid/cell-edit-on-enter-press/main.jsx
+++ b/docs/knowledge-base/examples/grid/cell-edit-on-enter-press/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Grid,
   GridColumn as Column,
@@ -115,4 +114,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/cell-edit-on-enter-press/main.jsx b/docs/knowledge-base/examples/grid/cell-edit-on-enter-press/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/cell-edit-on-enter-press/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/cell-edit-on-enter-press/renderers.jsx b/docs/knowledge-base/examples/grid/cell-edit-on-enter-press/renderers.jsx
similarity index 100%
rename from knowledge-base/examples/grid/cell-edit-on-enter-press/renderers.jsx
rename to docs/knowledge-base/examples/grid/cell-edit-on-enter-press/renderers.jsx
diff --git a/knowledge-base/examples/grid/cell-edit-on-enter-press/sample-products.jsx b/docs/knowledge-base/examples/grid/cell-edit-on-enter-press/sample-products.jsx
similarity index 100%
rename from knowledge-base/examples/grid/cell-edit-on-enter-press/sample-products.jsx
rename to docs/knowledge-base/examples/grid/cell-edit-on-enter-press/sample-products.jsx
diff --git a/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/ExtendedGridCell.jsx b/docs/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/ExtendedGridCell.jsx
similarity index 99%
rename from knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/ExtendedGridCell.jsx
rename to docs/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/ExtendedGridCell.jsx
index 53e180c8..df56b4fd 100644
--- a/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/ExtendedGridCell.jsx
+++ b/docs/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/ExtendedGridCell.jsx
@@ -3,7 +3,6 @@ import { useInternationalization } from '@progress/kendo-react-intl';
 import { useTableKeyboardNavigation } from '@progress/kendo-react-data-tools';
 import {
   GRID_COL_INDEX_ATTRIBUTE,
-  GridTdAttributes,
 } from '@progress/kendo-react-grid';
 import { classNames } from '@progress/kendo-react-common';
 
diff --git a/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/main.jsx b/docs/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/app.jsx
similarity index 94%
rename from knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/main.jsx
rename to docs/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/app.jsx
index eff2c91c..2abd03b5 100644
--- a/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/main.jsx
+++ b/docs/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/app.jsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Grid,
   GridColumn as Column,
   GridToolbar,
 } from '@progress/kendo-react-grid';
 import { sampleProducts } from './sample-products';
-import { Checkbox } from '@progress/kendo-react-inputs/dist/es/checkbox/Checkbox';
+import { Checkbox } from '@progress/kendo-react-inputs';
 import { ExtendedGridCell } from './ExtendedGridCell';
 
 //Custom cell for displaying disabled Checkbox in view mode of the cell
@@ -118,4 +117,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/main.jsx b/docs/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/sample-products.jsx b/docs/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/sample-products.jsx
similarity index 100%
rename from knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/sample-products.jsx
rename to docs/knowledge-base/examples/grid/checkbox-in-view-mode-for-boolean/sample-products.jsx
diff --git a/knowledge-base/examples/grid/checkbox-selection-server-side/main.jsx b/docs/knowledge-base/examples/grid/checkbox-selection-server-side/app.jsx
similarity index 93%
rename from knowledge-base/examples/grid/checkbox-selection-server-side/main.jsx
rename to docs/knowledge-base/examples/grid/checkbox-selection-server-side/app.jsx
index abf34288..323d6cbd 100644
--- a/knowledge-base/examples/grid/checkbox-selection-server-side/main.jsx
+++ b/docs/knowledge-base/examples/grid/checkbox-selection-server-side/app.jsx
@@ -1,7 +1,4 @@
-
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { ProductsLoader } from './products-loader.jsx';
 
@@ -107,4 +104,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/checkbox-selection-server-side/main.jsx b/docs/knowledge-base/examples/grid/checkbox-selection-server-side/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/checkbox-selection-server-side/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/checkbox-selection-server-side/products-loader.jsx b/docs/knowledge-base/examples/grid/checkbox-selection-server-side/products-loader.jsx
similarity index 95%
rename from knowledge-base/examples/grid/checkbox-selection-server-side/products-loader.jsx
rename to docs/knowledge-base/examples/grid/checkbox-selection-server-side/products-loader.jsx
index 30f5f608..1e44908f 100644
--- a/knowledge-base/examples/grid/checkbox-selection-server-side/products-loader.jsx
+++ b/docs/knowledge-base/examples/grid/checkbox-selection-server-side/products-loader.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { toODataString } from '@progress/kendo-data-query';
 
 export class ProductsLoader extends React.Component {
diff --git a/knowledge-base/examples/grid/checkbox-selection-with-grouping/main.jsx b/docs/knowledge-base/examples/grid/checkbox-selection-with-grouping/app.jsx
similarity index 98%
rename from knowledge-base/examples/grid/checkbox-selection-with-grouping/main.jsx
rename to docs/knowledge-base/examples/grid/checkbox-selection-with-grouping/app.jsx
index 9cb8cf96..246b3d11 100644
--- a/knowledge-base/examples/grid/checkbox-selection-with-grouping/main.jsx
+++ b/docs/knowledge-base/examples/grid/checkbox-selection-with-grouping/app.jsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { getter } from '@progress/kendo-react-common';
-
 import { process } from '@progress/kendo-data-query';
 import {
   Grid,
@@ -204,4 +202,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/checkbox-selection-with-grouping/main.jsx b/docs/knowledge-base/examples/grid/checkbox-selection-with-grouping/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/checkbox-selection-with-grouping/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/checkbox-selection-with-grouping/products.json b/docs/knowledge-base/examples/grid/checkbox-selection-with-grouping/products.json
similarity index 100%
rename from knowledge-base/examples/grid/checkbox-selection-with-grouping/products.json
rename to docs/knowledge-base/examples/grid/checkbox-selection-with-grouping/products.json
diff --git a/knowledge-base/examples/grid/checkboxfilter-outside-grid/main.jsx b/docs/knowledge-base/examples/grid/checkboxfilter-outside-grid/app.jsx
similarity index 83%
rename from knowledge-base/examples/grid/checkboxfilter-outside-grid/main.jsx
rename to docs/knowledge-base/examples/grid/checkboxfilter-outside-grid/app.jsx
index 9d4f83b4..cd31d55f 100644
--- a/knowledge-base/examples/grid/checkboxfilter-outside-grid/main.jsx
+++ b/docs/knowledge-base/examples/grid/checkboxfilter-outside-grid/app.jsx
@@ -1,11 +1,8 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { process } from '@progress/kendo-data-query';
-import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
-import { ColumnMenu } from './columnMenu';
+
 import { GridColumnMenuCheckboxFilter } from '@progress/kendo-react-grid';
 import { Popup } from '@progress/kendo-react-popup';
-import products from './products.json';
+import products from './shared-products.json';
 
 
 const CheckboxListMenu = (props) => {
@@ -71,4 +68,5 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App; 
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/checkboxfilter-outside-grid/columnMenu.jsx b/docs/knowledge-base/examples/grid/checkboxfilter-outside-grid/columnMenu.jsx
similarity index 100%
rename from knowledge-base/examples/grid/checkboxfilter-outside-grid/columnMenu.jsx
rename to docs/knowledge-base/examples/grid/checkboxfilter-outside-grid/columnMenu.jsx
diff --git a/docs/knowledge-base/examples/grid/checkboxfilter-outside-grid/main.jsx b/docs/knowledge-base/examples/grid/checkboxfilter-outside-grid/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/checkboxfilter-outside-grid/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/collapse-header-column/main.jsx b/docs/knowledge-base/examples/grid/collapse-header-column/app.jsx
similarity index 95%
rename from knowledge-base/examples/grid/collapse-header-column/main.jsx
rename to docs/knowledge-base/examples/grid/collapse-header-column/app.jsx
index b395d425..e561d66c 100644
--- a/knowledge-base/examples/grid/collapse-header-column/main.jsx
+++ b/docs/knowledge-base/examples/grid/collapse-header-column/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import products from './products.json';
 
@@ -72,4 +71,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/collapse-header-column/grid-collapse-header-columns.gif b/docs/knowledge-base/examples/grid/collapse-header-column/grid-collapse-header-columns.gif
similarity index 100%
rename from knowledge-base/examples/grid/collapse-header-column/grid-collapse-header-columns.gif
rename to docs/knowledge-base/examples/grid/collapse-header-column/grid-collapse-header-columns.gif
diff --git a/docs/knowledge-base/examples/grid/collapse-header-column/main.jsx b/docs/knowledge-base/examples/grid/collapse-header-column/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/collapse-header-column/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/collapse-header-column/products.json b/docs/knowledge-base/examples/grid/collapse-header-column/products.json
similarity index 100%
rename from knowledge-base/examples/grid/collapse-header-column/products.json
rename to docs/knowledge-base/examples/grid/collapse-header-column/products.json
diff --git a/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/main.jsx b/docs/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/app.jsx
similarity index 92%
rename from knowledge-base/examples/grid/columnmenufilter-with-autocomplete/main.jsx
rename to docs/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/app.jsx
index 0a192b22..435f71a1 100644
--- a/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/main.jsx
+++ b/docs/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { process } from '@progress/kendo-data-query';
 import {
     Grid, GridColumn as Column
@@ -10,7 +9,7 @@ import {
     GridColumnMenuFilter
 } from '@progress/kendo-react-grid';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 class App extends React.Component {
     constructor(props) {
@@ -68,4 +67,4 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/customFilterUI.jsx b/docs/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/customFilterUI.jsx
similarity index 97%
rename from knowledge-base/examples/grid/columnmenufilter-with-autocomplete/customFilterUI.jsx
rename to docs/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/customFilterUI.jsx
index 837baf30..dca1f101 100644
--- a/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/customFilterUI.jsx
+++ b/docs/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/customFilterUI.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AutoComplete, DropDownList } from '@progress/kendo-react-dropdowns';
-import products from './products.json';
+import products from './shared-products.json';
 
 
 export const CustomFilterUI = (props) => {
diff --git a/docs/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/main.jsx b/docs/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/columnmenufilter-with-autocomplete/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/context-menu/main.jsx b/docs/knowledge-base/examples/grid/context-menu/app.jsx
similarity index 93%
rename from knowledge-base/examples/grid/context-menu/main.jsx
rename to docs/knowledge-base/examples/grid/context-menu/app.jsx
index 7b1d9116..e5d225a4 100644
--- a/knowledge-base/examples/grid/context-menu/main.jsx
+++ b/docs/knowledge-base/examples/grid/context-menu/app.jsx
@@ -1,11 +1,9 @@
-
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { Popup } from '@progress/kendo-react-popup';
 import { Menu, MenuItem } from '@progress/kendo-react-layout';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 class App extends React.Component {
     state = {
@@ -140,8 +138,5 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(
-    <App />,
-    document.querySelector('my-app')
-);
+export default App;
 
diff --git a/docs/knowledge-base/examples/grid/context-menu/main.jsx b/docs/knowledge-base/examples/grid/context-menu/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/context-menu/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/custom-expand-collapse-column/main.jsx b/docs/knowledge-base/examples/grid/custom-expand-collapse-column/app.jsx
similarity index 93%
rename from knowledge-base/examples/grid/custom-expand-collapse-column/main.jsx
rename to docs/knowledge-base/examples/grid/custom-expand-collapse-column/app.jsx
index fae88b3e..38f78d6a 100644
--- a/knowledge-base/examples/grid/custom-expand-collapse-column/main.jsx
+++ b/docs/knowledge-base/examples/grid/custom-expand-collapse-column/app.jsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
-import products from './products.json';
+import products from './shared-products.json';
 import { IconWrap } from '@progress/kendo-react-common';
 import { minusIcon, plusIcon } from '@progress/kendo-svg-icons';
 const DetailComponent = (props) => {
@@ -82,4 +81,5 @@ const App = () => {
     </Grid>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/custom-expand-collapse-column/main.jsx b/docs/knowledge-base/examples/grid/custom-expand-collapse-column/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/custom-expand-collapse-column/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/custom-header-cell-with-sorting-and-columnmenu/main.jsx b/docs/knowledge-base/examples/grid/custom-header-cell-with-sorting-and-columnmenu/app.jsx
similarity index 95%
rename from knowledge-base/examples/grid/custom-header-cell-with-sorting-and-columnmenu/main.jsx
rename to docs/knowledge-base/examples/grid/custom-header-cell-with-sorting-and-columnmenu/app.jsx
index 3d0c3d0a..517cf6d5 100644
--- a/knowledge-base/examples/grid/custom-header-cell-with-sorting-and-columnmenu/main.jsx
+++ b/docs/knowledge-base/examples/grid/custom-header-cell-with-sorting-and-columnmenu/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { process } from '@progress/kendo-data-query';
 import {
   Grid,
@@ -86,4 +85,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/custom-header-cell-with-sorting-and-columnmenu/main.jsx b/docs/knowledge-base/examples/grid/custom-header-cell-with-sorting-and-columnmenu/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/custom-header-cell-with-sorting-and-columnmenu/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/date-range-filter/main.jsx b/docs/knowledge-base/examples/grid/date-range-filter/app.jsx
similarity index 92%
rename from knowledge-base/examples/grid/date-range-filter/main.jsx
rename to docs/knowledge-base/examples/grid/date-range-filter/app.jsx
index 8d8b9c33..81f59a1f 100644
--- a/knowledge-base/examples/grid/date-range-filter/main.jsx
+++ b/docs/knowledge-base/examples/grid/date-range-filter/app.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { filterBy } from '@progress/kendo-data-query';
 import { DatePicker } from '@progress/kendo-react-dateinputs';
 import { Button } from '@progress/kendo-react-buttons';
 
-import { sampleProducts } from './sample-products';
+import { sampleProducts } from './shared-sample-products';
 
 const defaultValue = new Date(1996, 8, 19);
 
@@ -138,4 +137,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/date-range-filter/main.jsx b/docs/knowledge-base/examples/grid/date-range-filter/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/date-range-filter/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/disable-selection-for-rows-conditionally/main.jsx b/docs/knowledge-base/examples/grid/disable-selection-for-rows-conditionally/app.jsx
similarity index 96%
rename from knowledge-base/examples/grid/disable-selection-for-rows-conditionally/main.jsx
rename to docs/knowledge-base/examples/grid/disable-selection-for-rows-conditionally/app.jsx
index c8c4db39..77db3a6e 100644
--- a/knowledge-base/examples/grid/disable-selection-for-rows-conditionally/main.jsx
+++ b/docs/knowledge-base/examples/grid/disable-selection-for-rows-conditionally/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Grid,
   GridColumn as Column,
@@ -101,4 +100,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/disable-selection-for-rows-conditionally/main.jsx b/docs/knowledge-base/examples/grid/disable-selection-for-rows-conditionally/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/disable-selection-for-rows-conditionally/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/disable-selection-for-rows-conditionally/products.json b/docs/knowledge-base/examples/grid/disable-selection-for-rows-conditionally/products.json
similarity index 100%
rename from knowledge-base/examples/grid/disable-selection-for-rows-conditionally/products.json
rename to docs/knowledge-base/examples/grid/disable-selection-for-rows-conditionally/products.json
diff --git a/knowledge-base/examples/grid/drag-drop-between-grids/main.jsx b/docs/knowledge-base/examples/grid/drag-drop-between-grids/app.jsx
similarity index 92%
rename from knowledge-base/examples/grid/drag-drop-between-grids/main.jsx
rename to docs/knowledge-base/examples/grid/drag-drop-between-grids/app.jsx
index 294e6b8c..37ae299f 100644
--- a/knowledge-base/examples/grid/drag-drop-between-grids/main.jsx
+++ b/docs/knowledge-base/examples/grid/drag-drop-between-grids/app.jsx
@@ -1,9 +1,7 @@
-
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 const RowRender = (properties) => {
   const {row, props, onDrop, onDragStart } = {...properties}
@@ -100,8 +98,5 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(
-    <App />,
-    document.querySelector('my-app')
-);
+export default App;
 
diff --git a/docs/knowledge-base/examples/grid/drag-drop-between-grids/main.jsx b/docs/knowledge-base/examples/grid/drag-drop-between-grids/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/drag-drop-between-grids/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/dropdown-filter-for-array-field/main.jsx b/docs/knowledge-base/examples/grid/dropdown-filter-for-array-field/app.jsx
similarity index 95%
rename from knowledge-base/examples/grid/dropdown-filter-for-array-field/main.jsx
rename to docs/knowledge-base/examples/grid/dropdown-filter-for-array-field/app.jsx
index 6cfe5827..58c5a513 100644
--- a/knowledge-base/examples/grid/dropdown-filter-for-array-field/main.jsx
+++ b/docs/knowledge-base/examples/grid/dropdown-filter-for-array-field/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { filterBy, process } from '@progress/kendo-data-query';
 import { DropdownFilterCell } from './dropdownFilterCell';
@@ -86,4 +85,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/grid/dropdown-filter-for-array-field/dropdownFilterCell.jsx b/docs/knowledge-base/examples/grid/dropdown-filter-for-array-field/dropdownFilterCell.jsx
similarity index 100%
rename from knowledge-base/examples/grid/dropdown-filter-for-array-field/dropdownFilterCell.jsx
rename to docs/knowledge-base/examples/grid/dropdown-filter-for-array-field/dropdownFilterCell.jsx
diff --git a/docs/knowledge-base/examples/grid/dropdown-filter-for-array-field/main.jsx b/docs/knowledge-base/examples/grid/dropdown-filter-for-array-field/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/dropdown-filter-for-array-field/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/excel-export-header-footer/main.jsx b/docs/knowledge-base/examples/grid/excel-export-header-footer/app.jsx
similarity index 90%
rename from knowledge-base/examples/grid/excel-export-header-footer/main.jsx
rename to docs/knowledge-base/examples/grid/excel-export-header-footer/app.jsx
index 4a379c4b..4d6ecad2 100644
--- a/knowledge-base/examples/grid/excel-export-header-footer/main.jsx
+++ b/docs/knowledge-base/examples/grid/excel-export-header-footer/app.jsx
@@ -1,9 +1,8 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import { Grid, GridColumn, GridToolbar } from "@progress/kendo-react-grid";
 import { ExcelExport } from "@progress/kendo-react-excel-export";
 
-import products from "./products.json";
+import products from "./shared-products.json";
 
 class App extends React.Component {
     _export;
@@ -51,4 +50,4 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/excel-export-header-footer/main.jsx b/docs/knowledge-base/examples/grid/excel-export-header-footer/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/excel-export-header-footer/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/excel-export-parent-child/main.jsx b/docs/knowledge-base/examples/grid/excel-export-parent-child/app.jsx
similarity index 94%
rename from knowledge-base/examples/grid/excel-export-parent-child/main.jsx
rename to docs/knowledge-base/examples/grid/excel-export-parent-child/app.jsx
index 56f5ff98..d7b61137 100644
--- a/knowledge-base/examples/grid/excel-export-parent-child/main.jsx
+++ b/docs/knowledge-base/examples/grid/excel-export-parent-child/app.jsx
@@ -1,4 +1,4 @@
-import * as ReactDOM from 'react-dom';
+
 import React, { useEffect, useState, useRef } from 'react';
 import {
   Grid,
@@ -139,4 +139,4 @@ const App = () => {
   );
 }
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/excel-export-parent-child/main.jsx b/docs/knowledge-base/examples/grid/excel-export-parent-child/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/excel-export-parent-child/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/excel-export-with-column-reorder/main.jsx b/docs/knowledge-base/examples/grid/excel-export-with-column-reorder/app.jsx
similarity index 97%
rename from knowledge-base/examples/grid/excel-export-with-column-reorder/main.jsx
rename to docs/knowledge-base/examples/grid/excel-export-with-column-reorder/app.jsx
index 1e7e46d1..23fd1e73 100644
--- a/knowledge-base/examples/grid/excel-export-with-column-reorder/main.jsx
+++ b/docs/knowledge-base/examples/grid/excel-export-with-column-reorder/app.jsx
@@ -1,15 +1,11 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Grid,
   GRID_COL_INDEX_ATTRIBUTE,
   GridColumn as Column,
   GridToolbar,
-  GridSelectionChangeEvent,
-  GridKeyDownEvent,
   getSelectedState,
   getSelectedStateFromKeyDown,
-  GridSelectableMode,
 } from '@progress/kendo-react-grid';
 
 import { getter } from '@progress/kendo-react-common';
@@ -20,8 +16,6 @@ import {
 } from '@progress/kendo-react-data-tools';
 import {
   ExcelExport,
-  ExcelExportColumn,
-  ExcelExportColumnGroup,
 } from '@progress/kendo-react-excel-export';
 import products from './products.json';
 const DATA_ITEM_KEY = 'ProductID';
@@ -319,4 +313,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/excel-export-with-column-reorder/main.jsx b/docs/knowledge-base/examples/grid/excel-export-with-column-reorder/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/excel-export-with-column-reorder/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/excel-export-with-column-reorder/products.json b/docs/knowledge-base/examples/grid/excel-export-with-column-reorder/products.json
similarity index 100%
rename from knowledge-base/examples/grid/excel-export-with-column-reorder/products.json
rename to docs/knowledge-base/examples/grid/excel-export-with-column-reorder/products.json
diff --git a/knowledge-base/examples/grid/expand-with-flat-data/main.jsx b/docs/knowledge-base/examples/grid/expand-with-flat-data/app.jsx
similarity index 97%
rename from knowledge-base/examples/grid/expand-with-flat-data/main.jsx
rename to docs/knowledge-base/examples/grid/expand-with-flat-data/app.jsx
index 9eaa47cc..ae1feff2 100644
--- a/knowledge-base/examples/grid/expand-with-flat-data/main.jsx
+++ b/docs/knowledge-base/examples/grid/expand-with-flat-data/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 const testData = [
   {
@@ -134,4 +133,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/expand-with-flat-data/main.jsx b/docs/knowledge-base/examples/grid/expand-with-flat-data/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/expand-with-flat-data/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/fix-editors-popup-position-issue/main.jsx b/docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/app.jsx
similarity index 94%
rename from knowledge-base/examples/grid/fix-editors-popup-position-issue/main.jsx
rename to docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/app.jsx
index b325cad4..d029daef 100644
--- a/knowledge-base/examples/grid/fix-editors-popup-position-issue/main.jsx
+++ b/docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/app.jsx
@@ -1,15 +1,14 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Grid,
   GridColumn as Column,
   GridToolbar,
 } from '@progress/kendo-react-grid';
-import { sampleProducts } from './sample-products';
+import { sampleProducts } from './shared-sample-products';
 import { MyCommandCell } from './myCommandCell';
 import { DropDownCell } from './myDropDownCell';
 import { insertItem, getItems, updateItem, deleteItem } from './services';
-import { Popup, PopupPropsContext } from '@progress/kendo-react-popup';
+import { PopupPropsContext } from '@progress/kendo-react-popup';
 
 const App = () => {
   const editField = 'inEdit';
@@ -144,4 +143,4 @@ const App = () => {
     </PopupPropsContext.Provider>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/main.jsx b/docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/fix-editors-popup-position-issue/myCommandCell.jsx b/docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/myCommandCell.jsx
similarity index 100%
rename from knowledge-base/examples/grid/fix-editors-popup-position-issue/myCommandCell.jsx
rename to docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/myCommandCell.jsx
diff --git a/knowledge-base/examples/grid/fix-editors-popup-position-issue/myDropDownCell.jsx b/docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/myDropDownCell.jsx
similarity index 100%
rename from knowledge-base/examples/grid/fix-editors-popup-position-issue/myDropDownCell.jsx
rename to docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/myDropDownCell.jsx
diff --git a/knowledge-base/examples/grid/fix-editors-popup-position-issue/services.js b/docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/services.js
similarity index 91%
rename from knowledge-base/examples/grid/fix-editors-popup-position-issue/services.js
rename to docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/services.js
index ec280dd9..3a7d39ca 100644
--- a/knowledge-base/examples/grid/fix-editors-popup-position-issue/services.js
+++ b/docs/knowledge-base/examples/grid/fix-editors-popup-position-issue/services.js
@@ -1,4 +1,4 @@
-import { sampleProducts } from "./sample-products";
+import { sampleProducts } from "./shared-sample-products";
 let data = [...sampleProducts];
 const generateId = data => data.reduce((acc, current) => Math.max(acc, current.ProductID), 0) + 1;
 export const insertItem = item => {
diff --git a/knowledge-base/examples/grid/grid-add-clear-filters-button/main.jsx b/docs/knowledge-base/examples/grid/grid-add-clear-filters-button/app.jsx
similarity index 95%
rename from knowledge-base/examples/grid/grid-add-clear-filters-button/main.jsx
rename to docs/knowledge-base/examples/grid/grid-add-clear-filters-button/app.jsx
index 26e32750..516d4822 100644
--- a/knowledge-base/examples/grid/grid-add-clear-filters-button/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-add-clear-filters-button/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { process } from '@progress/kendo-data-query';
 import { Button } from '@progress/kendo-react-buttons';
 import {
@@ -87,4 +87,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-add-clear-filters-button/main.jsx b/docs/knowledge-base/examples/grid/grid-add-clear-filters-button/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-add-clear-filters-button/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-add-dirty-indicator/main.jsx b/docs/knowledge-base/examples/grid/grid-add-dirty-indicator/app.jsx
similarity index 97%
rename from knowledge-base/examples/grid/grid-add-dirty-indicator/main.jsx
rename to docs/knowledge-base/examples/grid/grid-add-dirty-indicator/app.jsx
index 73f59806..bbe55e4d 100644
--- a/knowledge-base/examples/grid/grid-add-dirty-indicator/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-add-dirty-indicator/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import {
   Grid,
   GridColumn as Column,
@@ -137,4 +137,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-add-dirty-indicator/main.jsx b/docs/knowledge-base/examples/grid/grid-add-dirty-indicator/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-add-dirty-indicator/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-add-dirty-indicator/renderers.jsx b/docs/knowledge-base/examples/grid/grid-add-dirty-indicator/renderers.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-add-dirty-indicator/renderers.jsx
rename to docs/knowledge-base/examples/grid/grid-add-dirty-indicator/renderers.jsx
diff --git a/knowledge-base/examples/grid/grid-add-dirty-indicator/sample-products.jsx b/docs/knowledge-base/examples/grid/grid-add-dirty-indicator/sample-products.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-add-dirty-indicator/sample-products.jsx
rename to docs/knowledge-base/examples/grid/grid-add-dirty-indicator/sample-products.jsx
diff --git a/knowledge-base/examples/grid/grid-add-dirty-indicator/styles.css b/docs/knowledge-base/examples/grid/grid-add-dirty-indicator/styles.css
similarity index 100%
rename from knowledge-base/examples/grid/grid-add-dirty-indicator/styles.css
rename to docs/knowledge-base/examples/grid/grid-add-dirty-indicator/styles.css
diff --git a/knowledge-base/examples/grid/grid-add-empty-rows/main.jsx b/docs/knowledge-base/examples/grid/grid-add-empty-rows/app.jsx
similarity index 96%
rename from knowledge-base/examples/grid/grid-add-empty-rows/main.jsx
rename to docs/knowledge-base/examples/grid/grid-add-empty-rows/app.jsx
index 38c515ce..a1c92dfc 100644
--- a/knowledge-base/examples/grid/grid-add-empty-rows/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-add-empty-rows/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 
 /* Generating example data */
@@ -94,4 +94,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-add-empty-rows/main.jsx b/docs/knowledge-base/examples/grid/grid-add-empty-rows/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-add-empty-rows/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-cell-state-editing/main.jsx b/docs/knowledge-base/examples/grid/grid-cell-state-editing/app.jsx
similarity index 97%
rename from knowledge-base/examples/grid/grid-cell-state-editing/main.jsx
rename to docs/knowledge-base/examples/grid/grid-cell-state-editing/app.jsx
index 3fa85664..6789bf08 100644
--- a/knowledge-base/examples/grid/grid-cell-state-editing/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-cell-state-editing/app.jsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import {
   Grid,
   GridColumn as Column,
   getSelectedState,
 } from '@progress/kendo-react-grid';
 import { getter } from '@progress/kendo-react-common';
-import products from './products.json';
+import products from './shared-products.json';
 
 import { NumericTextBox, Input } from '@progress/kendo-react-inputs';
 
@@ -213,4 +213,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-cell-state-editing/main.jsx b/docs/knowledge-base/examples/grid/grid-cell-state-editing/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-cell-state-editing/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-cell-state-editing/products.jsx b/docs/knowledge-base/examples/grid/grid-cell-state-editing/products.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-cell-state-editing/products.jsx
rename to docs/knowledge-base/examples/grid/grid-cell-state-editing/products.jsx
diff --git a/knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/main.jsx b/docs/knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/app.jsx
similarity index 95%
rename from knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/main.jsx
rename to docs/knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/app.jsx
index b4c4c552..380abff8 100644
--- a/knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { LocalizationProvider, loadMessages } from '@progress/kendo-react-intl';
 import {
   Grid,
@@ -86,4 +86,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/main.jsx b/docs/knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/sample-products.jsx b/docs/knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/sample-products.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/sample-products.jsx
rename to docs/knowledge-base/examples/grid/grid-change-boolean-filter-to-yesno/sample-products.jsx
diff --git a/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/main.jsx b/docs/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/app.jsx
similarity index 94%
rename from knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/main.jsx
rename to docs/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/app.jsx
index 293aa896..f25eeae2 100644
--- a/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { process } from '@progress/kendo-data-query';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { ColumnMenuWithoutOperators } from './columnMenu';
@@ -65,4 +65,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/columnMenu.jsx b/docs/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/columnMenu.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/columnMenu.jsx
rename to docs/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/columnMenu.jsx
diff --git a/docs/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/main.jsx b/docs/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/styles.css b/docs/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/styles.css
similarity index 100%
rename from knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/styles.css
rename to docs/knowledge-base/examples/grid/grid-columnmenu-filter-without-operators/styles.css
diff --git a/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/main.jsx b/docs/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/app.jsx
similarity index 94%
rename from knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/main.jsx
rename to docs/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/app.jsx
index bcb35dd0..dd080185 100644
--- a/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { process } from '@progress/kendo-data-query';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { ColumnMenu, ColumnMenuCheckboxFilter } from './columnMenu';
@@ -59,4 +59,4 @@ const App = () => {
     </GridContext.Provider>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/columnMenu.jsx b/docs/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/columnMenu.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/columnMenu.jsx
rename to docs/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/columnMenu.jsx
diff --git a/docs/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/main.jsx b/docs/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/products.json b/docs/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/products.json
similarity index 100%
rename from knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/products.json
rename to docs/knowledge-base/examples/grid/grid-columnmenu-pass-data-with-context/products.json
diff --git a/knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/main.jsx b/docs/knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/app.jsx
similarity index 92%
rename from knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/main.jsx
rename to docs/knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/app.jsx
index 740d0790..6d987ee9 100644
--- a/knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/app.jsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { process } from '@progress/kendo-data-query';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { ColumnMenu, ProductNameolumnMenuCheckboxFilter } from './columnMenu';
-import products from './products.json';
+import products from './shared-products.json';
 
 const createDataState = (dataState) => {
   return {
@@ -58,4 +58,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/columnMenu.jsx b/docs/knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/columnMenu.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/columnMenu.jsx
rename to docs/knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/columnMenu.jsx
diff --git a/docs/knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/main.jsx b/docs/knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-columnmenucheckboxfilter-with-contains/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-conditional-scrollbar/main.jsx b/docs/knowledge-base/examples/grid/grid-conditional-scrollbar/app.jsx
similarity index 93%
rename from knowledge-base/examples/grid/grid-conditional-scrollbar/main.jsx
rename to docs/knowledge-base/examples/grid/grid-conditional-scrollbar/app.jsx
index a1eb06b8..305ebf5c 100644
--- a/knowledge-base/examples/grid/grid-conditional-scrollbar/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-conditional-scrollbar/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 import products from './products.json';
 const initialDataState = {
@@ -46,4 +46,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-conditional-scrollbar/main.jsx b/docs/knowledge-base/examples/grid/grid-conditional-scrollbar/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-conditional-scrollbar/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-conditional-scrollbar/products.json b/docs/knowledge-base/examples/grid/grid-conditional-scrollbar/products.json
similarity index 100%
rename from knowledge-base/examples/grid/grid-conditional-scrollbar/products.json
rename to docs/knowledge-base/examples/grid/grid-conditional-scrollbar/products.json
diff --git a/knowledge-base/examples/grid/grid-csv-export/main.jsx b/docs/knowledge-base/examples/grid/grid-csv-export/app.jsx
similarity index 90%
rename from knowledge-base/examples/grid/grid-csv-export/main.jsx
rename to docs/knowledge-base/examples/grid/grid-csv-export/app.jsx
index 6224bab4..740cef8b 100644
--- a/knowledge-base/examples/grid/grid-csv-export/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-csv-export/app.jsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 import { CSVDownload, CSVLink } from 'react-csv';
-import products from './products.json';
+import products from './shared-products.json';
 const initialDataState = {
   skip: 0,
   take: 10,
@@ -48,4 +48,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-csv-export/main.jsx b/docs/knowledge-base/examples/grid/grid-csv-export/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-csv-export/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-custom-cell-with-selection/main.jsx b/docs/knowledge-base/examples/grid/grid-custom-cell-with-selection/app.jsx
similarity index 96%
rename from knowledge-base/examples/grid/grid-custom-cell-with-selection/main.jsx
rename to docs/knowledge-base/examples/grid/grid-custom-cell-with-selection/app.jsx
index 526981da..f4e8783e 100644
--- a/knowledge-base/examples/grid/grid-custom-cell-with-selection/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-custom-cell-with-selection/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import {
   GRID_COL_INDEX_ATTRIBUTE,
   Grid,
@@ -96,4 +96,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-custom-cell-with-selection/main.jsx b/docs/knowledge-base/examples/grid/grid-custom-cell-with-selection/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-custom-cell-with-selection/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-disable-reordering/main.jsx b/docs/knowledge-base/examples/grid/grid-disable-reordering/app.jsx
similarity index 92%
rename from knowledge-base/examples/grid/grid-disable-reordering/main.jsx
rename to docs/knowledge-base/examples/grid/grid-disable-reordering/app.jsx
index e7185a1a..74033504 100644
--- a/knowledge-base/examples/grid/grid-disable-reordering/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-disable-reordering/app.jsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { Button } from '@progress/kendo-react-buttons';
-import products from './products.json';
+import products from './shared-products.json';
 
 const App = () => {
   const [locked, setLocked] = React.useState(false);
@@ -72,4 +72,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-disable-reordering/main.jsx b/docs/knowledge-base/examples/grid/grid-disable-reordering/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-disable-reordering/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/main.jsx b/docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/app.jsx
similarity index 97%
rename from knowledge-base/examples/grid/grid-edit-one-item-at-a-time/main.jsx
rename to docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/app.jsx
index dd7c1c95..485ca2f1 100644
--- a/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import {
   Grid,
   GridColumn as Column,
@@ -146,4 +146,4 @@ const App = () => {
     </Grid>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/main.jsx b/docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/myCommandCell.jsx b/docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/myCommandCell.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-edit-one-item-at-a-time/myCommandCell.jsx
rename to docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/myCommandCell.jsx
diff --git a/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/sample-products.jsx b/docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/sample-products.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-edit-one-item-at-a-time/sample-products.jsx
rename to docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/sample-products.jsx
diff --git a/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/services.js b/docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/services.js
similarity index 100%
rename from knowledge-base/examples/grid/grid-edit-one-item-at-a-time/services.js
rename to docs/knowledge-base/examples/grid/grid-edit-one-item-at-a-time/services.js
diff --git a/knowledge-base/examples/grid/grid-ellipsis-data-cell/main.jsx b/docs/knowledge-base/examples/grid/grid-ellipsis-data-cell/app.jsx
similarity index 95%
rename from knowledge-base/examples/grid/grid-ellipsis-data-cell/main.jsx
rename to docs/knowledge-base/examples/grid/grid-ellipsis-data-cell/app.jsx
index 8b18e4cb..c1133bee 100644
--- a/knowledge-base/examples/grid/grid-ellipsis-data-cell/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-ellipsis-data-cell/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import './styles.css';
 
@@ -66,4 +66,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-ellipsis-data-cell/main.jsx b/docs/knowledge-base/examples/grid/grid-ellipsis-data-cell/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-ellipsis-data-cell/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-ellipsis-data-cell/styles.css b/docs/knowledge-base/examples/grid/grid-ellipsis-data-cell/styles.css
similarity index 100%
rename from knowledge-base/examples/grid/grid-ellipsis-data-cell/styles.css
rename to docs/knowledge-base/examples/grid/grid-ellipsis-data-cell/styles.css
diff --git a/knowledge-base/examples/grid/grid-external-dropdownlist-filter/main.jsx b/docs/knowledge-base/examples/grid/grid-external-dropdownlist-filter/app.jsx
similarity index 97%
rename from knowledge-base/examples/grid/grid-external-dropdownlist-filter/main.jsx
rename to docs/knowledge-base/examples/grid/grid-external-dropdownlist-filter/app.jsx
index 59d0b7ba..0907e023 100644
--- a/knowledge-base/examples/grid/grid-external-dropdownlist-filter/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-external-dropdownlist-filter/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { DropDownList } from '@progress/kendo-react-dropdowns';
 import { Button } from '@progress/kendo-react-buttons';
@@ -111,4 +111,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-external-dropdownlist-filter/main.jsx b/docs/knowledge-base/examples/grid/grid-external-dropdownlist-filter/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-external-dropdownlist-filter/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-external-dropdownlist-filter/products.json b/docs/knowledge-base/examples/grid/grid-external-dropdownlist-filter/products.json
similarity index 100%
rename from knowledge-base/examples/grid/grid-external-dropdownlist-filter/products.json
rename to docs/knowledge-base/examples/grid/grid-external-dropdownlist-filter/products.json
diff --git a/knowledge-base/examples/grid/grid-filter-checkbox/main.jsx b/docs/knowledge-base/examples/grid/grid-filter-checkbox/app.jsx
similarity index 89%
rename from knowledge-base/examples/grid/grid-filter-checkbox/main.jsx
rename to docs/knowledge-base/examples/grid/grid-filter-checkbox/app.jsx
index 21863f64..3fc1853b 100644
--- a/knowledge-base/examples/grid/grid-filter-checkbox/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-filter-checkbox/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { process } from '@progress/kendo-data-query';
 import {
   Grid, GridColumn as Column
@@ -7,7 +7,7 @@ import {
 
 import { CustomColumnMenu } from './customColumnMenu';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 const createDataState = (dataState) => {
   return {
@@ -88,4 +88,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
\ No newline at end of file
+export default App;
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-filter-checkbox/customColumnMenu.jsx b/docs/knowledge-base/examples/grid/grid-filter-checkbox/customColumnMenu.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-filter-checkbox/customColumnMenu.jsx
rename to docs/knowledge-base/examples/grid/grid-filter-checkbox/customColumnMenu.jsx
diff --git a/docs/knowledge-base/examples/grid/grid-filter-checkbox/main.jsx b/docs/knowledge-base/examples/grid/grid-filter-checkbox/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-filter-checkbox/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-filtering-api/main.tsx b/docs/knowledge-base/examples/grid/grid-filtering-api/app.tsx
similarity index 92%
rename from knowledge-base/examples/grid/grid-filtering-api/main.tsx
rename to docs/knowledge-base/examples/grid/grid-filtering-api/app.tsx
index 85061c0f..85a8b8b8 100644
--- a/knowledge-base/examples/grid/grid-filtering-api/main.tsx
+++ b/docs/knowledge-base/examples/grid/grid-filtering-api/app.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import * as ReactDOM from 'react-dom';
+
 import {
   Grid,
   GridColumn as Column,
@@ -51,4 +51,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-filtering-api/main.tsx b/docs/knowledge-base/examples/grid/grid-filtering-api/main.tsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-filtering-api/main.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/main.jsx b/docs/knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/app.jsx
similarity index 95%
rename from knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/main.jsx
rename to docs/knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/app.jsx
index fb818e79..88cf4e75 100644
--- a/knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 
 const DetailComponent = (props) => {
@@ -94,4 +94,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/main.jsx b/docs/knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-hide-expand-icon-conditionally/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-hide-grouped-columns/main.jsx b/docs/knowledge-base/examples/grid/grid-hide-grouped-columns/app.jsx
similarity index 96%
rename from knowledge-base/examples/grid/grid-hide-grouped-columns/main.jsx
rename to docs/knowledge-base/examples/grid/grid-hide-grouped-columns/app.jsx
index 4f8239ca..312f6b8a 100644
--- a/knowledge-base/examples/grid/grid-hide-grouped-columns/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-hide-grouped-columns/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 
 import { process } from '@progress/kendo-data-query';
 import {
@@ -14,7 +14,6 @@ import {
 } from '@progress/kendo-react-data-tools';
 
 import products from './products.json';
-import { Product } from './interfaces';
 
 const initialDataState = {
   take: 10,
@@ -145,4 +144,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-hide-grouped-columns/main.jsx b/docs/knowledge-base/examples/grid/grid-hide-grouped-columns/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-hide-grouped-columns/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-hide-grouped-columns/products.json b/docs/knowledge-base/examples/grid/grid-hide-grouped-columns/products.json
similarity index 100%
rename from knowledge-base/examples/grid/grid-hide-grouped-columns/products.json
rename to docs/knowledge-base/examples/grid/grid-hide-grouped-columns/products.json
diff --git a/knowledge-base/examples/grid/grid-pdf-export-with-watermark/main.jsx b/docs/knowledge-base/examples/grid/grid-pdf-export-with-watermark/app.jsx
similarity index 93%
rename from knowledge-base/examples/grid/grid-pdf-export-with-watermark/main.jsx
rename to docs/knowledge-base/examples/grid/grid-pdf-export-with-watermark/app.jsx
index dddb8843..0cd1c44f 100644
--- a/knowledge-base/examples/grid/grid-pdf-export-with-watermark/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-pdf-export-with-watermark/app.jsx
@@ -1,11 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { saveAs } from '@progress/kendo-file-saver';
 import {
   drawDOM,
   exportPDF,
-  DrawOptions,
-  Group
 } from '@progress/kendo-drawing';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 
@@ -67,4 +64,4 @@ class App extends React.Component {
   };
 }
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-pdf-export-with-watermark/main.jsx b/docs/knowledge-base/examples/grid/grid-pdf-export-with-watermark/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-pdf-export-with-watermark/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-pdf-export-with-watermark/products.json b/docs/knowledge-base/examples/grid/grid-pdf-export-with-watermark/products.json
similarity index 100%
rename from knowledge-base/examples/grid/grid-pdf-export-with-watermark/products.json
rename to docs/knowledge-base/examples/grid/grid-pdf-export-with-watermark/products.json
diff --git a/knowledge-base/examples/grid/grid-progressbar-cell/main.jsx b/docs/knowledge-base/examples/grid/grid-progressbar-cell/app.jsx
similarity index 93%
rename from knowledge-base/examples/grid/grid-progressbar-cell/main.jsx
rename to docs/knowledge-base/examples/grid/grid-progressbar-cell/app.jsx
index 9ff8a386..a754326a 100644
--- a/knowledge-base/examples/grid/grid-progressbar-cell/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-progressbar-cell/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 import products from './products.json';
 import { ProgressBar } from '@progress/kendo-react-progressbars';
@@ -48,4 +48,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-progressbar-cell/main.jsx b/docs/knowledge-base/examples/grid/grid-progressbar-cell/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-progressbar-cell/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-progressbar-cell/products.json b/docs/knowledge-base/examples/grid/grid-progressbar-cell/products.json
similarity index 100%
rename from knowledge-base/examples/grid/grid-progressbar-cell/products.json
rename to docs/knowledge-base/examples/grid/grid-progressbar-cell/products.json
diff --git a/knowledge-base/examples/grid/grid-row-colors/alternate-colors/main.jsx b/docs/knowledge-base/examples/grid/grid-row-colors/alternate-colors/app.jsx
similarity index 87%
rename from knowledge-base/examples/grid/grid-row-colors/alternate-colors/main.jsx
rename to docs/knowledge-base/examples/grid/grid-row-colors/alternate-colors/app.jsx
index 29b6f9f5..32df2a58 100644
--- a/knowledge-base/examples/grid/grid-row-colors/alternate-colors/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-row-colors/alternate-colors/app.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
-import products from './products.json';
+import products from './shared-products.json';
 const App = () => {
   return (
     <div>
@@ -38,4 +38,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-row-colors/alternate-colors/main.jsx b/docs/knowledge-base/examples/grid/grid-row-colors/alternate-colors/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-row-colors/alternate-colors/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-row-colors/single-row-color/main.jsx b/docs/knowledge-base/examples/grid/grid-row-colors/single-row-color/app.jsx
similarity index 83%
rename from knowledge-base/examples/grid/grid-row-colors/single-row-color/main.jsx
rename to docs/knowledge-base/examples/grid/grid-row-colors/single-row-color/app.jsx
index ad8bf5b7..4a0c08ac 100644
--- a/knowledge-base/examples/grid/grid-row-colors/single-row-color/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-row-colors/single-row-color/app.jsx
@@ -1,7 +1,6 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import { Grid, GridColumn } from "@progress/kendo-react-grid";
-import products from "./products.json";
+import products from "./shared-products.json";
 const App = () => {
   return (
     <div>
@@ -27,4 +26,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-row-colors/single-row-color/main.jsx b/docs/knowledge-base/examples/grid/grid-row-colors/single-row-color/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-row-colors/single-row-color/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-save-datastate-to-localstorage/main.jsx b/docs/knowledge-base/examples/grid/grid-save-datastate-to-localstorage/app.jsx
similarity index 92%
rename from knowledge-base/examples/grid/grid-save-datastate-to-localstorage/main.jsx
rename to docs/knowledge-base/examples/grid/grid-save-datastate-to-localstorage/app.jsx
index 13c7b542..718b8ab5 100644
--- a/knowledge-base/examples/grid/grid-save-datastate-to-localstorage/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-save-datastate-to-localstorage/app.jsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { process } from '@progress/kendo-data-query';
-import products from './products.json';
+import products from './shared-products.json';
 
 let initialDataState = {
   sort: [
@@ -70,4 +70,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-save-datastate-to-localstorage/main.jsx b/docs/knowledge-base/examples/grid/grid-save-datastate-to-localstorage/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-save-datastate-to-localstorage/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-search-bar/main.tsx b/docs/knowledge-base/examples/grid/grid-search-bar/app.tsx
similarity index 98%
rename from knowledge-base/examples/grid/grid-search-bar/main.tsx
rename to docs/knowledge-base/examples/grid/grid-search-bar/app.tsx
index 37c93e60..63282892 100644
--- a/knowledge-base/examples/grid/grid-search-bar/main.tsx
+++ b/docs/knowledge-base/examples/grid/grid-search-bar/app.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import {
   Grid,
   GridColumn as Column,
@@ -194,4 +194,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-search-bar/main.tsx b/docs/knowledge-base/examples/grid/grid-search-bar/main.tsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-search-bar/main.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-search-bar/sample-products.tsx b/docs/knowledge-base/examples/grid/grid-search-bar/sample-products.tsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-search-bar/sample-products.tsx
rename to docs/knowledge-base/examples/grid/grid-search-bar/sample-products.tsx
diff --git a/knowledge-base/examples/grid/grid-selection-mobile-scrolling/main.jsx b/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/app.jsx
similarity index 94%
rename from knowledge-base/examples/grid/grid-selection-mobile-scrolling/main.jsx
rename to docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/app.jsx
index a0aced58..f58a75eb 100644
--- a/knowledge-base/examples/grid/grid-selection-mobile-scrolling/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import {
   Grid,
   GridColumn as Column,
@@ -7,7 +7,7 @@ import {
 } from '@progress/kendo-react-grid';
 import { getter } from '@progress/kendo-react-common';
 import { useDeviceType } from './isMobile.jsx';
-import products from './products.json';
+import products from './shared-products.json';
 const DATA_ITEM_KEY = 'ProductID';
 const SELECTED_FIELD = 'selected';
 const idGetter = getter(DATA_ITEM_KEY);
@@ -86,4 +86,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/grid/grid-selection-mobile-scrolling/isMobile.jsx b/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/isMobile.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-selection-mobile-scrolling/isMobile.jsx
rename to docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/isMobile.jsx
diff --git a/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/main.jsx b/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-selection-mobile-scrolling/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-show-details-in-popover/main.jsx b/docs/knowledge-base/examples/grid/grid-show-details-in-popover/app.jsx
similarity index 95%
rename from knowledge-base/examples/grid/grid-show-details-in-popover/main.jsx
rename to docs/knowledge-base/examples/grid/grid-show-details-in-popover/app.jsx
index 7c555bbf..f59ae0a5 100644
--- a/knowledge-base/examples/grid/grid-show-details-in-popover/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-show-details-in-popover/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { Popover } from '@progress/kendo-react-tooltip';
 
@@ -77,4 +77,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-show-details-in-popover/main.jsx b/docs/knowledge-base/examples/grid/grid-show-details-in-popover/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-show-details-in-popover/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-show-details-in-popover/myCommandCell.jsx b/docs/knowledge-base/examples/grid/grid-show-details-in-popover/myCommandCell.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-show-details-in-popover/myCommandCell.jsx
rename to docs/knowledge-base/examples/grid/grid-show-details-in-popover/myCommandCell.jsx
diff --git a/knowledge-base/examples/grid/grid-show-different-field-in-group/main.jsx b/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/app.jsx
similarity index 97%
rename from knowledge-base/examples/grid/grid-show-different-field-in-group/main.jsx
rename to docs/knowledge-base/examples/grid/grid-show-different-field-in-group/app.jsx
index 9f724f38..c6443282 100644
--- a/knowledge-base/examples/grid/grid-show-different-field-in-group/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { process } from '@progress/kendo-data-query';
 import {
   Grid,
@@ -130,4 +130,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/main.jsx b/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-show-different-field-in-group/products.json b/docs/knowledge-base/examples/grid/grid-show-different-field-in-group/products.json
similarity index 100%
rename from knowledge-base/examples/grid/grid-show-different-field-in-group/products.json
rename to docs/knowledge-base/examples/grid/grid-show-different-field-in-group/products.json
diff --git a/knowledge-base/examples/grid/grid-show-placeholder-for-filters/main.jsx b/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/app.jsx
similarity index 93%
rename from knowledge-base/examples/grid/grid-show-placeholder-for-filters/main.jsx
rename to docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/app.jsx
index 63425dba..c6c40758 100644
--- a/knowledge-base/examples/grid/grid-show-placeholder-for-filters/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { GridWithFiltering } from './grid-with-filtering';
 import {
   NumericTextBoxPropsContext,
@@ -47,4 +47,4 @@ const App = () => {
     </DatePickerPropsContext.Provider>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/grid/grid-show-placeholder-for-filters/grid-with-filtering.jsx b/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/grid-with-filtering.jsx
similarity index 100%
rename from knowledge-base/examples/grid/grid-show-placeholder-for-filters/grid-with-filtering.jsx
rename to docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/grid-with-filtering.jsx
diff --git a/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/main.jsx b/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-show-placeholder-for-filters/sample-products.js b/docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/sample-products.js
similarity index 100%
rename from knowledge-base/examples/grid/grid-show-placeholder-for-filters/sample-products.js
rename to docs/knowledge-base/examples/grid/grid-show-placeholder-for-filters/sample-products.js
diff --git a/knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/main.jsx b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/app.jsx
similarity index 85%
rename from knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/main.jsx
rename to docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/app.jsx
index 94cc6a85..10d31c51 100644
--- a/knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/app.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
-import products from './products.json';
+import products from './shared-products.json';
 const App = () => {
   return (
     <div>
@@ -29,4 +29,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/main.jsx b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/CSS/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/main.jsx b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/app.jsx
similarity index 84%
rename from knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/main.jsx
rename to docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/app.jsx
index 9311ab3a..8b21243e 100644
--- a/knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/app.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
-import products from './products.json';
+import products from './shared-products.json';
 const App = () => {
   const CellRender = (props) => {
     return (
@@ -30,4 +30,4 @@ const App = () => {
     </Grid>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/main.jsx b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cell/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/main.jsx b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/app.jsx
similarity index 84%
rename from knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/main.jsx
rename to docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/app.jsx
index 89880068..51043034 100644
--- a/knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/main.jsx
+++ b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/app.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
-import products from './products.json';
+import products from './shared-products.json';
 const App = () => {
   const CellRender = (props) => {
     return (
@@ -31,4 +31,4 @@ const App = () => {
     </Grid>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/main.jsx b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/cellRender/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grid-whitespace-textoverflow/shared/products.json b/docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/shared/products.json
similarity index 100%
rename from knowledge-base/examples/grid/grid-whitespace-textoverflow/shared/products.json
rename to docs/knowledge-base/examples/grid/grid-whitespace-textoverflow/shared/products.json
diff --git a/knowledge-base/examples/grid/group-header-render/main.jsx b/docs/knowledge-base/examples/grid/group-header-render/app.jsx
similarity index 89%
rename from knowledge-base/examples/grid/group-header-render/main.jsx
rename to docs/knowledge-base/examples/grid/group-header-render/app.jsx
index 0500bb29..0349a7e5 100644
--- a/knowledge-base/examples/grid/group-header-render/main.jsx
+++ b/docs/knowledge-base/examples/grid/group-header-render/app.jsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { process } from '@progress/kendo-data-query';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 class App extends React.PureComponent {
   state = this.createAppState({
@@ -66,7 +66,4 @@ class App extends React.PureComponent {
   }
 }
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('my-app')
-);
+export default App;
diff --git a/knowledge-base/examples/grid/group-header-render/cells-header/main.jsx b/docs/knowledge-base/examples/grid/group-header-render/cells-header/app.jsx
similarity index 95%
rename from knowledge-base/examples/grid/group-header-render/cells-header/main.jsx
rename to docs/knowledge-base/examples/grid/group-header-render/cells-header/app.jsx
index d4d28ca7..57d53848 100644
--- a/knowledge-base/examples/grid/group-header-render/cells-header/main.jsx
+++ b/docs/knowledge-base/examples/grid/group-header-render/cells-header/app.jsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { groupBy } from '@progress/kendo-data-query';
 import {
   setExpandedState,
   setGroupIds,
 } from '@progress/kendo-react-data-tools';
-import products from './products.json';
+import products from './shared-products.json';
 const initialGroup = [
   {
     field: 'UnitsInStock',
@@ -103,4 +103,4 @@ const App = () => {
     </Grid>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/group-header-render/cells-header/main.jsx b/docs/knowledge-base/examples/grid/group-header-render/cells-header/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/group-header-render/cells-header/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/grid/group-header-render/main.jsx b/docs/knowledge-base/examples/grid/group-header-render/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/group-header-render/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/grouping-with-custom-cell/main.jsx b/docs/knowledge-base/examples/grid/grouping-with-custom-cell/app.jsx
similarity index 90%
rename from knowledge-base/examples/grid/grouping-with-custom-cell/main.jsx
rename to docs/knowledge-base/examples/grid/grouping-with-custom-cell/app.jsx
index 489fc52a..6a875ad9 100644
--- a/knowledge-base/examples/grid/grouping-with-custom-cell/main.jsx
+++ b/docs/knowledge-base/examples/grid/grouping-with-custom-cell/app.jsx
@@ -1,10 +1,9 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 
 import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";
 import { process } from "@progress/kendo-data-query";
 
-import products from "./products.json";
+import products from "./shared-products.json";
 
 const ProductNameCell = ({ dataItem, field, rowType }) => {
   if (rowType === "groupHeader") {
@@ -83,4 +82,4 @@ class App extends React.PureComponent {
   };
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/grouping-with-custom-cell/main.jsx b/docs/knowledge-base/examples/grid/grouping-with-custom-cell/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/grouping-with-custom-cell/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/ignore-diacritics/main.jsx b/docs/knowledge-base/examples/grid/ignore-diacritics/app.jsx
similarity index 88%
rename from knowledge-base/examples/grid/ignore-diacritics/main.jsx
rename to docs/knowledge-base/examples/grid/ignore-diacritics/app.jsx
index d6a6b0e6..1f5e5f3d 100644
--- a/knowledge-base/examples/grid/ignore-diacritics/main.jsx
+++ b/docs/knowledge-base/examples/grid/ignore-diacritics/app.jsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { filterBy } from '@progress/kendo-data-query';
 
 import { InputFilterCell } from './inputFilterCell';
-import { sampleProducts } from './sample-products';
+import { sampleProducts } from './shared-sample-products';
 const categories = Array.from(
   new Set(
     sampleProducts.map((p) => (p.Category ? p.Category.CategoryName : ''))
@@ -39,4 +39,4 @@ const App = () => {
     </Grid>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/grid/ignore-diacritics/inputFilterCell.jsx b/docs/knowledge-base/examples/grid/ignore-diacritics/inputFilterCell.jsx
similarity index 100%
rename from knowledge-base/examples/grid/ignore-diacritics/inputFilterCell.jsx
rename to docs/knowledge-base/examples/grid/ignore-diacritics/inputFilterCell.jsx
diff --git a/docs/knowledge-base/examples/grid/ignore-diacritics/main.jsx b/docs/knowledge-base/examples/grid/ignore-diacritics/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/ignore-diacritics/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/limit-numeric-filter-value/main.jsx b/docs/knowledge-base/examples/grid/limit-numeric-filter-value/app.jsx
similarity index 96%
rename from knowledge-base/examples/grid/limit-numeric-filter-value/main.jsx
rename to docs/knowledge-base/examples/grid/limit-numeric-filter-value/app.jsx
index aee44f3c..7c8301ee 100644
--- a/knowledge-base/examples/grid/limit-numeric-filter-value/main.jsx
+++ b/docs/knowledge-base/examples/grid/limit-numeric-filter-value/app.jsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { filterBy } from '@progress/kendo-data-query';
 import { NumericTextBox } from '@progress/kendo-react-inputs';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 export const RangeFilterCell = (props) => {
   let minTextBox;
@@ -171,4 +171,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/limit-numeric-filter-value/main.jsx b/docs/knowledge-base/examples/grid/limit-numeric-filter-value/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/limit-numeric-filter-value/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/lock-row-headers/main.jsx b/docs/knowledge-base/examples/grid/lock-row-headers/app.jsx
similarity index 87%
rename from knowledge-base/examples/grid/lock-row-headers/main.jsx
rename to docs/knowledge-base/examples/grid/lock-row-headers/app.jsx
index 269dfee8..5415844f 100644
--- a/knowledge-base/examples/grid/lock-row-headers/main.jsx
+++ b/docs/knowledge-base/examples/grid/lock-row-headers/app.jsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { Button } from '@progress/kendo-react-buttons';
-import products from './products-with-sections.json';
+import products from './shared-products-with-sections.json';
 import { filterBy } from '@progress/kendo-data-query';
 
 const rowHeight = 50;
@@ -63,4 +63,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/lock-row-headers/main.jsx b/docs/knowledge-base/examples/grid/lock-row-headers/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/lock-row-headers/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/merge-rows-and-cells/main.jsx b/docs/knowledge-base/examples/grid/merge-rows-and-cells/app.jsx
similarity index 97%
rename from knowledge-base/examples/grid/merge-rows-and-cells/main.jsx
rename to docs/knowledge-base/examples/grid/merge-rows-and-cells/app.jsx
index fc33b246..4d1a39e1 100644
--- a/knowledge-base/examples/grid/merge-rows-and-cells/main.jsx
+++ b/docs/knowledge-base/examples/grid/merge-rows-and-cells/app.jsx
@@ -68,4 +68,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/merge-rows-and-cells/main.jsx b/docs/knowledge-base/examples/grid/merge-rows-and-cells/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/merge-rows-and-cells/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/merge-rows-and-cells/products.json b/docs/knowledge-base/examples/grid/merge-rows-and-cells/products.json
similarity index 100%
rename from knowledge-base/examples/grid/merge-rows-and-cells/products.json
rename to docs/knowledge-base/examples/grid/merge-rows-and-cells/products.json
diff --git a/knowledge-base/examples/grid/merge-rows/main.jsx b/docs/knowledge-base/examples/grid/merge-rows/app.jsx
similarity index 93%
rename from knowledge-base/examples/grid/merge-rows/main.jsx
rename to docs/knowledge-base/examples/grid/merge-rows/app.jsx
index 045d4574..e2edb82b 100644
--- a/knowledge-base/examples/grid/merge-rows/main.jsx
+++ b/docs/knowledge-base/examples/grid/merge-rows/app.jsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 const updateItem = (item) => {
   let index = products.findIndex(
@@ -156,4 +156,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/merge-rows/main.jsx b/docs/knowledge-base/examples/grid/merge-rows/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/merge-rows/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/multiple-functionalities/main.jsx b/docs/knowledge-base/examples/grid/multiple-functionalities/app.jsx
similarity index 95%
rename from knowledge-base/examples/grid/multiple-functionalities/main.jsx
rename to docs/knowledge-base/examples/grid/multiple-functionalities/app.jsx
index c568a608..b7a7b399 100644
--- a/knowledge-base/examples/grid/multiple-functionalities/main.jsx
+++ b/docs/knowledge-base/examples/grid/multiple-functionalities/app.jsx
@@ -1,11 +1,9 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
-
 import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";
 import { process } from "@progress/kendo-data-query";
 import EditForm from "./editForm.jsx";
 
-import products from "./products.json";
+import products from "./shared-products.json";
 
 const EditCommandCell = props => {
   return (
@@ -119,4 +117,4 @@ class App extends React.Component {
   };
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/knowledge-base/examples/grid/multiple-functionalities/editForm.jsx b/docs/knowledge-base/examples/grid/multiple-functionalities/editForm.jsx
similarity index 98%
rename from knowledge-base/examples/grid/multiple-functionalities/editForm.jsx
rename to docs/knowledge-base/examples/grid/multiple-functionalities/editForm.jsx
index 59d25b3f..68fb7e7f 100644
--- a/knowledge-base/examples/grid/multiple-functionalities/editForm.jsx
+++ b/docs/knowledge-base/examples/grid/multiple-functionalities/editForm.jsx
@@ -4,7 +4,7 @@ import { Form, Field, FormElement } from "@progress/kendo-react-form";
 import { Input, NumericTextBox } from "@progress/kendo-react-inputs";
 import { DropDownList } from "@progress/kendo-react-dropdowns";
 import { Error } from "@progress/kendo-react-labels";
-import products from "./products.json";
+import products from "./shared-products.json";
 
 const minValueValidator = value =>
   value >= 0 ? "" : "The value must be 0 or higher";
diff --git a/docs/knowledge-base/examples/grid/multiple-functionalities/main.jsx b/docs/knowledge-base/examples/grid/multiple-functionalities/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/multiple-functionalities/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/multiple-grid-export-excel/main.jsx b/docs/knowledge-base/examples/grid/multiple-grid-export-excel/app.jsx
similarity index 90%
rename from knowledge-base/examples/grid/multiple-grid-export-excel/main.jsx
rename to docs/knowledge-base/examples/grid/multiple-grid-export-excel/app.jsx
index 0ed4a5ee..d72bad43 100644
--- a/knowledge-base/examples/grid/multiple-grid-export-excel/main.jsx
+++ b/docs/knowledge-base/examples/grid/multiple-grid-export-excel/app.jsx
@@ -1,10 +1,10 @@
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
 import { ExcelExport } from '@progress/kendo-react-excel-export';
 
-import products from './products.json';
+import products from './shared-products.json';
 
 class App extends React.Component {
   _export;
@@ -62,8 +62,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('my-app')
-);
+export default App;
 
diff --git a/docs/knowledge-base/examples/grid/multiple-grid-export-excel/main.jsx b/docs/knowledge-base/examples/grid/multiple-grid-export-excel/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/multiple-grid-export-excel/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/multiselect-filter-cell/main.jsx b/docs/knowledge-base/examples/grid/multiselect-filter-cell/app.jsx
similarity index 93%
rename from knowledge-base/examples/grid/multiselect-filter-cell/main.jsx
rename to docs/knowledge-base/examples/grid/multiselect-filter-cell/app.jsx
index 45c96ad6..48a79113 100644
--- a/knowledge-base/examples/grid/multiselect-filter-cell/main.jsx
+++ b/docs/knowledge-base/examples/grid/multiselect-filter-cell/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { process } from '@progress/kendo-data-query';
 import products from './products.json';
@@ -57,4 +57,4 @@ const App = () => {
     </Grid>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/multiselect-filter-cell/main.jsx b/docs/knowledge-base/examples/grid/multiselect-filter-cell/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/multiselect-filter-cell/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/multiselect-filter-cell/multiSelectFilterCell.jsx b/docs/knowledge-base/examples/grid/multiselect-filter-cell/multiSelectFilterCell.jsx
similarity index 100%
rename from knowledge-base/examples/grid/multiselect-filter-cell/multiSelectFilterCell.jsx
rename to docs/knowledge-base/examples/grid/multiselect-filter-cell/multiSelectFilterCell.jsx
diff --git a/knowledge-base/examples/grid/multiselect-filter-cell/products.json b/docs/knowledge-base/examples/grid/multiselect-filter-cell/products.json
similarity index 100%
rename from knowledge-base/examples/grid/multiselect-filter-cell/products.json
rename to docs/knowledge-base/examples/grid/multiselect-filter-cell/products.json
diff --git a/knowledge-base/examples/grid/odata-server-operations/main.jsx b/docs/knowledge-base/examples/grid/odata-server-operations/app.jsx
similarity index 87%
rename from knowledge-base/examples/grid/odata-server-operations/main.jsx
rename to docs/knowledge-base/examples/grid/odata-server-operations/app.jsx
index b062909e..9fde1dfd 100644
--- a/knowledge-base/examples/grid/odata-server-operations/main.jsx
+++ b/docs/knowledge-base/examples/grid/odata-server-operations/app.jsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
-import { ProductsLoader } from './products-loader.jsx';
+import { ProductsLoader } from './shared-products-loader.jsx';
 
 class App extends React.Component {
     constructor(props) {
@@ -53,4 +53,4 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/odata-server-operations/main.jsx b/docs/knowledge-base/examples/grid/odata-server-operations/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/odata-server-operations/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/paste-from-excel/main.jsx b/docs/knowledge-base/examples/grid/paste-from-excel/app.jsx
similarity index 94%
rename from knowledge-base/examples/grid/paste-from-excel/main.jsx
rename to docs/knowledge-base/examples/grid/paste-from-excel/app.jsx
index 9448f685..e4b96b02 100644
--- a/knowledge-base/examples/grid/paste-from-excel/main.jsx
+++ b/docs/knowledge-base/examples/grid/paste-from-excel/app.jsx
@@ -66,4 +66,4 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/paste-from-excel/main.jsx b/docs/knowledge-base/examples/grid/paste-from-excel/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/paste-from-excel/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/remove-select-all/main.jsx b/docs/knowledge-base/examples/grid/remove-select-all/app.jsx
similarity index 94%
rename from knowledge-base/examples/grid/remove-select-all/main.jsx
rename to docs/knowledge-base/examples/grid/remove-select-all/app.jsx
index 9fe7f2d4..271701f4 100644
--- a/knowledge-base/examples/grid/remove-select-all/main.jsx
+++ b/docs/knowledge-base/examples/grid/remove-select-all/app.jsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import {
   Grid,
   GridColumn as Column,
   getSelectedState,
-  GridHeaderCell,
 } from '@progress/kendo-react-grid';
 import { getter } from '@progress/kendo-react-common';
 import products from './products.json';
@@ -77,4 +76,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/remove-select-all/main.jsx b/docs/knowledge-base/examples/grid/remove-select-all/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/remove-select-all/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/remove-select-all/products.json b/docs/knowledge-base/examples/grid/remove-select-all/products.json
similarity index 100%
rename from knowledge-base/examples/grid/remove-select-all/products.json
rename to docs/knowledge-base/examples/grid/remove-select-all/products.json
diff --git a/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/main.jsx b/docs/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/app.jsx
similarity index 97%
rename from knowledge-base/examples/grid/save-scroll-position-in-tabstrip/main.jsx
rename to docs/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/app.jsx
index dab2da1d..02d19dd0 100644
--- a/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/main.jsx
+++ b/docs/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import products from './products.json';
@@ -97,4 +97,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/main.jsx b/docs/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/products.json b/docs/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/products.json
similarity index 100%
rename from knowledge-base/examples/grid/save-scroll-position-in-tabstrip/products.json
rename to docs/knowledge-base/examples/grid/save-scroll-position-in-tabstrip/products.json
diff --git a/knowledge-base/examples/grid/show-hide-columns/main.jsx b/docs/knowledge-base/examples/grid/show-hide-columns/app.jsx
similarity index 93%
rename from knowledge-base/examples/grid/show-hide-columns/main.jsx
rename to docs/knowledge-base/examples/grid/show-hide-columns/app.jsx
index df2bc15c..d02927c1 100644
--- a/knowledge-base/examples/grid/show-hide-columns/main.jsx
+++ b/docs/knowledge-base/examples/grid/show-hide-columns/app.jsx
@@ -1,9 +1,8 @@
 
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";
 
-import products from "./products.json";
+import products from "./shared-products.json";
 
 class App extends React.Component {
   state = {
@@ -76,4 +75,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/show-hide-columns/main.jsx b/docs/knowledge-base/examples/grid/show-hide-columns/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/show-hide-columns/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/show-loading-indicator/main.jsx b/docs/knowledge-base/examples/grid/show-loading-indicator/app.jsx
similarity index 86%
rename from knowledge-base/examples/grid/show-loading-indicator/main.jsx
rename to docs/knowledge-base/examples/grid/show-loading-indicator/app.jsx
index 80baaafb..52894e02 100644
--- a/knowledge-base/examples/grid/show-loading-indicator/main.jsx
+++ b/docs/knowledge-base/examples/grid/show-loading-indicator/app.jsx
@@ -1,6 +1,6 @@
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 
 const loadingPanel = (
@@ -45,8 +45,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('my-app')
-);
+export default App;
 
diff --git a/docs/knowledge-base/examples/grid/show-loading-indicator/main.jsx b/docs/knowledge-base/examples/grid/show-loading-indicator/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/show-loading-indicator/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/stateful/main.jsx b/docs/knowledge-base/examples/grid/stateful/app.jsx
similarity index 83%
rename from knowledge-base/examples/grid/stateful/main.jsx
rename to docs/knowledge-base/examples/grid/stateful/app.jsx
index 6f1fc952..161f9d9c 100644
--- a/knowledge-base/examples/grid/stateful/main.jsx
+++ b/docs/knowledge-base/examples/grid/stateful/app.jsx
@@ -1,8 +1,7 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import { withState } from "./with-state";
 import { GridColumn, Grid } from "@progress/kendo-react-grid";
-import products from "./products.json";
+import products from "./shared-products.json";
 
 const StatefulGrid = withState(Grid);
 
@@ -33,4 +32,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/stateful/main.jsx b/docs/knowledge-base/examples/grid/stateful/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/stateful/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/stateful/with-state.jsx b/docs/knowledge-base/examples/grid/stateful/with-state.jsx
similarity index 100%
rename from knowledge-base/examples/grid/stateful/with-state.jsx
rename to docs/knowledge-base/examples/grid/stateful/with-state.jsx
diff --git a/knowledge-base/examples/grid/store-columns-width-and-order/main.jsx b/docs/knowledge-base/examples/grid/store-columns-width-and-order/app.jsx
similarity index 94%
rename from knowledge-base/examples/grid/store-columns-width-and-order/main.jsx
rename to docs/knowledge-base/examples/grid/store-columns-width-and-order/app.jsx
index e2e3fb53..d1c11970 100644
--- a/knowledge-base/examples/grid/store-columns-width-and-order/main.jsx
+++ b/docs/knowledge-base/examples/grid/store-columns-width-and-order/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 const products = [
   {
@@ -60,4 +60,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/store-columns-width-and-order/main.jsx b/docs/knowledge-base/examples/grid/store-columns-width-and-order/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/store-columns-width-and-order/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/transpose-data/main.jsx b/docs/knowledge-base/examples/grid/transpose-data/app.jsx
similarity index 96%
rename from knowledge-base/examples/grid/transpose-data/main.jsx
rename to docs/knowledge-base/examples/grid/transpose-data/app.jsx
index a78c1b1a..dabf244d 100644
--- a/knowledge-base/examples/grid/transpose-data/main.jsx
+++ b/docs/knowledge-base/examples/grid/transpose-data/app.jsx
@@ -52,4 +52,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/transpose-data/main.jsx b/docs/knowledge-base/examples/grid/transpose-data/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/transpose-data/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/unique-groups/main.jsx b/docs/knowledge-base/examples/grid/unique-groups/app.jsx
similarity index 94%
rename from knowledge-base/examples/grid/unique-groups/main.jsx
rename to docs/knowledge-base/examples/grid/unique-groups/app.jsx
index 9e8d8ca8..d88f26d0 100644
--- a/knowledge-base/examples/grid/unique-groups/main.jsx
+++ b/docs/knowledge-base/examples/grid/unique-groups/app.jsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { groupBy } from '@progress/kendo-data-query';
 import {
   setExpandedState,
   setGroupIds,
 } from '@progress/kendo-react-data-tools';
-import products from './products.json';
+import products from './shared-products.json';
 const initialGroup = [
   {
     field: 'UnitsInStock',
@@ -85,4 +85,4 @@ const App = () => {
     </Grid>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/unique-groups/main.jsx b/docs/knowledge-base/examples/grid/unique-groups/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/unique-groups/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/using-fitColumns-method/main.jsx b/docs/knowledge-base/examples/grid/using-fitColumns-method/app.jsx
similarity index 94%
rename from knowledge-base/examples/grid/using-fitColumns-method/main.jsx
rename to docs/knowledge-base/examples/grid/using-fitColumns-method/app.jsx
index 925b4b70..f9373411 100644
--- a/knowledge-base/examples/grid/using-fitColumns-method/main.jsx
+++ b/docs/knowledge-base/examples/grid/using-fitColumns-method/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 
 const products = [
@@ -59,4 +59,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/using-fitColumns-method/main.jsx b/docs/knowledge-base/examples/grid/using-fitColumns-method/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/using-fitColumns-method/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/virtual-scrolling-pagechange-event/main.jsx b/docs/knowledge-base/examples/grid/virtual-scrolling-pagechange-event/app.jsx
similarity index 97%
rename from knowledge-base/examples/grid/virtual-scrolling-pagechange-event/main.jsx
rename to docs/knowledge-base/examples/grid/virtual-scrolling-pagechange-event/app.jsx
index a65f2f72..a8e59849 100644
--- a/knowledge-base/examples/grid/virtual-scrolling-pagechange-event/main.jsx
+++ b/docs/knowledge-base/examples/grid/virtual-scrolling-pagechange-event/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import { Skeleton } from '@progress/kendo-react-indicators';
 const App = () => {
@@ -116,4 +116,4 @@ const App = () => {
     </Grid>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/virtual-scrolling-pagechange-event/main.jsx b/docs/knowledge-base/examples/grid/virtual-scrolling-pagechange-event/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/virtual-scrolling-pagechange-event/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/grid/with-tooltip/main.jsx b/docs/knowledge-base/examples/grid/with-tooltip/app.jsx
similarity index 89%
rename from knowledge-base/examples/grid/with-tooltip/main.jsx
rename to docs/knowledge-base/examples/grid/with-tooltip/app.jsx
index 92c3026d..75b88470 100644
--- a/knowledge-base/examples/grid/with-tooltip/main.jsx
+++ b/docs/knowledge-base/examples/grid/with-tooltip/app.jsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { Tooltip } from '@progress/kendo-react-tooltip';
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
-import products from './products.json';
+import products from './shared-products.json';
 
 class ProductNameCell extends React.Component {
     render() {
@@ -43,5 +43,4 @@ class App extends React.Component {
         );
     }
 }
-ReactDOM.render(
-    <App/>, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/grid/with-tooltip/main.jsx b/docs/knowledge-base/examples/grid/with-tooltip/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/grid/with-tooltip/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/inputs/inputs-delayed-value-change/main.jsx b/docs/knowledge-base/examples/inputs/inputs-delayed-value-change/app.jsx
similarity index 92%
rename from knowledge-base/examples/inputs/inputs-delayed-value-change/main.jsx
rename to docs/knowledge-base/examples/inputs/inputs-delayed-value-change/app.jsx
index 6234ad0c..e2071635 100644
--- a/knowledge-base/examples/inputs/inputs-delayed-value-change/main.jsx
+++ b/docs/knowledge-base/examples/inputs/inputs-delayed-value-change/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Input } from '@progress/kendo-react-inputs';
 import { Hint } from '@progress/kendo-react-labels';
 
@@ -43,4 +42,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/inputs/inputs-delayed-value-change/main.jsx b/docs/knowledge-base/examples/inputs/inputs-delayed-value-change/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/inputs/inputs-delayed-value-change/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/main.jsx b/docs/knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/app.jsx
similarity index 92%
rename from knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/main.jsx
rename to docs/knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/app.jsx
index 0736504b..1d221bfc 100644
--- a/knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/main.jsx
+++ b/docs/knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { NumericTextBox } from '@progress/kendo-react-inputs';
 import { Label } from '@progress/kendo-react-labels';
 import { FieldWrapper } from '@progress/kendo-react-form';
@@ -40,4 +39,5 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/docs/knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/main.jsx b/docs/knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/inputs/numerictextbox-clear-value-on-esc-key/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/main.jsx b/docs/knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/app.jsx
similarity index 90%
rename from knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/main.jsx
rename to docs/knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/app.jsx
index f16beeda..798bd197 100644
--- a/knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/main.jsx
+++ b/docs/knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { RangeSlider, SliderLabel } from '@progress/kendo-react-inputs';
 const App = () => {
   const sliderRef = React.useRef(null);
@@ -37,4 +36,5 @@ const App = () => {
     </RangeSlider>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/docs/knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/main.jsx b/docs/knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/inputs/rangeslider-show-value-as-tooltip/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/inputs/rangeslider-slider-dots-title/main.jsx b/docs/knowledge-base/examples/inputs/rangeslider-slider-dots-title/app.jsx
similarity index 90%
rename from knowledge-base/examples/inputs/rangeslider-slider-dots-title/main.jsx
rename to docs/knowledge-base/examples/inputs/rangeslider-slider-dots-title/app.jsx
index 1b975226..05be038d 100644
--- a/knowledge-base/examples/inputs/rangeslider-slider-dots-title/main.jsx
+++ b/docs/knowledge-base/examples/inputs/rangeslider-slider-dots-title/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { RangeSlider, SliderLabel } from '@progress/kendo-react-inputs';
 
 const App = () => {
@@ -39,4 +38,5 @@ const App = () => {
     </RangeSlider>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/docs/knowledge-base/examples/inputs/rangeslider-slider-dots-title/main.jsx b/docs/knowledge-base/examples/inputs/rangeslider-slider-dots-title/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/inputs/rangeslider-slider-dots-title/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/inputs/slider-label-single-click/main.jsx b/docs/knowledge-base/examples/inputs/slider-label-single-click/app.jsx
similarity index 90%
rename from knowledge-base/examples/inputs/slider-label-single-click/main.jsx
rename to docs/knowledge-base/examples/inputs/slider-label-single-click/app.jsx
index 2378dccc..0b0d5c15 100644
--- a/knowledge-base/examples/inputs/slider-label-single-click/main.jsx
+++ b/docs/knowledge-base/examples/inputs/slider-label-single-click/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Slider, SliderLabel } from '@progress/kendo-react-inputs';
 const App = () => {
   const [value, setValue] = React.useState(7);
@@ -37,4 +36,5 @@ const App = () => {
     </Slider>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/docs/knowledge-base/examples/inputs/slider-label-single-click/main.jsx b/docs/knowledge-base/examples/inputs/slider-label-single-click/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/inputs/slider-label-single-click/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/layout/bottomnavigation-change-content/main.jsx b/docs/knowledge-base/examples/layout/bottomnavigation-change-content/app.jsx
similarity index 92%
rename from knowledge-base/examples/layout/bottomnavigation-change-content/main.jsx
rename to docs/knowledge-base/examples/layout/bottomnavigation-change-content/app.jsx
index 741dd69c..41f33e1b 100644
--- a/knowledge-base/examples/layout/bottomnavigation-change-content/main.jsx
+++ b/docs/knowledge-base/examples/layout/bottomnavigation-change-content/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { BottomNavigation } from '@progress/kendo-react-layout';
 import { DropDownList } from '@progress/kendo-react-dropdowns';
 const content = [
@@ -55,4 +54,5 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/docs/knowledge-base/examples/layout/bottomnavigation-change-content/main.jsx b/docs/knowledge-base/examples/layout/bottomnavigation-change-content/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/layout/bottomnavigation-change-content/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/layout/drawer-close-on-click/main.jsx b/docs/knowledge-base/examples/layout/drawer-close-on-click/app.jsx
similarity index 93%
rename from knowledge-base/examples/layout/drawer-close-on-click/main.jsx
rename to docs/knowledge-base/examples/layout/drawer-close-on-click/app.jsx
index 1cc684b7..67ae054d 100644
--- a/knowledge-base/examples/layout/drawer-close-on-click/main.jsx
+++ b/docs/knowledge-base/examples/layout/drawer-close-on-click/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
 import './styles.css';
 const items = [
@@ -64,4 +63,4 @@ const App = () => {
     </Drawer>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/layout/drawer-close-on-click/main.jsx b/docs/knowledge-base/examples/layout/drawer-close-on-click/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/layout/drawer-close-on-click/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/layout/drawer-close-on-click/styles.css b/docs/knowledge-base/examples/layout/drawer-close-on-click/styles.css
similarity index 100%
rename from knowledge-base/examples/layout/drawer-close-on-click/styles.css
rename to docs/knowledge-base/examples/layout/drawer-close-on-click/styles.css
diff --git a/knowledge-base/examples/layout/drawer-router-v6/About.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/About.jsx
similarity index 100%
rename from knowledge-base/examples/layout/drawer-router-v6/About.jsx
rename to docs/knowledge-base/examples/layout/drawer-router-v6/About.jsx
diff --git a/knowledge-base/examples/layout/drawer-router-v6/DrawerContainer.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/DrawerContainer.jsx
similarity index 95%
rename from knowledge-base/examples/layout/drawer-router-v6/DrawerContainer.jsx
rename to docs/knowledge-base/examples/layout/drawer-router-v6/DrawerContainer.jsx
index b814d6a3..ec9d1c76 100644
--- a/knowledge-base/examples/layout/drawer-router-v6/DrawerContainer.jsx
+++ b/docs/knowledge-base/examples/layout/drawer-router-v6/DrawerContainer.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLocation, useNavigate, history } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
 import { Button } from '@progress/kendo-react-buttons';
 
diff --git a/knowledge-base/examples/layout/drawer-router-v6/Home.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/Home.jsx
similarity index 100%
rename from knowledge-base/examples/layout/drawer-router-v6/Home.jsx
rename to docs/knowledge-base/examples/layout/drawer-router-v6/Home.jsx
diff --git a/knowledge-base/examples/layout/drawer-router-v6/Products.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/Products.jsx
similarity index 100%
rename from knowledge-base/examples/layout/drawer-router-v6/Products.jsx
rename to docs/knowledge-base/examples/layout/drawer-router-v6/Products.jsx
diff --git a/knowledge-base/examples/layout/drawer-router-v6/Team.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/Team.jsx
similarity index 100%
rename from knowledge-base/examples/layout/drawer-router-v6/Team.jsx
rename to docs/knowledge-base/examples/layout/drawer-router-v6/Team.jsx
diff --git a/docs/knowledge-base/examples/layout/drawer-router-v6/app.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/app.jsx
new file mode 100644
index 00000000..63514efa
--- /dev/null
+++ b/docs/knowledge-base/examples/layout/drawer-router-v6/app.jsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Router, BrowserRouter, Routes, Route } from 'react-router-dom';
+import About from './About';
+import Home from './Home';
+import Products from './Products';
+import DrawerContainer from './DrawerContainer';
+import './styles.css';
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <BrowserRouter>
+        <DrawerContainer>
+          <Routes>
+            <Route exact={true} path="/" element={<Home />} />
+            <Route exact={true} path="/products" element={<Products />} />
+            <Route exact={true} path="/about" element={<About />} />
+          </Routes>
+        </DrawerContainer>
+      </BrowserRouter>
+    </React.Fragment>
+  );
+};
+
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/layout/drawer-router-v6/main.jsx b/docs/knowledge-base/examples/layout/drawer-router-v6/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/layout/drawer-router-v6/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/layout/drawer-router-v6/styles.css b/docs/knowledge-base/examples/layout/drawer-router-v6/styles.css
similarity index 100%
rename from knowledge-base/examples/layout/drawer-router-v6/styles.css
rename to docs/knowledge-base/examples/layout/drawer-router-v6/styles.css
diff --git a/knowledge-base/examples/layout/panelbar-open-in-new-window/About.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/About.jsx
similarity index 100%
rename from knowledge-base/examples/layout/panelbar-open-in-new-window/About.jsx
rename to docs/knowledge-base/examples/layout/panelbar-open-in-new-window/About.jsx
diff --git a/knowledge-base/examples/layout/panelbar-open-in-new-window/Home.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Home.jsx
similarity index 100%
rename from knowledge-base/examples/layout/panelbar-open-in-new-window/Home.jsx
rename to docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Home.jsx
diff --git a/knowledge-base/examples/layout/panelbar-open-in-new-window/PanelBarNavContainer.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/PanelBarNavContainer.jsx
similarity index 88%
rename from knowledge-base/examples/layout/panelbar-open-in-new-window/PanelBarNavContainer.jsx
rename to docs/knowledge-base/examples/layout/panelbar-open-in-new-window/PanelBarNavContainer.jsx
index de6f40a5..ae1c4524 100644
--- a/knowledge-base/examples/layout/panelbar-open-in-new-window/PanelBarNavContainer.jsx
+++ b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/PanelBarNavContainer.jsx
@@ -1,6 +1,14 @@
 import * as React from 'react';
 import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
-import { withRouter } from 'react-router-dom';
+import { useNavigate } from 'react-router';
+
+export const withRouter = (Component) =>{
+    const Wrapper = (props) =>{
+        const history = useNavigate();
+        return <Component history={history} {...props}/>
+    } 
+    return Wrapper;
+}
 
 const CustomPanelBarItem = (props) => {
   return (
diff --git a/knowledge-base/examples/layout/panelbar-open-in-new-window/Products.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Products.jsx
similarity index 100%
rename from knowledge-base/examples/layout/panelbar-open-in-new-window/Products.jsx
rename to docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Products.jsx
diff --git a/knowledge-base/examples/layout/panelbar-open-in-new-window/Team.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Team.jsx
similarity index 100%
rename from knowledge-base/examples/layout/panelbar-open-in-new-window/Team.jsx
rename to docs/knowledge-base/examples/layout/panelbar-open-in-new-window/Team.jsx
diff --git a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/app.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/app.jsx
new file mode 100644
index 00000000..55253d3a
--- /dev/null
+++ b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/app.jsx
@@ -0,0 +1,25 @@
+
+import * as React from 'react';
+import { HashRouter, Routes, Route } from 'react-router-dom';
+import About from './About';
+import Team from './Team';
+import Home from './Home';
+import Products from './Products';
+import PanelBarNavContainer from './PanelBarNavContainer';
+
+const App = () => {
+  return (
+    <HashRouter>
+      <PanelBarNavContainer>
+        <Routes>
+          <Route exact={true} path="/" component={Home} />
+          <Route exact={true} path="/products" component={Products} />
+          <Route exact={true} path="/about" component={About} />
+          <Route exact={true} path="/about/team" component={Team} />
+        </Routes>
+      </PanelBarNavContainer>
+    </HashRouter>
+  );
+};
+
+export default App;
diff --git a/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/main.jsx b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/layout/panelbar-open-in-new-window/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/main.jsx b/docs/knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/app.jsx
similarity index 90%
rename from knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/main.jsx
rename to docs/knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/app.jsx
index 91042b36..502bedff 100644
--- a/knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/main.jsx
+++ b/docs/knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/app.jsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
 import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
 
 const MyTitle = (props) => {
@@ -39,4 +37,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/main.jsx b/docs/knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/layout/panelbar-render-button-in-panelbaritem/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/layout/tabstrip-button-in-tabs/main.jsx b/docs/knowledge-base/examples/layout/tabstrip-button-in-tabs/app.jsx
similarity index 90%
rename from knowledge-base/examples/layout/tabstrip-button-in-tabs/main.jsx
rename to docs/knowledge-base/examples/layout/tabstrip-button-in-tabs/app.jsx
index 159d7281..179de258 100644
--- a/knowledge-base/examples/layout/tabstrip-button-in-tabs/main.jsx
+++ b/docs/knowledge-base/examples/layout/tabstrip-button-in-tabs/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
 
 const App = () => {
@@ -36,4 +35,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/layout/tabstrip-button-in-tabs/main.jsx b/docs/knowledge-base/examples/layout/tabstrip-button-in-tabs/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/layout/tabstrip-button-in-tabs/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/main.jsx b/docs/knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/app.jsx
similarity index 94%
rename from knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/main.jsx
rename to docs/knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/app.jsx
index adf50515..ef7c5988 100644
--- a/knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/main.jsx
+++ b/docs/knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
 import './styles.css';
 
@@ -59,4 +59,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/main.jsx b/docs/knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/styles.css b/docs/knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/styles.css
similarity index 100%
rename from knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/styles.css
rename to docs/knowledge-base/examples/layout/tabstrip-scrollbar-for-tabs/styles.css
diff --git a/knowledge-base/examples/layout/tilelayout-adapt-rowspan-content-dynamically/main.jsx b/docs/knowledge-base/examples/layout/tilelayout-adapt-rowspan-content-dynamically/app.jsx
similarity index 93%
rename from knowledge-base/examples/layout/tilelayout-adapt-rowspan-content-dynamically/main.jsx
rename to docs/knowledge-base/examples/layout/tilelayout-adapt-rowspan-content-dynamically/app.jsx
index 4e40ad60..4f395aec 100644
--- a/knowledge-base/examples/layout/tilelayout-adapt-rowspan-content-dynamically/main.jsx
+++ b/docs/knowledge-base/examples/layout/tilelayout-adapt-rowspan-content-dynamically/app.jsx
@@ -1,8 +1,7 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import { TileLayout } from "@progress/kendo-react-layout";
 import { Grid } from "@progress/kendo-react-grid";
-import products from "./products.json";
+import products from "./shared-products.json";
 const initialDataState = {
   skip: 0,
   take: 10,
@@ -82,5 +81,5 @@ const App = () => {
     />
   );
 };
+
 export default App;
-ReactDOM.render(<App />, document.querySelector("my-app"));
diff --git a/docs/knowledge-base/examples/layout/tilelayout-adapt-rowspan-content-dynamically/main.jsx b/docs/knowledge-base/examples/layout/tilelayout-adapt-rowspan-content-dynamically/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/layout/tilelayout-adapt-rowspan-content-dynamically/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/listbox/listbox-keyboard-navigation/main.jsx b/docs/knowledge-base/examples/listbox/listbox-keyboard-navigation/app.jsx
similarity index 97%
rename from knowledge-base/examples/listbox/listbox-keyboard-navigation/main.jsx
rename to docs/knowledge-base/examples/listbox/listbox-keyboard-navigation/app.jsx
index aee4d1ef..8e9fa890 100644
--- a/knowledge-base/examples/listbox/listbox-keyboard-navigation/main.jsx
+++ b/docs/knowledge-base/examples/listbox/listbox-keyboard-navigation/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   ListBox,
   ListBoxToolbar,
@@ -185,9 +184,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(
-  <React.Fragment>
-    <App />
-  </React.Fragment>,
-  document.querySelector('my-app')
-);
+export default App;
diff --git a/docs/knowledge-base/examples/listbox/listbox-keyboard-navigation/main.jsx b/docs/knowledge-base/examples/listbox/listbox-keyboard-navigation/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/listbox/listbox-keyboard-navigation/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/listbox/show-drag-clue/main.jsx b/docs/knowledge-base/examples/listbox/show-drag-clue/app.jsx
similarity index 85%
rename from knowledge-base/examples/listbox/show-drag-clue/main.jsx
rename to docs/knowledge-base/examples/listbox/show-drag-clue/app.jsx
index c27580ea..b9842cd4 100644
--- a/knowledge-base/examples/listbox/show-drag-clue/main.jsx
+++ b/docs/knowledge-base/examples/listbox/show-drag-clue/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   ListBox,
   processListBoxDragAndDrop,
@@ -96,23 +95,5 @@ const App = () => {
     </div>
   ); 
 };
-ReactDOM.render(
-  <React.Fragment>
-    <App />
-    <style>
-      {`.arrow {
-                padding: 8px 0 5px 238px;
-            }
-            .example .demo-section {
-                max-width: none;
-                width: 640px;
-            }
 
-            .example .k-listbox {
-                width: 275px;
-                height: 310px;
-            }`}
-    </style>
-  </React.Fragment>,
-  document.querySelector('my-app')
-);
+export default App;
diff --git a/docs/knowledge-base/examples/listbox/show-drag-clue/main.jsx b/docs/knowledge-base/examples/listbox/show-drag-clue/main.jsx
new file mode 100644
index 00000000..094c6a5d
--- /dev/null
+++ b/docs/knowledge-base/examples/listbox/show-drag-clue/main.jsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(
+  <React.Fragment>
+    <App />
+    <style>
+      {`.arrow {
+                padding: 8px 0 5px 238px;
+            }
+            .example .demo-section {
+                max-width: none;
+                width: 640px;
+            }
+
+            .example .k-listbox {
+                width: 275px;
+                height: 310px;
+            }`}
+    </style>
+  </React.Fragment>);
\ No newline at end of file
diff --git a/knowledge-base/examples/listbox/show-drag-clue/products.json b/docs/knowledge-base/examples/listbox/show-drag-clue/products.json
similarity index 100%
rename from knowledge-base/examples/listbox/show-drag-clue/products.json
rename to docs/knowledge-base/examples/listbox/show-drag-clue/products.json
diff --git a/knowledge-base/examples/listbox/show-drag-clue/styles.css b/docs/knowledge-base/examples/listbox/show-drag-clue/styles.css
similarity index 100%
rename from knowledge-base/examples/listbox/show-drag-clue/styles.css
rename to docs/knowledge-base/examples/listbox/show-drag-clue/styles.css
diff --git a/knowledge-base/examples/listview/listview-grouping/main.jsx b/docs/knowledge-base/examples/listview/listview-grouping/app.jsx
similarity index 92%
rename from knowledge-base/examples/listview/listview-grouping/main.jsx
rename to docs/knowledge-base/examples/listview/listview-grouping/app.jsx
index 7078042d..125126b4 100644
--- a/knowledge-base/examples/listview/listview-grouping/main.jsx
+++ b/docs/knowledge-base/examples/listview/listview-grouping/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { ListView } from '@progress/kendo-react-listview';
 import products from './products.json';
 import { groupBy } from '@progress/kendo-data-query';
@@ -69,9 +68,5 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(
-  <React.Fragment>
-    <App />
-  </React.Fragment>,
-  document.querySelector('my-app')
-);
+
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/listview/listview-grouping/main.jsx b/docs/knowledge-base/examples/listview/listview-grouping/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/listview/listview-grouping/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/listview/listview-grouping/products.json b/docs/knowledge-base/examples/listview/listview-grouping/products.json
similarity index 100%
rename from knowledge-base/examples/listview/listview-grouping/products.json
rename to docs/knowledge-base/examples/listview/listview-grouping/products.json
diff --git a/knowledge-base/examples/localization/use-variable-in-messages/Chooser.jsx b/docs/knowledge-base/examples/localization/use-variable-in-messages/Chooser.jsx
similarity index 100%
rename from knowledge-base/examples/localization/use-variable-in-messages/Chooser.jsx
rename to docs/knowledge-base/examples/localization/use-variable-in-messages/Chooser.jsx
diff --git a/knowledge-base/examples/localization/use-variable-in-messages/Message.jsx b/docs/knowledge-base/examples/localization/use-variable-in-messages/Message.jsx
similarity index 100%
rename from knowledge-base/examples/localization/use-variable-in-messages/Message.jsx
rename to docs/knowledge-base/examples/localization/use-variable-in-messages/Message.jsx
diff --git a/knowledge-base/examples/localization/use-variable-in-messages/MyLocalizationProvider.jsx b/docs/knowledge-base/examples/localization/use-variable-in-messages/MyLocalizationProvider.jsx
similarity index 100%
rename from knowledge-base/examples/localization/use-variable-in-messages/MyLocalizationProvider.jsx
rename to docs/knowledge-base/examples/localization/use-variable-in-messages/MyLocalizationProvider.jsx
diff --git a/knowledge-base/examples/localization/use-variable-in-messages/main.jsx b/docs/knowledge-base/examples/localization/use-variable-in-messages/app.jsx
similarity index 95%
rename from knowledge-base/examples/localization/use-variable-in-messages/main.jsx
rename to docs/knowledge-base/examples/localization/use-variable-in-messages/app.jsx
index 434bbf4d..d8774d3d 100644
--- a/knowledge-base/examples/localization/use-variable-in-messages/main.jsx
+++ b/docs/knowledge-base/examples/localization/use-variable-in-messages/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { useLocalization, loadMessages } from '@progress/kendo-react-intl';
 import { Chooser } from './Chooser';
 import {
@@ -70,4 +69,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/localization/use-variable-in-messages/main.jsx b/docs/knowledge-base/examples/localization/use-variable-in-messages/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/localization/use-variable-in-messages/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/localization/use-variable-in-messages/messages.js b/docs/knowledge-base/examples/localization/use-variable-in-messages/messages.js
similarity index 100%
rename from knowledge-base/examples/localization/use-variable-in-messages/messages.js
rename to docs/knowledge-base/examples/localization/use-variable-in-messages/messages.js
diff --git a/knowledge-base/examples/map/add-shape-titles/main.tsx b/docs/knowledge-base/examples/map/add-shape-titles/app.tsx
similarity index 88%
rename from knowledge-base/examples/map/add-shape-titles/main.tsx
rename to docs/knowledge-base/examples/map/add-shape-titles/app.tsx
index 5ddfe5c6..4b7007c9 100644
--- a/knowledge-base/examples/map/add-shape-titles/main.tsx
+++ b/docs/knowledge-base/examples/map/add-shape-titles/app.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Element, Surface, ShapeOptions, Text } from '@progress/kendo-drawing';
 import {
     Map,
@@ -66,9 +65,4 @@ const App = () => (
     </Map>
 );
 
-ReactDOM.render(
-    <React.Fragment>
-      <App />
-    </React.Fragment>,
-    document.querySelector('my-app')
-  );
+export default App;
diff --git a/docs/knowledge-base/examples/map/add-shape-titles/main.tsx b/docs/knowledge-base/examples/map/add-shape-titles/main.tsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/map/add-shape-titles/main.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/map/add-shape-titles/shapes.json b/docs/knowledge-base/examples/map/add-shape-titles/shapes.json
similarity index 100%
rename from knowledge-base/examples/map/add-shape-titles/shapes.json
rename to docs/knowledge-base/examples/map/add-shape-titles/shapes.json
diff --git a/knowledge-base/examples/map/custom-bubble-symbols/main.tsx b/docs/knowledge-base/examples/map/custom-bubble-symbols/app.tsx
similarity index 89%
rename from knowledge-base/examples/map/custom-bubble-symbols/main.tsx
rename to docs/knowledge-base/examples/map/custom-bubble-symbols/app.tsx
index a4c7481d..032c6efc 100644
--- a/knowledge-base/examples/map/custom-bubble-symbols/main.tsx
+++ b/docs/knowledge-base/examples/map/custom-bubble-symbols/app.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Path } from '@progress/kendo-drawing';
 import {
     Map,
@@ -75,9 +74,4 @@ const App = () => {
     );
 };
 
-ReactDOM.render(
-    <React.Fragment>
-      <App />
-    </React.Fragment>,
-    document.querySelector('my-app')
-  );
+export default App;
diff --git a/docs/knowledge-base/examples/map/custom-bubble-symbols/main.tsx b/docs/knowledge-base/examples/map/custom-bubble-symbols/main.tsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/map/custom-bubble-symbols/main.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/map/custom-bubble-symbols/urban-areas.json b/docs/knowledge-base/examples/map/custom-bubble-symbols/urban-areas.json
similarity index 100%
rename from knowledge-base/examples/map/custom-bubble-symbols/urban-areas.json
rename to docs/knowledge-base/examples/map/custom-bubble-symbols/urban-areas.json
diff --git a/knowledge-base/examples/map/link-markers/main.tsx b/docs/knowledge-base/examples/map/link-markers/app.tsx
similarity index 89%
rename from knowledge-base/examples/map/link-markers/main.tsx
rename to docs/knowledge-base/examples/map/link-markers/app.tsx
index 39cc687b..175f519a 100644
--- a/knowledge-base/examples/map/link-markers/main.tsx
+++ b/docs/knowledge-base/examples/map/link-markers/app.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Path } from '@progress/kendo-drawing';
 import {
     Map,
@@ -78,9 +77,4 @@ const App = () => (
     </Map>
 );
 
-ReactDOM.render(
-    <React.Fragment>
-      <App />
-    </React.Fragment>,
-    document.querySelector('my-app')
-  );
+export default App;
diff --git a/docs/knowledge-base/examples/map/link-markers/main.tsx b/docs/knowledge-base/examples/map/link-markers/main.tsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/map/link-markers/main.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/multiselect/multiselect-color-tags/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-color-tags/app.jsx
similarity index 93%
rename from knowledge-base/examples/multiselect/multiselect-color-tags/main.jsx
rename to docs/knowledge-base/examples/multiselect/multiselect-color-tags/app.jsx
index 563ead89..d99967e3 100644
--- a/knowledge-base/examples/multiselect/multiselect-color-tags/main.jsx
+++ b/docs/knowledge-base/examples/multiselect/multiselect-color-tags/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { MultiSelect } from '@progress/kendo-react-dropdowns';
 
 const sizes = [
@@ -68,4 +67,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/multiselect/multiselect-color-tags/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-color-tags/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/multiselect/multiselect-color-tags/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/multiselect/multiselect-disable-items/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-disable-items/app.jsx
similarity index 91%
rename from knowledge-base/examples/multiselect/multiselect-disable-items/main.jsx
rename to docs/knowledge-base/examples/multiselect/multiselect-disable-items/app.jsx
index 155f85eb..1147830e 100644
--- a/knowledge-base/examples/multiselect/multiselect-disable-items/main.jsx
+++ b/docs/knowledge-base/examples/multiselect/multiselect-disable-items/app.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { MultiSelect } from '@progress/kendo-react-dropdowns';
-import countries from './countries';
+import countries from './shared-countries';
 const App = () => {
   const [open, setOpen] = React.useState(true);
   const itemRender = (li, itemProps) => {
@@ -61,4 +61,5 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/docs/knowledge-base/examples/multiselect/multiselect-disable-items/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-disable-items/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/multiselect/multiselect-disable-items/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/multiselect/multiselect-limit-input/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-limit-input/app.jsx
similarity index 86%
rename from knowledge-base/examples/multiselect/multiselect-limit-input/main.jsx
rename to docs/knowledge-base/examples/multiselect/multiselect-limit-input/app.jsx
index 107200f6..154bde9e 100644
--- a/knowledge-base/examples/multiselect/multiselect-limit-input/main.jsx
+++ b/docs/knowledge-base/examples/multiselect/multiselect-limit-input/app.jsx
@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from "react";
-import ReactDOM from "react-dom";
 import { MultiSelect } from "@progress/kendo-react-dropdowns";
 import { filterBy } from "@progress/kendo-data-query";
-import countries from "./countries";
+import countries from "./shared-countries";
 
 const App = () => {
   const [data, setData] = useState(countries.slice());
@@ -34,4 +33,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/multiselect/multiselect-limit-input/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-limit-input/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/multiselect/multiselect-limit-input/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/multiselect/multiselect-reorder-tags/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-reorder-tags/app.jsx
similarity index 94%
rename from knowledge-base/examples/multiselect/multiselect-reorder-tags/main.jsx
rename to docs/knowledge-base/examples/multiselect/multiselect-reorder-tags/app.jsx
index b9856d71..cc3b13ba 100644
--- a/knowledge-base/examples/multiselect/multiselect-reorder-tags/main.jsx
+++ b/docs/knowledge-base/examples/multiselect/multiselect-reorder-tags/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { MultiSelect } from '@progress/kendo-react-dropdowns';
 import { Sortable } from '@progress/kendo-react-sortable';
 import './styles.css';
@@ -69,4 +68,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/multiselect/multiselect-reorder-tags/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-reorder-tags/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/multiselect/multiselect-reorder-tags/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/multiselect/multiselect-reorder-tags/styles.css b/docs/knowledge-base/examples/multiselect/multiselect-reorder-tags/styles.css
similarity index 100%
rename from knowledge-base/examples/multiselect/multiselect-reorder-tags/styles.css
rename to docs/knowledge-base/examples/multiselect/multiselect-reorder-tags/styles.css
diff --git a/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/class/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/class/app.jsx
similarity index 93%
rename from knowledge-base/examples/multiselect/multiselect-select-all-checkbox/class/main.jsx
rename to docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/class/app.jsx
index a17299f4..c8f22a02 100644
--- a/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/class/main.jsx
+++ b/docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/class/app.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { MultiSelect } from '@progress/kendo-react-dropdowns';
-import countries from './countries';
-
+import countries from './shared-countries';
 class AppComponent extends React.Component {
   state = { value: [], allSelected: true };
 
@@ -75,4 +73,4 @@ class AppComponent extends React.Component {
   }
 }
 
-ReactDOM.render(<AppComponent />, document.querySelector('my-app'));
+export default AppComponent;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/class/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/class/main.jsx
new file mode 100644
index 00000000..80a0d7bf
--- /dev/null
+++ b/docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/class/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import AppComponent from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<AppComponent />);
\ No newline at end of file
diff --git a/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/func/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/func/app.jsx
similarity index 93%
rename from knowledge-base/examples/multiselect/multiselect-select-all-checkbox/func/main.jsx
rename to docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/func/app.jsx
index 0c8901d9..819b2570 100644
--- a/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/func/main.jsx
+++ b/docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/func/app.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { MultiSelect } from '@progress/kendo-react-dropdowns';
-import countries from './countries';
+import countries from './shared-countries';
 
 const App = () => {
   const [state, setState] = React.useState({ value: [], allSelected: true });
@@ -72,4 +71,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/func/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/func/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/multiselect/multiselect-select-all-checkbox/func/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/multiselect/multiselect-set-maximum-selection/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-set-maximum-selection/app.jsx
similarity index 83%
rename from knowledge-base/examples/multiselect/multiselect-set-maximum-selection/main.jsx
rename to docs/knowledge-base/examples/multiselect/multiselect-set-maximum-selection/app.jsx
index 1b32d3b5..3f8200e3 100644
--- a/knowledge-base/examples/multiselect/multiselect-set-maximum-selection/main.jsx
+++ b/docs/knowledge-base/examples/multiselect/multiselect-set-maximum-selection/app.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { MultiSelect } from '@progress/kendo-react-dropdowns';
 
 const sizes = ['X-Small', 'Small', 'Medium', 'Large', 'X-Large', '2X-Large'];
@@ -19,4 +19,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/multiselect/multiselect-set-maximum-selection/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-set-maximum-selection/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/multiselect/multiselect-set-maximum-selection/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/app.jsx
similarity index 95%
rename from knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/main.jsx
rename to docs/knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/app.jsx
index 226f3351..411f1459 100644
--- a/knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/main.jsx
+++ b/docs/knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { MultiSelect } from '@progress/kendo-react-dropdowns';
 const sizes = ['X-Small', 'Small', 'Medium'];
 const App = () => {
@@ -81,4 +81,4 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/main.jsx b/docs/knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/multiselect/multiselect-tags-and-tagrender/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/main.jsx b/docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/app.jsx
similarity index 97%
rename from knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/main.jsx
rename to docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/app.jsx
index f59a546d..a3498787 100644
--- a/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/main.jsx
+++ b/docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/app.jsx
@@ -92,4 +92,5 @@ const App = () => {
     </>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/main.jsx b/docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/multiselecttree-data-operations.js b/docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/multiselecttree-data-operations.js
similarity index 100%
rename from knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/multiselecttree-data-operations.js
rename to docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/multiselecttree-data-operations.js
diff --git a/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/style.css b/docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/style.css
similarity index 100%
rename from knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/style.css
rename to docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/style.css
diff --git a/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/tree-data.js b/docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/tree-data.js
similarity index 100%
rename from knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/tree-data.js
rename to docs/knowledge-base/examples/multiselecttree/multiselecttree-lazy-loading/tree-data.js
diff --git a/knowledge-base/examples/notification/hide-after/main.jsx b/docs/knowledge-base/examples/notification/hide-after/app.jsx
similarity index 88%
rename from knowledge-base/examples/notification/hide-after/main.jsx
rename to docs/knowledge-base/examples/notification/hide-after/app.jsx
index d4b185c5..ca60abd7 100644
--- a/knowledge-base/examples/notification/hide-after/main.jsx
+++ b/docs/knowledge-base/examples/notification/hide-after/app.jsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
 import { Notification, NotificationGroup } from '@progress/kendo-react-notification'
 import { Fade } from '@progress/kendo-react-animation'
 
@@ -50,8 +48,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('my-app')
-);
+export default App;
 
diff --git a/docs/knowledge-base/examples/notification/hide-after/main.jsx b/docs/knowledge-base/examples/notification/hide-after/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/notification/hide-after/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/notification/stack-and-hide-after/main.jsx b/docs/knowledge-base/examples/notification/stack-and-hide-after/app.jsx
similarity index 95%
rename from knowledge-base/examples/notification/stack-and-hide-after/main.jsx
rename to docs/knowledge-base/examples/notification/stack-and-hide-after/app.jsx
index d4ae182f..4e79a9f9 100644
--- a/knowledge-base/examples/notification/stack-and-hide-after/main.jsx
+++ b/docs/knowledge-base/examples/notification/stack-and-hide-after/app.jsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";
 import {
   Notification,
@@ -7,7 +6,7 @@ import {
 } from "@progress/kendo-react-notification";
 import { Fade } from "@progress/kendo-react-animation";
 
-import products from "./products.json";
+import products from "./shared-products.json";
 
 class App extends React.Component {
   state = {
@@ -101,4 +100,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/notification/stack-and-hide-after/main.jsx b/docs/knowledge-base/examples/notification/stack-and-hide-after/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/notification/stack-and-hide-after/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/notification/stack-notifications/main.jsx b/docs/knowledge-base/examples/notification/stack-notifications/app.jsx
similarity index 94%
rename from knowledge-base/examples/notification/stack-notifications/main.jsx
rename to docs/knowledge-base/examples/notification/stack-notifications/app.jsx
index 2161e3cc..662b080f 100644
--- a/knowledge-base/examples/notification/stack-notifications/main.jsx
+++ b/docs/knowledge-base/examples/notification/stack-notifications/app.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import {
   Notification,
   NotificationGroup,
@@ -61,4 +61,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/notification/stack-notifications/main.jsx b/docs/knowledge-base/examples/notification/stack-notifications/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/notification/stack-notifications/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/notification/stack-notifications/styles.css b/docs/knowledge-base/examples/notification/stack-notifications/styles.css
similarity index 100%
rename from knowledge-base/examples/notification/stack-notifications/styles.css
rename to docs/knowledge-base/examples/notification/stack-notifications/styles.css
diff --git a/knowledge-base/examples/popup/close-on-blur/main.jsx b/docs/knowledge-base/examples/popup/close-on-blur/app.jsx
similarity index 89%
rename from knowledge-base/examples/popup/close-on-blur/main.jsx
rename to docs/knowledge-base/examples/popup/close-on-blur/app.jsx
index a53a76d1..a7e0b56e 100644
--- a/knowledge-base/examples/popup/close-on-blur/main.jsx
+++ b/docs/knowledge-base/examples/popup/close-on-blur/app.jsx
@@ -1,6 +1,4 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
-
 import { Popup } from "@progress/kendo-react-popup";
 
 
@@ -69,4 +67,4 @@ class AppComponent extends React.Component {
   };
 }
 
-ReactDOM.render(<AppComponent />, document.querySelector("my-app"));
+export default AppComponent;
diff --git a/docs/knowledge-base/examples/popup/close-on-blur/main.jsx b/docs/knowledge-base/examples/popup/close-on-blur/main.jsx
new file mode 100644
index 00000000..80a0d7bf
--- /dev/null
+++ b/docs/knowledge-base/examples/popup/close-on-blur/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import AppComponent from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<AppComponent />);
\ No newline at end of file
diff --git a/knowledge-base/examples/popup/close-on-click-outside/main.jsx b/docs/knowledge-base/examples/popup/close-on-click-outside/app.jsx
similarity index 91%
rename from knowledge-base/examples/popup/close-on-click-outside/main.jsx
rename to docs/knowledge-base/examples/popup/close-on-click-outside/app.jsx
index a41b1f31..f99a24b0 100644
--- a/knowledge-base/examples/popup/close-on-click-outside/main.jsx
+++ b/docs/knowledge-base/examples/popup/close-on-click-outside/app.jsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-
 import { Popup } from '@progress/kendo-react-popup';
 import { process } from '@progress/kendo-data-query';
 
@@ -56,4 +54,4 @@ class AppComponent extends React.Component {
   };
 }
 
-ReactDOM.render(<AppComponent />, document.querySelector('my-app'));
+export default AppComponent;
\ No newline at end of file
diff --git a/docs/knowledge-base/examples/popup/close-on-click-outside/main.jsx b/docs/knowledge-base/examples/popup/close-on-click-outside/main.jsx
new file mode 100644
index 00000000..80a0d7bf
--- /dev/null
+++ b/docs/knowledge-base/examples/popup/close-on-click-outside/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import AppComponent from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<AppComponent />);
\ No newline at end of file
diff --git a/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/main.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/app.jsx
similarity index 96%
rename from knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/main.jsx
rename to docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/app.jsx
index cce6b212..21f2620f 100644
--- a/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/main.jsx
+++ b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
 import {
   DragAndDrop,
@@ -107,4 +106,5 @@ const App = () => {
     </ReorderContext.Provider>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/drag-handle-cell.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/drag-handle-cell.jsx
similarity index 100%
rename from knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/drag-handle-cell.jsx
rename to docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/drag-handle-cell.jsx
diff --git a/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/draggable-row.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/draggable-row.jsx
similarity index 98%
rename from knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/draggable-row.jsx
rename to docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/draggable-row.jsx
index fcf83f97..b49470ee 100644
--- a/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/draggable-row.jsx
+++ b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/draggable-row.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { ReorderContext } from './main';
+import { ReorderContext } from './app';
 import { useDraggable } from '@progress/kendo-react-common';
 
 export const DraggableRow = (props) => {
diff --git a/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/main.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/products.json b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/products.json
similarity index 100%
rename from knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/products.json
rename to docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/draggable/products.json
diff --git a/knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/main.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/app.jsx
similarity index 94%
rename from knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/main.jsx
rename to docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/app.jsx
index 9b492d54..fc72276c 100644
--- a/knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/main.jsx
+++ b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Scheduler,
   WeekView,
@@ -9,7 +8,7 @@ import {
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 import { guid } from '@progress/kendo-react-common';
 
-import gridData from './data.js';
+import gridData from './shared-data';
 
 const App = () => {
   const MyScheduler = React.createRef();
@@ -88,4 +87,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/main.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/scheduler/dnd-from-grid-mobile/polyfill/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/scheduler/dnd-from-grid/main.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid/app.jsx
similarity index 90%
rename from knowledge-base/examples/scheduler/dnd-from-grid/main.jsx
rename to docs/knowledge-base/examples/scheduler/dnd-from-grid/app.jsx
index 2fba12da..1a8e202b 100644
--- a/knowledge-base/examples/scheduler/dnd-from-grid/main.jsx
+++ b/docs/knowledge-base/examples/scheduler/dnd-from-grid/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Scheduler,
   WeekView,
@@ -8,7 +7,7 @@ import {
 
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 
-import gridData from './data.js';
+import gridData from './shared-data';
 
 const handleDragOver = (e) => {
   e.preventDefault();
@@ -79,4 +78,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/scheduler/dnd-from-grid/main.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-grid/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/scheduler/dnd-from-grid/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/scheduler/dnd-from-listview/main.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-listview/app.jsx
similarity index 88%
rename from knowledge-base/examples/scheduler/dnd-from-listview/main.jsx
rename to docs/knowledge-base/examples/scheduler/dnd-from-listview/app.jsx
index fcf84b93..73aae571 100644
--- a/knowledge-base/examples/scheduler/dnd-from-listview/main.jsx
+++ b/docs/knowledge-base/examples/scheduler/dnd-from-listview/app.jsx
@@ -1,15 +1,12 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Scheduler,
   WeekView,
   MonthView,
 } from '@progress/kendo-react-scheduler';
-import { ListView, ListViewItemProps } from '@progress/kendo-react-listview';
+import { ListView } from '@progress/kendo-react-listview';
 
-import { Grid, GridColumn } from '@progress/kendo-react-grid';
-
-import gridData from './data.js';
+import gridData from './shared-data';
 
 const handleDragOver = (e) => {
   e.preventDefault();
@@ -87,4 +84,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/scheduler/dnd-from-listview/main.jsx b/docs/knowledge-base/examples/scheduler/dnd-from-listview/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/scheduler/dnd-from-listview/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/scheduler/export-to-ical/main.jsx b/docs/knowledge-base/examples/scheduler/export-to-ical/app.jsx
similarity index 92%
rename from knowledge-base/examples/scheduler/export-to-ical/main.jsx
rename to docs/knowledge-base/examples/scheduler/export-to-ical/app.jsx
index 5969148a..84f9bf57 100644
--- a/knowledge-base/examples/scheduler/export-to-ical/main.jsx
+++ b/docs/knowledge-base/examples/scheduler/export-to-ical/app.jsx
@@ -1,11 +1,10 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import {
     Scheduler,
     WeekView,
     SchedulerHeader,
 } from "@progress/kendo-react-scheduler";
-import { sampleData, displayDate } from "./events-utc.js";
+import { sampleData, displayDate } from "./shared-events-utc";
 
 
 import ICAL from "ical.js";
@@ -106,4 +105,4 @@ const App = () => {
     );
 };
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/scheduler/export-to-ical/main.jsx b/docs/knowledge-base/examples/scheduler/export-to-ical/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/scheduler/export-to-ical/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/scheduler/icon-in-group-header/main.jsx b/docs/knowledge-base/examples/scheduler/icon-in-group-header/app.jsx
similarity index 93%
rename from knowledge-base/examples/scheduler/icon-in-group-header/main.jsx
rename to docs/knowledge-base/examples/scheduler/icon-in-group-header/app.jsx
index 9f73a7c3..2caa601d 100644
--- a/knowledge-base/examples/scheduler/icon-in-group-header/main.jsx
+++ b/docs/knowledge-base/examples/scheduler/icon-in-group-header/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Scheduler, DayView } from '@progress/kendo-react-scheduler';
 import { data, defaultDate } from './data';
 const group = {
@@ -75,4 +74,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/scheduler/icon-in-group-header/data.js b/docs/knowledge-base/examples/scheduler/icon-in-group-header/data.js
similarity index 100%
rename from knowledge-base/examples/scheduler/icon-in-group-header/data.js
rename to docs/knowledge-base/examples/scheduler/icon-in-group-header/data.js
diff --git a/docs/knowledge-base/examples/scheduler/icon-in-group-header/main.jsx b/docs/knowledge-base/examples/scheduler/icon-in-group-header/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/scheduler/icon-in-group-header/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/scheduler/recurring-event-form-editor/main.jsx b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/app.jsx
similarity index 96%
rename from knowledge-base/examples/scheduler/recurring-event-form-editor/main.jsx
rename to docs/knowledge-base/examples/scheduler/recurring-event-form-editor/app.jsx
index 32ba55e9..eb89460f 100644
--- a/knowledge-base/examples/scheduler/recurring-event-form-editor/main.jsx
+++ b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
     Scheduler,
     DayView,
@@ -79,4 +78,5 @@ const App = () => {
         </Scheduler>
     );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-dialog.jsx b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-dialog.jsx
similarity index 100%
rename from knowledge-base/examples/scheduler/recurring-event-form-editor/custom-dialog.jsx
rename to docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-dialog.jsx
diff --git a/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-form-editor.jsx b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-form-editor.jsx
similarity index 100%
rename from knowledge-base/examples/scheduler/recurring-event-form-editor/custom-form-editor.jsx
rename to docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-form-editor.jsx
diff --git a/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-form.jsx b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-form.jsx
similarity index 100%
rename from knowledge-base/examples/scheduler/recurring-event-form-editor/custom-form.jsx
rename to docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-form.jsx
diff --git a/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-item.jsx b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-item.jsx
similarity index 100%
rename from knowledge-base/examples/scheduler/recurring-event-form-editor/custom-item.jsx
rename to docs/knowledge-base/examples/scheduler/recurring-event-form-editor/custom-item.jsx
diff --git a/knowledge-base/examples/scheduler/recurring-event-form-editor/data.js b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/data.js
similarity index 100%
rename from knowledge-base/examples/scheduler/recurring-event-form-editor/data.js
rename to docs/knowledge-base/examples/scheduler/recurring-event-form-editor/data.js
diff --git a/knowledge-base/examples/scheduler/recurring-event-form-editor/editors.jsx b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/editors.jsx
similarity index 100%
rename from knowledge-base/examples/scheduler/recurring-event-form-editor/editors.jsx
rename to docs/knowledge-base/examples/scheduler/recurring-event-form-editor/editors.jsx
diff --git a/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/main.jsx b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/scheduler/recurring-event-form-editor/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/scheduler/start-end-dates/main.jsx b/docs/knowledge-base/examples/scheduler/start-end-dates/app.jsx
similarity index 90%
rename from knowledge-base/examples/scheduler/start-end-dates/main.jsx
rename to docs/knowledge-base/examples/scheduler/start-end-dates/app.jsx
index c2a5e14b..f5df0a36 100644
--- a/knowledge-base/examples/scheduler/start-end-dates/main.jsx
+++ b/docs/knowledge-base/examples/scheduler/start-end-dates/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   Scheduler,
   AgendaView,
@@ -8,7 +7,7 @@ import {
   WeekView,
   MonthView,
 } from '@progress/kendo-react-scheduler';
-import { sampleData, displayDate } from './events-utc';
+import { sampleData, displayDate } from './shared-events-utc';
 
 const App = () => {
   const [start, setStart] = React.useState('');
@@ -61,4 +60,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/scheduler/start-end-dates/main.jsx b/docs/knowledge-base/examples/scheduler/start-end-dates/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/scheduler/start-end-dates/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/shared/countries.js b/docs/knowledge-base/examples/shared/shared-countries.js
similarity index 100%
rename from knowledge-base/examples/shared/countries.js
rename to docs/knowledge-base/examples/shared/shared-countries.js
diff --git a/knowledge-base/examples/shared/data.js b/docs/knowledge-base/examples/shared/shared-data.js
similarity index 100%
rename from knowledge-base/examples/shared/data.js
rename to docs/knowledge-base/examples/shared/shared-data.js
diff --git a/knowledge-base/examples/shared/events-utc.js b/docs/knowledge-base/examples/shared/shared-events-utc.js
similarity index 100%
rename from knowledge-base/examples/shared/events-utc.js
rename to docs/knowledge-base/examples/shared/shared-events-utc.js
diff --git a/knowledge-base/examples/shared/products-loader.jsx b/docs/knowledge-base/examples/shared/shared-products-loader.jsx
similarity index 95%
rename from knowledge-base/examples/shared/products-loader.jsx
rename to docs/knowledge-base/examples/shared/shared-products-loader.jsx
index 44414e47..0b119e54 100644
--- a/knowledge-base/examples/shared/products-loader.jsx
+++ b/docs/knowledge-base/examples/shared/shared-products-loader.jsx
@@ -1,6 +1,6 @@
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+
 import { toODataString } from '@progress/kendo-data-query';
 
 export class ProductsLoader extends React.Component {
diff --git a/knowledge-base/examples/shared/products-with-sections.json b/docs/knowledge-base/examples/shared/shared-products-with-sections.json
similarity index 100%
rename from knowledge-base/examples/shared/products-with-sections.json
rename to docs/knowledge-base/examples/shared/shared-products-with-sections.json
diff --git a/knowledge-base/examples/shared/products.json b/docs/knowledge-base/examples/shared/shared-products.json
similarity index 100%
rename from knowledge-base/examples/shared/products.json
rename to docs/knowledge-base/examples/shared/shared-products.json
diff --git a/knowledge-base/examples/shared/sample-products.js b/docs/knowledge-base/examples/shared/shared-sample-products.js
similarity index 100%
rename from knowledge-base/examples/shared/sample-products.js
rename to docs/knowledge-base/examples/shared/shared-sample-products.js
diff --git a/knowledge-base/examples/shared/treeListData.js b/docs/knowledge-base/examples/shared/shared-treeListData.js
similarity index 100%
rename from knowledge-base/examples/shared/treeListData.js
rename to docs/knowledge-base/examples/shared/shared-treeListData.js
diff --git a/knowledge-base/examples/shared/treelist-data.js b/docs/knowledge-base/examples/shared/shared-treelist-data.js
similarity index 100%
rename from knowledge-base/examples/shared/treelist-data.js
rename to docs/knowledge-base/examples/shared/shared-treelist-data.js
diff --git a/knowledge-base/examples/splitbutton/disable-left-part/main.jsx b/docs/knowledge-base/examples/splitbutton/disable-left-part/app.jsx
similarity index 73%
rename from knowledge-base/examples/splitbutton/disable-left-part/main.jsx
rename to docs/knowledge-base/examples/splitbutton/disable-left-part/app.jsx
index e5ddff24..38a00f2f 100644
--- a/knowledge-base/examples/splitbutton/disable-left-part/main.jsx
+++ b/docs/knowledge-base/examples/splitbutton/disable-left-part/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { SplitButton } from '@progress/kendo-react-buttons';
 
 const App = () => {
@@ -11,4 +10,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/splitbutton/disable-left-part/main.jsx b/docs/knowledge-base/examples/splitbutton/disable-left-part/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/splitbutton/disable-left-part/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/splitbutton/disable-left-part/styles.css b/docs/knowledge-base/examples/splitbutton/disable-left-part/styles.css
similarity index 100%
rename from knowledge-base/examples/splitbutton/disable-left-part/styles.css
rename to docs/knowledge-base/examples/splitbutton/disable-left-part/styles.css
diff --git a/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/main.jsx b/docs/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/app.jsx
similarity index 96%
rename from knowledge-base/examples/treelist/custom-columnmenu-checkboxes/main.jsx
rename to docs/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/app.jsx
index 9957b016..5c410d64 100644
--- a/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/main.jsx
+++ b/docs/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/app.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import {
   TreeList,
   filterBy,
@@ -101,4 +100,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/checkboxFilterColumnMenu.jsx b/docs/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/checkboxFilterColumnMenu.jsx
similarity index 100%
rename from knowledge-base/examples/treelist/custom-columnmenu-checkboxes/checkboxFilterColumnMenu.jsx
rename to docs/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/checkboxFilterColumnMenu.jsx
diff --git a/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/data.js b/docs/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/data.js
similarity index 100%
rename from knowledge-base/examples/treelist/custom-columnmenu-checkboxes/data.js
rename to docs/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/data.js
diff --git a/docs/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/main.jsx b/docs/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treelist/custom-columnmenu-checkboxes/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treelist/custom-columnmenu-date-filter/main.jsx b/docs/knowledge-base/examples/treelist/custom-columnmenu-date-filter/app.jsx
similarity index 93%
rename from knowledge-base/examples/treelist/custom-columnmenu-date-filter/main.jsx
rename to docs/knowledge-base/examples/treelist/custom-columnmenu-date-filter/app.jsx
index 00cde9ca..f425cc12 100644
--- a/knowledge-base/examples/treelist/custom-columnmenu-date-filter/main.jsx
+++ b/docs/knowledge-base/examples/treelist/custom-columnmenu-date-filter/app.jsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import {
   TreeList,
   filterBy,
@@ -10,7 +9,7 @@ import {
 
 import { ColumnMenuCustomDateColumn } from "./dateColumnMenu.jsx";
 
-import employees from "./treeListData";
+import employees from "./shared-treeListData";
 
 const subItemsField = "employees";
 const expandField = "expanded";
@@ -107,4 +106,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/knowledge-base/examples/treelist/custom-columnmenu-date-filter/dateColumnMenu.jsx b/docs/knowledge-base/examples/treelist/custom-columnmenu-date-filter/dateColumnMenu.jsx
similarity index 100%
rename from knowledge-base/examples/treelist/custom-columnmenu-date-filter/dateColumnMenu.jsx
rename to docs/knowledge-base/examples/treelist/custom-columnmenu-date-filter/dateColumnMenu.jsx
diff --git a/docs/knowledge-base/examples/treelist/custom-columnmenu-date-filter/main.jsx b/docs/knowledge-base/examples/treelist/custom-columnmenu-date-filter/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treelist/custom-columnmenu-date-filter/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treelist/different-row-color-per-level/main.jsx b/docs/knowledge-base/examples/treelist/different-row-color-per-level/app.jsx
similarity index 96%
rename from knowledge-base/examples/treelist/different-row-color-per-level/main.jsx
rename to docs/knowledge-base/examples/treelist/different-row-color-per-level/app.jsx
index 04ef8061..330be5ac 100644
--- a/knowledge-base/examples/treelist/different-row-color-per-level/main.jsx
+++ b/docs/knowledge-base/examples/treelist/different-row-color-per-level/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   TreeList,
   orderBy,
@@ -124,4 +123,5 @@ const App = () => {
     />
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/knowledge-base/examples/treelist/different-row-color-per-level/data.js b/docs/knowledge-base/examples/treelist/different-row-color-per-level/data.js
similarity index 100%
rename from knowledge-base/examples/treelist/different-row-color-per-level/data.js
rename to docs/knowledge-base/examples/treelist/different-row-color-per-level/data.js
diff --git a/docs/knowledge-base/examples/treelist/different-row-color-per-level/main.jsx b/docs/knowledge-base/examples/treelist/different-row-color-per-level/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treelist/different-row-color-per-level/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treelist/drag-and-drop/main.jsx b/docs/knowledge-base/examples/treelist/drag-and-drop/app.jsx
similarity index 94%
rename from knowledge-base/examples/treelist/drag-and-drop/main.jsx
rename to docs/knowledge-base/examples/treelist/drag-and-drop/app.jsx
index 49ac2e31..2c39b901 100644
--- a/knowledge-base/examples/treelist/drag-and-drop/main.jsx
+++ b/docs/knowledge-base/examples/treelist/drag-and-drop/app.jsx
@@ -1,6 +1,4 @@
-
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
     TreeList, getItemPath
 } from '@progress/kendo-react-treelist';
@@ -146,8 +144,5 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(
-    <App />,
-    document.querySelector('my-app')
-);
+export default App;
 
diff --git a/docs/knowledge-base/examples/treelist/drag-and-drop/main.jsx b/docs/knowledge-base/examples/treelist/drag-and-drop/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treelist/drag-and-drop/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treelist/drag-drop-to-element/main.jsx b/docs/knowledge-base/examples/treelist/drag-drop-to-element/app.jsx
similarity index 94%
rename from knowledge-base/examples/treelist/drag-drop-to-element/main.jsx
rename to docs/knowledge-base/examples/treelist/drag-drop-to-element/app.jsx
index ea08e336..a4c363fb 100644
--- a/knowledge-base/examples/treelist/drag-drop-to-element/main.jsx
+++ b/docs/knowledge-base/examples/treelist/drag-drop-to-element/app.jsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 import { TreeList } from '@progress/kendo-react-treelist';
 import gridData from './data.js';
@@ -73,4 +71,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/treelist/drag-drop-to-element/data.js b/docs/knowledge-base/examples/treelist/drag-drop-to-element/data.js
similarity index 100%
rename from knowledge-base/examples/treelist/drag-drop-to-element/data.js
rename to docs/knowledge-base/examples/treelist/drag-drop-to-element/data.js
diff --git a/docs/knowledge-base/examples/treelist/drag-drop-to-element/main.jsx b/docs/knowledge-base/examples/treelist/drag-drop-to-element/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treelist/drag-drop-to-element/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treelist/pager-at-bottom/main.jsx b/docs/knowledge-base/examples/treelist/pager-at-bottom/app.jsx
similarity index 92%
rename from knowledge-base/examples/treelist/pager-at-bottom/main.jsx
rename to docs/knowledge-base/examples/treelist/pager-at-bottom/app.jsx
index 99eda485..a02ab747 100644
--- a/knowledge-base/examples/treelist/pager-at-bottom/main.jsx
+++ b/docs/knowledge-base/examples/treelist/pager-at-bottom/app.jsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import {
   TreeList,
   mapTreeItem,
@@ -8,7 +7,7 @@ import {
 
 import { TreeListPager } from "./pager.jsx";
 
-import { generateData } from "./treelist-data";
+import { generateData } from "./shared-treelist-data";
 
 const numberOfColumns = 4;
 const columnWidth = 200;
@@ -88,4 +87,4 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/treelist/pager-at-bottom/main.jsx b/docs/knowledge-base/examples/treelist/pager-at-bottom/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treelist/pager-at-bottom/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treelist/pager-at-bottom/pager.jsx b/docs/knowledge-base/examples/treelist/pager-at-bottom/pager.jsx
similarity index 100%
rename from knowledge-base/examples/treelist/pager-at-bottom/pager.jsx
rename to docs/knowledge-base/examples/treelist/pager-at-bottom/pager.jsx
diff --git a/knowledge-base/examples/treelist/treelist-custom-editor/MyCustomTreeListTextEditor.js b/docs/knowledge-base/examples/treelist/treelist-custom-editor/MyCustomTreeListTextEditor.jsx
similarity index 100%
rename from knowledge-base/examples/treelist/treelist-custom-editor/MyCustomTreeListTextEditor.js
rename to docs/knowledge-base/examples/treelist/treelist-custom-editor/MyCustomTreeListTextEditor.jsx
diff --git a/knowledge-base/examples/treelist/treelist-custom-editor/main.jsx b/docs/knowledge-base/examples/treelist/treelist-custom-editor/app.jsx
similarity index 97%
rename from knowledge-base/examples/treelist/treelist-custom-editor/main.jsx
rename to docs/knowledge-base/examples/treelist/treelist-custom-editor/app.jsx
index c09a0e8e..c5de1144 100644
--- a/knowledge-base/examples/treelist/treelist-custom-editor/main.jsx
+++ b/docs/knowledge-base/examples/treelist/treelist-custom-editor/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   TreeList,
   TreeListToolbar,
@@ -196,4 +195,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/treelist/treelist-custom-editor/data.js b/docs/knowledge-base/examples/treelist/treelist-custom-editor/data.js
similarity index 100%
rename from knowledge-base/examples/treelist/treelist-custom-editor/data.js
rename to docs/knowledge-base/examples/treelist/treelist-custom-editor/data.js
diff --git a/docs/knowledge-base/examples/treelist/treelist-custom-editor/main.jsx b/docs/knowledge-base/examples/treelist/treelist-custom-editor/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treelist/treelist-custom-editor/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treelist/treelist-custom-editor/my-command-cell.jsx b/docs/knowledge-base/examples/treelist/treelist-custom-editor/my-command-cell.jsx
similarity index 100%
rename from knowledge-base/examples/treelist/treelist-custom-editor/my-command-cell.jsx
rename to docs/knowledge-base/examples/treelist/treelist-custom-editor/my-command-cell.jsx
diff --git a/knowledge-base/examples/treelist/treelist-custom-expand-cell/main.jsx b/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/app.jsx
similarity index 96%
rename from knowledge-base/examples/treelist/treelist-custom-expand-cell/main.jsx
rename to docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/app.jsx
index 962ded45..bfb07625 100644
--- a/knowledge-base/examples/treelist/treelist-custom-expand-cell/main.jsx
+++ b/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   TreeList,
   mapTree,
@@ -108,4 +107,5 @@ const App = () => {
     </div>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/knowledge-base/examples/treelist/treelist-custom-expand-cell/data.js b/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/data.js
similarity index 100%
rename from knowledge-base/examples/treelist/treelist-custom-expand-cell/data.js
rename to docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/data.js
diff --git a/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/main.jsx b/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treelist/treelist-custom-expand-cell/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treelist/treelist-focus-input-on-edit/main.jsx b/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/app.jsx
similarity index 98%
rename from knowledge-base/examples/treelist/treelist-focus-input-on-edit/main.jsx
rename to docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/app.jsx
index 750373fd..221e0367 100644
--- a/knowledge-base/examples/treelist/treelist-focus-input-on-edit/main.jsx
+++ b/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   TreeList,
   TreeListToolbar,
@@ -237,4 +236,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/treelist/treelist-focus-input-on-edit/data.js b/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/data.js
similarity index 100%
rename from knowledge-base/examples/treelist/treelist-focus-input-on-edit/data.js
rename to docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/data.js
diff --git a/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/main.jsx b/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treelist/treelist-focus-input-on-edit/my-command-cell.jsx b/docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/my-command-cell.jsx
similarity index 100%
rename from knowledge-base/examples/treelist/treelist-focus-input-on-edit/my-command-cell.jsx
rename to docs/knowledge-base/examples/treelist/treelist-focus-input-on-edit/my-command-cell.jsx
diff --git a/knowledge-base/examples/treelist/treelist-inline-editing-validation/main.jsx b/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/app.jsx
similarity index 98%
rename from knowledge-base/examples/treelist/treelist-inline-editing-validation/main.jsx
rename to docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/app.jsx
index afa0c912..c2db9d78 100644
--- a/knowledge-base/examples/treelist/treelist-inline-editing-validation/main.jsx
+++ b/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   TreeList,
   TreeListToolbar,
@@ -209,4 +208,5 @@ const App = () => {
     />
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/knowledge-base/examples/treelist/treelist-inline-editing-validation/data.js b/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/data.js
similarity index 100%
rename from knowledge-base/examples/treelist/treelist-inline-editing-validation/data.js
rename to docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/data.js
diff --git a/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/main.jsx b/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treelist/treelist-inline-editing-validation/my-command-cell.jsx b/docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/my-command-cell.jsx
similarity index 100%
rename from knowledge-base/examples/treelist/treelist-inline-editing-validation/my-command-cell.jsx
rename to docs/knowledge-base/examples/treelist/treelist-inline-editing-validation/my-command-cell.jsx
diff --git a/knowledge-base/examples/treelist/treelist-locked-columns-resizing/main.jsx b/docs/knowledge-base/examples/treelist/treelist-locked-columns-resizing/app.jsx
similarity index 95%
rename from knowledge-base/examples/treelist/treelist-locked-columns-resizing/main.jsx
rename to docs/knowledge-base/examples/treelist/treelist-locked-columns-resizing/app.jsx
index 342955fd..80cb362c 100644
--- a/knowledge-base/examples/treelist/treelist-locked-columns-resizing/main.jsx
+++ b/docs/knowledge-base/examples/treelist/treelist-locked-columns-resizing/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   TreeList,
   mapTree,
@@ -106,4 +105,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/knowledge-base/examples/treelist/treelist-locked-columns-resizing/data.js b/docs/knowledge-base/examples/treelist/treelist-locked-columns-resizing/data.js
similarity index 100%
rename from knowledge-base/examples/treelist/treelist-locked-columns-resizing/data.js
rename to docs/knowledge-base/examples/treelist/treelist-locked-columns-resizing/data.js
diff --git a/docs/knowledge-base/examples/treelist/treelist-locked-columns-resizing/main.jsx b/docs/knowledge-base/examples/treelist/treelist-locked-columns-resizing/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treelist/treelist-locked-columns-resizing/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treeview/treeview-adding-nodes/main.jsx b/docs/knowledge-base/examples/treeview/treeview-adding-nodes/app.jsx
similarity index 95%
rename from knowledge-base/examples/treeview/treeview-adding-nodes/main.jsx
rename to docs/knowledge-base/examples/treeview/treeview-adding-nodes/app.jsx
index 2e58cb41..1b6f6cb1 100644
--- a/knowledge-base/examples/treeview/treeview-adding-nodes/main.jsx
+++ b/docs/knowledge-base/examples/treeview/treeview-adding-nodes/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { TreeView } from '@progress/kendo-react-treeview';
 import { Button } from '@progress/kendo-react-buttons';
 import { Window } from '@progress/kendo-react-dialogs';
@@ -96,4 +95,5 @@ const App = () => {
     </>
   );
 };
-ReactDOM.render(<App />, document.querySelector('my-app'));
+
+export default App;
diff --git a/docs/knowledge-base/examples/treeview/treeview-adding-nodes/main.jsx b/docs/knowledge-base/examples/treeview/treeview-adding-nodes/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treeview/treeview-adding-nodes/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treeview/treeview-deleting/main.jsx b/docs/knowledge-base/examples/treeview/treeview-deleting/app.jsx
similarity index 94%
rename from knowledge-base/examples/treeview/treeview-deleting/main.jsx
rename to docs/knowledge-base/examples/treeview/treeview-deleting/app.jsx
index 119f340b..2156da15 100644
--- a/knowledge-base/examples/treeview/treeview-deleting/main.jsx
+++ b/docs/knowledge-base/examples/treeview/treeview-deleting/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { TreeView } from '@progress/kendo-react-treeview';
 
 const MyContext = React.createContext({
@@ -91,4 +90,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/treeview/treeview-deleting/main.jsx b/docs/knowledge-base/examples/treeview/treeview-deleting/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treeview/treeview-deleting/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treeview/treeview-editing/main.jsx b/docs/knowledge-base/examples/treeview/treeview-editing/app.jsx
similarity index 89%
rename from knowledge-base/examples/treeview/treeview-editing/main.jsx
rename to docs/knowledge-base/examples/treeview/treeview-editing/app.jsx
index 6edbb2a8..77b9db29 100644
--- a/knowledge-base/examples/treeview/treeview-editing/main.jsx
+++ b/docs/knowledge-base/examples/treeview/treeview-editing/app.jsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
 import { TreeView } from '@progress/kendo-react-treeview';
 import '@progress/kendo-react-animation';
 
@@ -79,4 +77,4 @@ class App extends React.Component {
   };
 }
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/treeview/treeview-editing/main.jsx b/docs/knowledge-base/examples/treeview/treeview-editing/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treeview/treeview-editing/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/treeview/treeview-search/main.jsx b/docs/knowledge-base/examples/treeview/treeview-search/app.jsx
similarity index 89%
rename from knowledge-base/examples/treeview/treeview-search/main.jsx
rename to docs/knowledge-base/examples/treeview/treeview-search/app.jsx
index 4ce244e7..b9510954 100644
--- a/knowledge-base/examples/treeview/treeview-search/main.jsx
+++ b/docs/knowledge-base/examples/treeview/treeview-search/app.jsx
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
 import { TreeView } from '@progress/kendo-react-treeview'
 import '@progress/kendo-react-animation'
 
@@ -56,8 +54,5 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <App />,
-  document.querySelector('my-app')
-);
+export default App;
 
diff --git a/docs/knowledge-base/examples/treeview/treeview-search/main.jsx b/docs/knowledge-base/examples/treeview/treeview-search/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/treeview/treeview-search/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/upload/paste-image/main.jsx b/docs/knowledge-base/examples/upload/paste-image/app.jsx
similarity index 92%
rename from knowledge-base/examples/upload/paste-image/main.jsx
rename to docs/knowledge-base/examples/upload/paste-image/app.jsx
index 20ef07d1..045495e1 100644
--- a/knowledge-base/examples/upload/paste-image/main.jsx
+++ b/docs/knowledge-base/examples/upload/paste-image/app.jsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import { Upload } from "@progress/kendo-react-upload";
 import { guid } from "@progress/kendo-react-common";
 
@@ -84,4 +83,4 @@ class App extends React.Component {
     }
 }
 
-ReactDOM.render(<App />, document.querySelector("my-app"));
+export default App;
diff --git a/docs/knowledge-base/examples/upload/paste-image/main.jsx b/docs/knowledge-base/examples/upload/paste-image/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/upload/paste-image/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/upload/upload-change-messages/main.jsx b/docs/knowledge-base/examples/upload/upload-change-messages/app.jsx
similarity index 93%
rename from knowledge-base/examples/upload/upload-change-messages/main.jsx
rename to docs/knowledge-base/examples/upload/upload-change-messages/app.jsx
index 7fa70c6b..4bbc38a0 100644
--- a/knowledge-base/examples/upload/upload-change-messages/main.jsx
+++ b/docs/knowledge-base/examples/upload/upload-change-messages/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Upload } from '@progress/kendo-react-upload';
 import { LocalizationProvider, loadMessages } from '@progress/kendo-react-intl';
 const App = () => {
@@ -56,4 +55,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/upload/upload-change-messages/main.jsx b/docs/knowledge-base/examples/upload/upload-change-messages/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/upload/upload-change-messages/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/examples/upload/upload-icon-for-upload-button/main.jsx b/docs/knowledge-base/examples/upload/upload-icon-for-upload-button/app.jsx
similarity index 90%
rename from knowledge-base/examples/upload/upload-icon-for-upload-button/main.jsx
rename to docs/knowledge-base/examples/upload/upload-icon-for-upload-button/app.jsx
index e9c3dbe1..cbf372f8 100644
--- a/knowledge-base/examples/upload/upload-icon-for-upload-button/main.jsx
+++ b/docs/knowledge-base/examples/upload/upload-icon-for-upload-button/app.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { Upload } from '@progress/kendo-react-upload';
 
 const App = () => {
@@ -31,4 +30,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.querySelector('my-app'));
+export default App;
diff --git a/docs/knowledge-base/examples/upload/upload-icon-for-upload-button/main.jsx b/docs/knowledge-base/examples/upload/upload-icon-for-upload-button/main.jsx
new file mode 100644
index 00000000..36d8526e
--- /dev/null
+++ b/docs/knowledge-base/examples/upload/upload-icon-for-upload-button/main.jsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app'
+
+const root = createRoot(document.querySelector('my-app'));
+root.render(<App />);
\ No newline at end of file
diff --git a/knowledge-base/excel-conditional-cell-styling.md b/docs/knowledge-base/excel-conditional-cell-styling.md
similarity index 100%
rename from knowledge-base/excel-conditional-cell-styling.md
rename to docs/knowledge-base/excel-conditional-cell-styling.md
diff --git a/knowledge-base/excel-export-of-both-parent-and-child-grid-data.md b/docs/knowledge-base/excel-export-of-both-parent-and-child-grid-data.md
similarity index 88%
rename from knowledge-base/excel-export-of-both-parent-and-child-grid-data.md
rename to docs/knowledge-base/excel-export-of-both-parent-and-child-grid-data.md
index 53a227be..4c6f27aa 100644
--- a/knowledge-base/excel-export-of-both-parent-and-child-grid-data.md
+++ b/docs/knowledge-base/excel-export-of-both-parent-and-child-grid-data.md
@@ -35,5 +35,6 @@ This requires using a chain of Promises to request the data for all child Grids
 This is an example showcasing this. The example contains comments for the most specific parts:
 
 {% meta id:index height:760 %}
-{% embed_file grid/excel-export-parent-child/main.jsx preview %}
+{% embed_file grid/excel-export-parent-child/app.jsx preview %}
+{% embed_file grid/excel-export-parent-child/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/excel-export-with-column-reorder.md b/docs/knowledge-base/excel-export-with-column-reorder.md
similarity index 87%
rename from knowledge-base/excel-export-with-column-reorder.md
rename to docs/knowledge-base/excel-export-with-column-reorder.md
index 57d06cc3..985091f8 100644
--- a/knowledge-base/excel-export-with-column-reorder.md
+++ b/docs/knowledge-base/excel-export-with-column-reorder.md
@@ -34,7 +34,8 @@ This requires setting the columns inside the ExcelExport, then sorting and updat
 This is an example showcasing this approach:
 
 {% meta id:index height:600 %}
-{% embed_file grid/excel-export-with-column-reorder/main.jsx preview %}
+{% embed_file grid/excel-export-with-column-reorder/app.jsx preview %}
+{% embed_file grid/excel-export-with-column-reorder/main.jsx %}
 {% embed_file grid/excel-export-with-column-reorder/products.json %}
 {% endmeta %}
 
diff --git a/knowledge-base/excel-export-with-custom-header-footer.md b/docs/knowledge-base/excel-export-with-custom-header-footer.md
similarity index 88%
rename from knowledge-base/excel-export-with-custom-header-footer.md
rename to docs/knowledge-base/excel-export-with-custom-header-footer.md
index c4ff4434..a8d9ee16 100644
--- a/knowledge-base/excel-export-with-custom-header-footer.md
+++ b/docs/knowledge-base/excel-export-with-custom-header-footer.md
@@ -41,8 +41,9 @@ The following example shows how to:
 3. Freeze the first two rows in order to have the header and the column titles to be visible when scrolling.
 
 {% meta id:index height:640 %}
-{% embed_file grid/excel-export-header-footer/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/excel-export-header-footer/app.jsx preview %}
+{% embed_file grid/excel-export-header-footer/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
 
 
diff --git a/knowledge-base/export-to-excel-multiple-grids.md b/docs/knowledge-base/export-to-excel-multiple-grids.md
similarity index 81%
rename from knowledge-base/export-to-excel-multiple-grids.md
rename to docs/knowledge-base/export-to-excel-multiple-grids.md
index 058a4e13..bb922c8a 100644
--- a/knowledge-base/export-to-excel-multiple-grids.md
+++ b/docs/knowledge-base/export-to-excel-multiple-grids.md
@@ -31,6 +31,7 @@ How can I export multiple KendoReact Grids (tables) upon a single click action?
 Set the second Grid sheet as the second sheet of the first document and export only the first Grid.
 
 {% meta id:index height:760 %}
-{% embed_file grid/multiple-grid-export-excel/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/multiple-grid-export-excel/app.jsx preview %}
+{% embed_file grid/multiple-grid-export-excel/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/file-upload-in-form.md b/docs/knowledge-base/file-upload-in-form.md
similarity index 90%
rename from knowledge-base/file-upload-in-form.md
rename to docs/knowledge-base/file-upload-in-form.md
index 622ae565..9e51e052 100644
--- a/knowledge-base/file-upload-in-form.md
+++ b/docs/knowledge-base/file-upload-in-form.md
@@ -36,5 +36,6 @@ In order to achieve this, the Upload files data has to be added to the Form data
 
 
 {% meta id height:460 %}
-{% embed_file form/file-upload/main.jsx preview %}
+{% embed_file form/file-upload/app.jsx preview %}
+{% embed_file form/file-upload/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/filter-the-grid-with-checkboxes.md b/docs/knowledge-base/filter-the-grid-with-checkboxes.md
similarity index 87%
rename from knowledge-base/filter-the-grid-with-checkboxes.md
rename to docs/knowledge-base/filter-the-grid-with-checkboxes.md
index 865af07c..10750c97 100644
--- a/knowledge-base/filter-the-grid-with-checkboxes.md
+++ b/docs/knowledge-base/filter-the-grid-with-checkboxes.md
@@ -39,7 +39,8 @@ This is already a built-in option of the Grid and the example can be observed [h
 In KendoReact, you can programmatically implement the data filtering with checkboxes for the Grid by using the [ColumnMenu]({% slug column_menu_grid %}) component.
 
 {% meta id:index height:580 %}
-{% embed_file grid/grid-filter-checkbox/main.jsx preview %}
+{% embed_file grid/grid-filter-checkbox/app.jsx preview %}
+{% embed_file grid/grid-filter-checkbox/main.jsx %}
 {% embed_file grid/grid-filter-checkbox/customColumnMenu.jsx %}
-{% embed_file shared/products.json %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/form-getting-editor-ref-and-keydown.md b/docs/knowledge-base/form-getting-editor-ref-and-keydown.md
similarity index 88%
rename from knowledge-base/form-getting-editor-ref-and-keydown.md
rename to docs/knowledge-base/form-getting-editor-ref-and-keydown.md
index 38110ee1..94df3bac 100644
--- a/knowledge-base/form-getting-editor-ref-and-keydown.md
+++ b/docs/knowledge-base/form-getting-editor-ref-and-keydown.md
@@ -38,5 +38,6 @@ Following is an example demonstrating this approach:
 
 
 {% meta id height:360 %}
-{% embed_file form/getting-editor-ref-and-keydown/main.jsx preview %}
+{% embed_file form/getting-editor-ref-and-keydown/app.jsx preview %}
+{% embed_file form/getting-editor-ref-and-keydown/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/form-reset-and-change-initial-values.md b/docs/knowledge-base/form-reset-and-change-initial-values.md
similarity index 93%
rename from knowledge-base/form-reset-and-change-initial-values.md
rename to docs/knowledge-base/form-reset-and-change-initial-values.md
index 04dde585..ade96240 100644
--- a/knowledge-base/form-reset-and-change-initial-values.md
+++ b/docs/knowledge-base/form-reset-and-change-initial-values.md
@@ -40,5 +40,6 @@ Following is an example demonstrating this approach:
 
 
 {% meta id height:460 %}
-{% embed_file form/form-reset-and-change-initial-values/main.jsx preview %}
+{% embed_file form/form-reset-and-change-initial-values/app.jsx preview %}
+{% embed_file form/form-reset-and-change-initial-values/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/gantt-scroll-to-today.md b/docs/knowledge-base/gantt-scroll-to-today.md
similarity index 91%
rename from knowledge-base/gantt-scroll-to-today.md
rename to docs/knowledge-base/gantt-scroll-to-today.md
index a5936f11..3f72cd46 100644
--- a/knowledge-base/gantt-scroll-to-today.md
+++ b/docs/knowledge-base/gantt-scroll-to-today.md
@@ -38,6 +38,7 @@ Following is an example demonstrating this approach:
 
 
 {% meta id height:660 %}
-{% embed_file gantt/scroll-to-today/main.jsx preview %}
+{% embed_file gantt/scroll-to-today/app.jsx preview %}
+{% embed_file gantt/scroll-to-today/main.jsx %}
 {% embed_file gantt/scroll-to-today/data.js %}
 {% endmeta %}
diff --git a/knowledge-base/grid-add-clear-filters-button.md b/docs/knowledge-base/grid-add-clear-filters-button.md
similarity index 88%
rename from knowledge-base/grid-add-clear-filters-button.md
rename to docs/knowledge-base/grid-add-clear-filters-button.md
index 1b547e40..2558bb1e 100644
--- a/knowledge-base/grid-add-clear-filters-button.md
+++ b/docs/knowledge-base/grid-add-clear-filters-button.md
@@ -34,5 +34,6 @@ For achieving the desired result a Button component can be placed within the Gri
 This is an example showcasing how to limit the value:
 
 {% meta height:360 %}
-{% embed_file grid/grid-add-clear-filters-button/main.jsx preview %}
+{% embed_file grid/grid-add-clear-filters-button/app.jsx preview %}
+{% embed_file grid/grid-add-clear-filters-button/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/grid-add-dirty-indicator.md b/docs/knowledge-base/grid-add-dirty-indicator.md
similarity index 92%
rename from knowledge-base/grid-add-dirty-indicator.md
rename to docs/knowledge-base/grid-add-dirty-indicator.md
index 63b07ab4..a6c7155a 100644
--- a/knowledge-base/grid-add-dirty-indicator.md
+++ b/docs/knowledge-base/grid-add-dirty-indicator.md
@@ -38,7 +38,8 @@ The custom style for the dirty cells is within the "styles.css" file targeting t
 This is an example showcasing this approach:
 
 {% meta id:index height:480 %}
-{% embed_file grid/grid-add-dirty-indicator/main.jsx preview %}
+{% embed_file grid/grid-add-dirty-indicator/app.jsx preview %}
+{% embed_file grid/grid-add-dirty-indicator/main.jsx %}
 {% embed_file grid/grid-add-dirty-indicator/sample-products.json %}
 {% embed_file grid/grid-add-dirty-indicator/renderers.jsx %}
 {% embed_file grid/grid-add-dirty-indicator/styles.css %}
diff --git a/knowledge-base/grid-add-empty-rows.md b/docs/knowledge-base/grid-add-empty-rows.md
similarity index 90%
rename from knowledge-base/grid-add-empty-rows.md
rename to docs/knowledge-base/grid-add-empty-rows.md
index 872755b3..6841e572 100644
--- a/knowledge-base/grid-add-empty-rows.md
+++ b/docs/knowledge-base/grid-add-empty-rows.md
@@ -37,5 +37,6 @@ Find the last TR element within the "rowRender" of the Grid and return React.Fra
 Following is an example demonstrating this approach:
 
 {% meta id height:540 %}
-{% embed_file grid/grid-add-empty-rows/main.jsx preview %}
+{% embed_file grid/grid-add-empty-rows/app.jsx preview %}
+{% embed_file grid/grid-add-empty-rows/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/grid-add-new-column.md b/docs/knowledge-base/grid-add-new-column.md
similarity index 89%
rename from knowledge-base/grid-add-new-column.md
rename to docs/knowledge-base/grid-add-new-column.md
index 6c07ddb5..e51321c3 100644
--- a/knowledge-base/grid-add-new-column.md
+++ b/docs/knowledge-base/grid-add-new-column.md
@@ -38,7 +38,8 @@ The idea here is to have a button that opens up a Form, which when submitted upd
 
 
 {% meta id height:760 %}
-{% embed_file grid/add-new-column/main.jsx preview %}
+{% embed_file grid/add-new-column/app.jsx preview %}
+{% embed_file grid/add-new-column/main.jsx %}
 {% embed_file grid/add-new-column/ColumnForm.jsx %}
-{% embed_file shared/products.json %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-add-operators-dropdown-for-custom-filtercell.md b/docs/knowledge-base/grid-add-operators-dropdown-for-custom-filtercell.md
similarity index 90%
rename from knowledge-base/grid-add-operators-dropdown-for-custom-filtercell.md
rename to docs/knowledge-base/grid-add-operators-dropdown-for-custom-filtercell.md
index 52f1cb47..12ea8511 100644
--- a/knowledge-base/grid-add-operators-dropdown-for-custom-filtercell.md
+++ b/docs/knowledge-base/grid-add-operators-dropdown-for-custom-filtercell.md
@@ -37,7 +37,8 @@ The GridFilterCellProps passed to the filterCell contain a collection with all o
 Following is an example demonstrating how to add a DropDownList for the operators in a filterCell:
 
 {% meta id:index height:520 %}
-{% embed_file grid/add-operators-dropdown-for-custom-filtercell/main.jsx preview %}
-{% embed_file grid/add-operators-dropdown-for-custom-filtercell/InputFilterCell.jsx preview %}
-{% embed_file grid/add-operators-dropdown-for-custom-filtercell/sample-products.jsx preview %}
+{% embed_file grid/add-operators-dropdown-for-custom-filtercell/app.jsx preview %}
+{% embed_file grid/add-operators-dropdown-for-custom-filtercell/main.jsx %}
+{% embed_file grid/add-operators-dropdown-for-custom-filtercell/InputFilterCell.jsx %}
+{% embed_file grid/add-operators-dropdown-for-custom-filtercell/sample-products.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/grid-alternate-row-colors.md b/docs/knowledge-base/grid-alternate-row-colors.md
similarity index 87%
rename from knowledge-base/grid-alternate-row-colors.md
rename to docs/knowledge-base/grid-alternate-row-colors.md
index 444b8968..3a17af2d 100644
--- a/knowledge-base/grid-alternate-row-colors.md
+++ b/docs/knowledge-base/grid-alternate-row-colors.md
@@ -69,8 +69,9 @@ As an example, the following will set the background of the alt rows to `red` an
 ```
 
 {% meta id:index height:480 %}
-{% embed_file grid-row-colors/alternate-colors/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid-row-colors/alternate-colors/app.jsx preview %}
+{% embed_file grid-row-colors/alternate-colors/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
 
 You can also set the background color to specific rows using the [nth-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) pseudo class.
@@ -82,6 +83,7 @@ You can also set the background color to specific rows using the [nth-child](htt
 ```
 
 {% meta id:index height:480 %}
-{% embed_file grid-row-colors/single-row-color/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid-row-colors/single-row-color/app.jsx preview %}
+{% embed_file grid-row-colors/single-row-color/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-autocomplete-gridcolumnmenufilter.md b/docs/knowledge-base/grid-autocomplete-gridcolumnmenufilter.md
similarity index 92%
rename from knowledge-base/grid-autocomplete-gridcolumnmenufilter.md
rename to docs/knowledge-base/grid-autocomplete-gridcolumnmenufilter.md
index f88922d2..8d64fedd 100644
--- a/knowledge-base/grid-autocomplete-gridcolumnmenufilter.md
+++ b/docs/knowledge-base/grid-autocomplete-gridcolumnmenufilter.md
@@ -42,7 +42,8 @@ The onChange event handlers of the AutoComplete components will be the ones that
 
 
 {% meta id height:520 %}
-{% embed_file grid/columnmenufilter-with-autocomplete/main.jsx preview %}
+{% embed_file grid/columnmenufilter-with-autocomplete/app.jsx preview %}
+{% embed_file grid/columnmenufilter-with-autocomplete/main.jsx %}
 {% embed_file grid/columnmenufilter-with-autocomplete/customFilterUI.jsx %}
-{% embed_file shared/products.json %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-cell-edit-on-enter-press.md b/docs/knowledge-base/grid-cell-edit-on-enter-press.md
similarity index 85%
rename from knowledge-base/grid-cell-edit-on-enter-press.md
rename to docs/knowledge-base/grid-cell-edit-on-enter-press.md
index 6140a509..58573770 100644
--- a/knowledge-base/grid-cell-edit-on-enter-press.md
+++ b/docs/knowledge-base/grid-cell-edit-on-enter-press.md
@@ -37,7 +37,8 @@ First we need to make the Grid navigatable by setting the [navigatable](https://
 Create a custom cell component, attach the onKeyDown event and pass it to the [cellRender](https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-cellrender) prop:
 
 {% meta id:index height:520 %}
-{% embed_file grid/cell-edit-on-enter-press/main.jsx preview %}
-{% embed_file grid/cell-edit-on-enter-press/renderers.jsx preview %}
-{% embed_file grid/cell-edit-on-enter-press/sample-products.jsx preview %}
+{% embed_file grid/cell-edit-on-enter-press/app.jsx preview %}
+{% embed_file grid/cell-edit-on-enter-press/main.jsx %}
+{% embed_file grid/cell-edit-on-enter-press/renderers.jsx %}
+{% embed_file grid/cell-edit-on-enter-press/sample-products.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/grid-cell-state-editing.md b/docs/knowledge-base/grid-cell-state-editing.md
similarity index 89%
rename from knowledge-base/grid-cell-state-editing.md
rename to docs/knowledge-base/grid-cell-state-editing.md
index f04498bf..a4181755 100644
--- a/knowledge-base/grid-cell-state-editing.md
+++ b/docs/knowledge-base/grid-cell-state-editing.md
@@ -34,6 +34,7 @@ How to update the entire Grid when the user stops editing instead of on each key
 This can be achieved by making the cells managing their own state via a custom [cell](https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-cell) .
 
 {% meta id:index height:500 %}
-{% embed_file grid/grid-cell-state-editing/main.jsx preview %}
+{% embed_file grid/grid-cell-state-editing/app.jsx preview %}
+{% embed_file grid/grid-cell-state-editing/main.jsx %}
 {% embed_file grid/grid-cell-state-editing/products.jsx  %}
 {% endmeta %}
diff --git a/knowledge-base/grid-cell-whitespace-textoverflow.md b/docs/knowledge-base/grid-cell-whitespace-textoverflow.md
similarity index 76%
rename from knowledge-base/grid-cell-whitespace-textoverflow.md
rename to docs/knowledge-base/grid-cell-whitespace-textoverflow.md
index cc29dd51..9c51c301 100644
--- a/knowledge-base/grid-cell-whitespace-textoverflow.md
+++ b/docs/knowledge-base/grid-cell-whitespace-textoverflow.md
@@ -38,8 +38,9 @@ You can achieve this by using either the Grid `cellRender` prop, or the GridCell
 Setting className property to the Grid and using that class name as a selector to target only that instance.
 
 {% meta height:500 %}
-{% embed_file grid/grid-whitespace-textoverflow/CSS/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/grid-whitespace-textoverflow/CSS/app.jsx preview %}
+{% embed_file grid/grid-whitespace-textoverflow/CSS/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
 
 # Using cell
@@ -47,8 +48,9 @@ Setting className property to the Grid and using that class name as a selector t
 Setting custom cell for a column and adding the styles directly to the TD element
 
 {% meta height:500 %}
-{% embed_file grid/grid-whitespace-textoverflow/cell/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/grid-whitespace-textoverflow/cell/app.jsx preview %}
+{% embed_file grid/grid-whitespace-textoverflow/cell/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
 
 # Using cellRender
@@ -56,6 +58,7 @@ Setting custom cell for a column and adding the styles directly to the TD elemen
 Using the Grid's cellRender for adding the custom styles to all cells
 
 {% meta height:500 %}
-{% embed_file grid/grid-whitespace-textoverflow/cellRender/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/grid-whitespace-textoverflow/cellRender/app.jsx preview %}
+{% embed_file grid/grid-whitespace-textoverflow/cellRender/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-change-boolean-filter-to-yesno.md b/docs/knowledge-base/grid-change-boolean-filter-to-yesno.md
similarity index 94%
rename from knowledge-base/grid-change-boolean-filter-to-yesno.md
rename to docs/knowledge-base/grid-change-boolean-filter-to-yesno.md
index 65f82482..e86b8dcb 100644
--- a/knowledge-base/grid-change-boolean-filter-to-yesno.md
+++ b/docs/knowledge-base/grid-change-boolean-filter-to-yesno.md
@@ -37,6 +37,7 @@ For changing the text for the boolean operators in the Grid, a LocalizationProvi
 Following is an example demonstrating this approach: 
 
 {% meta id:index height:560 %}
-{% embed_file grid/grid-change-boolean-filter-to-yesno/main.jsx preview %}
+{% embed_file grid/grid-change-boolean-filter-to-yesno/app.jsx preview %}
+{% embed_file grid/grid-change-boolean-filter-to-yesno/main.jsx %}
 {% embed_file grid/grid-change-boolean-filter-to-yesno/sample-products.jsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-checkbox-in-view-mode-for-boolean.md b/docs/knowledge-base/grid-checkbox-in-view-mode-for-boolean.md
similarity index 90%
rename from knowledge-base/grid-checkbox-in-view-mode-for-boolean.md
rename to docs/knowledge-base/grid-checkbox-in-view-mode-for-boolean.md
index 5c4b2b62..fcbeea4c 100644
--- a/knowledge-base/grid-checkbox-in-view-mode-for-boolean.md
+++ b/docs/knowledge-base/grid-checkbox-in-view-mode-for-boolean.md
@@ -33,7 +33,8 @@ Add custom cell for the boolean column and render disabled CheckBox for view mod
 Here is an example demonstrating this approach:
 
 {% meta id height:760 %}
-{% embed_file grid/checkbox-in-view-mode-for-boolean/main.jsx preview %}
+{% embed_file grid/checkbox-in-view-mode-for-boolean/app.jsx preview %}
+{% embed_file grid/checkbox-in-view-mode-for-boolean/main.jsx %}
 {% embed_file grid/checkbox-in-view-mode-for-boolean/ExternalGridCell.jsx %}
 {% embed_file grid/checkbox-in-view-mode-for-boolean/sample-products.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/grid-checkbox-selection-with-grouping.md b/docs/knowledge-base/grid-checkbox-selection-with-grouping.md
similarity index 89%
rename from knowledge-base/grid-checkbox-selection-with-grouping.md
rename to docs/knowledge-base/grid-checkbox-selection-with-grouping.md
index 84ec7644..068817fa 100644
--- a/knowledge-base/grid-checkbox-selection-with-grouping.md
+++ b/docs/knowledge-base/grid-checkbox-selection-with-grouping.md
@@ -37,6 +37,7 @@ When a group expression is applied to the Grid's data, the parent items in the d
 Following is an example demonstrating this approach: 
 
 {% meta id:index height:560 %}
-{% embed_file grid/checkbox-selection-with-grouping/main.jsx preview %}
+{% embed_file grid/checkbox-selection-with-grouping/app.jsx preview %}
+{% embed_file grid/checkbox-selection-with-grouping/main.jsx %}
 {% embed_file grid/checkbox-selection-with-grouping/products.json %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-collapse-header-column.md b/docs/knowledge-base/grid-collapse-header-column.md
similarity index 89%
rename from knowledge-base/grid-collapse-header-column.md
rename to docs/knowledge-base/grid-collapse-header-column.md
index 4efd37fc..d3ffba10 100644
--- a/knowledge-base/grid-collapse-header-column.md
+++ b/docs/knowledge-base/grid-collapse-header-column.md
@@ -37,6 +37,7 @@ How can I collapse the columns inside the Grid header?
 This can be achieved by toggling a flag variable in the state that will determine whether or not the nested columns will render.
 
 {% meta id height:560 %}
-{% embed_file grid/collapse-header-column/main.jsx preview %}
+{% embed_file grid/collapse-header-column/app.jsx preview %}
+{% embed_file grid/collapse-header-column/main.jsx %}
 {% embed_file grid/collapse-header-column/products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-column-auto-width.md b/docs/knowledge-base/grid-column-auto-width.md
similarity index 81%
rename from knowledge-base/grid-column-auto-width.md
rename to docs/knowledge-base/grid-column-auto-width.md
index 84d3c4a9..60c7d2e4 100644
--- a/knowledge-base/grid-column-auto-width.md
+++ b/docs/knowledge-base/grid-column-auto-width.md
@@ -37,8 +37,9 @@ How can I set the width of the Grid column based on the content. I want the colu
 In order to automatically calculate the column width, we can suggest using the Canvas API [measureText](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText) function that can calculate the text width based on the font weight, size, and family. Then we can use that information to dynamically set the width of the column.
 
 {% meta id:index height:560 %}
-{% embed_file grid/auto-width/canvas/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/auto-width/canvas/app.jsx preview %}
+{% embed_file grid/auto-width/canvas/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
 
 ### Using calculate-size
@@ -46,6 +47,7 @@ In order to automatically calculate the column width, we can suggest using the C
 Another approach would be to use a package called [calculate-size](https://www.npmjs.com/package/calculate-size) or similar which will calculate the size of the text based on the font.
 
 {% meta id:index height:560 %}
-{% embed_file grid/auto-width/calculate-size/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/auto-width/calculate-size/app.jsx preview %}
+{% embed_file grid/auto-width/calculate-size/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-columnmenu-filter-without-operators.md b/docs/knowledge-base/grid-columnmenu-filter-without-operators.md
similarity index 93%
rename from knowledge-base/grid-columnmenu-filter-without-operators.md
rename to docs/knowledge-base/grid-columnmenu-filter-without-operators.md
index 4ddcb1ce..5bd558ef 100644
--- a/knowledge-base/grid-columnmenu-filter-without-operators.md
+++ b/docs/knowledge-base/grid-columnmenu-filter-without-operators.md
@@ -37,7 +37,8 @@ Wrap the GridColumnMenuFilter in a DIV element with specific className and use t
 Following is an example demonstrating this approach
 
 {% meta id:index height:360 %} 
-{% embed_file grid/grid-columnmenu-filter-without-operators/main.jsx preview %}
+{% embed_file grid/grid-columnmenu-filter-without-operators/app.jsx preview %}
+{% embed_file grid/grid-columnmenu-filter-without-operators/main.jsx %}
 {% embed_file grid/grid-columnmenu-filter-without-operators/columnMenu.jsx %}
 {% embed_file grid/grid-columnmenu-filter-without-operators/styles.css.jsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-columnmenu-pass-data-with-context.md b/docs/knowledge-base/grid-columnmenu-pass-data-with-context.md
similarity index 88%
rename from knowledge-base/grid-columnmenu-pass-data-with-context.md
rename to docs/knowledge-base/grid-columnmenu-pass-data-with-context.md
index f16d9294..88e7611f 100644
--- a/knowledge-base/grid-columnmenu-pass-data-with-context.md
+++ b/docs/knowledge-base/grid-columnmenu-pass-data-with-context.md
@@ -37,7 +37,8 @@ For achieving the desired result the React Context can be used by wrapping it ar
 Following is an example demonstrating this approach
 
 {% meta id:index height:520 %}
-{% embed_file grid/grid-columnmenu-pass-data-with-context/main.jsx preview %}
+{% embed_file grid/grid-columnmenu-pass-data-with-context/app.jsx preview %}
+{% embed_file grid/grid-columnmenu-pass-data-with-context/main.jsx %}
 {% embed_file grid/grid-columnmenu-pass-data-with-context/columnMenu.jsx %}
-{% embed_file shared/products.json %}
+{% embed_file grid/grid-columnmenu-pass-data-with-context/products.json %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-columnmenucheckboxfilter-with-contains.md b/docs/knowledge-base/grid-columnmenucheckboxfilter-with-contains.md
similarity index 90%
rename from knowledge-base/grid-columnmenucheckboxfilter-with-contains.md
rename to docs/knowledge-base/grid-columnmenucheckboxfilter-with-contains.md
index 2d57b020..0024e2cc 100644
--- a/knowledge-base/grid-columnmenucheckboxfilter-with-contains.md
+++ b/docs/knowledge-base/grid-columnmenucheckboxfilter-with-contains.md
@@ -39,7 +39,8 @@ By default the GridColumnMenuCheckboxFilter will use "eq" operator. To change th
 Following is an example demonstrating this approach:
 
 {% meta id:index height:520 %}
-{% embed_file grid/grid-columnmenucheckboxfilter-with-contains/main.jsx preview %}
+{% embed_file grid/grid-columnmenucheckboxfilter-with-contains/app.jsx preview %}
+{% embed_file grid/grid-columnmenucheckboxfilter-with-contains/main.jsx %}
 {% embed_file grid/grid-columnmenucheckboxfilter-with-contains/columnMenu.jsx %}
-{% embed_file shared/products.json %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-conditional-scrollbar.md b/docs/knowledge-base/grid-conditional-scrollbar.md
similarity index 89%
rename from knowledge-base/grid-conditional-scrollbar.md
rename to docs/knowledge-base/grid-conditional-scrollbar.md
index eb66b3a3..de029afb 100644
--- a/knowledge-base/grid-conditional-scrollbar.md
+++ b/docs/knowledge-base/grid-conditional-scrollbar.md
@@ -34,6 +34,7 @@ This can be achieved by setting the scrollable property of the Grid from a state
 This is an example showcasing this approach:
 
 {% meta id:index height:540 %}
-{% embed_file grid/grid-conditional-scrollbar/main.jsx preview %}
+{% embed_file grid/grid-conditional-scrollbar/app.jsx preview %}
+{% embed_file grid/grid-conditional-scrollbar/main.jsx %}
 {% embed_file grid/grid-conditional-scrollbar/products.json %} 
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-context-menu.md b/docs/knowledge-base/grid-context-menu.md
similarity index 93%
rename from knowledge-base/grid-context-menu.md
rename to docs/knowledge-base/grid-context-menu.md
index dec23b49..f2ae1502 100644
--- a/knowledge-base/grid-context-menu.md
+++ b/docs/knowledge-base/grid-context-menu.md
@@ -68,6 +68,7 @@ You can implement a context menu in the Grid by using the [KendoReact Popup comp
 The following example demonstrates the full implementation of the suggested approach. The context menu provides options for moving the rows up and down, and for deleting an item.
 
 {% meta height:480 %}
-{% embed_file grid/context-menu/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/context-menu/app.jsx preview %}
+{% embed_file grid/context-menu/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-custom-cell-with-selection.md b/docs/knowledge-base/grid-custom-cell-with-selection.md
similarity index 88%
rename from knowledge-base/grid-custom-cell-with-selection.md
rename to docs/knowledge-base/grid-custom-cell-with-selection.md
index df2b863d..cabdcdfa 100644
--- a/knowledge-base/grid-custom-cell-with-selection.md
+++ b/docs/knowledge-base/grid-custom-cell-with-selection.md
@@ -35,5 +35,6 @@ Add the selected class name to the custom cell conditionally based on the "props
 Following is an example demonstrating how to keep the Grid selection functionality with custom cell:
 
 {% meta height:480 %}
-{% embed_file grid/grid-custom-cell-with-selection/main.jsx preview %}
+{% embed_file grid/grid-custom-cell-with-selection/app.jsx preview %}
+{% embed_file grid/grid-custom-cell-with-selection/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/grid-custom-header-cell-with-sorting-and-columnmenu.md b/docs/knowledge-base/grid-custom-header-cell-with-sorting-and-columnmenu.md
similarity index 90%
rename from knowledge-base/grid-custom-header-cell-with-sorting-and-columnmenu.md
rename to docs/knowledge-base/grid-custom-header-cell-with-sorting-and-columnmenu.md
index 79fdda4e..205630c2 100644
--- a/knowledge-base/grid-custom-header-cell-with-sorting-and-columnmenu.md
+++ b/docs/knowledge-base/grid-custom-header-cell-with-sorting-and-columnmenu.md
@@ -33,5 +33,6 @@ I use custom headerCell for one of the Grid columns, but the sorting icon and th
 Following is an example demonstrating the correct headerCell structure for rendering the sort and the columnMenu icons:
 
 {% meta height:420 %}
-{% embed_file grid/custom-header-cell-with-sorting-and-columnmenu/main.jsx preview %}
+{% embed_file grid/custom-header-cell-with-sorting-and-columnmenu/app.jsx preview %}
+{% embed_file grid/custom-header-cell-with-sorting-and-columnmenu/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/grid-date-format.md b/docs/knowledge-base/grid-date-format.md
similarity index 100%
rename from knowledge-base/grid-date-format.md
rename to docs/knowledge-base/grid-date-format.md
diff --git a/knowledge-base/grid-date-ragne-filter.md b/docs/knowledge-base/grid-date-ragne-filter.md
similarity index 88%
rename from knowledge-base/grid-date-ragne-filter.md
rename to docs/knowledge-base/grid-date-ragne-filter.md
index 144667f5..8582d60d 100644
--- a/knowledge-base/grid-date-ragne-filter.md
+++ b/docs/knowledge-base/grid-date-ragne-filter.md
@@ -37,6 +37,7 @@ Also, how to make Grid custom range filter working with Odata and show default v
 This requires using the [filterCell]({% slug api_grid_gridcolumnprops %}#toc-filterCell) property of the Grid column to add two DatePickers/DateInputs that will allow the user to select a start and an end date. The format can be changed by configuring the [format]({% slug api_dateinputs_datepickerprops %}#toc-format). Use the [defaultValue]({% slug api_dateinputs_datepickerprops %}#toc-defaultValue) to pass a default value for the custom DatePicker component.
 
 {% meta height:450 %}
-{% embed_file grid/date-range-filter/main.jsx preview %}
-{% embed_file shared/sample-products.js preview %}
+{% embed_file grid/date-range-filter/app.jsx preview %}
+{% embed_file grid/date-range-filter/main.jsx %}
+{% embed_file shared/shared-sample-products.js %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-disable-duplicate-grouping.md b/docs/knowledge-base/grid-disable-duplicate-grouping.md
similarity index 88%
rename from knowledge-base/grid-disable-duplicate-grouping.md
rename to docs/knowledge-base/grid-disable-duplicate-grouping.md
index eec6e428..8371613f 100644
--- a/knowledge-base/grid-disable-duplicate-grouping.md
+++ b/docs/knowledge-base/grid-disable-duplicate-grouping.md
@@ -37,6 +37,7 @@ In the `onGroupChange` event handler, you can check if the newly added group exi
 This is an example demonstrating the implementation:
 
 {% meta id:index height:680 %}
-{% embed_file grid/unique-groups/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/unique-groups/app.jsx preview %}
+{% embed_file grid/unique-groups/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-disable-reordering.md b/docs/knowledge-base/grid-disable-reordering.md
similarity index 87%
rename from knowledge-base/grid-disable-reordering.md
rename to docs/knowledge-base/grid-disable-reordering.md
index 91839727..2e1f118b 100644
--- a/knowledge-base/grid-disable-reordering.md
+++ b/docs/knowledge-base/grid-disable-reordering.md
@@ -35,6 +35,7 @@ The [orderIndex]({% slug api_grid_gridcolumnprops %}#toc-orderIndex) property to
 The following example demonstrates the above approach:
 
 {% meta id:index height:560 %}
-{% embed_file grid/grid-disable-reordering/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/grid-disable-reordering/app.jsx preview %}
+{% embed_file grid/grid-disable-reordering/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-disable-selection-for-rows-conditionally.md b/docs/knowledge-base/grid-disable-selection-for-rows-conditionally.md
similarity index 93%
rename from knowledge-base/grid-disable-selection-for-rows-conditionally.md
rename to docs/knowledge-base/grid-disable-selection-for-rows-conditionally.md
index 42809939..817ea8a1 100644
--- a/knowledge-base/grid-disable-selection-for-rows-conditionally.md
+++ b/docs/knowledge-base/grid-disable-selection-for-rows-conditionally.md
@@ -37,6 +37,7 @@ Use the cellRender of the Grid to modify the TD element for the select column wh
 Following is an example with the described approach:
 
 {% meta height:450 %}
-{% embed_file grid/disable-selection-for-rows-conditionally/main.jsx preview %}
+{% embed_file grid/disable-selection-for-rows-conditionally/app.jsx preview %}
+{% embed_file grid/disable-selection-for-rows-conditionally/main.jsx %}
 {% embed_file grid/disable-selection-for-rows-conditionally/products.json %}
 {% endmeta %} 
\ No newline at end of file
diff --git a/knowledge-base/grid-dropdown-filter-for-array-field.md b/docs/knowledge-base/grid-dropdown-filter-for-array-field.md
similarity index 91%
rename from knowledge-base/grid-dropdown-filter-for-array-field.md
rename to docs/knowledge-base/grid-dropdown-filter-for-array-field.md
index 4057fcf2..d516e97c 100644
--- a/knowledge-base/grid-dropdown-filter-for-array-field.md
+++ b/docs/knowledge-base/grid-dropdown-filter-for-array-field.md
@@ -37,6 +37,7 @@ The first step is to create a custom filter with a DropDownList for the array co
 Following is an example with the described approach:
 
 {% meta height:450 %}
-{% embed_file grid/dropdown-filter-for-array-field/main.jsx preview %}
+{% embed_file grid/dropdown-filter-for-array-field/app.jsx preview %}
+{% embed_file grid/dropdown-filter-for-array-field/main.jsx %}
 {% embed_file grid/dropdown-filter-for-array-field/dropdownFilterCell.jsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-edit-one-item-at-a-time.md b/docs/knowledge-base/grid-edit-one-item-at-a-time.md
similarity index 87%
rename from knowledge-base/grid-edit-one-item-at-a-time.md
rename to docs/knowledge-base/grid-edit-one-item-at-a-time.md
index 47a98f84..26820878 100644
--- a/knowledge-base/grid-edit-one-item-at-a-time.md
+++ b/docs/knowledge-base/grid-edit-one-item-at-a-time.md
@@ -36,8 +36,9 @@ For tracking which item will have enabled buttons we add disableEdit property to
 This is an example showcasing how to limit the value:
 
 {% meta height:580 %}
-{% embed_file grid/grid-edit-one-item-at-a-time/main.jsx preview %}
-{% embed_file grid/grid-edit-one-item-at-a-time/myCommandCell.jsx preview %}
-{% embed_file grid/grid-edit-one-item-at-a-time/sample-products.jsx preview %}
-{% embed_file grid/grid-edit-one-item-at-a-time/services.js preview %}
+{% embed_file grid/grid-edit-one-item-at-a-time/app.jsx preview %}
+{% embed_file grid/grid-edit-one-item-at-a-time/main.jsx %}
+{% embed_file grid/grid-edit-one-item-at-a-time/myCommandCell.jsx %}
+{% embed_file grid/grid-edit-one-item-at-a-time/sample-products.jsx %}
+{% embed_file grid/grid-edit-one-item-at-a-time/services.js %}
 {% endmeta %}
diff --git a/knowledge-base/grid-ellipsis-data-cell.md b/docs/knowledge-base/grid-ellipsis-data-cell.md
similarity index 85%
rename from knowledge-base/grid-ellipsis-data-cell.md
rename to docs/knowledge-base/grid-ellipsis-data-cell.md
index 7ccaa94a..5b2a4315 100644
--- a/knowledge-base/grid-ellipsis-data-cell.md
+++ b/docs/knowledge-base/grid-ellipsis-data-cell.md
@@ -34,6 +34,7 @@ This can be achieved by wrapping the content of the data cells in a DIV element
 This is an example showcasing how to limit the value:
 
 {% meta height:600 %}
-{% embed_file grid/grid-ellipsis-data-cell/main.jsx preview %}
-{% embed_file grid/grid-ellipsis-data-cell/styles.css preview %}
+{% embed_file grid/grid-ellipsis-data-cell/app.jsx preview %}
+{% embed_file grid/grid-ellipsis-data-cell/main.jsx %}
+{% embed_file grid/grid-ellipsis-data-cell/styles.css %}
 {% endmeta %}
diff --git a/knowledge-base/grid-expand-with-flat-data.md b/docs/knowledge-base/grid-expand-with-flat-data.md
similarity index 91%
rename from knowledge-base/grid-expand-with-flat-data.md
rename to docs/knowledge-base/grid-expand-with-flat-data.md
index 7385c4c3..11d6004b 100644
--- a/knowledge-base/grid-expand-with-flat-data.md
+++ b/docs/knowledge-base/grid-expand-with-flat-data.md
@@ -34,5 +34,6 @@ Add a column with custom "cell" for rendering the expand/collapse icons. Within
 Following is an example demonstrating how to simulate hierarchy with flat data where the order of the items in the 'data' are in the correct order and the parent items have ParentID equal to 0. 
 
 {% meta height:480 %}
-{% embed_file grid/expand-with-flat-data/main.jsx preview %} 
+{% embed_file grid/expand-with-flat-data/app.jsx preview %} 
+{% embed_file grid/expand-with-flat-data/main.jsx %} 
 {% endmeta %}
diff --git a/knowledge-base/grid-export-csv.md b/docs/knowledge-base/grid-export-csv.md
similarity index 85%
rename from knowledge-base/grid-export-csv.md
rename to docs/knowledge-base/grid-export-csv.md
index 9eb661fe..f71d3fb8 100644
--- a/knowledge-base/grid-export-csv.md
+++ b/docs/knowledge-base/grid-export-csv.md
@@ -32,6 +32,7 @@ You can export the Grid data to a CSV format using the [react-csv](https://www.n
 This is an example showcasing this approach:
 
 {% meta id:index height:700 %}
-{% embed_file grid/grid-csv-export/main.jsx preview %}
-{% embed_file shared/products.json %} 
+{% embed_file grid/grid-csv-export/app.jsx preview %}
+{% embed_file grid/grid-csv-export/main.jsx %}
+{% embed_file shared/shared-products.json %} 
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-external-dropdownlist-filter.md b/docs/knowledge-base/grid-external-dropdownlist-filter.md
similarity index 88%
rename from knowledge-base/grid-external-dropdownlist-filter.md
rename to docs/knowledge-base/grid-external-dropdownlist-filter.md
index 2d778c5a..b05576d5 100644
--- a/knowledge-base/grid-external-dropdownlist-filter.md
+++ b/docs/knowledge-base/grid-external-dropdownlist-filter.md
@@ -34,6 +34,7 @@ All data operations in the Grid are handled manually, so including a filter expr
 This is an example showcasing this approach:
 
 {% meta id:index height:700 %}
-{% embed_file grid/grid-external-dropdownlist-filter/main.jsx preview %}
+{% embed_file grid/grid-external-dropdownlist-filter/app.jsx preview %}
+{% embed_file grid/grid-external-dropdownlist-filter/main.jsx %}
 {% embed_file grid/grid-external-dropdownlist-filter/products.json %} 
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-filtering-api.md b/docs/knowledge-base/grid-filtering-api.md
similarity index 90%
rename from knowledge-base/grid-filtering-api.md
rename to docs/knowledge-base/grid-filtering-api.md
index 3ef6c5e6..ce50afe7 100644
--- a/knowledge-base/grid-filtering-api.md
+++ b/docs/knowledge-base/grid-filtering-api.md
@@ -33,5 +33,6 @@ How do I filter the Grid using `useEffect` with dummy API endpoint using JSON pl
 This can be achieved by fetching the data inside the `useEffect` hook and then filtering it using the `filterBy` helper function and passing the filtered collection to the [`data`]({% slug api_grid_gridprops %}#toc-data) prop.
 
 {% meta id:index height:700 %}
-{% embed_file grid-filtering-api/main.tsx preview %}
+{% embed_file grid-filtering-api/app.tsx preview %}
+{% embed_file grid-filtering-api/main.tsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-filtering-disable-diacritics.md b/docs/knowledge-base/grid-filtering-disable-diacritics.md
similarity index 88%
rename from knowledge-base/grid-filtering-disable-diacritics.md
rename to docs/knowledge-base/grid-filtering-disable-diacritics.md
index 1ab55a02..5b1692ea 100644
--- a/knowledge-base/grid-filtering-disable-diacritics.md
+++ b/docs/knowledge-base/grid-filtering-disable-diacritics.md
@@ -37,7 +37,8 @@ You can achieve this by rendering a custom filter cell and normalizing the passe
 This is an example demonstrating this implementation:
 
 {% meta id:index height:560 %}
-{% embed_file grid/ignore-diacritics/main.jsx preview %}
+{% embed_file grid/ignore-diacritics/app.jsx preview %}
+{% embed_file grid/ignore-diacritics/main.jsx %}
 {% embed_file grid/ignore-diacritics/inputFilterCell.jsx %}
-{% embed_file shared/sample-products.js %}
+{% embed_file shared/shared-sample-products.js %}
 {% endmeta %}
diff --git a/knowledge-base/grid-fix-editors-popup-position-issue.md b/docs/knowledge-base/grid-fix-editors-popup-position-issue.md
similarity index 88%
rename from knowledge-base/grid-fix-editors-popup-position-issue.md
rename to docs/knowledge-base/grid-fix-editors-popup-position-issue.md
index fa6d4491..83739d79 100644
--- a/knowledge-base/grid-fix-editors-popup-position-issue.md
+++ b/docs/knowledge-base/grid-fix-editors-popup-position-issue.md
@@ -34,9 +34,10 @@ The issue in question is caused by the fact that all Popup components are render
 This is an example showcasing this approach:
 
 {% meta id:index height:760 %} 
-{% embed_file grid/fix-editors-popup-position-issue/main.jsx preview %}
+{% embed_file grid/fix-editors-popup-position-issue/app.jsx preview %}
+{% embed_file grid/fix-editors-popup-position-issue/main.jsx %}
 {% embed_file grid/fix-editors-popup-position-issue/myCommandCell.jsx %}
 {% embed_file grid/fix-editors-popup-position-issue/myDropDownCell.jsx %}
 {% embed_file grid/fix-editors-popup-position-issue/services.js %}
-{% embed_file shared/sample-products.js %} 
+{% embed_file shared/shared-sample-products.js %} 
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-hide-expand-icon-conditionally.md b/docs/knowledge-base/grid-hide-expand-icon-conditionally.md
similarity index 93%
rename from knowledge-base/grid-hide-expand-icon-conditionally.md
rename to docs/knowledge-base/grid-hide-expand-icon-conditionally.md
index 46f6037d..a49d72b4 100644
--- a/knowledge-base/grid-hide-expand-icon-conditionally.md
+++ b/docs/knowledge-base/grid-hide-expand-icon-conditionally.md
@@ -34,5 +34,6 @@ Within the cellRender of the Grid check if the field for the cell is the expand
 This is an example showcasing this approach:
 
 {% meta id:index height:660 %} 
-{% embed_file grid/grid-hide-expand-icon-conditionally/main.jsx preview %}
+{% embed_file grid/grid-hide-expand-icon-conditionally/app.jsx preview %}
+{% embed_file grid/grid-hide-expand-icon-conditionally/main.jsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-hide-grouped-columns.md b/docs/knowledge-base/grid-hide-grouped-columns.md
similarity index 85%
rename from knowledge-base/grid-hide-grouped-columns.md
rename to docs/knowledge-base/grid-hide-grouped-columns.md
index d02cde21..a480ff23 100644
--- a/knowledge-base/grid-hide-grouped-columns.md
+++ b/docs/knowledge-base/grid-hide-grouped-columns.md
@@ -34,6 +34,7 @@ Columns in the Grid can be dynamically removed if we have the columns collection
 This is an example showcasing this approach:
 
 {% meta id:index height:760 %}
-{% embed_file grid/grid-hide-grouped-columns/main.jsx preview %}
-{% embed_file shared/products.json %} 
+{% embed_file grid/grid-hide-grouped-columns/app.jsx preview %}
+{% embed_file grid/grid-hide-grouped-columns/main.jsx %}
+{% embed_file grid/grid-hide-grouped-columns/products.json %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-horizontal.md b/docs/knowledge-base/grid-horizontal.md
similarity index 91%
rename from knowledge-base/grid-horizontal.md
rename to docs/knowledge-base/grid-horizontal.md
index 5381dff1..dcb44963 100644
--- a/knowledge-base/grid-horizontal.md
+++ b/docs/knowledge-base/grid-horizontal.md
@@ -36,5 +36,6 @@ The Grid is designed to display the data in a vertical way but you can still ach
 The following example showcases this approach:
  
 {% meta height:760 %} 
-{% embed_file grid/transpose-data/main.jsx preview %} 
+{% embed_file grid/transpose-data/app.jsx preview %} 
+{% embed_file grid/transpose-data/main.jsx %} 
 {% endmeta %}
diff --git a/knowledge-base/grid-limit-numeric-filter-value.md b/docs/knowledge-base/grid-limit-numeric-filter-value.md
similarity index 84%
rename from knowledge-base/grid-limit-numeric-filter-value.md
rename to docs/knowledge-base/grid-limit-numeric-filter-value.md
index 7f9c0bbd..5f31567f 100644
--- a/knowledge-base/grid-limit-numeric-filter-value.md
+++ b/docs/knowledge-base/grid-limit-numeric-filter-value.md
@@ -34,5 +34,7 @@ Creating a custom component that uses NumericTextBox as a filter and setting the
 This is an example showcasing how to limit the value:
 
 {% meta height:480 %}
-{% embed_file grid/limit-numeric-filter-value/main.jsx preview %}
+{% embed_file grid/limit-numeric-filter-value/app.jsx preview %}
+{% embed_file grid/limit-numeric-filter-value/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-loading-indicator.md b/docs/knowledge-base/grid-loading-indicator.md
similarity index 95%
rename from knowledge-base/grid-loading-indicator.md
rename to docs/knowledge-base/grid-loading-indicator.md
index e12319c4..710a301f 100644
--- a/knowledge-base/grid-loading-indicator.md
+++ b/docs/knowledge-base/grid-loading-indicator.md
@@ -41,8 +41,9 @@ In such cases, a loading indicator is suitable to indicate that the Grid is prop
 The following example demonstrates how to render a loading indicator once a request is made and hide it when the request is finished successfully.
 
 {% meta id:loading-indicator height:650 %}
-{% embed_file grid/odata-server-operations/main.jsx preview %}
-{% embed_file shared/products-loader.jsx %}
+{% embed_file grid/odata-server-operations/app.jsx preview %}
+{% embed_file grid/odata-server-operations/main.jsx %}
+{% embed_file shared/shared-products-loader.jsx %}
 {% endmeta %}
 
 #### Setup
diff --git a/knowledge-base/grid-lock-row-headers.md b/docs/knowledge-base/grid-lock-row-headers.md
similarity index 88%
rename from knowledge-base/grid-lock-row-headers.md
rename to docs/knowledge-base/grid-lock-row-headers.md
index f9eea34a..61e34ea3 100644
--- a/knowledge-base/grid-lock-row-headers.md
+++ b/docs/knowledge-base/grid-lock-row-headers.md
@@ -42,7 +42,8 @@ This will required the following:
 The following example showcase this in action:
 
 {% meta id height:760 %}
-{% embed_file grid/lock-row-headers/main.jsx preview %}
-{% embed_file shared/products-with-sections.json %}
+{% embed_file grid/lock-row-headers/app.jsx preview %}
+{% embed_file grid/lock-row-headers/main.jsx %}
+{% embed_file shared/shared-products-with-sections.json %}
 {% endmeta %}
 
diff --git a/knowledge-base/grid-merge-cells-and-rows-data.md b/docs/knowledge-base/grid-merge-cells-and-rows-data.md
similarity index 93%
rename from knowledge-base/grid-merge-cells-and-rows-data.md
rename to docs/knowledge-base/grid-merge-cells-and-rows-data.md
index 72cc89a8..99ac57a7 100644
--- a/knowledge-base/grid-merge-cells-and-rows-data.md
+++ b/docs/knowledge-base/grid-merge-cells-and-rows-data.md
@@ -36,7 +36,8 @@ For simple scenarios where the data needs to be merged for single column, rowSpa
 For this scenario, use a [`cellRender`]({% slug api_grid_gridprops %}#toc-cellrender) and compare the previous cell and previous row data to remove the content of the cell if it duplicate. You can also add different colors of the cell based on the values (suitable for boolean values for example), so they can be distinguished visually. 
 
 {% meta id:index height:760 %}
-{% embed_file grid/merge-rows-and-cells/main.jsx preview %}
+{% embed_file grid/merge-rows-and-cells/app.jsx preview %}
+{% embed_file grid/merge-rows-and-cells/main.jsx %}
 {% embed_file grid/merge-rows-and-cells/products.json %} 
 {% endmeta %}
  
\ No newline at end of file
diff --git a/knowledge-base/grid-multiple-functionalities.md b/docs/knowledge-base/grid-multiple-functionalities.md
similarity index 90%
rename from knowledge-base/grid-multiple-functionalities.md
rename to docs/knowledge-base/grid-multiple-functionalities.md
index 762b8afa..b75e9bae 100644
--- a/knowledge-base/grid-multiple-functionalities.md
+++ b/docs/knowledge-base/grid-multiple-functionalities.md
@@ -39,7 +39,8 @@ By following the steps in the articles in our documentation regarding how to app
 
 
 {% meta id height:650 %}
-{% embed_file grid/multiple-functionalities/main.jsx preview %}
+{% embed_file grid/multiple-functionalities/app.jsx preview %}
+{% embed_file grid/multiple-functionalities/main.jsx %}
 {% embed_file grid/multiple-functionalities/editForm.jsx %}
-{% embed_file shared/products.json %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-multiselect-filter-cell.md b/docs/knowledge-base/grid-multiselect-filter-cell.md
similarity index 91%
rename from knowledge-base/grid-multiselect-filter-cell.md
rename to docs/knowledge-base/grid-multiselect-filter-cell.md
index d9a0c91f..b14bf683 100644
--- a/knowledge-base/grid-multiselect-filter-cell.md
+++ b/docs/knowledge-base/grid-multiselect-filter-cell.md
@@ -33,7 +33,8 @@ Configure custom filterCell for the column where you want to use the MultiSelect
 Here is an example demonstrating this approach:
 
 {% meta id height:650 %}
-{% embed_file grid/multiselect-filter-cell/main.jsx preview %}
+{% embed_file grid/multiselect-filter-cell/app.jsx preview %}
+{% embed_file grid/multiselect-filter-cell/main.jsx %}
 {% embed_file grid/multiselect-filter-cell/multiSelectFilterCell.jsx %}
 {% embed_file grid/multiselect-filter-cell/products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-paste-from-excel.md b/docs/knowledge-base/grid-paste-from-excel.md
similarity index 89%
rename from knowledge-base/grid-paste-from-excel.md
rename to docs/knowledge-base/grid-paste-from-excel.md
index da50cef1..c18f4a4a 100644
--- a/knowledge-base/grid-paste-from-excel.md
+++ b/docs/knowledge-base/grid-paste-from-excel.md
@@ -40,5 +40,6 @@ This will require wrapping the Grid in a div element and attaching an `onPaste`
 This can be seen in the following example:
 
 {% meta id:index height:700 %}
-{% embed_file grid/paste-from-excel/main.jsx preview %}
+{% embed_file grid/paste-from-excel/app.jsx preview %}
+{% embed_file grid/paste-from-excel/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/grid-pdf-export-watermark.md b/docs/knowledge-base/grid-pdf-export-watermark.md
similarity index 87%
rename from knowledge-base/grid-pdf-export-watermark.md
rename to docs/knowledge-base/grid-pdf-export-watermark.md
index 6969fb5a..8647410f 100644
--- a/knowledge-base/grid-pdf-export-watermark.md
+++ b/docs/knowledge-base/grid-pdf-export-watermark.md
@@ -34,6 +34,7 @@ This can be achieved by using the drawDom and exportPDF from the @progress/kendo
 This is an example showcasing this approach:
 
 {% meta id:index height:500 %}
-{% embed_file grid/grid-pdf-export-with-watermark/main.jsx preview %}
+{% embed_file grid/grid-pdf-export-with-watermark/app.jsx preview %}
+{% embed_file grid/grid-pdf-export-with-watermark/main.jsx %}
 {% embed_file grid/grid-pdf-export-with-watermark/products.json %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-progressbar-cell.md b/docs/knowledge-base/grid-progressbar-cell.md
similarity index 89%
rename from knowledge-base/grid-progressbar-cell.md
rename to docs/knowledge-base/grid-progressbar-cell.md
index 3f411120..998e5d45 100644
--- a/knowledge-base/grid-progressbar-cell.md
+++ b/docs/knowledge-base/grid-progressbar-cell.md
@@ -34,6 +34,7 @@ This can be achieved by defining custom cell for the column and rendering a Prog
 This is an example showcasing this approach:
 
 {% meta id:index height:500 %}
-{% embed_file grid/grid-progressbar-cell/main.jsx preview %}
+{% embed_file grid/grid-progressbar-cell/app.jsx preview %}
+{% embed_file grid/grid-progressbar-cell/main.jsx %}
 {% embed_file grid/grid-progressbar-cell/products.json %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-remove-select-all.md b/docs/knowledge-base/grid-remove-select-all.md
similarity index 91%
rename from knowledge-base/grid-remove-select-all.md
rename to docs/knowledge-base/grid-remove-select-all.md
index 859a4d39..12f4ff05 100644
--- a/knowledge-base/grid-remove-select-all.md
+++ b/docs/knowledge-base/grid-remove-select-all.md
@@ -34,6 +34,7 @@ Handle the "headerCellRender" of the Grid to customize the header cells and if t
 This is an example showcasing this approach:
 
 {% meta id:index height:500 %}
-{% embed_file grid/remove-select-all/main.jsx preview %}
+{% embed_file grid/remove-select-all/app.jsx preview %}
+{% embed_file grid/remove-select-all/main.jsx %}
 {% embed_file grid/remove-select-all/products.json %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-save-scroll-position-in-tabstrip.md b/docs/knowledge-base/grid-save-scroll-position-in-tabstrip.md
similarity index 92%
rename from knowledge-base/grid-save-scroll-position-in-tabstrip.md
rename to docs/knowledge-base/grid-save-scroll-position-in-tabstrip.md
index a2247097..3f99e66d 100644
--- a/knowledge-base/grid-save-scroll-position-in-tabstrip.md
+++ b/docs/knowledge-base/grid-save-scroll-position-in-tabstrip.md
@@ -34,6 +34,7 @@ For saving the scroll position, handle the onScroll event of the Grid and save t
 This is an example showcasing this approach:
 
 {% meta id:index height:500 %}
-{% embed_file grid/save-scroll-position-in-tabstrip/main.jsx preview %}
+{% embed_file grid/save-scroll-position-in-tabstrip/app.jsx preview %}
+{% embed_file grid/save-scroll-position-in-tabstrip/main.jsx %}
 {% embed_file grid/save-scroll-position-in-tabstrip/products.json %}
 {% endmeta %} 
\ No newline at end of file
diff --git a/knowledge-base/grid-scheduler-drag-and-drop-mobile.md b/docs/knowledge-base/grid-scheduler-drag-and-drop-mobile.md
similarity index 81%
rename from knowledge-base/grid-scheduler-drag-and-drop-mobile.md
rename to docs/knowledge-base/grid-scheduler-drag-and-drop-mobile.md
index a3a23fc6..189bf4ea 100644
--- a/knowledge-base/grid-scheduler-drag-and-drop-mobile.md
+++ b/docs/knowledge-base/grid-scheduler-drag-and-drop-mobile.md
@@ -39,8 +39,9 @@ This will required the following setup:
 1. When the user drops an item we add it to the Scheduler data updating the state.
 
 {% meta id:index height:900 %}
-{% embed_file scheduler/dnd-from-grid/main.jsx preview %}
-{% embed_file shared/data.js %}
+{% embed_file scheduler/dnd-from-grid/app.jsx preview %}
+{% embed_file scheduler/dnd-from-grid/main.jsx %}
+{% embed_file shared/shared-data.js %}
 {% endmeta %}
 
 ## Enabling the drag and drop on mobile devices
@@ -48,17 +49,19 @@ This will required the following setup:
 This can be achieved by using the KendoReact [Drag&Drop](https://www.telerik.com/kendo-react-ui/components/utils/drag-and-drop/) utility with a custom `DragHandleCell` with touchAction set to `none`:
 
 {% meta id:index height:900 %}
-{% embed_file scheduler/dnd-from-grid-mobile/draggable/main.jsx preview %}
+{% embed_file scheduler/dnd-from-grid-mobile/draggable/app.jsx preview %}
+{% embed_file scheduler/dnd-from-grid-mobile/draggable/main.jsx %}
 {% embed_file scheduler/dnd-from-grid-mobile/draggable/drag-handle-cell.jsx %}
 {% embed_file scheduler/dnd-from-grid-mobile/draggable/draggable-row.jsx %}
-{% embed_file shared/data.js %}
-{% embed_file shared/products.json %}
+{% embed_file shared/shared-data.js %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
 
 
 The native Drag & Drop API does not support touch events by default. It is possible to enable the drag and drop functionality on mobile devices by using a polyfill as well:
 
 {% meta id:index height:900 %}
-{% embed_file scheduler/dnd-from-grid-mobile/polyfill/main.jsx preview %}
-{% embed_file shared/data.js %}
+{% embed_file scheduler/dnd-from-grid-mobile/polyfill/app.jsx preview %}
+{% embed_file scheduler/dnd-from-grid-mobile/polyfill/main.jsx %}
+{% embed_file shared/shared-data.js %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-scheduler-drag-and-drop.md b/docs/knowledge-base/grid-scheduler-drag-and-drop.md
similarity index 90%
rename from knowledge-base/grid-scheduler-drag-and-drop.md
rename to docs/knowledge-base/grid-scheduler-drag-and-drop.md
index 91a37446..382dbb56 100644
--- a/knowledge-base/grid-scheduler-drag-and-drop.md
+++ b/docs/knowledge-base/grid-scheduler-drag-and-drop.md
@@ -39,6 +39,7 @@ This will required the following setup:
 1. When the user drops an item we add it to the Scheduler data updating the state.
 
 {% meta id:index height:900 %}
-{% embed_file scheduler/dnd-from-grid/main.jsx preview %}
-{% embed_file shared/data.js %}
+{% embed_file scheduler/dnd-from-grid/app.jsx preview %}
+{% embed_file scheduler/dnd-from-grid/main.jsx %}
+{% embed_file shared/shared-data.js %}
 {% endmeta %}
diff --git a/knowledge-base/grid-search.md b/docs/knowledge-base/grid-search.md
similarity index 79%
rename from knowledge-base/grid-search.md
rename to docs/knowledge-base/grid-search.md
index 8f37c48e..7941c303 100644
--- a/knowledge-base/grid-search.md
+++ b/docs/knowledge-base/grid-search.md
@@ -34,6 +34,7 @@ How can I implement a search bar in the Grid?
 This can be achieved by creating a custom input.
 
 {% meta id height:500 %}
-{% embed_file grid/grid-search-bar/main.tsx preview %}
-{% embed_file grid/grid-search-bar/sample-products.tsx preview %}
+{% embed_file grid/grid-search-bar/app.tsx preview %}
+{% embed_file grid/grid-search-bar/main.tsx %}
+{% embed_file grid/grid-search-bar/sample-products.tsx %}
 {% endmeta %}
diff --git a/knowledge-base/grid-selection-mobile-scrolling.md b/docs/knowledge-base/grid-selection-mobile-scrolling.md
similarity index 90%
rename from knowledge-base/grid-selection-mobile-scrolling.md
rename to docs/knowledge-base/grid-selection-mobile-scrolling.md
index 00a3cf59..c285f26d 100644
--- a/knowledge-base/grid-selection-mobile-scrolling.md
+++ b/docs/knowledge-base/grid-selection-mobile-scrolling.md
@@ -34,9 +34,10 @@ Use checkbox selection instead. You can enable checkbox selection only when the
 Here is an example with the described approach, where we are importing the `useDeviceType` method from the `isMobile.jsx` file. This method is used when setting the `selectable` property of the Grid such that it is set to `null` when the device type is either a mobile or tablet. This leaves us with only the checkbox selection:
 
 {% meta id height:550 %}
-{% embed_file grid/grid-selection-mobile-scrolling/main.jsx preview %}
+{% embed_file grid/grid-selection-mobile-scrolling/app.jsx preview %}
+{% embed_file grid/grid-selection-mobile-scrolling/main.jsx %}
 {% embed_file grid/grid-selection-mobile-scrolling/isMobile.jsx %}
-{% embed_file shared/products.json %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
 
 For more information about enabling checkbox selection, check the following example from the Grid Selection article:
diff --git a/knowledge-base/grid-show-details-in-popover.md b/docs/knowledge-base/grid-show-details-in-popover.md
similarity index 89%
rename from knowledge-base/grid-show-details-in-popover.md
rename to docs/knowledge-base/grid-show-details-in-popover.md
index de4363d5..7ce72f07 100644
--- a/knowledge-base/grid-show-details-in-popover.md
+++ b/docs/knowledge-base/grid-show-details-in-popover.md
@@ -34,6 +34,7 @@ For achieving the desired result, the dataItem for which the button is clicked m
 This is an example showcasing this approach:
 
 {% meta id:index height:480 %}
-{% embed_file grid/grid-show-details-in-popover/main.jsx preview %}
+{% embed_file grid/grid-show-details-in-popover/app.jsx preview %}
+{% embed_file grid/grid-show-details-in-popover/main.jsx %}
 {% embed_file grid/grid-show-details-in-popover/myCommandCell.jsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-show-different-field-in-group.md b/docs/knowledge-base/grid-show-different-field-in-group.md
similarity index 89%
rename from knowledge-base/grid-show-different-field-in-group.md
rename to docs/knowledge-base/grid-show-different-field-in-group.md
index 9d57cafe..f7f97586 100644
--- a/knowledge-base/grid-show-different-field-in-group.md
+++ b/docs/knowledge-base/grid-show-different-field-in-group.md
@@ -34,6 +34,7 @@ For achieving the desired result we need to ensure that all items grouped by fie
 This is an example showcasing this approach:
 
 {% meta id:index height:520 %}
-{% embed_file grid/grid-show-different-field-in-group/main.jsx preview %}
+{% embed_file grid/grid-show-different-field-in-group/app.jsx preview %}
+{% embed_file grid/grid-show-different-field-in-group/main.jsx %}
 {% embed_file grid/grid-show-different-field-in-group/products.json %} 
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grid-show-hide-columns.md b/docs/knowledge-base/grid-show-hide-columns.md
similarity index 88%
rename from knowledge-base/grid-show-hide-columns.md
rename to docs/knowledge-base/grid-show-hide-columns.md
index df6b30de..45a395ea 100644
--- a/knowledge-base/grid-show-hide-columns.md
+++ b/docs/knowledge-base/grid-show-hide-columns.md
@@ -36,6 +36,7 @@ In order to achieve this, the Columns of the Grid should be rendered dynamically
 
 
 {% meta id height:650 %}
-{% embed_file grid/show-hide-columns/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/show-hide-columns/app.jsx preview %}
+{% embed_file grid/show-hide-columns/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-show-placeholder-for-filters.md b/docs/knowledge-base/grid-show-placeholder-for-filters.md
similarity index 90%
rename from knowledge-base/grid-show-placeholder-for-filters.md
rename to docs/knowledge-base/grid-show-placeholder-for-filters.md
index f3c262bf..2ecbb05c 100644
--- a/knowledge-base/grid-show-placeholder-for-filters.md
+++ b/docs/knowledge-base/grid-show-placeholder-for-filters.md
@@ -38,7 +38,8 @@ Following is an example demonstrating how to set a placeholder for NumericTextBo
 
 
 {% meta id height:480 %}
-{% embed_file grid/grid-show-placeholder-for-filters/main.jsx preview %}
+{% embed_file grid/grid-show-placeholder-for-filters/app.jsx preview %}
+{% embed_file grid/grid-show-placeholder-for-filters/main.jsx %}
 {% embed_file grid/grid-show-placeholder-for-filters/grid-with-filtering.jsx %}
 {% embed_file grid/grid-show-placeholder-for-filters/sample-products.js %}
 {% endmeta %}
diff --git a/knowledge-base/grid-stateful.md b/docs/knowledge-base/grid-stateful.md
similarity index 97%
rename from knowledge-base/grid-stateful.md
rename to docs/knowledge-base/grid-stateful.md
index b4a1f945..cc96cf7c 100644
--- a/knowledge-base/grid-stateful.md
+++ b/docs/knowledge-base/grid-stateful.md
@@ -114,7 +114,8 @@ You can sort, filter, or page the local data to which the KendoReact Data Grid i
 The following example demonstrates how to create a [higher-order component (HOC)](https://reactjs.org/docs/higher-order-components.html) which uses the `process()` Data Query method to manage the local data operations. The HOC has its own state and adds the `filter`, `sort`, `total`, and `skip` props to the Grid to handle its [`onDataStateChange`]({% slug api_grid_gridprops %}#toc-ondatastatechange) event. The HOC function is then applied for binding two Grids to different sets of data without the need for you to write any logic for the filtering, sorting, and paging operations.
 
 {% meta id:stateful height:700 %}
-{% embed_file grid/stateful/main.jsx preview %}
+{% embed_file grid/stateful/app.jsx preview %}
+{% embed_file grid/stateful/main.jsx %}
 {% embed_file grid/stateful/with-state.jsx %}
-{% embed_file shared/products.json %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-store-columns-width-and-order.md b/docs/knowledge-base/grid-store-columns-width-and-order.md
similarity index 88%
rename from knowledge-base/grid-store-columns-width-and-order.md
rename to docs/knowledge-base/grid-store-columns-width-and-order.md
index b6dc030d..c6601399 100644
--- a/knowledge-base/grid-store-columns-width-and-order.md
+++ b/docs/knowledge-base/grid-store-columns-width-and-order.md
@@ -38,5 +38,6 @@ Following is an example demonstrating this approach:
  
 
 {% meta id height:500 %}
-{% embed_file grid/store-columns-width-and-order/main.jsx preview %}
+{% embed_file grid/store-columns-width-and-order/app.jsx preview %}
+{% embed_file grid/store-columns-width-and-order/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/grid-store-state-in-localstorage.md b/docs/knowledge-base/grid-store-state-in-localstorage.md
similarity index 88%
rename from knowledge-base/grid-store-state-in-localstorage.md
rename to docs/knowledge-base/grid-store-state-in-localstorage.md
index 18975d64..787af49f 100644
--- a/knowledge-base/grid-store-state-in-localstorage.md
+++ b/docs/knowledge-base/grid-store-state-in-localstorage.md
@@ -34,6 +34,7 @@ I want to preserve the Grid state between page reloads.
 You can achieve this by saving the DataState to the localStorage. When the dataState changes, store it in the localStore, and when the component loads, set the previously saved dataState from the localStorage.
 
 {% meta id:index height:480 %}
-{% embed_file grid/grid-save-datastate-to-localstorage/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/grid-save-datastate-to-localstorage/app.jsx preview %}
+{% embed_file grid/grid-save-datastate-to-localstorage/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/grid-using-fitColumns-method.md b/docs/knowledge-base/grid-using-fitColumns-method.md
similarity index 89%
rename from knowledge-base/grid-using-fitColumns-method.md
rename to docs/knowledge-base/grid-using-fitColumns-method.md
index 3031b88b..660c975a 100644
--- a/knowledge-base/grid-using-fitColumns-method.md
+++ b/docs/knowledge-base/grid-using-fitColumns-method.md
@@ -38,5 +38,6 @@ Following is an example demonstrating this approach:
  
 
 {% meta id height:450 %}
-{% embed_file grid/using-fitColumns-method/main.jsx preview %}
+{% embed_file grid/using-fitColumns-method/app.jsx preview %}
+{% embed_file grid/using-fitColumns-method/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/grid-virtual-scrolling-pagechange-event.md b/docs/knowledge-base/grid-virtual-scrolling-pagechange-event.md
similarity index 89%
rename from knowledge-base/grid-virtual-scrolling-pagechange-event.md
rename to docs/knowledge-base/grid-virtual-scrolling-pagechange-event.md
index 6ad09886..5be0b8d6 100644
--- a/knowledge-base/grid-virtual-scrolling-pagechange-event.md
+++ b/docs/knowledge-base/grid-virtual-scrolling-pagechange-event.md
@@ -38,5 +38,6 @@ Following is an example demonstrating this approach:
 
 
 {% meta id height:500 %}
-{% embed_file grid/virtual-scrolling-pagechange-event/main.jsx preview %}
+{% embed_file grid/virtual-scrolling-pagechange-event/app.jsx preview %}
+{% embed_file grid/virtual-scrolling-pagechange-event/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/gridcolumnmenucheckboxfilter-outside-grid.md b/docs/knowledge-base/gridcolumnmenucheckboxfilter-outside-grid.md
similarity index 87%
rename from knowledge-base/gridcolumnmenucheckboxfilter-outside-grid.md
rename to docs/knowledge-base/gridcolumnmenucheckboxfilter-outside-grid.md
index 90930017..9935bb33 100644
--- a/knowledge-base/gridcolumnmenucheckboxfilter-outside-grid.md
+++ b/docs/knowledge-base/gridcolumnmenucheckboxfilter-outside-grid.md
@@ -32,7 +32,8 @@ You can use the GridColumnMenuCheckboxFilter as a separate component for returni
 This is an example showcasing this approach where the filter expression is logged to the console:
 
 {% meta id:index height:700 %}
-{% embed_file grid/checkboxfilter-outside-grid/main.jsx preview %}
+{% embed_file grid/checkboxfilter-outside-grid/app.jsx preview %}
+{% embed_file grid/checkboxfilter-outside-grid/main.jsx %}
 {% embed_file grid/checkboxfilter-outside-grid/columnMenu.jsx %} 
-{% embed_file shared/products.json %} 
+{% embed_file shared/shared-products.json %} 
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/grouping-with-custom-cell.md b/docs/knowledge-base/grouping-with-custom-cell.md
similarity index 83%
rename from knowledge-base/grouping-with-custom-cell.md
rename to docs/knowledge-base/grouping-with-custom-cell.md
index d9e4d6c9..48237cf0 100644
--- a/knowledge-base/grouping-with-custom-cell.md
+++ b/docs/knowledge-base/grouping-with-custom-cell.md
@@ -35,6 +35,7 @@ KendoReact Grid looses cell alignment when using the cell prop with grouping.
 In this case, the issue occurs because when the `rowType` is `groupHeader` the cell has to return null.
 
 {% meta id:index height:600 %}
-{% embed_file grid/grouping-with-custom-cell/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/grouping-with-custom-cell/app.jsx preview %}
+{% embed_file grid/grouping-with-custom-cell/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/hide-kendoreact-notification-after-a-timeout.md b/docs/knowledge-base/hide-kendoreact-notification-after-a-timeout.md
similarity index 91%
rename from knowledge-base/hide-kendoreact-notification-after-a-timeout.md
rename to docs/knowledge-base/hide-kendoreact-notification-after-a-timeout.md
index 7e85d7b1..84116d51 100644
--- a/knowledge-base/hide-kendoreact-notification-after-a-timeout.md
+++ b/docs/knowledge-base/hide-kendoreact-notification-after-a-timeout.md
@@ -33,7 +33,8 @@ How to hide the Notification component automatically after a specific timeout.
 Currently, this can be done using the setTimeout function as shown in the example below.
 
 {% meta id:index height:300 %}
-{% embed_file notification/hide-after/main.jsx preview %}
+{% embed_file notification/hide-after/app.jsx preview %}
+{% embed_file notification/hide-after/main.jsx %}
 {% endmeta %}
 
 Also, there is a feature request for this in our portal and I can suggest voting for it as it will increase its chances to be implemented as a built-in feature:
diff --git a/knowledge-base/how-to-retain-checkbox-selection-with-server-paging.md b/docs/knowledge-base/how-to-retain-checkbox-selection-with-server-paging.md
similarity index 88%
rename from knowledge-base/how-to-retain-checkbox-selection-with-server-paging.md
rename to docs/knowledge-base/how-to-retain-checkbox-selection-with-server-paging.md
index 5c27db02..e0719b01 100644
--- a/knowledge-base/how-to-retain-checkbox-selection-with-server-paging.md
+++ b/docs/knowledge-base/how-to-retain-checkbox-selection-with-server-paging.md
@@ -35,6 +35,7 @@ How can I retain the selection of checkbox in the KendoReact Grid when I navigat
 Keep the selected items by their ids inside the state.
 
 {% meta id:index height:500 %}
-{% embed_file grid/checkbox-selection-server-side/main.jsx preview %}
+{% embed_file grid/checkbox-selection-server-side/app.jsx preview %}
+{% embed_file grid/checkbox-selection-server-side/main.jsx %}
 {% embed_file grid/checkbox-selection-server-side/products-loader.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/inputs-delayed-value-change.md b/docs/knowledge-base/inputs-delayed-value-change.md
similarity index 89%
rename from knowledge-base/inputs-delayed-value-change.md
rename to docs/knowledge-base/inputs-delayed-value-change.md
index e65a1c2d..96a7d4d4 100644
--- a/knowledge-base/inputs-delayed-value-change.md
+++ b/docs/knowledge-base/inputs-delayed-value-change.md
@@ -34,5 +34,6 @@ Having a delayed value is possible by introducing a second state variable and tr
 This is an example showcasing how to limit the value:
 
 {% meta height:300 %}
-{% embed_file inputs/inputs-delayed-value-change/main.jsx preview %} 
+{% embed_file inputs/inputs-delayed-value-change/app.jsx preview %} 
+{% embed_file inputs/inputs-delayed-value-change/main.jsx %} 
 {% endmeta %}
diff --git a/knowledge-base/listbox-keyboard-navigation.md b/docs/knowledge-base/listbox-keyboard-navigation.md
similarity index 87%
rename from knowledge-base/listbox-keyboard-navigation.md
rename to docs/knowledge-base/listbox-keyboard-navigation.md
index 1f0f0e55..d15884b1 100644
--- a/knowledge-base/listbox-keyboard-navigation.md
+++ b/docs/knowledge-base/listbox-keyboard-navigation.md
@@ -35,5 +35,6 @@ I want to implement keyboard navigation for the ListBox component.
 In order to implement the keyboard navigation functionality for the ListBox, wrap it with a `div` element and handle the `onKeyDown` event of the `div`. Inside the `onKeyDown` event handler, move the items and change their selection based on the pressed keys.
 
 {% meta height:500 %}
-{% embed_file listbox/listbox-keyboard-navigation/main.jsx preview %}
+{% embed_file listbox/listbox-keyboard-navigation/app.jsx preview %}
+{% embed_file listbox/listbox-keyboard-navigation/main.jsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/listbox-show-drag-clue.md b/docs/knowledge-base/listbox-show-drag-clue.md
similarity index 92%
rename from knowledge-base/listbox-show-drag-clue.md
rename to docs/knowledge-base/listbox-show-drag-clue.md
index 4fd92248..3e3cf2de 100644
--- a/knowledge-base/listbox-show-drag-clue.md
+++ b/docs/knowledge-base/listbox-show-drag-clue.md
@@ -34,7 +34,8 @@ For displaying a clue indicator for the drop position the onDragOver event shoul
 Within the onDrop and on each onDragOver we are clearing the class name that was previously added.
  
 {% meta height:500 %} 
-{% embed_file listbox/show-drag-clue/main.jsx preview %} 
+{% embed_file listbox/show-drag-clue/app.jsx preview %} 
+{% embed_file listbox/show-drag-clue/main.jsx %} 
 {% embed_file listbox/show-drag-clue/products.json  %} 
 {% embed_file listbox/show-drag-clue/styles.css  %} 
 {% endmeta %}
diff --git a/knowledge-base/listview-grouping.md b/docs/knowledge-base/listview-grouping.md
similarity index 88%
rename from knowledge-base/listview-grouping.md
rename to docs/knowledge-base/listview-grouping.md
index 77d71075..a82d0876 100644
--- a/knowledge-base/listview-grouping.md
+++ b/docs/knowledge-base/listview-grouping.md
@@ -38,6 +38,7 @@ The second step will be to create a template that will take advantage of the new
 This is an example showcasing how to limit the value:
  
 {% meta height:760 %}
-{% embed_file listview/listview-grouping/main.jsx preview %} 
-{% embed_file listview/listview-grouping/products.json preview %} 
+{% embed_file listview/listview-grouping/app.jsx preview %} 
+{% embed_file listview/listview-grouping/main.jsx %} 
+{% embed_file listview/listview-grouping/products.json %} 
 {% endmeta %}
diff --git a/knowledge-base/listview-scheduler-drag-and-drop.md b/docs/knowledge-base/listview-scheduler-drag-and-drop.md
similarity index 92%
rename from knowledge-base/listview-scheduler-drag-and-drop.md
rename to docs/knowledge-base/listview-scheduler-drag-and-drop.md
index 6565144e..5ff05a8c 100644
--- a/knowledge-base/listview-scheduler-drag-and-drop.md
+++ b/docs/knowledge-base/listview-scheduler-drag-and-drop.md
@@ -28,8 +28,9 @@ To enable drag and drop functionality between a KendoReact ListView and a KendoR
 1. When the user drops an item, add it to the Scheduler data by updating the state.
 
 {% meta id:index height:900 %}
-{% embed_file scheduler/dnd-from-listview/main.jsx preview %}
-{% embed_file shared/data.js %}
+{% embed_file scheduler/dnd-from-listview/app.jsx preview %}
+{% embed_file scheduler/dnd-from-listview/main.jsx %}
+{% embed_file shared/shared-data.js %}
 {% endmeta %}
 
 ## Notes
diff --git a/knowledge-base/localization-use-variable-in-messages.md b/docs/knowledge-base/localization-use-variable-in-messages.md
similarity index 89%
rename from knowledge-base/localization-use-variable-in-messages.md
rename to docs/knowledge-base/localization-use-variable-in-messages.md
index fdcb2a9d..ce591611 100644
--- a/knowledge-base/localization-use-variable-in-messages.md
+++ b/docs/knowledge-base/localization-use-variable-in-messages.md
@@ -34,7 +34,8 @@ Extend the LocalizationProvider by providing an option for executing a ${variabl
 This is an example showcasing this approach:
  
 {% meta height:320 %}
-{% embed_file localization/use-variable-in-messages/main.jsx preview %} 
+{% embed_file localization/use-variable-in-messages/app.jsx preview %} 
+{% embed_file localization/use-variable-in-messages/main.jsx %} 
 {% embed_file localization/use-variable-in-messages/Chooser.jsx %} 
 {% embed_file localization/use-variable-in-messages/Message.jsx %} 
 {% embed_file localization/use-variable-in-messages/messages.js %} 
diff --git a/knowledge-base/map-add-shape-titles.md b/docs/knowledge-base/map-add-shape-titles.md
similarity index 92%
rename from knowledge-base/map-add-shape-titles.md
rename to docs/knowledge-base/map-add-shape-titles.md
index 93ba5726..020c783b 100644
--- a/knowledge-base/map-add-shape-titles.md
+++ b/docs/knowledge-base/map-add-shape-titles.md
@@ -40,5 +40,6 @@ How can I add some title text for the shapes in the Map?
 The following example demonstrates how to add title text for Map shapes that are loaded from GeoJSON.
 
 {% meta height:700 %}
-{% embed_file map/add-shape-titles/main.jsx preview %}
+{% embed_file map/add-shape-titles/app.jsx preview %}
+{% embed_file map/add-shape-titles/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/map-custom-bubble-symbols.md b/docs/knowledge-base/map-custom-bubble-symbols.md
similarity index 92%
rename from knowledge-base/map-custom-bubble-symbols.md
rename to docs/knowledge-base/map-custom-bubble-symbols.md
index 5d74e043..39a5349b 100644
--- a/knowledge-base/map-custom-bubble-symbols.md
+++ b/docs/knowledge-base/map-custom-bubble-symbols.md
@@ -38,6 +38,7 @@ The following example demonstrates how to render 200-kilometer lines in West-Eas
 > The lines get longer the farther you go North, which is due to that fact that the example uses the [Mercator Projection](https://en.wikipedia.org/wiki/Mercator_projection).
 
 {% meta height:700 %}
-{% embed_file map/custom-bubble-symbols/main.tsx preview %}
+{% embed_file map/custom-bubble-symbols/app.tsx preview %}
+{% embed_file map/custom-bubble-symbols/main.tsx %}
 {% embed_file map/custom-bubble-symbols/urban-areas.json %}
 {% endmeta %}
diff --git a/knowledge-base/map-link-markers.md b/docs/knowledge-base/map-link-markers.md
similarity index 93%
rename from knowledge-base/map-link-markers.md
rename to docs/knowledge-base/map-link-markers.md
index 2203f9ad..809a7f74 100644
--- a/knowledge-base/map-link-markers.md
+++ b/docs/knowledge-base/map-link-markers.md
@@ -39,5 +39,6 @@ How can I draw a straight line between a marker and a location?
 The following example demonstrates how to draw a straight line between a marker and a location.
 
 {% meta height:700 %}
-{% embed_file map/link-markers/main.tsx preview %}
+{% embed_file map/link-markers/app.tsx preview %}
+{% embed_file map/link-markers/main.tsx %}
 {% endmeta %}
diff --git a/knowledge-base/merge-row-in-the-grid.md b/docs/knowledge-base/merge-row-in-the-grid.md
similarity index 84%
rename from knowledge-base/merge-row-in-the-grid.md
rename to docs/knowledge-base/merge-row-in-the-grid.md
index db024b0f..a5a203bb 100644
--- a/knowledge-base/merge-row-in-the-grid.md
+++ b/docs/knowledge-base/merge-row-in-the-grid.md
@@ -35,6 +35,7 @@ How can I merge rows in the KendoReact Data Grid?
 Use a [`cellRender`]({% slug api_grid_gridprops %}#toc-cellrender) and add `rowSpan` to the cells that need it.
 
 {% meta id:index height:760 %}
-{% embed_file grid/merge-rows/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/merge-rows/app.jsx preview %}
+{% embed_file grid/merge-rows/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/multiselect-color-tags.md b/docs/knowledge-base/multiselect-color-tags.md
similarity index 88%
rename from knowledge-base/multiselect-color-tags.md
rename to docs/knowledge-base/multiselect-color-tags.md
index 599b4981..5832c974 100644
--- a/knowledge-base/multiselect-color-tags.md
+++ b/docs/knowledge-base/multiselect-color-tags.md
@@ -34,5 +34,6 @@ How to color the selected tags of the MultiSelect based on a condition?
 This can be achieved by using the [`tagRender`]({% slug api_dropdowns_multiselectprops %}#toc-tagrender) property and setting the background color based on the required condition.
 
 {% meta id:index height:320 %}
-{% embed_file multiselect/multiselect-color-tags/main.jsx preview %}
+{% embed_file multiselect/multiselect-color-tags/app.jsx preview %}
+{% embed_file multiselect/multiselect-color-tags/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/multiselect-disable-items.md b/docs/knowledge-base/multiselect-disable-items.md
similarity index 90%
rename from knowledge-base/multiselect-disable-items.md
rename to docs/knowledge-base/multiselect-disable-items.md
index f63ebf73..12acc34c 100644
--- a/knowledge-base/multiselect-disable-items.md
+++ b/docs/knowledge-base/multiselect-disable-items.md
@@ -40,6 +40,7 @@ In addition, when clicking on a disabled item, the click event will happen on th
 This is an example demonstrating this implementation where the `Albania` item is disabled:
 
 {% meta id:index height:760 %}
-{% embed_file multiselect/multiselect-disable-items/main.jsx preview %}
-{% embed_file shared/countries.js %}
+{% embed_file multiselect/multiselect-disable-items/app.jsx preview %}
+{% embed_file multiselect/multiselect-disable-items/main.jsx %}
+{% embed_file shared/shared-countries.js %}
 {% endmeta %}
diff --git a/knowledge-base/multiselect-limit-input.md b/docs/knowledge-base/multiselect-limit-input.md
similarity index 83%
rename from knowledge-base/multiselect-limit-input.md
rename to docs/knowledge-base/multiselect-limit-input.md
index b121b0f9..ec9e5581 100644
--- a/knowledge-base/multiselect-limit-input.md
+++ b/docs/knowledge-base/multiselect-limit-input.md
@@ -34,6 +34,7 @@ How to Limit the user to be able to enter only two characters in the MultiSelect
 This can be achieved by limiting the input on the [onFilterChange](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/MultiSelectProps/#toc-onfilterchange) event:
 
 {% meta id:index height:900 %}
-{% embed_file multiselect/multiselect-limit-input/main.jsx preview %}
-{% embed_file shared/countries.js %}
+{% embed_file multiselect/multiselect-limit-input/app.jsx preview %}
+{% embed_file multiselect/multiselect-limit-input/main.jsx %}
+{% embed_file shared/shared-countries.js %}
 {% endmeta %}
diff --git a/knowledge-base/multiselect-reorder-tags.md b/docs/knowledge-base/multiselect-reorder-tags.md
similarity index 87%
rename from knowledge-base/multiselect-reorder-tags.md
rename to docs/knowledge-base/multiselect-reorder-tags.md
index 3c888e03..21aba232 100644
--- a/knowledge-base/multiselect-reorder-tags.md
+++ b/docs/knowledge-base/multiselect-reorder-tags.md
@@ -37,6 +37,7 @@ Can I reorder the selected values/tags in the MultiSelect?
 This is an example showcasing this in action:
 
 {% meta id:index height:280 %}
-{% embed_file multiselect/multiselect-reorder-tags/main.jsx preview %}
+{% embed_file multiselect/multiselect-reorder-tags/app.jsx preview %}
+{% embed_file multiselect/multiselect-reorder-tags/main.jsx %}
 {% embed_file multiselect/multiselect-reorder-tags/styles.css %} 
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/multiselect-select-all-checkbox.md b/docs/knowledge-base/multiselect-select-all-checkbox.md
similarity index 84%
rename from knowledge-base/multiselect-select-all-checkbox.md
rename to docs/knowledge-base/multiselect-select-all-checkbox.md
index 273a6ad4..1174eba8 100644
--- a/knowledge-base/multiselect-select-all-checkbox.md
+++ b/docs/knowledge-base/multiselect-select-all-checkbox.md
@@ -41,11 +41,13 @@ This is an example showcasing this in action:
 
 {% meta id:index height:480 %}
 {% variant title:Hooks %}
-{% embed_file multiselect/multiselect-select-all-checkbox/func/main.jsx preview %}
-{% embed_file shared/countries.js %}
+{% embed_file multiselect/multiselect-select-all-checkbox/func/app.jsx preview %}
+{% embed_file multiselect/multiselect-select-all-checkbox/func/main.jsx %}
+{% embed_file shared/shared-countries.js %}
 {% endvariant %}
 {% variant title:Classes %}
-{% embed_file multiselect/multiselect-select-all-checkbox/class/main.jsx preview %}
-{% embed_file shared/countries.js %}
+{% embed_file multiselect/multiselect-select-all-checkbox/class/app.jsx preview %}
+{% embed_file multiselect/multiselect-select-all-checkbox/class/main.jsx %}
+{% embed_file shared/shared-countries.js %}
 {% endvariant %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/multiselect-set-maximum-selection.md b/docs/knowledge-base/multiselect-set-maximum-selection.md
similarity index 91%
rename from knowledge-base/multiselect-set-maximum-selection.md
rename to docs/knowledge-base/multiselect-set-maximum-selection.md
index 62d29e9d..ca8d0593 100644
--- a/knowledge-base/multiselect-set-maximum-selection.md
+++ b/docs/knowledge-base/multiselect-set-maximum-selection.md
@@ -35,5 +35,6 @@ How to restrict the number of selected items in a KendoReact MultiSelect?
 This can be achieved by using the slice method and passing the number of items we wish to limit as an argument:
 
 {% meta id:index height:450 %}
-{% embed_file multiselect/multiselect-set-maximum-selection/main.jsx preview %}
+{% embed_file multiselect/multiselect-set-maximum-selection/app.jsx preview %}
+{% embed_file multiselect/multiselect-set-maximum-selection/main.jsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/multiselect-tags-and-tagrender.md b/docs/knowledge-base/multiselect-tags-and-tagrender.md
similarity index 95%
rename from knowledge-base/multiselect-tags-and-tagrender.md
rename to docs/knowledge-base/multiselect-tags-and-tagrender.md
index 22b119aa..d847dbb0 100644
--- a/knowledge-base/multiselect-tags-and-tagrender.md
+++ b/docs/knowledge-base/multiselect-tags-and-tagrender.md
@@ -32,5 +32,6 @@ The below example demonstrates this approach where the `tags` property is used t
 The tags are stored in the `tags` state variable where the first one stores the count of the selected items. When new items are added, in the `handleChange` event handler, they are pushed to the `tags` state variable. On the other had, when an item is removed by clicking on the item from the popup again, they are removed from the `tags` state variable using the `filter` method. In addition, the `tagRender` event handler renders a font icon depending in the `tagData.text` value.
 
 {% meta id:index height:700 %}
-{% embed_file multiselect/multiselect-tags-and-tagrender/main.jsx preview %}
+{% embed_file multiselect/multiselect-tags-and-tagrender/app.jsx preview %}
+{% embed_file multiselect/multiselect-tags-and-tagrender/main.jsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/multiselecttree-lazy-loading.md b/docs/knowledge-base/multiselecttree-lazy-loading.md
similarity index 95%
rename from knowledge-base/multiselecttree-lazy-loading.md
rename to docs/knowledge-base/multiselecttree-lazy-loading.md
index f09233a3..256bb7e0 100644
--- a/knowledge-base/multiselecttree-lazy-loading.md
+++ b/docs/knowledge-base/multiselecttree-lazy-loading.md
@@ -36,7 +36,8 @@ In addition, the loadingPanel is added to the MultiSelectTree element using Reac
 Moreover, in the `onExpandChange` method, set a 1000ms timeout in order to simulate an API call. Inside the `setTimeout` method, set the new expanded state and `loading` variable to false:
 
 {% meta id height:580 %}
-{% embed_file multiselecttree/multiselecttree-lazy-loading/main.jsx preview %}
+{% embed_file multiselecttree/multiselecttree-lazy-loading/app.jsx preview %}
+{% embed_file multiselecttree/multiselecttree-lazy-loading/main.jsx %}
 {% embed_file multiselecttree/multiselecttree-lazy-loading/multiselecttree-data-operations.jsx %}
 {% embed_file multiselecttree/multiselecttree-lazy-loading/style.css %}
 {% embed_file multiselecttree/multiselecttree-lazy-loading/tree-data.js %}
diff --git a/knowledge-base/multiviewcalendar-control-focus-date.md b/docs/knowledge-base/multiviewcalendar-control-focus-date.md
similarity index 92%
rename from knowledge-base/multiviewcalendar-control-focus-date.md
rename to docs/knowledge-base/multiviewcalendar-control-focus-date.md
index 4f88a049..6438859d 100644
--- a/knowledge-base/multiviewcalendar-control-focus-date.md
+++ b/docs/knowledge-base/multiviewcalendar-control-focus-date.md
@@ -39,5 +39,6 @@ The can be controlled by updating the focus date in the internal state of the Mu
 ```
 
 {% meta id:index height:600 %}
-{% embed_file dateinputs/multiviewcalendar-control-focus-date/main.jsx preview %}
+{% embed_file dateinputs/multiviewcalendar-control-focus-date/app.jsx preview %}
+{% embed_file dateinputs/multiviewcalendar-control-focus-date/main.jsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/nextjs-theme-switcher.md b/docs/knowledge-base/nextjs-theme-switcher.md
similarity index 100%
rename from knowledge-base/nextjs-theme-switcher.md
rename to docs/knowledge-base/nextjs-theme-switcher.md
diff --git a/knowledge-base/notification-stack-notifications.md b/docs/knowledge-base/notification-stack-notifications.md
similarity index 87%
rename from knowledge-base/notification-stack-notifications.md
rename to docs/knowledge-base/notification-stack-notifications.md
index dd382564..3ee91075 100644
--- a/knowledge-base/notification-stack-notifications.md
+++ b/docs/knowledge-base/notification-stack-notifications.md
@@ -35,6 +35,7 @@ Use an array state variable where the data for the notifications will be added a
 Here is an example with the above approach:
 
 {% meta id:index height:500 %}
-{% embed_file notification/stack-notifications/main.jsx preview %}
+{% embed_file notification/stack-notifications/app.jsx preview %}
+{% embed_file notification/stack-notifications/main.jsx %}
 {% embed_file notification/stack-notifications/styles.css %}
 {% endmeta %}
diff --git a/knowledge-base/numerictextbox-clear-value-on-esc-key.md b/docs/knowledge-base/numerictextbox-clear-value-on-esc-key.md
similarity index 92%
rename from knowledge-base/numerictextbox-clear-value-on-esc-key.md
rename to docs/knowledge-base/numerictextbox-clear-value-on-esc-key.md
index 8c8b75ad..bafde845 100644
--- a/knowledge-base/numerictextbox-clear-value-on-esc-key.md
+++ b/docs/knowledge-base/numerictextbox-clear-value-on-esc-key.md
@@ -34,5 +34,6 @@ Within React.useEffect, after the initialization of the component, add event lis
 Following is an example demonstrating this approach: 
 
 {% meta height:300 %}
-{% embed_file inputs/numerictextbox-clear-value-on-esc-key/main.jsx preview %} 
+{% embed_file inputs/numerictextbox-clear-value-on-esc-key/app.jsx preview %} 
+{% embed_file inputs/numerictextbox-clear-value-on-esc-key/main.jsx %} 
 {% endmeta %}
diff --git a/knowledge-base/panelbar-open-in-new-window.md b/docs/knowledge-base/panelbar-open-in-new-window.md
similarity index 94%
rename from knowledge-base/panelbar-open-in-new-window.md
rename to docs/knowledge-base/panelbar-open-in-new-window.md
index 55f7b334..3f96ab8f 100644
--- a/knowledge-base/panelbar-open-in-new-window.md
+++ b/docs/knowledge-base/panelbar-open-in-new-window.md
@@ -32,10 +32,11 @@ I want to have the option to open on right-click the PanelBarItem target in new
 The browser displays the "Open in new window" option on right-click when the element has "href", so in order to allow this for the PanelBarItem we need to add an anchor element with "href". This can be achieved by setting a custom "title" for the PanelBarItem that will render the anchor element.
 
 {% meta id height:650 %}
+{% embed_file layout/panelbar-open-in-new-window/app.jsx %}
 {% embed_file layout/panelbar-open-in-new-window/main.jsx %}
 {% embed_file layout/panelbar-open-in-new-window/About.jsx %} 
 {% embed_file layout/panelbar-open-in-new-window/Home.jsx %} 
-{% embed_file layout/panelbar-open-in-new-window/PanelBarNavContainer.jsx preview%}
+{% embed_file layout/panelbar-open-in-new-window/PanelBarNavContainer.jsx preview %}
 {% embed_file layout/panelbar-open-in-new-window/Products.jsx %}
 {% embed_file layout/panelbar-open-in-new-window/Team.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/panelbar-render-button-in-panelbaritem.md b/docs/knowledge-base/panelbar-render-button-in-panelbaritem.md
similarity index 92%
rename from knowledge-base/panelbar-render-button-in-panelbaritem.md
rename to docs/knowledge-base/panelbar-render-button-in-panelbaritem.md
index 1b918f7b..77562a0d 100644
--- a/knowledge-base/panelbar-render-button-in-panelbaritem.md
+++ b/docs/knowledge-base/panelbar-render-button-in-panelbaritem.md
@@ -32,5 +32,6 @@ I want to add a button in PanelBarItem but without selecting the item and withou
 Add a Button in the PanelBarItem and within the onClick event use preventDefault and stopPropagation over the event to stop the propagation to the PanelBar.
 
 {% meta id height:760 %}
-{% embed_file layout/panelbar-render-button-in-panelbaritem/main.jsx preview %}
+{% embed_file layout/panelbar-render-button-in-panelbaritem/app.jsx preview %}
+{% embed_file layout/panelbar-render-button-in-panelbaritem/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/pass-additional-props-to-custom-cell.md b/docs/knowledge-base/pass-additional-props-to-custom-cell.md
similarity index 100%
rename from knowledge-base/pass-additional-props-to-custom-cell.md
rename to docs/knowledge-base/pass-additional-props-to-custom-cell.md
diff --git a/knowledge-base/pdfexport-setup-proxy.md b/docs/knowledge-base/pdfexport-setup-proxy.md
similarity index 100%
rename from knowledge-base/pdfexport-setup-proxy.md
rename to docs/knowledge-base/pdfexport-setup-proxy.md
diff --git a/knowledge-base/popup-close-on-blur.md b/docs/knowledge-base/popup-close-on-blur.md
similarity index 89%
rename from knowledge-base/popup-close-on-blur.md
rename to docs/knowledge-base/popup-close-on-blur.md
index 803f8efd..4cb88645 100644
--- a/knowledge-base/popup-close-on-blur.md
+++ b/docs/knowledge-base/popup-close-on-blur.md
@@ -41,6 +41,7 @@ This can be done by:
 This is an example showcasing this:
 
 {% meta id:index height:300 %}
-{% embed_file popup/close-on-blur/main.jsx preview %}
+{% embed_file popup/close-on-blur/app.jsx preview %}
+{% embed_file popup/close-on-blur/main.jsx %}
 {% endmeta %}
 
diff --git a/knowledge-base/popup-close-on-click-outside.md b/docs/knowledge-base/popup-close-on-click-outside.md
similarity index 86%
rename from knowledge-base/popup-close-on-click-outside.md
rename to docs/knowledge-base/popup-close-on-click-outside.md
index 8a3ecadb..4d79bea3 100644
--- a/knowledge-base/popup-close-on-click-outside.md
+++ b/docs/knowledge-base/popup-close-on-click-outside.md
@@ -35,5 +35,6 @@ How can I close the Popup by clicking outside?
 Attach a global click handler that checks if the clicked element is the Popup and then  close it programmatically:
 
 {% meta id:index height:300 %}
-{% embed_file popup/close-on-click-outside/main.jsx preview %}
+{% embed_file popup/close-on-click-outside/app.jsx preview %}
+{% embed_file popup/close-on-click-outside/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/rangeslider-show-value-as-tooltip.md b/docs/knowledge-base/rangeslider-show-value-as-tooltip.md
similarity index 92%
rename from knowledge-base/rangeslider-show-value-as-tooltip.md
rename to docs/knowledge-base/rangeslider-show-value-as-tooltip.md
index c52262d3..41d37b73 100644
--- a/knowledge-base/rangeslider-show-value-as-tooltip.md
+++ b/docs/knowledge-base/rangeslider-show-value-as-tooltip.md
@@ -34,5 +34,6 @@ By default, the RangeSlider start and end points will show a tooltip with "Drag"
 This is an example showcasing how to limit the value:
 
 {% meta height:760 %}
-{% embed_file inputs/rangeslider-show-value-as-tooltip/main.jsx preview %} 
+{% embed_file inputs/rangeslider-show-value-as-tooltip/app.jsx preview %} 
+{% embed_file inputs/rangeslider-show-value-as-tooltip/main.jsx %} 
 {% endmeta %}
diff --git a/knowledge-base/rangeslider-slider-dots-title.md b/docs/knowledge-base/rangeslider-slider-dots-title.md
similarity index 86%
rename from knowledge-base/rangeslider-slider-dots-title.md
rename to docs/knowledge-base/rangeslider-slider-dots-title.md
index 01de9d0d..3f1e61ce 100644
--- a/knowledge-base/rangeslider-slider-dots-title.md
+++ b/docs/knowledge-base/rangeslider-slider-dots-title.md
@@ -34,5 +34,6 @@ I want to set the title of the RangeSlider to its dragged value.
 You can achieve this by passing a ref to the RangeSlider component. Use this ref to get the reference of the slider's dots, and set their title to the start and end values each time they are changed.
 
 {% meta id:index height:400 %}
-{% embed_file inputs/rangeslider-slider-dots-title/main.jsx preview %}
+{% embed_file inputs/rangeslider-slider-dots-title/app.jsx preview %}
+{% embed_file inputs/rangeslider-slider-dots-title/main.jsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/render-a-custom-content-inside-the-grid-group-header.md b/docs/knowledge-base/render-a-custom-content-inside-the-grid-group-header.md
similarity index 79%
rename from knowledge-base/render-a-custom-content-inside-the-grid-group-header.md
rename to docs/knowledge-base/render-a-custom-content-inside-the-grid-group-header.md
index 2c906a5a..33415d78 100644
--- a/knowledge-base/render-a-custom-content-inside-the-grid-group-header.md
+++ b/docs/knowledge-base/render-a-custom-content-inside-the-grid-group-header.md
@@ -35,8 +35,9 @@ I want to customize the content of the Grid group header.
 In order to achieve this, it is currently recommended to use the ['groupHeader`]({% slug api_grid_gridcellssettings %}#toc-groupheader) property.
 
 {% meta id:index height:760 %}
-{% embed_file grid/group-header-render/cells-header/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/group-header-render/cells-header/app.jsx preview %}
+{% embed_file grid/group-header-render/cells-header/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
 
 This can also be achieved using the Grid `cellRender` property
@@ -46,6 +47,7 @@ This can also be achieved using the Grid `cellRender` property
 The following example demonstrates how to modify the `groupHeader` of the Grid.
 
 {% meta id:index height:760 %}
-{% embed_file grid/group-header-render/main.jsx preview %}
-{% embed_file shared/products.json %}
+{% embed_file grid/group-header-render/app.jsx preview %}
+{% embed_file grid/group-header-render/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/request-every-ten-items.md b/docs/knowledge-base/request-every-ten-items.md
similarity index 87%
rename from knowledge-base/request-every-ten-items.md
rename to docs/knowledge-base/request-every-ten-items.md
index b1c653a4..b062da99 100644
--- a/knowledge-base/request-every-ten-items.md
+++ b/docs/knowledge-base/request-every-ten-items.md
@@ -36,5 +36,6 @@ This can be achieved by creating a shouldRequestData function that checks if the
 
 
 {% meta id height:480 %}
-{% embed_file dropdownlist/request-every-ten-items/main.tsx preview %}
+{% embed_file dropdownlist/request-every-ten-items/app.tsx preview %}
+{% embed_file dropdownlist/request-every-ten-items/main.tsx %}
 {% endmeta %}
diff --git a/knowledge-base/resize-table-in-the-editor.md b/docs/knowledge-base/resize-table-in-the-editor.md
similarity index 100%
rename from knowledge-base/resize-table-in-the-editor.md
rename to docs/knowledge-base/resize-table-in-the-editor.md
diff --git a/knowledge-base/scheduler-decrease-slot-height.md b/docs/knowledge-base/scheduler-decrease-slot-height.md
similarity index 100%
rename from knowledge-base/scheduler-decrease-slot-height.md
rename to docs/knowledge-base/scheduler-decrease-slot-height.md
diff --git a/knowledge-base/scheduler-export-to-ical.md b/docs/knowledge-base/scheduler-export-to-ical.md
similarity index 83%
rename from knowledge-base/scheduler-export-to-ical.md
rename to docs/knowledge-base/scheduler-export-to-ical.md
index 5d3c6ba4..ef9da72b 100644
--- a/knowledge-base/scheduler-export-to-ical.md
+++ b/docs/knowledge-base/scheduler-export-to-ical.md
@@ -37,6 +37,7 @@ This can be done using [ical.js](https://mozilla-comm.github.io/ical.js/) to pro
 This is an example demonstrating the implementation:
 
 {% meta id:index height:760 %}
-{% embed_file scheduler/export-to-ical/main.jsx preview %}
-{% embed_file shared/events-utc.js preview %}
+{% embed_file scheduler/export-to-ical/app.jsx preview %}
+{% embed_file scheduler/export-to-ical/main.jsx %}
+{% embed_file shared/shared-events-utc.js preview %}
 {% endmeta %}
diff --git a/knowledge-base/scheduler-get-start-end-values.md b/docs/knowledge-base/scheduler-get-start-end-values.md
similarity index 90%
rename from knowledge-base/scheduler-get-start-end-values.md
rename to docs/knowledge-base/scheduler-get-start-end-values.md
index 40d1ac2a..135b0b2c 100644
--- a/knowledge-base/scheduler-get-start-end-values.md
+++ b/docs/knowledge-base/scheduler-get-start-end-values.md
@@ -38,6 +38,7 @@ First, retrieve the first and last slots using the `.k-scheduler-body .k-schedul
 Following is an example demonstrates this approach:
 
 {% meta id height:500 %}
-{% embed_file scheduler/start-end-dates/main.jsx preview %}
-{% embed_file shared/events-utc.js preview %}
+{% embed_file scheduler/start-end-dates/app.jsx preview %}
+{% embed_file scheduler/start-end-dates/main.jsx %}
+{% embed_file shared/shared-events-utc.js preview %}
 {% endmeta %}
diff --git a/knowledge-base/scheduler-icon-in-group-header.md b/docs/knowledge-base/scheduler-icon-in-group-header.md
similarity index 89%
rename from knowledge-base/scheduler-icon-in-group-header.md
rename to docs/knowledge-base/scheduler-icon-in-group-header.md
index 72506757..ed182d4d 100644
--- a/knowledge-base/scheduler-icon-in-group-header.md
+++ b/docs/knowledge-base/scheduler-icon-in-group-header.md
@@ -37,6 +37,7 @@ The items in the resources data array have "text" property which accepts string
 This is an example demonstrating the implementation:
 
 {% meta id:index height:700 %}
-{% embed_file scheduler/icon-in-group-header/main.jsx preview %}
+{% embed_file scheduler/icon-in-group-header/app.jsx preview %}
+{% embed_file scheduler/icon-in-group-header/main.jsx %}
 {% embed_file scheduler/icon-in-group-header/data.js %}
 {% endmeta %}
diff --git a/knowledge-base/scheduler-recurring-event-in-form-editor.md b/docs/knowledge-base/scheduler-recurring-event-in-form-editor.md
similarity index 92%
rename from knowledge-base/scheduler-recurring-event-in-form-editor.md
rename to docs/knowledge-base/scheduler-recurring-event-in-form-editor.md
index fc96f296..5d99f42d 100644
--- a/knowledge-base/scheduler-recurring-event-in-form-editor.md
+++ b/docs/knowledge-base/scheduler-recurring-event-in-form-editor.md
@@ -34,7 +34,8 @@ You can add recurring events to a custom form editor by referencing the `recurre
 In the following example, when you double-click a recurring item, a Window component appears asking if you want to edit the current occurrence or the whole series
 
 {% meta id:index height:760 %}
-{% embed_file scheduler/recurring-event-form-editor/main.jsx preview%}
+{% embed_file scheduler/recurring-event-form-editor/app.jsx preview %}
+{% embed_file scheduler/recurring-event-form-editor/main.jsx %}
 {% embed_file scheduler/recurring-event-form-editor/custom-form-editor.jsx %}
 {% embed_file scheduler/recurring-event-form-editor/custom-dialog.jsx %}
 {% embed_file scheduler/recurring-event-form-editor/custom-form.jsx %}
diff --git a/knowledge-base/show-loading-indicator-in-the-kendoreact-grid.md b/docs/knowledge-base/show-loading-indicator-in-the-kendoreact-grid.md
similarity index 87%
rename from knowledge-base/show-loading-indicator-in-the-kendoreact-grid.md
rename to docs/knowledge-base/show-loading-indicator-in-the-kendoreact-grid.md
index b700e9cb..3ea5467e 100644
--- a/knowledge-base/show-loading-indicator-in-the-kendoreact-grid.md
+++ b/docs/knowledge-base/show-loading-indicator-in-the-kendoreact-grid.md
@@ -33,5 +33,6 @@ How to show a loading indicator when loading data from the server.
 Currently, this can be done using the loading panel element. This element can be shown and hidden conditionally.
 
 {% meta id:index height:500 %}
-{% embed_file grid/show-loading-indicator/main.jsx preview %}
+{% embed_file grid/show-loading-indicator/app.jsx preview %}
+{% embed_file grid/show-loading-indicator/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/slider-sliderlabel-single-click.md b/docs/knowledge-base/slider-sliderlabel-single-click.md
similarity index 89%
rename from knowledge-base/slider-sliderlabel-single-click.md
rename to docs/knowledge-base/slider-sliderlabel-single-click.md
index a42e2739..43e2cd66 100644
--- a/knowledge-base/slider-sliderlabel-single-click.md
+++ b/docs/knowledge-base/slider-sliderlabel-single-click.md
@@ -37,5 +37,6 @@ This can achieved by handling the component in controlled mode and handling the
 This is an example demonstrating this implementation:
 
 {% meta id:index height:760 %}
-{% embed_file inputs/slider-label-single-click/main.jsx preview %}
+{% embed_file inputs/slider-label-single-click/app.jsx preview %}
+{% embed_file inputs/slider-label-single-click/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/spinner-inside-submit-button.md b/docs/knowledge-base/spinner-inside-submit-button.md
similarity index 88%
rename from knowledge-base/spinner-inside-submit-button.md
rename to docs/knowledge-base/spinner-inside-submit-button.md
index b0c9da68..d59b0117 100644
--- a/knowledge-base/spinner-inside-submit-button.md
+++ b/docs/knowledge-base/spinner-inside-submit-button.md
@@ -34,5 +34,6 @@ This can be achieved by using the iconClass props and conditionally changing the
 ![Spinner Inside Submit Button](examples/form/spinner-inside-submit-button/spinner-inside-submit-button.gif)
 
 {% meta id:index height:500 %}
-{% embed_file form/spinner-inside-submit-button/main.jsx preview %}
+{% embed_file form/spinner-inside-submit-button/app.jsx preview %}
+{% embed_file form/spinner-inside-submit-button/main.jsx %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/splitbutton-disable-left-part.md b/docs/knowledge-base/splitbutton-disable-left-part.md
similarity index 88%
rename from knowledge-base/splitbutton-disable-left-part.md
rename to docs/knowledge-base/splitbutton-disable-left-part.md
index ad1852c2..2594ad44 100644
--- a/knowledge-base/splitbutton-disable-left-part.md
+++ b/docs/knowledge-base/splitbutton-disable-left-part.md
@@ -38,6 +38,7 @@ You can achieve this by setting `pointer-events` to `none:
  ```
 
 {% meta id:index height:500 %}
-{% embed_file splitbutton/disable-left-part/main.jsx preview %}
+{% embed_file splitbutton/disable-left-part/app.jsx preview %}
+{% embed_file splitbutton/disable-left-part/main.jsx %}
 {% embed_file splitbutton/disable-left-part/styles.css  %}
 {% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/stack-and-hide-notifications.md b/docs/knowledge-base/stack-and-hide-notifications.md
similarity index 90%
rename from knowledge-base/stack-and-hide-notifications.md
rename to docs/knowledge-base/stack-and-hide-notifications.md
index b64146c4..66bce67f 100644
--- a/knowledge-base/stack-and-hide-notifications.md
+++ b/docs/knowledge-base/stack-and-hide-notifications.md
@@ -34,7 +34,9 @@ In order to have multiple notifications of the same type, they need to be initia
 Hiding notifications can currently be done using the setTimeout function as shown in the example below.
 
 {% meta id:index height:480 %}
-{% embed_file notification/stack-and-hide-after/main.jsx preview %}
+{% embed_file notification/stack-and-hide-after/app.jsx preview %}
+{% embed_file notification/stack-and-hide-after/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
 
 Also, there is a feature request for having a property that sets the timeout of the notifications in our portal and I can suggest voting for it as it will increase its chances of being implemented as a built-in feature:
diff --git a/knowledge-base/stop-chart-animation.md b/docs/knowledge-base/stop-chart-animation.md
similarity index 100%
rename from knowledge-base/stop-chart-animation.md
rename to docs/knowledge-base/stop-chart-animation.md
diff --git a/knowledge-base/tabstrip-button-in-tabs.md b/docs/knowledge-base/tabstrip-button-in-tabs.md
similarity index 90%
rename from knowledge-base/tabstrip-button-in-tabs.md
rename to docs/knowledge-base/tabstrip-button-in-tabs.md
index 16b7201c..e99a297f 100644
--- a/knowledge-base/tabstrip-button-in-tabs.md
+++ b/docs/knowledge-base/tabstrip-button-in-tabs.md
@@ -34,5 +34,6 @@ The "title" property of the TabStripTab accepts string value and React Node and
 Following is an example demonstrating the approach:
 
 {% meta id height:500 %}
-{% embed_file layout/tabstrip-button-in-tabs/main.jsx preview %}
+{% embed_file layout/tabstrip-button-in-tabs/app.jsx preview %}
+{% embed_file layout/tabstrip-button-in-tabs/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/tabstrip-scrollbar-for-tabs.md b/docs/knowledge-base/tabstrip-scrollbar-for-tabs.md
similarity index 89%
rename from knowledge-base/tabstrip-scrollbar-for-tabs.md
rename to docs/knowledge-base/tabstrip-scrollbar-for-tabs.md
index 3e7f44d6..1d18da3f 100644
--- a/knowledge-base/tabstrip-scrollbar-for-tabs.md
+++ b/docs/knowledge-base/tabstrip-scrollbar-for-tabs.md
@@ -34,6 +34,7 @@ Set className to the TabStrip and apply custom styles for changing the overflow
 Following is an example with two TabStrips. The first one introduces scrollbar for the tabs and the content and the second one is with scrollbar only for the tabs.
 
 {% meta id height:500 %}
-{% embed_file layout/tabstrip-scrollbar-for-tabs/main.jsx preview %}
+{% embed_file layout/tabstrip-scrollbar-for-tabs/app.jsx preview %}
+{% embed_file layout/tabstrip-scrollbar-for-tabs/main.jsx %}
 {% embed_file layout/tabstrip-scrollbar-for-tabs/styles.css %}
 {% endmeta %}
diff --git a/knowledge-base/tilelayout-adapt-rowspan-content-dynamically.md b/docs/knowledge-base/tilelayout-adapt-rowspan-content-dynamically.md
similarity index 88%
rename from knowledge-base/tilelayout-adapt-rowspan-content-dynamically.md
rename to docs/knowledge-base/tilelayout-adapt-rowspan-content-dynamically.md
index 6596bb2c..bbdd7114 100644
--- a/knowledge-base/tilelayout-adapt-rowspan-content-dynamically.md
+++ b/docs/knowledge-base/tilelayout-adapt-rowspan-content-dynamically.md
@@ -32,5 +32,7 @@ To dynamically adjust the `rowSpan` value based on the content height, create a
 
 
 {% meta id height:500 %}
-{% embed_file layout/tilelayout-adapt-rowspan-content-dynamically/main.jsx preview %}
+{% embed_file layout/tilelayout-adapt-rowspan-content-dynamically/app.jsx preview %}
+{% embed_file layout/tilelayout-adapt-rowspan-content-dynamically/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/tooltip-in-grid.md b/docs/knowledge-base/tooltip-in-grid.md
similarity index 84%
rename from knowledge-base/tooltip-in-grid.md
rename to docs/knowledge-base/tooltip-in-grid.md
index 92c943a1..ed56cdca 100644
--- a/knowledge-base/tooltip-in-grid.md
+++ b/docs/knowledge-base/tooltip-in-grid.md
@@ -29,6 +29,7 @@ How can I render a KendoReact Tooltip inside a KendoReact Grid?
 Add titles to the cells of the Grid by setting the [`cell`]({% slug api_grid_gridcolumnprops %}#toc-cell) and [`headerCell`]({% slug api_grid_gridcolumnprops %}#toc-headercell) properties.
 
 {% meta height:450 %}
-{% embed_file grid/with-tooltip/main.jsx preview %}
-{% embed_file shared/products.json preview %}
+{% embed_file grid/with-tooltip/app.jsx preview %}
+{% embed_file grid/with-tooltip/main.jsx %}
+{% embed_file shared/shared-products.json %}
 {% endmeta %}
diff --git a/knowledge-base/treelist-custom-columnmenu-checkboxes.md b/docs/knowledge-base/treelist-custom-columnmenu-checkboxes.md
similarity index 87%
rename from knowledge-base/treelist-custom-columnmenu-checkboxes.md
rename to docs/knowledge-base/treelist-custom-columnmenu-checkboxes.md
index ce6fca47..d53157da 100644
--- a/knowledge-base/treelist-custom-columnmenu-checkboxes.md
+++ b/docs/knowledge-base/treelist-custom-columnmenu-checkboxes.md
@@ -34,8 +34,9 @@ How can I create a custom column menu filter with checkboxes for a column in the
 A custom column menu should be created through the [`filterContent`]({% slug api_datatools_columnmenuprops %}#toc-filtercontent) property to the custom filter we want to create. In the custom filter we can render a list with checkboxes, whose onChange event calls the onColumnMenuFilterChange event, which sets the state of the filter and updates the TreeList accordingly.
 
 {% meta id height:580 %}
-{% embed_file treelist/custom-columnmenu-checkboxes/main.jsx preview %}
+{% embed_file treelist/custom-columnmenu-checkboxes/app.jsx preview %}
+{% embed_file treelist/custom-columnmenu-checkboxes/main.jsx %}
 {% embed_file treelist/custom-columnmenu-checkboxes/checkboxFilterColumnMenu.jsx %}
 {% embed_file treelist/custom-columnmenu-checkboxes/data.js %}
-{% embed_file shared/treeListData.js %}
+{% embed_file shared/shared-treeListData.js %}
 {% endmeta %}
diff --git a/knowledge-base/treelist-custom-date-filter.md b/docs/knowledge-base/treelist-custom-date-filter.md
similarity index 88%
rename from knowledge-base/treelist-custom-date-filter.md
rename to docs/knowledge-base/treelist-custom-date-filter.md
index ab480b78..c844f960 100644
--- a/knowledge-base/treelist-custom-date-filter.md
+++ b/docs/knowledge-base/treelist-custom-date-filter.md
@@ -35,7 +35,8 @@ A custom column menu should be created through which we set the [`filterContent`
 We set the default operators through the [`initialFilter`]({% slug api_datatools_columnmenuprops %}#toc-initialfilter) property to match those of the filter we want to create, in this case greater than and equal to ("gte") and less than and equal to ("lte").
 
 {% meta id height:580 %}
-{% embed_file treelist/custom-columnmenu-date-filter/main.jsx preview %}
+{% embed_file treelist/custom-columnmenu-date-filter/app.jsx preview %}
+{% embed_file treelist/custom-columnmenu-date-filter/main.jsx %}
 {% embed_file treelist/custom-columnmenu-date-filter/dateColumnMenu.jsx %}
-{% embed_file shared/treeListData.js %}
+{% embed_file shared/shared-treeListData.js %}
 {% endmeta %}
diff --git a/knowledge-base/treelist-custom-editor.md b/docs/knowledge-base/treelist-custom-editor.md
similarity index 94%
rename from knowledge-base/treelist-custom-editor.md
rename to docs/knowledge-base/treelist-custom-editor.md
index 6483f1d9..70537405 100644
--- a/knowledge-base/treelist-custom-editor.md
+++ b/docs/knowledge-base/treelist-custom-editor.md
@@ -32,8 +32,9 @@ I want to change the default editor for the TreeList with one that supports maxL
 The TreeList columns have editCell that accepts not only the default editors that are provided in the package, but also a custom component. The following example shows how to define custom editor with input element where the maxLength attribute is set for limiting the number of characters:
 
 {% meta id height:580 %}
+{% embed_file treelist/treelist-custom-editor/app.jsx preview %}
 {% embed_file treelist/treelist-custom-editor/main.jsx preview %}
 {% embed_file treelist/treelist-custom-editor/data.js preview %}
 {% embed_file treelist/treelist-custom-editor/my-command-cell.jsx preview %}
 {% embed_file treelist/treelist-custom-editor/MyCustomTreeListTextEditor.js preview %}
-{% endmeta %}
+{% endmeta %}
\ No newline at end of file
diff --git a/knowledge-base/treelist-custom-expand-cell.md b/docs/knowledge-base/treelist-custom-expand-cell.md
similarity index 84%
rename from knowledge-base/treelist-custom-expand-cell.md
rename to docs/knowledge-base/treelist-custom-expand-cell.md
index 9c06ec67..a240f68f 100644
--- a/knowledge-base/treelist-custom-expand-cell.md
+++ b/docs/knowledge-base/treelist-custom-expand-cell.md
@@ -32,6 +32,7 @@ I want to define custom cell for the first column and I need the expand/collapse
 For achieving the desired result the custom cell should include logic for rendering the expand/collapse icon based on the props.dataItem.SUB_ITEM_FIELD length, props.expanded value and the level of the current cell. The level length is used for the empty space (based on the current level)
 
 {% meta id height:580 %}
-{% embed_file treelist/treelist-custom-expand-cell/main.jsx preview %}
-{% embed_file treelist/treelist-custom-expand-cell/data.js preview %}
+{% embed_file treelist/treelist-custom-expand-cell/app.jsx preview %}
+{% embed_file treelist/treelist-custom-expand-cell/main.jsx %}
+{% embed_file treelist/treelist-custom-expand-cell/data.js %}
 {% endmeta %}
diff --git a/knowledge-base/treelist-different-row-color-per-level.md b/docs/knowledge-base/treelist-different-row-color-per-level.md
similarity index 88%
rename from knowledge-base/treelist-different-row-color-per-level.md
rename to docs/knowledge-base/treelist-different-row-color-per-level.md
index a967cde9..e978bb95 100644
--- a/knowledge-base/treelist-different-row-color-per-level.md
+++ b/docs/knowledge-base/treelist-different-row-color-per-level.md
@@ -34,6 +34,7 @@ For achieving the desired result the rowRender of the TreeList can used for sett
 Following is an example demonstrating such implementation
 
 {% meta id height:580 %} 
-{% embed_file treelist/different-row-color-per-level/main.jsx preview %}
+{% embed_file treelist/different-row-color-per-level/app.jsx preview %}
+{% embed_file treelist/different-row-color-per-level/main.jsx %}
 {% embed_file treelist/different-row-color-per-level/data.js %}
 {% endmeta %}
diff --git a/knowledge-base/treelist-drag-and-drop.md b/docs/knowledge-base/treelist-drag-and-drop.md
similarity index 92%
rename from knowledge-base/treelist-drag-and-drop.md
rename to docs/knowledge-base/treelist-drag-and-drop.md
index db311770..6ec0cb68 100644
--- a/knowledge-base/treelist-drag-and-drop.md
+++ b/docs/knowledge-base/treelist-drag-and-drop.md
@@ -40,5 +40,6 @@ This requires the following:
 This can be seen in action in the following example:
 
 {% meta id height:500 %}
-{% embed_file treelist/drag-and-drop/main.jsx preview %}
+{% embed_file treelist/drag-and-drop/app.jsx preview %}
+{% embed_file treelist/drag-and-drop/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/treelist-drag-drop-to-element.md b/docs/knowledge-base/treelist-drag-drop-to-element.md
similarity index 91%
rename from knowledge-base/treelist-drag-drop-to-element.md
rename to docs/knowledge-base/treelist-drag-drop-to-element.md
index aef20976..0b8567ac 100644
--- a/knowledge-base/treelist-drag-drop-to-element.md
+++ b/docs/knowledge-base/treelist-drag-drop-to-element.md
@@ -40,6 +40,7 @@ This requires the following:
 Following is an example with the described approach:
 
 {% meta id height:700 %}
-{% embed_file treelist/drag-drop-to-element/main.jsx preview %}
+{% embed_file treelist/drag-drop-to-element/app.jsx preview %}
+{% embed_file treelist/drag-drop-to-element/main.jsx %}
 {% embed_file treelist/drag-drop-to-element/data.js  %}
 {% endmeta %}
diff --git a/knowledge-base/treelist-focus-input-on-edit.md b/docs/knowledge-base/treelist-focus-input-on-edit.md
similarity index 91%
rename from knowledge-base/treelist-focus-input-on-edit.md
rename to docs/knowledge-base/treelist-focus-input-on-edit.md
index ce99f515..d11ab3bd 100644
--- a/knowledge-base/treelist-focus-input-on-edit.md
+++ b/docs/knowledge-base/treelist-focus-input-on-edit.md
@@ -36,7 +36,8 @@ Use React Context for passing the ID value from the state to the cellRender of t
 Following is an example demonstrating such implementation
 
 {% meta id height:650 %} 
-{% embed_file treelist/treelist-focus-input-on-edit/main.jsx preview %}
+{% embed_file treelist/treelist-focus-input-on-edit/app.jsx preview %}
+{% embed_file treelist/treelist-focus-input-on-edit/main.jsx %}
 {% embed_file treelist/treelist-focus-input-on-edit/data.js %}
 {% embed_file treelist/treelist-focus-input-on-edit/my-command-cell.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/treelist-locked-columns-resizing.md b/docs/knowledge-base/treelist-locked-columns-resizing.md
similarity index 94%
rename from knowledge-base/treelist-locked-columns-resizing.md
rename to docs/knowledge-base/treelist-locked-columns-resizing.md
index 5ddc0f8e..e6348953 100644
--- a/knowledge-base/treelist-locked-columns-resizing.md
+++ b/docs/knowledge-base/treelist-locked-columns-resizing.md
@@ -37,6 +37,7 @@ Set the width of the TreeList through "tableProps.style.width" and set a "ref".
 Following is an example demonstrating such implementation
 
 {% meta id height:650 %} 
-{% embed_file treelist/treelist-locked-columns-resizing/main.jsx preview %}
+{% embed_file treelist/treelist-locked-columns-resizing/app.jsx preview %}
+{% embed_file treelist/treelist-locked-columns-resizing/main.jsx %}
 {% embed_file treelist/treelist-locked-columns-resizing/data.js %}
 {% endmeta %}
diff --git a/knowledge-base/treelist-pager-at-bottom.md b/docs/knowledge-base/treelist-pager-at-bottom.md
similarity index 87%
rename from knowledge-base/treelist-pager-at-bottom.md
rename to docs/knowledge-base/treelist-pager-at-bottom.md
index 18a4c86b..b8e03292 100644
--- a/knowledge-base/treelist-pager-at-bottom.md
+++ b/docs/knowledge-base/treelist-pager-at-bottom.md
@@ -36,7 +36,8 @@ A custom [`Pager`]({% slug pi_datatools_pagerprops %}) should be rendered below
 
 
 {% meta id height:650 %}
-{% embed_file treelist/pager-at-bottom/main.jsx preview %}
+{% embed_file treelist/pager-at-bottom/app.jsx preview %}
+{% embed_file treelist/pager-at-bottom/main.jsx %}
 {% embed_file treelist/pager-at-bottom/pager.jsx %}
-{% embed_file shared/treelist-data.js %}
+{% embed_file shared/shared-treelist-data.js %}
 {% endmeta %}
diff --git a/knowledge-base/treelist-validation.md b/docs/knowledge-base/treelist-validation.md
similarity index 95%
rename from knowledge-base/treelist-validation.md
rename to docs/knowledge-base/treelist-validation.md
index b562c6a1..86a7abe0 100644
--- a/knowledge-base/treelist-validation.md
+++ b/docs/knowledge-base/treelist-validation.md
@@ -36,7 +36,8 @@ In order to add validation to the cell that is being edited, render a custom edi
 The example below demonstrates this approach where the variable `isValid` is set to `false` when the input length is less or equal to 4. Based on its value, the `valid` prop of the KendoReact Input component is set and shows a validation message. In addition, in the `save` function, the state is set only when `isValid` is set to true:
 
 {% meta id:index height:500 %}
-{% embed_file treelist/treelist-inline-editing-validation/main.jsx preview %}
+{% embed_file treelist/treelist-inline-editing-validation/app.jsx preview %}
+{% embed_file treelist/treelist-inline-editing-validation/main.jsx %}
 {% embed_file treelist/treelist-inline-editing-validation/my-command-cell.jsx %}
 {% embed_file treelist/treelist-inline-editing-validation/data.js %}
 {% endmeta %}
diff --git a/knowledge-base/treeview-add-items-dynamically.md b/docs/knowledge-base/treeview-add-items-dynamically.md
similarity index 86%
rename from knowledge-base/treeview-add-items-dynamically.md
rename to docs/knowledge-base/treeview-add-items-dynamically.md
index 9185ebde..fca2e8be 100644
--- a/knowledge-base/treeview-add-items-dynamically.md
+++ b/docs/knowledge-base/treeview-add-items-dynamically.md
@@ -35,5 +35,6 @@ I want to dynamically add child Nodes to the KendoReact TreeView.
 You can achieve this by rendering an external Button under the TreeView which opens a Window component. In the Window component, you can render an Input and update the data with the entered input value.
 
 {% meta id:index height:500 %}
-{% embed_file treeview/treeview-adding-nodes/main.jsx preview %}
+{% embed_file treeview/treeview-adding-nodes/app.jsx preview %}
+{% embed_file treeview/treeview-adding-nodes/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/treeview-deleting.md b/docs/knowledge-base/treeview-deleting.md
similarity index 90%
rename from knowledge-base/treeview-deleting.md
rename to docs/knowledge-base/treeview-deleting.md
index 8b10d7c4..61c66c3f 100644
--- a/knowledge-base/treeview-deleting.md
+++ b/docs/knowledge-base/treeview-deleting.md
@@ -33,5 +33,6 @@ Since the delete function will be within the main component where the TreeView i
 Following is an example demonstrating the approach:
 
 {% meta id:index height:480 %}
-{% embed_file treeview/treeview-deleting/main.jsx preview %}
+{% embed_file treeview/treeview-deleting/app.jsx preview %}
+{% embed_file treeview/treeview-deleting/main.jsx %}
 {% endmeta %} 
diff --git a/knowledge-base/treeview-editing.md b/docs/knowledge-base/treeview-editing.md
similarity index 86%
rename from knowledge-base/treeview-editing.md
rename to docs/knowledge-base/treeview-editing.md
index fde07ee3..17b17998 100644
--- a/knowledge-base/treeview-editing.md
+++ b/docs/knowledge-base/treeview-editing.md
@@ -31,5 +31,6 @@ How can I edit the nodes of the KendoReact TreeView?
 Use the [`itemRender`]({% slug api_treeview_treeviewprops %}#toc-itemrender) to render an input that is bound to the node value on click.
 
 {% meta id:index height:500 %}
-{% embed_file treeview/treeview-editing/main.jsx preview %}
+{% embed_file treeview/treeview-editing/app.jsx preview %}
+{% embed_file treeview/treeview-editing/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/treeview-search.md b/docs/knowledge-base/treeview-search.md
similarity index 87%
rename from knowledge-base/treeview-search.md
rename to docs/knowledge-base/treeview-search.md
index 2f63c889..8b69c49f 100644
--- a/knowledge-base/treeview-search.md
+++ b/docs/knowledge-base/treeview-search.md
@@ -31,5 +31,6 @@ How can I enable the search through the data of the KendoReact TreeView?
 You need to have an external input and based on that input value, you can then filter the data of the TreeView.
 
 {% meta id:index height:500 %}
-{% embed_file treeview/treeview-search/main.jsx preview %}
+{% embed_file treeview/treeview-search/app.jsx preview %}
+{% embed_file treeview/treeview-search/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/upload-change-messages.md b/docs/knowledge-base/upload-change-messages.md
similarity index 88%
rename from knowledge-base/upload-change-messages.md
rename to docs/knowledge-base/upload-change-messages.md
index 2fc36db6..0236bc5b 100644
--- a/knowledge-base/upload-change-messages.md
+++ b/docs/knowledge-base/upload-change-messages.md
@@ -33,5 +33,6 @@ Use the KendoReact Localization feature and its "loadMessages" and "Localization
 This is an example showcasing this:
 
 {% meta id:index height:400 %}
-{% embed_file upload/upload-change-messages/main.jsx preview %}
+{% embed_file upload/upload-change-messages/app.jsx preview %}
+{% embed_file upload/upload-change-messages/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/upload-icon-for-upload-button.md b/docs/knowledge-base/upload-icon-for-upload-button.md
similarity index 85%
rename from knowledge-base/upload-icon-for-upload-button.md
rename to docs/knowledge-base/upload-icon-for-upload-button.md
index 2173d7b5..a4c86fed 100644
--- a/knowledge-base/upload-icon-for-upload-button.md
+++ b/docs/knowledge-base/upload-icon-for-upload-button.md
@@ -33,5 +33,6 @@ Set custom content for the select button through the "selectMessageUI" and place
 This is an example showcasing this:
 
 {% meta id:index height:360 %}
-{% embed_file upload/upload-icon-for-upload-button/main.jsx preview %}
+{% embed_file upload/upload-icon-for-upload-button/app.jsx preview %}
+{% embed_file upload/upload-icon-for-upload-button/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/upload-paste-image-from-clipboard.md b/docs/knowledge-base/upload-paste-image-from-clipboard.md
similarity index 93%
rename from knowledge-base/upload-paste-image-from-clipboard.md
rename to docs/knowledge-base/upload-paste-image-from-clipboard.md
index 2a24b9b5..3e9b9583 100644
--- a/knowledge-base/upload-paste-image-from-clipboard.md
+++ b/docs/knowledge-base/upload-paste-image-from-clipboard.md
@@ -44,5 +44,6 @@ This will require the following setup:
 This is an example showcasing this:
 
 {% meta id:index height:650 %}
-{% embed_file upload/paste-image/main.jsx preview %}
+{% embed_file upload/paste-image/app.jsx preview %}
+{% embed_file upload/paste-image/main.jsx %}
 {% endmeta %}
diff --git a/knowledge-base/window-animations.md b/docs/knowledge-base/window-animations.md
similarity index 100%
rename from knowledge-base/window-animations.md
rename to docs/knowledge-base/window-animations.md
diff --git a/docs/main.tsx b/docs/main.tsx
new file mode 100644
index 00000000..0e1c3eb3
--- /dev/null
+++ b/docs/main.tsx
@@ -0,0 +1,31 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+import React from 'react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Index from './_app';
+import ErrorPage from './_error';
+import routes from './routes';
+
+const init = async () => {
+    const allRoutes = await routes();
+    const router = createBrowserRouter([
+        {
+            path: "/",
+            element: <Index routes={allRoutes} />,
+            errorElement: <ErrorPage />
+        },
+        ...allRoutes
+    ]);
+
+    const root = ReactDOM.createRoot(
+        document.querySelector('my-app') as HTMLElement
+    );
+
+    root.render(
+        <StrictMode>
+            <RouterProvider router={router} />
+        </StrictMode>
+    );
+};
+
+init();
\ No newline at end of file
diff --git a/knowledge-base/examples/package-lock.json b/docs/package-lock.json
similarity index 68%
rename from knowledge-base/examples/package-lock.json
rename to docs/package-lock.json
index 37d837c1..cc5d6686 100644
--- a/knowledge-base/examples/package-lock.json
+++ b/docs/package-lock.json
@@ -10,28 +10,68 @@
       "dependencies": {
         "@progress/kendo-drawing": "^1.20.0",
         "@progress/kendo-licensing": "^1.3.5",
-        "@progress/kendo-react-buttons": "^7.4.0",
-        "@progress/kendo-react-dialogs": "^7.4.0",
-        "@progress/kendo-react-dropdowns": "^7.4.0",
-        "@progress/kendo-react-editor": "^7.4.0",
-        "@progress/kendo-react-inputs": "^7.4.0",
-        "@progress/kendo-react-intl": "^7.4.0",
-        "@progress/kendo-react-layout": "^7.4.0",
-        "@progress/kendo-react-pdf": "^7.4.0",
-        "@progress/kendo-react-popup": "^7.4.0",
-        "@progress/kendo-react-progressbars": "^7.4.0",
-        "@progress/kendo-svg-icons": "^2.3.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      },
-      "devDependencies": {
+        "@progress/kendo-react-animation": "^8.0.0",
+        "@progress/kendo-react-barcodes": "^8.0.0",
+        "@progress/kendo-react-buttons": "^8.0.0",
+        "@progress/kendo-react-charts": "^8.0.0",
+        "@progress/kendo-react-common": "^8.0.0",
+        "@progress/kendo-react-conversational-ui": "^8.0.0",
+        "@progress/kendo-react-data-tools": "^8.0.0",
+        "@progress/kendo-react-dateinputs": "^8.0.0",
+        "@progress/kendo-react-dialogs": "^8.0.0",
+        "@progress/kendo-react-dropdowns": "^8.0.0",
+        "@progress/kendo-react-editor": "^8.0.0",
+        "@progress/kendo-react-excel-export": "^8.0.0",
+        "@progress/kendo-react-form": "^8.0.0",
+        "@progress/kendo-react-gantt": "^8.0.0",
+        "@progress/kendo-react-gauges": "^8.0.0",
+        "@progress/kendo-react-grid": "^8.0.0",
+        "@progress/kendo-react-indicators": "^8.0.0",
+        "@progress/kendo-react-inputs": "^8.0.0",
+        "@progress/kendo-react-intl": "^8.0.0",
+        "@progress/kendo-react-labels": "^8.0.0",
+        "@progress/kendo-react-layout": "^8.0.0",
+        "@progress/kendo-react-listbox": "^8.0.0",
+        "@progress/kendo-react-listview": "^8.0.0",
+        "@progress/kendo-react-map": "^8.0.0",
+        "@progress/kendo-react-notification": "^8.0.0",
+        "@progress/kendo-react-pdf": "^8.0.0",
+        "@progress/kendo-react-pdf-viewer": "^8.0.0",
+        "@progress/kendo-react-pivotgrid": "^8.0.0",
+        "@progress/kendo-react-popup": "^8.0.0",
+        "@progress/kendo-react-progressbars": "^8.0.0",
+        "@progress/kendo-react-ripple": "^8.0.0",
+        "@progress/kendo-react-scheduler": "^8.0.0",
+        "@progress/kendo-react-scrollview": "^8.0.0",
+        "@progress/kendo-react-sortable": "^8.0.0",
+        "@progress/kendo-react-taskboard": "^8.0.0",
+        "@progress/kendo-react-tooltip": "^8.0.0",
+        "@progress/kendo-react-treelist": "^8.0.0",
+        "@progress/kendo-react-treeview": "^8.0.0",
+        "@progress/kendo-react-upload": "^8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "@progress/kendo-theme-bootstrap": "^8.0.1",
+        "@progress/kendo-theme-default": "^8.0.1",
+        "@progress/kendo-theme-fluent": "^8.0.1",
+        "@progress/kendo-theme-material": "^8.0.1",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
+        "calculate-size": "1.1.1",
+        "ical.js": "^2.0.1",
+        "prosemirror-mentions": "^1.0.2",
+        "react-csv": "^2.2.2"
+      },
+      "devDependencies": {
+        "@types/node": "^20.12.12",
         "@vitejs/plugin-react": "^4.2.1",
         "eslint": "^8.57.0",
         "eslint-plugin-react": "^7.34.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.15.0",
+        "sass": "1.62.1",
         "vite": "^5.2.0"
       }
     },
@@ -917,6 +957,40 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mapbox/node-pre-gyp": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
+      "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "make-dir": "^3.1.0",
+        "node-fetch": "^2.6.7",
+        "nopt": "^5.0.0",
+        "npmlog": "^5.0.1",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.5",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "node-pre-gyp": "bin/node-pre-gyp"
+      }
+    },
+    "node_modules/@mapbox/node-pre-gyp/node_modules/semver": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
+      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -952,54 +1026,109 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@progress/jszip-esm": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@progress/jszip-esm/-/jszip-esm-1.0.3.tgz",
+      "integrity": "sha512-qu5qeIlUsJX0Z2oi3Aax3gvfjKrrtVzQ2LIEhmw2CVWffZ0JvtifiomyJOc0ZFk7oEyEyrVvab97bqKkNCKvfQ==",
+      "dependencies": {
+        "@progress/pako-esm": "^1.0.1"
+      }
+    },
+    "node_modules/@progress/kendo-charts": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-charts/-/kendo-charts-2.2.0.tgz",
+      "integrity": "sha512-diMx9oG6VtjGlLSqwtfozYfR9fsSg9DOHo0NSKP4D2WjjsmI0QBfKs0XHQqKmDsxn53+GxBKhbY5GMZLphqQEA==",
+      "peerDependencies": {
+        "@progress/kendo-drawing": "^1.19.0"
+      }
+    },
+    "node_modules/@progress/kendo-common": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-common/-/kendo-common-0.2.2.tgz",
+      "integrity": "sha512-VwHyVXJ5o92pnljtmIULYVYUhyY9BXaPVTjLNMOc5MuYr2PU4tmpyzfJI/MeyfL1PuHJlgw7KqJJhvPqrOduNQ==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^1.7.0"
+      }
+    },
+    "node_modules/@progress/kendo-data-query": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-data-query/-/kendo-data-query-1.7.0.tgz",
+      "integrity": "sha512-mB+2WZFAZghxRwBhgWiJIysx7qcFkilnbcZWq0AfQ3KXfC3N5IY/EuKJNijhYrTdauYA1eL1GMe2FHsOWAlRHA==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^1.7.0"
+      }
+    },
+    "node_modules/@progress/kendo-date-math": {
+      "version": "1.5.12",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-date-math/-/kendo-date-math-1.5.12.tgz",
+      "integrity": "sha512-cELK9aNVUu20a71FLnYd7JhBhCXk8NsFd9tu6n/LZJvOYzCYQ6J4XIVDc2RwLvbrD7MlBw4YARX1IIsESg7thg==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^1.7.0"
+      }
+    },
+    "node_modules/@progress/kendo-draggable": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-draggable/-/kendo-draggable-3.1.0.tgz",
+      "integrity": "sha512-S5AHF9uiy44um+06ABJcjZn/wpO3ZwLahd2BhiTd7NeBVPt5lkj2bjdmkd88GEIIBKmT7FOK308WUt5/MmKVTQ=="
+    },
     "node_modules/@progress/kendo-draggable-common": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/@progress/kendo-draggable-common/-/kendo-draggable-common-0.2.3.tgz",
       "integrity": "sha512-e1FraFsT7zwevswzZlQYL//K+fzmRUvkr/4emp51dzkARLDtGd95BtPNSoXYRG5xYHeueKBS75hzVwQI6Dm3Dg==",
-      "peer": true,
       "dependencies": {
         "tslib": "^1.7.0"
       }
     },
-    "node_modules/@progress/kendo-draggable-common/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "peer": true
-    },
     "node_modules/@progress/kendo-drawing": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-drawing/-/kendo-drawing-1.20.0.tgz",
-      "integrity": "sha512-UbUdtp4iCKZZt42AmDURP+9fCdw1qAHpzhHAzIjNYiF3aze7qoPEJhFBuT1dI4VX+nEEl0Buso0INOcrcgCYrg==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-drawing/-/kendo-drawing-1.20.1.tgz",
+      "integrity": "sha512-1ihKFZ7vMrqaIPlmXooYWm0/nDvrGWvh0Y1AkRhI1OmfzuvLkEFOUG+MgQgg+/P421RV1hhAWPtd8JER/MwDHQ==",
       "dependencies": {
         "@progress/pako-esm": "^1.0.1"
       }
     },
     "node_modules/@progress/kendo-editor-common": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-editor-common/-/kendo-editor-common-1.11.1.tgz",
-      "integrity": "sha512-DxwLELB4KmJnDzC9N1UoC9oD7JG1WSmPC1L8LtE+0yQj1wDuZu4K6vFY1u/9qI9WVhULhg4QhQiF47Ci0UvIZw==",
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-editor-common/-/kendo-editor-common-1.11.4.tgz",
+      "integrity": "sha512-vUTVu4ufG90vlOsfTgDuYDP2d4W2AU+wFp8lizSe4NIPEc1YWdm/wDOAJpiQpXr+FIZsBO9mIW7c2m8mK7JFMg==",
       "dependencies": {
         "prosemirror-commands": "1.5.2",
         "prosemirror-dropcursor": "1.8.1",
         "prosemirror-gapcursor": "1.3.2",
-        "prosemirror-history": "1.3.2",
-        "prosemirror-inputrules": "1.3.0",
+        "prosemirror-history": "1.4.0",
+        "prosemirror-inputrules": "1.4.0",
         "prosemirror-keymap": "1.2.2",
-        "prosemirror-model": "1.19.3",
+        "prosemirror-model": "1.21.0",
         "prosemirror-schema-list": "1.3.0",
         "prosemirror-state": "1.4.3",
-        "prosemirror-tables": "1.3.5",
-        "prosemirror-transform": "1.8.0",
-        "prosemirror-view": "1.32.6",
+        "prosemirror-tables": "1.3.7",
+        "prosemirror-transform": "1.9.0",
+        "prosemirror-view": "1.33.6",
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@progress/kendo-editor-common/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
     "node_modules/@progress/kendo-file-saver": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@progress/kendo-file-saver/-/kendo-file-saver-1.1.1.tgz",
-      "integrity": "sha512-mo0Cw3MLoLcx2bA+Ma/VAxkM9vHSJ4Sg0vgh6U1ZIvPXmnfO8Dgsdiv/475lafyju0kG8KOhl3bcVagCF71glQ==",
-      "peer": true
+      "integrity": "sha512-mo0Cw3MLoLcx2bA+Ma/VAxkM9vHSJ4Sg0vgh6U1ZIvPXmnfO8Dgsdiv/475lafyju0kG8KOhl3bcVagCF71glQ=="
     },
     "node_modules/@progress/kendo-inputs-common": {
       "version": "3.1.1",
@@ -1013,6 +1142,12 @@
         "@progress/kendo-drawing": "^1.17.0"
       }
     },
+    "node_modules/@progress/kendo-inputs-common/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "peer": true
+    },
     "node_modules/@progress/kendo-intl": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@progress/kendo-intl/-/kendo-intl-3.1.2.tgz",
@@ -1031,6 +1166,46 @@
         "kendo-ui-license": "bin/kendo-ui-license.js"
       }
     },
+    "node_modules/@progress/kendo-ooxml": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-ooxml/-/kendo-ooxml-1.9.0.tgz",
+      "integrity": "sha512-XkW23MU1snvNvn/hKFvRsrzrxJuRGeexbeXupouclqHJv8prhkFfAo8xlU7b+4bw362oI3eRXklvAPWdMYnA4w==",
+      "dependencies": {
+        "@progress/jszip-esm": "^1.0.3",
+        "@progress/pako-esm": "^1.0.1"
+      }
+    },
+    "node_modules/@progress/kendo-pdfviewer-common": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-pdfviewer-common/-/kendo-pdfviewer-common-0.2.10.tgz",
+      "integrity": "sha512-qIYK9vdohO1UaxJ5kdn9dfGnctUq9oiQ+E2ZDQ4bkkhjYTbvlGh64CTfAAqyd92rjIXwXX03jKGaPdfxqlz6iw==",
+      "peer": true,
+      "dependencies": {
+        "@progress/kendo-common": "^0.2.2",
+        "pdfjs-dist": "^3.11.174",
+        "tslib": "^2.4.1"
+      },
+      "peerDependencies": {
+        "@progress/kendo-draggable": "^3.1.0",
+        "@progress/kendo-file-saver": "^1.1.1"
+      }
+    },
+    "node_modules/@progress/kendo-pdfviewer-common/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "peer": true
+    },
+    "node_modules/@progress/kendo-pivotgrid-common": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-pivotgrid-common/-/kendo-pivotgrid-common-0.6.0.tgz",
+      "integrity": "sha512-JabfnEonCyi7Bf4HIPsQGzk+AOctcrvGXL7YVuGBxEj0HhiCNvYRLGJyYBCJ2CbYLErJ1ixweMnfD5wnbrIe+w==",
+      "peer": true,
+      "dependencies": {
+        "@progress/kendo-data-query": "^1.5.5",
+        "tslib": "^1.7.0"
+      }
+    },
     "node_modules/@progress/kendo-popup-common": {
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/@progress/kendo-popup-common/-/kendo-popup-common-1.9.2.tgz",
@@ -1038,283 +1213,847 @@
       "peer": true
     },
     "node_modules/@progress/kendo-react-animation": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-animation/-/kendo-react-animation-7.4.0.tgz",
-      "integrity": "sha512-A1TpFRo2AqJD2AOZslYnUhRzyK+kqQoyW4L/Rp5goftuR6mVc9xUAhndrOyDp1YiV+WGUG8PgXPZeV8CZnMQVg==",
-      "peer": true,
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-animation/-/kendo-react-animation-8.0.0.tgz",
+      "integrity": "sha512-hdPonoenqxlchRXtEFIsuhzCgnwLeWTGXeRxx4+rcDgCEq3kuwqZjdBLb8q4KhIgp/rRnolaZZVgSXwgKURw9g==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-common": "7.4.0",
-        "@progress/kendo-svg-icons": "^2.1.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-transition-group": "^4.4.2"
       }
     },
+    "node_modules/@progress/kendo-react-barcodes": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-barcodes/-/kendo-react-barcodes-8.0.0.tgz",
+      "integrity": "sha512-4IxiahmFr8zNovyBzQM+SnkupswaVtreS5JofNYQEO7kgcbHHYvJy3YBHlbhnnyCXjlptJ7J3lrEe8Vo1ZqGuA==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-charts": "2.2.0",
+        "@progress/kendo-drawing": "^1.20.1",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "hammerjs": "^2.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@progress/kendo-react-buttons": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-buttons/-/kendo-react-buttons-7.4.0.tgz",
-      "integrity": "sha512-ICzakkBYj0Mjbwf0Bfh9/2cZdBxQV/ZWbYioJrgWVXONQqJtdIVPZKj1GnjOP4F3MvtcLyUkIlffqCTrpmjelQ==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-buttons/-/kendo-react-buttons-8.0.0.tgz",
+      "integrity": "sha512-0S17gUDm54YT8Moypf742I4bsx86eC2/OwcSzV4DO1fLX7kzLsFoeRKSS0NNU3OKwJDS6ohx+cRgcrYMPXZBIw==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-common": "7.4.0",
-        "@progress/kendo-react-popup": "7.4.0",
-        "@progress/kendo-svg-icons": "^2.1.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@progress/kendo-react-charts": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-charts/-/kendo-react-charts-8.0.0.tgz",
+      "integrity": "sha512-9TIt41Z2igUSaReukxMfXvA3M0SWSAPK03d1Af+BMlG6fkUwuNCKoaoAtf+3I8i9MK99y/WoHPZWGDvUF/7ZFw==",
+      "dependencies": {
+        "@progress/kendo-charts": "2.3.0",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-drawing": "^1.20.1",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-layout": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "hammerjs": "^2.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-charts/node_modules/@progress/kendo-charts": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-charts/-/kendo-charts-2.3.0.tgz",
+      "integrity": "sha512-Jm9+iCU+1r/VMFyJCHKI6KA7NaQqyoM3jS7/WpT/8Udi2mNqDGG7nZcM4274XuH9+t2nKAXWLPO+ospati5fSg==",
+      "peerDependencies": {
+        "@progress/kendo-drawing": "^1.20.0"
+      }
+    },
     "node_modules/@progress/kendo-react-common": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-common/-/kendo-react-common-7.4.0.tgz",
-      "integrity": "sha512-xp25FSc1sfPBRH27b3qzVhgjXMny1EJ9G8L25UO/GCRdpTqfSQWDCCUqoYGjGQSzRlNC8ED8WewzBKrfR3w/gA==",
-      "peer": true,
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-common/-/kendo-react-common-8.0.0.tgz",
+      "integrity": "sha512-pCh8ATEeZApEAK1CKEsajGUhgC7BBWhESu5D98HSi7dfHN7ldMnCyN1SxjRpdcOWwNln42U60rKiBD8bStLOLw==",
       "dependencies": {
         "@progress/kendo-draggable-common": "^0.2.3",
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-svg-icons": "^2.1.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-conversational-ui": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-conversational-ui/-/kendo-react-conversational-ui-8.0.0.tgz",
+      "integrity": "sha512-raIsC7ifpkWcsbdTdeAzmpoXD+qm9m7209s7jw30HBY9UVs8ooO8f0e5QpoQvmXIYZAvMAtVfBvl+nGPwG+RhA==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-inputs": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-layout": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-data-tools": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-data-tools/-/kendo-react-data-tools-8.0.0.tgz",
+      "integrity": "sha512-NabpP+PD90UtRKGx7kzkwxjVakkFNfSaPBhm8Y2PIu/1AntIS2ja6VdB0I9Q33w5pF8jRKXSv3IUkFpzOEHV7g==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-data-query": "^1.0.0",
+        "@progress/kendo-drawing": "^1.20.1",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-animation": "8.0.0",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-dateinputs": "8.0.0",
+        "@progress/kendo-react-dropdowns": "8.0.0",
+        "@progress/kendo-react-inputs": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-dateinputs": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-dateinputs/-/kendo-react-dateinputs-8.0.0.tgz",
+      "integrity": "sha512-ObT9edfJ1+F47TQYnSxAjvtTowTV48P5d6IIBHTrP8L+p0VGlFdnT0XHSifNno2/2XHsDnJtrhyagLAOWDMMOg==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-date-math": "^1.4.0",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-labels": "8.0.0",
+        "@progress/kendo-react-layout": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-dialogs": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-dialogs/-/kendo-react-dialogs-7.4.0.tgz",
-      "integrity": "sha512-Tet1cKbBYsOckdxDhBEUb60nyiYFIj2b3eY2lbWw/1hZNc0Bc00UD9ijcIfmAaF6UFmbfgUFV/a03pNE8mkDhQ==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-dialogs/-/kendo-react-dialogs-8.0.0.tgz",
+      "integrity": "sha512-Im4kKj5D3VYUb3L24AG90bO2v50VAVr0I9dK0Hg4QL2MicucuB3PlQ1L8Dmfwa9MpRKW8RM+PKjusyGV2eyohw==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-buttons": "7.4.0",
-        "@progress/kendo-react-common": "7.4.0",
-        "@progress/kendo-svg-icons": "^2.1.0",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-dropdowns": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-dropdowns/-/kendo-react-dropdowns-7.4.0.tgz",
-      "integrity": "sha512-pl2AgzoNxbcEDqk1POz9xlr+3ZtHk5K0If95/Yk9u4vkI3Ca0QjJeQQ1ASqXCbXLoJYwKKzDtlMnrbPX/dnM6w==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-dropdowns/-/kendo-react-dropdowns-8.0.0.tgz",
+      "integrity": "sha512-mVgpsuF+feijRD4i0mU9vC6/u491ZVrrS+XVyttERqRdouDxaSEKuQGtRnvqhOl4V4Knv54WXF+V1DQgLzhIJg==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-buttons": "7.4.0",
-        "@progress/kendo-react-common": "7.4.0",
-        "@progress/kendo-react-inputs": "7.4.0",
-        "@progress/kendo-react-intl": "7.4.0",
-        "@progress/kendo-react-labels": "7.4.0",
-        "@progress/kendo-react-layout": "7.4.0",
-        "@progress/kendo-react-popup": "7.4.0",
-        "@progress/kendo-react-treeview": "7.4.0",
-        "@progress/kendo-svg-icons": "^2.1.0",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-inputs": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-labels": "8.0.0",
+        "@progress/kendo-react-layout": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-react-treeview": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-editor": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-editor/-/kendo-react-editor-7.4.0.tgz",
-      "integrity": "sha512-7avA1hlcJtGhB2OIIokMf2YBDTfy4fjmxSTaoaIOZeY09pnfS2pmwXpeUiNHGE35TpqL4HndBU0ueaUB2+ilkw==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-editor/-/kendo-react-editor-8.0.0.tgz",
+      "integrity": "sha512-h7ncZeZRot2r07Sudv1gSI4xpIWYjubedlHkLgMCB47D4SN1dhQEurjGZ6Y7yxUu+qWCikBM+EkAe7v5ULMDbg==",
+      "dependencies": {
+        "@progress/kendo-editor-common": "1.11.4",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-drawing": "^1.20.1",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-dialogs": "8.0.0",
+        "@progress/kendo-react-dropdowns": "8.0.0",
+        "@progress/kendo-react-form": "8.0.0",
+        "@progress/kendo-react-inputs": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-layout": "8.0.0",
+        "@progress/kendo-react-pdf": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-excel-export": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-excel-export/-/kendo-react-excel-export-8.0.0.tgz",
+      "integrity": "sha512-hb84Q049Zb13PRSQFTRGfMiRIQb0AWPWse1QvbgSMvDvwB8v8KyAVDq71SxmyZhXeHfLoAk9Wo5Ong23CYw1aA==",
       "dependencies": {
-        "@progress/kendo-editor-common": "1.11.1",
+        "@progress/kendo-file-saver": "^1.0.0",
+        "@progress/kendo-ooxml": "^1.6.3",
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
-        "@progress/kendo-drawing": "^1.19.0",
+        "@progress/kendo-data-query": "^1.0.0",
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-buttons": "7.4.0",
-        "@progress/kendo-react-common": "7.4.0",
-        "@progress/kendo-react-dialogs": "7.4.0",
-        "@progress/kendo-react-dropdowns": "7.4.0",
-        "@progress/kendo-react-form": "7.4.0",
-        "@progress/kendo-react-inputs": "7.4.0",
-        "@progress/kendo-react-intl": "7.4.0",
-        "@progress/kendo-react-layout": "7.4.0",
-        "@progress/kendo-react-pdf": "7.4.0",
-        "@progress/kendo-react-popup": "7.4.0",
-        "@progress/kendo-svg-icons": "^2.1.0",
+        "@progress/kendo-react-common": "8.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-form": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-form/-/kendo-react-form-7.4.0.tgz",
-      "integrity": "sha512-+IMfM+Ndwptqte4OkJlHZHuxrfiT9tELD+dLTxD3ft4AviURtXWRLTBvzU+aPfWhCBL7ZE26a2PeUD2fTyc1qA==",
-      "peer": true,
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-form/-/kendo-react-form-8.0.0.tgz",
+      "integrity": "sha512-YTFBIVTQR8laTOmoKjenrGoPymosCZCRFkuhv6xwRAbUmIO74ObjTjTKpxxp2IC5IShWY4uZDNUm9HZ5urcriQ==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-common": "7.4.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-gantt": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-gantt/-/kendo-react-gantt-8.0.0.tgz",
+      "integrity": "sha512-9N07koFXlc/iaHr9tMDkfMvE0RK36AoRj6upaSYlYq3260xUTHpIZYZUNPnIKljYS1HIUkaPLjUx7C5FtfkDSA==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-data-query": "^1.0.0",
+        "@progress/kendo-date-math": "^1.4.1",
+        "@progress/kendo-drawing": "^1.20.1",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-data-tools": "8.0.0",
+        "@progress/kendo-react-dateinputs": "8.0.0",
+        "@progress/kendo-react-dialogs": "8.0.0",
+        "@progress/kendo-react-dropdowns": "8.0.0",
+        "@progress/kendo-react-form": "8.0.0",
+        "@progress/kendo-react-inputs": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-labels": "8.0.0",
+        "@progress/kendo-react-treelist": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-gauges": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-gauges/-/kendo-react-gauges-8.0.0.tgz",
+      "integrity": "sha512-gYJuON30zSURkWLDZ5dPQyRBcb1PjsGqtlKWYMFLr0BizFfzzoXPkR3rT0aS9d6WjNFF+LQ6riZ36R5vK3hBPg==",
+      "dependencies": {
+        "@progress/kendo-charts": "2.2.0",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-drawing": "^1.20.1",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "hammerjs": "^2.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-grid": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-grid/-/kendo-react-grid-8.0.0.tgz",
+      "integrity": "sha512-Y2drcRa9nph5o7hnguwEYqUuC8EBJ1ixNVQqp/L7MifYP7xmsLdkwplp+6DInpFzgzfg3Xl2C93cgCTCSCF35g==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-data-query": "^1.0.0",
+        "@progress/kendo-drawing": "^1.20.1",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-animation": "8.0.0",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-data-tools": "8.0.0",
+        "@progress/kendo-react-dateinputs": "8.0.0",
+        "@progress/kendo-react-dropdowns": "8.0.0",
+        "@progress/kendo-react-inputs": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-indicators": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-indicators/-/kendo-react-indicators-8.0.0.tgz",
+      "integrity": "sha512-aaRhqWS5Nm+yhFc2wG864NvDrFL8Cm1/pg1I8oVnVYHxzmfdxTllpBGqEZmz4h0GvIqhFzNS8XYJ4KDBxnAzJQ==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-common": "8.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-inputs": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-inputs/-/kendo-react-inputs-7.4.0.tgz",
-      "integrity": "sha512-xWIYYQ1RZ6kZSSw5Igdws/APQ6j5j+Szfx29CE0mJ/GWfJrD2/r58L3109VyZK4wskfuAC8oiASPWBePJIZwbw==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-inputs/-/kendo-react-inputs-8.0.0.tgz",
+      "integrity": "sha512-O3Pgy/+vLYOtKUJiHbAoappbNuON2HUgDvSQV2qB1OWwJMPA4CdSkFTXGuyYUGxOHfL4EURX+cvaHp9+IDoRLg==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
-        "@progress/kendo-drawing": "^1.19.0",
+        "@progress/kendo-drawing": "^1.20.1",
         "@progress/kendo-inputs-common": "^3.1.0",
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-animation": "7.4.0",
-        "@progress/kendo-react-buttons": "7.4.0",
-        "@progress/kendo-react-common": "7.4.0",
-        "@progress/kendo-react-dialogs": "7.4.0",
-        "@progress/kendo-react-intl": "7.4.0",
-        "@progress/kendo-react-labels": "7.4.0",
-        "@progress/kendo-react-popup": "7.4.0",
-        "@progress/kendo-svg-icons": "^2.1.0",
+        "@progress/kendo-react-animation": "8.0.0",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-dialogs": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-labels": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-intl": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-intl/-/kendo-react-intl-7.4.0.tgz",
-      "integrity": "sha512-xVoqsdaqZ/9MFfSbX/TKI/GZFKdYwIePORIhSGP1+TW4fkOOW4l8p3M3MX1n6Ve1WfiljOY6n7yXtIb13u/2wQ==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-intl/-/kendo-react-intl-8.0.0.tgz",
+      "integrity": "sha512-cbZRplIDUyzCa733n+c9GgnWGTCzlULadeb/4DimfOdJSeo0BfzJEJnMol1kh5FBfp889SWXSRm6/lkNl4/D5g==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-intl": "^3.1.1",
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-common": "7.4.0",
+        "@progress/kendo-react-common": "8.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-labels": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-labels/-/kendo-react-labels-7.4.0.tgz",
-      "integrity": "sha512-gQAxFO4ukbIYH6n8ybuMrsXRAYZqZpi9Tm0SXBwuNMjuPMm6uaeLZgLjc/oTlU3eTvCH57mutQ0Y207U5CiwUw==",
-      "peer": true,
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-labels/-/kendo-react-labels-8.0.0.tgz",
+      "integrity": "sha512-tC+MQiWVqF1xxDAXJvnhJ8G/sR1fKwOfOMrEkazwkwUocXMwtOTiHaz8s0PnJFfMO0yJE41ugO1ExWo9CPjM1g==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-common": "7.4.0",
-        "@progress/kendo-react-intl": "7.4.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-layout": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-layout/-/kendo-react-layout-7.4.0.tgz",
-      "integrity": "sha512-hgGH4+gMrV5DZdMcrshM+bnWqsFWkD8daRZFJcEGcmWKrLkCcNpcD6y4yB+Jet96Lbl43k/qlpOMOB46ibXLSg==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-layout/-/kendo-react-layout-8.0.0.tgz",
+      "integrity": "sha512-rMpk0+WosJp3cKB8nli3I6HDa5QkkUYUNV1USG6p3psOnmSPpxFExT5JMH8D0zsZ22NFZKJqQvsdJ9ItsI3WPw==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-animation": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-react-progressbars": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-listbox": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-listbox/-/kendo-react-listbox-8.0.0.tgz",
+      "integrity": "sha512-SXyzMu+xdtjAcYP8zNDXlgsqpuGuyhJun7wTULA4ZDHuIZjVmH6cUakzpCZrMZv2sCmRvsIWCUKrF5ZHySz7kA==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-listview": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-listview/-/kendo-react-listview-8.0.0.tgz",
+      "integrity": "sha512-caLxickRppDEZrv/A0gSG/8b9y+1mmwyraSlaazq0tLL8MhZucHqXmnFBtlXhw5jCl3rvmPcSq/HWRYkNdbcAA==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-common": "8.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-map": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-map/-/kendo-react-map-8.0.0.tgz",
+      "integrity": "sha512-tE1NSKWkxm9KtcBVQqmOeIG777b/Cdx48LLjNvy4ffHXMgubqlm7EcOICepASBZvi3rBN/iZj7e2Ri225chAbQ==",
+      "dependencies": {
+        "@progress/kendo-charts": "2.2.0",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-drawing": "^1.20.1",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-notification": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-notification/-/kendo-react-notification-8.0.0.tgz",
+      "integrity": "sha512-4/v1PdHrkbf2GGEPQct956cEjbeEzHaVQlugIqQJXMbhrU4wB3KAygSl4E67Yd5Yc9/YR9fJWul/pYUzprEw2A==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-animation": "7.4.0",
-        "@progress/kendo-react-common": "7.4.0",
-        "@progress/kendo-react-intl": "7.4.0",
-        "@progress/kendo-react-popup": "7.4.0",
-        "@progress/kendo-react-progressbars": "7.4.0",
-        "@progress/kendo-svg-icons": "^2.1.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-pdf": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-pdf/-/kendo-react-pdf-7.4.0.tgz",
-      "integrity": "sha512-aEVGZBmHWpXm6B7y/umzLG0Dxt6lx9QE4WZoc8TGoe+B4bRaIDKGJlkF1cSWgmNpjj7lX+50gvrmICJLLQKZhw==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-pdf/-/kendo-react-pdf-8.0.0.tgz",
+      "integrity": "sha512-8FZ6HOVCp9X9skmk0UgACyxchpi6Pf7gLq7FQmPC3EAvS5sn3tvpfSOoBGIVq0Q3CzJa1bSBCyAc/VbtYdtI4w==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
-        "@progress/kendo-drawing": "^1.19.0",
+        "@progress/kendo-drawing": "^1.20.1",
         "@progress/kendo-file-saver": "^1.0.1",
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-common": "7.4.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-pdf-viewer": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-pdf-viewer/-/kendo-react-pdf-viewer-8.0.0.tgz",
+      "integrity": "sha512-Ds8yCztKeYw1YyWgREL4KuPuRzYusqJwfPNEvt5TxYGF3tYjm5JYNHR1gV5Pl5jG2avxXUiPIxNr0NN+t6+npg==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-file-saver": "^1.1.1",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-pdfviewer-common": "0.2.10",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-data-tools": "8.0.0",
+        "@progress/kendo-react-dropdowns": "8.0.0",
+        "@progress/kendo-react-indicators": "8.0.0",
+        "@progress/kendo-react-inputs": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-upload": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-pivotgrid": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-pivotgrid/-/kendo-react-pivotgrid-8.0.0.tgz",
+      "integrity": "sha512-1wat9u1PKcKB1Vp6WYAXlJvfi3GDmOdoMyPP1DWtO88Z0k76NZuTuUi83mDEBiQGaPscNnCG9L2pWZRhjqGtmA==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-data-query": "^1.5.5",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-pivotgrid-common": "0.6.0",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-data-tools": "8.0.0",
+        "@progress/kendo-react-form": "8.0.0",
+        "@progress/kendo-react-indicators": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-labels": "8.0.0",
+        "@progress/kendo-react-treeview": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-popup": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-popup/-/kendo-react-popup-7.4.0.tgz",
-      "integrity": "sha512-qSPFtvuTDW2pw28V05HrFxi6xN1oWzwbdn+vQZTffjZ0Qdm91eLoPVQ/Zc8XWxeFEUl7ZYozy+Ten5PhgulHxw==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-popup/-/kendo-react-popup-8.0.0.tgz",
+      "integrity": "sha512-0p+zvYVSTdnmhfJKK8jTwNrRCkd4RDqXk2r7n2pLTUiVnWb1hpq3aBMRVhGhCLK3dPWZK3iAyyCxXodHi0Q2HA==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-licensing": "^1.3.4",
         "@progress/kendo-popup-common": "^1.9.0",
-        "@progress/kendo-react-common": "7.4.0",
+        "@progress/kendo-react-common": "8.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-progressbars": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-progressbars/-/kendo-react-progressbars-7.4.0.tgz",
-      "integrity": "sha512-RU7MT1KjRn1JBTQQFqIypljk3ZnOmSVdvS3M1HfmxfeHZMK7Cnqp4voftjmw0bFIzxHnDNHksw7Zi2IHvnPudA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-progressbars/-/kendo-react-progressbars-8.0.0.tgz",
+      "integrity": "sha512-yMAMxdU0hzg4d/3FNay7IJ5LxUf//bwfzrzvHIRf4xW8qUsPIwXW5umuTjaKOT+6Ixm2Bn30edOC950DTRFqQQ==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-animation": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-ripple": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-ripple/-/kendo-react-ripple-8.0.0.tgz",
+      "integrity": "sha512-kz1r9nZmlnqWItXu6E3cQWSp0PO0bXTVsYeLA5ba/gcN6A9xx9taAS3BL/HmLrfHtExR28JwXkCIFr9gf1YV/g==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-animation": "7.4.0",
-        "@progress/kendo-react-common": "7.4.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-ripple": "^1.0.1",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-scheduler": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-scheduler/-/kendo-react-scheduler-8.0.0.tgz",
+      "integrity": "sha512-SkmcGkKfZvf9H52U3yFz80Vgnyi1grtkRwmwx5h7bXpTPxvfaw1POj489jK3DP6ISO8vj2MQ5tkKWgeCVpzSlg==",
+      "dependencies": {
+        "@progress/kendo-draggable": "^3.0.1",
+        "@progress/kendo-recurrence": "^1.0.1",
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-data-query": "^1.5.1",
+        "@progress/kendo-date-math": "^1.4.1",
+        "@progress/kendo-drawing": "^1.20.1",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-dateinputs": "8.0.0",
+        "@progress/kendo-react-dialogs": "8.0.0",
+        "@progress/kendo-react-dropdowns": "8.0.0",
+        "@progress/kendo-react-form": "8.0.0",
+        "@progress/kendo-react-inputs": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-scrollview": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-scrollview/-/kendo-react-scrollview-8.0.0.tgz",
+      "integrity": "sha512-hiSc64us1YCZdU1Tbiq+URw8gvLk4p6Z89UEHiAKqWpPUcrxJMUlsiZSLZJ1bxiWwN/M5Un21YNRBAEA5Kz9TA==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-sortable": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-sortable/-/kendo-react-sortable-8.0.0.tgz",
+      "integrity": "sha512-WMbFjfnHjuNEJvKKGOekZfLgeh7xfYsls2D0q9X9AvtNcpSMjeFnHJFVghWi0M8rxOmBUjiQwnPiKp0nGSHXTg==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-taskboard": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-taskboard/-/kendo-react-taskboard-8.0.0.tgz",
+      "integrity": "sha512-qwetaMh3MjG06uDtdwGFK4pHX2XSPYtEDMWCslQBf14jEcY6TFcXWic17izdNvFH3lS+p0jmH1M2nHSancZmuA==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-data-query": "^1.0.0",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-dialogs": "8.0.0",
+        "@progress/kendo-react-dropdowns": "8.0.0",
+        "@progress/kendo-react-form": "8.0.0",
+        "@progress/kendo-react-indicators": "8.0.0",
+        "@progress/kendo-react-inputs": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-labels": "8.0.0",
+        "@progress/kendo-react-layout": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-tooltip": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-tooltip/-/kendo-react-tooltip-8.0.0.tgz",
+      "integrity": "sha512-qQIvdFGJe2Q/2bOoJQ8iU9vchlyCL5ic8cjeoETq1kckLVDSUxeaVwIRBV0KZCSJgufWBk57QBBqXbKQeRrcPg==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-popup": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-react-treelist": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-treelist/-/kendo-react-treelist-8.0.0.tgz",
+      "integrity": "sha512-ItMn7qhfU32gwvxLRfNVpLkTzMproB5wT4zcQ7vt0Gdaem1DX9AJzjfUi0cPteizJpvk9kaG31mTRoKrnMrjFg==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-data-query": "^1.0.0",
+        "@progress/kendo-date-math": "^1.4.1",
+        "@progress/kendo-drawing": "^1.20.1",
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-data-tools": "8.0.0",
+        "@progress/kendo-react-dateinputs": "8.0.0",
+        "@progress/kendo-react-dialogs": "8.0.0",
+        "@progress/kendo-react-dropdowns": "8.0.0",
+        "@progress/kendo-react-inputs": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@progress/kendo-react-treeview": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-react-treeview/-/kendo-react-treeview-7.4.0.tgz",
-      "integrity": "sha512-RnwJ6dKOcy3JOfjymg9tLNQg6fHo2TCxjT95etcKdw7saqJ3CD8sF6UT72Wm/jzl0kpRgSMglwU50b29X9WWfA==",
-      "peer": true,
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-treeview/-/kendo-react-treeview-8.0.0.tgz",
+      "integrity": "sha512-o/mgrJtRSfX1i/nuecl1WALpc3HMPN5qpxRv5mv7ugjPZgfTPgXb+Mpzu6L4maciqoAwygwEV8IiuRk2vJ+OBw==",
       "dependencies": {
         "prop-types": "^15.6.0"
       },
       "peerDependencies": {
         "@progress/kendo-licensing": "^1.3.4",
-        "@progress/kendo-react-animation": "7.4.0",
-        "@progress/kendo-react-common": "7.4.0",
-        "@progress/kendo-svg-icons": "^2.1.0",
+        "@progress/kendo-react-animation": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
         "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@progress/kendo-react-upload": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-react-upload/-/kendo-react-upload-8.0.0.tgz",
+      "integrity": "sha512-G9xw5pXtjwyhjRuAxNDXKVNa2a+dLihHZReqiO382w/vhFdIDg3GvxOOL8KDWvh3Hcehj/vBuSMBbzVuLlD/Gw==",
+      "dependencies": {
+        "prop-types": "^15.6.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.3.4",
+        "@progress/kendo-react-buttons": "8.0.0",
+        "@progress/kendo-react-common": "8.0.0",
+        "@progress/kendo-react-intl": "8.0.0",
+        "@progress/kendo-react-progressbars": "8.0.0",
+        "@progress/kendo-svg-icons": "^3.0.0",
+        "axios": "^1.6.0",
+        "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@progress/kendo-recurrence": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-recurrence/-/kendo-recurrence-1.0.3.tgz",
+      "integrity": "sha512-eG4xt3WUBLuxctJN6dWhDI41hqCl60Fe6a7Pb5IX4WIEW3Y5Hhn9AntJ/X1k0oQqU/n1vxdUJJp+9TihbBYgHA==",
+      "dependencies": {
+        "@telerik/kendo-intl": "^2.0.0",
+        "tslib": "^1.7.0"
+      },
+      "peerDependencies": {
+        "@progress/kendo-date-math": "^1.3.0"
+      }
+    },
+    "node_modules/@progress/kendo-ripple": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-ripple/-/kendo-ripple-1.0.2.tgz",
+      "integrity": "sha512-P50uvRJntu6+iE6uno7usXcA09maA7xEJEUEVpvd/gJf/0Q1Yq0nDhmnTJiAmylvS53lYUftOyF8869B6H7/zA==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^1.7.0"
+      }
+    },
     "node_modules/@progress/kendo-svg-icons": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@progress/kendo-svg-icons/-/kendo-svg-icons-2.3.0.tgz",
-      "integrity": "sha512-VB4x1o6eVoYcCgTDBMkV88giGXsDlyCEJAMFLd9x99oJlmufx4KC6/bzehFn3CXdTcvhw0ONlTm3H8gM9ZH6JQ=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-svg-icons/-/kendo-svg-icons-3.0.0.tgz",
+      "integrity": "sha512-+Hk0YWhxd9rIvFNX6T+L0P2x9/DJ8Z4baHWY4xT2ntjVK9IasSPgMmfQiAfs58q3vTiyZNkmx7Yfrdg5Mqh8Aw=="
+    },
+    "node_modules/@progress/kendo-theme-bootstrap": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-theme-bootstrap/-/kendo-theme-bootstrap-8.0.1.tgz",
+      "integrity": "sha512-FxynRmumb7CDHnN7nhWGrP8qEgqC4vYM7LOFTG0XqsM1ahkudzqNfWne02bzJ6DBkQCioxvusZAjcJP7ZnnBuw==",
+      "dependencies": {
+        "@progress/kendo-svg-icons": "3.0.0",
+        "@progress/kendo-theme-core": "8.0.1",
+        "@progress/kendo-theme-default": "8.0.1",
+        "@progress/kendo-theme-utils": "8.0.1",
+        "bootstrap": "5.2.1"
+      }
+    },
+    "node_modules/@progress/kendo-theme-core": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-theme-core/-/kendo-theme-core-8.0.1.tgz",
+      "integrity": "sha512-5GdONCiIDj3TtKM30Nr2fYv5wQp932+29ea3Q2/PExO7qZ05oPv0ddFUDiUuocMrOL7cxbL6/x9NcMg+2J5w5Q=="
+    },
+    "node_modules/@progress/kendo-theme-default": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-theme-default/-/kendo-theme-default-8.0.1.tgz",
+      "integrity": "sha512-rlINXUJPeVQbUEZqoe+L9tSLiVhgfPyvk0XvRhYSr316CluOD1+ZZxGmKfM9lOZ5BA8l/OyMu8Z940eOVSx7GQ==",
+      "dependencies": {
+        "@progress/kendo-svg-icons": "3.0.0",
+        "@progress/kendo-theme-core": "8.0.1",
+        "@progress/kendo-theme-utils": "8.0.1"
+      }
+    },
+    "node_modules/@progress/kendo-theme-fluent": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-theme-fluent/-/kendo-theme-fluent-8.0.1.tgz",
+      "integrity": "sha512-M3c4PlkIL2mklBgHtALm9tBZrVZYNT+8enYdKQnoqBrQcIr6ZVvXlrEXm8OhG/ijZV4GegJQcYxNbAs9FR5oMg==",
+      "dependencies": {
+        "@progress/kendo-svg-icons": "3.0.0",
+        "@progress/kendo-theme-core": "8.0.1",
+        "@progress/kendo-theme-utils": "8.0.1"
+      }
+    },
+    "node_modules/@progress/kendo-theme-material": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-theme-material/-/kendo-theme-material-8.0.1.tgz",
+      "integrity": "sha512-6KnxqNXHuenDXpqGXZB+4eGCwY5yAZo93SOpzIPyleoDJd+tN570q+kNEqLJfVi+5iBSPWlD1WLCWWzMwkXvRQ==",
+      "dependencies": {
+        "@progress/kendo-svg-icons": "3.0.0",
+        "@progress/kendo-theme-core": "8.0.1",
+        "@progress/kendo-theme-default": "8.0.1",
+        "@progress/kendo-theme-utils": "8.0.1"
+      }
+    },
+    "node_modules/@progress/kendo-theme-utils": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-theme-utils/-/kendo-theme-utils-8.0.1.tgz",
+      "integrity": "sha512-M79alCEjrFe3sUPqfVOMvmaGj6IavL5iz/NREs1OF2rQORIuLFJxEw3J2uwSAxsczp4mToIcl7zjtcJyJBHnwA==",
+      "dependencies": {
+        "@progress/kendo-theme-core": "8.0.1"
+      }
     },
     "node_modules/@progress/pako-esm": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@progress/pako-esm/-/pako-esm-1.0.1.tgz",
       "integrity": "sha512-O4A3b1EuE9Xe1pC3Xz9Tcn1M/CYrL71f4y/5TXeytOVTkmkzBgYW97fYP2f+54H0e0erWRaqV/kUUB/a8Uxfbw=="
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz",
-      "integrity": "sha512-X9alQ3XM6I9IlSlmC8ddAvMSyG1WuHk5oUnXGw+yUBs3BFoTizmG1La/Gr8fVJvDWAq+zlYTZ9DBgrlKRVY06g==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.16.3.tgz",
+      "integrity": "sha512-1ACInKIT0pXmTYuPoJAL8sOT0lV3PEACFSVxnD03hGIojJ1CmbzZmLJyk2xew+yxqTlmx7xydkiJcBzdp0V+AQ==",
       "cpu": [
         "arm"
       ],
@@ -1325,9 +2064,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.3.tgz",
-      "integrity": "sha512-eQK5JIi+POhFpzk+LnjKIy4Ks+pwJ+NXmPxOCSvOKSNRPONzKuUvWE+P9JxGZVxrtzm6BAYMaL50FFuPe0oWMQ==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.16.3.tgz",
+      "integrity": "sha512-vGl+Bny8cawCM7ExugzqEB8ke3t7Pm9/mo+ciA9kJh6pMuNyM+31qhewMwHwseDZ/LtdW0SCocW1CsMxcq1Lsg==",
       "cpu": [
         "arm64"
       ],
@@ -1338,9 +2077,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.3.tgz",
-      "integrity": "sha512-Od4vE6f6CTT53yM1jgcLqNfItTsLt5zE46fdPaEmeFHvPs5SjZYlLpHrSiHEKR1+HdRfxuzXHjDOIxQyC3ptBA==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.16.3.tgz",
+      "integrity": "sha512-Lj8J9WzQRvfWO4GfI+bBkIThUFV1PtI+es/YH/3cwUQ+edXu8Mre0JRJfRrAeRjPiHDPFFZaX51zfgHHEhgRAg==",
       "cpu": [
         "arm64"
       ],
@@ -1351,9 +2090,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.3.tgz",
-      "integrity": "sha512-0IMAO21axJeNIrvS9lSe/PGthc8ZUS+zC53O0VhF5gMxfmcKAP4ESkKOCwEi6u2asUrt4mQv2rjY8QseIEb1aw==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.16.3.tgz",
+      "integrity": "sha512-NPPOXMTIWJk50lgZmRReEYJFvLG5rgMDzaVauWNB2MgFQYm9HuNXQdVVg3iEZ3A5StIzxhMlPjVyS5fsv4PJmg==",
       "cpu": [
         "x64"
       ],
@@ -1364,9 +2103,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.3.tgz",
-      "integrity": "sha512-ge2DC7tHRHa3caVEoSbPRJpq7azhG+xYsd6u2MEnJ6XzPSzQsTKyXvh6iWjXRf7Rt9ykIUWHtl0Uz3T6yXPpKw==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.16.3.tgz",
+      "integrity": "sha512-ij4tv1XtWcDScaTgoMnvDEYZ2Wjl2ZhDFEyftjBKu6sNNLHIkKuXBol/bVSh+md5zSJ6em9hUXyPO3cVPCsl4Q==",
       "cpu": [
         "arm"
       ],
@@ -1377,9 +2116,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.14.3.tgz",
-      "integrity": "sha512-ljcuiDI4V3ySuc7eSk4lQ9wU8J8r8KrOUvB2U+TtK0TiW6OFDmJ+DdIjjwZHIw9CNxzbmXY39wwpzYuFDwNXuw==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.16.3.tgz",
+      "integrity": "sha512-MTMAl30dzcfYB+smHe1sJuS2P1/hB8pqylkCe0/8/Lo8CADjy/eM8x43nBoR5eqcYgpOtCh7IgHpvqSMAE38xw==",
       "cpu": [
         "arm"
       ],
@@ -1390,9 +2129,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.3.tgz",
-      "integrity": "sha512-Eci2us9VTHm1eSyn5/eEpaC7eP/mp5n46gTRB3Aar3BgSvDQGJZuicyq6TsH4HngNBgVqC5sDYxOzTExSU+NjA==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.16.3.tgz",
+      "integrity": "sha512-vY3fAg6JLDoNh781HHHMPvt8K6RWG3OmEj3xI9BOFSQTD5PNaGKvCB815MyGlDnFYUw7lH+WvvQqoBwLtRDR1A==",
       "cpu": [
         "arm64"
       ],
@@ -1403,9 +2142,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.3.tgz",
-      "integrity": "sha512-UrBoMLCq4E92/LCqlh+blpqMz5h1tJttPIniwUgOFJyjWI1qrtrDhhpHPuFxULlUmjFHfloWdixtDhSxJt5iKw==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.16.3.tgz",
+      "integrity": "sha512-61SpQGBSb8QkfV/hUYWezlEig4ro55t8NcE5wWmy1bqRsRVHCEDkF534d+Lln/YeLUoSWtJHvvG3bx9lH/S6uA==",
       "cpu": [
         "arm64"
       ],
@@ -1416,9 +2155,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.3.tgz",
-      "integrity": "sha512-5aRjvsS8q1nWN8AoRfrq5+9IflC3P1leMoy4r2WjXyFqf3qcqsxRCfxtZIV58tCxd+Yv7WELPcO9mY9aeQyAmw==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.16.3.tgz",
+      "integrity": "sha512-4XGexJthsNhEEgv/zK4/NnAOjYKoeCsIoT+GkqTY2u3rse0lbJ8ft1bpDCdlkvifsLDL2uwe4fn8PLR4IMTKQQ==",
       "cpu": [
         "ppc64"
       ],
@@ -1429,9 +2168,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.3.tgz",
-      "integrity": "sha512-sk/Qh1j2/RJSX7FhEpJn8n0ndxy/uf0kI/9Zc4b1ELhqULVdTfN6HL31CDaTChiBAOgLcsJ1sgVZjWv8XNEsAQ==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.16.3.tgz",
+      "integrity": "sha512-/pArXjqnEdhbQ1qe4CTTlJ6/GjWGdWNRucKAp4fqKnKf7QC0BES3QEV34ACumHHQ4uEGt4GctF2ISCMRhkli0A==",
       "cpu": [
         "riscv64"
       ],
@@ -1442,9 +2181,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.3.tgz",
-      "integrity": "sha512-jOO/PEaDitOmY9TgkxF/TQIjXySQe5KVYB57H/8LRP/ux0ZoO8cSHCX17asMSv3ruwslXW/TLBcxyaUzGRHcqg==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.16.3.tgz",
+      "integrity": "sha512-vu4f3Y8iwjtRfSZdmtP8nC1jmRx1IrRVo2cLQlQfpFZ0e2AE9YbPgfIzpuK+i3C4zFETaLLNGezbBns2NuS/uA==",
       "cpu": [
         "s390x"
       ],
@@ -1455,9 +2194,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.3.tgz",
-      "integrity": "sha512-8ybV4Xjy59xLMyWo3GCfEGqtKV5M5gCSrZlxkPGvEPCGDLNla7v48S662HSGwRd6/2cSneMQWiv+QzcttLrrOA==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.16.3.tgz",
+      "integrity": "sha512-n4HEgIJulNSmAKT3SYF/1wuzf9od14woSBseNkzur7a+KJIbh2Jb+J9KIsdGt3jJnsLW0BT1Sj6MiwL4Zzku6Q==",
       "cpu": [
         "x64"
       ],
@@ -1468,9 +2207,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.3.tgz",
-      "integrity": "sha512-s+xf1I46trOY10OqAtZ5Rm6lzHre/UiLA1J2uOhCFXWkbZrJRkYBPO6FhvGfHmdtQ3Bx793MNa7LvoWFAm93bg==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.16.3.tgz",
+      "integrity": "sha512-guO/4N1884ig2AzTKPc6qA7OTnFMUEg/X2wiesywRO1eRD7FzHiaiTQQOLFmnUXWj2pgQXIT1g5g3e2RpezXcQ==",
       "cpu": [
         "x64"
       ],
@@ -1481,9 +2220,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.3.tgz",
-      "integrity": "sha512-+4h2WrGOYsOumDQ5S2sYNyhVfrue+9tc9XcLWLh+Kw3UOxAvrfOrSMFon60KspcDdytkNDh7K2Vs6eMaYImAZg==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.16.3.tgz",
+      "integrity": "sha512-+rxD3memdkhGz0NhNqbYHXBoA33MoHBK4uubZjF1IeQv1Psi6tqgsCcC6vwQjxBM1qoCqOQQBy0cgNbbZKnGUg==",
       "cpu": [
         "arm64"
       ],
@@ -1494,9 +2233,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.3.tgz",
-      "integrity": "sha512-T1l7y/bCeL/kUwh9OD4PQT4aM7Bq43vX05htPJJ46RTI4r5KNt6qJRzAfNfM+OYMNEVBWQzR2Gyk+FXLZfogGw==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.16.3.tgz",
+      "integrity": "sha512-0NxVbLhBXmwANWWbgZY/RdSkeuHEgF+u8Dc0qBowUVBYsR2y2vwVGjKgUcj1wtu3jpjs057io5g9HAPr3Icqjg==",
       "cpu": [
         "ia32"
       ],
@@ -1507,9 +2246,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.3.tgz",
-      "integrity": "sha512-/BypzV0H1y1HzgYpxqRaXGBRqfodgoBBCcsrujT6QRcakDQdfU+Lq9PENPh5jB4I44YWq+0C2eHsHya+nZY1sA==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.16.3.tgz",
+      "integrity": "sha512-hutnZavtOx/G4uVdgoZz5279By9NVbgmxOmGGgnzUjZYuwp2+NzGq6KXQmHXBWz7W/vottXn38QmKYAdQLa/vQ==",
       "cpu": [
         "x64"
       ],
@@ -1519,6 +2258,11 @@
         "win32"
       ]
     },
+    "node_modules/@telerik/kendo-intl": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@telerik/kendo-intl/-/kendo-intl-2.3.1.tgz",
+      "integrity": "sha512-30iXfS/1Kz3wn0rZLiWzrfJCv/c0Wffr5T42uxjJBTxZQ6XLBmUdfaQ4Jn1Td1W0skZrlP0M3/wNAEYTbxXigQ=="
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1566,17 +2310,24 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "20.12.12",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
+      "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/react": {
       "version": "18.2.79",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
       "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1586,7 +2337,6 @@
       "version": "18.2.25",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.25.tgz",
       "integrity": "sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==",
-      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1616,6 +2366,13 @@
         "vite": "^4.2.0 || ^5.0.0"
       }
     },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1637,6 +2394,19 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1657,7 +2427,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -1668,10 +2438,45 @@
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
       "dev": true,
       "dependencies": {
-        "color-convert": "^1.9.0"
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/aproba": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/are-we-there-yet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+      "deprecated": "This package is no longer supported.",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^3.6.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=10"
       }
     },
     "node_modules/argparse": {
@@ -1819,6 +2624,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "peer": true
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -1834,22 +2645,75 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "peer": true,
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "devOptional": true
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/bootstrap": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.1.tgz",
+      "integrity": "sha512-UQi3v2NpVPEi1n35dmRRzBJFlgvWHYwyem6yHhuT6afYF+sziEt46McRbT//kVXZ7b1YUYEVGdXEH74Nx3xzGA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.23.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
@@ -1887,6 +2751,11 @@
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
       "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
     },
+    "node_modules/calculate-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/calculate-size/-/calculate-size-1.1.1.tgz",
+      "integrity": "sha512-jJZ7pvbQVM/Ss3VO789qpsypN3xmnepg242cejOAslsmlZLYw2dnj7knnNowabQ0Kzabzx56KFTy2Pot/y6FmA=="
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -1916,9 +2785,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001610",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001610.tgz",
-      "integrity": "sha512-QFutAY4NgaelojVMjY63o6XlZyORPaLfyMnsl3HgnWdJUcX6K0oaJymHjH8PT5Gk7sTm8rvC/c5COUQKXqmOMA==",
+      "version": "1.0.30001612",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz",
+      "integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==",
       "dev": true,
       "funding": [
         {
@@ -1935,6 +2804,22 @@
         }
       ]
     },
+    "node_modules/canvas": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz",
+      "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@mapbox/node-pre-gyp": "^1.0.0",
+        "nan": "^2.17.0",
+        "simple-get": "^3.0.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -1949,6 +2834,52 @@
         "node": ">=4"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1964,11 +2895,40 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "color-support": "bin.js"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "peer": true,
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "devOptional": true
+    },
+    "node_modules/console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+      "optional": true,
+      "peer": true
     },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
@@ -2050,7 +3010,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -2063,6 +3023,19 @@
         }
       }
     },
+    "node_modules/decompress-response": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
+      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "mimic-response": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2103,6 +3076,32 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -2134,11 +3133,18 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.737",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.737.tgz",
-      "integrity": "sha512-QvLTxaLHKdy5YxvixAw/FfHq2eWLUL9KvsPjp0aHK1gI5d3EDuDgITkvj0nFO2c6zUY3ZqVAJQiBYyQP9tQpfw==",
+      "version": "1.4.746",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.746.tgz",
+      "integrity": "sha512-jeWaIta2rIG2FzHaYIhSuVWqC6KJYo7oSBX4Jv7g+aVujKztfvdpf+n6MGwZdC5hQXbax4nntykLH2juIQrfPg==",
       "dev": true
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -2696,6 +3702,18 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2732,6 +3750,26 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2741,11 +3779,58 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "peer": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -2797,6 +3882,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gauge": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
+      "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+      "deprecated": "This package is no longer supported.",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "aproba": "^1.0.3 || ^2.0.0",
+        "color-support": "^1.1.2",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.1",
+        "object-assign": "^4.1.1",
+        "signal-exit": "^3.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "wide-align": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2846,7 +3953,7 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -2916,6 +4023,15 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -2985,6 +4101,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -2997,6 +4120,25 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/ical.js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ical.js/-/ical.js-2.0.1.tgz",
+      "integrity": "sha512-uYYb1CwTXbd9NP/xTtgQZ5ivv6bpUjQu9VM98s3X78L3XRu00uJW5ZtmnLwyxhztpf5fSiRyDpFW7ZNCePlaPw=="
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3006,6 +4148,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3035,7 +4183,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -3045,7 +4193,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/internal-slot": {
       "version": "1.0.7",
@@ -3104,6 +4252,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -3195,6 +4355,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -3246,6 +4416,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-number-object": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
@@ -3665,11 +4844,61 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "peer": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-response": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
+      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -3677,11 +4906,75 @@
         "node": "*"
       }
     },
+    "node_modules/minipass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/nan": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz",
+      "integrity": "sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -3706,12 +4999,72 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
       "dev": true
     },
+    "node_modules/nopt": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npmlog": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
+      "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+      "deprecated": "This package is no longer supported.",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "are-we-there-yet": "^2.0.0",
+        "console-control-strings": "^1.1.0",
+        "gauge": "^3.0.0",
+        "set-blocking": "^2.0.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3826,7 +5179,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -3908,7 +5261,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3928,12 +5281,47 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path2d-polyfill": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz",
+      "integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pdfjs-dist": {
+      "version": "3.11.174",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz",
+      "integrity": "sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "canvas": "^2.11.2",
+        "path2d-polyfill": "^2.0.1"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -4022,9 +5410,9 @@
       }
     },
     "node_modules/prosemirror-history": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.3.2.tgz",
-      "integrity": "sha512-/zm0XoU/N/+u7i5zepjmZAEnpvjDtzoPWW6VmKptcAnPadN/SStsBjMImdCEbb3seiNTpveziPTIrXQbHLtU1g==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.0.tgz",
+      "integrity": "sha512-UUiGzDVcqo1lovOPdi9YxxUps3oBFWAIYkXLu3Ot+JPv1qzVogRbcizxK3LhHmtaUxclohgiOVesRw5QSlMnbQ==",
       "dependencies": {
         "prosemirror-state": "^1.2.2",
         "prosemirror-transform": "^1.0.0",
@@ -4033,9 +5421,9 @@
       }
     },
     "node_modules/prosemirror-inputrules": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.3.0.tgz",
-      "integrity": "sha512-z1GRP2vhh5CihYMQYsJSa1cOwXb3SYxALXOIfAkX8nZserARtl9LiL+CEl+T+OFIsXc3mJIHKhbsmRzC0HDAXA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz",
+      "integrity": "sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==",
       "dependencies": {
         "prosemirror-state": "^1.0.0",
         "prosemirror-transform": "^1.0.0"
@@ -4050,10 +5438,19 @@
         "w3c-keyname": "^2.2.0"
       }
     },
+    "node_modules/prosemirror-mentions": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-mentions/-/prosemirror-mentions-1.0.2.tgz",
+      "integrity": "sha512-d9O1IT69NQvASN4K+/ki5FaiAs5yK5qnueZiRHtlnsy80V74hVINIdDp2HQkFM26/TLZ4xbkjXTakjv4X4ZRiQ==",
+      "peerDependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-view": "^1.4.2"
+      }
+    },
     "node_modules/prosemirror-model": {
-      "version": "1.19.3",
-      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.19.3.tgz",
-      "integrity": "sha512-tgSnwN7BS7/UM0sSARcW+IQryx2vODKX4MI7xpqY2X+iaepJdKBPc7I4aACIsDV/LTaTjt12Z56MhDr9LsyuZQ==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.21.0.tgz",
+      "integrity": "sha512-zLpS1mVCZLA7VTp82P+BfMiYVPcX1/z0Mf3gsjKZtzMWubwn2pN7CceMV0DycjlgE5JeXPR7UF4hJPbBV98oWA==",
       "dependencies": {
         "orderedmap": "^2.0.0"
       }
@@ -4079,9 +5476,9 @@
       }
     },
     "node_modules/prosemirror-tables": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.3.5.tgz",
-      "integrity": "sha512-JSZ2cCNlApu/ObAhdPyotrjBe2cimniniTpz60YXzbL0kZ+47nEYk2LWbfKU2lKpBkUNquta2PjteoNi4YCluQ==",
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.3.7.tgz",
+      "integrity": "sha512-oEwX1wrziuxMtwFvdDWSFHVUWrFJWt929kVVfHvtTi8yvw+5ppxjXZkMG/fuTdFo+3DXyIPSKfid+Be1npKXDA==",
       "dependencies": {
         "prosemirror-keymap": "^1.1.2",
         "prosemirror-model": "^1.8.1",
@@ -4091,23 +5488,29 @@
       }
     },
     "node_modules/prosemirror-transform": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.8.0.tgz",
-      "integrity": "sha512-BaSBsIMv52F1BVVMvOmp1yzD3u65uC3HTzCBQV1WDPqJRQ2LuHKcyfn0jwqodo8sR9vVzMzZyI+Dal5W9E6a9A==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.9.0.tgz",
+      "integrity": "sha512-5UXkr1LIRx3jmpXXNKDhv8OyAOeLTGuXNwdVfg8x27uASna/wQkr9p6fD3eupGOi4PLJfbezxTyi/7fSJypXHg==",
       "dependencies": {
-        "prosemirror-model": "^1.0.0"
+        "prosemirror-model": "^1.21.0"
       }
     },
     "node_modules/prosemirror-view": {
-      "version": "1.32.6",
-      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.32.6.tgz",
-      "integrity": "sha512-26r5LvyDlPgUNVf7ZdNdGrMJnylwjJtUJTfDuYOANIVx9lqWD1WCBlGg283weYQGKUC64DXR25LeAmliB9CrFQ==",
+      "version": "1.33.6",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.33.6.tgz",
+      "integrity": "sha512-zRLUNgLIQfd8IfGprsXxWTjdA8xEAFJe8cDNrOptj6Mop9sj+BMeVbJvceyAYCm5G2dOdT2prctH7K9dfnpIMw==",
       "dependencies": {
-        "prosemirror-model": "^1.16.0",
+        "prosemirror-model": "^1.20.0",
         "prosemirror-state": "^1.0.0",
         "prosemirror-transform": "^1.1.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "peer": true
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4148,6 +5551,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-csv": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz",
+      "integrity": "sha512-RG5hOcZKZFigIGE8LxIEV/OgS1vigFQT4EkaHeKgyuCbUAu9Nbd/1RYq++bJcJJ9VOqO/n9TZRADsXNDR4VEpw=="
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -4174,6 +5582,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "dev": true,
+      "dependencies": {
+        "@remix-run/router": "1.15.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dev": true,
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -4190,6 +5630,33 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -4275,7 +5742,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -4287,9 +5754,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.3.tgz",
-      "integrity": "sha512-ag5tTQKYsj1bhrFC9+OEWqb5O6VYgtQDO9hPDBMmIbePwhfSr+ExlcU741t8Dhw5DkPCQf6noz0jb36D6W9/hw==",
+      "version": "4.16.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.16.3.tgz",
+      "integrity": "sha512-Ygm4fFO4usWcAG3Ud36Lmif5nudoi0X6QPLC+kRgrRjulAbmFkaTawP7fTIkRDnCNSf/4IAQzXM1T8e691kRtw==",
       "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -4302,22 +5769,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.14.3",
-        "@rollup/rollup-android-arm64": "4.14.3",
-        "@rollup/rollup-darwin-arm64": "4.14.3",
-        "@rollup/rollup-darwin-x64": "4.14.3",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.14.3",
-        "@rollup/rollup-linux-arm-musleabihf": "4.14.3",
-        "@rollup/rollup-linux-arm64-gnu": "4.14.3",
-        "@rollup/rollup-linux-arm64-musl": "4.14.3",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.14.3",
-        "@rollup/rollup-linux-riscv64-gnu": "4.14.3",
-        "@rollup/rollup-linux-s390x-gnu": "4.14.3",
-        "@rollup/rollup-linux-x64-gnu": "4.14.3",
-        "@rollup/rollup-linux-x64-musl": "4.14.3",
-        "@rollup/rollup-win32-arm64-msvc": "4.14.3",
-        "@rollup/rollup-win32-ia32-msvc": "4.14.3",
-        "@rollup/rollup-win32-x64-msvc": "4.14.3",
+        "@rollup/rollup-android-arm-eabi": "4.16.3",
+        "@rollup/rollup-android-arm64": "4.16.3",
+        "@rollup/rollup-darwin-arm64": "4.16.3",
+        "@rollup/rollup-darwin-x64": "4.16.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.16.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.16.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.16.3",
+        "@rollup/rollup-linux-arm64-musl": "4.16.3",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.16.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.16.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.16.3",
+        "@rollup/rollup-linux-x64-gnu": "4.16.3",
+        "@rollup/rollup-linux-x64-musl": "4.16.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.16.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.16.3",
+        "@rollup/rollup-win32-x64-msvc": "4.16.3",
         "fsevents": "~2.3.2"
       }
     },
@@ -4403,6 +5870,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sass": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+      "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -4415,11 +5899,18 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -4491,6 +5982,46 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/simple-get": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
+      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "decompress-response": "^4.2.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -4500,6 +6031,31 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.11",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
@@ -4579,7 +6135,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -4623,6 +6179,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tar": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -4638,10 +6219,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -4755,6 +6355,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -4794,10 +6400,17 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/vite": {
-      "version": "5.2.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.9.tgz",
-      "integrity": "sha512-uOQWfuZBlc6Y3W/DTuQ1Sr+oIXWvqljLvS881SVmAj00d5RdgShLcuXWxseWPd4HXwiYBFW/vXHfKFeqj9uQnw==",
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.10.tgz",
+      "integrity": "sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",
@@ -4854,6 +6467,24 @@
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -4948,11 +6579,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wide-align": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "string-width": "^1.0.2 || 2 || 3 || 4"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/yallist": {
       "version": "3.1.1",
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 00000000..cca32a64
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,79 @@
+{
+  "name": "vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@progress/kendo-drawing": "^1.20.0",
+    "@progress/kendo-licensing": "^1.3.5",
+    "@progress/kendo-react-animation": "^8.0.0",
+    "@progress/kendo-react-barcodes": "^8.0.0",
+    "@progress/kendo-react-buttons": "^8.0.0",
+    "@progress/kendo-react-charts": "^8.0.0",
+    "@progress/kendo-react-common": "^8.0.0",
+    "@progress/kendo-react-conversational-ui": "^8.0.0",
+    "@progress/kendo-react-data-tools": "^8.0.0",
+    "@progress/kendo-react-dateinputs": "^8.0.0",
+    "@progress/kendo-react-dialogs": "^8.0.0",
+    "@progress/kendo-react-dropdowns": "^8.0.0",
+    "@progress/kendo-react-editor": "^8.0.0",
+    "@progress/kendo-react-excel-export": "^8.0.0",
+    "@progress/kendo-react-form": "^8.0.0",
+    "@progress/kendo-react-gantt": "^8.0.0",
+    "@progress/kendo-react-gauges": "^8.0.0",
+    "@progress/kendo-react-grid": "^8.0.0",
+    "@progress/kendo-react-indicators": "^8.0.0",
+    "@progress/kendo-react-inputs": "^8.0.0",
+    "@progress/kendo-react-intl": "^8.0.0",
+    "@progress/kendo-react-labels": "^8.0.0",
+    "@progress/kendo-react-layout": "^8.0.0",
+    "@progress/kendo-react-listbox": "^8.0.0",
+    "@progress/kendo-react-listview": "^8.0.0",
+    "@progress/kendo-react-map": "^8.0.0",
+    "@progress/kendo-react-notification": "^8.0.0",
+    "@progress/kendo-react-pdf": "^8.0.0",
+    "@progress/kendo-react-pdf-viewer": "^8.0.0",
+    "@progress/kendo-react-pivotgrid": "^8.0.0",
+    "@progress/kendo-react-popup": "^8.0.0",
+    "@progress/kendo-react-progressbars": "^8.0.0",
+    "@progress/kendo-react-ripple": "^8.0.0",
+    "@progress/kendo-react-scheduler": "^8.0.0",
+    "@progress/kendo-react-scrollview": "^8.0.0",
+    "@progress/kendo-react-sortable": "^8.0.0",
+    "@progress/kendo-react-taskboard": "^8.0.0",
+    "@progress/kendo-react-tooltip": "^8.0.0",
+    "@progress/kendo-react-treelist": "^8.0.0",
+    "@progress/kendo-react-treeview": "^8.0.0",
+    "@progress/kendo-react-upload": "^8.0.0",
+    "@progress/kendo-svg-icons": "^3.0.0",
+    "@progress/kendo-theme-bootstrap": "^8.0.1",
+    "@progress/kendo-theme-default": "^8.0.1",
+    "@progress/kendo-theme-fluent": "^8.0.1",
+    "@progress/kendo-theme-material": "^8.0.1",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "calculate-size": "1.1.1",
+    "prosemirror-mentions": "^1.0.2",
+    "react-csv": "^2.2.2",
+    "ical.js":"^2.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.12",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0",
+    "sass": "1.62.1",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/docs/routes.tsx b/docs/routes.tsx
new file mode 100644
index 00000000..a17bd261
--- /dev/null
+++ b/docs/routes.tsx
@@ -0,0 +1,29 @@
+import { RouteObject } from 'react-router-dom';
+
+const pages: Record<string, any> = import.meta.glob('/**/app.(j|t)sx', {
+    import: 'default',
+    eager: false
+});
+
+const routes = async () => {
+    const result: RouteObject[] = [];
+
+    for (const path of Object.keys(pages)) {
+        const fileName = path.match(/(.*)\/app\.(j|t)sx$/)?.[0];
+        if (!fileName) {
+            continue;
+        }
+
+        const normalizedPathName = fileName.replace(/\/app.(j|t)sx/, '');
+        result.push({
+            path: normalizedPathName,
+            lazy: async () => ({
+                Component: await pages[path]()
+            })
+        });
+    }
+
+    return result;
+};
+
+export default routes;
\ No newline at end of file
diff --git a/docs/styles.scss b/docs/styles.scss
new file mode 100644
index 00000000..800d9b03
--- /dev/null
+++ b/docs/styles.scss
@@ -0,0 +1,21 @@
+/* You can add global styles to this file, and also import other style files */
+@import '@progress/kendo-theme-default/dist/default-ocean-blue.scss';
+
+div.examples-list {
+    max-height: none;
+}
+
+div.examples-list .k-grid {
+    max-height: 900px;
+    overflow: scroll;
+    width: 100%;
+}
+
+div.examples-list .k-grid a {
+    color: blue;
+    text-decoration: underline;
+}
+
+div.examples-list .k-grid .k-alt {
+    background-color: #eee;
+}
\ No newline at end of file
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
new file mode 100644
index 00000000..2eadd340
--- /dev/null
+++ b/docs/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client"],
+    "baseUrl": ".",
+    "paths": {
+      "./shared-*": ["knowledge-base/examples/shared/shared-*"],
+    },
+  },
+  "include": ["**/**/*.js", "**/**/*.jsx", "**/**/*.ts", "**/**/*.tsx"],
+  "exclude": ["*.tsx"]
+}
diff --git a/docs/vite.config.js b/docs/vite.config.js
new file mode 100644
index 00000000..669a6519
--- /dev/null
+++ b/docs/vite.config.js
@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  css: {
+    preprocessorOptions: {
+        scss: {
+            quietDeps: true
+        },
+    }
+  },
+  resolve: {
+    alias: {
+      './shared-products.json': path.resolve(__dirname, './knowledge-base/examples/shared/shared-products.json'),
+      './shared-sample-products': path.resolve(__dirname, './knowledge-base/examples/shared/shared-sample-products'),
+      './shared-products-with-sections.json': path.resolve(__dirname, './knowledge-base/examples/shared/shared-products-with-sections.json'),
+      './shared-products-loader.jsx': path.resolve(__dirname, './knowledge-base/examples/shared/shared-products-loader.jsx'),
+      './shared-countries': path.resolve(__dirname, './knowledge-base/examples/shared/shared-countries'),
+      './shared-data': path.resolve(__dirname, './knowledge-base/examples/shared/shared-data'),
+      './shared-events-utc': path.resolve(__dirname, './knowledge-base/examples/shared/shared-events-utc'),
+      './shared-treeListData': path.resolve(__dirname, './knowledge-base/examples/shared/shared-treeListData'),
+      './shared-treelist-data': path.resolve(__dirname, './knowledge-base/examples/shared/shared-treelist-data'),
+    },
+  },
+})
diff --git a/knowledge-base/examples/index.html b/knowledge-base/examples/index.html
deleted file mode 100644
index e100e04d..00000000
--- a/knowledge-base/examples/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-    <link id="kendoCss" rel="stylesheet preload" as="style" type="text/css"
-          href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
-  </head>
-  <body>
-    <my-app>
-      <script type="module" src="./app.jsx"></script>
-    </my-app>
-  </body>
-</html>
diff --git a/knowledge-base/examples/layout/drawer-router-v6/main.jsx b/knowledge-base/examples/layout/drawer-router-v6/main.jsx
deleted file mode 100644
index bae568da..00000000
--- a/knowledge-base/examples/layout/drawer-router-v6/main.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { Router, BrowserRouter, Routes, Route } from 'react-router-dom';
-import About from './About';
-import Home from './Home';
-import Products from './Products';
-import DrawerContainer from './DrawerContainer';
-import './styles.css';
-ReactDOM.render(
-  <React.Fragment>
-    <BrowserRouter>
-      <DrawerContainer>
-        <Routes>
-          <Route exact={true} path="/" element={<Home />} />
-          <Route exact={true} path="/products" element={<Products />} />
-          <Route exact={true} path="/about" element={<About />} />
-        </Routes>
-      </DrawerContainer>
-    </BrowserRouter>
-  </React.Fragment>,
-  document.querySelector('my-app')
-);
diff --git a/knowledge-base/examples/layout/panelbar-open-in-new-window/main.jsx b/knowledge-base/examples/layout/panelbar-open-in-new-window/main.jsx
deleted file mode 100644
index 8e92fa17..00000000
--- a/knowledge-base/examples/layout/panelbar-open-in-new-window/main.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as ReactDOM from 'react-dom';
-import * as React from 'react';
-import { HashRouter, Switch, Route } from 'react-router-dom';
-import About from './About';
-import Team from './Team';
-import Home from './Home';
-import Products from './Products';
-import PanelBarNavContainer from './PanelBarNavContainer';
-ReactDOM.render(
-  <HashRouter>
-    <PanelBarNavContainer>
-      <Switch>
-        <Route exact={true} path="/" component={Home} />
-        <Route exact={true} path="/products" component={Products} />
-        <Route exact={true} path="/about" component={About} />
-        <Route exact={true} path="/about/team" component={Team} />
-      </Switch>
-    </PanelBarNavContainer>
-  </HashRouter>,
-  document.querySelector('my-app')
-);
diff --git a/knowledge-base/examples/package.json b/knowledge-base/examples/package.json
deleted file mode 100644
index b8afb6c3..00000000
--- a/knowledge-base/examples/package.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "name": "vite",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@progress/kendo-drawing": "^1.20.0",
-    "@progress/kendo-licensing": "^1.3.5",
-    "@progress/kendo-react-buttons": "^7.4.0",
-    "@progress/kendo-react-dialogs": "^7.4.0",
-    "@progress/kendo-react-dropdowns": "^7.4.0",
-    "@progress/kendo-react-editor": "^7.4.0",
-    "@progress/kendo-react-inputs": "^7.4.0",
-    "@progress/kendo-react-intl": "^7.4.0",
-    "@progress/kendo-react-layout": "^7.4.0",
-    "@progress/kendo-react-pdf": "^7.4.0",
-    "@progress/kendo-react-popup": "^7.4.0",
-    "@progress/kendo-react-progressbars": "^7.4.0",
-    "@progress/kendo-svg-icons": "^2.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "vite": "^5.2.0"
-  }
-}
diff --git a/knowledge-base/examples/vite.config.js b/knowledge-base/examples/vite.config.js
deleted file mode 100644
index 5a33944a..00000000
--- a/knowledge-base/examples/vite.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})