@rio-cloud/uikit-mcp 1.1.5 → 1.1.7

package/dist/doc-metadata.json

@@ -44,7 +44,7 @@
     "title": "Animations",
     "lead": "The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.",
     "summary": "The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.",
-    "searchText": "Animations\nThe UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.\nAnimations\nThe official documentation can be found here https://motion.dev/docs/react\nSome Data\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nAdd ItemItem SAY31NI9JY\n\nItem 3Y845VKS7Q\n\nItem 2TR06HFALV\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nLoad ItemsItem Y3E1PAWU4G\n\nItem 03RN4LBQUH\n\nItem RNLIJUFWD1\n\nItem USNNCEUF3C\n\nItem S6FC5S6QMJ\n\nItem 01C0J9EA59",
+    "searchText": "Animations\nThe UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.\nAnimations\nThe official documentation can be found here https://motion.dev/docs/react\nSome Data\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nAdd ItemItem OJZVGQA3W1\n\nItem O2YWLCZCY8\n\nItem VAJA7ROY1W\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nLoad ItemsItem IMGUJ26458\n\nItem SFU5JE7VRI\n\nItem NLLNGG2GSBG\n\nItem XNU98Q531P\n\nItem 1L6E76Z95QI\n\nItem ERTDUB2X0J",
     "category": "Components",
     "section": "Content",
     "boost": "Animations components/animations #components/animations Components Content"
@@ -64,7 +64,7 @@
     "title": "ApplicationLayout",
     "lead": "The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar",
     "summary": "The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar",
-    "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBody banner example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n6\n3\n4\n6\n\nAsset Group8\nVehicle-1458Asset 1001\nVehicle-2546Asset 1016\nVehicle-3976Asset 1010\nVehicle-4094Asset 1009\nVehicle-5226Asset 1013\nVehicle-5265Asset 1012\nVehicle-5337Asset 1005\nVehicle-6602Asset 1018\n\nUngrouped11\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |",
+    "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBody banner example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n4\n3\n1\n3\n\nAsset Group9\nVehicle-1343Asset 1010\nVehicle-2513Asset 1002\nVehicle-2575Asset 1005\nVehicle-2741Asset 1006\nVehicle-6386Asset 1000\nVehicle-6560Asset 1001\nVehicle-6904Asset 1008\nVehicle-7768Asset 1009\nVehicle-9357Asset 1003\n\nUngrouped2\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | MutableRefObject<HTMLDivElement \\| null| — | A React ref function assigned to the wrapper element. |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| 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. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | string | — | Additional class names that are added to the respective component |\n| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| 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 |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |",
     "category": "Components",
     "section": "Application",
     "boost": "ApplicationLayout components/appLayout #components/appLayout Components Application"
@@ -104,7 +104,7 @@
     "title": "AssetTree",
     "lead": null,
     "summary": "Filter",
-    "searchText": "AssetTree\nAssetTree\nFilter\n\n5868\n4\n\nGroup - Adrienne Weimann - 60548\n\nGroup - Agnes Homenick - 817311\n\nGroup - Alejandro Little - 593623\n\nGroup - Alexander Kautzer - 58489\n\nGroup - Alexandra McGlynn - 40409\n\nGroup - Allen Feeney - 758310\n\nGroup - Alma Bradtke - 812611\n\nGroup - Alton Becker MD - 390414\n\nGroup - Amber Swift IV - 81856\n\nGroup - Amos Gorczany - 298611\n\nGroup - Amos Hickle - 741010\n\nGroup - Amos Nader - 357510\n\nGroup - Ana Sanford - 221715\n\nGroup - Ana Sporer - 48377\n\n200\n\n200\n\nLoad trucksClear treeToggle all groups selection\n\nCurrent category:\ntrucks\nSelected groups:\n\nSelected assets:\n\nExpanded groups:\nTrailer Group\n\nSelected drivers:\n\nSearch value:\n\nAsset type filter:\n[]\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n11\n7\n4\n8\n\nMy Empty Group4\n\nTruck Group East4\n\nTruck Group North9\nN18-G203 / M-AN 1002\nN18-G260 / M-AN 1028\nN18-G314 / M-AN 1006\nN18-G370 / M-AN 1022\nN18-G455 / M-AN 1024\nN18-G502 / M-AN 1014\nN18-G600 / M-AN 1001\nN18-G752 / M-AN 1021\nN18-G990 / M-AN 1015\n\nTruck Group South5\n\nTruck Group West3\n\nAll my unassigned Trucks5\n\nCurrent category:\nassets\nSelected tree groups:\n\nSelected assets:\n\nExpanded tree groups:\nTruck Group North\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\n9\n7\n3\n1\n\n8\n7\n1\n2\n2\n\nMixed Vehicles8\nVehicle-1670Debug: hydrogen\nVehicle-2011Debug: diesel\nVehicle-3346Debug: dual_fuel_diesel_cng\nVehicle-3670Debug: lpg\nVehicle-5464Debug: cng\nVehicle-6229Debug: lpg\nVehicle-6521Debug: cng\nVehicle-7377Debug: gas\n\nUngrouped12\n\nSelected groups:\n\nSelected vehicles:\n\nExpanded groups:\nMixed Vehicles\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with custom summary\n3\n15\n\nJohnDoe\nMaxlRainer\nJohanSchmidt\n\nSome small dummy text at the bottom to showcase that you can put something here\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree with custom icons\nTree with header and search\n\n20\n\nGroup 014\n\nGroup 026\n\nGroup 0310\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 017\n\nFolder 024\n\nFolder 035\n\nFolder 044\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree without header and search\n\nFolder 012\n\nFolder 028\n\nFolder 034\n\nFolder 046\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\nTreeSummary with TypeCounter\n9\n15\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |",
+    "searchText": "AssetTree\nAssetTree\nFilter\n\n5143\n4\n\nGroup - Aaron Waters - 73367\n\nGroup - Abagail Stoltenberg - 913613\n\nGroup - Abelardo Considine DVM - 62765\n\nGroup - Abraham Senger PhD - 132716\n\nGroup - Alberta Veum - 57937\n\nGroup - Alek Gulgowski - 954312\n\nGroup - Alena Welch - 15629\n\nGroup - Alessandro Blanda - 38079\n\nGroup - Alexandra Hyatt I - 382820\n\nGroup - Alison Jerde - 909211\n\nGroup - Alta Schuppe - 900418\n\nGroup - Alvin Wolf - 135517\n\nGroup - Amber Hodkiewicz V - 132312\n\nGroup - Amber O'Reilly - 345011\n\n200\n\n200\n\nLoad trucksClear treeToggle all groups selection\n\nCurrent category:\ntrucks\nSelected groups:\n\nSelected assets:\n\nExpanded groups:\nTrailer Group\n\nSelected drivers:\n\nSearch value:\n\nAsset type filter:\n[]\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n5\n8\n8\n9\n\nMy Empty Group7\n\nTruck Group East3\n\nTruck Group North2\nN18-G225 / M-AN 1027\nN18-G660 / M-AN 1019\n\nTruck Group South8\n\nTruck Group West7\n\nAll my unassigned Trucks3\n\nCurrent category:\nassets\nSelected tree groups:\n\nSelected assets:\n\nExpanded tree groups:\nTruck Group North\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\n7\n5\n5\n3\n\n6\n5\n2\n5\n2\n\nMixed Vehicles4\nVehicle-2107Debug: hydrogen\nVehicle-2123Debug: cng\nVehicle-7629Debug: diesel\nVehicle-8638Debug: hydrogen\n\nUngrouped16\n\nSelected groups:\n\nSelected vehicles:\n\nExpanded groups:\nMixed Vehicles\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with custom summary\n3\n15\n\nJohnDoe\nMaxlRainer\nJohanSchmidt\n\nSome small dummy text at the bottom to showcase that you can put something here\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree with custom icons\nGroup 0110\n\nGroup 027\n\nGroup 033\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | (isOpen: boolean) =void | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | string | — | Additional classes added on the wrapper element. |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | A unique identifier for that category. |\n| icon | string | — | The rioglyph icon name for that category. |\n| label | string \\| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | The search value to be shown and used for the search. |\n| onChange | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | Callback for when the search value changes. |\n| placeholder | string | — | The placeholder text used for the input field. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 016\n\nFolder 023\n\nFolder 037\n\nFolder 044\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree without header and search\n\nFolder 017\n\nFolder 022\n\nFolder 035\n\nFolder 046\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | string | — | A unique identifier of a group. |\n| └name | string \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |\n| └info | string \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | number | — | Defines the max-height of the scrollable list. |\n| expandedGroups | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | string | — | Additional classes added to the wrapping element. |\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\nTreeSummary with TypeCounter\n9\n15\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks |\n| └trailer | number | — | The amount of trailers |\n| └bus | number | — | The amount of buses |\n| └van | number | — | The amount of vans |\n| └car | number | — | The amount of cars |\n| └driver | number | — | The amount of drivers |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | boolean | — | Sets the active styling if active |\n| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | (type: string) =void | — | Callback function when the counter is clicked. It returns the type value. Make sure the \"type\" prop is defined to receive the value in the callback. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |",
     "category": "Components",
     "section": "Selection",
     "boost": "AssetTree components/assetTree #components/assetTree Components Selection"
@@ -184,7 +184,7 @@
     "title": "Button",
     "lead": "The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons",
     "summary": "The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons",
-    "searchText": "Button\nThe button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons\nButton\nStandard buttons\nDefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted\nDisabled buttons\nDefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted\nButton sizes\nExtra SmallSmallMediumLarge\nIcon only buttons\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\nLink buttons\nPrimarySuccessInfoWarningDanger\nLink inline buttons\n\nThis is an example for an Inline link button.\nNote Link buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\nButton group\n\nButton with tooltips\nButton with TooltipDisabled Button with Tooltip\nBlock button\nBlock button\nMultiline button\nThis is a multiline button with a lot of Text\nToggle button\nToggle me\nAdd something / take picture button example\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\nOutlined buttons (transparent)\nDefaultPrimarySuccessInfoWarningDangerMuted filledMuted\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\nAction buttons\nClick me!Click me!Click me!Click me!Click me!Click me!\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |",
+    "searchText": "Button\nThe button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons\nButton\nStandard buttons\nDefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted\nDisabled buttons\nDefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted\nButton sizes\nExtra SmallSmallMediumLarge\nIcon only buttons\n### Base button props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n| type | 'button' \\| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\n### Link element buttons\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| as | 'a' | — | Defines this component as a link element. |\n| type | never | — | Native button type is not supported when using as=\"a\". |\n| href | string | — | Defines the destination URL for the link button. |\n| asToggle | false | false | Toggle behavior is not supported when using as=\"a\". |\n| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent) =void | — | Callback function triggered when clicking the link. |\nButtons with link styles\nPrimarySuccessInfoWarningDanger\nButton with link styles - inline\n\nThis is an example for an Inline link button.\nNote Link styled buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE.\n### Base button props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n| type | 'button' \\| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\n### Link element buttons\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| as | 'a' | — | Defines this component as a link element. |\n| type | never | — | Native button type is not supported when using as=\"a\". |\n| href | string | — | Defines the destination URL for the link button. |\n| asToggle | false | false | Toggle behavior is not supported when using as=\"a\". |\n| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent) =void | — | Callback function triggered when clicking the link. |\nButton group\n\nButton with tooltips\nButton with TooltipDisabled Button with Tooltip\nBlock button\nBlock button\nMultiline button\nThis is a multiline button with a lot of Text\nToggle button\nToggle me\nAdd something / take picture button example\n### Base button props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n| type | 'button' \\| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\n### Link element buttons\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| as | 'a' | — | Defines this component as a link element. |\n| type | never | — | Native button type is not supported when using as=\"a\". |\n| href | string | — | Defines the destination URL for the link button. |\n| asToggle | false | false | Toggle behavior is not supported when using as=\"a\". |\n| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent) =void | — | Callback function triggered when clicking the link. |\nOutlined buttons (transparent)\nDefaultPrimarySuccessInfoWarningDangerMuted filledMuted\n### Base button props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n| type | 'button' \\| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\n### Link element buttons\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| as | 'a' | — | Defines this component as a link element. |\n| type | never | — | Native button type is not supported when using as=\"a\". |\n| href | string | — | Defines the destination URL for the link button. |\n| asToggle | false | false | Toggle behavior is not supported when using as=\"a\". |\n| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent) =void | — | Callback function triggered when clicking the link. |\nButtons as anchor element\nDefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted\nButtons as anchor element - disabled\nDefaultPrimarySecondarySuccessInfoWarningDangerMuted filledMuted\nButtons as anchor element - various sizes\nExtra SmallSmallMediumLarge\nButtons as anchor element - icon only\n### Base button props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n| type | 'button' \\| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\n### Link element buttons\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| as | 'a' | — | Defines this component as a link element. |\n| type | never | — | Native button type is not supported when using as=\"a\". |\n| href | string | — | Defines the destination URL for the link button. |\n| asToggle | false | false | Toggle behavior is not supported when using as=\"a\". |\n| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent) =void | — | Callback function triggered when clicking the link. |\nAction buttons\nClick me!Click me!Click me!Click me!Click me!Click me!\n### Base button props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n| type | 'button' \\| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\n### Link element buttons\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| as | 'a' | — | Defines this component as a link element. |\n| type | never | — | Native button type is not supported when using as=\"a\". |\n| href | string | — | Defines the destination URL for the link button. |\n| asToggle | false | false | Toggle behavior is not supported when using as=\"a\". |\n| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent) =void | — | Callback function triggered when clicking the link. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "Button components/button #components/button Components Interaction"
@@ -204,7 +204,7 @@
     "title": "CalendarStripe",
     "lead": "A headless component where you provide a function that renders the UI for every day to be displayed.",
     "summary": "A headless component where you provide a function that renders the UI for every day to be displayed.",
-    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nWednesday\n4 February 2026\n\nThursday\n5 February 2026\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | number | 200 | The minimum width in pixel of a single day column This value determines how many days are shown per page depending on the parent width. |\n| minDays | number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | number | 7 | The maximum amount of days that should be shown per page. |\n| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |\nFeb\n4\n2026\n\nFeb\n5\n2026\n\nSet to JanuaryToggle Weekends\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | number | 200 | The minimum width in pixel of a single day column This value determines how many days are shown per page depending on the parent width. |\n| minDays | number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | number | 7 | The maximum amount of days that should be shown per page. |\n| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |",
+    "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nTuesday\n24 February 2026\n\nWednesday\n25 February 2026\n\nThursday\n26 February 2026\n\nFriday\n27 February 2026\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | number | 200 | The minimum width in pixel of a single day column This value determines how many days are shown per page depending on the parent width. |\n| minDays | number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | number | 7 | The maximum amount of days that should be shown per page. |\n| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |\nFeb\n24\n2026\n\nFeb\n25\n2026\n\nFeb\n26\n2026\n\nFeb\n27\n2026\n\nFeb\n28\n2026\n\nMar\n1\n2026\n\nMar\n2\n2026\n\nMar\n3\n2026\n\nSet to JanuaryToggle Weekends\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | number | 200 | The minimum width in pixel of a single day column This value determines how many days are shown per page depending on the parent width. |\n| minDays | number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | number | 7 | The maximum amount of days that should be shown per page. |\n| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |",
     "category": "Components",
     "section": "Misc",
     "boost": "CalendarStripe components/calendarStripe #components/calendarStripe Components Misc"
@@ -269,6 +269,16 @@
     "section": "Interaction",
     "boost": "Checkbox components/checkbox #components/checkbox Components Interaction"
   },
+  {
+    "id": "components/circularProgress",
+    "title": "CircularProgress",
+    "lead": null,
+    "summary": "Default circular progress",
+    "searchText": "CircularProgress\nCircularProgress\nDefault circular progress\n30\n\nCircular progress customizations\n85 km/h\n\nSpeed\n\n40%\n\nCustom label\n\n100\n\nWith max value\n\nDifferent sizes with custom value label\n\nxs\n\nsm\n\nmd\n\nlg\n\nxl\n\nStrong customization\n40%\n\n3200 Points\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | React.ReactNode | — | Optional text or node shown below the ring. |\n| size | CircularProgressSize | 'md' | Preset size for the component. Possible values are: 'xs' 'sm' 'md' 'lg' 'xl' |\n| color | CircularProgressColor | 'primary' | Color preset for the progress ring. Possible values are: 'default' 'primary' 'secondary' 'info' 'success' 'warning' 'danger' 'white' |\n| value | number | 0 | Defaults to 0 to avoid indeterminate/spinner visuals. |\n| valueLabel | React.ReactNode | — | Override the rendered value label content. |\n| minValue | number | 0 | Minimum value for the range. |\n| maxValue | number | 100 | Maximum value for the range. |\n| formatOptions | Intl.NumberFormatOptions | — | Formatting for the visible value label. - If style === \"percent\": formats ratio (value-min)/(max-min) - Otherwise: formats the raw value (e.g. unit) |\n| isIndeterminate | boolean | false | Indeterminate mode is opt-in. Animates the progress indefinitely. May come in handy when the value still loads to prevent layout shifting. |\n| showValueLabel | boolean | true | Toggles the value label in the center of the ring. |\n| strokeWidth | number | 8 | Stroke width used for the ring and track. |\n| trackColor | CircularProgressTrackColor | 'lighter' | Track color preset for the background ring. Possible values are: 'decent' 'lightest' 'lighter' 'light' 'gray' 'dark' 'darker' 'darkest' 'white' |\n| trackClassName | string | — | Class name for the track (background ring). |\n| disableAnimation | boolean | false | Disable motion even if the user allows animations. |\n| animationDelay | number | 0 | Delay before the progress animation starts (in seconds). |\n| className | string | — | Class name for the outer wrapper. |\n| ringWrapClassName | string | — | Class name for the ring wrapper. |\n| valueLabelClassName | string | — | Class name for the center value label. |\n| labelClassName | string | — | Class name for the label under the ring. |\n0%\n\nProcessing configuration...\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| label | React.ReactNode | — | Optional text or node shown below the ring. |\n| size | CircularProgressSize | 'md' | Preset size for the component. Possible values are: 'xs' 'sm' 'md' 'lg' 'xl' |\n| color | CircularProgressColor | 'primary' | Color preset for the progress ring. Possible values are: 'default' 'primary' 'secondary' 'info' 'success' 'warning' 'danger' 'white' |\n| value | number | 0 | Defaults to 0 to avoid indeterminate/spinner visuals. |\n| valueLabel | React.ReactNode | — | Override the rendered value label content. |\n| minValue | number | 0 | Minimum value for the range. |\n| maxValue | number | 100 | Maximum value for the range. |\n| formatOptions | Intl.NumberFormatOptions | — | Formatting for the visible value label. - If style === \"percent\": formats ratio (value-min)/(max-min) - Otherwise: formats the raw value (e.g. unit) |\n| isIndeterminate | boolean | false | Indeterminate mode is opt-in. Animates the progress indefinitely. May come in handy when the value still loads to prevent layout shifting. |\n| showValueLabel | boolean | true | Toggles the value label in the center of the ring. |\n| strokeWidth | number | 8 | Stroke width used for the ring and track. |\n| trackColor | CircularProgressTrackColor | 'lighter' | Track color preset for the background ring. Possible values are: 'decent' 'lightest' 'lighter' 'light' 'gray' 'dark' 'darker' 'darkest' 'white' |\n| trackClassName | string | — | Class name for the track (background ring). |\n| disableAnimation | boolean | false | Disable motion even if the user allows animations. |\n| animationDelay | number | 0 | Delay before the progress animation starts (in seconds). |\n| className | string | — | Class name for the outer wrapper. |\n| ringWrapClassName | string | — | Class name for the ring wrapper. |\n| valueLabelClassName | string | — | Class name for the center value label. |\n| labelClassName | string | — | Class name for the label under the ring. |",
+    "category": "Components",
+    "section": "Progress",
+    "boost": "CircularProgress components/circularProgress #components/circularProgress Components Progress"
+  },
   {
     "id": "components/clearableInput",
     "title": "ClearableInput",
@@ -324,7 +334,7 @@
     "title": "DatePicker",
     "lead": "A wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.",
     "summary": "A wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.",
-    "searchText": "DatePicker\nA wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.\nDatePicker\nIt can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).\n\nNote: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';\nDefaultFormat: YYYY-MM-DD HH:mm\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nOnly month\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nOnly time\n\n▲12\n▼\n:\n▲00\n▼\n▲AM\n▼\n\nNot closing when selecting\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nWith min-width\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nClearableInput and optional value\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n03:04\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nTo:\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nNote\nWatch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines.\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nReset\nSelects are a simple alternative for choosing dates0101\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n\nJanuaryJanuary\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n20222022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
+    "searchText": "DatePicker\nA wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.\nDatePicker\nIt can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).\n\nNote: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';\nDefaultFormat: YYYY-MM-DD HH:mm\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nOnly month\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nOnly time\n\n▲12\n▼\n:\n▲00\n▼\n▲AM\n▼\n\nNot closing when selecting\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nWith min-width\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nClearableInput and optional value\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n04:48\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nTo:\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nNote\nWatch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines.\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nReset\nSelects are a simple alternative for choosing dates0101\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n\nJanuaryJanuary\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n20222022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
     "category": "Components",
     "section": "Pickers",
     "boost": "DatePicker components/datepickers #components/datepickers Components Pickers"
@@ -354,7 +364,7 @@
     "title": "Dropdowns",
     "lead": "Dropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.",
     "summary": "Dropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.",
-    "searchText": "Dropdowns\nDropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.\nDropdowns\nButtonDropdown\nNormal Button\nnoCaret\nDropup\nSplitButton\n\nSplitButton\n\nLarge button\nDefault button\nSmall button\nMini button\n\nDropdown with max-height\nDropdown with dopup\nDropdown with pullRight\nControlled Dropdown\n\nDropdown variantsText dropdown\n\nCustom dropdowns for filter tagsTag dropdown\n\nTag small dropdown\n\nCustom dropdowns for labelsActive\n\nActive\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nSimpleButtonDropdown\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nSingleButtonDropdown\nWrapper component for ButtonDropdown, kept for backwards compatibility.\nSingleButtonDropdown\nSplitButtonDropdown\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string \\| React.ReactNode | '' | Displayed button title. |\n| items | MenuItem[] | — | Items to display in the dropdown sub menu. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables every entry on the title list item. |\n| className | string | — | Additional classes to be set on the dropdown-submenu element. |\nCustom Dropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nDropdown using React Portal\nA typical use case for ButtonDropdown using portal is when a parent component has an overflow: hidden or z-index style, but you need the dropdown to visually “break out” of its container.\nNormal Button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Dui iaculis. iaculis. nunc iaculis.\n\n2Nec Ut consectetur faucibus. in, efficitur elit. fames posuere libero sem. elementum\n\n3Et scelerisque ac consectetur elementum massa, neque. tortor est consectetur quis, ipsum Ut sagittis\n\n4Amet, semper Ut vitae primis in, vitae Vivamus\n\n5Vel massa condimentum orci, malesuada quis, elit. pharetra primis sem. orci, orci semper. sit condimentum\n\n6Nunc nec vitae in viverra posuere Ut condimentum ac ac ac eget rutrum eget semper\n\n7Est faucibus. libero ut consectetur\n\n8Scelerisque ante molestie fringilla ac\n\n9Metus ante in, posuere et hendrerit faucibus. ac nec vel Integer Vivamus et\n\n10Consectetur lorem quis, ut ligula ut bibendum, ante ut nunc sagittis in molestie et fringilla\n\n11Ac faucibus. volutpat vel condimentum rutrum Ut nec felis. efficitur\n\n12In velit. libero Ut Duis in ipsum\n\n13Elementum orci ligula est primis et eget dui ante sagittis vitae Duis\n\n14Ante elementum ante dui primis ligula nunc eget sem. libero consectetur tortor ante et\n\n15In posuere molestie ante semper Fusce finibus ac ac ante bibendum, condimentum\n\n16Purus in eget posuere ipsum enim purus ac velit.\n\n17In ante posuere ante dui efficitur enim tincidunt. adipiscing tortor consectetur consectetur et\n\n18Lorem velit. nunc ipsum finibus bibendum,\n\n19Lorem tincidunt. tincidunt. sit amet, tortor vel et Fusce Sed ut volutpat\n\n20Ipsum condimentum ante in in efficitur\nLorem volutpat scelerisque felis. scelerisque dui\n\n21Scelerisque semper. aliquam purus felis. Interdum\n\n22Bibendum, Sed Interdum in, viverra\n\n23Et condimentum scelerisque Ut adipiscing metus semper amet, efficitur faucibus.\n\n24Ac et in faucibus. adipiscing bibendum, ante et Duis sem. In ac ante dui velit.\n\n25Ut consectetur iaculis. Ut consectetur molestie\n\n26Condimentum ante neque. ut vel In efficitur\n\n27Ante in, et in enim orci efficitur posuere eget velit. iaculis.\n\n28Nunc Interdum elementum massa, vitae vitae ante Integer malesuada\n\n29Ante est massa, quis, sagittis Duis lorem Vivamus consectetur ante malesuada\n\n30Consectetur adipiscing adipiscing vitae massa libero condimentum primis Mauris tortor Integer vitae et\n\n31Orci pharetra efficitur in rutrum consectetur quis, tortor Integer\n\n32Eget molestie lorem et aliquam\n\n33Fusce iaculis. ac aliquam tincidunt. Vivamus et metus viverra posuere molestie\n\n34Consectetur efficitur ipsum in, purus Interdum ligula Fusce fames\n\n35Velit. ac consectetur Ut volutpat amet,\n\n36Quis, velit. ac eget elit. finibus fames velit. Interdum ante massa molestie\n\n37Metus Ut viverra volutpat in consectetur ante fames elit. tortor in Vivamus sit quis,\n\n38Dui ac consectetur Interdum fames elit. ante metus molestie vitae in,\n\n39Duis orci efficitur metus orci, malesuada ante volutpat elit. condimentum enim molestie Mauris malesuada pharetra\n\n40Dolor fames ipsum in, in, Ut elit. Fusce tincidunt. in ac massa elit. viverra\n\n41Sit ac est amet, Ut semper semper orci, Integer Interdum posuere massa\n\n42Massa ut amet, fames eget est dui Interdum ante\n\n43Ut ac et neque. neque. lorem in\n\n44Quis, faucibus. ante in Integer sagittis nunc elit. et velit.\n\n45Scelerisque Sed orci, primis volutpat ac Mauris Integer in orci, nunc malesuada sit dolor adipiscing\n\n46Ligula et enim amet, orci, ipsum scelerisque hendrerit Ut efficitur\n\n47Sed elementum molestie rutrum eget tortor primis ante posuere condimentum semper\n\n48Consectetur Integer Ut iaculis. in, Vivamus Interdum scelerisque Sed\n\n49In faucibus. adipiscing faucibus. quis, semper malesuada Ut consectetur aliquam vel tincidunt.\n\n50Ipsum metus Mauris enim tincidunt. metus molestie libero\n\n51Hendrerit ut semper. orci, iaculis. ante tincidunt. sagittis lorem posuere\n\n52Ante felis. ac Duis purus efficitur vel molestie sagittis\n\n53Condimentum ipsum amet, Integer Sed Mauris ante felis. neque. elit.\n\n54Eget orci, enim hendrerit ante tincidunt. est ligula ante in volutpat\n\n55Ligula In massa,\nLorem quis, consectetur Duis sagittis fames iaculis. ante\n\n56Lorem pharetra nunc vitae bibendum, elit. volutpat massa, vel Vivamus ipsum\n\n57Vivamus scelerisque in, massa, scelerisque ut tortor felis. ipsum in, Mauris\n\n58Vel\nLorem in, Integer Sed Integer\n\n59Rutrum eget est nunc hendrerit quis, massa Ut tortor dolor efficitur velit.\n\n60Massa ac Interdum bibendum, Sed Interdum\n\n61Malesuada In purus fringilla finibus libero ut ut Duis adipiscing pretium Vivamus\n\n62Adipiscing consectetur vel hendrerit rutrum ipsum lorem Sed metus Vivamus ac Duis\nLorem lorem finibus\n\n63Eget et eget malesuada sagittis adipiscing iaculis. amet, massa, Sed vel\n\n64Fames dolor est et nunc sit\n\n65Purus Fusce ac aliquam hendrerit sem. efficitur est In bibendum,\n\n66Viverra et semper nunc pretium\n\n67Adipiscing tortor nec efficitur ac massa, finibus in,\n\n68Primis neque. amet, eget bibendum, lorem Interdum dolor in,\n\n69Ipsum sagittis vitae massa, primis aliquam ut in rutrum ipsum quis,\n\n70Semper. Sed volutpat Fusce ac ante fames quis, Integer velit.\n\n71Ante aliquam quis, consectetur massa viverra Ut massa, nunc ac felis. est lorem semper.\n\n72Quis, ac Vivamus primis vitae in, eget condimentum hendrerit\n\n73Amet, enim dui sagittis massa quis, est hendrerit orci enim finibus consectetur semper quis,\n\n74Sit consectetur velit. consectetur Fusce ut aliquam\n\n75Ante Integer neque. aliquam vel ligula ipsum dolor tincidunt. consectetur\n\n76Ac tortor ac In hendrerit\n\n77Integer massa, lorem Integer efficitur\nLorem ut ante massa, in, nunc Vivamus\n\n78Malesuada fames lorem iaculis. Integer semper efficitur lorem vitae in,\n\n79Ligula condimentum scelerisque nec sem. scelerisque dolor ante semper\nLorem ac\n\n80Elementum efficitur Mauris ante Fusce orci ante rutrum pharetra ac eget rutrum Sed\n\n81Fusce felis. nec quis, elit. eget Interdum\n\n82Ac ante molestie quis, felis. scelerisque ante dolor finibus Duis dui ligula pharetra condimentum\n\n83Ante in fringilla Sed sit\n\n84Faucibus. scelerisque posuere in Fusce elementum Fusce elit. efficitur efficitur in, efficitur Mauris Integer\n\n85Ac Ut viverra eget dolor ante ut dui pretium massa ac primis lorem\n\n86In Duis adipiscing eget orci, massa, nunc bibendum, orci, faucibus. sem. quis,\n\n87Molestie sit tincidunt. pharetra ac efficitur adipiscing fringilla Interdum\n\n88Mauris ipsum metus ut eget ante enim ante massa ac nunc velit. Vivamus Vivamus ante\n\n89Volutpat sagittis ut scelerisque in, ac sagittis rutrum in vel adipiscing vel libero vitae\n\n90Orci et tortor elit. nunc fames sem. ante consectetur pretium scelerisque\n\n91Sed quis, finibus amet, posuere ut efficitur eget ante consectetur viverra Vivamus nec\n\n92In efficitur in massa, Fusce\n\n93Semper massa, in ac viverra est\n\n94Dui pretium posuere elit. eget consectetur Integer viverra In metus Duis adipiscing tortor metus elementum\n\n95Iaculis. sit purus ipsum Sed velit. elementum scelerisque massa, condimentum ante\n\n96Mauris ut libero enim efficitur Ut ut in malesuada in enim dolor Fusce in Sed\n\n97Scelerisque et posuere massa Ut iaculis. tortor pharetra purus ante in\n\n98In, posuere semper. finibus neque. dolor semper. condimentum in, sem. ipsum libero in\n\n99Semper. orci, finibus hendrerit Fusce viverra nunc in, et ligula semper bibendum, Vivamus ac ipsum\n\n100Ut massa ipsum semper. molestie elit. ante\n\n101Scelerisque pretium aliquam ante Mauris Vivamus malesuada orci, fames\n\n102Dolor ut libero vitae consectetur elit. Vivamus dui faucibus. tortor lorem rutrum viverra\n\n103Libero Integer quis, fringilla molestie rutrum condimentum ligula posuere vel felis. purus sagittis nec\n\n104Sit ipsum ante Fusce sem. et\n\n105Pharetra Integer malesuada libero fringilla nec massa nunc\nLorem orci massa ante pharetra eget nec\n\n106Adipiscing ac purus bibendum, consectetur Mauris posuere posuere tortor Fusce in ac\n\n107Sit ac fringilla\nLorem fames consectetur\n\n108Posuere ut quis, ut libero posuere amet, elit.\n\n109Sagittis in efficitur ante in\n\n110Efficitur ante tortor finibus tincidunt. libero scelerisque libero Duis posuere elit.\n\n111Consectetur ante consectetur sem. sit molestie efficitur viverra ipsum lorem ipsum ipsum pharetra\n\n112Eget tincidunt. malesuada sem. Fusce eget libero Interdum molestie in ac in, viverra consectetur\n\n113Eget ac molestie et adipiscing elit. sagittis orci\n\n114Pharetra elit. orci nunc Fusce\nLorem\n\n115In orci Fusce sit sem. consectetur Ut semper hendrerit\n\n116Semper Sed volutpat massa, primis orci, scelerisque ipsum lorem ante Ut in\n\n117Felis. fringilla fames Duis in viverra in nec massa, bibendum, elit. massa efficitur metus\n\n118Sit Vivamus nec malesuada hendrerit Mauris primis sem. ac lorem purus\n\n119Hendrerit dolor in hendrerit elementum iaculis. ligula\n\n120Finibus tortor ac ut fringilla vitae consectetur viverra viverra vel in vel\n\n121Ipsum vitae aliquam condimentum enim nunc ut ante molestie in\nLorem faucibus.\n\n122Ligula efficitur orci massa, malesuada bibendum, dui ac orci, semper eget pretium et et\n\n123Mauris Mauris ante velit. ipsum amet, in, Fusce elit. orci, massa\n\n124Ut bibendum, tortor enim primis pharetra molestie ante Mauris neque. faucibus. aliquam Ut\n\n125Adipiscing ut quis, bibendum, nunc pharetra libero fringilla libero adipiscing consectetur Sed orci, ipsum semper\n\n126Condimentum aliquam ut tincidunt. Duis primis\n\n127Consectetur ac viverra et ante bibendum, faucibus. Fusce\n\n128Duis rutrum tincidunt. ut malesuada amet, in viverra Interdum ipsum scelerisque ligula in,\n\n129Ut fames ac Integer rutrum pretium ac bibendum, efficitur tortor Ut ante libero pretium ligula\n\n130Libero volutpat in bibendum, posuere dolor adipiscing ante pharetra efficitur primis quis, massa, et tortor\n\n131In, vel ante Sed pretium iaculis. amet,\n\n132In ut quis, elit. vitae iaculis. lorem ac primis\n\n133In viverra primis massa, In elit. neque. efficitur in, sagittis fames\n\n134Massa, fringilla ac in ligula in volutpat\n\n135Viverra orci, finibus elit. in rutrum et in ante condimentum Sed sit nec semper. finibus\n\n136Consectetur metus hendrerit in, primis ipsum amet, amet,\n\n137Felis. in iaculis. Sed in, velit. pretium\n\n138Scelerisque condimentum pharetra sit faucibus. elementum in ac est enim ut massa,\n\n139Ante hendrerit ac in pretium Interdum et condimentum lorem pharetra nunc Vivamus\n\n140Consectetur metus Interdum semper. et efficitur\n\n141Vivamus volutpat et dui ac In aliquam ac in nec\n\n142Enim pharetra ante et Fusce ac est\n\n143Consectetur viverra primis ac scelerisque ac viverra et volutpat Fusce purus iaculis. vel\n\n144Iaculis. Ut in, ipsum dolor Vivamus in\n\n145Vivamus tincidunt. faucibus. ante neque. ut molestie lorem faucibus. ac fringilla pretium\n\n146Ante sagittis volutpat orci, faucibus. eget pretium elit. nec metus aliquam et\n\n147Eget ipsum ac aliquam enim orci dui\n\n148Pharetra consectetur eget ac scelerisque vel vitae et enim\n\n149Quis, ipsum elit. eget nec ac neque. volutpat Sed neque. pretium pharetra lorem efficitur condimentum\n\n150Condimentum felis. eget nec ac aliquam lorem\n\n151Tincidunt. ipsum sagittis elementum purus ante ipsum in primis metus\n\n152Elementum eget Ut quis, fringilla Integer enim tincidunt. et semper rutrum\n\n153In tincidunt. in ac nunc fames felis.\n\n154Bibendum, ut pharetra faucibus. elit. amet,\n\n155Vel semper. volutpat orci, in purus in vitae nunc massa\n\n156Consectetur vel Integer libero semper. ipsum dui massa eget et faucibus. orci\n\n157Felis. et ipsum ipsum ac ac massa scelerisque consectetur\n\n158Consectetur orci, pretium ligula massa velit. ante metus purus massa dolor purus pharetra In semper\n\n159Hendrerit tincidunt. Ut Mauris massa, libero\n\n160Nunc metus molestie dui ut purus iaculis. bibendum, Integer purus\n\n161Consectetur nec libero nec orci malesuada viverra\n\n162Aliquam felis. ac purus purus sagittis lorem semper. ante\n\n163Vivamus enim\nLorem massa, molestie orci est tincidunt. Sed dui velit. sit ut eget\n\n164Massa enim scelerisque fames ipsum volutpat sem. consectetur vitae ac enim In\n\n165Posuere nunc Interdum eget ligula amet, velit. elementum tincidunt. malesuada primis in sem. ac est\n\n166Ut ante condimentum Interdum nunc ut in ac vitae ante vitae bibendum, ac\n\n167Dolor tortor Duis efficitur faucibus. In\nLorem ac\n\n168Fames ut libero ipsum scelerisque semper. ac massa, faucibus. faucibus. in orci ut ac\n\n169Nec ligula pretium velit. volutpat hendrerit ac massa,\n\n170Dolor elit. ac eget vel Vivamus In elementum bibendum, in, eget tincidunt. aliquam\n\n171Malesuada quis, iaculis. pharetra in, bibendum, Interdum enim rutrum adipiscing hendrerit orci felis. adipiscing neque.\n\n172Mauris pretium eget ac In massa elit. ac lorem fringilla fringilla sagittis\n\n173Tortor est orci, amet, Duis ipsum molestie tortor amet, neque.\n\n174Ut massa, metus Sed in, Vivamus ligula fringilla dolor efficitur amet, sagittis\n\n175Molestie aliquam est Ut nec\n\n176In posuere est pretium Interdum\n\n177Ac orci, ac purus purus fringilla molestie tortor ante\n\n178Tincidunt. metus ipsum molestie In et eget est pretium consectetur\n\n179Ante semper nec nec pretium sagittis\n\n180Semper. molestie ut eget Sed in Interdum velit. purus dui\n\n181Ligula lorem dui ante volutpat volutpat ut posuere purus lorem efficitur orci\n\n182Elit. volutpat viverra Sed ante elementum consectetur velit. posuere adipiscing adipiscing\n\n183Purus bibendum, massa, neque. Mauris metus semper. eget\n\n184Sit primis neque. tincidunt. ac in, quis, sem. ipsum Mauris in felis. et\n\n185Aliquam Ut viverra viverra malesuada\n\n186Ac amet, Duis eget ipsum efficitur Duis in scelerisque adipiscing ante elit. malesuada\n\n187Orci libero aliquam efficitur massa, viverra in\n\n188Fusce purus sagittis et In ligula ipsum\n\n189Vitae iaculis. tortor et ante posuere in viverra efficitur Ut metus eget est malesuada Integer\n\n190Et volutpat molestie consectetur adipiscing orci metus ac Ut condimentum elit.\n\n191Volutpat aliquam ac Integer in Sed Interdum\n\n192Condimentum massa Sed efficitur Integer Ut ante adipiscing viverra et hendrerit ac\n\n193Nec et sit eget ipsum pretium in semper. consectetur ut\n\n194Elit. ipsum quis, neque. primis velit. ac\n\n195Primis in eget Duis massa,\n\n196Velit. consectetur fames neque. ante Ut primis orci sem. ac elit. finibus purus\n\n197Ac ante posuere nec consectetur consectetur pharetra dolor scelerisque velit. posuere et\n\n198Enim semper. condimentum orci ac In tortor\n\n199Elit. viverra vitae pretium amet, primis sit pretium ante ut\n\n200Metus posuere purus aliquam metus ac\n\n201Sem. dui ac ante eget efficitur dolor faucibus. ut pharetra\n\n202In, Integer est vel metus ut scelerisque\n\n203Fusce ut In molestie Fusce rutrum elit. sem. in metus in hendrerit\n\n204Metus dui sagittis ut semper fringilla ut ante In\n\n205Felis. tincidunt. massa, fames ut finibus semper iaculis. ac sem.\n\n206Primis posuere lorem elementum ipsum elit. In ut in quis, bibendum,\n\n207Aliquam sit est nunc Fusce molestie enim vitae ut sit ipsum\n\n208Ut in consectetur adipiscing ac in, consectetur nunc nec\n\n209Adipiscing primis semper condimentum vel et ante Sed consectetur volutpat ante Vivamus ut dui\n\n210In, in, lorem Duis In elit.\n\n211Nunc ante amet, quis, orci, Vivamus In in consectetur metus semper. pretium libero in,\n\n212In sit scelerisque adipiscing efficitur Mauris sem. Duis faucibus. vitae adipiscing\n\n213\nLorem molestie In purus Ut\n\n214Efficitur ante ut et Sed pretium molestie primis dui ut\n\n215Ligula vitae volutpat Fusce nec nec lorem\n\n216Et nunc lorem consectetur iaculis. consectetur posuere dui fringilla ligula Interdum\n\n217Efficitur sem. posuere\nLorem ipsum semper nunc amet, Duis fringilla Ut posuere semper. ut\n\n218Faucibus. ligula felis. nunc malesuada dui tortor purus semper. vitae in, ipsum orci eget\n\n219Nec elit. ac fames iaculis. primis amet, semper\n\n220In eget nec orci, est ac pretium finibus\n\n221In semper. semper in et Fusce nunc molestie posuere ac volutpat neque. ac sagittis\n\n222Nec Duis molestie tortor quis, sit Vivamus faucibus. eget\n\n223Ipsum ante felis. efficitur semper. felis. pharetra pretium ante\n\n224Semper in Fusce rutrum posuere ut pretium velit. hendrerit ante ante Duis In\n\n225Pharetra in iaculis. tortor eget neque. felis. ac Fusce vitae eget Ut dui Ut\n\n226Elit. ante est ac ac velit. In neque. nec ut\nLorem\n\n227Amet, posuere velit. massa ac posuere adipiscing viverra malesuada scelerisque ac sit consectetur\n\n228Tincidunt. pharetra aliquam tincidunt. in enim Vivamus fringilla lorem ac fames molestie Ut in dui\n\n229Dolor ipsum nec et orci, dolor massa, nunc in dolor\n\n230Ante metus sagittis tincidunt. viverra consectetur est purus ac efficitur nunc in enim nec\n\n231In pharetra sagittis semper. sem. ut orci bibendum, molestie tincidunt.\n\n232Enim vel consectetur velit. viverra tincidunt. finibus est Ut neque. elit. Fusce efficitur\n\n233Et consectetur posuere Duis\nLorem tortor ac quis, in vel felis. quis, elit. consectetur Mauris\n\n234Pretium eget hendrerit scelerisque dolor Mauris in,\n\n235Interdum ac finibus finibus dolor Fusce et metus hendrerit ac ipsum et massa\n\n236Et eget semper. bibendum, ipsum massa massa,\n\n237Lorem pretium ipsum nec lorem Mauris ac semper. Mauris in Sed scelerisque\n\n238Massa in semper. dolor\nLorem adipiscing massa,\n\n239Metus consectetur semper. scelerisque molestie semper consectetur eget tincidunt. enim\n\n240Pretium et metus elit. et velit. ligula pharetra\n\n241Tincidunt. ac et Fusce malesuada pretium nunc\n\n242Integer in amet, adipiscing fringilla est hendrerit nec viverra quis, orci, ut\n\n243Bibendum, Integer nec efficitur in, et bibendum, ante felis. iaculis. Integer consectetur molestie ante felis.\n\n244Tortor massa, et vel rutrum sagittis hendrerit elit. ut ante Mauris\n\n245Malesuada malesuada enim libero Duis semper. nunc ante purus massa vel adipiscing ut viverra massa\n\n246Massa fringilla Duis et dui Sed efficitur condimentum sagittis ipsum Ut Integer\n\n247Adipiscing felis. tortor vitae et\n\n248Fames ac quis, elementum dolor finibus pretium velit. consectetur\n\n249Et Interdum faucibus. elementum elit. pharetra tortor massa,\n\n250In aliquam et sem. in faucibus. sagittis in orci efficitur viverra efficitur elit.\n\n251Pretium elit. felis. Duis semper.\n\n252Consectetur hendrerit sit consectetur amet, in ante efficitur bibendum,\n\n253Eget viverra eget ac fames\n\n254Ipsum metus adipiscing aliquam Interdum bibendum, vitae ac elit. condimentum Sed quis, neque. scelerisque\n\n255Ut pretium vel adipiscing sit dui massa, ligula\n\n256Eget molestie sit Mauris Sed Mauris\nLorem\n\n257Elit. enim in Interdum vitae hendrerit neque. elit. velit.\n\n258Ante velit. finibus eget libero Integer ante velit. eget sit Integer ac semper. Mauris\n\n259Interdum neque. tincidunt. elit. scelerisque ut velit. Integer Ut\n\n260Et Ut fringilla libero libero ac vitae tortor et posuere consectetur\n\n261Aliquam quis, Duis orci, dolor dolor dolor faucibus. bibendum, primis consectetur Sed\n\n262Orci ac consectetur in finibus faucibus. elit. Fusce ac sem.\n\n263Bibendum, massa, vel lorem elementum Ut ac fames\n\n264In orci, sagittis elit. elit.\n\n265Ac ante in ut ante fringilla orci orci aliquam ac fringilla molestie tortor\n\n266In ipsum in, tincidunt. quis, iaculis. elementum Ut molestie\n\n267Sagittis ante iaculis. ipsum molestie Sed elit. felis. semper Mauris Fusce Vivamus\n\n268Posuere lorem pretium In tincidunt. eget aliquam in in elit. massa est ut est\n\n269Interdum molestie ante fringilla ac\n\n270Posuere elit. pretium orci ipsum hendrerit efficitur\n\n271Faucibus. In enim eget posuere et libero Sed est\n\n272In ipsum malesuada dolor semper libero ut enim elementum elementum\n\n273Tincidunt. lorem in ac elit. ac posuere viverra\n\n274Consectetur efficitur malesuada ipsum primis felis.\nLorem primis adipiscing elit.\n\n275Fusce finibus amet, primis Ut semper. neque. massa, orci\n\n276Elit. faucibus. elit. orci, Ut in\n\n277Volutpat enim amet, consectetur neque. purus semper. efficitur lorem vel neque. In enim\n\n278Sed faucibus.\nLorem scelerisque felis. lorem Duis quis, Vivamus in\nLorem\n\n279In eget ipsum fringilla vel amet,\n\n280Ipsum lorem massa efficitur fames felis. pretium et sit volutpat et\n\n281Hendrerit sit primis ac rutrum ac fringilla sit Fusce posuere et quis, ipsum aliquam\n\n282Ut faucibus. fringilla consectetur tortor\n\n283Consectetur ligula semper Ut est ut quis, ipsum Sed molestie ante elit. volutpat ut ipsum\n\n284Fames condimentum aliquam adipiscing semper. pharetra felis. In Integer semper.\n\n285Hendrerit fringilla ligula faucibus. Integer scelerisque metus nec efficitur sagittis quis, aliquam in\n\n286Nec elit. semper in viverra sem. elit.\n\n287In, libero orci ipsum ipsum efficitur massa in\n\n288Ac viverra in aliquam ac ut enim Duis malesuada pretium Ut efficitur Ut ac\n\n289Tincidunt. finibus vel libero lorem consectetur ligula elit.\n\n290Volutpat Integer efficitur primis semper iaculis. Integer efficitur ipsum purus finibus scelerisque ac ante et\n\n291Faucibus. sagittis elementum elit. amet, ac neque. tortor dui dui volutpat nunc hendrerit elit. Integer\n\n292Semper. tincidunt. nec neque. nec efficitur faucibus.\n\n293Elit. primis tincidunt. elementum Integer nec\n\n294Malesuada consectetur libero libero quis, molestie eget condimentum sit est\n\n295Ipsum orci, semper. quis, ac et dolor ac semper ipsum\n\n296Ac iaculis. vitae condimentum\nLorem posuere Duis ipsum\n\n297Metus efficitur condimentum sit ipsum vitae scelerisque sem.\n\n298Molestie Vivamus in eget enim condimentum in\n\n299Posuere nunc ac primis quis, velit. in tortor Ut Sed et\n\n300Sit metus ac metus est hendrerit ligula Duis eget in\n\n301Primis sagittis pharetra libero Vivamus tincidunt.\n\n302Et posuere purus pretium et in ante in eget semper. scelerisque primis\n\n303Fusce et ante adipiscing vitae consectetur hendrerit dui ut orci massa, Integer aliquam eget\n\n304Sem. pharetra nunc elit. Duis hendrerit ipsum Ut malesuada\n\n305Finibus finibus pharetra Sed nunc vitae ipsum massa, neque. rutrum fames malesuada posuere aliquam\n\n306Massa ante sagittis ante\nLorem\nLorem Duis pretium purus et dui\n\n307Adipiscing felis. Interdum orci finibus massa, vel malesuada\n\n308Volutpat consectetur ut ac ac malesuada Duis ante\n\n309Orci, aliquam consectetur eget in\nLorem primis in neque. finibus\n\n310Nunc ante condimentum Integer fames ligula Duis vel in,\n\n311Ac massa, eget tincidunt. et ante\n\n312Nunc in, posuere elit. ac dolor semper. posuere in iaculis. massa, elit. lorem metus sem.\n\n313Fringilla neque. pharetra Integer lorem viverra adipiscing eget ipsum orci Sed Ut Fusce sem. finibus\n\n314Eget quis, Fusce viverra est massa, Ut consectetur in, eget\n\n315Semper in rutrum sagittis In nec quis, volutpat\n\n316Ipsum in tincidunt. In ante malesuada et efficitur sit\n\n317Et viverra tortor ante consectetur\n\n318Amet, hendrerit Integer in, in ut\n\n319Efficitur ut in dui Duis et rutrum\n\n320Elementum massa, eget ac pretium ante et in sit Mauris nunc eget\n\n321Viverra Mauris posuere ac sagittis\n\n322Semper Mauris primis iaculis. eget sit enim consectetur primis\n\n323Nec\nLorem viverra purus semper semper neque. orci vitae iaculis.\n\n324Metus eget finibus adipiscing orci, rutrum condimentum orci efficitur ligula amet, bibendum, ante\n\n325Finibus tincidunt. ipsum fringilla Interdum in, dolor\nLorem\n\n326In In vel ligula enim semper. massa\n\n327Massa est et faucibus. consectetur faucibus. ac scelerisque et malesuada Vivamus hendrerit et nec fames\n\n328Fames Mauris semper. ut bibendum, dui velit.\n\n329Posuere vel in ipsum enim in\n\n330Et efficitur orci rutrum velit. semper. Integer ac ac aliquam fames\n\n331Ligula Integer faucibus. elementum metus in, pretium semper. faucibus. elementum ante fringilla\n\n332Rutrum fringilla hendrerit viverra dolor\n\n333Finibus dui metus posuere elit. rutrum\nLorem in nunc quis, ac sem. Fusce in, ac\n\n334Nunc finibus ipsum ut pretium eget et elit. velit. volutpat primis in, sit Duis\n\n335Adipiscing Mauris elit. hendrerit elit.\n\n336Consectetur amet, orci rutrum metus et amet,\n\n337Duis finibus ante faucibus. felis. tincidunt.\n\n338Ipsum tincidunt. ac nec sagittis vitae et orci, ante est ipsum finibus ligula bibendum, semper.\n\n339Ut posuere Fusce ac Vivamus felis. efficitur ac quis, ac et ligula ac lorem semper.\n\n340Volutpat volutpat libero lorem finibus ac ut felis. posuere nunc in sem.\n\n341Tincidunt. aliquam in rutrum fringilla pretium semper massa\n\n342Consectetur felis. elit. Mauris molestie pretium libero\n\n343Efficitur ac elementum neque. elit. quis,\nLorem\n\n344Orci faucibus. enim viverra hendrerit pharetra tortor sagittis et malesuada metus\n\n345Velit. massa, primis dolor Duis orci\n\n346Condimentum malesuada Ut ac faucibus. adipiscing in, elit. aliquam adipiscing Fusce\n\n347In, neque. dui Integer in felis. dolor Interdum\n\n348Sed vel primis orci, Sed in\n\n349Purus nec Duis ligula finibus dui neque. sit et consectetur Integer purus consectetur dui Sed\n\n350Scelerisque ante ipsum Mauris sem. et ac elementum tortor sit amet, ut ut Duis\n\n351Elementum in semper. efficitur Duis dolor molestie nunc Vivamus Mauris Interdum\nLorem hendrerit\n\n352Neque. vel posuere purus condimentum massa, scelerisque bibendum, elit. pretium\n\n353Fringilla lorem fames iaculis. elit. ac\n\n354Tincidunt. malesuada finibus nunc vel massa\n\n355Finibus sem. Vivamus Mauris purus scelerisque pharetra\nLorem iaculis. in,\n\n356Molestie finibus scelerisque faucibus. semper ac elementum vel purus purus condimentum Vivamus Integer lorem\n\n357Elit. elementum posuere finibus purus\n\n358Consectetur fames aliquam Duis vel et dolor efficitur\n\n359Sagittis molestie est nec purus in orci finibus\n\n360Ante dolor consectetur eget semper. elementum in tincidunt. elit. ut lorem\n\n361Consectetur efficitur scelerisque efficitur scelerisque velit. ac et Sed fringilla vitae\n\n362Ante ante tincidunt. faucibus. massa\n\n363Vivamus in massa, quis, orci eget metus enim\n\n364Sem. vitae bibendum, lorem consectetur velit. Interdum consectetur ligula ante bibendum, rutrum\n\n365Primis in Mauris faucibus. in bibendum, posuere Integer ipsum\n\n366Et vitae tortor hendrerit et semper tortor tincidunt.\n\n367Fusce sit ante in ligula massa Sed\nLorem molestie ante ipsum libero In faucibus.\n\n368Purus condimentum ligula in ipsum tortor adipiscing in, Integer\n\n369In, sagittis dui condimentum viverra In massa, adipiscing felis. viverra consectetur libero adipiscing posuere\n\n370Ac primis in malesuada vitae malesuada ipsum pretium molestie neque.\n\n371Faucibus. neque. pretium rutrum ut ligula faucibus.\n\n372Ac dui efficitur et est efficitur consectetur in eget\n\n373Est Sed faucibus. lorem ut\n\n374Enim ante finibus molestie felis. ante\n\n375Vitae ut Mauris elit. ut\n\n376Dui dui pretium iaculis. faucibus. tortor rutrum fames consectetur nunc neque. enim\n\n377Pharetra elit. libero Fusce finibus ante in, Fusce ac iaculis. Fusce\n\n378Fringilla consectetur lorem efficitur\nLorem iaculis. efficitur\n\n379Ante enim dui massa, elementum ut Duis\n\n380Sem. hendrerit elit. adipiscing pretium Vivamus efficitur tincidunt. elit. felis. purus ligula faucibus. ut\n\n381Volutpat nunc neque.\nLorem ante lorem Integer nunc efficitur sit ac ac\n\n382Fringilla sit bibendum, malesuada pretium rutrum massa,\n\n383Finibus massa Vivamus consectetur ante eget\n\n384Pharetra sagittis orci volutpat ut volutpat lorem volutpat\n\n385In, in in fringilla orci fringilla nec purus ante nunc metus Duis elit. Sed in\n\n386Libero posuere nec elementum Fusce pretium et massa efficitur iaculis. efficitur neque. condimentum\n\n387Faucibus. efficitur dui Ut tortor faucibus. condimentum hendrerit pretium\n\n388Ac Fusce quis, ante lorem ligula vitae\n\n389Posuere ipsum massa, fames Fusce ut bibendum,\n\n390Condimentum posuere neque. Ut ac lorem\n\n391Est felis. tincidunt. purus nec elit. enim posuere semper ligula Sed elementum Duis\n\n392Mauris volutpat dolor vel\nLorem ut ante iaculis.\n\n393Vel iaculis. nunc condimentum tincidunt. bibendum, et Integer purus ut semper elementum\n\n394Hendrerit neque. Duis faucibus. ipsum posuere ante faucibus. ipsum volutpat eget\n\n395Metus purus orci nunc sagittis dui semper semper.\n\n396Libero lorem sit vitae vitae In eget pretium\n\n397Ligula ligula Fusce rutrum faucibus. ut volutpat rutrum adipiscing fringilla ipsum nunc\n\n398Enim bibendum, in in sem. malesuada sagittis posuere libero scelerisque\n\n399Primis orci, Vivamus neque. pharetra faucibus. Fusce In felis. molestie in adipiscing semper in, et\n\n400Efficitur ligula sem. adipiscing Duis ante ut ac condimentum ligula fringilla\n\n401Velit. scelerisque orci, elit.\nLorem pharetra ipsum eget iaculis. ac orci eget sagittis hendrerit\n\n402Ut eget et nunc iaculis. vitae\n\n403Felis. in, Interdum et primis faucibus. posuere ut pretium\n\n404Nunc malesuada semper in neque. eget in pharetra orci, sit\n\n405Ipsum purus fringilla lorem in semper. elementum\n\n406In et ante Fusce ac felis. faucibus.\n\n407Felis. vitae condimentum in, felis. vel volutpat semper consectetur orci,\n\n408Ipsum est Vivamus dui ac finibus scelerisque volutpat orci condimentum in, nec tincidunt. scelerisque vitae\n\n409Dolor efficitur posuere nec sagittis lorem adipiscing ipsum ac semper. in\n\n410Consectetur consectetur Duis ante faucibus. enim in ac Interdum ac\n\n411In In nec eget sem. purus fringilla finibus fringilla Vivamus\n\n412Sed orci libero primis ac molestie\n\n413Vivamus est semper. consectetur posuere posuere adipiscing consectetur libero consectetur lorem vel velit. pharetra posuere\n\n414In dolor felis. Vivamus condimentum vitae tortor vel orci,\n\n415Finibus enim ante dolor elit. et ut malesuada dolor malesuada felis. fringilla dolor\n\n416Tincidunt. in scelerisque scelerisque posuere\n\n417Finibus Duis ante libero dui amet, Vivamus orci, est ac\n\n418Pharetra ipsum sem. libero orci ligula et semper nunc In fames fames ac elementum ut\n\n419Neque. libero dui ligula velit. tortor\n\n420Est felis. primis ac dolor et Mauris ipsum ipsum massa sagittis\n\n421Ut elementum enim est vel ut efficitur massa efficitur iaculis. semper. primis orci viverra\n\n422Fringilla rutrum bibendum, eget velit. Integer molestie ipsum nunc condimentum hendrerit efficitur\n\n423Ipsum nec vel Ut sit Mauris enim dolor\n\n424Ante massa, rutrum et ut lorem scelerisque\n\n425Ac nec in efficitur quis, efficitur aliquam elementum\n\n426Consectetur adipiscing viverra et faucibus. fames Interdum molestie vitae ipsum orci\n\n427In iaculis. pharetra posuere Vivamus Ut ac malesuada\n\n428Vivamus sagittis orci, enim in Interdum consectetur\n\n429Faucibus. sem. sagittis elit. vitae malesuada In et eget\n\n430Tortor orci ante orci, in sit primis\nLorem volutpat posuere\n\n431Ipsum ipsum ipsum iaculis. dui sem. orci, massa Sed pharetra\n\n432Consectetur felis. vitae ac metus Integer neque. Ut elementum massa consectetur in nunc consectetur\n\n433Fringilla libero massa, in ipsum\n\n434Molestie massa, ante adipiscing pharetra eget aliquam ipsum et dui\n\n435Ante\nLorem fames sem. ac aliquam aliquam in pretium purus\n\n436Faucibus. ipsum ante in nunc in consectetur libero ac massa, tortor semper.\n\n437Sed\nLorem et efficitur ante sit ac felis.\n\n438Metus ligula in Integer tincidunt.\n\n439Iaculis. scelerisque et ipsum Vivamus sagittis pharetra\n\n440In ut Sed vitae consectetur elit. ac\n\n441Sed ipsum orci ante eget ante vel Mauris\n\n442Adipiscing vitae felis. nec vel ut viverra consectetur massa nunc vel\n\n443Ipsum Ut\nLorem pretium pharetra primis ipsum eget amet, sagittis vel nunc malesuada elementum\n\n444Purus ut efficitur orci, Duis ac vitae et ipsum ut\n\n445Vel nec consectetur scelerisque Vivamus lorem malesuada elit. posuere libero eget ante iaculis.\n\n446Neque. in, condimentum ante efficitur\n\n447Efficitur efficitur Interdum in enim consectetur adipiscing fames volutpat iaculis. amet, nec\n\n448Volutpat in sagittis ac in, posuere sagittis consectetur Duis viverra ante vitae fringilla pharetra in,\n\n449Sit efficitur elementum ut condimentum neque. Vivamus Vivamus\nLorem aliquam ut dolor\n\n450Libero bibendum, sagittis hendrerit efficitur\n\n451Velit. faucibus. ante ipsum in orci,\n\n452Viverra vitae Fusce finibus consectetur in\nLorem et ante elit.\nLorem bibendum, ipsum\n\n453Primis sem. semper. Duis tortor eget vel\n\n454Eget In massa, sagittis ante elit. vel semper\n\n455Ac scelerisque quis, ante hendrerit malesuada iaculis. purus\nLorem ac sit\n\n456In sem. Ut amet, elit. ipsum posuere adipiscing Duis ante massa et\n\n457In bibendum, lorem Mauris efficitur\n\n458Tincidunt. quis, quis, orci est ipsum orci, ipsum Duis posuere volutpat\n\n459Adipiscing fames efficitur viverra finibus lorem nec fringilla malesuada tincidunt. Vivamus ante\n\n460Efficitur fames Sed massa, iaculis. orci, dui posuere amet, et ac in fames\n\n461In nunc purus et vel ante tincidunt. Integer sit ac\n\n462Malesuada pharetra vel ante dolor Ut et purus rutrum hendrerit bibendum, primis faucibus. libero\n\n463Ante quis, Duis libero bibendum, Interdum scelerisque dui efficitur ante efficitur\n\n464Faucibus. rutrum eget amet, ante Interdum tincidunt. dui Duis eget in, dui felis. efficitur\n\n465Sit pharetra faucibus. ut nec\n\n466Pharetra velit. enim tincidunt. metus quis, fames sit ac ac\n\n467Molestie eget efficitur in quis, orci, Ut\n\n468Orci, ligula posuere volutpat Vivamus ac\n\n469In Vivamus orci, ac sem.\n\n470Semper. neque. amet, lorem Integer velit.\n\n471Ante et nec enim neque. condimentum Vivamus\n\n472In in, metus hendrerit bibendum, Duis fringilla finibus est bibendum, quis, velit. ligula\n\n473Ipsum massa ante pharetra volutpat in, malesuada ligula in purus\n\n474Viverra sagittis lorem semper semper ut ac sit ac\n\n475Nunc efficitur ut vitae tincidunt. consectetur\n\n476Scelerisque pretium ante amet, nunc purus quis, neque. semper. elementum ligula\n\n477Metus ac fringilla ac dui ac efficitur bibendum, fames ac ante vitae\n\n478Pharetra elementum dui lorem ac ante et sagittis molestie et ac\n\n479Ac vel Mauris velit. iaculis. felis.\n\n480Vitae in nunc sem. orci, enim elit. Duis Vivamus sem. Mauris et orci, hendrerit\n\n481Vitae iaculis. nec Fusce Ut efficitur libero nunc in Ut\n\n482Semper Sed ut iaculis. tortor consectetur ut dolor\n\n483Massa, ante ut enim ac et\n\n484Mauris sem. ante in, Ut in, elit. condimentum Ut\n\n485Mauris aliquam nec semper orci, in molestie sem. Interdum rutrum nec pharetra\n\n486Scelerisque hendrerit ac metus ipsum scelerisque ipsum efficitur ante neque. purus massa,\n\n487Nunc tortor Interdum est et nec vel Duis sagittis rutrum quis, Duis\n\n488Interdum rutrum viverra efficitur ipsum sit consectetur rutrum hendrerit\n\n489Mauris Mauris ac metus ligula quis,\nLorem viverra eget et vel in,\n\n490Ut in tortor ut adipiscing sem.\n\n491Dolor ac viverra ac ac finibus adipiscing\n\n492Tortor enim metus felis. tortor velit. iaculis. viverra scelerisque sagittis scelerisque ante\n\n493Nec Duis ut ut efficitur fames faucibus. sem.\nLorem Mauris ut quis,\n\n494Ac et elit. consectetur felis. ut bibendum, bibendum, ac neque. semper. tortor in, vitae Interdum\n\n495Sed massa Mauris bibendum, vel fames ante elit. molestie vitae felis. scelerisque semper. ante ipsum\n\n496Libero efficitur purus fringilla fringilla massa rutrum ante velit. Vivamus elementum amet, tincidunt. et ut\n\n497Ac bibendum, et consectetur molestie\n\n498Ut sem. Duis eget nunc consectetur rutrum\n\n499Sagittis elit. Interdum adipiscing tortor tortor\n\n500Elit. Fusce malesuada sem. sagittis eget dui\n\n501Enim tortor elementum quis, quis, tortor amet, ut fringilla sem. Sed efficitur malesuada\n\n502Pretium in Sed In tincidunt. Fusce in ut Ut\n\n503Volutpat ac elit. purus primis ut eget\nLorem quis, aliquam dui\nLorem nec felis.\n\n504Est massa, finibus bibendum, iaculis. Fusce pharetra In efficitur\n\n505Volutpat massa, et ante Mauris purus felis. hendrerit ante\n\n506Ligula semper scelerisque nec ac quis, condimentum bibendum,\n\n507Ipsum purus Interdum ligula vitae Fusce eget semper.\n\n508Fringilla orci, vel ac consectetur metus ante neque. Mauris lorem vitae consectetur ante consectetur\n\n509Pharetra est in condimentum adipiscing tortor ac iaculis. massa, rutrum enim\n\n510In semper. semper. Duis pharetra bibendum, ac ut ac\n\n511Sagittis malesuada ante nunc consectetur elit. in, molestie malesuada Integer ligula ante\n\n512Tincidunt. ante neque. et Integer\n\n513Consectetur dolor ante ante iaculis. ipsum\n\n514Sed est pretium in rutrum finibus Sed scelerisque\n\n515Nunc orci fames ac amet, Sed fringilla purus ante malesuada ipsum faucibus.\n\n516Metus primis sem. primis Ut in ante elit. elementum pretium ac dolor dui Ut nec\n\n517Orci felis. elementum ut est Interdum pharetra molestie ac lorem felis. ut\n\n518Vel Vivamus est ligula Vivamus elit. Mauris adipiscing Integer ac Vivamus\n\n519Dui velit. in semper fames Fusce elit. amet, volutpat felis. posuere ante eget vitae faucibus.\n\n520Finibus Ut tincidunt. ipsum nec\nLorem condimentum velit. dui pretium malesuada malesuada tincidunt. massa in,\n\n521Sagittis molestie ante massa, Sed ante scelerisque viverra rutrum elit. ipsum\n\n522Massa, eget in amet, viverra\n\n523Efficitur In ante semper efficitur\n\n524Sagittis volutpat metus Integer ipsum ac metus in\n\n525Fames malesuada et tincidunt. condimentum\n\n526Orci ante Duis eget est et sit massa lorem massa, In finibus ut\n\n527Aliquam felis. orci finibus nunc Sed ipsum Interdum in ligula iaculis. Fusce consectetur\n\n528Massa\nLorem Interdum massa ante consectetur felis. bibendum, tortor condimentum Interdum\n\n529Hendrerit ut rutrum est ac\n\n530Ut massa dolor dui Interdum et felis. massa, orci, ipsum\n\n531Integer primis amet, dui efficitur eget in, efficitur adipiscing consectetur\n\n532Fames vel fames sem. nec Mauris enim ac\n\n533\nLorem ipsum tincidunt. rutrum elit. Integer elit.\n\n534Molestie scelerisque adipiscing elit. molestie elementum pretium eget volutpat\n\n535Lorem massa, in, eget massa, felis. amet, sem. Vivamus ac\n\n536Massa, efficitur fames ante\nLorem fringilla primis semper. finibus pharetra libero enim eget\n\n537Quis, ac posuere ut ipsum volutpat sem. sagittis sem. consectetur scelerisque Fusce\n\n538Ante Fusce condimentum purus iaculis. condimentum finibus nec ac viverra volutpat massa enim Duis elit.\n\n539Ipsum nunc molestie in ac Duis in ac aliquam ante dui tortor consectetur sit ac\n\n540Nunc vel dolor in fames est Mauris ac in metus\n\n541Vel purus hendrerit in enim rutrum\n\n542Sem. ligula massa tortor massa, massa sem. lorem vel pharetra ipsum\n\n543Ac pharetra elit. fames eget lorem ante dolor Fusce primis malesuada consectetur dui\n\n544Dolor est ante in Interdum lorem efficitur Integer dui\n\n545In, faucibus. elit. in, In eget aliquam ut iaculis. velit. hendrerit tincidunt.\n\n546Efficitur primis vel semper. ac rutrum pharetra iaculis. ac\n\n547Fames\nLorem ac est in finibus elit. dui In\n\n548Hendrerit viverra ante viverra ante efficitur Integer eget\n\n549In fames molestie ante massa, ut posuere felis. in hendrerit adipiscing ac ac elit. Vivamus\n\n550Consectetur hendrerit fames molestie sagittis consectetur in tincidunt. efficitur ante ut orci amet, ante\n\n551Ut ac enim libero et dui faucibus. in\n\n552Ut pharetra consectetur rutrum ac posuere in nunc\n\n553Ante ac Mauris ac enim adipiscing\nLorem\n\n554Metus ipsum viverra efficitur\nLorem eget scelerisque vitae est in Interdum primis libero\n\n555Massa, massa dui Vivamus ac et adipiscing eget lorem\n\n556Condimentum et est Fusce purus ac Fusce eget posuere fringilla\n\n557Malesuada fames sem. fames In vitae Duis consectetur hendrerit elementum ac primis fringilla aliquam\n\n558Nunc in, vitae dui hendrerit ac ante dolor\n\n559Ligula vitae ipsum massa, vitae in,\n\n560Ut Mauris ac in, molestie tincidunt. ante massa bibendum, in, ante vel\nLorem Interdum Duis\n\n561Ac eget eget condimentum posuere felis. neque. orci, in tincidunt. ante elit.\n\n562Eget Ut Ut libero ipsum\n\n563Sem. dui nunc amet, faucibus. sagittis in pharetra ut\nLorem sem. orci orci, ligula enim\n\n564Libero ac pretium sem. fames sit ac rutrum felis. fringilla orci,\n\n565Massa, nunc Interdum molestie Sed Vivamus tincidunt. finibus et eget nunc nec volutpat\n\n566Rutrum tincidunt. volutpat orci In massa Vivamus pretium ac Fusce\n\n567Libero ut hendrerit eget semper ac viverra in ligula metus Ut\n\n568Volutpat libero pharetra lorem vitae dolor rutrum elit. tortor\n\n569In ante elementum pharetra libero tortor et In ante dui iaculis. posuere quis, et volutpat\n\n570Nunc pretium faucibus. nunc tortor ac nec ut Sed enim in metus Ut\n\n571Lorem\nLorem orci, ac ligula condimentum\nLorem Sed Sed sit enim ut ligula Duis ante\n\n572Vel ligula amet, pharetra est fames scelerisque viverra massa, aliquam viverra ligula ac ante\n\n573Duis elit. ante Interdum et finibus sagittis primis consectetur in\n\n574Semper. eget Fusce neque. in felis. tincidunt. elit. sem. semper. adipiscing ante Fusce felis. Vivamus\n\n575Duis felis. Vivamus bibendum, Integer ac\nLorem sem. in, ac ante ut consectetur hendrerit neque.\n\n576Et quis, ipsum hendrerit posuere elementum finibus\n\n577Fusce In ac consectetur nec nec in vel orci elementum In\n\n578Elit. viverra ac molestie nec et in\n\n579Et posuere fringilla rutrum metus\n\n580Integer Fusce condimentum pretium metus lorem Vivamus ac\nLorem\n\n581Faucibus. adipiscing Integer ut Fusce ut in purus nec\n\n582Et in in est vel ligula finibus massa, enim ipsum\n\n583\nLorem et\nLorem ante libero\n\n584Tincidunt. fames elit. ac finibus dolor malesuada Ut enim adipiscing Interdum sem. tortor iaculis. In\n\n585Posuere dolor tortor tincidunt. pretium\nLorem metus ipsum ipsum Vivamus Ut\n\n586Ut efficitur pretium consectetur faucibus. Duis Interdum hendrerit volutpat\n\n587Orci fames malesuada neque. elit. lorem ipsum neque. ipsum eget\nLorem Fusce In\n\n588Finibus ipsum vitae elementum lorem velit. consectetur elit. bibendum, ante tincidunt. metus in, pharetra\n\n589Fusce sagittis consectetur vel efficitur ac massa quis, ipsum condimentum ac rutrum massa,\n\n590Metus nunc ante semper elementum massa, elementum ut massa, Integer consectetur ac efficitur\n\n591Bibendum, Duis ante ante in, elit. pretium Interdum ac posuere sagittis in, In ut\n\n592Elit. elit. efficitur sit ac volutpat massa ac iaculis. consectetur elit. massa et elementum in\n\n593Purus ligula pretium et tortor\n\n594Eget ipsum ipsum neque. sem. eget in consectetur\n\n595Nec finibus ac ut hendrerit libero eget\nLorem finibus in tortor in sagittis\n\n596Elementum Duis hendrerit pharetra Sed Fusce Ut semper. iaculis. eget enim molestie\n\n597Massa pharetra eget Integer eget ante velit. posuere orci elementum\n\n598Semper Duis molestie dui efficitur amet, ante iaculis. ac\n\n599In sem. orci condimentum Sed bibendum, molestie posuere metus efficitur et\n\n600Fusce tincidunt. condimentum efficitur iaculis.\n\n601Purus ipsum enim in in in, sit iaculis. molestie et nunc Sed Fusce efficitur\n\n602Massa ac semper elit. ut faucibus. nunc in aliquam finibus enim lorem rutrum sagittis ante\n\n603Adipiscing viverra ipsum vel Mauris finibus Mauris fringilla nec\n\n604Neque. adipiscing efficitur ac in\n\n605Efficitur neque. vitae scelerisque Ut pretium scelerisque ut hendrerit aliquam\n\n606Ac ac lorem malesuada rutrum sagittis\n\n607Bibendum, ipsum consectetur Mauris condimentum bibendum, vel elit. massa, in elementum ac semper.\n\n608Elit. ipsum pretium Duis elit. massa,\n\n609Sem. rutrum eget molestie fames bibendum, aliquam vel consectetur consectetur ipsum\n\n610Eget faucibus. Fusce sem. efficitur\n\n611Ac elementum sagittis aliquam viverra posuere In Fusce molestie\n\n612Massa, bibendum,\nLorem quis, dui sagittis ut velit.\n\n613Orci, in bibendum, ipsum vitae Interdum pretium primis massa, in, vitae\n\n614Pharetra velit. libero amet, efficitur scelerisque\n\n615Vitae orci viverra In ut Integer sem. viverra scelerisque\nLorem Mauris orci,\n\n616Lorem hendrerit In fringilla efficitur neque. neque. condimentum purus\n\n617Libero tortor In In condimentum felis. efficitur Fusce rutrum elit. amet, ac\n\n618In ac metus primis ante\nLorem\n\n619Efficitur hendrerit scelerisque Vivamus finibus\n\n620Fames adipiscing efficitur neque. quis, pretium ut viverra finibus\nLorem\n\n621Pretium pharetra Duis rutrum fringilla Fusce Mauris est Sed in in Vivamus tincidunt. massa,\n\n622Ligula ut consectetur amet, condimentum aliquam malesuada\nLorem velit. ac velit. ut efficitur elementum felis.\n\n623Massa in pretium adipiscing massa faucibus. primis ac elit. Fusce eget purus felis. hendrerit pretium\n\n624Ut tortor metus ante sagittis semper. ac ante in finibus ac massa ac ante malesuada\n\n625Pharetra semper. elit. consectetur Integer adipiscing efficitur purus ut in, et consectetur ante\n\n626Fusce in semper. pharetra viverra felis. malesuada aliquam\n\n627Molestie et felis. elit. enim pretium elit.\n\n628Consectetur ante ut libero efficitur quis, Interdum massa, volutpat finibus pharetra Vivamus libero\n\n629Mauris Fusce fames metus efficitur sem. tortor finibus elit. Ut dolor libero efficitur enim malesuada\n\n630Integer ut ipsum pretium dui eget tortor nec primis in vel hendrerit faucibus. Vivamus ac\n\n631Fusce eget aliquam pretium sagittis Interdum orci iaculis. tortor velit. sit eget\n\n632Semper. volutpat condimentum tortor primis purus\n\n633Posuere libero vitae fames elementum ut vitae condimentum Mauris efficitur sagittis volutpat Duis eget ut\n\n634Posuere semper volutpat adipiscing efficitur ante ante vel ligula velit. eget velit. molestie eget posuere\n\n635Sem. orci Ut et iaculis. ante metus ac massa pharetra aliquam rutrum ac hendrerit\n\n636Orci, massa iaculis. ut condimentum Fusce\n\n637Eget ac semper. malesuada elit. in, ac consectetur Vivamus semper. in, eget\n\n638In, primis nec consectetur rutrum nunc adipiscing ac ac nec et sem. ante in, metus\n\n639Duis pharetra aliquam Vivamus libero Mauris amet, massa elit. scelerisque faucibus. rutrum\n\n640Eget sem. vel posuere massa, enim aliquam\n\n641Integer hendrerit nec ipsum eget Sed enim iaculis. pretium\n\n642Felis. tincidunt. velit. quis, Interdum faucibus. orci, purus In molestie ante eget\n\n643Hendrerit in ac primis Ut sit amet, ac orci, purus lorem ipsum bibendum, finibus\n\n644Neque. sagittis ac bibendum, pharetra Sed eget orci bibendum, enim Sed\n\n645Neque. elit. vel Vivamus fringilla ac dolor Sed Sed felis. ac orci\n\n646Tortor dolor elementum efficitur malesuada ligula fringilla elit. semper.\n\n647Ac sagittis lorem efficitur ac\n\n648Massa, tincidunt. ante lorem ut ante\n\n649Molestie hendrerit orci Ut et eget viverra in libero Interdum\n\n650Ac quis, vitae fames efficitur Ut Sed bibendum, massa ut efficitur Mauris ante nec purus\n\n651Elementum orci, Mauris in semper\n\n652Volutpat tincidunt. massa in ut Mauris ut molestie finibus\n\n653Et in viverra eget sit ligula posuere metus et ac consectetur elit. enim\n\n654Bibendum, posuere Integer faucibus. bibendum, libero efficitur ut\nLorem lorem elit.\n\n655Orci Fusce nec semper ante efficitur felis.\nLorem eget eget sit ipsum libero Duis\n\n656Condimentum massa, eget In aliquam\nLorem primis volutpat primis neque. Integer in Fusce ante\n\n657Consectetur aliquam Fusce viverra Interdum Mauris ac pretium scelerisque neque. sit enim ante\n\n658In finibus fames enim orci neque. neque. Duis\nLorem rutrum\n\n659Ac et et vitae quis, efficitur et volutpat pretium Fusce semper in, metus felis. efficitur\n\n660Fames Vivamus Vivamus ac orci\n\n661Rutrum adipiscing libero ipsum orci adipiscing nec pretium orci, orci finibus condimentum\n\n662Scelerisque tincidunt. amet, sem. felis. elit. est volutpat scelerisque in Sed\n\n663Rutrum nec tortor iaculis. Sed pharetra ac orci, et amet, semper. volutpat ac amet,\n\n664Ante efficitur dolor consectetur lorem et Integer tortor\n\n665Ante In Fusce posuere eget bibendum, vitae condimentum sit Fusce Sed ipsum condimentum\n\n666Pharetra consectetur rutrum viverra semper orci efficitur aliquam finibus tincidunt. nunc metus\n\n667Ipsum ante Interdum elementum et fames Integer efficitur et vel molestie sem.\n\n668Ante iaculis. neque. ipsum dolor faucibus. nunc orci efficitur efficitur neque. ipsum et in, tortor\n\n669Est orci condimentum sagittis orci hendrerit sem. ipsum pharetra rutrum\n\n670Orci, Sed eget Integer elit. quis, libero pretium amet, vitae ac quis, ut ac\n\n671Condimentum dui metus ac scelerisque sit elementum ligula libero elit. purus condimentum ipsum dui\n\n672Consectetur et ac felis. dui molestie In amet,\n\n673Hendrerit pretium molestie Vivamus nunc neque. eget felis.\n\n674Massa, in condimentum aliquam tincidunt. Duis ac molestie\n\n675Hendrerit ac dui sit scelerisque pretium pharetra orci ac aliquam aliquam volutpat faucibus. neque. primis\n\n676In purus In ut elit. pharetra aliquam condimentum eget Vivamus efficitur quis, tincidunt.\n\n677Ipsum eget ante ante et massa, sit in ac elit. pharetra Vivamus sagittis\n\n678Semper orci, Fusce quis, Vivamus quis, sagittis in, neque. ac orci lorem\n\n679In condimentum ut faucibus. malesuada scelerisque lorem fringilla\n\n680Purus consectetur ante adipiscing neque. ut\n\n681Enim ac massa, ante Mauris Vivamus ante orci massa massa, vitae\n\n682Ante in, neque. Duis in aliquam primis tincidunt. tincidunt. ipsum ac sit iaculis. finibus ut\n\n683Amet, Interdum rutrum ligula ac\n\n684Molestie Integer in ligula purus Sed Ut semper. et ipsum Interdum elementum tincidunt.\n\n685Ut efficitur in elit. condimentum sem.\n\n686Ante vel efficitur iaculis. in dolor elementum elit. dui rutrum ipsum neque. dolor\n\n687Interdum pretium dui amet, fames hendrerit\n\n688Primis lorem Duis amet, ante hendrerit ante semper volutpat ante Interdum in, et iaculis. Sed\n\n689Hendrerit sem. fames et bibendum, molestie ipsum Sed ac elementum amet, adipiscing et\n\n690Tortor Ut eget orci, ut\n\n691Ante Vivamus hendrerit est efficitur massa dui\nLorem\n\n692\nLorem elit. Integer finibus ipsum sem. condimentum hendrerit faucibus. aliquam massa, ante sagittis eget orci\n\n693Vivamus est rutrum viverra felis. Duis orci,\n\n694In, molestie Duis efficitur viverra in malesuada ac vitae nunc dui purus felis. nec\n\n695Primis pretium Vivamus Vivamus fringilla in\n\n696Consectetur enim ac Sed iaculis. et in, molestie vitae iaculis.\n\n697Orci, ante elit. sem. eget elit. adipiscing malesuada rutrum in scelerisque ipsum bibendum, adipiscing adipiscing\n\n698Vitae Sed nec molestie libero\n\n699Volutpat Vivamus consectetur posuere\nLorem ipsum in\n\n700Bibendum, enim massa, lorem condimentum elit.\n\n701Sit et amet, velit. rutrum est dolor ante tortor\nLorem lorem Fusce\nLorem ac efficitur\n\n702Massa vel ipsum elit. rutrum orci, in iaculis. dolor\n\n703Eget vel Duis ac et ac ut Sed Sed ac efficitur purus\n\n704In Mauris quis, velit. Vivamus ut lorem pharetra dolor vel orci efficitur\n\n705Ac finibus et pharetra orci efficitur In tincidunt. Fusce sagittis\n\n706Ligula enim enim ante primis\n\n707In orci finibus velit. massa, consectetur\nLorem vitae ipsum metus quis, massa elementum condimentum\n\n708Hendrerit posuere ante metus fames est sagittis ac tortor tincidunt. iaculis. ac in amet,\n\n709Adipiscing ac efficitur volutpat ipsum ante amet, viverra ac Sed\n\n710Volutpat faucibus. sem. ligula Integer fames vel tincidunt. eget volutpat ut ut viverra\nLorem\n\n711\nLorem massa pharetra eget consectetur elit. velit. elementum metus consectetur hendrerit efficitur\n\n712In posuere libero malesuada bibendum, viverra vitae\n\n713Ac ipsum velit. condimentum amet, in posuere massa, et eget\n\n714Vivamus finibus enim vitae Fusce quis, vitae\n\n715Velit. efficitur metus tortor in in\n\n716Aliquam in tincidunt. velit. eget libero orci,\n\n717Ipsum ligula libero ac ac pretium tincidunt. finibus efficitur\n\n718Semper vel elit. eget Interdum primis massa, tortor hendrerit efficitur viverra\n\n719Velit. consectetur ac Fusce et bibendum, ipsum ac sit vel lorem ut\n\n720Lorem Interdum pharetra tortor adipiscing ut neque. ipsum sem. elit. sagittis Mauris\n\n721Ante primis primis ante sagittis dui lorem Ut iaculis. lorem sit hendrerit neque. elit. Interdum\n\n722Consectetur pharetra tincidunt. semper semper. rutrum primis aliquam in tortor ut consectetur neque. libero et\n\n723Ac aliquam hendrerit rutrum malesuada\n\n724Vitae elit. Interdum vitae consectetur libero condimentum sagittis vel libero ante aliquam neque. massa\n\n725Massa, elit. adipiscing Fusce molestie in\n\n726Bibendum, metus ipsum Interdum volutpat ligula eget finibus ipsum aliquam elit.\n\n727Ac ipsum ut Interdum Vivamus scelerisque ante ante Interdum\n\n728Hendrerit ac in Duis in Interdum ante iaculis. condimentum rutrum iaculis. In ac orci, consectetur\n\n729Primis nunc pharetra dui et faucibus. malesuada ligula\n\n730Amet, rutrum eget molestie vel sit tincidunt. est\n\n731Vel ante elit. consectetur tortor in, quis, semper lorem\n\n732Vel ac fames rutrum condimentum est orci massa, sagittis neque. ante iaculis. Ut posuere scelerisque\n\n733Interdum ac iaculis. consectetur rutrum Duis in Mauris pharetra volutpat elit. efficitur molestie ante ligula\n\n734Semper ipsum tincidunt. enim in in in amet, In iaculis. ante rutrum in, in aliquam\n\n735Pretium efficitur massa, in Duis consectetur massa, bibendum, ac in\n\n736Fames Mauris ipsum tincidunt. lorem purus molestie in volutpat ac quis, Fusce dolor felis.\n\n737Lorem ipsum neque. ut volutpat sagittis sit consectetur finibus\n\n738Ut Duis et dui ante ut et Mauris ac semper. libero efficitur metus eget\n\n739Dui quis, ac hendrerit tincidunt. fames primis Sed tortor fringilla sit iaculis. pretium velit.\n\n740Ac ac dui ac sit lorem ipsum metus sem. ac Duis pharetra lorem metus neque.\n\n741Finibus ligula finibus vel massa\n\n742Adipiscing ac ante elit. fames eget ante Interdum Fusce Ut\n\n743Vitae ut ut sit malesuada massa hendrerit semper. ante\n\n744Ac nec pretium Ut\nLorem Sed Sed metus Duis adipiscing\n\n745Fames in eget Duis aliquam faucibus. purus\n\n746Viverra quis, in, semper consectetur Ut sem.\n\n747Viverra elit. sagittis dui est semper vitae adipiscing\nLorem orci elementum elit. consectetur\n\n748Volutpat viverra sagittis hendrerit iaculis. et in ipsum bibendum,\n\n749Metus sem. Fusce ante Ut bibendum, ipsum vitae\n\n750Posuere tincidunt. eget in iaculis. hendrerit pretium elit.\n\n751Ac molestie in ut\nLorem ut Interdum adipiscing eget sem. Ut pharetra consectetur\n\n752Vitae finibus ac Sed semper vel efficitur ut pharetra rutrum\n\n753Ligula et viverra dui consectetur ipsum aliquam elit. Vivamus consectetur Fusce ante in, hendrerit\n\n754Fringilla adipiscing libero consectetur posuere ante Mauris sem.\n\n755Vitae In condimentum et Sed\n\n756In ac aliquam ac orci, nunc bibendum, In tincidunt. ac sem. fames posuere orci,\n\n757Lorem ligula in In ac neque. ut aliquam\n\n758Molestie sit enim est Sed ut eget elementum malesuada nunc in, nunc volutpat\n\n759Molestie ligula in orci, Duis pharetra massa, sit dolor\n\n760Scelerisque fringilla molestie ante in, dui finibus\n\n761Massa metus Fusce in ac ac vitae metus Vivamus ac molestie ac pharetra velit. volutpat\n\n762Ac consectetur pharetra dolor aliquam fames condimentum metus sagittis ante\n\n763Sem. quis, felis. scelerisque volutpat Mauris efficitur elit. sagittis metus Mauris\n\n764Lorem consectetur malesuada viverra Vivamus In\n\n765Ligula in elit. ac adipiscing faucibus. Duis semper\n\n766Eget consectetur massa hendrerit\nLorem ac sit consectetur faucibus. ligula\n\n767Mauris Sed in ante ipsum purus consectetur neque. ac hendrerit efficitur in iaculis. ipsum ac\n\n768Elementum massa posuere malesuada massa sagittis volutpat Integer ut primis Duis sem.\n\n769Efficitur rutrum molestie\nLorem in in orci, fringilla sit sit in, eget elementum velit.\n\n770Aliquam elit. Vivamus rutrum Vivamus bibendum, scelerisque malesuada\n\n771Vivamus eget Mauris in Duis Ut\n\n772Tortor ut amet, massa, fames ante ipsum sit viverra nunc faucibus.\n\n773Molestie felis. consectetur in rutrum nunc enim pharetra scelerisque\n\n774Faucibus. tincidunt. Interdum enim eget Duis ut Mauris Fusce adipiscing lorem est\n\n775Volutpat fames in bibendum, velit. et est ante in, sagittis pretium\n\n776Interdum dolor Integer Integer fames tortor in, ipsum ipsum nunc elit. neque. in\n\n777Duis adipiscing lorem ut\nLorem ante In rutrum efficitur et sagittis Duis Interdum ut\n\n778Ut Duis libero nec neque.\n\n779Libero ante efficitur orci ipsum vel efficitur\n\n780Ante rutrum scelerisque sagittis hendrerit fames est posuere\n\n781\nLorem orci, finibus orci, volutpat velit. tincidunt. orci\n\n782Malesuada metus efficitur sagittis elit. tortor\n\n783Consectetur faucibus. metus consectetur primis faucibus. Mauris\n\n784Finibus Sed\nLorem quis,\nLorem elit. Interdum orci, dui ante massa, pharetra primis\n\n785Est tincidunt. iaculis. et et In et elementum\n\n786Ante in ipsum scelerisque primis vitae ac\nLorem in nec rutrum vitae\n\n787Orci consectetur dui fames consectetur est\n\n788Sed ut neque. viverra massa, quis, felis. lorem amet, molestie ante pretium consectetur\n\n789Tincidunt. Ut fringilla orci Interdum pharetra in orci,\n\n790Hendrerit Integer velit. rutrum neque. molestie lorem\n\n791Tortor elementum elementum fames purus Vivamus tincidunt. Duis condimentum tincidunt. in\n\n792Massa, consectetur quis, Duis adipiscing neque. bibendum, hendrerit vel In scelerisque\n\n793Fusce Integer ligula pretium metus ac ac fringilla semper nec rutrum posuere dolor in\n\n794Purus metus nec vitae malesuada nec in, ac molestie velit. elit. semper in\n\n795Posuere lorem ipsum Duis adipiscing Ut fringilla dui ac ac Sed molestie amet, elementum\n\n796Efficitur neque. malesuada Integer Sed sem. fames Mauris aliquam dui adipiscing volutpat Mauris Duis enim\n\n797Tortor hendrerit efficitur ligula efficitur\n\n798Ut elit. elit. iaculis. in et enim velit.\n\n799Finibus bibendum, ac Integer finibus pharetra ipsum efficitur In ac nunc ac Fusce\n\n800Ut ac sem. in finibus quis, velit. molestie Mauris aliquam volutpat ante ligula velit. Integer\n\n801Vitae In in, Vivamus pharetra elit. bibendum, bibendum,\n\n802Ligula amet, in nec ac adipiscing Interdum\n\n803Mauris enim ante dolor in fames finibus Duis orci massa, elementum ante Mauris ac\n\n804Sed orci, vitae sagittis lorem posuere\n\n805Vel condimentum est dolor viverra ante ac libero ac\n\n806Bibendum,\nLorem elit. ipsum sagittis enim viverra nec\n\n807Sagittis fringilla ac efficitur vitae libero ut elit. scelerisque Mauris amet, In dui Ut\n\n808Ipsum velit. volutpat iaculis. dolor ac ac\n\n809Semper. consectetur Integer vel scelerisque Fusce amet, malesuada et bibendum, in, felis.\n\n810Condimentum ipsum molestie rutrum dui ut lorem Duis metus\nLorem enim ut\n\n811Eget amet, efficitur neque. in aliquam\nLorem semper Ut neque. libero primis\n\n812Semper. pharetra elit. Ut primis in adipiscing in, semper.\n\n813In bibendum, consectetur efficitur ac purus viverra Vivamus pharetra Duis\n\n814Eget Vivamus Ut et ac pharetra bibendum, rutrum primis dolor Interdum vel Interdum eget Fusce\n\n815Ac Interdum orci, Sed eget\n\n816Malesuada vitae metus ante Mauris ac et\n\n817Tortor eget finibus sem. in lorem semper nec in in, finibus\n\n818Ac et ipsum\nLorem orci metus In purus viverra ipsum ac est\n\n819Felis. ac velit. bibendum, massa Mauris\n\n820Posuere sit elit. iaculis. massa efficitur\n\n821Adipiscing efficitur lorem metus orci, pharetra et\n\n822Dui felis. Duis pretium ipsum sagittis efficitur orci, fringilla aliquam\n\n823Ut molestie dolor orci, elit. Mauris felis. finibus pharetra Duis Fusce vitae semper. lorem hendrerit\n\n824Mauris est primis elit. lorem ante ante lorem metus ut Integer\n\n825Posuere adipiscing pharetra elementum tincidunt. dolor efficitur scelerisque scelerisque sem. In nunc orci,\n\n826Ac malesuada tortor orci neque. et in Mauris\n\n827Est vitae consectetur Vivamus eget molestie pretium quis, metus sem. est elementum rutrum elit. Vivamus\n\n828Efficitur amet, viverra scelerisque condimentum consectetur ut condimentum Fusce finibus nunc massa ut ac\n\n829In semper. Integer nec sit consectetur\n\n830Metus enim massa, in, ac eget quis, pretium in faucibus. malesuada iaculis.\n\n831Semper.\nLorem finibus molestie ac Integer fringilla fringilla vitae pretium ipsum massa\n\n832Sit ipsum dolor scelerisque Vivamus rutrum\nLorem\n\n833Rutrum finibus massa eget sagittis Fusce nec purus pharetra amet, Duis velit. in, efficitur\n\n834In Interdum aliquam molestie In\nLorem volutpat lorem malesuada vel faucibus. ac\n\n835Duis elementum Fusce metus consectetur efficitur ante\n\n836Vivamus nunc ut Duis elementum ipsum elit. In\n\n837In malesuada In fringilla malesuada dolor tortor nec malesuada\n\n838Iaculis. pretium condimentum iaculis. adipiscing consectetur et rutrum eget sagittis lorem In\n\n839Fringilla in fringilla tortor finibus\n\n840Elit. Mauris in aliquam faucibus. tincidunt. ante ac massa, ut\n\n841Molestie bibendum, ante dolor ac sagittis\n\n842Elit. ut ante faucibus. faucibus. tortor ac Vivamus In hendrerit\n\n843Vivamus efficitur ac metus aliquam\n\n844Orci ac primis malesuada ac vel Ut finibus felis. malesuada malesuada fames volutpat scelerisque viverra\n\n845Ut orci aliquam hendrerit in tincidunt. pretium Fusce volutpat lorem amet, lorem sem. fames\n\n846Ante quis, purus in metus condimentum malesuada fringilla ac massa est\n\n847Dolor pretium semper. Fusce finibus nec ut et\n\n848Eget faucibus. eget massa, consectetur\n\n849Velit. volutpat in, rutrum rutrum orci,\n\n850Ipsum in in Ut eget in vel dui volutpat Sed Mauris massa, ut\n\n851Scelerisque Integer primis Vivamus metus\n\n852Semper. ac eget bibendum, dui dolor ligula ac\n\n853Malesuada lorem ut finibus scelerisque malesuada nec tortor consectetur felis. libero\n\n854\nLorem Duis sit efficitur eget ac\n\n855In libero massa vel libero ligula est\n\n856Efficitur in Integer consectetur dui nunc tortor Vivamus Integer ac finibus felis.\n\n857Pharetra ut orci elementum faucibus.\n\n858In, ante amet, ac ipsum et metus tortor ligula\n\n859Ipsum primis elit. lorem molestie dui Integer\n\n860Sagittis eget condimentum massa, elementum sem. Mauris\n\n861Mauris in posuere eget in felis. massa dui iaculis. Vivamus\n\n862In eget est posuere fringilla Duis in,\n\n863Dolor enim ac nec malesuada ac neque.\n\n864Massa, bibendum, libero fringilla rutrum\n\n865Vel neque. orci neque. vitae eget malesuada Interdum Duis bibendum, massa Fusce et Duis\n\n866Ipsum Integer dui ante ipsum\n\n867Faucibus. malesuada in, Duis elementum iaculis. Sed nec consectetur quis, et\nLorem\n\n868Eget ipsum nec sagittis ipsum eget ligula eget massa,\n\n869Volutpat Interdum consectetur ac efficitur ut\n\n870Purus elit. lorem Ut tortor in\n\n871Primis faucibus. tincidunt. et adipiscing Duis sit Fusce est libero sem.\n\n872Tortor sem. ut pretium nec ut et ligula ac ut volutpat primis dui vitae\n\n873\nLorem elit. massa vitae consectetur sit faucibus. est dolor In tortor\n\n874Massa ante bibendum, ipsum est est In Integer fringilla lorem rutrum in\n\n875Quis, Interdum orci, eget et malesuada efficitur Duis in nunc\n\n876Elit. fringilla Fusce ut semper massa dui\n\n877Interdum tincidunt. Mauris vel semper. nunc quis, in semper in, nec ut efficitur posuere hendrerit\n\n878Ut ante semper. ante orci, massa in, ligula pretium Ut primis faucibus.\n\n879Iaculis. efficitur metus ligula Interdum primis amet, elit. ligula ante scelerisque volutpat rutrum et\n\n880Ante faucibus. quis, metus ante volutpat Vivamus in felis. felis. ipsum\n\n881Pretium purus consectetur vitae aliquam ante ac dui ante pretium eget\n\n882Orci, pharetra ac nunc sagittis ante malesuada\n\n883Neque. primis Mauris sit velit.\n\n884Ut ac quis, ipsum eget et in\n\n885Efficitur pharetra dolor fringilla efficitur ante\n\n886Elit. Integer efficitur elit. est sem. ac Integer ac in, In scelerisque finibus\n\n887Tincidunt. eget volutpat elit. libero metus\n\n888Tincidunt. bibendum, aliquam efficitur Vivamus ante Integer ac pretium scelerisque ligula in efficitur Integer efficitur\n\n889Consectetur vitae ante fames Integer neque.\n\n890Ac amet, sit velit. semper. et nunc massa condimentum\n\n891Ipsum est pretium elit. condimentum purus bibendum,\n\n892Ac dolor enim in ligula et volutpat vitae elit. ipsum Vivamus in hendrerit ac consectetur\n\n893Amet, velit. primis Mauris aliquam faucibus.\n\n894Metus volutpat ut adipiscing faucibus. adipiscing\n\n895Ac ac efficitur metus aliquam dolor metus elit. purus efficitur ac sagittis primis molestie tortor\n\n896Velit. Vivamus eget orci Sed malesuada ipsum\n\n897Interdum purus orci, tincidunt. Fusce\nLorem in malesuada volutpat fringilla Integer pretium\n\n898Malesuada scelerisque nec purus metus in\n\n899Sed sit posuere ante Mauris Integer est\n\n900Interdum vitae metus malesuada est\nLorem Sed rutrum\nLorem enim vel efficitur metus\n\n901Quis, purus elementum bibendum, bibendum, elit. efficitur vitae massa consectetur eget felis. semper\n\n902Ipsum felis. et tincidunt. ut quis, efficitur\n\n903Elementum pharetra nunc ipsum vitae primis eget ligula Vivamus ac consectetur tortor\n\n904Dolor Mauris viverra eget aliquam enim ac sit sem. semper tincidunt.\n\n905Adipiscing volutpat in in, hendrerit amet, tortor In pretium orci\n\n906Mauris quis, ac posuere in in ipsum semper. pretium nunc nec efficitur\n\n907Elit. vitae Vivamus dolor ante sem. ut neque. orci, vitae In faucibus. In Mauris adipiscing\n\n908Integer est nunc Interdum bibendum,\n\n909Malesuada tincidunt. Interdum iaculis. sem. faucibus.\n\n910Faucibus. purus consectetur orci, massa, In nec vel\n\n911Ipsum orci velit. ante ac orci, neque. eget fames\n\n912Integer in ac ut ut amet, nec neque. libero vel ante Sed ante Mauris faucibus.\n\n913Eget quis, et Mauris fames ut nec enim\n\n914In ac Interdum viverra in, primis elementum pretium ac elit.\n\n915Primis dolor Sed in est ac orci, nunc molestie enim sit Interdum ut ante ante\n\n916Amet, et eget neque. ante libero\n\n917Molestie nunc eget enim et fringilla efficitur orci, pretium quis, Duis iaculis. orci,\n\n918Scelerisque ante fringilla ut volutpat rutrum Interdum Interdum fames efficitur\n\n919Finibus malesuada metus ac ligula elementum ac fames in in massa semper in ante Integer\n\n920Primis in, faucibus. nec Sed adipiscing metus bibendum, volutpat Ut Fusce adipiscing ipsum elit.\n\n921Tincidunt. elementum quis, dui enim ante orci, efficitur neque. neque. ac\n\n922In ligula consectetur posuere\nLorem sit sem. aliquam viverra\n\n923Sagittis eget Interdum Mauris nec enim sit hendrerit enim fringilla ac consectetur\n\n924Hendrerit est molestie bibendum, efficitur consectetur ac\n\n925Finibus elementum in, ipsum rutrum fringilla ante ligula libero Duis ac consectetur ut et sagittis\n\n926Nec ipsum dolor ante ut pretium ante pretium in in metus\n\n927\nLorem semper. neque. Ut ut\nLorem consectetur ac Integer massa\n\n928Ac adipiscing orci, ante primis finibus Fusce posuere amet, Ut in\n\n929Ac neque. elit. consectetur in, dolor massa vitae velit. tortor tincidunt. In sit eget\n\n930Enim nec ac pharetra ipsum fames ipsum\n\n931Condimentum elit. neque. adipiscing sagittis tincidunt. adipiscing consectetur primis vitae\n\n932Ut ut adipiscing in felis. Sed viverra\n\n933Condimentum purus efficitur bibendum, semper. Duis faucibus. in Integer in ut finibus\n\n934Ac elit. orci enim ac consectetur pharetra metus consectetur\n\n935Elit. viverra adipiscing condimentum malesuada efficitur viverra sagittis est molestie\n\n936In fames finibus ligula pretium consectetur libero Integer felis. Vivamus vitae dui neque.\n\n937Dolor ac elementum faucibus. quis, et eget faucibus.\n\n938Purus ante ante dui ac orci, volutpat Fusce in, semper.\n\n939Dolor sem. neque. Integer volutpat in, viverra molestie Sed consectetur primis semper. ante est\n\n940Dui nunc neque. elit. ut ante sit iaculis. consectetur est ipsum orci,\n\n941Aliquam Interdum Fusce ligula ut\n\n942Ante ante sem. ut molestie in ac bibendum, malesuada primis viverra\n\n943Elit. semper purus elit. scelerisque in ante massa velit. ante consectetur\n\n944Adipiscing rutrum semper posuere ante tortor pretium ipsum malesuada\n\n945Condimentum molestie ante faucibus. malesuada Sed in, ac in ac fringilla Interdum purus volutpat est\n\n946Ut finibus efficitur in ante felis. orci eget elit. pharetra massa, Vivamus ante tincidunt.\n\n947In, quis, molestie vel in ipsum viverra In Integer\n\n948Ac\nLorem lorem Duis volutpat sit Sed Interdum vitae hendrerit ligula massa faucibus. dolor ac\n\n949Faucibus. orci, Mauris ligula velit. ut neque. aliquam elit. elit. Sed malesuada pharetra quis, Fusce\n\n950Volutpat eget faucibus. lorem orci adipiscing bibendum, et massa vitae metus semper. faucibus. ut\n\n951Ac neque. Sed aliquam et consectetur aliquam ut ac iaculis. metus efficitur Interdum ac massa\n\n952Sagittis dui sem. metus in hendrerit fames in hendrerit in\n\n953Pretium elementum in ipsum Sed pharetra faucibus. elit. ipsum et volutpat aliquam\n\n954Mauris volutpat in elit. vel\n\n955In nec Interdum bibendum, eget in molestie ante amet, Duis\n\n956Neque. efficitur in malesuada ligula elit. faucibus. et iaculis. quis,\n\n957Eget efficitur enim Fusce nec Ut condimentum neque. velit.\n\n958Fames Mauris dui adipiscing consectetur ac efficitur hendrerit in\n\n959In, Fusce nunc nec enim Integer fringilla et posuere semper posuere lorem eget tincidunt.\n\n960Et ac efficitur Integer fringilla in quis, in in, eget est sem. primis sit\n\n961Ac eget sem. vitae ac dolor nec\n\n962Ante faucibus. felis. ante metus ante Duis orci Interdum\n\n963Ac iaculis. elementum Vivamus metus libero pharetra est ac\nLorem ante nunc felis. ipsum bibendum,\n\n964Semper semper. ante posuere enim massa in ligula malesuada purus ac ut ac aliquam ante\n\n965Iaculis. primis condimentum massa, velit. et quis, Mauris in et ipsum ac adipiscing bibendum, Fusce\n\n966Est tincidunt. neque. orci sem. Vivamus\n\n967Ipsum nunc Mauris massa, pharetra adipiscing vitae ligula\n\n968Ac tortor ac ut et massa, ac elit. orci, Interdum\n\n969Sit In ante neque. pharetra in elementum ante dolor Sed aliquam\n\n970Orci elit. iaculis. elit. libero vitae tortor rutrum elit. semper ligula Vivamus lorem bibendum,\n\n971Velit. rutrum consectetur vitae posuere fringilla elit. Mauris primis ut fringilla ac sit\n\n972Ante fames est efficitur ante consectetur Mauris ante semper. elit.\n\n973Ut in lorem Mauris neque. In efficitur iaculis. hendrerit Interdum tortor volutpat consectetur rutrum\n\n974Ac elementum Fusce sem. viverra quis, consectetur bibendum,\n\n975Vitae sem. efficitur est adipiscing consectetur Ut dui massa, ipsum volutpat\n\n976Ante fringilla ut bibendum, Ut dolor efficitur condimentum Duis In ligula\n\n977Dui felis. scelerisque massa ac eget elit. Ut efficitur in sem. bibendum, sit hendrerit\n\n978Elit. efficitur Vivamus Sed ante ut ante ac fringilla\n\n979Posuere primis sagittis in pharetra efficitur\nLorem\n\n980Orci massa, fringilla sagittis dolor massa, massa\nLorem finibus\n\n981Condimentum molestie volutpat pretium orci et faucibus. malesuada elit. in ac ante\n\n982Integer elementum pharetra sagittis primis et ac neque. ut dolor elit. bibendum,\n\n983Condimentum ac volutpat fames efficitur tortor ante\n\n984Elit. malesuada tincidunt. quis, iaculis. ligula metus hendrerit nec in eget in, libero neque. elementum\n\n985Pharetra ante molestie orci volutpat fames orci, consectetur neque. ac velit. Vivamus elementum ut\n\n986Semper fringilla orci et elit. semper metus in, lorem elit. est\n\n987Efficitur dui consectetur felis. hendrerit ut ipsum\n\n988Mauris sem. tincidunt. massa ligula enim in Fusce nec fames massa in eget eget\nLorem\n\n989Duis rutrum ante ipsum eget bibendum, malesuada In\n\n990Ac ligula dui nec pretium Interdum\n\n991Pretium faucibus. hendrerit finibus volutpat In massa,\nLorem finibus\n\n992Et massa, massa, elementum Duis elit. Integer elit. sem. metus efficitur felis. fames velit. ipsum\n\n993Hendrerit malesuada neque. primis in orci, elementum sit purus velit. viverra volutpat\n\n994\nLorem Ut iaculis. sit scelerisque massa ac iaculis. consectetur orci, nec volutpat orci,\n\n995Vitae eget molestie volutpat ac ac primis efficitur amet, eget ut aliquam ligula fringilla ipsum\n\n996Vel ante et malesuada fringilla ut Fusce ipsum ante libero Vivamus sagittis\n\n997Ut Mauris viverra finibus ac\nLorem ipsum pretium lorem et pretium\n\n998Tortor aliquam bibendum, Fusce ligula vitae efficitur\n\n999Ante libero ac hendrerit ac sit ac eget aliquam massa orci iaculis.\n\n1000Est ligula consectetur scelerisque ac purus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |",
+    "searchText": "Dropdowns\nDropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.\nDropdowns\nButtonDropdown\nNormal Button\nnoCaret\nDropup\nSplitButton\n\nSplitButton\n\nLarge button\nDefault button\nSmall button\nMini button\n\nDropdown with max-height\nDropdown with dopup\nDropdown with pullRight\nControlled Dropdown\n\nDropdown variantsText dropdown\n\nCustom dropdowns for filter tagsTag dropdown\n\nTag small dropdown\n\nCustom dropdowns for labelsActive\n\nActive\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nSimpleButtonDropdown\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nSingleButtonDropdown\nWrapper component for ButtonDropdown, kept for backwards compatibility.\nSingleButtonDropdown\nSplitButtonDropdown\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string \\| React.ReactNode | '' | Displayed button title. |\n| items | MenuItem[] | — | Items to display in the dropdown sub menu. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables every entry on the title list item. |\n| className | string | — | Additional classes to be set on the dropdown-submenu element. |\nCustom Dropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nDropdown using React Portal\nA typical use case for ButtonDropdown using portal is when a parent component has an overflow: hidden or z-index style, but you need the dropdown to visually “break out” of its container.\nNormal Button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Ut faucibus. ac sit consectetur tortor nec in tortor Integer consectetur\n\n2In, dui\nLorem efficitur orci,\n\n3Sem. consectetur elit. orci et amet,\n\n4Nec dui et In ligula aliquam efficitur elementum velit.\n\n5Duis in tortor dolor scelerisque massa, amet, elit. fames bibendum, elit. efficitur Duis\n\n6Scelerisque sem. Integer ante in hendrerit massa,\n\n7Nec ut sagittis adipiscing lorem Mauris posuere adipiscing nec ac bibendum, massa, tincidunt.\n\n8Posuere efficitur consectetur ipsum posuere posuere sagittis massa Duis volutpat vitae adipiscing\n\n9Sit rutrum dolor felis. Duis Mauris ac amet, faucibus. eget Integer molestie ut ipsum\n\n10Adipiscing iaculis. et eget pharetra condimentum Ut lorem ipsum est\n\n11Amet, rutrum ac ac adipiscing In In massa, eget velit. molestie\n\n12In, posuere consectetur ipsum iaculis. libero In et\n\n13Adipiscing ac ac vitae amet, massa eget nec nec\n\n14Volutpat pharetra felis. vel libero fames\nLorem consectetur elementum efficitur ac tortor primis\n\n15Finibus Ut ligula Interdum Ut adipiscing orci, ac neque. elit.\n\n16Semper. eget posuere est dui est posuere Integer\n\n17Vivamus ut orci enim ipsum ipsum sagittis enim faucibus. quis,\n\n18Posuere ut ipsum in quis,\n\n19Sed amet, est dui in, dolor eget nunc ut consectetur sit\n\n20Bibendum, hendrerit orci Sed ante Mauris eget Mauris velit.\n\n21Elit. massa, Duis tincidunt. Ut tortor ante efficitur ac\n\n22Semper. Interdum ipsum consectetur fringilla\n\n23Ante nunc tortor pretium ac Mauris ante elementum elit. malesuada pharetra\n\n24In quis, sem. quis, amet, dui Fusce condimentum massa ante\n\n25Elit. tincidunt. ut neque. lorem in, in orci adipiscing tincidunt. vitae pretium efficitur finibus\n\n26Felis. aliquam ac Mauris rutrum tincidunt. ac vel ac\n\n27Semper rutrum purus iaculis. condimentum massa posuere metus\n\n28Enim dolor rutrum hendrerit malesuada adipiscing viverra metus ante posuere volutpat efficitur\n\n29Ante ipsum fames hendrerit et Ut vitae elementum purus metus consectetur ac In\n\n30Et massa, purus fringilla ipsum quis, faucibus. faucibus.\n\n31Orci, metus est bibendum, ipsum ac\n\n32Eget et scelerisque sagittis viverra vel semper vitae massa vel quis,\n\n33Amet, Fusce enim eget eget rutrum\nLorem ac Interdum felis. Ut\nLorem Sed ante\n\n34Orci, amet, ligula in, malesuada vel orci, consectetur In massa, in, quis, Integer\n\n35Semper ligula condimentum Fusce vitae fames ac aliquam elit. pretium vitae Integer velit. primis\n\n36Ac scelerisque faucibus. et fringilla massa tortor semper pharetra semper. faucibus. rutrum ac\n\n37Rutrum ante posuere consectetur ut ipsum\n\n38Ipsum volutpat massa, enim eget rutrum ipsum velit. quis, felis. Mauris\n\n39Ac eget vel dolor ipsum tortor in condimentum pharetra faucibus. et elit. sagittis\n\n40Orci, sagittis fringilla elit. posuere in, orci dui in Sed\n\n41Libero metus dui in pharetra\n\n42In Vivamus enim dolor semper.\n\n43Ac\nLorem semper vel iaculis. pretium eget molestie eget consectetur efficitur vel nunc dolor Duis\n\n44Consectetur et orci fringilla Ut posuere volutpat Duis nec ipsum tortor quis, ipsum elit.\n\n45Vivamus ante ante iaculis. primis est ante purus sagittis fames consectetur enim molestie eget\n\n46Malesuada primis Vivamus ante scelerisque orci, in Integer libero\n\n47Felis. ipsum efficitur neque. neque. Mauris\n\n48Est nunc in, aliquam finibus faucibus. ut\n\n49Sed aliquam in efficitur sit ac est consectetur sagittis faucibus. sit\n\n50Quis, semper. bibendum, iaculis. posuere ac viverra tincidunt. eget enim\n\n51Metus posuere In condimentum Mauris Vivamus vitae condimentum in adipiscing\n\n52Ante Fusce eget ac iaculis. quis, Mauris Mauris malesuada volutpat consectetur\n\n53Semper. elit. orci elit. rutrum eget dolor in elementum libero felis.\n\n54Consectetur ligula et Vivamus Sed\n\n55Nec iaculis. elementum consectetur consectetur sem. molestie pretium tincidunt. ante viverra consectetur adipiscing vel ligula\n\n56Vel dolor consectetur ut In pharetra tortor Duis consectetur ac dolor pharetra malesuada hendrerit\n\n57Metus\nLorem in faucibus. sagittis et\n\n58Orci ligula Integer\nLorem elementum condimentum lorem neque. Interdum massa eget\n\n59Consectetur elementum elit. malesuada Duis Mauris vel Mauris faucibus. ipsum\n\n60Posuere In hendrerit consectetur ante iaculis. Sed et\n\n61Consectetur Fusce iaculis.\nLorem Integer pharetra est in quis, ut in\n\n62Ut sagittis hendrerit tincidunt. semper. Mauris metus massa, fames sem.\n\n63Ante\nLorem Vivamus neque. orci, neque. volutpat eget massa, fames bibendum, sagittis Vivamus ac in,\n\n64Fusce massa,\nLorem orci, Duis est in In aliquam dui\n\n65Sed et elit. in ante ac Fusce bibendum,\n\n66Ligula pharetra massa, bibendum, vel massa fames ac in volutpat Vivamus adipiscing et\n\n67Ipsum faucibus. efficitur Sed Duis Integer condimentum in molestie consectetur vel Duis Vivamus\n\n68Felis. velit. Integer Vivamus nec est metus tortor semper primis ante ipsum velit. quis, nunc\n\n69Ut fringilla elit. felis. finibus Vivamus et\nLorem\n\n70Semper eget ac ac Sed ac nunc elit. vel est Sed Vivamus\n\n71Ac vel ipsum Interdum dolor orci, et nec Ut elit. In Fusce Mauris\n\n72Elementum sit felis. orci elit. nunc orci orci, metus\n\n73Interdum et consectetur rutrum primis in posuere consectetur posuere elit. efficitur sit\n\n74Ante tincidunt. In Ut finibus sit ac ut in, sem. hendrerit\n\n75Ut sagittis elit. posuere eget aliquam\n\n76Scelerisque faucibus. orci, in nunc est massa lorem Interdum purus dolor Duis vel\n\n77In et ipsum nunc elit. Ut\n\n78Semper quis, in pretium et eget Integer\n\n79Molestie Ut libero faucibus. orci molestie tortor elit.\n\n80Est Mauris eget elit. posuere elit. tincidunt.\n\n81Vitae fames vel aliquam faucibus.\n\n82Finibus in sagittis elit. fames adipiscing velit.\nLorem rutrum hendrerit malesuada ante\n\n83Velit. tortor felis. fringilla Sed bibendum, adipiscing ut viverra Sed adipiscing molestie ac\n\n84Lorem pharetra elit. in, iaculis. amet, finibus massa, nec purus\n\n85In nec condimentum ipsum molestie\n\n86Massa, ut et pharetra tortor pharetra ut massa finibus Duis elementum ipsum\n\n87Rutrum faucibus. Integer malesuada semper in vitae Ut massa, Vivamus elementum eget semper malesuada sem.\n\n88Semper. in Fusce iaculis. hendrerit efficitur sit ipsum in, in Mauris Vivamus velit. Duis\n\n89Nunc rutrum libero Duis nec Vivamus ut ut in libero nec semper\n\n90Sagittis fringilla ante Fusce fames ac\n\n91In Sed ante eget in molestie est Mauris et et elit. Vivamus elit.\n\n92Dui aliquam aliquam nunc orci, et quis,\n\n93Fringilla ac condimentum ligula felis. adipiscing velit. ligula Mauris elit. dui velit. ac\n\n94\nLorem velit. volutpat nec scelerisque\n\n95Ipsum hendrerit nec primis elit. In sem. quis, neque. libero ut Integer iaculis. Ut dui\n\n96Consectetur Vivamus ac bibendum, hendrerit tortor condimentum Interdum ante quis,\n\n97Iaculis. nec orci primis fringilla consectetur ipsum malesuada finibus Fusce sit aliquam efficitur efficitur in\n\n98Eget rutrum elit. velit. efficitur aliquam orci ligula ut tortor condimentum elementum viverra in, Integer\n\n99Orci pretium Vivamus faucibus. purus Vivamus Duis felis. efficitur scelerisque\n\n100Metus massa, adipiscing elit. sit Vivamus Interdum ipsum et sit sagittis Vivamus tincidunt.\n\n101Quis, Sed tincidunt. est finibus hendrerit bibendum,\n\n102Sagittis adipiscing tincidunt. et Integer pharetra sit volutpat lorem vitae Duis efficitur\n\n103Sit hendrerit ipsum libero molestie massa,\n\n104Ipsum sem. malesuada et in massa eget pharetra in primis Vivamus tincidunt. ipsum hendrerit in,\n\n105Fames tortor tincidunt. aliquam dolor in consectetur semper ante\n\n106Ut faucibus. molestie molestie libero\n\n107Ac semper. efficitur vitae consectetur hendrerit\n\n108Lorem ac ut In eget elementum Vivamus amet, in, consectetur Ut pretium aliquam\n\n109Iaculis. ac dolor semper. tortor volutpat eget eget elementum\n\n110Volutpat Duis ipsum Fusce ipsum semper.\n\n111In tortor Duis scelerisque molestie ut in primis sem. sem. faucibus. malesuada\n\n112In tincidunt. in, enim In orci enim metus\n\n113Sagittis viverra massa\nLorem pharetra in tortor condimentum condimentum dolor Vivamus semper efficitur faucibus. purus\n\n114Rutrum vel in ac orci Ut amet, ante et efficitur\n\n115Sit pretium ac elementum enim efficitur\n\n116Massa, orci, et ac ipsum enim fames felis. Integer pharetra nec\n\n117Quis, dui\nLorem lorem rutrum sem. orci molestie Integer libero sagittis quis,\n\n118Dolor In ante pharetra ac condimentum faucibus. semper\n\n119Primis aliquam amet, felis. bibendum, orci ligula viverra et posuere orci\n\n120Quis, condimentum consectetur lorem finibus amet, semper efficitur fringilla Vivamus ac lorem ante\n\n121Consectetur lorem vel dolor sit\n\n122Massa primis libero et Integer iaculis. elementum ipsum vitae eget Ut Interdum efficitur molestie\n\n123Semper Fusce neque. semper. eget consectetur vitae Duis vel ipsum nunc ipsum est\n\n124Sit fringilla vel ut consectetur neque. lorem vitae ante quis, fringilla\n\n125Adipiscing aliquam Mauris pretium elit. Mauris malesuada felis.\n\n126Amet, ac finibus ut quis, scelerisque neque. fringilla Interdum fames\n\n127In rutrum Vivamus enim iaculis. consectetur purus ligula est efficitur Sed et ac Interdum amet,\n\n128Ac dolor bibendum, tincidunt. elit. hendrerit malesuada iaculis. elit.\n\n129Ac sit ipsum purus finibus pharetra posuere scelerisque ac hendrerit\n\n130Vivamus scelerisque ut Mauris bibendum, Integer in vel quis, ante Mauris Vivamus\n\n131Vivamus aliquam et nec faucibus. ligula semper. eget posuere Vivamus efficitur in rutrum metus et\n\n132Pharetra ac quis, ipsum sit\n\n133Fringilla enim ut sem. Mauris\n\n134Lorem metus semper finibus tortor metus in, quis, vitae ante orci,\n\n135Mauris ante tortor ante In ac Fusce libero scelerisque ut in, orci\n\n136Fringilla fames bibendum, Ut condimentum In massa, ante viverra Duis sem. elit. ante eget metus\n\n137Est consectetur ipsum Duis Vivamus ac faucibus. aliquam\n\n138Elit. ac ante sit Integer nec volutpat ante\n\n139Molestie nec bibendum, metus aliquam\n\n140Interdum condimentum ante pharetra vel Fusce est scelerisque orci consectetur orci faucibus.\n\n141Viverra et efficitur Integer eget Interdum iaculis.\nLorem Fusce Duis vel ac Interdum\n\n142Massa, eget posuere Mauris vel nec\n\n143In amet, ante Vivamus malesuada consectetur metus viverra ac ac Ut orci,\n\n144In enim elementum est scelerisque tincidunt. Integer ipsum amet, tortor\n\n145Ac ipsum nunc dui Interdum consectetur eget felis. quis, pretium fames Integer efficitur\n\n146Semper. iaculis. consectetur massa, enim nunc in Integer Sed ipsum\n\n147Orci et posuere elit. quis, scelerisque enim elementum ac rutrum\n\n148Tincidunt. Fusce aliquam Ut eget fames posuere\n\n149Efficitur Mauris posuere Duis elit. elementum hendrerit ligula\n\n150Dolor Sed ante volutpat molestie faucibus. elit. nec metus sem. Integer libero ipsum\n\n151\nLorem ac tortor ipsum Interdum lorem orci Sed lorem scelerisque Interdum fames lorem\n\n152Ut felis. malesuada eget quis, Mauris hendrerit finibus adipiscing\n\n153\nLorem consectetur In semper. ac iaculis. ante metus condimentum neque.\n\n154Tortor ac ac ipsum vel metus ante malesuada tortor volutpat primis primis ut malesuada\n\n155Ipsum semper ac viverra vel ligula in massa\n\n156Orci, iaculis. Sed elit. nec in eget hendrerit\n\n157Volutpat in, molestie ut ante ante bibendum,\n\n158Fames vitae ante ipsum fames metus amet, neque. aliquam et Sed libero viverra finibus\n\n159Fringilla elit. vel neque. condimentum\n\n160Ut vel malesuada sagittis in\n\n161Ante eget fames nunc scelerisque velit. libero vitae rutrum ipsum faucibus. metus rutrum quis, elit.\n\n162Ante pharetra semper. ligula efficitur scelerisque metus consectetur metus\n\n163Eget semper. faucibus. efficitur efficitur in In bibendum, ut primis\n\n164Eget viverra consectetur et adipiscing semper. et elementum Fusce lorem condimentum ac\n\n165Finibus viverra neque. semper amet,\n\n166Primis ipsum ut rutrum adipiscing hendrerit in efficitur elit. hendrerit orci,\n\n167Fusce purus amet, adipiscing et massa, pretium iaculis. libero ipsum viverra volutpat lorem\n\n168Pretium quis, malesuada et dolor dui volutpat dui volutpat malesuada molestie ut ac elit. sagittis\n\n169Ante rutrum ante sit enim ac\n\n170Faucibus. ut faucibus. pharetra\nLorem ac nunc primis viverra\n\n171Massa in tincidunt. hendrerit amet, massa, est consectetur\n\n172Ante massa in consectetur ut Ut posuere Mauris Sed rutrum nec In\n\n173In sem. elit. ut semper.\n\n174Semper. amet, ac in ut viverra hendrerit pharetra lorem finibus semper\n\n175Posuere condimentum consectetur condimentum adipiscing eget malesuada\n\n176Ligula consectetur Mauris ac consectetur efficitur dolor Fusce\nLorem\n\n177Metus ante faucibus. sit volutpat\n\n178In ut orci ac consectetur in elit. malesuada molestie purus enim ac\n\n179Pretium purus ante felis. malesuada massa, massa libero ut dui\n\n180Pretium rutrum sem. massa, scelerisque scelerisque\n\n181Ut est Vivamus massa, consectetur efficitur massa eget quis, Mauris sit Duis\n\n182Fames viverra dolor Fusce libero posuere ac posuere felis. Sed\n\n183Scelerisque posuere ipsum ipsum faucibus.\n\n184Felis. Integer et lorem felis. consectetur efficitur Integer\nLorem felis. in volutpat\n\n185Dui Mauris Ut quis, sem. amet, efficitur massa,\n\n186Est consectetur dui ante purus vitae efficitur bibendum, primis nunc\n\n187Primis eget Interdum est purus consectetur in, ac adipiscing\n\n188Orci adipiscing Mauris Mauris elementum semper. efficitur massa viverra in, molestie in semper iaculis.\n\n189Consectetur fringilla orci sit orci metus Mauris orci\n\n190Dui eget sit viverra ante\n\n191Ante semper Duis efficitur tortor viverra\n\n192Sed nunc in\nLorem ac bibendum, quis, ac posuere ac\n\n193Semper semper. rutrum iaculis. nunc tortor Sed\n\n194Amet, eget et bibendum, semper. bibendum, ante felis. ligula et ac viverra\n\n195Consectetur orci, amet, amet, ac purus et vitae ut posuere\n\n196Scelerisque ac rutrum eget massa et ante in lorem vitae in, et\n\n197Adipiscing ac velit. elit. ante Fusce scelerisque\n\n198Scelerisque consectetur primis massa, ante pharetra adipiscing massa, dui pharetra\nLorem elit. sit\n\n199Interdum est velit. in volutpat finibus elit. orci\n\n200In tincidunt. primis primis elit. condimentum ac pharetra vel\n\n201Consectetur sagittis iaculis. scelerisque consectetur elit. sagittis vitae Sed Duis elementum libero condimentum Integer\n\n202Ut et viverra purus condimentum ut eget Interdum fames\n\n203Malesuada Sed condimentum ac consectetur in primis tortor\n\n204Tortor ante ac et quis, eget efficitur enim sem. purus semper consectetur pretium\n\n205Velit. vel viverra volutpat dolor sit scelerisque malesuada semper. velit.\n\n206\nLorem condimentum ligula molestie ut adipiscing fames orci, ut\n\n207Ante ante ac massa, tincidunt.\n\n208Felis. ut posuere pharetra et hendrerit\n\n209Sem. condimentum libero massa, ac\n\n210Eget ligula sagittis orci Mauris Ut neque. scelerisque libero Fusce sem. rutrum\n\n211Orci, massa, Mauris ante fames vitae Integer neque. adipiscing in eget\n\n212Ac purus metus in, In\n\n213Tincidunt. ac primis amet, Sed in\n\n214Mauris metus ante tortor in tortor rutrum faucibus. sem. semper elementum nec purus\n\n215Elit. ac eget sem. in in in hendrerit\n\n216Elementum elit. ut Mauris semper enim scelerisque quis, posuere\n\n217Sagittis bibendum, fringilla massa sagittis viverra enim elementum ut Vivamus consectetur Vivamus ipsum\n\n218Sit efficitur metus faucibus. adipiscing dui lorem semper. bibendum, purus malesuada elit. tortor elit. enim\n\n219Mauris sit metus Mauris nec dui ac Ut\n\n220Vivamus viverra in fames velit. orci,\n\n221Fusce ac dolor enim elementum bibendum, finibus in efficitur\n\n222Malesuada felis. tortor Vivamus elementum et ac elit.\n\n223Consectetur ipsum ac ut elit. ante finibus metus eget ligula orci ut amet,\n\n224Bibendum, est elit. Ut est posuere vitae elementum et In\n\n225Ac et ac hendrerit metus fringilla\n\n226Fames scelerisque eget dolor posuere Vivamus dolor sagittis\n\n227Fames eget orci, finibus Vivamus scelerisque pretium ac in Ut ac in,\n\n228Finibus vel fames scelerisque\nLorem in in est in faucibus. lorem ligula ac\n\n229Dui elit. Ut tortor semper est amet, est sit iaculis. pretium\n\n230Dolor orci, tortor in libero faucibus. orci tortor velit.\n\n231Semper felis. fringilla lorem Fusce posuere velit. ante ac aliquam libero condimentum\n\n232Eget libero efficitur est In pretium fringilla condimentum Fusce consectetur lorem in\n\n233Eget velit. dolor malesuada consectetur purus tortor sagittis nunc faucibus. ipsum massa\n\n234Et viverra eget bibendum, ac Interdum hendrerit tortor aliquam\n\n235Vivamus semper. libero elementum ac elit. enim Vivamus enim vel tincidunt. ante Integer faucibus. pharetra\n\n236Felis. dolor semper orci est in in tortor sem. scelerisque\n\n237Sagittis enim libero semper Interdum libero ac\n\n238Finibus vitae Mauris in eget\n\n239Scelerisque purus molestie enim efficitur massa,\n\n240In Ut efficitur in hendrerit malesuada\n\n241Ac ac lorem finibus malesuada orci, Sed tortor dui ac dolor tincidunt.\n\n242Fusce malesuada primis finibus ac ipsum dui bibendum,\n\n243Orci faucibus. hendrerit condimentum Integer primis ac\n\n244Hendrerit finibus dui tortor ac efficitur\n\n245Libero molestie scelerisque orci, consectetur velit. amet, in aliquam fames semper in, et\n\n246Libero purus lorem sem. molestie molestie\n\n247Semper neque. vitae orci elit. elementum ipsum primis quis, Mauris Interdum semper. in pretium ut\n\n248Adipiscing orci et lorem massa, aliquam orci,\n\n249Metus condimentum dui massa hendrerit Integer ut pharetra libero ligula eget viverra ipsum in nunc\n\n250Sed bibendum, semper. neque. ipsum fringilla Fusce ut dui\n\n251Interdum in, ipsum ac ut et vitae dui sem.\n\n252Ac viverra molestie ac efficitur Vivamus purus condimentum\n\n253Ante in, orci, Vivamus ligula nunc iaculis. nec\n\n254Condimentum purus ante dui pharetra hendrerit felis. libero\nLorem in fringilla\n\n255Tincidunt. vel tortor fames ipsum sagittis bibendum, eget Ut est\n\n256Metus efficitur Vivamus posuere primis ante pharetra Interdum libero vel fames ac vel\n\n257Elementum Interdum viverra in, nec ante bibendum, Ut neque. et et quis, amet,\n\n258Et felis. est In ut adipiscing fringilla elementum ac\n\n259In consectetur semper. Fusce Interdum sem. malesuada tortor et ante orci, Duis consectetur in,\n\n260Primis malesuada ante aliquam semper ante\n\n261Ac tincidunt. massa, libero in tortor pretium amet, primis orci, ac posuere massa, eget\n\n262Integer aliquam faucibus. pretium nec velit.\n\n263Massa in Vivamus dolor molestie Interdum Mauris in elit. ante ante in eget\n\n264Sagittis ipsum ac Vivamus ac lorem velit. consectetur pharetra dolor\n\n265Ut Integer vel eget quis, in,\n\n266Semper velit. eget vitae volutpat volutpat\n\n267Eget Interdum pretium volutpat ligula massa, Integer dui et et\n\n268Fusce ipsum Vivamus efficitur in volutpat primis hendrerit Fusce enim\n\n269Scelerisque enim fringilla malesuada Sed orci neque.\n\n270Lorem pretium felis. fames consectetur\n\n271Libero ante Interdum fringilla semper. metus\n\n272Finibus ante dolor ut amet,\nLorem ipsum malesuada nec ac ut massa In pharetra\n\n273Ante in tincidunt. fames lorem viverra orci, libero libero Vivamus finibus ac eget eget dolor\n\n274Hendrerit ante et elementum vitae rutrum ante semper\n\n275Metus volutpat faucibus. neque. est et\n\n276Fusce iaculis. massa, quis, nec efficitur sagittis\n\n277Fringilla Sed ac ut ante in neque. dolor in, In Fusce dolor primis dui Integer\n\n278Fringilla est metus fames velit. efficitur eget felis. enim elit.\n\n279Vel ante Ut ante massa sit ipsum\n\n280Velit. in velit. felis. vel semper. quis, consectetur eget lorem tortor massa\n\n281Scelerisque Interdum malesuada posuere efficitur molestie iaculis. ut pretium dui Mauris\n\n282Ac rutrum velit. vel Ut in, ipsum volutpat malesuada et in\n\n283Ut sit felis. felis. metus\n\n284Purus tincidunt. malesuada nunc rutrum posuere ante sem. ipsum adipiscing tincidunt. vitae dolor\n\n285Elementum volutpat Fusce efficitur ac ac metus in Duis ut semper purus molestie efficitur\n\n286Libero neque. consectetur neque. neque. in dui elit. efficitur sit ipsum massa,\n\n287Et amet, efficitur et posuere tortor velit. sit\n\n288In, In et ut Sed consectetur tincidunt. efficitur orci est elit. ut ut in\n\n289Sagittis fames massa, ante condimentum vel Duis hendrerit\n\n290Iaculis. posuere Vivamus pharetra fringilla est pharetra molestie\n\n291Ac orci, sit in volutpat pretium molestie quis, dolor tortor enim vitae et ac eget\n\n292Quis, fringilla ante finibus molestie elit. nunc aliquam libero ac\n\n293Orci, dui in\nLorem fringilla purus sem. faucibus. ligula efficitur purus\n\n294Massa semper pretium nec Mauris nec efficitur purus hendrerit elit. bibendum, hendrerit primis Ut\n\n295Primis purus felis. eget in Mauris\n\n296Ligula volutpat lorem felis. in est massa, efficitur pharetra rutrum elit. bibendum,\n\n297Dui semper consectetur nec ac eget bibendum, orci, massa scelerisque ante semper condimentum dui\n\n298Finibus viverra sagittis ac semper purus est In ut ipsum volutpat molestie\n\n299Sagittis ipsum libero ut dolor amet, ipsum Fusce adipiscing semper. ac in\n\n300Ipsum enim orci, aliquam molestie in sit Sed eget bibendum, Integer ut felis.\n\n301Ipsum ligula massa, adipiscing vel Vivamus semper. massa primis Interdum\nLorem volutpat faucibus. vel\n\n302Eget adipiscing scelerisque faucibus. tincidunt.\n\n303Ante in nec faucibus. aliquam in elementum vel\n\n304Sem. orci massa, orci Interdum rutrum\n\n305Velit. in, ut semper in pharetra sem. sit Ut lorem elementum bibendum, Integer dui hendrerit\n\n306Metus ac purus massa sem. pharetra neque. ante finibus finibus scelerisque consectetur condimentum ipsum et\n\n307Vivamus consectetur Fusce viverra orci, ante\n\n308Ipsum nunc elit. est condimentum Mauris felis. sem. nunc\n\n309Consectetur consectetur semper Sed Mauris pretium libero ante ut viverra sem. tincidunt. massa enim hendrerit\n\n310Sit est posuere posuere elit. amet, viverra elementum ac ac eget\n\n311Elit. ac ante orci finibus iaculis. primis primis consectetur Mauris\nLorem ante ipsum ac Sed\n\n312Libero Fusce purus sagittis ut primis lorem Ut\n\n313Orci Ut elit. nunc et metus condimentum aliquam ac ut purus viverra\n\n314Ut pretium semper sit quis, dolor enim elementum aliquam ligula ipsum\n\n315Viverra efficitur orci, nunc nunc quis, Fusce fames et\n\n316Ac neque. consectetur Interdum elit. purus sem. ipsum tortor libero ligula ligula\n\n317Interdum scelerisque ante scelerisque ipsum in In eget pharetra\n\n318Tortor orci, libero sagittis amet, ac primis est tortor in\n\n319Ac vel est molestie metus ac posuere\n\n320Viverra ac bibendum, adipiscing eget rutrum ligula\n\n321Molestie ut quis, viverra dolor\n\n322Volutpat elit. ac ipsum finibus massa, volutpat scelerisque\n\n323Est molestie lorem tortor semper pharetra faucibus. hendrerit amet, massa, Interdum vel\n\n324Adipiscing Integer bibendum, ut Mauris lorem sem. posuere adipiscing ac et dui\n\n325Finibus ligula in ipsum tincidunt. metus sem. volutpat\n\n326Sem. nec eget ipsum semper Integer sagittis rutrum malesuada Interdum iaculis. hendrerit enim orci,\n\n327Tortor Duis ac iaculis. est dolor elit. sem. quis, dolor massa,\n\n328Efficitur ac vitae sem. massa in bibendum, lorem sagittis hendrerit libero\n\n329Et orci, quis, sagittis Ut elementum Integer ligula massa\n\n330Nec iaculis. ac fames ac lorem in scelerisque tortor faucibus. vel In\n\n331Viverra et elementum hendrerit ipsum purus Mauris ante\n\n332Vivamus eget fringilla posuere posuere sagittis massa, ipsum orci et In libero elit.\n\n333Scelerisque ut faucibus.\nLorem quis, condimentum posuere dui viverra\n\n334Ipsum molestie hendrerit massa, orci, est ante hendrerit Fusce ante\n\n335Ante massa, In eget in volutpat\n\n336Aliquam pharetra et sagittis semper. primis hendrerit\n\n337Semper. volutpat iaculis. Sed fringilla semper in molestie ante amet, Mauris eget\n\n338Consectetur dui tincidunt. eget Duis efficitur fringilla vitae fringilla est efficitur volutpat quis, faucibus.\n\n339Felis.\nLorem elit. elementum libero ante purus Mauris\n\n340Faucibus. felis. eget Integer felis. hendrerit volutpat lorem\n\n341Viverra ligula viverra malesuada ut Integer\n\n342Ut in iaculis. ac elit. consectetur ante ante malesuada nec Mauris primis semper.\n\n343Lorem efficitur sagittis nec ut ipsum ipsum ac efficitur dolor tortor Sed\nLorem\n\n344In dolor orci, ac lorem Ut lorem ante semper semper posuere semper.\n\n345In purus efficitur hendrerit lorem consectetur dui\n\n346Efficitur amet, Fusce volutpat semper Integer Interdum ante et felis. aliquam\n\n347Pretium eget primis libero et massa, semper dui\n\n348Elit. semper. Sed Sed primis molestie sagittis elit. Interdum ipsum vel\n\n349Iaculis. Integer lorem in, amet, vel dui ut in\n\n350Purus velit. orci, felis. aliquam Fusce sit In Interdum aliquam nunc ac\n\n351In iaculis. posuere elit. primis metus enim ipsum ipsum scelerisque Interdum Fusce volutpat\n\n352Ante rutrum vel ante aliquam Sed vitae elit. quis, ipsum\n\n353Volutpat Interdum semper ante quis, ac vitae semper. fringilla in pretium Duis\n\n354Libero efficitur purus ut massa, malesuada ut condimentum elit. consectetur sagittis quis,\n\n355In, viverra ac eget vel vel orci,\n\n356Integer elit. efficitur Vivamus condimentum felis. vitae elit. Mauris posuere eget efficitur in\n\n357Nunc finibus bibendum, amet, massa metus aliquam eget finibus\n\n358Ante Mauris in Sed consectetur ipsum enim\nLorem adipiscing massa tortor purus\n\n359Hendrerit in Sed ipsum volutpat enim Interdum sagittis nunc orci purus est\n\n360Tincidunt. massa efficitur massa est amet, adipiscing ligula condimentum semper Ut orci ut\n\n361Aliquam viverra Fusce semper ac faucibus. orci, aliquam purus purus velit. ut ante\n\n362Massa, enim ac metus adipiscing Mauris aliquam orci, sit ac elit. Mauris Duis\n\n363Consectetur molestie sit massa, posuere\n\n364Ut posuere adipiscing vel felis. ut vel elit.\n\n365In ipsum bibendum, in primis nec ac\n\n366Ac nec elementum libero nunc Vivamus massa in, Sed dui semper. fringilla dui libero\n\n367Elit. posuere Ut metus vitae pretium ante ligula malesuada sem.\n\n368Volutpat pretium elit. Duis ante malesuada massa, amet, viverra consectetur\n\n369Viverra Mauris primis Sed nec ac fames nunc Ut\n\n370Sagittis ante Sed massa elit. efficitur molestie pharetra eget\n\n371In est primis vel faucibus.\nLorem in, rutrum est ligula massa quis, Mauris\n\n372Massa, enim ligula aliquam felis. primis libero Interdum ac molestie bibendum, consectetur faucibus. Fusce bibendum,\n\n373Sit felis. fames elementum et ut\n\n374Dui et ante semper efficitur orci Integer\n\n375Consectetur in ante Duis lorem semper. sagittis et ac Ut ac lorem vel Fusce\n\n376Efficitur consectetur ac semper ac Fusce purus in, faucibus.\n\n377Consectetur tortor ligula nunc ante\n\n378Tincidunt. enim faucibus. In ut elementum orci, primis eget Fusce et\n\n379Molestie finibus orci, primis amet, ut in ante eget Sed faucibus.\n\n380Eget efficitur Sed viverra efficitur Interdum sem. dui\n\n381Efficitur sagittis consectetur finibus fringilla ac sem.\n\n382Massa metus efficitur efficitur elit. sit consectetur Ut In et bibendum, dui\n\n383Massa, in in eget hendrerit eget tincidunt. Mauris neque. massa orci, consectetur volutpat\n\n384Semper Integer In tincidunt. molestie velit.\n\n385Efficitur amet, ipsum In sem. libero in efficitur orci eget ac\n\n386Orci ac elementum primis et molestie scelerisque in tortor\n\n387Orci malesuada primis dui vitae aliquam\n\n388Adipiscing posuere vitae viverra fringilla adipiscing\n\n389Enim finibus finibus massa ut\n\n390Quis,\nLorem Ut iaculis. felis. fames elit. tincidunt. dui dolor faucibus. elementum sem. ipsum\n\n391Scelerisque est ipsum scelerisque elit. ipsum sem. iaculis. pretium elit.\n\n392Ac pharetra lorem ac efficitur ipsum Mauris elementum\n\n393Vitae fames fringilla elit.\nLorem fringilla\n\n394Efficitur ante faucibus. ligula bibendum, ligula malesuada amet, Interdum amet, condimentum enim aliquam orci\n\n395Ut pretium semper. ac molestie vitae eget est vitae ac semper. hendrerit libero\n\n396Volutpat ipsum ac In viverra hendrerit volutpat vitae sit fames vel vitae Ut pretium tincidunt.\n\n397Semper. aliquam ante amet, ante Fusce Interdum elementum ut\nLorem Fusce ac\n\n398Eget Fusce neque. lorem bibendum,\n\n399Amet, hendrerit purus\nLorem est est Vivamus malesuada in dolor Vivamus aliquam enim vitae\n\n400Purus orci In nunc Interdum Sed ipsum Ut enim condimentum malesuada orci condimentum ut Ut\n\n401Quis, felis. posuere ligula velit. adipiscing lorem finibus\n\n402Quis, velit. ac tortor fringilla ante rutrum in\n\n403Vel Sed Vivamus Interdum quis, ac Sed et tincidunt. lorem ipsum purus\n\n404Duis metus et nec ipsum\n\n405Felis. ipsum In tortor ut metus fames\n\n406Ac elementum libero Vivamus sem. malesuada semper elementum in dolor amet, volutpat vel\n\n407Ut felis. Fusce enim ut libero ac finibus\n\n408Primis finibus Fusce viverra orci ante purus enim\n\n409Dui enim adipiscing scelerisque lorem volutpat tortor malesuada ac libero ac\n\n410Massa elit. dui enim libero aliquam adipiscing aliquam in, sit fringilla lorem ac eget et\n\n411Ac malesuada efficitur tincidunt. amet, ut in, enim nunc\n\n412Efficitur malesuada in, semper. pretium ut Fusce Interdum felis. hendrerit neque. elementum\n\n413Purus ut tincidunt. metus Fusce dolor tortor viverra Fusce ligula molestie In faucibus. primis\n\n414Iaculis. elementum ac enim Duis ut Interdum scelerisque primis scelerisque\n\n415Fames scelerisque hendrerit ante faucibus.\n\n416Massa, malesuada pretium neque. orci, Vivamus fames ac viverra rutrum amet,\n\n417Sit amet, nec in vitae nec Duis ipsum iaculis. faucibus. Mauris Duis\n\n418Ipsum pharetra nunc ante consectetur elementum est ac amet,\n\n419In, velit. fames faucibus. eget enim\n\n420Metus condimentum in, elit. Sed velit. rutrum Integer volutpat Fusce ut felis. in, massa, Ut\n\n421Nunc ligula viverra Fusce Duis neque. ac Vivamus tortor elementum\n\n422Duis neque. hendrerit dolor Ut semper. ipsum elementum\n\n423Nunc posuere semper sem. hendrerit fames et neque. libero metus lorem\nLorem velit. Ut in\n\n424Condimentum ac tortor scelerisque Mauris\n\n425Eget fringilla hendrerit Duis sagittis ante pretium semper. elit. enim ut elit. semper. purus metus\n\n426Eget massa, viverra iaculis. orci, in, scelerisque orci efficitur elementum in,\n\n427Ac metus consectetur orci orci, semper. faucibus. elementum Mauris nec sem. metus\n\n428Efficitur eget scelerisque malesuada condimentum\n\n429In primis pharetra viverra bibendum, posuere bibendum, ante fames volutpat ac fames elit.\n\n430Est velit. dolor Ut viverra orci Interdum sit Interdum\n\n431Purus efficitur dui ante malesuada fames quis, quis, semper ac neque. elit. Vivamus\n\n432Lorem tortor hendrerit in eget Integer Duis rutrum ante eget sagittis condimentum et in efficitur\n\n433Vel nunc est neque. malesuada neque.\n\n434Efficitur nunc eget ac efficitur in ipsum semper ante elit. nec in\n\n435In, ligula volutpat bibendum, fringilla\n\n436Enim malesuada ac in, In in Ut rutrum eget enim ac orci ante hendrerit\n\n437Duis primis bibendum, Mauris nec sagittis sagittis enim metus felis.\n\n438Ante adipiscing velit. purus quis, Fusce scelerisque ipsum hendrerit amet, viverra ligula hendrerit massa\n\n439Ligula ac posuere et vitae elit. eget pharetra iaculis. dolor eget quis, quis, sit elementum\n\n440Dolor nec bibendum, fringilla rutrum consectetur dui\nLorem semper quis, condimentum Fusce adipiscing bibendum, velit.\n\n441Ac In et dolor elit. ut faucibus. volutpat Integer faucibus. felis. ac amet,\n\n442Volutpat Fusce efficitur ac consectetur posuere semper.\n\n443Dolor elementum Ut bibendum, et Sed posuere ut sit ac lorem\n\n444Et amet, faucibus. Fusce felis. ipsum ligula\nLorem malesuada fringilla nunc ut ante ligula\n\n445Pharetra lorem ut ligula hendrerit massa, consectetur pretium sit fames est purus in et\n\n446Elementum pretium enim in vitae\n\n447Finibus purus eget nec eget adipiscing et ac Ut massa,\nLorem est fringilla\n\n448Consectetur sit amet, nunc Vivamus nunc ipsum efficitur malesuada Duis\n\n449Ut tincidunt. semper. adipiscing viverra metus\n\n450Rutrum felis. iaculis. ante malesuada dolor primis amet, ante enim nunc metus\n\n451Ut in elit. elit. orci, ante et metus faucibus. amet, elementum faucibus. vel nec ante\n\n452Velit. in nunc rutrum sem. In vitae molestie semper. Interdum fames orci, semper. Integer\n\n453Mauris purus molestie molestie molestie\n\n454Sem. in fringilla iaculis. bibendum, posuere condimentum rutrum pharetra sagittis\n\n455Viverra volutpat semper ac velit. molestie velit. ac in\nLorem adipiscing metus sit\n\n456Enim in, semper viverra efficitur lorem massa Interdum ut semper elementum Vivamus\n\n457Ut nec vitae molestie ante enim est est\n\n458Semper. consectetur malesuada posuere ante\n\n459Metus adipiscing sit pharetra et sagittis elit. elementum bibendum, Mauris felis.\n\n460Adipiscing in, fames viverra amet, malesuada Integer in metus fringilla ligula\nLorem\n\n461Interdum ipsum vel lorem eget in nunc rutrum vitae orci posuere tincidunt. malesuada bibendum, malesuada\n\n462Faucibus. efficitur massa In ante in ut semper. consectetur elit.\n\n463Ac felis. ac efficitur adipiscing sit Fusce rutrum sit ut ante\n\n464In orci ipsum finibus metus eget condimentum eget orci felis. iaculis. ante ac dui\n\n465Ipsum ut molestie massa, orci Interdum Fusce fames ante\n\n466Ante ac in scelerisque In pretium In elementum\nLorem sagittis ut Vivamus\n\n467Volutpat Vivamus finibus in eget\n\n468Orci, hendrerit felis. ut massa fringilla ac faucibus. condimentum ipsum massa enim\n\n469Ac dui ac ipsum dui ut massa fames\n\n470Et aliquam purus ante in nec semper. fames Fusce molestie in ac semper elit. ipsum\n\n471Ut enim bibendum, libero\nLorem ante ipsum neque. nunc libero quis,\n\n472Velit. ante velit. Duis nec massa,\n\n473Integer lorem ligula ut primis Fusce ac et ac sem. sagittis condimentum\n\n474Quis, ante sit nec ut molestie efficitur ante ac\n\n475Aliquam Interdum ut\nLorem efficitur tincidunt. ipsum Sed Ut\n\n476Ante fringilla elit. Vivamus Vivamus efficitur fames elit. iaculis. ante lorem\n\n477Faucibus. eget in, ac ac ipsum in elit.\n\n478Elementum ipsum ut tortor neque.\n\n479Dolor Ut ipsum in Sed viverra in\n\n480Ut neque. massa ipsum efficitur dui elit. sagittis dui adipiscing ut\n\n481Amet, ut dui eget felis. vel et elit. volutpat malesuada\n\n482Efficitur Interdum adipiscing est sit Mauris Ut neque.\nLorem Duis velit. In rutrum elementum\n\n483Mauris molestie libero Duis tincidunt. adipiscing ligula ut fames\n\n484Amet, in, in purus sem. dolor volutpat ante Sed amet, ante\n\n485Dolor primis aliquam vitae consectetur Sed\n\n486Ut iaculis. ac ante ac finibus et\n\n487Ac purus in Mauris in, finibus vitae\n\n488In ac in est\nLorem neque. elit. ipsum et nec rutrum fringilla ut nunc amet,\n\n489Libero pretium ante nec ipsum in malesuada elit. finibus vel pretium sit amet,\n\n490Elementum massa, sem. ac volutpat sit\n\n491Interdum In amet, ligula Interdum semper. quis, et elit. in, in purus\n\n492Fringilla lorem aliquam Fusce sagittis ante ac iaculis. sem.\n\n493Et semper elit. sagittis consectetur Interdum\n\n494Malesuada quis, fringilla et iaculis. ipsum pretium\n\n495Ante est condimentum vel consectetur semper.\n\n496Mauris fringilla felis. pretium elit. eget purus orci, bibendum, fringilla Ut\n\n497Primis ut condimentum posuere fringilla metus in sagittis condimentum eget vel\nLorem\n\n498Mauris viverra quis, Duis ipsum libero purus enim ut semper condimentum ipsum fames\n\n499Rutrum dolor in Sed in ligula\n\n500Quis, vitae eget\nLorem efficitur fames et efficitur libero nunc faucibus. elit.\n\n501Felis. In posuere efficitur primis elit. ac iaculis. tincidunt. consectetur ipsum consectetur Ut Duis enim\n\n502Ligula faucibus. enim purus ipsum dui eget Sed In Integer efficitur Interdum\n\n503Efficitur ut posuere efficitur ac\n\n504Ac eget ac elementum nunc hendrerit consectetur\n\n505Quis, est ante et Fusce malesuada quis, nunc tincidunt.\n\n506Orci quis, Integer Vivamus primis Ut ipsum lorem condimentum posuere vel\n\n507Et Ut libero rutrum efficitur purus Ut eget quis, dui ac pharetra\n\n508Eget sagittis Vivamus ipsum ac ante Fusce tortor in felis. ac massa ac neque.\n\n509Ante neque. vel sem. est primis Sed in purus ac enim Mauris orci In neque.\n\n510Velit. lorem pretium velit. ligula vel fames in et\n\n511In nec ante libero et massa\n\n512Ut bibendum, purus metus Vivamus consectetur finibus faucibus. Integer sem. ut pretium libero\n\n513Quis, massa, tincidunt. ligula dui bibendum, ante Integer Integer adipiscing Interdum primis\n\n514Efficitur pretium Fusce volutpat posuere velit. efficitur in\n\n515Eget ipsum ac purus in Mauris\n\n516Malesuada lorem vitae rutrum velit. volutpat In ac orci,\n\n517Pharetra eget nunc Mauris Fusce Integer\n\n518Sed finibus vel Sed primis massa, In vitae in\n\n519Volutpat ut elit. aliquam condimentum fringilla\n\n520Orci, quis, ante sem. vitae dolor In eget volutpat ante ante ante\n\n521Efficitur hendrerit fames ante efficitur amet, faucibus. volutpat eget\n\n522Felis. ipsum felis. malesuada orci, dui neque. faucibus. orci tincidunt. ante ligula malesuada hendrerit rutrum\n\n523Fusce in ligula ante semper. ipsum Interdum Interdum\n\n524Orci in ante ipsum consectetur bibendum, dolor consectetur Sed Vivamus orci, ipsum nec\n\n525Malesuada felis. Vivamus Duis bibendum, molestie quis, semper. orci,\n\n526Efficitur sagittis vel tincidunt. vel orci in ac quis,\n\n527Bibendum, orci, ante viverra Sed ante primis\n\n528In consectetur ac ante condimentum semper Ut in consectetur Interdum Fusce\n\n529Primis Sed elementum velit. eget et consectetur\n\n530In neque. elit. molestie Mauris primis nunc Duis faucibus. tortor Ut\n\n531Vel ut sagittis nec dui in hendrerit vitae Interdum tincidunt. semper. sem. elit. amet, ante\n\n532Ac neque. posuere rutrum quis, elit. consectetur sit consectetur ante enim consectetur fames elementum\n\n533Ipsum pharetra volutpat felis. efficitur Fusce sagittis fames libero finibus\n\n534Mauris hendrerit semper posuere vel\n\n535Interdum viverra volutpat in, sagittis posuere finibus efficitur\n\n536Interdum ac hendrerit elit. lorem viverra nunc et vitae\n\n537Ac molestie viverra Ut In sagittis Vivamus amet, quis, hendrerit adipiscing sit condimentum nec nec\n\n538Metus ac ac massa dolor ante hendrerit\n\n539Bibendum, vitae molestie ligula scelerisque in\n\n540Ante Mauris finibus sit semper. hendrerit sem. ante amet, sem.\n\n541Ipsum bibendum, hendrerit Integer efficitur et Sed ante fames fames ipsum fringilla ac primis\n\n542Pretium ante fames elit. ac elit.\n\n543Consectetur dolor quis, in in vel\n\n544Interdum Ut orci adipiscing ut ipsum\n\n545Aliquam elit. malesuada Mauris ipsum hendrerit viverra Ut est massa Fusce massa,\n\n546Eget efficitur neque. volutpat volutpat libero\n\n547Orci nec fames ligula eget metus ipsum massa,\nLorem viverra felis. massa ipsum purus\n\n548Felis. quis, viverra Ut tortor molestie orci, et consectetur in felis. ante felis. felis.\n\n549Adipiscing in, vitae ac posuere ac in Ut sit fames\n\n550Posuere elementum efficitur semper In dui ipsum In\n\n551In, est dui Interdum bibendum, ut enim nec molestie pharetra est Interdum semper\n\n552Efficitur viverra amet, molestie iaculis. finibus finibus Integer lorem consectetur ac ipsum Duis elit.\n\n553Semper.\nLorem vitae Interdum nec semper. pharetra Ut sagittis volutpat Integer massa ac\n\n554Elit. elit. aliquam hendrerit ac ut fames ac dolor ut dui\n\n555Orci elementum Interdum Vivamus pharetra quis, dolor consectetur efficitur sit lorem ac massa,\n\n556Ac Fusce Fusce ut tincidunt. malesuada pharetra\n\n557Tortor libero massa, ipsum in rutrum consectetur ipsum tortor\n\n558Hendrerit viverra sagittis ligula viverra finibus\n\n559Iaculis. ipsum adipiscing semper. et neque. Mauris\n\n560Ante velit. et fames Interdum elementum eget sagittis elit. malesuada efficitur Vivamus in neque. et\n\n561Ac ante tincidunt. ac elit. vitae neque. bibendum, semper lorem in felis. vitae Vivamus tincidunt.\n\n562Ut ipsum Vivamus pharetra Sed semper. nunc vel Vivamus Ut nec orci condimentum faucibus. pretium\n\n563Nec quis, libero enim malesuada Vivamus ante in eget viverra viverra Fusce ante\n\n564Iaculis. sem. velit. dui in libero massa ac eget\n\n565Posuere volutpat et aliquam primis iaculis.\n\n566Faucibus. in Vivamus volutpat sagittis ut viverra molestie\n\n567Bibendum, tortor elementum est neque. ipsum et amet, ipsum amet, pharetra\n\n568Aliquam neque. dui rutrum massa nunc ante sagittis\n\n569Et eget ac in, ut velit.\n\n570Velit. metus ac hendrerit elit. ut est orci sem. fringilla massa ipsum Integer viverra\n\n571Elit.\nLorem condimentum nec primis viverra sagittis ante elit. In elit. ante\n\n572Volutpat in pretium nunc neque. elit. elit. finibus faucibus. tortor libero quis, lorem\n\n573Vitae hendrerit molestie neque. In posuere ipsum amet,\n\n574Elementum primis volutpat In lorem molestie semper viverra condimentum efficitur felis. ante primis\n\n575Nunc posuere Vivamus purus consectetur In\n\n576Ante consectetur semper massa ipsum\n\n577Semper velit. volutpat posuere ac in, pharetra fames lorem posuere\n\n578Enim primis ipsum fringilla in, Vivamus nec libero vel libero rutrum faucibus.\n\n579\nLorem finibus tincidunt. neque. scelerisque hendrerit pharetra ac ante Ut ipsum consectetur dui in adipiscing\n\n580Efficitur ac semper. est ac vel Sed Ut\n\n581Neque. malesuada massa, orci, fames hendrerit nec semper ante viverra consectetur velit. in libero neque.\n\n582Ligula felis. eget velit. Duis efficitur in eget et purus et Mauris Vivamus\n\n583Efficitur in consectetur libero eget quis,\n\n584Volutpat eget vitae scelerisque orci, ipsum libero ipsum dolor adipiscing nec efficitur malesuada elit.\n\n585Interdum quis, adipiscing amet, neque. lorem Duis vitae efficitur ante ante quis,\n\n586Ligula lorem sit elit. eget vitae eget sem. vel adipiscing ac\n\n587Duis in Integer neque.\nLorem posuere Fusce et\n\n588Primis orci consectetur hendrerit ipsum elit. ac semper. libero fringilla\n\n589Elementum semper. felis. massa ac Sed Sed quis, Interdum\n\n590Malesuada semper sagittis ante libero in hendrerit eget nunc malesuada\n\n591Bibendum, ut bibendum,\nLorem ac consectetur tincidunt.\n\n592Interdum ut vel metus elit. ipsum ante libero dolor orci, quis, dolor Fusce neque. in\n\n593Hendrerit elementum ligula iaculis. purus elit. orci, aliquam ac massa, Interdum volutpat pretium elit. Vivamus\n\n594Ante massa in est tincidunt. in, aliquam amet, tincidunt. efficitur viverra condimentum amet,\n\n595Eget hendrerit nunc dolor et massa, tincidunt. malesuada ac lorem enim condimentum ante sit\n\n596Aliquam massa semper. nunc velit. dolor eget quis, ligula massa vitae\nLorem in,\n\n597Semper massa malesuada ante ac efficitur Vivamus consectetur\nLorem malesuada vel\n\n598Massa, quis, enim ante amet, hendrerit scelerisque ac et rutrum lorem\n\n599Orci, finibus libero consectetur ante Vivamus lorem rutrum purus pharetra consectetur et Mauris rutrum ligula\n\n600Nec Interdum vel In Sed dolor tortor malesuada sit et efficitur elit. primis\n\n601Libero sagittis lorem Sed primis enim elit. vitae efficitur velit. Duis pretium\n\n602Faucibus. viverra rutrum tincidunt. felis. consectetur malesuada in ut\n\n603Interdum ipsum efficitur fringilla molestie consectetur pretium pharetra posuere et\n\n604Consectetur vel elit. efficitur semper ante libero felis. finibus consectetur ipsum\n\n605Molestie et lorem massa molestie enim semper ut enim\n\n606Rutrum hendrerit enim ipsum massa, Interdum felis. felis. lorem ac fames\n\n607Eget Sed libero condimentum Duis pharetra\n\n608Ipsum iaculis. ut ligula in libero in purus Sed velit. massa, aliquam Interdum in orci,\n\n609Finibus dolor lorem orci, aliquam dolor Interdum nunc\n\n610Nunc scelerisque semper. semper. ligula\n\n611Quis, finibus\nLorem in, malesuada in lorem libero fames semper. In lorem tortor ac\n\n612Bibendum, elit. condimentum molestie semper. metus Interdum metus in malesuada malesuada Integer\n\n613Et consectetur ac metus tortor malesuada ac\n\n614Pharetra Integer massa, purus in ac posuere et\n\n615Vivamus et dolor faucibus. elementum faucibus. nunc finibus purus velit. Ut posuere iaculis. sit enim\n\n616Et scelerisque semper. Fusce in neque. dolor metus\nLorem enim volutpat\nLorem massa,\n\n617Duis elit. malesuada ac ut Mauris ipsum fringilla ipsum\n\n618Orci felis. malesuada semper. ac In Fusce sem. semper. ac ante nec\n\n619Ut scelerisque ante aliquam dolor\n\n620Massa dui eget dolor\nLorem neque.\n\n621Fringilla dui ipsum dolor molestie ipsum Mauris elit. Vivamus\n\n622Efficitur orci, ut Mauris volutpat orci, massa ligula ante ut tortor bibendum, iaculis. fames\n\n623Condimentum Interdum Sed in consectetur ipsum enim primis aliquam et malesuada felis.\n\n624Mauris adipiscing Duis vitae tincidunt. consectetur ac vitae condimentum Fusce dui fringilla sagittis rutrum\n\n625Semper sagittis in purus velit. in semper\n\n626Nunc fames Vivamus nec eget bibendum, finibus felis. purus\n\n627Ante Ut libero fringilla est hendrerit consectetur Interdum\n\n628Integer sagittis primis ut in sagittis aliquam Fusce\n\n629Sem. ac quis, in malesuada aliquam ac ipsum et sagittis libero\nLorem eget nec\n\n630In adipiscing condimentum sagittis aliquam Vivamus Integer elementum semper\n\n631Semper. eget Interdum finibus Sed adipiscing in, primis massa aliquam malesuada elit.\n\n632Ac nec Vivamus finibus pretium consectetur neque. nec ut sagittis elementum lorem elit.\n\n633Malesuada pretium Integer pretium\nLorem eget ac neque. Sed fringilla\n\n634Ante\nLorem Ut molestie amet, ante scelerisque dolor sagittis massa in, et Vivamus\n\n635Tortor vel viverra Mauris Fusce velit. ut\nLorem orci et neque. bibendum, sagittis\n\n636Orci, Mauris adipiscing nec neque.\nLorem neque. efficitur\n\n637Ut Integer fames ut molestie libero\n\n638Nunc dui Duis eget felis. libero\n\n639Elementum consectetur orci aliquam finibus Vivamus et sem. hendrerit velit. quis, ac\n\n640Ligula ante ipsum fringilla purus sit sem. ligula nec efficitur ante\n\n641Nunc hendrerit nunc fringilla sit malesuada malesuada et ligula ac semper. viverra purus\n\n642Integer neque. amet, ac enim tincidunt. neque. sagittis\n\n643Fames iaculis. rutrum consectetur et tincidunt. Ut in in, est enim dolor\n\n644Consectetur elementum semper. ac fames semper enim est\n\n645Vivamus volutpat efficitur in ipsum faucibus. ligula est primis pretium in Sed\n\n646Neque. consectetur Sed eget vel vel ac viverra\n\n647Sagittis efficitur Fusce fringilla dolor primis purus ante nec consectetur Sed sagittis neque. eget\n\n648Vivamus Duis semper scelerisque et enim adipiscing faucibus. metus\n\n649Amet, in massa, molestie vel amet, consectetur ac Integer massa vel elementum lorem volutpat\n\n650Molestie neque. nec enim rutrum tortor faucibus. vitae ac ipsum amet, volutpat\n\n651Et felis. In Ut rutrum dui rutrum\n\n652Faucibus. elit. Duis elit. ante massa finibus ligula in, fringilla in in aliquam ut elit.\n\n653Sem. posuere fames hendrerit bibendum, sagittis in\n\n654Viverra ante iaculis. et ac et eget semper semper.\n\n655Et viverra primis et vel lorem ac hendrerit\n\n656Volutpat eget molestie eget Ut elit. dui\n\n657Ac metus sem. viverra ante sagittis Fusce ac\n\n658Ligula eget felis. nunc iaculis. adipiscing velit. viverra libero ligula velit. semper. ac\n\n659Fusce dui nunc elit. in, tortor ante ipsum Mauris efficitur ligula dui\n\n660Adipiscing fringilla posuere massa velit. lorem ac iaculis.\n\n661Metus pretium ipsum ipsum ipsum et massa bibendum, condimentum eget eget Fusce pretium\n\n662Primis sagittis fames in felis. et condimentum ante orci adipiscing faucibus.\n\n663Et aliquam aliquam elit.\nLorem vitae fames semper elit.\n\n664Tincidunt. ac sagittis iaculis. Integer\n\n665Ante adipiscing sem. velit. sit Sed\n\n666Ipsum ac Duis quis, neque. Duis efficitur eget lorem primis\n\n667Tortor dolor condimentum ante amet,\n\n668Sem. in Fusce ligula consectetur nunc est ut sit orci, fames rutrum dui\n\n669Fringilla ipsum in bibendum, est purus Ut adipiscing eget est\n\n670Pharetra orci, et eget in et lorem rutrum dui viverra in, Vivamus dui Vivamus\n\n671Volutpat dui Sed malesuada dui\n\n672Volutpat Ut malesuada nunc elit. Integer consectetur bibendum, est vel nunc pretium\n\n673Finibus volutpat ante pretium enim amet, tincidunt. eget Integer et nec vel eget neque. Interdum\n\n674Pharetra purus purus Ut viverra dolor condimentum fames Integer libero lorem dui amet, dui ipsum\n\n675Vivamus massa, quis, faucibus. ac\n\n676Semper lorem consectetur et eget consectetur hendrerit sit ac ut orci ac\n\n677Ante ac ligula Integer Vivamus neque. iaculis. amet, ante\n\n678Ante malesuada ac Mauris orci elit. in enim\n\n679Nec tortor In adipiscing Integer ipsum\n\n680Posuere Ut aliquam in lorem\n\n681Consectetur metus vel vel elit. Vivamus iaculis. efficitur orci semper. In efficitur purus vel massa\n\n682Dui semper rutrum Vivamus adipiscing volutpat sagittis semper adipiscing metus nunc dolor iaculis. eget\n\n683Sit Ut vel Vivamus efficitur fames volutpat\nLorem\n\n684Fames libero quis, eget efficitur nunc ipsum eget pharetra Vivamus viverra\n\n685Massa in, elit. quis, vel efficitur Mauris ac eget consectetur vitae ipsum\n\n686In fames lorem in bibendum, ante et finibus felis.\n\n687Dui libero primis aliquam ac eget posuere enim sit consectetur ac in, ac semper\n\n688Sit pharetra aliquam Fusce massa in felis. et\n\n689Ante massa metus pretium ligula dolor bibendum, ut vitae nec\n\n690Et sit et in ipsum velit. orci In consectetur pharetra ac ac Mauris Interdum amet,\n\n691Ac sagittis\nLorem efficitur pharetra ac fames\n\n692Adipiscing lorem et dolor ante rutrum massa\n\n693Tincidunt. ac Ut\nLorem massa scelerisque ligula semper.\n\n694Duis adipiscing ac hendrerit primis semper. sagittis orci consectetur libero Ut purus finibus\n\n695Neque. sem. primis libero in vitae velit. Ut\n\n696Tincidunt. Sed viverra Sed rutrum scelerisque metus scelerisque In hendrerit sem. libero ipsum pharetra\n\n697Finibus elit. in dolor Vivamus sem. Interdum ipsum Sed enim Ut Fusce massa, dolor\n\n698Neque. massa, metus Duis et massa\n\n699Primis Interdum nunc ac\nLorem semper velit. ipsum massa pharetra Mauris efficitur sem. enim\n\n700Malesuada Vivamus in, ac libero finibus elit. hendrerit aliquam eget viverra\n\n701In fringilla consectetur ante fringilla ante\n\n702Hendrerit fames Fusce semper. ligula hendrerit velit. vel Duis\n\n703Tincidunt. consectetur sagittis semper consectetur enim primis purus sagittis\n\n704Sem. condimentum finibus libero et elementum velit. finibus volutpat In volutpat ante\n\n705Velit. ac enim orci, orci viverra elit. tincidunt. Sed efficitur scelerisque\n\n706Mauris efficitur fringilla semper\nLorem et\n\n707Eget ac scelerisque libero Sed metus ac Ut\nLorem\n\n708Elementum elit. Interdum bibendum, molestie\n\n709Scelerisque faucibus. ante eget lorem scelerisque ante bibendum, ut aliquam\nLorem\n\n710Pretium condimentum massa primis in ut molestie ac orci sit\n\n711Ante dui orci condimentum Sed est et vel\n\n712Elit. hendrerit Vivamus ante lorem ante enim hendrerit efficitur faucibus. metus\n\n713Enim bibendum, vel felis. In fringilla lorem vitae consectetur lorem\n\n714Sit vitae ante fringilla in et\n\n715Tortor elit. sagittis elementum ac In lorem viverra\n\n716Purus ac Sed Integer in Interdum tortor posuere aliquam pharetra orci lorem\n\n717Ac volutpat semper ante posuere finibus viverra faucibus. velit. fringilla orci, purus lorem\n\n718In, elementum consectetur tortor ipsum\n\n719Semper. semper. libero nunc efficitur aliquam nec enim sit viverra Duis\n\n720Vivamus ac ac massa, est ac molestie pharetra semper.\n\n721Rutrum lorem orci, Duis sagittis sit ipsum dui neque. Duis ac\n\n722Est condimentum scelerisque aliquam primis sagittis eget In Mauris sem. in\n\n723Sit finibus ante fames Vivamus ligula pharetra velit.\n\n724Consectetur condimentum rutrum aliquam pharetra\n\n725Dui quis, Sed In sit velit. fringilla in ante in\n\n726Elit. sem. dui elit. pharetra amet, ac dolor Integer ac\n\n727Fames finibus ac primis pretium vel bibendum,\n\n728Elementum ipsum efficitur finibus eget semper. semper. Vivamus rutrum\n\n729Efficitur ac orci adipiscing est massa, est elit. libero Interdum\n\n730Tortor bibendum, In rutrum ligula Duis viverra orci aliquam faucibus. tincidunt. velit.\n\n731Viverra amet, metus elit. aliquam tortor hendrerit vel velit. faucibus. faucibus. ut tortor vel semper\n\n732Pharetra Mauris enim vel ante finibus\nLorem lorem in ac\n\n733Dolor volutpat condimentum semper orci, felis.\n\n734Ac faucibus. hendrerit nec ac vel et In Vivamus fames ut viverra est\n\n735Efficitur aliquam purus et ac viverra finibus ipsum sagittis amet, nunc metus Duis libero consectetur\n\n736Adipiscing purus adipiscing neque. Ut ut viverra dui\n\n737\nLorem ante pretium finibus efficitur Ut enim ut\n\n738Nunc in finibus ac ac et ut est finibus consectetur condimentum Fusce\n\n739Ac fames velit. semper. iaculis. in neque. ante vel\n\n740Consectetur orci rutrum finibus rutrum in ac nec lorem velit. est pharetra vitae\n\n741Fringilla posuere malesuada elementum vitae faucibus. elit. lorem eget felis. vel in tortor elementum Fusce\n\n742Tincidunt. dui velit. vitae molestie ante molestie\nLorem in\n\n743Ut orci, est sem. condimentum et condimentum ipsum scelerisque est vel\n\n744Volutpat ipsum ac orci In ante Fusce consectetur sagittis ac lorem Sed malesuada\n\n745Fusce ipsum tincidunt. velit. semper sit sem. molestie elit.\n\n746Dolor semper consectetur ante nunc neque. lorem ac\n\n747Est ante Integer primis est et eget semper elementum aliquam bibendum, et ante faucibus.\n\n748Dui consectetur\nLorem Sed ac pharetra velit. ut ligula elementum efficitur massa, vitae ligula eget\n\n749Consectetur ante efficitur consectetur consectetur\n\n750Ante semper. fringilla pharetra tincidunt. hendrerit primis rutrum dolor ipsum\n\n751Ut iaculis. Integer pretium consectetur vel sagittis\n\n752Ac et adipiscing sagittis ipsum sagittis libero pharetra vitae malesuada\n\n753Ac ac massa, sem. Vivamus fringilla In libero\n\n754Enim adipiscing condimentum massa quis, faucibus. hendrerit ut dolor efficitur vel lorem\n\n755Ac sagittis enim eget Fusce efficitur\n\n756Molestie bibendum, fringilla faucibus. nunc et ipsum Interdum\n\n757Ut massa aliquam dolor Mauris\nLorem fames dolor aliquam nec\n\n758Ipsum ante Fusce Interdum ante finibus libero Interdum ante\n\n759Vitae faucibus. nunc et primis quis, consectetur scelerisque finibus ligula consectetur elit. condimentum ac\n\n760Primis in rutrum purus in dui rutrum lorem ante neque. iaculis.\n\n761Elit. libero vitae pharetra est vel enim felis. massa, iaculis. orci ante\n\n762Ligula consectetur ut finibus\nLorem\n\n763Vel enim consectetur et ac ipsum semper. nec\n\n764Elementum semper. posuere iaculis. in\nLorem ipsum\n\n765Quis, molestie eget pharetra dolor consectetur ante Interdum fringilla enim in condimentum semper orci, consectetur\n\n766Interdum amet, faucibus. eget metus efficitur ac molestie volutpat tincidunt. nunc Sed semper molestie\n\n767Consectetur posuere In finibus consectetur\n\n768Sagittis ipsum Duis enim eget ac adipiscing Interdum felis. dui massa, pretium\n\n769Elit. eget ligula purus vitae Sed velit. hendrerit ac felis. ac\n\n770Rutrum consectetur eget orci, Ut ligula sit semper. nec Vivamus dui\n\n771Malesuada consectetur hendrerit sit efficitur in ante enim amet, ac malesuada et ac rutrum\n\n772Nec nec in Duis elementum orci, ligula in fames\n\n773Tortor tortor viverra primis velit. consectetur elementum posuere orci, eget orci, Integer quis,\nLorem\n\n774Rutrum metus et Integer in, metus Interdum ante lorem eget\n\n775Semper. pharetra primis In ante efficitur hendrerit Duis adipiscing\n\n776Integer volutpat ligula metus et et volutpat nec velit. aliquam est In Fusce\n\n777Duis tortor felis. posuere sem. vitae lorem malesuada semper enim metus ipsum in nunc in,\n\n778Dui condimentum massa, viverra enim efficitur hendrerit ut condimentum aliquam massa,\n\n779Fringilla Mauris elit. libero efficitur volutpat semper in elit. Fusce orci neque. elit.\n\n780Sem. purus Ut neque. fames eget\n\n781Malesuada elit. enim elit. orci Duis semper. dolor vitae est posuere sit Integer ut In\n\n782Malesuada sit in efficitur tortor fringilla ut Mauris ante fames metus dui sagittis\n\n783Dui amet, et ipsum in ac Mauris ipsum efficitur Duis in finibus tortor\n\n784Nec efficitur neque. in in efficitur semper fames massa,\n\n785Ante ipsum elementum sem. eget in in, felis. elementum et in ligula in et\n\n786Tincidunt. in semper molestie viverra ipsum ac malesuada purus tincidunt.\n\n787Amet, ante amet, efficitur ante faucibus. efficitur enim quis, ipsum Interdum sagittis dolor elit. primis\n\n788Consectetur faucibus.\nLorem Ut bibendum, rutrum Sed tortor\nLorem ut volutpat lorem aliquam amet,\nLorem\n\n789Rutrum pretium ipsum primis et quis, nunc eget nec condimentum ac viverra aliquam\n\n790Ut in pretium ligula scelerisque fames orci semper molestie\n\n791Ut enim consectetur in sagittis eget ipsum efficitur tortor elit. libero\n\n792In quis, Interdum fames neque. rutrum Interdum ligula libero enim lorem fringilla In elit. ac\n\n793Ac consectetur fames bibendum, rutrum tincidunt.\n\n794Pharetra in adipiscing tortor libero molestie fames tincidunt. Duis posuere in\n\n795Vel Integer Duis ipsum In vitae enim semper bibendum, ac ipsum purus\n\n796Massa Fusce lorem ut ante est consectetur Fusce\n\n797Hendrerit in Duis bibendum, libero ipsum nec consectetur amet, bibendum, dui ipsum\n\n798Condimentum ante tincidunt. nec semper felis. elementum ipsum\n\n799Velit. Mauris dolor viverra sit in est Interdum enim tortor ac\n\n800Et bibendum, fringilla ipsum in dolor\n\n801Consectetur Mauris tortor ac iaculis. quis, condimentum\n\n802Purus semper. Interdum neque. ante massa fames in, iaculis. tincidunt. In quis,\n\n803Massa, In nec amet, posuere lorem iaculis. efficitur et Integer\nLorem ac ante Sed\n\n804Quis, nunc eget eget purus\n\n805Duis nunc purus et Duis ac in, quis, semper hendrerit\n\n806Ante pretium sem. nec in, ipsum orci, Sed condimentum et Vivamus fringilla neque. metus ac\n\n807In, sit enim eget rutrum viverra Mauris eget massa massa consectetur orci tortor felis. iaculis.\n\n808Volutpat condimentum pharetra malesuada aliquam scelerisque\n\n809Integer hendrerit volutpat aliquam efficitur ac massa, eget ipsum dolor bibendum, aliquam ut\n\n810Fusce In Vivamus elementum Vivamus vel enim scelerisque faucibus. in consectetur et\n\n811Ut sem. quis, condimentum orci tincidunt.\n\n812Ut fringilla ante viverra vel Integer ut aliquam semper ligula\n\n813Pharetra libero Interdum Interdum felis. Ut sem. dui condimentum libero ut consectetur metus\n\n814Ipsum orci, eget primis lorem ac\n\n815Tincidunt. Integer orci est viverra fringilla posuere ipsum\n\n816Duis faucibus. sagittis tincidunt. felis. ut\n\n817Tortor efficitur semper ipsum tortor efficitur ac posuere faucibus. vel nec viverra libero pretium consectetur\n\n818Elit. In elit. Mauris purus\n\n819Scelerisque hendrerit et in Sed elit. Mauris\n\n820Vel in dolor bibendum, ut consectetur elementum viverra ipsum finibus bibendum,\n\n821Volutpat scelerisque aliquam elit. ac et\n\n822Pharetra massa, ac vitae ac Fusce consectetur quis, in, elementum libero est\n\n823Efficitur malesuada condimentum vitae efficitur molestie Fusce\n\n824Massa fames dolor Sed In in, ac condimentum Fusce ante\n\n825Bibendum, ligula Sed efficitur hendrerit sit\n\n826Velit. pharetra ligula tortor neque. semper. eget\n\n827Duis eget massa, Integer consectetur ante In Interdum eget ac viverra elementum\n\n828Interdum faucibus. ligula Fusce molestie\n\n829Adipiscing metus ac sem. volutpat adipiscing volutpat nec\n\n830Elementum in sit pretium ut efficitur orci ut in Fusce et massa,\n\n831Velit. semper primis Duis neque. Sed scelerisque ac lorem lorem faucibus. volutpat dui nunc\n\n832Faucibus. in ac amet, ante vitae\n\n833Tincidunt. in purus Mauris pharetra libero iaculis. in, tincidunt. metus consectetur\n\n834Ac malesuada ut eget in, in Vivamus consectetur\n\n835Adipiscing Mauris semper et eget efficitur est in amet, orci, eget rutrum\n\n836Ipsum et malesuada metus consectetur neque.\n\n837Pharetra Duis Integer posuere Duis\n\n838Et amet, Ut adipiscing in, faucibus.\n\n839Neque. rutrum in, bibendum, in finibus elementum hendrerit orci metus est\n\n840Fusce fringilla et ut ut\n\n841Nunc volutpat elementum ligula ac nec faucibus. velit. libero Sed ac tortor viverra\n\n842Duis adipiscing efficitur nunc ac Interdum ac scelerisque sit ac rutrum eget ante posuere elit.\n\n843Tincidunt. orci ac amet, massa, Fusce fames sagittis in, bibendum, libero neque. orci rutrum Ut\n\n844Pharetra posuere nec volutpat ac quis, rutrum elit. elementum in\n\n845Integer nunc Fusce Fusce consectetur sagittis sem. ante libero\n\n846Quis, vel scelerisque massa, lorem ac finibus libero ipsum ante adipiscing Integer felis. sagittis\n\n847Sed molestie amet, semper. elit. ante volutpat hendrerit\n\n848Quis, amet, hendrerit semper. semper. orci, ut faucibus. Ut ac ante purus\n\n849Libero nec et molestie in nec malesuada pharetra orci, ipsum sem.\n\n850Libero efficitur orci eget in semper ipsum\n\n851Adipiscing ante amet, eget ipsum metus sagittis massa,\n\n852Pretium iaculis. semper. elit. vitae dolor enim posuere Duis aliquam faucibus. finibus ipsum\n\n853Semper elit. semper. lorem tortor aliquam enim consectetur Sed scelerisque libero posuere In nec\n\n854In finibus ut ac ante purus orci orci, orci posuere massa, orci\n\n855Posuere iaculis. neque. In viverra purus fames\n\n856Condimentum dolor in et nec In Duis ac efficitur ac massa, est\n\n857Eget ipsum amet, ante consectetur ac\n\n858Ut libero consectetur elit. semper dui ligula ipsum\n\n859Massa, posuere in, semper. amet, felis. efficitur velit. ut libero Interdum elit.\n\n860Quis, est malesuada elit. posuere in finibus malesuada in orci Duis Fusce hendrerit\n\n861\nLorem Sed metus rutrum neque. ut amet, Interdum semper molestie fringilla ante amet,\n\n862Molestie consectetur semper vel in et libero felis. aliquam\n\n863In elementum ante Mauris malesuada pharetra\n\n864Mauris elit. ac fringilla eget ac quis, ut et Sed ac dui consectetur massa, in,\n\n865Dui ligula vitae iaculis. consectetur libero semper Duis fringilla enim\n\n866Elementum Sed quis, Duis Ut et semper efficitur\n\n867Enim purus ac sagittis hendrerit orci efficitur ut nec iaculis. vitae efficitur faucibus. consectetur\n\n868Molestie efficitur eget primis orci\n\n869Mauris Interdum sit ipsum posuere lorem sem. quis, ante lorem In metus condimentum efficitur libero\n\n870Sagittis et velit. finibus pharetra\n\n871Molestie massa posuere ante orci, elementum hendrerit consectetur ac in pharetra efficitur Sed efficitur Integer\n\n872Fringilla orci, in elementum purus nec sit eget\n\n873Vitae in tincidunt. ac pretium In vel neque.\n\n874\nLorem ipsum primis finibus\nLorem tortor libero massa ut tortor et consectetur sem. consectetur fringilla\n\n875Vel volutpat fringilla elit. Ut consectetur est faucibus. tincidunt.\n\n876Aliquam nunc Interdum Sed viverra Fusce massa\n\n877Ac ante semper libero ipsum viverra enim\n\n878Vivamus ac Mauris orci Sed in aliquam iaculis. Duis Integer elementum\n\n879Lorem dui ac Mauris sagittis Duis Vivamus pretium elementum fames est Sed ac massa, Interdum\n\n880Dolor bibendum, scelerisque ligula in\n\n881Molestie tincidunt. condimentum tincidunt. amet, nec eget nunc vitae\n\n882Sem. enim est orci, et orci, et dolor\n\n883Bibendum, tincidunt. bibendum, enim amet, semper efficitur primis consectetur ipsum ut elementum in volutpat\n\n884Amet, massa, ante efficitur ante ac molestie est\n\n885Dui rutrum consectetur et Ut\n\n886Semper massa, velit. et vitae et Mauris enim\n\n887Vivamus eget ac in efficitur velit. consectetur purus tortor ipsum bibendum,\n\n888Volutpat Mauris eget Vivamus nec efficitur neque. Duis amet, ante quis, ut libero semper. ut\n\n889Fusce est massa, adipiscing consectetur dolor\n\n890In rutrum pharetra In scelerisque nunc metus iaculis.\n\n891Neque. est vel et in orci, in, molestie efficitur ipsum\n\n892Vitae massa, et elementum lorem vitae est aliquam volutpat massa, ante viverra\n\n893Ipsum ligula est massa ligula metus\nLorem iaculis.\n\n894Ante et rutrum Vivamus In ac\n\n895Sit vitae Mauris et consectetur\n\n896Massa, in ipsum massa, nunc elit. ut tincidunt.\n\n897Ut consectetur in libero Sed eget semper. scelerisque ante Integer eget\n\n898Posuere iaculis. Mauris dolor dui Sed in, finibus ante nunc\n\n899Ante In aliquam eget felis. sagittis tincidunt. Mauris quis, elit. consectetur in\n\n900In Integer nec ac vel Mauris Fusce ac amet, orci, amet, Duis fringilla\n\n901Efficitur aliquam primis massa ac in consectetur\nLorem bibendum,\n\n902Ligula ac libero vitae In vel pretium sit fames et fringilla viverra In\n\n903In sit eget hendrerit dolor Interdum neque. pretium massa elementum orci,\n\n904Mauris nunc\nLorem Sed ipsum Duis felis. efficitur libero ante Ut fringilla orci,\n\n905Posuere efficitur lorem nunc ante libero neque. ipsum faucibus.\n\n906Est amet, ante faucibus. ut Vivamus hendrerit iaculis. elementum volutpat malesuada In metus consectetur\n\n907Semper. primis libero Ut est dolor Ut Vivamus Mauris ut consectetur consectetur hendrerit tortor semper.\n\n908Dui efficitur aliquam amet, massa ut Ut semper ligula ut neque. Ut\n\n909Volutpat velit. massa, quis, Vivamus metus ipsum efficitur orci in in sit bibendum,\n\n910Efficitur aliquam iaculis. in, nec primis elementum Duis efficitur ac et condimentum Vivamus\n\n911Et semper. et Mauris Mauris metus elit. neque.\n\n912Molestie ut hendrerit sem. ac\n\n913Elementum ac volutpat quis, hendrerit tortor velit. eget\n\n914Tortor ac in aliquam Mauris ut\n\n915Sed orci fames scelerisque dui Mauris hendrerit consectetur elit. eget\n\n916Et elit. quis, sem. ac faucibus. viverra eget\n\n917Elit. metus bibendum, Mauris ac sagittis vitae Duis sagittis ipsum\n\n918Fusce ac Duis sit dui adipiscing ligula\n\n919Eget enim eget pharetra quis, eget massa iaculis. fringilla massa, sagittis sit\n\n920Dui semper. ac efficitur semper lorem consectetur\n\n921Aliquam faucibus. Vivamus quis, dolor efficitur metus elementum metus ut metus ac et elementum\n\n922Libero est efficitur consectetur adipiscing sagittis Fusce finibus nec in massa elit. malesuada rutrum rutrum\n\n923Vel enim finibus molestie massa iaculis. amet, nunc in,\n\n924Ac ut ut sit Sed\n\n925Sed nec in massa, enim\n\n926Ac elementum tincidunt. eget libero eget in elit. ante Sed nec lorem eget adipiscing orci\n\n927Sit fringilla hendrerit efficitur Sed purus nunc nec aliquam elit.\n\n928Aliquam fames iaculis. In massa, finibus\n\n929Aliquam iaculis. Interdum pretium enim iaculis. nunc Mauris\n\n930Elit. eget\nLorem Ut massa, orci neque. sit In metus primis in\n\n931Rutrum lorem elementum pretium ligula\n\n932Ligula ipsum vel semper. rutrum ac elit. dui libero efficitur ligula nunc pharetra condimentum\n\n933Enim adipiscing Interdum tincidunt. faucibus. et tortor Interdum ante\n\n934Ante Interdum tincidunt. iaculis. efficitur et Integer velit. sagittis ut felis. consectetur aliquam\n\n935Amet, Fusce et sagittis ac posuere pretium in\n\n936Purus eget orci, Integer amet, et\n\n937Dolor orci, ac sagittis malesuada consectetur ligula vel faucibus. consectetur velit. ac\n\n938Ante ante\nLorem ut consectetur\n\n939Integer sagittis scelerisque in ut consectetur ac fames bibendum, enim Sed ligula sit iaculis.\n\n940In in, vitae purus in elit. sit iaculis. ipsum molestie ut viverra fringilla\n\n941Consectetur sem. consectetur dui Vivamus aliquam elementum purus molestie viverra\nLorem dui\n\n942Ipsum ipsum vel ipsum massa, efficitur fames Vivamus ipsum viverra ac\n\n943Sed purus aliquam fringilla ipsum\n\n944Nunc in tortor enim sagittis metus elit. Sed vel rutrum\n\n945Ac elementum ac Mauris ante velit. orci semper. semper ante\n\n946Ac volutpat in viverra orci ipsum\n\n947Sagittis efficitur nunc semper purus eget fringilla ac efficitur sagittis ac Mauris consectetur neque.\n\n948Viverra fringilla ante elit. dolor ac ut ante enim et pharetra semper elit. ut\n\n949Vivamus velit. in,\nLorem enim eget ac orci quis, ipsum et rutrum quis,\n\n950Ipsum fringilla rutrum scelerisque felis. semper ante elementum vel\n\n951Efficitur vel est eget quis, Fusce\n\n952\nLorem iaculis. ac scelerisque viverra adipiscing Sed lorem quis, ante ante semper. Integer quis, viverra\n\n953Adipiscing vel ante neque.\nLorem ut Mauris dui in,\n\n954Consectetur elementum dolor purus elit. neque. condimentum consectetur pharetra\n\n955Ut nunc felis. ligula nec aliquam enim semper aliquam Vivamus viverra elit. in, Vivamus amet,\n\n956Rutrum consectetur ante primis volutpat\n\n957Felis. in in, finibus orci in, lorem ut ante aliquam condimentum Vivamus pretium ipsum\n\n958Felis. faucibus. orci, Sed quis, ut quis, semper. ligula ac\n\n959Et ut metus finibus libero sem. et posuere consectetur in\n\n960Ac pretium in ante massa, ac ac primis ligula ante ipsum et consectetur ac Interdum\n\n961In elit. Fusce quis, Integer ipsum iaculis.\nLorem in Sed sem. vitae\n\n962Ipsum metus ac in, sit et elit. velit. ut Sed in\n\n963Tortor volutpat et orci in, in, condimentum et fames\n\n964In ante scelerisque adipiscing iaculis. dui ipsum Duis ut\n\n965Dui posuere posuere vel finibus dolor\n\n966Posuere velit. consectetur orci, Sed ante rutrum tortor nunc molestie ac ac orci\n\n967Viverra Interdum ac massa, molestie in molestie semper viverra In sit semper. ipsum ante vel\n\n968Libero iaculis. ut semper Interdum ac ac rutrum\nLorem\n\n969Nunc bibendum, est orci ante adipiscing ante neque. orci, Interdum\n\n970Interdum Mauris in metus viverra\n\n971Malesuada iaculis. consectetur elit. massa, in orci\n\n972Libero orci, Vivamus ac in, ante pretium molestie pharetra ligula Vivamus Sed efficitur\n\n973Semper adipiscing ut faucibus. ipsum\n\n974In ante neque. semper metus\n\n975Ut in, metus nunc semper. consectetur nec Vivamus orci, elementum in,\n\n976Vel ac efficitur sagittis sagittis ac Fusce Fusce Ut sem. tortor\n\n977Bibendum, Ut nec vitae posuere massa, in, lorem ac Integer velit. fames rutrum primis In\n\n978Vivamus Integer Interdum bibendum, condimentum in fames enim in, efficitur tortor condimentum quis,\n\n979Interdum aliquam ut pretium dolor pretium\n\n980Dui consectetur Mauris ac sem. libero viverra iaculis. libero sem. pharetra scelerisque amet,\n\n981\nLorem dui metus libero Integer Duis adipiscing elit. fringilla malesuada amet, tortor Fusce\n\n982Scelerisque sit elit. sagittis ut Integer amet, primis est\n\n983Sagittis aliquam sem. tincidunt. ac ante\n\n984Vel est pretium elementum orci Mauris molestie nec\n\n985Eget In scelerisque bibendum, ut in, tincidunt. Duis fringilla ac\n\n986Volutpat elementum ante bibendum, volutpat Mauris lorem elit. et primis finibus scelerisque massa Sed\n\n987Et posuere ante orci sit ac sagittis fames\n\n988Orci efficitur iaculis. adipiscing efficitur Interdum ac Duis eget sagittis Duis lorem consectetur\n\n989Condimentum enim dolor neque. efficitur\n\n990Est rutrum semper fringilla et in dui Vivamus et velit.\n\n991Elementum massa, malesuada sem. et faucibus. massa,\n\n992Nec purus ipsum consectetur et in,\n\n993Semper vitae tincidunt. hendrerit Vivamus Duis consectetur ac et\n\n994Metus aliquam quis,\nLorem et ac in ac enim ipsum eget neque.\n\n995Vel ante in orci volutpat et rutrum\n\n996Orci, ligula rutrum fringilla ut ipsum vel est hendrerit Duis bibendum, bibendum, viverra fringilla\n\n997Fames lorem Mauris adipiscing iaculis. In tincidunt. felis. consectetur Ut ac Vivamus semper Sed in\n\n998Fames vitae efficitur in, aliquam rutrum quis, eget pretium\n\n999In nec massa eget semper. semper. pharetra Sed massa, elit. ante orci, Ut\n\n1000Semper. elit.\nLorem scelerisque eget primis neque. ut in iaculis. vel fames Duis bibendum,\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| dropup | boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | boolean | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\n| iconOnly | boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | boolean | false | Defines whether the caret is shown or not. |\n| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |",
     "category": "Components",
     "section": "Selection",
     "boost": "Dropdowns components/dropdowns #components/dropdowns Components Selection"
@@ -644,7 +654,7 @@
     "title": "Map settings",
     "lead": null,
     "summary": "Terms of use© 1987–2026 HERE",
-    "searchText": "Map settings\nMap settings\nTerms of use© 1987–2026 HERE\n\n20 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMap TypeDayDay\nFleet style\nSatellite\nTerrain\nNight\n\nMap LayerPlease select...Incidents\nTraffic\nRoad restrictions\n\nLanguageEnglishEnglish\nGerman\nPolish\n\nZoom\n\nMin zoom\n\nMax zoom\n\nMap centerReset position\n\nClusterShow cluster\nRenderingWebGL vector tiles\nUse device pixel ratio\n\nMap centerN48° 30.000′ E12° 6.000′\nSettings examples\nNo settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nWithout cluster settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nWithout cluster and map layer settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nStatic map without interaction\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents",
+    "searchText": "Map settings\nMap settings\nTerms of use© 1987–2026 HERE\n\n20 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nMap TypeDayDay\nFleet style\nSatellite\nTerrain\nNight\n\nMap LayerPlease select...Incidents\nTraffic\nRoad restrictions\n\nLanguageEnglishEnglish\nGerman\nPolish\n\nZoom\n\nMin zoom\n\nMax zoom\n\nMap centerReset position\n\nClusterShow cluster\nRenderingWebGL vector tiles\nUse device pixel ratio\n\nMap centerN48° 30.000′ E12° 6.000′\nSettings examples\nNo settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\n\nTraffic conditions\nShow traffic incidents\n\nWithout cluster settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nWithout cluster and custom map layer settings\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents\n\nStatic map without interaction\n\nTerms of use© 1987–2026 HERE\n\n10 km\n\nChoose view\nMap view\nSatellite\nTerrain\n\nShow traffic incidents",
     "category": "Components",
     "section": "Map",
     "boost": "Map settings components/mapSettings #components/mapSettings Components Map"
@@ -764,7 +774,7 @@
     "title": "RadialBarChart",
     "lead": null,
     "summary": "Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.",
-    "searchText": "RadialBarChart\nRadialBarChart\nNote: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.\nMultiple RadialBarChart barsAge 18-24\nAge 25-29\nAge 30-34\nAge 35-39\n\n67%Registrations\n56%Logins\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nCircle RadialBarChart with built-in text82%\n\n82\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nFull circle RadialBarChart with custom text\n\nFuel level\n24%\n\nCharge level\n38%\n\nOpen RadialBarChart with custom text\n\nLorem ipsum\n80\n\nLorem ipsum dolor sit amet\n67\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nExample for error visualizationMost reported problems\n\n43%\n\nApp\n\n37%\n\nWebsite\n\n20%\n\nServer Connection\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nRadialBarChart with a needle\n\nFuel level\n24%\n\nCharge level\n38%\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nCircle RadialBarChart as progress steps\n\nNot Started\nLorem ipsum dolor sit amet\n\nInitial Step\nLorem ipsum dolor sit amet\n\nSecond Step\nLorem ipsum dolor sit amet\n\nFinal Step\nLorem ipsum dolor sit amet\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nRadialBarChart with changing data1%\n\nStart\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |",
+    "searchText": "RadialBarChart\nRadialBarChart\nNote: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.\nMultiple RadialBarChart barsAge 18-24\nAge 25-29\nAge 30-34\nAge 35-39\n\n31.4726.69-15.698.22\n\n67%Registrations\n56%Logins\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nCircle RadialBarChart with built-in text82%\n\n82\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nFull circle RadialBarChart with custom text\n\nFuel level\n24%\n\nCharge level\n38%\n\nOpen RadialBarChart with custom text\n\nLorem ipsum\n80\n\nLorem ipsum dolor sit amet\n67\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nExample for error visualizationMost reported problems\n\n43%\n\nApp\n\n37%\n\nWebsite\n\n20%\n\nServer Connection\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nRadialBarChart with a needle\n\nFuel level\n24%\n\nCharge level\n38%\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nCircle RadialBarChart as progress steps\n\nNot Started\nLorem ipsum dolor sit amet\n\nInitial Step\nLorem ipsum dolor sit amet\n\nSecond Step\nLorem ipsum dolor sit amet\n\nFinal Step\nLorem ipsum dolor sit amet\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |\nRadialBarChart with changing data1%\n\nStart\n### RadialBarChart\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| width | Number | — | The width of chart container. |\n| height | Number | — | The height of chart container. |\n| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: \"a\", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: \"a\", value: 12, color: \"color-coldplay-fountain\" }] |\n| dataKey | string \\| number \\| ((obj: T) =any) | value | The key of data used for the RadialBar. |\n| startAngle | Number | 180 | The start angle of all the bars. |\n| endAngle | Number | 180 | The end angle of all the bars. |\n| innerRadius | String \\| Number | 30% | The innerRadius of the radial bar which is most close to the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| outerRadius | String \\| Number | 100% | The outerRadius of the radial bar which is most far away from the center. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. |\n| clockWise | Boolean | true | Set to \"true\" if the bars should go clockwise. |\n| cornerRadius | Number | 30 | Set the corner radius for the individual bars. |\n| showBarLabel | Boolean | false | Renders a label on top of the bars. |\n| background | Boolean \\| Function | true | If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. If set a function, the function will be called to render customized background. |\n| range | Array | — | Defines the min and max value for the bar. |\n| radialBarOptions | Object | — | Detailed options passed to the underlying RadialBar component. Details can be found here: https://recharts.org/en-US/api/RadialBar |\n| textOptions | Object | — | Detailed options passed to the underlying Text component. Details can be found here: https://recharts.org/en-US/api/Text |\n| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |\n| tooltip | ChartTooltip \\| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |\n| legend | Legend \\| Boolean | <Legend /| Shows the provided Legend component otherwise shows nothing. |\n| ... |  | — | Additional props are passed to the underlying RadialBarChart component. Details can be found here: https://recharts.org/en-US/api/RadialBarChart |\n### Legend\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| iconType | String | square | Defines the type of the leading icon. |\n| iconSize | String | 12 | Defines the size of the leading icon. |\n| layout | String | vertical | Defines the layout of the legend. |\n| align | String | right | Defines the alignment of the legend relative to the chart. |\n| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |\n| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |",
     "category": "Components",
     "section": "Charts",
     "boost": "RadialBarChart components/radialBarCharts #components/radialBarCharts Components Charts"
@@ -779,6 +789,16 @@
     "section": "Interaction",
     "boost": "RadioButton components/radiobutton #components/radiobutton Components Interaction"
   },
+  {
+    "id": "components/radioCardGroup",
+    "title": "RadioCardGroup",
+    "lead": "Card-based radio selection built on top of RadioButton. Supports options-based usage and a compound API via RadioCardItem and RadioCardIndicator.",
+    "summary": "Card-based radio selection built on top of RadioButton. Supports options-based usage and a compound API via RadioCardItem and RadioCardIndicator.",
+    "searchText": "RadioCardGroup\nCard-based radio selection built on top of RadioButton. Supports options-based usage and a compound API via RadioCardItem and RadioCardIndicator.\nRadioCardGroup\nInline cardsOption 1\nThis option is a first option\n\nOption 2\nThis option is a second option\n\nOption 3\nThis option is a third option\n\nStacked horizontal cardsLorem ipsum\n\nDolor sit amet\n\nQui repellat dolores\n\nStacked cardsOption 1\nThis option is a first option\n\nOption 2 (disabled)\nThis option is a second option\n\nOption 3\nThis option is a third option\n\nOption 4\nThis option is a forth option\n\nReset selectionUnselect\n### RadioCardGroup\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | string | — | Name used for all radios in this group. |\n| options | RadioCardOption[] | — | List of selectable options. |\n| value | string | — | Selected value (controlled usage). |\n| defaultValue | string | — | Initially selected value (uncontrolled usage). |\n| variant | 'inline' \\| 'stacked' \\| 'stacked-horizontal' | 'inline' | Card layout variant. Possible values are: 'inline', 'stacked' or 'stacked-horizontal'. |\n| gap | string | 'gap-15' | Gap utility class used for the inline layout. |\n| onChange | (value: string, event: ChangeEvent<HTMLInputElement) =void | — | Callback invoked when selection changes. |\n| cardClassName | string | — | Additional classes applied to each card. |\n### RadioCardItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value passed to the underlying radio input. |\n| disabled | boolean | false | Disables this radio card. |\nCompound API with mapped items\nCompound API with mapped itemsOption 1\nThis option is a first option\n\nOption 2\nThis option is a second option\n\nOption 3\nThis option is a third option\n### RadioCardGroup\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | string | — | Name used for all radios in this group. |\n| options | RadioCardOption[] | — | List of selectable options. |\n| value | string | — | Selected value (controlled usage). |\n| defaultValue | string | — | Initially selected value (uncontrolled usage). |\n| variant | 'inline' \\| 'stacked' \\| 'stacked-horizontal' | 'inline' | Card layout variant. Possible values are: 'inline', 'stacked' or 'stacked-horizontal'. |\n| gap | string | 'gap-15' | Gap utility class used for the inline layout. |\n| onChange | (value: string, event: ChangeEvent<HTMLInputElement) =void | — | Callback invoked when selection changes. |\n| cardClassName | string | — | Additional classes applied to each card. |\n### RadioCardItem\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value passed to the underlying radio input. |\n| disabled | boolean | false | Disables this radio card. |",
+    "category": "Components",
+    "section": "Interaction",
+    "boost": "RadioCardGroup components/radioCardGroup #components/radioCardGroup Components Interaction"
+  },
   {
     "id": "components/releaseNotes",
     "title": "ReleaseNotes",
@@ -844,7 +864,7 @@
     "title": "SaveableInput",
     "lead": null,
     "summary": "SaveableInput",
-    "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\n\nThis is an error message\n\nDisabled SaveableInput\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nWith error feedback and disabled save button\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput\n\nRandomize valuesClear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nControlled - Stay open on invalid (default)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n03:04\n\nSaved value:\n\nControlled - With error\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n3:04 PM\n### SaveableDateInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| value | Date \\| Moment \\| string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: Moment \\| string, previousValue: Moment \\| string \\| Date) =void | — | Callback function triggered when the value changes and is saved. |\n| onInputChange | (value: Moment \\| string, isValid: boolean) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |\n| onExitEdit | (wasSaved: boolean) =void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |\n| onCancel | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| invalidExitBehavior | 'stay-open' \\| 'reset-and-close' | 'stay-open' | Behavior when trying to exit edit mode with invalid input: - 'stay-open': Keep edit mode open until valid input is provided - 'reset-and-close': Close edit mode and reset to initial value |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | {} | Additional props passed to the underlying DatePicker component. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
+    "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\n\nThis is an error message\n\nDisabled SaveableInput\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nWith error feedback and disabled save button\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput\n\nRandomize valuesClear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: string, previousValue: string) =void | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nControlled - Stay open on invalid (default)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n04:48\n\nSaved value:\n\nControlled - With error\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n4:48 PM\n### SaveableDateInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| value | Date \\| Moment \\| string | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: Moment \\| string, previousValue: Moment \\| string \\| Date) =void | — | Callback function triggered when the value changes and is saved. |\n| onInputChange | (value: Moment \\| string, isValid: boolean) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEnterEdit | () =void | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |\n| onExitEdit | (wasSaved: boolean) =void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |\n| onCancel | () =void | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| invalidExitBehavior | 'stay-open' \\| 'reset-and-close' | 'stay-open' | Behavior when trying to exit edit mode with invalid input: - 'stay-open': Keep edit mode open until valid input is provided - 'reset-and-close': Close edit mode and reset to initial value |\n| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | {} | Additional props passed to the underlying DatePicker component. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | string | — | Additional classes to be set on the input itself. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "SaveableInput components/saveableInput #components/saveableInput Components Interaction"
@@ -984,7 +1004,7 @@
     "title": "Switch",
     "lead": null,
     "summary": "Switch",
-    "searchText": "Switch\nSwitch\nSwitch\n\nDisabled Switch & disabled active Switch\n\nColored Switch\n\nSwitch with label\n\nLabel\n\nSwitch with label left\n\nLabel\n\nSwitch with text and min-width\n\nSwitch with single text and label\n\nBeta feature toggle\n\nSwitch in panels\n\nSwitch in alerts\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| keyName | string | — | Optional key that is used as key and as the id on the internal input. |\n| onChange | (toggleState: boolean) =void | — | Callback function triggered when clicking the button. |\n| checked | boolean | false | Set active / inactive state. |\n| color | string | 'primary' | Defines the color of the switch. Possible values are: 'primary' 'secondary' 'info' 'success' 'warning' 'danger' |\n| minWidth | number | 40 | The min-width of the switch. |\n| disabled | boolean | false | Disables the component. |\n| enabledText | string | — | The text used for the ON state. |\n| disabledText | string | — | The text used for the OFF state. |\n| labelPosition | 'left' \\| 'right' | — | Defines the position of the switch label. Defaults to 'right' when children are present. Possible values are 'left' and 'right'. |\n| className | string | — | Additional class names added to the SVG element. |",
+    "searchText": "Switch\nSwitch\nSwitch\n\nDisabled Switch & disabled active Switch\n\nColored Switch\n\nSwitch with label\n\nLabel\n\nSwitch with label left\n\nLabel\n\nSwitch with different ON/OFF text\n\nSwitch with autoMinWidth (takes the width from the longest text)Lorem\n\nSwitch with a longer label and more spacing\n\nLorem ipsum\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n\nLorem ipsum dolor\n\nSwitch in panels\n\nSwitch in alerts\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| keyName | string | — | Optional key that is used as key and as the id on the internal input. |\n| onChange | (toggleState: boolean) =void | — | Callback function triggered when clicking the button. |\n| checked | boolean | false | Set active / inactive state. |\n| color | string | 'primary' | Defines the color of the switch. Possible values are: 'primary' 'secondary' 'info' 'success' 'warning' 'danger' |\n| minWidth | number | — | The min-width of the switch. If not set, the default min-width is 40. |\n| autoMinWidth | boolean | false | Controls automatic text-based min-width behavior when minWidth is not set. Set to true to keep the width at the longer one of enabledText and disabledText. |\n| disabled | boolean | false | Disables the component. |\n| enabledText | string | — | The text used for the ON state. |\n| disabledText | string | — | The text used for the OFF state. |\n| labelPosition | 'left' \\| 'right' | 'right' | Defines the position of the switch label. Defaults to 'right' when children are present. Possible values are 'left' and 'right'. |\n| customTextStyle | boolean | false | Use this flag if you want to have custom text styles. |\n| className | string | — | Additional class names added to the SVG element. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "Switch components/switch #components/switch Components Interaction"
@@ -1029,6 +1049,16 @@
     "section": "Content",
     "boost": "Teaser components/teaser #components/teaser Components Content"
   },
+  {
+    "id": "components/textTruncateMiddle",
+    "title": "TextTruncateMiddle",
+    "lead": "TextTruncateMiddle truncates long text in the middle and keeps the end segment visible.",
+    "summary": "TextTruncateMiddle truncates long text in the middle and keeps the end segment visible.",
+    "searchText": "TextTruncateMiddle\nTextTruncateMiddle truncates long text in the middle and keeps the end segment visible.\nTextTruncateMiddle\nUseful for IDs, URLs, and file names where the suffix helps identify the value quickly.\nDrag the right handle to change width2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1ehttps://service.example.com/fleet/vehicles/2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e/details\n\nSuffix length\n9\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| text | string | — | Full text value to render. |\n| suffixLength | number | 6 | Number of characters preserved at the end. |\n| startClassName | string | — | Additional classes for the first text segment (start). |\n| endClassName | string | — | Additional classes for the second text segment (end). |",
+    "category": "Components",
+    "section": "Content",
+    "boost": "TextTruncateMiddle components/textTruncateMiddle #components/textTruncateMiddle Components Content"
+  },
   {
     "id": "components/timeline",
     "title": "Timeline",
@@ -1044,7 +1074,7 @@
     "title": "TimePicker",
     "lead": null,
     "summary": "Uncontrolled component",
-    "searchText": "TimePicker\nTimePicker\nUncontrolled component\n\nWith icon\n\nControlled component without initial value\n\nSet current timeClear time\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |\n| onChange | (value: string) =void | — | Callback function when the value changes and is a valid time format. If not it handles the state internally until the time is valid and filled. |\n| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |\n| showIcon | boolean | false | Defines whether to show the input icon. |\n| errorMessage | string \\| React.ReactNode | — | Input error message. |\n| warningMessage | string \\| React.ReactNode | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Feedback message width. |\n| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement, 'value' \\| 'onChange'| — | Additional properties to be set on the input element. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nDefaultPlease insert a valid time\n\nWith iconJust a normal warning message\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |\n| onChange | (value: string) =void | — | Callback function when the value changes and is a valid time format. If not it handles the state internally until the time is valid and filled. |\n| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |\n| showIcon | boolean | false | Defines whether to show the input icon. |\n| errorMessage | string \\| React.ReactNode | — | Input error message. |\n| warningMessage | string \\| React.ReactNode | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Feedback message width. |\n| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement, 'value' \\| 'onChange'| — | Additional properties to be set on the input element. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
+    "searchText": "TimePicker\nTimePicker\nUncontrolled component\n\nWith icon\n\nControlled component without initial value\n\nSet current timeClear time\n\nDisabled\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |\n| onChange | (value: string) =void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. If not it handles the state internally until the time is valid and filled. |\n| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |\n| showIcon | boolean | false | Defines whether to show the input icon. |\n| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |\n| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |\n| disabled | boolean | false | Defines whether the component is disabled. |\n| errorMessage | string \\| React.ReactNode | — | Input error message. |\n| warningMessage | string \\| React.ReactNode | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Feedback message width. |\n| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement, 'value' \\| 'onChange'| — | Additional properties to be set on the input element. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nDefaultPlease insert a valid time\n\nWith iconJust a normal warning message\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |\n| onChange | (value: string) =void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. If not it handles the state internally until the time is valid and filled. |\n| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |\n| showIcon | boolean | false | Defines whether to show the input icon. |\n| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |\n| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |\n| disabled | boolean | false | Defines whether the component is disabled. |\n| errorMessage | string \\| React.ReactNode | — | Input error message. |\n| warningMessage | string \\| React.ReactNode | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Feedback message width. |\n| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement, 'value' \\| 'onChange'| — | Additional properties to be set on the input element. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nMandatory value\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |\n| onChange | (value: string) =void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. If not it handles the state internally until the time is valid and filled. |\n| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |\n| showIcon | boolean | false | Defines whether to show the input icon. |\n| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |\n| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |\n| disabled | boolean | false | Defines whether the component is disabled. |\n| errorMessage | string \\| React.ReactNode | — | Input error message. |\n| warningMessage | string \\| React.ReactNode | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Feedback message width. |\n| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement, 'value' \\| 'onChange'| — | Additional properties to be set on the input element. |\n| className | string | — | Additional classes to be set on the wrapper element. |\nTimePicker with dropdown\nControlled component with dropdown\n\n00:00\n00:30\n01:00\n01:30\n02:00\n02:30\n03:00\n03:30\n04:00\n04:30\n05:00\n05:30\n06:00\n06:30\n07:00\n07:30\n08:00\n08:30\n09:00\n09:30\n10:00\n10:30\n11:00\n11:30\n12:00\n12:30\n13:00\n13:30\n14:00\n14:30\n15:00\n15:30\n16:00\n16:30\n17:00\n17:30\n18:00\n18:30\n19:00\n19:30\n20:00\n20:30\n21:00\n21:30\n22:00\n22:30\n23:00\n23:30\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | string | — | Value of the time as string. Note, when value is given the component is treated as controlled. |\n| onChange | (value: string) =void | — | Callback function when the value changes and is a valid time format. It also emits an empty string when the input is cleared. If not it handles the state internally until the time is valid and filled. |\n| alwaysShowMask | boolean | true | Defines whether to always show the input mask placeholder. |\n| showIcon | boolean | false | Defines whether to show the input icon. |\n| dropdown | boolean | false | Defines whether to show a dropdown with pre-defined time values. |\n| minuteOffset | number | 15 | Defines the minute interval for time controls and dropdown values. Invalid values fallback to 15. |\n| disabled | boolean | false | Defines whether the component is disabled. |\n| errorMessage | string \\| React.ReactNode | — | Input error message. |\n| warningMessage | string \\| React.ReactNode | — | Input warning message. |\n| messageWhiteSpace | 'normal' \\| 'nowrap' \\| 'pre-line' | 'normal' | Feedback message width. |\n| inputProps | Omit<React.InputHTMLAttributes<HTMLInputElement, 'value' \\| 'onChange'| — | Additional properties to be set on the input element. |\n| className | string | — | Additional classes to be set on the wrapper element. |",
     "category": "Components",
     "section": "Pickers",
     "boost": "TimePicker components/timepicker #components/timepicker Components Pickers"
@@ -1054,7 +1084,7 @@
     "title": "ToggleButton",
     "lead": "This toggle button is based on the button component that can be used directly.",
     "summary": "This toggle button is based on the button component that can be used directly.",
-    "searchText": "ToggleButton\nThis toggle button is based on the button component that can be used directly.\nToggleButton\nDefault ToggleButtons\nbtn-default (untoggled)btn-default (toggled)btn-primary (untoggled)\nOther Styles\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\nControlled ToggleButton\n\nControl the toggle\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| type | 'button' \\| 'submit' | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | \"default\" | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |",
+    "searchText": "ToggleButton\nThis toggle button is based on the button component that can be used directly.\nToggleButton\nDefault ToggleButtons\nbtn-default (untoggled)btn-default (toggled)btn-primary (untoggled)\nOther Styles\n### Base button props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n| type | 'button' \\| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\n### Link element buttons\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| as | 'a' | — | Defines this component as a link element. |\n| type | never | — | Native button type is not supported when using as=\"a\". |\n| href | string | — | Defines the destination URL for the link button. |\n| asToggle | false | false | Toggle behavior is not supported when using as=\"a\". |\n| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent) =void | — | Callback function triggered when clicking the link. |\nControlled ToggleButton\n\nControl the toggle\n### Base button props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| disabled | boolean | false | Whether the button should be disabled. |\n| active | boolean | false | Set the button toggled. Should be used in combination with \"asToggle\" prop. |\n| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |\n| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |\n| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |\n| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |\n| block | boolean | false | Defines whether the button takes up the full width of the parent element. |\n| bsStyle | BUTTONSTYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |\n| bsSize | BUTTONSIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |\n| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |\n| noRippleEffect | boolean | — | Whether the \"ripple\" effect should be suppressed on this button. |\n| tabIndex | number | 0 | Number of the index used for keyboard support. |\n| className | string | — | Additional classes to be set on the button element. |\n### Regular button\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent) =void | — | Callback function triggered when clicking the button. |\n| type | 'button' \\| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |\n### ToggleButton\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |\n| onClick | (value: boolean) =void | — | Callback function triggered when clicking the button. |\n### Link element buttons\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| as | 'a' | — | Defines this component as a link element. |\n| type | never | — | Native button type is not supported when using as=\"a\". |\n| href | string | — | Defines the destination URL for the link button. |\n| asToggle | false | false | Toggle behavior is not supported when using as=\"a\". |\n| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent) =void | — | Callback function triggered when clicking the link. |",
     "category": "Components",
     "section": "Interaction",
     "boost": "ToggleButton components/toggleButton #components/toggleButton Components Interaction"
@@ -1069,12 +1099,22 @@
     "section": "Misc",
     "boost": "Tooltips components/tooltip #components/tooltip Components Misc"
   },
+  {
+    "id": "components/tracker",
+    "title": "Tracker",
+    "lead": "Compact visual tracker component for status indicators with optional per-block color and tooltip support.",
+    "summary": "Compact visual tracker component for status indicators with optional per-block color and tooltip support.",
+    "searchText": "Tracker\nCompact visual tracker component for status indicators with optional per-block color and tooltip support.\nTracker\nDefault Tracker\n\nCollapse when custom min width is reached, showing last items\n\nCompression without collapsing - overflowing content\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | TrackerBlock[] | — | Array of block objects. |\n| └id | string | — | Unique identifier for a block. |\n| └color | string | — | Defines the block color by setting a UIKIT bg-<nameclass. |\n| └tooltip | ReactNode | — | Tooltip content shown on hover. |\n| └onClick | (id: string) =void | — | Called when clicking the block. |\n| └className | string | — | Additional class names for the block. |\n| defaultBackgroundColor | string | 'bg-success' | Background color of a block, when no color is provided in data. |\n| hoverEffect | boolean | false | Add a hover effect to the tracker blocks. |\n| minBlockWidth | number | 5 | Minimum width per tracker block in pixels. The tracker compresses blocks automatically down to this value. |\n| maxBlockWidth | number | 10 | Maximum width per tracker block in pixels. |\n| blockGap | number | 2 | Gap between tracker blocks in pixels. |\n| blockHeight | number | 30 | Height per tracker block in pixels. |\n| collapseOnMinBlockWidth | boolean | true | When enabled, the tracker shows fewer blocks once minBlockWidth is reached. |\n| collapseShowLastBlocks | boolean | false | Show the last blocks instead of the first blocks when collapsing due to width. |\n| className | string | — | Additional class names on the wrapper element. |\nCredit Score\nDetails\n\nYour credit score is 710\nThis score is considered to be Excellent.",
+    "category": "Components",
+    "section": "Progress",
+    "boost": "Tracker components/tracker #components/tracker Components Progress"
+  },
   {
     "id": "components/virtualList",
     "title": "VirtualList",
     "lead": "The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.",
     "summary": "The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.",
-    "searchText": "VirtualList\nThe VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.\nVirtualList\nIt allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.\nVirtual list with 100 itemsItem 1\nConsectetur primis adipiscing ac pharetra\n\nItem 2\nFusce Ut sagittis ac sit ut in, efficitur finibus pretium Vivamus pretium amet, amet, orci,\n\nItem 3\nAc Sed Mauris amet, molestie sem.\n\nItem 4\nConsectetur tortor efficitur rutrum vitae in vel efficitur sem. scelerisque efficitur Fusce velit.\n\nItem 5\nUt ac Integer rutrum nunc sem. efficitur ante Duis finibus ac ut purus\n\nItem 6\nElit. ante felis. finibus in\n\nItem 7\nMetus rutrum ante ac consectetur aliquam\n\nItem 8\nMalesuada ac Vivamus purus massa, efficitur Vivamus hendrerit\n\nItem 9\nNunc libero\nLorem in elementum\n\nItem 10\nFringilla massa, quis, sit orci scelerisque ante elit. ut fringilla faucibus. Vivamus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container |\nVirtual list with 5000 items\nVehicle 1\nFringilla semper. faucibus. lorem ac Ut condimentum semper.\n\nVehicle 2\nFinibus aliquam in Vivamus consectetur sit ante\n\nVehicle 3\nPrimis orci purus elementum libero tortor sit\n\nVehicle 4\nSed aliquam semper ipsum orci et metus Mauris ligula Ut consectetur nec elementum\n\nVehicle 5\nEfficitur Integer malesuada adipiscing vel malesuada elit. pharetra elit. fringilla pretium orci, elit.\n\nVehicle 6\nOrci, Fusce et condimentum scelerisque dolor metus fringilla consectetur consectetur primis nunc\n\nVehicle 7\nFelis. ipsum condimentum efficitur tortor iaculis. amet, hendrerit dolor dolor massa molestie ut ac\nLorem\n\nVehicle 8\nFringilla ac ipsum Mauris ac ac et semper. semper Fusce ut\n\nVehicle 9\nScelerisque ante orci, in nec elementum rutrum adipiscing hendrerit molestie in, fames orci,\n\nVehicle 10\nNunc nec bibendum, velit. Mauris\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container |",
+    "searchText": "VirtualList\nThe VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.\nVirtualList\nIt allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.\nVirtual list with 100 itemsItem 1\nUt semper. sem. in condimentum orci, ligula massa ac adipiscing\n\nItem 2\nAc aliquam Integer sit Fusce\n\nItem 3\nMetus faucibus. primis lorem finibus efficitur\n\nItem 4\nSemper purus efficitur Duis eget elementum viverra et posuere ac\n\nItem 5\nFames elit. Interdum hendrerit felis.\n\nItem 6\nTincidunt. neque. Ut in in tortor\nLorem volutpat condimentum elit. quis,\n\nItem 7\nEget ut Vivamus efficitur scelerisque dui semper consectetur et metus quis, In metus\n\nItem 8\nIn fringilla ut vel orci, hendrerit elit. tincidunt.\n\nItem 9\nAnte consectetur aliquam velit. ut pretium semper hendrerit sit efficitur ac et primis ac\n\nItem 10\nIpsum In in, fames sagittis velit.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container |\nVirtual list with 5000 items\nVehicle 1\nTortor elit. consectetur neque. efficitur scelerisque elementum sit tortor pretium massa, fames\n\nVehicle 2\nDolor massa, rutrum Sed ut finibus eget ante nec vel aliquam\n\nVehicle 3\nSed pharetra rutrum elit. dui libero semper amet, felis. metus Mauris\n\nVehicle 4\nDui In semper. quis, ac amet,\n\nVehicle 5\nUt semper viverra et adipiscing tortor tincidunt. semper enim in efficitur Duis ipsum\n\nVehicle 6\nVel adipiscing dui et ac elit. massa, pretium tincidunt. enim dolor\n\nVehicle 7\nVel In ac orci, tincidunt. efficitur finibus\n\nVehicle 8\nElit. in neque. in pretium vel sem. pretium finibus\n\nVehicle 9\nAnte aliquam amet, velit. condimentum ac faucibus. aliquam\n\nVehicle 10\n\nLorem elit. adipiscing Fusce ipsum lorem rutrum ut et nunc Integer dolor\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container |",
     "category": "Components",
     "section": "Content",
     "boost": "VirtualList components/virtualList #components/virtualList Components Content"
@@ -1084,7 +1124,7 @@
     "title": "Foundations",
     "lead": "You can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light",
     "summary": "You can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light",
-    "searchText": "Foundations\nYou can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light\nButtons\nSee also our Button component.\n\nNote: For having spacing between buttons in a single row you may want to wrap them with<div class=\"btn-toolbar\"</div\n\nNote: You can use link buttons within text blocks by adding btn-linkbtn-link-inline\nDefault buttons\n\nDefaultDefault\n\nIcon buttons\n\nMuted buttons\n\nMuted filledMuted\n\nLink buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nColored buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nOutline buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nSplit buttons\n\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted-filled\nButton states\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButton sizes\nXS buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nXS icon buttons\n\nSM buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nSM icon buttons\n\nMD buttons (default)\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nMD icon buttons (default)\n\nLG buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nLG icon buttons\nButton examples\nButton toolbar\n\nPrevNext\n\nButton group\n\n1234\n\nButtonButtonButton\n\nMultiline button\n\nThis is a multiline button with a lot of Text\nBlock button\n\nBlock level button\nTooltip buttons\n\nButton with tooltipDisabled button with tooltip\nAction buttons\nClick meClick meClick meClick meClick meClick me\nBackground colors\nBasic\nbg-white\nbg-black\n\nBrand\nbg-primary\nbg-secondary\n\nStatus\nbg-info\nbg-success\nbg-warning\nbg-danger\n\nDriving status\nbg-status-available\nbg-status-driving\nbg-status-resting\nbg-status-working\n\nMap marker\nbg-map-marker-asset\nbg-map-marker-poi\nbg-map-marker-geofence\nbg-map-marker-route\n\nRating\nbg-rating-1\nbg-rating-2\nbg-rating-3\nbg-rating-4\nbg-rating-5\n\nGray\nbg-decent\nbg-lightest\nbg-lighter\nbg-light\nbg-gray\nbg-dark\nbg-darker\nbg-darkest\n\nHighlight\nbg-highlight-decent\nbg-highlight-lightest\nbg-highlight-lighter\nbg-highlight-light\nbg-highlight\nbg-highlight-dark\nbg-highlight-darker\nbg-highlight-darkest\nHover background colors\nBasic\nhover-bg-white\nhover-bg-black\n\nBrand\nhover-bg-primary\nhover-bg-secondary\n\nStatus\nhover-bg-info\nhover-bg-success\nhover-bg-warning\nhover-bg-danger\n\nDriving status\nhover-bg-status-available\nhover-bg-status-driving\nhover-bg-status-resting\nhover-bg-status-working\n\nMap Marker\nhover-bg-map-marker-asset\nhover-bg-map-marker-poi\nhover-bg-map-marker-geofence\nhover-bg-map-marker-route\n\nRating\nhover-bg-rating-1\nhover-bg-rating-2\nhover-bg-rating-3\nhover-bg-rating-4\nhover-bg-rating-5\n\nGray\nhover-bg-decent\nhover-bg-lightest\nhover-bg-lighter\nhover-bg-light\nhover-bg-gray\nhover-bg-dark\nhover-bg-darker\nhover-bg-darkest\n\nHighlight\nhover-bg-highlight-decent\nhover-bg-highlight-lightest\nhover-bg-highlight-lighter\nhover-bg-highlight-light\nhover-bg-highlight\nhover-bg-highlight-dark\nhover-bg-highlight-darker\nhover-bg-highlight-darkest\nText\nBasic\ntext-color-white\ntext-color-black\n\nBrand\ntext-color-primary\ntext-color-secondary\n\nStatus\ntext-color-info\ntext-color-success\ntext-color-warning\ntext-color-danger\n\nDriving status\ntext-color-status-available\ntext-color-status-driving\ntext-color-status-resting\ntext-color-status-working\n\nMap marker\ntext-color-map-marker-asset\ntext-color-map-marker-poi\ntext-color-map-marker-geofence\ntext-color-map-marker-route\n\nRating\ntext-color-rating-1\ntext-color-rating-2\ntext-color-rating-3\ntext-color-rating-4\ntext-color-rating-5\n\nGray\ntext-color-decent\ntext-color-lightest\ntext-color-lighter\ntext-color-light\ntext-color-gray\ntext-color-dark\ntext-color-darker\ntext-color-darkest\n\nHighlight\ntext-color-highlight-decent\ntext-color-highlight-lightest\ntext-color-highlight-lighter\ntext-color-highlight-light\ntext-color-highlight\ntext-color-highlight-dark\ntext-color-highlight-darker\ntext-color-highlight-darkest\nHover text\nBasic\nhover-text-color-white\nhover-text-color-black\n\nBrand\nhover-text-color-primary\nhover-text-color-secondary\n\nStatus\nhover-text-color-info\nhover-text-color-success\nhover-text-color-warning\nhover-text-color-danger\n\nDriving status\nhover-text-color-status-available\nhover-text-color-status-driving\nhover-text-color-status-resting\nhover-text-color-status-working\n\nMap marker\nhover-text-color-map-marker-asset\nhover-text-color-map-marker-poi\nhover-text-color-map-marker-geofence\nhover-text-color-map-marker-route\n\nRating\nhover-text-color-rating-1\nhover-text-color-rating-2\nhover-text-color-rating-3\nhover-text-color-rating-4\nhover-text-color-rating-5\n\nGray\nhover-text-color-decent\nhover-text-color-lightest\nhover-text-color-lighter\nhover-text-color-light\nhover-text-color-gray\nhover-text-color-dark\nhover-text-color-darker\nhover-text-color-darkest\n\nHighlight\nhover-text-color-highlight-decent\nhover-text-color-highlight-lightest\nhover-text-color-highlight-lighter\nhover-text-color-highlight-light\nhover-text-color-highlight\nhover-text-color-highlight-dark\nhover-text-color-highlight-darker\nhover-text-color-highlight-darkest\nSVGs\nBackground\nBackground size\n\nBackground position\n\nBackground repeat\nBorder\nHover Border Color\n\nHover Border Color with Transition\n\nHover Border Style\nLast Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\nDivider\nYou can use the the shorthanddivider-yfor the automatic combination ofdivider-y-1,divider-style-solidanddivider-color-light\ndivider-y-1\ndivider-y-1\ndivider-y-1\ndivider-y-1\n\ndivider-y-2\ndivider-y-2\ndivider-y-2\ndivider-y-2\n\ndivider-y-3\ndivider-y-3\ndivider-y-3\ndivider-y-3\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-2\ndivider-x-2\ndivider-x-2\nOpacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nHover opacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nRounded\nrounded\n...-circle\n\n...-top\n...-bottom\n...-left\n...-right\n\n...-top-left\n...-top-right\n...-bottom-right\n...-bottom-left\n...-small\n...\n...-large\n...-extra-large\nShadows\nThe default shadow class is intended to be used on panels or blocks which should stand out from the light gray background and should be avoided to put everywhere. Use it to emphasize certain blocks or panels e.g. on a dashboard or items of a drag and drop list.\n\nDo not use hard shadows on tables, in dialogs, or on elements placed on white background.\n\nThe exception for not using shadows on a white background is for floating elements placed above the content for instance via position absolute.\nshadow-default\nPanel with shadow\nshadow-default\nShadow variants\nSurrounding shadows\n\nshadow-subtle\nshadow-muted\nshadow-accent\nshadow-default\nshadow-smooth\nshadow-hard\n\nDirection shadows\n\nshadow-muted-down\nshadow-default-down\n\nshadow-smooth-up\nshadow-smooth-down\nshadow-hard-up\nshadow-hard-down\n\nAccent shadow for list items\n\nNote\nWhen utilizing the shadow-accent avoid combining it with a border style, as the shadow is optimized for small block items like those in a list and works best without a border.\n\nItem\nItem\nItem\nItem\nItem\nItem\nRIOglyph\nDefault\n\nSized icons\n\nColored icons\nVehicle icons\nVehicle icons\n\nBaseline vehicle icons\nPair icons\nDefault\n\nWith background\n\nDisplay engine types\n\nSized\nAnimated icons\nSpinning icons\n\nPulsing icons\nDisabled icons\nDefault\n\nWith red line\n\nInverse\nFilled icons\nDefault filled icons\n\nColored filled icons\n\nGood use cases examples for icons with a filled circle background\n\nHeadline enhancements: For emphasizing key points in headings or subheadings, like \"New features\" or \"Highlights,\" where the icon in a filled circle draws attention without being too overwhelming.\n\nHelp/Documentation pages: Icons with filled circles are perfect for highlighting actions or key steps in a guide. They help break down text-heavy content and make instructions visually appealing. Example: For \"step-by-step\" instructions, an icon inside a circle could represent each action (e.g., a checkmark icon to signify completed tasks or a question mark for additional help).\n\nFeature lists and cards: Use filled circle icons as design elements for feature lists, product highlights, or feature comparisons. This works especially well when listing distinct features of a product, app, or service.\n\nWhen NOT to use a filled circle icon\nAvoid inconsistent usage in buttons – If some buttons have a filled circle and others don’t, the UI becomes inconsistent.\n\nDon’t use it for simple inline icons – Icons inside text (e.g., \"🔍 Search\") or standalone icons in tables don’t need a background.\n\nNot for decorative or unnecessary elements – If an icon doesn’t need extra emphasis, the filled circle is overkill.\nCustom icons\nUse external svgs as RIOglyph icons. Please read our guidelines\nRIOglyph text alignment\nWhen an icon is used alongside text in a flex, grid, or inline text layout, additional alignment adjustments may be needed. To ensure proper alignment, the following classes are available:\nrioglyph-align-top - assuming a display-flex and default line-height\nrioglyph-align-bottom - assuming a display-flex and line-height 1.25\nrioglyph-align-baseline - assuming an inline text and default line-height\n\nThese classes help align icons correctly within different layouts where they are used alongside text.\nNote: Setting a text line-height class will also affect the icon alignment and may require manual adjustments to ensure proper positioning.\nBaseline-aligned icon with inline text\nLorem ipsum dolor\n\nTop-aligned icon with text inside a flex-box layout\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nBottom-aligned icon inside an inline-flex layout and line-height-125rel\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nIcons inside a link usually don't need to be aligned manually\nLorem ipsum\n\nBaseline-aligned icon inside an inline h3 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\n\nBaseline-aligned icon inside an inline h4 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\nIcon library\nSearch\n\nrioglyph rioglyph-academic-cap\nrioglyph rioglyph-addressbook\nrioglyph rioglyph-ai\nrioglyph rioglyph-air-pay\nrioglyph rioglyph-am\nrioglyph rioglyph-angle-double-down\nrioglyph rioglyph-angle-double-left\nrioglyph rioglyph-angle-double-right\nrioglyph rioglyph-angle-double-up\nrioglyph rioglyph-antenna\nrioglyph rioglyph-api\nrioglyph rioglyph-archive\nrioglyph rioglyph-area-chart\nrioglyph rioglyph-area-in\nrioglyph rioglyph-area-out\nrioglyph rioglyph-arrow-down\nrioglyph rioglyph-arrow-left\nrioglyph rioglyph-arrow-right\nrioglyph rioglyph-arrow-up\nrioglyph rioglyph-arrows-collapse\nrioglyph rioglyph-arrows-combine\nrioglyph rioglyph-arrows-expand\nrioglyph rioglyph-arrows-horizontal\nrioglyph rioglyph-arrows-split\nrioglyph rioglyph-assigned\nrioglyph rioglyph-axis-x\nrioglyph rioglyph-axis-y\nrioglyph rioglyph-axis-z\nrioglyph rioglyph-axle\nrioglyph rioglyph-ban-circle\nrioglyph rioglyph-bar-chart-box\nrioglyph rioglyph-battery-charging\nrioglyph rioglyph-battery-level-empty\nrioglyph rioglyph-battery-level-full\nrioglyph rioglyph-battery-level-low\nrioglyph rioglyph-beacon\nrioglyph rioglyph-book\nrioglyph rioglyph-bookable-poi\nrioglyph rioglyph-bookmark-square\nrioglyph rioglyph-bookmark\nrioglyph rioglyph-border-crossing\nrioglyph rioglyph-brain\nrioglyph rioglyph-brake\nrioglyph rioglyph-branch-horizontal\nrioglyph rioglyph-branch-remove\nrioglyph rioglyph-branch-vertical\nrioglyph rioglyph-broadcast\nrioglyph rioglyph-building\nrioglyph rioglyph-bulb\nrioglyph rioglyph-bus-baseline\nrioglyph rioglyph-bus-breakdown\nrioglyph rioglyph-bus\nrioglyph rioglyph-businessman\nrioglyph rioglyph-calendar-parking\nrioglyph rioglyph-calendar-plus\nrioglyph rioglyph-calendar-today\nrioglyph rioglyph-calendar\nrioglyph rioglyph-camera\nrioglyph rioglyph-car-baseline\nrioglyph rioglyph-car-wash\nrioglyph rioglyph-car\nrioglyph rioglyph-card-hotel\nrioglyph rioglyph-card-reader\nrioglyph rioglyph-cards-add\nrioglyph rioglyph-cards-grid\nrioglyph rioglyph-cards-list\nrioglyph rioglyph-cards-table\nrioglyph rioglyph-cargo\nrioglyph rioglyph-carrier\nrioglyph rioglyph-chat\nrioglyph rioglyph-check-badge\nrioglyph rioglyph-check-shield\nrioglyph rioglyph-checkbox-checked\nrioglyph rioglyph-checkbox\nrioglyph rioglyph-checkboxes\nrioglyph rioglyph-chevron-down\nrioglyph rioglyph-chevron-left\nrioglyph rioglyph-chevron-right\nrioglyph rioglyph-chevron-up\nrioglyph rioglyph-chip\nrioglyph rioglyph-circle-dashed\nrioglyph rioglyph-circle-stack\nrioglyph rioglyph-click\nrioglyph rioglyph-climate-control\nrioglyph rioglyph-clipboard\nrioglyph rioglyph-cloud-download\nrioglyph rioglyph-cloud-not-saved\nrioglyph rioglyph-cloud-progress\nrioglyph rioglyph-cloud-upload\nrioglyph rioglyph-cloud\nrioglyph rioglyph-coasting\nrioglyph rioglyph-code-braces\nrioglyph rioglyph-code-brackets\nrioglyph rioglyph-coffee\nrioglyph rioglyph-cog\nrioglyph rioglyph-color-swatch\nrioglyph rioglyph-comment\nrioglyph rioglyph-compare\nrioglyph rioglyph-compass\nrioglyph rioglyph-component-custom-recurrent\nrioglyph rioglyph-component-custom\nrioglyph rioglyph-construction\nrioglyph rioglyph-convert\nrioglyph rioglyph-conveyor-belt\nrioglyph rioglyph-cookie\nrioglyph rioglyph-cooling\nrioglyph rioglyph-cost-efficiency\nrioglyph rioglyph-crown\nrioglyph rioglyph-cruise-control\nrioglyph rioglyph-csv\nrioglyph rioglyph-cube-dashed\nrioglyph rioglyph-cube\nrioglyph rioglyph-currency-euro\nrioglyph rioglyph-damages\nrioglyph rioglyph-dangerousgoods\nrioglyph rioglyph-dashboard-view\nrioglyph rioglyph-dashboard\nrioglyph rioglyph-delivery-completed\nrioglyph rioglyph-delivery-error\nrioglyph rioglyph-delivery-late\nrioglyph rioglyph-delivery-on-track\nrioglyph rioglyph-delivery-warning\nrioglyph rioglyph-delivery\nrioglyph rioglyph-design\nrioglyph rioglyph-desktop\nrioglyph rioglyph-detail-view-info\nrioglyph rioglyph-detail-view\nrioglyph rioglyph-direction\nrioglyph rioglyph-discount-badge\nrioglyph rioglyph-document-out\nrioglyph rioglyph-document\nrioglyph rioglyph-download\nrioglyph rioglyph-drag-n-drop\nrioglyph rioglyph-drive-history\nrioglyph rioglyph-driver-card\nrioglyph rioglyph-driver\nrioglyph rioglyph-drivercard-in\nrioglyph rioglyph-drivercard-out\nrioglyph rioglyph-duplicate\nrioglyph rioglyph-earphone\nrioglyph rioglyph-emergency-stop\nrioglyph rioglyph-empty\nrioglyph rioglyph-engine\nrioglyph rioglyph-envelope-indicator\nrioglyph rioglyph-envelope-open\nrioglyph rioglyph-envelope\nrioglyph rioglyph-erase\nrioglyph rioglyph-error-sign\nrioglyph rioglyph-euro-note\nrioglyph rioglyph-exclamation-sign\nrioglyph rioglyph-exclamation\nrioglyph rioglyph-eye-close\nrioglyph rioglyph-eye-closed\nrioglyph rioglyph-eye-open\nrioglyph rioglyph-face-frown\nrioglyph rioglyph-face-neutral\nrioglyph rioglyph-face-smile\nrioglyph rioglyph-facetime-video\nrioglyph rioglyph-factory\nrioglyph rioglyph-file-signature\nrioglyph rioglyph-files\nrioglyph rioglyph-fill\nrioglyph rioglyph-filling-e-station\nrioglyph rioglyph-filling-station\nrioglyph rioglyph-filter-active\nrioglyph rioglyph-filter-reset\nrioglyph rioglyph-filter\nrioglyph rioglyph-fingerprint\nrioglyph rioglyph-finish\nrioglyph rioglyph-fire\nrioglyph rioglyph-flag\nrioglyph rioglyph-flash\nrioglyph rioglyph-folder-closed\nrioglyph rioglyph-folder-open\nrioglyph rioglyph-fuel-electric\nrioglyph rioglyph-fuel-gas\nrioglyph rioglyph-fuel-hydrogen\nrioglyph rioglyph-fuel-liquid\nrioglyph rioglyph-fuel-mix\nrioglyph rioglyph-fullscreen\nrioglyph rioglyph-geofence\nrioglyph rioglyph-get\nrioglyph rioglyph-give\nrioglyph rioglyph-globe-alt\nrioglyph rioglyph-globe\nrioglyph rioglyph-group-blocks\nrioglyph rioglyph-group\nrioglyph rioglyph-hand-down\nrioglyph rioglyph-hand-left\nrioglyph rioglyph-hand-right\nrioglyph rioglyph-hand-up\nrioglyph rioglyph-handshake\nrioglyph rioglyph-hash\nrioglyph rioglyph-heart\nrioglyph rioglyph-heating\nrioglyph rioglyph-hierarchy\nrioglyph rioglyph-history\nrioglyph rioglyph-home-sign\nrioglyph rioglyph-home\nrioglyph rioglyph-hour-glass\nrioglyph rioglyph-id\nrioglyph rioglyph-inbox-in\nrioglyph rioglyph-inbox-out\nrioglyph rioglyph-inbox-stack\nrioglyph rioglyph-inbox\nrioglyph rioglyph-info-sign\nrioglyph rioglyph-info\nrioglyph rioglyph-insert\nrioglyph rioglyph-issue-tracking\nrioglyph rioglyph-key\nrioglyph rioglyph-kickdown\nrioglyph rioglyph-language\nrioglyph rioglyph-layer-pois\nrioglyph rioglyph-layer\nrioglyph rioglyph-leafs\nrioglyph rioglyph-light-bulb\nrioglyph rioglyph-line-chart\nrioglyph rioglyph-link\nrioglyph rioglyph-load-unload\nrioglyph rioglyph-load\nrioglyph rioglyph-location-arrow\nrioglyph rioglyph-lock-open\nrioglyph rioglyph-lock\nrioglyph rioglyph-log-in\nrioglyph rioglyph-logout\nrioglyph rioglyph-looking-glass-man\nrioglyph rioglyph-looking-glass\nrioglyph rioglyph-magic-wand\nrioglyph rioglyph-maintenance-components\nrioglyph rioglyph-map-location\nrioglyph rioglyph-map-marker\nrioglyph rioglyph-map\nrioglyph rioglyph-megaphone\nrioglyph rioglyph-menu-hamburger\nrioglyph rioglyph-merge\nrioglyph rioglyph-migrate\nrioglyph rioglyph-milage\nrioglyph rioglyph-minus-light\nrioglyph rioglyph-minus-sign\nrioglyph rioglyph-minus\nrioglyph rioglyph-missing\nrioglyph rioglyph-mode-dark-light\nrioglyph rioglyph-more\nrioglyph rioglyph-new-window\nrioglyph rioglyph-newspaper\nrioglyph rioglyph-note\nrioglyph rioglyph-notification\nrioglyph rioglyph-number-1\nrioglyph rioglyph-number-2\nrioglyph rioglyph-number-3\nrioglyph rioglyph-off\nrioglyph rioglyph-oil-can\nrioglyph rioglyph-ok-circle\nrioglyph rioglyph-ok-dashed\nrioglyph rioglyph-ok-sign\nrioglyph rioglyph-ok\nrioglyph rioglyph-onboarding\nrioglyph rioglyph-ongoing\nrioglyph rioglyph-option-horizontal\nrioglyph rioglyph-option-vertical\nrioglyph rioglyph-order\nrioglyph rioglyph-palette-broken\nrioglyph rioglyph-palette\nrioglyph rioglyph-paper-clip\nrioglyph rioglyph-parcel-broken\nrioglyph rioglyph-parcel\nrioglyph rioglyph-parking\nrioglyph rioglyph-pause-circle\nrioglyph rioglyph-pause\nrioglyph rioglyph-pdf-file\nrioglyph rioglyph-pencil-square\nrioglyph rioglyph-pencil\nrioglyph rioglyph-phone\nrioglyph rioglyph-pictures\nrioglyph rioglyph-pin-range\nrioglyph rioglyph-pin\nrioglyph rioglyph-play-circle\nrioglyph rioglyph-play\nrioglyph rioglyph-plugged-off\nrioglyph rioglyph-plugged-on\nrioglyph rioglyph-plus-light\nrioglyph rioglyph-plus-sign\nrioglyph rioglyph-plus\nrioglyph rioglyph-pm\nrioglyph rioglyph-poi\nrioglyph rioglyph-polygon\nrioglyph rioglyph-position\nrioglyph rioglyph-print\nrioglyph rioglyph-progress-ongoing\nrioglyph rioglyph-progress-remaining\nrioglyph rioglyph-progression\nrioglyph rioglyph-prompt\nrioglyph rioglyph-pto-off\nrioglyph rioglyph-pto-on\nrioglyph rioglyph-pushpin\nrioglyph rioglyph-puzzle\nrioglyph rioglyph-pylon\nrioglyph rioglyph-qr-code\nrioglyph rioglyph-question-sign\nrioglyph rioglyph-question\nrioglyph rioglyph-record\nrioglyph rioglyph-recycle\nrioglyph rioglyph-refresh\nrioglyph rioglyph-remove-circle\nrioglyph rioglyph-remove-sign\nrioglyph rioglyph-remove\nrioglyph rioglyph-repeat-square\nrioglyph rioglyph-repeat\nrioglyph rioglyph-resize-full\nrioglyph rioglyph-resize-horizontal\nrioglyph rioglyph-resize-small\nrioglyph rioglyph-resize-vertical\nrioglyph rioglyph-retrofit\nrioglyph rioglyph-revert\nrioglyph rioglyph-rio-marker\nrioglyph rioglyph-rio\nrioglyph rioglyph-road-restrictions\nrioglyph rioglyph-road\nrioglyph rioglyph-robot\nrioglyph rioglyph-rocket\nrioglyph rioglyph-role-management\nrioglyph rioglyph-route-option\nrioglyph rioglyph-route-view\nrioglyph rioglyph-route\nrioglyph rioglyph-ruler\nrioglyph rioglyph-satellite-radar\nrioglyph rioglyph-save\nrioglyph rioglyph-scale\nrioglyph rioglyph-scan\nrioglyph rioglyph-scissors\nrioglyph rioglyph-search-list\nrioglyph rioglyph-search-truck\nrioglyph rioglyph-search\nrioglyph rioglyph-send\nrioglyph rioglyph-series\nrioglyph rioglyph-server-stack\nrioglyph rioglyph-settings\nrioglyph rioglyph-share-alt\nrioglyph rioglyph-share-nodes\nrioglyph rioglyph-share\nrioglyph rioglyph-shelve\nrioglyph rioglyph-ship\nrioglyph rioglyph-shopping-bag\nrioglyph rioglyph-shopping-cart\nrioglyph rioglyph-signature\nrioglyph rioglyph-slope-down-max\nrioglyph rioglyph-slope-down-min\nrioglyph rioglyph-slope-up-max\nrioglyph rioglyph-slope-up-min\nrioglyph rioglyph-sort-by-attributes-alt\nrioglyph rioglyph-sort-by-attributes\nrioglyph rioglyph-sort\nrioglyph rioglyph-sparkles\nrioglyph rioglyph-speed\nrioglyph rioglyph-sphere\nrioglyph rioglyph-spinner\nrioglyph rioglyph-split-view\nrioglyph rioglyph-square-dashed\nrioglyph rioglyph-stack-add\nrioglyph rioglyph-stack-iso\nrioglyph rioglyph-stack\nrioglyph rioglyph-star-empty\nrioglyph rioglyph-star\nrioglyph rioglyph-stars\nrioglyph rioglyph-start\nrioglyph rioglyph-stats-high\nrioglyph rioglyph-stats-line-dots\nrioglyph rioglyph-stats-low\nrioglyph rioglyph-stats-medium\nrioglyph rioglyph-stats\nrioglyph rioglyph-status-available\nrioglyph rioglyph-status-change-horizontal\nrioglyph rioglyph-status-change\nrioglyph rioglyph-status-driving\nrioglyph rioglyph-status-resting\nrioglyph rioglyph-status-working\nrioglyph rioglyph-steering-wheel\nrioglyph rioglyph-stopover\nrioglyph rioglyph-support\nrioglyph rioglyph-table-view\nrioglyph rioglyph-tachograph-download\nrioglyph rioglyph-tachograph\nrioglyph rioglyph-tag\nrioglyph rioglyph-tasks\nrioglyph rioglyph-temperature\nrioglyph rioglyph-th-list\nrioglyph rioglyph-thumbs-down\nrioglyph rioglyph-thumbs-up\nrioglyph rioglyph-tickets\nrioglyph rioglyph-time-alt\nrioglyph rioglyph-time-cancle\nrioglyph rioglyph-time-incomplete\nrioglyph rioglyph-time\nrioglyph rioglyph-tire\nrioglyph rioglyph-tms\nrioglyph rioglyph-to-bottom\nrioglyph rioglyph-to-left\nrioglyph rioglyph-to-right\nrioglyph rioglyph-to-top\nrioglyph rioglyph-tracking-package\nrioglyph rioglyph-traffic-lights\nrioglyph rioglyph-trailer-baseline\nrioglyph rioglyph-trailer\nrioglyph rioglyph-trailerposition\nrioglyph rioglyph-train\nrioglyph rioglyph-transfer\nrioglyph rioglyph-transition-push-right\nrioglyph rioglyph-transition-right\nrioglyph rioglyph-trash\nrioglyph rioglyph-triangle-bottom\nrioglyph rioglyph-triangle-left\nrioglyph rioglyph-triangle-right\nrioglyph rioglyph-triangle-top\nrioglyph rioglyph-trophy\nrioglyph rioglyph-truck-baseline\nrioglyph rioglyph-truck-breakdown\nrioglyph rioglyph-truck-unit\nrioglyph rioglyph-truck\nrioglyph rioglyph-unassigned\nrioglyph rioglyph-unavailable\nrioglyph rioglyph-unlink\nrioglyph rioglyph-upload\nrioglyph rioglyph-user-add\nrioglyph rioglyph-user-group\nrioglyph rioglyph-user-ok\nrioglyph rioglyph-user-remove\nrioglyph rioglyph-user-sign-off\nrioglyph rioglyph-user-sign\nrioglyph rioglyph-user\nrioglyph rioglyph-van-baseline\nrioglyph rioglyph-van\nrioglyph rioglyph-variable\nrioglyph rioglyph-video\nrioglyph rioglyph-volume\nrioglyph rioglyph-wallet\nrioglyph rioglyph-warehouse\nrioglyph rioglyph-warning-sign\nrioglyph rioglyph-weather-cloudy\nrioglyph rioglyph-weather-icy\nrioglyph rioglyph-weather-overcast\nrioglyph rioglyph-weather-raining\nrioglyph rioglyph-weather-snowing\nrioglyph rioglyph-weather-stormy\nrioglyph rioglyph-weather-sunny\nrioglyph rioglyph-weather-thundering\nrioglyph rioglyph-weather-windy\nrioglyph rioglyph-weight\nrioglyph rioglyph-width\nrioglyph rioglyph-wifi\nrioglyph rioglyph-window\nrioglyph rioglyph-workflow-step\nrioglyph rioglyph-workflow\nrioglyph rioglyph-workshop\nrioglyph rioglyph-wrench\nrioglyph rioglyph-xmas-raindeer\nrioglyph rioglyph-xmas-santa\nText styles\nHeadline size\n\ntext-size-h1\ntext-size-h2\ntext-size-h3\ntext-size-h4\ntext-size-h5\ntext-size-h6\n\nText size\n\ntext-size-10\ntext-size-11\ntext-size-12\ntext-size-14\ntext-size-16\ntext-size-18\ntext-size-20\n\nText weight\n\ntext-thin\ntext-light\ntext-normal\ntext-medium\ntext-bold\nText style\n\ntext-style-normal\ntext-style-italic\n\nText decoration\n\ntext-decoration-none\nhover-text-decoration-none\ntext-decoration-line-through\ntext-decoration-underline\nunderline-offset-2\nunderline-offset-3\nunderline-offset-4\nunderline-offset-5\n\nText wrapping\n\nwhite-space-nowrap\nwhite-space-normal\n\nText transform\n\ntext-capitalize\nTEXT-LOWERCASE\ntext-uppercase\ntext capitalize first word\ntext-transform-none\nHeadings\n\nThe reason why there are heading tags like <h2> and heading classes like .h2 is due to different use cases. A <h2> tag for instance is an essential SEO tag often used by a CMS like WordPress or Typo3. For these Tools, we can not change the code but we need some styling for the HTML element itself.\nAnother example is the <strong> or <b> tags and the .text-bold class. The heading classes like the .h2 class can be used in a service application, as those are not SEO relevant. As the UIKIT uses an atomic CSS approach, the same style can be achieved when combining .text-size-h2 .text-bold margin-top-10 margin-bottom-20 classes.\n\nHeadline tags\n\nHeading 1\nHeading 2\nHeading 3\nHeading 4\nHeading 5\nHeading 6\n\nHeadline classes\n\nh1\nh2\nh3\nh4\nh5\nh6\n\nMisc tags\n\nThis line of text is meant to be treated as fine print.\nThe following snippet of text is rendered as bold text.\nThe following snippet of text is rendered as italicized text.\nAn abbreviation of the word attribute is attr.\nAlignment\ntext-left\ntext-center\ntext-right\nBlockquote\nLorem ipsum white.Lorem ipsum black.Lorem ipsum decent.Lorem ipsum lightest.Lorem ipsum lighter.Lorem ipsum light.Lorem ipsum gray.Lorem ipsum dark.Lorem ipsum darker.Lorem ipsum darkest.\nCode\nvar test = 'Hello World!';\nThis is an inline Codeblock for use in text.\n\n// This is a JS example\nvar test = \"Hello World\";\nconsole.log(test);\nCursor\nYou can disable all pointer events by addingpointer-events-none\ncursor-default\ncursor-pointer\ncursor-text\ncursor-move\ncursor-grabbing\ncursor-grab\ncursor-not-allowed\ncursor-row-resize\ncursor-col-resize\ncursor-col-resize\ncursor-ew-resize\ncursor-help\ncursor-cell\ncursor-copy\ncursor-crosshair\nEllipsis\nNote: Ellipsis only works with block elements. It does not work withdisplay-grid. Combine the classes withdisplay-block or display-flex\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nLine height\nWhen working with text, it's important to consider the relationship between the text size and the line height. For larger headlines, a line height of 1.2 to 1.25 is recommended to maintain readability and visual balance. For plain body text or text inside promotion blocks, a slightly larger line height of 1.4 to 1.5 is suggested to improve readability and the overall reading experience.\n\nRule of thumb: the larger the text size, the smaller the line height should be.\n\nNote: The listed classes are not necessary for the use of ourtext-size classes. Use them only if you want to have the exact the same line-height as your text-size is.\nline-height-10\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-11\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-12\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-14\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-16\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-18\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-20\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-125rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-130rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-135rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-150rel\n\nLorem ipsum dolor sit amet, dui eget elit.\nline-height-h1\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h2\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h3\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h4\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h5\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h6\n\nLorem ipsum dolor sit amet, dui eget elit.\nUser select\nuser-select-all\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nuser-select-none\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nText box\ntext-box-trim-start\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-trim-both\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-auto\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nno text-box\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nText wrapping\nWord break\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nHyphens\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nBalance\ncaniuse\n\nAllows text to have it's lines broken that each line is roughly the same width.\n\nPretty\ncaniuse\n\nIt evaluate the last four lines in a text block to work out adjustments as needed to ensure the last line has two or more words.\nCols\nNote: Col classes without a breakpoint addition are always weaker than with an addition. To reset a breakpoint class, you always have to set another larger breakpoint class, otherwise the set breakpoint is always active.Right example col-xs-6col-sm-12 col-xs-6 will only be active on small screensWrong example col-xs-6col-12 col-xs-6 will always be active\ncol-12\n\ncol-6\n\ncol-6\n\ncol-4\n\ncol-4\n\ncol-4\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\nResponsive cols\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\nEqual Height Cols\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nContainer fluid\ncontainer fluid-small\ncontainer fluid-default\ncontainer fluid-large\ncontainer fluid-extra-large\ncontainer fluid-ultra-large\nContainer\nNote: If a container is used without the fluid classes, it has a maximum width per breakpoint and will jump when the screen is resized.\ncontainer\nContainer queries\nWhat are container queries?\nWhile traditional container classes like container and fluid-default respond to the viewport width,container queries respond to the size of the component’s parent container. This allows components to adapt their layout based on context, not just screen size.\n\nBy reacting to the container's width instead of the screen, container queries enable components to become context-aware—adapting their layout depending on where they are used. Whether inside a narrow sidebar or a wide content area, components can now behave responsively within their own environment, making designs more modular, flexible, and reusable.\nUsage\nThe UIKIT provides atomic utility classes for container queries, enabling you to quickly apply conditional styles directly in your JSX/HTML based on container width.\n\n1. Define the container: mark an ancestor element as a container using the specific cq-container class. This tells the browser which element's size should be monitored. <div class=\"cq-container\"<!-- content goes here --</div\n2. Apply CQ utility classes: add cq-300:... classes to the descendant elements you want to style conditionally based on the container's. <div class=\"cq-container\"<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"<!-- more content goes here --</div</div\n\nhtml\n<div class=\"cq-container\"\n<!-- content goes here --\n</div\n\nhtml\n<div class=\"cq-container\"\n<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"\n<!-- more content goes here --\n</div\n</div\n\nThe class naming convention is: cq: + [breakpointValue] + : + [property] + - + [value]\n\n- cq: is the prefix for all container query utilities.\n- [breakpointValue] is one of the numeric identifiers from the table above (e.g., 300, 400, 500, 600, 700).\n- [property] is the type of property being styled (e.g., padding, margin-top, flex-column, grid-cols).\n- [value] is the value from the library's scale (e.g., 10, 25, auto).\nContainer query breakpoints\nOur container query utilities are based on a set of predefined width breakpoints. The breakpoint value is included directly in the class name for clarity.\n\nWe use a \"max-width\" query for the smallest breakpoint (300px) to target styles up to that size, and \"min-width\" queries for all larger breakpoints to target styles from that size upwards.\nContainer query example and classes\nItem 1\nItem 2\nItem 3\nFlexbox\nCenter\n\nLorem ipsum dolor\n\nTop start\n\nLorem ipsum dolor\n\nBottom start\n\nLorem ipsum dolor\n\nTop end\n\nLorem ipsum dolor\n\nBottom end\n\nLorem ipsum dolor\n\nSpace between\n\nLorem ipsum dolor\nLorem ipsum dolor\nLorem ipsum dolor\n\nEven split columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nMultiple even columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\n\n70/30 columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\nGrid\ngrid-cols-1\n\ngrid-cols-2\ngrid-cols-2\n\ngrid-cols-3\ngrid-cols-3\ngrid-cols-3\n\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\n\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\n\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\n\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\n\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\n\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\n\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\n\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\n\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\nGrid colspan / rowspan\ngrid-colspan-3\nGrid column-start / column-end\nGrid auto-fit\nIn CSS Grid, the auto-fit keyword is used with the repeat() function to automatically adjust the number of columns (or rows) based on the available space in the container. It helps create responsive layouts by filling the container with as many columns (or rows) of a specified size as possible.\n\nDynamic Column Creation: \"auto-fit\" automatically creates as many columns as will fit in the available space, potentially adding or removing columns as the container resizes.\n\nResponsive Design: Ensures that the grid adapts to different screen sizes by adjusting the number of columns.\nGrid max-content / auto content\nThe max-content value sizes the grid column to be as wide as the largest piece of content inside it. Essentially, it takes up as much space as necessary to fit the longest word or item without breaking. This is useful when you want the column to expand to fit its content, ensuring no content is clipped or wrapped unnecessarily.\n\nThe auto value sizes the grid column based on the content, but it can also take into account the available space and other factors. If there's more space available, \"auto\" can expand to fill it, but it won't exceed the available space like \"max-content\". This is useful when you want the column to take up space according to its content but also adapt to the overall layout and available space.\n\nChoosing between max-content and auto depends on whether you want the column to strictly fit its content (potentially ignoring the available space) or to adapt to the content while also being flexible within the grid layout.\nmax-content\n1fr\n\nmax-content\n1fr\nmax-content\n1fr\n\n1fr\nmax-content\n\n1fr\nmax-content\n1fr\nmax-content\n\nauto\n1fr\n\nauto\n1fr\nauto\n1fr\n\n1fr\nauto\n\n1fr\nauto\n1fr\nauto\nGrid rows\nHelper class for 3 rows where the middle row expands and can scroll\nLorem item 0\nLorem ipsum dolor sit amet\n\nLorem item 1\nLorem ipsum dolor sit amet\n\nLorem item 2\nLorem ipsum dolor sit amet\n\nLorem item 3\nLorem ipsum dolor sit amet\n\nLorem item 4\nLorem ipsum dolor sit amet\n\nLorem item 5\nLorem ipsum dolor sit amet\n\nLorem item 6\nLorem ipsum dolor sit amet\n\nLorem item 7\nLorem ipsum dolor sit amet\n\nButton\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGrid placement\nplace-items-center\nGrid stacking\nstack item 1\nstack item 2\n\nstack item 1\nstack item 2\nSubgrid\nThe subgrid value in CSS Grid Layout is a feature that allows a nested grid to inherit the column and/or row definitions from its parent grid container. This means that the subgrid can align its items according to the tracks defined in the parent grid, creating a more consistent and aligned layout structure. It is particularly useful for complex layouts where nested elements need to align with the overall grid structure without redefining the grid tracks. By using subgrid, you can maintain a cohesive design while simplifying the CSS code needed for layout alignment. This feature enhances the flexibility and power of CSS Grid, making it easier to manage nested grid layouts.\nForm example\nConnection\nHostPortReally long label\nCredentials\nUsernamePasswordCheckboxYet another level of nesting\n\nSubgrid enabled\nSubmit\nFull NameEmailMessage\n\nSubgrid enabled\nSubmit\nSubgrid Cards\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla? Consectetur adipisci illum ipsa reprehenderit deleniti quia qui aliquid tempora ea accusamus. Quibusdam.\nby Mia at Company\nLove it\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla?\nby Mia at Company\nLove it\nWhat if we have a much longer article title?\nLorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eveniet, tempore error maxime praesentium eos.\nby Jen \"Boss\" Simmons at Company\nLove it so\nArticle titles aren't consistent\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Deja \"Empathic Dev\" Hodge at Company\nLove it\nThis article title will need to be fixed in Post-Production with a much shorter and catchier click-bait title\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Ryanne \"Fix It In Post\" Hodson at Company\nLove it\nShort title\nLorem ipsum dolor sit amet consectetur adipisicing elit. Optio enim maxime repellat illo!\nby Jay \"Do It\" Dedman at Company\nLove it\n\nSubgrid enabled\nPosition\nLorem ipsum dolor sit amet\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGap\nNote: Since using a percentage vertical gap requires a fixed height of the wrapping element, we decided to offer only horizontal percentage gap classes. Vertical gap in px is of course possible.\ngap-0\ngap-0\ngap-0\n\ngap-1\ngap-1\ngap-1\n\ngap-2\ngap-2\ngap-2\n\ngap-3\ngap-3\ngap-3\n\ngap-4\ngap-4\ngap-4\n\ngap-5\ngap-5\ngap-5\n\ngap-10\ngap-10\ngap-10\n\ngap-15\ngap-15\ngap-15\n\ngap-20\ngap-20\ngap-20\n\ngap-25\ngap-25\ngap-25\n\ngap-50\ngap-50\ngap-50\nSpace\nNote: For flex or grid solutions please use gap instead.\nspace-y-0\nspace-y-0\nspace-y-0\n\nspace-y-1\nspace-y-1\nspace-y-1\n\nspace-y-2\nspace-y-2\nspace-y-2\n\nspace-y-3\nspace-y-3\nspace-y-3\n\nspace-y-4\nspace-y-4\nspace-y-4\n\nspace-y-5\nspace-y-5\nspace-y-5\n\nspace-y-10\nspace-y-10\nspace-y-10\n\nspace-y-15\nspace-y-15\nspace-y-15\n\nspace-y-20\nspace-y-20\nspace-y-20\n\nspace-y-25\nspace-y-25\nspace-y-25\n\nspace-y-50\nspace-y-50\nspace-y-50\nMargin\nSurrouding\n\nmargin-0\n\nmargin-1\n\nmargin-2\n\nmargin-3\n\nmargin-4\n\nmargin-5\n\nmargin-10\n\nmargin-15\n\nmargin-20\n\nmargin-25\n\nmargin-50\n\nHorizontal\n\nmargin-x-0\n\nmargin-x-1\n\nmargin-x-2\n\nmargin-x-3\n\nmargin-x-4\n\nmargin-x-5\n\nmargin-x-10\n\nmargin-x-15\n\nmargin-x-20\n\nmargin-x-25\n\nmargin-x-50\n\nVertical\n\nmargin-y-0\n\nmargin-y-1\n\nmargin-y-2\n\nmargin-y-3\n\nmargin-y-4\n\nmargin-y-5\n\nmargin-y-10\n\nmargin-y-15\n\nmargin-y-20\n\nmargin-y-25\n\nmargin-y-50\n\nLeft\n\nmargin-left-0\n\nmargin-left-1\n\nmargin-left-2\n\nmargin-left-3\n\nmargin-left-4\n\nmargin-left-5\n\nmargin-left-10\n\nmargin-left-15\n\nmargin-left-20\n\nmargin-left-25\n\nmargin-left-50\n\nRight\n\nmargin-right-0\n\nmargin-right-1\n\nmargin-right-2\n\nmargin-right-3\n\nmargin-right-4\n\nmargin-right-5\n\nmargin-right-10\n\nmargin-right-15\n\nmargin-right-20\n\nmargin-right-25\n\nmargin-right-50\n\nTop\n\nmargin-top-0\n\nmargin-top-1\n\nmargin-top-2\n\nmargin-top-3\n\nmargin-top-4\n\nmargin-top-5\n\nmargin-top-10\n\nmargin-top-15\n\nmargin-top-20\n\nmargin-top-25\n\nmargin-top-50\n\nBottom\n\nmargin-bottom-0\n\nmargin-bottom-1\n\nmargin-bottom-2\n\nmargin-bottom-3\n\nmargin-bottom-4\n\nmargin-bottom-5\n\nmargin-bottom-10\n\nmargin-bottom-15\n\nmargin-bottom-20\n\nmargin-bottom-25\n\nmargin-bottom-50\nMargin helper\nLast child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast child (parent class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (parent class)\n\nChild\nChild\nChild\nChild\nChild\nPadding\nSurrouding\n\npadding-0\n\npadding-1\n\npadding-2\n\npadding-3\n\npadding-4\n\npadding-5\n\npadding-10\n\npadding-15\n\npadding-20\n\npadding-25\n\npadding-50\n\nHorizontal\n\npadding-x-0\n\npadding-x-1\n\npadding-x-2\n\npadding-x-3\n\npadding-x-4\n\npadding-x-5\n\npadding-x-10\n\npadding-x-15\n\npadding-x-20\n\npadding-x-25\n\npadding-x-50\n\nVertical\n\npadding-y-0\n\npadding-y-1\n\npadding-y-2\n\npadding-y-3\n\npadding-y-4\n\npadding-y-5\n\npadding-y-10\n\npadding-y-15\n\npadding-y-20\n\npadding-y-25\n\npadding-y-50\n\nLeft\n\npadding-left-0\n\npadding-left-1\n\npadding-left-2\n\npadding-left-3\n\npadding-left-4\n\npadding-left-5\n\npadding-left-10\n\npadding-left-15\n\npadding-left-20\n\npadding-left-25\n\npadding-left-50\n\nRight\n\npadding-right-0\n\npadding-right-1\n\npadding-right-2\n\npadding-right-3\n\npadding-right-4\n\npadding-right-5\n\npadding-right-10\n\npadding-right-15\n\npadding-right-20\n\npadding-right-25\n\npadding-right-50\n\nTop\n\npadding-top-0\n\npadding-top-1\n\npadding-top-2\n\npadding-top-3\n\npadding-top-4\n\npadding-top-5\n\npadding-top-10\n\npadding-top-15\n\npadding-top-20\n\npadding-top-25\n\npadding-top-50\n\nBottom\n\npadding-bottom-0\n\npadding-bottom-1\n\npadding-bottom-2\n\npadding-bottom-3\n\npadding-bottom-4\n\npadding-bottom-5\n\npadding-bottom-10\n\npadding-bottom-15\n\npadding-bottom-20\n\npadding-bottom-25\n\npadding-bottom-50\nHeight\nWidth\n30px\n35px\n40px\n45px\n50px\n60px\n70px\n80px\n90px\n100px\n\n10pct\n20pct\n25pct\n30pct\n33pct\n40pct\n50pct\n60pct\n66pct\n70pct\n75pct\n80pct\n90pct\n100pct\nContent based min-width\nThe min-width property defines the smallest width an element can shrink to. When using keywords like max-content, min-content, orfit-content, you tell the browser how the element should behave in relation to its content size. These values are especially useful in responsive layouts or flexible components where content-driven sizing is required.\n\n- min-width-min-content The element’s minimum width becomes the smallest possible width without causing content overflow. It allows text wrapping, meaning the element will compress as much as possible while still displaying all content correctly.\n- min-width-max-content The element’s minimum width equals the longest unbreakable line of its content. It prevents text or inline items from wrapping, forcing the box to expand horizontally to fit the entire content in one line. This may cause overflow if the content is too wide for its container.\n- min-width-fit-content This is a hybrid behavior — the element adapts its width somewhere betweenmin-content and max-content. The browser decides the best fit for the available space, making it suitable for adaptive or flexible layouts.\nmax-contentThis_is_a_really_long_word_that_will_not_break.\n\nmin-contentThis is a really long text that will break and wrap.\n\nfit-contentThis text fits naturally within the box.\nBreadcrumb\nlevel 1\nlevel 2\nlevel 3\nlevel 4\nPager\nSee Pager for the actual React component.\nPager with label\n\nPrevious\nThe previous chapter\n\nNext\nThe next chapter\n\nCompact Pager without label\n\nPrevious\n\nNext\nPagination\n1\n2\n3\n4\n5\n\nUsage\nUse pagination buttons only for UI elements that benefit from stepping through discrete content pages, such as: Image carousels – where users navigate through multiple slides or multi-step flows – to guide users through a process one step at a time.\nNot for Tables\nTables should use a “Load more” button instead of pagination.\nWhy \"Load more\" is preferred\nContinuous scanning:\nUsers can scroll down and view more data without breaking flow.\nLess disruption:\nAvoids jarring page reloads or resets when switching pages.\nImproved comparability:\nAll previously loaded data stays in view, enabling easier side-by-side comparison of rows.\nLess cognitive load:\nUsers rarely remember what was on “Page 6”, especially when rows are changing. Sequential pages interrupt scanning and exploration.\nNo page size UI:\nYou don’t need to offer dropdowns for rows per page, reducing UI clutter.\nPills\nStandard\n\nPill 1\nPill 2\nPill 3\nDisabled Pill\n\nJustified\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nJustified with icons\n\nPill 1\n\nPill 2\n\nPill 3\n\nDisabled Pill\n\nJustified with word-wrap\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\nFilled\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nFilled with icons only\nStacked\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent menu\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\nTabs\nStandard\n\nTab 1\nTab 2\nTab 3\nDisabled tab\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nBordered content\n\nTab 4\nTab 5\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified with word-wrap\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\nTable\nSee also our Table components like TableToolbar, TableSearch,TableViewToggles, TableCardsSorting, and TableSettingsDialog. For a more advanced table demo checkout our demo service\nCommon table style\nLabelNewAction\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nLabel\n\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable head\nDefault table head\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\n\nTable head filled\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nRounded table\nUse the table rounded classed when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners without needing to add additional padding.\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nHover table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nBordered table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nStriped table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nGrouped table\nHead columnHead columnHead columnHead column\n\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nSticky table header\nSticky column headSticky column headSticky column headSticky column head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nSticky table columns\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nTable grid lines\nShowing table grid lines my be used in data heavy tables also known as DataTables.\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable row span\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumn\nTable double row header\nDouble row header with filled header\nScores\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\n\nDouble row header with border and footer\nYears\n20212022202320242025\n\nProduct 1Income50708090100\nExpense3763708291\nProfit1371089\n\nProduct 2Income5067799054\nExpense3370507930\nProfit17-3191221\n\nTotal Profit304292030\nCondensed table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nFixed table layout\nThe table-layout-fixed class avoids a horizontal overflow by squeezing all columns together. Use this option with caution since columns with a fixed width cannot be compressed any further, and the content of the squeezed columns may not be readable anymore.\nHead columnHead columnHead columnHead columnHead column\n\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nResponsive tables\nTables - by design - are not great for small screens. Columns get squeezed together, and content is hard to read or gets cut off.\n\nThere are some options to tackle this problem\n\n- Wrapping the table in another div element and using the class table-responsive on that wrapper. That will create a horizontal overflow of the table when the available space exceeds.\n- Try to avoid defining a fixed width on all columns as that avoids shrinking columns automatically for smaller screens.\n- Use alternative representations for the table by either rendering a list instead of on small screens or using the table cards view on mobile screens.\n- Use class ellipsis-1 for column header or table cell content when the text gets truncated and to show the \"...\" at the end.\nTable cards\nNewButton\n\nFilter\n\nLabel\n\nIdId\nName\nVIN\nStatus\nDuration\n\nIdNameVINStatusDuration\n\n233IpsumNo dataInactive5h 15m\n\n456No data456Active4h 55m\n\n878No data878Active9h 10m\n\n895No data895Active8h 45m\n\n978IpsumNo dataInactive6h 35m\n\n2345Lorem2345Active11h 50m\n\n2445No data2445Active7h 25m\n\n3456No data3456Active12h 00m\n\n4567No data4567Active10h 20m\n\n7354Lorem7354Active10h 30m\n\n70/100\n\nLoad more\nStates in tables\nHead columnHead columnHead columnHead columnHead column\n\nNo entries found\nWe could not find any data entries for your search query. Please refine your search\nAlerts\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\nBadges\nUnlike labels, which are used for categorization and emphasis, badges provide quick contextual information in a compact and visually distinct manner.\nUse badges for numeric indicators, such as showing counts (e.g., unread messages, notifications, cart items). They are also useful for small floating highlights on UI elements (e.g., \"New\" or \"Beta\"). Badges are commonly placed on icons, buttons, menus, or navigation elements.\nHome1\nProfile\nMessages3\n\n01234567\n01234567\n1011121314151617\nBadges on Icons\n\n2323232323232323\nBadges as Indicator\n\nInbox3\nInbox99+\nCallouts\nCallout default\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout primary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout secondary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout info\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout success\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout warning\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout danger\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\nCounter\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nKey\nKeys examplePro tip: press m to comment\nPress ctrl + a to select all\n\nUse lower-case namesshiftenterctrlalt\nUnicode symbols⇧⇪↵⌫→←↑↓⇥⇤␣\n\nMac specific keys - see DeviceUtils⌘⌥⌃\nLabels\nNote: For having icons in labels, the text must be wrapped with a span to ensure the correct spacing.\nLabels are small, colored indicators used to represent statuses, categories, or highlights in the UI.\nThe standard labels have a light background and are ideal for subtle status indications that blend naturally with the interface.\nThe filled labels use a bold background color, making them more prominent—best suited for drawing attention to critical statuses or highlighting important information.\n\nStandard labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nLabels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed and filled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\nLists\nOrdered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nUnordered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nSquare list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\nList groups\nList group item default\nList group item primary\nList group item secondary\nList group item info\nList group item success\nList group item warning\nList group item danger\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nList group item link (a)List group item link (a)List group item link (a)List group item link (a)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\n\nHeadline default\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndefault\n\nHeadline primary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nprimary\n\nHeadline secondary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsecondary\n\nHeadline info\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ninfo\n\nHeadline success\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsuccess\n\nHeadline warning\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nwarning\n\nHeadline danger\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndanger\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\nPanels\npanel-heading1\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\nProgress bars\nStandard\n\nStriped\n\nAnimated\n\nIndeterminate\n\nStacked\n\nStacked ratings\n\nStacked ratings with custom icon overlay\nPoorExcelent\nWells\nHi, my name is well-sm\n\nHi, my name is well\n\nHi, my name is well-lg\nForms\nLegend\n\nEmail\nPassword\nTextarea\n\nNumber with controls\nNumber without controls\n\nRadiosOption one\nOption two\n\nCheckboxLorem ipsum dolor sit amet.\n\nNative Selects12345\nCancelSubmit\n\nDisabled input\nInput success\nInput warning\nInput error\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nDefault inputSome input info for the user\nInput addon labelLabelLabel\n\nInput addons.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\n\nDefault inputSome input info for the userThis is an error message\nInput addon labelLabelThis is a warning message\nLabel\n\nInput addons\n.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\nForm sized examples\nSize by form-Group class\nform-group-sm\nform-group-smXX\n\nform-group-sm12345\nform-group-sm\nform-group\nform-groupXX\n\nform-group\nform-group12345\nform-group-lgXX\n\nform-group-lg\nform-group-lg\nform-group-lg12345\n\nSize by Input Class\ninput-sm\ninput-group-smXX\n\ninput-sm\ninput-group-sm12345\n\ninput\ninput-groupXX\n\ninput\ninput-group12345\n\ninput-lg\ninput-group-lgXX\n\ninput-lg\ninput-group-lg12345\nForm with fieldset and legend\nAn HTML <fieldsetelement is used to group related elements within a form. It is particularly useful for organizing complex forms by creating logical sections, improving both the form's structure and user experience. The <fieldsetcan be paired with a <legendelement to provide a caption for the grouped content, making the form easier to understand and navigate.\n\nAllows for selective processing of grouped data, making it useful for handling specific sections of a form independently when used with the FormData API.\nA form with fieldsetLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\n\nA form with fieldset disabledLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\nInput resize\nresize-noneresize-vertical\nAnimations\nslide-out\nleftupdownright\n3s2s1s09s08s07s06s05s04s03s02s01s\nlooprestart\nlineareaseease-inease-outease-in-out\ninfiniterepeat-1repeat-2repeat-3\nTest animationReset\nTransition\nTransition properties\n\ntransition-opacity\ntransition-position\ntransition-all\n\nTransition timing functions\n\ntransition-ease\ntransition-ease-in-out\n\nTransition duration\n\ntransition-duration-01\ntransition-duration-02\ntransition-duration-03\ntransition-duration-04\ntransition-duration-05\nBlur\nBackdrop blur\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis elementum ante et est sagittis integer eget metus vel nunc semper.\nAspect ratio\nWith fixed width\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\n\nWith fixed height\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\nInset\ninset-0\n\ninset-x-0\n\ninset-y-0\n\nBase element\nShorthand element\nHelper\nclearanceclearfixchildren-first-border-top-nonefirst-child-border-top-nonechildren-last-border-bottom-nonelast-child-border-bottom-nonechildren-first-margin-top-0first-child-margin-top-0children-last-margin-bottom-0last-child-margin-bottom-0\nRotate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nRotate 360°\n\nRotate -5° to 5°\nScale\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nScale\n\nHover scale\nTranslate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform Syntax.\nDisplay\ndisplay-blockdisplay-inline-blockdisplay-flexdisplay-inline-flexdisplay-inlinedisplay-none\nOverflow\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nVisibility\nVisible only at a certain breakpoint\n\nvisible-xsvisible-lsvisible-smvisible-mdvisible-lgvisible-xl\nVisible from a certain breakpoint\n\nvisible-min-lsvisible-min-smvisible-min-mdvisible-min-lg\nHidden only at a certain breakpoint\n\nhidden-xshidden-lshidden-smhidden-mdhidden-lghidden-xl\nHidden from a certain breakpoint\n\nhidden-min-lshidden-min-smhidden-min-mdhidden-min-lg\nHidden when element is empty\n\nhidden-empty\nscreen-xs: >480pxscreen-ls: 480pxscreen-sm: 768pxscreen-md: 992pxscreen-lg: 1200pxscreen-xl: 1700px\n\n.visible-xsVisibleHiddenHiddenHiddenHiddenHidden\n.visible-lsHiddenVisibleHiddenHiddenHiddenHidden\n.visible-smHiddenHiddenVisibleHiddenHiddenHidden\n.visible-mdHiddenHiddenHiddenVisibleHiddenHidden\n.visible-lgHiddenHiddenHiddenHiddenVisibleHidden\n.visible-xlHiddenHiddenHiddenHiddenHiddenVisible\n\n.hidden-xsHiddenVisibleVisibleVisibleVisibleVisible\n.hidden-lsVisibleHiddenVisibleVisibleVisibleVisible\n.hidden-smVisibleVisibleHiddenVisibleVisibleVisible\n.hidden-mdVisibleVisibleVisibleHiddenVisibleVisible\n.hidden-lgVisibleVisibleVisibleVisibleHiddenVisible\n.hidden-xlVisibleVisibleVisibleVisibleVisibleHidden\n\n.visible-min-lsHiddenVisibleVisibleVisibleVisibleVisible\n.visible-min-smHiddenHiddenVisibleVisibleVisibleVisible\n.visible-min-mdHiddenHiddenHiddenVisibleVisibleVisible\n.visible-min-lgHiddenHiddenHiddenHiddenVisibleVisible\n\n.hidden-min-lsVisibleHiddenHiddenHiddenHiddenHidden\n.hidden-min-smVisibleVisibleHiddenHiddenHiddenHidden\n.hidden-min-mdVisibleVisibleVisibleHiddenHiddenHidden\n.hidden-min-lgVisibleVisibleVisibleVisibleHiddenHidden\n\nPrint\n\nvisible-printvisible-print-inlinehidden-print\n\nVisibility only classes\n\nAll the above classes for hidden and visible are based on \"display: none\". The following class affects only visibility, allowing it to impact surrounding elements.\nvisibility-hidden\nZ-index",
+    "searchText": "Foundations\nYou can use the the shorthandborderfor the automatic combination ofborder-style-solid,border-width-1andborder-color-light\nButtons\nSee also our Button component.\n\nNote: For having spacing between buttons in a single row you may want to wrap them with<div class=\"btn-toolbar\"</div\n\nNote: You can use link buttons within text blocks by adding btn-linkbtn-link-inline\nDefault buttons\n\nDefaultDefault\n\nIcon buttons\n\nMuted buttons\n\nMuted filledMuted\n\nLink buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nColored buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nOutline buttons\n\nprimarysecondaryinfosuccesswarningdanger\n\nSplit buttons\n\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted-filled\nButton states\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButtonHover buttonActive buttonFocus buttonDisabled button\nButton sizes\nXS buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nXS icon buttons\n\nSM buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nSM icon buttons\n\nMD buttons (default)\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nMD icon buttons (default)\n\nLG buttons\n\ndefaultprimarysecondaryinfosuccesswarningdanger\n\nLG icon buttons\nButton examples\nButton toolbar\n\nPrevNext\n\nButton group\n\n1234\n\nButtonButtonButton\n\nMultiline button\n\nThis is a multiline button with a lot of Text\nBlock button\n\nBlock level button\nTooltip buttons\n\nButton with tooltipDisabled button with tooltip\nAction buttons\nClick meClick meClick meClick meClick meClick me\nBackground colors\nBasic\nbg-white\nbg-black\n\nBrand\nbg-primary\nbg-secondary\n\nStatus\nbg-info\nbg-success\nbg-warning\nbg-danger\n\nDriving status\nbg-status-available\nbg-status-driving\nbg-status-resting\nbg-status-working\n\nMap marker\nbg-map-marker-asset\nbg-map-marker-poi\nbg-map-marker-geofence\nbg-map-marker-route\n\nRating\nbg-rating-1\nbg-rating-2\nbg-rating-3\nbg-rating-4\nbg-rating-5\n\nGray\nbg-decent\nbg-lightest\nbg-lighter\nbg-light\nbg-gray\nbg-dark\nbg-darker\nbg-darkest\n\nHighlight\nbg-highlight-decent\nbg-highlight-lightest\nbg-highlight-lighter\nbg-highlight-light\nbg-highlight\nbg-highlight-dark\nbg-highlight-darker\nbg-highlight-darkest\nHover background colors\nBasic\nhover-bg-white\nhover-bg-black\n\nBrand\nhover-bg-primary\nhover-bg-secondary\n\nStatus\nhover-bg-info\nhover-bg-success\nhover-bg-warning\nhover-bg-danger\n\nDriving status\nhover-bg-status-available\nhover-bg-status-driving\nhover-bg-status-resting\nhover-bg-status-working\n\nMap Marker\nhover-bg-map-marker-asset\nhover-bg-map-marker-poi\nhover-bg-map-marker-geofence\nhover-bg-map-marker-route\n\nRating\nhover-bg-rating-1\nhover-bg-rating-2\nhover-bg-rating-3\nhover-bg-rating-4\nhover-bg-rating-5\n\nGray\nhover-bg-decent\nhover-bg-lightest\nhover-bg-lighter\nhover-bg-light\nhover-bg-gray\nhover-bg-dark\nhover-bg-darker\nhover-bg-darkest\n\nHighlight\nhover-bg-highlight-decent\nhover-bg-highlight-lightest\nhover-bg-highlight-lighter\nhover-bg-highlight-light\nhover-bg-highlight\nhover-bg-highlight-dark\nhover-bg-highlight-darker\nhover-bg-highlight-darkest\nText\nBasic\ntext-color-white\ntext-color-black\n\nBrand\ntext-color-primary\ntext-color-secondary\n\nStatus\ntext-color-info\ntext-color-success\ntext-color-warning\ntext-color-danger\n\nDriving status\ntext-color-status-available\ntext-color-status-driving\ntext-color-status-resting\ntext-color-status-working\n\nMap marker\ntext-color-map-marker-asset\ntext-color-map-marker-poi\ntext-color-map-marker-geofence\ntext-color-map-marker-route\n\nRating\ntext-color-rating-1\ntext-color-rating-2\ntext-color-rating-3\ntext-color-rating-4\ntext-color-rating-5\n\nGray\ntext-color-decent\ntext-color-lightest\ntext-color-lighter\ntext-color-light\ntext-color-gray\ntext-color-dark\ntext-color-darker\ntext-color-darkest\n\nHighlight\ntext-color-highlight-decent\ntext-color-highlight-lightest\ntext-color-highlight-lighter\ntext-color-highlight-light\ntext-color-highlight\ntext-color-highlight-dark\ntext-color-highlight-darker\ntext-color-highlight-darkest\nHover text\nBasic\nhover-text-color-white\nhover-text-color-black\n\nBrand\nhover-text-color-primary\nhover-text-color-secondary\n\nStatus\nhover-text-color-info\nhover-text-color-success\nhover-text-color-warning\nhover-text-color-danger\n\nDriving status\nhover-text-color-status-available\nhover-text-color-status-driving\nhover-text-color-status-resting\nhover-text-color-status-working\n\nMap marker\nhover-text-color-map-marker-asset\nhover-text-color-map-marker-poi\nhover-text-color-map-marker-geofence\nhover-text-color-map-marker-route\n\nRating\nhover-text-color-rating-1\nhover-text-color-rating-2\nhover-text-color-rating-3\nhover-text-color-rating-4\nhover-text-color-rating-5\n\nGray\nhover-text-color-decent\nhover-text-color-lightest\nhover-text-color-lighter\nhover-text-color-light\nhover-text-color-gray\nhover-text-color-dark\nhover-text-color-darker\nhover-text-color-darkest\n\nHighlight\nhover-text-color-highlight-decent\nhover-text-color-highlight-lightest\nhover-text-color-highlight-lighter\nhover-text-color-highlight-light\nhover-text-color-highlight\nhover-text-color-highlight-dark\nhover-text-color-highlight-darker\nhover-text-color-highlight-darkest\nSVGs\nBackground\nBackground size\n\nBackground position\n\nBackground repeat\nBorder\nHover Border Color\n\nHover Border Color with Transition\n\nHover Border Style\nLast Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Self Class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst Child (Parent Class)\n\nChild\nChild\nChild\nChild\nChild\nDivider\nYou can use the the shorthanddivider-yfor the automatic combination ofdivider-y-1,divider-style-solidanddivider-color-light\ndivider-y-1\ndivider-y-1\ndivider-y-1\ndivider-y-1\n\ndivider-y-2\ndivider-y-2\ndivider-y-2\ndivider-y-2\n\ndivider-y-3\ndivider-y-3\ndivider-y-3\ndivider-y-3\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-1\ndivider-x-1\ndivider-x-1\n\ndivider-x-2\ndivider-x-2\ndivider-x-2\nOpacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nHover opacity\n0\n10\n20\n30\n40\n50\n60\n70\n80\n90\n100\nRounded\nrounded\n...-circle\n\n...-top\n...-bottom\n...-left\n...-right\n\n...-top-left\n...-top-right\n...-bottom-right\n...-bottom-left\n...-small\n...\n...-large\n...-extra-large\nShadows\nThe default shadow class is intended to be used on panels or blocks which should stand out from the light gray background and should be avoided to put everywhere. Use it to emphasize certain blocks or panels e.g. on a dashboard or items of a drag and drop list.\n\nDo not use hard shadows on tables, in dialogs, or on elements placed on white background.\n\nThe exception for not using shadows on a white background is for floating elements placed above the content for instance via position absolute.\nshadow-default\nPanel with shadow\nshadow-default\nShadow variants\nSurrounding shadows\n\nshadow-subtle\nshadow-muted\nshadow-accent\nshadow-default\nshadow-smooth\nshadow-hard\nshadow-focused\n\nDirection shadows\n\nshadow-muted-down\nshadow-default-down\n\nshadow-smooth-up\nshadow-smooth-down\nshadow-hard-up\nshadow-hard-down\n\nAccent shadow for list items\n\nNote\nWhen utilizing the shadow-accent avoid combining it with a border style, as the shadow is optimized for small block items like those in a list and works best without a border.\n\nItem\nItem\nItem\nItem\nItem\nItem\nHover shadows\nUse hover-shadow-* class to choose the hover elevation. Transition is included by default. For the tight focused preset use shadow-focused.\nhover-shadow-accent\nhover-shadow-default\nhover-shadow-hard-down\nhover-shadow-focused\n\nCustom hover settings\nCustomize hover animation with CSS vars:--shadow-hover-duration,--shadow-hover-easing, and--shadow-hover-delay\nDefaults are var(--shadow-hover-duration, 140ms) var(--shadow-hover-easing, ease-out) var(--shadow-hover-delay, 0ms)\nhover-shadow-focused (custom)\nhover-shadow-focused (custom)\nRIOglyph\nDefault\n\nSized icons\n\nColored icons\nVehicle icons\nVehicle icons\n\nBaseline vehicle icons\nPair icons\nDefault\n\nWith background\n\nDisplay engine types\n\nSized\nAnimated icons\nSpinning icons\n\nPulsing icons\nDisabled icons\nDefault\n\nWith red line\n\nInverse\nFilled icons\nDefault filled icons\n\nColored filled icons\n\nGood use cases examples for icons with a filled circle background\n\nHeadline enhancements: For emphasizing key points in headings or subheadings, like \"New features\" or \"Highlights,\" where the icon in a filled circle draws attention without being too overwhelming.\n\nHelp/Documentation pages: Icons with filled circles are perfect for highlighting actions or key steps in a guide. They help break down text-heavy content and make instructions visually appealing. Example: For \"step-by-step\" instructions, an icon inside a circle could represent each action (e.g., a checkmark icon to signify completed tasks or a question mark for additional help).\n\nFeature lists and cards: Use filled circle icons as design elements for feature lists, product highlights, or feature comparisons. This works especially well when listing distinct features of a product, app, or service.\n\nWhen NOT to use a filled circle icon\nAvoid inconsistent usage in buttons – If some buttons have a filled circle and others don’t, the UI becomes inconsistent.\n\nDon’t use it for simple inline icons – Icons inside text (e.g., \"🔍 Search\") or standalone icons in tables don’t need a background.\n\nNot for decorative or unnecessary elements – If an icon doesn’t need extra emphasis, the filled circle is overkill.\nCustom icons\nUse external svgs as RIOglyph icons. Please read our guidelines\nRIOglyph text alignment\nWhen an icon is used alongside text in a flex, grid, or inline text layout, additional alignment adjustments may be needed. To ensure proper alignment, the following classes are available:\nrioglyph-align-top - assuming a display-flex and default line-height\nrioglyph-align-bottom - assuming a display-flex and line-height 1.25\nrioglyph-align-baseline - assuming an inline text and default line-height\n\nThese classes help align icons correctly within different layouts where they are used alongside text.\nNote: Setting a text line-height class will also affect the icon alignment and may require manual adjustments to ensure proper positioning.\nBaseline-aligned icon with inline text\nLorem ipsum dolor\n\nTop-aligned icon with text inside a flex-box layout\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nBottom-aligned icon inside an inline-flex layout and line-height-125rel\nMalesuada tincidunt. sem. In ante scelerisque adipiscing et enim\n\nIcons inside a link usually don't need to be aligned manually\nLorem ipsum\n\nBaseline-aligned icon inside an inline h3 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\n\nBaseline-aligned icon inside an inline h4 header text\nPrimis ante volutpat Vivamus\nPrimis ante volutpat Vivamus\nIcon library\nSearch\n\nrioglyph rioglyph-academic-cap\nrioglyph rioglyph-addressbook\nrioglyph rioglyph-ai\nrioglyph rioglyph-air-pay\nrioglyph rioglyph-am\nrioglyph rioglyph-angle-double-down\nrioglyph rioglyph-angle-double-left\nrioglyph rioglyph-angle-double-right\nrioglyph rioglyph-angle-double-up\nrioglyph rioglyph-antenna\nrioglyph rioglyph-api\nrioglyph rioglyph-archive\nrioglyph rioglyph-area-chart\nrioglyph rioglyph-area-in\nrioglyph rioglyph-area-out\nrioglyph rioglyph-arrow-down\nrioglyph rioglyph-arrow-left\nrioglyph rioglyph-arrow-right\nrioglyph rioglyph-arrow-up\nrioglyph rioglyph-arrows-collapse\nrioglyph rioglyph-arrows-combine\nrioglyph rioglyph-arrows-expand\nrioglyph rioglyph-arrows-horizontal\nrioglyph rioglyph-arrows-split\nrioglyph rioglyph-assigned\nrioglyph rioglyph-axis-x\nrioglyph rioglyph-axis-y\nrioglyph rioglyph-axis-z\nrioglyph rioglyph-axle\nrioglyph rioglyph-ban-circle\nrioglyph rioglyph-bar-chart-box\nrioglyph rioglyph-battery-charging\nrioglyph rioglyph-battery-level-empty\nrioglyph rioglyph-battery-level-full\nrioglyph rioglyph-battery-level-low\nrioglyph rioglyph-beacon\nrioglyph rioglyph-book\nrioglyph rioglyph-bookable-poi\nrioglyph rioglyph-bookmark-square\nrioglyph rioglyph-bookmark\nrioglyph rioglyph-border-crossing\nrioglyph rioglyph-box-open\nrioglyph rioglyph-box\nrioglyph rioglyph-brain\nrioglyph rioglyph-brake\nrioglyph rioglyph-branch-horizontal\nrioglyph rioglyph-branch-remove\nrioglyph rioglyph-branch-vertical\nrioglyph rioglyph-broadcast\nrioglyph rioglyph-building\nrioglyph rioglyph-bulb\nrioglyph rioglyph-bus-baseline\nrioglyph rioglyph-bus-breakdown\nrioglyph rioglyph-bus\nrioglyph rioglyph-businessman\nrioglyph rioglyph-calendar-parking\nrioglyph rioglyph-calendar-plus\nrioglyph rioglyph-calendar-today\nrioglyph rioglyph-calendar\nrioglyph rioglyph-camera\nrioglyph rioglyph-car-baseline\nrioglyph rioglyph-car-wash\nrioglyph rioglyph-car\nrioglyph rioglyph-card-hotel\nrioglyph rioglyph-card-reader\nrioglyph rioglyph-cards-add\nrioglyph rioglyph-cards-grid\nrioglyph rioglyph-cards-list\nrioglyph rioglyph-cards-table\nrioglyph rioglyph-cargo\nrioglyph rioglyph-carrier\nrioglyph rioglyph-chat\nrioglyph rioglyph-check-badge\nrioglyph rioglyph-check-shield\nrioglyph rioglyph-checkbox-checked\nrioglyph rioglyph-checkbox\nrioglyph rioglyph-checkboxes\nrioglyph rioglyph-chevron-down\nrioglyph rioglyph-chevron-left\nrioglyph rioglyph-chevron-right\nrioglyph rioglyph-chevron-up\nrioglyph rioglyph-chip\nrioglyph rioglyph-circle-dashed\nrioglyph rioglyph-circle-stack\nrioglyph rioglyph-click\nrioglyph rioglyph-climate-control\nrioglyph rioglyph-clipboard\nrioglyph rioglyph-cloud-download\nrioglyph rioglyph-cloud-not-saved\nrioglyph rioglyph-cloud-progress\nrioglyph rioglyph-cloud-upload\nrioglyph rioglyph-cloud\nrioglyph rioglyph-coasting\nrioglyph rioglyph-code-braces\nrioglyph rioglyph-code-brackets\nrioglyph rioglyph-coffee\nrioglyph rioglyph-cog\nrioglyph rioglyph-color-swatch\nrioglyph rioglyph-comment\nrioglyph rioglyph-compare\nrioglyph rioglyph-compass\nrioglyph rioglyph-component-custom-recurrent\nrioglyph rioglyph-component-custom\nrioglyph rioglyph-construction\nrioglyph rioglyph-convert\nrioglyph rioglyph-conveyor-belt\nrioglyph rioglyph-cookie\nrioglyph rioglyph-cooling\nrioglyph rioglyph-cost-efficiency\nrioglyph rioglyph-crown\nrioglyph rioglyph-cruise-control\nrioglyph rioglyph-csv\nrioglyph rioglyph-cube-dashed\nrioglyph rioglyph-cube\nrioglyph rioglyph-currency-euro\nrioglyph rioglyph-damages\nrioglyph rioglyph-dangerousgoods\nrioglyph rioglyph-dashboard-view\nrioglyph rioglyph-dashboard\nrioglyph rioglyph-delivery-completed\nrioglyph rioglyph-delivery-error\nrioglyph rioglyph-delivery-late\nrioglyph rioglyph-delivery-on-track\nrioglyph rioglyph-delivery-warning\nrioglyph rioglyph-delivery\nrioglyph rioglyph-design\nrioglyph rioglyph-desktop\nrioglyph rioglyph-detail-view-info\nrioglyph rioglyph-detail-view\nrioglyph rioglyph-direction\nrioglyph rioglyph-discount-badge\nrioglyph rioglyph-document-out\nrioglyph rioglyph-document\nrioglyph rioglyph-download\nrioglyph rioglyph-drag-n-drop\nrioglyph rioglyph-drive-history\nrioglyph rioglyph-driver-card\nrioglyph rioglyph-driver\nrioglyph rioglyph-drivercard-in\nrioglyph rioglyph-drivercard-out\nrioglyph rioglyph-duplicate\nrioglyph rioglyph-earphone\nrioglyph rioglyph-emergency-stop\nrioglyph rioglyph-empty\nrioglyph rioglyph-engine\nrioglyph rioglyph-envelope-indicator\nrioglyph rioglyph-envelope-open\nrioglyph rioglyph-envelope\nrioglyph rioglyph-erase\nrioglyph rioglyph-error-sign\nrioglyph rioglyph-euro-note\nrioglyph rioglyph-exclamation-sign\nrioglyph rioglyph-exclamation\nrioglyph rioglyph-eye-close\nrioglyph rioglyph-eye-closed\nrioglyph rioglyph-eye-open\nrioglyph rioglyph-face-frown\nrioglyph rioglyph-face-neutral\nrioglyph rioglyph-face-smile\nrioglyph rioglyph-facetime-video\nrioglyph rioglyph-factory\nrioglyph rioglyph-file-signature\nrioglyph rioglyph-files\nrioglyph rioglyph-fill\nrioglyph rioglyph-filling-e-station\nrioglyph rioglyph-filling-station\nrioglyph rioglyph-filter-active\nrioglyph rioglyph-filter-reset\nrioglyph rioglyph-filter\nrioglyph rioglyph-fingerprint\nrioglyph rioglyph-finish\nrioglyph rioglyph-fire\nrioglyph rioglyph-flag\nrioglyph rioglyph-flash\nrioglyph rioglyph-folder-closed\nrioglyph rioglyph-folder-open\nrioglyph rioglyph-fuel-electric\nrioglyph rioglyph-fuel-gas\nrioglyph rioglyph-fuel-hydrogen\nrioglyph rioglyph-fuel-liquid\nrioglyph rioglyph-fuel-mix\nrioglyph rioglyph-fullscreen\nrioglyph rioglyph-geofence\nrioglyph rioglyph-get\nrioglyph rioglyph-give\nrioglyph rioglyph-globe-alt\nrioglyph rioglyph-globe\nrioglyph rioglyph-group-blocks\nrioglyph rioglyph-group\nrioglyph rioglyph-hand-down\nrioglyph rioglyph-hand-left\nrioglyph rioglyph-hand-right\nrioglyph rioglyph-hand-up\nrioglyph rioglyph-handshake\nrioglyph rioglyph-hash\nrioglyph rioglyph-heart\nrioglyph rioglyph-heating\nrioglyph rioglyph-hierarchy\nrioglyph rioglyph-history\nrioglyph rioglyph-home-sign\nrioglyph rioglyph-home\nrioglyph rioglyph-hour-glass\nrioglyph rioglyph-id\nrioglyph rioglyph-inbox-in\nrioglyph rioglyph-inbox-out\nrioglyph rioglyph-inbox-stack\nrioglyph rioglyph-inbox\nrioglyph rioglyph-info-sign\nrioglyph rioglyph-info\nrioglyph rioglyph-insert\nrioglyph rioglyph-issue-tracking\nrioglyph rioglyph-key\nrioglyph rioglyph-kickdown\nrioglyph rioglyph-language\nrioglyph rioglyph-layer-pois\nrioglyph rioglyph-layer\nrioglyph rioglyph-leafs\nrioglyph rioglyph-light-bulb\nrioglyph rioglyph-line-chart\nrioglyph rioglyph-link\nrioglyph rioglyph-load-unload\nrioglyph rioglyph-load\nrioglyph rioglyph-location-arrow\nrioglyph rioglyph-lock-open\nrioglyph rioglyph-lock\nrioglyph rioglyph-log-in\nrioglyph rioglyph-logout\nrioglyph rioglyph-looking-glass-man\nrioglyph rioglyph-looking-glass\nrioglyph rioglyph-magic-wand\nrioglyph rioglyph-maintenance-components\nrioglyph rioglyph-map-location\nrioglyph rioglyph-map-marker\nrioglyph rioglyph-map\nrioglyph rioglyph-megaphone\nrioglyph rioglyph-menu-hamburger\nrioglyph rioglyph-merge\nrioglyph rioglyph-mesh-box\nrioglyph rioglyph-migrate\nrioglyph rioglyph-milage\nrioglyph rioglyph-minus-light\nrioglyph rioglyph-minus-sign\nrioglyph rioglyph-minus\nrioglyph rioglyph-missing\nrioglyph rioglyph-mode-dark-light\nrioglyph rioglyph-more\nrioglyph rioglyph-new-window\nrioglyph rioglyph-newspaper\nrioglyph rioglyph-note\nrioglyph rioglyph-notification\nrioglyph rioglyph-number-1\nrioglyph rioglyph-number-2\nrioglyph rioglyph-number-3\nrioglyph rioglyph-off\nrioglyph rioglyph-oil-can\nrioglyph rioglyph-ok-circle\nrioglyph rioglyph-ok-dashed\nrioglyph rioglyph-ok-sign\nrioglyph rioglyph-ok\nrioglyph rioglyph-onboarding\nrioglyph rioglyph-ongoing\nrioglyph rioglyph-option-horizontal\nrioglyph rioglyph-option-vertical\nrioglyph rioglyph-order\nrioglyph rioglyph-palette-broken\nrioglyph rioglyph-palette-empty\nrioglyph rioglyph-palette\nrioglyph rioglyph-paper-clip\nrioglyph rioglyph-parcel-broken\nrioglyph rioglyph-parcel\nrioglyph rioglyph-parking\nrioglyph rioglyph-pause-circle\nrioglyph rioglyph-pause\nrioglyph rioglyph-pdf-file\nrioglyph rioglyph-pencil-square\nrioglyph rioglyph-pencil\nrioglyph rioglyph-phone\nrioglyph rioglyph-pictures\nrioglyph rioglyph-pin-range\nrioglyph rioglyph-pin\nrioglyph rioglyph-play-circle\nrioglyph rioglyph-play\nrioglyph rioglyph-plugged-off\nrioglyph rioglyph-plugged-on\nrioglyph rioglyph-plus-light\nrioglyph rioglyph-plus-sign\nrioglyph rioglyph-plus\nrioglyph rioglyph-pm\nrioglyph rioglyph-poi\nrioglyph rioglyph-polygon\nrioglyph rioglyph-position\nrioglyph rioglyph-print\nrioglyph rioglyph-progress-ongoing\nrioglyph rioglyph-progress-remaining\nrioglyph rioglyph-progression\nrioglyph rioglyph-prompt\nrioglyph rioglyph-pto-off\nrioglyph rioglyph-pto-on\nrioglyph rioglyph-pushpin\nrioglyph rioglyph-puzzle\nrioglyph rioglyph-pylon\nrioglyph rioglyph-qr-code\nrioglyph rioglyph-question-sign\nrioglyph rioglyph-question\nrioglyph rioglyph-record\nrioglyph rioglyph-recycle\nrioglyph rioglyph-refresh\nrioglyph rioglyph-remove-circle\nrioglyph rioglyph-remove-sign\nrioglyph rioglyph-remove\nrioglyph rioglyph-repeat-square\nrioglyph rioglyph-repeat\nrioglyph rioglyph-resize-full\nrioglyph rioglyph-resize-horizontal\nrioglyph rioglyph-resize-small\nrioglyph rioglyph-resize-vertical\nrioglyph rioglyph-retrofit\nrioglyph rioglyph-revert\nrioglyph rioglyph-rio-marker\nrioglyph rioglyph-rio\nrioglyph rioglyph-road-restrictions\nrioglyph rioglyph-road\nrioglyph rioglyph-robot\nrioglyph rioglyph-rocket\nrioglyph rioglyph-role-management\nrioglyph rioglyph-route-option\nrioglyph rioglyph-route-view\nrioglyph rioglyph-route\nrioglyph rioglyph-ruler\nrioglyph rioglyph-satellite-radar\nrioglyph rioglyph-save\nrioglyph rioglyph-scale\nrioglyph rioglyph-scan\nrioglyph rioglyph-scissors\nrioglyph rioglyph-search-list\nrioglyph rioglyph-search-truck\nrioglyph rioglyph-search\nrioglyph rioglyph-send\nrioglyph rioglyph-series\nrioglyph rioglyph-server-stack\nrioglyph rioglyph-settings\nrioglyph rioglyph-share-alt\nrioglyph rioglyph-share-nodes\nrioglyph rioglyph-share\nrioglyph rioglyph-shelve\nrioglyph rioglyph-ship\nrioglyph rioglyph-shopping-bag\nrioglyph rioglyph-shopping-cart\nrioglyph rioglyph-signature\nrioglyph rioglyph-slope-down-max\nrioglyph rioglyph-slope-down-min\nrioglyph rioglyph-slope-up-max\nrioglyph rioglyph-slope-up-min\nrioglyph rioglyph-sort-by-attributes-alt\nrioglyph rioglyph-sort-by-attributes\nrioglyph rioglyph-sort\nrioglyph rioglyph-sparkles\nrioglyph rioglyph-speed\nrioglyph rioglyph-sphere\nrioglyph rioglyph-spinner\nrioglyph rioglyph-split-view\nrioglyph rioglyph-square-dashed\nrioglyph rioglyph-stack-add\nrioglyph rioglyph-stack-iso\nrioglyph rioglyph-stack\nrioglyph rioglyph-star-empty\nrioglyph rioglyph-star\nrioglyph rioglyph-stars\nrioglyph rioglyph-start\nrioglyph rioglyph-stats-high\nrioglyph rioglyph-stats-line-dots\nrioglyph rioglyph-stats-low\nrioglyph rioglyph-stats-medium\nrioglyph rioglyph-stats\nrioglyph rioglyph-status-available\nrioglyph rioglyph-status-change-horizontal\nrioglyph rioglyph-status-change\nrioglyph rioglyph-status-driving\nrioglyph rioglyph-status-resting\nrioglyph rioglyph-status-working\nrioglyph rioglyph-steering-wheel\nrioglyph rioglyph-stopover\nrioglyph rioglyph-support\nrioglyph rioglyph-table-view\nrioglyph rioglyph-tachograph-download\nrioglyph rioglyph-tachograph\nrioglyph rioglyph-tag\nrioglyph rioglyph-tasks\nrioglyph rioglyph-temperature\nrioglyph rioglyph-th-list\nrioglyph rioglyph-thumbs-down\nrioglyph rioglyph-thumbs-up\nrioglyph rioglyph-tickets\nrioglyph rioglyph-time-alt\nrioglyph rioglyph-time-cancle\nrioglyph rioglyph-time-incomplete\nrioglyph rioglyph-time\nrioglyph rioglyph-tire\nrioglyph rioglyph-tms\nrioglyph rioglyph-to-bottom\nrioglyph rioglyph-to-left\nrioglyph rioglyph-to-right\nrioglyph rioglyph-to-top\nrioglyph rioglyph-tracking-package\nrioglyph rioglyph-traffic-lights\nrioglyph rioglyph-trailer-baseline\nrioglyph rioglyph-trailer-liquid\nrioglyph rioglyph-trailer-standard\nrioglyph rioglyph-trailer-tipping\nrioglyph rioglyph-trailer\nrioglyph rioglyph-trailerposition\nrioglyph rioglyph-train\nrioglyph rioglyph-transfer\nrioglyph rioglyph-transition-push-right\nrioglyph rioglyph-transition-right\nrioglyph rioglyph-trash\nrioglyph rioglyph-triangle-bottom\nrioglyph rioglyph-triangle-left\nrioglyph rioglyph-triangle-right\nrioglyph rioglyph-triangle-top\nrioglyph rioglyph-trophy\nrioglyph rioglyph-truck-baseline\nrioglyph rioglyph-truck-breakdown\nrioglyph rioglyph-truck-unit\nrioglyph rioglyph-truck\nrioglyph rioglyph-unassigned\nrioglyph rioglyph-unavailable\nrioglyph rioglyph-unlink\nrioglyph rioglyph-upload\nrioglyph rioglyph-user-add\nrioglyph rioglyph-user-group\nrioglyph rioglyph-user-ok\nrioglyph rioglyph-user-remove\nrioglyph rioglyph-user-sign-off\nrioglyph rioglyph-user-sign\nrioglyph rioglyph-user\nrioglyph rioglyph-van-baseline\nrioglyph rioglyph-van\nrioglyph rioglyph-variable\nrioglyph rioglyph-video\nrioglyph rioglyph-volume\nrioglyph rioglyph-wallet\nrioglyph rioglyph-warehouse\nrioglyph rioglyph-warning-sign\nrioglyph rioglyph-weather-cloudy\nrioglyph rioglyph-weather-icy\nrioglyph rioglyph-weather-overcast\nrioglyph rioglyph-weather-raining\nrioglyph rioglyph-weather-snowing\nrioglyph rioglyph-weather-stormy\nrioglyph rioglyph-weather-sunny\nrioglyph rioglyph-weather-thundering\nrioglyph rioglyph-weather-windy\nrioglyph rioglyph-weight\nrioglyph rioglyph-width\nrioglyph rioglyph-wifi\nrioglyph rioglyph-window\nrioglyph rioglyph-workflow-step\nrioglyph rioglyph-workflow\nrioglyph rioglyph-workshop\nrioglyph rioglyph-wrench\nrioglyph rioglyph-xmas-raindeer\nrioglyph rioglyph-xmas-santa\nText styles\nHeadline size\n\ntext-size-h1\ntext-size-h2\ntext-size-h3\ntext-size-h4\ntext-size-h5\ntext-size-h6\n\nText size\n\ntext-size-10\ntext-size-11\ntext-size-12\ntext-size-14\ntext-size-16\ntext-size-18\ntext-size-20\n\nText weight\n\ntext-thin\ntext-light\ntext-normal\ntext-medium\ntext-bold\nText style\n\ntext-style-normal\ntext-style-italic\n\nText decoration\n\ntext-decoration-none\nhover-text-decoration-none\ntext-decoration-line-through\ntext-decoration-underline\nunderline-offset-2\nunderline-offset-3\nunderline-offset-4\nunderline-offset-5\n\nText wrapping\n\nwhite-space-nowrap\nwhite-space-normal\n\nText transform\n\ntext-capitalize\nTEXT-LOWERCASE\ntext-uppercase\ntext capitalize first word\ntext-transform-none\nHeadings\n\nThe reason why there are heading tags like <h2> and heading classes like .h2 is due to different use cases. A <h2> tag for instance is an essential SEO tag often used by a CMS like WordPress or Typo3. For these Tools, we can not change the code but we need some styling for the HTML element itself.\nAnother example is the <strong> or <b> tags and the .text-bold class. The heading classes like the .h2 class can be used in a service application, as those are not SEO relevant. As the UIKIT uses an atomic CSS approach, the same style can be achieved when combining .text-size-h2 .text-bold margin-top-10 margin-bottom-20 classes.\n\nHeadline tags\n\nHeading 1\nHeading 2\nHeading 3\nHeading 4\nHeading 5\nHeading 6\n\nHeadline classes\n\nh1\nh2\nh3\nh4\nh5\nh6\n\nMisc tags\n\nThis line of text is meant to be treated as fine print.\nThe following snippet of text is rendered as bold text.\nThe following snippet of text is rendered as italicized text.\nAn abbreviation of the word attribute is attr.\nAlignment\ntext-left\ntext-center\ntext-right\nBlockquote\nLorem ipsum white.Lorem ipsum black.Lorem ipsum decent.Lorem ipsum lightest.Lorem ipsum lighter.Lorem ipsum light.Lorem ipsum gray.Lorem ipsum dark.Lorem ipsum darker.Lorem ipsum darkest.\nCode\nvar test = 'Hello World!';\nThis is an inline Codeblock for use in text.\n\n// This is a JS example\nvar test = \"Hello World\";\nconsole.log(test);\nCursor\nYou can disable all pointer events by addingpointer-events-none\ncursor-default\ncursor-pointer\ncursor-text\ncursor-move\ncursor-grabbing\ncursor-grab\ncursor-not-allowed\ncursor-row-resize\ncursor-col-resize\ncursor-col-resize\ncursor-ew-resize\ncursor-help\ncursor-cell\ncursor-copy\ncursor-crosshair\nEllipsis\nSingle- or multi-line utility to truncate text content at max width with ...\n\nNote: Ellipsis only works with block elements. It does not work withdisplay-grid. Combine the classes withdisplay-block or display-flex\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nEllipsis-middle\nThe class ellipsis-middle expects two child elements where the first child is the start and the second child is the end that should always remain visible.\n2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e\n2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e\n2bb5e796-6c5e-4bc4-871b-f3af-d469-1c1e\nLine height\nWhen working with text, it's important to consider the relationship between the text size and the line height. For larger headlines, a line height of 1.2 to 1.25 is recommended to maintain readability and visual balance. For plain body text or text inside promotion blocks, a slightly larger line height of 1.4 to 1.5 is suggested to improve readability and the overall reading experience.\n\nRule of thumb: the larger the text size, the smaller the line height should be.\n\nNote: The listed classes are not necessary for the use of ourtext-size classes. Use them only if you want to have the exact the same line-height as your text-size is.\nline-height-10\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-11\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-12\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-14\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-16\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-18\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-20\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-125rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-130rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-135rel\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-150rel\n\nLorem ipsum dolor sit amet, dui eget elit.\nline-height-h1\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h2\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h3\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h4\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h5\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nline-height-h6\n\nLorem ipsum dolor sit amet, dui eget elit.\nUser select\nuser-select-all\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nuser-select-none\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nText box\ntext-box-trim-start\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-trim-both\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\ntext-box-auto\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nno text-box\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nText wrapping\nWord break\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nHyphens\n\nFinanzmarktstabilisierungsbeschleunigungsgesetzes sowie § 5 Absatz 2 und 5 der Finanzmarktstabilisierungsfondsverordnung in der am 23. Juli 2009 geltenden Fassung gelten für die Garantiegewährung nach Absatz 1 entsprechend.\n\nBalance\ncaniuse\n\nAllows text to have it's lines broken that each line is roughly the same width.\n\nPretty\ncaniuse\n\nIt evaluate the last four lines in a text block to work out adjustments as needed to ensure the last line has two or more words.\nCols\nNote: Col classes without a breakpoint addition are always weaker than with an addition. To reset a breakpoint class, you always have to set another larger breakpoint class, otherwise the set breakpoint is always active.Right example col-xs-6col-sm-12 col-xs-6 will only be active on small screensWrong example col-xs-6col-12 col-xs-6 will always be active\ncol-12\n\ncol-6\n\ncol-6\n\ncol-4\n\ncol-4\n\ncol-4\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-3\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-2\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\n\ncol-1\nResponsive cols\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\n\ncol-xs-6 col-sm-3\nEqual Height Cols\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\nContainer fluid\ncontainer fluid-small\ncontainer fluid-default\ncontainer fluid-large\ncontainer fluid-extra-large\ncontainer fluid-ultra-large\nContainer\nNote: If a container is used without the fluid classes, it has a maximum width per breakpoint and will jump when the screen is resized.\ncontainer\nContainer queries\nWhat are container queries?\nWhile traditional container classes like container and fluid-default respond to the viewport width,container queries respond to the size of the component’s parent container. This allows components to adapt their layout based on context, not just screen size.\n\nBy reacting to the container's width instead of the screen, container queries enable components to become context-aware—adapting their layout depending on where they are used. Whether inside a narrow sidebar or a wide content area, components can now behave responsively within their own environment, making designs more modular, flexible, and reusable.\nUsage\nThe UIKIT provides atomic utility classes for container queries, enabling you to quickly apply conditional styles directly in your JSX/HTML based on container width.\n\n1. Define the container: mark an ancestor element as a container using the specific cq-container class. This tells the browser which element's size should be monitored. <div class=\"cq-container\"<!-- content goes here --</div\n2. Apply CQ utility classes: add cq-300:... classes to the descendant elements you want to style conditionally based on the container's. <div class=\"cq-container\"<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"<!-- more content goes here --</div</div\n\nhtml\n<div class=\"cq-container\"\n<!-- content goes here --\n</div\n\nhtml\n<div class=\"cq-container\"\n<div class=\"padding-10 cq-400:padding-15 cq-600:padding-25\"\n<!-- more content goes here --\n</div\n</div\n\nThe class naming convention is: cq: + [breakpointValue] + : + [property] + - + [value]\n\n- cq: is the prefix for all container query utilities.\n- [breakpointValue] is one of the numeric identifiers from the table above (e.g., 300, 400, 500, 600, 700).\n- [property] is the type of property being styled (e.g., padding, margin-top, flex-column, grid-cols).\n- [value] is the value from the library's scale (e.g., 10, 25, auto).\nContainer query breakpoints\nOur container query utilities are based on a set of predefined width breakpoints. The breakpoint value is included directly in the class name for clarity.\n\nWe use a \"max-width\" query for the smallest breakpoint (300px) to target styles up to that size, and \"min-width\" queries for all larger breakpoints to target styles from that size upwards.\nContainer query example and classes\nItem 1\nItem 2\nItem 3\nFlexbox\nCenter\n\nLorem ipsum dolor\n\nTop start\n\nLorem ipsum dolor\n\nBottom start\n\nLorem ipsum dolor\n\nTop end\n\nLorem ipsum dolor\n\nBottom end\n\nLorem ipsum dolor\n\nSpace between\n\nLorem ipsum dolor\nLorem ipsum dolor\nLorem ipsum dolor\n\nEven split columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nMultiple even columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\n\n70/30 columns\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.\nGrid\ngrid-cols-1\n\ngrid-cols-2\ngrid-cols-2\n\ngrid-cols-3\ngrid-cols-3\ngrid-cols-3\n\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\ngrid-cols-4\n\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\ngrid-cols-5\n\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\ngrid-cols-6\n\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\ngrid-cols-7\n\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\ngrid-cols-8\n\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\ngrid-cols-9\n\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\ngrid-cols-10\n\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\ngrid-cols-11\n\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\ngrid-cols-12\nGrid colspan / rowspan\ngrid-colspan-3\nGrid column-start / column-end\nGrid auto-fit\nIn CSS Grid, the auto-fit keyword is used with the repeat() function to automatically adjust the number of columns (or rows) based on the available space in the container. It helps create responsive layouts by filling the container with as many columns (or rows) of a specified size as possible.\n\nDynamic Column Creation: \"auto-fit\" automatically creates as many columns as will fit in the available space, potentially adding or removing columns as the container resizes.\n\nResponsive Design: Ensures that the grid adapts to different screen sizes by adjusting the number of columns.\nGrid max-content / auto content\nThe max-content value sizes the grid column to be as wide as the largest piece of content inside it. Essentially, it takes up as much space as necessary to fit the longest word or item without breaking. This is useful when you want the column to expand to fit its content, ensuring no content is clipped or wrapped unnecessarily.\n\nThe auto value sizes the grid column based on the content, but it can also take into account the available space and other factors. If there's more space available, \"auto\" can expand to fill it, but it won't exceed the available space like \"max-content\". This is useful when you want the column to take up space according to its content but also adapt to the overall layout and available space.\n\nChoosing between max-content and auto depends on whether you want the column to strictly fit its content (potentially ignoring the available space) or to adapt to the content while also being flexible within the grid layout.\nmax-content\n1fr\n\nmax-content\n1fr\nmax-content\n1fr\n\n1fr\nmax-content\n\n1fr\nmax-content\n1fr\nmax-content\n\nauto\n1fr\n\nauto\n1fr\nauto\n1fr\n\n1fr\nauto\n\n1fr\nauto\n1fr\nauto\nGrid rows\nHelper class for 3 rows where the middle row expands and can scroll\nLorem item 0\nLorem ipsum dolor sit amet\n\nLorem item 1\nLorem ipsum dolor sit amet\n\nLorem item 2\nLorem ipsum dolor sit amet\n\nLorem item 3\nLorem ipsum dolor sit amet\n\nLorem item 4\nLorem ipsum dolor sit amet\n\nLorem item 5\nLorem ipsum dolor sit amet\n\nLorem item 6\nLorem ipsum dolor sit amet\n\nLorem item 7\nLorem ipsum dolor sit amet\n\nButton\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGrid placement\nplace-items-center\nGrid stacking\nstack item 1\nstack item 2\n\nstack item 1\nstack item 2\nSubgrid\nThe subgrid value in CSS Grid Layout is a feature that allows a nested grid to inherit the column and/or row definitions from its parent grid container. This means that the subgrid can align its items according to the tracks defined in the parent grid, creating a more consistent and aligned layout structure. It is particularly useful for complex layouts where nested elements need to align with the overall grid structure without redefining the grid tracks. By using subgrid, you can maintain a cohesive design while simplifying the CSS code needed for layout alignment. This feature enhances the flexibility and power of CSS Grid, making it easier to manage nested grid layouts.\nForm example\nConnection\nHostPortReally long label\nCredentials\nUsernamePasswordCheckboxYet another level of nesting\n\nSubgrid enabled\n\nSubmit\nFull NameEmailMessage\n\nSubgrid enabled\n\nSubmit\nSubgrid Cards\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla? Consectetur adipisci illum ipsa reprehenderit deleniti quia qui aliquid tempora ea accusamus. Quibusdam.\nby Mia at Company\nLove it\nArticle title\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor itaque, vitae dicta autem sunt nesciunt atque nulla?\nby Mia at Company\nLove it\nWhat if we have a much longer article title?\nLorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus eveniet, tempore error maxime praesentium eos.\nby Jen \"Boss\" Simmons at Company\nLove it so\nArticle titles aren't consistent\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Deja \"Empathic Dev\" Hodge at Company\nLove it\nThis article title will need to be fixed in Post-Production with a much shorter and catchier click-bait title\nLorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi molestiae autem saepe libero assumenda dolorum quae laboriosam aliquam magni sint, voluptates officia dignissimos a incidunt, unde suscipit fugiat illum optio.\nby Ryanne \"Fix It In Post\" Hodson at Company\nLove it\nShort title\nLorem ipsum dolor sit amet consectetur adipisicing elit. Optio enim maxime repellat illo!\nby Jay \"Do It\" Dedman at Company\nLove it\n\nSubgrid enabled\nPosition\nLorem ipsum dolor sit amet\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nGap\nNote: Since using a percentage vertical gap requires a fixed height of the wrapping element, we decided to offer only horizontal percentage gap classes. Vertical gap in px is of course possible.\ngap-0\ngap-0\ngap-0\n\ngap-1\ngap-1\ngap-1\n\ngap-2\ngap-2\ngap-2\n\ngap-3\ngap-3\ngap-3\n\ngap-4\ngap-4\ngap-4\n\ngap-5\ngap-5\ngap-5\n\ngap-10\ngap-10\ngap-10\n\ngap-15\ngap-15\ngap-15\n\ngap-20\ngap-20\ngap-20\n\ngap-25\ngap-25\ngap-25\n\ngap-50\ngap-50\ngap-50\nSpace\nNote: For flex or grid solutions please use gap instead.\nspace-y-0\nspace-y-0\nspace-y-0\n\nspace-y-1\nspace-y-1\nspace-y-1\n\nspace-y-2\nspace-y-2\nspace-y-2\n\nspace-y-3\nspace-y-3\nspace-y-3\n\nspace-y-4\nspace-y-4\nspace-y-4\n\nspace-y-5\nspace-y-5\nspace-y-5\n\nspace-y-10\nspace-y-10\nspace-y-10\n\nspace-y-15\nspace-y-15\nspace-y-15\n\nspace-y-20\nspace-y-20\nspace-y-20\n\nspace-y-25\nspace-y-25\nspace-y-25\n\nspace-y-50\nspace-y-50\nspace-y-50\nMargin\nSurrouding\n\nmargin-0\n\nmargin-1\n\nmargin-2\n\nmargin-3\n\nmargin-4\n\nmargin-5\n\nmargin-10\n\nmargin-15\n\nmargin-20\n\nmargin-25\n\nmargin-50\n\nHorizontal\n\nmargin-x-0\n\nmargin-x-1\n\nmargin-x-2\n\nmargin-x-3\n\nmargin-x-4\n\nmargin-x-5\n\nmargin-x-10\n\nmargin-x-15\n\nmargin-x-20\n\nmargin-x-25\n\nmargin-x-50\n\nVertical\n\nmargin-y-0\n\nmargin-y-1\n\nmargin-y-2\n\nmargin-y-3\n\nmargin-y-4\n\nmargin-y-5\n\nmargin-y-10\n\nmargin-y-15\n\nmargin-y-20\n\nmargin-y-25\n\nmargin-y-50\n\nLeft\n\nmargin-left-0\n\nmargin-left-1\n\nmargin-left-2\n\nmargin-left-3\n\nmargin-left-4\n\nmargin-left-5\n\nmargin-left-10\n\nmargin-left-15\n\nmargin-left-20\n\nmargin-left-25\n\nmargin-left-50\n\nRight\n\nmargin-right-0\n\nmargin-right-1\n\nmargin-right-2\n\nmargin-right-3\n\nmargin-right-4\n\nmargin-right-5\n\nmargin-right-10\n\nmargin-right-15\n\nmargin-right-20\n\nmargin-right-25\n\nmargin-right-50\n\nTop\n\nmargin-top-0\n\nmargin-top-1\n\nmargin-top-2\n\nmargin-top-3\n\nmargin-top-4\n\nmargin-top-5\n\nmargin-top-10\n\nmargin-top-15\n\nmargin-top-20\n\nmargin-top-25\n\nmargin-top-50\n\nBottom\n\nmargin-bottom-0\n\nmargin-bottom-1\n\nmargin-bottom-2\n\nmargin-bottom-3\n\nmargin-bottom-4\n\nmargin-bottom-5\n\nmargin-bottom-10\n\nmargin-bottom-15\n\nmargin-bottom-20\n\nmargin-bottom-25\n\nmargin-bottom-50\nMargin helper\nLast child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nLast child (parent class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (self class)\n\nChild\nChild\nChild\nChild\nChild\n\nFirst child (parent class)\n\nChild\nChild\nChild\nChild\nChild\nPadding\nSurrouding\n\npadding-0\n\npadding-1\n\npadding-2\n\npadding-3\n\npadding-4\n\npadding-5\n\npadding-10\n\npadding-15\n\npadding-20\n\npadding-25\n\npadding-50\n\nHorizontal\n\npadding-x-0\n\npadding-x-1\n\npadding-x-2\n\npadding-x-3\n\npadding-x-4\n\npadding-x-5\n\npadding-x-10\n\npadding-x-15\n\npadding-x-20\n\npadding-x-25\n\npadding-x-50\n\nVertical\n\npadding-y-0\n\npadding-y-1\n\npadding-y-2\n\npadding-y-3\n\npadding-y-4\n\npadding-y-5\n\npadding-y-10\n\npadding-y-15\n\npadding-y-20\n\npadding-y-25\n\npadding-y-50\n\nLeft\n\npadding-left-0\n\npadding-left-1\n\npadding-left-2\n\npadding-left-3\n\npadding-left-4\n\npadding-left-5\n\npadding-left-10\n\npadding-left-15\n\npadding-left-20\n\npadding-left-25\n\npadding-left-50\n\nRight\n\npadding-right-0\n\npadding-right-1\n\npadding-right-2\n\npadding-right-3\n\npadding-right-4\n\npadding-right-5\n\npadding-right-10\n\npadding-right-15\n\npadding-right-20\n\npadding-right-25\n\npadding-right-50\n\nTop\n\npadding-top-0\n\npadding-top-1\n\npadding-top-2\n\npadding-top-3\n\npadding-top-4\n\npadding-top-5\n\npadding-top-10\n\npadding-top-15\n\npadding-top-20\n\npadding-top-25\n\npadding-top-50\n\nBottom\n\npadding-bottom-0\n\npadding-bottom-1\n\npadding-bottom-2\n\npadding-bottom-3\n\npadding-bottom-4\n\npadding-bottom-5\n\npadding-bottom-10\n\npadding-bottom-15\n\npadding-bottom-20\n\npadding-bottom-25\n\npadding-bottom-50\nHeight\nWidth\n30px\n35px\n40px\n45px\n50px\n60px\n70px\n80px\n90px\n100px\n\n10pct\n20pct\n25pct\n30pct\n33pct\n40pct\n50pct\n60pct\n66pct\n70pct\n75pct\n80pct\n90pct\n100pct\nContent based min-width\nThe min-width property defines the smallest width an element can shrink to. When using keywords like max-content, min-content, orfit-content, you tell the browser how the element should behave in relation to its content size. These values are especially useful in responsive layouts or flexible components where content-driven sizing is required.\n\n- min-width-min-content The element’s minimum width becomes the smallest possible width without causing content overflow. It allows text wrapping, meaning the element will compress as much as possible while still displaying all content correctly.\n- min-width-max-content The element’s minimum width equals the longest unbreakable line of its content. It prevents text or inline items from wrapping, forcing the box to expand horizontally to fit the entire content in one line. This may cause overflow if the content is too wide for its container.\n- min-width-fit-content This is a hybrid behavior — the element adapts its width somewhere betweenmin-content and max-content. The browser decides the best fit for the available space, making it suitable for adaptive or flexible layouts.\nmax-contentThis_is_a_really_long_word_that_will_not_break.\n\nmin-contentThis is a really long text that will break and wrap.\n\nfit-contentThis text fits naturally within the box.\nBreadcrumb\nlevel 1\nlevel 2\nlevel 3\nlevel 4\nPager\nSee Pager for the actual React component.\nPager with label\n\nPrevious\nThe previous chapter\n\nNext\nThe next chapter\n\nCompact Pager without label\n\nPrevious\n\nNext\nPagination\n1\n2\n3\n4\n5\n\nUsage\nUse pagination buttons only for UI elements that benefit from stepping through discrete content pages, such as: Image carousels – where users navigate through multiple slides or multi-step flows – to guide users through a process one step at a time.\nNot for Tables\nTables should use a “Load more” button instead of pagination.\nWhy \"Load more\" is preferred\nContinuous scanning:\nUsers can scroll down and view more data without breaking flow.\nLess disruption:\nAvoids jarring page reloads or resets when switching pages.\nImproved comparability:\nAll previously loaded data stays in view, enabling easier side-by-side comparison of rows.\nLess cognitive load:\nUsers rarely remember what was on “Page 6”, especially when rows are changing. Sequential pages interrupt scanning and exploration.\nNo page size UI:\nYou don’t need to offer dropdowns for rows per page, reducing UI clutter.\nPills\nCondensed filled nav-pills as view toggle\nStandard\n\nPill 1\nPill 2\nPill 3\nDisabled Pill\n\nJustified\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nJustified with icons\n\nPill 1\n\nPill 2\n\nPill 3\n\nDisabled Pill\n\nJustified with word-wrap\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\nFilled\n\nFirst tab\nSecond tab with longer content\nThird tab\nFourth tab\n\nFilled with icons only\n\nFilled condensed (for use with other form elements)\n\nShipments\nVehicles\nTrailer\nStacked\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent\n\nStacked pill 1\nStacked pill 2\nStacked pill 3\nDisabled stacked pill\n\nStacked decent menu\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\n\nLorem ipsum\nDolor sit amet\nShipments\nVehicles\n\nPlease selectOption 1\nOption 2\n\nLaneLoad IDETAStatus\n\nRotterdam → MunichLD-4827110:40In transit\nHamburg → LyonLD-5172312:15At cross-dock\nMilan → ZurichLD-6001814:05Delivered\nTabs\nStandard\n\nTab 1\nTab 2\nTab 3\nDisabled tab\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nBordered content\n\nTab 4\nTab 5\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\n\nJustified with word-wrap\n\nTab 1\nTab 2\nTab 3\nLong tab name with line-break\n\nRaw denim you probably have not heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.\nTable\nSee also our Table components like TableToolbar, TableSearch,TableViewToggles, TableCardsSorting, and TableSettingsDialog. For a more advanced table demo checkout our demo service\nCommon table style\nLabelNewAction\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nLabel\n\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable head\nDefault table head\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\n\nTable head filled\n\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nRounded table\nUse the table rounded classed when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners without needing to add additional padding.\nColumn headColumn headColumn headColumn head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nHover table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nBordered table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nStriped table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nGrouped table\nHead columnHead columnHead columnHead column\n\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nExtendedRow columnExtendedRow columnExtendedRow columnExtendedRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nCompactRow columnCompactRow columnCompactRow columnCompactRow column\nSticky table header\nSticky column headSticky column headSticky column headSticky column head\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nSticky table columns\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nSticky first columnContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes here\nHeadHeadHeadHeadHeadHeadHeadHeadHead\n\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereContent goes hereSticky last column\nTable grid lines\nShowing table grid lines my be used in data heavy tables also known as DataTables.\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nTable row span\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumn\nTable double row header\nDouble row header with filled header\nScores\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\n\nDouble row header with border and footer\nYears\n20212022202320242025\n\nProduct 1Income50708090100\nExpense3763708291\nProfit1371089\n\nProduct 2Income5067799054\nExpense3370507930\nProfit17-3191221\n\nTotal Profit304292030\nCondensed table\nHead columnHead columnHead columnHead column\n\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nColumnColumnColumnColumn\nFixed table layout\nThe table-layout-fixed class avoids a horizontal overflow by squeezing all columns together. Use this option with caution since columns with a fixed width cannot be compressed any further, and the content of the squeezed columns may not be readable anymore.\nHead columnHead columnHead columnHead columnHead column\n\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nEverycolumn has a differentlength of contentbut the width of each colum is alwaysthe same\nResponsive tables\nTables - by design - are not great for small screens. Columns get squeezed together, and content is hard to read or gets cut off.\n\nThere are some options to tackle this problem\n\n- Wrapping the table in another div element and using the class table-responsive on that wrapper. That will create a horizontal overflow of the table when the available space exceeds.\n- Try to avoid defining a fixed width on all columns as that avoids shrinking columns automatically for smaller screens.\n- Use alternative representations for the table by either rendering a list instead of on small screens or using the table cards view on mobile screens.\n- Use class ellipsis-1 for column header or table cell content when the text gets truncated and to show the \"...\" at the end.\nTable cards\nNewButton\n\nFilter\n\nLabel\n\nIdId\nName\nVIN\nStatus\nDuration\n\nIdNameVINStatusDuration\n\n233IpsumNo dataInactive5h 15m\n\n456No data456Active4h 55m\n\n878No data878Active9h 10m\n\n895No data895Active8h 45m\n\n978IpsumNo dataInactive6h 35m\n\n2345Lorem2345Active11h 50m\n\n2445No data2445Active7h 25m\n\n3456No data3456Active12h 00m\n\n4567No data4567Active10h 20m\n\n7354Lorem7354Active10h 30m\n\n70/100\n\nLoad more\nStates in tables\nHead columnHead columnHead columnHead columnHead column\n\nNo entries found\nWe could not find any data entries for your search query. Please refine your search\nAlerts\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\n\nLorem ipsumLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.\nSee More\nBadges\nUnlike labels, which are used for categorization and emphasis, badges provide quick contextual information in a compact and visually distinct manner.\nUse badges for numeric indicators, such as showing counts (e.g., unread messages, notifications, cart items). They are also useful for small floating highlights on UI elements (e.g., \"New\" or \"Beta\"). Badges are commonly placed on icons, buttons, menus, or navigation elements.\nHome1\nProfile\nMessages3\n\n01234567\n01234567\n1011121314151617\nBadges on Icons\n\n2323232323232323\nBadges as Indicator\n\nInbox3\nInbox99+\nCallouts\nCallout default\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout primary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout secondary\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout info\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout success\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout warning\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n\nCallout danger\nAt vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\nCounter\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nKey\nKeys examplePro tip: press m to comment\nPress ctrl + a to select all\n\nUse lower-case namesshiftenterctrlalt\nUnicode symbols⇧⇪↵⌫→←↑↓⇥⇤␣\n\nMac specific keys - see DeviceUtils⌘⌥⌃\nLabels\nNote: For having icons in labels, the text must be wrapped with a span to ensure the correct spacing.\nLabels are small, colored indicators used to represent statuses, categories, or highlights in the UI.\nThe standard labels have a light background and are ideal for subtle status indications that blend naturally with the interface.\nThe filled labels use a bold background color, making them more prominent—best suited for drawing attention to critical statuses or highlighting important information.\n\nStandard labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nLabels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nFilled labels width icons\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\n\nCondensed and filled labels\ndefault\nprimary\nsecondary\ninfo\nsuccess\nwarning\ndanger\nmuted\nLists\nOrdered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nUnordered list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nSquare list\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\n\nLorem ipsum dolor sit amet, dui eget elit.\nList groups\nList group item default\nList group item primary\nList group item secondary\nList group item info\nList group item success\nList group item warning\nList group item danger\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nLorem ipsum dolor sit amet\n3\n\nList group item link (a)List group item link (a)List group item link (a)List group item link (a)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\nList group item link (.list-group-item-link)\n\nHeadline default\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndefault\n\nHeadline primary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nprimary\n\nHeadline secondary\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsecondary\n\nHeadline info\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ninfo\n\nHeadline success\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nsuccess\n\nHeadline warning\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\nwarning\n\nHeadline danger\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\ndanger\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\n\nHeadline\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n\n3\nPanels\npanel-heading1\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\n\npanel-heading11\n\npanel-body\npanel-footer\nProgress bars\nStandard\n\nStriped\n\nAnimated\n\nIndeterminate\n\nStacked\n\nStacked ratings\n\nStacked ratings with custom icon overlay\nPoorExcelent\nWells\nHi, my name is well-sm\n\nHi, my name is well\n\nHi, my name is well-lg\nForms\nLegend\n\nEmail\nPassword\nTextarea\n\nNumber with controls\nNumber without controls\n\nRadiosOption one\nOption two\n\nCheckboxLorem ipsum dolor sit amet.\n\nNative Selects12345\nCancelSubmit\n\nDisabled input\nInput success\nInput warning\nInput error\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nTotal lengthm\n\nHeightm\n\nDefault inputSome input info for the user\nInput addon labelLabelLabel\n\nInput addons.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\n\nDefault inputSome input info for the userThis is an error message\nInput addon labelLabelThis is a warning message\nLabel\n\nInput addons\n.00\n\nInput groupsButton\n\nButton\n\nInput with dropdownAction\n\nAction\nForm sized examples\nSize by form-Group class\nform-group-sm\nform-group-smXX\n\nform-group-sm12345\nform-group-sm\nform-group\nform-groupXX\n\nform-group\nform-group12345\nform-group-lgXX\n\nform-group-lg\nform-group-lg\nform-group-lg12345\n\nSize by Input Class\ninput-sm\ninput-group-smXX\n\ninput-sm\ninput-group-sm12345\n\ninput\ninput-groupXX\n\ninput\ninput-group12345\n\ninput-lg\ninput-group-lgXX\n\ninput-lg\ninput-group-lg12345\nForm with fieldset and legend\nAn HTML <fieldsetelement is used to group related elements within a form. It is particularly useful for organizing complex forms by creating logical sections, improving both the form's structure and user experience. The <fieldsetcan be paired with a <legendelement to provide a caption for the grouped content, making the form easier to understand and navigate.\n\nAllows for selective processing of grouped data, making it useful for handling specific sections of a form independently when used with the FormData API.\nA form with fieldsetLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\n\nA form with fieldset disabledLorem ipsum\nDolor Sit amet\n\nLorem ipsum\n\nLorem ipsum\nInput resize\nresize-noneresize-vertical\nAnimations\nslide-out\nleftupdownright\n3s2s1s09s08s07s06s05s04s03s02s01s\nlooprestart\nlineareaseease-inease-outease-in-out\ninfiniterepeat-1repeat-2repeat-3\nTest animationReset\nTransition\nTransition properties\n\ntransition-opacity\ntransition-position\ntransition-all\n\nTransition timing functions\n\ntransition-ease\ntransition-ease-in-out\n\nTransition duration\n\ntransition-duration-01\ntransition-duration-02\ntransition-duration-03\ntransition-duration-04\ntransition-duration-05\nBlur\nBackdrop blur\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Integer eget metus vel nunc efficitur iaculis elementum ante et est sagittis integer eget metus vel nunc semper.\nAspect ratio\nWith fixed width\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\n\nWith fixed height\n\n1\n1-2\n2-1\n4-3\n16-9\n16-10\nInset\ninset-0\n\ninset-x-0\n\ninset-y-0\n\nBase element\nShorthand element\nHelper\nclearanceclearfixchildren-first-border-top-nonefirst-child-border-top-nonechildren-last-border-bottom-nonelast-child-border-bottom-nonechildren-first-margin-top-0first-child-margin-top-0children-last-margin-bottom-0last-child-margin-bottom-0\nRotate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nRotate 360°\n\nRotate -5° to 5°\nScale\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform syntax.\nScale\n\nHover scale\nTranslate\nNote: The transform classes can not be combined. For example rotate or scale. It is because of the CSS syntax. For more information see Transform Syntax.\nDisplay\ndisplay-blockdisplay-inline-blockdisplay-flexdisplay-inline-flexdisplay-inlinedisplay-none\nOverflow\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\nVisibility\nVisible only at a certain breakpoint\n\nvisible-xsvisible-lsvisible-smvisible-mdvisible-lgvisible-xl\nVisible from a certain breakpoint\n\nvisible-min-lsvisible-min-smvisible-min-mdvisible-min-lg\nHidden only at a certain breakpoint\n\nhidden-xshidden-lshidden-smhidden-mdhidden-lghidden-xl\nHidden from a certain breakpoint\n\nhidden-min-lshidden-min-smhidden-min-mdhidden-min-lg\nHidden when element is empty\n\nhidden-empty\nscreen-xs: >480pxscreen-ls: 480pxscreen-sm: 768pxscreen-md: 992pxscreen-lg: 1200pxscreen-xl: 1700px\n\n.visible-xsVisibleHiddenHiddenHiddenHiddenHidden\n.visible-lsHiddenVisibleHiddenHiddenHiddenHidden\n.visible-smHiddenHiddenVisibleHiddenHiddenHidden\n.visible-mdHiddenHiddenHiddenVisibleHiddenHidden\n.visible-lgHiddenHiddenHiddenHiddenVisibleHidden\n.visible-xlHiddenHiddenHiddenHiddenHiddenVisible\n\n.hidden-xsHiddenVisibleVisibleVisibleVisibleVisible\n.hidden-lsVisibleHiddenVisibleVisibleVisibleVisible\n.hidden-smVisibleVisibleHiddenVisibleVisibleVisible\n.hidden-mdVisibleVisibleVisibleHiddenVisibleVisible\n.hidden-lgVisibleVisibleVisibleVisibleHiddenVisible\n.hidden-xlVisibleVisibleVisibleVisibleVisibleHidden\n\n.visible-min-lsHiddenVisibleVisibleVisibleVisibleVisible\n.visible-min-smHiddenHiddenVisibleVisibleVisibleVisible\n.visible-min-mdHiddenHiddenHiddenVisibleVisibleVisible\n.visible-min-lgHiddenHiddenHiddenHiddenVisibleVisible\n\n.hidden-min-lsVisibleHiddenHiddenHiddenHiddenHidden\n.hidden-min-smVisibleVisibleHiddenHiddenHiddenHidden\n.hidden-min-mdVisibleVisibleVisibleHiddenHiddenHidden\n.hidden-min-lgVisibleVisibleVisibleVisibleHiddenHidden\n\nPrint\n\nvisible-printvisible-print-inlinehidden-print\n\nVisibility only classes\n\nAll the above classes for hidden and visible are based on \"display: none\". The following class affects only visibility, allowing it to impact surrounding elements.\nvisibility-hidden\nZ-index",
     "category": "Foundations",
     "section": "Interaction",
     "boost": "Foundations foundations #foundations Foundations Interaction"
@@ -1093,8 +1133,8 @@
     "id": "start/changelog",
     "title": "Changelog",
     "lead": null,
-    "summary": "- Fixed Map context menu Fixed the typing for the ContextMenuItem component.",
-    "searchText": "Changelog\nVersion 2.1.0 (2026-01-13)\n- Fixed Map context menu Fixed the typing for the ContextMenuItem component.\n\n- Fixed Map route Fixed the typing for the arrowStyle prop of the Route component.\n\n- Fixed Map SimpleClusterLayer type Fixed the typings for the SimpleClusterLayer component’s simpleTheme prop. Please use the new SimpleClusterTheme type instead of the ClusterTheme.\n\n- Fixed Dialog Fixed broken fade animation of Dialogs in Firefox.\n\n- Fixed TableSettingsDialog Fixed TableSettingsDialog so reset to default remains available after reopening when settings differ from defaults.\n\n- Fixed Select Fixed select filter regressions where hitting ‘nothing found’ could leave the dropdown stuck or missing options. Backspacing or clearing now restores the full list and keeps keyboard focus/highlights in sync. Dropdown scroll now resets on reopen and keeps the keyboard-focused item in view when navigating up and down with the arrow keys.\n\n- Update URL feature toggles Replaced the internal \"qs\" library used for parsing URL search parameters with the native URLSearchParams API, allowing us to remove the external dependency. This also solves the vulnerability issue with the \"qs\" library for this version.\n\n- Update Tree Extended the Tree component to support custom external icon and logo URLs.\n\n- Demo Updated the component prop documentation for most components by deriving it directly from the component type definitions and source files. This ensures more accurate documentation and reduces maintenance effort for the demo pages.\nVersion 2.0.1 (2025-12-15)\n- Fixed DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.\n\n- Fixed Area, Line Fixed chart components type definition for prop \"dataKey\".\nVersion 2.0.0 (2025-12-12)\n- Removed We’ve modernized our build setup by removing CommonJS support and switching entirely to ESM. If your project still depends on CommonJS (for example, with older tooling like Webpack), your build may fail. Please update your development environment to support ESM.\n\n- Removed Removed the root index.js barrel file that re-exported all components. This change eliminates multiple import paths, improves IntelliSense auto-import behavior, and prevents importing the entire UIKIT, ensuring proper tree shaking. Please update your imports to use default imports, for example: import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout'.\n\n- Removed CalendarStripe Removed deprecated prop \"render\". Please use \"renderDay\" instead.\n\n- Removed Collapse Removed deprecated prop \"in\". Please use \"open\" instead.\n\n- Removed ClearableInput Removed deprecated prop \"alwaysShowMask\". Please use \"maskVisibility='always'\" instead.\n\n- Removed Dialog Removed deprecated prop \"onHide\". Please use \"onClose\" instead.\n\n- Removed SingleMapMarker Removed deprecated prop \"size\". Please use \"anchorSize\" instead. Removed deprecated prop \"visibleOnHover\". Please use \"markerOnHover\" instead.\n\n- Removed DataTab Removed the internal \"fade in\" class names from the DataTab component, which were previously kept for backward compatibility with CSS transitions used in older service tests. Please use the new onAnimationStart and onAnimationEnd callbacks instead.\n\n- Renamed Animations Renamed \"framer-motion\" component to \"motion\" as we have migrated to the latest motion library that was formerly known as Framer Motion.\n\n- Removed NotificationsContainer Removed deprecated prop \"stacked\" since it is not supported anymore. Removed legacy usage documentation.\n\n- Breaking Notification Removed deprecated prop \"priority\" since it is not supported anymore. Removed old notification API in favor of the notifications options object. If you still use the legacy API \"Notification.info(message, title, timeOut, callback, priority)\", please migrate to the format \"Notification.info(message, options)\".\n\n- Removed OnboardingTip Removed deprecated prop \"clickflow\". Please use the \"useOnboardingTour\" hook instead.\n\n- Removed Radiobutton Changed the onChange callback so it is only used in the controlled use case, as already documented in earlier versions. For uncontrolled usage, please use the onClick callback instead.\n\n- Removed NumberInput / NumberControl Removed deprecated prop \"onValueChanged\". Please use \"onChange\" instead.\n\n- Removed Sidebar Removed deprecated prop \"enableNavigationButtons\". Please use \"headerButtons\" instead. Removed deprecated prop \"disableFullscreen\". Please use \"enableFullscreenToggle\" instead. Removed deprecated prop \"fullscreen\". Please use \"openInFullscreen\" instead.\n\n- Removed Removed old class \"invisible\". Please use \"visibility-hidden\" instead.\n\n- Icons Renamed icon rioglyph- retweet rioglyph- repeat-square Renamed icon rioglyph- cost-efficency rioglyph- cost-efficiency Renamed icon rioglyph- eye-option rioglyph- eye-open Removed icon as it was a duplicate of rioglyph- component rioglyph- maintenance-components\n\n- Breaking BarChart, RadialBarChart, PieChart, Legend With this release, the internal Recharts dependency has been migrated to version 3.x. This upgrade introduces a breaking change related to the Legend component: the payload prop, which was previously used internally to inject custom legend data, has been removed from Recharts. As a result, the legend behavior in BarChart and RadialBarChart has been updated. The default legend position is now correctly rendered vertically in the top-right corner. Previously, it appeared at the bottom despite the default settings. Please review your charts to ensure the legend position remains as intended. If you use colors defined inside your data objects for BarCharts, you must now provide both the items (your data array) and a custom content render function to the Legend. This replaces the old payload-based legend behavior. Series-based legends using a formatter continue to work as before. Recharts 2.x also used to have a prop named activeIndex that was setting which item the user was interacting with. In version 3.0, this prop has been removed. For more details, see the Recharts activeIndex guide https://recharts.github.io/en-US/guide/activeIndex/ If your PieChart uses an activeShape render callback, you should now use the ChartTooltip component and set its defaultIndex to replace the previous activeIndex behavior. See the whole Recharts migration guide for more details: https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes\n\n- Fixed FilePicker Fixed the type of the \"files\" parameter from FileList to File[] of the \"onPick\" callback.\n\n- Fixed Rioglyph Fixed Rioglyph icon typing to expose a concrete IconType union of all icon names, improving autocomplete and safety for consumers.\n\n- Update AssetTree Added new asset type \"car\" to AssetType type definition and to built-in type counter of the AssetSummary for the Tree component.\n\n- Update VolkswagenApplicationHeader Updated VolkswagenApplicationHeader with new VW Group logo. This single group logo also replaces the logo for \"VW Aktiengesellschaft\" and \"Group Logistics\" resulting in an overall smaller header height.\n\n- Update Migrated entire codebase from lodash to es-toolkit to leverage modern JavaScript.\n\n- New AnimatedTextReveal Added new AnimatedTextReveal component emphasize text through motion for showing incremental updates or loading states.\n\n- New useAutoAnimate Added a lightweight hook to animate add/remove/reorder operations of children with zero configuration.\n\n- New fit-content Added new \"min-width-fit-content\" utility classes. See detailed explanation and comparison to other content-based min-width classes.\n\n- New text-box Added new \"text-box\" utility classes to trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.\n\n- New icons Added new rioglyph style for disabled icons with a line\n\n- Icons New icons rioglyph- ai rioglyph- arrows-collapse rioglyph- arrows-combine rioglyph- arrows-expand rioglyph- arrows-horizontal rioglyph- arrows-split rioglyph- assigned rioglyph- axis-x rioglyph- axis-y rioglyph- axis-z rioglyph- bar-chart-box rioglyph- battery-charging rioglyph- brain rioglyph- branch-horizontal rioglyph- branch-remove rioglyph- branch-vertical rioglyph- broadcast rioglyph- bulb rioglyph- chip rioglyph- cloud-progress rioglyph- coffee rioglyph- compass rioglyph- crown rioglyph- discount-badge rioglyph- emergency-stop rioglyph- eye-closed rioglyph- eye-open rioglyph- filter-reset rioglyph- get rioglyph- give rioglyph- globe-alt rioglyph- hierarchy rioglyph- history rioglyph- insert rioglyph- leafs rioglyph- magic-wand rioglyph- note rioglyph- progression rioglyph- satellite-radar rioglyph- stack-add rioglyph- stack-iso rioglyph- stats-high rioglyph- stats-line-dots rioglyph- stats-low rioglyph- stats-medium rioglyph- time-incomplete rioglyph- unassigned rioglyph- unavailable rioglyph- variable rioglyph- workflow-step rioglyph- workflow Updated icons rioglyph- arrow-down rioglyph- arrow-left rioglyph- arrow-right rioglyph- arrow-up rioglyph- battery-level-empty rioglyph- battery-level-full rioglyph- battery-level-low rioglyph- cloud-download rioglyph- cloud-not-saved rioglyph- cloud-upload rioglyph- compare rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- cost-efficency rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- error-sign rioglyph- flash rioglyph- info rioglyph- maintenance-components rioglyph- merge rioglyph- missing rioglyph- off rioglyph- refresh rioglyph- repeat rioglyph- resize-full rioglyph- resize-horizontal rioglyph- resize-small rioglyph- resize-vertical rioglyph- save rioglyph- trash rioglyph- volume rioglyph- workshop rioglyph- wrench Removed icons rioglyph- video-off rioglyph- wifi-off\nVersion 1.13.2 (2025-11-19)\n- Fixed Obfuscate data Fixed a bug that triggered an infinite loop when data-pii was applied to a nested child element.\n\n- Update Button Added new \"unstyled\" buttons style\nVersion 1.13.1 (2025-10-20)\n- Fixed Fixed bundling npm package. Resolve nested folder structure in npm package build.\nVersion 1.13.0 (2025-10-20)\n- Fixed fuel type utils Fixed missing root export for fuel type utils.\n\n- Fixed Action button style Fixed the muted style for action buttons.\n\n- Fixed MapMarker Fixed the active styling for the map marker active state to visually balance the state icon.\n\n- Update Rioglyph Added the missing feature to use external SVGs as a rioglyph icon.\n\n- Update FilePicker Added new \"fullHeight\" flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow.\n\n- New max-content Added new \"min-width-max-content\" and \"min-width-min-content\" utility classes. The first prevents content from breaking by expanding to fit its full width, while the second allows content to shrink to the smallest width possible without overflowing.\n\n- New Grid Added new \"grid-template-end--1\" utility class. This class allows grid items to span until the last grid line, effectively positioning them to extend to the end of the grid.\n\n- New Obfuscate data Added new \"data-hide-pii\" attribute to the <htmlelement to obfuscate sensitive data directly in the frontend. Obfuscate names, emails, or phone numbers — without needing backend filtering or extra code changes.\n\n- Icons New icons rioglyph- circle-dashed rioglyph- square-dashed rioglyph- cube-dashed rioglyph- cube rioglyph- group-blocks rioglyph- dashboard-view rioglyph- ok-dashed rioglyph- prompt rioglyph- recycle rioglyph- warehouse rioglyph- status-change rioglyph- status-change-horizontal rioglyph- transition-right rioglyph- transition-push-right rioglyph- migrate rioglyph- convert rioglyph- shelve rioglyph- conveyor-belt rioglyph- tracking-package rioglyph- issue-tracking Updated icons rioglyph- ok-sign rioglyph- ok-circle\nVersion 1.12.0 (2025-09-22)\n- Fixed Select Fixed an issue in the Select component where clearing the filter input after a no-results search caused the option list to remain incomplete. The dropdown now correctly restores the full option set when the filter is cleared.\n\n- Fixed AssetTree Fixed an issue where clicking the checkbox on a tree group would also toggle its expanded state. Now, selecting a tree group via its checkbox only triggers selection and no longer expands or collapses the group. This prevents unintended virtualization behavior where expanding a node could cause the tree to switch into virtualized mode, resulting in the loss of tree group selections.\n\n- Fixed Callout Removed overflow hidden from callouts so dropdowns can be shown correctly.\n\n- Fixed Ellipsis Fixed \"ellipsis-1\" class.\n\n- New Rioglyph, fuel type utils Added a new component for rendering Rioglyph icons as a span element. The component also supports paired icons, allowing two glyphs to be displayed together as a combined symbol. In addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.\n\n- Update FormLabel Added missing \"Node\" type info for supportingText the props table and changed the handling of supportingText styling so that the text-italic class is only applied when the supportingText is a string. If you provide a string wrapped in a div or span, you have to set the italic class manually.\n\n- Update Tree Added a new \"pairIcon\" prop to TreeItem allowing pair icons to be individually specified in the Tree component.\n\n- Update ClearableInput Added new input mask related props \"maskOverwrite\", \"maskDefinitions\", and \"maskDispatch\" to support dynamic masking for more complicated use cases and to give more control over the masking.\n\n- Update useOnboardingTour Updated the typings and documentation for the useOnboardingTour hook.\n\n- style Pills Updated the hover style for the application header navigation as well as for the nav pills.\n\n- Icons As RIO will support more fuel types in the future, and because of inconsistencies in existing naming conventions, we introduced a new icon: \"rioglyph-fuel-liquid\". This icon replaces \"rioglyph-fuel-diesel\" to better represent a broader range of liquid fuels. With this change, there are now four dedicated fuel icons available, plus one for a mixed fuel type. rioglyph- fuel-liquid rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- fuel-mix With this approach, frontends can use the same icon for diesel or gasoline and also for CNG and natural gas by simply using the new \"getFuelIcon\" function form the Rioglyph component. The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list. Additional new icons: rioglyph- video rioglyph- video-off\n\n- Demo Service-specific settings Updated the ApplicationHeader demo to include an example of service-specific settings, establishing a consistent approach for presenting unique configurations that cannot be included in the global user profile settings. It helps ensure a familiar user experience across different services while keeping global settings clean and focused.\nVersion 1.11.0 (2025-08-11)\n- Fixed Map settings Updated implementation for map satellite view to support zoom limits by using a hybrid map layer approach.\n\n- Fixed SteppedProgressBar Fixed styling issue in circular variant of the SteppedProgressBar when an item is active.\n\n- Fixed SplitDialog Fixed left side width for larger dialogs. Added new prop to hide the split divider.\n\n- Fixed FormLabel Fixed usage of HTML tag label only when part \"htmlFor\" is set and has a value.\n\n- Update Tree Added a new \"expandedIcon\" prop to the TreeGroups to support showing a different icon when the group is expanded.\n\n- Update Sticky table columns Renamed \"table-sticky-cell-first\" and \"table-sticky-cell-last\" to \"table-sticky-column-first\" and \"table-sticky-column-last\" for improved clarity. Updated the styles to respect the table header and prevent content from peeking through when horizontally scrolled.\n\n- New useAverage, useCount, useMin, useMax, useSum Added useAverage, useCount, useMin, and useMax, and useSum hooks for locale-aware numeric aggregation of object lists. Supports specifying a dot-separated path to the target property.\n\n- New Table grid lines Added new table class \"table-grid-lines\" that is useful when building data heavy tables.\n\n- New Table row span and Table double row header Added new table examples showcasing row span and double header layouts to demonstrate table design capabilities for data heavy tables.\n\n- New Progress bars indeterminate style Added new indeterminate style to show a progress bar even when you not know how long it will take.\n\n- Demo Templates Added new template sections and several UI block examples. Updated the template menu structure to improve navigation and discoverability.\n\n- Demo Email generator We’ve built a neat little email editor that helps you compose emails and copy the HTML code.\n\n- Demo Route generator There is a new route generator with a JSON export of the LAT/LNG coordinates.\nVersion 1.10.1 (2025-01-08)\n- Fixed Map settings Changed implementation for map satellite view as the old implementation relied on deprecated Here APIs.\nVersion 1.10.0 (2025-07-28)\n- Fixed Fixed an issue where clicking the \"Scroll to Top\" arrow button would block further scrolling down the page. The scroll behavior is now fully restored after returning to the top, ensuring smooth navigation throughout.\n\n- Fixed DatePicker Fixed styling issue in DatePicker inputs with error feedback where input text was unnecessarily cut off due to padding for the clear icon, even when no clear button was rendered.\n\n- Fixed ApplicationHeader Fixed an issue where the application header rendered in mobile style on initial page load when the container width could not be determined in time. This resolves visual jumping between mobile and desktop header layouts during mount.\n\n- Fixed SavableInput / SavableDateInput Moved error handling into the components to simplify feedback styling. Added two new props, \"errorMessage\" and \"hideErrorIcon\", to control the visual appearance of error feedback.\n\n- Fixed Panels, Pills, Badges Fixed various element styles for brand themes.\n\n- Update Tree Added a new \"icon\" prop to TreeItem allowing icons to be individually specified or explicitly omitted in the Tree component. Also updated the TreeGroups to support icon values with or without the rioglyph- prefix for improved flexibility.\n\n- New CSS Container queries Introduced new utility classes to make use of container queries, enabling responsive spacing and layout adjustments based on container width rather than viewport size. For more details, please check out our responsiveness guidelines.\n\n- New Rounded table Added new utility classes \"table-bottom-rounded\" and \"table-rounded\" for use when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners.\n\n- Icons Added icons icons rioglyph- train rioglyph- cargo rioglyph- design\n\n- Style We migrated our codebase from Less to Sass to modernize our tooling and take advantage of the latest CSS capabilities, as Less is no longer actively maintained.\n\n- Demo Renamed the main navigation items to improve clarity and consistency. “Design” is now called Foundations, and “UI Templates” has been simplified to Templates to better reflect their purpose.\n\n- Demo Added new sections and examples to UI templates that serve as a quick starting point for developing your own layouts and interfaces. See Expandable details, Details views, and Progress cards. Moved the panel example from the foundations tab to Panel variants.\nVersion 1.9.0 (2025-06-30)\n- Fixed Tooltip / SimpleTooltip Fixed delaying tooltips using a single delay number. Tooltip delay now only applies to showing, not hiding. To configure both show and hide delays, use the object format instead of a single delay number.\n\n- Fixed ClearableInput Properly pass external ref to underlying masked input component using its inputRef prop.\n\n- Fixed DatePicker Fixed an issue where the DatePicker would render incorrectly when used as a child inside a table cell.\n\n- Update TableHead, TableCol Extended table components to pass additional props to the underlying tag.\n\n- Update useTableSelection Extended useTableSelection hook to allow setting the selected rows and change the active row from the outside using the \"setSelectedRowIds\" and \"setActiveRowId\" setter functions.\n\n- Update Select, Multiselect We’ve reverted the max-width of the Select, and Multiselect dropdown to 100% to stay consistent with other components and to prevent unnecessary line breaks within dropdown items. If the dropdown appears too wide, you can use the dropdownClassName prop to apply a shorter max-width-x utility class as needed.\n\n- Update AssetTree Extend the Tree component to virtualize tree items when a certain threshold is reached. The number of items rendered beyond the visible area can be controlled using the \"overscan\" prop. This change improves performance for large trees and long lists.\n\n- Update Map Extend the Map component to allow specifying minimum and maximum zoom levels. By default, the minimum zoom level is set to 3, defining the furthest zoomed-out view. The maximum zoom level, representing the closest zoomed-in view, is set to 20. Improved zoom behavior to reduce momentum and allow for more controlled zooming.\n\n- Update FormLabel Extend the FormLabel component to allow passing in a React element as supporting text, making it easier to add question mark icons with tooltips.\n\n- New SavableDateInput Added new dedicated savable input component that wraps the DatePicker.\n\n- New BarList Added BarList component to display customizable, animated horizontal bars for comparative data.\n\n- New useTableExport Added new custom hook to easily export table data as CSV.\n\n- New useIsFocusWithin Added new custom hook to easily detect if the focus is inside a defined document node.\n\n- Docu Pagination Added usage documentation for pagination and explained why the load more button is preferred for tables.\n\n- Demo UI Templates Added new sections showcasing various UI templates and blocks that serve as a quick starting points for developing your own layouts and interfaces.\nVersion 1.8.0 (2025-05-19)\n- Fixed Map Fixed issue with satellite view layer not rendering correctly when Norwegian language is selected.\n\n- Fixed usePostMessage Remove logging of triggered events to the console.\n\n- Fixed Height classes Corrected height calculation when using \"\"...-height-100vh\" classes inside module-content; vertical padding was not properly subtracted.\n\n- Update URL feature toggles Made the feature toggle value types more precise. Added new feature toggle definition functions that allow you to specify a default value.\n\n- Update AssetTree Extended the Tree component with an onTypeFilterChange callback, allowing the service to filter selected assets accordingly.\n\n- Update Multiselect Added a maximum width of 200px for the Multiselect dropdown component. Additionally, there are two new props \"dropdownClassName\" and \"btnClassName\" to allow further customization similar to the Select component.\n\n- Update ButtonToolbar Extend alignment prop to center buttons.\n\n- Update Switch Added new \"className\" prop to the Switch.\n\n- Update ButtonDropdown Added new prop \"toggleButtonType\" to ButtonDropdown component to allow using a button, a tag or a label as toggle element.\n\n- Update ClearableInput Added a new prop \"maskVisibility\" to control when the mask pattern is visible. Deprecated the prop \"alwaysShowMask\". in favor of maskVisibility.\n\n- Update useOnboardingTour Expose internal onDestroyed callback. Add \"disableActiveInteraction\" prop to disable interaction of highlighted elements.\n\n- Update useSorting Added new callback function \"setSortDirection\" allowing to set sort direction when used with table card sorting.\n\n- New useLocationSuggestions Added new custom hook to fetch locations from Here API that can be used for search inputs.\n\n- New useSearch Added new custom hook to filter a list of objects by a search value.\n\n- New useTableSelection Added new custom hook to handle both single and multiple row selection in tables, optimized for large datasets.\n\n- New TableHead, TableCol Added new table components \"TableHead\" and \"TableCol\" to simplify table structures especially when used with custom hooks like \"useTableSelect\" and \"useSorting\".\n\n- New SvgImage Added new component that helps rendering SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes.\n\n- Icons New icons rioglyph- envelope-open rioglyph- envelope-indicator\n\n- Replaced Replaced react-input-mask with react-imask in TimePicker and ClearableInput components. The mask prop format has changed and is no longer fully compatible with the old react-input-mask syntax. The main difference is the number placeholder, which has changed from \"9\" to \"0\". Please update the mask prop accordingly when using the ClearableInput with an input mask.\nVersion 1.7.1 (2025-02-14)\n- Fixed Banner Fixed height animation of the Banner component when expanding. Added prop \"initialAnimation\" to disable initial content animation.\n\n- Fixed FormLabel Check for various input group sizes to render respective label text sizes.\n\n- Fixed SplitDialog / ListMenu Fixed the issue where a ListMenu dropdown was rendering all menu items on mobile upon mount. Now, only the dropdown is rendered initially.\n\n- Fixed RIOglyph Removed default aspect ration of 1/1 because of problems in flex/grid layouts.\n\n- Fixed Checkbox Fixed broken indeterminate state\n\n- Update RIOglyph Added new rioglyph-align-top, rioglyph-align-bottom and rioglyph-align-baseline classes for proper alignment width texts. Replaced previously introduced has-inline-icon with new rioglyph-align classes.\nVersion 1.7.0 (2025-02-10)\n- Fixed Collapse Fixed visible content overflow in the Collapse and Expander components during content animations.\n\n- Fixed ApplicationLayout Fixed the issue with passing a ref to the ApplicationLayout by exposing the underlying wrapper element. When merging the external ref with the internal ref, the wrapper is now properly exposed, eliminating the need for accessing ref.current.current in the invoking component.\n\n- Fixed ButtonDropdown / useClickOutside Fixed performance of rendering many dropdowns in a large table by introducing an \"isActive\" flag to the useClickOutside hook so that events are only registered and listening when the dropdown is actually open.\n\n- Fixed Route Fixed rendering of dashed routes via the \"lineDash\" prop.\n\n- Fixed List groups Fixed list group buttons active style.\n\n- Icons RIOGlyph We've transitioned the RIOGlyph icon font to an SVG-based system and allowing support for custom SVGs. Please read our guidelines Almost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font. What has changed? Previously, icons acted like text, inheriting line-height and vertical-align naturally. Now, as SVG elements, icons better have layout adjustments in inline text scenarios. The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup. All icons can now also be displayed as filled icons by adding rioglyph-filled Recommended solution < span className = \" has-inline-icon \" Lorem ipsum dolor sit amet < span className = \" rioglyph rioglyph-face-smile \" </ span </ span Lorem ipsum dolor\n\n- Update Dialog Changed dialog footer to use flex layout to ensure proper button positioning. No more need to add \"pull-right\" or custom flex classes.\n\n- Update Dialog animation Add support for the browser's \"prefers-reduced-motion\" flag. When this flag is enabled, dialog animations are disabled. This can be helpful for customers experiencing performance issues while running the application.\n\n- Update ListMenu Added new props to ListMenuItem to allow adding a badge for the list menu group header.\n\n- Update AppNavigationBar Added new props to AppNavigationBar to support a back button title, a subtitle, and a title size. The title is now always centered.\n\n- Update Notifications Replaced the underlying notification library with \"react-toastify\", introducing new options while maintaining the same API for backward compatibility. This update also includes a refreshed notification style.\n\n- Update Charts Updated internal Recharts library to latest version 2.15.0 to remove some warnings.\n\n- style Labels Updated the design of standard labels for a more modern look and added documentation on when to use them.\n\n- New Button Added new \"muted-filled\" button for occasions where the default button is to prominent and the muted button is to subtle.\n\n- New StepButton Added new \"StepButton\" component for convenience and to ensure consistent styling of this type of button.\n\n- New ButtonToolbar Added new \"ButtonToolbar\" component for convenience and to ensure consistent spacing of buttons.\n\n- New FormLabel Added new \"FormLabel\" component for convenience to be used on form elements that utilizes a \"htmlFor\" prop and a label or other form elements.\n\n- New LabeledElement Added a simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements\n\n- New Card Added new \"Card\" component for convenience to apply default styling for a card like element. This component aims to simplify and align common card styling.\n\n- New Avatar Added new \"Avatar\" component for showing the user name initials, a user image, or a user icon.\n\n- New Banner Added new \"Banner\" component for rendering informational content on a page.\n\n- New AccentBar Added new \"AccentBar\" component for visual cues.\n\n- New VirtualList Added new \"VirtualList\" component for rendering large lists using a windowing approach.\n\n- New useToggle Added new \"useToggle\" component to simplify boolean state handling. Use it to handle toggle-based logic like switches, modals, or content visibility.\n\n- New Chart colors Added new chart colors to the chart color map.\n\n- Demo Draggable map marker Added new map demo to showcase draggable map marker.\n\n- Icons New icons rioglyph- light-bulb Renamed icons rioglyph- filled-chart rioglyph- area-chart Updated icons rioglyph- am rioglyph- angle-double-down rioglyph- angle-double-left rioglyph- angle-double-right rioglyph- angle-double-up rioglyph- area-in rioglyph- area-out rioglyph- beacon rioglyph- bookable-poi rioglyph- bookmark-square rioglyph- brake rioglyph- businessman rioglyph- car-wash rioglyph- carrier rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- construction rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- document-out rioglyph- download rioglyph- driver-card rioglyph- driver rioglyph- drivercard-in rioglyph- drivercard-out rioglyph- erase rioglyph- file-signature rioglyph- fill rioglyph- folder-open rioglyph- home rioglyph- inbox-in rioglyph- inbox-out rioglyph- log-in rioglyph- logout rioglyph- map-location rioglyph- map-marker rioglyph- pencil-square rioglyph- pm rioglyph- retrofit rioglyph- role-management rioglyph- tachograph-download rioglyph- tms rioglyph- trailer rioglyph- user rioglyph- volume rioglyph- warning-sign rioglyph- weight\n\n- Update Dependencies Updated the minimum React version requirement to 18 to ensure compatibility with the latest features and optimizations. If you are using older versions of React, please update.\n\n- Removed Removed the outdated cross-browser style documentation.\n\n- Update Notifications Extended the writing style guide for guidance for using different notification types\n\n- Update Commonly misspelled words Extend the writing style guide for a list of commonly misspelled or misformatted words\n\n- Update Formatting numbers with units Extended the list of formats for examples of \"kilowatt-hour\" and \"megawatt-hour\". Please note that these units are not yet officially supported by TC39.\nVersion 1.6.1 (2024-12-09)\n- Fixed ApplicationLayout Fixed the application layout to ensure the body contains only a single child, addressing issues with the recently introduced grid layout for the body scrollbar element.\nVersion 1.6.0 (2024-12-02)\n- Fixed SplitDialog Fixed the SplitDialog prop documentation for \"useOverflow\" to clarify that its default value is \"true,\" unlike other dialogs.\n\n- Fixed Multiselect Fixed the Multiselect component to correctly manage the dropdown state and filter value when used in multiline mode with an active filter.\n\n- Update Tree Added \"treeHeaderContent\" prop to the Tree component for rendering additional custom content at the top of the tree, useful for navigation pills.\n\n- Update Dialog Extended dialog sizes for \"fullheight-lg\" and \"fullheight-xl\".\n\n- New useOnboardingTour Introducing a new way to onboard users via an onboarding tour by using the \"useOnboardingTour\" custom hook. Note that weh have deprecated the \"clickflow\" prop for the OnboardingTip component with this new feature.\n\n- New OnboardingDialog Added new OnboardingDialog to initiate a onboarding tour and acts as the welcome dialog for the user of a service.\n\n- New Grid rows Added new grid helper class \"grid-rows-auto-1fr-auto\" to support a 3 row layout with expandable middle row.\n\n- Icons Updated icons rioglyph- cost-efficency Added icons rioglyph- newspaper rioglyph- rocket rioglyph- trophy rioglyph- check-badge rioglyph- check-shield rioglyph- sparkles rioglyph- academic-cap rioglyph- onboarding rioglyph- bookmark rioglyph- bookmark-square\nVersion 1.5.3 (2024-11-05)\n- Fixed AssetTree Fixed asset tree height by setting the \"scrollbar-content-wrapper\" to display flex and let the tree wrapper grow in the flex column direction.\nVersion 1.5.2 (2024-11-04)\n- Fixed SmoothScrollbars Changed height-100pct to min-height-100pct because of height side-effects in chrome.\n\n- Icons Added icons icons rioglyph- oil-can\nVersion 1.5.1 (2024-10-22)\n- Fixed Pills Fix rendering icons in justified filled pills when there is an icon only.\n\n- Fixed SmoothScrollbars Added height-100pct to the recently introduced smooth scrollbar content wrapper. This also fixes a side-effect on the AssetTree component.\n\n- Fixed MapMarker Tone down the POI marker color to better match the new Geofence color and to work better on a large satellite map.\nVersion 1.5.0 (2024-10-21)\n- Fixed Route Fix setting route arrow style. Added color constants for using status colors for routes. Extend demo examples to showcase usage of route styles and colors.\n\n- Fixed SmoothScrollbars Fix updating the scrollbar handle when the content height changes. This fix introduces a new wrapper div to check the children's height. Please check your tests and update them in case you rely on the old structure.\n\n- Fixed Select Fixed an issue with updating the dropdown menu options after the initial render, ensuring that the filter utilizes the updated DOM nodes.\n\n- Update LineChart Extended charts to render additional axis. The demos have been extended for interactive legends to highlight active lines.\n\n- Update Route Extended Route component to allow storing custom data to it which can be used when clicking on the routes polyline to set the route active.\n\n- Update Map isoline Extended the Polygon component to import the RIO colors to use it for an isoline or other polygons. Extended the demo to also include isoline colors.\n\n- Update Colors Adapted the \"gray-decent\" slightly and with that all derived classes like \"bg-decent\" and \"hover-bg-decent\"\n\n- Update Forms All form inputs have a subtle shadow now.\n\n- New Map marker A new map marker color has been added for road restrictions. The geofence color has been updated to avoid confusion with the restriction color used by HERE maps for their road restrictions. The new geofence color provides significantly better contrast and is clearer to see on the satellite map type.\n\n- New Chat Added new pure CSS chat component\n\n- New FadeUp Added new components to fade in from the bottom when an element appears on screen. This can be used to stagger elements on scroll.\n\n- New FadeExpander Added new components to expand content. This can be used to reveal or hide additional content triggered by all kinds of interaction.\n\n- New Cursor Added more cursor-style utility classes\n\n- New Shadows Added new shadow classes \"shadow-subtle\" and \"shadow-muted\", as well as directional classes \"shadow-muted-down\" and \"shadow-default-down\" to be used on light and white backgrounds. The hard shadow direction styles are now slightly more blurred to remove the hard line in the shadow. Note: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n\n- New useSorting Added new useSorting hook for easily sorting any list by specified key using natural sort order\n\n- New URL feature toggles Added URL-based feature toggle handling and description of how to use them\n\n- Icons Added icons icons rioglyph- bookable-poi rioglyph- car-wash Updated icons rioglyph- truck rioglyph- truck-baseline rioglyph- truck-breakdown rioglyph- truck-unit rioglyph- van rioglyph- van-baseline rioglyph- trailer rioglyph- trailer-baseline rioglyph- trailerposition rioglyph- car rioglyph- car-baseline rioglyph- bus rioglyph- bus-baseline rioglyph- bus-breakdown rioglyph- filling-e-station rioglyph- filling-station rioglyph- euro-note rioglyph- order rioglyph- palette rioglyph- palette-broken rioglyph- parcel rioglyph- parcel-broken rioglyph- empty\n\n- Update Border radius and shadows The default border radius has been increased, and new shadow styles have been introduced, affecting various elements such as buttons, inputs, and panels. These updates collectively enhance the overall design, providing a more modern, refined, and visually appealing look and feel.\nVersion 1.4.1 (2024-09-12)\n- Update ButtonDropdown Added forwardRef to ButtonDropdown and pass it to the underlying dropdown toggle button. Fixed ButtonDropdown demo page examples.\n\n- Fixed Tooltip Wrapped Tag and Switch component in forwardRef so they work with the OverlayTrigger and SimpleTooltip component\n\n- New Map fullscreen demo Added a fullscreen map demo with rendering some metrics for inspection and customer feedback\nVersion 1.4.0 (2024-09-06)\n- Fixed Fixed dark mode listener when trying to read the theme from the colorScheme cookie\n\n- Fixed Charts Fixed rendering of chart legends for all charts\n\n- Update LineChart, AreaChart Extended LineChart and AreaChart components with reference lines\n\n- Update Select Added \"isLoading\" prop to show a loading spinner inside the Select and Multiselect dropdown\n\n- Update useKey Extend useKey hook to allow specifying specific keys to listen for\n\n- New ComposedChart Added new simple ComposedChart component to render a combination of line, area, and bar charts\n\n- New GroupedItemList Added new GroupedItemList component to render a list grouped by a specific key with the flexibility to customize the group header and the rendered items\n\n- New LicensePlate Added new LicensePlate component to display license plate information with various customization options\n\n- Icons Added and updated icons rioglyph- air-pay rioglyph- euro-note rioglyph- language rioglyph- calendar-parking rioglyph- engine\n\n- Update Notifications Extended the writing style guide for notification and \"copy to clipboard\" guidelines\nVersion 1.3.0 (2024-07-26)\n- Fixed TreeOptions Fixed tree options tooltip position\n\n- Fixed DataTab Fixed DataTab title to avoid being set to the div element and used as native tooltip\n\n- Fixed SimpleDialog, SplitDialog Fixed typings of SimpleDialog and SplitDialog\n\n- Fixed Select Fixed italic placeholders for Select and Multiselect\n\n- Fixed Fixed DateRangePicker type for backwards compatibility\n\n- Update Sliders Added new \"color\" prop\n\n- Update Switch Added new \"color\" prop\n\n- Update Forms Added new focus shadow for form inputs and changed the input border color\n\n- Update OverlayTrigger, Tooltip, OnboardingTip, Popover The OverlayTrigger and Popover components are no longer based on react-bootstrap. They have been rewritten to remove the dependency and to fix some warnings when used with React 19.\n\n- New useElapsedTime Added new useElapsedTime hook to get the time since a component was mounted or from a provided starting time\n\n- New Flexbox Added class \"flex-0\" to flexbox utility classes\n\n- New Rounded Added class \"rounded-inherit\" to rounded utility classes\n\n- Update RIO Theme The danger color has been slightly adjusted to better match the other colors. Dark mode colors for danger, warning, and success have also been updated.\n\n- Update VW Theme Adapt highlight colors to VWAG guidelines\n\n- Update Formatting guide Extracted number and date formatting guidelines into a dedicated formatting guide page. This makes it easier to find and to keep the writing style guide shorter.\n\n- New Form labels and placeholders Extended the writing style guide for form labels and placeholders\nVersion 1.2.2 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown header items\n\n- Fixed Checkbox Fixed the rendering position of the checkbox in the grid layout using align-baseline, ensuring it remains stable when checked and unchecked\nVersion 1.2.1 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown when used in unit tests\n\n- Fixed Tree Fixed Tree scrolling when used as a standalone component without the wrapping AssetTree and when a \"scrollHeight\" is defined\n\n- Fixed AssetTree Merged the nested elements \".TreeLabel\" and \".TreeLabelName\" into a single element for TreeNode and TreeLeaf. This reduces the number of DOM elements and enhances performance. Note that you may need to update selector paths in integration tests if they reference tree items.\n\n- Fixed Key Fixed key style for dark mode\nVersion 1.2.0 (2024-06-26)\n- Fixed SmoothScrollbars Added missing root export for SmoothScrollbars component\n\n- Fixed ErrorState, EmptyState, CustomState Fixed button alignment for mobile screens\n\n- Fixed Marker Fixed \"list-group-item\" style when using color indicators\n\n- Fixed Multiselect Fixed filter input padding when Multiselect is used with a leading input addon\n\n- Fixed useAfterMount Fixed hook useAfterMount functionality\n\n- Update MapSettings Enhance MapSettings to include item labels. Substitute MapSettingsPanel with a Dropdown when labels are available. Please provide labels for users to improve usability. Note that providing labels will become mandatory in the future.\n\n- Update Marker Added new mapMarker \"cursor\" props\n\n- Update ListMenu Added new prop \"trailingInputAddon\" to allow adding additional elements to the filter input\n\n- Update DeviceUtils Added new device utils helper function to check for Apple Mac OS to be used for showing mac specific keys\n\n- New Feedback Added new feedback components to simplify requesting user feedback for various use cases\n\n- New Key Added style for keys by using the \"<kbd\" HTML tag\n\n- New Visibility Added new \"visibility-hidden\" class to only target the visibility without setting display to none\n\n- New Input resize Added new input resize classes\n\n- Icons Added new Icon rioglyph- layer-pois\nVersion 1.1.0 (2024-06-17)\n- Fixed CalendarStripe Fixed CalendarStripe component when resizing and rendering different amounts of columns\n\n- Fixed AssetTree Fixed rendering issue in AssetTree component when switching mode between \"fly\" and \"fluid\" externally\n\n- Fixed Marker Fixed broken Marker component when using it without an icon\n\n- Fixed Pills Fixed disabled styles for stacked and filled nav-pills\n\n- Fixed Traton Theme Fixed border radius for Dropdown, MapMarker, Slider, Tag, and Buttons\n\n- Update Marker Updated marker style for active and inactive markers. Extend marker colors for status colors. Adapt default colors for map for better readability in light and dark mode. Added new prop \"pinging\" to SingleMapMarker to render a pinging animation. Another new prop \"anchorIconName\" was added to render an icon directly on the markers anchor. The map direction icon can now be replaced via the new \"stateIconName\" prop and the default moving state can be changed.\n\n- Update AssetTree Added new prop \"treeOptionsTooltip\" to Tree component to show a tooltip for the tree options dropdown\n\n- Update ActionBarItem Updated the \"ActionBarItem.List\" style used for the service info popover. Please make sure to use the \"ActionBarItem.List\" and \"ActionBarItem.ListItem\" components to design the service info for the application header.\n\n- Update ErrorState, EmptyState, CustomState Added the prop \"bsStyle\" to the state components buttons to define other button styles like a default button. Also, when providing an href value, the button is rendered as a link. The headline size will increase now at the xl breakpoint to have a slightly smaller text size for smaller screens.\n\n- Update NoData Improved readability by improving text color contrast. Removed text uppercase according to the writing style guide.\n\n- Update Fieldset Update \"fieldset\" and \"legend\" style for grouping form elements. Added demo to showcase utility of using fieldsets in forms.\n\n- Icons Icons Update icons optical center to work better within circles like the direction icon for the map marker rioglyph- direction rioglyph- parking rioglyph- antenna rioglyph- heart rioglyph- location-arrow\n\n- New CSS Grid & Subgrid Added multiple CSS Subgrid utility classes and examples. Extended Grid classes and documentation\n\n- New Added bg-none and hover-bg-none class\nVersion 1.0.0 (2024-06-03)\n- Breaking With this version, we have started migrating all components towards Typescript for better typing support and documentation. With this migration, we will remove the internal types.ts file. As it was not intended to be used by any service, please make sure you update your imports accordingly. Check out the How to for more details. Be aware of possible changed component types as well.\n\n- Breaking Map With this version the HERE map implementation has changed significantly since we have migrated the map internally to the latest HERE APIs. This includes also the map rendering where the default render engine has changed from WebGL to HARP. Raster maps are rendered with the P2D engine. Due to this migration, the map types have a different design now. To make use of the new rendering engine, please add the following HERE dependency to your project. < script type = \" text/javascript \" src = \" https://js.api.here.com/v3/3.1/mapsjs-harp.js \" </ script\n\n- Removed Fade Removed several deprecated props from the Fade component\n\n- Removed Removed \"BrowserWarning\" component\n\n- Removed Removed \"text-muted\" utility class. Use \"text-color-gray\" instead\n\n- Removed Removed \"GroupSelectionUtil\" getNewGroupedSelected utility function\n\n- Removed Removed getOffsetTopWholeScreen utility function\n\n- breaking BottomSheet / Sidebar Renamed prop \"useBackdrop\" to \"hasBackdrop\" for BottomSheet and Sidebar component\n\n- breaking CalendarStripe Deprecated \"render\" prop of \"CalendarStripe\" component in favor of new \"renderDay\" prop\n\n- breaking Collapse / ExpanderPanel / ExpanderList Removed callbacks \"onEnter\", \"onEntering\", \"onExit\", and \"onExiting\" for ExpanderPanel and Collapse components. We introduced Framer Motions \"onAnimationStart\" callback instead. The ExpanderPanel header style underwent slight changes. The \"in\" class for the collapse is no longer used. Additionally, the \"react-transition-group\" library has been replaced with \"framer-motion\". The prop \"mountOnEnter\" has been removed from the ExpanderPanel, ExpanderList and Collapse components. Use \"unmountOnExit\" instead to control whether the collapsed content should be removed from the DOM when it is collapsed. The collapse prop \"in\" has been renamed to \"open\" to align with other components.\n\n- breaking List Groups and Expanders List groups no longer have a border and a border-radius by default. This has the advantage that they can now be used within other elements without having to overwrite many CSS values. To get the same look as before, you need to set the classes \"border\" and \"rounded\". Expander lists now have props for these two CSS properties, which are set to true by default.\n\n- breaking Resizer The Resizer component has been migrated from class component to functional component. With that the updated size value need to be set with a state setter function. Example: const handleResize = ( diff: number ) =setBoxWidth ( oldWidth =oldWidth - diff )\n\n- breaking Select / Multiselect Changed roles of Select and Multiselect dropdown menu from \"list\" to \"menu\" and the role of the individual select options from \"presentation\" to \"listitem\" to be aligned with the ButtonDropdown component. Fixed automatic drop direction check to open the dropdown above the toggle when there is not enough space. Removed deprecated size values \"small\" and \"large\" in favor of \"sm\" and \"lg\".\n\n- breaking Select The type definition for the Select component has changed. The more impactful change is the type for the \"onChange\" callback which has changed to handle the removal of a selection and therefor \"undefined\" will be returned. onChange = { ( selectedOption: SelectOption | undefined ) =handleChange ( selectedOption ?. id ) } Also important to note that the SelectOption type no longer can be imported via the \"types.ts\" file. Please adapt your import accordingly import Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\n\n- breaking Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.\n\n- Removed useResizeObserver The \"Observer Entry\" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults do div).\n\n- Fixed Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.\n\n- Fixed BottomSheet Fixed maximum width for BottomSheet component when using the \"detach\" prop. Allow defining the detach offset.\n\n- Fixed Chart Colors Fixed export of shared colors for diagrams\n\n- Fixed Loading Guidelines Fixed spinner size for buttons to avoid button size changes. Extended loading guidelines for spinner buttons in tables.\n\n- Fixed Sidebar Automatically switch Sidebar mode from \"fluid\" to \"fly\" to be put above the content when the ApplicationBody's module-content width reaches a defined minimum. This avoids breaking the entire application layout for fluid Sidebars on smaller screens or when resizing Sidebars.\n\n- Fixed SimpleTooltip Renamed SimpleTooltip prop \"tooltipWidth\" to \"width\" to align with underlying Tooltip component\n\n- Fixed Spinner Outlined spinner buttons\n\n- Fixed Spinner in Buttons Fixed style for spinner in button block\n\n- Fixed Tags Fixed 1px offset of tag icons\n\n- Fixed Tooltip Fixed tooltip arrow position on small elements\n\n- Update AutoSuggest Migrated AutoSuggest component to Typescript and cleaned up its props\n\n- Update AssetTree Added new TreeSummaryRow component to allow for more tree item type filter like fuel type. With this we also added a new \"supType\" property to the TreeItem to filter for it and to show a paired icon.\n\n- Update Button Added \"iconName\" prop to Button component to reduce boilerplate code when using icons. Use native HTML \"disabled\" prop instead of separate class.\n\n- Update ClearableInput Added an input mask to the ClearableInput to allow custom input formats to avoid user input mistakes\n\n- Update Dialog Added focus trap to Dialog component. Deprecate \"onHide\" callback in favor of \"onClose\". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class \"modal-ender-done\" has been removed. Added new \"xs\" dialog variant\n\n- Update ExpanderPanel Added new \"onOpen\" and \"onClose\" callbacks to ExpanderList items\n\n- Update ExpanderPanel / Combined Tables in ExpandablePanel Added \"iconClassName\" prop to ExpanderPanel component to to allow for 100% width in the panel header. This comes in handy when using a table inside the header and the body that shall have the same column width. With that we also added a design demo to showcase the usage of the tow tables inside the expander panel.\n\n- Update Forms Added horizontal form demo\n\n- Update LoadMoreButton Extended LoadMoreButton component with props \"isInteractive\" and \"progressBarStyle\" to customize behavior and style\n\n- Update Map Settings / Map Layer Migrated the Here Map traffic layers to use the new APIs when using the WebGL mode. For raster maps tiles, we still have to use the deprecated APIs as there is no alternative for now. We also fixed the map translations so other countries are also properly translated and don't show their city names in their native language.\n\n- Update Multiselect Added prop \"multiline\" to allow wrapping selected item around within the multiline toggle. The style of the selected items has changed to be more muted so it better integrates with other form elements.\n\n- Update NumberInput / NumberControl Migrated NumberInput and NumberControl to Typescript and updated their typings. Added check to avoid entering letters or special characters into the input field for Firefox and Safari. Added prop for warning and error messages. Added new prop \"noDefault\" to keep the input empty instead of using the default value of 0. Fixed the NumberControl spinner buttons when holding down the mouse button to increase and decrease the value and leaving the input field.\n\n- Update TimePicker Added prop for rendering warning and error messages\n\n- Update Onboarding Added props \"previousButton\" and \"nextButton\" to Onboarding component to enable a better onboarding click flow\n\n- Update Print CSS Notifications are now hidden while printing the page when using our print.css\n\n- Update Select Added prop \"inputAddon\" to Select component to allow for adding icons as addon to the toggle button Enhanced the background color of selected options for the Select and Multiselect component\n\n- Update Sidebar Added prop \"hasSmoothScrollbar\" to Sidebar component to enable the built-in scrollbars instead of using the native browser scrollbars\n\n- Update Slider or RangeSlider Added \"valueLabelUnit\" prop to Slider and RangeSlider to use a label for the slider values\n\n- Update SplitDialog Added new \"leftContentClassName\" and \"rightContentClassName\" to the split dialog\n\n- Update Buttons Add gray-lightest hover background color to muted, link, and action buttons\n\n- Update Timeline Added new classes \"timeline-date-thin\" and \"timeline-date-dashed\" as well as color classes to change the timeline width and style. Updated Timeline examples to showcase variations as it's built with atomic classes.\n\n- New EditableContent Added new EditableContent component that allows for inline text editing\n\n- New DeviceUtils Added new \"isRetinaDevice\" to deviceUtils\n\n- New Divider Added new Divider component for horizontal and vertical dividing lines\n\n- New Forms New form \"form-group-not-editable\" style toggling editable forms\n\n- New FrameDialog Added new FrameDialog component that can be used to open a dialog from a widget iframe in the parent window\n\n- New Grid stack Added new grid stacking classes \"grid-stack\" and \"grid-stack-item\" as an alternative to position absolute\n\n- New HTML Emails New guidelines demo for HTML emails created with react email\n\n- Icons Icons rioglyph- drag-n-drop rioglyph- robot rioglyph- pin-range rioglyph- pin rioglyph- calendar-plus rioglyph- exclamation rioglyph- info rioglyph- question rioglyph- fuel-diesel rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- archive rioglyph- map rioglyph- map-location rioglyph- book rioglyph- face-frown rioglyph- face-neutral rioglyph- face-smile rioglyph- paper-clip rioglyph- share-nodes rioglyph- handshake rioglyph- stack rioglyph- building rioglyph- file-signature rioglyph- signature rioglyph- location-arrow rioglyph- wallet rioglyph- user-group rioglyph- window rioglyph- inbox rioglyph- inbox-stack rioglyph- inbox-in rioglyph- inbox-out rioglyph- id rioglyph- ruler rioglyph- cards-add rioglyph- truck-unit rioglyph- user-add rioglyph- user-ok rioglyph- user-remove rioglyph- pencil-square rioglyph- megaphone rioglyph- code-brackets rioglyph- code-braces rioglyph- hash rioglyph- server-stack rioglyph- shopping-bag rioglyph- search-list rioglyph- tasks rioglyph- fingerprint rioglyph- flag rioglyph- fire rioglyph- puzzle\n\n- New Line Height Added new \"line-height-150rel\" class\n\n- New Page Added new Page component for displaying documents\n\n- New SaveableInput Added new SaveableInput component\n\n- New TimedBottomSheet Added new TimedBottomSheet component to control a bottom sheets visibility with timers\n\n- New SmoothScrollbars Added a new SmoothScrollbars component\n\n- New Text Wrapping Added new \"text-wrap-balance\" class\n\n- New useFocusTrap Added new useFocusTrap hook that can be used for custom overlays\n\n- New useHover Added new useHover hook that can be used for style changes on hover for certain elements that can not be influenced by hover utility classes alone\n\n- New usePostMessage Added new usePostMessage hook that can be used to exchange messages between an iframe and the parent window\n\n- CSS With this version, the UIKIT adds its CSS link into the header automatically if it is not present. This should help to ease the update of the UIKIT library and the corresponding CSS. This means, you can remove the link from your index.html and only update the UIKIT dependency in your package.json. See Automatic loading of UIKIT CSS Files\n\n- Guideline For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color, we have added a new \"Color Combinations\" section. See Color Combinations\n\n- Guideline We have introduced some general writing guidelines to enhance consistency in UX writing and to maintain a unified voice. See Writing style guide\nVersion 0.16.3 (2023-03-14)\n- Icons Deleted Icons: fax\n\n- Fixed Fixed alignment of collapsed header menu items. See ApplicationHeader\n\n- Fixed Fixed fade in animation when the inital animation is set to false. See Fade\n\n- Fixed Fixed close animation for BottomSheet when hight is set to window height. See BottomSheet\n\n- Fixed Fixed AspectRatioPlaceholder declaration file name.\n\n- Fixed Fixed text ellipsis of selects. See Selects\n\n- Update Refactored DataTabs props. See DataTabs Merged hoverTextColor and hoverBgColor props to tabHoverClassName Merged activeTextColor and activeBgColor props to tabActiveClassName added arrowClassName prop added tabsWrapperClassName prop added tabClassName prop added new className prop to DataTab child component\n\n- Update Added new \"fullheight\" Dialog Size and renamed \"full\" to \"fullwidth\". See Dialog\n\n- Update MapSettings panels are now closing on click outside. See MapSettings\n\n- Update Extended the SimpleTooltip component to pass the \"delay\" and \"popperConfig\" props to the underlying component. See SimpleTooltip\n\n- Update Remove left padding from ReleaseNotes component to better work with images. Please add padding-left-15 manually, in case you want to work with lists. See ReleaseNotes\n\n- New Added new CalendarStripe component. See CalendarStripe\n\n- New Added new hook \"usePrevious\" to access state values of previous component render cycle. See usePrevious\n\n- Icons Added or updated icons: rioglyph- card-reader rioglyph- card-hotel rioglyph- api rioglyph- currency-euro rioglyph- thumbs-up rioglyph- thumbs-down rioglyph- hand-up rioglyph- hand-down rioglyph- hand-left rioglyph- hand-right See Icons",
+    "summary": "- Fixed Map utils Fixed getRoutePolylines to return the correct HERE map Polyline list. Also corrected the return types for getGroups, getMarkers, and getRoutePolylines to use the proper map object types.",
+    "searchText": "Changelog\nVersion 2.2.0 (2026-02-23)\n- Fixed Map utils Fixed getRoutePolylines to return the correct HERE map Polyline list. Also corrected the return types for getGroups, getMarkers, and getRoutePolylines to use the proper map object types.\n\n- Fixed RadialBarCharts Fixed RadialBarCharts responsive container to remove the fixed initial dimension, allowing charts to take the available width of the parent container.\n\n- Fixed Select Prevent double box-shadow on Select and Multiselect inside input groups with icon addons.\n\n- Fixed labels Fixed label heights for condensed filled labels to align with default condensed labels.\n\n- Fixed Map settings Fixed the map settings options animation so dropdowns/panels now fade in and slide up when opened.\n\n- Update MapTypeSettings Added visibleMapTypes for map-type visibility control via a single prop. The enableNightMap prop is now deprecated. Please control night visibility via visibleMapTypes instead.\n\n- Update TimePicker Add a new disabled prop to disable the TimePicker input and its control buttons. If you previously set disabled via inputProps, you can now use the dedicated component prop instead. The TimePicker now also calls onChange when the input is cleared. Added a new dropdown prop for selecting times from a dropdown, and a minuteOffset prop to define the dropdown interval and button step size.\n\n- Update Button Added support for rendering Button as an anchor element via the new as prop. Use as='a' together with a required href to render a link button while keeping native button type values for button elements.\n\n- Update Notification Improved notification message readability by balancing line wraps in notification text content.\n\n- Update Switch Added a new autoMinWidth prop. When minWidth is not set and autoMinWidth is true, the switch width uses the longer one of enabledText and disabledText.\n\n- New CircularProgress Added new CircularProgress component.\n\n- New Tracker Added a new Tracker component for compact status visualization with tooltip support, automatic block compression, and optional collapsing when the minimum block width is reached.\n\n- New RadioCardGroup Added a new RadioCardGroup component for custom card-style radio selection, including inline, stacked, and stacked-horizontal variants with both options-based and compound-item APIs.\n\n- New Pills condensed Added a nav-pills-filled-condensed version of filled nav-pills for use next to form elements like buttons and selects. This keeps heights aligned and provides a clearer way to indicate different views. Prefer these over the toggle button group for view switching.\n\n- New Shadows Added configurable hover-shadow-* utility classes with built-in transition support and a new shadow-focused utility class for a focused shadow preset.\n\n- New useSearchHighlight / SearchHighlightText Added the useSearchHighlight hook and SearchHighlightText component for native CSS highlight-based search results.\n\n- New useCookies Added a new useCookies hook for setting, deleting, and checking browser cookies.\n\n- New useRioCookieConsent Added a dedicated useRioCookieConsent hook for parsing the RIO cookie_settings consent cookie and returning typed RioCookieConsentInfo.\n\n- New useUrlState, routeUtils Added the new useUrlState hook and updated routeUtils for simpler state-in-URL parsing/serialization with native URLSearchParams and typed URL config support.\n\n- New classNames, mergeClassNameOverrides Added new utility helpers for CSS class handling: classNames for composing optional class tokens and mergeClassNameOverrides for overriding utility-class groups while keeping unrelated defaults.\n\n- New ellipsis-middle Added new ellipsis-middle utility class for truncating text in the middle while keeping the suffix visible.\n\n- New TextTruncateMiddle Added a new TextTruncateMiddle component for rendering middle-truncated text with a configurable suffix length.\n\n- New New icons rioglyph- trailer-standard rioglyph- trailer-tipping rioglyph- trailer-liquid rioglyph- palette-empty rioglyph- box rioglyph- box-open rioglyph- mesh-box\n\n- Guideline State in URL guideline Added a dedicated guideline page for deep linking and URL state, including best practices for what to store in URLs and pushState vs replaceState usage.\nVersion 2.1.0 (2026-01-13)\n- Fixed Map context menu Fixed the typing for the ContextMenuItem component.\n\n- Fixed Map route Fixed the typing for the arrowStyle prop of the Route component.\n\n- Fixed Map SimpleClusterLayer type Fixed the typings for the SimpleClusterLayer component’s simpleTheme prop. Please use the new SimpleClusterTheme type instead of the ClusterTheme.\n\n- Fixed Dialog Fixed broken fade animation of Dialogs in Firefox.\n\n- Fixed TableSettingsDialog Fixed TableSettingsDialog so reset to default remains available after reopening when settings differ from defaults.\n\n- Fixed Select Fixed select filter regressions where hitting ‘nothing found’ could leave the dropdown stuck or missing options. Backspacing or clearing now restores the full list and keeps keyboard focus/highlights in sync. Dropdown scroll now resets on reopen and keeps the keyboard-focused item in view when navigating up and down with the arrow keys.\n\n- Update URL feature toggles Replaced the internal \"qs\" library used for parsing URL search parameters with the native URLSearchParams API, allowing us to remove the external dependency. This also solves the vulnerability issue with the \"qs\" library for this version.\n\n- Update Tree Extended the Tree component to support custom external icon and logo URLs.\n\n- Demo Updated the component prop documentation for most components by deriving it directly from the component type definitions and source files. This ensures more accurate documentation and reduces maintenance effort for the demo pages.\nVersion 2.0.1 (2025-12-15)\n- Fixed DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.\n\n- Fixed Area, Line Fixed chart components type definition for prop \"dataKey\".\nVersion 2.0.0 (2025-12-12)\n- Removed We’ve modernized our build setup by removing CommonJS support and switching entirely to ESM. If your project still depends on CommonJS (for example, with older tooling like Webpack), your build may fail. Please update your development environment to support ESM.\n\n- Removed Removed the root index.js barrel file that re-exported all components. This change eliminates multiple import paths, improves IntelliSense auto-import behavior, and prevents importing the entire UIKIT, ensuring proper tree shaking. Please update your imports to use default imports, for example: import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout'.\n\n- Removed CalendarStripe Removed deprecated prop \"render\". Please use \"renderDay\" instead.\n\n- Removed Collapse Removed deprecated prop \"in\". Please use \"open\" instead.\n\n- Removed ClearableInput Removed deprecated prop \"alwaysShowMask\". Please use \"maskVisibility='always'\" instead.\n\n- Removed Dialog Removed deprecated prop \"onHide\". Please use \"onClose\" instead.\n\n- Removed SingleMapMarker Removed deprecated prop \"size\". Please use \"anchorSize\" instead. Removed deprecated prop \"visibleOnHover\". Please use \"markerOnHover\" instead.\n\n- Removed DataTab Removed the internal \"fade in\" class names from the DataTab component, which were previously kept for backward compatibility with CSS transitions used in older service tests. Please use the new onAnimationStart and onAnimationEnd callbacks instead.\n\n- Renamed Animations Renamed \"framer-motion\" component to \"motion\" as we have migrated to the latest motion library that was formerly known as Framer Motion.\n\n- Removed NotificationsContainer Removed deprecated prop \"stacked\" since it is not supported anymore. Removed legacy usage documentation.\n\n- Breaking Notification Removed deprecated prop \"priority\" since it is not supported anymore. Removed old notification API in favor of the notifications options object. If you still use the legacy API \"Notification.info(message, title, timeOut, callback, priority)\", please migrate to the format \"Notification.info(message, options)\".\n\n- Removed OnboardingTip Removed deprecated prop \"clickflow\". Please use the \"useOnboardingTour\" hook instead.\n\n- Removed Radiobutton Changed the onChange callback so it is only used in the controlled use case, as already documented in earlier versions. For uncontrolled usage, please use the onClick callback instead.\n\n- Removed NumberInput / NumberControl Removed deprecated prop \"onValueChanged\". Please use \"onChange\" instead.\n\n- Removed Sidebar Removed deprecated prop \"enableNavigationButtons\". Please use \"headerButtons\" instead. Removed deprecated prop \"disableFullscreen\". Please use \"enableFullscreenToggle\" instead. Removed deprecated prop \"fullscreen\". Please use \"openInFullscreen\" instead.\n\n- Removed Removed old class \"invisible\". Please use \"visibility-hidden\" instead.\n\n- Icons Renamed icon rioglyph- retweet rioglyph- repeat-square Renamed icon rioglyph- cost-efficency rioglyph- cost-efficiency Renamed icon rioglyph- eye-option rioglyph- eye-open Removed icon as it was a duplicate of rioglyph- component rioglyph- maintenance-components\n\n- Breaking BarChart, RadialBarChart, PieChart, Legend With this release, the internal Recharts dependency has been migrated to version 3.x. This upgrade introduces a breaking change related to the Legend component: the payload prop, which was previously used internally to inject custom legend data, has been removed from Recharts. As a result, the legend behavior in BarChart and RadialBarChart has been updated. The default legend position is now correctly rendered vertically in the top-right corner. Previously, it appeared at the bottom despite the default settings. Please review your charts to ensure the legend position remains as intended. If you use colors defined inside your data objects for BarCharts, you must now provide both the items (your data array) and a custom content render function to the Legend. This replaces the old payload-based legend behavior. Series-based legends using a formatter continue to work as before. Recharts 2.x also used to have a prop named activeIndex that was setting which item the user was interacting with. In version 3.0, this prop has been removed. For more details, see the Recharts activeIndex guide https://recharts.github.io/en-US/guide/activeIndex/ If your PieChart uses an activeShape render callback, you should now use the ChartTooltip component and set its defaultIndex to replace the previous activeIndex behavior. See the whole Recharts migration guide for more details: https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes\n\n- Fixed FilePicker Fixed the type of the \"files\" parameter from FileList to File[] of the \"onPick\" callback.\n\n- Fixed Rioglyph Fixed Rioglyph icon typing to expose a concrete IconType union of all icon names, improving autocomplete and safety for consumers.\n\n- Update AssetTree Added new asset type \"car\" to AssetType type definition and to built-in type counter of the AssetSummary for the Tree component.\n\n- Update VolkswagenApplicationHeader Updated VolkswagenApplicationHeader with new VW Group logo. This single group logo also replaces the logo for \"VW Aktiengesellschaft\" and \"Group Logistics\" resulting in an overall smaller header height.\n\n- Update Migrated entire codebase from lodash to es-toolkit to leverage modern JavaScript.\n\n- New AnimatedTextReveal Added new AnimatedTextReveal component emphasize text through motion for showing incremental updates or loading states.\n\n- New useAutoAnimate Added a lightweight hook to animate add/remove/reorder operations of children with zero configuration.\n\n- New fit-content Added new \"min-width-fit-content\" utility classes. See detailed explanation and comparison to other content-based min-width classes.\n\n- New text-box Added new \"text-box\" utility classes to trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.\n\n- New icons Added new rioglyph style for disabled icons with a line\n\n- New useIncomingPostMessages and usePostMessageSender New tooling for sending and receiving postMessage events. We recommend utilizing \"action-style\" events if you control both ends of the communication. This simply means to send event objects with a type property and an optional payload - very similar to Redux actions. To receive messages, the new useIncomingPostMessages can be used. It allows a declarative style of registering action-style event handlers in your application. You can still use the \"simple\" event handler variants, when you're interested in receiving events that don't follow the action-style approach. The usePostMessageSender hook provides easy access to methods used to send message events either to a dedicated destination or to \"broadcast\" events to all iframes. Note that the existing usePostMessage hook will be deprecated in a future release.\n\n- Icons New icons rioglyph- ai rioglyph- arrows-collapse rioglyph- arrows-combine rioglyph- arrows-expand rioglyph- arrows-horizontal rioglyph- arrows-split rioglyph- assigned rioglyph- axis-x rioglyph- axis-y rioglyph- axis-z rioglyph- bar-chart-box rioglyph- battery-charging rioglyph- brain rioglyph- branch-horizontal rioglyph- branch-remove rioglyph- branch-vertical rioglyph- broadcast rioglyph- bulb rioglyph- chip rioglyph- cloud-progress rioglyph- coffee rioglyph- compass rioglyph- crown rioglyph- discount-badge rioglyph- emergency-stop rioglyph- eye-closed rioglyph- eye-open rioglyph- filter-reset rioglyph- get rioglyph- give rioglyph- globe-alt rioglyph- hierarchy rioglyph- history rioglyph- insert rioglyph- leafs rioglyph- magic-wand rioglyph- note rioglyph- progression rioglyph- satellite-radar rioglyph- stack-add rioglyph- stack-iso rioglyph- stats-high rioglyph- stats-line-dots rioglyph- stats-low rioglyph- stats-medium rioglyph- time-incomplete rioglyph- unassigned rioglyph- unavailable rioglyph- variable rioglyph- workflow-step rioglyph- workflow Updated icons rioglyph- arrow-down rioglyph- arrow-left rioglyph- arrow-right rioglyph- arrow-up rioglyph- battery-level-empty rioglyph- battery-level-full rioglyph- battery-level-low rioglyph- cloud-download rioglyph- cloud-not-saved rioglyph- cloud-upload rioglyph- compare rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- cost-efficency rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- error-sign rioglyph- flash rioglyph- info rioglyph- maintenance-components rioglyph- merge rioglyph- missing rioglyph- off rioglyph- refresh rioglyph- repeat rioglyph- resize-full rioglyph- resize-horizontal rioglyph- resize-small rioglyph- resize-vertical rioglyph- save rioglyph- trash rioglyph- volume rioglyph- workshop rioglyph- wrench Removed icons rioglyph- video-off rioglyph- wifi-off\nVersion 1.13.2 (2025-11-19)\n- Fixed Obfuscate data Fixed a bug that triggered an infinite loop when data-pii was applied to a nested child element.\n\n- Update Button Added new \"unstyled\" buttons style\nVersion 1.13.1 (2025-10-20)\n- Fixed Fixed bundling npm package. Resolve nested folder structure in npm package build.\nVersion 1.13.0 (2025-10-20)\n- Fixed fuel type utils Fixed missing root export for fuel type utils.\n\n- Fixed Action button style Fixed the muted style for action buttons.\n\n- Fixed MapMarker Fixed the active styling for the map marker active state to visually balance the state icon.\n\n- Update Rioglyph Added the missing feature to use external SVGs as a rioglyph icon.\n\n- Update FilePicker Added new \"fullHeight\" flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow.\n\n- New max-content Added new \"min-width-max-content\" and \"min-width-min-content\" utility classes. The first prevents content from breaking by expanding to fit its full width, while the second allows content to shrink to the smallest width possible without overflowing.\n\n- New Grid Added new \"grid-template-end--1\" utility class. This class allows grid items to span until the last grid line, effectively positioning them to extend to the end of the grid.\n\n- New Obfuscate data Added new \"data-hide-pii\" attribute to the <htmlelement to obfuscate sensitive data directly in the frontend. Obfuscate names, emails, or phone numbers — without needing backend filtering or extra code changes.\n\n- Icons New icons rioglyph- circle-dashed rioglyph- square-dashed rioglyph- cube-dashed rioglyph- cube rioglyph- group-blocks rioglyph- dashboard-view rioglyph- ok-dashed rioglyph- prompt rioglyph- recycle rioglyph- warehouse rioglyph- status-change rioglyph- status-change-horizontal rioglyph- transition-right rioglyph- transition-push-right rioglyph- migrate rioglyph- convert rioglyph- shelve rioglyph- conveyor-belt rioglyph- tracking-package rioglyph- issue-tracking Updated icons rioglyph- ok-sign rioglyph- ok-circle\nVersion 1.12.0 (2025-09-22)\n- Fixed Select Fixed an issue in the Select component where clearing the filter input after a no-results search caused the option list to remain incomplete. The dropdown now correctly restores the full option set when the filter is cleared.\n\n- Fixed AssetTree Fixed an issue where clicking the checkbox on a tree group would also toggle its expanded state. Now, selecting a tree group via its checkbox only triggers selection and no longer expands or collapses the group. This prevents unintended virtualization behavior where expanding a node could cause the tree to switch into virtualized mode, resulting in the loss of tree group selections.\n\n- Fixed Callout Removed overflow hidden from callouts so dropdowns can be shown correctly.\n\n- Fixed Ellipsis Fixed \"ellipsis-1\" class.\n\n- New Rioglyph, fuel type utils Added a new component for rendering Rioglyph icons as a span element. The component also supports paired icons, allowing two glyphs to be displayed together as a combined symbol. In addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.\n\n- Update FormLabel Added missing \"Node\" type info for supportingText the props table and changed the handling of supportingText styling so that the text-italic class is only applied when the supportingText is a string. If you provide a string wrapped in a div or span, you have to set the italic class manually.\n\n- Update Tree Added a new \"pairIcon\" prop to TreeItem allowing pair icons to be individually specified in the Tree component.\n\n- Update ClearableInput Added new input mask related props \"maskOverwrite\", \"maskDefinitions\", and \"maskDispatch\" to support dynamic masking for more complicated use cases and to give more control over the masking.\n\n- Update useOnboardingTour Updated the typings and documentation for the useOnboardingTour hook.\n\n- style Pills Updated the hover style for the application header navigation as well as for the nav pills.\n\n- Icons As RIO will support more fuel types in the future, and because of inconsistencies in existing naming conventions, we introduced a new icon: \"rioglyph-fuel-liquid\". This icon replaces \"rioglyph-fuel-diesel\" to better represent a broader range of liquid fuels. With this change, there are now four dedicated fuel icons available, plus one for a mixed fuel type. rioglyph- fuel-liquid rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- fuel-mix With this approach, frontends can use the same icon for diesel or gasoline and also for CNG and natural gas by simply using the new \"getFuelIcon\" function form the Rioglyph component. The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list. Additional new icons: rioglyph- video rioglyph- video-off\n\n- Demo Service-specific settings Updated the ApplicationHeader demo to include an example of service-specific settings, establishing a consistent approach for presenting unique configurations that cannot be included in the global user profile settings. It helps ensure a familiar user experience across different services while keeping global settings clean and focused.\nVersion 1.11.0 (2025-08-11)\n- Fixed Map settings Updated implementation for map satellite view to support zoom limits by using a hybrid map layer approach.\n\n- Fixed SteppedProgressBar Fixed styling issue in circular variant of the SteppedProgressBar when an item is active.\n\n- Fixed SplitDialog Fixed left side width for larger dialogs. Added new prop to hide the split divider.\n\n- Fixed FormLabel Fixed usage of HTML tag label only when part \"htmlFor\" is set and has a value.\n\n- Update Tree Added a new \"expandedIcon\" prop to the TreeGroups to support showing a different icon when the group is expanded.\n\n- Update Sticky table columns Renamed \"table-sticky-cell-first\" and \"table-sticky-cell-last\" to \"table-sticky-column-first\" and \"table-sticky-column-last\" for improved clarity. Updated the styles to respect the table header and prevent content from peeking through when horizontally scrolled.\n\n- New useAverage, useCount, useMin, useMax, useSum Added useAverage, useCount, useMin, and useMax, and useSum hooks for locale-aware numeric aggregation of object lists. Supports specifying a dot-separated path to the target property.\n\n- New Table grid lines Added new table class \"table-grid-lines\" that is useful when building data heavy tables.\n\n- New Table row span and Table double row header Added new table examples showcasing row span and double header layouts to demonstrate table design capabilities for data heavy tables.\n\n- New Progress bars indeterminate style Added new indeterminate style to show a progress bar even when you not know how long it will take.\n\n- Demo Templates Added new template sections and several UI block examples. Updated the template menu structure to improve navigation and discoverability.\n\n- Demo Email generator We’ve built a neat little email editor that helps you compose emails and copy the HTML code.\n\n- Demo Route generator There is a new route generator with a JSON export of the LAT/LNG coordinates.\nVersion 1.10.1 (2025-01-08)\n- Fixed Map settings Changed implementation for map satellite view as the old implementation relied on deprecated Here APIs.\nVersion 1.10.0 (2025-07-28)\n- Fixed Fixed an issue where clicking the \"Scroll to Top\" arrow button would block further scrolling down the page. The scroll behavior is now fully restored after returning to the top, ensuring smooth navigation throughout.\n\n- Fixed DatePicker Fixed styling issue in DatePicker inputs with error feedback where input text was unnecessarily cut off due to padding for the clear icon, even when no clear button was rendered.\n\n- Fixed ApplicationHeader Fixed an issue where the application header rendered in mobile style on initial page load when the container width could not be determined in time. This resolves visual jumping between mobile and desktop header layouts during mount.\n\n- Fixed SavableInput / SavableDateInput Moved error handling into the components to simplify feedback styling. Added two new props, \"errorMessage\" and \"hideErrorIcon\", to control the visual appearance of error feedback.\n\n- Fixed Panels, Pills, Badges Fixed various element styles for brand themes.\n\n- Update Tree Added a new \"icon\" prop to TreeItem allowing icons to be individually specified or explicitly omitted in the Tree component. Also updated the TreeGroups to support icon values with or without the rioglyph- prefix for improved flexibility.\n\n- New CSS Container queries Introduced new utility classes to make use of container queries, enabling responsive spacing and layout adjustments based on container width rather than viewport size. For more details, please check out our responsiveness guidelines.\n\n- New Rounded table Added new utility classes \"table-bottom-rounded\" and \"table-rounded\" for use when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners.\n\n- Icons Added icons icons rioglyph- train rioglyph- cargo rioglyph- design\n\n- Style We migrated our codebase from Less to Sass to modernize our tooling and take advantage of the latest CSS capabilities, as Less is no longer actively maintained.\n\n- Demo Renamed the main navigation items to improve clarity and consistency. “Design” is now called Foundations, and “UI Templates” has been simplified to Templates to better reflect their purpose.\n\n- Demo Added new sections and examples to UI templates that serve as a quick starting point for developing your own layouts and interfaces. See Expandable details, Details views, and Progress cards. Moved the panel example from the foundations tab to Panel variants.\nVersion 1.9.0 (2025-06-30)\n- Fixed Tooltip / SimpleTooltip Fixed delaying tooltips using a single delay number. Tooltip delay now only applies to showing, not hiding. To configure both show and hide delays, use the object format instead of a single delay number.\n\n- Fixed ClearableInput Properly pass external ref to underlying masked input component using its inputRef prop.\n\n- Fixed DatePicker Fixed an issue where the DatePicker would render incorrectly when used as a child inside a table cell.\n\n- Update TableHead, TableCol Extended table components to pass additional props to the underlying tag.\n\n- Update useTableSelection Extended useTableSelection hook to allow setting the selected rows and change the active row from the outside using the \"setSelectedRowIds\" and \"setActiveRowId\" setter functions.\n\n- Update Select, Multiselect We’ve reverted the max-width of the Select, and Multiselect dropdown to 100% to stay consistent with other components and to prevent unnecessary line breaks within dropdown items. If the dropdown appears too wide, you can use the dropdownClassName prop to apply a shorter max-width-x utility class as needed.\n\n- Update AssetTree Extend the Tree component to virtualize tree items when a certain threshold is reached. The number of items rendered beyond the visible area can be controlled using the \"overscan\" prop. This change improves performance for large trees and long lists.\n\n- Update Map Extend the Map component to allow specifying minimum and maximum zoom levels. By default, the minimum zoom level is set to 3, defining the furthest zoomed-out view. The maximum zoom level, representing the closest zoomed-in view, is set to 20. Improved zoom behavior to reduce momentum and allow for more controlled zooming.\n\n- Update FormLabel Extend the FormLabel component to allow passing in a React element as supporting text, making it easier to add question mark icons with tooltips.\n\n- New SavableDateInput Added new dedicated savable input component that wraps the DatePicker.\n\n- New BarList Added BarList component to display customizable, animated horizontal bars for comparative data.\n\n- New useTableExport Added new custom hook to easily export table data as CSV.\n\n- New useIsFocusWithin Added new custom hook to easily detect if the focus is inside a defined document node.\n\n- Docu Pagination Added usage documentation for pagination and explained why the load more button is preferred for tables.\n\n- Demo UI Templates Added new sections showcasing various UI templates and blocks that serve as a quick starting points for developing your own layouts and interfaces.\nVersion 1.8.0 (2025-05-19)\n- Fixed Map Fixed issue with satellite view layer not rendering correctly when Norwegian language is selected.\n\n- Fixed usePostMessage Remove logging of triggered events to the console.\n\n- Fixed Height classes Corrected height calculation when using \"\"...-height-100vh\" classes inside module-content; vertical padding was not properly subtracted.\n\n- Update URL feature toggles Made the feature toggle value types more precise. Added new feature toggle definition functions that allow you to specify a default value.\n\n- Update AssetTree Extended the Tree component with an onTypeFilterChange callback, allowing the service to filter selected assets accordingly.\n\n- Update Multiselect Added a maximum width of 200px for the Multiselect dropdown component. Additionally, there are two new props \"dropdownClassName\" and \"btnClassName\" to allow further customization similar to the Select component.\n\n- Update ButtonToolbar Extend alignment prop to center buttons.\n\n- Update Switch Added new \"className\" prop to the Switch.\n\n- Update ButtonDropdown Added new prop \"toggleButtonType\" to ButtonDropdown component to allow using a button, a tag or a label as toggle element.\n\n- Update ClearableInput Added a new prop \"maskVisibility\" to control when the mask pattern is visible. Deprecated the prop \"alwaysShowMask\". in favor of maskVisibility.\n\n- Update useOnboardingTour Expose internal onDestroyed callback. Add \"disableActiveInteraction\" prop to disable interaction of highlighted elements.\n\n- Update useSorting Added new callback function \"setSortDirection\" allowing to set sort direction when used with table card sorting.\n\n- New useLocationSuggestions Added new custom hook to fetch locations from Here API that can be used for search inputs.\n\n- New useSearch Added new custom hook to filter a list of objects by a search value.\n\n- New useTableSelection Added new custom hook to handle both single and multiple row selection in tables, optimized for large datasets.\n\n- New TableHead, TableCol Added new table components \"TableHead\" and \"TableCol\" to simplify table structures especially when used with custom hooks like \"useTableSelect\" and \"useSorting\".\n\n- New SvgImage Added new component that helps rendering SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes.\n\n- Icons New icons rioglyph- envelope-open rioglyph- envelope-indicator\n\n- Replaced Replaced react-input-mask with react-imask in TimePicker and ClearableInput components. The mask prop format has changed and is no longer fully compatible with the old react-input-mask syntax. The main difference is the number placeholder, which has changed from \"9\" to \"0\". Please update the mask prop accordingly when using the ClearableInput with an input mask.\nVersion 1.7.1 (2025-02-14)\n- Fixed Banner Fixed height animation of the Banner component when expanding. Added prop \"initialAnimation\" to disable initial content animation.\n\n- Fixed FormLabel Check for various input group sizes to render respective label text sizes.\n\n- Fixed SplitDialog / ListMenu Fixed the issue where a ListMenu dropdown was rendering all menu items on mobile upon mount. Now, only the dropdown is rendered initially.\n\n- Fixed RIOglyph Removed default aspect ration of 1/1 because of problems in flex/grid layouts.\n\n- Fixed Checkbox Fixed broken indeterminate state\n\n- Update RIOglyph Added new rioglyph-align-top, rioglyph-align-bottom and rioglyph-align-baseline classes for proper alignment width texts. Replaced previously introduced has-inline-icon with new rioglyph-align classes.\nVersion 1.7.0 (2025-02-10)\n- Fixed Collapse Fixed visible content overflow in the Collapse and Expander components during content animations.\n\n- Fixed ApplicationLayout Fixed the issue with passing a ref to the ApplicationLayout by exposing the underlying wrapper element. When merging the external ref with the internal ref, the wrapper is now properly exposed, eliminating the need for accessing ref.current.current in the invoking component.\n\n- Fixed ButtonDropdown / useClickOutside Fixed performance of rendering many dropdowns in a large table by introducing an \"isActive\" flag to the useClickOutside hook so that events are only registered and listening when the dropdown is actually open.\n\n- Fixed Route Fixed rendering of dashed routes via the \"lineDash\" prop.\n\n- Fixed List groups Fixed list group buttons active style.\n\n- Icons RIOGlyph We've transitioned the RIOGlyph icon font to an SVG-based system and allowing support for custom SVGs. Please read our guidelines Almost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font. What has changed? Previously, icons acted like text, inheriting line-height and vertical-align naturally. Now, as SVG elements, icons better have layout adjustments in inline text scenarios. The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup. All icons can now also be displayed as filled icons by adding rioglyph-filled Recommended solution < span className = \" has-inline-icon \" Lorem ipsum dolor sit amet < span className = \" rioglyph rioglyph-face-smile \" </ span </ span Lorem ipsum dolor\n\n- Update Dialog Changed dialog footer to use flex layout to ensure proper button positioning. No more need to add \"pull-right\" or custom flex classes.\n\n- Update Dialog animation Add support for the browser's \"prefers-reduced-motion\" flag. When this flag is enabled, dialog animations are disabled. This can be helpful for customers experiencing performance issues while running the application.\n\n- Update ListMenu Added new props to ListMenuItem to allow adding a badge for the list menu group header.\n\n- Update AppNavigationBar Added new props to AppNavigationBar to support a back button title, a subtitle, and a title size. The title is now always centered.\n\n- Update Notifications Replaced the underlying notification library with \"react-toastify\", introducing new options while maintaining the same API for backward compatibility. This update also includes a refreshed notification style.\n\n- Update Charts Updated internal Recharts library to latest version 2.15.0 to remove some warnings.\n\n- style Labels Updated the design of standard labels for a more modern look and added documentation on when to use them.\n\n- New Button Added new \"muted-filled\" button for occasions where the default button is to prominent and the muted button is to subtle.\n\n- New StepButton Added new \"StepButton\" component for convenience and to ensure consistent styling of this type of button.\n\n- New ButtonToolbar Added new \"ButtonToolbar\" component for convenience and to ensure consistent spacing of buttons.\n\n- New FormLabel Added new \"FormLabel\" component for convenience to be used on form elements that utilizes a \"htmlFor\" prop and a label or other form elements.\n\n- New LabeledElement Added a simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements\n\n- New Card Added new \"Card\" component for convenience to apply default styling for a card like element. This component aims to simplify and align common card styling.\n\n- New Avatar Added new \"Avatar\" component for showing the user name initials, a user image, or a user icon.\n\n- New Banner Added new \"Banner\" component for rendering informational content on a page.\n\n- New AccentBar Added new \"AccentBar\" component for visual cues.\n\n- New VirtualList Added new \"VirtualList\" component for rendering large lists using a windowing approach.\n\n- New useToggle Added new \"useToggle\" component to simplify boolean state handling. Use it to handle toggle-based logic like switches, modals, or content visibility.\n\n- New Chart colors Added new chart colors to the chart color map.\n\n- Demo Draggable map marker Added new map demo to showcase draggable map marker.\n\n- Icons New icons rioglyph- light-bulb Renamed icons rioglyph- filled-chart rioglyph- area-chart Updated icons rioglyph- am rioglyph- angle-double-down rioglyph- angle-double-left rioglyph- angle-double-right rioglyph- angle-double-up rioglyph- area-in rioglyph- area-out rioglyph- beacon rioglyph- bookable-poi rioglyph- bookmark-square rioglyph- brake rioglyph- businessman rioglyph- car-wash rioglyph- carrier rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- construction rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- document-out rioglyph- download rioglyph- driver-card rioglyph- driver rioglyph- drivercard-in rioglyph- drivercard-out rioglyph- erase rioglyph- file-signature rioglyph- fill rioglyph- folder-open rioglyph- home rioglyph- inbox-in rioglyph- inbox-out rioglyph- log-in rioglyph- logout rioglyph- map-location rioglyph- map-marker rioglyph- pencil-square rioglyph- pm rioglyph- retrofit rioglyph- role-management rioglyph- tachograph-download rioglyph- tms rioglyph- trailer rioglyph- user rioglyph- volume rioglyph- warning-sign rioglyph- weight\n\n- Update Dependencies Updated the minimum React version requirement to 18 to ensure compatibility with the latest features and optimizations. If you are using older versions of React, please update.\n\n- Removed Removed the outdated cross-browser style documentation.\n\n- Update Notifications Extended the writing style guide for guidance for using different notification types\n\n- Update Commonly misspelled words Extend the writing style guide for a list of commonly misspelled or misformatted words\n\n- Update Formatting numbers with units Extended the list of formats for examples of \"kilowatt-hour\" and \"megawatt-hour\". Please note that these units are not yet officially supported by TC39.\nVersion 1.6.1 (2024-12-09)\n- Fixed ApplicationLayout Fixed the application layout to ensure the body contains only a single child, addressing issues with the recently introduced grid layout for the body scrollbar element.\nVersion 1.6.0 (2024-12-02)\n- Fixed SplitDialog Fixed the SplitDialog prop documentation for \"useOverflow\" to clarify that its default value is \"true,\" unlike other dialogs.\n\n- Fixed Multiselect Fixed the Multiselect component to correctly manage the dropdown state and filter value when used in multiline mode with an active filter.\n\n- Update Tree Added \"treeHeaderContent\" prop to the Tree component for rendering additional custom content at the top of the tree, useful for navigation pills.\n\n- Update Dialog Extended dialog sizes for \"fullheight-lg\" and \"fullheight-xl\".\n\n- New useOnboardingTour Introducing a new way to onboard users via an onboarding tour by using the \"useOnboardingTour\" custom hook. Note that weh have deprecated the \"clickflow\" prop for the OnboardingTip component with this new feature.\n\n- New OnboardingDialog Added new OnboardingDialog to initiate a onboarding tour and acts as the welcome dialog for the user of a service.\n\n- New Grid rows Added new grid helper class \"grid-rows-auto-1fr-auto\" to support a 3 row layout with expandable middle row.\n\n- Icons Updated icons rioglyph- cost-efficency Added icons rioglyph- newspaper rioglyph- rocket rioglyph- trophy rioglyph- check-badge rioglyph- check-shield rioglyph- sparkles rioglyph- academic-cap rioglyph- onboarding rioglyph- bookmark rioglyph- bookmark-square\nVersion 1.5.3 (2024-11-05)\n- Fixed AssetTree Fixed asset tree height by setting the \"scrollbar-content-wrapper\" to display flex and let the tree wrapper grow in the flex column direction.\nVersion 1.5.2 (2024-11-04)\n- Fixed SmoothScrollbars Changed height-100pct to min-height-100pct because of height side-effects in chrome.\n\n- Icons Added icons icons rioglyph- oil-can\nVersion 1.5.1 (2024-10-22)\n- Fixed Pills Fix rendering icons in justified filled pills when there is an icon only.\n\n- Fixed SmoothScrollbars Added height-100pct to the recently introduced smooth scrollbar content wrapper. This also fixes a side-effect on the AssetTree component.\n\n- Fixed MapMarker Tone down the POI marker color to better match the new Geofence color and to work better on a large satellite map.\nVersion 1.5.0 (2024-10-21)\n- Fixed Route Fix setting route arrow style. Added color constants for using status colors for routes. Extend demo examples to showcase usage of route styles and colors.\n\n- Fixed SmoothScrollbars Fix updating the scrollbar handle when the content height changes. This fix introduces a new wrapper div to check the children's height. Please check your tests and update them in case you rely on the old structure.\n\n- Fixed Select Fixed an issue with updating the dropdown menu options after the initial render, ensuring that the filter utilizes the updated DOM nodes.\n\n- Update LineChart Extended charts to render additional axis. The demos have been extended for interactive legends to highlight active lines.\n\n- Update Route Extended Route component to allow storing custom data to it which can be used when clicking on the routes polyline to set the route active.\n\n- Update Map isoline Extended the Polygon component to import the RIO colors to use it for an isoline or other polygons. Extended the demo to also include isoline colors.\n\n- Update Colors Adapted the \"gray-decent\" slightly and with that all derived classes like \"bg-decent\" and \"hover-bg-decent\"\n\n- Update Forms All form inputs have a subtle shadow now.\n\n- New Map marker A new map marker color has been added for road restrictions. The geofence color has been updated to avoid confusion with the restriction color used by HERE maps for their road restrictions. The new geofence color provides significantly better contrast and is clearer to see on the satellite map type.\n\n- New Chat Added new pure CSS chat component\n\n- New FadeUp Added new components to fade in from the bottom when an element appears on screen. This can be used to stagger elements on scroll.\n\n- New FadeExpander Added new components to expand content. This can be used to reveal or hide additional content triggered by all kinds of interaction.\n\n- New Cursor Added more cursor-style utility classes\n\n- New Shadows Added new shadow classes \"shadow-subtle\" and \"shadow-muted\", as well as directional classes \"shadow-muted-down\" and \"shadow-default-down\" to be used on light and white backgrounds. The hard shadow direction styles are now slightly more blurred to remove the hard line in the shadow. Note: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n\n- New useSorting Added new useSorting hook for easily sorting any list by specified key using natural sort order\n\n- New URL feature toggles Added URL-based feature toggle handling and description of how to use them\n\n- Icons Added icons icons rioglyph- bookable-poi rioglyph- car-wash Updated icons rioglyph- truck rioglyph- truck-baseline rioglyph- truck-breakdown rioglyph- truck-unit rioglyph- van rioglyph- van-baseline rioglyph- trailer rioglyph- trailer-baseline rioglyph- trailerposition rioglyph- car rioglyph- car-baseline rioglyph- bus rioglyph- bus-baseline rioglyph- bus-breakdown rioglyph- filling-e-station rioglyph- filling-station rioglyph- euro-note rioglyph- order rioglyph- palette rioglyph- palette-broken rioglyph- parcel rioglyph- parcel-broken rioglyph- empty\n\n- Update Border radius and shadows The default border radius has been increased, and new shadow styles have been introduced, affecting various elements such as buttons, inputs, and panels. These updates collectively enhance the overall design, providing a more modern, refined, and visually appealing look and feel.\nVersion 1.4.1 (2024-09-12)\n- Update ButtonDropdown Added forwardRef to ButtonDropdown and pass it to the underlying dropdown toggle button. Fixed ButtonDropdown demo page examples.\n\n- Fixed Tooltip Wrapped Tag and Switch component in forwardRef so they work with the OverlayTrigger and SimpleTooltip component\n\n- New Map fullscreen demo Added a fullscreen map demo with rendering some metrics for inspection and customer feedback\nVersion 1.4.0 (2024-09-06)\n- Fixed Fixed dark mode listener when trying to read the theme from the colorScheme cookie\n\n- Fixed Charts Fixed rendering of chart legends for all charts\n\n- Update LineChart, AreaChart Extended LineChart and AreaChart components with reference lines\n\n- Update Select Added \"isLoading\" prop to show a loading spinner inside the Select and Multiselect dropdown\n\n- Update useKey Extend useKey hook to allow specifying specific keys to listen for\n\n- New ComposedChart Added new simple ComposedChart component to render a combination of line, area, and bar charts\n\n- New GroupedItemList Added new GroupedItemList component to render a list grouped by a specific key with the flexibility to customize the group header and the rendered items\n\n- New LicensePlate Added new LicensePlate component to display license plate information with various customization options\n\n- Icons Added and updated icons rioglyph- air-pay rioglyph- euro-note rioglyph- language rioglyph- calendar-parking rioglyph- engine\n\n- Update Notifications Extended the writing style guide for notification and \"copy to clipboard\" guidelines\nVersion 1.3.0 (2024-07-26)\n- Fixed TreeOptions Fixed tree options tooltip position\n\n- Fixed DataTab Fixed DataTab title to avoid being set to the div element and used as native tooltip\n\n- Fixed SimpleDialog, SplitDialog Fixed typings of SimpleDialog and SplitDialog\n\n- Fixed Select Fixed italic placeholders for Select and Multiselect\n\n- Fixed Fixed DateRangePicker type for backwards compatibility\n\n- Update Sliders Added new \"color\" prop\n\n- Update Switch Added new \"color\" prop\n\n- Update Forms Added new focus shadow for form inputs and changed the input border color\n\n- Update OverlayTrigger, Tooltip, OnboardingTip, Popover The OverlayTrigger and Popover components are no longer based on react-bootstrap. They have been rewritten to remove the dependency and to fix some warnings when used with React 19.\n\n- New useElapsedTime Added new useElapsedTime hook to get the time since a component was mounted or from a provided starting time\n\n- New Flexbox Added class \"flex-0\" to flexbox utility classes\n\n- New Rounded Added class \"rounded-inherit\" to rounded utility classes\n\n- Update RIO Theme The danger color has been slightly adjusted to better match the other colors. Dark mode colors for danger, warning, and success have also been updated.\n\n- Update VW Theme Adapt highlight colors to VWAG guidelines\n\n- Update Formatting guide Extracted number and date formatting guidelines into a dedicated formatting guide page. This makes it easier to find and to keep the writing style guide shorter.\n\n- New Form labels and placeholders Extended the writing style guide for form labels and placeholders\nVersion 1.2.2 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown header items\n\n- Fixed Checkbox Fixed the rendering position of the checkbox in the grid layout using align-baseline, ensuring it remains stable when checked and unchecked\nVersion 1.2.1 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown when used in unit tests\n\n- Fixed Tree Fixed Tree scrolling when used as a standalone component without the wrapping AssetTree and when a \"scrollHeight\" is defined\n\n- Fixed AssetTree Merged the nested elements \".TreeLabel\" and \".TreeLabelName\" into a single element for TreeNode and TreeLeaf. This reduces the number of DOM elements and enhances performance. Note that you may need to update selector paths in integration tests if they reference tree items.\n\n- Fixed Key Fixed key style for dark mode\nVersion 1.2.0 (2024-06-26)\n- Fixed SmoothScrollbars Added missing root export for SmoothScrollbars component\n\n- Fixed ErrorState, EmptyState, CustomState Fixed button alignment for mobile screens\n\n- Fixed Marker Fixed \"list-group-item\" style when using color indicators\n\n- Fixed Multiselect Fixed filter input padding when Multiselect is used with a leading input addon\n\n- Fixed useAfterMount Fixed hook useAfterMount functionality\n\n- Update MapSettings Enhance MapSettings to include item labels. Substitute MapSettingsPanel with a Dropdown when labels are available. Please provide labels for users to improve usability. Note that providing labels will become mandatory in the future.\n\n- Update Marker Added new mapMarker \"cursor\" props\n\n- Update ListMenu Added new prop \"trailingInputAddon\" to allow adding additional elements to the filter input\n\n- Update DeviceUtils Added new device utils helper function to check for Apple Mac OS to be used for showing mac specific keys\n\n- New Feedback Added new feedback components to simplify requesting user feedback for various use cases\n\n- New Key Added style for keys by using the \"<kbd\" HTML tag\n\n- New Visibility Added new \"visibility-hidden\" class to only target the visibility without setting display to none\n\n- New Input resize Added new input resize classes\n\n- Icons Added new Icon rioglyph- layer-pois\nVersion 1.1.0 (2024-06-17)\n- Fixed CalendarStripe Fixed CalendarStripe component when resizing and rendering different amounts of columns\n\n- Fixed AssetTree Fixed rendering issue in AssetTree component when switching mode between \"fly\" and \"fluid\" externally\n\n- Fixed Marker Fixed broken Marker component when using it without an icon\n\n- Fixed Pills Fixed disabled styles for stacked and filled nav-pills\n\n- Fixed Traton Theme Fixed border radius for Dropdown, MapMarker, Slider, Tag, and Buttons\n\n- Update Marker Updated marker style for active and inactive markers. Extend marker colors for status colors. Adapt default colors for map for better readability in light and dark mode. Added new prop \"pinging\" to SingleMapMarker to render a pinging animation. Another new prop \"anchorIconName\" was added to render an icon directly on the markers anchor. The map direction icon can now be replaced via the new \"stateIconName\" prop and the default moving state can be changed.\n\n- Update AssetTree Added new prop \"treeOptionsTooltip\" to Tree component to show a tooltip for the tree options dropdown\n\n- Update ActionBarItem Updated the \"ActionBarItem.List\" style used for the service info popover. Please make sure to use the \"ActionBarItem.List\" and \"ActionBarItem.ListItem\" components to design the service info for the application header.\n\n- Update ErrorState, EmptyState, CustomState Added the prop \"bsStyle\" to the state components buttons to define other button styles like a default button. Also, when providing an href value, the button is rendered as a link. The headline size will increase now at the xl breakpoint to have a slightly smaller text size for smaller screens.\n\n- Update NoData Improved readability by improving text color contrast. Removed text uppercase according to the writing style guide.\n\n- Update Fieldset Update \"fieldset\" and \"legend\" style for grouping form elements. Added demo to showcase utility of using fieldsets in forms.\n\n- Icons Icons Update icons optical center to work better within circles like the direction icon for the map marker rioglyph- direction rioglyph- parking rioglyph- antenna rioglyph- heart rioglyph- location-arrow\n\n- New CSS Grid & Subgrid Added multiple CSS Subgrid utility classes and examples. Extended Grid classes and documentation\n\n- New Added bg-none and hover-bg-none class\nVersion 1.0.0 (2024-06-03)\n- Breaking With this version, we have started migrating all components towards Typescript for better typing support and documentation. With this migration, we will remove the internal types.ts file. As it was not intended to be used by any service, please make sure you update your imports accordingly. Check out the How to for more details. Be aware of possible changed component types as well.\n\n- Breaking Map With this version the HERE map implementation has changed significantly since we have migrated the map internally to the latest HERE APIs. This includes also the map rendering where the default render engine has changed from WebGL to HARP. Raster maps are rendered with the P2D engine. Due to this migration, the map types have a different design now. To make use of the new rendering engine, please add the following HERE dependency to your project. < script type = \" text/javascript \" src = \" https://js.api.here.com/v3/3.1/mapsjs-harp.js \" </ script\n\n- Removed Fade Removed several deprecated props from the Fade component\n\n- Removed Removed \"BrowserWarning\" component\n\n- Removed Removed \"text-muted\" utility class. Use \"text-color-gray\" instead\n\n- Removed Removed \"GroupSelectionUtil\" getNewGroupedSelected utility function\n\n- Removed Removed getOffsetTopWholeScreen utility function\n\n- breaking BottomSheet / Sidebar Renamed prop \"useBackdrop\" to \"hasBackdrop\" for BottomSheet and Sidebar component\n\n- breaking CalendarStripe Deprecated \"render\" prop of \"CalendarStripe\" component in favor of new \"renderDay\" prop\n\n- breaking Collapse / ExpanderPanel / ExpanderList Removed callbacks \"onEnter\", \"onEntering\", \"onExit\", and \"onExiting\" for ExpanderPanel and Collapse components. We introduced Framer Motions \"onAnimationStart\" callback instead. The ExpanderPanel header style underwent slight changes. The \"in\" class for the collapse is no longer used. Additionally, the \"react-transition-group\" library has been replaced with \"framer-motion\". The prop \"mountOnEnter\" has been removed from the ExpanderPanel, ExpanderList and Collapse components. Use \"unmountOnExit\" instead to control whether the collapsed content should be removed from the DOM when it is collapsed. The collapse prop \"in\" has been renamed to \"open\" to align with other components.\n\n- breaking List Groups and Expanders List groups no longer have a border and a border-radius by default. This has the advantage that they can now be used within other elements without having to overwrite many CSS values. To get the same look as before, you need to set the classes \"border\" and \"rounded\". Expander lists now have props for these two CSS properties, which are set to true by default.\n\n- breaking Resizer The Resizer component has been migrated from class component to functional component. With that the updated size value need to be set with a state setter function. Example: const handleResize = ( diff: number ) =setBoxWidth ( oldWidth =oldWidth - diff )\n\n- breaking Select / Multiselect Changed roles of Select and Multiselect dropdown menu from \"list\" to \"menu\" and the role of the individual select options from \"presentation\" to \"listitem\" to be aligned with the ButtonDropdown component. Fixed automatic drop direction check to open the dropdown above the toggle when there is not enough space. Removed deprecated size values \"small\" and \"large\" in favor of \"sm\" and \"lg\".\n\n- breaking Select The type definition for the Select component has changed. The more impactful change is the type for the \"onChange\" callback which has changed to handle the removal of a selection and therefor \"undefined\" will be returned. onChange = { ( selectedOption: SelectOption | undefined ) =handleChange ( selectedOption ?. id ) } Also important to note that the SelectOption type no longer can be imported via the \"types.ts\" file. Please adapt your import accordingly import Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\n\n- breaking Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.\n\n- Removed useResizeObserver The \"Observer Entry\" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults do div).\n\n- Fixed Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.\n\n- Fixed BottomSheet Fixed maximum width for BottomSheet component when using the \"detach\" prop. Allow defining the detach offset.\n\n- Fixed Chart Colors Fixed export of shared colors for diagrams\n\n- Fixed Loading Guidelines Fixed spinner size for buttons to avoid button size changes. Extended loading guidelines for spinner buttons in tables.\n\n- Fixed Sidebar Automatically switch Sidebar mode from \"fluid\" to \"fly\" to be put above the content when the ApplicationBody's module-content width reaches a defined minimum. This avoids breaking the entire application layout for fluid Sidebars on smaller screens or when resizing Sidebars.\n\n- Fixed SimpleTooltip Renamed SimpleTooltip prop \"tooltipWidth\" to \"width\" to align with underlying Tooltip component\n\n- Fixed Spinner Outlined spinner buttons\n\n- Fixed Spinner in Buttons Fixed style for spinner in button block\n\n- Fixed Tags Fixed 1px offset of tag icons\n\n- Fixed Tooltip Fixed tooltip arrow position on small elements\n\n- Update AutoSuggest Migrated AutoSuggest component to Typescript and cleaned up its props\n\n- Update AssetTree Added new TreeSummaryRow component to allow for more tree item type filter like fuel type. With this we also added a new \"supType\" property to the TreeItem to filter for it and to show a paired icon.\n\n- Update Button Added \"iconName\" prop to Button component to reduce boilerplate code when using icons. Use native HTML \"disabled\" prop instead of separate class.\n\n- Update ClearableInput Added an input mask to the ClearableInput to allow custom input formats to avoid user input mistakes\n\n- Update Dialog Added focus trap to Dialog component. Deprecate \"onHide\" callback in favor of \"onClose\". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class \"modal-ender-done\" has been removed. Added new \"xs\" dialog variant\n\n- Update ExpanderPanel Added new \"onOpen\" and \"onClose\" callbacks to ExpanderList items\n\n- Update ExpanderPanel / Combined Tables in ExpandablePanel Added \"iconClassName\" prop to ExpanderPanel component to to allow for 100% width in the panel header. This comes in handy when using a table inside the header and the body that shall have the same column width. With that we also added a design demo to showcase the usage of the tow tables inside the expander panel.\n\n- Update Forms Added horizontal form demo\n\n- Update LoadMoreButton Extended LoadMoreButton component with props \"isInteractive\" and \"progressBarStyle\" to customize behavior and style\n\n- Update Map Settings / Map Layer Migrated the Here Map traffic layers to use the new APIs when using the WebGL mode. For raster maps tiles, we still have to use the deprecated APIs as there is no alternative for now. We also fixed the map translations so other countries are also properly translated and don't show their city names in their native language.\n\n- Update Multiselect Added prop \"multiline\" to allow wrapping selected item around within the multiline toggle. The style of the selected items has changed to be more muted so it better integrates with other form elements.\n\n- Update NumberInput / NumberControl Migrated NumberInput and NumberControl to Typescript and updated their typings. Added check to avoid entering letters or special characters into the input field for Firefox and Safari. Added prop for warning and error messages. Added new prop \"noDefault\" to keep the input empty instead of using the default value of 0. Fixed the NumberControl spinner buttons when holding down the mouse button to increase and decrease the value and leaving the input field.\n\n- Update TimePicker Added prop for rendering warning and error messages\n\n- Update Onboarding Added props \"previousButton\" and \"nextButton\" to Onboarding component to enable a better onboarding click flow\n\n- Update Print CSS Notifications are now hidden while printing the page when using our print.css\n\n- Update Select Added prop \"inputAddon\" to Select component to allow for adding icons as addon to the toggle button Enhanced the background color of selected options for the Select and Multiselect component\n\n- Update Sidebar Added prop \"hasSmoothScrollbar\" to Sidebar component to enable the built-in scrollbars instead of using the native browser scrollbars\n\n- Update Slider or RangeSlider Added \"valueLabelUnit\" prop to Slider and RangeSlider to use a label for the slider values\n\n- Update SplitDialog Added new \"leftContentClassName\" and \"rightContentClassName\" to the split dialog\n\n- Update Buttons Add gray-lightest hover background color to muted, link, and action buttons\n\n- Update Timeline Added new classes \"timeline-date-thin\" and \"timeline-date-dashed\" as well as color classes to change the timeline width and style. Updated Timeline examples to showcase variations as it's built with atomic classes.\n\n- New EditableContent Added new EditableContent component that allows for inline text editing\n\n- New DeviceUtils Added new \"isRetinaDevice\" to deviceUtils\n\n- New Divider Added new Divider component for horizontal and vertical dividing lines\n\n- New Forms New form \"form-group-not-editable\" style toggling editable forms\n\n- New FrameDialog Added new FrameDialog component that can be used to open a dialog from a widget iframe in the parent window\n\n- New Grid stack Added new grid stacking classes \"grid-stack\" and \"grid-stack-item\" as an alternative to position absolute\n\n- New HTML Emails New guidelines demo for HTML emails created with react email\n\n- Icons Icons rioglyph- drag-n-drop rioglyph- robot rioglyph- pin-range rioglyph- pin rioglyph- calendar-plus rioglyph- exclamation rioglyph- info rioglyph- question rioglyph- fuel-diesel rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- archive rioglyph- map rioglyph- map-location rioglyph- book rioglyph- face-frown rioglyph- face-neutral rioglyph- face-smile rioglyph- paper-clip rioglyph- share-nodes rioglyph- handshake rioglyph- stack rioglyph- building rioglyph- file-signature rioglyph- signature rioglyph- location-arrow rioglyph- wallet rioglyph- user-group rioglyph- window rioglyph- inbox rioglyph- inbox-stack rioglyph- inbox-in rioglyph- inbox-out rioglyph- id rioglyph- ruler rioglyph- cards-add rioglyph- truck-unit rioglyph- user-add rioglyph- user-ok rioglyph- user-remove rioglyph- pencil-square rioglyph- megaphone rioglyph- code-brackets rioglyph- code-braces rioglyph- hash rioglyph- server-stack rioglyph- shopping-bag rioglyph- search-list rioglyph- tasks rioglyph- fingerprint rioglyph- flag rioglyph- fire rioglyph- puzzle\n\n- New Line Height Added new \"line-height-150rel\" class\n\n- New Page Added new Page component for displaying documents\n\n- New SaveableInput Added new SaveableInput component\n\n- New TimedBottomSheet Added new TimedBottomSheet component to control a bottom sheets visibility with timers\n\n- New SmoothScrollbars Added a new SmoothScrollbars component\n\n- New Text Wrapping Added new \"text-wrap-balance\" class\n\n- New useFocusTrap Added new useFocusTrap hook that can be used for custom overlays\n\n- New useHover Added new useHover hook that can be used for style changes on hover for certain elements that can not be influenced by hover utility classes alone\n\n- New usePostMessage Added new usePostMessage hook that can be used to exchange messages between an iframe and the parent window\n\n- CSS With this version, the UIKIT adds its CSS link into the header automatically if it is not present. This should help to ease the update of the UIKIT library and the corresponding CSS. This means, you can remove the link from your index.html and only update the UIKIT dependency in your package.json. See Automatic loading of UIKIT CSS Files\n\n- Guideline For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color, we have added a new \"Color Combinations\" section. See Color Combinations\n\n- Guideline We have introduced some general writing guidelines to enhance consistency in UX writing and to maintain a unified voice. See Writing style guide\nVersion 0.16.3 (2023-03-14)\n- Icons Deleted Icons: fax\n\n- Fixed Fixed alignment of collapsed header menu items. See ApplicationHeader\n\n- Fixed Fixed fade in animation when the inital animation is set to false. See Fade\n\n- Fixed Fixed close animation for BottomSheet when hight is set to window height. See BottomSheet\n\n- Fixed Fixed AspectRatioPlaceholder declaration file name.\n\n- Fixed Fixed text ellipsis of selects. See Selects\n\n- Update Refactored DataTabs props. See DataTabs Merged hoverTextColor and hoverBgColor props to tabHoverClassName Merged activeTextColor and activeBgColor props to tabActiveClassName added arrowClassName prop added tabsWrapperClassName prop added tabClassName prop added new className prop to DataTab child component\n\n- Update Added new \"fullheight\" Dialog Size and renamed \"full\" to \"fullwidth\". See Dialog\n\n- Update MapSettings panels are now closing on click outside. See MapSettings\n\n- Update Extended the SimpleTooltip component to pass the \"delay\" and \"popperConfig\" props to the underlying component. See SimpleTooltip\n\n- Update Remove left padding from ReleaseNotes component to better work with images. Please add padding-left-15 manually, in case you want to work with lists. See ReleaseNotes\n\n- New Added new CalendarStripe component. See CalendarStripe\n\n- New Added new hook \"usePrevious\" to access state values of previous component render cycle. See usePrevious\n\n- Icons Added or updated icons: rioglyph- card-reader rioglyph- card-hotel rioglyph- api rioglyph- currency-euro rioglyph- thumbs-up rioglyph- thumbs-down rioglyph- hand-up rioglyph- hand-down rioglyph- hand-left rioglyph- hand-right See Icons",
     "category": "Getting started",
     "section": "Welcome",
     "boost": "Changelog start/changelog #start/changelog Getting started Welcome"
@@ -1189,6 +1229,16 @@
     "section": "Guidelines",
     "boost": "Loading guidelines start/guidelines/spinner #start/guidelines/spinner Getting started Guidelines"
   },
+  {
+    "id": "start/guidelines/state-in-url",
+    "title": "State in URL (deep links)",
+    "lead": "Every service frontend should support deep linking and reflect meaningful UI state in the URL. This enables restoring state when links are shared, when they are stored as bookmarks, when users navigate with browser history, or when a service is opened from another app.",
+    "summary": "Every service frontend should support deep linking and reflect meaningful UI state in the URL. This enables restoring state when links are shared, when they are stored as bookmarks, when users navigate with browser history, or when a service is opened from another app.",
+    "searchText": "State in URL (deep links)\nEvery service frontend should support deep linking and reflect meaningful UI state in the URL. This enables restoring state when links are shared, when they are stored as bookmarks, when users navigate with browser history, or when a service is opened from another app.\nState in URL (deep links)\nMental model\nThink of the URL as the external representation of app state. It should describe where the user is and what they are looking at (intent), not what they are currently doing (interaction).\n\nState that only lives in memory breaks a core web expectation. If users refresh or navigate back and lose filters, view settings, or selections, the app feels unreliable. URLs should preserve context so users can return to the same place without redoing their work.\nDecision criteria\nBefore putting something in the URL, ask:\n\n- Would the user expect this to persist after reload or sharing the link?\n- Would the link feel “broken” without it?\n- Does it describe intent rather than a transient UI interaction?\nWhat belongs in the URL\nGood candidates\n- Search queries and filters\n- Sorting and column visibility (when it changes what users see)\n- View modes (list/grid/table/map)\n- Date ranges and time periods\n- Selected items or active tabs (focus)\n- UI configuration that affects content (e.g. grouping, expanded views)\n- Feature variants (only if stable and safe to share)\nPoor candidates\n- Sensitive information (passwords, tokens, PII) - NEVER!\n- Temporary UI states (e.g. dropdown expanded, tooltip open)\n- Form input in progress (unsaved changes)\n- Very large or complex nested data\n- Base64 encoded data\n- High-frequency transient state (mouse position, scroll)\nExample deep links\nPrefer readable, self-describing URLs. Use consistent naming across services to make deep links easier to share and reason about.\nAnnotated example\nhttps://example.com/#/assets?q=truck&sort=-name&viewType=table&selectedAssetId=asset-123\n\nq                search query (user intent)\nsort             sort key with direction prefix (\"-name\" = descending by name)\nviewType         content representation mode\nselectedAssetId  focused entity that should be shareable/restorable\nMore examples\nhttps://example.com/#/overview?view=history&assetIds=5a88af1e-2fb2-494e-9240-6a833d5f1791&q=10&startDate=2019-06-17T00:00:00Z&endDate=2019-06-17T23:59:59Z&sort=timestamp#details\nhttps://example.com/#/drivers/74eb88e1-1a84-4abe-90bc-9e0079807d57?driverState=ACTIVE&q=my%20test\nhttps://example.com/#/users/0848-b02e-47be-bd77-d332f61a90d6?sort=-lastName\nhttps://example.com/#/issues?projectKey=FM&view=details&selectedIssue=FM-4346\n\nTreat the URL as user input. Invalid or unknown params should not break rendering. Fall back to defaults and keep the UI usable.\nCommon param names\nUse consistent, concise camelCase param names across services whenever possible. If URLs become verbose, prefer a well-known short form (e.g. q, lat / lng) and document it so other teams can align.\nURLs as contracts\nWell-designed URLs are more than a storage place for state. They become a contract between your app and its consumers, setting expectations for humans, developers, and machines.\n\nA clear URL draws boundaries between public and private state, shareable and session-only data, and client versus server responsibility. Developers know what is safe to persist, users know what they can bookmark, and machines know what is worth indexing.\n\nReadable URLs communicate meaning. Compare:\n\n// bad: unclear intent, hard to reason about\nhttps://example.com/#/p?id=x7f2k&v=3\n\n// good: self-describing, stable, easier to maintain\nhttps://example.com/#/products/laptop?color=silver&sort=price\n\nThe first hides intent; the second explains itself and is easier to evolve without breaking consumers.\nHow to\nTypical flow:\n\n- Define which parts of state belong in the URL and what the defaults are.\n- Parse URL to initial state on load.\n- Update URL when state changes (omit defaults to keep URLs compact).\n- Choose history behavior (push vs replace) based on user expectations.\n\nUse UIKIT utilities instead of hand-rolled parsers:\n\nts\nimport { useLocation, useNavigate, useNavigationType } from 'react-router-dom';\nimport useUrlState from '@rio-cloud/rio-uikit/useUrlState';\nimport type { UrlConfigItem } from '@rio-cloud/rio-uikit/routeUtils';\n\ntype ViewType = 'list' | 'grid';\ntype AppState = { query: string; viewType: ViewType; tags: string[] };\n\nconst actions = {\nsetQuery: (value: string) =({ type: 'setQuery' as const, payload: value }),\nsetViewType: (value: ViewType) =({ type: 'setViewType' as const, payload: value }),\nsetTags: (value: string[]) =({ type: 'setTags' as const, payload: value }),\n};\n\nconst config: readonly UrlConfigItem<AppState, unknown[] = [\n{ key: 'q', selector: s =s.query, action: actions.setQuery, defaultValue: '' },\n{ key: 'viewType', selector: s =s.viewType, action: actions.setViewType, defaultValue: 'list' },\n{ key: 'tags', selector: s =s.tags, action: actions.setTags, type: 'array', defaultValue: [] },\n];\n\nconst location = useLocation();\nconst navigate = useNavigate();\nconst navigationType = useNavigationType();\n\nuseUrlState({\nconfig,\nsearchString: location.search,\nstoreValues: { q: state.query, viewType: state.viewType, tags: state.tags },\nnavigationType,\nonUpdateStore: action =dispatch(action),\nonNavigate: (search, mode) =navigate({ search }, { replace: mode === 'replace' }),\n});\n\nImplementation details: See useUrlState and route utils for details.\nBest practices\nKeep URLs tidy, predictable, and easy to share. Compact URLs are easier to read, easier to compare, and less likely to break in older environments.\n\nHandle defaults by omitting them from the URL. Only include values that differ from the default state.\n\n// avoid: defaults add noise\n?viewType=table&lang=en&sort=date&filters=type\n\n// prefer: only non-default values\n?viewType=grid\npushState vs. replaceState\nUse pushState when a change is a meaningful navigation step and should be undoable via the Back button (switching view type, applying a filter set). Use replaceState for small refinements where history noise would harm usability (search-as-you-type, incremental tweaks).\n\n// use pushState for meaningful navigation steps (undoable via Back button)\n?viewType=grid\n?selectedAssetId=asset-123\n?filters=type:truck,status:active\n\n// use replaceState for refinements (avoid noisy history)\n?q=tr\n?q=tru\n?q=truck\n\nRespect the Back button: if a change should be undoable, use pushState. If it is just a refinement, prefer replaceState.\nURL state and Redux\nPick one source of truth and keep synchronization one-way to avoid loops.\n\nURL as source of truth (simple cases)\n\n- Read URL params directly (for example with React Router search params).\n- Derive rendered state from URL values.\n- Update URL directly from UI actions with push/replace based on intent.\n\nts\nimport { useMemo } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\ntype ViewType = 'list' | 'grid';\n\n// URL as source of truth (simple screens, no centralized store sync)\nconst [searchParams, setSearchParams] = useSearchParams();\n\nconst urlState = useMemo(\n() =({\nq: searchParams.get('q') ?? '',\nviewType: (searchParams.get('viewType') as ViewType) ?? 'list',\n}),\n[searchParams]\n);\n\nconst setUrlState = (patch: Partial<typeof urlState, historyMode: 'push' | 'replace' = 'push') ={\nconst next = new URLSearchParams(searchParams);\nconst merged = { ...urlState, ...patch };\n\nif (merged.q) next.set('q', merged.q);\nelse next.delete('q');\n\nif (merged.viewType === 'list') next.delete('viewType');\nelse next.set('viewType', merged.viewType);\n\nsetSearchParams(next, { replace: historyMode === 'replace' });\n};\n\n// Typical usage:\nconst onSearchChange = (q: string) =setUrlState({ q }, 'replace'); // typing/search refinement\nconst onViewTypeChange = (viewType: ViewType) =setUrlState({ viewType }, 'push'); // meaningful step\n\nRedux as source of truth (more complex but recommend for more complex SPAs)\n\n- Parse the URL once to seed initial Redux state.\n- Subscribe to Redux and update the URL (debounced).\n- Listen for URL changes and dispatch to Redux with guards to avoid loops and no-op updates.\n\nts\nimport useUrlState from '@rio-cloud/rio-uikit/useUrlState';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useLocation, useNavigate, useNavigationType } from 'react-router-dom';\nimport type { AppDispatch } from '../../../../setup/store';\n\n// Redux as source of truth (recommended for larger SPAs)\n// 1) Parse URL and dispatch updates on URL changes (including browser POP).\n// 2) Observe store values and write URL changes via push/replace rules.\n// 3) Keep this logic centralized in one component near the router.\n\nconst dispatch = useDispatch<AppDispatch();\nconst location = useLocation();\nconst navigate = useNavigate();\nconst navigationType = useNavigationType();\n\nconst storeValues = useSelector(state =({\nq: getSearchValue(state),\nsort: { sortBy: getSortBy(state), sortDir: getSortDir(state) },\nfilters: getActivityFilter(state),\n}));\n\nuseUrlState({\nconfig: tableUrlConfig,\nsearchString: location.search,\nstoreValues,\nlocalStorageKey: 'service.ui.state',\nnavigationType,\nonUpdateStore: action =dispatch(action),\nonNavigate: (search, mode) =navigate({ search }, { replace: mode === 'replace' }),\n});\n\nuseUrlState supports this second model: centralized store-url synchronization. If you still use template helpers like routeHelper with qs, replace them with a centralized config + useUrlState synchronizer and define per-field history behavior with history: 'push' | 'replace'.\nThings to consider\n- Use comma-separated values for lists (keep them readable, avoid encoding commas in lists).\n- Keep param names explicit and avoid merging unrelated state into one param.\n- If a value equals the default, omit it from the URL to reduce clutter.\n- Encode user input (search strings) with encodeURIComponent.\n- Document formats for dates and timezones (recommend UTC) and coordinate precision.\n- Treat URL params as untrusted input: ignore unknown params, fall back to defaults for invalid values, and never break rendering due to a malformed URL.\nLimitations\nURL length limits vary by browser, OS, and environment. Modern browsers typically handle very long URLs, but older/legacy browsers can fail around a few thousand characters.\n\nKeep URLs concise. If you need to support older environments, validate URL length limits in your target setup and consider alternative persistence (e.g. server-side saved views) for large state.",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "boost": "State in URL (deep links) start/guidelines/state-in-url #start/guidelines/state-in-url Getting started Guidelines"
+  },
   {
     "id": "start/guidelines/supported-browsers",
     "title": "Supported Browsers",
@@ -1214,7 +1264,7 @@
     "title": "How to use the UIKIT",
     "lead": "Install the latest version of the UIKIT (that includes latest beta versions as well) via",
     "summary": "Install the latest version of the UIKIT (that includes latest beta versions as well) via",
-    "searchText": "How to use the UIKIT\nInstall the latest version of the UIKIT (that includes latest beta versions as well) via\nHow to use the UIKIT\n- Install the npm package\n- Typescript\n- Document <head /key meta tags\n- UIKIT CSS\n- Brand themes Print styles Additional styling information Dark mode\n- UIKIT Javascript packages via CDN\n- Dependencies\n\n- Typescript\n\n- Brand themes\n- Print styles\n- Additional styling information\n- Dark mode\nInstall the npm package\njavascript\nnpm install @rio-cloud/rio-uikit\n\nOr install a dedicated version via\n\njavascript\nnpm install @rio-cloud/rio-uikit@2.1.0\nTypeScript\nThe UIKIT is built with TypeScript and defines the types inside the components.\n\nNote: Do not import types from the ./types.ts file directly as this is an internal file and subject to change. Import enums, constants and types from the declaration file together with the component.\n\njavascript\nimport AutoSuggest, { type AutoSuggestSuggestion } from \"@rio-cloud/rio-uikit/AutoSuggest\";\nimport Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\nimport TableViewToggles, { type TableViewTogglesViewType } from \"@rio-cloud/rio-uikit/TableViewToggles\";\nDocument <head /> key meta tags\nMandatory\n\nThe utf-8 meta tag is essential for ensuring that your webpage correctly displays text in a wide range of languages and symbols. By setting the character encoding to UTF-8, this tag enables support for almost all characters, including those used in non-Latin scripts, special symbols, and emojis.\n\nThis not only guarantees proper rendering of your content but also prevents common issues such as garbled or corrupted text and icons, known as mojibake. Modern web browsers and standards expect UTF-8 encoding by default, making this tag a critical component of any HTML document. Including this tag ensures your webpage is globally accessible and aligns with current best practices in web development.\n\nhtml\n<meta charset=\"utf-8\" /\n\nBest practices\n\nThe viewport meta tag is a cornerstone of responsive web design. It configures the viewport settings to match the device’s screen width, ensuring that your webpage adapts seamlessly to different screen sizes. Without this tag, mobile devices often display pages as a scaled-down version of their desktop layout, requiring users to zoom or scroll horizontally.\n\nBy specifying the initial scale and width, this tag guarantees that your content is displayed optimally on all devices, from smartphones to tablets to desktops. Additionally, it improves user experience, enhances accessibility, and supports SEO by meeting mobile-friendly standards, making it a crucial inclusion in any modern HTML document.\n\nhtml\n<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" /\nUIKIT CSS\nManagedRecommended\n\nWhen utilizing the ApplicationLayout component, the UIKIT automatically ensures the inclusion of the necessary CSS style tag within your index.html, providing seamless integration and enhanced functionality.\n\nYou no longer need to manually add the CSS style tag to your index.html. Feel free to remove it if you prefer to manage it yourself.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /, as it executes our init function.\n\nManualNot Recommended\n\nUse the CSS Stylesheet as follows (specify your required version number in the URL) if you need more control on what style you want to use.\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.1.0/rio-uikit.css\"\n\nNote: Please make sure to use the same UIKIT style version as the npm package, otherwise this will lead to inconsistency and UI bugs.\nBrand themes\nIn addition to the RIO theme, the UIKIT offers other brand-specific themes.\n\nThese other themes may only be used for applications or services who don't run on the RIO platform. All platform services have to use the RIO theme to achieve a distinct look and feel for the user when switching between services and applications.\n\nIn order to use such a brand theme, modify the URL in the <linktag that loads the CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.1.0/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.1.0/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.1.0/scania-uikit.css\"\n\nManagedRecommended\n\nYou can simply omit the <linktag in your index.html altogether. The UIKIT will automatically load the correct CSS file for you.\n\nhtml\n<html data-brand=\"vw\"\n\nhtml\n<html data-brand=\"man\"\n\nhtml\n<html data-brand=\"scania\"\nPrint styles\nThe UIKIT supports simple print stylings in order to have printable content. See Print CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.1.0/rio-uikit-print-utilities.css\"\nAdditional styling information\nIn some cases like using D3 you may need the color variables as .json from the UIKIT provided via CDN. You can fetch the provided file from CDN via the following URL:\n\nhtml\nhttps://uikit.developers.rio.cloud/2.1.0/rio-uikit-colors.json\nDark mode\nThe UIKIT is fully dark mode ready.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /as it executes our init function.\n\njsx\n<ApplicationLayout\n<ApplicationLayout.Header\n<ApplicationHeader label='RIO Service' navItems={navItems} /\n</ApplicationLayout.Header\n<ApplicationLayout.Body\n<divMy application</div\n</ApplicationLayout.Body\n</ApplicationLayout\n\njsx\n<ApplicationLayout\n<divMy widget</div\n</ApplicationLayout\n\nIn cases where the React ApplicationLayout component cannot be used, you can import the new darkmode.js from the UIKIT CDN and add it to your index.html. This script will take care of listening to the theme switch for you.\n\nhtml\n<script src=\"https://uikit.developers.rio.cloud/2.1.0/rio-darkmode.js\"</script\n\nIf you want to react on the dark mode for instance to exchange some images or apply some specific utility classes, you can use the custom hook useDarkMode to do so.\n\nTo manually enable dark mode when testing your application locally, adddata-theme=\"dark\" to the <htmltag.\nDependencies\nAs of version 1.7.0 the RIO UIKIT has the following dependencies:\n\npeerDependencies\n\njavascript\n\"react\": \"=18.0.0\"\n\"react-dom\": \"=18.0.0\"",
+    "searchText": "How to use the UIKIT\nInstall the latest version of the UIKIT (that includes latest beta versions as well) via\nHow to use the UIKIT\n- Install the npm package\n- Typescript\n- Document <head /key meta tags\n- UIKIT CSS\n- Brand themes Print styles Additional styling information Dark mode\n- UIKIT Javascript packages via CDN\n- Dependencies\n\n- Typescript\n\n- Brand themes\n- Print styles\n- Additional styling information\n- Dark mode\nInstall the npm package\njavascript\nnpm install @rio-cloud/rio-uikit\n\nOr install a dedicated version via\n\njavascript\nnpm install @rio-cloud/rio-uikit@2.2.0\nTypeScript\nThe UIKIT is built with TypeScript and defines the types inside the components.\n\nNote: Do not import types from the ./types.ts file directly as this is an internal file and subject to change. Import enums, constants and types from the declaration file together with the component.\n\njavascript\nimport AutoSuggest, { type AutoSuggestSuggestion } from \"@rio-cloud/rio-uikit/AutoSuggest\";\nimport Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\nimport TableViewToggles, { type TableViewTogglesViewType } from \"@rio-cloud/rio-uikit/TableViewToggles\";\nDocument <head /> key meta tags\nMandatory\n\nThe utf-8 meta tag is essential for ensuring that your webpage correctly displays text in a wide range of languages and symbols. By setting the character encoding to UTF-8, this tag enables support for almost all characters, including those used in non-Latin scripts, special symbols, and emojis.\n\nThis not only guarantees proper rendering of your content but also prevents common issues such as garbled or corrupted text and icons, known as mojibake. Modern web browsers and standards expect UTF-8 encoding by default, making this tag a critical component of any HTML document. Including this tag ensures your webpage is globally accessible and aligns with current best practices in web development.\n\nhtml\n<meta charset=\"utf-8\" /\n\nBest practices\n\nThe viewport meta tag is a cornerstone of responsive web design. It configures the viewport settings to match the device’s screen width, ensuring that your webpage adapts seamlessly to different screen sizes. Without this tag, mobile devices often display pages as a scaled-down version of their desktop layout, requiring users to zoom or scroll horizontally.\n\nBy specifying the initial scale and width, this tag guarantees that your content is displayed optimally on all devices, from smartphones to tablets to desktops. Additionally, it improves user experience, enhances accessibility, and supports SEO by meeting mobile-friendly standards, making it a crucial inclusion in any modern HTML document.\n\nhtml\n<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" /\nUIKIT CSS\nManagedRecommended\n\nWhen utilizing the ApplicationLayout component, the UIKIT automatically ensures the inclusion of the necessary CSS style tag within your index.html, providing seamless integration and enhanced functionality.\n\nYou no longer need to manually add the CSS style tag to your index.html. Feel free to remove it if you prefer to manage it yourself.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /, as it executes our init function.\n\nManualNot Recommended\n\nUse the CSS Stylesheet as follows (specify your required version number in the URL) if you need more control on what style you want to use.\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.2.0/rio-uikit.css\"\n\nNote: Please make sure to use the same UIKIT style version as the npm package, otherwise this will lead to inconsistency and UI bugs.\nBrand themes\nIn addition to the RIO theme, the UIKIT offers other brand-specific themes.\n\nThese other themes may only be used for applications or services who don't run on the RIO platform. All platform services have to use the RIO theme to achieve a distinct look and feel for the user when switching between services and applications.\n\nIn order to use such a brand theme, modify the URL in the <linktag that loads the CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.2.0/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.2.0/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.2.0/scania-uikit.css\"\n\nManagedRecommended\n\nYou can simply omit the <linktag in your index.html altogether. The UIKIT will automatically load the correct CSS file for you.\n\nhtml\n<html data-brand=\"vw\"\n\nhtml\n<html data-brand=\"man\"\n\nhtml\n<html data-brand=\"scania\"\nPrint styles\nThe UIKIT supports simple print stylings in order to have printable content. See Print CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.2.0/rio-uikit-print-utilities.css\"\nAdditional styling information\nIn some cases like using D3 you may need the color variables as .json from the UIKIT provided via CDN. You can fetch the provided file from CDN via the following URL:\n\nhtml\nhttps://uikit.developers.rio.cloud/2.2.0/rio-uikit-colors.json\nDark mode\nThe UIKIT is fully dark mode ready.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /as it executes our init function.\n\njsx\n<ApplicationLayout\n<ApplicationLayout.Header\n<ApplicationHeader label='RIO Service' navItems={navItems} /\n</ApplicationLayout.Header\n<ApplicationLayout.Body\n<divMy application</div\n</ApplicationLayout.Body\n</ApplicationLayout\n\njsx\n<ApplicationLayout\n<divMy widget</div\n</ApplicationLayout\n\nIn cases where the React ApplicationLayout component cannot be used, you can import the new darkmode.js from the UIKIT CDN and add it to your index.html. This script will take care of listening to the theme switch for you.\n\nhtml\n<script src=\"https://uikit.developers.rio.cloud/2.2.0/rio-darkmode.js\"</script\n\nIf you want to react on the dark mode for instance to exchange some images or apply some specific utility classes, you can use the custom hook useDarkMode to do so.\n\nTo manually enable dark mode when testing your application locally, adddata-theme=\"dark\" to the <htmltag.\nDependencies\nAs of version 1.7.0 the RIO UIKIT has the following dependencies:\n\npeerDependencies\n\njavascript\n\"react\": \"=18.0.0\"\n\"react-dom\": \"=18.0.0\"",
     "category": "Getting started",
     "section": "Welcome",
     "boost": "How to use the UIKIT start/howto #start/howto Getting started Welcome"
@@ -1274,7 +1324,7 @@
     "title": "Feature cards",
     "lead": null,
     "summary": "Lorem ipsum dolor sit amet",
-    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nUberrime stabilis ratione solio possimus pel conturbo vallum decens.\nFugit talis adipisci timidus concido cornu.\nValeo traho velociter accommodo sordeo tenax agnosco derelinquo.\nAsperiores ascit suasoria temptatio tabernus pax.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nAmiculum templum vesper vehemens antea canis annus tendo suasoria.\nCorreptius tonsor stultus antiquus barba sunt.\nAbundans agnosco cubicularis vivo.\nMolestias accusamus cotidie coniecto textus summisse theatrum astrum benevolentia.\nRead more\nLorem ipsum dolor sit amet\nAestas bonus ambitus assentator audio magnam viduo arceo vulticulus uxor.\nAddo denego decerno aspicio succedo.\nEum ipsa contego.\nUmerus tolero pectus demergo vulnero civitas agnosco tametsi.\nDolorem sulum credo voveo vos ullus.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nVallum magni terminatio numquam.\nPax appello cerno audax truculenter peior.\nTrado adicio adsidue debilito benigne usus.\nVesica arceo sufficio.\nPaens color sordeo derideo tam temeritas amitto despecto suus debitis.\n\nView detailsGet started\nCustomize\nImport your own data\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more\n\nUse on mobile\nGet the app\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nDownload now\n\nTips\nDiscover new features\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more",
+    "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nAro molestias suffoco templum.\nUllus ad tolero vorax congregatio constans acidus sub.\nSumptus clam vix ipsam placeat explicabo ancilla.\nCaute compello ullam abduco compono cariosus alter dapifer deporto umquam.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nDemulceo odit et deinde.\nAdsidue praesentium acies aqua asper neque caste cimentarius bonus confido.\nDesipio corpus torqueo vado suggero cornu creptio adulescens curriculum agnitio.\nCompello beneficium cogo tandem tabernus dignissimos curtus dedecor suppellex alter.\nRead more\nLorem ipsum dolor sit amet\nUllam depono creptio ascit valens.\nSapiente admitto accusamus sodalitas omnis unus contabesco abstergo.\nTamisium perferendis vestrum terror.\nLaudantium umbra accusantium dapifer sol summa sperno ait absque carbo.\nSuffragium sequi corporis volva caelestis dicta corroboro.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nExplicabo virtus calamitas turbo.\nViduo aufero tumultus comparo maxime aqua tamen dolorem.\nVestigium usitas spoliatio perspiciatis vita cogito assentator aeger vitae.\nCogo canis angelus capitulus ago tempus cattus blanditiis.\nTerminatio valde absens copiose admitto socius congregatio conforto desino audio.\n\nView detailsGet started\nCustomize\nImport your own data\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more\n\nUse on mobile\nGet the app\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nDownload now\n\nTips\nDiscover new features\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more",
     "category": "Templates",
     "section": "Content",
     "boost": "Feature cards templates/feature-cards #templates/feature-cards Templates Content"
@@ -1284,7 +1334,7 @@
     "title": "Form summary",
     "lead": null,
     "summary": "Request summary",
-    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personLonnie Veum\nRequested roleChief Metrics Technician\nContact emailAnderson_Thompson89@gmail.com\nAnnual budget€183,921.00\nProject descriptionVeniam tam statim amplus quis arbor tertius.\nUndique demitto armarium deludo valetudo degusto.\nDeserunt ducimus demens vinitor reiciendis desino comitatus.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
+    "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personIgnacio Hilpert\nRequested roleLead Functionality Developer\nContact emailCatherine54@hotmail.com\nAnnual budget€152,212.00\nProject descriptionTalis aureus astrum vulariter video sto censura sit cimentarius.\nCogito verecundia tamdiu volup tergo turba consuasor vulticulus catena deleo.\nCarmen ulterius incidunt corrupti neque aptus.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
     "category": "Templates",
     "section": "Forms",
     "boost": "Form summary templates/form-summary #templates/form-summary Templates Forms"
@@ -1304,7 +1354,7 @@
     "title": "List blocks",
     "lead": null,
     "summary": "Lorem ipsum dolor",
-    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nUna colo compono vado tutamen vel canis ante.\n\nStoltenberg - Dicki\nAmo sollicito recusandae molestiae acquiro talio arma demergo conspergo.\n\nConnect\n\nKuhic - Lebsack\nBene candidus cervus.\nCanto confugo adeptio clam.\n\nConnect\n\nFeeney, Leuschke and Zboncak\nAppositus villa ulterius.\n\nConnect\nMeeting type\n\nChoose the logistics session that fits your process\nFreight pickup\nSchedule cargo collection at origin\n\n30 min\n\nRoute planning\nDiscuss optimal route and ETA\n\n45 min\n\nDelivery coordination\nAlign final drop-off and documents\n\n60 min\nLorem ipsum dolor\nAverto sono demo vinitor abstergo cruciamentum tergo calculus.\n\nHirthe, Bahringer and Wunsch\nAuctor omnis velut timidus degusto.\n\nRosenbaum Inc\nAbsconditus decimus venio nulla deinde.\nPaens toties cunabula.\n\nZieme LLC\nUsque occaecati trucido dedecor ratione excepturi adiuvo solvo.\nComparo derideo curiositas substantia temporibus ambulo tui peccatus tenus.\nLorem ipsum dolor sit amet\nNeque fugit pariatur aperiam versus eaque tepidus.\nTamquam arguo summopere delectatio sum depopulo abscido aequitas deficio.\n\nHaley Inc\nSponte thalassinus amplexus speculum aer supra.\nAcquiro solitudo titulus alienus pauci laudantium voluntarius.\nAut vinculum conatus cinis acceptus caelum vacuus illo.\n\nKoelpin, Altenwerth and Maggio\nCalculus audio aequitas absum thalassinus depopulo.\nArcesso toties capillus amet explicabo.\nNon tempore vesco toties adopto annus centum socius.\n\nLindgren, Haag and Wintheiser\nCampana reiciendis pauper comminor solutio curtus venia.\nCiminatio casso cado sumo tabella.\nSpiculum deduco concido vorago abutor esse tum cervus charisma.\n\nLarson - Paucek\nDefleo commodo cognatus volubilis tergum undique concido.\nDefungo dolor vero tardus spero animi voluptatum accusamus.\nTergiversatio capillus tricesimus spes cuius vesica accusamus cuius conduco varietas.\nEnhance your application with powerful add-ons!\n\nPractical Wooden Chips\nIntroducing the Argentina-inspired Pizza, blending definitive style with local craftsmanship\n\n€83.79\nTotal per month\n\nGet Add-on\n\nOriental Granite Sausages\nThe turquoise Bike combines Argentina aesthetics with Ruthenium-based durability\n\n€96.90\nTotal per user / month\n\nGet Add-on\n\nHandmade Bamboo Cheese\nSavor the creamy essence in our Tuna, designed for memorable culinary adventures\n\n€87.29\nPer 1000 messages / month\n\nGet Add-on\n\nTasty Metal Sausages\nInnovative Shirt featuring decisive technology and Concrete construction\n\n€91.85\nTotal per user / month\n\nGet Add-on\n\nFrozen Gold Fish\nErgonomic Gloves made with Wooden for all-day wee support\n\n€36.49\nTotal per user / month\n\nGet Add-on\nFeatures\n\nRustic Concrete Shirt\nThe Webster Gloves is the latest in a series of responsible products from Hills and Sons\n\nFresh Wooden Car\nInnovative Cheese featuring unhealthy technology and Rubber construction\n\nPractical Granite Mouse\nStylish Gloves designed to make you stand out with homely looks\n\nIntelligent Granite Towels\nDiscover the queasy new Chips with an exciting mix of Ceramic ingredients\n\nFantastic Bamboo Shoes\nOur spicy-inspired Gloves brings a taste of luxury to your blue lifestyle\n\nHandmade Gold Sausages\nNew Salad model with 73 GB RAM, 854 GB storage, and well-made features",
+    "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nThermae paens aduro demonstro molestiae debilito deorsum contigo.\n\nMuller, Wyman and Fadel\nVentito ars tribuo talus ago argentum comitatus vitae subiungo.\n\nConnect\n\nStreich - Franecki\nCareo sodalitas advoco.\nUtrimque cotidie contigo varietas aurum aeger thermae.\n\nConnect\n\nMcLaughlin - Klocko\nUredo turpis veritatis amitto aurum aveho vulticulus denique cresco.\n\nConnect\nMeeting type\n\nChoose the logistics session that fits your process\nFreight pickup\nSchedule cargo collection at origin\n\n30 min\n\nRoute planning\nDiscuss optimal route and ETA\n\n45 min\n\nDelivery coordination\nAlign final drop-off and documents\n\n60 min\nLorem ipsum dolor\nCaste civis callide nostrum claudeo asper.\n\nKirlin, Shanahan and Casper\nCura defero arbitro argentum villa volup venio vestrum.\n\nHerzog - Gutkowski\nAt pax tepesco aduro tersus.\nSpargo nisi vorax a verus color id absens compello.\n\nWilkinson, Murray and Hauck\nBlanditiis similique delego desino tergeo.\nBrevis pecus vacuus.\nLorem ipsum dolor sit amet\nCatena caelum tenax porro cubitum.\nAbsum astrum viriliter.\n\nReichel - Metz\nAbundans certe solutio testimonium abeo.\nArcus vesco urbs suadeo super astrum cimentarius.\nSuppono voluptate suffoco sponte subseco vigilo cunabula corroboro triduana.\n\nGleichner, Terry and Lemke\nTextus approbo taceo arx virgo curo spectaculum suus rerum damno.\nVideo adstringo adicio aequitas caelum tabesco nemo sufficio.\nThema mollitia defessus tener tenuis ancilla truculenter tenuis textor molestiae.\n\nHickle, Nitzsche and Howell\nAmor corrigo tamisium vorago sortitus casus quibusdam addo nam.\nThema vulpes aut confugo comes subito spectaculum vivo studio cubicularis.\nAeger dolorem numquam debeo temporibus dignissimos copia.\n\nWeissnat and Sons\nAlii versus tonsor pecco adipiscor.\nAccedo demergo addo delicate.\nAdimpleo curvo cotidie comprehendo adstringo admitto esse audacia.\nEnhance your application with powerful add-ons!\n\nRefined Granite Pizza\nProfessional-grade Keyboard perfect for immense training and recreational use\n\n€37.35\nTotal per user / month\n\nGet Add-on\n\nSoft Rubber Hat\nThe sleek and gripping Hat comes with teal LED lighting for smart functionality\n\n€27.59\nTotal per month\n\nGet Add-on\n\nFrozen Plastic Computer\nErgonomic Ball made with Steel for all-day vivacious support\n\n€13.89\nTotal per month\n\nGet Add-on\n\nFantastic Cotton Soap\nNew pink Cheese with ergonomic design for cloudy comfort\n\n€85.65\nTotal per month\n\nGet Add-on\n\nRefined Bamboo Bike\nThe sleek and alert Gloves comes with pink LED lighting for smart functionality\n\n€16.60\nTotal per user / month\n\nGet Add-on\nFeatures\n\nRefined Rubber Table\nErgonomic Soap made with Marble for all-day sugary support\n\nRecycled Rubber Hat\nNew Shirt model with 62 GB RAM, 950 GB storage, and glorious features\n\nHandcrafted Rubber Hat\nOur koala-friendly Cheese ensures near comfort for your pets\n\nIntelligent Plastic Bike\nThe sky blue Computer combines Guyana aesthetics with Berkelium-based durability\n\nElegant Concrete Towels\nThe Jarvis Chicken is the latest in a series of diligent products from Welch, MacGyver and Kilback\n\nRustic Granite Fish\nFresh Pants designed with Wooden for quick performance",
     "category": "Templates",
     "section": "Content",
     "boost": "List blocks templates/list-blocks #templates/list-blocks Templates Content"
@@ -1364,7 +1414,7 @@
     "title": "Form blocks",
     "lead": null,
     "summary": "SettingsCompany display name",
-    "searchText": "Form blocks\nForm blocks\nSettingsCompany display name\nThis name will appear on your team profile page\n\nAbout the team\nWrite a short summary about your organization or group (max 240 characters).\n\nOpen-source methodical capability\n\nCompany email\nYour contact email address for customer communication\n\nDisplay email on team page\n\nOffice location\nPrimary business address used for official correspondence\n\nVermontVermont\nIowa\n\nIraqIraq\nGreece\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - EuroUSD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscardApply changes",
+    "searchText": "Form blocks\nForm blocks\nSettingsCompany display name\nThis name will appear on your team profile page\n\nAbout the team\nWrite a short summary about your organization or group (max 240 characters).\n\nUser-centric stable moratorium\n\nCompany email\nYour contact email address for customer communication\n\nDisplay email on team page\n\nOffice location\nPrimary business address used for official correspondence\n\nNevadaNevada\nAlabama\n\nCentral African RepublicCentral African Republic\nGuatemala\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - EuroUSD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscardApply changes",
     "category": "Templates",
     "section": "Forms",
     "boost": "Form blocks templates/settings-form #templates/settings-form Templates Forms"
@@ -1374,7 +1424,7 @@
     "title": "Stats blocks",
     "lead": null,
     "summary": "Stats page",
-    "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n1307 units\n\n12%from last month\n\nOpen orders\n33\n\n5%from last month\n\nIn transit\n10\n\n-3%from last month\n\nIssues\n6\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\nOrders delivered\n25M +\n\nTotal uptime\n99.99%\n\nCustomer score\n4.8\nOrders processed\n72,678\nfrom 68,345\n\n11.5%\n\nOpen rate\n43.6\nfrom 41.6\n\n3.1%\n\nError rate\n3.6\nfrom 2.4\n\n2.01%\nSeptember, 2025\nRequests sent\n185\n\nNumber of data brokers removal requests have been sent to.\n\nRequests in progress\n185\n\nNumber of data brokers that have started processing our removal requests.\n\nRequests completed\n0\n\nNumber of data brokers that checked and confirmed that they are now not holding your data.\nLorem ipsum dolor\n\nJanuaryFebruaryMarchAprilMayJune\n\nLorem ipsum dolor\n\nStatusLocationETA\n\nIn transit\nHamburg, DE2024-02-02\n\nDelivered\nRotterdam, NL2024-01-29\n\nAwaiting pickup\nWarsaw, PL2024-02-05\n\nCustoms clearance\nAntwerp, BE2024-02-03\n\nTransport ipsum dolor\n\nOn-time delivery\n\nWarehouse efficiency\n\nTruck utilization\n\nFreight cost/km\n\nFuel consumption index\n\n92%\n\n84%\n\n78%\n\n65%\n\n15%",
+    "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n1330 units\n\n12%from last month\n\nOpen orders\n23\n\n5%from last month\n\nIn transit\n12\n\n-3%from last month\n\nIssues\n6\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\nOrders delivered\n25M +\n\nTotal uptime\n99.99%\n\nCustomer score\n4.8\nOrders processed\n72,678\nfrom 68,345\n\n11.5%\n\nOpen rate\n43.6\nfrom 41.6\n\n3.1%\n\nError rate\n3.6\nfrom 2.4\n\n2.01%\nSeptember, 2025\nRequests sent\n185\n\nNumber of data brokers removal requests have been sent to.\n\nRequests in progress\n185\n\nNumber of data brokers that have started processing our removal requests.\n\nRequests completed\n0\n\nNumber of data brokers that checked and confirmed that they are now not holding your data.\nLorem ipsum dolor\n\nJanuaryFebruaryMarchAprilMayJune\n\nLorem ipsum dolor\n\nStatusLocationETA\n\nIn transit\nHamburg, DE2024-02-02\n\nDelivered\nRotterdam, NL2024-01-29\n\nAwaiting pickup\nWarsaw, PL2024-02-05\n\nCustoms clearance\nAntwerp, BE2024-02-03\n\nTransport ipsum dolor\n\nOn-time delivery\n\nWarehouse efficiency\n\nTruck utilization\n\nFreight cost/km\n\nFuel consumption index\n\n92%\n\n84%\n\n78%\n\n65%\n\n15%",
     "category": "Templates",
     "section": "Content",
     "boost": "Stats blocks templates/stats-blocks #templates/stats-blocks Templates Content"
@@ -1409,6 +1459,16 @@
     "section": "Content",
     "boost": "Data usage cards templates/usage-cards #templates/usage-cards Templates Content"
   },
+  {
+    "id": "utilities/classNames",
+    "title": "classNames",
+    "lead": "Small utility for composing CSS classes from optional string arguments. It keeps the common case readable without adding third-party runtime behavior.",
+    "summary": "Small utility for composing CSS classes from optional string arguments. It keeps the common case readable without adding third-party runtime behavior.",
+    "searchText": "classNames\nSmall utility for composing CSS classes from optional string arguments. It keeps the common case readable without adding third-party runtime behavior.\nclassNames\nUse it for patterns like: classNames('base-class', isActive && 'active', className).\n\nMigration Note\n\nThe old third-party classnames API also supported object-based syntax where object keys became class names. This worked, but it was harder to read and unnecessarily complex because the class name lived in the object key instead of being a direct argument.\n\ntsx\nclassNames('base', { inverse: isInverse, double: isDoubleSized });\nclassNames('base', { 'cursor-pointer': clickable }, className);\n\ntsx\nclassNames('base', isInverse && 'inverse', isDoubleSized && 'double');\nclassNames('base', clickable && 'cursor-pointer', className);\ntext-lefttext-centertext-right\nInclude optional border class\nThis class string is built from optional className arguments.\ntext-size-12 text-color-dark margin-bottom-20 border rounded padding-5 text-left\nmergeClassNameOverrides\nFor utility-class based styling, use mergeClassNameOverrides(defaults, overrides) to replace matching groups like margin, padding, text-size, and text-color while preserving other defaults.\nOverride classes\nDefault: padding-x-20 padding-y-20 margin-bottom-20 text-size-16 text-color-dark border rounded\nMerged: padding-x-20 text-size-16 border rounded padding-y-10 margin-bottom-0 text-color-gray\nUtility overrides replace matching groups (like padding-y-*, margin-*, text-color-*) and keep unrelated defaults.",
+    "category": "Utilities",
+    "section": "Helper",
+    "boost": "classNames utilities/classNames #utilities/classNames Utilities Helper"
+  },
   {
     "id": "utilities/deviceUtils",
     "title": "Device Utils",
@@ -1442,9 +1502,9 @@
   {
     "id": "utilities/routeUtils",
     "title": "Route Utils",
-    "lead": "Set of utility functions which helps parsing and stringify state into and from the URL.",
-    "summary": "Set of utility functions which helps parsing and stringify state into and from the URL.",
-    "searchText": "Route Utils\nSet of utility functions which helps parsing and stringify state into and from the URL.\nRoute Utils\nThese functions will combine sort props like sort order and sort direction and map table settings into a compact comma separated list where hidden columns have a leading \"-\" and the width of a column will be attached to the column name if it it different from the default.\n\nExample: http:/my-url/#demoService/table?sort=+userNickName&columns=itemId,userImageStatus,userNickName:278,userFirstName,userLastName,userActivity,userJobTitle,userEmail,userPhoneNumber\nimport qs from 'qs';\nimport { get } from 'es-toolkit/compat';\n\nimport {\nparseColumnsSettingsStrings,\nmapColumnsSettingsToStrings,\ngetSortDirShort,\nparseSorting,\ntype ColumnsSettings,\n} from '@rio-cloud/rio-uikit/routeUtils';\n\n// Adapt to your configuration\nconst BASE_PATH = 'my-service';\nconst defaultColumnsDetails: Record<string, { width: number; defaultWidth?: number }> = {\nname: {\nwidth: 250,\ndefaultWidth: 250,\n},\n};\n\n// Options for the \"qs\" library\nconst OPTIONS = {\ncomma: true, // required to parse comma separated string into array\narrayFormat: 'comma' as const, // required to stringify arrays into comma separated strings\nindices: false, // don't use array indices\nencode: false, // don't encode the entire string as it will be done individually for certain params\ndecode: false,\nskipNulls: true, // required to remove empty params\n};\n\n// Sample code for parsing the route just for illustration how to use the utils functions\n// Feel free to modify this to your needs.\n// Note: the \"parseRoute\" and \"makeRoute\" functions may contain more props which are left out in this demo\ntype RouterLike = { location?: Location };\n\nexport const parseRoute = (router: RouterLike) => {\nconst location = get(router, 'location', {}) as Location;\nconst searchParams = location.search ? location.search.replace('?', '') : location.search;\n\nconst { sort, columns } = qs.parse(searchParams, OPTIONS) as {\nsort?: string;\ncolumns?: string[] | Record<string, string>;\n};\n\nconst sorting = sort ? parseSorting(sort) : undefined;\n\nconst sortBy = sorting && typeof sorting !== 'string' ? sorting.sortBy : undefined;\nconst sortDir = sorting && typeof sorting !== 'string' ? sorting.sortDir : undefined;\n\nreturn {\nsortBy,\nsortDir,\ncolumns:\ncolumns &&\nparseColumnsSettingsStrings(\nArray.isArray(columns) ? columns : Object.values(columns || {}),\ndefaultColumnsDetails\n),\n};\n};\n\ntype mapRouteProps = {\nsortBy: string;\nsortDir: string;\ncolumns: ColumnsSettings;\n};\n\nexport const makeRoute = ({ sortBy, sortDir, columns }: mapRouteProps) => {\n// Set props to undefined or null in order to remove it from the URL when not defined\nconst params = {\nsort: sortBy && `${getSortDirShort(sortDir)}${sortBy}`,\ncolumns: columns && mapColumnsSettingsToStrings(columns),\n};\nconst queryParams = qs.stringify(params, OPTIONS);\nconst searchFragment = queryParams && `?${queryParams}`;\nreturn `${BASE_PATH}/${searchFragment}`;\n};",
+    "lead": "Utility helpers for parsing and serializing URL state. These are low-level building blocks for service-specific mapping.",
+    "summary": "Utility helpers for parsing and serializing URL state. These are low-level building blocks for service-specific mapping.",
+    "searchText": "Route Utils\nUtility helpers for parsing and serializing URL state. These are low-level building blocks for service-specific mapping.\nRoute Utils\nFor end-to-end URL sync (URL - store + store - URL), prefer the useUrlState hook. Use the route utils on this page when you need custom parse/serialize logic for specific values.\n\nFor history behavior guidance (pushState vs. replaceState), see the State in URL guideline .\n\nIf you use UrlConfigItem with useUrlState, set an explicit defaultValue for every key so removed params can reliably reset state.\nRoute utils overview\nSimple state in URL\nExample for manual parse/stringify helpers in a service file.\nimport { deserializeValue, serializeValue } from '@rio-cloud/rio-uikit/routeUtils';\n\n// Adapt to your configuration\nconst BASE_PATH = 'my-service';\nconst VIEW_OPTIONS = ['list', 'grid'] as const;\n\ntype ViewType = (typeof VIEW_OPTIONS)[number];\nconst DEFAULT_VIEW: ViewType = 'list';\nconst DEFAULT_TAB_ID = 1;\n\ntype RouterLike = { location?: Location };\ntype RouteState = {\nquery: string;\nview: ViewType;\ntabId: number;\ntags: string[];\nshowArchived: boolean;\n};\n\nconst isViewType = (value: string): value is ViewType => (VIEW_OPTIONS as readonly string[]).includes(value);\n\n/**\n* Reads URL state from a router-like object.\n* Useful when you want a lightweight parser without a hook.\n*\n* Note: Optional service helper when you only need a one-off parse.\n* For reactive state sync, use the `useUrlState` hook instead.\n*\n* @example\n* const state = parseRoute({ location: window.location });\n*/\nexport const parseRoute = (router: RouterLike): RouteState => {\nconst location = (router?.location ?? {}) as Location;\nconst params = new URLSearchParams(location.search || '');\n\nconst parsedView = deserializeValue(params.get('view'), 'string');\nconst parsedTabId = deserializeValue(params.get('tabId'), 'number');\nconst parsedTags = deserializeValue(params.get('tags'), 'array');\nconst parsedArchived = deserializeValue(params.get('archived'), 'boolean');\n\nreturn {\nquery: deserializeValue(params.get('q'), 'string') ?? '',\nview: parsedView && isViewType(parsedView) ? parsedView : DEFAULT_VIEW,\ntabId: parsedTabId ?? DEFAULT_TAB_ID,\ntags: parsedTags ?? [],\nshowArchived: parsedArchived ?? false,\n};\n};\n\n/**\n* Builds a deep-link URL for a given state.\n* Useful for linking to a screen with preselected filters.\n*\n* Note: Optional service helper when you only need to build a link.\n* For reactive state sync, use the `useUrlState` hook instead.\n*\n* @example\n* const url = makeRoute({ query: 'rio', view: 'list', tabId: 2, tags: ['banana'], showArchived: false });\n*/\nexport const makeRoute = (state: RouteState) => {\nconst params = new URLSearchParams();\n\nconst query = serializeValue(state.query, 'string');\nif (query) {\nparams.set('q', query);\n}\n\nif (state.view !== DEFAULT_VIEW) {\nconst view = serializeValue(state.view, 'string');\nif (view) {\nparams.set('view', view);\n}\n}\n\nif (state.tabId !== DEFAULT_TAB_ID) {\nconst tabId = serializeValue(state.tabId, 'number');\nif (tabId) {\nparams.set('tabId', tabId);\n}\n}\n\nconst tags = serializeValue(state.tags, 'array');\nif (tags) {\nparams.set('tags', tags);\n}\n\nif (state.showArchived) {\nconst archived = serializeValue(state.showArchived, 'boolean');\nif (archived) {\nparams.set('archived', archived);\n}\n}\n\nconst queryString = params.toString();\nreturn `${BASE_PATH}/${queryString ? `?${queryString}` : ''}`;\n};\nTableSettingsDialog state\nExample for compact sort + table settings mapping with dedicated helpers.\n\nExample: http://my-url/#demoService/table?sort=userNickName&columns=itemId,userImageStatus,userNickName:278,userFirstName,userLastName,userActivity,userJobTitle,userEmail,userPhoneNumber\nimport {\ndeserializeValue,\nmapColumnsSettingsToStrings,\nparseColumnsSettingsStrings,\nparseSorting,\nserializeSorting,\nserializeValue,\n} from '@rio-cloud/rio-uikit/routeUtils';\nimport type { SortDirectionType } from '@rio-cloud/rio-uikit/SortUtils';\nimport type { TableColumnsSettings } from '@rio-cloud/rio-uikit/TableSettingsDialog';\n\n// TableSettingsDialog state example.\n// Adapt to your configuration\nconst BASE_PATH = 'my-service';\nconst defaultColumnsDetails: Record<string, { width: number; defaultWidth?: number }> = {\nname: {\nwidth: 250,\ndefaultWidth: 250,\n},\n};\n\n// Sample code for parsing the route just for illustration how to use the utils functions\n// Feel free to modify this to your needs.\n// Note: the \"parseRoute\" and \"makeRoute\" functions may contain more props which are left out in this demo\ntype RouterLike = { location?: Location };\n\n/**\n* Reads table settings state from a router-like object.\n*\n* Note: Optional service helper when you only need a one-off parse.\n* For reactive state sync, use the `useUrlState` hook instead.\n*\n* @example\n* const state = parseRoute({ location: window.location });\n*/\nexport const parseRoute = (router: RouterLike) => {\nconst location = (router?.location ?? {}) as Location;\nconst params = new URLSearchParams(location.search || '');\n\nconst sortValue = deserializeValue(params.get('sort'), 'string');\nconst sorting = sortValue ? parseSorting(sortValue) : undefined;\n\nconst columnsList = deserializeValue(params.get('columns'), 'array');\nconst columns = columnsList ? parseColumnsSettingsStrings(columnsList, defaultColumnsDetails) : undefined;\n\nreturn {\nsortBy: sorting?.sortBy,\nsortDir: sorting?.sortDir,\ncolumns,\n};\n};\n\ntype mapRouteProps = {\nsortBy: string;\nsortDir: SortDirectionType;\ncolumns: TableColumnsSettings;\n};\n\n/**\n* Builds a deep-link URL for a given table settings state.\n*\n* Note: Optional service helper when you only need to build a link.\n* For reactive state sync, use the `useUrlState` hook instead.\n*\n* @example\n* const url = makeRoute({ sortBy: 'name', sortDir: 'ASCENDING', columns });\n*/\nexport const makeRoute = ({ sortBy, sortDir, columns }: mapRouteProps) => {\nconst params = new URLSearchParams();\n\nif (sortBy) {\n// Use serializeSorting for compact empty / - prefix behavior.\nconst serializedSort = serializeSorting({ sortBy, sortDir });\nif (serializedSort) {\nparams.set('sort', serializedSort);\n}\n}\n\nconst mappedColumns = mapColumnsSettingsToStrings(columns);\nconst serializedColumns = serializeValue(mappedColumns, 'array');\nif (serializedColumns) {\nparams.set('columns', serializedColumns);\n}\n\nconst queryString = params.toString();\nconst searchFragment = queryString ? `?${queryString}` : '';\n\nreturn `${BASE_PATH}/${searchFragment}`;\n};",
     "category": "Utilities",
     "section": "Helper",
     "boost": "Route Utils utilities/routeUtils #utilities/routeUtils Utilities Helper"
@@ -1499,6 +1559,16 @@
     "section": "Browser & device hooks",
     "boost": "useClipboard utilities/useClipboard #utilities/useClipboard Utilities Browser & device hooks"
   },
+  {
+    "id": "utilities/useCookies",
+    "title": "useCookies",
+    "lead": "The useCookies hook allows you to set cookies, delete cookies and check whether a cookie exists in the browser.",
+    "summary": "The useCookies hook allows you to set cookies, delete cookies and check whether a cookie exists in the browser.",
+    "searchText": "useCookies\nThe useCookies hook allows you to set cookies, delete cookies and check whether a cookie exists in the browser.\nuseCookies\nCookie Name\n\nCookie Value\n\nSet CookieCheck CookieDelete Cookie\n### Return value\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| setCookie | (name: string, value: string, options?: CookieOptions) =void | — | Sets a cookie with optional metadata. |\n| deleteCookie | (name: string, options?: Pick<CookieOptions, 'path' \\| 'domain') =void | — | Deletes a cookie by name. |\n| hasCookie | (name: string) =boolean | — | Returns true if the cookie exists. |\n| getCookie | (name: string) =string \\| undefined | — | Reads a cookie value. |\n### CookieOptions\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| path | string | '/' | Cookie path scope. |\n| domain | string | — | Cookie domain scope (for example .rio.cloud). |\n| expires | Date \\| string | — | Absolute expiration date for the cookie. |\n| maxAge | number | — | Cookie lifetime in seconds. |\n| sameSite | CookieSameSite | — | Cross-site cookie behavior. Possible values are: Strict Lax None |\n| secure | boolean | — | Adds the Secure flag so the cookie is sent over HTTPS only. |",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "boost": "useCookies utilities/useCookies #utilities/useCookies Utilities Browser & device hooks"
+  },
   {
     "id": "utilities/useCount",
     "title": "useCount",
@@ -1524,7 +1594,7 @@
     "title": "useDebugInfo",
     "lead": "The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.",
     "summary": "The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.",
-    "searchText": "useDebugInfo\nThe useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.\nuseDebugInfo\nComponent props:isToggled: false\ncount: 0\n\nDebug Info:{\n\"renderCount\": 1,\n\"changedProps\": {},\n\"timeSinceLastRender\": 0,\n\"lastRenderTimestamp\": 1770127563175\n}\n\nToggleIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| component | String | — | The name of the component that will be printed out. |\n| props | Object | — | The component props that will be checked for changed values. |",
+    "searchText": "useDebugInfo\nThe useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.\nuseDebugInfo\nComponent props:isToggled: false\ncount: 0\n\nDebug Info:{\n\"renderCount\": 1,\n\"changedProps\": {},\n\"timeSinceLastRender\": 0,\n\"lastRenderTimestamp\": 1771861796836\n}\n\nToggleIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| component | String | — | The name of the component that will be printed out. |\n| props | Object | — | The component props that will be checked for changed values. |",
     "category": "Utilities",
     "section": "UI state & input hooks",
     "boost": "useDebugInfo utilities/useDebugInfo #utilities/useDebugInfo Utilities UI state & input hooks"
@@ -1759,6 +1829,16 @@
     "section": "DOM behavior hooks",
     "boost": "useResizeObserver utilities/useResizeObserver #utilities/useResizeObserver Utilities DOM behavior hooks"
   },
+  {
+    "id": "utilities/useRioCookieConsent",
+    "title": "useRioCookieConsent",
+    "lead": "The useRioCookieConsent hook reads and parses RIO's cookie_settings cookie and returns a typed consent state.",
+    "summary": "The useRioCookieConsent hook reads and parses RIO's cookie_settings cookie and returns a typed consent state.",
+    "searchText": "useRioCookieConsent\nThe useRioCookieConsent hook reads and parses RIO's cookie_settings cookie and returns a typed consent state.\nuseRioCookieConsent\nCheck RIO cookie disclaimer status\n### Return value\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| getRioCookieConsentInfo | () =RioCookieConsentInfo | — | Reads and parses the RIO cookie consent settings. |\n### RioCookieConsentInfo\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| cookieName | 'cookie_settings' | — | Name of the RIO consent cookie. |\n| isSet | boolean | — | Indicates whether the consent cookie exists. |\n| rawValue | string | — | Raw cookie value as read from document.cookie. |\n| parsedValue | Record<string, number| — | Parsed and normalized cookie switches when JSON parsing succeeds. |\n| uxCookiesAccepted | boolean | — | True when UX cookies are accepted (switch-49 === 1). |\n| marketingCookiesAccepted | boolean | — | True when marketing cookies are accepted (switch-2 === 1). |\n| status | RioCookieConsentStatus | — | Computed consent status derived from parsed cookie values. |",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "boost": "useRioCookieConsent utilities/useRioCookieConsent #utilities/useRioCookieConsent Utilities Browser & device hooks"
+  },
   {
     "id": "utilities/useScrollPosition",
     "title": "useScrollPosition",
@@ -1779,6 +1859,16 @@
     "section": "UI state & input hooks",
     "boost": "useSearch utilities/useSearch #utilities/useSearch Utilities UI state & input hooks"
   },
+  {
+    "id": "utilities/useSearchHighlight",
+    "title": "useSearchHighlight",
+    "lead": "The useSearchHighlight hook applies native CSS Highlight API ranges to matching text in a referenced container. It progressively enhances supported browsers without mutating markup and can be scoped or made case-sensitive as needed.",
+    "summary": "The useSearchHighlight hook applies native CSS Highlight API ranges to matching text in a referenced container. It progressively enhances supported browsers without mutating markup and can be scoped or made case-sensitive as needed.",
+    "searchText": "useSearchHighlight\nThe useSearchHighlight hook applies native CSS Highlight API ranges to matching text in a referenced container. It progressively enhances supported browsers without mutating markup and can be scoped or made case-sensitive as needed.\nuseSearchHighlight\nFor simple cases, the <SearchHighlightTextcomponent wraps the hook and provides amark fallback when the Highlight API is unavailable.\n\nUse it when you just need to highlight a single string without managing refs or DOM scopes. For complex layouts (tables, lists, or rich markup), prefer useSearchHighlight so you can target a container and control when highlights refresh.\nShipments8\n\nShipment idOriginDestinationStatus\n\nRIO-100284Hamburg, DERotterdam, NLIn transit\nRIO-100317Berlin, DEPrague, CZDelivered\nRIO-100411Munich, DEVienna, ATDelayed\nRIO-100512Cologne, DEParis, FRCustoms\nRIO-100640Leipzig, DEZurich, CHIn transit\nRIO-100771Stuttgart, DEMilan, ITDelivered\nRIO-100889Frankfurt, DEWarsaw, PLIn transit\nRIO-101002Dresden, DECopenhagen, DKDelayed\n\nCase-sensitive search\n### useSearchHighlight\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.RefObject<HTMLElement| — | Ref to the element whose text content should be searched. |\n| query | string | — | Search query used for highlighting. |\n| highlightClassName | string | 'search-result-highlight' | Name of the CSS highlight. |\n| scopeSelector | string | — | Optional selector to limit the search scope (e.g. '.ListMenuGroup' or '.OptionLabel'). |\n| caseSensitive | boolean | false | Whether to perform a case-sensitive match. |\n| deps | unknown[] | — | Optional dependencies that should trigger re-collecting and applying ranges. Useful when the DOM changes after the query changes (e.g. debounced filtering). |\n### SearchHighlightText\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| text | string | — | Full text content to render and highlight. |\n| query | string | — | Search query used to highlight matches within the text. |\n| caseSensitive | boolean | false | Whether to perform a case-sensitive match. |\n| highlightClassName | string | 'search-result-highlight' | Optional CSS highlight class name (used by the Highlight API). |\n| classNames | string | — | Optional additional classes applied to the wrapper element. |\nShipments8\n\nRIO-100284\nIn transit\nOrigin: Hamburg, DE\nDestination: Rotterdam, NL\n\nRIO-100317\nDelivered\nOrigin: Berlin, DE\nDestination: Prague, CZ\n\nRIO-100411\nDelayed\nOrigin: Munich, DE\nDestination: Vienna, AT\n\nRIO-100512\nCustoms\nOrigin: Cologne, DE\nDestination: Paris, FR\n\nRIO-100640\nIn transit\nOrigin: Leipzig, DE\nDestination: Zurich, CH\n\nRIO-100771\nDelivered\nOrigin: Stuttgart, DE\nDestination: Milan, IT\n\nRIO-100889\nIn transit\nOrigin: Frankfurt, DE\nDestination: Warsaw, PL\n\nRIO-101002\nDelayed\nOrigin: Dresden, DE\nDestination: Copenhagen, DK\n### useSearchHighlight\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.RefObject<HTMLElement| — | Ref to the element whose text content should be searched. |\n| query | string | — | Search query used for highlighting. |\n| highlightClassName | string | 'search-result-highlight' | Name of the CSS highlight. |\n| scopeSelector | string | — | Optional selector to limit the search scope (e.g. '.ListMenuGroup' or '.OptionLabel'). |\n| caseSensitive | boolean | false | Whether to perform a case-sensitive match. |\n| deps | unknown[] | — | Optional dependencies that should trigger re-collecting and applying ranges. Useful when the DOM changes after the query changes (e.g. debounced filtering). |\n### SearchHighlightText\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| text | string | — | Full text content to render and highlight. |\n| query | string | — | Search query used to highlight matches within the text. |\n| caseSensitive | boolean | false | Whether to perform a case-sensitive match. |\n| highlightClassName | string | 'search-result-highlight' | Optional CSS highlight class name (used by the Highlight API). |\n| classNames | string | — | Optional additional classes applied to the wrapper element. |\nSearchHighlightText\nHighlight in textShipment RIO-100284 departed Hamburg, DE and is scheduled to arrive in Rotterdam, NL. The next leg routes through Cologne, DE with customs clearance pending. Contact the logistics desk for status updates or delays.\n### useSearchHighlight\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.RefObject<HTMLElement| — | Ref to the element whose text content should be searched. |\n| query | string | — | Search query used for highlighting. |\n| highlightClassName | string | 'search-result-highlight' | Name of the CSS highlight. |\n| scopeSelector | string | — | Optional selector to limit the search scope (e.g. '.ListMenuGroup' or '.OptionLabel'). |\n| caseSensitive | boolean | false | Whether to perform a case-sensitive match. |\n| deps | unknown[] | — | Optional dependencies that should trigger re-collecting and applying ranges. Useful when the DOM changes after the query changes (e.g. debounced filtering). |\n### SearchHighlightText\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| text | string | — | Full text content to render and highlight. |\n| query | string | — | Search query used to highlight matches within the text. |\n| caseSensitive | boolean | false | Whether to perform a case-sensitive match. |\n| highlightClassName | string | 'search-result-highlight' | Optional CSS highlight class name (used by the Highlight API). |\n| classNames | string | — | Optional additional classes applied to the wrapper element. |",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "boost": "useSearchHighlight utilities/useSearchHighlight #utilities/useSearchHighlight Utilities UI state & input hooks"
+  },
   {
     "id": "utilities/useSorting",
     "title": "useSorting",
@@ -1814,7 +1904,7 @@
     "title": "useTableExport",
     "lead": "The useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.",
     "summary": "The useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.",
-    "searchText": "useTableExport\nThe useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.\nuseTableExport\nExport data\n\nIdFirst nameLast nameE-mail\n\n1RaymondBarrowsAlanis62@yahoo.com\n2JeremyO'ReillyNaomi.Hauck@yahoo.com\n3LukasHerzogNickolas28@gmail.com\n4DennisDouglasSilas.Pfeffer@hotmail.com\n5CamdenVonJasper_Leuschke@gmail.com\n6AndrewWindlerKane.Fisher14@yahoo.com\n7UrbanJakubowskiRylee_Price@hotmail.com\n8StanleyBosco-SchillerNona_Schuster50@hotmail.com\n9MaidaLoweNorris_Goldner@gmail.com\n10BreanneNitzscheIsmael_Ratke73@hotmail.com\n### Options of the returned exportToCSV function\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | T[] | — | Array of data objects to export. Each object represents one row in the table. |\n| fileName | string | export.csv | Optional name for the exported file. |\n| columns | (keyof T)[] | — | Optional list of object keys to export as columns. If omitted, all keys from the first row will be used. |\n| headers | Partial<Record<keyof T, string| — | Optional map of column keys to custom header labels. Example: { firstName: 'First Name' } |\n| delimiter | string | , | Optional delimiter to use between values in the CSV. You can use \";\" or \"\\t\" for other formats. |\n| withBom | boolean | true | Whether to include UTF-8 BOM (useful for Excel). |",
+    "searchText": "useTableExport\nThe useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.\nuseTableExport\nExport data\n\nIdFirst nameLast nameE-mail\n\n1WilliamWillmsBurnice.Pouros@yahoo.com\n2KayliMcKenzieJody.Jaskolski99@gmail.com\n3LawrenceHerzogTina_Hegmann97@yahoo.com\n4ThurmanRauClaudie.Borer@yahoo.com\n5AntoniaSchneiderDoreen.Prosacco34@hotmail.com\n6RicardoOkunevaTina_Zemlak1@gmail.com\n7GustavoMayertNoel_Quigley82@hotmail.com\n8BerniceBoyleHerman_Tromp@hotmail.com\n9JamarConnElvera37@yahoo.com\n10LetitiaKlingHector_Kozey6@hotmail.com\n### Options of the returned exportToCSV function\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | T[] | — | Array of data objects to export. Each object represents one row in the table. |\n| fileName | string | export.csv | Optional name for the exported file. |\n| columns | (keyof T)[] | — | Optional list of object keys to export as columns. If omitted, all keys from the first row will be used. |\n| headers | Partial<Record<keyof T, string| — | Optional map of column keys to custom header labels. Example: { firstName: 'First Name' } |\n| delimiter | string | , | Optional delimiter to use between values in the CSV. You can use \";\" or \"\\t\" for other formats. |\n| withBom | boolean | true | Whether to include UTF-8 BOM (useful for Excel). |",
     "category": "Utilities",
     "section": "Table & data hooks",
     "boost": "useTableExport utilities/useTableExport #utilities/useTableExport Utilities Table & data hooks"
@@ -1824,7 +1914,7 @@
     "title": "useTableSelection",
     "lead": "The useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.",
     "summary": "The useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.",
-    "searchText": "useTableSelection\nThe useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.\nuseTableSelection\nNote: , when using a checkbox column for multi-selection and a column for some action buttons, make sure to apply the classes \"table-checkbox\" and \"table-action\" to the respective row \"td\" elements. The latter class automatically stops event propagation, preventing the row from being selected when an action button is clicked.\nActive row\n-\n\nIdFirst nameLast nameE-mail\n\n1FranciscoRempelKeegan_Bauch@gmail.com\n2JerrellStarkJosh.Nikolaus55@yahoo.com\n3DeclanMannHosea_Gorczany@yahoo.com\n4SusieCroninNeha97@gmail.com\n5SaigeBogisichDavid37@gmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all ItemsSelect some rows\n\nIdFirst nameLast nameE-mail\n\n1MelyssaBoscoGreta.Lowe18@yahoo.com\n\n2LeonErnserBeatrice60@hotmail.com\n\n3MariamRempelGerhard80@hotmail.com\n\n4MercedesYundtCasey_Swaniawski48@gmail.com\n\n5MableLangoshMafalda.Wuckert96@yahoo.com\n\n6DannieHoweJenifer40@yahoo.com\n\n7KennediSchusterDestiny_Rogahn18@hotmail.com\n\n8WillardKundeNels_Weissnat68@hotmail.com\n\n9AlvisBotsfordGeorge.Raynor16@gmail.com\n\n10GretaKleinArianna_Boyle75@hotmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
+    "searchText": "useTableSelection\nThe useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.\nuseTableSelection\nNote: , when using a checkbox column for multi-selection and a column for some action buttons, make sure to apply the classes \"table-checkbox\" and \"table-action\" to the respective row \"td\" elements. The latter class automatically stops event propagation, preventing the row from being selected when an action button is clicked.\nActive row\n-\n\nIdFirst nameLast nameE-mail\n\n1JesseHilpertLexus.Will@yahoo.com\n2LuellaLittelCasey.Trantow@yahoo.com\n3BeulahBartellBrady.Nader@gmail.com\n4DionLubowitzPerry33@gmail.com\n5TerrellBechtelarShirley32@gmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all ItemsSelect some rows\n\nIdFirst nameLast nameE-mail\n\n1JudithHalvorsonChasity_Johnston@yahoo.com\n\n2LouTorphy-CollinsStacey74@gmail.com\n\n3DerekOndrickaCarolina83@hotmail.com\n\n4AllenSpinkaDawn_Lowe39@hotmail.com\n\n5BruceKuvalisKay.Deckow73@yahoo.com\n\n6EmilioBaumbachJuanita.Hilpert23@hotmail.com\n\n7DarinJohnsonTwila.Leannon14@yahoo.com\n\n8DallasKoelpinRusty_Thompson-Lehner99@gmail.com\n\n9MauriceSwift-KemmerTim.Hamill65@gmail.com\n\n10GeovanniConroyAugust95@hotmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
     "category": "Utilities",
     "section": "Table & data hooks",
     "boost": "useTableSelection utilities/useTableSelection #utilities/useTableSelection Utilities Table & data hooks"
@@ -1849,6 +1939,16 @@
     "section": "Lifecycle & execution hooks",
     "boost": "useToggle utilities/useToggle #utilities/useToggle Utilities Lifecycle & execution hooks"
   },
+  {
+    "id": "utilities/useUrlState",
+    "title": "useUrlState",
+    "lead": "The useUrlState hook keeps store state and URL search params in sync. Define a config once and use the hook to read URL state into the store and write store changes back to the URL.",
+    "summary": "The useUrlState hook keeps store state and URL search params in sync. Define a config once and use the hook to read URL state into the store and write store changes back to the URL.",
+    "searchText": "useUrlState\nThe useUrlState hook keeps store state and URL search params in sync. Define a config once and use the hook to read URL state into the store and write store changes back to the URL.\nuseUrlState\nThis example uses React Router (useLocation, useNavigate, useNavigationType), but the hook also works without it.\n\nIn this demo, useReducer is used as a lightweight stand-in for a Redux store.\n\nPrefer a single useUrlState instance as the writer and share its state via props or context. Multiple components writing independently can overwrite each other’s URL updates.\n\nEach UrlConfigItem requires an explicit defaultValue so removed URL params can reliably reset state.\n\nHistory behavior: history: 'push' always creates a new entry. history: 'replace' replaces updates, but still pushes once when a value changes from default to non-default, so users can navigate back to the pre-edit state.\n\nFurther information For guidance on what should live in URLs, see the State in URL guideline. For route-specific parsing examples, visit the Route utils page.\nURL\nSearch query\n\nView modelistgrid\nAmount (default: 1)\nTags (picklist)\nBanana\nPeach\nPear\nStrawberry\n\nShow archived\n(default: \"false\" - will be omitted from the URL)\nCurrent URL state (stored in my-service/#)\n{\n\"query\": \"\",\n\"view\": \"list\",\n\"amount\": 1,\n\"tags\": [],\n\"showArchived\": false\n}\n### useUrlState\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| config | readonly UrlConfigItem<TState, any[] | — | URL sync configuration. Each entry maps one query param key to a store selector and update action. |\n| searchString | QueryString | — | Current URL search string (for example location.search). Expected shape: '?q=test&sort=-name' or ''. |\n| storeValues | Record<string, unknown| — | Current store values used by the configured selectors. This could be values from a redux store. Keys should match the config keys, values are compared against URL/defaults. |\n| localStorageKey | string | — | Optional localStorage key for sticky URL state restore on initial load when managed URL params are missing. |\n| navigationType | 'POP' \\| 'PUSH' \\| 'REPLACE' \\| string | — | Router navigation type (typically from React Router useNavigationType). POP indicates browser back/forward navigation. |\n| onUpdateStore | (action: any) =void | — | Store update callback invoked when URL -store sync detects a change. Usually wraps dispatch(...). |\n| onNavigate | (search: string, historyMode: 'push' \\| 'replace') =void | — | Navigation callback used for store -URL sync writes. historyMode controls whether to push or replace the history entry. |",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "boost": "useUrlState utilities/useUrlState #utilities/useUrlState Utilities UI state & input hooks"
+  },
   {
     "id": "utilities/useWindowResize",
     "title": "useWindowResize",