@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

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-02-03T14:04:07.567Z
 
 The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
 
@@ -142,8 +142,8 @@ export default () => (
 
 | 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. |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutHeader
 
@@ -151,7 +151,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutSidebar
 
@@ -159,8 +159,7 @@ export default () => (
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutBody
 
@@ -168,15 +167,15 @@ export default () => (
 
 | 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. |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutBodyNavigation
 
@@ -184,7 +183,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
 
 #### Props: ApplicationLayoutBodyBottomBar
 
@@ -192,9 +191,9 @@ export default () => (
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
 
 #### Props: ApplicationLayoutBodyBanner
 
@@ -202,10 +201,10 @@ export default () => (
 
 | 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. |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 ## SubNavigation example
 
@@ -420,8 +419,8 @@ const useResizer = () => {
 
 | 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. |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutHeader
 
@@ -429,7 +428,7 @@ const useResizer = () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutSidebar
 
@@ -437,8 +436,7 @@ const useResizer = () => {
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutBody
 
@@ -446,15 +444,15 @@ const useResizer = () => {
 
 | 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. |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutBodyNavigation
 
@@ -462,7 +460,7 @@ const useResizer = () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
 
 #### Props: ApplicationLayoutBodyBottomBar
 
@@ -470,9 +468,9 @@ const useResizer = () => {
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
 
 #### Props: ApplicationLayoutBodyBanner
 
@@ -480,10 +478,10 @@ const useResizer = () => {
 
 | 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. |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 ## Body banner example
 
@@ -625,8 +623,8 @@ export default () => (
 
 | 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. |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutHeader
 
@@ -634,7 +632,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutSidebar
 
@@ -642,8 +640,7 @@ export default () => (
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutBody
 
@@ -651,15 +648,15 @@ export default () => (
 
 | 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. |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutBodyNavigation
 
@@ -667,7 +664,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
 
 #### Props: ApplicationLayoutBodyBottomBar
 
@@ -675,9 +672,9 @@ export default () => (
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
 
 #### Props: ApplicationLayoutBodyBanner
 
@@ -685,10 +682,10 @@ export default () => (
 
 | 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. |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 ## Bottom bar example
 
@@ -834,8 +831,8 @@ export default () => (
 
 | 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. |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutHeader
 
@@ -843,7 +840,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutSidebar
 
@@ -851,8 +848,7 @@ export default () => (
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutBody
 
@@ -860,15 +856,15 @@ export default () => (
 
 | 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. |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutBodyNavigation
 
@@ -876,7 +872,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
 
 #### Props: ApplicationLayoutBodyBottomBar
 
@@ -884,9 +880,9 @@ export default () => (
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
 
 #### Props: ApplicationLayoutBodyBanner
 
@@ -894,10 +890,10 @@ export default () => (
 
 | 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. |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 ## Sidebar Example
 
@@ -1083,8 +1079,8 @@ export default () => (
 
 | 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. |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutHeader
 
@@ -1092,7 +1088,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutSidebar
 
@@ -1100,8 +1096,7 @@ export default () => (
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutBody
 
@@ -1109,15 +1104,15 @@ export default () => (
 
 | 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. |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutBodyNavigation
 
@@ -1125,7 +1120,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
 
 #### Props: ApplicationLayoutBodyBottomBar
 
@@ -1133,9 +1128,9 @@ export default () => (
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
 
 #### Props: ApplicationLayoutBodyBanner
 
@@ -1143,10 +1138,10 @@ export default () => (
 
 | 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. |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 ## Complete example with all components
 
@@ -1160,23 +1155,22 @@ Navigation 3
 
 4
 
+6
+3
 4
-7
-4
-4
+6
 
-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 Group8
+Vehicle-1458Asset 1001
+Vehicle-2546Asset 1016
+Vehicle-3976Asset 1010
+Vehicle-4094Asset 1009
+Vehicle-5226Asset 1013
+Vehicle-5265Asset 1012
+Vehicle-5337Asset 1005
+Vehicle-6602Asset 1018
 
-Ungrouped10
+Ungrouped11
 
 200
 
@@ -1211,23 +1205,22 @@ Navigation 3
 
 4
 
+6
+3
 4
-7
-4
-4
+6
 
-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 Group8
+Vehicle-1458Asset 1001
+Vehicle-2546Asset 1016
+Vehicle-3976Asset 1010
+Vehicle-4094Asset 1009
+Vehicle-5226Asset 1013
+Vehicle-5265Asset 1012
+Vehicle-5337Asset 1005
+Vehicle-6602Asset 1018
 
-Ungrouped10
+Ungrouped11
 
 200
 
@@ -1258,7 +1251,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 +1560,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 +1706,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-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">6</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-trailer 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">3</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-van text-size-16 margin-right-2">
                                                         </span>
                                                         <span class="TreeLabelCount label label-condensed label-muted label-filled">4</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">4</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
                                                     </div>
                                                 </div>
                                             </div>
@@ -1748,143 +1741,128 @@ 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">8</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">
+                                            <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">
                                                     </span>
                                                 </label>
                                                 <span class="TreeLabel TreeLabelName">
-                                                    <span class="rioglyph rioglyph-bus">
+                                                    <span class="rioglyph rioglyph-trailer">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3532</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1007</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-1458</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-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-van">
+                                                    <span class="rioglyph rioglyph-trailer">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3812</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1000</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2546</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1016</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9716">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9710">
                                                 <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 class="rioglyph rioglyph-bus">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5185</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1016</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-3976</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1010</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-7b7fd85d979">
                                                 <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 class="rioglyph rioglyph-bus">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6538</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1017</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-4094</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1009</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9713">
                                                 <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 class="rioglyph rioglyph-bus">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7129</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1008</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5226</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1013</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-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-bus">
+                                                    <span class="rioglyph rioglyph-truck">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7924</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1010</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5265</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1012</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9712">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
                                                 <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-van">
                                                     </span>
                                                     <span class="TreeLabelNameText">
-                                                        <span class="TreeLabelNameTextHeadline">Vehicle-8111</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1012</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5337</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1005</span>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9718">
                                                 <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-9372</span>
-                                                        <span class="TreeLabelNameTextSubline">Asset 1014</span>
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6602</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1018</span>
                                                     </span>
                                                 </span>
                                             </div>
@@ -1900,7 +1878,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">11</span>
                                                     <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                     </span>
                                                 </span>
@@ -2076,8 +2054,8 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
 
 | 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. |
+| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutHeader
 
@@ -2085,7 +2063,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutSidebar
 
@@ -2093,8 +2071,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
 
 #### Props: ApplicationLayoutBody
 
@@ -2102,15 +2079,15 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
 
 | 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. |
+| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
+| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
+| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
+| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
+| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
+| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
+| className | string | — | Additional class names that are added to the respective component. |
 
 #### Props: ApplicationLayoutBodyNavigation
 
@@ -2118,7 +2095,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |
 
 #### Props: ApplicationLayoutBodyBottomBar
 
@@ -2126,9 +2103,9 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
 
 | 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. |
+| className | string | — | Additional class names that are added to the respective component |
+| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |
 
 #### Props: ApplicationLayoutBodyBanner
 
@@ -2136,7 +2113,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
 
 | 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. |
+| textColor | string | `text-color-white` | One of the text-color utility classes. |
+| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
+| isSticky | boolean | false | Allows sticky banner while scrolling. |
+| className | string | — | Additional class names that are added to the respective component. |