@rio-cloud/uikit-mcp 1.1.3 → 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:* 2026-01-07T12:11:08.760Z
+*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,23 +805,17 @@ Navigation 3
 
 4
 
-4
-7
-4
-4
+1
+1
+1
+2
 
-Asset Group9
-Vehicle-1869Asset 1015
-Vehicle-3532Asset 1007
-Vehicle-3812Asset 1000
-Vehicle-5185Asset 1016
-Vehicle-6538Asset 1017
-Vehicle-7129Asset 1008
-Vehicle-7924Asset 1010
-Vehicle-8111Asset 1012
-Vehicle-9372Asset 1014
+Asset Group3
+Vehicle-3474Asset 1001
+Vehicle-4057Asset 1004
+Vehicle-7625Asset 1002
 
-Ungrouped10
+Ungrouped2
 
 200
 
@@ -1211,23 +850,17 @@ Navigation 3
 
 4
 
-4
-7
-4
-4
+1
+1
+1
+2
 
-Asset Group9
-Vehicle-1869Asset 1015
-Vehicle-3532Asset 1007
-Vehicle-3812Asset 1000
-Vehicle-5185Asset 1016
-Vehicle-6538Asset 1017
-Vehicle-7129Asset 1008
-Vehicle-7924Asset 1010
-Vehicle-8111Asset 1012
-Vehicle-9372Asset 1014
+Asset Group3
+Vehicle-3474Asset 1001
+Vehicle-4057Asset 1004
+Vehicle-7625Asset 1002
 
-Ungrouped10
+Ungrouped2
 
 200
 
@@ -1258,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';
@@ -1567,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',
 }));
@@ -1713,24 +1346,24 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                             <div class="display-flex justify-content-between align-items-start width-100pct">
                                                 <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
                                                     <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 class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</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 class="rioglyph rioglyph-van text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">7</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-trailer text-size-16 margin-right-2">
+                                                        <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</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 class="rioglyph rioglyph-truck text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
                                                     </div>
                                                 </div>
                                             </div>
@@ -1748,42 +1381,12 @@ 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">9</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-7b7fd85d9715">
-                                                <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-truck">
-                                                    </span>
-                                                    <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-1869</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1015</span>
-                                                    </span>
-                                                </span>
-                                            </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d977">
-                                                <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-3532</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1007</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-7b7fd85d971">
                                                 <label class="checkbox TreeCheckbox" tabindex="0">
                                                     <input type="checkbox" class="TreeCheckbox">
                                                     <span class="checkbox-text">
@@ -1793,27 +1396,12 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-van">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3812</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1000</span>
-                                                    </span>
-                                                </span>
-                                            </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9716">
-                                                <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-truck">
-                                                    </span>
-                                                    <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5185</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1016</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-7b7fd85d9717">
+                                            <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">
@@ -1823,27 +1411,12 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-truck">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6538</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1017</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-7b7fd85d978">
-                                                <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-7129</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1008</span>
-                                                    </span>
-                                                </span>
-                                            </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9710">
+                                            <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">
@@ -1853,38 +1426,8 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="rioglyph rioglyph-bus">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7924</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1010</span>
-                                                    </span>
-                                                </span>
-                                            </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9712">
-                                                <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>
-                                                    <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-8111</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1012</span>
-                                                    </span>
-                                                </span>
-                                            </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
-                                                <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>
-                                                    <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-9372</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1014</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7625</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1002</span>
                                                     </span>
                                                 </span>
                                             </div>
@@ -1900,7 +1443,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
                                                     <span class="TreeLabelNameText">
                                                         <span class="TreeLabelNameTextHeadline">Ungrouped</span>
                                                     </span>
-                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">10</span>
+                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
                                                     <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                     </span>
                                                 </span>
@@ -2068,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. |
+```