@rio-cloud/uikit-mcp 1.1.2 → 1.1.4

package/dist/docs/components/appLayout.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Application
 *Source:* https://uikit.developers.rio.cloud/#components/appLayout
-*Captured:* 2025-12-15T15:02:04.754Z
+*Captured:* 2026-01-14T09:06:55.859Z
 
 The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
 
@@ -136,77 +136,6 @@ export default () => (
 </div>
 ```
 
-#### Props: ApplicationLayout
-
-### ApplicationLayout
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutHeader
-
-### ApplicationLayoutHeader
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutSidebar
-
-### ApplicationLayoutSidebar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| ref | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutBody
-
-### ApplicationLayoutBody
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
-| children | any | — | Any component given to the layout components will be rendered |
-| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
-| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
-| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
-| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
-| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
-| banner | any | — | The ApplicationLayoutBodyBanner component. |
-
-#### Props: ApplicationLayoutBodyNavigation
-
-### ApplicationLayoutBodyNavigation
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
-
-#### Props: ApplicationLayoutBodyBottomBar
-
-### ApplicationLayoutBodyBottomBar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
-| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
-
-#### Props: ApplicationLayoutBodyBanner
-
-### ApplicationLayoutBodyBanner
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
-| textColor | string | text-color-white | One of our text-color utility classes. |
-| isSticky | Boolean | false | Sticky while scrolling. |
-
 ## SubNavigation example
 
 ### Example: Example 2
@@ -414,77 +343,6 @@ const useResizer = () => {
 </div>
 ```
 
-#### Props: ApplicationLayout
-
-### ApplicationLayout
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutHeader
-
-### ApplicationLayoutHeader
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutSidebar
-
-### ApplicationLayoutSidebar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| ref | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutBody
-
-### ApplicationLayoutBody
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
-| children | any | — | Any component given to the layout components will be rendered |
-| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
-| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
-| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
-| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
-| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
-| banner | any | — | The ApplicationLayoutBodyBanner component. |
-
-#### Props: ApplicationLayoutBodyNavigation
-
-### ApplicationLayoutBodyNavigation
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
-
-#### Props: ApplicationLayoutBodyBottomBar
-
-### ApplicationLayoutBodyBottomBar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
-| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
-
-#### Props: ApplicationLayoutBodyBanner
-
-### ApplicationLayoutBodyBanner
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
-| textColor | string | text-color-white | One of our text-color utility classes. |
-| isSticky | Boolean | false | Sticky while scrolling. |
-
 ## Body banner example
 
 ### Example: Example 3
@@ -619,77 +477,6 @@ export default () => (
 </div>
 ```
 
-#### Props: ApplicationLayout
-
-### ApplicationLayout
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutHeader
-
-### ApplicationLayoutHeader
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutSidebar
-
-### ApplicationLayoutSidebar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| ref | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutBody
-
-### ApplicationLayoutBody
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
-| children | any | — | Any component given to the layout components will be rendered |
-| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
-| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
-| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
-| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
-| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
-| banner | any | — | The ApplicationLayoutBodyBanner component. |
-
-#### Props: ApplicationLayoutBodyNavigation
-
-### ApplicationLayoutBodyNavigation
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
-
-#### Props: ApplicationLayoutBodyBottomBar
-
-### ApplicationLayoutBodyBottomBar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
-| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
-
-#### Props: ApplicationLayoutBodyBanner
-
-### ApplicationLayoutBodyBanner
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
-| textColor | string | text-color-white | One of our text-color utility classes. |
-| isSticky | Boolean | false | Sticky while scrolling. |
-
 ## Bottom bar example
 
 ### Example: Example 4
@@ -828,77 +615,6 @@ export default () => (
 </div>
 ```
 
-#### Props: ApplicationLayout
-
-### ApplicationLayout
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutHeader
-
-### ApplicationLayoutHeader
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutSidebar
-
-### ApplicationLayoutSidebar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| ref | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutBody
-
-### ApplicationLayoutBody
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
-| children | any | — | Any component given to the layout components will be rendered |
-| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
-| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
-| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
-| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
-| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
-| banner | any | — | The ApplicationLayoutBodyBanner component. |
-
-#### Props: ApplicationLayoutBodyNavigation
-
-### ApplicationLayoutBodyNavigation
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
-
-#### Props: ApplicationLayoutBodyBottomBar
-
-### ApplicationLayoutBodyBottomBar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
-| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
-
-#### Props: ApplicationLayoutBodyBanner
-
-### ApplicationLayoutBodyBanner
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
-| textColor | string | text-color-white | One of our text-color utility classes. |
-| isSticky | Boolean | false | Sticky while scrolling. |
-
 ## Sidebar Example
 
 ### Example: Example 5
@@ -1077,77 +793,6 @@ export default () => (
 </div>
 ```
 
-#### Props: ApplicationLayout
-
-### ApplicationLayout
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutHeader
-
-### ApplicationLayoutHeader
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutSidebar
-
-### ApplicationLayoutSidebar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| ref | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutBody
-
-### ApplicationLayoutBody
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
-| children | any | — | Any component given to the layout components will be rendered |
-| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
-| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
-| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
-| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
-| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
-| banner | any | — | The ApplicationLayoutBodyBanner component. |
-
-#### Props: ApplicationLayoutBodyNavigation
-
-### ApplicationLayoutBodyNavigation
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
-
-#### Props: ApplicationLayoutBodyBottomBar
-
-### ApplicationLayoutBodyBottomBar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
-| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
-
-#### Props: ApplicationLayoutBodyBanner
-
-### ApplicationLayoutBodyBanner
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
-| textColor | string | text-color-white | One of our text-color utility classes. |
-| isSticky | Boolean | false | Sticky while scrolling. |
-
 ## Complete example with all components
 
 ### Example: Example 6
@@ -1160,17 +805,15 @@ Navigation 3
 
 4
 
-3
 1
-2
 1
+1
+2
 
-Asset Group5
-Vehicle-2702Asset 1002
-Vehicle-2861Asset 1006
-Vehicle-3712Asset 1001
-Vehicle-6558Asset 1000
-Vehicle-9897Asset 1003
+Asset Group3
+Vehicle-3474Asset 1001
+Vehicle-4057Asset 1004
+Vehicle-7625Asset 1002
 
 Ungrouped2
 
@@ -1207,17 +850,15 @@ Navigation 3
 
 4
 
-3
 1
-2
 1
+1
+2
 
-Asset Group5
-Vehicle-2702Asset 1002
-Vehicle-2861Asset 1006
-Vehicle-3712Asset 1001
-Vehicle-6558Asset 1000
-Vehicle-9897Asset 1003
+Asset Group3
+Vehicle-3474Asset 1001
+Vehicle-4057Asset 1004
+Vehicle-7625Asset 1002
 
 Ungrouped2
 
@@ -1250,7 +891,7 @@ Bottom Button
 import { useState, useEffect } from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import { random } from 'es-toolkit/compat';
-import faker from 'faker';
+import { faker } from '@faker-js/faker';
 import IframeResizer from 'iframe-resizer-react';
 
 import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
@@ -1559,15 +1200,15 @@ const assets = Array.from({ length: random(5, 20) }, (_, index) => ({
     id: `010191ac-d06d-4567-b13a-7b7fd85d97${index}`,
     name: `Vehicle-${random(1000, 9999)}`,
     info: `Asset 1${String(index).padStart(3, '0')}`,
-    type: faker.random.arrayElement(['truck', 'trailer', 'van', 'bus']),
-    groupIds: [faker.random.arrayElement(assetGroups).id],
+    type: faker.helpers.arrayElement(['truck', 'trailer', 'van', 'bus']),
+    groupIds: [faker.helpers.arrayElement(assetGroups).id],
 }));
 
 const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
     id: `74e8eb86-18a1-4abe-90cb-aeee7909f85${index}`,
     name: {
-        firstName: faker.internet.userName(),
-        lastName: faker.name.firstName(),
+        firstName: faker.internet.username(),
+        lastName: faker.person.firstName(),
     },
     type: 'driver',
 }));
@@ -1707,23 +1348,23 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
-                                                    </div>
-                                                    <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                        <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
-                                                        </span>
                                                         <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
                                                         </span>
                                                         <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
                                                     </div>
+                                                    <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
+                                                        <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
+                                                        </span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
@@ -1740,41 +1381,11 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="TreeLabelNameText">
                                                         <span class="TreeLabelNameTextHeadline">Asset Group</span>
                                                     </span>
-                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
+                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
                                                     <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
-                                                <label class="checkbox TreeCheckbox" tabindex="0">
-                                                    <input type="checkbox" class="TreeCheckbox">
-                                                    <span class="checkbox-text">
-                                                    </span>
-                                                </label>
-                                                <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-van">
-                                                    </span>
-                                                    <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2702</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1002</span>
-                                                    </span>
-                                                </span>
-                                            </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
-                                                <label class="checkbox TreeCheckbox" tabindex="0">
-                                                    <input type="checkbox" class="TreeCheckbox">
-                                                    <span class="checkbox-text">
-                                                    </span>
-                                                </label>
-                                                <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-bus">
-                                                    </span>
-                                                    <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2861</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1006</span>
-                                                    </span>
-                                                </span>
-                                            </div>
                                             <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
@@ -1782,41 +1393,41 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     </span>
                                                 </label>
                                                 <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-truck">
+                                                    <span class="rioglyph rioglyph-van">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3712</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3474</span>
                                                         <span class="TreeLabelNameTextSubline">Asset 1001</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d974">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
                                                     </span>
                                                 </label>
                                                 <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-trailer">
+                                                    <span class="rioglyph rioglyph-truck">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6558</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1000</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-4057</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1004</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d973">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
                                                     </span>
                                                 </label>
                                                 <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-trailer">
+                                                    <span class="rioglyph rioglyph-bus">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-9897</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1003</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7625</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1002</span>
                                                     </span>
                                                 </span>
                                             </div>
@@ -2000,75 +1611,4 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
         <button type="button" class="btn btn-primary">Bottom Button</button>
     </div>
 </div>
-```
-
-#### Props: ApplicationLayout
-
-### ApplicationLayout
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutHeader
-
-### ApplicationLayoutHeader
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutSidebar
-
-### ApplicationLayoutSidebar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| ref | React.ref | — | A React ref function assigned to the wrapper element. |
-| className | String | — | Additional class names that are added to the respective component. |
-
-#### Props: ApplicationLayoutBody
-
-### ApplicationLayoutBody
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
-| children | any | — | Any component given to the layout components will be rendered |
-| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
-| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
-| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
-| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
-| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
-| banner | any | — | The ApplicationLayoutBodyBanner component. |
-
-#### Props: ApplicationLayoutBodyNavigation
-
-### ApplicationLayoutBodyNavigation
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
-
-#### Props: ApplicationLayoutBodyBottomBar
-
-### ApplicationLayoutBodyBottomBar
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
-| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
-
-#### Props: ApplicationLayoutBodyBanner
-
-### ApplicationLayoutBodyBanner
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
-| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
-| textColor | string | text-color-white | One of our text-color utility classes. |
-| isSticky | Boolean | false | Sticky while scrolling. |
+```